.permissions-layout{
  display:grid;
  grid-template-columns:
    minmax(300px,420px)
    minmax(0,1fr);
  gap:20px;
  align-items:start;
}

.permission-fieldset{
  margin:8px 0 2px;
  padding:14px;
  border:1px solid #d0d5dd;
  border-radius:9px;
}

.permission-fieldset legend{
  padding:0 6px;
  font-weight:800;
}

.permission-options{
  display:grid;
  gap:9px;
}

.permission-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 11px;
  border:1px solid #e4e7ec;
  border-radius:8px;
  background:#fbfcfd;
  cursor:pointer;
}

.permission-option input{
  width:18px;
  height:18px;
  margin-top:2px;
  flex:0 0 auto;
}

.permission-option span{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.permission-option strong{
  color:#101828;
}

.permission-option small{
  color:#667085;
  line-height:1.35;
}

.permission-user-list{
  display:grid;
  gap:14px;
}

.permission-user-card{
  padding:15px;
  border:1px solid #e4e7ec;
  border-radius:10px;
  background:#fff;
}

.permission-user-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
  margin-bottom:13px;
}

.permission-user-head > div{
  min-width:0;
}

.permission-user-head strong{
  display:block;
  font-size:1rem;
}

.permission-user-head span{
  display:block;
  margin-top:3px;
  color:#667085;
  overflow-wrap:anywhere;
}

.permission-role{
  padding:4px 8px;
  border-radius:999px;
  background:#eef2f6;
  color:#344054 !important;
  font-size:.75rem;
  font-weight:800;
  white-space:nowrap;
}

.permission-user-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}


@media(max-width:900px){
  .permissions-layout{
    grid-template-columns:1fr;
  }
}


@media(max-width:600px){
  .permission-user-head{
    flex-direction:column;
  }

  .permission-user-actions{
    justify-content:stretch;
  }

  .permission-user-actions .btn{
    width:100%;
  }
}