:root {
    --popup-sm-max-height: 420px;
    --popup-sm-max-width: 414px;
    --popup-sm-container-max-width: 100%;

    --popup-md-max-height: 494px;
    --popup-md-max-width: 752px;
    --popup-md-container-max-width: 100%;

    --popup-xl-max-height: 538px;
    --popup-xl-max-width: 904px;
    --popup-xl-container-max-width: 700px;

    --popup-full-width-max-height: 823px;
    --popup-full-width-max-width: 100%;
    --popup-full-width-container-max-width: var(--container-width);
}
.popup {
    position: fixed;
    display: none;
    height: 100%;
    width: 100%;
    box-shadow: 0 0 10px 1px rgb(0 0 0 / 16%);
}
.popup:not(.faded) {
    z-index: 105;
}
.popup.faded {
    z-index: 6;
}
.popup:not(.popup-full-width) {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.popup.popup-xl {
    max-height: var(--popup-xl-max-height);
    max-width: var(--popup-xl-max-width);
}
.popup.popup-md {
    max-height: var(--popup-md-max-height);
    max-width: var(--popup-md-max-width);
}
.popup.popup-sm {
    max-height: var(--popup-sm-max-height);
    max-width: var(--popup-sm-max-width);
}
.popup.popup-fixed-bottom > div {
    position: fixed;
    bottom: 0px;
    left: 0px;
}
.popup.popup-full-width {
    top: 0;
    left: 0;
}
.popup .popup-inner {
    background-color: rgb(255 255 255);
}
.popup .popup-inner[class*="scrollbar-"] {
    overflow-x: hidden;
    overflow-y: auto;
}
.popup .popup-container {
    height: inherit;
    width: 100%;
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}
.popup.popup-xl .popup-container {
    max-width: var(--popup-xl-container-max-width);
}
.popup.popup-md .popup-container {
    max-width: var(--popup-md-container-max-width);
}
.popup.popup-full-width .popup-container {
    max-width: var(--popup-full-width-container-max-width);
}
.popup .popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    height: 25px;
    width: 25px;
    padding: 3px;
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
}

@media (-webkit-max-device-pixel-ratio: 1.99) and (min-width: 1440px), (-webkit-min-device-pixel-ratio: 2) and (min-width: 1920px) {

}

/*condition for 3 columns on Mac, if needed*/
@media (-webkit-max-device-pixel-ratio: 1.99) and (min-width: 1024px) and (max-width: 1439px), (-webkit-min-device-pixel-ratio: 2) and (min-width: 1024px) and (max-width: 1919px) {

}

@media (max-width: 992px) {
    :root {
        --popup-full-width-container-max-width: 962px;
    }
}
@media (max-width: 768px) {
    :root {
        --popup-full-width-container-max-width: 718px;
    }
    .popup .popup-close {
        right: 20px;
    }
}
@media (max-width: 767px) {
    .popup .popup-title {
        padding: 13px 15px;
        font-size: 15px;
        line-height: 17px;
        letter-spacing: 0.25em;
    }
}