.texto-indique-pad {
            padding: 8px 0px 8px 0px;
         }

         .texto-indique-pad .texto-indique {
            font-size: 13px;
         }

         @media screen and (max-width: 900px) {
            .texto-indique-pad {
               padding: 10px;
               margin-top: 0px !important;
               padding: 4px 0px 4px 0px;
            }

            .texto-indique-pad .texto-indique {
               font-size: 12px;
            }
         }
      

/* ================ */


    #logo-header-navbar {
        margin-right: 10px;
    }

    .dropdown-toggle::after {
        display: none !important;
    }
    
    .dropdown .dropdown-toggle {
        background: none;
        border: none;
        padding: 0;
        height: 40px;
        border-radius: 50px;
        transition: box-shadow 0.2s ease-in-out;
        vertical-align: middle;
        display: flex;
        align-items: center;
        gap: 8px;
        padding-right: 10px;
    }

    .eng-letter-name {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: #3a3a3a;
        border-radius: 50%;
        color: white;
        flex-shrink: 0;
    }
    
    .arrow-down {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #fff;
        transition: transform 0.3s ease;
    }

    .dropdown.show .dropdown-toggle .arrow-down {
        transform: rotate(180deg);
    }
    
    .dropdown.show .dropdown-toggle,
    .dropdown .dropdown-toggle:hover,
    .dropdown .dropdown-toggle:focus {
        box-shadow: 0 0 0 2px #29e504;
    }

    #dropdown-navbar.dropdown-menu {
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        margin-top: 10px;
        right: 0;
        left: auto;
        min-width: 220px;
        z-index: 9999;
    }
    #dropdown-navbar.dropdown-menu-saldo {
        right: 0;
        left: 0 !important;
    }

    #dropdown-navbar .w-dropdown-list {
        background-color: #191A1F;
        border: 1px solid #4B5563;
        border-radius: 8px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    #dropdown-navbar a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 1rem;
        font-weight: 500;
        color: #D1D5DB;
        text-decoration: none;
    }

    #dropdown-navbar .info-account .txt-label,
    #dropdown-navbar .link-drop > div {
        transition: color 0.2s ease-in-out;
    }

    #dropdown-navbar .dropdown-saldo {
        width: 280px !important;
    }

    .eng-info-account {
        background-color: transparent;
        border: none;
        padding-bottom: 8px;
        margin-bottom: 4px;
        border-radius: 0 !important;
    }

    .eng-info-account .icon-16 {
        width: 36px;
        height: 36px;
        background-color: #4B5563;
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 18px;
    }

    .info-account .txt-label.white {
        font-size: 14px;
        font-weight: 500;
    }

    .info-account .txt-label {
        font-size: 12px;
    }

    .link-drop .icon-16 {
        width: 20px;
        text-align: center;
    }

    .text-menu {
        font-size: 11px;
        color: #a5abb6ff;
        padding: 0 1.2rem 8px 1.2rem;
        margin: 0;
    }

    .btn-atualizar-saldo {
        background-color: #706e6eff !important;
        border: 1px solid #4B5563 !important;
        color: #FFF !important;
    }

    .border-t {
        border-top: 1px solid #1c1f23;
    }

    @media (max-width: 800px) {
        .navLeft-link { display: none; }
        .depositoButton span { display: none; }
        .sacarButton { display: none; }
        .eng-letter-name.no-mobile { display: flex !important; }
    }

    .navbar-buttons-login-wrapper .w-button,
    .depositoButton,
    .sacarButton {
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

    .navbar-buttons-login-wrapper .w-button:hover,
    .depositoButton:hover,
    .sacarButton:hover {
        background-color: #29e504 !important;
        color: #000 !important;
        border-color: #29e504 !important;
    }

    #dropdown-navbar a:hover .info-account .txt-label,
    #dropdown-navbar a.link-drop:hover > div {
        color: #29e504;
    }
    .login-text{
        font-size: 1rem !important;
        font-weight: 600;
    }
    .logout-link{
        border-top: 1px solid #4B5563;
    }
    #depositar-icon{
        width: 25px;
        height: 25px;
    }

    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

    .spin-rotate {
        animation: spin 1s linear infinite;
    }

    @keyframes piscarSaldo {
    0% { color: #FFFFFFB2; }
    50% { color: transparent; }
    100% { color: #FFFFFFB2; }
    }

    .pisca-efeito {
        animation: piscarSaldo 0.4s linear infinite;
    }
    #logout-btn{
        color: #F52053 !important;
    }


/* ================ */


    @import url(/variables.css);

    .navbar-mobile.custom-navbar {
        display: flex;
        justify-content: space-around;
    }

    .link-menu-mobile {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        flex: 1;
        font-size: 11px;
        height: 65px;
        gap: 3px;
    }

    .link-menu-mobile .icon-16 {
        height: 30px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
        font-size: 18px;
        color: #fff;
        transition: color 0.3s ease;
    }
    
    .link-menu-mobile .white {
        transition: color 0.3s ease;
    }

    .link-depositar::before {
        content: '';
        display: block;
        height: 30px;
        margin-bottom: 2px;
    }

    .icon-depositar-wrapper {
        background-color: var(--primary-color);
        border: 4px solid #1A1A1A;
        border-radius: 50%;
        width: 58px;
        height: 58px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 28px;
        position: absolute;
        color: #000;
        top: -27px;
        left: 50%;
        transform: translateX(-50%) translateY(-3px);
        font-size: 20px;
    }

    .link-depositar .white {
        margin-top: 0;
    }
    .link-menu-mobile:not(.link-depositar):hover .icon-16,
    .link-menu-mobile:not(.link-depositar):hover .white {
        color: var(--primary-color);
    }
    @media (min-width: 992px) {
        .navbar-mobile.custom-navbar {
            display: none !important;
        }
    }


/* ================ */


    @import url(/variables.css);

    #modal-dialog-fullscrean-container {
        padding: 0px !important;
        margin: auto;
    }

    #modal-content-container-menu {
        border-radius: 0px !important;
        border: 1px solid #0C3567 !important;
    }

    .modal-dialog-fullscreen {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    /* Garante que o container do bootstrap não interfira no visual */
    #exampleModal .modal-content {
        background-color: transparent;
        border: none;
        height: 100%;
        border-radius: 0;
    }

    /* Estilo principal para o conteúdo (aplicado na div interna) */
    .modalMenu {
        max-height: 100%;
        height: 100dvh;
        border: none;
        background-color: rgba(14, 34, 59, 1);
        padding: 20px;
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
        position: relative;
        /* Necessário para posicionar o botão de fechar */
    }

    .modalMenu::-webkit-scrollbar {
        display: none;
    }

    .modalMenu .buttonsClose {
        position: absolute;
        right: 10px;
        top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        z-index: 9;
        cursor: pointer;
        color: #23C3E2;
        background-color: rgba(255, 255, 255, .05);
        width: 34px;
        height: 34px;
        border-radius: 8px;
        transition: .3s;
    }

    .modalMenu .buttonsClose:hover {
        background-color: #23C3E2;
        color: #0E223B;
    }

    .modalMenu .menulogo {
        margin-bottom: 40px;
        display: flex;
        justify-content: center;
    }

    .modalMenu .areaTitle {
        position: relative;
        display: flex;
        justify-content: center;
        text-align: center;
        gap: 10px;
    }

    .modalMenu .areaTitle .textArea .titleModal {
        margin: 0px 0 10px 0;
        line-height: 120%;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
    }

    .modalMenu .areaTitle .textArea .subtittleModal {
        color: rgba(255, 255, 255, 0.7);
        font-size: 13px;
        line-height: 120%;
        font-weight: 400;
    }


    .modalMenu .menuButtons,
    .modalMenu .menuButtonsLogado {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 20px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .modalMenu .buttonSelecionar {
        width: 50%;
        height: 50px;
        border-radius: 10px;
        border: 1px solid var(--primary-color);
        background-color: var(--primary-color);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
    }

    .modalMenu .buttonSelecionar p {
        font-weight: 700;
        font-size: 13px;
        color: rgba(14, 34, 59, 1);
        margin: 0;
    }

    .modalMenu .buttonFechar {
        width: 50%;
        height: 50px;
        border-radius: 10px;
        background-color: rgba(25, 50, 82, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-decoration: none;
    }

    .modalMenu .buttonFechar p {
        font-weight: 600;
        font-size: 13px;
        color: rgba(255, 255, 255, 1);
        margin: 0;
    }

    .modalMenu .buttonSacar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background-color: rgba(25, 50, 82, 0.53);
        border-radius: 10px;
        width: 50%;
        height: 50px;
        color: white;
        cursor: pointer;
        text-decoration: none;
    }

    .modalMenu .buttonSacar span {
        font-size: 13px;
    }

    .modalMenu .buttonDepositar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background-color: var(--primary-color);
        border: 1px solid var(--primary-color);
        border-radius: 10px;
        width: 50%;
        height: 50px;
        cursor: pointer;
        text-decoration: none;
    }

    .modalMenu .buttonDepositar span {
        font-weight: 600;
        font-size: 13px;
        color: rgba(14, 34, 59, 1);
    }

    .modalMenu .areaBanca {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .modalMenu .areaIconBanca {
        width: 48px;
        height: 48px;
        background-color: rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    .modalMenu .areaTextBanca .titleBanca {
        font-weight: 400;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.7);
    }

    .modalMenu .areaTextBanca .areaCifrao {
        font-weight: 600;
        font-size: 20px;
        color: rgba(255, 255, 255, 1);
    }

    .areaTextBanca {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .modalMenu .menuList {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }

    .modalMenu .menuItem {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.05);
        color: white;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s;
        text-decoration: none;
    }

    .modalMenu .menuItem:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .modalMenu .menuItem span {
        flex: 1;
        text-align: left;
    }

    .modalMenu .iconWrapper {
        width: 34px;
        height: 34px;
        background-color: white;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modalMenu .close-btn {
        width: 47px;
        height: 47px;
        background: white;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        color: #C51212;
        font-size: 16px;
        margin: 0 auto;
    }

    .modalMenu .logoutContainer {
        display: flex;
        justify-content: center;
        text-decoration: none;
    }

    .modalMenu .logoutButton {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        cursor: pointer;
    }

    .modalMenu .logoutIcon {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modalMenu .logoutIcon img {
        width: 14px;
        height: 14px;
    }

    .modalMenu .logoutText {
        font-weight: 600;
        font-size: 12px;
        color: white;
    }

    #textDepositar,
    #textCadastre-se {
        color: var(--text-color-1);
        font-family: var(--font-bold);
        font-weight: 400;
    }

    #textSacar {
        font-family: var(--font-bold);
        font-weight: 400;
    }

    #logoMenuDeslogado {
        width: 135px;
    }


