.modal 
{
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    overflow: auto;
    transform-origin: top left;

    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
    height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;

    background-color: rgba(0,0,0,0.4);
    overflow: auto;
    padding: 5px 7px 5px 5px;
}

.modal-content 
{
    position: relative;
    background-color: #fff;
    margin: 5px auto 5px auto;
    /*margin: 20px auto 20px auto;*/
    padding: 5px 5px 10px 5px;

    width: 600px;            /* fixed width for desktop */
    max-width: 100%;
    /*max-width: 95%;*/
   
   height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;

    border-radius: 12px;
    box-sizing: border-box;
    text-align: center;
    /*overflow-y: auto;*/      /* Scroll if content too tall */
}

.close-btn {
    position: absolute;
    right: 9px;
    top: 0px;
    font-size: 28px;
    cursor: pointer;
}