/* Mes applications - progress bar état téléchargement et installation des applis */
.app-list .container-progress-bar {
    display: none;      /* masqué par défaut */
    position: absolute;
    bottom: 1vmin;
    right: 1vmin;
    z-index: 4;
    width: 5vmin; 
    height: 5vmin;
}
.app-list .container-progress-bar img {
    position: absolute;
    width: 100%;
    height: 100%;
}
.progress-bar-left {
    transform: rotate3d(0, 0, 1, -180deg);
}
.progress-bar-right {
    transform: rotate3d(0, 0, 1, -180deg);
}
.value-progress-bar {
    border-radius: 1.8vmin;
    color: black;
    padding: 0.3vmin;
    display: none;
    position: absolute;
    font-size: 1.5vmin;
    bottom: 2.5vmin;
    right: 1.8vmin;
    transform: translate3d(-50%, -50%, 0);
    z-index: 10;
}
/* Effets CSS - Progress bar normal */
.breathing {
    -webkit-animation: breathing 2s ease-out infinite alternate;
            animation: breathing 2s ease-out infinite alternate;
}
@-webkit-keyframes breathing {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    25% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    60% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}
  
@keyframes breathing {
    0% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }

    25% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    60% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }
}
/* Effet CSS - Progress bar warning */
.shake {
    -webkit-animation: shake-lr 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	        animation: shake-lr 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-4-25 12:39:29
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-lr
 * ----------------------------------------
 */
@-webkit-keyframes shake-lr {
    0%,
    100% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
    }
    10% {
        -webkit-transform: rotate(8deg);
                transform: rotate(8deg);
    }
    20%,
    40%,
    60% {
        -webkit-transform: rotate(-10deg);
                transform: rotate(-10deg);
    }
    30%,
    50%,
    70% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    80% {
        -webkit-transform: rotate(-8deg);
                transform: rotate(-8deg);
    }
    90% {
        -webkit-transform: rotate(8deg);
                transform: rotate(8deg);
    }
}
@keyframes shake-lr {
    0%,
    100% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
    }
    10% {
        -webkit-transform: rotate(8deg);
                transform: rotate(8deg);
    }
    20%,
    40%,
    60% {
        -webkit-transform: rotate(-10deg);
                transform: rotate(-10deg);
    }
    30%,
    50%,
    70% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    80% {
        -webkit-transform: rotate(-8deg);
                transform: rotate(-8deg);
    }
    90% {
        -webkit-transform: rotate(8deg);
                transform: rotate(8deg);
    }
}
/* Couleurs progressbar*/
.normal {
    background-color: peachpuff;
}
.warning {
    background-color: orange;
}
.error {
    background-color: red;
}
  
  

/* Iframes */
#iframe-launch-online-app-back > img, #iframe-groupsnstudents-app-back > img {
    height: 3.5vmin;
    padding-left: 0.7vmin;
}

#iframe-launch-online-app-back,
#iframe-groupsnstudents-app-back {
	position: fixed;
	top: 0;
	left: 0;
	
}

#app-iframe-button-back {
    width: 24vmin;
    height: 3.2vmin;
    border: none;
    position: absolute;
    top: 0.4vmin;
    right: 2vmin;
    background-color: white;
    z-index: 1000;
}
#app-iframe-button-back .backbutton, #app-iframe-button-back .cross{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.2s, position 0.2s, opacity 0.2s;
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
}
#app-iframe-button-back .backbutton{
    opacity: 0;
    left: 0;
    background-image: url(../img/v3/Retour_Jocastore_2.png);
}
#app-iframe-button-back .cross{
    transform-origin: 100% 50%;
    transform: scale(1);
    background-image: url(../img/v3/Retour_Jocastore_1.png);
}
#app-iframe-button-back:hover .backbutton{
    opacity: 1;
    left: 0;
}
#app-iframe-button-back:hover .cross{
    transform: scale(0.9);
}
/* Réécrit la règle CSS de #app-ifram-button-back pour la version tablette (ne fait pas de transition avec le hover) */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    #app-iframe-button-back .backbutton {
        opacity: 1;
        left: 0;
    }
}

/* Paramètres */
#auto_connexion {
    padding: 0;
    margin:0;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}
