:root{
	--txtPrimary:#26282D;
	--txtSecondary:#5F6165;
	--txtGrey:#9E9E9E;
	--greyDark:#3F4144;
	--grey50:#FAFAFA;
	--greyLight:#dadada;
	--greyLightest:#EEEEEE;
	--greyLighter:#E0E0E0;
	--midGrey: #9E9E9E33;
	--brand:#007F5F;
	--brandLight:#59AC97;
	--brandLightest:#EDF5F3;
	--brandLighter:#CCE5DF;
	--brandDark:#005942;
	--brandDarker:#005942;
	--orange:#FB6514;
	--orangeLighter:#FFEAD5;
	--warning:#F79009;
	--warning12:#F790091F;
	--warningLight:#FEC84B;
	--warningLighter:#FEF0C7;
	--warningDark:#B54708;
	--warningDarker:#93370D;
	--indigo:#6172F3;
	--indigoLighter:#E0EAFF;
	--indigoDark:#3538CD;
	--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;
	--info16:#265BBE29;
	--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; }

.mb12{ margin-bottom:12px !important;}
.mb-30{ margin-bottom:30px !important;}
.mb-40{ margin-bottom:40px !important;}
@media (min-width: 992px) {
.mb-lg-40{ margin-bottom:40px !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-bg{ background: var(--error);}
.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);*/}
}

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

/* Main Header */
.main-header { width: 100%; max-height: 64px; z-index: 1030; padding: 0 12px 0 0; background: var(--white); position: relative;}
.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-radius: 4px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent;}
.main-header .sidebar-toggle img:last-child{ display: none;}
.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);}
}

.navbar-static-top{ gap: 0 16px;}

.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(--errorDark); 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: var(--actionHover); 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 */
/* height rather than min-height: the aside is fixed, so anything past the viewport is
   unreachable -- page scrolling cannot move it. The column layout lets .sidebar take the
   leftover space and scroll on its own. */
.main-sidebar{ position: fixed; top: 0; left: 0; padding: 80px 16px 0; height: 100vh; width: 240px; z-index: 810; display: flex; flex-direction: column; transition: transform 0.3s ease-in-out, width 0.3s ease-in-out; }
.sidebar-overlay { position: fixed; inset: 0; z-index: 809;}

@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);}
}

/* min-height: 0 is what makes the scrollbar appear at all -- without it a flex child
   refuses to shrink below its content height, and the menu overflows as before.
   overscroll-behavior keeps a scroll that reaches the end of the menu from carrying on
   into the page behind it. */
.sidebar{ padding-bottom: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent; }
.sidebar::-webkit-scrollbar{ width: 6px; }
.sidebar::-webkit-scrollbar-track{ background: transparent; }
.sidebar::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.2); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,0.35); }
.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; }

/* Component: Sidebar Mini */
@media (min-width: 1280px) {
.sidebar-collapse .main-header .brand_part{ width: 100px;}
.sidebar-collapse .main-header > .navbar{ margin-left: 100px;}
.sidebar-collapse	.main-header .logo > .logo-txt{ display: none;}
.sidebar-collapse .main-header .brand_part::after{ width: 45px; opacity: 0;}
.sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .right-side, .sidebar-mini.sidebar-collapse .main-footer { margin-left: 100px !important; z-index: 840;  width: calc(100% - 100px);}
.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: 100px !important; z-index: 850;}
.sidebar-mini.sidebar-collapse .sidebar-menu{ padding-left: 6px;}
.sidebar-mini.sidebar-collapse .sidebar-menu > li { position: relative; margin-bottom: 8px;}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a { margin-right: 0; padding: 10px 14px; width: 56px;}
.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-collapse .main-header .sidebar-toggle{ border-color: #9E9E9E29;}
.sidebar-collapse .main-header .sidebar-toggle img:first-child{ display: none;}
.sidebar-collapse .main-header .sidebar-toggle img:last-child{ display: block;}
.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 - 81px) !important;}
.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); font-weight: 700;}
.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(--brand);}
.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{ 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: var(--greyLighter);}
.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.border-transparent{ border-color: transparent !important;}
.btn-theme.border-transparent:not(:disabled):hover{ background: var(--greyLighter);}

.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: #0A9A497A; color: var(--brand);}
.btn-theme.btn-brand48:not(:disabled):hover{ border-color: var(--brand); color: var(--brand); background: var(--brandLightest);}
.btn-theme.btn-brandlightest{ border-color: transparent; color: var(--brand); background: var(--brandLightest);}
.btn-theme.btn-brandlightest:not(:disabled):hover{ border-color: transparent; color: var(--brand); background: var(--brandLighter);}

.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: var(--greyLighter); 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-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.btn-warning.fill{ box-shadow: none; background: var(--warning); border-color: transparent; color: var(--white);}
.btn-theme.btn-warning.fill:not(:disabled):hover{ background: var(--warningDark); 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: 20px;}
.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: 117px; position: relative; z-index: 2;}
.login-wrapper .right_part{ width: 100%; flex: 608px 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 29px; max-width: 548px; width: 100%; margin: 0 auto;}
.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: 14px; line-height: 18px; font-weight: 400; color: var(--txtSecondary);}
.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_form{ margin: 0;}

.form-floating-password > .form-control{ padding-right: 40px !important;}
.password-showhide{ cursor: pointer;}
.input-group > .form-floating > .password-showhide{ position: absolute; top: 10px; right: 10px; border: none; background: none;}

.form-check:not(.form-switch){ margin: 0; padding: 0 0 0 32px; position: relative; min-height: 20px;}
.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: 0 0 1px rgba(0,0,0,0.4) !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; box-shadow: 0 0 1px rgba(0, 127, 95, 0.4) !important;}

.form-check.sm:not(.form-switch){ padding: 0 0 0 30px; min-height: 17px;}
.form-check.sm:not(.form-switch) .form-check-input[type="checkbox"]{ width: 17px; height: 17px; top: 2px;}
.form-check.sm:not(.form-switch) .form-check-input:checked[type="checkbox"]{ background-size: 18px;}

.form-check-input.vcenter{ top: 0 !important; bottom: 0 !important; margin: auto !important;}

.forgot_link{ margin: 0; display: inline-block; font-size: 14px; font-weight: 500; color: var(--txtPrimary);}
.forgot_link:hover{ color: var(--brand);}

