/***********************************************
					IMPORT DE FONT
***********************************************/
@font-face {
	/* Open sans Condensed */
	font-family: "Jackpot";
	src:url("../fonts/Jackpot.ttf");
}

:root {
    --yellow : #DDCB77;
	--yellow-rgb:221,203,119;
	--dark-yellow:#86731B;
	--green:#5A777B;
	--dark-green : #2A4B50;

}

/***********************************************
					CONNEXION
***********************************************/
#fondConnexion {
	width: 100%;
	position: fixed;
	top: -200px;
}
#contentLogin {
	z-index: 2;
	position: fixed;
	top: 20vh;
	width:300px;
	left:calc((100vw - 300px)/2);
	text-align: center;
	color:white;
}
#messageErrorConnexion, 
#messageMissingId, 
#messageMissingPwd {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: var(--red);
	color:white;
	z-index: 3;
	padding:2px;
	text-align: center;
	display: none;
}
#messageErrorConnexion.error,
#messageMissingId.error, 
#messageMissingPwd.error {
	display: inline-block;
}

#lienVisiteur {
	background: none;
	border: none;
	color:black;
}
/***********************************************
					COMMUN
***********************************************/
input,
label,
p,
option {
	color:var(--dark-green);
}

/* Surcharge Bootstrap */
.btn-primary {
	background-color: var(--yellow) !important;
	border-color: var(--yellow) !important;
	color:var(--green);
}
.btn-primary:hover {
	background-color: var(--dark-yellow) !important;
	border-color: var(--dark-yellow) !important;
	color:var(--dark-green);
}
a {
	color:var(--green);
}
a:hover {
	color:var(--dark-green);
}
.lien {
	cursor: pointer;
}
.bold {
	font-weight: bold;
}
/***********************************************
					HEADER
***********************************************/
.navbar {
	background-color: transparent !important;
}

.navbar-brand {
    font-family: Jackpot;
    color:var(--green) !important;
	font-size: 22pt !important;	
}

.nav-link img {
	width:25px;
}

.list-group-item img {
	width: 50px;
	margin-right: 10px;
}

#iconeDeconnexion {
	width:20px;
}

#formDeco input {
	border: none;
	background-color: transparent;
}

#avatar {
	width: 70px;
}

/***********************************************
					ACCUEIL
***********************************************/

/* Zone de sélection des utilisateurs */
.sidenav {
	border:solid 2px var(--yellow);
	border-radius: 15px;
	background-color: rgba(var(--yellow-rgb), 0.4);
	height: max-content;
}
#utilisateurList li{
	list-style: none;
	user-select: none;
}
#utilisateurList li img {
	width:50px;
}
.utilisateur {
	cursor: pointer;
}
.utilisateur.disabled {
	filter: grayscale(1);
}


/* Affichage des cadeaux */
.utilisateurAccueil.disabled {
	display: none;
}

.avatarAccueil {
	width:70px;
}
.iconeCategorie {
	width:40px;
}
.iconeFamilial {
	width:30px;
	cursor:pointer;
	margin-left:10px;
}
.card {
	border-color: var(--yellow) !important;
	display: inline-block !important;
	vertical-align: middle;
}
.card.reserve {
	filter: grayscale(1);
	border-width: 3px;
}
.labelReserve {
	background-color: grey;
	color:white;
	text-transform: uppercase;
	padding:2px;
	border-radius: 5px;
	cursor:pointer;
}
.card.reserve.hiddenReserve {
	display: none !important;
}
.card.familial.hiddenFamilial  {
	display: none !important;
}
h3 {
	color:var(--dark-yellow);
}
.card-link {
	cursor: pointer;
}

#cadeauModal>div {
	width: 60vw;
	max-width: none;
}
.supprimer {
	background-image: url("../images/icones/supprimer.png");
	background-repeat: no-repeat;
	background-size: 100%;
	width: 25px;
	background-color: transparent;
	border: none;
	position: absolute;
	top:10px;
	right: 10px;
	display: none;
}
.modifier {
	width: 25px;
	display: none;
	position: absolute;
	top:10px;
	right: 40px;
	cursor: pointer;
	background-image: url("../images/icones/modifier.png");
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: transparent;
	border:none;
}
.card:hover .supprimer,
.card:hover .modifier {
	display: block;
}

#imageCadeauModale {
	max-width:80%;
}

#annulerReservation {
	display:none;
}

/***********************************************
				MODALE RESERVATION
***********************************************/
#infoInvite,
#infoOccasion {
	display:none;
}
#infoInvite.affiche,
#infoOccasion.affiche {
	display: block;
}


/***********************************************
				MODALE PERSONNALISATION
***********************************************/
#avatarList li {
	list-style: none;
	display: inline-block;
}

.customRadio { 
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* IMAGE STYLES */
.customRadio + img {
	cursor: pointer;
	width:90px;
	margin: 0 5px;	
}

/* CHECKED STYLES */
.customRadio:checked + img {
	border:solid 4px var(--dark-yellow);
	border-radius: 50%;
}

#avertissementSurprise {
	color:var(--red);
}

#infoSurprise {
	width: 25px;
	float: left;
	margin-right: 10px;
}
#explicationSurprise {
	font-style: italic;
}
/***********************************************
						AJOUT
***********************************************/
#blocOccasion.disabled,
#blocDate.disabled {
	display: none;
}

#blocTelechargerImage,
#blocLienImage {
	display:none;
}



/***********************************************
				SWITCH BOUTON RESERVES
***********************************************/
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 20px;
	margin-bottom: -3px;
  	margin-right: 10px;
  }

  .switch input {display:none;}

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

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

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

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

  input:checked + .slider {
	background-color: var(--yellow);
  }

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

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

  .on
  {
	display: none;
  }

  .on, .off
  {
	color: white;
	position: absolute;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	font-size: 10px;
	font-family: Verdana, sans-serif;
  }

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

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