/* =========================================================
   BLTZMAIL DASHBOARD BLACK WHITE PREMIUM V1
   CSS ONLY - NO GENERATED IMAGE
   ========================================================= */

:root{
  --bg:#f5f5f1 !important;
  --bg-soft:#ffffff !important;
  --panel:#ffffff !important;
  --panel-soft:#f8f8f5 !important;

  --line:rgba(0,0,0,.13) !important;
  --line-soft:rgba(0,0,0,.075) !important;

  --text:#11110f !important;
  --muted:#666662 !important;
  --faint:#8b8b85 !important;

  --radius:18px !important;
}


/* =========================
   GLOBAL
========================= */

html{
  background:#f5f5f1 !important;
}

body{
  color:#11110f !important;

  background-color:#f5f5f1 !important;

  background-image:
    linear-gradient(
      rgba(0,0,0,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.045) 1px,
      transparent 1px
    ) !important;

  background-size:
    64px 64px !important;
}

body::before,
body::after{
  pointer-events:none;
}


/* =========================
   LOADER
========================= */

#loadingScreen{
  background:#050505 !important;
}

.loading-text{
  color:#d8d8d4 !important;
}


/* =========================
   TOPBAR
========================= */

.topbar{
  border-bottom:
    1px solid rgba(255,255,255,.1) !important;

  background:#050505 !important;

  box-shadow:none !important;
}

.topbar-inner{
  min-height:68px !important;
}

.brand-name{
  color:#f7f7f3 !important;
}

.brand-sub{
  color:#777 !important;
}

.user-mini strong{
  color:#f1f1ed !important;
}

.user-mini span{
  color:#858580 !important;
}

.menu-button{
  border-color:
    rgba(255,255,255,.13) !important;

  background:#080808 !important;
}

.menu-button span{
  background:#f5f5f1 !important;
}


/* =========================
   SIDEBAR
========================= */

.sidebar,
#dashboardSidebar{
  background:#050505 !important;

  border-color:
    rgba(255,255,255,.1) !important;
}

.sidebar *{
  --text:#f5f5f1;
}

.sidebar-profile{
  background:#0a0a0a !important;

  border-color:
    rgba(255,255,255,.09) !important;
}

.sidebar-profile strong{
  color:#f3f3ef !important;
}

.sidebar-profile span{
  color:#777 !important;
}

.sidebar-link{
  color:#bcbcb7 !important;

  border-color:transparent !important;

  background:transparent !important;
}

.sidebar-link strong{
  color:#e9e9e5 !important;
}

.sidebar-link span{
  color:#74746f !important;
}

.sidebar-link:hover,
.sidebar-link:focus,
.sidebar-link:active{
  background:#111 !important;

  border-color:
    rgba(255,255,255,.1) !important;
}

.logout-button{
  color:#f2f2ee !important;

  background:#0d0d0d !important;

  border-color:
    rgba(255,255,255,.12) !important;
}

#sidebarBackdrop{
  background:rgba(0,0,0,.48) !important;
}


/* =========================
   PAGE
========================= */

.page{
  color:#11110f !important;
}

.section{
  color:#11110f !important;
}

.section-head h2,
.section h2{
  color:#11110f !important;
}

.section-head p,
.section p{
  color:#6e6e69 !important;
}

.section-kicker{
  color:#777772 !important;
}


/* =========================
   HERO / DASHBOARD BANNER
   CSS ONLY
========================= */

.dashboard-banner{
  overflow:hidden !important;

  border:
    1px solid #171715 !important;

  border-radius:18px !important;

  background:#050505 !important;

  color:#f6f6f2 !important;

  box-shadow:none !important;
}

.dashboard-banner img{
  opacity:.13 !important;

  filter:
    grayscale(1)
    contrast(1.08) !important;
}

.dashboard-banner h1,
.dashboard-banner h2,
.dashboard-banner h3,
.dashboard-banner strong{
  color:#f6f6f2 !important;
}

