/* ==================================================
 *  Variables
 * ================================================== */
:root {
    --dialog-offset-right: 1vw;
    --dialog-max-width: 500px;
    --dialog-max-height: 92vh;
    --dialog-border-radius: 5px;
    --keypad-border-radius: 2px;
    --machine-scale: 1.15;
}


/* ==================================================
 *  Responsiveness
 * ================================================== */
.disable-landscape {
    @media (min-aspect-ratio: 1) {
        display: none !important;
        height: 0px !important;
        width: 0px !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
 }

.disable-portrait {
    @media (max-aspect-ratio: 1) {
        display: none !important;
        height: 0px !important;
        width: 0px !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}



/* ==================================================
 *  HTML
 * ================================================== */
html {
    background: linear-gradient(180deg, #1A5DAC 0%, #163E7C 100%);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    background-size: auto 100vh;
    background-attachment: fixed;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin: 0;
    padding: 0;

    h1 {
        width: 100%;
        top: 0;
        height: auto;
        color: #fff;
        text-align: center;
        font-size: 3vh;
        font-weight: 300;
        margin: 0;
        padding: 0.5vh 0 0.5vh 0;
        background-color: #163E7C;

        /* Portrait */
        @media (max-aspect-ratio: 1.45) {
            font-size: 4.5vw;
            padding: 0.5vw 0 0.5vw 0;
        }
    }

    footer {
        color: #398bd4;
        bottom: 0;
        background-color: #174A8F;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
        margin-top: auto;
        height: 2vh;
        font-size: 1.25vh;
        
        @media (min-aspect-ratio: 1.45) {
            position: absolute;
        }
    }
}

/* ==================================================
 *  Role tabs
 * ================================================== */
.tabs {
    position: relative;
    display: flex;

    &::-webkit-scrollbar {
        height: 0px;
    }
    &::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.3);
        border-radius: 0px;
    }
    &::-webkit-scrollbar-track {
        background: transparent;
    }

    .navigator {
        flex: 0 0 10.5vh;
        margin: 1vw 0vw 0 1vw;

        @media (max-aspect-ratio: 0.6) {
            flex: 0 0 24vw;
            margin: 0;
        }

        .nav-button {
            display: inline-block;
            font-size: 1.5vh;
            text-align: center;
            color: rgba(11, 63, 141, 0.4);
            padding: 0.5vh;
            width: 4.8vh;
            margin: 0.5vh 0 0.5vh 0;
            text-align: center;
            text-decoration: none;
            user-select:none;
            -webkit-user-select: none;
            cursor: pointer;
            border: 2px solid rgba(11, 63, 141, 0.25);
            background-color: rgba(11, 63, 141, 0);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            border-radius: var(--dialog-border-radius);

            transition-property: width, background-color, border-color;
            transition-duration: 0.2s;
            transition-timing-function: ease-out;

            @media (max-aspect-ratio: 1.45) {
                font-size: 2vw;
                width: 6.5vw;
                margin: 0 0 1.5vw 1vw;
            }

            @media (max-aspect-ratio: 0.6) {
                font-size: 3vw;
                width: 9.5vw;
                margin: 0 0 3vw 2vw;
            }

            &:hover, &:focus {
                opacity: 1.0;
                background-color: rgba(11, 63, 141, 0.1);
            }
    
            &:active {
                background-color: rgba(11, 63, 141, 0.25);
            }
    
            &:disabled {
                opacity: 0.2;
                cursor: unset;
            }

            &.active {
                width: 9vh;
                color: white;
                background-color: #005BAA;
                font-weight: 700;
            }
        }
    }

    .candidates-list {
        display: flex;
        text-align: center;
        justify-content: space-evenly;
        align-items: start;
        flex-direction: row;

        width: 100%;
        padding: 0;
        margin: 0;
        background-color: transparent;
        overflow: hidden;
        &::-webkit-scrollbar {
            display: none;
        }
        
        .candidate-container {
            display: flex;
            justify-content: space-evenly;
            width: 100%;
            margin: 0;
            padding: 1vh;
            text-decoration: none;
            user-select:none;
            -webkit-user-select: none;
            background-color: transparent;
            overflow: hidden;

            &.collapse {
                width: 0px;
                display: none;
            }

            .candidate-img {
                max-height: 18vh;
                box-shadow: 0 0px 1.25vh rgba(0, 0, 0, 0.5);

                @media (max-aspect-ratio: 0.6) {
                    font-size: 22vw;
                    box-shadow: 0 0px 2vw rgba(0, 0, 0, 0.5);
                }
            }
            .candidate-number {
                font-size: 6vh;
                font-weight: 700;
                color: #023094;

                @media (max-aspect-ratio: 0.6) {
                    font-size: 10vw;
                }
            }
            .candidate-name {
                font-size: 2.0vh;
                font-weight: 500;
                color: #023094;

                @media (max-aspect-ratio: 0.6) {
                    font-size: 4vw;
                }
            }
            .candidate-party {
                font-size: 1.8vh;
                color: #7291c0;

                @media (max-aspect-ratio: 0.6) {
                    font-size: 3vw;
                }
            }
        }
    }
}


/* ==================================================
 *  Flexbox
 * ================================================== */
.flex { display: flex; }
.column { flex-direction: column; }
.align-end { align-content: end; }
.align-center { align-content: center; }
.justify-center { justify-content: center; }
.justify-end { justify-content: end; }
.justify-around { justify-content: space-around; }
.justify-between { justify-content: space-between; }
.justify-evenly { justify-content: space-evenly; }


 /* ==================================================
 *  Layout
 * ================================================== */
 .no-display {
     display: none !important;
 }

 .vertical-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
 }

