/*
 * Quiz CSS and Bootstrap overrides
 */
@font-face {
    font-family: 'Montserrat';
    src: url(/assets/fonts/Montserrat-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'MontserratBold';
    src: url(/assets/fonts/Montserrat-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'RalewayRegular';
    src: url(/assets/fonts/Raleway-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'RalewayItalic';
    src: url(/assets/fonts/Raleway-MediumItalic.ttf) format('truetype');
}

html,
body {
    font-family: "RalewayRegular";
    font-size: 16pt;
    color: #ebebeb;
    height: 100%;
    max-height: 100%;
    padding: 0;
    margin: 0;
}

a,
a:focus,
a:hover {
    color: #fff94f;
}

h1,
h2 {
    font-size: 2rem;
    color: #fff94f;
}

h3,
h4 {
    color: #d1cb4a;
}

.inner-pad {
    padding: 2.5em;
}

.quiz-title {
    font-size: 1.5rem;
}

.panel-title a,
.panel-title i {
  color: #502e91;
}

.panel-title a:hover,
.panel-title a:focus {
  text-decoration: none;
}

.panel-dark {
    background-color: #000063;
    padding: 0;
}

.game-card-content {
    padding: 0 12px;
}

.title-logo {
    width: 64px;
    height: auto;
}

.question-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.question-logo {
    width: 48px;
    height: auto;
}

.question-body {
    color: #d1cb4a;
}

.feedback-text {
    color: #d1cb4a;
    font-size: 12pt;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #eeeeee;
  font-size: 14pt;
  text-shadow: none;
  background-color: #0022f3;
  border: 1px #171491 solid;
}

.share-buttons {
    display: inline-flex;
    list-style-type: none;
}

.share-button {
    padding: 0.25rem 0.5rem;
    margin: 0.25rem;
    border-radius: 0.75rem;
    border-style: solid;
    border-width: 2px;
}

.share-button-facebook {
    background-color: #4267B2;
    border-color: #6279a8
}

.share-button-bsky {
    background-color: #0085ff;
    border-color: #5a75ac
}

.share-button-email {
    background-color: #7d7d7d;
    border-color: #999999
}

.share-button-sms {
    background-color: #25d366;
    border-color: #5ead7b;
}

.quiz-app {
    color: #bbcbcb;
    background: linear-gradient(#171491, transparent 90%),
    linear-gradient(0deg, #0022f3, transparent),
    url("../assets/1/background-earth.jpg") center no-repeat;
    background-size: cover;
    background-color: #0022f3;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    height: 100%;
    max-height: 100%;
    overflow-y: hidden;
}

.quiz-app a {
    color: #fff94f;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.quiz-feature {
    color: #bbcbcb;
    background: linear-gradient(0deg, #001499, #2a28c9,  #001499);
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    height: 100%;
    padding: 8px;
}

.quiz-feature a {
    color: #fff94f;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.full-height {
    height: 100%;
    min-height: 100%;
}

.no-padding {
    margin: 0;
    padding: 0;
}

#quiz-category {
    color: #ffffff;
    font-size: 16pt;
    font-style: italic;
    margin: 0;
}

.header {
    padding: 0;
}

.main {
  padding: 0;
}

#progress {
    font-size: 10pt;
    font-style: italic;
    margin: 0;
}

.border-bottom {
    border-bottom: solid 1px #839393;
    margin-bottom: 0.25rem;
}

#play {
    margin: 1em;
}

.choice-button {
  color: #bbcbcb;
  background: #0e1116;
  border: 1px solid #7f7f7f;
  border-radius: 6px;
  margin: 2px;
  font-size: 18px;
  width: 100%;
  min-height: 4em;
}

.choice-button:focus {
  background: #171491;
  border: 1px solid #ffffff;
}

@media(hover: hover) and (pointer: fine) {
    .choice-button:hover {
      background: #171491;
      border: 1px solid #ffffff;
    }
}

.choice-button-correct {
    background: #2fba27;
    color: #bbcbcb;
    border: 1px solid #7f7f7f;
    border-radius: 6px;
    margin: 2px;
    font-size: 18px;
    font-weight: bold;
    width: 100%;
    min-height: 4em;
}

.choice-button-correct-show {
    background: #013009;
    color: #bbcbcb;
    border: 1px solid #7f7f7f;
    border-radius: 6px;
    margin: 2px;
    font-size: 18px;
    font-weight: bold;
    width: 100%;
    min-height: 4em;
}

.choice-button-incorrect {
    background: #cc494e;
    color: #bbcbcb;
    border: 1px solid #623535;
    border-radius: 6px;
    margin: 2px;
    font-size: 18px;
    width: 100%;
    min-height: 4em;
}

.choice-indicator {
    display: inline-flex;
    float: left;
    color: #bbcbcb3a;
}

.quiz-score {
    font-size: 12pt;
    font-style: italic;
    margin: 0;
    text-align: right;
}

.final-score {
  color: #4cae4c;
  font-size: 36px;
  font-weight: bold;
}

#SplashScreen {
    display: none;
}

#AboutScreen {
    padding: 24px;
}

#TitleScreen {
    display: none;
}

