/*** bouton avec spinner, utilisé dans charte-graphique.php ***/
.bts {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	
	cursor: pointer;
	font-family: arial,verdana,helvetica;
	width: 100px;
	height: 30px;
	font-size: 10pt;
	font-weight: bold;
	
	color: #666666; background-color: #E9E9ED; border: 1px solid #999999;
	border-radius: 4px;
	box-shadow: 4px 4px 10px #888888;
}

.bts:hover	{ box-shadow: 0px 0px 0px #888888; }
.bts:active	{ transform: translateX(2px) translateY(2px); }

.bts .spinner {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-top-color: gray;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Pour cacher le texte quand on active le spinner */
.bts.loading .btn-text {
  display: none;
}

.bts.loading .spinner {
  display: inline-block;
}

/*********************************************/














.cacher  { display: none; }
.montrer { display: block; }

/* popin background */
.popin {
    display: none; 			/* Hidden by default */
    position: fixed; 		/* Stay in place */
    z-index: 1000; 			/* Sit on top */
    /*padding-top: 70px;   */	/* Location of the box */
    /*padding-left: 100px; */	/* Location of the box */
    left: 0;
    top: 0;
    width: 100%; 			/* Full width */
    height: 100%; 			/* Full height */
    overflow: auto; 		/* Enable scroll if needed */
    background-color: rgb(0,0,0); 		/* Fallback color */
    background-color: rgba(0,0,0,0.6); 	/* Black w/ opacity */
}

/* popin content */
.popin-content {
    background-color: #FFFBE6; /*#FDCA03*/
    margin: 0;
    padding: 0;
    border: 1px solid #888;
    width: 600px;
    height: 500px;
	position: absolute; /*fixed*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50% + 300;
}

/* popin info */
.popin-info {
    /*position: relative;*/
    background-color: #FFFBE6; /*#FDCA03*/
    margin: 0;
    padding: 0;
    border: 1px solid #888;
    width: 400px;
    height: 200px;
	position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50% + 300;
}

/* popin confirmation */
.popin-confirmation {
    /*position: relative;*/
    background-color: #FFFBE6; /*#FDCA03*/
    margin: 0;
    padding: 0;
    border: 1px solid #888;
    width: 600px;
    height: 350px;
	position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50% + 300;
}

/* popin confirmation */
.popin-user {
    /*position: relative;*/
    background-color: #FFFBE6; /*#FDCA03*/
    margin: 0;
    padding: 0;
    border: 1px solid #888;
    width: 600px;
    height: 350px;
	position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50% + 300;
}

.popin-juge {
    /*position: relative;*/
    background-color: #FFFBE6; /*#FDCA03*/
    margin: 0;
    padding: 0;
    border: 1px solid #888;
    width: 800px;
    height: 530px;
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50% + 300;
}

/* Animation : */
/*    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s	*/
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}