/* ui-modal.css — responsive constraints with small-content preference
   - Small content: size prefers <= 50% of available width/height.
   - Large content: can grow up to edge-gapped viewport with scroll in body.
*/
:root {
	--ui-bg 		: rgba(20, 28, 34, 0.64);
	--ui-panel 	: var(--COLOR_WHITE);
	--ui-border : var(--COLOR_GRAY_E); /** #e6e6e9 NS_COLOR_24 */
	--ui-text 	: var(--NS_COLOR_02); /** #1c2a33 */
	--ui-muted 	: #5b6871;
	--ui-shadow : 0 20px 80px rgba(3, 10, 20, .25), 0 8px 24px rgba(3, 10, 20, .2);

	/* type accents */
	/*--ui-ok 		: var(--COLOR_GREEN_LIGHT_2);*/ /** #10b981;*/
	/*--ui-green 	: var(--COLOR_GREEN_LIGHT_2);*/ /** #10b981;*/
	/*--ui-red 	: var(--NS_COLOR_21_B);*/ /** #ef4444;*/

	--ui-info 	 			: var(--COLOR_ORANGE);
	--ui-warning 			: var(--NS_COLOR_13);
	--ui-success 			: var(--COLOR_GREEN_LIGHT_2);
	--ui-error 	 			: var(--NS_COLOR_21);
	--ui-prompt  			: var(--COLOR_ORANGE);

	--ui-info-alt 	 		: var(--COLOR_ORANGE_LIGHT_13);
	--ui-warning-alt 		: var(--COLOR_PINK); /*--COLOR_ORANGE*/
	--ui-success-alt 		: var(--COLOR_GREEN_LIGHT_13);
	--ui-error-alt 	 		: var(--NS_COLOR_19);
	--ui-prompt-alt  		: var(--COLOR_ORANGE_LIGHT_13);

	/* gap from viewport edges (updates via media queries) */
	--edge-gap 	: 80px;
}

@media (max-width : 1299.98px) {
	:root {
		--edge-gap 	: 60px;
	}
}

@media (max-width : 1199.98px) {
	:root {
		--edge-gap 	: 40px;
	}
}

@media (max-width : 799.98px) {
	:root {
		--edge-gap 	: 20px;
	}
}

.ui-lock-scroll {
	overflow : hidden;
}

.ui-overlay {
	position 	: fixed;
	inset 		: 0;
	background 	: var(--ui-bg);
	display 		: grid;
	place-items : center;
	z-index 		: 9999;
	animation 	: ui-fade .15s ease-out;
}

.ui-fadeout {
	animation: ui-fade-out .12s ease-in forwards;
}

@keyframes ui-fade {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes ui-fade-out {
	to {
		opacity: 0
	}
}

@keyframes ui-pulse-success {
	0%   { background-color: var(--ui-success); }
	50%  { background-color: var(--ui-success-alt); }
	100% { background-color: var(--ui-success); }
}

@keyframes ui-pulse-error {
	0%   { background-color: var(--ui-error); }
	50%  { background-color: var(--ui-error-alt); }
	100% { background-color: var(--ui-error); }
}

@keyframes ui-pulse-warning {
	0%   { background-color: var(--ui-warning); }
	50%  { background-color: var(--ui-warning-alt); }
	100% { background-color: var(--ui-warning); }
}

@keyframes ui-pulse-info {
	0%   { background-color: var(--ui-info); }
	50%  { background-color: var(--ui-info-alt); }
	100% { background-color: var(--ui-info); }
}

@keyframes ui-pulse-prompt {
	0%   { background-color: var(--ui-prompt); }
	50%  { background-color: var(--ui-prompt-alt); }
	100% { background-color: var(--ui-prompt); }
}


.ui-modal {
	inline-size: 100%;
	block-size: 100%;
	display: grid;
	place-items: center;
	/* This centers `.ui-dialog` */
}

.ui-dialog {
	background: var(--ui-panel);
	color: var(--ui-text);
	border: 1px solid var(--ui-border);
	border-radius: 7px;
	box-shadow: var(--ui-shadow);
	display: flex;
	flex-direction: column;

	/* Centering fix */
	position: relative;
	/* was absolute, now relative */
	margin: auto;
	/* let the grid center it */

	/* Preferred size: small content should not exceed 50% of viewport.
     But big content can grow up to (100svw - edge-gap) / (100dvh - edge-gap). */
	inline-size: clamp(min(90svw, max-content), max-content, calc(100svw - var(--edge-gap)));
	max-inline-size: calc(100svw - var(--edge-gap));
	block-size: auto;
	max-block-size: calc(100dvh - var(--edge-gap));
	overflow: hidden;

	/** For bootstrap forcefully reset */
	top: auto !important;
	left: auto !important;

	font-size: 14px;
}

.ui-header {
	position: relative;
	padding: 16px 52px 12px 16px;
	border-bottom: 1px solid var(--ui-border);
	font-weight: 600;
	/*font-size: 16px;*/
	font-size: 11px;
	line-height: 1.25;
	background-color: #EEEEEE;
}

.ui-title {
	margin-right: 24px;
	/*font-size: 20px;*/
	font-weight 	: 600;
	font-size 		: 1.6em;
	line-height 	: 1.25;
}

.ui-close {
	position: absolute;
	top: 8px;
	right: 8px;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 10px;
	border: 1px solid var(--ui-border);
	background: #fff;
	font-size: 20px;
	cursor: pointer;
}

.ui-close:hover {
	background: #fafafa;
}

.ui-body {
	padding: 16px;
	overflow: auto;
	/* scrollbars only when needed */

	flex: 1 1 auto;
	min-height: 0;
}

.ui-content-html:where(p) {
	margin: 0 0 0.8em 0;
}

.ui-content-html:where(ul) {
	margin: 0.4em 0 0.8em 1.2em;
}

.ui-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 16px 16px 16px;
	border-top: 1px solid var(--ui-border);
	justify-content: flex-end;
}

