/* ============================================ */
/* =============   ADMIN CSS   ============== */    

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 18px;
    margin: 0;
    background: url(../images/bg-admin.jpg) left 123px repeat-x #FFF;
}

div, h1, h2, h3, h4, p, form, label, input, textarea, img, span, ul, li{
    margin: 0;
    padding: 0;
}

img{ border:0;}

p, td, div, ul, li, .normaltexte {
    font-size : 18px; 
}
a, input, select{ outline:none; }
a{ color: #3D89AA; text-decoration: none; }
a:hover{text-decoration: underline;}

p {
    margin-bottom: 30px;
    line-height: 20px;
}

table tbody tr{ cursor: pointer; }
table tbody tr:hover td{ background: #edf4ff; }

/* CONNECT PAGE */
        #connect{ 
            margin: 60px auto;
            padding: 20px 0 180px;
            border-top: 1px solid #c2c2c2;
            border-bottom: 1px solid #c2c2c2;
            position: relative;
            width: 980px;
        }
        h1{ font-size: 27px; color: #3D89AA; margin: 0 0 30px; text-align: center; }
        #connect form {
            margin: 20px auto;
            padding: 20px;
            width: 290px;
            border: 1px solid #c2c2c2;
            background: #fff none repeat scroll 0 0;
        }
        #connect form > div {
            margin: 0 0 20px;
        }
        #connect form > div.FieldsError {
            margin: 0 30px;
        }
        #connect form > div > label {
            line-height: 28px;
        }
        #connect form > div > input {
            background: #fff none repeat scroll 0 0;
            border: 1px solid #c2c2c2;
            font-size: 18px;
            height: 48px;
            text-indent: 50px;
            width: 100%;
            color: #a4a4a4;
        }
        #connect form div #username {
            background: rgba(0, 0, 0, 0) url("../images/icon-profil.png") no-repeat scroll 10px center;
        }
        #connect form div #password {
            background: rgba(0, 0, 0, 0) url("../images/icon-mdp.png") no-repeat scroll 10px center;
        }
        .btn-nivii {
            background-color: #3D89AA;
            border: medium none;
            color: #fff;
            cursor: pointer;
            font-size: 20px;
            height: 40px;
            padding: 2px 5px;
            text-transform: uppercase;
            width: 290px;
        }

/* TEMPLATE */

#main-content{ position: relative; }

#header{ width: 100%; height: 120px;  border-bottom: 3px solid #00427a; background: #022338; }

  #header a.logo{
    background: url("../images/logo.png") center no-repeat scroll;
    display: block;
    width: 327px;
    height: 120px;
    margin: 0 auto;
  } 
  #header .submenu{
    float: right;
    display: block;
    margin: 10px 5% 0 0;
  } 
  /* LANG BUTTONS */
        div.traduction a{ float: left; display: block; width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: 14px; margin: 10px 5px; color: #FFF; background: #3D89AA; border: 1px solid #3D89AA }
        div.traduction a.active{color: #333; background: #e9e9e9; border: 1px solid #c2c2c2; text-decoration: none; cursor: default; }
        div.traduction a:first-child{ margin-left: 0;}
        
  /* LANG BUTTONS */
  #disconnect{ font-size: 14px; border: 1px solid #3D89AA!important; }
  
   
#content{ width: 1400px; margin: 25px auto;}


    #content #bar-etat {
        height: 35px;
        position: relative;
        width: 100%;
        margin-top: 50px;
    }
        #content #bar-etat a{ 
                position: relative;
                float: left; 
                display: block; 
                font-size: 15px; 
                text-transform: uppercase;
                color: #888; 
                line-height: 35px;
                font-weight: 400;
                border: 1px solid #3D89AA;
                border-left: 0;
                background: #e9e9e9;
                padding: 0 29px;
                width: auto;
                text-align: center;
        }
        #content #bar-etat a:first-child{ border-left: 1px solid #3D89AA; } 
        #content #bar-etat a:hover, #content #bar-etat a.active{ background: #3D89AA; color: #FFF; text-decoration: none; } 


        #content #main-content h1{ text-align: left; margin: 40px 0 20px; padding-top: 25px; border-top: 1px solid #c2c2c2; }


