:root {
  --orange: #c66630;
  --orangeLight: #cd916a;
  --orangeUltraLight: #e6dfd5;
  --blue: #5393a4;
  --white: #fefefe;
  --grey: #f0f0f1;
  --darkGrey: #1a1a1a;
  --textColor: #4d4d4d;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--grey);
  color: var(--textColor);
}

/* --------------------------- Scroll Bar -----------------------------*/
::-webkit-scrollbar {
  width: 0.5rem;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(217, 217, 227, 0.8);
  border-radius: 9999px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
/* --------------------------- Scroll Bar Ebd -------------------------*/

/* -------------------------- Common Css -------------------------------*/
.textColor {
  color: var(--textColor);
}
.whiteColor {
  color: var(--white);
}
.orangeColor {
  color: var(--orange);
}
.orangeLightColor {
  color: var(--orangeLight);
}
.blueColor {
  color: var(--blue);
}
.orangeBackground {
  background-color: var(--orange);
}
.orangeLightBackground {
  background-color: var(--orangeLight);
}
.orangeUltraLightBackground {
  background-color: var(--orangeUltraLight);
}
.blueBackground {
  background-color: var(--blue);
}
.whiteBackground {
  background-color: var(--white);
}
.greyBackground {
  background-color: var(--grey);
}
.textBackground {
  background-color: var(--textColor);
}
.darkGreyBackground {
  background-color: var(--darkGrey);
}
.border-orangeLight {
  border: 2px solid var(--orangeLight);
}
.border-start-orangeLight {
  border-left: 3px solid var(--orangeLight);
}
.border-start-blue {
  border-left: 3px solid var(--blue);
}
.border-bottom-orangeLight {
  border-bottom: 2px solid var(--orangeLight);
}
.border-bottom-blue {
  border-bottom: 3px solid var(--blue);
}
.resize-none {
  resize: none;
}
.outline-none {
  outline: none;
}
.white-space-normal {
  white-space: normal;
}
.text-truncate {
  height: 48px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: unset;
  display: -webkit-box;
}
.round-card {
  color: var(--blue);
  background-color: var(--white);
  height: 8rem;
  width: 8rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 2px solid var(--blue);
  border-radius: 50%;
}
.round-card p {
  margin-bottom: 0;
  margin-top: 0.5rem;
  color: var(--textColor);
}
.hover-text-orange:hover {
  color: var(--orange) !important;
}
/* -------------------------- Common Css End-------------------------------*/

/* ---------------------- Infinite Loader ------------------------------------- */
.loader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.loader p {
  margin-top: 10px;
  font-size: larger;
  color: var(--blue);
}
.loader .container {
  display: flex;
  width: auto;
}
.loader .container .circle {
  position: relative;
  margin: 0 -8px;
  width: 90px;
  height: 90px;
}
.loader .container .circle span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(calc(30deg * var(--i)));
  /* 360 / 12 = 30 */
}
.loader .container .circle span::before {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - 18px);
  width: 16px;
  height: 16px;
  background: var(--blue);
  border-radius: 50%;
  animation: animate 1.92s linear infinite;
  animation-delay: calc(0.08s * var(--i));
}
.loader .container .circle:nth-child(2) {
  transform: rotate(-180deg);
}
.loader .container .circle:nth-child(2) span::before {
  animation-delay: calc(-0.08s * var(--i));
}
@keyframes animate {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.2;
  }
}
/* ---------------------- Infinite Loader End------------------------------------- */

/* ========================== Media Query ============================================ */
@media (max-width: 575px) {
  .fs-5 {
    font-size: 1rem !important;
  }
  .fs-4 {
    font-size: 1.25rem !important;
  }
  .border-top {
    border-top: 1px solid #dee2e6 !important;
  }
  .border-start {
    border-left: 1px solid #dee2e6 !important;
  }
  .border-bottom {
    border-bottom: 1px solid #dee2e6 !important;
  }
  .border-end {
    border-right: 1px solid #dee2e6 !important;
  }
  .border-top-0 {
    border-top: none !important;
  }
  .border-start-0 {
    border-left: none !important;
  }
  .border-bottom-0 {
    border-bottom: none !important;
  }
  .border-end-0 {
    border-right: none !important;
  }
}

@media (min-width: 576px) {
  .border-sm-top {
    border-top: 1px solid #dee2e6 !important;
  }
  .border-sm-start {
    border-left: 1px solid #dee2e6 !important;
  }
  .border-sm-bottom {
    border-bottom: 1px solid #dee2e6 !important;
  }
  .border-sm-end {
    border-right: 1px solid #dee2e6 !important;
  }
  .border-sm-top-0 {
    border-top: none !important;
  }
  .border-sm-start-0 {
    border-left: none !important;
  }
  .border-sm-bottom-0 {
    border-bottom: none !important;
  }
  .border-sm-end-0 {
    border-right: none !important;
  }
}

@media (min-width: 768px) {
  .border-md-top {
    border-top: 1px solid #dee2e6 !important;
  }
  .border-md-start {
    border-left: 1px solid #dee2e6 !important;
  }
  .border-md-bottom {
    border-bottom: 1px solid #dee2e6 !important;
  }
  .border-md-end {
    border-right: 1px solid #dee2e6 !important;
  }
  .border-md-top-0 {
    border-top: none !important;
  }
  .border-md-start-0 {
    border-left: none !important;
  }
  .border-md-bottom-0 {
    border-bottom: none !important;
  }
  .border-md-end-0 {
    border-right: none !important;
  }
}

@media (min-width: 992px) {
  .border-lg-top {
    border-top: 1px solid #dee2e6 !important;
  }
  .border-lg-start {
    border-left: 1px solid #dee2e6 !important;
  }
  .border-lg-bottom {
    border-bottom: 1px solid #dee2e6 !important;
  }
  .border-lg-end {
    border-right: 1px solid #dee2e6 !important;
  }
  .border-lg-top-0 {
    border-top: none !important;
  }
  .border-lg-start-0 {
    border-left: none !important;
  }
  .border-lg-bottom-0 {
    border-bottom: none !important;
  }
  .border-lg-end-0 {
    border-right: none !important;
  }
}

@media (min-width: 1200px) {
  .border-xl-top {
    border-top: 1px solid #dee2e6 !important;
  }
  .border-xl-start {
    border-left: 1px solid #dee2e6 !important;
  }
  .border-xl-bottom {
    border-bottom: 1px solid #dee2e6 !important;
  }
  .border-xl-end {
    border-right: 1px solid #dee2e6 !important;
  }
  .border-xl-top-0 {
    border-top: none !important;
  }
  .border-xl-start-0 {
    border-left: none !important;
  }
  .border-xl-bottom-0 {
    border-bottom: none !important;
  }
  .border-xl-end-0 {
    border-right: none !important;
  }
}
/* ========================== Media Query End ============================================ */