:root {
    --Branco-1: #fff;
    --Branco-2: #F7F7F7;
    --Branco-4: #E3E3E3;
    --Branco-5: #D2D2D2;
    --Preto: #1F1F1F;
    --Preto-1: #1F1F1F;
    --Preto-3: #525252;
    --Preto-4: #656565;
    --Preto-5: #ADADAD;
    --Brand-Vermelho: #AA2423;
    --Brand-Caramelo: #B57E10;
    --Brand-Vinho: #2B0B0B;
    --Brand-Vinho-2: #442828;
    --Brand-Vinho-2-hover: rgba(68, 40, 40, .5);
    --Brand-Amarelo-1: #F9DF7B;
    --Brand-Branco: #F9F7F4;
    --Brand-Branco-2: #F0EBE4;
    --Preto-3: #525252;
    --toast-success: #AFFFAE;
    --Toast-success-2: #E8FFE8;
    --Mensagens-Erro: #DC362E;
    --Caramelo: #B57E10;
    --Charts-Verde-1: #9CD971;
    --Charts-Azul-1: #7AB3BF;
    --Charts-Azul-2: #45828E;
    --Charts-Laranja-1: #F5A764;
    --Charts-Laranja-2: #F28C34;
    --Charts-Roxo-1: #9D85B5;
    --Charts-Roxo-2: #72588c;
    --Charts-Laranja-3: #FF654A;
    --Charts-Laranja-4: #ee492f;
}

body{
    background-color: var(--Brand-Branco);
    color: var(--Preto-1);
    font-weight: 300;
}

.display-large{
    color: var(--Preto-1);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
}

.display-medium{
    color: var(--Preto-1);
    text-align: left;
    font-size: 22px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
}

.display-minus{
    color: var(--Preto-1);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}


.button-caramelo{
    display: flex;
    height: 52px;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--Brand-Caramelo);
    color: var(--Branco-1, #FFF);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
}

.button-apply{
    height: 48px;
}


.deactivate svg path{
    fill: var(--Charts-Verde-1);
}

