@charset "UTF-8";
:root {
  --fontFamily: "vazir",
      "sahel";
  --mainColor: #8700b4;
  --mainColorText: #fefefe;
  --mainColorHover: #9915db;
  --close: #9e9e9e;
  --closeLight: #cdcdcd;
  --closeDark: #c6c6c6;
  --border: #737373;
  --shadow: 1px 2px 6px #dde0e590;
  --bgColor: #D9D9D9;
  --bgFooter: #EDF1FF;
  --box: #fff;
  --boxFoot: #e6e6e6;
  --boxHead: #f4f4f4;
  --boxHeadText: #050505;
  --boxBorder: #eee;
  --textColor: #413529;
  --subText: #555;
  --rvColor: #0E2338;
  --rvText: #e6e6e6;
  --tblBorder: #eee;
  --stripOdd: #fff;
  --stripEven: #f2f2f2;
  --stripHover: #e6e6e6;
  --textLink: #393939;
  --textLinkHover: #686868;
  --textLight: #e6e6e6;
  --textDark: #334155;
  --textBlue: #3598db;
  --textBlue2: #258bd0;
  --textRed: #DC3545;
  --textRed2: #c62232;
  --textYellow: #9C8F3D;
  --textYellow2: #9C8F3D;
  --textGreen: #81A97B;
  --textGreen2: #81A97B;
  --bgBlue: #1A94C4;
  --bgBlueHover: #1785b0;
  --bgGreen: #20B2AA;
  --bgGreenHover: #1da099;
  --bgRed: #d03863;
  --bgRedHover: #c02d57;
  --bgYellow: #FFD662;
  --bgYellowHover: #ffcd3f;
  --bgDark: #363945;
  --bgDarkHover: #31333e;
  --radius: 2px;
  --margin: 1.5rem;
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1
  );
  --stickyNavHeight: auto;
  --stickyOtherFromTop: 50px;
  --stickyNavBg: linear-gradient(to bottom,
          #ffffff 0%,
          #ffffff 50%,
          #ffffff 100%);
  --stickyNavTop: 0;
  --menuSep1: #F3F4F6;
  --menuSep2: #f3f5f7;
  --menuText: #666;
  --menuTextResponsive: #4d4c4c;
  --menuIcon: #485c78;
  --menuIconBg: #dde0e5;
  --menuSub: var(--boxHead);
  --menuItem: var(--box);
  --menuSubText: #485c78;
  --menu1: #fff;
  --menu2: #f7f7f7;
  --menu3: #f2f2f2;
  --menu4: #ebebeb;
  --menu5: #e6e6e6;
  --menu6: #dedede;
  --modalZIndex: 1040;
  --modalOverlay: rgba(0, 0, 0, 0.8);
  --modalPadding: 30px;
  --modalCloseSize: 32px;
  --modalMaxWidth: 600px;
  --input: #ffffff;
  --inputFocus: var(--mainColor);
  --inputText: #28313C;
  --inputBorder: #ccc;
  --checkbox: #d1e1fd;
  --checkHover: #bbcae4;
  --checked: #007295;
  --checkedText: #fdfdfd;
  --label: #555;
  --selectSep: #e9e9e9;
  --btnColor: #1A94C4;
  --btnHover: #1785b0;
  --btnText: #fdfdfd;
  --alertGreen: #006B54;
  --alertGreenText: #fdfdfd;
  --alertGreenHover: #1da099;
  --alertYellow: #c07a10;
  --alertYellowText: #eeeeee;
  --alertYellowHover: #93641d;
  --alertBlue: #30405F;
  --alertBlueText: #5A8DEE;
  --alertBlueHover: #2b3a55;
  --alertRed: #BE394F;
  --alertRedText: #fff;
  --alertRedHover: #ffdae3;
  --alertDark: #323E52;
  --alertDarkText: #d7d7d7;
  --alertDarkHover: #2d384a;
  --btnGreen: #2B4C4F;
  --btnGreenText: #39DA8A;
  --btnGreenHover: #274447;
  --btnYellow: #4A4544;
  --btnYellowText: #FDAC41;
  --btnYellowHover: #433e3d;
  --btnBlue: #30405F;
  --btnBlueText: #5A8DEE;
  --btnBlueHover: #2b3a55;
  --btnRed: #4A3848;
  --btnRedText: #FF5B5C;
  --btnRedHover: #433241;
  --btnDark: #323E52;
  --btnDarkText: #d7d7d7;
  --btnDarkHover: #2d384a;
  --btnLight: #d6dce3;
  --btnLightText: #555;
  --btnLightHover: #c7d0da;
  --btnDef: var(--btnLight);
  --btnDefText: var(--btnLightText);
  --btnDefHover: var(--btnLightHover);
  --tabBtnActive: #698295;
  --tabBtnHover: #6982951A;
  --tabBtnHoverText: #698295;
  --tabBtnText: var(--btnText);
  --tabBtnActiveShadow: 0 4px 12px #6982954D;
  --sdpBg: #ffffff;
  --sdpBorder: #e5e5e5;
  --sdpTxt: #444;
  --sdpSubBg: #b9b9b9;
  --sdpSubTxt: #555;
  --sdpBtn: #e4e4e4;
  --sdpWeekTxt: #176f7a;
  --sdpCellBorder: #ccc;
  --sdpSubBgend: #c80842;
  --sdpToday: #bb9f59;
  --sdpHover: rgb(130, 170, 190);
  --boxPadding: 8px;
}

