:root {
    --bkkr-dark-primary: #424342;
    --bkkr-dark-blue: #00234B;
    --bkkr-primary: #4195D2;
    --bkkr-red: #C71343;
    --bkkr-green: #76BD4E;
    --bkkr-yellow: #F3CE00;
    --bkkr-orange: #EB6700;
    --bkkr-purple: #45207B;

    --bkr-pri-btn-bg: #4195D2;
    --bkr-pri-btn-border-color: #4195D2;
    --bkr-pri-btn-hover-bg: #3984bb;
    --bkr-pri-btn-hover-border-color: #3378a8;
    --bkr-pri-btn-active-bg: #2b688f;
    --bkr-pri-btn-active-border-color: #245779;

    --bkr-sec-btn-bg: #00234B;
    --bkr-sec-btn-border-color: #00234B;
    --bkr-sec-btn-hover-bg: #001f42;
    --bkr-sec-btn-hover-border-color: #001d3d;
    --bkr-sec-btn-active-bg: #001834;
    --bkr-sec-btn-active-border-color: #00132c;

    --bkr-conf-btn-bg: #76BD4E;
    --bkr-conf-btn-border-color: #76BD4E;
    --bkr-conf-btn-hover-bg: #6ead49;
    --bkr-conf-btn-hover-border-color: #669f43;
    --bkr-conf-btn-active-bg: #5c8d3b;
    --bkr-conf-btn-active-border-color: #4a7330;

    --bkr-focus-field: rgba(65, 149, 210, 0.25);


}

html {
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative !important;
}

body {
    background-color: var(--bkkr-dark-primary);
    height: 100%;
    margin: 0;
    padding: 0;

}

hr {
    width: 100%;
}

button {
    cursor: pointer;
    min-width: 8rem !important;
}

button:disabled {
    cursor: default;
}

.icon-btn {
    align-items: center;
    background-color: var(--bkkr-orange);
    border: none !important;
    border-color: var(--bkkr-orange);
    border-radius: 3rem;
    color: #FFFFFF;
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    height: 2.5rem;
    min-width: 2.5rem !important;
    outline: none !important;
    width: 2.5rem !important;
}

.btn-bkr-primary {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bkr-pri-btn-bg);
    --bs-btn-border-color: var(--bkr-pri-btn-border-color);
    --bs-btn-border-radius: .5rem;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bkr-pri-btn-hover-bg);
    --bs-btn-hover-border-color: var(--bkr-pri-btn-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bkr-pri-btn-hover-border-color);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bkr-pri-btn-active-bg);
    --bs-btn-active-border-color: var(--bkr-pri-btn-active-border-color);
    max-width: 10rem;
    min-width: 8rem;
}

.btn-bkr-secondary {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bkr-sec-btn-bg);
    --bs-btn-border-color: var(--bkr-sec-btn-border-color);
    --bs-btn-border-radius: .5rem;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bkr-sec-btn-hover-bg);
    --bs-btn-hover-border-color: var(--bkr-sec-btn-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bkr-sec-btn-hover-border-color);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bkr-sec-btn-active-bg);
    --bs-btn-active-border-color: var(--bkr-sec-btn-active-border-color);
    max-width: 10rem;
    min-width: 8rem;
}

.btn-bkr-confirm {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bkr-conf-btn-bg);
    --bs-btn-border-color: var(--bkr-conf-btn-border-color);
    --bs-btn-border-radius: .5rem;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bkr-conf-btn-hover-bg);
    --bs-btn-hover-border-color: var(--bkr-conf-btn-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bkr-conf-btn-hover-border-color);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bkr-conf-btn-active-bg);
    --bs-btn-active-border-color: var(--bkr-conf-btn-active-border-color);
    max-width: 10rem;
    min-width: 8rem;
}

.navbar {
    background-color: var(--bkkr-dark-primary);
    flex: 0 0 70.3125rem !important;
}

.nav-link {
    color: var(--bs-white) !important;
}

.nav-link.active {
    background-color: var(--bkkr-primary) !important;
}

.nav-link:not(active) {
    background-color: var(--bkkr-dark-blue) !important;
}

.form-check {
    align-items: center;
    display: flex;
}

span.input-group-text {
    background-color: var(--bkkr-dark-primary);
    color: white;
    justify-content: center;
    width: 50%;
}

.btn-check:checked+.btn, .btn.show, .btn:first-child:active {
    color: var(--bs-white);
    background-color: var(--bkr-pri-btn-bg);
    border-color: var(--bkr-pri-btn-border-color);
}

