body,
html {
  width: 100%;
  height: 100%;
}

#s2id_Staatsbuergerschaft {
  width: 25% !important;
}

#s2id_Geschlecht {
  width: 25% !important;
}

#Geburtsdatum {
  width: 25% !important;
}

@media (max-width: 768px) {
  #Geburtsdatum {
    width: 33% !important;
    min-width: 100px !important;
  }
}

#s2id_Heimatstaat {
  width: 50% !important;
}

#s2id_Zustellstaat {
  width: 50% !important;
}

#s2id_studium {
  width: 90% !important;
}

#s2id_program {
  width: 90% !important;
}

#s2id_Kombination {
  width: 90% !important;
}

/* make select2 input element fit the form on window resize */
.select2-container--bootstrap {
  min-width: 100%;
  max-width: 100%;
  width: auto !important;
}

.select2-drop-auto-width,
.select2-drop.select2-drop-above.select2-drop-active {
  border-top-color: var(--color-accent) !important;
}

.alert {
  white-space: normal;
  word-break: break-all;
}

.alert-success {
  display: none;
}

.alert-warning {
  display: none;
}

.btn.remove-filter:hover,
.btn.remove-filter:focus,
.btn.remove-filter.focus {
  color: var(--color-accent-dark);
  background-color: transparent;
}

@media (max-width: 767px) {
  .row {
    margin-left: calc(-1 * var(--spacing-small));
    margin-right: calc(-1 * var(--spacing-small));
  }
}

.row.row--no-margin {
  margin: 0;
}

@media (min-width: 1600px) {
  .container {
    width: 1500px;
  }
}

@media (min-width: 2400px) {
  .container {
    width: 2000px;
  }
}

/* hide back button for uhstat1 form */
/* Todo: remove directly in template */
.hide-back-button {
  a.btn[href="/back"] {
    display: none;
  }
}

