/*@import goes on top*/
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');*/


:root {
  --x-size:calc(36px + 0.1vw);
  --l-size:calc(22px + 0.1vw);
  --m-size:calc(18px + 0.1vw);
  --n-size:calc(16px + 0.1vw);
  --s-size:calc(13px + 0.1vw);
  --t-size:calc(11px + 0.1vw);
  --f-size:calc(8px + 0.2vw);

  --finger-size:calc(24px + 0.6vw);g

  --chosen-height:calc(20px + 0.5vw);  
  --chosen-font-size:calc(14px + 0.5vw);  
  --linkColor:#5270AD;  
  --linkColorHover:#204d74;
  --p-default:#585b72;
  --p-selected:#1873DF;
  --p-black:#444444;
  --p-blue:#4E689E;/*#4E689E #2E3F8D; #5F86A9; */
  --p-blueDark:#204d74;
  --p-blueHover:#5270AD;
  --p-blue1:#70B0E3;
  --p-red:#E37070;
  --p-green:#70E3B0;
  --p-gray:#888888;
  --p-gold: #BD864C;  
}

/*I removed position:relative breaks jcrop moving, watch what it broke*/
*{font-family:Montserrat,arial;letter-spacing:0.25px;} /*z-index would not take effect when position is static */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;touch-action:manipulation}
/* add these two lines to simulate quirks mode */
html, body {height: 100%;margin: 0;padding: 0;}

body {
  background-color:#FFFFFF;
  animation: fadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}



@media screen and (max-device-width: 480px){
  body{-webkit-text-size-adjust: 100%;} /*fix: mobile safari make fonts bigger for no reason on horizontal*/
}


@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}  

html{scroll-behavior: smooth;box-sizing: border-box;/*force padding to inside div border*/} 
*, *:before, *:after {box-sizing: inherit; /*force padding to inside div border*/}
* {-webkit-tap-highlight-color: rgba(0,0,0,0);} /*fix iPhone flickering a gray background when click*/
body{min-height:fit-content;color:var(--p-black);padding:0px;margin:0px;} /*I took out  it was causing to modal Iframe have a scroll bar*/
p{margin-top:0px;}
a:link,a:visited,a:hover,a:active {}
#waitMask {display:none;position:fixed;z-index:10000;top:0;left:0;height:100%;width:100%;background:rgba(250,250,250,.6) url('img/loading.gif') 50% 50% no-repeat;background-size: 50px 50px;pointer-events:auto}
table{width:100%;border-spacing:0px;border-collapse:collapse;padding:0px;}
td,th{vertical-align:top;}
blockquote {margin: 7px 0px 0px 0px;}

hbr {
    display: block !important;
    height: 5px !important; /* Using pixels is sometimes easier to see than em */
    clear: both;            /* Ensures it pushes past floated elements */
    width: 100%;∂a
}

