.image-align-helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#cp-control-panel-close {
    border-left: 1px solid #333;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+MTYvaTAwMjdfY2xvc2UtZGlhbG9nPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48cGF0aCBkPSJNOS42NCA4bDQuMDE2IDQuMDE2Yy4yMy4yMy4zNDQuNTAyLjM0NC44MiAwIC4zMTgtLjExNS41OS0uMzQ0LjgyLS4yMy4yMy0uNTAyLjM0NC0uODIuMzQ0LS4zMTggMC0uNTktLjExNS0uODItLjM0NEw4IDkuNjRsLTQuMDE2IDQuMDE2Yy0uMjMuMjMtLjUwMi4zNDQtLjgyLjM0NC0uMzE4IDAtLjU5LS4xMTUtLjgyLS4zNDQtLjIzLS4yMy0uMzQ0LS41MDItLjM0NC0uODIgMC0uMzE4LjExNS0uNTkuMzQ0LS44Mkw2LjM2IDggMi4zNzQgNC4wMTZjLS4yMy0uMjMtLjM0NC0uNTAzLS4zNDQtLjgyIDAtLjMxOC4xMTYtLjU4Ny4zNDUtLjgwNS4yMy0uMjMuNTAzLS4zNC44Mi0uMzQuMzE4IDAgLjU5LjExMy44Mi4zNDNMOCA2LjM3Nmw0LjAzLTQuMDNjLjIzLS4yMy41MDQtLjM0NS44MjItLjM0NS4zMTcgMCAuNTkuMTE3LjgyLjM0Ni4yMi4yMy4zMjguNTAyLjMyOC44MiAwIC4zMTgtLjExLjU4Ni0uMzI4LjgwNUw5LjY0MiA4eiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
}

#cp-control-panel-download,
#cp-waiting-message-download {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+MTYvZG93bmxvYWQ8L3RpdGxlPjxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPjxwYXRoIGQ9Ik0zIDE0di0xaDEwdjFIM3ptMTAtNy44NEw4LjIgMTFoLS4zOUwzIDYuMTZsMS4xMi0xLjEzTDcgNy45MlYzLjVjLjA5LTEgLjQ1LTEuNSAxLTEuNXMuODkuMzcgMSAxLjV2NC40MWwyLjkxLTIuODVMMTMgNi4xNnoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
}

.cp-image-icon.size-24 {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+NDgvaDAwMDFfZmlsZS1pbWctbGFyZ2U8L3RpdGxlPjxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTIxLjk5NSAwSDIuMDA1Qy44OTggMCAwIC44OTggMCAyLjAwNXYxOS45OUMwIDIzLjEwMi44OTcgMjQgMi4wMDUgMjRoMTkuOTlDMjMuMTAzIDI0IDI0IDIzLjEwMyAyNCAyMS45OTZWMi4wMDVDMjQgLjg5OCAyMy4xMDQgMCAyMS45OTUgMHpNMjMgMjEuOTk1QzIzIDIyLjU1IDIyLjU1IDIzIDIxLjk5NSAyM0gyLjAwNUMxLjQ1IDIzIDEgMjIuNTUgMSAyMS45OTZWMi4wMDVDMSAxLjQ1IDEuNDUgMSAyLjAwNSAxaDE5Ljk5QzIyLjU1IDEgMjMgMS40NSAyMyAyLjAwNXYxOS45OXpNMTcgMTNsLTMuNzMgMy43M0w4IDlsLTUgNSAuNSAxczMuMDA1LTIuNzggNC41LTQuNWMuNDUzLjU1MyA3IDEwLjUgNyAxMC41aDFsLTIuMTItMy4zNzggMy42Mi0zLjYyIDMgMyAuNS0xLTMtM2gtMXptLTQuMzU3LTQuMDdsLS4yIDIuOCAyLjAyNC0xLjkwNSAyLjAyNCAxLjkwNS0uMi0yLjggMi43MjYtLjQyMy0yLjI3NC0xLjU4NSAxLjM3My0yLjQzNC0yLjYzNi44MjMtMS4wMTMtMi42MS0xLjAxMyAyLjYxLTIuNjM2LS44MjIgMS4zNzQgMi40MzQtMi4yNzUgMS41ODUgMi43MjYuNDI0em0xLjgyNC0zLjM4N2MxLjAzIDAgMS44NjcuODUzIDEuODY3IDEuOTA3IDAgMS4wNTUtLjgzOCAxLjkwOC0xLjg2NyAxLjkwOC0xLjAzIDAtMS44NjctLjg1My0xLjg2Ny0xLjkwOCAwLTEuMDU0LjgzOC0xLjkwNyAxLjg2Ny0xLjkwN3oiLz48L2c+PC9nPjwvc3ZnPg==");
}

/*
    Header
 */
#cp-header {
    background-color: #000000;
    padding-left: 10px;
}

#cp-title-container {
    max-width: 70%;
    display: block;
    float: left;
    height: 50px;
}

#cp-title-container div {
    color: #fff;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
}

#cp-title-container .cp-file-icon {
    width: 45px;
    height: 50px;
    display: inline-block;
    float: left;
    background-position: 10px center;
    background-repeat: no-repeat;
}

#cp-file-controls {
    padding-left: 0;
    text-align: right;
    float: right;
    max-width: 30%;
    display: block;
    height: 50px;
}

#cp-file-controls > span {
    display: inline-block;
}

/*
    Body
 */
#cp-body {
    height: 100%;
    margin: 0;
}

#cp-container {
    background-color: rgba(51, 51, 51, 0.95);
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* CONFDEV-26487: z-index is greater than an AUI inline dialog, whose default is 100. */
    z-index: 101;
}

#cp-container .cp-icon {
    padding: 0;
    margin: 0;
    background-color: transparent;
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: 50px;
    float: left;
    text-align: left;
    text-indent: -999em;
    width: 50px;
    border-radius: 0;
}

#cp-container a.cp-icon {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#cp-container a.cp-icon:hover {
    background-color: #707070;
}

#cp-container a.cp-icon:focus {
    outline: none;
    background-color: #707070;
}

#cp-container button.cp-icon {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: none;
    outline: none;
    cursor: pointer;
}

#cp-container button.cp-icon:hover {
    background-color: #707070;
}

#cp-container button.cp-icon:focus {
    outline: none;
    background-color: #707070;
}

#cp-file-body {
    bottom: 0px;
    box-sizing: border-box;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50px;
    vertical-align: middle;
    height: calc(100% - 50px);
}

.cp-viewer-layer {
    height: 100%;
}

#cp-sidebar.meta-banner {
    height: calc(100% - 90px);
}

#cp-image-preview {
    width: 100%;
    height: 100%;
    overflow: auto;
    white-space: nowrap;
    box-sizing: border-box;
    padding-top: 40px;
    padding-bottom: 40px;
    /* For child img alt*/
    color: #ffffff;
    font-size: 20px;
}

#cp-image-preview img {
    vertical-align: middle;
    max-height: 100%;
    max-width: 100%;
}

#cp-container {
    z-index: 1000
}