@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700;800&display=swap");
:root {
  --primaryColor: #ff1b1b;
  --primaryHoverColor: #d40a0a;
  --greenColor: #009900;
  --borderColor: #dadada;
  --headerBg: #343434;
  --sidebarBg: #363740;
  --sidebarTextColor: #868686;
  --lightBg: #f0f0f0;
  --lightColor: #a4a4a4;
  --thColor: #a8a8a8;
  --tableStripBg: #f7f7f7;
  --tableBorder: #ddd;
  --switchBg: #b4b4b4;
  --darkGrey: #a7a7a7;
}
body {
  font-family: "Mulish", sans-serif;
  font-size: 14px;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
img {
  max-width: 100%;
}
a,
.btn {
  -webkit-transition: all 300ms ease-in-out 0s;
  -o-transition: all 300ms ease-in-out 0s;
  transition: all 300ms ease-in-out 0s;
}
a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
}

/* button */
.btn {
  border-radius: 5px;
  font-size: 16px;
  line-height: 1;
  padding: 11px 20px;
  font-weight: 700;
}
.btn-check:focus + .btn,
.btn:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btnPrimary,
.btn-primary {
  color: var(--bs-white);
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
}
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle,
.btnPrimary:hover,
.btnPrimary:focus,
.btn-primary:hover,
.btn-primary:focus {
  color: var(--bs-white);
  background-color: var(--primaryHoverColor);
  border-color: var(--primaryHoverColor);
}
.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-light {
  color: #000;
  background-color: var(--lightBg);
  border-color: var(--lightBg);
}
.btn-light.btnLight2 {
  color: var(--darkGrey);
}
.btnOutline {
  background-color: #fff;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  color: var(--bs-black);
}
.btn.btnOutline:focus {
  background-color: var(--lightBg);
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}
.btn.iconBtn {
  padding-top: 10px;
  padding-bottom: 10px;
}
.btn.iconBtn > span {
  display: inline-block;
  vertical-align: middle;
}
.btn.iconBtn > span > img {
  display: block;
}
.btn.iconBtn > span + span {
  padding-left: 4px;
}
.minWdBtn {
  min-width: 140px;
}
.minWdBtnSm {
  min-width: 120px;
}
/*   /button */

/* fields */
.formStyle .form-control,
.formStyle .form-select {
  font-size: 14px;
  border-color: var(--borderColor);
  border-radius: 2px;
  padding: 9px 20px;
  color: var(--darkGrey);
}
.formStyle .form-select {
  padding-right: 30px;
  padding-left: 20px;
}
.formStyle .form-control.lgField {
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 5px;
}
.formStyle .form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.29);
}
.formStyle .form-control::placeholder {
  color: rgba(0, 0, 0, 0.29);
}
.formStyle .form-control:focus,
.form-control:focus,
.form-select:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
/*   /fields */

/* title */
.lgTitle {
  font-size: 24px;
  font-weight: 700;
}
.mdTitle {
  font-size: 16px;
}
.smTitle {
  font-size: 14px;
}
.xsTitle {
  font-size: 12px;
}
/* title */

/* colors */
.primaryColor {
  color: var(--primaryColor);
}
.inheritColor {
  color: inherit;
}
.greenColor {
  color: var(--greenColor);
}
.waitingText {
  color: var(--darkGrey);
}
/*  /colors */

.primaryBg {
  background-color: var(--primaryColor);
  color: var(--bs-white);
}

/* font weight */
.fwNormal {
  font-weight: 400;
}
.fwSbold {
  font-weight: 600;
}
.fwBold {
  font-weight: 700;
}
.fwEBold {
  font-weight: 800;
}
/*   /font weight */

