Taeluf.com

modal.css

.ModalPopup {
    position:fixed;
    top:0;
    bottom:0;
    right:0;
    left:0;
    z-index:9999;
    background: hsla(320,20%,20%,0.7);

    flex-direction:column;
    justify-content: space-around;
    align-items: center;

}

.ModalDialog {
    display:flex;
    flex-direction:column; 
    align-items:center;
    min-width:325px;
    min-width:50%;
    min-height:400px;
    max-width:100%;
    max-height:100%;
    overflow:auto;
    background: white;
    border: 2px solid black;

    box-shadow: inset 0px 1px 12px rgba(0,0,0,0.2);

    padding: 12px;
}
.ModalDialog .DialogX {
    margin: 8px 8px 8px auto;
    cursor:pointer;
    padding: 8px;
}

.ModalDialog h6 {
    margin: 0 0 8px 0;
}

.ModalDialog .ModalContent  {
    width:100%;
    /* line-height: 1.2em; */
    overflow-y:scroll;
    display:inline-block;
    flex: 1;
    margin-bottom: 24px;
    width:100%;
}