.ui-btn, .ui-btn-primary, .ui-btn-ok, .ui-btn-green, .ui-btn-success, .ui-btn-error, .ui-btn-red, .ui-btn-warning, .ui-btn-info{
	text-transform: uppercase;
}

.ui-btn {
	appearance 		: none;
	border 			: 1px solid var(--ui-border);
	background 		: #fff;
	color 			: var(--ui-text);
	padding 			: 8px 14px;
	border-radius 	: 10px;
	cursor 			: pointer;
	font-size 		: 14px;
	-webkit-transition: background .5s;
	transition: background .5s;
}

.ui-btn:hover {
	background: #f6f7f8;
}

.ui-btn[disabled] {
	cursor: not-allowed;
	background: var(--COLOR_GRAY_D);
	color: var(--COLOR_GRAY_9);
	border: var(--COLOR_GRAY_9);
}
.ui-btn[disabled]:hover {
	cursor: not-allowed;
	background: var(--COLOR_WHITE);
	color: var(--COLOR_GRAY_A);
	border: var(--COLOR_GRAY_A);
}

.ui-btn-primary {
	background-color: var(--NS_COLOR_14);
	border-color: #0ea5e9;
	color: #fff;
}

.ui-btn-primary:hover {
	background-color: var(--NS_COLOR_13);
}

.ui-btn-cancel {
	background-color 	: var(--COLOR_WHITE);
	color 				: var(--COLOR_GRAY_7);
	border 				: 1px solid var(--ui-border);
}

.ui-btn-cancel:hover {
	background-color: var(--COLOR_GRAY_B);
	color: var(--COLOR_BLACK);
	/*font-weight: bold;*/
}

.ui-btn.btn-green, .ui-btn.btn-ok {
	background-color: var(--NS_COLOR_10);
	color: #FFF;
}
.ui-btn.btn-green:hover, .ui-btn.btn-ok:hover {
	background-color: var(--NS_COLOR_09);
}

.ui-btn.btn-red, .ui-btn.btn-error {
	background-color: var(--NS_COLOR_20);
	color: #FFF;
}
.ui-btn.btn-red:hover, .ui-btn.btn-error:hover {
	background-color: var(--NS_COLOR_21);
}

.ui-btn.btn-orange {
	background-color: var(--NS_COLOR_16);
	color: #FFF;
}
.ui-btn.btn-orange:hover {
	background-color: var(--NS_COLOR_17);
}


/* Prompt input */
.ui-prompt-wrap {
	margin-top: 8px;
}

.ui-input {
	inline-size: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ui-border);
	border-radius: 10px;
	font-size: 14px;
	box-sizing: border-box;
}

/* Type accents (thin top border) */
.ui-dialog::before {
	content: "";
	display: block;
	inline-size: 100%;
	block-size: 7px;
	background: var(--ui-info);
	border-radius: 3px;
}

.ui-dialog[data-type="prompt"]::before,
.dfi-ui-dialog .dfi_content::before, .dfi-ui-dialog[data-type="prompt"] .dfi_content::before {
	background: var(--ui-prompt);
	animation: ui-pulse-prompt 4s ease-in-out infinite;
}

.ui-dialog[data-type="info"]::before,
.dfi-ui-dialog[data-type="info"] .dfi_content::before 
{
	background: var(--ui-info);
	animation: ui-pulse-info 4s ease-in-out infinite;
}

.ui-dialog[data-type="success"]::before, .ui-dialog[data-type="ok"]::before, .ui-dialog[data-type="green"]::before, 
.dfi-ui-dialog[data-type="success"] .dfi_content::before, .dfi-ui-dialog[data-type="ok"] .dfi_content::before, .dfi-ui-dialog[data-type="green"] .dfi_content::before
{
	background: var(--ui-success);
	animation: ui-pulse-success 4s ease-in-out infinite;
}

