* {
    /* background-color: #343a40 !important; */
}

.panel-login {
    z-index: 1;
}

.botoes {
    justify-content: center;
}

.btn-volante {
    border-style: solid;
    border-radius: 1.3rem;
    min-height: 3rem;
    max-width: 6rem;
    min-width: 6rem;
    border-color: #ffba00;
    color: #212529 !important;
    background-color: #ffba00;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    margin: 18px auto 0 auto;
}

.btn-volante-ligado {
    margin: 0 auto 0 auto;
}

.btn-volante .btn-volante-texto {
    font-size: 0.9rem;
    margin: 0 0 0 0.6rem;
}

#mcuAgencia:focus {
    box-shadow: 0 0 0 0rem rgb(134 142 150 / 34%);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.flex-item-versao {
    position: absolute;
    bottom: 0;
    right: auto;
}

.flex-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* flex-wrap         : wrap; */
    /* flex-flow         : wrap; */
    background-color: #FFBA00 !important;
    flex: 1;
    /* ocupa todo o espaço disponível entre header e footer */
    display: flex;
    /* se quiser usar filhos em coluna também */
    flex-direction: column;
}

.flex-item {
    /* width                    : 40rem; */
    /* height                : 40rem; */
    /* background-color      : #343a40 !important; */
}

.borda {
    display: flex;
    flex-direction: column;
    z-index: 100;
    position: sticky;
    align-items: center;
    justify-content: flex-start;
    border-style: solid;
    border-color: #343433;
    background: #ffba00ed;
    padding: 1.8rem 0 0 0;
    border-width: 1.2rem;
    border-radius: 11rem;
    max-height: 40rem;
    min-height: 40rem;
    width: 23rem;
    overflow: hidden;
    /* background-color: #343a40 !important; */
}

.texto-logo {
    color: #fff;
}

.bola-tela-inicial {
    padding: 0rem 0rem .5rem 0rem;
    /* position: absolute; */
}

.logo-tela-inicial {
    padding: 0rem 0rem 0rem 0rem;
    margin: 5rem 7rem 0rem 0rem;
    position: absolute;
    max-width: 20rem;
    /* box-shadow: none !important; */
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        /* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
        transform: translatey(0px);
    }

    50% {
        /* box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2); */
        transform: translatey(-3rem);
    }

    100% {
        /* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
        transform: translatey(0px);
    }
}

input:focus,
.form-control:focus {
    border: 0 !important;
    border-bottom: .2rem solid #343A40 !important;
}

.input-group-append,
input,
.form-control {
    border: 0 !important;
    border-bottom: .2rem solid #343A40 !important;
}

.btn-mcu {
    font-size: 1.4rem;
    text-align: center;
    border-radius: 1.3rem;
    min-height: 3rem;
    min-width: 19rem;
}

#wrapper-mensagem-principal {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0 !important;
    position: absolute;
    justify-content: flex-start;
    margin: 0.6rem;
}

.wrapper-mcu {
    max-width: 90%;
    margin: auto;
    min-height: 2.8rem;
}

#mcuAgencia2 {
    font-size: 1.2rem;
}

.animated-shake {
    animation: horizontal-shaking .4s ease 3;
    /* animation-delay: 25s; */
}

@keyframes horizontal-shaking {
    0% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(8px)
    }

    50% {
        transform: translateX(-8px)
    }

    75% {
        transform: translateX(8px)
    }

    100% {
        transform: translateX(0)
    }
}

.card {
    position: absolute;
    left: 0;
    right: 0;
    top: 19%;
    margin: auto;
    width: 23rem;
    height: 40rem;
    border-width: 1.2rem;
    border-radius: 11rem;
    /* border-color: #343433; */
    /* background: #191919aa; */
    /* background: linear-gradient(
        180deg,
        #FFBA00 0%,
        #faa704 50%
    ); */
    /* backdrop-filter: blur(4px); */
    /* box-shadow: inset 0 2px 2px 0 #e7c4a088,
        inset 0 -2px 2px 0 #0003; */

    color: #000;
    /* text-shadow: 1px 1px 3px #333a; */
    padding: 1.8rem 0 0 0;
    padding-right: 42px;
    display: flex;
    flex-direction: column;
    justify-content: end;

    h2, p {
        margin: 8px 0;
    }

    h2 {
        font-size: 1.1em;
    }

    p {
        font-size: 0.9em;
        font-weight: 800;
        color: #aaa;
    }

    .button {
        width: fit-content;
        border-radius: 100px;
        padding: 8px 36px;
        margin-top: 1rem;
        background: #fff2;
        box-shadow:
            0 0 0 1px #fff3,
            inset 120px 0 100px -100px #000c,
            0 0 0 0 #fff1;

        transition: box-shadow 0.4s ease-in-out;
        cursor: pointer;

        &:hover {
            box-shadow:
                0 0 0 1px #fff3,
                inset 200px 0px 100px -100px #000a,
                -4px 0 8px 2px #fff2;
        }
    }

    img {
        position: absolute;
        top: 32px;
        left: 0;
        right: 0;
        width: 80%;
        margin: auto;
        object-fit: contain;
        user-select: none;
        pointer-events: none;
    }
}

