/* IMPORT FONTS AND JQUERY START */

@import url("../libs/jquery-ui/jquery-ui.css");

@font-face {
    font-family: 'sole_headline';
    src: url('http://c.res.24o.it/fonts/w-fonts/SoleSerifHeadline_W_Bd.eot');
    src: url('http://c.res.24o.it/fonts/w-fonts/SoleSerifHeadline_W_Bd.eot?#iefix') format('embedded-opentype'),url('http://c.res.24o.it/fonts/w-fonts/SoleSerifHeadline_W_Bd.woff2') format('woff2'),url('http://c.res.24o.it/fonts/w-fonts/SoleSerifHeadline_W_Bd.woff') format('woff'),url('http://c.res.24o.it/fonts/w-fonts/SoleSerifHeadline_W_Bd.ttf') format('truetype'),url('http://c.res.24o.it/fonts/w-fonts/SoleSerifHeadline_W_Bd.svg#SoleSerifHeadline_W_Bd') format('svg');
    font-weight: 700;
    font-style: normal
}

.sole_headline {
    font-family: "sole_headline", Georgia, Times, "Times New Roman", serif
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    height: 15px;
    border: 2.5px solid rgba(0, 0, 0, 0);
    -webkit-border-radius: 8px;
    background-clip: padding-box;
    background-color: rgba(0, 0, 0, 0.3);
}

/* IMPORT FONTS AND JQUERY END */

/* GENERAL START */
html,
body {
  margin: 0;
  padding: 0;
}
body {
    -webkit-tap-highlight-color: none;
}
body.hidden {
    visibility: hidden;
}
body,
body > div {
    /*fix ui mobile on ipad*/
    width: 100% !important;
    height: auto !important;
}

body,
input {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    /*background:none transparent;*/
}

.ui-body-c,.ui-body-c input,.ui-body-c select,.ui-body-c textarea,.ui-body-c button {
    font-family: 'Montserrat', sans-serif;
}

.ui-body-c, .ui-dialog.ui-overlay-c {
    text-shadow: 0 0px 0 white;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

a {
    color: inherit!important;
    text-decoration: none;
    font-weight: inherit!important;
}

h1 {
    font-size: 150%;
    font-weight: 700;
    line-height: 26px;
    margin: 15px 0;
}

p {
}

hr {
    margin: 0px;
    border: 0px;
    border-top: 1px solid #aaa796;
}

.container {
    width: 100%;
    margin: 0px auto;
}

.row {
    width: calc(100% - 331px);
    position: absolute;
    z-index: 1;
}

.credits {
    font-size: 150%;
    font-weight: 700;
    margin-top: 12px;
    color: #244357;
}

.menu ul {
    margin: 10px;
    padding: 0px;
}

.menu li, .menu_2 .compare, .menu_2 .province {
    display: inline-block;
    vertical-align: middle;
    font-weight: normal !important;
    margin: 0px 5px;
    color: #d1c0af;
    cursor: pointer;
}

.menu_2 .compare,
.menu_2 .province {
    margin: 15px 0 0 20px;
    padding: 0 20px;
    border-radius: 13px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    color: #356e89;
    border: 1px solid #356e89;
}

.menu .active, .menu_2 .active {
    color: #244357;
}

.switch {
    display: inline-block;
    height: 22px;
    width: 40px;
    border-radius: 11px;
    border: 1px solid #d1c0af;

}
.switch::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 18px;
    margin: 1px;
    border-radius: 50%;
    background-color: #244357;
}
.switch.switch-right {
    text-align: right;
}

.legend_general {
    position: absolute;
    bottom: 0;
    /*margin-top: calc(100% + 170px);*/
}
@media (min-width: 1008px) {
    .legend_general {
        margin-top: 780px;
    }
}
.legend-sum,
.legend-color {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}
.legend-sum::before {
    content: "";
    display: block;
    height: 23px;
    margin-bottom: 4px;
    background: url("../images/legend.svg") no-repeat center center;
}
.legend-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 6px 6px 0;
    border-radius: 50%;
}
.legend-icon:last-of-type {
    margin-right: 0;
}
.legend-label {
    display: inline-block;
    border-top: 1px dotted;
    padding-top: 4px;
}

