/********************** Variables *************/
:root {
  --main-clr: #fc6527;
  --main-clr-hover: #ed4703;
  --secondary-clr: #df3a60;
  --secondary-clr-hover: #c62046;
  --soft-yellow-clr: #ffff4d;
  --soft-yellow-clr-hover: #ffff1a;
  --soft-green-sky-clr: #80ffd4;
  --soft-green-sky-clr-hover: #4dffc3;
  --skin-clr: #edd392;
  --skin-clr-hover: #e6c166;
  --dark-yellow: #FBB707;
  --dark-yellow-hover: #cc9403;
  --soft-gray: #c8c8c8;
  --soft-gray-hover: #afafaf;
  --danger-clr: tomato;
  --danger-clr-hover: #ff3814;
  --soft-danger-clr: hsl(9deg, 50%, 64%);
  --soft-danger-clr-hover: #c4614f;
  --open-green-clr: #cfffcf;
  --open-green-clr-hover: #9cff9c;
  --sidebar-bg: #213549;
  --sidebar-txt-clr: #fff;
  --sidebar-txt-hover-clr: #fff;
  --sidebar-link-bg-hover-clr: rgba(0, 0, 0, 0.2);
  --sidebar-dropdown-txt-clr: #fff;
  --sidebar-dropdown-txt-hover-clr: #fff;
  --body-bg: #fff;
  --customer-body-bg: #EEF2F5;
  --soft-gray: #c8c8c8;
  --dark-gray: #6c7769;
  --sidebar-width: min(15.625rem, 100%);
}

/********************** Reset *************/
html body * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
}

a:hover,
a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
}

li {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: inherit;
}

