/* Modal pop-up form */



.modal_overlay {

	display: none;

	position: fixed;

	

	width: 100%;

	height: 100%;

	overflow:hidden;

  

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	

	background-color: rgba(0,0,0,0.6);

	z-index: 999;

}



.overlay_text .left_right, .overlay_text .line_hr{

	margin-bottom:1em;

}



.overlay_text{

    background-color: var(--color_scheme_light-Secondary);

	margin:155px auto;

	width:90%;

	padding:1em;

	box-shadow: 0 5px 8px 0 rgb(0,0,0,0.2), 0 7px 20px 0 rgb(0,0,0,0.17);

	animation-name:modalopen;

	animation-duration:1s;

	border-radius:5px 5px 5px 5px;

}





@media (min-width: 420px) {

	.modal_overlay {

		padding: 0 2em;

	}

}

@media (min-width: 620px) {

	.modal_overlay {

		padding: 0 4em;

	}

}

@media (min-width: 820px) {

	.modal_overlay {

		padding: 0 8em;

	}

}





.left_right{

	display:flex;

	justify-content:space-between;

}

.middle{

	display:flex;

	margin:0 auto;

	justify-content:center;

	align-items: center;

}

.modal-body{

	text-align: center;

}



.modal-header {

	float:left;

	width:80%;

	display:flex;

	align-items: center;

}

.modal-header h3 {

	margin: 0em 0em 0em 0em;

}



input[type="text"].form-control {

    width:99%;

}





.modal-close {

    background-color:var(--clr2);

	color: black;

    float: right;

    padding: 8px 16px;

    text-decoration: none;

	border:2px solid var(--clr2);

    margin: 1px 1px 1px 1px;

	-webkit-border-radius: 5px;

    border-radius: 5px; 

}



.modal-close.active {

    background-color: var(--clr3);

    border:2px solid var(--clr3);

	color:var(--clr1);

	transition: all ease-in-out 0.6s;

}



.modal-close:hover{

	cursor:pointer;

	box-shadow: 0 0 3px #000000;

	transition: all ease-in-out 0.6s;

}



.modal-close:hover:not(.active) {

	background-color: var(--clr3);

	border:2px solid var(--clr3);

	color:var(--clr1);

	transition: all ease-in-out 0.2s;

}