/* PAKIBAM / Modernize responsive layer.
   Keep Modernize's native layout and responsive breakpoints.
   IMPORTANT: do not use CSS zoom/transform on #main-wrapper; it breaks Bootstrap grids,
   CKEditor, tables and add/edit forms at browser zoom 100%. */

:root{
  --pak-purple:#4b2a72;
  --pak-gold:#f2c31b;
}


/* =========================================================
   COMPACT LPPIA BRANDING
========================================================= */

.brand-logo{
  min-height:70px!important;
  height:70px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-bottom:1px solid #341c50;
}

.brand-logo .logo-img{
  width:100%!important;
  height:70px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}

.admin-sidebar-logo{
  display:block!important;
  width:145px!important;
  max-width:145px!important;
  height:70px!important;
  max-height:70px!important;
  object-fit:contain!important;
  margin:0 auto!important;
}


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

.modern-page-head h1{
  font-weight:600;
  color:#2a3547;
  line-height:1.2;
}

.modern-page-head .breadcrumb-item a{
  color:var(--pak-purple);
  text-decoration:none;
}

.modern-page-head .breadcrumb-item.active{
  color:#7c8fac;
}


/* =========================================================
   ADMIN AVATAR
========================================================= */

.modernize-admin-avatar{
  width:35px;
  height:35px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eee8f6;
  color:var(--pak-purple);
  font-weight:700;
}

.modernize-admin-avatar.large{
  width:64px;
  height:64px;
  font-size:22px;
}


/* =========================================================
   GENERAL ADMIN CONTENT
========================================================= */

.admin-page .body-wrapper .container-fluid{
  width:100%;
  max-width:none;
}

.admin-page .card{
  max-width:100%;
  overflow:hidden;
}

.admin-page .card-body{
  min-width:0;
}

.admin-page img{
  max-width:100%;
}

.admin-page .form-control,
.admin-page .form-select{
  max-width:100%;
}

.admin-page textarea.form-control{
  resize:vertical;
  min-height:96px;
}

.admin-page .btn{
  white-space:nowrap;
}


/* =========================================================
   SLIDER MANAGEMENT
========================================================= */

.preview-slider{
  display:block;
  width:140px!important;
  height:70px!important;
  max-width:140px!important;
  object-fit:cover!important;
  border-radius:8px!important;
  border:1px solid var(--bs-border-color);
  background:#f4f5f7;
}

.action-icon{
  width:34px!important;
  height:34px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:8px!important;
  font-size:17px!important;
}

.btn-light-primary{
  background:#f1edfa!important;
  color:var(--pak-purple)!important;
  border:1px solid #e7def3!important;
}

.btn-light-primary:hover{
  background:#e5daf2!important;
  color:var(--pak-purple)!important;
}

.btn-light-danger{
  background:#fff1f1!important;
  color:#dc3545!important;
  border:1px solid #f8d7da!important;
}

.btn-light-danger:hover{
  background:#fde2e4!important;
  color:#dc3545!important;
}

.admin-content-table td,
.admin-content-table th{
  vertical-align:middle;
}


/* =========================================================
   RICH TEXT EDITOR
========================================================= */

.admin-page .cke{
  max-width:100%!important;
  width:100%!important;
}

.admin-page .cke_contents{
  min-height:220px;
}

.admin-page .cke_top{
  max-width:100%;
  overflow:hidden;
}


/* =========================================================
   RESPONSIVE PAGE HEADING / ACTION ROWS
========================================================= */

.admin-page .modern-page-head{
  min-width:0;
}

.admin-page .modern-page-head h1{
  font-size:2rem;
}

.admin-page .table{
  min-width:0;
}


/* =========================================================
   DESKTOP / TABLET
========================================================= */

@media (max-width:1199.98px){

  .admin-sidebar-logo{
    width:140px!important;
    max-width:140px!important;
    height:42px!important;
  }

  .admin-page .body-wrapper{
    overflow-x:hidden;
  }

  .admin-page .modern-page-head h1{
    font-size:1.75rem;
  }
}


