@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

:root { 
	--mFonts: 'Poppins', sans-serif;
	--Fonts-size: 16px;
	--Fonts-size-12: 12px;
	--Fonts-size-14: 14px;
	--Fonts-size-18: 18px;
	--Fonts-size-20: 20px;
	--Fonts-size-22: 22px;
	--Fonts-size-24: 24px;
	--Fonts-size-28: 28px;
	--Fonts-size-32: 32px;
	--Fonts-size-34: 34px;
	--Fonts-size-36: 36px;
	--Fonts-size-38: 38px;
	--Fonts-size-42: 42px;
	/* --textColor: #64748B; */
	--textColor: #48576D;
	--titleColor: #181824;
	--textColorLight: #999999;
	--primaryColor: #33738D;
	--secondaryColor: #181824;
	--lightColor: #F6F6FE;
	--lightGrayColor: #f5f5f5;
	--borderColor: #E9E8EF;
	--borderColorInput: #dddddd;
	--white: #fff;
	--black: #000;
	--gray: #404040;
	--rColor: #FF002E;
	--gColor: #10cb0b;
	--oColor: #e9a513;
	--yColor: yellow;
	--gColorTheme: #0EA472;
	--oColorTheme: #FF9800;
	--sColorTheme: #0EA5E9;
	--pColorTheme: #33738D;
	--rColorTheme: #FF002E;
	--gColorThemeBg: #E7F6F1;
	--oColorThemeBg: #FFF5E6;
	--sColorThemeBg: #E7F6FD;
	--pColorThemeBg: #F6F9FA;
	--rColorThemeBg: #FFE6EB;
	--bs-border-color: #dbdbdb;
	--bs-border-radius: 4px;
	--bodyColor:#F6F9FA;

}


/********* Reset CSS *********/
*,
*:before,
*:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

a { outline: 0;  text-decoration: none; color: var(--titColor); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
a:focus { outline: 0;}
a:hover,
a:active { outline: 0;}
a:hover { text-decoration: none; color: var(--titColor);}

h1, h2, h3, h4, h5, h6 { font-weight: normal;}
b, strong, dt, th { font-weight: bold;}
em, i { font-style: italic;}
p, h1, h2, h3, h4, h5, h6, ul, ol, dd, table, fieldset, address { margin: 0; padding: 0;}
img { -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle; max-width: 100%; height: auto;}
figure { margin: 0;}
legend { white-space: normal;}
q { quotes: "\201C" "\201D" "\2018" "\2019"}
small { font-size: 80%;}
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup { top: -0.5em;}
sub { bottom: -0.25em;}
table { border-collapse: separate; border-spacing: 0; width: 100%; empty-cells: show; border: none;}
table table { margin: 0;}
th, td { border: none; padding: 8px 10px;}
caption, th, td { font-weight: normal ;}

/********* Clear floats *********/
.cf:before, .cf:after, .wrap-inner:before, .wrap-inner:after, .row:before, .row:after, .boxs:before, .boxs:after, .radio-list:after, .radio-list:before, .fieldgroup:after, .fieldgroup:before { content: " "; display: table;}
.cf:after, .wrap-inner:after, .row:after, ul:after, .boxs:after, .radio-list:after, .fieldgroup:after { clear: both;}

/********* Common Classes *********/
* { margin: 0; padding: 0;}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 20px 0; padding: 0}
body,button,input,select,textarea { color: var(--textColor); font-family: var(--mFonts); font-size: var(--Fonts-size); line-height: 28px; font-weight: 400;}

h1 { font-size: var(--Fonts-size-18); font-weight: 600; color: var(--titleColor); margin: 0 0 0 0; line-height: normal;}
h2 { font-size: var(--Fonts-size); font-weight: 500; color: var(--titleColor); margin: 0 0 0 0; line-height: normal;}
h3 { margin-bottom: 10px; color: var(--titleColor);}
h3,h4,h5 { font-weight: 500; line-height: normal;}
p { margin-bottom: 25px;}
a, button { cursor: pointer;}
ul,li { list-style: none;}

/********** Form, Input & Button  **********/
::-webkit-input-placeholder { color: var(--textColorLight) !important; font-size: var(--Fonts-size); font-weight: 400;}
::-moz-placeholder { color: var(--textColorLight) !important; font-size: var(--Fonts-size); font-weight: 400;}
:-ms-input-placeholder { color: var(--textColorLight) !important; font-size: var(--Fonts-size); font-weight: 400;}
::placeholder { color: var(--textColorLight) !important; font-size: var(--Fonts-size); font-weight: 400;}

