/*
This resource is dedicated and reserved for Spanel - Spanel.com, Spanel.in, Spanel.co.in, Spanel.org
*/
:root{
    --color-theme:#CCFF33; --color-white:#f5f5f5; --color-primary:#3A659D;
    --color-success:#0c610c;  --color-danger:#842029;  --color-warning:#ddff005b;
    --color-dark:#1b1b1b;  --color-grey:#252525;  --color-greyish:#D3D3D3;  --muted:#6b7280;
     --color-greylight:#333131;
    --shadow-theme:0 0 8px rgba(0,0,0,0.5); --bs-theme:0 6px 18px rgba(0,0,0,0.5);

      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;

      --border-radius:0.75rem;
}

*{margin:0; padding:0; box-sizing: border-box; }
html{font-size: 14px;}  body{ font-family: Roboto,Anton; background-color:var(--color-grey,#252525); color:var(--color-white,#f5f5f5); }
*:hover,*:focus,*{transition: .35s;}
/* Modern slim scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {  background-color: var(--color-theme,#CCFF33);  border-radius: 10px;  transition: background-color 0.3s ease; }
::-webkit-scrollbar-thumb:hover {  background-color: rgba(100, 100, 100, 0.7); }
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb {    background-color: rgba(255, 255, 255, 0.2);  }
  ::-webkit-scrollbar-thumb:hover {    background-color: rgba(255, 255, 255, 0.4);  }
}


a{text-decoration: none; cursor: pointer;}
.w-full{width:100%;}
/* body::after { content: "Confidential - User123"; position: fixed; top: 40%; left: 20%; font-size: 3rem; color: rgba(255, 0, 0, 0.2); transform: rotate(-30deg); pointer-events: none; } */

/* Spanel Colors Begins */
.bg-theme{background-color:var(--color-theme,#CCFF33) !important;}
.bg-primary{background-color:var(--color-primary,#3A659D) !important;}
.bg-success{background-color:var(--color-success,#0c610c) !important;}
.bg-danger{background-color:var(--color-danger,#842029) !important;}
.bg-warning{background-color:var(--color-warning,#ddff005b) !important;}
.bg-dark{background-color:var(--color-dark,#1b1b1b) !important;}
.bg-white{background-color:var(--color-white,#f5f5f5) !important;}
.bg-purewhite{background-color:var(--color-purewhite,#FFFFFF) !important;}
.bg-grey{background-color:var(--color-grey,#252525) !important;}
.bg-greyish{background-color:var(--color-greyish,#D3D3D3) !important;}


.text-theme{ color:var(--color-theme,#CCFF33) !important;}
.text-primary{ color:var(--color-primary,#3A659D) !important;}
.text-success{ color:var(--color-success,#0c610c) !important;}
.text-danger{ color:var(--color-danger,#842029) !important;}
.text-warning{ color:var(--color-warning,#ddff005b) !important;}
.text-dark{ color:var(--color-dark,#1b1b1b) !important;}
.text-white{ color:var(--color-white,#f5f5f5) !important;}
.text-purewhite{ color:var(--color-purewhite,#FFFFFF) !important;}
.text-grey{ color:var(--color-grey,#252525) !important;}
.text-greyish{ color:var(--color-greyish,#D3D3D3) !important;}


.border-theme{ border-color:var(--color-theme,#CCFF33) !important;}
.border-primary{ border-color:var(--color-primary,#3A659D) !important;}
.border-success{ border-color:var(--color-success,#0c610c) !important;}
.border-danger{ border-color:var(--color-danger,#842029) !important;}
.border-warning{ border-color:var(--color-warning,#ddff005b) !important;}
.border-dark{ border-color:var(--color-dark,#1b1b1b) !important;}
.border-white{ border-color:var(--color-white,#f5f5f5) !important;}
.border-purewhite{ border-color:var(--color-purewhite,#FFFFFF) !important;}
.border-grey{ border-color:var(--color-grey,#252525) !important;}
.border-greyish{ border-color:var(--color-greyish,#D3D3D3) !important;}
/* Spanel Colors Ends */

/* Spanel Fonts Begins */
.fw-normal{font-weight:normal !important;} .fw-600,.fw-lightbold{font-weight:600 !important;} .fw-700{font-weight:700 !important;}  .fw-800,.fw-bold{font-weight:800 !important;}

.fs-quart{font-size:.35rem !important;} .fs-half{font-size:.75rem !important;} .fs-1{font-size:1rem !important;} .fs-125{font-size:1.25rem !important;} .fs-15{font-size:1.5rem !important;} .fs-2{font-size:2rem !important;} .fs-3{font-size:3rem !important;} .fs-4{font-size:4rem !important;}
/* Spanel Fonts Ends */

/* Spanel Display Begins */
.d-flex-row{display:flex; flex-direction: column;}
.d-none{display:none;} .d-flex{display: flex;} .d-grid,.d-grid-res-none{display:grid !important;}
.grid-2,.grid-res-2{grid-template-columns: auto auto;}
.grid-3,.grid-res-3{grid-template-columns: auto auto auto;}
.grid-4,.grid-res-4{grid-template-columns: auto auto auto auto;}
.grid-5,.grid-res-5{grid-template-columns: auto auto auto auto auto;}
.gap-1{grid-gap:1rem; gap:1rem;}    .gap-2{grid-gap:2rem; gap:2rem;}    .gap-3{grid-gap:3rem; gap:3rem;}
/* Spanel Display Ends */

/* Spanel Padding Begins */
.p-0{padding:0 !important;} .p-1{padding:1rem !important;} .p-2,.p-res-2{padding:2rem !important;} .p-3,.p-res-3{padding:3rem !important;}
.pt-0{padding-top:0 !important;} .pt-1{padding-top:1rem !important;} .pt-2{padding-top:2rem !important;} .pt-3{padding-top:3rem !important;}
.pb-0{padding-bottom:0 !important;} .pb-1{padding-bottom:1rem !important;} .pb-2{padding-bottom:2rem !important;} .pb-3{padding-bottom:3rem !important;}
.ptb-0{padding-top:0rem !important; padding-bottom:0rem !important;} .ptb-1{padding-top:1rem !important; padding-bottom:1rem !important;} .ptb-2{padding-top:2rem !important; padding-bottom:2rem !important;} .ptb-3{padding-top:3rem !important; padding-bottom:3rem !important;}
/* Spanel Padding Ends */

/* Spanel Margin Begins */
.m-auto{margin:auto !important;}
.mt-0{margin-top:0 !important;} .mt-1{margin-top:1rem !important;} .mt-2{margin-top:2rem !important;} .mt-3{margin-top:3rem !important;}
.mb-0{margin-bottom:0 !important;} .mb-1{margin-bottom:1rem !important;} .mb-2{margin-bottom:2rem !important;} .mb-3{margin-bottom:3rem !important;}
.mtb-0{margin-top:0rem !important; margin-bottom:0rem !important;} .mtb-1{margin-top:1rem !important; margin-bottom:1rem !important;} .mtb-2{margin-top:2rem !important; margin-bottom:2rem !important;} .mtb-3{margin-top:3rem !important; margin-bottom:3rem !important;}
/* Spanel Margin Ends */


.bs-theme{box-shadow:var(--bs-theme,0 6px 18px rgba(0,0,0,0.5)) !important;}
.scale-2{transform:scale(1.25);}
.border-50{border-radius:50%;}
.d-center{display:flex; gap:1rem;} .d-end{display:flex; gap:1rem; justify-content: end;}
.place-center{place-items: center;} .align-center,.d-center{align-items: center;}
.justify-center{justify-content: center;}  .space-between{justify-content: space-between;}
.justify-left{justify-content: left !important;}
.text-center{text-align: center !important;} .text-right{text-align: right !important;}
 .text-left{text-align: left !important;}

.td-strike{text-decoration: line-through;}

.banner-res{width:18rem;}

/* Spanel Navbar Begins */
.nav{display:grid; grid-template-columns: auto auto; background-color: var(--color-dark,#1B1B1B); padding:.5rem 2rem; box-shadow: var(--shadow-theme,0 0 8px rgba(0,0,0,0.5)); z-index:9999; }
.nav-fixed{position:fixed; width:100%; top:0; left:0;} .nav-brand-link{display:flex; align-items: center; font-size:1.5rem; color:var(--color-theme,#CCFF33);} .nav-brand{display:grid; justify-content:left;}
.nav-toggle,.customer-sidebar-toggle{display:none;}
.nav-menu,.nav-ul{list-style-type: none; display:flex; flex-wrap: nowrap; align-items: center; justify-content:end; }
.nav-menu li{padding:0 2rem; position:relative; width:100%; } .nav-link{padding:0.2rem 2rem; color:var(--color-dark,#1b1b1b); }
.nav-ul{justify-content: end;}
.nav-link:hover,.nav-link:focus{ color:var(--color-grey,#252525); }
.nav-dropdown,.dropdown-toggle{position:relative;} .dropdown-toggle:after{content:"\276E"; display:inline-block; transform: rotate(180deg); position: absolute; right:1.5rem; top:25%; }
.nav-dropdown-list{ position: relative; top:0%; display:none; grid-gap:1rem; background-color: var(--color-greylight,#333131); box-shadow: var(--shadow-theme-bottom,0 2px 4px rgba(0,0,0,0.5)); padding:1rem 1rem 1rem 1.5rem; border-radius: .25rem; z-index:9998; width:100%; }
.dropdown-toggle.open svg { transform: rotate(90deg); transition: transform 0.3s ease; border:2px solid var(--color-white,#f5f5f5); border-radius:50%; padding:0.25rem; }
.nav-center > .nav-link{display:grid; place-items: center;}
/* Spanel Navbar Ends */
/* Spanel Footer Begins */
.footer{background-color: var(--color-white,#f5f5f5);}  .footer-head{text-transform: uppercase; font-weight: 600;}
.footer-link{text-transform: capitalize; color:var(--color-grey,#898089);}
.footer-link:hover,.footer-link:focus{color:var(--color-dark,#1b1b1b);}
.footer-copy{background-color: var(--color-greyish,#D3D3D3); padding:.5rem; text-align: center;}
/* Spanel Footer Ends */


/* Spanel Buttons Begins */
.btn,.anker{padding:.5rem 1.5rem; border:none; border-radius: 1.25rem; border:.05rem solid; text-transform: capitalize; cursor:pointer; font-weight: 700;}
.anker{ color:var(--color-white,#F5F5F5); border:none;}
.anker:hover,.anker:focus{ color:var(--color-theme,#CCFF33);}
.btn-theme{ border-color:var(--color-theme,#CCFF33); background-color:var(--color-theme,#CCFF33); color:var(--color-dark,#1B1B1B); }
.btn-theme:hover,.btn-theme:hover{color:var(--color-theme,#CCFF33); background-color:var(--color-dark,#1B1B1B); }
.btn-primary{ border-color:var(--color-primary,#3A659D); background-color:var(--color-primary,#3A659D); color:var(--color-white,#f5f5f5); }
.btn-primary:hover,.btn-primary:hover{color:var(--color-primary,#3A659D); background-color:var(--color-white,#f5f5f5); }
.btn-warning{ border-color:var(--color-warning,#ddff005b); background-color:var(--color-warning,#ddff005b); color:var(--color-white,#f5f5f5); }
.btn-warning:hover,.btn-warning:hover{color:var(--color-dark,#1B1B1B); background-color:var(--color-white,#f5f5f5); }
.btn-success{ border-color:var(--color-success,#0C610C); background-color:var(--color-success,#0C610C); color:var(--color-white,#f5f5f5); }
.btn-success:hover,.btn-success:hover{color:var(--color-success,#0C610C); background-color:var(--color-white,#f5f5f5); }
.btn-danger{ border-color:var(--color-danger,#842029); background-color:var(--color-danger,#842029); color:var(--color-white,#f5f5f5); }
.btn-danger:hover,.btn-danger:hover{color:var(--color-danger,#842029); background-color:var(--color-white,#f5f5f5); }
.btn-cross{position:absolute; left:-0.5rem; top:-1.5rem; font-weight:700; background-color: transparent; border:none; outline:none; font-size:1.25rem; cursor: pointer; }
.copy-btn{padding:4px 8px;  border-radius:1.25rem; background-color:var(--color-dark,#1b1b1b); font-weight:600; color:var(--color-white,#f5f5f5); }
/* Spanel Buttons Ends */

/* Spanel Cards Begins */
.card{ margin:.5rem; border-radius:var(--border-radius,1.25rem); box-shadow: var(--shadow-theme,0 0 8px rgba(0,0,0,0.5)); }
.card-head{font-size:1.5rem; font-weight:600; text-align: right; position:relative; border-top-right-radius:var(--border-radius,1.25rem) ; border-top-left-radius:var(--border-radius,1.25rem) ;}
/* Spanel Cards Ends */

/* Spanel Form Begins */
.label{display:block; font-weight:600; margin-top:0.5rem;}
.input{width:100%; font-size:1rem; border:none; border-bottom:2px solid var(--color-white,#F5F5F5); padding:.35rem 1.25rem; outline:none; resize:none; background-color: transparent; color:var(--color-white,#F5F5F5); }
textarea{ border:2px solid var(--color-white,#F5F5F5); outline:2px solid var(--color-grey,#252525); }

.toggle-switch { display: flex; flex-direction: column; gap: 6px; }
.switch-wrapper { position: relative; display: inline-block; width: 50px; height: 24px; cursor: pointer; }
.switch-wrapper input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: .4s; }
input:checked + .slider { background-color: #5EF38C; }
input:checked + .slider:before { transform: translateX(26px); }
/* Chrome, Safari, Opera */

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none;  margin: 0; }
/* Firefox */
input[type="number"] { -moz-appearance: textfield; /* removes arrows in Firefox */ }
/* IE 10+ / Edge */
input[type="number"]::-ms-clear, input[type="number"]::-ms-expand {
  display: none; }
/* Spanel Form Ends */

/* Spanel Horizontal Slideshow Begins */
.swiper-container {position: relative; width: 100%; padding: 20px 0; overflow: hidden; }
.swiper-slide { background-color: var(--color-primary,#3A659D); display: grid; justify-content: center; align-items: center; font-size: 18px; height: auto; overflow: hidden; border-radius: 10px;  }
.swiper-button-next, .swiper-button-prev { color: var(--color-white,#F5F5F5); }
/* Spanel Horizontal Slideshow Ends */


/* Spanel Icons Begins */
.icon-point-right:after{content:"\2799";} .icon-quote-open:after{content:"\275D";}
.icon-quote-close:after{content:"\275E";} .icon-tick-success:after{content:"\2714"; color:var(--color-success,#0c610c);}
/* Spanel Icons Ends */


/* Legal Style Begins */
nav.toc{ display:grid; grid-template-columns: auto auto auto auto auto auto; margin:18px 0; border-left:5px solid var(--color-theme); padding-left:14px; }
nav.toc a{ color:#0b71d0; text-decoration:none; display:inline-block; margin:6px 0; font-size:15px; }
.meta{ color:var(--muted);  font-size:13px; } .small{  color:var(--muted);  font-size:13px; }
/* Legal Style Ends */


/* LoggedIn Admin CSS Begins */
.customer-section{width:100%; display:flex; }
.customer-menus{width:20%; box-shadow:var(--bs-theme,0 6px 18px rgba(0,0,0,0.5));height:calc(100vh - 3.25rem);} .customer-content{width:80%; padding:1rem; max-height:calc(100vh - 5rem); height:auto;  overflow-y:auto; overflow-x:hidden; }
.customer-sidebar{ position:relative; width:100%; max-height:calc(100vh - 3.5rem); height:auto; display:grid; grid-template-columns: auto; overflow-y:auto; overflow-x:hidden; }
.side-menu-profile{ border-radius: 50%; box-shadow:var(--bs-theme,0 6px 18px rgba(0,0,0,0.5)); }
.side-menu-urls{position: relative;}
.side-menu-urls .side-menu-link{padding:1rem 0.5rem; transition: 0.35s; border-bottom: 2px solid var(--color-greyish,#D3D3D3); color:var(--color-white,#F5F5F5); display: flex; align-items:center; gap:1rem; font-weight:700; } .side-menu-link{cursor: pointer;}
.side-menu-urls .side-menu-link:hover,.side-menu-urls .side-menu-link:focus,.side-menu-urls .side-menu-link.active{  background-color: var(--color-theme,#CCFF33);  color:var(--color-dark,#1B1B1B) !important; }
.border-bottom{ border-bottom: 2px solid var(--color-greyish,#D3D3D3);}
.border-radius-theme{border-radius:var(--border-radius,1.25rem);}
.cutomer-sidebar-popup{ bottom:3rem; right: 3rem; }
.cutomer-sidebar-popup,.customer-popup{position:fixed; z-index:999;}
.customer-popup{top:15%; left:35%; width:50%; }
svg path{fill:var(--color-white,#FFFFFF);}
/* LoggedIn Admin CSS Ends */



.dashboard-section { border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.section-title { font-size: 1.25rem; font-weight: 600; color: #333; margin-bottom: 15px; }
.preview-profile{border-radius:50%; }
/* === Table Layout Begins=== */
.table-wrapper { overflow-x: auto; }
.spanel-table { width: 100%; border-collapse: collapse; font-size: 14px; color: #444; }
.spanel-table thead { background: #f7f8fa; }
.spanel-table th,.spanel-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.spanel-table th { font-weight: 600; color: #222; letter-spacing: 0.4px; }
.spanel-table tbody tr:hover { background: #f9fafb; transition: 0.2s ease-in-out; }
.spanel-table tbody tr:hover td{ color: #222; }
.spanel-table td:first-child { font-weight: 500; color: #111; }
/* === Table Layout Begins=== */

/* === Status Badges Begins=== */
.status-badge { padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.status-primary { background: #3A659D22; color: #3A659D; }
.status-success { background: #28a74522; color: #28a745; }
.status-warning { background: #ffc10733; color: #ff9800; }
.status-danger  { background: #dc354522; color: #dc3545; }
.status-info    { background: #17a2b822; color: #17a2b8; }
.no-data { text-align: center; padding: 20px; color: #999; font-style: italic; }
/* === Status Badges Ends=== */


.page-header h2 { font-weight: 600; font-size: 22px; }
.filter-form { padding: 15px; border-radius: 8px; margin-bottom: 10px; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; }
.filter-form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.filter-form input,.filter-form select { width: 100%; padding: 6px 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; }
.filter-actions { display: flex; align-items: end; gap: 8px; }
.custom-table { width: 100%; border-collapse: collapse; border-radius: 8px; overflow: hidden; }
.custom-table th { background: #f1f3f5; color:var(--color-dark,#1B1B1B); text-align: left; padding: 10px; font-size: 14px; font-weight: 600; }
.custom-table td { padding: 10px; font-size: 14px; border-bottom: 1px solid #eee; }
.custom-table tr:hover { background: #dfe2e6;color:var(--color-dark,#1B1B1B); }
.badge { padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.type-pickup { background: #d1e7dd; color: #0f5132; }
.type-drop { background: #cff4fc; color: #055160; }
.status-primary { background: #cfe2ff; color: #084298; }
.status-success { background: #d1e7dd; color: #0f5132; }
.status-warning { background: #fff3cd; color: #664d03; }
.status-danger { background: #f8d7da; color: #842029; }

/* Modal Overlay for Data viewing Begins */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); display: flex; justify-content: center;
    align-items: center; z-index: 9999;
}
.modal-content {
    background: var(--color-dark,#1B1B1B); border-radius: 6px; width: 500px; max-width: 90%;
    padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #eee; padding-bottom: 8px; margin-bottom: 10px;
}
.close { cursor: pointer; font-size: 1.3rem; color: #555; }
.modal-body { font-size: 0.95rem; line-height: 1.6; max-height:calc(100vh - 30vh); height:auto; overflow-y:auto; }
.modal-body table { width: 100%; border-collapse: collapse; }
.modal-body th, .modal-body td { border: 1px solid #ddd; padding: 8px; text-align: left; }
.modal-body th { background: var(--color-success,#0c610c); width: 40%; text-transform: capitalize; }
/* Modal Overlay for Data viewing Ends */

/* Pagination Begins */
.pagination-container { margin-top: 25px; text-align: center;}
.pagination { display: inline-flex; list-style: none; padding: 0; margin: 0; gap: 6px;}
.pagination li { display: inline-block;}
.pagination a,.pagination span { display: inline-block; padding: 7px 14px; border: 1px solid #d0d0d0; border-radius: 5px; color: #555; text-decoration: none; font-size: 14px; transition: all 0.2s ease; background: #fff;}
.pagination a:hover { background: var(--color-primary,#3A659D); color: #fff; border-color: var(--color-primary,#3A659D);}
.pagination .active span { background: var(--color-primary,#3A659D); color: #fff; border-color: var(--color-primary,#3A659D);}
.pagination .disabled span { color: #aaa; background: #f8f8f8; cursor: not-allowed;}
/* Pagination Ends */


.list-page,.report-page { padding: 1.5rem; }
.page-header { display: flex; justify-content: space-between; align-items: center; }
.report-actions button { margin-left: 5px; }
.filter-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filter-grid div { display: flex; flex-direction: column; }
.filter-grid input, .filter-grid select { padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; }
.filter-btns { display: flex; gap: 8px; }
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.summary-card {  border-radius: 6px; padding: 15px; text-align: center; box-shadow: var(--bs-theme, 0 6px 18px rgba(0,0,0,0.5)); }
.summary-card.primary { border-left: 5px solid var(--color-primary,#3A659D); }
.summary-card.success { border-left: 5px solid var(--color-success,#0c610c); }
.summary-card.warning { border-left: 5px solid var(--color-warning,#ddff005b); }
.summary-card.danger { border-left: 5px solid var(--color-danger,#842029); }
.summary-value { font-size: 1.4rem; font-weight: bold; }
.charts-section { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chart-card {  padding: 1rem; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.chart-title { margin-bottom: 10px; font-size: 1rem; }
.table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.table th, .table td { border: 1px solid #ddd; padding: 10px; text-align: left; }
.table th { background: #f2f2f2; color:var(--color-dark,#1B1B1B); }


/* Chat Styling Begins */
.chat-body { max-height: 400px; overflow-y: auto; padding: 10px; display: flex; flex-direction: column;
}
.chat-message { margin-bottom: 10px; padding: 8px 12px; border-radius: 6px; max-width: 80%; position: relative;
}
.chat-message.user { background-color: #d1e7ff; align-self: flex-end;
}
.chat-message.driver { background-color: #f8f9fa; align-self: flex-start;
}
.chat-time { font-size: 11px; color: #888; margin-top: 3px; text-align: right; }
/* Chat Styling Ends */

@media only screen and (max-width:996px){ .grid-res-5{ grid-template-columns: auto auto auto; }  }
@media only screen and (max-width:768px){ html{font-size:15px;} .nav-toggle{display:block; text-align:right;}
.nav-menu{left:0; position:fixed; width:100%; height:100%; background-color:var(--color-dark,#1B1B1B); display:none; z-index:1299; }
    .nav-menu li{margin-top:2rem;} .nav{ grid-template-columns: auto auto auto;}
    .nav-dropdown-list{left:0; } .d-grid-res-none,.customer-sidebar-toggle{display:block;}
    .w-vw-full{width:calc(100vw - 2vw);} .d-res-grid-center{display:grid; text-align: center;}
    .grid-res-2,.grid-res-3,.grid-res-4,.grid-res-5{grid-template-columns: auto;}
    .p-res-2,.p-res-3{padding:1rem !important;} .customer-section{display: grid;}
    .customer-content{width:100%;} .customer-menus{display:none;}
    .customer-sidebar{position:fixed; z-index:999; background-color:var(--color-dark,#1B1B1B); width:75%; max-height:calc(100vh - 3.5rem); height:100%; }
    .nav-ul{display: grid; justify-content: left; width: 100%; }
    .customer-popup{top:12%; left:2.5%; width:95%; }
    .spanel-table th, .spanel-table td { padding: 10px; font-size: 13px; }
    .section-title { font-size: 1.1rem; }
    .toggle-switch{flex-direction:row; align-items:center; margin-top:1rem; }
}
@media only screen and (max-width:1120px){ nav.toc{  grid-template-columns: auto auto auto; } }
@media only screen and (max-width:996px){ nav.toc{  grid-template-columns: auto auto; } }
@media only screen and (max-width:768px){ nav.toc{  grid-template-columns: auto; } }
@media only screen and (max-width:300px){ .customer-sidebar{  width:100%; } }