/* -------------------------------- */
/* CSS DE BASE */
/* -------------------------------- */

html{
   background-color: #333;
   color: #fff;
   padding: 40px 0vw;
   padding-top: 0;
}

body{
   font-family: sans-serif;
   font-size: 14px;
   margin: 0px auto;
   padding: 60px 3vw;
   max-width: 1500px;
   position: relative;
}

div{
   margin: 10px 0;
}

.separator{
   display: block;
   margin: 30px 0 !important;
   border-bottom: 1px solid #999;
}

.right .separator{
   margin: 10px 0 !important;
}


h1{
   font-size: 45px;
   margin-top: 0;
   margin-bottom: 10px;
}

h1 > img{
   width: 135px;
}

h1 > span{
   font-size: 8px;
   display: block;
   letter-spacing: 10.35px;
   margin-top: 3px;
   text-transform: uppercase;
}


header{
   margin-bottom: 25px;
}

header h2{
   display: inline-block;
   margin-left: 10px;
   font-size: 30px;
}

header .user{
   margin-top: 26px;
   display: inline-block;
   vertical-align: top;
}

a{
   color: white;
}

form{
   display: inline;
}

form.login{
   display: block;
   width: 300px;
   margin: 25% auto;
   text-align: left;
}

form.login h2{
   margin-bottom: 10px;
   margin-left: 0;
}

form.login input{
   margin-bottom: 10px;
}

.display-none{
   display: none !important;
}


/* -------------------------------- */
/* LES NOTIFICATIONS */
/* -------------------------------- */


.notif{
   position: relative;
   z-index: 999;
}

.notif:hover .notif_list{
   display: block !important;
}

.notif_list{
   //display: none !important;
   position: absolute;
   width: auto;
   text-align: left;
   right: -120px;
   top: 35px;
   border-radius: 15px !important;
}

.notif_list::before{
   position: absolute;
   width: 100px;
   height: 20px;
   right: 104px;
   top: -20px;
   color: dodgerblue;
   content: "▲";
   font-size: 20px;
   text-align: center;
   //background-color: violet;
}

.notif_item{
   padding: 5px 10px 5px 10px;
   display: block;
   white-space: nowrap;
   text-decoration: none;
   opacity: 0.6;
}

.notif_item:hover{
   opacity: 1;
}

.info{
   font-size: 16px;
   border: solid 1px #fff;
   border-radius: 20px;
   padding: 0 5.5px 3px;
   margin: 0 3px 0 -5px;
   vertical-align: 1px;
}

.warning{
   font-size: 2px;
   border: solid 1px #fff;
   border-radius: 20px;
   padding: 0px 1.5px 0px 0;
   margin: -4px 8px 0 5px;
   vertical-align: 4px;
   background-color: white;
}



/* -------------------------------- */
/* LES BOUTONS */
/* -------------------------------- */

.active{
   font-weight: bold;
}

.bt{
   cursor: default;
}
.bt:hover{
   background-color: #555;
}

.bt.red a{
   color: indianred;
}

.bouton{
   background-color: dodgerblue;
   padding: 7px 9.5px;
   color: #fff;
   text-decoration: none;
   border-radius: 25px;
   margin: 10px 0;
   display: inline-block;
   border: none;
}

.bouton.mini{
   font-size: 12px;
}
.bouton.mini.small{
   font-size: 12px;
   padding: 3px 7px;
   vertical-align: 1px;
}

h2 > .bouton{
   padding: 8px 12px;
   margin-left: -50px;
   margin-right: 10px;
}

h2 > input{
   margin-left: 0 !important;
}

form h2 {
   margin-bottom: 0;
   margin-top: 0;
}

.bouton.small{
   padding: 7px 9.5px;
   margin: 0;
   background-color: #555;
}

.bouton:not(.nohover):hover{
   background-color: dodgerblue;
   cursor: pointer;
}

.bouton.small:not(.nohover):hover{
   background-color: dodgerblue;
   cursor: pointer;
}

.bouton.red{
   background-color: indianred;
}

.red td a.bouton_td{
   color: indianred;
}