/* ================ */


/* container geral */
.deposit-block { padding: 10px; }

/* grid dos botões */
.quick-values {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto; /* auto em vez de scroll força só quando precisa */
  padding-bottom: 6px; /* opcional, espaço pra não cortar a sombra */
}

.containerModalSaque .quick-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0f210c;
  /* border: 1px solid #1b281b; */
  color: #32a614;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s;

  /* tamanho fixo */
  flex: 0 0 100px;  /* equivalente a width:200px + não encolher */
  width: 100px;
}
.quick-btn:hover { transform: translateY(-1px); }
.quick-btn.is-active {
  background: linear-gradient(to top, #29e5041f 0%, #0f150f 35%);
  border-color: #34d236;
  box-shadow: 0 0 0 1px #34d236;
  color: #d7ffd7;
}
.infoText{
  margin-top: 5px !important;
}


/* ================ */


    #confirmarSaqueBtn:hover{
        background-color:rgb(24, 139, 67);
        color: #fff;
    }
    #cancelarConfirmacaoBtn:hover{
        background-color:rgb(211, 59, 72);
        color: #fff;
    }
    #confirmarSaqueBtn:focus,
    #cancelarConfirmacaoBtn:focus {
        outline: none;
        box-shadow: none;
    }


/* ================ */


  @media (min-width: 768px) {
    .content-modal-liberacao-pendente {
        min-width: 354px;
    }
  }
  #modalEtapa1{
    padding-right: 0px !important;
  }
  #modalEtapa1 .modal-content {
    margin: 0px 10px;
  }


