#modal-background {	position: fixed; top:0; left:0; z-index: 99; display: none; background-color: rgba(0,0,0,0.39); width:100%; height:100vh;}
body:has(.modal-shown){ overflow: hidden; height: 100%; }
body:has(.modal-shown) #modal-background { display:block !important; }
body:has(.modal-shown) #main-content { z-index:999; position:relative; }
body:not(:has(.modal-shown)) #modal-background { display:none; }
#modal-body-background { width:100%; margin: 7.5vh auto; height:85vh; background:white; border-radius: 15px; position:relative;}
#modal-body-background-body-wrapper { padding: 45px 0; height:100%; width:100%; max-width:100%; }
#modal-body-background-body { padding:1em; overflow-y:scroll; height:100%; width:100%; max-width:100%; padding-bottom: 4em;}
#modal-body-background-header { width:100%; height:45px; max-height:45px; border-bottom: 1px solid #ddd; position:absolute; top:0; left:0; }
#modal-body-background-footer { width:100%; height:45px; max-height:45px; border-top: 1px solid #ddd; position:absolute; bottom:0; top:auto; left:0; }
#modal-body-background-footer.show-big { height:90px; max-height:90px; }
#modal-body-background-footer:not(.show):not(.show-big) { display: none; }
#modal-body-background:not(:has(#modal-body-background-footer.show)):not(:has(#modal-body-background-footer.show-big)) #modal-body-background-body-wrapper { padding-bottom: 20px; }
#modal-body-background:not(:has(#modal-body-background-footer.show)):has(#modal-body-background-footer.show-big) #modal-body-background-body-wrapper { padding-bottom: 90px; }
.modal-body-background-footer-wrapper {width:100%; display:flex; justify-content: space-between; border-radius: 0 0 15px 15px; position:absolute; bottom:0;}

/*hide scrollbars*/
#modal-body-background::-webkit-scrollbar {width: 0 !important;}
#modal-body-background { -ms-overflow-style: none; scrollbar-width: none; }
#modal-body-background-body::-webkit-scrollbar {width: 0 !important;}
#modal-body-background-body { -ms-overflow-style: none; scrollbar-width: none; }
/*hide scrollbar end*/

@media (max-width:767px){
	body:has(.modal-shown) #modal-body-background { max-width:95%; }
	#modal-body-background-header { padding: 0.4em 0.4em 0 0.4em; }
	.modal-body-background-footer-wrapper { padding: 0 0.4em 0.4em 0.4em; }
}
@media (min-width:768px) and (max-width:981px){
	body:has(.modal-shown) #modal-body-background { max-width:90%; }
	#modal-body-background-header { padding: 0.4em 0.4em 0 0.4em; }
	.modal-body-background-footer-wrapper { padding: 0 0.4em 0.4em 0.4em; }
}
@media (min-width:981px){
	body:has(.modal-shown) #modal-body-background { max-width:85%; }
	#modal-body-background-header { padding: 0.5em 0.5em 0 0.5em; }
	.modal-body-background-footer-wrapper { padding: 0 0.5em 0.5em 0.5em; }
}
#closeModalButton {
	padding: 0.5em;
	background-color: red;
	color:white;
	font-weight:bold;
	border:white;
	border-radius: 5px;
}
#closeModalButton:hover, #closeModalButton:focus {
	background-color: #ff3333;
	color:white;
	border:white;
	cursor: pointer;
}

#modal_title {
	font-weight: bold;
	font-size:18px;
    color: black;
    margin: auto 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hand-pointer:hover{
	cursor: pointer;
}