@media (max-width:991.98px){

  .admin-page .body-wrapper .container-fluid{
    padding-left:20px;
    padding-right:20px;
  }

  .admin-page .card-body{
    padding:1.25rem!important;
  }

  .admin-page .modern-page-head{
    margin-bottom:1.25rem!important;
  }

  .admin-page .modern-page-head h1{
    font-size:1.6rem;
  }

  .admin-page .topbar .navbar{
    min-height:64px;
  }
}


@media (max-width:767.98px){

  .brand-logo{
    height:64px!important;
    min-height:64px!important;
  }

  .brand-logo .logo-img{
    height:64px!important;
  }

  .admin-sidebar-logo{
    width:125px!important;
    max-width:125px!important;
    height:38px!important;
  }

  .admin-page .body-wrapper .container-fluid{
    padding-left:15px;
    padding-right:15px;
  }

  .admin-page .modern-page-head h1{
    font-size:1.45rem;
  }

  .admin-page .card-body{
    padding:1rem!important;
  }

  .admin-page .card-footer{
    padding:1rem!important;
  }

  .admin-page .btn{
    max-width:100%;
  }

  .preview-slider{
    width:100px!important;
    height:52px!important;
    max-width:100px!important;
  }

  .action-icon{
    width:32px!important;
    height:32px!important;
    font-size:16px!important;
  }

  .admin-page .table th,
  .admin-page .table td{
    white-space:nowrap;
  }

  .admin-page .cke_contents{
    min-height:180px;
  }
}


@media (max-width:575.98px){

  .admin-page .modern-page-head h1{
    font-size:1.3rem;
  }

  .admin-page .modern-page-head .breadcrumb{
    font-size:.8rem;
  }

  .admin-page .d-flex.justify-content-between{
    flex-wrap:wrap;
    gap:.75rem;
  }

  .admin-page .d-flex.justify-content-between>.btn{
    width:100%;
  }

  .admin-page .card-body{
    padding:.9rem!important;
  }

  .admin-page .form-label{
    font-size:.875rem;
  }

  .admin-page .form-control,
  .admin-page .form-select{
    font-size:.875rem;
  }

  .admin-page .table{
    font-size:.875rem;
  }
}


/* =========================================================
   ADMIN SETTINGS
========================================================= */

.admin-settings-form .form-label{
  margin-bottom:.4rem;
}

.admin-settings-form .form-control{
  min-height:42px;
}

.admin-settings-form .card{
  overflow:visible;
}

@media (max-width:991.98px){

  .admin-settings-form .card-body{
    padding:1.25rem!important;
  }
}

@media (max-width:767.98px){

  .admin-settings-form .card-body{
    padding:1rem!important;
  }

  .admin-settings-form .row.g-3{
    --bs-gutter-y:.75rem;
  }
}


/* ================================================================
   PAKIBAM SIDEBAR FINAL BEHAVIOUR

   Desktop  : 270px
   Mini     : 87px
   Mobile   : off-canvas
   Menu     : compact + scrollable

   IMPORTANT:
   Tetap menggunakan struktur selector Modernize asli.
================================================================ */


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