/* ================ */


    /* Contaienr Modal */
    @media (min-width: 768px) {
        .containerModalAbrirTicket2 {
            position: relative;
            background-color: transparent;
            height: auto;
        }

        .modalAbrirTicket2 {
            max-width: 450px;
            height: auto;
            min-height: 500px;
            border-radius: 10px;
        }

        .modal-dialog {
            max-width: 500px;
        }
    }

    @media (max-width: 767px) {
        .containerModalAbrirTicket2 {
            position: fixed;
            height: 100dvh;
            background-color: rgba(0, 0, 0, .4);
        }

        .modalAbrirTicket2 {
            width: 100%;
            height: 100%;
            border-radius: 0;
        }
    }

    .containerModalAbrirTicket2 {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0px;
        top: 0px;
        background-color: rgba(0, 0, 0, .4);
        color: #fff;
        width: 100%;
        height: 100dvh;
        opacity: 1;
        transition: .3s;
        z-index: 1000000000000 !important;
    }

    .modalAbrirTicket2 {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: #0E223B;
        border: 1px solid #123F77;
        overflow: hidden;
        padding: 20px;
    }

    .modalAbrirTicket2 .modalContent {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease, transform 0.5s ease;
        width: 100%;
        height: 100%;
        max-width: 400px;
        padding-top: 80px;
        text-align: center;
        padding: 20px;
    }

    .modalAbrirTicket2 .modalContent.show {
        opacity: 1;
        pointer-events: auto;
        z-index: 1;
    }

    /* Estilos para o estado de ticket já registrado */
    .modalAbrirTicket2 .contentTicketRegistrado {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 60px;
        text-align: center;
        width: 100%;
        height: 100%;
    }

    @media (min-width: 768px) {
        .containerModalAbrirTicket2 {
            position: relative;
            background-color: transparent;
            height: auto;
        }

        .modalAbrirTicket2 {
            max-width: 450px;
            height: auto;
            min-height: 500px;
            border-radius: 10px;
        }

        .modal-dialog {
            max-width: 500px;
        }
    }

    /* Mantém o mobile como estava */
    @media (max-width: 767px) {
        .containerModalAbrirTicket2 {
            position: fixed;
            height: 100dvh;
            background-color: rgba(0, 0, 0, .4);
        }

        .modalAbrirTicket2 {
            width: 100%;
            height: 100%;
            border-radius: 0;
        }
    }

    .containerModalAbrirTicket2 {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0px;
        top: 0px;
        background-color: rgba(0, 0, 0, .4);
        color: #fff;
        width: 100%;
        height: 100dvh;
        opacity: 1;
        /* pointer-events: none; */
        transition: .3s;
        z-index: 1000000000000 !important;
    }

    .containerModalAbrirTicket2.open {
        opacity: 1;
        pointer-events: all;
    }

    /* Modal IOF */
    .modalAbrirTicket2 {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* max-width: 400px; */
        width: 100%;
        height: 100%;
        background-color: #0E223B;
        border: 1px solid #123F77;
        border-radius: 0px;
        overflow: hidden;
        padding: 20px;
    }

    .modalAbrirTicket2 {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: #0E223B;
        border: 1px solid #123F77;
        overflow: hidden;
        padding: 20px;
    }

    .modalAbrirTicket2 .modalContent {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease, transform 0.5s ease;
        width: 100%;
        height: 100%;
        max-width: 400px;
        padding-top: 80px;
        /* para evitar sobreposição com logo */
        text-align: center;
        padding: 20px;
    }

    .modalAbrirTicket2 .modalContent.show {
        opacity: 1;
        pointer-events: auto;
        z-index: 1;
    }

    .modalAbrirTicket2 .buttonClose {
        position: absolute;
        right: 10px;
        top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        z-index: 9;
        transition: .3s;
        cursor: pointer;
        color: #23C3E2;
        transition: .3s;
        background-color: rgba(255, 255, 255, .05);
        width: 34px;
        height: 34px;
        border-radius: 8px;
        transition: .3s;
    }

    .modalAbrirTicket2 .buttonClose:hover {
        background-color: #23C3E2;
        color: #0E223B;
    }

    .modalAbrirTicket2 .logoBrwin {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translate(-50%, 0px);
        height: 37px;
    }

    /* Content Modal 1 */
    .modalAbrirTicket2 .contentAreaModal1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 60px;
        text-align: center;
        width: 100%;
        height: 100%;
    }

    .modalAbrirTicket2 .contentAreaModal1 .iconAlert {
        width: 40px;
        fill: #F3EB1A;
    }

    .modalAbrirTicket2 .contentAreaModal1 .titleModal {
        font-size: 20px;
        line-height: 120%;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .modalAbrirTicket2 .contentAreaModal1 .descriptionModal {
        color: rgba(255, 255, 255, .7);
        font-size: 14px;
        margin-bottom: 10px;
    }

    .modalAbrirTicket2 .contentAreaModal1 .tagEmail {
        color: #fff;
        font-weight: 700;
    }

    .modalAbrirTicket2 .contentAreaModal1 .suportText {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        margin-top: 8px;
        margin-bottom: 20px;
    }

    .modalAbrirTicket2 .contentAreaModal1 .suportText svg {
        height: 18px;
        fill: #fff;
    }

    .modalAbrirTicket2 .contentAreaModal1 .areaButtons {
        display: flex;
        width: 100%;
        gap: 10px;
        margin-top: 20px;
    }

    .modalAbrirTicket2 .contentAreaModal1 .areaButtons .secondaryButton {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        background-color: rgba(25, 50, 82, 0.5);
        height: 50px;
        color: #fff;
        border-radius: 10px;
        font-weight: 700;
    }

    .modalAbrirTicket2 .contentAreaModal1 .areaButtons .principalButton {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        background-color: #01A2E8;
        height: 50px;
        color: #fff;
        border-radius: 10px;
        font-weight: 700;
    }

    /* Modal Carregando */
    .modalAbrirTicket2 .contentCarregando {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 60px;
        text-align: center;
        width: 100%;
        height: 100%;
    }

    .modalAbrirTicket2 .contentCarregando .rotateIcon {
        fill: #fff;
        height: 20px;
    }

    .modalAbrirTicket2 .contentCarregando .titleModal {
        font-size: 20px;
        line-height: 120%;
        margin-top: 16px;
        margin-bottom: 4px;
    }

    .modalAbrirTicket2 .contentCarregando .descriptionModal {
        color: rgba(255, 255, 255, .7);
        font-size: 14px;
        margin-bottom: 10px;
    }

    .modalAbrirTicket2 .contentCarregando .areaLoadingBar {
        position: relative;
        width: 100%;
        height: 14px;
        border-radius: 40px;
        background-color: rgba(25, 50, 82, 0.5);
        margin-top: 50px;
    }

    .modalAbrirTicket2 .contentCarregando .internalLoadingBar {
        position: absolute;
        left: 0px;
        background-color: #01A2E8;
        width: 0%;
        /* Começa em 0 para transitar */
        height: 100%;
        border-radius: 40px;
        transition: width 1.2s ease;
        /* Transição suave de largura */
    }

    .modalAbrirTicket2 .contentCarregando .internalLoadingBar .percent {
        position: absolute;
        top: -40px;
        padding: 2px 10px;
        right: 0px;
        transform: translate(40%, 0);
        background-color: #FFFFFF;
        border-radius: 5px;
        color: #000;
        font-weight: 600;
        transition: right 1.2s ease;
    }

    /* Content Modal 2 */
    .modalAbrirTicket2 .contentAreaModal2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 60px;
        text-align: center;
        width: 100%;
        height: 100%;
    }

    .modalAbrirTicket2 .contentAreaModal2 .checkIcon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #00A53C;
    }

    .modalAbrirTicket2 .contentAreaModal2 .checkIcon svg {
        height: 22px;
        fill: #fff;
    }

    .modalAbrirTicket2 .contentAreaModal2 .titleModal {
        font-size: 20px;
        line-height: 120%;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .modalAbrirTicket2 .contentAreaModal2 .descriptionModal {
        color: rgba(255, 255, 255, .7);
        font-size: 14px;
        margin-bottom: 10px;
    }

    .modalAbrirTicket2 .contentAreaModal2 .areaButtons {
        display: flex;
        width: 100%;
        gap: 10px;
        margin-top: 10px;
    }

    .modalAbrirTicket2 .contentAreaModal2 .areaButtons .principalButton {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: #01A2E8;
        height: 50px;
        color: #fff;
        border-radius: 10px;
        font-weight: 700;
    }

    .modalAbrirTicket2 .contentTicketRegistrado {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 60px;
        text-align: center;
        width: 100%;
        height: 100%;
    }

    .modalAbrirTicket2 .contentTicketRegistrado .checkIcon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #00A53C;
    }

    .modalAbrirTicket2 .contentTicketRegistrado .checkIcon svg {
        height: 22px;
        fill: #fff;
    }

    .modalAbrirTicket2 .contentTicketRegistrado .titleModal {
        font-size: 20px;
        line-height: 120%;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .modalAbrirTicket2 .contentTicketRegistrado .descriptionModal {
        color: rgba(255, 255, 255, .7);
        font-size: 14px;
        margin-bottom: 10px;
    }

    .modalAbrirTicket2 .contentTicketRegistrado .areaButtons {
        display: flex;
        width: 100%;
        gap: 10px;
        margin-top: 10px;
    }

    .modalAbrirTicket2 .contentTicketRegistrado .areaButtons .principalButton {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: #01A2E8;
        height: 50px;
        color: #fff;
        border-radius: 10px;
        font-weight: 700;
    }

      .modalAbrirTicket2 .contentTicketRegistrado .suportText {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        margin-top: 8px;
        margin-bottom: 20px;
    }

    .modalAbrirTicket2 .contentTicketRegistrado .suportText svg {
        height: 18px;
        fill: #fff;
    }


/* ================ */


    #modalDeposito .scrollbar-deposito {
        position: relative;
        max-height: 100px;
        margin-bottom: 20px;
        height: 70px;
        overflow: hidden;
        overflow-x: auto;
    }

    #modalDeposito #enviarBotao strong {
        font-size: 15px;
    }


/* ================ */


    /* public/css/modal_chave_pix_2.css (Adaptado) */
    #hand_click {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    #qrCodeDiv {
        display: none;
        margin-top: 15px;
    }

    #qrCodeDiv.visible {
        display: block;
    }

    .modal_chave_pix_2-content {
        background-color: #0c0d0e !important;
        border: 1px solid #0c0d0e !important;
        padding: 20px !important;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        border-radius: 10px !important;
    }

    .modal_chave_pix_2-header {
        margin-bottom: 20px;
    }

    .modal_chave_pix_2-back-btn {
        background-color:#3b3d44;
        border: none;
        border-radius: 8px;
        padding: 10px 15px;
        color: #ffffff;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        font-size: 12px;
    }

    .modal_chave_pix_2-back-btn img {
        width: 7px;
        height: 12px;
    }

    .modal_chave_pix_2-back-btn.voltarButtonBig {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-weight: 600;
    }

    .modal_chave_pix_2-main {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .modal_chave_pix_2-progress-bar {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 40px;
        height: 10px;
        width: 100%;
        overflow: hidden;
    }

    .modal_chave_pix_2-progress-fill {
        background-color: var(--default);
        height: 100%;
        border-radius: 40px;
    }

    .modal_chave_pix_2-instructions {
        color: #ffffff;
        font-size: 16px;
        line-height: 1.2;
        text-align: center;
        margin: 10px 0;
        max-width: 272px;
    }

    .modal_chave_pix_2-warning {
        background-color: #1A3557;
        border-radius: 10px;
        padding: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
        margin: 10px 0px 16px 0px;
    }

    .modal_chave_pix_2-warning img {
        width: 18px;
        height: 18px;
    }

    .modal_chave_pix_2-warning p {
        color: #f3eb1a;
        font-size: 13px;
        line-height: 1.2;
        margin: 0;
    }

    .modal_chave_pix_2-code-box {
        position: relative;
        background-color: #101111;
        border: 1px solid #1d1e20;
        border-radius: 10px;
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .modal_chave_pix_2-code-box .titleModal {
        font-size: 18px;
        font-weight: 700;
        line-height: 100%;
        margin-bottom: 4px;
    }

    .modal_chave_pix_2-code-amount {
        font-size: 14px;
        color: #d6d6d6;
        font-weight: 600;
        margin: 0;
    }

    .modal_chave_pix_2-code-box .labelInput{
        width: 100%;
        font-weight: 600;
    }

    .pix-qr-code-container {
        margin-top: 0px !important;
        margin-bottom: 10px !important;
    }

    .areaInputCopy {
        position: relative;
        display: flex;
        background-color: #1a1b1e;
        color: #fff;
        font-weight: 600;
        width: 100%;
        border-radius: 8px;
    }

    .modal_chave_pix_2-code-field {
        /* background-color: rgba(35, 195, 226, 0.15); */
        /* border: 1px solid #23C3E2; */
        border-radius: 10px;
        padding: 13px 15px;
        width: 100%;
        box-sizing: border-box;
        color: #ffffff;
        font-size: 14px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }



    .modal_chave_pix_2-copy-btn {
        position: absolute;
        right: 0px;
        top: 0px;
        background: #32a614;
        border-radius: 8px;
        padding: 14px 22px;
        width: fit-content;
        box-sizing: border-box;
        color: #fff;
        font-size: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.87rem;
    }

    .modal_chave_pix_2-copy-btn img {
        width: 14px;
        height: 16px;
    }

    .modal_chave_pix_2-timer {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
    }

    .modal_chave_pix_2-timer-label {
        color: #f6b51e;
        font-size: 13px;
        line-height: 1.2;
        margin: 0;
    }

    .modal_chave_pix_2-timer-countdown {
        color: #ffffff;
        font-size: 20px;
        line-height: 1.2;
        margin-top: 10px;
        margin-bottom: 8px;
    }

    .modal_chave_pix_2-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        margin-top: 10px;
        height: fit-content;
    }

    .modal_chave_pix_2-status-btn {
        background-color: #112b1e;
        border: none;
        border-radius: 8px;
        padding: 11px;
        width: 100%;
        box-sizing: border-box;
        color: #2ae795;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-bottom: -15px;
        /* Ajuste de espaço */
        cursor: default;
    }

    .modal_chave_pix_2-status-btn img {
        width: 16px;
        height: 16px;
    }

    .modal_chave_pix_2-qr-btn {
        background-color: transparent;
        border: 1px solid #7b7b7b;
        border-radius: 5px;
        padding: 6px 12px;
        color: #b1b1b1;
        font-size: 12px;
        cursor: pointer;
    }

    /* Garante que o fundo do modal overlay do bootstrap seja transparente */
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.8) !important;
    }

    /* Remove bordas e sombras padrão do Bootstrap */
    .modal.fade .modal-dialog {
        transform: translate(0, 0);
    }

    .modal-content {
        border: none !important;
        box-shadow: none !important;
    }

    /* Fontes */
    .font-gilroy-medium {
        font-family: 'Gilroy-Medium', 'Inter', sans-serif;
        font-weight: 500;
    }

    .font-gilroy-bold {
        font-family: 'Gilroy-Bold', 'Inter', sans-serif;
        font-weight: 700;
    }

    .status {
        margin-top: 10px;
    }

    .progress-bar {
        margin-top: 0px;
    }

    /* MEDIA QUERIES */
    /* 350 X 667 */
    @media screen and (max-width: 500px) and (max-height: 965px) {
        .modal_chave_pix_2-content {
            height: 100dvh;
            border-radius: 0px !important;
        }

        .modal-dialog {
            padding: 0px;
        }

        /* .modal-content {
            border-radius: 0px !important;
        } */
    }


