/*
Requires:
 --body-text
 --body-bg
 */

/* float info */
#gFloatInfoWrapper { position: fixed; bottom: 0; right: 0; display: inline-block; padding: 10px; text-align: right; z-index: 99999; }
#gFloatInfoWrapper .floatMessage { margin-bottom: 5px; border: 1px solid #369; background: #def; color: #369; padding: 10px; display: inline-block; clear: both; float: right; max-width: 300px; text-align: left; }

/* modals */
#gModalModalsHolder {
    position:fixed;
    z-index:10; /* 1 to prevent header sub-menus from falling behind BUT 1 is behind mce toolbars !!!!!!! */
}

.modal {
    display:none;
    position:fixed;
    z-index:1000;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background-color:rgba(0,0,0,0.2);
}

.modal-wrap {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    align-content:center;
	padding: 20px;
}

.modal .modalguts {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    margin:auto;
    padding:0;
    width:800px;
    max-width:95%;
    max-height:100%;
    background:var(--body-bg);
    border-radius:5px;
    box-shadow:0px 10px 22px rgba(0,0,0,0.07);
    position:relative;
}

.modal.medium .modalguts {
	max-width: min(100%, 650px);
}

.modal.narrow .modalguts {
	max-width: min(100%, 500px);
}
.modal.fullscreen .globalmodalcontent {
	max-height:calc(65vh - 120px); 	/* fallback */
	max-height:calc(95dvh - 120px);	/* dynamic viewportHeight */
	min-height:calc(65vh - 120px); 	/* fallback */
	min-height:calc(95dvh - 120px);	/* dynamic viewportHeight */
}
.modal.fullscreen .modalguts {
	max-width: calc(100% - 20px);
	min-width: calc(100% - 20px);
}

.modal.topright .modalguts {
	top:10px;
	right:10px;
	bottom: auto;
	left: auto;
	margin: 10px 10px auto auto;
}
.modal.bottomright .modalguts {
	bottom:10px;
	right:10px;
	top: auto;
	left: auto;
	margin: auto 10px 10px auto;
}
.modal.right .modalguts {
	right:10px;
	top:auto;
	bottom:auto;
	left:auto;
	margin: auto 10px auto auto;
}
.modal.left .modalguts {
	left:10px;
	top:auto;
	bottom:auto;
	right:auto;
	margin: auto auto auto 10px;
}
.modal.bottom .modalguts {
	bottom:10px;
	top:auto;
	left:auto;
	right:auto;
	margin: auto auto 10px auto;
}
.modal.top .modalguts {
	top:10px;
	bottom:auto;
	left:auto;
	right:auto;
	margin: 10px auto auto auto;
}
.modal.bottomleft .modalguts {
	bottom:10px;
	left:10px;
	top: auto;
	right: auto;
	margin: auto auto 10px 10px;
}
.modal.topleft .modalguts {
	top:10px;
	left:10px;
	bottom: auto;
	right: auto;
	margin: 10px auto auto 10px;
}

.modal .modalguts img {
    max-width:100%;
}

/* global modal only */
.modal .globalmodaltitle {
    flex-grow:1;
    border-bottom:1px solid #ddd;
    background:var(--body-bg);
    padding:15px 20px;
    font-size:1.2rem;
    z-index:100;
    border-radius:5px 5px 0px 0px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
	line-height: 1;
}

.modal .globalmodaltitle i[class*=fa-] {
    font-size:1rem;
    margin-right:5px;
    position:relative;
    top:-2px;
} /*  depreciated */

.modal .globalmodaltitle i.icon {
    position:relative;margin-top:-3px;
}/* new*/

.modal .globalmodalfooter {
    flex-grow:1;
    border-top:1px solid #ddd;
    text-align:right;
    background:var(--body-bg);
    padding:10px 30px;
    z-index:100;
    border-radius:0px 0px 5px 5px;
}

.modal .globalmodalcontent {
    flex-grow:1;
    padding:30px;
    overflow:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    position:relative;
    top:0px;
    max-height:calc(65vh - 120px); 	/* fallback */
    max-height:calc(95dvh - 120px);	/* dynamic viewportHeight */
    height:calc(100% - 103px);		/* height */
    width:100%;
}

/* actions */
.globalmodaltitle .modal-actions {
    float:right;
}
.globalmodaltitle .modal-actions a {
    text-decoration:none;
    font-size:1rem;
    display:inline-block;
    font-weight:bold;
    opacity:0.5;
    padding:2px 5px;
}

.globalmodaltitle .modal-actions a:hover {
    opacity:1;
}

/* modal.iframe */
.modal.iframe{}
.modal.iframe .modalguts{height:90%;width:90%;max-width:1100px;}
.modal.iframe .globalmodalcontent{padding:0; overflow: hidden;}
.modal.iframe .globalmodalcontent>iframe{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;}

/* default button */
#gModalModalsHolder .button.default{ background:rgba(0,0,0,0.04); color:var(--body-text, #333); }
#gModalModalsHolder .button.default:focus{}

/* primary button */
#gModalModalsHolder .button.primary{ background:var(--brand, blue); color:var(--body-bg, white); }
#gModalModalsHolder .button.primary:focus{}

/* danger button */
#gModalModalsHolder .button.danger{ background:rgba(0,0,0,0.04);color:var(--danger-dark, red); }
#gModalModalsHolder .button.danger:focus{}

/* success button */
.button.success{ background:rgba(0,0,0,0.04);color:var(--success-dark, green); }
.button.success:focus{}

/* rounded */
.button.rounded{border-radius:200rem;}

/* outline */
.button.outline{}

/* disabled */
.button[disabled],
.button[disabled]:hover,
button[disabled],
button[disabled]:hover{background:rgba(0,0,0,0.04) !important;color:var(--grey50) !important;font-weight:normal;cursor:not-allowed;pointer-events:none;}

/* click - cover */
#gModalClickCover { position:fixed;top:0;left:0;right:0;bottom:0;background:var(--ui-cover);z-index:2500;display:none; }

/* PfAlertbox */
.gUiAlertBox { position:fixed;top:0;left:50%;z-index:9999;transform:translateX(-50%);max-width:100%;width:500px;margin:auto;padding:0;pointer-events:none; }

/* modal choice menu */

.modal .choicemenu .choice { cursor: pointer; padding: 10px; border: 1px solid #ccc;border-radius:5px; margin-bottom: 10px; display:flex;gap:10px; }
.modal .choicemenu .choice:hover { border-color:var(--brand, #24f); background: white; }
.modal .choicemenu .choice:hover>i{ color:var(--brand, #24f); }
.modal .choicemenu .choice i { flex-grow:0;padding:10px; width: 1.5em; font-size: 1.5em; color: #888; text-align: center; border: 1px solid #ddd; vertical-align: middle; display: inline-block; height:1.15em; }
.modal .choicemenu .choice img { flex-grow:0; width: 32px; height: 32px; background: white; border: 1px solid #ddd; padding: 10px; }
.modal .choicemenu .choice div { flex-grow:1; }
.modal .choicemenu .choice div span { font-weight: bold; display: block; }

.modal .choicemenu.columns { display: inline-grid; column-gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
	.modal .choicemenu.columns { display: block; }
}