.darkTheme {
  --mainColor: #38389f;
  --mainColorText: #fefefe;
  --mainColorHover: #353598;
  --border: #6d6d6d;
  --shadow: 1px 2px 6px #00000040;
  --bgColor: #121212;
  --bgFooter: #202020;
  --box: #31363F;
  --boxFoot: #333333;
  --boxHead: #222831;
  --boxHeadText: #d4d4d4;
  --boxBorder: #242424;
  --textColor: #e6e6e6;
  --subText: #b3b3b3;
  --rvColor: #fff;
  --rvText: #334155;
  --tblBorder: #393939;
  --stripOdd: #31363F;
  --stripEven: #2f333c;
  --stripHover: #2c3139;
  --textLink: #efefef;
  --textLinkHover: #cecece;
  --textBlue: #19bfd3;
  --textBlue2: #16acbe;
  /* --stickyNavBg: linear-gradient(180deg, #163555, #163453, #163555); */
  --stickyNavBg: linear-gradient(to bottom,
          #212121 0%,
          #212121 50%,
          #212121 100%);
  --menuSep1: #333333;
  --menuSep2: #1e1e1e;
  --menuText: #999;
  --menuTextResponsive: #cdcdcd;
  --menuIcon: #F8F8FF;
  --menuIconBg: #3F3F3F;
  --menuSub: var(--boxHead);
  --menuItem: var(--box);
  --menuSubText: #e6e6e6;
  --menu1: #202830;
  --menu2: #1e262e;
  --menu3: #1d242b;
  --menu4: #1b2229;
  --menu5: #1a2026;
  --menu6: #181e24;
  --input: #181C17;
  --inputFocus: var(--mainColor);
  --inputText: #a5a5a5;
  --inputBorder: #181C17;
  --checkbox: #d1e1fd;
  --checkHover: #bbcae4;
  --checked: #007295;
  --checkedText: #fdfdfd;
  --label: #a5a5a5;
  --selectSep: #242424;
  --btnDef: var(--btnDark);
  --btnDefText: var(--btnDarkText);
  --btnDefHover: var(--btnDarkHover);
  --tabBtnActive: #181c22;
  --tabBtnHover: #181c221A;
  --tabBtnHoverText: #fff;
  --tabBtnText: var(--btnText);
  --tabBtnActiveShadow: 0 4px 12px #181c224D;
  --sdpBg: #485167;
  --sdpBorder: #222831;
  --sdpTxt: #BCBCBE;
  --sdpSubBg: #41495d;
  --sdpSubTxt: #a9a9ab;
  --sdpBtn: #323948;
  --sdpWeekTxt: #19bfd3;
  --sdpCellBorder: #666;
  --sdpSubBgend: #E47A2E;
  --sdpToday: #554d48;
  --sdpHover: #12141a;
}

.admin-bar {
  --stickyNavTop: 32px;
  --stickyOtherFromTop: 82px;
}
@media (max-width: 767px) {
  .admin-bar {
    --stickyOtherFromTop: 50px;
  }
}

@font-face {
  font-family: "Vazir";
  src: url("../fonts/Vazirmatn[wght].woff2") format("woff2 supports variations"), url("../fonts/Vazirmatn[wght].woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

*:focus {
  outline: 0;
  box-shadow: none;
  border: none;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a,
.textLink {
  text-decoration: none;
  color: var(--textLink);
  transition: all 0.3s ease;
}
a:hover,
.textLink:hover {
  color: var(--textLinkHover);
  transition: all 0.3s ease;
}

img {
  max-width: 100%;
}

.closeBtn {
  position: absolute;
  top: 4px;
  left: 4px;
  width: var(--modalCloseSize);
  min-width: var(--modalCloseSize);
  height: var(--modalCloseSize);
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--label);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.closeBtn:hover {
  background-color: var(--boxHead);
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-5px);
  }
  40%, 80% {
    transform: translateX(5px);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInFromBottom {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.loader {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid var(--border);
  border-left-color: transparent;
  border-radius: 50%;
  animation: 0.75s linear infinite loader;
}

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1030;
  cursor: pointer;
}

body {
  /* font-family: 'IRANSans', 'vazir', 'sahel'; */
  font-family: var(--fontFamily);
  font-size: 0.8rem;
  background-color: var(--bgColor);
  color: var(--textColor);
  transition: all 0.3s ease;
}

.contFluid {
  width: 100%;
  padding-right: 16px;
  padding-left: 16px;
  margin: 0 auto;
}

.cont {
  width: 100%;
  padding-right: 16px;
  padding-left: 16px;
  margin: 0 auto;
}
@media (min-width: 576px) {
  .cont {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .cont {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .cont {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .cont {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .cont {
    max-width: 1320px;
  }
}

.boxTest {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}
.boxTest.boxTest1 {
  background-color: rgb(113, 67, 155);
  color: #fff;
}
.boxTest.boxTest2 {
  background-color: rgb(152, 51, 80);
  color: #fff;
}
.boxTest.boxTest3 {
  background-color: rgb(30, 116, 170);
  color: #fff;
}
.boxTest.boxTest4 {
  background-color: burlywood;
}
.boxTest.boxTest5 {
  background-color: chocolate;
  color: #fff;
}
.boxTest.boxTest6 {
  background-color: cornflowerblue;
}
.boxTest.boxTest7 {
  background-color: rgb(28, 132, 132);
  color: #fff;
}
.boxTest.boxTest8 {
  background-color: rgb(109, 92, 7);
  color: #fff;
}

.gridBox {
  display: grid;
  gap: var(--margin);
  width: 100%;
  max-width: 100%;
}
.gridBox > * {
  min-width: 0;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  height: -moz-max-content;
  height: max-content;
}
.gridBox > *.h100 {
  height: 100%;
}
.gridBox > *.selfCenter {
  align-self: center;
}
.gridBox > *.selfEnd {
  align-self: end;
}
.gridBox > * > * {
  max-width: 100%;
}
.gridBox.gap {
  gap: var(--margin);
}
.gridBox.gap0 {
  gap: 0;
}
.gridBox.gap5 {
  gap: 5px;
}
.gridBox.gap10 {
  gap: 10px;
}
.gridBox.gap15 {
  gap: 15px;
}
.gridBox.gap20 {
  gap: 20px;
}
.gridBox.gap25 {
  gap: 25px;
}
.gridBox.gap30 {
  gap: 30px;
}
.gridBox.grid5, .gridBox.grid554, .gridBox.grid553, .gridBox.grid552, .gridBox.grid551, .gridBox.grid54, .gridBox.grid543, .gridBox.grid542, .gridBox.grid541, .gridBox.grid53, .gridBox.grid532, .gridBox.grid531, .gridBox.grid52, .gridBox.grid521, .gridBox.grid51 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.gridBox.grid4, .gridBox.grid443, .gridBox.grid442, .gridBox.grid441, .gridBox.grid43, .gridBox.grid432, .gridBox.grid431, .gridBox.grid42, .gridBox.grid421, .gridBox.grid41 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gridBox.grid4 .xCenter, .gridBox.grid443 .xCenter, .gridBox.grid442 .xCenter, .gridBox.grid441 .xCenter, .gridBox.grid43 .xCenter, .gridBox.grid432 .xCenter, .gridBox.grid431 .xCenter, .gridBox.grid42 .xCenter, .gridBox.grid421 .xCenter, .gridBox.grid41 .xCenter {
  grid-column-start: 2;
  transform: translateX(-50%);
}
.gridBox.grid3, .gridBox.grid332, .gridBox.grid331, .gridBox.grid32, .gridBox.grid321, .gridBox.grid31 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gridBox.grid3 .xCenter, .gridBox.grid332 .xCenter, .gridBox.grid331 .xCenter, .gridBox.grid32 .xCenter, .gridBox.grid321 .xCenter, .gridBox.grid31 .xCenter {
  grid-column-start: 2;
}
.gridBox.grid2, .gridBox.grid221, .gridBox.grid21 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gridBox.grid2 .xCenter, .gridBox.grid221 .xCenter, .gridBox.grid21 .xCenter {
  transform: translateX(-50%);
}
@media (max-width: 991px) {
  .gridBox.grid54, .gridBox.grid543, .gridBox.grid542, .gridBox.grid541 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gridBox.grid53, .gridBox.grid532, .gridBox.grid531, .gridBox.grid43, .gridBox.grid432, .gridBox.grid431, .gridBox.grid332, .gridBox.grid331 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gridBox.grid53 .xCenter, .gridBox.grid532 .xCenter, .gridBox.grid531 .xCenter, .gridBox.grid43 .xCenter, .gridBox.grid432 .xCenter, .gridBox.grid431 .xCenter, .gridBox.grid332 .xCenter, .gridBox.grid331 .xCenter {
    grid-column-start: 2;
    transform: none;
  }
  .gridBox.grid52, .gridBox.grid521, .gridBox.grid42, .gridBox.grid421, .gridBox.grid32, .gridBox.grid321 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gridBox.grid52 .xCenter, .gridBox.grid521 .xCenter, .gridBox.grid42 .xCenter, .gridBox.grid421 .xCenter, .gridBox.grid32 .xCenter, .gridBox.grid321 .xCenter {
    grid-column-start: 1;
    transform: translateX(-50%);
  }
  .gridBox.grid51, .gridBox.grid41, .gridBox.grid31, .gridBox.grid21 {
    grid-template-columns: minmax(0, 1fr);
  }
  .gridBox.grid51 .xCenter, .gridBox.grid41 .xCenter, .gridBox.grid31 .xCenter, .gridBox.grid21 .xCenter {
    grid-column-start: 1;
    transform: none;
  }
}
@media (max-width: 767px) {
  .gridBox.grid554, .gridBox.grid54 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gridBox.grid553, .gridBox.grid543, .gridBox.grid53, .gridBox.grid443, .gridBox.grid43, .gridBox.grid33 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gridBox.grid553 .xCenter, .gridBox.grid543 .xCenter, .gridBox.grid53 .xCenter, .gridBox.grid443 .xCenter, .gridBox.grid43 .xCenter, .gridBox.grid33 .xCenter {
    grid-column-start: 2;
    transform: none;
  }
  .gridBox.grid552, .gridBox.grid542, .gridBox.grid532, .gridBox.grid52, .gridBox.grid442, .gridBox.grid432, .gridBox.grid42, .gridBox.grid332, .gridBox.grid32 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gridBox.grid552 .xCenter, .gridBox.grid542 .xCenter, .gridBox.grid532 .xCenter, .gridBox.grid52 .xCenter, .gridBox.grid442 .xCenter, .gridBox.grid432 .xCenter, .gridBox.grid42 .xCenter, .gridBox.grid332 .xCenter, .gridBox.grid32 .xCenter {
    grid-column-start: 1;
    transform: translateX(-50%);
  }
  .gridBox.grid551, .gridBox.grid541, .gridBox.grid531, .gridBox.grid521, .gridBox.grid51, .gridBox.grid441, .gridBox.grid431, .gridBox.grid421, .gridBox.grid41, .gridBox.grid331, .gridBox.grid321, .gridBox.grid31, .gridBox.grid221, .gridBox.grid21 {
    grid-template-columns: minmax(0, 1fr);
  }
  .gridBox.grid551 .xCenter, .gridBox.grid541 .xCenter, .gridBox.grid531 .xCenter, .gridBox.grid521 .xCenter, .gridBox.grid51 .xCenter, .gridBox.grid441 .xCenter, .gridBox.grid431 .xCenter, .gridBox.grid421 .xCenter, .gridBox.grid41 .xCenter, .gridBox.grid331 .xCenter, .gridBox.grid321 .xCenter, .gridBox.grid31 .xCenter, .gridBox.grid221 .xCenter, .gridBox.grid21 .xCenter {
    grid-column-start: 1;
    transform: none;
  }
}
.gridBox img,
.gridBox video,
.gridBox iframe {
  max-width: 100%;
  height: auto;
}
.gridBox .spn5,
.gridBox .spn554,
.gridBox .spn553,
.gridBox .spn552,
.gridBox .spn551,
.gridBox .spn54,
.gridBox .spn543,
.gridBox .spn542,
.gridBox .spn541,
.gridBox .spn53,
.gridBox .spn532,
.gridBox .spn531,
.gridBox .spn52,
.gridBox .spn521,
.gridBox .spn51 {
  grid-column: span 5;
}
.gridBox .spn4,
.gridBox .spn443,
.gridBox .spn442,
.gridBox .spn441,
.gridBox .spn43,
.gridBox .spn432,
.gridBox .spn431,
.gridBox .spn42,
.gridBox .spn421,
.gridBox .spn41 {
  grid-column: span 4;
}
.gridBox .spn3,
.gridBox .spn332,
.gridBox .spn331,
.gridBox .spn32,
.gridBox .spn321,
.gridBox .spn31 {
  grid-column: span 3;
}
.gridBox .spn2,
.gridBox .spn221,
.gridBox .spn21 {
  grid-column: span 2;
}
.gridBox .spn1 {
  grid-column: span 1;
}
@media (max-width: 991px) {
  .gridBox .spn54,
  .gridBox .spn543,
  .gridBox .spn542,
  .gridBox .spn541,
  .gridBox .spn443,
  .gridBox .spn442,
  .gridBox .spn441 {
    grid-column: span 4;
  }
  .gridBox .spn53,
  .gridBox .spn532,
  .gridBox .spn531,
  .gridBox .spn43,
  .gridBox .spn432,
  .gridBox .spn431,
  .gridBox .spn332,
  .gridBox .spn331 {
    grid-column: span 3;
  }
  .gridBox .spn52,
  .gridBox .spn521,
  .gridBox .spn42,
  .gridBox .spn421,
  .gridBox .spn32,
  .gridBox .spn321,
  .gridBox .spn221 {
    grid-column: span 2;
  }
  .gridBox .spn51,
  .gridBox .spn41,
  .gridBox .spn31,
  .gridBox .spn21 {
    grid-column: span 1;
  }
}
@media (max-width: 767px) {
  .gridBox .spn554,
  .gridBox .spn54 {
    grid-column: span 4;
  }
  .gridBox .spn553,
  .gridBox .spn543,
  .gridBox .spn53,
  .gridBox .spn443,
  .gridBox .spn43,
  .gridBox .spn33 {
    grid-column: span 3;
  }
  .gridBox .spn552,
  .gridBox .spn542,
  .gridBox .spn532,
  .gridBox .spn52,
  .gridBox .spn442,
  .gridBox .spn432,
  .gridBox .spn42,
  .gridBox .spn332,
  .gridBox .spn32 {
    grid-column: span 2;
  }
  .gridBox .spn551,
  .gridBox .spn541,
  .gridBox .spn531,
  .gridBox .spn521,
  .gridBox .spn51,
  .gridBox .spn441,
  .gridBox .spn431,
  .gridBox .spn421,
  .gridBox .spn41,
  .gridBox .spn331,
  .gridBox .spn321,
  .gridBox .spn31,
  .gridBox .spn221,
  .gridBox .spn21 {
    grid-column: span 1;
  }
}

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--modalOverlay);
  z-index: var(--modalZIndex);
  display: flex;
  justify-content: center;
  align-items: start;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.modalOverlay.active {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 768px) {
  .modalOverlay {
    align-items: flex-start;
    padding-top: 20px;
  }
}
.modalOverlay .modalBox {
  background-color: var(--box);
  border-radius: var(--radius);
  width: var(--modalMaxWidth);
  max-width: 90%;
  max-height: 90vh;
  margin-top: 5vh;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.modalOverlay .modalBox .closeBtn {
  right: 4px;
}
.modalOverlay .modalBox .modalContent {
  background-color: var(--box);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 30px;
  max-height: 90vh;
  overflow-y: auto;
}
.modalOverlay .modalBox .modalContent.p0 {
  padding: 0;
}
.modalOverlay .modalBox .modalContent .stickySearchInput {
  position: sticky;
  top: 0;
  z-index: 1020;
}
.modalOverlay .modalBox .modalHead {
  height: 50px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 10px 0 30px;
  border-bottom: 1px solid var(--boxHead);
}
.modalOverlay .modalBox .modalHead .closeBtn {
  position: initial;
}
.modalOverlay .modalBox .modalHead .modalTitle {
  flex-grow: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modalOverlay .modalBox .modalHead ~ .modalContent {
  max-height: calc(90vh - 50px);
}
.modalOverlay.modal200 .modalBox {
  width: 200px;
}
.modalOverlay.modal300 .modalBox {
  width: 300px;
}
.modalOverlay.modal400 .modalBox {
  width: 400px;
}
.modalOverlay.modal900 .modalBox {
  width: 900px;
}
.modalOverlay.modal100 {
  height: 100vh;
}
@media screen and (max-width: 768px) {
  .modalOverlay.modal100 {
    padding-top: 0;
  }
}
.modalOverlay.modal100 .modalBox {
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;
  margin-top: 0;
  background-color: var(--bgColor);
}
.modalOverlay.modal100 .modalContent {
  max-height: 100vh;
  background-color: var(--bgColor);
}
.modalOverlay.modal100 .modalHead {
  background-color: var(--stripEven);
}
.modalOverlay.modal100 .modalHead ~ .modalContent {
  max-height: calc(100vh - 50px);
}
.modalOverlay.modalPersistent .modalBox .closeBtn {
  transition: all 0.1s ease;
}
.modalOverlay.modalPersistent .closeBtn.shake {
  background-color: rgba(255, 59, 48, 0.3);
  animation: shake 0.2s ease;
}
.modalOverlay.ofYV {
  overflow-y: auto;
}
.modalOverlay.ofYV .modalContent {
  overflow-y: visible;
}

.formBox *:focus {
  outline: 0;
  box-shadow: none;
}
.formBox input[type=text],
.formBox input[type=email],
.formBox input[type=number],
.formBox input[type=tel],
.formBox input[type=password],
.formBox select,
.formBox textarea {
  font-family: var(--fontFamily);
  font-size: 16px;
  width: 100%;
  height: 40px;
  padding: 10px;
  background-color: var(--input);
  color: var(--inputText);
  border-radius: var(--radius);
  border: 1px solid var(--inputBorder);
  box-shadow: none;
}
.formBox input[type=text]:focus,
.formBox input[type=email]:focus,
.formBox input[type=number]:focus,
.formBox input[type=tel]:focus,
.formBox input[type=password]:focus,
.formBox select:focus,
.formBox textarea:focus {
  border-color: var(--inputFocus);
}
.formBox select {
  /* height: 40px; */
  padding: 0 10px;
}
.formBox select.sm {
  height: 30px;
}
.formBox textarea {
  height: 150px;
  resize: vertical;
}
.formBox select option {
  color: var(--option);
}
.formBox label {
  color: var(--label);
}
.formBox .submitBtn,
.formBox button,
.formBox button[type=submit] {
  /* width: 100%; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btnColor);
  height: 40px;
  padding: 10px 25px;
  border: 0;
  outline: 0;
  color: var(--btnText);
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.3s ease;
}
.formBox .submitBtn:hover,
.formBox button:hover,
.formBox button[type=submit]:hover {
  background-color: var(--btnHover);
  color: var(--btnText);
  transition: all 0.3s ease;
}
.formBox .submitBtn.w100,
.formBox button.w100,
.formBox button[type=submit].w100 {
  width: 100%;
}
.formBox .submitBtn.waiting,
.formBox button.waiting,
.formBox button[type=submit].waiting {
  pointer-events: none;
  align-items: center;
  position: relative;
  background-color: rgba(0, 0, 0, 0.4392156863);
  border-color: rgba(0, 0, 0, 0.4392156863);
  transition: all 0.3s ease;
}
.formBox .submitBtn.waiting:before,
.formBox button.waiting:before,
.formBox button[type=submit].waiting:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1882352941);
  border-radius: var(--radius);
  left: 0;
}
.formBox .submitBtn.waiting:after,
.formBox button.waiting:after,
.formBox button[type=submit].waiting:after {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  left: 10px;
  border: 0.1em solid #ccc;
  border-left-color: transparent;
  border-radius: 50%;
  animation: 0.75s linear infinite loader;
}
.formBox .submitBtn i,
.formBox button i,
.formBox button[type=submit] i {
  margin-left: 10px;
}

.ajaxErr,
.ajaxErrBtn {
  color: var(--textRed);
}

.formGroup {
  display: inline-flex;
}
.formGroup .label {
  /* padding: 5px 10px; */
  height: 40px;
  padding: 10px;
  background-color: var(--boxHead);
  color: var(--textColor);
  border: 1px solid var(--inputBorder);
  border-left: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.formGroup select {
  font-family: var(--fontFamily);
  height: 40px;
  padding: 0 10px;
  background-color: var(--input);
  color: var(--inputText);
  border: 1px solid var(--inputBorder);
  border-radius: var(--radius) 0 0 var(--radius);
}
.formGroup.w4060 {
  width: 100%;
}
.formGroup.w4060 label {
  width: 40%;
}
.formGroup.w4060 select {
  width: 60%;
}
.formGroup.sm label,
.formGroup.sm select {
  padding: 0 10px;
  height: 30px;
}

.floatBox {
  position: relative;
}
.floatBox label {
  position: absolute;
  pointer-events: none;
  top: 15px;
  right: 15px;
  color: var(--label);
  transition: all 0.1s ease;
}
.floatBox input,
.floatBox textarea,
.floatBox select {
  width: 100%;
  padding-top: 25px !important;
  padding-bottom: 5px !important;
  padding-right: 20px !important;
  padding-left: 10px !important;
  background-color: var(--input);
  color: var(--inputText);
  border-radius: var(--radius);
  border: 1px solid var(--inputBorder);
  box-shadow: none;
  height: 52px !important;
}
.floatBox select {
  padding-top: 23px;
  height: 52px;
  padding-bottom: 0 !important;
}
.floatBox input:not(:-moz-placeholder) ~ label, .floatBox textarea:not(:-moz-placeholder) ~ label {
  font-size: 11px;
  top: 5px;
  right: 10px;
  -moz-transition: all 0.1s ease;
  transition: all 0.1s ease;
}
.floatBox input:focus ~ label,
.floatBox input:not(:placeholder-shown) ~ label,
.floatBox textarea:focus ~ label,
.floatBox textarea:not(:placeholder-shown) ~ label,
.floatBox select ~ label {
  font-size: 11px;
  top: 5px;
  right: 10px;
  transition: all 0.1s ease;
}
.floatBox textarea {
  height: 150px !important;
  resize: vertical;
}
.floatBox input:focus,
.floatBox textarea:focus,
.floatBox select:focus {
  border-color: var(--inputFocus);
}

.clearText {
  position: relative;
}
.clearText i {
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--label);
  border-radius: 22px;
  top: 11px;
  left: 7px;
  display: none;
  cursor: pointer;
}
.clearText i:after, .clearText i:before {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 2px;
  background: var(--label);
  border-radius: 5px;
  top: 6px;
  left: 2px;
  transform: rotate(45deg);
}
.clearText i:after {
  width: 2px;
  height: 10px;
  top: 2px;
  left: 6px;
}
.clearText input {
  font-family: var(--fontFamily);
  font-size: 16px;
  width: 100%;
  height: 40px;
  padding: 10px;
  background-color: var(--input);
  color: var(--inputText);
  border-radius: var(--radius);
  border: 1px solid var(--inputBorder);
  box-shadow: none;
  padding-left: 30px;
}
.clearText input:focus {
  border-color: var(--inputFocus);
}
.clearText input:not(:-moz-placeholder) ~ i {
  display: block;
}
.clearText input:not(:placeholder-shown) ~ i {
  display: block;
}
.clearText input.ltr ~ i {
  right: 7px;
}
.clearText.sm i {
  top: 6px;
}
.clearText.sm input {
  padding: 0 5px;
  height: auto;
  height: 30px;
}
.clearText.sm input:not(:-moz-placeholder) {
  padding-left: 30px;
}
.clearText.sm input:not(:placeholder-shown) {
  padding-left: 30px;
}
.clearText.sm input.ltr {
  padding-left: 10px;
  padding-right: 30px;
}
.clearText.floatBox i {
  top: 25px;
}

.checkBox,
.radioBox {
  display: block;
  position: relative;
  padding-right: 25px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100%;
  min-height: 20px;
}
.checkBox:hover input ~ .checkmark,
.radioBox:hover input ~ .checkmark {
  background-color: var(--checkHover);
  transition: all 0.3s ease;
  cursor: pointer;
}
.checkBox input,
.radioBox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkBox input:checked ~ .checkmark,
.radioBox input:checked ~ .checkmark {
  background-color: var(--checked);
}
.checkBox input:checked ~ .checkmark:after, .checkBox input:checked ~ .checkmark:before,
.radioBox input:checked ~ .checkmark:after,
.radioBox input:checked ~ .checkmark:before {
  display: block;
}
.checkBox .checkmark,
.radioBox .checkmark {
  position: absolute;
  top: 0;
  right: 0;
  height: 20px;
  width: 20px;
  background-color: var(--input);
  border: 1px solid var(--inputBorder);
  box-shadow: none;
  border-radius: var(--radius);
  transition: all 0.3s ease;
}
.checkBox .checkmark:after, .checkBox .checkmark:before,
.radioBox .checkmark:after,
.radioBox .checkmark:before {
  content: "";
  position: absolute;
  display: none;
}

.radioBox .checkmark {
  border-radius: 50%;
}
.radioBox .checkmark:after {
  right: 6px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--input);
}

.checkBox .checkmark:after {
  right: 6px;
  top: 1px;
  width: 5px;
  height: 12px;
  border: solid var(--input);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.radioBtn {
  display: inline-flex;
  position: relative;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100%;
}
.radioBtn input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.radioBtn input:checked ~ .checkmark {
  background-color: var(--checked);
  color: var(--checkedText);
}
.radioBtn .checkmark {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: var(--input);
  color: var(--inputText);
  border-radius: var(--radius);
  border: 1px solid var(--inputBorder);
}

.selectBox {
  width: 100%;
  border-radius: var(--radius);
  position: relative;
}
.selectBox .selectBoxHead {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 10px 10px 10px 25px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  z-index: 2;
  background-color: var(--input);
  color: var(--inputText);
  border: 1px solid var(--inputBorder);
  border-radius: var(--radius);
}
.selectBox .selectBoxHead:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 13px;
  border: solid var(--menuIcon);
  border-width: 0 2px 2px 0;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.selectBox .selectBoxHead.active {
  border-radius: var(--radius) var(--radius) 0 0;
  border-color: var(--inputFocus);
}
.selectBox .selectBoxBody {
  position: absolute;
  width: 100%;
  top: 100%;
  right: 0;
  display: none;
  z-index: 10;
  background-color: var(--box);
  border: 1px solid var(--inputBorder);
  border-top: none;
  border-color: var(--inputFocus);
}
.selectBox .selectBoxBody .clearText {
  margin: 10px;
}
.selectBox .selectBoxBody .list {
  max-height: 300px;
  overflow: auto;
}
.selectBox .selectBoxBody .list label {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100%;
}
.selectBox .selectBoxBody .list label .checkmark {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px;
  color: var(--inputText);
  border-bottom: 1px solid var(--selectSep);
}
.selectBox .selectBoxBody .list label .checkmark i {
  margin-left: 5px;
}
.selectBox .selectBoxBody .list label input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}
.selectBox .selectBoxBody .list label input:checked ~ .checkmark {
  background-color: var(--checked);
  color: var(--checkedText);
  border-bottom: none;
}
.selectBox .uncheckAll {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--menuIcon);
  border-radius: 22px;
  cursor: pointer;
}
.selectBox .uncheckAll:after, .selectBox .uncheckAll:before {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 2px;
  background: var(--menuIcon);
  border-radius: 5px;
  top: 6px;
  left: 2px;
  transform: rotate(45deg);
}
.selectBox .uncheckAll:after {
  transform: rotate(-45deg);
}
.selectBox.float .selectBoxHead {
  padding-top: 25px;
  height: 52px;
}
.selectBox.float .selectBoxHead:before {
  top: 18px;
}
.selectBox.float .label {
  position: absolute;
  top: 15px;
  right: 10px;
  color: var(--label);
  transition: all 0.1s ease;
  z-index: 3;
  pointer-events: none;
}
.selectBox.float .label.floated {
  position: absolute;
  font-size: 11px;
  top: 5px;
  right: 10px;
  transition: all 0.1s ease;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--input);
  border: 1px solid var(--inputBorder);
  border-radius: var(--radius);
  transition: 0.3s;
}
.switch .slider::before {
  content: "";
  position: absolute;
  height: 17px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: var(--boxHead);
  border-radius: 50%;
  border-radius: var(--radius);
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.switch input:checked + .slider {
  background-color: var(--checked) !important;
}
.switch input:checked + .slider::before {
  transform: translateX(20px);
}
.switch .withText::after {
  content: "OFF";
  position: absolute;
  right: 4px;
  color: var(--rvText);
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.switch input:checked + .withText::after {
  content: "ON";
  left: 6px;
  right: auto;
  color: var(--textLight);
}
.switch.iconSwitch .slider::before {
  content: "\f039";
  font-family: "FontAwesome";
  font-size: 23px;
  left: 5px;
  background-color: transparent;
  bottom: 3px;
}
.switch.iconSwitch input:checked + .slider::before {
  content: "\f009";
  transform: translateX(18px);
}
.switch.iconSwitch.switchLg {
  height: 30px;
}
.switch.iconSwitch.switchLg .slider::before {
  height: 23px;
  width: 23px;
  font-size: 26px;
  bottom: 2px;
  left: 6px;
}
.switch.iconSwitch.switchLg input:checked + .slider {
  background-color: var(--boxHead);
}
.switch.iconSwitch.switchLg input:checked + .slider::before {
  transform: translateX(14px);
  color: var(--checkedText);
}

.switchWrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.switchWrapper .switchLabel {
  font-size: 14px;
  cursor: pointer;
}

.checkList {
  background-color: var(--box);
  padding: var(--margin);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.checkList > label {
  display: block;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--mainColor);
  margin-bottom: var(--margin);
}

.dataTableControl {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 15px;
  background-color: var(--stripOdd);
  justify-content: space-between;
  border-radius: var(--radius) var(--radius) 0 0;
}
.dataTableControl .clearText {
  flex-grow: 1;
}

.tableBox,
.tableResponsive {
  width: 100%;
  max-width: 100%;
}
.tableBox .tableContainer,
.tableResponsive .tableContainer {
  width: 100%;
  overflow-x: auto;
}
.tableBox table,
.tableResponsive table {
  border-collapse: collapse;
  width: 100%;
  background-color: var(--box);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--boxText);
}

.dataTableControl ~ table,
.dataTableControl ~ * > .alertBox,
.dataTableControl ~ * table {
  border-radius: 0 0 var(--radius) var(--radius);
}

.tableBox thead {
  background-color: var(--boxHead);
  border-bottom: 1px solid var(--tblBorder);
}
.tableBox tbody tr {
  border-top: 1px solid var(--tblBorder);
  transition: all 0.3s ease;
}
.tableBox tbody tr:first-child {
  border-top: none;
}
.tableBox tbody tr:hover {
  /* background-color: var(--boxHead); */
  transition: all 0.3s ease;
}
.tableBox th,
.tableBox td {
  padding: 15px 20px;
  white-space: nowrap;
}
.tableBox th.max400,
.tableBox td.max400 {
  max-width: 400px;
  white-space: unset;
}
.tableBox th.min200,
.tableBox td.min200 {
  min-width: 200px;
  white-space: unset;
}
.tableBox th.max200,
.tableBox td.max200 {
  max-width: 200px;
  white-space: unset;
}
.tableBox th.tdImg,
.tableBox td.tdImg {
  width: 160px;
  padding: 5px;
}
.tableBox th.tdImg img,
.tableBox td.tdImg img {
  display: table;
  margin: 0 auto;
  border-radius: var(--radius);
  max-height: 100px;
  -o-object-fit: contain;
     object-fit: contain;
}
.tableBox th.wrap,
.tableBox td.wrap, .tableBox.wrap th, .tableBox.wrap td {
  white-space: unset;
}

@media (min-width: 768px) {
  .tableResponsive table {
    background-color: var(--box);
  }
  .tableResponsive table thead {
    background-color: var(--boxHead);
    border-bottom: 1px solid var(--tblBorder);
  }
  .tableResponsive table tbody tr {
    border-bottom: 1px solid var(--tblBorder);
  }
  .tableResponsive table tbody tr:last-child {
    border-bottom: none;
  }
  .tableResponsive table th,
  .tableResponsive table td {
    padding: 15px 20px;
    white-space: nowrap;
  }
  .tableResponsive table th.max400,
  .tableResponsive table td.max400 {
    max-width: 400px;
    white-space: unset;
  }
  .tableResponsive table th.tdImg,
  .tableResponsive table td.tdImg {
    width: 160px;
    padding: 5px;
  }
  .tableResponsive table th.tdImg img,
  .tableResponsive table td.tdImg img {
    display: table;
    margin: 0 auto;
    border-radius: var(--radius);
    max-height: 100px;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
@media (max-width: 767px) {
  .tableResponsive table {
    background-color: var(--bgColor);
  }
  .tableResponsive table thead {
    display: none;
  }
  .tableResponsive tr {
    position: relative;
    background-color: var(--box);
    border: 1px solid var(--boxBorder);
    margin-bottom: 30px;
    border-bottom: 10px solid var(--bgColor);
  }
  .tableResponsive tr td {
    border-bottom: 1px solid var(--tblBorder);
    display: flex;
    padding: 10px 20px;
    background-color: var(--boxHead);
  }
  .tableResponsive tr td[data-label] {
    position: relative;
    background-color: var(--box);
    padding-right: calc(30% + 20px);
  }
  .tableResponsive tr td[data-label]:before {
    content: attr(data-label);
    background-color: var(--boxHead);
    width: 30%;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 10px 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .tableResponsive tr td.rowNumber {
    background-color: var(--boxHead);
    position: absolute;
    left: 2px;
    z-index: 1;
    padding: 2px 6px;
    border-bottom: none;
  }
  .tableResponsive tr td.rowNumber:before {
    content: "#";
  }
  .tableResponsive tr td.btns {
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .tableResponsive tr td.break {
    display: block;
  }
  .tableResponsive tr td:last-child {
    border-bottom: 0;
  }
  .tableResponsive tr th.dNone,
  .tableResponsive tr td.dNone {
    display: none;
  }
  .tableResponsive tr th.min200, .tableResponsive tr th.max200, .tableResponsive tr th.max400,
  .tableResponsive tr td.min200,
  .tableResponsive tr td.max200,
  .tableResponsive tr td.max400 {
    max-width: none;
    min-width: none;
  }
  .tableResponsive tr th.tdImg img,
  .tableResponsive tr td.tdImg img {
    display: table;
    margin: 0 auto;
    max-width: 80%;
    max-height: 100px;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
.pagination {
  display: flex;
}
.pagination ul li {
  display: inline-block;
  margin-bottom: 4px;
  padding: 5px 15px;
  background-color: var(--btnColor);
  color: var(--btnText);
  border-radius: var(--radius);
  cursor: pointer;
}
.pagination ul li:hover:not(.active):not(.dots) {
  background-color: var(--btnHover);
}
.pagination ul li.active, .pagination ul li.dots {
  background-color: var(--boxHead);
  color: var(--boxHeadText);
  cursor: default;
}
.pagination ul li.dots {
  background-color: transparent;
}

.dataTableBox .pagination {
  padding: 10px 0;
}
.dataTableBox .pagination ul li {
  margin-left: 4px;
}

.filterBadge {
  display: inline-flex;
  padding: 5px 10px;
  /* background-color: #007295; */
  align-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--inputBorder);
}
.filterBadge i {
  position: relative;
  width: 20px;
  height: 20px;
  margin-left: 5px;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.filterBadge i:before, .filterBadge i:after {
  content: "";
  width: 1px;
  height: 14px;
  position: absolute;
  background-color: var(--textRed);
  transform: rotate(45deg);
}
.filterBadge i:after {
  transform: rotate(-45deg);
}

#filterTop {
  display: flex;
  overflow-x: auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
#filterTop .btnSm {
  height: 30px;
}
@media only screen and (max-width: 767px) {
  #filterTop .formGroup .label {
    display: none;
  }
}

.alertBox {
  position: relative;
  padding: 20px;
  background-color: var(--box);
  color: var(--boxText);
  border-radius: var(--radius);
}

.box {
  background-color: var(--box);
  color: var(--boxText);
  border-radius: var(--radius);
  /* box-shadow: var(--shadow); */
}
.box .boxBody {
  /* border: 1px solid var(--boxBorder); s */
  padding: var(--margin);
  border-radius: var(--radius);
}
.box .boxHead {
  background-color: var(--boxHead);
  /* border: 1px solid var(--boxBorder); s */
  /* border-bottom: none; */
  /* border: none; */
  color: var(--boxHeadText);
  font-size: 1.1rem;
  padding: 1rem var(--margin);
  width: 100%;
  outline: none;
  transition: 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius) var(--radius) 0 0;
}
.box .boxHead ~ .boxBody {
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

.accordion {
  background-color: var(--box);
  color: var(--boxText);
  border-radius: var(--radius);
  /* box-shadow: var(--shadow); */
}
.accordion .accordionHead {
  background-color: var(--boxHead);
  /* border: 1px solid var(--boxBorder); s */
  /* border-bottom: none; */
  /* border: none; */
  color: var(--boxHeadText);
  font-size: 1.1rem;
  padding: 16px;
  width: 100%;
  outline: none;
  transition: 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-radius: var(--radius);
  position: relative;
}
.accordion .accordionHead:before, .accordion .accordionHead:after {
  content: "";
  position: absolute;
  background-color: var(--boxHeadText);
  transition: all 0.3s ease;
}
.accordion .accordionHead:before {
  width: 16px;
  height: 2px;
  left: 16px;
  transform: translateY(-50%);
}
.accordion .accordionHead:after {
  width: 2px;
  height: 14px;
  top: calc(50% - 8px);
  left: 24px;
  transform: translateX(-50%);
}
.accordion .accordionHead.active {
  border-radius: var(--radius) var(--radius) 0 0;
}
.accordion .accordionHead.active:before {
  width: 16px;
}
.accordion .accordionHead.active::after {
  opacity: 0;
  transform: translateX(-50%) scale(0);
}
.accordion .accordionBody {
  height: 0;
  overflow: hidden;
  padding: 0 12px;
  background-color: var(--box);
  transition: all 0.3s ease-out;
  /* border: 1px solid var(--boxBorder); s */
  border-top: none;
  border-bottom: none;
  border-radius: 0 0 var(--radius) var(--radius);
  /* me */
}
.accordion .accordionBody.show {
  height: auto;
  overflow: initial;
  padding: 18px 12px;
  /* border-bottom: 1px solid var(--boxBorder); s */
  transition: all 0.3s ease-out;
}

.navTabs {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--box);
  border-radius: var(--radius);
  margin-bottom: var(--margin);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1019;
}
.navTabs.stickyTabs {
  position: sticky;
  top: var(--stickyOtherFromTop);
}
.navTabs .tabBtn {
  font-family: var(--fontFamily);
  flex: 1;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--textColor);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
}
.navTabs .tabBtn i {
  font-size: 1.1rem;
  transition: var(--transition);
}
.navTabs .tabBtn:hover:not(.active) {
  background: var(--tabBtnHover);
  color: var(--tabBtnHoverText);
}
.navTabs .tabBtn.active {
  background: var(--tabBtnActive);
  color: var(--tabBtnText);
}
.navTabs .tabBtn.active i {
  color: var(--tabBtnText);
}
@media (max-width: 767px) {
  .navTabs .tabBtn {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
  .navTabs .tabBtn i {
    font-size: 1rem;
  }
}
.navTabs.navTabsSide {
  margin-bottom: 0;
}
@media (min-width: 991px) {
  .navTabs.navTabsSide {
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .navTabs.navTabsSide .tabBtn {
    flex: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 0.9rem;
  }
}

.tabContents .tabContent {
  display: none;
  animation: fadeInFromBottom 0.3s ease;
}
.tabContents .tabContent.active {
  display: block;
}

.filterCheck .clearText input {
  background-color: transparent;
  margin-bottom: 18px;
}
.filterCheck .list {
  max-height: 200px;
  overflow: auto;
}

.btn0,
.btn2,
.btn1 {
  display: inline-flex;
  align-items: center;
  /* padding: 5px 15px; */
  height: 40px;
  padding: 10px 25px;
  cursor: pointer;
  border: 1px solid var(--btnColor);
  border-radius: var(--radius);
  background-color: var(--btnColor);
  color: var(--btnText);
  transition: all 0.3s ease;
}
.btn0.btnSm,
.btn2.btnSm,
.btn1.btnSm {
  padding: 0 10px;
  height: 25px;
}
.btn0.btnLg,
.btn2.btnLg,
.btn1.btnLg {
  height: 52px !important;
}
.btn0.w100,
.btn2.w100,
.btn1.w100 {
  width: 100%;
  justify-content: center;
}
.btn0 i,
.btn2 i,
.btn1 i {
  margin-left: 7px;
}
.btn0.justIcon i,
.btn2.justIcon i,
.btn1.justIcon i {
  margin-left: 0;
  min-width: 15px;
  text-align: center;
}
.btn0 .zebraBadge,
.btn2 .zebraBadge,
.btn1 .zebraBadge {
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 2px;
  font-size: 0.7rem;
}

.btn2 {
  border-color: var(--btnHover);
  background-color: transparent;
  color: var(--textColor);
}

.btn2:hover,
.btn1:hover {
  background-color: var(--btnHover);
  color: var(--btnText);
  border-color: var(--btnColor);
  transition: all 0.1s ease;
}

.btn0 {
  border: none;
  background-color: var(--btnDef);
  color: var(--btnDefText);
}

.btn0:hover {
  background-color: var(--btnDefHover);
  transition: all 0.1s ease;
  color: var(--btnDefText);
}

.btnDef.btn1 {
  background-color: var(--box);
  color: var(--textColor);
  border-color: var(--boxHead);
}
.btnDef.btn2 {
  border-color: var(--boxHead);
  background-color: transparent;
  color: var(--textColor);
}
.btnDef:hover {
  background-color: var(--boxHead);
  color: var(--boxHeadText);
  border-color: var(--boxHead);
}

.btnBlue.btn1 {
  background-color: var(--bgBlue);
  color: var(--textLight);
  border-color: var(--bgBlue);
}
.btnBlue.btn2 {
  border-color: var(--bgBlueHover);
  background-color: transparent;
  color: var(--bgBlueHover);
}
.btnBlue:hover {
  background-color: var(--bgBlueHover);
  color: var(--textLight);
  border-color: var(--bgBlueHover);
}
.btnBlue.btn0 {
  background-color: var(--btnBlue);
  color: var(--btnBlueText);
}
.btnBlue.btn0:hover {
  background-color: var(--btnBlueHover);
  color: var(--btnBlueText);
}

.btnRed.btn1 {
  background-color: var(--bgRed);
  color: var(--textLight);
  border-color: var(--bgRed);
}
.btnRed.btn2 {
  border-color: var(--bgRedHover);
  background-color: transparent;
  color: var(--bgRedHover);
}
.btnRed:hover {
  background-color: var(--bgRedHover);
  color: var(--textLight);
  border-color: var(--bgRedHover);
}
.btnRed.btn0 {
  background-color: var(--btnRed);
  color: var(--btnRedText);
}
.btnRed.btn0:hover {
  background-color: var(--btnRedHover);
  color: var(--btnRedText);
}

.btnGreen.btn1 {
  background-color: var(--bgGreen);
  color: var(--textLight);
  border-color: var(--bgGreen);
}
.btnGreen.btn2 {
  border-color: var(--bgGreenHover);
  background-color: transparent;
  color: var(--bgGreenHover);
}
.btnGreen:hover {
  background-color: var(--bgGreenHover);
  color: var(--textLight);
  border-color: var(--bgGreenHover);
}
.btnGreen.btn0 {
  background-color: var(--btnGreen);
  color: var(--btnGreenText);
}
.btnGreen.btn0:hover {
  background-color: var(--btnGreenHover);
  color: var(--btnGreenText);
}

.btnYellow.btn1 {
  background-color: var(--bgYellow);
  color: var(--textDark);
  border-color: var(--bgYellow);
}
.btnYellow.btn2 {
  border-color: var(--bgYellowHover);
  background-color: transparent;
  color: var(--bgYellowHover);
}
.btnYellow:hover {
  background-color: var(--bgYellowHover);
  color: var(--textDark);
  border-color: var(--bgYellowHover);
}
.btnYellow.btn0 {
  background-color: var(--btnYellow);
  color: var(--btnYellowText);
}
.btnYellow.btn0:hover {
  background-color: var(--btnYellowHover);
  color: var(--btnYellowText);
}

.btnDark.btn1 {
  background-color: var(--bgDark);
  color: var(--textLight);
  border-color: var(--bgDark);
}
.btnDark.btn2 {
  border: 1px solid var(--bgDarkHover);
  background-color: transparent;
  /* color: var(--bgDarkHover); */
  color: var(--rvColor);
}
.btnDark:hover {
  background-color: var(--bgDarkHover);
  color: var(--textLight);
  border-color: var(--bgDarkHover);
}
.btnDark.btn0 {
  background-color: var(--btnDark);
  color: var(--btnDarkText);
}
.btnDark.btn0:hover {
  background-color: var(--btnDarkHover);
  color: var(--btnDarkText);
}

.btnLight.btn0 {
  background-color: var(--btnLight);
  color: var(--btnLightText);
}
.btnLight.btn0:hover {
  background-color: var(--btnLightHover);
  color: var(--btnLightText);
}

.btn0,
.btn2,
.btn1,
.submitBtn {
  font-family: var(--fontFamily);
}
.btn0.deactive,
.btn2.deactive,
.btn1.deactive,
.submitBtn.deactive {
  pointer-events: none;
  position: relative;
  border: none;
  overflow: hidden;
  transition: all 0.3s ease;
}
.btn0.deactive:before,
.btn2.deactive:before,
.btn1.deactive:before,
.submitBtn.deactive:before {
  content: "";
  position: absolute;
  background-color: var(--box);
  opacity: 0.75;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.btn0.waiting,
.btn2.waiting,
.btn1.waiting,
.submitBtn.waiting {
  pointer-events: none;
  align-items: center;
  position: relative;
  background-color: rgba(0, 0, 0, 0.4392156863);
  border-color: rgba(0, 0, 0, 0.4392156863);
  transition: all 0.3s ease;
  padding-right: 15px;
  padding-left: 35px;
}
.btn0.waiting:before,
.btn2.waiting:before,
.btn1.waiting:before,
.submitBtn.waiting:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1882352941);
  border-radius: var(--radius);
  left: 0;
}
.btn0.waiting:after,
.btn2.waiting:after,
.btn1.waiting:after,
.submitBtn.waiting:after {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  left: 10px;
  border: 0.1em solid #ccc;
  border-left-color: transparent;
  border-radius: 50%;
  animation: 0.75s linear infinite loader;
}
.btn0.waiting.justIcon,
.btn2.waiting.justIcon,
.btn1.waiting.justIcon,
.submitBtn.waiting.justIcon {
  padding-right: 25px;
  padding-left: 25px;
}
.btn0.waiting.justIcon::after,
.btn2.waiting.justIcon::after,
.btn1.waiting.justIcon::after,
.submitBtn.waiting.justIcon::after {
  left: 20px;
}
.btn0.btnSm.waiting,
.btn2.btnSm.waiting,
.btn1.btnSm.waiting,
.submitBtn.btnSm.waiting {
  padding-right: 10px;
  padding-left: 10px;
}
.btn0.btnSm.waiting:after,
.btn2.btnSm.waiting:after,
.btn1.btnSm.waiting:after,
.submitBtn.btnSm.waiting:after {
  right: 4px;
  width: 1.3rem;
  height: 1.3rem;
}
.btn0.btnSm.waiting.justIcon::after,
.btn2.btnSm.waiting.justIcon::after,
.btn1.btnSm.waiting.justIcon::after,
.submitBtn.btnSm.waiting.justIcon::after {
  right: 6px;
}
.btn0.btnSm.waiting.w100,
.btn2.btnSm.waiting.w100,
.btn1.btnSm.waiting.w100,
.submitBtn.btnSm.waiting.w100 {
  padding-right: 5px;
  padding-left: 15px;
}
.btn0.btnSm.waiting.w100:after,
.btn2.btnSm.waiting.w100:after,
.btn1.btnSm.waiting.w100:after,
.submitBtn.btnSm.waiting.w100:after {
  right: auto;
  left: 10px;
}

#stickyNav {
  position: sticky;
  top: var(--stickyNavTop);
  transition: all 0.3s ease;
  padding: 0;
  background: var(--stickyNavBg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 1020;
}
#stickyNav.top0 {
  transition: all 0.3s ease;
  padding: 0;
}
#stickyNav .navBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
}
#stickyNav .navBox #menuBox {
  z-index: 1040;
  transition: all 0.3s ease;
}
#stickyNav .navBox #menuBox .logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 40px;
  text-align: center;
}
#stickyNav .navBox #menuBox ul li a {
  display: block;
  padding: 10px;
  position: relative;
}
#stickyNav .navBox .responsiveBtns {
  display: flex;
  gap: 10px;
}
#stickyNav .navBox .responsiveBtns > * {
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--menuText);
  background-color: var(--rvColor);
  color: var(--rvText);
  padding: 2px 12px;
  position: relative;
  border-radius: var(--radius);
  transition: all 0.3s ease;
}
#stickyNav .navBox .responsiveBtns > * i {
  font-size: 18px;
}
#stickyNav .navBox .responsiveBtns > *.menuBoxToggler {
  padding: 0;
  background-color: transparent;
}
#stickyNav .navBox .responsiveBtns > *.menuBoxToggler i {
  font-size: 1.8rem;
  color: var(--close);
}
#stickyNav .navBox .responsiveBtns .menuBoxToggler,
#stickyNav .navBox .responsiveBtns .searchFilterToggler {
  display: none;
}
#stickyNav .navBox #leftMenuItems ul li a {
  display: inline-flex;
  align-items: center;
  color: var(--menuText);
  padding: 15px 10px;
  position: relative;
  box-shadow: none;
  outline: none;
  transition: all 0.3s ease;
}
#stickyNav .navBox #leftMenuItems ul li a i {
  color: var(--menuIcon);
  margin-left: 3px;
  font-size: 18px;
}
#stickyNav .navBox #leftMenuItems ul li a span {
  display: none;
}
@media (min-width: 768px) {
  #stickyNav .navBox #leftMenuItems ul li a span {
    display: block;
  }
}
#stickyNav .navBox #leftMenuItems ul li.basket {
  position: relative;
}
#stickyNav .navBox #leftMenuItems ul li.basket span {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 5px;
  right: -10px;
  background-color: var(--mainColor);
  color: var(--textLight);
  z-index: 2;
}
#stickyNav .navBox #leftMenuItems ul li ul {
  position: absolute;
  background-color: var(--menuSub);
  opacity: 0;
  visibility: hidden;
  width: 190px;
  left: 20px;
  top: 100%;
  border-radius: var(--radius);
  transition: all 0.3s ease;
  max-height: calc(100vh - 60px);
  overflow: auto;
}
#stickyNav .navBox #leftMenuItems ul li ul li {
  display: flex;
  padding: 5px 5px 0 5px;
}
#stickyNav .navBox #leftMenuItems ul li ul li:last-child {
  padding-bottom: 5px;
}
#stickyNav .navBox #leftMenuItems ul li ul li a {
  display: flex;
  width: 100%;
  background-color: var(--menuItem);
  color: var(--menuSubText);
  padding: 8px;
  border-radius: var(--radius);
}
#stickyNav .navBox #leftMenuItems ul li ul li a:hover {
  padding-right: 10px;
  transition: all 0.3s ease;
}
#stickyNav .navBox #leftMenuItems ul li ul li a i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: var(--menuIconBg);
  border-radius: var(--radius);
  margin-left: 10px;
}
#stickyNav .navBox #leftMenuItems ul li.active > ul {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease;
  left: 0;
}
#stickyNav .navBox #leftMenuItems > ul {
  display: flex;
  align-items: center;
}
#stickyNav .navBox #leftMenuItems > ul > li {
  display: inline;
  position: relative;
  transition: all 0.3s ease;
}
#stickyNav .navBox #leftMenuItems > ul > li:hover {
  transition: all 0.3s ease;
}
#stickyNav .navBox #leftMenuItems > ul > li > a {
  display: flex;
  padding: 8px 4px;
}
#stickyNav .navBox #leftMenuItems > ul > li > a i {
  background-color: var(--menuIconBg);
  border-radius: var(--radius);
  padding: 7px 10px;
  transition: all 0.3s ease;
}
#stickyNav .navBox #leftMenuItems > ul > li > a i:hover {
  transition: all 0.3s ease;
}
#stickyNav .navBox #leftMenuItems > ul > li > a > i {
  color: var(--menuIcon);
}

