:root {
    /* White */
    --mainColor: rgba(255, 255, 255, 1);
    /* Grey */
    --altColor: rgba(246, 0, 255, 1);
    /* Pink */
    --highlightColor: rgba(246, 0, 255, 1);
    /* Yellow */
    --highlightColor: rgba(246, 0, 255, 1);
}

body {
    font-family: "Lato", Lato;
}

#appFrame {
    background-color: rgba(0, 0, 0, 1);
    background-image: url('../img/appFrame_background.jpg');
    background-size: cover;
    background-position: center center;

}

#topFrame {
    background-color: rgba(0, 0, 0, 0.6);
}

#bottomFrame {
    background: radial-gradient(rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.5) 75%);
}

#leftFrame {
    background-color: rgba(0, 0, 0, 0.7);
}

#rightFrame {
    background-color: rgba(0, 0, 0, 0.7);
}




/* Top Frame */

#topNav .navItem {

}

    #topNav .navItem .backLayer {
        background-image: url('../img/topFrame_hoverHighlight.png');
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: contain;
        opacity: 0;
    }

    #topNav .navItem:hover .backLayer {
        opacity: 1;
    }

#userNav {
    
}

    #userNav .navItem:first-child {
        border-right: 1px solid #5e5676;
        background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
    }

    #userNav .navItem:last-child {
        background-color: rgba(0, 0, 0, 0.4);
    }

#menuControl {
    background-color: rgba(0, 0, 0, 0.7);
}











/* Bottom Frame */
#bottomFrame_left_section {
}

.spectator #bottomFrame_middle_section {
    background-color: rgba(0, 0, 0, 0.1);
}

#bottomFrame_right_section {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Left Frame */

#leftFrame_top_section {
    background-color: rgba(0, 0, 0, 0.8);
}

#leftFrame_middle_section {
}

#leftFrame_bottom_section {
}


/* Right Frame */

#rightFrame_top_section {
}

#rightFrame_middle_section {
}

#rightFrame_bottom_section {
}




/* Common Element Styles */

.inner-panel {
    background-color: rgba(0, 0, 0, 0.2);
}







/* Architect Controls */

#ArchitectSpectatingControls {

}

    #ArchitectSpectatingControls #spectateNextControl {
        color: var(--mainColor);
    }

    #ArchitectSpectatingControls #spectatePreviousControl {
        color: var(--mainColor);
    }

#strikeButton {
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--mainColor);
    border-radius: 10px;
}




/* Spectator Controls */

#EnrollmentToggle {
    color: var(--highlightColor);
}


#SpectatorVotingControls #spectatorVoteUp {
    color: var(--mainColor);
}

#SpectatorVotingControls #spectatorVoteDown {
    color: var(--mainColor);
}