.toolsContainer {}
.toolsContainer #toolIntro {}
.toolsContainer .toolTitle {text-transform:uppercase; margin:0 0 30px;}
.toolsContainer .toolText {line-height:1.3; margin-bottom:30px;}

/* ALL tools remote control button */
#openToolsBTN {text-align: center; position: absolute; right: 0; top: 0; padding: 5px; margin: 0; z-index:2; background:#20365c; width:85px; height:85px;}
#openToolsBTN:hover {background: #0062c5;}

#openToolsBTN .toolsBtnIco {margin: 10px 0 5px;}

#openToolsBTN i {font-size: 28px; line-height: 30px; margin: 0; color:white;}
#openToolsBTN span {display: block; font-size: 10px; color:white;}



/* The Overlay (background) */

#toolsRemoteControlContainer {
  /* Height and width depends on how you want to reveal the overlay (see JS below) */    
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1050; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: hidden; /* Disable vertical scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  opacity:1;
}

/* Position the content inside the overlay */
.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 */
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  color:white;
z-index:10;
}

#toolsRemoteControl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); margin-top: 0;}

#toolsRemoteControl h2 {color:white; margin: 0 0 30px;}
#toolsRemoteControlList {text-align: center;}
#toolsRemoteControlList li { display: inline-block; float:none; vertical-align:top;}
#toolsRemoteControlList li a {display:block;}
#toolsRemoteControlList li a:hover,
#toolsRemoteControlList li a:focus,
#toolsRemoteControlList li a:active {text-decoration:none;}

#toolsRemoteControlList .panel {padding:15px; height:120px;}

#toolsRemoteControlList .panel * {}
#toolsRemoteControlList .toolsBtnIco {
display: block;
    float: none;
    font-size: 50px;
    font-family: 'pgt-n';
    line-height: 60px;
    /*border: 1px solid #bbb;*/
    width: 70px;
    border-radius: 50%;
    margin: 0 auto;}

#toolsRemoteControlList .toolsBtnTxt {text-transform: uppercase; font-size:12px; text-align:left;}

#toolsRemoteControlList .toolsBtnIco .min {font-size: 40px;
    font-family: 'pgt-n';
    text-transform: lowercase;}





#toolsRemoteControlList .chActive .panel,
#toolsRemoteControlList .panel:hover 
{background-color:#01b1ce;}
#toolsRemoteControlList .chActive .panel *,
#toolsRemoteControlList .panel:hover * {color:white;}

#toolBody .table-hover tr:hover {
  cursor: pointer!important;
  background-color: #cde6fa!important;
}

#toolBody .table-hover th { background-color: #0c2d47; color: white;}


