/******************************************************************************/
/* Fonts
/******************************************************************************/
@font-face {
  font-family: "Keeppeer";
  src: url("../fonts/Keeppeer.otf");
}

@font-face {
  font-family: "Gicons";
  src: url("../fonts/Gicons.otf");
}

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap");

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat.ttf");
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat.ttf");
}

@font-face {
  font-family: "Libre Barcode 128";
  src: url("../fonts/LibreBarcode128.ttf");
}

.fnt-brcd {
  font-family: "Libre Barcode 128", cursive;
  font-size: 34px;
  transform: scale(1, 1.5);
  -webkit-transform: scale(1, 1.5);
}

.gicnz,
.gicn span {
  font-family: "Gicons";
}

.shdw {
  box-shadow: inset 0 0 0px #222222de;
}

/******************************************************************************/
/* Scrollbar Design
/******************************************************************************/
::-webkit-scrollbar {
  z-index: 99999;
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #eeeeee00;
}

::-webkit-scrollbar-track {
  height: 10px;
  border-radius: 0px;
  box-shadow: inset 0 0 0px #555;
}

::-webkit-scrollbar-thumb {
  width: 8px;
  border-radius: 10px;
  background: #a5a5a5;
  cursor: pointer !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--kpr-d);
  cursor: pointer !important;
}

#nonSelected::-webkit-scrollbar,
.w-ctc::-webkit-scrollbar,
.ovrflw::-webkit-scrollbar {
  width: 3px;
}

.movrflw-x::-webkit-scrollbar {
  height: 3px;
}

.movrflw-x::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #8bccd8;
}

.movrflw-x::-webkit-scrollbar {
  background-color: #d6fafffa;
}

#nonSelected::-webkit-scrollbar-track,
.w-ctc::-webkit-scrollbar-track,
.ovrflw::-webkit-scrollbar-track,
.movrflw-x::-webkit-scrollbar-track {
  border-radius: 3px;
}

#nonSelected::-webkit-scrollbar-thumb,
.w-ctc::-webkit-scrollbar-thumb,
.ovrflw::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #a5a5a5;
}

#nonSelected::-webkit-scrollbar-thumb:hover,
.w-ctc::-webkit-scrollbar-thumb:hover,
.ovrflw::-webkit-scrollbar-thumb:hover,
.movrflw-x::-webkit-scrollbar-thumb:hover {
  background: #00546a;
}

p {
  margin: 0px !important;
}

.ovrflw-200 {
  height: 200px;
  overflow-wrap: normal;
  overflow: auto !important;
}

.ovrflwx {
  width: 100%;
  height: 50px;
  overflow-wrap: normal;
  overflow: auto !important;
}

.movrflw-x {
  overflow-x: auto;
  overflow-y: hidden;
}

.ovrflwy {
  width: 100%;
  overflow-wrap: normal;
  overflow: auto !important;
}

.oflwx {
  width: 100%;
  height: 400px;
  overflow-wrap: normal;
  overflow: auto !important;
}

.oflwx-600 {
  width: 100%;
  max-height: 674px;
  overflow-wrap: normal;
  overflow: auto !important;
}

.oflwx-580 {
  width: 580;
  height: 75px;
  overflow-wrap: normal;
  overflow-y: auto !important;
}





/* .loading-spinner {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #555;
    padding: 20px;
}

.loading-spinner .spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #ccc;
    border-top: 3px solid #4CAF50;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} */


/******************************************************************************/
/* Sweet alert
/******************************************************************************/
.ff-brcd {
  font-family: "Libre Barcode 128", cursive;
}

/******************************************************************************/
/* Sweet alert
/******************************************************************************/
.colored-toast.swal2-icon-success {
  background-color: #a5dc86 !important;
}

.colored-toast.swal2-icon-error {
  background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
  background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
  background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
  background-color: #87adbd !important;
}

.colored-toast .swal2-title {
  color: white;
}

.colored-toast .swal2-close {
  color: white;
}

.colored-toast .swal2-html-container {
  color: white;
}

.swal2-styled.swal2-confirm {
  background-color: var(--kpr-l) !important;
}

/******************************************************************************/
/* Root
/******************************************************************************/
:root {
  /* Colors *******************************************************************/
  --kpr-d: #00546a;
  /* Keeppeer Official */
  --kpr-l: #067c9b;
  --kpr-m: #036780;
  /* Keeppeer Light */
  --b: #1d1d1d;
  /* Black */
  --g-vd: #555555;
  /* Very Dark Grey */
  --gry-d: #7a7878;
  /* Dark Grey */
  --gry-m: #e1e1e1;
  /* Medium Grey */
  --gry-l: #dddddd;
  /* light Grey */
  --w: #ffffff;
  /* White */
  --r: #ed1c24;
  /* Red */
  --g: #00a421;
  /* Green */
  --o: #ff4800;
  /* Orange */
  /* Font Size ****************************************************************/
  --fnt-mt: 24px;
  /* Main Title */
  --fnt-st: 22px;
  /* Sub Title */
  --fnt-sst: 20px;
  /* Sub Sub Title */
  --fnt-n: 18px;
  /* Names & Designations */
  --fnt-s: 16px;
  /* Standard */
  --fnt-sm: 14px;
  /* Small */
  --fnt-xs: 12px;
  /* Extra Small*/
}

/******************************************************************************/
/* Font weight & Size
/******************************************************************************/
.fw-bld {
  font-weight: 600 !important;
}

.fw-reg {
  font-weight: 400 !important;
}

.fw-mid {
  font-weight: 500 !important;
}

.fw-bldr {
  font-weight: 800 !important;
}

.fw-900 {
  font-weight: 900 !important;
}

.fs-50 {
  font-size: 50px !important;
}

.fs-40 {
  font-size: 40px !important;
}

.fs-36 {
  font-size: 36px !important;
}

.fs-30 {
  font-size: 30px !important;
}

.fs-26 {
  font-size: 26px !important;
}

.fs-24 {
  font-size: 24px !important;
}

.fs-22 {
  font-size: 22px !important;
}

