: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 */

/* height */

/* border-Radius */

/* Fontsize */

/* padding */

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

/* Classes for horizontal padding values from 1 to 12 */

/* Vertical padding classes */

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

/* Top Padding */

/* bottom padding */

/* margin */

/* Bottom Margin */

/* Negative Margin */

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

/* Custom slim scrollbar */
.slim-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.slim-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}
.slim-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(0deg, #91d4ff, #46b1e1);
  border-radius: 10px;
}