.bouton.green{
   background-color: darkseagreen;
}

.bouton.orange{
   background-color: darkorange;
}

.bouton.black{
   background-color: #222;
}

.bouton.dark{
   background-color: #333;
}

.bouton.gray{
   background-color: #555;
}

.bouton.blue{
   background-color: dodgerblue;
}

.bouton.white{
   background-color: #aaa;
}

.bouton.red.hover{
   background-color: #333;
}

.bouton.red.hover:hover{
   background-color: indianred;
}

.bouton.green.hover{
   background-color: #333;
}
.bouton.green.hover:hover{
   background-color: darkseagreen;
}

.bouton.orange.hover{
   background-color: #333;
}

.bouton.orange.hover:hover{
   background-color: darkorange;
}

.bouton.transparent{
   background-color: transparent;
}

.tuile, .tuile_black{
   border: none;
   background: #444;
   padding: 20px 30px;
   box-sizing: border-box;
   border-radius: 10px;
   position: relative;
   display: inline-block;
}

.tuile.dark{
   background-color: #333;
}

.tuile.black{
   background-color: #222;
}

.tuile.orange{
   background-color: darkorange;
}

.tuile.green{
   background-color: darkseagreen;
}

.tuile.blue{
   background-color: dodgerblue;
}

.tuile.white{
   background-color: #aaa;
}

.tuile.red{
   background-color: orangered;
}

.tuile.transparent{
   background-color: transparent;
}

.tuile_black{
   background: transparent;
}

.bouton.circle, .tuile.circle{
   /*border:2px solid dodgerblue;*/
   vertical-align: middle;
   box-shadow:0px 0px 0px 2px dodgerblue inset;
}

.bouton.circle.red, .tuile.circle.red{
   /*border:2px solid orangered;*/
   background-color: #555;
   box-shadow:0px 0px 0px 2px orangered inset;

}

.bouton.circle.orange, .tuile.circle.orange{
   /*border:2px solid orangered;*/
   background-color: #555;
   box-shadow:0px 0px 0px 2px darkorange inset;

}

.bouton.circle.green, .tuile.circle.green{
   /*border:2px solid orangered;*/
   background-color: #555;
   box-shadow:0px 0px 0px 2px darkseagreen inset;

}

.bouton.circle.white, .tuile.circle.white{
   /*border:2px solid #aaa;*/
   background-color: #555;
   box-shadow:0px 0px 0px 2px #aaa inset;
}

.bouton.circle.black, .tuile.circle.black{
   /*border:2px solid #aaa;*/
   background-color: #000;
   box-shadow:0px 0px 0px 2px #aaa inset;
}

.bouton.circle.dark, .tuile.circle.dark{
   /*border:2px solid #aaa;*/
   background-color: #333;
   box-shadow:0px 0px 0px 2px #555 inset;
}

.bouton.loading{
   padding: 7px 11px;
   vertical-align: middle;
   background-size: 25px;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url("../styles/loading.gif") !important;
}
.bouton.loading:hover{
   background-image: url("../styles/pause.png") !important;
   opacity: 1;
   color: transparent;
   border-color: transparent;
}

.bouton.quickview{
   padding: 6px 14px;
   vertical-align: top;
   background-size: 25px;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url("../styles/quickview.png") !important;
}

.bouton.noclick{
   pointer-events: none;
}

.bouton.click{
   cursor: pointer;
   pointer-events: all;
}

.bouton.rappel {
   color-scheme: dark;
   cursor:pointer;
   border-radius:35px;
   padding:5px;
   vertical-align:6px;
   margin: 3px 5px 0 5px;
}

.widthTR{
   width: 130px;
}


/*  les sliders & switch */

.input_switch{
   margin-top: 0;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  vertical-align: middle;
  margin-right: 10px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0px;
  right: 0;
  bottom: 0;
  background-color: #777;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: dodgerblue;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.calculation input::placeholder{
   color: #aaa;
   background-color: #777;
   padding: 8px;
   position: absolute;
   margin-left: -8px;
   margin-top: -8px;
   width: 100%;
}

