/* Modal system CSS */

body div#modalwrapper {
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.75);
    width: 100%;
    height: 100%;
    z-index: 9901;
    opacity: 0;
    display: none;
}

body .modalscroll {
    display:none;
}

body #modal .modalclose {
    position: absolute;
    top: 0.5vmax;
    right: 1vmax;
    cursor: pointer;
}

body #modal .modalclose:before{
	font-family: 'FontAwesome';
    vertical-align: middle;
    line-height: 35px;
    margin-left: 10px;
    margin-right: 0px;
    content: "\f00d";
    font-size: 32px;
    color:white;
}

body #modal h2.modaltitle {
    padding: 1vw;
    background: var(--modal-header-background);
    color: whitesmoke;
    margin-bottom: 0.25vmax;
    margin-top: 0;
}

.modalbreadcrumbs {
    padding: 5px 20px 0px 20px;
    font-size: 15px;
    min-height: 20px;
    cursor: pointer;
    font-weight: bold;
}

body #modal .modalbody {
    padding: 1vmax;
    overflow-y: auto;
    height: 76vh;
}

body .modalscroll {
    display:none;
}

/* modal open*/

body.modalopen {
    position: fixed;
}

body.modalopen .modalscroll {
    position: fixed;
    z-index: 9905;
    width: 100%;
	display:block;
}

body.modalopen div#modalwrapper {
    position: fixed;
    z-index: 9905;
    width: 100%;
	opacity: 0.9;
    display: block;
    transition: opacity 0.2s ease;
}

body.modalopen div#modalwrapper:hover {
    opacity: 1;
}

body.modalopen div#modal {
    opacity: 1;
    display: block;
    top: 2.5%;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: whitesmoke;
    left: 12.5%;
    position: fixed;
    width: 75%;
}