.login_form .btn-group{ padding: 40px 0 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: 20px 0;}
.signup-header .logo{ display: flex; width: 117px;}
.forgotp-content{ flex: 1 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 60px 0 60px; box-shadow: 0px 1px 3px 1px #00000026, 0px 1px 2px 0px #0000004D;}
.forgotp-content .container{ max-width: 480px; padding: 0;}
.forgotp-ic{ margin-bottom: 32px; display: inline-block;}
.forgotp-content .login-description{ color: var(--txtSecondary);}
.otp-group{ display: flex; gap: 16px; justify-content: space-between;}
.otp-group .form-control{ width: 66px; height: 54px; line-height: normal; padding: 0 5px; font-size: 16px; 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;}
.otp-invalid .form-control{ color: var(--errorDark);}
.reset_info{ margin: 0; padding: 11px 0; font-size: 14px; line-height: 18px; color: var(--txtPrimary); text-align: center;}
.reset_info a{ color: var(--blue);}
.reset_info a:hover{ color: var(--infoDark); text-decoration: underline;}


/*============ 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-footer.sticky-bottom{ background: var(--white); box-shadow: 0px -2px 8px 1px #0A0D120F; margin: 0 -16px; padding:16px 20px !important;}
.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%;}
.card_block.style2{ padding: 12px; background: var(--actionHover); border-color: var(--midGrey); box-shadow: none;}
.card_top{ padding: 12px;}
.order_card_top .plusmore-ic-btn{ opacity: 0; transition: all .3s;}
.order_card_top:hover .plusmore-ic-btn{ opacity: 1;}

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;}
@media (min-width: 992px) {
  .column-gap-lg-20 { -moz-column-gap: 20px !important; column-gap: 20px !important; }
}
@media (min-width: 1670px) {
  .column-gap-xxxl-20 { -moz-column-gap: 20px !important; column-gap: 20px !important; }
	.column-gap-xxxl-3{ -moz-column-gap: 1rem !important; column-gap: 1rem !important; }
}


/* Icon Button 36x */
.ic-btn{ padding: 8px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 32px; min-height: 32px;}
.ic-btn:hover, .ic-btn.show{ background: #9E9E9E3D;}
.ic-btn.lg > img{ width: 24px;}
.ic-btn.sm > img{ width: 20px;}
.ic-btn-brandlightest{ background: var(--brandLightest);}
.ic-btn-brandlightest:hover{ background: var(--brandLighter);}
.ic-btn-bordered{ border: 1px solid var(--borderColor);}
.ic-btn-grey{ background: var(--greyLighter);}
.ic-btn-grey:hover{ background: var(--grey50);}
.ic-btn-close:hover{ background: var(--error12);}

/* Dropdown Brand lightest */
.dropdown-brandlightest > .dropdown-toggle{ padding: 7px 12px; font-size: 12px; font-weight: 500; color: var(--brand); background: var(--brandLightest); border-radius: 8px; border: none; display: flex; gap: 8px;}
.dropdown-brandlightest > .dropdown-toggle::after{ width: 16px; height: 16px; border: none; background: url(../images/dropdown-arrow20x.svg) no-repeat center center; margin: 0 0 0 auto;}
.dropdown-brandlightest .dropdown-menu{ margin: 5px 0 0 !important; padding: 8px; border-radius: 8px; 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-brandlightest .dropdown-menu li{ margin: 0 0 8px; padding: 0; font-size: 14px; font-weight: 400;}
.dropdown-brandlightest .dropdown-menu li:last-child{ margin-bottom: 0;}
.dropdown-brandlightest .dropdown-menu li a{ display: flex; padding: 10px 12px; gap: 12px; color: var(--txtPrimary); transition: all .2s ease-in-out; min-width: max-content;}
.dropdown-brandlightest .dropdown-menu li a:hover{ color: var(--txtPrimary); background: rgba(158, 158, 158, 0.08) !important;}
.dropdown-brandlightest .dropdown-menu li a:active{ background: transparent;}

/* 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);}
.notification_sidebar .offcanvas-footer{ display: flex; justify-content: space-between; gap: 10px; align-items: center; box-shadow: 0px -2px 8px 1px #0A0D120F; border: none !important;}
.notification_sidebar .btn-theme{ min-width: 64px;}
.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(--brand); background: #007F5F14; 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.unread{ background: var(--brandLightest);}
.notifi_item.unread .datetime::after{ opacity: 1;}
.notifi_item i.brand{ background: #007F5F14;}
.notifi_item i.warning{ background: #F7900914; border-color: #FEC84B;}
.notifi_item i.info{ background: #6172F314; border-color: #6172F3;}
.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); line-height: 18px;}
.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);}

.dashboard_main .body-tabs{ max-width: 404px; width: 100%;}
.dashboard_main .body-tabs li{ flex: 1 0 auto;}

.tred_block i{ width: 32px; height: 32px; margin-bottom: 12px; border-radius: 5.33px; border-width: 1px; border-style: solid; display: flex; align-items: center; justify-content: center;}
.tred_block h5{ margin: 0 0 16px; 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);}
.tred_block .grey_dark-bg{ border-color: var(--greyDark); background: var(--greyLighter);}
.tred_block .error-bg{ border-color: var(--error); background: var(--errorlighter);}
.tred_block .orange-bg{ border-color: var(--orange); background: var(--orangeLighter);}
.tred_block .warning-bg{ border-color: var(--warning); background: var(--warningLighter);}
.tred_block .indigo-bg{ border-color: var(--indigo); background: var(--indigoLighter);}
.tred_block .success-bg{ border-color: var(--success); background: var(--successLighter);}

.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 26px;}
.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: 26px;}
.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; 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);}

.shipedprod_lists{ display: flex; flex-direction: column; gap: 15px;}
.shipedprod_lists .item{ padding: 13px 16px; margin: 0; display: flex; align-items: center; gap: 12px; border: 1px solid var(--midGrey); border-radius: 8px;}
.shipedprod_lists .item > div{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1;}
.shipedprod_lists .item h6{ margin: 0; font-size: 14px; font-weight: 600; line-height: 18px; color: var(--txtPrimary);}
.shipedprod_lists .item figure{ margin: 0; width: 32px; height: 32px; display: flex;}
.shipedprod_lists .item figure img{ width: 100%; border-radius: 8px;}

#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;}

#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;}

#chart2 .apexcharts-legend-text{ display: flex; justify-content: space-between; width: 100%;}
#chart2 .labl_value{ font-weight: 600; color: var(--txtPrimary);}


/*============ Account Modual Pages ============*/
.acnav-tabs{ margin: 0; padding: 0; border: none; background: none; 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(--txtPrimary); border: none; box-shadow: none; justify-content: center;}
.acnav-tabs .nav-item .nav-link i{ display: flex;}
.acnav-tabs .nav-item .nav-link:hover{ background: var(--actionHover); color: var(--txtPrimary); box-shadow: 0px 0 0 1px var(--borderColor);}
.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: var(--greyLighter); 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);}

/* 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: var(--greyLighter);}
.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); inset: inherit !important; top: 100% !important; left: auto !important; right: 0 !important; transform: inherit !important; border: none; min-width: 132px; overflow: hidden;}
tr:nth-last-child(2) .elipsmoreops-drop .dropdown-menu, tr:nth-last-child(3) .elipsmoreops-drop .dropdown-menu, tr:last-child .elipsmoreops-drop .dropdown-menu{ top: auto !important; bottom: 100% !important;}
.elipsmoreops-drop .dropdown-menu li{ margin: 0; padding: 0;}
.elipsmoreops-drop .dropdown-menu li a{ display: flex; padding: 11px 12px; 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: 18px; height: 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;}
.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;}
.bulkuploadtable_modal.show ~ .dtable-dropmenu{ z-index: 1080;}
.dtable-dropmenu.show{ display: block !important;}
.dtable-dropmenu li{ margin: 0; padding: 0; font-size: 14px;}
.dtable-dropmenu li a{ display: flex; padding: 11px 12px; 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: 18px; height: 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;}
.dtable-dropmenu li:last-child a{ color: var(--errorDark);}
.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 */
.card_block > .theme-datatable > .dt-container > .top{ border-radius: 0 0 8px 8px;}
.theme-datatable{ margin: 0; padding: 0;}
.theme-datatable > .dt-container > .top{ overflow: auto; padding: 0; 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{ margin: 0; padding: 0; background: none; border: none;}
.theme-datatable table > thead > tr > th{ padding: 13px 16px; font-size: 12px; font-weight: 600; color: var(--txtPrimary); background: var(--lightF5); border:none !important; outline: none !important; position: relative; border-top: 1px solid var(--midGrey) !important;}
.theme-datatable table > thead > tr > th.freez_cell-start ~ th:not(.freez_cell-end){ box-shadow: 0 12px 8px -8px #1E1E1E0F inset;}
.theme-datatable table > thead > tr > th.freez_cell-end ~ th{ box-shadow: none !important;}
.theme-datatable table.dataTable > thead > tr > th{ padding-right: 30px;}
.theme-datatable table > thead > tr > th .dt-column-title,
.theme-datatable table > thead > tr > td .dt-column-title{ text-transform: uppercase; white-space: nowrap;}
.theme-datatable table > thead > tr > th > input:not([type="checkbox"],[type="radio"]),
.theme-datatable table > 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 > thead > tr > th > input{ color: var(--txtPrimary);}
.theme-datatable table > thead > tr > th > input::placeholder{ color: var(--txtGrey); opacity: 1;}
.theme-datatable table > thead > tr > th > select option{ color: var(--txtPrimary);}
.theme-datatable table > tbody > tr > td{ padding: 10px 16px; font-size: 14px; font-weight: 400; vertical-align: middle; color: var(--txtPrimary); background: var(--white); border:none !important; outline: none !important; white-space: nowrap; border-top: 1px solid var(--midGrey) !important; position: relative;}
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;}

.theme-datatable table > tbody > tr:hover > td{ background: #FBFBFB !important;}
table.dataTable > tbody > tr.selected > *{ box-shadow: none !important; color: var(--txtPrimary) !important;}

table.dataTable input.dt-select-checkbox:indeterminate::after { display: none;}
@media(min-width:1200px){
	.theme-datatable table.dataTable > thead > tr > th.dt-select ~ th.freez_cell-start{ left: 46px !important;}
	.theme-datatable table.dataTable > tbody > tr > td.dt-select ~ td.freez_cell-start{ left: 46px !important;}
}
.theme-datatable table > thead > tr > th.dt-select,
.theme-datatable table > tbody > tr > td.dt-select{ padding-right: 10px; width: 46px; min-width: 46px; text-align: center;}
.theme-datatable table > thead > tr > th.dt-select ~ th:nth-child(2){ padding-left: 5px;}
.theme-datatable table > tbody > tr > td.dt-select ~ td:nth-child(2){ padding-left: 5px;}
.dt-info .select-info { margin-left: 4px;}

.theme-datatable table > tbody > tr > td:first-child::before{ content: ""; width: 4px; height: calc(100% - 20px); position: absolute; left: 0; top: 10px; border-radius: 0 4px 4px 0;}

/* Table Grey Row */
.theme-datatable table > tbody > tr.grey_row > td:first-child::before{ background: var(--txtGrey);}

/* Table Active Row */
.theme-datatable table > tbody > tr.active_row > td:first-child::before{ background: var(--success);}

/* Table Inactive Row */
.theme-datatable table > tbody > tr.inactive_row > td:first-child::before{ background: var(--error);}

/* Table Warning Row */
.theme-datatable table > tbody > tr.warnning_row > td:first-child::before{ background: var(--warning);}

/* Table Blue Row */
.theme-datatable table > tbody > tr.blue_row > td:first-child::before{ background: var(--blue);}

/* Table Secondary Row */
.theme-datatable table > tbody > tr.secondary_row > td:first-child::before{ background: var(--txtSecondary);}

table.dataTable > thead > tr > th.dt-select .dt-column-order, table.dataTable > thead > tr > th.dt-action .dt-column-order{ display: none;}
table > thead > tr > th.dt-action:last-child{ pointer-events: none;}

.theme-datatable table > tbody > tr > td.customerid a{ font-weight: 600; color: var(--brand);}
.theme-datatable table > tbody > tr > td.customerid span{ display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--txtSecondary); font-weight: 400; margin: 4px 0 0; min-width: max-content;}
.theme-datatable table > tbody > tr > td.customerid span.badge{ display: inline-flex;}
.theme-datatable table > tbody > tr > td.customeradd a{ font-weight: 600; color: var(--txtPrimary);}
.theme-datatable table > tbody > tr > td.customeradd small{ display: block; font-size: 12px; font-weight: 400; color: var(--txtSecondary);}
.theme-datatable table > tbody > tr > td.dnt small{ display: block; font-size: 12px; font-weight: 400; color: var(--txtSecondary);}
.theme-datatable table > tbody > tr > td .action{ display: flex; gap: 20px; align-items: center;}
.theme-datatable table > tbody > tr > td .elipsmoreops-drop button{ width: 28px; height: 28px; border-radius: 6px;}

.mailid_info{ display: flex; gap: 8px; align-items: center; color: var(--txtPrimary); min-width: max-content;}
.adrs_info{ display: flex; gap: 8px; align-items: center; color: var(--txtPrimary); min-width: 180px; max-width: 200px; white-space: wrap;}

/* Freez cell CSS */
.theme-datatable table > thead > tr > th.freez_cell-start::after,
.theme-datatable table > tbody > tr > td.freez_cell-start::after{ content: ""; width: 8px; height: 100%; position: absolute; top: 0; right: 0; box-shadow: 5px 0 4px -1px #1E1E1E0F; z-index: -1;}
.theme-datatable table > thead > tr > th.freez_cell-end{ position: sticky; right: 0; background: var(--lightF5); z-index: 52;}
.theme-datatable table > tbody > tr > td.freez_cell-end{ position: sticky; right: 0; background: var(--white);}
.theme-datatable table > thead > tr > th.freez_cell-end::after,
.theme-datatable table > tbody > tr > td.freez_cell-end::after{ content: ""; width: 8px; height: 100%; position: absolute; top: 0; left: 0; box-shadow: -4px 0 3px -1px #1E1E1E0F; z-index: -1;}
.theme-datatable table > tbody > tr > td.freez_cell-end:hover{ z-index: 55;}


/* 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.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;}
.dt-paging nav button:hover{  color: var(--txtPrimary) !important;}
.dt-paging nav button.current{ border-color: var(--brand) !important; background: var(--brand) !important; color: var(--white) !important;}
.dt-info{ font-size: 14px; font-weight: 500; color: var(--txtPrimary) !important;}

/* 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.es{ gap: 4px; padding: 2px 4px; min-height: auto; font-weight: 500; border-radius: 4px;}
.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-blue{ color: var(--white); background: var(--blue);}
.badge.badge-info{ color: var(--infoDark); background: var(--info12);}
.badge.badge-info2{ color: var(--infoDark); background: var(--info16);}
.badge.badge-indigo{ color: var(--indigoDark); background: #6172F329;}
.badge.badge-grey{ color: var(--txtPrimary); background: #9E9E9E29;}
.badge.badge-successdark{ color: var(--white); background: var(--successDark);}
.badge .close{ opacity: 0.4;}
.badge:hover .close{ opacity: 1;}
.badge-info-b{ padding: 9px 16px; background: transparent; border: 1px solid var(--blue); border-radius: 8px; color: var(--blue);}

.badge.badge-primary-b{ color: var(--txtPrimary); background: transparent; box-shadow: 0 0 0 1px var(--txtPrimary) inset;}
.badge.badge-success-b{ color: var(--successDark); background: transparent; box-shadow: 0 0 0 1px var(--successDark) inset;}
.badge.badge-warning-b{ color: var(--warningDark); background: transparent; box-shadow: 0 0 0 1px var(--warningDark) inset;}
.badge.badge-warning-b.b2{ box-shadow: 0 0 0 2px var(--warningDark) inset;}
.badge.badge-blue-b{ color: var(--blue); background: transparent; box-shadow: 0 0 0 1px var(--blue) inset;}

.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 18px; 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{ padding: 6px 12px 6px 16px;}
.offcanvas .offcanvas-footer .action .dropdown-theme .dropdown-toggle::after{ background-size: 22px;}
/* .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 p{ margin: 0; font-size: 14px; font-weight: 400; color: var(--txtPrimary);}
.cstmracview_sidebar .order_and_balance p span{ font-weight: 600; display: block; margin-top: 4px;}
.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; margin-bottom: 16px; border-radius: 6px; background: var(--actionHover); 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); width: 120px; display: block; overflow: hidden; width:100%; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.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(--white); 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.error{ background: var(--errorlighter);}
.error-msg{ font-size: 14px; font-weight: 400; color: var(--errorDark); line-height: 1.4em;}

.dwnld-btn28x{ width: 28px; min-width: 28px; height: 28px; border-radius: 50%; background: var(--greyLighter); border: none; display: inline-flex; align-items: center; justify-content: center;}
.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{ margin: 8px 0 0; display: block; color: var(--txtPrimary); font-weight: 600;}
.accstmrview_table{ border-radius: 12px; border: 1px solid var(--midGrey); overflow: hidden;}
.accstmrview_table table{ margin: 0; padding: 0; width: 100%;}
.accstmrview_table table thead tr th{ padding: 10px 44px 10px 16px; font-size: 12px; font-weight: 600; color: var(--txtPrimary); text-transform: uppercase; position: relative; background: var(--grey50); border:none !important; white-space: nowrap;}
.accstmrview_table table thead tr th img{ position: absolute; right: 16px; top: 50%; transform: translateY(-50%);}
.accstmrview_table table thead tr th:first-child{ border-radius: 12px 0 0 0;}
.accstmrview_table table thead tr th:last-child{ padding-right: 32px; border-radius: 0 12px 0 0;}
.accstmrview_table table thead tr th:last-child img{ right: 10px;}
.accstmrview_table table tbody tr td{ padding: 24px 16px; font-size: 14px; line-height: 18px; font-weight: 400; vertical-align: middle; color: var(--txtPrimary); background: var(--white); border:none !important; border-top: 1px solid var(--midGrey) !important; white-space: nowrap;}
.accstmrview_table table tbody tr:hover td{ background: var(--lightF5);}
.accstmrview_table table tbody tr td:first-child{ font-weight: 500;}
.accstmrview_table table tbody tr:last-child td:first-child{ border-radius: 0 0 0 12px;}
.accstmrview_table table tbody tr:last-child td:last-child{ border-radius: 0 0 12px 0;}

.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 .icon.warning{ background: #F7900914;}
.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;}

.duplicate_modal .modal-body .icon{ background: var(--brandLightest);}

/* 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(--brandLightest); 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 24px; 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 1px 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 1px var(--brand) !important;}
.form-check:not(.radiocheck) .form-check-input[type="radio"]{ width: 16px; min-width: 16px; height: 16px;}


/*============ 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 > .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; position: relative;}
.aac_body:last-child{ margin-bottom: 0;}
.aac_body .card_block{ padding: 16px; margin-bottom: 24px;}
.aac_body .card_block:last-child{ margin-bottom: 0;}

.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;}
.acform_body:last-child{ margin-bottom: 0;}

/* Floting Label form */
.form-floating, .input-group{ margin-bottom: 20px;}
.form-floating:last-child, .input-group:last-child{ margin-bottom: 0;}
.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 > textarea.form-control{ height: 80px; padding-top: 13px; padding-bottom: 13px; scroll-behavior: smooth; scrollbar-color: var(--borderColor) transparent; scrollbar-width: thin;}
.form-floating > .form-select.bootstrap-select{ border-radius: 8px !important;}
.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 > textarea.form-control:focus, .form-floating > textarea.form-control:not(:placeholder-shown){ padding-top: 13px; padding-bottom: 13px;}
.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; background: transparent;}
.form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after{ inset: 0.6rem -0.225rem;}
.input-group > .form-floating > .form-control, .input-group > .form-floating > .form-control-plaintext, .input-group > .form-floating > .form-select{ border-right: none; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;}
.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;}

.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);}
.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; padding: .375rem .5rem; min-width: 40px; font-size: 14px;}
.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_block .input-group .form-control{ border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; z-index: 2 !important;}
.form_block .input-group .input-group-text ~ .form-control{ border-right: 1px solid var(--borderColor); justify-content: flex-end; border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
.form_block .input-group .form-control ~ .input-group-text{ border-right:1px solid var(--borderColor) !important; border-left: none !important; border-radius: 0 !important; border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important;}

.form_block .input-group.flex-row-reverse .form-control{ border-right: 1px solid var(--borderColor); border-left: none; border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;}
.form_block .input-group.flex-row-reverse .form-control ~ .input-group-text{ border-left:1px solid var(--borderColor) !important; border-right: none !important; border-radius: 0 !important; border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; text-align: center; justify-content: center;}

/* Form Validation */
.form_block .input-group.has-validation .form-control.is-invalid ~ .input-group-text{ border-color: var(--error) !important;}

.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) !important;}
.input-group.has-validation > .form-floating > .form-control.is-invalid{ border-color: var(--error) !important;}
.form-control.is-invalid, .was-validated .form-control:invalid{ border-color: var(--error) !important;}
.form-floating > .form-control.is-invalid:not(:placeholder-shown) ~ label{ color: var(--error); }
.form-floating > .bootstrap-select.is-invalid ~ label{ color: var(--error); }
.input-group-error.input-group .form-floating ~ .weight-select .bootstrap-select > .btn{ border-color: var(--error) !important; 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.has-validation .invalid-feedback{ display: block;}
.bootstrap-select.is-invalid .dropdown-toggle, .error .bootstrap-select .dropdown-toggle, .has-error .bootstrap-select .dropdown-toggle, .was-validated .bootstrap-select select:invalid + .dropdown-toggle{ border-color: var(--error) !important;}
.form-floating > .form-control-plaintext.is-invalid ~ label, .form-floating > .form-control.is-invalid:focus ~ label, .form-floating > .form-control.is-invalid:not(:placeholder-shown) ~ label, .form-floating > .form-select.is-invalid ~ label{ color: var(--error) !important;}
.invalid-feedback{ color: var(--error); line-height: 1.1;}
.invalid-feedback img{ width: 16px; min-width: 16px; align-self: flex-start;}

.form-floating > .bootstrap-select.form-select{ width: 100% !important; height: auto; min-height: auto; line-height: normal; padding: 0 !important; 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.disabled{ border-color: #E3E3E3; background-color: var(--greyLightest); color: var(--txtSecondary) !important;}
.bootstrap-select > .disabled.dropdown-toggle::after { opacity: 0.4;}
.form-floating > .form-control-plaintext.disabled ~ label::after, .form-floating > .form-control.disabled:focus ~ label::after, .form-floating > .form-control.disabled:not(:placeholder-shown) ~ label::after, .form-floating > .form-select.disabled ~ label::after{ background-color: var(--greyLightest);}
.form-floating > .bootstrap-select.form-select.disabled ~ label{ background-color: transparent;}
.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(--actionHover); color: var(--txtPrimary);}
.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: #9E9E9E29; color: var(--txtPrimary);}

.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;}

.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;}
.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;}

