:root {
    --primary : #424664;
    --secondary : #8AA4BB;
    --yellow : #EFCC38;    
    --offcanvas-width: 270px;
    --topNavbarHeight: 56px;
  }
/* Modify the background color */
.navbar-custom {
    background-color: var(--primary);
}

.card-header {
    background-color: var(--secondary);
    color: white;
    font-weight: bold;
}
.footer {   
    background: var(--primary);
    color: white;
    text-align:center;
}
.msgalert {
  color:red;
  font-size: 14px;
  font-family: "Lucida Console", "Courier New", monospace;
}

.datepicker {
  z-index: 1600 !important; /* has to be larger than 1050 */
}

th {
  font-size: 14px;  
}
td {
  font-size: 12px;  
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");
body,
button {
  font-family: "Inter", sans-serif;
}
.sidebar-nav {
  width: var(--offcanvas-width);
}
.sidebar-link {
  display: flex;
  align-items: center;
}
.sidebar-link .right-icon {
  display: inline-flex;
}
.sidebar-link[aria-expanded="true"] .right-icon {
  transform: rotate(180deg);
}
@media (min-width: 992px) {
  body {
    overflow: auto !important;
  }
  main {
    margin-left: var(--offcanvas-width);
  }
  /* this is to remove the backdrop */
  .offcanvas-backdrop::before {
    display: none;
  }
  .sidebar-nav {
    -webkit-transform: none;
    transform: none;
    visibility: visible !important;
    height: calc(100% - var(--topNavbarHeight));
    top: var(--topNavbarHeight);
  }
}

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

/* Floating label */
.instruction {
  font-size:13px;
  font-weight:600;
  color:green;
}
.required {
  font-size:13px;
  color:#D00;
}
.error {
  font-size:11px;
	font-weight: 600;
	color:red;
	letter-spacing: 1px;
	background-color:transparent;
}
.has-float-label{
	display:block;
	position:relative
}
.has-float-label label,.has-float-label>span{
	position:absolute;
	cursor:text;
	font-size:75%;
	opacity:1;
  color:#B6B6B4;
	-webkit-transition:all .2s;
	transition:all .2s;
	top:-.5em;
	left:.75rem;
	z-index:3;
	line-height:1;
	padding:0 2px;  
	background:#fff;
}
.has-float-label label::after,.has-float-label>span::after{
	content:" ";
	display:block;
	position:absolute;
	background:#fff;
	height:2px;
	top:50%;
	left:-.2em;
	right:-.2em;
	z-index:-1
}
.has-float-label .form-control::-webkit-input-placeholder{
	opacity:1;
	-webkit-transition:all .2s;
	transition:all .2s
}
.has-float-label .form-control::-moz-placeholder{
	opacity:1;
	transition:all .2s
}
.has-float-label .form-control:-ms-input-placeholder{
	opacity:1;
	transition:all .2s
}
.has-float-label .form-control::placeholder{
	opacity:1;
	-webkit-transition:all .2s;
	transition:all .2s
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder{
	opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder{
	opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder{
	opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus)::placeholder{
	opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus)+*{
	font-size:100%;
	color: #6c757d;
	opacity: 1;
	top:.3em
}
.input-group .has-float-label{
	-webkit-box-flex:1;
	-webkit-flex-grow:1;
	-ms-flex-positive:1;
	flex-grow:1;
	margin-bottom:0;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
	margin-top: 6px;
}
/* Floating label */
.just-padding {
  padding: 15px;
}

.list-group.list-group-root {
  padding: 0;
  overflow: hidden;
}

.list-group.list-group-root .list-group {
  margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
  border-radius: 0;
  border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
  border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
  padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
  padding-left: 45px;
}

.list-group-item .bi {
  margin-right: 5px;
}

.searchnode {
  border: 3px solid #e34b4b!important;
}



#overlay{	
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height:100%;
  display: none;
  background: rgba(0,0,0,0.6);
}
.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #2e93e6 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% { 
    transform: rotate(360deg); 
  }
}
.is-hide{
  display:none;
}

/* Google orgChart */
.header-node {
  border-radius: 2px;
  text-align: center;
  vertical-align: middle;
  font-family: fantasy;
  cursor: default;
  color: #000;
  background-color: #fff;
}

.header-node .titre {
  float: left;
}

.header-node .etat {
  float: right;
}
.div-durer {
  margin-top:-7px;

}
.planifier {
  color: white;
  background: #0d6efd;
}

.encours {
  color: white;
  background: #6c757d;
}
.suspondu {
  color: white;
  background: #ffc107;
}
.annuler {
  color: white;
  background: #dc3545;
}
.terminer {
  color: white;
  background: #198754;
}


#chart_div .google-visualization-orgchart-linebottom {
      border-bottom: 2px solid var(--primary);
    }
    
    #chart_div .google-visualization-orgchart-lineleft {
      border-left: 2px solid var(--primary);
    }
    
    #chart_div .google-visualization-orgchart-lineright {
      border-right: 2px solid var(--primary);
    }
    
    #chart_div .google-visualization-orgchart-linetop {
      border-top: 2px solid var(--primary);
    }
    #chart_div .google-visualization-orgchart-node {
      font-family: Calibri !important;
      width: auto !important;
      border: 0;
      border-radius: 5px;
      color: #000;
      background: #ADD8E6;
      vertical-align: top;
      white-space: nowrap;
    }
/*    #chart_div td.google-visualization-orgchart-node div{
      }
*/