@import "font-awesome.min.css";

/* ----- INIZIO SLIDER MAPPE ---- */

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    margin: 12.65px 0;
}



input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 10.7px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #262626;
    border-radius: 2.5px;
    border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 0.8px solid #000000;
    height: 36px;
    width: 19px;
    border-radius: 5px;
    background: #ffcc00;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -12.85px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #4a4a4a;
}
.link_titoli_tab{
    font-weight:normal;
    color:black;
    font-size:13px;
}

.font_nota{
    font-size:10px;
}

.pad_note
{
    padding-bottom: 0px;
}
.margini_titolo_tabella{
    margin-top: 8px;
    margin-bottom: 17px;
    line-height: 14px;
}
.tooltop_valore_1_4 {
    text-align: right;
   /*width:150px;*/
   /*white-space: pre-wrap;*/

}
.logo_mappa_12{
    height:40px;
}
.logo_mappa{
    height: 25px;
}
.logo_mappa_bolle{
    height: 40px;
}
.logo_tabella_4_4{
    float: right;
    width: 110px;
    margin-top:10px;
    margin-right: 5px
}
.logo_tabella{
    float: right;
    width: 50px;
    margin-top:10px;
    margin-right: 5px
}
.link_titoli_tab:hover{
    text-decoration: none;.
    color:black;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 10.7px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #262626;
    border-radius: 2.5px;
    border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 0.8px solid #000000;
    height: 36px;
    width: 19px;
    border-radius: 5px;
    background: #ffcc00;
    cursor: pointer;
}
input[type=range]::-ms-track {
    width: 100%;
    height: 10.7px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #020202;
    border: 0.2px solid #010101;
    border-radius: 5px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
    background: #262626;
    border: 0.2px solid #010101;
    border-radius: 5px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 0.8px solid #000000;
    height: 36px;
    width: 19px;
    border-radius: 5px;
    background: #ffcc00;
    cursor: pointer;
    height: 10.7px;
}
input[type=range]:focus::-ms-fill-lower {
    background: #262626;
}
input[type=range]:focus::-ms-fill-upper {
    background: #4a4a4a;
}



/* ----- FINE SLIDER MAPPE */

/*
.modal {z-index: 9999999;}
*/
.modal-header{

    padding-bottom: 5px;

    padding-top: 10px;


    border-bottom: 0px;
}

.modal-body{
    padding-top:5px;
}

.modal {
    text-align: center;
}


.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.nav > li > a:hover, .nav > li > a:focus
{
    background-color: transparent;
}

/* colori, sfondo, bordi, scritte,...  */
.grassetto{font-weight: bold;}
.corsivo{font-style: italic;}
.sottolineato{text-decoration: underline;}
.normale{
    font-weight: normal;
    text-decoration: none;
    font-style: normal;
}

