@font-face {
  font-family: 'din';
  src: url('/static/font/din_regular.otf');
}

@font-face {
  font-family: 'din';
  src: url('/static/font/din_bold.otf');
  font-weight: bold;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

.page-header {
     border-bottom: 0px ;
}
.progress {
  height: 12px;
margin-top: 5px;
margin-bottom: 0px;

}
.row  {
  margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;

}

.logo {
  max-width: 70%;
  display: block;
    margin: auto;
    width: 70%;
    padding-top: 20px;
}
.cells {
padding-top: 15px;
   padding-bottom: 15px;
}

.navbar-brand {
  padding-left: 0;
padding-top : 0;
padding-bottom : 0;

    padding-right: 0;
height: 120px;
}
.navbar-brand>img {
  width:100%;
  display:block;
    margin-left:auto;
    margin-right:auto;
}
.navbar {
  margin: 0 auto;

}
.center-container {
  height:100%;
/*  display: table;*/
  width:100%;
  margin:0;
  padding-right: 0;
  padding-left: 0;
}

.center-row {
  height:50%;
  width:100%;

  /*display: table-row;*/
}

.center-row > div {
/*  height:100%;
  width:50%;
/*  display: table-cell;*/
  border:0 solid #eee;
  /*color:#fff;*/
  vertical-align:middle;
}

.courses .tab-content {
  margin-top: 10px;
  height: calc(100vh - 230px);
  overflow: auto;
}

.trainingEdit .tab-content {
  margin-top: 10px;
  height: calc(100vh - 175px);
  overflow: auto; 
}

.panel-align {
  width:98%;
  margin-left: auto;
  margin-right: auto;
}
.panel-align-large {
  width:90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  text-align: justify;
}
.panel-align-small {
  width:60%;
  margin-left: auto;
  margin-right: auto;
}

.text-section {
  padding-top: 50px;
    border-bottom-width: 50px;
    padding-bottom: 50px;
}



.mainContent.homepage {
    margin-top: 20px;
    overflow: hidden;
}
.page-header {
  padding: 45px 0 0 0;
}

.bg-one .bottomRight {
  right: 165px;
}

.bg-one {
  background:#efefef url('/static/img/learning.png');
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
  padding: 0 0 180px 0;
  height: calc(100vh - 70px);
}
.bg-two {
  background:#efefef url('/static/img/main2.jpg');
  background-size: cover;
}
.blanc {
  color:#fff;
}
.imageEditor {
    width: 300px;
    margin: auto;
    height: 200px;
}
.sessionImage {
  float: left;
  width: 33%;
  margin-left: 5%;
  border: 2px #eee solid;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.sessionImage .camera {
  display: flex;
    position: absolute;
    top: 60%;
    left: 50%;
}
.sessionImage img {
  width: 100%;
}
.handleGeneralSubmit table {
    float: left;
    margin-left: 40px;
    margin-top: 40px;
}
.handleGeneralSubmit > div {
  overflow:auto;
}

.feature-wrap {
    font-size: 48px;
    height: 110px;
    width: 110px;
    margin: 3px;
    border-radius: 100%;
    line-height: 100px;
    text-align: center;
    background: #3e444c;
    color: #07a5eb;
    border: 3px solid #3e444c;
    box-shadow: inset 0 0 0 5px #f2f2f2;
    -webkit-box-shadow: inset 0 0 0 5px #f2f2f2;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;

  /*  margin-right: 5px;*/
}

.navbar-right {
  position: absolute;
  right: 0;
  z-index: 10;
}

.loginform .well {
  margin-bottom: 0;
}

.modal-title {
  
  width: 90%;
  padding: 5px 10px;
  font-weight: 500;
}

.btn-primary {
  background-color: #fb9614;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: #191e55;
}

.btn-primary > a,
.btn-primary {
  color: #ffffff;
  text-decoration: none;
}

li > .btn-primary {
  width: 100%;
}

.btn-primary.noactive {
  background-color: #aaaaaa;
}

.btn-login {
  font-size: 1.8em;
  padding: 5px 40px;
}

.topLine {
  float: right;
  margin-right: 2em;
}

.topLine img {
  position: relative;
}

.topLine i {
    position: absolute;
    right: 10px;
    top: 15px;
}

.companyPicture {
    height: 35px;
    margin-right: 15px;
}

.profilePicture {
  border: 1px solid gray;
  border-radius: 20px;
  width: 35px;
  height: 35px;
  background-color: lightgray;
}

.userMenu .profilePicture {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  float: right;
}

.userMenu {
  clear: both;
  position: absolute;
  padding: 10px 25px;
  background-color: #eee;
  width: auto;
  z-index: 15;
  right: 10px;
  display: flex;
  flex-direction: column;
}

.userMenu > * {
    margin: auto;
}

.userMenu > li {
  height: 40px;
}

.userMenu > li:hover {
  background-color: #fb9614; 
  cursor: pointer;
}

.userMenu > li > a {
  margin: auto;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  font-weight: 700;
}

.userMenu .name {
  font-weight: 700;
  font-size: 1.5em;
  margin-bottom: 10px;
}

.userMenu .fonction {
  margin-top: -10px;
}

.userMenu .logout {
  color: #666;
  font-weight: bold;
  display: flex;
  width: 115px;
  margin-top: 2px;
}

.userMenu .logout img {
  height: 25px;
  margin-right: 6px;
}
.userMenu .passw {
  color: #666;
  font-weight: bold;
  display: flex;
  width: 115px;
  margin-top: 10px;
}

.userMenu .passw img {
  height: 25px;
  margin-right: 9px;
}
.table tbody tr:hover,
.table tbody tr.selected {
 background-color: #fb9614; 
 cursor: pointer;
}

.table.tdHover tbody tr:hover {
  background-color: transparent; 
}

.table.tdHover tbody td:hover {
  background-color: #fb9614; 
}

 .tr-selected {
  background-color: #fb9614; 
}
.tr-ondrag {
  background-color: #006699; 
  
}

.mobility .table tr > td > input {
  display: none
}

.mobility tbody > tr,.mobility tbody > tr > td {
    height: auto;
}

.table tr:hover > td > input,
.table tr.selected > td > input {
  display: block;
}

.btn-transparent {
  background-color: transparent;
  border-width: 0px;
}

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

.gutter2 > div > div,
.gutter2 > div > div > div
 {
  padding: 0 1px;
}

.hrinput {
  border: 2px #eee solid;
  border-radius: 10px;
  padding: 2px 0px 0px 5px;
  /* margin-right: 1.65%; */
}

.hrinput > div {
  font-size: 0.85em;
}

.hrinput input::placeholder {
    /* font-style: italic; */
    font-weight: 400;
    color: #bbb;
}

.hrinput > span {
    margin-left: 5px;
}

.hrinput > div.values > div:hover {
    background: orange;
}

.hrinput > div.values {
    position: absolute;
    font-size: 1.1em;
    margin-left: 10px;
    cursor: pointer;
    width: 70%;
    background: white;
    z-index: 100;
    padding: 5px 20px;
    border: 2px solid #eee;
    border-radius: 10px;
    border-top: 0;
}

.hrinput > div.values > div {
    
    padding: 0px 15px;
}

.hrinput input,
.hrinput textarea,
.selectCard select {
    font-weight: 700;
    outline: none;
    font-size: 16px;
    border: 0 !important;
    border-bottom: 1px solid black !important;
    margin-left: 5px;
    margin-top: -5px;
    padding-top: 0px;
    width: 95%;
    background-color: rgba(255, 255, 255, 0);
}

.selectCard select {
  width: 95%;
}

.mobilityEdit .tabEditor {
    margin-top: 50px;
    position: relative;
}

.mobilityEdit .tabEditor > .title {
  position: absolute;
  top: -35px;
  border: 1px solid #ddd;
  border-bottom: none;
  padding: 2px 15px;
  background-color: white;
  font-size: 1.3em;
  font-weight: 700;
}

.mobilityEdit .RichEditor-root {
  margin-top: 10px;
}

.mobilityEdit .hrinput {
  margin-top: 10px;
}

.mobilityEdit .publish {
    border: 2px solid #eee;
    float: right;
    display: flex;
    width: 160px;
    justify-content: space-between;
    padding: 5px 20px;
    margin: 15px 0;
    border-radius: 10px;
}

.mobilityEdit .publish > div {
  font-size: 20px;
}

.mobilityEdit .publish .toggle,
.userMgt .toggle,
.userEdit .toggle {
  font-size: 35px;
  line-height: 10px;
}

.RichEditor-root {
  padding: 0 15px !important;
}

.RichEditor-controls {
  float: left;
}

.RichEditor-editor {
  border-top: 0 !important;
  margin-top:0 !important;
}

.tooltip {
    top: 15px;
    right: 20px;
    font-family: arial;
    font-size: 0.8em;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid;
    padding: 3px 10px;
    white-space: nowrap;
}

.trash {
  margin-bottom: 60px;
  background-color: red;
  color: white;
  
}

.plus {
  background-color: #191e55;
  color: white;
  cursor: pointer;
  padding: 7px;
  border-radius: 50%;
  font-size: 1.2em;
}

.right {
  text-align: right;
  padding: 10px;
}

.edit {
  background-color: #191e55;
  color: white;
  cursor: pointer;
  padding: 7px;
  border-radius: 50%;
  font-size: 1.2em;
}

.bottomRight {
  position: fixed;
  z-index: 100;
  bottom: 15px;
  right: 15px;
}

.bottomCenter {
  position: fixed;
  z-index: 100;
  bottom: 15px;
  left: 45%;
}

.fa.fa-plus {
  cursor: pointer;
  padding: 9px 0 0 1px;
  border-radius: 50%;
  font-size: 17px;
  width: 35px;
  height: 35px;
  text-align: center;
}

.page-header.bottomRight {
  width:auto;
}

div.bottomRight {
  display: flex;
  flex-direction: column-reverse;
}

div.bottomRight > a {
  display: none;
}

div.bottomRight > a:hover {
  background-color: #fb9614 !important;
}

div.bottomRight:hover > a {
  display: block;
  margin: 2px 0px;
  padding: 3px 20px;
  background-color: #E6E6E6;
  color: #191e55;
  text-decoration: none;
}

div.bottomRight > i.fa-plus {
  margin: 0 0 0 auto;
}

.page-header.bottomRight {
  position: absolute;
}

.forum .thread.bottomRight {
    right: 33%;
    z-index: 100;
}

.forum .row {
  height: calc(100vh - 85px);
}

.pilotage.forum .row {
  height: auto;
}

.label-file-logo {
  margin:auto;
  margin-top: 15px;
  cursor: pointer;
  color: #00b1ca;
  font-weight: bold;
}
.label-file-logo:hover {
    color: #25a5c4;
}

.label-file-logo > i {
  font-size: 1.8em;
}

.companyHeader {
}

.companyLogo {
    width: 25%;
    margin: auto;
    text-align: center;
    margin-top: 30px;
}

.companyLogo img {
  width: 100%;
  padding: 15px;
}

.company textarea {
  width: 100%;
  height: 120px;
}

.company .panel-body > input {
  padding-left: 10px;
}

.company > .panel-default {
    background-color: rgba(200,200,200,0.5);
    border-color: #dddddd;
    position: relative;
}

.companyMainContent {
  width: 80%;
}

.company .actionButtons {
    position: absolute;
    right: 25px;
    top: 20px;
    display: flex;
}

.company .card .actionButtons {
  position: static;
  flex-direction: column;
}

.company .actionButtons i {
  font-size: 1.6em;
  padding: 0 8px;
}

.company .card .actionButtons i {
  font-size: 1.4em;
  padding: 6px 0;
}

.company .paragraphTitle {
  font-weight: 700;
  font-size: 1.7em;
  margin-bottom: 20px;
}

.courseEdit .container {
  margin: 0;
}

.courseEdit .validCourse h3 {
  display: inline;
}

#courseedit-tab-pane-2 a:hover {
  text-decoration: none;
}

