/* RESET */

.mi-bsmodal * {
    padding: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    background-color: transparent;
    border: none;
    text-decoration: none;
 }
 .mi-bsmodal button {
    cursor: pointer;
 }
 .mi-bsmodal ul {
    list-style:none;
 }

/* ==================================================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MODAL DESKTOP */
/* ==================================================================================== */

.mi-bsmodal {
    display: none;
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    outline: none;
    font-size: 1rem;
    line-height: 1.4;
    color: #3D3D3D;
    -webkit-overflow-scrolling: touch;
}

/* Dialog */

.mi-bsmodal-dialog {
    position: relative;
    width: 100%;
    max-width: 550px;
    margin: 30px auto;
}

.mi-bsmodal--small .mi-bsmodal-dialog {
    max-width: 390px;
}
.mi-bsmodal--large .mi-bsmodal-dialog {
    max-width: 850px;
    padding-right: 10px;
    padding-left: 10px;
}

/* Content */

.mi-bsmodal-content {
    position: relative;
    background-color: #ffffff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Backdrop */

.mi-bsmodal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000000;
}

/* Header */

.mi-bsmodal-header {
    padding: 50px 30px 20px;
}
.mi-bsmodal-header__title {
    font-size: 1.6em;
    line-height: 1.25;
    margin: -0.1em 30px -0.1em 0;
}
.mi-bsmodal-header__title:only-child {
    margin-right: 0;
}
.mi-bsmodal-header__close {
    position: absolute;
    background: none;
    border: none;
    top: 15px;
    right: 15px;
    padding: 15px;
    color: #BCC3CB;
    font-size: 1.4em;
    line-height: 1;
    display: flex;
}
.mi-bsmodal-header__close:hover {
    color: #757575;  
}

/* Body */

.mi-bsmodal-body {
    padding: 20px 30px 40px;
}

/* Footer */

.mi-bsmodal-footer {
    padding: 30px 0 50px;
    text-align: center;
}


/* ---------------- Animation */

/* Fade */

.mi-bsmodal.fade {
    opacity: 0;
    transition: opacity 0.15s linear;
}
.mi-bsmodal.fade .mi-bsmodal-dialog {
    transform: translateY(-25%);
    transition: transform 0.3s ease-out;
}
.mi-bsmodal-backdrop.fade {
    opacity: 0;
}

/* Show */

.mi-bsmodal.show {
    opacity: 1;
}  
.mi-bsmodal.show .mi-bsmodal-dialog {
    transform: translateY(0);
}
.mi-bsmodal-backdrop.show {
    opacity: 0.5;
}



/* ==================================================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MODAL MOBILE */
/* ==================================================================================== */


.mim-modal {
    font-size: 1rem;
}


/* ------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------- Content-modal */

/* ------------------------------ Scroll */

.mim-modal > .mi-be-content-modal {

    overflow: auto;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
}


/* ------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------- Modal Header */


.mim-modal-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 9;
    background-color: var(--bg-color__secundary);
    border-bottom: 1px solid var(--border-color);
    padding: calc(var(--space) / 2);
    min-height: 60px;
    box-sizing: border-box;
}

.mim-modal-header > * {

    padding: calc(var(--space) / 2);
}

/* ------------------------------ Title */

.mim-modal-header__title {

    flex: 1;
    min-width: 40%;
    font-size: 1.1em;
    line-height: 1.25;
    margin-top: -.15em;
    margin-bottom: -.15em;
    text-align: center;
    color: var(--text-color__secundary);
}

.mim-modal-header__title:last-child {

    margin-right: 30px;
}

/* ------------------------------ Close */

.mim-modal-header__close {

    background: none;
    border: none;
}

.mim-modal-header__close [class*=mi-ico] {

    display: block;
    font-size: 20px;
    color: var(--text-color__secundary);
}


/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------- Modal body */


.mim-modal-body {

    flex: 1;
}

.mim-modal-body__container {

    padding: calc(var(--space) * 2) var(--space);
    width: 100%;
    box-sizing: border-box;
}

/* ------------------------------------------------------------------------------------ */
/* -------------------------------------------------------------- Modal body containers */


.mim-modal-body__container > * + *:not(:empty) { /* fix specificity */

    margin-top: calc(var(--space) * 2);
}

/* ------------------------------ Text container */

.mim-modal-body__text {

    padding: 0 calc(var(--space) / 2);
}

.mim-modal-body__text > * + * {

    padding-top: calc(var(--space) / 2);
}

/* ------------------------------ List container */

.mim-modal-body__list {

    background-color: var(--bg-color__secundary);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin: 1px;
    padding: calc(var(--space) / 4) var(--space);
}

.mim-modal-body__list > * + * {

    border-top: 1px solid #ddd;
}

/* List item */

.mim-modal-body__list-item {

    padding: var(--space) 0;
}

.mim-modal-body__list-item > * + * {

    padding-top: calc(var(--space) / 2);
}

/* List inside list */

.mim-modal-body__list-item li::before {

    content: "";
    display: inline-block;
    height: 3px;
    width: 3px;
    background-color: #555;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
}


