/* The Modal (background) */

.modal {
	position: fixed;
	z-index: 10;
	padding: 100px 10px 10px 10px;
	left: 0;
	top: 0;
	background: none;
	border: none;

	&::backdrop {
		background-color: rgba(29, 29, 29, 0.247);
	}
}

/* Modal Content */

.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0 0 20px 0;
	border: 1px solid #888;
	width: 50%;
	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
}

@media screen and (max-width: 33.125em) {
	.modal-content {
		width: 100%;
	}
}

.modal-content .button-main {
	padding: 10px 50px 10px 10px;
	height: auto;
	position: relative;
	font-size: 14px;
}

.modal-content .button-main::before {
	content: url(../images/forms/save-icon.svg);
	display: inline-block;
	position: absolute;
	right: 10px;
	top: 12px;
}

.modal-content .button-secondary {
	padding: 10px 50px 10px 10px;
	height: auto;
	position: relative;
	background-color: #fff;
	border: solid #08305d 2px;
	color: #08305d;
	font-size: 14px;
}

/* 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
	}
}

/* The Close Button */

.close {
	position: absolute;
	top:16px;
	right:25px;
	appearance: none;
	background-color: transparent;
	border: 0;
	color: #08305d;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover, .close:focus {
	color: #b94a00;
	text-decoration: none;
	cursor: pointer;
}

.modal-header {
	padding: 20px 25px 15px 25px;
}

.modal-content p {
	margin-bottom: 0px;
	font-size: 14px;
}

.modal-content a {
	font-size: 14px;
	text-decoration: underline;
}

.modal-header h1, .modal-header h2, .modal-header h3 {
	margin-bottom: 0px;
}

.modal-body {
	padding: 0px 25px;
}

.modal-footer {
	padding: 20px 25px;
	color: white;
}

/* body {
    font-family: arial;
} */

.hidden {
	display: none;
}

#dropzone {
	color: #000;
	background-color: #E5EAEE;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 50px;
	text-align: center;
	cursor: pointer;
}

#dropzone:hover {
	background-color: #ddd;
	border-color: #bbb;
}

#dropzone img {
	width: 15%;
}

#dropzone .button {
	margin: 5px;
	text-decoration: none;
}

#dropzone span {
	padding-bottom: 5px;
}

#dropzone input[type=file] {
	display: none;
}

#dropzone.full {
	background-color: #54e592;
	color: #fff;
	border-color: #27ae60;
}

#file {
	display: none;
}

div.info,
a.info {
	background: #FFEFD0;
	padding: 10px;
	display: block;
	font-size: 14px;
	color: #000;
	margin-bottom: 10px;
}

/* a.info:hover, a.info:focus {
    border: 1px solid #ffe5b3;
} */

a.info h3 {
	margin-bottom: 5px;
	font-size: 16px;
}

a.info .underline, span.underline {
	color: #08305d;
	text-decoration: underline;
}

a.underline, span.underline {
	color: #08305d;
	text-decoration: underline;
}

a.underline:hover, a.underline:focus, span.underline:hover, span.underline:focus {
	color: #28609f;
}

a.more-info-button {
	cursor: pointer;
}

.more-info {
	display: none;
}