.fs-20 {
  font-size: 20px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.fs-16 {
  font-size: 16px !important;
}

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

.fs-13 {
  font-size: 13px !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-10 {
  font-size: 10px !important;
}

.fs-8 {
  font-size: 8px !important;
}

.tf-u {
  text-transform: uppercase;
}

.lh-13 {
  line-height: 1.3 !important;
}

/******************************************************************************/
/* Text Decoration
/******************************************************************************/
.td-lt {
  text-decoration: line-through;
}

.z-0 {
  z-index: 0;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.z-4 {
  z-index: 4;
}

.z-5 {
  z-index: 5;
}

.z-10 {
  z-index: 10;
}

.z-999 {
  z-index: 999 !important;
}

.crsr-pnt {
  cursor: pointer !important;
}

.crsr-dflt {
  cursor: default;
}

.td-nx {
  text-decoration: none !important;
}

/******************************************************************************/
/* For mobile Only
/******************************************************************************/
.m-ui {
  display: none !important;
}

td.dhdn,
th.dhdn {
  display: none;
}

/******************************************************************************/
/* Color
/******************************************************************************/
.clr-lnk {
  color: var(--kpr-l) !important;
}

.clr-lnk:hover {
  color: var(--kpr-d) !important;
}

.clr-kd {
  color: var(--kpr-d) !important;
}

.clr-km {
  color: var(--kpr-m) !important;
}

.clr-kl {
  color: var(--kpr-l) !important;
}

.clr-dgry {
  color: var(--gry-d) !important;
}

.clr-mgry {
  color: var(--gry-m) !important;
}

.clr-lgry {
  color: var(--gry-l) !important;
}

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

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

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

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

.clr-blk {
  color: #1f1f1f !important;
}

.clr-gy {
  color: #ffb900 !important;
}

.clr-lb {
  color: #a7f2ff !important;
}

.clr-v {
  color: #743eff !important;
}

.pseudo:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 10px;
  bottom: -10px;
  left: 0;
  background-image: linear-gradient(45deg,
      rgba(0, 0, 0, 0) 33.333%,
      #efefef 33.333%,
      #efefef 66.667%,
      rgba(0, 0, 0, 0) 66.667%),
    linear-gradient(-45deg,
      rgba(0, 0, 0, 0) 33.333%,
      #efefef 33.333%,
      #efefef 66.667%,
      rgba(0, 0, 0, 0) 66.667%);
  background-size: 20px 40px;
  background-position: 50% -30px;
  background-repeat: repeat-x;
  z-index: 1;
}

/******************************************************************************/
/* Background Color
/******************************************************************************/
.bclr-blk {
  background-color: #232323 !important;
  border: none !important;
}

.bclr-none {
  background-color: #ffffff00 !important;
  border: none !important;
}

.bclr-dshb {
  background-color: #003a49 !important;
  border: none !important;
}

.dshb a {
  color: #003a49;
}

.bclr-lb {
  background-color: #e1f5ff !important;
  border: none !important;
}

.bclr-v {
  background-color: #9b06ff !important;
  border: none !important;
}


.bclr-b {
  background-color: #0687ff !important;
  border: none !important;
}

.bclr-klr {
  background-color: var(--kpr-l) !important;
}

.bclr-dkpr {
  background-color: var(--kpr-d) !important;
  border: none !important;
}

.bclr-kd {
  background-color: var(--kpr-d) !important;
  color: var(--w) !important;
  border: none !important;
}

.bclr-kdb {
  background-color: var(--kpr-d) !important;
  border: none !important;
}

.bclr-kl {
  background-color: var(--kpr-l) !important;
  color: var(--w) !important;
  border: none !important;
  padding: 10px;
}

.bclr-dgry {
  background-color: var(--gry-d) !important;
  color: var(--w) !important;
  border: none !important;
}

.bclr-gry1 {
  background-color: #dbdbdb !important;
}


.bclr-gry {
  background-color: #f0f0f0 !important;
}

.bclr-dgry-7 {
  background-color: #002524b8 !important;
  border: none !important;
}

.bclr-mgry {
  background-color: var(--gry-m) !important;
  color: var(--w);
  border: none !important;
}

.bclr-mgry2 {
  background-color: var(--gry-m) !important;
  color: var(--w) !important;
  border: none !important;
}

.bclr-lgry {
  background-color: var(--gry-l) !important;
  border: none !important;
}

.bclr-lg {
  background-color: #efefef !important;
  border: 1px solid var(--gry-m) !important;
}

.bclr-r {
  background-color: #e80000 !important;
  color: var(--w) !important;
  border: none !important;
}

.bclr-g {
  background-color: var(--g) !important;
  color: var(--w) !important;
  border: none !important;
}

.bclr-o {
  background-color: var(--o) !important;
  color: var(--w) !important;
  border: none !important;
}

.bclr-o2 {
  background-color: var(--o) !important;
  color: var(--w) !important;
  border: none !important;
}

.bclr-w {
  background-color: var(--w) !important;
  border: none;
}

.bclr-w-30 {
  background-color: #ffffff30;
}

.bclr-w-50 {
  background-color: #ffffff50 !important;
}

.bclr-w-70 {
  background-color: #ffffff70 !important;
}



.bclr-indx-w {
  background-color: var(--w) !important;
  border: none !important;
  opacity: 0.92;
}

.bclr-aec {
  background-color: #f8f8f8 !important;
  border: none !important;
}

.bclr-hvr {
  background-color: rgba(0, 0, 0, 0.641) !important;
}

.bclr-vlb {
  background-color: #effdff !important;
  border: none !important;
}

.bclr-hvr-gry:hover {
  background-color: #9b9b9b;
  border-radius: 10px;
  color: white;
}

.hvr-bclr-mgry:hover {
  background-color: #dfdfdf;
}


.opvl {
  opacity: .3;
}

.opvl:hover {
  opacity: .9;
}

/******************************************************************************/
/* Gradient Background Color
/******************************************************************************/
.ibclr-kpr {
  background-image: linear-gradient(#e8fff1, #c4f1fb);
  height: 100%;
}


.mdbc-kpr {
  background-image: linear-gradient(#00556ad3, #e3f9ea00);
}

.bclr-kpr {
  background: linear-gradient(90deg, #00546a 0%, #067c9b 100%);
  padding: 6px;
  height: 45px;
}

.bclr-kprl {
  background: linear-gradient(90deg, #04728d 0%, #60b0c4 100%);
  padding: 6px;
  height: 45px;
}

.bclr-prd {
  background: linear-gradient(0deg, #b7f1ff 0%, #04728d 100%);
  padding: 6px;
  height: 45px;
}

.bclr-mdl {
  background-color: var(--g);
  border-radius: 10px 10px 0 0;
}

.bclr-n {
  background-color: #ffffff00 !important;
}

.bclr-1 {
  background: linear-gradient(90deg, #0359afdc 0%, #021b79 100%);
}

.bclr-2 {
  background: linear-gradient(90deg, #0c665e 0%, #03973c 100%);
}

.bclr-3 {
  background: linear-gradient(90deg, #cc2b5e 0%, #753a88 100%);
}

.bclr-4 {
  background: linear-gradient(90deg, #aa4d00 0%, #da5000 100%);
}

.bclr-5 {
  background: linear-gradient(90deg, #00546a 0%, #067c9b 100%);
}

.bclr-6 {
  background: linear-gradient(180deg, #e9e9e9 0%, #a8a8a8 100%);
}

.bclr-7 {
  background: linear-gradient(180deg, #00a421 0%, #d3d3d3 100%);
}

.bclr-8 {
  background: linear-gradient(90deg, #c70000 0%, #550000 100%);
}

.bclr-9 {
  background: linear-gradient(0deg, #9eeaff 0%, #ffffff 100%);
}

.bclr-10 {
  background: linear-gradient(180deg, #018bad 0%, #ffffff 100%);
}

/******************************************************************************/
/* Background Color Hover Darker
/******************************************************************************/
.bclr-kd:hover {
  background-color: #004151 !important;
}

/* .bclr-kl:hover {
  background-color: #05647c !important;
} */

.bclr-dgry:hover {
  background-color: #606060 !important;
}

.bclr-lgry:hover {
  background-color: #aeaeae !important;
}

.bclr-mgry:hover {
  background-color: #afadad !important;
}

/* .bclr-w:hover {
  background-color: #f7f7f7 !important;
} */

.bclr-r:hover {
  background-color: #ff0000 !important;
}

.bclr-g:hover {
  background-color: #03801c !important;
}

.bclr-kl:hover {
  background-color: #06637b !important;
}

.bclr-o:hover {
  background-color: #e24405 !important;
}

/******************************************************************************/
/* Button Color
/******************************************************************************/
.btn-clr-kd {
  color: var(--kpr-d) !important;
  border: 1px solid var(--kpr-d) !important;
}

.btn-clr-kl {
  color: var(--kpr-l) !important;
  border: 1px solid var(--kpr-l) !important;
}

.btn-clr-kl-text {
  color: var(--kpr-l) !important;
  border: 0px solid var(--kpr-l) !important;
}

.btn-clr-o-text {
  color: var(--o) !important;
  border: 0px solid var(--kpr-l) !important;
}

.btn-clr-dgry {
  color: var(--gry-d) !important;
  border: 1px solid var(--gry-d) !important;
}

.btn-clr-blk {
  color: #161616 !important;
  border: 1px solid #161616 !important;
}

.btn-clr-vlgry {
  color: var(--gry-m) !important;
  border: 1px solid var(--gry-m) !important;
}

.btn-clr-mgry {
  color: var(--gry-m) !important;
  border: 1px solid var(--gry-m) !important;
}

.btn-clr-w {
  color: var(--w) !important;
  border: 1px solid var(--w) !important;
}

.btn-clr-r {
  color: var(--r) !important;
  border: 1px solid var(--r) !important;
}

.btn-clr-g {
  color: var(--g) !important;
  border: 1px solid var(--g) !important;
}

.btn-clr-gry {
  color: var(--gry) !important;
  border: 1px solid var(--gry) !important;
}

.btn-clr-o {
  color: var(--o) !important;
  border: 1px solid var(--o) !important;
}

/******************************************************************************/
/* Border Color
/******************************************************************************/
.bdr-clr-r {
  border: 2px solid var(--r) !important;
}

.bdr-clr-g {
  border: 2px solid var(--g) !important;
}

.bdr-clr-kl {
  border: 2px solid var(--kpr-l) !important;
}

/******************************************************************************/
/* Background Color Hover
/******************************************************************************/
.btn-clr-kd:hover {
  background-color: var(--kpr-d) !important;
  color: var(--w) !important;
}

.btn-clr-blk:hover {
  background-color: #161616 !important;
  color: var(--w) !important;
}

.btn-clr-kl:hover {
  background-color: var(--kpr-l) !important;
  color: var(--w) !important;
}

.btn-clr-kl-text:hover {
  background-color: var(--kpr-l) !important;
  color: var(--w) !important;
}

.btn-clr-o-text:hover {
  background-color: var(--o) !important;
  color: var(--w) !important;
}

.btn-clr-dgry:hover {
  background-color: var(--gry-d) !important;
  color: var(--w) !important;
}

.btn-clr-vlgry:hover {
  color: var(--gry-l) !important;
  background-color: var(--gry-l) !important;
}

.btn-clr-mgry:hover {
  background-color: var(--gry-m) !important;
  color: var(--w) !important;
}

.btn-clr-w:hover {
  background-color: #a2dbff !important;
  color: var(--kpr-l) !important;
}

.btn-clr-r:hover {
  background-color: var(--r) !important;
  color: var(--w) !important;
}

.btn-clr-g:hover {
  background-color: var(--g) !important;
  color: var(--w) !important;
}

.btn-clr-gry:hover {
  background-color: var(--gry-d) !important;
  color: var(--w) !important;
}

.btn-clr-o:hover {
  background-color: var(--o) !important;
  color: var(--w) !important;
}

.btn-ni {
  font-size: 10px;
}

/******************************************************************************/
/* Buttons
/******************************************************************************/
.btn-edt {
  font-size: 12px;
  border: 1px solid #8fd39c;
  border-radius: 10px;
  padding: 5px;
  background-color: #f7f7f7;
  cursor: pointer;
  color: #3d3d3d;
}

.btn-edt:hover {
  background-color: #c2fad5;
}

.btn-edtr {
  font-size: 12px;
  border: 1px solid #da7a7a;
  border-radius: 10px;
  padding: 5px;
  background-color: #f7f7f7;
  cursor: pointer;
  color: #3d3d3d;
}

.btn-edtr:hover {
  background-color: #fac2c2;
}

.btn-dlt {
  font-size: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 5px;
  cursor: pointer;
  color: #3d3d3d;
}

.btn-dlt:hover {
  background-color: #d1d1d1;
}

.btn-trsh {
  opacity: .7;
}

.btn-trsh:hover {
  opacity: 1;
}

.kbtn button {
  font-size: 14px;
  width: 100%;
  padding: 6px 10px;
  color: var(--o);
  border: 2px solid #ebebeb;
  border-radius: 10px;
  background-color: var(--w);
  font-weight: 600;
  cursor: pointer;
}

.kbtn button:hover {
  color: var(--w) !important;
  background-color: var(--o);
}

.kbtn-cln span,
.kbtn span {
  font-family: "Gicons";
  font-weight: 500 !important;
  padding: 0px;
  font-size: 18px !important;
}

.kbtn-cln button {
  border: none;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0);
  padding: 0px;
}

.kbtn-clni {
  border: none;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0);
  font-family: "Gicons";
  color: var(--gry-m);
}

.kbtn-clni:hover,
.kbtn-cln span:hover {
  color: var(--gry-d);
}

.kbtn-text button {
  font-size: 16px !important;
  font-weight: 600;
  width: 100%;
  color: var(--o);
  border: 2px solid var(--o);
  border-radius: 5px;
  background-color: var(--w);
  cursor: pointer;
  background-color: transparent !important;
}

.kbtn-text button:hover {
  color: var(--w) !important;
  background-color: var(--o);
}


.hvrbtn:hover {
  background-color: #ddf5fc;
}

/******************************************************************************/
/* Opacity on Hover
/******************************************************************************/
.op-h {
  opacity: 0 !important;
}

.op-30 {
  opacity: 0.3 !important;
}
.op-50 {
  opacity: 0.5 !important;
}

.op-70 {
  opacity: 0.7 !important;
}

.op-90 {
  opacity: 0.9 !important;
}

.op-h:hover {
  opacity: 1 !important;
}

/******************************************************************************/
/* Generic Fix WIDTH PX & Percent
/******************************************************************************/
.kw-rspnse {
  width: 1050px;
}

.kw-cont {
  width: fit-content !important;
}

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

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

.kw-18 {
  width: 18px !important;
}

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

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

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

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

.kw-36 {
  width: 36px !important;
}

.kw-40 {
  min-width: 40px;
  max-width: 40px;
}

.kw-45 {
  width: 45px;
}

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

.kw-55 {
  min-width: 55px;
  max-width: 55px;
}

.kw-56 {
  min-width: 100px !important;
  max-width: 100px !important;
}

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

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

.kw-65 {
  width: 65px;
}

.kw-70 {
  width: 70px;
}

.kw-74 {
  width: 75px;
}

.kw-70i {
  width: 70px !important;
}

.kw-75 {
  min-width: 75px;
  max-width: 75px;
}

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

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

.kw-95 {
  width: 95px;
}

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

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

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

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

.kw-120x {
  width: 120px;
}

.kw-120 {
  min-width: 120px;
  max-width: 120px;
}

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

.kw-130 {
  width: 130px;
}

.kw-140 {
  width: 140px;
}

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

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

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

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

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

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

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

.kw-186 {
  width: 186px;
}


.kw-183 {
  width: 183px !important;
}

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

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

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

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

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

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

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

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

.kw-230 {
  width: 230px;
}

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

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

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

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

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

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

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

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

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

.kw-345 {
  width: 345px !important;
}

.kw-350 {
  width: 350px !important;
}

.kw-400 {
  width: 400px !important;
}

.kw-405 {
  width: 405px !important;
}

.kw-450 {
  width: 450px !important;
}

.kw-455 {
  width: 455px !important;
}

.kw-485 {
  width: 485px !important;
}

.kw-500 {
  width: 500px;
}

.kw-550 {
  width: 550px !important;
}

.kw-600 {
  width: 600px !important;
}

.kw-650 {
  width: 650px !important;
}

.kw-700 {
  width: 700px !important;
}

.kw-750 {
  width: 750px !important;
}

.kw-800 {
  width: 800px !important;
}

.kw-850 {
  width: 800px !important;
}

.kw-900 {
  width: 900px !important;
}

.kw-1000i {
  width: 1000px !important;
}

.kw-1000 {
  width: 1000px;
}

.kw-1050 {
  width: 1050px;
}

/* Max Width ******************************************************************/
.kw-m50 {
  max-width: 50px !important;
}

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

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

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

/* min Width ******************************************************************/
.kw-mn200 {
  min-width: 200px !important;
}

/* Min Max Width ******************************************************************/
.kwmx-100 {
  max-width: 100px !important;
  min-width: 100px !important;
}

.kwmxh-30 {
  max-width: 30px !important;
  min-width: 30px !important;
  max-height: 30px !important;
  min-height: 30px !important;
}

/* Width Percent **************************************************************/
.kw-100p {
  width: 100% !important;
}

.kw-99p {
  width: 99% !important;
}

.kw-98p {
  width: 98% !important;
}

.kw-97p {
  width: 97% !important;
}

.kw-96p {
  width: 96% !important;
}

.kw-90p {
  width: 90% !important;
}

.kw-80p {
  width: 80% !important;
}

.kw-70p {
  width: 70% !important;
}

.kw-75p {
  width: 75% !important;
}

.kw-50p {
  width: 50% !important;
}

.kw-30p {
  width: 30% !important;
}

.kw-25p {
  width: 25% !important;
}

.kw-19p {
  width: 18.96% !important;
}

.kw-a {
  width: auto !important;
}

.kw-fc {
  width: fit-content !important;
}

.square-image {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/******************************************************************************/
/* Height
/******************************************************************************/
.kh-a {
  height: auto !important;
}

.kh-10 {
  height: 10px;
}

.kh-13 {
  height: 13px;
}

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

.kh-18 {
  height: 18px !important;
}

.kh-20 {
  height: 20px;
}

.kh-22 {
  height: 22px !important;
}

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

.kh-30 {
  height: 30px;
}

.kh-32 {
  height: 32px;
}

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

.kh-38 {
  height: 38px;
}

.kh-40 {
  height: 40px;
}

.kh-42 {
  height: 42px;
}

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

.kh-45 {
  height: 45px;
}

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

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

.kh-50p {
  height: 49% !important;
}

.kh-53 {
  height: 53px;
}

.kh-55 {
  height: 55px;
}

.kh-60 {
  height: 60px;
}

.kh-65 {
  height: 65px;
}

.kh-70 {
  height: 70px;
}

.kh-75 {
  height: 75px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

.kh-165 {
  height: 165px;
}

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

.kh-177 {
  height: 177px !important;
}

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

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

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

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

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

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

.kh-230 {
  height: 215px !important;
}

.kh-231 {
  height: 230px !important;
}

.kh-250 {
  height: 250px;
}

.kh-255 {
  height: 255px;
}

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

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

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

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

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

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

.kh-350 {
  height: 350px !important;
}

.kh-356 {
  height: 356px !important;
}

.kh-365 {
  height: 365px !important;
}

.kh-380 {
  height: 380px !important;
}

.kh-400 {
  min-height: 400px !important;
}

.khxh-400 {
  max-height: 400px;
}

.khmx-400 {
  min-height: 400px;
  max-height: 400px;
}

.kh-400i {
  height: 400px !important;
}

.kh-405 {
  height: 400px;
}

.kh-410 {
  height: 410px !important;
}

.kh-430 {
  height: 430px !important;
}

.kh-500 {
  height: 500px !important;
}

.khm-550 {
  min-height: 550px !important;
}

.kh-550 {
  height: 530px !important;
}

.kh-600 {
  height: 600px !important;
}

/* Min Max Width**************************************************************/
.kwmx-35 {
  min-width: 35px;
  max-width: 35px;
}

.kwmx-45 {
  min-width: 45px;
  max-width: 45px;
}

.kwmx-60 {
  min-width: 60px;
  max-width: 60px;
}

.kwmx-250 {
  min-width: 250px;
  max-width: 250px;
}

.kwmx-400 {
  min-width: 400px;
  max-width: 400px;
}


/* Min Max Height**************************************************************/
.khmx-35 {
  min-height: 35px;
  max-height: 35px;
}

.khmx-60 {
  min-height: 60px;
  max-height: 60px;
}

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


/* Width Percent **************************************************************/
.kh-100p {
  height: 100% !important;
}

.kh-fc {
  height: fit-content !important;
}

/* View Height **************************************************************/

.vh-100 {
  height: 100vh !important;
}

.vrtcla-m {
  vertical-align: middle;
}

/******************************************************************************/
/* Border
/******************************************************************************/
.br-r {
  border-radius: 100px !important;
}

.br-r0 {
  border-radius: 0px !important;
}

.br-r3 {
  border-radius: 3px !important;
}

.br-t {
  border: 1px solid #e5e5e5;
  border-radius: 11px;
}

.br-1-db {
  border: 1px solid #bcd8e5 !important;
}

.br-lrb {
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.br-drk {
  border: 1px solid #acacac !important;
}

.br-mgry {
  border: 1px solid #eeeeee !important;
}

.br-dblu {
  border: 1px solid #b2c9d7 !important;
}

.br-o {
  border: 1px solid #ffbebe !important;
}

.br-md {
  border: 1px solid var(--gry-d) !important;
}

.br-kprl {
  border: 2px solid var(--kpr-l) !important;
}

.br-3o {
  border: 3px solid var(--o) !important;
}

.br-2o {
  border: 2px solid var(--o) !important;
}

.br-kprl:hover {
  border: 2px solid var(--kpr-d) !important;
}

.br-lft {
  border-left: 1px solid var(--gry-m);
}

.br-rgt {
  border-right: 1px solid var(--gry-d);
}

.br-btm {
  border-bottom: 1px solid var(--gry-d);
}

.br-n {
  border: none !important;
}

.br-0 {
  border-radius: 0px !important;
}

.br-ltb10 {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.br-r5 {
  border-radius: 10px !important;
}

.br-r10 {
  border-radius: 10px !important;
}

.br-r15 {
  border-radius: 15px !important;
}

.br-r20 {
  border-radius: 20px !important;
}

.br-r25 {
  border-radius: 25px !important;
}

.br-r100 {
  border-radius: 100px !important;
}

.br-t0b10 {
  border-radius: 0 0 10px 10px !important;
}

.br-t0b15 {
  border-radius: 0 0 15px 15px !important;
}

.br-t10b0 {
  border-radius: 10px 10px 0px 0px !important;
}

.br-t15b0 {
  border-radius: 15px 15px 0px 0px;
}

.crsl-brdr {
  border-radius: 10px 0px 0px 10px !important;
}

.crsl-dmgn {
  margin-top: 15px;
}

.brdr-lr {
  border-right: 1px solid var(--gry-m) !important;
  border-left: 1px solid var(--gry-m) !important;
  border-top: none !important;
  border-bottom: none !important;
}

.brdr-rt {
  border-right: 1px solid var(--gry-m) !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

.brdr-l {
  border-right: none !important;
  border-left: 1px solid var(--gry-m) !important;
  border-top: none !important;
  border-bottom: none !important;
}

.brdr-b {
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--gry-m) !important;
}

.brdr-b-b {
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: 1px solid #bcd8e5 !important;
}

.brdr-t {
  border-right: none !important;
  border-left: none !important;
  border-bottom: none !important;
  border-top: 1px solid var(--gry-l) !important;
}

.brdr-gry {
  border: 1px solid var(--gry-m) !important;
}

.brdr-dgry {
  border: 1px solid var(--gry-d) !important;
}

.brdr-kl {
  border: 1px solid var(--kpr-l) !important;
}

.brdr-r {
  border: 1px solid var(--r) !important;
}

.brdr-o {
  border: 1px solid var(--o) !important;
}

.brdr-g {
  border: 1px solid var(--g) !important;
}

.brdr-gy {
  border: 1px solid #ffb900 !important;
}

.brdr-blk {
  border: 1px solid #272727 !important;
}

.brdr-n {
  border: none !important;
}

/******************************************************************************/
/* MIN MAX
/******************************************************************************/

/******************************************************************************/
/* Padding
/******************************************************************************/
.pd-0 {
  padding: 0px !important;
}

.pd-1 {
  padding: 1px !important;
}

.pd-2 {
  padding: 2px !important;
}

.pd-3 {
  padding: 3px !important;
}

.pd-4 {
  padding: 4px !important;
}

.pd-5 {
  padding: 5px !important;
}

.pd-6 {
  padding: 6px !important;
}

.pd-8 {
  padding: 8px !important;
}

.pd-10 {
  padding: 10px !important;
}

.pd-10t0 {
  padding: 0px 10px 10px 10px !important;
}

.pd-t15l15b15l0 {
  padding: 15px 15px 15px 0px !important;
}

.pd-t15l15b0l15 {
  padding: 15px 15px 0px 15px !important;
}

.pd-12 {
  padding: 12px !important;
}

.pd-14 {
  padding: 14px !important;
}

.pd-15 {
  padding: 15px !important;
}

.pd-20 {
  padding: 20px !important;
}

.pd-25 {
  padding: 25px !important;
}

.pdr-0 {
  padding-right: 0px !important;
}

.pdr-4 {
  padding-right: 4px !important;
}

.pdr-6 {
  padding-right: 6px !important;
}

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

.pdr-15 {
  padding-right: 15px !important;
}

.pdl-6 {
  padding-left: 6px !important;
}

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

.pdl-20 {
  padding-left: 20px !important;
}

.pdl-25 {
  padding-left: 25px !important;
}

.pdl-35 {
  padding-left: 35px !important;
}

.pdl-40 {
  padding-left: 40px !important;
}

.pdl-45 {
  padding-left: 45px !important;
}

.pdt-0 {
  padding-top: 0px !important;
}

.pdt-4 {
  padding-top: 4px !important;
}

.pdt-8 {
  padding-top: 8px !important;
}

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

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

.pdt-35 {
  padding-top: 35px !important;
}

.pdt-50 {
  padding-top: 50px !important;
}

.pdt-65 {
  padding-top: 65px !important;
}

.pdtb-0 {
  padding: 0 0;
}

.pdtb-2 {
  padding: 2px 0;
}

.pdtb-7 {
  padding: 7px 0;
}

.pdtb-5 {
  padding: 5px 0;
}

.pdtb-6 {
  padding: 6px 0;
}

.pdtb-8 {
  padding: 8px 0;
}

.pdtb-10 {
  padding: 10px 0;
}

.pdtb-12 {
  padding: 12px 0;
}

.pdtb-15 {
  padding: 15px 0 !important;
}

.pdtb-20 {
  padding: 20px 0;
}

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

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

.pdb-50 {
  padding-bottom: 50px !important;
}

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

.pdb-8 {
  padding-bottom: 8px !important;
}

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

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

.pdlr-10 {
  padding: 0 10px !important;
}

.pdlrb-15 {
  padding: 0 15px 15px 15px !important;
}

.pdlrb-10 {
  padding: 0 10px 10px 10px !important;
}

.pdlr-4 {
  padding: 0 4px !important;
}

.pdlr-5 {
  padding: 0 5px !important;
}

.pdlr-8 {
  padding: 0 8px !important;
}

.pdlr-10i {
  padding: 0 10px !important;
}

.pdlr-15 {
  padding: 0 15px !important;
}

.pdlr-20 {
  padding: 0 20px !important;
}

.pdt17b6 {
  padding: 17px 6px 5px 6px;
}

.pd-lrb {
  padding: 0px 10px 10px 10px;
}

.pd-tlr-10 {
  padding: 10px 0px 10px 10px;
}

.pd-srch {
  padding: 10px 38px 10px;
}

/******************************************************************************/
/* Generic Misc
/******************************************************************************/
#hdn,
.hdn {
  display: none ;
}

.elpss {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.elpss2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
}

.va-c {
  vertical-align: center;
}

.v-ctr {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.v-ctr2 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blnd-mlty {
  mix-blend-mode: multiply;
  color: #ffffff;
}

.blnd-unset {
  mix-blend-mode: unset;
  color: #ffffff;
}

/******************************************************************************/
/* Positions
/******************************************************************************/
.tp-0 {
  top: 0px;
}

.tp-1 {
  top: 1px;
}

.tp-2 {
  top: 2px;
}

.tp-3 {
  top: 3px;
}

.tp-4 {
  top: 4px;
}

.tp-5 {
  top: 5px;
}

.tp-6 {
  top: 6px;
}

.tp-8 {
  top: 8px;
}

.tp-10 {
  top: 10px;
}

.tp-20 {
  top: 20px;
}

.tp-23 {
  top: 23px;
}

.tp-25 {
  top: 25px;
}

.tp-28 {
  top: 28px;
}

.tp-70 {
  top: 70px;
}

.tp--1 {
  top: -1px;
}

.tp--2 {
  top: -2px;
}

.tp--3 {
  top: -3px;
}

.tp--4 {
  top: -4px;
}

.tp--30 {
  top: -30px;
}

.tp--45 {
  top: -45px;
}

.tp--5 {
  top: -5px;
}

.tp--8 {
  top: -8px;
}

.tp--10 {
  top: -10px;
}

.tp-12 {
  top: 12px;
}

.tp-15 {
  top: 15px;
}

.tp-16 {
  top: 16px;
}

.tp-22 {
  top: 22px;
}

.tp-30 {
  top: 30px;
}

.tp-35 {
  top: 35px;
}

.tp-40 {
  top: 40px;
}

.lf--1 {
  left: -1;
}

.lf-15 {
  left: 15px;
}

.lf-10 {
  left: 10;
}

.lf-140 {
  left: 140;
}

.lf-145 {
  left: 145;
}

.lf-470 {
  left: 470;
}

.lf-785 {
  left: 785;
}

.lf-0 {
  left: 0 !important;
}

.lf-20 {
  left: 20 !important;
}

.lf-75 {
  left: 75 !important;
}

.lf-85 {
  left: 85 !important;
}

.lf-90 {
  left: 90 !important;
}

.bt-0 {
  bottom: 0px !important;
}

.bt-30 {
  bottom: 30px;
}

.bt-45 {
  bottom: 45px !important;
}

.bt-65 {
  bottom: 65px;
}


.bt--40 {
  bottom: -40px !important;
}

.rt-0 {
  right: 0px;
}

.rt-5 {
  right: 5px !important;
}

.rt-8 {
  right: 8px !important;
}

.rt-10 {
  right: 10px !important;
}

.rt-15 {
  right: 15px !important;
}

.rt--3 {
  right: -3px !important;
}

.rt--5 {
  right: -5px !important;
}

.rt--200 {
  right: -200px;
}

.rt-30 {
  right: 30;
}

.rt-40 {
  right: 40;
}

/******************************************************************************/
/* Image Size
/******************************************************************************/
.is-40 {
  max-height: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  min-width: 40px !important;
}

.is-100 {
  height: 100px !important;
  width: 100px !important;
}

/******************************************************************************/
/* object Fit
/******************************************************************************/
.of-c {
  object-fit: cover !important;
}

.of-cont {
  object-fit: contain !important;
}

.of-f {
  object-fit: fill !important;
}

/******************************************************************************/
/* Aspect Ratio
/******************************************************************************/
.ratio-2-1 {
  width: 100%;
  aspect-ratio: 2 / 1;
}

/******************************************************************************/
/* Margin Properties
/******************************************************************************/
.mgn-10 {
  margin: 10px;
}

.mgn-2 {
  margin: 2px;
}

.mgn-5 {
  margin: 5px;
}

.mgnx-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.mgnl-5-rpnsv {
  margin-left: 5px;
}

.mgnl-5 {
  margin-left: 5px;
}

.mgnlr-4 {
  margin-left: 4px;
  margin-right: 4px;
}

.mgnlr-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.mgnl-10 {
  margin-left: 10px;
}

.mgnl-15 {
  margin-left: 15px;
}

.mgnl-30 {
  margin-left: 30px;
}

.mgnl-20 {
  margin-left: 20px;
}

.mgnl-25 {
  margin-left: 25px;
}

.mgnt--4 {
  margin-top: -4px;
}

.mgnt--10 {
  margin-top: -10px;
}

.mgntb-8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.mgnt--5 {
  margin-top: -5px;
}

.mgnt--20 {
  margin-top: -20px;
}

.mgnt-0 {
  margin-top: 0px;
}

.mgnt-1 {
  margin-top: 1px;
}

.mgnt-2 {
  margin-top: 2px;
}

.mgnt-3 {
  margin-top: 3px;
}

.mgnt-4 {
  margin-top: 4px;
}

.mgnt-5 {
  margin-top: 5px;
}

.mgnt-6 {
  margin-top: 6px;
}

.mgnt-7 {
  margin-top: 7px;
}

.mgnt-8 {
  margin-top: 8px;
}

.mgnt-9 {
  margin-top: 9px !important;
}

.mgnt-10 {
  margin-top: 10px;
}

.mgnt-12 {
  margin-top: 12px;
}

.mgnt-15 {
  margin-top: 15px;
}

.mgnt-19 {
  margin-top: 19px;
}

.mgnt-20 {
  margin-top: 20px;
}

.mgnt-25 {
  margin-top: 25px;
}

.mgnt-30 {
  margin-top: 30px;
}

.mgnt-45 {
  margin-top: 45px;
}

.mgnt-50 {
  margin-top: 50px;
}

.mgnt-65 {
  margin-top: 65px;
}

.mgnt-70 {
  margin-top: 70px;
}

.mgnb-2 {
  margin-bottom: 2px !important;
}

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

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

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

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

.mgnb-60 {
  margin-bottom: 60px !important;
}

.mgnb-0 {
  margin-bottom: 0px !important;
}

.mgnr--1 {
  margin-right: -1px;
}

.mgnr-5 {
  margin-right: 5px;
}

.mgnr-10 {
  margin-right: 10px;
}

.mgnr-15 {
  margin-right: 15px;
}

.mgnr-20 {
  margin-right: 20px;
}

.mgnr-30 {
  margin-right: 30px;
}

.mgnrl-10 {
  margin-right: 10px !important;
  margin-left: 10px !important;
}

/* Margin For FLEX (Space Between) ********************************************/
.mgn-0 {
  min-width: 0px !important;
}

.mgn {
  min-width: 10px;
}

.mgn5 {
  min-width: 5px;
}

.mgn15 {
  min-width: 15px;
}

.mgn20 {
  min-width: 20px;
}

.mgn1 {
  width: 50px;
}

.mgn2 {
  width: 5px;
}

.mgn-h {
  height: 8px;
}

.pdng-tb-5 {
  padding: 5 0 5 0;
}

/******************************************************************************/
/* Grid - Generic
/******************************************************************************/
.grd-2f1f {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto;
  column-gap: 10px;
}

.grd-2f4f-g15 {
  display: grid;
  grid-template-columns: 2fr 4fr;
  grid-template-rows: auto;
  column-gap: 15px;
}

.grd-1f2f {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  column-gap: 10px;
}

.grd-1f3f {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto;
  column-gap: 15px;
}

.grd-3f1f {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto;
  column-gap: 10px;
}

.grd-3f5f {
  display: grid;
  grid-template-columns: 3fr 5fr;
  grid-template-rows: auto;
  column-gap: 10px;
}

.grd-4f3f {
  display: grid;
  grid-template-columns: 4fr 3fr;
  grid-template-rows: auto;
  column-gap: 10px;
}

.grd-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  row-gap: 10px;
  column-gap: 10px;
}

.grd-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 10px;
}

.grd-3-15 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 15px;
  row-gap: 15px;
}

.grd-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 10px;
}

.grd-5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 10px;
}

.grd-6 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 10px;
}

.grd-7 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 10px;
}

.grd-10 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 10px;
}

.grd-span-2 {
  grid-column: span 2;
}

.grd-span-3 {
  grid-column: span 3;
}

/******************************************************************************/
/* MODAL - Generic
/******************************************************************************/
.modal {
  padding: 0px 10px !important;
  transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.modal-dialog {
  margin: 50px auto !important;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.modal-content1,
.modal-content {
  padding: 15px;
  border: none;
  border-radius: 10px !important;
  animation: modalSlideIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) ease-out !important;
}

.modal-header {
  /* margin-bottom : 15px; */
  padding: 0px !important;
  border-bottom: none !important;
}

.modal-body {
  margin-bottom: 1px !important;
  padding: 0px;
}

.modal-footer {
  margin-top: 15px;
  padding: 0px !important;
}

.modal-backdrop {
  transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

#lists .active {
  background-color: aliceblue !important;
}

html,
body {
  font-family: "Montserrat", sans-serif !important;
  line-height: 1 !important;
  background-image: linear-gradient(to bottom right, #bde5e7, #acdee9);
  height: 100vh;
  background-attachment: fixed !important;
  z-index: -1;
}

.bg-cvr {
  background: url("../img/dfltx10zx/bg/bg.webp"),
    linear-gradient(to bottom right, #bde5e7, #acdee9);
  background-blend-mode: soft-light;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

td.hide_me,
th.hide_me {
  display: none;
}

a,
a:focus,
a:hover {
  outline: none !important;
  text-decoration: none !important;
}

hr {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  border-top: 1px solid #dfdfdf !important;

}

.hr {
  border-top: 1px solid #eee;
}

.hr-db {
  border-top: 1px solid #bcd8e5 !important
}

.hr-s {
  background-color: var(--kpr-l);
  height: 3px;
  width: 100%;
  margin-top: 8px;
}

form {
  margin: 0 !important;
}

select:focus {
  outline: none !important;
}

select {
  outline: none;
  border-radius: 10px !important;
}

input:focus {
  outline: none !important;
}


button:focus,
input[type="button"]:focus,
input[type="text"]:focus {
  outline: none !important;
}

input {
  outline: none !important;
  border: 1px solid #e5e5e5;
  border-radius: 10px !important;
}

input[type="radio"],
input[type="checkbox"] {
  line-height: normal;
  min-width: 22px;
  max-width: 22px;
  height: 25px;
}

input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
  cursor: default !important;
}

.badge {
  padding: 6px 7px !important;
  margin-left: 5px;
}

.prfl-t {
  width: 120px;
}

/******************************************************************************/
/* Select Style
/******************************************************************************/
#exportLink {
  color: var(--kpr-d);
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  outline: none;
}

/*the container must be positioned relative:*/
.kprslct {
  position: relative;
  font-weight: 600;
  border: 1px solid #e5e5e5;
}

.kprslct:hover {
  border: 1px solid #c2c2c2;
}

.kprslct select {
  display: none;
  /*hide original SELECT element:*/
}

.select-selected {
  background-color: #fff;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 17px;
  right: 15px;
  width: 0.5em;
  height: 0.5em;
  border-right: 0.2em solid var(--kpr-d);
  border-top: 0.2em solid var(--kpr-d);
  transform: rotate(135deg);
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  width: 0.5em;
  height: 0.5em;
  border-right: 0.2em solid var(--kpr-d);
  border-top: 0.2em solid var(--kpr-d);
  transform: rotate(315deg);
  top: 20px;
}

/*style the items (options), including the selected item:*/
.select-items div,
.select-selected {
  color: var(--kpr-d);
  height: 100%;
  padding: 14px 10px;
  border-color: transparent transparent #000 transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #fff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border: 1px solid #e5e5e5;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: #0691c5;
  color: #fff !important;
}

.ab-t {
  height: 45px !important;
}

.mprof-mtto {
  width: 100%;
  height: 80px;
  line-height: 1.5;
  padding: 10px;
  overflow-x: scroll;
  border-radius: 10px;
}

.w-cntr {
  position: absolute;
  right: 10;
  bottom: 10;
  color: var(--gry-d);
}

.number-input {
  border: 2px solid #ddd;
  display: inline-flex;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:after {
  display: inline-block;
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f077";
  transform: translate(-50%, -50%) rotate(180deg);
}

.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.number-input input[type="number"] {
  font-family: sans-serif;
  max-width: 50px;
  padding: 0.5rem;
  border: solid #ddd;
  border-width: 0 2px;
  font-size: 14px;
  height: 25px;
  font-weight: bold;
  text-align: center;
}

.spnr-hdn input[type="number"] {
 appearance: textfield;
  -moz-appearance: textfield;
}

.spnr-hdn input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/******************************************************************************/
/* Default Table Styles
/******************************************************************************/
.table-controls {
  margin-bottom: 15px;
}

.table-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 15px;
  min-height: 35px;
}

.rows-selector {
  display: flex;
  align-items: center;
}

.rows-selector label {
  font-size: 12px;
  color: var(--clr-mode);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  margin-bottom: 0px !important;
}

.search-box {
  display: flex;
  align-items: center;
}

.rows-select,
.search-input {
  padding: 8px 10px;
  border-radius: 5px;
  border: 1px solid;
  font-size: 12px;
  transition: all 0.2s ease;
  height: 35px;
  box-sizing: border-box;
}

.rows-select {
  min-width: 60px;
}

.reset-btn {
  padding: 6px 10px;
  border: 1px solid;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  height: 35px;
  transition: all 0.2s ease;
}

.reset-btn.light {
  background: #ffffff;
  color: #161616;
  border-color: #dee2e6;
}

.reset-btn.dark {
  background: #2a2a2a;
  color: #f5f5f5;
  border-color: #404040;
}

.reset-btn:hover:not(:disabled) {
  background-color: var(--kpr-l);
  color: #ffffff;
  border-color: var(--kpr-l);
}

.reset-btn.active {
  background-color: var(--kpr-l);
  color: #ffffff;
  border-color: var(--kpr-l);
}

.reset-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.search-input {
  width: 180px;
  min-width: 150px;
}

.rows-select.light,
.search-input.light {
  background: #ffffff;
  color: #161616;
  border-color: #dee2e6;
}

.rows-select.dark,
.search-input.dark {
  background: #2a2a2a;
  color: #f5f5f5;
  border-color: #404040;
}

.default-table-container {
  border: 1px solid;
  border-radius: 15px;
  margin-bottom: 15px;
  overflow: visible;
  /* overflow-x: auto; */
  position: relative;
}

.table-container thead {
  height: 45px;
}

.default-table-container.light {
  border-color: #dee2e6;
}

.default-table-container.dark {
  border-color: #404040;
}

.default-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  transition: all 0.2s ease;
  table-layout: fixed;
  border-radius: 15px;
}

.default-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.default-table.light {
  background: #ffffff;
  color: #161616;
}

.default-table.dark {
  background: #232323;
  color: #f5f5f5;
}

.default-table th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-bottom: 2px solid;
}

.default-table thead th:first-child {
  border-top-left-radius: 15px !important;
  overflow: hidden;
}

.default-table thead th:last-child {
  border-top-right-radius: 15px !important;
  overflow: hidden;
}

/* Footer or last row */
.default-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 15px !important;
}

.default-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 15px !important;
}

.default-table.light th {
  background: #f8f9fa;
  color: #495057;
  border-bottom-color: #dee2e6;
}

.default-table.dark th {
  background: #1a1a1a;
  color: #acacac;
  border-bottom-color: #404040;
}

.default-table td {
  padding: 10px 12px;
  border-top: 1px solid #e3e3e3;
  transition: background-color 0.2s ease;
  height: 45px;
  vertical-align: middle;
}

.default-table.light td {
  border-bottom-color: #e9ecef;
}

.default-table.dark td {
  border-bottom-color: #404040;
}

.default-table.light tbody tr:hover {
  background-color: #f8f9fa;
}

.default-table.dark tbody tr:hover {
  background-color: #2a2a2a;
}

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.table-info {
  font-size: 12px;
  color: var(--clr-mode);
}

.pagination {
  display: flex;
  gap: 5px;
  margin: 0 !important;
}

.page-btn {
  padding: 6px 10px;
  border: 1px solid;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-btn.light {
  background: #ffffff;
  color: #161616;
  border-color: #dee2e6;
}

.page-btn.dark {
  background: #2a2a2a;
  color: #f5f5f5;
  border-color: #404040;
}

.page-btn:hover:not(:disabled) {
  background-color: var(--kpr-l);
  color: #ffffff;
  border-color: var(--kpr-l);
}

.page-btn.active {
  background-color: var(--kpr-l);
  color: #ffffff;
  border-color: var(--kpr-l);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/******************************************************************************/
/* Datatables
/******************************************************************************/
.no-padding {
  padding: 0 !important;
}

.dt-button {
  display: none;
}

table.dataTable tr.odd {
  background-color: #ffffff !important;
}

.dataTables_length {
  top: 0;
  position: absolute;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before {
  opacity: 0 !important;
}

table.dataTable tbody tr.selected {
  background-color: #ebf9ff !important;
}

.table td,
.table th {
  border-top: none !important;
  padding: 10px !important;
  font-size: 12px !important;
  text-transform: capitalize !important;
}

.table {
  border-radius: 10px !important;
  margin-bottom: 0px !important;
}

.page-link,
div.dataTables_wrapper div.dataTables_info {
  font-size: 14px !important;
  padding: 8px !important;
}

.page-item.active .page-link {
  background-color: #266d80 !important;
  border-color: #186478 !important;
  width: 35px;
  font-weight: 700;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f4fbff !important;
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: #ffffff !important;
}

.dataTables_wrapper .dataTables_length select {
  padding: 9px !important;
  background-color: white !important;
  border: 1px solid #e5e5e5 !important;
}

.dataTables_wrapper .dataTables_filter input {
  padding: 10px !important;
  background-color: white !important;
}

table.dataTable {
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;

}

table.dataTable thead th {
  padding: 0.75rem;
  /* or less */
  background-color: #dddddd !important;
}

table.dataTable thead th:first-child {
  border-top-left-radius: 10px !important;
  overflow: hidden;
}

table.dataTable thead th:last-child {
  border-top-right-radius: 10px !important;
  overflow: hidden;
}

/* Footer or last row */
table.dataTable tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px !important;
}

table.dataTable tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px !important;
}



.table>tbody>tr>th,
.table>tbody>tr>td,
.table>tfoot>tr>th,
.table>tfoot>tr>td {
  line-height: 1.6;
  vertical-align: middle !important;
}

.table>thead>tr>td,
.table>thead>tr>th {
  padding: 9px !important;
  height: 25px !important;
  vertical-align: middle !important;
}



.zindx-t {
  z-index: 10;
}

.strike {
  text-decoration: line-through;
}

/* Datatable View Icon ********************************************************/
.dt-vi {
  height: 25px;
  opacity: 0.8;
  cursor: pointer;
}

.dt-vi-2 {
  height: 30px;
  opacity: 0.8;
  cursor: pointer;
  margin-left: 5px;
}

.dt-vi-2:hover,
.dt-vi:hover {
  opacity: 1;
}

.dt-dl {
  height: 25px;
  opacity: 0.5;
  cursor: pointer;
  margin-left: 5px;
}

.dt-dl:hover {
  opacity: 1;
}

/* line height *****************************************************************/
.l-h {
  line-height: 1.5;
}

.l-h-12 {
  line-height: 1.2;
}

.l-h-17 {
  line-height: 1.7;
}

/* Width **********************************************************************/
.w-f {
  width: 100% !important;
  height: fit-content;
}

.w-d {
  border: none;
  background-color: transparent;
}

.expr {
  font-size: 13px !important;
}

.mob-s-i {
  display: none;
}

.mob-mh {
  display: none;
}

.d-inb {
  display: inline-block !important;
}

/******************************************************************************/
/* Global Wrapper
/******************************************************************************/
.w-g,
.w-g-str,
.w-g-indx {
  display: flex;
  padding-top: 70px;
  margin-bottom: 45px;
  justify-content: center;
  height: auto;
  padding-bottom: 45px !important;
}

.w-gset {
  display: flex;
  margin-bottom: 45px;
  justify-content: center;
  height: auto;
  padding-bottom: 45px !important;
}

.w-g-lindx {
  display: flex;
  padding-top: 70px;
  justify-content: center;
  margin-bottom: 45px;
}

.w-g-h {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.w-igw {
  display: flex;
  margin-bottom: 15px;
  justify-content: center;
}

.prfl-carsl {
  background-color: #fff;
}

/******************************************************************************/
/* Flex Generic
/******************************************************************************/
.flx-fd-rpnsv {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

.flx {
  display: flex;
  flex-wrap: nowrap;
}

.flxwib {
  display: -webkit-inline-box !important;
}

.mob-flx {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flxw {
  display: flex;
  flex-wrap: wrap;
}

.fs {
  justify-content: flex-start;
}

.fe {
  justify-content: flex-end;
}

.sa {
  justify-content: space-around;
}

.sb {
  justify-content: space-between;
}

.ctr {
  justify-content: center;
}

.fd-c {
  flex-direction: column;
}

.fd-cr {
  flex-direction: column-reverse;
}

.fd-rr {
  flex-direction: row-reverse;
}

.tac {
  text-align: center !important;
}

.tar {
  text-align: right !important;
}

.tal {
  text-align: left !important;
}

.fl-r {
  float: right !important;
}

/******************************************************************************/
/* Position
/******************************************************************************/
.abslt {
  position: absolute !important;
}

.sticky {
  position: sticky !important;
}

.abslt-rel {
  position: absolute;
}

.fxd {
  position: fixed;
}

.fgap-5 {
  gap: 5px;
}

.fgap-10 {
  gap: 10px;
}

.fgap-15 {
  gap: 15px;
}

.fgap-20 {
  gap: 20px;
}
/******************************************************************************/
/* Cursor
/******************************************************************************/
.crsr-p {
  cursor: pointer;
}

/******************************************************************************/
/* Cards
/******************************************************************************/
.c {
  border: 1px solid var(--gry-m);
  background-color: var(--w);

}

.c-alt {
  border: 1px solid var(--gry-m);
  background-color: var(--w);
}

.dsh-g {
  border: 1px dashed #40b75b;
  background-color: #d3ffdd;
  border-radius: 0 0 10px 10px;
}

.solid-g {
  border: 1px solid #40b75b;
  background-color: #d3ffdd;
}

.dsh-r {
  border: 1px dashed #b74040 !important;
  background-color: #ffd3d3 !important;
  border-radius: 0 0 10px 10px;
}

.dsh-g2 {
  border: 1px dashed #40b75b;
  background-color: #d3ffdd;
  border-radius: 0 0 10px 0;
}

.dsh-b {
  border: 1px dashed #36c7cc;
  background-color: #bef8fc;
  border-radius: 0 0 10px 0;
}

.dsh-gry {
  border: 1px dashed #bdbdbd;
  background-color: #f5f5f5;
}

.cbrdrtb {
  border-top: 1px solid var(--gry-m);
  border-bottom: 1px solid var(--gry-m);
  background-color: var(--w);
  cursor: pointer;
}

.c-kl {
  border: 1px solid var(--kpr-l);
  color: var(--kpr-l);
  background-color: var(--w);
  cursor: pointer;
}

.ps-c {
  width: 19% !important;
}

.csh {
  box-shadow: 0px 0px 6px var(--gry-m);
}

.nshdw {
  box-shadow: none !important;
}

.hvr-shdw {
  box-shadow: none;
}

.hvr-shdw:hover {
  box-shadow: 0px 0px 2px #00000030 !important;
}

.c32p {
  width: 31.5%;
  height: 100%;
  margin: 7.5px;
  padding: var(--padd-c);
}

.ch {
  width: 100%;
  height: 44px;
}

.ch a {
  margin-top: 8px;
  font-size: 18px;
}

.c75x {
  width: 75px;
  height: 75px;
  color: var(--gry-d);
  border: 1px dashed var(--gry-m);
  border-radius: 10px;
  text-align: center;
  font-size: var(--fnt-st);
  font-weight: lighter;
  padding: 5px;
  cursor: pointer;
}

.c75x img {
  height: 50px;
  width: 60px;
  border-radius: 5px;
  object-fit: cover;
  margin-bottom: 3px;
  cursor: pointer;
}

.c75x:hover {
  border: 1px dashed var(--g-vd);
}

.c75x p {
  font-size: 12px;
  font-weight: 400;
}

.img-up {
  width: 110px;
  height: 110px;
  color: var(--gry-d);
  border: 1px solid var(--gry-m);
  border-radius: 10px;
  text-align: center;
  padding: 10px;
}

.img-up img {
  width: 85px;
  height: 85px;
}

.img-up:hover {
  border: 1px solid var(--g-vd);
}

.c120x p {
  font-size: 14px;
  font-weight: 400;
  color: var(--g-vd);
}

.trnd-clr {
  top: -4px;
  color: var(--o);
  font-size: var(--fnt-sst);
}

.kt {
  float: left;
  font-weight: 600;
}

.kt img {
  height: 25px;
  margin-top: -5px;
}

.trnd {
  top: 8px;
  padding-left: 10px;
}

.h-hr {
  width: 853px;
  height: 5px;
  background-color: var(--kpr-d);
}

.hvr-shw {
  transition: opacity 0.15s linear;
  position: absolute;
  opacity: 0;
  z-index: 10;
}

.hvr-shw:hover {
  transition: opacity 0.15s linear;
  opacity: 1;
}

.pos-shw {
  position: absolute;
  z-index: 10;
}

/******************************************************************************/
/* Buttons
/******************************************************************************/

.ae-btn-e a {
  color: var(--0);
  font-family: "keeppeer" !important;
}

.blurry {
  filter: blur(3px);
}

.deals span {
  font-size: 30px;
  font-family: "Keeppeer";
}

.btn-prfl {
  position: fixed;
  width: 140px;
  height: 45px;
  background-color: var(--o);
  z-index: 12;
  border: none;
  border-radius: 50px 0 0 50px;
  right: 0;
  bottom: 70px;
  opacity: 0.9;
}

.shw-prfl {
  display: none;
}

.shw-itm {
  display: block;
}

/* Buttons - Colors ***********************************************************/
.grey a {
  color: var(--g-vd) !important;
}

.grey a:hover {
  color: var(--w) !important;
  background-color: var(--g-vd) !important;
}

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

.kpr {
  color: var(--kpr-d) !important;
}
.scs-btn-kl button {
  color: var(--kpr-l) !important;
  border: 1px solid var(--kpr-l) !important;
  width: 100px;
  height: 45px;
  border-radius: 10px;
  background-color: var(--w);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 15px;
}

.scs-btn button {
  color: var(--g) !important;
  border: 1px solid var(--g) !important;
  width: 100px;
  height: 45px;
  border-radius: 10px;
  background-color: var(--w);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 15px;
}
.scs-btn button:hover {
  color: var(--w) !important;
  background-color: var(--g) !important;
}

.scs-btn-kl button:hover {
  color: var(--w) !important;
  background-color: var(--kpr-l) !important;
}


.wrn-btn span,
.scs-btn span {
  font-family: "Gicons";
}

.wrn-btn button {
  color: var(--r) !important;
  border: 1px solid var(--r) !important;
  width: 100px;
  height: 45px;
  border-radius: 10px;
  background-color: var(--w);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 15px;
}

.wrn-btn button:hover {
  color: var(--w) !important;
  background-color: var(--r) !important;
}

.g-btn-rnded button,
.g-btn-rnded2 button {
  font-family: "Gicons";
  color: var(--kpr-d);
  width: 35px;
  height: 35px;
  border-radius: 50px;
  border: 1px solid var(--kpr-d);
  background-color: #fff;
  position: absolute;
  right: 10px;
  opacity: 0.8;
}

.g-btn-rnded2 button {
  top: 0px !important;
}

.g-btn-rnded2 button :hover,
.g-btn-rnded button:hover {
  opacity: 1;
  background-color: #fff;
}

.g-btn-rnded,
.g-btn-rnded2 {
  z-index: 2;
  position: absolute;
  right: 0;
}

#dashboard,
#banks,
#taxes,
#agriculture,
#pointsales,
#reciepts,
#customers,
#appointments,
#logistics,
#purchase-orders,
#suppliers,
#employees,
#employeesid,
#attendance,
#benefits,
#advances,
#charges,
#payroll,
#store,
#projects,
#assets,
#recievables,
#billing,
#payables,
#expenses,
#inventory,
#services,
#manufacture,
#costing,
#warehouse,
#returns,
#logins,
#records,
#advertise,
#trialbalance,
#incomestatement,
#cashflow,
#balancesheet,
#dailysales,
#dailyexpenses,
#noaccess,
#pdashboard,
#psettings,
#cart,
#purchse,
#pbills,
#job,
#finder,
#resume {
  display: inline-block;
}

.sbr-slctd {
  background-color: var(--kpr-l);
  padding: 8px;
  border-radius: 5px;
  color: #fff !important;
}

.sbr-nslctd {
  background-color: #fff0;
  padding: 8px;
  border-radius: 5px;
  color: var(--km) !important;
}

.sbr-nslctd:hover {
  background-color: var(--gry-m);
}

.odd {
  background-color: #dff0ff;
}

.even {
  background-color: #ffffff;
}

/******************************************************************************/
/* Slider ON/OFF
/******************************************************************************/
.switch,
.switch2,
.switch3 {
  display: inline-block;
  position: relative;
  width: 83px;
  height: 30px;
}

.switch input,
.switch2 input,
.switch3 input {
  display: none;
}

.slider,
.slider2,
.slider3 {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  left: 0;
  border-radius: 34px;
  background-color: var(--gry-d);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  cursor: pointer;
}

.slider:before,
.slider2:before,
.slider3:before {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.2s;
}

input:checked+.slider,
input:checked+.slider2,
input:checked+.slider3 {
  background-color: var(--g);
}

input:focus+.slider,
input:focus+.slider2,
input:focus+.slider3 {
  box-shadow: 0 0 1px var(--kpr-l);
}

input:checked+.slider:before {
  -ms-transform: translateX(55px);
  -webkit-transform: translateX(55px);
  transform: translateX(55px);
}

.slider:after,
.slider2:after,
.slider3:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 60%;
  color: white;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  transform: translate(-50%, -50%);
}

input:checked+.slider:after {
  content: "";
  left: 40%;
}

/******************************************************************************/
.switch2 {
  width: 120px !important;
}

input:checked+.slider2:before {
  -ms-transform: translateX(90px);
  -webkit-transform: translateX(90px);
  transform: translateX(90px);
}

.slider2:after {
  content: "Non Keeppeer" !important;
}

input:checked+.slider2:after {
  content: "Keeppeer User" !important;
  left: 40%;
}

/******************************************************************************/
.switch3 {
  width: 100px !important;
}

input:checked+.slider3:before {
  -ms-transform: translateX(70px);
  -webkit-transform: translateX(70px);
  transform: translateX(70px);
}

.slider3:after {
  content: "Customer" !important;
}

input:checked+.slider3:after {
  content: "Supplier" !important;
  left: 40%;
}

/******************************************************************************/
/* Rounded Input
/******************************************************************************/
.rnd-in {
  height: 50px !important;
  border-radius: 50px !important;
  box-shadow: 1px 2px 5px var(--gry-d);
  border: none;
  margin: 3px;
}

/******************************************************************************/
/* PopUp
/******************************************************************************/
.print-pos,
.pause-pos,
.void-pos {
  z-index: 1;
  display: none;
  position: absolute;
  left: 190px;
  width: 600px;
  height: 450px;
  overflow: auto;
  border: 3px solid var(--o);
  background-color: #fff;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.2);
}

.dis-pos {
  z-index: 1;
  display: none;
  position: absolute;
  left: 271px;
  width: 345px;
  height: 380px;
  border: 3px solid var(--o);
  background-color: #fff;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.2);
}

.pop-h {
  margin: 0 10px;
  padding: 10px 0;
  border-bottom: 1px solid #e5e5e5;
}

.pop-b {
  height: 390px;
  margin: 15px 10px 10px 10px;
  border-bottom: 1px solid #e5e5e5;
}

.empty-b {
  height: auto;
  top: 3px;
  min-height: 50px;
}

.pop-t a {
  margin-top: 3px;
}

.pop-c span {
  color: grey;
  font-family: "Gicons";
  font-size: 20px;
  cursor: pointer;
}

.pop-c span:hover {
  color: red;
  font-size: 20px;
  cursor: pointer;
}

.pop-f {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
}

/******************************************************************************/
/*  Splash Screen
/******************************************************************************/
#loader, #loading-screen {
  z-index: 1;
  position: absolute;
  top: 500%;
  left: 50%;
  width: 100px;
  width: 100px;
  height: 100px;
  height: 100px;
  margin: -30px 0 0 -50px;
  border: 2px solid #e5e5e5;
  border-top: 2px solid #026a87;
  border-radius: 50%;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Add animation to "page content" */

.animate-bottom {
  position: relative;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: animatebottom;
  animation-name: animatebottom;
}

@-webkit-keyframes animatebottom {
  from {
    bottom: -50px;
    opacity: 0;
  }

  to {
    bottom: 0px;
    opacity: 1;
  }
}

@keyframes animatebottom {
  from {
    bottom: -50px;
    opacity: 0;
  }

  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes modalSlideIn {
  from {
    transform: scale(0.95) translateY(-20px);
    opacity: 0;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

#splash {
  display: none;
}

.close {
  z-index: 1050 !important;
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  color: #fff !important;
  opacity: 1 !important;
  font-size: 35px !important;
  cursor: pointer;
}

.cls-prd {
  z-index: 1050 !important;
  position: absolute;
  top: 0;
  right: 0;
  color: #ffffff !important;
  font-size: 30px !important;
  cursor: pointer;
}

.fp-l {
  padding: 0 15px;
}

.fp-e {
  padding: 0 15px;
}

.md-r {
  width: 400px !important;
}

.ps-scm {
  width: 350px;
  height: 100% !important;
  background-color: #fff;
  left: 0;
}

/* MODAL - Image / Video Uploader**********************************************/
.g-ivut {
  margin-top: 3px;
  font-size: 16px;
  font-weight: bold;
}

.g-ivu {
  position: absolute;
  top: 5px;
  right: 5px;
  float: right;
}

.g-ivu label {
  padding: 8px;
  border: 1px solid #aeaeae;
  border-radius: 20px;
  cursor: pointer;
}

.browse-image {
  display: none;
  position: relative;
  width: 1px;
  height: 1px;
}

.g-ivus textarea {
  width: 100%;
  min-height: 50px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #aeaeae;
  border-radius: 20px;
}

.g-ivup {
  width: 100%;
  min-height: 100px;
  padding: 5px;
  border: 1px dashed #aeaeae;
  border-radius: 20px;
  text-align: left;
}

.g-ivup2 {
  width: 100%;
  min-height: 100px;
  padding: 5px;
  border: 1px dashed #aeaeae;
  border-radius: 20px;
  text-align: left;
}

.m-img img {
  margin: 5px;
  border-radius: 10px !important;
}

h5 {
  margin-bottom: 0 !important;
}

/******************************************************************************/
/* Search Bar
/******************************************************************************/
#search-text-input {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}

.l-s {
  float: left;
  flex: 3;
}

.l-s span {
  font-family: "Gicons";
  font-size: 30px;
  position: absolute;
  color: var(--gry-d);
  right: 10px;
  margin-top: 3px;
  cursor: pointer;
}

.l-s span:hover {
  color: var(--g-vd);
}

.l-s #search-text-input {
  width: 100%;
  height: 35px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid #026a87;
  border-radius: 50px;
  outline: 1px;
  outline-color: #000;
  text-align: left;
  font-size: 16px;
  font-style: oblique;
  font-weight: 400;
}

.lsb {
  position: relative;
  width: 35px;
  height: 35px;
  float: left;
  padding: 3px;
  border-top: 2px solid #026a87;
  border-right: 2px solid #026a87;
  border-bottom: 2px solid #026a87;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  background-color: #fff;
  text-align: center;
  cursor: pointer;
}

.lsb i {
  margin-top: 3px;
  margin-right: 3px;
  opacity: 0.3;
  font-size: 20px;
}

.lsb i:hover {
  opacity: 1;
}

.landing_top_search {
  position: absolute;
  top: 6px;
  float: left;
  margin-left: 250px;
  font-size: 13px;
}

.landing_top_search a {
  margin-right: 4px;
  color: #fff;
}

.landing_top_search a:hover {
  color: #ffffff;
}

.itm-hvr {
  transition: opacity 0.15s linear;
  opacity: 0;
}

.itm-hvr:hover {
  transition: opacity 0.15s linear;
  opacity: 1;
}

/* Nav Search - Logged In *****************************************************/
.hs {
  position: relative;
  width: 420px;
  height: 55px;
  float: left;
  padding: 8px 10px 10px 5px;
  line-height: 35px;
}

.hs #search_button {
  width: 120px;
  height: 35px;
  float: left;
  padding-left: 10px;
  border: 1px solid #e6e6e6;
  border-right-color: white;
  border-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  background-color: white;
  outline: 1px;
  font-style: oblique;
  cursor: pointer;
}

.hs #search-text-input {
  width: 100%;
  height: 40px;
  padding-left: 10px;
  border: 1px solid #e6e6e6;
  border-radius: 50px;
  outline: 1px;
  outline-color: #000;
  text-align: left;
}

.resultDisplay {
  width: 100%;
}

.resultDisplay a {
  float: none;
}

.bghvr:hover {
  background-color: #ececec !important;
}

.liveSearchProfilePic img {
  height: 40px;
  width: 40px;
  border-radius: 5px;
  border: 1px solid #e3e3e3;
}

#grey {
  color: #8c8c8c;
  margin-top: -20px;
}

.liveSearchText {
  width: 100%;
}

.liveSearchText p {
  margin-top: -25px;
  margin-left: 10;
  font-size: 12px;
}

.search-results {
  margin-top: 10px;
  z-index: 100;
}

.search-results-footer {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  z-index: 20;
  position: absolute;
  background-color: var(--w);
  box-shadow: 0px 0px 10px #d3d3d3;
}

.search_result {
  height: 10px;
  padding: 10px;
}

.button-holder {
  top: 10px;
  right: 10px;
  z-index: 0;
  position: absolute;
}

.button-holder span:hover {
  color: var(--g-vd);
}

#search-text-input {
  transition: width 0.3s;
}

/******************************************************************************/
/* Accounting Enteties Cards
/******************************************************************************/
.ae {
  width: 1000px;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid var(--gry-l);
  background-color: var(--w);
  cursor: default !important;
  box-shadow: 0px 0px 10px #00000020;
}

.ae-c {
  width: 100%;
  height: fit-content;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid var(--gry-m);
  background-color: #efefef;
  box-shadow: 0px 0px 6px #00000020;
}

.ae-t,
.ae-sst,
.ae-s {
  color: var(--kpr-d);
  text-transform: uppercase;
  font-weight: 900;
}

.ae-t {
  font-size: 20px;
}

.ae-sst {
  font-size: var(--fnt-sst);
}

.ae-s {
  font-size: var(--fnt-s);
  margin-bottom: 0 !important;
}

/* Input Accounting Generic Date Picker ***************************************/
.ae-dw {
  position: absolute;
  left: 90px;
  width: 370px !important;
}

.ae-dw button {
  width: 38px;
  border: 0.5px solid #d3d3d3;
  background-color: #fff;
  cursor: pointer;
}

.ae-dw span {
  margin: 0 5px;
  color: #a5a5a5;
  font-size: 20px;
}

/* Input Accounting Generic ***************************************************/
.ae-td {
  display: flex;
  position: relative;
  width: 100%;
  flex-wrap: wrap;
}

.ae-td a {
  font-size: 14px;
  font-weight: 400;
}

.ae-td input {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 15px;
  padding: 8px;
  border: none;
  border-bottom: 1.5px solid #d3d3d3;
  background-color: inherit;
}

.ae-td input {
  appearance: none;
  -webkit-appearance: none;
  outline: 0px !important;
  box-shadow: none !important;
}

.ae-td select {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 15px;
  padding: 8px;
  border: none;
  border-bottom: 1.5px solid #d3d3d3;
  background-color: inherit;
}

.ae-td select:valid,
.ae-td select:hover,
.ae-td select:focus {
  border-bottom: 1.5px solid #026a87;
}

.ae-td label {
  position: absolute;
  top: 10px;
  left: 0;
  color: #999;
  transition: 0.2s;
  pointer-events: none;
}

.ae-td select:focus~label,
.ae-td select:hover~label,
.ae-td select:valid~label {
  top: -8px;
  color: var(--kpr-d);
  font-size: 14px;
}

.ae-td [type="submit"] {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  color: white;
  border: 2px solid #28a745;
  background-color: #28a745;
  font-weight: 600;
  cursor: pointer;
}

.ae-td [type="submit"]:hover {
  border-bottom: 2px solid #00841e;
  background-color: #00841e;
}

.ae-td input:focus~label,
.ae-td input:hover~label,
.ae-td input:valid~label {
  top: -8px;
  color: #026a87;
  font-size: 14px;
}

.ae-td input:focus,
.ae-td input:hover,
.ae-td input:valid {
  border-bottom: 1.5px solid #026a87;
}

.ae-td span {
  font-family: "Gicons";
  font-size: 18px;
}

.ae-e {
  width: 550px;
  height: 100%;
  margin-right: 10px;
  padding: 5px 15px 15px 15px;
  cursor: default !important;
}

.ae-ed {
  width: 50%;
  height: 100%;
  cursor: default !important;
}

.input-group {
  z-index: 1;
  display: flex !important;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap !important;
}

.form-control {
  height: 40px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  margin-left: 0px !important;
  padding: 0 0 !important;
  border: 0px solid transparent !important;
}

.form-select {
  padding: 10px;
  height: 40px;
  font-size: 14px !important;
  border: 1px solid var(--gry-m);
  border-radius: 5px;
}

/******************************************************************************/
/* Input Generic 2
/******************************************************************************/
.ae-mbw {
  display: flex;
  width: 100%;
  height: 200px;
  justify-content: space-between;
}

.ae-mp {
  width: 100%;
  margin-top: 10px;
}

.ae-ml {
  width: 270px;
}

.ae-cv {
  width: 49%;
}

.cv {
  height: 270px !important;
}

.cvr {
  width: 280px !important;
}

.cvsb {
  position: absolute;
  right: 0;
  bottom: 0;
}

.cvl {
  width: 660px !important;
}

.ae-mta {
  display: flex;
  width: 695px;
}

.ae-mtad {
  display: flex;
}

.ae-pdng {
  width: 100px !important;
  margin-left: 15px;
}

.ae-pdnx {
  width: 150px !important;
  margin-left: 15px;
}

.ic input {
  text-align: center;
}

.icu select {
  border-bottom: 1.5px solid #026a87 !important;
}

.ae-da span {
  font-family: "Gicons";
  font-size: 18px;
}

/******************************************************************************/
/* Header Tab - Admin, Peer, Message, Notif, Order, Cart
/******************************************************************************/
.ht-cont {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  width: 345px;
  height: 100%;
  padding: 70px 10px 15px 10px;
  border: 1px solid #d1d1d1;
  background-color: #f3f3f3;
}

.header-tab-arrow {
  z-index: 2;
  position: fixed;
  top: 54;
  width: 0;
  height: 0;
  border-top: 10px solid #026a87;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.header-separator {
  position: relative;
  float: right;
  color: #004080;
  font-family: "keeppeer";
  font-size: 25px;
  line-height: 35px;
  margin-left: 10px;
  margin-right: 8px;
}

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

.tab-settings {
  margin-top: 0px;
}

.ui {
  position: relative;
  width: 150px;
  height: 35px;
  padding: 5px 5px 5px 8px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  font-size: 24px;
  cursor: pointer;
  border-radius: 30px;
  text-align: left;
  color: #999;
}

.t-n-er {
  height: 50px;
  padding: 15px;
  margin-top: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 50px;
  font-weight: 400;
  text-align: center;
}

.t-n-ep {
  height: auto;
  padding: 15px;
  margin-top: 15px;
  border: 1px solid #e5e5e5;
  border-radius: 50px;
  font-weight: 400;
  text-align: center;
}

.ui a {
  font-family: "keeppeer";
}

.ui p {
  font-size: 16px;
  margin: 0 0 0 4px;
  font-weight: 400;
  padding: 2px 0;
}

.ui:hover {
  color: #007bff;
}

.ui input {
  cursor: pointer;
}

.ui [type="file"] {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
}

.w-t {
  z-index: 4;
  position: relative;
  width: 100%;
  height: 35px;
  background-color: #fff0;
}

.t-s {
  font-family: "Gicons";
  height: 25px;
  width: 27px;
  border-radius: 20px;
  text-align: center;
}

.w-t-gc {
  height: 645px;
  overflow-y: auto;
}

.w-tf {
  position: absolute;
  bottom: -50px;
  width: 100%;
  height: 55px;
  background-color: white;
}

.tf {
  margin-top: 5px;
  text-align: center;
  font-size: 12px;
}

.w-ac {
  display: flex;
  height: auto;
  margin-top: 55px;
  flex-wrap: wrap;
  justify-content: center;
}

.w-ac-gd,
.w-ac-gt {
  display: flex;
  height: auto;
  margin-top: 15px;
  justify-content: center;
}

.g-pb button {
  padding: 6px;
  color: #757474;
  border: dashed 1px #a0a0a0;
  border-radius: 30px;
  background-color: #f1f1f1;
  text-align: center;
}

.g-pb button:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

.ot-of {
  overflow: auto;
}

.tc-c {
  height: 100%;
}

.hdr-mptb {
  z-index: 3;
  top: 35px;
}

.hdr-sptb {
  z-index: 2;
  top: 96px;
}

.ordr-tc {
  padding-top: 150px;
  height: 100%;
}

.notf-tc {
  padding-top: 80px;
  height: 100%;
}

.crt-tc {
  padding-top: 40px;
  height: 100%;
}

.tab-notifications {
  width: 100% !important;
}

/******************************************************************************/
/* Landing Navbar
/******************************************************************************/
.login-l {
  z-index: 999;
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  padding: 10px;
  background-color: #effdff;
  border-bottom: 5px solid var(--kpr-d);
  display: flex;
  justify-content: center;
}

.klogo {
  float: left;
}

.inpt-log {
  display: flex;
  justify-content: space-between;
}

.landing_logo img {
  height: 25px;
  margin-top: 8px;
}

.signup {
  display: inline-block;
}

.landing_signup {
  display: inline-block;
  width: 60px;
  height: 23px;
  margin-left: -5px;
  border-radius: 8px;
  text-align: center;
}

.landing_signup a {
  display: inline-block;
  width: 68px;
  height: 34px;
  margin-top: 8px;
  margin-right: 5px;
  margin-left: -13px;
  padding: 5px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  color: #00bd2b;
}

.landing_signup a:hover {
  color: #fff;
  background: #07bd30;
}

.forgotpass {
  top: 1px;
  padding: 2px 7px;
  color: #a5a5a5;
  border: 1px solid #d3d3d3;
  border-radius: 25px;
  background-color: white;
  opacity: 0.5;
}

.forgotpass:hover {
  color: #a5a5a5 !important;
  background: #e9ecef !important;
  opacity: 1;
}

.fps {
  position: absolute;
  top: 11px;
  right: 8px;
}

.alert {
  padding: 10px 50px 10px 10px !important;
  margin: 70px 10px 10px 10px !important;
  right: 0px;
}

.loading-icon-create2 {
  position: absolute;
  right: 10px;
  transform: translateY(-50%);
  font-size: 18px;
  color: #333;
  display: none;
  z-index: 10;
  animation: spin 1s linear infinite;
}

/* Landing Navbar Tooltip *****************************************************/
[data-tooltip],
[data-tooltip2] {
  z-index: 999;
  position: relative;
  cursor: pointer;
}

[data-tooltip]:after,
[data-tooltip]:before,
[data-tooltip2]:after,
[data-tooltip2]:before {
  visibility: hidden;
}

[data-tooltip]:before {
  content: attr(data-tooltip);
  bottom: -32px;
}

[data-tooltip2]:before {
  content: attr(data-tooltip2);
  bottom: -31px;
}

[data-tooltip]:before {
  position: absolute;
  left: 50%;
  width: fit-content !important;
  margin-bottom: 0px;
  margin-left: -40px;
  padding: 5px;
  color: #e5e5e5;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #fff;
  background-color: hsla(0, 0%, 20%, 0.9);
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  z-index: 999999999999;
}

[data-tooltip2]:before {
  position: absolute;
  left: 50%;
  min-width: 150px;
  max-width: fit-content;
  height: fit-content;
  margin-top: 5px;
  top: 99%;
  margin-left: -50px;
  padding: 5px;
  color: #e5e5e5;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #fff;
  background-color: hsla(0, 0%, 20%, 0.9);
  text-align: left;
  font-size: 12px;
  line-height: 1.2;
  z-index: 99999;
}

[data-tooltip]:after,
[data-tooltip2]:after {
  content: " ";
  position: absolute;
}

[data-tooltip]:hover:after,
[data-tooltip]:hover:before,
[data-tooltip2]:hover:after,
[data-tooltip2]:hover:before {
  visibility: visible;
}

.dataTables_filter input {
  margin-left: 0em !important;
}

.table.dataTable.no-footer {
  border-bottom: 1px solid var(--gry-l);
}

.trnd-sz {
  max-height: 40px;
  min-height: 40px;
  max-width: 40px;
  min-width: 40px;
}

/* Table Tooltip **************************************************************/

.t-tltp {
  padding: 0px 5px;
  width: 16px;
  border-radius: 15px;
  top: 10px;
  margin-left: 5px;
  font-size: 10px;
  position: absolute;
  border: 1px solid #e5e5e5;
  color: var(--gry-d) !important;
}

/* Login ******************************************************************** */
input[type="email"],
input[type="password"],
input[type="text"] {
  border-radius: 5px;
  font-size: 14px;
}

.user_error {
  float: left;
  margin-top: -1px;
  margin-left: 10px;
  font-size: 10px;
}

.login input[type="email"],
.login input[type="password"],
.login input[type="text"] {
  width: 180px;
  height: 35px;
  color: #000;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}

.login input[type="submit"] {
  display: inline-block;
  width: 70px;
  height: 35px;
  color: var(--kpr-l);
  border: 2px solid var(--kpr-l);
  border-radius: 20px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.login input[type="submit"]:hover {
  color: #fff;
  background: var(--kpr-l);
}

.login input:focus {
  outline: none !important;
}

.login input[placeholder="password"],
.login input[placeholder="username"] {
  color: #00abff;
  font-size: 15px;
}

/******************************************************************************/
/* Landing Navbar2
/******************************************************************************/
.l-n {
  z-index: 996;
  display: flex;
  position: absolute;
  bottom: -18px;
  width: 100%;
  height: 75px;
  padding-right: 20.3%;
  padding-left: 20%;
}

/* Cart ********************************************************************** */
.l-cart {
  margin-top: -6px;
  margin-left: 5px;
  font-family: "keeppeer";
}

.l-cart a {
  top: 6px;
  color: #026a87;
  font-size: 35px;
}

/******************************************************************************/
/* Main Navbar - Logged In
/******************************************************************************/
.w-mh {
  z-index: 3;
  position: fixed;
  top: 0;
  width: 100%;
  height: 55px;
  background-color: #fff;
  box-shadow: 2px 2px 5px #01607a40;
}

.mh-w {
  width: 365px;
}

.w-is {
  z-index: 1000;
  margin-left: 50px;
  top: 0;
  visibility: hidden !important;
  position: fixed;
}

.mh-ai {
  width: auto;
  background-color: var(--kpr-d);
  height: 55px;
  top: 0px;
}

.mh-i-g,
.mh-i {
  width: 50px;
  padding: 9;
  background-color: var(--kpr-d);
}

.mh-i img {
  width: 30px !important;
  height: 35px !important;
}

.kpr-nm {
  color: var(--w);
  font-family: "Quenda";
  font-size: 20px;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 20px;
  padding-top: 18px;
}

.kpr-lgo img {
  width: 130;
  margin: 0 9px 0px 6px;
  top: 12px;
}

.kpr-lgo-l img {
  width: 130px;
  top: 5px;
}

.kpr-fnt img {
  width: 30px;
}

.kpr-fnt-m {
  margin: 15px 5px 5px 10px;
}

.sbr-fnt img {
  width: 16px;
  margin-top: 9px;
}

.kpr-fnt-h img {
  width: 20px;
  margin-top: 2px;
}

.mh-i p {
  color: var(--kpr-d);
  font-family: "Keeppeer";
  font-size: 25px;
  cursor: pointer;
}

a:not([href]):not([tabindex]) {
  color: var(--kpr-d);
}

.mh-i-g a {
  color: #1b98bb !important;
  font-family: "Keeppeer";
  font-size: 25px;
  cursor: pointer;
}

.mh-m {
  width: 107px;
  height: 55px;
  text-align: center;
  padding: 8px;
  background-color: var(--w);
}

.icnb {
  width: 95px;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--kpr-d);
  border-radius: 40px;
  cursor: pointer;
  background-color: #fff;
}

.mh-i:hover {
  border-radius: 5px;
  background-color: #004859 !important;
}

.icnb span {
  font-family: "Keeppeer";
  font-size: 24px;
  color: var(--kpr-d);
}

.icnba p,
.icnb p {
  font-weight: 400;
  color: var(--kpr-d);
  margin: 3px 0 0 0;
  font-family: "lato" !important;
  font-size: 16px !important;
}

.mh-m a {
  color: #026a87;
  font-family: "Keeppeer";
  font-size: 25px;
  cursor: pointer;
}

/* Logo ********************************************************************** */
.logowrapper {
  position: relative;
  width: 100%;
  background-color: var(--kpr-d);
}

.logo img {
  height: 25px;
  margin: 15px 15px 15px 15px;
}

/* Notification Badge ******************************************************** */
.notification-badge {
  z-index: 1000;
  position: absolute;
  padding: 1px 4px;
  color: #fff;
  border-radius: 10px;
  background-color: #e74c3c;
  text-align: center;
  vertical-align: baseline;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.secret {
  top: 100px;
}

.msg {
  top: 28px;
  left: 110px;
}

/* .notif {
  top: 30px;
  left: 10px;
} */

.peers {
  top: 28px;
  left: 125px;
}

.orders {
  top: 28px;
  left: 200px;
}

.cart {
  top: 28px;
  left: 245px;
}

/* Navigation Avatar ********************************************************* */
.usr-dt {
  position: relative;
  float: right;
  line-height: 35px;
  cursor: pointer;
}

.avatar-pic img {
  height: 35px;
  width: 35px;
  object-fit: cover;
  border-radius: 35px;
}

tbody th tr .avatar-pic img {
  height: 30px;
}

.avatar-name {
  width: 160px;
  height: 100%;
  margin-left: 5px;
  color: #004080;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hcs {
  display: flex;
  position: relative;
  width: 43%;
}

.cog {
  top: 6px;
  left: 6px;
}

.qr {
  top: 4px;
  left: 4px;
}

/* Settigns PopUp**************************************************************/
.table-dorp {
  position: relative;
  width: 35px;
  height: 35px;
  float: right;
  border: 1px #e5e5e5;
  border-radius: 10px;
}

.table-dorp span {
  font-family: "Gicons";
  font-size: 18px;
  z-index: -1;
}

.table-dorp a:hover {
  background-color: #f1f1f1;

}

.btnrotate:hover .svg-icon {
  animation: spin 2s linear infinite;
}

.btnrotate-w:hover .svg-icon {
  animation: spin 2s linear infinite;
  mix-blend-mode: color-dodge;
  filter: brightness(10);

}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.fadein-03 {
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.btn-blend-cd:hover .svg-icon {
  mix-blend-mode: color-dodge;

}

.btn-svg-clr-w {
  filter: brightness(0) saturate(100%) invert(100%);
}

.svg-hvr-w:hover {
  filter: brightness(0) saturate(100%) invert(100%);
}

.btn-svg-clr-g {
  filter: brightness(0) saturate(100%) invert(53%) sepia(97%) saturate(746%) hue-rotate(88deg) brightness(92%) contrast(91%);
}

.btn-svg-clr-kl {
  filter: brightness(0) saturate(100%) invert(27%) sepia(86%) saturate(1732%) hue-rotate(165deg) brightness(93%) contrast(101%);
}

.btn-svg-clr-gry {
  filter: brightness(0) saturate(0) opacity(0.2);
}

.btn-svg-clr-gry:hover {
  filter: brightness(0) saturate(0) opacity(0.6);
}

.btn-svg-clr-dgry {
  filter: brightness(0) saturate(0) opacity(0.6);
}


.bclr-bm {
  background-color: #8bccd8 !important;
}

/* Settigns PopUp**************************************************************/
.header-settings-dropdown {
  position: relative;
  width: 35px;
  height: 35px;
  float: right;
  border: 1px #e5e5e5;
  border-radius: 10px;
}

.header-settings-dropdown span {
  font-family: "Gicons";
  font-size: 18px;
  z-index: -1;
}

.header-settings-dropdown a:hover {
  background-color: #f1f1f1;
}

.header-scanner {
  width: 35px;
  height: 35px;
  border: none;
  background-color: #fff0;
  font-size: 16px;
  cursor: pointer;
  border-radius: 50px;
  z-index: 10;
}

.header-scanner:focus,
.header-scanner:hover {
  border-radius: 50px;
  background-color: #e9ecef24;
}

.header-settings-dropbtn {
  width: 35px;
  height: 35px;
  border: none;
  background-color: #fff0;
  font-size: 16px;
  cursor: pointer;
  border-radius: 50px;
  border: 1px solid #fff;
  z-index: 10;
}

.header-settings-dropbtn:focus,
.header-settings-dropbtn:hover {
  border-radius: 50px;
  background-color: #e9ecef24;
  border: 1px solid #e5e5e5;
}

.header-settings-content {
  z-index: 1;
  display: none;
  position: absolute;
  right: 0;
  /* width: 150px; */
  margin-top: 20px;
  border-radius: 15px;
  overflow: auto;
  /* background-color: #fff; */
  box-shadow: 0px 3px 8px 0px rgb(0 0 0 / 20%);
}

#floatingDiv {
  visibility: hidden;
}

.header-settings-content a {
  display: block;
  padding: 5px;
  color: black;
  text-decoration: none;
}

.show {
  display: block !important;
}

/******************************************************************************/
/* Navigation Tabs / Arrows
/******************************************************************************/
#prsnl-tab,
#admin-tab,
#message-tab,
#notif-tab,
#order-tab,
#peer-tab,
#cart-tab {
  display: none;
  width: 325px;
  height: 100%;
  float: left;
}

.prsnl-arrow {
  left: 160px;
}

.admin-arrow {
  left: 160px;
}

.peer-arrow {
  left: 110;
}

.message-arrow {
  left: 122px;
}

.notif-arrow {
  left: 210px;
}

.order-arrow {
  left: 260px;
}

.cart-arrow {
  left: 310;
}

/******************************************************************************/
/* Admin Tab
/******************************************************************************/
.admin-table {
  margin-top: 200px !important;
}

.admin-tab {
  flex: 1;
}

.header-hub,
.header-admin-login {
  display: flex;
  position: relative;
  height: 100%;
  width: 100%;
  text-align: center;
  flex-wrap: wrap;
}

.header-hub input,
.header-admin-login input {
  width: 250px;
  height: 40px;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none !important;
  text-align: center;
  cursor: pointer;
}

.acct-l {
  margin-top: 10px;
}

.acct-l button {
  font-weight: 600;
  border-radius: 50px;
  background-color: #fff;
  text-align: center;
  cursor: pointer;
}

.actl {
  height: 40px;
  width: 90px;
  border: 1px solid #026a87;
  color: #026a87;
}

.actl:hover {
  background-color: #cfedf6 !important;
}

.actca {
  height: 40px;
  width: 150px;
  border: 1px solid var(--g);
  color: var(--g);
}

.actca:hover {
  background-color: #cefad8 !important;
}

.header-hub input:hover,
.header-admin-login input:hover {
  border: 1px solid var(--gry-d);
}

.su-ca {
  margin: 8px;
}

.date-range-wrapper {
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  position: absolute;
  left: 80px;
}

.logout_btn {
  width: 100px;
  height: 35px;
  background-color: var(--w);
  border: 2px solid var(--kpr-d);
  color: var(--kpr-d);
  border-radius: 10px !important;
  font-size: 12px;
  cursor: pointer;
  z-index: 5;
  right: 35px;
  font-size: 14;
  font-weight: 600;
  top: 0;
  border-radius: 5px;
  position: absolute;
  cursor: pointer;
  margin-right: 10;
}

.header-hub button:focus,
.header-hub button:hover,
.header-admin-login button:focus,
.header-admin-login button:hover {
  background-color: #cfedf6;
  outline: none;
}

/* User Profile ***************************************************************/
.header-admin-user {
  display: flex;
  position: absolute;
  width: 100%;
  height: 60px;
  margin-top: 45px;
  border-bottom: 1px solid #e5e5e5;
  background-color: #036780;
  z-index: 5;
  padding: 10px;
  border-radius: 35px;
}

.ha-ui img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50px;
  background-color: #ddd;
  box-shadow: 0px 0px 2px #8c8c8c;
}

.header-admin-user-wrapper {
  height: 35px;
  margin-left: 5px;
  color: white;
  text-align: left;
  line-height: 1.25;
}

.header-admin-user-name a {
  font-size: 18px;
  font-weight: 600;
}

.header-admin-user-position a {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
}

/* Items Dropdown *************************************************************/
.header-admin-items-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 110px;
  text-align: left;
}

.ovrflw {
  overflow: auto;
  overflow-x: hidden;
  height: 100%;
}

.header-admin-accounting {
  position: relative;
  width: 100%;
  height: auto;
}

.header-admin-store {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 15px;
}

.admin-group-item {
  display: block;
  position: relative;
  padding: 2px 0 0 10px;
  background-color: #fff0;
}

.admin-group-item-dropdown {
  display: flex;
  position: relative;
  padding-left: 40px;
  background-color: #fff0;
  font-size: 17px;
  font-weight: 500;
  top: -2;
}

.sidebar-dropdown-name {
  color: var(--kpr-d);
  font-size: 18px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif !important;
}

.sidebar-dropdown-name span {
  font-family: "Keeppeer";
  font-size: 36px;
  top: 3px;
}

/******************************************************************************/
/* Message Tab
/******************************************************************************/
.msg_box {
  position: fixed;
  bottom: 15px;
  width: 250px;
  border-radius: 10px;
  background: white;
  box-shadow: 0px 0px 6px #8c8c8c;
}

.msg_head {
  padding: 10px;
  border-radius: 10px 10px 0px 0px;
  cursor: pointer;
  height: 40px;
  font-size: 12px;
  font-weight: 600;
}

.msg-icns span,
.msg-close span {
  font-family: "Gicons";
  font-size: 18px;
  color: #026a87;
}

.msg-close span:hover {
  color: #dc3545;
}

.msg_body {
  height: 200px;
  padding: 15px;
  overflow: auto;
  overflow-x: hidden;
  background: white;
  font-size: 12px;
}

.msg_input {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 50px;
  border: 1px solid white;
  border-top: 1px solid #dddddd;
  font-size: 14px;
}

.msg-icns {
  height: 30px;
  padding: 7px;
  border-top: 1px solid #e5e5e5;
}

.minimize {
  float: right;
  padding-right: 5px;
  cursor: pointer;
}

.msg-left {
  position: relative;
  min-height: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
  padding: 5px;
  border-radius: 5px;
  background: #e2e2e2;
  word-break: break-all;
}

.msg-right {
  position: relative;
  min-height: 15px;
  margin-bottom: 5px;
  margin-left: 10px;
  padding: 5px;
  border-radius: 5px;
  background: #d4e7fa;
  word-break: break-all;
}

.msg-sts {
  width: 10px;
  height: 10px;
  background-color: var(--g);
  border: 1px solid var(--g);
  border-radius: 10px;
  margin: 14px 0;
}

.msg-stsso {
  width: 10px;
  height: 10px;
  background-color: var(--gry-d);
  border: 1px solid var(--gry-d);
  border-radius: 10px;
  margin: 14px 0;
}

.msg-nme {
  padding: 13px 0;
}

#sidebar-user-box {
  border-bottom: 1px solid #e5e5e5;
  padding: 5px;
  font-size: 13px;
  width: 100%;
  cursor: pointer;
}

#sidebar-user-box:hover {
  background-color: #e5e5e5;
}

#sidebar-user-box:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}

.prdsrv-flr {
  width: 215px;
}

/******************************************************************************/
/* Notification Tab
/******************************************************************************/
.w-nt-u {
  height: 52px;
  padding: 5px;
}

.nt-i img {
  width: 40px;
  height: 40px;
  float: left;
  margin-right: 5px;
  border: 1px solid #a5a5a5;
  border-radius: 40px;
}

.w-nt-d {
  height: 20px;
  float: left;
}

.nt-u {
  font-weight: 600;
}

.nt-n {
  font-size: 14px;
}

.nt-t {
  color: #a5a5a5;
  font-size: 12px;
}

/******************************************************************************/
/* Order Tab
 /******************************************************************************/
.w-t-po {
  width: 99%;
}

.w-t-cd {
  position: relative;
  height: auto;
  margin: 0px 5px 15px 0;
  padding: 8px;
  border-radius: 10px;
}

.t-i {
  margin-right: 8px;
}

.t-i img {
  width: 45px;
  height: 45px;
  border: 1px solid #a5a5a5;
  border-radius: 45px;
}

.d-uc {
  font-weight: 600;
}

.d-ac {
  margin-top: 5px;
  font-size: 12px;
}

.t-m {
  position: absolute;
  bottom: 8px;
  width: 45px;
  height: 35px;
  padding: 3px;
  border-radius: 10px;
  text-align: center;
  font-family: "keeppeer";
  font-size: 29px;
}

.w-t-pd {
  height: 220px;
  overflow-y: scroll;
}

.t-p-d {
  position: relative;
  height: auto;
  border: 2px solid var(--kpr-l) !important;
  padding: 6px;
  border-radius: 15px;
}

.tpt input {
  width: 125px !important;
  padding-left: 5px;
}

.t-dtl input {
  height: 30px;
  margin-top: 5px;
  border: 1px solid var(--gry-m);
  border-radius: 5px;
  background-color: var(--w);
  outline: none;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0px 0px 6px var(--gry-m);
}

.o-iw {
  padding: 10px 0;
  border-bottom: 1px solid #e5e5e5;
}

.o-iw:hover {
  background-color: #f8f9fa;
}

.t-pn {
  margin-bottom: 5px;
  font-size: 15px;
}

.t-pn a {
  color: var(--o);
  font-weight: 600;
}

.w-p-pqm {
  width: 200px;
  display: inline-flex;
}

.pqm-c {
  font-size: 15px;
  font-weight: 600;
}

.o-od {
  width: 100%;
}

.c-dtls {
  padding-bottom: 5px;
  border-bottom: 1px solid #e5e5e5;
}

.pqm-c p {
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 5px;
}

.pqm-c a {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 800;
}

.w-t-pp {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.t-b {
  width: 95px;
  height: 60px;
  padding: 5px;
}

.t-b button {
  width: 100%;
  height: 50%;
  margin: 2px 4px 4px 2px;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

/******************************************************************************/
/*  Cart Tab
/******************************************************************************/
.w-ctc {
  overflow-y: auto;
  height: 100%;
}

.t-ts {
  display: flex;
  margin: 10px 0;
  justify-content: space-between;
}

.t-t {
  font-size: 18px;
  font-weight: 600;
  width: 100%;

}

.w-t-os {
  position: relative;
  margin: 10px 5px 5px 0;
  background-color: var(--w);
  z-index: 5;
}

.w-os {
  display: flex;
  width: 100%;
  margin: 8px 0;
  font-weight: 600;
  justify-content: space-between;
}

.t-os {
  color: #555;
  font-size: 14px;
}

.t-v {
  font-size: 16px;
  font-weight: 600;
}

.t-v sub {
  bottom: 0px !important;
}

.pqm-ct {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 600;
}

.t-tp {
  display: flex;
  width: 100%;
  margin: 10px 0 0 0;
  justify-content: space-between;
}

.t-tp [type="text"] {
  width: 180px;
  height: 37px;
  padding: 10;
  border: 1px solid var(--gry-d);
  border-radius: 10px;
  background-color: var(--w);
  font-size: 18px;
  font-weight: 600;
}

.t-tp [type="button"] {
  width: 90px;
  border: 1px solid var(--gry-d);
  border-radius: 10px;
  font-weight: 600;
}

.t-tp [type="button"]:hover {
  color: var(--w);
  background-color: var(--g);
}

.w-kh {
  display: flex;
  position: relative;
  bottom: 0;
  margin-bottom: 10px;
  padding-right: 20.3%;
  padding-left: 20%;
  justify-content: center;
}

.mp-t {
  overflow: auto;
}

.mp-iw {
  height: auto !important;
  margin: 10px 0 0 0 !important;
  padding: 10px !important;
}

.mp-ta {
  margin-top: 8px;
}

.mp-st {
  width: 310px;
  padding-left: 20px;
  border-left: 1px dashed #e5e5e5;
}

.mp-st-d a {
  color: var(--g-vd) !important;
  font-size: 14px;
}

.mp-st-dn a {
  font-size: 16px;
  font-weight: 600;
}

.mp-cn {
  margin-bottom: 0 !important;
}

.mp {
  padding-bottom: 10px;
}

.mp-s {
  margin-top: 8px;
}

.crt-p {
  color: var(--o) !important;
  font-weight: 600;
}

.pqm-c input[type="number"]::-webkit-outer-spin-button,
.pqm-c input[type="number"]::-webkit-inner-spin-button {
  transform: rotate(90deg);
  opacity: 0 !important;
  position: absolute;
  top: -176;
  left: 40%;
  width: 30px;
  min-height: 370px;
  border: 5.5px solid !important;
  z-index: 5;
}

.crt-spnr {
  position: absolute;
  width: 100%;
  top: 8px;
  padding: 0 10px;
  z-index: 1;
}

.crt-spnr span {
  font-family: "Gicons";
  font-size: 14px;
}

#idQuantity {
  z-index: 2;
  background-color: #f1f1f100;
}

/******************************************************************************/
/* General Settings
/******************************************************************************/

.gs-h {
  margin-bottom: var(--mrgn-s);
}

.gs-h a {
  font-size: var(--fnt-st);
  line-height: 1.3;
}

.ms-fw {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 15px;
  padding: 15px;
}

/******************************************************************************/
/* Main Index
/******************************************************************************/

.indx-w {
  width: 100%;
  padding: 10px 22% 10px 22%;
  margin-bottom: 45px;
}

.indx-w2 {
  width: 100%;
  padding: 10px 15% 10px 15%;
  margin-bottom: 45px;
}

.indx-mw {
  width: 1100;
  margin-bottom: 45px;
}

.strs-ct {
  margin-top: 10px;
  width: 90px;
  height: fit-content;
  padding: 6px;
}

.strs-di {
  width: 100%;
  height: 120px;
  object-fit: contain;
}

.strs-dit {
  width: 100%;
  object-fit: contain;
}

.strs-n {
  font-weight: bold;
  height: 25px;
  margin-top: 10px;
  width: 100%;
}

.strs-rb span {
  font-family: "Keeppeer";
  font-size: 30px;
}

#username-error,
#password-error,
#token-error,
#reg_lname-error,
#reg_fname-error,
#reg_email-error,
#reg_email2-error,
#cnfrmPass-error,
#reg_password-error {
  margin-top: 5px;
  font-size: 14px;
}

/******************************************************************************/
/* Inventory
/******************************************************************************/
.i-pd {
  display: flex;
  width: 1050px;
  height: 165px;
  padding: 10px;
}

.pd-i {
  width: 150px;
  height: 100%;
  margin-right: 10px;
  padding: 5px;
  text-align: center;
}

.pd-i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pd-d {
  width: 600px;
  margin-right: 10px;
}

.pd-d-p {
  display: flex;
  justify-content: space-between;
}

.w-pd-d-s {
  margin-right: 25px;
  font-size: 14px;
}

.pd-d-s {
  margin-top: 10px;
  font-size: 14px;
}

.pd-d-s a {
  margin-bottom: 10px !important;
  font-size: 16px;
  font-weight: 600;
}

.pd-sp-t {
  margin-bottom: 5px;
  font-size: 14px;
}

.pd-sp-s {
  width: 260;
  height: 125px;
  padding: 5px;
}

.pd-sp-s a {
  line-height: 20px;
}

.i-pl {
  position: relative;
  width: 1050px;
  height: auto;
  padding: 10px;
}

.pl-b {
  z-index: 999;
  position: absolute;
  left: 185px;
}

.pl-b button a {
  margin-right: 5px;
  font-family: "keeppeer";
}

.pl-b button {
  height: 31px;
  margin-right: 10px;
  padding: 0 15px 0 15px;
  border: 1px solid #e5e5e5;
  border-radius: 30px;
  background-color: #fff;
}

.pl-bc {
  z-index: 999;
  position: absolute;
  left: 185px;
  height: 31px;
  margin-right: 10px;
  padding: 0 15px 0 15px;
  border: 1px solid #e5e5e5;
  border-radius: 30px;
  background-color: #fff;
}

.pl-bc a {
  margin-right: 5px;
  font-family: "keeppeer";
}

/******************************************************************************/
/* Payroll
/******************************************************************************/
.p-e {
  display: flex;
  width: 100%;
  height: 120px;
  padding: 10px;
}

.p-ed {
  width: 100%;
  height: 100%;
  margin-top: 2px;
  padding: 10px;
}

.s {
  margin-left: 10px;
}

.b-bd {
  display: flex;
}

td.details-control {
  width: 15px;
  height: 15px;
  background-image: url("../img/icnlx7lk9/plus.png");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

tr.shown td.details-control {
  background-image: url("../img/icnlx7lk9/minus.png");
  background-repeat: no-repeat;
}

/******************************************************************************/
/* Org Chart
/******************************************************************************/
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}

.cf:after,
.cf:before {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.w-oc {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

a:focus {
  outline: 2px dashed #f7f7f7;
}

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

.w-oc ul a {
  display: block;
  height: 70px;
  margin-bottom: -26px;
  color: #333;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 15px;
  background: #ccc;
  box-shadow: 4px 4px 9px -4px rgba(0, 0, 0, 0.4);
  text-align: center;
  text-decoration: none;
  font-size: 0.7em;
  font-weight: bold;
  -moz-transition: all linear 0.1s;
  -webkit-transition: all linear 0.1s;
  transition: all linear 0.1s;
}

@media print {
  ul a {
    border: 4px solid #000;
  }
}

@media screen and (max-width: 767px) {
  ul a {
    font-size: 1em;
  }
}

ul a span {
  display: inline-block;
  margin-right: 5px;
  font-weight: 500;
}

.administration>li>a {
  margin-bottom: 25px;
}

.director>li>a {
  width: 50%;
  margin: 0 auto 0px auto;
}

.subdirector:after {
  content: "";
  display: block;
  position: relative;
  left: 45.45%;
  width: 0;
  height: 130px;
  border-left: 4px solid #fff;
  background: red;
}

@media print {
  .subdirector:after {
    border-left: 4px solid #000;
  }
}

.departments,
.subdirector {
  position: absolute;
  width: 100%;
}

.departments>li:first-child,
.subdirector>li:first-child {
  z-index: 1;
  width: 18.59894921190893%;
  height: 64px;
  margin: 0 auto 92px auto;
  padding-top: 25px;
  border-bottom: 4px solid white;
}

@media print {

  .departments>li:first-child,
  .subdirector>li:first-child {
    border-bottom: 4px solid #000;
  }
}

.subdirector>li:first-child {
  right: 27.2%;
  float: right;
  border-left: 4px solid white;
}

@media print {
  .subdirector>li:first-child {
    border-left: 4px solid black;
  }
}

.departments>li:first-child {
  left: 27.2%;
  float: left;
  border-right: 4px solid white;
}

@media print {
  .departments>li:first-child {
    border-right: 4px solid black;
  }
}

.departments>li:first-child a,
.subdirector>li:first-child a {
  width: 100%;
}

.subdirector>li:first-child a {
  left: 25px;
}

@media screen and (max-width: 767px) {

  .departments>li:first-child,
  .subdirector>li:first-child {
    width: 40%;
  }

  .subdirector>li:first-child {
    right: 10%;
    margin-right: 2px;
  }

  .subdirector:after {
    left: 49.8%;
  }

  .departments>li:first-child {
    left: 10%;
    margin-left: 2px;
  }
}

.departments>li:first-child a {
  right: 25px;
}

.department:first-child,
.departments li:nth-child(2) {
  clear: left;
  margin-left: 0;
}

.departments:after {
  content: "";
  display: block;
  position: absolute;
  top: 130px;
  left: 9.1%;
  width: 81.1%;
  height: 22px;
  margin: 0 auto;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  border-left: 4px solid #fff;
}

@media print {
  .departments:after {
    border-top: 4px solid #000;
    border-right: 4px solid #000;
    border-left: 4px solid #000;
  }
}

@media screen and (max-width: 767px) {
  .departments:after {
    left: 0;
    width: 49.8%;
    border-right: none;
  }
}

@media screen and (min-width: 768px) {

  .department:first-child:before,
  .department:last-child:before {
    border: none;
  }
}

.department:before {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  top: -22px;
  left: 50%;
  width: 0;
  height: 22px;
  margin-left: -4px;
  border-left: 4px solid white;
}

@media print {
  .department:before {
    border-left: 4px solid black;
  }
}

.department {
  width: 18.59894921190893%;
  float: left;
  margin-bottom: 60px;
  margin-left: 1.751313485113835%;
  border-left: 4px solid #fff;
}

@media print {
  .department {
    border-left: 4px solid #000;
  }
}

.lt-ie8 .department {
  width: 18.25%;
}

@media screen and (max-width: 767px) {
  .department {
    width: 100%;
    float: none;
    margin-left: 0;
  }

  .department:before {
    z-index: 1;
    content: "";
    display: block;
    position: absolute;
    top: -60px;
    left: 0%;
    width: 0;
    height: 60px;
    margin-left: -4px;
    border-left: 4px solid white;
  }

  .department:nth-child(2):before {
    display: none;
  }
}

.department>a {
  z-index: 1;
  margin: 0 0 -26px -4px;
}

.department>a:hover {
  height: 80px;
}

.department>ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

.department li {
  height: 80px;
  padding-left: 25px;
  border-bottom: 4px solid #fff;
}

@media print {
  .department li {
    border-bottom: 4px solid #000;
  }
}

.department li a {
  z-index: 1;
  position: absolute;
  top: 48px;
  right: -1px;
  width: 90%;
  height: 60px;
  background: #fff;
  background-image: url(data:image/svg+xml);
  vertical-align: middle;
}

.department li a:hover {
  top: 39px;
  width: 95%;
  height: 80px;
  background-image: none !important;
  box-shadow: 8px 8px 9px -4px rgba(0, 0, 0, 0.1);
}

/* Department/ section colors */

.department.dep-a a {
  background: #ffd600;
}

.department.dep-b a {
  background: #aad4e7;
}

.department.dep-c a {
  background: #fdb0fd;
}

.department.dep-d a {
  background: #a3a2a2;
}

.department.dep-e a {
  background: #f0f0f0;
}

/******************************************************************************/
/* Landing Page - ADS
/******************************************************************************/
.w-lp {
  display: flex;
  justify-content: center;
}

.w-c {
  width: 950px;
}

.w-lcc {
  display: flex;
  margin-top: 15px;
  justify-content: space-between;
  padding: 10px 0px 10px 10px;
}

.w-a {
  display: flex;
  position: relative;
  height: 290px;
  margin-top: 55px;
  margin-bottom: 15px;
  padding: 20px 0 10px 0;
  box-shadow: 2px 2px 1px #e8e8e8;
  justify-content: center;
}

.w-ai {
  height: 240px !important;
}

.w-am {
  display: flex;
  position: relative;
  margin-top: 55px;
  padding: 10px 0 10px 0;
  box-shadow: 2px 2px 1px #e8e8e8;
  justify-content: center;
}

.c-ad-wh {
  width: 600px;
  height: 200px;
}

.keeppeer {
  font-family: "keeppeer" !important;
  font-size: 20px !important;
}

/* Ads 1 Fixed*****************************************************************/
.a img {
  width: 350px;
  height: 200px;
}

/* Ads 2 Carousel**************************************************************/

.carousel-item img {
  width: 100% !important;
  object-fit: cover !important;
}

.crsl-img {
  width: 300px;
  height: 100%;
}

/******************************************************************************/
/* Landing Page - Content
/******************************************************************************/
.w-fm {
  padding: 0 20%;
}

.kc {
  position: relative;
  width: 100% !important;
}

/* Wrapper Filter************************************************************** */
.w-kc-f {
  display: flex;
  height: 40px;
  margin-top: 15px;
  padding: 5px;
}

/* Filter********************************************************************** */
.fc {
  margin-left: 2px;
  flex-grow: 1;
}

.b {
  margin-top: 5px;
  margin-left: 5px;
  color: #bdbdbd;
  font-size: 20px;
  cursor: pointer;
}

.b:hover {
  color: #5f5f5f;
}

.w-cc {
  width: 100%;
  margin-bottom: 15px;
}

.lm {
  width: 100px;
  height: 30px;
  margin-top: 10px;
  padding: 5px;
  border: 1px solid #e1e1e1;
  border-radius: 30px;
  background-color: white;
  text-align: center;
  cursor: pointer;
}

.lm:hover {
  background-color: #e5e5e5;
}

/* Content Card**************************************************************** */
.w-ccc {
  display: flex;
  margin-top: 15px;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 10px 0px 10px 10px;
}

.w-mp {
  position: relative;
  width: 100%;
  height: 215px;
  margin-top: 10px;
  margin-right: 12px;
  background-color: #fff;
  box-shadow: 0px 0px 4px #d3d3d3;
}

.g-title {
  position: absolute;
  margin-top: -15px;
}

.str-l {
  width: 49%;
  height: 70px;
  margin-top: 10px;
  margin-right: 9px;
  padding: 7px;
  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
}

.str {
  width: 100%;
  height: 70px;
  margin-top: 10px;
  margin-right: 9px;
  padding: 7px;
  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
}

.str-i img {
  position: relative;
  width: 55px;
  height: 55px;
  float: left;
  border-radius: 50px;
  box-shadow: 0px 0px 2px #d3d3d3;
}

.str-s-w {
  top: 10px;
  padding-right: 10px;
  padding-left: 85px;
}

.str-r-w {
  margin-top: 8px;
  padding: 0px 10px;
}

.str-r {
  display: inline-block;
  margin-right: 3px;
  color: var(--g-vd);
  font-size: 12px;
  font-weight: 600;
}

.str-r a {
  font-family: "keeppeer" !important;
  font-size: 24px;
  font-weight: 400;
}

.str-si {
  top: -16px;
  left: 10px;
}

.str-si img {
  position: absolute;
  width: 65px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 5px #d3d3d3;
}

.str-ad {
  z-index: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 43%;
  height: 100%;
  float: right;
  overflow: hidden;
}

.str-ad img {
  height: 75px;
  clip-path: polygon(18% 0, 100% 0%, 100% 100%, 0% 100%);
  object-fit: contain;
}

.str-bn {
  font-size: var(--fnt-s);
  font-weight: bold;
}

.str-st {
  display: flex;
}

.str-bn a {
  top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.str-bn p {
  margin-top: 5px;
  color: var(--g-vd);
  font-size: var(--fnt-xs);
}

.str-d {
  float: left;
  margin-top: -3px;
}

.cc {
  min-width: 30%;
  max-width: 30%;
  padding: 5px;
  text-align: center;
  flex: 1;
}

.cc-i {
  width: 100%;
  height: 150px;
  padding: 5px;
}

.cc-i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cc-bn {
  height: 33px;
  margin: 5px 0 5px 0;
  text-align: center;
}

.cc-rc {
  margin-bottom: 5px;
}

.b-ps {
  display: inline-block;
  width: 45%;
  height: 30px;
  padding: 6px;
  color: white;
  border-radius: 30px;
  background-color: #005bbd;
  font-weight: 600;
  cursor: pointer;
}

.b-pss {
  display: inline-block;
  width: 89px;
  height: 30px;
  padding: 9px 0px;
  color: #026a87;
  border: 1px solid #026a87;
  border-radius: 30px;
  background-color: #ffffff;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.b-pss a {
  margin-right: 2px;
  font-family: "keeppeer";
  font-size: 18px;
  font-weight: lighter;
}

.b-pss:hover {
  color: #fff;
  background-color: #026a87;
}

.b-as {
  display: inline-block;
  width: 45%;
  height: 30px;
  padding: 6px;
  color: white;
  border-radius: 30px;
  background-color: #21903b;
  font-weight: 600;
  cursor: pointer;
}

.b-as:hover {
  background-color: #2cb74d;
}

/* Content Card Products*******************************************************/
.ccp-l {
  min-width: 18.9% !important;
  max-width: 18.93%;
  margin-top: 10px;
  margin-right: 10px;
  padding: 5px;
  text-align: center;
}

.ccp {
  min-width: 31.5% !important;
  max-width: 31.5%;
  margin-top: 10px;
  margin-right: 10px;
  padding: 5px;
  text-align: center;
}

.ccp-rc {
  height: 25px;
  padding: 5px;
}

fieldset {
  margin: 0;
  padding: 0;
}

.prd-mdl-crsl {
  height: 345px;
  width: 230px;
}

/****** Style Star Rating Widget *****/

.rate {
  float: left;
  height: 20px;
  padding: 0 2px;
}

.rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

.rate:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 20px;
  color: #ccc;
}

.rate:not(:checked)>label:before {
  content: "★ ";
}

.rate>input:checked~label {
  color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
  color: #ebb800;
}

.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
  color: #c59b08;
}

.ccp-r a {
  font-family: "Lato";
  font-size: 12px;
  font-weight: 600;
  top: 2px;
}

.ccp-c {
  color: #17a2b8;
  font-family: "Gicons";
}

.ccp-c a {
  font-family: "Lato";
  font-size: 12px;
  font-weight: 600;
}

.ccp-i {
  width: 100%;
  height: 150px;
}

.ccp-i img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.cc-pn {
  height: 33px;
  margin: 5px 0 5px 0;
  padding: 0 5px 0 5px;
  text-align: center;
}

.ccp-p {
  height: 30px;
}

.ccp-p-p {
  display: inline-block;
  text-decoration: line-through;
  font-size: 12px;
}

.ccp-p-s {
  float: left;
  font-size: 12px;
  font-weight: 600;
}

.ccp-p-c {
  display: inline-block;
  color: var(--o);
  font-size: 18px;
  font-weight: 600;
}

.ccp-bn {
  margin: 5px;
  padding: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  white-space: nowrap;
}

.w-ccb {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.b-ac {
  width: 40%;
  height: 30px;
  float: right;
  padding: 4px;
  color: white;
  border: none;
  border-radius: 30px;
  background-color: #21903b;
  text-align: center;
  font-family: "keeppeer";
  font-size: 20px;
  cursor: pointer;
}

.b-ac:hover {
  background-color: #2cb74d;
}

a:hover {
  color: #2196f3;
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.header {
  padding: 20px 0;
  position: relative;
  margin-bottom: 10px;
}

.header-employee {
  padding: 20px 0;
  position: relative;
  margin-bottom: 10px;
}

.header:after {
  content: "";
  display: block;
  height: 1px;
  background: #eee;
  position: absolute;
  left: 30%;
  right: 30%;
}

.header h2 {
  font-size: 3em;
  font-weight: 300;
  margin-bottom: 0.2em;
}

.header p {
  font-size: 14px;
}

#a-footer {
  margin: 20px 0;
}

.new-react-version {
  padding: 20px 20px;
  border: 1px solid #eee;
  border-radius: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  text-align: center;
  font-size: 14px;
  line-height: 1.7;
}

.new-react-version .react-svg-logo {
  text-align: center;
  max-width: 60px;
  margin: 20px auto;
  margin-top: 0;
}

.success-box {
  margin: 50px 0;
  padding: 10px 10px;
  border: 1px solid #eee;
  background: #f9f9f9;
}

.success-box img {
  margin-right: 10px;
  display: inline-block;
  vertical-align: top;
}

.success-box>div {
  vertical-align: top;
  display: inline-block;
  color: #888;
}

/* Rating Star Widgets Style */
.rating-stars ul {
  list-style-type: none;
  padding: 0;
}

.rating-stars ul>li.star {
  display: inline-block;
}

/* Idle State of the stars */
.rating-stars ul>li.star>i.fa {
  font-size: 2.5em;
  /* Change the size of the stars */
  color: #ccc;
  /* Color on idle state */
}

/* Hover state of the stars */
.rating-stars ul>li.star.hover>i.fa {
  color: #ffcc36;
}

/* Selected state of the stars */
.rating-stars ul>li.star.selected>i.fa {
  color: #ff912c;
}

/******************************************************************************/
/*  Signup Page
/******************************************************************************/
.w-su-100 {
  width: 100% !important;
  margin-top: 0px !important;
}

.w-su {
  position: relative;
  width: 600px;
  height: auto;
  margin-top: 15px;
  padding: 20px;
  border-radius: 15px;
}

.w-sui {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
}

.su-e {
  z-index: -2;
  width: 50%;
  height: 100%;
  float: right;
  padding: 25px 13.3% 15px 50px;
  background-color: #f8f9fa;
  background-position: 50% 50%;
  background-size: cover;
}

.su-p {
  z-index: -2;
  width: 50%;
  height: 100%;
  float: left;
  padding: 25px 50px 15px 13%;
  background-color: #f8f9fa;
  background-position: 50% 50%;
  background-size: cover;
}

#su-sb {
  z-index: 3;
  position: relative;
  width: 50%;
  height: 100%;
  max-height: 100%;
  margin-left: 50%;
  overflow: hidden;
}

.su-tl {
  position: absolute;
  left: 0;
  left: -100%;
  width: 200%;
  height: 100%;
}

/* Signup Form ****************************************************************/
.kbtn-su {
  display: inline-block;
  width: 100%;
}

.kbtn-su button,
.kbtn-su button {
  width: 84px;
  height: 45px;
  margin-right: 10px;
  border: 1px solid var(--g);
  border-radius: 40px;
  background-color: var(--w);
  cursor: pointer;
}

.kbtn-su button {
  width: 100%;
  margin-right: 0px !important;
  color: var(--g);
}

.kbtn-su button:focus,
.kbtn-su button:focus,
.kbtn-su button:hover,
.kbtn-su button:hover {
  color: white;
  background-color: var(--g);
}

.su-pr {
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

.su-pr div {
  position: relative;
}

.su-pr label {
  position: absolute;
  top: 10px;
  left: 0;
  color: #999;
  transition: 0.2s;
  pointer-events: none;
}

.su-pr input {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 5px;
  padding: 10px;
  border: none;
  border-bottom: 2px solid #d3d3d3;
  background-color: inherit;
}

.su-pr select {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 9px;
  border: none;
  border-bottom: 2px solid #d3d3d3;
  background-color: inherit;
  outline: none;
}

.su-pr select:focus~label,
.su-pr select:hover~label,
.su-pr select:valid~label {
  top: -12px;
  color: #026a87;
  font-size: 14px;
}

.su-pr [type="submit"] {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  color: white;
  border: 2px solid #28a745;
  background-color: #28a745;
  font-weight: 600;
  cursor: pointer;
}

.su-pr [type="submit"]:hover {
  border-bottom: 2px solid #00841e;
  background-color: #00841e;
}

.su-pr input:focus~label,
.su-pr input:hover~label,
.su-pr input:valid~label {
  top: -12px;
  color: #026a87;
  font-size: 14px;
}

.su-pr input:focus,
.su-pr input:hover,
.su-pr input:valid {
  border-bottom: 2px solid #026a87;
}

.w-sufc {
  display: flex;
  position: relative;
  height: 100%;
  flex-wrap: wrap;
}

.sufrc {
  min-width: 200px;
  max-width: 100%;
  height: 30%;
  margin: 10px;
  flex: 1;
}

.sufrc {
  min-width: 200px;
  max-width: 100%;
  height: 30%;
  margin: 10px;
  flex: 1;
}

.access p {
  margin-bottom: -10px !important;
  color: #026a87;
  font-size: 20px;
  font-weight: bold;
}

.access-label {
  margin-top: 10px;
  color: #026a87;
  font-size: 18px;
  font-weight: bold;
}


.access-sub-label {
  margin-left: 20px;
  color: #026a87;
  font-size: 16px;
  font-weight: 300;
}

.access-sub-label a,
.access-label a {
  padding: 5px;
  top: -6px;
}

.access-sub-label input {
  margin-top: 5px;
}



.access-label input {
  width: 5% !important;
}

.access-sub-label input {
  width: 5% !important;
}

.w-suf {
  display: flex;
  position: relative;
  flex-wrap: wrap;
}

.sufl {
  width: 100%;
  height: 100%;
  flex: 1;
}

.sufr {
  width: 100%;
  height: 100%;
  flex: 1;
}

.su-t {
  position: relative;
  height: 100%;
  padding: 10px;
}

/******************************************************************************/
/*  Profile Tabs / PROFILE.PHP
/******************************************************************************/

.nav {
  flex-wrap: nowrap !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  margin: 3px;
  border-radius: 50px;
  background-color: #026a87 !important;

}

.nav-pills .nav-link {
  margin: 3px;
  border-radius: 15px !important;
  background-color: white;
  box-shadow: 0px 2px 6px #ccc;
  padding: 10px;
  /* border: 1px solid #c8c8c8; */
}

.nav span {
  font-family: "keeppeer";
  font-size: 22px;
}

/* Wrapper Feed Tab Content ***************************************************/
.w-tc {
  width: 100%;
  height: auto;
}

.w-tc textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  padding: 10px;
}

.w-tc button:focus {
  outline: none;
}

.w-tc button {
  float: right;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background-color: #e5e5e5;
  cursor: pointer;
}

/* Wrapper Images Tab Content *************************************************/
.w-pt {
  margin-top: 10px;
}

.w-pt button {
  position: absolute;
  top: -36px;
  right: 70;
  font-size: 14px;
}

.w-v button {
  position: absolute;
  top: -36px;
  right: 35;
  font-size: 14px;
}

.w-s button {
  position: absolute;
  top: -36px;
  right: 0;
  font-size: 14px;
}

.w-mg {
  width: 100%;
  height: auto;
  min-height: 150px;
  margin-top: -10px;
  overflow-y: auto;
  border-top: none;
  background-color: #fff;
  border-right: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
  border-left: 1px solid #dadada;
}

#images_preview {
  display: flex;
  width: 100%;
  overflow-y: scroll;
  flex-wrap: wrap;
}

.s-prev {
  position: absolute;
  left: 0;
  width: 30%;
  height: 100%;
}

.s-next {
  position: absolute;
  right: 0;
  width: 30%;
  height: 100%;
}

.ml {
  position: fixed !important;
  top: -35px;
  left: 0;
  min-width: 350px;
  height: 105%;
}

.m-ig {
  display: table;
  top: 20%;
  left: 45%;
  width: 400px;
  height: 400px;
  clear: both;
  background-color: #fff;
}

/* Wrapper Peer Tab Content ***************************************************/
.w-prtc {
  display: flex;
  width: 100%;
  height: auto;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.w-prt {
  width: 48.7%;
  height: 175px;
  margin-top: 15px;
  padding: 10px;
  border-radius: 10px;
}

.prt-pp {
  display: inline-block;
  margin-bottom: 8px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

.prt-pp img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
}

.prt-s {
  float: right;
  text-align: center;
}

.prt-d {
  width: 80px;
  height: 25px;
  margin-bottom: 5px;
  padding: 5px;
  color: white;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  background-color: #007bff;
  font-size: 12px;
}

.prt-nt i {
  width: 25px;
  height: 25px;
  padding: 5px;
  color: white;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  background-color: red;
  font-size: 12px;
}

.prt-m,
.prt-m a,
.prt-t {
  margin-bottom: 10px;
  color: #b1b1b1;
  text-align: center;
  font-size: 12px;
}

.prt-un {
  width: 100%;
  margin-bottom: 4px;
  text-align: center;
}

.prt-rqst {
  margin-top: 15px !important;
  border-radius: 15px;
  padding: 10px;
}

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

.prt-rqst a {
  font-size: 16px;
  font-family: "Lato";
  font-weight: 400;
}

.prt-rqst b {
  color: var(clr-keeppeer-d);
}

.prt-rqst img {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid #e5e5e5;
}

.prt-rqst form {
  margin-top: 10px !important;
}

/******************************************************************************/
/* Profile Store / PROFILE.PHP
/******************************************************************************/
.w-ps {
  width: 550px;
  margin-right: 10px;
}

/******************************************************************************/
/* Profile Column / PROFILE.PHP
/******************************************************************************/
.w-pc {
  position: -webkit-sticky;
  position: sticky;
  top: 70;
  width: 420px;
  height: fit-content;
  border-radius: 10px;
  padding: 10px;
  background-color: #f8f8f8;
  border: 1px solid #eee;
}

.w-pd {
  position: relative;
  height: auto;
  background-color: #fff;
  box-shadow: 0px 0px 10px #d3d3d3;
  border-radius: 10px;
}

.pd-b {
  height: 160px;
  overflow: hidden;
  background-color: #e5e5e5;
}

.pd-b img {
  width: 100%;
  object-fit: cover;
}

.pd-w {
  width: 100%;
}

.pd-pi img {
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0px 0px 2px var(--g-vd);
}

.pd-t {
  margin: 5px 0 8px 0;
  line-height: 1.5;
  min-height: 32px;
}

.pd-a {
  margin-top: 15px;
  color: #000;
  font-size: 12px;
  width: 175px;
}

.pd-icn span,
.pd-a span {
  font-family: "Gicons";
  font-size: 16px;
}

.pd-icn span {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 10px;
}

.pd-icn input {
  border: 0.5px solid #ddd;
  border-radius: 50px;
  height: 30px;
  padding: 5px 10px 5px 27px;
  margin-bottom: 5px;
  text-align: left;
  width: 100%;
}

.pd-a button {
  border: 0.5px solid #ddd;
  border-radius: 50px;
  height: 30px;
  padding: 5px 10px;
  margin-bottom: 5px;
  text-align: left;
  width: 100%;
  background-color: var(--gry-l);
}

.pd-a p {
  margin-bottom: 0px !important;
}

.kp-pst {
  width: 100%;
  height: auto;
  padding: 10px;
}

.kp-pst textarea {
  width: 100%;
  border-radius: 25px;
  padding: 15px 20px;
  border: 1px solid #e9ecef;
  box-shadow: 0px 0px 7px #d3d3d3;
}

.kp-pst :hover {
  box-shadow: 0px 0px 7px #a5a5a5;
}

.expanding {
  position: absolute;
  z-index: 9;
}

.pd-up button {
  width: 70px;
  height: 35px;
  border-radius: 20px;
  border: none;
  color: #fff;
  background-color: var(--kpr-d);
}

.pd-up {
  position: absolute;
  z-index: 1;
  bottom: 0;
  padding: 10px;
  width: 100%;
  display: none;
}

.pd-up label {
  margin-bottom: 0rem;
}

::-webkit-resizer {
  display: none;
}

.w-pcc-i {
  height: auto;
  border-radius: 10px;
  margin-right: 15px;
  padding: 10px;
  background-color: #f8f8f8;
  border: 1px solid #eee;
}

.user_details img {
  height: 120px;
  margin-right: 5px;
  border-radius: 5px;
}

.user_details_left_right {
  display: inline-table;
  position: absolute;
  width: 120px;
}

textarea:focus {
  outline: 0;
}

/* PROFILE POST ***************************************************************/
.post_user {
  margin-bottom: 10px;
  /* box-shadow: 0px 0px 6px #ccc; */
  border-bottom: solid 1px #e5e5e5;
  /* height: 50px; */
  padding: 0 0 10px 0;
  /* border-radius: 50px;*/
}

.status_post {
  width: 100%;
  min-height: 120px;
  margin: 10px 0;
  padding: 10px !important;
  background-color: #fff;
  border: solid 1px #e5e5e5;
  border-radius: 10px;
  font-size: 18px;
  box-shadow: 0px 2px 6px #ccc;
}

.post_profile_pic {
  float: left;
  margin-right: 7px;
}

.post_profile_pic img {
  width: 40px;
  height: 40px;
  border: 1px solid #e5e5e5;
  border-radius: 60px !important;
}

.posted_by a {
  color: #026a87;
  font-size: 16px;
  font-weight: bold;
}

.post_time {
  margin: 6px 0;
  color: #8e8e8e;
  font-size: 12px;
}

.post_settings {
  font-family: "Gicons";
  position: absolute;
  top: 5;
  right: 0;
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 30px;
  text-align: center;
  font-size: 16px;
  border: 1px solid #e5e5e5;
}

.post_settings:hover {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 30px;
  background-color: #e8e8e8;
}

.post_body {
  font-size: 16px;
}

.wg-rc {
  border-top: solid 1px #e5e5e5;
  padding-top: 10px;
  margin-top: 10px;
  width: 100%;
}

.g-rc a {
  font-weight: 600;
  font-size: 13px;
  top: 2;
}

.g-rc span {
  font-family: "Gicons";
  font-size: 22px;
  padding: 7px;
  top: 4px;
  cursor: pointer;
  color: #17a2b8;
}

.g-rc span:hover {
  color: #026a87;
  width: 30px;
  height: 30px;
  background-color: #e0edf8;
  border-radius: 30px;
}

#comment_iframe {
  width: 100%;
  height: auto;
}

.comment_section {
  padding: 0 8px 8px 8px;
}

.comment_section img {
  margin: 0 3px 3px 3px;
  border-radius: 3px;
}

#comment_form textarea {
  width: 85%;
  height: 35px;
  margin: 3px 3px 3px 5px;
  color: #616060;
  border-color: #d3d3d3;
  border-radius: 5px;
  font-size: 15px;
}

#comment_form input[type="submit"] {
  position: absolute;
  width: 13%;
  height: 35px;
  margin-top: 3px;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  background-color: #20aae5;
  text-shadow: #73b6e2 0.5px 0.5px 0px;
  font-family: "Roboto-Regular", sans-serif;
}

.newsfeedPostOptions {
  display: flex;
  width: 100%;
  padding: 3px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  justify-content: space-between;
}

.newsfeedPostOptions iframe {
  height: 30px;
  border: 0px;
  width: 100px;
}

.newsfeedPostOptions form {
  display: inline-flex;
}

.g-rspct {
  display: inline-flex;
}

.comment_respect {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  margin: 0;
  padding: 9px 0;
  color: #dc3545;
  border: none;
  background-color: transparent;
  font-family: "Gicons" !important;
  font-size: 20px;
  cursor: pointer;
  top: -8px;
  line-height: 0.7;
}

.comment_respect:hover {
  width: 30px;
  height: 30px;
  background-color: #f7d5d8;
  border-radius: 30px;
}

.post-respect a {
  font-family: "keeppeer" !important;
  font-size: 25px;
}

.respect_value {
  display: inline;
  font-size: 13px !important;
  font-weight: 600;
  top: 1;
}

.profile_info p {
  margin: 0 0 0 20px;
  word-wrap: break-word;
}

#accept_button {
  width: 30%;
  height: 35px;
  margin-left: 10px;
  color: #fff;
  border: none;
  border-radius: 35px;
  background-color: #2ecc71;
  cursor: pointer;
}

#accept_button:hover {
  background-color: #2fb94f;
}

#ignore_button {
  width: 30%;
  height: 35px;
  margin-left: 5px;
  color: #fff;
  border: none;
  border-radius: 35px;
  background-color: #e74c3c;
  cursor: pointer;
}

#ignore_button:hover {
  background-color: #dc3545;
}