/* Rounded sliders */
.slider.round {
  border-radius: 6px;
}

.slider.round:before {
  border-radius: 5px;
}



.nav_right{
   text-align: right;
}

.nav_right a, .nav_right span{
   vertical-align: middle;
}

header .nav_right{
   margin-top: -40px;
   /*position: fixed;
   width: 94vw;*/
}

input[type="submit"]{
   border: none;
}

.sup, .sup_small{
   text-decoration:none;
   border-radius: 20px;
   padding: 6px 10px;
   color: indianred;
   margin-right: -6px;
}

.sup.small{
   font-size: 10px;
}
.sup::before, .sup_small::before{
   content: "✕";
   width: 11px;
   display: inline-block;
   transition: all 0.2s ease;
}

.sup:hover, .sup_small:hover{
   background-color: indianred !important;
   color: white;
   font-weight: normal;
}

.sup_small:hover{
   margin-left: 0px;
}

.sup:hover::before{
   content: "  Supprimer ? ";
   display: inline-block;
   width: 80px;
   white-space: nowrap;
   transition: all 0.2s ease;
   font-size: 14px;
}

.disabled{
   pointer-events: none;
   cursor: pointer;
   opacity: 0.33;
}


.toggle{
   display: none;
}

.lbl_toggle {
  display: block;
   margin: 0;
}

.collapsable_content {
  max-height: 0px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  transition: max-height .5s ease-in-out;
}

#toggle_0:checked + .lbl_toggle + .collapsable_content, #toggle_1:checked + .lbl_toggle + .collapsable_content, #toggle_2:checked + .lbl_toggle + .collapsable_content, #toggle_3:checked + .lbl_toggle + .collapsable_content, #toggle_4:checked + .lbl_toggle + .collapsable_content {
  max-height: initial;
}

.lbl_toggle h2{
   margin: 0;
}

/* -------------------------------- */
/* LES TABLEAUX */
/* -------------------------------- */


table{
   width: 100%;
   border-spacing: 0;
}

td{
   padding: 0;
   padding-left: 20px;
   color: #ccc;
}

#prospect td{
   padding: 10px;
   padding-left: 0px;
}

td:first-child{
   padding-left: 20px;
}

td a.bouton_td{
   display: block;
   height: 100%;
   width: calc(100% + 10px);
   padding: 20px 0;
   text-decoration: none;
   margin: -7px 0 -7px -10px;
}

#prospect td a.bouton_td{
   padding: 10px 0;
}

.first td{
   padding: 10px;
}

tr.first{
   background-color: #666 !important;
   color: #fff;
   font-weight: bold;
}

tr:nth-child(2n-1){
   background-color: #444;
}

tr:nth-child(2n-1) > .first_project{
   background-color: #222;
}

.last_row{
   position: absolute;
   top: 0;
   cursor: pointer;
}

.last_row tr, .last_row td{
   background-color: transparent;
}

.first_row td{
   padding: 4px 30px;
}
.first_row {
   cursor: pointer;
}

.toggle_parent_project{
   position: relative;
   box-sizing: border-box;
   overflow: hidden;
   height: 52px;
   transition: all 0.333s;
   min-width: 1300px;
}

.toggle_parent_project:last-child{
   display: none;
}


.toggle_parent_project.open, .toggle_parent_project.open .first_row td{
   transition: all 0.5s ease;
}


.toggle_parent_project:hover .first_row td{
   background-color: #555;
}

.toggle_parent_project:hover{
   /*box-shadow:0px 0px 0px 2px #555;*/
}

.toggle_parent_project.open .first_row td{
   background-color: #555;
}

.toggle_parent_project.open{
   box-shadow:0px 0px 0px 2px #555;
}

.toggle_parent_project.open:hover .first_row td{
   background-color: dodgerblue;
}

.toggle_parent_project.open:hover{
   box-shadow:0px 0px 0px 2px dodgerblue;
}

.toggle_content_project{
   width: calc(100% - 110px);
   margin-left: 110px;
}


