:root {
  --bs-primary: #0d436f;
  --bs-primary-rgb: 13, 67, 111;
  --bs-body-font-family: "Roboto", sans-serif;
  --bs-heading-font-family: "Roboto Condensed", sans-serif;
}

html {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body {
  display: flex;
  flex-grow: 1;
  background-color: #e9eaf0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bs-heading-font-family);
}

.input-group {
  overflow: hidden;
  display: flex;
  align-items: stretch;
  border: var(--bs-border-width) solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.input-group:focus-within {
  border-color: var(--bs-primary-border-subtle);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
  z-index: 5;
}

.input-group:has(.form-control:disabled),
.input-group:has(.form-select:disabled) {
  color: var(--bs-secondary-color);
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  opacity: 1;
}

.input-group>.form-control,
.input-group>.form-select,
.input-group>.input-group-text,
.input-group>button {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.input-group>.form-control:focus,
.input-group>.form-select:focus {
  box-shadow: none;
}

.input-group>.form-control:first-child:not(:only-child) {
  padding-right: 0;
}

.input-group>.form-control:last-child:not(:only-child) {
  padding-left: 0;
}

.input-group>.form-control:not(:first-child):not(:last-child):not(:only-child) {
  padding-left: 0;
  padding-right: 0;
}

/* Align icon containers */
.input-group>.input-group-text:has(.las),
.input-group>*:has(.las) {
  display: flex;
  align-items: center;
}

/* Default icon size */
.input-group .las {
  font-size: var(--bs-body-font-size);
  line-height: 1;
}

/* Size variants */
.input-group-sm .las {
  font-size: calc(var(--bs-body-font-size) * 0.875);
}

.input-group-lg .las {
  font-size: calc(var(--bs-body-font-size) * 1.25);
}

/* VALID */
.input-group.is-valid {
  border-color: var(--bs-success);
}

.input-group.is-valid:focus-within {
  border-color: var(--bs-success);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity));
}

/* INVALID */
.input-group.is-invalid {
  border-color: var(--bs-danger);
}

.input-group.is-invalid:focus-within {
  border-color: var(--bs-danger);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity));
}

button[type="submit"]:disabled {
  cursor: not-allowed;
  pointer-events: auto !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  background-image: none;
}

.switch {
  position: relative;
  width: 52px;
  height: 28px;
  display: inline-block;

  &,
  & * {
    cursor: pointer;
  }

  &:active {
    cursor: grabbing;
  }

  & input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  & input:checked+.slider {
    background: var(--bs-primary);
  }

  & input:checked+.slider::before {
    transform: translateX(24px);
  }

  & input:active+.slider::before {
    width: 26px;
  }

  & input:active:checked+.slider::before {
    transform: translateX(20px);
  }

  & input:disabled+.slider {
    cursor: not-allowed;
    opacity: 0.6;
  }

  & .slider {
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: var(--bs-gray-500);
    transition: background 0.35s ease;

    &::before {
      content: "";
      position: absolute;
      height: 22px;
      width: 22px;
      top: 3px;
      left: 3px;
      border-radius: 50%;
      background: var(--bs-white);
      transform: translateX(0);
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), width 0.25s ease;
    }
  }
}