#cyPreview {
    width: 100%;
    height:  100%;
}

#cyPopup {
    width: 100%;
    height: 100%;
}

.cyPreviewBox {
    position: relative;
    background: #fff;
    border: 1px solid #ccc !important;
    padding: 4px;
    width:auto;
    max-width: 310px;
    height: 217px;
}

/*
The height of the full size graph (cyPopupBox) should not exceed 700 so that it fits an iPad.
The aspect ration of the preview and full size graphs should be the same.
 */
.cyPopupBox {
    position: relative;
    background: #fff;
    border: 6px solid #4d728d;
    padding: 4px;
    width:auto;
    max-width: 1000px;
    height: 700px;
    margin: 0px auto;
}

.mfp-bg {
    background-color: #000;
    opacity: 0.4;
}

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.fa-expand::before {
    content: "\f065";
}
.fa-plus::before {
    content: "\f067";
}
.fa-minus::before {
    content: "\f068";
}

.fa:hover {
    color: #333;
}