.form-control:focus {
    box-shadow: inset 0 0 0 0.25rem var(--bkr-focus-field) !important;
}


.collapse:not(.show) {
    display: none !important;
}

.flex-1 {
    flex: 1;
}

.flex-center {
    justify-content: center !important;
    align-items: center !important;
}

.flex-freeze {
    flex: 0 0;
}

.mw-25 {
   max-width: 25% !important;
}

.mw-50 {
  max-width: 50% !important;
}

.mw-75 {
    max-width: 75% !important;
}

.hide {
    display: none !important;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transition-all {
    transition: all 2s;
}

select:invalid {
    color: gray;
}

input[type="text"] {
    max-width: 15rem;
}

.error-lbl:empty {
    display: none;
}

#notificationContainer {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bkkr-dark-blue);
    align-items: center;
    justify-content: center;
}

#notificationContainer:after {
    content: attr(data-content);
    background-color: var(--bkkr-dark-primary);
    border-radius: 3px;
    text-align: center;
    padding: 4px 6px 4px 6px;
    display: inline;
    color: white;
    width: 80%;
    z-index: 9999;
    max-width: 440px;
    margin: 1rem auto;
}

#notificationContainer.warning {
    background-color: var(--bkkr-yellow);
    color: black;
}

#notificationContainer.danger {
    background-color: var(--bkkr-red);
    color: white;
}

#notificationContainer.success {
    background-color: var(--bkkr-green);
    color: white;
}

/* MODALS */
.modal-header button, .custom-file-upload {
    min-width: 3rem !important;
    width: 3rem !important;
}

.modal-body {
    overflow: auto;
    margin-bottom: 1rem;
    max-height: calc(100% - 6.8125rem);
}

#outerWrapper {
    height: 100%;
}

#contentHolder {
    height: 100%;
    overflow: auto;
    width: calc(100vw - 2rem);
}

.section-img {
    flex: 0 0 33% !important;
    height: 33%;
}

.section-header {
    height: 2rem;
}


/* ROOM SETTINGS */
#typeGroup, #typeIndividual {
    height: 4.375rem;
    position: absolute;
    width: 4.375rem;
}

#join-interstitial {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#join-interstitial #joinBtn {

}


/* VOWEL GRID */
.vowel-grid-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-evenly;
    padding: 0;
    position: relative;
}

.vowel-grid-holder button {
    border: none;
    box-shadow: 0 0.1875rem 0.375rem rgb(0 0 0 / 16%), 0 0.1875rem 0.375rem rgb(0 0 0 / 23%);
    color: white;
    flex: 1 1;
    flex-basis: calc(50% - 2rem);
    font-size: 1.5rem;
    font-weight: bold;
    margin: 1rem;
    min-height: 3.5rem;
    outline: none !important;
    position: relative;
}

.vowel-grid-holder button:after {
    align-items: center;
    background-color: transparent;
    color: white;
    content: '';
    display: flex;
    flex-direction: column;
    font-family: 'bikkr';
    font-size: 3.9rem;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0.00;
    pointer-events: none;
    position: absolute;
    text-align: center;
    top: 0;
    transition: opacity 1.0s, background-color 1.0s, content 1.0s;
    width: 100%;
}

.vowel-grid-holder button.correct:after {
    background-color: var(--bkkr-red) !important;
    content: '\f10c';
    opacity: 0.75;
}

.vowel-grid-holder button.incorrect:after {
    background-color: var(--bkkr-primary) !important;
    content: '\e801';
    font-size: 4.9rem !important;
    opacity: 0.75;
}

.vowel-grid-holder:not(.locked) button {
    background-color: var(--bkkr-primary);
}

.vowel-grid-holder.locked button {
    background-color: var(--bkkr-dark-primary);
}

/* MAIN LAYOUT */
#header, #teacherBar {
    align-items: center;
    background-color: var(--bkkr-dark-primary);
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
    height: 3.75rem !important;
    left: 0;
    padding: 1rem;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 10;
}

#answerCounter {
    background-color: var(--bkkr-red);
    bottom: 3.75rem;
    display: none;
    color: white;
    height: 2rem;
    line-height: 2rem;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
    z-index: 99;
}

#teacherBar {
    bottom: 0;
    justify-content: space-around;
    top: initial;
}

#teacherBar button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.8rem;
    min-width: auto !important;
    outline: none !important;
    position: relative;
}

button#playerListBtn:after {
    content: attr(data-player-count);
    position: absolute;
    height: 1.25rem;
    width: 2rem;
    border-radius: 2.8125rem;
    background-color: var(--bkkr-red);
    font-size: 0.8rem;
    right: -0.625rem;
    bottom: 0;
    font-weight: bold;
}

