.fond-vert {
/*	background-color: #3EFF20;   */
	color: #00D100;
}
.fond-vert-fonce {
	color: #198754;
}
.fond-orange {
/*	background-color: #ff8000;   */
	color: #FFC670;	
}
.fond-jaune {
	color: #ffe900;
}
.fond-gris {
	color: #5E6A4B;
}
.fond-gris-clair {
	color: #ced4da;
}
.fond-rouge {
	color: #ff0000;
}
.fond-bleu-ciel {
	color: #0d6efd;
}
.fond-bleu-clair {
	background-color: #cfe2ff !important;
}
.couleurNoire {
	color: #000000;
}
.pas-de-couleur {
	color: #837F85;
}
.largeur-td-couleur {
/*	max-width: 50px;
	text-align: left; */
	border: 1px solid black;
}
.texte-blanc {
	color: #ffffff !important;
}
.texte-noir {
	color: #000000 !important;
}
.texte-gris {
	color: #5C636A !important;
}
.texte-gris-antracite {
	color: #212529 !important;
}
.texte-gris-origine {
	color: #343a40 !important;
}
.texte-sans-deco {
	text-decoration:none;
}
.texte-centre {
	text-align: center;
}
.texte-gauche {
	text-align: left;
}
.texte-droite {
	text-align: right;
}
.bgsupervision {
	background-color: green;
}
.shadow {
	    box-shadow: 0px 0px 10px #000,
                0px 0px 30px #777;
}
.ligne-verticale {
	background-image: url('../img/timeline2.png');
	background-position: center;
}
.vignette-photos-nettoyage img {
	width: 30px;
	max-width: 30px;
	transition: transform .5s;
}
.vignette-photos-nettoyage img:hover {
	-ms-transform: scale(18) translate(12px); /* IE 9 */
	-webkit-transform: scale(18) translate(12px); /* Safari 3-8 */
	transform: scale(18) translate(12px);
	position: sticky;
	top: 20px;
	z-index: 9500 !important;
}

/* upload image nettoyage   */
.image_area {
	position: relative;
	}

img {
		display: block;
		max-width: 100%;
	}

.preview {
		overflow: hidden;
		width: 120px; 
		height: 120px;
		margin: 10px;
		border: 1px solid red;
	}

.modal-lg{
		max-width: 1000px !important;
	}

.overlay {
	  position: absolute;
	  bottom: 10px;
	  left: 0;
	  right: 0;
	  background-color: rgba(255, 255, 255, 0.5);
	  overflow: hidden;
	  height: 0;
	  transition: .5s ease;
	  width: 100%;
	}

.image_area:hover .overlay {
	  height: 50%;
	  cursor: pointer;
	}

.text {
	  color: #333;
	  font-size: 20px;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  -webkit-transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	  text-align: center;
	}
.positionGauche {
        float: left;
		margin-right: 55px;
    }
 
.positionDroite {
		margin-right: 0px;
		margin-left: auto;
		padding-left: 4px;
        float: right;
    }
	
	
.texte-en-majuscule {
	text-transform: uppercase;
	}

.espace-ajout-lot {
	margin: 16px 0 16px 0;
/*	border: 1px red !important;  */
}	
.bouton-lots {
	margin: 6px 0 6px 6px;
	height: 3em;
	vertical-align: middle;
}
.case-lot-cote-gauche {
	float:left;
	background-color: red;
	margin: 0 6px 0 0;
	height: 100%;
	max-height:100%; 
	max-width:22px;
	background-image: url("../img/pixel-rouge.png");
}
.fond-lot-en-cours {
		background-color: #e9ecef;
}
.largeur-100 {
	width: 100%;
}
.boutons-evenements {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
/* */ padding: 2rem 2rem;  
  height:10px;
  max-height:10px;
  display: inline;
}
		
#progressTimer {
	width: 100%;
	height: 5px;
}

video {
  max-width: 100%;
  height: auto;
}

/*  drag and drop grilles de formation  */
.container {
/*  background-color: #333; */
  padding: 1rem;
  margin-top: 1rem;
}

.draggable {
  padding: 1rem;
  background-color: white;
  border: 1px solid black;
  cursor: move;
  z-index: 1000;
}

.draggable.dragging {
  opacity: .5;
}
.ui-draggable-dragging{
	z-index:9999;
}

/* changement ordre colonnes */
.table-sortable th {
	cursor: pointer;
}

.table-sortable .th-sort-asc::after {
	content: "\25b4";
}

.table-sortable .th-sort-desc::after {
	content: "\25be";
}

.table-sortable .th-sort-asc::after,
.table-sortable .th-sort-desc::after {
	margin-left: 5px;
}

.table-sortable .th-sort-asc,
.table-sortable .th-sort-desc {
	background: rgba(0, 0, 0, 0.1);
}
.gravite-rouge {
  color: white;
  background: repeating-linear-gradient(
    -55deg,
    #dc3545,
    #dc3545 10px,
    #E15360 10px,
    #E15360 20px
  );
}
.gravite-orange {
  color: white;
  background: repeating-linear-gradient(
    -55deg,
    #E2B225,
    #E2B225 10px,
    #E39900 10px,
    #E39900 20px 
  );
}
.gravite-vert {
  color: white;
  background: repeating-linear-gradient(
    -55deg,
    #198754,
    #198754 10px,
    #3C996E 10px,
    #3C996E 20px
  );
}
.gravite-jaune {
  color: white;
  background: repeating-linear-gradient(
    -55deg,
    #D2D100,
    #D2D100 10px,
    #FFDD2B 10px,
    #FFDD2B 20px
  );
}
.gravite-gris {
  color: white;
  background: repeating-linear-gradient(
    -55deg,
    #666666,
    #666666 10px,
    #444444 10px,
    #444444 20px
  );
}
.textebarre {  /* texte barré */
  text-decoration: line-through;
}

.scroll-competences-dispo {
	z-index: 10000;
/*   padding: 120px;
 width: 400px;  */
  min-height: 100px;
  max-height: 100%;
  overflow-y: scroll;
}

.texte-h6-olivier {
  vertical-align: top;
  font-family: "Nunito", sans-serif;
  font-weight: 100;
  line-height: 1.0; 
}

.progress-bar-vertical {
  width: 20px;
  min-height: 100px;
  margin-right: 20px;
  float: left;
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  align-items: flex-end;
  -webkit-align-items: flex-end; /* Safari 7.0+ */
}

.progress-bar-vertical .progress-bar {
  width: 100%;
  height: 0;
  -webkit-transition: height 0.6s ease;
  -o-transition: height 0.6s ease;
  transition: height 0.6s ease;
}

.verticalObjectif .progress-barObjectif {
  height: 100px;
  width: 40px;
  display: inline-block;
  margin: 0 5px;
  font-size: 12px;
  text-align: center;
}

.progress-barObjectif .progress-trackObjectif {
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #ebebeb;
  position: relative;
}

.verticalObjectif .progress-fillObjectif {
    width: 100%;
    color: #fff;
    text-align: center;
    position: absolute;
    z-index: 0;
    bottom: 0;
}

.verticalObjectif span {
    position: absolute;
    z-index: 1;
    top: 50%;
    width: inherit;
    left: 0;
    transform: translateY(-50%);
}
.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 116px auto;
}
@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
.element-clignote  {
   animation-duration: .8s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}