/*!
 * MISTER FAST V3.1.2
 * LiveMapChat MINI Sidebar Icon Rollout
 * Scope: .mf312-icon-drawer only
 */

.mf312-icon-drawer header b{
  display:flex;
  align-items:center;
  gap:10px;
}

.mf312-header-icon{
  width:27px;
  height:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.mf312-header-icon img{
  width:25px;
  height:25px;
  display:block;
  object-fit:contain;
  filter:brightness(0) invert(1);
}

.mf312-icon-drawer nav > a,
.mf312-icon-drawer nav > button{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  column-gap:14px;
  min-height:66px;
  padding:8px 14px;
  border-radius:18px;
  line-height:1.2;
}

.mf312-icon-drawer nav > a > span:not(.mf312-menu-icon),
.mf312-icon-drawer nav > button > span:not(.mf312-menu-icon){
  min-width:0;
  font-weight:700;
}

.mf312-menu-icon{
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  background:#fff;
  border:1px solid rgba(0,61,165,.09);
  box-shadow:0 7px 18px rgba(0,61,165,.14);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.mf312-menu-icon img{
  width:33px;
  height:33px;
  display:block;
  object-fit:contain;
}

.mf312-icon-drawer nav > a:hover .mf312-menu-icon,
.mf312-icon-drawer nav > button:hover .mf312-menu-icon{
  transform:translateY(-2px);
  box-shadow:0 11px 23px rgba(0,61,165,.20);
}

.mf312-icon-drawer nav > a.is-active,
.mf312-icon-drawer nav > button.is-active{
  color:#003DA5;
  background:linear-gradient(135deg,#FFF5B8 0%,#FFD548 100%);
  box-shadow:0 10px 24px rgba(255,196,0,.24);
}

.mf312-icon-drawer nav > a.is-active .mf312-menu-icon,
.mf312-icon-drawer nav > button.is-active .mf312-menu-icon{
  background:rgba(255,255,255,.72);
  border-color:rgba(255,196,0,.42);
  box-shadow:0 8px 20px rgba(0,61,165,.14);
  transform:scale(1.03);
}

.mf312-icon-drawer .mf6343-menu-badge{
  position:static;
  margin-left:auto;
  justify-self:end;
}

.mf312-icon-drawer .mf312-logout-link{
  color:#D92D20;
  border-top:1px solid rgba(23,52,92,.10);
  margin-top:5px;
  padding-top:11px;
}

.mf312-icon-drawer .mf312-logout-link:hover{
  background:#FFF2F0;
}

.mf312-notification-icon img{
  transform-origin:50% 20%;
}

.mf312-icon-drawer nav > button[data-mf63-view="notifications"]:hover .mf312-notification-icon img{
  animation:mf312-ring .75s ease-in-out;
}

@keyframes mf312-ring{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-10deg)}
  50%{transform:rotate(10deg)}
  75%{transform:rotate(-6deg)}
}

@media (max-width:600px){
  .mf312-icon-drawer nav > a,
  .mf312-icon-drawer nav > button{
    grid-template-columns:44px minmax(0,1fr) auto;
    min-height:62px;
    padding:7px 12px;
    column-gap:12px;
  }

  .mf312-menu-icon{
    width:43px;
    height:43px;
    border-radius:14px;
  }

  .mf312-menu-icon img{
    width:31px;
    height:31px;
  }
}

@media (prefers-reduced-motion:reduce){
  .mf312-menu-icon,
  .mf312-notification-icon img{
    transition:none !important;
    animation:none !important;
  }
}