/* ================ */


    @import '../../../../../variables.css';

    #naoLogadoModal .modal-dialog {
        justify-content: center;
    }

    #naoLogadoModal #CadastrarBtn {
        color: #fff;
        font-weight: 700;
        background-color: var(--primary-color);
    }

    #naoLogadoModal #EntrarBtn{
        color: #fff;
        font-weight: 700;
    }


/* ================ */


    #modalCarregamento .loading-card {
        box-sizing: border-box;
        max-width: 350px;
        width: 100%;
        background-color: #0c0d0e;
        border: 1px solid #0c0d0e;
        border-radius: 20px;
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        margin: 0 auto;
    }
    #modal-content-container{
        background: transparent !important;
    }

    #modalCarregamento .loading-title {
        color: #ffffff;
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        text-align: center;
        margin: 0 0 4px 0;
    }

    #modalCarregamento .loading-subtitle {
        color: rgba(255, 255, 255, 0.7);
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.2;
        text-align: center;
        margin: 0 0 50px 0;
    }

    #modalCarregamento .progress-container {
        position: relative;
        width: 100%;
        max-width: 310px;
        height: 13px;
    }

    #modalCarregamento .progress-tooltip {
        position: absolute;
        width: 40px;
        height: 22px;
        background-color: #ffffff;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        top: -36px;
        transform: translateX(-50%);
        transition: left 0.5s ease-in-out;
    }

    #modalCarregamento .progress-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 8px solid #ffffff;
    }

    #modalCarregamento .tooltip-text {
        color: #000000;
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 13px;
        line-height: 1.2;
        text-align: center;
    }

    #modalCarregamento .progress-bar-background {
        width: 100%;
        height: 100%;
        background-color: rgba(28, 74, 28, 0.5);
        border-radius: 40px;
        overflow: hidden;
    }

    #modalCarregamento .progress-bar-fill {
        height: 100%;
        background-color: #2aeb04;
        border-radius: 40px;
        transition: width 0.5s ease-in-out;
    }
    @keyframes spin-with-pause {
        0% {
            transform: rotate(0deg);
        }
        66.6% {
            transform: rotate(360deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    #modalCarregamento .loading-icon {
        width: 20px;
        margin-bottom: 16px;
        animation: spin-with-pause 1.5s linear infinite;
        filter: drop-shadow(0 0 5px #2aeb04);
    }


/* ================ */


    #modalSemSaldo .modal-content{
        min-width: 350px;
        max-width: 500px;
    }

    .modal-sem-saldo .img-fluid{
        max-width: 150px;
        margin-bottom: 15px;
    }

    .modal-sem-saldo .modal-header-custom{
        background: #303030ff;
        height: 5em;
        border-radius: 5px;
    }

    .modal-sem-saldo .btn-cadastrar{
        color: #ffffff;
    }

    .modal-sem-saldo .modal-header-custom h1{
        font-size: 0.9rem;
        color: #c30b0b;
    }

    .modal-sem-saldo .btn-cadastrar:nth-child(1){
        background: #303030ff;
    }

    .modal-sem-saldo .btn-cadastrar:nth-child(2){
        background: #1c7c1cff;
    }
    
    .modal-sem-saldo p{
        color: #ffffff;
        font-size: 0.7rem;
    }

    .modal-sem-saldo p:nth-child(2){
        color: #b2b2b2ff;
    }


/* ================ */


   #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      /* Cor de fundo preto */
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
   }

   #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      /* Cor de fundo preto */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      opacity: 1;
      /* Inicialmente opaco */
      transition: opacity 1s;
      /* Adiciona uma transição suave */
   }

   #preloader .nameCarregando {
      color: #fff;
      margin-bottom: 4px;
      margin-top: 10px;
      font-size: 14px;
   }

   #preloader .spinImage {
      width: 60px;
   }

   #loader {
      border: 8px solid #f3f3f3;
      border-top: 8px solid #3498db;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 2s linear infinite;
   }

   #logo {
      max-width: 350px;
      /* Defina o tamanho da sua logo */
   }

   .search-results .main_slots-wrapper {
      padding: 20px;
   }

   .search-results {
      position: absolute;
      width: 100%;
      background: #131521;
      margin-top: 1rem;
      border-radius: .25rem;
      z-index: 999;
   }

   .sys-input {
      margin-top: 20px;
      border-radius: 8px !important;
      overflow: hidden;
      position: relative;
   }

   .sys-input svg {
      position: absolute;
      opacity: 0.4;
      top: 14px;
      left: 10px;
   }

   .input-search {
      border: 1px solid #0b0b09;
      background: #0b0b09;
      border-radius: 3px;
      padding: 10px;
      color: white;
      width: 100%;
      cursor: text;
      transition: background 0.3s ease;
      background: #0b0b09 !important;
      padding-left: 35px !important;
      height: 45px;
      font-weight: 600;
   }

   .main_banner-wrapper {
      position: relative;
      display: contents;
   }

   .banner-overlay {
      position: relative;
   }

   .banner-number {
      position: absolute;
      top: 62%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 4.3vw;
      color: #fef136;
      letter-spacing: .05em;
      max-width: 100%;
      text-align: center;
      font-family: Abril Fatface, serif;
      font-weight: 600;
      font-style: normal;
   }

   .trophy-image {
      width: 50px;
      height: auto;
      /* border: 2px solid #000; */
      /* Define uma borda preta de 2 pixels */
      border-radius: 5px;
      /* Adiciona cantos arredondados à borda */
   }

   .carousel-inner img {
      border-radius: 3%;
      object-fit: cover;
   }

   .listitem-populares {
      flex: 0 0 calc(50% - 7.5px);
      max-width: 50%;
   }

   .listitem-populares:not(:first-child) {
      margin-left: 10px;
   }

   .rounded-image {
      border-radius: 5%;
   }

   .bannerPragmatic {
      display: block;
   }

   .bannerPragmatic img {
      margin-bottom: 10px;
      width: 100%;
   }

   /* Carrosel Banner */
   .banner-carousel {
      height: 300px;
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
   }

   .banner-carousel .sliderImage img {
      height: 300px;
      width: 100%;
      object-fit: cover;
   }

   .slick-prev,
   .slick-next {
      display: none !important;
   }

   /* Posição dos dots - centralizados e em cima do banner */
   .slick-dots {
      position: absolute;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      display: flex !important;
      justify-content: center;
      gap: 6px;
      padding: 0;
      margin: 0;
      list-style: none;
      z-index: 10;
   }

   /* Reset do li */
   .slick-dots li {
      font-size: 0px;
      width: auto; /* deixa automático */
      margin: 0;
      padding: 0;
   }

   /* Reset completo do botão */
   .slick-dots li button {
      all: unset; /* reseta TUDO do Slick */
      display: block;
      width: 6px !important;
      height: 6px !important;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.4);
      cursor: pointer;
      transition: background-color 0.3s ease;
   }

   /* Ativo */
   .slick-dots li.slick-active button {
      background-color: #fff;
   }

   /* Container Content */
   .containerContent {
      padding: 0 4px;
   }

   /* Container Jogos */
   .containerJogos {
      margin-top: 40px;
      padding: 0 12px;
   }

   .containerJogos .titleSection{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
   }

   .containerJogos .titleSection h2{
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 600;
      color: #fff;
   }

   .containerJogos .titleSection svg {
      height: 20px;
   }

   .containerJogos .titleSection a{
      display: flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      font-size: 14px;
   }

   .containerJogos .titleSection a svg {
      height: 14px;
      fill: #fff;
   }

   @media (max-width: 1320px) {
      .containerContent{
         padding: 0 4px;
      }
   }
   @media (max-width: 800px) {
      .banner-carousel {
         height: auto;
      }

      .banner-carousel .sliderImage img {
         height: auto;
      }
   }

   /* Estilo para dispositivos móveis */
   @media screen and (max-width: 768px) {
      .banner-number {
         font-size: 1.28rem;
         /* Tamanho da fonte para dispositivos móveis */
      }

   }

   /* Estilo para desktops */
   @media screen and (min-width: 769px) {
      .banner-number {
         font-size: 3.4vw;
         /* Tamanho da fonte para desktops */
      }

      .listitem-populares {
         flex: 0 0 calc(50% - 7.5px);
         max-width: 10%;
         margin-left: 10px;
      }
   }

   /* Banners tela PC e tela Mobile */
   @media (min-width: 577px) {
      .desktop-images {
         display: flex;
      }

      .mobile-images {
         display: none;
      }

      .bannerPragmatic {
         display: none;
      }
   }

   @media (max-width: 576px) {
      .desktop-images {
         display: none;
      }

      .mobile-images {
         display: flex;
         width: 100%;
         /* ou block */
      }

      .mobile-images a {
         width: 50% !important;
      }

      .mobile-images a img {
         width: 100% !important;
      }
   }


   .aviso {
      color: #333;
      padding: 10px;
      text-align: center;
      font-weight: bold;
      justify-content: center;
   }

   #whatsapp-support {
      position: fixed;
      bottom: 80px;
      /* Ajuste a margem inferior conforme necessário */
      right: 20px;
      /* Ajuste a margem direita conforme necessário */
      z-index: 1000;
      /* Certifique-se de que o ícone esteja acima de outros elementos */
   }

   #whatsapp-support img {
      width: 60px;
      /* Ajuste o tamanho da imagem conforme necessário */
      cursor: pointer;
   }


