#modal_container
{
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

    color: white;
}



@media screen and (min-width: 1024px) 
{
    /* CSS code to apply when the screen width is 768px or more */
    .modal-survey
    { 
        margin-top: 10%;
        border-radius: 2rem;
        position: absolute;
        text-align: center;
        width: 35rem;
        max-width: 35rem;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        padding: 1.5rem;
        background-color: rgb(24, 26, 27);
        border: 0.1rem solid rgb(55, 60, 62);
        z-index: 2;

        box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(0,0,0);
    }  
}


@media screen and (max-width: 1023px) 
{
    /* CSS code to apply when the screen width is between 1023px or less */
    .modal-survey
    { 
        margin-top: 10%;
        border-radius: 2rem;
        position: absolute;
        text-align: center;
        width: 15rem;
        max-width: 15rem;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        padding: 1.5rem;
        background-color: rgb(24, 26, 27);
        border: 0.1rem solid rgb(55, 60, 62);
        z-index: 2;

        box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(0,0,0);
    }  
}



.table-modal
{ 
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    top: 0;
    
    border-radius: 2rem;
    position: absolute;
    text-align: center;
    width: auto;
    max-width: 35rem;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background-color: rgb(24, 26, 27);
    border: 0.1rem solid rgb(55, 60, 62);
    z-index: 2;

    box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(0,0,0);
}  


/*
.modal
{ 
    position: fixed;
    z-index: 1;
    top: 15rem;

    border-radius: 2rem;
    position: absolute;
    text-align: center;
    width: auto;
    max-width: 25rem;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background-color: rgb(24, 26, 27);
    border: 0.1rem solid rgb(55, 60, 62);
    z-index: 2;

    box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(0,0,0);
} 
*/


.modal { 
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust position to the exact center */
    
    border-radius: 2rem;
    text-align: center;
    width: auto;
    max-width: 25rem;
    height: auto;
    padding: 1.5rem;
    background-color: rgb(24, 26, 27);
    border: 0.1rem solid rgb(55, 60, 62);
    z-index: 2;

    box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(0,0,0);
}

.modal-danger { 
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust position to the exact center */
    
    border-radius: 2rem;
    text-align: center;
    width: auto;
    max-width: 25rem;
    height: auto;
    padding: 1.5rem;
    background-color: rgb(104, 7, 7);
    border: 0.1rem solid rgb(230, 46, 46);
    z-index: 2;

    box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(0,0,0);
}

/*
.modal-danger
{ 
    position: fixed;
    z-index: 1;
    top: 15rem;
    
    border-radius: 2rem;
    position: absolute;
    text-align: center;
    width: auto;
    max-width: 25rem;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background-color: rgb(104, 7, 7);
    border: 0.1rem solid rgb(230, 46, 46);
    z-index: 2;

    box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(0,0,0);
}
*/