/* fonts */
@font-face {
    font-family: 'digi font';
    src: url('font/DSEG14Classic-Regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('font/DSEG14Classic-Regular.woff') format('woff'),
        /* Pretty Modern Browsers */
        url('font/DSEG14Classic-Regular.ttf') format('truetype');
    /* Safari, Android, iOS */
}

@font-face {
    font-family: 'digi font light';
    src: url('font/DSEG14Classic-Light.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('font/DSEG14Classic-Light.woff') format('woff'),
        /* Pretty Modern Browsers */
        url('font/DSEG14Classic-Light.ttf') format('truetype');
    /* Safari, Android, iOS */
}

@font-face {
    font-family: 'michael font';
    src: url('font/led-lights-light.ttf') format('truetype');
    /* Safari, Android, iOS */
}

@font-face {
    font-family: uiButtonFont;
    src: url('font/TRAFFIC5.TTF') format('truetype');
    /* Safari, Android, iOS */
}

@font-face {
    font-family: stockTickerFont1;
    src: url('font/LCD_Solid.ttf') format('truetype');
    /* Safari, Android, iOS */
}

@font-face {
    font-family: stockTickerFont2;
    src: url('font/SubwayTicker.ttf') format('truetype');
    /* Safari, Android, iOS */
}

@font-face {
    font-family: stockTickerFont3;
    src: url('font/SubwayTickerGrid.ttf') format('truetype');
    /* Safari, Android, iOS */
}

@font-face {
    font-family: ReadableMonospace;
    src: url("font/FreeSansBold.ttf");
}

:root {
    --dead-color: #353535;
    /* #2A2A2A;  /* #454545 */
}

/* retena */
.logo {
    display: inline-block;
    margin-top: 5px;
}

.logo img {
    width: 50%;
    height: 50%;
}


body {
    text-transform: uppercase;
    background-color: black;
    color: white;
    text-align: center;
    margin: 0;
    font-size: 26px;
    line-height: 1;
    /* font-family: "michael font";
    letter-spacing: 1.5px;
    font-size: 25px; */
}

.col .row {
    text-align: left;
}

.col.risk-col .row {
    text-align: right;
}


/* body:after {
  content: url("images/advance_disabled.png") url("images/advance_down.png") url("images/reset_down.png") url("images/onewin-active.png") url("images/onewin-mouseover.png") url("images/threeway-mouseover.png") url("images/threeway-disabled.png") url("images/playing_down2.png") url("images/paused_down.png" url("images/playing_up2.png") url("images/paused_up.png"));
  display: none;
} */


.gameboard {
    height: 150px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
}

.modeselect {
    /*display: inline-flex;*/
    margin-bottom: 7px;
}

#threeway {
    width: 387.5px;
    height: 90px;
    background-image: url("images/threeway-disabled.png");
    background-size: 100%;
    display: inline-block;
}

#oneway {
    width: 387.5px;
    height: 90px;
    background-image: url("images/onewin-disabled.png");
    background-size: 100%;
    display: inline-block;
}

.roundCount {
    height: 90px;
    width: 182px;
    display: inline-block;
    background-image: url("images/round-counter.png");
    background-size: 100%;
    font-size: 21px;
    z-index: -10;
    vertical-align: top;
}

.rounds {
    margin-top: 45px;
    padding-left: 4px;
}

span#roundNo {
    display: inline-block;
    width: 60px !important;
    margin-left: 10px;
}

.back {
    color: var(--dead-color) !important;
    position: absolute;
    /*top: 38px;*/

    /*

    border-left: none !important;
    border-right: none !important;
    border-top: 3px solid black !important;
    border-bottom: 3px solid black !important;
*/

    /*
    border: 3px solid black !important;
    */
    z-index: -10;
    /*min-width: 900px;*/
    white-space: nowrap;

    left: 0;
    right: 0;
    /*left: -100%; 

	margin-left: auto; 
	margin-right: auto;
	*/
}

.back .divider {
    /*border-right: 3px solid black;*/
}

