@media only screen
and (min-width : 720px) {
    .fixed-top{
        height: 6vh;
    }

    #modalInfo > .modal-dialog{
        max-width: 50%;
        height: 75vh;
        margin-top: 5%;
    }
    
    #modalInfo .modal-dialog > div{
        height:100%;
    }

    #modalInfo .modal-dialog > div > .modal-body{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div{
        height:100%;
        overflow-y: auto;
        overflow-x: hidden;

    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail{
        height:70%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail > div{
        height:90%;
    }

    .btnStatut{
        width: 15%;
        margin-right: 5%;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .aide img{
        border: 2px solid #ddd;
        padding: 10px;
        background-color: #f9f9f9;
    }

    .envoiMessage{
        margin-bottom:1%;
    }

    .messageClientFooter .mce-tinymce{
        box-sizing: border-box;
        margin-bottom: 0.5%;
    }

    .conversationIncident{
        width:100%;
        margin-bottom:0.5%;
    }


    .w3-striped tbody .afficheMessage.active{
        background-color:pink;
        font-weight:bold;
    }

    .messageInitial{
        
    }

    .messInit{
        background: rgb(247,147,29);
        border-radius: 5px;
        color: #fff;
        width: 100%;
        margin-bottom: 10px;
    }

    .messInit p{
        margin: 0px 10px 0px;
        padding:10px;
    }

    .affichageDiscussion{
        overflow-y:auto;
        max-height:30%;
    }

    .hiddenRow{
        padding: 0px;
    }

    #ticket tr{
        cursor: pointer;
    }

    .contactDiscussion{
        max-width:75%;
        margin-bottom: 5px; 
    }

    .contactMessage{
        background: hsla(0, 0%, 90%, 1);
        border-radius: 5px;
        color:#3c3c3c;
    }

    .contactMessage p{
        margin: 0px 10px 0px;
        padding:10px; 
    }

    .persoDiscussion{
        background: hsla(198, 100%, 85%, 1);
        border-radius: 5px;
        margin-bottom: 10px;
        color: #3c3c3c;
    }

    .persoDiscussion p{
        margin: 0px 10px 0px;
        padding:10px;
    }

    .messageClientFooter{
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        border-radius: 5px 5px 0 0;
    }

    .idealCentrer {
        display: block;
        margin-left: 35%;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .center{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .idealLeft {
        display: block;
        width: 35%;
        height: auto;
        float: left;
    }
    
    .socRight {
        display: block;
        width: 10%;
        height: auto;
    }
    
    .docLie{
        font-size:12px;
        text-indent: 40px;
    }
    
    .roundRed{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: red;
    }
    
    .roundGreen{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: green;
    }
    
    .roundOrange{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: orangered;
    }
    .popover-header {
        padding:8px 14px;
        background-color:#f7f7f7;
        border-bottom:1px solid #ebebeb;
        -webkit-border-radius:5px 5px 0 0;
        -moz-border-radius:5px 5px 0 0;
        border-radius:5px 5px 0 0;
    }
    .popover-title {
        margin:0;
        padding:0;
        background-color:transparent;
        border:none;
    }
    .example-popovers {
        padding:30px 0;
    }
    
    .titreSoc{
        background: #f1f1f1;
        padding:5px 15px;
    }
    
    .logoIdeal {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
    }
    
    /* The side navigation menu */
    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        background-color: #111; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    
    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    
    .navbar {
        border-radius: 0px;
    }
        
    body{margin: 0;padding: 0;font-family: "arial";background:white !important;width: 100vw;height:100vh;position:relative;}
    i.fa {font-size: 17px;padding: 14px;width: 30px;text-align: center;text-shadow:1px 1px 1px #000;}
    .leftMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:6%;width: 5%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .hamburger{float: right;margin-right: 10px;margin-top: 10px;text-align: center;cursor: pointer;position: relative;transform: rotate(0deg);}
    .hamburger.open{transition: all ease .5s;}
    .hamburger:hover {box-shadow: none;transition: all ease .5s;transform: rotate(360deg);}
    .hamburger span{width: 60%;height: 3px;background-color: #000;display: block;border-radius: 1px;float: left;margin-left: 20%;transition: all ease .3s;}
    .hamburger span:nth-child(1){margin-top: 13px;}
    .hamburger span:nth-child(2){margin-top: 3px;}
    .hamburger span:nth-child(3){margin-top: 3px;}
    .openMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:6%;width: 23%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .leftMenuList{margin-top: 70px;list-style: none;padding: 0;}
    .leftMenuList li{width: 250px;line-height: 40px;color: #fff;border-bottom: 1px solid rgb(37,170,225);font-size: 13px;}
    .openMenu .leftMenuList li:hover{background-color: rgb(37,170,225);transition: all ease .5s;cursor: pointer;}
    .leftMenuList li a{text-decoration: none;color: #fff;}
    .leftMenuList li a svg{width: 40px;height: 40px;float: left;margin-left: 0px;}
    .leftMenuList li a span{text-decoration: none;color: #fff;margin-left: 25px;width: 100%;}
    .leftMenuList li ul li{padding: 0px;line-height: 30px;transition: all .4s;box-sizing: border-box;}
    .leftMenuList li ul li:hover{background: rgb(37,170,225);transition: all .4s;}
    .leftMenuList li ul li ul li{padding: 5px;background: rgb(37,170,225);}
    .leftMenuList li ul li ul li a span{color:rgb(37,170,225);}
    .leftMenuList li ul li ul li:hover{background: rgb(37,170,225);}
    .active + .dropdownlist{width: 100%;height: auto;line-height: 30px;padding: 0px;margin-left: 0px;background: #222;}
    .active + .dropdownlist:hover{background:#222;}
    .dropdownlist{width: 0;height: 0;overflow: hidden;}
    .dropdown:before{font-family: FontAwesome;content: "\f105";transition: all .4s;padding-right: 5px;right:-20px;position: absolute;top: -12px;}
    .dropdown.active:before{font-family: FontAwesome;content: '\f107';transition: all .4s;padding-right: 0px;}
    .leftMenu:not(.openMenu) li > .dropdownlist{pointer-events: none;height:0;}
    .text-shadow{text-shadow: 1px 1px 0px #000;}
    .text-color{/*color: #00BCD4;*/ color:#99A85B;}
    .close{opacity: 1 !important;}

    .openMenuContenu #menuProfil{
        width:31%;
    }

    .contenu{
        width: 95%;
        left:6%;
        position:relative;
        margin-top:6%;
        transition: all ease .1s;
    }

    .openMenuContenu{
        width:80%;
        left:23%;
        transition: all ease .1s;
    }
    .rocketchat-widget{
        right:0px;
    }
    .container{
        margin-left:0px;
    }

    .tooltip.right .tooltip-arrow{
        border-right-color: rgb(37,170,225);
    }

    .tooltip.top .tooltip-arrow{
        border-top-color: rgb(37,170,225);
    }

    .tooltip-inner {
        padding:10px;
        background-color: rgb(37,170,225);
    }

    .profilMenu{
        background-color:rgb(37,170,225);
        padding:10px;
        font-size:150%;
        width:20%;
        border-left: 2px solid #333;
    }

    .backgroundMenuProfil{
        background-color: #eee;
    }

    .sectionDivide{
        border-bottom:1px solid #333;
        margin-left: 31%;
    }

    .sectionDivideModal{
        border-bottom:1px solid #333;
    }

    .document{
        width: 95%;
        margin-left: 0px;
    }

    .nav{
        font-size: 14px;
    }

    .telPerso{
        float:left;
        padding-right:8%;
    }

    .login_center{
        width:35%;
    }


    #menuProfil{
        width: 26%;
        height: 100%;
        float: left;
        padding-top: 100px;
        padding-right: 20px;
    }

    #cpPerso{
        float:left; 
        width:20%;
        margin-right:10%;
    }

}

@media only screen
and (min-width : 1024px) {
    .fixed-top{
        height: 6vh;
    }

    #modalInfo > .modal-dialog{
        max-width: 50%;
        height: 75vh;
        margin-top: 5%;
    }
    
    #modalInfo .modal-dialog > div{
        height:100%;
    }

    #modalInfo .modal-dialog > div > .modal-body{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div{
        height:100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail{
        height:70%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail > div{
        height:90%;
    }

    .messageClientFooter{
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        border-radius: 5px 5px 0 0;
    }

    .idealCentrer {
        display: block;
        margin-left: 35%;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .center{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .idealLeft {
        display: block;
        width: 35%;
        height: auto;
        float: left;
    }
    
    .socRight {
        display: block;
        width: 10%;
        height: auto;
    }
    
    .docLie{
        font-size:12px;
        text-indent: 40px;
    }
    
    .roundRed{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: red;
    }
    
    .roundGreen{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: green;
    }
    
    .roundOrange{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: orangered;
    }
    .popover-header {
        padding:8px 14px;
        background-color:#f7f7f7;
        border-bottom:1px solid #ebebeb;
        -webkit-border-radius:5px 5px 0 0;
        -moz-border-radius:5px 5px 0 0;
        border-radius:5px 5px 0 0;
    }
    .popover-title {
        margin:0;
        padding:0;
        background-color:transparent;
        border:none;
    }
    .example-popovers {
        padding:30px 0;
    }
    
    .titreSoc{
        background: #f1f1f1;
        padding:5px 15px;
    }
    
    .logoIdeal {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
    }
    
    /* The side navigation menu */
    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        background-color: #111; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    
    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    
    .navbar {
        border-radius: 0px;
    }
        
    body{margin: 0;padding: 0;font-family: "arial";background:white !important;width: 100vw;height:100vh;position:relative;}
    i.fa {font-size: 17px;padding: 14px;width: 30px;text-align: center;text-shadow:1px 1px 1px #000;}
    .leftMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:6%;width: 5%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .hamburger{float: right;margin-right: 10px;margin-top: 10px;text-align: center;cursor: pointer;position: relative;transform: rotate(0deg);}
    .hamburger.open{transition: all ease .5s;}
    .hamburger:hover {box-shadow: none;transition: all ease .5s;transform: rotate(360deg);}
    .hamburger span{width: 60%;height: 3px;background-color: #000;display: block;border-radius: 1px;float: left;margin-left: 20%;transition: all ease .3s;}
    .hamburger span:nth-child(1){margin-top: 13px;}
    .hamburger span:nth-child(2){margin-top: 3px;}
    .hamburger span:nth-child(3){margin-top: 3px;}
    .openMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:8%;width: 20%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .leftMenuList{margin-top: 70px;list-style: none;padding: 0;}
    .leftMenuList li{width: 250px;line-height: 40px;color: #fff;border-bottom: 1px solid rgb(37,170,225);font-size: 13px;}
    .openMenu .leftMenuList li:hover{background-color: rgb(37,170,225);transition: all ease .5s;cursor: pointer;}
    .leftMenuList li a{text-decoration: none;color: #fff;}
    .leftMenuList li a svg{width: 40px;height: 40px;float: left;margin-left: 0px;}
    .leftMenuList li a span{text-decoration: none;color: #fff;margin-left: 25px;width: 100%;}
    .leftMenuList li ul li{padding: 0px;line-height: 30px;transition: all .4s;box-sizing: border-box;}
    .leftMenuList li ul li:hover{background: rgb(37,170,225);transition: all .4s;}
    .leftMenuList li ul li ul li{padding: 5px;background: rgb(37,170,225);}
    .leftMenuList li ul li ul li a span{color:rgb(37,170,225);}
    .leftMenuList li ul li ul li:hover{background: rgb(37,170,225);}
    .active + .dropdownlist{width: 100%;height: auto;line-height: 30px;padding: 0px;margin-left: 0px;background: #222;}
    .active + .dropdownlist:hover{background:#222;}
    .dropdownlist{width: 0;height: 0;overflow: hidden;}
    .dropdown:before{font-family: FontAwesome;content: "\f105";transition: all .4s;padding-right: 5px;right: -20px;position: absolute;top: -12px;}
    .dropdown.active:before{font-family: FontAwesome;content: '\f107';transition: all .4s;padding-right: 0px;}
    .leftMenu:not(.openMenu) li > .dropdownlist{pointer-events: none;height:0;}
    .text-shadow{text-shadow: 1px 1px 0px #000;}
    .text-color{/*color: #00BCD4;*/ color:#99A85B;}
    .close{opacity: 1 !important;}

    .openMenuContenu #menuProfil{
        width:33%;
    }

    .contenu{
        width: 95%;
        left:6%;
        position:relative;
        margin-top:6%;
        transition: all ease .1s;
    }

    .openMenuContenu{
        width:80%;
        left:23%;
        transition: all ease .1s;
    }
    .rocketchat-widget{
        right:0px;
    }
    .container{
        margin-left:0px;
    }

    .tooltip.right .tooltip-arrow{
        border-right-color: rgb(37,170,225);
    }

    .tooltip.top .tooltip-arrow{
        border-top-color: rgb(37,170,225);
    }

    .tooltip-inner {
        padding:10px;
        background-color: rgb(37,170,225);
    }

    .profilMenu{
        background-color:rgb(37,170,225);
        padding:10px;
        font-size:150%;
        width:20%;
        border-left: 2px solid #333;
    }

    .backgroundMenuProfil{
        background-color: #eee;
    }

    .sectionDivide{
        border-bottom:1px solid #333;
        margin-left: 31%;
    }

    .sectionDivideModal{
        border-bottom:1px solid #333;
    }

    .document{
        width: 95%;
        margin-left: 0px;
    }

    .nav{
        font-size: 14px;
    }

    .telPerso{
        float:left;
        padding-right:8%;
    }

    .login_center{
        width:35%;
    }


    #menuProfil{
        width: 26%;
        height: 100%;
        float: left;
        padding-top: 100px;
        padding-right: 20px;
    }

    #cpPerso{
        float:left; 
        width:20%;
        margin-right:10%;
    }

}

@media only screen
and (min-width : 1224px) {
    .fixed-top{
        height: 6vh;
    }

    #modalInfo > .modal-dialog{
        max-width: 50%;
        height: 75vh;
        margin-top: 5%;
    }
    
    #modalInfo .modal-dialog > div{
        height:100%;
    }

    #modalInfo .modal-dialog > div > .modal-body{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div{
        height:100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail{
        height:70%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail > div{
        height:90%;
    }

    .messageClientFooter{
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        border-radius: 5px 5px 0 0;
    }

    .idealCentrer {
        display: block;
        margin-left: 35%;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .center{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .idealLeft {
        display: block;
        width: 35%;
        height: auto;
        float: left;
    }
    
    .socRight {
        display: block;
        width: 10%;
        height: auto;
    }
    
    .docLie{
        font-size:12px;
        text-indent: 40px;
    }
    
    .roundRed{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: red;
    }
    
    .roundGreen{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: green;
    }
    
    .roundOrange{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: orangered;
    }
    .popover-header {
        padding:8px 14px;
        background-color:#f7f7f7;
        border-bottom:1px solid #ebebeb;
        -webkit-border-radius:5px 5px 0 0;
        -moz-border-radius:5px 5px 0 0;
        border-radius:5px 5px 0 0;
    }
    .popover-title {
        margin:0;
        padding:0;
        background-color:transparent;
        border:none;
    }
    .example-popovers {
        padding:30px 0;
    }
    
    .titreSoc{
        background: #f1f1f1;
        padding:5px 15px;
    }
    
    .logoIdeal {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
    }
    
    /* The side navigation menu */
    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        background-color: #111; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    
    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    
    .navbar {
        border-radius: 0px;
    }

        
    body{margin: 0;padding: 0;font-family: "arial";background:white !important;width: 100vw;height:100vh;position:relative;}
    i.fa {font-size: 17px;padding: 14px;width: 30px;text-align: center;text-shadow:1px 1px 1px #000;}
    .leftMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:7%;width: 2.5%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .hamburger{float: right;margin-right: 10px;margin-top: 10px;text-align: center;cursor: pointer;position: relative;transform: rotate(0deg);}
    .hamburger.open{transition: all ease .5s;}
    .hamburger:hover {box-shadow: none;transition: all ease .5s;transform: rotate(360deg);}
    .hamburger span{width: 60%;height: 3px;background-color: #000;display: block;border-radius: 1px;float: left;margin-left: 20%;transition: all ease .3s;}
    .hamburger span:nth-child(1){margin-top: 13px;}
    .hamburger span:nth-child(2){margin-top: 3px;}
    .hamburger span:nth-child(3){margin-top: 3px;}
    .openMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:7%;width: 13%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .leftMenuList{margin-top: 70px;list-style: none;padding: 0;}
    .leftMenuList li{width: 250px;line-height: 40px;color: #fff;border-bottom: 1px solid rgb(37,170,225);font-size: 13px;}
    .openMenu .leftMenuList li:hover{background-color: rgb(37,170,225);transition: all ease .5s;cursor: pointer;}
    .leftMenuList li a{text-decoration: none;color: #fff;}
    .leftMenuList li a svg{width: 40px;height: 40px;float: left;margin-left: 0px;}
    .leftMenuList li a span{text-decoration: none;color: #fff;margin-left: 25px;width: 100%;}
    .leftMenuList li ul li{padding: 0px;line-height: 30px;transition: all .4s;box-sizing: border-box;}
    .leftMenuList li ul li:hover{background: rgb(37,170,225);transition: all .4s;}
    .leftMenuList li ul li ul li{padding: 5px;background: rgb(37,170,225);}
    .leftMenuList li ul li ul li a span{color:rgb(37,170,225);}
    .leftMenuList li ul li ul li:hover{background: rgb(37,170,225);}
    .active + .dropdownlist{width: 100%;height: auto;line-height: 30px;padding: 0px;margin-left: 0px;background: #222;}
    .active + .dropdownlist:hover{background:#222;}
    .dropdownlist{width: 0;height: 0;overflow: hidden;}
    .dropdown:before{font-family: FontAwesome;content: "\f105";transition: all .4s;padding-right: 5px;right: -20px;position: absolute;top: -12px;}
    .dropdown.active:before{font-family: FontAwesome;content: '\f107';transition: all .4s;padding-right: 0px;}
    .leftMenu:not(.openMenu) li > .dropdownlist{pointer-events: none;height:0;}
    .text-shadow{text-shadow: 1px 1px 0px #000;}
    .text-color{/*color: #00BCD4;*/ color:#99A85B;}
    .close{opacity: 1 !important;}

    .openMenuContenu #menuProfil{
        width:24%;
    }

    .contenu{
        width: 95%;
        left:4%;
        position:relative;
        margin-top:5%;
        transition: all ease .1s;
    }

    .openMenuContenu{
        width:80%;
        left:14%;
        transition: all ease .1s;
    }
    .rocketchat-widget{
        right:0px;
    }
    .container{
        margin-left:0px;
    }

    .tooltip.right .tooltip-arrow{
        border-right-color: rgb(37,170,225);
    }

    .tooltip.top .tooltip-arrow{
        border-top-color: rgb(37,170,225);
    }

    .tooltip-inner {
        padding:10px;
        background-color: rgb(37,170,225);
    }

    .profilMenu{
        background-color:rgb(37,170,225);
        padding:10px;
        font-size:150%;
        width:12%;
        border-left: 2px solid #333;
    }

    .backgroundMenuProfil{
        background-color: #eee;
    }

    .sectionDivide{
        border-bottom:1px solid #333;
        margin-left: 31%;
    }

    .sectionDivideModal{
        border-bottom:1px solid #333;
    }

    .document{
        width: 95%;
        margin-left: 0px;
    }

    .telPerso{
        float:left;
        padding-right:6%;
    }
    
    #menuProfil{
        width: 20%;
        height: 90%;
        float: left;
        padding-top: 100px;
        padding-right: 20px;
    }
    
    #cpPerso{
        float:left; 
        width:30%;
    }
}

@media only screen
and (min-width : 1224px) and (min-height:1024px){
    .fixed-top{
        height: 6vh;
    }

    #modalInfo > .modal-dialog{
        max-width: 50%;
        height: 75vh;
        margin-top: 5%;
    }
    
    #modalInfo .modal-dialog > div{
        height:100%;
    }

    #modalInfo .modal-dialog > div > .modal-body{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div{
        height:100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail{
        height:70%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail > div{
        height:90%;
    }

    .messageClientFooter{
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        border-radius: 5px 5px 0 0;
    }

    .idealCentrer {
        display: block;
        margin-left: 35%;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .center{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .idealLeft {
        display: block;
        width: 35%;
        height: auto;
        float: left;
    }
    
    .socRight {
        display: block;
        width: 10%;
        height: auto;
    }
    
    .docLie{
        font-size:12px;
        text-indent: 40px;
    }
    
    .roundRed{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: red;
    }
    
    .roundGreen{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: green;
    }
    
    .roundOrange{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: orangered;
    }
    .popover-header {
        padding:8px 14px;
        background-color:#f7f7f7;
        border-bottom:1px solid #ebebeb;
        -webkit-border-radius:5px 5px 0 0;
        -moz-border-radius:5px 5px 0 0;
        border-radius:5px 5px 0 0;
    }
    .popover-title {
        margin:0;
        padding:0;
        background-color:transparent;
        border:none;
    }
    .example-popovers {
        padding:30px 0;
    }
    
    .titreSoc{
        background: #f1f1f1;
        padding:5px 15px;
    }
    
    .logoIdeal {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
    }
    
    /* The side navigation menu */
    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        background-color: #111; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    
    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    
    .navbar {
        border-radius: 0px;
    }

        
    body{margin: 0;padding: 0;font-family: "arial";background:white !important;width: 100vw;height:100vh;position:relative;}
    i.fa {font-size: 17px;padding: 14px;width: 30px;text-align: center;text-shadow:1px 1px 1px #000;}
    .leftMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:5%;width: 4%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .hamburger{float: right;margin-right: 10px;margin-top: 10px;text-align: center;cursor: pointer;position: relative;transform: rotate(0deg);}
    .hamburger.open{transition: all ease .5s;}
    .hamburger:hover {box-shadow: none;transition: all ease .5s;transform: rotate(360deg);}
    .hamburger span{width: 60%;height: 3px;background-color: #000;display: block;border-radius: 1px;float: left;margin-left: 20%;transition: all ease .3s;}
    .hamburger span:nth-child(1){margin-top: 13px;}
    .hamburger span:nth-child(2){margin-top: 3px;}
    .hamburger span:nth-child(3){margin-top: 3px;}
    .openMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:5%;width: 18%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .leftMenuList{margin-top: 70px;list-style: none;padding: 0;}
    .leftMenuList li{width: 250px;line-height: 40px;color: #fff;border-bottom: 1px solid rgb(37,170,225);font-size: 13px;}
    .openMenu .leftMenuList li:hover{background-color: rgb(37,170,225);transition: all ease .5s;cursor: pointer;}
    .leftMenuList li a{text-decoration: none;color: #fff;}
    .leftMenuList li a svg{width: 40px;height: 40px;float: left;margin-left: 0px;}
    .leftMenuList li a span{text-decoration: none;color: #fff;margin-left: 25px;width: 100%;}
    .leftMenuList li ul li{padding: 0px;line-height: 30px;transition: all .4s;box-sizing: border-box;}
    .leftMenuList li ul li:hover{background: rgb(37,170,225);transition: all .4s;}
    .leftMenuList li ul li ul li{padding: 5px;background: rgb(37,170,225);}
    .leftMenuList li ul li ul li a span{color:rgb(37,170,225);}
    .leftMenuList li ul li ul li:hover{background: rgb(37,170,225);}
    .active + .dropdownlist{width: 100%;height: auto;line-height: 30px;padding: 0px;margin-left: 0px;background: #222;}
    .active + .dropdownlist:hover{background:#222;}
    .dropdownlist{width: 0;height: 0;overflow: hidden;}
    .dropdown:before{font-family: FontAwesome;content: "\f105";transition: all .4s;padding-right: 5px;right: -20px;position: absolute;top: -12px;}
    .dropdown.active:before{font-family: FontAwesome;content: '\f107';transition: all .4s;padding-right: 0px;}
    .leftMenu:not(.openMenu) li > .dropdownlist{pointer-events: none;height:0;}
    .text-shadow{text-shadow: 1px 1px 0px #000;}
    .text-color{/*color: #00BCD4;*/ color:#99A85B;}
    .close{opacity: 1 !important;}

    .openMenuContenu #menuProfil{
        width:37%;
    }

    .contenu{
        width: 95%;
        left:4%;
        position:relative;
        margin-top:5%;
        transition: all ease .1s;
    }

    .openMenuContenu{
        width:80%;
        left:20%;
        transition: all ease .1s;
    }
    .rocketchat-widget{
        right:0px;
    }
    .container{
        margin-left:0px;
    }

    .tooltip.right .tooltip-arrow{
        border-right-color: rgb(37,170,225);
    }

    .tooltip.top .tooltip-arrow{
        border-top-color: rgb(37,170,225);
    }

    .tooltip-inner {
        padding:10px;
        background-color: rgb(37,170,225);
    }

    .profilMenu{
        background-color:rgb(37,170,225);
        padding:10px;
        font-size:150%;
        width:12%;
        border-left: 2px solid #333;
    }

    .backgroundMenuProfil{
        background-color: #eee;
    }

    .sectionDivide{
        border-bottom:1px solid #333;
        margin-left: 31%;
    }

    .sectionDivideModal{
        border-bottom:1px solid #333;
    }

    .document{
        width: 95%;
        margin-left: 0px;
    }

    .telPerso{
        float:left;
        padding-right:6%;
    }
    
    #menuProfil{
        width: 31%;
        height: 90%;
        float: left;
        padding-top: 100px;
        padding-right: 20px;
    }
    
    #cpPerso{
        float:left; 
        width:30%;
    }
}

@media only screen
and (min-width : 1440px) and (min-height:900px) {
    .fixed-top{
        height: 6vh;
    }

    #modalInfo > .modal-dialog{
        max-width: 50%;
        height: 75vh;
        margin-top: 5%;
    }
    
    #modalInfo .modal-dialog > div{
        height:100%;
    }

    #modalInfo .modal-dialog > div > .modal-body{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div{
        height:100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail{
        height:70%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail > div{
        height:90%;
    }

    .messageClientFooter{
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        border-radius: 5px 5px 0 0;
    }

    .idealCentrer {
        display: block;
        margin-left: 35%;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .center{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .idealLeft {
        display: block;
        width: 35%;
        height: auto;
        float: left;
    }
    
    .socRight {
        display: block;
        width: 10%;
        height: auto;
    }
    
    .docLie{
        font-size:12px;
        text-indent: 40px;
    }
    
    .roundRed{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: red;
    }
    
    .roundGreen{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: green;
    }
    
    .roundOrange{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: orangered;
    }
    .popover-header {
        padding:8px 14px;
        background-color:#f7f7f7;
        border-bottom:1px solid #ebebeb;
        -webkit-border-radius:5px 5px 0 0;
        -moz-border-radius:5px 5px 0 0;
        border-radius:5px 5px 0 0;
    }
    .popover-title {
        margin:0;
        padding:0;
        background-color:transparent;
        border:none;
    }
    .example-popovers {
        padding:30px 0;
    }
    
    .titreSoc{
        background: #f1f1f1;
        padding:5px 15px;
    }
    
    .logoIdeal {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
    }
    
    /* The side navigation menu */
    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        background-color: #111; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    
    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    
    .navbar {
        border-radius: 0px;
    }

        
    body{margin: 0;padding: 0;font-family: "arial";background:white !important;width: 100vw;height:100vh;position:relative;}
    i.fa {font-size: 17px;padding: 14px;width: 30px;text-align: center;text-shadow:1px 1px 1px #000;}
    .leftMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:5%;width: 2.5%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .hamburger{float: right;margin-right: 10px;margin-top: 10px;text-align: center;cursor: pointer;position: relative;transform: rotate(0deg);}
    .hamburger.open{transition: all ease .5s;}
    .hamburger:hover {box-shadow: none;transition: all ease .5s;transform: rotate(360deg);}
    .hamburger span{width: 60%;height: 3px;background-color: #000;display: block;border-radius: 1px;float: left;margin-left: 20%;transition: all ease .3s;}
    .hamburger span:nth-child(1){margin-top: 13px;}
    .hamburger span:nth-child(2){margin-top: 3px;}
    .hamburger span:nth-child(3){margin-top: 3px;}
    .openMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:5%;width: 13%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .leftMenuList{margin-top: 70px;list-style: none;padding: 0;}
    .leftMenuList li{width: 250px;line-height: 40px;color: #fff;border-bottom: 1px solid rgb(37,170,225);font-size: 13px;}
    .openMenu .leftMenuList li:hover{background-color: rgb(37,170,225);transition: all ease .5s;cursor: pointer;}
    .leftMenuList li a{text-decoration: none;color: #fff;}
    .leftMenuList li a svg{width: 40px;height: 40px;float: left;margin-left: 0px;}
    .leftMenuList li a span{text-decoration: none;color: #fff;margin-left: 25px;width: 100%;}
    .leftMenuList li ul li{padding: 0px;line-height: 30px;transition: all .4s;box-sizing: border-box;}
    .leftMenuList li ul li:hover{background: rgb(37,170,225);transition: all .4s;}
    .leftMenuList li ul li ul li{padding: 5px;background: rgb(37,170,225);}
    .leftMenuList li ul li ul li a span{color:rgb(37,170,225);}
    .leftMenuList li ul li ul li:hover{background: rgb(37,170,225);}
    .active + .dropdownlist{width: 100%;height: auto;line-height: 30px;padding: 0px;margin-left: 0px;background: #222;}
    .active + .dropdownlist:hover{background:#222;}
    .dropdownlist{width: 0;height: 0;overflow: hidden;}
    .dropdown:before{font-family: FontAwesome;content: "\f105";transition: all .4s;padding-right: 5px;right: -20px;position: absolute;top: -12px;}
    .dropdown.active:before{font-family: FontAwesome;content: '\f107';transition: all .4s;padding-right: 0px;}
    .leftMenu:not(.openMenu) li > .dropdownlist{pointer-events: none;height:0;}
    .text-shadow{text-shadow: 1px 1px 0px #000;}
    .text-color{/*color: #00BCD4;*/ color:#99A85B;}
    .close{opacity: 1 !important;}

    .openMenuContenu #menuProfil{
        width:24%;
    }

    .contenu{
        width: 95%;
        left:4%;
        position:relative;
        margin-top:5%;
        transition: all ease .1s;
    }

    .openMenuContenu{
        width:80%;
        left:14%;
        transition: all ease .1s;
    }
    .rocketchat-widget{
        right:0px;
    }
    .container{
        margin-left:0px;
    }

    .tooltip.right .tooltip-arrow{
        border-right-color: rgb(37,170,225);
    }

    .tooltip.top .tooltip-arrow{
        border-top-color: rgb(37,170,225);
    }

    .tooltip-inner {
        padding:10px;
        background-color: rgb(37,170,225);
    }

    .profilMenu{
        background-color:rgb(37,170,225);
        padding:10px;
        font-size:150%;
        width:12%;
        border-left: 2px solid #333;
    }

    .backgroundMenuProfil{
        background-color: #eee;
    }

    .sectionDivide{
        border-bottom:1px solid #333;
        margin-left: 31%;
    }

    .sectionDivideModal{
        border-bottom:1px solid #333;
    }

    .document{
        width: 95%;
        margin-left: 0px;
    }

    .telPerso{
        float:left;
        padding-right:6%;
    }
    
    #menuProfil{
        width: 20%;
        height: 90%;
        float: left;
        padding-top: 100px;
        padding-right: 20px;
    }
    
    #cpPerso{
        float:left; 
        width:30%;
    }
}

@media only screen
and (min-width : 1680px) and(min-height:1050px) {
    .fixed-top{
        height: 6vh;
    }

    #modalInfo > .modal-dialog{
        max-width: 50%;
        height: 75vh;
        margin-top: 5%;
    }
    
    #modalInfo .modal-dialog > div{
        height:100%;
    }

    #modalInfo .modal-dialog > div > .modal-body{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div{
        height:100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail{
        height:70%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail > div{
        height:90%;
    }

    .messageClientFooter{
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        border-radius: 5px 5px 0 0;
    }

    .idealCentrer {
        display: block;
        margin-left: 35%;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .center{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .idealLeft {
        display: block;
        width: 35%;
        height: auto;
        float: left;
    }
    
    .socRight {
        display: block;
        width: 10%;
        height: auto;
    }
    
    .docLie{
        font-size:12px;
        text-indent: 40px;
    }
    
    .roundRed{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: red;
    }
    
    .roundGreen{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: green;
    }
    
    .roundOrange{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: orangered;
    }
    .popover-header {
        padding:8px 14px;
        background-color:#f7f7f7;
        border-bottom:1px solid #ebebeb;
        -webkit-border-radius:5px 5px 0 0;
        -moz-border-radius:5px 5px 0 0;
        border-radius:5px 5px 0 0;
    }
    .popover-title {
        margin:0;
        padding:0;
        background-color:transparent;
        border:none;
    }
    .example-popovers {
        padding:30px 0;
    }
    
    .titreSoc{
        background: #f1f1f1;
        padding:5px 15px;
    }
    
    .logoIdeal {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
    }
    
    /* The side navigation menu */
    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        background-color: #111; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    
    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    
    .navbar {
        border-radius: 0px;
    }

        
    body{margin: 0;padding: 0;font-family: "arial";background:white !important;width: 100vw;height:100vh;position:relative;}
    i.fa {font-size: 17px;padding: 14px;width: 30px;text-align: center;text-shadow:1px 1px 1px #000;}
    .leftMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:4.5%;width: 3%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .hamburger{float: right;margin-right: 10px;margin-top: 10px;text-align: center;cursor: pointer;position: relative;transform: rotate(0deg);}
    .hamburger.open{transition: all ease .5s;}
    .hamburger:hover {box-shadow: none;transition: all ease .5s;transform: rotate(360deg);}
    .hamburger span{width: 60%;height: 3px;background-color: #000;display: block;border-radius: 1px;float: left;margin-left: 20%;transition: all ease .3s;}
    .hamburger span:nth-child(1){margin-top: 13px;}
    .hamburger span:nth-child(2){margin-top: 3px;}
    .hamburger span:nth-child(3){margin-top: 3px;}
    .openMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:4.5%;width: 13%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .leftMenuList{margin-top: 70px;list-style: none;padding: 0;}
    .leftMenuList li{width: 250px;line-height: 40px;color: #fff;border-bottom: 1px solid rgb(37,170,225);font-size: 13px;}
    .openMenu .leftMenuList li:hover{background-color: rgb(37,170,225);transition: all ease .5s;cursor: pointer;}
    .leftMenuList li a{text-decoration: none;color: #fff;}
    .leftMenuList li a svg{width: 40px;height: 40px;float: left;margin-left: 0px;}
    .leftMenuList li a span{text-decoration: none;color: #fff;margin-left: 25px;width: 100%;}
    .leftMenuList li ul li{padding: 0px;line-height: 30px;transition: all .4s;box-sizing: border-box;}
    .leftMenuList li ul li:hover{background: rgb(37,170,225);transition: all .4s;}
    .leftMenuList li ul li ul li{padding: 5px;background: rgb(37,170,225);}
    .leftMenuList li ul li ul li a span{color:rgb(37,170,225);}
    .leftMenuList li ul li ul li:hover{background: rgb(37,170,225);}
    .active + .dropdownlist{width: 100%;height: auto;line-height: 30px;padding: 0px;margin-left: 0px;background: #222;}
    .active + .dropdownlist:hover{background:#222;}
    .dropdownlist{width: 0;height: 0;overflow: hidden;}
    .dropdown:before{font-family: FontAwesome;content: "\f105";transition: all .4s;padding-right: 5px;right: -20px;position: absolute;top: -12px;}
    .dropdown.active:before{font-family: FontAwesome;content: '\f107';transition: all .4s;padding-right: 0px;}
    .leftMenu:not(.openMenu) li > .dropdownlist{pointer-events: none;height:0;}
    .text-shadow{text-shadow: 1px 1px 0px #000;}
    .text-color{/*color: #00BCD4;*/ color:#99A85B;}
    .close{opacity: 1 !important;}

    .openMenuContenu #menuProfil{
        width:27%;
    }

    .contenu{
        width: 95%;
        left:4%;
        position:relative;
        margin-top:5%;
        transition: all ease .1s;
    }

    .openMenuContenu{
        width:80%;
        left:15%;
        transition: all ease .1s;
    }
    .rocketchat-widget{
        right:0px;
    }
    .container{
        margin-left:0px;
    }

    .tooltip.right .tooltip-arrow{
        border-right-color: rgb(37,170,225);
    }

    .tooltip.top .tooltip-arrow{
        border-top-color: rgb(37,170,225);
    }

    .tooltip-inner {
        padding:10px;
        background-color: rgb(37,170,225);
    }

    .profilMenu{
        background-color:rgb(37,170,225);
        padding:10px;
        font-size:150%;
        width:12%;
        border-left: 2px solid #333;
    }

    .backgroundMenuProfil{
        background-color: #eee;
    }

    .sectionDivide{
        border-bottom:1px solid #333;
        margin-left: 31%;
    }

    .sectionDivideModal{
        border-bottom:1px solid #333;
    }

    .document{
        width: 95%;
        margin-left: 0px;
    }

    .telPerso{
        float:left;
        padding-right:6%;
    }
    
    #menuProfil{
        width: 23%;
        height: 90%;
        float: left;
        padding-top: 100px;
        padding-right: 20px;
    }
    
    #cpPerso{
        float:left; 
        width:30%;
    }
}

@media only screen
and (min-width : 1680px) and(min-height:1200px) {
    .fixed-top{
        height: 6vh;
    }

    #modalInfo > .modal-dialog{
        max-width: 50%;
        height: 75vh;
        margin-top: 5%;
    }
    
    #modalInfo .modal-dialog > div{
        height:100%;
    }

    #modalInfo .modal-dialog > div > .modal-body{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div{
        height:100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail{
        height:70%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail > div{
        height:90%;
    }

    .messageClientFooter{
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        border-radius: 5px 5px 0 0;
    }

    .idealCentrer {
        display: block;
        margin-left: 35%;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .center{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .idealLeft {
        display: block;
        width: 35%;
        height: auto;
        float: left;
    }
    
    .socRight {
        display: block;
        width: 10%;
        height: auto;
    }
    
    .docLie{
        font-size:12px;
        text-indent: 40px;
    }
    
    .roundRed{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: red;
    }
    
    .roundGreen{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: green;
    }
    
    .roundOrange{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: orangered;
    }
    .popover-header {
        padding:8px 14px;
        background-color:#f7f7f7;
        border-bottom:1px solid #ebebeb;
        -webkit-border-radius:5px 5px 0 0;
        -moz-border-radius:5px 5px 0 0;
        border-radius:5px 5px 0 0;
    }
    .popover-title {
        margin:0;
        padding:0;
        background-color:transparent;
        border:none;
    }
    .example-popovers {
        padding:30px 0;
    }
    
    .titreSoc{
        background: #f1f1f1;
        padding:5px 15px;
    }
    
    .logoIdeal {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
    }
    
    /* The side navigation menu */
    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        background-color: #111; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    
    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    
    .navbar {
        border-radius: 0px;
    }

        
    body{margin: 0;padding: 0;font-family: "arial";background:white !important;width: 100vw;height:100vh;position:relative;}
    i.fa {font-size: 17px;padding: 14px;width: 30px;text-align: center;text-shadow:1px 1px 1px #000;}
    .leftMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:4%;width: 3%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .hamburger{float: right;margin-right: 10px;margin-top: 10px;text-align: center;cursor: pointer;position: relative;transform: rotate(0deg);}
    .hamburger.open{transition: all ease .5s;}
    .hamburger:hover {box-shadow: none;transition: all ease .5s;transform: rotate(360deg);}
    .hamburger span{width: 60%;height: 3px;background-color: #000;display: block;border-radius: 1px;float: left;margin-left: 20%;transition: all ease .3s;}
    .hamburger span:nth-child(1){margin-top: 13px;}
    .hamburger span:nth-child(2){margin-top: 3px;}
    .hamburger span:nth-child(3){margin-top: 3px;}
    .openMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:4%;width: 15%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .leftMenuList{margin-top: 70px;list-style: none;padding: 0;}
    .leftMenuList li{width: 250px;line-height: 40px;color: #fff;border-bottom: 1px solid rgb(37,170,225);font-size: 13px;}
    .openMenu .leftMenuList li:hover{background-color: rgb(37,170,225);transition: all ease .5s;cursor: pointer;}
    .leftMenuList li a{text-decoration: none;color: #fff;}
    .leftMenuList li a svg{width: 40px;height: 40px;float: left;margin-left: 0px;}
    .leftMenuList li a span{text-decoration: none;color: #fff;margin-left: 25px;width: 100%;}
    .leftMenuList li ul li{padding: 0px;line-height: 30px;transition: all .4s;box-sizing: border-box;}
    .leftMenuList li ul li:hover{background: rgb(37,170,225);transition: all .4s;}
    .leftMenuList li ul li ul li{padding: 5px;background: rgb(37,170,225);}
    .leftMenuList li ul li ul li a span{color:rgb(37,170,225);}
    .leftMenuList li ul li ul li:hover{background: rgb(37,170,225);}
    .active + .dropdownlist{width: 100%;height: auto;line-height: 30px;padding: 0px;margin-left: 0px;background: #222;}
    .active + .dropdownlist:hover{background:#222;}
    .dropdownlist{width: 0;height: 0;overflow: hidden;}
    .dropdown:before{font-family: FontAwesome;content: "\f105";transition: all .4s;padding-right: 5px;right: -20px;position: absolute;top: -12px;}
    .dropdown.active:before{font-family: FontAwesome;content: '\f107';transition: all .4s;padding-right: 0px;}
    .leftMenu:not(.openMenu) li > .dropdownlist{pointer-events: none;height:0;}
    .text-shadow{text-shadow: 1px 1px 0px #000;}
    .text-color{/*color: #00BCD4;*/ color:#99A85B;}
    .close{opacity: 1 !important;}

    .openMenuContenu #menuProfil{
        width:28%;
    }

    .contenu{
        width: 95%;
        left:4%;
        position:relative;
        margin-top:5%;
        transition: all ease .1s;
    }

    .openMenuContenu{
        width:80%;
        left:15%;
        transition: all ease .1s;
    }
    .rocketchat-widget{
        right:0px;
    }
    .container{
        margin-left:0px;
    }

    .tooltip.right .tooltip-arrow{
        border-right-color: rgb(37,170,225);
    }

    .tooltip.top .tooltip-arrow{
        border-top-color: rgb(37,170,225);
    }

    .tooltip-inner {
        padding:10px;
        background-color: rgb(37,170,225);
    }

    .profilMenu{
        background-color:rgb(37,170,225);
        padding:10px;
        font-size:150%;
        width:12%;
        border-left: 2px solid #333;
    }

    .backgroundMenuProfil{
        background-color: #eee;
    }

    .sectionDivide{
        border-bottom:1px solid #333;
        margin-left: 31%;
    }

    .sectionDivideModal{
        border-bottom:1px solid #333;
    }

    .document{
        width: 95%;
        margin-left: 0px;
    }

    .telPerso{
        float:left;
        padding-right:6%;
    }
    
    #menuProfil{
        width: 24%;
        height: 90%;
        float: left;
        padding-top: 100px;
        padding-right: 20px;
    }
    
    #cpPerso{
        float:left; 
        width:30%;
    }
}

@media only screen
and (min-width : 1920px) and(min-height:1200px) {
    .fixed-top{
        height: 6vh;
    }

    #modalInfo > .modal-dialog{
        max-width: 50%;
        height: 75vh;
        margin-top: 5%;
    }
    
    #modalInfo .modal-dialog > div{
        height:100%;
    }

    #modalInfo .modal-dialog > div > .modal-body{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div{
        height:100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail{
        height:70%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail > div{
        height:90%;
    }

    .messageClientFooter{
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        border-radius: 5px 5px 0 0;
    }

    .idealCentrer {
        display: block;
        margin-left: 35%;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .center{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .idealLeft {
        display: block;
        width: 35%;
        height: auto;
        float: left;
    }
    
    .socRight {
        display: block;
        width: 10%;
        height: auto;
    }
    
    .docLie{
        font-size:12px;
        text-indent: 40px;
    }
    
    .roundRed{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: red;
    }
    
    .roundGreen{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: green;
    }
    
    .roundOrange{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: orangered;
    }
    .popover-header {
        padding:8px 14px;
        background-color:#f7f7f7;
        border-bottom:1px solid #ebebeb;
        -webkit-border-radius:5px 5px 0 0;
        -moz-border-radius:5px 5px 0 0;
        border-radius:5px 5px 0 0;
    }
    .popover-title {
        margin:0;
        padding:0;
        background-color:transparent;
        border:none;
    }
    .example-popovers {
        padding:30px 0;
    }
    
    .titreSoc{
        background: #f1f1f1;
        padding:5px 15px;
    }
    
    .logoIdeal {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
    }
    
    /* The side navigation menu */
    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        background-color: #111; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    
    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    
    .navbar {
        border-radius: 0px;
    }

        
    body{margin: 0;padding: 0;font-family: "arial";background:white !important;width: 100vw;height:100vh;position:relative;}
    i.fa {font-size: 17px;padding: 14px;width: 30px;text-align: center;text-shadow:1px 1px 1px #000;}
    .leftMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:4%;width: 2.5%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .hamburger{float: right;margin-right: 10px;margin-top: 10px;text-align: center;cursor: pointer;position: relative;transform: rotate(0deg);}
    .hamburger.open{transition: all ease .5s;}
    .hamburger:hover {box-shadow: none;transition: all ease .5s;transform: rotate(360deg);}
    .hamburger span{width: 60%;height: 3px;background-color: #000;display: block;border-radius: 1px;float: left;margin-left: 20%;transition: all ease .3s;}
    .hamburger span:nth-child(1){margin-top: 13px;}
    .hamburger span:nth-child(2){margin-top: 3px;}
    .hamburger span:nth-child(3){margin-top: 3px;}
    .openMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:4%;width: 13%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .leftMenuList{margin-top: 70px;list-style: none;padding: 0;}
    .leftMenuList li{width: 250px;line-height: 40px;color: #fff;border-bottom: 1px solid rgb(37,170,225);font-size: 13px;}
    .openMenu .leftMenuList li:hover{background-color: rgb(37,170,225);transition: all ease .5s;cursor: pointer;}
    .leftMenuList li a{text-decoration: none;color: #fff;}
    .leftMenuList li a svg{width: 40px;height: 40px;float: left;margin-left: 0px;}
    .leftMenuList li a span{text-decoration: none;color: #fff;margin-left: 25px;width: 100%;}
    .leftMenuList li ul li{padding: 0px;line-height: 30px;transition: all .4s;box-sizing: border-box;}
    .leftMenuList li ul li:hover{background: rgb(37,170,225);transition: all .4s;}
    .leftMenuList li ul li ul li{padding: 5px;background: rgb(37,170,225);}
    .leftMenuList li ul li ul li a span{color:rgb(37,170,225);}
    .leftMenuList li ul li ul li:hover{background: rgb(37,170,225);}
    .active + .dropdownlist{width: 100%;height: auto;line-height: 30px;padding: 0px;margin-left: 0px;background: #222;}
    .active + .dropdownlist:hover{background:#222;}
    .dropdownlist{width: 0;height: 0;overflow: hidden;}
    .dropdown:before{font-family: FontAwesome;content: "\f105";transition: all .4s;padding-right: 5px;right: -20px;position: absolute;top: -12px;}
    .dropdown.active:before{font-family: FontAwesome;content: '\f107';transition: all .4s;padding-right: 0px;}
    .leftMenu:not(.openMenu) li > .dropdownlist{pointer-events: none;height:0;}
    .text-shadow{text-shadow: 1px 1px 0px #000;}
    .text-color{/*color: #00BCD4;*/ color:#99A85B;}
    .close{opacity: 1 !important;}

    .openMenuContenu #menuProfil{
        width:24%;
    }

    .contenu{
        width: 95%;
        left:4%;
        position:relative;
        margin-top:5%;
        transition: all ease .1s;
    }

    .openMenuContenu{
        width:80%;
        left:15%;
        transition: all ease .1s;
    }
    .rocketchat-widget{
        right:0px;
    }
    .container{
        margin-left:0px;
    }

    .tooltip.right .tooltip-arrow{
        border-right-color: rgb(37,170,225);
    }

    .tooltip.top .tooltip-arrow{
        border-top-color: rgb(37,170,225);
    }

    .tooltip-inner {
        padding:10px;
        background-color: rgb(37,170,225);
    }

    .profilMenu{
        background-color:rgb(37,170,225);
        padding:10px;
        font-size:150%;
        width:12%;
        border-left: 2px solid #333;
    }

    .backgroundMenuProfil{
        background-color: #eee;
    }

    .sectionDivide{
        border-bottom:1px solid #333;
        margin-left: 31%;
    }

    .sectionDivideModal{
        border-bottom:1px solid #333;
    }

    .document{
        width: 95%;
        margin-left: 0px;
    }

    .telPerso{
        float:left;
        padding-right:6%;
    }
    
    #menuProfil{
        width: 20%;
        height: 90%;
        float: left;
        padding-top: 100px;
        padding-right: 20px;
    }
    
    #cpPerso{
        float:left; 
        width:30%;
    }
}

@media only screen
and (min-width : 2560px) and(min-height:1600px) {
    .fixed-top{
        height: 6vh;
    }
    
    #modalInfo > .modal-dialog{
        max-width: 50%;
        height: 75vh;
        margin-top: 5%;
    }
    
    #modalInfo .modal-dialog > div{
        height:100%;
    }

    #modalInfo .modal-dialog > div > .modal-body{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div{
        height:100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form{
        height:100%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail{
        height:70%;
    }
    
    #modalInfo .modal-dialog > div > .modal-body > div > form > #contenuMail > div{
        height:90%;
    }

    .messageClientFooter{
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        border-radius: 5px 5px 0 0;
    }
    
    .idealCentrer {
        display: block;
        margin-left: 35%;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .center{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%;
        height: auto;
    }
    
    .idealLeft {
        display: block;
        width: 35%;
        height: auto;
        float: left;
    }
    
    .socRight {
        display: block;
        width: 10%;
        height: auto;
    }
    
    .docLie{
        font-size:12px;
        text-indent: 40px;
    }
    
    .roundRed{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: red;
    }
    
    .roundGreen{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: green;
    }
    
    .roundOrange{
        position: relative;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        text-align: center;
        background: orangered;
    }
    .popover-header {
        padding:8px 14px;
        background-color:#f7f7f7;
        border-bottom:1px solid #ebebeb;
        -webkit-border-radius:5px 5px 0 0;
        -moz-border-radius:5px 5px 0 0;
        border-radius:5px 5px 0 0;
    }
    .popover-title {
        margin:0;
        padding:0;
        background-color:transparent;
        border:none;
    }
    .example-popovers {
        padding:30px 0;
    }
    
    .titreSoc{
        background: #f1f1f1;
        padding:5px 15px;
    }
    
    .logoIdeal {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
    }
    
    /* The side navigation menu */
    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        background-color: #111; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    
    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    
    .navbar {
        border-radius: 0px;
    }

        
    body{margin: 0;padding: 0;font-family: "arial";background:white !important;width: 100vw;height:100vh;position:relative;}
    i.fa {font-size: 17px;padding: 14px;width: 30px;text-align: center;text-shadow:1px 1px 1px #000;}
    .leftMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:3%;width: 2%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .hamburger{float: right;margin-right: 10px;margin-top: 10px;text-align: center;cursor: pointer;position: relative;transform: rotate(0deg);}
    .hamburger.open{transition: all ease .5s;}
    .hamburger:hover {box-shadow: none;transition: all ease .5s;transform: rotate(360deg);}
    .hamburger span{width: 60%;height: 3px;background-color: #000;display: block;border-radius: 1px;float: left;margin-left: 20%;transition: all ease .3s;}
    .hamburger span:nth-child(1){margin-top: 13px;}
    .hamburger span:nth-child(2){margin-top: 3px;}
    .hamburger span:nth-child(3){margin-top: 3px;}
    .openMenu{height: 100%;background-color: #222;position: fixed;left: 0;top:3%;width: 9%;transition: all ease .1s;overflow: hidden;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
    .leftMenuList{margin-top: 70px;list-style: none;padding: 0;}
    .leftMenuList li{width: 250px;line-height: 40px;color: #fff;border-bottom: 1px solid rgb(37,170,225);font-size: 13px;}
    .openMenu .leftMenuList li:hover{background-color: rgb(37,170,225);transition: all ease .5s;cursor: pointer;}
    .leftMenuList li a{text-decoration: none;color: #fff;}
    .leftMenuList li a svg{width: 40px;height: 40px;float: left;margin-left: 0px;}
    .leftMenuList li a span{text-decoration: none;color: #fff;margin-left: 25px;width: 100%;}
    .leftMenuList li ul li{padding: 0px;line-height: 30px;transition: all .4s;box-sizing: border-box;}
    .leftMenuList li ul li:hover{background: rgb(37,170,225);transition: all .4s;}
    .leftMenuList li ul li ul li{padding: 5px;background: rgb(37,170,225);}
    .leftMenuList li ul li ul li a span{color:rgb(37,170,225);}
    .leftMenuList li ul li ul li:hover{background: rgb(37,170,225);}
    .active + .dropdownlist{width: 100%;height: auto;line-height: 30px;padding: 0px;margin-left: 0px;background: #222;}
    .active + .dropdownlist:hover{background:#222;}
    .dropdownlist{width: 0;height: 0;overflow: hidden;}
    .dropdown:before{font-family: FontAwesome;content: "\f105";transition: all .4s;padding-right: 5px;right: -20px;position: absolute;top: -12px;}
    .dropdown.active:before{font-family: FontAwesome;content: '\f107';transition: all .4s;padding-right: 0px;}
    .leftMenu:not(.openMenu) li > .dropdownlist{pointer-events: none;height:0;}
    .text-shadow{text-shadow: 1px 1px 0px #000;}
    .text-color{/*color: #00BCD4;*/ color:#99A85B;}
    .close{opacity: 1 !important;}

    .openMenuContenu #menuProfil{
        width:18%;
    }

    .contenu{
        width: 95%;
        left:4%;
        position:relative;
        margin-top:5%;
        transition: all ease .1s;
    }

    .openMenuContenu{
        width:80%;
        left:10%;
        transition: all ease .1s;
    }
    .rocketchat-widget{
        right:0px;
    }
    .container{
        margin-left:0px;
    }

    .tooltip.right .tooltip-arrow{
        border-right-color: rgb(37,170,225);
    }

    .tooltip.top .tooltip-arrow{
        border-top-color: rgb(37,170,225);
    }

    .tooltip-inner {
        padding:10px;
        background-color: rgb(37,170,225);
    }

    .profilMenu{
        background-color:rgb(37,170,225);
        padding:10px;
        font-size:150%;
        width:12%;
        border-left: 2px solid #333;
    }

    .backgroundMenuProfil{
        background-color: #eee;
    }

    .sectionDivide{
        border-bottom:1px solid #333;
        margin-left: 31%;
    }

    .sectionDivideModal{
        border-bottom:1px solid #333;
    }

    .document{
        width: 95%;
        margin-left: 0px;
    }

    .telPerso{
        float:left;
        padding-right:6%;
    }
    
    #menuProfil{
        width: 15%;
        height: 90%;
        float: left;
        padding-top: 100px;
        padding-right: 20px;
    }
    
    #cpPerso{
        float:left; 
        width:30%;
    }
}

@media only screen {
    .bodylogin {
        background: transparent url('/img/ecran-login.png') 50% 50%/cover no-repeat;
        height: 100vh;
        width: 100vw;
    }

    .bodylogin .login_center {
        display: block;
        margin-left: 5%;
        min-height: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, .6);
        width: 350px;
        padding: 1px;
        text-align: center;
    }

    .bodylogin .login_table {
        margin-top: 50vh;
        transform: translateY(-50%);
        /* Reset */
        background: none;
        box-shadow: none;
        border: none;
        max-width: none;
    }

    .bodylogin .login-logo img {
        max-width: 300px;
        max-height: auto;
    }

    .bodylogin .login-fields {
        width: 300px;
        margin: 0px auto;
    }

    .bodylogin .input-group {
        margin-top: 1em;
    }

    .bodylogin .input-group .input-group-addon{
        font-size: 23px;
        padding: 0px 6px;
        color: #818284;
        background-color: white;
    }

    .bodylogin a {
        color: black;
    }
}

@media only screen and (max-width: 1920px) {
    .bodylogin {
        background-image: url('/img/ecran-login.png');
        height: 100vh;
        width: 100vw;
    }
}