.courseEdit .toggle {
  font-size: 30px;
  line-height: 10px;
}

.courseEdit tr:hover .fa-toggle-on {
    color: #191e55;
}

.courseEdit a:hover {
  text-decoration: none;
}

.courseEdit .selectedSkills {
    padding-left: 10px;
}

.courseEdit .selectedSkills > div{
    border: 2px #eee solid;
    border-radius: 10px;
    padding: 0;
    margin-right: 1.65%;
}

.courseEdit .selectedSkills p {
  color: white;
  font-weight: bold;
  height: 39px;
  margin: 0;
  padding: 0;
  border-radius: 10px 10px 0 0;
  background-color: #8A8CA8;
  display: flex
}

.courseEdit .selectedSkills p > span {
  margin: auto;
}

.courseEdit #courseedit-tab-pane-3 tbody tr {
  height: 3em;
}

.courseEdit #courseedit-tab-pane-1 .fa-plus {
  float: right;
}

.courseEdit table .hrinput > div:first-child {
  display: none;
}

.courseEdit table .hrinput {
  border: none;
}

.courseEdit table .hrinput input {
  border-bottom: 1px solid #ddd !important;
}

.courseEdit #courseedit-tab-pane-3 .hrinput input {
  font-size: 1em;
}

.accordionHeader {
  cursor: pointer;
  width: 100%;
  background-color: #eee;
  padding: 5px 15px;
  margin: 3px 0;
  font-weight: bold;
  font-size: 1.1em;
  border: 1px solid #ccc;
  margin-top: 10px;
}