/* datepicker adaptations */
.datepicker table tr td.active,
.datepicker table tr td.active.highlighted {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.datepicker table tr td.active.focus,
.datepicker table tr td.active.highlighted.focus,
.datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active:focus {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}
.datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active:active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.active:focus,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted.active.focus,
.datepicker table tr td.active.highlighted.active:focus,
.datepicker table tr td.active.highlighted.active:hover,
.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.highlighted:active:hover,
.datepicker table tr td.active:active.focus,
.datepicker table tr td.active:active:focus,
.datepicker table tr td.active:active:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}
.datepicker table tr td.active.disabled.focus,
.datepicker table tr td.active.disabled:focus,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.highlighted.disabled.focus,
.datepicker table tr td.active.highlighted.disabled:focus,
.datepicker table tr td.active.highlighted.disabled:hover,
.datepicker table tr td.active.highlighted[disabled].focus,
.datepicker table tr td.active.highlighted[disabled]:focus,
.datepicker table tr td.active.highlighted[disabled]:hover,
.datepicker table tr td.active[disabled].focus,
.datepicker table tr td.active[disabled]:focus,
.datepicker table tr td.active[disabled]:hover,
fieldset[disabled] .datepicker table tr td.active.focus,
fieldset[disabled] .datepicker table tr td.active.highlighted.focus,
fieldset[disabled] .datepicker table tr td.active.highlighted:focus,
fieldset[disabled] .datepicker table tr td.active.highlighted:hover,
fieldset[disabled] .datepicker table tr td.active:focus,
fieldset[disabled] .datepicker table tr td.active:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.datepicker table tr td span.active.disabled.focus,
.datepicker table tr td span.active.disabled:focus,
.datepicker table tr td span.active.disabled:hover.focus,
.datepicker table tr td span.active.disabled:hover:focus,
.datepicker table tr td span.active.focus,
.datepicker table tr td span.active:focus,
.datepicker table tr td span.active:hover.focus,
.datepicker table tr td span.active:hover:focus {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}
.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover:active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.datepicker table tr td span.active.active.focus,
.datepicker table tr td span.active.active:focus,
.datepicker table tr td span.active.active:hover,
.datepicker table tr td span.active.disabled.active.focus,
.datepicker table tr td span.active.disabled.active:focus,
.datepicker table tr td span.active.disabled.active:hover,
.datepicker table tr td span.active.disabled:active.focus,
.datepicker table tr td span.active.disabled:active:focus,
.datepicker table tr td span.active.disabled:active:hover,
.datepicker table tr td span.active.disabled:hover.active.focus,
.datepicker table tr td span.active.disabled:hover.active:focus,
.datepicker table tr td span.active.disabled:hover.active:hover,
.datepicker table tr td span.active.disabled:hover:active.focus,
.datepicker table tr td span.active.disabled:hover:active:focus,
.datepicker table tr td span.active.disabled:hover:active:hover,
.datepicker table tr td span.active:active.focus,
.datepicker table tr td span.active:active:focus,
.datepicker table tr td span.active:active:hover,
.datepicker table tr td span.active:hover.active.focus,
.datepicker table tr td span.active:hover.active:focus,
.datepicker table tr td span.active:hover.active:hover,
.datepicker table tr td span.active:hover:active.focus,
.datepicker table tr td span.active:hover:active:focus,
.datepicker table tr td span.active:hover:active:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}
.datepicker table tr td span.active.disabled.disabled.focus,
.datepicker table tr td span.active.disabled.disabled:focus,
.datepicker table tr td span.active.disabled.disabled:hover,
.datepicker table tr td span.active.disabled.focus,
.datepicker table tr td span.active.disabled:focus,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover.disabled.focus,
.datepicker table tr td span.active.disabled:hover.disabled:focus,
.datepicker table tr td span.active.disabled:hover.disabled:hover,
.datepicker table tr td span.active.disabled:hover[disabled].focus,
.datepicker table tr td span.active.disabled:hover[disabled]:focus,
.datepicker table tr td span.active.disabled:hover[disabled]:hover,
.datepicker table tr td span.active.disabled[disabled].focus,
.datepicker table tr td span.active.disabled[disabled]:focus,
.datepicker table tr td span.active.disabled[disabled]:hover,
.datepicker table tr td span.active:hover.disabled.focus,
.datepicker table tr td span.active:hover.disabled:focus,
.datepicker table tr td span.active:hover.disabled:hover,
.datepicker table tr td span.active:hover[disabled].focus,
.datepicker table tr td span.active:hover[disabled]:focus,
.datepicker table tr td span.active:hover[disabled]:hover,
.datepicker table tr td span.active[disabled].focus,
.datepicker table tr td span.active[disabled]:focus,
.datepicker table tr td span.active[disabled]:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled.focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:hover,
fieldset[disabled] .datepicker table tr td span.active.focus,
fieldset[disabled] .datepicker table tr td span.active:focus,
fieldset[disabled] .datepicker table tr td span.active:hover,
fieldset[disabled] .datepicker table tr td span.active:hover.focus,
fieldset[disabled] .datepicker table tr td span.active:hover:focus,
fieldset[disabled] .datepicker table tr td span.active:hover:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.site-notice {
  font-size: var(--font-size-regular);
  font-weight: 400;
}

.site-notice h2 {
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 0;
}

.select--hidden {
  visibility: hidden;
  height: 0;
}

/* no save icon on the registration and portfolio upload forms */
.application-form .fa-save,
form:has(input[name="portfolio_pdf"]) .fa-save {
  display: none;
}

/* grey box for notices, e.g. "applications closed" on the start page */
.notice {
  margin: var(--spacing) 0 0;
  padding: var(--spacing);
  background-color: var(--color-ground);
  font-weight: 700;
}

/* start page: registration and upload steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing);
  margin: var(--spacing) 0 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
  padding: var(--spacing);
  background-color: var(--color-ground);
}

.step__icon {
  width: 48px;
  height: 48px;
  color: var(--color-accent);
}

.step__title {
  margin: var(--spacing) 0 var(--spacing-small);
}

.step__text {
  margin-bottom: var(--spacing);
}

/* keeps the buttons of both steps on one line */
.step__action {
  margin-top: auto;
  font-weight: 700;
}