html {overflow-y: scroll;}

@font-face {
font-family: 'Nunito';
src: url('../font/Nunito-Light.ttf');
}
@font-face {
font-family: 'Courgette';
src: url('../font/Courgette-Regular.ttf');
}
#login-page {
	height: 100%;	
}


@media only screen and (min-width: 760px){
   
            .ui-page {        
                margin: 0 auto !important;
                position: relative !important;
                -webkit-border-radius: 0;
    			border-radius: 0;
   				font-family: Arial,Helvetica,sans-serif;
   				font-size: 14px;
   				overflow-y:hidden;
   				
               
            }
            .ui-footer {
                margin: 0 auto !important;         
            }
            .ui-header {
              	margin: 0 auto !important;        
            }    
        }
   
   
   
   /* Basic settings */
.ui-li-static.ui-collapsible {
    padding: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-content > .ui-listview,
.ui-li-static.ui-collapsible > .ui-collapsible-heading {
    margin: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-content {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    border-bottom-width: 0;
}
/* collapse vertical borders */
.ui-li-static.ui-collapsible > .ui-collapsible-content > .ui-listview > li.ui-last-child,
.ui-li-static.ui-collapsible.ui-collapsible-collapsed > .ui-collapsible-heading > a.ui-btn {
    border-bottom-width: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-content > .ui-listview > li.ui-first-child,
.ui-li-static.ui-collapsible > .ui-collapsible-content > .ui-listview > li.ui-first-child > a.ui-btn,
.ui-li-static.ui-collapsible > .ui-collapsible-heading > a.ui-btn {
    border-top-width: 0;
}
/* Remove right borders */
.ui-li-static.ui-collapsible > .ui-collapsible-heading > a.ui-btn,
.ui-li-static.ui-collapsible > .ui-collapsible-content > .ui-listview > .ui-li-static,
.ui-li-static.ui-collapsible > .ui-collapsible-content > .ui-listview > li > a.ui-btn,
.ui-li-static.ui-collapsible > .ui-collapsible-content {
    border-right-width: 0;
}
/* Remove left borders */
/* Here, we need class ui-listview-outer to identify the outermost listview */
.ui-listview-outer > .ui-li-static.ui-collapsible .ui-li-static.ui-collapsible.ui-collapsible,
.ui-listview-outer > .ui-li-static.ui-collapsible > .ui-collapsible-heading > a.ui-btn,
.ui-li-static.ui-collapsible > .ui-collapsible-content {
    border-left-width: 0;
}

.dataTables_filter {
    position: relative;
    top: 36px;
  }   
        
 .ui-icon-myicon:after {
	background-image: url("images/flechePleine.png");
	background-size: 14px 10px;
}
.ui-datepicker {
	width:150px;
	font-size:10px;
}
select {
  color: black;
}
.ui-btn, label.ui-btn {
font-weight: normal;
}

.ui-icon-check:after, html .ui-btn.ui-checkbox-on.ui-checkbox-on:after {
background-color: #474747;
}

.ui-icon-check:after, html .ui-btn.ui-checkbox-off.ui-checkbox-off:after {
background-color: #474747;
}

.ui-btn-icon-left:after
 {
background-color: transparent;
}

.ui-mini .ui-btn {
font-size: 14px;
}
.ui-collapsible-set {
   margin: 0; 
}
QoSValue > .ui-btn-icon-left:after{
	background-color: blue;
}

.ui-header-fixed {
padding-top: 0;
}
.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-right.ui-panel-content-wrap-open, .ui-panel-dismiss-position-right.ui-panel-dismiss-open {
right: 0;
}
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
right: 0;
}
.ui-panel-display-overlay {
z-index: 999;
top:48px;
width:210px;
}
.ui-panel-dismiss-open.ui-panel-dismiss-position-left {
left: 210px;
}
.ui-panel-inner {
    padding: 0;
}
.ui-page-active.ui-page-panel {
 overflow-x: initial; 
}

.ui-mobile .ui-page-active {
overflow-x: initial;
}
.ui-panel {
/* pour supprimer scrollbar vert sous IE */
min-height: 30px;
}
.ui-panel .ui-collapsible-set {
 margin:0;
}
   /* 
.ui-listview>.ui-li-static {
	padding: 0;
}
 */
.custom-label-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on {
    text-indent: -3.4em;
}
.custom-label-flipswitch.ui-flipswitch .ui-flipswitch-off {
    text-indent: 0.5em;
}
body.ui-mobile-viewport, div.ui-mobile-viewport {
overflow: initial;
}
.ui-slider-switch .ui-slider-label {
font-size: 14px;
font-weight:normal;
}



.ui-page-theme-a .ui-slider-track .ui-btn-active,  html .ui-body-a .ui-slider-track .ui-btn-active {
	background-color: #f6f6f6; 
	border-color: #f6f6f6; 
	color: black;
}

.ui-bar-c {
border-color: #CFCFCF;
background: #D3D3D3;
}
.rowSelectable {
	cursor:pointer;
}
.rowFiltered {
	background-color : #dcdadd !important;
		color: white !important;
}

.rowNotFiltered {
	background-color : white !important;
	color: black;
}

.drawerHeader {
	cursor:pointer;
	background: #1976D2;
    color: #ffffff;
    display: block;
    margin: auto;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    width: 150px;
    -moz-border-radius-topleft: 25px 40px;
    -moz-border-radius-topright: 25px 40px;
    border-top-left-radius: 25px 40px;
    border-top-right-radius: 25px 40px;
    
}
 /* 
------------------------------------------------------------------------*/

.circle { 
   width: 20px;
   height: 20px;
   background: #D8D8D8; 
   -moz-border-radius: 20px; 
   -webkit-border-radius: 20px; 
   border-radius: 20px;
   font-size:12px;
   padding-left:4px;
   padding-top:4px;
   margin-top:4px;
}

.zone {
	float:left;
	background: #f6f6f6;
	margin-top: 10px;
	width:100%;
}

.labelZone {	
		padding-top:5px;
		padding-left:5px;
		margin: 3px;	
}

.labelSubZone {	
		padding-top:5px;
		padding-left:10px;
		margin: 3px;	
		color:grey;
}


.labelZoneClear {
	clear:both;	
}

.inputZone {
	margin-left: 3px;
	float:left;
	width:100%;
	padding-right:17px;
	margin-left:10px;
}
.inputZoneAddress {
	float:left;
	margin-right: 50px;
	width:100%;
}

.inputZoneAddress > .ui-input-text   {
margin:0;
}

.addButtonZone {
	float:right;
	padding-right:10px;
	font-size:26px;
	
}

.zoneHeader {
border:0;
top:43px;
width:100%;
background:#BBDEFB;
clear:both;
color:#143556;
line-height:25px;
height: 50px;
padding-right:0;
padding-left:0
}

.horizontalLine {
	
	clear:both;
	border: 1px #ACACAC solid; 
	height:1px;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.footerName {
	text-overflow: ellipsis;
	width:inherit;
}
.module {
cursor: pointer;
text-decoration: none;
float: left;
width: 120px;
height: 100px;
margin: 2px 2px;
overflow: hidden;
text-overflow: ellipsis;
border-style: solid;
border-width: 1px;
border-color: #c7c7c7;
background: #f3c830;
font-size: 16px;
color: #143556;
font-weight: normal;
white-space: normal;
text-decoration: none;
text-align:center;

}
.start-menu-config {
	background:#1976D2;
	color:white;
}
.start-menu-config:hover {
	background: #BBDEFB;
	color:#143556;
}
.moduleTBD {
	background:#1976D2;
	color:#8ACFEC;
}

.moduleTBD:hover {
	background: #BBDEFB;
	color:#143556;
}


.moduleLarge {
cursor: pointer;
text-decoration: none;
float: left;
width: 243px;
height: 50px;
line-height:50px;
margin: 2px 2px;
overflow: hidden;
text-overflow: ellipsis;
background: #BBDEFB;
font-size: 16px;
color: #143556;
font-weight: normal;
white-space: normal;
text-decoration: none;
text-align:center;

}



.detailListText{
    margin: 0 0 0 20px;
}

.checkBoxLeft{
    position: absolute; 
    left: 10px; 
    top: 28%;
    width: 18px;
    height: 18px;
    background: #d9d9d9;
    border-radius: 3px;  
}

.hidden-checkbox {
    display: none;
}


.not-checked {
    background-position: 18px 0;   
    background-color:#d9d9d9;
}


.checked {
    background-position: 0 0;   
    background-color:#6496bc;    
}

 
 .ui-bar h2 {
	display: inherit;
}

a:link{
	text-decoration:none
}

.ui-content {
	padding: 0;
	overflow: hidden;
}

h2 {
  font-size: 16px;
}
.buttonHeight {
	padding: .3em 1em;
}

.ui-fixed-hidden {
position: fixed;
}

.contentZone {
	padding-right:5px;
	padding-left:5px
}

.iconmenu {
	padding-right:6px;
}

.iconmenuheader {
	width:50px;
	text-align: center;
	font-size:26px;
	cursor: pointer;
	color:white;
	padding-top:8px
}
.hiddenZone	{
	display:none;
}

.menuDisplay {
 	width: 260px;
 }
 
 .dataDisplay {
 	width:70%;
 	max-width:590px;
 }

.iconDisplay {
 	visibility: hidden;
 	width:0px;	
 }
 
.ui-collapsible-heading-toggle {
	padding-top:0;
	padding-bottom:0;
}
 
 .logoHeader {
 	visibility: visible;
 	float:left;
 	width:70px;
 	cursor: pointer;
 	
 }
 
 .logoHeaderIqoya {
 	visibility: visible;	
 }
 
 .twolines {
 	clear:none;
 }
 
 .monitor-righttable {
	max-width:265px;
	margin-left: 0px;
	margin-right: 0px;
	padding-top:11px;
}	


.monitor-streamDisplay {
	width:970px;
	
	
}	

.zoneSubHeader {
	padding-left:48px;	
}

.hiddenIfSmartphone{
	 	visibility: visible;
	 	display:block;
	 	position: inherit;

}
.hiddenIfSmall{
		visibility: visible;
	 	display:block;
}
.showIfSmartphone{
	 	visibility: hidden;
		position: fixed;
}

.monitorallequipmentslistzone {
	margin-left:0px;
}

/* The element to apply the animation to */
.monitorStreamVal1 {
	animation: monitorStreamVal1Animation 5s cubic-bezier(0,1.7,0,1.89) 0s infinite;
	 
	 
/*    animation-name: monitorStreamVal1Animation;
        animation-iteration-count: infinite;
     -webkit-animation-iteration-count:infinite;
    animation-duration: 5s;*/
}

.monitorStreamVal2 {
 animation: monitorStreamVal2Animation 5s cubic-bezier(0,1.7,0,1.89) 0s infinite;
	
}
.informationPostit {
	clear:both;
	float:left;
	text-align:left;
	color:#9A9A9A;
	width:250px;
	overflow: hidden;
    text-overflow: ellipsis;
}

.informationPostitmsg {
	width:240px;
	overflow: hidden;
    text-overflow: ellipsis;
}

.dynamicInformationPresence {
	clear:both;
	float:left;
	padding-left:15px;
	text-align:left;
	color:#9A9A9A;
}

.monitorZone {
	width:1245px;
}

.alertTextArea {
	width:240px;
	padding-top:5px;
	height: 30px;
	overflow: hidden;
    text-overflow: ellipsis;
}
.alertHeaderTextArea {
	width:780px;
	padding-top:5px;
	height: 30px;
	overflow: hidden;
    text-overflow: ellipsis;
}

.alertHeaderExtreme {
	width:78px;
}

.monitorinformationDetailName {
	width:190px;
}
	
#monitor-informationDisplaySmall {
	  padding-bottom: 7px;
	
}	
#monitor-informationDisplayLarge {
	  visibility: visible;
}

#informationZoneLargeScreen {
	display:block;
}
	