.delete_button {
  position: relative;
  right: -15px;
  width: 22px;
  height: 22px;
  float: right;
  padding: 0;
  border: none;
  border-radius: 4px;
  background-color: #c0c0c0 !important;
}

.delete_button:hover {
  background-color: #e74c3c !important;
}

.profile_info_bottom {
  margin: 10 0 0 7px;
}

#message_textarea {
  width: 87%;
  margin-right: 8px;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  font-size: 12px;
}

#message_submit {
  position: absolute;
  width: 100px;
  height: 41px;
  margin: 0;
  color: #156588;
  border: none;
  border-radius: 5px;
  background-color: #20aae5;
  text-shadow: #73b6e2 0.5px 0.5px 0px;
  font-family: "Bellota-BoldItalic", sans-serif;
}

/* .message {
  display: inline-block;
  margin-right: 25px;
  margin-left: 25px;
  padding: 5px 10px;
  color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
} */

.message#blue {
  float: right;
  margin-bottom: 5px;
  border-color: #2980b9;
  background-color: #3498db;
}

.message#green {
  float: left;
  margin-bottom: 5px;
  border-color: #27ae60;
  background-color: #2ecc71;
}

.loaded_messages {
  height: 65%;
  min-height: 300px;
  max-height: 400px;
  margin-bottom: 10px;
  overflow-y: auto;
}

