body {
    background:#ffffff url(./../../resources/images/fond-body.gif) center top no-repeat; 
    background-attachment: fixed;
    font-size: 12px;
    font:1em Arial, Helvetica, sans-serif;  
    color: #5f6062;
    margin: 10 px; 
    padding:10px 10px 10px 10px;
    width: 100%;
    position: center;
}
/*
table{
    width:1600px;
}*/

#top a:link,top a:visited {
    color: #8bc53f;
    font-weight : bold;
    text-decoration: none;
    font-size:  12px;  
}

/* pour les menu du haut et bas*/
#top a:link:hover  {
    color: white;
    font-weight : bold;
    text-decoration : underline;
    background-color:#8BC53F;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

}


#left a:link, #left a:visited {
    color: #8bc53f;
    text-decoration: none;
    font-size:  10px;
    font-weight: bold;
}

#left a:link:hover {
    color: white;
    text-decoration : underline;
    font-size:  10px;
    font-weight: bold;
    background-color:#8BC53F;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#bottom a:link, #bottom a:visited {
    color: #81c53f;
    text-decoration: none;
    font-size:  8px;
    font-weight: bold;
}

#bottom a:link:hover, #bottom a:visited:hover  {
    color: black;
    font-weight : bold;
    text-decoration : underline;
    font-size:  8px;
    font-weight: bold;
}

/* Titres
-------------------------------------------------------- */

/*h1, h2, h3, h4, h5, h6 { color:#8bc53f; margin: 1em 0 .5em 0; }
h1 {display:none;}*/

