:root{
    --nb-popup-basic-bg-color: var(--nb-color-white);
    --nb-popup-basic-border-radius: var(--nb-border-radius-0);
    --nb-popup-basic-border-color: transparent;

    --nb-popup-basic-title-font-size: var(--nb-font-size-14);
    --nb-popup-basic-title-font-weight: var(--nb-font-semibold);
    --nb-popup-basic-description-font-size: var(--nb-font-size-14);
    --nb-popup-basic-description-font-weight: var(--nb-font-regular);

    --nb-popup-basic-icon-width: 36px;
    --nb-popup-basic-icon-wrapper-width: 46px;
    --nb-popup-basic-icon-border-color: #E8E8E8;
}

.nb-popup-basic .nb-popup-basic-wrapper{
    position: relative;
    max-width: 360px;
    box-shadow: 4px 4px 7px rgba(0,0,0,0.13);
    border-radius: var(--nb-popup-basic-border-radius);
    padding: 15px 15px;
    border: var(--nb-border-width) var(--nb-border-style) var(--nb-popup-basic-border-color);
    background-color: var(--nb-popup-basic-bg-color);
}
.nb-popup-basic .popup-basic-info-wrapper{
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}
.nb-popup-basic .nb-img{
    max-width: 60px;
}
.nb-popup-basic .popup-basic-info{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.nb-popup-basic .popup-basic-title{
    font-size: var(--nb-popup-basic-title-font-size);
    font-weight: var(--nb-popup-basic-title-font-weight);
}
.nb-popup-basic .popup-basic-description{
    font-size: var(--nb-popup-basic-description-font-size);
    font-weight: var(--nb-popup-basic-description-font-weight);
}
.nb-popup-basic .nb-btn{
    width: 100%;
    margin-top: 10px;
    height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.nb-popup-basic .icon-wrapper{
    position: absolute;
    left: 50%;
    top: calc(-1 * var(--nb-popup-basic-icon-wrapper-width) / 2);
    transform: translateX(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.nb-popup-basic .icon-wrapper .nb-icon{
    width: var(--nb-popup-basic-icon-width);
    height: var(--nb-popup-basic-icon-width);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nb-border-radius-full);
    background-color: var(--nb-popup-basic-bg-color);
    box-shadow: 1px 1px 8px rgba(0,0,0,0.13);
}
@media screen and (max-width: 576px) {
    .nb-popup-basic.closed .icon-wrapper .nb-icon:before{
        transform: rotate(180deg);
    }
    .nb-popup-basic .nb-popup-basic-wrapper{
        max-width: 100%;
        padding-top: 24px;
        mask-image: radial-gradient(circle 46px at center top, transparent 23px, black 24px);
        -webkit-mask-image: radial-gradient(circle 46px at center top, transparent 23px, black 24px);
    }
    .nb-popup-basic .icon-wrapper{
        display: flex;
        width: var(--nb-popup-basic-icon-wrapper-width);
        height: var(--nb-popup-basic-icon-wrapper-width);
        border-radius: var(--nb-border-radius-full);

    }
}