/* Mobile Hide and Show */
.mobileShow {display:none;}
@media screen and (max-width: 900px) {
.mobileShow {display:block;}
}

.mobileHide {display: flex; justify-content: center;}
@media screen and (max-width: 900px) {
.mobileHide {display: none;}
}
/* ADA */
.screenreader-text {position:absolute; left:-999px; width:1px; height:1px; top:auto;}
.screenreader-text:focus {color:black; display:inline-block; height:auto; width:auto; position:static; margin:auto;}

/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}

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

* {
  box-sizing: border-box;
  border-radius: 4px;
}

html, body {
margin: 0;
padding: 0;
}

html {
font-family: Open Sans, sans-serif; 
background-color: #2d2d2d; 
color: white;
}

.page-container {
max-width:96vw; /* 96% of the viewport width */ 
width: 96vw; /* 98% of the viewport width */
margin: 2rem auto 0 auto;
text-align: center;
}

.flex-item h1 {
padding: 0;
margin: 0;
}

.flex-container {
display: flex;
justify-content: center;
align-items: top;
width: 100%;
max-width: 100%;
height: 68vh; 
max-height: 68vh; 
gap: 0 1.5rem;
overflow: hidden;
}

.flex-item-slideshow {
max-width: 35%; 
width: 35%;
max-height: 100%;
height: 100%;
overflow: hidden;
padding: 5px; /* To account for 5xp box-shadown on slides-container */
}

/* Standalone Version */
.flex-item-standalone {
max-width: 100vw; /* Max width is 100% of its parent */
width: 100vw;
max-height: calc(100vh - 2rem); /* Max height is 100% of its parent */
height: calc(100vh - 2rem); /* Max height is 100% of its parent */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.flex-item-standalone .mySlides img, .mySlides svg {
vertical-align: middle;
max-width: 90vw; /* Max width is 100% of its parent */
width: 90vw;
max-height: calc(100vh - 8rem); /* Max height is 100% of its parent */
height: calc(100vh - 8rem); /* Max height is 100% of its parent */
object-fit: contain; /* Maintain aspect ratio without cropping */
border: 1px solid transparent;
overflow: hidden;
padding: 0 0 1rem 0;
}

.slides-container {
max-width: 100%;
width: 100%;
max-height: 50vh; /* Max width is 100% of its parent */
height: 50vh;
background-color: #283747; 
box-shadow: #B9DCD2 0 0 5px 1px;
margin: 1rem 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.mySlides {
display: none;
max-width: 100%; /* Max width is 100% of its parent */
width: 100%;
max-height: 100%; /* Max width is 100% of its parent */
height: 100%;
}

/* Applied by script if the image is an SVG */
.svgBackground {
background-color: #2d2d2d; 
padding: 1rem;
}

/* Applied by script if the image is NOT an SVG */
.imgBackground {
background-color: #336699; 
padding: .5rem;
}

.mySlides img, .mySlides svg {
 vertical-align: middle;
 max-width: 100%;
 width: 100%;
 max-height: 100%; 
 height: 100%;
 object-fit: contain; 
 vertical-align: middle;
 display: flex; 
 justify-content: center; 
 align-items: center;
}

.captions-container {
  display: grid; /* Use grid layout */
  grid-template-columns: 4rem auto; /* First column 5rem wide, second column takes remaining space */
  gap: 1rem; /* Adjust the gap between columns as needed */
  max-width: 100%;
  height: 10rem;
  max-height: 10rem;
  width: 100%;
  padding: .5rem 0;
  margin-bottom: 1rem;
  margin-left: 0;
  box-sizing: border-box; /* Ensure padding and border are included in the width calculation */
  align-items: start; /* Aligns items to the start of the container, preventing height adjustment */
  text-align: left;
}

.numbertext-container {
    display: flex;
    flex-direction: row; /* Align children in a row */
    align-items: center; /* Center children vertically in the container */
    justify-content: left; /* Align children to the start of the container horizontally */
  }

.numbertext {
  color: #f2f2f2;
  padding: .5rem 1rem;
  background-color: #336699; 
  border: 1px solid transparent;
  white-space: nowrap; /* Prevents text from wrapping */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Add ellipsis to overflowed text */
  vertical-align: middle;
  height: 3rem;
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  /* If individual items are inline-flex, you might not need 'vertical-align' */
  display: inline-flex;
  align-items: center; /* This ensures the content of .numbertext itself is centered */
  justify-content: center;
}

.numbertext-icon {
  color: #f2f2f2;
  padding: .5rem 0;
  background-color: #336699; 
  border: 1px solid transparent;
  white-space: nowrap; /* Prevents text from wrapping */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Add ellipsis to overflowed text */
  vertical-align: middle;
  height: 3rem;
  width: 100%;
  font-size: 1rem;
  /* If individual items are inline-flex, you might not need 'vertical-align' */
  display: inline-flex;
  align-items: center; /* This ensures the content of .numbertext itself is centered */
  justify-content: center;
}

.text { /* 86 characters available */
  white-space: normal; /* Default, allows text wrapping */
  text-align: justify;
  padding-right: .25rem;
  padding-top: .35rem;
}

.caption-icon-warning, .caption-icon-link, .caption-icon-announce, .caption-icon-dept {
    width: 2rem; /* Icon size */
    height: 2rem; /* Icon size */
    vertical-align: middle;
}

.warning-title, .link-title, .announce-title, .dept-title {
  font-weight: 600;
}

.flex-item-info {
max-width: 65%; 
width: 65%;
max-height: 100%;
height: 100%;
overflow: hidden;
margin-top: 1.1rem;
}

.active {
background-color: #717171;
}

/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}

.row {
display: flex;
flex-direction: row; /* Children in a row */
width: 100%; /* Adjust if necessary */
justify-content: center; /* Align children to the start of the container */
align-items: center; /* Vertically align children in the middle */
}

.row:after {
content: "";
display: table;
clear: both;
}

/* Six columns side by side */
.column {
width: 100%;
padding: .25rem;
}


.icon-container {
  padding: 1rem; /* Adjust as needed */
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%; /* Adjust width to account for padding */
  box-sizing: border-box; /* Ensure padding does not add to the width */
  gap: 1rem 1rem;
}

.icon-container a {
  width: 5%;
  height: 0; /* Initial height to 0 */
  padding-top: 5%; /* height is the same as the width, creating a square */
  position: relative; /* Sets context for absolute positioning of children */
  display: block; /* Ensures the <a> behaves as a block-level element */
}

.icon-container .icon {
  position: absolute; /* Absolute positioning to fill the parent <a> */
  top: 0;
  left: 0;
  width: 100%; /* Fill the entire width of the parent */
  height: 100%; /* Fill the entire height (calculated with padding-top of parent) */
  background-color: #336699;
  box-shadow: #B9DCD2 0 0 2px 2px;
  padding: .25rem;
}

.icon-container .icon:hover {
box-shadow: #336699 0 0 2px 2px;
background-color: black;
}


.active /*,
.demo:hover */ {
opacity: 1;
box-shadow: #B9DCD2 0 0 4px 4px; 
}


/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; 
top: 0;
left: 0;
z-index: 1000; 
width: 100%; 
height: 100%; 
overflow: hidden; 
background-color: rgb(0,0,0); 
}

