/* @keyframes 
animacao1{
    0%{background-color: var(--background-color-red-1); width: 93%;}
    50%{background-color: var(--background-color-red-2); width: 93%;}
    100%{background-color: var(--background-color-red-3); width: 93%;}
}
@keyframes animacao2{
    0% {background-color: var(--background-color-gray-4); margin-top: 100%; scale: 5%;}
    50% {background-color: var(--background-color-gray-4); margin-bottom: 50%;}
}

@keyframes animacao3{
    0% {background-color: var(--background-color-gray-4); display: none;}
    50% {background-color: var(--background-color-gray-4); margin-left: 12%;}
} */

:root {
    --text-color-red:#d71920;
    --text-color-red-2:#b71c1c;
    --text-color-black: #000000;
    --text-color-gray: #6d6e70;
    --text-color-blue: #3073a7;
    --text-color-gray-2: #323232;

    --border-color-gray: #f3f3f3;
    --border-color-gray-2: #D6DFE7;
    --border-color-gray-3: #e6e6e6;
    --border-color-gray-3: #dddddd;

    --font-family-1: 'Poppins', sans-serif;

    --background-color-gray: #f3f3f3;
    --background-color-gray-2: #D6DFE7;
    --background-color-red-1: #d71920;
    --background-color-red-2: #BD2F34;
    --background-color-red-3: #B03A3E;
    --background-color-blue: #0038A8;

}

html, body {
    font-family: var(--font-family-1);

}

