/* Lightbox Elements */

#lightbox {
    bottom: 0px;
    left: 0px;
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 9999;
}

#lightbox-overlay {
    background: rgba(90, 100, 105, 0.5);
    height: 100%;
    width: 100%;
}

#lightbox-container {
    bottom: 20px;
    left: 0px;
    margin: 0px auto;
    max-width: 1024px;
    min-width: 320px;
    position: fixed;
    right: 0px;
    top: 0px;
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    #-webkit-overflow-scrolling:touch
}

#lightbox-help {
    bottom: 80px;
    left: 0px;
    position: absolute;
    right: 0px;
    text-align: center;
    z-index: 3;
}

#lightbox-help-content {
    background: #323C41;
    border: 2px solid #FFFFFF;
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
    color: #FFFFFF;
    display: inline-block;
    margin: 0px auto;
    padding: 7px 10px;
}

#lightbox-help-content hr {
    border-color: #5A6469;
}

#lightbox-buttons {
    background: #FFFFFF;
    border-top: 1px solid #EAEAEA;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
    bottom: 0px;
    height: 28px;
    left: 0px;
    overflow: hidden;
    padding: 20px 30px;
    position: absolute;
    right: 0px;
    z-index: 2;
}

#lightbox-content {
    background: #FFFFFF; /* Required for HTML content, like used in the composeEmail function. */
    border-radius: 3px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
    #overflow-y:auto;
    padding-top: 30px;
    -webkit-overflow-scrolling:touch
}

#lightbox-buttons ~ #lightbox-content {
    bottom: 68px;
}

#lightbox-content iframe:not('.sq-input') {
    background: #FFFFFF;
    border: none;
    height: 100%;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

#lightbox-content .image {
    background: #5A6469;
    border: none;
    height: 100%;
    width: 100%;
}

.hide-header {
    display: none;
}

.hide-header ~ #content-padded {
    padding-top: 30px !important;
}

@media screen and (max-width: 767px) {

    #lightbox-buttons .button {
        margin-bottom: 0px;
        width: auto;
    }

    #lightbox-buttons .button.float-left { float: left !important; }
    #lightbox-buttons .button.float-right { float: right !important; }

    #lightbox-buttons .button-primary {
        height: 28px;
        padding-bottom: 4px;
        padding-top: 4px;
    }
}