.col_1 {
    float: right;
    width: 300px;
    margin-top: 17px;
    padding: 0 15px;
    border-left: 1px solid #d1c0af;
    z-index: 2;
    right: 0;
    margin-bottom: 20px;
}

.col_2 {
    float: left;
    position: relative;
    width: calc(100% - 331px);
    top: 0px;
    left: 0px;
}

.col_3 {
    width: calc(100% - 320px);
    padding-bottom: calc(100% - 320px);
    position: relative;
    margin-top: 10%;
}
@media (min-width: 865px) {
    .col_3 {
        width: 562px;
        height: 562px;
        padding-bottom: 0;
        margin-top: 10px;
    }
}

.col_4 {
    margin-top: 40px;
    width: 300px;
}
@media (min-width: 1008px) {
    .col_4 {
        width: 400px;
    }
}

.txt {
    width: 300px;
    /*height: 250px;*/
}
.txt > div:not(:empty) {
    margin-bottom: 40px;
}

.txt_2 {
    margin: 0 6px;
}

#resetBtn:hover,
#prevIndicatore:hover,
#nextIndicatore:hover,
.compare:hover,
.province:hover {
    color: #244357;
    border-color: #244357;
}
/* GENERAL END */

/* APP GENERALE START */
#map {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    margin-top: 100px;
    margin-bottom: 100px;
}
@media (min-width: 1008px) {
    #map {
        width: 660px;
        height: 660px;
        padding-bottom: 0;
    }
}
@media (max-width: 768px) {
    #map {
        margin-top: 130px;
    }
}
#map > div,
#circles {
    width: 100%;
    height: 100%;
    left: 0 !important;
    top: 0 !important;
}

#hitarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.ind_title {
    font-size: 160%;
    font-weight: 700;
}

input.ui-slider-input {
    display: none;
}

.sliderlabel {
    margin: 34px 0 10px 0;
    font-size: 120%;
    cursor: pointer;
}
.sliderlabel::before {
    content: '';
    display: inline-block;
    margin-top: -1px;
    margin-right: 6px;
    width: 12px;
    height: 12px;
    background: url(../images/next.svg) no-repeat center center;
    background-size: 4px;
    border: 1px solid #356E89;
    border-radius: 50%;
    vertical-align: middle;
}

.ui-focus {
    outline: none;
}

.ui-btn-down-a {
    box-sizing: border-box;
    background: none;
    color: white;
    border: 1px solid #d1c0af;
}

.ui-btn-up-b {
    border: 0px;
    background: #244357;
    color: white;
}

.ui-btn-hover-b {
    background: #356E89;
    outline: none;
    border: none;
}

div.ui-slider {
    font-size: 1.6em;
    margin: -4px 0;
    top: -4px;
}

.plus_minus {
    display: inline-block;
    color: #244357;
    padding-right: 7px;
}
.plus_minus:last-of-type {
    padding-right: 0;
    padding-left: 7px;
}

.resetBtn {
    font-size: 120%;
    border-radius: 13px;
    height: 26px;
    width: 128px;
    line-height: 26px;
    text-align: center;
    color: #356e89;
    border: 1px solid #356e89;
    margin: 25px auto 0;
    cursor: pointer;
}
.resetBtn::before {
    content: '';
    display: inline-block;
    margin: -2px 8px 0 0;
    width: 14px;
    height: 14px;
    background: url(../images/reset.svg) no-repeat center center;
    vertical-align: middle;
}


/* TOOLTIP GENERALE START */