#endBtn {
    display: none;
}

#sound-grid {
    height: calc(100% - 9.5rem);
    margin-top: auto;
    margin-bottom: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

#sound-grid.student {
    height: calc(100% - 5.75rem);
}

#teacherTimer, #teacherFailNotice {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 3.75rem;
    bottom: 3.75rem;
    left: 0;
    right: 0;
    z-index: 5;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
}

#teacherTimer > #answerTimer {
    display: flex !important;
    z-index:6
}

/* SETTINGS MODAL */
#settings button {
    min-width: 3.75rem !important;
}

#gameModeOptions .btn {
    min-width: 4.5rem !important;
    max-width: 4.5rem !important;
}

#vowelSelector .vowel-section:last-child {
    margin-bottom: 0 !important;
}

#playerListContent .kick-btn {
    background-color: var(--bkkr-red);
    border: none;
    border-radius: 60px;
    box-shadow: 0 0 2px #888;
    color: #FFFFFF;
    display: inline-block;
    font-size: 1rem;
    height: 2rem;
    padding: 0 0.05rem 0.1875rem;
    min-width: auto !important;
    width: 2rem;
}

.highlighted-row {
    background-color: var(--bkkr-yellow);
    border-radius: 0.75rem;
    color: white !important;
}


/* Radio Buttons */
.round-radio {
    height: 2.1875rem;
    position: relative;
    width: 2.1875rem;
}

input + .radio-label:before {
    pointer-events: none !important;
    z-index: 1;
}

.round-radio + .radio-label {
    background-color: var(--bkkr-dark-blue);
    height: 4.375rem !important;
    margin: 0 !important;
    pointer-events: none !important;
    width: 4.375rem !important;
    z-index: 0;
}

.round-radio:checked + .radio-label {
    background-color: var(--bkkr-primary);
}



/* Sliders */

/* The switch - the box around the slider */
.switch {
    display: inline-block;
    height: 2.125rem;
    position: relative;
    width: 3.75rem;
}

/* Hide default HTML checkbox */
.switch input {
    height: 0;
    opacity: 0;
    width: 0;
}

/* The slider */
.slider {
    background-color: var(--bkkr-dark-primary);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    background-color: white;
    bottom: 0.25rem;
    content: "";
    height: 1.625rem;
    left: 0.25rem;
    position: absolute;
    -webkit-transition: .4s;
    transition: .4s;
    width: 1.625rem;
}

input:checked + .slider {
    background-color: var(--bkkr-primary);
}

input:focus + .slider {
    box-shadow: 0 0 0.0625rem var(--bkkr-primary);
}

input:checked + .slider:before {
    -ms-transform: translateX(1.625rem);
    -webkit-transform: translateX(1.625rem);
    transform: translateX(1.625rem);
}

/* Rounded sliders */
.slider.round {
    border-radius: 2.125rem;
}

.slider.round:before {
    border-radius: 50%;
}

input:disabled + .slider {
    background-color: #4a4a4a;
    cursor: default;
}


.label {
    align-items: center;
    background-color: var(--bkkr-primary);
    border-radius: 0.25rem;
    color: #fff;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    margin: 0.3rem !important;
    padding: 0.5rem;
}

/* Bootstrap Tags Input */

.bootstrap-tagsinput {
    background-color: #fff;
    border: 0.0625rem solid #ccc;
    border-radius: 0.25rem;
    box-shadow: inset 0 0.0625rem 0.0625rem rgb(0 0 0 / 8%);
    color: #555;
    cursor: text;
    display: flex;
    flex-wrap: wrap;
    line-height: 1.375rem;
    max-width: 100%;
    padding: 0.25rem 0.375rem;
    vertical-align: middle;
}

.bootstrap-tagsinput .tag [data-role="remove"] {
    border-left: 0.0625rem solid white;
    cursor: pointer;
    margin-left: 0.5rem;
    padding-left: 0.3125rem;
}

.scoreboard {
    background-color: var(--bkkr-dark-primary);
    padding: 2rem;
    height: 100%;
    overflow: hidden;
}

.scoreboard #volatile, .scoreboard #hudArea {
    font-size: 2vw;
    flex: 0 0 50% !important;
}

.scoreboard #volatile > .vstack {
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.scoreboard .group-score-name {
    font-size: 2.2vw !important;
}

/* STUDENT PODIUM */
#podium {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    height: 100%;
    justify-content: unset;
    gap: 1rem;
    padding: 1rem
}