#MainMenu {
    display: none;
}

#QuizContent {
    display: none;
    height: 100%;
    max-height: 100%;
    overflow-y: hidden;
}

#map-view {
    height: 300px;
    min-height: 300px;
    max-width: 100%;
}

#SectionQuizResults {
    display: none;
}

#SectionQuizShare {
    display: none;
}

.subtitle {
    font-size: 0.8rem;
    padding: 0.5rem;
    margin: 0;
}

.trailer-1 {
    margin-bottom: 24px;
}

.trailer-2 {
    margin-bottom: 48px;
}

.left {
    float: left;
}

.right {
    float: right;
}

.offline-message {
    font-size: medium;
    color: #e79999;
}

.text-error {
    color: #fd8a8a;
}

.text-credit {
    font-size: 12pt;
    color: #cccccc;
}

.text-credit a {
    font-size: 12pt;
    color: #cccccc;
}

.copyright-text {
    font-size: 10pt;
    color: #cccccc;
    padding: 0 24px;
}

.footer-nav a {
    padding: 0 24px;
}

.version-info-menu {
    text-align: center;
    font-size: 0.64rem;
    color: #acacac;
}

#game-container-iframe {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tap-to-continue {
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: #ffffff;
    background-color: #8393934f;
    cursor: pointer;
}

.formBackground {
    position:fixed;
    z-index:2;
    top:0;
    left:0;
    width:100vw;
    min-width:100vw;
    height:100vh;
    min-height:100vh;
    overflow:hidden;
    color:#e0e0e0;
    background-color: #00006388;
    font-size:18pt;
}
#emailShare {
    display:none;
}
.formTable {
    border-radius:8px;
    color:#e0e0e0;
    background-color:#0b0c65;
    pointer-events:all;
    max-height: 100vh;
    overflow-y: auto;
}
.formTable .form-text {
    color:#e0e0e0;
    font-size: 0.6em;
    font-style: italic;
}
.formTable h2 {
    margin-top:0;
    padding-top:0;
    text-align:center;
}
.formSubLink {
    font-size:16px;
    padding: 0 2rem;
}
.formCloseButton {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem;
}
.errorMessage {
    color:rgb(250, 124, 124);
    font-family:"Roboto", "Arial", "sans-serif";
    font-size:18px;
    font-weight:normal;
    font-style:normal;
    padding:1rem;
}
.errorField {
    border: 1px solid #f01212;
    background-color: #ffc6c6;
}
.errorField:focus {
    border: 2px solid #f24f4f;
    background-color: #ffeaea;
}
.formInfo {
    text-align:center;
    font-size:14pt;
}
.error-scrim {
    position:fixed;
    z-index: 2990;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    background-color:#000000;
    opacity: .4;
}
.ad-light-box {
    position:fixed;
    z-index: 2998;
    width: 350px;
    max-width: 350px;
    height:300px;
    max-height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:#03249e;
    border: 1px solid #999900;
    border-radius: 1rem;
    color: #c3c3c3;
    box-shadow: 8px 8px 4px #494949;
    padding: 1rem;
    opacity: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-size:9pt;
}
.skip-ad-button {
    position:fixed;
    z-index: 2999;
    top:0;
    right:1rem;
}
.skip-ad-button:hover {
    color:#ffffff;
}

.loader-animation {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    padding: 1em;
    width: 100%;
}