.loaded_conversations {
  max-height: 216px;
  overflow-y: auto;
}

.user_found_messages {
  padding: 8px 8px 10px 8px;
  border-bottom: 1px solid #d3d3d3;
}

.user_found_messages:hover {
  background-color: #d3d3d3;
}

.user_found_messages img {
  height: 35px;
  float: left;
}

.an-wd {
  height: 53px;
  width: 100%;
  padding: 5px;
  border-bottom: 1px solid #e5e5e5;
}

.an-wd:hover {
  background-color: #e5e5e5;
}

.an-wd-i img {
  height: 38px;
  width: 38px;
  border-radius: 50px;
  margin-right: 8px;
}

.an-ts {
  font-size: 12px;
  color: #8c8c8c;
}

.an-m {
  margin-top: 4px;
  font-size: 13px;
  color: #026a87;
  font-weight: 600;
}

.resultDisplayNotification {
  height: auto;
  padding-bottom: 7px;
  color: #1485bd;
}

.resultDisplayNotification img {
  height: 40px;
  float: left;
  margin: 1px 12px 0px 2px;
  border-radius: 5px;
}

.searchPageFriendButtons {
  float: right;
}

.searchPageFriendButtons input[type="submit"] {
  padding: 7px 12px;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.result_profile_pic {
  float: left;
  margin-right: 10px;
}

#search_hr {
  margin-bottom: 0px;
}