@media only screen and (min-width: 992px) {
  .dualMenu #stickyNav {
    height: var(--stickyNavHeight);
    display: flex;
    align-items: center;
  }
  .dualMenu #stickyNav #menuBox .menuBoxHead {
    display: none;
  }
  .dualMenu #stickyNav #menuBox ul li {
    position: relative;
  }
  .dualMenu #stickyNav #menuBox ul li a i {
    display: none;
  }
  .dualMenu #stickyNav #menuBox ul li ul {
    position: absolute;
    background-color: var(--menuSub);
    border-radius: var(--radius);
    opacity: 0;
    visibility: hidden;
    width: 190px;
    /* z-index: 10; */
    right: 20px;
    top: 0;
    transition: all 0.3s ease;
  }
  .dualMenu #stickyNav #menuBox ul li ul li {
    padding: 5px 5px 0 5px;
  }
  .dualMenu #stickyNav #menuBox ul li ul li a {
    display: block;
    padding: 12px 10px;
    background-color: var(--menuItem);
    color: var(--menuSubText);
    border-radius: var(--radius);
    transition: all 0.3s ease;
  }
  .dualMenu #stickyNav #menuBox ul li ul li a:hover {
    /* color: #00b3e9; */
    padding-right: 12px;
    transition: all 0.3s ease;
  }
  .dualMenu #stickyNav #menuBox ul li ul li:last-child {
    padding-bottom: 5px;
    border-bottom: 0;
  }
  .dualMenu #stickyNav #menuBox ul li ul li ul {
    right: calc(100% + 20px);
    top: 0;
  }
  .dualMenu #stickyNav #menuBox ul li ul li:hover > ul {
    right: 100%;
  }
  .dualMenu #stickyNav #menuBox ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
    right: 0;
  }
  .dualMenu #stickyNav #menuBox > ul {
    font-size: 0;
  }
  .dualMenu #stickyNav #menuBox > ul > li {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: bold;
    border-right: 1px solid var(--menuSep1);
    border-left: 1px solid var(--menuSep2);
  }
  .dualMenu #stickyNav #menuBox > ul > li a {
    padding: 14px 20px;
    color: var(--menuText);
    transition: all 0.3s;
  }
  .dualMenu #stickyNav #menuBox > ul > li:hover > a {
    background-color: var(--alertBlue);
    color: var(--alertBlueText);
    transition: all 0.3s;
  }
  .dualMenu #stickyNav #menuBox > ul > li:has(ul):hover > a {
    border-bottom: none;
  }
  .dualMenu #stickyNav #menuBox > ul > li > ul {
    top: 100%;
  }
  .dualMenu #stickyNav #menuBox .toggleBox,
  .dualMenu #stickyNav .toggleBoxShow {
    display: none;
  }
}
@media (min-width: 768px) {
  #searchFilter .searchFilterHead {
    display: none;
  }
}
@media only screen and (max-width: 991px) {
  .admin-bar #stickyNav {
    top: 0;
  }
  #stickyNav .responsiveBtns .menuBoxToggler,
  #stickyNav .responsiveBtns .searchFilterToggler.show {
    display: inline-flex !important;
  }
  #searchFilter {
    position: fixed;
    width: 270px;
    height: 100vh;
    display: block;
    background: var(--bgColor);
    top: 0;
    right: -270px;
    bottom: 0;
    overflow-y: auto;
    z-index: 1040;
    box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
  }
  #searchFilter.show {
    right: 0;
  }
  #searchFilter .searchFilterHead {
    height: 50px;
    width: 100%;
    position: relative;
    /* direction: ltr; */
    padding: 10px;
    background-color: var(--boxHead);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #searchFilter .searchFilterHead .closeBtn {
    left: 10px;
    top: 8px;
  }
  #searchFilter .searchFilterHead .searchAndCloseFilter {
    display: inline-flex;
    width: 208px;
    align-items: center;
    justify-content: center;
    padding: 10px 10px;
    background-color: var(--btnBlue);
    color: var(--btnText);
    cursor: pointer;
    border-radius: var(--radius);
  }
  #searchFilter .searchFilterBody {
    max-height: calc(100% - 50px);
    width: 100%;
    overflow-y: auto;
    padding: 10px;
  }
  #stickyNav #menuBox {
    position: fixed;
    top: 0;
    right: -230px;
    width: 230px;
    height: 100vh;
    overflow-y: auto;
    /* padding: 5px; */
    z-index: 1040;
    background-color: var(--menu1);
  }
  #stickyNav #menuBox.show {
    right: 0;
  }
  #stickyNav #menuBox .menuBoxHead {
    height: 85px;
    width: 100%;
    position: relative;
    direction: ltr;
    display: flex;
    align-items: center;
    background-color: var(--box);
  }
  #stickyNav #menuBox .menuBoxHead .logo {
    display: flex;
    align-items: center;
    width: 100%;
    height: 55px;
    /* border-bottom: 2px solid var(--border); */
  }
  #stickyNav #menuBox .menuBoxHead .logo img {
    height: 35px;
  }
  #stickyNav #menuBox .menuBoxBody {
    max-height: calc(100% - 85px);
    width: 100%;
    overflow-y: auto;
  }
  #stickyNav #menuBox ul li {
    position: relative;
    border-bottom: 1px solid var(--menu2);
  }
  #stickyNav #menuBox ul li a {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--menuTextResponsive);
    padding: 15px 10px;
    transition: all 0.3s ease;
  }
  #stickyNav #menuBox ul li a.active {
    color: var(--textBlue);
  }
  #stickyNav #menuBox ul li a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 30px;
    background-color: var(--menuIconBg);
    border-radius: var(--radius);
    color: var(--menuIcon);
    margin-left: 10px;
    font-size: 1.5rem;
  }
  #stickyNav #menuBox ul li a:hover {
    color: var(--textBlue);
    /* padding-right: 11px; */
    transition: all 0.3s ease;
  }
  #stickyNav #menuBox ul li:last-child {
    border-bottom: 0;
  }
  #stickyNav #menuBox ul li .caretIcon {
    position: absolute;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 35px;
    left: 5px;
    cursor: pointer;
    z-index: 1050;
    background-color: var(--menu5);
    border-radius: 1px;
    top: 10px;
    border-radius: var(--radius);
  }
  #stickyNav #menuBox ul li .caretIcon:hover {
    background-color: var(--menu6);
  }
  #stickyNav #menuBox ul li .caretIcon:before {
    content: "";
    position: absolute;
    top: 6px;
    left: 9px;
    width: 10px;
    height: 10px;
    border: 2px solid #b6b4b4;
    border-left: 0;
    border-top: 0;
    transform: rotate(45deg);
    transition: all 0.3s ease;
  }
  #stickyNav #menuBox ul li .caretIcon.active:before {
    transform: rotate(225deg);
    top: 11px;
    transition: all 0.3s ease;
  }
  #stickyNav #menuBox ul li ul {
    display: none;
    background-color: var(--menu2);
  }
  #stickyNav #menuBox ul li ul li {
    border-color: var(--menu3);
    border-bottom: none;
  }
  #stickyNav #menuBox ul li ul li a {
    padding-right: 50px !important;
  }
  #stickyNav #menuBox ul li ul li ul {
    background-color: var(--menu3);
  }
  #stickyNav #menuBox ul li ul li ul li {
    border-color: var(--menu4);
  }
  #stickyNav #menuBox ul li ul li ul li ul {
    background-color: var(--menu4);
  }
  #stickyNav #menuBox ul li ul li ul li ul li {
    border-color: var(--menu5);
  }
  #stickyNav #menuBox ul li ul li ul li ul li ul {
    background-color: var(--menu5);
  }
  #stickyNav #menuBox ul li ul li ul li ul li ul li {
    border-color: var(--menu6);
  }
  #stickyNav #menuBox .hideToggle {
    display: block;
    text-align: center;
    width: 34px;
    height: 34px;
    margin-right: auto;
    border-radius: 1px;
    cursor: pointer;
    position: relative;
  }
  #searchFilter .searchFilterHead .closeBtn,
  #stickyNav #menuBox .menuBoxHead .closeBtn {
    background-color: var(--box);
  }
  #searchFilter .searchFilterHead .closeBtn:hover,
  #stickyNav #menuBox .menuBoxHead .closeBtn:hover {
    background-color: var(--boxHead);
  }
}
.sideMenu #stickyNav {
  background-image: linear-gradient(180deg, var(--menu1), 30%, var(--menu2) 70%, var(--menu1) 100%);
}