/* laoder */
#loader {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  background-color: var(--bs-white);
  z-index: 9999;
  -webkit-transition: all 500ms ease-in-out 400ms;
  -o-transition: all 500ms ease-in-out 400ms;
  transition: all 500ms ease-in-out 400ms;
}
.loader {
  height: 100%;
}
.loaderAnimation {
  display: inline-block;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 500ms ease-in-out 0s;
  -o-transition: all 500ms ease-in-out 0s;
  transition: all 500ms ease-in-out 0s;
  padding: 0 30px;
}
.loaderAnimation::before,
.loaderAnimation::after {
  content: "";
  position: absolute;
  width: 15px;
  -webkit-transform: skewX(-15deg);
  -ms-transform: skewX(-15deg);
  transform: skewX(-15deg);
  background-color: rgba(255, 255, 255, 0.4);
  left: -50px;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 20px rgb(255, 255, 255);
  -webkit-animation-name: loaderEffect;
  animation-name: loaderEffect;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.loaderAnimation::after {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@keyframes loaderEffect {
  0% {
    left: -50px;
  }
  100% {
    left: calc(100% + 50px);
  }
}

.hideLoader .loaderAnimation {
  opacity: 0;
}
.hideLoader #loader {
  opacity: 0;
  pointer-events: none;
}

/* /loader */

/* login page start */
.mh100vh {
  min-height: 100vh;
}
.topLeftShape {
  position: absolute;
  left: 0;
  top: 0;
}
.loginCol {
  margin: 0 auto;
  max-width: 504px;
  text-align: center;
  padding: 20px 0;
}
.loginLogoCol a {
  display: inline-block;
}
.loginLogoCol + .logoForm {
  margin-top: 45px;
}
.logoForm {
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  padding: 50px 80px;
  border-radius: 20px;
  text-align: left;
}
.logoForm h4 {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 6px;
}
.loginBtn {
  text-align: center;
  /* padding-top: 20px; */
}
.loginCopyrightCol {
  opacity: 0.44;
  padding-top: 28px;
  font-weight: 700;
}
.loginCopyrightCol p {
  margin: 0;
}
/*   /login  */

/* Dashboard */
.headerCol {
  padding: 16px 0px;
  background-color: var(--headerBg);
  color: var(--bs-white);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 98;
}
.headerHeight {
  height: 72px;
}
.hUserName {
  font-weight: 700;
  font-size: 16px;
  padding: 0 20px;
  display: inline-block;
}
.headerLogo {
  text-align: center;
  width: 270px;
}
.menuTrigger {
  display: inline-block;
  margin-left: 20px;
  margin-top: 4px;
}
.menuTrigger img {
  display: block;
}

.headerRightCol {
  padding: 0 18px;
  width: 380px;
}
.btn.smBtn {
  font-size: 14px;
  font-weight: 600;
}
.btn.logoutBtn {
  padding: 10px 20px;
}
.logoutBtn > span {
  display: inline-block;
  vertical-align: middle;
}
.logoutBtn > span > img {
  display: block;
}
.dropdownToggle {
  position: relative;
}
.dropdownToggle::before {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-image: url("../images/angle-down.svg");
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  width: 11px;
  height: 8px;
  background-position: center;
}
.ddStyle .dropdown-menu {
  border: none;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  width: 100%;
  font-size: 14px;
}
.ddStyle .dropdown-item.active,
.ddStyle .dropdown-item:active {
  color: inherit;
  background-color: #e9ecef;
}

.sidebarOverlay {
  background-color: rgba(0, 0, 0, 0.85);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 98;
  opacity: 0;
  pointer-events: none;
}
.sidebarCol {
  background-color: var(--sidebarBg);
  color: var(--sidebarTextColor);
  position: fixed;
  left: 0;
  top: 72px;
  bottom: 0;
  width: 270px;
  z-index: 99;
}
.sidebarCol .headerLogo {
  width: 100%;
  padding: 20px;
  margin-bottom: 15px;
}
.menu > li > a {
  display: block;
  padding: 10px 20px 10px 60px;
  position: relative;
}
.menu > li > a.active {
  background-color: rgba(0, 0, 0, 0.14);
  color: var(--bs-white);
}
.menu > li > a:hover,
.menu > li.mDdCol.openDDMenu > a {
  background-color: rgba(0, 0, 0, 0.08);
}
.menu a:hover,
.menu .sMenu a {
  color: var(--bs-white);
}
.menu .sMenu a:hover {
  /* color: var(--sidebarTextColor); */
}
.menuIcon {
  position: absolute;
  left: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  max-width: 20px;
  max-height: 20px;
  text-align: center;
}
.menuIcon img {
  display: block;
}
.sMenu {
  padding: 7px 10px 7px 60px;
  display: none;
}
.sMenu a {
  display: block;
  padding: 5px 0;
}
.menu .sMenu a {
  opacity: 0.6;
}
.menu .sMenu a.active,
.menu .sMenu a:hover {
  opacity: 1;
}
.menu > li > a.mDDTrigger {
  padding-right: 32px;
}
.mDdCol .mDDTrigger::before {
  content: "";
  background-image: url("../images/angle-down-white.svg");
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  background-position: center center;
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 10px;
  height: 8px;
  opacity: 0.3;
  -webkit-transition: all 300ms ease-in-out 0s;
  -o-transition: all 300ms ease-in-out 0s;
  transition: all 300ms ease-in-out 0s;
}
.mDdCol.openDDMenu .mDDTrigger::before {
  -webkit-transform: translateY(-50%) rotate(-180deg);
  -ms-transform: translateY(-50%) rotate-(180deg);
  transform: translateY(-50%) rotate(-180deg);
}

.pageContentMain {
  padding-left: 270px;
}
.pageTitleCol {
  padding: 30px;
  border-bottom: 3px solid var(--primaryColor);
}
.menu {
  padding-bottom: 10px;
}
.sidebarMenu {
  height: 100%;
}
.sidebarMenu .mCSB_inside > .mCSB_container {
  margin-right: 0;
}

/*  custom scroll */
.mCSB_scrollTools {
  opacity: 1;
  background-color: #7d7d7d;
  width: 10px;
}
.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #c8c0c0;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #c8c0c0;
  margin: 0;
  width: 100%;
  border-radius: 0;
}
/*  /custom scroll */

