/* 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:400,700');

/* Provincia */
#area_prices_operator_map_wrapper, #area_prices_operator_table_wrapper { margin-top: 20px; }

.apopw_title_wrapper { position: relative; }

.apopw_title { border-bottom: 10px solid currentColor; color: #C00C00; font-family: alvregular, sans-serif; font-size: 2.5em; margin-bottom: 20px; text-transform: uppercase; }

.apopw_subtitle { margin-bottom: 20px; font-weight: 700; }

.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-small span { font-size: 22px; width: 10px; text-align: right;}
.wrapper-prezzo-cifre-big span { font-size: 30px; width: 15px; text-align: right;}

.apopw_average_price { color: #C00C00; font-family: 'ds-digitalbold' !important; font-size: 20px; }
.apopw_average_price span { color: #C00C00; font-family: 'ds-digitalbold' !important; font-size: 20px; }

#area_prices_operator_table_wrapper table { border-collapse: collapse; width: 100%; }

#area_prices_operator_table_wrapper table, #area_prices_operator_table_wrapper table * { font-family: "Oswald", sans-serif; }

#area_prices_operator_table_wrapper table a { color: #06c; }

#area_prices_operator_table_wrapper table thead th { font-weight: 700; padding: 0 5px 10px; text-align: left; text-transform: uppercase; }

#area_prices_operator_table_wrapper table tbody tr.expired { background-color: #EFEFEF; opacity: 0.6; }

#area_prices_operator_table_wrapper table tbody td { border-bottom: 1px solid lightgray; padding-left: 5px; padding-right: 5px; min-width: 55px;}

#area_prices_operator_table_wrapper table tbody td span.nodata { display: block; line-height: 1; text-align: center; }

#area_prices_operator_table_wrapper table tbody td:nth-child(2) span { display: block; line-height: 1.2; text-transform: none; }

#area_prices_operator_table_wrapper table tbody td:nth-child(2) span em { color: #C00C00; display: block; font-style: normal; }

#area_prices_operator_table_wrapper table thead th:nth-child(5), #area_prices_operator_table_wrapper table thead th:nth-child(6), #area_prices_operator_table_wrapper table thead th:nth-child(7), #area_prices_operator_table_wrapper table thead th:nth-child(8) { text-align: center; }

#area_prices_operator_table_wrapper table tbody td:nth-child(5), #area_prices_operator_table_wrapper table tbody td:nth-child(6), #area_prices_operator_table_wrapper table tbody td:nth-child(7), #area_prices_operator_table_wrapper table tbody td:nth-child(8) { color: #C00C00; font-family: 'ds-digitalbold'; font-size: 22px; font-weight: 500; }

#area_prices_operator_table_wrapper table tbody td:nth-child(2) { font-weight: 700; text-transform: uppercase; }

#area_prices_operator_table_wrapper table tbody td:nth-child(4) { text-transform: uppercase; }

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

/* Fuel Buttons */
#area_prices_fuel_buttons { align-items: center; column-gap: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px 0; row-gap: 20px; }

#area_prices_fuel_buttons { display: flex; }
#area_prices_fuel_buttons a { -webkit-appearance: none; background-color: transparent; border: none;  flex: 1 0 0%; font-size: 14px; letter-spacing: -0.5px; max-width: 100%; padding: 5px; text-align: center; transition: all 250ms; text-transform: uppercase; width: 100%; -webkit-tap-highlight-color: transparent; }
#area_prices_fuel_buttons a:hover { cursor: pointer; }
#area_prices_fuel_buttons a.active:hover { cursor: not-allowed; }

#area_prices_fuel_buttons a.apfb_benzina { background-color: #E1F0E4; color: #1A9236; }
#area_prices_fuel_buttons a.apfb_gasolio { background-color: #E6EBF4; color: #2657A8; }
#area_prices_fuel_buttons a.apfb_gpl { background-color: #FBEEE4; color: #E46E15; }
#area_prices_fuel_buttons a.apfb_metano { background-color: #E7F1FA; color: #3690D7; }

#area_prices_fuel_buttons a.apfb_benzina:hover, #area_prices_fuel_buttons a.apfb_benzina.active { background-color: #1A9236; color: white; }
#area_prices_fuel_buttons a.apfb_gasolio:hover, #area_prices_fuel_buttons a.apfb_gasolio.active { background-color: #2657A8; color: white; }
#area_prices_fuel_buttons a.apfb_gpl:hover, #area_prices_fuel_buttons a.apfb_gpl.active { background-color: #E46E15; color: white; }
#area_prices_fuel_buttons a.apfb_metano:hover, #area_prices_fuel_buttons a.apfb_metano.active { background-color: #3690D7; color: white; }

.area_geo_title { font-family: alvregular, sans-serif; font-size: 30px; font-weight: 700; margin-bottom: 20px; margin-top: 15px; text-transform: uppercase; }
#area_regioni_buttons, #area_province_buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
#area_regioni_buttons a, #area_province_buttons a { align-items: center; background-color: #E3E2E3; color: #646363; display: inline-flex; line-height: 1.1; justify-content: center; padding: 5px; text-align: center; transition: all 250ms; }
#area_regioni_buttons a:hover, #area_province_buttons a:hover { background-color: #646363; color: #FFFFFF; }

@media screen and (max-width: 640px) {
    #area_prices_operator_table_wrapper table thead { display: none; }
    #area_prices_operator_table_wrapper table tbody tr { border-bottom: 1px solid lightgray; display: grid; padding: 10px 0 10px 60px; position: relative; }
    #area_prices_operator_table_wrapper table tbody td { border-bottom: none; }
    #area_prices_operator_table_wrapper table tbody td:nth-child(1) { left: 0; position: absolute; top: 10px; }

    #area_prices_operator_table_wrapper table tbody td:nth-child(5), #area_prices_operator_table_wrapper table tbody td:nth-child(6), #area_prices_operator_table_wrapper table tbody td:nth-child(7), #area_prices_operator_table_wrapper table tbody td:nth-child(8) { align-items: flex-end; color: #C00C00; column-gap: 10px; display: grid; font-family: 'ds-digitalbold' !important; font-size: 22px; font-weight: 500; grid-template-columns: 56px 60px 32px; text-align: right; }

    #area_prices_operator_table_wrapper table tbody td:nth-child(5)::before, #area_prices_operator_table_wrapper table tbody td:nth-child(6)::before, #area_prices_operator_table_wrapper table tbody td:nth-child(7)::before, #area_prices_operator_table_wrapper table tbody td:nth-child(8)::before, #area_prices_operator_table_wrapper table tbody td:nth-child(5)::after, #area_prices_operator_table_wrapper table tbody td:nth-child(6)::after, #area_prices_operator_table_wrapper table tbody td:nth-child(7)::after, #area_prices_operator_table_wrapper table tbody td:nth-child(8)::after { color: #000000; font-family: "Open Sans", sans-serif; font-size: 14px; text-align: left; }

    #area_prices_operator_table_wrapper table tbody td:nth-child(5)::before { content: 'Benzina'; }
    #area_prices_operator_table_wrapper table tbody td:nth-child(6)::before { content: 'Gasolio'; }
    #area_prices_operator_table_wrapper table tbody td:nth-child(7)::before { content: 'GPL'; }
    #area_prices_operator_table_wrapper table tbody td:nth-child(8)::before { content: 'Metano'; }

    #area_prices_operator_table_wrapper table tbody td:nth-child(5)::after { content: '€/l'; }
    #area_prices_operator_table_wrapper table tbody td:nth-child(6)::after { content: '€/l'; }
    #area_prices_operator_table_wrapper table tbody td:nth-child(7)::after { content: '€/l'; }
    #area_prices_operator_table_wrapper table tbody td:nth-child(8)::after { content: '€/kg'; }

    /* Fuel Buttons */
    #area_prices_fuel_buttons { margin-bottom: 40px; }
}

@media screen and (min-width: 576px) {
    #area_regioni_buttons, #area_province_buttons { grid-template-columns: repeat(4, 1fr); }
}

@media screen and (min-width: 768px) {
    #area_regioni_buttons, #area_province_buttons { grid-template-columns: repeat(5, 1fr); }
}

@media screen and (min-width: 992px) {
    #area_regioni_buttons { grid-template-columns: repeat(10, 1fr); }

    .apopw_title { padding-right: 180px; }

    .apopw_subtitle { bottom: 13px; margin-bottom: 0; position: absolute; right: 0; }
}