:root{
    --txtPrimary:#26282D;
    --txtSecondary:#5F6165;
    --txtGrey:#9E9E9E;
    --greyDark:#3F4144;
    --grey50:#FAFAFA;
    --greyLight:#dadada;
    --greyLightest:#EEEEEE;
    --midGrey: #9E9E9E33;
    --brand:#9A130A;
    --brandLight:#CC5D5C;
    --brandLightest:#FFFAFA;
    --brandLighter:#F2D4D3;
    --brandDark:#6E0C06;
    --brandDarker:#580804;
    --orange:#FB6514;
    --warning:#F79009;
    --warning12:#F790091F;
    --warningLight:#FEC84B;
    --warningLighter:#FEF0C7;
    --warningDark:#B54708;
    --warningDarker:#93370D;
    --indigo:#6172F3;
    --indigoLighter:#E0EAFF;
    --indigoDarker:#2D31A6;
    --error:#F04438;
    --error12:#F044381F;
    --errorlighter:#FFEBE9;
    --errorDark:#B42318;
    --rose:#F63D68;
    --roseLighter:#FFE4E8;
    --roseDarker:#A11043;
    --carmine:#B32323;
    --success:#43A351;
    --success12:#28A7451F;
    --successLighter:#E1F0E3;
    --successDark:#2B6834;
    --blue:#265BBE;
    --blueDarkest:#081D45;
    --blueLight400:#36BFFA;
    --info12:#265BBE1F;
    --infoDark:#143C85;
    --infoDarker:#0D2B63;
    --actionHover:#9E9E9E14;
    --lightF5:#F5F5F5;
    --borderColor:#9E9E9E52;
    --white:#ffffff;
    --black:#000000;
    --FontTheme: "Nunito", sans-serif;
}

html, body { min-height: 100%; min-height:100vh;}
.layout-boxed html, .layout-boxed body { height: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; font-weight: 400; font-family: var(--FontTheme); color: var(--txtSecondary);}
a, button{ outline:none !important; text-decoration:none; transition:all .3s ease-in-out;}
a:hover, a:focus, select:focus, button:focus, .btn:focus, btn.focus { outline:none; text-decoration:none; box-shadow:none;}
* { margin:0; padding:0; }
img { border:none; vertical-align:middle; max-width:100%;}
li { list-style:none; }
h1, h2, h3, h4, h5, h6 { outline:none !important; color: var(--txtPrimary);}
input, select, textarea, button { outline:none !important; }

.mb-30{ margin-bottom:30px !important;}
.img-white{ filter: brightness(0) invert(1);}

/* Color */
.txt_primary{ color: var(--txtPrimary) !important;}
.txt_secondary{ color: var(--txtSecondary) !important;}
.txt_grey{ color: var(--txtGrey) !important;}
.grey_dark{ color: var(--greyDark) !important;}
.brand{ color: var(--brand) !important;}
.brand_darker{ color: var(--brandDarker) !important;}
.orange{ color: var(--orange) !important;}
.warning{ color: var(--warning) !important;}
.indigo{ color: var(--indigo) !important;}
.success{ color: var(--success) !important;}
.success_dark{ color: var(--successDark) !important;}
.error_dark{ color: var(--errorDark) !important;}
.indigo_darker{ color: var(--indigoDarker) !important;}
.warning_darker{ color: var(--warningDarker) !important;}
.rose{ color: var(--rose) !important;}
.rose_darker{ color: var(--roseDarker) !important;}

/* Background */
.secondary-bg{ background: var(--txtSecondary);}
.grey_dark-bg{ background: var(--greyDark);}
.brand-bg{ background: var(--brand);}
.brand_lighter-bg{ background: var(--brandLighter);}
.orange-bg{ background: var(--orange);}
.warning-bg{ background: var(--warning);}
.indigo-bg{ background: var(--indigo);}
.success-bg{ background: var(--success);}
.success_dark-bg{ background: var(--successDark);}
.error_dark-bg{ background: var(--errorDark);}
.rose-bg{ background: var(--rose);}
.rose_lighter-bg{ background: var(--roseLighter);}
.indigo_lighter-bg{ background: var(--indigoLighter);}
.warning_light-bg{ background: var(--warningLight);}
.warning_lighter-bg{ background: var(--warningLighter);}

/* Layout */
.container{ width: 90%; max-width: 1820px; margin: 0 auto; padding: 0;}

.wrapper{ min-height:100vh; position: relative;}
.wrapper:before, .wrapper:after{ content: " "; display: table;}
.wrapper:after{ clear: both; }

.content-wrapper{ padding:0 12px 12px 0; width: calc(100% - 240px); min-height: calc(100vh - 64px); z-index: 800; -webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out, width 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out, width 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out, width 0.3s ease-in-out; transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out, width 0.3s ease-in-out; margin-left: 240px; z-index: 820; display: flex; flex-direction: column;}
@media (max-width: 1279px) {
    .content-wrapper{ margin-left: 0; width: 100%; padding-left: 12px;}
}
@media (max-width: 1279px) {
    .sidebar-open .content-wrapper{ /*-webkit-transform: translate(240px, 0); -ms-transform: translate(240px, 0); -o-transform: translate(240px, 0); transform: translate(240px, 0);*/}
}

/* Fixed layout */
.fixed .main-header, .fixed .main-sidebar{ position: fixed; }
.fixed .main-header { top: 0; right: 0; left: 0; }
.fixed .content-wrapper{ padding-top: 50px; }

@media (max-width: 1279px) {
    .fixed .content-wrapper{ padding-top: 100px;}
}
.fixed.layout-boxed .wrapper{ max-width: 100%;}

/* Content */
.content { min-height: 240px; padding: 16px; margin-right: auto; margin-left: auto;}

/* Main Header */
.main-header { position: sticky; top: 0; left: 0; width: 100%; max-height: 64px; z-index: 1030; padding: 0 12px 0 0; background: var(--white);}
.main-header > .navbar { -webkit-transition: margin-left 0.3s ease-in-out; -o-transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out; margin-bottom: 0; margin-left: 240px; border: none; min-height: 64px; border-radius: 0; padding:0; background:var(--white);}
.main-header .brand_part{ width: 240px; padding: 18px 16px; margin: 0; float: left; display: flex; justify-content: space-between; align-items: center; background: var(--white); position: relative;}
.main-header .brand_part::after{ content: ""; position: absolute; left: 16px; bottom: 0; background: var(--midGrey); height: 1px; width: 208px; transition: all .3s ease-in-out;}
.main-header .sidebar-toggle{ width: 28px; height: 28px; background: var(--white); border: 0.5px solid rgba(158, 158, 158, 0.16); box-shadow: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px rgba(10, 13, 18, 0.06); border-radius: 4px; display: flex; align-items: center; justify-content: center;}
.main-header .logo { height: auto; width: auto; min-width: 28px; padding:0; overflow: hidden; display: flex; gap: 8px; align-items: center; color: var(--txtPrimary);}
.main-header .logo > .logo-txt{ display: block; font-size: 16px; font-weight: 700; font-family: var(--FontTheme);}

@media (max-width: 1279px) {
    .main-header .navbar { margin: 0;}
    .main-header .sidebar-toggle img { transform: scaleX(-1);}
    .sidebar-collapse .main-header .sidebar-toggle img { transform: scaleX(1);}
}

.pagination > span{ display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 500; color: var(--txtPrimary);}
.pagination > span img{ filter: brightness(0) saturate(100%) invert(12%) sepia(8%) saturate(886%) hue-rotate(185deg) brightness(96%) contrast(89%);}
.pagination > a.page{ display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--txtPrimary);}
.pagination > a.page img{ width: 20px; filter: brightness(0) saturate(100%) invert(12%) sepia(8%) saturate(886%) hue-rotate(185deg) brightness(96%) contrast(89%);}
.pagination > a.page ~ .sub-item{ margin-left: 16px;}
.pagination > .sub-item{ display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; color: var(--txtPrimary);}
.pagination > .sub-item:before{ content: ""; width: 4px; height: 4px; border-radius: 5px; background: var(--txtSecondary); margin: 0 4px 0 0;}
.pagination > .sub-item.current{ color: var(--brand);}

.nav_right{ margin:0 0 0 auto; padding:0;}
.nav_right ul{ margin:0; padding:0; display:flex; -ms-flex-align: center; align-items: center; justify-content:center;}
.nav_right ul > li{ margin:0 0 0 24px; padding:0; color:var(--txtPrimary);}
.nav_right ul > li > a{ color:var(--txtPrimary); position:relative;}
.nav_right ul > li.notification > a{ width: 40px; height: 40px; border-radius: 8px; display: flex; justify-content: center; align-items: center;}
.nav_right ul > li.notification > a span{ width: 8px; height: 8px; border-radius: 50%; display: block; background: var(--brand); box-shadow: 0 0 0 1px var(--white); position: absolute; top: 8px; right: 12px;}
.nav_right ul > li.search > a{ display: flex; gap: 12px; padding: 8px 12px; background: #9E9E9E14; border-radius: 8px;}
.nav_right ul > li.search > a span{ width: 34px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 14px; background: var(--white); box-shadow: 0px 0.83px 1.67px 0px #919EAB29; font-weight: 300; gap: 2px;}
.nav_right ul > li.search > a span small{ font-size: 11px; font-weight: 700;}
.nav_right ul > li.wallet > a{ padding: 7px 11px; border: 1px solid var(--brandLighter); border-radius: 8px; background: var(--brandLightest); display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600;}
.nav_right ul > li.admin-photo > a{ width: 40px; height: 40px; border-radius: 8px; display: flex;}
.nav_right ul > li.admin-photo > a img{ width: 100%; height: 100%; object-fit: cover; border-radius: 8px;}
.nav_right .dropdown-menu{ margin:0; padding:10px 0; border:none; border-radius:0px; box-shadow:2px 10px 10px rgba(0, 0, 0, 0.07); left:auto; right:0; min-width:100%;}
.nav_right .dropdown-item{ margin:0; padding:8px 20px; font-size:15px; font-weight:400; color:#0F111D;}
.nav_right .dropdown-item i{ margin:0 5px 0 0;}
.nav_right .dropdown-item:hover, .nav_right .dropdown-item:focus{ background:#F6FDFF; color:var(--txtPrimary); border-color:#F6FDFF; }

/* Sidebar */
.main-sidebar{ position: fixed; top: 0; left: 0; padding: 80px 16px 0; min-height: 100%; width: 240px; z-index: 810; transition: transform 0.3s ease-in-out, width 0.3s ease-in-out; }
@media (max-width: 1279px) {
    .main-sidebar{ background: var(--white); -webkit-transform: translate(-240px, 0); -ms-transform: translate(-240px, 0); -o-transform: translate(-240px, 0); transform: translate(-240px, 0);}
    .main-header .brand_part{ border: none; width: 190px; margin: 0; padding: 18px 16px; background: var(--white);}
}
@media (min-width: 1280px) {
    .sidebar-collapse .main-sidebar{ -webkit-transform: translate(-240px, 0); -ms-transform: translate(-240px, 0); -o-transform: translate(-240px, 0); transform: translate(-240px, 0);}
}
@media (max-width: 1279px) {
    .sidebar-mini.sidebar-collapse .main-sidebar{ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.07); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0);}
    .sidebar-open .main-sidebar{ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.07); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0);}
}

.sidebar{ padding-bottom: 10px; }
.sidebar-menu { list-style: none; margin: 0; padding: 0 8px 0 0;}
.sidebar-menu > li { position: relative; margin: 0 0 2px; padding: 0; }
.sidebar-menu > li.aside-title{ margin: 16px 0 14px; font-size: 12px; font-weight: 400; text-transform: uppercase; color: var(--txtGrey);}
.sidebar-menu > li > a{ padding: 10px 8px 10px 5px; display: flex; align-items: center; gap: 12px; font-size:14px; font-weight:600; color:var(--txtPrimary); border-left: 3px solid transparent; border-radius: 4px !important; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition:all .2s ease-in-out; position:relative;}
.sidebar-menu > li > a img{ filter: brightness(0) saturate(100%) invert(12%) sepia(8%) saturate(886%) hue-rotate(185deg) brightness(96%) contrast(89%); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition:all .2s ease-in-out;}
.sidebar-menu > li .label, .sidebar-menu > li .badge { margin-top: 3px; margin-right: 5px; }
/* .sidebar-menu li > a > .fa-angle-down { position:absolute; right:20px; top:17px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition:all .2s ease-in-out;}
.sidebar-menu li.active > a > .fa-angle-down { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); }
.sidebar-menu li.active > .submenu-drop { display: block; }
.sidebar-menu .submenu-drop { display: none; list-style: none; padding: 0; margin: 0;}
.sidebar-menu .submenu-drop .submenu-drop { padding-left: 20px; }
.sidebar-menu .submenu-drop > li { margin: 0; }
.sidebar-menu .submenu-drop > li > a { padding:10px 20px 10px 87px; display: block; font-size: 14px; font-weight:500; color:#ccc !important; }
.sidebar-menu .submenu-drop > li > a > .fa{ width: 20px; }
.sidebar-menu .submenu-drop > li > a > .fa-angle-left, .sidebar-menu .submenu-drop > li > a > .fa-angle-down { width: auto; }*/

.customer_dropdown button{ display: flex; padding: 6px 8px; background: var(--white); border: 1px solid rgba(158, 158, 158, 0.16); box-shadow: 0px 1px 3px rgba(10, 13, 18, 0.14); border-radius: 8px; gap: 12px; font-size: 16px; font-weight: 600; color: var(--txtPrimary); text-align: left; line-height: normal; align-items: center; width: 100%;}
.customer_dropdown button::after{ content: ""; width: 20px; height: 20px; border: none; background: url(../images/dropdown-arrow20x.svg) no-repeat center center; margin: 0 0 0 auto;}
.customer_dropdown figure{ width: 32px; min-width: 32px; height: 32px; border-radius: 4px; display: flex; margin: 0;}
.customer_dropdown figure img{ width: 100%; height: 100%; object-fit: cover; border-radius: 4px;}
.customer_dropdown small{ font-size: 12px; font-weight: 400; color: var(--txtSecondary); display: block;}
.customer_dropdown .dropdown-menu{ padding: 8px; min-width: 100%; background: var(--white); border: 1px solid rgba(158, 158, 158, 0.16); box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.14); border-radius: 8px; margin: 0 0 5px 0 !important;}
.customer_dropdown .dropdown-item{ margin: 0 0 12px; padding: 0; gap: 12px; font-size: 16px; font-weight: 600; color: var(--txtPrimary); text-align: left; line-height: normal; align-items: center; display: flex; border-radius: 4px; background: none;}
.customer_dropdown .dropdown-item:last-child{ margin-bottom: 0;}

/* Component: Sidebar Mini */
@media (min-width: 1280px) {
    .sidebar-collapse .main-header .brand_part::after{ width: 45px;}
    .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .right-side, .sidebar-mini.sidebar-collapse .main-footer { margin-left: 75px !important; z-index: 840;  width: calc(100% - 75px);}
    .sidebar-mini.sidebar-collapse .main-sidebar { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); width: 75px !important; z-index: 850;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li { position: relative; margin-bottom: 5px;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li > a { margin-right: 0; padding: 7px 7px; width: 42px;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span { border-top-right-radius: 4px;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li.aside-title{ display: none;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span { border-bottom-right-radius: 4px;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li > .submenu-drop { padding-top: 5px; padding-bottom: 5px; border-bottom-right-radius: 4px;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right), .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .submenu-drop { display: block !important; position: absolute; width: 180px; left: 100%;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span { top: 0; margin-left:5px; padding: 9px 5px 9px 15px; background-color: var(--lightF5); font-weight:700; border-radius: 4px; color: var(--brand);}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .submenu-drop { top: 38px; margin-left: 0;}
    .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info, .sidebar-mini.sidebar-collapse .sidebar-form, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span, .sidebar-mini.sidebar-collapse .sidebar-menu > li > .submenu-drop, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fa, .sidebar-mini.sidebar-collapse .sidebar-menu li.header { display: none !important; -webkit-transform: translateZ(0);}
    /* .sidebar-mini.sidebar-collapse .main-header .logo > .logo-txt { display: none;} */
    .sidebar-mini.sidebar-collapse .main-header .sidebar-toggle img{ transform: scaleX(-1);}
    .sidebar-mini.sidebar-collapse .sidebar-menu .submenu-drop > li > a{ padding-left:20px;}
    .sidebar-mini.sidebar-collapse .customer_dropdown button{ padding: 4px;}
    .sidebar-mini.sidebar-collapse .customer_dropdown button span, .sidebar-mini.sidebar-collapse .customer_dropdown button::after{ display: none;}
}
.sidebar-menu, .main-sidebar .user-panel, .sidebar-menu > li.header { white-space: nowrap; overflow: hidden; }
.sidebar-menu:hover { overflow: visible; }
.sidebar-form, .sidebar-menu > li.header { overflow: hidden; text-overflow: clip; }
.sidebar-menu li > a { position: relative; }
.sidebar-menu li > a > .pull-right { position: absolute; right: 10px; top: 50%; margin-top: -7px; }

.sidebar{ height:calc(100vh - 168px) !important; margin-bottom: 24px;}
.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a { color: var(--brand); border-left-color: var(--brand); background:var(--lightF5); box-shadow: -1px 1px 3px 0px rgba(0, 0, 0, 0.14);}
.sidebar-menu > li:hover > a img, .sidebar-menu > li.active > a img{ filter: none;}

.main-sidebar .mCSB_inside > .mCSB_container{ margin-right:0;}
.sidebar-collapse .main-sidebar .mCSB_container, .sidebar-collapse .main-sidebar .mCustomScrollBox{ overflow:visible!important;}
.main-sidebar #mCSB_1_scrollbar_vertical{ opacity:0; width:5px;}
.main-sidebar .sidebar{ margin-right: -8px;}
.main-sidebar:hover #mCSB_1_scrollbar_vertical{ opacity:1;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{ background-color: var(--borderColor);}
.mCSB_scrollTools .mCSB_draggerRail{ background: transparent;}

.open:not(.dropup) > .animated-dropdown-menu { backface-visibility: visible !important; -webkit-animation: flipInX 0.7s both; -o-animation: flipInX 0.7s both; animation: flipInX 0.7s both;}

@keyframes flipInX {
    0% { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transition-timing-function: ease-in; opacity: 0;}
    40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transition-timing-function: ease-in;}
    60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1;}
    80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}
    100% { transform: perspective(400px);}
}
@-webkit-keyframes flipInX {
    0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; opacity: 0;}
    40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in;}
    60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1;}
    80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}
    100% { -webkit-transform: perspective(400px);}
}
/*----------------------------- Sidebar end */