.bloco-principal {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.bloco-principal .bloco-gray {
    width: 93%;
    height: 3vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* animation-name: animacao1;
    animation-duration: 3.5s; */
    background-color: var(--background-color-blue);
    border-radius: 5px;

}

.bloco-principal .bloco-secundario {
    padding-top: 1%;

    width: 93%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0px 15px 60px 5px #6d6e70;
    border-radius: 5px;

}

.bloco-principal .bloco-secundario .inicio{
    width: 100%;
    height: auto;
    /* padding: 0.5rem; */
    /* background-color: var(--background-color-gray); */
    font-size: 14px;
    font-family: var(--font-family-1);
    /* margin: 0.4rem; */
    color: var(--text-color-red-2);
    /* border: 5px solid var(--border-color-gray); */
}

.bloco-principal .bloco-secundario .informacao {
    width: 100%;
    height: auto;
    /* padding-left: 17%; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-family: var(--font-family-1);
    /* animation-name: animacao2;
    animation-duration: 3s;
    animation-delay: 0s; */
    color: var(--text-color-red-2);

}

.bloco-principal .bloco-secundario .infoajuste{
    display: none;
    
}


.bloco-principal .bloco-secundario .conteudo {
    width: 85%;
    height: auto;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    border: 5px solid var(--border-color-gray);
    /* border-radius: 5px; */
    
}

.bloco-principal .bloco-secundario .conteudo .header {
    width: 100%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    

}


.bloco-principal .bloco-secundario .informacao_link {
    width: 85%;
    height: auto;
    background-color: var(--background-color-gray);
    font-size: 14px;
    font-family: var(--font-family-1);
    margin: 0 auto;
    color: var(--text-color-red-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 5px solid var(--border-color-gray);
    /* animation-name: animacao2;
    animation-duration: 3.5s;
    animation-delay: 0s; */
}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario {
    width: 100%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .mensagemSucesso {
    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 30px;

    color: var(--text-color-gray-2);

    font-size: 22px;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .error-hidden {
    display: none;
    
}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .logo {
    width: 20%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    /* animation-name: animacao2;
    animation-duration: 2.5s;
    animation-delay: 0s; */

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .logo img {
    width: 100%;
    height: auto;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form {
    width: 90%;
    height: auto;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form {
    width: 100%;
    height: auto;
    /* animation-name: animacao3;
    animation-duration: 4s;
    animation-delay: 1s; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco {
    margin-bottom: 1%;

    width: 100%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .labelTitulo {
    width: 100%;
    height: auto;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .labelTitulo label {
    width: 100%;
    height: auto;

    font-size: 14px;
    font-family: var(--font-family-1);
    
    color: var(--text-color-gray);

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste {
    width: 100%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .excessao .campoObrigatorio {
    color: transparent !important;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .campoObrigatorio {
    width: 5%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--text-color-red);

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos {
    width: 57vw;
    height: auto;

    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos input {
    padding: 1px 2px 1px 5px;

    width: 100%;
    height: 25px;

    border: 1px solid var(--border-color-gray-3);
    border-radius: 3px;

    outline: none;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos .erro-input {
    padding: 1px 2px 1px 5px;

    width: 100%;
    height: 25px;

    border: 1px solid var(--text-color-red);
    border-radius: 3px;

    outline: none;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos .erro-small {
    display: block;

    font-size: 12px;
    
    color: var(--text-color-red);

    margin-top: 0.5%;

    width: 100%;
    height: auto;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos select {
    width: 100%;
    height: 30px;

    border: 1px solid var(--border-color-gray-3);
    border-radius: 3px;

    color: var(--text-color-gray);

    outline: none;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos #motivo {
    width: 101% !important;
    height: 30px !important;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos small {
    display: none;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos .numero-telefone {
    width: 100%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    flex-wrap: wrap;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos .numero-telefone .erro-input {
    border: 1px solid var(--text-color-red) !important;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos .numero-telefone .ddd {
    margin-right: 1%;

    width: 9%;
    height: 25px;

    border: 1px solid var(--border-color-gray-3);
    border-radius: 3px;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos .numero-telefone .phone {
    width: 33%;
    height: 25px;

    border: 1px solid var(--border-color-gray-3);
    border-radius: 3px;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .enviar {
    width: 100%;
    height: auto;
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .enviar .campo-obrigatorio {
    margin-top: 1.3%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--text-color-red-2);

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .enviar .botao {
    width: 100%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .enviar .botao input {
    width: 82px;
    height: 30px;
    color: var(--text-color-red-2);
    border-radius: 5px;
    border: none;
    font-weight: bold;
    font-size: 8pt;
    font-family: var(--font-family-2);
    border: 1px solid var(--border-color-gray-3);
    margin: 0.6rem;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .enviar .botao input:hover {
    width: 82px;
    height: 30px;
    cursor: pointer;
    color: var(--text-color-black);
    border-radius: 5px;
    border: none;
    font-weight: bold;
    background-color: var(--background-color-gray);
    font-size: 8pt;
    font-family: var(--font-family-2);
    border: 1px solid var(--text-color-gray);
    margin: 0.6rem;
    transform: scale(1);
}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .enviar .ajuda {
    width: 100%;
    height: auto;
    line-height: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* animation-name: animacao2;
    animation-duration: 3s;
    animation-delay: 0s; */
    margin: 0.5rem;
}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .enviar .ajuda label {
    width: 50%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    margin-bottom: 1%;
    
    color: var(--text-color-gray);

    font-size: 12px;

}

.bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .enviar .ajuda label a{
    color: var(--text-color-blue);

    text-decoration: none;

    margin-left: 1rem;

}

@media only screen and (max-width: 450px) {
    .bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco {
        flex-wrap: wrap;

        display: flex;
        align-items: center;
        justify-content: center;

    }

    .bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste {
        display: flex;
        align-items: center;
        justify-content: flex-start;

    }

    .bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos {
        width: 94%;
        height: auto;

    }

    .bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos .numero-telefone .ddd {
        width: 12%;
        height: 25px;

    }

    .bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .dados-form .bloco .bloco-ajuste .ajuste-campos .numero-telefone .phone {
        width: 65%;
        height: 25px;

    }

    .bloco-principal .bloco-secundario .conteudo .bloco-formulario .form .enviar .ajuda label {
        width: 100%;
        height: auto;
        margin-top: 0.4rem;
        flex-wrap: wrap;

    }

}