[v-cloak] {display: none}

#banner-container {
    background-position: center center;
    background-repeat: no-repeat;
}

#grid-container {
    display: grid;
    padding: 48px;
    grid-gap: 24px;
}

@media only screen and (min-width: 1000px) {
    #grid-container {
        grid-template-rows: 40px 1fr 40px;
        grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
        grid-template-areas:
            "header header header header header"
            "conteudo conteudo conteudo formulario formulario"
            "footer footer footer footer footer";
    }
}

@media only screen and (max-width: 999px) {
    #grid-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "formulario"
            "conteudo"
            "footer";
    }
}

/*Mobile M*/
@media only screen and (max-width: 375px) {
    #grid-container {
        margin: 0 3%;
        padding: 8px;
    }

    .input-field label {
        font-size: 14px !important;
    }

    .text-obrigatorio {
        font-size: 12px;
    }
}

/*Mobile S*/
@media only screen and (max-width: 320px) {
    .input-field label {
        font-size: 13px !important;
    }
}

.header {
    grid-area: header;
}

.conteudo {
    grid-area: conteudo;
}

.formulario {
    grid-area: formulario;
}

.footer {
    grid-area: footer;
}

#grid-container #matricula-form {
    padding: 24px;
    background-color: #fff;
    border-radius: 4px;
}

#grid-container #matricula-form .input-field:last-of-type {
    margin-bottom: 0px;
}

#grid-container #matricula-form .input-field:last-of-type .btn {
    width: 100%;
}

#grid-from {
    margin-bottom: 16px;
    display: grid;
    align-items: center;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "texto texto info_mec";
}

.texto {
    grid-area: texto;
}

.campos_visiveis {
    grid-area: campos_visiveis;
}

.btn_enviar {
    grid-area: btn_enviar;
}

.info_mec {
    grid-area: info_mec;
    display: grid;
    justify-items: center;
    grid-template-rows: 1fr;
    grid-template-columns: 5fr 1fr;
    align-items: center;
    grid-template-areas:
        "texto info_mec";
}