/*
 * XCHAT_CSS_V2_USERS_DRAWER_CHROME_OWNER_V1
 *
 * Canonical owner of responsive drawer chrome:
 * button / header / overlay.
 *
 * .xc-side container and presence rows
 * intentionally remain outside this file
 * until their dedicated migration stages.
 */

@media (max-width: 700px) {
  .xc-mobile-users-btn {
      display: inline-flex !important;
  
      align-items: center;
      justify-content: center;
  
      flex: 0 0 auto;
  
      min-width: 92px;
      height: 34px;
  
      padding: 0 10px;
  
      border: 1px solid #5d83d9;
      border-radius: 5px;
  
      background: #071332;
      color: #67ea91;
  
      font: 700 13px Verdana, Arial, sans-serif;
  
      white-space: nowrap;
  
      cursor: pointer;
      touch-action: manipulation;
    }
}

@media (max-width: 700px) {
  .xc-mobile-users-btn:active {
      background: #10265c;
    }
}

@media (max-width: 700px) {
  .xc-mobile-side-head {
      display: flex !important;
  
      align-items: center !important;
      justify-content: space-between !important;
  
      flex: 0 0 44px !important;
  
      width: 100%;
      min-height: 44px !important;
  
      padding: 5px 6px 5px 12px !important;
  
      border-bottom: 1px solid #344b93 !important;
  
      background:
        linear-gradient(
          180deg,
          #0a183e 0%,
          #06102c 100%
        )
        !important;
  
      color: #fff;
  
      font: 700 14px Verdana, Arial, sans-serif !important;
    }
}

@media (max-width: 700px) {
  .xc-side-overlay {
      position: fixed !important;
  
      z-index: 10010 !important;
  
      inset: 0 !important;
  
      display: none !important;
  
      background: rgba(0, 0, 0, .52) !important;
  
      /*
       * XCHAT_USERS_DRAWER_SHARP_BACKDROP_V1
       *
       * Keep dark dimming without raster blur.
       */
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
  
      opacity: 0;
      visibility: hidden;
  
      pointer-events: none;
  
      transition:
        opacity .18s ease,
        visibility .18s ease;
    }
}

@media (max-width: 700px) {
  .xc-side-overlay.active {
      opacity: 1;
      visibility: visible;
  
      pointer-events: auto;
    }
}

@media (min-width: 701px) {
  .xc-mobile-users-btn,
  .xc-mobile-side-head,
  .xc-side-overlay {
      display: none !important;
    }
}

@media (min-width: 701px) and (max-width: 1024px) {
  html.xc-phone-landscape .xc-mobile-users-btn {
      display: inline-flex !important;
  
      align-items: center !important;
      justify-content: center !important;
  
      flex: 0 0 auto !important;
  
      min-width: 82px !important;
      height: 28px !important;
  
      padding: 0 8px !important;
  
      border:
        1px solid
        #5d83d9 !important;
  
      border-radius:
        5px !important;
  
      background:
        #071332 !important;
  
      color:
        #67ea91 !important;
  
      font:
        700 12px
        Verdana,
        Arial,
        sans-serif
        !important;
  
      white-space:
        nowrap !important;
  
      touch-action:
        manipulation;
    }
}

@media (min-width: 701px) and (max-width: 1024px) {
  html.xc-phone-landscape .xc-mobile-side-head {
      display: flex !important;
  
      align-items: center !important;
      justify-content: space-between !important;
  
      flex:
        0 0 36px !important;
  
      width: 100% !important;
      min-height: 36px !important;
  
      padding:
        3px
        5px
        3px
        10px
        !important;
  
      border-bottom:
        1px solid
        #344b93 !important;
  
      background:
        #071433 !important;
  
      color:
        #fff !important;
  
      font:
        700 13px
        Verdana,
        Arial,
        sans-serif
        !important;
    }
}

@media (min-width: 701px) and (max-width: 1024px) {
  html.xc-phone-landscape .xc-side-overlay {
      position: fixed !important;
  
      z-index: 10010 !important;
  
      inset: 0 !important;
  
      display: none !important;
  
      background:
        rgba(
          0,
          0,
          0,
          .48
        )
        !important;
  
      opacity: 0;
      visibility: hidden;
  
      pointer-events: none;
  
      transition:
        opacity .16s ease,
        visibility .16s ease;
    }
}

@media (min-width: 701px) and (max-width: 1024px) {
  html.xc-phone-landscape .xc-side-overlay.active {
      opacity: 1 !important;
      visibility: visible !important;
  
      pointer-events:
        auto !important;
    }
}