* {
  box-sizing: border-box;
}

body {
  height             : 100%;
  font-family        : Roboto, "Open Sans", sans-serif;
  font-size          : 15px;
  font-weight        : 300;
  text-rendering     : optimizeLegibility;
  background         : #e6e6e6;
}

#hdrCont {
  position           : absolute;
  top                : 0;
  left               : 0;
  height             : 100%;
  width              : 100%;
  display            : flex;
}

#hdrMain {
  width              : 50%;
  margin-top         : 10px;
  margin-left        : 260px;
  color              : green;
  font-size          : 25px;
}

#hdrMiddle1 {
  position           : absolute;
  width              : 250px;
  margin-top         : 120px;
  margin-left        : 10px;
  border             : 1px solid black;
  padding            : 5px;
  background-color   : #e6fff7;
  opacity            : 0.5;
  z-index            : 7;
}

#hdrMiddle2 {
  position           : absolute;
  width              : 250px;
  margin-top         : 200px;
  margin-left        : 10px;
  border             : 1px solid black;
  padding            : 5px;
  background-color   : #e6fff7;
  opacity            : 0.5;
  z-index            : 7;
}

#hdrNotes {
  position           : absolute;
  width              : 250px;
  margin-top         : 100px;
  margin-left        : 10px;
  border             : 1px solid black;
  padding            : 5px;
  background-color   : #e6fff7;
  opacity            : 0;
  z-index            : 7;
}

#hdrHelp {
  position           : absolute;
  width              : 250px;
  margin-top         : 300px;
  margin-left        : 10px;
  border             : 1px solid black;
  padding            : 5px;
  background-color   : #e6fff7;
  opacity            : 0.5;
  z-index            : 7;
}

.imagesClass {
  margin-bottom      : 5px;
  border             : none;
}

.imageCanvasHdr {
  width              : 180px;
  height             : 300px;
  background         : #e6e6e6;
}

.imageCanvas {
  width              : 200px;
  height             : 300px;
  background         : #e6e6e6;
}

.imageCanvasv {
  position           : relative;
  z-index            : 58;
}

#progressMessage {
  position           : absolute;
  width              : 900px;
  height             : 50px;
  top                : 20%;
  left               : 20%;
  margin-left        : -90px;
  margin-top         : -25px;
  font-size          : 30px;
  color              : red;
  z-index            : 35;
}

.helpClass {
  position           : absolute;
  width              : 550px;
  height             : 650px;
  top                : 0px;
  left               : 0px%;
  font-size          : 30px;
  z-index            : 35;
  background-color   : #e6fff7;
}

h1.a {
  color              : black;
  font-size          : 15px;
  margin-left        : 4px;
}

pre.a {
  color              : black;
  font-size          : 15px;
  margin-left        : 5px;
}

p.a {
  color              : black;
  font-size          : 10px;
  margin-left        : 5px;
}

ul.a {
  color              : black;
  font-size          : 10px;
  margin-left        : 5px;
}

.column {
  float              : left;
}

.column1 {
  float              : left;
  width              : 200px;
}

.column2 {
  float              : left;
  width              : 350px;
}

.column3 {
  float              : left;
}

.metadataClass {
  float              : left;
  padding            : 10px;
  border             : none;
}

.divImageClass {
  margin-bottom      : 10px;
  background         : #e5e7e9;
  border-style       : none;
}

.metadata {
  position           : relative;
  border             : 1px solid black;
  background-color   : #B8CCC6;
}

.mdlexifhdr, .fszexifhdr {
  padding-left       : 5px;
  font-size          : 15px;
  color              : blue;
}

.exif, .mdlexif, .fszexif {
  table-layout       : fixed;
  font-family        : Calibri, Arial, Helvetica, sans-serif;
  font-size          : 13px;
  font-weight        : bold;
  color              : #000;
  margin-top         : 5px;
  border-collapse    : separate;
  border-spacing     : 0px;
}

.exifblk {
  padding            : 5px;
  border-collapse    : collapse;
}

.exif td, .exif th {
  padding-left       : 10px;
  padding-right      : 10px;
  text-align         : left;
  background-color   : #e6fff7;
}