.datePickerCol {
  max-width: 350px;
  position: relative;
}
.form-control.datePickerFld {
  border-color: transparent;
  background-color: var(--lightBg);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 20px 10px 54px;
  text-transform: uppercase;
}
td .form-control.datePickerFld {
  min-width: 220px;
}
.fldCalendarIcon {
  position: absolute;
  left: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.fldCalendarIcon img {
  display: block;
}
.pageContentWd {
  max-width: 1135px;
}

.pageContent {
  padding: 20px;
}
.tSmenu {
  max-width: 220px;
}
.lightBg {
  background-color: var(--lightBg);
}
.cardStyle1 {
  text-align: center;
  background-color: var(--lightBg);
  padding: 14px 15px;
  border-radius: 6px;
}
.cardStyle1 small {
  font-size: 60%;
  display: inline-block;
  vertical-align: middle;
}

.dbCardStyle {
  padding: 20px;
}
.cardTitle {
  font-size: 16px;
  font-weight: 600;
}
.cardTitle {
  font-size: 16px;
  font-weight: 700;
}
.lightColor {
  color: var(--lightColor);
}
.areaDD {
  width: 200px;
}

.chartCol .highcharts-graph {
  stroke: #dedede;
  stroke-width: 1px;
}
.chartCol .highcharts-grid-line {
  opacity: 0;
}
.dbCardHeader + .dbCardBody {
  margin-top: 30px;
}
.borderCard {
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  padding: 16px;
}

.tableStyle {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
}
.tableStyle th {
  color: var(--thColor);
}
.table.tableStyle > :not(caption) > * > * {
  padding: 5px;
}
.table.tableStyle > :not(caption) > * > th {
  padding-top: 8px;
  padding-bottom: 8px;
}
.lastTdAlighRight td:last-child {
  text-align: right;
  width: 50px;
}
.lastThAlighRight th:last-child {
  text-align: right;
}
.lastThAlighRight th:first-child,
.lastTdAlighRight td:first-child {
  text-align: left;
}
.tdRightLineText {
  display: block;
  overflow: hidden;
}
.tdRightLineText > span {
  display: inline-block;
  position: relative;
}
.tdRightLineText > span::before {
  content: "";
  position: absolute;
  left: 100%;
  margin-left: 10px;
  width: 100vw;
  background-image: url("../images/dash-shape.svg");
  background-repeat: repeat-x;
  height: 1px;
  top: 50%;
}
.opacity-1 {
  opacity: 1;
}
.sbReportTable hr {
  opacity: 1;
  margin: 5px 0;
}
.textLightColor {
  color: #949191;
}
.thNoWrap th {
  white-space: nowrap;
}
.formStyle .form-control.xlTArea {
  height: 320px;
  padding: 30px 40px;
  resize: none;
}
.daterangepicker td.in-range {
  background-color: #fdf3f3;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: transparent;
  color: inherit;
  position: relative;
}
.daterangepicker td.active::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 3px solid var(--primaryColor);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.daterangepicker td.active.off::before {
  opacity: 0;
}
.daterangepicker select.monthselect {
  background-color: #f8f7fa;
  color: var(--primaryColor);
}
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  border: none;
  font-weight: 600;
  height: 30px;
  padding: 4px 8px;
  border-radius: 6px;
}