.fadeEndCell{
   right: 10px;
   top: 0;
   bottom: 0;
   position: absolute;
   width: 30px;
   background-size: contain;
   background-image: url("fade444444.png"),url("fade444444.png"),url("fade444444.png");
   pointer-events: none;
   transform: rotate(-90deg);
   filter: brightness(73%) saturate(135%);
}

tr:nth-child(2n-1) .fadeEndCell{
   filter: brightness(100%) saturate(80%);
}

tr:hover .fadeEndCell{
   filter: brightness(125%) saturate(115%);
}

.bkgRed{
   background-color: #3c2e2e;/*#442222;*/
}
tr:nth-child(2n-1).bkgRed{
   background-color: #4e3838;/*#553333;*/
}

.bkgRed:hover, tr:nth-child(2n-1).bkgRed:hover{
   background-color: #5f4444;/*#774444;*/
}

.bkgRed .fadeEndCell{
   background-image: url("fade_red.png"),url("fade_red.png"),url("fade_red.png");
   filter: brightness(83%) saturate(55%);
}

tr:nth-child(2n-1).bkgRed .fadeEndCell{
   filter: brightness(104%) saturate(70%);
}

tr:hover.bkgRed .fadeEndCell{
   filter: brightness(125%) saturate(73%);
}

.bkgOrange{
   background-color: #3e3227;/*#412d1a;*/
}
tr:nth-child(2n-1).bkgOrange{
   background-color: #513e2b;/*#5E4226;*/
}

.bkgOrange:hover, tr:nth-child(2n-1).bkgOrange:hover{
   background-color: #655340;/*#7d562e;*/
}

.bkgOrange .fadeEndCell{
   background-image: url("fade_orange.png"),url("fade_orange.png"),url("fade_orange.png");
   filter: brightness(74%) saturate(72%);
}

tr:nth-child(2n-1).bkgOrange .fadeEndCell{
   filter: brightness(92%) saturate(70%);
}

tr:hover.bkgOrange .fadeEndCell{
   filter: brightness(122%) saturate(53%);
}



.flex{
   overflow:hidden;
   overflow-x: scroll;
   white-space: nowrap;
   margin-bottom: 0;
   padding-bottom: 25px;
   height: 152px;
}

.flex div{
   margin: 0;
}

.flex tr{
   //display: flex;
   //width: calc(314vw - 12vw);
}

.flex tr:nth-child(2){
   background-color: #666;
   border-right: 1px solid #333;
   border-bottom: 1px solid #333;
   margin-bottom: 25px;
}

.month{
   text-align: center;
   width:456.25px;
   overflow: hidden;
   margin: 0;
   box-sizing: border-box;
   flex: auto;
   border-right: 1px solid #555;
   box-shadow: inset 0px 0px 80px -45px #000;
   border-bottom: 1px solid #333;
   color: #fff;
   display: inline-block;
   padding: 10px 0 10px 0;
}

.gant_project:firs-child{

}
.gant_project{
   text-align: center;
   flex: auto;
   width:calc(15px *7);
   overflow:hidden;
   padding:0 !important;
   padding-top: 7px !important;
   margin:0 !important;
   color: #fff;
   height: 30px;
   display: inline-block;
   box-sizing: border-box;
   vertical-align: top;
}

.gant_project:nth-child(2n-1){
   margin-left: -1px;
}

.weeks{
   margin-bottom: 0 !important;
   border-bottom: 1px solid #333;
}

.days{
   margin-bottom: 25px;
}

.days .gant_project{
   text-align: center;
   flex: auto;
   width:15px;
   overflow:visible;
   padding:0 !important;
   padding-top: 5px !important;
   margin:0 !important;
   color: #fff;
   height: 25px;
   position: relative;
   box-sizing: border-box;
   text-decoration: none;
   //padding-left: 3px !important;
   //padding-right: 3px !important;
}

.days .gant_project:hover, .days .gant_project.dayActive{
   cursor: pointer;
   background-color: white !important;
   color: #000;
}

