/* -------------------------------------
 * Style
 * ------------------------------------- */

/* GENERAL */
html{
    height: 100%;
    width: 100%;
    background: #fff url("../images/fond.png") repeat-x;
    font: normal normal normal 14.5px "Arial", Helvetica, Arial, Verdana, serif;
}


#cadre{
    min-height: 850px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top : 20px;
    padding-bottom: 15px;
    margin: 18px auto auto auto;
    width: 1200px;
    background: white;
    text-align: center;
    box-shadow: 1px 1px 12px #666a6e;
    overflow: hidden;
}

p.warning{
    color: red;
    font-weight: bold;
}

.inputHidden{
    display: none;
}

.inputText{
    text-align: center;
}

.inputTextCourt{
    text-align: center;
    width: 50px;
}

.inputTextMoyen{
    text-align: center;
    width: 150px;
}

.inputTextGrisCourt{
    text-align: center;
    width: 50px;
    background-color: gainsboro;
}

.invisible{
    visibility: hidden;
}

.cliquable{
    cursor:  pointer;
}

.CSVinfo{
    display: none;
}

.popup{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 250px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.popupCadre{
    margin: auto;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,.32), 0 8px 40px rgba(0,0,0,.4);
    border-radius: 20px;
    background: white;
    background-image: -webkit-linear-gradient(bottom , white 30%, rgba(102, 106, 110, 0.1) 100%);
    background-image: -moz-linear-gradient(bottom , white 30%, rgba(102, 106, 110, 0.1) 100%);
    background-image: -ms-linear-gradient(bottom , white 30%, rgba(102, 106, 110, 0.1) 100%);
    background-image: -o-linear-gradient(bottom , white 30%, rgba(102, 106, 110, 0.1) 100%);
    background-image: linear-gradient(bottom , white 30%, rgba(102, 106, 110, 0.1) 100%);
}

.tablesorter thead tr th{
    cursor: pointer;
}

.tablesorter thead tr th.tablesorter-headerUnSorted{
    background-image: url(../images/ice-unsorted.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

.tablesorter thead tr th.tablesorter-headerAsc{
    background-image: url(../images/ice-asc.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

.tablesorter thead tr th.tablesorter-headerDesc{
    background-image: url(../images/ice-desc.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}


#copyright{
    text-align: center;
    margin: auto;
    line-height: 0px;
}

/***************/

/* MENU GABARIT */

#menuAdmin{
    float: left;
    width: 50px;
    margin-bottom: -43px;
}

#menu{
    display: flex;
    text-align: center;
    height: 80px;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 10px;
    background-image: -webkit-linear-gradient(top , white 0%, rgba(102, 106, 110, 0.2) 100%);
    background-image:    -moz-linear-gradient(top , white 0%, rgba(102, 106, 110, 0.2) 100%);
    background-image:     -ms-linear-gradient(top , white 0%, rgba(102, 106, 110, 0.2) 100%);
    background-image:      -o-linear-gradient(top , white 0%, rgba(102, 106, 110, 0.2) 100%);
    background-image:         linear-gradient(top , white 0%, rgba(102, 106, 110, 0.2) 100%);
}

#menuGauche{
    line-height: 0px;
    width:  19%;
    margin: auto;
}

p#login{
    font-weight: bold;
    font-size: 18px;
}

#menuCentre{
    width: 29%;
    margin: -40px auto auto auto;
}

#backOffice{
    margin: -68px auto 31px 250px;
    cursor: default;
}

#menuDroite{
    width: 52%;
    margin: auto;
}

#menuDroite input{
    margin-right: 4px;
    padding: 0px;
    position: relative;
    z-index: 3;
}

.infoBulle{
    display: inline;
}

.btnMenu{
    width: 60px;
    height: 60px;
}

.infoBulle:active span{
    display: none;
}

.infoBulle span{
    box-shadow:0 0 2px rgba(0,0,0,.5);
    position: absolute;
    background: #0098a1;
    color: white;
    padding: 5px;
    border-radius:3px;
    transform:scale(0) rotate(-90deg);
    transition:all .25s;
    visibility: hidden;
    z-index: 2;
}

#infoBulleAdmin{
    margin-bottom: -30px;
}

#infoBulleAdmin span{
    margin-left: -73px;
    margin-top: 50px;
}

#infoBulleTabBord span{
    margin-left: -94px;
    margin-top: -35px;
}

#infoBulleTicket span{
    margin-left: -92px;
    margin-top: -35px;
}

#infoBulleSynthese span{
    margin-left: -73px;
    margin-top: -35px;
}

#infoBulleTotemHoraire span{
    margin-left: -90px;
    margin-top: -35px;
}

#infoBulleSite span{
    margin-left: -56px;
    margin-top: -35px;
}

#infoBulleBenchmark span{
    margin-left: -78px;
    margin-top: -35px;
}

#infoBullePrestataire span{
    margin-left: -80px;
    margin-top: -35px;
}

#infoBulleCarte span{
    margin-left: -61px;
    margin-top: -35px;
}

#infoBulleEnergyManager span{
    margin-left: -93px;
    margin-top: -35px;
}

.infoBulle:hover span, .infoBulle:focus span{
    transform:scale(1) rotate(0);
    visibility: visible;
}

#zoneCamera{
    width: 900px;
    margin: auto;
    transition: 1s linear;
}

.zoneCameraClose{
    height: 0px;
}

