/* ------------------------------------------------------------------------- */
/* -------------------------------- CONTENT -------------------------------- */
/* ------------------------------------------------------------------------- */

#content > div {
    min-height: 0px;
    min-width: 0px;
    background: white;
    padding: 5px;
    border-radius: 5px;
}

/* ------------------------------------------------------------------------- */
/* --------------------------------- INTRO --------------------------------- */
/* ------------------------------------------------------------------------- */

#intro {
    display: flex;
    height: 250px;
    gap: 50px;
    justify-content: center;
}

#intro > div {
    position: relative;
    max-width: 250px;
}

#intro #error_controls {
    position: absolute;
    bottom: 5px;
    left: 0;
    display: flex;
    gap: 10px;
}
#intro #error_controls button {
    padding: 0px;
    font-size: 15px;
    font-weight: bold;
    border: 3px black outset;
    border-radius: 3px;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
}


/* ------------------------------------------------------------------------- */
/* ---------------------------- SCENE SELECTION ---------------------------- */
/* ------------------------------------------------------------------------- */

#renders #scene_selection {
    display: flex;
    justify-content: center;
    gap: 10px;
}

#renders #scene_selection button {
    padding: 2px;
    background-color: rgb(224, 224, 224);
    position: relative;
    cursor: pointer;
}

#renders #scene_selection img {
    height: 100px;
}
#renders #scene_selection img.preview_diff {
    display: none;
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
}

#renders #scene_selection table {
    border-collapse: collapse;
}
#renders #scene_selection table td {
    border-color: rgb(160, 160, 160);
    padding: 2px;
}


#renders #scene_selection button:hover {
    background-color: rgb(240, 240, 240);
}
#renders #scene_selection button:hover img.preview_diff {
    display: block;
}

/* ------------------------------------------------------------------------- */
/* ----------------------------- BRDF SELECTION ---------------------------- */
/* ------------------------------------------------------------------------- */

#renders .image-slider-selection {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin: 10px;
}
#renders .image-slider-selection select {
    text-align: center;
}


/* ------------------------------------------------------------------------- */
/* ----------------------------- IMAGES SLIDER ----------------------------- */
/* ------------------------------------------------------------------------- */

.math {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#renders {
    border: 2px solid black;
}

#renders .image-slider-wrapper {
    position: relative;
    max-width: 512px;
}

#renders .image-slider-container {
    position:relative;
    display: inline-block;
    line-height: 0;
}

/* Could use a pseudo-element, but they’re currently
    super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
#renders .image-slider-container > .image-slider {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    /* here the change */
    width: 50%;
    max-width: 100%;
    overflow: hidden;
    resize: horizontal;
    color : blue;
    text-align: center;
    border-right : 1px solid black;
}

/* Cross-browser resizer styling */
#renders .image-slider-container > .image-slider:before {
    content: '';
    position: absolute;
    right: 0; bottom: 0;
    width: 13px; height: 13px;
    padding: 5px;
    background: linear-gradient(-45deg, white 50%, transparent 0);
    background-clip: content-box;
    cursor: ew-resize;
    -webkit-filter: drop-shadow(0 0 2px black);
    filter: drop-shadow(0 0 2px black);
}

#renders .image-slider-container img {
    user-select: none;
    
}

#renders .image-slider-container .image-slider-title {
    position: absolute;
    background-color: rgba(10,10,10,0.5);
    color : white;
    padding : 1em;
    
}

/* ------------------------------------------------------------------------- */
/* -------------------------- IMAGES DESCRIPTIONS -------------------------- */
/* ------------------------------------------------------------------------- */

#renders .image-slider-description {
    display: none;
    border: 1px solid black;
    background-color: wheat;
    padding: 10px;
    position: absolute;
    bottom: 0px;
    max-width: 40%;
    text-align: left;
    font-size: 0.9em;
}

#renders .image-slider-description#descrLeft {
    left: 0px;
}
#renders .image-slider-description#descrRight {
    right: 0px;
}

/* ------------------------------------------------------------------------- */
/* ------------------------------ IMAGES DIFF ------------------------------ */
/* ------------------------------------------------------------------------- */

#diff {
    height: 512px;
    width: 682px;
}
#diff[src=""] {
    visibility: hidden;
}

/* ------------------------------------------------------------------------- */
/* --------------------------------- FOOTER -------------------------------- */
/* ------------------------------------------------------------------------- */

footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    left: 0;
    padding: 0 10px;
    box-sizing: border-box;
}