.days .gant_project:not(.thisVacances, .dimanche, .samedi):nth-child(2n-1){
   border-left: 1px solid rgba(255, 255, 255, 0.25);
   border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.DaysHoursPassed{
   position: absolute;
   top: 25px;
   background-color: white;
   padding: 10px;
   display: none;
   color: #000;
   border-radius: 20px;
   width: 100px;
   margin-left: -55px;
   line-height: 20px;
   z-index: 150;
   box-shadow: 0 3px 30px rgba(0,0,0,0.8);
}

.hash{
   background-image: url("hash.png");
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   background-size: 150%;
   display: block;
   opacity: 0.5;
   //background-color: white;
   background-position: center;
   z-index: -1;
   filter: grayscale(1);
}

.triangle, .triangle2{
   display: none;
}

.dayActive .triangle{
   position: absolute;
   display: block;
   left: 50%;
   margin-left: -22px;
   font-size: 50px;
   bottom: -25px;
   color: white;
   //transform: rotate(180deg);
}

.dayActive .triangle2{
   bottom: -34px;
   margin-left: -275px;
   color: #444;
   width: 300px;
   border-bottom: 3px solid white;
   background-color: white;
   text-align: right;
}

.dayActive .DaysHoursPassed{
   display: none !important;
}

.days .gant_project:hover .DaysHoursPassed, .days .gant_project.dayActive .DaysHoursPassed{
   display: block;
}

.days .gant_project.dayActive .DaysHoursPassed{
   color: transparent;
   box-shadow: none;
   background: none;
}
.days .gant_project.dayActive .DaysHoursPassed{
   z-index: 1;
}
/*.days .gant_project:nth-child(7n-0), .days .gant_project:nth-child(7n-1){
   background-color: #333 !important;
}*/

.time .gant_project{
   border-right: 1px solid #555;
}

.noTimeRecorded{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: none;
}

.days .gant_project:not(.thisVacances, .dimanche, .samedi) .noTimeRecorded{
   background-color: indianred;
   z-index: -1;
   display: block;
}

.days .gant_project.thisVacances .DaysHoursPassed .hight, .days .gant_project.samedi .DaysHoursPassed .hight, .days .gant_project.dimanche .DaysHoursPassed .hight {
   display: none;
}

.thisWeek{
   background-color: dodgerblue !important;
   //border-bottom: 1px solid #333;
}

.thisProject{
   background-color: #888;
   border-bottom: 1px solid #333;
}

.thisProject.passed{
   background-color: #555;
}

.thisMonth{
   background-color: dodgerblue;
}

.thisVacances{
   background-color: limegreen !important;
   border-right: 1px solid rgba(255, 255, 255, 0.25);

}

.malade{
   background-color: orange !important;
   border-right: 1px solid rgba(255, 255, 255, 0.25);

}

.thisToHigh{
   background-color: indianred;
}

.samedi{
   position: relative;
   border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.dimanche{
   position: relative;
}

.samedi:after, .dimanche:after{
   content: "";
   background-color: white;
   opacity: 0.25;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;

}

.first_project{
   position: absolute;
   z-index: 10;
   padding-left: 10px !important;
   padding-top: 4px;
   background: #111;
   height: 21px;
   width: 250px;
}

.first_project > a{
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   padding-right: 10px;
}


.user{
   padding: 10px 6px;
   /*margin: 5px 10px;*/
   text-decoration: none;
   border-radius: 20px;
   display: inline-block;
   font-size: 12px;
   font-weight: bold;
}

.user_small{
   padding: 5px;
   text-decoration: none;
   border-radius: 10px;
   display: inline-block;
   font-size: 9px;
   margin-left: -12px;
}

.user_group{
   padding: 8px 4px;
   text-decoration: none;
   border-radius: 20px;
   display: inline-block;
   font-size: 10.5px;
   margin-left: -12px;
   margin-top: 10px;
}

.bouton_active{
   background-color: dodgerblue !important;
}

.color_GEO, .color_GEO_hover:hover{
   background-color: gray !important;
}

.color_KEL, .color_KEL_hover:hover{
   background-color: violet !important;
}

.color_SRO, .color_SRO_hover:hover{
   background-color: cyan !important;
}

.color_SFL, .color_SFL_hover:hover, .color_VDR, .color_VDR_hover:hover, .color_RAF, .color_RAF_hover:hover{
   background-color: orange !important;
}

.color_LRE, .color_LRE_hover:hover, .color_LRU, .color_LRU_hover:hover, .color_JER, .color_JER_hover:hover{
   background-color: yellowgreen !important;
}

.color_CRO, .color_CRO_hover:hover, .color_DMO, .color_DMO_hover:hover{
   background-color: #29AB87 !important;
}

.short{
   /*width: 40px;*/
}

.bouton_selected{
   background-color: #fff !important;
   color: #555;
   cursor: default;
}

.blink {
  animation: blinker 1s linear infinite;
}

.pulse {
  animation: pulser 2s ease-in infinite;
}

.record{
   font-size: 21px;
   background: none !important;
   margin-left: -5px !important;
}

@keyframes blinker {
  50% {
    opacity: 0.1;
  }

}

@keyframes pulser {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.3);
  }

  35% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

.low{
   color: darkseagreen !important;
}

.average{
   color: darkorange !important;
   opacity: 0.8;
}

.hight{
   color: indianred !important;
}

.highlight{
   color: dodgerblue !important;
}

.light, input[type="date"]:read-only, input[type="text"]:read-only, input[type="time"]:read-only, input[type="number"]:read-only{
   opacity: 0.3;
}

.prio{
   margin-left: 10px;
   background-color: transparent !important;
   border: 1px solid orange;
   padding :3px 5.5px !important;
}

.st{
   cursor:inherit;
   margin-left:0;
   padding:8px 8.5px 6px;
   background-color: transparent !important;
   border: 1px solid orange;
}

.center{
   text-align: center;
}


/* -------------------------------- */
/* LES list et texarea */
/* -------------------------------- */

select{
   padding: 9px;
   border-radius: 5px;
   border-style: none;
   width: 100%;
   height: 33px;
}

textarea{
   border-radius: 5px;
   min-height: 200px;
   padding: 10px;
   margin-top: 3px;
   border-style: none;
   width: calc(100% - 45px);
}

input[type="date"], input[type="text"], input[type="time"], input[type="number"], input[type="email"], input[type="password"] {
   padding: 10px;
   border-radius: 5px;
   border-style: none;
   width: calc(100% - 20px);
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}

#timer input[type="date"], #timer input[type="text"], #timer input[type="time"], input[type="number"], #timer select{
   width: 76px;
   margin-bottom: 10px;
   padding: 7px;
   margin-right: 10px;
}