.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {background:#007edb;}

.nav-pills>li.active>a * {color:white;}

/* PML */

    #table_azioni div.row:nth-child(odd){}
    #table_azioni div.row:nth-child(even) {background:#f4f4f4;}
    #table_azioni div.row:hover {background-color:#cde6fa;}

    #table_azioni div.row div[class*="col-"]{padding:5px;}
    .azione_peugeotitalia {background-color: red;}

    .effettivo {border: 0;}

    #dettaglioazione {width: 96% !important;}

    .campo {float: left; width: 400px;}

    ul#prodottiBTOC, ul#prodottiBTOB {float: left;clear: both;width: 100%;list-style: none;margin: 0px;padding: 5px 10px;height: 150px;overflow-y: scroll;overflow-x: hidden;background-color: rgb(238, 238, 238);margin-bottom: 10px;}
    ul#prodottiBTOC input, ul#prodottiBTOB input{margin-right: 5px}

    ul#prodottiBTOB {height: 80px;}

    #BTOC {height: 150px}
    #BTOB {height: 80px}

    #prodottibtobdiv, #prodottibtocdiv{margin-top:15px;}

    #table_azioni th {text-align:center}
    #table_azioni th, #table_azioni td{border-left:1px dotted #000; padding:0px 2px}

#table_azioni .detailsBody .row {position: relative;}


ul.dressed-ul-menu {padding:0; margin:0;}
ul.dressed-ul-menu input {display:none;}
ul.dressed-ul-menu li {list-style-type:none; display:inline-block; padding:0 5px; width:10%; vertical-align:middle;}
@media (max-width: 992px){
  ul.dressed-ul-menu li {width: 20% }
  .pmlChannelDesc{overflow: hidden;}
}
ul.dressed-ul-menu li label {background:#f5f5f5; display: block; height: 70px; border-radius:2px; padding:5px; color:#333;}
ul.dressed-ul-menu li label:hover {cursor:pointer; background-color:#f4f4f4;}

ul.dressed-ul-menu li span.pmlChannelDesc {line-height:1.1; display:block; text-transform:uppercase; font-size:10px; text-align:center; margin: 6px 0 0;}
ul.dressed-ul-menu li span.pmlChannelIco {line-height: 1; margin-top: 3px; display: block;}
ul.radio-dressed-list {padding:0; margin:0;}

ul.dressed-ul-menu li input:checked + label {background-color:#01b1ce; color:white;}
ul.dressed-ul-menu li input#channel_1 + label span.pmlChannelIco:before { content:"\4d";}
ul.dressed-ul-menu li input#channel_2 + label span.pmlChannelIco:before { content:"\4c";}
ul.dressed-ul-menu li input#channel_3 + label span.pmlChannelIco:before { content:"\46";}
ul.dressed-ul-menu li input#channel_4 + label span.pmlChannelIco:before { content:"\44";}
ul.dressed-ul-menu li input#channel_5 + label span.pmlChannelIco:before { content:"\4e";}
ul.dressed-ul-menu li input#channel_6 + label span.pmlChannelIco:before { content:"\42";}
ul.dressed-ul-menu li input#channel_7 + label span.pmlChannelIco:before { content:"\41";}
ul.dressed-ul-menu li input#channel_8 + label span.pmlChannelIco:before { content:"\48";}
ul.dressed-ul-menu li input#channel_9 + label span.pmlChannelIco:before { content:"\49";}
ul.dressed-ul-menu li input#channel_0 + label span {margin: 0; font-size:16px; line-height:60px;}
ul.dressed-ul-menu li span.pmlChannelIco:before {font-family:'icoPml'; display:block; text-align:center; font-size:28px; margin-bottom:5px;}

ul.radio-dressed-list li {list-style-type:none; display:inline-block; padding:0 5px;}
ul.radio-dressed-list li input {display:none;}
ul.radio-dressed-list li label {display:block; border-radius:2px; border:1px solid #ebebeb; font-size:12px; text-transform:uppercase; padding:5px; min-height:50px; color:#333;}
ul.radio-dressed-list li label:hover {cursor:pointer; background-color:#f4f4f4;}
ul.radio-dressed-list li input:checked + label {background-color:#01b1ce; color:white;}

#table_azioni div.row {position:relative;}
#table_azioni div.row div[class*="col-"] {padding:10px 5px;
  /*position: absolute;
  top: 50%;
  transform: translateY(-50%);*/
}

.row.azione_mese {background-color: #0c2d47 !important; color: white; padding:15px; text-transform:uppercase;}

span[class*="pml-channId-"]{font-family:'icoPml';}
.pmlChIco {text-align:center;}
.pmlChIco span:first-child {font-size:28px; display:block;}
.pmlChIco span:last-child {font-size: 9px; text-transform: uppercase; line-height: 1;display: block; margin-top: 5px;}

.pmlStatus {display:block; font-size:9px; text-transform:uppercase;}
.pmlPaymentStatus {min-height:75px;}
.pmlPaymentStatus.statusPagato_ {border-left:5px solid red;}
.pmlPaymentStatus.statusPagato_ i {color:red;}

.pmlPaymentStatus.statusPagato_1 {border-left:5px solid green;}
.pmlPaymentStatus.statusPagato_1 i {color:green;}

.pmlOwnerDetails {font-size:12px;}
span[class*="pmlAge"] span:first-child {font-family:'pgt-n'; margin-left: 8px; margin-right: 2px;}
span.pmlAgeDR span:first-child {margin-left:0;}

.pmlDate {width:45%;text-align: center; font-size: 21px; font-family: 'pgt-n';}
.pmlDate:first-child {float:left; position:relative;}
.pmlDate:first-child:after {content:"\E5CC"; font-family:"Material Icons"; color:orange; font-size:24px; top:30%; right:-43%; position:absolute;}
.pmlDate:last-child {float:right;}
.pmlDate span {display:block;}


.pmlEconomDet {clear:both; display:block; font-size: 11px; line-height: 1.6;}
.pmlEconomDet span:first-child {float:left; font-weight:bold; text-transform: uppercase; font-family: 'pgt-n';}
.pmlEconomDet span:last-child {float:right;}
.pmlEconomDet span:last-child:after {content:'€'; margin-left:2px;}

/* PERFO 360 */

#perfo360 {padding: 15px;}
#perfo360 *{  -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
hr{float: left; width: 100%; clear: both; margin:5px 0px; border:0px; border-top: 1px solid #e5e5e5}

.perfoBox {margin:15px 0;}

#prf_premio_wrap{background:#FF0000;text-align: center; color: #FFF; padding:15px;}
#prf_premio_wrap.raggiunto{background:#35b74b;}
#prf_premio{color: #FFF; margin: 0px; font-weight: bold;}
#prf_premio:after{content: "€"; font-size: 50%; font-weight: normal;}


#prf_ragioneSociale{margin: 8px 0px 5px; font-weight: bold}

.aggiornamento{color: #666; font-size: 12px; text-transform: uppercase; font-weight: normal;}

.perfoBox h1, h1.perfoTit {text-transform: uppercase; color: #b3b3b3; font-size: 20px; margin-bottom: 10px; font-weight:bold;}
.obtLabel {text-transform:uppercase; font-size:9px; display:block; text-align: center; margin: 0 0 3px;}
.perfoBox .risultato {position: absolute; right: 70px;
  -webkit-transition: top 0.2s ease-out; /* Safari */
  transition: top 0.2s ease-out;}
.perfoBox .risLabel {display: none}
.perfoBox .ris {font-size: 27px; line-height: 29px; font-family:'pgt-l'; color: #FFF; background: #000; display: inline; padding: 2px 10px 4px; position:relative;}
.perfoBox .perfoPerc {font-size:40%; margin-left:3px;}
.obiettivo {position:absolute; width:90px; left:-90px; margin:0; text-align: center; border: 1px solid #ccc;
  color: #666;
  height: 41px;
  top: -5px;
  padding: 3px;
  background: white;
}
.risultato.under {top: 190px;}
.risultato.raggiunto .obiettivo:before {content:"\f058"; font-family: "FontAwesome"; left:-11px; top:-11px; font-size:24px; color:#35b74b; background:#FFF; display:block; position: absolute;border-radius:20px;}
.risultato.non-raggiunto .obiettivo:before {content:"\f057"; font-family: "FontAwesome"; left:-11px; top:-11px; font-size:24px; color:#FF0000; background:#FFF; display:block; position: absolute; border-radius:20px;}
.obiettivo .perfoPerc {font-size:90%;}
.obt {font-size:24px; line-height:15px;}

.perfoBox .ris:after, .perfoBox .ris:before{
  content:"";
  position:absolute;
  width: 12px;
  height: 50%;
  left: 100%;
}
.perfoBox .ris:after{
  bottom:0;
  background: linear-gradient(to right bottom, #000 50%, transparent 50%);
}
.perfoBox .ris:before{
  top:0;
  background: linear-gradient(to right top, #000 50%, transparent 50%);
}


.perfoBox .quartili {width: 100%; float: left; margin-top: 40px;}
.perfoBox .quartili div:nth-of-type(odd) {background-color:#fff;}
.perfoBox .quartili div:nth-of-type(even) {background-color:#f6f6f6;}
.perfoBox .quartili div {float: left; width: 100%; display: table; height:30px;}

.perfoBox .q { display: -webkit-box; font-size: 11px; padding-left: 3px; padding: 0; margin: 0; margin-top: -5px; float: left;}

.perfoBox .qlabel {color: #FFF; float: right; padding:0px 3px; display: table; height: 100%; line-height:30px; font-size:12px;}
.perfoBox .q1label, .perfoBox .rif_q1 .ris {background:#a9d18e;}
.perfoBox .q2label, .perfoBox .rif_q2 .ris {background:#ffe699;}
.perfoBox .q3label, .perfoBox .rif_q3 .ris {background:#ed7d31;}
.perfoBox .q4label, .perfoBox .rif_q4 .ris {background:#ff0000;}
.perfoBox .q5label, .perfoBox .rif_q5 .ris {background:#ab59c0;}
.perfoBox .top .ris {background:#a9d18e;}

.perfoBox .rif_q1 .ris:after, .perfoBox .top .ris:after {background: linear-gradient(to right bottom, #a9d18e 50%, transparent 50%);}
.perfoBox .rif_q1 .ris:before, .perfoBox .top .ris:before {background: linear-gradient(to right top, #a9d18e 50%, transparent 50%);}

.perfoBox .rif_q2 .ris:after {background: linear-gradient(to right bottom, #ffe699 50%, transparent 50%);}
.perfoBox .rif_q2 .ris:before {background: linear-gradient(to right top, #ffe699 50%, transparent 50%);}

.perfoBox .rif_q3 .ris:after {background: linear-gradient(to right bottom, #ed7d31 50%, transparent 50%);}
.perfoBox .rif_q3 .ris:before {background: linear-gradient(to right top, #ed7d31 50%, transparent 50%);}

.perfoBox .rif_q4 .ris:after {background: linear-gradient(to right bottom, #ff0000 50%, transparent 50%);}
.perfoBox .rif_q4 .ris:before {background: linear-gradient(to right top, #ff0000 50%, transparent 50%);}

.perfoBox .rif_q5 .ris:after {background: linear-gradient(to right bottom, #ab59c0 50%, transparent 50%);}
.perfoBox .rif_q5 .ris:before {background: linear-gradient(to right top, #ab59c0 50%, transparent 50%);}

#chart-container {margin-top:30px;}

/* **** */

/* ORGANIGRAMMA */

.OrgCriteri {text-align: center;}
.OrgCriteri ul {margin: 0 auto; padding: 0; display: inline-block;}

.OrgCriteri li {
  width: 100px;
  background: #f5f5f5;
  
  height: 100px;
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 20px;
  list-style-type:none; padding:0;
  border:3px solid #f5f5f5;
  position: relative;
}

.OrgCriteri li.highlight {border:3px solid orange;}
.OrgCriteri li span {display:block;}
.OrgCriteri li span:first-child {font-size:10px; text-transform:uppercase; padding:18px 5px 0; line-height: 1.2; max-width:100px;}
.OrgCriteri li span:last-child {font-size:28px; line-height: 1.5; font-weight: bold;}

.OrgCriteri li span.notnum {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'pgt-b';
  padding: 0 10px;
  line-height: 1.2;
  margin-top: 5px;}


.OrgCriteri li:before {content:"\E86C"; display:block; font-size:28px; font-family:"Material Icons"; width:20px; height:20px; position:absolute; bottom:40px; left:-18px; color:#4caf50;}
.OrgCriteri li.highlight:before { left:-20px; content:"\E8B2"; color:orange;}

/* ************ */
/* mediaqueries */
/* ************ */

@media (max-width: 767px) {
ul.toolsRemoteControlList li:nth-child(2n+2) {clear:right;}
}

@media (max-width: 580px) {

ul.toolsRemoteControlList li:nth-child(4n+4) {}

}




@media (max-width: 580px) {
#toolsRemoteControlList .panel {padding:5px; height:110px;}

.OrgCriteri ul li:nth-child(2n+2) {}

}