/**********************************************************************************************
 **********************************************************************************************
 ***  Copyright(c) 2020 Leeward Digital, LLC. Henderson, NV. All Rights Reserved.
 ***
 ***  Filename      : leewardx-notification.css
 ***  Author        : Leeward Digital
 ***  Created On    : April 9, 2020 GMT-7
 ***
 ***  Modified By   :
 ***  Modified On   :
 ***
 ***  Description   : A supplementary style sheet app notifications
 ***
 ***  Requirement/s : leewardx-icons.css
 *********************************************************************************************
 *********************************************************************************************/

.notification-wrapper {
    position: fixed;
    min-width: 300px;
    max-width: 90%;
    max-height: 100%;
    overflow: hidden;
    padding: 0 7px;
    display: block;
    background: transparent;
    top: 21px;
    z-index: 2147483647;
    left: 50%;
    transform: translateX(-50%);
}

.ld-notification {
    position: relative;
    border-radius: 7px;
    overflow: hidden;
    background: #DCDCDC;
    opacity: 0;
    white-space: nowrap;
    border: 1px solid gainsboro;
    margin-top: -110px;
    min-width: 300px;
}

.ld-notification.in {
    opacity: 1;
    margin-top: 0;
}

.notification-wrapper,
.ld-notification { transition: all 0.3s ease-in-out; }

.ld-notification.template { display: none; }
.ld-notification:not(.template)~.ld-notification { margin-top: 14px; }

.ld-notification .header {
    width: 100%;
    height: 100px;
}

.ld-notification .header .title {
    margin: 14px 0 0 21px;
    position: absolute;
}

.ld-notification .header .notification-close {
    cursor: pointer;
    position: absolute;
    top: 11px;
    right: 7px;
}

.ld-notification .header .notification-close,
.ld-notification .header .notification-close:before,
.ld-notification .header .notification-close:after {
    width: 21px;
    height: 21px;
}

.ld-notification .content {
    font-weight: bold;
    padding: 21px;
    background-color: #fff;
    margin-top: -56px;
}

.ld-notification.danger { color: #a94442; }
.ld-notification.danger .header { background: #f2dede; }

.ld-notification.warning { color: #8a6d3b; }
.ld-notification.warning .header { background: #fcf8e3; }

.ld-notification.success { color: #3c763d; }
.ld-notification.success .header { background: #dff0d8; }

.ld-notification.info { color: #777 }
.ld-notification.info .header { background: gainsboro; }

.ld-notification .ld-btn {
    height: 35px;
    margin-top: 14px;
    padding: 6px 21px;
}

.notification-wrapper.overlay ~ #ldx-loader-overlay .ldx-loader { display: none; }
.notification-wrapper.overlay ~ #ldx-loader-overlay { display: block !important; }

@media (min-width: 813px) and (min-height: 726px) {
    .notification-wrapper {
        min-width: 41.37931034482759vh;
        overflow: hidden;
        padding: 0 0.9655172413793104vh;
        top: 2.896551724137931vh;
    }
	
	.ld-notification {
		border-radius: 0.9655172413793104vh;
		border: 0.13793103448275862vh solid gainsboro;
		margin-top: -15.172413793103448vh;
		min-width: 41.37931034482759vh;
	}
	
	
	
	.ld-notification .header {
		height: 13.793103448275861vh;
	}
	
	.ld-notification .header .title {
		margin: 1.9310344827586208vh 0 0 2.896551724137931vh;
	}
	
	.ld-notification .header .notification-close {
		top: 1.5172413793103448vh;
		right: 0.9655172413793104vh;
	}
	
	.ld-notification .header .notification-close,
	.ld-notification .header .notification-close:before,
	.ld-notification .header .notification-close:after {
		width: 2.896551724137931vh;
		height: 2.896551724137931vh;
	}
	
	.ld-notification .content {
		padding: 2.896551724137931vh;
		margin-top: -7.724137931034483vh;
	}
	
	.ld-notification .ld-btn {
		height: 4.827586206896552vh;
		margin-top: 1.9310344827586208vh;
		padding: 0.8275862068965517vh 2.896551724137931vh;
	}
}