label[for="auto_connexion"] {
    color: rgba(33, 37, 41, 0.699);
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
section.page p {
    color: black;
}
section.page > hr {
    margin-bottom: 1vmin;
}
section.page button {
    margin: 0.5vmin;
    margin-top: 0.7vmin;
}
#show_days_licences {
    font-size: smaller;
    color: black;
    background-color: orange;
    width: auto;
    display: inline-block;
    padding-left: 0.6vmin;
    padding-right: 0.6vmin;
}
#button-load-licence, #button-create-usb {
    display: block;
}
#button-disconnect {
    cursor: pointer;
}
#confirm_message button, #alert_message button {   /* RAZ de la taille des boutons du message de déconnexion et des messages */
    font-size: medium;
}
section.page_licence p {
    margin-top: 1vmin;
}

#auto_connexion {
	width: 0.9em;
	height: 0.9em;
}

section.page > hr,
section.page > div > hr {
	margin-top: 2vmin;
	margin-bottom: 2vmin;
}

#button-create-usb {
	margin-left: 0 !important;
}

#download_client > p {
	margin-bottom: 1em;
}
#parameters_usb_key {
	margin-bottom: 0.3em;
}

#version-number{
    color: #696969;
    font-size: 0.8vmin;
    position: absolute;
    left: 4vmin;
    top: 4.1vmin;
}

.app-grayed {
	filter: grayscale(1);
	/* contrast(0.7) brightness(1.3);*/
	opacity: 0.7 !important;
	/*pointer-events: none;*/
}
.app-grayed>img {
	box-shadow: 0px 0.15vmin 0.25vmin rgba(0,0,0,0.2);
}

.application-dropbar-container {
    position: absolute;
    display: block;
    width: 100%;
	height: 10.45vw;
	top: 0;
	z-index: 100;
	overflow: hidden;
}


.application-dropbar {
	position: absolute;
    display: block;	
	width: 100%;
	height: 19%;
	top: 100%;
	opacity: 0.0;
	transition: top 250ms ease-in-out, opacity 250ms ease-in-out;
	font-size: calc(13.35vw * 0.19);
}
.application-dropbar.active{
    opacity: 1;
}
.application-dropbar.active.nodrop {
	opacity: 0.5;
	pointer-events: none;
}


.application-dropbar .application-dropbar-button-left {
	position: absolute;
	top: 0;
	left: 0%;
	width: 49.5%;
	height: 100%;
}

.application-dropbar .application-dropbar-button-right {
	position: absolute;
	top: 0;
	left: 50.5%;
	width: 49.5%;
	height: 100%;
}

.application-dropbar .application-dropbar-button-left:hover,
.application-dropbar .application-dropbar-button-right:hover
{
	background-color: #29b4c2;
}

.application-dropbar .application-dropbar-button-right.force-nohover
{
	background-color: #fff;

	/*background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);*/
	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: progress-bar-stripes 1s linear infinite;	

}

.download-progress-text {
    color: #29b4c2;
    font-size: 1.5vw;
    /* mix-blend-mode: difference; */
    top: 50%;
    left: 50%;
    position: absolute;
	transform: translate3d(-50%,-50%,0);

	display: none;

	font-size: 45%;
	width: 100%;
	text-align: center;
}

.download-progress-text.standby {
/*	font-size: 45%;
	width: 100%;
	text-align: center;*/
}

.download-progress-text.progress-duration {
/*	font-size: 75%;
	width: 100%;
	text-align: center;*/
}



.download-progress-bar {
	background-color: rgba(27, 255, 146, 1);
	left: 0;
	top: 0;
	height: 100%;
	width: 48%;
	mix-blend-mode: exclusion;

	display: none;
}

.application-update {
    width: 2vw;
    height: 2vw;
    top: 0;
    background-color: #fff;
    border-radius: 0.3vw;
    right: 0;
    left: auto;
}

.application-update:hover {
    background-position-x: 100%;
    background-color: #29b4c2;
}

@keyframes progress-bar-stripes {
	0% {
		background-position: 1rem 0;
	}
	100% {
		background-position: 0 0;
	}
}


#root_access {
	display: none;
}

#root-access-enabled {
	display: none;
}
#alt-access-block{
    font-size: 1.5vmin;
    margin-top: 1vmin;
}
@-moz-document url-prefix() {
    .nano{
        overflow: hidden !important;
    }
}

.nano-content{
    padding-right: 15px !important;
    padding-left: 0px !important;
}