/* Modal */
.dfs-modal-overlay{
    --bg-default: #ffffff;
    --bg-default-transparent: rgba(255,255,255,0.5);
    --bg-black: rgba(0,0,0,1);
    --bg-black-transparent: rgba(0,0,0,0.5);
    --txt-color: #000000;
    --txt-color-light: #ffffff;
    --box-radius: 0px;
}
div.dfs-modal-overlay{
	background-color: var(--bg-black-transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
}
.modal-dialog{
	background-color: var(--bg-default);
	border-radius: var(--box-radius);
	/* box-shadow: 0 0 14px -4px var(--shadow-color); */
	width: 80vw;
	min-width: 340px;
	max-width: 1024px;
	overflow: hidden;
}
.modal-content{
	width: 100%;
	position: relative;
}
.modal-header{
	padding: 10px 10px 10px 20px;
	border-bottom: 1px solid var(--bg-default);
}
.modal-header button{
	border-radius: var(--box-radius);
    font-size: 24px;
    line-height: 14px;
    padding: 9px 8px;
    float: right;
    width: 32px;
	cursor: pointer;
	border: 1px solid var(--bg-black);
	color: var(--txt-color);
}
.modal-header button:hover{
	background-color: var(--bg-black);
	color: var(--txt-color-light);
}
.modal-header h4{
	display: inline-block;
	margin: 5px 0 0 0;
}
.modal-body{
	padding: 10px 20px 20px;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	scrollbar-width: thin;
}
.black.modal{
    background-color: var(--bg-black-transparent);
}
.black .modal-dialog{
	background-color: var(--bg-black);
	color: var(--txt-color-light);
}
.black .modal-header{
	border-bottom: 1px solid var(--bg-black);
}
.black .modal-header button{
	background-color: var(--bg-black);
	color: var(--txt-color-light);
	border: 1px solid var(--bg-default);
}
.black .modal-header button:hover{
	background-color: var(--bg-default);
	color: var(--txt-color);
	border: 1px solid var(--bg-black);
}
.black .modal-header, .black .modal-header h4{
	color: var(--txt-color-light);
}