.activate,
.deactivate{
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activate svg path{
    fill: var(--Preto-5)!important;
}

.hide{
    display: none;
}

.show{
    display: block;
}

.button-caramelo:disabled{
    opacity: 0.7;
    background: var(--Brand-Caramelo)!important;
    border-color: var(--Brand-Caramelo);
    color: #fff!important;
}

.button-caramelo:hover,
.button-caramelo.btn:first-child:active{
    background: var(--Brand-Amarelo-1);
    color: var(--Brand-Vinho);
    border-color: var(--Brand-Amarelo-1);
}

.button-caramelo:disabled,
button.button-caramelo:focus:not(:focus-visible){
    background: var(--Branco-4);
    color: var(--Preto-4);
    border-color: var(--Branco-4);
}

.button-transparent,
.button-transparent.btn:first-child:active{
    border-radius: 4px;
    border: 1px solid var(--Brand-Caramelo);
    background-color: transparent;
    height: 46px;
    color: var(--Preto-1);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.button-transparent:hover{
    border: 1px solid var(--Brand-Amarelo-1);
}

.button-tab{
    border-radius: 4px;
    border: 1px solid var(--Branco-5);
    background: var(--Brand-Branco);
    color: var(--Preto-3);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding: 16px;
    height: 72px;
    position: relative;
}

.button-tab:hover,
.button-tab:active{
    background: var(--Brand-Branco)!important;
    color: var(--Brand-Caramelo)!important;
    border: 1px solid var(--Branco-5)!important;
}

.button-tab.active{
    color: var(--Brand-Caramelo);
}

.button-tab.active:after{
    content: "";
    left: 0;
    height: 4px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: var(--Brand-Caramelo);
}

.alert-info{
    border-radius: 4px;
    background:  #D0FFF3;
    border: 0;
    color: var(--Preto-1);
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.alert-info h5{
    font-size: 18px;
    font-weight: 400;
}

.send-spinner{
    color: #fff;
}

.spinner-border-sm{
    --bs-spinner-border-width: 1px;
}

.copy{
    color: var(--Preto-4);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
}

.copy a{
    margin: 0 0 2px 3px;
}

p{
    color: var(--Preto-1);
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
    text-align: left;
}

.input-group.form-error .input-group-text,
.input-group.form-error input{
    border-color: var(--Mensagens-Erro)!important;
}

.input-group.form-error input{
    border-right: 1px solid var(--Mensagens-Erro)!important;
    border-top-right-radius: 4px!important;
    border-bottom-right-radius: 4px!important;
}

.input-group.form-error input + .input-group-text { 
    border-right: 1px solid var(--Mensagens-Erro)!important;
    border-top-right-radius: 4px!important;
    border-bottom-right-radius: 4px!important;
    border-left: 0!important;
}

.input-group.form-error input:has(+ .input-group-text) {
    border-right: 0!important;
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

.error-message {
    font-size: 12px;
    color: var(--Mensagens-Erro);
    margin-top: 3px;
    width: 100%;
    text-align: left;
}

.breadcrumb-item{
    color: var(--Preto-4);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.container-fluid h1{
    margin-bottom: 40px;
}

.card{
    padding: 16px 16px 0;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(43, 11, 11, 0.12);
}

.gridjs-wrapper{
    box-shadow: 0 4px 8px 0 rgba(43, 11, 11, 0.12)!important;
    border-left: 0;
    border-right: 0;
}

.card, .card-header{
    background-color: #fff;
    border: 0;
}

.card-header{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    color: var(--Preto-1);
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
}

.card-header--img{
    padding: 8px;
    background-color: var(--Brand-Branco-2);
    border-radius: 4px;
    width: 40px;
}

.circle-bg{
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    background-color: var(--Brand-Caramelo);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-bg-transparent{
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    background-color: transparent;
    border: 1px solid var(--Brand-Caramelo);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-bg-transparent:hover{
    border-color: var(--Brand-Amarelo-1);
}

.breadcrumb-item a{
    color: var(--Preto-4);
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
    text-decoration: none;
}

.breadcrumb-item.active a{
    font-weight: 500;
}

.col-align-end{
    display: flex;
    justify-content: end;
    align-items: end;
}

.toastify{
    max-width: 95%!important;
    width: fit-content!important;
}

.text-info{
    border-radius: 4px;
    border: 1px solid var(--toast-success);
    background: var(--Toast-success-2);
    padding: 8px 201px 8px 8px;
    align-items: center;
    flex-shrink: 0;
    color: var(--Preto-1)!important;
    font-size: 12px;
    line-height: 16px;
}

.button-whatsapp{
    display: flex;
    width: 100%;
    height: 48px;
    padding: 12px 16px 11px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #075E54;
    color: var(--Branco-1);
    text-decoration: none;
    transition: ease all .5s;
    font-size: 18px;
}

.button-whatsapp:hover{
    background: #128C7E;
    color: var(--Branco-1);
}

.impersonating-nav p,
.impersonating-nav .button-transparent{
    font-size: 12px;
    line-height: 12px;
}

.accordion-button,
.accordion-header,
.accordion-button:not(.collapsed){
    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 8px;
    background: var(--Brand-Branco-2);
    box-shadow: none;
}

.accordion-header{
    padding: 0;
}

.accordion-button h4{
    color: var(--Preto-1);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.accordion-body {
    padding: 15px;
}

.accordion-body p{
    color: var(--Preto-3);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.bg-icons{
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-whatsapp{
    background: #25D366;
}

.bg-telephone{
    background: var(--Charts-Laranja-2);
}

.bg-envelope{
    background: #72588C;
}

.bi-whatsapp,
.bi-envelope,
.bi-telephone{
    color: #fff;
}

.card-body a{
    color: var(--Preto-1);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
}

.mobile-reverse{
    flex-direction: column-reverse;
}

@media(min-width: 992px){
    .mobile-reverse{
        flex-direction: row;
    }

    .impersonating-nav p,
    .impersonating-nav .button-transparent{
        font-size: 16px;
        line-height: 16px;
    }

    .button-whatsapp{
        width: 272px;
    }

    
    .col-lg-2-5 {
        flex: 1 0 0%;
    }

    .col-lg-3-5 {
        flex: 1 0 0%;
    }

    .card{
        padding: 24px 24px 12px;
    }

    .display-medium{
        font-size: 24px;
    }
}