.accordionHeader .row {
  margin-left: -2px;
  margin-right: -2px;
}

.sessionCard > .panel-body {
  padding: 0;
}

.sessionCard:hover {
  background-color: #fb9614;
}

.appImg,
.sessionImage > div {
  width: 100%;
  padding-top: 114%;
  position: relative;
  overflow: hidden;
}

.sessionCard img,
.sessionImage img {
  top: 0;
  left: 0;
  width: 100%;
  position: absolute;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.sessionCard:hover img {
  opacity: 1;
  filter: alpha(opacity=100);
}

.sessionCard > div > div {
  background-color: #191e55;
  position: relative;
  height: 5em;
  padding: 5px 15px 5px 15px;
  display: flex;
}

.sessionCard h4 {
    width: 100%;
    text-align: center;
    background-color: #fb9614;
    color: #191e55;
    padding: 7px 0 0 0;
    margin: 0;
    height: 28px;
    vertical-align: middle;
    font-weight: bold;
    font-size: 1.3em;
}

.sessionCard h6 {
  width: 100%;
  text-align: center;
  background-color: #fb9614;
  color: #191e55;
  padding: 0px 0 0 0;
  margin: 0;
  height: 20px;
  vertical-align: middle;
}
.sessionCard h5 {
  color: white;
  font-size: 1em;
  margin-top: auto;
  margin-bottom: auto;
}

.company > .panel > .panel-body {
  display: flex;
}

.sessionEdit .actionButtons {
  display: flex;
}

.sessionEdit .actionButtons i {
  font-size: 1.6em;
  padding: 0 8px;
  margin: auto;
}

.sessionEdit table tr {
  border-bottom: 1px solid #191e55;
  height: auto;
}

.sessionEdit table tr > td {
  padding: 5px 0;
  font-size: 1.2em
}

.sessionEdit table tr > td:first-child {
  width: calc(100% - 50px);
  text-align: left;
}

.row.center {
  align-items: center;
  justify-content: center;
  display: flex;
}

.flexCol > .hrinput {
  text-align: left !important;
}

.mobilePhone .theEditor {
  max-height: none;
}

.sessionEdit .mobilePhone,
.help .mobilePhone {
  position: relative;
  top: 5px;
  right: -9px;
}

#sessionedit-tab-pane-1,
#sessionedit-tab-pane-2,
#sessionedit-tab-pane-3,
#sessionedit-tab-pane-4,
#sessionedit-tab-pane-5,
.companyParagraph {
  width: calc(100% - 250px);
}

#sessionedit-tab-pane-2 .container,
#sessionedit-tab-pane-3 .container,
#sessionedit-tab-pane-4 .container,
#sessionedit-tab-pane-5 .container,
.company .container,
.container {
  width: 100%;
  margin: 10px 0 0 0;
  padding: 0;
}

#sessionedit-tab-pane-2 .textCard > input,
#sessionedit-tab-pane-3 .textCard > input,
#sessionedit-tab-pane-4 .textCard > input,
#sessionedit-tab-pane-5 .textCard > input {
    font-size: 1em;
    font-weight: normal;
}

.rowEditor {
  display: flex;
}

.mobilePhone {
  position: fixed;
  top: 5px;
  right: 30px;
  height: 500px;
}
.editorMenu {
  margin-left: 9px;
  margin-top: 9px;
  width: 200px;
}
.editorContent {
  margin: 10px 16px 10px 16px;
  max-height: 80vh;
  width: calc(100% - 200px);
  overflow: auto;
}

