/*
 <div class="wrapper">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

#logoWaitingSpinner
 */

body {
	transition: opacity 500ms;
	-webkit-transition: opacity 500ms;
    background-color: white;
}



#logoWaitingSpinnerContain,
#logoWaitingSpinnerContainIndex {
    display: block;
    height: 100vh;
    width: 100vw;
    /* background-color: #000; */
    position: fixed;
    /* z-index: 9999999; */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#logoWaitingSpinner, 
#logoWaitingSpinnerIndex {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    /*background: #212121;*/
}

#logoWaitingSpinner .wrapper,
#logoWaitingSpinnerIndex .wrapper {
	width: 20vmin;
    height: 20vmin;
	font-size: 20vmin;
}
  
#logoWaitingSpinner ul,
#logoWaitingSpinnerIndex ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    -webkit-animation: logoWaitingSpinner-rot 5s linear infinite;
    animation: logoWaitingSpinner-rot 5s linear infinite;
}

@-webkit-keyframes logoWaitingSpinner-rot {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes logoWaitingSpinner-rot {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#logoWaitingSpinner li,
#logoWaitingSpinnerIndex li {
    width: 120px;
    height: 120px;
    /*background: #651FFF;*/
    border-radius: 0% 100% 0%;
    /*box-shadow: 0 0 1px #fff, 0 0 5px #651FFF, 0 0 10px #651FFF, 0 0 15px #651FFF, 0 0 25px #651FFF, 0 0 55px #651FFF;*/
    /*box-shadow: 0 0 1px #fff, 0 0 5px #29b4c2, 0 0 10px #29b4c2, 0 0 15px #29b4c2, 0 0 25px #29b4c2, 0 0 55px #29b4c2;*/
    /*box-shadow: 0 0 1px #fff, 0 0 5px #888, 0 0 10px #888, 0 0 15px #888, 0 0 25px #888, 0 0 55px #888;*/
    -webkit-animation: logoWaitingSpinner-scale 0.5s ease-in-out alternate infinite;
    animation: logoWaitingSpinner-scale 0.5s ease-in-out alternate infinite;
    font-size: 0;
    margin: -32px;
    /*background-image: url("../img/fade-cmode0.png");
    background-repeat: no-repeat;*/
    /*display: block;
    position: absolute;*/
}

@-webkit-keyframes logoWaitingSpinner-scale {
    100% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 0;
    }
}

@keyframes logoWaitingSpinner-scale {
    100% {
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0;
    }

}


/*
#logoWaitingSpinner li:nth-child(1), 
#logoWaitingSpinner li:nth-child(6),
#logoWaitingSpinner li:nth-child(11),
#logoWaitingSpinner li:nth-child(16),
#logoWaitingSpinner li:nth-child(21) {
    background-position-x: 0px;
}

#logoWaitingSpinner li:nth-child(2),
#logoWaitingSpinner li:nth-child(7),
#logoWaitingSpinner li:nth-child(12),
#logoWaitingSpinner li:nth-child(17),
#logoWaitingSpinner li:nth-child(22) {
    background-position-x: -62px;
}

#logoWaitingSpinner li:nth-child(3),
#logoWaitingSpinner li:nth-child(8),
#logoWaitingSpinner li:nth-child(13),
#logoWaitingSpinner li:nth-child(18),
#logoWaitingSpinner li:nth-child(23) {
    background-position-x: -124px;
}

#logoWaitingSpinner li:nth-child(4),
#logoWaitingSpinner li:nth-child(9),
#logoWaitingSpinner li:nth-child(14),
#logoWaitingSpinner li:nth-child(19),
#logoWaitingSpinner li:nth-child(24) {
    background-position-x: -186px;
}

#logoWaitingSpinner li:nth-child(5),
#logoWaitingSpinner li:nth-child(10),
#logoWaitingSpinner li:nth-child(15),
#logoWaitingSpinner li:nth-child(20),
#logoWaitingSpinner li:nth-child(25) {
    background-position-x: -248px;
}


#logoWaitingSpinner li:nth-child(1), 
#logoWaitingSpinner li:nth-child(2),
#logoWaitingSpinner li:nth-child(3),
#logoWaitingSpinner li:nth-child(4),
#logoWaitingSpinner li:nth-child(5) {
    background-position-y: 0px;
}

#logoWaitingSpinner li:nth-child(6),
#logoWaitingSpinner li:nth-child(7),
#logoWaitingSpinner li:nth-child(8),
#logoWaitingSpinner li:nth-child(9),
#logoWaitingSpinner li:nth-child(10) {
    background-position-y: -62px;
}

#logoWaitingSpinner li:nth-child(11),
#logoWaitingSpinner li:nth-child(12),
#logoWaitingSpinner li:nth-child(13),
#logoWaitingSpinner li:nth-child(14),
#logoWaitingSpinner li:nth-child(15) {
    background-position-y: -124px;
}

#logoWaitingSpinner li:nth-child(16),
#logoWaitingSpinner li:nth-child(17),
#logoWaitingSpinner li:nth-child(18),
#logoWaitingSpinner li:nth-child(19),
#logoWaitingSpinner li:nth-child(20) {
    background-position-y: -186px;
}

#logoWaitingSpinner li:nth-child(21),
#logoWaitingSpinner li:nth-child(22),
#logoWaitingSpinner li:nth-child(23),
#logoWaitingSpinner li:nth-child(24),
#logoWaitingSpinner li:nth-child(25) {
    background-position-y: -248px;
}
*/