#footer{ 
    clear: both;
    background: #202329;
    color: #FFF;
    position:absolute;
    width:100%;
    border-top: 4px solid #3D89AA;
}

#signature{
    text-align: center;
    margin: 40px auto 25px;
}
#signature > p {
    color:#868686;
    font-size: 12px;
}



input[type="button"], #soumettre { 
    background-color: #3D89AA;
    border: 1px solid #3D89AA;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    height: 40px;
    padding: 3px 35px;
    font-weight: 400;
    text-transform: uppercase;
    font-family: arial;
}
input[type="button"]:hover, #soumettre:hover { 
    background-color: #FFF;
    border: 1px solid #3D89AA;
    color: #3D89AA;
}

#soumettre.retour { 
    float: right; margin-top: -60px;
}

#addComments:hover { 
    border: 1px solid #3D89AA;
    color: #3D89AA;
    background: #fff;
}

#taches-facturer{  left: 0;  }
#taches-rapport{ left: 403px; }
#taches-facturer,
#taches-rapport{position: absolute; top: 138px; z-index: 999; background: #48aadb; }
#taches-facturer:hover,
#taches-rapport:hover{ background: #FFF;}
/* MANIPULATION SUR TABLEAU DYNAMIQUE*/
            
            #clients_wrapper, #conseillers_wrapper{ margin-top: 30px;}
            #clients_filter, #conseillers_filter{ float: right; margin-top: -133px; width: 40%; clear: both; }
            #clients_filter input, #conseillers_filter input{ 
                width: 100%; 
                height: 40px;
                color: #a4a4a4;
                cursor: pointer;
                font-size: 18px;
                padding: 10px 35px;
                font-weight: 400;
                text-indent: 40px;
                background: url(../images/loupe.png) 15px center no-repeat;
                border: 1px solid #c6c6c6;
            }
            
            #clients_length, #conseillers_length{ margin-bottom: 40px!important; float: right; color: #888;  }
            
            table.dataTable thead th, table.dataTable tfoot th, table.dataTable tbody td{ text-align: left; padding-left: 8px!important; color: #888!important; font-weight: 400!important; }
            table.dataTable thead th.sorting{ background-position: 90% center;}
            table.dataTable thead th.sorting:first-child{ background: none;}
            table.dataTable thead th{ border-bottom: 1px solid #a5a5a5!important; font-size: 17px; min-width: 80px; }
            table.dataTable tfoot th{ border-top: 1px solid #a5a5a5!important; font-size: 17px; }
            
            table.dataTable tbody td { font-size: 15px;}
            table.dataTable tbody td span{ display: none; }
            table.dataTable tbody td.avatar{ width: 78px;  }
            table.dataTable tbody td.avatar img{ width: 60px; height: auto; background: #ebf5ff; }
            
            
            .dataTables_info{ display: none;}
            .dataTables_wrapper .dataTables_paginate {
                float: none !important;
                padding-top: 40px !important;
                text-align: center !important;
            }
            table.dataTable .dataTables_paginate .paginate_button{ padding: 6px 12px!important; }

            
            #listes .paginate_button.disabled,
            #conseillers .paginate_button.disabled
            { color: #ccc!important; }
            
            #listes .paginate_button.current,
            #conseillers .paginate_button.current
            { background: #3D89AA!important; color: #FFF!important; }
            
            table.dataTable thead .sorting_desc,
            table.dataTable thead .sorting_asc{ color: #3D89AA!important; }
            
            table.dataTable.order-column tbody tr > .sorting_1, 
            table.dataTable.order-column tbody tr > .sorting_2, 
            table.dataTable.order-column tbody tr > .sorting_3, 
            table.dataTable.display tbody tr > .sorting_1, 
            table.dataTable.display tbody tr > .sorting_2, 
            table.dataTable.display tbody tr > .sorting_3{ background: #f2f7ff!important; }
            
            
            #CreationClient input[type="text"].small{ width: 150px; }
            
            
            table.dataTable tbody tr.dejaFacturer { background: #defccf!important;}
            table.dataTable tbody tr.dejaFacturer td.sorting_1 { background: #eefde7!important;}
            
            table.dataTable tbody tr.dejaFacturer.selected td, 
            table.dataTable tbody tr.selected td,
            table.dataTable tbody tr.dejaFacturer.selected td.sorting_1, 
            table.dataTable tbody tr.selected td.sorting_1 
            { background: #00427a!important;}
            
            
            table.dataTable tbody tr.vendu{ background: #ffbaba !important; }
            
            
            
            #listes.rapportsTableaux{ padding-top: 40px; clear: both;}
            #listes.rapportsTableaux #conseillers_filter,
            #listes.rapportsTableaux #conseillers_paginate,
            #listes.rapportsTableaux #conseillers_length
            { display: none;}
            
            #printRapport{ margin: 60px auto 30px; display: block; }
            
            table.dataTable tbody tr td.edit{ text-decoration: underline; }
            table.dataTable tbody tr td.edit:hover{  color: #3D89AA!important; }
            
/* MANIPULATION SUR TABLEAU DYNAMIQUE*/


/* PAGE SERVICES */
input.prix_cote{ float: left; width: 30%!important; margin: 1%;}


#cae_chosen{ margin-top: 20px;}



/* ============================================ */
/* =============   GÉNÉRAL CSS   ============== */
/* ============================================ */

.FieldsError{ color:#c40606;}
.FieldsNoError{ color:#17b70f;}
.fs_11{ font-size: 11px;}
.fs_13{ font-size: 13px;}
.inline{ display:inline;}
.float_r{ float: right;}
.float_l{ float: left;}
.clear-r{ clear: right;}
.clear-l{ clear: left;}
.clear-b{ clear: both;}
.T_AlignRight{ text-align: right;}
.T_AlignCenter{ text-align: center;}
.italic{ font-style: italic;}

.Tabulation{ margin-left: 50px; clear: left;}
.Half_Tabulation{ margin-left: 25px; clear: left;}
.margin-15{ margin-top: 15px;}
.margin-20{ margin-top: 20px;}
.margin-40{ margin-top: 40px;}
.margin-none{ margin-top: 0;}
.image-right{ margin: 5px 0 0 20px; float: right;}
.image-left{ margin: 5px 20px 0 0; float: left;}

/*copy HERE the same style than your actual general a */
.lookLikeA{  text-decoration: underline; cursor:pointer; }
.displaynone{  display: none; }



/* ============================================ */
/* =============   FOMRULAIRES CMS   ============== */
/* ============================================ */

div.span12{ float: left; width: 96%; margin: 0 2% 2%; }
div.span6{ float: left; width: 46%; margin: 0 2%; }
.col-12{ float: left; width: 100%;}
.col-9{ float: left; width: 75%; margin: 0;}
.col-8{ float: left; width: 68%; margin: 0;}
.col-7{ float: left; width: 58%; margin: 0;}
.col-4{ float: left; width: 32%; margin: 0;}
.col-3{ float: left; width: 24%; margin: 0;}
.col-2{ float: left; width: 16%; margin: 0;}
.col-1{ float: left; width: 8%; margin: 0;}
        
.margin-col-4{ margin: 0 2%; }
.margin-col-3-both{ margin: 0 1%; }
.margin-col-3-left{ margin: 0 0 0 1%; }



div.section{ 
    position: relative;
    width: 100%;
    margin: 30px 0;
    padding: 30px 0;
    clear: both;
    border-top: 1px solid #c2c2c2;
}
#CreationClient .section:first-child{ border: none; } 

h3{ font-size: 18px; color: #5a5a5a; text-transform: uppercase; font-weight: 400; margin-bottom: 10px; }

    #CreationClient input[type="text"],
    #CreationClient input[type="number"],
    #CreationClient select,
    div.inputTexte,
    div.fakeInput
    {
        font-family: arial;
        border: 1px solid #c6c6c6;
        color: #a4a4a4;
        font-size: 18px;
        height: 48px;
        text-indent: 20px;
        width: 100%;
        margin-top: 10px;
    }
    div.inputTexte, div.inputNumber, span.inputNumber{ line-height: 48px; margin-top: 10px; display: block;}
    
    #CreationClient input[type="text"]:hover,
    #CreationClient input[type="number"]:hover{ border-color: #999;}
    
    #CreationClient input[type="number"].money, .inputNumber.money{ background: url(../images/ico-cash-sign.png) 80% center no-repeat;  }
    #CreationClient input[type="number"].pourcent, .inputNumber.pourcent{  background: url(../images/ico-purcent-sign.png) 80% center no-repeat;  }

    #CreationClient .radio {
        float: left; width: 100%; margin: 12px 0 0; 
    }
        #CreationClient .radio div { float: left; margin: 0 0 0 30px; min-height: 50px; line-height: 50px; }
        #CreationClient .radio div:first-child{ margin-left: 0px;  }
        #CreationClient .radio div.other { margin: 10px 0 0; clear: left; }
        #CreationClient label{color: #a4a4a4; font-size: 18px; margin-left: 6px; }
        
    textarea, div.blocTexte{
        
        font-family: arial;
        border: none;
        color: #5a5a5a;
        background: #f3f5f6;
        font-size: 18px;
        width: 96%;
        height: 100px;
        padding: 2%;
        margin: 10px 0;
    }
    
    #CreationClient .ui-selectmenu-button{
        border-radius: 0; background: #fff; color: #a4a4a4; margin-top: 10px;
    }
        
        
    #CreationClient #soumettre {
        display: table-caption;
        margin: 45px auto;
    }
    
    
    
    /* special */
        div.siEquite{ margin-top: 27px;}
        .siEquite .col-12 .col-4:nth-child(2n+2){ margin: 0 2%;}
        .col-8 label{ display: block; line-height: 50px; margin-top: 10px; }
        div.fakeInput{ color: #ccc; line-height: 48px; }
        #client_view .siEquite { margin: 17px 0 0; }
        #client_view .siEquite h3{ margin: 0; line-height: 48px;}
        
    /* SECTION COMMENTAIRE */
        #addComments{    
            border: 1px solid #c2c2c2;
            color: #5a5a5a;
            font-size: 16px;
            height: 34px;
            padding: 3px 50px;
            background: #e9e9e9;
            float: right;
            line-height: 35px;
            text-transform: uppercase;
            cursor: pointer;
        }
        
        #commentaires > div{ padding: 1.5%; color: #a5a5a5; width: 97%; }
        #commentaires > div:nth-child(2n+2){ background: #f3f5f6; }
        #commentaires > div:last-child{ background: none!important; }
        #commentaires > .col-12 .col-9{ width: 73%; padding-left: 2%; }
        
        
        
        
        /* SECTION VIEW */
            
            div.inputNumber, span.inputNumber{ color: #3D89AA; }
            
        /* SECTION VIEW */
        
        
    
.error{ 
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color: #b41212;
}

#erreur_msg{ 
    width: 100%; 
    text-align: center; 
    padding: 10px; 
    background: #000; 
    color: #FF0000; 
    position: fixed; 
    top: 0; 
    margin: 0 auto;
    font-weight: bold;
}


/*  AJUSTEMENT au module de base NIVII */

table td:first-child, table th:first-child{ display: none;}

/*  AJUSTEMENT au module de base NIVII */



/*=================================================================================*/
/*=================================================================================*/
/*                          FLEXIBLE PART                                          */
/*=================================================================================*/
/*=================================================================================*/
@media only screen and (max-width: 1009px) {

        #connect, #content {
            width: 740px;
        }
        
        table.dataTable{ font-size: 16px; }
        table.dataTable .avatar{ display: none; }
        input[type="button"], #soumettre {
            font-size: 16px;
            padding: 3px 20px;
        }
        
        #CreationClient input[type="text"], 
        #CreationClient input[type="number"], 
        #CreationClient select, 
        div.inputTexte, 
        div.inputNumber, 
        span.inputNumber,
        div.fakeInput{ font-size: 16px;}

                
}
/*=================================================================================*/
/*=================================================================================*/
@media only screen and (max-width: 767px) {


        #connect { width: 100%; }
        #content { width: 96%; margin: 2%; }
        #clients_filter, #conseillers_filter{ width: 50%; }
        #clients_filter input, #conseillers_filter input{ width: 95%;}
                
        table.dataTable{ width: 98%!important; margin: 1%!important; }

                
}
/*=================================================================================*/
/*=================================================================================*/
@media only screen and (max-width: 650px) {
    
        div.span12{ float: left; width: 96%; margin: 0 2%; }
        div.span6{ float: left; width: 96%; margin: 0 2%; }
        .col-12{ float: left; width: 100%;}
        .col-9{ float: left; width: 75%; margin: 0;}
        .col-8{ float: left; width: 68%; margin: 0;}
        .col-7{ float: left; width: 58%; margin: 0;}
        .col-4{ float: left; width: 32%; margin: 0;}
        .col-3{ float: left; width: 25%; margin: 0;}
        .col-2{ float: left; width: 16%; margin: 0;}
        .col-1{ float: left; width: 8%; margin: 0;}        
                
        #CreationClient input[type="text"], 
        #CreationClient input[type="number"], 
        #CreationClient select, 
        div.inputTexte, 
        div.inputNumber, 
        span.inputNumber,
        div.fakeInput{ font-size: 18px;}
        
        /* commentaires */
            #commentaires > .col-12 { border-top: 1px solid #a4a4a4; }
            #commentaires > .col-12 .col-2,
            #commentaires > .col-12 .col-9{ width: 100%; }
            #commentaires > .col-12 .col-2{ font-weight: bold;}
            #commentaires > .col-12 .col-1{ display: none; }
}
/*=================================================================================*/
/*=================================================================================*/
@media only screen and (max-width: 600px) {
    
        #disconnect{ font-size: 12px; padding: 3px 8px;}
        #content #bar-etat{ margin: 50px 0; height: 100px; }
        #content #bar-etat a{ 
            width: 100%; clear: both; border: 1px solid #a4a4a4;
        }
        input[type="button"], #soumettre {
            font-size: 14px;
            padding: 3px 10px;
        }
        

}
/*=================================================================================*/
/*=================================================================================*/
@media only screen and (max-width: 479px) {

    #connect form, .btn-nivii{ width: 240px; }
    #disconnect{ 
        background: #3D89AA url("../images/disconnect.png") no-repeat scroll 0 0;
        height: 35px;
        padding: 0;
        text-indent: -9999px;
        width: 35px; 
    }
        
    #clients_filter, #conseillers_filter {
        clear: both;
        float: left;
        margin-top: -140px;
        width: 80%;
        text-align: left;
    }
    #clients_filter input, #conseillers_filter input{ margin-left: 0;}
    #clients_length, #conseillers_length{ float: left; margin: 40px 0 0!important; padding: 30px 0 40px; }      
    
      
        #CreationClient input[type="text"], 
        #CreationClient input[type="number"], 
        #CreationClient select, 
        div.inputTexte, 
        div.inputNumber, 
        span.inputNumber,
        div.fakeInput{ font-size: 15px; text-indent: 8px;}
        
        #CreationClient label{ font-size: 16px;}
                   
}
/*=================================================================================*/
/*=================================================================================*/

@media print{
    #header,
    #bar-etat,
    input[type="button"]
    { display: none!important;}
}