@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: auto;
    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: 18%;
    width:100vw;
    position:sticky;
    top:0;
    background-color: #565656;
    z-index:6;
}
    .left-container {
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:34%;
        margin-right:1%;
    }
        
        .airport-container {
            display:flex;
            flex-direction:column;
            width:100%;
            margin-top:2.5%;
            margin-left:auto;
            margin-right:auto;
            justify-content:center;
            text-align: center;
        }    
            .airport-title {
                font-size: 2.5vw;        
                width:100%;
                color: white;
                text-align: center;
                border-bottom:medium #b5b313 solid;
                margin-bottom:0;
            }
            
            .departure-arrival-label {
                font-size: 2.5vw;        
                width:100%;
                color: #565656;
                text-align: center;
                background: #b5b313;
            }
        .countercontainer {
            display:flex;
            flex-direction:row;
            width:80%;
            justify-content:start;
            align-items: center;
        }
            .counter {
                font-size:2.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;            
                }
    .mid-container {
        width:30%;
        display:flex;
        flex-direction: column;
    }
        .logo-container {
            width:100%;
            display:flex;
            justify-content: center;
            margin-top:0.25vw;
        }
            .logo {
                width:8vw;
            }
        .button-container {
            width:100%;
            text-align: center;
        }
            .button {
                font-family:Aviators, Arial, Calibri;
                font-size:1.5vw;
                width:40%;
                margin-bottom:1vw;
                background:#565656;
                color:white;
                border:medium solid #b5b313;
            }
                .button:focus {
                    border: medium #b5b313 solid;
                }
                .button:hover {
                    background-color: #b5b313;
                    color: black;
                    cursor: pointer;
                }
                .setting {
                    width:100%;
                    margin-bottom:0;
                }   
    .right-container {
        display:flex;
        flex-direction: column;
        width:34%;
        margin-top:auto;
        margin-left:1%;
    }            
        .clock-container {
            width:75%;
            margin-top:5.5%;
            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:2.5%;
            text-align: center;
            margin-left:auto;
            margin-right:auto;
            border-top: thin solid #b5b313;
        }
            .atc-header{
                width:100%;
                margin-left:auto;
                margin-right:auto;
                border-bottom: thin solid #b5b313;
            }
                .atc-icon {
                    width:4vw;
                    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;

                    }
            .atis {
                display:none;
                width:100%;
                background-color:rgb(23, 157, 219);
                color:white;
                font-size:2.5vw;
                text-align: center;
                justify-content: center;
                cursor:pointer;
            }


.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;
        overflow-y:scroll;
    }    
        thead {
            margin: 0.5vh;
            margin-top:0;
            padding: 0;
            height:5vh;
            width:100%;
            overflow:auto;
            z-index:6;
        }
            th {
                text-align: center;
                background-color: #b5b313;
                color:#565656;
                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;
            }
                #arrivalBoard {
                    display:none;
                }
                    #arrivalBoardHeader th,#departureBoardHeader th{
                        border: medium solid #565656;
                    }


.overlay-container {
    height: 100%; /* Ensure overlay content takes full height */
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    top: 0;
    left: 0;
    right: 0; 
}
    .overlay-content {
        height: 100%;
        width: 100%;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
        #disclaimer {        
            display:none;    
            z-index: 8;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: black;
            font-family:Aviators;
            font-size:2vh;
            overflow-y:auto;
            overflow-x:hidden;   
        }
            #disclaimerAccept {
                font-size:2vw;
            }
            .disclaimer-logo{
                width:20vh;
                position:absolute;
                margin-left:auto;
                margin-right:auto;
                top:1vh;
                border:medium solid #565656;
                border-radius:100%;
            }
        #airportSelectionOverlay {
            display:none;
            height: 100%;
            width: 100%;
            z-index: 7;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.75);
            color: black;
            font-family:Aviators;
            font-size:2vw;
        }
        #airportMetar {
            display:none;
        }

    #prevAirport {
        z-index: 8;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: black;
        font-family:Aviators;
        font-size:2vh;
    }
    #atisOverlay, #metarOverlay {
        height:fit-content;
        text-align: center;
        width:85%;
        top:25vh;
        margin-left:auto;
        margin-right:auto;
        border:medium solid #b5b313;
        cursor:move;
        z-index:10;
    }
    #atisOverlay .heading, #metarOverlay .heading {
        width:100%;
        padding-left:0;
        padding-right:0;
        box-sizing: border-box;
    }
    #atisOverlay .sub-heading, #metarOverlay .sub-heading{
        border:none;
        font-size:2.5vw;
    }


.heading {
    width:100%;
    border-bottom: medium #b5b313 solid;
    background-color: #565656;
    color:white;
    margin-top:0;
    margin-bottom:none;
    padding:1%;
    font-size:2.5vh;
}
.sub-heading {
    padding:none;
    margin:none;
    width:100%;
    margin-bottom:1%;
    font-weight: bold;
    border-bottom:thick solid #b5b313;
}        
.airport-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Adjusted width to fit content */
    height: 90%; /* Adjusted height to fit content */
}
    .airport-selection-filter {
        display: flex;
        flex-direction: column;
        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: 95%;
            font-family: Aviators;
            border: medium #b5b313 solid;
            font-size: 2vw;
            text-align: center;
            margin-top:1vh;
            margin-bottom:1vh;
        }
        .checkbox-container {
            display: flex;
            flex-direction: row;
            margin-bottom:1vh;
        }
        .airport-selection-list {
            width: 100%;
            height: 70%;
            overflow-y:scroll;
            overflow-x:hidden;
            text-align:center;
            margin-top:0;
            color:#565656;
            box-sizing:border-box;
        }    
            #airportSelector {
                background:#565656;
                margin-top:0;
                border-collapse: collapse;
            }
                .airport-option {
                    cursor: pointer;
                    margin-bottom: 8px;
                }
                .airport-option:hover {
                    background-color:#b5b313;
                    color:#565656;
                }
                .airport-cell {
                    width:75%;
                    text-wrap:pretty;
                }
                .icao-cell {
                    width:25%;
                }
.prev-airport-text {
    background:#565656;
    color:#b5b313;
    padding:2%;
    width:fit-content;
    margin-left: auto;
    margin-right: auto;
    border:medium solid #b5b313;
}
.settings-container {
    position:absolute;
    top:0;
    transform: translate(-100%);
    height:100%;
    width:25%;
    background-color: rgba(0,0,0,0.9);
    color:white;
    z-index:9;
    transition: transform ease-in 0.6s;
}
    .settings-open {
        transform: translate(0);
        transition: transform ease-in 0.6s;
    }
    .settings-content {
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position:relative;
        transition: ease-in 0.6s;

    }
    .settings-heading {
        font-size:2vw;
        padding:0;
        margin:0;
        text-align:center;
        margin-bottom:1vh;
    }