/* Colors: white=#fff, black=#000 light-blue=#add8e6, light-grey=#e0e0e0, very-light-grey=#F5F5F5, blue=#0000ff, light-yellow: #FFFF9E, light-red: #ffdcdc, very-light-green: #e3ffd7 */
body {
  margin: 2; /* Default page margins. To remove any default margins, use a value of 0. */
  font-family: Arial, sans-serif;  /* Set Arial as the default font */
  font-size: 16px; /* Web browser default is 16px */
}

.tab-container {
  /* Style the container holding tabs */
  display: flex;
  justify-content: flex-start;  /* Left-justify tabs */
  margin-bottom: 8px;  /* Add space between tabs and content, was 20px */
  /* background-color: #add8e6; /* Background color around tabs */
}

.tab-button {
  /* Style the tab buttons */
  display: block;
  padding: 10px 10px; /* The 1st is the padding above and below text, the 2nd is the padding left & right of the text. */
  margin: 0px 2px;  /* The 1st is the padding above the botton, the 2nd is the padding between buttons */
  text-align: center;
  font-size: 1.3em;  /* Large font size. The relative size of the font compared to the current font size of the element's parent. Was 1.5em*/
  cursor: pointer;
  /* Add border for individual tab, remove previous rule */
  border: 2px solid white; /* Add colored border. For no border, use the command border: none; */
  border-radius: 5px;  /* Rounded corners for buttons */
  background-color: #EBEBEB;  /* Background for inactive tabs */
  font-family: Arial, sans-serif;  /* Set Arial font for buttons */
}

.tab-button:hover {
  /* Style on hover effect */
  background-color: #FFFF9E; /* Background color for when hovering over */
}

.active-tab {
  /* Style for the first tab (blue font) */
  color: #0000ff;
  background-color: #fff;
  box-shadow: 0px 15px 0px white;
  font-family: Arial, sans-serif;  /* Set Arial font for buttons */
}

/* Style the content area */
.content-area {
  /* padding: 0px /* Padding to the top, bottom, left, and right of text */
  padding-top: 5px; /* Padding on top of the content-area. */
  padding-bottom: 5px; /* Padding at the bottom of the content-area. */
  padding-left: 10px; /* Padding at the left of the content-area. */
  padding-right: 10px; /* Padding to the right of the content-area. */
  /* border: 1px solid #ddd; */
  border: none;
  border-radius: 5px;
  background-color: #fff;
  font-size: 1.1em;
  margin-top: 0; /* Remove top margin for no spacing */
  font-family: Arial, sans-serif;  /* Set Arial font for buttons */
}

/* Initially hide all content sections */
.content-area p {
  display: none;
}

/* Show content for the first tab by default */
#content-1 {
  display: block;
}

/* Hyperlink style of not yet visited sites (unvisited links) */
a {
  text-decoration: none;
  color: #000;
}

/* Hyperlink style of already visited sites (visited links) */
a:visited {
  text-decoration: none;
  color: #000;
}

/* Alternate hyperlink style */
.hyperlink-type2 {
color: blue;
text-decoration: underline;
}

/* Alternate hyperlink style of already visited sites (visited links) */
.hyperlink-type2:visited {
color: blue;
text-decoration: underline;
}

/* Regular text defaults */
p {
  line-height: 1.2;  /* Adjust the value as needed */
}

/* Extra small font for a very small line separation. */
.small-letter-break {
  position: relative; /* Needed for pseudo-element positioning. */
}

.small-letter-break::after {
content: "";
display: block;
height: -0.25em;
width: 100%;
margin-top: 0.15em;
}

/* Section-heading text are in reverse text */
.section-heading {
  width: 860px; /* Set the width of the background highlighted box. width: 95vw; or 100vw (of the viewable window. */
  padding-top: 0; /* Remove padding for minimal space */
  padding-bottom: 50px;
  margin: -3px; /* Top and left margin of the highted text paragraph. A minus value to have the First letter align with regular text. */
  display: inline-block; /* Allow content to wrap if it overflows */
  overflow: hidden; /* Hide any content exceeding the width */
  background-color: #e0e0e0;  /* Set the desired background color */
  padding: 3px;  /* Add some padding for separation */
  line-height: 1; /* Change to 2 to add space before the lighted line; may prevent the background highlight from touching the previous line. */
  font-family: Arial, sans-serif;  /* Set Arial font for background text */
  font-weight: bold;
  font-size: 1.2em;
  /* margin-left: 10px;  /* Add space to the left of the element */
  color: #820000; /* Font color */
}

/* Style used to center an image. */
.centered-image {
   text-align: center;
}

/* Style used to display calls in the queue. */
.box-container {
  display: flex;
  flex-direction: column; /* Use "column" to display boxes vertically. Normally (for some browsers) "row" will display boxes side-by-side. If it doesn't work, simply remove this line. */
  justify-content: flex-start; /* Align items to the left */
  border: 0px solid black;
  gap: 5px; /* Gap between the side-by-side boxes or between vertically stacked boxes. */
  width: 100%; /* Make sure the container fills it's parent */
}

/* Style used to display calls in the queue. */
.box {
  /* background-color: #FFFF9E; Light yellow */
  color: black;
  font-size: 1em;
  border: 1px solid #000;
  padding: 10px; /* Add space to the top, bottom, left, and right of the element in the box.
  border-radius: 3px; /* Slightly rounded corners */
  width: 200px; /* Width of each box */
}