.podium-box {
    align-items: center;
    background-color: #003c8f;
    border-radius: 0.5rem;
    display: flex;
    flex-shrink: 0;
    height: 9.375rem;
    margin-bottom: 1rem;
    transition: all 1s;
    width: 100%;
}

.podium-box:last-child {
    margin-bottom: 0 !important;
}

.podium-name {
    color: white;
    flex: 1;
    font-size: 3vw;
    margin-right: 1rem;
    text-align: center;
}

.hud-txt-size {
    font-size: 3vw;
}

.place-img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: calc(100% - 2rem);
    width: 25%;
    flex-shrink: 0;
}

.p1 .place-img {
    background-image: url("../img/1_place.svg");
}

.p2 .place-img {
    background-image: url("../img/2_place.svg");
}

.p3 .place-img {
    background-image: url("../img/3_place.svg");
}

.good-try {
    background-image: url("../img/good_try.svg");
}

#student-podium {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}

#student-podium .place-img {
    height: 9.375rem;
}

.ranking {
    font-size: 4rem;
}

.no-data-container {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
}

.no-data {
    background-image: url("../img/no_data.svg");
    height: 9.375rem;
    width: 9.375rem;
}

.failed {
    background-image: url("../img/fail.svg");
    height: 9.375rem;
    width: 9.375rem;
}

.no-data-title {
    font-size: calc(1.3rem + .6vw)!important;
}

.ffa .podium-name {
    align-self: flex-start;
    border-bottom: 1px solid white;
    flex: 0;
    font-size: 2vw;
    margin-right: 0;
    padding: 0.5rem 1rem;
    text-align: left;
    width: 100%;
}

.ffa .group-winner {
    align-items: center;
    color: white;
    display: flex;
    flex: 1;
    font-size: 2vw;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.group-score-name {
    font-size: 1.3rem !important;
}

.hidden {
    height: 0;
    opacity: 0;
    visibility: hidden;
}

#mainContainer.hidden {
    display: none !important;
}

#gameoverPodium {
    transition: all 2s;
    margin: auto;
    padding: 1rem;
    opacity: 1;
    visibility: visible;
}

#gameoverPodium.hidden {
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
}


/* Student Timer */

#studentTimer {
    height: 3rem;
    width: 3rem;
    position: relative;
    margin-left: auto;
}

#studentTimer > #answerTimer {
    bottom: 0;
    font-size: 1rem;
    height: 75%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 75%;
}

/* Loading Animation */

.lds-default {
    bottom: 0;
    display: inline-block;
    height: 64px;
    left: 0;
    margin: auto;
    position: relative;
    right: 0;
    top: 0;
    width: 64px;
}

.lds-default div {
    animation: lds-default 1.2s linear infinite;
    background: #000;
    border-radius: 50%;
    height: 5px;
    position: absolute;
    width: 5px;
}

.lds-default div:nth-child(1) {
    animation-delay: 0s;
    background: var(--bkkr-red);
    left: 53px;
    top: 29px;
}

.lds-default div:nth-child(2) {
    animation-delay: -0.1s;
    background: var(--bkkr-purple);
    left: 50px;
    top: 18px;
}

.lds-default div:nth-child(3) {
    animation-delay: -0.2s;
    background: var(--bkkr-orange);
    left: 41px;
    top: 9px;
}

.lds-default div:nth-child(4) {
    animation-delay: -0.3s;
    background: var(--bkkr-green);
    left: 29px;
    top: 6px;
}

.lds-default div:nth-child(5) {
    animation-delay: -0.4s;
    background: var(--bkkr-primary);
    left: 18px;
    top: 9px;
}

.lds-default div:nth-child(6) {
    animation-delay: -0.5s;
    background: var(--bkkr-dark-blue);
    left: 9px;
    top: 18px;
}

.lds-default div:nth-child(7) {
    animation-delay: -0.6s;
    background: var(--bkkr-yellow);
    left: 6px;
    top: 29px;
}

.lds-default div:nth-child(8) {
    animation-delay: -0.7s;
    background: var(--bkkr-red);
    left: 9px;
    top: 41px;
}

.lds-default div:nth-child(9) {
    animation-delay: -0.8s;
    background: var(--bkkr-green);
    left: 18px;
    top: 50px;
}

.lds-default div:nth-child(10) {
    animation-delay: -0.9s;
    background: var(--bkkr-purple);
    left: 29px;
    top: 53px;
}

.lds-default div:nth-child(11) {
    animation-delay: -1s;
    background: var(--bkkr-red);
    left: 41px;
    top: 50px;
}