@media only screen and (min-width:2000px) {
	
	.informationPostit {
	clear:both;
	float:left;
	text-align:left;
	color:#9A9A9A;
	width:250px;
	overflow: hidden;
    text-overflow: ellipsis;
}
.informationPostitmsg {
	width:240px;
	overflow: hidden;
    text-overflow: ellipsis;
}
	.monitor-streamDisplay {
		width:1925px;
	}
		.monitorinformationDetailName {
		width:190px;
	}
	.dynamicInformationPresence {
		clear:both;
		float:left;
		padding-left:15px;
		text-align:left;
		color:#9A9A9A;
	}
	.monitorZone {
		width:2700px;
	}
.monitor-righttable {
		width: 555px;
		max-width:650px;
		margin-right: 14px;
		padding-top:10px;
	}	
	
	.dynamicInformationPresence {	
		clear:none;
		float:right;
		text-align:right;
		color:#9A9A9A;
		padding-left:0px;
	}
	.alertHeaderExtreme {
		width:17px;
	}
	.alertTextArea {
		width:780px;
		padding-top:10px;
	
	}
	#monitor-informationDisplaySmall {
	  visibility: visible;
		height:inherit;
		padding-bottom: 7px;
		width:275px;
	
	}
	
	#monitor-contactDisplay {
		width:275px;
		padding-left:20px;
		float:left;
	}	
	#monitor-informationDisplayLarge {
	  visibility: hidden;
	}

	#informationZoneLargeScreen {
		display:none;
	}
	
	
	.hiddenIfSmall{
		visibility: hidden;
		display:none;
	}
}