.dashboard-banner p,
.dashboard-banner span{
  color:#999994 !important;
}


/* =========================
   GENERAL CARDS
========================= */

.page article:not(.bltz-plan-panel),
.page .card:not(.bltz-plan-panel),
.page [class*="quick-card"],
.page [class*="account-card"]{
  box-shadow:none !important;
}

.quick-card,
.account-card,
.api-card,
.stat-card{
  background:#fff !important;

  color:#11110f !important;

  border-color:
    rgba(0,0,0,.12) !important;
}

.quick-card strong,
.account-card strong,
.api-card strong,
.stat-card strong{
  color:#161614 !important;
}

.quick-card span,
.quick-card p,
.account-card span,
.account-card p,
.api-card span,
.api-card p,
.stat-card span,
.stat-card p{
  color:#73736e !important;
}


/* =========================
   DASHBOARD SUMMARY CARDS
========================= */

.summary-grid > *,
.stats-grid > *{
  background:#fff !important;

  border-color:
    rgba(0,0,0,.12) !important;

  color:#11110f !important;

  box-shadow:none !important;
}

.summary-grid strong,
.stats-grid strong{
  color:#11110f !important;
}

.summary-grid span,
.summary-grid p,
.stats-grid span,
.stats-grid p{
  color:#74746f !important;
}


/* =========================
   MEMBERSHIP TITLE
========================= */

#billing{
  margin-top:6px !important;

  scroll-margin-top:88px !important;
}

#billing > .section-head{
  margin-bottom:14px !important;
}

#billing > .section-head h2{
  margin-top:4px !important;

  font-size:
    clamp(24px,4vw,32px) !important;

  letter-spacing:-.8px !important;
}

#billing > .section-head p{
  margin-top:7px !important;

  max-width:620px !important;

  font-size:12px !important;

  line-height:1.65 !important;
}


/* =========================
   MEMBERSHIP PRIMARY CARD
   BLACK
========================= */

.bltz-plan-panel{
  border:
    1px solid #191917 !important;

  border-radius:18px !important;

  background:#050505 !important;

  color:#f5f5f1 !important;

  box-shadow:none !important;
}

.bltz-plan-head{
  padding:18px !important;

  border-bottom:
    1px solid rgba(255,255,255,.1) !important;
}

.bltz-plan-kicker{
  color:#777772 !important;
}

.bltz-plan-head h3{
  color:#f6f6f2 !important;

  font-size:22px !important;
}

.bltz-plan-status{
  color:#f1f1ed !important;

  border-color:
    rgba(255,255,255,.18) !important;

  background:#0d0d0d !important;
}


/* membership stats */

.bltz-plan-stats{
  padding:11px !important;

  gap:8px !important;
}

.bltz-plan-stat{
  min-height:104px !important;

  padding:14px !important;

  background:#0a0a0a !important;

  border-color:
    rgba(255,255,255,.1) !important;

  border-radius:14px !important;
}

.bltz-plan-stat span{
  color:#74746f !important;
}

.bltz-plan-stat strong{
  margin-top:13px !important;

  color:#f5f5f1 !important;

  font-size:22px !important;
}

.bltz-plan-stat small{
  color:#686864 !important;
}


/* membership details */

.bltz-plan-details{
  border-top:
    1px solid rgba(255,255,255,.09) !important;
}

.bltz-plan-detail{
  min-height:62px !important;

  padding:12px 15px !important;

  border-color:
    rgba(255,255,255,.09) !important;
}

.bltz-plan-detail span{
  color:#6d6d68 !important;
}

.bltz-plan-detail strong{
  color:#dededa !important;

  font-size:9px !important;
}


/* membership footer */

.bltz-plan-footer{
  min-height:58px !important;

  padding:11px 18px !important;

  border-top:
    1px solid rgba(255,255,255,.09) !important;
}

.bltz-plan-summary{
  color:#777772 !important;

  font-size:9px !important;
}