.page-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
    @media (max-aspect-ratio: 1.45) {
        margin-bottom: 3vh;
    }    
}


/* ==================================================
 *  Banner
 * ================================================== */
.banner {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: transparent;
    width: 35vw;
    height: 90vh;
    overflow: hidden;
    transition-property: width, height;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    max-height: 90vh;
    width: 28vw;

    /* Landscape */
    @media (min-aspect-ratio: 1.45) {
        max-width: 500px;
        height: 86vh;

        &.invisible {
            width: 0;
        }
    }

    /* Portrait */
    @media (max-aspect-ratio: 1.45) {
        width: 90vw;
        height: 86vh;

        &.invisible {
            height: 0;
        }
    }

    img {
        height: 82vh;
        box-shadow: 0 0 2vh rgba(255, 255, 255, 0.5);
    }
}


/* ==================================================
 *  Dialog
 * ================================================== */
#dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition-property: width, height;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    max-height: 90vh;
    width: 28vw;

    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.97);
    border-radius: var(--dialog-border-radius);
    pointer-events: all;

    /* Landscape */
    @media (min-aspect-ratio: 1.45) {
        height: 85vh;

        &.invisible {
            width: 0;
        }
    }

    /* Portrait */
    @media (max-aspect-ratio: 1.45) {
        width: 90vw;
        height: 80vh;

        &.invisible {
            height: 0;
        }
    }

    .close-btn {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #FFCA05;
        border: none;
        color: white;
        padding: 0.7vh 1.3vh;
        text-align: center;
        display: inline-block;
        font-size: 2vh;
        margin: 0.5vh 0 0 0.5vh;
        cursor: pointer;
        border-radius: var(--dialog-border-radius);
        font-weight: 800;
        text-decoration: none;
        user-select:none;
        -webkit-user-select: none;

        &::before {
            content: "◀";
        }

        /* Portrait */
        @media (max-aspect-ratio: 1.45) {
            &::before {
                content: "▲";
            }
        }

        &:hover {
            background-color: #e99f01;
        }
        
        &:active {
            background-color: #005BAA;
            transform: translateY(2px);
        }
    }

    
    h1 {
        padding: 0.5vh 0 0.5vh 0;
        color: #80715b;
        background-color: #FFCA05;
        font-weight: 600;
        font-size: 3.5vh;
        line-height: 4vh;
        text-align: center;
        width: 100%;
        margin: 0 0 2vh 0;
        border-top-left-radius: var(--dialog-border-radius);
        border-top-right-radius: var(--dialog-border-radius);
        box-shadow: 0 5px 7px rgba(0, 0, 0, 0.5);

        @media (max-aspect-ratio: 1.45) {
            padding: 0.5vh 0 0.5vh 0;
            font-size: 3vh;
        }
    }
    
    .practice-txt {
        color: #bbb;
    }

    .dialog-central-container {
        margin: 2.5vh 0 auto 0;
        padding: 0;
    }
    
    .footer {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 2vh;
        width: 100%;

        .btn-print {
            display: flex;
            padding: 1.5vh 3vh 1.5vh 3vh;
            color: #fff;
            background-color: #005BAA;
            font-weight: 600;
            font-size: 2.25vh;
            text-align: center;
            box-shadow: 0 0px 2vh rgba(255, 255, 0, 1.0);
            cursor: pointer;
            border-radius: var(--dialog-border-radius);
            text-decoration: none;
            user-select:none;
            -webkit-user-select: none;

            &:hover {
                background-color: #0b3f8d;
            }
            
            &:active {
                background-color: #FFCA05;
                transform: translateY(4px);
            }
        }
    }
}


