div[id$="ModalBase"]{
    position:fixed;
    left:0;
    top:0;
    z-index:10000;
}

div[id$="ModalBack"]{
    position:fixed;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    background-color:#000;
    opacity:0.5;
}

div[id$="ModalFrame"]{
    position:fixed;
    width:80vw;
    height:80vh;
    left:calc((100vw - (80vw))/2);
    top:calc((100vh - (80vh))/2);
    background-color: var(--back);
    overflow-x: hidden;
    overflow-y: hidden;
    border-radius: 5px;
}

div.modalHead{
    font-size:1.2rem;
    padding:1rem 0.7rem;
    text-align:center;
    background-color: var(--image-color);
    color:var(--header-color);
    overflow-x: hidden;
    overflow-y: hidden;
}

div.modalBody{
    height:calc(80vh - 1.7rem - (1rem * 2));
    overflow-x: hidden;
    overflow-y: hidden;
}

div.modalCloser{
    position:absolute;
    right:0;
    top:0;
    width:1.5rem;
    height:1.5rem;
    cursor:pointer;
}

div.modalCloser:before,
div.modalCloser:after{
    content: " ";
    display: block;
    float: right;
    background-color: var(--header-color);
    height: 1.3rem;
    width: 0.25rem;
    position: absolute;
    right: 0.7rem;
    top:0.2rem;
}
div.modalCloser:before {
    transform: rotate(45deg);
}
div.modalCloser:after {
    transform: rotate(-45deg);
}