/* @import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap'); */
.confirm {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--clr-layer);
	padding: 10px;
	box-sizing: border-box;
	opacity: 0;
	animation-name: confirm---open;
	animation-duration: 0.15s;
	animation-fill-mode: forwards;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.confirm--close {
	animation-name: confirm---close;
}

.confirm__window {
	width: 95%;
	max-width: calc(1280px * 0.9);
	background: var(--clr-creamywhite);
	/* font-size: 14px; */
	/* font-family: 'Noto Sans', sans-serif; */
	border-radius: 5px;
	overflow: hidden;
	/*border-radius: akkor is láható lesz, ha van olyan gyerek elem, ami túlcsordul*/
	box-shadow: 0 0 10px var(--clr-layer);
	opacity: 0;
	transform: scale(0.75);
	animation-name: confirm__window---open;
	animation-duration: 0.25s;
	animation-fill-mode: forwards;
	animation-delay: 0.15s;
}

.confirm__titlebar,
.confirm__content,
.confirm__buttons {
	padding: 1.25em;
}

.confirm__titlebar {
	background-color: var(--color-frenchblue);
	color: var(--clr-creamywhite);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.confirm__title {
	font-weight: bold;
	font-size: 1.2em;
}

.confirm__close {
	background: none;
	outline: none;
	border: none;
	transform: scale(3.5);
	color: var(--clr-creamywhite);
	transition: color 0.15s;
}

.confirm__close:hover {
	color: var(--clr-red);
	cursor: pointer;
}

.confirm__content {
	line-height: 1.1em;
	font-size: 1.1rem;
	word-break: break-word;
}

/* .confirm__content::before {
	content: "";
	display: block;
	float: left;
	margin: 12px 12px 10px 0;	
	background: url("../images/dialog-information.png") no-repeat center center;
	padding: 24px;	
} */

.confirm__buttons {	
	display: flex;
	justify-content: space-evenly;
	background-color: var(--color-frenchblue);
}

.confirm__button {
	padding: 0.4em 0.8em;	
	border-radius: 5px;	
	color: var(--clr-creamywhite);
	font-weight: bold;
	font-size: 1.1em;	
	margin-left: 0.6em;
	cursor: pointer;
	outline: none;
	font-size: 18px;
	text-align: center;
	height: 40px;
	width: 120px;
	border: none;
}
.confirm__button--ok {background-color: var(--clr-forestgreen);}
.confirm__button--cancel {background-color: hsla(0, 100%, 50%, 0.75);}
.confirm__button:hover,
.confirm__button:focus {box-shadow: var(--color-illuminating) 0px 0px 8px 4px;}
#btn-modal-close {background-color: var(--clr-forestgreen);}

@keyframes confirm---open {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes confirm---close {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes confirm__window---open {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.modal__overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background: var(--clr-layer);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.modal__window {
	width: 100%;
	min-width: 360px;
	max-width: 600px;
	background: var(--clr-creamywhite);
	border: 1px solid var(--clr-creamywhite);
	font-size: 16px;
	box-shadow: 0 0 15px var(--clr-layer);
	margin: 0 8px;
}

.modal__titlebar {
	height: 40px;
	background: var(--clr-onyx);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modal__title {
	margin-left: 15px;
	font-weight: bold;
	color: var(--clr-creamywhite);
	font-size: 1.2em;
}

.modal__close {
	width: 40px;
	height: 40px;
	outline: none;
	border: none;
	background-color: transparent;
	color: var(--clr-creamywhite);
	cursor: pointer;
	font-size: 32px;
}

.modal__close:hover {
	background-color: var(--clr-darkgrey);
}

.modal__close:active,
.confirm__button--fill:active {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

.modal__content {
	padding: 15px;
	font-size: 1.1rem;
	word-break: break-word;
}

.modal__content::before {
	content: "";
	display: block;
	/* background-size: 100%; */
	float: left;
	margin: 12px 12px 10px 0;
	/* width: 42px;
  height: 42px; */
	background: url("../images/cancel.png") no-repeat center center;
	padding: 24px;
}

.modal__footerbar {
	height: 50px;
	background-color: var(--clr-onyx);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

#spn-closewarning {
	/* position: absolute; */
	/* bottom: 10px; */
	width: 100px;
	height: 40px;
	background-color: var(--clr-darkbrown);
	color: var(--clr-creamywhite);
	text-align: center;
	font-size: 20px;
	left: 50%;
	/* margin: -50px 0 0 -50px; */
	padding-top: 10px;
	cursor: pointer;
}

/* .div-error {
	background-color: yellow;
	z-index: 2000;
	height: auto;
	position: absolute;
	width: 50%;
	top: 0;
	left: 0;
	transform: translate(50%, 50%);
	padding: 0.5em;
} */