@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
/* font-weights{
    300: Light
    400: Regular
    700: Bold
    800: Extra Bold
}
*/

::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--first-color-light); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--bs-primary); 
}

li::marker {
  color: var(--bs-primary);
}


html,
body {
  font-size: 16px;
  font-family: 'Almarai', sans-serif;
}
input::placeholder {
  overflow: visible;
  color: #b6c0cb !important;
}
.bg-light-primary {
  background-color: #e7f1f6;
}


.loader-container{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;

}
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid lightblue;
  border-right-color: var(--bs-primary);
  animation: l2 1s infinite linear;
}
@keyframes l2 {to{transform: rotate(1turn)}}