.ui-dialog[data-type="warning"]::before,
.dfi-ui-dialog[data-type="warning"] .dfi_content::before {
	background: var(--ui-warning);
	animation: ui-pulse-warning 3s ease-in-out infinite;
}

.ui-dialog[data-type="error"]::before, .ui-dialog[data-type="red"]::before,
.dfi-ui-dialog[data-type="error"] .dfi_content::before, .dfi-ui-dialog[data-type="red"] .dfi_content::before {
	background: var(--ui-error);
	animation: ui-pulse-error 2s ease-in-out infinite;
}

/* When there is no title: header is omitted, keep close button in top-right of dialog */
.ui-dialog.no-title .ui-close { position: absolute; top: 8px; right: 8px; }
.ui-dialog.no-title .ui-body { padding-top: 15px; margin-right: 40px;} /* small buffer so content doesn't sit flush under the close */


/*--------------- UI_TIP_MSG ------------------*/
.ui_tip_msg{
	width 				: 300px;
	min-width 			: 100px;
	max-width  			: 300px;
	max-height 			: 200px;
	min-height 			: 60px;
	position 			: relative;
	border-radius 		: 10px;
	background-color 	: var(--COLOR_WHITE); 
	border 				: var(--COLOR_GRAY_A);
	color 				: var(--COLOR_BLACK);
	padding 				: 2px;
	transition 			: 0.5s;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
	box-sizing 			: border-box;
	cursor 				: pointer;
	display 				: none;

	&[type='important']{
		& .arrow{
			& i{
				color : var(--NS_COLOR_17);
			}
		}
		& .content{
			background-color 	: var(--NS_COLOR_17);
			color 				: var(--COLOR_WHITE);
		}
	}
	&[type='error']{
		& .arrow{
			& i{
				color : var(--NS_COLOR_21);
			}
		}
		& .content{
			background-color 	: var(--NS_COLOR_21);
			color 				: var(--COLOR_WHITE);
		}
	}
	&[type='warning']{
		& .arrow{
			& i{
				color : var(--NS_COLOR_14);
			}
		}
		& .content{
			background-color 	: var(--NS_COLOR_14);
			color 				: var(--COLOR_WHITE);
		}
	}
	&[type='info']{
		& .arrow{
			& i{
				color : var(--COLOR_GRAY_9);
			}
		}
		& .content{
			background-color 	: var(--COLOR_WHITE);
			color 				: var(--COLOR_GRAY_9);
		}
	}

	& > div{
		box-sizing: border-box;
	}

	& .arrow{
		position 		: absolute;
		width 			: 40px;
		height 			: 40px;
		z-index 			: 10000;
		background-color : var(--COLOR_WHITE);
		margin 			: auto;
		border-radius 	: 20px;
		padding  		: 0px;
		display 			: flex;
		justify-content : center; /* horizontal */
		align-items 	: center; /* vertical */
		text-align 		: center; /* optional: center multiline text */
		box-shadow 		: 0 0 12px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);

		&.up{
			top 		: -45px;
			transform	: rotate(-90deg);
			&.center{ 	left : calc(50% - 20px);}
			&.left{ 	left : 0px;}
			&.right{ 	right : 0px;}
		}

		&.right{
			right 		: -30px;
			&.center{ 	top 	: calc(50% - 20px);}
			&.top{ 		top 	: 0px;}
			&.bottom{ 	bottom 	: 0px;}
		}

		&.left{
			left 		: -30px;
			transform	: rotate(-180deg);
			&.center{ 	top 	: calc(50% - 20px);}
			&.top{ 		top 	: 0px;}
			&.bottom{ 	bottom 	: 0px;}
		}

		&.down{
			bottom 		: -45px;
			transform	: rotate(90deg);
			&.center{ 	left : calc(50% - 20px);}
			&.left{ 	left : 0px;}
			&.right{ 	right : 0px;}
		}

		& i{
			font-size: 35px;
			color : var(--NS_COLOR_17);
		}
	}

	& .content{
		display 			: flex;
		width  			: 100%;
		min-height 		: 60px;
		justify-content : center; /* horizontal */
		align-items 	: center; /* vertical */
		text-align 		: center; /* optional: center multiline text */
		font-size 		: 16px;
		font-weight 	: bold;
		box-sizing 		: border-box;
		background-color : var(--NS_COLOR_17);
		color 			: var(--COLOR_WHITE);
		border-radius 	: 10px;
		overflow-y 		: auto;
	}
}
/*---------------------------------------------*/


@media only screen and (max-width: 1200px) {
	.ui-title{
		font-size: 1.6em;
	}
}

@media only screen and (max-width: 1050px) {
	.ui-title{
		font-size: 1.6em;
	}
}

@media only screen and (max-width: 800px) {
	.ui-title{
		font-size: 1.4em;
	}
}

@media only screen and (max-width: 600px) {
	.ui-title{
		font-size: 1.2em;
	}
}

@media only screen and (max-width: 400px) {
}