#timer input[type="text"], #timer input[type="time"], #timer select{
   width: 297px;
   margin-bottom: 10px;
   padding: 7px;
   margin-right: 10px;
}

label{
   display: inline-block;
   vertical-align: top;
   margin-bottom: 5px;
}



div[contenteditable="true"]{
   background-color: #fff;
   border-radius: 5px;
   color: #000;
   padding: 20px;
   width: calc(100% - 65px);
}

span[contenteditable="true"], h2 .project_name{
   border-radius: 5px;
   border: 1px solid #fff;
   padding: 5px 10px;
   width: 250px;
   background: no-repeat;
   color: white;
   font-size: 20px;
   margin-left: 10px;
}

div[contenteditable="true"] b{
   opacity: 0.5;
}

.col1, .col2 {
    display: inline-block;
    padding-right: 28px;
    vertical-align: top;
    width: calc(50% - 30px);
}

.left, .right, .left_small, .right_small{
   display: inline-block;
   vertical-align: text-top;
}

.left, .left_small{
   width: 50%;
   max-width: 700px;
   border-right: 1px solid gray;
   padding-right: 1%;
   /*white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;*/
}

.right, .right_small{
   width: 45%;
   padding-left: 3vw;
   border-left: 1px solid gray;
   margin-left: -5px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

.left_small{
   width: 45%;
}

.right_small{
   width: 45%;
}

.right > div{
   margin: 0;
   margin-bottom: 5px;
}

.input_right, .input_left{
   width: 45%;
   display: inline-block;
   vertical-align: top;
   margin-bottom: 0px;
}
.input_left{
   margin-right: 8%;
}

.columnSliderGroup{
   overflow: hidden;
   max-width: calc(1200px / 2.22222);
}

.columnSliderWrapper{
   white-space: nowrap;
}

.columnSlider{
   display: inline-block;
   width: 42vw;
   max-width: calc(1200px / 2.22222);
   margin: 0;
   padding: 0;
   /*height: 70vh;*/
   overflow: scroll;
   padding-right: 3vw;
   vertical-align: top;
   box-sizing: border-box;
   position: relative;
}

.columnSlider::-webkit-scrollbar {
  display: none;
}

#messages.columnSlider{
   height: calc(100vh - 510px);
   max-width: 100%;
}