.container {
    color: var(--dead-color);
    width: auto;
    /*border: 3px solid grey;*/
    text-align: center;
    display: inline-block;
    /*min-width: 900px;*/
}

.col {
    display: inline-block;

}

.divider {
    /*border-right: 3px solid grey;*/
}

.centerDividerLf {
    border-right: 1px solid rgba(255, 225, 225, .07);
}

.centerDividerRt {
    border-left: 1px solid rgba(255, 225, 225, .07);
}

.row {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 2px solid #58181c;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-align: right;
}

.rowCenterLf {
    padding-right: 22px !important;
}

.rowCenterRt {
    padding-left: 26px !important;
}


.title1 {
    border-bottom: 2px solid #dc3b45 !important;
    padding-top: 0 !important;
}

.firstRow {
    padding-left: 0 !important;
}

.lastRow {
    padding-right: 0 !important;
}


.live {
    color: #fff;
}

.dead {
    color: var(--dead-color);
}

#red_name {
    color: #fc293d;
}

#blue_name {
    color: #5568fb;
}

#purple_name {
    color: #953cfb;
}

#yellow_name {
    color: #fecf44;
}

#pink_name {
    color: #fd6093;
}

#green_name {
    color: #32be28;
}

#orange_name {
    color: #ff8521;
}

#gray_name {
    color: #969696;
}

/*
#red_name {color: #ff2525; text-shadow: 0 0 6px red;}
#blue_name {color: #6664ff; text-shadow: 0 0 6px #4a47ff;}
#purple_name {color: #a21fff; text-shadow: 0 0 6px #9600ff;}
#yellow_name {color: #ffff1d; text-shadow: 0 0 6px yellow;}
#pink_name {color: #ffd7de; text-shadow: 0 0 6px pink;}
#green_name {color: #00ba00; text-shadow: 0 0 6px green;}
#orange_name {color: #ffb427; text-shadow: 0 0 6px orange;}
#gray_name {color: #aaaaaa; text-shadow: 0 0 6px #939393;}
*/

.actionButtons {
    margin-top: 72px;
}

/* buttons */
.defaultButton {
    width: 150px;
    height: 57.5px;
    background-size: 100%;
    display: inline-block;
    border: none;
    outline: none;
    background-color: black;
}

#advanceButton {
    width: 150px;
    height: 57.5px;
    background-image: url("images/advance_up.png");
    background-size: 100%;
    display: inline-block;
    border: none;
    outline: none;
    background-color: black;
}

#resetButton {
    width: 130px;
    height: 57.5px;
    background-image: url("images/reset_up.png");
    background-size: 100%;
    display: inline-block;
    border: none;
    outline: none;
    background-color: black;
    margin-right: 23px !important;
}

#pauseButton {
    width: 74.5px;
    height: 57.5px;
    background-image: url("images/playing_up2.png");
    background-size: 100%;
    display: none;
    border: none;
    outline: none;
    background-color: black;
    margin-left: 7px !important;
}

#muteButton {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-image: url("images/sound-on.png");
    background-size: 100%;
    background-size: 100%;
    border: none;
    outline: none;
    background-color: black;
    z-index: 1000;
}


/* experimental animal feature */
#animalButton {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 50px;
    background-image: url("animals/animals-off.png");
    background-size: 100%;
    background-size: 100%;
    border: none;
    outline: none;
    background-color: black;
    z-index: 1000;
}

.imagecredits {
    font-size: 11px !important;
    color: white !important;
    opacity: 0.35 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-transform: lowercase;
    margin-top: 20px;
}

.imagecredits a {
    color: white !important;
    letter-spacing: 1px;
}

#creditsFoldout {
    transition: all .5s ease-in-out;
    display: none;
}

/* font switch feature */
#fontButton {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 85px;
    background-image: url("fontmode/fontmode-off.png");
    background-size: 100%;
    background-size: 100%;
    border: none;
    outline: none;
    background-color: black;
    z-index: 1000;
}



/* glow effect */

.glow {
    -webkit-animation: glow 2s ease-in-out infinite alternate;
    -moz-animation: glow 2s ease-in-out infinite alternate;
    animation: glow 2s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
    from {
        text-shadow: 0 0 3px #fff, 0 0 3px #fff;
    }

    to {
        text-shadow: 0 0 6px #fff, 0 0 6px #fff;
    }
}


