@charset "UTF-8";
@import url("noctua7.css");

/* ********************************** INÍCIO - FORM ************************************ */

/* ****************** FORM / FORM-PAINEL */
.form,
.form-painel,
.form-modal {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ********************************** INÍCIO - FORM_HEADER ***************************** */

/* ****************** FORM-HEADER */
.form-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    margin: 0;
    padding: 5px 10px;
    background-image: var(--bg-gradient);
}

/* ****************** FORM_HEADER_TITLE */
.form_header_title {
    margin: 0;
    font-size: 18px;
    font-weight: normal;
    color: var(--color-n7-gray-light);
}

/* ********************************** FIM - FORM_HEADER ******************************** */

/* ********************************** INÍCIO - FORM_BODY ******************************* */

/* ****************** FORM_BODY */
.form_body {
    width: 100%;
    margin: 0;
    padding: 5px 10px 10px 10px;
    overflow: hidden;
}

/* ****************** FORM_BODY_SETOR */
.form_body_setor {
    width: 100%;
    display: block;
    padding: 0 0 5px 0;
    margin: 0 0 5px 0;
    overflow: hidden;
    background-color: var(--color-n7-white);
}

/* ****************** FORM_BODY_SETOR_HEADER */
.form_body_setor_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 3px 0;
    margin: 0;
    border-bottom: 0.5px solid var(--color-n7-gray-dark);
}

/* ****************** FORM_BODY_SETOR_HEADER > I */
.form_body_setor_header>i {
    font-size: 16px;
    margin: 0;
    padding: 0;
    color: var(--color-n7-middle);
}

/* ****************** FORM_BODY_SETOR_HEADER_TITULO */
.form_body_setor_header_titulo {
    font-weight: normal;
    font-size: 16px;
    margin: 0;
    padding: 0;
    color: var(--color-n7-middle);
}

/* ****************** FORM-CONTROL / FORM-SELECT {Input(type="text") - Bootstrap} */
.form-control,
.form-select {
    color: var(--color-n7-black);
    border-color: var(--color-n7-gray-middle);
    margin: 0 !important;
}

/* ****************** FORM-CONTROL / FORM-SELECT {Input(type="text") - Bootstrap} */
.form-control-sm,
.form-select-sm {
    margin: 0 !important;
}

/* ****************** FORM-CONTROL ::PLACEHOLDER */
.form-control::placeholder {
    color: var(--color-n7-font-light) !important;
}

/* ****************** FORM-CONTROL:READ-ONLY / FORM-CONTROL:DISABLED */
.form-control:read-only,
.form-control:disabled {
    border-style: none !important;
    color: var(--color-n7-font-middle) !important;
    background-color: var(--color-n7-gray-light) !important;
}

/* ****************** FORM-CONTROL:FOCUS / FORM-SELECT:FOCUS / FORM-CHECK-INPUT:FOCUS */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--color-n7-middle);
    box-shadow: 0px 0px 3px 1px var(--color-n7-middle-hover);
}

/* ****************** FORM-LABEL (Label - Bootstrap) */
.form-label {
    font-size: 12px;
    color: var(--color-n7-font-light) !important;
    margin: 0 0 3px 5px !important;
}

/* ****************** FORM-CHECK-LABEL */
.form-check-label {
    font-size: 12px;
    color: var(--color-n7-font-light) !important;
    margin: 0 auto 0 0 !important;
    padding: 0 10px 4px 0 !important;
}

/* ****************** FORM-CHECK-INPUT */
.form-check-input {
    margin: 5px 0 0 3px;
    border-color: var(--color-n7-gray-middle) !important;
}

/* ****************** FORM-CHECK-INPUT:CHECKED */
.form-check-input:checked {
    background-color: var(--color-n7-middle) !important;
}

/* ****************** FORM_CONTAINER_INFORME_SHORT / FORM_CONTAINER_INFORME_LARGE */
.form_container_informe_short,
.form_container_informe_large {
    width: 100%;
    padding: 5px 10px;
    border-bottom: 0.5px solid var(--color-n7-gray-middle);
}

/* ****************** FORM_RETIRAR_IMAGE */
.form_retirar_image {
    display: inline-block;
    cursor: pointer;
    color: var(--color-n7-red);
    margin-left: 6px;
}

/* ****************** FORM_RETIRAR_ARQUIVO */
.form_retirar_arquivo {
    display: inline-block;
    cursor: pointer;
    color: var(--color-n7-red);
    margin-left: 6px;
}

/* ****************** BTN_INFORME_... / ENDERECO / SENHA / EMAIL / NOME */
.btn_informe {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-n7-green);
    margin-left: 3px;
}

/* ****************** BOX_INFORME */
.box_informe {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ****************** BOX_INFORME > P */
.box_informe>p {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--color-n7-font-middle);
    text-align: start;
}

