body {
    background: #fafafa;
    color: #333333;
    margin-top: 5rem;
    position: relative;
}

main {
    min-height: calc(98vh - 70px);
    padding-bottom: 50px;
}

footer {
    position: absolute;
    bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

:root {
    --cgreen: forestgreen;
    --cblue: dodgerblue;
    --cred: coral;
    --corange: orange;
    --clightblue: lightsteelblue;

    /* orni colors */
    /* from colorbrewer http://colorbrewer2.org/#type=qualitative&scheme=Set2&n=6 */
    --cgross: #66c2a5;
    --cgreif: #fc8d62;
    --cmittelgross: #8da0cb;
    --cwasservogel: #e78ac3;
    --cklein: #a6d854;
    --cnichterkennbar: #ffd92f;
    --c7: lightgrey;
}
/*['#66c2a5','#fc8d62','#8da0cb','#e78ac3','#a6d854','#ffd92f']*/

/*:root {*/
/*    --cgreen: forestgreen;*/
/*    --cblue: dodgerblue;*/
/*    --cred: coral;*/
/*    --corange: orange;*/
/*    --clightblue: lightsteelblue;*/

/*    !* orni colors *!*/
/*    !* my own colors *!*/
/*    --cgross: coral;*/
/*    --cbussard: yellowgreen;*/
/*    --cmittel: dodgerblue;*/
/*    --ctaube: #e78ac3;*/
/*    --cklein: forestgreen;*/
/*    --cnichterkennbar: lightsteelblue;*/
/*    !*--c7: thistle;*!*/
/*    !*--c7: pink;*!*/
/*    --c7: lightgrey;*/
/*}*/

/*:root {*/
/*    --cgreen: forestgreen;*/
/*    --cblue: dodgerblue;*/
/*    --cred: coral;*/
/*    --corange: orange;*/
/*    --clightblue: lightsteelblue;*/

/*    !* orni colors *!*/
/*    !* from carto.com*!*/
/*    --c1: #E58606;*/
/*    --c2: #5D69B1;*/
/*    --c3: #52BCA3;*/
/*    --c4: #99C945;*/
/*    --c5: #CC61B0;*/
/*    --c6: #24796C;*/
/*    --c7: #A5AA99;*/
/*    --c8: #DAA51B;*/
/*    --c9: #2F8AC4;*/
/*}*/
/*#E58606,#5D69B1,#52BCA3, yes*/
/*#99C945,no*/
/*#CC61B0,#24796C,#DAA51B,#2F8AC4,yes*/
/*#764E9F,#ED645A,#CC3A8E,#A5AA99 no*/

div.image {
  /*border:2px solid darkgray;*/
  /*margin-right:10px;*/
  position: relative;
  /*width: 100%;*/
  /*border: 1px solid blue;*/
}

.imageOverlay {
  position: absolute;
}

img.img-sequence {
  width:100%;
  /*border: 1px solid green;*/
}

.btn-image-change {
  background-color:transparent;
  font-size:5rem;
  position:absolute;
  /*border: 1px solid black;*/
  /*text-align:center;*/
  transform: translate(-50%, -50%);

}

.btn-image-prev {
  top:50%;
  left: 7%;
  /*-webkit-transform: translate(-50%,-50%);*/
}

.btn-image-next {
  top:50%;
  right: 0%;
  /*-webkit-transform: translate(-50%,-50%);
  transform: translate(-50%, -50%);*/
}

.div-section {
    padding: 10px;  /* rand um Inhalt rum */
    display: inline-block; /* div boxen nebeneinander */
    /*margin: auto;*/
    /*position: relative;*/
}

.div-section-selected {
    background-color: lightsteelblue;
    /*border: 5px solid darkred;*/
}

.cbox-section {
    display: none;
}

span.section-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
}


.labelok { --lc: black; }  /* FIXME what is this */

img {
    border: 3px solid var(--lc);
    width: 100%;
}

img.labelchecked {
    /*border-style: dashed;*/
    border: 6px solid var(--lc);
}

img.conf_matrix {
    width: auto;
}

.btn-labeling {
    border: 2px solid var(--lc);
    background-color: transparent;
    /*min-width: 50%;*/
    flex: calc(10% - 5px);
    margin-right: 5px;
    /* why is button outside div when width= 100%??? */
}

.btn-labeling:hover {
    background-color: var(--lc)
}
.btn-labeling.labelok:hover {
    color: white;
}

.btn-labeling-dark {
    background-color: var(--lc);
}

/*.btn-wide {*/
/*    width: 100%;*/
/*}*/

/*.btn-custom-width {*/
/*    flex: calc(50% - 5px);*/
/*}*/

/*.container-fluid {*/
/*    max-width: 1800px;*/
/*}*/

td.number {
    text-align: right;
}

td {
    padding-left: 10px;
    padding-right: 20px;
}

.position-fixed {
    max-width: inherit;
}

/*MODAL IMAGE*/
 /* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 100%;
    max-width: 90vw;
  max-height: 90vh;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 70px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}