body{
    background: linear-gradient(135deg, #0d3b66, #0a0a0a);
    color: #fff;
    font-family: Arial, Times, 'Segoe UI', sans-serif;
    transition: 2s all ease;
}

body.normal {
    background: linear-gradient(135deg, #0d3b66, #0a0a0a) !important;
    color: #fff !important;
}

body.claro {
    background: #ffffff;
    color: #000;
}

body.escuro {
    background: linear-gradient(135deg, #05002b, #001a33);
    color: #fff;
}

body.alto {
    background: linear-gradient(135deg, #000000, #000000);
    color: #000;
}

body.admin {
    background: linear-gradient(135deg, #0d3b66, #0a0a0a) !important;
    color: #fff !important;
    font-family: 'Segoe UI', sans-serif;
}

/* TOPO */
.topo {
    background: rgba(0, 0, 0, 0.6);
    padding: .5% 15%;
    border-bottom: 2px solid #f4d35e;
}
body.admin .topo {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-bottom: 2px solid #f4d35e;
}

body.claro .topo {
    background: rgba(0, 0, 0);
    border-bottom: 2px solid #f4d35e;
    color: #fff;
}

body.claro .btn-outline-light {
    --bs-btn-color: #000000;
    --bs-btn-border-color: #000000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #000000;
    --bs-btn-hover-border-color: #000000;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #000000;
    --bs-btn-active-border-color: #000000;
    --bs-btn-active-shadow: inset 0 3px 5px rgb(255 255 255 / 13%);
    --bs-btn-disabled-color: #000000;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f9fa;
    --bs-gradient: none;
}

body.alto .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #ff0000;
    --bs-btn-border-color: #ff0000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ff0000;
    --bs-btn-hover-border-color: #ff0000;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ff0000;
    --bs-btn-active-border-color: #ff0000;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ff0000;
    --bs-btn-disabled-border-color: #ff0000;
}
body.alto .btn-danger{
        --bs-btn-color: #000000;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #009688;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #111111;
    --bs-btn-hover-border-color: #1a1a1a;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1a1a1a;
    --bs-btn-active-border-color: #131212;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #009688;
    --bs-btn-disabled-border-color: #009688;
}
body.alto .topo{
    color: #fff;
}

.logo {
    max-height: 60px;
}

.autoTitle {
    color: #0a0a0a
}

.numero {
    font-weight: bold;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/* NÚMEROS */
.numero,
.numero-admin {
    font-size: 20pt;
    padding: 12px;
    border-radius: 10px;
    transition: 2s all ease;
}

@media (max-width: 9000px) {
    .numero {
        font-size: calc(240pt + 50%);
    }
}

@media (max-width: 8000px) {
    .numero {
        font-size: 240pt;
    }
}

@media (max-width: 7000px) {
    .numero {
        font-size: 110pt;
    }
}

@media (max-width: 6000px) {
    .numero {
        font-size: 170pt;
    }
}

@media (max-width: 5000px) {
    .numero {
        font-size: 158pt;
    }
}

@media (max-width: 4000px) {
    .numero {
        font-size: 107pt;
    }
}

@media (max-width: 3000px) {
    .numero {
        font-size: 75pt;
    }
}

@media (max-width: 2600px) {
    .numero {
        font-size: 62pt;
    }
}

@media (max-width: 2500px) {
    .numero {
        font-size: 55pt;
    }
}

@media (max-width: 2000px) {
    .numero {
        font-size: 41.5pt;
    }
}

@media (max-width: 1400px) and (max-height: 800px) {
    .numero {
        font-size: 20pt;
    }
}


/* ÚLTIMO */
.ultimo {
    font-size: 90px;
    color: #f4d35e;
}


#overlayNumero.show {
    opacity: 1;
    transform: scale(1);
}

/* ANIMAÇÃO */
.animar-admin {
    animation: aparecer-admin 1s ease;
    animation-iteration-count: 3;
}

.animar-numeroGrande {
    animation: animar-numeroGrande 1s ease;
}

.animar {
    animation: aparecer-normal 1s ease;
    animation-iteration-count: 3;
}


@keyframes aparecer-admin {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }


    60% {
        transform: scale(.9);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

@keyframes aparecer-normal {
    0% {
        transform: scale(0.0);
        opacity: 0;
    }

    20% {
        transform: scale(0.2);
        opacity: 0.5;
    }

    50% {
        transform: scale(.5);
        opacity: 1;
    }

    60% {
        transform: scale(.7);
        opacity: 1;
    }

    90% {
        transform: scale(.9);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

@keyframes animar-numeroGrande {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

/* OVERLAY (fica sobre a tabela) */
#overlayNumero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 500pt;
    color: #ffffff;
    text-shadow: -7px -3px 0px #ff0018;
    font-weight: bold;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
    transition: 0.4s;
}

#overlayNumero.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;

    animation: animar-numeroGrande 0.5s ease, piscar 1s infinite;
}

.numero:hover {
    transform: scale(1.1);
    transition: 0.2s;
    cursor: pointer;
}

@keyframes zoom {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}
@media (max-width: 9000px) {
    #overlayNumero.show {
        font-size: calc(5000pt + 50%);
    }
}

@media (max-width: 8000px) {
    #overlayNumero.show {
        font-size: calc(4000pt + 50%);
    }
}

@media (max-width: 7000px) {
    #overlayNumero.show {
        font-size: calc(3500pt + 50%);
    }
}

@media (max-width: 6000px) {
    #overlayNumero.show {
        font-size: calc(3000pt + 50%);
    }
}

@media (max-width: 5000px) {
    #overlayNumero.show {
        font-size: calc(2500pt + 50%);
    }
}

@media (max-width: 4000px) {
    #overlayNumero.show {
        font-size: calc(2000pt + 50%);
    }
}

@media (max-width: 3000px) {
    #overlayNumero.show {
        font-size: calc(1500pt + 50%);
    }
}

@media (max-width: 2600px) {
    #overlayNumero.show {
        font-size: calc(1300pt + 50%);
    }
}

@media (max-width: 2500px) {
    #overlayNumero.show {
        font-size: calc(1100pt + 50%);
    }
}

@media (max-width: 2000px) {
    #overlayNumero.show {
        font-size: calc(500pt + 50%);
    }
}
@media (max-width: 1990px) {
    #overlayNumero.show {
        font-size: calc(500pt + 50%);
    }
}