.btn-editor{
  border-radius: 4px;
width: 100%;
margin-top: 2px;
  background-color: white;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  color: #191e55;
  font-size: 15px;
  text-align: left;
}

.btn-editor:hover {
  background-color: #aaa
 
}

.btn-editor > i {
  float:right;
  display: block;
  font-size: 28px;
 
}
/*virer par yann qui comprend pas
position: relative;
  /* Adjust these values accordinglyc
  top: 5px;
  left: 5px;
}*/

.delegates {
  position: fixed;
  top: 150px;
  right: 30px;
}
.delegate {
  background-color: #fb9614;
  
  border: #fb9614 solid 2px;
  border-radius: 18px;
  text-align: center;
  margin-top: 2px;
}

.wait-delegate {
  

  border: #c4baad dashed 2px;
  border-radius: 18px;
  text-align: center;
  margin-top: 2px;
  padding-left: 15px;
  padding-right: 15px;

  font-size: 13px;
  color: #666666;
  font-weight: bold;

 
}
.wait-delegate-active {
  

  border: #fb9614 dashed 2px;
  border-radius: 18px;
  text-align: center;
  margin-top: 2px;
}



.company .mobilePhone {
  position: sticky;
  margin-top: 66px;
  height: 490px;
  margin-left: 18px;
  top: calc(50vh - 245px);
}

.company .editorMenu {
  position: sticky;
display: block;
  top: calc(50vh - 120px);
  float: left;
    
}

@supports not (position: sticky) {
  .company .mobilePhone {
    position: static;
  }

  .company .editorMenu {
    position: static;
  }

}

.mobilePhone > img {
  position: absolute;
}

.mobilePhone .mobileHeader {
  width: 100%;
  height: 40px;
  background-color: #fb9614;
  display: flex;
  justify-content: space-around;
  margin-bottom: 0;
}

.mobilePhone .mobileHeader h1 {
  margin: auto 10px !important;
  font-size: 1.2em;
  margin: 0 0 0 5px;
  min-width: 58%;
  color: white;
}

.mobilePhone .mobileHeader i {
  color: white;
  font-size: 3em;
}

.mobilePhone .progression {
  height: 5px;
  background-color: #191e55;
}

.mobilePhone .panel {
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-bottom:5px;
}

.mobilePhone .panel-body {
  padding: 0;
}

.mobilePhone .container {
  padding: 0 3px;
}

.mobilePhone .hrinput {
  border: 0; 
  padding: 0;
  margin-right: 0;
}

.mobilePhone .label-file-logo {
  display: none;
}

.mobilePhone .col-sm-11 {
  width: 100%;
  padding: 0;
}

.mobilePhone .col-sm-1 {
  display: none;
}

.mobilePhone .hrinput.title {
    font-weight: 600;
    font-size: 1.1em;
    border-bottom: 1px solid;
    border-radius: 0;
}

.mobilePhone .hrinput.subtitle {
    font-size: 1.05em;
    font-style: italic;
}

.mobilePhone .hrinput.textCard {
    line-height: 1em;
    margin-bottom: 1em;
}

.mobilePhone .actionButtons {
  display: none;
}

.mobilePhone .faclose {
  width: 20px;
  background: url(/static/img/close.png);
  height: 20px;
  background-size: 20px 20px;
}

/* Help mobile phone */
.mobilePhone > img {
  position: absolute;
}

.mobilePhone > div {
  top: 50px;
  left: 9px;
  position: relative;
  width: 215px;
}

.mobilePhone div.theEditor {
  position: relative;
  width: 215px;
  height: 306px;
  overflow-y: scroll;
}

.help .mobilePhone .mobileHeader {
  background-color: white;
  height: 70px;
}

.help .mobilePhone h1 img {
  width: 70px;
}

.mobilePhone .panel {
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-bottom:5px;
}

.help .mobilePhone .hrinput.title {
    text-align: center;
    border-bottom: unset;
    font-size: 15px;
}

.mobilePhone h4 {
  font-size: 12px;
}

.mobilePhone {
  font-size: 0.8em;
  line-height: 1.1;
}

.mobilePhone .faclose {
  width: 20px;
  background: url(/static/img/close.png);
  height: 20px;
  background-size: 20px 20px;
  margin-top: 10px;
}

.fa-toggle-on {
  color: #fb9614;
}

.fa-toggle-off {
  color: #aaa;
}

#PlacesAutocomplete__root {
  border: 2px #eee solid;
  border-radius: 10px;
  padding: 2px 0px 0px 5px;
  margin-right: 1.65%;
}

#PlacesAutocomplete__autocomplete-container {
  position: relative;
  z-index: 100;
}

@media(device-width: 768px) and (device-height: 1024px){
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0,0,0,.5);
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    }
}

.DayPicker {
  position: absolute;
  background-color: white;
  z-index: 100;
  border: #eee solid 2px;
  border-radius: 18px;
  top: 45px;
  left: 5px;
}

.DayPicker:not(.DayPicker--interactionDisabled) 
.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
  background-color: #fb9614;
  color: white;
}

.DayPicker-Day--today {
  color: #fb9614;
}



span.plus {
    background: url("/static/img/plus.png") no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 40px;
    width: 40px;
}
span.edit {
    background: url("/static/img/edit.svg") no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    width: 20px;
}
span.delete {
    background: url("/static/img/delete.svg") no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    width: 20px;
}
span.left {
    background: url("/static/img/arrow-left.svg") no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    width: 20px;
    vertical-align:middle;
}
span.right {
    background: url("/static/img/arrow-right.svg") no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    width: 20px;
    vertical-align:middle;
}
span.up {
    background: url("/static/img/arrow-up-small.svg") no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    width: 20px;
    vertical-align:middle;
}
span.down {
    background: url("/static/img/arrow-down-small.svg") no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    width: 20px;
    vertical-align:middle;
}
.menuLogo {
    width: 40px;
    display:block;
  margin-left:auto;
  margin-right:auto;
}

