/* For the plugin: Move navigation arrows outside: */
/*
.fancybox-nav {
    width: 60px;
}
.fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
}
.fancybox-nav:hover span {
    opacity: 1;
}
.fancybox-next {
    right: -60px;
}
.fancybox-prev {
    left: -60px;
}*/

/* NATHAN 2018-03: This makes me sad, but I do not dear replace it.*/
.fancybox-slide > * {
    padding: 0;
}

/* move close button a bit from the edge */
.fancybox-close-small::after {
    right: 15px;
}

/* move nav buttons a bit from the edge */
.fancybox-button.fancybox-button--arrow_right {
    margin-right:10px;
}
.fancybox-button.fancybox-button--arrow_left {
    margin-left:10px;
}

/* template styles: */
div.lightbox div.lightbox-content
{
    width: 922px; /* 940 - padding */
    height: 600px;
    background-color: white;
    padding-left: 18px;
    border-radius:10px;
}

div.lightbox-content div.lightbox-left
{
    width: 545px;
    height: 600px;
    margin-right: 18px;
    position: relative;
    z-index: 1;/* make sure slideover will slide over this element*/
}

div.lightbox-content h2,
div.lightbox-content h3 {
    margin:20px 0 !important; /* I am so sorry, this was the only way to overwrite Martin's css */
    white-space:nowrap;
    overflow:hidden;
}

div.lightbox-content div.lightbox-left .lightbox-image
{
    width: 545px;
    height: 525px;
    border: 1px solid #c4c4c4;
    position: relative; /* needed to position the custom-preview div absolute on this div */
    border-radius: 3px;
    z-index: 5;
    overflow: hidden;
}

div.lightbox-content div.lightbox-left .lightbox-image img
{
    text-align: center;
    border-radius: 7px;
    max-width: 545px;
    margin: 0 auto;
    display: block;
}

div.lightbox-content div.lightbox-left #custom-preview-container
{
    background-color: #fff;
    width: 545px;
    position: absolute;
    bottom: 0;
    z-index: 25;
    overflow: hidden;

    height: 45px;
    -webkit-transition: all 500ms ease; /* @NOTICE */
}

div.lightbox-content div.lightbox-left  #custom-preview-container.unfolded /* unfolded = uitgeklapt */
{
    height: 200px;
    -webkit-transition: all 500ms ease; /* @NOTICE */
}

div.lightbox-content div.lightbox-left #custom-preview-container #custom-image-upload
{
    width: 545px;
    text-align: center;
    margin: 39px 0;
    display: none; /* needed to prevent scrolling of the container while you focus on elements by pressing tab key */
}

div.lightbox-content div.lightbox-left #custom-preview-container .header-container
{
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    height: 44px;
    line-height: 44px;
    background-color: #f1f2f3;
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
    display: block;
    cursor: pointer;
}

div.lightbox-content div.lightbox-left #custom-preview-container .header-container .button-toggle,
div.lightbox-content div.lightbox-left #custom-preview-container .header-container .header-title
{
    float: left;
}

div.lightbox-content div.lightbox-left #custom-preview-container .header-container .button-toggle
{
    width: 15%;
    margin: 19px 0;
    height: 7px;
    -webkit-transition: all 500ms ease; /* @NOTICE */
}