/* Modal Content (image) */
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 5%; 
max-width: 100%; 
max-height: 100%; 
display: flex;
justify-content: center;
align-items: center;
 /* Include padding in width and height calculations */
}

/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 100%;
text-align: center;
color: #ccc;
padding: 2rem 0 0 0;
height: 2rem;
}

/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: white;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
background: red;
padding: 0 1rem;
}

.close:hover,
.close:focus {
color: red;
background: orange;
text-decoration: none;
cursor: pointer;
}

ul {
list-style-type: none;
margin: 2rem 0 .5rem 0;
text-align: left;
/*
padding: 0 .5rem 0 2rem;
margin-bottom: 1.5rem;
*/
}

ul li {
margin-bottom: .5rem;
}

p {
display: flex;
justify-content: left;
text-align: justify;
text-shadow: 2px 2px 2px #000!important;
}

.kiosktitle-container {
width: 100%;
color: white;
background-color: #3f3f3f;
text-align: center;
margin: auto;
border: 1px solid transparent;
}

.kiosktitle-container p {
  justify-content: center;
  }

.kiosktitle-container h1 {
  justify-content: center;
  margin: .5rem auto .25rem auto;
  text-shadow: 1px 1px 1px #000!important;
  }

#subheading {
  margin-top: 0;
}

#subtitles-container {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
margin: 1.5rem 0 1rem 0;
padding: 0;
}

#subtitles-container li:first-child {
  display: inline-block;
  margin: 0;
}

#subtitles-container li {
  margin: .2rem 0 .2rem 1rem;
  padding: 0 1rem;
  font-size: 1.25rem;
  line-height: 2;
  text-align: left;
  color: #000 ;
  background-color: #e8f48c;
  width: fit-content;
  list-style-type: none;
  text-shadow: 1px 1px 1px #FFF!important;
}

.thumbnail-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100%; 
}

.image-wrapper {
width: calc(16.66% - 2rem);
height: 20vh;
margin: 1rem;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; /* Hide any overflow */
box-shadow:#336699 0 0 10px 1px;
}

.image-container {
display: flex; /* Utilize flexbox for centering */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
width: 100%!important; /* Take full width of the parent */
height: 100%!important; /* Take full height of the parent */
background-color: #2d2d2d; 
position: relative; /* This makes it a reference for absolutely positioned inner elements */
 }

.image-wrapper:hover {
box-shadow: #B9DCD2 0 0 10px 1px;
}

.thumb {
opacity: 0.85;
box-shadow: transparent 0 0 4px 4px;
cursor: pointer;
max-width: 100%!important; /* Max width to the container width */
max-height: 100%!important; /* Max height to the container height */
object-fit: contain; /* Maintain aspect ratio without cropping */
}

.thumbnail-icon {
position: absolute;
bottom: 5px; /* Adjust as necessary */
right: 5px; /* Adjust as necessary */
width: 1.4rem; /* Icon size */
height: 1.4rem; /* Icon size */
z-index: 1; /* Ensure it's above other content */
background-color: #336699;
padding: .2rem;
border: 1px solid #B9DCD2;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}

@media screen and (max-width: 900px) {

body, html {
width: 100%;
height: auto;
overflow: visible;
}

.slideshow-container {
height: 25rem;
padding: 3.5rem;
}

.page-container {
max-width:100%;
width: 100%;
margin-top: 1.5rem;
}

.flex-container {
flex-direction: column;
width: 100%!important;
gap: 1.5rem 0;
}

#thumbnails {
 display: none!important;
}

.flex-item h1 {
width: 100%;
}

 .flex-item-50 {
width: 95%!important;
margin: 0 auto;
padding: 0;
height: 60%;
}
.icon-container {
margin: 1rem 0 2rem 0;
}
.icon-container .icon {
width: 3rem;
height: 3rem;
padding: .5rem;
background-color: #336699;
box-shadow: transparent 0 0 2px 2px;
margin: 0 .5rem; 
}
.kiosktitle-container {
width: 90%;
text-align: center;
margin:auto;
}
ul {
margin-bottom: 1.5rem;
}
}