.form-control { padding: .45rem .85rem;}
/* .form-select { padding: .45rem 2.45rem .45rem .85rem;} */
.form-control:focus,
.form-select:focus { border-color: #b5b1ff; box-shadow: 0 0 0 .25rem rgba(128, 123, 237, .20);}
.form-check { display: flex; min-height: auto; padding-left: 0; margin-bottom: 0; align-items: center; gap: 10px;}
.form-check .form-check-input { margin-left: 0; width: 1.5em; height: 1.5em; margin-top: 0em;}
.form-label { font-size: var(--Fonts-size-14); font-weight: 400; margin-bottom: 5px; color: var(--textColor);}

.form-label-cart {font-size: var(--Fonts-size-14); font-weight: 400; margin-bottom: 5px; color: var(--textColor); display: block;text-align: left;}

.btn { text-transform: capitalize !important;}
.btn.btn-form-set { padding: .47rem .85rem; min-height: 41.4px; background-color: #dbdbdb; border: 1px solid #dbdbdb; font-size: var(--Fonts-size-14); font-weight: 600; text-transform: uppercase;}
.btn.btn-form-set:hover { background-color: #fff;}
.btn.btn-form-set:focus { border: 1px solid #dbdbdb;}

.btn-primary { background-color: var(--primaryColor); border-color: var(--primaryColor);}
.btn-outline-primary { border-color: var(--primaryColor); color: var(--primaryColor);}
.btn-outline-primary:hover { border-color: var(--primaryColor); background-color: var(--primaryColor);}
.btn:hover { background-color: var(--secondaryColor); border-color: var(--secondaryColor); color: var(--white);}
.btn-light:hover { color: var(--white);}

input:disabled,
select:disabled { opacity: 0.4;}

.btn-secondary { --bs-btn-color: #fff; --bs-btn-bg: #3a4546; --bs-btn-border-color: #3a4546; --bs-btn-hover-color: #fff;}

.btn-header { line-height: 0; padding: 7.5px 9px;}
.btn-header i { font-size: 21px;}

.btn-full { width: 100%;}

.btn-w-50 { width: 50px;}
.btn-w-60 { width: 60px;}
.btn-w-70 { width: 70px;}
.btn-w-80 { width: 80px;}
.btn-w-90 { width: 90px;}
.btn-w-100 { width: 100px;}
.btn-w-110 { width: 110px;}
.btn-w-120 { width: 120px;}
.btn-w-130 { width: 130px;}

.cForm { width: 100%; float: left;}
.cForm li { width: 100%; float: left; padding: 0 8px; margin-bottom: 16px;}
.cForm li.col-2 { width: 50%;}
.cForm li.col-3 { width: 33.33%;}
.cForm li.col-4 { width: 25%;}
.cForm li.col-5 { width: 20%;}
.cForm li label { font-size: var(--Fonts-size); font-weight: 600; color: var(--titleColor); display: block; margin-bottom: 6px;}
.cForm li label span { color: var(--rColor);}
.cForm li.btnCenter { text-align: center; margin-bottom: 0; display: flex; justify-content: center; gap: 10px;}
.cForm .messageBox { width: 100%; display: flex; color: var(--redColor); font-weight: 500; font-size: var(--Fonts-size-s); padding-top: 8px;}
.cForm .messageBox i { margin-right: 10px;}

.ci-check { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.ci-check input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkmark { position: absolute; top: 0; left: 0; height: 24px; width: 24px; background-color: var(--white); border: 1px solid #ccc; border-radius: 5px;}
.ci-check:hover input~.checkmark { background-color: #ccc;}
.ci-check input:checked~.checkmark { background-color: var(--primaryColor); border-color: var(--primaryColor);}
.checkmark:after { content: ""; position: absolute; display: none;}
.ci-check input:checked~.checkmark:after { display: block;}
.ci-check .checkmark:after { left: 9px; top: 6px; width: 5px; height: 10px; border: solid var(--white); border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.ci-radio .checkmark { border-radius: 50%;}
.ci-radio .checkmark:after { top: 7px; left: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--white);}

.form-check-input:checked { background-color: var(--primaryColor); border-color: var(--primaryColor);}
.form-check-input:focus { border-color: var(--primaryColor); outline: 0; box-shadow: 0 0 0 0.25rem #E4EDF0;}
.form-control:focus, .form-select:focus { border-color: #8BAFBE; box-shadow: 0 0 0 .25rem #E4EDF0;}

.text-primary { color: var(--pColorTheme) !important;}
.text-success { color: var(--gColorTheme) !important;}
.text-warning { color: var(--oColorTheme) !important;}
.text-info { color: var(--sColorTheme) !important;}
.text-danger { color: var(--rColorTheme) !important;}

.bg-primary-subtle { background-color: var(--pColorThemeBg) !important;}
.bg-success-subtle { background-color: var(--gColorThemeBg) !important;}
.bg-warning-subtle { background-color: var(--oColorThemeBg) !important;}
.bg-info-subtle { background-color: var(--sColorThemeBg) !important;}
.bg-danger-subtle { background-color: var(--rColorThemeBg) !important;}

.bg-primary-subtle:hover,
.bg-primary-subtle:active { border-color: var(--pColorTheme) !important;}
.bg-success-subtle:hover,
.bg-success-subtle:active { border-color: var(--gColorTheme) !important;}
.bg-warning-subtle:hover,
.bg-warning-subtle:active { border-color: var(--oColorTheme) !important;}
.bg-info-subtle:hover,
.bg-info-subtle:active { border-color: var(--sColorTheme) !important;}
.bg-danger-subtle:hover,
.bg-danger-subtle:active { border-color: var(--rColorTheme) !important;}

.btn { text-transform: uppercase; font-weight: 400; letter-spacing: 1px; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}


.text-right { text-align: right;}
/*================================================ Main CSS Theme Start ====================================================*/
html { width: 100%; height: 100%; scroll-behavior: smooth;}
body { width: 100%; height: 100%; background: var(--bodyColor);}
input { -webkit-appearance: none; -moz-appearance: none; appearance: none;}

/********** Layout **********/
.fullwidth { width: 100%; float: left;}

.wrap-inner { margin: 0 auto; width: 100%; padding: 0 30px;}
.wrap-inner-full { margin: 0 auto; width: 100%; padding: 0 40px;}
.wrap-inner-mid { margin: 0 auto; width: 100%; max-width: 1024px; padding: 0 15px;}
.wrap-inner-small { margin: 0 auto; width: 100%; max-width: 640px; padding: 0 15px;}
.wrap-inner-from { margin: 0 auto; width: 100%; max-width: 840px; padding: 0 15px;}

.height100 { height: 100%;}

.page-title h1 { font-size:var(--Fonts-size); color: var(--primaryColor); letter-spacing: 0.8px;}
.page-title button.btn { padding-top:5px; padding-bottom:5px;}
.page-title .dateRangFilter .form-control { padding:6px;}
.card-header .page-title .btn { padding:7.5px 16px; font-size:var(--Fonts-size-14); text-transform:none !important;letter-spacing: 0.5px; font-weight: 500;}

button.btn { padding:7.5px 16px; font-size:var(--Fonts-size-14); letter-spacing: 0.5px; font-weight: 500;}

.card {border-color: var(--borderColor); border-radius: 10px;/*border: 0 none; -webkit-box-shadow: 0px 4px 16px 0px rgba(24, 24, 20, 0.04); -moz-box-shadow: 0px 4px 16px 0px rgba(24, 24, 20, 0.04); box-shadow: 0px 4px 16px 0px rgba(24, 24, 20, 0.04);*/ }
.card-header { background-color: transparent; border-color: var(--borderColor); padding-top: 12px; padding-bottom: 12px;}
.card-footer { background-color: transparent; border-color: var(--borderColor); padding-top: 12px; padding-bottom: 12px;}
.card-title h2 { letter-spacing: 0.8px;}
.card-header .btn { font-size: 12px; font-weight: 400; text-transform: uppercase !important;}
.card-header .searchBox .btn { padding: 5px; margin: 0 0 0 7px; line-height: 0; border: 0 none; cursor:default;}
.card-header .searchBox .btn:hover { background-color: transparent; color: var(--textColorLight);}

.dateRangFilter { display: flex; align-items: center; gap: 10px;}
.dateRangFilter .form-control { width: 160px; padding: .25rem .25rem .25rem .45rem; line-height: normal;}

/********** CMN **********/
.page { width: 100%; height: 100%; float: left; display: flex; flex-wrap: wrap; flex-direction: column;}

.page .contentArea { width: 100%; display: flex; flex-wrap: wrap; min-height: 100%; /*min-height: calc(100% - 70px);*/ padding-top: 70px;}
.page .main { width: 100%; position: relative;  min-height: 100%;}
.inner-content { width: 100%; float: left; padding: 25px 20px 25px 20px; min-height: calc(100% - 58px); }

.footer { width: 100%; float: left; padding: 15px 25px}

/* Header */
.header { width: 100%; float: left; height: 70px; padding: 0 25px; position: sticky; display: flex; justify-content: space-between; align-items: center; background-color: var(--white); top: 0; z-index: 9998; backdrop-filter: blur(6px);}
.header.sticky { width:100%; position: fixed; z-index: 1000;}
.slide-menu .header.sticky { width: calc(100% - 0);}
.header .logo { width: 260px; padding: 18px 20px; background-color: var(--white); text-align: center; position: relative; top: 0; left: 0; margin-left: -20px ; border-right: 1px solid #eee;}
.header .logo img { height: 34px;}
.headerLogoBox { display: flex; align-items: center; gap: 30px;}
.header .logoBox { display: none; width: 260px; height: 74px; position: absolute; left: -0; top: 0; background-color: var(--secondaryColor); visibility: hidden; opacity: 0; transition: visibility 0s linear 600ms, opacity 600ms;}
.header .menuClick { font-size: var(--Fonts-size-22); color: var(--secondaryColor);}

.header .headerRight { height: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 20px;}
.header .headerRight .cartBox { position: relative; height: 100%; display: flex; align-items: center; padding:0 16px 0 20px; border-left: 1px solid #eee;}
.header .headerRight .cartBox i { font-size: 32px;}
.header .headerRight .cartBox span { width: 22px; height: 22px; position: absolute; top: 15px; right: 0; background-color: var(--primaryColor); line-height: normal; padding:0px; border-radius: 100%; text-align: center; font-size: 14px; font-weight: 500; color: var(--white);}
.header .headerRight .currentDue { display: flex; flex-direction: column; line-height: 16px; text-align: right;}
.header .headerRight .currentDue label { font-size: 12px; font-weight: 500; color: var(--textColorLight);}
.header .headerRight .currentDue span { font-weight: 600; color: var(--primaryColor);}

.header .headerRight .notification span { width: 45px; height: 45px; border: 1px solid var(--borderColor); border-radius: 100%; display: flex; justify-content: center; align-items: center; position:relative;}
.header .headerRight .dadline { display: flex;}
.header .headerRight .dadline .details { display: inline-block; line-height: normal; }
.header .headerRight .dadline .details h4 { font-size:var(--Fonts-size-18); }
.header .headerRight .day { display: flex; padding-right: 15px; }
.header .headerRight .day span { width: 45px; height: 45px; border: 1px solid var(--white); color: var(--white); font-family: var(--tFonts); font-weight: 500; border-radius: 100%; display: flex; justify-content: center; align-items: center; background-color: transparent;}
.header .headerRight.red .cart .cartCnt span { background-color: var(--rColorTheme);}
.header .red.day span { background-color: var(--rColorTheme);}
.header .green.day span { background-color: var(--gColorTheme);}
.header .orange.day span { background-color: var(--oColorTheme);}
.header .headerRight.red .day span { background-color: var(--rColorTheme);}
.header .headerRight.red .notification svg path { fill: var(--rColorTheme);}
.header .headerRight.green .cart .cartCnt span { background-color: var(--gColorTheme);}
.header .headerRight.green .day span { background-color: var(--gColorTheme);}
.header .headerRight.green .notification svg path { fill: var(--gColorTheme);}
.header .headerRight.orange .cart .cartCnt span { background-color: var(--oColorTheme); }
.header .headerRight.orange .day span { background-color: var(--oColorTheme);}
.header .headerRight.orange .notification svg path { fill: var(--oColorTheme);}

.header .headerRight.red .cartBox span { background-color: var(--rColorTheme);}
.header .headerRight.green .cartBox span { background-color: var(--gColorTheme);}
.header .headerRight.orange .cartBox span { background-color: var(--oColorTheme);}

.header .headerRight .notification span span.NotificationCount { position: absolute; border:0 none; width:20px; height:20px; color:var(--white); font-size:10px; font-weight:600; top:-8px; right:0; background-color:var(--primaryColor); }
.header .headerRight.red .notification span span.NotificationCount { background-color: var(--rColorTheme); }
.header .headerRight.green .notification span span.NotificationCount { background-color: var(--gColorTheme); }
.header .headerRight.orange .notification span span.NotificationCount { background-color: var(--oColorTheme);}

.offcanvas { z-index: 2500;}
.offcanvas.offcanvas-start { width: 265px;}
.offcanvas .logoBx { width: 100%; height: 70px; float: left;  padding: 18px 20px; text-align: center; background-color: #f8f8f8;}
.offcanvas .logoBx img { height: 34px;}

.nav { width: 265px; float: left; padding:0 0 20px 0; height: calc(100% - 75px); overflow-y: scroll; }
.slide-menu .nav { position: relative;}
.slide-menu .nav { padding: 20px 20px 20px 10px; opacity: 0; transition: visibility 0s linear 100ms, opacity .3s;}
.nav { visibility: visible; opacity: 1; transition: visibility 0s linear 0ms, opacity .3s;}
.nav ul.accordionMenu { width: 100%; float: left;}
.nav ul.accordionMenu li { width: 100%; float: left; padding: 3px 0;}
.nav ul.accordionMenu li a { display: flex; align-items: center; padding: 8px 12px; border-radius: 5px; font-size: var(--Fonts-size-14); font-weight: 400; letter-spacing: normal; color: var(--lightColor); text-transform: uppercase; letter-spacing: 1px; background-color: transparent;}
.nav ul.accordionMenu li a:hover { background-color: var(--primaryColor); color: var(--white);}
.nav ul.accordionMenu li a.active { background-color: var(--primaryColor); color: var(--primaryColor); color: var(--white); font-weight: 600;}
.nav ul.accordionMenu li a span { padding-left: 12px; visibility: visible; opacity: 1; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; transition: all 600ms; -moz-transition: all 600ms; -webkit-transition: all 600ms;}
.nav ul.accordionMenu li a svg path { stroke: #939394; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.nav ul.accordionMenu li a:hover svg path { stroke: var(--white);}
.nav ul.accordionMenu li a.active svg path { stroke: var(--white);}
.nav ul.accordionMenu li a.acclink { position: relative;}
.nav ul.accordionMenu li a.acclink::before { content: "\f105"; font-family: FontAwesome; font-size: 20px; text-rendering: auto; position: absolute; right: 15px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.nav ul.accordionMenu li a.acclink.active::before { rotate: -90deg;}
.nav ul.accordionMenu li .sub-menu { width: 100%; float: left; margin: 10px 10px 10px 10px;}
.nav ul.accordionMenu li .sub-menu li { width: 100%; float: left;}
.nav ul.accordionMenu li .sub-menu li a { padding: 2px 5px 2px 35px; border-radius: 0; font-size: var(--Fonts-size); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--textColorLight); background-color: transparent; position: relative;}
.nav ul.accordionMenu li .sub-menu li a::before { content: ""; width: 6px; height: 6px; background-color: var(--textColorLight); border-radius: 20px; position: absolute; left: 8px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.nav ul.accordionMenu li .sub-menu li a:hover,
.nav ul.accordionMenu li .sub-menu li a.active { color: var(--white);}
.nav ul.accordionMenu li .sub-menu li a:hover::before,
.nav ul.accordionMenu li .sub-menu li a.active::before { background-color: var(--primaryColor);}
.slide-menu .nav ul.accordionMenu li a span { visibility: hidden; opacity: 0; transition: all 600ms; -moz-transition: all 600ms; -webkit-transition: all 600ms;}
.nav .accordion-flush { width: 100%; display: flex; flex-wrap: wrap; align-content: baseline;}
.nav .accordion-item { width: 100%; float: left; margin-bottom: 0px;}
.nav .accordion-item a.acclink { display: flex; align-items: center; padding: 10px 14px; font-size: var(--Fonts-size-14); font-weight: 400; letter-spacing: normal; color: var(--titColor); text-transform: capitalize; letter-spacing: 1px; background-color: transparent ; border-right: 3px solid transparent;}
.nav .accordion-item a.acclink span { padding-left: 12px; visibility: visible; opacity: 1; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.nav .accordion-item a.acclink svg path { stroke: #939394; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.nav .accordion-item a.acclink.active,
.nav .accordion-item a.acclink:hover { background-color: #F0F5F7; color: var(--primaryColor) ;  border-right: 3px solid var(--primaryColor);}
.nav .accordion-item a.acclink.active { font-weight: 600;}
.nav .accordion-item a.acclink:hover svg path { stroke: var(--white);}
.nav .accordion-item a.acclink.active svg path { stroke: var(--white);}
.nav .accordion-item .accordion-collapse { width: 100%; float: left;}
.nav .accordion-item .sub-menu { width: 100%; float: left; padding: 4px 10px 10px 10px;}
.nav .accordion-item .sub-menu .sub-menu { margin: 4px 0 10px 0;}
.nav .accordion-item .sub-menu li { width: 100%; float: left;}
.nav .accordion-item .sub-menu li a { display: block; font-size: var(--Fonts-size-14); color: var(--textColor); padding: 6px 5px 6px 35px; border-radius: 0; font-weight: 400; text-transform: none; letter-spacing: 0;  background-color: transparent; position: relative;}
.nav .accordion-item .sub-menu li a.acclink:hover { background-color: transparent !important; border-color: transparent;}
.nav .accordion-item .sub-menu li a::before { content: ""; width: 6px; height: 6px; background-color: var(--textColorLight); border-radius: 20px; position: absolute; left: 8px; top: 18px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.nav .accordion-item .sub-menu .sub-menu li a::before { width: 6px; height: 6px; background-color: transparent !important; border: 1px solid var(--textColor); left: 16px;}
.nav .accordion-item .sub-menu li a:hover,
.nav .accordion-item .sub-menu li a.active { color: var(--primaryColor); background-color: transparent; border-color: transparent;}
.nav .accordion-item .sub-menu li a:hover::before,
.nav .accordion-item .sub-menu li a.active::before { background-color: var(--primaryColor);}
.nav .accordion-flush .accordion-flush a.acclink { position: relative;}
.nav .subCntMenu a { position: relative;}
.nav .subCntMenu a.acclink::before { rotate: 0deg; content: "\F229"; font-family: "bootstrap-icons"; line-height: normal; position: absolute; right: 10px; top: 16px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.nav .subCntMenu a.acclink.collapsed::before { rotate: -90deg;}
.nav .sub-menu .accordion-item a.acclink:hover { background-color: transparent;}
.nav .sub-menu .accordion-item a.acclink { position: relative;}
.nav .sub-menu .accordion-item a.acclink::after { content: "-"; line-height: normal; position: absolute; right: 4px; top: 7px;}
.nav .sub-menu .accordion-item a.acclink.collapsed::after { content: "+";}

.mainMenuTab { width: 100%; display: flex;}
.mainMenuTab li { width: calc(100% / 3); text-align: center;}
.mainMenuTab li a { display: block; padding: 12px; font-weight: 500; letter-spacing: 0.5px; color: var(--secondaryColor); text-transform: uppercase; border-bottom: 2px solid var(--borderColorInput);}
.mainMenuTab li a:hover { border-color: var(--primaryColor);}
.mainMenuTab li.r-tabs-state-active a { color: var(--primaryColor); border-color: var(--primaryColor);}

/* Tabs */
.nav.nav-tabs { width: 100%; float: none; padding: inherit; height: auto; overflow-y: inherit; position: relative; border-bottom: 0px solid var(--borderColorInput); display: flex; padding: 0;}
.nav.nav-tabs li { width: auto; margin-bottom: -1px;}
.nav.nav-tabs li button { display: block; padding: 8px 20px; font-weight: 500; letter-spacing: 0.5px; color: var(--secondaryColor); border: 0 none;}
.nav.nav-tabs li button:hover { border-color: var(--primaryColor); color:var(--primaryColor);}
.nav.nav-tabs li button.active { border:1px solid var(--borderColor); border-bottom-color:var(--white); color: var(--primaryColor); background-color: var(--white); z-index: 1; position: relative;}
.slide-menu .nav.nav-tabs { opacity: 1;}

.tab-content div:first-child.active .card { border-top-left-radius: 0; }

.modal-title { font-size: 18px; font-weight: 600; }


/* Login Page */
.loginPage { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; gap: 20px; background: url('../images/login-bg.svg') transparent; background-size: 100% auto;}
.loginPage .formBox { width: 100%; max-width: 340px; background-color: var(--white); box-shadow: 0px 2px 30px #ccc6; display: flex; flex-wrap: wrap; padding:20px 15px;}
.loginPage .formBox .password-visibility .visibility-icon { top: auto; top: 45px; right: 20px;}
.loginPage a { color: var(--primaryColor);}
.loginPage .vCode input { padding: .45rem .45rem; text-align: center;}

/* Error 404 500 */
.error { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background: url('../images/error-bg.svg') transparent; background-size: auto 100%; background-position: 0 400px; background-repeat: no-repeat; padding: 0 30px;}
.error .errorImg { width: 400px; position: absolute; left: 20px; bottom: 40px;}
.error .errorCnt { width: 100%; max-width: 810px; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 20px;}
.error .errorCnt .oops { font-size: var(--Fonts-size-22); font-weight: 600; color: var(--primaryColor);}
.error .errorCnt .errorTag { font-size: 262px; font-weight: 600; color: var(--secondaryColor); line-height: 240px;}
.error .errorCnt .errorMsg { font-size: var(--Fonts-size-22); font-weight: 300; padding-bottom: 10px;}

/* Table */
/* .table-scroll { display: flex; flex-wrap: wrap; overflow-x: scroll;} */

table tr th { background-color: var(--bodyColor); font-size: var(--Fonts-size-14); text-transform: capitalize; font-weight: 600; padding: 8px 20px; letter-spacing: 0.4px;}
table tr td { border-bottom: 1px solid var(--borderColor); padding: 8px 20px; color: var(--textColor); font-size: var(--Fonts-size-14);}
table tr.lastTr td { border-bottom: 0 none;}
table tr:last-child td { border-bottom: 0 none;}
table tr td span.btn-sm { font-size: var(--Fonts-size-12); text-transform: uppercase; font-weight: 500; letter-spacing: 0.5px; cursor: auto;}
table tr td::before { content: "" attr(data-label) ""; position: absolute; left: 10px; top: 5px; font-size: var(--Fonts-size-12); font-weight: 500; color: var(--textColorLight); letter-spacing: 0.5px; text-transform: uppercase; display: none;}
table tr td.actionBoxTbl a { display: inline-block; margin: 0 5px; font-size: 16px;}
table tr td.profileBoxTbl label { padding-left: 10px;}
table tr td.profileBoxTbl img { width: 34px; height: 34px; object-fit: cover; border-radius: 100px;}

table tr td .tblAction { display: flex; gap: 5px;}
table tr td .tblAction a:not([href]):not([class]),
table tr td .tblAction a { width: 30px; height: 30px; display:flex; justify-content: center; align-items: center; background-color:var(--bodyColor); color: var(--primaryColor); border-radius: 5px;}
table tr td .tblAction a:not([href]):not([class]):hover,
table tr td .tblAction a:hover { background-color:var(--primaryColor); color: var(--bodyColor);}

table tr td .tblAction .dropdown-menu { padding: 0;}
table tr td .tblAction .dropdown-item { width: auto; height: auto; text-align: left; background: none; justify-content: left; border-radius: 0; padding: 6px 18px; font-size: var(--Fonts-size-14); border-bottom: 1px solid #ccc; color: var(--titleColor);}
table tr td .tblAction li:last-child .dropdown-item { border-bottom: 0 none;}
table tr td .tblAction .dropdown-item:hover { background-color: #f5f5f5; color: var(--primaryColor);}

a.actionBtn:not([href]):not([class]),
a.actionBtn { width: 30px; height: 30px; display:flex; justify-content: center; align-items: center; background-color:var(--bodyColor); color: var(--primaryColor); border-radius: 5px;}
a.actionBtn:not([href]):not([class]):hover,
a.actionBtn:hover { background-color:var(--primaryColor); color: var(--bodyColor);}


/* Pagination */
.pagination { display: flex; gap: 6px;}
.pagination li:first-child a,
.pagination li:last-child a { border: 0 none; font-size: 24px;}
.pagination li.disabled a { background-color: transparent; opacity: 0.6;}
.pagination li a { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; background-color: #ffffff; color: var(--titleColor); border-radius: 5px; font-weight: 500;}
.pagination li a.active,
.pagination li.active a,
.pagination li a:hover { background-color: var(--primaryColor); color: var(--white);}
.pagination li.page a { background-color: transparent;}

.page-size .form-select { width: auto; display: inline-block; margin-right: 10px; padding: 5px 35px 5px 10px;}

/* Popup Start */
.popupBox { width: 100%; height: 100%; position: fixed; z-index: 999999; top: 0;}
.popupBox.scroll { position: absolute;}
.popupBox .lightBg { width: 100%; height: 100%; position: fixed; background: #000d6e; top: 0; left: 0; z-index: 99999; opacity: 0.4;}
.popupBox .popupBg { background: #fff; border-radius: 2px; position: absolute; left: 50%; top: 150px; z-index: 999999; border-radius: 10px;}
.popupBox .popupBg.popupCnter { position: fixed;}
.popupBox .popupBg.x-large { max-width: 1024px; width: 94%; margin-left: -512px;}
.popupBox .popupBg.large { max-width: 740px; width: 94%; margin-left: -370px;}
.popupBox .popupBg.medium { max-width: 610px; width: 94%; margin-left: -305px;}
.popupBox .popupBg.small { width: 94%; max-width: 450px; margin-left: -225px;}
.popupBox .popupBg.x-small { width: 94%; max-width: 300px; margin-left: -150px;}
.popupBox .popupTit { width: 100%; float: left; border-bottom: 1px solid #eee; padding: 15px; position: relative; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.popupBox .popupTit h3 { margin: 0; font-weight: 700; font-size: var(--Fonts-size-20);}
.popupBox .popupTit .popupClick { position: absolute; top: 17px; right: 10px;}
.popupBox .popupTit .popupClose { position: absolute; top: 17px; right: 10px; cursor: pointer;}
.popupBox .popupCnt { width: 100%; float: left; padding: 15px;}
.popupBox .popupCnt li { position: relative;}
.popupBox .popupCnt li .btn { margin: 0 5px;}

/* Card Search Box */
.searchBox { position: relative;}
.searchBox input { font-size: var(--Fonts-size-14); padding-left: 35px; min-width: 250px;}
.searchBox input:focus { border: 1px solid var(--secondaryColor);}
.searchBox button { position: absolute; left: 0; top: 7px; color: var(--textColorLight);}
.searchBox i.bi-search {position: absolute; left: 9px; top: 11px; color:var(--textColorLight);}

.searchBox ::placeholder { font-size: var(--Fonts-size-14);}
.searchBox ::-ms-input-placeholder { font-size: var(--Fonts-size-14);}
.filterBox .form-select,
.filterBox .form-control { padding: .187rem 2.45rem .187rem .85rem;}

/***************************************/

/* Dashboard */
.statisticsBox { align-items: center;}
.statisticsBox .statistics { gap: 5px;}
.statisticsBox label { font-size: var(--Fonts-size-14); font-weight: 500; letter-spacing: 0.5px; color: var(--secondaryColor);}
.statisticsBox span { font-size: var(--Fonts-size-24); font-weight: 600; color: var(--secondaryColor);}
.statisticsBox .iconBox { width: 52px; height: 52px; border-radius: 100%; background-color: #4F46E520; display: flex; align-items: center; justify-content: center;}
.statisticsBox .iconBox img { width: 32px;}
.statisticsOne .iconBox { background-color: #EBF9F6;}
.statisticsTwo .iconBox { background-color: #FFF3E3;}
.statisticsThree .iconBox { background-color: #E7F5FD;}
.statisticsFour .iconBox { background-color: #FCE9F2;}

.currentOfferCard { height: 100%;}
.offerBanner img { max-height: 300px; height: 100%;}
.offerBanner .carousel-item { text-align: center;}
.innerOfferBanner img { max-height: 550px; height: 100%;}
.promoOfferBanner .carousel-item img { max-width: 700px; width: 100%; height: 550px; object-fit: contain;}
 
.currentOfferCard .carousel,
.currentOfferCard .carousel-inner,
.currentOfferCard .carousel-item { height: 100%;}
.currentOfferCard a { height: 100%; display: flex; justify-content: center; align-items: center;}

.nav::-webkit-scrollbar { display: none;}

.scroller { --scrollbar-color-track: #181824; --scrollbar-color-thumb: #da2e2a;}
.scroller { scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);}

.scrollerNone { -ms-overflow-style: none; scrollbar-width: none;}

.icon-14 { font-size: 14px;}
.icon-16 { font-size: 16px;}
.icon-18 { font-size: 18px;}
.icon-22 { font-size: 22px;}
.icon-32 { font-size: 32px;}

.productPage { display: flex; flex-wrap: wrap; justify-content: space-between;}
.productPage .rightCol { max-width: 320px; width: 100%;}
.productPage .leftCol { width: calc(100% - 340px); margin-right: 20px;} 

.productSearch select { width: 155px;}

table.productListTbl tr td.imgTD { width:160px;}
/*table.productListTbl tr td.imgTD a { width:114px; text-align:center;}*/

table.productListTbl tr td.imgTD img {height: 112px; object-fit: contain;}
table.productListTbl tr td.qtyTD { width: 130px; padding-right: 0;}
table.productListTbl tr td.btnTD { width: 100px;}
table.productListTbl tr td.disTD { width: 160px; padding-right: 0;}
#horizontalLayout table.productListTbl.productGridView thead { position:sticky; top:112px; z-index:9; }
#verticalLayout table.productListTbl.productGridView thead { position:sticky; top:70px; z-index:9; }

.productOrderDtl .orderCartDtl::-webkit-scrollbar { display: none;}
.productOrderDtl .orderCartDtl { width: 100%; max-height: 560px; overflow-y: scroll; overflow-x: hidden; /*-ms-overflow-style: none; scrollbar-width: none;*/}
.productOrderDtl .orderCartDtl ul.product { width: 100%; float: left;}
.productOrderDtl .orderCartDtl ul.product li { width: calc(100% + 30px); float: left; border-bottom: 1px solid #eee; padding: 0px 15px 10px 15px; margin:0px -15px 10px -15px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.productOrderDtl .orderCartDtl ul.product li .productDtl { width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; gap: 5px;}
.productOrderDtl .orderCartDtl ul.product li .productDtl { font-size: var(--Fonts-size-14);}
.productOrderDtl .orderCartDtl ul.product li .productDtl span { font-weight: 500;}
.productOrderDtl .orderCartDtl ul.product li .productDtl div.qtyPrice { display: flex; align-items: center; justify-content: space-between;}
.productOrderDtl .orderCartDtl ul.product li .productDtl div.qtyUpdate { display: flex; align-items: center; gap: 12px;}
.productOrderDtl .orderCartDtl ul.product li .productDtl div.qtyUpdate .btn { width: 30px; height: 30px; font-size: 13px; display: flex; justify-content: center; align-items: center;}
.productOrderDtl .orderCartDtl ul.product li .productDtl div.qtyUpdate input { width: 60px; padding: .25rem; line-height: normal; text-align: center;}

.productPage .rightCol .productOrderDtl .card .card-body { padding:0;}
.productPage .rightCol .productOrderDtl .card .card-body .orderCartDtl { padding:15px; scrollbar-width: thin; scrollbar-color: #f1f1f1;}

.cartPage { display: flex; flex-wrap: wrap; justify-content: space-between;}
.cartPage .rightCol { max-width: 520px; width: 100%;}
.cartPage .leftCol { width: calc(100% - 540px); margin-right: 20px;}

.cartPage .cartDtlInfo .priceInfo { background-color: #FAFEFF; width: calc(100% + 30px); margin: -15px 0 -15px -15px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; padding: 10px 15px; display: flex;}
.cartPage .cartDtlInfo .priceInfo ul { width: 100%; display: flex; flex-wrap: wrap;}
.cartPage .cartDtlInfo .priceInfo ul li { width: 100%; display: flex; justify-content: space-between; padding: 6px 0;}
.cartPage .cartDtlInfo .priceInfo ul li span { font-weight: 600;}
.cartPage .cartDtlInfo .priceInfo ul li:last-child { border-top: 1px dashed #000; margin-top: 8px; padding-top: 8px;}
.cartPage .cartDtlInfo .priceInfo ul li:last-child span { font-size: 20px;}

.shippingDtlSelect {  width:100%; float:left;}
.delivery-custom-radio {  width:100%; float:left;}
.delivery-custom-radio input { display: none;}
.delivery-radio-btn { margin: 12px 0; width: calc(100% - 0px); border: 2px solid #eee; display: inline-block; border-radius: 10px; position: relative; text-align: center; box-shadow: 0 0 20px #c3c3c367; cursor: pointer;}
.delivery-radio-btn > i { color: #ffffff; background-color: #33738D; font-size: 20px; position: absolute; top: -15px; left: 50%; transform: translateX(-50%) scale(2); border-radius: 50px; padding: 3px; transition: 0.5s; pointer-events: none; opacity: 0;}
.delivery-radio-btn .hobbies-icon { width: 100%; height: 100%; }

.delivery-radio-btn .hobbies-icon i { color: #33738D; line-height: 80px; font-size: 60px;}
.delivery-radio-btn .hobbies-icon h3 { color: #555; font-size: 18px; font-weight: 300; text-transform: uppercase; letter-spacing:1px;}
.delivery-custom-radio input:checked + .delivery-radio-btn { border: 2px dashed #33738D;}
.delivery-custom-radio input:checked + .delivery-radio-btn > i  { opacity: 1; transform: translateX(-50%) scale(1);}
.shippingDtlSelect .cntBoxM { width:100%; display:flex; flex-wrap:wrap; padding:10px;}
.shippingDtlSelect .cntBoxR { width:100%; display:flex; flex-wrap:wrap; padding:10px; align-items:center;}
.shippingDtlSelect .cntBoxR .iconBox { width:54px; }
.shippingDtlSelect .cntBoxR .titleBoxS { width:calc(100% - 54px); padding-left:30px; text-align:left; display: flex; flex-direction: column; gap: 5px;}
.shippingDtlSelect .cntBoxR .titleBoxS label{ font-weight:600; font-size:var(--Fonts-size-m); font-family:var(--tFonts)}

.emptyPage { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.emptyPage img { margin-bottom: 15px; margin-left: -30px;}
.emptyPage p { font-size: var(--Fonts-size-20);}

 .tracking-list { margin: -16px 0; }
 .tracking-item { border-left: 4px solid #00ba0d; position: relative; padding: 2rem 1.5rem 0.5rem 2.5rem; font-size: 0.9rem; margin-left: 3rem; min-height: 5rem; }
 .tracking-item:last-child { padding-bottom: 4rem; }
 .tracking-item .tracking-date {margin-bottom: 0.5rem; }
 .tracking-item .tracking-date span { color: #888; font-size: 85%; padding-left: 0.4rem;}
 .tracking-item .tracking-content { padding: 0.5rem 0.8rem; background-color: #f4f4f4; border-radius: 0.5rem; }
 .tracking-item .tracking-content span { display: block; color: var(--textColor); font-size: var(--Fonts-size-14); font-weight: 500;}
 .tracking-item .tracking-content p { display: block; color: var(--textColorLight); font-size: var(--Fonts-size-14); font-weight: 400; margin-bottom: 0;}
 .tracking-item .tracking-icon { position: absolute; left: -0.7rem; width: 1.1rem; height: 1.1rem; text-align: center; border-radius: 50%; font-size: 1.1rem; background-color: #fff; color: #fff; }
 .tracking-item-pending { border-left: 4px solid #d6d6d6; position: relative; padding: 2rem 1.5rem 0.5rem 2.5rem; font-size: 0.9rem; margin-left: 3rem; min-height: 5rem; }
 .tracking-item-pending:last-child { padding-bottom: 3rem;}
 .tracking-item-pending .tracking-date { margin-bottom: 0.5rem;}
 .tracking-item-pending .tracking-date span { color: #888; font-size: 85%; padding-left: 0.4rem; }
 .tracking-item-pending .tracking-content { padding: 0.5rem 0.8rem; background-color: #f4f4f4; border-radius: 0.5rem; }
 .tracking-item-pending .tracking-content span { display: block; font-size: var(--Fonts-size-14); font-weight: 500;}
 .tracking-item-pending .tracking-content p { display: block; color: var(--textColorLight); font-size: var(--Fonts-size-14); font-weight: 400; margin-bottom: 0;}
 .tracking-item-pending .tracking-icon { line-height: 2.6rem; position: absolute; left: -0.7rem; width: 1.1rem; height: 1.1rem; text-align: center; border-radius: 50%; font-size: 1.1rem; color: #d6d6d6; }
 .tracking-item-pending .tracking-content { font-weight: 600; font-size: 17px; }
 .tracking-item .tracking-icon.status-current { width: 1.9rem; height: 1.9rem; left: -1.1rem; }
 .tracking-item .tracking-icon.status-intransit { color: #00ba0d; font-size: 0.6rem; }
 .tracking-item .tracking-icon.status-current { color: #00ba0d; font-size: 0.6rem; }
 @media (min-width: 992px) {
	.tracking-item { margin-left: 10rem; }
	.tracking-item .tracking-date { position: absolute; left: -10rem; width: 7.5rem; text-align: right;}
	.tracking-item .tracking-date span { display: block; }
	.tracking-item .tracking-date i { color: #888; }
	.tracking-item .tracking-content { padding: 0; background-color: transparent;}
	.tracking-item-pending { margin-left: 10rem;}
	.tracking-item-pending .tracking-date { position: absolute; left: -10rem; width: 7.5rem; text-align: right; }
	.tracking-item-pending .tracking-date span { display: block; }
	.tracking-item-pending .tracking-content { padding: 0; background-color: transparent;}
 }
 .tracking-item .tracking-content { font-weight: 600; font-size: 17px; }
 .blinker { border: 7px solid #e9f8ea; animation: blink 1s; animation-iteration-count: infinite; }
 @keyframes blink { 50% { border-color:#fff ; }  }
 .tracking-item .tracking-date i,
 .tracking-item .tracking-date-pending i { color: #888;}

 table tr td.imgTD img { height: 42px; object-fit: contain;}

.noRecordFound { padding: 60px 0;}
.noRecordFound .iconBox { font-size: 92px; margin-bottom: 20px;}
.noRecordFound .titBox { font-size:var(--Fonts-size-22); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 10px;}
.noRecordFound .titBox span { font-weight: 600; padding:4px 12px; border-radius: 5px;}
.noRecordFound .textBox { margin-bottom: 25px;}
.noRecordFound .btnBox { margin-top: 5px;}

.twitter-typeahead { display:block !important;}

.changePasswordForm .form-control { padding-right: 55px; }
.changePasswordForm .visibility-icon {position: absolute;/* bottom: 1px; */right: 13px;top: 34px;background-color: var(--bs-border-color);height: 39px;width: 39px;font-size: var(--Fonts-size-18);display: flex;justify-content: center;align-items: center;border-top-right-radius: 4px;border-bottom-right-radius: 4px;}
.noRecord { height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px;}
.noRecord i { font-size: var(--Fonts-size-32); color: var(--pColorTheme); background-color: #33738D10; width: 72px; height: 72px; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
.noRecord span { font-size: var(--Fonts-size-20); font-weight: 500;}

.password-visibility { width: 100%; display: block; position: relative;}
.password-visibility .visibility-icon { font-size: 18px; position: absolute; right: 20px; top: 45px;}

.timeShlot { max-height: 300px; overflow-y: scroll; overflow-x: hidden;}

input.switch[type=checkbox] { height: 0; width: 0; visibility: hidden;}
label.switch { cursor: pointer; text-indent: -9999px; width: 50px; height: 25px; background: #D4DEE1; display: block; border-radius: 100px; position: relative;}
label.switch:after { content: ''; position: absolute; top: 5px; left: 5px; width: 15px; height: 15px; background: #fff; border-radius: 90px; transition: 0.3s;}
input.switch:checked + label.switch { background: var(--primaryColor);}
input.switch:checked + label.switch:after { left: calc(100% - 5px); transform: translateX(-100%); }
label.switch:active:after { width: 25px;}

.managerSettingsTbl tr td:first-child label { margin-top: -12px;}
.managerSettingsTbl tr td:first-child { width:55px; padding-right:0;}

.contactInfo .statisticsBox label { color: var(--textColor);}
.contactInfo .statisticsBox span { font-size: var(--Fonts-size-18);}

.editImages { max-width: 180px; max-height: 210px; position: relative;}
.editImages .edit-icon { position: absolute; top: -15px;  right: -15px; color: #fff !important; background-color: var(--primaryColor); padding: 10px; border-radius: 50%; border: 1px solid double; text-decoration: none;}
.editImages img { width: 240px; height: 150px; object-fit: cover;}

.cartDtlPopup .productName  { font-weight:500; color:var(--primaryColor);}
.cartDtlPopup .productInfo { display: flex; flex-wrap:wrap; color: var(--textColorLight); flex-direction:row;}
.cartDtlPopup .productInfo div { width:100%; border-bottom:1px solid var(--borderColor); display:flex; padding:0 0 6px 0; margin-bottom:6px;}
.cartDtlPopup .productInfo label { width:110px; font-weight:400; font-size:var(--Fonts-size-14);}
.cartDtlPopup .productInfo span {  font-weight:500; color:var(--textColor);}
.cartDtlPopup .productPrice ul { display: block;}
.cartDtlPopup .productPrice ul li { display: flex; justify-content: space-between; font-weight: 600; padding: 4px 0;}
.cartDtlPopup .productPrice ul li.discount { font-weight: 400; color: var(--textColorLight);}
.cartDtlPopup .productPrice ul li.total { font-weight: 700; padding-top: 10px; margin-top: 10px; border-top: 1px solid #f1f1f1;}
.cartDtlPopup .productPopupImg { max-height: 180px; object-fit: contain;}
.cartDtlPopup .productImgPopSlid { max-width: 195px; margin: 0 auto; position: relative;}
.cartDtlPopup .imagesBox:has(.ribbon) > .productImgPopSlid { border: 1px solid var(--borderColor);}

.orderpickupslotsPage .modal-backdrop.fade.show + .modal-backdrop.fade.show { z-index: 1055;}
#timeslote .modal {z-index:1056;}

.customerSelectionDiv { max-height: 200px; overflow-y: auto; position: absolute; width: calc(100% - 32px); background: var(--white); z-index:999;}
.customerSelectionDiv div{display:flex;width:100%; padding:5px 15px; background:#fff; border-bottom:1px solid var(--borderColor); border-radius:0; cursor:pointer}
.customerSelectionDiv div:hover {background:var(--primaryColor); color:#fff;}

.signUpProcess { margin-top: 30px; margin-bottom: 0 !important; }
.countProgressBar { display:flex; text-align:center;}
.countProgressBar ul { width: 100%; display: flex; counter-reset: step;}
.countProgressBar ul li { width: calc(100% / 5); color: #0093B2; text-transform: uppercase; position: relative; margin-bottom: 0;}
.countProgressBar ul li:before { content: counter(step); counter-increment: step; width: 32px; height:32px; border-radius: 100%; background:#ddd; margin: 0 auto; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; color:var(--textColor);}
.countProgressBar ul li:after { content: ''; width: 100%; height: 2px; background:#ddd; position: absolute; left: -50%; top: 15px; z-index: 0;}
.countProgressBar ul li:first-child:after { content: none;}
.countProgressBar ul li.active:before, ul li.active:after{background:var(--primaryColor); color:var(--white);}
.passwordCountProgressBar ul li { width: calc(100% / 3);}

.adminLoginBtn { position:fixed; top:20px; right:20px;}

.notificationTbl tr.notificationList td { background: transparent;}
.notificationTbl tr.notificationList:hover td { background: var(--bodyColor);}
.notificationTbl tr.notificationList td:nth-child(1) i { font-size: 10px; color: var(--gColorTheme);}
.notificationTbl tr.notificationList td:nth-child(1) { width: 70px; text-align: center;}
.notificationTbl tr.notificationList td:nth-child(2) { width: 220px;}
.notificationTbl tr.notificationList td:nth-child(3) { color: var(--primaryColor); font-weight: 500;}
.notificationTbl tr.notificationList.read td:nth-child(1) i { font-size: 10px; color:var(--textColorLight); opacity: 0.7;}
.notificationTbl tr.notificationList.read td:nth-child(2),
.notificationTbl tr.notificationList.read td:nth-child(3),
.notificationTbl tr.notificationList.read td:nth-child(4) { color: var(--textColorLight); font-weight: 400;}
.notificationTbl tr.notificationList.read td:nth-child(5) { width: 120px;}

.productOrderDtl .orderCartDtl ul.product li .productDtl .productDtlTit { display:flex; justify-content:space-between; gap:10px;}
.productOrderDtl .orderCartDtl ul.product li .productDtl .productDtlTit .remove-button { margin-top:7px;}

.layoutimg { -ms-interpolation-mode: bicubic; border: 0; max-width: 100%; height: 20px;}
.customerLoginBtn { position:fixed; top:20px; right:20px;}

.btn-delete { width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background-color: var(--bodyColor); color: var(--primaryColor); border-radius: 5px;}
.searchBox button.btn-x { position: absolute; right: 6px; top: 7px; left: auto; padding: 0; margin: 0; line-height: 0; border: 0 none;background: no-repeat;font-size: 26px;color: var(--titleColor);}
.card-header .searchBox .btn-x { padding: 0; margin: 0; line-height: 0; border: 0 none;background: no-repeat;font-size: 26px;color: var(--titleColor);}

.overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center;align-items: center; }
.WarehouseMain { display: flex; flex-direction: row-reverse; background-image: url("../images/login-bg.webp"); background-size: cover; background-repeat: no-repeat;}
.WarehouseMain .leftCol { width: calc(100% - 540px); background-color: #33748d9c;}
.WarehouseMain .rightCol { width: 540px; background-color: var(--white); padding: 40px; display: flex; flex-direction: column; justify-content: space-between;}
.WarehouseMain .headerBox { padding-top: 10px; display: flex; flex-direction: column; gap: 25px;}
.WarehouseMain .formBox { background-color: var(--bodyColor); padding: 20px; border-radius: 8px; display: flex; flex-wrap: wrap;}
.WarehouseMain .searchBox .searchBtn { background-color: transparent; border: 0 none; outline: none; font-size: large; padding: 10px 2px 10px 12px; top: 0; }
.WarehouseMain .footerBox a { font-weight: 500;}
.WarehouseMain .footerBox ul { display: flex; justify-content: center; gap: 20px; margin: 8px 0;}
h2.loginTitle { font-size: var(--Fonts-size-22); color: var(--primaryColor); font-weight: 600;}

.WarehouseMain.sliderPage { background: none;}
.WarehouseMain.sliderPage .carousel { width: 100%; height: 100%;}
.WarehouseMain.sliderPage .carousel-inner { width: 100%; height: 100%;}
.WarehouseMain.sliderPage .carousel-item.active { display: flex;}
.WarehouseMain.sliderPage .carousel-item { width: 100%; height: 100%;  justify-content: center; align-items: center;}
.WarehouseMain.sliderPage .carousel-item img { width: 100%; height: 100%; object-fit: cover;}

/* Driver */
.driverPage.inner-content { padding: 0; height: calc(100% - 58px); }
.driverPage .titleBox {width: 100%; float: left; padding: 15px 20px 15px 20px;}
.driverPage .cntAreaMain { width: 100%; height: calc(100% - 68px); float: left; padding: 0; background-color: #fff; }
.driverPage .cntAreaMain .leftCol { width: 360px; height: 100%; float: left; transition: all 0.5s ease;}
.driverPage .cntAreaMain .rightCol { width: calc(100% -  360px); height: 100%; float: left; position: relative; transition: all 0.5s ease;}
.driverPage .cntAreaMain .rightCol iframe { width:100%; height: 100%;}
.driverPage .cntAreaMain .rightCol #fullMapBtn { position: absolute; right: 10px; top: 10px; z-index:100;}

.driverPage .cntAreaMain.fullMap .leftCol { width: 0px;}
.driverPage .cntAreaMain.fullMap .rightCol { width: 100%;}

.driverPage .cntAreaMain .leftCol .titBox { width:100%; float:left; padding:10px 20px; background:var(--primaryColor); color:white; font-weight:600;}
.driverPage .cntAreaMain .leftCol .stopTitle { margin-top:0px;}

.driverPage .cntAreaMain .leftCol .searchBox { width:100%; float:left; padding:10px 20px; background:var(--bodyColor); position:relative;}
.driverPage .cntAreaMain .leftCol .searchBox button { left: 30px; top: 18px; padding: 0; background: none;}

.driverPage .cntAreaMain .leftCol .cntBox { width:100%; /*  height:calc(100% - 102px); */ height:calc(100vh - 250px); float:left;  padding:0px; /*max-height:235px;*/ overflow-y:scroll;}
.driverPage .cntAreaMain .leftCol .cntBox .mapRouteList { width:100%; float:left;}
.driverPage .cntAreaMain .leftCol .cntBox .mapRouteList li { width:100%; float:left;}
.driverPage .cntAreaMain .leftCol .buildRouteBtn { width:100%; float:left; margin-top:10px; text-align:center;}
.driverPage .cntAreaMain .leftCol .mapRouteList .mapRouteListCnt { width:100%; float:left; display:flex; padding:12px 20px; border-bottom:1px solid #eee; background:#fff;}
.driverPage .cntAreaMain .leftCol .mapRouteList .mapRouteListCnt:hover { background:#f5f5f5;}
.driverPage .cntAreaMain .leftCol .mapRouteListCnt .icon { width:35px; display: flex; justify-content: flex-start; align-items: center;}
.driverPage .cntAreaMain .leftCol .mapRouteListCnt .icon i { color: var(--primaryColor);}
.driverPage .cntAreaMain .leftCol .mapRouteListCnt .action { /*width:65px; */display:flex; justify-content:space-around;}
.driverPage .cntAreaMain .leftCol .mapRouteListCnt .routName { width:calc(100% - 100px); padding:0 8px 0 0;}
.driverPage .cntAreaMain .leftCol .cntBox::-webkit-scrollbar { width: 10px;}
.driverPage .cntAreaMain .leftCol .cntBox::-webkit-scrollbar-track { background: #f5f5f5;}
.driverPage .cntAreaMain .leftCol .cntBox::-webkit-scrollbar-thumb { background: #ccc;}
.driverPage .cntAreaMain .leftCol .cntBox::-webkit-scrollbar-thumb:hover { background: #999;}

.driverPage .cntAreaMain .action { display: flex; gap: 5px;}
.driverPage .cntAreaMain .action a:not([href]):not([class]),
.driverPage .cntAreaMain .action a { width: 30px; height: 30px; display:flex; justify-content: center; align-items: center; background-color:var(--bodyColor); color: var(--primaryColor); border-radius: 5px;}
.driverPage .cntAreaMain .action a:not([href]):not([class]):hover,
.driverPage .cntAreaMain .action a:hover { background-color:var(--primaryColor); color: var(--bodyColor);}

.driverPage .routeDtlListPopup { width:340px; max-height:75%; background-color:white; position:absolute; left:10px; top:110px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; transition: all 0.4s ease-out;z-index: 1000;}
.driverPage .routeDtlListPopup ul { width:100%; float:left;}
.driverPage .routeDtlListPopup ul li { width:100%; float:left; padding:12px 20px; border-bottom:1px solid #eee; background-color:white; display:flex; cursor: move;}
.driverPage .routeDtlListPopup ul li:last-child { border-bottom:0 none;}
.driverPage .routeDtlListPopup ul li span { width:32px; color:var(--textColorLight);}
.driverPage .routeDtlListPopup ul li label { width:255px;}

.driverPage .routeDtlListPopup .titBox { width:100%; float:left; padding:10px 20px; background:var(--primaryColor); color:white; font-weight:600;}
.driverPage .routeDtlListPopup .sortableCnt { width:100%; max-height:60vh; float:left; overflow-y:scroll;}
.driverPage .routeDtlListPopup .sortableCnt::-webkit-scrollbar { width: 10px;}
.driverPage .routeDtlListPopup .sortableCnt::-webkit-scrollbar-track { background: #f5f5f5;}
.driverPage .routeDtlListPopup .sortableCnt::-webkit-scrollbar-thumb { background: #ccc;}
.driverPage .routeDtlListPopup .sortableCnt::-webkit-scrollbar-thumb:hover { background: #999;}

.pac-container { z-index:9999999 !important;}

.adminLabel { position: fixed; top: -1px; left: calc(50% - 45px); z-index: 99999; width: 90px; background-color: var(--primaryColor); color: var(--white); font-size: var(--Fonts-size-12); font-weight: 500; text-transform: uppercase; line-height: normal; padding: 2px 5px; text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.managerLogin {  background: rgb(93,15,207); background: linear-gradient(55deg, rgba(93,15,207,1) 0%, rgba(204,3,3,1) 100%);  }
.salesLogin { background: rgb(0,134,237); background: linear-gradient(55deg, rgba(0,134,237,1) 0%, rgba(0,239,255,1) 100%); }
.driverLogin { background: rgb(4,6,138); background: linear-gradient(55deg, rgba(4,6,138,1) 0%, rgba(145,0,245,1) 100%); }

.progress-container { width: calc(100% + 30px); margin: 0 -15px; padding-top: 45px; }
.status-steps { display: flex; justify-content: space-between; flex-wrap: wrap; }
.step { width: 25%; text-align: center; position: relative; padding: 0 15px; }
.step .step-number { width: calc(100% + 30px); height: 4px; background-color: #d6d6d6;  margin: 0 auto 15px -15px; position: relative; }
.step .step-number::before { content: ""; width: 18px; height: 18px; border-radius: 100px; position: absolute; top: -7px; left: calc(50% - 9px); background-color: #d6d6d6;}
.step.completed .step-number::before { background-color: #00ba0d;}
.step .step-number i { position: relative; top: -40px;}
.step.completed .step-number {color: #00ba0d; background-color: #00ba0d;}
.step .step-label { margin-top: 10px; font-weight: 600; font-size: 17px; color: var(--titleColor); }
.step.completed .step-label {color: var(--titleColor);}
.step span { display: block; color: var(--textColor); font-size: var(--Fonts-size-14); font-weight: 500;}
.step p { display: block; color: var(--textColorLight); font-size: var(--Fonts-size-14); font-weight: 400; margin-bottom: 0;}

.notFound { max-width: 480px; width: 100%; padding: 15px; display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; text-align: center; color: var(--secondaryColor);}
.notFound .opps { flex-flow: 1; font-size:32px; font-weight: 300; text-transform: uppercase;}
.notFound .eNumber { font-size:172px; font-weight: 600; line-height: 200px; color: var(--primaryColor);}
.notFound .eMessage { font-size:30px; font-weight: 500; line-height: normal; }
.notFound .eText { font-weight: 500; line-height: normal; padding: 25px 0; color: var(--textColor);}

.itemSubclassDiscountInfo { width:100%; display:flex; flex-wrap:wrap;}
.itemSubclassDiscountInfo li { width:50%; display:flex; flex-wrap:wrap; border-bottom:1px solid #eee; padding:10px 10px 10px 20px;}
.itemSubclassDiscountInfo li:nth-child(odd) { background-color:#f5f5f555}
.itemSubclassDiscountInfo li label { width:100%; font-size:var(--Fonts-size-14); font-weight:400; margin-bottom:5px; color:var(--textColor);}
.itemSubclassDiscountInfo li span { width:60%; font-weight:500 }
.itemSubclassDiscountInfo.threeCol li { width:33.33% }
.itemSubclassDiscountInfo.threeCol li label,
.itemSubclassDiscountInfo.threeCol li span { width:100% }

.addPOVendorInfo { width:100%; display:flex; flex-wrap:wrap }
.addPOVendorInfo li { width:25%; padding:8px }
.addPOVendorInfo li div { width:100%; background-color:#f9f9f9; border:1px solid var(--lightGrayColor); padding:10px 16px; border-radius:5px; display:flex; flex-wrap:wrap; flex-direction:column }
.addPOVendorInfo li label { display:block; font-size:var(--Fonts-size-14); color:var(--textColor); margin-bottom:2px }
.addPOVendorInfo li span { font-weight:500 }
.addPOVendorInfo li:last-child { width:50% }
.addPOVendorInfo li.lastLi { width:25% }

/* PO Overview */
.card-banner.customer-overview { width:100%; height:180px; border-top-left-radius:11px; border-top-right-radius:11px; background-image:url("http://192.168.2.158:8889/media/customer-bg-5XWGVBB6.png"); background-position:center center; background-size:cover; background-repeat:no-repeat; position:relative; overflow:hidden; display:flex; flex-wrap:wrap; flex-direction:row; gap:10px; align-items:flex-start; justify-content:flex-end; padding:20px }
.card-banner.customer-overview:before { content:""; width:100%; height:400px; background-color:var(--pColorTheme); position:absolute; left:0; top:0; opacity:.3; z-index:0 }
.card-banner.customer-overview .btn { position:relative; z-index:2 }
.customerOverview .profilePic { width:120px; float:left; margin-top:-40px; position:relative; z-index:2 }
.customerOverview .profilePic img { width:120px; height:120px; border-radius:100%; object-fit:cover }
.customerOverview .customerContactInfo { float:left; }
.customerOverview .customerContactInfo ul { float:left }
.customerOverview .customerContactInfo ul li { float:left; margin-right:30px; display:flex; align-items: center; gap:10px; font-size:18px;}
.customerOverview .customerContactInfo ul li i { color:var(--primaryColor) }
.customerOverview .customerContactInfo ul li:first-child { width:100%; margin-bottom:10px; margin-right:0 }
.customerOverview .customerContactInfo ul li h2 { font-weight:600 }

.customerOverview .addressBox { width:100%; display:flex; margin-bottom:10px }
.customerOverview .addressBox:last-child { margin-bottom:0 }
.customerOverview .addressBox ul { width:100%; display:flex; flex-wrap:wrap }
.customerOverview .addressBox ul li { width:100%; display:block; margin-bottom:5px }
.customerOverview .addressBox ul li label { width:100%; display:block; font-size:var(--Fonts-size-14); color:var(--textColor); margin-bottom:2px }
.customerOverview .addressBox ul li span { width:100%; display:block }
.customerOverview .customerAccountSummary td:last-child { text-align:right }
.customerOverview .customerDue { width:100%; display:flex; flex-wrap:wrap }
.customerOverview .customerDue li { width:20%; display:flex; flex-wrap:wrap; flex-direction:column; padding:0 10px }
.customerOverview .customerDue.poDtlBx li:last-child { width: 40%;}
.customerOverview .customerDue li label { font-size:var(--Fonts-size-14); color:var(--textColor); margin-bottom:2px }

.customerOverview  ul.poDtlBx.poOverview { display:flex;}
.customerOverview  ul.poDtlBx.poOverview li { width:100%; border-bottom:1px solid var(--borderColor); padding-bottom:10px; margin-bottom:10px; display:flex; flex-wrap:wrap; flex-direction:row;}
.customerOverview  ul.poDtlBx.poOverview li:last-child { width:100% !important; border-bottom:0 none; margin-bottom:0 !important; padding-bottom:0;}
.customerOverview  ul.poDtlBx.poOverview li label { width:160px;}
.customerOverview  ul.poDtlBx.poOverview li span { width:auto;}

.clientOrderBody { max-height: 480px; overflow-y: scroll;}
table.clientList tr td.imgTD img { width: 42px; height: 42px; object-fit: contain;}


/*  */
/* Mobile Block Web */
.mobileBlock { display: none; position: fixed; top: 0; left: 0; z-index: 1050; width: 100vw; height: 100vh; justify-content: center; align-items: center;}
.mobileBlock .mobileBlock-body { width: 520px; background-color: var(--white); padding: 30px; position: relative; z-index: 1; border-radius: 10px;}
.mobileBlock .overlay{ background-color: #000; opacity: 0.5; position: fixed; top: 0; left: 0; z-index: 0; width: 100vw; height: 100vh;}
@media only screen and (max-width: 767px) {
    .mobileBlock { display: flex !important;}
}
/*  */

.page-link-btn { width:auto !important; font-size:var(--Fonts-size-14) !important; font-weight:500 !important;}

/* Top Navigation */
#verticalLayout .salesPage .topNav { display:none;}
#horizontalLayout .salesPage .topNav { display:flex;}

.salesPage .contentArea { min-height:auto; }
.salesPage .topNav { width:100%; background:var(--white); border-top:1px solid #eee; display:flex; backdrop-filter: blur(6px); position:sticky; top:70px; z-index:9;}
.salesPage .topNav a { padding:7px 16px; display:flex; align-items:center; gap:10px; background-color:var(--white); color:var(--titleColor);}
.salesPage .topNav a i { color:var(--primaryColor); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.salesPage .topNav a:hover,
.salesPage .topNav a.active { background-color:var(--primaryColor); color:var(--white);}
.salesPage .topNav a:hover i,
.salesPage .topNav a.active i { color:var(--white);}


#verticalLayout .managerPage .topNav { display:none;}
#horizontalLayout .managerPage .topNav { display:flex;}

.managerPage .contentArea { min-height:auto; }
.managerPage:has(.driverPage) .contentArea { min-height:100%; }

.managerPage .topNav { width:100%; background:var(--white); border-top:1px solid #eee; display:flex; backdrop-filter: blur(6px); position:sticky; top:70px; z-index:9;}
.managerPage .topNav a { padding:7px 16px; display:flex; align-items:center; gap:10px; background-color:var(--white); color:var(--titleColor);}
.managerPage .topNav a i { color:var(--primaryColor); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.managerPage .topNav a:hover,
.managerPage .topNav a.active { background-color:var(--primaryColor); color:var(--white);}
.managerPage .topNav a:hover i,
.managerPage .topNav a.active i { color:var(--white);}

.managerPage .topNav .subCntMenu:hover a + .activemenu { display:block;}
.managerPage .topNav .collapse:is(.show) { display: none;}

.managerPage .topNav .subCntMenu { position:relative;}
.managerPage .topNav .subCntMenu .accordion-collapse { width:220px; position:absolute; background:red; box-shadow:0px 3px 5px #34374725}
.managerPage .topNav .accordion-item:has(.accordion-collapse.show) > .acclink { color: var(--white); background-color: var(--primaryColor);}
.managerPage .topNav .accordion-item:has(.accordion-collapse.show) > .acclink i { color: var(--white);}

.managerPage .topNav .subCntMenu a.acclink { position:relative; padding-right:32px;}
.managerPage .topNav .subCntMenu a.acclink:before { rotate: 0deg; content: "\F282"; font-family: "bootstrap-icons"; font-size:12px; line-height: normal; position: absolute; right: 10px; top: 16px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.managerPage .topNav .subCntMenu:hover a.acclink:before { rotate: 180deg;}

#verticalLayout .customerPage .topNav { display:none;}
#horizontalLayout .customerPage .topNav { display:flex;}

.customerPage .contentArea { min-height:auto; }
.customerPage .topNav { width:100%; background:var(--white); border-top:1px solid #eee; display:flex; backdrop-filter: blur(6px); position:sticky; top:70px; z-index:9;}
.customerPage .topNav a { padding:7px 16px; display:flex; align-items:center; gap:10px; background-color:var(--white); color:var(--titleColor);}
.customerPage .topNav a i { display:none; color:var(--primaryColor); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.customerPage .topNav a:hover,
.customerPage .topNav a.active { background-color:var(--primaryColor); color:var(--white);}
.customerPage .topNav a:hover i,
.customerPage .topNav a.active i { color:var(--white);}




#verticalLayout:has(.salesPage) .accordion-item,
#verticalLayout:has(.customerPage) .accordion-item,
#horizontalLayout:has(.salesPage) .accordion-item,
#horizontalLayout:has(.customerPage) .accordion-item { position:relative;}
#verticalLayout:has(.salesPage) .accordion-item .newTag,
#verticalLayout:has(.customerPage) .accordion-item .newTag { background-color: var(--primaryColor); position: absolute; line-height: normal; text-transform: uppercase; font-size: 9px; font-weight: 600; letter-spacing: 1px; padding: 2px 5px; border-radius: 3px; color: var(--white); top: 15px; right:10px;}

#horizontalLayout:has(.salesPage) .accordion-item .newTag,
#horizontalLayout:has(.customerPage) .accordion-item .newTag { position: absolute; line-height: normal; text-transform: uppercase; font-size: 10px; font-weight: 600; letter-spacing: 1px;  color: var(--primaryColor); top:0px; right:10px;}
#horizontalLayout:has(.salesPage) .accordion-item:hover .newTag,
#horizontalLayout:has(.customerPage) .accordion-item:hover .newTag,
#horizontalLayout:has(.salesPage) .accordion-item:has(.active.acclink) > .newTag,
#horizontalLayout:has(.customerPage) .accordion-item:has(.active.acclink) > .newTag{ color:#fff;}


#horizontalLayout .header .bars {display: none;}

@media only screen and (max-width: 1641px) {
	.customerPage .topNav a { font-size:14px;}
	.salesPage .topNav a i { display:none;}
}

@media only screen and (max-width: 1441px) {
	.customerPage .topNav a { font-size:13px;}
}

@media only screen and (max-width: 1281px) {
	.customerPage .topNav a { font-size:12px;}
	.customerPage .topNav a.log-out-button span { display:none;}
	.customerPage .topNav a i { display:none;}
}

@media only screen and (max-width: 1277px) {
	.customerPage .topNav a { padding: 7px 12px; font-size:13px;}
	.customerPage .topNav a.log-out-button i { display:block;}
}

@media only screen and (max-width: 1025px) {
	#horizontalLayout .header .bars { display:block;}
	#horizontalLayout .customerPage .topNav { display:none;}

	#horizontalLayout:has(.salesPage) .accordion-item,
	#horizontalLayout:has(.customerPage) .accordion-item{ position:relative;}
	#horizontalLayout:has(.salesPage) .accordion-item .newTag,
	#horizontalLayout:has(.customerPage) .accordion-item .newTag{ background-color: var(--primaryColor); position: absolute; line-height: normal; text-transform: uppercase; font-size: 9px; font-weight: 600; letter-spacing: 1px; padding: 2px 5px; border-radius: 3px; color: var(--white); top: 15px; right:10px;}

	#horizontalLayout .salesPage .topNav { display:none;}
}


@media only screen and (max-width: 1281px) {
	.salesPage .topNav a.log-out-button span { display:none;}
}

@media only screen and (max-width: 1277px) {
	.salesPage .topNav a { padding: 7px 12px;}
	.salesPage .topNav a i { display:none;}
	.salesPage .topNav a.log-out-button i { display:block;}

	.managerPage .topNav a { padding: 7px 12px;}
	.managerPage .topNav a.log-out-button i { display:block;}
}

@media only screen and (max-width: 1023px) {
	#horizontalLayout .header .bars { display:block;}
	

	#horizontalLayout .managerPage .topNav { display:none;}
}


#themeChangeExample .titTheme { background-color: var(--primaryColor); padding: 10px 20px; color: var(--white);}
#themeChangeExample .titTheme h2 { color:var(--white);}
#themeChangeExample .cntTheme { display:flex; flex-wrap:wrap; gap:40px; padding:20px;}
#themeChangeExample .cntTheme .cntBx { width:100%; display:flex; flex-direction:column;}
#themeChangeExample .cntTheme .cntBx label { font-weight:600; color:var(--titleColor)}
#themeChangeExample .cntTheme .cntBx p { color:var(--textColor); margin-bottom:12px;}
#themeChangeExample .cntTheme .cntBx ul { display:flex; flex-wrap:wrap; gap:20px}
#themeChangeExample .cntTheme .cntBx ul li { display:flex; flex-wrap:wrap;}
#themeChangeExample .cntTheme .cntBx ul li button { width:105px; display:flex; flex-wrap:wrap; justify-content:center; border:0 none; outline:none; box-shadow:none; background:none; position:relative;}
#themeChangeExample .cntTheme .cntBx ul li button svg { border:1px solid #F3F6F9; padding:2px; border-radius:4px}
#themeChangeExample .cntTheme .cntBx ul li button label { font-weight:500; font-size:var(--Fonts-size-14); color:var(--textColor);}

#verticalLayout .cntTheme .cntBx ul li button.verticalClick::after,
#horizontalLayout .cntTheme .cntBx ul li button.horizontalClick::after,
.light-mode .cntTheme .cntBx ul li button.lightModeClick::after,
.dark-mode .cntTheme .cntBx ul li button.darkModeClick::after { content:"\2713"; width:16px; height:16px; border-radius:100%; background-color:var(--gColor); position:absolute; top:8px; right:8px; font-size: 10px;font-weight: 700;display: flex;justify-content: center;align-items: center;color: #fff;}


/* theme button */

.theme-btn-list { width: 100%; display: flex; flex-wrap: wrap;}
.theme-btn-list li { width: calc(100% / 3); padding: 12px;}
.theme-btn { width: 100%; height: 62px; border: 0 none; background: #33738D; background: linear-gradient(180deg,#33738D 62%, #f2f6f8 62.1%); display: inline-flex; flex-wrap: wrap; justify-content: center; font-size: 14px; letter-spacing: 1px; font-weight: 500; text-transform: uppercase; color: var(--white); border-radius: 3px; padding: 5px ; position: relative; }
.theme-btn::before { content: ""; width: calc(100% + 12px); height: calc(100% + 12px); border: 1px solid #e9e8ef; position: absolute; left: -6px; top: -6px; border-radius: 4px;}
.theme-btn::after {content: "\f058"; font-family: FontAwesome; font-size: 20px; text-rendering: auto; position: absolute; top: 4px; left: calc(50% - 7px); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; display: none; color: #fff;} 

body.default-theme .default-btn { color: #33738D; padding-top: 35px;}
body.default-theme .default-btn::after {display: block;}

.brown-btn { background: #be8c35; background: linear-gradient(180deg,#be8c35 62%, #faf6ee 62.1%);}
body.brown-theme .brown-btn { color: #be8c35; padding-top: 35px;}
body.brown-theme .brown-btn::after {display: block;}

.red-btn { background: #E31E24; background: linear-gradient(180deg,#E31E24 62%, #fdeff0 62.1%);}
body.red-theme .red-btn { color: #E31E24; padding-top: 35px;}
body.red-theme .red-btn::after {display: block;}

.green-btn { background: #77ac36; background: linear-gradient(180deg,#77ac36 62%, #f2f5ec 62.1%);}
body.green-theme .green-btn { color: #77ac36; padding-top: 35px;}
body.green-theme .green-btn::after {display: block;}

.modal { z-index:2555;}
.modal-backdrop{ z-index:2551;}

.productOrderDtl .orderCartDtl ul.product li.highlight { background: var(--bodyColor);}

.versionDetail p, .versionDetail ul, .versionDetail ol, .versionDetail h2, .versionDetail h3 { margin-bottom: 12px;}
.versionDetail .card-header h2 { margin-bottom:0 !important;}
.versionDetail li { display:block; margin-bottom:2px; padding:0 0 5px 20px; position:relative;}
.versionDetail li:last-child { margin-bottom:0px; padding:0 0 0px 20px;}
.versionDetail li:before { content:""; width:8px; height:8px; background:var(--primaryColor); position:absolute; top:10px; left:0; border-radius:100px;}

.ql-tooltip.ql-hidden { display:none;}


/* Theme Control */
/* Brown */
body.brown-theme {
	--primaryColor: #be8c35;
	--bodyColor: #f7f7f7;
	--themeLight: #fef9f1;
	--pColorTheme: #be8c35;
}
body.brown-theme .form-control:focus, body.brown-theme .form-select:focus {
	border-color: #e6e6e6; box-shadow: 0 0 0 .25rem #f5f5f5;
}
body.brown-theme label.switch {background: #efe3d0;}
body.brown-theme table tr td .tblAction a:not([href]):not([class]),
body.brown-theme table tr td .tblAction a { background-color:var(--bodyColor);}
body.brown-theme table tr td .tblAction a:not([href]):not([class]):hover,
body.brown-theme table tr td .tblAction a:hover { background-color:var(--themeLight); color: var(--primaryColor);}

/* Red */
body.red-theme {
	--textColor: #555555;
	--primaryColor: #E31E24;
	--bodyColor:#f9f9f9;
	--themeLight:#f8f0f0;
	--pColorTheme: #E31E24;
}
body.red-theme .form-control:focus, body.red-theme .form-select:focus {
	border-color: #e6e6e6; box-shadow: 0 0 0 .25rem #f5f5f5;
}
body.red-theme label.switch {background: #f0dfdf;}
body.red-theme table tr td .tblAction a:not([href]):not([class]),
body.red-theme table tr td .tblAction a { background-color:#fbf7f7;}
body.red-theme table tr td .tblAction a:not([href]):not([class]):hover,
body.red-theme table tr td .tblAction a:hover { background-color:var(--themeLight); color: var(--primaryColor);}


/* Green */
body.green-theme {
	--textColor: #3d424b;
	--primaryColor: #77ac36;
	--bodyColor:#f9f9f9;
	--themeLight:#eff3ea;
	--pColorTheme: #77ac36;
}
body.green-theme .form-control:focus, body.green-theme .form-select:focus {
	border-color: #e6e6e6; box-shadow: 0 0 0 .25rem #f5f5f5;
}
body.green-theme label.switch {background: #e4eddc;}
body.green-theme table tr td .tblAction a:not([href]):not([class]),
body.green-theme table tr td .tblAction a { background-color:#f4f6f3;}
body.green-theme table tr td .tblAction a:not([href]):not([class]):hover,
body.green-theme table tr td .tblAction a:hover { background-color:#e4eddc; color: var(--primaryColor);}

.offcanvas .dark-btn { background-color: var(--themeLight); display: flex; justify-content: center; align-items: center; gap: 10px; padding: 10px;}
body.dark-mode .offcanvas .dark-btn {background-color: var(--borderColor);}

/* Dark Mode */
body.dark-mode {
	--textColor: #adb5bd;
	--titleColor: #ffffff;
	--primaryColor: #8ADFE3;
	--borderColor: #343747;
	--white: #2d313e;
	--bodyColor:#22252f;
	--pColorTheme: #8ADFE3;
}
body.dark-mode { background-color:var(--bodyColor); color:var(--textColor)}
body.dark-mode a { color:var(--textColor) }
body.dark-mode a:hover { color:var(--titleColor) }
body.dark-mode .btn:hover { color:var(--textColor) }
body.dark-mode .header .menuClick { color:var(--primaryColor) }
body.dark-mode .loginPage .formBox .welcome .cnt .loginLogoBox img,
body.dark-mode .header .logo img,
body.dark-mode .offcanvas .logoBx img {	filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); -webkit-filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);	-moz-filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);	-ms-filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);	-o-filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);}
body.dark-mode .form-check-input,
body.dark-mode .form-select,
body.dark-mode .form-control { background-color:var(--bodyColor); border-color:var(--borderColor); color:var(--textColor)  }
body.dark-mode .form-check-input:focus,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus { box-shadow:0 0 0 .25rem #8adfe312}
body.dark-mode .form-check-input:checked[type=checkbox] { background-color:var(--primaryColor); border-color:var(--primaryColor)}

body.dark-mode .loginPage .formBox { box-shadow:0 2px 30px #00000038}
body.dark-mode .loginPage .formBox .form { border-color:var(--borderColor);}
body.dark-mode .loginPage .formBox .form .loginTit span,
body.dark-mode .loginPage .formBox .welcome .cnt label { color:var(--primaryColor)}

body.dark-mode .nav .accordion-item a.acclink { color: var(--textColor);}
body.dark-mode .nav .accordion-item a.acclink.active,
body.dark-mode .nav .accordion-item a.acclink:hover { background-color: var(--borderColor); color: var(--primaryColor) ;  border-right: 3px solid var(--primaryColor);}

body.dark-mode .modal-content { background-color:var(--bodyColor)}
body.dark-mode .modal-header,
body.dark-mode .modal-footer { border-color:var(--borderColor) }
body.dark-mode .btn-primary { color:var(--secondaryColor)}
body.dark-mode .page .slideMenu,
body.dark-mode .header .logo { border-right:1px solid #343747;}
body.dark-mode .card { background-color:var(--white); color:var(--textColor);}
body.dark-mode table tr th { background-color:var(--borderColor)!important; color:var(--textColor);}
body.dark-mode .statisticsBox label,
body.dark-mode .statisticsBox span { color:var(--textColor) }
body.dark-mode .offcanvas { background-color:var(--white) }
body.dark-mode .offcanvas .logoBx { background-color: var(--white);}
body.dark-mode .statisticsOne .iconBox,
body.dark-mode .statisticsTwo .iconBox,
body.dark-mode .statisticsThree .iconBox,
body.dark-mode .statisticsFour .iconBox,
body.dark-mode .bg-primary-subtle,
body.dark-mode .bg-success-subtle,
body.dark-mode .bg-warning-subtle,
body.dark-mode .bg-info-subtle,
body.dark-mode .bg-danger-subtle,
body.dark-mode .bg-secondary-subtle { background-color:var(--bodyColor)!important; }
body.dark-mode .dropdown-item { color:var(--textColor);}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus { background-color:var(--bodyColor); color:var(--textColor);}
body.dark-mode .dropdown-menu { background-color:var(--bodyColor);}
body.dark-mode .pagination li a { background-color:var(--bodyColor); color:var(--titleColor);}
body.dark-mode .pagination li a.page-link { border-color:var(--bodyColor) }
body.dark-mode .pagination li a.active,
body.dark-mode .pagination li.active a,
body.dark-mode .pagination li a:hover { background-color:var(--primaryColor); color:var(--white);}

body.dark-mode .nav.nav-tabs li button { color: var(--textColor);}
body.dark-mode .nav.nav-tabs li button.active { color: var(--primaryColor);}
body.dark-mode .modal-header .btn-close { background-color: var(--lightColor);}

body.dark-mode .modal-body .iconBox img { filter: contrast(0);}
body.dark-mode .productOrderDtl .orderCartDtl ul.product li {   border-bottom: 1px solid #343747;}

body.dark-mode .text-body { color: var(--textColor) !important;}
body.dark-mode .cartPage .cartDtlInfo .priceInfo { background-color: var(--bodyColor);}
body.dark-mode .delivery-radio-btn { box-shadow: 0 0 20px #17171766;}
body.dark-mode .delivery-radio-btn {border: 2px solid var(--primaryColor);}
body.dark-mode .delivery-custom-radio input:checked + .delivery-radio-btn {border: 2px dashed var(--primaryColor);}
body.dark-mode .delivery-radio-btn > i { background-color: var(--primaryColor);}
body.dark-mode .shippingDtlSelect .cntBoxR .iconBox { filter: contrast(0);}

body.dark-mode .header .headerRight .cartBox { border-color:#343747;}
body.dark-mode .salesPage .topNav,
body.dark-mode .managerPage .topNav {border-top:1px solid #343747;}

/* end of Theme */


.loading-placeholder { width: 100%; min-height: 70px; background: linear-gradient(90deg, #ffffff 25%, #f0f0f0 50%, #ffffff 75%); background-size: 200% 100%; animation: loadingAnimation 1.5s infinite; display: flex; justify-content: center; align-items: center; font-size: 16px; color: #bbb; border-radius: 8px; }

@keyframes loadingAnimation {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

table td.productNameTD a { color:var(--primaryColor); font-weight:500;}
table td .proDtlInfo { width:100%; display:flex;  flex-wrap:wrap; justify-content: flex-start;}
table td .proDtlInfo .proInfo { min-width:100px; display:flex; gap:10px; line-height:normal; margin:2px 0; padding-left:5px; }
table td .proDtlInfo span { font-weight:500;}
table td .proDtlInfo .proInfo label{ color:var(--textColorLight); }
table td .proDtlInfo .proInfo:nth-child(2n) { width:calc(100% - 100px);}

/* Popup Zoom In Out */
.modal.fade      .modal-dialog { transform: scale(0.7) }
.modal.fade.show .modal-dialog { transform: scale(1) }

#suggestionContainer { max-height: 200px; overflow-y: auto; position: absolute; width: calc(100% - 32px); background: var(--white); z-index:999;}

.owl-stage-outer { overflow:hidden;}
.owl-stage { height:100%; display:flex;}
.owl-item .item {height:100%; display:flex;}
.owl-item .item .cartProductList { width:100%; height:100%; display:flex; flex-wrap:wrap; background-color:var(--white); border:1px solid var(--borderColor); padding:12px; border-radius:10px;}
.owl-item .item .cartProductList .imgBox { width:52px; height:52px; display:flex; justify-content:center; position:relative; background-color:var(--lightGrayColor); margin-bottom:8px;}
.owl-item .item .cartProductList .imgBox img { width:52px; height:52px; object-fit:cover; }
.owl-item .item .cartProductList .productDtl { width:calc(100% - 52px); padding-left:12px;}
.owl-item .item .cartProductList .productDtl a.proName { font-size:var(--Fonts-size-14); font-weight:500; color:var(--primaryColor); line-height:normal; margin-bottom:2px;}
.owl-item .item .cartProductList .productDtl .btn { padding:3.5px 12px;}
.owl-item .item .cartProductList .productDtl .priceBox { display:flex; justify-content:space-between; align-items:center; margin-top:5px;}
.owl-item .item .cartProductList .productDtl .priceBox label{ font-weight:600; color:var(--primaryColor);}

.owl-item .item .cartProductList .stock { border-radius:4px; line-height:normal; padding:2px 10px; font-size:12px; font-weight:500;}
.owl-item .item .cartProductList .stock.inStock { background-color: var(--gColorThemeBg); color: var(--gColorTheme);}
.owl-item .item .cartProductList .stock.lowStock { background-color: var(--rColorThemeBg); color: var(--rColorTheme);}
.owl-nav.disabled { display:none;}

/* Progress Bar Container */
#progress-bar { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background-color: red; z-index: 9999; transition: width 0.3s ease-out; }

.ribbon { display: inline-block; width: 75px; position: absolute; left: -15px; background: green; color: white; font-size: 10px; padding: 2px 8px; transform: rotate(-45deg) !important; transform-origin: 0 0; line-height: normal; clip-path: polygon(22px 0px, 75% -3px, 100.00% 92%, 1px 97%); transform: perspective(10px) rotateX(1deg); text-align: center; top: 40px; }

table.productListTbl tr td.imgTD a { position: relative; background-color: var(--borderColor); display: inline-block; border: 1px solid var(--borderColor);}