.sfondo_bd{background-color: #ffcc00;}
.sfondo_bd1{background-color: #ffffff;}
.sfondo_grigiochiaro{background-color: #dddddd;}
.sfondo_grigioscuro{background-color: #666666;}
.sfondo_grigissimo{background-color: #454545;}


.tabella_titolo{
    padding-top: 7px;
    background-color: #8c8c8c;;
    margin-top: 10px;
    color: #ffcc00;
}

.tabella_titolo1{
    padding-top: 7px;
    margin-top: 10px;
    color: #666666;
}


.tabella_riga{
    margin-top: 5px;
    color: #262626;
}


.linea_h_20 {
    line-height: 20px;
}
.linea_h_15 {
    line-height: 15px;
}
.cerca {
    width: 89%;
    float: left;
}

.bordo_basso1{border-bottom: #8c8c8c 1px solid;}
.bordo_basso2{border-bottom: #8c8c8c 2px solid;}

.bordo_bd{border: 1px solid #ffcc00;}
.bordo_bd1{border: 1px solid #8c8c8c;}
.bordo_bd2{border: 1px solid #c5c5c5;}
.bordo1px_grigioscuro{border: 1px solid #262626 !important;}
.bordo1px_grigioscuro1{border: 1px solid #706f6f !important;}

.scritta_bd {color:#262626;}
.scritta_10 {font-size: 10px;}
.scritta_11 {font-size: 11px;}
.scritta_12 {font-size: 12px;}
.scritta_13 {font-size: 13px;}
.scritta_14 {font-size: 14px;}
.scritta_15 {font-size: 15px;}
.scritta_16 {font-size: 16px;}
.scritta_17 {font-size: 17px;}
.scritta_18 {font-size: 18px;}
.scritta_19 {font-size: 19px;}
.scritta_20 {font-size: 20px;}
.scritta_21 {font-size: 21px;}
.scritta_22 {font-size: 22px;}
.scritta_23 {font-size: 23px;}
.scritta_24 {font-size: 24px;}
.scritta_25 {font-size: 25px;}
.scritta_26 {font-size: 26px;}
.scritta_27 {font-size: 27px;}
.scritta_28 {font-size: 28px;}
.scritta_29 {font-size: 29px;}
.scritta_30 {font-size: 30px;}
.scritta_32 {font-size: 32px;}
.scritta_34 {font-size: 34px;}
.scritta_36 {font-size: 36px;}
.scritta_38 {font-size: 38px;}
.scritta_40 {font-size: 40px;}
.scritta_50 {font-size: 50px;}
.scritta_home{font-size: 12px;}

.text-bottoni-hp{
    white-space: nowrap;
    overflow: hidden;
    max-width: 11.976vw;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
    text-overflow: ellipsis;
}

.scritta_giallo {color:#ffcc00;}
.scritta_rosso {color:red;}
.scritta_grigio {color:#8c8c8c;}
.scritta_grigioscuro {color:#555;}
.scritta_grigissimo {color:#454545;}
.riga_giallo {
    border: 1px solid #ffcc00;
}

.scritta_verticale {
    display: block;
    width: 1.1em;
    margin: 10px 10px;
    letter-spacing: 1.1em;
    word-break: break-all;
}
.link_ioz
{
  margin-top: 10px;
}


.box_ioz {

    padding: 5px;
    border-radius: 3px;
    border: 0.3px solid #666666;
    font-size: 18px;
}

.box_bottoni_sintesi{
    width:100%;
    padding: 0px;
    margin:0px;
    margin-bottom: 10px;
}

/* immagini */
.img-responsive_logo{
    max-width: 100%;
    height: auto;
}

.no_hover:hover{
    text-decoration: none;
}

.btn_top_sintesi{
    border-top-right-radius: 0.15em;
    border-top-left-radius: 0.15em;
    border: 1px solid #666666;
    background-color: #666666;
}
.btn_bottom_sintesi{
    background-color: #666666;
    border-bottom-right-radius: 0.15em;
    border-bottom-left-radius: 0.15em;
    border: 1px solid #666666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding-left: 2px;
    padding-right: 2px;
}

/* dimensioni in percentuale*/
.width_15p {width:15%;}
.width_8p {width:8%;}

/* allineamenti */
.destra {text-align:right !important;}
.centro {text-align: center !important;}
.sinistra {text-align: left !important;}


/* link*/
.link_utente a:link, .link_utente a:visited, .link_utente a:hover, .link_utente a:active{
    color: #8c8c8c;
    text-decoration: none;
    font-weight: normal;
    font-size: 18px;
}

.link_bd a:link, .link_bd a:visited, .link_bd a:hover, .link_bd a:active{
    text-decoration: none;
    font-weight: normal;
    font-size: 18px;
}

.link_titoli a:link, .link_titoli a:visited, .link_titoli a:hover, .link_titoli a:active{
    color: #262626;
    text-decoration: none;
    font-weight: normal;
    /*font-size: 13px;*/
}

.link_titoli_comune a:link, .link_titoli_comune a:visited, .link_titoli_comune a:hover, .link_titoli_comune a:active{
    color: #262626;
    text-decoration: none;
    font-weight: normal;
    font-size: 20px;
}

.link_menu a:link, .link_menu a:visited, .link_menu , .link_menu a:active{
    color: #262626;
    text-decoration: none;
    font-weight: normal;
    font-size: 13px;
}

.link_menu a:hover{
    color: #262626;
    background-color: red;
    text-decoration: none;
    font-weight: normal;
    font-size: 13px;
}

.link_tasti a:link, .link_tasti a:visited, .link_tasti a:hover, .link_tasti , .link_tasti a:active{
    color: #262626;
    text-decoration: none;
    font-weight: normal;
    font-size: 13px;
}

.link_tit1 a:link, .link_tit1 a:visited, .link_tit1 a:hover, .link_tit1, .link_tit1 a:active, .link_tit1 a:focus{
    color: #454545;
    text-decoration: none;
    text-decoration-line: none;
    font-weight: bold;
    font-size: 13px;
}

.link_desc_sintesi a:link, .link_desc_sintesi a:visited, .link_desc_sintesi a:hover, .link_desc_sintesi, .link_desc_sintesi a:active, .link_desc_sintesi a:focus{
    color: #454545;
    text-decoration: none;
    text-decoration-line: none;
    font-weight: normal;
    font-size: 17px;
}


.stile_radial {
    line-height: 17px;
    max-height: 50px;
    margin-bottom: 5px;
    margin-left:-8px;
    margin-right:-8px;
}

#dest_top_text a{
    font-size:12px;
}
#dest_top_text2 ul li{
    line-height: 17px;
}

#dest_top_text3 a{
    font-size:12px;
}
#dest_top_text3 ul li{
    line-height: 17px;
}
#dest_top_text4 a{
    font-size: 13px;
    color: #666666;
    line-height: 17px;
}
#dest_top_text4 ul li{
    line-height: 14px;
}

.link_tasti_giallo a:link, .link_tasti_giallo a:visited, .link_tasti_giallo a:hover, .link_tasti_giallo , .link_tasti_giallo a:active{
    color: #ffcc00 !important;
    text-decoration: none !important;
    font-weight: normal;
}

.link_tasti_gialloscuro a:link, .link_tasti_gialloscuro a:visited, .link_tasti_gialloscuro a:hover, .link_tasti_gialloscuro , .link_tasti_gialloscuro a:active{
    color: #b19007 !important;
    text-decoration: none !important;
    font-weight: normal;
}

.link_tasti_grigioscuro a:link, .link_tasti_grigioscuro a:visited, .link_tasti_grigioscuro a:hover, .link_tasti_grigioscuro , .link_tasti_grigioscuro a:active{
    color: #666666 !important;
    text-decoration: none !important;
    font-weight: normal;

}
.link_nero_grassetto:link, .link_nero_grassetto:visited, .link_nero_grassetto:hover, .link_nero_grassetto , .link_nero_grassetto:active{
    color: #000000 !important;
    text-decoration: none !important;
}

#dest_top_text a{
    font-size:12px;
}
#dest_top_text2 ul li{
    line-height: 17px;
}

#dest_top_text3 a{
    font-size:12px;
}
#dest_top_text3 ul li{
    line-height: 17px;
}
#dest_top_text4 a{
    font-size: 13px;
    color: #666666;
    line-height: 17px;
}
#dest_top_text4 ul li{
    line-height: 14px;
}

.bordo_tondo{
    border-radius: 0.3em;
    border:1px solid #262626;
}
.bordo_tondo_sup{
    border-top-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
}
.bollino{
    margin-left: auto;
    max-width: 70px;
    border-radius: 0.3em;
    border:2px solid #fecc00;
    background-color: #fff7df;
    padding: 0.180vw;
}

.titolo_bottoni_hp{
    min-height: 10px;
    line-height: 10px;
    padding-top: 2px;
}
.sottotitolo_bottoni_hp{
    line-height: 1.3vw;
    padding: 0.599vw;
    color:#666666;
}

.sottotitolo_bottoni_sotto_hp{
    line-height: 1.3vw;
    padding: 0.599vw;
    color:#666666;
}


.box_bd {
    padding: 0px;
    border-radius: 0.3em;
    min-height: 50px;
    margin-bottom: 20px;
    padding-left:15px;
    padding-top:15px;
    padding-right:15px;
}

.box_bd_richiesta {
    padding: 0px;
    border-radius: 0.3em;
    margin-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: -10px;
}

.h75{
    height: 75%;
}

.h200
{
    height: 200px !important;
}

.box_bd_desc_demo {
    padding: 0px;
    border-radius: 0.3em;
    min-height: 50px;
    padding-left:15px;
    padding-top:15px;
    padding-right:15px;
}

.margin_r000{
    margin-right:5px;
}

.box_bd_info {

border-radius: 0.3em;
margin-bottom: 5px;
padding-left:15px;
padding-top:5px;
padding-right:5px;
border: 1px solid #ff0e13;
}

.box_bd_info1 {
    padding: 10px 10px 10px 20px;
    border-radius: 0.3em;
    border: 1px solid #ff0e13;
    margin-top: -13px !important;
    background-color: #dddddd;
    color: #666666;
    font-size: 15px;
}

.box_bd3 {
padding: 0px;
border-radius: 0.3em;
margin-bottom: 5px;
padding-left:5px;
padding-top:5px;
padding-right:5px;
padding-bottom:5px;
}

.box_dx{
padding: 0px;
border-radius: 0.3em;
min-height: 50px;
margin-bottom: 20px;
padding-top:15px;
padding-bottom: 15px;
margin-left:-15px;
margin-right:-15px;
}

.box_bd_doc {
padding: 0px;
border-radius: 0.3em;
margin-bottom: 5px;
padding-left:5px;
padding-top:5px;
padding-right:5px;
padding-bottom:5px;
}

.box_suggerimenti {
padding: 2px;
border-radius: 0.3em;
width: 40px;
}

.box_menu {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
height: 115px;
}

.titolo_menu {
font-size: 14px;
font-weight: bold;
margin-top: 10px;
text-align: center;
text-transform: uppercase;
font-family: 'Arial Narrow';
padding-left: 3px;
padding-right: 3px;
}

.sottotitolo_menu {
font-size: 12px;
font-weight: normal;
margin-top: 10px;
margin-left: 3px;
text-align: center;
line-height: 13px;
font-family: 'Arial Narrow';
padding: 0px;
}

.div_titolo_grafico{
border-bottom: #ffcc00 2px solid;
}
.div_titolo_mappa{
border-top: #ffcc00 2px solid;
}

.navbar-default {
background-color: #dddddd;
border-color: #c6c6c6;
}



.margin_lauto{
margin-left: auto;
}

.margin_t-20{
    margin-top:-20px;
}
.margin_t-15{
margin-top:-15px;
}
.margin_t-10{
margin-top:-10px;
}
.margin_t0{
    margin-top:0px;
}
.margin_t5{
margin-top:5px;
}
.margin_t10{
margin-top:10px;
}
.margin_t13{
margin-top:13px;
}
.margin_t20{
 margin-top:20px;
}
.margin_t30{
margin-top:30px;
}

.margin_t40{
    margin-top:40px;
}

.margin_t50{
margin-top:50px;
}

.margin_b-1{
margin-bottom:-1px;
}
.margin_b-2{
margin-bottom:-2px;
}
.margin_b-3{
margin-bottom:-3px;
}
.margin_b-4{
margin-bottom:-4px;
}
.margin_b5{
margin-bottom:5px;
}
.margin_b-10{
margin-bottom:-10px;
}
.margin_b-20{
margin-bottom:-20px;
}

.margin_b20{
margin-bottom:20px;
}
.margin_b10{
margin-bottom:10px;
}
.margin_b15{
margin-bottom:15px;
}
.margin_b30{
margin-bottom:30px;
}


.margin_lr0{
margin-left:0px;
margin-right:0px;
}

.margin_l-10{
 margin-left:-10px;
}
.margin_l-15{
margin-left:-15px;
}
.margin_l5{
margin-left:5px;
}
.margin_l10{
margin-left:10px;
}
.margin_l15{
margin-left:15px;
}
.margin_l20{
margin-left:20px;
}
.margin_l25{
margin-left:25px;
}
.margin_l40{
margin-left:40px;
}
.margin_l5{
margin-left:5px;
}



.margin_r-15{
margin-right:-15px;
}
.margin_r-10{
margin-right:-10px;
}
.margin_r5{
margin-right:5px;
}
.margin_r10{
margin-right:10px;
}
.margin_r15{
margin-right:15px;
}
.margin_r20{
margin-right:20px;
}
.margin_r25{
margin-right:25px;
}
.margin_r40{
margin-right:40px;
}

.no_padding {
padding: 0px 0px 0px 0px;
}

.padding_t5 {
padding-top: 5px;
}
.padding_b5 {
padding-bottom: 5px;
}

.titoli_mappa_new{
    margin-left: 0px !important;
    margin-top: -10px !important;
}

 body {background-color: #dddddd !important;}

.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: auto; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}


.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: unset; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #000; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }


/* INIZIO bottone giallo */

.btn-giallo {
  color: #262626;
  background-color: #ffcc00;
  border-color: #ffcc00;
}
.btn-giallo:focus,
.btn-giallo.focus {
  color: #262626;
  background-color: #ffcc00;
  border-color: #ffcc00;
}
.btn-giallo:hover {
  color: #262626;
  background-color: #ffcc00;
  border-color: #ffcc00;
}
.btn-giallo:active,
.btn-giallo.active,
.open > .dropdown-toggle.btn-giallo {
  color: #262626;
  background-color: #ffcc00;
  border-color: #ffcc00;
}
.btn-giallo:active:hover,
.btn-giallo.active:hover,
.open > .dropdown-toggle.btn-giallo:hover,
.btn-giallo:active:focus,
.btn-giallo.active:focus,
.open > .dropdown-toggle.btn-giallo:focus,
.btn-giallo:active.focus,
.btn-giallo.active.focus,
.open > .dropdown-toggle.btn-giallo.focus {
  color: #262626;
  background-color: #ffcc00;
  border-color: #ffcc00;
}
.btn-giallo:active,
.btn-giallo.active,
.open > .dropdown-toggle.btn-giallo {
  background-image: none;
}
.btn-giallo.disabled:hover,
.btn-giallo[disabled]:hover,
fieldset[disabled] .btn-giallo:hover,
.btn-giallo.disabled:focus,
.btn-giallo[disabled]:focus,
fieldset[disabled] .btn-giallo:focus,
.btn-giallo.disabled.focus,
.btn-giallo[disabled].focus,
fieldset[disabled] .btn-giallo.focus {
  background-color: #ffcc00;
  border-color: #ffcc00;
}

.btn-giallo .badge {
  color: #ffcc00;
  background-color: #262626;
}
/* FINE bottone giallo  */

/* INIZIO bottone grigio  */

.btn-grigio {
    color: #777777;
    background-color: #f6f6f6;
    border-color: #c6c6c6;
}

.btn-grigio:hover {
    color: #ffcc00;
    background-color: #f6f6f6;
    border-color: #ffcc00;
}

.btn-grigio:active,
.btn-grigio.active,
.open > .dropdown-toggle.btn-grigio {
    color: #ffffff;
    background-color: #777777;
    border-color: #ffcc00;
}
.btn-grigio:active:hover,
.btn-grigio.active:hover,
.open > .dropdown-toggle.btn-grigio:hover,
.btn-grigio:active:focus,
.btn-grigio.active:focus,
.open > .dropdown-toggle.btn-grigio:focus,
.btn-grigio:active.focus,
.btn-grigio.active.focus,
.open > .dropdown-toggle.btn-grigio.focus {
    color: #ffffff;
    background-color: #777777;
    border-color: #ffcc00;
}
.btn-grigio:active,
.btn-grigio.active,
.open > .dropdown-toggle.btn-grigio {
    background-image: none;
}
.btn-grigio.disabled:hover,
.btn-grigio[disabled]:hover,
fieldset[disabled] .btn-grigio:hover,
.btn-grigio.disabled:focus,
.btn-grigio[disabled]:focus,
fieldset[disabled] .btn-grigio:focus,
.btn-grigio.disabled.focus,
.btn-grigio[disabled].focus,
fieldset[disabled] .btn-grigio.focus {
    background-color: #ffcc00;
    border-color: #ffcc00;
}

.btn-grigio .badge {
    color: #ffffff;
    background-color: #777777;
}
/* FINE bottone grigio  */

/* INIZIO bottone grigio-bianco  */

.btn-grigiobianco {
    color: #777777;
    background-color: #f6f6f6;
    border-color: #c6c6c6;
}

.btn-grigiobianco:hover {
    color: #ffffff;
    background-color: #777777;
    border-color: #ffffff;
}

.btn-grigiobianco_attivo {
    color: #ffffff !important;
    background-color: #777777;
    border-color: #ffffff;
}

.btn-grigiobianco:active,
.btn-grigiobianco.active,
.open > .dropdown-toggle.btn-grigiobianco {
    color: #ffffff;
    background-color: #777777;
    border-color: #ffffff;
}
.btn-grigiobianco:active:hover,
.btn-grigiobianco.active:hover,
.open > .dropdown-toggle.btn-grigiobianco:hover,
.btn-grigiobianco:active:focus,
.btn-grigiobianco.active:focus,
.open > .dropdown-toggle.btn-grigiobianco:focus,
.btn-grigiobianco:active.focus,
.btn-grigiobianco.active.focus,
.open > .dropdown-toggle.btn-grigiobianco.focus {
    color: #ffffff;
    background-color: #777777;
    border-color: #ffffff;
}
.btn-grigiobianco:active,
.btn-grigiobianco.active,
.open > .dropdown-toggle.btn-grigiobianco {
    background-image: none;
}
.btn-grigiobianco.disabled:hover,
.btn-grigiobianco[disabled]:hover,
fieldset[disabled] .btn-grigiobianco:hover,
.btn-grigiobianco.disabled:focus,
.btn-grigiobianco[disabled]:focus,
fieldset[disabled] .btn-grigiobianco:focus,
.btn-grigiobianco.disabled.focus,
.btn-grigiobianco[disabled].focus,
fieldset[disabled] .btn-grigiobianco.focus {
    background-color: #777777;
    border-color: #ffffff;
}

.btn-grigiobianco .badge {
    color: #ffffff;
    background-color: #777777;
}
/* FINE bottone grigio-bianco  */

.dt-buttons{
    text-align: right;
    display: none;
}

.dt-button{
   width: 50px;
   font-size: 12px;
    padding-right: 0px;
    padding-left: 0px;

}


/* INIZIO bottone grigio-giallo  */

/* INIZIO bottone giallo */

.btn-grigiogiallo {
    color: #ffcc00;
    background-color: #666666;
    border-color: #666666;
}
.btn-grigiogiallo:focus,
.btn-grigiogiallo.focus {
    color: #ffcc00;
    background-color: #666666;
    border-color: #ffcc00;
}
.btn-grigiogiallo:hover {
    color: #ffcc00;
    background-color: #666666;
    border-color: #ffcc00;
}
.btn-grigiogiallo:active,
.btn-grigiogiallo.active,
.open > .dropdown-toggle.btn-grigiogiallo {
    color: #ffcc00;
    background-color: #666666;
    border-color: #ffcc00;
}
.btn-grigiogiallo:active:hover,
.btn-grigiogiallo.active:hover,
.open > .dropdown-toggle.btn-grigiogiallo:hover,
.btn-grigiogiallo:active:focus,
.btn-grigiogiallo.active:focus,
.open > .dropdown-toggle.btn-grigiogiallo:focus,
.btn-grigiogiallo:active.focus,
.btn-grigiogiallo.active.focus,
.open > .dropdown-toggle.btn-grigiogiallo.focus {
    color: #ffcc00;
    background-color: #666666;
    border-color: #666666;
}
.btn-grigiogiallo:active,
.btn-grigiogiallo.active,
.open > .dropdown-toggle.btn-grigiogiallo {
    background-image: none;
}
.btn-grigiogiallo.disabled:hover,
.btn-grigiogiallo[disabled]:hover,
fieldset[disabled] .btn-grigiogiallo:hover,
.btn-grigiogiallo.disabled:focus,
.btn-grigiogiallo[disabled]:focus,
fieldset[disabled] .btn-grigiogiallo:focus,
.btn-grigiogiallo.disabled.focus,
.btn-grigiogiallo[disabled].focus,
fieldset[disabled] .btn-grigiogiallo.focus {
    background-color: #666666;
    border-color: #666666;
}

.btn-grigiogiallo .badge {
    color: #ffcc00;
    background-color: #666666;
}

/* FINE bottone grigio-giallo  */

.dt-buttons{
    text-align: right;
    display: none;
}

.dt-button{
    width: 50px;
    font-size: 12px;
    padding-right: 0px;
    padding-left: 0px;

}



.titolo_dx{
    margin-left: -21px;
    margin-right: -31px;
    margin-top: -15px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.titolo_dx_bolle{
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.titolo_doc{
    margin-left: -5px;
    margin-right: -5px;
    margin-top: -5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.fixedPanel_new{
    position: fixed;
    top:20px;

    z-index:999999;
    background-color: #777777;
    width:310px;
    display:block;
}

.fixedPanel{
    position: fixed;
    top:20px;
    display:none;
    z-index:999999;
    background-color: #777777;";
}
.fixedPanel  .btn-giallo
{
    background-color: black;
    color:white;
}

.fixedPanel_sintesi{
    position: fixed;
    top:20px;
    display:none;
    background-color: #777777;
    z-index:999999;
}
.fixedPanel_sintesi  .btn-giallo
{
    background-color: black;
    color:white;
}


.spinner_overlay {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.5);
    overflow-x: hidden;
    transition: 0.5s;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 99999999999;
    display: none;
}

/* Position the content inside the overlay */
.spinner_overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}


.spinner {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}
.spinner:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 6px;
    box-sizing: border-box;
    border: 26px solid #ffda3d;
    border-color: #ffda3d transparent #ffda3d transparent;
    animation: spinner 1.2s infinite;
}
@keyframes spinner {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
        transform: rotate(1800deg);
    }
}

progress{
    -webkit-appearance: progress-bar;
    background-color: grey;
    border: 1px solid grey;
    height: 30px;
    border-radius: 50%;
    width:350px;
    text-align: center;
    color:black;
}

progress::-moz-progress-bar,
progress::-webkit-progress-bar {
    /* style rules */
    background-color: grey;
    border: 1px solid grey;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;

}

progress::-webkit-progress-value {
    /* style rules */
    background-image:
            -webkit-linear-gradient(-45deg,
            transparent 33%, rgba(0, 0, 0, .1) 33%,
            rgba(0,0, 0, .1) 66%, transparent 66%),
            -webkit-linear-gradient(top,
            rgba(255, 255, 255, .25),
            rgba(0, 0, 0, .25)),
            -webkit-linear-gradient(left, #ffc73d, #ffd13f);

    border-radius: 2px;
    background-size: 35px 30px, 100% 100%, 100% 100%;

}

.spinner_content{
    margin: 0 auto;
    width: 490px;
    background-color: black;
    font-size: 18px;
    height: 130px;
    border-radius: 6px;
    box-shadow: 2px 3px 5px 1px black;
    padding:23px;
}



.toscana{
    color: #FF0000 !important;
}

.aslona{
    color: #0084B2 !important;
}

.exasl{
    color: #528014 !important;
}

.comune{
    color: #0033cc !important;
}
.zona{
    color: #6F00FF !important;
}



.toscana:nth-child(1){
    padding-left:0px !important;
    text-align:left !important;
}

.aslona:nth-child(1){
    padding-left:5px !important;
    text-align:left !important;
}

.exasl:nth-child(1){
    padding-left:9px !important;
    text-align:left !important;

}

.zona:nth-child(1){
    padding-left:13px !important;
    text-align:left !important;
}

.comune:nth-child(1){
    padding-left:18px !important;
    text-align:left !important;
}
.presidio:nth-child(1){
    padding-left:15px !important;
    text-align:left !important;
}

.cella_std_eta{border:1px solid #c5c5c5;border-top:0px;}
.cella_std_num{border:1px solid #c5c5c5;border-left: 0px;border-top:0px;}


.titolo_sintesi{
    color:#515151;
    background-color: white;
    padding:3px 0px 3px 0px;
    border-radius: 0em;
    margin-top: 10px;
}

.contenitore1_sintesi{
    padding: unset;
}



.panel-giallo{
    border-color:#ffcc00;
}
.panel-giallo > .panel-heading{
    background-color: #ffcc00;
    border-color: #ffcc00;

}
.panel-giallo > .panel-heading > .panel-title{
    font-weight: bold;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.h_mappa_1_3{
    height:385px;
}
.h_mappa_2_4{
    height:422px;
}
.h_mappa_3_4{
    height:500px;
}
.h_mappa_4_4{
    height:600px;
}
.h_mappa_timeline{
    height:521px;
}
.h_mappa_timeline_4_4
{
    height:670px;
}

.h_mappabolle{
    height:742px;
}
.h_mappa_bolle_4_4
{
    height:670px;
}
.img_richiesta{
    color:#ffffff;
}

.scritta1_40{
    font-size: 40em;
}

.titoli_mappe{
    line-height: 14px;
    margin: 5px;
    color:#000000;
}

.form-control:focus {
    border-color: #ffcc00;
}
select option:hover {
    box-shadow: 0 0 10px 100px #ffcc00 inset;
}

.fonte_mappe{
    margin-top:10px;
    height: 54px;
}

.btn_portali_dati{
    border-radius: 0.5em;
    background-color: #ffffff;
    border: 2px solid #666666;
    height:160px;
    width: 77%;
    margin-left: auto;
    margin-right: auto;
}
.btn_portali_dati > .tit{
    border-radius: 0.5em;
    border-bottom-left-radius:0em;
    border-bottom-right-radius:0em;
    border: 2px solid #666666;
    padding-top: 7px;
    height: 50px;
    background-color: #666666;color:#ffcc00;
    margin-left: -2px;
    margin-right: -2px;
    margin-top: -2px;
    text-align: center
}
.btn_portali_dati > .testo{
    font-size: 12px;
    color: #666666;
    padding-top: 4px;
    text-align: center;
    font-weight:bold;
    height: 69px;
}
.btn_portali_dati > .icona{
    margin-left: 74px;
    margin-top: -2px;
}
.btn_portali_dati > .icona > img{
    width:57px;
}


.img-responsive_tabella{
    width:80%;
    margin-left: 10%;
    height: 140px;
}

.width100{
    width: 100%;
}
.width20{
    width:20%;
    float:left;
}

.lun_sup_30{
    font-size: 9px;
}
.lun_sup_25{
    font-size: 9px;
}
.lun_inf_25{
    font-size: 10px;
}
.colore_titoli{
    color: #fecc0b;
}
.cont_cerca{
    margin-bottom: -30px;
}
.div_box_sintesi{
    margin-top:10px;
    width:90%;
    margin-right: 0px;
    margin-left: 5%;
    height: 56px;
}
.div_box_menu_app{
    margin-top:10px;
    width:90%;
    margin-right: 0px;
    margin-left: 5%;
    height: 77px;
    border:2px solid #666666;
}
.div_titolo_box_sintesi
{
    padding-top: 2px;
    height: 17px;
}

.titolo_sezione_hp{
    font-size: 20px;
}
.label_titolo_box_sintesi {
    font-size: 22px;
    line-height: 22px;
    font-weight: normal;
    margin-top:2px;
}
.label_titolo_box_menu_app{
    font-size: 14px;
}
.label_interno_box_sintesi{
    font-size:15px;
    line-height: 16px;
    padding-top: 4px;
}
.label_interno_box_menu_app{
    font-size: 12px;
    line-height: 15px;
    padding-top: 9px;
}
.div_interno_box_sintesi{
    padding: 0px;
    padding-right:15px;
    padding-left:15px;
    padding-top:20px;
    text-align: center;
    height:110px;
}
.div_interno_box_menu_app
{
    padding: 0px;
}
.div_img_box_sintesi
{
    margin-left:74%;
    margin-top: -27px;
    width: 130px;
    max-width: 70px;
}

.div_img_box_menu_app {
    width: 15%;
    margin-left: 89%;
    margin-top: -20px;
    max-width: 150px;
}


.div_img_box_progetti{
    width: 15%;
    margin-left: 89%;
    margin-top: -20px;
    max-width: 150px;
}

.bordo_box{
    border-radius: 0.3em;
    border:1px solid #fecc0b !important;
}

.box_notasopra{
    background-color: #f9f9f9;
    margin-bottom: -9px;
    margin-top:113px;
}
.box_notasotto{
    background-color: #f9f9f9;
    margin-top: -10px;
}
.pd_bordo{
    padding:4px;
    height: 108%;
}
.inc_parametri_top{
    margin-top:20px;
}
.titolo_sintesi{
    font-size: 30px;
}

.margini_sintesi_par_top{
    margin-left: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-left: 0px;
}

.container_corpo{
    color: #515151;
    background-color: white;
    /*padding: 10px 0px 10px 0px;*/
    min-height: 70px;
    margin-top: 30px;
}

.contenitore_sganciabile{
    padding: 1%;
    border-radius:0.5em;
}
.titoli_sintesi{
    margin-left: -15px;
    margin-right:-15px;
}

/* -- Inizio Sezione CELL */
.icona_lista_ind_xs{
    width:34px;
    height:34px;
}

.btn_grafico_lista_xs{
    margin-top:5px !important;
    border-bottom: #8c8c8c 1px solid;
}
.overflow_sintesi{
    overflow-x: hidden;
    overflow-y: auto;
    width: 250px;
}

.btn_grafico_lista_no_bordo{
    margin-top:5px !important;
}
.media-left a:focus, .media-body a:focus{
    text-decoration: none !important;
}
.mbottom_progetti{
    padding-bottom: unset;
}

.mbottom_bottoni_progetti{
    margin-bottom: 50px;
}

.fixedPanel_sintesi{
    position: fixed;
    top:20px;
    display:none;
    z-index:999999;
}
.fixedPanel_sintesi{
    display: block;
    width:90%;
}
.fixedPanel_sintesi  .btn-giallo
{
    background-color: black;
    color:white;
}
.sibordo{
    border: 1px solid #ffcc00;
    border-radius: 5px;
}

.nobordo{
    border: unset;
    border-radius: unset;
}

.box_documentazione{
    margin-top: 9px;
}
.interno_documentazione{
    border-radius: 0.5em;
    background-color: #f6f6f6;
    color:#777777;
    border: 1px solid #c6c6c6;
}
.interno_desc_sintesi{
    color:#777777;
}

.interno_richiesta{
    border-radius: 0.5em;
    background-color: #ffcc00;
    color:#ffffff;
    border: 1px solid #ffcc00;

}
.img_richiesta {
    margin-right:-9px;
    margin-left:-9px;
    line-height: 18px !important;
    font-size: 33px;
    color: #ffffff;
    font-weight: normal !important;
}


.img_cont_documentazione{
    padding-top: 20px;
    padding-left:23px;
}
.img_documentazione {
    font-size: 28px;
    color: #ffcc00;
    font-weight: normal !important;
}

.margin-top30cerca{
    margin-top:30px;
}

.img_cont_richiesta{
    padding-top: 15px;
    padding-left: 8px;
    padding-bottom: 5px;
    padding-right: 2px;
}
.img_richiesta {
    margin-right: -30px;
    margin-left: -9px;
    line-height: 18px !important;
    font-size: 30px;
    color: #ffcc00;
    font-weight: normal !important;
    color: #000000;
}

.scritta_cont_documentazione{
    text-align: center;
    margin-top: 10px;
}

.scritta_cont_richiesta{
    text-align: center;
    margin-top: 10px;
}

table.dataTable thead th,
table.dataTable thead td {
    padding: 0px 0px;
    border-bottom: 1px solid #111;
    font-weight: normal;
    font-size:12px;
}
table.dataTable thead .sorting
{
    background-image:unset;
}
table.dataTable thead .sorting_asc
{
    background-image:unset;
}
table.dataTable thead .sorting_desc
{
    background-image:unset;
}

.margin_top_xs{
    margin-top:10px;
    margin-left: -46px;
}
.bordo_bd_xs {
    border: 0px solid #ffcc00;
    border-radius: 0px;
}

.font_box_dettaglio_sx{
    font-size:0.838vw;
}
.cont_media_dx{
    /*margin-left: -30px;*/
    border-bottom: 1px solid #8c8c8c;
    margin-right: -15px;
}
.cont_tit_vert_bott{
    margin-left: -17px;
    width: 109%;
}

.pd_combo{
    padding-left:25px;
    padding-right:25px;
}
.chart_linee_h34, .chart_barre_h34{
    height: 300px;
}

.chart_piramide_h34{
    height: 350px;
}
.chart_barre_geo_sex_h34{
    height: 300px;
}
.chart_flussi_geo_sex_h34
{
    height: 300px;
}
.chart_flussi_geo_sex_h{
    height: 180px;
}
.margine_top_box_grafici
{
    margin-top:10px;
}
.margine_bottom_box_grafici
{
    margin-bottom:10px;
}

.margine_passivo{
    margin-top:5px;
}
.scritta_passivo{
    font-size:14px;
}
.margine_tabella{
    margin-top:10px;
}
#g_flussi_geo
{
    margin-bottom: 10px;
}
.titolo_tabella{
    margin-left:5px;
}
.sottotitolo_tabella{
    margin-left:5px;
    margin-top: -5px;
}

.btn_documentazione_icona{
    padding-top:20px;
}
.btn_documentazione_text {

    padding-top: 18px;
    padding-bottom: 20px;
    padding-left: 6px;
    font-size: 16px;
    line-height: 18px;

}
.toscana, .aslona, .zona{
    font-size:13px;
}

.padding_top_elenco_home{
    padding-top:40px;
}

.box_geo > .box_bd_info{
    padding-bottom: 10px;
}

.logo_ARS2 {
    max-width: 250px;
    margin-left: -15px;
}
.logo_RT2 {
    max-width: 250px;
    margin-top: 24px;
    margin-left: 80px;
    margin-bottom: 10px;
}

.logo_RT2XS
{
    float: left;
    max-width: 115px;
    margin-top: 8px;
    margin-left: 21px;

}
.logo_ARS2XS{
    float: left;
    max-width: 110px;
    margin-left: -13px;
    padding-left: 0;
}
#div_par_top_geografia{
    margin-left:0px;
}



#iconAppMenu{
    position: absolute;
    top:120px;
    left:100px;
    width:500px;
    height:auto;
    border:1px solid #ccc;
    background-color: #dddddd;
    z-index: 9000;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    display: none;
}

.padding_1_4_ext{
    padding: 0.347vw;
}

.btn-link{
    border-radius: 50px;
    border:1px solid whitesmoke;
}

.chart_barre_h_ext{
    height: 300px;
}
.chart_barre_h34{
    height: 400px;
}
a:hover {
    color: #262626;
    text-decoration-line: none;
}

.btn_icon_app{
    margin:15px;
    border-radius: 0.5em;
    background-color: #ffffff;
    width: 26%;
    height: 152px;
    border: 2px solid #666666;
    margin-top: 0;
}
.btn_icon_app_sottotitolo{
    cursor: pointer;
    padding: 0;
    padding-top: 4px;
    margin: 0;
    text-align: center;
    height: 110px;
    font-size: 15px !important;
    line-height: 15px;
}
.btn_icon_app_img{
    margin-left: 80px;
    margin-top: -42px;
    width: 60px;
}

.btn_lay_fluido{
    margin:0vw;
    padding:14.5px;

}
.btn_lay_fluido > a{
    font-size:18px !important;
}
.margin_t30xs{
    margin-top:30px;
}

.titolo_ioz{
    margin-bottom: 0px;
    font-size: 18px;
}
.chart_heatmap_h34{
    height: 570px;
}

.titolo_capitolo_sintesi{
    font-size:20px;
}

.link_ioz{
    margin-bottom: -15px;
}

.box_ioz{
    font-size: 14px;
}

.box_hp{
    width:100%;
    margin-top: 10px;
    height: 260px;
}

.padding_5{
    padding:5px;
}
.padding_lr_10{
    padding-left:10px;
    padding-right:10px;
}
.scritta_nero{
    color:black !important;
}

.cerca_cont
{
    padding-bottom: 0px;
    margin-bottom:5px;
}

.btn_barra_cerca{
    font-size: 28px;
}

.container {
    width: 1300px;
}

.margin-btn-sintesi-top {
    margin-bottom: 25px;
}
.padding_b20{
    padding-bottom: 0px;
}
.logo_ARS2{
    max-width: 222px;
}
.logo_RT2 {
    max-width: 225px;
    margin-left: 11px;
    margin-bottom: 10px;
    margin-top:15px;
}
.div_box_sintesi{
    margin-left: 1%;
    margin-top:unset;
    width: 30%;
    margin-right: 15px;
    height: 160px;
    width: 15.5%;
    margin-right: 21px;
    border: 2px solid #666666;
    border-radius: 0.5em;
}
.div_img_box_sintesi_primo
{
    margin-left: 2.7%;
}
.div_img_box_sintesi_primo_sotto{
    margin-left: 2.6%;
}
.div_titolo_box_sintesi
{
    height: 50px;
    border-radius: 0.5em;
    border-bottom-left-radius:0em;
    border-bottom-right-radius:0em;
    border: 2px solid #666666;
    background-color: #666666;
    color:#ffcc00;
    margin-left: -2px;
    margin-right: -2px;
    margin-top: -2px;
    text-align: center;
}

.altezza_tabella {
    height:60%;
}
.h_box_sintesi{
    height:260px;
    background-color: #ffffff;
    padding: 10px;
}
.img-btn-sintesi {
    height: 183px;
}
.h_box_grafici{
    height:260px;
    background-color: transparent;
}
.h_box_grafici_tabella{
    height:260px;
    background-color: transparent;
}
.h_box_piramide{
    height:260px;
    background-color: transparent;
}



.messaggio_nodati_sottotitolo
{
    margin-top: 20px;
}

.messaggio_nodati{
    line-height: 15px;
    text-align: left;
    padding-left: 10px;
    margin-top: 10px;
}

.sottotitolo_bottoni_hp{
    min-height: 159px;
}
.sottotitolo_bottoni_iconApp{
    min-height: 63px;
}

.box_covid-md{
    height: 150px;;
    margin: 0;
    margin-bottom: 0px;
}

.box_importante{
    margin: 20px;
    padding: 5px;
    border-radius: 0.5em;
    border: 2px solid red;
    width: 97%;
    background-color: lightgrey;
    font-size:20px;
}

.box_prose-md{
    height: 44px;;
    margin: 0;
    margin-bottom: 0px;
}

.titolo_prose_mobile {
    font-size: 18px;
    background-color: #5d5d5d;
    color: white;

    border-radius: 5px;
    padding: 3px 10px 3px 10px;
    line-height: 17px;
    font-size: 16px;
}

.box_prose250-md{
    height: 150px;;
    margin: 0;
    margin-bottom: 0px;
}

/*-index.php-*/
.chart_barre {
    width: 100%;
}

.chart_linee {
    width: 100%;
}

.chart_linee2 {
    width: 100%;
}

.chart_torta {
    width: 100%;
}
.chart_piramide {
    width: 100%;
}

.info {
    padding: 6px 8px;
    font-size: 14px;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.info_timeline {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,1);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 0px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}

.legend {
    line-height: 18px;
    color: #555;
}
.legend i {

    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}
/* -- sintesi_fluida.php -- */
.dataTables_wrapper{
    overflow: auto;
}

.pos_exp_sintesi_tabella{
    right: 14px !important;
}

#dest_top_text4 table tr th{
    font-size:12px;
    white-space: nowrap;
}
#dest_top_text4 table tr td{
    font-size:12px;
    line-height: 1.2;
}

.zona_attiva{
    font-size:8px;
}
.zona_attiva i {
    width: 12px;
    height: 12px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

g[role="button"]{
    fill:red !important;
}
/* dettaglio_indicatore.php */
.titoli_mappa{
    margin-top:-10px !important;
    margin-left:5px !important;
    width:791px;
}
.zona_attiva{
    font-size:8px;
}
.zona_attiva i {
    width: 12px;
    height: 12px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

.titoli_mappa{
    width:800px;
    top: -5px;
    left: -5px
}
.titoli_mappe_1_3{
    line-height: 16px;
}
.scritta_1{
    margin-bottom: 10px;
    min-height: 30px;
    padding: 0px;
}
.titoli_mappa_timeline
{
    top: 9px;
    left: 0px;
}
.mappa_timeline{
    margin-top:10px;
}
.bottomtmappe{
    margin-bottom: 14px;
}

.posmostradati
{
margin-bottom:20px;
margin-top:-25px;
}

/* I:Spinner a rondella */

.lds-spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: #fff;
}
.lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
}
@keyframes lds-spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* F:Spinner a rondella */