div.lightbox-content div.lightbox-left #custom-preview-container .header-container .button-toggle.rotated
{
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

div.lightbox-content div.lightbox-left #custom-preview-container .header-container .header-title
{
    width: 70%;
}

div.lightbox-content div.lightbox-left .lightbox-exif,
div.lightbox-content div.lightbox-left span.lightbox-usedby
{
    background: none repeat scroll 0 0 #EAECED;
    border-radius: 7px 0 0 7px;
    height: 580px;
    left: 570px;
    padding: 20px 0 0 20px;
    position: absolute;
    top: 0;
    width: 325px;
    z-index: 2; /* make sure this slides over the parent */
    overflow-y:scroll;
    z-index: 40;
}

/** overwrite some content "table" styles for exif **/
div.lightbox-content div.lightbox-left .lightbox-exif .lightbox-content-properties {
    margin-top:20px;
    width:500px;
    margin-left:20px;
}

div.lightbox-content div.lightbox-left .lightbox-exif .lightbox-content-heading {
    width:490px;
}

div.lightbox-content div.lightbox-left .lightbox-exif .lightbox-content-row-left,
div.lightbox-content div.lightbox-left .lightbox-exif .lightbox-content-row-right,
div.lightbox-content div.lightbox-left .lightbox-exif .lightbox-content-row {
    width:233px;
}

div.lightbox-content div.lightbox-right {
    width: 317px;
    padding: 0 20px;
    height: 600px;
    border-left: 1px solid #B9B9B9;
    background: #EAECED;
    border-radius: 0 7px 7px 0;
    z-index: 3;/* make sure the slideover is renderd below this element*/
    position: relative;/* also needed to push above slideover*/
    overflow-y: scroll;
}

/* If this is not the last child there should be an approve panel */
div.lightbox-content div.lightbox-right:not(:last-child) {
    height: 529px;
    border-bottom: 1px solid #B9B9B9;
}

div.lightbox-content div.lightbox-bottomright {
    width: 317px;
    padding: 0 20px;
    height: 70px;
    border-bottom-right-radius:7px;
    z-index: 3;/* make sure the slideover is renderd below this element*/
    position: relative;/* also needed to push above slideover*/
}

div.lightbox-content div.lightbox-bottomright .approve-button {
    float:left;
    padding-left:50px;
    width:100px;
    height:44px;
    line-height:44px;
    border-radius:3px;
    margin-top:12px;

    background-color:#343434; /* fallback color */
    background-position:20px center;
    background-repeat:no-repeat;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:14px;
}

div.lightbox-content div.lightbox-bottomright .approve-button:hover {
    color:white;
}

div.lightbox-content div.lightbox-bottomright .approve-accept {
    float: left;
    background-image:url('/img/icon-approve-accept.png');
    background-color:#2AB678;
}

div.lightbox-content div.lightbox-bottomright .approve-reject {
    float:left;
    background-color:#c42727;
    background-image:url('/img/icon-approve-reject.png');
    margin-right: 10px;
}

.lightbox-content .download-variants,
.lightbox-content .related-files,
div.lightbox-content-properties {
    width: 300px;
    height:auto;
    margin: 40px 0 10px 0;
    border: 1px solid #B6B5B5;
}

.lightbox-content .download-variants,
.lightbox-content .related-files {
    margin-top:20px;
}

.lightbox-content-heading
{
    height: 21px;
    font-weight: bold;
    background: #F1F2F3;
    border-bottom: 1px solid #B6B5B5;
    font-size: 9pt;
    width: 290px;
    padding: 7px 0 0 10px;
}

div.lightbox-content-row-left,
div.lightbox-content-row-right
{
    height:auto;
    width: 134px;
    background: #FFF;
    padding: 8px;
}
div.lightbox-content-row-left span,
div.lightbox-content-row-right span
{
    margin: 0 0 4px 0;
    height: 16px;
    font-size: 9.5pt;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div.lightbox-content-row-left span a,
div.lightbox-content-row-right span a {
    color:inherit;
}

div.lightbox-content-row-left
{
    width: 133px;
    border-right: 1px solid #B6B5B5;
}

a.lightbox-content-tag
{
    background: #D4D4D4;
    color:black;/*
    background-color: #4C4C4C;
    color: #fff;*/
    border-radius: 4px;
    padding: 3px 6px 4px 7px;
    margin-right: 10px;
    font-size: 10pt;
    text-decoration:none;
    float:left;
    margin-bottom:5px;
}

a.lightbox-content-tag:hover {
    text-decoration:none;
}

.lightbox-content .left .label-expired
{
    position: absolute;
    background-color: #ba2226;
    z-index: 10;
    transform: rotate(315deg);
    width: 165px;
    height: 47px;
    line-height: 47px;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    text-align: center;
    top: 18px;
    left: -41px;
    font-size: 17px;
}

.related-files .lightbox-content-heading {
    border-bottom:0; /*overwrites*/
}

.related-files .direct-download,
.related-files .unlink-related
{
    float:left;
    width:20px;
    height: 16px;
    background: #FFF;
    border-top: 1px solid #B6B5B5;
    line-height: 16px;
    padding: 8px 0 8px 10px;
}
.related-files .open
{
    float:right;
    width:254px;
    height:16px;
    background: #FFF;
    border-top: 1px solid #B6B5B5;
    padding: 8px;
    line-height: 16px;

    color: #000000;
    text-decoration:none;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

.related-files .open.related-unlinkable
{
    width: 224px;
}

/*
.related-files .switch-download
{
    float:right;
    width:254px;
    height:16px;
    background: #FFF;
    border-top: 1px solid #B6B5B5;
    padding: 8px;
    line-height: 16px;
    color: #000000;
    text-decoration:none;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}*/

a.lightbox-content-tag.predicted
{
    background-color: #4C4C4C;
    color: #fff;
}

.lightbox-content #predict-legend {
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #CCCCCC;
}

.lightbox-content #predict-legend
{
    padding: 4px 0;
    margin-bottom: 20px;
}

.lightbox-content #predict-legend p
{
    font-style: italic;
    padding: 2px 20px;
}

.lightbox-content #predict-legend p.auto
{
}

.lightbox-content #predict-legend p.manual
{
    color: #D4D4D4;
}

.lightbox-content #predict-legend p .icon
{
    margin-right: 10px;
    vertical-align: middle;
}

/** PREVIEW PDF ELEMENTS **/
#preview-holder
{
    overflow-y: scroll;
    height: 525px;
    width: 545px;
    border: 1px solid #c4c4c4;
    border-radius: 3px;
    z-index: 5;
}

#preview-holder .canvas-page
{
    padding: 0;
    margin: 0 auto 20px auto;
    display: block;
    background-color: #393A3A;
}

#preview-holder #preview-loader
{
    margin: 0 auto;
    display: block;
    text-align: center;
}