* {
  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;
}

.hdrBanner {
  position           : absolute;
  top                : 0;
  color              : green;
  margin-top         : 20px;
  margin-left        : 200px;
  font-size          : 25px;
  z-index            : 45;
} 

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

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

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

.column {
  float              : left;
}

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

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

.center {
  position           : absolute;
  width              : 900px;
  height             : 50px;
  top                : 40%;
  left               : 20%;
  margin-left        : -90px;
  margin-top         : -25px;
  font-size          : 30px;
  color              : red;
  z-index            : 55;
}


.metaScreen {
  position           : relative;
  width              : 360px;
  margin-left        : calc(100% - 360px);
  margin-top         : -10px;
  margin-right       : -5px;
  top                : 0px;
  z-index            : 35;
}

.metaClass {
}

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

.metadata {
  display            : block;
  border             : 1px solid black;
  background-color   : #B8CCC6;
  z-index            : 35;
}

.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              : black;
  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 ;
}

.exifColgroup {
  width              : 500px ;
}

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

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

.modal-content {
}

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

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

.exifScreens {
  position           : absolute;
  display            : none;
  z-index            : 40;
  left               : 0;
  top                : 0;
  width              : 100%;
  background-color   : #B8CCC6;
}

.exifBlock {
  background-color   : #B8CCC6;
}

.exifTab {
  table-layout       : fixed;
  border             : 1px solid;
}

/* =============================== */
/* Buttons                         */

.fullBtn, .metaBtn, .exifBtn, .afBtn, .exitBtn, .refBtn  {
  cursor             : pointer;
  position           : absolute;
  left               : 0;
  width              : 150px;
  margin-top         : -22px;
  margin-right       : 10px;
  margin-left        : 5px;
  padding            : 16px;
  color              : black;
  background-color   : grey;
  font-weight        : bold;
  font-size          : 18px;
  transition         : 0.6s ease;
  border             : 3px solid #999;
  border-color       : black;
  user-select        : none;
  z-index            : 32;
}

.refBtn  {
  top                : 304px;
}

.fullBtn  {
  top                : 372px;
}

.afBtn  {
  top                : 236px;
}

.exifBtn  {
  top                : 168px;
}

.metaBtn  {
  top                : 100px;
}

/* Context Menu */
.menu {
  width              : 120px;
  z-index            : 1;
  box-shadow         : 0 4px 5px 3px rgba(0, 0, 0, 0.2);
  position           : fixed;
  display            : none;
  transition         : 0.2s display ease-in;
}

.menu-options {
  list-style         : none;
  padding            : 10px 0;
  z-index            : 1;
  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;
}

button{
  background         : grey;
  border             : none;
}
  
.next{
  color              : green;
}
  
@keyframes move{
  from{
    transform: translate(0%);
  }
  50%{
    transform: translate(-40%);
  }
  to{
    transform: transform(0%);
  }
}

/* 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            : 46;
  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            : 46;
 }

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

/* Tool tips */
.tooltip {
  position           : relative;
  display            : inline-block;
  border-bottom      : 1px dotted black;
}

.tooltip .tooltiptext {
  visibility         : hidden;
  width              : 120px;
  background-color   : none;
  color              : white;
  text-align         : center;
  border-radius      : 6px;
  padding            : 5px 0;
  opacity            : .8;
  font               : bold;

  /* Position the tooltip */
  position           : absolute;
  z-index            : 1;
  top                : 100%;
  left               : 50%;
  margin-top         : 50px;
  margin-left        : 30px;
}

.tooltip:hover .tooltiptext {
  visibility         : visible;
}

#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;
  z-index            : 47;
}

#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            : 47;
}

#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            : 47;
}

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

#hdrHelp {
  width              : 45%;
  margin-top         : 30px;
}