/* ****************** BOX_INFORME > P > SPAN / BOX_INFORME > P > STRONG */
.box_informe>p>span,
.box_informe>p>strong {
    color: var(--color-n7-middle);
}

/* ****************** FORM_CONTAINER_SAUDACAO_PAINEL */
#form_container_saudacao_painel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 5px 0;
    padding: 5px 0;
    background-color: var(--color-n7-gray-light);
    column-gap: 10px;
    border-radius: 8px;
}

/* ****************** FORM_CONTAINER_SAUDACAO_PAINEL > SPAN */
#form_container_saudacao_painel>span {
    display: block;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-family: var(--fonte-dancing);
    font-size: 30px;
    text-align: center;
    color: var(--color-n7-middle);
}

/* ****************** LINHA_IMAGEM_ATUAL */
.linha_imagem_atual {
    margin-top: 5px;
}

/* ****************** FORM_CONTAINER_IMAGE */
.form_container_image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 5px 0;
    padding: 5px;
    border-radius: 8px;
    background-color: var(--color-n7-gray-light);
}

/* ********************************** INÍCIO: FORM_CONTAINER_CEP_BUTTONS *************** */

/* ****************** FORM_CONTAINER_CEP_BUTTONS */
#form_container_cep_buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
}

/* ****************** BTN_BUSCAR_POR_CEP */
.btn_buscar_por_cep,
.btn_buscar_por_cep_modal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 56px;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
    background-color: var(--color-n7-gray-light);
    transition: all ease-in-out 0.4s;
}

/* ****************** BTN_BUSCAR_POR_CEP / :HOVER & :FOCUS */
.btn_buscar_por_cep:hover,
.btn_buscar_por_cep:focus,
.btn_buscar_por_cep_modal:hover,
.btn_buscar_por_cep_modal:focus {
    background-color: var(--color-n7-gray-light);
    border: 0.5px solid black;
}

/* ****************** BTN_BUSCAR_POR_CEP > IMG */
.btn_buscar_por_cep>img,
.btn_buscar_por_cep_modal>img {
    width: 45px;
    margin: 0 auto;
}

/* ********************************** FIM: FORM_CONTAINER_CEP_BUTTONS ****************** */

/* ****************** BOX_INPUT_HORIZONTAL */
.box_input_horizontal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    column-gap: 5px;
}

/* ****************** BOX-INPUT-FILE-IMG */
.box-input-file-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 3px 0 10px 0;
    row-gap: 3px;
}

/* ****************** FORM_PESQUISA_PAINEL */
#form_pesquisa_painel {
    width: 100%;
    max-width: 350px;
    margin: 0 !important;
    padding: 0 !important;
}

/* ****************** BOX_INPUT_PESQUISA */
.box_input_pesquisa {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-right: 25px;
    margin: 0;
    padding: 0;
}

/* ****************** BOX_INPUT_PESQUISA > I */
.box_input_pesquisa>i {
    position: absolute;
    right: 10px;
}

/* ****************** BOX_PESQUISA_RESULTADOS */
.box_pesquisa_resultados,
.box_pesquisa_resultados_cliente,
.box_pesquisa_resultados_veiculo,
.box_pesquisa_resultados_servico,
.box_pesquisa_resultados_veiculo_marca,
.box_pesquisa_resultados_veiculo_modelo,
.box_pesquisa_resultados_veiculo_combustivel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start;
    z-index: 200;
}

/* ****************** BOX_PESQUISA_RESULTADOS / DIV */
.box_pesquisa_resultados div,
.box_pesquisa_resultados_cliente div,
.box_pesquisa_resultados_veiculo div,
.box_pesquisa_resultados_servico div,
.box_pesquisa_resultados_veiculo_marca div,
.box_pesquisa_resultados_veiculo_modelo div,
.box_pesquisa_resultados_veiculo_combustivel div {
    position: absolute;
    top: 5px;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 5px;
    background-color: var(--color-n7-green);
    z-index: 10px;
}

/* ****************** BOX_PESQUISA_RESULTADOS / A */
.box_pesquisa_resultados a,
.box_pesquisa_resultados_cliente a,
.box_pesquisa_resultados_veiculo a,
.box_pesquisa_resultados_servico a,
.box_pesquisa_resultados_veiculo_marca a,
.box_pesquisa_resultados_veiculo_modelo a,
.box_pesquisa_resultados_veiculo_combustivel a {
    display: block;
    margin: 2px 5px;
    padding: 0 5px 3px 5px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 8px;
    color: var(--color-n7-gray-light);
    background-color: var(--color-n7-black);
}

/* ****************** BOX_PESQUISA_RESULTADOS / A:HOVER */
.box_pesquisa_resultados a:hover,
.box_pesquisa_resultados_cliente a:hover,
.box_pesquisa_resultados_veiculo a:hover,
.box_pesquisa_resultados_servico a:hover,
.box_pesquisa_resultados_veiculo_marca a:hover,
.box_pesquisa_resultados_veiculo_modelo a:hover,
.box_pesquisa_resultados_veiculo_combustivel a:hover {
    color: var(--color-n7-white);
    background-color: var(--color-n7-dark);
}

