﻿/*##################################################*/
/*##################################################*/
/*# STILI MULTISCHERMO #############################*/
/*##################################################*/
/*# HEAD LOGIN #####################################*/
.login_header { position: fixed; top: 0; left: 0; width: 100%; z-index: 20; background-color: rgba(255,255,255,0.9); backdrop-filter: blur(10px); box-shadow: 0 0 6px rgba(0,0,0,0.3); }
    .login_header .contained { padding-top: 10px; padding-bottom: 10px; }
        .login_header .contained a.logo_link { }
            .login_header .contained a.logo_link img { max-height: 55px; width: auto; }
        .login_header .contained .hook { }
            .login_header .contained .hook p { }
                .login_header .contained .hook p span { margin-right: 10px; }
                .login_header .contained .hook p a { min-width: 200px; }
div.iw3_burgermenu_btn{ display: none !important; }
/*##################################################*/
/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/*/
/*##################################################*/
/*# HEAD PRINCIPALE ################################*/
.main_header { position: fixed; top: 0; left: 0; height: 90px; width: 100%; z-index: 20; box-shadow: 0 0 6px rgba(0,0,0,0.3); padding: 0 20px ; }
.head ul li { -webkit-appearance: none; appearance: none; list-style-type: none; }
.main_header .head.contained { position: relative; }
/*Sottomenu*/
.main_header .head_voices li { position: relative; }
    .main_header .head_voices li .submenu { display: block; position: absolute; bottom: -30px; left: 50%; transform: translate(-50%,100%); background-color: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.25); border-radius: 0 0 6px 6px; border-top: solid 1px #ccc; font-size: 15px; min-width: 350px; z-index: -1; overflow-y: auto; height: 0; opacity: 0; max-height: 85vh; }
        .main_header .head_voices li .submenu.open-submenu-active { height: auto; opacity: 1; }
        .main_header .head_voices li .submenu .submenu_title { display: block; width: 100%; padding: 15px 20px; font-size: 20px; text-transform: uppercase; font-weight: bold; text-align: center; }

        /*overlay per */
        .main_header .head_voices li .submenu.open-submenu-active .open-submenu.outer_close_overlay { display: block; position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; z-index: -1; background-color: aqua; }
        /*Voce singola*/
        .main_header .head_voices li .submenu a { width: 100%; padding: 15px 20px; border-bottom: solid 1px #ccc; font-weight: bold; }
            .main_header .head_voices li .submenu a span { flex: 0 1 90%; }
            .main_header .head_voices li .submenu a .star, .main_header .head_voices li .submenu a .cta_hint { flex: 0 1 5%; }
        /*Freccia indicatrice sopra il sottomenu*/
        .main_header .head_voices li .submenu img.voice_pointer { height: 10px; position: absolute; top: 0; left: 50%; transform: translate(-50%,-100%); filter: brightness(0.5); }
        /*Freccia singola voce menu*/
        .main_header .head_voices li .submenu a .cta_hint { display: block; }
            .main_header .head_voices li .submenu a .cta_hint img { display: block; filter: brightness(0.5); max-width: 8px; margin: auto; }
        .main_header .head_voices li .submenu a:hover .cta_hint img { filter: brightness(0.25); transform: translateX(5px); }
        /*Stella preferiti*/
        .main_header .head_voices li .submenu a .star img { height: 15px; filter: grayscale(1); }
        .main_header .head_voices li .submenu a .star:hover img, .main_header .head_voices li .submenu a.preferito_sel .star img { filter: grayscale(0); }
        .main_header .head_voices li .submenu a.preferito_sel:hover .star img { filter: grayscale(0.5); }
    /*Variabile di posizione per Alert*/
    .main_header .head_voices li.alert_container .submenu { left: unset; right: 0; transform: translate(0,100%); }
        .main_header .head_voices li.alert_container .submenu img.voice_pointer { left: unset; right: 0; transform: translate(-150%,-100%); }
    /*Voce Singola - Alert*/
    .main_header .head_voices li .submenu .alert_item { font-weight: initial; }
        .main_header .head_voices li .submenu .alert_item .alert_content { flex: 0 1 90%; }
            .main_header .head_voices li .submenu .alert_item .alert_content .tag { padding: 5px; border-radius: 6px; background-color: rgba(66,74,93,0.7); margin-right: 5px; }
                .main_header .head_voices li .submenu .alert_item .alert_content .tag span { }
            .main_header .head_voices li .submenu .alert_item .alert_content .data_pubbl span { }
            .main_header .head_voices li .submenu .alert_item .alert_content .data_pubbl span { }
            .main_header .head_voices li .submenu .alert_item .alert_content b { }
            .main_header .head_voices li .submenu .alert_item .alert_content span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
        .main_header .head_voices li .submenu .alert_item .cta_hint { flex: 0 1 5%; }
            .main_header .head_voices li .submenu .alert_item .cta_hint .alert_dot { width: 10px; aspect-ratio: 1/1; background-color: #e2001a; border-radius: 50%; }
        .main_header .head_voices li .submenu .alert_item:hover .cta_hint { transform: translateX(5px); }
/**/
/*Logo*/
.main_header .logo_container { flex: 1; height: 100%; }
.main_header .logo_link { }
    .main_header .logo_link img { max-height: 55px; width: auto; }
    .main_header .logo_container .logo_link { display: block; height: inherit;  margin-right: 20px; padding-right: 20px; }
    .rightborder{ border-right: solid #ccc 1px; }
.main_header .logo_dealer { height: 75px; width: 163px; }
    .main_header .logo_dealer img { height: 100%; }
/**/
.main_header .head_voices { /*padding-left: 40px;*/ max-width: 850px; }
    /*Voci principali*/
    .main_header .head_voices .main_voice { padding: 0 20px; text-transform: uppercase; cursor: pointer; }
        .main_header .head_voices .main_voice b { font-size: 20px; }
        .main_header .head_voices .main_voice:hover b { text-decoration: underline; }
    /*Account*/
    .main_header .head_voices .account_voice { position: relative; padding: 0 20px; border-right: solid 1px #ddd; border-left: solid 1px #ddd; cursor: pointer; }
        .main_header .head_voices .account_voice .image { position: relative; border-radius: 50%; overflow: hidden; aspect-ratio: 1/1; margin-right: 8px; width: 50px; }
            .main_header .head_voices .account_voice .image img { }
        .main_header .head_voices .account_voice .open_menu { display: none; position: absolute; bottom: 0; left: 0; transform: translate(135%,50%); opacity: 0; }
        .main_header .head_voices .account_voice:hover .open_menu { opacity: 1; }
        .main_header .head_voices .account_voice .image:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 88%; aspect-ratio: 1/1; border-radius: 50%; border: solid 3px rgba(0,0,0,0); }
        .main_header .head_voices .account_voice:hover .image:after { border-color: rgba(0,0,0,1); }
        .main_header .head_voices .account_voice .copy { max-width: 400px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
        .main_header .head_voices .account_voice .copy { line-height: 50px; max-width: 250px; }
            .main_header .head_voices .account_voice .copy b { text-transform:capitalize }
            .main_header .head_voices .account_voice .copy span { }
            .main_header .head_voices .account_voice .copy .indirizzo { }
    /*Variazione per submenu*/
    .main_header .head_voices li .submenu.account_submenu { transform: translate(-60%,100%); }
    /*Dati account nel submenu*/
    .main_header .head_voices li .submenu .info_utente { width: 100%; padding: 15px 20px; border-bottom: solid 1px #ccc; }
        .main_header .head_voices li .submenu .info_utente p { }
            .main_header .head_voices li .submenu .info_utente p span { }
            .main_header .head_voices li .submenu .info_utente p b { text-transform:capitalize}
    /**/
    /*Alert*/
    .main_header .head_voices .alert { position: relative; padding: 0 20px; cursor: pointer; width: 50px; aspect-ratio: 1/1; }
        .main_header .head_voices .alert .open_menu { display: none; position: absolute; bottom: 0; left: 0; transform: translate(140%,80%); opacity: 0; width: 100%; }
        .main_header .head_voices .alert:hover .open_menu { opacity: 1; }
        .main_header .head_voices .alert .image { position: relative; border-radius: 50%; overflow: hidden; aspect-ratio: 1/1; width: 50px; }
            .main_header .head_voices .alert .image:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 88%; aspect-ratio: 1/1; border-radius: 50%; border: solid 3px rgba(0,0,0,0); }
            .main_header .head_voices .alert .image:hover:after { border-color: rgba(0,0,0,1); }
            .main_header .head_voices .alert .image img { width: 100%; height: auto; }
        .main_header .head_voices .alert p { display: block; position: absolute; top: 0; right: 0; border-radius: 50%; overflow: hidden; transform: translateX(50%); aspect-ratio: 1/1; height: 25px; }
            .main_header .head_voices .alert p b { }
        .main_header .head_voices .submenu .star, .menu-item {
            cursor: pointer;
        }
/*##################################################*/
/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/*/
/*##################################################*/
/*# POPUP ALERT ####################################*/
.popup_alert_container { position: absolute; top: 100px; right: 0; max-height: 85vh; overflow-y: auto; }
    .popup_alert_container .alert_item { padding: 10px; box-shadow: 0 0 6px rgba(0,0,0,0.25); max-width: 300px; margin-bottom: 10px; display: none; }

        .popup_alert_container .alert_item.alert_visible { display: flex; }
        .popup_alert_container .alert_item .alert_content { flex: 0 1 90%; width: 90%; }
            .popup_alert_container .alert_item .alert_content .tag { padding: 5px; border-radius: 6px; background-color: rgba(66,74,93,0.7); margin-right: 5px; }
                .popup_alert_container .alert_item .alert_content .tag span { }
            .popup_alert_container .alert_item .alert_content .data_pubbl span { }
            .popup_alert_container .alert_item .alert_content .data_pubbl span { }
            .popup_alert_container .alert_item .alert_content b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
            .popup_alert_container .alert_item .alert_content span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
        .popup_alert_container .alert_item .cta_close { flex: 0 1 5%; }
            .popup_alert_container .alert_item .cta_close img { width: 10px; aspect-ratio: 1/1; }
        .popup_alert_container .alert_item:hover .cta_close { transform: translateX(5px); }
.d_flx .flx_itm { padding: 10px; }
/*##################################################*/

/*##################################################*/
/*- STILI ESCLUSIVI GRANDI SCHERMI -----------------*/
@media (min-width: 1281px) {
    /*##################################################*/
    .login_header .contained .hook p { justify-content: flex-end; }
    /*##################################################*/
}
/*##################################################*/
/*- STILI SCHERMI MEDI --------------------------*/
@media (min-width: 1025px) and (max-width: 1280px) {
    /*##################################################*/
    .login_header .contained .hook p { justify-content: flex-end; }
    /*##################################################*/
    /*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/*/
    /*##################################################*/
    /*# HEAD PRINCIPALE ################################*/
    .main_header{ height:80px}
    .main_header .logo_link { flex: 0 1 54%; }
    .main_header .logo_link img { width: 100%; }
    .main_header .head_voices { flex: 0 1 80%; padding-left: 40px; }
    .main_header .head_voices .main_voice b { font-size: 16px; }
    .main_header .head_voices li .submenu{font-size:14px}
    .main_header .head_voices li .submenu .submenu_title{font-size:16px; padding:10px 20px}
        .main_header .head_voices .main_voice, .main_header .head_voices .account_voice, .main_header .head_voices .alert { padding: 0 10px; }
            .main_header .head_voices .account_voice .copy { max-width: 110px; }
            /*##################################################*/
            .main_header .head_voices .account_voice .open_menu { transform: translate(100%,70%); }
            .main_header .head_voices .alert .open_menu { transform: translate(100%,80%); }
            .main_header .head_voices .alert .image { }
            .main_header .head_voices .account_voice .copy { line-height: inherit;}
    /*##################################################*/
}
/*##################################################*/
/*- STILI PICCOLI SCHERMI --------------------------*/
@media (min-width: 769px) and (max-width: 1024px) {
    /*##################################################*/
    .login_header .contained .hook p { justify-content: flex-end; }
    /*##################################################*/
    /*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/*/
    /*##################################################*/
    /*# HEAD PRINCIPALE ################################*/
    .main_header .logo_link { flex: 0 1 100%; }
    .main_header .logo_link img { width: 100%; }
    .main_header .head_voices { flex: 0 1 80%; padding-left: 20px; }
    .main_header .head_voices li .submenu{font-size:14px}
    .main_header .head_voices li .submenu .submenu_title{font-size:16px; padding:10px 20px}
        .main_header .head_voices .main_voice, .main_header .head_voices .account_voice, .main_header .head_voices .alert { padding: 0 5px; }
            .main_header .head_voices .account_voice .copy { max-width: 100px; }
            /*##################################################*/
            .main_header .head_voices .account_voice .open_menu { transform: translate(100%,70%); }
            .main_header .head_voices .alert .open_menu { transform: translate(100%,80%); }
            .main_header .head_voices .alert .image { }
            .main_header .head_voices .account_voice .copy { line-height: inherit;}
    /*##################################################*/
}
/*##################################################*/
/*- STILI TABLET -----------------------------------*/
@media (min-width: 481px) and (max-width: 768px) {
    /*##################################################*/
    .login_header .contained .hook p { justify-content: flex-end; }
    /*##################################################*/
    /*##################################################*/
    /*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/*/
    /*##################################################*/
    /*# HEAD PRINCIPALE ################################*/
    .main_header .logo_link { flex: 0 1 100%; }
    .main_header .logo_link img { width: 100%; }
    .main_header .head_voices { flex: 0 1 80%; padding-left: 40px; }
        .main_header .head_voices .main_voice, .main_header .head_voices .account_voice, .main_header .head_voices .alert { padding: 0 5px; }
            .main_header .head_voices .main_voice b { font-size: 15px; }
            .main_header .head_voices .account_voice .copy { max-width: 100px; }
            .main_header .head_voices li .submenu{font-size:14px}
            .main_header .head_voices li .submenu .submenu_title{font-size:16px; padding:10px 20px}
            /*##################################################*/
            .main_header .head_voices .account_voice .open_menu { transform: translate(100%,70%); }
            .main_header .head_voices .alert .open_menu { transform: translate(100%,80%); }
            .main_header .head_voices .alert .image { }
            .main_header .head_voices .account_voice .copy { line-height: inherit;}
    /*##################################################*/
}
/*##################################################*/
/*- STILI MOBILE -----------------------------------*/
@media (max-width: 480px) {
    /*##################################################*/
    /*# HEAD LOGIN #####################################*/
    .login_header .contained .hook p { justify-content: center; }
}
