:root {--blue: #4019ff;}
* {box-sizing: border-box;outline: none;}

body {
  margin: 0px;
  font-family: 'Calibri';
  font-size: 17px;
  background: #111827;
}

span, p, label {
  color: #9ca3af;
}

a {text-decoration: none;}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    margin: 0;
}

#wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#wrapper img {
  width: 130px;
  margin: 0px auto;
  display: block;
} #wrapper .w-berani {
  max-width: 350px;
  text-align: center;
  display: grid;
  gap: 20px;
}

.form-floating select, .input-group input[type='number'], .input-group input[type='text'].special, .input-group span {
  border: 1px solid #5c636a;
  background: #1f2937!important;
}

#loader {
  height: 100vh;width: 100vw;
  position: fixed;top:0;
  background: rgba(255,255,255, .7);
  display: flex;align-items: center;
  justify-content: center;
}

.loader {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#24A1DE 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: l1 .5s infinite linear;
}
@keyframes l1 {
  0%  {background-size: 20% 100%,20% 100%,20% 100%}
  33% {background-size: 20% 10% ,20% 100%,20% 100%}
  50% {background-size: 20% 100%,20% 10% ,20% 100%}
  66% {background-size: 20% 100%,20% 100%,20% 10% }
  100%{background-size: 20% 100%,20% 100%,20% 100%}
}