:root {
    --card-background-color: #fff;
    --card-text-color: #000;
    --card-performance-box-background: #e6e6e6;
    --btn-background-color: #0060f6;
    --btn-text-color: #fff;
}

[data-theme="dark"] {
    --card-background-color: #1f1f1f;
    --card-text-color: #fff;
    --card-performance-box-background: #383838;
    --btn-background-color: #fff;
    --btn-text-color: #303030;
}

body {
    background: url(/static/background.jpg) no-repeat;
    background-size: cover;
    animation-direction: alternate;
    font-family: 'Source Sans Pro', sans-serif;
    height: 100vh;
    overflow: auto;
}

#main-big-container,
body {
    justify-content: center;
    align-items: center
}

#main-big-container {
    margin-top: -35px;
    height: 100%;
    display: flex;
    font-family: 'Montserrat', sans-serif
}

.card {
    align-items: center;
    background-color: var(--card-background-color);
    color: var(--card-text-color);
    border-radius: 15.59px;
    box-shadow: 0 .4px 3.6px rgba(0, 0, 0, .004), 0 1px 8.5px rgba(0, 0, 0, .01), 0 1.9px 15.7px rgba(0, 0, 0, .019), 0 3.4px 28.2px rgba(0, 0, 0, .03), 0 6.3px 54.4px rgba(0, 0, 0, .047), 0 15px 137px rgba(0, 0, 0, .07);
    display: flex;
    flex-direction: column;
    position: relative;
    width: 400px;
    margin-top: 15px
}

.card7 {
    overflow-y: auto;
    background: rgba(1, 2, 1, .7);
    width: 300px;
    max-height: 57vh;
    position: fixed;
    font-family: 'Montserrat', sans-serif;
    left: 50%;
    display: none;
    border-radius: 10px;
    font-size: 18px;
    opacity: .9;
    vertical-align: middle;
    margin: auto;
    color: #fff;
    z-index: 5000;
    border: 1px #fff;
    box-shadow: 0 .4px 3.6px rgba(0, 0, 0, .15), 0 1px 8.5px rgba(0, 0, 0, .01), 0 1.9px 15.7px rgba(0, 0, 0, .15), 0 3.4px 28.2px rgba(0, 0, 0, .03), 0 6.3px 54.4px rgba(0, 0, 0, .15), 0 15px 137px rgba(0, 0, 0, .15), 0 0 7px 7px rgba(0, 0, 0, .25);
    padding: 0 0 10px
}

.card7::-webkit-scrollbar {
    display: none
}

.card-wait {
    overflow-y: auto;
    background: rgba(1, 2, 1, .7);
    width: 290px;
    max-height: 55vh;
    position: fixed;
    font-family: 'Montserrat', sans-serif;
    left: 50%;
    display: none;
    border-radius: 10px;
    font-size: 18px;
    opacity: .9;
    vertical-align: middle;
    margin: auto;
    color: #fff;
    z-index: 1000;
    border: 1px #fff;
    box-shadow: 0 .4px 3.6px rgba(0, 0, 0, .15), 0 1px 8.5px rgba(0, 0, 0, .01), 0 1.9px 15.7px rgba(0, 0, 0, .15), 0 3.4px 28.2px rgba(0, 0, 0, .03), 0 6.3px 54.4px rgba(0, 0, 0, .15), 0 15px 137px rgba(0, 0, 0, .15), 0 0 7px 7px rgba(0, 0, 0, .25);
    padding: 0 0 12px
}

.card-update {
    background-color: var(--card-background-color);
    color: var(--card-text-color);
    border-radius: 15.59px;
    width: 200px;
    margin-left: 410px;
    padding: 10px;
    opacity: .95;
    position: fixed;
    box-shadow: 0 .4px 3.6px rgba(0, 0, 0, .004), 0 1px 8.5px rgba(0, 0, 0, .01), 0 1.9px 15.7px rgba(0, 0, 0, .019), 0 3.4px 28.2px rgba(0, 0, 0, .03), 0 6.3px 54.4px rgba(0, 0, 0, .047), 0 15px 137px rgba(0, 0, 0, .07);
}