#logoWaitingSpinner li:nth-child(1) {
    z-index: 24;
}
#logoWaitingSpinner li:nth-child(2) {
    z-index: 23;
}
#logoWaitingSpinner li:nth-child(3) {
    z-index: 22;
}
#logoWaitingSpinner li:nth-child(4) {
    z-index: 21;
}
#logoWaitingSpinner li:nth-child(5) {
    z-index: 20;
}
#logoWaitingSpinner li:nth-child(6) {
    z-index: 19;
}
#logoWaitingSpinner li:nth-child(7) {
    z-index: 18;
}
#logoWaitingSpinner li:nth-child(8) {
    z-index: 17;
}
#logoWaitingSpinner li:nth-child(9) {
    z-index: 16;
}
#logoWaitingSpinner li:nth-child(10) {
    z-index: 15;
}
#logoWaitingSpinner li:nth-child(11) {
    z-index: 14;
}
#logoWaitingSpinner li:nth-child(12) {
    z-index: 13;
}
#logoWaitingSpinner li:nth-child(13) {
    z-index: 12;
}
#logoWaitingSpinner li:nth-child(14) {
    z-index: 11;
}
#logoWaitingSpinner li:nth-child(15) {
    z-index: 10;
}
#logoWaitingSpinner li:nth-child(16) {
    z-index: 9;
}
#logoWaitingSpinner li:nth-child(17) {
    z-index: 8;
}
#logoWaitingSpinner li:nth-child(18) {
    z-index: 7;
}
#logoWaitingSpinner li:nth-child(19) {
    z-index: 6;
}
#logoWaitingSpinner li:nth-child(20) {
    z-index: 5;
}
#logoWaitingSpinner li:nth-child(21) {
    z-index: 4;
}
#logoWaitingSpinner li:nth-child(22) {
    z-index: 3;
}
#logoWaitingSpinner li:nth-child(23) {
    z-index: 2;
}
#logoWaitingSpinner li:nth-child(24) {
    z-index: 1;
}
#logoWaitingSpinner li:nth-child(25) {
    z-index: 0;
}

#logoWaitingSpinner li:nth-child(1) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#logoWaitingSpinner li:nth-child(7) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#logoWaitingSpinner li:nth-child(13) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#logoWaitingSpinner li:nth-child(19) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
#logoWaitingSpinner li:nth-child(24) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
#logoWaitingSpinner li:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#logoWaitingSpinner li:nth-child(8) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#logoWaitingSpinner li:nth-child(14) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#logoWaitingSpinner li:nth-child(20) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#logoWaitingSpinner li:nth-child(3) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#logoWaitingSpinner li:nth-child(9) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#logoWaitingSpinner li:nth-child(15) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
#logoWaitingSpinner li:nth-child(4) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#logoWaitingSpinner li:nth-child(10) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#logoWaitingSpinner li:nth-child(5) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#logoWaitingSpinner li:nth-child(1) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#logoWaitingSpinner li:nth-child(6) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#logoWaitingSpinner li:nth-child(11) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#logoWaitingSpinner li:nth-child(16) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#logoWaitingSpinner li:nth-child(21) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#logoWaitingSpinner li:nth-child(7) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#logoWaitingSpinner li:nth-child(12) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#logoWaitingSpinner li:nth-child(17) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#logoWaitingSpinner li:nth-child(22) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#logoWaitingSpinner li:nth-child(13) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#logoWaitingSpinner li:nth-child(18) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#logoWaitingSpinner li:nth-child(23) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
#logoWaitingSpinner li:nth-child(19) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
#logoWaitingSpinner li:nth-child(24) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#logoWaitingSpinner li:nth-child(25) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}