@media only screen and (max-width:2000px) {
		.informationPostit {
	clear:both;
	float:left;
	text-align:left;
	color:#9A9A9A;
	width:250px;
	overflow: hidden;
    text-overflow: ellipsis;
}
	.informationPostitmsg {
	width:240px;
	overflow: hidden;
    text-overflow: ellipsis;
}
	.monitor-streamDisplay {
		width:970px;
	}
	.monitorinformationDetailName {
		width:190px;
	}
	.monitorZone {
		width:1600px;
	}

	.monitor-righttable {
		width: 555px;
		max-width:650px;
		margin-right: 14px;
		padding-top:10px;
	}	
	
	.dynamicInformationPresence {	
		clear:none;
		float:right;
		text-align:right;
		color:#9A9A9A;
		padding-left:0px;
	}
	.alertHeaderExtreme {
		width:17px;
	}
	.alertTextArea {
		width:780px;
		padding-top:10px;
	
	}
	#monitor-informationDisplaySmall {
	  visibility: visible;
		height:inherit;
		padding-bottom: 7px;
		width:275px;
	
	}
	
	#monitor-contactDisplay {
		width:275px;
		padding-left:20px;
		float:left;
	}	
	#monitor-informationDisplayLarge {
	  visibility: hidden;
	}

	#informationZoneLargeScreen {
		display:none;
	}
	
	#monitorinformationDetailSmall {
		max-height: none;
	}
	
	.hiddenIfSmall{
		visibility: hidden;
		display:none;
	}
}	