.lds-default div:nth-child(12) {
    animation-delay: -1.1s;
    background: var(--bkkr-orange);
    left: 50px;
    top: 41px;
}

@keyframes lds-default {
    0%, 20%, 80%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

/* Fireworks */

.pyro {
    position: absolute;
    top: 1rem;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    pointer-events: none !important;
}

.pyro > .before, .pyro > .after {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
    to {
        box-shadow: 521px -472px #00f2ff, 307px -126px #bb00ff, -643px -905px #4dff00, 134px -784px #3700ff, -552px 202px #00ff62, -267px -401px #ff002b, 168px 30px #ff0d00, 188px -984px #ddff00, -151px -63px #6fff00, -262px -1133px #eaff00, -406px -538px #00b7ff, -485px -923px #73ff00, -338px -466px #0051ff, 387px -673px #00ff04, -298px -978px #00a2ff, 448px -318px #ff00bb, 187px -1041px #00ff59, 450px -40px #00ff6f, 621px -813px #2f00ff, 44px -745px #00ff4d, -747px -615px #ff000d, -258px -557px #00ff37, 740px 120px #15ff00, 293px -1244px #6fff00, 0px -792px #00ffd9, 581px -786px #9dff00, -37px 249px #fbff00, -112px 128px darkorange, -728px -176px #009dff, -208px -1057px #ff0091, -248px -682px #d5ff00, 530px -303px #b3ff00, 414px -1135px #f2ff00, 37px -1153px #5900ff, -694px -1120px #ffee00, -226px -761px #ff0400, 500px -152px #1500ff, -424px -800px #ea00ff, 268px -745px #ff8800, -218px -334px #1e00ff, -718px -695px #bfff00, 397px -132px #00ffcc, 378px -1124px #99ff00, 527px 43px #00bbff, 291px -983px #a2ff00, 749px 68px #00ff4d, -508px -595px #ff9500, -27px -301px #ff2600, 20px -651px #ffaa00, 120px -789px #ff003c, 628px -82px #00d5ff, 113px -912px #ff8400, -156px -657px #00fffb, -275px -439px #ff0022, 107px -1101px #ff5100, 747px 182px #00ff7b, 216px 52px #e600ff, 425px -1226px #ff0099, 39px -209px #0009ff, -244px -880px #00ccff, -223px 179px #ff0095, -139px -242px #ff4800, -252px -849px #ff0080, 553px -959px #1aff00, 483px -1169px #00ffdd, -254px -967px #00ff4d, -103px -111px #ddff00, 93px -1182px red, 50px -703px #00ff55, 739px -243px #00ffb7, -380px 9px #fff700, -440px 124px #b3ff00, 209px -1071px #ff8000, 699px -896px #ff8000, -58px -496px #2600ff, -590px 35px #ff002f, 676px 34px #ff00b3, -736px -17px #e100ff, -141px -839px #ffdd00, -179px -1220px #00ff1a, -512px -570px #ff0095, -13px 200px #ff00ae, -533px 9px #ff9500, 453px -500px #6600ff, -181px -584px #3c00ff, -77px 94px #8cff00, 630px -578px #6a00ff, -543px -525px #2b00ff, 441px -1056px #ff007b, -445px -769px #ff0066, 342px -925px #00ddff, 512px -48px #00ff22, -253px -620px #00b7ff, 47px -879px #ffe600, -638px -1169px #ffb700, 231px -78px #ff00ee, 716px -508px #00ff44, -172px -994px #ffa600, 28px -1202px #00ffd0, 699px -1014px #b7ff00, -480px -278px #6aff00;
    }
}
@-moz-keyframes bang {
    to {
        box-shadow: 521px -472px #00f2ff, 307px -126px #bb00ff, -643px -905px #4dff00, 134px -784px #3700ff, -552px 202px #00ff62, -267px -401px #ff002b, 168px 30px #ff0d00, 188px -984px #ddff00, -151px -63px #6fff00, -262px -1133px #eaff00, -406px -538px #00b7ff, -485px -923px #73ff00, -338px -466px #0051ff, 387px -673px #00ff04, -298px -978px #00a2ff, 448px -318px #ff00bb, 187px -1041px #00ff59, 450px -40px #00ff6f, 621px -813px #2f00ff, 44px -745px #00ff4d, -747px -615px #ff000d, -258px -557px #00ff37, 740px 120px #15ff00, 293px -1244px #6fff00, 0px -792px #00ffd9, 581px -786px #9dff00, -37px 249px #fbff00, -112px 128px darkorange, -728px -176px #009dff, -208px -1057px #ff0091, -248px -682px #d5ff00, 530px -303px #b3ff00, 414px -1135px #f2ff00, 37px -1153px #5900ff, -694px -1120px #ffee00, -226px -761px #ff0400, 500px -152px #1500ff, -424px -800px #ea00ff, 268px -745px #ff8800, -218px -334px #1e00ff, -718px -695px #bfff00, 397px -132px #00ffcc, 378px -1124px #99ff00, 527px 43px #00bbff, 291px -983px #a2ff00, 749px 68px #00ff4d, -508px -595px #ff9500, -27px -301px #ff2600, 20px -651px #ffaa00, 120px -789px #ff003c, 628px -82px #00d5ff, 113px -912px #ff8400, -156px -657px #00fffb, -275px -439px #ff0022, 107px -1101px #ff5100, 747px 182px #00ff7b, 216px 52px #e600ff, 425px -1226px #ff0099, 39px -209px #0009ff, -244px -880px #00ccff, -223px 179px #ff0095, -139px -242px #ff4800, -252px -849px #ff0080, 553px -959px #1aff00, 483px -1169px #00ffdd, -254px -967px #00ff4d, -103px -111px #ddff00, 93px -1182px red, 50px -703px #00ff55, 739px -243px #00ffb7, -380px 9px #fff700, -440px 124px #b3ff00, 209px -1071px #ff8000, 699px -896px #ff8000, -58px -496px #2600ff, -590px 35px #ff002f, 676px 34px #ff00b3, -736px -17px #e100ff, -141px -839px #ffdd00, -179px -1220px #00ff1a, -512px -570px #ff0095, -13px 200px #ff00ae, -533px 9px #ff9500, 453px -500px #6600ff, -181px -584px #3c00ff, -77px 94px #8cff00, 630px -578px #6a00ff, -543px -525px #2b00ff, 441px -1056px #ff007b, -445px -769px #ff0066, 342px -925px #00ddff, 512px -48px #00ff22, -253px -620px #00b7ff, 47px -879px #ffe600, -638px -1169px #ffb700, 231px -78px #ff00ee, 716px -508px #00ff44, -172px -994px #ffa600, 28px -1202px #00ffd0, 699px -1014px #b7ff00, -480px -278px #6aff00;
    }
}
@-o-keyframes bang {
    to {
        box-shadow: 521px -472px #00f2ff, 307px -126px #bb00ff, -643px -905px #4dff00, 134px -784px #3700ff, -552px 202px #00ff62, -267px -401px #ff002b, 168px 30px #ff0d00, 188px -984px #ddff00, -151px -63px #6fff00, -262px -1133px #eaff00, -406px -538px #00b7ff, -485px -923px #73ff00, -338px -466px #0051ff, 387px -673px #00ff04, -298px -978px #00a2ff, 448px -318px #ff00bb, 187px -1041px #00ff59, 450px -40px #00ff6f, 621px -813px #2f00ff, 44px -745px #00ff4d, -747px -615px #ff000d, -258px -557px #00ff37, 740px 120px #15ff00, 293px -1244px #6fff00, 0px -792px #00ffd9, 581px -786px #9dff00, -37px 249px #fbff00, -112px 128px darkorange, -728px -176px #009dff, -208px -1057px #ff0091, -248px -682px #d5ff00, 530px -303px #b3ff00, 414px -1135px #f2ff00, 37px -1153px #5900ff, -694px -1120px #ffee00, -226px -761px #ff0400, 500px -152px #1500ff, -424px -800px #ea00ff, 268px -745px #ff8800, -218px -334px #1e00ff, -718px -695px #bfff00, 397px -132px #00ffcc, 378px -1124px #99ff00, 527px 43px #00bbff, 291px -983px #a2ff00, 749px 68px #00ff4d, -508px -595px #ff9500, -27px -301px #ff2600, 20px -651px #ffaa00, 120px -789px #ff003c, 628px -82px #00d5ff, 113px -912px #ff8400, -156px -657px #00fffb, -275px -439px #ff0022, 107px -1101px #ff5100, 747px 182px #00ff7b, 216px 52px #e600ff, 425px -1226px #ff0099, 39px -209px #0009ff, -244px -880px #00ccff, -223px 179px #ff0095, -139px -242px #ff4800, -252px -849px #ff0080, 553px -959px #1aff00, 483px -1169px #00ffdd, -254px -967px #00ff4d, -103px -111px #ddff00, 93px -1182px red, 50px -703px #00ff55, 739px -243px #00ffb7, -380px 9px #fff700, -440px 124px #b3ff00, 209px -1071px #ff8000, 699px -896px #ff8000, -58px -496px #2600ff, -590px 35px #ff002f, 676px 34px #ff00b3, -736px -17px #e100ff, -141px -839px #ffdd00, -179px -1220px #00ff1a, -512px -570px #ff0095, -13px 200px #ff00ae, -533px 9px #ff9500, 453px -500px #6600ff, -181px -584px #3c00ff, -77px 94px #8cff00, 630px -578px #6a00ff, -543px -525px #2b00ff, 441px -1056px #ff007b, -445px -769px #ff0066, 342px -925px #00ddff, 512px -48px #00ff22, -253px -620px #00b7ff, 47px -879px #ffe600, -638px -1169px #ffb700, 231px -78px #ff00ee, 716px -508px #00ff44, -172px -994px #ffa600, 28px -1202px #00ffd0, 699px -1014px #b7ff00, -480px -278px #6aff00;
    }
}
@-ms-keyframes bang {
    to {
        box-shadow: 521px -472px #00f2ff, 307px -126px #bb00ff, -643px -905px #4dff00, 134px -784px #3700ff, -552px 202px #00ff62, -267px -401px #ff002b, 168px 30px #ff0d00, 188px -984px #ddff00, -151px -63px #6fff00, -262px -1133px #eaff00, -406px -538px #00b7ff, -485px -923px #73ff00, -338px -466px #0051ff, 387px -673px #00ff04, -298px -978px #00a2ff, 448px -318px #ff00bb, 187px -1041px #00ff59, 450px -40px #00ff6f, 621px -813px #2f00ff, 44px -745px #00ff4d, -747px -615px #ff000d, -258px -557px #00ff37, 740px 120px #15ff00, 293px -1244px #6fff00, 0px -792px #00ffd9, 581px -786px #9dff00, -37px 249px #fbff00, -112px 128px darkorange, -728px -176px #009dff, -208px -1057px #ff0091, -248px -682px #d5ff00, 530px -303px #b3ff00, 414px -1135px #f2ff00, 37px -1153px #5900ff, -694px -1120px #ffee00, -226px -761px #ff0400, 500px -152px #1500ff, -424px -800px #ea00ff, 268px -745px #ff8800, -218px -334px #1e00ff, -718px -695px #bfff00, 397px -132px #00ffcc, 378px -1124px #99ff00, 527px 43px #00bbff, 291px -983px #a2ff00, 749px 68px #00ff4d, -508px -595px #ff9500, -27px -301px #ff2600, 20px -651px #ffaa00, 120px -789px #ff003c, 628px -82px #00d5ff, 113px -912px #ff8400, -156px -657px #00fffb, -275px -439px #ff0022, 107px -1101px #ff5100, 747px 182px #00ff7b, 216px 52px #e600ff, 425px -1226px #ff0099, 39px -209px #0009ff, -244px -880px #00ccff, -223px 179px #ff0095, -139px -242px #ff4800, -252px -849px #ff0080, 553px -959px #1aff00, 483px -1169px #00ffdd, -254px -967px #00ff4d, -103px -111px #ddff00, 93px -1182px red, 50px -703px #00ff55, 739px -243px #00ffb7, -380px 9px #fff700, -440px 124px #b3ff00, 209px -1071px #ff8000, 699px -896px #ff8000, -58px -496px #2600ff, -590px 35px #ff002f, 676px 34px #ff00b3, -736px -17px #e100ff, -141px -839px #ffdd00, -179px -1220px #00ff1a, -512px -570px #ff0095, -13px 200px #ff00ae, -533px 9px #ff9500, 453px -500px #6600ff, -181px -584px #3c00ff, -77px 94px #8cff00, 630px -578px #6a00ff, -543px -525px #2b00ff, 441px -1056px #ff007b, -445px -769px #ff0066, 342px -925px #00ddff, 512px -48px #00ff22, -253px -620px #00b7ff, 47px -879px #ffe600, -638px -1169px #ffb700, 231px -78px #ff00ee, 716px -508px #00ff44, -172px -994px #ffa600, 28px -1202px #00ffd0, 699px -1014px #b7ff00, -480px -278px #6aff00;
    }
}
@keyframes bang {
    to {
        box-shadow: 521px -472px #00f2ff, 307px -126px #bb00ff, -643px -905px #4dff00, 134px -784px #3700ff, -552px 202px #00ff62, -267px -401px #ff002b, 168px 30px #ff0d00, 188px -984px #ddff00, -151px -63px #6fff00, -262px -1133px #eaff00, -406px -538px #00b7ff, -485px -923px #73ff00, -338px -466px #0051ff, 387px -673px #00ff04, -298px -978px #00a2ff, 448px -318px #ff00bb, 187px -1041px #00ff59, 450px -40px #00ff6f, 621px -813px #2f00ff, 44px -745px #00ff4d, -747px -615px #ff000d, -258px -557px #00ff37, 740px 120px #15ff00, 293px -1244px #6fff00, 0px -792px #00ffd9, 581px -786px #9dff00, -37px 249px #fbff00, -112px 128px darkorange, -728px -176px #009dff, -208px -1057px #ff0091, -248px -682px #d5ff00, 530px -303px #b3ff00, 414px -1135px #f2ff00, 37px -1153px #5900ff, -694px -1120px #ffee00, -226px -761px #ff0400, 500px -152px #1500ff, -424px -800px #ea00ff, 268px -745px #ff8800, -218px -334px #1e00ff, -718px -695px #bfff00, 397px -132px #00ffcc, 378px -1124px #99ff00, 527px 43px #00bbff, 291px -983px #a2ff00, 749px 68px #00ff4d, -508px -595px #ff9500, -27px -301px #ff2600, 20px -651px #ffaa00, 120px -789px #ff003c, 628px -82px #00d5ff, 113px -912px #ff8400, -156px -657px #00fffb, -275px -439px #ff0022, 107px -1101px #ff5100, 747px 182px #00ff7b, 216px 52px #e600ff, 425px -1226px #ff0099, 39px -209px #0009ff, -244px -880px #00ccff, -223px 179px #ff0095, -139px -242px #ff4800, -252px -849px #ff0080, 553px -959px #1aff00, 483px -1169px #00ffdd, -254px -967px #00ff4d, -103px -111px #ddff00, 93px -1182px red, 50px -703px #00ff55, 739px -243px #00ffb7, -380px 9px #fff700, -440px 124px #b3ff00, 209px -1071px #ff8000, 699px -896px #ff8000, -58px -496px #2600ff, -590px 35px #ff002f, 676px 34px #ff00b3, -736px -17px #e100ff, -141px -839px #ffdd00, -179px -1220px #00ff1a, -512px -570px #ff0095, -13px 200px #ff00ae, -533px 9px #ff9500, 453px -500px #6600ff, -181px -584px #3c00ff, -77px 94px #8cff00, 630px -578px #6a00ff, -543px -525px #2b00ff, 441px -1056px #ff007b, -445px -769px #ff0066, 342px -925px #00ddff, 512px -48px #00ff22, -253px -620px #00b7ff, 47px -879px #ffe600, -638px -1169px #ffb700, 231px -78px #ff00ee, 716px -508px #00ff44, -172px -994px #ffa600, 28px -1202px #00ffd0, 699px -1014px #b7ff00, -480px -278px #6aff00;
    }
}
@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-webkit-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@-moz-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@-o-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@-ms-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}