.card10 {
    display: none;
    margin: auto;
    overflow: hidden;
    background: #fcfcfc;
    max-height: 55vh;
    position: absolute !important;
    font-family: 'Montserrat', sans-serif;
    left: 8px;
    top: 53px;
    opacity: 1;
    color: #000;
    z-index: 6000;
    box-shadow: 0 .4px 3.6px rgba(0, 0, 0, .15), 0 1px 8.5px rgba(0, 0, 0, .01), 0 1.9px 15.7px rgba(0, 0, 0, .15), 0 3.4px 28.2px rgba(0, 0, 0, .03), 0 6.3px 54.4px rgba(0, 0, 0, .15), 0 15px 137px rgba(0, 0, 0, .15), 0 0 7px 7px rgba(0, 0, 0, .25);
    border-radius: 4px;
    padding: 10px;
    font-size: 1.3em;
    transition: opacity .02s ease;
    box-sizing: border-box;
    cursor: pointer
}

.card10:hover {
    border: 2px solid red
}

.top {
    background-color: #eee;
    border-radius: 15.59px;
    margin: 16px 0;
    width: 260px
}

.text {
    box-sizing: border-box;
    padding: 0 20px;
    width: 100%
}

.title {
    align-items: center;
    display: flex;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
    position: relative
}

.join-btn-group {
    display: flex;
    gap: 10px;
    margin: 0 20px 0 20px;
}

.button,
.buttons {
    display: flex;
    width: 100%
}

.button {
    align-items: center;
    background: #edf1f7;
    border-radius: 10px;
    cursor: pointer;
    height: 50px;
    justify-content: center;
    margin: 0 5px 28px 20px
}

.button:last-child {
    margin: 0 20px 20px 5px
}

.button-primary {
    background-color: var(--btn-background-color);
    color: var(--btn-text-color);
    font-weight: bold;
}

.button-primary-hover {
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, .1)
}

.button-primary-hover:hover {
    color: #fff;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, .05)
}

.button-hover {
    transform: scale(1.01);
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, .05)
}

.button:hover {
    transform: scale(1.02)
}

.button:hover ~ .arrow-btn {
    margin-left: 10px;
}

#third-card {
    display: block
}

#fourth-card,
#fifth-card,
#sixth-card,
#seventh-card2,
#eigth-card,
.br-tag {
    display: none
}

#seventh-card {
    visibility: visible
}

.hoverme:hover {
    transform: scale(1.01)
}

.hover-times:hover {
    color: red
}

.coolbob29 {
    float: left;
    font-size: 18px;
    color: #e6e6e6;
    margin-left: 20px;
    display: none
}

.upvote-downvote {
    float: right;
    font-size: 18px;
    color: #32cd32;
    margin-right: 20px;
    display: none
}

.minimize-leaderboard:hover {
    color: red;
    transform: scale(.9)
}

@media screen and (max-width: 768px) {

    input[type=date],
    input[type=datetime-local],
    input[type=datetime],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week],
    select,
    textarea {
        font-size: 16px;
    }
}

* {
    box-sizing: border-box;
    touch-action: manipulation
}