/* view staff */
.tableSearchCol {
  max-width: 480px;
}
.searchCol {
  position: relative;
}
.form-control.searchFld {
  background-color: var(--lightBg);
  border-color: transparent;
  padding: 7px 40px 7px 20px;
  border-radius: 5px;
}
.searchCol .searchIcon {
  position: absolute;
  right: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.searchCol .searchIcon img {
  display: block;
}

.btn.filterTrigger {
  padding: 9px 20px;
}
.nowrap {
  white-space: nowrap;
}
.filterBtnCol {
  position: relative;
}
.filterOptions {
  position: absolute;
  background-color: #fff;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  padding: 15px;
  min-width: 170px;
  border-radius: 5px;
  right: 0;
  top: 100%;
  opacity: 0;
  pointer-events: none;
  margin-top: 10px;
  -webkit-transition: all 300ms ease-in-out 0s;
  -o-transition: all 300ms ease-in-out 0s;
  transition: all 300ms ease-in-out 0s;
  text-align: left;
  z-index: 1;
}
.activeFilter .filterOptions {
  opacity: 1;
  pointer-events: initial;
  margin-top: 0;
}

.checkStyle .form-check-input:checked {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
}
.checkStyle .form-check-input:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.checkStyle .form-check-input {
  width: 18px;
  height: 18px;
  background-color: var(--lightBg);
  border: none;
}
.checkStyle.form-check {
  padding-left: 28px;
}
.checkStyle.form-check .form-check-input {
  margin-left: -28px;
}
.checkStyle .form-check-label {
  padding-top: 3px;
}
.filterOptions li + li {
  padding-top: 5px;
}

.tableActionBtns > li {
  display: inline-block;
  vertical-align: middle;
}
.tableActionBtns > li + li {
  padding-left: 10px;
}

.tableStyle2 th:first-child,
.tableStyle2 td:first-child {
  padding-left: 40px;
}
.tableStyle2 th:last-child,
.tableStyle2 td:last-child {
  padding-right: 40px;
}
.tableStyle2 thead th {
  padding-top: 20px;
  padding-bottom: 20px;
}
.tableStyle2 tbody th,
.tableStyle2 tbody td {
  padding-top: 15px;
  padding-bottom: 15px;
}
.tableStyle2 tbody th,
.tableStyle2.imgColTable tbody td {
  padding-top: 5px;
  padding-bottom: 5px;
}
.tableStyle2.table-striped > tbody > tr:nth-of-type(2n + 1) {
  --bs-table-accent-bg: var(--tableStripBg);
  color: var(--bs-table-striped-color);
}
.tableStyle2.table > :not(:last-child) > :last-child > * {
  border-bottom-color: var(--tableBorder);
}
.tableStyle2 tbody,
.tableStyle2 td,
.tableStyle2 tfoot,
.tableStyle2 th,
.tableStyle2 thead,
.tableStyle2 tr {
  border-color: var(--tableBorder);
}
.tableStyle2 > tbody:last-child > tr:last-child > td {
  border-bottom: none;
}

.tablePagination {
  padding: 25px 50px;
}
.paginationCol .page-link {
  border: none;
  color: #000;
}
.paginationCol .page-link:hover {
  background-color: transparent;
}
.paginationCol {
  font-weight: 700;
}
.paginationCol .page-item:first-child .page-link,
.paginationCol .page-item:last-child .page-link {
  border-radius: 5px;
  border: 1px solid var(--lightBg);
}
.paginationCol .page-item:not(:first-child) .page-link {
  margin-left: 0px;
}
.paginationCol .disabled .page-link {
  background-color: var(--lightBg);
}
.tableActionBtns a {
  display: inline-block;
}
.tableActionBtns {
  display: inline-block;
  min-width: 60px;
}
.tableActionBtns.actionBtns2 {
  min-width: 100px;
}
/*   /view staff */

/* add staff */
.csHeader {
  padding: 18px 16px;
  background-color: var(--lightBg);
}
.dbCardStyle,
.tableCard,
.cardStyle {
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
}
.csBody {
  padding: 30px;
}
.cardStyle + .cardStyle {
  margin-top: 30px;
}
.posPinCol {
  max-width: 580px;
}
.form-control.posPinFld {
  background-color: var(--lightBg);
  text-align: center;
  height: 80px;
  border-color: transparent;
  font-size: 24px;
  font-weight: 700;
  color: #000;
}
.formBtmBtns {
  text-align: right;
  padding: 40px 0 20px;
}
.formBtmBtns li {
  display: inline-block;
  vertical-align: middle;
}
.formBtmBtns li + li {
  padding-left: 10px;
}

/*   /add staff */

/* switch style */
.form-check.form-switch.switchStyle {
  min-height: 22px;
  padding-left: 42px;
  position: relative;
}
.switchStyle .form-check-input {
  height: 22px;
  width: 42px;
  margin: 0;
  position: absolute;
  left: 0;
  border: none;
  background-color: var(--switchBg);
}
.switchStyle .form-check-input:checked {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
}
.switchStyle .form-check-input:focus {
  box-shadow: none;
}
.switchStyle.form-switch .form-check-input {
  background-image: 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");
}
/* switch style */

.switchCardHeader {
  border: 1px solid var(--borderColor);
  padding: 11px 20px;
  border-radius: 2px;
}
.switchCardHeader label {
  font-weight: 700;
}
.switchCardBody {
  border: 1px solid var(--lightBg);
  padding: 20px;
}
/*   /switch style */

/* single check style */
.singleCheckStyle .form-check-input:checked {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
}
.singleCheckStyle .form-check-input:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.singleCheckStyle .form-check-input {
  width: 24px;
  height: 24px;
  background-color: var(--lightBg);
  border: none;
}
.singleCheckStyle.form-check {
  padding-left: 24px;
  position: relative;
}
.singleCheckStyle.form-check .form-check-input {
  margin: 0;
  position: absolute;
  left: 0;
}
.singleCheckStyle .form-check-label {
  padding-top: 3px;
}
.checkLbl {
  font-weight: 600;
  line-height: normal;
}
.switchList > ul > li + li {
  padding-top: 12px;
}
/*  /single check style */

.sortIconCol {
  position: relative;
  display: inline-block;
  padding-right: 25px;
}
.sortIconCol::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  background-image: url("../images/sorting.svg");
  width: 20px;
  height: 16px;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  background-position: center center;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.headerSortUp .sortIconCol::before {
  background-image: url("../images/sorting_desc.svg");
}
.headerSortDown .sortIconCol::before {
  background-image: url("../images/sorting_asc.svg");
}
.noSorting {
  pointer-events: none;
}
.noSorting .sortIconCol::before {
  display: none;
}

.checkStatus {
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  z-index: -999;
}

/* choose color */
.colorCheckCol {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #f5f5f5;
  position: relative;
  overflow: hidden;
}
.colorCheckCol.color1 {
  background-color: #ed9f9f;
}
.colorCheckCol.color2 {
  background-color: #edd79f;
}
.colorCheckCol.color3 {
  background-color: #b3ed9f;
}
.colorCheckCol.color4 {
  background-color: #9fe4ed;
}
.colorCheckCol.color5 {
  background-color: #9fa7ed;
}
.colorCheckCol.color6 {
  background-color: #e29fed;
}
.colorCheckCol.color7 {
  background-color: #dbdbdb;
}
.colorCheckCol.blackBg {
  background-color: #000;
}
.colorCheckCol.whiteBg {
  background-color: var(--bs-white);
  border: 1px solid #b7b1b1;
}
.colorCheckCol input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.colorCheckCol,
.colorCheckStatus {
  border-radius: 10px;
}
.colorCheckStatus {
  position: absolute;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-background-size: 20px auto;
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0;
  -webkit-transition: all 300ms ease-in-out 0s;
  -o-transition: all 300ms ease-in-out 0s;
  transition: all 300ms ease-in-out 0s;
}
.blackBg .colorCheckStatus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.colorCheckCol input[type="radio"]:checked + .colorCheckStatus {
  opacity: 1;
}
.choosebgInnerCol > li,
.chooseBgCol > li {
  display: inline-block;
  vertical-align: top;
}
.addNewColor {
  border: 1px solid var(--borderColor);
  background-image: url("../images/plus-icon-dark.svg");
  background-repeat: no-repeat;
  -webkit-background-size: 17px auto;
  background-size: 17px auto;
  background-position: center center;
}
.colorPicker {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.choosebgInnerCol > li {
  margin-left: 2px;
  margin-right: 2px;
}

.imgThumb {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.imgThumb > img {
  max-width: 80%;
  max-height: 80%;
  -o-object-fit: contain;
  object-fit: contain;
}
.addNewImg {
  border: 1px solid var(--borderColor);
  background-image: url("../images/plus-icon-dark.svg");
  background-repeat: no-repeat;
  -webkit-background-size: 17px auto;
  background-size: 17px auto;
  background-position: center center;
  vertical-align: bottom;
  margin-left: 10px;
}
.imgUploadFld {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* tabStyle */
.tabStyle li a.nav-link {
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  padding: 10px 35px;
  position: relative;
  border-right: 0.5px solid #bdbdbd;
}
.tabStyle li:last-child a.nav-link {
  border-right: 0;
}
.tabStyle li a.nav-link.active::before {
  content: "";
  width: 100%;
  height: 4px;
  position: absolute;
  left: 0;
  bottom: -4px;
}
.tabStyle li a.nav-link::before {
  background: #ff1b1b;
}
.tabStyle li a.nav-link.active {
  color: #ff1b1b;
}
/* tabStyle */

/* modalStyle */
.customModal h5 {
  font-size: 24px;
  font-weight: bold;
}
.customModal .modal-body {
  font-size: 18px;
  color: #000000;
  padding: 30px 40px 40px 40px;
}
.customModal .form-control,
.customModal .form-select {
  font-size: 18px;
}
.customModal .form-text {
  font-size: 14px;
}
.hrColor {
  background-color: #dee2e6;
  opacity: 1;
}
.labelWidth {
  width: 115px;
}
.modalButtons {
  width: 190px;
  padding-top: 60px;
}
/* .modalSm {
  max-width: 475px;
} */
.customTabStyle {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.3);
}
ul.nav.tabStyle {
  margin-bottom: 4px;
}

/*   /modalStyle */

.cardIcon {
  padding-top: 37px;
}

/* Add Product Start */
.chineseFormCol {
  display: none;
}
.separatorSec hr {
  background-color: var(--lightBg);
  opacity: 1;
}
.fontSemiBold {
  font-size: 14px;
  font-weight: 600;
}
.modifierCheck {
  min-width: 300px;
}
.modifierForm {
  max-width: 165px;
}
.quantitySelect {
  display: none;
}
.modifierCheck label {
  margin: 0;
}
.modifierList + .modifierList {
  border-top: 1px solid var(--lightBg);
  padding-top: 7px;
  margin-top: 7px;
}
.quantityCheck {
  min-height: 40px;
  display: flex;
  align-items: center;
}

/*   /Add Product End */

/* Increase Decrease Input Start */
.increaseDecrease button.btn {
  background-color: var(--lightBg);
  border: 0;
  width: 48px;
  height: 40px;
  border-radius: 5px;
  padding: 0;
}
.increaseDecrease button.btn:focus-visible,
.increaseDecrease button.btn:focus,
.increaseDecrease button.btn:active {
  outline: none;
  box-shadow: none;
}
.increaseDecrease input.form-control {
  border: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #000;
}
.increaseDecrease input.form-control::placeholder {
  color: #000;
  opacity: 1;
}
/* Increase Decrease Input End */

/* Quick Price Css Start */
.maxWidPrice {
  max-width: 100px;
  width: 100%;
  min-width: 100px;
}
.maxWidName {
  max-width: 290px;
  min-width: 100px;
  width: 100%;
}
.tableStyle3 th {
  font-size: 14px;
  color: #000000;
  font-weight: 600;
  border-bottom: 1px solid var(--lightBg) !important;
}
.tableStyle3.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: transparent;
}
.tableStyle3.table-striped > tbody > tr .tableValueCol {
  font-size: 12px;
  font-weight: 400;
  color: #000;
  padding: 6px 12px;
}
.tableStyle3.table-striped > tbody > tr .tableValueCol:focus {
  outline: none;
  box-shadow: none;
}
.tableStyle3.table-striped > tbody > tr:nth-of-type(odd) .tableValueCol {
  border: 1px solid var(--borderColor);
}
.tableStyle3.table-striped > tbody > tr:nth-of-type(even) .tableValueCol {
  background-color: var(--lightBg);
  border: 1px solid var(--borderColor);
}
.tableStyle3 td {
  border: 0;
}
.prodCatList {
  display: none;
}
.retrieveBtn {
  min-width: 120px;
}
.imgCol {
  width: 76px;
  height: 72px;
  background: #c4c4c4;
  border-radius: 3px;
  position: relative;
}
.closeIcon {
  position: absolute;
  right: -10px;
  top: -10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  background-color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.closeIcon img {
  width: 10px;
}
.recipeCol .formFld {
  /* max-width: 130px;
  margin-left: auto; */
}
.recipeCol .formFld input {
  padding: 9px 10px;
}
.ingredientName {
  display: block;
  padding: 5px 0px;
}

/*************** radio style **************/

.radioStyle.form-check {
  padding-left: 30px;
}
.radioStyle .form-check-input:checked {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  background-image: none;
  border-color: #d9d9d9;
}
.radioStyle .form-check-input {
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: none;
  border: 2px solid var(--lightBg);
}
.radioStyle .form-check-input:focus {
  box-shadow: none;
}
.radioStyle.form-check .form-check-input {
  margin-left: -30px;
}
.radioStyle .form-check-label {
  padding-top: 3px;
}

/*************** radio style **************/

.tableStyle3.table-striped > tbody > tr:nth-of-type(2n) .tableValueCol {
  background-color: var(--lightBg);
  border: 1px solid var(--borderColor);
}
.tableStyle3.table-striped > tbody > tr:nth-of-type(2n + 1) .tableValueCol {
  border: 1px solid var(--borderColor);
}
.table.tdAlignMdl tbody td,
.table.tdAlignMdl tbody th {
  vertical-align: middle;
}
.imgCol.tdImgCol {
  width: 40px;
  height: 40px;
}
.imgCol.tdImgCol .closeIcon {
  width: 20px;
  height: 20px;
  padding: 6px;
}
.tableStyle3.table-striped > tbody > tr .tableValueCol.mdValFld {
  padding: 10px 12px;
}

.enableDisableOptionsCol {
  position: relative;
}
.edBtns > a + a {
  margin-top: 15px;
}
.edBtns {
  width: 130px;
  right: 5px;
  position: absolute;
  top: 35px;
  z-index: 1;
}
.edSpace {
  min-width: 80px;
  display: inline-block;
}

/* days selector  */
.weekCol {
  border: 1px solid #dbdbdb;
  display: inline-block;
  border-radius: 5px;
  overflow-x: auto;
  max-width: 100%;
}
.daysCol {
  width: 690px;
}
.daysBox {
  padding: 40px 15px;
  border-right: 1px solid #dbdbdb;
  text-align: center;
}
.daysCol .col:last-child .daysBox {
  border-right: none;
}
.daysCol ul li {
  display: inline-block;
}
.daysCol .checkStyle.form-check {
  padding-left: 0;
  display: inline-block;
  margin: 0;
}
.daysCol .checkStyle.form-check .form-check-input {
  margin-left: 0;
}
/* days selector  */

.addTopLeftFilter {
  max-width: 460px;
}
.adTdImg {
  width: 50px;
  height: 50px;
  padding: 5px;
  border: 1px solid var(--borderColor);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* tables page css */
.fixWidth {
  max-width: 450px;
}
/* tables page css */
.addPrinterWidth {
  max-width: 203px;
}

/* Floor Plan page start */
.tArangeLeftCol {
  width: 250px;
  padding: 0 10px;
}
.countLblCol,
.countTextCol {
  padding: 6px 0;
}
.countLblCol {
  width: 95px;
  text-align: right;
}
.countTextCol {
  text-align: right;
}
.countTotal {
  padding: 50px 0 0px;
}
.tsBorder {
  border: 1px solid #ececec;
  padding: 30px;
  display: inline-block;
  border-radius: 6px;
}
.tblSizeStyle {
  width: 96px;
  height: 96px;
  display: flex;
  border: 5px solid #74bf63;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #74bf63;
  font-weight: 700;
  background-color: #fff;
  -webkit-transition: all 300ms ease-in-out 0s;
  -o-transition: all 300ms ease-in-out 0s;
  transition: all 300ms ease-in-out 0s;
}
.tblSizeStyle.ts2,
.chooseTblLbl.ts2 {
  border-radius: 50%;
}
.chooseTableCol {
  background-color: var(--lightBg);
  padding: 30px;
  min-height: 100%;
}
.chooseTable > li {
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
}
.chooseTableCheck {
  position: absolute;
  opacity: 0;
}
.chooseTableCheck:checked + .tblSizeStyle {
  background-color: #cefbc4;
}
.chooseTblLbl {
  cursor: pointer;
}
/*   /Floor Plan page end */

/* add-table page start */
.qrRightBtns {
  width: 150px;
  margin-left: 20px;
}
.qrRightBtns > ul > li + li {
  padding-top: 10px;
}
/*   /add-table page start */

.primaryBg .btn-close {
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1em auto no-repeat;
}

.theCount > span {
  display: inline-block;
}
.theCount {
  text-align: right;
  font-size: 12px;
  color: var(--darkGrey);
}
.receiptInfoSwitchWd {
  max-width: 250px;
}
.uploadBtn {
  position: relative;
  overflow: hidden;
}
.tableActionBtns.actionBtns1 {
  min-width: auto;
}

.locFilterDD {
  max-width: 250px;
}
.nav.tabStyle.queueTabs {
  width: 100%;
}

@media (max-width: 1199px) {
  .sidebarCol {
    width: 240px;
  }
  .pageContentMain {
    padding-left: 240px;
  }
  .dbCardStyle {
    padding: 15px;
  }
  .lgTitle {
    font-size: 20px;
  }
  .pageTitleCol {
    padding: 15px;
    border-bottom-width: 2px;
  }
  .btn {
    font-size: 13px;
    padding: 12px 15px;
  }
  .btn.filterTrigger {
    padding: 8px 15px;
  }
  .tableStyle2 th:first-child,
  .tableStyle2 td:first-child {
    padding-left: 25px;
  }
  .tableStyle2 th:last-child,
  .tableStyle2 td:last-child {
    padding-right: 25px;
  }
  .csBody {
    padding: 20px 20px 25px 20px;  /* Edited by EST */
  }

  /* modalStyle */
  .modalButtons {
    padding-top: 40px;
  }
  .customModal .modal-body {
    padding: 30px;
  }
  .tabStyle li a.nav-link {
    padding: 10px 20px;
  }
}

@media (max-width: 991px) {
  .sidebarCol {
    width: 270px;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
    top: 0;
  }
  .pageContentMain {
    padding-left: 0px;
  }
  body.openNav .sidebarCol {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  body.openNav .sidebarOverlay {
    opacity: 1;
    pointer-events: initial;
  }
  .btn.logoutBtn {
    padding: 10px 15px;
  }
  .formStyle .form-control.xlTArea {
    height: 200px;
    padding: 20px 30px;
  }
  /* tabStyle */
  .tabStyle li a.nav-link {
    padding: 10px 20px;
    font-size: 14px;
  }
  /* tabStyle */

  .chooseTableCol {
    padding: 20px;
    margin: 0 -20px;
  }
  .tblSizeStyle {
    width: 70px;
    height: 70px;
    border-width: 3px;
  }
  .tArangeLeftCol {
    width: 100%;
    padding: 0 5px;
  }
  .countTotal {
    padding: 15px 0 0px;
  }
  .tsBorder {
    padding: 20px;
  }
}

@media (max-width: 767px) {
  .tSmenu,
  .datePickerCol {
    max-width: 100%;
  }
  .pageContent {
    padding: 15px;
  }
  .formStyle .form-control.xlTArea {
    padding: 15px;
  }
  .tableSearchCol {
    max-width: 100%;
  }
  .tableStyle2 th:first-child,
  .tableStyle2 td:first-child {
    padding-left: 15px;
  }
  .tableStyle2 th:last-child,
  .tableStyle2 td:last-child {
    padding-right: 15px;
  }
  .tableStyle2 thead th {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .tableStyle2 tbody th,
  .tableStyle2 tbody td {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .tablePagination {
    padding: 15px 20px;
  }
  .csBody {
    padding: 12px 12px 25px 12px; /* Edited by EST*/
  }
  .form-control.posPinFld {
    height: 55px;
    font-size: 18px;
  }
  .switchCardBody {
    padding: 15px 10px;
  }
  .switchCardHeader {
    padding: 10px;
  }
  .formBtmBtns {
    padding: 30px 0 20px;
  }

  /* tabStyle */
  .tabStyle {
    width: 545px;
  }
  .customTabStyle {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .tabStyle li a.nav-link.active::before {
    bottom: 0;
  }
  /* modalStyle */
  .modalButtons {
    padding-top: 40px;
  }
  .customModal .modal-body {
    padding: 30px;
  }
  ul.nav.tabStyle {
    margin-bottom: 0;
  }

  .modifierCheck {
    min-width: 220px;
  }
  .maxWidName {
    width: 220px;
  }

  .tableStyle3 th {
    white-space: nowrap;
  }
  .maxWidPrice {
    max-width: initial;
  }
  .retrieveBtn {
    min-width: 90px;
  }

  .chooseTableCol {
    padding: 15px;
    margin: 0 -15px;
  }
  .tabStyle.salesTabs {
    width: 650px;
  }
}

@media (max-width: 575px) {
  body,
  .tableStyle,
  .smTitle,
  .cardTitle,
  .mdTitle,
  .btn {
    font-size: 12px;
  }
  .lgTitle {
    font-size: 18px;
  }
  .menuTrigger {
    margin-left: 20px;
  }
  .headerRightCol {
    padding: 0 15px;
    width: 275px;
  }
  .areaDD {
    width: 160px;
  }
  .cardStyle1 .lgTitle {
    margin-bottom: 5px;
  }
  .dbCardStyle,
  .borderCard {
    padding: 15px 10px;
  }
  hr {
    margin: 5px 0;
  }
  .dbCardHeader + .dbCardBody {
    margin-top: 15px;
  }
  .table.tableStyle > :not(caption) > * > * {
    padding: 4px 2px;
  }
  .btn {
    padding: 11px 10px;
  }
  .btn.logoutBtn {
    padding: 9px 14px;
  }
  .filterBtnCol {
    margin-bottom: 5px;
  }
  .formBtmBtns .minWdBtn {
    min-width: 120px;
  }
  /* modalStyle */
  .customModal .modal-body {
    padding: 10px;
  }
  .customModal h5 {
    font-size: 20px;
  }

  .modifierForm {
    max-width: 250px;
    margin: 15px 0px;
  }
  .addTopLeftFilter {
    max-width: 100%;
  }
  .qrRightBtns {
    width: 100%;
    margin-left: 0;
    padding-left: 10px;
  }
}
@media (max-width: 374px) {
  .borderCard {
    padding: 12px;
  }
}