/* AlpineJS */
[x-cloak] {
  display: none !important;
}

/* RADIO and CHECKBOX bottons */
.custom-form input[type="radio"]+label.btn,
.custom-form input[type="checkbox"]+label.btn {
  color: #737b86;
  background-color: #eff2f5;
  border-radius: 4px;
  margin: 1px 0 4px 0;
  padding: .25rem .5rem .25rem .5rem;
  min-width: 6rem;
  font-size: .9rem;
}

.custom-form input[type="radio"]:checked+label.btn,
.custom-form input[type="checkbox"]:checked+label.btn {
  color: white;
  background-color: #5b9ee6;
}

/* Floating label INPUT fields */
.custom-form .form-floating>label {
  color: #b1b0b0;
  padding-top: .75rem;
}

.custom-form .form-floating>.form-control {
  font-size: 1.15rem;
  border-radius: 6px;
  height: 3rem;
}

.custom-form .form-floating>.form-control:focus~label,
.custom-form .form-floating>.form-control:not(:placeholder-shown)~label,
.custom-form .form-floating>.form-select~label {
  transform: scale(.85) translateY(-.8rem) translateX(.15rem);
}

/* Section headings */
.custom-form .form-section-heading {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: .7rem;
}

.custom-form .form-section-subheading {
  font-size: .9rem;
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: .2rem;
}

/* Shade invalid field redish ONLY is there is SOME value in there */
.Xcustom-form.validate input:not(:placeholder-shown):invalid,
.custom-form.validate input.is-invalid,
.custom-form.validate .is-invalid {
  border: 1px solid red;
  background-color: #fae2e2;
}


/* Odd.. This should already be happening...*/
.nav-tabs>li {
  cursor: pointer;
}

/* Misc formatting */
.subtle-link {
  text-decoration: none;
  cursor: pointer;
  color: #737b86;
}

.subtle-link:hover {
  color: #0d6efd;
}

/* Indicators for HTMX AJAX loading */
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.htmx-spinner.htmx-request {
  opacity: .5 !important;
}

.htmx-spinner.htmx-request:before {
  z-index: 999;
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 10px solid #ccc;
  border-top-color: #000;
  animation: spinner .6s linear infinite;
}

.dimmed {
  position: relative;
}

.dimmed:after {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

input[required]+label.mark-required:after {
  content: '*';
  color: red;
}