@media only screen and (max-width:1600px) {
	
		.informationPostit {
	clear:both;
	float:left;
	text-align:left;
	color:#9A9A9A;
	width:250px;
	overflow: hidden;
    text-overflow: ellipsis;
}
	
	.informationPostitmsg {
	width:240px;
	overflow: hidden;
    text-overflow: ellipsis;
}
	.monitor-streamDisplay {
		width:970px;
	}
	.monitorinformationDetailName {
		width:190px;
	}
	.monitorZone {
		width:1250px;
	}
	.monitor-righttable {
		width: inherit;
		max-width:250px;
		margin-right: 14px;
		padding-top:10px;
	}	
	.dynamicInformationPresence {	
		clear:none;
		float:right;
		text-align:right;
		color:#9A9A9A;
		padding-left:0px;
	}
	.alertHeaderExtreme {
		width:17px;
	}
	.alertTextArea {
		width:780px;
		padding-top:10px;
	
	}
	#monitor-informationDisplaySmall {
	  visibility: visible;
		height:inherit;
		padding-bottom: 7px;
		width:275px;
	
	}
	#monitorinformationDetailSmall {
		max-height: 250px;
	}
	
	#monitor-contactDisplay {
		width:275px;
		padding-left:0px;
		float:left;
		clear:both;
	}	
	#monitor-informationDisplayLarge {
	  visibility: hidden;
	}

	#informationZoneLargeScreen {
		display:none;
	}
	
	.hiddenIfSmall{
		visibility: hidden;
		display:none;
	}
}	