.small_profile_pic {
  height: 55px;
  float: left;
  margin: 1px 12px 0 2px;
}

#settings_input {
  height: 20px;
  margin-bottom: 10px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
}

.settings_submit {
  padding: 7px 12px;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.message .deleteButton {
  margin: 0 5px 5px 0;
  color: #fff;
  cursor: pointer;
}

.postedImage img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  margin: 5px auto;
}

.su-a {
  width: 600px;
  height: 70px;
}

/* Banner ******************************************************************** */
.banner-settings {
  z-index: 999;
  display: flex;
  position: absolute;
  width: 100%;
  padding: 10px;
}

.banner-settings span {
  font-family: "Gicons";
  font-size: 20px;
}

.banner-setings-button {
  opacity: 0.3;
  border: none;
  background-color: transparent;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  border: 1px solid #000;
}

.banner-setings-button:hover {
  opacity: 1;
  cursor: pointer;
}

.btn-bnr {
  width: 150px;
  border-radius: 15px;
  height: 150px;
  padding: 10px;
  border: 1px dashed var(--gry-d);
  color: var(--gry-d);
}

.btn-bnr:hover {
  border: 1px dashed var(--g-vd);
  cursor: pointer;
  color: var(--g-vd);
}

.bnr-emt {
  text-align: center;
  border: 1px solid #d1d1d1;
  height: 200px;
  padding: 22px;
}