@media only screen and (min-width: 992px) {
  .sideMenu #stickyNav #menuBox {
    position: fixed;
    top: 0;
    right: -230px;
    width: 230px;
    height: 100vh;
    overflow-y: auto;
    z-index: 1040;
    background-color: var(--menu1);
  }
  .sideMenu #stickyNav #menuBox .menuBoxHead {
    height: 85px;
    width: 100%;
    position: relative;
    direction: ltr;
    display: flex;
    align-items: center;
  }
  .sideMenu #stickyNav #menuBox .menuBoxHead .logo {
    display: flex;
    align-items: center;
    width: 100%;
    height: 55px;
  }
  .sideMenu #stickyNav #menuBox .menuBoxHead .logo img {
    height: 35px;
  }
  .sideMenu #stickyNav #menuBox .menuBoxBody {
    max-height: calc(100% - 85px);
    width: 100%;
    overflow-y: auto;
  }
  .sideMenu #stickyNav #menuBox ul li {
    position: relative;
    border-bottom: 1px solid var(--menu2);
  }
  .sideMenu #stickyNav #menuBox ul li:last-child {
    border-bottom: 0;
  }
  .sideMenu #stickyNav #menuBox ul li a {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--menuTextResponsive);
    padding: 15px 10px;
    transition: all 0.3s ease;
  }
  .sideMenu #stickyNav #menuBox ul li a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 30px;
    background-color: var(--menuIconBg);
    border-radius: var(--radius);
    color: var(--menuIcon);
    margin-left: 10px;
    font-size: 1.5rem;
  }
  .sideMenu #stickyNav #menuBox ul li a.active {
    /* background-image: linear-gradient(to left, transparent, #252b2c); */
    color: var(--textBlue);
  }
  .sideMenu #stickyNav #menuBox ul li a:hover {
    color: var(--textBlue2);
    /* padding-right: 11px; */
    transition: all 0.3s ease;
  }
  .sideMenu #stickyNav #menuBox ul li ul {
    display: none;
    background-color: var(--menu2);
  }
  .sideMenu #stickyNav #menuBox ul li ul li {
    border-color: var(--menu3);
    border-bottom: none;
  }
  .sideMenu #stickyNav #menuBox ul li ul li a {
    padding-right: 50px;
  }
  .sideMenu #stickyNav #menuBox ul li ul li ul {
    background-color: var(--menu3);
  }
  .sideMenu #stickyNav #menuBox ul li ul li ul li {
    border-color: var(--menu4);
  }
  .sideMenu #stickyNav #menuBox ul li ul li ul li ul {
    background-color: var(--menu4);
  }
  .sideMenu #stickyNav #menuBox ul li ul li ul li ul li {
    border-color: var(--menu5);
  }
  .sideMenu #stickyNav #menuBox ul li ul li ul li ul li ul {
    background-color: var(--menu5);
  }
  .sideMenu #stickyNav #menuBox ul li ul li ul li ul li ul li {
    border-color: var(--menu6);
  }
  .sideMenu #stickyNav #menuBox ul li .caretIcon {
    position: absolute;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 35px;
    left: 5px;
    cursor: pointer;
    z-index: 1050;
    background-color: rgba(0, 0, 0, 0.566);
    border-radius: 1px;
    top: 10px;
  }
  .sideMenu #stickyNav #menuBox ul li .caretIcon:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }
  .sideMenu #stickyNav #menuBox ul li .caretIcon:before {
    content: "";
    position: absolute;
    top: 6px;
    left: 9px;
    width: 10px;
    height: 10px;
    border: 2px solid #b6b4b4;
    border-left: 0;
    border-top: 0;
    transform: rotate(45deg);
    transition: all 0.3s ease;
  }
  .sideMenu #stickyNav #menuBox ul li .caretIcon.active:before {
    transform: rotate(225deg);
    top: 11px;
    transition: all 0.3s ease;
  }
  .sideMenu #stickyNav #menuBox .hideToggle {
    display: block;
    text-align: center;
    width: 34px;
    height: 34px;
    margin-right: auto;
    border-radius: 1px;
    cursor: pointer;
    position: relative;
  }
  .sideMenu #stickyNav .responsiveBtns .menuBoxToggler {
    display: inline-flex !important;
  }
  .sideMenu.pushLeft {
    margin-right: 230px;
  }
  .sideMenu.pushLeft #stickyNav .responsiveBtns .menuBoxToggler {
    display: none;
  }
  .sideMenu.pushLeft #stickyNav #menuBox {
    right: 0;
  }
}
.dropMenuItems {
  z-index: 1030;
}
.dropMenuItems ul li a {
  display: inline-flex;
  align-items: center;
  color: var(--menuText);
  padding: 15px 10px;
  position: relative;
  box-shadow: none;
  outline: none;
  transition: all 0.3s ease;
}
.dropMenuItems ul li a i {
  color: var(--menuIcon);
  margin-left: 3px;
  font-size: 18px;
}
.dropMenuItems ul li a span {
  display: none;
}
@media (min-width: 768px) {
  .dropMenuItems ul li a span {
    display: block;
  }
}
.dropMenuItems ul li ul {
  position: absolute;
  background-color: var(--menuSub);
  opacity: 0;
  visibility: hidden;
  width: 190px;
  right: 20px;
  top: 100%;
  border-radius: var(--radius);
  transition: all 0.3s ease;
  max-height: calc(100vh - 60px);
  overflow: auto;
}
.dropMenuItems ul li ul li {
  display: flex;
  padding: 5px 5px 0 5px;
}
.dropMenuItems ul li ul li:last-child {
  padding-bottom: 5px;
}
.dropMenuItems ul li ul li a {
  display: flex;
  width: 100%;
  background-color: var(--menuItem);
  color: var(--menuSubText);
  padding: 8px;
  border-radius: var(--radius);
}
.dropMenuItems ul li ul li a:hover {
  background-color: var(--menu3);
  transition: all 0.3s ease;
}
.dropMenuItems ul li ul li a i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: var(--menuIconBg);
  border-radius: var(--radius);
  margin-left: 10px;
}
.dropMenuItems ul li.active > ul {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease;
  right: 0;
}
.dropMenuItems ul li.icons {
  gap: 5px;
}
.dropMenuItems ul li.icons a {
  justify-content: center;
  padding: 5px 0;
}
.dropMenuItems ul li.icons a i {
  margin-left: 0;
}
.dropMenuItems > ul {
  display: flex;
  align-items: center;
}
.dropMenuItems > ul > li {
  display: inline;
  position: relative;
  transition: all 0.3s ease;
}
.dropMenuItems > ul > li:hover {
  transition: all 0.3s ease;
}
.dropMenuItems > ul > li > a {
  display: flex;
  padding: 8px 4px;
}
.dropMenuItems > ul > li > a i {
  background-color: var(--menuIconBg);
  border-radius: var(--radius);
  padding: 7px 10px;
  transition: all 0.3s ease;
}
.dropMenuItems > ul > li > a i:hover {
  transition: all 0.3s ease;
}
.dropMenuItems > ul > li > a > i {
  color: var(--menuIcon);
}