.video-background {
    background: #000;
    display: none;
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.video-background iframe,
.video-foreground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

@media (min-aspect-ratio:16/9) {
    .video-foreground {
        height: 300%;
        top: -100%
    }
}

@media (max-aspect-ratio:16/9) {
    .video-foreground {
        width: 300%;
        left: -100%
    }
}

@media (max-width:600px) {

    .video-background iframe,
    .video-foreground {
        transform: scale(1.1)
    }
}

.back-mybtn {
    text-shadow: -2px -2px 0 #c00, 2px -2px 0 #c00, -2px 2px 0 #c00, 2px 2px 0 #c00, -3px 0 0 #c00, 3px 0 0 #c00, 0 -3px 0 #c00, 0 3px 0 #c00
}

.back-mybtn,
.forward-mybtn {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase
}

.forward-mybtn {
    opacity: .885;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
    margin-right: auto;
    margin-left: auto
}

.forward-mybtn:hover {
    transform: scale(1.02);
    opacity: 1
}

.fade.in {
    opacity: 1
}

.modal.in .modal-dialog {
    transform: translate(0)
}

.modal-header {
    padding-top: .2rem;
    padding-bottom: .3rem
}

.modal-footer {
    padding-top: .1rem;
    padding-bottom: .1rem
}

.modal-body {
    padding: 0
}

#mapid {
    height: 60vh;
    overflow: hidden
}

#map-prompter,
#mapid {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

.w3-button {
    border-radius: 4.3px
}

.w3-button:hover {
    background-color: inherit
}

@media screen and (max-height:598px) {
    .blue-img {
        height: 78px
    }
}

#f-c,
#secondary-button {
    display: none
}

/* Base player button styles */
.player-btn {
    position: fixed;
    cursor: pointer;
    font-weight: 700;
    background: rgba(1, 2, 1, .7);
    border-radius: 5px;
    padding: 0 15px;
    font-size: 18px;
    opacity: .9;
    vertical-align: middle;
    margin: auto;
    color: #fff;
    z-index: 1;
}

/* Specific button styles */
.back-btn {
    width: 46px;
    top: 6px;
    left: 6px;
}

.restart-video {
    top: 38px;
}

.restart-video,
.rewind-video {
    width: 46px;
    right: 6px;
}

.rewind-video {
    top: 70px;
}

#new-back-btn5 {
    display: none;
    background: #262626;
}

#new-back-btn5,
#new-back-btn6 {
    top: 6px;
    left: 57px;
}

#new-back-btn6 {
    width: 46px;
}

#new-back-btn5:hover,
#new-back-btn6:hover~#new-back-btn5 {
    display: block;
}

#volumeEditor {
    cursor: pointer;
}

#new-back-btn4 {
    display: none;
    top: 38px;
    vertical-align: middle;
}

#new-back-btn4,
#new-back-btn7 {
    right: 6px;
}

#new-back-btn7 {
    display: block;
    top: 6px;
}

#new-back-btn8 {
    display: none;
    top: 6px;
    right: 6px;
    background: #262626;
}

#new-back-btn7:hover~#new-back-btn8,
#new-back-btn8:hover {
    display: block;
}

#new-back-btn9 {
    cursor: auto;
    top: 38px;
    left: 6px;
    padding: 1.3px 14px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
}

#new-back-btn9 ul {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

#new-back-btn-lb {
    display: none;
    top: 411px;
    left: 6px;
    padding: 1.3px 14px;
    font-size: 16px;
    border: 1px solid #fff;
    font-family: 'Montserrat', sans-serif;
    width: 188.05px;
}

#new-back-btn-lb ul {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

#new-back-btn-mobile {
    display: none;
    top: 38px;
    left: 6px;
    width: 46px;
}

#new-back-btn-round {
    cursor: not-allowed;
    top: 70px;
    right: 59px;
    width: 74px;
    background: rgba(1, 2, 1, .6);
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.scoreboard {
    width: 51%
}

#new-back-btn-mobile {
    display: none;
    top: 38px;
    left: 6px;
    width: 46px;
}

.minimize-leaderboard {
    display: none
}

@media screen and (max-width:800px) {
    .rewind-video {
        top: 38px;
        display: block
    }

    .restart-video {
        top: 6px;
        display: block
    }

    #new-back-btn6,
    #new-back-btn7,
    #new-back-btn8 {
        display: none
    }

    #new-back-btn9 {
        top: 38px
    }

    #new-back-btn-round {
        right: 6px;
        width: 126.5px
    }

    .scoreboard {
        width: 98%
    }

    .card {
        width: 98vw
    }

    #new-back-btn-end {
        overflow: hidden
    }

    .card7 {
        width: 300px;
        margin-left: -150px
    }

    .card-update {
        display: none
    }

    .minimize-leaderboard {
        display: block
    }

    #new-back-btn-lb {
        top: 381px
    }

    #checkbox-label {
        display: none
    }
}

#spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -92.5px;
    z-index: 100;
    width: 200px;
    height: 185px;
    border-radius: 7px;
    background: #e6e6e6;
    box-shadow: 0 0 7px 7px rgba(0, 0, 0, .5);
    display: none
}

#surround-spinner {
    display: block;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vw;
    position: fixed;
    background: rgba(0, 0, 0, .5)
}

#svg-spinner {
    height: 80px;
    width: 80px;
    position: absolute;
    top: 8.5%;
    left: 50%;
    margin-left: -40px;
    z-index: 100;
    display: none
}

#times-up-div {
    margin-top: 55%;
    margin-left: 5px;
    font-family: 'Montserrat', sans-serif;
    color: #000
}

#times-up-div,
.li-circles {
    text-align: center;
    margin-right: 5px
}

.li-circles {
    background: red;
    border-radius: 8.666px;
    color: #fff;
    display: inline-block;
    font-weight: 700;
    width: 17.333px;
    font-size: 12px;
    margin-bottom: 5px;
    margin-top: 3px;
    text-shadow: 0 1.5px 0 #000
}

.user-name-ll {
    font-size: 14px;
    margin-bottom: 5px;
    margin-top: 3px
}

.user-name-score {
    float: right;
    font-size: 14px;
    line-height: 27px
}

#new-back-btn9 li:not(:first-child),
#new-back-btn-lb li:not(:first-child) {
    border-top: thin solid #fff
}

.li-class {
    display: none
}

.lboard {
    font-weight: normal;
}

#new-back-btn-time {
    cursor: not-allowed;
    top: 6px;
    line-height: 59px;
    right: 59px;
    width: 74px;
    height: 59px;
    background: rgba(1, 2, 1, .6);
    vertical-align: middle;
    border: 1px #fff;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 15px 30px;
}

#countdown,
#round-div {
    width: 100%;
    text-align: center;
    vertical-align: middle
}

#new-back-btn-end {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    overflow: auto
}

.back-btn-animation {
    overflow: hidden;
    /* Hide overflowing pseudo-element */
    display: inline-block;
}

/* Blue overlay */
.back-btn-animation:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0275d8;
    border-radius: 5px;
    z-index: -1;
    /* Place behind text/icon */

    /* Initial state: collapsed at top */
    transform: scaleY(0);
    transform-origin: top center;

    /* Animate ONLY the transform property */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover/focus/active state */
.back-btn-animation:hover:before,
.back-btn-animation:focus:before,
.back-btn-animation:active:before {
    /* Expand downward from top */
    transform: scaleY(1);
    transform-origin: top center;
    /* Keep origin consistent */
}

.demo-back {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(35, 35, 35, .99)
}

.demo {
    top: 50%;
    height: 140px;
    margin-top: -70px;
    transform: translateX(-50%)
}

.demo,
.demo__colored-blocks {
    position: absolute;
    left: 50%;
    width: 500px;
    padding: 10px;
    border-radius: 20px
}

.demo__colored-blocks {
    overflow: hidden;
    top: 0;
    height: 100%;
    margin-left: -250px;
    perspective: 1000px;
    animation: demoAnim 4s ease-in-out infinite, contAnim 4s infinite
}

.demo__colored-blocks-rotater {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    animation: rotation 1.3s linear infinite
}

.demo__colored-blocks-inner {
    overflow: hidden;
    position: relative;
    height: 100%;
    background: #131313;
    border-radius: inherit
}

.demo__colored-block {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300%;
    height: 300%;
    transform-origin: 0 0
}

.demo__colored-block:first-child {
    transform: rotate(0) skewX(-30deg);
    background-color: red
}