.lds-spinner {
	display: inline-block;
	position: relative;
	width: 1em;
	height: 1em;
  }
  .lds-spinner div {
	transform-origin: 0.5em 0.5em;
	animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner div:after {
	content: " ";
	display: block;
	position: absolute;
    top: 0.0469em;
    left: 0.453em;
    width: 0.0781em;
    height: 0.2188em;
	border-radius: 10%;
	/*background: #80D0FF;*/
	background:#0073F1;
  }
  .lds-spinner div:nth-child(1) {
	transform: rotate(0deg);
	animation-delay: -1.1s;
  }
  .lds-spinner div:nth-child(2) {
	transform: rotate(30deg);
	animation-delay: -1s;
  }
  .lds-spinner div:nth-child(3) {
	transform: rotate(60deg);
	animation-delay: -0.9s;
  }
  .lds-spinner div:nth-child(4) {
	transform: rotate(90deg);
	animation-delay: -0.8s;
  }
  .lds-spinner div:nth-child(5) {
	transform: rotate(120deg);
	animation-delay: -0.7s;
  }
  .lds-spinner div:nth-child(6) {
	transform: rotate(150deg);
	animation-delay: -0.6s;
  }
  .lds-spinner div:nth-child(7) {
	transform: rotate(180deg);
	animation-delay: -0.5s;
  }
  .lds-spinner div:nth-child(8) {
	transform: rotate(210deg);
	animation-delay: -0.4s;
  }
  .lds-spinner div:nth-child(9) {
	transform: rotate(240deg);
	animation-delay: -0.3s;
  }
  .lds-spinner div:nth-child(10) {
	transform: rotate(270deg);
	animation-delay: -0.2s;
  }
  .lds-spinner div:nth-child(11) {
	transform: rotate(300deg);
	animation-delay: -0.1s;
  }
  .lds-spinner div:nth-child(12) {
	transform: rotate(330deg);
	animation-delay: 0s;
  }
  @keyframes lds-spinner {
	0% {
	  opacity: 1;
	}
	100% {
	  opacity: 0;
	}
  }



  
.progressBarContainer {
    font-size: 2vmin;
    width:100%;
    height: 1.5em;
}

.progressBarBacklayer {
    width: 100%;
    height: 100%;
    background: #AAA;
    border-radius: 1em;
    border:solid 0.3em #FFF;
    position: relative;
}

.progressBarTextlayer {
    width: 4em;
    height: 100%;
    right: 0;
    position: absolute;
    color: #FFF;
}

.progressBarTextValue {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 0.85em;
    position: absolute;
    margin: 0.05em 0;
    left: -0.15em;
    font-size: 0.9em;
}

.progressBarLineLayer {
    width: calc(100% - 4em);
    height: 1.5em;
    position: absolute;
    background: #DDD;
    border-radius: 1em;
    border: solid 0.3em #FFF;
    left: -0.3em;
    top: -0.3em;
    overflow: hidden;
}

.progressBarLineLevel {
    width: 100%;
    height:100%;
	background: #00AAFF;
}

.progressBarLineLevelStripes {
	background-image: linear-gradient(45deg,rgba(0,0,0,.05) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.05) 75%,transparent 75%,transparent);
	background-size: 1rem 1rem;
	animation: progressBarLineStripes 1s linear infinite;	
}

@keyframes progressBarLineStripes {
	0% {
		background-position: 1rem 0;
	}
	100% {
		background-position: 0 0;
	}
}


/*
    background: linear-gradient(to right, rgba(0,115,241,1) 0%,rgba(0,115,241,1) 40%,rgba(158,197,239,1) 50%,rgba(0,115,241,1) 60%,rgba(0,115,241,1) 100%);
    background-repeat: repeat-x;
    background-size: 50%;
    background-position: 0%;
    animation: progressBarLineLevelAnimate 0.5s linear infinite;
}

@keyframes progressBarLineLevelAnimate {
    100% {
        background-position: 100%;
    }
}

*/




#messageBoxLogin-modal .ui-dialog-buttonset,
#messageBoxLogin ui-dialog-buttonset {
	margin-right: 0.6em;
}

#messageBoxLogin-username-container {
	margin-bottom: 1em;
}

#messageBox-text-container,
#messageBoxStandby-text-container {
	font-size: 100%;
	padding-bottom: 1em;
}

.ui-button:not(:last-child):not(.ui-dialog-titlebar-close) {
	/*background: #DDD;*/
	background: #EEE;
	color: #000;
	border: solid 0.1em #DDD !important;
}

.ui-button:last-child:not(.ui-dialog-titlebar-close) {
	/*background: #0073ea;*/
	background: #0073ea;
	color: #FFF;
	border: solid 0.1em #0073ea !important;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

.ui-button:not(.ui-dialog-titlebar-close):hover {
	border-color: #0073F1 !important;
    background: #FFF !important;
    color: #0073ea !important;
}

.ui-button:focus,
input[type="text"],
input[type="password"],
input[type="email"] {
	outline-color: #0073F1 !important;
}

#messageBoxLogin-error {
	margin-top: 1em;
	padding: 2vmin;
	/*height: 3vw;*/
	line-height: 3vw;
	background-color: #FFE0E0;
}

.btn.btn-primary:not(:last-child) {
	background: #EEE;
	color: #000;
	border: solid 0.1em #DDD !important;
}

.btn.btn-primary:last-child {
	background: #0073ea;
	color: #FFF;
	border: solid 0.1em #0073ea !important;
}

.btn.btn-primary:hover {
	border-color: #0073F1 !important;
    background: #FFF !important;
    color: #0073ea !important;
}
#bodyBlurBackground {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: transparent;
    /*z-index: 100000; /* désactivé car inutile -> empèche le clic sur la boite de dialogue sur IE11, pas d'effet de bord sur les autres plateformes */
    pointer-events: all;
}