/* ================ */


    @import "https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap";

    .topwin-centralizada {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .topwin-gains-slider-container {
        width: 100%;
        max-width: 1200px;
        height: auto;
        display: flex;
        justify-content: space-between;
    }

    .topwin-gains-section {
        width: 300px;
        height: 100px;
        background: linear-gradient(90deg,
                rgba(255, 172, 75, 0.25) 0%,
                rgba(255, 172, 75, 0) 100%);
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 15px;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }

    .topwin-icon-trofeu img {
        width: 90px;
    }

    .topwin-title-gains h1 {
        color: #fff;
        font-weight: 800;
        font-size: 25px;
    }

    .topwin-gains-con {
        width: calc(100% - 300px);
        overflow: hidden;
    }

    .topwin-gains-slider {
        overflow: hidden;
        padding-left: 300px;
        white-space: nowrap;
        position: relative;
        display: flex;
    }

    .topwin-gains-slider:before,
    .topwin-gains-slider:after {
        position: absolute;
        top: 0;
        width: 250px;
        height: 100%;
        content: "";
        z-index: 2;
    }

    .topwin-gains-slider:before {
        left: 0;
    }

    .topwin-gains-slider:after {
        right: 0;
    }

    .topwin-gains-slider:hover .topwin-logos-slide {
        animation-play-state: paused;
    }

    .topwin-logos-slide {
        display: flex;
        animation: topwin-slide 15s infinite linear;
    }

    .topwin-slide-gains {
        background-color: #1e2024;
        margin-right: 15px;
        width: 200px;
        overflow: hidden;
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 100%;
    }

    .topwin-slide-gains .topwin-player {
        font-family: Arial, sans-serif;
        color: #fff;
        font-weight: 500;
        font-size: 12px;
    }

    .topwin-slide-gains .topwin-game {
        font-family: Arial, sans-serif;
        color: #fff;
        font-size: 10px;
        margin: 0;
    }

    .topwin-slide-gains img {
        height: 100%;
        border-radius: 6px;
    }

    .topwin-slide-gains .topwin-valor {
        font-size: 15px;
        color: #ff0;
    }

    .topwin-logos-slide img {
        height: 100px;
    }

    @keyframes topwin-slide {
        0% {
            transform: translate(0);
        }

        to {
            transform: translate(-100%);
        }
    }

    @media only screen and (max-width: 600px) {
        .topwin-gains-section {
            width: 170px;
            height: 85px;
        }

        .topwin-icon-trofeu img {
            width: 60px;
        }

        .topwin-title-gains h1 {
            font-size: 14px;
            line-height: 1.2;
        }

        .topwin-gains-slider {
            padding-left: 170px;
        }

        .topwin-slide-gains {
            height: 85px;
        }

        .topwin-gains-con {
            width: calc(100% - 170px);
            overflow: hidden;
        }

        .topwin-centralizada {
            display: block;
            justify-content: initial;
            align-items: initial;
        }
    }


/* ================ */


    /* Carrosel Infinito */
    .carrosselInfinitoContiner {
        display: grid;
        grid-template-columns: 0.1fr 1fr;
        margin-top: 40px;
    }

    .carroselInfinitoArea {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .carroselInfinitoArea .marquee-track {
        display: flex;
        gap: 6px;
        flex-wrap: nowrap;
        width: max-content;
        animation: marqueeScroll 270s linear infinite;
    }
    .carroselInfinitoArea .item .card {
        border: 1px solid rgba(218, 209, 177, .05) !important;
    }
    @keyframes marqueeScroll {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    .carrosselInfinitoContiner .areaAoVivo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 100%;
        background-color: var(--bg-color);
        position: relative;
        z-index: 2;
    }

    .carrosselInfinitoContiner .areaAoVivo svg {
        height: 70px;
    }

    .carroselInfinitoArea .item {
        padding: 0 6px;
        width: 220px;
    }
    .carroselInfinitoArea .item .card {
        display: flex; 
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 0px; 
        width: 100%;
        height: 66px;
        background: transparent;
        color: #fff;
        border-radius: 12px;
        font-weight: 700;
        padding: 4px 14px !important;
        border-radius: 10px !important;
    }
    .carroselInfinitoArea .item .card .imageArea{
        width: 32px;
    }

    .carroselInfinitoArea .item .card .textArea h1{
        font-size: 12px;
        font-weight: 600;
        color: #fbbf24f2;
        line-height: 100%;
    }
    .carroselInfinitoArea .item .card .textArea span {
        color: #98a7b5;
        font-size: 12px;
        font-weight: 500;
    }
    .carroselInfinitoArea .item .card .textArea p {
        font-size: 12px;
    }
    .carroselInfinitoArea .item .card .textArea p b {
        color: #62cda3;
    }
    .carroselInfinitoArea .slick-slide {
        box-sizing: border-box; 
        outline: none; 
        padding: 0 8px; 
    }

    @media (max-width: 800px) {
      .carrosselInfinitoContiner .areaAoVivo {
         width: 50px;
      }
   }


/* ================ */


    .containerJogos .gridJogos{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
    }

    .containerJogos .gridJogos .gameArea{
        padding: 14px 10px 16px;
        border-radius: 16px;
        border: 1px solid #3b3d4480;
        cursor: pointer;
        background: linear-gradient(
            to top,
            #29e5041f 0%,
            transparent 35%
        );
        box-shadow: 0 2px 0 0 transparent;
        transition: box-shadow 0.3s;
    }

    .containerJogos .gridJogos .gameArea:hover {
        box-shadow: 0 3px 0 0 #29e504; 
    }

    .containerJogos .gridJogos .gameArea .imageArea{
        border-radius: 8px;
        overflow: hidden;
    }

    .containerJogos .gridJogos .gameArea .imageArea img{
        width: 100%;
    }

    .containerJogos .gridJogos .gameArea .superiorArea {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 14px;
    }

    .containerJogos .gridJogos .gameArea .superiorArea h1{
        font-size: 16px !important;
        line-height: 120%;
        color: #fff;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 55%;
        margin: 0;
    }

    .containerJogos .gridJogos .gameArea .superiorArea h2 {
        font-size: 10px !important;
        color: #e3a008;
        font-weight: 600;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .containerJogos .gridJogos .gameArea .inferiorArea {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 14px;
    }

    .containerJogos .gridJogos .gameArea .inferiorArea .playButton{
        display: flex;
        align-items: center;
        font-weight: 600 !important;
        font-size: 13.2px !important;
        gap: 4px;
        background-color: var( --primary-color);
        padding: 4px 4px 4px 10px;
        border-radius: 8px;
        color: #000;
        white-space: nowrap;
    }

    .containerJogos .gridJogos .gameArea .inferiorArea .playButton p{
        color: #fff;
        background-color: #1f2125;
        padding: 3px 5px;
        border-radius: 4px;
        font-size: 11px !important;
        margin: 0;
        line-height: 1;
    }

    .containerJogos .gridJogos .gameArea .inferiorArea .playButton p b {
        color: #03d292;
    }

    .containerJogos .gridJogos .gameArea .inferiorArea .viewPremiosButton{
        display: flex;
        align-items: center;
        gap: 4px;
        color: #fff;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        transition: color 0.3s;
    }

    .containerJogos .gridJogos .gameArea .inferiorArea .viewPremiosButton svg {
        height: 18px;
        fill: #fff;
        transition: fill 0.3s;
    }

    .containerJogos .gridJogos .gameArea .inferiorArea .viewPremiosButton svg.arrowSvg {
        height: 14px;
    }

    @keyframes shake {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(10deg); }
        75% { transform: rotate(-10deg); }
    }

    .containerJogos .gridJogos .gameArea .inferiorArea .viewPremiosButton:hover {
        color: #2cfc04;
    }

    .containerJogos .gridJogos .gameArea .inferiorArea .viewPremiosButton:hover svg {
        fill: #2cfc04;
    }

    .containerJogos .gridJogos .gameArea .inferiorArea .viewPremiosButton:hover svg:first-of-type {
        animation: shake 0.4s ease-in-out infinite;
    }

    @media (max-width: 1024px) {
        .containerJogos .gridJogos{
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 800px) {
        .containerJogos .gridJogos{
            grid-template-columns: 1fr;
        }
    }


/* ================ */


   @import '../../../variables.css';

   /* Container Modal */
   .containerModalEntrar {
      position: fixed;
      display: flex;
      justify-content: center;
      align-items: center;
      left: 0px;
      top: 0px;
      background-color: rgba(0, 0, 0, .4);
      color: #fff;
      width: 100%;
      height: 100dvh;
      opacity: 1;
      pointer-events: auto;
      transition: var(--transition-normal);
      z-index: 1000 !important;
      font-weight: 500;
   }

   .containerModalEntrar.open {
      opacity: 1;
      pointer-events: all;
   }

   /* Modal Idioma */
   .modalEntrar {
      position: relative;
      display: flex;
      flex-direction: column;
      max-width: 512px;
      width: 90%;
      background-color: var(--bg-color1);
      border: 1px solid var(--stroke-1);
      border-radius: 16px;
      padding: 20px;
   }

   .modalEntrar .areaButtonClose {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      margin: 8px 0px 0px 0px;
   }

   .modalEntrar .buttonClose {
      right: 20px;
      top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: none;
      z-index: 9;
      cursor: pointer;
      color: var(--primary-color);
      background-color: rgba(255, 255, 255, .05);
      width: 34px;
      height: 34px;
      min-width: 34px;
      min-height: 34px;
      border-radius: 8px;
      transition: var(--transition-normal);
   }

   .modalEntrar .buttonClose:hover {
      background-color: var(--primary-color);
      color: var(--bg-color1);
   }

   .modalEntrar .wrapperModal {
      width: 100%;
      max-width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
   }

   .modalEntrar .areaModal {
      display: flex;
      flex-direction: column;
      gap: 22px;
   }

   .modalEntrar .iconEntrar {
      width: 100%;
      height: 100%;
   }

   .modalEntrar .iconEntrar img {
      object-fit: cover;
      border-radius: 20px;
   }

   .modalEntrar .areaContent {
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: flex-start;
      width: 100%;
   }

   .modalEntrar .buttonsArea {
      display: flex;
      gap: 10px;
      width: 100%;
   }

   .modalEntrar .buttonsArea .buttonModal{
      background-color: #151718;
      border-radius: 8px;
      height: 36px;
      font-weight: 600;
      width: 100%;
   }

   .modalEntrar .buttonsArea .buttonModal.onThis {
      background-color: #32a614;
   }

   .modalEntrar .logoentrar {
      width: 100%;
      display: flex;
      justify-content: center;
   }

   .modalEntrar .logoentrar img {
      margin-top: 10px;
      max-width: 140px;
      height: auto;
   }

   .modalEntrar .areaTitle {
      margin-top: 2px;
      font-weight: 600;
      font-size: 20px;
      line-height: 120%;
      text-align: center;
      width: 100%;
      color: var(--text-color-1);
   }

   .modalEntrar .areaSubtitle {
      margin-top: 4px;
      font-weight: 400;
      font-size: 14px;
      line-height: 120%;
      text-align: center;
      width: 100%;
      color: #fff6;
   }

   .modalEntrar form {
      width: 100%;
   }

   .modalEntrar .labelInput {
      font-size: 14px;
      font-weight: 600;
      color: #c0cad5;
      margin-top: 14px;
   }

   .modalEntrar .inputGroup {
      margin-top: 10px;
      margin-right: 40px;
      position: relative;
      width: 100%;
      height: 44px;
      background-color: #121312;
      border-radius: 6px;
      border: 1px solid #1c1c1c;
      display: flex;
      align-items: center;
      padding-left: 44px;
      transition: 0.3s;
   }

   .modalEntrar .inputGroup .iconWrapper {
      position: absolute;
      left: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
   }

   .modalEntrar .inputGroup .iconWrapper {
      color: #636463;
   }

   .modalEntrar .inputGroup .iconWrapper svg {
      fill: #636463;
      height: 15px;
   }

   .modalEntrar .inputGroup .iconWrapper.senhaIcon {
      color: #636463;
      font-size: 15px;
   }

   .modalEntrar .inputGroup input {
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      outline: none;
      color: var(--text-color-3);
      font-size: 14px;
      line-height: 120%;
      font-weight: 400;
      padding-right: 44px;
   }

   .modalEntrar .inputGroup input::placeholder {
      color: #5d656e;
      font-weight: 600;
   }

   .modalEntrar .inputGroup:focus-within {
      border-color: var(--primary-color);
   }

   .modalEntrar input:-webkit-autofill {
      -webkit-box-shadow: rgba(255, 255, 255, 0.1) inset !important;
      -webkit-text-fill-color: var(--text-color-3) !important;
      transition: background-color 5000s ease-in-out 0s;
      border-radius: 10px;
   }

   .modalEntrar .toggle-password {
      position: absolute;
      right: 14px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
   }

   .modalEntrar .toggle-password:hover {
      opacity: 0.8;
   }

   .modalEntrar {
      text-align: left;
   }

   .modalEntrar .areaEsqueciSenha {
      font-weight: 400;
      font-size: 12px;
      line-height: 120%;
      margin-top: 10px;
      color: rgba(255, 255, 255, 0.7);
      display: inline-block;
      cursor: pointer;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      padding-bottom: 2px;
      width: auto;
      align-self: flex-start;
   }


   .modalEntrar .buttonLogin {
      margin-top: 20px;
      margin-right: 40px;
      position: relative;
      width: 100%;
      height: 44px;
      border-radius: 10px;
      opacity: 1;
      background: var(--primary-color);
   }

   .modalEntrar .buttonLogin p {
      font-weight: 700;
      font-size: 14px;
      line-height: 120%;
      color: var(--color-text-primary-button);
      text-transform: uppercase;
   }

   .modalEntrar .separator-ou {
      margin-top: 10px;
      margin-right: 40px;
      max-width: 334px;
      height: 46px;
      display: flex;
      align-items: center;
      text-align: center;
      width: 100%;
      color: var(--text-color-4);
      font-weight: 600;
      font-size: 16px;
   }

   .modalEntrar .separator-ou::before,
   .modalEntrar .separator-ou::after {
      content: "";
      flex: 1;
      border-top: 1px solid rgba(255, 255, 255, 0.3);
   }

   .modalEntrar .separator-ou::before {
      margin-right: 12px;
   }

   .modalEntrar .separator-ou::after {
      margin-left: 12px;
   }

   .modalEntrar .areaCadastrese {
      margin-top: 20px;
      margin-right: 40px;
      max-width: 334px;
      display: flex;
      justify-content: center;
      gap: 5px;
      text-align: center;
      width: 100%;
   }

   .modalEntrar .areaCadastrese span {
      color: var(--text-color-3);
      font-weight: 400;
      font-size: 12px;
      line-height: 120%;
   }

   .modalEntrar .areaCadastrese div {
      color: var(--text-color-3);
      font-weight: 600;
      font-size: 12px;
      line-height: 120%;
      cursor: pointer;
   }

   @media (min-width: 769px) {
      .modalEntrar .buttonClose {
         display: flex;
      }
   }

   @media (max-width: 768px) {

      .modalEntrar .no-scroll {
         overflow: hidden !important;
         position: fixed !important;
         width: 100% !important;
      }


      .modalEntrar {
         max-width: 100%;
         width: 100%;
         max-height: 100%;
         height: 100dvh;
         border-radius: 0;
         border: none;
         padding: 8px;
      }

      .containerModalEntrar {
         align-items: flex-start;
         padding-top: 0;
      }

      .modalEntrar .areaModal {
         display: flex;
         flex-direction: column;
         gap: 10px;
      }

      .modalEntrar .iconEntrar,
      .modalEntrar .iconEntrar img {
         width: 100% !important;
         height: auto !important;
         max-width: 100% !important;
         border-radius: 6px;
         object-fit: cover;
         /* margin-top: 22px; */
      }

      .modalEntrar .areaTitle {
         font-size: 22px;
         text-align: center;
         margin-top: 4px;
      }

      .modalEntrar .wrapperModal {
         width: 100%;
         max-width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
      }

      .modalEntrar .areaContent {
         width: 100%;
      }

      .modalEntrar .areaContent {
         padding: 0 10px;
         align-items: center;
      }

      .modalEntrar .areaTitle {
         /* display: none; */
      }

      .modalEntrar .inputGroup {
         max-width: 100%;
         margin-right: 0;
         padding-left: 44px;
      }

      .modalEntrar .buttonLogin {
         max-width: 100%;
         margin-right: 0;
      }

      .modalEntrar .areaCadastrese {
         justify-content: center;
         margin-right: 0;
         max-width: 100%;
         gap: 8px;
      }

      .modalEntrar .separator-ou {
         margin-right: 0;
         max-width: 100%;
         font-size: 14px;
         height: 40px;
         justify-content: center;
      }

      .modalEntrar .separator-ou::before {
         margin-right: 8px;
      }

      .modalEntrar .separator-ou::after {
         margin-left: 8px;
      }

      .modalEntrar .areaEsqueciSenha {
         font-weight: 400;
         font-size: 12px;
         line-height: 120%;

         margin-top: 10px;
         color: var(--text-color-3);
         display: inline-block;
         cursor: pointer;
         border-bottom: 1px solid rgba(255, 255, 255, 0.3);
         padding-bottom: 3px;
         text-align: left;
         align-self: flex-start;
         width: auto;
      }

      /* .modalEntrar .buttonClose {
        display: none;
    } */


      .modalEntrar .buttonCloseMobile {
         display: flex;
         margin-top: 40px;
         justify-content: center;
         align-items: center;
         width: 47px;
         height: 47px;
         border-radius: 40px;
         background-color: rgba(255, 255, 255, 1);
         color: rgba(14, 36, 63, 1);
         cursor: pointer;
         align-self: center;
      }

   }

   @media (max-height: 670px) {

      .modalEntrar .logoentrar img {
         margin-top: 0px;
      }

      .modalEntrar .areaTitle {
         margin-top: 4px;
      }

      .modalEntrar .areaSubtitle {
         margin-top: 5px;
         margin-bottom: 0px;
      }

      .modalEntrar .areaCadastrese {
         margin-top: 10px;
         gap: 5px;
      }

      .modalEntrar .separator-ou {
         margin-right: 0;
         max-width: 100%;
         font-size: 14px;
         height: 20px;
         justify-content: center;
      }

      .modalEntrar .areaEsqueciSenha {
         margin-top: 10px;
         padding-bottom: 3px;
      }

      .modalEntrar .buttonCloseMobile {
         margin-top: 40px;
      }

      .modalEntrar .buttonLogin {
         margin-top: 10px;
      }
   }

   #entrarModal .modal-dialog {
      max-width: 100% !important;
      margin: 0 !important;
   }

   .modalEntrar .buttonLogin,
   .modalEntrar .buttonsArea .buttonModal {
      transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
   }

   .modalEntrar .buttonLogin:hover,
   .modalEntrar .buttonsArea .buttonModal:not(.onThis):hover {
      background-color: #29e504 !important;
      color: #000 !important;
      transform: scale(1.03);
   }
   
   .modalEntrar .buttonLogin:active,
   .modalEntrar .buttonsArea .buttonModal:not(.onThis):active {
      transform: scale(0.99);
   }

   .modalEntrar .buttonLogin:hover p {
      color: #000 !important;
   }


/* ================ */


   @import '../../../variables.css';

   /* Container Modal */
   .containerModalCadastrar {
      position: fixed;
      display: flex;
      justify-content: center;
      align-items: center;
      left: 0px;
      top: 0px;
      background-color: rgba(0, 0, 0, .4);
      color: #fff;
      width: 100%;
      height: 100dvh;
      opacity: 1;
      pointer-events: auto;
      transition: var(--transition-normal);
      z-index: 10000;
      font-weight: 500;
   }

   .containerModalCadastrar.open {
      opacity: 1;
      pointer-events: all;
   }

   /* Modal Idioma */
   .modalCadastrar {
      position: relative;
      display: flex;
      flex-direction: column;
      max-width: 512px;
      width: 90%;
      background-color: var(--bg-color1);
      border: 1px solid var(--stroke-1);
      border-radius: 16px;
      padding: 20px;
   }

   .modalCadastrar .areaButtonClose {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      margin: 8px 0px 0px 0px;
   }

   .modalCadastrar .buttonClose {
      /* position: absolute; */
      right: 20px;
      top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: none;
      z-index: 9;
      cursor: pointer;
      color: var(--primary-color);
      background-color: var(--stroke-structure-2);
      width: 34px;
      height: 34px;
      min-width: 34px;
      min-height: 34px;
      border-radius: 8px;
      transition: var(--transition-normal);
   }

   .modalCadastrar .buttonClose:hover {
      background-color: var(--primary-color);
      color: var(--bg-color1);
   }

   .modalCadastrar .wrapperModal {
      width: 100%;
      max-width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
   }

   .modalCadastrar .areaModal {
      display: flex;
      /* grid-template-columns: auto 1fr; */
      flex-direction: column;
      gap: 22px;
   }

   /* Ícone desktop visível por padrão */
   .modalCadastrar .iconEntrar .desktopIcon {
      display: block;
      border-radius: 20px;
   }

   .modalCadastrar .iconEntrar {
      width: 100%;
      height: 100%;
   }

   .modalCadastrar .iconEntrar img {
      object-fit: cover;
      border-radius: 20px;
   }

   .modalCadastrar .areaContent {
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: flex-start;
      width: 100%;
   }

   .modalCadastrar .buttonsArea {
      display: flex;
      gap: 10px;
      width: 100%;
   }

   .modalCadastrar .buttonsArea .buttonModal{
      background-color: #151718;
      border-radius: 8px;
      height: 36px;
      font-weight: 600;
      width: 100%;
   }

   .modalCadastrar .buttonsArea .buttonModal.onThis {
      background-color: #32a614;
   }

   .modalCadastrar .areaTitle {
      margin-top: 2px;
      font-weight: 600;
      font-size: 20px;
      line-height: 120%;
      text-align: center;
      width: 100%;
      color: var(--text-color-1);
   }

   .modalCadastrar .areaSubtitle {
      margin-top: 4px;
      font-weight: 400;
      font-size: 14px;
      line-height: 120%;
      text-align: center;
      width: 100%;
      color: #fff6;
   }

   .modalCadastrar form {
      width: 100%;
   }

   .modalCadastrar .labelInput {
      font-size: 14px;
      font-weight: 600;
      color: #c0cad5;
      margin-top: 14px;
   }

   .modalCadastrar .inputGroup {
      margin-top: 10px;
      margin-right: 40px;
      position: relative;
      width: 100%;
      height: 44px;
      background-color: #121312;
      border-radius: 6px;
      border: 1px solid #1c1c1c;
      display: flex;
      align-items: center;
      padding-left: 44px;
      transition: 0.3s;
   }

   .modalCadastrar .inputGroup .iconWrapper {
      position: absolute;
      left: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
   }

   .modalCadastrar .iconWrapper {
      color: #636463;
   }

   .modalCadastrar .iconWrapper.whatsIcon {
      color: #636463;
      font-size: 18px;
   }

   .modalCadastrar .iconWrapper.senhaIcon {
      color: #636463;
      font-size: 15px;
   }

   .modalCadastrar .inputGroup input {
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      outline: none;
      color: var(--text-color-3);
      font-size: 13px;
      line-height: 120%;
      font-weight: 400;
      padding-right: 44px;
   }

   .modalCadastrar .inputGroup input::placeholder {
      color: #5d656e;
      font-weight: 600;
   }

   .modalCadastrar .inputGroup:focus-within {
      border-color: var(--primary-color);
   }

   .modalCadastrar input:-webkit-autofill {
      -webkit-box-shadow: rgba(255, 255, 255, 0.1) inset !important;
      -webkit-text-fill-color: var(--text-color-3) !important;
      transition: background-color 5000s ease-in-out 0s;
      border-radius: 10px;
   }

   .modalCadastrar .toggle-password {
      position: absolute;
      right: 14px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
   }

   .modalCadastrar .toggle-password:hover {
      opacity: 0.8;
   }

   .modalCadastrar {
      text-align: left;
   }

   .modalCadastrar .areaCheck {
      display: flex;
      justify-items: start;
      gap: 10px;
      margin-top: 10px;
   }

   .modalCadastrar .areaCheck p {
      font-weight: 400;
      font-size: 13px;
      line-height: 100%;
      color: var(--text-color-3);
   }

   .modalCadastrar .areaCheck span {
      font-weight: 600;
      font-size: 12px;
      line-height: 100%;
      color: var(--primary-color);
   }

   .modalCadastrar .checkbox {
      width: 20px;
      height: 20px;
      min-height: 20px;
      min-width: 20px;
      border-radius: 5px;
      opacity: 1;
      background-color: var(--primary-color);
      display: flex;
      justify-content: center;
      align-items: center;
   }

   .modalCadastrar .buttonCadastro {
      margin-top: 20px;
      margin-right: 40px;
      position: relative;
      width: 100%;
      height: 44px;
      border-radius: 10px;
      opacity: 1;
      background: var(--primary-color);
   }

   .modalCadastrar .buttonCadastro p {
      font-weight: 700;
      font-size: 14px;
      line-height: 120%;
      color: var(--color-text-primary-button);
      text-transform: uppercase;
   }

   .modalCadastrar .separator-ou {
      margin-top: 10px;
      max-width: 334px;
      display: flex;
      align-items: center;
      text-align: center;
      width: 100%;
      color: var(--text-color-4);
      font-weight: 600;
      font-size: 16px;
   }

   .modalCadastrar .separator-ou::before,
   .modalCadastrar .separator-ou::after {
      content: "";
      flex: 1;
      border-top: 1px solid rgba(255, 255, 255, 0.3);
   }

   .modalCadastrar .separator-ou::before {
      margin-right: 12px;
   }

   .modalCadastrar .separator-ou::after {
      margin-left: 12px;
   }

   .modalCadastrar .areaEntrar {
      margin-top: -5px;
      max-width: 334px;
      display: flex;
      justify-content: center;
      gap: 5px;
      text-align: center;
      width: 100%;
      margin-top: 20px;
   }

   .modalCadastrar .areaEntrar span {
      color: var(--text-color-3);
      font-weight: 400;
      font-size: 12px;
      line-height: 120%;
   }

   .modalCadastrar .areaEntrar div {
      color: var(--text-color-1);
      font-weight: 600;
      font-size: 12px;
      line-height: 120%;
      cursor: pointer;
   }

   .modalCadastrar .buttonCloseMobile {
      display: none;
   }

   @media (min-width: 769px) {
      .modalCadastrar .buttonClose {
         display: flex;
      }
   }

   @media (max-width: 768px) {
      body.no-scroll {
         overflow: hidden !important;
         position: fixed !important;
         width: 100% !important;
         height: 100% !important;
      }

      .modalCadastrar .logoentrar img {
         margin-top: 10px;
      }

      .modalCadastrar {
         max-width: 100%;
         width: 100%;
         max-height: 100%;
         height: 100dvh;
         border-radius: 0;
         border: none;
         padding: 8px;
      }

      .containerModalCadastrar {
         align-items: flex-start;
         padding-top: 0;
      }

      .modalCadastrar .areaModal {
         display: flex;
         flex-direction: column;
         gap: 10px;
      }

      .modalCadastrar .iconEntrar,
      .modalCadastrar .iconEntrar img {
         width: 100% !important;
         height: auto !important;
         max-width: 100% !important;
         border-radius: 6px;
         object-fit: cover;
      }

      .modalCadastrar .wrapperModal {
         width: 100%;
         max-width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
      }

      .modalCadastrar .areaContent {
         width: 100%;
      }

      .modalCadastrar .areaContent {
         padding: 0 10px;
         align-items: center;
      }

      .modalCadastrar .areaTitle {
         font-size: 22px;
         text-align: center;
         margin-top: 4px;
      }

      .modalCadastrar .inputGroup {
         max-width: 100%;
         margin-right: 0;
         padding-left: 44px;
      }

      .modalCadastrar .areaCheck {
         display: flex;
         justify-items: start;
         gap: 10px;
         margin-top: 10px;
      }

      .modalCadastrar .buttonCadastro {
         max-width: 100%;
         margin-right: 0;
      }

      .modalCadastrar .areaEntrar {
         justify-content: center;
         margin-right: 0;
         max-width: 100%;
         gap: 8px;
      }

      .modalCadastrar .separator-ou {
         margin-top: 20px;
         max-width: 100%;
         font-size: 14px;
         /* height: 40px; */
         justify-content: center;
      }

      .modalCadastrar .separator-ou::before {
         margin-right: 8px;
      }

      .modalCadastrar .separator-ou::after {
         margin-left: 8px;
      }

      .modalCadastrar .buttonCloseMobile {
         display: flex;
         justify-content: center;
         align-items: center;
         width: 47px;
         height: 47px;
         border-radius: 40px;
         background-color: rgba(255, 255, 255, 1);
         color: rgba(14, 36, 63, 1);
         cursor: pointer;
         align-self: center;
         margin: 50px auto 0 auto;
         font-size: 12px;
      }
   }

   #cadastroModal .modal-dialog {
      max-width: 100% !important;
      margin: 0 !important;
   }
   
   .modalCadastrar .buttonCadastro,
   .modalCadastrar .buttonsArea .buttonModal {
      transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
   }

   .modalCadastrar .buttonCadastro:hover,
   .modalCadastrar .buttonsArea .buttonModal:not(.onThis):hover {
      background-color: #29e504 !important;
      color: #000 !important;
      transform: scale(1.03);
   }
   
   .modalCadastrar .buttonCadastro:active,
   .modalCadastrar .buttonsArea .buttonModal:not(.onThis):active {
      transform: scale(0.99);
   }

   .modalCadastrar .buttonCadastro:hover p {
      color: #000 !important;
   }