/* slideshow.css */
/* From w3schools slideshow example */

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
/*  max-width: 600px; */
/*  max-width: 800px; leaves slight space LHS and RHS */
  max-width: 800px; /*100%;*/
  max-height: 600px;
  position: relative;
  margin: 0 auto;
  border: thin solid black;
  line-height: 0;
  width: auto;  /* set to anything and aspect ratio is maintained
                 * also corrects glitch in Internet Explorer */
  height: auto; /* set to anything and aspect ratio is maintained */
  overflow: hidden;
}

/* Hide the images by default.
 * Extra stuff for CBC plots 2020-06-16 */
.slides, .CBCplot, .dendrogram, .LATTICEplots {
  display: none;
}

.slideshow-container .slides .img {
  object-fit:contain;
  max-height: 600px;
/*  max-height: 100%; */
  width: auto;
  height: auto;
  overflow: hidden;
}

/* new 2024-12-06 to make container square */
.slideshow-CBC {
  position: relative;
  max-width: 700px; /*100%;*/
  max-height: 700px;
  margin: 0 auto;
  border: thin solid black;
  line-height: 0;
  width: auto;  /* set to anything and aspect ratio is maintained
                 * also corrects glitch in Internet Explorer */
  height: auto; /* set to anything and aspect ratio is maintained */
  overflow: hidden;
}
.slideshow-CBC .slides .img {
  object-fit:contain;
  max-height: 600px;
/*  max-height: 100%; */
  width: auto;
  height: auto;
  overflow: hidden;
}

.slideshow-dend {
  position: relative;
  max-width: 600px; /*100%;*/
  max-height: 820px;
  margin: 0 auto;
  border: thin solid black;
  line-height: 0;
  width: auto;  /* set to anything and aspect ratio is maintained
                 * also corrects glitch in Internet Explorer */
  height: auto; /* set to anything and aspect ratio is maintained */
  overflow: hidden;
  background-color: lightblue;
}

/* centre a dendrogram horizontally in its container */
.centred {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  max-width: 400px;
  border: thin solid black;
}

/* Style the next and previous buttons, the caption text and the dots: */
/* Next & previous buttons (the left or right arrows) */
.prev, .next, #prev-lattice, #next-lattice {
    position: absolute;
    cursor: pointer;
    width: auto;
    margin-top: -22px;
    line-height: 1em;
    padding: 8px 10px 12px 10px;        /* TRBL */
    color: white;
    /* R colour 40 ("burleywood3") */
    background-color: #CDAA7D;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
    border: thin solid black;
}

.prev, .next {
  bottom: 40%;
}

.prev, #prev-lattice {
  /* Position the "prev" button to the LEFT */
  left: 0;
  border-radius: 0 3px 3px 0;
}
.next, #next-lattice {
  /* Position the "next" button to the RIGHT */
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* only for R lattice plots -- place at bottom of container */
#prev-lattice, #next-lattice {
  bottom: 0%;
}

/* On hover, add a black background color with a little
 * bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.image-caption-text {
  font-size: 12px;
  color: #f2f2f2;
  padding: 1px 4px; /* 8px 12px; */
  position: absolute;
  top: 102%;
  font-family:arial, helvetica, sans-serif;
  font-style: italic;
  background-color: #717171;  /* trial 15/03/2020 */
  width: 100%;
  line-height: 1em;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 4px 4px 4px 4px;
  position: absolute;
  background-color: #717171; /*black;*/
  line-height: 1em;
}

/* The dots/bullets/indicators */
.dot, .denddot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
/*  border-radius: 50%;  */
  display: inline-block;
  transition: background-color 0.6s ease;
  text-align: center;
  font-size: 11px;
}

.dot:hover, .denddot:hover {
  background-color: #717171;
  color: white;                /* text colour */
}

.active {
  background-color: black;
  color: white;                /* text colour */
}

/* Fading animation -- fade is a class, not pseudoclass */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.0s;
  animation-name: fade;
  animation-duration: 1.0s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.LATTICEplots.fade {
    margin: 0 auto;
}

.LATTICEplots img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}