.exifa {
  width              : 200px ;
}

.exifb {
  width              : 260px ;
}

/* =============================== */
/* Modal Window                    */
.myModals {
}

.modal {
  position           : fixed;
  display            : none;
  z-index            : 20;
  left               : 0;
  top                : 0;
  width              : 100%;
  height             : 100%;
  background-color   : #c8c9cc;
  overflow           : none;
}

.modal-content {
}

.modalclose {
  color              : #000;
  float              : right;
  font-size          : 28px;
  font-weight        : bold;
  margin-right       : 10px;
}

.modalclose:hover,
.modalclose:focus {
  color              : #000;
  text-decoration    : none;
  cursor             : pointer;
}

.afmessage {
  font-family        : Calibri, Arial, Helvetica, sans-serif;
  font-size          : 15px;
  font-weight        : bold;
  color              : #000;
  width              : 750px;
}

.metaClass {
  position           : fixed;
  display            : block;
  z-index            : 25;
}

/* =============================== */
/* Total Image                     */
.totalImage {
  display            : block;
  z-index            : 30;
}

.fullBtn, .metaBtn, .afBtn, .helpBtn, .exitBtn  {
  cursor             : pointer;
  position           : absolute;
  top                : 20%;
  right              : 0;
  width              : 150px;
  margin-top         : -22px;
  margin-right       : 10px;
  padding            : 16px;
  color              : black;
  font-weight        : bold;
  font-size          : 18px;
  transition         : 0.6s ease;
  border-radius      : 3px;
  user-select        : none;
}

.fullBtn  {
  top                : 10%;
}

.metaBtn  {
  top                : 18%;
}

.afBtn  {
  top                : 26%;
}

.helpBtn  {
  top                : 34%;
}

.exitBtn  {
  top                : 42%;
}

/* Context Menu */
.menu {
  width              : 140px;
  z-index            : 40;
  position           : fixed;
  display            : none;
  transition         : 0.2s display ease-in;
}

.menu-options {
  list-style         : none;
  padding            : 10px 0;
  z-index            : 40;
  background-color   : white;
}

.menu-option {
  font-weight        : 500;
  z-index            : 1;
  font-size          : 14px;
  padding            : 10px 40px 10px 20px;
  border-bottom      : 1.5px solid rgba(0, 0, 0, 0.2);
  cursor             : pointer;
}


.prev, .next {
  cursor             : pointer;
  position           : absolute;
  top                : 50%;
  width              : auto;
  margin-top         : -22px;
  padding            : 16px;
  color              : white;
  font-weight        : bold;
  font-size          : 18px;
  transition         : 0.6s ease;
  border-radius      : 0 3px 3px 0;
  user-select        : none;
}

.next {
  right              : 0;
  border-radius      : 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color   : rgba(0,0,0,0.8);
}

/* Header Menu Items */
#hdrMenu {
  overflow           : hidden;
}

#myMenu {
  position           : fixed;
  top                : 0px;
  left               : 0px;
  height             : 50px;
  width              : 180px;
  margin-left        : 0px;
  background-image   : url(icons/iconMenu4.png);
  background-repeat  : no-repeat;
  background-color   : white;
  z-index            : 6;
  overflow           : none;
}

/* Home button */
#homeButton {
  position           : fixed;
  top                : 0px;
  margin-left        : 5px;
  height             : 50px;
  width              : 42px;
 }

/* Refresh button */
#refreshButton {
  position           : fixed;
  top                : 0px;
  margin-left        : 84px;
  height             : 50px;
  width              : 42px;
 }

/* Help button */
#helpButton {
  position           : fixed;
  top                : 0px;
  margin-left        : 123px;
  height             : 50px;
  width              : 46px;
 }

/*
button {
  background         : none;
  border             : none;
}
*/

/* Image entry box */
.dropzone {
  position           : fixed;
  top                : 0px;
  margin-left        : 42px;
  height             : 50px;
  width              : 46px;
  z-index            : 6;
 }

.dropzone input {
  position           : fixed;
  height             : 50px;
  width              : 46px;
  z-index            : 7;
  opacity            : 0;
 }