#groupeMessages{
   max-height: 90%;
   overflow: scroll;
}

#groupeMessages::-webkit-scrollbar {
  display: none;
}

.messages{
   display: inline-block;
   padding: 12px 20px;
   max-width: 60%;
   box-sizing: border-box;
   vertical-align: bottom;
   margin: 20px 0;
   text-wrap:initial;
   word-break: break-word;
}


#textMessage{
   max-height: calc(100vh - 550px);
   overflow: scroll;
}

#textMessage::-webkit-scrollbar {
  display: none;
}

.postedMessage .messages{
   background: gray;
   border-radius: 24px 24px 0px 24px;
   text-align: left;
}

.postedMessage{
   text-align: right;
   margin: 0;
   position: relative;
}

.receivedMessage .messages{
   border-radius: 24px 24px 24px 0px;
}

.receivedMessage{
   margin: 0;
   position: relative;
}

.sender{
   display: inline-block;
   background: gray;
   padding: 10px;
   border-radius: 30px;
   margin: 0;
   margin-right: 5px;
   vertical-align: bottom;
   position: relative;
   text-decoration: none;
   cursor: default;
   min-width: 18px;
   text-align: center;
}


.sender.blink:hover{
   opacity: 1 !important;
}

.sender.blink:hover:after{
   content:"✔";
   background-color: darkseagreen;
   top: 0;
   left: 0;
   padding: 10px;
   position: absolute;
   border-radius: 30px;
   right: 0;
   text-align: center;
   cursor: pointer;
}

.postedMessage .sender{
   margin: 0px;
   margin-left: 5px;
}

#sendTextMessage{
   position: absolute;
   bottom: 5px;
   width: 100%;
   text-align: right;
   right: 8px;
}

#sendTextMessage textarea{
   width: calc(100% - 65px);
   padding: 10px 30px;
   min-height: 0px;
   vertical-align: middle;
   border-radius: 35px;
   box-sizing: border-box;
}

.autosize {
  resize: none;
  overflow: hidden;
}

#sendTextMessage input[type="submit"]{
   background-image: url("../styles/paper_plane.png");
   background-size: 50%;
   background-repeat: no-repeat;
   background-position: 43% 47%;
   border-radius:40px;
   height:45px;
   width: 45px;
   vertical-align: middle;
   margin-left: 5px;
}


.messageDate{
   opacity: 0.33;
   position: absolute;
   top: -10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
}

.postedMessage .messageDate{
   right: 75px;
}

.calculation{
 width: 100%;
 margin: 0;
}

 .calculation label{
 vertical-align: baseline;
}

.small_logs{
   height: auto;
   max-height: 310px;
   overflow: hidden;
   border-top: 1px solid gray;
   padding: 20px 0;
   border-bottom: 1px solid gray;
   overflow-y: scroll;
   text-overflow: ellipsis;
}

.group_right{
   width:calc(100% - 380px);
   display: inline-block;
}

.header_gant{
   width:95%;
   overflow: hidden;
   overflow-x: scroll;
   padding-bottom: 0px;
   display: inline-block;
   margin-left: 5%;
   margin-top: 20px;
   box-sizing: border-box;
   margin-bottom: 0;
}

.subtitle_absolute_right{
   position: absolute;
   right: 3vw;
   margin-top:-5px;
}

.subtitle_absolute_right span{
   display: inline-block;
   width: 15px;
   height: 10px;
}