.tooltip-index {
    pointer-events: none;
    width: 270px;
    background-color: #fff;
    z-index: 10000;
    padding: 10px;
}
.tooltip-index.constrained::after {
    display: none;
}
.tooltip-index:after,
.tooltip-index2:after {
  	right: 100%;
  	top: 65px;
  	border: solid transparent;
  	content: " ";
  	height: 0;
  	width: 0;
  	position: absolute;
  	pointer-events: none;
  	border-color: rgba(255, 255, 255, 0);
  	border-right-color: #fff;
  	border-width: 9px;
  	margin-top: -9px;
}
.tooltip-index.microchart {
    margin-bottom: 15px;
}

#nomeProvincia {
    font-family: 'sole_headline', serif;
    font-weight: 700;
    font-size: 220%;
}

#ranking_container {
    float: none !important;
    margin-right: 5px;
    border-bottom: 1px solid #ad9a88;
    padding-bottom: 6px;
}

#rankingProvincia {
    font-size: 290%;
    color: #244357;
    text-align: center;
}

.position {
    display: none;
}

.indicatori_values {
    float: right !important;
    text-align: right;
    margin-top: -1px;
}

.indicatore_value {
    margin-top: 28px;
    font-size: 130%;
}

.indicatori_box {
    padding-bottom: 10px;
}

.indicatoreprovincia {
    height: 10px;
    margin-bottom: 2px;
}

.gen_indicatori_label {
    margin-top: 11px;
    margin-bottom: 3px;
}

.indicatore_container {
    height: 18px;
}
.indicatore_container .indicatoreprovincia,
.indicatore_container .avg,
.indicatore_container .indiceBG {
    height: 18px;
    padding: 0;
}

.tooltip_index_scale {
    position: relative;
    width: 230px;
    text-align: center;
    color: #ad9a88;
}
.scale-label {
    position: relative;
    top: 0;
    margin: auto;
    padding-top: 7px;
    width: 25%;
    font-size: 85%;
}
.scale-label:first-of-type {
    position: absolute;
    left: 0;
    text-align: left;
}
.scale-label:last-of-type {
    position: absolute;
    right: 0;
    text-align: right;
}
.scale-label::before,
.scale-label::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1px solid #ad9a88;
    height: 5px;
}
.scale-label:first-of-type::before,
.scale-label:last-of-type::before {
    left: 0;
}
.scale-label:first-of-type::after,
.scale-label:last-of-type::after {
    left: 100%;
}

#vPointer,
#hPointer {
  display: none !important;
}

/* TOOLTIP GENERAL END */

/* TOOLTIP INDICATORI START */

.tooltip-index2 {
    pointer-events: none;
    background-color: #fff;
    padding: 15px;
    height: 130px;
    width: 220px;
    z-index: 99999999;
}
.tooltip-index2:after {
  	top: 50%;
}

.tooltip-index2 #nomeProvincia {
    padding-bottom: 5px;
}

.posizione_label, .punti_label {
    display: inline;
    float: none !important;
    vertical-align: middle;
    font-size: 108%;
    color: #7d979f
}

.posizione_value, .punti_value {
    display: inline;
    float: none !important;
    vertical-align: middle;
    font-size: 220%;
    color: #244357;
}

.tooltip-index2 #microchart {
    margin-top: 15px;
    padding-top: 20px;
    border-top: 1px solid #ad9a88;
}

.microchart,
#microchart {
    margin-top: 3px;
    height: 30px;
    width: 220px;
    position: relative;
    border-bottom: 1px solid #244357;
}
.microchart div,
#microchart div {
  background-color: #e5d5c5;
}
.microchart .selected,
#microchart .selected {
  background-color: #244357;
}

/* TOOLTIP INDICATORI END */

/* TOOLTIP AVERAGE START */

.tooltip-average {
    position: absolute;
    width: 80px;
    height: 35px;
    bottom: 100%;
    left: 100%;
    margin-bottom: 10px;
    -ms-transform: translateX(-50%); /* IE 9 */
    -webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */
    transform: translateX(-50%);
    pointer-events: none;
    background-color: #fff;
    padding: 10px;
    font-size: 165%;
}
.tooltip-average:before {
    display: block;
    content: "Valore media:";
    font-size: 11px;
}
.tooltip-average:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 9px;
    margin-left: -9px;
}