.b-wg {
  height: 250px;
  width: 100%;
  margin: 15px 0;
  padding: 10px;
}

.b-wg2 {
  width: 100%;
  padding: 10px;
}

.b-wg img {
  top: -225;
  object-fit: cover;
  width: 100%;
  height: 225px;
  text-indent: -10000px;
}

.b-wg2 img {
  top: -200px;
  object-fit: cover;
  width: 100%;
  height: 180px;
  text-indent: -10000px;
}

.b-wb {
  z-index: 10;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 12.5% 25%;
  opacity: 0;
}

.b-wb span {
  font-family: "Gicons";
}

.b-wb:hover {
  opacity: 1;
}

.b-wb label {
  height: 50px;
  border: 1px dashed;
  border-radius: 15px;
  padding: 15px;
  color: var(--kpr-d);
  background-color: #ffffffbd;
  cursor: pointer;
}

.b-wb2 label:hover,
.b-wb label:hover {
  background-color: #fff;
}

.b-wb2 {
  z-index: 10;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 14.5%;
}

.b-wb2 label {
  top: -10;
  height: 65px;
  border: 1px dashed;
  border-radius: 15px;
  padding: 15px;
  color: var(--kpr-d);
  background-color: #ffffffbd;
  cursor: pointer;
}

.b-wb2 label p {
  font-weight: 300;
}