/* from index.html */

.topCol {
    display: inline-block;
    /* border: 1px solid salmon; */
    vertical-align: top;
    max-width: 387.5px;
    margin-bottom: 20px;
}

.topSides {
    padding: 10px 16px 16px 16px;
    width: 200px;
}

.logoBox {
    width: 400px;
}

.roundCount {
    display: inline-block;
}

.rounds {
    display: inline-block;
    margin-top: 16px;
    margin-left: -50px;
}

.rounds {
    display: inline-block;
    margin-top: 16px;
    margin-left: -40px;
}

.shotTimer {
    display: inline-block;
    border: 2px solid #ff4949;
    padding: 15px 10px 15px 16px;
    border-radius: 10px;
}

.shotClock {
    height: 90px;
    width: 182px;
    display: inline-block;
    background-size: 100%;
    z-index: -10;
    vertical-align: top;
}

body.ticker-font-mode span#shotClockTime {
    position: relative;
    top: 2px;
    left: 1px;
}

.bottomRowLine {
    border-bottom: 2px solid #dc3b45 !important;
}

.logo img {
    width: 95% !important;
    height: 95% !important;
}

.actionButtons {
    margin-top: 10px !important;
}

.modal {
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 100;
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
}

.popup-box {
    background-color: rgba(0, 0, 0, 1);
    border: 3px solid #b80000;
    width: 750px;
    height: 630px;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 100px);
    border-radius: 10px;
    padding: 0 30px;
}

#showResultsButton {
    background-image: url("images/results_up.png");
    display: none;
}

#exitResultsButton {
    background-image: url("images/ok_up.png");
}

/* rusty - new styles */

/* popup box */

.popup-box .text-notification {
    font-family: uiButtonFont;
    font-size: 25px;
}

.popup-box .button-container {
    margin-top: 70px !important;
}