@-moz-keyframes pong-loader {
    0% {
        left: 5px;
        top: 0;
    }
    25% {
        left: 65px;
        top: 20px;
    }
    50% {
        left: 5px;
    }
    62.5% {
        top: 50px;
    }
    75% {
        left: 65px;
        top: 70%;
    }
    100% {
        left: 5px;
        top: 0%;
    }
}
@-webkit-keyframes pong-loader {
    0% {
        left: 5px;
        top: 0;
    }
    25% {
        left: 65px;
        top: 20px;
    }
    50% {
        left: 5px;
    }
    62.5% {
        top: 50px;
    }
    75% {
        left: 65px;
        top: 70%;
    }
    100% {
        left: 5px;
        top: 0%;
    }
}
@keyframes pong-loader {
    0% {
        left: 5px;
        top: 0;
    }
    25% {
        left: 65px;
        top: 20px;
    }
    50% {
        left: 5px;
    }
    62.5% {
        top: 50px;
    }
    75% {
        left: 65px;
        top: 70%;
    }
    100% {
        left: 5px;
        top: 0%;
    }
}
@-moz-keyframes pong-loader-paddle-1 {
    0% {
        -moz-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    25% {
        -moz-box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    50% {
        -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    62.5% {
        -moz-box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    75% {
        -moz-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    100% {
        -moz-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
}
@-webkit-keyframes pong-loader-paddle-1 {
    0% {
        -webkit-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    25% {
        -webkit-box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    50% {
        -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    62.5% {
        -webkit-box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    75% {
        -webkit-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    100% {
        -webkit-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
}
@keyframes pong-loader-paddle-1 {
    0% {
        -moz-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        -webkit-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    25% {
        -moz-box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        -webkit-box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    50% {
        -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    62.5% {
        -moz-box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        -webkit-box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    75% {
        -moz-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        -webkit-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    100% {
        -moz-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        -webkit-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
}
@-moz-keyframes pong-loader-paddle-2 {
    0% {
        -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    50% {
        -moz-box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    62.5% {
        -moz-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    75% {
        -moz-box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    100% {
        -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
}
@-webkit-keyframes pong-loader-paddle-2 {
    0% {
        -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    50% {
        -webkit-box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    62.5% {
        -webkit-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    75% {
        -webkit-box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    100% {
        -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
}
@keyframes pong-loader-paddle-2 {
    0% {
        -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    50% {
        -moz-box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        -webkit-box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    62.5% {
        -moz-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        -webkit-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    75% {
        -moz-box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        -webkit-box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
    100% {
        -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
        box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    }
}
/* :not(:required) hides this rule from IE9 and below */
.pong-loader:not(:required) {
    width: 80px;
    height: 60px;
    background: #353c39;
    position: relative;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    -moz-animation: pong-loader-paddle-1 1500ms infinite linear;
    -webkit-animation: pong-loader-paddle-1 1500ms infinite linear;
    animation: pong-loader-paddle-1 1500ms infinite linear;
}
.pong-loader:not(:required):before {
    -moz-animation: pong-loader-paddle-2 1500ms infinite linear;
    -webkit-animation: pong-loader-paddle-2 1500ms infinite linear;
    animation: pong-loader-paddle-2 1500ms infinite linear;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: "";
    width: 10px;
    height: 100%;
    -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
    box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
}
.pong-loader:not(:required):after {
    content: "";
    display: block;
    -moz-animation: pong-loader 1500ms infinite linear;
    -webkit-animation: pong-loader 1500ms infinite linear;
    animation: pong-loader 1500ms infinite linear;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    background: #8cdb8b;
}

.countdown-timer {
    position: relative;
    float: right;
    margin: auto;
    height: 28px;
    width: 28px;
    text-align: center;
}

.countdown-number {
    color: white;
    font-size: 10pt;
    line-height: 28px;
    margin: auto;
}

.countdown-circle {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    transform: rotateY(-180deg) rotateZ(-90deg);
}

.countdown-circle circle {
    stroke-dasharray: 80px;
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    stroke-width: 1px;
    stroke: white;
    fill: none;
    animation: countdown 21s linear forwards;
}

.countdown-paused {
    animation-play-state: paused !important;
}

@keyframes countdown {
    from {
        stroke-dashoffset: 0px;
    }
    to {
        stroke-dashoffset: 80px;
    }
}