:root {--gold: #D4AF37;}
* {box-sizing: border-box;outline: none;}

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

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;
  background: radial-gradient(circle at center, rgba(212, 175, 55, 0.15) 0%, rgba(13, 13, 13, 1) 70%);
}

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

.form-floating select, .input-group input[type='number'], .input-group input[type='text'].special, .input-group span {
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: #1a1a1a !important;
  color: #fff !important;
}

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

.loader {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(var(--gold) 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%}
}

.btn-primary {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #000 !important;
    font-weight: bold;
}