/* POP UP NEW 17 SEP 2022 */






.sp-popup-modal {

    /* This Will Place the Content to Top Left */

    /* visibility: hidden; */

    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    animation-name: modalopen;
    animation-duration: 2s;


    /* width: 100vw;
    height: 100vh; */
    /* overflow-x: hidden;
    overflow-y: auto; */


}


@keyframes modalopen {


    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}













/* POPUP NEW 17 SEP 2022 */






/* SP Form Profile Photo INPUT Valid - Invalid Classes */

.sp-profile-photo-valid {

    border: 2px solid green;

}

.sp-profile-photo-invalid {

    border: 2px solid red;

}

/* SP Form Profile Photo INPUT Valid - Invalid Classes */

/* Photo Uplaod Block Error Class */

.sp-profile-photo-error {

    background-color: red;
    color: white;
    padding: 0.5rem !important;

}

/* Photo Uplaod Block Error Class */


/* Photo Uplaod Block Cropped Image Preview Class */

.sp-preview-cropped-photo {

    max-height: 200px;
    overflow: hidden;
    max-width: 200px;

}

/* Photo Uplaod Block Cropped Image Preview Class */


/* sp hiding classes */


.sp-hide {

    /* Element Takes its Space in Page. */
    /* Its Only Hidden, Not Removed Like display: none */

    visibility: hidden !important;


}

.sp-show {

    visibility: visible !important;


}

.sp-hide-display {

    /* What dis does is, it remove full element, while visbility only hides */
    /* Which Means this Visibility takes space */
    display: none !important;


}

.sp-show-display {

    display: block !important;


}

/* sp hiding classes */