@tailwind base;
@tailwind components;
@tailwind utilities;
body {
  font-family: "Roboto", sans-serif;
  @apply text-black;
}

h1 {
  @apply text-3xl font-bold text-gray-dark;
}

h2 {
  @apply text-2xl font-bold text-gray-dark;
}

select:focus, textarea:focus, input:focus {
  @apply focus:outline-none;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
}

.checkbox_wrapper .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #188CF2;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox_wrapper input:checked ~ .check_items .checkmark {
  @apply bg-blue-light border-blue-alt;
}
.checkbox_wrapper input:checked ~ .check_items .checkmark::after {
  display: block;
}
.checkbox_wrapper input:checked ~ .check_items .checktext {
  @apply text-blue-alt;
}
.checkbox_wrapper input:disabled ~ .check_items .checkmark {
  @apply border-gray before:bg-gray after:bg-gray;
}
.checkbox_wrapper input:disabled ~ .check_items .checkmark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  transform-origin: center;
}
.checkbox_wrapper input:disabled ~ .check_items .checkmark::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  top: 50% !important;
  left: 50% !important;
  width: 10px !important;
  height: 2px !important;
  transform-origin: center !important;
}
.checkbox_wrapper input:disabled ~ .check_items .checkmark::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.checkbox_wrapper input:disabled ~ .check_items .checkmark::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.checkbox_wrapper input:disabled ~ .check_items .checktext {
  @apply text-gray;
}

.checkbox_text input:checked ~ span {
  @apply bg-gray-dark text-white;
}

/*# sourceMappingURL=main.css.map */