button:focus,
button {
  outline: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

/********************** Classes *************/
/* -------- Common Classes To Use -------- */
.w-fit {
  width: fit-content;
}

@media (min-width: 768px) {
  .w-sm-fit {
    width: fit-content !important;
  }
}

@media (min-width: 992px) {
  .w-md-fit {
    width: fit-content !important;
  }
}

.w-100vw {
  width: 100vw;
}

.w-max {
  width: max-content;
}

.h-fit {
  height: fit-content;
}

.h-max {
  height: max-content;
}

.h-100vh {
  height: 100vh;
}

.min-h-100vh {
  min-height: 100vh;
}

.min-h-95vh {
  min-height: 95vh;
}

.min-h-90vh {
  min-height: 90vh;
}

@media (min-width: 768px) {
  .w-sm-25 {
    width: 25% !important;
  }
}

@media (min-width: 992px) {
  .w-md-25 {
    width: 25% !important;
  }
}

@media (min-width: 1200px) {
  .w-lg-25 {
    width: 25% !important;
  }
}

@media (min-width: 768px) {
  .w-sm-50 {
    width: 50% !important;
  }
}

@media (min-width: 992px) {
  .w-md-50 {
    width: 50% !important;
  }
}

@media (min-width: 1200px) {
  .w-lg-50 {
    width: 50% !important;
  }
}

@media (min-width: 768px) {
  .w-sm-75 {
    width: 75% !important;
  }
}

@media (min-width: 992px) {
  .w-md-75 {
    width: 75% !important;
  }
}

@media (min-width: 1200px) {
  .w-lg-75 {
    width: 75% !important;
  }
}

.text-r {
  text-align: right;
}

.text-c {
  text-align: center;
}

.text-l {
  text-align: left;
}

.txt-cap {
  text-transform: capitalize;
}

.t-italic {
  font-style: italic;
}

.fw-200 {
  font-weight: 200;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.ltr {
  direction: ltr;
}

.rtl {
  direction: rtl;
}

.word-break-bw {
  word-break: break-word;
}

.text-nowrap {
  white-space: nowrap;
}

.unset-mw {
  max-width: unset !important;
}

.cursor-p {
  cursor: pointer;
}

.fw-bolder {
  font-weight: bolder;
}

.disable {
  pointer-events: none;
  background-color: var(--soft-gray);
}

.g-transition {
  transition: 0.4s ease;
}

.ov-x-scroll {
  overflow-x: scroll;
}

@media (min-width: 768px) {
  .ov-sm-x-scroll {
    overflow-x: scroll;
  }
}

.ov-x-hidden {
  overflow-x: hidden;
}

.ov-x-auto {
  overflow-x: auto;
}

@media (min-width: 768px) {
  .ov-sm-x-hidden {
    overflow-x: hidden;
  }
}

.ov-y-scroll {
  overflow-y: scroll;
}

@media (min-width: 768px) {
  .ov-sm-y-scroll {
    overflow-y: scroll;
  }
}

.ov-y-hidden {
  overflow-y: hidden;
}

.ov-y-auto {
  overflow-y: auto;
}

@media (min-width: 768px) {
  .ov-sm-y-hidden {
    overflow-y: hidden;
  }
}

.ov-scroll {
  overflow: scroll;
}

.ov-hidden {
  overflow: hidden;
}

.customer-body-bg-clr {
  background-color: var(--customer-body-bg);
}

.bg-img {
  object-fit: cover;
}

.img-fit-25 {
  width: 1.5625rem;
  height: 1.5625rem;
  object-fit: cover;
}

.rounded-img-25 {
  width: 1.5625rem;
  height: 1.5625rem;
  border-radius: 50%;
  object-fit: cover;
}

.img-fit-20 {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: cover;
}

.img-fit-50 {
  width: 3.125rem;
  height: 3.125rem;
  object-fit: cover;
}

.rounded-img-50 {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  object-fit: cover;
}

.img-fit-45 {
  width: 2.8125rem;
  height: 2.8125rem;
  object-fit: cover;
}

.img-fit-75 {
  width: 4.6875rem;
  height: 4.6875rem;
  object-fit: cover;
}

.rounded-img-75 {
  width: 4.6875rem;
  height: 4.6875rem;
  border-radius: 50%;
  object-fit: cover;
}

.img-fit-70 {
  width: 4.375rem;
  height: 4.375rem;
  object-fit: cover;
}

.img-fit-100 {
  width: 6.25rem;
  height: 6.25rem;
  object-fit: cover;
}

.rounded-img-100 {
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
  object-fit: cover;
}

.img-fit-95 {
  width: 5.9375rem;
  height: 5.9375rem;
  object-fit: cover;
}

.img-fit-125 {
  width: 7.8125rem;
  height: 7.8125rem;
  object-fit: cover;
}

.rounded-img-125 {
  width: 7.8125rem;
  height: 7.8125rem;
  border-radius: 50%;
  object-fit: cover;
}

.img-fit-120 {
  width: 7.5rem;
  height: 7.5rem;
  object-fit: cover;
}

.img-fit-150 {
  width: 9.375rem;
  height: 9.375rem;
  object-fit: cover;
}

.rounded-img-150 {
  width: 9.375rem;
  height: 9.375rem;
  border-radius: 50%;
  object-fit: cover;
}

.img-fit-145 {
  width: 9.0625rem;
  height: 9.0625rem;
  object-fit: cover;
}

.img-fit-175 {
  width: 10.9375rem;
  height: 10.9375rem;
  object-fit: cover;
}

.rounded-img-175 {
  width: 10.9375rem;
  height: 10.9375rem;
  border-radius: 50%;
  object-fit: cover;
}

.img-fit-170 {
  width: 10.625rem;
  height: 10.625rem;
  object-fit: cover;
}

.img-fit-200 {
  width: 12.5rem;
  height: 12.5rem;
  object-fit: cover;
}

.rounded-img-200 {
  width: 12.5rem;
  height: 12.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.img-fit-195 {
  width: 12.1875rem;
  height: 12.1875rem;
  object-fit: cover;
}

.img-fit-60 {
  width: 3.75rem;
  height: 3.75rem;
  object-fit: cover;
}

.fs-1px {
  font-size: 0.0625rem;
}

.fs-1em {
  font-size: 1em;
}

.fs-1dot-em {
  font-size: 0.5em;
}

.fs-2px {
  font-size: 0.125rem;
}

.fs-2em {
  font-size: 2em;
}

.fs-2dot-em {
  font-size: 1.5em;
}

.fs-3px {
  font-size: 0.1875rem;
}

.fs-3em {
  font-size: 3em;
}

.fs-3dot-em {
  font-size: 2.5em;
}

.fs-4px {
  font-size: 0.25rem;
}

.fs-4em {
  font-size: 4em;
}

.fs-4dot-em {
  font-size: 3.5em;
}

.fs-5px {
  font-size: 0.3125rem;
}

.fs-5em {
  font-size: 5em;
}

.fs-5dot-em {
  font-size: 4.5em;
}

.fs-6px {
  font-size: 0.375rem;
}

.fs-6em {
  font-size: 6em;
}

.fs-6dot-em {
  font-size: 5.5em;
}

.fs-7 {
  font-size: 0.4375rem;
}

.fs-7em {
  font-size: 7em;
}

.fs-7dot-em {
  font-size: 6.5em;
}

.fs-8 {
  font-size: 0.5rem;
}

.fs-8em {
  font-size: 8em;
}

.fs-8dot-em {
  font-size: 7.5em;
}

.fs-9 {
  font-size: 0.5625rem;
}

.fs-9em {
  font-size: 9em;
}

.fs-9dot-em {
  font-size: 8.5em;
}

.fs-10 {
  font-size: 0.625rem;
}

.fs-10em {
  font-size: 10em;
}

.fs-10dot-em {
  font-size: 9.5em;
}

.fs-11 {
  font-size: 0.6875rem;
}

.fs-11em {
  font-size: 11em;
}

.fs-11dot-em {
  font-size: 10.5em;
}

.fs-12 {
  font-size: 0.75rem;
}

.fs-12em {
  font-size: 12em;
}

.fs-12dot-em {
  font-size: 11.5em;
}

.fs-13 {
  font-size: 0.8125rem;
}

.fs-13em {
  font-size: 13em;
}

.fs-13dot-em {
  font-size: 12.5em;
}

.fs-14 {
  font-size: 0.875rem;
}

.fs-14em {
  font-size: 14em;
}

.fs-14dot-em {
  font-size: 13.5em;
}

.fs-15 {
  font-size: 0.9375rem;
}

.fs-15em {
  font-size: 15em;
}

.fs-15dot-em {
  font-size: 14.5em;
}

.fs-16 {
  font-size: 1rem;
}

.fs-16em {
  font-size: 16em;
}

.fs-16dot-em {
  font-size: 15.5em;
}

.fs-17 {
  font-size: 1.0625rem;
}

.fs-17em {
  font-size: 17em;
}

.fs-17dot-em {
  font-size: 16.5em;
}

.fs-18 {
  font-size: 1.125rem;
}

.fs-18em {
  font-size: 18em;
}

.fs-18dot-em {
  font-size: 17.5em;
}

.fs-19 {
  font-size: 1.1875rem;
}

.fs-19em {
  font-size: 19em;
}

.fs-19dot-em {
  font-size: 18.5em;
}

.fs-20 {
  font-size: 1.25rem;
}

.fs-20em {
  font-size: 20em;
}

.fs-20dot-em {
  font-size: 19.5em;
}

.fs-21 {
  font-size: 1.3125rem;
}

.fs-21em {
  font-size: 21em;
}

.fs-21dot-em {
  font-size: 20.5em;
}

.fs-22 {
  font-size: 1.375rem;
}

.fs-22em {
  font-size: 22em;
}

.fs-22dot-em {
  font-size: 21.5em;
}

.fs-23 {
  font-size: 1.4375rem;
}

.fs-23em {
  font-size: 23em;
}

.fs-23dot-em {
  font-size: 22.5em;
}

.fs-24 {
  font-size: 1.5rem;
}

.fs-24em {
  font-size: 24em;
}

.fs-24dot-em {
  font-size: 23.5em;
}

.fs-25 {
  font-size: 1.5625rem;
}

.fs-25em {
  font-size: 25em;
}

.fs-25dot-em {
  font-size: 24.5em;
}

.fs-26 {
  font-size: 1.625rem;
}

.fs-26em {
  font-size: 26em;
}

.fs-26dot-em {
  font-size: 25.5em;
}

.fs-27 {
  font-size: 1.6875rem;
}

.fs-27em {
  font-size: 27em;
}

.fs-27dot-em {
  font-size: 26.5em;
}

.fs-28 {
  font-size: 1.75rem;
}

.fs-28em {
  font-size: 28em;
}

.fs-28dot-em {
  font-size: 27.5em;
}

.fs-29 {
  font-size: 1.8125rem;
}

.fs-29em {
  font-size: 29em;
}

.fs-29dot-em {
  font-size: 28.5em;
}

.fs-30 {
  font-size: 1.875rem;
}

.fs-30em {
  font-size: 30em;
}

.fs-30dot-em {
  font-size: 29.5em;
}

.fs-31 {
  font-size: 1.9375rem;
}

.fs-31em {
  font-size: 31em;
}

.fs-31dot-em {
  font-size: 30.5em;
}

.fs-32 {
  font-size: 2rem;
}

.fs-32em {
  font-size: 32em;
}

.fs-32dot-em {
  font-size: 31.5em;
}

.fs-33 {
  font-size: 2.0625rem;
}

.fs-33em {
  font-size: 33em;
}

.fs-33dot-em {
  font-size: 32.5em;
}

.fs-34 {
  font-size: 2.125rem;
}

.fs-34em {
  font-size: 34em;
}

.fs-34dot-em {
  font-size: 33.5em;
}

.fs-35 {
  font-size: 2.1875rem;
}

.fs-35em {
  font-size: 35em;
}

.fs-35dot-em {
  font-size: 34.5em;
}

.fs-36 {
  font-size: 2.25rem;
}

.fs-36em {
  font-size: 36em;
}

.fs-36dot-em {
  font-size: 35.5em;
}

.fs-37 {
  font-size: 2.3125rem;
}

.fs-37em {
  font-size: 37em;
}

.fs-37dot-em {
  font-size: 36.5em;
}

.fs-38 {
  font-size: 2.375rem;
}

.fs-38em {
  font-size: 38em;
}

.fs-38dot-em {
  font-size: 37.5em;
}

.fs-39 {
  font-size: 2.4375rem;
}

.fs-39em {
  font-size: 39em;
}

.fs-39dot-em {
  font-size: 38.5em;
}

.fs-40 {
  font-size: 2.5rem;
}

.fs-40em {
  font-size: 40em;
}

.fs-40dot-em {
  font-size: 39.5em;
}

.fs-41 {
  font-size: 2.5625rem;
}

.fs-41em {
  font-size: 41em;
}

.fs-41dot-em {
  font-size: 40.5em;
}

.fs-42 {
  font-size: 2.625rem;
}

.fs-42em {
  font-size: 42em;
}

.fs-42dot-em {
  font-size: 41.5em;
}

.fs-43 {
  font-size: 2.6875rem;
}

.fs-43em {
  font-size: 43em;
}

.fs-43dot-em {
  font-size: 42.5em;
}

.fs-44 {
  font-size: 2.75rem;
}

.fs-44em {
  font-size: 44em;
}

.fs-44dot-em {
  font-size: 43.5em;
}

.fs-45 {
  font-size: 2.8125rem;
}

.fs-45em {
  font-size: 45em;
}

.fs-45dot-em {
  font-size: 44.5em;
}

.fs-46 {
  font-size: 2.875rem;
}

.fs-46em {
  font-size: 46em;
}

.fs-46dot-em {
  font-size: 45.5em;
}

.fs-47 {
  font-size: 2.9375rem;
}

.fs-47em {
  font-size: 47em;
}

.fs-47dot-em {
  font-size: 46.5em;
}

.fs-48 {
  font-size: 3rem;
}

.fs-48em {
  font-size: 48em;
}

.fs-48dot-em {
  font-size: 47.5em;
}

.fs-49 {
  font-size: 3.0625rem;
}

.fs-49em {
  font-size: 49em;
}

.fs-49dot-em {
  font-size: 48.5em;
}

.fs-50 {
  font-size: 3.125rem;
}

.fs-50em {
  font-size: 50em;
}

.fs-50dot-em {
  font-size: 49.5em;
}

.w-10px {
  width: 10px !important;
}

.w-15px {
  width: 15px !important;
}

.w-10pc {
  width: 10% !important;
}

@media (max-width: 767px) {
  .w-sm-10pc {
    width: 10% !important;
  }
}

.mw-10px {
  max-width: 10px !important;
}

.mw-15px {
  max-width: 15px !important;
}

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

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

.h-10px {
  height: 10px !important;
}

.h-15px {
  height: 15px !important;
}

@media (max-width: 767px) {
  .h-sm-10px {
    height: 10px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-15px {
    height: 15px !important;
  }
}

.h-10pc {
  height: 10% !important;
}

@media (max-width: 767px) {
  .h-sm-10pc {
    height: 10% !important;
  }
}

.mh-10px {
  max-height: 10px !important;
}

.mh-15px {
  max-height: 15px !important;
}

.min-h-10px {
  min-height: 10px !important;
}

.min-h-15px {
  min-height: 15px !important;
}

.w-20px {
  width: 20px !important;
}

.w-25px {
  width: 25px !important;
}

.w-20pc {
  width: 20% !important;
}

@media (max-width: 767px) {
  .w-sm-20pc {
    width: 20% !important;
  }
}

.mw-20px {
  max-width: 20px !important;
}

.mw-25px {
  max-width: 25px !important;
}

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

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

.h-20px {
  height: 20px !important;
}

.h-25px {
  height: 25px !important;
}

@media (max-width: 767px) {
  .h-sm-20px {
    height: 20px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-25px {
    height: 25px !important;
  }
}

.h-20pc {
  height: 20% !important;
}

@media (max-width: 767px) {
  .h-sm-20pc {
    height: 20% !important;
  }
}

.mh-20px {
  max-height: 20px !important;
}

.mh-25px {
  max-height: 25px !important;
}

.min-h-20px {
  min-height: 20px !important;
}

.min-h-25px {
  min-height: 25px !important;
}

.w-30px {
  width: 30px !important;
}

.w-35px {
  width: 35px !important;
}

.w-30pc {
  width: 30% !important;
}

@media (max-width: 767px) {
  .w-sm-30pc {
    width: 30% !important;
  }
}

.mw-30px {
  max-width: 30px !important;
}

.mw-35px {
  max-width: 35px !important;
}

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

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

.h-30px {
  height: 30px !important;
}

.h-35px {
  height: 35px !important;
}

@media (max-width: 767px) {
  .h-sm-30px {
    height: 30px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-35px {
    height: 35px !important;
  }
}

.h-30pc {
  height: 30% !important;
}

@media (max-width: 767px) {
  .h-sm-30pc {
    height: 30% !important;
  }
}

.mh-30px {
  max-height: 30px !important;
}

.mh-35px {
  max-height: 35px !important;
}

.min-h-30px {
  min-height: 30px !important;
}

.min-h-35px {
  min-height: 35px !important;
}

.w-40px {
  width: 40px !important;
}

.w-45px {
  width: 45px !important;
}

.w-40pc {
  width: 40% !important;
}

@media (max-width: 767px) {
  .w-sm-40pc {
    width: 40% !important;
  }
}

.mw-40px {
  max-width: 40px !important;
}

.mw-45px {
  max-width: 45px !important;
}

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

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

.h-40px {
  height: 40px !important;
}

.h-45px {
  height: 45px !important;
}

@media (max-width: 767px) {
  .h-sm-40px {
    height: 40px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-45px {
    height: 45px !important;
  }
}

.h-40pc {
  height: 40% !important;
}

@media (max-width: 767px) {
  .h-sm-40pc {
    height: 40% !important;
  }
}

.mh-40px {
  max-height: 40px !important;
}

.mh-45px {
  max-height: 45px !important;
}

.min-h-40px {
  min-height: 40px !important;
}

.min-h-45px {
  min-height: 45px !important;
}

.w-50px {
  width: 50px !important;
}

.w-55px {
  width: 55px !important;
}

.w-50pc {
  width: 50% !important;
}

@media (max-width: 767px) {
  .w-sm-50pc {
    width: 50% !important;
  }
}

.mw-50px {
  max-width: 50px !important;
}

.mw-55px {
  max-width: 55px !important;
}

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

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

.h-50px {
  height: 50px !important;
}

.h-55px {
  height: 55px !important;
}

@media (max-width: 767px) {
  .h-sm-50px {
    height: 50px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-55px {
    height: 55px !important;
  }
}

.h-50pc {
  height: 50% !important;
}

@media (max-width: 767px) {
  .h-sm-50pc {
    height: 50% !important;
  }
}

.mh-50px {
  max-height: 50px !important;
}

.mh-55px {
  max-height: 55px !important;
}

.min-h-50px {
  min-height: 50px !important;
}

.min-h-55px {
  min-height: 55px !important;
}

.w-60px {
  width: 60px !important;
}

.w-65px {
  width: 65px !important;
}

.w-60pc {
  width: 60% !important;
}

@media (max-width: 767px) {
  .w-sm-60pc {
    width: 60% !important;
  }
}

.mw-60px {
  max-width: 60px !important;
}

.mw-65px {
  max-width: 65px !important;
}

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

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

.h-60px {
  height: 60px !important;
}

.h-65px {
  height: 65px !important;
}

@media (max-width: 767px) {
  .h-sm-60px {
    height: 60px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-65px {
    height: 65px !important;
  }
}

.h-60pc {
  height: 60% !important;
}

@media (max-width: 767px) {
  .h-sm-60pc {
    height: 60% !important;
  }
}

.mh-60px {
  max-height: 60px !important;
}

.mh-65px {
  max-height: 65px !important;
}

.min-h-60px {
  min-height: 60px !important;
}

.min-h-65px {
  min-height: 65px !important;
}

.w-70px {
  width: 70px !important;
}

.w-75px {
  width: 75px !important;
}

.w-70pc {
  width: 70% !important;
}

@media (max-width: 767px) {
  .w-sm-70pc {
    width: 70% !important;
  }
}

.mw-70px {
  max-width: 70px !important;
}

.mw-75px {
  max-width: 75px !important;
}

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

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

.h-70px {
  height: 70px !important;
}

.h-75px {
  height: 75px !important;
}

@media (max-width: 767px) {
  .h-sm-70px {
    height: 70px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-75px {
    height: 75px !important;
  }
}

.h-70pc {
  height: 70% !important;
}

@media (max-width: 767px) {
  .h-sm-70pc {
    height: 70% !important;
  }
}

.mh-70px {
  max-height: 70px !important;
}

.mh-75px {
  max-height: 75px !important;
}

.min-h-70px {
  min-height: 70px !important;
}

.min-h-75px {
  min-height: 75px !important;
}

.w-80px {
  width: 80px !important;
}

.w-85px {
  width: 85px !important;
}

.w-80pc {
  width: 80% !important;
}

@media (max-width: 767px) {
  .w-sm-80pc {
    width: 80% !important;
  }
}

.mw-80px {
  max-width: 80px !important;
}

.mw-85px {
  max-width: 85px !important;
}

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

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

.h-80px {
  height: 80px !important;
}

.h-85px {
  height: 85px !important;
}

@media (max-width: 767px) {
  .h-sm-80px {
    height: 80px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-85px {
    height: 85px !important;
  }
}

.h-80pc {
  height: 80% !important;
}

@media (max-width: 767px) {
  .h-sm-80pc {
    height: 80% !important;
  }
}

.mh-80px {
  max-height: 80px !important;
}

.mh-85px {
  max-height: 85px !important;
}

.min-h-80px {
  min-height: 80px !important;
}

.min-h-85px {
  min-height: 85px !important;
}

.w-90px {
  width: 90px !important;
}

.w-95px {
  width: 95px !important;
}

.w-90pc {
  width: 90% !important;
}

@media (max-width: 767px) {
  .w-sm-90pc {
    width: 90% !important;
  }
}

.mw-90px {
  max-width: 90px !important;
}

.mw-95px {
  max-width: 95px !important;
}

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

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

.h-90px {
  height: 90px !important;
}

.h-95px {
  height: 95px !important;
}

@media (max-width: 767px) {
  .h-sm-90px {
    height: 90px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-95px {
    height: 95px !important;
  }
}

.h-90pc {
  height: 90% !important;
}

@media (max-width: 767px) {
  .h-sm-90pc {
    height: 90% !important;
  }
}

.mh-90px {
  max-height: 90px !important;
}

.mh-95px {
  max-height: 95px !important;
}

.min-h-90px {
  min-height: 90px !important;
}

.min-h-95px {
  min-height: 95px !important;
}

.w-100px {
  width: 100px !important;
}

.w-105px {
  width: 105px !important;
}

.w-100pc {
  width: 100% !important;
}

@media (max-width: 767px) {
  .w-sm-100pc {
    width: 100% !important;
  }
}

.mw-100px {
  max-width: 100px !important;
}

.mw-105px {
  max-width: 105px !important;
}

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

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

.h-100px {
  height: 100px !important;
}

.h-105px {
  height: 105px !important;
}

@media (max-width: 767px) {
  .h-sm-100px {
    height: 100px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-105px {
    height: 105px !important;
  }
}

.h-100pc {
  height: 100% !important;
}

@media (max-width: 767px) {
  .h-sm-100pc {
    height: 100% !important;
  }
}

.mh-100px {
  max-height: 100px !important;
}

.mh-105px {
  max-height: 105px !important;
}

.min-h-100px {
  min-height: 100px !important;
}

.min-h-105px {
  min-height: 105px !important;
}

.w-110px {
  width: 110px !important;
}

.w-115px {
  width: 115px !important;
}

.w-110pc {
  width: 110% !important;
}

@media (max-width: 767px) {
  .w-sm-110pc {
    width: 110% !important;
  }
}

.mw-110px {
  max-width: 110px !important;
}

.mw-115px {
  max-width: 115px !important;
}

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

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

.h-110px {
  height: 110px !important;
}

.h-115px {
  height: 115px !important;
}

@media (max-width: 767px) {
  .h-sm-110px {
    height: 110px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-115px {
    height: 115px !important;
  }
}

.h-110pc {
  height: 110% !important;
}

@media (max-width: 767px) {
  .h-sm-110pc {
    height: 110% !important;
  }
}

.mh-110px {
  max-height: 110px !important;
}

.mh-115px {
  max-height: 115px !important;
}

.min-h-110px {
  min-height: 110px !important;
}

.min-h-115px {
  min-height: 115px !important;
}

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

.w-125px {
  width: 125px !important;
}

.w-120pc {
  width: 120% !important;
}

@media (max-width: 767px) {
  .w-sm-120pc {
    width: 120% !important;
  }
}

.mw-120px {
  max-width: 120px !important;
}

.mw-125px {
  max-width: 125px !important;
}

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

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

.h-120px {
  height: 120px !important;
}

.h-125px {
  height: 125px !important;
}

@media (max-width: 767px) {
  .h-sm-120px {
    height: 120px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-125px {
    height: 125px !important;
  }
}

.h-120pc {
  height: 120% !important;
}

@media (max-width: 767px) {
  .h-sm-120pc {
    height: 120% !important;
  }
}

.mh-120px {
  max-height: 120px !important;
}

.mh-125px {
  max-height: 125px !important;
}

.min-h-120px {
  min-height: 120px !important;
}

.min-h-125px {
  min-height: 125px !important;
}

.w-130px {
  width: 130px !important;
}

.w-135px {
  width: 135px !important;
}

.w-130pc {
  width: 130% !important;
}

@media (max-width: 767px) {
  .w-sm-130pc {
    width: 130% !important;
  }
}

.mw-130px {
  max-width: 130px !important;
}

.mw-135px {
  max-width: 135px !important;
}

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

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

.h-130px {
  height: 130px !important;
}

.h-135px {
  height: 135px !important;
}

@media (max-width: 767px) {
  .h-sm-130px {
    height: 130px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-135px {
    height: 135px !important;
  }
}

.h-130pc {
  height: 130% !important;
}

@media (max-width: 767px) {
  .h-sm-130pc {
    height: 130% !important;
  }
}

.mh-130px {
  max-height: 130px !important;
}

.mh-135px {
  max-height: 135px !important;
}

.min-h-130px {
  min-height: 130px !important;
}

.min-h-135px {
  min-height: 135px !important;
}

.w-140px {
  width: 140px !important;
}

.w-145px {
  width: 145px !important;
}

.w-140pc {
  width: 140% !important;
}

@media (max-width: 767px) {
  .w-sm-140pc {
    width: 140% !important;
  }
}

.mw-140px {
  max-width: 140px !important;
}

.mw-145px {
  max-width: 145px !important;
}

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

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

.h-140px {
  height: 140px !important;
}

.h-145px {
  height: 145px !important;
}

@media (max-width: 767px) {
  .h-sm-140px {
    height: 140px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-145px {
    height: 145px !important;
  }
}

.h-140pc {
  height: 140% !important;
}

@media (max-width: 767px) {
  .h-sm-140pc {
    height: 140% !important;
  }
}

.mh-140px {
  max-height: 140px !important;
}

.mh-145px {
  max-height: 145px !important;
}

.min-h-140px {
  min-height: 140px !important;
}

.min-h-145px {
  min-height: 145px !important;
}

.w-150px {
  width: 150px !important;
}

.w-155px {
  width: 155px !important;
}

.w-150pc {
  width: 150% !important;
}

@media (max-width: 767px) {
  .w-sm-150pc {
    width: 150% !important;
  }
}

.mw-150px {
  max-width: 150px !important;
}

.mw-155px {
  max-width: 155px !important;
}

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

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

.h-150px {
  height: 150px !important;
}

.h-155px {
  height: 155px !important;
}

@media (max-width: 767px) {
  .h-sm-150px {
    height: 150px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-155px {
    height: 155px !important;
  }
}

.h-150pc {
  height: 150% !important;
}

@media (max-width: 767px) {
  .h-sm-150pc {
    height: 150% !important;
  }
}

.mh-150px {
  max-height: 150px !important;
}

.mh-155px {
  max-height: 155px !important;
}

.min-h-150px {
  min-height: 150px !important;
}

.min-h-155px {
  min-height: 155px !important;
}

.w-160px {
  width: 160px !important;
}

.w-165px {
  width: 165px !important;
}

.w-160pc {
  width: 160% !important;
}

@media (max-width: 767px) {
  .w-sm-160pc {
    width: 160% !important;
  }
}

.mw-160px {
  max-width: 160px !important;
}

.mw-165px {
  max-width: 165px !important;
}

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

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

.h-160px {
  height: 160px !important;
}

.h-165px {
  height: 165px !important;
}

@media (max-width: 767px) {
  .h-sm-160px {
    height: 160px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-165px {
    height: 165px !important;
  }
}

.h-160pc {
  height: 160% !important;
}

@media (max-width: 767px) {
  .h-sm-160pc {
    height: 160% !important;
  }
}

.mh-160px {
  max-height: 160px !important;
}

.mh-165px {
  max-height: 165px !important;
}

.min-h-160px {
  min-height: 160px !important;
}

.min-h-165px {
  min-height: 165px !important;
}

.w-170px {
  width: 170px !important;
}

.w-175px {
  width: 175px !important;
}

.w-170pc {
  width: 170% !important;
}

@media (max-width: 767px) {
  .w-sm-170pc {
    width: 170% !important;
  }
}

.mw-170px {
  max-width: 170px !important;
}

.mw-175px {
  max-width: 175px !important;
}

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

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

.h-170px {
  height: 170px !important;
}

.h-175px {
  height: 175px !important;
}

@media (max-width: 767px) {
  .h-sm-170px {
    height: 170px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-175px {
    height: 175px !important;
  }
}

.h-170pc {
  height: 170% !important;
}

@media (max-width: 767px) {
  .h-sm-170pc {
    height: 170% !important;
  }
}

.mh-170px {
  max-height: 170px !important;
}

.mh-175px {
  max-height: 175px !important;
}

.min-h-170px {
  min-height: 170px !important;
}

.min-h-175px {
  min-height: 175px !important;
}

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

.w-185px {
  width: 185px !important;
}

.w-180pc {
  width: 180% !important;
}

@media (max-width: 767px) {
  .w-sm-180pc {
    width: 180% !important;
  }
}

.mw-180px {
  max-width: 180px !important;
}

.mw-185px {
  max-width: 185px !important;
}

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

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

.h-180px {
  height: 180px !important;
}

.h-185px {
  height: 185px !important;
}

@media (max-width: 767px) {
  .h-sm-180px {
    height: 180px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-185px {
    height: 185px !important;
  }
}

.h-180pc {
  height: 180% !important;
}

@media (max-width: 767px) {
  .h-sm-180pc {
    height: 180% !important;
  }
}

.mh-180px {
  max-height: 180px !important;
}

.mh-185px {
  max-height: 185px !important;
}

.min-h-180px {
  min-height: 180px !important;
}

.min-h-185px {
  min-height: 185px !important;
}

.w-190px {
  width: 190px !important;
}

.w-195px {
  width: 195px !important;
}

.w-190pc {
  width: 190% !important;
}

@media (max-width: 767px) {
  .w-sm-190pc {
    width: 190% !important;
  }
}

.mw-190px {
  max-width: 190px !important;
}

.mw-195px {
  max-width: 195px !important;
}

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

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

.h-190px {
  height: 190px !important;
}

.h-195px {
  height: 195px !important;
}

@media (max-width: 767px) {
  .h-sm-190px {
    height: 190px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-195px {
    height: 195px !important;
  }
}

.h-190pc {
  height: 190% !important;
}

@media (max-width: 767px) {
  .h-sm-190pc {
    height: 190% !important;
  }
}

.mh-190px {
  max-height: 190px !important;
}

.mh-195px {
  max-height: 195px !important;
}

.min-h-190px {
  min-height: 190px !important;
}

.min-h-195px {
  min-height: 195px !important;
}

.w-200px {
  width: 200px !important;
}

.w-205px {
  width: 205px !important;
}

.w-200pc {
  width: 200% !important;
}

@media (max-width: 767px) {
  .w-sm-200pc {
    width: 200% !important;
  }
}

.mw-200px {
  max-width: 200px !important;
}

.mw-205px {
  max-width: 205px !important;
}

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

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

.h-200px {
  height: 200px !important;
}

.h-205px {
  height: 205px !important;
}

@media (max-width: 767px) {
  .h-sm-200px {
    height: 200px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-205px {
    height: 205px !important;
  }
}

.h-200pc {
  height: 200% !important;
}

@media (max-width: 767px) {
  .h-sm-200pc {
    height: 200% !important;
  }
}

.mh-200px {
  max-height: 200px !important;
}

.mh-205px {
  max-height: 205px !important;
}

.min-h-200px {
  min-height: 200px !important;
}

.min-h-205px {
  min-height: 205px !important;
}

.w-210px {
  width: 210px !important;
}

.w-215px {
  width: 215px !important;
}

.w-210pc {
  width: 210% !important;
}

@media (max-width: 767px) {
  .w-sm-210pc {
    width: 210% !important;
  }
}

.mw-210px {
  max-width: 210px !important;
}

.mw-215px {
  max-width: 215px !important;
}

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

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

.h-210px {
  height: 210px !important;
}

.h-215px {
  height: 215px !important;
}

@media (max-width: 767px) {
  .h-sm-210px {
    height: 210px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-215px {
    height: 215px !important;
  }
}

.h-210pc {
  height: 210% !important;
}

@media (max-width: 767px) {
  .h-sm-210pc {
    height: 210% !important;
  }
}

.mh-210px {
  max-height: 210px !important;
}

.mh-215px {
  max-height: 215px !important;
}

.min-h-210px {
  min-height: 210px !important;
}

.min-h-215px {
  min-height: 215px !important;
}

.w-220px {
  width: 220px !important;
}

.w-225px {
  width: 225px !important;
}

.w-220pc {
  width: 220% !important;
}

@media (max-width: 767px) {
  .w-sm-220pc {
    width: 220% !important;
  }
}

.mw-220px {
  max-width: 220px !important;
}

.mw-225px {
  max-width: 225px !important;
}

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

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

.h-220px {
  height: 220px !important;
}

.h-225px {
  height: 225px !important;
}

@media (max-width: 767px) {
  .h-sm-220px {
    height: 220px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-225px {
    height: 225px !important;
  }
}

.h-220pc {
  height: 220% !important;
}

@media (max-width: 767px) {
  .h-sm-220pc {
    height: 220% !important;
  }
}

.mh-220px {
  max-height: 220px !important;
}

.mh-225px {
  max-height: 225px !important;
}

.min-h-220px {
  min-height: 220px !important;
}

.min-h-225px {
  min-height: 225px !important;
}

.w-230px {
  width: 230px !important;
}

.w-235px {
  width: 235px !important;
}

.w-230pc {
  width: 230% !important;
}

@media (max-width: 767px) {
  .w-sm-230pc {
    width: 230% !important;
  }
}

.mw-230px {
  max-width: 230px !important;
}

.mw-235px {
  max-width: 235px !important;
}

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

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

.h-230px {
  height: 230px !important;
}

.h-235px {
  height: 235px !important;
}

@media (max-width: 767px) {
  .h-sm-230px {
    height: 230px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-235px {
    height: 235px !important;
  }
}

.h-230pc {
  height: 230% !important;
}

@media (max-width: 767px) {
  .h-sm-230pc {
    height: 230% !important;
  }
}

.mh-230px {
  max-height: 230px !important;
}

.mh-235px {
  max-height: 235px !important;
}

.min-h-230px {
  min-height: 230px !important;
}

.min-h-235px {
  min-height: 235px !important;
}

.w-240px {
  width: 240px !important;
}

.w-245px {
  width: 245px !important;
}

.w-240pc {
  width: 240% !important;
}

@media (max-width: 767px) {
  .w-sm-240pc {
    width: 240% !important;
  }
}

.mw-240px {
  max-width: 240px !important;
}

.mw-245px {
  max-width: 245px !important;
}

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

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

.h-240px {
  height: 240px !important;
}

.h-245px {
  height: 245px !important;
}

@media (max-width: 767px) {
  .h-sm-240px {
    height: 240px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-245px {
    height: 245px !important;
  }
}

.h-240pc {
  height: 240% !important;
}

@media (max-width: 767px) {
  .h-sm-240pc {
    height: 240% !important;
  }
}

.mh-240px {
  max-height: 240px !important;
}

.mh-245px {
  max-height: 245px !important;
}

.min-h-240px {
  min-height: 240px !important;
}

.min-h-245px {
  min-height: 245px !important;
}

.w-250px {
  width: 250px !important;
}

.w-255px {
  width: 255px !important;
}

.w-250pc {
  width: 250% !important;
}

@media (max-width: 767px) {
  .w-sm-250pc {
    width: 250% !important;
  }
}

.mw-250px {
  max-width: 250px !important;
}

.mw-255px {
  max-width: 255px !important;
}

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

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

.h-250px {
  height: 250px !important;
}

.h-255px {
  height: 255px !important;
}

@media (max-width: 767px) {
  .h-sm-250px {
    height: 250px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-255px {
    height: 255px !important;
  }
}

.h-250pc {
  height: 250% !important;
}

@media (max-width: 767px) {
  .h-sm-250pc {
    height: 250% !important;
  }
}

.mh-250px {
  max-height: 250px !important;
}

.mh-255px {
  max-height: 255px !important;
}

.min-h-250px {
  min-height: 250px !important;
}

.min-h-255px {
  min-height: 255px !important;
}

.w-260px {
  width: 260px !important;
}

.w-265px {
  width: 265px !important;
}

.w-260pc {
  width: 260% !important;
}

@media (max-width: 767px) {
  .w-sm-260pc {
    width: 260% !important;
  }
}

.mw-260px {
  max-width: 260px !important;
}

.mw-265px {
  max-width: 265px !important;
}

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

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

.h-260px {
  height: 260px !important;
}

.h-265px {
  height: 265px !important;
}

@media (max-width: 767px) {
  .h-sm-260px {
    height: 260px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-265px {
    height: 265px !important;
  }
}

.h-260pc {
  height: 260% !important;
}

@media (max-width: 767px) {
  .h-sm-260pc {
    height: 260% !important;
  }
}

.mh-260px {
  max-height: 260px !important;
}

.mh-265px {
  max-height: 265px !important;
}

.min-h-260px {
  min-height: 260px !important;
}

.min-h-265px {
  min-height: 265px !important;
}

.w-270px {
  width: 270px !important;
}

.w-275px {
  width: 275px !important;
}

.w-270pc {
  width: 270% !important;
}

@media (max-width: 767px) {
  .w-sm-270pc {
    width: 270% !important;
  }
}

.mw-270px {
  max-width: 270px !important;
}

.mw-275px {
  max-width: 275px !important;
}

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

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

.h-270px {
  height: 270px !important;
}

.h-275px {
  height: 275px !important;
}

@media (max-width: 767px) {
  .h-sm-270px {
    height: 270px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-275px {
    height: 275px !important;
  }
}

.h-270pc {
  height: 270% !important;
}

@media (max-width: 767px) {
  .h-sm-270pc {
    height: 270% !important;
  }
}

.mh-270px {
  max-height: 270px !important;
}

.mh-275px {
  max-height: 275px !important;
}

.min-h-270px {
  min-height: 270px !important;
}

.min-h-275px {
  min-height: 275px !important;
}

.w-280px {
  width: 280px !important;
}

.w-285px {
  width: 285px !important;
}

.w-280pc {
  width: 280% !important;
}

@media (max-width: 767px) {
  .w-sm-280pc {
    width: 280% !important;
  }
}

.mw-280px {
  max-width: 280px !important;
}

.mw-285px {
  max-width: 285px !important;
}

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

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

.h-280px {
  height: 280px !important;
}

.h-285px {
  height: 285px !important;
}

@media (max-width: 767px) {
  .h-sm-280px {
    height: 280px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-285px {
    height: 285px !important;
  }
}

.h-280pc {
  height: 280% !important;
}

@media (max-width: 767px) {
  .h-sm-280pc {
    height: 280% !important;
  }
}

.mh-280px {
  max-height: 280px !important;
}

.mh-285px {
  max-height: 285px !important;
}

.min-h-280px {
  min-height: 280px !important;
}

.min-h-285px {
  min-height: 285px !important;
}

.w-290px {
  width: 290px !important;
}

.w-295px {
  width: 295px !important;
}

.w-290pc {
  width: 290% !important;
}

@media (max-width: 767px) {
  .w-sm-290pc {
    width: 290% !important;
  }
}

.mw-290px {
  max-width: 290px !important;
}

.mw-295px {
  max-width: 295px !important;
}

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

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

.h-290px {
  height: 290px !important;
}

.h-295px {
  height: 295px !important;
}

@media (max-width: 767px) {
  .h-sm-290px {
    height: 290px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-295px {
    height: 295px !important;
  }
}

.h-290pc {
  height: 290% !important;
}

@media (max-width: 767px) {
  .h-sm-290pc {
    height: 290% !important;
  }
}

.mh-290px {
  max-height: 290px !important;
}

.mh-295px {
  max-height: 295px !important;
}

.min-h-290px {
  min-height: 290px !important;
}

.min-h-295px {
  min-height: 295px !important;
}

.w-300px {
  width: 300px !important;
}

.w-305px {
  width: 305px !important;
}

.w-300pc {
  width: 300% !important;
}

@media (max-width: 767px) {
  .w-sm-300pc {
    width: 300% !important;
  }
}

.mw-300px {
  max-width: 300px !important;
}

.mw-305px {
  max-width: 305px !important;
}

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

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

.h-300px {
  height: 300px !important;
}

.h-305px {
  height: 305px !important;
}

@media (max-width: 767px) {
  .h-sm-300px {
    height: 300px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-305px {
    height: 305px !important;
  }
}

.h-300pc {
  height: 300% !important;
}

@media (max-width: 767px) {
  .h-sm-300pc {
    height: 300% !important;
  }
}

.mh-300px {
  max-height: 300px !important;
}

.mh-305px {
  max-height: 305px !important;
}

.min-h-300px {
  min-height: 300px !important;
}

.min-h-305px {
  min-height: 305px !important;
}

.w-310px {
  width: 310px !important;
}

.w-315px {
  width: 315px !important;
}

.w-310pc {
  width: 310% !important;
}

@media (max-width: 767px) {
  .w-sm-310pc {
    width: 310% !important;
  }
}

.mw-310px {
  max-width: 310px !important;
}

.mw-315px {
  max-width: 315px !important;
}

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

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

.h-310px {
  height: 310px !important;
}

.h-315px {
  height: 315px !important;
}

@media (max-width: 767px) {
  .h-sm-310px {
    height: 310px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-315px {
    height: 315px !important;
  }
}

.h-310pc {
  height: 310% !important;
}

@media (max-width: 767px) {
  .h-sm-310pc {
    height: 310% !important;
  }
}

.mh-310px {
  max-height: 310px !important;
}

.mh-315px {
  max-height: 315px !important;
}

.min-h-310px {
  min-height: 310px !important;
}

.min-h-315px {
  min-height: 315px !important;
}

.w-320px {
  width: 320px !important;
}

.w-325px {
  width: 325px !important;
}

.w-320pc {
  width: 320% !important;
}

@media (max-width: 767px) {
  .w-sm-320pc {
    width: 320% !important;
  }
}

.mw-320px {
  max-width: 320px !important;
}

.mw-325px {
  max-width: 325px !important;
}

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

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

.h-320px {
  height: 320px !important;
}

.h-325px {
  height: 325px !important;
}

@media (max-width: 767px) {
  .h-sm-320px {
    height: 320px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-325px {
    height: 325px !important;
  }
}

.h-320pc {
  height: 320% !important;
}

@media (max-width: 767px) {
  .h-sm-320pc {
    height: 320% !important;
  }
}

.mh-320px {
  max-height: 320px !important;
}

.mh-325px {
  max-height: 325px !important;
}

.min-h-320px {
  min-height: 320px !important;
}

.min-h-325px {
  min-height: 325px !important;
}

.w-330px {
  width: 330px !important;
}

.w-335px {
  width: 335px !important;
}

.w-330pc {
  width: 330% !important;
}

@media (max-width: 767px) {
  .w-sm-330pc {
    width: 330% !important;
  }
}

.mw-330px {
  max-width: 330px !important;
}

.mw-335px {
  max-width: 335px !important;
}

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

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

.h-330px {
  height: 330px !important;
}

.h-335px {
  height: 335px !important;
}

@media (max-width: 767px) {
  .h-sm-330px {
    height: 330px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-335px {
    height: 335px !important;
  }
}

.h-330pc {
  height: 330% !important;
}

@media (max-width: 767px) {
  .h-sm-330pc {
    height: 330% !important;
  }
}

.mh-330px {
  max-height: 330px !important;
}

.mh-335px {
  max-height: 335px !important;
}

.min-h-330px {
  min-height: 330px !important;
}

.min-h-335px {
  min-height: 335px !important;
}

.w-340px {
  width: 340px !important;
}

.w-345px {
  width: 345px !important;
}

.w-340pc {
  width: 340% !important;
}

@media (max-width: 767px) {
  .w-sm-340pc {
    width: 340% !important;
  }
}

.mw-340px {
  max-width: 340px !important;
}

.mw-345px {
  max-width: 345px !important;
}

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

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

.h-340px {
  height: 340px !important;
}

.h-345px {
  height: 345px !important;
}

@media (max-width: 767px) {
  .h-sm-340px {
    height: 340px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-345px {
    height: 345px !important;
  }
}

.h-340pc {
  height: 340% !important;
}

@media (max-width: 767px) {
  .h-sm-340pc {
    height: 340% !important;
  }
}

.mh-340px {
  max-height: 340px !important;
}

.mh-345px {
  max-height: 345px !important;
}

.min-h-340px {
  min-height: 340px !important;
}

.min-h-345px {
  min-height: 345px !important;
}

.w-350px {
  width: 350px !important;
}

.w-355px {
  width: 355px !important;
}

.w-350pc {
  width: 350% !important;
}

@media (max-width: 767px) {
  .w-sm-350pc {
    width: 350% !important;
  }
}

.mw-350px {
  max-width: 350px !important;
}

.mw-355px {
  max-width: 355px !important;
}

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

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

.h-350px {
  height: 350px !important;
}

.h-355px {
  height: 355px !important;
}

@media (max-width: 767px) {
  .h-sm-350px {
    height: 350px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-355px {
    height: 355px !important;
  }
}

.h-350pc {
  height: 350% !important;
}

@media (max-width: 767px) {
  .h-sm-350pc {
    height: 350% !important;
  }
}

.mh-350px {
  max-height: 350px !important;
}

.mh-355px {
  max-height: 355px !important;
}

.min-h-350px {
  min-height: 350px !important;
}

.min-h-355px {
  min-height: 355px !important;
}

.w-360px {
  width: 360px !important;
}

.w-365px {
  width: 365px !important;
}

.w-360pc {
  width: 360% !important;
}

@media (max-width: 767px) {
  .w-sm-360pc {
    width: 360% !important;
  }
}

.mw-360px {
  max-width: 360px !important;
}

.mw-365px {
  max-width: 365px !important;
}

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

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

.h-360px {
  height: 360px !important;
}

.h-365px {
  height: 365px !important;
}

@media (max-width: 767px) {
  .h-sm-360px {
    height: 360px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-365px {
    height: 365px !important;
  }
}

.h-360pc {
  height: 360% !important;
}

@media (max-width: 767px) {
  .h-sm-360pc {
    height: 360% !important;
  }
}

.mh-360px {
  max-height: 360px !important;
}

.mh-365px {
  max-height: 365px !important;
}

.min-h-360px {
  min-height: 360px !important;
}

.min-h-365px {
  min-height: 365px !important;
}

.w-370px {
  width: 370px !important;
}

.w-375px {
  width: 375px !important;
}

.w-370pc {
  width: 370% !important;
}

@media (max-width: 767px) {
  .w-sm-370pc {
    width: 370% !important;
  }
}

.mw-370px {
  max-width: 370px !important;
}

.mw-375px {
  max-width: 375px !important;
}

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

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

.h-370px {
  height: 370px !important;
}

.h-375px {
  height: 375px !important;
}

@media (max-width: 767px) {
  .h-sm-370px {
    height: 370px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-375px {
    height: 375px !important;
  }
}

.h-370pc {
  height: 370% !important;
}

@media (max-width: 767px) {
  .h-sm-370pc {
    height: 370% !important;
  }
}

.mh-370px {
  max-height: 370px !important;
}

.mh-375px {
  max-height: 375px !important;
}

.min-h-370px {
  min-height: 370px !important;
}

.min-h-375px {
  min-height: 375px !important;
}

.w-380px {
  width: 380px !important;
}

.w-385px {
  width: 385px !important;
}

.w-380pc {
  width: 380% !important;
}

@media (max-width: 767px) {
  .w-sm-380pc {
    width: 380% !important;
  }
}

.mw-380px {
  max-width: 380px !important;
}

.mw-385px {
  max-width: 385px !important;
}

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

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

.h-380px {
  height: 380px !important;
}

.h-385px {
  height: 385px !important;
}

@media (max-width: 767px) {
  .h-sm-380px {
    height: 380px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-385px {
    height: 385px !important;
  }
}

.h-380pc {
  height: 380% !important;
}

@media (max-width: 767px) {
  .h-sm-380pc {
    height: 380% !important;
  }
}

.mh-380px {
  max-height: 380px !important;
}

.mh-385px {
  max-height: 385px !important;
}

.min-h-380px {
  min-height: 380px !important;
}

.min-h-385px {
  min-height: 385px !important;
}

.w-390px {
  width: 390px !important;
}

.w-395px {
  width: 395px !important;
}

.w-390pc {
  width: 390% !important;
}

@media (max-width: 767px) {
  .w-sm-390pc {
    width: 390% !important;
  }
}

.mw-390px {
  max-width: 390px !important;
}

.mw-395px {
  max-width: 395px !important;
}

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

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

.h-390px {
  height: 390px !important;
}

.h-395px {
  height: 395px !important;
}

@media (max-width: 767px) {
  .h-sm-390px {
    height: 390px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-395px {
    height: 395px !important;
  }
}

.h-390pc {
  height: 390% !important;
}

@media (max-width: 767px) {
  .h-sm-390pc {
    height: 390% !important;
  }
}

.mh-390px {
  max-height: 390px !important;
}

.mh-395px {
  max-height: 395px !important;
}

.min-h-390px {
  min-height: 390px !important;
}

.min-h-395px {
  min-height: 395px !important;
}

.w-400px {
  width: 400px !important;
}

.w-405px {
  width: 405px !important;
}

.w-400pc {
  width: 400% !important;
}

@media (max-width: 767px) {
  .w-sm-400pc {
    width: 400% !important;
  }
}

.mw-400px {
  max-width: 400px !important;
}

.mw-405px {
  max-width: 405px !important;
}

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

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

.h-400px {
  height: 400px !important;
}

.h-405px {
  height: 405px !important;
}

@media (max-width: 767px) {
  .h-sm-400px {
    height: 400px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-405px {
    height: 405px !important;
  }
}

.h-400pc {
  height: 400% !important;
}

@media (max-width: 767px) {
  .h-sm-400pc {
    height: 400% !important;
  }
}

.mh-400px {
  max-height: 400px !important;
}

.mh-405px {
  max-height: 405px !important;
}

.min-h-400px {
  min-height: 400px !important;
}

.min-h-405px {
  min-height: 405px !important;
}

.w-410px {
  width: 410px !important;
}

.w-415px {
  width: 415px !important;
}

.w-410pc {
  width: 410% !important;
}

@media (max-width: 767px) {
  .w-sm-410pc {
    width: 410% !important;
  }
}

.mw-410px {
  max-width: 410px !important;
}

.mw-415px {
  max-width: 415px !important;
}

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

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

.h-410px {
  height: 410px !important;
}

.h-415px {
  height: 415px !important;
}

@media (max-width: 767px) {
  .h-sm-410px {
    height: 410px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-415px {
    height: 415px !important;
  }
}

.h-410pc {
  height: 410% !important;
}

@media (max-width: 767px) {
  .h-sm-410pc {
    height: 410% !important;
  }
}

.mh-410px {
  max-height: 410px !important;
}

.mh-415px {
  max-height: 415px !important;
}

.min-h-410px {
  min-height: 410px !important;
}

.min-h-415px {
  min-height: 415px !important;
}

.w-420px {
  width: 420px !important;
}

.w-425px {
  width: 425px !important;
}

.w-420pc {
  width: 420% !important;
}

@media (max-width: 767px) {
  .w-sm-420pc {
    width: 420% !important;
  }
}

.mw-420px {
  max-width: 420px !important;
}

.mw-425px {
  max-width: 425px !important;
}

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

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

.h-420px {
  height: 420px !important;
}

.h-425px {
  height: 425px !important;
}

@media (max-width: 767px) {
  .h-sm-420px {
    height: 420px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-425px {
    height: 425px !important;
  }
}

.h-420pc {
  height: 420% !important;
}

@media (max-width: 767px) {
  .h-sm-420pc {
    height: 420% !important;
  }
}

.mh-420px {
  max-height: 420px !important;
}

.mh-425px {
  max-height: 425px !important;
}

.min-h-420px {
  min-height: 420px !important;
}

.min-h-425px {
  min-height: 425px !important;
}

.w-430px {
  width: 430px !important;
}

.w-435px {
  width: 435px !important;
}

.w-430pc {
  width: 430% !important;
}

@media (max-width: 767px) {
  .w-sm-430pc {
    width: 430% !important;
  }
}

.mw-430px {
  max-width: 430px !important;
}

.mw-435px {
  max-width: 435px !important;
}

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

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

.h-430px {
  height: 430px !important;
}

.h-435px {
  height: 435px !important;
}

@media (max-width: 767px) {
  .h-sm-430px {
    height: 430px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-435px {
    height: 435px !important;
  }
}

.h-430pc {
  height: 430% !important;
}

@media (max-width: 767px) {
  .h-sm-430pc {
    height: 430% !important;
  }
}

.mh-430px {
  max-height: 430px !important;
}

.mh-435px {
  max-height: 435px !important;
}

.min-h-430px {
  min-height: 430px !important;
}

.min-h-435px {
  min-height: 435px !important;
}

.w-440px {
  width: 440px !important;
}

.w-445px {
  width: 445px !important;
}

.w-440pc {
  width: 440% !important;
}

@media (max-width: 767px) {
  .w-sm-440pc {
    width: 440% !important;
  }
}

.mw-440px {
  max-width: 440px !important;
}

.mw-445px {
  max-width: 445px !important;
}

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

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

.h-440px {
  height: 440px !important;
}

.h-445px {
  height: 445px !important;
}

@media (max-width: 767px) {
  .h-sm-440px {
    height: 440px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-445px {
    height: 445px !important;
  }
}

.h-440pc {
  height: 440% !important;
}

@media (max-width: 767px) {
  .h-sm-440pc {
    height: 440% !important;
  }
}

.mh-440px {
  max-height: 440px !important;
}

.mh-445px {
  max-height: 445px !important;
}

.min-h-440px {
  min-height: 440px !important;
}

.min-h-445px {
  min-height: 445px !important;
}

.w-450px {
  width: 450px !important;
}

.w-455px {
  width: 455px !important;
}

.w-450pc {
  width: 450% !important;
}

@media (max-width: 767px) {
  .w-sm-450pc {
    width: 450% !important;
  }
}

.mw-450px {
  max-width: 450px !important;
}

.mw-455px {
  max-width: 455px !important;
}

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

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

.h-450px {
  height: 450px !important;
}

.h-455px {
  height: 455px !important;
}

@media (max-width: 767px) {
  .h-sm-450px {
    height: 450px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-455px {
    height: 455px !important;
  }
}

.h-450pc {
  height: 450% !important;
}

@media (max-width: 767px) {
  .h-sm-450pc {
    height: 450% !important;
  }
}

.mh-450px {
  max-height: 450px !important;
}

.mh-455px {
  max-height: 455px !important;
}

.min-h-450px {
  min-height: 450px !important;
}

.min-h-455px {
  min-height: 455px !important;
}

.w-460px {
  width: 460px !important;
}

.w-465px {
  width: 465px !important;
}

.w-460pc {
  width: 460% !important;
}

@media (max-width: 767px) {
  .w-sm-460pc {
    width: 460% !important;
  }
}

.mw-460px {
  max-width: 460px !important;
}

.mw-465px {
  max-width: 465px !important;
}

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

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

.h-460px {
  height: 460px !important;
}

.h-465px {
  height: 465px !important;
}

@media (max-width: 767px) {
  .h-sm-460px {
    height: 460px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-465px {
    height: 465px !important;
  }
}

.h-460pc {
  height: 460% !important;
}

@media (max-width: 767px) {
  .h-sm-460pc {
    height: 460% !important;
  }
}

.mh-460px {
  max-height: 460px !important;
}

.mh-465px {
  max-height: 465px !important;
}

.min-h-460px {
  min-height: 460px !important;
}

.min-h-465px {
  min-height: 465px !important;
}

.w-470px {
  width: 470px !important;
}

.w-475px {
  width: 475px !important;
}

.w-470pc {
  width: 470% !important;
}

@media (max-width: 767px) {
  .w-sm-470pc {
    width: 470% !important;
  }
}

.mw-470px {
  max-width: 470px !important;
}

.mw-475px {
  max-width: 475px !important;
}

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

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

.h-470px {
  height: 470px !important;
}

.h-475px {
  height: 475px !important;
}

@media (max-width: 767px) {
  .h-sm-470px {
    height: 470px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-475px {
    height: 475px !important;
  }
}

.h-470pc {
  height: 470% !important;
}

@media (max-width: 767px) {
  .h-sm-470pc {
    height: 470% !important;
  }
}

.mh-470px {
  max-height: 470px !important;
}

.mh-475px {
  max-height: 475px !important;
}

.min-h-470px {
  min-height: 470px !important;
}

.min-h-475px {
  min-height: 475px !important;
}

.w-480px {
  width: 480px !important;
}

.w-485px {
  width: 485px !important;
}

.w-480pc {
  width: 480% !important;
}

@media (max-width: 767px) {
  .w-sm-480pc {
    width: 480% !important;
  }
}

.mw-480px {
  max-width: 480px !important;
}

.mw-485px {
  max-width: 485px !important;
}

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

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

.h-480px {
  height: 480px !important;
}

.h-485px {
  height: 485px !important;
}

@media (max-width: 767px) {
  .h-sm-480px {
    height: 480px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-485px {
    height: 485px !important;
  }
}

.h-480pc {
  height: 480% !important;
}

@media (max-width: 767px) {
  .h-sm-480pc {
    height: 480% !important;
  }
}

.mh-480px {
  max-height: 480px !important;
}

.mh-485px {
  max-height: 485px !important;
}

.min-h-480px {
  min-height: 480px !important;
}

.min-h-485px {
  min-height: 485px !important;
}

.w-490px {
  width: 490px !important;
}

.w-495px {
  width: 495px !important;
}

.w-490pc {
  width: 490% !important;
}

@media (max-width: 767px) {
  .w-sm-490pc {
    width: 490% !important;
  }
}

.mw-490px {
  max-width: 490px !important;
}

.mw-495px {
  max-width: 495px !important;
}

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

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

.h-490px {
  height: 490px !important;
}

.h-495px {
  height: 495px !important;
}

@media (max-width: 767px) {
  .h-sm-490px {
    height: 490px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-495px {
    height: 495px !important;
  }
}

.h-490pc {
  height: 490% !important;
}

@media (max-width: 767px) {
  .h-sm-490pc {
    height: 490% !important;
  }
}

.mh-490px {
  max-height: 490px !important;
}

.mh-495px {
  max-height: 495px !important;
}

.min-h-490px {
  min-height: 490px !important;
}

.min-h-495px {
  min-height: 495px !important;
}

.w-500px {
  width: 500px !important;
}

.w-505px {
  width: 505px !important;
}

.w-500pc {
  width: 500% !important;
}

@media (max-width: 767px) {
  .w-sm-500pc {
    width: 500% !important;
  }
}

.mw-500px {
  max-width: 500px !important;
}

.mw-505px {
  max-width: 505px !important;
}

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

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

.h-500px {
  height: 500px !important;
}

.h-505px {
  height: 505px !important;
}

@media (max-width: 767px) {
  .h-sm-500px {
    height: 500px !important;
  }
}

@media (max-width: 767px) {
  .h-sm-505px {
    height: 505px !important;
  }
}

.h-500pc {
  height: 500% !important;
}

@media (max-width: 767px) {
  .h-sm-500pc {
    height: 500% !important;
  }
}

.mh-500px {
  max-height: 500px !important;
}

.mh-505px {
  max-height: 505px !important;
}

.min-h-500px {
  min-height: 500px !important;
}

.min-h-505px {
  min-height: 505px !important;
}

/* -------- Components -------- */
.main-heading {
  margin: 0 auto;
  margin-top: 0.3125rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  text-align: center;
  text-transform: capitalize;
  width: fit-content;
  border-bottom: 2px solid var(--sidebar-bg);
}
@media (max-width: 767px) {
  .main-heading {
    padding-top: 1.5625rem;
  }
}
@media (min-width: 768px) {
  .main-heading {
    padding-left: calc(var(--global_search_width) + 3.75rem);
  }
}

#iraq_body .main-heading {
  padding: 0.625rem 0;
  font-size: 1.5625rem;
  font-weight: 700;
  text-align: center;
  text-transform: capitalize;
  background-color: #abc6fd;
  margin: 0;
  width: auto;
  border: none;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-center {
  display: grid;
  place-items: center;
}

.main-sec-p {
  padding: 1.875rem 0;
}

.my-btn {
  cursor: pointer;
  padding: 0.9375rem 1.875rem;
  border-radius: 0 !important;
  transition: 0.4s ease;
}

.main-clr {
  color: var(--main-clr);
}

.bg-main-clr {
  background-color: var(--main-clr) !important;
}
.bg-main-clr.transition {
  transition: 0.4s ease;
}
.bg-main-clr.transition:hover {
  background-color: var(--main-clr-hover) !important;
}

.text-main-clr {
  color: #fc6527 !important;
}

.btn-main-clr {
  cursor: pointer;
  padding: 0.9375rem 1.875rem;
  text-align: center;
  border-radius: 0.3125rem;
  background-color: var(--main-clr) !important;
  transition: 0.4s ease;
}
.btn-main-clr:hover {
  background-color: var(--main-clr-hover) !important;
}

.border-main-clr {
  border: solid 0.0625rem "main-clr";
}

.secondary-clr {
  color: var(--secondary-clr);
}

.bg-secondary-clr {
  background-color: var(--secondary-clr) !important;
}
.bg-secondary-clr.transition {
  transition: 0.4s ease;
}
.bg-secondary-clr.transition:hover {
  background-color: var(--secondary-clr-hover) !important;
}

.text-secondary-clr {
  color: #df3a60 !important;
}

.btn-secondary-clr {
  cursor: pointer;
  padding: 0.9375rem 1.875rem;
  text-align: center;
  border-radius: 0.3125rem;
  background-color: var(--secondary-clr) !important;
  transition: 0.4s ease;
}
.btn-secondary-clr:hover {
  background-color: var(--secondary-clr-hover) !important;
}

.border-secondary-clr {
  border: solid 0.0625rem "secondary-clr";
}

.soft-yellow-clr {
  color: var(--soft-yellow-clr);
}

.bg-soft-yellow-clr {
  background-color: var(--soft-yellow-clr) !important;
}
.bg-soft-yellow-clr.transition {
  transition: 0.4s ease;
}
.bg-soft-yellow-clr.transition:hover {
  background-color: var(--soft-yellow-clr-hover) !important;
}

.text-soft-yellow-clr {
  color: #ffff4d !important;
}

.btn-soft-yellow-clr {
  cursor: pointer;
  padding: 0.9375rem 1.875rem;
  text-align: center;
  border-radius: 0.3125rem;
  background-color: var(--soft-yellow-clr) !important;
  transition: 0.4s ease;
}
.btn-soft-yellow-clr:hover {
  background-color: var(--soft-yellow-clr-hover) !important;
}

.border-soft-yellow-clr {
  border: solid 0.0625rem "soft-yellow-clr";
}

.soft-green-sky-clr {
  color: var(--soft-green-sky-clr);
}

.bg-soft-green-sky-clr {
  background-color: var(--soft-green-sky-clr) !important;
}
.bg-soft-green-sky-clr.transition {
  transition: 0.4s ease;
}
.bg-soft-green-sky-clr.transition:hover {
  background-color: var(--soft-green-sky-clr-hover) !important;
}

.text-soft-green-sky-clr {
  color: #80ffd4 !important;
}

.btn-soft-green-sky-clr {
  cursor: pointer;
  padding: 0.9375rem 1.875rem;
  text-align: center;
  border-radius: 0.3125rem;
  background-color: var(--soft-green-sky-clr) !important;
  transition: 0.4s ease;
}
.btn-soft-green-sky-clr:hover {
  background-color: var(--soft-green-sky-clr-hover) !important;
}

.border-soft-green-sky-clr {
  border: solid 0.0625rem "soft-green-sky-clr";
}

.skin-clr {
  color: var(--skin-clr);
}

.bg-skin-clr {
  background-color: var(--skin-clr) !important;
}
.bg-skin-clr.transition {
  transition: 0.4s ease;
}
.bg-skin-clr.transition:hover {
  background-color: var(--skin-clr-hover) !important;
}

.text-skin-clr {
  color: #edd392 !important;
}

.btn-skin-clr {
  cursor: pointer;
  padding: 0.9375rem 1.875rem;
  text-align: center;
  border-radius: 0.3125rem;
  background-color: var(--skin-clr) !important;
  transition: 0.4s ease;
}
.btn-skin-clr:hover {
  background-color: var(--skin-clr-hover) !important;
}

.border-skin-clr {
  border: solid 0.0625rem "skin-clr";
}

.dark-yellow {
  color: var(--dark-yellow);
}

.bg-dark-yellow {
  background-color: var(--dark-yellow) !important;
}
.bg-dark-yellow.transition {
  transition: 0.4s ease;
}
.bg-dark-yellow.transition:hover {
  background-color: var(--dark-yellow-hover) !important;
}

.text-dark-yellow {
  color: #FBB707 !important;
}

.btn-dark-yellow {
  cursor: pointer;
  padding: 0.9375rem 1.875rem;
  text-align: center;
  border-radius: 0.3125rem;
  background-color: var(--dark-yellow) !important;
  transition: 0.4s ease;
}
.btn-dark-yellow:hover {
  background-color: var(--dark-yellow-hover) !important;
}

.border-dark-yellow {
  border: solid 0.0625rem "dark-yellow";
}

.soft-gray {
  color: var(--soft-gray);
}

.bg-soft-gray {
  background-color: var(--soft-gray) !important;
}
.bg-soft-gray.transition {
  transition: 0.4s ease;
}
.bg-soft-gray.transition:hover {
  background-color: var(--soft-gray-hover) !important;
}

.text-soft-gray {
  color: #c8c8c8 !important;
}

.btn-soft-gray {
  cursor: pointer;
  padding: 0.9375rem 1.875rem;
  text-align: center;
  border-radius: 0.3125rem;
  background-color: var(--soft-gray) !important;
  transition: 0.4s ease;
}
.btn-soft-gray:hover {
  background-color: var(--soft-gray-hover) !important;
}

.border-soft-gray {
  border: solid 0.0625rem "soft-gray";
}

.danger-clr {
  color: var(--danger-clr);
}

.bg-danger-clr {
  background-color: var(--danger-clr) !important;
}
.bg-danger-clr.transition {
  transition: 0.4s ease;
}
.bg-danger-clr.transition:hover {
  background-color: var(--danger-clr-hover) !important;
}

.text-danger-clr {
  color: tomato !important;
}

.btn-danger-clr {
  cursor: pointer;
  padding: 0.9375rem 1.875rem;
  text-align: center;
  border-radius: 0.3125rem;
  background-color: var(--danger-clr) !important;
  transition: 0.4s ease;
}
.btn-danger-clr:hover {
  background-color: var(--danger-clr-hover) !important;
}

.border-danger-clr {
  border: solid 0.0625rem "danger-clr";
}

.soft-danger-clr {
  color: var(--soft-danger-clr);
}

.bg-soft-danger-clr {
  background-color: var(--soft-danger-clr) !important;
}
.bg-soft-danger-clr.transition {
  transition: 0.4s ease;
}
.bg-soft-danger-clr.transition:hover {
  background-color: var(--soft-danger-clr-hover) !important;
}

.text-soft-danger-clr {
  color: hsl(9deg, 50%, 64%) !important;
}

.btn-soft-danger-clr {
  cursor: pointer;
  padding: 0.9375rem 1.875rem;
  text-align: center;
  border-radius: 0.3125rem;
  background-color: var(--soft-danger-clr) !important;
  transition: 0.4s ease;
}
.btn-soft-danger-clr:hover {
  background-color: var(--soft-danger-clr-hover) !important;
}

.border-soft-danger-clr {
  border: solid 0.0625rem "soft-danger-clr";
}

.open-green-clr {
  color: var(--open-green-clr);
}

.bg-open-green-clr {
  background-color: var(--open-green-clr) !important;
}
.bg-open-green-clr.transition {
  transition: 0.4s ease;
}
.bg-open-green-clr.transition:hover {
  background-color: var(--open-green-clr-hover) !important;
}

.text-open-green-clr {
  color: #cfffcf !important;
}

.btn-open-green-clr {
  cursor: pointer;
  padding: 0.9375rem 1.875rem;
  text-align: center;
  border-radius: 0.3125rem;
  background-color: var(--open-green-clr) !important;
  transition: 0.4s ease;
}
.btn-open-green-clr:hover {
  background-color: var(--open-green-clr-hover) !important;
}

.border-open-green-clr {
  border: solid 0.0625rem "open-green-clr";
}

.divider {
  width: max-content;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  border-left: 1px solid black;
}

.shine {
  position: relative;
  overflow: hidden;
  opacity: 0.85;
  transition: 0.5s ease;
}
.shine:hover {
  opacity: 1;
}
.shine::before {
  content: "";
  position: absolute;
  left: -120%;
  top: -70%;
  height: 250%;
  width: 50px;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  transform: rotate(45deg);
}
.shine:hover:before {
  transition: 0.7s ease;
  left: 150%;
}

.off-disable {
  pointer-events: none;
  filter: blur(0.125rem);
  opacity: 0.3;
}

/********************** Global Style *************/
body {
  transition: 0.5s ease;
  min-height: 100vh;
  background-color: var(--body-bg);
  padding-left: var(--sidebar-width);
}
body#china_body {
  transition: none;
  background-color: #fff;
  color: #234257;
}
body#iraq_body {
  background-color: #e0e0e0;
}
@media (max-width: 767px) {
  body {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}
table thead {
  text-transform: capitalize;
}

hr {
  border-color: black;
}
hr.dashed {
  border-style: dashed;
  margin: 0.3125rem 0;
}

label {
  text-transform: capitalize;
}

select,
textarea,
input {
  caret-color: var(--secondary-clr);
  transition: 0.5s ease;
}

input::placeholder {
  text-transform: capitalize;
}

::selection {
  background-color: var(--main-clr);
}

/* width */
::-webkit-scrollbar {
  width: 0.78125rem;
}

/* Track */
::-webkit-scrollbar-track {
  background: #eee;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(252, 101, 39, 0.5);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--main-clr);
}

input[type=date] {
  outline: 0;
  position: relative;
  width: 100%;
  display: block;
}
input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

select.form-select,
input.form-control {
  padding: 0.375rem 0.75rem !important;
}

.form-control:focus,
textarea:focus,
select:focus,
input:focus {
  color: #212529;
  background-color: #fff;
  border-color: var(--main-clr);
  box-shadow: 0 0 0 0.0625rem var(--main-clr);
  outline: 0;
}

.uk-modal-dialog .uk-button-primary {
  background-color: var(--main-clr);
  transition: 0.5s ease;
}
.uk-modal-dialog .uk-button-primary:hover {
  background-color: var(--main-clr-hover);
}

.uk-notification-message {
  min-width: 21.875rem;
}
@media (max-width: 767px) {
  .uk-notification-message {
    min-width: 12.5rem;
    width: 100%;
  }
}

.uk-modal.uk-open {
  z-index: 123456789 !important;
}
.uk-modal.uk-open .uk-modal-body {
  text-transform: capitalize;
}

.show-pwd {
  position: relative;
}
.show-pwd input {
  padding-left: 2rem;
}
.show-pwd-icon {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  height: 100%;
  width: fit-content;
  padding: 0.5rem;
  cursor: pointer;
}

#ui-datepicker-div {
  z-index: 1000 !important;
}

.content {
  transition: 0.5s ease;
}

.tooltip {
  position: absolute;
  z-index: 10000;
  transform: translateY(-50%);
  padding: 0.4em 1em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  background-color: black;
  color: white;
  text-transform: capitalize;
  border-radius: 0.3125rem;
  transition: opacity 0.3s ease;
}
.tooltip.shadow {
  box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.2) !important;
}
@media (max-width: 767px) {
  .tooltip {
    display: none;
  }
}

[type=radio] {
  opacity: 0;
  height: 1.375rem;
  width: 1.375rem;
  vertical-align: text-bottom;
  display: inline-block;
  pointer-events: none;
}

[type=radio]:checked ~ .radioToCheckBox,
.form-check-input:checked ~ .radioToCheckBox {
  background-color: var(--main-clr);
  border-color: var(--main-clr);
  color: #fff;
  box-shadow: 0 0 0 0.125rem #febfa5;
}

.radioToCheckBox {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  height: 1.375rem;
  width: 1.375rem;
  font-size: 0.875rem;
  border: solid 0.0625rem var(--soft-gray);
  color: transparent;
  background-color: white;
  cursor: pointer;
  transition: 0.3s ease;
}

@media (min-width: 768px) {
  .radioToCheckBox ~ label {
    white-space: nowrap;
  }
}

.form-check-input:checked,
[type=checkbox]:checked {
  background-color: var(--main-clr) !important;
  border-color: var(--main-clr) !important;
}

[type=checkbox]:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(252, 101, 39, 0.5);
  border-color: var(--main-clr);
}

.pagination-btns {
  cursor: auto;
}

button:focus {
  border: 1px solid transparent;
}

.count-phone-number {
  position: relative;
}
.count-phone-number span {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  height: 100%;
  width: fit-content;
  padding: 0.5rem;
  color: red;
}

.pagination_ajax {
  margin: 1rem 0;
}
.pagination_ajax .numbers,
.pagination_ajax .btns {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin: 0.5rem 0;
}
.pagination_ajax #pagination_next,
.pagination_ajax #pagination_previous {
  padding: 0.3125rem 0.625rem;
  color: #fff;
  background-color: #000;
  cursor: pointer;
  transition: 0.3s ease;
}
.pagination_ajax #pagination_next:hover,
.pagination_ajax #pagination_previous:hover {
  background-color: var(--main-clr);
}
.pagination_ajax .numbers .page_number,
.pagination_ajax .numbers .pages {
  background-color: #000;
  color: #fff;
  padding: 0.3125rem 0.625rem;
}
.pagination_ajax .numbers .page_number {
  background-color: var(--secondary-clr);
}

.ajax-loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;
  width: 100%;
  height: 3.125rem;
  background-color: black;
}
.ajax-loader_icon {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  margin: 0.9375rem auto;
  position: relative;
  color: #fff;
  animation: animateLoader 1s linear infinite alternate;
}

#iraq_body,
#china_body {
  padding-top: 3.125rem !important;
}
#iraq_body .ajax-loader,
#china_body .ajax-loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  pointer-events: none;
  width: 100%;
  height: 3.125rem;
  background-color: black;
}
#iraq_body .ajax-loader_icon,
#china_body .ajax-loader_icon {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  margin: 0.9375rem auto;
  position: relative;
  color: #fff;
  animation: animateLoader 1s linear infinite alternate;
}

@media (max-width: 991px) {
  #china_body .container {
    width: 75rem !important;
    max-width: 75rem !important;
  }
}

.scroll-x-tooltip {
  position: fixed;
  top: 15vh;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  font-size: 2.5rem;
}
.scroll-x-tooltip span {
  display: none;
}
@media (max-width: 767px) {
  .scroll-x-tooltip span {
    display: block;
  }
}
.scroll-x-tooltip span:first-child {
  animation: go-opacity-zero-x-right infinite 1s ease;
}
.scroll-x-tooltip span:last-child {
  animation: go-opacity-zero-x-left infinite 1s ease;
}

.input-holder {
  position: relative;
  overflow: hidden;
}
.input-holder input:focus ~ span.show-placeholder {
  display: none;
}
.input-holder .show-placeholder {
  display: none;
}
@media (max-width: 767px) {
  .input-holder .show-placeholder {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 10;
    display: flex;
    width: max-content;
    pointer-events: none;
    transform: translate(100%, -50%);
    animation: show-news 7s linear infinite;
    color: #333;
  }
  .input-holder input::placeholder {
    opacity: 0;
  }
}
.input-holder *:not(.show-placeholder, input) {
  position: relative;
  z-index: 11;
}

/********************** Classes *************/
/* Make A Tooltip By Using tooltip Attribute */
[tooltip] {
  --arrow-width: 7px;
  --tooltip-clr: #000;
  --tooltip-txt-clr: #fff;
  --distance: 1px;
  position: relative;
}

[tooltip][tt-light] {
  --tooltip-clr: #fff;
  --tooltip-txt-clr: #000;
}

[tooltip]::before,
[tooltip]::after {
  position: absolute;
  z-index: 1000;
  transition: 0.15s ease;
  pointer-events: none;
  text-transform: capitalize;
  opacity: 0;
  scale: 0.2;
}
@media (max-width: 767px) {
  [tooltip]::before,
[tooltip]::after {
    display: none;
  }
}

[tooltip]::after {
  content: attr(tt-text);
  width: max-content;
  font-size: 15px;
  padding: 4px 8px;
  text-align: center;
  background-color: var(--tooltip-clr);
  color: var(--tooltip-txt-clr);
  border-radius: 0.3125rem;
}

[tooltip]::before {
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: var(--arrow-width);
  border-color: var(--tooltip-clr);
}

[tooltip][tt-dir=left]::after {
  left: calc(var(--arrow-width) * -2 - var(--distance));
  top: 50%;
  transform: translate(-100%, -50%);
  transform-origin: left center;
}

[tooltip][tt-dir=left]::before {
  left: calc(var(--distance) * -2);
  top: 50%;
  transform: translate(-100%, -50%);
  border-left-color: var(--tooltip-clr);
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  transform-origin: left center;
}

[tooltip][tt-dir=right]::after {
  right: calc(var(--arrow-width) * -2 - var(--distance));
  top: 50%;
  transform: translate(100%, -50%);
  transform-origin: right center;
}

[tooltip][tt-dir=right]::before {
  right: calc(var(--distance) * -2);
  top: 50%;
  transform: translate(100%, -50%);
  border-right-color: var(--tooltip-clr);
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  transform-origin: right center;
}

[tooltip][tt-dir=top]::after {
  top: calc(var(--arrow-width) * -2 - var(--distance));
  left: 50%;
  transform: translate(-50%, -100%);
  transform-origin: left;
}

[tooltip][tt-dir=top]::before {
  top: calc(var(--distance) * -2);
  left: 50%;
  transform: translate(-50%, -100%);
  border-top-color: var(--tooltip-clr);
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform-origin: left;
}

[tooltip][tt-dir=bottom]::after {
  bottom: calc(var(--arrow-width) * -2 + var(--distance));
  left: 50%;
  transform: translate(-50%, 100%);
  transform-origin: left;
}

[tooltip][tt-dir=bottom]::before {
  bottom: calc(var(--distance) - 2px);
  left: 50%;
  transform: translate(-50%, 100%);
  border-bottom-color: var(--tooltip-clr);
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  transform-origin: left;
}

[tooltip][tt-fw-bold]:after {
  font-weight: bold;
}

[tooltip]:hover:before,
[tooltip]:hover:after {
  opacity: 1;
  scale: 1;
}

/********************** Header (sidebar) *************/
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 999;
  width: var(--sidebar-width);
  background-color: var(--sidebar-bg);
  transition: all 0.5s ease;
}
.sidebar .bg {
  position: absolute;
  right: 0rem;
  top: 0rem;
  width: fit-content;
  background-color: var(--sidebar-bg);
  transition: 0.5s ease;
}
.sidebar .bg .ham {
  width: 3.125rem;
  color: var(--sidebar-txt-clr);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.sidebar .customer_code {
  position: absolute;
  right: 50%;
  top: 3rem;
  transform: translateX(50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-transform: capitalize;
  color: var(--sidebar-txt-clr);
  padding: 0.5rem 0.5rem 0;
}
.sidebar .customer_code .code {
  font-weight: 600;
}
.sidebar .customer_code .logo {
  font-weight: bolder;
  font-size: 1.5625rem;
}
.sidebar .customer_code .logo span {
  color: red;
}
.sidebar .nav ul:not(.collapsed_ul) {
  width: 100%;
  padding: 6.25rem 0.5rem 0.9375rem;
  transition: 0.3s ease;
}
.sidebar .nav__link_collapse, .sidebar .nav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.3125rem 0;
  color: var(--sidebar-txt-clr);
  padding: 0.625rem;
  transition: 0.3s ease;
  text-transform: capitalize;
  border-radius: 0.625rem;
}
.sidebar .nav__link_collapse i, .sidebar .nav__link i {
  font-size: 1.3rem;
}
.sidebar .nav__link_collapse .fa-caret-down, .sidebar .nav__link .fa-caret-down {
  font-size: 1rem;
}
.sidebar .nav__link_collapse.active, .sidebar .nav__link_collapse:hover, .sidebar .nav__link.active, .sidebar .nav__link:hover {
  background-color: var(--sidebar-link-bg-hover-clr);
  color: var(--sidebar-txt-hover-clr);
}
.sidebar .nav .collapsed_ul {
  font-size: 0.875rem;
  background-color: #213549;
  color: var(--sidebar-collapse-clr);
  background-color: #111c26;
  border-radius: 0.625rem;
}
.sidebar .nav__link_collapse {
  padding: 0.625rem;
  font-size: 0.875rem;
  color: var(--sidebar-dropdown-txt-clr);
}
.sidebar .nav__link_collapse i {
  font-size: 1rem;
}
.sidebar .nav__link_collapse.active, .sidebar .nav__link_collapse:hover {
  background-color: #314f6c;
  color: var(--sidebar-dropdown-txt-hover-clr);
}
.sidebar.closed {
  transition: 0.5s ease;
  overflow-y: visible;
  transform: translateX(-100%);
}
.sidebar.closed .bg {
  transform: translateX(100%);
}

.hamRotate.active {
  transform: rotate(45deg);
}

.line {
  fill: none;
  transition: stroke-dasharray 0.5s, stroke-dashoffset 0.5s;
  stroke: var(--sidebar-txt-clr);
  stroke-width: 5.5;
  stroke-linecap: round;
}

.ham1 .top {
  stroke-dasharray: 40 139;
}

.ham1 .bottom {
  stroke-dasharray: 40 180;
}

.ham1.active .top {
  stroke-dashoffset: -98px;
}

.ham1.active .bottom {
  stroke-dashoffset: -138px;
}

#iraq_body .sidebar {
  right: 0;
  left: auto;
  direction: ltr;
}
#iraq_body .sidebar .bg {
  right: auto;
  left: 0rem;
}
#iraq_body .sidebar .nav__link {
  padding: 0.9375rem 0.625rem;
}
#iraq_body .sidebar .customer_code {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  gap: 0.5rem;
  width: 100%;
}
#iraq_body .sidebar.closed {
  transform: translateX(100%);
}
#iraq_body .sidebar.closed .bg {
  transform: translateX(-100%);
}

/********************** Footer *************/
.footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--soft-gray);
  transition: all 0.5s ease;
}
.footer a {
  color: blue;
}

/********************** KeyFrames *************/
@keyframes flying {
  0% {
    transform: translateY(-0.625rem);
  }
  100% {
    transform: translateY(0.625rem);
  }
}
@keyframes custom-flying {
  0% {
    transform: translateY(-0.625rem);
    filter: drop-shadow(0 1.25rem 0.4375rem #c8c8c8);
  }
  100% {
    transform: translateY(0.625rem);
    filter: drop-shadow(0 0.9375rem 0.4375rem #c8c8c8);
  }
}
@keyframes show-news {
  0% {
    transform: translate(100%, -50%);
  }
  100% {
    transform: translate(-100%, -50%);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animateLoader {
  0% {
    box-shadow: -38px -6px, -14px 6px, 14px -6px;
  }
  33% {
    box-shadow: -38px 6px, -14px -6px, 14px 6px;
  }
  66% {
    box-shadow: -38px -6px, -14px 6px, 14px -6px;
  }
  100% {
    box-shadow: -38px 6px, -14px -6px, 14px 6px;
  }
}
@keyframes go-opacity-zero-x-left {
  0% {
    transform: translateX(0rem);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}
@keyframes go-opacity-zero-x-right {
  0% {
    transform: translateX(0rem);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes go-opacity-zero-y {
  0% {
    transform: translateY(0rem);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
/********************** Loading *************/
.loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  transition: 0.5s ease, z-index 0.1s 1s ease;
  overflow: hidden;
}
.loading .loader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 6.25rem;
  height: 6.25rem;
  background-color: var(--body-bg);
  border-radius: 50%;
}
.loading .loader:before, .loading .loader:after {
  content: "";
  border-radius: 50%;
  position: absolute;
  inset: 0;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
}
.loading .loader:after {
  box-shadow: 2px 0 5px 5px var(--main-clr);
  animation: rotate 1s linear infinite;
}
.loading.hide {
  pointer-events: none;
  opacity: 0;
  z-index: -9999;
}

/********************** Login *************/
.login {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-color: #fff;
}
.login .main-content {
  display: grid;
  justify-content: center;
  place-items: center;
}
.login .main-content .holder {
  position: relative;
  z-index: 4;
  width: 100%;
}
@media (min-width: 768px) {
  .login .main-content .holder {
    width: 31.25rem;
  }
}
.login .main-content form {
  width: 100%;
  padding: 1rem;
  background-color: #959595;
  box-shadow: 0 0.3125rem 1rem rgba(0, 0, 0, 0.3);
  border-radius: 0.3125rem;
}

/********************** Orders *************/
.orders .row-1 {
  background-color: #5F9DD1;
}
.orders .row-1-column {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: solid 1px #fff;
  padding: 0 !important;
}
@media (min-width: 992px) {
  .orders .row-1-column {
    border-right: solid 1px #fff;
  }
}
.orders .row-2-column {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: solid 1px var(--soft-gray);
}
@media (min-width: 992px) {
  .orders .row-2-column {
    border-right: solid 1px var(--soft-gray);
  }
}
.orders .customer_payments,
.orders .customer_details {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
}
.orders .customer_payments i,
.orders .customer_details i {
  font-size: 1.3rem;
}
.orders .orders_holder {
  background-color: #E5E5E5;
}
.orders .table-holder {
  width: calc(var(--table-width) * 1px);
  margin: 0 auto;
}
.orders .resp-table {
  width: 100%;
}
.orders .resp-table .resp-table-head {
  display: grid;
  grid-template-columns: repeat(var(--number-columns), 1fr);
  background-color: #D0E9C6;
  border-top: 0.0625rem solid #c8c8c8;
}
@media (max-width: 767px) {
  .orders .resp-table .resp-table-head {
    grid-template-columns: repeat(calc(var(--number-columns) - 1), 1fr);
  }
}
.orders .resp-table .table-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.3125rem;
  border-right: 0.0625rem solid #c8c8c8;
  word-break: break-all;
  word-wrap: break-word;
}
.orders .resp-table .table-cell.desc {
  word-break: initial;
  word-wrap: initial;
}
.orders .resp-table .table-cell.date {
  font-size: 0.8125rem;
}
.orders .resp-table .table-cell a {
  color: blue;
}
.orders .resp-table .table-head-cell {
  text-transform: capitalize;
  font-weight: 600;
  word-break: normal;
  word-wrap: normal;
}
.orders .resp-table .table-cell:first-child {
  border-right: 0.0625rem solid #c8c8c8;
}
.orders .resp-table .table-cell:last-child {
  border-left: 0.0625rem solid #c8c8c8;
}
.orders .resp-table .resp-table-body {
  display: grid;
  grid-template-columns: repeat(var(--number-columns), 1fr);
  background-color: white;
  border-bottom: 0.0625rem solid #c8c8c8;
  border-top: 0.0625rem solid #c8c8c8;
}
@media (max-width: 767px) {
  .orders .resp-table .resp-table-body {
    grid-template-columns: repeat(calc(var(--number-columns) - 1), 1fr);
  }
}
.orders .resp-table .resp-table-body:last-child {
  border-bottom: none;
}
.orders .resp-table .p-head {
  display: none !important;
}
@media (min-width: 768px) {
  .orders .resp-table .p-head {
    display: block !important;
  }
}
.orders .resp-table .show-sm-flex,
.orders .resp-table .p-body {
  display: none;
}
@media (min-width: 768px) {
  .orders .resp-table .show-sm-flex,
.orders .resp-table .p-body {
    display: flex;
  }
}
.orders .show-sm-flex {
  display: none;
}
@media (min-width: 768px) {
  .orders .show-sm-flex {
    display: flex;
  }
}
.orders .status-holder {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0.1875rem 0 0.3125rem;
  padding: 0 1rem;
}
.orders .status-holder > * {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 0.85rem;
}
.orders .status-holder > * i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  font-size: 0.85rem;
}
.orders .status-holder > * i.success {
  background-color: #43cd14 !important;
}
.orders .status-holder > * i.empty {
  background-color: #DAA520 !important;
}
.orders .status-holder > * i.zero {
  background-color: #9a99a3 !important;
}
.orders .status-holder > *.status:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 30%;
  right: calc(var(--line-x) * 1px);
  transform: translateY(-50%);
  height: 0.125rem;
  width: calc(var(--line-width) * 1px);
  background-color: transparent;
}
.orders .status-holder > *.status.active:not(:first-child)::before {
  background-color: #bbbbbb !important;
}
@media (max-width: 767px) {
  .orders .invoices-row .btns > * {
    padding: 1rem 0;
  }
}
.orders .invoices-row > * > * {
  background-color: #fff;
}
@media (max-width: 767px) {
  .orders .invoices-row .invoice-info {
    height: 8.4375rem !important;
  }
}
.orders .feedback_btn {
  position: relative;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  text-transform: capitalize;
  width: 100%;
  align-self: center;
}
.orders .feedback_btn .show_feedback {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  height: 10.5625rem;
  width: 100%;
  transform: translateY(-100%);
  overflow: scroll;
  background-color: #eee;
  padding: 0 0.3125rem 0.3125rem;
}
.orders .feedback_btn .show_feedback .head > * {
  text-transform: capitalize;
  background-color: #1d3f79;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.3125rem 0.125rem;
  margin-bottom: 0.1875rem;
  font-weight: bold;
}
.orders .feedback_btn .show_feedback .msg-holder {
  width: 100%;
  display: flex;
  gap: 0.25rem;
  margin: 0.625rem 0;
}
.orders .feedback_btn .show_feedback .msg-right {
  margin-left: auto;
}
.orders .feedback_btn .show_feedback .msg-left {
  flex-direction: row-reverse;
  margin-right: auto;
}
.orders .feedback_btn .show_feedback .text {
  text-transform: initial;
  display: flex;
  flex-direction: column;
  padding: 0.125rem 0.3125rem;
  color: #000;
  font-size: 0.6875rem;
  background-color: #fdf8a4;
  border-radius: 0.3125rem;
}
.orders .feedback_btn .show_feedback .date {
  color: #333;
  opacity: 0.8;
  font-size: 0.5625rem;
}
.orders .invoices-row {
  color: #666;
}

.border-bottom-clr {
  border-bottom: 0.0625rem solid rgb(222, 218, 218);
}

.border-top-clr {
  border-top: 0.0625rem solid rgb(222, 218, 218);
}

.border-left-clr {
  border-left: 0.0625rem solid rgb(222, 218, 218);
}

.border-right-clr {
  border-right: 0.0625rem solid rgb(222, 218, 218);
}

.border-clr {
  border: 0.0625rem solid rgb(222, 218, 218);
}

.border-bottom-clr-0 {
  border-bottom: none;
}

.border-top-clr-0 {
  border-top: none;
}

.border-left-clr-0 {
  border-left: none;
}

.border-right-clr-0 {
  border-right: none;
}

/********************** Print Orders *************/
.print_orders .item-img {
  display: grid;
  background-color: #8e9bab;
}
.print_orders .item-img img {
  max-height: 7.8125rem;
  margin: auto 0;
  object-fit: cover;
}

/********************** Global China *************/
#china_head {
  position: fixed;
  top: 0;
  z-index: 200;
  width: 100%;
  display: flex;
  gap: 1rem;
  height: 3.125rem;
  padding-left: 1rem;
  background-color: var(--sidebar-bg);
  color: #fff;
}
#china_head.closed {
  padding-left: 4.125rem;
}
@media (max-width: 767px) {
  #china_head {
    padding-left: 4.125rem;
  }
}
#china_head > button {
  position: relative;
  padding: 0.5rem 1rem;
  transition: 0.5s ease;
}
#china_head > button:hover {
  background-color: #111c26;
}
#china_head .show_data {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 200;
  transform: translateY(100%);
  height: 15.625rem;
  width: 100%;
  padding: 0.3125rem 0.625rem;
  background-color: #fff;
  color: #000;
  transition: 0.5s ease;
  overflow-y: scroll;
  pointer-events: none;
  opacity: 0;
}
@media (min-width: 400px) {
  #china_head .show_data {
    left: 2.5rem;
    width: 18.75rem;
    padding: 0.3125rem;
  }
}
#china_head .show_data.show {
  pointer-events: auto;
  opacity: 1;
}
#china_head .show_data .feedback {
  background-color: #B8CFE5;
  border: 0.0625rem solid var(--soft-gray);
}
#china_head .show_data .packing_list {
  border: 0.0625rem solid var(--soft-gray);
}
#china_head .show_data a {
  transition: 0.4s ease;
  color: rgb(23, 76, 251);
}
#china_head .show_data a:hover {
  color: #032aa9;
  text-decoration: underline;
}

#china_buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: fit-content;
  gap: 0.25rem;
  padding: 0.3125rem;
  border: 0.0625rem solid var(--soft-gray);
  border-radius: 0.3125rem;
  margin: 0.625rem;
  font-size: 0.875rem;
}
#china_buttons > * {
  padding: 0.3125rem 0.9375rem;
  text-transform: capitalize;
  background-color: rgba(204, 204, 204, 0.3411764706);
  border: 0.0625rem solid #BBB8B8;
  border-radius: 0.3125rem;
  transition: 0.3s ease;
}
#china_buttons > *.active, #china_buttons > *:hover {
  background-color: #fff;
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.2);
}

/********************** China Orders *************/
#china_body {
  --sm-size: 60px;
  --md-size: 80px;
  --lg-size: 100px;
}
#china_body .orders_holder {
  min-height: 60vh;
}
@media (max-width: 767px) {
  #china_body .orders_holder {
    overflow: initial !important;
  }
}
#china_body .total-numbers {
  background-color: hsla(0deg, 0%, 85%, 0.4);
  padding: 0 0.3125rem;
  font-weight: 600;
  border-radius: 0.3125rem;
  border: solid 0.0625rem hsl(0deg, 0%, 85%);
}
#china_body .table-holder {
  width: calc(var(--table-width) * 1px);
  margin: 0 auto;
}
#china_body .resp-table {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
#china_body .resp-table .one-order {
  background-color: hsl(240deg, 60%, 90%);
  border: solid 0.0625rem hsl(0deg, 0%, 60%);
}
#china_body .resp-table .one-order .table-cell {
  height: 5rem;
}
#china_body .resp-table .one-order .order_bottom {
  margin-top: 0.1875rem;
}
#china_body .resp-table .table-head-cell {
  text-transform: capitalize;
  font-weight: 600;
  word-break: normal;
  word-wrap: normal;
  background-color: #D0E9C6;
}
#china_body .resp-table .table-cell:first-child {
  border-right: 0.0625rem solid #c8c8c8;
}
#china_body .resp-table .table-cell:last-child {
  border-left: 0.0625rem solid #c8c8c8;
}
#china_body .resp-table .orders_body {
  overflow: auto;
}
#china_body .resp-table .resp-table-body {
  display: grid;
  grid-template-columns: 1.5fr 7.5rem var(--md-size) 4.375rem 3.125rem 1.2fr 3.125rem 4.375rem 1.5fr var(--china-unit-price) var(--china-amount) var(--china-check-line) var(--sm-size) repeat(3, 1fr) calc(var(--control-width) * 1px);
  background-color: white;
  border-bottom: 0.0625rem solid #c8c8c8;
  border-top: 0.0625rem solid #c8c8c8;
  font-size: 0.6875rem;
}
#china_body .resp-table .resp-table-body:last-child {
  border-bottom: none;
}
#china_body .resp-table .edit-btns {
  flex-direction: column;
  gap: 0.5rem;
}
#china_body .resp-table .edit-btns > * {
  padding: 0.3125rem 0.625rem;
}
#china_body .header {
  -webkit-position: sticky;
  -moz-position: sticky;
  -ms-position: sticky;
  -o-position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 3.125rem;
  z-index: 199;
}
@media (max-width: 767px) {
  #china_body .header {
    overflow: initial !important;
  }
}
#china_body .header .resp-table-head {
  display: grid;
  grid-template-columns: 1.5fr 7.5rem var(--md-size) 4.375rem 3.125rem 1.2fr 3.125rem 4.375rem 1.5fr var(--china-unit-price) var(--china-amount) var(--china-check-line) var(--sm-size) repeat(3, 1fr) calc(var(--control-width) * 1px);
  border-top: 0.0625rem solid #c8c8c8;
}
#china_body .table-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.3125rem;
  border-right: 0.0625rem solid #c8c8c8;
  word-break: break-all;
  word-wrap: break-word;
}
#china_body .table-cell.comment, #china_body .table-cell.custom_id, #china_body .table-cell.size, #china_body .table-cell.desc {
  word-break: break-word;
  word-wrap: normal;
}
#china_body .table-cell.comment > *, #china_body .table-cell.custom_id > *, #china_body .table-cell.size > *, #china_body .table-cell.desc > * {
  resize: none;
}
#china_body .table-cell.desc {
  position: relative;
}
#china_body .table-cell.desc:hover .show_description {
  opacity: 1;
  pointer-events: all;
}
#china_body .table-cell.desc .show_description {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 10;
  min-width: 10.9375rem;
  max-width: 14.0625rem;
  max-height: 12.5rem;
  transform: translate(-50%, 100%);
  padding: 0.3125rem;
  font-size: 1rem;
  font-weight: normal;
  overflow-y: auto;
  background-color: #fff;
  box-shadow: 0 0.3125rem 1.25rem rgba(0, 0, 0, 0.4);
  opacity: 0;
  border-radius: 0.3125rem;
  transition: opacity 0.3s ease, pointer-events 0.1s 0.3s ease;
  pointer-events: none;
  word-break: initial;
  word-wrap: initial;
}
#china_body .table-cell.sea {
  background-color: hsl(200deg, 50%, 52%);
}
#china_body .table-cell.pink {
  background-color: #EA6EC7;
}
#china_body .table-cell.orange {
  color: #DF7401;
}
#china_body .table-cell.orange::placeholder {
  color: inherit;
}
#china_body .table-cell.date {
  background-color: #546e7a;
  color: #fff;
}
#china_body .table-cell.rbm::placeholder {
  font-size: 1rem;
}
#china_body .table-cell.checkLine, #china_body .table-cell.invoiceNo {
  background-color: hsla(0deg, 0%, 77%, 0.988);
}
#china_body .table-cell a {
  color: #2672b8;
}
#china_body .table-cell.img-small:hover .img-big {
  opacity: 1;
  pointer-events: auto;
}
#china_body .table-cell .main_img {
  width: 7.5rem;
  height: 5rem;
  object-fit: fill;
}
#china_body .table-cell .img-big {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, 100%);
  width: 12.5rem;
  height: 12.5rem;
  background-color: #fff;
  box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.5);
  transition: 0.5s ease;
  opacity: 0;
  pointer-events: none;
}
#china_body .table-cell .img-big img {
  object-fit: contain;
}
@media (max-width: 767px) {
  #china_body .table-cell .img-big {
    display: none;
  }
}
#china_body .table-head-cell {
  text-transform: capitalize;
  font-weight: 600;
  word-break: normal;
  word-wrap: normal;
  background-color: #D0E9C6;
  padding-top: 0;
  padding-bottom: 0;
}
#china_body .edit-btn {
  background-color: hsl(216deg, 90%, 50%);
  transition: 0.3s ease;
}
#china_body .edit-btn:hover {
  background-color: hsl(216deg, 90%, 40%);
  border-color: hsl(216deg, 90%, 40%);
}
#china_body .soft-danger-btn {
  background-color: hsl(354deg, 61%, 50%);
  transition: 0.3s ease;
  color: #fff;
}
#china_body .soft-danger-btn:hover {
  background-color: hsl(354deg, 61%, 40%);
  border-color: hsl(354deg, 61%, 40%);
}
#china_body .status-holder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
#china_body .status-holder > * {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-transform: capitalize;
  font-size: 0.875rem;
}
#china_body .status-holder > * > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  font-weight: bolder;
  border-radius: 50%;
  transition: 0.5s ease;
  cursor: pointer;
}
#china_body .status-holder > * > i.success {
  background-color: hsl(70deg, 61%, 50%);
}
#china_body .status-holder > * > i.empty {
  background-color: #DAA520;
}
#china_body .status-holder > * > i.zero {
  background-color: #DAA520;
  font-size: 0.875rem;
}
#china_body .status-holder > *.active > i {
  background-color: hsl(70deg, 61%, 50%);
}
#china_body .status-holder > *.status:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 30%;
  right: calc(var(--line-x) * 1px);
  transform: translateY(-50%);
  height: 0.125rem;
  width: calc(var(--line-width) * 1px);
  background-color: transparent;
  transition: 0.5s ease;
}
#china_body .status-holder > *.status.active:not(:last-child)::before {
  background-color: hsl(0deg, 0%, 70%);
}
#china_body .status-holder .insert_pack_name {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
  transform: translate(40%, 0%);
  max-width: 6.875rem;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
}
#china_body .status-holder .insert_pack_name > * {
  font-size: 0.9375rem;
}
@media (max-width: 767px) {
  #china_body .status-holder .insert_pack_name {
    transform: translate(35%, 0%);
    width: 4.375rem;
    flex-direction: column;
    opacity: 1;
    pointer-events: auto;
  }
  #china_body .status-holder .insert_pack_name > * {
    font-size: 0.625rem;
    width: 100%;
    border-radius: 0;
    margin: 0;
  }
}
#china_body .status-holder .insert_pack_name.active {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 767px) {
  #china_body .invoices-row .btns > * {
    padding: 1rem 0;
  }
}
#china_body .invoices-row > * > * {
  background-color: #fff;
}
@media (max-width: 767px) {
  #china_body .invoices-row .invoice-info {
    height: 8.4375rem !important;
  }
}
#china_body .feedback_btn_holder {
  position: relative;
}
#china_body .feedback_btn_holder .show_feedback {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  transform: translateY(100%);
  height: 15.625rem;
  width: 15.625rem;
  padding: 0 0.3125rem 0.625rem;
  overflow: hidden;
  background-color: #eee;
  box-shadow: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.4);
}
#china_body .feedback_btn_holder .show_feedback .head {
  width: 100%;
  padding: 0.3125rem 0;
  background-color: #1d3f79;
  margin-bottom: 0.1875rem;
}
#china_body .feedback_btn_holder .show_feedback .head > * {
  text-align: center;
  text-transform: capitalize;
  color: #fff;
  font-size: 0.875rem;
  font-weight: bold;
}
#china_body .feedback_btn_holder .show_feedback .feedback_footer {
  width: 100%;
  font-size: 0.8125rem;
}
#china_body .feedback_btn_holder .show_feedback .result {
  height: 9.0625rem;
  overflow: auto;
}
#china_body .feedback_btn_holder .show_feedback .msg-holder {
  width: 100%;
  display: flex;
  gap: 0.25rem;
  margin: 0.625rem 0;
}
#china_body .feedback_btn_holder .show_feedback .msg-right {
  margin-left: auto;
}
#china_body .feedback_btn_holder .show_feedback .msg-left {
  flex-direction: row-reverse;
  margin-right: auto;
}
#china_body .feedback_btn_holder .show_feedback .text {
  display: flex;
  flex-direction: column;
  padding: 0.125rem 0.3125rem;
  color: #000;
  font-size: 0.6875rem;
  background-color: #fdf8a4;
  border-radius: 0.3125rem;
}
#china_body .feedback_btn_holder .show_feedback .msg-right .text {
  background-color: #F0FFFF;
}
#china_body .feedback_btn_holder .show_feedback .date {
  opacity: 0.8;
  font-size: 0.5625rem;
}
#china_body .save_comment {
  background-color: #51b451;
  padding: 0.375rem 0.75rem;
  color: #fff;
  transition: 0.3s ease;
}
#china_body .save_comment:hover {
  background-color: #47a447;
}
#china_body #show_text {
  position: fixed;
  top: 20vh;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, 0);
  width: 40vw;
  transition: 0.4s ease;
  background-color: #000;
  color: #fff;
  box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.25);
  border: 0.0625rem solid #c8c8c8;
  border-radius: 0.625rem;
  padding: 0.625rem;
  pointer-events: none;
  opacity: 0;
}
#china_body #show_text.active {
  opacity: 1;
}
#china_body .border-bottom-clr {
  border-bottom: 0.0625rem solid #c8c8c8;
}
#china_body .border-top-clr {
  border-top: 0.0625rem solid #c8c8c8;
}
#china_body .border-left-clr {
  border-left: 0.0625rem solid #c8c8c8;
}
#china_body .border-right-clr {
  border-right: 0.0625rem solid #c8c8c8;
}
#china_body .border-clr {
  border: 0.0625rem solid #c8c8c8;
}
#china_body .border-bottom-clr-0 {
  border-bottom: none;
}
#china_body .border-top-clr-0 {
  border-top: none;
}
#china_body .border-left-clr-0 {
  border-left: none;
}
#china_body .border-right-clr-0 {
  border-right: none;
}
#china_body .bg-white-green-clr {
  background-color: #ebf8fb;
}

