/* Fonts */
@font-face {
    font-family: 'ds-digitalbold';
    src: url('../fonts/ds-digib-webfont.woff2') format('woff2'),
         url('../fonts/ds-digib-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700');

#average_text, #average_fuel, #unita_fuel, .fuels_buttons button, .charts_buttons button span, #average_price .average_price_euro { font-family: 'alvregular', sans-serif; }

/* Wrapper */
#region-content_top { margin-bottom: 30px; }

/* Widget Carburanti */
#block-mise-mise-widget-prezzo-carburante { margin: 30px 0; position: relative; }

#block-mise-mise-widget-prezzo-carburante h2 { border-bottom: 15px solid currentColor; color: #C00C00; font-family: 'alvregular', sans-serif; font-size: 47px; line-height: 1; margin-bottom: 20px; padding-right: 150px; text-transform: uppercase; }

#widget_mise_data_api { font-size: 12px; position: absolute; right: 0; top: -96px; }

#fuel_widget { position: relative; }


#fuel_widget.bg_benzina #fuel_widget_left { background-color: #E1F0E4; }
#fuel_widget.bg_benzina #average_price, #fuel_widget.bg_benzina #average_price .average_price_euro { color: #1A9236; }

#fuel_widget.bg_gasolio #fuel_widget_left { background-color: #E6EBF4; }
#fuel_widget.bg_gasolio #average_price, #fuel_widget.bg_gasolio #average_price .average_price_euro { color: #2657A8; }

#fuel_widget.bg_gpl #fuel_widget_left { background-color: #FBEEE4; }
#fuel_widget.bg_gpl #average_price, #fuel_widget.bg_gpl #average_price .average_price_euro { color: #E46E15; }

#fuel_widget.bg_metano #fuel_widget_left { background-color: #E7F1FA; }
#fuel_widget.bg_metano #average_price, #fuel_widget.bg_metano #average_price .average_price_euro { color: #3690D7; }

/* Pulsanti */
.fuels_buttons, .charts_buttons { display: flex; }
.fuels_buttons button, .charts_buttons button { -webkit-appearance: none; background-color: transparent; border: none; flex: 0 1 auto; font-size: 14px; transition: all 250ms; text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
.fuels_buttons button:hover, .charts_buttons button:hover { cursor: pointer; }
.fuels_buttons button:disabled:hover, .charts_buttons button:disabled:hover { cursor: not-allowed; }

.fuels_buttons { align-items: center; column-gap: 20px; display: none; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; row-gap: 20px; }
.fuels_buttons button { background-color: #404040; color: white; flex: 1 0 0%; letter-spacing: 0.5px; max-width: 100%; padding: 5px; width: 100%; }

button[data-fuel="benzina"] { background-color: #E1F0E4; color: #1A9236; }
button[data-fuel="gasolio"] { background-color: #E6EBF4; color: #2657A8; }
button[data-fuel="gpl"] { background-color: #FBEEE4; color: #E46E15; }
button[data-fuel="metano"] { background-color: #E7F1FA; color: #3690D7; }

button[data-fuel="benzina"]:hover, button[data-fuel="benzina"]:disabled { background-color: #1A9236; color: white; }
button[data-fuel="gasolio"]:hover, button[data-fuel="gasolio"]:disabled { background-color: #2657A8; color: white; }
button[data-fuel="gpl"]:hover, button[data-fuel="gpl"]:disabled { background-color: #E46E15; color: white; }
button[data-fuel="metano"]:hover, button[data-fuel="metano"]:disabled { background-color: #3690D7; color: white; }

.charts_buttons { gap: 24px; display: flex; margin-top: 30px; }
.charts_buttons button { align-items: center; background-color: #FAF8F8; color: #8D8D8D; display: inline-flex; flex: 1 0 0%; max-width: 100%; position: relative; width: 100%; }
.charts_buttons button:hover, .charts_buttons button:disabled { border-color: #C5120A; border-bottom-color: white; }
.charts_buttons button:disabled { z-index: 2; }
.charts_buttons button span.chart_button_icon { align-items: center; background-color: #8D8D8D; display: inline-flex; height: 40px; justify-content: center; width: 40px; }
.charts_buttons button span.chart_button_title { flex: 1 1 auto; letter-spacing: 0.5px; min-width: 0; padding: 4px; width: 1%; }
.charts_buttons button span.chart_button_icon, .charts_buttons button span.chart_button_title { transition: all 250ms; }
.charts_buttons button svg { height: auto; width: 20px; }
.charts_buttons button:hover span.chart_button_icon, .charts_buttons button:disabled span.chart_button_icon { background-color: #C00C00; }
.charts_buttons button:hover span.chart_button_title, .charts_buttons button:disabled span.chart_button_title { color: #C00C00; }

/* Left */
#fuel_widget_left { padding: 15px; position: relative; }

svg#italy { height: auto; width: 100%; }
svg#italy path:hover { cursor: pointer; fill: #3C3C3C; }
svg#italy g { stroke: #6E6E6E; stroke-width: 0.4px; }

#average_price { font-size: 38px; font-family: 'ds-digitalbold' !important; }
#average_price .average_price_euro { font-size: 21px; }

/* Right */
#fuel_widget_right { display: flex; flex-direction: column; }
#trend_chart_wrapper { flex: 1 0 auto; }
#fuel_widget_right canvas { height: 100%; }
[data-chart-element="chart-brand"] { display: none; }

/* Average */
#average_fuel_price { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; }
#average_fuel { text-transform: lowercase; }

#average_text { flex: 1 1 auto; font-size: 16px; font-weight: 500; line-height: 1; min-width: 0; width: 1%; }

#telephone-button {
    display: block;
    position: absolute;
    top: 50%;
    padding: 5px 10px;
    margin: 3px 0;
    border-radius: 5px;
    font-size: 14px;
    line-height: 14px;
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
    transform: translateY(-50%);
    color: #fff;
    background-color: #c00;
}

@media screen and (max-width: 560px) {
    .charts_buttons { flex-wrap: wrap; }
    .charts_buttons button { flex: 0 1 100%; }
}

@media screen and (max-width: 640px) {
    #block-mise-mise-widget-prezzo-carburante h2 { border-bottom-width: 10px; font-size: 3em; }
    #widget_mise_data_api { top: -27px; }
}

@media screen and (max-width: 719px) {
    #fuel_widget_right { margin-top: 30px; }

    #trend_chart_wrapper { height: 320px; }
}

@media screen and (min-width: 720px) {
    /* Grid */
    #fuel_widget { column-gap: 15px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }

    /* Pulsanti */
    .fuels_buttons button { padding: 4px; }

    /* Italia */
    #fuel_widget_left { grid-column: 1 / 6; }

    /* Chart */
    #fuel_widget_right { grid-column: 6 / 13; }
}

/* Tooltip */
@keyframes tooltipAnim {
    from { margin-top: -5px; opacity: 0; visibility: hidden; }
    to { margin-top: 0; opacity: 1; visibility: visible; }
}

.tooltip { animation: tooltipAnim 250ms 1; animation-fill-mode: backwards; background-color: rgba(0, 0, 0, 0.7); border-radius: 4px; border-radius: 3px; color: white; font-family: "Oswald"; font-size: 12px; margin-top: 0; max-width: 120px; opacity: 1; padding: 6px; visibility: visible; }

.tooltip::after { border-bottom: 5px solid transparent; border-right: 5px solid rgba(0, 0, 0, 076); border-top: 5px solid transparent; content: ''; height: 0; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); width: 0; }

/* Loading */
#loading_data_regioni { align-items: center; background-color: #E1F0E4; display: flex; inset: 65px 0 0 0; justify-content: center; position: absolute; z-index: 1; }
#loading_data_regioni .lds-ripple { display: inline-block; height: 80px; position: relative; width: 80px; }
#loading_data_regioni .lds-ripple div { animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; border: 4px solid #157935; border-radius: 50%; opacity: 1; position: absolute; }
#loading_data_regioni .lds-ripple div:nth-child(2) { animation-delay: -0.5s; }


/* Gestore */
/* Grid */
.fuel_widget_operator_grid { margin-top: 20px; }

/* Info */
.fuel_widget_operator_title { font-family: alvregular, sans-serif; font-size: 30px; font-weight: 900; margin-bottom: 20px; text-transform: uppercase; }

#fuel_widget_operator_info { margin-bottom: 15px; }

.fuel_widget_operator_logo { height: 150px; width: 150px; }

.fuel_widget_operator_address { display: grid; font-size: 14px; }
.fwoa_row { align-items: center; column-gap: 30px; display: flex; padding-bottom: 5px; }
.fwoa_row_label { flex: 0 0 110px; font-weight: 300; width: 110px; }
.fwoa_row_data { flex: 0 1 auto; font-weight: 700; min-height: 25px; position: relative; }

/* Mappa del gestore */
#fuel_widget_operator_map { margin: 20px 0; }

/* Prezzi comunicati dal gestore */
.fuel_widget_prices_communicated_title { font-family: "Oswald", sans-serif !important; font-size: 30px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; text-transform: uppercase; }

.fuel_widget_prices_communicated_title span { display: block; font-family: "Oswald", sans-serif !important; font-size: 22px; font-weight: 300; }

.fuel_widget_prices_communicated_table { margin-bottom: 20px; }

.fuel_widget_prices_communicated_table table { border-collapse: collapse; width: 100%; }

.fuel_widget_prices_communicated_table table, .fuel_widget_prices_communicated_table table * { font-family: "Oswald", sans-serif; }

.fuel_widget_prices_communicated_table table thead th { font-weight: 700; padding-bottom: 10px; text-transform: uppercase; }

.fuel_widget_prices_communicated_table table thead th, .fuel_widget_prices_communicated_table table tbody td { text-align: center; }

.fuel_widget_prices_communicated_table table thead th, .fuel_widget_prices_communicated_table table tbody td { border-right: 1px solid lightgray; }

.fuel_widget_prices_communicated_table table thead th:last-of-type, .fuel_widget_prices_communicated_table table tbody td:last-of-type { border-right: none; }

/* Prima colonna */
.fuel_widget_prices_communicated_table table thead th:first-of-type, .fuel_widget_prices_communicated_table table tbody td:first-of-type { text-align: left; }

.fuel_widget_prices_communicated_table table tbody td:first-of-type { font-weight: 500; }

.wrapper-prezzo-cifre { color: #C00C00; font-family: 'ds-digitalbold' !important; }
.wrapper-prezzo-cifre span { color: #C00C00; font-family: 'ds-digitalbold' !important; display: inline-block; }

.wrapper-prezzo-cifre span:last-of-type { font-size: 32px; position: relative; text-align: left; top: -17px; }

.wrapper-prezzo-cifre-small span { font-size: 22px; width: 10px; text-align: right; }
.wrapper-prezzo-cifre-big span { font-size: 50px; width: 25px; text-align: right; }

/* Seconda colonna */
.fwpct_price { color: #C00C00; display: inline-block; font-family: 'ds-digitalbold' !important; font-size: 30px; text-align: right; width: 70px; }
.fwpct_currency { display: inline-block; font-size: 14px; margin-left: 6px; text-align: left; width: 30px; }

/* Terza colonna */
.fuel_widget_prices_communicated_table table tbody td:last-of-type { font-weight: 300; text-align: center; }

/* Grafico (larghezza piena) */
#fuel_widget_full_graph { display: flex; flex-direction: column; margin-bottom: 20px; width: 100%; }
#trend_chart_wrapper { flex: 1 0 auto; }
#fuel_widget_full_graph canvas { height: 300px !important; }
[data-chart-element="chart-brand"] { display: none; }

/* Back */
.fuel_widget_back { color: black; display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.fuel_widget_back::before { content: '‹'; margin-right: 4px; }

@media screen and (max-width: 640px) {
    .wrapper-prezzo-cifre-big span { font-size: 30px; width: 15px; }
    .wrapper-prezzo-cifre span:last-of-type { font-size: 19px; top: -10px; width: 11px; text-align: right; }
}

@media screen and (max-width: 575px) {
    /* Seconda colonna */
    .fuel_widget_prices_communicated_table table thead th:nth-child(2) { width: 120px; }
}

@media screen and (min-width: 576px) {
    /* Info */
    #fuel_widget_operator_info { align-items: center; column-gap: 20px; display: flex; }

    .fuel_widget_operator_logo { flex: 0 0 150px; }
    .fuel_widget_operator_address { flex: 0 1 auto; }

    /* Prima colonna */
    .fuel_widget_prices_communicated_table table tbody td:first-of-type { font-size: 18px; }

    /* Seconda colonna */
    .fwpct_price { font-size: 52px; width: 115px; }

    /* Terza colonna */
    .fuel_widget_prices_communicated_table table tbody td:last-of-type { font-size: 16px; }
}

@media screen and (max-width: 991px) {
    .fwo_aside { display: flex; justify-content: center; margin-top: 20px; }
    #fuel_widget_operator_map { margin-top: 0; }
}

@media screen and (min-width: 992px) {
    /* Grid */
    .fuel_widget_operator_grid { column-gap: 20px; display: flex; justify-content: space-between; }
    .fwo_content { flex: 1 1 auto; }
    .fwo_aside { flex: 0 0 300px; width: 300px; }
}

@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

.demo_banner { align-items: center; background-color: lightgray; color: black; display: flex; height: 240px; justify-content: center; width: 100%; }