/* Shared autocomplete and selected flag styling. */

.airport-autocomplete {

    position: relative;

}

.airport-autocomplete:focus-within {

    z-index: 1085;

}


.airport-autocomplete-selected-flag {

    position: absolute;

    top: calc(var(--airport-selected-flag-top, 0px) + (var(--airport-selected-flag-height, 2.25rem) - 1rem) / 2);

    left: 0.8rem;

    z-index: 3;

    width: 1.45rem;

    height: auto;

    border-radius: 0.2rem;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    pointer-events: none;

    box-shadow: 0 0 0 1px rgba(31, 75, 143, 0.12);

    background: transparent;

}


.airport-autocomplete.has-selected-flag > .form-control[data-airport-autocomplete] {

    padding-left: 3rem;

}


.flight-time-field .flight-twilight-indicator,

.connector-preview-inline-time-field .flight-twilight-indicator {

    position: absolute;

    top: 50%;

    right: 0.8rem;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 1rem;

    height: 1rem;

    transform: translateY(-50%);

    pointer-events: none;

}


.flight-twilight-icon-image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

}


clock-timepicker.touch-clock-timepicker {

    display: block;

    width: 100%;

    --clock-timepicker-accent-color: var(--app-primary);

    --clock-timepicker-face-color: #edf3fb;

    --clock-timepicker-face-hover-color: #dbe7f6;

    --clock-timepicker-header-background: var(--app-primary);

    --clock-timepicker-popup-background: #ffffff;

    --clock-timepicker-button-color: var(--app-primary);

    --clock-timepicker-button-ok-color: var(--app-primary);

    --clock-timepicker-button-cancel-color: var(--app-muted);

}


clock-timepicker.touch-clock-timepicker > .form-control {

    width: 100%;

}


.connector-preview-inline-time-field {

    position: absolute;

    top: 2px;

    right: 2px;

    left: 2px;

    height: 1.7rem;

    min-height: 1.7rem;

    display: block;

}


.connector-preview-inline-time-field .connector-preview-input {

    top: 0;

    right: 0;

    left: 0;

    bottom: auto;

    width: 100%;

    height: 100%;

    min-height: 1.7rem;

    padding-right: 2rem;

}


.connector-preview-inline-time-field .flight-twilight-indicator {

    right: 0.45rem;

}


.airport-autocomplete-menu {

    position: absolute;

    top: calc(100% + 0.35rem);

    left: 0;

    right: 0;

    z-index: 20;

    border: 1px solid var(--app-border);

    border-radius: 0.9rem;

    background: var(--app-surface);

    box-shadow: var(--app-shadow);

    overflow: hidden;

}


.airport-autocomplete-menu-floating {

    position: fixed;

    top: 0;

    left: 0;

    right: auto;

    z-index: 1080;

}


.airport-autocomplete-list {

    max-height: 18rem;

    overflow-y: auto;

}


.airport-autocomplete-empty {

    display: flex;

    align-items: center;

    min-height: 3.25rem;

    padding: 0.85rem 0.9rem;

    color: var(--app-muted);

    font-size: 0.9rem;

}


.airport-autocomplete-option {

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    width: 100%;

    padding: 0.75rem 0.9rem;

    border: 0;

    background: transparent;

    text-align: left;

}


.airport-autocomplete-option-copy {

    display: flex;

    flex: 1 1 auto;

    flex-direction: column;

    min-width: 0;

}


.airport-autocomplete-option-thumb {

    width: 2.35rem;

    height: 2.35rem;

    flex: 0 0 auto;

    border: 1px solid rgba(31, 75, 143, 0.12);

    border-radius: 0.7rem;

    object-fit: cover;

    background: #f8fbff;

}


.airport-autocomplete-option-thumb.is-flag {

    width: 1.45rem;

    height: auto;

    align-self: center;

    border-radius: 0.2rem;

    object-fit: cover;

    aspect-ratio: 4 / 3;

    background: transparent;

    box-shadow: 0 0 0 1px rgba(31, 75, 143, 0.12);

}


.airport-autocomplete-option:hover,

.airport-autocomplete-option.is-active {

    background: var(--app-primary-soft);

}


body[data-app-theme="dark"] .airport-autocomplete-menu,
body[data-app-theme="dark"] .airport-autocomplete-option,
body[data-app-theme="dark"] .password-policy {

    background: var(--app-surface-alt);

    border-color: var(--app-border);

    color: var(--app-text);

}


.airport-autocomplete-option-ident {

    font-weight: 700;

    color: var(--app-text);

}


.airport-autocomplete-option-meta {

    margin-top: 0.15rem;

    font-size: 0.83rem;

    color: var(--app-muted);

}

.maintenance-ata-subchapter-option {

    align-items: center;

    gap: 0;

    min-height: 2.25rem;

    padding-top: 0.45rem;

    padding-bottom: 0.45rem;

}

.maintenance-ata-subchapter-separator {

    color: var(--app-text);

    white-space: pre;

}

.maintenance-ata-subchapter-title {

    color: var(--app-text);

    font-weight: 400;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}