.modal-wrap {
    display: none;
    z-index:900; /* 1000 is warn */
}

/* desktop */
@media screen and (min-width: 980px) {

    .modal-wrap {
        position:fixed;
        top:0px;
        left:0px;
        bottom:0px;
        right:0px;
        background-color: rgba(255, 255, 255, 0.75);
        overflow-y:auto;
        overflow-x:hidden;
        backdrop-filter: blur(2px);
    }

    .modal {
        margin-right: auto;
        margin-left: auto;
        width:900px;
        z-index:901;
        margin-top:100px;
        margin-bottom:30px;
        display: block;
        border:2px solid white;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.5);
    }

}

/* mobile */
@media screen and (max-width: 980px) {

    .modal-wrap {
        position:fixed;
        top:0px;
        left:0px;
        bottom:0px;
        right:0px;
        background-color: rgba(255, 255, 255, 0.75);
        overflow-y:auto;
        overflow-x:hidden;
        backdrop-filter: blur(2px);
    }

    .modal {
        z-index:901;
        margin-top:30px;
        margin-left:30px;
        margin-right: 30px;
        margin-bottom:30px;
        display: block;
        border:2px solid white;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.5);
    }

}

.modal-head {
    background-color:#002337;
    font-weight: bold;
    overflow: auto;
}

.modal-head-title {
    float:left;
    padding:10px;
    color: white;
}

.modal-head-menu {
    float:right;
    padding:10px;
}

.modal-head-menu a {
    color: white;
}

.modal-head-menu a:hover {
    color: white;
}

.modal-head-menu a:active {
    color: white;
}

.modal-content {
    clear: both;
    background-color:white;
    padding:20px;
}

.modal-foot {
    padding-left:20px;
    padding-right:20px;
    padding-bottom:20px;
    text-align: right;
    font-weight: bold;
    background-color:white;
}

.modal-foot > input[type=submit], .modal-foot > input[type=button], .modal-foot > button {
    margin-right:0px !important;
    margin-left:10px;
}