@media (min-width:768px){

  /* SIDEBAR UTAMA */

  [data-layout=vertical] .left-sidebar{
    left:0!important;
    width:270px!important;
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    height:100vh!important;
    max-height:100vh!important;
    overflow:hidden!important;
    transition:width .2s ease-in!important;
  }


  /* PAGE */

  [data-layout=vertical] body[data-sidebartype=full] .page-wrapper{
    margin-left:270px!important;
    transition:margin-left .2s ease-in!important;
  }


  /* TOPBAR */

  [data-layout=vertical] body[data-sidebartype=full] .topbar{
    width:calc(100% - 270px)!important;
    transition:width .2s ease-in!important;
  }


  /* =========================================================
     AREA MENU SIDEBAR
  ========================================================= */

  [data-layout=vertical] .left-sidebar .scroll-sidebar{
    height:calc(100vh - 70px)!important;
    max-height:calc(100vh - 70px)!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;

    padding:6px 12px 20px!important;
  }


  /* SCROLLBAR */

  [data-layout=vertical] .left-sidebar .scroll-sidebar::-webkit-scrollbar{
    width:5px;
  }

  [data-layout=vertical] .left-sidebar .scroll-sidebar::-webkit-scrollbar-track{
    background:transparent;
  }

  [data-layout=vertical] .left-sidebar .scroll-sidebar::-webkit-scrollbar-thumb{
    background:rgba(31,41,55,.16);
    border-radius:10px;
  }


  /* =========================================================
     JUDUL SECTION MENU
  ========================================================= */

  [data-layout=vertical] .sidebar-nav .nav-small-cap{
    margin-top:10px!important;
    margin-bottom:2px!important;

    padding:5px 10px!important;

    font-size:12px!important;
    line-height:1.2!important;
  }

  [data-layout=vertical] .sidebar-nav > ul > .nav-small-cap:first-child{
    margin-top:2px!important;
  }


  /* =========================================================
     ITEM MENU
  ========================================================= */

  [data-layout=vertical] .sidebar-nav .sidebar-item{
    margin-bottom:0!important;
  }

  [data-layout=vertical] .sidebar-nav .sidebar-link{
    min-height:40px!important;
    height:40px!important;

    padding:6px 12px!important;

    margin:1px 0!important;

    border-radius:9px!important;

    display:flex!important;
    align-items:center!important;

    line-height:1.2!important;
  }


  /* ICON */

  [data-layout=vertical] .sidebar-nav .sidebar-link i,
  [data-layout=vertical] .sidebar-nav .sidebar-link .ti{
    width:28px!important;
    min-width:28px!important;

    margin-right:12px!important;

    font-size:20px!important;
  }


  /* TEXT */

  [data-layout=vertical] .sidebar-nav .sidebar-link .hide-menu{
    line-height:1.2!important;
  }


  /* =========================================================
     SUB MENU
  ========================================================= */

  [data-layout=vertical] .sidebar-nav .first-level{
    padding-left:8px!important;
  }

  [data-layout=vertical] .sidebar-nav .first-level .sidebar-link{
    min-height:36px!important;
    height:36px!important;

    padding:6px 10px!important;
  }


  /* =========================================================
     ACTIVE MENU
  ========================================================= */

  [data-layout=vertical] .sidebar-nav .sidebar-link.active{
    min-height:40px!important;
  }


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

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar{
    left:0!important;
    width:87px!important;
    box-shadow:0 10px 20px rgba(0,0,0,.12)!important;
  }

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .page-wrapper{
    margin-left:87px!important;
    transition:margin-left .2s ease-in!important;
  }

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .topbar{
    width:calc(100% - 87px)!important;
    transition:width .2s ease-in!important;
  }


  /* MINI SECTION */

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .nav-small-cap{
    text-align:center!important;
  }

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .nav-small-cap .nav-small-cap-icon{
    display:inline-block!important;
  }


  /* MINI LOGO */

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .logo-img{
    width:40px!important;
    overflow:hidden!important;
  }

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .brand-logo{
    padding-left:0!important;
    padding-right:0!important;
  }

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .brand-logo .admin-sidebar-logo{
    width:40px!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:left center!important;
  }


  /* MINI ARROW */

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .sidebar-nav .has-arrow::after{
    display:none!important;
  }


  /* MINI TEXT */

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar .hide-menu,
  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar .fixed-profile{
    display:none!important;
  }


  /* MINI MENU ITEM */

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link{
    padding:10px 8px!important;
    justify-content:center!important;
  }


  /* MINI SCROLL */

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar .scroll-sidebar{
    padding-left:8px!important;
    padding-right:8px!important;

    height:calc(100vh - 70px)!important;
    max-height:calc(100vh - 70px)!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;
  }


  /* =========================================================
     MINI SIDEBAR HOVER
  ========================================================= */

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover{
    width:270px!important;
    z-index:100!important;
  }

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .logo-img{
    width:100%!important;
    overflow:visible!important;
  }

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .brand-logo .admin-sidebar-logo{
    width:145px!important;
    max-width:145px!important;
    object-fit:contain!important;
  }

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .nav-small-cap{
    text-align:left!important;
  }

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .nav-small-cap .nav-small-cap-icon{
    display:none!important;
  }

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .hide-menu,
  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .fixed-profile{
    display:inline!important;
  }

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .sidebar-nav .has-arrow::after{
    display:inline-block!important;
  }

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .sidebar-nav ul .sidebar-item .sidebar-link{
    padding:9px 12px!important;
    justify-content:flex-start!important;
  }

  [data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .scroll-sidebar{
    padding-left:12px!important;
    padding-right:12px!important;
  }


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

  #main-wrapper.show-sidebar .left-sidebar{
    left:0!important;
  }

  .dark-transparent{
    display:none!important;
  }
}


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

