@keyframes slide-in-out {
    0% {
        right: -1900px;
    }
    100% {
        right: 0;
    }
}
@keyframes slide-in-out-2 {
    0% {
        right: -1900px;
    }
    100% {
        right: 0%;
    }
}
.blur {
    filter: blur(18px);
}
.notiP {
    margin-left: 2%;margin-right: 2%;text-align: center; top: 30vh; position:absolute; color: white; font-size: 1.2rem;
}
.noti-holder-job {
    height: 80vh;
    top: 15vh;
    position: absolute;
    right: 0;
    display: none;
    background-color: #114856;
    border: solid 0;
    width: 30%;
    border-radius: 15px 0px 0px 15px;
    z-index: 12;
    animation: slide-in-out 1s;
}
.noti-holder{
    height: 80vh;
    top: 10vh;
    position: absolute;
    right: 0;
    display: none;
    background-color: #114856;
    border: solid 0;
    width: 30%;
    border-radius: 15px 0px 0px 15px;
    z-index: 1;
    animation: slide-in-out 1s;
}
.noti-holder-ww{
    height: 80vh;
    top: 5vh;
    position: absolute;
    right: 0;
    display: none;
    background-color: #114856;
    border: solid 0;
    z-index: 10;
    width: 30%;
    border-radius: 15px 0px 0px 15px;
    animation: slide-in-out 1s;
}
.noti-holder-per {
    height: 80vh;
    top: 10vh;
    position: absolute;
    right: 0;
    display: block;
    background-color: #114856;
    border: solid 0;
    width: 30%;
    border-radius: 15px 0px 0px 15px;
    z-index: 1;
}
@media screen and (max-width: 600px) {
    .noti-holder-job {
        height: 80vh;
        top: 15vh;
        position: absolute;
        right: 0;
        display: none;
        background-color: #114856;
        border: solid 0;
        width: 90%;
        border-radius: 15px 0px 0px 15px;
        z-index: 12;
        animation: slide-in-out 1s;
    }
    .noti-holder-ww{
        height: 80vh;
        top: 5vh;
        position: absolute;
        right: 0;
        display: none;
        background-color: #114856;
        border: solid 0;
        width: 90%;
        z-index: 10;
        border-radius: 15px 0px 0px 15px;
        animation: slide-in-out 1s;
    }
    .notiP {
        text-align: center; top: 30vh; position:absolute; color: white; font-size: 1.2rem
    }
}


.editNotiIcon {
    height: 20vh;
    width: 100%;
    position: absolute;
    top: 0;
    background-color: transparent;
    border: solid 0;
    text-align: center;
}
.editNotiIcon i {
    color: var(--primtxt);
    margin-top: 3vh;
    font-size: 8rem;

}
.wsNotiInput {
    top: 50vh;
    width: 50%;
    position: absolute;
    background-color: #2c6270;
    color: var(--primtxt);
    height: 30px;
    border: solid 0;
    border-radius: 15px;
    left: 25%;
}
.notiParagraph {
    margin-left: 20%;
    top: 35vh;
    color: var(--primtxt);
    position: absolute;

}
@media screen and (max-width: 600px) {
    .notiParagraphDesc {
        height: 30vh;
        width: 80%;
        overflow-y: scroll;
        overflow-x: hidden;
        margin-left: 10%;
        margin-right: 10%;
        top: 30vh;
        color: var(--primtxt);
        font-size: 1.2rem;
        text-align: left;
        word-wrap: break-word;
        position: absolute;
    }
}
@media screen and (min-width: 600px) {
    .notiParagraphDesc {
        height: 30vh;
        width: 70%;
        overflow-y: scroll;
        margin-left: 15%;
        top: 30vh;
        color: var(--primtxt);
        font-size: 1.2rem;
        text-align: center;
        overflow-x: hidden;
        word-wrap: break-word;
        position: absolute;
    }
}
.wsNotiInput::placeholder {
    color: navajowhite;
    position: relative;
    left: 4%;
}
.editNotiForm {
    height: 80vh;
    bottom: 0;
    width: 100%;
    position: absolute;
    background-color: transparent;
    border: solid 0;
}
.editNotiFormBtn {
    bottom: 0;
    position: absolute;
    left: 0;
    border-radius: 15px;
    background-color: #114856;
    color: var(--primtxt);
    height: 10%;
    font-size: 1.5rem;
    width: 15%;
    border: solid 0;

}
.editNotiFormBtn:hover {
    background-color: #2c6270;
}

.editNotiFormTxt {
    height: 45vh;
    font-size: 1rem;
    color: var(--primtxt);
    resize: none;
    bottom: 15%;
    position: absolute;
    left: 6vh;
    width: 80%;
    border: solid 0;
    border-bottom: 2px #114856;
    background-color: #2c6270;
    border-radius: 25px;
}
.noti-holder-ws {
    height: 80vh;
    top: 5vh;
    position: absolute;
    right: 0;
    display: none;
    background-color: #114856;
    border: solid 0;
    width: 40%;
    border-radius: 15px 0px 0px 15px;
    z-index: 2;
    animation: slide-in-out-2 1s;
}

@media screen and (max-width: 600px) {
    @keyframes slide-in-out-2 {
        0% {
            right: -1900px;
        }
        100% {
            right: 0%;
        }
    }
    .noti-holder-ws {
        width: 90%;

    }
}