/* @override 
	https://bcpbnk.drup.ch/themes/custom/plus10/css/modal.css?* */

/* #region MODAL global */

.p-modal-link a * {
    pointer-events: none
}

/* voile */
.p-modal {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    left: 0;
    z-index: 1999;
    perspective: 100vh;

    bottom: -100vh;
    opacity: 0;

    transition: bottom 0s .5s, opacity .3s linear .1s;
}


.p-modal-open {
    opacity: 1;
    bottom: 0;

    transition: bottom 0s 0s, opacity .2s linear 0s;
}

/* fenêtre */
.p-modal-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;

    opacity: 0;
    transition: .5s linear .1s;
}

.p-modal-open .p-modal-inner {
    opacity: 1;
    transition: .5s ease-out .2s;
}

.p-modal-overflow {
    overflow: auto !important;
}

/* btn close xxxxxxxxxxx */
.p-modal-close {
    position: absolute;
    right: 0;
    top: 0;
    margin: 3px 20px 0 0;
    z-index: 2000;
}
.p-ajax-modal .p-modal-close {
	top: 2rem;
	right: 1rem;
}

/* #endregion */


/* #region MODAL styles */

/* voile */
.p-modal {
    background: rgba(255,255,255, 0.7);
	-webkit-backdrop-filter: blur(1rem);
	backdrop-filer: blur(1rem);
	
}
.p-ajax-modal {
	background: rgba(0,0,0, 0.2);
	-webkit-backdrop-filter: blur(0);
	backdrop-filer: blur(0);
}

/* fenêtre */
.p-modal-inner {
    /* largeur modal ------ */
    max-width: 800px;
    /* fermé */
    /*transform: scale(.7) rotateX(15deg);*/
}

.p-ajax-modal .p-modal-inner {
	max-width: 1200px;
	background: #FFF url('img/stroke-logo.svg') no-repeat center center;
	background-size: cover;
	padding: 0;
}

/* ouvert */
/* .p-modal-open .p-modal-inner {
    transform: scale(1) rotateX(0deg);
} */

.p-modal-overflow {
    /* hauteur et position de la modale ---- */
    max-height: 70vh;
    margin: 1rem 10px;
	width: 100%;
	display: flex;

    /*background: var(--bs-light);*/
    color: var(--bs-body-color);
}

.p-ajax-modal .p-modal-overflow {
	max-height: 90vh;
	margin-top: 5vh;
}
@media (max-width:768px) {
	.p-ajax-modal .p-modal-overflow {
		margin-top: 0;
		height: 100vh;
		max-height: none;
	}
}

.p-modal-overflow a {
    color: var(--bs-primary);
}

.p-modal-overflow a:hover {
    color: var(--bs-body-color);
}

/* #endregion */