@font-face {
    font-family: Aviators;
    src: url(fonts/B612-Regular.ttf);
}
    
body {
    font-family: Aviators, Arial, Calibri;
    background-color: #565656;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0; /* Reset margin to remove default body margin */
}

.header-container {
    display: flex;
    flex-direction:row;
    justify-content: space-evenly;
    align-items: center;
    padding: 0;
    height: auto;
    width:100vw;
    position:sticky;
}
    .left-container {
        display:flex;
        flex-direction: column;
        justify-content: start;
        width:45%;
        margin-right:5%;
        margin-left:1%;
    }
        
        .airport-container {
            display:flex;
            flex-direction:column;
            width:100%;
            margin-top:2.5%;
            margin-left:auto;
            margin-right:auto;
            justify-content:center;
        }    
            .airport-title {
                font-size: 3.5vw;        
                width:80%;
                color: white;
                text-align: center;
                border-bottom:medium #b5b313 solid;
                margin-bottom:0;
            }
            
            .departure-arrival-label {
                font-size: 3.5vw;        
                width:80%;
                color: #565656;
                text-align: center;
                background: #b5b313;
            }
        .countercontainer {
            display:flex;
            flex-direction:row;
            width:80%;
            justify-content:start;
            align-items: center;
            margin-left:3%;
        }
            .counter {
                font-size:3.5vw;        
                text-align: center;
                margin-top:1%;
                min-width:45%;
                height:fit-content;
                display:flex;
                flex-direction:column;
                justify-content: center;
                align-items: center;
            }
            #departureCounter.active, #arrivalCounter.active {
                background:#b5b313;
                color:#565656;
            }
                .counter-header {
                    background:#565656;
                    width:100%;
                    color:white;
                    border-bottom:thin solid #b5b313;
                }
                .counter-content {
                    color:#b5b313;
                    font-weight:bold;
                    width:100%;
                    box-sizing:border-box;            
                } 
    .right-container {
        display:flex;
        flex-direction: column;
        width:45%;
        margin-left:5%;
        margin-top:auto;
    }            
        .clock-container {
            width:75%;
            margin-top:3%;
            margin-left:auto;
            margin-right:auto;
        }
            #clock {
                font-size:3.5vw;        
                width:100%;
                color: white;
                padding:0 0 0 0;
                height:fit-content;
                text-align:center;
            }
        .atc-container {
            display:flex;
            flex-direction: column;
            width:95%;
            margin-top:3.5%;
            text-align: center;
            margin-left:auto;
            margin-right:auto;
            border-bottom: thin solid #b5b313;
            border-top: thin solid #b5b313;
        }
            .atc-header{
                width:100%;
                height:8vw;
                margin-left:auto;
                margin-right:auto;
                border-bottom: thin solid #b5b313;
            }
                .atc-icon {
                    width:8vw;
                    filter:contrast(1%);
                }
                .atc-header.active {
                    background-color: #b5b313;
                }
            .atc {
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;
                align-items: end;
                text-align: center;
                width:100%;
                font-size:2.5vw;
                color:#696969;
            }
                .atc-pos{
                    width:100%;
                    padding-top:1%;
                }
                .atc-pos.active{
                    color:white;
                }
                    #del.active {
                        background-color: blue;
                    }
                    #gnd.active {
                        background-color: green;
                    }
                    #twr.active {
                        background-color: purple;
                    }
                    #app.active {
                        background-color: red;
                    }


.tablecontainer {
    width:100%;
    height:90%;
}
    table {
        border-collapse: collapse;
        width: 100%;
        max-height:50%;
        margin-top:1vh;
        padding-top:5%;
        font-size:2.5vw;
        font-family: Aviators, Arial, Calibri;
    }    
        thead {
            margin: 0.5vh;
            padding: 0;
            height:5vh;
            overflow:auto;
        }
            th {
                text-align: center;
                background-color: #b5b313;
                color:#565656;
                border:#565656 solid medium;
                font-weight:normal;
            }
                #callsign {
                width:17%;
                }
                #acType {
                width:12%;
                }
                .destCell {
                width:45%;
                }
    td {
        border-bottom: thin solid #b5b313;
        padding: 1%;
        text-align: center;
        color:white;
    }
    
    .departure-page #destinationHeader,
    .departure-page #destinationColumn,
    .arrival-page #originHeader,
    .arrival-page #originColumn {
        display: none;
    }

.airportSelectionOverlay {
    display:flex;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
    color: black;
    font-family:Aviators;
    font-size:2vw;
}

.overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%; /* Ensure overlay content takes full height */
}

.heading {
    width:100%;
    border-bottom: medium #b5b313 solid;
    background-color: #565656;
    color:white;
    margin-top:none;
    margin-bottom:none;
    padding:1%;
    font-size:3vw;
    top:0;

}

.sub-heading {
    padding:none;
    margin:none;
    width:100%;
    font-weight: bold;
}

.airport-selection {
    display: flex;
    align-items: center;
    width: 100%; /* Adjusted width to fit content */
    height: 90%; /* Adjusted height to fit content */
}

.airport-selection-filter {
    display: flex;
    align-items: center; /* Vertically center children */
    justify-content: center; /* Horizontally center children */
    margin-right: 0.5%; /* Adjusted margin */
    margin-left: 1%;
    width: 100%;
}

.airport-input {
    width: 100%;
    font-family: Aviators;
    border: medium #b5b313 solid;
    font-size: 2vw;
    text-align: center;
}

.airport-selection-list {
    width: 100%;
    height: 90%;
    overflow-y:auto; /* Enable vertical scrolling */
    overflow-x:hidden;
    margin-right:0.5%;
    text-align:center;
}

.airport-dropdown {
    width: 100%;
    padding: 12px 16px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 4;
}

.airport-option {
    cursor: pointer;
    margin-bottom: 8px;
    border: medium rgba(0,0,0,0) solid;
}

.airport-option:hover {
    background-color:rgba(255,255,255,0.75);
    border:medium #b5b313 solid;
}

.airport-option:last-child {
    margin-bottom: 0;
}