/* Version: 1.0 */
/* Auteurs: Sandra et Guillaume */
/* Description: CSS de la Modale de la Page d'Inscription du Site des Roses */

	
.popUpModal 
{
    position: fixed;
    /*top: calc(50% - 2rem);*/
	top : 20%;
	z-index: 1000;

	margin-left: 10%;
    margin-right: 10%;
    padding: 2rem;

    border-radius: 8px;

    background-color: white;

    
    width: 40%;
	max-width: 60%;
	min-width: 360px;
    min-height: 100px;
	max-height: 80%;

    box-sizing: border-box;

    display: none;
}
	.popUpModal.on 
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
		.popUpModal .Title
		{
			color: #9997FA;
			margin-bottom: 2rem;
			font-size: 2rem;
		}

/************************************/
					.modal-js-overlay 
					{
						background: #444;
						opacity: .8;
						position: fixed;
						top: 0px;
						width: 100%;
						height: 1000px;
						z-index: 100;
						left: 0px;
					}

					.modal-js-close 
					{
						position: absolute;
						bottom: 0px;
						right: 0px;
						background: blue;
						color: white;
						border-radius: 50%;
						height: 20px;
						width: 20px;
						text-align: center;
						padding: 1px;
						
						box-shadow: var(--box-shadow);
						cursor: pointer;
						font-size: 12px;
						font-weight: bold;
						z-index: 1005;
					}
/************************************/

.Modal_buttons
{
    width: 100%;

	display: flex;
    justify-content: space-around;

	margin-top: 1rem;
}

	#accept_button, #cancel_button
	{
		cursor: pointer;

		align-self: center;

		background: linear-gradient(45deg,#9997FA, #C2E2FD);

		font-size: 1.1rem;
		font-weight: 500;
		color: white;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

		width: auto;
		padding: 0.6rem 2rem;

		border-radius: 10px;
		border: none;
		border-left: 1px solid rgba(255,255,255, 0.4);
		border-top: 1px solid rgba(255, 255, 255, 0.4);

		box-shadow: 10px 10px 40px rgba(0,0,0,0.3);

		transition: all 250ms;
	}
		#accept_button:hover
		{
			box-shadow: 10px 10px 40px 8px rgba(0,0,0,0.3);
			background: linear-gradient(45deg,#64B4F6,#5AF7B8);
		}
	#cancel_button
	{
		background: linear-gradient(45deg,#f897fa, #ea3a13);

	}
		#cancel_button:hover
		{
			box-shadow: 10px 10px 40px 8px rgba(0,0,0,0.3);
			background: linear-gradient(45deg,#8e3650,#d713dd);
		}


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

@media screen and (max-width: 1000px) {
	.popUpModal.on 
	{
		overflow: hidden;
	}
		.popUpModal .TextModal
		{
			overflow-y: scroll;
		}
}

@media screen and (max-width: 600px) {
	.popUpModal
	{
		padding: 1.5rem;
	}
}