.bltz-plan-action{
  min-height:36px !important;

  padding:0 14px !important;

  color:#11110f !important;

  background:#f5f5f1 !important;

  border:
    1px solid #f5f5f1 !important;

  border-radius:10px !important;

  font-weight:650 !important;
}


/* =========================
   TRANSACTION HISTORY
   WHITE
========================= */

.bltz-order-panel{
  margin-top:12px !important;

  padding:18px !important;

  background:#fff !important;

  border:
    1px solid rgba(0,0,0,.12) !important;

  border-radius:18px !important;

  color:#11110f !important;

  box-shadow:none !important;
}

.bltz-order-head{
  margin-bottom:13px !important;
}

.bltz-order-head h3{
  color:#11110f !important;

  font-size:20px !important;
}

.bltz-order-count{
  color:#555550 !important;

  border:
    1px solid rgba(0,0,0,.12) !important;

  background:#f6f6f2 !important;
}

.bltz-order-row{
  min-height:64px !important;

  padding:13px 0 !important;

  border-top:
    1px solid rgba(0,0,0,.085) !important;
}

.bltz-order-main strong{
  color:#191917 !important;

  font-size:9px !important;
}

.bltz-order-main span{
  color:#7b7b76 !important;
}

.bltz-order-cell span{
  color:#858580 !important;
}

.bltz-order-cell strong{
  color:#242421 !important;

  font-size:9px !important;
}

.bltz-order-state{
  color:#f4f4f0 !important;

  background:#11110f !important;

  border-color:#11110f !important;
}

.bltz-order-empty{
  color:#74746f !important;

  border-color:
    rgba(0,0,0,.08) !important;
}

.bltz-billing-error{
  color:#33332f !important;

  background:#fff !important;

  border-color:
    rgba(0,0,0,.14) !important;
}


/* =========================
   API KEYS
========================= */

#api-keys{
  margin-top:8px !important;
}

#api-keys .section-head h2,
#api-keys h2{
  color:#11110f !important;
}

#api-keys .section-head p,
#api-keys p{
  color:#70706b !important;
}


/* API key area */
#api-keys [class*="panel"],
#api-keys [class*="card"],
#api-keys [class*="box"],
#api-keys [class*="container"]{
  box-shadow:none !important;
}

#api-keys button{
  border-color:
    rgba(0,0,0,.14) !important;

  box-shadow:none !important;
}


/* API key cards created by JS */
[data-api-key-id]{
  color:#11110f !important;

  background:#fff !important;

  border-color:
    rgba(0,0,0,.12) !important;

  box-shadow:none !important;
}

[data-api-key-id] strong{
  color:#11110f !important;
}

[data-api-key-id] span,
[data-api-key-id] p{
  color:#74746f !important;
}


/* =========================
   ACCOUNT
========================= */

#account{
  color:#11110f !important;
}

#account [class*="card"],
#account [class*="panel"]{
  background:#fff !important;

  border-color:
    rgba(0,0,0,.12) !important;
}

.account-list{
  border-color:
    rgba(0,0,0,.1) !important;
}

.account-row{
  border-color:
    rgba(0,0,0,.08) !important;
}

.account-row span{
  color:#767671 !important;
}

.account-row strong{
  color:#171715 !important;
}


/* =========================
   BUTTONS ON LIGHT AREA
========================= */

.page button:not(.menu-button):not(.logout-button),
.page .button,
.page [role="button"]{
  box-shadow:none !important;
}

.page button:not(.menu-button):not(.logout-button){
  color:#f5f5f1;

  background:#11110f;

  border-color:#11110f;
}


/* =========================
   INPUTS / MODAL
========================= */

input,
textarea,
select{
  color:#11110f !important;

  background:#fff !important;

  border-color:
    rgba(0,0,0,.16) !important;

  box-shadow:none !important;
}

input::placeholder,
textarea::placeholder{
  color:#969690 !important;
}

.bltz-modal,
[class*="modal"]{
  color:#11110f;
}

