/* setting popup colours */
:root{
}

.pbl-popup{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: var(--padding);

    width: 320px;
    box-sizing: border-box;
    height: fit-content;

    display: flex;
    flex-direction: column;
    justify-content: center;

    /* min-height: 110px; */

    transition: all 1s ease-in-out;

    /* color:black; */

    border-radius: 8px;

    z-index: 99999999;
    text-align: start;
    max-width: 320px;
    box-sizing: border-box;
}

.pbl-popup > img.cross{
    position: absolute;
    width: 25px;
    height: 25px;
    right: 20px;
    top: 42px;
    cursor: pointer;
}
.pbl-popup > img.cross.corner{
    top: 20px;
}

.pbl-popup.center{
    top:50%;
    transform: translate(-50%, -50%);
}
.pbl-popup.top{
    top:5%;
    transform: translate(-50%, 0%);
}
.pbl-popup.right-top{
    top:5%;
    right: 5%;
    left: unset;
    transform: unset;
}
.pbl-popup.notification{
    background: var(--grey);
    border: 2px solid var(--green);
    border-radius: 10px;
    color: white;
}
.pbl-popup.error{
    background: var(--grey);
    border: 2px solid var(--light-red);
    border-radius: 10px;
    color: white;
}

.pbl-popup.moving-out{
    top: -50%;
}
.pbl-popup > p{
    margin-top: 0px;
    font-size: 15px;
    overflow-wrap: normal;
    padding-right: 30px;
}
.pbl-popup > p:last-child{
    margin-bottom: 0px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .pbl-popup{
        padding: 15px;
        min-height: 60px;
    }
    .pbl-popup > img.cross{
        width: 25px;
        height: 25px;
        right: 15px;
        top: 15px;
    }
}
@media screen and (max-width: calc(720px + 2em)) {
    .pbl-popup > img.cross{
        width: 25px;
        height: 25px;
        right: 15px;
        top: 15px;
    }
}