/* Custom Scrollbar */

::-webkit-scrollbar-thumb{ background-color: rgba(204, 204, 204, 0.6); border-radius: 20.3125rem; }

::-webkit-scrollbar-track {

}

::-webkit-scrollbar {
}


@media screen and (min-width: 760px) {
    #contentHolder {
        height: 100%;
        width: calc(100vw - 15rem);
    }

    ::-webkit-scrollbar{
        width: 1rem;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(204, 204, 204, 0.6);
        border-radius: 9999px;
        background-clip: padding-box;
        border: 4px solid rgba(0, 0, 0, 0);
    }

}

@media screen and (min-width: 1024px) {
    #contentHolder {
        max-width: 400px;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: 100%;
    }

    /*
    .section-img {
        flex: 1 !important;
        height: 66%;
        margin-top: auto;
        margin-bottom: auto;
    }

    .desktop-setup-holder {
        height: calc(100% - 3.5rem);
        overflow: hidden;
        align-items: center;
    }

    .desktop-setup-form-holder {
        overflow: auto !important;
        height: 100%;
        padding-right: 1rem;
        min-width: 40%;
        width: 40%;
        max-width: 40%;
        margin-left: 1rem;
    }*/

}

/* QR CODE DISPLAY CSS */
html.qr {
    background-color: #2D2D2D;
}

body.qr {
    display: flex;
    flex-direction: column;
    margin: 1rem;
    overflow: auto;
    background-color: white;
    height: calc(100% - 2rem);
}

.qr h1 {
    text-align: center;
    font-weight: bold;
    color: black;
    font-size: 3rem;
    position: absolute;
    left: 0;
    right: 0;
}

.qr #canvas {
    margin: auto;
}