/* Define the styling for list items */
.ddnavbar-horizontal > li {
  padding: 5px; /* Add padding to separate items */
  margin-right: 5px; /* Add margin between items */
  cursor: pointer; /* Change cursor to pointer on hover */
  position: relative; /* Set position to relative for positioning dropdown */
  background-color: #f0f0f0; /* Set a default background color */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for effects */
}

/* Define the hover effect */
.ddnavbar-horizontal li:hover {
  background-color: #e0e0e0; /* Change background color on hover */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Add a more subtle shadow on hover */
}

.navbar-horizontal {
   list-style-type: none; /* Remove bullet points */
   padding: 0; /* Remove default padding */
   margin: 0; /* Remove default margin */
   display: flex; /* Display list items horizontally */
 }

 /* Define the styling for list items */
 .navbar-horizontal >  li {
   padding: 5px; /* Add padding to separate items */
   margin-right: 5px; /* Add margin between items */
   cursor: pointer; /* Change cursor to pointer on hover */
   position: relative; /* Set position to relative for positioning dropdown */
 }

 /* Define the hover effect */
 .navbar-horizontal li:hover {
   background-color: lightgray; /* Change background color on hover */
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Add shadow on hover */
 }

 .navbar-horizontal > li.selected {
     //border: 2px solid black; /* Add a border to all sides */
     //border-bottom: none; /* Remove the bottom border */
     background-color: #d0d0d0; /* Set a slightly darker background for selected item */
     border-top: 3px solid #007bff; /* Add a top border with a highlight color (e.g., blue) */
     padding-top: 2px; /* Adjust padding to maintain height */
     
     //outline:1px solid;
 }
 .horizontal-spacer {
   //border: none; /* Remove border */
   //border-right: 1px solid gray; /* Add right border for spacing */
   //height: 20px; /* Set height for spacing */
   margin: 10px 0; /* Add margin for spacing */
 }
 
 /* Define styling for dropdown menus */
 .navbar-dropdown {
   position: absolute; /* Set position to absolute for dropdown */
   top: 100%; /* Position dropdown below list item */
   left: 0; /* Align dropdown with list item */
   display: none; /* Hide dropdown by default */
   background-color: white; /* Set background color for dropdown */
   border: 1px solid gray; /* Add border for dropdown */
   z-index: 1; /* Ensure dropdown appears above other content */
   list-style-type: none;
   margin:0;
   padding:10px;
 }
 .navbar-dropdown  li + li {
   margin-top:10px;
 }
 /* Show dropdown menu when list item is hovered */
 .navbar-horizontal li:hover .navbar-dropdown, .navButton:hover .navbar-dropdown {
   display: block; /* Show dropdown on hover */
   margin:0;
   paddgin:0;
   white-space: nowrap;
 }

 .navButton {
   padding: 5px; /* Add padding to separate items */
   margin-right: 5px; /* Add margin between items */
   cursor: pointer; /* Change cursor to pointer on hover */
   position: relative; /* Set position to relative for positioning dropdown */
     
     display: flex; /* Display list items horizontally */
     position:relative;
 }


 /* Define the hover effect */
 .navButton:hover {
   background-color: lightgray; /* Change background color on hover */
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Add shadow on hover */
 }

.navbar2-horizontal {
   list-style-type: none; /* Remove bullet points */
   padding: 0; /* Remove default padding */
   margin: 0; /* Remove default margin */
   display: flex; /* Display list items horizontally */
 }
 

 /* Define the styling for list items */
 .navbar2-horizontal  [role=tab] {
   padding: 5px; /* Add padding to separate items */
   margin-right: 5px; /* Add margin between items */
   cursor: pointer; /* Change cursor to pointer on hover */
   position: relative; /* Set position to relative for positioning dropdown */
 }

 /* Define the hover effect */
 .navbar2-horizontal [role=tab]:hover {
   background-color: lightgray; /* Change background color on hover */
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Add shadow on hover */
 }

 .navbar2-horizontal  [role=tab].selected {
     //border: 2px solid black; /* Add a border to all sides */
     //border-bottom: none; /* Remove the bottom border */
     background-color: #d0d0d0; /* Set a slightly darker background for selected item */
     border-top: 3px solid #007bff; /* Add a top border with a highlight color (e.g., blue) */
     padding-top: 2px; /* Adjust padding to maintain height */
     
     //outline:1px solid;
 }

  /* Show dropdown menu when list item is hovered */
 .navbar2-horizontal [role=tab]:hover .navbar-dropdown, .navButton:hover .navbar-dropdown {
   display: block; /* Show dropdown on hover */
   margin:0;
   paddgin:0;
   white-space: nowrap;
 }


 /* use this to produce aria compliant tab lists. functions with activeTags lib.site.tabs for v098  */
 .tab-item {
   cursor: pointer;
   padding: 5px;
   display: inline-block;
 }

 .tab-link.selected {
     font-weight: bold;
   background-color: #d0d0d0;
   border-top: 3px solid #007bff;
   padding-top: 2px;
   padding-bottom: 5px;
 }

 .tab-panel {
   display: none;
 }

 .tab-panel:not(.tab-hidden) {
   display: block;
 }

 .tab-hidden {
   display: none;
 }
 .tab-link{
   border-top: 3px none;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-right: 10px;
   padding-left: 10px;

   display: block;  /* Ensures it fills the space inside <li> */
   width: 100%;     /* Optional: To match the width of <li> */
   box-sizing: border-box; /* Ensures padding is calculated properly */
   font-size:larger;
 }
 /* Define the hover effect */
 .tab-link:hover,.tab-link.selected {
   background-color: lightgray; /* Change background color on hover */
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Add shadow on hover */
 }
 



 /* modal panel configurations... oh boy the mess we have*/

 .modal-hidden {
    display: none;
}
.modal-visible {
    display: block !important;  /* Or any other display property you want for visible modals */
}
/* Modal Container: Basic modal layout */
.modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Ensure modal is above other content */
    max-width: 500px;
    width: 100%;
    background-color: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

/* Modal Overlay: Darkens the background when the modal is active */
.zmodal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999; /* Just behind the modal content */
}

/* Modal Header: Title and close button styling */
.modal-header {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ddd;
}



.modal-header h2 {
    margin: 0;
    font-size: 1.5em;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}

/* Modal Body: Content area styling */
.modal-body {
    padding: 16px;
}

/* Modal Footer: Button placement */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
    background-color: #f0f0f0;
    border-top: 1px solid #ddd;
}

.modal-footer button {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Customization for buttons */
.modal-footer button:hover {
    background-color: #0056b3;
}

 .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}