/* ============================================ */

/* =============   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;

}



a.bouton{ color:#FFF; background:#444; padding:6px 12px; display: inline-block; }



img{ border:0;}



p, td, div, ul, li, .normaltexte {

    font-size : 18px; 

}

a, input, select{ outline:none; }

a{ color: #4C3D3D; 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 #222b3b;

            border-bottom: 1px solid #222b3b;

            position: relative;

            width: 980px;

        }

        h1{ font-size: 27px; color: #4C3D3D; margin: 0 0 30px; text-align: center; }

        #connect form {

            margin: 20px auto;

            padding: 20px;

            width: 290px;

            border: 1px solid #222b3b;

            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 #222b3b;

            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 {

            width: 290px;

        }



/* TEMPLATE */



#main-content{ position: relative; }



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



  #header a.logo{

    background: url("https://www.metrocite.ca/wp-content/uploads/2018/04/metrocite-condos-a-vendre.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: #4C3D3D; border: 1px solid #4C3D3D }

        div.traduction a.active{color: #333; background: #e9e9e9; border: 1px solid #222b3b; text-decoration: none; cursor: default; }

        div.traduction a:first-child{ margin-left: 0;}

        

  /* LANG BUTTONS */

  #disconnect, #users{ font-size: 14px!important; border: 1px solid #eb6608!important; background: #464646!important; color: #FFF!important; }

  #disconnect:hover, #users:hover{background-color: #eb6608!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 #4C3D3D;

                border-left: 0;

                background: #e9e9e9;

                padding: 0 29px;

                width: auto;

                text-align: center;

        }

        #content #bar-etat a:first-child{ border-left: 1px solid #4C3D3D; } 

        #content #bar-etat a:hover, #content #bar-etat a.active{ background: #4C3D3D; color: #FFF; text-decoration: none; } 





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





#footer{ 

    clear: both;

    background: #464646;

    color: #FFF;

    position:absolute;

    width:100%;

    border-top: 4px solid #4C3D3D;

}



#signature{

    text-align: center;

    margin: 40px auto 25px;

}

#signature > p {

    color:#868686;

    font-size: 12px;

}







input[type="button"], #soumettre, #btn-connect, #users, #submitUser, #submit-nouv-mdp { 

    background-color: #FFF;

    border: 1px solid #eb6608;

    color: #323131;

    cursor: pointer;

    font-size: 18px;

    height: 40px;

    padding: 3px 35px;

    font-weight: 400;

    font-family: arial;

}

input[type="button"]:hover, #soumettre:hover, #btn-connect:hover, #users:hover, #submit-nouv-mdp:hover { 

    background-color: #eb6608;

    border: 1px solid #eb6608;

    color: #FFF;

}



#soumettre.retour { 

    float: right; margin-top: -60px;

}



#addComments:hover { 

    border: 1px solid #4C3D3D;

    color: #4C3D3D;

    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: #4C3D3D!important; color: #FFF!important; }

            

            table.dataTable thead .sorting_desc,

            table.dataTable thead .sorting_asc{ color: #4C3D3D!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: #058576!important; color: #FFF!important;}

            

            

            table.dataTable tbody tr.vendu{ background: #ffd8d8 !important; }

            table.dataTable tbody tr.reserved{ background: #ffe0c3 !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: #4C3D3D!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 #222b3b;

}

#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,

    #addUser input[type="text"],

    #addUser input[type="password"],

    #addUser 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;}

    

    label{ padding-top: 30px; display: inline-block; }

    #addUser label{ float:left; }

    

    

    #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;

    }

    

    #submitUser, #CreationClient .ui-selectmenu-button{

        border-radius: 0; background: #fff; color: #a4a4a4; margin-top: 10px;

    }

        

        

    #CreationClient #soumettre,

    #submitUser {

        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 #222b3b;

            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: #4C3D3D; }

            

        /* SECTION VIEW */

        

        

        /* SECTION RESET PWD */



            body#ResetPwd #header{ border-bottom: 0; }

            body#ResetPwd #content{ background: #464646; min-height: 600px; width: 100%; margin: 0; padding-top: 100px; }

            body#ResetPwd #content .div-blanc{ width: 500px; margin: auto; padding: 50px; background: #FFF; text-align: center; }

            body#ResetPwd #content .div-blanc ul { padding-left: 50px; margin-bottom: 20px; }

            body#ResetPwd #content .div-blanc ul li{ text-align: left; padding-left: 20px; }

            

            body#ResetPwd input[type="text"] {

                width: 300px;

                height: 48px;

                border: 1px solid #C6C6C6;

                font-size: 18px;

                text-indent: 50px;

                background: url("../images/courriel_icon.png") no-repeat scroll 10px center;

                margin-bottom: 10px;

            }

            body#ResetPwd input[type="submit"] { width: 300px }

        /* SECTION RESET PWD */

        

        

    

.error{ 

    -webkit-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

    color: #b41212; background: #CCC; line-height: 40px; text-indent: 15px;

}

.erreur{ font-size: 14px; 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;}



a.baldwin {

    width: 275px;

    height: 90px;

    float: left;

    display: block;

    /* background: url(https://www.metrocite.ca/wp-content/uploads/2020/11/logo-baldwin.png) top 15px center no-repeat; */
    background: url(https://www.metrocite.ca/wp-content/uploads/2023/11/logo-baldwin.png) top 33% center no-repeat;
    

    border: 3px solid #058576;

    border-radius: 15px;

    font-size: 20px;

    color: #058576;

    background-size: 80% auto;

    padding: 215px 30px 0;

    line-height: 30px;

    font-weight: bold;

    margin: 50px 20px;

    text-align: center;

}

#soumettre, #submitUser{ background: #eb6608; color: #FFF; }

#soumettre:hover, #submitUser:hover{background: #FFF; color: #eb6608; }

/*  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, #user{ 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: #4C3D3D 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;}

}