/* box for text */
.image-cell {
  /*background-image: url('images/<%=bannerImg%>'); */
  background-repeat: no-repeat; 
  background-position: center; 
  background-size: cover; 
  height: 250px;
  border-radius: 14px;
  box-shadow: 3px 3px 3px 0 #A3A3A3;
  border-width: 1px;
  border-style: solid;
  border-color: #5F806B;

}

/* Dropdown Button */
.dropbtn {
    background-color: #54758A;
    color: white;
    padding: 8px;
    font-size: 20px;
    border: none;
    cursor: pointer;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
    box-shadow: 2px 2px 2px 0px #A3A3A3;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #8FA6B5;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
/*    position: relative;*/
	left: -140px;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 3px 3px 2px 0px #A3A3A3;
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/* Fonts */

.header_1 {
  font-family: Arial Black, Gadget, sans-serif;
  font-size: clamp(4.5vw, 4vw, 2.5rem); /* clamp(Min, Prefered, Max) */
  text-shadow: 3px 3px 3px #336600;
  color: #a3a3a3;
  font-style: italic;
}

.title_1 {
  position: top;
  font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
/*  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);*/
  font-size: clamp(2rem, 1.8rem + 1vw, 3rem);
  text-shadow: 3px 3px 3px #030303;
  color: #ffffff;
}

.subtitle_1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.1rem, 1.0rem + .40vw, 1.35rem);
  color: #30343B;
  text-shadow: 1px 1px 1px #F3F3F3;
}

.subtitle_1_alert {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.1rem, 1.0rem + .40vw, 1.35rem);
  color: #F3F3F3;
  text-shadow: 1px 1px 1px #F3F3F3;
}

.subtitle_2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.1rem, 1.0rem + .40vw, 1.35rem);
  color: #54758A;
  text-shadow: 1px 1px 1px #A3A3A3;
}

.text_1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}

.text_2 {
  color: #5F806B;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(.8rem, 0.85rem + 0.2vw, 1rem);
}

.text_3 {
  color: #30343B;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(.6rem, 0.3rem + 0.05vw, .35rem);
}

/*.footer {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(.8rem, 0.85rem + 0.2vw, 1rem);
}

.footer:hover {
  /* Moves the text 4 pixels up along the X,Y-axis */
/*  transform: translate(-4px, -4px);
  background-color: #ffffff;
  box-shadow: 7px 7px 3px 0 #A3A3A3;
}*/

.footerMenu {
  color: #a3a3a3;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(.8rem, 0.85rem + 0.2vw, 1rem);
  text-shadow: 0 0 0 transparent;
  transform: translate(0px, 0px);
  /* Transitioning multiple properties explicitly */
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
}

.footerMenu:hover {
  color: #5F806B;
  background-color: #f3f3f3;
  text-decoration: underline;
  text-shadow: 7px 7px 3px 0 #30343B;
  transform: translate(-4px, -4px);
}

/* END Fonts */

/*  Round the corners of the TR box */

.roundCorners {
  /* border-radius: 25px; */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #f3f3f3;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}

.roundCornersFooter {
  /* border-radius: 25px; */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #f3f3f3;
}

/*  END Round the corners of the TR box */

/* Box */

.box-content {
  background-color: #D8CFC2;
  padding: 10px;
  border-radius: 8px;
  width: 80%;
  /*max-width: 1500px;*/
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: #30343B;
  box-shadow: 3px 3px 3px 0 #A3A3A3;
}

.box-content_alert {
  background-color: #A9655D;
  padding: 10px;
  border-radius: 8px;
  width: 80%;
  /*max-width: 1500px;*/
  position: relative;
  border-width: 2px;
  border-style: solid;
  border-color: #8FA6B5;
  box-shadow: 2px 2px 3px 0 #A3A3A3;
}

.hotBox-content {
  background-color: #D8CFC2;
  padding: 10px;
  border-radius: 8px;
  width: 80%;
  /*max-width: 1500px;*/
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: #30343B;
  box-shadow: 3px 3px 3px 0 #A3A3A3;
  transition: transform 0.3s ease-in-out; /* Tells the browser to smoothly animate the transform property over 0.3 seconds */
}

.hotBox-content:hover {
  /* Moves the box 4 pixels up along the X,Y-axis */
  transform: translate(-4px, -4px);
  background-color: #ffffff;
  box-shadow: 7px 7px 3px 0 #A3A3A3;
}

.cell-wrapper {
  max-height: 20px;    /* Sets the hard limit for the height */
  overflow-y: auto;     /* Adds a scrollbar if the content is too tall */
  
  /* Optional: Use "overflow: hidden;" if you just want to clip the text */
}