.hrwell {
  background: none;
}

.userMgt .filters {
  display: flex;
  margin-bottom: 5px;
}

.userMgt .hrinput {
  width: 40%;
  margin-bottom: 7px;
  margin-right: 1.5%;
}

.userMgt .hrinput input {
  font-size: 13px;
}

.userMgt th {
  font-size: 13px;
}

.userMgt .fa.fa-sort-down {
  color: #a9a9a9;;
}

.userMgt .fa.fa-sort-down.selected {
  color: black;
}


.userMgt .envelope {
  position: relative;
}

.userMgt .fa-envelope.green {
  color: #48ad48;
}

.userMgt .fa-envelope.blocked {
  color: #ddd;
}

.selectTemplate {
    display: flex;
}
.selectTemplate .hrinput select {
    width: 95%;
}
.selectTemplate > * {
    margin: auto;
}
.selectTemplate .hrinput {
    width: 70%;
}

.userMgt .admin,
.userEdit .admin {
    display: flex;
    border: 2px #eee solid;
    border-radius: 10px;
    height: 50px;
    padding: 5px;
}



.userMgt .admin {
  padding: 5px 25px;
}

.userEdit .admin {
  margin-right: 1.65%;
}

.userMgt .admin > p,
.userEdit .admin > p {
  font-size: 1.1em;
  margin: 4px 10px;
}

.addUser .form-horizontal
.userEdit {
  display: flex;
  flex-wrap: wrap;
}

.addUser .hrinput,
.userEdit .hrinput {
  margin-bottom: 7px;
}

.addUser .rights,
.editUser .rights {
  font-size: 1.1em;
}

.filters .filter {
  width: 57%;
}

.filters .rights {
  font-size: 1.1em;
  width: 11.5%;
}

.filters .status {
  font-size: 1.1em;
  width: 9.5%;
}

.filters .status select {
  width: 95%;
  font-size: 1em;
}

.filters .status select option {
  background: white;
}

.filters .connected {
  width: 14.5%;
}

.filters .connected span {
  display: flex;
}

.filters .connected span > span {
  margin-top: 5px;
  margin-left: 10px;
}

.filters .connected .toggle {
  display: inline;
}

.trainingEdit .titlePanel .panel-body {
  display: flex;
}

.trainingEdit .titlePanel .hrinput {
  width: 100%;
}

.table.courseCalendar >thead {
  background-color: unset;
}

.courseCalendar td {
    height: 60px !important;
    align-items: center;
    justify-content: center;
    display: flex;
}

.courseCalendar td.beforeToday {
    background: #dcdcdc;
    color: #acacac;
}

.courseCalendar td.beforeToday:hover {
    background-color: #dcdcdc !important;
    color: #acacac;
    cursor: default;
}
/*ici le début du side */
#wrapper {
    padding-left: 70px;
    transition: all .4s ease 0s;
    height: 100%
}

#sidebar-wrapper {
    margin-left: -80px;
    left: 70px;
    width: 80px;
    background: #FAFAFC;
    position: fixed;
    height: 100%;
    z-index: 2;
    transition: all .4s ease 0s;
}

.sidebar-nav {
    display: block;
    float: left;
    width: 80px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-content {
    height: 100%;
}

#page-content-wrapper {
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    height: 100%;

}
#wrapper.active {
    padding-left: 80px;
}
#wrapper.active #sidebar-wrapper {
    left: 80px;
}

#page-content-wrapper {
  width: 100%;
}

#sidebar_menu li a, .sidebar-nav li a {
    color: #999;
    display: block;
    float: left;
    text-decoration: none;
    width: 80px;
    background: #FAFAFC;

    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    -o-transition: background .5s;
    -ms-transition: background .5s;
    transition: background .5s;
}
.sidebar_name {
    padding-top: 25px;
    color: #fff;
    opacity: .7;
}

.sidebar-nav li {
  line-height: 40px;
  text-indent: 20px;
}
.sidebar-nav li.active a {
background: white;
  box-shadow: 10px 0px 0 #fff, 2px -2px 12px #555;

border: 1px solid #BFBFBF;
border-right-width: 0;
}

.sidebar-nav li.active a:hover {
  color:  #fa9614;
  background: white;
  text-decoration: none;

}


.sidebar-nav li a {
  color: #191e55;
  display: block;
  text-decoration: none;
  text-align:center;
  padding-top: 3px;
}

.sidebar-nav li a:hover {
  color:  #fa9614;
  background: #FFFFFF;
  text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 65px;
  line-height: 60px;
  font-size: 18px;
}

.sidebar-nav > .sidebar-brand a {
  color: #999999;

}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;

}




#main_icon
{
    float:right;
   padding-right: 65px;
   padding-top:20px;
}
.sub_icon
{
    float:right;
   padding-right: 65px;
   padding-top:10px;
}
.content-header {
  height: 65px;
  line-height: 65px;
}

.content-header h1 {
  margin: 0;
  margin-left: 20px;
  line-height: 65px;
  display: inline-block;
}

@media (max-width:767px) {
#wrapper {
    padding-left: 70px;
    transition: all .4s ease 0s;
}
#sidebar-wrapper {
    left: 70px;
}
#wrapper.active {
    padding-left: 80px;
}
#wrapper.active #sidebar-wrapper {
    left: 100;
    width: 100;
    transition: all .4s ease 0s;
}
}

/*top navbar */

