﻿.wl-modal {
    display: block; /* Visible by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    margin-top: 88px;
    padding-top: 12px; /* Location of the box */
    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 */
}
/* Modal Content */
.wl-modal-content {
    background-color: var(--webapp-modal-bg);
    margin: auto;
    padding: 20px;
    border: 1px solid #CCCCCC;
    width: 80%;
    height: 80%;
    border-radius: 10px;
}

.wl-modal-body {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    position: relative;
}

.wl-modal-heading {
    float: left;
    font-size: 2em;
    font-weight: 500;
    margin-bottom: 10px;
}

.wl-modal-btn {
    display: inline-block;
    float: right;
}

/* The Close Button */
.wl-modal-close {
    color: #aaaaaa;
    /*float: right;*/
    /*font-size: 28px;*/
    font-weight: 800;
    vertical-align: top;
    font-weight: 800;
    /*line-height: 38px;*/
    margin-right: 5px;
    font-size: 32px;
    /*display: inline-block;*/
    display: none;
}

    .wl-modal-close:hover, .wl-modal-close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.wl-modal-max {
    color: #aaaaaa;
    /*float: right;*/
    font-size: 28px;
    font-weight: 800;
    margin-right: 5px;
    display: inline-block;
    vertical-align: top;
}

    .wl-modal-max:hover, .wl-modal-max:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.wl-modal-normal {
    color: #aaaaaa;
    /*float: right;*/
    font-size: 28px;
    font-weight: 800;
    margin-right: 5px;
    display: inline-block;
    vertical-align: top;
}

    .wl-modal-normal:hover, .wl-modal-normal:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.mymodalsize {
    /*width: 50%;
            height: auto;
            min-width: 50%;
            min-height: 50%;
            max-width: 100%;
            max-height: 90%;*/
    width: 80vw;
    height: 80vh;
    min-width: 50%;
    min-height: 50%;
    max-width: 100%;
    max-height: 90%;
}
