#imageCanvas{
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 100%;
    max-height: 82%;
    z-index: -1;
    cursor: crosshair;
}

#topBar{
    width:100%;
    border: 1px solid black;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.topBarDiv {
    width: 100%;
    height: 100%;
    padding: 5px 0;
    border-left: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 8vh;
}
.topBarDiv.dropZone {
    padding: 0;
}

#exifInformationHolder{
    padding: 10px;
    border: 1px solid black;
    position: absolute;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    max-width: 70%;
    max-width: 600px;
    max-height: 85%;
    background-color: white;
    display: none;
    z-index: 2;

    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    max-height: 88%;
}

#imageScrubberInfo{
    position: absolute;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    padding: 10px;
    width: 80%;
    max-width: 600px;
    max-height: 88%;
    background-color: white;
    display: block;
    z-index: 3;
    font-size: 14px;
    overflow: auto;
    box-sizing: border-box;
}

#imageScrubberInfo a:hover,
#imageScrubberInfo a:focus {
    background: #ff0;
}


@media (max-width: 800px) {
    #imageScrubberInfo {
        max-height: 75%;
    }
    
    #topBar {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .topBarDiv{
        border: none;
    }

    #imageCanvas{
        position: absolute;
        top: 58%;
        max-height: 75%;
    }

    #continueButtonExif{
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}

#exifScrollDiv{
    position: inline-block;
    height: 75vh;
    max-height: 75vh;
    overflow-y: auto;

}

#tempCanvas {
    position:absolute;
    top:-1000px;
    display: none;
}

#holderCanvas {
    position:absolute;
    top:-1000px;
    display: none;
}

#rotationCanvas {
    position:absolute;
    top:-1000px;
    display: none;
}

#blurredCanvas {
    position:absolute;
    top:-1000px;
    display: none;
}

#about{
  position:absolute;
  bottom: 10px;
  right: 10px;
  z-index: 20;

}

body{
    font-family: Courier;
    margin: 0;
    padding: 0;
    font-size: 12px;
    overflow: hidden;
}

button{
font-family: Courier;
    font-size: 12px;
}

#continueButton, #continueButtonExif{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}


input[type="file"] {
    display: none;
}

.file-open {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

/* The slider itself */
.slider {
  width: 95%; /* Full-width */
}

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */

}

.controlButton {
    cursor: pointer;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.controlButton:hover,
.controlButton:focus {
    background: #ccc;
}

.customFileOpen {
    cursor: copy;
}