.modalContainer {
    position: absolute;
    z-index: 100;
    width: 75%;
    height: 400px;
    top: 0;
    left: 0;
    transform: translate(12.5%, 4em);
    box-shadow: 0px 7px 10px gray;
    overflow: hidden;
    background-color: white;
    border: 1px solid #ccc;
    transition: transform 0.5s ease, width 0.5s ease, height 0.5s ease;
}

.modalContainer.fullscreen {
    transform: translate(0, 0);
    height: 100%;
    width: 100%;
}

.modal {
    color: black;
    padding: 1em 2em 0;
    overflow: auto;
    height: calc(100% - 38px);
    white-space: pre;
}

.header {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 20px;
}

.title {
    composes: title from 'HPCCloudStyle/JobMonitor.mcss';
    margin: 0;
}

.icon {
    color: #333;
    cursor: pointer;
}

.closeIcon {
    composes: fa       from 'font-awesome/css/font-awesome.css';
    composes: fa-fw    from 'font-awesome/css/font-awesome.css';
    composes: fa-times from 'font-awesome/css/font-awesome.css';
    font-size: 1.45em;
    margin-left: 10px;
    composes: icon;
}

.closeIcon:hover {
    color: #c54d57;
}

.fullscreenIcon {
    composes: fa       from 'font-awesome/css/font-awesome.css';
    composes: fa-fw    from 'font-awesome/css/font-awesome.css';
    composes: fa-arrows-alt from 'font-awesome/css/font-awesome.css';
    composes: icon;
}

.fullscreenIcon:hover {
    color: #18e;
}