@keyframes pulse-popup {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(255, 82, 82, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

.popup-box {
    animation: pulse-popup 2s infinite;
}

/* ui buttons */

.button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

button.ui-button {
    color: white;
    font-family: uiButtonFont;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 16px 24px;
    border-radius: 10px;
    background-color: rgb(53, 53, 53) !important;
    border: 3px solid rgb(53, 53, 53) !important;
    box-shadow: inset 0 0 10px 4px rgba(0, 0, 0, 0.6);
    background-image: none !important;
    width: auto !important;
    margin: 0 5px;
}

button.ui-button:active {
    background-color: rgba(53, 53, 53, 0.5) !important;
    box-shadow: inset 0 0 10px 4px rgba(53, 53, 53, 0.6) !important;
}

button.ui-button.red {
    background-color: rgb(255, 0, 0) !important;
    border: 3px solid rgb(255, 0, 0) !important;
}

button.ui-button.red:active {
    background-color: rgba(255, 0, 0, 0.5) !important;
    box-shadow: inset 0 0 10px 4px rgba(255, 0, 0, 0.6) !important;
}

/* button.ui-button.darkred {
    background-color: #420000;
    border: 3px solid #420000;
} */

/* results popup box */
.results .popup-box {
    height: 660px;
}

/* reset notification box */
.reset .popup-box {
    height: 400px;
    transform: translate(-50%, 200px);
}

.reset .popup-box .text-notification {
    margin-top: 110px;
}

/* initial mode selection */

.mode-choice .popup-box {
    width: 850px;
    height: 650px;
}

.mode-choice .logoBox {
    margin: 30px auto 50px;
}

.version-button {
    width: 387.5px;
    height: 90px;
    background-size: 100%;
    display: inline-block;
    background-repeat: no-repeat;
}

.version-button:after {
    font-family: 'uiButtonFont';
    font-size: 11px;
    position: relative;
    top: 80px;
    color: #896f00;
}

.version-button:hover:after,
.version-button.selected:after {
    color: #ceac17;
}

.version-button.threeway {
    background-image: url("images/threeway-button-disabled.png");
}

.version-button.threeway:after {
    content: "THREE-WAY SPLIT";
}

.version-button.threeway:hover {
    background-image: url("images/threeway-button-mouseover.png");
}

.version-button.threeway.selected,
.version-button.threeway.selected:hover {
    background-image: url("images/threeway-button-active.png");
}

.version-button.oneway {
    background-image: url("images/onewin-button-disabled.png");
}

.version-button.oneway:after {
    content: "WINNER TAKES ALL";
}

.version-button.oneway:hover {
    background-image: url("images/onewin-button-mouseover.png");
}

.version-button.oneway.selected,
.version-button.oneway.selected:hover {
    background-image: url("images/onewin-button-active.png");
}

.version-button.hidden {
    visibility: hidden;
}

/* version indicator */
.mode-choice .version-selection {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* pulsing clock */
@keyframes pulse-border-a {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }

    70% {
        transform: scale(1.2);
        box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

@keyframes pulse-border-b {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }

    70% {
        transform: scale(1.5);
        box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

@keyframes pulse-text {
    0% {
        text-shadow: none;
    }

    70% {
        text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    }

    100% {
        text-shadow: none;
    }
}

.shotTimer.pulsing-a {
    animation: pulse-border-a 2s infinite;
}

.shotTimer.pulsing-b {
    animation: pulse-border-b 1.0s infinite;
}

.shotTimer.pulsing-b .roundFront {
    animation: pulse-text 1.0s infinite;
}

/* stock ticker font test classes */
/* body.font-test-1 {
    font-family: 'stockTickerFont1';
    letter-spacing: 4.5px;
    font-size: 28px;
}

body.font-test-2 {
    font-family: 'stockTickerFont2';
    letter-spacing: 4.0px;
    font-size: 28px;
}

body.font-test-3 {
    font-family: 'stockTickerFont3';
    letter-spacing: 3.7px;
    font-size: 26px;
} */

/* new standard body font */
body.ticker-font-mode {
    font-family: stockTickerFont3;
    letter-spacing: 3.7px;
}

/* readable-font mode */
body.readable-font-mode {
    font-family: ReadableMonospace;
    font-size: 30px;
    line-height: 0.87;
    letter-spacing: 2.7px;
}

/* graph and marquee */
.graph {
    margin: auto;
    margin-top: 15px;
    width: 1260px;
    position: relative;
}

.marquee {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 60px);
    padding-top: 90px;
    margin-left: 30px;
    margin-right: 30px;
    overflow: hidden;
}

.marquee-text {
    font-size: 140px;
    font-family: 'stockTickerFont3';
    font-style: italic;
    letter-spacing: 10px;
    display: inline-block;
    padding-left: 100%;
}

.marquee-animated>.marquee-text {
    animation: marquee 15s linear infinite, marquee-flash-1 15s step-start infinite;
}

.marquee-animated.marquee-flashing>.marquee-text {
    animation: marquee 15s linear infinite, marquee-flash 1s step-start infinite;
}

.marquee-animated.marquee-urgent>.marquee-text {
    animation: marquee 15s linear infinite, marquee-flash-2 0.5s step-start infinite;
}


@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-50%, 0);
    }

    75% {
        transform: translate(-50%, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}




@keyframes marquee-flash-1 {
    0% {
        color: white;
    }

    25% {
        color: white;
    }

    30% {
        color: yellow;
    }

    35% {
        color: white;
    }

    40% {
        color: yellow;
    }

    45% {
        color: white;
    }

    50% {
        color: yellow;
    }

    55% {
        color: white;
    }

    60% {
        color: yellow;
    }

    65% {
        color: white;
    }

    70% {
        color: yellow;
    }

    75% {
        color: white;
    }

    100% {
        color: white;
    }
}

@keyframes marquee-flash {
    0% {
        color: white;
    }

    50% {
        color: red;
    }

    100% {
        color: white;
    }
}

@keyframes marquee-flash-2 {
    0% {
        color: yellow;
    }

    50% {
        color: red;
    }

    100% {
        color: yellow;
    }
}