/* ****************** BOX_PESQUISA_RESULTADOS / P */
.box_pesquisa_resultados p,
.box_pesquisa_resultados_cliente p,
.box_pesquisa_resultados_veiculo p,
.box_pesquisa_resultados_servico p,
.box_pesquisa_resultados_veiculo_marca p,
.box_pesquisa_resultados_veiculo_modelo p,
.box_pesquisa_resultados_veiculo_combustivel p {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 5px 3px 5px;
    color: var(--color-n7-gray-light);
    border-radius: 8px;
    background-color: var(--color-n7-black);
}

/* ****************** BOX_LIMPAR_PESQUISA */
.box_limpar_pesquisa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 10px 0;
}

/* ****************** FORM_CONTAINER_BTN_SUBMIT */
.form_container_btn_submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
}

/* ****************** BTN-SUBMIT */
.btn-submit {
    width: 100%;
    color: var(--color-n7-gray-light);
    background-color: var(--color-n7-middle);
    transition: all 0.18s ease-in-out;
}

/* ****************** BTN-SUBMIT / :HOVER & :FOCUS */
.btn-submit:hover,
.btn-submit:focus {
    color: var(--color-n7-white);
    background-color: var(--color-n7-middle-hover);
}

/* ****************** BTN-SUBMIT > SPAN*/
.btn-submit>span {
    display: inline-block;
    margin-left: 7px;
}

/* ****************** BOX_FORM_CHECK (input type="check/radio} = INLINE)*/
.box_form_check {
    display: flex;
    align-items: center;
    justify-content: start;
    height: 31px;
    margin: 0;
    padding: 3px 0;
}

/* ****************** INPUT - UF / PLACA */
#uf,
#input_placa,
#placa {
    text-transform: uppercase;
}

/* ****************** CONTAINER-AVATAR */
.container-avatar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* ****************** CONTENT-AVATAR */
.content-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    margin: 5px;
    padding: 3px 3px;
    border: 0.5px solid var(--color-n7-gray-middle);
    border-radius: 7px;
}

/* ****************** CONTENT-AVATAR / LABEL */
.content-avatar label {
    display: block;
    margin: 2px auto;
}

/* ****************** CONTENT-AVATAR / LABEL / IMG */
.content-avatar>label>img {
    display: block;
    width: 70px;
    height: 70px;
}

/* ****************** CONTENT-AVATAR / FORM-CHECK-INPUT */
.content-avatar>.form-check-input {
    display: block;
    margin: 10px auto;
}

/* ********************************** FIM - FORM_BODY ********************************** */

/* ********************************** INÍCIO - FORM_FOOTER ***************************** */

/* ****************** FORM-FOOTER */
.form-footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 10px;
    margin: 0;
    padding: 5px 10px;
    background-image: var(--bg-gradient);
}

/* ********************************** FIM - FORM_FOOTER ******************************** */

/* ********************************** FIM - FORM *************************************** */

@media screen and (min-width: 550px) {

    /* ****************** CONTENT-AVATAR */
    .content-avatar {
        width: 110px;
    }
}

@media screen and (min-width: 576px) {

    /* ****************** FORM */
    .form {
        width: 498px;
        border: 0.5px solid var(--color-n7-middle);
        border-radius: 10px;
    }

    /* ****************** FORM-PAINEL */
    .form-painel {
        width: 498px;
        border-left: 0.5px solid var(--color-n7-gray-light);
        border-right: 0.5px solid var(--color-n7-gray-light);
    }

    /* ****************** FORM-HEADER */
    .form .form-header {
        border-radius: 8px 8px 0 0;
    }

    /* ****************** FORM-FOOTER */
    .form .form-footer {
        border-radius: 0 0 8px 8px;
    }

    /* ****************** FORM */
    .form_container_informe_short,
    .form_container_informe_large {
        margin: 10px 0 0 0;
        border: 0.5px solid var(--color-n7-middle);
        border-radius: 10px;
    }

    /* ****************** CONTENT-AVATAR */
    .content-avatar {
        width: 100px;
    }
}

@media screen and (min-width: 768px) {

    /* ****************** BOX-INPUT-FILE-IMG > DIV */
    .box-input-file-img>div {
        width: 458px;
    }
}

@media screen and (min-width: 992px) {

    /* ****************** FORM-FULLSCREEN-LG */
    .form-lg {
        width: 798px;
    }

    /* ****************** FORM_CONTAINER_CEP_BUTTONS */
    #form_container_cep_buttons {
        justify-content: start;
        column-gap: 10px;
    }

    /* ****************** CONTAINER-AVATAR */
    .container-avatar {
        column-gap: 10px;
    }
}

@media screen and (min-width: 1200px) {}