/* TOOLTIP AVERAGE END */

/* APP GENERALE END */

/* APP INDICATORI START */

#prevIndicatore {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    background: url("../images/prev.svg") no-repeat 10px center;
    border-radius: 50%;
    border: solid 1px #356E89;
    z-index: 10;
    cursor: pointer;
}

#indicatore_name {
    font-size: 130%;
    font-weight: 700;
    text-align: center;
    width: calc(100% - 64px);
    height: 40px;
    margin-bottom: 20px;
}

#nextIndicatore {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    background: url("../images/prev.svg") no-repeat 10px center;
    border-radius: 50%;
    border: solid 1px #356E89;
    z-index: 10;
    cursor: pointer;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.indicatore_label {
    color: #7d979f;
    font-size: 110%;
    margin: 8px 0;
    direction: rtl;
    white-space: nowrap;
}
.indicatore_label.tab {
    width: 45px;
    text-align: right;
}

#indicatori {
    clear: both;
}

#statistica_1, #statistica_2, #statistica_3,
#statistica_4, #statistica_5, #statistica_6, #statistica_7 {
    margin: 10px 0px 2px 65px;
    height: 28px;
    clear: both;
}

#punti_1, #punti_2, #punti_3,
#punti_4, #punti_5, #punti_6, #punti_7, .indicatorepos {
    line-height: 18px;
    font-size: 130%;
    text-align: right;
    width: 45px;
}

#valore_1, #valore_2, #valore_3,
#valore_4, #valore_5, #valore_6, #valore_7 {
    line-height: 18px;
    width: 60px;
    padding-right: 5px;
    font-size: 130%;
    text-align: left;
}

.indicatoreprovincia {
    height: 18px;
    position: absolute;
    z-index: 2;
}

.indiceBG {
    opacity: 0.5;
    height: 18px;
    position: absolute;
    z-index: 1;
}

.avg {
    height: 18px;
    border-width: 2px;
    border-right-color: #fff;
    border-right-style: solid;
    position: absolute;
    z-index: 100;
}

/* INDICATORI END */

/* PROVINCE START */
#provinceList {
  clear: both;
}

.provinceList select {
    width: 352px;
}
#provinceList select {
    width: 400px;
}

.provinceList .select2,
#provinceList .select2 {
    margin: 15px 0;
}
#provinceList .select2-selection,
.provinceList .select2-container .select2-selection {
    border-color: #8d9496;
    background: none;
    border-radius: 20px !important;
    outline: none;
}
#provinceList .select2-selection:hover,
#provinceList .select2-container--open .select2-selection,
.provinceList .select2-container .select2-selection:hover,
.provinceList .select2-container .select2-container--open .select2-selection {
    border-color: #244357;
}
.provinceList .select2-container .select2-selection,
.provinceList .select2-container .select2-selection__rendered,
.provinceList .select2-container .select2-selection__arrow,
#provinceList .select2-selection,
#provinceList .select2-selection__rendered,
#provinceList .select2-selection__arrow {
    box-sizing: border-box;
    height: 40px!important;
    line-height: 40px!important;
}
.provinceList .select2-container .select2-selection__rendered,
#provinceList .select2-selection__rendered {
    padding: 0 19px;
    color: #244357;
}
.provinceList .select2-container .select2-selection__arrow,
#provinceList .select2-selection__arrow {
    padding-right: 30px;
    background: url(../images/arrow.svg) no-repeat center center;
}
.provinceList .select2-container .select2-container--open .select2-selection__arrow,
#provinceList .select2-container--open .select2-selection__arrow {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.provinceList .select2-container--open .select2-selection__rendered,
#provinceList .select2-container--open .select2-selection__rendered {
    display: none;
}
.provinceList .select2-selection__arrow b,
#provinceList .select2-selection__arrow b {
    display: none;
}
.select2-container .select2-dropdown {
    margin-top: -40px;
    margin-left: -20px;
    background: none;
    border: none;
}
.select2-container .select2-search--dropdown,
.select2-container .select2-results {
    margin-left: 40px;
}
.select2-container .select2-dropdown .select2-results__options {
    max-height: 347px !important;
}
.select2-container .select2-dropdown .select2-results__option {
    color: #356e89;
    height: 14px;
}
.select2-container .select2-search--dropdown {
    padding: 0;
}
.select2-container .select2-search__field {
    height: 40px;
    padding: 0 !important;
    border: none !important;
    background: none;
    outline: none;
}
.select2-container .select2-results {
    background-color: #f7eee7;
}
.select2-container .select2-results__options {
    padding: 0 8px;
}
.select2-container .select2-dropdown .select2-results__option {
    padding: 10px 8px;
    border-bottom: 1px solid #ad9a88;
}
.select2-container .select2-dropdown .select2-results__option:last-of-type {
    border-bottom: none;
}
.select2-container .select2-dropdown .select2-results__option.select2-results__option--highlighted {
    background: none!important;
    color: #244357;
}
.select2-container .select2-dropdown .select2-results__option[aria-disabled] {
    display: none;
}

