:root {
  --primary-rgb: 20,20,20;
  --secondary-rgb: 207,196,4;
  --border-radius: 17px;
}
body { 
  min-height: 100svh; 
  
  --bs-secondary-rgb: 207,196,4;
  --bs-secondary: rgb(var(--bs-secondary-rgb));
  --bs-body-color: var(--bs-gray-600);
  --bs-heading-color: var(--bs-secondary);
}

.btn {
  --bs-btn-border-radius: var(--border-radius);
}

.btn-primary {
  --bs-btn-bg: rgb(51, 51, 51);
  --bs-btn-hover-bg: rgb(51, 51, 51, .85);
}

form { 
  width: 350px;
  backdrop-filter: blur( var(--border-thickness) );
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.58) 57%, rgba(27,27,27, 0.95) 100%);
  border-radius: var(--border-radius);
}

input[type="text"] {
  background: linear-gradient(0deg, rgb(3, 3, 3) 0%, rgb(20,20,20) 100%);
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 12px;
  color: var(--bs-body-color);
}

form label { width: 70%; }
form > div > .btn {
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 0;
}
label span { color: var(--bs-secondary) !important }

hr { 
  height: 1px; 
  border:0 !important; 
  opacity:1 !important; 
}

.checkbox {
  --size: 1.25rem;
  appearance: none;
  display:inline-block;
  width: var(--size);
  height: var(--size);
  border-radius: calc( var(--size) - 1rem );
  border: 2px solid var(--bs-secondary);
  overflow:hidden;
  position:relative;
}

.checkbox::before,
.checkbox::after {
  content: ' ';
  display: block;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  line-height: 100%;
  font-size: .8rem;
  text-align:center;
  transition: opacity .3s;
  color: white;
}

.checkbox::before {
  content: " ";
  background-color: var(--bs-black);
  opacity:1.0;
}

.checkbox::after {
  background-color: var(--bs-secondary);
  content: "✓";
  opacity: 0.0;
  color: black;
}

.checkbox:checked::before { opacity:0.0  }
.checkbox:checked::after { opacity:1.0  }

.checkbox.request::after { content:"❔" }
.checkbox.request.used::after { 
  background-color: var(--bs-danger);
  color: white;
  content: "✕" 
}
.checkbox.request.free::after { 
  background-color: var(--bs-success);
  color: white;
  content: "✓" 
}

.highlight {
font-size: 15rem; !important;
color:#FFF300; !important;
    font-weight: 500;
font-size: 1.1rem;
}

.loader {
  --w: 24px;
  --t: calc(var(--w) / 3);
  --c: no-repeat linear-gradient(var(--bs-secondary) 0 0);
  display:block;
  width: var(--w);
  aspect-ratio: 1;
  background:
    var(--c) left   var(--t) top    0,
    var(--c) top    var(--t) right  0,
    var(--c) right  var(--t) bottom 0,
    var(--c) bottom var(--t) left   0;
  background-size:calc(100%/3) calc(100%/3);
  animation: 
    l29-1 .75s infinite alternate linear,
    l29-2 1.5s infinite;
}
@keyframes l29-1 {
 90%,100% {background-size:calc(2*100%/3) calc(100%/3),calc(100%/3) calc(2*100%/3)}
}
@keyframes l29-2 {
 0%,49.99% {transform:scaleX(1)}
 50%,100%  {transform:scaleX(-1)}
}