:root {
  --color: #ff211a;
  /* --light-red: #FFCDCB; */
  --light-red: #f2f2f2 !important;
  --gradient-blue: #33b3a6;
  --unit: calc(100vw / 320);
  --text-black: #000000;
  --gray: #404040;

}

* {
  /* user-select: none !important; */
  font-family: "Urbanist", sans-serif;
}


.logo img {
  width: 150px;
}
.text-black{
  color: var(--text-black) !important;
}

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

.text-blue {
  color: var(--gradient-blue) !important;
}
.text-gray-light  {
  color: #f2f2f2 !important;
}
.text-gray {
  color: #404040 !important;
}
.text-light-purple {
  color: #4c356b !important;
}

.text-gradient-blue {
  color: var(--gradient-blue) !important;
}

.bg-red {
  background-color: var(--color) !important;
}

.bg-gray-light {
  background-color: #f2f2f2 !important;
}

.bg-dark-blue {
  background-color: var(--gradient-blue)!important;
}
.bg-blue{
  background-color: #46b1e1 !important;
}

.bg-gradient-blue {
  background: linear-gradient(0deg, #91d4ff, #46b1e1) !important;
}

.bg-gradient-gray-light {
  background: linear-gradient(0deg, #d9d9d9, #f2f2f2) !important;
}
.bg-gradient-gray {
  background: linear-gradient(0deg,#f2f2f2 , #d9d9d9) !important;
}

.bo-blue-1 {
  border: calc(var(--unit)*1) solid var(--gradient-blue) !important;
}

/* .bo-gradient-blue-1 {
  border-image: calc(var(--unit)*1) solid linear-gradient(0deg, #91d4ff, #46b1e1) !important;
} */
.bo-gradient-blue-1 {
  border-image: calc(var(--unit)*1) solid linear-gradient(0deg, #91d4ff, #46b1e1) !important;
}


/* Shadow */
.box-shadow {
  box-shadow: 0vw 0.625vw 1.875vw #bcbcbc, 0vw -0.625vw 1.875vw #ffffff;
}

.border-red {
  border: 10px solid var(--color);
}

.border-red {
  border: 10px solid var(--color);
}

.border-right-red {
  border-right: solid var(--color);
}

.border-purple {
  border: 10px solid #4c356b;
}
.border-light-red {
  border: calc(var(--unit) * 1.5) solid var(--light-red);
}

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

.border-bottom-dark-red {
  border-bottom: 1px solid var(--color);
}
.border-bottom-blue {
  border-bottom: calc(var(--unit) * 1) solid var(--gradient-blue)!important;
 
  
}


.steps>span>.tracker {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin: auto;
  text-align: center;
}

.app-options {
  width: 200px;
  height: 200px;
  margin: auto;
}

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

.charts-container:after {
  clear: both;
  content: "";
  display: table;
}

.pie-wrapper {
  height: 1em;
  width: 1em;
  float: left;
  margin: 15px;
  position: relative;
}

.pie-wrapper:nth-child(3n + 1) {
  clear: both;
}

.pie-wrapper .pie {
  height: 100%;
  width: 100%;
  clip: rect(0, 1em, 1em, 0.5em);
  left: 0;
  position: absolute;
  top: 0;
}

.pie-wrapper .pie .half-circle {
  height: 100%;
  width: 100%;
  border: 0.1em solid #3498db;
  border-radius: 50%;
  clip: rect(0, 0.5em, 1em, 0);
  left: 0;
  position: absolute;
  top: 0;
}

.pie-wrapper .label {
  background: #34495e;
  border-radius: 50%;
  bottom: 0.4em;
  color: #ecf0f1;
  cursor: default;
  display: block;
  font-size: 0.25em;
  left: 0.4em;
  line-height: 2.8em;
  position: absolute;
  right: 0.4em;
  text-align: center;
  top: 0.4em;
}

.pie-wrapper .label .smaller {
  color: var(--color);
  font-size: 0.45em;
  padding-bottom: 20px;
  vertical-align: super;
}

.pie-wrapper .shadow {
  height: 100%;
  width: 100%;
  border: 0.1em solid #fff;
  border-radius: 50%;
}

.pie-wrapper.style-2 .label {
  background: none;
  color: var(--color);
}

.pie-wrapper.style-2 .label .smaller {
  color: var(--color);
}

.pie-wrapper.progress-95 .pie {
  clip: rect(50px, 50px, auto, auto);
}

.pie-wrapper.progress-95 .pie .half-circle {
  border-color: #e74c3c;
}

.pie-wrapper--solid {
  border-radius: 50%;
  overflow: hidden;
}

.pie-wrapper--solid:before {
  border-radius: 0 100% 100% 0/50%;
  content: "";
  display: block;
  height: 100%;
  margin-left: 50%;
  transform-origin: left;
}

.pie-wrapper--solid .label {
  background: transparent;
}

.countingBox {
  width: 220px;
  height: 180px;
}

.clickable {
  transition: all 0.2s ease-in-out;
  /* box-shadow: 8px 8px 12px -2px rgba(72, 79, 96, 0.4), -6px -6px 12px -1px white; */
  cursor: pointer;
}

.cursor-pointer {
  cursor: pointer;
}

.clickable:active {
  transform: scale(0.95);
  /* box-shadow: 4px 4px 8px -1px rgba(72, 79, 96, 0.4), -3px -3px 8px -0.5px white; */
}

.custom-rounded {
  /* Adding !important to override other styles */
  border-top-left-radius: 50px !important;
  border-top-right-radius: 50px !important;
  border-bottom-left-radius: 50px !important;
  border-bottom-right-radius: 50px !important;
}


/* width */
.uw-1 {
  width: calc(var(--unit)* 1) !important;
}

.uw-2 {
  width: calc(var(--unit)* 2) !important;
}

.uw-3 {
  width: calc(var(--unit)* 3) !important;
}

.uw-4 {
  width: calc(var(--unit)* 4) !important;
}

.uw-6 {
  width: calc(var(--unit)* 6) !important;
}

.uw-10 {
  width: calc(var(--unit)* 10) !important;
}

.uw-11 {
  width: calc(var(--unit)* 11) !important;
}

.uw-12 {
  width: calc(var(--unit)* 12) !important;
}

.uw-13 {
  width: calc(var(--unit)* 13) !important;
}

.uw-14 {
  width: calc(var(--unit)* 14) !important;
}
.uw-16 {
  width: calc(var(--unit)* 16) !important;
}

.uw-24 {
  width: calc(var(--unit)* 24) !important;
}
.uw-20 {
  width: calc(var(--unit)* 20) !important;
}

.uw-30 {
  width: calc(var(--unit)* 30) !important;
}

.uw-32 {
  width: calc(var(--unit)* 32) !important;
}

.uw-31 {
  width: calc(var(--unit)* 31) !important;
}
.uw-25 {
  width: calc(var(--unit)* 25) !important;
}

.uw-28 {
  width: calc(var(--unit)* 28) !important;
}

.uw-36 {
  width: calc(var(--unit)* 36) !important;
}

.uw-38 {
  width: calc(var(--unit)* 38) !important;
}

.uw-40 {
  width: calc(var(--unit)* 40) !important;
}


.uw-44 {
  width: calc(var(--unit)* 44) !important;
}

.uw-48 {
  width: calc(var(--unit) * 48) !important;
}

.uw-56 {
  width: calc(var(--unit) * 56) !important;
}

.uw-50 {
  width: calc(var(--unit) * 50) !important;
}

.uw-60 {
  width: calc(var(--unit) * 60) !important;
}
.uw-67{
  width: calc(var(--unit) * 67) !important;
}
.uw-70 {
  width: calc(var(--unit) * 70) !important;
}
.uw-75 {
  width: calc(var(--unit) * 70) !important;
}
.uw-80 {
  width: calc(var(--unit) * 80) !important;
}
.uw-90 {
  width: calc(var(--unit) * 90) !important;
}

.uw-110 {
  width: calc(var(--unit) * 110) !important;
}
.uw-120 {
  width: calc(var(--unit) * 120) !important;
}
.uw-129 {
  width: calc(var(--unit) * 129) !important;
}
.uw-130 {
  width: calc(var(--unit) * 130) !important;
}
.uw-140 {
  width: calc(var(--unit) * 140) !important;
}
.uw-143 {
  width: calc(var(--unit) * 143) !important;
}

.uw-152 {
  width: calc(var(--unit) * 152) !important;
}
.uw-154 {
  width: calc(var(--unit) * 154) !important;
}
.uw-156 {
  width: calc(var(--unit) * 156) !important;
}

.uw-160{
  width: calc(var(--unit) * 160) !important;
}
.uw-170 {
  width: calc(var(--unit) * 170) !important;
}
.uw-180 {
  width: calc(var(--unit) * 180) !important;
}
.uw-190 {
  width: calc(var(--unit) * 190) !important;
}
.uw-200 {
  width: calc(var(--unit) * 200) !important;
}
.uw-210 {
  width: calc(var(--unit) * 210) !important;
}
.uw-280 {
  width: calc(var(--unit) * 280) !important;
}
.uw-300{
  width: calc(var(--unit) * 300) !important;
}
.uw-315{
  width: calc(var(--unit) * 315) !important;
}
.uw-320 {
  width: calc(var(--unit) * 320) !important;
}



/* height */
.uh-1 {
  height: calc(var(--unit) * 1) !important;
}

.uh-3 {
  height: calc(var(--unit) * 3) !important;
}

.uh-4 {
  height: calc(var(--unit) * 4) !important;
}

.uh-5 {
  height: calc(var(--unit) * 5) !important;
}

.uh-6 {
  height: calc(var(--unit) * 6) !important;
}

.uh-7 {
  height: calc(var(--unit) * 7) !important;
}

.uh-8 {
  height: calc(var(--unit) * 8) !important;
}

.uh-9 {
  height: calc(var(--unit) * 9) !important;
}

.uh-10 {
  height: calc(var(--unit) * 10) !important;
}

.uh-12 {
  height: calc(var(--unit) * 12) !important;
}

.uh-14 {
  height: calc(var(--unit) * 14) !important;
}

.uh-16 {
  height: calc(var(--unit) * 16) !important;
}

.uh-17 {
  height: calc(var(--unit) * 17) !important;
}

.uh-18 {
  height: calc(var(--unit) * 18) !important;
}
.uh-20 {
  height: calc(var(--unit) * 20) !important;
}

.uh-26 {
  height: calc(var(--unit) * 26) !important;
}

.uh-28 {
  height: calc(var(--unit) * 28) !important;
}

.uh-30 {
  height: calc(var(--unit) * 30) !important;
}

.uh-36 {
  height: calc(var(--unit) * 36) !important;
}

.uh-38 {
  height: calc(var(--unit) * 38) !important;
}

.uh-40 {
  height: calc(var(--unit) * 40) !important;
}

.uh-44 {
  height: calc(var(--unit) * 44) !important;
}

.uh-48 {
  height: calc(var(--unit) * 48) !important;
  /* height: 200px; */
}

.uh-56 {
  height: calc(var(--unit) * 56) !important;
  /* height: 200px; */
}

.uh-60 {
  height: calc(var(--unit) * 60) !important;
  /* height: 200px; */
}
.uh-70 {
  height: calc(var(--unit) * 70) !important;
  /* height: 200px; */
}
.uh-80 {
  height: calc(var(--unit) * 80) !important;
  /* height: 200px; */
}


.uh-90 {
  height: calc(var(--unit) * 90) !important;
  /* height: 200px; */
}
.uh-100 {
  height: calc(var(--unit) * 90) !important;
  /* height: 200px; */
}
.uh-110 {
  height: calc(var(--unit) * 90) !important;
  /* height: 200px; */
}
.uh-115 {
  height: calc(var(--unit) * 115) !important;
  /* height: 200px; */
}

.uh-120 {
  height: calc(var(--unit) * 120) !important;
  /* height: 200px; */
}
.uh-122 {
  height: calc(var(--unit) * 122) !important;
  /* height: 200px; */
}
.uh-130 {
  height: calc(var(--unit) * 130) !important;
  /* height: 200px; */
}
.uh-140 {
  height: calc(var(--unit) * 140) !important;
  /* height: 200px; */
}
.uh-144{
  height: calc(var(--unit) * 144) !important;
  /* height: 200px; */
}
.uh-146{
  height: calc(var(--unit) * 146) !important;
  /* height: 200px; */
}
.uh-150{
  height: calc(var(--unit) * 150) !important;
  /* height: 200px; */
}
.uh-160{
  height: calc(var(--unit) * 160) !important;
  /* height: 200px; */
}
.uh-170{
  height: calc(var(--unit) * 170) !important;
  /* height: 200px; */
}
.uh-200{
  height: calc(var(--unit) * 200) !important;
  /* height: 200px; */
}
.uh-250{
  height: calc(var(--unit) * 250) !important;
  /* height: 200px; */
}
.uh-300{
  height: calc(var(--unit) * 300) !important;
  /* height: 200px; */
}
.uh-400{
  height: calc(var(--unit) * 400) !important;
  /* height: 200px; */
}


/* border-Radius */
.br-1 {
  border-radius: calc(var(--unit) * 1) !important;
}

.br-2 {
  border-radius: calc(var(--unit) * 2) !important;
}

.br-3 {
  border-radius: calc(var(--unit) * 3) !important;
}

.br-4 {
  border-radius: calc(var(--unit) * 4) !important;
}

.br-5 {
  border-radius: calc(var(--unit) * 5) !important;
}

.br-6 {
  border-radius: calc(var(--unit) * 6) !important;
}

.br-7 {
  border-radius: calc(var(--unit) * 7) !important;
}

.br-8 {
  border-radius: calc(var(--unit) * 8) !important;
}
.br-10 {
  border-radius: calc(var(--unit) * 10) !important;
}

.br-18 {
  border-radius: calc(var(--unit) * 18) !important;
}

.br-20 {
  border-radius: calc(var(--unit) * 20) !important;
}


.br-22 {
  border-radius: calc(var(--unit) * 22) !important;
}

.br-23 {
  border-radius: calc(var(--unit) * 23) !important;
}

.br-30 {
  border-radius: calc(var(--unit) * 30) !important;
}

/* Fontsize */

.ufs-1 {
  font-size: calc(var(--unit) *1) !important;
}

.ufs-2 {
  font-size: calc(var(--unit) * 2) !important;
}

.ufs-3 {
  font-size: calc(var(--unit) * 3) !important;
}

.ufs-4 {
  font-size: calc(var(--unit) * 4) !important;
}

.ufs-5 {
  font-size: calc(var(--unit) * 5) !important;
}

.ufs-6 {
  font-size: calc(var(--unit) * 6) !important;
}

.ufs-7 {
  font-size: calc(var(--unit) * 7) !important;
}

.ufs-8 {
  font-size: calc(var(--unit) * 8) !important;
}

.ufs-9 {
  font-size: calc(var(--unit) * 9) !important;
}

.ufs-10 {
  font-size: calc(var(--unit) * 10) !important;
}
.ufs-11 {
  font-size: calc(var(--unit) * 11) !important;
}
.ufs-12 {
  font-size: calc(var(--unit) * 12) !important;
}
.ufs-13 {
  font-size: calc(var(--unit) * 13) !important;
}
.ufs-14 {
  font-size: calc(var(--unit) * 14) !important;
}

/* padding */
.up-1 {
  padding: calc(var(--unit) * 1) !important;
}

.up-2 {
  padding: calc(var(--unit) * 2);
}

.up-3 {
  padding: calc(var(--unit) * 3);
}

.up-4 {
  padding: calc(var(--unit) * 4);
}

.up-5 {
  padding: calc(var(--unit) * 5);
}

.up-6 {
  padding: calc(var(--unit) * 6);
}

.up-7 {
  padding: calc(var(--unit) * 7);
}

.up-8 {
  padding: calc(var(--unit) * 8);
}

.up-9 {
  padding: calc(var(--unit) * 9);
}

.up-10 {
  padding: calc(var(--unit) * 10);
}

.up-12 {
  padding: calc(var(--unit) * 12);
}
.up-16 {
  padding: calc(var(--unit) * 16);
}

/* Base class for padding */
/* Base class for padding */
.upx {
  padding: 0;
  /* Default no padding */
}

/* Classes for horizontal padding values from 1 to 12 */
.upx-1 {
  padding-left: calc(var(--unit) * 1) !important;
  padding-right: calc(var(--unit) * 1) !important;
}

.upx-2 {
  padding-left: calc(var(--unit) * 2) !important;
  padding-right: calc(var(--unit) * 2) !important;
}

.upx-3 {
  padding-left: calc(var(--unit) * 3) !important;
  padding-right: calc(var(--unit) * 3) !important;
}

.upx-4 {
  padding-left: calc(var(--unit) * 4) !important;
  padding-right: calc(var(--unit) * 4) !important;
}

.upx-5 {
  padding-left: calc(var(--unit) * 5) !important;
  padding-right: calc(var(--unit) * 5) !important;
}

.upx-6 {
  padding-left: calc(var(--unit) * 6) !important;
  padding-right: calc(var(--unit) * 6) !important;
}
.upx-7 {
  padding-left: calc(var(--unit) * 7) !important;
  padding-right: calc(var(--unit) * 7) !important;
}
.upx-8 {
  padding-left: calc(var(--unit) * 8) !important;
  padding-right: calc(var(--unit) * 8) !important;
}
.upx-9 {
  padding-left: calc(var(--unit) * 9) !important;
  padding-right: calc(var(--unit) * 9) !important;
}
.upx-10 {
  padding-left: calc(var(--unit) * 10) !important;
  padding-right: calc(var(--unit) * 10) !important;
}

.upx-12 {
  padding-left: calc(var(--unit) * 12) !important;
  padding-right: calc(var(--unit) * 12) !important;
}
.upx-13 {
  padding-left: calc(var(--unit) * 13) !important;
  padding-right: calc(var(--unit) * 13) !important;
}
.upx-14 {
  padding-left: calc(var(--unit) * 14) !important;
  padding-right: calc(var(--unit) * 14) !important;
}
.upx-15 {
  padding-left: calc(var(--unit) * 15) !important;
  padding-right: calc(var(--unit) * 15) !important;
}
.upx-17 {
  padding-left: calc(var(--unit) * 17) !important;
  padding-right: calc(var(--unit) * 17) !important;
}
.upx-20 {
  padding-left: calc(var(--unit) * 20) !important;
  padding-right: calc(var(--unit) * 20) !important;
}
.upx-25 {
  padding-left: calc(var(--unit) * 25) !important;
  padding-right: calc(var(--unit) * 25) !important;
}
.upx-30 {
  padding-left: calc(var(--unit) * 30) !important;
  padding-right: calc(var(--unit) * 30) !important;
}


/* Vertical padding classes */
.upy-1 {
  padding-top: calc(var(--unit) * 1) !important;
  padding-bottom: calc(var(--unit) * 1) !important;
}

.upy-2 {
  padding-top: calc(var(--unit) * 2) !important;
  padding-bottom: calc(var(--unit) * 2) !important;
}

.upy-3 {
  padding-top: calc(var(--unit) * 3) !important;
  padding-bottom: calc(var(--unit) * 3) !important;
}

.upy-4 {
  padding-top: calc(var(--unit) * 4) !important;
  padding-bottom: calc(var(--unit) * 4) !important;
}

.upy-5 {
  padding-top: calc(var(--unit) * 5) !important;
  padding-bottom: calc(var(--unit) * 5) !important;
}

.upy-6 {
  padding-top: calc(var(--unit) * 6) !important;
  padding-bottom: calc(var(--unit) * 6) !important;
}
.upy-7 {
  padding-top: calc(var(--unit) * 7) !important;
  padding-bottom: calc(var(--unit) * 7) !important;
}
.upy-8 {
  padding-top: calc(var(--unit) * 8) !important;
  padding-bottom: calc(var(--unit) * 8) !important;
}
.upy-10 {
  padding-top: calc(var(--unit) * 10) !important;
  padding-bottom: calc(var(--unit) * 10) !important;
}

.upy-12 {
  padding-top: calc(var(--unit) * 12) !important;
  padding-bottom: calc(var(--unit) * 12) !important;
}
.upy-15 {
  padding-top: calc(var(--unit) * 15) !important;
  padding-bottom: calc(var(--unit) * 15) !important;
}
.upy-20 {
  padding-top: calc(var(--unit) * 20) !important;
  padding-bottom: calc(var(--unit) * 20) !important;
}
.upy-25 {
  padding-top: calc(var(--unit) * 25) !important;
  padding-bottom: calc(var(--unit) * 25) !important;
}
.upy-27 {
  padding-top: calc(var(--unit) * 27) !important;
  padding-bottom: calc(var(--unit) * 27) !important;
}
.upy-30 {
  padding-top: calc(var(--unit) * 30) !important;
  padding-bottom: calc(var(--unit) * 30) !important;
}



.upxyconnect-12 {
  padding: calc(var(--unit)*6) calc(var(--unit)*12) calc(var(--unit)*6) calc(var(--unit)*12) !important;
}
.upr-3 {
  padding-right: calc(var(--unit)*3) !important;
}
.upr-7 {
  padding-right: calc(var(--unit)*7) !important;
}

.upr-10 {
  padding-right: calc(var(--unit)*10) !important;
}

.upr-12 {
  padding-right: calc(var(--unit)*12) !important;
}

.upl-10 {
  padding-left: calc(var(--unit)*10) !important;
}

.upl-12 {
  padding-left: calc(var(--unit)*12) !important;
}
.upl-14 {
  padding-left: calc(var(--unit)*14) !important;
}


/* Top Padding */
.upt-1 {
  padding-top: calc(var(--unit) * 1) !important;
}

.upt-2 {
  padding-top: calc(var(--unit) * 2) !important;
}

.upt-3 {
  padding-top: calc(var(--unit) * 3) !important;
}

.upt-4 {
  padding-top: calc(var(--unit) * 4) !important;
}

.upt-5 {
  padding-top: calc(var(--unit) * 5) !important;
}
.upt-6 {
  padding-top: calc(var(--unit) * 6) !important;
}
.upt-7 {
  padding-top: calc(var(--unit) * 7) !important;
}
.upt-8 {
  padding-top: calc(var(--unit) * 8) !important;
}
.upt-9 {
  padding-top: calc(var(--unit) * 9) !important;
}
.upt-10 {
  padding-top: calc(var(--unit) * 10) !important;
}
.upt-23 {
  padding-top: calc(var(--unit) * 23) !important;
}
.upt-33 {
  padding-top: calc(var(--unit) * 33) !important;
}
.upb-4 {
  padding-bottom: calc(var(--unit) * 4) !important;
}
.upb-20 {
  padding-bottom: calc(var(--unit) * 20) !important;
}
.upb-10 {
  padding-bottom: calc(var(--unit) * 10) !important;
}
.upb-17 {
  padding-bottom: calc(var(--unit) * 17) !important;
}
.upb-27 {
  padding-bottom: calc(var(--unit) * 27) !important;
}


/* Negative Padding */
.upy-n1 {
  padding-top: calc(var(--unit) * -1);
  padding-bottom: calc(var(--unit) * -1);
}
.upt-n3 {
  padding-top: calc(var(--unit) * -3);
}
.upb-n1 {
  padding-bottom: calc(var(--unit) * -1);
}

/* margin */
.um-1 {
  margin: calc(var(--unit)*1);
}

.um-2 {
  margin: calc(var(--unit)*2);
}

.um-3 {
  margin: calc(var(--unit)*3);
}

.um-4 {
  margin: calc(var(--unit)*4);
}

.um-5 {
  margin: calc(var(--unit)*5);
}

.um-6 {
  margin: calc(var(--unit)*6);
}

.umy-1 {
  margin-top: calc(var(--unit) * 1) !important;
  margin-bottom: calc(var(--unit) * 1) !important;
}

.umy-2 {
  margin-top: calc(var(--unit) * 2) !important;
  margin-bottom: calc(var(--unit) * 2) !important;
}

.umy-3 {
  margin-top: calc(var(--unit) * 3) !important;
  margin-bottom: calc(var(--unit) * 3) !important;
}

.umy-4 {
  margin-top: calc(var(--unit) * 4) !important;
  margin-bottom: calc(var(--unit) * 4) !important;
}

.umy-5 {
  margin-top: calc(var(--unit) * 5) !important;
  margin-bottom: calc(var(--unit) * 5) !important;
}


.umy-6 {
  margin-top: calc(var(--unit) * 6) !important;
  margin-bottom: calc(var(--unit) * 6) !important;
  /* margin: calc(var(--unit)*6) calc(var(--unit)*0) calc(var(--unit)*6) calc(var(--unit)*0) !important; */
}
.umy-8 {
  margin-top: calc(var(--unit) * 8) !important;
  margin-bottom: calc(var(--unit) * 8) !important;
  /* margin: calc(var(--unit)*6) calc(var(--unit)*0) calc(var(--unit)*6) calc(var(--unit)*0) !important; */
}

.umy-12 {
  margin: calc(var(--unit)*12) calc(var(--unit)*0) calc(var(--unit)*12) calc(var(--unit)*0) !important;
}


.umt-1 {
  margin-top: calc(var(--unit) * 1) !important;
}

.umt-2 {
  margin-top: calc(var(--unit) * 2) !important;
}

.umt-3 {
  margin-top: calc(var(--unit) * 3) !important;
}

.umt-4 {
  margin-top: calc(var(--unit) * 4) !important;
}

.umt-5 {
  margin-top: calc(var(--unit) * 5) !important;
}

.umt-6 {
  margin-top: calc(var(--unit)*6);
}
.umx-2{
  margin-left: calc(var(--unit) * 1);
  margin-right: calc(var(--unit) *1);
}
.umx-10{
  margin-left: calc(var(--unit) * 10);
  margin-right: calc(var(--unit) * 10);
}
.umx-5{
  margin-left: calc(var(--unit) * 5);
  margin-right: calc(var(--unit) * 5);
}
.umx-20{
  margin-left: calc(var(--unit) * 20);
  margin-right: calc(var(--unit) * 20);
}
.uml-2{
  margin-left: calc(var(--unit) * 2)!important;
}



/* Negative Margin */

.umx-n10 {
  margin-left: calc(var(--unit) * -10);
  margin-right: calc(var(--unit) * -10);
}