#accountMenuBox .accountMenuBody {
  background-color: var(--box);
  /* border: 1px solid var(--boxBorder); */
  border-top: none;
  border-bottom: none;
}
#accountMenuBox .accountMenuBody ul li a {
  display: flex;
  align-items: center;
  padding: 10px;
  color: var(--menuText);
  font-size: 15px;
  border-bottom: 1px solid var(--boxBorder);
  transition: all 0.3s ease;
}
#accountMenuBox .accountMenuBody ul li a:hover {
  padding-right: 12px;
  transition: all 0.3s ease;
  color: var(--mainColor);
}
#accountMenuBox .accountMenuBody ul li a i {
  margin-left: 15px;
  color: var(--menuIcon);
  font-size: 18px;
  background-color: var(--boxHead);
  border-radius: var(--radius);
  width: 40px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#accountMenuBox .accountMenuBody ul li a.active {
  font-weight: bold;
  color: var(--mainColor);
}
#accountMenuBox .accountMenuBody ul li a.active i {
  color: var(--mainColor);
}
@media (max-width: 767px) {
  #accountMenuBox {
    display: none;
  }
}

#pageHeading {
  margin-bottom: var(--margin);
  position: relative;
}
#pageHeading > * {
  display: flex;
  align-items: center;
}

.actionBtns {
  display: flex;
  align-items: center;
  gap: 4px;
}

ul.breadcrumb {
  display: flex;
  justify-content: center;
  padding: 8px 0;
  position: relative;
  overflow-y: hidden;
  overflow-x: auto;
}
ul.breadcrumb:before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--border);
  border-radius: var(--radius);
  position: absolute;
  bottom: 0;
}
ul.breadcrumb:after {
  content: "";
  width: 3px;
  height: 2px;
  background-color: var(--bgColor);
  position: absolute;
  bottom: 0;
  right: 20px;
}
ul.breadcrumb li {
  display: inline;
  text-wrap: nowrap;
  font-size: 12px;
  color: var(--textColor);
}
ul.breadcrumb li a {
  color: var(--textColor);
}
ul.breadcrumb li a:hover {
  color: var(--subText);
}
ul.breadcrumb li h1,
ul.breadcrumb li h2 {
  display: inline;
  font-size: 13px;
}
ul.breadcrumb li + li:before {
  padding: 8px;
  color: var(--subText);
  content: "/ ";
}