@media only screen and (max-width:1240px) {
	
		.informationPostit {
	clear:both;
	float:left;
	text-align:left;
	color:#9A9A9A;
	width:900px;
	overflow: hidden;
    text-overflow: ellipsis;
}
	
	.informationPostitmsg {
	width:880px;
	overflow: hidden;
    text-overflow: ellipsis;
}
	.monitor-streamDisplay {
		width:970px;
	}
	
	.monitorinformationDetailName {
		width:240px;
	}
	.monitorZone {
		width:970px;
	}
	.monitor-righttable {
		width: 100%;
		max-width:937px;
		margin-left: 14px;
		margin-right: 14px;
		padding-top:10px;
	}	
	.dynamicInformationPresence {	
		clear:none;
		float:right;
		text-align:right;
		color:#9A9A9A;
		padding-left:0px;
	}
	.alertHeaderExtreme {
		width:17px;
	}
	.alertTextArea {
		width:780px;
		padding-top:10px;
	
	}
	#monitor-informationDisplaySmall {
	  visibility: visible;
		height:inherit;
		padding-bottom: 7px;
		width:100%
	}	
	
	#monitor-contactDisplay {
		width:100%;
		padding-left:0px;
		float:left;
	}
	
	#monitor-informationDisplayLarge {
	  visibility: hidden;
	}

	#informationZoneLargeScreen {
		display:none;
	}
	
	#monitorinformationDetailSmall {
		max-height: 250px;
	}
	
	.hiddenIfSmall{
		visibility: hidden;
		display:none;
	}
}	




@media only screen and (max-width:960px) {

	.informationPostit {
	clear:both;
	float:left;
	text-align:left;
	color:#9A9A9A;
	width:250px;
	overflow: hidden;
    text-overflow: ellipsis;
}
	.informationPostitmsg {
	width:240px;
	overflow: hidden;
    text-overflow: ellipsis;
}
	
.alertTextArea {
	width:240px;
	padding-top:3px;
}
.alertHeaderTextArea {
	width:230px;
	padding-top:0px;
}

.alertHeaderExtreme {
	width:13px;
}
		.monitor-streamDisplay {
			width:0px;
	}
	
	.dynamicInformationPresence {
		clear:both;
		float:left;
		padding-left:15px;
		text-align:left;
		color:#9A9A9A;
	}
	.monitorZone {
		width:100%;
	}
	.monitorStreamVal1 {
    	animation-name: initial;
    
	}
	

	.monitor-righttable {
		width: 100%;
		max-width:100%;
		margin-left: 0px;
		margin-right: 0px;
		padding-top:10px;
	}	
		.monitorallequipmentslistzone {
			margin-left:13px;
		}
	#monitorinformationDetailSmall {
		max-height: 250px;
	}
	
