@font-face {
    font-family: 'Mulish';
    src: url('../fonts/Mulish-Medium.woff');
}

@font-face {
    font-family: 'Mulish-ExtraBold';
    src: url('../fonts/Mulish-ExtraBold.woff');
    font-weight: bold;
}

@font-face {
    font-family: 'Mulish-000000-900';
    src: url('../fonts/Mulish-000000.woff');
    font-weight: bold;
}

@font-face {
    font-family: 'Mulish-Bold';
    src: url('../fonts/Mulish-Bold.woff');
    font-weight: bold;
}

@font-face {
    font-family: 'Mulish-SemiBold';
    src: url('../fonts/Mulish-SemiBold.woff');
}

@font-face {
    font-family: 'Mulish-Medium';
    src: url('../fonts/Mulish-Medium.woff');
}

@font-face {
    font-family: 'Mulish-Light';
    src: url('../fonts/Mulish-Light.woff');
}

@font-face {
    font-family: 'Mulish-Black';
    src: url('../fonts/Mulish-Black.woff');
}


body {
    background-color: #f0f0f0;
}

.div-progreco, .div-formulario {
    width: 900px;
}

.div-progreco {
    background-color: #fff;
    border-radius: 35px;
    /*width: 75%;*/
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.div-progreco-box {
    display: flex;
}

.div-progreco-num {
    background-color: #666;
    border-radius: 50%;
    padding: 6px;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    width: 35px;
    height: 35px;
}

.div-progreco-texto {
    padding: 6px;
    color: #666;
    font-weight: bold;
    font-size: 15px;
}

.progreco-num {
    background-color: #17C6DD;
    color: #fff;
    font-weight: bold;
}

.progreco-texto {
    color: #17C6DD;
    font-weight: bold;
}

.div-formulario {
    background-color: #fff;
    border-radius: 35px;
    /*width: 75%;*/
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    padding: 30px;
}

.cabecalho {
    display: flex;
    font-family: 'Mulish-ExtraBold';
    font-weight: bold;
    font-size: 24px;
    margin-left: 25px;
}

.sub-cabecalho {
    color: #17C6DD;
    font-family: 'Mulish-Medium';
    font-weight: normal;
    font-size: 14px;
    margin-left: 25px;
}

.titulo {
    font-family: 'Mulish-Bold';
    font-weight: bold;
    font-size: 24px;
    color: #0B3A59;
    margin-left: 15px;
    margin-bottom: 15px;
}

.sub-titulo {
    font-family: 'Mulish-SemiBold';
    font-size: 20px;
    color: #0B3A59;
}

.form-interno {
    border: 1px solid #ccc;
    width: 100%;
    height: 100%;
    min-height: 250px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 20px;
}

.form-input {
    border: none;
    border-bottom: 1px solid #ccc;
    padding-left: 15px;
    width: 263px;
    height: 45px;
}

.form-select {
    color: #808080;
    display: inline;
}

.form-checkbox-texto {
    padding-top: 15px;
    padding-left: 15px;
    color: #666;
}

/* FORM 1 */

.form1-titulo {
    color: #17C6DD;
    font-family: 'Mulish-Bold';
    font-weight: bold;
    font-size: 40px;
}

.form1-texto {
    color: #606060;
    font-family: 'Mulish-Medium';
    font-weight: normal;
    font-size: 23px;
}

.form1-link {
    text-decoration: none;
    color: #17C6DD;
    font-family: 'Mulish-Bold';
    font-weight: bold;
}

.form1-div-botao {
    width: 100%;
    text-align: right;
}

.form1-continuar{
    background-color: #17C6DD;
    border: none;
    border-radius: 10px;
    color: #fff;
    width: 190px;
    height: 45px;
}

/* FORM PRÉ-CADASTRO */

#formpre .cabecalho-orgao {display: none;}

#formpre .form-input {width: 48%;}

.formpre-texto {
    font-family: 'Mulish';
    font-size: 14px;
    color: #666666;
}

.formpre-preco {
    font-size: 24px;
    color: #17C6DD;
}

.formpre-div-botao {
    width: 100%;
    text-align: right;
}

.formpre-continuar{
    background-color: #0B3A59;
    border: none;
    border-radius: 10px;
    color: #fff;
    width: 190px;
    height: 45px;
}

/* VALIDAÇÃO DE TOKEN */

#carregando-token {text-align: center;}

#box-valida-token {text-align: center;}

.token-texto {
    font-family: 'Mulish';
    font-size: 16px;
    color: #666666;
}

#box-valida-token .form-input {
    text-align: center;
    padding-left: 0;
    width: 150px;
}

.btn_valida_token {
    background-color: #0B3A59;
    border: none;
    border-radius: 10px;
    color: #fff;
    width: 80px;
    height: 45px;
    margin-left: 15px;
}


/* FORM 2 */

.form2-texto {
    font-family: 'Mulish';
    font-size: 14px;
    color: #666666;
}

