body {
        height: 100%;
        FONT-FAMILY: Verdana;

        COLOR: #3E3E3E;
        margin: 0px;
        /*background: #D7D7D7 url(../Images/background/Bg.png);background-repeat: repeat-x;*/
        background:#E3E3E3;

        font-family: 'knockouthtf28', Arial, Helvetica, sans-serif;
        min-height:100%;
        padding-top:120px;
       
    }

  

    #Header { background: #F2F2F2 url(../Images/logos/Logo366.gif);background-repeat: no-repeat; width: 100%;height: 76px;position: fixed;top: 0px; z-index:4000;  }
    #Header .LogoServices {  background: url(../Images/logos/366Services.gif);background-repeat:no-repeat;width:239px;height:75px;display:table-cell     }
   
    #Header #TitreService{display:table-cell ;padding-left:40px; vertical-align:middle}
    #Header #TitreService h1{font-weight:normal;font-family:'Segoe UI';color:#B94C09;margin:0px;font-size:30px;}
    #Header #TitreService h2{font-weight:normal;font-family:'Segoe UI';font-size:20px;margin:0px}


    #Header #Info-Utilisateur{font-size:12px}
    #Header .Header-Right { background: #E5872D url(../Images/Background/HeaderR.gif);background-repeat: no-repeat;width: 400px;height: 75px;float: right;color:white;padding-left:70px;padding-top:10px  }
    .Footer, .Footer-RelPos {height: 50px;background-color: #E5872D;width: 100%;color: white;padding-left:0px;padding-right:0px;padding-top: 10px;}
    .Footer {position: absolute;bottom: 0;}



    .Footer-Links li{margin-left:15px;list-style:none; display:inline-block}
    .Footer-Links li a{ color:white;text-decoration:none;font: Verdana;}
    .Footer-Links li a:hover{color:#3E3E3E}

    #Mask{position: absolute;left: 0;top: 0;z-index: 6000;background-color: #000;display: none;}


/*--------- Corrections Bootstrap --------------------------------*/
.row {
    max-width: 99%;
}
    .form-Controls .row {    margin-left: 15px;}

    button { cursor: pointer;}
    label{font-weight:normal; margin-bottom:0px;}
    .form-group {margin-bottom: 0px}
     

    #Search{display:none}

/*-----------   Eléments de formulaires  -----------------------------*/
.Form-Cell, .Cell {display: inline-block;vertical-align: middle;}
.Form-Cel{margin-left:10px}


.form-Controls input[type=text], .form-Controls input[type=password] {
    width: 100%;
    height: 30px;
    padding: 6px 12px;
   
    line-height: 1.4285;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form-Controls input[type=text]:focus, .form-Controls input[type=password]:focus{border: 0.1em solid #DE6A0F; outline: none; }
.form-Controls .label-r{text-align:right;display:block;}

.form-Controls .Search {
    border-radius: 4px !important; -moz-border-radius: 4px !important; -webkit-border-radius: 6px !important;  background: white url(../Images/background/Bg_InputSearch.png);
    background-position-y: -3px; padding-left: 40px !important; background-repeat: no-repeat; height: 35px !important; border: 1px solid #CDCDCD;  width: 250px;vertical-align:middle;
}

/* Initialisation des éléments s'appuyant sur le fichier Sprite-Flat.gif */
#btn-Disconnect,.btn-view-Unes,.btn-view-Unes-active,.btn-view-Insertions,.btn-view-Insertions-active {background:  url(../Images/background/Sprite-Flat.gif) ; background-repeat:no-repeat;}


.btn-366-grey {background-color: #DAD5D1;border: 1px solid #A0A0A0;color: #333333;}
.btn-366-grey:hover {background-color: #DE6A0F;border: 1px solid #DE6A0F;color: white;}

.btn-366 { display: inline-block;    font-family: AvenirMedium,Arial,Helvetica,sans-serif;    font-weight: 400;    font-size: .875em;     text-decoration: none;
    text-align: center;    margin: 0;    padding: .425em 1.01em;    border-radius: 2em; -moz-border-radius: 2em !important; -webkit-border-radius:2em;    border: 1px solid #ea5330;    background-color: #DE6A0F;    min-width: 8.3em;    color: #fff;
    transition: all .5s ease;    cursor: pointer;    vertical-align: bottom;
}
.btn-366 span{padding-right:5px}
.btn-366:hover {background-color: #ea5330;color: #fff;}


#btn-Disconnect{ cursor:pointer;margin-left:40px;      width:73px;height:53px; background-position:-77px -43px}
#btn-Disconnect:hover{ background-position:-0px -43px}


.btn-badge,.btn-badge-inactive{color:white;border-color:#ddd;border-radius:2.5em; -moz-border-radius: 2.5em !important; -webkit-border-radius:2.5em;  display:inline-block; font-size:12px;padding:5px; margin-bottom:4px;}
.btn-badge{background-color:#DE6A0F;cursor:pointer;transition: opacity 0.5s;opacity: 0.6}
.btn-badge:hover{opacity: 1;}/*#A588BE*/
.btn-badge-active{opacity: 1;border:1px solid #DE6A0F}/*#A588BE*/
.btn-badge-inactive{ background-color:darkgray;opacity: 1; cursor:not-allowed}


.btn-view-Unes-active, .btn-view-Insertions-active, .btn-view-Unes, .btn-view-Insertions {
    height: 30px;
    width: 145px;
    cursor: pointer;
    color: white;
    font-family: AvenirMedium,Arial,Helvetica,sans-serif;
    font-weight: 400;
    font-size: .875em;
    line-height: 1.075em;
    padding: 7px 5px 1px 28px;
    box-shadow: 2px 4px 15px #aaa;
}

.btn-view-Unes-active, .btn-view-Unes {
    border-radius: 2.5em 0 0 2.5em;
    background-position: -173px -110px;
}
.btn-view-Insertions, .btn-view-Insertions-active {
    background-position: -174px -132px;
    border-radius: 0 2.5em 2.5em 0; -moz-border-radius:0 2.5em 2.5em 0; -webkit-border-radius:0 2.5em 2.5em 0;  
}
.btn-view-Insertions {background-position: -174px -217px;}
.btn-view-Unes{background-position: -173px -192px;}
.btn-view-Unes, .btn-view-Insertions {border: 1px solid #DFDFDF;color: #4B4B4B;transition: background-color 0.3s;}
.btn-view-Unes-active, .btn-view-Insertions-active {background-color: #DE6A0F;border: 1px solid #DE6A0F}
.btn-view-Unes:hover,.btn-view-Insertions:hover{background-color: #3871C2;color:white;border:1px solid #3871C2}


.btn-view-label,.btn-view-label-bt{font-size:12px;vertical-align:middle;padding-right:5px;display:inline-block;}
.btn-view-label-bt {display:block}

/*----------   Affichage d'un tooltip  ---------------------------------------------------*/
.btn-tooltip {
    position: relative; /*les .picto-item deviennent référents*/
    display: inline-flex;
    justify-content: center
}


    .btn-tooltip:hover:after {
        content: attr(aria-label); /* on affiche aria-label */
        position: absolute;
        top: -3.5em;
        left: 50%;
        transform: translateX(-50%); /* on centre horizontalement  */
        z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
        white-space: nowrap; /* on interdit le retour à la ligne*/
        padding: 5px 14px;
        background: #7B2365;
        color: #fff;
        border-radius: 4px;
        font-size: 1.2rem;
        transition: all .5s ease;
    }

/* on génère un second élément en :before pour la flèche #EE9400*/
[aria-label]:hover:before {
    content: "▼";
    position: absolute;
    color: #7B2365; 
    top: -1.2em;
    left: 50%;
    transform: translateX(-50%); /* on centre horizontalement  */
    font-size: 20px;
}



/*----------   Zone de recherche avec menu contextuel  ---------------------------------------------------*/
.context-search .Search {border-left: none;border-radius: 0px 4px 4px 0px !important;-moz-border-radius 0px 4px 4px 0px !important; -webkit-border-radius: 0px 4px 4px 0px !important}
.context-search .input-group-addon {cursor: pointer;background: url(../images/Icon_Arrow_Bottom.gif);background-repeat: no-repeat;padding-left: 18px;background-position-y: 3px}
.context-search .input-group-addon:hover {border: 1px solid #999999}




/*-----------   Formulaire de connexion -----------------------------*/
#Form-Login {
    width: 700px;
    height: 300px;
    border-radius: 6px 6px 0px 0px;
    border: 1px solid #DE6A0F;
    border-bottom: none;
    background: #F2F2F2 url(../Images/background/Bg-Form-Login.gif);
    background-repeat: no-repeat;
    background-position-y: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}

    #Form-Login tr {height: 50px}

    #Form-Login .Row1 {margin: 10px;padding: 5px;border-bottom: 1px solid #DE6A0F;}
    #Form-Login .Row2 {margin: 10px 10px 10px 100px;padding: 5px;}
    #Form-Login label {text-align: right;display: block;margin-top: 6px}
    #Form-Login input[type=text] {width: 300px}
    #Form-Login-Bottom {background: url(../Images/background/BgBottom-Form-Login.gif);background-repeat: no-repeat;width: 700px;height: 137px;margin-left: auto;margin-right: auto;}

    .btn-connexion { background-color: #DAD5D1; border: 1px solid #A0A0A0; color: #333333;}
    .btn-connexion:hover { background-color: #DE6A0F; border: 1px solid #DE6A0F; color: white;}



.Form-test {  border: 1px solid #F8B411;  background: #F2F2F2;border-radius:0px 0px 6px 6px;padding:10px; height:150px; position:fixed;top:75px; width:1400px;}


/*-----------   Paneaux et contenenu -----------------------------*/
.SectionPanel {  border: 1px solid #F8B411;background: #F2F2F2;border-radius: 6px;-moz-border-radius:6px; -webkit-border-radius: 6px ;  padding:10px;}
.SectionPanel .Panel-Title { border-bottom: 1px solid #F8B411; color:#666666;height:20px}


/*-----------   Messages d'alerte, d'avertissement etc... -----------------------------*/
.close {    margin-left: 5px}
.alert-popup {
    display: none;
    position: fixed;
    right: 60px;
    top: 100px;
    background-color: #990000;
    color: white;
    z-index: 9999;
    -moz-box-shadow: 10px 10px 5px 2px #cfcfcf;
    -webkit-box-shadow: 10px 10px 5px 2px #cfcfcf;
    -o-box-shadow: 10px 10px 5px 2px #cfcfcf;
    box-shadow: 10px 10px 5px 2px #cfcfcf;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=134, Strength=5);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

 .NoData{ background:url(../images/Flat_Warning32.gif); background-position-y:center; background-position-x:20px; padding-left:60px; background-repeat:no-repeat;   font-size:20px;  line-height:60px;margin:10px;  border-radius:5px }



.Wait-simple,.Wait-custom{display: none;position: absolute;z-index: 9999;border: 1px solid #CA9A3E;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;}
.Wait-simple {height: 150px;width: 150px;background: white url(../images/loading_1.gif);background-repeat: no-repeat;background-position: center;}
.Wait-custom{height: 100px;width: 250px;background: white url(../images/loading_4.gif);background-repeat: no-repeat;background-position: bottom; background-position-y:50px}
.Wait-Title{margin:15px; text-align:center}

.Loading{border: 1px solid #CA9A3E;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;height: 50px;width: 100px;background: white url(../images/loading_4.gif);background-repeat: no-repeat;background-position: center; margin-left:auto;margin-right:auto}

/*-------------  Fenêtres modales -----------------------------------*/
.Modal{display: none;position: fixed;z-index: 9999;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;background: white;}
.Modal  .Modal-Header{background:rgba(229, 135, 45, 0.8);height:50px;padding:10px;color:white;-moz-border-radius: 6px 6px 0px 0px;-webkit-border-radius:6px 6px 0px 0px;border-radius: 6px 6px 0px 0px;}
.Modal .Modal-title{float:left;padding:5px;font-size:16px}
.Modal .Modal-close{float:right;padding-right:5px;font-size:30px; width:30px;cursor:pointer;}
.Modal .Modal-close:hover{color:#666666}
.Modal .Modal-ToolBar{position:absolute; bottom:0; width:95%;height:40px; text-align:center ; padding-top:5px;margin-right:10px;margin-left:10px;margin-bottom:20px}
  


/*-----------   Pagination des enregistrements -----------------------------*/
.pagination{margin:0;} 
.pagination li a{color:#b94c09; font-size:12px} 
.pagination li a:hover{color:black;}
.pagination .active a{color:white;background-color:#DE6A0F;border-color:#ddd}
.pagination li:first-child a,.pagination li:last-child a{padding-top:3px;font-size:14px}


.DataTable {width:100%}
.DataTable .HeaderRowSkin1 div{margin:2px;padding:1px 5px 1px 5px; background-color:#ee6e52;    border-radius: 4px;  -moz-border-radius:4px;    -webkit-border-radius: 4px; color:white;font-size:12px; text-align:center  }
.DataTable .HeaderRowSkin2 td{border-bottom:2px solid #3871C2;color:#3871C2;font-size:12px;font-weight:bold }
.DataTable .Table-Row td{ color:#4c4c4c;font-family:Verdana;font-size:11px;}
.DataTable .Table-Row-Separate td{height:5px;}



#Liste-Campagnes {margin:10px 20px 10px 20px;padding:30px 10px 30px 30px;}

#Liste-Campagnes .Header-items{ background-color:#E5872D;color:white; font-size:18px; margin:0px 0px 20px 0px; text-align:center; border-radius:6px;-moz-border-radius:6px; -webkit-border-radius: 6px; border:1px solid white;}

#Liste-Campagnes .row-item{display: table-row;border-collapse: separate;}
#Liste-Campagnes .row-item-separate{height:10px }
#Liste-Campagnes .cell-item{ display:table-cell;height:90px  ; margin-right:-4px;  vertical-align:middle; border-top:1px solid #C7C7C7; border-bottom:1px solid #C7C7C7;  margin-bottom:5px; font-size:10px; font-family:Verdana;padding:5px 5px 5px 10px;}
#Liste-Campagnes .Firstcell-item{  background-color:#FFF8DC ;  border-radius:6px 0px 0px 6px ;-moz-border-radius:6px 0px 0px 6px; -webkit-border-radius :6px 0px 0px 6px  ; width:100px; vertical-align:middle;border-left:1px solid #C7C7C7; border-right:1px solid #EFA218;border-collapse:separate;border-spacing:0;
 }

#Liste-Campagnes .Cell-Visuel{ width:140px; background-color:white;  }
#Liste-Campagnes .Cell-Client{width:300px ;background-color:white; }
#Liste-Campagnes .Cell-Pub-Desc{width:300px; background-color:white; }
#Liste-Campagnes .Cell-Pub-Zones{width:300px; background-color:white; }
#Liste-Campagnes .Cell-LastCell{ width:40px;border-radius:0px 7px 7px 0px ; -moz-border-radius:0px 7px 7px 0px; -webkit-border-radius :0px 7px 7px 0px;  border-right:1px solid #C7C7C7;border-left:1px solid #EFA218;background:#C6DB7D;cursor:pointer; transition: all .5s ease; }
#Liste-Campagnes .Cell-LastCell:hover{ background:#E5872D;}

#Liste-Campagnes .Detail-Container{border:1px solid #C7C7C7; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius :5px  ;   margin-top:5px;padding:10px;background-color:white;}
    

.Item-label,.Item-value{display:inline-block}
.Item-label{color:black;}
.Item-valueHeavy{font-weight:bold}
.Item-valueHeavyColor{font-weight:bold;color:#b94c09; }
.Item-valueColor{color:#b94c09; }
.Item-badge {display: inline-block;min-width: 10px;padding: 3px 7px;font-size: 12px;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: middle;background-color:#E5872D;border-radius: 10px; -moz-border-radius:10px; -webkit-border-radius :10px }


#CampagneDetailContent ul{padding:0; margin:10px 0 0 0}
#CampagneDetailContent li{list-style:none;margin-bottom:20px;}
#CampagneDetailContent .Une-Item{ width:200px; border:1px solid #FDBD5E;opacity: 0.8;transition: opacity 0.5s;border-radius: 4px; -moz-border-radius:4px; -webkit-border-radius :4px;  background-color:#E3E3E3;cursor:pointer;-webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);-moz-transition: all .5s cubic-bezier( .6, 2, .4, 1);-o-transition: all .5s cubic-bezier( .6, 2, .4, 1);transition: all .5s cubic-bezier( .6, 2, .4, 1);}
#CampagneDetailContent .Une-Item img{height:255px;margin:5px;}
#CampagneDetailContent .Une-Item:hover{opacity: 1;-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);}

#CampagneDetailContent .Une-Item-Null{ width:200px;height:255px; border:1px solid #FDBD5E;border-radius: 4px; -moz-border-radius:4px; -webkit-border-radius :4px ; background-color:#E3E3E3;text-align:center;}
#CampagneDetailContent .Une-Item-Null img{padding-top:40px;padding-bottom:40px}

#CampagneDetailContent .Une-Desc{position:absolute; border:1px solid #FDBD5E;     bottom:0;opacity: 0.7; background-color:#7B2365;width:200px; border-radius:0px 0px 4px 4px; -moz-border-radius:0px 0px 4px 4px; -webkit-border-radius :0px 0px 4px 4px ;   color:white; height:35px; text-align:center;font-size:12px;}

#CampagneDetailContent .Une-Editions{position:absolute; text-align:center; cursor:pointer;   color:white;  display:none; background:rgba(229, 135, 45, 0.8);width:90px;z-index:1000; border-radius: 1.5em; -moz-border-radius: 1.5em !important; -webkit-border-radius:1.5em;  }
#CampagneDetailContent .Une-Editions span{font-size:12px; display: inline-block ;vertical-align:middle;margin-top:3px;margin-bottom:3px}
#CampagneDetailContent .Une-Editions .glyphicon{font-size:22px;padding-right:5px}
#CampagneDetailContent .Une-Editions:hover{background:#3871C2;}

#JournalEditions .Modal-content{height:330px;overflow-y:scroll;margin-top:10px}
#JournalEditions ul{padding:0; margin:10px 10px 0 10px}
#JournalEditions li{list-style:none;color:#707070;font-size:14px;cursor:pointer;text-align:center}
#JournalEditions li:hover {font-weight:bold}



#CampagneDetailContainer {box-shadow: 8px 8px 12px #aaa;}

#CampagneDetailContent #Liste-Insertions .Groupe-Journal div {border-bottom:1px solid  #3871C2;margin-top:20px;}
#CampagneDetailContent #Liste-Insertions .Cell-Journal  {  width:200px; }
#CampagneDetailContent #Liste-Insertions .Cell-Journal div{border-radius: 2.5em;-moz-border-radius:2.5em; -webkit-border-radius :2.5em ;  background-color: #3871c2 !important;color:white;margin:2px 8px 2px 2px   ; transition:background-color 0.3s;
         padding:3px 15px 3px 10px; cursor:pointer;}
    #CampagneDetailContent #Liste-Insertions .Cell-Journal div:hover {
        background-color: #ea5330 !important;
    }


#CampagneDetailContent #Liste-Insertions .Cell-DateParution  { color:black }
#CampagneDetailContent #Liste-Insertions .Cell-Comment  { max-width:200px;width:200px; padding-left:10px}

#CampagneDetailContent #Liste-Insertions .Table-Row-Titre td{ color:#4c4c4c;font-family:Verdana;font-size:11px;border-bottom:1px solid #C1DAEE}
#CampagneDetailContent #Liste-Insertions .Table-Row-Last-Titre td{ color:#4c4c4c;font-family:Verdana;font-size:11px;}




.Logos-Produits {
    font-size: 10pt;
    padding: 4px;
    border-radius: 6px 0px 8px 0px;
    height: 40px;
    color:white;
}

.Produit-PQR66{background-color:#7B2365}
.Produit-POD{background-color:#A5C737}
.Produit-TAT{background-color:#EE9400}
.Produit-DIVERTO{background-color:#505A7E}

.Produit-PQR66::after{content:"366#PQR66"}
.Produit-POD::after{content:"366#POD"}
.Produit-TAT::after{content:"366#TAT"}
.Produit-DIVERTO::after{content:"DIVERTO"}





.glyphicon-plus-sign, .glyphicon-minus-sign {
    font-size: 25px;
    color: white;
}

.vignette-container{width:120px;   height:75px; border:1px solid  #FDBD5E;background: #E3E3E3; border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius :3px;padding: 5px; text-align:center;}
.Vignette:hover {   -webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);}
.Vignette {cursor: pointer;-webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);-moz-transition: all .5s cubic-bezier( .6, 2, .4, 1);-o-transition: all .5s cubic-bezier( .6, 2, .4, 1);transition: all .5s cubic-bezier( .6, 2, .4, 1);}

#Help .glyphicon{font-size:35px;padding-right:5px;color:#E5872D;cursor:pointer;transition: all .5s ease;}
#Help .glyphicon:hover{color:#3871C2;}

/*----------   FONCTIONNEMENT DU CAROUSSEL DE VISUALISATION DES PUBS  --------------------------------*/
#Caroussel-Container{position: fixed;display:none;  z-index:9998 }
.caroussel-header{height:50px;}
.Caroussel-Footer{ background-color:#A588BE;height:40px;padding-top:10px}
.Caroussel-close{float:right;   margin-right:0px; margin-top:5px;  background-position:-4px 5px; background-repeat:no-repeat;cursor:pointer; font-size:25pt;color:#333333; }
.Caroussel-close:hover {color:#DE6A0F;}
.carousel-indicators { bottom: 10px;width:60%;z-index: 15;padding-left: 0px;text-align: center;list-style: none;position:relative;line-height:30px}


#CGUContent{margin:10px 30px 10px 30px; height:380px; overflow-y:scroll;text-align:justify;padding:10px;font-size:13px;border-top:1px solid}
#CGUContent h1{font-size:16px;font-weight:bold;}
#CGUContent h2{padding-top:10px}


/*----------    PARTIE RESPONSIVE -------------------   --------------------------------*/
.container {width: 90%;}
body, label {font-size: 11pt;}/*color:red;*/
.select2-container,  input, .btn, .form-control,.input-group-addon,.ui-menu li{font-size: 10pt;}/*color:green*/



h2 {font-size: 11pt;margin: 0;font-weight: bold}

@media (max-width: 1480px) {
    .container {width:1200px; }/*border:1px solid blue*/
    #Form-Login {margin-top: 10px;}
    body, label, .select2-container,  input, .btn, .form-control,.input-group-addon,.ui-menu li{font-size: 9pt;}
    
    #Header #TitreService {font-size:18px    }
}
@media (max-width: 1024px) {/* Ipad */
    body, label,.select2-container,  input, .btn, .form-control,.input-group-addon,.ui-menu li {font-size: 9pt;}
    h2 {font-size: 10pt;}
    .container {width: 1023px;}
  
     #Header #TitreService {display:none    }
    #Form-Search-Client{display:none;}
    #Form-Search-GroupDates{padding-top:10px;margin-left:20px}
    .Form-Cell{margin-left:40px}
    .Item-valueHeavy{font-weight:normal}
}