.fileuploaded{ background: transparent !important; border: 1px solid var(--midGrey); padding: 12px; flex-direction: column; align-items: normal; height: auto !important;}
.fileuploaded .files{ display: flex; gap: 20px; overflow: auto; scroll-behavior: smooth; scrollbar-color: var(--borderColor) transparent; scrollbar-width: thin;}
.fileuploaded .files .img{ width: 128px; min-width: 128px; height: 120px; border-radius: 4px; border: 1px solid var(--midGrey); display: flex;}
.fileuploaded .files .img img{ width: 100%; object-fit: cover; border-radius: 4px;}
.fileuploaded .action{ display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px;}

.radiocheck.form-check{ margin: 0; padding: 0; position: relative; display: flex; gap: 10px; min-height: 17px;}
.radiocheck.form-check .form-check-input{ width: 17px; min-width: 17px; height: 17px; border: 1px solid var(--txtGrey); border-radius: 50%; margin:1px 0 0 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: 17px;}

.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 carrier */
.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);}

/* Search warehouse */
.warehouse-search-container{ width: 100%; margin:0 0 24px; position: relative;}
.warehouse-search-container .warehouse-search-input{ width: 100%; height: 42px; 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); box-shadow: none !important;}
.warehouse-search-container .search_ic{ position: absolute; left: 12px; top: 11px; /*transform: translateY(-50%);*/ display: flex; width: 20px; margin: 0;}
.warehouse-suggestion-box{ margin-top: 12px; position: absolute; top: 100%; left: 0; max-width: 1052px; width: 100%; background: var(--white); border-radius: 8px; display: none; max-height: 252px; overflow-y: auto; padding: 12px; box-shadow: -20px 20px 40px -4px #919EAB3D, 0px 0px 2px 0px #919EAB3D; z-index: 10;}
.warehouse-suggestion-box .warehouse-suggestion-item { margin: 0; padding: 12px; transition: all .3s ease-in-out; display: flex; gap: 12px; align-items: flex-start; border-radius: 8px; margin-bottom: 8px;}
.warehouse-suggestion-box .warehouse-suggestion-item:last-child{ margin-bottom: 0;}
.warehouse-suggestion-box .warehouse-suggestion-item i{ width: 20px; min-width: 20px; display: flex; align-self: flex-start;}
.warehouse-suggestion-box .warehouse-suggestion-item i img{ width: 100%;}
.warehouse-suggestion-box .warehouse-suggestion-item p:first-child{ margin: 0 0 8px; font-size: 14px; line-height: 18px; color: var(--txtPrimary);}
.warehouse-suggestion-box .warehouse-suggestion-item p{ margin: 0 0 4px; font-size: 12px; line-height: 16px; color: var(--txtSecondary); font-weight: 500;}
.warehouse-suggestion-box .warehouse-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: 18px;}
.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.selected{ background: var(--brandLightest); border-color: var(--brandLight);}
.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);}

