/***********************Start Popup CSS/***********************/
.popup{
    position: fixed;
    top:45%;
    left:50%;
    transform: translate(-50%,-50%);
    min-width:500px;
    width:max-content;
    max-width:70%;
    background: linear-gradient(145deg,var(--gradientMin), var(--gradientMax));
    padding:1rem;
    border-radius: 8px;
    transition: opacity 0.2s;
    backface-visibility: hidden;
    perspective: 1000px;
    opacity:0;
    z-index: -1;
    max-height:55vh;
    overflow-y: auto;
}

.popup[data-state=closed]{
    pointer-events: none;
}

.popup[data-state=open], .popup[data-location=onscreen]{
    transition: opacity 0.7s;
    opacity:1;
    z-index: 52;
}

.popup #confirm{
    margin: 1rem 0 0.3rem;
}

.popup label{
    text-align: center;
}

.popup #cancel{
    margin: 0.3rem 0 0 0;
}

.popup > section:first-child,
.popup > div:first-child{
    width:100%;
}

#itemPopupContainer{
    width:80%;
}

@media only screen and (max-width:767px){
    .popup{
        top:10%;
        left:5%;
        transform:translate(0,0);
        width:90%;
        min-width: 90%;
        max-height:calc(60vh - 10%);
        overflow-y: auto;
        justify-content: flex-start;
    }
    .popup form input{
        max-width:80%;
    }
}