:root {
    --modal-transition-time: 0.25s;
}

html.nbuxModalOpen body {
  overflow: hidden;
}

.nbuxModal[data-status="open"],
.nbuxModal[data-status="opening"],
.nbuxModal[data-status="closing"] {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.nbuxModal[data-status="closed"] {
	display: none;
}

.nbuxModal__overlay {
    position: fixed;
    z-index: 1001;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-black);
    opacity: 0;
    transition: none;
}

.nbuxModal[data-status="opening"] .nbuxModal__overlay,
.nbuxModal[data-status="closing"] .nbuxModal__overlay {
    transition: opacity var(--modal-transition-time) ease-in-out;
    top: 0;
}

.nbuxModal[data-status="opening"] .nbuxModal__overlay,
.nbuxModal[data-status="open"] .nbuxModal__overlay {
    top: 0;
    opacity: 0.8;
}

.nbuxModal__card {
	display: block;
    z-index: 1002;
    border-radius: 4px;
    background: #f8f8f8;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    opacity: 0;
    transition: none;
}

.nbuxModal__card_waiting {
    background: rgba(37,37,37,.82);
}

.nbuxModal__card_waitingFixedWidth {
    min-width: 236px;
    max-width: 236px;
}

.nbuxModal[data-status="opening"] .nbuxModal__card,
.nbuxModal[data-status="closing"] .nbuxModal__card {
    transition: all var(--modal-transition-time) ease-in-out;
    position: fixed;
}

.nbuxModal[data-status="opening"] .nbuxModal__card,
.nbuxModal[data-status="open"] .nbuxModal__card {
    top: 50%;
    opacity: 1;
    position: fixed;
}

.nbuxModal__content {
    box-sizing: border-box;
}

.nbuxModalWaiting {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
	padding: var(--gutter);
    box-sizing: border-box;
}

#loadingSpinner {
	width: 28px;
	height: 28px;
    margin: 0 0 calc(var(--gutter, 16px) / 2);
}

.nbuxModalWaiting__title {
    font-weight: bold;
    font-size: var(--font-body-font-size, 16px);
    line-height: var(--font-body-line-height, 24px);
    font-family: var(--font-primary, "poppins");
    font-weight: 400;
    text-align: center;
    color: var(--color-white, #fefefe);
}

/* ------------------------------------------

    CARDINAL OVERLAY

------------------------------------------ */

.myAccountBody .cardinalOverlay-mask.cardinalOverlay-open,
.checkout .cardinalOverlay-mask.cardinalOverlay-open {
    opacity: 0!important;
}

.myAccountBody .cardinalOverlay-content,
.checkout .cardinalOverlay-content {
	border-radius: var(--shape-8, 8px)!important;
}