.tooltip-custom.tooltip-custom-sm{ position: relative; top: 0; right: 0; transform: inherit; transform: unset;}
.tooltip-box.tooltip-box-sm{ bottom: auto; top: 100%; right: 0 !important; width: 200px; border-radius: 6px; background: #26282D; box-shadow: 0px 12px 16px -4px #0A0D1214; margin-top: 3px;}
.tooltip-box.tooltip-box-sm ul li{ font-size: 12px; font-weight: 500; padding: 7px 8px;}
.theme-datatable table > tbody > tr:nth-last-child(2) > td .tooltip-box.tooltip-box-sm,
.theme-datatable table > tbody > tr:last-child > td .tooltip-box.tooltip-box-sm{ top: auto; bottom: 100%; margin-top: 0; margin-bottom: 3px;}


/*============ 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);}
.badge.number-badge-error{ background: var(--error); color: var(--white);}
.vline-divider{ width: 1px; background: var(--borderColor); height: 24px; display: inline-block; align-self: center;}

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

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

/* Theme Dropdown */
.dropdown-theme .dropdown-menu{ margin: 5px 0 0 !important; padding: 8px; border-radius: 8px; 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.top-start .dropdown-menu{ top: auto !important; bottom: 100% !important;}
.dropdown-theme.bottom-end .dropdown-menu{ left: auto !important; right: 0 !important;}
.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 0 8px; padding: 0; font-size: 14px; font-weight: 400;}
.dropdown-theme .dropdown-menu li:last-child{ margin-bottom: 0;}
.dropdown-theme .dropdown-menu li a{ display: flex; padding: 10px 12px; gap: 12px; color: var(--txtPrimary); transition: all .2s ease-in-out; min-width: max-content;}
.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;}

.orders_grid{ margin-bottom: 28px; display: flex; gap: 20px;}
.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: #26282D;}
.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: 130px;}
table > tbody > tr > td:last-child > .elipsmoreops-drop{ display: inline-flex;}

.pd-address{ margin: 0; min-width: 280px; 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: 4px !important; margin: 0; line-height: unset; font-size: unset; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-print-color-adjust: exact; color-adjust: exact;print-color-adjust: exact; box-shadow: 0 0 1px rgba(0,0,0,0.4) !important;}
table.dataTable input.dt-select-checkbox:checked{ border-color: var(--brandDark) !important; background: var(--brandDark) 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; box-shadow: 0 0 1px rgba(0, 127, 95, 0.4) !important;}
table.dataTable input.dt-select-checkbox:checked::after{ display: none !important;}

.bulk-action-bar{ position: absolute; top: 15px; 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);}