/********************** Global Iraq *************/
#iraq_head {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  display: grid;
  place-items: center;
  height: 3.125rem;
  background-color: var(--sidebar-bg);
  color: #fff;
  transition: 0.5s ease;
}
#iraq_head > * {
  position: relative;
  display: flex;
  gap: 0.5rem;
}
#iraq_head * > button {
  position: relative;
  padding: 0.5rem;
  transition: 0.5s ease;
}
#iraq_head * > button:hover {
  background-color: #111c26;
}
#iraq_head .show_data {
  position: absolute;
  bottom: -0.3125rem;
  left: 0;
  z-index: -1;
  transform: translateY(100%);
  height: 15.625rem;
  min-width: 100%;
  padding: 0.3125rem 0.625rem;
  background-color: #fff;
  color: #000;
  transition: 0.5s ease;
  overflow-y: scroll;
  pointer-events: none;
  opacity: 0;
}
@media (min-width: 400px) {
  #iraq_head .show_data {
    min-width: 14.0625rem;
    padding: 0.3125rem;
  }
}
#iraq_head .show_data.show {
  z-index: 200;
  pointer-events: auto;
  opacity: 1;
}
#iraq_head .show_data .packing_list {
  border: 0.0625rem solid var(--soft-gray);
}
#iraq_head .show_data a {
  transition: 0.4s ease;
  color: rgb(23, 76, 251);
}
#iraq_head .show_data a:hover {
  color: #032aa9;
  text-decoration: underline;
}
@media (min-width: 768px) {
  #iraq_head #btn_item_search_mobile,
#iraq_head #btn_customer_search_mobile {
    display: none;
  }
}
#iraq_head #item_search input,
#iraq_head #customer_search input,
#iraq_head #search_code_invoice input {
  border-top-right-radius: 0.3125rem;
  border-bottom-right-radius: 0.3125rem;
}
#iraq_head #item_search,
#iraq_head #customer_search {
  margin-right: auto;
  color: #000;
  transition: 0.5s ease;
}
@media (min-width: 400px) {
  #iraq_head #item_search,
#iraq_head #customer_search {
    min-width: 14.0625rem;
    padding: 0.3125rem;
  }
}
@media (max-width: 767px) {
  #iraq_head #item_search,
#iraq_head #customer_search {
    position: absolute;
    bottom: -0.3125rem;
    left: 0;
    z-index: 200;
    transform: translateY(100%);
    height: 15.625rem;
    min-width: 100%;
    padding: 0.3125rem 0.625rem;
    width: fit-content;
    height: fit-content;
    box-shadow: 0 0.625rem 0.625rem rgba(51, 51, 51, 0.3);
    background-color: #fff;
    pointer-events: none;
    opacity: 0;
  }
}
#iraq_head #item_search.show,
#iraq_head #customer_search.show {
  pointer-events: auto;
  opacity: 1;
}