@media (max-width:767.98px){

  [data-layout=vertical] .page-wrapper{
    margin-left:0!important;
  }

  [data-layout=vertical] .topbar{
    width:100%!important;
  }


  /* SIDEBAR MOBILE */

  [data-layout=vertical] .left-sidebar{
    left:-270px!important;
    width:270px!important;

    height:100vh!important;
    max-height:100vh!important;

    overflow:hidden!important;
  }


  [data-layout=vertical] #main-wrapper.show-sidebar .left-sidebar{
    left:0!important;
  }


  /* AREA MENU MOBILE */

  [data-layout=vertical] .left-sidebar .scroll-sidebar{
    height:calc(100vh - 64px)!important;
    max-height:calc(100vh - 64px)!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;

    padding:6px 12px 24px!important;
  }


  /* SECTION MOBILE */

  [data-layout=vertical] .sidebar-nav .nav-small-cap{
    margin-top:10px!important;
    margin-bottom:2px!important;
  }


  /* MENU MOBILE */

  [data-layout=vertical] .sidebar-nav .sidebar-link{
    min-height:42px!important;
    height:42px!important;
  }


  /* MOBILE OVERLAY */

  #main-wrapper.show-sidebar ~ .dark-transparent{
    display:block!important;

    position:fixed!important;
    inset:0!important;

    background:rgba(0,0,0,.5)!important;

    z-index:10!important;
  }
}















/* =========================================================
   CGL GO / LPPIA ADMIN DASHBOARD
   FINAL DASHBOARD STYLE
========================================================= */


/* =========================================================
   STATISTIC CARDS
========================================================= */

.dashboard-stat-row{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:20px!important;

    margin:0 0 32px!important;
    padding:0!important;
}

.dashboard-stat-col{
    width:100%!important;
    min-width:0!important;
    padding:0!important;
}


/* =========================================================
   STAT CARD
========================================================= */

.dashboard-stat-card{
    position:relative!important;

    width:100%!important;
    min-height:145px!important;

    padding:28px 32px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;

    box-sizing:border-box!important;
    overflow:hidden!important;

    border-radius:16px!important;
    border:1px solid transparent!important;

    box-shadow:
        0 8px 24px rgba(31,41,55,.08)!important;

    transition:
        transform .2s ease,
        box-shadow .2s ease!important;
}

.dashboard-stat-card:hover{
    transform:translateY(-3px)!important;

    box-shadow:
        0 14px 30px rgba(31,41,55,.13)!important;
}


/* =========================================================
   CARD COLORS
========================================================= */

.dashboard-card-purple{
    background:#4b2a72!important;
    color:#fff!important;
}

.dashboard-card-purple
.dashboard-stat-label,

.dashboard-card-purple
.dashboard-stat-number,

.dashboard-card-purple
.dashboard-stat-icon{
    color:#fff!important;
}


.dashboard-card-gold{
    background:#f2c31b!important;
    color:#342500!important;
}

.dashboard-card-gold
.dashboard-stat-label,

.dashboard-card-gold
.dashboard-stat-number,

.dashboard-card-gold
.dashboard-stat-icon{
    color:#342500!important;
}


.dashboard-card-purple-dark{
    background:#392056!important;
    color:#fff!important;
}

.dashboard-card-purple-dark
.dashboard-stat-label,

.dashboard-card-purple-dark
.dashboard-stat-number,

.dashboard-card-purple-dark
.dashboard-stat-icon{
    color:#fff!important;
}


.dashboard-card-gold-light{
    background:#fff4c7!important;
    color:#4b2a72!important;

    border-color:#f2c31b!important;
}

.dashboard-card-gold-light
.dashboard-stat-label,

.dashboard-card-gold-light
.dashboard-stat-number,

.dashboard-card-gold-light
.dashboard-stat-icon{
    color:#4b2a72!important;
}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */

.dashboard-stat-card::after{
    content:""!important;

    position:absolute!important;

    width:125px!important;
    height:125px!important;

    right:-42px!important;
    bottom:-58px!important;

    border-radius:50%!important;

    background:
        rgba(255,255,255,.10)!important;

    pointer-events:none!important;
}