.form2-preco {
    font-size: 24px;
    color: #17C6DD;
}

.form2-div-botao {
    width: 100%;
    text-align: right;
}

.form2-continuar{
    background-color: #0B3A59;
    border: none;
    border-radius: 10px;
    color: #fff;
    width: 190px;
    height: 45px;
}

/* FORM 3 */

.form-input-cep {
    width: 220px;
}

.form-input-numero {
    width: 155px !important;
}

.textosn {
    margin-left: 5px;
    color: #666;
}

.form3-botao-buscar {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px 12px;
}

.form3-div-botao {
    width: 100%;
    text-align: right;
}

.form3-continuar{
    background-color: #0B3A59;
    border: none;
    border-radius: 10px;
    color: #fff;
    width: 190px;
    height: 45px;
}

/* FORM 4 */

.form4-texto {
    font-family: 'Mulish-Bold';
    font-size: 20px;
}

.form4-titulo-benef {
    font-family: 'Mulish-Medium';
    font-size: 14px;
    color: #17C6DD;
}

.form4-div-benef {
    border-top: 1px solid #ccc;
    margin-bottom: 15px;
    width: 100%;
}

.form4-div-botao {
    width: 100%;
    text-align: right;
}

.form4-continuar{
    background-color: #0B3A59;
    border: none;
    border-radius: 10px;
    color: #fff;
    width: 190px;
    height: 45px;
}

/* FORM 5 */

.div-valores {
    display: inline-block;
    width: 120px;
}

.form5-titular {
    font-family: 'Mulish';
    font-size: 14px;
    color: #666666;
}

.form5-titular-valor {
    font-family: 'Mulish';
    font-size: 24px;
    color: #B2B2B2;
}

.form5-dependente {
    font-family: 'Mulish';
    font-size: 14px;
    color: #666666;
}

.form5-dependente-valor {
    font-family: 'Mulish';
    font-size: 24px;
    color: #B2B2B2;
}

.form5-total {
    font-family: 'Mulish';
    font-size: 14px;
    color: #666666;
}

.form5-total-valor {
    font-family: 'Mulish';
    font-size: 24px;
    color: #17C6DD;
}

.barra-azul {
    background-color: #17C6DD;
    width: 100%;
    height: 15px;
    margin-left: auto;
    margin-right: auto;
}

.form5-div-botao {
    width: 100%;
    text-align: right;
}

.form5-continuar{
    background-color: #0B3A59;
    border: none;
    border-radius: 10px;
    color: #fff;
    width: 190px;
    height: 45px;
}

/* FORM 6 */

.form6-titulo {
    font-family: 'Mulish-Medium';
    font-size: 40px;
    color: #17C6DD;
}

.form6-procolo {
    font-family: 'Mulish-Medium';
    font-size: 25px;
    color: #17C6DD;
}

.form6-procolo-info {
    font-family: 'Mulish';
    font-size: 15px;
    color: #0b3a59;
}

.form6-texto {
    font-family: 'Mulish';
    font-size: 20px;
    color: #0b3a59;
}

@media (min-width: 768px) and (max-width: 991px) {
    
    .div-progreco, .div-formulario {width: 768px;}

    .form-input-cep {width: 175px !important;} 

    .form-input-numero {width: 110px !important;}

    .div-progreco-num {
        font-size: 12px;
        width: 30px;
        height: 30px;
    }

    .div-progreco-texto {font-size: 12px;}
    
    .form-input {width: 218px;}
}

@media (max-width: 576px) {
    #formpre .form-input {width: 100%;}
}

@media (min-width: 576px) and (max-width: 767px) {
    
    .div-progreco, .div-formulario {width: 576px;}

    .form-input-cep {width: 191px !important;}

    .form-input-numero {width: 125px !important;}

    .div-progreco-num {
        font-size: 9px;
        width: 25px;
        height: 25px;
    }

    .div-progreco-texto {font-size: 9px;}
    
    .form-input {width: 233px;}

    .form-checkbox-texto {padding-top: 15px;}
}

@media (min-width: 320px) and (max-width: 575px) {
    
    .div-progreco, .div-formulario {
        width: 320px;
    }

    .form-input-cep {width: 226px !important;}

    .form-input-numero {width: 155px !important;}

    .div-formulario {
        border-radius: 15px;
        padding: 10px;
    }

    .form-interno {padding: 15px;}

    .div-progreco-num {
        width: 35px;
        height: 35px;
    }

    .div-progreco-texto {display: none;}

    .titulo {margin-left:0px;}

    .cabecalho {margin-left:0px;}

    .sub-cabecalho {margin-left:0px;}

    .form1-continuar {width: 100%;}
    
    .form-input {width: 100%;}

    .form-checkbox-texto {padding-top: 15px;}

    .form2-continuar {width: 100%;}

    .form3-continuar {width: 100%;}

    .form4-continuar {width: 100%;}

    .form5-continuar {width: 100%;}

    .form6-procolo {font-size: 20px;}
}