#iraq_body .customer_profile .row-1,
#iraq_body .orders .row-1 {
  background-color: #5F9DD1;
}
#iraq_body .customer_profile .row-1-column,
#iraq_body .orders .row-1-column {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: solid 1px #fff;
  padding: 0 !important;
}
@media (min-width: 992px) {
  #iraq_body .customer_profile .row-1-column,
#iraq_body .orders .row-1-column {
    border-right: solid 1px #fff;
  }
}
#iraq_body .customer_profile .row-2-column,
#iraq_body .orders .row-2-column {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: solid 1px var(--soft-gray);
}
@media (min-width: 992px) {
  #iraq_body .customer_profile .row-2-column,
#iraq_body .orders .row-2-column {
    border-right: solid 1px var(--soft-gray);
  }
}
#iraq_body .customer_profile .customer_payments,
#iraq_body .customer_profile .customer_details,
#iraq_body .orders .customer_payments,
#iraq_body .orders .customer_details {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
}
#iraq_body .customer_profile .customer_payments i,
#iraq_body .customer_profile .customer_details i,
#iraq_body .orders .customer_payments i,
#iraq_body .orders .customer_details i {
  font-size: 1.3rem;
}
#iraq_body .customer_profile .customer_payments .notes_count,
#iraq_body .customer_profile .customer_details .notes_count,
#iraq_body .orders .customer_payments .notes_count,
#iraq_body .orders .customer_details .notes_count {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.9375rem;
  height: 0.9375rem;
  background-color: var(--secondary-clr);
  color: #fff;
  border-radius: 50%;
}
#iraq_body .customer_profile .feedback_btn_holder,
#iraq_body .orders .feedback_btn_holder {
  position: relative;
}
#iraq_body .customer_profile .feedback_btn_holder .show_feedback,
#iraq_body .orders .feedback_btn_holder .show_feedback {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  transform: translateY(100%);
  height: 16.875rem;
  width: 15.625rem;
  display: grid;
  padding: 0 0.3125rem 0.625rem;
  overflow: hidden;
  background-color: #eee;
  box-shadow: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.4);
}
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .head,
#iraq_body .orders .feedback_btn_holder .show_feedback .head {
  width: 100%;
  padding: 0.3125rem 0;
  background-color: #1d3f79;
  margin-bottom: 0.1875rem;
}
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .head > *,
#iraq_body .orders .feedback_btn_holder .show_feedback .head > * {
  text-align: center;
  text-transform: capitalize;
  color: #fff;
  font-size: 0.875rem;
  font-weight: bold;
}
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .feedback_footer,
#iraq_body .orders .feedback_btn_holder .show_feedback .feedback_footer {
  margin-top: auto;
  width: 100%;
  font-size: 0.8125rem;
}
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .feedback_footer label,
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .feedback_footer button,
#iraq_body .orders .feedback_btn_holder .show_feedback .feedback_footer label,
#iraq_body .orders .feedback_btn_holder .show_feedback .feedback_footer button {
  padding: 0rem !important;
}
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .feedback_footer label i,
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .feedback_footer button i,
#iraq_body .orders .feedback_btn_holder .show_feedback .feedback_footer label i,
#iraq_body .orders .feedback_btn_holder .show_feedback .feedback_footer button i {
  font-size: 0.8125rem !important;
}
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .result,
#iraq_body .orders .feedback_btn_holder .show_feedback .result {
  height: 9.0625rem;
  overflow: auto;
}
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .msg-holder,
#iraq_body .orders .feedback_btn_holder .show_feedback .msg-holder {
  width: 100%;
  display: flex;
  gap: 0.25rem;
  margin: 0.625rem 0;
}
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .msg-right,
#iraq_body .orders .feedback_btn_holder .show_feedback .msg-right {
  margin-left: auto;
}
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .msg-left,
#iraq_body .orders .feedback_btn_holder .show_feedback .msg-left {
  flex-direction: row-reverse;
  margin-right: auto;
}
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .text,
#iraq_body .orders .feedback_btn_holder .show_feedback .text {
  display: flex;
  flex-direction: column;
  padding: 0.125rem 0.3125rem;
  color: #000;
  font-size: 0.6875rem;
  background-color: #fdf8a4;
  border-radius: 0.3125rem;
}
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .msg-right .text,
#iraq_body .orders .feedback_btn_holder .show_feedback .msg-right .text {
  background-color: #F0FFFF;
}
#iraq_body .customer_profile .feedback_btn_holder .show_feedback .date,
#iraq_body .orders .feedback_btn_holder .show_feedback .date {
  opacity: 0.8;
  font-size: 0.5625rem;
}

