.popup-wrapper {
    position  : fixed;
    z-index   : 1300;
    right     : 0;
    bottom    : 0;
    top       : 0;
    left      : 0;
    opacity   : 0;
    visibility: hidden;
    transition: 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.popup-wrapper.open {
    opacity   : 1;
    visibility: visible;
}

.popup-backdrop {
    position                   : fixed;
    display                    : flex;
    align-items                : center;
    justify-content            : center;
    right                      : 0;
    bottom                     : 0;
    top                        : 0;
    left                       : 0;
    background-color           : rgba(0, 0, 0, 0.5);
    -webkit-tap-highlight-color: transparent;
    z-index                    : -1;
}

.popup-container {
    height         : 100%;
    outline        : 0;
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.popup {
    position        : relative;
    display         : flex;
    flex-direction  : column;
    background-color: var(--body);
    color           : var(--text);
    box-shadow      : 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
    margin          : 10px;
    overflow-y      : auto;
    width           : 100%;
    max-width       : 768px;
    max-height      : calc(100vh - 150px);
    border-radius   : var(--rounded-default);
    transition      : box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

@media(max-width: 576px) {
    .popup {
        justify-content: space-between;
    }

    .popup.mobilefull {
        margin       : 0;
        min-height   : 100vh;
        min-width    : 100vw;
        border-radius: 0;
    }
}

@media(max-width: 768px) {
    .popup.tabletfull {
        margin       : 0;
        min-height   : 100vh;
        border-radius: 0;
    }
}

.popup-title {
    display      : flex;
    align-items  : center;
    margin       : 0;
    font-weight  : 500;
    font-size    : 1.5rem;
    padding      : 12px 24px;
    flex         : 0 0 auto;
    border-bottom: 1px solid var(--border);
}

.popup-title h2 {
    margin: 0;
}

.popup-content {
    flex                      : 1 1 auto;
    -webkit-overflow-scrolling: touch;
    overflow-y                : auto;
    padding                   : 16px 24px;
    background-color          : var(--body);
}

.popup-actions {
    display        : flex;
    align-items    : center;
    padding        : 12px;
    justify-content: flex-end;
    flex           : 0 0 auto;
    gap            : 10px;
    border-top     : 1px solid var(--border);
}

.popup-actions > button,
.popup-actions > div {
    margin-left: 5px;
}

.popup-close {
    position: absolute;
    top     : 10px;
    right   : 10px;
}

.popup-close .close-btn {
    display         : flex;
    align-items     : center;
    justify-content : center;
    background-color: var(--slate-100);
    padding         : 5px;
    border-radius   : var(--rounded-full);
    width           : 35px;
    height          : 35px;
    cursor          : pointer;
}

.popup-close .close-btn svg {
    width : 25px;
    height: 25px;
}

.popup-actions-close {
    display         : flex;
    align-items     : center;
    justify-content : center;
    position        : relative;
    box-sizing      : border-box;
    outline         : 0;
    margin          : 0;
    padding         : 8px 30px 7px;
    cursor          : pointer;
    user-select     : none;
    text-decoration : none;
    font-size       : 1rem;
    font-weight     : 500;
    text-transform  : none;
    min-width       : 64px;
    width           : auto;
    border-radius   : var(--rounded-default);
    transition      : background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    box-shadow      : none;
    border          : 1px solid;
    background-color: var(--slate-300);
    color           : #292929;
    border-color    : transparent;
}
.popup-actions-close:hover {
    background-color: var(--slate-200);
}