.dashboard-card-gold::after,
.dashboard-card-gold-light::after{
    background:
        rgba(75,42,114,.08)!important;
}


/* =========================================================
   STAT CONTENT
========================================================= */

.dashboard-stat-content{
    position:relative!important;
    z-index:2!important;
}

.dashboard-stat-label{
    margin:0 0 8px!important;

    font-size:16px!important;
    font-weight:400!important;

    line-height:1.3!important;
}

.dashboard-stat-number{
    font-size:32px!important;
    font-weight:600!important;

    line-height:1.1!important;
}

.dashboard-stat-icon{
    position:relative!important;
    z-index:2!important;

    width:48px!important;
    height:48px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    flex-shrink:0!important;

    font-size:27px!important;
}


/* =========================================================
   ORDER TERBARU
   FULL WIDTH
========================================================= */

.dashboard-main-row{
    width:100%!important;

    display:block!important;

    margin:0!important;
    padding:0 0 50px!important;
}


/* =========================================================
   ORDER COLUMN
========================================================= */

.dashboard-order-col{
    width:100%!important;
    max-width:100%!important;

    min-width:0!important;

    margin:0!important;
}


/* =========================================================
   ORDER PANEL
========================================================= */

.dashboard-panel{
    width:100%!important;

    background:#fff!important;

    border:1px solid #e8ebf1!important;

    border-radius:16px!important;

    overflow:hidden!important;

    box-shadow:
        0 8px 28px rgba(31,41,55,.07)!important;
}


/* =========================================================
   ORDER HEADER
========================================================= */

.dashboard-panel-header{
    min-height:120px!important;

    padding:28px 32px!important;

    display:flex!important;

    align-items:center!important;
    justify-content:space-between!important;

    gap:20px!important;

    box-sizing:border-box!important;

    background:#fff!important;

    border-bottom:
        1px solid #edf0f4!important;
}


.dashboard-panel-title{
    margin:0!important;

    color:#29364d!important;

    font-size:20px!important;
    font-weight:600!important;

    line-height:1.3!important;
}


.dashboard-panel-subtitle{
    margin-top:6px!important;

    color:#8491a7!important;

    font-size:14px!important;

    line-height:1.5!important;
}


/* =========================================================
   LIHAT SEMUA
========================================================= */

.dashboard-view-all{
    display:inline-flex!important;

    align-items:center!important;
    justify-content:center!important;

    min-height:38px!important;

    padding:7px 15px!important;

    border:1px solid #4b2a72!important;

    border-radius:8px!important;

    background:#fff!important;

    color:#4b2a72!important;

    font-size:13px!important;
    font-weight:600!important;

    text-decoration:none!important;

    white-space:nowrap!important;

    transition:
        all .2s ease!important;
}