html, body {
  background: #FAFAFC;
  height: 100%;
  font-family: "din", "Helvetica Neue", Helvetica, Arial, sans-serif;

}

h2, .h2 {
  font-size: 22px;
}

h3, .h3 {
  font-size: 15px;
  font-weight: bold;
  color: #191e55;
}

h3.title {
  margin-left: 16px;
  font-size: 17px;
  height: 25px;
}

h4.subtitle {
  font-size: 14px;
  font-weight: bold;
  height: 22px;
  margin-top: 5px !important;
  color: #191e55;
}

.bandeau {

  text-decoration: none;
  font-size: 1em;
}

a.bandeau:link,
a.bandeau:visited,
a.bandeau:active {
  color:  #191e55;
  text-decoration: none;
cursor: 'pointer';
font-size: 0.9em;
}
a.bandeau:hover { color: #006699; text-decoration: underline; }


#root {
  background: #FAFAFC;
  height: 100%;
}
.topNavbarNav {
  background: #FAFAFC;
  margin-left: 16px;
}

.pagination {
  margin-top: 3px;
margin-bottom: 0;
}

.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 16px;
    line-height: 1.846;
    text-decoration: none;
    color: #191e55;
    background-color: #FAFAFC;
    border: 0px;
    margin-left: -1px;
}

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
    z-index: 30;
    font-weight: bold;
    background-color: #ffffff;
      color: #191e55;

    cursor: default;
    /*box-shadow: 2px -2px 12px #555;*/
    box-shadow: 0 10px 0 #fff, 2px -2px 12px #555;
}

.fullheight {
  height: 100%;
}
.mainContent {
  z-index: 40;
  height: auto;
  min-height: 92%;
  padding-top: 10px;
  padding-left: 11px;
  padding-right: 20px;
    /*;*/
  box-shadow: 2px -2px 12px #555;
  margin-left: 5px;
  background: white;
}

element.style {
}


.overlayStyle {
  position: absolute;
  background-color: #EEE;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid #CCC;
  border-radius: 3px;
  margin-left: -5px;
  margin-top: 5px;
  padding: 10px;
  z-index: 40;
}

/*table */

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

thead, tbody, tr, th, td { display: block; }

tbody > tr,
tbody > tr > td {
  height: 2.5em;
}

.table>tbody>tr>td {
  padding: 5px 0 0 8px;
}

thead tr {
    /* fallback */
    width: 100%;
    /* minus scroll bar width */
    width: -webkit-calc(100% - 16px);
    width:    -moz-calc(100% - 16px);
    width:         calc(100% - 16px);
}

tr.fullWidth {
  width: 100%;
}

tr.fullWidth th {
  width: 100%;
}

thead.noScroll tr {
  width: 100%;
}

tr:after {  /* clearing float */
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

tbody {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    float: left;
}

tr > *:first-child {
  padding-left: 15px !important;
}

.table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: none !important;
}

.table>thead {
  background-color: #E6E6E6;
  color: #191e55;
}
.table>thead>tr>th:first-child {
  background-color: #8A8CA8;
  color: white;
}

.table>tbody>tr:first-child td {
  border-top: none;
}


/*card paddinf */
.cardPadding {
  padding: 2px;
}