.footerName {
	text-overflow: ellipsis;
	width:160px;
	white-space: nowrap;
}
.hiddenIfSmartphone{
	 	visibility: hidden;
		position: fixed;
		display:none;
}

.showIfSmartphone{
	 	visibility: visible;
		position: inherit;
}
.zoneSubHeader {
	padding-left:5px;
}
.ui-page {        
   font-family: Arial,Helvetica,sans-serif;
   font-size: 14px;
}
 .logoHeader {
 	visibility: hidden;
 	width:0px;
 	padding-top:0;
 	padding-right:0;
 	padding-left:0
 }
 .menuDisplay {
 	visibility: hidden;
 	width:0px;
 	height: 0px;
 	
 }
  .iconDisplay {
 	visibility: visible;
 	width:50px;
 	
 }
  .logoHeaderIqoya {
 	visibility: hidden;	
 	width:0px;
 	padding-top:0;
 	padding-right:0;
 	padding-left:0
 }
 
 .dataDisplay {
 	width:100%;
 	max-width: 480px;
 }
 
 .twolines {
 	clear:both;
 }

}
input#monitorslider-1 {
    visibility: hidden;
}

.ui-controlgroup-horizontal .ui-controlgroup-controls>.ui-btn, .ui-controlgroup-horizontal .ui-controlgroup-controls li>.ui-btn, .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-checkbox, .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-radio, .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
    padding: 2px;
}


.bubbleTag
{
position: relative;
width: 100px;
height: 29px;

background: #B1B1B1;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
color:white;
line-height:30px;

border-top-right-radius: 5px;
border-bottom-right-radius: 5px;

}
.bubbleTag:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #B1B1B1;
display: block;
width: 0;
z-index: 1;
left: -14px;
top: 0px;
}

.bubbleTagCircle {

	border-radius: 50%;
	width: 8px;
	height: 8px; 
	position: relative;
	background:white;
	    z-index: 20;
	top:10px;
	left:-5px;
}
	

.bubbleTagDetail 
{
position: relative;
width: 145px;
height: 145px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: #143556 solid 3px;
}



.ui-slider-track {
    height: 5px;
}


