/* These styles are generated from project.scss. */

html,
body {
  height: 100%;
  font-family: "Roboto Flex", system-ui, sans-serif;
  line-height: 125%;
}

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

/* FIXME: render our own icon on top of the native date picket indicator and call its showPicker() method on click */
/* NOTE: does not work in firefox */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
  margin-right: 10px;
}

#content-main th:hover {
  background-color: #E0F3FB;
}

#content-main a {
  background-color: #121210;
}


summary {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

summary::after {
  display: inline-flex;
  content: " ";
  margin-top: 10px;
  width: 14px;
  height: 8px;
  background: url('/static/images/icons/arrow.svg') no-repeat;
  background-size: cover;
  float: right;
  transition: 0.2s;
  color: #1D1D1B;
  flex: 0 0 auto;
}

details[open] > summary::after {
  transform: rotate(180deg);
}

summary::-webkit-details-marker {
  display: none;
}

select {
  position: relative;
  padding-left: 14px !important;
  background-position: right 12px top 50%;
}

.select-wrapper:has(select option[value=""]:checked) .select-label {
  display: none;
}


.select-wrapper:has(select option[value=""]:checked) .select-field {
  color: var(--placeholder-color);
}


.select-wrapper:has(select option[value=""]:not(:checked)) .select-field {
  padding-top: 22px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}


.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}