/* Marcus CSS Styles - 2019-08-08 */

body, html {
    padding: 0; 
    margin: 0;
    background: rgba(255, 255, 255, 0); 
    height: 100%; 
}

.layer {
    position: absolute;
    top: 0;
    left: 0; 
    right: 0;
    bottom: 0;
}
.layer.input {
    z-index: 20;
    background: rgba( 255 , 255 , 255 , 0.35 );
}
.layer.win {
    z-index: 30; 
    display: none; 
}
.layer.admin {
    z-index: 40;
    display: none; 
    background: rgba( 255 , 255 , 255 , 0.95 );
}

.master-control {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 50;
    display: block;
}


/* -- Alignment :: Flex -- */ 

.flex-parent {
    height: 100%; 
    display: flex; 
    flex-direction: row; 
    flex-direction: column; 
    flex-wrap: nowrap;
    justify-content: space-between; 
    justify-content: center; 
    align-items: center;
}
.flex-parent.horizontal { /* ASE :: THIS IS A VARIABLE */  
    flex-direction: row; 
}

.flex-child {
    text-align: center; 
    width: 100%; 

}
.flex-child.wheel {
    position: relative; 
}

.flex-centerer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%; 
}
.flex-centerer.vertical {
    flex-direction: column; 
}

.spacer_10 { height: 10px; }
.spacer_20 { height: 20px; }
.spacer_30 { height: 30px; }
.spacer_40 { height: 40px; }
.spacer_60 { height: 60px; }
.spacer_80 { height: 80px; }

.content-wrapper {
    width: auto;
    max-width: 960px;
    margin: auto;
}
.content-wrapper.fancy {
    background: #ffffff;
    border-radius: 8px;
    padding: 1.2rem 2.4rem 2.2rem;
    border: 1px solid #ccc;
}
.content-wrapper.centerer {
    text-align: center; 
}
.content-wrapper.centerer input {
    text-align: center; 
}


/* -- Components  -- */ 

.keyboard-wrapper-registration {
    margin: 30px 0;
    min-width: 800px;
}

.uppercase-title {
    text-transform: uppercase;
    color: #444;
    font-weight: 700; 
}

.mega-button {
    font-size: 64px;
    text-transform: uppercase;
    color: white; 
    font-family: 'Arial Bold', 'Arial';
    font-weight: 700;
    background: #cc0000; 
    padding: 0.4rem 2.4rem; 
}
.mega-button.disabled {
    background: #aaaaaa;
}
.mega-button:hover {
    color: white; 
    background: #dd0000;
}

.stat-label {
    max-width: 300px;
    display: inline-block; 
}

.btn.btn-light {
    color: #1e75bb;
}
.btn.btn-hidden {
    background: rgba( 0,0,0,0 );
    /*opacity: 0;*/ /* uncomment this when we go live */
}

.giant-faded-data {
    font-size: 44px;
    text-transform: uppercase; 
    color: #999999;
    font-weight: 700; 
}
.giant-faded-data.highlight {
    color: #1e75bb; 
}

/* -- */

.vertical-buttons {
    list-style: none;
    margin: 12px;
    padding: 0;
}
.vertical-buttons li {
    display: block;
}
.vertical-buttons button {
    display: block; 
    width: 100%; 
    text-transform: uppercase; 
    border-radius: 4px; 
}


/* -- Wheel-Specific Elements -- */ 

.wheel-wrapper {
    padding: 24px;
}

.wheel-ticker-wrapper {
    position: absolute; 
    z-index: 20; 
    text-align: center; 
    left: 0;
    right: 0; 
    top: -20px;
}
.wheel-ticker {
    width: 100px;
    height: 40px;
    display: inline-block; 
}
.wheel-ticker img {
    width: 50px;
}


/* -- Properties -- */ 

.centered {
    margin: auto; 
}

.focused-input {
    background: #fafafa; 
    border: 1px solid #1e75bb; 
}

.hidden {
    display: none; 
}


/* -- Admin -- */ 
#admin-panel {
    padding: 3rem; 
    background: teal; 
    /* display: none; */
}