.dashboard-view-all:hover{
    background:#4b2a72!important;
    border-color:#4b2a72!important;

    color:#fff!important;

    box-shadow:
        0 5px 12px rgba(75,42,114,.18)!important;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.dashboard-table-wrap{
    width:100%!important;

    overflow-x:auto!important;
}


/* =========================================================
   TABLE
========================================================= */

.dashboard-order-table{
    width:100%!important;

    margin:0!important;

    border-collapse:separate!important;
    border-spacing:0!important;

    color:#29364d!important;
}


/* =========================================================
   TABLE HEADER
========================================================= */

.dashboard-order-table thead th{

    height:58px!important;

    padding-top:0!important;
    padding-bottom:0!important;

    background:#fafbfc!important;

    color:#7a879b!important;

    border-bottom:
        1px solid #e7ebf1!important;

    font-size:12px!important;

    font-weight:600!important;

    letter-spacing:.05em!important;

    text-transform:uppercase!important;

    vertical-align:middle!important;

    white-space:nowrap!important;
}


/* =========================================================
   TABLE BODY
========================================================= */

.dashboard-order-table tbody td{

    height:72px!important;

    padding-top:0!important;
    padding-bottom:0!important;

    background:#fff!important;

    border-bottom:
        1px solid #edf0f4!important;

    font-size:14px!important;

    vertical-align:middle!important;

    white-space:nowrap!important;

    transition:
        background .15s ease!important;
}


.dashboard-order-table tbody tr:last-child td{
    border-bottom:0!important;
}


/* =========================================================
   ROW HOVER
========================================================= */

.dashboard-order-table tbody tr:hover td{
    background:#faf8fc!important;
}


/* =========================================================
   ORDER CODE
========================================================= */

.dashboard-order-code{

    color:#202a3a!important;

    font-weight:600!important;

    font-size:14px!important;

    letter-spacing:.1px!important;
}


/* =========================================================
   TOTAL
========================================================= */

.dashboard-order-total{

    color:#303a4b!important;

    font-weight:500!important;

    font-size:14px!important;
}


/* =========================================================
   DATE
========================================================= */

.dashboard-order-date{

    color:#7b8799!important;

    font-size:13px!important;

}


/* =========================================================
   STATUS BADGE
========================================================= */

.dashboard-status{

    display:inline-flex!important;

    align-items:center!important;
    justify-content:center!important;

    min-width:76px!important;

    min-height:30px!important;

    padding:5px 12px!important;

    box-sizing:border-box!important;

    border-radius:20px!important;

    font-size:12px!important;

    line-height:1!important;

    font-weight:600!important;

    text-transform:lowercase!important;

    letter-spacing:.01em!important;
}


/* =========================================================
   STATUS - PENDING
========================================================= */

.dashboard-status-pending{

    background:#e8f6ff!important;

    color:#1593d1!important;

    border:1px solid #bde7fa!important;
}


/* =========================================================
   STATUS - SUCCESS
========================================================= */

.dashboard-status-success{

    background:#eaf8f0!important;

    color:#16834b!important;

    border:1px solid #c6ecd7!important;
}


/* =========================================================
   STATUS - FAILED
========================================================= */

.dashboard-status-danger{

    background:#fff0f1!important;

    color:#dc3545!important;

    border:1px solid #f7c9ce!important;
}


/* =========================================================
   STATUS - DEFAULT
========================================================= */

.dashboard-status-default{

    background:#f1f3f5!important;

    color:#667085!important;

    border:1px solid #e0e4e8!important;
}


/* =========================================================
   EMPTY
========================================================= */

.dashboard-empty-order{

    height:180px!important;

    color:#8995a7!important;

    vertical-align:middle!important;

    font-size:14px!important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1199.98px){

    .dashboard-stat-row{

        grid-template-columns:
            repeat(2,minmax(0,1fr))!important;

        gap:20px!important;
    }


    .dashboard-stat-card{

        min-height:135px!important;

        padding:24px 26px!important;
    }


    .dashboard-panel-header{

        padding:26px!important;
    }

}


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

@media (max-width:767.98px){

    .dashboard-stat-row{

        grid-template-columns:1fr!important;

        gap:15px!important;

        margin-bottom:24px!important;
    }


    .dashboard-stat-card{

        min-height:125px!important;

        padding:22px 24px!important;

        border-radius:14px!important;
    }


    .dashboard-stat-number{

        font-size:28px!important;
    }


    .dashboard-panel-header{

        min-height:auto!important;

        padding:22px!important;

        align-items:flex-start!important;
    }


    .dashboard-panel-title{

        font-size:18px!important;
    }


    .dashboard-view-all{

        flex-shrink:0!important;
    }

}


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

@media (max-width:575.98px){

    .dashboard-stat-row{

        grid-template-columns:1fr!important;

        gap:12px!important;
    }


    .dashboard-stat-card{

        min-height:115px!important;

        padding:20px!important;
    }


    .dashboard-stat-label{

        font-size:14px!important;
    }


    .dashboard-stat-number{

        font-size:25px!important;
    }


    .dashboard-stat-icon{

        width:42px!important;
        height:42px!important;

        font-size:22px!important;
    }


    .dashboard-panel-header{

        flex-direction:column!important;

        align-items:flex-start!important;

        gap:14px!important;
    }


    .dashboard-view-all{

        align-self:flex-start!important;
    }


    .dashboard-order-table{

        min-width:700px!important;
    }


    /* SPACE BAWAH LEBIH NYAMAN */

    .dashboard-main-row{

        padding-bottom:60px!important;
    }

}