/* Theme Button */
.btn-theme{ min-width: max-content; margin: 0; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--borderColor); background: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--txtPrimary); transition:all .3s ease-in-out;}
.btn-theme.btn-transy:not(:hover){ background: transparent;}
.btn-theme img{ transition:all .3s ease-in-out;}
.btn-theme:not(.sm,.md) img{ width: 20px; height: 20px;}
.btn-theme.border-0:not(:disabled):hover{ background: #E0E0E0;}
.btn-theme:not(:disabled):hover{ background: var(--actionHover); border-color: var(--txtPrimary); color: var(--txtPrimary);}
.btn-theme.btn-shadow{ box-shadow: 0px 2px 6px 2px #00000026, 0px 1px 2px 0px #0000004D !important;}

.btn-theme.btn-dark.fill{ box-shadow: 0px 2px 6px 2px #00000026, 0px 1px 2px 0px #0000004D; background: var(--txtPrimary); border-color: var(--txtPrimary); color: var(--white);}
.btn-theme.btn-dark.fill:not(:disabled):hover{ background: var(--greyDark); border-color: var(--greyDark); color: var(--white);}

.btn-theme.btn-brand{ border-color: var(--brand); color: var(--brand);}
.btn-theme.btn-brand:not(:disabled):hover{ background: var(--brandDarker); border-color: var(--brandDarker); color: var(--white);}
.btn-theme.btn-brand.fill{ box-shadow: 0px 2px 6px 2px #00000026, 0px 1px 2px 0px #0000004D; background: var(--brand); border-color: var(--brand); color: var(--white);}
.btn-theme.btn-brand.fill:not(:disabled):hover{ background: var(--brandDarker); border-color: var(--brandDarker); color: var(--white);}
.btn-theme.btn-brand48{ border-color: #9A130A7A; color: var(--brand); background: transparent;}
.btn-theme.btn-brand48:not(:disabled):hover{ border-color: var(--brand); color: var(--brand); background: var(--brandLightest);}

.btn-theme.btn-error{ border-color: var(--error); color: var(--error);}
.btn-theme.btn-error:not(:disabled):hover{ background: var(--errorDark); border-color: var(--errorDark); color: var(--white);}
.btn-theme.btn-error:not(.fill,:disabled):hover img{ filter: brightness(0) invert(1);}
.btn-theme.btn-error.fill{ box-shadow: 0px 2px 6px 2px #00000026, 0px 1px 2px 0px #0000004D; background: var(--error); border-color: var(--error); color: var(--white);}
.btn-theme.btn-error.fill img{ filter: brightness(0) invert(1);}
.btn-theme.btn-error.fill:not(:disabled):hover{ background: var(--errorDark); border-color: var(--errorDark); color: var(--white);}
.btn-theme.btn-error8.fill{ box-shadow: none; background: #F0443814; border-color: transparent; color: var(--errorDark);}
.btn-theme.btn-error8.fill:not(:disabled):hover{ background: var(--error12); border-color: transparent; color: var(--errorDark);}

.btn-theme.btn-grey.fill{ box-shadow: none; background: #E0E0E0; border-color: transparent; color: var(--txtPrimary);}
.btn-theme.btn-grey.fill:not(:disabled):hover{ background: var(--greyLightest); border-color: transparent; color: var(--txtPrimary);}
.btn-theme.btn-greylightest.fill{ box-shadow: none; background: var(--greyLightest); border-color: transparent; color: var(--txtPrimary);}
.btn-theme.btn-greylightest.fill:not(:disabled):hover{ background: var(--greyLight); border-color: transparent; color: var(--txtPrimary);}

.btn-theme.btn-primary-trancy{ box-shadow: none; background: transparent; border-color: transparent; color: var(--txtPrimary);}
.btn-theme.btn-primary-trancy:not(:disabled) img{ filter: brightness(0) saturate(100%) invert(12%) sepia(8%) saturate(886%) hue-rotate(185deg) brightness(96%) contrast(89%);}
.btn-theme.btn-primary-trancy:not(:disabled):hover{ background: var(--greyLightest); border-color: transparent; color: var(--txtPrimary);}

.btn-theme.btn-success.fill{ box-shadow: none; background: var(--success); border-color: transparent; color: var(--white);}
.btn-theme.btn-success.fill:not(:disabled):hover{ background: var(--successDark); border-color: transparent; color: var(--white);}

.btn-theme.sm{ padding: 4px 8px; font-size: 12px;}
.btn-theme.md{ padding: 6px 8px; font-size: 12px;}

.btn-theme:disabled, .btn-theme:disabled:hover, .btn-theme:disabled:focus, .btn-theme:disabled:active{ box-shadow: none !important; background: #9E9E9E29 !important; border-color: transparent !important; color: var(--txtGrey) !important;}
.btn-theme:disabled img{ filter: brightness(0) invert(0); opacity: 0.35;}

.min-w-120{ min-width: 120px !important;}
.min-w-180{ min-width: 180px !important;}


/*============ Login/Signup Modual ============*/
.login-wrapper{ min-height: 100vh; display: flex;}
.login-wrapper .left_part{ flex: 1 0 0; position: relative; background: var(--black); padding: 64px 56px;}
.login-wrapper .left_part .bg{ width: 100%; height: 100%; object-fit: cover; opacity: 0.5; position: absolute; top: 0; left: 0;}
.login-wrapper .left_part .logo{ display: flex; width: 237px; position: relative; z-index: 2;}
.login-wrapper .right_part{ width: 100%; flex: 600px 0 0; display: flex; flex-direction: column; justify-content: center; background: var(--white); box-shadow: 0px 1px 3px 1px #00000026, 0px 1px 2px 0px #0000004D;}
.login-wrapper .detail{ padding: 30px 40px;}
.login-title{ margin: 0 0 12px; padding: 0; font-size: 32px; font-weight: 700; color: var(--txtPrimary);}
.login-description{ margin: 0 0 40px; font-size: 18px; font-weight: 600; color: var(--txtPrimary);}
.login-description a{ display: inline-block; margin-left: 5px; font-size: 16px; font-weight: 500; color: var(--brand);}
.login-description a:hover{ color: var(--brandDarker); text-decoration: underline;}
.login-wrapper .alert-error{ margin-bottom: 40px; border-radius: 6px; border: none; padding: 8px 16px; background: var(--errorlighter); font-size: 14px; font-weight: 600; color: var(--errorDark); text-align: left; line-height: 18px;}
.login_form{ margin: 0;}
@media(min-width:1200px){
    .login_form .form-floating > .form-control, .login_form .form-floating > .form-control-plaintext, .login_form .form-floating > .form-select{ height: 52px; min-height: 52px;}
    .login_form .form-floating > label{ padding-top: 12px; padding-bottom: 12px;}
}

.form-check:not(.form-switch){ margin: 0; padding: 0 0 0 32px; position: relative; min-height: auto;}
.form-check:not(.form-switch) .form-check-input[type="checkbox"]{ width: 20px; height: 20px; border-color: var(--txtGrey); margin: 0; border-radius: 5px; position: absolute; top: 0; left: 0; box-shadow: none !important;}
.form-check:not(.form-switch) .form-check-label{ font-size: 14px; color: var(--txtPrimary);}
.form-check:not(.form-switch) .form-check-input:checked[type="checkbox"]{ border-color: var(--brand); background-color: var(--brand); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 19'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m6 10 3 3 7-7'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center center; background-size: 24px;}

.forgot_link{ margin: 0; display: inline-block; font-size: 15px; font-weight: 700; color: var(--brandLight); text-decoration: underline;}
.forgot_link:hover{ color: var(--brand);}

.login_form .btn-group{ padding: 60px 20px 0; display: flex; gap: 16px; flex-wrap: nowrap;}
.or_info{ font-size: 14px; font-weight: 400; color: var(--txtSecondary); text-align: center; position: relative;}
.or_info::before{ content: ""; width: 100%; height: 1px; background: #D9D9D9; position: absolute; left: 0; top: 0; bottom: 0; margin: auto;}
.or_info span{ display: inline-block; padding: 0 10px; background: var(--white); text-transform: uppercase; position: relative; z-index: 2;}
.option_signup{ display: flex; justify-content: center; gap: 24px;}
.option_signup a{ width: 64px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--borderColor); border-radius: 8px;}
.option_signup a:hover{ border-color: var(--txtPrimary);}
p.login-info{ margin: 0; padding: 0; font-size: 14px; color: var(--txtPrimary); text-align: center;}
p.login-info a{ font-weight: 600; text-decoration: underline; color: var(--txtPrimary);}
p.login-info a:hover{ color: var(--brand);}

.forgotpassword-wrapper{ display: flex; flex-direction: column; min-height: 100vh; width: 100%;}
.signup-header{ margin: 0; padding: 24px 0;}
.signup-header .logo{ display: flex; width: 110px;}
.forgotp-content{ flex: 1 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px 0 60px;}
.forgotp-content .container{ max-width: 520px; padding: 0;}
.forgotp-ic{ margin-bottom: 32px; display: inline-block;}
.forgotp-content .login-description{ color: var(--txtSecondary);}
.otp-group{ display: flex; gap: 10px; justify-content: space-between;}
.otp-group .form-control{ width: 52px; height: 52px; line-height: normal; padding: 0 5px; font-size: 32px; font-weight: 400; color: var(--txtPrimary); box-shadow: none !important; outline: none !important; border-color: var(--borderColor); border-radius: 8px; background-color: var(--white); text-align: center;}
.otp-group .form-control[type=number]::-webkit-outer-spin-button, .otp-group .form-control[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
.otp-group .form-control[type=number] {-moz-appearance: textfield;}





/*============ Dashboard Modual ============*/
.dashboard_main, .content-body{ background: var(--grey50); border: 1px solid #9E9E9E29; flex: 1 0 0; border-radius: 8px; padding: 16px;}

.content_head{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;}

.content-footer{ padding: 12px 16px 0 16px; display: flex; gap: 12px; justify-content: space-between; align-items: center;}
.content-actions{ display: inline-flex; gap: 10px 24px; margin-left: auto;}

.page-title{ margin: 0; padding: 0 0 0 8px; font-size: 20px; font-weight: 600; color: var(--txtPrimary);}

.datelabel{ margin: 0; padding: 5px 12px; font-size: 16px; font-weight: 600; color: var(--txtPrimary); display: flex; justify-content: center; align-items: center; gap: 12px; background: var(--white); border: 1px solid rgba(158, 158, 158, 0.16); box-shadow: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px rgba(10, 13, 18, 0.06); border-radius: 6px;}

.card_block{ padding: 12px; background: var(--white); border: 1px solid rgba(158, 158, 158, 0.16); box-shadow: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px rgba(10, 13, 18, 0.06); border-radius: 8px; height: 100%;}

hr.line{ width: 100%; height: 1px; background: var(--midGrey); opacity: 1; display: block; border: none; margin: 0;}
.btn-group{ display: flex; gap:5px 12px; flex-wrap: wrap;}

/* Notification Sidebar */
.notification_sidebar.offcanvas .offcanvas-body{ padding: 16px;}
.notification_sidebar h6{ margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--txtSecondary);}
.notifi_item{ margin: 0 0 12px; padding: 12px; border-radius: 8px; display: flex; gap: 20px; align-items: flex-start;}
.notifi_item i{ width: 36px; min-width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--midGrey); background: var(--success12); display: flex; align-items: center; justify-content: center;}
.notifi_item i img{ width: 20px; height: 20px; object-fit: contain; object-position: center center;}
.notifi_item .dtl{ padding: 0 90px 0 0; position: relative; flex: 1;}
.notifi_item .datetime{ font-size: 12px; font-weight: 500; color: var(--txtSecondary); position: absolute; right: 0; top: 0; display: inline-flex; gap: 8px; align-items: center;}
.notifi_item .datetime::after{ content: ""; width: 8px; height: 8px; border-radius: 8px; background: var(--brand); opacity: 0;}
.notifi_item h4{ margin: 0 0 8px; padding: 0; font-size: 14px; font-weight: 700; color: var(--txtPrimary);}
.notifi_item p{ margin: 0 0 16px; padding: 0; font-size: 14px; font-weight: 400; color: var(--txtPrimary);}
.notifi_item h4:last-child, .notifi_item p:last-child{ margin-bottom: 0;}
.notifi_item .btn-theme[class="btn-theme md"]:not(:hover){ background: transparent;}
.notifi_item.unread{ background: var(--brandLightest);}
.notifi_item.unread .datetime::after{ opacity: 1;}
.notifi_item i.brand{ background: #9A130A14;}
.notifi_item i.warning{ background: var(--warning12);}
.notifi_item i.info{ background: var(--info12);}
.unread-lists .notifi_item:not(.unread){ display: none;}

/* Modal */
.modal-backdrop{ background: #1E1E1E;}
.modal-backdrop.show{ opacity: 0.8;}
.modal.show ~ .modal-backdrop.show{ opacity: 0.8 !important;}
.modal .modal-dialog{ width: 90%; margin-left: auto; margin-right: auto;}
.modal .modal-content{ border: none; background: var(--white); border-radius: 16px; box-shadow: -40px 40px 80px -8px #0000003D;}
.modal .modal-header{ padding: 16px 44px 16px 20px; border: none;}
.modal .modal-header .modal-title{ font-size: 16px; font-weight: 500; color: var(--txtPrimary); display: flex; align-items: center; gap: 12px;}
.modal .modal-header .btn-close{ width: 24px; height: 24px; padding: 0; opacity: 1; margin: 0; box-shadow: none !important; top: 1.2em; right: 1.2em; background-size: 10px; position: absolute;}
.modal .modal-body{ padding: 16px 20px; border: none;}
.modal .modal-body p{ margin: 0 0 8px; font-size: 14px; line-height: 18px; color: var(--txtSecondary);}
.modal .modal-body p:last-child{ margin-bottom: 0;}
.modal .modal-footer{ padding: 16px; gap: 24px; border: none;}


/* Search Modal */
.search-modal.show ~ .modal-backdrop.show{ opacity: 0.24 !important;}
.search-modal{ -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);}
.search-modal .modal-dialog{ max-width: 920px;}
.search-modal .modal-body{ padding: 0;}
.search-modal .search_block{ padding: 16px; display: flex; gap: 8px; align-items: center;}
.search-modal .search_block i{ display: flex;}
.search-modal .search_block .form-control{ flex: 1; border: none; box-shadow: none; font-size: 14px; font-weight: 400; color: var(--txtPrimary); padding: 0; margin: 0;}
.search-modal .search_filter{ display: flex; gap:0 12px; margin: 0; padding: 0 16px; border-top: 1px solid var(--midGrey); border-bottom: 1px solid var(--midGrey); flex-wrap: wrap;}
.search-modal .search_filter span{ align-self: center; font-size: 14px; font-weight: 400; color: var(--txtSecondary); padding: 8px 0;}
.search-modal .search-tabs { border: none; margin: 0 0 -1px; padding: 0; gap: 12px;}
.search-modal .search-tabs .nav-link{ padding:10px 12px; border: none; border-bottom: 2px solid transparent; color: var(--txtPrimary); font-size: 14px; font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center;}
.search-modal .search-tabs .nav-link.active { color: var(--txtPrimary); border-bottom-color: var(--txtPrimary);}
.search-modal .tab-content{ padding: 16px;}
.search-modal h6{ margin: 0 0 20px; padding: 0; font-size: 12px; font-weight: 500; color: var(--txtSecondary);}
.search-modal .frequent-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px;}
.search-modal .frequent-item { margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--txtSecondary);}
.search-modal .frequent-item img{ width: 16px; height: 16px; opacity: 0.5; filter: brightness(0) invert(0);}
.search-modal .frequent-item:hover{ color: var(--txtPrimary);}

.search_filter_selects{ margin: -4px -16px 16px; padding: 0 16px 12px; border-bottom: 1px solid var(--midGrey); display: flex; gap: 12px; align-items: center; flex-wrap: wrap;}
.search_filter_selects .bootstrap-select{ width: auto !important;}
.search_filter_selects .bootstrap-select > .btn{ margin: 0; padding: 4px 4px 4px 8px; font-size: 12px; font-weight: 600; color: var(--txtPrimary); border: 1px solid var(--borderColor); border-radius: 6px; height: 26px; min-height: 26px;}

/* Form switch */
.form-switch{ margin: 0; padding: 0; display: flex; min-height: auto; gap: 8px;}
.form-switch .form-check-input{ margin: 1px 0 0; width: 32px; height: 18px; border-radius: 50px; background-color: #9E9E9E7A !important; --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important; border: none; box-shadow: none;}
.form-switch .form-check-input:checked{ background-color: var(--brand) !important;}
.form-switch .form-check-label{ align-self: center; font-size: 14px; font-weight: 400; color: var(--txtPrimary);}

.tred_block i{ width: 32px; height: 32px; margin-bottom: 12px; border-radius: 5.33px; display: flex; align-items: center; justify-content: center;}
.tred_block h5{ margin: 0 0 26px; padding: 0; font-size: 16px; font-weight: 500; color: var(--txtSecondary); display: flex; align-items: center; gap: 4px;}
.tred_block .points{ font-size: 24px; font-weight: 700; color: var(--txtPrimary);}
.tred_block .market{ font-size: 14px; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; color: var(--successDark);}
.more-btn{ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; width: 28px; min-width: 28px; height: 28px; background: var(--white); border: 1px solid rgba(158, 158, 158, 0.18); border-radius: 6px;}
.more-btn:hover{ background: var(--grey50); box-shadow: inset 0.5px 0.5px 2px var(--txtGrey); outline: none;}

.smcard_head{ display: flex; gap: 12px; margin-bottom: 24px;}
.smcard_head i{ width: 28px; height: 28px; min-width: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center;}
.smcard_head i img{ width: 20px;}
.smcard_head h5{ margin: 0; padding: 0; font-size: 16px; font-weight: 600; color: var(--txtPrimary); display: flex; gap: 4px; align-self: center;}
.totalshipment_block .point{ font-size: 24px; font-weight: 700; color: var(--txtPrimary); margin:0 0 35px;}
.totalshipment_block > h5{ font-size: 16px; color: var(--txtSecondary); font-weight: normal;}
.shipment_bar{ width: 100%; height: 12px; border-radius: 6px; overflow: hidden; display: flex;}
.shipment_bar .progress{ width: 100%; height: 100%; background: linear-gradient(to right, var(--indigo) 0%, var(--indigo) 38%, var(--warning) 38%, var(--warning) 75%, var(--brand) 75%, var(--brand) 90%, var(--rose) 90%, var(--rose) 100%);}
.shipmentc_items{ display: grid; grid-template-columns: repeat(2,1fr); border: 1px solid var(--midGrey); border-radius: 6px; margin-top: 40px;}
.shipmentc_item{ border-top: 1px solid var(--midGrey); padding: 12px;}
.shipmentc_item:first-child, .shipmentc_item:nth-child(2){ border-top: none;}
.shipmentc_item:nth-child(even){ border-left: 1px solid var(--midGrey);}
.shipmentc_item h6{ margin: 0 0 17px; padding: 1px 0 0 12px; font-size: 14px; font-weight: 500; color: var(--txtSecondary); position: relative;}
.shipmentc_item h6::before{ content: ""; width: 4px; height: 100%; background: var(--indigo); border-radius: 4px; position: absolute; left: 0; top: 0;}
.shipmentc_item .points{ margin-bottom: 17px; padding: 1px 8px 0 8px; font-size: 14px; font-weight: 600; border-radius: 50px; text-align: center; display: inline-block;}
.shipmentc_item .price{ font-size: 18px; font-weight: 700; color: var(--txtPrimary);}

.shipmentc_warning h6::before{ background: var(--warningLight);}
.shipmentc_brand h6::before{ background: var(--brand);}
.shipmentc_rose h6::before{ background: var(--rose);}

.or_chart_block h5{ margin: 0 0 4px; padding: 0; font-size: 16px; font-weight: 600; color: var(--txtSecondary);}
.or_chart_block .price{ font-size: 20px; font-weight: 700; color: var(--txtPrimary);}
.or_chart_block .market{ font-size: 14px; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; color: var(--successDark);}

#chart2 .apexcharts-legend-marker{ width: 16px !important; height: 16px !important; border-radius: 4px !important;}
#chart2 .apexcharts-legend-marker svg path{ border-radius: 4px !important;}
#chart2 .apexcharts-legend-series{ width: 100% !important; justify-content: start; gap: 5px;}
#chart2 .apexcharts-legend-series .apexcharts-legend-text{ font-size: 14px !important; font-weight: 500 !important; color: var(--txtSecondary) !important; font-family: var(--FontTheme) !important;}

#chart1, #chart3{ margin: 0 -15px;}
#chart3 svg text{ font-family: var(--FontTheme) !important; fill: var(--txtSecondary) !important;}
#chart4{ margin: 0 -20px;}
#chart4 svg line{ display: none;}
#chart4 rect[fill="transparent"] { display: none;}

#chart2 .apexcharts-slices .apexcharts-datalabels{ display: none !important;}
#chart2 .apexcharts-datalabel-value{ font-size: 27px !important;}
#chart2 .apexcharts-legend-series{ margin: 0 0 8px !important;}
#chart2 .apexcharts-legend{ padding: 0 !important;}


/*============ Account Modual Pages ============*/
.acnav-tabs{ margin: 0; padding: 8px; background: rgba(158, 158, 158, 0.08); border: 1px solid rgba(158, 158, 158, 0.16); border-radius: 8px; display: inline-flex; gap: 8px;}
.acnav-tabs .nav-item{ margin: 0; padding: 0;}
.acnav-tabs .nav-item .nav-link{ margin: 0; padding: 5px 8px; border-radius: 6px; font-size: 14px; font-weight: 600; display: flex; gap: 8px; align-items: center; color: var(--txtSecondary); border: none; box-shadow: none;}
.acnav-tabs .nav-item .nav-link i{ display: flex;}
.acnav-tabs .nav-item .nav-link.active{ background: var(--white); color: var(--txtPrimary); box-shadow: 0px 1px 2px 1px #00000026, 0px 1px 2px 0px #0000003D;}

.actab-content{ margin: 0; padding: 0; position: relative;}
.actab-content .grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); grid-gap: 20px;}
.account-card{ margin: 0; padding: 0; border-radius: 8px; background: var(--white); box-shadow: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px rgba(10, 13, 18, 0.06); border: 1px solid rgba(158, 158, 158, 0.16); height: 100%;}
.account-card .accard_head{ margin: 0; padding: 12px; display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; border-bottom: 1px dashed rgba(158, 158, 158, 0.2);}
.account-card .accard_head .head-left{ margin: 0; padding: 0; display: flex; gap: 12px;}
.account-card .accard_head .head-left figure{ margin: 0; padding: 0; height: 80px; width: 80px; min-width: 80px; border-radius: 8px;}
.account-card .accard_head .head-left figure img{ height: 100%; width: 100%; object-fit: cover; border-radius: 8px;}
.account-card .accard_head .head-left span{ margin: 0; padding: 0; font-size: 16px; font-weight: 600; color: var(--txtPrimary);}
.account-card .accard_head .head-left span small{ color: var(--txtSecondary); font-size: 14px; font-weight: 400; display: block;}
.account-card .accard_head .head-more{ margin: 0; padding: 0; display: flex; gap: 12px;}
.account-card .accard_head .head-more .plsadd{ margin: 0; padding: 0; height: 32px; width: 32px; border-radius: 8px; background: #E0E0E0; display: flex; justify-content: center; align-items: center;}
.account-card .ac-bottom{ margin: 0; padding: 15px 12px; display: flex; gap: 15px; justify-content: space-between;}
.account-card .ac-bottom span{ margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; font-size: 14px; font-weight: 400;}
.account-card .ac-bottom span i{ display: flex;}
.account-card .ac-bottom span a{ color: var(--txtSecondary);}
.account-card .ac-bottom span a:hover{ color: var(--black);}
.actab-content .theme-datatable table.dataTable > tbody > tr:nth-child(2n) > td:last-child{ text-align: right;}
.actab-content #accountTable_wrapper table.dataTable > thead > tr > th,
.actab-content .theme-datatable table.dataTable > thead > tr > th:last-child,
.actab-content .theme-datatable table.dataTable > tbody > tr:nth-child(2n) > td:last-child{ width: 180px; min-width: auto;}
.actab-content .theme-datatable table.dataTable > tbody > tr > td .action{ min-width: auto; justify-content: flex-end;}

/* elips more option dropdown */
.elipsmoreops-drop{ margin: 0; padding: 0;}
.elipsmoreops-drop button{ margin: 0; padding: 0; height: 32px; width: 32px; display: flex; justify-content: center; align-items: center; border: none; background: transparent; border-radius: 8px;}
.elipsmoreops-drop button:hover, .elipsmoreops-drop button.show{ background: #E0E0E0;}
.elipsmoreops-drop button::after{ display: none;}
.elipsmoreops-drop .dropdown-menu{ margin: 5px 0 0 !important; padding: 0; border-radius: 12px; background: var(--white); box-shadow: 0px 0px 1px rgba(145, 158, 171, 0.24), -20px 20px 40px -4px rgba(145, 158, 171, 0.24); border: none; min-width: 132px;}
.elipsmoreops-drop .dropdown-menu.show{ display: block !important;}
.elipsmoreops-drop .dropdown-menu li{ margin: 0; padding: 0;}
.elipsmoreops-drop .dropdown-menu li a{ display: flex; padding: 11px 12px; font-size: 14px; font-weight: 400; gap: 12px; color: var(--txtPrimary); transition: all .2s ease-in-out;}
.elipsmoreops-drop .dropdown-menu li a i{ min-width: 20px; width: 20px; display: flex; align-self: center;}
.elipsmoreops-drop .dropdown-menu li a i img{ width: 20px; height: 20px; filter: brightness(0) saturate(100%) invert(12%) sepia(8%) saturate(886%) hue-rotate(185deg) brightness(96%) contrast(89%); transition: all .2s ease-in-out;}
.elipsmoreops-drop .dropdown-menu li:last-child a{ color: var(--error);}
.elipsmoreops-drop .dropdown-menu li:last-child a i img{ filter: none;}
.elipsmoreops-drop .dropdown-menu li a:active{ background: transparent;}
.elipsmoreops-drop .dropdown-menu li a:hover{ background: rgba(158, 158, 158, 0.08) !important;}

.dtable-dropdown{ position: relative; display: inline-block;}
.dtable-dropmenu{ margin: 0 !important; padding: 0; border-radius: 12px; background: var(--white); box-shadow: 0px 0px 1px rgba(145, 158, 171, 0.24), -20px 20px 40px -4px rgba(145, 158, 171, 0.24); position: absolute; display: none; z-index: 999; min-width: 132px;}
.dtable-dropmenu.show{ display: block !important;}
.dtable-dropmenu li{ margin: 0; padding: 0; font-size: 16px;}
.dtable-dropmenu li a{ display: flex; padding: 11px 12px; font-size: 14px; font-weight: 400; gap: 12px; color: var(--txtPrimary); transition: all .2s ease-in-out;}
.dtable-dropmenu li a i{ min-width: 20px; width: 20px; display: flex; align-self: center;}
.dtable-dropmenu li a i img{ width: 20px; height: 20px; filter: brightness(0) saturate(100%) invert(12%) sepia(8%) saturate(886%) hue-rotate(185deg) brightness(96%) contrast(89%); transition: all .2s ease-in-out;}
.dtable-dropmenu li:last-child a{ color: var(--error);}
.dtable-dropmenu li:last-child a i img{ filter: none;}
.dtable-dropmenu li a:active{ background: transparent;}
.dtable-dropmenu li a:hover{ background: rgba(158, 158, 158, 0.08) !important;}

/* Theme Datatable */
.theme-datatable{ margin: 0; padding: 0;}
.theme-datatable > .dt-container > .top{ overflow: auto; padding: 0 0 10px; margin: 0; scroll-behavior: smooth; scrollbar-color: var(--borderColor) transparent; scrollbar-width: thin;}
.theme-datatable .dt-column-order{ display: inline-flex; position: absolute; width: 16px !important; height: 16px !important; margin-left: 3px; top: unset !important; bottom: unset !important; right: unset !important; left: unset !important;}
.theme-datatable .dt-column-order::before{ content: "" !important; display: none !important; width: 16px; height: 16px; background: url(../images/datatable-uparrow.svg) no-repeat center center; position: unset !important; font-size: unset !important; line-height: unset !important; opacity: 1 !important;}
.theme-datatable .dt-column-order::after{ content: "" !important; display: none !important; width: 16px; height: 16px; background: url(../images/datatable-uparrow.svg) no-repeat center center; position: unset !important; font-size: unset !important; line-height: unset !important; opacity: 1 !important; transform: scaleY(-1);}

.theme-datatable table.dataTable > thead > tr > th:not(.dt-ordering-asc,.dt-ordering-desc) .dt-column-order{ background: url(../images/datatable-arrows.svg) no-repeat center center;}
.theme-datatable table.dataTable > thead > tr > th:not(.dt-ordering-asc,.dt-ordering-desc) .dt-column-order::before,
.theme-datatable table.dataTable > thead > tr > th:not(.dt-ordering-asc,.dt-ordering-desc) .dt-column-order::after{ display: none !important;}
.theme-datatable table.dataTable > thead > tr > th.dt-ordering-asc .dt-column-order,
.theme-datatable table.dataTable > thead > tr > th.dt-ordering-desc .dt-column-order{ background: none;}


table.dataTable thead > tr > th:not(.dt-ordering-desc,.dt-ordering-asc) span.dt-column-order::after, table.dataTable thead > tr > td:not(.dt-ordering-desc,.dt-ordering-asc) span.dt-column-order::after{ display: inline-flex !important;}
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after{ display: inline-flex !important;}


.theme-datatable table.dataTable{ margin: 0; padding: 0; background: none; border: none;}
.theme-datatable table.dataTable > thead > tr > th{ padding: 8px 16px 8px 12px; font-size: 12px; font-weight: 600; color: var(--txtPrimary); background: var(--lightF5); border:none !important; box-shadow: 2px 2px 4px 0px #0000000A, inset 0 -1px 0 var(--greyLightest), inset 0 1px 0 var(--greyLightest) !important; outline: none !important; position: relative;}
.theme-datatable table.dataTable > thead > tr > th .dt-column-title,
.theme-datatable table.dataTable > thead > tr > td .dt-column-title{ text-transform: uppercase; white-space: nowrap;}
.theme-datatable table.dataTable > thead > tr > th:first-child{ padding-left: 16px; border-radius: 4px 0 0 4px; box-shadow: 2px 2px 4px #0000000A, inset 0 -1px 0 var(--greyLightest), inset 1px 1px 0 var(--greyLightest) !important;}
.theme-datatable table.dataTable > thead > tr > th:last-child{ border-radius: 0 4px 4px 0; box-shadow: 2px 2px 4px #0000000A, inset 0 -1px 0 var(--greyLightest), inset -1px 1px 0 var(--greyLightest) !important;}
.theme-datatable table.dataTable > thead > tr > th > input:not([type="checkbox"],[type="radio"]),
.theme-datatable table.dataTable > thead > tr > th > select{ border: none; border-bottom: 1px solid var(--borderColor); background: none; font-size: 12px; font-weight: 500; color: var(--txtGrey); border-radius: 0; margin-top:9px;}
.theme-datatable table.dataTable > thead > tr > th > .daterange_field_btn span{ width: 100%; border: none; border-bottom: 1px solid var(--borderColor); background: url(../images/dropdown-arrow-grey8x.svg) no-repeat center right; background-color: none; font-size: 12px; font-weight: 500; color: var(--txtGrey); border-radius: 0; margin-top:9px; display: block;}
.theme-datatable table.dataTable > thead > tr > th > input{ color: var(--txtPrimary);}
.theme-datatable table.dataTable > thead > tr > th > input::placeholder{ color: var(--txtGrey); opacity: 1;}
.theme-datatable table.dataTable > thead > tr > th > select option{ color: var(--txtPrimary);}


.theme-datatable table#orderTable > thead > tr > th > .search-wrapper input{ border: none; border-bottom: 1px solid var(--borderColor); background: none; font-size: 12px; font-weight: 500; color: var(--txtGrey); border-radius: 0; margin-top:9px; width: 100%; color: var(--txtPrimary);}
.theme-datatable table#orderTable > thead > tr > th > .search-wrapper input::placeholder{ color: var(--txtGrey); opacity: 1;}
.theme-datatable table#orderTable > thead > tr > th > select{ padding-right: 28px;}
.theme-datatable table#orderTable > thead > tr > th .priority-selectpckr > .btn{ padding-right: 30px;}
.theme-datatable table#orderTable > thead > tr > th .clear-btn{ position: absolute; bottom: 2px; right: 0; border: none; background: none;}
.theme-datatable table#orderTable > thead > tr > th .clear-select-btn{ position: absolute; bottom: 2px; right: 17px; border: none; background: none;}
.theme-datatable table#orderTable > thead > tr > th > select ~ .clear-btn{ right: 37px;}
.theme-datatable table#orderTable > thead > tr > th > .priority-select ~ .clear-btn{ right: 37px;}

table.dataTable > thead > tr > .dt-select, table.dataTable > tbody > tr > .dt-select{ padding-right: 0 !important;}
.theme-datatable table.dataTable > tbody > tr > td{ padding: 8px 16px 8px 12px; font-size: 14px; font-weight: 400; vertical-align: middle; color: var(--txtPrimary); background: var(--white); border:none !important; box-shadow: 2px 2px 4px 0px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset 0 0.5px 0 var(--greyLightest) !important; outline: none !important; white-space: nowrap;}
.theme-datatable table.dataTable > tbody > tr > td:first-child{ padding-left: 16px; border-radius: 4px 0 0 4px;}
.theme-datatable table.dataTable > tbody > tr > td:last-child{ border-radius: 0 4px 4px 0;}
.theme-datatable table.dataTable > tbody > tr:nth-child(even) > td:first-child{ border-radius: 4px 0 0 4px; box-shadow: 2px 2px 4px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset 0 0.5px 0 var(--greyLightest), inset 0.5px 0 0 var(--greyLightest) !important;;}
.theme-datatable table.dataTable > tbody > tr:nth-child(even) > td:last-child{ border-radius: 0 4px 4px 0; box-shadow: 2px 2px 4px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset -0.5px 0.5px 0 var(--greyLightest) !important;}
table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date { text-align: left;}

/* Table Grey Row */
.theme-datatable table.dataTable > tbody > tr.grey_row > td:first-child{ box-shadow: 2px 2px 4px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset 0 0.5px 0 var(--greyLightest), inset 3px 0 0 var(--txtGrey) !important;}

/* Table Active Row */
.theme-datatable table.dataTable > tbody > tr.active_row > td:first-child{ box-shadow: 2px 2px 4px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset 0 0.5px 0 var(--greyLightest), inset 3px 0 0 var(--success) !important;}

/* Table Inactive Row */
.theme-datatable table.dataTable > tbody > tr.inactive_row > td:first-child{ box-shadow: 2px 2px 4px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset 0 0.5px 0 var(--greyLightest), inset 3px 0 0 var(--error) !important;}

/* Table Warning Row */
.theme-datatable table.dataTable > tbody > tr.warnning_row > td:first-child{ box-shadow: 2px 2px 4px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset 0 0.5px 0 var(--greyLightest), inset 3px 0 0 var(--warning) !important;}

/* Table Blue Row */
.theme-datatable table.dataTable > tbody > tr.blue_row > td:first-child{ box-shadow: 2px 2px 4px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset 0 0.5px 0 var(--greyLightest), inset 3px 0 0 var(--blue) !important;}

/* Table Empty Row */
.theme-datatable table.dataTable > tbody > tr.empty_row > td{padding: 5px; background: none !important; box-shadow:none !important; height: 10px;}

.theme-datatable table.dataTable > tbody > tr > td.customerid a{ font-weight: 600; color: var(--brand); text-decoration: underline;}
.theme-datatable table.dataTable > tbody > tr > td.customeradd a{ font-weight: 600; color: var(--txtPrimary); text-decoration: underline;}
.theme-datatable table.dataTable > tbody > tr > td.customeradd small{ display: block; font-size: 12px; font-weight: 400; color: var(--txtSecondary);}
.theme-datatable table.dataTable > tbody > tr > td .action{ display: flex; gap: 24px; align-items: center; min-width: 180px;}
.theme-datatable table.dataTable > tbody > tr > td .elipsmoreops-drop button{ width: 28px; height: 28px; border-radius: 6px;}

/* Datatable Controls */
.datatable-foot{ width: 100%;}
.dt-length label{ display: inline-flex; align-items: center;}
.dt-length label span{ font-size: 14px; font-weight: 500; color: var(--txtPrimary);}
.dt-length label select.dt-input{ border:1px solid #BDBDBD; border-radius: 50px; height: 28px; font-size: 12px; font-weight: 500; padding: 4px 30px 4px 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--white) url(../images/dropdown-arrow20x.svg) no-repeat center right 10px; background-size: 16px; color: var(--txtPrimary);}
.dt-pages-select.bootstrap-select{ width: auto !important;}
.dt-pages-select.bootstrap-select > .btn{ border:1px solid #BDBDBD; border-radius: 50px; height: 28px; font-size: 12px; font-weight: 500; padding: 4px 30px 4px 14px; background: var(--white); color: var(--txtPrimary); min-width: 67px; min-height: auto;}
.dt-pages-select.bootstrap-select > .btn::after{ width: 16px; height: 16px; background: url(../images/dropdown-arrow20x.svg) no-repeat center center; background-size: 16px; position: absolute; right: 10px; margin: 0;}
.dt-pages-select.bootstrap-select > .dropdown-menu{ border: none; box-shadow: -20px 20px 40px -4px #919EAB3D, 0px 0px 2px 0px #919EAB3D; min-width: 68px; background: var(--white); border-radius: 12px;}
.dt-pages-select.bootstrap-select .dropdown-menu li a:hover, .dt-pages-select.bootstrap-select .dropdown-menu li a:focus{ background: var(--actionHover); color: var(--txtPrimary);}
.dt-pages-select.bootstrap-select .dropdown-menu li a.active, .dt-pages-select.bootstrap-select .dropdown-menu li a.selected, .dt-pages-select.bootstrap-select .dropdown-menu li.active a, .dt-pages-select.bootstrap-select .dropdown-menu li.selected a{ background: #9E9E9E29; color: var(--txtPrimary);}

.dt-paging nav{ display: inline-flex; gap: 8px; margin: 0; padding: 0;}
.dt-paging nav button{ width: 24px; min-width: 24px !important; height: 24px; font-size: 12px; font-weight: 500; color: var(--txtPrimary); border-radius: 4px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; background: none !important; border: 1px solid transparent !important;}
.dt-paging nav button.current{ border-color: var(--midGrey) !important; background: var(--greyLightest) !important; color: var(--txtPrimary) !important;}
.dt-paging nav button.first, .dt-paging nav button.previous, .dt-paging nav button.next, .dt-paging nav button.last{ font-size: 0; color: transparent !important;}
.dt-paging nav button.first::before{ content: ""; width: 14px; height: 14px; background: url(../images/table-paging-left1.svg) no-repeat center center;}
.dt-paging nav button.previous::before{ content: ""; width: 14px; height: 14px; background: url(../images/table-paging-left2.svg) no-repeat center center;}
.dt-paging nav button.last::before{ content: ""; width: 14px; height: 14px; background: url(../images/table-paging-right1.svg) no-repeat center center;}
.dt-paging nav button.next::before{ content: ""; width: 14px; height: 14px; background: url(../images/table-paging-right2.svg) no-repeat center center;}
.datatable-foot .dt-paging .dt-paging-button:hover, div.dt-container .dt-paging .dt-paging-button:hover{  color: var(--txtPrimary) !important;}
.dt-info{ font-size: 14px; font-weight: 500; color: var(--txtPrimary) !important;}
.dt-info .select-info{ margin-left: 4px;}

/* Datatable Header filter search */
.datatable_searchfilter-dropdown { width: 248px; position: absolute; top: 60px; left: 16px; background: var(--white); border-radius: 12px; box-shadow: -40px 40px 80px -8px #0000003D; overflow: hidden; z-index: 23;}
.datatable_searchfilter-dropdown .dsf_head{ display: flex; gap: 8px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--borderColor);}
.datatable_searchfilter-dropdown .dsf_head .form-control { outline: none; flex: 1; border: none !important; font-size: 14px !important; font-weight: 400; color: var(--txtPrimary) !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important;}
.datatable_searchfilter-dropdown .dsf_head button { font-size: 16px; margin:0 !important; color: #555; background: none; border: none;}
.datatable_searchfilter-list { padding:0 16px 6px 16px; text-transform: none !important; overflow: auto; scroll-behavior: smooth; scrollbar-color: var(--borderColor) transparent; scrollbar-width: thin; max-height: 202px;}
.datatable_searchfilter-list .datatable_searchfilter-title { font-size: 12px; color: var(--txtSecondary); font-weight: 500; padding:16px 0 8px; background: var(--white); position: sticky; top: 0; z-index: 2;}
.datatable_searchfilter-list .datatable_searchfilter-item { font-size: 14px; color: var(--txtGrey); padding: 8px 0; cursor: pointer;}
.datatable_searchfilter-list .datatable_searchfilter-item:hover { color: var(--txtPrimary);}
.datatable_searchfilter-list .datatable_searchfilter-highlight { font-weight: 500; color: var(--txtPrimary);}

/* Datatable Price range Filter */
.pricerange-dropdown { display: flex; align-items: center; justify-content: center; background: var(--white); border-radius: 12px; padding: 4px; width: fit-content; position: absolute; top: 60px; left: 16px; z-index: 23; box-shadow: -40px 40px 80px -8px #0000003D;}
.pricerange-dropdown .range-input { border: 1px solid var(--borderColor); outline: none; padding: 8px 12px; font-size: 14px; border-radius: 12px; background: var(--white); width: 101px; height: 42px; color: var(--txtPrimary); -moz-appearance: textfield;}
.pricerange-dropdown .range-input::-webkit-outer-spin-button, .pricerange-dropdown .range-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
.pricerange-dropdown .range-separator { margin: 0 8px; color: var(--midGrey); font-weight: 700;}

/* Theme Badge Tag */
.badge{ min-height: 26px; padding: 5px 8px; font-size: 12px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; border-radius: 6px; color: var(--greyDark); background: var(--lightF5); max-width: 100%; min-width: max-content; border: none;}
.badge.xxl{ padding-top: 8px; padding-bottom: 8px; min-height: 34px;}
.badge.sm{ gap: 4px; padding-top: 4px; padding-bottom: 4px; min-height: 22px;}
.badge.md{ gap: 4px; padding-top: 4px; padding-bottom: 4px; min-height: 24px;}
.badge.badge-success{ color: var(--successDark); background: var(--success12);}
.badge.badge-error{ color: var(--errorDark); background: var(--error12);}
.badge.badge-warning{ color: var(--warningDark); background: #F7900929;}
.badge.badge-info{ color: var(--infoDark); background: var(--info12);}
.badge.badge-grey{ color: var(--txtPrimary); background: #9E9E9E29;}
.badge.badge-successdark{ color: var(--white); background: var(--successDark);}
.badge.badge-secondary{ color: var(--txtSecondary); background: #9E9E9E29;}

.badge:disabled{ color: var(--txtSecondary); background: #9E9E9E29;}
.badge:disabled img{ filter: brightness(0) invert(0); opacity: 0.7;}

/* Account Table Saperate CSS */
#accountTable_wrapper table.dataTable > thead > tr > th{ min-width: 160px;}
#accountTable_wrapper table.dataTable > thead > tr > th:last-child{ pointer-events: none;}
#accountTable_wrapper table.dataTable > thead > tr > th:last-child .dt-column-order{ display: none;}

/* Offcanvas Account Customer ID View */
.offcanvas.offcanvas-end{ width: 96% !important; max-width: 480px; box-shadow: -40px 40px 80px -8px #919EAB3D; border: none; border-left: 1px solid var(--midGrey) !important;}
.offcanvas ~ .offcanvas-backdrop{ opacity: 0 !important;}
.offcanvas .offcanvas-header{ padding: 19px 20px; border: none; border-bottom: 1px solid var(--midGrey); justify-content: space-between; gap: 15px;}
.offcanvas .offcanvas-title{ display: flex; gap: 12px; align-items: center; font-size: 18px; font-weight: 600; color: var(--txtPrimary);}
.offcanvas .offcanvas-header .btn-close{ width: 22px; height: 22px; padding: 0; opacity: 0.8; margin: 0; box-shadow: none !important;}
.offcanvas .offcanvas-body{ scroll-behavior: smooth; scrollbar-color: var(--borderColor) transparent; scrollbar-width: thin; padding: 0;}
.offcanvas .offcanvas-footer{ padding: 12px 24px; border-top: 1px solid var(--midGrey);}
.offcanvas .offcanvas-footer .action{ display: flex; justify-content: flex-end; align-items: center; gap: 10px;}
.offcanvas .offcanvas-footer .action .btn-theme{ min-width: 78px;}
.cstmracview_sidebar .customer_info{ padding: 20px 16px; display: flex; gap: 16px; font-size: 12px; border-top: 1px solid var(--midGrey);}
.cstmracview_sidebar .customer_info:first-child{ border-bottom: 1px solid var(--midGrey); border-top: none;}
.cstmracview_sidebar .customer_info figure{ width: 64px; min-width: 64px; height: 64px; border-radius: 8px; margin: 0;}
.cstmracview_sidebar .customer_info figure img{ width: 100%; height: 100%; border-radius: 8px; object-fit: cover;}
.cstmracview_sidebar .customer_info h6{ margin: 0 0 1px; font-size: 16px; font-weight: 700; color: var(--txtPrimary);}
.cstmracview_sidebar .customer_info span{ margin: 0 0 4px; font-weight: 500; color: var(--txtSecondary); display: block;}
.cstmracview_sidebar .customer_info strong{ margin: 0; font-weight: 500; color: var(--txtPrimary);}
.cstmracview_sidebar .order_and_balance{ padding: 20px 16px;}
.cstmracview_sidebar .order_and_balance .row>div:first-child p{ color: var(--txtPrimary);}
.cstmracview_sidebar .order_and_balance p{ margin: 0; font-size: 14px; font-weight: 400; color: var(--txtSecondary); line-height: normal;}
.cstmracview_sidebar .order_and_balance p span{ font-weight: 600; display: block; margin-top: 4px; color: var(--txtPrimary);}
.order_invoice_info.order_and_balance p{ color: var(--txtSecondary);}
.order_invoice_info.order_and_balance p span{ color: var(--txtPrimary); margin-top: 0;}
.orderreached_info{ padding: 12px 16px; background: var(--brandLightest); color: var(--txtPrimary); border-bottom: 1px solid var(--brandLighter);}
.orderreached_info strong{ margin: 4px 0 0; display: block; font-size: 16px; font-weight: 600;}
.docment-collapse{ border-top: 1px solid var(--midGrey); border-bottom: 1px solid var(--midGrey);}
.docment-collapse button{ padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--txtSecondary); display: flex; width: 100%; justify-content: space-between; gap: 10px; border: none; align-items: center; background: transparent; border-radius: 0;}
.docment-collapse button:after{ content: ""; width: 25px; height: 25px; background: url(../images/dropdown-arrow20x.svg) no-repeat center center; display: block; margin: 0; border: none; background-size: 100% 100%;}
.docment-collapse .card-body{ padding: 0 12px 12px;}
.docpdf_download{ padding: 8px 0; margin-bottom: 16px; border-bottom: 1px solid #9E9E9E29; display: flex; align-items: center; gap: 12px;}
.docpdf_download:last-child{ margin-bottom: 0;}
.docpdf_download i{ display: flex; margin: 0; width: 40px; min-width: 40px;}
.docpdf_download .rdtl{ display: flex; align-items: center; gap: 12px; justify-content: space-between; flex: 1 0 0;}
.docpdf_download .rdtl h6{ margin: 0; font-size: 14px; font-weight: 500; color: var(--txtPrimary); display: flex; width: 120px; /*word-break: break-all;*/}
.docpdf_download .rdtl h6 strong{ max-width: max-content; overflow: hidden; width:100%; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; font-weight: normal;}
.docpdf_download .rdtl h6 span{ white-space: nowrap;}
.docpdf_download .rdtl p{ margin: 0; font-size: 12px; font-weight: 500; color: var(--txtSecondary);}
.docpdf_download .inn_rdtl{ display: flex; align-items: center; gap: 12px;}
.docpdf_download .inn_rdtl .progress{ width: 100%; max-width: 194px; background: var(--greyLightest); min-width: 194px; height: 12px; border-radius: 50px;}
.docpdf_download .inn_rdtl .progress .progress-bar{ background: var(--blue);}
.docpdf_download .inn_rdtl .bootstrap-select{ width: 100% !important; max-width: 194px; min-width: 194px;}
.docpdf_download .inn_rdtl .bootstrap-select > .btn{ border: 1px solid var(--borderColor);}
.docpdf_download .inn_rdtl .bootstrap-select > .btn.disabled{ background-color: var(--greyLightest); border-color: #9E9E9E29; color: var(--txtGrey);}
.docpdf_download .bootstrap-select .dropdown-menu li a:hover, .docpdf_download .bootstrap-select .dropdown-menu li a:focus{ background: var(--actionHover); color: var(--txtPrimary);}
.docpdf_download .bootstrap-select .dropdown-menu li a.active, .docpdf_download .bootstrap-select .dropdown-menu li a.selected, .docpdf_download .bootstrap-select .dropdown-menu li.active a, .docpdf_download .bootstrap-select .dropdown-menu li.selected a{ background: #9E9E9E29; color: var(--txtPrimary);}
.docpdf_download .dwnld-btn28x:not(:hover){ background: transparent;}
.docpdf_download.error .error-msg{ font-size: 12px; font-weight: 500;}
.error-msg{ font-size: 14px; font-weight: 400; color: var(--errorDark); line-height: 1.4em;}

.docpdf_download_style3{ background: var(--actionHover); padding: 8px; border-radius: 8px; border: none;}

.docpdf_download2{ padding: 8px; border-radius: 8px; background: var(--actionHover);}
.docpdf_download2.error{ background: #F0443814;}
.docpdf_download2:not(:last-child){ margin-bottom: 12px;}
.docpdf_download2 .docpdf_download{ padding: 0; border: none; margin: 0 0 12px;}
.docpdf_download2 .docpdf_download .rdtl{ flex-direction: row; align-items: center;}
.docpdf_download2 .docpdf_download .inn_rdtl{ width: auto;}
.docpdf_download2 .docpdf_download .rdtl h6 span{ font-size: 12px; font-weight: 500; color: var(--txtSecondary);}
.docpdf_download2 .docpdf_download .rdtl h6 span::before{ content: ""; width: 1px; height: 12px; background: var(--txtSecondary); margin: 0 8px;position: relative; top: 2px; display: inline-block;}
.docpdf_download2 .docpdf_download i{ width: 28px; min-width: 28px;}
.docpdf_download2 .elipsmoreops-drop button{ border-radius: 50%;}
.docpdf_download2 .bootstrap-select{ width: 100% !important;}
.docpdf_download2 .bootstrap-select > .btn{ border: 1px solid var(--borderColor);}
.docpdf_download2 .bootstrap-select > .btn.disabled{ background-color: var(--greyLightest); border-color: #9E9E9E29; color: var(--txtGrey);}
.docpdf_download2 .bootstrap-select .dropdown-menu li a:hover, .docpdf_download2 .bootstrap-select .dropdown-menu li a:focus{ background: var(--actionHover); color: var(--txtPrimary);}
.docpdf_download2 .bootstrap-select .dropdown-menu li a.active, .docpdf_download2 .bootstrap-select .dropdown-menu li a.selected, .docpdf_download2 .bootstrap-select .dropdown-menu li.active a, .docpdf_download2 .bootstrap-select .dropdown-menu li.selected a{ background: #9E9E9E29; color: var(--txtPrimary);}

.invalid-feedback_style2{ font-size: 14px; line-height: 18px; color: var(--errorDark) !important;}

.docpdf_accordion{ margin: 0;}
.docpdf_accordion .accordion-item{ border: none !important; border-top: 1px solid var(--midGrey) !important;}
.docpdf_accordion .accordion-button{ padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--txtSecondary); display: flex; width: 100%; justify-content: space-between; gap: 10px; border: none; align-items: center; background: transparent; border-radius: 0; box-shadow: none;}
.docpdf_accordion .accordion-button:after{ content: ""; width: 25px; height: 25px; background: url(../images/dropdown-arrow20x.svg) no-repeat center center; display: block; margin: 0; border: none; background-size: 100% 100%;}
.docpdf_accordion .accordion-body{ padding: 0;}
.docpdf_download_style2{ padding: 12px 16px 16px; margin: 0; background: none; border-bottom: 1px solid #9E9E9E29;}
.docpdf_download_style2:last-child{ border-bottom: none;}
.docpdf_accordion .addresslist .item:last-child{ border-bottom: none;}

.dwnld-btn28x{ width: 28px; min-width: 28px; height: 28px; border-radius: 50%; background: #E0E0E0; border: none; display: inline-flex; align-items: center; justify-content: center;}
.dwnld-btn28x_style2{ background: transparent;}
.dwnld-btn28x:hover{ background: #9E9E9E29;}

.removefile-btn28x, .refresh-btn28x{ width: 28px; min-width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent; display: inline-flex; align-items: center; justify-content: center;}
.removefile-btn28x:hover, .refresh-btn28x:hover{ background: #9E9E9E29;}

.cstmracview_sidebar .addresslist{ margin: 0;}
.cstmracview_sidebar .addresslist .item{ padding: 12px; border-bottom: 1px solid var(--midGrey); display: flex; gap: 12px;}
.cstmracview_sidebar .addresslist .item i{ display: flex; align-self: flex-start; margin: 0; min-width: 20px;}
.cstmracview_sidebar .addresslist .item p{ margin: 0; font-size: 14px; font-weight: 500; color: var(--txtSecondary); line-height: 18px;}
.cstmracview_sidebar .addresslist .item p span:not(.badge){ margin: 8px 0 0; display: block; color: var(--txtPrimary); font-weight: 600;}
.cstmracview_sidebar .addresslist .item p .divider{ width: 2px; height: 16px; display: inline-block; margin: 0 5px; background: var(--midGrey); font-size: unset; position: relative; top: 3px;}
.accstmrview_table{ padding: 12px 16px;}
.accstmrview_table table{ margin: 0; padding: 0; width: 100%;}
.accstmrview_table table thead tr th{ padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--txtSecondary); text-transform: uppercase; position: relative; background: var(--lightF5); border:none !important; box-shadow: 2px 2px 4px 0px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset 0 0.5px 0 var(--greyLightest) !important; outline: none !important; white-space: nowrap;}
.accstmrview_table table thead tr th img{ position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.accstmrview_table table thead tr th:first-child{ border-radius: 6px 0 0 6px; box-shadow: 2px 2px 4px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset 0.5px 0.5px 0 var(--greyLightest) !important;}
.accstmrview_table table thead tr th:last-child{ padding-right: 25px; border-radius: 0 6px 6px 0; box-shadow: 2px 2px 4px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset -0.5px 0.5px 0 var(--greyLightest) !important;}
.accstmrview_table table thead tr th:last-child img{ right: 10px;}
.accstmrview_table table tbody tr:nth-child(even) td{ padding: 19px 16px; font-size: 14px; font-weight: 400; vertical-align: middle; color: var(--txtPrimary); background: var(--white); border:none !important; box-shadow: 2px 2px 4px 0px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset 0 0.5px 0 var(--greyLightest) !important; outline: none !important; white-space: nowrap;}
.accstmrview_table table tbody tr:nth-child(odd) td{ padding: 5px;}
.accstmrview_table table tbody tr td:first-child{ border-radius: 6px 0 0 6px;}
.accstmrview_table table tbody tr td:last-child{ border-radius: 0 6px 6px 0;}
.accstmrview_table table tbody tr:nth-child(even) > td:first-child{ box-shadow: 2px 2px 4px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset 0.5px 0.5px 0 var(--greyLightest) !important;}
.accstmrview_table table tbody tr:nth-child(even) > td:last-child{ box-shadow: 2px 2px 4px #0000000A, inset 0 -0.5px 0 var(--greyLightest), inset -0.5px 0.5px 0 var(--greyLightest) !important;}

.accstmrview_table_style2.accstmrview_table{ padding: 0;}
.accstmrview_table_style2.accstmrview_table table thead tr th{ box-shadow: none !important; border-radius: 0 !important;}
.accstmrview_table_style2.accstmrview_table table tbody tr td, .accstmrview_table_style2.accstmrview_table table tbody tr:nth-child(even) > td:first-child, .accstmrview_table_style2.accstmrview_table table tbody tr:nth-child(even) > td:last-child{ padding: 19px 16px; box-shadow: none !important; border-radius: 0 !important; border-bottom: 1px solid var(--midGrey) !important;}
.accstmrview_table_style2.accstmrview_table table tbody tr:last-child td{ border-bottom: none !important;}


.ordership_timeline{ margin: 0; padding: 16px;}
.ordership_timeline .item{ display: flex; gap: 0 36px; padding:0 0 10px; min-height: 65px; position: relative;}
.ordership_timeline .item::before{ content: ""; width: 12px; height: 12px; border-radius: 50%; background: #28A7453D; position: absolute; left: 114px; top: 5px;}
.ordership_timeline .item.active::before{ background: var(--success);}
.ordership_timeline .item:not(:last-child)::after{ content: ""; width: 1px; height: auto; background: var(--midGrey); position: absolute; left: 119px; top: 29px; bottom: 5px;}
.ordership_timeline .time{ min-width: 102px; width: 102px; font-weight: 600; color: var(--txtPrimary);}
.ordership_timeline .status{ flex: 1 0 0; font-weight: 600; color: var(--txtPrimary);}
.ordership_timeline .status span{ font-size: 12px; font-weight: 400; color: var(--txtGrey); display: block;}

/* Modal Delete Customer */
.delete_cstmr_modal .modal-dialog{ max-width: 520px;}
.delete_cstmr_modal .btn-close{ margin: 0; position: absolute; top: 1em; right: 1em; box-shadow: none !important;}
.delete_cstmr_modal .modal-body .icon{ width: 40px; min-width: 40px; height: 40px; margin: 0 0 24px; border-radius: 8px; background: #F0443814; display: flex; align-items: center; justify-content: center;}
.delete_cstmr_modal .modal-body .modal-title{ margin: 0 0 4px; font-size: 16px; font-weight: 500; color: var(--txtPrimary);}
.delete_cstmr_modal .modal-body p{ font-size: 12px; line-height: 16px; color: var(--txtSecondary);}

/* Modal Order Customer */
.delete_order_modal .modal-dialog{ max-width: 720px;}
.delete_order_modal .modal-body p{ font-size: 14px; line-height: 18px;}

/* Modal Download */
.download_modal .modal-dialog{ max-width: 720px;}
.download_modal .btn-close{ margin: 0; position: absolute; top: 1em; right: 1em; box-shadow: none !important;}
.download_modal .modal-body .icon{ width: 40px; min-width: 40px; height: 40px; margin: 0 0 24px; border-radius: 8px; background: var(--greyLightest); display: flex; align-items: center; justify-content: center;}
.download_modal .modal-body .icon img{ width: 24px; height: 24px;}
.download_modal .modal-body .modal-title{ margin: 0 0 4px; font-size: 16px; font-weight: 500; color: var(--txtPrimary);}
.download_modal .modal-body p{ color: var(--txtSecondary);}

/* Modal Export Records */
.exprecord_modal .modal-dialog{ width: 90%; max-width: 520px; margin-left: auto; margin-right: auto;}
.exprecord_modal .btn-close{ margin: 0; position: absolute; top: 1em; right: 1em; box-shadow: none !important;}
.exprecord_modal .modal-body .icon{ width: 40px; min-width: 40px; height: 40px; margin: 0 0 24px; border-radius: 8px; background: var(--greyLightest); display: flex; align-items: center; justify-content: center;}
.exprecord_modal .modal-body .icon img{ width: 24px; height: 24px;}
.exprecord_modal .modal-body .modal-title{ margin: 0 0 4px; font-size: 16px; font-weight: 500; color: var(--txtPrimary);}
.exprecord_modal .modal-body p{ color: var(--txtSecondary);}
.exprecord_modal .form-group-radio{ margin: 20px 0 0;}
.form-group-radio > label{ margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--txtPrimary); display: block;}
.radio-group-inline{ display: flex; gap: 10px 20px; flex-wrap: wrap;}
.form-check:not(.radiocheck) .form-check-input[type="radio"]{ width: 16px; min-width: 16px; height: 16px; border: 2px solid transparent !important; background: transparent !important; border-radius: 50%; margin: 0; box-shadow: 0 0 0 2px var(--greyDark) !important; position: absolute; left: 2px; top: 2px;}
.form-check:not(.radiocheck) .form-check-input[type="radio"]:checked{ background: var(--brand) !important; border-color: var(--white) !important; box-shadow: 0 0 0 2px var(--brand) !important;}



/*============ Account Add Customer Page ============*/
.acaddcustomer_main{ margin: 0; padding: 0; position: relative;}
.aac_head{ margin: 0 0 20px; display: flex; gap: 20px; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.aac_head .aac_headleft{ margin: 0; display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.aac_head .aac_headleft i{ width: 32px; height: 32px; margin:0; border-radius: 6px; display: flex; align-items: center; justify-content: center;}
.aac_head .aac_headleft i img{ filter: brightness(0) invert(1); width: 20px;}
.aac_head .aac_headleft h5{ margin: 0; padding: 0; font-size: 16px; font-weight: 700; color: var(--txtPrimary); text-transform: uppercase;}
.aac_head .aac_headleft .alert-error{ margin:0; border-radius: 6px; border: none; padding: 7px 8px; background: var(--errorlighter); font-size: 14px; font-weight: 600; color: var(--errorDark); text-align: left; line-height: 18px;}
.aac_head .aac_headleft .alert-error img{ width: 16px;}
.aac_head .aac_headleft > .invalid-feedback{ width: auto; display: inline-flex; font-size: 14px; margin: 0;}
.aac_head .aac_headleft > .invalid-feedback img{ margin-top: 1px;}
.aac_body{ margin: 0 0 24px; padding: 0 0 0 36px; position: relative;}
.aac_body:last-child{ margin-bottom: 0;}
.aac_body::before{ content: ""; width: 2px; height: 100%; border-left: 2px dashed var(--brand); position: absolute; top: 0; left: 11px;}
.aac_body:last-child::before{ display: none;}
.aac_body .card_block{ padding: 16px;}

.acform_head{ margin: 0 0 24px; display: flex; gap: 20px; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.acform_head .acform_headleft{ margin: 0; display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.acform_head .acform_headleft i{ width: 20px; height: 20px; margin:0; display: flex; align-items: center; justify-content: center;}
.acform_head .acform_headleft h6{ margin: 0; padding: 0; font-size: 14px; font-weight: 500; color: var(--txtSecondary);}
.acform_body{ margin: 0 0 24px; padding: 0; position: relative;}

/* Floting Label form */
.form-floating, .input-group{ margin-bottom: 20px;}
.form-floating:last-child, .input-group:last-child{ margin-bottom: 0;}
.form-floating > label::after{ display: none;}
.form-floating > .form-control, .form-floating > .form-control-plaintext { padding: 0 12px;}
.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select{ height: 42px; min-height: 42px; line-height: normal; padding: 0 12px; font-size: 14px; font-weight: 400; color: var(--txtPrimary); box-shadow: none !important; outline: none !important; border-color: var(--borderColor); border-radius: 8px; background-color: var(--white); background-image: none;}
.form-floating > .form-control:disabled{ border-color: #E3E3E3; background-color: var(--greyLightest); color: var(--txtGrey) !important;}
.form-floating > .form-control:disabled ~ label, .form-floating > :disabled ~ label{ /*background-color: var(--greyLightest);*/ background-color: transparent;}
.form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown), .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown){ padding: 0 12px;}
.form-floating > label{ top: 2px; left: 12px; height:auto; font-size: 14px; padding: 7px 2px; color: var(--txtSecondary); background: var(--white); border-radius: 8px;}
.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { padding: 0 2px; color: var(--txtSecondary); top: 0; transform: scale(.85) translateY(-0.69rem) translateX(0.1rem); width: auto;}
.input-group .form-floating ~ .input-group-text{ background: var(--white); border-color: var(--borderColor); border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important;}

.input-group.flex-row-reverse .form-floating > .form-control, .input-group.flex-row-reverse .form-floating > .form-control-plaintext, .input-group.flex-row-reverse .form-floating > .form-select{ border-left: none; border-right: 1px solid var(--borderColor) !important; border-radius: 0 8px 8px 0 !important; padding-left: 0;}
.input-group.flex-row-reverse .form-floating > label{ left: 0;}
.input-group.flex-row-reverse .form-floating ~ .input-group-text{ padding-right: 8px; background: var(--white); border-color: var(--borderColor); border-right: none; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important;}

.ruppe-input-group .form-floating > .form-control-plaintext ~ label, .ruppe-input-group .form-floating > .form-control:focus ~ label, .ruppe-input-group .form-floating > .form-control:not(:placeholder-shown) ~ label, .ruppe-input-group .form-floating > .form-select ~ label{ left: -28px;}

.asterisk-red-sign{ color: var(--error); display: inline-block;}
.info-line{ font-size: 12px; color: var(--txtSecondary); font-weight: 400; display: block; margin-top: 3px;}

/* Form block */
.form_block:not(:last-child){ margin-bottom: 20px;}
.form_block .input-group{ margin-bottom: 0;}
.form_block .form-control{ height: 42px; min-height: 42px; line-height: normal; padding: 0 12px; font-size: 14px; font-weight: 400; color: var(--txtPrimary); box-shadow: none !important; outline: none !important; border-color: var(--borderColor); border-radius: 8px; background-color: var(--white); background-image: none;}
.form_block input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}
.form_block input[type=number] { -moz-appearance: textfield;}
.form_block .form-control::placeholder{ color: var(--txtSecondary);}
.form_block .input-group .input-group-text{ background: var(--white); border-color: var(--borderColor); border-right: none !important; border-radius: 0; border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important;}
.form_block .input-group .input-group-text ~ .form-control{ border-left: none !important; padding-left: 0 !important;}
.form_block .bootstrap-select{ width: 100% !important;}
.form_block .bootstrap-select > .dropdown-toggle::after { width: 22px;}

/* Form Validation */
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control{ border-right: none;}
.input-group.has-validation > .input-group-text{ border-color: var(--error);}
.form-control.is-invalid, .was-validated .form-control:invalid{ border-color: var(--error);}
.form-floating > .form-control.is-invalid:not(:placeholder-shown) ~ label{ color: var(--error);}
.input-group-error.input-group .form-floating ~ .weight-select .bootstrap-select > .btn{ border-color: var(--error); width: auto; min-width: auto; padding-left: 0;}
.input-group-error.input-group .form-floating ~ .weight-select .bootstrap-select > .btn .filter-option{ display: none;}
.input-group-error.input-group .form-floating ~ .weight-select .bootstrap-select > .btn::after{ opacity: 0;}
.input-group-error .invalid-feedback{ display: block;}
.input-group-error2.input-group .form-floating ~ .weight-select .bootstrap-select > .btn{ border-color: var(--error); width: auto; min-width: auto; padding-left: 0;}
.input-group-error2 .invalid-feedback{ display: block;}
.invalid-feedback{ color: var(--error); line-height: 1.1;}
.invalid-feedback img{ width: 16px; min-width: 16px; align-self: flex-start;}

.input-group.flex-row-reverse.has-validation .form-floating > .form-control, .input-group.flex-row-reverse.has-validation .form-floating > .form-control-plaintext, .input-group.flex-row-reverse.has-validation .form-floating > .form-select{ border-right-color: var(--error) !important;}
.input-group.flex-row-reverse.has-validation .form-floating ~ .input-group-text{ border-color: var(--error);}

.form-floating > .bootstrap-select.form-select{ width: 100% !important; height: auto; min-height: auto; line-height: normal; padding: 0; font-size: unset; font-weight: 400; color: var(--txtPrimary); box-shadow: none; outline: none; border: none; border-radius: unset;}
.bootstrap-select > .btn{ height: 42px; min-height: 42px; line-height: normal; padding: 0 5px 0 12px; font-size: 14px; font-weight: 400; color: var(--txtPrimary); box-shadow: none; outline: none; border-color: var(--borderColor); border-radius: 8px; background-color: var(--white);}
.bootstrap-select > .btn .filter-option{ display: flex; flex-direction: column; justify-content: center;}
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active{ background: var(--white); color: var(--txtPrimary); box-shadow: none; outline: none; border-color: var(--borderColor);}
.bootstrap-select .dropdown-toggle:focus, .bootstrap-select > select.mobile-device:focus + .dropdown-toggle{ outline: none !important;}
.bootstrap-select > .dropdown-toggle::after { content: ""; border: none; width: 30px; height: 30px; background-image: url(../images/dropdown-arrow20x.svg); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%;}
.bootstrap-select > .dropdown-menu{ padding: 0; border-color: var(--borderColor); border-radius: 8px;}
.bs-actionsbox, .bs-donebutton, .bs-searchbox{ padding: 5px;}
.bs-searchbox .form-control{ height: 36px; min-height: 36px; line-height: normal; padding: 0 12px; font-size: 14px; font-weight: 400; color: var(--txtPrimary); box-shadow: none; outline: none; border-color: var(--borderColor); border-radius: 5px; background-color: var(--white);}
.bootstrap-select .dropdown-menu li a{ padding: 8px 12px; font-size: 14px; font-weight: 400; color: var(--txtPrimary);}
.bootstrap-select .dropdown-menu li a:hover, .bootstrap-select .dropdown-menu li a:focus{ background: var(--brandLighter); color: var(--brand);}
.bootstrap-select .dropdown-menu li a.active, .bootstrap-select .dropdown-menu li a.selected, .bootstrap-select .dropdown-menu li.active a, .bootstrap-select .dropdown-menu li.selected a{ background: var(--brand); color: var(--white);}
.uploaded_list_selects > .dropdown-toggle.bs-placeholder .filter-option-inner-inner::after {content: " *"; color: #f04438; font-weight: bold;}
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control{ border-right: none;}
.input-group .form-floating{ margin-bottom: 0;}
.input-group .form-floating ~ .weight-select .bootstrap-select > .btn{ min-width: 70px; width: 70px; height: 42px; min-height: 42px; line-height: normal; padding: 0 10px; font-size: 14px; font-weight: 400; color: var(--txtPrimary); box-shadow: none; outline: none; border:1px solid var(--borderColor); border-left: none; border-radius: 0 8px 8px 0; background-color: var(--white);}
.input-group .form-floating ~ .weight-select .bootstrap-select > .dropdown-toggle::after { margin-left: auto; width: 18px; min-width: 18px;}
.weight-select .bootstrap-select{ width: 100% !important;}

.alert-warning{ padding: 8px; border-radius: 8px; background: #F7900914; border-color: #F7900929; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--warningDark);}

.upload-container { width: 100%; height: 290px; display: flex; justify-content: center; align-items: center; border: 1px dashed var(--borderColor); background-color: var(--actionHover); border-radius: 8px; position: relative; cursor: pointer; text-align: center; min-height: 100%;}
.upload-container .upload-input {display: none;}
.upload-container .upload-label{ display: flex; flex-direction: column; justify-content: center; cursor: pointer; width: 100%; padding: 10px;}
.upload-container .upload-label .icon{ margin: 0 0 11px; display: flex; justify-content: center;}
.upload-container .upload-label strong{ margin: 0 0 11px; font-size: 14px; font-weight: 400; color: var(--txtSecondary); display: block;}
.upload-container .upload-label strong span{ color: var(--blue); font-size: 13px; font-weight: 700; text-decoration: underline;}
.upload-container .upload-label small{ margin: 0 0 4px; font-size: 12px; font-weight: 400; color: var(--txtGrey); display: block;}
.upload-container #fileName{ font-size: 12px; margin: 0; color: var(--brand);}
.upload-container:hover { background-color: var(--greyLightest);}
.upload-container:active { background-color: #ccc;}
.upload-container.dragover { background-color: #d8d8d8;}

.uploaded_list{ max-height: 110px; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; scrollbar-color: var(--borderColor) transparent; scrollbar-width: thin; min-height: 100%;}
.uploaded_list .docpdf_download{ border-radius: 6px; border: none; background: var(--actionHover); padding: 8px 11px; min-height: 58px;}
.uploaded_list .docpdf_download:not(:last-child){ margin-bottom: 12px;}
.uploaded_list .docpdf_download i{ width: 28px; min-width: 28px;}
.uploaded_list .docpdf_download .rdtl h6{ min-width: 210px;}
.uploaded_list .docpdf_download .rdtl h6 span{ font-size: 12px; font-weight: 500; color: var(--txtSecondary);}
.uploaded_list .docpdf_download .rdtl h6 span::before{ content: ""; width: 1px; height: 12px; background: var(--txtSecondary); margin: 0 8px;position: relative; top: 2px; display: inline-block;}
.uploaded_list .docpdf_download.error{ background: #F0443814;}
.uploaded_list .docpdf_download .error-msg{ font-size: 14px; font-weight: 400; flex: 1;}
.uploaded_list .docpdf_download .inn_rdtl .bootstrap-select{ max-width: inherit;}
.uploaded_list .docpdf_download .inn_rdtl{ flex: 1; max-width: 568px;}
.uploaded_list .docpdf_download .inn_rdtl .progress{ max-width: inherit; width: auto; flex: 1; background: var(--white);}
.uploaded_list .docpdf_download .dwnld-btn28x:not(:hover){ background: #E0E0E0;}
.uploaded_list .docpdf_download .inn_rdtl .form_block .form-control{ min-width: 192px;}

.AddCustomer{ display: flex; flex-direction: column; gap: 12px; padding-left: 16px; border-left: 1px dashed var(--borderColor); min-height: 100%;}
.AddCustomer .upload-container { height: 128px; min-height: 128px; flex: 1;}
.AddCustomer .alert-warning img{ width: 16px;}

.uploaded_list_selects.bootstrap-select .dropdown-menu li a:hover, .uploaded_list_selects.bootstrap-select .dropdown-menu li a:focus{ background: var(--actionHover); color: var(--txtPrimary);}
.uploaded_list_selects.bootstrap-select .dropdown-menu li a.active, .uploaded_list_selects.bootstrap-select .dropdown-menu li a.selected, .uploaded_list_selects.bootstrap-select .dropdown-menu li.active a, .uploaded_list_selects.bootstrap-select .dropdown-menu li.selected a{ background: #9E9E9E29; color: var(--txtPrimary);}
.docpdf_download .inn_rdtl .bootstrap-select.is-invalid > .btn{ border-color: var(--error);}

.radiocheck.form-check{ margin: 0; padding: 0; position: relative; display: flex; gap: 10px; min-height: 20px;}
.radiocheck.form-check .form-check-input{ width: 20px; min-width: 20px; height: 20px; border: 2px solid var(--greyDark); border-radius: 50%; margin: 0; box-shadow: none !important; position: unset;}
.radiocheck.form-check .form-check-label{ align-self: center; font-size: 14px; font-weight: 400; color: var(--txtPrimary);}
.radiocheck.form-check .form-check-input:checked{ border-color: var(--brand); background-color: var(--brand); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 19'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m6 10 3 3 7-7'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center center; background-size: 24px;}

.expanded-form{ display: none;}
.expanded-form:not(:first-child){ margin-top: 24px;}
.expanded-form .logicslab_row{ margin-bottom: 24px;}

.logicslab_row{ width: 100%; max-width: 1160px; display: flex; align-items: center; gap: 24px;}
.logicslab_row:not(:last-child){ margin-bottom: 24px;}
.logicslab_row > .row{ flex: 1 0 0;}
.filter-primary{ filter: brightness(0) saturate(100%) invert(12%) sepia(8%) saturate(886%) hue-rotate(185deg) brightness(96%) contrast(89%);}

.search-container{ width: 100%; margin:0 0 24px; position: relative;}
.search-container .search-input{ width: 100%; height: 40px; padding: 0 12px 0 40px; background: var(--white); box-shadow: none; border: 1px solid var(--borderColor); border-radius: 8px; font-size: 14px; font-weight: 400; color: var(--txtPrimary);}
.search-container .search_ic{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; width: 20px; margin: 0;}
.suggestion-box{ margin-top: 8px; position: absolute; top: 100%; left: 0; max-width: 1052px; width: 100%; background: var(--white); border-radius: 12px; display: none; max-height: 302px; overflow-y: auto; padding: 0; box-shadow: 0px 24px 48px -12px #0A0D122E; border: 1px solid #9E9E9E29; z-index: 10;}
.suggestion-box .suggestion-item { margin: 0; padding: 12px; transition: all .3s ease-in-out; display: flex; gap: 12px; align-items: flex-start;}
.suggestion-box .suggestion-item i{ width: 20px; min-width: 20px; display: flex; align-self: flex-start;}
.suggestion-box .suggestion-item i img{ width: 100%;}
.suggestion-box .suggestion-item p:first-child{ margin: 0 0 4px; font-size: 14px; line-height: 18px; color: var(--txtSecondary);}
.suggestion-box .suggestion-item p{ margin: 0; font-size: 14px; line-height: 18px; color: var(--txtSecondary);}
.suggestion-box .suggestion-item:hover{ background: rgba(158, 158, 158, 0.08);}

.courierb_item{ padding: 12px 40px 12px 12px; border-radius: 10px; background: var(--white); border: 1px solid var(--borderColor); position: relative; display: flex; gap: 16px; align-items: center;}
.courierb_item figure{ width: 44px; min-width: 44px; height: 44px; display: flex; margin: 0; padding: 0; border-radius: 6px; align-self: flex-start;}
.courierb_item figure img{ width: 100%; object-fit: contain; border-radius: 6px;}
.courierb_item h5{ margin: 0 0 8px; font-size: 16px; font-weight: 500; color: var(--txtPrimary);}
.courierb_item p{ margin: 0; padding: 0; font-size: 14px; color: var(--txtSecondary); line-height: 1.4em;}
.courierb_item:hover{ background: var(--lightF5);}
.courierb_item.selected{ background: var(--brandLightest); border-color: var(--brand); box-shadow: inset 0 0 0 0.5px var(--brand);}
.courierb_item_price.courierb_item{ padding-right: 12px;}
.courierb_item_price .rdtl{ display: flex; flex: 1 0 0; display: flex; gap: 10px;}
.courierb_item_price .rdtl .dtl{ flex: 1 0 0;}
.courierb_item_price .rdtl_inn{ display: flex; gap: 16px; align-items: center;}
.courierb_item_price .price{ color: var(--txtPrimary); font-size: 16px; font-weight: 600;}
.courierb_item_price .tooltip-custom{ position: relative; top: 0; right: 0; transform: unset;}
.courierb_item .tooltip-custom{ display: none;}
.courierb_item.selected .tooltip-custom{ display: inline-flex;}

.tooltip-custom { position: absolute; display: inline-flex; cursor: pointer; top: 50%; right: 12px; transform: translateY(-50%); z-index: 1024; opacity: 1;}
.tooltip-custom .tooltip-box { visibility: hidden; opacity: 0; width: 395px; background-color: var(--blueDarkest); color: #fff; text-align: left; border-radius: 8px; padding:0; position: absolute; z-index: 1; bottom: 100%; right: 0; transition: all 0.3s; box-shadow: 0px 4px 6px -2px #0A0D1208, 0px 12px 16px -4px #0A0D1214;}
.tooltip-custom:hover .tooltip-box { visibility: visible; opacity: 1;}
.tooltip-box ul { list-style: none; padding: 0; margin: 0;}
.tooltip-box ul li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; font-size: 14px; font-weight: 400; color: #FFFFFFCC;}
.tooltip-box ul li span:last-child{ font-weight: 500; color: var(--white);}


/*============ Order Modual Pages ============*/
.number-badge.badge{ padding: 4px 5px; font-size: 12px; font-weight: 700; border-radius: 4px; background: #9E9E9E3D; color: var(--txtSecondary); min-height: auto;}
.active .number-badge.badge{ background: var(--txtPrimary); color: var(--white);}
.vline-divider{ width: 1px; background: var(--borderColor); height: 36px; display: inline-block; align-self: center;}

#ModalExportRecords .modal-dialog{ max-width: 420px;}

table.dataTable.order_datatable > tbody > tr > td.customerid a{ text-decoration: none;}

/* Daterange Dropdown */
.daterange-dropdown{ margin: 0; gap: 8px; position: relative;}
.daterange-dropdown .dater-input{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.daterange-dropdown-style2{ background: var(--white); border-color: var(--borderColor);}


.daterangepicker{ margin: 15px 0 0 0; border-radius: 10px; box-shadow: -20px 20px 40px -4px #919EAB3D, 0px 0px 2px 0px #919EAB3D; font-family: var(--FontTheme); border: none;}
.daterangepicker::before,.daterangepicker::after{ display: none !important;}
.daterangepicker .ranges{ margin: 0 !important; padding: 10px 8px; width: 110px;}
.daterangepicker .ranges ul{ margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start;}
.daterangepicker .ranges li{ margin: 0 0 16px; padding: 6px 8px; font-size: 14px; font-weight: 600; color: var(--txtPrimary); border-radius: 6px;}
.daterangepicker .ranges li:hover{ background: transparent; color: var(--brandDark);}
.daterangepicker .ranges li.active{ background: var(--brandLighter); color: var(--brandDark);}
.daterangepicker .drp-calendar{ max-width: 320px; padding: 12px 18px !important; border: none !important; border-left: 1px solid var(--midGrey) !important;}
.daterangepicker .drp-calendar.left .calendar-table{ padding-right: 0;}
.daterangepicker .calendar-table th{ font-size: 12px; font-weight: 400; color: var(--txtSecondary); border: none; text-transform: uppercase; min-width: 32px; width: 32px; height: 32px;}
.daterangepicker .calendar-table td{ font-size: 14px; font-weight: 400; color: var(--txtPrimary); border: none; min-width: 32px; width: 32px; height: 32px;}
.daterangepicker .calendar-table .prev, .daterangepicker .calendar-table .next{ min-width: 32px; width: 32px; max-width: 32px; height: 32px; line-height: 0; border: none !important; border-radius: 50%; font-size: unset; padding-left: 4px;}
.daterangepicker .calendar-table .next{ padding-left: 0; padding-right: 4px;}
.daterangepicker .calendar-table .prev:hover, .daterangepicker .calendar-table .next:hover{ background: #E0E0E0 !important;}
.daterangepicker th.month{ width: 100%; font-size: 16px; font-weight: 600; color: var(--txtPrimary);}
.daterangepicker td.off{ color: transparent; background: transparent;}
.daterangepicker td.in-range{ background: var(--brandLighter); color: var(--brand);}
.daterangepicker td.start-date{ border-radius: 6px 0 0 6px;}
.daterangepicker td.end-date{ border-radius: 0 6px 6px 0;}
.daterangepicker td.today{ background: var(--white); box-shadow: 0px 0.89px 1.78px 0px #0A0D120D; color: var(--brand); border-radius: 0;}
.daterangepicker td.active, .daterangepicker td.active:hover{ background: var(--brand); color: var(--white);}
.daterangepicker td.available:hover, .daterangepicker th.available:hover{ background: var(--brand) !important; color: var(--white);}
.daterangepicker .drp-calendar .calendar-table tbody tr:last-child{ display: none;}
.daterangepicker .drp-buttons{ border-color: var(--midGrey) !important;}

.daterangepicker td.available:hover, .daterangepicker th.available:hover{ background: var(--greyLightest);}

.drp-buttons .btn{ margin: 0; padding: 4px 8px; font-size: 12px; border-radius: 8px; border: 1px solid transparent; font-weight: 500; transition:all .3s ease-in-out; background: var(--white); color: var(--txtPrimary);}
.drp-buttons .btn:not(:disabled):hover{ background: #E0E0E0; color: var(--txtPrimary);}
.drp-buttons .btn.btn-primary{ box-shadow: 0px 2px 6px 2px #00000026, 0px 1px 2px 0px #0000004D; background: var(--txtPrimary); border-color: var(--txtPrimary); color: var(--white);}
.drp-buttons .btn.btn-primary:not(:disabled):hover{ background: var(--greyDark); border-color: var(--greyDark); color: var(--white);}

/* Theme Dropdown */
.dropdown-theme .dropdown-menu{ margin: 5px 0 0 !important; padding: 0; border-radius: 12px; background: var(--white); box-shadow: 0px 0px 1px rgba(145, 158, 171, 0.24), -20px 20px 40px -4px rgba(145, 158, 171, 0.24); inset: inherit !important; top: 100% !important; left: 0 !important; right: auto !important; transform: inherit !important; border: none; min-width: 120px; overflow: hidden;}
.dropdown-theme .dropdown-toggle::after{ width: 20px; height: 20px; border: none; background: url(../images/dropdown-arrow20x.svg) no-repeat center center; margin: 0 0 0 auto; background-size: 25px;}
.dropdown-theme .dropdown-menu li{ margin: 0; padding: 0;}
.dropdown-theme .dropdown-menu li a{ display: flex; padding: 11px 12px; gap: 12px; color: var(--txtPrimary); transition: all .2s ease-in-out;}
.dropdown-theme .dropdown-menu li a i{ min-width: 20px; width: 20px; display: flex;}
.dropdown-theme .dropdown-menu li a i img{ width: 18px; filter: brightness(0) saturate(100%) invert(12%) sepia(8%) saturate(886%) hue-rotate(185deg) brightness(96%) contrast(89%); transition: all .2s ease-in-out;}
.dropdown-theme .dropdown-menu li a:hover{ color: var(--txtPrimary); background: rgba(158, 158, 158, 0.08) !important;}
.dropdown-theme .dropdown-menu li a:active{ background: transparent;}
.dropdown-theme .dropdown-menu li a:hover i img{ filter: none;}

.filterview_dropdown .dropdown-menu{ width: 100%;}
.filterview_dropdown .dropdown-menu li a{ font-size: 14px;}

.orders_grid{ margin-bottom: 28px; gap: 20px; display: flex;}
.orders_info{ display: flex; gap: 12px; flex: 1; padding-right: 7px; height: auto;}
.orders_info i{ align-self: flex-start; width: 36px; min-width: 36px; height: 36px; margin:4px 0 0; border-radius: 6px; display: flex; align-items: center; justify-content: center;}
.orders_info i img{ width: 24px; height: 24px; object-fit: contain; object-position: center center;}
.orders_info h5{ margin: 1px 0 0; font-size: 18px; font-weight: 700; color: var(--txtPrimary);}
.orders_info span{ display: inline-block; line-height: 1;}

.theme-datatable .dataTable tbody td span[data-bs-toggle="tooltip"]{ display: inline-flex; margin-left: 7px;}
.tooltip > .tooltip-inner { font-size: 12px !important; padding: 3px 6px 5px 6px; line-height: 1; border-radius: 6px; background-color: var(--txtPrimary);}
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before{ border-bottom-color: var(--txtPrimary);}
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before{ border-top-color: var(--txtPrimary);}
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before{ border-left-color: var(--txtPrimary);}
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before{ border-right-color: var(--txtPrimary);}

/* Order Table Saperate CSS */
table.dataTable.order_datatable > thead > tr > th:not(:first-child, :last-child){ min-width: 100px;}
table.dataTable.order_datatable > thead > tr > th:last-child{ pointer-events: none;}
table.dataTable.order_datatable > thead > tr > th:first-child .dt-column-order, table.dataTable.order_datatable > thead > tr > th:last-child .dt-column-order{ display: none;}
table.dataTable > tbody > tr > td > .elipsmoreops-drop{ display: flex;}
table.dataTable > tbody > tr > td:last-child > .elipsmoreops-drop{ display: inline-flex;}

.pd-address{ margin: 0; min-width: 200px; overflow: hidden; width:100%; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
small.time{ font-size: 12px; font-weight: 500; color: var(--txtSecondary); display: block;}

table.dataTable input.dt-select-checkbox{ border:1px solid var(--txtGrey) !important; width: 17px; height: 17px; border-radius: 5px; margin: 0; line-height: unset; font-size: unset; display: block;}
table.dataTable input.dt-select-checkbox:checked{ border-color: var(--brandDark) !important; background-color: var(--brandDark); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 19'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m6 10 3 3 7-7'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center center; background-size: 20px;}
table.dataTable input.dt-select-checkbox:checked::after{ display: none !important;}

.bulk-action-bar{ position: absolute; top: -48px; left: 0; background: var(--txtPrimary); padding: 0; border-radius: 8px; border: 1px solid var(--midGrey); box-shadow: 12px 12px 32px -10px #0A0D1299, -12px -10px 32px -12px #00000066; display: flex; z-index: 15; overflow: hidden; flex-wrap: wrap;}
.bulk-action-bar span{ padding:10px 12px; color: var(--blueLight400); font-weight: 700;}
.bulk-action-bar a{ margin: 0; padding: 5px 12px; color: var(--greyLightest); display: flex; gap: 8px; align-items: center; border-left: 1px solid var(--midGrey); min-height: 41px;}
.bulk-action-bar a img{ filter: brightness(0) invert(1); opacity: 0.85; width: 16px; height: 16px;}
.bulk-action-bar a:hover{ background: var(--greyDark); color: var(--greyLightest);}


.theme-datatable table.dataTable > thead > tr > th .priority-select{ margin-top: 9px;}
.theme-datatable table.dataTable > thead > tr > th .priority-selectpckr{ width: 100% !important;}
.theme-datatable table.dataTable > thead > tr > th .priority-selectpckr > .btn{ background: url(../images/dropdown-arrow-grey8x.svg) no-repeat center right !important; border-radius: 0; border: none; border-bottom: 1px solid var(--borderColor) !important; width: 100%; font-size: 12px; font-weight: 500; color: var(--txtGrey);}
.theme-datatable table.dataTable > thead > tr > th .priority-selectpckr > .btn .badge{ padding: 0; background: none !important; background: none; font-size: 12px; font-weight: 500; color: var(--txtGrey); border-radius: 0; margin: 0; border-radius: 0; min-height: auto;}
.theme-datatable table.dataTable > thead > tr > th .priority-selectpckr > .btn .badge img{ display: none;}


/* Priority Select Dropdown BS Select */
.priority-select .bootstrap-select{ width: auto !important;}
.priority-select .bootstrap-select > .btn{ height: auto; min-height: auto; padding: 0; border: none; width: auto;}
.priority-select .bootstrap-select > .dropdown-toggle::after{ display: none;}
.priority-select .bootstrap-select .dropdown-menu li a:hover, .priority-select .bootstrap-select .dropdown-menu li a:focus{ background: unset; color: unset;}
.priority-select .bootstrap-select .dropdown-menu li a.active, .priority-select .bootstrap-select .dropdown-menu li a.selected, .priority-select .bootstrap-select .dropdown-menu li.active a, .priority-select .bootstrap-select .dropdown-menu li.selected a{ background: unset; color: unset;}
.priority-select .bootstrap-select > .dropdown-menu{ width: auto; min-width: 124px; border: none !important; box-shadow: -20px 20px 40px -4px #919EAB3D, 0px 0px 2px 0px #919EAB3D;}

/* Priority Select Dropdown BS Select - Append body CSS */
.priority-selectpckr.bootstrap-select .dropdown-menu li a:hover, .priority-selectpckr.bootstrap-select .dropdown-menu li a:focus{ background: unset; color: unset;}
.priority-selectpckr.bootstrap-select .dropdown-menu li a.active, .priority-selectpckr.bootstrap-select .dropdown-menu li a.selected, .priority-selectpckr.bootstrap-select .dropdown-menu li.active a, .priority-selectpckr.bootstrap-select .dropdown-menu li.selected a{ background: unset; color: unset;}
.priority-selectpckr.bootstrap-select > .dropdown-menu{ width: auto; min-width: 124px; border: none !important; box-shadow: -20px 20px 40px -4px #919EAB3D, 0px 0px 2px 0px #919EAB3D;}

.prod_info{ display: flex; gap:7px 12px; align-items: center; line-height: 1.1;}
.prod_info .prod_img{ width: 32px; height: 32px; min-width: 32px; border-radius: 6px; display: flex;}
.prod_info .prod_img img{ width: 100%; object-fit: cover; border-radius: 6px;}
.prod_info span{ display: block; margin-bottom: 6px;}
.prod_info a{ font-size: 12px; font-weight: 500; color: var(--brand);}

.order-returned-table .pd-address{ min-width: 220px;}

/* Create Order */
.co-wrapper .content-body{ position: relative;}
.co-wrapper .acaddcustomer_main{ padding-right: 504px;}
.orderinfo_aside{ width: 480px; background: var(--white); box-shadow: 0px 0 6px -2px #0A0D1208, 0px 0 16px -4px #0A0D1214; border-radius: 0 8px 8px 0; position: absolute; top: 0; right: 0; height: 100%;}
.orderinfo_aside .mCSB_inside > .mCSB_container { margin-right: 0px;}
.orderinfo_aside .aside_body{ padding: 24px 16px;}
.orderinfo_aside .upload-container{ height: 136px; margin-bottom: 16px;}
.orderinfo_aside .docpdf_download .rdtl { display: grid; grid-template-columns: 0.5fr 1fr;}
.orderinfo_aside .docpdf_download .inn_rdtl{ justify-content: flex-end;}
.orderinfo_aside .docpdf_download .inn_rdtl .progress { max-width: 100%; min-width: max-content; min-width: auto;}
.orderinfo_aside .docpdf_download .inn_rdtl .bootstrap-select { max-width: 100%; min-width: max-content;}
.orderinfo_aside .tooltip-custom .tooltip-box{ right: -15px;}
.orderinfo_aside .docpdf_download .error-msg{ white-space: nowrap;}

/* Alert */
.alert-sticky{ padding:8px 10px; position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 1030;}
.alert .alert_body{ display: flex; gap: 12px; align-items: flex-start;}
.alert .alert_body i{ width: 24px; min-width: 24px; height: 28px; display: flex; align-items: center;}
.alert .alert_body i img{ width: 100%;}
.alert .alert_body p{ align-self: center; margin: 0; font-weight: 700; flex: 1 0 0;}
.alert .btn-close{ width: 28px; min-width: 28px; height: 28px; background: url(../images/close-circle-ic28x.svg) no-repeat center center; background-size: 100% 100%; padding: 0; opacity: 1; box-shadow: none !important;}
.alert .btn-close:hover{ opacity: 0.6;}

.alert-success{ background-color: var(--successLighter); border-color: transparent; color: var(--successDark);}
.alert-error{ background-color: var(--errorlighter); border-color: transparent; color: var(--errorDark);}


/*============ Carriers Modual Pages ============*/
.carier_items{ display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 40px;}
.carier_item{ margin: 0; padding: 8px; border-radius: 16px; background: var(--white); box-shadow: 0px 12px 24px -4px #919EAB1F, 0px 0px 2px 0px #919EAB33;}
.carier_item .carier_img{ border-radius: 12px; position: relative; overflow: hidden; display: flex;}
.carier_item figure{ margin: 0; padding: 0; border-radius: 12px; position: relative; width: 100%; display: flex;}
.carier_item figure img{ border-radius: 12px; width: 100%; object-fit: cover; object-position: center center;}
.carier_item .caption{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all .3s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background: #1E1E1E33;}
.carier_item .badge{ position: absolute; right: 13px; top: 8px; transition: all .3s;}
.carier_item .detail{ padding: 16px 4px 8px 4px;}
.carier_item h5{ margin: 0; padding: 0; font-size: 16px; font-weight: 500; color: var(--txtPrimary); overflow: hidden; width:100%; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.carier_item:not(.connected) .badge{ display: none;}
.carier_item:hover .caption{ opacity: 1;}
.carier_item:hover .badge{ opacity: 0;}

.connect_modal .btn-close{ width: 24px; height: 24px; padding: 0; background-size: 10px; opacity: 1; box-shadow: none !important;}
.connect_modal .alert-error{ margin:28px 0 20px; border-radius: 6px; border: none; padding: 7px 8px; background: var(--errorlighter); font-size: 14px; font-weight: 600; color: var(--errorDark); text-align: left; line-height: 18px;}
.connect_modal .alert-error img{ width: 20px;}

/*============ BulkUpload Modual Pages ============*/
table.dataTable.bulkuploadorder_datatable > tbody > tr > td:not(.customerid){ font-weight: 700;}
table.dataTable.bulkuploadorder_datatable > tbody > tr > td .pd-address{ color: var(--txtPrimary);}
table.dataTable.bulkuploadorder_datatable > tbody > tr > td:not(.customerid) b{ font-weight: 700;}
table.dataTable.bulkuploadorder_datatable > tbody > tr > td.customeradd small{ font-weight: 700;}

.bulkupload_sec{ margin: 28px 0; display: flex; flex-direction: column; gap: 20px;}
.bulkupload_block{ display: flex; align-items: flex-start; gap: 4px;}
.bulkupload_block .upload-container{ height: 80px; border-radius: 12px;}
.bulkupload_block .upload-container .upload-label{ flex-direction: row; align-items: center; gap: 4px; flex-wrap: wrap;}
.bulkupload_block .upload-container .upload-label .icon{ margin-bottom: 0;}
.bulkupload_block .upload-container .upload-label strong{ margin: 0; font-weight: 700;}
.bulkupload_block .upload-container .upload-label small{ margin: 0 0 0 4px; display: inline-block; font-weight: 700;}
.bulkupload_block .upload-container #fileName{ width: 100%;}
.bulkupload_block .btn_close{ margin: 0; padding: 0; background: none; border: none; width: 28px; height: 28px; min-width: 28px; display: flex;}
.bulkupload_block .btn_close:hover{ opacity: 0.6;}

.bulkuploading_file{ margin: 0; background: #9E9E9E1F; border-radius: 6px; padding: 12px 8px; display: flex; justify-content: space-between; gap:16px 24px; align-items: center;}
.bulkuploading_file .left_part{ display: flex; gap: 12px; align-items: center; min-width: 40%; flex: 1;}
.bulkuploading_file .left_part figure{ width: 56px; min-width: 56px; display: flex; margin: 0;}
.bulkuploading_file .left_part figure img{ width: 100%;}
.bulkuploading_file .left_part .rdtl{ flex: 1;}
.bulkuploading_file .left_part .file_name{ margin: 0; font-size: 18px; font-weight: 700; color: var(--txtPrimary); overflow: hidden; width:100%; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; word-break: break-all;}
.bulkuploading_file .left_part .file_size{ margin: 0; font-size: 16px; font-weight: 700; color: var(--txtSecondary); display: block;}
.bulkuploading_file .right_part{ width: 100%; max-width: 900px; min-width: max-content; display: flex; gap:16px 40px; justify-content: flex-end; align-items: center;}
.progress_info{ display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end;}
.progress_info .progress-status{ margin: 0; font-size: 14px; font-weight: 700; color: var(--infoDarker); min-width: 39px;}
.progress_info .progress{ width: 100%; background: var(--white); border-radius: 50px; height: 12px;}
.progress .progress-bar{ background: var(--blue);}
.progress .progress-success{ background: var(--successDark);}
.progress_info .btn_close{ margin: 0; padding: 0; background: none; border: none; width: 28px; height: 28px; min-width: 28px; display: flex;}
.progress_info .btn_close:hover{ opacity: 0.6;}

.upload_success.bulkuploading_file .right_part{ width: 100%;}
.upload_success .progress_info .progress-status{ color: var(--successDark);}

.bulkuploading_file.error{ background: var(--errorlighter);}
.bulkuploading_file.error .right_part{ gap: 16px; min-width: auto;}
.bulkuploading_file .error-msg{ font-size: 14px; font-weight: 600; line-height: 18px; color: var(--errorDark);}
.bulkuploading_file .simple_link{ display: inline-block; margin: 0; font-size: 14px; font-weight: 700; color: var(--blue); text-decoration: underline; white-space: nowrap;}
.bulkuploading_file .simple_link:hover{ color: var(--blueDarkest);}
.bulkuploading_file.error .btn_close{ margin: 0; padding: 0; background: none; border: none; width: 28px; height: 28px; min-width: 28px; display: flex;}
.bulkuploading_file.error .btn_close:hover{ opacity: 0.6;}

/* Modal Bulk Upload Table */
.bulkuploadtable_modal .modal-dialog{ width: 98%; max-width: 1756px;}
.bulkuploadtable_modal .modal-header{ margin: 0; padding: 16px 40px 16px 20px;}
.bulkuploadtable_modal .modal-title{ gap: 12px; font-size: 16px; font-weight: 700; color: var(--txtPrimary); display: flex; align-items: center; margin: 0; padding: 0;}
.bulkuploadtable_modal .btn-close{ margin: 0; position: absolute; top: 1.2em; right: 1em; width: 24px; height: 24px; padding: 0; background-size: 10px; opacity: 1; box-shadow: none !important;}
.bulkuploadtable_modal .modal-body{ padding: 0 20px;}
.bulkuploadtable_modal table.dataTable > tbody > tr > td .pd-address{ min-width: auto;}

.simple_delete_link{ margin: 0; padding: 0; display: inline-flex; width: 20px; min-width: 20px;}
.simple_delete_link:hover{ opacity: 0.6;}

.filedownload_info{ padding: 4px 6px; background: var(--greyLightest); border-radius: 6px; display: flex; gap: 4px; align-items: center; min-width: 236px;}
.filedownload_info > i{ width: 32px; min-width: 32px; height: 32px; display: flex; margin: 0;}
.filedownload_info > i img{ width: 100%;}
.filedownload_info .dtl{ flex: 1; display: flex; align-items: center; gap: 20px;}
.filedownload_info .left_dtl{ flex: 1;}
.filedownload_info .right_dtl{ min-width: 16px; width: 16px; min-height: 16px; position: relative;}
.filedownload_info h6{ margin: 0; font-size: 14px; font-weight: 700; color: var(--txtPrimary);}
.filedownload_info p{ margin: 0 !important; font-size: 12px !important; font-weight: 700; color: var(--txtSecondary);}
.filedownload_info .dwnld_btn{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex;}
.filedownload_info .file_loading_ic{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: none;}
.filedownload_info .remove_btn{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: none;}
.filedownload_info .dwnld_btn:hover, .filedownload_info .remove_btn:hover{ opacity: 0.6;}
.filedownload_info .progress_info{ gap: 4px; display: none;}
.filedownload_info .progress_info .progress-status{ font-size: 12px; font-weight: 700; min-width: auto;}
.filedownload_info .progress_info .progress{ height: 8px;}
.filedownload_info .error-msg{ font-size: 12px; display: none; color: var(--error); font-weight: 700;}
.filedownload_info.fileuploading p, .filedownload_info.fileuploading .dwnld_btn, .filedownload_info.fileuploading .remove_btn{ display: none;}
.filedownload_info.fileuploading .file_loading_ic, .filedownload_info.fileuploading .progress_info{ display: flex;}
.filedownload_info.fileupload_error{ background: var(--errorlighter);}
.filedownload_info.fileupload_error p, .filedownload_info.fileupload_error .dwnld_btn{ display: none;}
.filedownload_info.fileupload_error .remove_btn, .filedownload_info.fileupload_error .error-msg{ display: flex;}

.nofilefound_info{ display: flex; padding: 8px 12px; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--infoDark);}
.nofilefound_info i{ width: 20px; min-width: 20px; height: 20px; display: flex;}
.nofilefound_info a{ color: var(--infoDark); text-decoration: underline;}
.nofilefound_info a:hover{ color: var(--infoDarker);}

.cariers-select{ min-width: 268px;}
.cariers-select .bootstrap-select{ width: 100% !important;}
.cariers-select .bootstrap-select > .btn { height: 50px; min-height: 50px; padding: 5px 5px 5px 12px;}
.cariers-select .bootstrap-select .dropdown-toggle .filter-option,
.cariers-select .bootstrap-select .dropdown-toggle .filter-option-inner-inner{ overflow: visible;}
.cariers-select .carier-block{ display: flex; gap: 12px; align-items: center;}
.cariers-select .carier-block .tooltip-custom{ z-index: 0;}
.cariers-select .carier-block .img{ width: 32px; min-width: 32px; height: 32px; border-radius: 7px; display: flex;}
.cariers-select .carier-block .img img{ width: 100%; border-radius: 7px; object-fit: cover;}
.cariers-select .carier-block .price{ font-size: 14px; font-weight: 700; color: var(--txtPrimary); position: relative; padding-right: 30px; line-height: 1; margin:1px 0 4px;}
.cariers-select .carier-block .name{ font-size: 12px; font-weight: 700; color: var(--txtSecondary); line-height: 1;}
.cariers-select .carier-block.noselect{ align-items: center;}
.cariers-select .carier-block.noselect .img{ display: none;}
.cariers-select .carier-block.noselect .name{ font-size: 14px;}
.cariers-select .bootstrap-select > .dropdown-menu{ max-height: 242px !important; min-height: 242px !important;}
.cariers-select .bootstrap-select .dropdown-menu li a{ display: flex;}
.cariers-select .bootstrap-select .dropdown-menu li a .carier-block.noselect .img{ display: block;}
.cariers-select .bootstrap-select .dropdown-menu li a .carier-block .price{ display: none;}
.cariers-select .bootstrap-select .dropdown-menu li a .carier-block .name{ font-size: 16px; font-weight: 600; color: var(--txtPrimary);}
.cariers-select .bootstrap-select .dropdown-menu li a:hover, .cariers-select .bootstrap-select .dropdown-menu li a:focus, .cariers-select .bootstrap-select .dropdown-menu li a.active, .cariers-select .bootstrap-select .dropdown-menu li a.selected, .cariers-select .bootstrap-select .dropdown-menu li.active a, .cariers-select .bootstrap-select .dropdown-menu li.selected a{ background: var(--actionHover);}


/*============ Rate Calculator Modual Pages ============*/
.rc-wrapper .orderinfo_aside{ background-image: url(../images/rate-calc-aside-bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; border-left: 1px solid var(--actionHover);}
.rc-wrapper .orderinfo_aside .aside_body{ padding: 24px;}
.rc-wrapper .apexcharts-legend .apexcharts-legend-series{ margin: 20px 0 0 0 !important; width: 100%;}
.rc-wrapper .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text{ padding-left: 20px !important;}
.rc-wrapper .logicslab_row{ max-width: 578px;}


/*============ Finances Modual Pages ============*/
#financesTable_wrapper table.dataTable > tbody > tr:not(.empty_row) > td{ padding-top: 13px; padding-bottom: 13px;}
#financesTable_wrapper table.dataTable.order_datatable > thead > tr > th:last-child { pointer-events: auto; padding-right: 30px;}
#financesTable_wrapper table.dataTable.order_datatable > thead > tr > th:last-child .dt-column-order { display: inline-flex;}
.datetime_column small{ display: block; font-size: 12px; font-weight: 400; color: var(--txtSecondary);}

.recharge_modal .modal-dialog{ max-width: 620px;}
.recharge_modal .modal-body{ padding: 12px 20px;}
.recharge_modal .modal-body p{ margin-bottom: 20px;}
.recharge_modal .btn-group{ margin-bottom: 20px;}
.recharge_modal .alert-error{ padding:6px 8px; line-height: 18px; font-weight: 600;}
.recharge_modal .alert-error img{ width: 16px;}

/* Radio Button */
.radio-btn{ margin: 0; padding: 0; position: relative;}
.radio-btn > input{ margin: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; cursor: pointer;}
.radio-btn label{ margin: 0; padding: 6px 16px; font-size: 12px; font-weight: 500; color: var(--brand); background: var(--brandLightest); border: 1px solid var(--brandLighter); border-radius: 8px; display: inline-block;}
.radio-btn > input:checked ~ label{ background: var(--brand); color: var(--white); border-color: var(--brand);}

/* Payment Method */
.payment_methods{ display: flex; flex-direction: column; gap: 24px;}
.payment_item{ margin: 0; padding: 0;}
.payment_item .form-check{ padding: 0;}
.payment_item .form-check .form-check-input[type="radio"]{ top: 32px; left: 13px; box-shadow: 0 0 0 1px var(--greyDark) !important;}
.payment_item .form-check .form-check-input[type="radio"]:checked{ box-shadow: 0 0 0 1px var(--brand) !important; top: 15px;}
.payment_item .form-check .form-check-input[type="radio"]:checked ~ .form-check-label{ padding-top: 11px; box-shadow: none; border-color: var(--brand); background: var(--brandLightest);}
.payment_item .form-check-label{ padding: 15px 12px 15px 44px; border: 1px solid var(--borderColor); border-radius: 8px; box-shadow: 0px 1px 3px 0px #0A0D121A; width: 100%; cursor: auto;}
.payment_item .form-check-title{ margin: 0; font-size: 16px; font-weight: 500; color: var(--txtPrimary);}
.payment_item .form-check-title small{ display: block; font-size: 12px; font-weight: 400; color: var(--txtSecondary); margin-top: 6px;}
.payment_item .or{ margin: 0; display: block; text-align: center; text-transform: uppercase; color: var(--txtGrey);}
.payment_item .form_block .form-control::placeholder{ color: var(--txtGrey);}
.payment_item .extend_detail{ padding: 0 72px 0 0; display: none;}
.payment_item .form-check-input[type="radio"]:checked ~ .form-check-label .form-check-title small{ display: none;}
.payment_item .form-check-input[type="radio"]:checked ~ .form-check-label .extend_detail{ display: block;}


/* Datepicker */
.datepicker.datepicker-dropdown.dropdown-menu{ padding: 15px; background: var(--white); min-width: 14rem; color:var(--txtPrimary); box-shadow: -20px 20px 40px -4px #919EAB3D, 0px 0px 2px 0px #919EAB3D; border-radius: 10px; margin-top: 5px; border: none;}
.datepicker.datepicker-dropdown.dropdown-menu::before, .datepicker.datepicker-dropdown.dropdown-menu::after{ display: none;}
.datepicker.datepicker-dropdown.dropdown-menu > div{ width:100%;}
.datepicker.datepicker-dropdown.dropdown-menu > div table{ width:100%;}
.datepicker-dropdown::before{ border-top-color: var(--borderColor) !important;}
.datepicker-dropdown::after{ border-bottom-color: var(--white) !important;}
.datepicker-dropdown.datepicker-orient-top::after{ border-top-color: var(--white) !important;}
.datepicker-dropdown.datepicker thead tr th{ padding: 10px 0 10px; font-size: 10px; font-weight: 400; color: var(--txtSecondary); border-radius: 0; text-transform: uppercase;}
.datepicker-dropdown.datepicker .datepicker-switch{ font-size: 14px; padding:0 0 10px; color: var(--txtPrimary); font-weight: 700; height: auto; background-color: transparent !important; border-radius: 0; text-transform: none;}
.datepicker-dropdown.datepicker .prev, .datepicker-dropdown.datepicker .next { background-color: transparent !important; background-repeat: no-repeat; background-position: center center; background-size: 9px auto; cursor: pointer; text-indent: -9999px; position: relative; padding:0 0 15px; height: auto; border-radius: 0;}
.datepicker-dropdown.datepicker .prev { background-image: url('../images/chevron-left20x.svg'); background-position: top left; background-size: 18px;}
.datepicker-dropdown.datepicker .next { background-image: url('../images/chevron-right16x.svg'); background-position: top right; background-size: 20px;}
.datepicker-dropdown.datepicker td{ width: 32px; height: 32px; border-radius: 0; font-size: 12px; font-weight: 500; color: var(--txtPrimary);}
.datepicker-dropdown.datepicker table tr td{ border-radius: 4px;}
.datepicker-dropdown.datepicker table tr td span{ height: 45px; line-height: 45px;}
.datepicker-dropdown.datepicker table tr td.day.focused, .datepicker-dropdown.datepicker table tr td.day:hover{ background: var(--brandLighter); color: var(--brand);}
.datepicker-dropdown.datepicker table tr td.active, .datepicker-dropdown.datepicker table tr td.active.disabled, .datepicker-dropdown.datepicker table tr td.active.disabled:hover, .datepicker-dropdown.datepicker table tr td.active:hover{ background: var(--brand); color: var(--white);}
.datepicker-dropdown.datepicker table tr td span.active, .datepicker-dropdown.datepicker table tr td span.active.disabled, .datepicker-dropdown.datepicker table tr td span.active.disabled:hover, .datepicker-dropdown.datepicker table tr td span.active:hover{ background: var(--brand); color: var(--white);}


/* Body not scroll only middle card scroll CSS */
.content-wrapper{ min-height: auto; height: calc(100vh - 64px);}
.dashboard_main, .content-body{ overflow: auto;}

/* Content Sidebar */
.co-wrapper .content-body{ display: flex; gap: 0; padding: 0; overflow: hidden;}
.co-wrapper .acaddcustomer_main{ flex: 1; padding: 16px 20px 16px 16px; overflow: auto; scroll-behavior: smooth; scrollbar-color: var(--borderColor) transparent; scrollbar-width: thin;}
.co-wrapper .orderinfo_aside{ min-width: 480px; position: unset;}
.co-wrapper .orderinfo_aside .mCSB_scrollTools{ width: 12px;}


/* New CSS For Changes */
#chart2 .apexcharts-legend-text{ display: flex; justify-content: space-between; width: 100%;}
#chart2 .labl_value{ font-weight: 600; color: var(--txtPrimary);}
#chart5 .apexcharts-legend-text{ display: flex; justify-content: space-between; width: 100%;}
#chart5 .labl_value{ font-weight: 700; color: var(--txtPrimary);}

.courierb_item_price.courierb_item{ height: 100%;}
.courierb_item_price.courierb_item figure{ align-self: center;}

@media (min-width: 1400px) and (max-width: 1800px) {
    .courierb_items .col-xxl-4 { flex: 0 0 auto; width: 50%;}
}



.actinact_dropdown button{ width: 100%; border: none; border-bottom: 1px solid var(--borderColor); background: url(../images/dropdown-arrow-grey8x.svg) no-repeat center right; background-color: none; font-size: 12px; font-weight: 500; color: var(--txtGrey); border-radius: 0; margin-top:9px; display: block; text-align: left;}
.actinact_dropdown .dropdown-menu{ margin: 0 !important; padding: 0; border-radius: 12px; border: none; background: var(--white); box-shadow: 0px 0px 1px rgba(145, 158, 171, 0.24), -20px 20px 40px -4px rgba(145, 158, 171, 0.24); min-width: 128px;}
.actinact_dropdown .dropdown-menu li{ margin: 0; padding: 0; font-size: 14px;}
.actinact_dropdown .dropdown-menu li a{ display: flex; padding: 11px 12px; font-size: 14px; font-weight: 400; gap: 12px; color: var(--txtPrimary); transition: all .2s ease-in-out;}
.actinact_dropdown .dropdown-menu li a:active{ background: transparent;}
.actinact_dropdown .dropdown-menu li a:hover{ background: rgba(158, 158, 158, 0.08) !important;}

/* 14-11-2025 */
.error_fire .inn_rdtl {align-items: start;}