:root {
  --color-black: 0, 0, 0;
  --color-red-100: 178, 42, 46;
  --color-red-80: 180, 91, 91;
  --color-red-60: 198, 131, 132;
  --color-red-40: 207, 152, 152;
  --color-red-20: 236, 213, 213;
  --color-red-10: 243, 232, 232;
  --color-lightRed: 242, 46, 52;
  --color-gray-100: 29, 29, 29;
  --color-gray-80: 97, 97, 97;
  --color-gray-60: 142, 142, 142;
  --color-gray-40: 187, 187, 187;
  --color-gray-20: 239, 239, 239;
  --color-gray-10: 224, 224, 224;
  --color-gray: 181, 181, 181;
  --color-orange: 242, 144, 27;
  --color-darkOrange: 228, 159, 94;
  --color-lightOrange: 255, 232, 210;
  --color-blue: 12, 81, 220;
  --color-tiffany: 1, 172, 215;
  --color-lightBlue: 99, 158, 246;
  --color-tosca: 29, 195, 186;
  --color-darkTosca: 106, 171, 151;
  --color-lightTosca: 224, 245, 239;
  --color-green: 44, 150, 33;
  --color-yellow: 255, 172, 51;
  --color-white: 255, 255, 255;
}

a {
  cursor: pointer !important;
}

.vue-scroll-picker-group {
  width: 100%;
  justify-content: center;
  margin: 0px !important;
}

.vue-scroll-picker {
  width: 100% !important;
}

.vue-scroll-picker-layer .top,
.vue-scroll-picker-layer .middle,
.vue-scroll-picker-layer .bottom {
  border: 0 !important;
  background: none !important;
}

.vue-scroll-picker-list {
  width: 100% !important;
  text-align-last: center !important;
}

.vue-scroll-picker-list-rotator {
  width: 100% !important;
}

.vue-scroll-picker-item {
  height: 50px !important;
}

.vue-scroll-picker-item{
  color: rgb(var(--color-gray-10)) !important;
}
.vue-scroll-picker-item.-selected{
  color: rgb(var(--color-gray-100)) !important;
}

.img-profile img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.user-top img {
  height: 45px;
  width: 45px;
  object-fit: cover;
}

/* ========== Swiper Overide ========== */
.swiper-button-next,
.swiper-button-prev {
  width: 30px !important;
  height: 20px !important;
  margin-top: 0 !important;
  cursor: pointer !important;
  top: 0 !important;
  color: rgb(var(--color-red-100)) !important;
}

.swiper-button-next::after {
  content: "\e901" !important;
  font-family: 'icomoon' !important;
  font-size: 16px !important;
}

.swiper-button-prev::after {
  content: "\e900" !important;
  font-family: 'icomoon' !important;
  font-size: 16px !important;
}

.pointer {
  cursor: pointer;
}

.scroll-notif {
  max-height: calc(100vh - 30vh);
  height: unset;
}

.bg-red-100 {
  background-color: rgb(var(--color-red-100));
}

.text-medical{
  font-weight: 500;
  border-bottom: 1px solid rgb(var(--color-gray-20));
  font-size: 14px;
  padding: 12px 0px;
}