.box ul.breadcrumb:after {
  background-color: var(--box);
}

.uploadBox {
  border: 2px dashed var(--border);
  padding: var(--margin);
  text-align: center;
  position: relative;
  border-radius: var(--radius);
}
.uploadBox.dragover {
  background-color: var(--boxHead);
}
.uploadBox label {
  position: absolute;
  right: var(--margin);
  top: 0;
  transform: translateY(-50%);
  padding: 0 10px;
  background-color: var(--box);
}
.uploadBox .uploadBoxBtn {
  font-family: var(--fontFamily);
  margin-top: 10px;
  padding: 6px 12px;
  background: var(--btnDef);
  color: var(--btnDefText);
  border: none;
  cursor: pointer;
}
.uploadBox .uploadBoxBtn:hover {
  background-color: var(--btnDefHover);
  color: var(--btnDefText);
}
.uploadBox .uploadBoxInput {
  display: none;
}
.uploadBox .uploadBoxPreview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}
.uploadBox .uploadBoxPreview .uploadBoxPreviewItem {
  width: 100px;
  height: 100px;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.uploadBox .uploadBoxPreview .uploadBoxPreviewItem img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: table;
  margin: 0 auto;
}
.uploadBox .uploadBoxPreview .uploadBoxPreviewItem img.uploadBoxPreviewIcon {
  width: 80%;
  height: 80%;
}
.uploadBox .uploadBoxPreview .uploadBoxPreviewItem span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 5px;
  text-overflow: ellipsis;
}
.uploadBox .uploadBoxPreview .uploadBoxPreviewItem .uploadBoxRemoveBtn {
  display: flex;
  background-color: var(--btnRed);
  position: absolute;
  top: 2px;
  left: 2px;
  cursor: pointer;
  color: var(--btnRedText);
  width: 22px;
  height: 22px;
  padding-top: 4px;
  border-radius: 50%;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.uploadBox .uploadBoxPreview .uploadBoxPreviewItem .uploadBoxRemoveBtn:hover {
  background-color: var(--btnRedHover);
}
.uploadBox .uploadBoxError {
  color: var(--textRed);
}
.uploadBox .uploadBoxError.marginTop {
  margin-top: 10px;
}

.alertIcon {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px;
  background-color: var(--boxHead);
  color: var(--boxText);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.8;
}
.alertIcon i {
  font-size: 30px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
}

.alertBox {
  position: relative;
  padding: 20px;
  background-color: var(--box);
  color: var(--boxText);
  border-radius: var(--radius);
}

.alertDef {
  background-color: var(--boxHead);
  color: var(--boxHeadText);
}

.alertGreen {
  background-color: var(--alertGreen);
  color: var(--alertGreenText);
}

.alertYellow {
  background-color: var(--alertYellow);
  color: var(--alertYellowText);
}

.alertBlue {
  background-color: var(--alertBlue);
  color: var(--alertBlueText);
}

.alertRed {
  background-color: var(--alertRed);
  color: var(--alertRedText);
}

.alertDark {
  background-color: var(--alertDark);
  color: var(--alertDarkText);
}

.contentBox {
  line-height: 1.6;
  text-align: justify;
}
.contentBox h1,
.contentBox h2,
.contentBox h3,
.contentBox h4,
.contentBox h5,
.contentBox h6 {
  page-break-after: avoid;
  font-weight: bold;
}
.contentBox h1 {
  font-size: 24pt;
  margin-bottom: 20px;
}
.contentBox h2 {
  font-size: 18pt;
  margin-top: 25px;
  margin-bottom: 15px;
}
.contentBox h3 {
  font-size: 14pt;
  margin-top: 20px;
  margin-bottom: 10px;
}
.contentBox p {
  font-size: 1rem;
}
.contentBox p:not(:last-child)::after {
  content: "\a\a";
  white-space: pre;
}
.contentBox table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
  page-break-inside: avoid;
}
.contentBox table th,
.contentBox table td {
  padding: 8px 12px;
  border: 1px solid var(--tblBorder);
}
.contentBox table th {
  background-color: var(--stripOdd);
  font-weight: bold;
}
.contentBox table tr:nth-child(even) {
  background-color: var(--stripEven);
}
.contentBox .speaker {
  font-size: 11px;
  font-weight: 500;
}
.contentBox .speaker.speaker1 {
  color: #808080;
}
.contentBox .speaker.speaker2 {
  color: #04707e;
}
.contentBox .speaker.speaker3 {
  color: #c47004;
}

.fadeMessageBox {
  position: fixed;
  bottom: 0;
  width: 300px;
  max-width: calc(100% - 40px);
  z-index: 1070;
  margin-bottom: var(--margin);
}
.fadeMessageBox .item {
  position: relative;
  display: flex;
  align-items: start;
  margin-bottom: 15px;
  padding-right: 25px;
}
.fadeMessageBox .item::before {
  content: "!";
  position: absolute;
  right: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1882352941);
  font-size: 12px;
}
.fadeMessageBox .item:last-child {
  margin-bottom: 0;
}
.fadeMessageBox.alertGreen .item::before {
  content: "✓";
}
.fadeMessageBox .closeBtn,
.fadeMessageBox .closeBtn {
  color: var(--closeDark);
}
.fadeMessageBox .closeBtn:hover,
.fadeMessageBox .closeBtn:hover {
  background-color: var(--bgDark);
}

#groupOperationBox,
.formOperationBox {
  position: fixed;
  width: 350px;
  z-index: 2000;
  left: 20px;
  bottom: 20px;
  background-color: var(--alertDark);
  background-color: var(--rvColor);
  padding: 10px;
  display: none;
  border-radius: 4px;
}
#groupOperationBox.show,
.formOperationBox.show {
  display: inline-block;
}
#groupOperationBox .submitBtn,
.formOperationBox .submitBtn {
  height: 100%;
}
#groupOperationBox .alertRed,
.formOperationBox .alertRed {
  margin-top: 0;
  margin-bottom: 0;
}

.tooltipBox {
  position: relative;
}
.tooltipBox .tooltipText {
  position: absolute;
  bottom: 100%;
  background-color: var(--rvColor);
  color: var(--rvText);
  padding: 10px;
  border-radius: var(--radius);
  display: none;
  z-index: 1040;
}
.tooltipBox .tooltipText:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: -5px;
  left: calc(50% - 5px);
  background-color: var(--rvColor);
  transform: rotate(-45deg);
}
.tooltipBox:hover .tooltipText {
  transition: all 0.5s;
  display: block;
}

.sdpOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1040;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 100px;
  opacity: 1;
  transition: all 0.3s ease;
}
@media (max-width: 767px) {
  .sdpOverlay {
    align-items: flex-start;
    padding-top: 80px;
  }
}
.sdpOverlay .sdpBox {
  background-color: var(--sdpBg);
  border-radius: 2px;
  overflow: hidden;
  width: 300px;
  max-width: 90%;
  max-height: 90vh;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.sdpOverlay .sdpBox .sdpHead {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid var(--sdpBorder);
}
.sdpOverlay .sdpBox .sdpHead .sdpClose {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--sdpSubTxt);
  transition: all 0.2s ease;
}
.sdpOverlay .sdpBox .sdpHead .sdpClose:hover {
  background-color: var(--sdpBorder);
}
.sdpOverlay .sdpBox .sdpHead .sdpTitle {
  flex-grow: 1;
  padding-left: 40px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.sdpOverlay .sdpBox .samiDatePicker {
  padding: 5px;
  background-color: var(--sdpBg);
  color: var(--sdpTxt);
}
.sdpOverlay .sdpBox .samiDatePicker .header {
  display: grid;
  grid-template-columns: 4fr 4fr 1fr;
  gap: 5px;
  margin-bottom: 5px;
}
.sdpOverlay .sdpBox .samiDatePicker .header .jMonthSelect {
  border-radius: 2px;
  border: none;
  background-color: var(--sdpBtn);
  padding: 0 10px !important;
  height: 35px !important;
  font-size: 1.1rem;
}
.sdpOverlay .sdpBox .samiDatePicker .header .jYearInput {
  direction: ltr;
  border-radius: 2px;
  border: none;
  padding: 0 10px !important;
  background-color: var(--sdpBtn);
  height: 35px !important;
  font-size: 1.1rem;
}
.sdpOverlay .sdpBox .samiDatePicker .header .clean {
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  line-height: 35px;
  background-color: var(--sdpSubBg);
}
.sdpOverlay .sdpBox .samiDatePicker .weeks .week,
.sdpOverlay .sdpBox .samiDatePicker .days .day {
  width: 14.28%;
  display: inline-block;
  border: 1px solid var(--sdpCellBorder);
  text-align: center;
  position: relative;
}
.sdpOverlay .sdpBox .samiDatePicker .weeks .week {
  background-color: var(--sdpSubBg);
  padding: 5px;
  font-weight: bold;
  color: var(--sdpWeekTxt);
}
.sdpOverlay .sdpBox .samiDatePicker .days .day {
  cursor: pointer;
  background-color: var(--sdpBtn);
}
.sdpOverlay .sdpBox .samiDatePicker .days .day.null {
  background-color: var(--sdpBg);
  border: none;
}
.sdpOverlay .sdpBox .samiDatePicker .days .day.today {
  background-color: var(--sdpToday);
}
.sdpOverlay .sdpBox .samiDatePicker .days .day.off {
  color: #999;
}
.sdpOverlay .sdpBox .samiDatePicker .days .day.off:hover {
  color: #555;
}
.sdpOverlay .sdpBox .samiDatePicker .days .day.off .cellLeft,
.sdpOverlay .sdpBox .samiDatePicker .days .day.off .cellRight {
  color: #999;
}
.sdpOverlay .sdpBox .samiDatePicker .days .day:hover, .sdpOverlay .sdpBox .samiDatePicker .days .day.focus {
  background-color: var(--sdpHover);
}
.sdpOverlay .sdpBox .samiDatePicker .days .day .dayNumCell {
  padding-top: 2px;
  padding: 5px 10px 10px 10px;
}
.sdpOverlay .sdpBox .samiDatePicker .days .day .dayNumCell.weekend {
  color: var(--sdpSubBgend) !important;
}
.sdpOverlay .sdpBox .samiDatePicker .days .day .cellLeft,
.sdpOverlay .sdpBox .samiDatePicker .days .day .cellRight {
  font-size: 7px;
  text-align: right;
  display: inline-block;
  color: var(--sdpSubTxt);
  position: absolute;
  bottom: 0;
  right: 2px;
}
.sdpOverlay .sdpBox .samiDatePicker .buttons {
  display: flex;
  justify-content: space-between;
  margin: 3px 0;
}
.sdpOverlay .sdpBox .samiDatePicker .buttons span {
  background-color: var(--sdpBtn);
  padding: 3px;
  border-radius: 2px;
  width: 33%;
  text-align: center;
  cursor: pointer;
}
.sdpOverlay .sdpBox .samiDatePicker .buttons span:nth-child(2) {
  background-color: var(--sdpToday);
}

.galleryBox .galleryThumbs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.galleryBox .galleryThumbs figure {
  position: relative;
}
.galleryBox .galleryThumbs figure img {
  width: 120px;
  height: 80px;
  -o-object-fit: cover;
     object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s;
}
.galleryBox .galleryThumbs figure img:hover {
  transform: scale(1.05);
}
.galleryBox .galleryThumbs figure figcaption {
  position: absolute;
  top: 2px;
  right: 2px;
}
.galleryBox .lightBox {
  display: none;
  position: fixed;
  z-index: 1050;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: transform 0.1s ease-out;
}
.galleryBox .lightBox .lightBoxPreview {
  position: relative;
  width: 100%;
  height: calc(100vh - 100px);
}
.galleryBox .lightBox .lightBoxPreview img {
  position: absolute;
  display: table;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fadeIn 0.5s;
  max-height: 90%;
}
.galleryBox .lightBox .lightBoxPreview .lightBoxClose,
.galleryBox .lightBox .lightBoxPreview .lightBoxRightArrow,
.galleryBox .lightBox .lightBoxPreview .lightBoxLeftArrow {
  position: absolute;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
  z-index: 1060;
}
.galleryBox .lightBox .lightBoxPreview .lightBoxClose:hover,
.galleryBox .lightBox .lightBoxPreview .lightBoxRightArrow:hover,
.galleryBox .lightBox .lightBoxPreview .lightBoxLeftArrow:hover {
  color: #ddd;
}
.galleryBox .lightBox .lightBoxPreview .lightBoxClose {
  top: 20px;
  right: 30px;
  display: inline-flex;
  align-items: center;
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 6px 4px 0 0;
  border-radius: 50%;
}
.galleryBox .lightBox .lightBoxPreview .lightBoxRightArrow {
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
}
@media (max-width: 767.98px) {
  .galleryBox .lightBox .lightBoxPreview .lightBoxRightArrow {
    display: none;
  }
}
.galleryBox .lightBox .lightBoxPreview .lightBoxLeftArrow {
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
}
@media (max-width: 767.98px) {
  .galleryBox .lightBox .lightBoxPreview .lightBoxLeftArrow {
    display: none;
  }
}
.galleryBox .lightBox .lightBoxThumbs {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  overflow: auto;
  gap: 10px;
}
.galleryBox .lightBox .lightBoxThumbs img {
  width: 100px;
  height: 80%;
  -o-object-fit: cover;
     object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s;
}
.galleryBox .lightBox .lightBoxThumbs img.active {
  border: 2px solid var(--bgRed);
}
.galleryBox .lightBox .lightBoxCaption {
  width: 100%;
  height: 60px;
  display: none;
}

.striping > * {
  transition: all 0.3s ease;
}
.striping > *:nth-child(odd):not(.notStrip) {
  background-color: var(--stripOdd);
}
.striping > *:nth-child(even):not(.notStrip) {
  background-color: var(--stripEven);
}
.striping > *:hover {
  background-color: var(--stripHover);
}

.hoverBox {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.hoverBox .hoverBoxHide {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  bottom: -100%;
  width: 100%;
  padding: 4px;
  gap: 4px;
  justify-content: center;
  display: flex;
  transition: all 0.1s ease;
}
.hoverBox:hover .hoverBoxHide {
  bottom: 0;
}

.modalOverlay .modalBox .modalContent:has(.navTabs) {
  padding-top: 0;
}
.modalOverlay .modalBox .modalContent:has(.navTabs) .stickySearchInput {
  top: 0;
}
.modalOverlay .modalBox .modalContent:has(.navTabs.stickyTabs) {
  padding-top: 0;
}
.modalOverlay .modalBox .modalContent:has(.navTabs.stickyTabs) .stickySearchInput {
  top: 37px;
}
.modalOverlay .modalBox .navTabs {
  top: 0;
  padding: 0;
  background-color: var(--boxHead);
  border-radius: 0;
}
.modalOverlay .modalBox .navTabs:not(.navTabsSide) {
  margin-bottom: var(--margin);
}
.modalOverlay .modalBox .navTabs .tabBtn {
  border-radius: 0;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 500;
}
.modalOverlay .modalBox .boxBody {
  padding: 0;
}
.modalOverlay .modalBox .gridBox.grid554, .modalOverlay .modalBox .gridBox.grid54 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.modalOverlay .modalBox .gridBox.grid553, .modalOverlay .modalBox .gridBox.grid543, .modalOverlay .modalBox .gridBox.grid53, .modalOverlay .modalBox .gridBox.grid443, .modalOverlay .modalBox .gridBox.grid43, .modalOverlay .modalBox .gridBox.grid33 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.modalOverlay .modalBox .gridBox.grid553 .xCenter, .modalOverlay .modalBox .gridBox.grid543 .xCenter, .modalOverlay .modalBox .gridBox.grid53 .xCenter, .modalOverlay .modalBox .gridBox.grid443 .xCenter, .modalOverlay .modalBox .gridBox.grid43 .xCenter, .modalOverlay .modalBox .gridBox.grid33 .xCenter {
  grid-column-start: 2;
  transform: none;
}
.modalOverlay .modalBox .gridBox.grid552, .modalOverlay .modalBox .gridBox.grid542, .modalOverlay .modalBox .gridBox.grid532, .modalOverlay .modalBox .gridBox.grid52, .modalOverlay .modalBox .gridBox.grid442, .modalOverlay .modalBox .gridBox.grid432, .modalOverlay .modalBox .gridBox.grid42, .modalOverlay .modalBox .gridBox.grid332, .modalOverlay .modalBox .gridBox.grid32 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.modalOverlay .modalBox .gridBox.grid552 .xCenter, .modalOverlay .modalBox .gridBox.grid542 .xCenter, .modalOverlay .modalBox .gridBox.grid532 .xCenter, .modalOverlay .modalBox .gridBox.grid52 .xCenter, .modalOverlay .modalBox .gridBox.grid442 .xCenter, .modalOverlay .modalBox .gridBox.grid432 .xCenter, .modalOverlay .modalBox .gridBox.grid42 .xCenter, .modalOverlay .modalBox .gridBox.grid332 .xCenter, .modalOverlay .modalBox .gridBox.grid32 .xCenter {
  grid-column-start: 1;
  transform: translateX(-50%);
}
.modalOverlay .modalBox .gridBox.grid551, .modalOverlay .modalBox .gridBox.grid541, .modalOverlay .modalBox .gridBox.grid531, .modalOverlay .modalBox .gridBox.grid521, .modalOverlay .modalBox .gridBox.grid51, .modalOverlay .modalBox .gridBox.grid441, .modalOverlay .modalBox .gridBox.grid431, .modalOverlay .modalBox .gridBox.grid421, .modalOverlay .modalBox .gridBox.grid41, .modalOverlay .modalBox .gridBox.grid331, .modalOverlay .modalBox .gridBox.grid321, .modalOverlay .modalBox .gridBox.grid31, .modalOverlay .modalBox .gridBox.grid221, .modalOverlay .modalBox .gridBox.grid21 {
  grid-template-columns: minmax(0, 1fr);
}
.modalOverlay .modalBox .gridBox.grid551 .xCenter, .modalOverlay .modalBox .gridBox.grid541 .xCenter, .modalOverlay .modalBox .gridBox.grid531 .xCenter, .modalOverlay .modalBox .gridBox.grid521 .xCenter, .modalOverlay .modalBox .gridBox.grid51 .xCenter, .modalOverlay .modalBox .gridBox.grid441 .xCenter, .modalOverlay .modalBox .gridBox.grid431 .xCenter, .modalOverlay .modalBox .gridBox.grid421 .xCenter, .modalOverlay .modalBox .gridBox.grid41 .xCenter, .modalOverlay .modalBox .gridBox.grid331 .xCenter, .modalOverlay .modalBox .gridBox.grid321 .xCenter, .modalOverlay .modalBox .gridBox.grid31 .xCenter, .modalOverlay .modalBox .gridBox.grid221 .xCenter, .modalOverlay .modalBox .gridBox.grid21 .xCenter {
  grid-column-start: 1;
  transform: none;
}
.modalOverlay .modalBox .gridBox .spn554,
.modalOverlay .modalBox .gridBox .spn54 {
  grid-column: span 4;
}
.modalOverlay .modalBox .gridBox .spn553,
.modalOverlay .modalBox .gridBox .spn543,
.modalOverlay .modalBox .gridBox .spn53,
.modalOverlay .modalBox .gridBox .spn443,
.modalOverlay .modalBox .gridBox .spn43,
.modalOverlay .modalBox .gridBox .spn33 {
  grid-column: span 3;
}
.modalOverlay .modalBox .gridBox .spn552,
.modalOverlay .modalBox .gridBox .spn542,
.modalOverlay .modalBox .gridBox .spn532,
.modalOverlay .modalBox .gridBox .spn52,
.modalOverlay .modalBox .gridBox .spn442,
.modalOverlay .modalBox .gridBox .spn432,
.modalOverlay .modalBox .gridBox .spn42,
.modalOverlay .modalBox .gridBox .spn332,
.modalOverlay .modalBox .gridBox .spn32 {
  grid-column: span 2;
}
.modalOverlay .modalBox .gridBox .spn551,
.modalOverlay .modalBox .gridBox .spn541,
.modalOverlay .modalBox .gridBox .spn531,
.modalOverlay .modalBox .gridBox .spn521,
.modalOverlay .modalBox .gridBox .spn51,
.modalOverlay .modalBox .gridBox .spn441,
.modalOverlay .modalBox .gridBox .spn431,
.modalOverlay .modalBox .gridBox .spn421,
.modalOverlay .modalBox .gridBox .spn41,
.modalOverlay .modalBox .gridBox .spn331,
.modalOverlay .modalBox .gridBox .spn321,
.modalOverlay .modalBox .gridBox .spn31,
.modalOverlay .modalBox .gridBox .spn221,
.modalOverlay .modalBox .gridBox .spn21 {
  grid-column: span 1;
}
@media only screen and (min-width: 992px) {
  .modalOverlay.modal100 .gridBox.grid54, .modalOverlay.modal100 .gridBox.grid543, .modalOverlay.modal100 .gridBox.grid542, .modalOverlay.modal100 .gridBox.grid541, .modalOverlay.modal900 .gridBox.grid54, .modalOverlay.modal900 .gridBox.grid543, .modalOverlay.modal900 .gridBox.grid542, .modalOverlay.modal900 .gridBox.grid541 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .modalOverlay.modal100 .gridBox.grid53, .modalOverlay.modal100 .gridBox.grid532, .modalOverlay.modal100 .gridBox.grid531, .modalOverlay.modal100 .gridBox.grid43, .modalOverlay.modal100 .gridBox.grid432, .modalOverlay.modal100 .gridBox.grid431, .modalOverlay.modal100 .gridBox.grid332, .modalOverlay.modal100 .gridBox.grid331, .modalOverlay.modal900 .gridBox.grid53, .modalOverlay.modal900 .gridBox.grid532, .modalOverlay.modal900 .gridBox.grid531, .modalOverlay.modal900 .gridBox.grid43, .modalOverlay.modal900 .gridBox.grid432, .modalOverlay.modal900 .gridBox.grid431, .modalOverlay.modal900 .gridBox.grid332, .modalOverlay.modal900 .gridBox.grid331 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .modalOverlay.modal100 .gridBox.grid53 .xCenter, .modalOverlay.modal100 .gridBox.grid532 .xCenter, .modalOverlay.modal100 .gridBox.grid531 .xCenter, .modalOverlay.modal100 .gridBox.grid43 .xCenter, .modalOverlay.modal100 .gridBox.grid432 .xCenter, .modalOverlay.modal100 .gridBox.grid431 .xCenter, .modalOverlay.modal100 .gridBox.grid332 .xCenter, .modalOverlay.modal100 .gridBox.grid331 .xCenter, .modalOverlay.modal900 .gridBox.grid53 .xCenter, .modalOverlay.modal900 .gridBox.grid532 .xCenter, .modalOverlay.modal900 .gridBox.grid531 .xCenter, .modalOverlay.modal900 .gridBox.grid43 .xCenter, .modalOverlay.modal900 .gridBox.grid432 .xCenter, .modalOverlay.modal900 .gridBox.grid431 .xCenter, .modalOverlay.modal900 .gridBox.grid332 .xCenter, .modalOverlay.modal900 .gridBox.grid331 .xCenter {
    grid-column-start: 2;
    transform: none;
  }
  .modalOverlay.modal100 .gridBox.grid52, .modalOverlay.modal100 .gridBox.grid51, .modalOverlay.modal100 .gridBox.grid42, .modalOverlay.modal100 .gridBox.grid421, .modalOverlay.modal100 .gridBox.grid32, .modalOverlay.modal100 .gridBox.grid321, .modalOverlay.modal900 .gridBox.grid52, .modalOverlay.modal900 .gridBox.grid51, .modalOverlay.modal900 .gridBox.grid42, .modalOverlay.modal900 .gridBox.grid421, .modalOverlay.modal900 .gridBox.grid32, .modalOverlay.modal900 .gridBox.grid321 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .modalOverlay.modal100 .gridBox.grid52 .xCenter, .modalOverlay.modal100 .gridBox.grid51 .xCenter, .modalOverlay.modal100 .gridBox.grid42 .xCenter, .modalOverlay.modal100 .gridBox.grid421 .xCenter, .modalOverlay.modal100 .gridBox.grid32 .xCenter, .modalOverlay.modal100 .gridBox.grid321 .xCenter, .modalOverlay.modal900 .gridBox.grid52 .xCenter, .modalOverlay.modal900 .gridBox.grid51 .xCenter, .modalOverlay.modal900 .gridBox.grid42 .xCenter, .modalOverlay.modal900 .gridBox.grid421 .xCenter, .modalOverlay.modal900 .gridBox.grid32 .xCenter, .modalOverlay.modal900 .gridBox.grid321 .xCenter {
    grid-column-start: 1;
    transform: translateX(-50%);
  }
  .modalOverlay.modal100 .gridBox.grid51, .modalOverlay.modal100 .gridBox.grid41, .modalOverlay.modal100 .gridBox.grid31, .modalOverlay.modal100 .gridBox.grid21, .modalOverlay.modal900 .gridBox.grid51, .modalOverlay.modal900 .gridBox.grid41, .modalOverlay.modal900 .gridBox.grid31, .modalOverlay.modal900 .gridBox.grid21 {
    grid-template-columns: minmax(0, 1fr);
  }
  .modalOverlay.modal100 .gridBox.grid51 .xCenter, .modalOverlay.modal100 .gridBox.grid41 .xCenter, .modalOverlay.modal100 .gridBox.grid31 .xCenter, .modalOverlay.modal100 .gridBox.grid21 .xCenter, .modalOverlay.modal900 .gridBox.grid51 .xCenter, .modalOverlay.modal900 .gridBox.grid41 .xCenter, .modalOverlay.modal900 .gridBox.grid31 .xCenter, .modalOverlay.modal900 .gridBox.grid21 .xCenter {
    grid-column-start: 1;
    transform: none;
  }
  .modalOverlay.modal100 .gridBox .spn54,
  .modalOverlay.modal100 .gridBox .spn543,
  .modalOverlay.modal100 .gridBox .spn542,
  .modalOverlay.modal100 .gridBox .spn541, .modalOverlay.modal900 .gridBox .spn54,
  .modalOverlay.modal900 .gridBox .spn543,
  .modalOverlay.modal900 .gridBox .spn542,
  .modalOverlay.modal900 .gridBox .spn541 {
    grid-column: span 4;
  }
  .modalOverlay.modal100 .gridBox .spn53,
  .modalOverlay.modal100 .gridBox .spn532,
  .modalOverlay.modal100 .gridBox .spn531,
  .modalOverlay.modal100 .gridBox .spn43,
  .modalOverlay.modal100 .gridBox .spn432,
  .modalOverlay.modal100 .gridBox .spn431,
  .modalOverlay.modal100 .gridBox .spn332,
  .modalOverlay.modal100 .gridBox .spn331, .modalOverlay.modal900 .gridBox .spn53,
  .modalOverlay.modal900 .gridBox .spn532,
  .modalOverlay.modal900 .gridBox .spn531,
  .modalOverlay.modal900 .gridBox .spn43,
  .modalOverlay.modal900 .gridBox .spn432,
  .modalOverlay.modal900 .gridBox .spn431,
  .modalOverlay.modal900 .gridBox .spn332,
  .modalOverlay.modal900 .gridBox .spn331 {
    grid-column: span 3;
  }
  .modalOverlay.modal100 .gridBox .spn52,
  .modalOverlay.modal100 .gridBox .spn521,
  .modalOverlay.modal100 .gridBox .spn42,
  .modalOverlay.modal100 .gridBox .spn421,
  .modalOverlay.modal100 .gridBox .spn32,
  .modalOverlay.modal100 .gridBox .spn321,
  .modalOverlay.modal100 .gridBox .spn221, .modalOverlay.modal900 .gridBox .spn52,
  .modalOverlay.modal900 .gridBox .spn521,
  .modalOverlay.modal900 .gridBox .spn42,
  .modalOverlay.modal900 .gridBox .spn421,
  .modalOverlay.modal900 .gridBox .spn32,
  .modalOverlay.modal900 .gridBox .spn321,
  .modalOverlay.modal900 .gridBox .spn221 {
    grid-column: span 2;
  }
  .modalOverlay.modal100 .gridBox .spn51,
  .modalOverlay.modal100 .gridBox .spn41,
  .modalOverlay.modal100 .gridBox .spn31,
  .modalOverlay.modal100 .gridBox .spn21, .modalOverlay.modal900 .gridBox .spn51,
  .modalOverlay.modal900 .gridBox .spn41,
  .modalOverlay.modal900 .gridBox .spn31,
  .modalOverlay.modal900 .gridBox .spn21 {
    grid-column: span 1;
  }
}

.contain100,
.cover100 {
  min-width: 100px;
  width: 100px;
  height: 100px;
  border-radius: var(--radius);
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

.cover100 {
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

.ltr {
  direction: ltr !important;
}

.rtl {
  direction: rtl !important;
}

.pointer {
  cursor: pointer;
}

.radius {
  border-radius: var(--radius);
}

.radius0 {
  border-radius: 0 !important;
}

.dNone {
  display: none !important;
}

.dBlock {
  display: block !important;
}

.modalBox .dModalBlock {
  display: block !important;
}

.dFlex {
  display: flex;
}
.dFlex.flexWrap {
  flex-wrap: wrap;
}
.dFlex.justifyCenter {
  justify-content: center;
}
.dFlex.justifyEnd {
  justify-content: end;
}
.dFlex.justifyBetween {
  justify-content: space-between;
}
.dFlex.alignCenter {
  align-items: center;
}
.dFlex.gap {
  gap: var(--margin);
}
.dFlex.gap0 {
  gap: 0;
}
.dFlex.gap5 {
  gap: 5px;
}
.dFlex.gap10 {
  gap: 10px;
}
.dFlex.gap15 {
  gap: 15px;
}
.dFlex.gap20 {
  gap: 20px;
}
.dFlex.gap25 {
  gap: 25px;
}
.dFlex.gap30 {
  gap: 30px;
}

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

.ofAuto {
  overflow: auto;
}

.textNowrap {
  white-space: nowrap;
}

.xMandatory {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Needed to work on iOS Safari */
}

.snapStart {
  scroll-snap-align: start;
}

.snapCenter {
  scroll-snap-align: center;
}

.w100 {
  width: 100%;
}

.w400 {
  width: 400px;
  max-width: 100%;
}

.w700 {
  width: 700px;
  max-width: 100%;
}

.h100 {
  height: 100%;
}

.h40 {
  height: 40px !important;
}

.h30 {
  height: 30px !important;
}

.p0 {
  padding: 0 !important;
}

.pdng {
  padding: var(--margin) !important;
}

.p5 {
  padding: 5px !important;
}

.p10 {
  padding: 10px !important;
}

.p15 {
  padding: 15px !important;
}

.p20 {
  padding: 20px !important;
}

.p25 {
  padding: 25px !important;
}

.p30 {
  padding: 30px !important;
}

.px {
  padding-right: var(--margin) !important;
  padding-left: var(--margin) !important;
}

.px5 {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

.px10 {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

.py {
  padding-top: var(--margin) !important;
  padding-bottom: var(--margin) !important;
}

.py5 {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.py10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.py15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.py20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.py25 {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

.py30 {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.mb {
  margin-bottom: var(--margin) !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mt {
  margin-top: var(--margin) !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mxAuto {
  margin-left: auto;
  margin-right: auto;
}

.bgBlue {
  background-color: var(--bgBlue);
}

.bgGreen {
  background-color: var(--bgGreen);
}

.bgRed {
  background-color: var(--bgRed);
}

.bgYellow {
  background-color: var(--bgYellow);
}

.bgDark {
  background-color: var(--bgDark);
}

.textLight {
  color: var(--textLight) !important;
}

.textDark {
  color: var(--textDark) !important;
}

.textColor {
  color: var(--textColor) !important;
}

.textBlue {
  color: var(--textBlue) !important;
}

.textRed {
  color: var(--textRed) !important;
}

.textYellow {
  color: var(--textYellow) !important;
}

.textGreen {
  color: var(--textGreen) !important;
}

.textGray {
  color: gray !important;
}

.subText {
  color: var(--subText) !important;
}

.baseFont {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.textBold {
  font-weight: bold;
}

.textEnd {
  text-align: end;
}

.textCenter {
  text-align: center;
}

.textLeft {
  text-align: left;
}

.textIcon {
  display: inline-flex;
  align-items: center;
}
.textIcon i {
  margin-left: 5px;
}

.page404 .errorCode {
  font-size: 120px;
  font-weight: bold;
  color: var(--mainColor);
  line-height: 1;
}
.page404 .errorTitle {
  font-size: 28px;
}
.page404 .errorMessage {
  font-size: 18px;
  line-height: 1.6;
}
.page404 .homeBtn {
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
}

#main {
  min-height: calc(100vh - 240px);
}

#footer {
  background-color: var(--bgFooter);
}

.scrollX::-webkit-scrollbar,
.navTabs::-webkit-scrollbar {
  height: 5px;
}

.scrollY::-webkit-scrollbar,
.modalOverlay::-webkit-scrollbar,
.modalOverlay .modalContent::-webkit-scrollbar,
.selectBox .selectBoxBody .list::-webkit-scrollbar,
.filterCheck .list::-webkit-scrollbar,
#searchFilter .searchFilterBody::-webkit-scrollbar,
#menuBox .menuBoxBody::-webkit-scrollbar {
  width: 5px;
}

.scrollY::-webkit-scrollbar-thumb,
.scrollX::-webkit-scrollbar-thumb,
.navTabs::-webkit-scrollbar-thumb,
.modalOverlay::-webkit-scrollbar-thumb,
.modalOverlay .modalContent::-webkit-scrollbar-thumb,
.selectBox .selectBoxBody .list::-webkit-scrollbar-thumb,
.filterCheck .list::-webkit-scrollbar-thumb,
#searchFilter .searchFilterBody::-webkit-scrollbar-thumb,
#menuBox .menuBoxBody::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

input.find::placeholder,
input.find::-webkit-input-placeholder {
  text-align: left !important;
}

/* Minimum breakpoint */
@media (min-width: 576px) {
  /* sm */
}
@media (min-width: 768px) {
  /* md */
  .dMdBlock {
    display: block !important;
  }
}
@media (min-width: 992px) {
  /* lg */
  .modalBox .dModalLgBlock {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  /* xl */
}
@media (min-width: 1400px) {
  /* xxl */
}
/* Maximum breakpoint */
@media (max-width: 575.98px) {
  /* xs */
}
@media (max-width: 767.98px) {
  /* sm */
  .wSm100 {
    width: 100%;
  }
  .dSmBlock {
    display: block !important;
  }
  .dSmFlex {
    display: flex !important;
  }
  .dSmNone {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  /* md */
  .wMd100 {
    width: 100%;
  }
}
@media (max-width: 1199.98px) {
  /* lg */
}
@media (max-width: 1399.98px) {
  /* xl */
}
.productItem {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  /* overflow: hidden; */
  background-color: var(--box);
}
.productItem figure {
  width: 100%;
  height: 200px;
  background-color: var(--boxHead);
  display: flex;
  align-items: center;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.productItem figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.productItem figure .rightLabel {
  position: absolute;
  background-color: var(--box);
  color: var(--boxHeadText);
  top: 8px;
  right: -5px;
  padding: 6px 20px;
  border-radius: var(--radius) 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.productItem figure .rightLabel::after {
  content: "";
  position: absolute;
  border: 6px solid transparent;
  border-left: 5px solid var(--box);
  top: -6px;
  right: -6px;
}
.productItem figure .inventoryLabel,
.productItem figure .leftLabel {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 4px;
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.productItem figure .inventoryLabel {
  left: auto;
  right: 4px;
}
.productItem .title {
  height: 64px;
  line-height: 1.9;
  width: 100%;
  overflow: hidden;
  padding: 10px;
}
.productItem .title a {
  font-size: 1rem;
  color: var(--subText);
}
.productItem .title a:hover {
  color: var(--textColor);
}
.productItem .priceBox {
  border: 2px solid var(--boxBorder);
  margin: 10px;
  border-radius: var(--radius);
  text-align: center;
  padding: 5px 0;
}
.productItem .priceBox .oldPrice {
  font-size: 1.2rem;
  margin-left: 10px;
  position: relative;
  color: var(--subText);
}
.productItem .priceBox .mainPrice {
  color: var(--subText);
  font-size: 2rem;
  font-weight: bold;
}
.productItem .priceBox .tomans {
  color: var(--mainColor);
  font-size: 0.8rem;
  font-weight: bold;
}
.productItem .btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
.productItem .btns .action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  cursor: pointer;
  width: 40px;
  height: 40px;
}
.productItem .btns .action.bt {
  width: 60px;
  color: var(--mainColor);
  transition: all 0.3s ease;
}
.productItem .btns .action.bt:hover {
  background-color: var(--mainColor);
  border-color: var(--mainColor);
  color: var(--textLight);
  transition: all 0.3s ease;
}
.productItem .btns .action i {
  font-size: 1.8rem;
  color: var(--subText);
}

.productGroupMenu {
  position: relative;
}
.productGroupMenu > span {
  display: flex;
  width: 100px;
  height: 25px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.3s ease;
}
.productGroupMenu ul {
  position: absolute;
  background-color: var(--menuSub);
  opacity: 0;
  visibility: hidden;
  width: 100%;
  right: 20px;
  top: 100%;
  transition: all 0.3s ease;
  z-index: 34;
}
.productGroupMenu ul li {
  display: flex;
  padding: 5px 5px 0 5px;
  background-color: var(--boxHead);
  position: relative;
}
.productGroupMenu ul li:last-child {
  padding-bottom: 5px;
}
.productGroupMenu ul li span,
.productGroupMenu ul li a {
  display: flex;
  width: 100%;
  background-color: var(--menuItem);
  color: var(--menuSubText);
  padding: 12px;
  border-radius: var(--radius);
  transition: all 0.3s ease;
}
.productGroupMenu ul li ul {
  right: calc(100% + 20px);
  top: 0;
}
.productGroupMenu ul li:hover > ul {
  right: 100%;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease;
}
.productGroupMenu ul li:hover > span,
.productGroupMenu ul li:hover > a {
  background-color: var(--bgColor);
  transition: all 0.3s ease;
}
.productGroupMenu:hover > span {
  border-radius: var(--radius) var(--radius) 0 0;
  background-color: var(--boxHead);
  color: var(--boxHeadText);
  border-color: var(--boxHead);
}
.productGroupMenu:hover > ul {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease;
  right: 0;
}

.studyPage {
  width: 100%;
  height: 100vh;
  background-color: var(--box);
  display: flex;
  position: relative;
  overflow-x: hidden;
}
.studyPage .toc {
  width: 270px;
  height: 100%;
  z-index: 1001;
  background-color: var(--boxHead);
  transition: all 0.3s;
  position: absolute;
  right: -270px;
}
.studyPage .toc .tocHead {
  height: 50px;
}
.studyPage .toc .tocHead .closeBtn {
  background-color: var(--close);
  color: var(--textDark);
  transition: all 0.3s;
}
.studyPage .toc .tocHead .closeBtn:hover {
  background-color: var(--alertDarkHover);
  color: var(--textLight);
}
.studyPage .toc .tocItems {
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
}
.studyPage .toc .tocItems .tocItem {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.studyPage .toc .tocItems .tocItem.pStart {
  padding-right: 10px;
  color: var(--subText);
}
.studyPage .toc .tocItems .tocItem .tocLine {
  height: 1px;
  border-bottom: 1px dashed var(--border);
  flex-grow: 1;
}
.studyPage .toc .tocItems .tocItem .tocNum {
  width: 40px;
  background-color: var(--bgColor);
  color: var(--textColor);
  display: inline-flex;
  justify-content: center;
  border-radius: var(--radius);
}
.studyPage .content {
  flex-grow: 1;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  transition: all 0.3s;
}
.studyPage .content .contentHead {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: var(--menu3);
}
.studyPage .content .contentHead > * {
  display: flex;
  align-items: center;
  gap: 10px;
}
.studyPage .content .contentHead .bookTitle {
  font-size: 20px;
}
@media (max-width: 767px) {
  .studyPage .content .contentHead .bookTitle {
    font-size: 1rem;
  }
}
.studyPage .content .contentHead .leftList > * {
  width: 25px;
  height: 25px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--alertBlueHover);
  color: #fff;
}
.studyPage .content .contentHead .leftList > *.editBookPage {
  cursor: pointer;
  color: var(--textYellow);
}
.studyPage .content .studyOverlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  cursor: pointer;
}
.studyPage .content .searchResult {
  height: calc(100vh - 50px);
  overflow-y: auto;
}
.studyPage .content .searchResult .contentBox {
  min-height: calc(100vh - 124px);
}
.studyPage .content .searchResult .translationSelectBox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  padding: 10px 20px;
  background-color: var(--bgDark);
}
.studyPage .content .searchResult .translationSelectBox .label {
  text-wrap-mode: nowrap;
}
.studyPage .content .searchResult .text {
  padding: 20px;
}
.studyPage.showToc .tocBtn {
  display: none;
}
@media (max-width: 767px) {
  .studyPage.showToc .toc {
    right: 0;
  }
  .studyPage.showToc .content .studyOverlay {
    display: block;
  }
}
@media (min-width: 768px) {
  .studyPage.showToc .toc {
    right: 0;
  }
  .studyPage.showToc .content {
    right: 270px;
  }
}
.studyPage .paginat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px;
}
.studyPage .paginat ul {
  display: flex;
  overflow-x: auto;
  gap: 5px;
}
.studyPage .paginat ul li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  background-color: var(--btnDef);
  color: var(--btnDefText);
  border-radius: var(--radius);
  cursor: pointer;
}
.studyPage .paginat ul li:hover:not(.active):not(.dots) {
  background-color: var(--btnDefHover);
}
.studyPage .paginat ul li.active, .studyPage .paginat ul li.dots {
  background-color: var(--boxHead);
  color: var(--boxHeadText);
  cursor: default;
}
.studyPage .paginat ul li.dots {
  background-color: transparent;
}
.studyPage .paginat .next,
.studyPage .paginat .prev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 50% var(--radius) var(--radius) 50%;
  border: 1px solid var(--border);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.studyPage .paginat .prev {
  border-radius: var(--radius) 50% 50% var(--radius);
}

.translationBox {
  font-size: 16px;
  font-weight: 500;
}
.translationBox .speaker {
  font-size: 11px;
  font-weight: 500;
}
.translationBox .speaker.speaker1 {
  color: #808080;
}
.translationBox .speaker.speaker2 {
  color: #04707e;
}
.translationBox .speaker.speaker3 {
  color: #c47004;
}
.translationBox > * {
  padding: 1rem 25px;
}
.translationBox > * > *:not(:last-child) {
  margin-bottom: 1rem;
}

.arablish {
  display: block;
  direction: ltr;
  text-align: right;
  color: gray;
  font-size: 13px;
}

/* Doc */
.documentForm .samiDP,
.documentForm .description {
  position: relative;
}

.documentForm .samiDP label,
.documentForm .description label {
  position: absolute;
  font-size: 11px;
  top: 5px;
  right: 5px;
  /* color: #777; */
  color: var(--label);
}

.documentForm .samiDP input {
  width: 100%;
  /* border: 1px solid #ccc; */
  padding: 5px 30px 5px 5px;
}

.documentForm .description textarea {
  width: 100%;
  height: 80px;
  /* border: 1px solid #ccc; */
  padding: 22px 5px 5px 5px;
}

.documentForm .float input {
  padding-right: 20px;
}

.documentForm .ajaxErr,
.documentForm .ajaxErrBtn {
  font-size: 12px;
}

.docRow {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 4px;
  padding: 2px;
  background-color: var(--boxHead);
}

.docRow .account {
  width: 50%;
  padding: 5px;
}

.docRow .account .fa {
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
}

.docRow .account .fa.fa-remove {
  color: #5B1D0E;
}

.docRow .account .fa.fa-pencil {
  color: #89610a;
}

.docRow .account .title {
  display: inline-block;
}

.docRow .amount {
  width: 25%;
  padding: 2px;
  position: relative;
}

.docRow .amount::before {
  content: "بد";
  position: absolute;
  top: 3px;
  right: 3px;
  /* background-color: #fff; */
  color: var(--label);
  padding: 0 5px;
  font-size: 10px;
}

.docRow .amount.creditAmount::before {
  content: "بس";
}

.docRow .amount input {
  width: 100%;
  padding: 5px;
  background-color: var(--input);
  border: 1px solid var(--inputBorder);
  direction: ltr;
}

@media (max-width: 767px) {
  .docRow .account {
    width: 100%;
  }
  .docRow .amount {
    width: 50%;
  }
}
/* Document End */
.highlight-search {
  background-color: yellow;
  color: black;
  font-weight: bold;
  padding: 2px 1px;
  border-radius: 3px;
}/*# sourceMappingURL=style.css.map */