/*##################################################*/
/*# STILI MULTISCHERMO #############################*/
/*##################################################*/

form.bkg_clr_bw_fff { box-sizing: border-box; padding: 20px 0; }
form.bkg_clr_col_01 { box-sizing: border-box; padding: 20px 0; background-repeat: no-repeat; background-position: top left; background-size: 40%; }
    form.bkg_clr_col_01 .contained .d_flx input.button-style01.custom-button01:hover { background-color: rgba(255,255,255,.9); color: #CD0402; }
form.bkg_clr_gry_03 { box-sizing: border-box; padding: 20px 0; background-image: url('../img/Logo_Bkg_Wht.png'); background-repeat: no-repeat; background-position: top left; background-size: 40%; }
/*Titolo Form*/
form .form_title { }
    form .form_title b { display: block; position: relative; }
    form .form_title span { display: block; position: relative; }
/*---------------------------*/
/*Stili form*/
form .form_section { box-sizing: border-box; margin-bottom: 20px; }
    form .form_section h4 { font-weight: lighter; margin: 10px 0; }
    form .form_section .d_flx { }
        form .form_section .d_flx input, form .form_section .d_flx select { margin: .5% 0; min-width: unset; }
form textarea { margin: auto; width: 100%; min-height: 100px; box-sizing: border-box; padding: 10px; }
/*Stili Form Rosso e Grigio*/
form.bkg_clr_col_01 .form_section .d_flx input, form.bkg_clr_col_01 .form_section .d_flx select, form.bkg_clr_col_01 textarea, form.bkg_clr_gry_03 .form_section .d_flx input, form.bkg_clr_gry_03 .form_section .d_flx select, form.bkg_clr_gry_03 textarea { border-color: #fff; background-color: rgba(255,255,255,.3); color: #fff; }
    form.bkg_clr_col_01 .form_section .d_flx select option, form.bkg_clr_gry_03 .form_section .d_flx select option { appearance: none; -moz-appearance: none; -webkit-appearance: none; color: #222; }
    form.bkg_clr_col_01 .form_section .d_flx input::placeholder, form.bkg_clr_col_01 .form_section .d_flx select::placeholder, form.bkg_clr_col_01 textarea::placeholder, form.bkg_clr_gry_03 .form_section .d_flx input::placeholder, form.bkg_clr_gry_03 .form_section .d_flx select::placeholder, form.bkg_clr_gry_03 textarea::placeholder { color: #fff; }
/*Stili Form Rosso*/
form.bkg_clr_col_01 .contained .d_flx .custom-button01:hover { background-color: #fff !important; color: #CD0402 !important; box-shadow: 0 3px 8px rgba(0,0,0,.5) !important; }
.bkg_clr_col_01 input[type=date]::-webkit-calendar-picker-indicator { background-image: none; backgrDound-image: url('../img/icone/calendar_today_white_24dp.svg'); }
/*Stili Form Grigio*/
form.bkg_clr_gry_03 .contained .form_section { margin-bottom: 0; }
form.bkg_clr_gry_03 .contained .d_flx input, form.bkg_clr_gry_03 .contained .d_flx span, form.bkg_clr_gry_03 .contained .d_flx select { margin: 10px 5px; }
/*---------------------------*/
/*Stili Form Auto*/
.form_auto { margin: 20px auto; position: sticky; top: 100px; border-radius: 20px; overflow: hidden; }
    .form_auto form { max-height: 70vh; overflow: auto; }
/**/
#permuta_trigger { margin-bottom: 15px; }
    #permuta_trigger span { }
    #permuta_trigger a { padding: 8px; margin: auto 10px; }
/**/
a#prenotazione_veicolo_trigger, a#acquisto_veicolo_trigger { display: block; position: relative; margin: 10px auto; }
    a#prenotazione_veicolo_trigger span { vertical-align: middle; }
    a#prenotazione_veicolo_trigger:hover span.material-icons { transform: translateY(-2px); }
#prenotazione_veicolo_content { margin-bottom: 20px; }
    #prenotazione_veicolo_content p { max-width: 900px; text-align: center; margin: auto; }
    #prenotazione_veicolo_content > div { width: auto; position: relative; margin: auto; }
        #prenotazione_veicolo_content > div > div { cursor: pointer; margin: 10px; background-color: #FFC439; padding: 8px; border-radius: 8px; }
    #prenotazione_veicolo_content input { appearance: unset; aspect-ratio: 1/1; width: 20px; vertical-align: middle; background-color: #fff; cursor: pointer; background-image: url('../img/Icone/Check_Wht.svg'); background-position: center; background-size: 70%; background-repeat: no-repeat; cursor: pointer !important; }
        #prenotazione_veicolo_content input:checked { background-color: #179BD7; border-color: #179BD7; border-radius: 50%; }
    #prenotazione_veicolo_content label { vertical-align: middle; cursor: pointer !important; }
        #prenotazione_veicolo_content label img { vertical-align: middle; width: auto; min-height: 45px; }
/**/
#loginUtente { padding: 15px 0 20px 0; }
    #loginUtente .contained .form_section .d_flx { margin-top: 15px; }
        #loginUtente .contained .form_section .d_flx input[type=text], #loginUtente .contained .form_section .d_flx input[type=password] { background-color: rgba(255,255,255,.35); }
/*---------------------------*/
/*- Form richiesta auto / Servizi / Contatti-----*/
#richiediAutoForm, #form_service, .contatti_generici { margin-bottom: 60px; border-radius: 20px; }
    #form_service .form_section, .contatti_generici .form_section { display: block; padding: 20px 20px 0 20px; }
/*---------------------------*/
/*- Form Service --------------------------*/
.inserimento_targa { margin-bottom: 20px; }
    .inserimento_targa input { font-size: 2rem; text-align: center; border-top: solid 1px #fe0210; border-bottom: solid 1px #fe0210; margin: 20px auto 10px auto; width: 90%; max-width: 500px; }
/*---------------------------*/
/*Stili Form Noleggio*/
.rent_opts { }
    .rent_opts .d_flx { }
        .rent_opts .d_flx .flx_itm { margin: 10px 0; padding: 10px 0; border-radius: 6px; border-bottom: solid 1px rgba(255,255,255,0); }
            .rent_opts .d_flx .flx_itm:hover { background-color: rgba(255,255,255,.3); border-block-color: rgba(255,255,255,1); }
            .rent_opts .d_flx .flx_itm input { flex: 10%; cursor: pointer; }
            .rent_opts .d_flx .flx_itm label { flex: 86%; }
                .rent_opts .d_flx .flx_itm label span { display: block; }
/*Sezione scelta noleggio*/
.form_section.scelta_opzioni { }
    .form_section.scelta_opzioni .flx_itm { }
        .form_section.scelta_opzioni .flx_itm input { display: none; }

        .form_section.scelta_opzioni .flx_itm label { }
        .form_section.scelta_opzioni .flx_itm span { }
/**/
/*---------------------------*/
/*Calcolo Finanziamento*/
#calcolo_finanziamento { background-color: #fff; padding: 20px; box-sizing: border-box; border-radius: 20px; margin-bottom: 20px; }
    #calcolo_finanziamento strong { display: block; position: relative; margin: auto; }
    /**/
    #calcolo_finanziamento .d_flx#selettori { margin: 20px auto; }
        #calcolo_finanziamento .d_flx#selettori .d_flx { }
            #calcolo_finanziamento .d_flx#selettori .d_flx .flx_itm { padding: 6px; border: solid 1px #aaa; flex: 1 0 0; text-align: center; font-weight: 700; cursor: pointer; }
                #calcolo_finanziamento .d_flx#selettori .d_flx .flx_itm:hover { box-shadow: 0 2px 6px rgba(0,0,0,.25); }
                #calcolo_finanziamento .d_flx#selettori .d_flx .flx_itm.active { color: #fff; background-color: #cd0402; }
                #calcolo_finanziamento .d_flx#selettori .d_flx .flx_itm strong { display: block; position: relative; margin: auto; }
                #calcolo_finanziamento .d_flx#selettori .d_flx .flx_itm #range_selector { }
                    #calcolo_finanziamento .d_flx#selettori .d_flx .flx_itm #range_selector .flx_itm { }

    /**/
    #calcolo_finanziamento .d_flx#risultati_rata { }
        #calcolo_finanziamento .d_flx#risultati_rata .flx_itm { margin: 0 1%; }
            #calcolo_finanziamento .d_flx#risultati_rata .flx_itm strong { }
                #calcolo_finanziamento .d_flx#risultati_rata .flx_itm strong.font_sz_var_05 { font-weight: 200; }
            #calcolo_finanziamento .d_flx#risultati_rata .flx_itm:first-child strong.font_sz_var_05 { font-weight: 700; }
    /**/
    #calcolo_finanziamento #rata_disclaimer_trigger { display: block; position: relative; margin: 20px auto 5px auto; }
        #calcolo_finanziamento #rata_disclaimer_trigger span { vertical-align: middle; border-bottom: solid 1px #fff; }
        #calcolo_finanziamento #rata_disclaimer_trigger:hover span:nth-child(2) { border-bottom-color: #ccc; }
    #calcolo_finanziamento #rata_disclaimer_content { display: none; }
/*---------------------------*/
/*Checkboxes*/
.checkboxes { margin: 2% auto; }
    .checkboxes .checkbox_itm { margin: 0 1%; }
        .checkboxes .checkbox_itm input { flex: 0; }
        .checkboxes .checkbox_itm label { flex: 86%; }
            .checkboxes .checkbox_itm label a { text-decoration: underline; }
/*---------------------------*/
/*Login Form*/
#login_form { padding: 140px 0; }
form#login_form .contained .form_section .d_flx .flx_itm, form#login_form .contained a { margin: 1%; display: block; }
    form#login_form .contained a:hover { color: #CD0402; }
/*---------------------------*/
/*ReCaptcha -----------------*/
.g-recaptcha { margin: 15px auto; }
    .g-recaptcha div { margin: auto; }
/*---------------------------*/
/*Caricamento CV ---------------------------*/
#lavoraconnoi_form_content { }
.file-drop-area input { display: none; }
.file-drop-area .btn_01 { width: 100%; }
/*---------------------------*/
.close-form { position: absolute; top: 20px; right: 20px; cursor: pointer; }


/*##################################################*/
/*- STILI ESCLUSIVI GRANDI SCHERMI -----------------*/
@media (min-width: 1281px) {
    /*##############################################*/
}
/*##################################################*/
/*- STILI SCHERMI MEDI --------------------------*/
@media (min-width: 1025px) and (max-width: 1280px) {
    /*##################################################*/
}
/*##################################################*/
/*- STILI PICCOLI SCHERMI --------------------------*/
@media (min-width: 769px) and (max-width: 1024px) {
    /*##############################################*/
}
/*##################################################*/
/*- STILI TABLET -----------------------------------*/
@media (min-width: 481px) and (max-width: 768px) {
    /*##############################################*/
    .checkboxes .checkbox_itm { flex: 0 1 48%; }

    form.bkg_clr_gry_03 .contained .d_flx input, form.bkg_clr_gry_03 .contained .d_flx select, form.bkg_clr_gry_03 .contained .d_flx span, form.bkg_clr_col_01 .contained .d_flx input, form.bkg_clr_col_01 .contained .d_flx select, form.bkg_clr_col_01 .contained .d_flx span { flex: 1; margin: 1%; }
    /**/
    .form_auto form { max-height: unset; overflow: unset; }
}

/*##################################################*/
/*- STILI MOBILE -----------------------------------*/
@media (max-width: 480px) {
    /*##############################################*/
    .checkboxes { justify-content: flex-start !important; }
    /**/
    form .form_section .d_flx input, form .form_section .d_flx select { flex: 1 1 100% !important; margin: 1%; }
    /*Stili Form Noleggio*/
    .rent_opts .d_flx .flx_itm { flex: 0 1 48%; }
        .rent_opts .d_flx .flx_itm input { flex: 0 1 10% !important; }
        .rent_opts .d_flx .flx_itm label { flex: 0 1 86% !important; }
    /*Sezione scelta noleggio*/
    .form_section.scelta_opzioni { }
        .form_section.scelta_opzioni .flx_itm { margin: 15px auto; }
    /*---------------------------*/
    /*Stili Form Auto*/
    #loginUtenteBtn { display: block; }
        #loginUtenteBtn img, #loginUtenteBtn span { display: block; flex: 1 1 100%; margin: auto; }
        #loginUtenteBtn img, #prenotazione_veicolo_content label img { min-height: 45px; width: auto; }
    /*---------------------------*/
    /*---------------------------*/
    .checkboxes .checkbox_itm { margin: 15px 1%; }
    /*---------------------------*/
    /*Calcolo Finanziamento*/
    #calcolo_finanziamento .d_flx#selettori .flx_itm { margin: 8px auto; }
        #calcolo_finanziamento .d_flx#selettori .flx_itm #anticipo_selector, #calcolo_finanziamento .d_flx#selettori .flx_itm #durata_selector { justify-content: flex-start; }
    #calcolo_finanziamento strong { margin-bottom: 5px; }
    #calcolo_finanziamento .d_flx#selettori .d_flx .flx_itm { flex: 0 1 calc(100%/3); margin: 0; }
    #calcolo_finanziamento .d_flx#risultati_rata .flx_itm { flex: 0 1 calc(100%/2); box-sizing: border-box; margin: 0; }
    #calcolo_finanziamento .d_flx#risultati_rata { justify-content: flex-start; }
    /**/
    .form_auto form { max-height: unset; overflow: unset; }
}