.accents {
    user-select: none;
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    /* top: 12%; */

    .acc-card {
        width: 23rem;
        min-height: 40rem;
        max-height: 40rem;
        background: #f9b101;
        opacity: 1.8;
        z-index: 0;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        border-style: solid;
        border-color: #343433;
        /* border-color: #4b4949; */
        border-width: 3rem;
        border-radius: 11rem;
        /* transition: all 0.1slinear; */
        transform-origin: 20% 80%;

        &:nth-child(1) {
            animation: wobble 18s ease-in-out infinite;
        }

        &:nth-child(2) {
            animation: wobble 22s ease-in-out -6s infinite reverse;
        }

        &:nth-child(3) {
            animation: wobble 26s ease-in-out -18s infinite;
        }
    }

    .light {
        --bgref: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 487 487'%3E%3Ccircle cx='243' cy='243.5' r='233' style='fill:none; opacity:.1; stroke:%23aaa; stroke-linecap:round; stroke-miterlimit:10; stroke-width:18px;'/%3E%3Ccircle cx='243.5' cy='243.5' r='243' style='fill:none; stroke:%23111; stroke-linecap:round; stroke-miterlimit:10;'/%3E%3Ccircle cx='243' cy='243.5' r='222' style='fill:none; stroke:%23111; stroke-linecap:round; stroke-miterlimit:10;'/%3E%3Cpath d='m10,243.5C10,114.82,114.32,10.5,243,10.5' style='fill:none; stroke:%23ddd; stroke-linecap:round; stroke-miterlimit:10; stroke-width:18px;'/%3E%3C/svg%3E");
        position: absolute;
        left: 0;
        right: calc(0% + 300px);
        top: 264px;
        margin: auto;
        width: 164px;
        height: 164px;
        z-index: -2;
        background-image: var(--bgref);
        animation: rotate360 22s linear infinite;

        &::before, &::after {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-image: var(--bgref);
            filter: blur(3px);
            scale: 1.01;
        }

        &::after {
            filter: blur(8px);
        }

        &.sm {
            width: 100px;
            height: 100px;
            left: calc(0% + 300px);
            right: 0;
            top: 142px;
            bottom: 0;
            animation: rotate360 18s linear -10s infinite;
        }
    }

    .top-light {
        position: absolute;
        left: 0;
        right: 0;
        top: -42px;
        margin: auto;
        width: 284px;
        height: 6px;
        border-radius: 10px;
        background: #fffef9;
        box-shadow:
            0 0px 1px 1px #ffc78e,
            0 1px 2px 1px #ff942977,
            0 2px 6px 1px #e98b2d77,
            0 4px 12px 0px #ff9e3d99,
            0 12px 20px 12px #ff800044;
    }

}

@keyframes rotate360 {
    to {
        rotate: 360deg;
    }
}

@keyframes wobble {
    0% {
        transform: translateX(10px) translateY(20px) rotate(-3deg) scale(1);
    }

    20% {
        transform: translateX(-44px) translateY(-8px) rotate(6deg) scale(1.02);
    }

    60% {
        transform: translateX(32px) translateY(18px) rotate(-8deg) scale(1);
    }

    80% {
        transform: translateX(-42px) translateY(-22px) rotate(12deg) scale(0.94);
    }

    100% {
        transform: translateX(10px) translateY(20px) rotate(-3deg) scale(1);
    }
}

@media screen and (max-height: 600px) {

    .card {
        height: fit-content !important;

        img {
            display: none;
        }
    }

    .acc-card {
        height: 180px !important;
    }

    .card, .accents {
        top: 30%;
    }

    .accents {
        .light {
            top: 124px;
            bottom: 0;

            &.sm {
                top: 42px;
            }
        }
    }
}

/*Extra small devices (portrait phones, less than 36rem) - xs */
@media (min-width: 22.5625rem) and (max-width: 35.99875rem) {

    .versao-ca.mostra-mq:after {
        content: " | xs";
        /* font-size: 1rem; */
        font-weight: 600 !important;
        color: #f13b3b !important;
    }

    .bola-tela-inicial {
        width: 19rem;
    }

    .accents {
        .acc-card {
            /* width: 22rem; */
            transform-origin: 20% 90%;
        }
    }

}

/*Small devices (landscape phones, 36rem and up) - sm */
@media (min-width: 36rem) and (max-width: 47.99875rem) {

    .versao-ca.mostra-mq:after {
        content: " | sm";
        /* font-size: 1.3rem; */
        font-weight: 600 !important;
        color: #00d9ff !important;
    }

    .bola-tela-inicial {
        width: 19rem !important;
    }

    .accents {
        .acc-card {
            /* width: 22rem; */
            transform-origin: 20% 90%;
        }
    }

}

/*Medium devices (tablets, 48rem and up) - md */
@media (min-width: 48rem) and (max-width: 61.99875rem) {

    .versao-ca.mostra-mq:after {
        content: " | md";
        /* font-size: 1.3rem; */
        font-weight: 600 !important;
        color: #ffa600 !important;
    }

    .bola-tela-inicial {
        width: 19rem;
    }

    .accents {
        .acc-card {
            /* width: 22rem; */
            transform-origin: 20% 90%;
        }
    }

}

/*Large devices (desktops, 62rem and up) - lg */
@media (min-width: 62rem) and (max-width: 74.99875rem) {

    .versao-ca.mostra-mq:after {
        content: " | lg";
        /* font-size: 1.3rem; */
        font-weight: 600 !important;
        color: #5eff0056 !important;
    }

    .bola-tela-inicial {
        width: 19rem;
    }

    .accents {
        .acc-card {
            /* width: 22rem; */
            transform-origin: 20% 90%;
        }
    }

}

/*Extra large devices (large desktops, 75rem and up) - xl */
@media (min-width: 75rem) {

    .versao-ca.mostra-mq:after {
        content: " | xl";
        /* font-size: 1.3rem */
        font-weight: 600 !important;
        color: #58575c !important;
    }

    .bola-tela-inicial {
        width: 19rem;
    }

    .acc-card {
        transform-origin: 20% 100%;
    }

}