/* 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: contain; border-radius: 6px;}
.prod_info span{ display: block; margin-bottom: 6px;}
.prod_info a{ font-size: 12px; font-weight: 500; color: var(--blue); text-decoration: underline;}

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

/* Create Order */
.co-wrapper .content-body{ position: relative;}
.co-wrapper .acaddcustomer_main{ padding-right: 540px;}
.orderinfo_aside{ width: 480px; background: var(--white); box-shadow: 0px 4px 6px -2px #0A0D1208, 0px 12px 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; min-height: 100%;}
.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: 24px; min-width: 24px; height: 24px; background: url(../images/close-circle-ic28x.svg) no-repeat center center; background-size: 28px; padding: 0; opacity: 1; box-shadow: none !important; position: unset;}
.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); font-weight: 600; padding: 8px 16px; line-height: 18px;}
.alert-danger{ background-color: var(--errorlighter); border-color: transparent; color: var(--errorDark); padding: 9px 8px; line-height: 18px;  border-radius: 8px;}
.alert-warning{ background-color: var(--warningLighter); border-color: transparent; color: var(--warningDark); padding: 9px 8px; line-height: 18px;  border-radius: 8px;}
.alert-primary{ background-color: #DCE8FF; border-color: transparent; color: var(--infoDark); padding: 9px 8px; line-height: 18px;  border-radius: 8px;}
.alert-success{ background-color: var(--successLighter); border-color: transparent; color: var(--successDark); padding: 9px 8px; line-height: 18px;  border-radius: 8px;}


/*============ Carriers Modual Pages ============*/
.exconlist_title{ margin: 0 0 16px; font-size: 20px; font-weight: 600; color: var(--txtPrimary);}
.carier_items{ display: flex; gap: 40px; flex-wrap: wrap; margin-bottom: 24px;}
.carier_items:last-child{ margin-bottom: 0;}
.carier_item{ margin: 0; padding: 8px; border-radius: 16px; background: var(--white); max-width: 186px; min-width: 186px; box-shadow: 0.5px 0.5px 2px 0px #0A0D1228;}
.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: 11px 0 3px 4px; display: flex; align-items: center; gap: 15px;}
.carier_item h5{ margin: 0; padding: 0; font-size: 16px; font-weight: 600; 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;}

/*============ 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:0 0 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; position: relative;}
.bulkupload_block .upload-container .btn_close{ position: absolute; right: 12px; top: 14px; width: 36px; height: 36px; padding: 8px; border-radius: 50%; z-index: 2;}
.bulkupload_block .upload-container .btn_close:hover{ opacity: 1; background: var(--error12);}
.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 strong span{ font-weight: 500;}
.bulkupload_block .upload-container .upload-label small{ margin: 0 0 0 4px; font-size: 14px; display: inline-block;}
.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; border-radius: 12px; padding: 12px; border: 1px dashed var(--borderColor); background-color: var(--actionHover); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;}
.bulkuploading_file:hover { background-color: var(--greyLightest);}
.bulkuploading_file .left_part{ display: flex; gap: 12px; align-items: center; min-width: 40%; flex: 1;}
.bulkuploading_file .left_part figure{ width: 40px; min-width: 40px; 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 0 4px; font-size: 16px; font-weight: 600; 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_process{ margin: 0; padding: 0; font-size: 12px; font-weight: 600;}
.bulkuploading_file .right_part{ display: flex; gap: 24px; align-items: center;}
.bulkuploading_file .right_part .ic-btn-close img{ width: 20px;}
.bulkuploading_file.error .file_name{ color: var(--errorDark); margin-top: 4px;}
.bulkuploading_file.error .file_process{ color: var(--errorDark); margin: 0; line-height: 1;}
.progress_info{ display: flex; align-items: center; gap: 10px; justify-content: flex-end; width: 100%;}
.progress_info .progress-status{ margin: 0; font-size: 14px; font-weight: 700; color: var(--infoDarker); min-width: 39px;}
.progress_info .progress{ width: 100%; background: #1E1E1E3D; border-radius: 50px; height: 6px;}
.progress .progress-bar{ background: var(--blue); border-radius: 50px;}
.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);}

/* 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{ font-weight: 700; margin: 0; padding: 0;}
.bulkuploadtable_modal .modal-body{ padding: 0 20px;}
.bulkuploadtable_modal table.dataTable > tbody > tr > td .pd-address{ min-width: auto;}

.cariers-select{ min-width: 188px;}
.cariers-select .bootstrap-select{ width: 100% !important;}
.cariers-select .bootstrap-select > .btn { height: 46px; min-height: 46px; padding: 5px 5px 5px 6px;}
.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: contain;}
.cariers-select .carier-block .price{ font-size: 12px; font-weight: 500; color: var(--txtSecondary); position: relative; padding-right: 30px; line-height: 1;}
.cariers-select .carier-block .name{ font-size: 14px; font-weight: 500; color: var(--txtPrimary); line-height: 1; margin:0 0 6px;}
.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-drop.bootstrap-select > .dropdown-menu{ padding: 0; box-shadow: -20px 20px 40px -4px #919EAB3D, 0px 0px 2px 0px #919EAB3D; border: none !important;}
.cariers-select-drop.bootstrap-select .dropdown-menu li a{ display: flex; padding: 8px; background: none;}
.cariers-select-drop.bootstrap-select .dropdown-menu li a .carier-block{ display: flex; gap: 12px; align-items: center;}
.cariers-select-drop.bootstrap-select .dropdown-menu li a .carier-block .img{ width: 32px; min-width: 32px; height: 32px; border-radius: 7px; display: flex;}
.cariers-select-drop.bootstrap-select .dropdown-menu li a .carier-block .img img{ width: 100%; border-radius: 7px; object-fit: contain;}
.cariers-select-drop.bootstrap-select .dropdown-menu li a .carier-block.noselect .img{ display: block;}
.cariers-select-drop.bootstrap-select .dropdown-menu li a .carier-block .price{ font-size: 12px; font-weight: 500; color: var(--txtSecondary); position: relative; padding-right: 30px; line-height: 1;}
.cariers-select-drop.bootstrap-select .dropdown-menu li a .carier-block .price .tooltip-custom{ display: none;}
.cariers-select-drop.bootstrap-select .dropdown-menu li a .carier-block .name{ font-size: 14px; font-weight: 500; color: var(--txtPrimary); line-height: 1; margin:0 0 6px;}
.cariers-select-drop.bootstrap-select .dropdown-menu li a:hover, .cariers-select-drop.bootstrap-select .dropdown-menu li a:focus, .cariers-select-drop.bootstrap-select .dropdown-menu li a.active, .cariers-select-drop.bootstrap-select .dropdown-menu li a.selected, .cariers-select-drop.bootstrap-select .dropdown-menu li.active a, .cariers-select-drop.bootstrap-select .dropdown-menu li.selected a{ background: none;}


/*============ Rate Calculator Modual Pages ============*/
.ratesinfo_aside{ box-shadow: 0px 4px 6px -2px #0A0D1208, 0px 12px 16px -4px #0A0D1214;}

.theme-datatable #rateprodTable > thead > tr > th{ box-shadow: none;}

/*============ 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);}

/* 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);}

/* 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);}


/*============ Warehouses Modual Pages ============*/
.theme-datatable table.warehouse_table > tbody > tr > td:last-child{ width: 176px;}

/* Filter Sidebar */
.filter_sidebar .offcanvas-body{ padding: 16px;}

/* Label Title */
.lbl-title{ margin: 0 0 12px; padding: 0 0 8px; font-weight: 600; color: var(--txtPrimary); border-bottom: 1px solid var(--midGrey); display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.lbl-title2{ margin: 0 0 15px; font-size: 12px; font-weight: 400; text-transform: uppercase; color: var(--txtGrey);}
.lbl-title3{ margin: 0 0 12px; padding: 0; font-size: 12px; font-weight: 500; color: var(--txtSecondary); display: block;}

/*============ Carriers Modual Pages Style2 ============*/
.prod_info_style2 .prod_img{ width: 40px; min-width: 40px; height: 40px;}

.connect_carrier_modal .modal-dialog{ max-width: 620px;}

.equal_btn{ margin: 0; padding: 2px 12px; border: 1px solid var(--midGrey); background: var(--actionHover); border-radius: 8px; display: inline-flex; gap: 12px; align-items: center;}
.equal_btn.dropdown-toggle::after{ background-size: 20px;}

.hyphen-divider{ width: 12px; height: 2px; background: var(--midGrey); display: inline-block; margin: 0 12px 4px;}

.explore_connections{ display: flex; gap: 20px;}
.exconnection_lists{ flex-grow: 1;}
.exaction_abcd{ width: 100%; max-width: 40px; min-width: 40px; padding: 7px; display: flex; flex-direction: column; background: var(--actionHover); border-radius: 8px; border: 1px solid #9E9E9E29; height: 100%; max-height: 948px; position: sticky; top: 0; overflow: hidden; gap: 4px;}
.exaction_abcd a{ display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 32px; text-align: center; color: var(--txtPrimary); flex-grow: 1; text-decoration: none; min-height: 32px; border-radius: 6px;}
.exaction_abcd a:last-child{ border-bottom: none;}
.exaction_abcd .active, .exaction_abcd a:hover{ background: var(--white); box-shadow: 0px 1px 2px 0px #0000004D;}


/*============ Rate Modual Pages ============*/
.product-selector{ width: 100%; position: relative;}
.product-selector .search-container{ margin-bottom: 0;}
.product-selector .product-list { display: none; position: absolute; top: 100%; left: 0; width: 100%; min-width: 375px; border: 1px solid #9E9E9E29; border-radius: 12px; box-shadow: 0px 20px 24px -4px #0A0D1214; background: var(--white); margin-top: 4px; overflow: hidden; z-index: 55;}
.product-selector .product-list.active { display: block;}
.product-selector .product-items{ max-height: 232px; margin: 12px 12px 0; overflow: auto; scroll-behavior: smooth; scrollbar-color: var(--borderColor) transparent; scrollbar-width: thin;}
.product-selector .product-items .product-item{ display: flex; align-items: center; gap: 16px; margin: 0 0 8px; padding: 12px; cursor: pointer; border-radius: 8px; transition: all 0.3s;}
.product-selector .product-items .product-item:hover, .product-selector .product-items .product-item.selected { background: var(--lightF5);}
.product-selector .product-items .product-item .product-checkbox{ position: relative; top: 0 !important; float: unset;}
.product-selector .product-thumb img { width: 32px; height: 32px; min-width: 32px; border-radius: 6px; object-fit: cover;}
.product-selector .product-info { flex-grow: 1; }
.product-selector .product-title { font-size: 14px; font-weight: 500; color: var(--txtPrimary); margin: 0 0 3px; display: flex; align-items: center; gap: 12px;}
.product-selector .product-sku { font-size: 12px; color: var(--txtSecondary);}
.product-selector .actions { display: flex; gap: 24px; justify-content: flex-end; align-items: center; padding: 12px; background: var(--white); box-shadow: 0px -2px 8px 1px #0A0D120F;}

/* Multiple Select */
.form-select-multi.bootstrap-select > .dropdown-menu{ box-shadow: -20px 20px 40px -4px #919EAB3D, 0px 0px 2px 0px #919EAB3D; padding: 8px; border: none !important; margin: 4px 0;}
.form-select-multi.bootstrap-select .dropdown-menu li:not(:last-child){ margin-bottom: 8px;}
.form-select-multi.bootstrap-select .dropdown-menu li a{ padding: 13px; border-radius: 8px; display: flex; gap: 12px; align-items: center;}
.form-select-multi.bootstrap-select .dropdown-menu li a span.check-mark{ position: unset !important; width: 17px; height: 17px; border-radius: 4px !important; box-shadow: 0 0 1px rgba(0,0,0,0.4) !important; display: block; border: 1px solid var(--txtGrey) !important;}
.form-select-multi.bootstrap-select .dropdown-menu li a span.check-mark::after{ display: none;}
.form-select-multi.bootstrap-select .dropdown-menu li a span.text{ margin: 0;}
.form-select-multi.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark{ border-color: var(--brand) !important; 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: 18px; box-shadow: 0 0 1px rgba(0, 127, 95, 0.4) !important;}
.form-select-multi.bootstrap-select .dropdown-menu li a:hover, .form-select-multi.bootstrap-select .dropdown-menu li a:focus{ background-color: var(--actionHover); color: var(--txtPrimary);}
.form-select-multi.bootstrap-select .dropdown-menu li a.active, .form-select-multi.bootstrap-select .dropdown-menu li a.selected, .form-select-multi.bootstrap-select .dropdown-menu li.active a, .form-select-multi.bootstrap-select .dropdown-menu li.selected a{ background-color: #9E9E9E29; color: var(--txtPrimary);}

/* Table Rounded */
.table-responsive{ scroll-behavior: smooth; scrollbar-color: var(--borderColor) transparent; scrollbar-width: thin;}
.table-rounded{ border-radius: 8px; border: 1px solid var(--midGrey); overflow: hidden;}
.table-rounded .theme-datatable table > thead > tr > th{ border-top: none !important;}

.rateprod_table table > thead > tr > th{ padding-left: 13px; padding-right: 13px; text-transform: uppercase; white-space: nowrap;}
.rateprod_table table > tbody > tr > td{ padding-left: 13px; padding-right: 13px;}
.rateprod_table table > tbody > tr > td .form_block .form-control{ min-width: 125px;}

.carier_serv_accordion{ border: none;}
.carier_serv_accordion .accordion-item{ margin: 0 0 24px; border: 1px solid var(--midGrey); border-radius: 8px; overflow: hidden;}
.carier_serv_accordion .accordion-button{ margin: 0; padding: 16px 17px 16px 12px; background: transparent; gap: 12px; border: none; box-shadow: none;}
.carier_serv_accordion .accordion-button i{ width: 24px; border-radius: 3px; display: inline-flex;}
.carier_serv_accordion .accordion-button i img{ width: 100%; object-fit: contain; border-radius: 3px;}
.carier_serv_accordion .accordion-button::after{ content: ""; width: 14px; height: 14px; background: url(../images/dropdown-arrow20x.svg) no-repeat center center;}

table.dataTable input.dt-select-checkbox[type="radio"]{ border-radius: 50% !important;}
table.dataTable input.dt-select-checkbox[type="radio"]:not(:checked){ border-color: var(--greyDark) !important;}
.theme-datatable table.dataTable > thead > tr > th[align="right"],
.theme-datatable table.dataTable > tbody > tr > td[align="right"]{ text-align: right !important;}

.theme-datatable table > tbody > tr.collapsed_row > td { background: var(--grey50) !important;}
.theme-datatable table > tbody > tr.active > td{ font-weight: 700;}

/*============ Products Modual Pages ============*/
.channer_logo_column{ min-width: max-content; display: flex; gap: 16px; align-items: center;}
.channel-logo-lists{ display: flex; gap: 0 -12px;}
.channel-logo-lists img{ width: 34px; height: 34px; border-radius: 50%; object-fit: contain;}
.channel-logo-lists img:not(:first-child){ margin-left: -14px;}

.filter_channel_check_list .form-check{ display: flex;}
.filter_channel_check_list .form-check .prod_info .prod_img { width: 28px; height: 28px; min-width: 28px;}

.theme-datatable table.product_table > tbody > tr > td:last-child{ width: 164px;}
@media(min-width:1200px){
.theme-datatable table.product_table > tbody > tr > td{ padding-top: 13px; padding-bottom: 13px;}
}

.table_filter_result{ border-top: 1px solid var(--midGrey);}

.datatable_filter .dropdown-menu{ left: auto !important; right: 0 !important; border-radius: 8px; padding: 12px 12px 0; border: none; box-shadow: -20px 20px 40px -4px #919EAB3D, 0px 0px 2px 0px #919EAB3D; min-width: 400px;}
.datatable_filter .search-container{ margin-bottom: 12px;}
.datatable_filter ul{ margin: 0; padding: 0;}
.datatable_filter ul li{ margin: 0; padding: 16px 0; gap: 12px; display: flex; align-items: center; font-size: 14px; font-weight: 400; color: var(--txtPrimary);}
.datatable_filter ul li .actions{ display: flex; gap: 16px; align-items: center; margin-left: auto;}
.datatable_filter ul li .actions a{ display: inline-block;}
.datatable_filter ul li .actions a:hover{ opacity: 0.7;}
.datatable_filter .lbl-title2{ margin: 16px 0;}
.datatable_filter .vline-divider{ background: var(--midGrey); height: 21px;}

.viewproduct_sidebar .customer_info{ padding: 20px 16px; display: flex; gap: 16px; font-size: 12px; border-top: 1px solid var(--midGrey);}
.viewproduct_sidebar .customer_info:first-child{ border-bottom: 1px solid var(--midGrey); border-top: none;}
.viewproduct_sidebar .customer_info figure{ width: 64px; min-width: 64px; height: 64px; border-radius: 8px; margin: 0;}
.viewproduct_sidebar .customer_info figure img{ width: 100%; height: 100%; border-radius: 8px; object-fit: cover;}
.viewproduct_sidebar .customer_info h6{ margin: 0 0 1px; font-size: 16px; font-weight: 700; color: var(--txtPrimary);}
.viewproduct_sidebar .customer_info .badge{ margin-top: 8px;}

.vpnav_tabs{ margin: 0; padding: 0 16px; gap: 8px; border: none; border-bottom: 1px solid var(--midGrey); flex-wrap: nowrap; overflow: auto; white-space: nowrap;}
.vpnav_tabs .nav-link{ margin: 0; padding: 12px; font-size: 14px; font-weight: 600; line-height: 18px; color: var(--txtSecondary); border: none; border-bottom: 2px solid transparent;}
.vpnav_tabs .nav-link:hover, .vpnav_tabs .nav-link.active{ border-color: var(--txtPrimary); color: var(--txtPrimary);}
.vptab_content{ padding: 16px;}
.vptab_content .lbl-title2{ margin-bottom: 8px; display: block;}
.vptab_content hr.line{ margin: 20px 0;}
.vptab_content ul{ margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;}
.vptab_content ul li{ margin: 0; padding: 8px 0; display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--txtSecondary);}
.vptab_content ul li span{ display: inline-flex; gap: 12px; align-items: center; color: var(--txtPrimary);}

.warehouseaddcode_list{ padding: 12px; border-radius: 12px; border: 1px solid var(--midGrey); margin-bottom: 16px;}
.warehouseaddcode_list:hover{ background: var(--lightF5);}
.warehouseaddcode_list:last-child{ margin-bottom: 0;}
.warehouseaddcode_list .badge{ margin-bottom: 12px;}
.warehouseaddcode_list p{ margin: 0;}

.epd_modal .modal-dialog{ max-width: 640px;}
.epd_modal .modal-body{ padding: 0;}
.epd_modal .tab-content{ padding:24px 16px 16px;}
.epd_modal .form-floating{ margin-bottom: 32px;}
.epd_modal .logicslab_row{ border: none !important;}
.epd_modal .logicslab_row ~ .expanded-form:not(:first-child){ border: none;}


.radio_box{ padding: 0 !important;}
.radio_box .form-check-input{ margin: 0 !important; left: 12px !important; top: 50% !important; transform: translateY(-50%);}
.radio_box .form-check-label{ padding: 12px 12px 12px 44px; border-radius: 8px; border: 1px solid var(--midGrey); width: 100%; display: flex; align-items: center; justify-content: space-between;}
.radio_box .form-check-input:checked ~ .form-check-label{ background: var(--brandLightest); border-color: #59AC97;}

.warehouseaddcode_list2{ padding: 11px 12px; border-radius: 8px; border: 1px solid var(--midGrey); margin-bottom: 32px; display: flex; align-items: center; gap: 30px; justify-content: space-between;}
.warehouseaddcode_list2:last-child{ margin-bottom: 0;}
.warehouseaddcode_list2 p{ margin: 0; font-weight: 500; color: var(--txtPrimary) !important; overflow: hidden; width:100%; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.warehouseaddcode_list2 .idinfo{ display: flex; align-items: center; margin: 0 0 4px; padding: 0;}
.warehouseaddcode_list2 .idinfo li{ margin: 0; padding: 0; display: flex; align-items: center;}
.warehouseaddcode_list2 .idinfo li + li::before{ content: ""; width: 1px; height: 16px; background: var(--midGrey); margin: 0 8px;}
.warehouseaddcode_list2 .idinfo li label{ margin: 0; padding: 0; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--brandDark);}
.warehouseaddcode_list2 .btn-group{ flex-wrap: nowrap;}

.warehouseaddcode_list2.disable{ background: var(--actionHover);}
.warehouseaddcode_list2.disable p{ color: var(--txtGrey) !important;}
.warehouseaddcode_list2.disable .idinfo li label{ color: var(--txtGrey);}
.warehouseaddcode_list2 .btn-theme.sm{ min-width: 64px;}
.warehouseaddcode_list2 .btn-theme.sm:not(:hover){ background: transparent;}

.epd_shiprate_table.accstmrview_table{ margin-bottom: 8px;}
.epd_shiprate_table.accstmrview_table table thead tr th{ padding-right: 16px;}
.epd_shiprate_table.accstmrview_table table thead tr th img{ right: auto; top: auto; transform: unset; margin-left: 10px;}
.epd_shiprate_table.accstmrview_table table tbody tr td{ padding-top: 18px; padding-bottom: 18px;}
.epd_shiprate_table.accstmrview_table table tbody tr td:last-child{ padding-left: 10px; padding-right: 10px;}
.epd_shiprate_table.accstmrview_table table tbody tr td:last-child a img{ width: 16px;}

.modalbulk_table.accstmrview_table table thead tr th{ padding:13px 34px 13px 16px;}
.modalbulk_table.accstmrview_table table thead tr th img{ right: auto; top: -1px; position: relative; transform: unset; margin-left: 3px;}
@media (min-width: 768px) {
.modalbulk_table.accstmrview_table table thead tr th:first-child,
.modalbulk_table.accstmrview_table table tbody tr td:first-child{ position: sticky; left: 0; z-index: 2;}
.modalbulk_table.accstmrview_table table thead tr th:first-child::after,
.modalbulk_table.accstmrview_table table tbody tr td:first-child::after { content: ""; width: 8px; height: 100%; position: absolute; top: 0; right: 0; box-shadow: 4px 0 4px 0px #1E1E1E0F; z-index: -1;}
}
.modalbulk_table.accstmrview_table table tbody tr td{ padding-top: 18px; padding-bottom: 18px;}
.modalbulk_table.accstmrview_table table .form_block .bootstrap-select > .dropdown-toggle::after { width: 36px;}
.modalbulk_table.accstmrview_table table .form_block .form-control{ height: 36px; min-height: 36px;}
.modalbulk_table.accstmrview_table table .form_block .dimention{ min-width: 224px;}
.modalbulk_table.accstmrview_table table .form_block .bootstrap-select > .btn{ height: 36px; min-height: 36px; min-width: 124px;}

.theme-datatable table > tbody > tr > td.dt_weight_error{ color: var(--errorDark);}

/*============ Order Modual Pages ============*/
.body-tabs{ background: var(--actionHover); border-radius: 8px; padding: 8px; border: 1px solid #9E9E9E29;}

/* 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 16px 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;}

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

.theme-datatable table.order_table > tbody > tr > td{ padding-top: 8px; padding-bottom: 8px;}
.theme-datatable table.order_table > thead > tr > th:last-child{ width: 164px;}
.theme-datatable table.order_table > tbody > tr > td:last-child{ width: 164px;}

.templates_modal .modal-dialog{ width: 98%; max-width: 1200px;}
table.outemplate_table thead tr th{ padding:13px 34px 13px 16px;}
table.outemplate_table thead tr th img{ right: auto; top: -1px; position: relative; transform: unset; margin-left: 3px;}
@media (min-width: 1200px) {
table.outemplate_table thead tr th:first-child,
table.outemplate_table tbody tr td:first-child{ position: sticky; left: 0; z-index: 2;}
table.outemplate_table thead tr th:first-child::after, table.outemplate_table tbody tr td:first-child::after { content: ""; width: 8px; height: 100%; position: absolute; top: 0; right: 0; box-shadow: 4px 0 4px 0px #1E1E1E0F; z-index: -1;}
}
table.outemplate_table tbody tr td{ padding-top: 12px; padding-bottom: 12px;}
table.outemplate_table thead tr th:last-child, table.outemplate_table tbody tr td:last-child{ width: 112px; max-width: 112px;}

/* Create Templates Modal */
.create_templates_modal .modal-dialog{ width: 98%; max-width: 960px;}
.create_templates_modal .accstmrview_table{ box-shadow: 0px 1px 2px 0px #0A0D120F;}
.create_templates_modal .accstmrview_table table thead tr th{ background: var(--lightF5);}
.create_templates_modal .accstmrview_table table thead tr th img{ display: inline; position: unset; transform: translateY(-2px); margin-left: 1px;}
.create_templates_modal .accstmrview_table table tbody tr td{ padding-top: 15px; padding-bottom: 15px;}
.create_templates_modal .accstmrview_table table tbody tr td:first-child > div{ display: flex; align-items: center; gap: 14px;}
.create_templates_modal .accstmrview_table table tbody tr td:first-child > div > img ~ span{ margin-left: 34px;}
.create_templates_modal .accstmrview_table table tbody tr td:first-child > div > .clps_arrw{ margin-left: 34px;}
.create_templates_modal .accstmrview_table table tbody tr td:first-child > div > img ~ .clps_arrw{ margin-left: 0;}
.create_templates_modal .accstmrview_table table tbody tr td:first-child > div > img ~ .clps_arrw ~ span{ margin-left: 0;}
.create_templates_modal .accstmrview_table table tbody tr.collapsed_row td{ background: var(--actionHover);}
.create_templates_modal .accstmrview_table table tbody tr:hover td{ background: var(--grey50) !important;}

.unsavedchanges_modal .modal-body .icon{ background: var(--warningLighter);}

/* Order bulckupload modal */
.bulkuploadtable_modal .card_block{ box-shadow: none; border-radius: 12px; border: 1px solid var(--midGrey); overflow: hidden;}
.bulkuploadtable_modal .theme-datatable table#MapProdTable > thead > tr > th{ box-shadow: none; border-top: none !important;}
.bulkuploadtable_modal .theme-datatable table#MapProdTable > thead > tr > th.freez_cell-start ~ th:not(.freez_cell-end){ box-shadow: 0 4px 8px -8px #1E1E1E0F inset;}
.bulkuploadtable_modal .theme-datatable table#MapProdTable > thead > tr > th.freez_cell-end ~ th{ box-shadow: none !important;}
.bulkuploadtable_modal .theme-datatable table#MapProdTable .form-floating{ z-index: 0;}
.bulkuploadtable_modal .theme-datatable table#MapProdTable .form-floating > .bootstrap-select.form-select{ width: 188px !important;}
.bulkuploadtable_modal .theme-datatable table#MapProdTable .tooltip-custom .tooltip-box{ z-index: 25; display: none;}

/* Offcanvas View Order */
.vieworder_sidebar .offcanvas-footer{ padding: 16px; box-shadow: 0px -2px 8px 1px #0A0D120F;}
.vieworder_sidebar .tab-content{ padding: 16px;}
.vieworder_sidebar .line{ margin: 20px 0;}
.add_info_list{ margin: 0; padding: 0;}
.add_info_list li{ margin: 8px 0 0; padding: 8px 28px; position: relative; font-size: 14px; line-height: 18px;}
.add_info_list li i{ display: inline-flex; position: absolute; top: 9px; left: 0;}
.add_info_list li .copy{ position: absolute; top: 7px; right: 0;}
.vieworder_sidebar .courierb_item{ border-color: var(--midGrey); margin-top: 16px;}
.vieworder_sidebar .courierb_item:hover{ background: var(--actionHover);}
.vieworder_sidebar .courierb_item.selected{ background: var(--brandLightest); border-color: var(--brandLight);}
.vieworder_sidebar .courierb_items .courierb_item .tooltip-custom .tooltip-box{ right: -40px;}
.order_info_list{ margin: 0; padding: 0;}
.order_info_list li{ margin: 8px 0 0; padding: 8px 0; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--txtSecondary); display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.order_info_list li strong{ font-size: 14px; font-weight: 500; color: var(--txtPrimary);}
.order_info_list li.total{ font-weight: 700; color: var(--txtPrimary);}
.order_info_list li.total strong{ font-weight: 700; color: var(--txtPrimary);}

.order_prod_block{ border: 1px solid var(--midGrey); border-radius: 12px; margin: 16px 0 0;}
.order_prod_block .op_head{ padding: 12px 12px; display: flex; gap: 16px; align-items: flex-start;}
.order_prod_block .op_head figure{ margin: 2px 0 0; padding: 0; width: 67px; border-radius: 8px; border: 1px solid #9E9E9E29;}
.order_prod_block .op_head figure img{ border-radius: 8px;}
.order_prod_block .detail{ margin: 0; padding: 0; display: flex; gap: 12px; justify-content: space-between; flex: 1;}
.order_prod_block .detail h5{ margin: 0 0 8px; padding: 0; font-size: 16px; color: var(--txtPrimary); font-weight: 500; line-height: 20px;}
.order_prod_block .detail .sku_id{ margin: 0 0 8px; font-size: 12px;  line-height: 16px; color: var(--txtSecondary); font-weight: 500; display: block;}
.order_prod_block .detail .price{ font-size: 16px; font-weight: 600; color: var(--txtPrimary); line-height: 20px;}
.order_prod_block .detail p{ margin: 0; padding: 0; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--txtGrey);}
.order_prod_block .detail p span{ color: var(--txtPrimary); display: inline-block; margin-left: 5px;}
.op_clps_btn{ margin: 0; padding: 13px 12px; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--txtSecondary); background: var(--actionHover) url(../images/chevron-down16x.svg) no-repeat center right 18px; border: none; border-top: 1px solid #9E9E9E29; width: 100%; text-align: left; border-radius: 0 0 12px 12px;}
.op_clps_btn .close{ display: none;}
.op_clps_btn:not(.collapsed) .close{ display: block;}
.op_clps_btn:not(.collapsed) .view{ display: none;}
.op_boxes_list{ margin: 0; border-top: 1px solid var(--midGrey);}
.op_boxes_list .op_boxes_item{ margin: 0; padding: 16px 12px; display: flex; align-items: center; gap: 12px; justify-content: space-between;}
.op_boxes_list .op_boxes_item:not(:last-child){ border-bottom: 1px dashed var(--midGrey);}
.op_boxes_list .op_boxes_item p{ margin: 0; padding: 0; font-size: 14px; font-weight: 500; color: var(--txtSecondary); line-height: 18px;}
.op_boxes_list .op_boxes_item .btn-group{ gap: 10px 20px;}
.accessorial_info{ margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 5px 10px;}
.accessorial_info .badge{ margin: 0; font-size: 14px; font-weight: 500; line-height: 18px; padding: 8px 16px; border-radius: 8px;}
.co-wrapper .acaddcustomer_main .card_block{ border-radius: 12px;}
.prodform_block{ margin-bottom: 24px; display: flex; gap: 8px 16px; padding: 12px; background: var(--actionHover); border:1px solid var(--midGrey); box-shadow: none; border-radius: 12px;}
.prodform_block figure{ margin: 0; width: 40px; min-width: 40px; border-radius: 8px; margin: 0;}
.prodform_block figure img{ width: 100%; border-radius: 8px;}
.prodform_block .form_block .bootstrap-select{ max-width: 720px;}
.co-wrapper .acaddcustomer_main .card_block .bootstrap-select > .dropdown-toggle::after { width: 22px; height: 22px;}
.pickup_add_block{ padding: 16px; background: var(--actionHover); border:1px solid var(--midGrey); border-radius: 8px; max-width: 680px; display: block;}
.pickup_add_block p{ margin: 0 0 16px; padding: 0 0 16px; font-size: 16px; line-height: 20px; color: var(--txtPrimary); border-bottom: 1px dashed var(--midGrey);}
.pickup_add_block ul{ margin: 0; padding: 0; gap: 8px 16px; display: flex; align-items: center;}
.pickup_add_block ul li{ margin: 0; padding: 0; gap: 12px; display: flex; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--txtSecondary); align-items: center;}
.pickup_add_block ul li + li::before{ content: ""; width: 1px; height: 15px; margin: 0 4px 0 0; background: var(--midGrey);}
.co_prod_collapse{ padding: 0; background: var(--actionHover); border:1px solid var(--midGrey); border-radius: 8px; margin-bottom: 24px;}
.co_prod_collapse .collapse_head{ padding: 12px; display: flex; align-items: center; gap: 8px 16px; font-size: 16px; color: var(--txtPrimary);}
.co_prod_collapse .collapse_head .collapse_axn{ width: 24px; height: 24px; border-radius: 6px; background: url(../images/chevron-down20x.svg) no-repeat center center; background-size: 16px; transition: background-color .3s ease-in-out;}
.co_prod_collapse .collapse_head .collapse_axn:hover{ background-color: #9E9E9E3D;}
.co_prod_collapse .collapse_head .collapse_axn:not(.collapsed){ transform: rotate(180deg);}
.co_prod_collapse .collapse_head figure{ margin: 0; min-width: 32px; width: 32px; height: 32px; display: flex; border-radius: 6px;}
.co_prod_collapse .collapse_head figure img{ width: 100%; object-fit: cover; border-radius: 6px;}
.co_prod_collapse .collapse_head .dtl_main{ flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px;}
.co_prod_collapse .collapse_head .left_dtl{ display: flex; align-items: center; gap: 12px;}
.co_prod_collapse .collapse_head .left_dtl p{ margin: 0; line-height: 20px; font-weight: 500;}
.co_prod_collapse .collapse_head .right_dtl{ display: flex; align-items: center; gap: 35px;}
.co_prod_collapse .collapse_head .right_dtl .qty_info{ display: flex; align-items: center; gap: 0; padding: 4px; border: 1px solid #DBDBDB; border-radius: 8px;}
.co_prod_collapse .collapse_head .right_dtl .qty_info .qty_input{ width: 28px; height: 20px; font-size: 16px; line-height: 20px; color: var(--txtPrimary); font-weight: 500; border: none; background: none; text-align: center;}
.co_prod_collapse .collapse_head .right_dtl .qty_info button{ width: 26px; height: 26px; border-radius: 6px; border: none; background: none; display: inline-flex; align-items: center; justify-content: center;}
.co_prod_collapse .collapse_body .accstmrview_table{ border-radius: 0; border-left: none; border-right: none; border-bottom: none;}
.co_prod_collapse .collapse_body .accstmrview_table table thead tr th img{ position: unset; display: inline-block; transform: translateY(-2px); margin: 0 0 0 7px;}
.co_prod_collapse .collapse_body .accstmrview_table table thead tr th{ padding-right: 16px;}
.co_prod_collapse .collapse_body .accstmrview_table table tbody tr:last-child td:first-child{ border-radius: 0 0 0 8px;}
.co_prod_collapse .collapse_body .accstmrview_table table tbody tr:last-child td:last-child{ border-radius: 0 0 8px 0;}

.courierb_items .courierb_item.courierb_item_price .rdtl .dtl{ display: flex; flex-direction: column; justify-content: space-between; gap: 8px;}
.courierb_items .courierb_item h5{ margin-bottom: 0; display: flex; align-items: center; gap:4px 12px; line-height: 20px; flex-wrap: wrap;}
.courierb_items .courierb_item h5 .badge{ border-radius: 8px; padding: 5px 13px;}
.courierb_items .courierb_item figure{ width: 52px; min-width: 52px; height: 52px;}
.courierb_items .courierb_item .tooltip-custom{ display: inline-flex; z-index: unset;}
.courierb_items .courierb_item .tooltip-custom .tooltip-box{ right: 0;}

/*============ Channels Modual Pages ============*/
.actinact-select.priority-select .bootstrap-select > .btn .badge-info::after{ content: ""; width: 16px; height: 16px; background: url(../images/info-arrow-down16x.svg) no-repeat center center; background-size: 100%;}
.actinact-select.priority-select .bootstrap-select > .btn .badge-success::after{ content: ""; width: 16px; height: 16px; background: url(../images/active-down-arrow16x.svg) no-repeat center center; background-size: 100%;}
.actinact-select.priority-select .bootstrap-select > .btn .badge-grey::after{ content: ""; width: 16px; height: 16px; background: url(../images/inactive-down-arrow16x.svg) no-repeat center center; background-size: 100%;}

/*============ Plan Modual Pages ============*/
.plan-wrapper h1{ margin: 0 0 16px; font-size: 36px; line-height: 44px; font-weight: 500; color: var(--greyDark); text-align: center;}
.plan-wrapper .p-info{ margin: 0 0 32px; font-size: 16px; line-height: 20px; font-weight: 500; color: var(--txtSecondary); text-align: center;}
.plan-wrapper .acnav-tabs .nav-item .nav-link{ min-width: 115px;}
.plan_card{ position: relative; height: 100%; display: flex;}
.plan_card .card_body{ margin: 0; padding: 20px; box-shadow: 0px 2px 4px -2px #0A0D120F, 0px 4px 8px -2px #0A0D121A; background: var(--white); border-radius: 8px; position: relative; z-index: 2; width: 100%;}
.plan_card .icon{ margin: 0 0 24px; padding: 0; width: 56px; height: 56px; background: var(--brandLight); border-radius: 8px; display: flex; justify-content: center; align-items: center;}
.plan_card h2{ margin: 0 0 8px; padding: 0; font-size: 18px; line-height: 22px; font-weight: 700; color: var(--txtPrimary);}
.plan_card p{ margin: 0 0 24px; padding: 0; font-size: 14px; font-weight: 400; line-height: 18px; color: var(--txtSecondary);}
.plan_card .price{ margin: 0 0 24px; font-size: 32px; font-weight: 700; line-height: 40px; color: var(--txtPrimary);}
.plan_card .price sup{ font-size: 16px; line-height: 20px; font-weight: 400; color: var(--txtGrey);}
.plan_card ul{ margin: 24px 0 0; padding: 24px 0 0; border-top: 1px dashed var(--midGrey);}
.plan_card ul li{ margin: 0 0 16px; padding: 0 0 0 28px; font-size: 14px; font-weight: 400; line-height: 18px; color: var(--txtPrimary); position: relative;}
.plan_card ul li:last-child{ margin-bottom: 0;}
.plan_card ul li::before{ content: ""; width: 16px; height: 16px; background: url(../images/check-succes-ic16x.svg) no-repeat center center; background-size: 100% 100%; position: absolute; top: 1px; left: 0;}
.plan_card ul li.false::before{ background: url(../images/false-ic16x.svg) no-repeat center center; background-size: 100% 100%;}
.plan_card.popular::before{ content: ""; width: 100%; height: 16px; background: var(--brandLight); border-radius: 16px 16px 0 0; position: absolute; top: -8px; left: 0;}
.plan_card.popular .card_body{ background: var(--brandLightest); box-shadow: 0px 8px 8px -4px #0A0D1208, 0px 20px 24px -4px #0A0D1214;}
.pop_tag{ padding: 4px 8px; font-size: 12px; font-weight: 700; line-height: 16px; color: var(--white); background: var(--txtPrimary); border-radius: 6px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; position: absolute; top: 8px; right: 8px;}

/*============ Setting Modual Pages ============*/
.settings_sec{ display: flex; gap: 40px;}
.settings_sec > .left_part{ width: 240px; min-width: 240px;}
.settings_sec > .right_part{ flex: 1;}

.setting-nav{ margin: 0; padding: 0; position: sticky; top: 0;}
.setting-nav li{ margin: 0 0 16px; padding: 0;}
.setting-nav .nav-link{ margin: 0; padding: 12px 8px; display: flex; gap: 8px; border-radius: 6px; font-size: 14px;font-weight: 500; color: var(--txtPrimary); width: 100%;}
.setting-nav .nav-link img{ transition: all .2s ease-in-out; filter: brightness(0) saturate(100%) invert(25%) sepia(4%) saturate(483%) hue-rotate(177deg) brightness(97%) contrast(95%);}
.setting-nav .nav-link.active{ box-shadow: 0px 1px 2px 0px #0A0D120F, 0px 1px 3px 0px #0A0D121A; background: var(--white); color: var(--brandDark);}
.setting-nav .nav-link.active img{ filter: none;}

.setting_tab_conent{ box-shadow: 0px 1px 2px 0px #0A0D120F, 0px 1px 3px 0px #0A0D121A; background: var(--white); border-radius: 12px;}
.setting_tab_conent:not(:last-child){ margin-bottom: 24px;}
.setting_tab_item{ padding: 16px; display: flex; gap: 28px 20px; border-bottom: 1px solid var(--midGrey);}
.setting_tab_item:last-child{ border-bottom: none;}
.setting_tab_item .icon{ width: 56px; height: 56px; min-width: 56px; border-radius: 8px; background: var(--brandLightest); display: flex; justify-content: center; align-items: center;}
.setting_tab_item .detail{ flex: 1; display: flex; gap: 20px; align-items: center; align-self: center;}
.setting_tab_item .ldtl{ flex: 1;}
.setting_tab_item h3{ margin: 0 0 4px; padding: 0; font-size: 16px; font-weight: 600; line-height: 20px; color: var(--txtPrimary);}
.setting_tab_item p{ margin: 0; padding: 0; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--txtSecondary);}
.setting_tab_item .rdtl{ flex: 0 0 276px;}
.setting_tab_item.style2 .rdtl{ flex: 0 0 432px;}
.setting_tab_item .bootstrap-select > .dropdown-toggle::after { width: 22px; height: 22px;}
.setting_tab_item.style3{ flex-wrap: wrap;}
.setting_tab_item.style3 .ldtl{ padding-right: 56px; position: relative;}
.setting_tab_item.style3 .ldtl .form-switch{ position: absolute; top: 10px; right: 0;}
.setting_tab_item .detail2{ width: 100%;}
.setting_tab_item .bootstrap-select > .dropdown-menu{ padding: 8px; box-shadow: -20px 20px 40px -4px #919EAB3D, 0px 0px 2px 0px #919EAB3D; border: none !important;}
.setting_tab_item .bootstrap-select .dropdown-menu li:not(:last-child){ margin-bottom: 8px;}
.setting_tab_item .bootstrap-select .dropdown-menu li a{ padding: 12px 12px;}

/*============ Support Modual Pages ============*/
.support-wrapper .content-body{ padding-top: 32px;}
.support-wrapper h1{ margin: 0 0 16px; font-size: 36px; line-height: 44px; font-weight: 500; color: var(--greyDark);}
.support-wrapper .p-info{ margin: 0 0 32px; font-size: 16px; line-height: 20px; font-weight: 500; color: var(--txtSecondary);}
.support-wrapper .p-info a{ color: var(--blue);}
.support-wrapper .p-info a:hover{ color: var(--blueDarkest);}
.support-wrapper .search-container{ max-width: 572px;}

.faq_accordion .accordion-item{ margin: 0 0 24px; box-shadow: 0px 1px 2px 0px #0A0D120F; box-shadow: 0px 1px 3px 0px #0A0D121A; border-radius: 12px; background: var(--white); position: relative;}
.faq_accordion .accordion-button{ margin: 0; padding: 18px 160px 18px 16px; font-size: 16px; font-weight: 600; line-height: 20px; color: var(--txtPrimary); background: transparent; border: none; box-shadow: none; position: static; transition:all .3s ease-in-out;}
.faq_accordion .accordion-button:not(.collapsed){ padding-bottom: 12px;}
.faq_accordion .accordion-button::after{ background: url(../images/faq-arrow.svg) no-repeat center center; width: 24px; height: 24px; position: absolute; top: 50%; transform: translateY(-50%); right: 16px;}
.faq_accordion .accordion-button:not(.collapsed)::after{ transform: translateY(-50%) rotate(-180deg);}
.faq_accordion .accordion-body{ padding: 0 160px 16px 16px;}
.faq_accordion .accordion-body p:last-child{ margin-bottom: 0;}

.auto_grid{ display: flex; gap: 32px; flex-wrap: wrap;}
.video_block{ padding: 8px 12px 16px; background: var(--white); border-radius: 16px; box-shadow: 0px 1px 2px 0px #0A0D120F, 0px 1px 3px 0px #0A0D121A; width: 100%; max-width: 360px; transition:all .3s ease-in-out;}
.video_block:hover{ box-shadow: 0px 1px 2px 0px #0A0D124A, 0px 1px 3px 0px #0A0D121A;}
.video_block .video_head{ position: relative;}
.video_block .video_head figure{ margin: 0; padding: 0; display: flex; border-radius: 12px; position: relative;}
.video_block .video_head figure img{ width: 100%; border-radius: 12px;}
.video_block .video_head figure iframe{ width: 100%; height: 100%; border-radius: 12px; line-height: normal; display: flex; position: absolute; top: 0; left: 0;}
.playtime_info{ padding: 4px; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--white); background: var(--txtPrimary); border-radius: 6px; display: inline-flex; gap: 4px; align-items: center; position: absolute; top: 8px; right: 8px;}
.video_block .video_body{ padding: 16px 0 0;}
.video_block .video_body .vd_tag{ margin: 0 0 8px; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--brand); display: block;}
.video_block .video_body h4{ margin: 0 0 8px; padding: 0; font-size: 16px; font-weight: 600; line-height: 20px; color: var(--txtPrimary); overflow: hidden; width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.video_block .video_body p{ margin: 0 0 12px; padding: 0; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--txtSecondary); overflow: hidden; width:100%; display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;}

.suporthelp_filter{ margin: 0; padding: 0; display: flex; gap: 20px;}
.suporthelp_filter li{ margin: 0; padding: 0;}
.suporthelp_filter li a{ padding: 6px 8px; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--txtPrimary); border: 1px solid transparent; border-radius: 6px; display: flex; min-width: 72px; justify-content: center; align-items: center;}
.suporthelp_filter li a:hover{ border-color: var(--borderColor); background: var(--actionHover); color: var(--txtPrimary);}
.suporthelp_filter li a.active{ padding: 7px 49px; background: var(--brandLightest); border-color: var(--brandLight); color: var(--brand);}
table.helpdesk_table > tbody > tr > td{ padding-top: 14px; padding-bottom: 14px;}
table.helpdesk_table thead tr th:last-child, table.helpdesk_table tbody tr td:last-child { width: 120px; max-width: 120px;}
table.helpdesk_table > tbody > tr > td .action{ justify-content: center; gap: 24px;}

.vticket_info{ padding: 16px;}
.vticket_info hr.line{ margin: 20px 0;}
.vticket_info figure{ margin: 0 0 16px; padding: 0;}
.vticket_info figure img{ width: 100%; border-radius: 4px;}
ul.datelist{ margin: 0 0 20px; padding: 0;}
ul.datelist li{ margin: 0 0 8px; padding: 8px 0; font-size: 14px; font-weight: 500; color: var(--txtPrimary); line-height: 18px; display: flex; gap: 10px; justify-content: space-between; align-items: center;}
ul.datelist li span:first-child{ display: inline-flex; align-items: center; gap: 8px; color: var(--txtSecondary);}

.addnewticket_modal .modal-dialog{ max-width: 620px;}
.addnewticket_modal .upload-container{ height: 143px;}

.uploaded_files_imgs{ display: flex; gap: 24px; overflow: auto; scroll-behavior: smooth; scrollbar-color: var(--borderColor) transparent; scrollbar-width: thin;}
.uploaded_files_imgs .img{ width: 120px; min-width: 120px; height: 120px; border-radius: 4px; border: 1px solid var(--midGrey); display: flex;}
.uploaded_files_imgs .img img{ width: 100%; object-fit: cover; border-radius: 4px;}
.addnewticket_modal .btn-theme.md{ height: 40px; padding-left: 14px; padding-right: 14px;}

.svideo_modal .modal-dialog{ max-width: 620px;}
.svideo_modal .modal-body{ padding: 10px;}
.svideo_modal .btn-close { position: absolute; right: -9px; top: -9px; background-color: var(--white); width: 26px; height: 26px; border-radius: 50%; opacity: 1; padding: 0; background-size: 10px;}
.svideo_modal iframe{ width: 100%; border-radius: 12px; line-height: normal; display: flex;}

/* Search Toggle box */
.search-wrapper { position: relative; width: 40px; height: 40px; z-index: 5;}
.search-wrapper .search-toggle{ width: 40px; height: 40px; border-radius: 8px; background: #f2f4f7; display: flex;}
.search-wrapper .search-toggle button{ border: none; transition: all 0.3s ease;}
.search-wrapper .search-toggle button:hover{ background: var(--brandLightest); box-shadow: inset 0 0 0 2px var(--brandLighter);}
.search-wrapper .search-box{ position: absolute; top: 0; right: 0; width: 0; height: 40px; opacity: 0; overflow: hidden; border-radius: 5px; background: var(--white); border: 1px solid var(--brandLighter); transition: all 0.3s ease;}
.search-wrapper.active .search-box { width: 200px; opacity: 1;}
.search-wrapper.active .search-toggle { opacity: 0; pointer-events: none;}
.search-wrapper .search-box input { width: 100%; height: 100%; border: none; outline: none; padding: 0 40px 0 12px; font-size: 13px;}
.search-wrapper .search-box .search-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--brandLightest); padding: 3px; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); border: none;display: flex;align-items: center;justify-content: center;}