/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------- Modal body fonts */


/* ------------------------------ Body and list titles */

.mim-modal-body__title,
.mim-modal-body__list-title {

    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.25;
    margin-top: -.15em;
    margin-bottom: -.15em;
}

.mim-modal-body__list-title--payment {

    color: var(--color-payment);
}
.mim-modal-body__list-title--cancellation {

    color: var(--color-cancel);
}


/* ------------------------------ Body mini label */


.mim-modal-body__label { /* fix specificity */

    display: flex;
    align-items: baseline;
    font-size: .74em;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0 calc(var(--space) / 2) calc(var(--space) / 2);
    color: var(--text-color__secundary);
}

.mim-modal-body__label [class*="mi-ico"] {

    font-size: 1.6em;
    padding: 0 calc(var(--space) / 3) 0 0;
}


/* ------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------- Modal footer */

.mim-modal-footer {

    padding: calc(var(--space) * 2) var(--space);
    background-color: var(--bg-color__secundary);
    border-top: 1px solid var(--border-color);
    position: sticky;
    bottom: 0;
}

.mim-modal-footer .mi-s-button {
    width: 100%;
    padding: calc(var(--space) * 1.5);
    font-size: 1.25em;
    line-height: 1.2;
}

@media ( orientation: landscape ) {

.mim-modal-footer {

    padding: var(--space);
}
}


/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ Modal content animation */


.mim--slide-in-up .mim-extra-detail__body > *,
.mim--slide-in-up .mim-modal-body__container > * {
    --timing: .7;
    animation: hello-modal-content calc(var(--timing) * 1s ) cubic-bezier(0.71, 0.11, 0.49, 1.1);
}
.mim-extra-detail__body > *:nth-child(2),
.mim-modal-body__container > *:nth-child(2) {
    animation-duration: calc(var(--timing) * 1.1s );
}
.mim-extra-detail__body > *:nth-child(3),
.mim-modal-body__container > *:nth-child(3) {
    animation-duration: calc(var(--timing) * 1.15s );
}
.mim-extra-detail__body > *:nth-child(4),
.mim-modal-body__container > *:nth-child(4) {
    animation-duration: calc(var(--timing) * 1.2s );
}
.mim-modal-body__container > *:nth-child(5) {
    animation-duration: calc(var(--timing) * 1.25s );
}

@keyframes hello-modal-content {
    0%   { transform: translateY(30px); opacity: 0.2; }
    25%  { transform: translateY(30px); }
    100% { transform: translateY(0px); opacity: 1; }
}
 

/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------- Modal ANIMATIONS */


/* ---------------------------------- Timming */

.mim--zoom-in,
.mim--zoom-in > .mi-be-content-modal {

	animation-duration: .4s;
	animation-fill-mode: both;
}
.mim--zoom-out,
.mim--zoom-out > .mi-be-content-modal {

	animation-duration: .2s;
	animation-fill-mode: both;
}


.mim--slide-in-up,
.mim--slide-in-up > .mi-be-content-modal {
	animation-duration: .6s;
	animation-fill-mode: both;
}
.mim--slide-out-down,
.mim--slide-out-down > .mi-be-content-modal {
	animation-duration: .5s;
	animation-fill-mode: both;
}

/* ---------------------------------- Zoom in / out animation */

.mim--zoom-in > .mi-be-content-modal {

	animation-name: mim-zoom-in;
}

.mim--zoom-out > .mi-be-content-modal {

	animation-name: mim-zoom-in;
	animation-direction: reverse;
}

@keyframes mim-zoom-in {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}
	50%, 100% {
		opacity: 1;
	}
}


/* ---------------------------------- Slide up / Down animation */


.mim--slide-in-up > .mi-be-content-modal {

	animation-name: mim-slide-in-up;
}

.mim--slide-out-down > .mi-be-content-modal {

	animation-name: mim-slide-in-up;
	animation-direction: reverse;
	animation-timing-function: ease-in;
}

@keyframes mim-slide-in-up {
	from {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
		visibility: visible;
	}
	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}



/* ---------------------------------- Modal background animation: "cortinilla" */


.mim-modal {

	--modal-bg-color: rgba(240, 240, 240, 0.5);

	animation-name: mim-bg-in;
	background: var(--modal-bg-color);
}

.mim--zoom-out,
.mim--slide-out-down {

	animation-name: mim-bg-in;
	animation-direction: reverse
}

@keyframes mim-bg-in {
	from {
		background: rgba(240,240,240,0);
	}
	to {
		background: var(--modal-bg-color);
	}
}






/* ---------------------------- Old */

.mi-be-modal {

	position: fixed;
    top: 0;
    left: 0;
    right: 0;
	bottom: 0;
    z-index: 5000;
}

.mi-be-content-modal {

	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFF;
    height: 100%;
}

.mi-be-modal-visible {
	opacity: 1
}

.mi-be-modal-no-visible {
    height: 0;
	opacity: 0;
    pointer-events: none;
    width: 0;
}

.mi-be-modal-no-visible div {
    height: 0;
    width: 0;
}