:root {
  --color: #ff211a;
  /* --light-red: #FFCDCB; */
  --light-red: #f2f2f2 !important;
  --beige: #dddcd5 !important;
  --gradient-blue: #46b1e1;
  --unit: calc(100vw / 320);
}

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

.logo img {
  width: 150px;
}

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

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

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

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

.bg-beige {
  background-color: var(--beige);
}

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

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

.bg-gray-white {
  background: #d9d9d9 !important;
}

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

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

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

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

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

.bo-blue {
  border-color: 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-right-red {
  border-right: solid var(--color);
}

.border-purple {
  border: 10px solid #4c356b;
}

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

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

.border-bottom-gray {
  border-bottom: calc(var(--unit) * 0.5) solid rgb(166, 166, 166);
}

.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-5 {
  width: calc(var(--unit) * 5) !important;
}

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

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

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

.uw-9 {
  width: calc(var(--unit) * 9) !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-18 {
  width: calc(var(--unit) * 18) !important;
}

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

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

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

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

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

.uw-34 {
  width: calc(var(--unit) * 34) !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-70 {
  width: calc(var(--unit) * 70) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.uh-2 {
  height: calc(var(--unit) * 2) !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-24 {
  height: calc(var(--unit) * 24) !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-32 {
  height: calc(var(--unit) * 32) !important;
}

.uh-34 {
  height: calc(var(--unit) * 34) !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-50 {
  height: calc(var(--unit) * 50) !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) * 100) !important;
  /* height: 200px; */
}

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

.uh-230 {
  height: calc(var(--unit) * 230) !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-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;
}

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

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

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

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

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

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

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

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

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

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

.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-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-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-14 {
  padding-top: calc(var(--unit) * 14) !important;
  padding-bottom: calc(var(--unit) * 14) !important;
}

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

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

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

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

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

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

.upr-4 {
  padding-right: calc(var(--unit) * 4) !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;
}

/* 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-10 {
  padding-top: calc(var(--unit) * 10) !important;
}

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

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

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

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

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

.upb-6 {
  padding-bottom: calc(var(--unit) * 6) !important;
}

/* 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);
}

.umx-1 {
  margin-right: calc(var(--unit) * 1)! important;
  margin-left: calc(var(--unit) * 1)! important;
}

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

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

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

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

.umx-6 {
  margin-right: calc(var(--unit) * 6) !important;
  margin-left: calc(var(--unit) * 6) !important;
}

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

.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-12 {
  margin: calc(var(--unit) * 12) calc(var(--unit) * 0) calc(var(--unit) * 12) calc(var(--unit) * 0) !important;
}

.umy-15 {
  margin-top: calc(var(--unit) * 15) !important;
  margin-bottom: calc(var(--unit) * 15) !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) !important;
}

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

.umt-12 {
  margin-top: calc(var(--unit) * 12);
}

/* Bottom Margin */
.umb-1 {
  margin-bottom: calc(var(--unit) * 1) !important;
}

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

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

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

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

.umb-6 {
  margin-bottom: calc(var(--unit) * 6) !important;
}

/* Negative Margin */

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

.umr-n10 {
  margin-right: calc(var(--unit) * -10) !important;
}

.uml-n10 {
  margin-left: calc(var(--unit) * -10) !important;
}

.umx-n5 {
  margin-left: calc(var(--unit) * -5) !important;
  margin-right: calc(var(--unit) * -5) !important;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}