/********************** Orders *************/
#iraq_body .orders .row-1 {
  background-color: #5F9DD1;
}
#iraq_body .orders .row-1-column {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: solid 1px #fff;
  padding: 0 !important;
}
@media (min-width: 992px) {
  #iraq_body .orders .row-1-column {
    border-right: solid 1px #fff;
  }
}
#iraq_body .orders .row-2-column {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: solid 1px var(--soft-gray);
}
@media (min-width: 992px) {
  #iraq_body .orders .row-2-column {
    border-right: solid 1px var(--soft-gray);
  }
}
#iraq_body .orders .customer_payments,
#iraq_body .orders .customer_details {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
}
#iraq_body .orders .customer_payments i,
#iraq_body .orders .customer_details i {
  font-size: 1.3rem;
}
#iraq_body .orders .orders_holder {
  background-color: #E5E5E5;
}
#iraq_body .orders .table-holder {
  width: calc(var(--table-width) * 1px);
  margin: 0 auto;
}
#iraq_body .orders .resp-table {
  width: 100%;
}
#iraq_body .orders .resp-table .resp-table-head {
  display: grid;
  grid-template-columns: repeat(var(--number-columns), 1fr);
  background-color: #D0E9C6;
  border-top: 0.0625rem solid #c8c8c8;
}
#iraq_body .orders .resp-table .table-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.3125rem;
  border-right: 0.0625rem solid #c8c8c8;
  word-break: break-all;
  word-wrap: break-word;
}
#iraq_body .orders .resp-table .table-cell.desc {
  word-break: initial;
  word-wrap: initial;
}
#iraq_body .orders .resp-table .table-cell.date {
  font-size: 0.8125rem;
}
#iraq_body .orders .resp-table .table-cell a {
  color: blue;
}
#iraq_body .orders .resp-table .table-head-cell {
  text-transform: capitalize;
  font-weight: 600;
  word-break: normal;
  word-wrap: normal;
}
#iraq_body .orders .resp-table .table-cell:first-child {
  border-right: 0.0625rem solid #c8c8c8;
}
#iraq_body .orders .resp-table .table-cell:last-child {
  border-left: 0.0625rem solid #c8c8c8;
}
#iraq_body .orders .resp-table .resp-table-body {
  display: grid;
  grid-template-columns: repeat(var(--number-columns), 1fr);
  background-color: white;
  border-bottom: 0.0625rem solid #c8c8c8;
  border-top: 0.0625rem solid #c8c8c8;
}
#iraq_body .orders .resp-table .resp-table-body.show-shadow {
  box-shadow: inset -5px 5px 10px -1px #c7c7c7, inset 5px -5px 10px 3px #c7c7c7;
}
#iraq_body .orders .resp-table .resp-table-body:last-child {
  border-bottom: none;
}
#iraq_body .orders .order-holder {
  transition: 0.4s ease;
}
#iraq_body .orders .status-holder {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 9.375rem !important;
  margin: 0.1875rem 0 0.3125rem;
  padding: 0 1rem;
}
#iraq_body .orders .status-holder.print {
  grid-template-columns: repeat(4, 1fr);
}
#iraq_body .orders .status-holder > * {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 0.85rem;
}
#iraq_body .orders .status-holder > * i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  font-size: 0.85rem;
}
#iraq_body .orders .status-holder > * i.success {
  background-color: #43cd14 !important;
}
#iraq_body .orders .status-holder > * i.empty {
  background-color: #DAA520 !important;
}
#iraq_body .orders .status-holder > * i.zero {
  background-color: #9a99a3 !important;
}
#iraq_body .orders .status-holder > *.status:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 30%;
  right: calc(var(--line-x) * 1px);
  transform: translateY(-50%);
  height: 0.125rem;
  width: calc(var(--line-width) * 1px);
  background-color: transparent;
}
#iraq_body .orders .status-holder > *.status.active:not(:first-child)::before {
  background-color: #bbbbbb !important;
}
@media (max-width: 767px) {
  #iraq_body .orders .invoices-row .btns > * {
    padding: 1rem 0;
  }
  #iraq_body .orders .invoices-row .invoice-info {
    height: 8.4375rem !important;
  }
}
#iraq_body .orders .invoices-row > * > * {
  background-color: #fff;
}
#iraq_body .orders .feedback_btn {
  position: relative;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  text-transform: capitalize;
  width: 100%;
  align-self: center;
}
#iraq_body .orders .feedback_btn .show_feedback {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  height: 10.5625rem;
  width: 100%;
  transform: translateY(-100%);
  overflow: scroll;
  background-color: #eee;
  padding: 0 0.3125rem 0.3125rem;
}
#iraq_body .orders .feedback_btn .show_feedback .head > * {
  text-transform: capitalize;
  background-color: #1d3f79;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.3125rem 0.125rem;
  margin-bottom: 0.1875rem;
  font-weight: bold;
}
#iraq_body .orders .feedback_btn .show_feedback .msg-holder {
  width: 100%;
  display: flex;
  gap: 0.25rem;
  margin: 0.625rem 0;
}
#iraq_body .orders .feedback_btn .show_feedback .msg-right {
  margin-left: auto;
}
#iraq_body .orders .feedback_btn .show_feedback .msg-left {
  flex-direction: row-reverse;
  margin-right: auto;
}
#iraq_body .orders .feedback_btn .show_feedback .text {
  display: flex;
  flex-direction: column;
  padding: 0.125rem 0.3125rem;
  color: #000;
  font-size: 0.6875rem;
  background-color: #fdf8a4;
  border-radius: 0.3125rem;
}
#iraq_body .orders .feedback_btn .show_feedback .date {
  opacity: 0.8;
  font-size: 0.5625rem;
}
#iraq_body .border-bottom-clr {
  border-bottom: 0.0625rem solid rgb(222, 218, 218);
}
#iraq_body .border-top-clr {
  border-top: 0.0625rem solid rgb(222, 218, 218);
}
#iraq_body .border-left-clr {
  border-left: 0.0625rem solid rgb(222, 218, 218);
}
#iraq_body .border-right-clr {
  border-right: 0.0625rem solid rgb(222, 218, 218);
}
#iraq_body .border-clr {
  border: 0.0625rem solid rgb(222, 218, 218);
}
#iraq_body .border-bottom-clr-0 {
  border-bottom: none;
}
#iraq_body .border-top-clr-0 {
  border-top: none;
}
#iraq_body .border-left-clr-0 {
  border-left: none;
}
#iraq_body .border-right-clr-0 {
  border-right: none;
}