h1 {
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
    border-bottom: 1px solid #AFAFAF; 
    font-size:  16px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    color:#8bc53f;
}
h2 { font-size:2em; margin:20px 0; }
h4 { font-size:0.7em; color:#5f6062; font-weight:normal; margin:0 0 10px 0; }

.preformatted {
    white-space: pre-wrap;
}
.preformatted10 {
    white-space: pre-wrap;   
    font-size:  13px;
    font-weight: bold;
    color: #8bc53f;
}
.preformatted13 {
    white-space: pre-wrap;   
    font-size:  13px;
    font-weight: bold; 
    color: #8bc53f;    
}
.menuSelect {
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
    border-bottom: 0px solid #AFAFAF; 
    font-size:  15px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    color: #8bc53f;
}
.stationClient {
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
    font-style: italic;
    font-weight: bold;   
    font-size:  15px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    color: #FFFFFF;
}
.tetePage {
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
    border-bottom: 0px solid #AFAFAF; 
    font-size:  15px;
    font-weight: normal;
    margin: 0px;
    padding: 0px;
    color: white;
}

.datatable-facet{
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;   
    font-size:  14px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    color: #FFFFFF;         
}
.jqplot-title{
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;    
    font-size:  14px;
    font-weight: bold;    
    color: #8bc53f;
}
.jqplot-xaxis{
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;    
    font-size:  8px;
    font-weight: bold;  
    color: #8bc53f;
}
.jqplot-yaxis{
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;    
    font-size:  8px;
    font-weight: bold;   
    color: #8bc53f;
}
.jqplot-xaxis-label{  
    font-size:  8px;      
    color: #8bc53f;
}
.jqplot-yaxis-label{ 
    font-size:  8px;    
    color: #8bc53f;
}
.jqplot-y2axis-label{
    font-size:  8px;
    color: #8bc53f;
}
.jqplot-y2axis{
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;    
    font-size:  8px;
    font-weight: bold;   
    color: #8bc53f;
}
.jqplot-axis-tick{
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;   
    font-size:  8px;
    font-weight: normal;   
    color: #8bc53f;
}
.jqplot-yaxis-tick{
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;   
    font-size:  8px;
    font-weight: normal;   
    color: #8bc53f;
}
.jqplot-y2axis-tick{
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;   
    font-size:  8px;
    font-weight: normal;   
    color: #8bc53f;
}
.attention {
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;    
    font-size:  11px;
    font-weight: bold;   
    color: red;
}

a:link, a:visited {
    color: #045491;
    font-weight : bold;
    text-decoration: none;
}

a:link:hover, a:visited:hover  {
    color:#495b28;
    text-decoration:none;  
    font-weight : bold;
    text-decoration : underline;
}

.bouton{
    background-color: #8BC53F !important;  
    border-style: none !important;   
    border-radius: 10px; 
    text-align: center;   
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;    ;
    font-size:  10px;
    color: white !important; ;
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}
.bouton:hover {
    background-color: #FFFFFF !important;
    color:#8BC53F  !important; 
}
.boutonblanc{
    background-color: #FFFFFF !important; 
    border-style: none !important;   
    border-radius: 10px; 
    text-align: center;   
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;    ;
    font-size:  10px;
    color:#8BC53F !important; 
    /*border: 2px solid #4CAF50;*/
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

.boutonblanc:hover {
    background-color: #8BC53F !important;
    color:#FFFFFF !important; 
}


.sferiel-icon{
    background: url('/resources/images/logo.png')!important;   
    height:16px;
    width:16px;
}
.column10{width: 10%;}
.column20{width: 20%;}
.column30{width: 30%;}
.column40{width: 40%;}
.column50{width: 50%;}
.column60{width: 60%;}
.column70{width: 70%;}
.column80{width: 80%;}
.panelgrid500{width: 500px;}
.panelgrid600{width: 600px;}
.panelgrid700{width: 700px;}
.paneL100p{width: 100%;}
.content400{height: 400px;}
.content450{height: 450px;}
.content500{height: 500px;}
.menuDroit{width:140px;}

.customHeader .borderless thead tr .ui-state-default[role="columnheader"] 
{
    background :#ddeac8;
}

.columnheader{
    font-family: verdana;
    font-size: 1em;    
    background-color: #8BC53F !important;
    text-align: center;
    color: #FFFFFF;     
}
.columnfooter{
    font-family: verdana;
    font-size: 1em;    
    background-color: #8BC53F !important;
    text-align: center;
    color: #FFFFFF;  
}
.bordercolumn{
    font-family: verdana;
    font-size: 1em;
    text-align: center;
    background: #ddeac8 !important;
}

/*************** Clock *******************************/
.clock {
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
    border-bottom: 0px solid #AFAFAF; 
    font-size:  10px;
    font-weight: normal;
    margin: 0px;
    padding: 0px;
    color: #8bc53f;
}
/*
.clock-renderer{
    background-color:#8BC53F !important;
}*/
.ui-clock {
    background-color:#8BC53F !important;
    color: #FFFFFF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
}

/*************** Charts lineseries *******************/
.chart-linseries{
    background-color: #FFFFFF !important;
}

/*************** Menu bar ***************************/
.mystyle.ui-menubar, .ui-menu-child,.ui-menu {
    /*background: #ddeac8 !important; */
    background: #ffffff !important; 
    border: none;

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
}
.submenu{
    background: #ffffff !important; 
    /* border: none;*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
}
/****************Style tab ***********/
.tiltletab{
    font-family: verdana;
    font-size: 12px;
    text-align: center;
    height:15px;
    background-color:#8BC53F!important;
    color:#FFFFFF!important;
}
#tab_configuration.ui-tabs.ui-tabs-top > .ui-tabs-nav {
    font-family: verdana;
    font-size: 12px;
    text-align: center;
    height:15px;
    background-color:#8BC53F!important;
    color:#FFFFFF!important;
}

/******************** Style radioButton et Case à cocher ************/
.ui-chkbox .ui-chkbox-box{
    background: #8BC53F !important;
    text-align: center;
    color:black;
    background-color:#8BC53F !important;  
}
.ui-selectoneradio .ui-radiobutton-box {
    background: #8BC53F !important;
    text-align: center;
    color:black;
    background-color:#8BC53F !important;  
}
.ui-selectoneradio .ui-radiobutton{
    background: #0BC53F !important;
    text-align: center;
    color:black;
    background-color:#0BC53F !important;  
} 
/******************** Style pour accordeon *************************/
/*
.ui-accordion{

}
*/
.ui-accordion-header{
    font-family: verdana;
    font-size: 12px;
    text-align: center;
    height:15px;
    background-color:#8BC53F!important;
    color:#FFFFFF!important;;
}
.ui-accordion-content{
    font-family: verdana;
    font-size: 12px;
    text-align: center;
    height:15px;
    background-color:#FFFFFF !important;
    color:#8BC53F;
}
/*************** Style pour les pickList ***/
.pickstyle .ui-picklist-list {
    height: 300px;
    width:  400px;
    margin: 0;
    overflow: auto;
    padding: 0 ;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;        
}
.pickstyle .ui-picklist-list-source{
    background-color:#8BC53F!important;
} 
.pickstyle .ui-picklist-list-target{
    background-color:#8BC53F!important;
}
.pickstyle .ui-picklist-source-controls{
    background-color: #FFFFFF !important;
}
.pickstyle .ui-picklist-target-controls{
    background-color: #FFFFFF !important;
}
.pickstyle .ui-picklist-vertical{
    background-color: #DDEAC8 !important;
}
.pickstyle .ui-picklist-button-add{
    background-color: #DDEAC8 !important;
    width:  60px;
}
.pickstyle .ui-picklist-button-add:hover{
    background-color: #FFFFFF !important;
    color: #8BC53F !important;
    width:  60px;
}
.pickstyle .ui-picklist-button-remove{
    background-color: #DDEAC8 !important;
    width:  60px;
}
.pickstyle .ui-picklist-button-remove:hover{
    background-color: #FFFFFF !important;
    color: #8BC53F !important;
    width:  60px;
}
.pickstyle .ui-picklist-button-add-all{
    background-color: #DDEAC8 !important;
    width:  60px;
} 
.pickstyle .ui-picklist-button-add-all:hover{
    background-color: #FFFFFF !important;
    color: #8BC53F !important;
    width:  60px;
}
.pickstyle .ui-picklist-button-remove-all{
    background-color: #DDEAC8 !important;
    width:  60px;
}
.pickstyle .ui-picklist-button-remove-all:hover{
    background-color: #FFFFFF !important;
    color: #8BC53F !important;
    width:  60px;
}
.pickstyle .ui-picklist-button-move-up{
    background-color:#DDEAC8!important;
    width:  60px;
}
.pickstyle .ui-picklist-button-move-up:hover{
    background-color: #FFFFFF !important;
    color: #8BC53F !important;
    width:  60px;
}
.pickstyle .ui-picklist-button-move-top{
    background-color: #DDEAC8 !important;
    width:  60px;
}
pickstyle .ui-picklist-button-move-top:hover{
    background-color: #FFFFFF !important;
    color: #8BC53F!important;
    width:  60px;
}
.pickstyle .ui-picklist-button-move-down{
    background-color: #DDEAC8 !important;
    width:  60px;
}
.pickstyle .ui-picklist-button-move-down:hover{
    background-color: #FFFFFF !important;
    color: #8BC53F !important;
    width:  60px;
}
.pickstyle .ui-picklist-button-move-bottom{
    background-color:#DDEAC8 !important;
    width:  60px;
}
.pickstyle .ui-picklist-button-move-bottom:hover{
    background-color: #8BC53F !important;
    width:  60px;
}
/**************** FileUplaod ************************/
.uploadStyle .ui-fileupload {
    margin: 0px 0px 0px 0px !important;
    padding: 0px 0px 0px 0px !important;
    display: inline-block;
    border: none;
}

.uploadStyle .ui-fileupload-buttonbar {
    background-color:#DDEAC8 !important;
    border: none;
    border-radius: 10px; 
}
.uploadStyle .ui-fileupload-content {
    display: none;
}
.uploadStyle .fileinput-button {
    background-color: #FFFFFF !important; 
    border-style: none !important;   
    border-radius: 10px; 
    text-align: center;   
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;    ;
    font-size:  10px;
    color:#8BC53F !important; 
    /*border: 2px solid #4CAF50;*/
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;   
}
.uploadStyle .fileinput-button:hover {
    background-color: #8BC53F !important;
    color:#FFFFFF !important; 
}
.uploadStyle .ui-fileupload-start {
    background-color: #FFFFFF !important; 
    border-style: none !important;   
    border-radius: 10px; 
    text-align: center;   
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;    ;
    font-size:  10px;
    color:#8BC53F !important; 
    /*border: 2px solid #4CAF50;*/
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;   
}
.uploadStyle .ui-fileupload-start:hover {
    background-color: #8BC53F !important;
    color:#FFFFFF !important; 
}
.uploadStyle .ui-fileupload-cancel {
    background-color: #FFFFFF !important; 
    border-style: none !important;   
    border-radius: 10px; 
    text-align: center;   
    font-family: Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;    ;
    font-size:  10px;
    color:#8BC53F !important; 
    /*border: 2px solid #4CAF50;*/
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;   
}
.uploadStyle .ui-fileupload-cancel:hover {
    background-color: #8BC53F !important;
    color:#FFFFFF !important; 
}
/*
.mystyle.ui-fileupload .fileupload-buttonbar {
    background-color: #8BC53F !important;
    border: none;
}
.mystyle.ui-fileupload .fileupload-content {
    display: none;
}
.mystyle.ui-fileupload .fileinput-button {
    background-color: red !important;
}

*/
/************** Style pour les panels */
.mystyle .ui-panel-titlebar{
    background-color:#8BC53F !important; 
    color:#FFFFFF ! important;
} 
.mystyle .ui-panel-title{
    background-color:#8BC53F !important;    
    color:#FFFFFF ! important;
} 

/************** Style pour les dataGrid */
.mystyle.ui-panelgrid {   
    width: 100%;
}
.mystyle.ui-panelgrid-datatable-header{
    background: #8BC53F !important;
    text-align: center;
    color:black;
    background-color:#8BC53F;    
}
.mystyle.ui-panelgrid-header{
    background: #8BC53F !important; 
    /*/background: #8BC53F !important;*/
    text-align: center;
    color: #ffffff;   
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.mystyle.ui-panelgrid-footer{
    background: #8BC53F !important;
    text-align: center;
    color: #ffffff ;     
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.mystyle.ui-panelgrid td, .ui-panelgrid tr
{
    border-style: none !important;    
}
.mystyle.ui-panelgrid th {
    background: #8BC53F !important;
    text-align: center;
    font-family: verdana;
    font-size: 1em;
}

/************** Style pour les datatable avec peu de colonnes */
.mystyle.ui-datatable table {
    table-layout: auto;    
}
.mystyle.ui-datatable .ui-datatable-header{
    /*background: white !important; */
    background-color: #8BC53F !important;
    text-align: center;
    color: #FFFFFF !important;  
}
.mystyle.ui-datatable .ui-datatable-even{
    background-color: #FFFFFF; 
}
.mystyle.ui-datatable .ui-datatable-odd.ui-state-hover{
    background-color: #8BC53F ;
}
.mystyle.ui-datatable .ui-datatable-even.ui-state-hover{
    background-color: #8BC53F ;
}
.mystyle.ui-datatable .ui-datatable-even.ui-state-highlight{
    background-color: #8BC53F ;
}
.mystyle.ui-datatable .ui-datatable-odd.ui-state-highlight{
    background-color: #8BC53F ;
}
.mystyle.ui-datatable .ui-datatable-data-empty td {
    color:red;
    font-weight:bold;
}

.mystyle.ui-datatable .ui-expanded-row-content{
    background-color:  #ddeac8 !important;
}
.mystyle.ui-datatable .ui-inputfield {
    width:60px;
} 
.mystyle.ui-datatable .ui-inputtext{
    width:60px;
} 
.ui-datatable.mystyle th {
    background-color: #ddeac8 ;
    font-family: verdana;
    font-size: 1em;        
}
.mystyle.ui-datatable .ui-paginator {
    background-color: #8BC53F !important;
    font-family: verdana;
    font-size: 1em;
}

.ui-datatable-scrollable-footer{
    background-color: #8BC53F ;
    font-family: verdana;
    font-size: 1em;
}

.ui-datatable-scrollable-header{
    background-color: #8BC53F ;
    font-family: verdana;
    font-size: 1em;
}

/***************************************************************************/
@media (max-width: 640px) {
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto;
        margin: 0;
        padding: 0;
    }

    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }

    /* conserver le ratio des images */

    img {
        height: auto;
    }

    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }

    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }

    /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

    element1,
    element2 {
        float: none;
        width: auto;
    }

    /* masquer les éléments superflus */

    .hide_mobile {
        display: none !important;
    }

    /* Un message personnalisé */

    body:before {
        content: "Version mobile du site";
        display: block;
        text-align: center;
        font-style: italic;
        color: #777;
    }
}