.icon-rotate-135 {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.loaading {
  position: absolute;
  top: 50%;
  left: 50%;
}
.loading-bar-right {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  margin-right: 2px;
  animation: loading 1.5s ease-in-out infinite;
}
.loading-bar-right:nth-child(22) {
  background-color: white;
  animation-delay: 0;
}
.loading-bar-right:nth-child(21) {
  background-color: white;
  animation-delay: 0.09s;
}
.loading-bar-right:nth-child(20) {
  background-color: white;
  animation-delay: .18s;
}
.loading-bar-right:nth-child(19) {
  background-color: white;
  animation-delay: .27s;
}
.loading-bar-right:nth-child(18) {
  background-color: white;
  animation-delay: .36s;
}
.loading-bar-right:nth-child(17) {
  background-color: white;
  animation-delay: .45s;
}
.loading-bar-right:nth-child(16) {
  background-color: white;
  animation-delay: .54s;
}
.loading-bar-right:nth-child(15) {
  background-color: white;
  animation-delay: .63s;
}
.loading-bar-right:nth-child(14) {
  background-color: white;
  animation-delay: .72s;
}
.loading-bar-right:nth-child(13) {
  background-color: white;
  animation-delay: .81s;
}
.loading-bar-right:nth-child(12) {
  background-color: white;
  animation-delay: .90s;
}
.loading-bar-right:nth-child(11) {
  background-color: white;
  animation-delay: .99s;
}
.loading-bar-right:nth-child(10) {
  background-color: white;
  animation-delay: 1.08s;
}
.loading-bar-right:nth-child(9) {
  background-color: white;
  animation-delay:  1.17s;
}
.loading-bar-right:nth-child(8) {
  background-color: white;
  animation-delay: 1.26s;
}
.loading-bar-right:nth-child(7) {
  background-color: white;
  animation-delay: 1.35s;
}
.loading-bar-right:nth-child(6) {
  background-color: white;
  animation-delay: 1.44s;
}
.loading-bar-right:nth-child(5) {
  background-color: white;
  animation-delay: 1.53s;
}
.loading-bar-right:nth-child(4) {
  background-color: white;
  animation-delay: 1.62s;
}
.loading-bar-right:nth-child(3) {
  background-color: white;
  animation-delay: 1.71s;
}
.loading-bar-right:nth-child(2) {
  background-color: white;
  animation-delay: 1.8s;
}
.loading-bar-right:nth-child(1) {
  background-color: white;
  animation-delay: 1.89s;
}

.loading-bar {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  margin-right: 2px;
  animation: loading 1.5s ease-in-out infinite;
}
.loading-bar:nth-child(1) {
  background-color: white;
  animation-delay: 0;
}
.loading-bar:nth-child(2) {
  background-color: white;
  animation-delay: 0.09s;
}
.loading-bar:nth-child(3) {
  background-color: white;
  animation-delay: .18s;
}
.loading-bar:nth-child(4) {
  background-color: white;
  animation-delay: .27s;
}
.loading-bar:nth-child(5) {
  background-color: white;
  animation-delay: .36s;
}
.loading-bar:nth-child(6) {
  background-color: white;
  animation-delay: .45s;
}
.loading-bar:nth-child(7) {
  background-color: white;
  animation-delay: .54s;
}
.loading-bar:nth-child(8) {
  background-color: white;
  animation-delay: .63s;
}
.loading-bar:nth-child(9) {
  background-color: white;
  animation-delay: .72s;
}
.loading-bar:nth-child(10) {
  background-color: white;
  animation-delay: .81s;
}
.loading-bar:nth-child(11) {
  background-color: white;
  animation-delay: .90s;
}
.loading-bar:nth-child(12) {
  background-color: white;
  animation-delay: .99s;
}
.loading-bar:nth-child(13) {
  background-color: white;
  animation-delay: 1.08s;
}
.loading-bar:nth-child(14) {
  background-color: white;
  animation-delay: 1.17s;
}
.loading-bar:nth-child(15) {
  background-color: white;
  animation-delay: 1.26s;
}
.loading-bar:nth-child(16) {
  background-color: white;
  animation-delay: 1.35s;
}
.loading-bar:nth-child(17) {
  background-color: white;
  animation-delay: 1.44s;
}
.loading-bar:nth-child(18) {
  background-color: white;
  animation-delay: 1.53s;
}
.loading-bar:nth-child(19) {
  background-color: white;
  animation-delay: 1.62s;
}
.loading-bar:nth-child(20) {
  background-color: white;
  animation-delay: 1.71s;
}
.loading-bar:nth-child(21) {
  background-color: white;
  animation-delay: 1.8s;
}
.loading-bar:nth-child(22) {
  background-color: white;
  animation-delay: 2.7s;
}

@keyframes loading {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 6);
  }
  40% {
    transform: scale(1);
  }
}

/*------------------------------------------------------------------------*/


@keyframes monitorStreamVal1Animation {
	
0% { opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { opacity: 0.0; }


}


@keyframes monitorStreamVal2Animation {
	
		0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
    
	
    

}

/* -----------------------------------------*/


.openTiroir {
	left:0px;
	transition: 1s;
}

.closeTiroir {
	left:-147px;
	transition: 1s;
	
}
.openedTiroir {
	left:0px;	
}

.closedTiroir {
	left:-147px;
}

.openDroiteTiroir {
	left:-167px;
	transition: 1s;
}

.closeDroiteTiroir {
	left:-20px;
	transition: 1s;
	
}
.openedDroiteTiroir {
	left:-167px;	
}

.closedDroiteTiroir {
	left:-20px;
}