/* BE - Modal Defautls */
.i-modal { --iModalPadding: 1.5rem; background-color: hsla(var(--black), 70%); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; visibility: hidden; opacity: 0; transition: all ease-in-out 0.3s; }
.i-modal-body {
  --outsideMargin: 2rem;
	background-color: hsl(var(--white));
	visibility: hidden;
	opacity: 0;
	transform: translateY(10%);
	transition: all ease-in-out 0.4s;
	height: 100%;
	width: 100vw;
	display: grid;
	grid-template-rows: auto 100% auto;
	/* has to be 100% so it can calculate the header and footer in the JS */
  /* in order to fix the ios12 iphone6 issue ^...see the JS bit in modal.js */
	grid-template-areas:
		"iModalHeader"
		"iModalMain"
		"iModalFooter"
	;
}
.i-modal-header-bar .i-modal-close { background-color: transparent; padding: 0.25rem; margin-right: -0.5rem; }
.i-modal.open { z-index: 100; opacity: 1; visibility: visible; transform: translateY(0); }
.i-modal.open .i-modal-body { opacity: 1; visibility: visible; transform: translateY(0); }
.i-modal-header-bar .i-modal-close:focus { outline: none; }
.i-modal-header-bar .i-modal-close .icon { margin: 0; }
.i-modal-header-bar { grid-area: iModalHeader; display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.5rem; line-height: 1; border-bottom: 0.0625rem hsla(var(--black), 10%) solid; }
.i-modal-header-bar .icon { width: 2rem; height: 2rem; color: hsla(var(--siteColor1), 50%); }
.i-modal-header-heading { font-size: 1.5rem; font-weight: var(--wBold); line-height: 1; color: hsl(var(--siteColor1)); }
.i-modal-footer-bar { grid-area: iModalFooter; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 1.25rem; background-color: hsla(var(--siteColor1), 10%); position: relative; border-top: 0.0625rem hsla(var(--black), 10%) solid; }
.i-modal-footer-bar button { padding: 1rem 1.5rem 1rem 1rem; }
.i-modal-main { grid-area: iModalMain; overflow: auto; }
.i-modal-main p:last-child { margin-bottom: 0; }
.i-modal-main-container { padding: var(--iModalPadding); }
.i-modal-alert { position: absolute; top: 100%; left: 50%; z-index: 10; transform: translate(-50%, 0); width: 100%; border-radius: 0; text-align: center; }
.i-modal-alert.alert .close { padding: 0; }
.i-modal > form { height: 100%; }
body [data-i-modal] { cursor: pointer; }
html.modal-open { overflow: visible; }
@media (min-width: 1025px) {
  html.modal-open,
  html.modal-open body,
  html.modal-open .mls-wrapper { width: auto; height: auto; overflow: visible; }
	.i-modal { display: flex; justify-content: center; align-items: baseline; backdrop-filter: blur(0.5rem); }
	.i-modal > form { height: auto; }
	.i-modal-body {
  	margin-top: var(--outsideMargin); max-width: 45rem; max-height: calc(100vh - calc(var(--outsideMargin) * 2)); min-width: 38rem; min-height: 8rem; width: auto; height: auto; border-radius: var(--borderRadius); box-shadow: var(--dropShadow), var(--dropShadow);
  	grid-template-rows: auto 1fr auto;
	}
	.i-modal-sm .i-modal-body { min-width: 20rem; max-width: 30rem; }
	.i-modal-lg .i-modal-body { min-width: 55rem; max-width: 75rem; }
	.i-modal-full .i-modal-body { min-width: calc(100vw - calc(var(--outsideMargin) * 2)); max-width: calc(100vw - calc(var(--outsideMargin) * 2)); }
	.i-modal-main { display: flex; flex-direction: column; padding: var(--iModalPadding); }
	.i-modal-main-container { padding: 0; }
	.i-modal-header-bar .i-modal-close { position: absolute; top: -0.5rem; right: -0.5rem; background-color: hsl(var(--white)); border-radius: 100rem; box-shadow: var(--dropShadow); margin: 0; }
	.i-modal-header-heading { display: block; padding: var(--iModalPadding) var(--iModalPadding) 1.25rem; }
	.i-modal-header-bar { grid-area: iModalHeader; padding: 0; position: relative; }
	.i-modal-header-bar .icon { width: 1.25rem; height: 1.25rem; }
	.i-modal-header-bar:after { border: none; position: relative; }
	.i-modal-footer-bar { padding: var(--iModalPadding); background-color: transparent; }
	.i-modal-alert { border-radius: 0.25rem; width: auto; line-height: 1; display: flex; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
	.i-modal-footer-bar .i-modal-close { border: 0.0625rem solid hsla(var(--siteColor1), 25%); }
	.i-modal-footer-bar button { padding: 0.75rem 1.5rem 0.75rem 1rem; }
}

/* Custom Modals */
.favorites-requires-login .i-modal-main { padding: var(--iModalPadding); }