/* calendar */
.calSession {
  text-align:center;
  background-color: #191E55;
  color: white;

    animation: anim 0.5s ease;
}
.calNoSession {
  text-align:center;


   transform-origin: top;
}
@keyframes anim {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
.calDate {
  text-align:center;
  width: 14%
}

th.calDate {
  background-color: #8A8CA8;
  color: white;
}

.Dropdown-root {
  position: relative;
}

.Dropdown-control {
  position: relative;
  overflow: hidden;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
  color: #333;
  cursor: default;
  outline: none;
  padding: 8px 52px 8px 10px;
  transition: all 200ms ease;
}

.Dropdown-control:hover {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.Dropdown-arrow {
  border-color: #999 transparent transparent;
  border-style: solid;
  border-width: 5px 5px 0;
  content: ' ';
  display: block;
  height: 0;
  margin-top: -ceil(2.5);
  position: absolute;
  right: 10px;
  top: 14px;
  width: 0
}

.is-open .Dropdown-arrow {
  border-color: transparent transparent #999;
  border-width: 0 5px 5px;
}

.Dropdown-menu {
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  margin-top: -1px;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 1000;
  -webkit-overflow-scrolling: touch;
}

.Dropdown-menu .Dropdown-group > .Dropdown-title {
  padding: 8px 10px;
  color: rgba(51, 51, 51, 1.2);
  font-weight: bold;
  text-transform: capitalize;
}

.Dropdown-option {
  box-sizing: border-box;
  color: rgba(51, 51, 51, 0.8);
  cursor: pointer;
  display: block;
  padding: 8px 10px;
}

.Dropdown-option:last-child {
  border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
}

.Dropdown-option:hover {
  background-color: #f2f9fc;
  color: #333;
}

.Dropdown-option.is-selected {
  background-color: #f2f9fc;
  color: #333;
}

.Dropdown-noresults {
  box-sizing: border-box;
  color: #ccc;
  cursor: default;
  display: block;
  padding: 8px 10px;
}


.noPadR {
  padding-right: 0;
}

.noPadL {
  padding-left: 0;
}
.noPad {
  padding-left: 0;
  padding-right: 0;
}
.row.paddingBottom {
  padding-bottom: 30px;
}
.header {
  background-color: #8A8CA8;
    color: white;
    font-size: 13px;

font-weight:700;
/*padding: 10px;*/
}
.headerChevron {
  display: block;
	float: top;
	height: 39px;
	background: #8A8CA8;;
	text-align: center;
	padding: 7px 40px 0 40px;
	position: relative;
	margin: 0 5px 0 0; 
	
  font-size: 13px;
  font-weight: 700;
	text-decoration: none;
	color: #fff;
}

.headerChevron:after {
	content: "";  
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #8A8CA8;
  position: absolute; right: -20px; top: 0;
  z-index: 10;
}

.headerChevron:before {
	content: "";  
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid white;
  position: absolute; left: 0; top: 0;
  z-index: 9;
}

.headerChevronFirst:before {
  display: none; 
}

.headerChevronLast {
  margin-right: 0;
}

.headerChevronLast:after {
  display: none; 
}


.darkContent {
  background: #FAFAFC;
  height: 100%;
}

.icon_low {
  padding: 2px;
  color: rgb(219, 220, 241);
}

.icon_highlight {
  padding: 2px;
  color:#8A8CA8;
}

.forum .spinner {
    padding-left: calc(50% - 30px);
    padding-right: calc(50% - 30px);
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
}

.courseEdit .spinner,
.help .spinner {
  padding-left: calc(50% - 30px);
  padding-top: 40vh;
  position: fixed;
  width: 100%;
  height: 80vh;
  display: flex;
  z-index: 100;
}

.sessionEdit .spinner {
    padding-left: 0;
    padding-top: 0;
    position: relative;
    width: 100%;
    height: 20px;
    display: flex;
    z-index: 100;
}

.forum .spinner > *,
.courseEdit .spinner {
  margin: auto;
}

.forum tr.courseLine:hover {
  background-color: rgba(255,255,255,0);
  cursor: default;
}

.forum tr.courseLine {
    font-weight: bold;
    font-size: 14px;
    
}

.forum tr.courseLine > td{
padding-bottom: 3px;
padding-left: 5px !important;
  
}
.courseLine + tr.trainingLine > td {
    border: none;
    padding-left: 25px !important;
    text-indent: -20px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.trainingLine + tr.trainingLine > td {
  border: none;
  padding-left: 25px !important;
  text-indent: -20px;
  padding-top: 4px;
  padding-bottom: 4px;
  
 
}
.message {
    border-left: 1px solid #dddddd;
    padding-left: 5px;
    min-height: 60px;
    clear: both;
}

.message:hover {
  background-color: #fb9614;
}

.message .actions {
    display: flex;
    font-size: 1.2em;
    margin-top: 5px;
    margin-right: 5px;
    height: 30px;
}

.actions i {
    margin-left: 5px;
}

.message .actions i:hover {
  color: #191e55;
  cursor: pointer;
}

.forum .message .header {
  margin-left: -5px;
  display: flex;
  justify-content: space-between;
  padding: 2px 5px;
}

.forum .message textarea {
  width: calc(100% - 40px);
  height: 100px;
  font-size: 1em;
  line-height: 1.4em;
}

.forum .message textarea + i {
      font-size: 2em;
}

.forum .message .like {
  color: #191e55;
  font-size: 1.3em;
}

.btn-cancel {
  margin-left: 20px;
}


.hnavbar {
  background-color:  #191e55;
  padding: 2px 5px 0px 5px;
  height: 38px;
  position: relative;
}

.sessionEdit .hnavbar {
  background-color: #dddddd;
  color: #191e55;
  width: 99%;
}

.hnavbar > .subHorizontalNavBar {
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    top: 38px;
    background-color: #fff;
}

.pilotage.forum > .hnavbar{
  background-color:  rgb(218,227,243);
}

.pilotage.mobility > .hnavbar{
  background-color:  rgb(255,242,204);
}

.pilotage.learnings > .hnavbar {
  background-color:  rgb(255,192,0);
}

.pilotage.forum .hnavbarNotSelected,
.pilotage.mobility .hnavbarNotSelected,
.pilotage.learnings .hnavbarNotSelected {
  color: black;
}

.pilotage .numbers {
  padding: 0 10px;
}

.hnavbar .share {
  position: absolute;
  right: 10px;
  top: 8px;
  display: none;
}

.pilotage.activity > .hnavbar .share > i {
  color: white;
}

.hnavbar div {
  display: inline-block;  
}

.hnavbar .share > i {
  padding: 0px 10px;
  font-size: 1.4em;
}

.hnavbarNotSelected, .hnavbarSelected {
  height: 40px;
  font-size: 1.1em;
  font-weight: bold;
  padding: 0px 10px 2px 10px;
  margin-top: 5px;
}

.hnavbarNotSelected {
  color:  white;
}

.sessionEdit .hnavbarNotSelected {
  color:  #191e55;
}

.sessionEdit .hnavbarNotSelected,
.sessionEdit .hnavbarSelected {
  font-size: 1em;
}

.hnavbarNotSelected:hover { 
  background-color: gray;
  height: 40px;
  border-radius: 9px;
  cursor: pointer;
}

.hnavbarSelected {
    color: #191e55;
    background-color: white;
    border-radius: 9px;
}




.pilotage_gray {
  background-color: #eeeeee;
  height: 100%;
}


.container-fluid,
.panel-body {
  padding: 0px;
  height: 100%;
}

.container-fluid {
  margin-top: 10px;
}


.pilotage .nopad {
  padding-left: 0px;
  padding-right: 0px;

  
}







.pilotage_num_title {

  text-decoration: underline;
  color: #191e55;
  font-size: 1.1em;
  font-weight: 700;
  text-align: center;
}


.pilotage_num {

  color: #191e55;
  font-size: 1.1em;
  font-weight: 700;
  text-align: center;
}

.pilotage_num_big {

  color: #191e55;
  font-size: 1.6em;
  font-weight: 700;
  text-align: center;
}

.pilotage_red {

  color: #c4363d;

}
.pilotage .menu {
  
  padding: 7px 12px 7px 12px;
 margin: 3px;
  
}
.pilotage .menu:hover {
  color: black;
}

.display-as-table {display: table; width: 100%;}
.display-as-table > div {display: table-cell; float: none;}

.pilotage .menuSelected {

  padding: 7px 12px 7px 12px;
 margin: 3px;

  border-style: dashed;
  border-radius: 10px;
  border-width: thin;
}



.pilotage img {
  width: 100%;
}



.pilotage .tabEditor {
  margin-top: 50px;
  position: relative;

  
}

.pilotage .tabEditor > .title {
position: absolute;
top: -35px;
border: 1px solid #ddd;
border-bottom: none;
padding: 2px 15px;
background-color: white;
font-size: 1.3em;
font-weight: 700;
}

.pilotage .RichEditor-root {
margin-top: 10px;
text-align: center;

}


.pilotage .smallHeight {
  height: 150px;
  }

.pilotage .normalHeight {
  height: 350px;
  }

.pilotage .bigHeight {
  height: 350px;
  }


.pilotage .hrinput {
margin-top: 10px;
}

.pilotage .publish {
  border: 2px solid #eee;
  float: right;
  display: flex;
  width: 160px;
  justify-content: space-between;
  padding: 5px 20px;
  margin: 15px 0;
  border-radius: 10px;
}

.pilotage .publish > div {
font-size: 20px;
}

.pilotage .publish .toggle,
.userMgt .toggle,
.userEdit .toggle {
font-size: 35px;
line-height: 10px;
}


.pilotage .head {
  font-size: 1.5em;
font-weight: 700;
text-align: center;
}

.pilotage .head2 {
  font-size: 1.1em;
font-weight: 600;

text-align: center;
}

.pilotage .tag {

color: #191e55;

}

.pilotage .display-as-table {
  height: calc(100vh - 100px);
}

.pilotage p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2em;
}

.pilotage .pilotage_gray > div {
  height: calc(100vh - 100px);
}

.pilotage .pilotage_gray .flex {
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.pilotage #chart_div {
  width: 100%;
  height: calc(100vh - 200px);
}

.pilotage td, 
.pilotage th {
    text-align: center;
}

.fa-circle.blue {
  color: #668cff;
}

.fa-circle.lightgreen {
  color: #99e699;
}

.fa-circle.green {
  color: #009933;
}

.fa-circle.yellow {
  color: #ffb84d;
}

.fa-circle.grey {
  color: #aaaaaa;
}

table.learningTable {
  border: 1px solid black;
  width: 100%;
}

table.learningTable > tbody > tr {
  border-bottom: 1px solid black;
}

.pilotage .ip p,
.pilotage .if p,
.pilotage .sca p {
  font-weight: bold;
  margin-top: 10px !important;
}

.pilotage .ip p > span,
.pilotage .if p > span,
.pilotage_num span {
  display: block;
}

.pilotage .ip p > span,
.pilotage .if p > span {
  font-weight: normal;
}

.pilotage .if .btn {
  white-space: normal;
}

.centerP {
  display: flex;
}

.centerP > p {
  margin: auto !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.pilotage.mobility #chart_div {
  height: 20px !important;
}

.templateEditor .interaction input {
  color: #191e55;
}

.userRelationship .buttons {
  float: right;
  text-align: right;
}

.userRelationship .buttons > i {
    margin-right: 10px;    
}

.userRelationship .buttons > i:hover {
    color: black;
    cursor: pointer;
}

.userRelationship .buttons > i.fa-save {
    color: green;
}

.userRelationship .buttons > i.fa-save.modified {
    color: red;
}

.userRelationship i {
    font-size: 1.2em;
}

i.fa-pencil {
  margin-right: 5px;
}

.hrinput.filterMail {
    width: 25%;
}

.templateEditor > * {
    margin-bottom: 10px;
}

.templateEditor .help {
  display: flex;
  justify-content: space-between;
}

.templateEditor .help > * {
    margin: auto;
}

.userRelationship .fullCol {
  min-height: 75vh;
}

.userRelationship .fullColEditor {
  height: 75vh;
}

.userRelationship .fa-plus {
  position: absolute;
    bottom: 10px;
    right: 0;
}

.userRelationship .templateEditor {
    border: 2px #eee solid;
    border-radius: 10px;
    margin: 0 10px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    height: 95%;
}

.userRelationship .templateEditor.readonly .hrinput {
  margin-bottom: 5px;
}

.userRelationship .templateEditor .hrinput.textArea {
  height: 50%;
}

.selectedRow {
  background-color: #fb9614;
}

.userRelationship .readonly span {
    display: block;
    font-size: 12px;
    font-family: "din", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #666666;
    margin-left: -4px;
}

.modal-dialog h4 {
  font-size: 20px;
  font-weight: bold;
  color: #191e55;
  /* margin: auto; */
  /* width: 20%; */
  /* text-align: center; */
}

.modal-dialog h4 > span  {
    display: block;
    font-size: 0.8em;
    color: gray;
    font-weight: normal;
    margin-left: -10px;
}

.flexCol {
  display: flex;
  flex-direction: column;
}

.flexCol > * {
  margin: auto;
  width: 95%;
  text-align: center
}

.helpParagraph > .panel-body {
  position: relative;
  display: flex;
}

.helpParagraph .hrinput.paragraphTitle {
    margin-top: 10px;
    margin-left: 10px;
}

.helpParagraph .topRight {
    margin-top: 16px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-bottom: 16px;
}

.fa.fa-save {
  font-size: 2.5em !important;
}



.templatelg .modal-content {
  width: 800px;
}

.templatelg .textArea {
  height: 300px;
}

.templatelg textArea {
  height: 280px;
}