#provinceDetail {
}

#provinceName, .provName {
    font-family: 'sole_headline', serif;
    font-weight: 700;
    font-size: 290%;
    margin: 0 20px 0 2px;
}

.provName {
    margin: 0 0 20px 0;
}

.puntiLabel, .posizioneLabel {
    color: #7d979f;
    font-size: 108%;
    margin: -4px 0 0 15px;
}

#provincePunti,
.rankChartIndex, .rankChartPunti{
    color: #244357;
    font-size: 220%;
    margin-left: 15px;
}
#provincePosizione {
  color: #244357;
  font-size: 220%;
  margin-left: 0;
}

#provincePunti, .rankChartPunti {
}

#provincePosizione, .rankChartIndex {
    width: 57px;
    text-align: center;
}

.sep {
    background: #646464;
    width: 1px;
    height: 48px;
    margin-right: 15px;
}

#nomiIndicatoriContainer,
.indicatoriBtns {
    box-sizing: border-box;
    position: absolute;
    height: 50%;
    right: 50%;
    bottom: 50%;
    padding: 6.5% 8px 5% 0;
    z-index: 1;
}
#nomiIndicatoriContainer:before,
.indicatoriBtns:before,
#nomiIndicatoriContainer:after,
.indicatoriBtns:after {
    display: block;
    position: absolute;
    bottom: 92%;
    color: #7d979f;
}
#nomiIndicatoriContainer:before,
.indicatoriBtns:before {
    content: "Posizione";
    right: calc(19% + 5px);
}
#nomiIndicatoriContainer:after,
.indicatoriBtns:after {
    content: "Punti";
    right: 4%;
}
#nomiIndicatoriContainer.over .indicatoreButton,
.indicatoriBtns.over .indicatoreButton {
    opacity: 0.3 !important;
}
#nomiIndicatoriContainer.over .indicatoreButton.over,
.indicatoriBtns.over .indicatoreButton.over {
    opacity: 1 !important;
}

.indicatoreButton {
    box-sizing: border-box;
    height: 16.6%;
    line-height: 1;
    padding: calc(3% - 4px) 0;
    text-align: right;
    cursor: pointer;
}
.indicatoreButton span {
    display: inline-block;
    vertical-align: middle;
}
.indicatoreButton .indicatore-btn-label {
    width: 62%;
}
.indicatoreButton .indicatore-btn-pos,
.indicatoreButton .indicatore-btn-point {
    font-size: 200%;
    width: 19%;
}
@media (max-width: 768px) {
    .indicatoreButton .indicatore-btn-pos,
    .indicatoreButton .indicatore-btn-point {
        font-size: 150%;
    }
}