.zoneCameraOpen{
    height: 506px;
}

#vueCamera{
    height: 100%;
    width: 100%;
}

.colorGreen{
    color: green;
}

.colorRed{
    color: red;
}

.conteneurTexteMonoligne{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.texteMonoligne {
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conteneurElementAjuste{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.elementAjuste{
    width: 100%;
    height: 100%;
    margin: auto;
}

.backgroundPlein{
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/***************/


/** Telecommande CVC Controller **/
/*VERIFIER LES CSS COMMUNS AU DEUX TCV */

#tcvCvcCadre{
    width: 910px;
    height: 650px;
    margin: auto;
}

.btnTcvConfig{
    line-height: 50px;
}

.btnTcvConfig img{
    cursor: pointer;
    vertical-align: middle;
}

#popupCadreTcvCvcConfig{
    width: 510px;
    text-align: center;
    padding: 25px;
}

#titreTcvCvcConfig{
    width: 100%;
    margin: auto;
}

.tabTcvConfig{
    margin: 15px auto;
    border: rgba(0, 153, 161, 1) solid 3px;
    width: 500px;
    border-collapse: collapse;
    text-align: center;
}

.tabTcvConfig thead{
    border-bottom: rgba(0, 153, 161, 1) solid 3px;
}

.tabTcvConfig th{
    padding: 10px;
    font-weight: bold;
    border-right: rgba(0, 153, 161, 1) solid 3px;
    border-bottom: rgba(0, 153, 161, 1) solid 1px;
    background: rgba(237, 240, 243, 1);
}

.tabTcvConfig tr{
    border: rgba(0, 153, 161, 1) solid 1px;
}

.btnFermerTcvConfig{
    cursor: pointer;
}

.tcvZone{
    width: 910px;
    height: 600px;
    margin: auto;
    position: relative;
    z-index: 1;
}

.fondTcvMarche{
    width: 910px;
    height: 600px;
    position: relative;
    z-index: 2;
}

#fondTcvFanSpeedPanel, #fondTcvFanPosPanel{
    z-index: 4;
}

.fondTcvCvcValeurVA{
    width: 85px;
    height: 30px;
    margin-top: -30px;
    top: 80px;
    left: 385px;
    position: absolute;
    font-weight: bold;
    font-size: 18px;
    color: #2D9FA1;
    text-align: left;
}

.fondTcvCvcTempExtVA{
    width: 85px;
    height: 30px;
    margin-top: -30px;
    top: 80px;
    left: 505px;
    position: absolute;
    font-weight: bold;
    font-size: 18px;
    color: #2D9FA1;
    text-align: left;
}

#gaugeTcvCvc{
    width: 100%;
    height: 400px;
    margin-top: -400px;
    top: 600px;
    position: absolute;
}

#inputTcvCvcConsigne{
    width: 100px;
    font-size: 50px;
    text-align: center;
    position: relative;
    z-index: 3;
}

#fondTcvEawVA{
    width: 910px;
    height: 30px;
    margin-top: -30px;
    top: 340px;
    position: absolute;
    display: grid;
    font-weight: bold;
    color: #2D9FA1;
}

.fondTcvConsigneVA{
    width: 910px;
    height: 30px;
    margin-top: -30px;
    top: 500px;
    position: absolute;
    font-weight: bold;
    color: #2D9FA1;
}

#mapFondTcvCvc:hover, #mapFondTcvCvcFanSpeed:hover, #mapFondTcvCvcFanPos:hover{
    cursor: pointer;
}

#tcvCvcPanneau{
    width: 910px;
    height: 600px;
    margin: -600px auto auto auto;
    background-color: rgba(236, 236, 236, 0.6);
    position: relative;
    z-index: 5;
}
/*********************************/

/** TCV DALI **/
/*VERIFIER LES CSS COMMUNS AU DEUX TCV */

#tcvDaliCadre{
    width: 910px;
    height: 650px;
    margin: auto;
}

.tcvConfig{
    height: 50px;
    display: flex;
}

.tcvConfigG, .tcvConfigD{
    width: 50px;
}

.tcvConfigC{
    width: 810px;
}

.tcvConfigC H3{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fondTcv{
    width: 910px;
    height: 600px;
    margin-top: -600px;
    position: relative;
}

.fondTcvDaliDetectionVA{
    width: 50px;
    height: 50px;
    margin-top: -50px;
    top: 360px;
    left: 430px;
    position: absolute;
}


.fondTcvDaliValeurVA{
    width: 85px;
    height: 30px;
    margin-top: -30px;
    top: 80px;
    left: 440px;
    position: absolute;
    font-weight: bold;
    font-size: 18px;
    color: #2D9FA1;
    text-align: left;
}

#gaugeTcvDali{
    width: 100%;
    height: 400px;
    margin-top: -400px;
    top: 600px;
    position: absolute;
}

.fondTcvConsigne{
    width: 910px;
    height: 70px;
    margin-top: -70px;
    top: 450px;
    position: absolute;
}

#inputTcvDaliConsigne{
    width: 120px;
    font-size: 50px;
    text-align: center;
    position: relative;
    z-index: 3;
}

#mapFondTcvDali:hover{
    cursor: pointer;
}

#tcvDaliPanneau{
    width: 910px;
    height: 600px;
    margin: -600px auto auto auto;
    background-color: rgba(236, 236, 236, 0.6);
    position: relative;
    z-index: 4;
}

/*********************************/