/******************************************************************************/
/* Product Modal
/******************************************************************************/
.product-modal {
  display: flex;
  position: absolute;
  align-items: center;
}

/* Product Details & Comments Section - Modal ************************** */
.prod-details-mother {
  top: 0;
  width: 450px;
  height: 100%;
  padding: 10px;
  background-color: powderblue;
}

.prod-details-child {
  display: flex;
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  flex-direction: column;
}

.prod-details-mother-user {
  width: 100%;
  height: 60px;
  padding: 10px;
  border: 1px solid #e5e5e5;
}

.prod-details-child-user {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
}

.prod-details-mother-discription {
  width: 100%;
  height: 150px;
  padding: 10px;
  border: 1px solid #e5e5e5;
}

.prod-details-child-discription {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
}

.prod-details-mother-commentbox {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
}

.prod-details-child-commentbox {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
}

.prod-details-mother-comments {
  width: 100%;
  height: 200px;
  padding: 10px;
  overflow-y: scroll;
  border: 1px solid #e5e5e5;
}

.prod-details-child-comments {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
}

/* Image Preview **************************************************************/
.s-prev {
  width: 40%;
  height: 100%;
  float: left;
  color: black;
}

.s-next {
  width: 40%;
  height: 100%;
  float: right;
  color: black;
}

/* Product Gallery & Specifications Section - Modal ************************** */
.prod-glry-mother0 {
  display: flex;
  width: 100%;
  justify-content: center;
}

.prod-glry-child0 {
  display: flex;
  width: 850px;
  height: 500px;
  margin: 50px;
  border: 1px solid #e5e5e5;
  border-radius: 0.3rem;
  background-color: white;
  background-clip: padding-box;
  outline: 0;
  justify-content: flex-start;
  pointer-events: auto;
}

.prod-glry-mother1 {
  width: 120px;
  padding: 5px;
  border: 1px solid #e5e5e5;
}

.prod-glry-child1 {
  width: 80px;
  height: 80px;
  margin: 10px;
  background-color: #e5e5e5;
}

.prod-glry-mother2 {
  width: 500px;
  padding: 13px;
  border: 1px solid #e5e5e5;
}

.prod-glry-child2 {
  width: 350px;
  height: 440px;
  margin: 10px;
  background-color: #e5e5e5;
}

.prod-glry-mother3 {
  width: 500px;
  padding: 13px;
  border: 1px solid #e5e5e5;
}

.prod-glry-child3 {
  width: 250px;
  height: 130px;
  margin: 10px;
  background-color: #e5e5e5;
}

.prod-glry-child3a {
  width: 250px;
  height: 250px;
  margin: 10px;
  background-color: #e5e5e5;
}

.galeryimage {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Shelf **********************************************************************/
.sp-ps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 10px;
}

#disp {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.ps-pn {
  margin: 10px 0;
}

.inpt-ui {
  border: none;
  background-color: #fff0;
  cursor: text;
  outline: none;
}

.dx {
  border: none !important;
  background-color: #fff0;
  cursor: text;
}

.dx2 {
  border: none;
  background-color: #fff0;
  cursor: pointer;
}

.divInpt {
  border: none !important;
  background-color: #fff0 !important;
  cursor: text !important;
}

#prod {
  width: 90px;
}

#qcu {
  width: 50px;
}

/**************************************************************************** */
/* Business Settings
/******************************************************************************/
.ae-bs {
  width: 49.2%;
  padding: 20px 15px 0 15px;
  flex-wrap: nowrap;
  margin-top: 15px;
}

.bs-hdr {
  width: 400px;
}

/******************************************************************************/
/* INVENTORY
/******************************************************************************/
.ae-isd {
  display: flex;
  justify-content: space-between;
}

.ae-bi-wg {
  margin-top: 15px;
  padding: 15px 15px 0px 15px;
}

.ae-bi-w {
  display: flex;
  flex-wrap: nowrap;
}

.m {
  margin-left: 5px;
}

.mr {
  margin-right: 5px;
}

.ae-bi-ml {
  width: 50%;
}

.inv-i img {
  height: 90px;
  width: 90px;
  object-fit: cover;
}

.inv-d {
  width: 100%;
  margin-left: 15px;
}

.inv-bc svg {
  height: 90px;
}

.ae-inv input {
  font-size: 16px !important;
  font-weight: bold !important;
}

/******************************************************************************/
/* LOGIN ACCOUNTS
/******************************************************************************/
.ae-r-a {
  margin-top: 10px;
}

.lb {
  width: 65px !important;
}

.lba {
  width: 85px !important;
}

/******************************************************************************/
/* PRODUCTS & SERVICES
/******************************************************************************/

.pc-undsply,
.pc-dsply {
  width: 100%;
}

.ae-p-w {
  display: grid;
  grid-template-columns: 185px 185px 185px 185px 185px;
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 10px;
}

.ae-ccp-p {
  display: flex;
  height: 20px;
  margin: 5px 0;
  justify-content: center;
}

.ae-ccp-i {
  width: 100%;
  height: 150px;
  border-bottom: 1px solid var(--gry-m);
}

.ae-ccp-i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ae-ps-w {
  display: flex;
  justify-content: flex-start;
}

.ae-p-c-w {
  width: 300px;
  height: 300px;
}

.ae-c-i {
  display: flex;
  width: 205px;
  justify-content: center;
}

.ae-c-i-d img {
  width: 100%;
  height: 300px;
  border-radius: 10px;
}

.ae-c-i img {
  width: 60px !important;
  height: 60px !important;
  margin: 10px 5px;
  cursor: pointer;
}

.ae-ps-psd {
  width: 450px;
  margin-left: 15px;
}

.ae-ps-n a {
  color: #333;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.ps-p {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 600;
  color: #ff0000;
}

.ps-p sup {
  font-size: 16px !important;
}

.ps-d a {
  font-size: 16px;
  font-weight: bold;
  color: var(--g-vd) !important;
}

.psd-dt {
  margin: 10px 0px;
}

.ae-ps-nib {
  width: 100%;
}

.ae-ps-b {
  display: flex;
  justify-content: flex-start;
}

.ae-ps-b a {
  color: #333;
  font-family: "Libre Barcode 128 Text", cursive;
  font-size: 34px;
}

.ae-psc {
  margin: 15px 0px;
}

.ae-psc-b button {
  width: 35px;
  height: 35px;
  color: #17a2b8;
  border: 1px solid #17a2b8;
  border-radius: 50px;
  background-color: #fff;
}

.psc-mod {
  width: 500px !important;
}

.psc-h {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.psc-cat select {
  width: 157px;
  height: 42px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  outline: none;
  font-size: 16px;
}

.psc-cat-d {
  height: 300px;
  padding: 10px 0px;
}

/**
 * .modal:nth-of-type(even) { z-index: 1052 !important; }
 * .modal-backdrop.show:nth-of-type(even) { z-index: 1051 !important; }
 */

.color-wrapper {
  position: relative;
  width: 250px;
  margin: 20px auto;
}

.color-wrapper p {
  margin-bottom: 5px;
}

input.call-picker {
  width: 85px;
  float: left;
  padding: 10px;
  color: #666;
  border: 1px solid #aaa;
  outline: none;
  text-transform: uppercase;
  text-transform: uppercase;
}

.color-picker {
  z-index: 1500;
  position: absolute;
  top: 50px;
  left: 2px;
  width: 100%;
  height: 81px;
  padding: 5px;
  background: #f3f3f3;
  box-shadow: 0px 0px 3px 1px #ddd;
}

.color-holder1,
.color-holder2,
.color-holder3,
.color-holder4,
.color-holder {
  width: 35px;
  height: 35px;
  float: left;
  margin: 15px 5px 0px 0;
  border: 1px solid #aaa;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
}

.color-picker .color-item {
  width: 15px;
  height: 15px;
  float: left;
  margin: 2px;
  border: 1px solid #ddd;
  border-radius: 20px;
  list-style-type: none;
  cursor: pointer;
}

.color-picker .color-item:hover {
  opacity: 0.8;
  border: 1px solid #666;
}

.size input {
  width: 25px;
  height: 24px;
  margin-right: 4px;
  padding: 3px;
  border: 1px solid #e3e3e3;
  border-radius: 25px;
  text-align: center;
  font-size: 10px;
  cursor: pointer;
}

.ps-ui {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.ps-ui [type="file"] {
  position: absolute;
  top: 0;
  right: 0;
  width: 75px;
  height: 75px;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
}

.ps-bi-vd {
  width: 100%;
  height: 176px;
  margin-top: 5px;
  padding: 10px;
  overflow-x: scroll;
  border-radius: 10px;
}

.vrnc {
  height: 220px !important;
}

.ps-bi-vd textarea {
  border: none;
  resize: none;
}

.vrnc-s {
  height: 36px;
  margin-bottom: 10px;
}

.vrnc-s select {
  padding: 5px;
  font-size: 14px;
}

.vrnc-o {
  width: 320px;
  padding: 5px 0;
  border-bottom: 2px solid #e3e3e3;
}

.vrnc-od {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 320px;
  padding: 5px;
  border-bottom: 2px dashed #e3e3e3;
}

.vrnc-x {
  z-index: 9999;
  position: absolute;
  top: 0;
  right: 0;
}

.vrnc-x span:hover {
  font-size: 18px;
}

/******************************************************************************/
/* MANUFACTURE
/******************************************************************************/
.sml {
  font-size: 13px !important;
}

.sml label {
  font-size: 12px !important;
}

.mpx {
  width: 120px !important;
  margin-left: 10px;
}

.ae-m-mlo-w {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
}

.ae-m-mlo {
  width: 32%;
}

.ae-m-h {
  margin-bottom: 5px;
}

.ae-m-h a {
  color: #026a87;
  font-size: 18px;
  font-weight: 600;
}

.chkbx {
  width: 25px;
  margin-top: 12px !important;
  height: 25px;
}

.psc-cat {
  display: flex;
}

.hfxs {
  margin-left: 15px !important;
}

.hfxs input {
  margin-bottom: 0px !important;
}

.jcsb {
  justify-content: space-between;
}

.ae-f-ta {
  width: 250px !important;
  margin-bottom: 0px !important;
}

.ae-f-ta input {
  margin-bottom: 0px !important;
}

/******************************************************************************/
/* Main Account Settings
/******************************************************************************/
.mas-w {
  display: flex;
  height: auto;
  padding: 10px;
  justify-content: flex-start;
}

.mas-p-w {
  width: 230px;
  padding-right: 15px;
  border-right: 1px solid #e5e5e5;
}

.mas-p {
  text-align: center;
}

.mas-p img {
  height: 130px;
  width: 130px;
  margin-bottom: 15px;
  border-radius: 50%;
}

.mas-p label {
  color: #026a87;
  text-align: center;
  font-size: 18px;
}

.mas-lg {
  color: #026a87 !important;
  border: none !important;
  font-size: 18px !important;
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  background-color: var(--gry-m) !important;
}

.mas-s-w {
  display: flex;
  width: 550px;
  margin-left: 15px;
  flex-direction: column;
  justify-content: space-between;
}

.mas-s {
  width: 100%;
  height: auto;
  margin: 10px 0;
  padding: 0 10px;
}

.mas-s-h {
  display: flex;
  justify-content: space-between;
}

.mas-s-h a {
  margin-top: 12px;
  font-size: 21px;
  font-weight: 600;
}

.mas-s-b {
  margin-top: 10px;
}

.mas-ta {
  font-size: 18px;
  line-height: 24px;
}

.mas-ftr {
  display: flex;
  justify-content: space-between;
}

.d-td input {
  font-size: 24px;
  font-weight: 600;
}

/******************************************************************************/
/* POINT OF SALES
/******************************************************************************/
.pos-wm {
  width: 590px;
}

.pos-wd {
  width: 400px;
}

.w-s-pc {
  width: 100%;
  height: 320px;
  padding: 10px;
}

.w-s-ps {
  width: 100%;
  height: 55px;
  margin-bottom: 15px;
  padding: 10px;
}

.s-ps {
  display: flex;
  width: 385px;
}

.s-ps input,
.s-psc input {
  width: 100%;
  height: 40px;
  padding-left: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
}

.s-pq input {
  width: 85px;
  height: 40px;
  margin-right: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}

.s-pq input:focus,
.s-pq input:hover,
.s-ps input:focus,
.s-ps input:hover {
  box-shadow: 0 0 1pt 1pt red;
}

.s-psi {
  position: relative;
}

.s-psi span {
  position: absolute;
  top: 10px;
  right: 10px;
  float: right;
  color: #d3d3d3;
  font-family: "Gicons";
  font-size: 20px;
  cursor: pointer;
}

.s-psi-a span {
  position: absolute;
  top: -38px;
  right: 15px;
  float: right;
  color: #d3d3d3;
  font-family: "Gicons";
  font-size: 30px;
  cursor: pointer;
}

.s-psi span:hover,
.s-psi-a span:hover {
  color: #a5a5a5;
}

.s-pi {
  width: 70px;
  height: 60px;
  padding: 5px;
  text-align: center;
}

.s-pi img {
  height: 100%;
  object-fit: cover;
}

.s-pd {
  width: 100%;
  margin-left: 15px;
}

.s-pd-i {
  margin-top: 6px;
  font-size: 14px;
}

.s-pd-n {
  font-size: 18px;
  font-weight: 600;
}

.qp-p {
  float: left;
  margin-top: 8px;
  margin-right: 5px;
  font-size: 14px;
  font-weight: 600;
}

.qp-pp {
  float: left;
  margin-top: 7px;
  font-size: 35px;
  font-weight: 600;
  line-height: 33px;
}

.qp-pp a {
  font-size: 20px;
}

.qp-q {
  float: left;
  margin-top: 13px;
  margin-right: 5px;
  font-size: 14px;
  font-weight: 600;
}

.qp-qq input {
  width: 85px;
  height: 40px;
  float: left;
  margin-top: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  text-align: center;
  font-size: 25px;
  font-weight: 600;
}

.card-header i {
  float: right;
  margin: 2px;
  font-size: 12px;
}

.card-header i:hover {
  text-transform: uppercase;
}

.pos-pill {
  height: 35px;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.pos-s-b input {
  width: 100%;
  height: 50px;
  padding: 10px;
  font-size: 18px;
}

.pos-s-c {
  height: 100%;
  margin-top: 15px;
  padding: 10px;
}

.calc-c {
  width: 725px !important;
}

.calc {
  width: 100%;
}

.calc-b input {
  width: 100px;
  height: 80px;
  margin: 5px;
  border: 1px solid var(--gry-d);
  border-radius: 10px;
  background-color: var(--w);
  font-size: 30;
}

.calc-b input:hover {
  color: var(--w);
  background-color: var(--kpr-l);
}

.calc-d input {
  width: 670px;
  height: 60px;
  margin: 5px;
  padding: 10px;
  border: 1px solid var(--gry-d);
  border-radius: 10px;
  text-align: right;
  font-size: 30px;
}

.ae-s-n {
  width: 100%;
  text-align: center;
}

.ae-s-n a {
  font-size: 16px;
  font-weight: 600;
}

.ae-pos {
  display: flex;
  position: relative;
  width: 100%;
  flex-wrap: wrap;
}

.ae-pos a {
  font-size: 16px;
  font-weight: 400;
}

.ae-pos input {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 15px;
  padding: 8px;
  color: var(--r);
  border: none;
  border-bottom: 1.5px solid #d3d3d3;
  background-color: inherit;
  font-size: 16px;
}

.ae-pos label {
  position: absolute;
  top: 10px;
  left: 0;
  color: #999;
  font-size: 16px;
  font-weight: 400;
  transition: 0.2s;
  pointer-events: none;
}

.ae-pos select:focus~label,
.ae-pos select:hover~label,
.ae-pos select:valid~label {
  top: -8px;
  color: #026a87;
  font-size: 16px;
}

.ae-pos [type="submit"] {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  color: white;
  border: 2px solid #28a745;
  background-color: #28a745;
  font-weight: 600;
  cursor: pointer;
}

.ae-pos [type="submit"]:hover {
  border-bottom: 2px solid #00841e;
  background-color: #00841e;
}

.ae-pos input:focus~label,
.ae-pos input:hover~label,
.ae-pos input:valid~label {
  top: -8px;
  color: #026a87;
  font-size: 14px;
}

.ae-pos input:focus,
.ae-pos input:hover,
.ae-pos input:valid {
  border-bottom: 1.5px solid #026a87;
}

.pos-gt {
  width: 100%;
  height: auto;
  padding: 10px;
  border-radius: 5px;
  background-color: var(--kpr-d);
}

.pos-gt label {
  width: 100%;
  color: var(--w);
}

.pos-gt input {
  width: 100%;
  color: var(--w);
  border: none;
  background-color: transparent;
  font-size: 24px;
  font-weight: 600;
}

.pos-m-p {
  display: none;
}

/* Void ***********************************************************************/
#nonSelected {
  height: 100%;
  overflow-y: scroll;
}

#nonSelected::after {
  content: "";
  display: block;
}

.itm {
  height: 60px;
  margin: 4px 10px 10px 4px;
  padding: 9px;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  background-color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.itm-d {
  margin-top: 5px;
}

.itm-d a {
  margin-top: 5px;
  font-size: var(--fnt-s);
  font-weight: 400;
}

.itm:hover {
  background-color: #f8f9fa;
}

.itm-id a {
  font-size: 12px;
}

.itm-n a {
  font-size: 14px;
  font-weight: bold;
}

.itm-n {
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.itm-qty {
  margin-right: 6px;
}

.itm-qty button {
  width: 25px;
  height: 25px;
  border: 1px solid var(--gry-m);
  border-radius: 5px;
  background-color: var(--w);
}

.add:hover {
  color: var(--w);
  background-color: var(--g);
}

.sub:hover {
  color: var(--w);
  background-color: var(--r);
}

.itm-qty input {
  width: 45px;
  height: 30px;
  border: 1px solid var(--gry-m);
  border-radius: 5px;
  outline: none;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}

.itm-ud {
  margin-right: 5px;
  padding: 2px 0;
}

.itm-ud input {
  width: 80px;
  padding: 3px;
  border: none;
  border-bottom: 1px solid var(--gry-d);
  background: transparent;
  text-align: right;
  font-size: 14px;
}

.rc-t {
  position: absolute;
  bottom: 0;
  width: 96%;
  padding-bottom: 10px;
}

.rc-t-i {
  width: 100%;
  height: 16px;
  margin-top: 5px;
  font-size: 14px;
}

.rc-t-ti {
  width: 100%;
  height: 16px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 14px;
}

.rc-t-t {
  float: left;
}

.rc-t-v {
  float: right;
}

.rc-t-gt {
  float: right;
  font-size: 16px;
  font-weight: 600;
}

.pos-vb {
  font-family: "Gicons";
  height: 30px;
  background-color: transparent;
  padding: 2px 0;
  color: var(--gry-d);
  border: none;
  font-size: 23px;
}

.close-icn {
  font-family: "Gicons" !important;
  cursor: pointer;
  font-size: 20px;
  line-height: 0;
  color: var(--gry-d);
}

.close-icn:hover,
.pos-vb:hover {
  color: var(--r);
}



/******************************************************************************/
/* Purchase Orders
/******************************************************************************/
/* .ordr-ch{
height: 100%;
} */

.typh {
  width: 100% !important;
  padding: 0px !important;
  height: 180px;
  overflow: auto;
  box-shadow: 0px 0px 6px #00000020;
}

.typh li {
  padding: 10px !important;
  margin: 5px;
  border-radius: 5px;
  background-color: #fafafa;
}

.typh li:hover {
  background-color: #e4f0f3;
}

.typh li a {
  font-weight: 600;
  color: var(--kpr-d);
}

.ordr-gt {
  width: 55%;
  height: 70px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
  background-color: var(--kpr-d);
}

.ordr-gt label {
  width: 100%;
  color: var(--w);
}

.ordr-gt input {
  width: 100%;
  color: var(--w);
  border: none;
  background-color: transparent;
  font-size: 20px;
  font-weight: 600;
}

.ordr-co {
  width: 43%;
  height: 70px;
  margin-top: 8px;
  border-radius: 10px;
  background-color: var(--o);
}

.ordr-co label {
  width: 100%;
  color: var(--w);
}

.ordr-co button,
.ordr-co input {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  color: var(--w);
  border: none;
  background-color: transparent;
  font-size: 16px;
  font-weight: 600;
}

/******************************************************************************/
/* Footer
/******************************************************************************/
.w-f {
  position: absolute;
  width: 100%;
}

.ff {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 15px 20% 0 20.3%;
  border-top: 5px solid #026a87;
  background-color: #fff;
  flex-wrap: wrap;
}

.ff ul {
  padding-left: 0;
  line-height: 12px;
  list-style: none;
}

.ff ul a {
  color: #999999;
  font-size: 14px;
  line-height: 20px;
}

.ff ul a:hover {
  color: #777777;
}

.ffc {
  width: 20%;
  margin: 10px;
  flex: 1;
}

.ff2c {
  min-width: 18%;
  max-width: 18%;
  margin: 10px;
}

.ffl {
  margin: 10px;
}

.ffl img {
  height: 38px;
  margin: 5px 0px 5px 0px;
}

.ffp {
  margin: 10px;
}

.ffp img {
  height: 38px;
  margin: 5px 0px 5px 0px;
}

.ffd {
  margin: 10px;
}

.ffd img {
  height: 38px;
  margin: 5px 0px 10px 0px;
}

.fc {
  width: 100%;
}

.w-fs {
  width: 100%;
  bottom: 0;
  height: 45px;
  padding: 15px 20% 0 20.3%;
  background-color: #026a87;
}

.fs-c {
  color: #fff;
  font-size: 13px;
}

.fs-ft {
  color: #fff;
  font-size: 13px;
}

.grp {
  display: inline-block;
}

.fs-ft a {
  color: #fff;
}

.fs-ft a:hover {
  color: #b7b7b7;
}

#custom-templates .empty-message {
  padding: 5px 10px;
  text-align: center;
}

#contact-right {
  width: 50%;
}

#home-content-box-l {
  width: 100%;
  height: 100%;
  display: table;
}

