#modal_container {
    /* display: none;  */
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    opacity: 0;
    pointer-events: none;
    top: 0;
    /* left: 0; */
    width: 100%;
    height: 100vh;
    transition: opacity 0.3s ease;
    z-index: 11;
}

#modal_container.show {
    pointer-events: auto;
    opacity: 1;
}

#modals {
    margin: auto;
    margin-top: 7%;
    background-color: #fff;
    border-radius: 350px;
    border: 10px solid green;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    padding: 30px 50px;
    width: 600px;
    height: 500px;
    max-width: 100%;
    text-align: center;
    animation: loginmodal 0.8s ease-in-out;
}

#modals>h2 {
    margin-top: -16px;
    color: rgb(233 184 2);
}

#modals>p {
    margin-top: 20px;
    font-size: 16px;
    color: rgb(233, 152, 2);
}

@keyframes loginmodal {
    from {
        margin-top: -20%;
        transform: rotateX(360deg)
    }

    to {
        margin-top: 7%;
        transform: rotateY(0deg);

    }

}

#input_coonntainer {
    width: 60%;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.input {
    margin-top: -5px;
    padding: 3% 6%;
    border-radius: 10px;
    border-width: 1px;

    border-color: rgb(243, 237, 237);
}

#input_coonntainer>input[type="text"] {
    margin-top: 10px;
    border: 0%;
    border: 3px solid green;
}

#input_coonntainer>input[type="password"] {
    margin-top: 10px;
    border: 0%;
    border: 3px solid green;
}

#password {
    margin-bottom: 25px;
}

#cancelBox {
    display: flex;
    /* -ms-flex-align: end;
    border: 1px solid crimson; */
    justify-content: flex-end;

}

#cancelmodal {
    /* width: 60%; */
    padding: 1px 8px;
    border-radius: 20px;
    font-size: 25px;
    border: none;
    background-color: rgb(26, 142, 16);
    color: white;
}

#cancel {
    background-color: #fff;
    border: none;
}

#signuppp {
    width: 59%;
    border: none;
    border-radius: 5px;
    background: green;
    color: white;
    height: 30px;
}

#loginbtn {

    width: 59%;
    border: none;
    border-radius: 5px;
    background: green;
    color: white;
    height: 30px;
}

#signupPage {
    position: relative;
    bottom: 0%;
    /* margin-top: 10px; */
    margin-top: 80px;
    width: 25%;
    border: none;
    border-radius: 5px;
    background: green;
    color: white;

    margin-bottom: 10%;
}

#loginPage {
    position: relative;
    bottom: 0%;
    margin-top: 8px;
    width: 25%;
    border: none;
    border-radius: 5px;
    background: green;
    color: white;
    /* margin-bottom: 10%; */
}