/*  trophy */
.trophy {
   font-size: 62px;
   width: 28%;
   padding: 40px 0;
}


.vacances_group{
   width:calc(100% - 1px);
   display:inline-block;
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

.vacances_group:nth-child(2n-1){
   background-color: #555;
   margin-right: 1px;
}

.vacances_list{
   width: 380px;
}

.vacances_wrapper{
   height:400px;
   overflow: scroll;
   position: relative;
}

.vacances_list:after, .day_agenda:after{
   content: "";
   bottom: 145px;
   left: 0;
   position: absolute;
   width: 100%;
   height: 75px;
   background-size: contain;
   background-image: url("fade444444.png");
   pointer-events: none;
}

.vac_icone{
   padding: 0 20px 0 10px;
   vertical-align: text-bottom;
   font-size: 24px;
}

.vac_title{
   font-weight: bold;
}

.vac_date{
   opacity: 0.5;
}

.timer, .day_agenda{
   width: calc(100% - 375px);
   box-sizing: border-box;
   display: inline-block;
   margin-top: 0;
}

.timer{
   margin-left: 30px;
   width: 310px;
}

.day_agenda{
   margin-left: 30px;
   height: 375px;
   vertical-align: top;
   margin-top: -6px;
}

.day_agenda:after{
   bottom: 30px;
}

.day_agenda.dayActive{
   border: 6px solid #fff;
}

.day_agenda .float_right{
   position: absolute;
   top: 10px;
   right: 10px;
   padding: 10px 12px;
   font-weight: bolder;
}

.uneHeure{
   margin: 0 !important;
   padding: 0 0px 0px 10px !important;
   height: 50px;
   overflow: hidden;
   border:none;
}

.uneHeure:nth-child(2n-1){
   background-color: #555;
}

.heureRemplie{
   margin: 0;
   width: calc(100% - 110px);
   float: right;
   padding: 16px 30px;
   background-color: rgba(69, 142, 247, 0.5);
   border-bottom:1px solid rgba(0, 0, 0, 0.25);
}

.wrapperToSwipe{
   white-space: nowrap;
   width: 100%;
   overflow: hidden;
   position: relative;
   margin-left: -15px;
   margin-right: 15px;
   box-sizing: border-box;
   width: 330px;
   padding: 0 28px 0 0;
   display: inline-block;
   vertical-align: top;
}

.wrapperToSwipe .wrapperToSwipeGroup{
   margin: 0;
   padding: 0;
   font-size: 0;
}

.swipeColumn{
   font-size: 14px;
   width: 300px;
   margin: 0 15px;
   position: relative;
   min-height: 282px;
   vertical-align: top;
}

.swipeColumn:last-child .arrowRight{
   display: none;
}

.swipeColumn:first-child .arrowLeft{
   display: none;
}

.arrowLeft, .arrowRight{
   transform: rotate(180deg);
   position: absolute;
   top: 50%;
   left: -15px;
   margin-top: -15px !important;
   text-decoration: none;
   font-weight: bold;
   z-index: 100;
}

.arrowRight{
   transform: rotate(0deg);
   right: -15px;
   left: auto;
}

.float_right{
   float: right;
}

.progressBar, .progressBarBackground{
   box-sizing: border-box;
}
.progressBarBackground{
   padding: 2px !important;
   width: 104px;
}

.progressBar{
   border-radius: 50px 0 0 50px;
   padding: 0;
   padding-left: 0px;
   margin: 0;
   text-align: center;
}

sup{
   vertical-align: baseline;
   opacity: 0.5;
   width: 100px;
   text-align: center;
   display: inline-block;
}


/* -------------------------------- */
/* LES OFFRES */
/* -------------------------------- */


.offer_exemples > div{
   display: inline-block;
   width: 29%;
   margin-left: 4%;
}

.offer_exemples img{
   width:100%;
   background-color: gray;
   border-radius: 8px;
   cursor: pointer;
   margin: 6px 0 0 -3px;
   opacity: 0.6;
}

.offer_exemples img:hover{
   box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.5);
   opacity: 1;
}