/**********************************************************************************************
 **********************************************************************************************
 ***  Copyright(c) 2020 Leeward Digital, LLC. Henderson, NV. All Rights Reserved.
 ***
 ***  Filename      : leewardx-modal.css
 ***  Author        : Leeward Digital
 ***  Created On    : April 9, 2020 GMT-7
 ***
 ***  Modified By   :
 ***  Modified On   :
 ***
 ***  Description   : A supplementary style sheet for $.fn.ldModal(...) in leewardx-lib.js
 ***
 ***  Requirement/s : leewardx-icons.css
 *********************************************************************************************
 *********************************************************************************************/

.ld-modal-overlay {
    background-color: rgba(0, 0, 0, 0.65);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
}

.ld-modal-overlay.active { display: block; }

.ld-modal {
    padding: 28px 3px 28px 35px;
    float: left;
    min-width: 475px;
    max-width: 99%;
    max-height: calc(100% - 28px);
    background-color: #fff;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 7px;
    font-size: 16px;
    box-shadow: 0 2px 7px -1px #0b192e88
}

.ld-modal a { color: #157efb; }

.ld-modal-overlay.in .ld-modal {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*   START: MODAL HEADER   */
.ld-modal .ld-modal-header {}
.ld-modal .ld-modal-header.big { font-size: 28px; }

.ld-modal .ld-modal-header .ld-modal-close {
    cursor: pointer;
    float: right;
    position: absolute;
    right: 10px;
    top: 10px;
}

.ld-modal .ld-modal-header .ld-modal-close ~ *:not(.header-infotext) {
    padding: 0 0 21px 0;
    margin: 0;
    width: calc(100% - 14px);
    float: left;
    font-weight: 400;
    font-size: 25px;
}

.header-infotext {
    font-size: initial;
    display: inline-grid;
    text-align: left;
}

/*   END: MODAL HEADER   */



/*   START: MODAL CONTENT   */
.ld-modal .ld-modal-content {
    max-height: calc(100% - 224px);
    overflow: auto;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 0;
}
/*   END: MODAL CONTENT   */



/*   START: MODAL FOOTER   */
.ld-modal .ld-modal-footer {
   margin-top: 21px;
   margin-bottom: -7px;
}

.ld-modal-footer .sci-btn { padding: 9px 21px; }
.ld-modal-footer > * { display: inline-flex; }
/*   END: MODAL FOOTER   */



/*   START: COMMON   */
.ld-modal-overlay,
.ld-modal {
    display: none;
    opacity: 0;
}

.ld-modal-overlay.active,
.ld-modal-overlay.active .ld-modal { position: fixed !important; }
.ld-modal-overlay.active .ld-modal {
    display: flex;
    flex-direction: column;
}
.ld-modal-overlay.active,
.ld-modal-overlay.in .ld-modal { opacity: 1; }

.overflow-hidden-all > *,
.ld-modal-overlay,
.ld-modal {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.ld-modal .ld-modal-header,
.ld-modal .ld-modal-content,
.ld-modal .ld-modal-footer { padding-right: 32px; }
.ld-modal .ld-modal-header,
.ld-modal .ld-modal-footer { text-align: center; }
/*   END: COMMON   */



/*   deny overflow on all except explicitly excluded   */
.overflow-hidden-all,
.overflow-hidden-all *:not(input):not(.yui3-dial-content):not(.yui3-dial-ring):not(.yui3-dial):not(. no-overflow-exempt):not(.ld-modal-content):not(.ld-input-wrapper) { overflow: hidden; }

#modalWaitingWheel.ld-modal {
    padding: 0;
    float: unset;
    min-width: unset;
    max-width: unset;
    max-height: unset;
    background-color: transparent;
    box-shadow: none;
    width: auto;
}

#modalWaitingWheel.ld-modal .ld-modal-content {
    padding: 0;
    overflow: hidden;
}
/*   END: OTHERS   */


@media only screen and (max-width: 768px) {
    .ld-modal { width: 95%; }
    .ld-modal-footer { text-align: center; }
}

@media (min-width: 813px) and (min-height: 726px) {
	.ld-modal {
		padding: 3.8620689655172415vh 0.41379310344827586vh 3.8620689655172415vh 4.827586206896552vh;
		min-width: 65.51724137931035vh;
		max-height: calc(100% - 3.8620689655172415vh);
		border-radius: 0.9655172413793104vh;
		font-size: 2.206896551724138vh;
		box-shadow: 0 0.27586206896551724vh 0.9655172413793104vh -0.13793103448275862vh #0b192e88
	}
	
	.ld-modal .ld-modal-header {}
	.ld-modal .ld-modal-header.big { font-size: 3.8620689655172415vh; }
	
	.ld-modal .ld-modal-header .ld-modal-close {
		right: 1.3793103448275863vh;
		top: 1.3793103448275863vh;
	}
	
	.ld-modal .ld-modal-header .ld-modal-close ~ *:not(.header-infotext) {
		padding: 0 0 2.896551724137931vh 0;
		width: calc(100% - 1.9310344827586208vh);
		font-size: 3.4482758620689653vh;
	}
	
	.ld-modal .ld-modal-content {
		max-height: calc(100% - 30.896551724137932vh);
		padding-top: 0.9655172413793104vh;
		padding-bottom: 0.9655172413793104vh;
	}
	
	.ld-modal .ld-modal-footer {
		margin-top: 2.896551724137931vh;
		margin-bottom: -0.9655172413793104vh;
	}
	
	.ld-modal-footer .sci-btn { padding: 1.2413793103448276vh 2.896551724137931vh; }
	
	.ld-modal .ld-modal-footer { padding-right: 4.413793103448276vh; }
}