.bltz-modal [class*="modal"],
[class*="modal-content"],
[class*="modal-card"],
[class*="modal-box"]{
  background:#fff !important;

  border-color:
    rgba(0,0,0,.13) !important;

  box-shadow:
    0 18px 55px rgba(0,0,0,.18) !important;
}

[class*="modal"] h2,
[class*="modal"] h3,
[class*="modal"] strong{
  color:#11110f !important;
}

[class*="modal"] p,
[class*="modal"] label,
[class*="modal"] span{
  color:#6b6b66 !important;
}


/* =========================
   SYSTEM / FOOTER CARDS
========================= */

#systemStatus{
  color:#11110f !important;
}


/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{
  width:7px;
  height:7px;
}

::-webkit-scrollbar-track{
  background:#eeeeea;
}

::-webkit-scrollbar-thumb{
  background:#bababa;

  border-radius:999px;
}


/* =========================
   MOBILE
========================= */

@media(max-width:760px){

  body{
    background-size:
      54px 54px !important;
  }

  .topbar-inner{
    width:
      calc(100% - 24px) !important;

    min-height:64px !important;
  }

  .brand-logo{
    width:35px !important;
    height:35px !important;
  }

  .brand-name{
    font-size:13px !important;
  }

  .menu-button{
    width:44px !important;
    height:44px !important;
  }

  .page{
    padding-top:18px !important;
  }

  .dashboard-banner{
    border-radius:16px !important;
  }

  #billing > .section-head h2{
    font-size:26px !important;
  }

  #billing > .section-head p{
    font-size:11px !important;
  }

  .bltz-plan-stats{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  .bltz-plan-details{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  .bltz-plan-detail:nth-child(2){
    border-right:0 !important;
  }

  .bltz-plan-detail:nth-child(-n+2){
    border-bottom:
      1px solid rgba(255,255,255,.09) !important;
  }

  .bltz-order-row{
    grid-template-columns:
      1fr 1fr !important;

    gap:10px 16px !important;
  }
}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:480px){

  body{
    background-size:
      46px 46px !important;
  }

  .topbar-inner{
    width:
      calc(100% - 20px) !important;
  }

  .user-mini{
    display:none !important;
  }

  .page{
    padding-left:11px !important;
    padding-right:11px !important;
  }

  .section{
    margin-top:28px !important;
  }

  #billing > .section-head{
    margin-bottom:12px !important;
  }

  #billing > .section-head h2{
    margin-bottom:0 !important;

    font-size:25px !important;
  }

  .bltz-plan-panel{
    border-radius:16px !important;
  }

  .bltz-plan-head{
    padding:15px !important;
  }

  .bltz-plan-head h3{
    font-size:21px !important;
  }

  .bltz-plan-stats{
    padding:8px !important;

    gap:7px !important;
  }

  .bltz-plan-stat{
    min-height:88px !important;

    padding:11px !important;
  }

  .bltz-plan-stat strong{
    font-size:19px !important;
  }

  .bltz-plan-detail{
    min-height:57px !important;

    padding:10px 12px !important;
  }

  .bltz-plan-footer{
    padding:12px 14px !important;

    align-items:flex-start !important;

    flex-direction:column !important;
  }

  .bltz-plan-action{
    width:auto !important;
  }

  .bltz-order-panel{
    padding:15px !important;

    border-radius:16px !important;
  }

  .bltz-order-head h3{
    font-size:19px !important;
  }

  .bltz-order-row{
    grid-template-columns:1fr !important;

    gap:8px !important;

    padding:14px 0 !important;
  }

  .bltz-order-main{
    margin-bottom:2px !important;
  }

  .bltz-order-main strong{
    font-size:9px !important;
  }

  .bltz-order-cell{
    display:grid !important;

    grid-template-columns:
      72px minmax(0,1fr) !important;

    align-items:center !important;

    gap:8px !important;
  }

  .bltz-order-cell strong{
    margin-top:0 !important;
  }

  .bltz-order-state{
    justify-self:start !important;
  }
}