@import '../../styles/utils.scss';
.popup-container {
    box-sizing: border-box;
    background-image: url('../../assets/card-bg/frame_filter_center@2x.png');
    background-position: top center;
    background-repeat: repeat-y;
    background-size: contain;
    position: relative;
    animation: fadeInBottom 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    .card-border-bottom-left,
    .card-border-bottom-right,
    &::before,
    &::after {
        content: '';
        position: absolute;
        width: px2rem(40px * 2);
        height: px2rem(40px * 2);
        background-color: transparent;
        border-left: px2rem(1px) solid #00a3ff;
        border-top: px2rem(1px) solid #00a3ff;
        top: 0;
        left: 0;
    }
    .card-border-bottom-right,
    &::after {
        border-left: unset;
        border-right: px2rem(1px) solid #00a3ff;
        right: 0;
        left: unset;
    }
    .card-border-bottom-left,
    .card-border-bottom-right {
        bottom: 0;
        top: unset;
        border-bottom: px2rem(1px) solid #00a3ff;
        border-top: unset;
    }
}