.demo__colored-block:nth-child(2) {
    transform: rotate(120deg) skewX(-30deg);
    background-color: #00ff08
}

.demo__colored-block:nth-child(3) {
    transform: rotate(240deg) skewX(-30deg);
    background-color: #00f
}

.demo__inner {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%
}

.demo__numbers {
    overflow: visible;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px
}

.demo__numbers-path {
    fill: none;
    stroke-width: 10px;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0, 518.055065155;
    stroke-dashoffset: 0;
    animation: numAnim 4s ease-in-out infinite;
    opacity: 0
}

.demo__text {
    position: absolute;
    left: 50%;
    top: 0;
    width: 500px;
    height: 100%;
    margin-left: -250px;
    text-align: center;
    line-height: 140px;
    font-size: 100px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 15px;
    transform: translateX(10px);
    animation: hideText 4s infinite
}

@keyframes contAnim {

    15%,
    to {
        margin-left: -250px;
        width: 500px
    }

    25%,
    90% {
        margin-left: -70px;
        width: 140px
    }
}

@keyframes numAnim {
    15% {
        stroke-dasharray: 0, 518.055065155;
        stroke-dashoffset: 0;
        opacity: 0
    }

    25%,
    41% {
        opacity: 1;
        stroke-dasharray: 144.4256591797, 518.055065155;
        stroke-dashoffset: -40
    }

    53%,
    66% {
        stroke-dasharray: 136.0216217041, 518.055065155;
        stroke-dashoffset: -227.238697052
    }

    76% {
        stroke-dasharray: 113.4751205444, 518.055065155;
        stroke-dashoffset: -445.8995704651
    }

    88%,
    to {
        stroke-dasharray: 72.1554946899, 518.055065155;
        stroke-dashoffset: -445.8995704651
    }

    92% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes rotation {
    to {
        transform: rotate(1turn)
    }
}

@keyframes demoAnim {
    15% {
        border-radius: 20px;
        transform: rotate(0)
    }

    30%,
    43% {
        border-radius: 50%;
        transform: rotate(1turn)
    }

    52%,
    65% {
        border-radius: 0;
        transform: rotate(2turn)
    }

    78%,
    90% {
        border-radius: 50%;
        transform: rotate(3turn)
    }

    to {
        border-radius: 20px;
        transform: rotate(4turn)
    }
}

@keyframes hideText {

    15%,
    to {
        opacity: 1
    }

    20%,
    96% {
        opacity: 0
    }
}

.animate-top {
    position: relative;
    animation: animatetopxx 0.4s;
}

#performance-container {
    width: 100%;
    background-color: var(--card-performance-box-background);
    border-radius: 5px;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
    padding: 3px;
}

@keyframes animatetopxx {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.animate-zoom {
    animation: animatezoom 0.6s;
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.animate-left {
    position: relative;
    animation: animateleft 0.4s;
}

@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

.streamer-mode-switch-div {
    margin-top: 15px;
    transform: scale(.7);
    transform-origin: left;
    display: flex;
    gap: 10px
}

.public-room-div {
    margin-top: 0 !important;
    margin-bottom: 15px !important
}

.streamer-mode-switch-div .streamer-switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px
}

.streamer-mode-switch-div .streamer-switch input {
    display: none
}

.streamer-mode-switch-div .streamer-slider {
    background-color: #585858;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s
}

.streamer-mode-switch-div .streamer-slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px
}

.streamer-mode-switch-div input:checked+.streamer-slider {
    background-color: #b6b6b6
}

.streamer-mode-switch-div input:checked+.streamer-slider:before {
    transform: translateX(26px)
}

.streamer-mode-switch-div .streamer-slider.streamer-round {
    border-radius: 34px
}

.streamer-mode-switch-div .streamer-slider.streamer-round:before {
    border-radius: 50%
}

.streamer-mode-text {
    display: inline-block;
    font-size: 20px;
    margin-top: 2px
}