/******************************************************************************/
/* Add Employee Information / Bio Data
/******************************************************************************/
.aei-t {
  font-size: 22px;
  margin-bottom: 10px;
}

.aei-d {
  width: 100%;
}

.emp-m {
  box-shadow: 0 1px 6px var(--gry-d);
  padding: 10px;
  border-radius: 50px;
  cursor: pointer;
}

.emp-v {
  height: 30px;
  top: 5;
  right: 10;
}

.emp-dt {
  height: 50px;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 50px;
  font-weight: 600;
  text-align: center;
}

.anchr-btn:hover {
  background-color: var(--o);
  color: var(--w) !important;
}

.anchr-btn-kl:hover {
  background-color: var(--kpr-l);
  color: var(--w) !important;
}

.anchr-btn-up {
  cursor: pointer;
  height: 100%;
  width: 100%;
}

/******************************************************************************/
/* Attendance
/******************************************************************************/
.atnd-t {
  text-align: center;
  margin: 10px 0;
}

.atnd-b {
  margin: 10px 0;
}

.atnd-b button {
  background-color: var(--w);
  width: 150px;
  height: 80px;
  border-radius: 10px;
  border: 1px solid var(--gry-m);
  font-weight: bold;
  margin-right: 5px;
}

.atnd-b button:hover {
  background-color: var(--gry-l);
}

.atnd-b button a {
  font-weight: bold;
  font-size: 20px;
}

.atnd-b button p {
  color: var(--gry-d) !important;
  top: 0;
  right: 0;
  margin: 10px;
  position: absolute;
}

.atnd-s {
  width: 100%;
  margin: 30px 0;
}

.atnd-s input {
  width: 100%;
  height: 50px;
  padding: 18px;
  border-radius: 5px;
  border: none;
}

#clockbox2 {
  font-size: 50px;
  font-weight: bold;
  color: var(--w);
}

#datebox2 {
  font-size: 20px;
  color: var(--w);
}

/******************************************************************************/
/* Invoices Generic
/******************************************************************************/
.i-ae-cl img {
  height: 100px;
  object-fit: contain;
  margin-left: 15px;
}

.i-ae-bd {
  margin-left: 15px;
}

.i-ae-id {
  margin-right: 15px;
  text-align: right;
}

.i-ae-id a {
  font-size: 20px;
  color: #026a87;
  font-weight: bold;
}

.i-ae-bd a {
  font-size: 25px;
  color: #026a87;
  font-weight: bold;
}

.i-ae-id p,
.i-ae-bd p {
  line-height: 1.5;
  margin: 5px 0 0 0;
}

/******************************************************************************/
/* Barcodes
/******************************************************************************/
.bcd-w {
  width: 33.3%;
  margin: 15px 0 0 0;
  text-align: center;
  padding: 0 8px 0px 8px;
}

.bcd-d {
  padding: 10px 10px 6px 10px;
  border-bottom: 1px solid var(--gry-d);
}

.bcd-d a {
  font-size: 18px;
  font-weight: 600;
}

.bcd-d p {
  font-size: 14px;
  font-weight: 600;
}

.bcd-wdi {
  width: 100%;
  height: 197px;
}

.mydiv {
  float: left;
  width: 600px;
  height: 600px;
  border: solid 1px black;
  overflow: hidden;
}

.pprsz {
  height: 1500px;
  margin-bottom: 15px;
  width: 100%;
}

@media print {
  .brcd-prnt {
    display: flex;
    flex-direction: column-reverse !important;
  }

  .pprsz {
    margin: 25px 0;
    border: none !important;
  }

  @page {
    margin: 0.8cm;
  }
}

/******************************************************************************/
/* Sales Invoice Graph / Doisbursements Graph/ Daily Sales/ Monthlly / Yearly
/******************************************************************************/
.si-o {
  flex-direction: column;
}

.si-s-g {
  width: 100%;
  padding: 10px;
}

.si-trds {
  width: 100%;
}

.si-trds a {
  font-weight: 600;
}

.si-s-d-s {
  padding: 10px;
}

.ae-g {
  width: 370px !important;
}

.ae-g button {
  width: 38px;
  border: 0.5px solid #d3d3d3;
  background-color: #fff;
  cursor: pointer;
}

.ae-g span {
  margin: 0 5px;
  color: #a5a5a5;
  font-size: 20px;
}

#ae-dt {
  width: 100% !important;
  border-radius: 10px !important;
}

/******************************************************************************/
/* POS Printer
/******************************************************************************/

#printContainer {
  display: block;
}

@media print {
  #printContainer {
    margin: 0;
    padding: 0 15px 0 0;
    text-align: justify;
    font-size: 10px;
    display: block;
    font-family: sans-serif;
  }

  @page {
    margin: 0;
    /* imprtant to logo margin */
    size: auto;
    /* imprtant to set paper size */
    display: block;
  }

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

/******************************************************************************/
/* Inventory Adjustments
/******************************************************************************/

.wh-h {
  height: 40px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  min-width: 165px;
  padding: 11px;
  margin-right: 5px;
  cursor: pointer;
}

.wh-h-i {
  font-size: 12px;
  top: 2px;
}

.wh-h:hover {
  background-color: var(--gry-l);
}

.wh-h-al {
  font-family: "Gicons";
  color: var(--g-vd);
  font-size: 15px;
}

.wh-h-a {
  font-family: "Gicons";
  color: var(--o);
  font-size: 15px;
}

.wh-i-d {
  font-weight: 600;
  font-size: 20px;
}

/******************************************************************************/
/* Q&A Guides
/******************************************************************************/
.w-rkg {
  height: auto;
  width: 300px;
  border-right: 1px solid var(--gry-d);
  padding-left: 15px;
}

.w-rkg-l {
  padding: 15px;
}

.w-rkg-l a {
  font-family: "Quenda";
  font-size: 22px;
  line-height: 1.5;
}

.addrss2 input,
.addrss2 select,
.addrss input,
.addrss select {
  height: 45px;
  width: 100%;
  border: 1px solid var(--gry-m) !important;
  border-radius: 5px;
  padding: 6px;
  text-transform: uppercase;
}

/******************************************************************************/
/* Grid
/******************************************************************************/
.ads-grd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 15px;
  row-gap: 15px;
}

.grd-spnsr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 10px;
}

/******************************************************************************/
/* Landing
/******************************************************************************/
.ads-area {
  height: 250px;
}

.w-kpr-l-c {
  width: 930px;
}

.kpr-l-h img {
  height: 80px;
}

.kpr-i {
  margin-right: 20px;
}

.kpr-i img {
  height: 300px;
  box-shadow: 0px 4px 12px #131313;
  border-radius: 30px;
}

.l-su a {
  font-size: 26px;
  font-weight: 600;
  margin-right: 10px;
  line-height: 1.8;
  color: #fff !important;
}

.l-btn button {
  width: 180px;
  height: 50px;
  border-radius: 50px;
  border: none;
  font-size: 22px;
  font-weight: 400;
  color: var(--kpr-d);
  cursor: pointer;
}

.l-btn button:hover {
  color: #fff;
  background-color: green;
  border: 2px solid #fff;
}

.bg-parallax {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

footer {
  background-color: #41464b;
  border-top: 5px solid rgba(0, 0, 0, 0.1);
}

.keep p {
  font-size: 70px;
  margin: 5px 0 15px 0;
  text-align: center;
  text-decoration: none;
  font-family: "Bree Serif";
}

#contact {
  margin-top: 20px;
}

#contact-left h3,
#contact-right h3 {
  color: #fff;
  font-size: 27px;
  font-weight: 700;
}

#contact-right textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border-radius: 5px;
}

#contact-left p {
  color: #fff;
  margin-bottom: 30px;
}

#contact-info {
  background-image: url("../img/world-map.png");
  background-repeat: no-repeat;
  background-size: contain;
}

#send-btn button {
  width: 130px;
  height: 50px;
  border: none;
  border-radius: 50px;
  margin-top: 10px;
  cursor: pointer;
}

#send-btn button:hover {
  background-color: #00bd2b;
  color: #fff;
}

address {
  color: #fff;
}

address strong {
  font-size: 16px;
}

address strong,
#phone-fax-email strong {
  letter-spacing: 1px;
}

form .form-control {
  background: transparent;
  border-radius: 0;
  border-color: #fff;
  font-size: 17px;
  font-weight: 300;
  padding: 8px 16px;
  color: #fff;
}

#footer-bottom {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 25px 0;
  margin-top: 20px;
}

#footer-copyrights p {
  margin: 0;
  color: #fff;
}

#footer-menu {
  float: left;
  color: #fff;
  font-size: 10px;
  font-weight: 300;
}

#footer-menu ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#footer-menu ul li {
  display: inline-block;
}

#footer-menu a {
  color: #fff;
  font-size: 12px;
  font-weight: 300;
  margin: 0 10px;
  text-decoration: none;
}

#footer-menu a:hover {
  color: #34c6d3;
}

.tab {
  display: none;
}

input.invalid {
  background-color: #ffdddd;
}

.adrs-error,
.adrs-error2 {
  color: red;
  display: none;
}

.adrs-active,
.adrs-active2 {
  display: block !important;
}

.error {
  color: red;
}

.error-message {
  color: red !important;
  font-size: 12px !important;
  margin-top: 3px;
  font-weight: 600;
}

.float {
  position: fixed;
  width: 150px;
  height: 45px;
  bottom: 80px;
  font-weight: bold;
  font-size: 14px;
  right: 30px;
  color: var(--kpr-l);
  border-radius: 50px;
  border: none;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  background-size: contain;
}

/******************************************************************************/
/* Investors
/*****************************************************************************/
.investr-hdr {
  z-index: 999;
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  padding: 10px 19% 10px 19%;
  background-color: #f5f5f5;
  border-bottom: 5px solid #000;
  display: flex;
  justify-content: space-between;
}

.hidden {
  display: none;
}

.chevron-icon {
  font-family: "Gicons";
}

.chevron-icon:hover {
  background-color: #e5e5e5;
  border-radius: 5px;
}

.arrow-orders {
  z-index: 2;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #026a87;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

/* Slider */

.toggle-switch {
  --w: 90px;          /* change this, everything follows */
  --h: 34px;
  --pad: 4px;
  position: relative;
  display: inline-block;
  width: var(--w);
  height: var(--h);
}

.toggle-switch input {
  display: none;
}

.toggle-slider {
  position: absolute; 
  cursor: pointer; 
  inset: 0;
  background-color: #a5a5a5; 
  transition: .4s;
  border-radius: var(--h);     /* full-height = pill shape at any width */
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: calc(var(--h) - 2 * var(--pad));
  width:  calc(var(--h) - 2 * var(--pad));
  left: var(--pad);
  bottom: var(--pad);
  background-color: white; 
  transition: .4s; 
  border-radius: 50%;
}

input:checked+.toggle-slider {
  background-color: #00a421;
}

input:focus+.toggle-slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.toggle-slider:before {
  transform: translateX(calc(var(--w) - var(--h)));
}

/*------ ADDED CSS ---------*/
.toggle-slider:after {
  content: 'OFF';                 /* fallback when no data-off */
  color: white;
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 62%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

.toggle-slider[data-off]:after {
  content: attr(data-off);        /* use data-off if it exists */
}

input:checked + .toggle-slider:after {
  content: 'ON';                  /* fallback when no data-on */
  left: 32%;
}

input:checked + .toggle-slider[data-on]:after {
  content: attr(data-on);         /* use data-on if it exists */
}

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

.toggle-switch-con {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 34px;
}

.toggle-switch-con input {
  display: none;
}

.toggle-slider-con {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #3C3C3C;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.toggle-slider-con:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.toggle-slider-con {
  background-color: #00a421;
}

input:focus+.toggle-slider-con {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.toggle-slider-con:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(85px);
}

/*------ ADDED CSS ---------*/
.toggle-slider-con:after {
  content: 'DISABLED';
  color: white;
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 60%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+.toggle-slider-con:after {
  content: 'ENABLED';
  right: -35%;
}

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


.header-admin-login input {
  height: 50px !important;
  border-radius: 10px !important;
}

.acct-btns button {
  width: 100% !important;
}



/******************************************************************************/
/* IManufacture Dropdown Design
/*****************************************************************************/

.border-error {
  border: 1px solid red !important;
  color: red !important;
}

.mt-error,
.mt-details-error {
  display: none;
}

.pd-error,
.pd-details-error {
  display: none;
}

.dt-display {
  display: none;
}

select[disabled] {
  /* This part hides the default dropdown arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  /* You can add additional styling as needed */
}



/* Dropdown Container */
.dropdown-selection {
  font-size: 14px !important;
  height: 42px !important;
  position: relative;
  width: 100%;
  height: 100%;
  font-family: "Montserrat", sans-serif !important;
}

/* Dropdown Header */
.dropdown-selection-header {
  border: 1px solid #e5e5e5;
  border-radius: 10px !important;
  padding: 14px 10px;
  cursor: pointer;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  height: 45px;
  align-items: center;
  text-transform: capitalize;
  overflow: hidden;
}

.captlize {
  text-transform: capitalize;
}

/* Header Text */
.dropdown-selection-header span {
  flex-grow: 1;
}

/* Clear Button */
.clear-button {
  background: none;
  border: none;
  color: red;
  font-size: 16px;
  cursor: pointer;
  margin-left: 10px;
  display: none;
  /* Initially hidden */
}

.search-selection-input {
  width: 100%;
  /* position: absolute; */
  min-width: 150px;
  padding: 10px 45px 10px 10px;
  height: 45px;
  border: 1px solid #e3e3e3 !important;
  background-color: #ffffff;
  box-sizing: border-box;
  display: none;
  z-index: 10;
  border-radius: 10px !important;
}

.floating-refresh-button {
  display: none !important;
  position: absolute;
  top: 67px;
  right: 10px;
  transform: translateY(-50%);
  background-color: #b9b9b9;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
  display: none;
  z-index: 10;
  align-items: center;
  justify-content: center;
}

.floating-refresh-button:hover {
  background-color: #989898;
}

.content-wrapper {
  padding: 10px;
  background-color: #f8f8f8;
  z-index: 10;
  height: fit-content;
  width: auto;
  min-width: 170px;
  margin-top: 5px;
  border-radius: 15px;
  box-shadow: 0 2px 5px #22222259;
}

.create-entry-container {
  display: none;
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  border-radius: 10px !important;
}

.new-entry-input {
  flex-grow: 1;
  padding: 8px;
  border-radius: 10px 0px 0px 10px !important;
  border: 1px solid #ccc;
  box-sizing: border-box;
  z-index: 12;
  width: 100%;
  height: 45px;
}

.nei-brdr {
  border-radius: 10px !important;
  z-index: 9 !important;
}

.create-button {
  padding: 9px 12px;
  border: 1px solid #28a745;
  border-radius: 0px 10px 10px 0px !important;
  background-color: #28a745;
  color: white;
  cursor: pointer;
  z-index: 12;
  height: 45px;
}

.create-button:hover {
  background-color: #2d7b3f;
}

.options-container {
  /* position: absolute; */
  top: 0px !important;
  margin-top: 10px;
  min-width: 150px;
  font-size: 13px !important;
  width: 100%;
  border: 1px solid #e9e9e9 !important;
  background-color: #fff;
  max-height: 200px;
  overflow-y: auto;
  z-index: 15;
  color: #e5e5e5;
  display: none;
  box-sizing: border-box;
  border-radius: 10px !important;
}

/* Option Item */
.option-selection {
  padding: 10px;
  cursor: pointer;

}

.option-selection:hover {
  background-color: #a7e4ff !important;
  color: #000;
}

.add-new-option {
  padding: 10px;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 400;
  margin-top: 10px;
  border-radius: 10px;
  text-align: center;
  height: 40px;
  cursor: pointer;
  border-top: 1px solid #ccc;
  background-color: #f9f9f9;
  color: #067c9b;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.create-new-option {
  display: none;
}

.add-new-option:hover {
  background-color: #13852d !important;
}

.highlight {
  background-color: #a7e4ff !important;
  color: #000 !important;
}

/******************************************************************************/
/* Flat Picker
/*****************************************************************************/

.flatpickr-calendar .flatpickr-footer {
  display: flex !important;
  justify-content: center !important;
  margin-top: 10px !important;
}

.flatpickr-calendar .today-button {
  background-color: #007bff !important;
  color: #fff !important;
  border: none !important;
  padding: 5px 10px !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  width: 100% !important;
}

.flatpickr-calendar .today-button:hover {
  background-color: #0056b3 !important;
}

.oddevenitem:nth-child(odd) {
  background-color: #e9f2f7;
  color: black;
}

.oddevenitem:nth-child(even) {
  background-color: white;
  color: black;
}


.datepicker {
  padding: 8px !important;
  border-radius: 10px !important;
}

.datepicker table tr td span {
    line-height: 30px !important;

}
.datepicker table tr td span {
    width: 30% !important;
    height: 50px !important;
}

.table-condensed>tbody>tr>td {
  padding: 10px !important;
}

.floating-div {
  position: fixed;
  top: calc(15% - 75px);
  /* Adjusted top to account for the removed transform */
  width: 150px;
  border-radius: 10px;
  height: auto;
  right: 12px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
  visibility: visible;
  /* Ensure it is always visible */
}

.minimize-shortcut {
  display: flex;
  align-items: flex-start;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#draggableHandle,
#calculatorDraggableHandle {
  cursor: move;
}

.calculator {
  position: absolute;
  top: 70px;
  right: 20px;
  width: 300px;
  padding: 20px 20px 0px 20px;
  background-color: #1e1e1e;
  border: 1px solid #333;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 100;
  border-radius: 10px;
}

.calculator-screen {
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
  text-align: right;
  padding: 10px 15px;
  /* Adjusted padding to prevent overlap */
  font-size: 20px;
  /* Adjusted font size to prevent overlap */
  border: none;
  border-radius: 5px;
  margin-bottom: 10px;
  overflow: hidden;
  /* Ensure text doesn't overflow */
  white-space: nowrap;
  /* Prevent text from wrapping */
}

.calculator-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.calc-btn {
  width: 100%;
  height: 50px;
  font-size: 18px;
  cursor: pointer;
  background-color: #444;
  color: #fff;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.calc-btn:hover {
  background-color: #555;
}

.calc-btn:active {
  background-color: #666;
}

.social-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.social-carousel-container {
  width: 220px;
  overflow: hidden;
}

.so-carousel {
  display: flex;
  transition: transform 0.3s ease;
}

.social-btns {
  flex: 0 0 35px;
  height: 35px;
  background: #f5f5f5;
  border-radius: 10px;
  margin: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #dddddd;
  transition: all 0.2s ease;
}

.social-btns.active {
  border-color: #007bff;
  background: #e0f0ff;
}

.social-btns img {
  width: 20px;
  height: 20px;
}

.chevron {
  cursor: pointer;
  font-size: 15px;
  user-select: none;
  color: #a5a5a5;
}

.social-tab-content {
  display: none;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.social-tab-content.active {
  display: block;
}

#drag-1,
#drag-2 {
  width: 25%;
  min-height: 6.5em;
  margin: 1rem 0 0 1rem;
  background-color: #29e;
  color: white;
  border-radius: 0.75em;
  padding: 4%;
  touch-action: none;
  user-select: none;
  transform: translate(0px, 0px);
}

.sticky-wrap {
  position: sticky;
  top: 60px;
}

.sidebar button {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  background-color: rgba(245, 245, 245, 0.40);
  color: #00546a;
  border: none;
  padding: 15px;
  margin-bottom: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.sidebar button.active,
.sidebar button:hover {
  background-color: #FFFFFF !important;
  /* Updated color */
  font-weight: 600;
}

.resetUi {
  margin-left: 10px;
  border-radius: 10px;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  font-size: 14px;
  color: #5e5e5e;
}

.sticky-wrap {
  position: sticky;
  top: 60px;
}

.sidebar button {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  background-color: rgba(245, 245, 245, 0.40);
  color: #00546a;
  border: none;
  padding: 15px;
  margin-bottom: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.sidebar button.active,
.sidebar button:hover {
  background-color: #FFFFFF !important;
  /* Updated color */
  font-weight: 600;
}


.dz-button {
  padding: 15px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}

.dz-remove {
  padding: 10px !important;
  border: 1px solid #e5e5e5 !important;
  margin-top: 5px !important;
  border-radius: 10px !important;
  color: #818181 !important;
  font-size: 14px !important;
}

.dz-remove:hover {
  background-color: #e5e5e5 !important;
}

.dropzone {
  border: 1px dashed rgb(113 113 113 / 30%) !important;
}

div:where(.swal2-container) div:where(.swal2-popup) {
  border-radius: 25px !important;
}

.loader-mockup {
  width: 40px;
  height: 40px;
  border: 4px solid #eee;
  border-top: 4px solid #00b894;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/*--------- END --------*/