/**
 * CSS Module EstelUI
 * @author : ESTEL (Geoffrey BOULANGER)
 * @createdAt : 12/04/22
 **/

 /**
  * ----------------------
  * Plugin jQuery loader
  * ----------------------
  **/
.estel-loader-hide {
	display: none;
}

.estel-loader-spinner {
  	display: flex;
  	width: 100%;
  	height: 100%;
  	margin-left: 45%;
}

.estel-loader-spinner > div {
  background-color: #36adc5;
  height: 100%;
  width: 6px;
  height: 50px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
  margin-left: 2px;
}

.estel-loader-spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.estel-loader-spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.estel-loader-spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.estel-loader-spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.estel-loader .ui-dialog-titlebar.ui-widget-header.ui-helper-clearfix.ui-draggable-handle {
	display:none;
}

.estel-loader #dialog {
	overflow: hidden;
}

.estel-loader-spinner #dialog .estel-loader-spinner {

}

/**
* ----------------------
* Plugin jQuery tooltip
* ----------------------
**/

.estel-tooltip {
	position: absolute;
	width: 200px;
	height: 200px;
	border: 1px solid #00acd9;
	border-radius: 7px;
	z-index: 100;
	opacity: 1;
	background-color: #FFF;
}

.estel-tooltip-center {
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -50px;
	margin-top: -50px;
}

.estel-tooltip-hide {
  display: none;
}

.estel-tooltip-show {
  display: inherit;
}

.navigate-cbbox-prev button, .navigate-cbbox-next button {
	padding: 0px;
	margin:0px;
}

.navigate-cbbox-prev button[disabled], .navigate-cbbox-next button[disabled] {
	opacity:0.2;
	cursor: default;
}

button span.arrow_left {
	display: block;
	width: 30px;
	height: 28px;
	background-image: url('../images/fleche_gauche.png');
	background-repeat: no-repeat;
	background-position: center;
}

button span.arrow_right {
	display: block;
	width: 30px;
	height: 28px;
	background-image: url('../images/fleche_droite.png');
	background-repeat: no-repeat;
	background-position: center;
}

/** 
Graphe Index
**/

#graphe_index{
	margin-left:-40px;
	width:120%;
}

#graphe_index div[id^='barchart'] {
	text-align:left;
	width: 39%;
	height: 25px;
	display:inline-block;
	margin-left: 20px;
}

#graphe_index  {
    list-style-type: none;
}

#graphe_index div[id^='barchart'] .sep {
	width: 25%;
	display: inline-block;
}

#graphe_index div[id^='barchart'] .barreIndex {
	border-bottom: 3px solid White;
	display: inline-block;
	height: 100%;
	background-color: #00acd9;
	text-align: right;
	color: black;
	padding-top: 1px;
}

#graphe_index div[id^='barchart'] .barreIndexPositif {
	border-left: 1px solid black;
}

#graphe_index div[id^='barchart']  .barreIndexNull {
	width:0%;
	height: 100%;
	padding-right: 0;	
}

#graphe_index div[id^='barchart']  .barreIndexNull label {
	display:none;
}

#graphe_index div[id^='barchart']  .barreSousIndex {
	min-height: 25px;
	background-color: #b5c6e2;
	height: 100%;
}

#graphe_index div[id^='barchart']   .barreSousIndexMedian {
	padding-left:0px
}

#graphe_index div[id^='barchart']  .blocBarreIndexNegatif {
	position: relative;
	display:inline-block;
	width:71%;
	height:25px;
	text-align:right;
}

#graphe_index div[id^='barchart']  .barreIndexNegatif {
	border-bottom: 3px solid White;
	min-height: 25px;
	background-color: #b5c6e2;
	border-right: 1px solid black;
	text-align: left;
	color: black;
	height: 100%;
	padding-top: 1px;
	width: 40%;
	margin-right: -5px;	
}

#graphe_index div[id^='barchart'] .labelIndex {
	margin-left: 0px;
	padding-right: 5px;
	padding-left:5px;
}

#graphe_index div[id^='barchart']  .labelIndexDecaleDroite {
	margin-left: 20px;
}

#graphe_index div[id^='barchart']  .labelIndexDecaleGauche {
	margin-left: -30px;
}

button:not(.ui-button).plus_graphe {	
	display: inline-block;
	background: rgb(192, 210, 93);
}

#graphe_index div[id^='noeud'] {
	height: 25px;
	font-weight:600;
  }
.libIndex{
	width:47%;
}

#graphe_index div[id^='noeud'] .libIndex {
	display: inline-block;
	height: 25px;
	text-align: right;  
}

#graphe_index div[id^='sous'] li div .libSousIndex {
  display: inline-block;
  height: 25px;
  text-align: right;  
}

/**
* ----------------------
* Switch Oui/Non
* ----------------------
**/
.switch {
  position: relative;
  display: inline-block;
  width: 83px;
  height: 27px;
}

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

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

.switch input {
	display:none;
}

.switch input:checked + .slider {
  background-color: #00ADD9;
}

.switch input[readonly] + .slider {
	background-color: #E7E6E4;
  }

.switch input:checked + .slider .on {
	display: block;
}

.switch input:checked + .slider .off {
	display: none;
}

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

.switch .slider .on {
  display: none;
}

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

.switch .slider .on, .switch .slider .off {
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 15px;
  font-weight : bold
}

.switch .slider.round {
  border-radius: 34px;
}

.switch .slider.round:before {
  border-radius: 50%;
}

@media (min-device-width: 479px) {
	#graphe_index div[id^='sous']{
		padding-left:52px;
	}
}

/*
* FORMAT MOBILE
*/
@media (max-device-width: 800px) and (orientation: portrait) {
	/* Optimisation pour perdre moins d'espace */
	#main {
		padding-left: 10px !important;
    	padding-right: 10px !important;
	}

	/*Colonne sur 2 lignes si nécessaire*/
	table.ui-jqgrid-htable tr th.ui-th-column div {
		white-space: normal !important;
		height: auto !important;
		padding: 2px;
	}
}