@keyframes spin { to { transform: rotate(360deg) } }
/*@keyframes zoomable_fadeIn {
	0%   { opacity: 0}
	50%  {opacity: 0.1}
	68%,
	72%  {opacity: 0.5}
	100% {opacity: 1}
}
@keyframes zoomable_backdrop_fadeIn {
	0%   { opacity: 0}
	100% {opacity: 0.5}
}*/
.UI_Dialog{  /* Any screen dimension */
	overflow:hidden;
	border-color: var(--color--green-0);
	border-style: solid;
	outline:0;
	animation: zoomable_fadeIn .25s ease both;
	box-shadow: 0 30px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
	> ._inner{
		display:grid;
		grid-template-areas:"head" "body" "foot";
		grid-template-rows: min-content 1fr min-content;
		height:100%;
		overflow:hidden;
		> ._head{grid-area:head;
			display:grid;
			grid-template-areas:  var(--SCR__UI_DIALOG__HEAD__grid-template-areas);
			grid-template-columns:var(--SCR__UI_DIALOG__HEAD__grid-template-columns);
			align-items: center;
			font-weight:  bold;
			border-color: var(--color--green-0);
			border-style: solid;
			background:   var(--color--white-0);
			> ._icon{grid-area:icon;
			}
			> ._title{grid-area:title;
				color: var(--color--green-0);
			}
			> ._toolbar{grid-area:toolbar;
				display:flex;
				align-items:flex-start;
			}
		}
		> ._body{grid-area:body;
			background  : var(--color--white-0);
			width:100%;
			height:100%;
			position:relative;
			> ._content{
				opacity: 0;
				iframe{
					width:100%;
					height:100%;
					border:0;
					overflow:hidden;
				}
			}
			> ._loader{
				position:absolute;
				z-index:2000;
				width:100%;
				height:100%;
				overflow:hidden;
				align-items: center;
				justify-content: center;
				._spinner {
					position:absolute;
					width: 28px; height: 28px; border: 3px solid rgba(0,0,0,.25); border-top-color: #000; border-radius: 50%;
					animation: spin .9s linear infinite; margin: auto;
				}
			}
		}
		> ._foot{grid-area:foot;
		}
	}
	&[data-contentstate="loading"]{
		> ._inner{
			> ._body{
				> ._content{
					opacity: 0; 
				}
				> ._loader{
					display:flex;
				}
			}
		}
	}

	&[data-contentstate="complete"]{
		> ._inner{
			> ._body{
				> ._content{
					opacity: 1; 
					transition: opacity 1s ease; 
				}
				> ._loader{
					display:none;
				}
			}
		}
	}
	&[data-animation="animationOpen-start"]{
		> ._inner{
			> ._head{
				> ._toolbar{
					opacity:0;
					visibility:hidden;
				}
				> ._title{
					opacity:0;
					visibility:hidden;
				}
			}
		}
	}
	&[data-animation="animationOpen-end"]{
		> ._inner{
			> ._head{
				> ._toolbar{
					visibility:visible;
					opacity: 1; 
					transition: opacity 0.25s ease; 
				}
				> ._title{
					visibility:visible;
					opacity: 1; 
					transition: opacity 0.25s ease; 
				}
			}
		}
	}
	&[data-animation="animationClose-start"]{
		> ._inner{
			> ._head{
				> ._toolbar{
					visibility:hidden;
				}
				> ._title{
					visibility:hidden;
				}
			}
		}
	}
	&[data-animation="animationClose-end"]{
	}
	&::backdrop {
		background: rgba(5,7,15,.65);
		backdrop-filter: blur(2px);
		animation: zoomable_backdrop_fadeIn .25s ease both;
	}
}
.UI_Dialog{ /* Custom screen dimension */
	border-radius:var(--SCR__UI_DIALOG__border-radius);
	border-width: var(--SCR__UI_DIALOG__border-width);
	width:        var(--SCR__UI_DIALOG__width);
	height:       var(--SCR__UI_DIALOG__height);
	margin:auto;
	margin-top:   var(--SCR__UI_DIALOG__margin-top);
/*
			      calc(100vh - var(--SCR__UI_DIALOG__height))
			      auto
			      ;
*/
	max-height:   calc(100% - var(--SRC__UI_DIALOG__margin-top) - 5px);
	> ._inner{
		> ._head{
			padding     : var(--SCR__UI_DIALOG__HEAD__padding);
			border-width: var(--SCR__UI_DIALOG__HEAD__border-width);
			gap:8px;
			> ._title{
				font-size : 18px;
			}
			> ._toolbar{
				gap: var(--SCR__UI_DIALOG__HEAD__TOOLBAR__gap);
			}
		}
		> ._body{
			> ._content{
				padding     : var(--SCR__UI_DIALOG__BODY__padding);
				height:100%;
				width:100%;
			}
		}
		> ._foot{
		
		}
	}
}