/********************** Orders *************/
#customer_body .print_orders .orders_holder,
#iraq_body .print_orders .orders_holder {
  background-color: #E5E5E5;
}
#customer_body .print_orders .table-holder,
#iraq_body .print_orders .table-holder {
  width: calc(var(--table-width) * 1px);
  margin: 0 auto;
}
#customer_body .print_orders .resp-table,
#iraq_body .print_orders .resp-table {
  width: 100%;
}
#customer_body .print_orders .resp-table .resp-table-head,
#iraq_body .print_orders .resp-table .resp-table-head {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 2fr repeat(5, 1fr);
  background-color: #D0E9C6;
  border-top: 0.0625rem solid #c8c8c8;
}
#customer_body .print_orders .resp-table .table-cell,
#iraq_body .print_orders .resp-table .table-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 0.0625rem solid #c8c8c8;
  word-break: break-all;
  word-wrap: break-word;
}
#customer_body .print_orders .resp-table .table-cell.desc,
#iraq_body .print_orders .resp-table .table-cell.desc {
  word-break: initial;
  word-wrap: initial;
}
#customer_body .print_orders .resp-table .table-cell.date,
#iraq_body .print_orders .resp-table .table-cell.date {
  font-size: 0.8125rem;
}
#customer_body .print_orders .resp-table .table-cell a,
#iraq_body .print_orders .resp-table .table-cell a {
  color: blue;
}
#customer_body .print_orders .resp-table .table-head-cell,
#iraq_body .print_orders .resp-table .table-head-cell {
  text-transform: capitalize;
  font-weight: 600;
  word-break: normal;
  word-wrap: normal;
}
#customer_body .print_orders .resp-table .table-cell:first-child,
#iraq_body .print_orders .resp-table .table-cell:first-child {
  border-right: 0.0625rem solid #c8c8c8;
}
#customer_body .print_orders .resp-table .table-cell:last-child,
#iraq_body .print_orders .resp-table .table-cell:last-child {
  border-left: 0.0625rem solid #c8c8c8;
}
#customer_body .print_orders .resp-table .resp-table-body,
#iraq_body .print_orders .resp-table .resp-table-body {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 2fr repeat(5, 1fr);
  background-color: white;
  border-bottom: 0.0625rem solid #c8c8c8;
  border-top: 0.0625rem solid #c8c8c8;
}
#customer_body .print_orders .resp-table .resp-table-body.show-shadow,
#iraq_body .print_orders .resp-table .resp-table-body.show-shadow {
  box-shadow: inset -5px 5px 10px -1px #c7c7c7, inset 5px -5px 10px 3px #c7c7c7;
}
#customer_body .print_orders .resp-table .resp-table-body:last-child,
#iraq_body .print_orders .resp-table .resp-table-body:last-child {
  border-bottom: none;
}
#customer_body .print_orders .status-holder,
#iraq_body .print_orders .status-holder {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
#customer_body .print_orders .status-holder.print,
#iraq_body .print_orders .status-holder.print {
  grid-template-columns: repeat(4, 1fr);
}
#customer_body .print_orders .status-holder > *,
#iraq_body .print_orders .status-holder > * {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 0.65rem;
}
#customer_body .print_orders .status-holder > * i,
#iraq_body .print_orders .status-holder > * i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: 50%;
  font-size: 0.5rem;
}
#customer_body .print_orders .status-holder > * i.success,
#iraq_body .print_orders .status-holder > * i.success {
  background-color: #43cd14 !important;
}
#customer_body .print_orders .status-holder > * i.empty,
#iraq_body .print_orders .status-holder > * i.empty {
  background-color: #DAA520 !important;
}
#customer_body .print_orders .status-holder > * i.zero,
#iraq_body .print_orders .status-holder > * i.zero {
  background-color: #9a99a3 !important;
}
#customer_body .print_orders .status-holder > *.status:not(:first-child)::before,
#iraq_body .print_orders .status-holder > *.status:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 30%;
  right: calc(var(--line-x) * 1px);
  transform: translateY(-50%);
  height: 0.0625rem;
  width: calc(var(--line-width) * 1px);
  background-color: transparent;
}
#customer_body .print_orders .status-holder > *.status.active:not(:first-child)::before,
#iraq_body .print_orders .status-holder > *.status.active:not(:first-child)::before {
  background-color: #bbbbbb !important;
}
#customer_body .border-bottom-clr,
#iraq_body .border-bottom-clr {
  border-bottom: 0.0625rem solid rgb(222, 218, 218);
}
#customer_body .border-top-clr,
#iraq_body .border-top-clr {
  border-top: 0.0625rem solid rgb(222, 218, 218);
}
#customer_body .border-left-clr,
#iraq_body .border-left-clr {
  border-left: 0.0625rem solid rgb(222, 218, 218);
}
#customer_body .border-right-clr,
#iraq_body .border-right-clr {
  border-right: 0.0625rem solid rgb(222, 218, 218);
}
#customer_body .border-clr,
#iraq_body .border-clr {
  border: 0.0625rem solid rgb(222, 218, 218);
}
#customer_body .border-bottom-clr-0,
#iraq_body .border-bottom-clr-0 {
  border-bottom: none;
}
#customer_body .border-top-clr-0,
#iraq_body .border-top-clr-0 {
  border-top: none;
}
#customer_body .border-left-clr-0,
#iraq_body .border-left-clr-0 {
  border-left: none;
}
#customer_body .border-right-clr-0,
#iraq_body .border-right-clr-0 {
  border-right: none;
}

/********************** Users Permissions *************/
.users_permissions .form-check {
  padding: 0.25rem 1.5rem;
  border-radius: 0.3125rem;
  width: fit-content;
}
@media (max-width: 767px) {
  .users_permissions .form-check {
    padding: 0.25rem 1.5rem 0.25rem 0.25rem;
  }
}
.users_permissions label, .users_permissions input {
  cursor: pointer;
}

/*# sourceMappingURL=style.css.map */