/*Input Select boxes*/
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{/* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none;margin: 0; /* <-- Apparently some margin are still there even though it's hidden */}
::placeholder{color:#BBBBBB;}
/*hide the spinners from numeric input boxes*/
input[type=number]{ -moz-appearance:textfield; /* Firefox */}
input,textarea,select{width:100%;border:1px solid #DDDDDD;outline:0;font-size:var(--n-size);padding:4px 4px 4px 6px;color:var(--p-black);-webkit-appearance:none;border-radius:5px;box-shadow:none;}
input[type=text] {
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}

h1{font-size:var(--l-size);font-weight:normal;margin:10px 0px 10px 0px;}
h2{font-size:var(--n-size);font-weight:600;margin:10px 0px 5px 0px;}
h3{font-size:var(--s-size);font-weight:600;margin:10px 0px 3px 0px;}
li{margin:0px 0px 0px 4px;}

.ellipsis{white-space:nowrap;overflow:hidden;text-overflow: ellipsis;width: 100%;max-width:0;}
.goOption{xcolor:#666666;}
.goFont{font-size:var(--n-size);}
.goHead{color:var(--p-blue);}
.goUl{color:var(--p-blue);}
/*.goPlaceHolder{color:var(--p-blue);};*/


.centered {position:fixed;top:50%;left:25%;right:25%;}
.unselectable{-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;user-select: none;}
.noSelect{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.readOnly{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0px;background-color:#F4F4F4;border-radius:5px;spellcheck:false;pointer-events:none;} 
.button{margin-top:5px;font-size:var(--n-size);}
.link{cursor:pointer;padding-right:6px;color:var(--linkColor);font-weight:600;}
.link:hover{background-color:#F0F0F0;}        
.linkHover {cursor:pointer;}
.linkHover:hover {}
.valueBg{font-size:var(--n-size);background-color:#F4F4F4;padding:2px 4px 2px 4px;width:100%;} 
.uLink {color:var(--linkColor);font-weight:600;text-decoration:underline;cursor:pointer;}
.uLink:hover {color:var(--linkColorHover);}

.inputLabel{font-size:var(--s-size);color:var(--p-gray);padding:0px 0px 2px 4px;}
.inputValue{font-size:var(--n-size);outline:0;background-color:#F4F4F4;padding:2px 4px 0px 4px;min-width:100px;min-height:1.6em;}

.bottomLine{border-bottom:1px solid #DDD;}
.topLine{border-top:1px solid #DDD;}
.banner{border-top:2px solid #DDD;border-bottom:2px solid #DDD;padding-top:5px;padding-bottom:5px;}
@media print {.noPrint{display:none;}}

/*Buttons*/
.btn{display:inline-block;background:none;margin:5px 10px 0px 0px;border-radius:10px;padding:10px 10px;min-width:80px;font-size:14px;font-weight:400;transition:all .2s;}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.4;}
.btn-gray {border:1px solid #444;color:#444;}
.btn-gray-primary {border:none;background-color:#888;color:#fff;}
.btn-red{border:1px solid #DB483D;background-color:#FFF;color:#DB483D;}
.btn-red-primary {border:none;background-color:#DB483D;color:#fff;}
.btn-blue {border:1px solid #3574d4;color:#3574d4;}
.btn-blue-primary {border:none;background-color:#3574d4;color:#fff;}
.btn-green {border:1px solid #18a058;color:#18a058;}
.btn-green-primary {border:none;background-color:#18a058;color:#fff;}

.buttonPrimary {
    background-color:var(--p-blue);
    border:1px solid var(--p-blue);
    color:#FFF;;
    font-size:var(--s-size);
    border-radius: 6px;
    padding:6px 12px 6px 12px;
    -webkit-appearance: none;
    outline:none;cursor:pointer;
}
.buttonPrimary:hover {background-color:var(--p-blueHover)}

.buttonSecondary {
    background-color:#FFFFFF;
    border:1px solid var(--p-blue);
    color:color:var(--p-blue);
    font-size:var(--s-size);
    border-radius: 6px;
    padding:6px 12px 6px 12px;
    -webkit-appearance: none;
    outline:none;cursor:pointer;
}
.buttonSecondary:hover {background-color:#EEEEEE;}

.buttonSecondary:disabled,
.buttonSecondary[disabled],
.buttonPrimary:disabled,
.buttonPrimary[disabled]{
  border: 1px solid #BBBBBB;
  background-color: #F0F0F0;
  color: #BBBBBB;
  cursor: not-allowed;
}

.buttonNav {
  background: #E8412C;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 6px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.buttonNav-primary {
  background: #1B4FD8;
  color: white;
}

.buttonNav:hover {
  background: #c93020;
  transform: scale(1.03);
}

.buttonNav:active {
  background: #b02a1c;
  transform: scale(0.97);
}
.goDialog{
  width:90%;
  max-width:500px;

}

.modal_iframe-container {
  width: 100%; /* Full width of its container */
  height: 100vh; /* Full height of the viewport */
  position: relative; /* Allows absolute positioning inside */
  box-sizing: border-box; /* Includes padding and border in width and height */
  background-color: #f0f0f0; /* Just for visual reference */
}

/* modal_iframe style */
modal_iframe {position: absolute;top: 10px;left: 10px;right: 10px;bottom: 10px;
  width: calc(100% - 20px); /* 100% of the parent width minus the margins */
  height: calc(100% - 20px); /* 100% of the parent height minus the margins */
  border: none; /* Remove modal_iframe border */
}
.modal_close-btn {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 30px;
  height: 30px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  z-index: 101; /* Ensure it stays on top of the iframe */
}

/*CHECKBOX AND RADIOBOXES*/
.cssCheckboxContainer {display: block;position: relative;padding-left: 28px;cursor: pointer;font-size: 14px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
/* Hide the browser's default checkbox */
.cssCheckboxContainer input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
/* Create a custom checkbox */
.cssCheckbox {position: absolute;top:0;left:0;height: 20px;width: 20px;background-color: #eee;border:solid 2px #2196F3;}
/* On mouse-over, add a grey background color */
.cssCheckboxContainer:hover input ~ .cssCheckbox{background-color: #ccc;}
/* When the checkbox is checked, add a blue background */
.cssCheckboxContainer input:checked ~ .cssCheckbox{background-color: #2196F3;}
/* Create the cssCheckbox/indicator (hidden when not checked) */
.cssCheckbox:after{content:"";position:absolute;display:none;}
/* Show the cssCheckbox when checked */
.cssCheckboxContainer input:checked ~ .cssCheckbox:after{display: block;}
/* Style the cssCheckbox/indicator */
.cssCheckboxContainer .cssCheckbox:after{left:6px;top:2px;width:5px;height:10px;border:solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}

.cssRadioContainer {display: block;position:relative;min-height:28px;padding:3px 0px 0px 35px;margin-bottom:12px;cursor: pointer;font-size: 14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select: none;user-select: none;font-weight:normal;}

/* Hide the browser's default radio button */
.cssRadioContainer input {position: absolute;opacity:0;cursor: pointer;width:0px;background-color:yellow}
/* Create a custom radio button */
.cssRadio {position: absolute;top:0;left:0;height:25px;width: 25px;background-color:#eee;border-radius:50%;}
/* On mouse-over, add a grey background color */
.cssRadioContainer:hover input ~ .cssRadio{background-color: #ccc;}
/* When the radio button is checked, add a blue background */
.cssRadioContainer input:checked ~ .cssRadio {background-color:#2196F3;}
/* Create the indicator (the dot/circle - hidden when not checked) */
.cssRadio:after {content: "";position:absolute;display: none;}
/* Show the indicator (dot/circle) when checked */
.cssRadioContainer input:checked ~ .cssRadio:after{display: block;}
/* Style the indicator (dot/circle) */
.cssRadioContainer .cssRadio:after{top:9px;left:9px;width:8px;height:8px;border-radius:50%;background: white;}


.noScroll {
  height: 200px;
  overflow-y: scroll;
}

.noScroll::-webkit-scrollbar {
  display: none; /* Hides the scrollbar */
}

/*Rounded table*/
.roundedTable {
  border-collapse: separate;
  border-spacing: 0;
}

.roundedTable tr td {
  border-right: 2px solid var(--linkColor);
  border-bottom: 2px solid var(--linkColor);
  padding: 5px;
}
.roundedTable tr td:first-child {
  border-left: 2px solid var(--linkColor);
}
.roundedTable tr td {
  background: #fff;
  border-top: 2px solid var(--linkColor);
  text-align: left;
}

/* top-left border-radius */
.roundedTable tr:first-child td:first-child {
  border-top-left-radius: 9px;
}

/* top-right border-radius */
.roundedTable tr:first-child td:last-child {
  border-top-right-radius: 9px;
}

/* bottom-left border-radius */
.roundedTable tr:last-child td:first-child {
  border-bottom-left-radius: 9px;
}

/* bottom-right border-radius */
.roundedTable tr:last-child td:last-child {
  border-bottom-right-radius: 9px;
}

/*menu*/
.menuButton{width:400px;padding:5px 10px 5px 10px;font-size:var(--s-size);text-decoration:none;color:#333333;background-color:#FFFFFF;border-bottom:1px solid #EEE;cursor:pointer;}
.menuButton:hover{background-color:#F8F8F8;text-decoration:none;}




/*Autocomplete:*/
.autocomplete {
    position: relative;
    display: inline-block;
}


.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    font-size: 14px;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
    box-shadow:0 6px 12px rgba(0,0,0,0.175);
}
.autocomplete-items div {
  padding:2px 4px 2px 6px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}
/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #2E3F8D;
  color: #FFFFFF;
}
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}


/* xTOOLTIP */
.xTooltip {
  position: relative;
  width:fit-content;
  cursor:pointer;
  text-decoration:underline;
}

/*.xTooltip:hover .xTooltip-content{opacity: 1;}*/

.xTooltip .xTooltip-content {

  background: #333333;
  box-shadow: 0 5px 25px 5px rgba(205, 210, 214, 0.8);
  box-sizing: border-box;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 1px;
  min-width: 145px;
  padding: 1em;
  position: absolute;
  /*opacity: 0;*/
  display:none;
  transition: all 0.3s ease;
  border-radius:6px;
  z-index:999;
  /*pointer-events: none;*/

}
.xTooltip .xTooltip-content::after {
  background: #333333;
  content: "";
  height: 10px;
  position: absolute;
  transform: rotate(45deg);
  width: 10px;
}

.xTooltip.top .xTooltip-content {
  bottom: calc(100% + 1em);
  left: 50%;
  transform: translateX(-50%);
}
.xTooltip.top .xTooltip-content::after {
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
}
/*  */
.xTooltip.bottom .xTooltip-content {
  top: calc(100% + 1em);
  left: 100px;
  transform: translateX(-50%);
}
.xTooltip.bottom .xTooltip-content::after {
  top: -5px;
}

.xTooltip.right .xTooltip-content {
  left: calc(100% + 1.5em);
  top: 50%;
  transform: translateY(-50%);
}
.xTooltip.right .xTooltip-content::after {
  left: -5px;
  margin-top: -5px;
  top: 50%;
}

.xTooltip.left .xTooltip-content {
  right: calc(100% + 1.5em);
  top: 50%;
  transform: translateY(-50%);
}
.xTooltip.left .xTooltip-content::after {
  right: -5px;
  margin-top: -5px;
  top: 50%;
}


/* CSS LEFT MENU */
.left-menu  {
  padding: 0;
  margin: 0;
  position: relative;
  width:fit-content;
}

.left-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align:left;
  font-size:14px;
}

.left-menu li {
  padding: 10px;
  position: relative;
}

.left-menu li:hover {
  background: #DDDDDD; /*hovered bg color*/
  /*z-index:1000;vdisallows to opening of adjacent other menus*/
}

 .left-nested-menu {
  display: block;
  background-color: #F0F0F0; /*menu bg color*/
  width: fit-content;
  white-space:nowrap;
  top: 0px;
  left: 0px;
  border-radius:8px;
  z-index:1;          /*disallows to opening of adjacent other menus*/
}

.left-nested-submenu 
{
  position:absolute;
  border-radius:8px;
}

.left-menu .left-nested-category .left-nested-menu
{
  width:auto;
  white-space:nowrap;
  top: 0px;
}


.left-menu .left-nested-subcategory {padding:8px;}

.left-menu .left-nested-subcategory:hover .left-nested-submenu
{
  display: block;
}

.left-menu .left-nested-submenu {
  top: 0;
  display: none;
  left: 100%;
  width:auto;
  background-color: #E8E8E8; /*menu bg color*/
  white-space:nowrap;
}

.left-menu li
{
  cursor:pointer;
  border-radius:8px;
}


/* CSS RIGHT MENU */
.right-menu * {
  padding: 0;
  margin: 0;
}

.right-menu  {
  align-items: center;
}
.right-menu strong {
  margin-right: 5px;
  margin-right: auto;
}

.right-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align:left;
  font-size:14px;
}

.right-menu li {
  padding: 5px;
  position: relative;
}

.right-menu li:hover {
  background: #DDDDDD; /*hovered bg color*/
  z-index:2;          /*disallows to opening of adjacent other menus*/  
  color:#333;

}

.right-menu .right-nested-menu,
.right-menu .right-nested-submenu {
  /*display: none;*/
  visibility: hidden;
  opacity: 0;

  position: absolute;
  background-color: #F0F0F0; /*menu bg color*/
  width: 150px;
  top: 0x;
  right:23px;
  border-radius:8px;
  z-index:1;          /*disallows to opening of adjacent other menus*/
}

.right-menu .right-nested-category .right-nested-menu
{
  width:auto;
  white-space:nowrap;
  top: 0px;
}

.right-menu .right-nested-category:hover .right-nested-menu,
.right-menu .right-nested-subcategory:hover .right-nested-submenu
{
  display: block;
  visibility: visible;
  opacity: 1;
}

.right-menu .right-nested-submenu {
  top: 0;
  right: 100%;
  width:auto;
  white-space:nowrap;
}

.right-menu li
{
  cursor:pointer;
  border-radius:8px;
}



.itemOption  {display:inline-block;padding:5px;min-width:50px;text-align:center;margin:0px 10px 5px 0px;border:2px solid #AAAAAA;color:#AAAAAA;border-radius:6px;width:fit-content;cursor:pointer;font-size:14px;}
.itemSelected{display:inline-block;padding:5px;margin:0px 10px 0px 0px;border:2px solid #D20595;color:#D20595;border-radius:6px;width:fit-content;cursor:pointer;}

.icyBg{background:rgba(255,255,255,0.88);box-shadow: 1px 2px 4px rgba(0,0,0,0.3);}

.shadow{-webkit-box-shadow: 0px 3px 11px -2px rgba(0,0,0,0.77); box-shadow: 0px 3px 11px -2px rgba(0,0,0,0.77);border-radius:8px;margin-bottom:15px;}
.shadowLight{-webkit-box-shadow: 10px 10px 21px -2px rgba(0,0,0,0.33); box-shadow: 10px 10px 21px -2px rgba(0,0,0,0.33);border-radius:8px;margin-bottom:15px;} /* offset-x | offset-y | blur-radius | spread-radius | color */
.boxShadow {-moz-box-shadow:1px 1px 4px 1px #ccc;-webkit-box-shadow:1px 1px 4px 1px #DDD;box-shadow:1px 1px 4px 1px #BBB;border: 0px solid #EEE;border-style: solid;-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;outline:none;}

.outerglow {
    color: #888;
    text-shadow:
        1px  0   0 #fff,
        -1px  0   0 #fff,
        0    1px 0 #fff,
        0   -1px 0 #fff,
        1px  0   0 #000,
        -1px  0   0 #000,
        0    1px 0 #000,
        0   -1px 0 #000;
}

.btnAddToCart{
  border-radius: 1rem;
  line-height: 1.5;
  font-size: 13px; 
  border-width: 1px;
  padding: .5rem 1rem .5rem 1rem;
  background-color: #67D04e;
  border-color: #331359;
  color: white;
  width:fit-content;
  white-space:nowrap;
}

/*TOOLTIP*/
.ttl {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #565656;
  cursor:pointer;
}

.ttl .ttlText {
  width: 220px;
  margin-left: -20px;  
  visibility: hidden;  
  background-color:#565656;
  color:#FFFFFF;
  text-align: left;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  top: 150%;
}

.ttl .ttlText::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 5%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #565656 transparent;
}

.ttl:hover .ttlText {
  visibility: visible;
}

.ttm {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #565656;
  cursor:pointer;
}

.ttm .ttmText {
  width: 220px;
  margin-left: -120px;
  visibility: hidden;
  background-color: #565656;
  color:#FFFFFF;
  text-align: left;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  top: 150%;
}

.ttm .ttmText::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #565656 transparent;
}

.ttm:hover .ttmText {
  visibility: visible;
}

.ttr {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #565656;
  cursor:pointer;
}

.ttr .ttrText {
  width: 220px;
  margin-left: -195px;  
  visibility: hidden;	
  background-color: #565656;
  color:#FFFFFF;
  text-align: left;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
}

.ttr .ttrText::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 9%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #565656 transparent;
}

.ttr:hover .ttrText {
  visibility: visible;
}
/*TOGGLE*/
.toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;

  appearance: none;
  width: 50px;
  height: 24px;
  display: inline-block;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  outline: none;
  border: none;
  cursor: pointer;
  background-color: #707070;
  transition: background-color ease 0.3s;
}

.toggle:before {
  content: "on off";
  display: block;
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  background: #fff;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  font: 10px/28px Helvetica;
  text-transform: uppercase;
  line-height: 2em;
  font-weight: bold;
  text-indent: -22px;
  word-spacing: 27px;
  color: #fff;
  text-shadow: -1px -1px rgba(0,0,0,0.15);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}

.toggle:checked {
  background-color: #4CD964;
}

.toggle:checked:before {
  left: 28px;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">