/* Member mobile drawer aligned with the reference layout. */
@media(max-width:640px){
  .betsnice-mobile-drawer{top:50px;width:335px;max-width:88vw;background:#303030!important}
  .betsnice-mobile-drawer .mobile-drawer-member{background:#303030;border-bottom:1px solid #424242}
  .betsnice-mobile-drawer .mobile-drawer-member>a{min-height:52px;padding:0 13px;border-bottom:1px solid #444;color:#eee;font-size:12px}
  .betsnice-mobile-drawer .mobile-drawer-member>a>svg:first-child{width:31px;height:31px;padding:7px;background:#494949;color:#ddd}
  .betsnice-mobile-drawer .mobile-drawer-member>a b{color:#e4cf14;font-weight:500}
  .betsnice-mobile-drawer .mobile-drawer-member>div{gap:9px;padding:10px 8px 12px}
  .betsnice-mobile-drawer .mobile-drawer-member>div a{height:44px;border:1px solid #484848;border-radius:3px;background:#303030;color:#eee;font-size:12px}
  .betsnice-mobile-drawer .mobile-drawer-member>div a:first-child{border-color:#ffe000;background:linear-gradient(90deg,#ffe000,#ffc300);color:#111}
  .betsnice-mobile-drawer .mobile-provider-switch{margin:10px 8px 13px;border:1px solid #ffe000;background:#2c2c2c}
  .betsnice-mobile-drawer .mobile-provider-switch button{font-size:13px}
  .betsnice-mobile-drawer .mobile-provider-switch button.active{background:linear-gradient(90deg,#ffe000,#ffc300);color:#111}
  .betsnice-mobile-drawer .mobile-drawer-main{margin:0 18px 8px;padding-left:51px}
  .betsnice-mobile-drawer .mobile-drawer-main:before{z-index:0;width:47px;border-radius:24px;background:linear-gradient(#ffe000,#ffc300)}
  .betsnice-mobile-drawer .mobile-drawer-main a{z-index:1;min-height:47px;font-size:13px}
  .betsnice-mobile-drawer .mobile-drawer-main a span{left:-43px;width:30px;color:#111}
  .betsnice-mobile-drawer .mobile-drawer-secondary{padding:6px 22px 14px}
  .betsnice-mobile-drawer .mobile-drawer-secondary a{min-height:47px;color:#eee;font-size:13px}
}

/* Readable notification drawer on desktop and mobile. */
.notification-drawer-panel{width:min(500px,100vw)}
.notification-drawer-panel>header{height:64px;padding-inline:17px}
.notification-drawer-panel h2{font-size:20px}
.notification-drawer-filters{height:48px}
.notification-drawer-filters button{font-size:12px}
.notification-drawer-list{height:calc(100dvh - 112px);padding:10px}
.notification-drawer-list article{grid-template-columns:46px minmax(0,1fr);padding:12px 10px;margin-bottom:9px}
.notification-drawer-icon{width:34px;height:34px}
.notification-drawer-content b{font-size:13px;line-height:1.35}
.notification-drawer-content p{font-size:11px;line-height:1.5;-webkit-line-clamp:2}
.notification-drawer-content time{font-size:9px}

@media(max-width:640px){
  .notification-drawer-panel{width:100vw}
  .notification-drawer-panel>header{height:58px;padding-inline:10px}
  .notification-drawer-panel h2{font-size:17px}
  .notification-drawer-title i{min-width:21px;height:21px;font-size:10px}
  .notification-drawer-panel>header .notification-mark-all{height:32px;max-width:145px;font-size:9px}
  .notification-drawer-filters{height:44px}
  .notification-drawer-filters button{font-size:10px}
  .notification-drawer-list{height:calc(100dvh - 102px);padding:7px}
  .notification-drawer-list article{grid-template-columns:39px minmax(0,1fr);padding:10px 7px;margin-bottom:7px}
  .notification-drawer-icon{width:30px;height:30px}
  .notification-drawer-icon svg{width:15px;height:15px}
  .notification-drawer-content b{font-size:11px}
  .notification-drawer-content p{margin-top:4px;font-size:10px;line-height:1.45}
  .notification-drawer-content time{font-size:8px}
}