/* ==================================================
 *  Voting Machine
 * ================================================== */
.voting-machine {
    display: flex;
    justify-content: center;
    margin: 0.5vw 2vw;
    background-color: #ddd;
    padding: 0.75vw;
    border-bottom: 0.75vw solid #bbb;
    border-radius: var(--dialog-border-radius);
    transform: perspective(800px) rotateX(10deg);
    box-shadow: 0 1vw 1.5vw rgba(0, 0, 0, 0.45);

    .display {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        background-color: #f7f7f7;
        padding: 0 0.5vh 0 0.5vh;
        margin: 0;
        border: 0.25vh solid #fff;
        box-shadow: 0 0vw 0.5vw rgba(255, 255, 255, 0.9);

        .screen {
            height: 100%;
            filter: grayscale(100%);
            padding: 1vh 0 1vh 0;

            p {
                margin: 0;
                padding: 0;
                font-size: 1vh;
            }

            h2 {
                margin: 0 0 0.5vh 0;
                padding: 0;
                font-size: 1.1vh;
                font-weight: 300;
            }

            h3 {
                margin: 1vh 0 1vh 0;
                padding: 0;
                font-size: 1.3vh;
                font-weight: 500;
                margin-left: 3vh;
            }

            ul {
                display: flex;
                align-items: center;
                list-style: none;
                padding: 0;
                margin: 0;
                gap: 0.2vh;

                li {
                    list-style-type: none;
                    font-size: 1.6vh;
                    border: 0.1vh solid #aaa;
                    padding: 0.2vh;
                    width: 1vh;
                    height: 1.8vh;
                    line-height: 1.8vh;
                    text-align: center;
                }
            }

            img {
                width: 6vh;
                height: 8.39vh;
                border: 0.1vh solid #aaa;
            }

            .grid {
                display: grid;
                grid-template-columns: 1fr 3fr;
                gap: 0.75vh;
                align-items: center;

                /* Party is more spaced */
                .party-line {
                    margin-top: 1vw;
                }
            }

            .role {
                height: 1.537vh;
            }
        }
    }

    .btn-panel {
        flex: 1;
        background-color: #555;
        background: radial-gradient(circle, #777, #555);
        padding: 0.3vh 0.4vh 0.3vh 0.4vh;
        border-radius: var(--keypad-border-radius);
    }

    .btn-panel-row {
        display: flex;
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    .btn-panel-row:last-child {
        align-items: end;
    }
}

/* @keyframes press {
    0%, 50%, 100% { transform: translateY(0); background: #222; }
    15%, 30%       { transform: translateY(2px); background: #005BAA; }
} */

.keypad-digit {
    color: white;
    border: none;
    padding: calc(var(--machine-scale)*0.2vh) calc(var(--machine-scale)*3.2vh) calc(var(--machine-scale)*0.5vh) calc(var(--machine-scale)*0.5vh);
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: calc(var(--machine-scale)*1.65vh);
    margin: calc(var(--machine-scale)*0.3vh);
    cursor: pointer;
    border-radius: var(--keypad-border-radius);
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: calc(var(--machine-scale)*0.3vh) solid #222;
    background-color: #333;
    box-shadow: 0 calc(var(--machine-scale)*0.3vh) calc(var(--machine-scale)*0.5vh) rgba(0, 0, 0, 0.5);
    transition: transform 0.1s ease-out;
}
.keypad-digit:hover {
    background-color: #111;
    border-color: #000;
}

.keypad-digit:active {
    background-color: #005BAA;
    border-color: #0a3068;
    transform: translateY(calc(var(--machine-scale)*4px));
}

.cmd-btn {
    color: white;
    border: none;
    padding: calc(var(--machine-scale)*0.2vh) calc(var(--machine-scale)*0.75vh) calc(var(--machine-scale)*1.5vh) calc(var(--machine-scale)*0.75vh);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: calc(var(--machine-scale)*0.8vh);
    margin: 0 calc(var(--machine-scale)*0.3vh) calc(var(--machine-scale)*0.6vh) calc(var(--machine-scale)*0.3vh);
    cursor: pointer;
    border-radius: var(--keypad-border-radius);
    font-family: Arial, Helvetica, sans-serif;
    border-bottom-width: calc(var(--machine-scale)*0.3vh);
    border-bottom-style: solid;
    box-shadow: 0 calc(var(--machine-scale)*0.3vh) calc(var(--machine-scale)*0.5vh) rgba(0, 0, 0, 0.5);
    transition: transform 0.1s ease-out;
}
.cmd-btn:active {
    transform: translateY(calc(var(--machine-scale)*4px));
}

.btn-blank {
    color: #222;
    background-color: #ccc;
    border-color: #797979;

    &:hover {
        background-color: #858585;
        border-color: #696969;
    }
    &:active {
        background-color: #ddd;
        border-color: #777;
    }
}

.btn-correct {
    color: #222;
    background-color: #e96901;
    border-color: #7c3915;

    &:hover {
        background-color: #c45800;
        border-color: #6d3b1e;
    }
    &:active {
        background-color: #ffae19;
        border-color: #874d0b;
    }
}

.btn-confirm {
    padding: calc(var(--machine-scale)*0.2vh) calc(var(--machine-scale)*0.3vh) calc(var(--machine-scale)*2.5vh) calc(var(--machine-scale)*0.3vh);
    color: #222;
    background-color: #12B24A;
    border-color: #286f54;

    &:hover {
        background-color: #0a9951;
        border-color: #076f44;
    }
    &:active {
        background-color: #19ff71;
        border-color: #17995e;
    }
}


/* ==================================================
 *  Map
 * ================================================== */
.map-container {
    display: flex;
    justify-content: space-around;
    align-items: start;
    margin-right: 2vh;

    /* Portrait */
    @media (max-aspect-ratio: 1.45) {
        margin-right: 0;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 0;
        margin-bottom: 3vw;
        padding: 2vw 0 4vw 0;
    }

    h1 {
        color: #7aacdb;
        text-align: center;
        font-size: 2.5vh;
        font-weight: 300;
        margin-top: 0.5vh;
        margin-bottom: 0.5vh;
        background-color: transparent;

        /* Portrait */
        @media (max-aspect-ratio: 1.45) {
            font-size: 3vw;
            margin-top: 0;
            margin-bottom: 1vw;
        }
    }
}

/* All UF */
#br_map {
    width: 92vw !important;
    height: auto !important;

    svg path { fill: #fff; }

    /* Hover */
    svg path:hover, svg a#state_df circle:hover { fill: #12B24A; }

    /* Specific state */
    /* svg path[data-uf="sp"] { fill: #12B24A; } */

    /* UF text */
    svg text.label_icon_state {
        fill: #003d72;
    }

    /* Selected UF */
    svg a.state path, svg a#state_df circle {
        transition: fill 0.25s ease-out;
    }
    svg a.state.selected path, svg a#state_df.selected circle { fill: #FFCA05; }

    /* DF hack */
    svg a#state_df circle {
        cursor: pointer;
        text-decoration: none;
        fill: #fff;
        stroke: #174587;
        stroke-width: 1.5px;
    }
    svg a.state text {
        user-select:none;
        -webkit-user-select: none;
        pointer-events: none;
    }

    /* Landscape */
    @media (min-aspect-ratio: 1.45) {
        width: auto !important;
        height: 87vh !important;
        aspect-ratio: 890 / 900;
        padding-bottom: 0 !important;

        .map-container {
            justify-content: center;
            align-items: center;
            width: calc(100% - var(--dialog-max-width));
        }
    }
}