@media all {
    body{
        background-color: #818285;
    }
    .bg-cadastro {
        background-image: url("img/cadastro/bg-login.jpeg");
        background-position: left;
        background-size: cover;
    }
    label {
        color: #4b4b4b;
        /*font-weight: 700;*/
    }
    h2{
        color: #EA0F2C;
        text-align: center;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 32px */
        text-transform: uppercase;
    }
    p{
        color: #848484;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 134%;
        text-transform: uppercase;
        text-align: center;
    }
    ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .nav-pills {
        border-bottom: 1px solid rgba(0,0,0,.125);
    }
    .nav-pills > .nav-item > .nav-link {
        cursor: not-allowed;
    }
    .nav-pills > .nav-item > .nav-link.active {
        background-color: #ce151a;
        cursor: pointer;
    }
    .nav-pills > .nav-item > .nav-link.off {
        background-color: #4b4b4b;
        color: #fff;
    }
    #login .image-login{
        position: absolute;
        bottom: 50%;
        left: 20px;
        z-index: 999;
    }
    #login .image-login-password{
        position: absolute;
        bottom: 20%;
        left: 20px;
        z-index: 999;
    }
    #login .form-control{
        padding: 0.375rem 2.00rem;
        border-radius: 10px!important;
    }
    #login .text-red{
        color: #EA0F2C;
        text-align: right;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 142.857% */
        letter-spacing: -0.28px;
        text-transform: uppercase;
    }
    #login .trocar-senha{
        color:  #818285;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px; /* 142.857% */
        letter-spacing: -0.28px;
        text-transform: uppercase;
    }
    .card-login{
        width: 503px!important;
        padding: 45px!important;
    }
    #login .trocar-senha{
        color:  #818285;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px; /* 142.857% */
        letter-spacing: -0.28px;
        text-transform: uppercase;
    }
    #login .campo-login, #login .campo-login-password{
        height: 62px;
    }

    .btn-login{
        border-radius: 10px;
        background: #EA0F2C;
        height: 50px;
        padding: 10px 8px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        color: #FFF;
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 24px */
    }
    .btn-cadastro{
        border-radius: 10px;
        border: 1px solid #000;
        background: #ffffff;
        display: flex;
        height: 50px;
        padding: 10px 8px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        color: #2D3748;
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 100%; /* 24px */
    }

    .bg-cadastro {
        background-image: url("img/cadastro/bg-login.jpeg");
        background-position: left;
        background-size: cover;
    }

    #cadastro .card{
        display: flex;
        width: 501px;
        margin: 0 auto;
        padding: 44px 45px;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        border-radius: 10px;
    }
    #cadastro #button-user, #cadastro #bars-menu{
        display: none;
    }

    #cadastro .nav-fill .nav-item{
        width: 50px;
        height: 0;
        background-color: transparent;
        border: 0 solid transparent;
    }

    #cadastro .nav-pills{
        border: none;
    }

    #cadastro .nav-pills > .nav-item > .nav-link{
        padding: 2px;
        margin: 0 10px 0 0;
        background-color: #E0E5F2!important;
        height: 2px;
    }
    #cadastro .nav-pills > .nav-item > .nav-link.off{
        background-color: #EA0F2C!important;
    }
    #cadastro .nav-pills > .nav-item > .nav-link.active{
        background-color: #EA0F2C!important;
    }
    #cadastro .nav-pills > .nav-item > .nav-link.nada{
        background-color: #E0E5F2!important;
    }
    .card-body{
        padding: 0;
    }
    .icone-input{
        position: absolute;
        top: 6px;
        left: 30px;
        z-index: 999;
    }
    .icone-input.erro{
        position: absolute;
        bottom: 34px;
        left: 30px;
        z-index: 999;
    }
    .form-control{
        padding: .375rem 3rem;
        color: #818285;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        /*line-height: 100%; !* 14px *!*/
        /*letter-spacing: -0.28px;*/
        text-transform: uppercase;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-container--default .select2-selection .select2-selection__rendered{
        color: #818285!important;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        /*line-height: 100%; !* 14px *!*/
        /*letter-spacing: -0.28px;*/
        text-transform: uppercase;
    }
    select{
        appearance: none; /* Remove a flecha padrão */
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('/static/v2/css/img/icones/chevron-down.png');
        background-repeat: no-repeat;
        background-position: right 10px top 50%; /* Posiciona a seta */
        background-size: 1.2em;
        padding-right: 2.5em; /* Adiciona espaço à direita para a seta */
        border-radius: 5px; /* Apenas para visual */
    }
    /* Remove a seta padrão */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        display: none;
    }

    .select2-container--default .select2-selection{
        padding: 0.4rem 3.1rem !important;
        font-size: 1rem;
    }

    /* Adiciona um ícone personalizado */
    .select2-container--default .select2-selection--single {
        background-image: url('/static/v2/css/img/icones/chevron-down.png');
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 1.2em;
        padding-right: 2.5em; /* Adiciona espaço à direita para a seta */
        border-radius: 5px; /* Personalização opcional */
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered{
        font-size: 1rem!important;
        color: #818285;
    }
    /* Estilo padrão dos itens não selecionados */
    .radio-container {
        display: inline-block;
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
        background-color: #ffffff;
        color: #A7A9AC;
        text-align: center;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 32px */
        border-radius: 10px;
        border: 2px solid #A7A9AC;

    }

    .radio-container p{
        color: #818285;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
    }

    /* Estilo quando um item é selecionado */
    .radio-container.selected {
        background-color: #ffffff; /* Fundo vermelho para o selecionado */
        color: #ff0000; /* Texto branco */
        border-radius: 10px;
        border: 2px solid #ff0000;
    }

    /* Esconder os radio buttons padrão */
    .radio-tipo input[type="radio"] {
        display: none;
    }
    .btn-voltar{
        width: 48%;
        padding: 10px  8px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        border-radius: 10px;
        background-color: #ffffff;
        border: 1px solid #A7A9AC;
        color: #818285;
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 24px */
    }
    .btn-voltar.btn-primary{
        color: #ffffff;
    }
    .btn-proximo{
        width: 48%;
        padding: 10px  8px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        border-radius: 10px;
        background-color: #EA0F2C;
        border: 1px solid #EA0F2C;
        color: #FFF;
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 24px */
    }
    .btn-proximo-fisrt{
        width: 100%;
    }
    .form-group .col-12{
        min-height: 50px;
    }

    .password-strength {
        display: flex;
        margin-top: 10px;
    }

    .strength-bar {
        flex: 1;
        height: 5px;
        margin-right: 5px;
        background-color: #e0e0e0;
        transition: background-color 0.3s ease;
    }

    .strength-bar:last-child {
        margin-right: 0;
    }

    .bg-light-blue {
        background-color: #87CEEB; /* Azul claro */
    }

    .bg-yellow {
        background-color: #FFD700; /* Amarelo */
    }

    .bg-green {
        background-color: #32CD32; /* Verde */
    }

    .bg-red {
        background-color: #EA0F2C; /* Vermelho */
    }
    select option{
        font-size: 14px!important;
        padding: 20px!important;
        min-height: 3em;
        line-height: 2.5;
        font-family: sans-serif;
    }

    #profile-pic {
        border-radius: 50%;
        width: 88px;
        height: 88px;
        object-fit: cover;
    }

    .img-container {
        max-width: 100%;
        height: auto;
    }
    /* Esconda o checkbox padrão */
    .custom-checkbox {
        display: none;
    }

    /* Estilo para o "fake" checkbox */
    .custom-checkbox + label {
        display: inline-block;
        position: relative;
        padding-left: 35px;
        cursor: pointer;
        font-size: 16px;
        user-select: none;
    }

    /* Círculo redondo */
    .custom-checkbox + label::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 24px;
        height: 24px;
        background-color: transparent;
        border: 1px solid #818285;
        border-radius: 50%;
        transition: background-color 0.3s, border-color 0.3s;
    }

    /* Círculo interno quando o checkbox estiver marcado */
    .custom-checkbox:checked + label::before {
        background-color: #EA0F2C;
        border-color: #EA0F2C;
    }

    /* Estilo adicional (opcional) para criar uma animação suave */
    .custom-checkbox + label::after {
        content: '';
        position: absolute;
        top: 7px;
        left: 7px;
        width: 10px;
        height: 10px;
        background-color: white;
        border-radius: 50%;
        transition: background-color 0.3s;
        opacity: 0;
    }

    /* Quando o checkbox está marcado, exibir o círculo interno */
    .custom-checkbox:checked + label::after {
        opacity: 1;
    }
    .checkbox-apple {
        position: relative;
        width: 50px;
        height: 25px;
        margin: 20px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .checkbox-apple label {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 25px;
        border-radius: 50px;
        background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .checkbox-apple label:after {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        width: 23px;
        height: 23px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }

    .checkbox-apple input[type="checkbox"]:checked + label {
        background: linear-gradient(to bottom, #EA0F2C, rgba(234, 15, 44, 0.86));
    }

    .checkbox-apple input[type="checkbox"]:checked + label:after {
        transform: translateX(25px);
    }

    .checkbox-apple label:hover {
        background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
    }

    .checkbox-apple label:hover:after {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .yep {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 25px;
    }

    .cntr {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 70px; /* Define uma altura fixa para garantir que todos os quadradinhos tenham o mesmo tamanho */
        padding: 10px;
        box-sizing: border-box; /* Inclui padding e border no tamanho total */
    }

    .fixed-height {
        height: 70px; /* Altura fixa para garantir que todos os elementos fiquem do mesmo tamanho */
    }

    .cbx {
        position: relative;
        width: 35px;
        height: 45%;
        border: 1px solid #c8ccd4;
        border-radius: 3px;
        vertical-align: middle;
        transition: background 0.1s ease;
        cursor: pointer;
        display: block;
    }

    .cbx:after {
        content: '';
        position: absolute;
        top: 2px;
        left: 8px;
        width: 7px;
        height: 14px;
        opacity: 0;
        transform: rotate(45deg) scale(0);
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transition: all 0.3s ease;
        transition-delay: 0.15s;
    }

    .lbl {
        margin-left: 5px;
        vertical-align: middle;
        cursor: pointer;
        display: block;
        word-wrap: break-word; /* Permite que o texto quebre em várias linhas, se necessário */
        max-width: 200px; /* Limita a largura do rótulo */
        min-width: 120px;
        font-size: 14px;
    }

    input[type="checkbox"]:checked ~ .cbx {
        border-color: transparent;
        background: #EA0F2C;
        animation: jelly 0.6s ease;
    }

    input[type="checkbox"]:checked ~ .cbx:after {
        opacity: 1;
        transform: rotate(45deg) scale(1);
    }

    .hidden-xs-up {
        display: none !important;
    }

    /* Centraliza o conteúdo do checkbox quando está ativo */
    .fixed-height {
        height: 70px; /* Define uma altura fixa para garantir que todos os itens tenham o mesmo tamanho */
    }
    .errorlist li{
        color: #EA0F2C!important;
    }
    .card-red{
        background-color: #EA0F2C;
    }
    .text-sucesso{
        text-align: center;
        font-size: 22px;
        font-style: normal;
        font-weight: 500;
        line-height: 134%; /* 29.48px */
        text-transform: uppercase;
    }
    .text-sucesso-h2{
        text-align: center;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 36px */
        text-transform: uppercase;
    }

}
@media (max-width: 500px) {
    #cadastro .card {
        width: 100%;!important;
    }
    #cadastro .nav-fill .nav-item {
        width: 28px;
    }
}