/* Vchat 0.36.70 — clickable department selector */

.vchat-modal .vchat-choice-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}

.vchat-modal .vchat-department-select-card{
  position:relative!important;
  display:block!important;
  min-height:66px!important;
  margin:0!important;
  border:1px solid #ded9e9!important;
  border-radius:14px!important;
  background:#fff!important;
  cursor:pointer!important;
  user-select:none!important;
  overflow:hidden!important;
  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease!important;
}

.vchat-modal .vchat-department-select-card:hover{
  border-color:#bfb5e2!important;
  background:#fcfbff!important;
}

.vchat-modal .vchat-department-select-card:focus-visible{
  outline:none!important;
  border-color:#6a56b9!important;
  box-shadow:0 0 0 3px rgba(106,86,185,.14)!important;
}

.vchat-modal .vchat-department-select-card.is-selected{
  border-color:#6a56b9!important;
  background:#f5f2ff!important;
  box-shadow:0 0 0 2px rgba(106,86,185,.08)!important;
}

.vchat-modal .vchat-department-select-card>input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

.vchat-modal .vchat-department-select-card>span{
  position:relative!important;
  display:grid!important;
  grid-template-columns:10px minmax(0,1fr) 22px!important;
  grid-template-rows:auto auto!important;
  column-gap:10px!important;
  align-items:center!important;
  min-height:66px!important;
  padding:12px 14px!important;
  box-sizing:border-box!important;
}

.vchat-modal .vchat-department-select-card>span>i{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  width:8px!important;
  height:8px!important;
  border-radius:999px!important;
  background:var(--department-color,#6554b8)!important;
}

.vchat-modal .vchat-department-select-card>span>b{
  grid-column:2!important;
  grid-row:1!important;
  color:#2d2840!important;
  font-size:11.5px!important;
  line-height:1.3!important;
  font-weight:850!important;
}

.vchat-modal .vchat-department-select-card>span>small{
  grid-column:2!important;
  grid-row:2!important;
  margin-top:3px!important;
  color:#8b8495!important;
  font-size:9px!important;
  line-height:1.35!important;
  font-weight:650!important;
}

.vchat-modal .vchat-department-selected-mark{
  grid-column:3!important;
  grid-row:1 / span 2!important;
  display:grid!important;
  place-items:center!important;
  width:22px!important;
  height:22px!important;
  border:1px solid #d8d2e4!important;
  border-radius:7px!important;
  background:#fff!important;
  color:transparent!important;
  font-size:11px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:900!important;
  transition:.16s ease!important;
}

.vchat-modal .vchat-department-select-card.is-selected .vchat-department-selected-mark{
  border-color:#6a56b9!important;
  background:#6a56b9!important;
  color:#fff!important;
}

@media(max-width:620px){
  .vchat-modal .vchat-choice-grid{
    grid-template-columns:1fr!important;
  }
}