.arcchart-container {
    margin: auto;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}
@media (min-width: 1008px) {
    .arcchart-container {
        width: 490px;
        height: 490px;
        padding-bottom: 0;
    }
}

.arcchart {
    position: absolute;
    width: 100%;
}
.arcchart text {
    font-size: 7px !important;
}
.arcchart.over .arc-path {
    opacity: 0.3 !important;
}
.arcchart.over .arc-path.over {
    opacity: 1 !important;
}

#details_bottom {
    margin-top: 45px;
}

#provinceAbitanti {
    color: #646464;
    line-height: 80px;
    text-align: left;
    width: 220px;
    height: 80px;
    margin-right: 45px;
}

#provinceAbitanti_label {
    color: #646464;
    text-align: left;
    width: 220px;
    height: 80px;
}

.pointMapReference {
    background-image: url("../images/map_it.png");
    width: 109px;
    height: 128px;
    margin-right: 45px;
}

.provinceRegione,
.provinceCapoluogo,
.provinceSuperficie,
.provinceDensita,
.provinceTarga{
    color: #646464;
    height: 26px;
}

#provinceRegione,
#provinceCapoluogo,
#provinceSuperficie,
#provinceDensita,
#provinceTarga{
    color: #646464;
    line-height: 21px;
}

.text {
    fill: #aaa796;
    padding-right: 5px;
}

/* PROVINCE END */

/* COMPARE START */

#compareItemA,
#compareItemB {
    box-sizing: border-box;
    width: 50%;
}
#compareItemA {
    padding-right: 20px;
}
#compareItemB {
    padding-left: 20px;
}
@media (max-width: 768px) {
    #compareItemA {
        padding-right: 15px;
    }
    #compareItemB {
        padding-left: 15px;
    }
}

.compareTop {
    margin-bottom: 30px;
}

.indicatoriTop {
    width: 100%;
    margin-bottom: 3px;
    margin: 0px auto;
}

.indicatoriTop #nextIndicatore, .indicatoriTop #prevIndicatore {
    margin-bottom: 10px;
}

.rankChartIndex, .rankChartPunti {
    float: left;
}

#compareItemA .arcchart, #compareItemB .arcchart {
}

.indicatoriBtns {
}

#compareItemA .indicatoreButton .indicatore-btn-point,
#compareItemB .indicatoreButton .indicatore-btn-point,
#compareItemA .indicatoreButton .indicatore-btn-pos,
#compareItemB .indicatoreButton .indicatore-btn-pos {
    font-size: 140%;
}
#compareItemA .indicatoreButton .indicatore-btn-label,
#compareItemB .indicatoreButton .indicatore-btn-label {
    font-size: 90%;
}

.provinceList {
    clear: both;
}

.panel {
    margin-top: 40px;
}

#compareItemA .panel, #compareItemB .panel {
    width: 100%;
    margin: 0px auto;
}

.panelItemLabel {
    margin: 5px 0px 2px 65px;
    height: 28px;
    clear: both;
}

.panelItemValue {
    width: 60px;
    font-size: 130%;
    padding-right: 5px;
    text-align: right;
    float: left;
}

.panelItemPunti,
.panelItemPos {
    width: 45px;
    float: right;
    font-size: 130%;
    text-align: right;
}

.panelItemBarBg {
    position: absolute;
    opacity: 0.5;
    height: 18px;
    margin-left: 65px;
    z-index: 0;
}

.panelItemBarValue {
    position: absolute;
    height: 18px;
    margin-left: 65px;
    z-index: 1;
}

.panelItemBarAvg {
    position: absolute;
    height: 18px;
    margin-bottom: 2px;
    border-width: 2px;
    border-right-color: #fff;
    border-right-style: solid;
    margin-left: 65px;
    z-index: 2;
}

/* COMPARE END */

/* CHROME FRAME START */

.frame {
    width: 989px;
    height: 180px;
    position: fixed;
    left: 50%;
}

/* CHROME FRAME END */