* {
    box-sizing: border-box;
}

body {
    background-color: #2b2b2b;
    color: #d3d3d3;
    font-family: "Gentium", "Cardo", "New Athena Unicode", "Noto Serif", Arial, sans-serif;
    margin: 0;
    overflow-y: auto;
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

/* Style for <a> tags with href not equal to "None" */
a[tid]:not([tid="None"]) {
    color: rgb(0, 187, 255); 
    text-decoration: underline; 
}

/* Style for <a> tags with href equal to "None" */
a:not([tid]), a[tid="None"], a:not([href]) {
    color: white;
    text-decoration: none;
}



/*****************************/
/* Tags Index */
/*****************************/
.tags_index_main_container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* This makes the container take the full height of the viewport */
    font-size: 24px; /* Increase font size for bigger text */
}

.tags_index_container {
    text-align: center; /* Center the text within the div */
}

.tags_index_container a {
    display: block; /* Make each link a block to apply margin and centering */
    margin: 20px; /* Add some space between the links */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

.tags_index_container a:hover {
    color: #ff0000; /* Change color on hover */
}


/*****************************/
/* Header and Navigation Container*/
/*****************************/

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem; /* Scales with the root element's font size */
    font-size: calc(0.6rem + 0.3vw);
    top: 0;
    width: 100%;
    z-index: 1000;
    background: #1b1b1b;
    color: #f3f3f3;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.header > div {
    display: flex;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-left img {
    margin-right: 10px; /* Space between logo and title */
}

.header-center {
    font-size: 0.4em; 
    color: red; 
    display: flex;
    flex-direction: column; 
    align-items: center;
}

.header-center-top-buttons-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: calc(0.6rem + 0.5vw);
}

.header-center-bottom-buttons-row {
    font-size: calc(0.6rem + 0.5vw);
    color: red; 
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


.title-subtitle-container {
    display: flex;
    flex-direction: column; /* Stacks the title and subtitle vertically */
    justify-content: center; /* Centers the title and subtitle vertically */
    padding-left: 10px; /* Adds some space between the logo and the text */
}

.title-subtitle-container h3,
.title-subtitle-container p {
    margin: 0; /* Removes default margin to control spacing more precisely */
}

.header img#logoImage {
    height: 40px; /* Smaller for mobile */
}


.header_navigation_button {
    background: #1b1b1b;
    color: #f3f3f3;
    border: none;
    padding: 0.5rem; /* Scales with the root element's font size */
    margin: 0 2px;
    cursor: pointer;
    font-size: calc(0.6rem + 0.3vw); /* Responsive font size */
}

.header_navigation_button_dropdown {
    background: #2b2b2b;
    color: #f3f3f3;
    border: none;
    cursor: pointer;
    font-size: calc(0.6rem + 0.3vw); /* Responsive font size */
}

.header_navigation_switcher {
    background: #1b1b1b;
    color: #f3f3f3;
    border: none;
    padding: 0.2rem; /* Scales with the root element's font size */
    margin: 0 0px;
    cursor: pointer;
    font-size: calc(0.6rem + 0.3vw); /* Responsive font size */
}

.header_navigation_button:hover {
    background: #666; /* Darker shade for hover state */
    color: #eee; /* Lighter text color for better contrast */
}
 


/*****************************/
/* Main Container */
/*****************************/
.main_container {
    display: flex;
    /*padding-top: 5vh;  padding to ensure content doesn't get hidden behind the fixed header */
    height: calc(85vh - 5vh); /* Adjusted to account for header*/
    overflow-y: hidden;
    overflow-x: hidden;
}

.home_main_container {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative; /* Added to position the red box absolutely */
}

.welcome-table a {
    text-decoration: none;
    color: #007bff;
    line-height: 1.2; /* Adds space between links for readability */
}

.home_main_container figure {
    margin: 0; /* Remove the default margin */
    height: 100vh;; /* Set figure height to take full container height */
    width: 100%; /* Set figure width to take full container width */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center;
    align-items: center;
    text-align: center; /* Ensure text alignment is centered */
    position: relative; /* Added to position the red box relative to the figure */
}

.main_figcaption {
    font-style: italic; /* Makes the text italic */
    font-size: 0.5em; /* Sets a smaller font size; adjust as needed */
    text-align: left; /* Optional: Centers the caption text under the image */
    width: 100%; /* Ensure the caption takes the full width */
    color: #eee; /* Ensures text color is light grey */
}

.main_figcaption a {
    color: #eee;
    text-decoration: underline; /* Adds underlining to indicate clickable links */
}

.home_main_container img {
    width: 100%; /* Make the image take full width of the figure */
    height: 100vh;; /* Make the image take full height of the figure */
    object-fit: cover; /* Cover the area without stretching the image */
    max-width: none; /* Overrides default max-width */
}

.red-box {
    position: absolute;
    bottom: 6em;
    right: 14em;
    color: rgb(4, 75, 167); /* This should be a valid color, adjusting to #FF5733 for bright red text */
    padding: 10px; /* Padding around the text */
    text-align: center; /* Aligns the text within the box to the left */
    font-size: 1.4em; /* Smaller font size for the text within the box */
    font-family: 'Times New Roman', serif; 
    text-shadow: 2px 2px 4px #000000;
}

.welcome-table {
    width: 100%;
    margin-top: 20px;
    padding: 20px 0;
    box-sizing: border-box;
    font-family: "Gentium", "Cardo", "New Athena Unicode", "Noto Serif", Arial, sans-serif;
}
    
  .welcome-table table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    text-align: justify; /* Justifies the text in the table */
  }
  
  .welcome-table td {
    padding: 10px;
    border: 0; /* Removes borders */
    vertical-align: baseline; /* Aligns the text baselines of adjacent cells */
    text-align: justify; /* Justifies text within cells */
  }
  
  .welcome-table td:first-child {
    font-size: 24px; /* Makes text larger in the first column */
    width: 33.33%; 
    text-align: center; /* Centers text horizontally */
    padding-top: 5px; /* Adjusted top padding for vertical alignment */
  }
  
  .welcome-table td:last-child {
    width: 66.66%;
    padding-top: 15px; /* Adjusted top padding for vertical alignment */
  }
  
  .site-footer {
    background-color: #333;
    color: #f2f2f2;
    padding: 0px;
    display: flex;
    justify-content: space-between;
    font-family: "Gentium", "Cardo", "New Athena Unicode", "Noto Serif", Arial, sans-serif;
    font-size: 0.7em; /* Smaller font size */
}

.footer-column {
    flex: 1; /* Each column takes equal space */
    padding: 0 5px; /* Adds some padding on the sides for spacing */
}

.site-footer h2 {
    font-size: 1em; /* Adjusted to be proportional to the smaller base font size */
}

.site-footer a {
    text-decoration: none;
    color: #007bff;
    line-height: 1.2; /* Adds space between links for readability */
}

.site-footer a:hover {
    text-decoration: underline;
}



/*****************************/
/* Intro Page */
/*****************************/
.image_container {
    position: fixed; /* Fixes the position of the image container */
    width: 50%; 
    height: 100%; /* Full viewport height */
    overflow-y: hidden;
    overflow-x: hidden;
}

.image_container img {
    width: 90%;
    height: 90%;
    display: block;
}

.image_container figcaption {
    line-height: 1.2; /* Adjust this value to control space between lines */
    font-size: calc(0.5rem + 0.3vw); /* Responsive font size */
}

.intro_text_content {
    margin-left: 50%; /* Offsets the text to the right of the fixed image */
    width: 50%; 
    height: 100%;
    overflow-y: auto; /* Enables scrolling within the intro content */
    line-height: 1.2; /* Adjust this value to control space between lines */
    font-size: calc(0.5rem + 0.3vw); /* Responsive font size */
}


/*****************************/
/* Map Container in Main */
/*****************************/
.main_container_main {
    display: flex;
    flex-direction: column;
    width: 100%; /* Full width of the viewport */
    height: 85vh; /* Full height of the viewport */
    overflow: hidden; /* Prevents scrolling */
}

.map_and_feature_container_main {
    display: flex;
    width: 100%; /* Ensures container spans the entire width */
    height: 100%;
    flex-grow: 1; /* Allows container to fill available space */
    overflow-y: auto; /* Allows scrolling if content overflows vertically */
}

.map_container_main {
    flex-basis: 90%; /* Allocates 90% of the parent container's width */
    background-color: #1b1b1b; /* Light grey background for visibility */
    margin: 10px; /* Adds margin around the map container */
    overflow: hidden; /* Prevents overflow */
}

.feature_buttons_container {
    flex-basis: 10%; /* Allocates the remaining 10% of the width */
    display: flex;
    flex-direction: column;
    gap: 1px; /* Space between buttons */
    padding: 0px; /* Padding inside the container */
    align-items: left; /* Centers buttons horizontally */
    background-color: #333; /* Light background for visibility */
    overflow-y: auto; /* Allows scrolling if content overflows vertically */
}

.feature_buttons_container button {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: calc(0.5rem + 0.3vw); /* Responsive font size */
    border: none; /* Removes default border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Changes cursor to pointer on hover */
    margin: 0px; /* Spacing between buttons */
    background-color: #333; /* Example background color */
    color: white; /* Text color */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.feature_buttons_container button.active,
.feature_buttons_container button:hover {
    background-color: #0056b3; /* Darker blue on hover/active */
}

.feature_buttons_container label {
    display: block; /* Ensures the label is on its own line */
    margin-bottom: 8px; /* Space between the label and the first button */
    font-size: calc(0.6rem + 0.5vw); /* Slightly larger and responsive font size for the label */
}

.map_and_table_buttons_main {
    cursor: pointer;
    padding: 10px 15px;
    margin-bottom: 10px; /* Space between buttons */
    border: none;
    border-radius: 4px;
    background-color: #333; /* Bootstrap primary button color */
    transition: background-color 0.3s; /* Smooth transition for background color change */
    color: white;
    text-align: center;
}

.map_buttons_main {
    width: 80%; /* Matches map_container_main width */
    align-self: center; /* Centers horizontally */
    padding: 10px 0; /* Padding above and below */
    background-color: #333;
    transition: background-color 0.3s; /* Smooth transition for background color change */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.button_row_main {
    display: flex;
    flex-wrap: wrap; /* Allow the contents to wrap */
    justify-content: space-around; /* Space out buttons evenly */
    align-items: center; /* Align items vertically */
}

.map_buttons_main .map_and_table_buttons_main.active,
.map_buttons_main .map_and_table_buttons_main:hover {
    background-color: #007bff; /* Light blue background for hover and active */
    color: white; /* Ensuring text color is white for better visibility */
}


/* Optionally, adjust the <select> and its <option>s appearance to match the button styling */
#baseMapSwitcher-main {
    padding: 2px 4px;
    border: 1px solid #ccc; /* Adds a light border similar to the buttons */
    border-radius: 4px; /* Consistent rounded corners */
    background-color: white; /* Background color */
    color: #007bff; /* Text color to match the buttons */
    cursor: pointer; /* Cursor style */
}

#baseMapSwitcher-main:hover {
    background-color: #e7f5ff; /* Lighter blue background on hover for consistency */
}


/* ArcGIS PopUp */
.popup-content {
    font-family: Arial, sans-serif;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.popup-content h2 {
    color: #0079c1;
    font-size: calc(0.5rem + 0.5vw); /* Slightly larger and responsive font size for the label */
    margin-top: 0;
}

.popup-content p {
    margin: 5px 0;
    line-height: 1.5;
    font-size: calc(0.4rem + 0.5vw); /* Slightly larger and responsive font size for the label */
}

.popup-content a {
    color: #0079c1;
    text-decoration: none;
}

.disabled-link {
    color: gray;
    cursor: not-allowed;
    text-decoration: none;
}


/*****************************/
/* Map Container on the left */
/*****************************/
.map_and_buttons_container {
    width: 50%;
    float: left;
    overflow: auto;
    background-color: #2b2b2b;
    color: #d3d3d3;
}

.map_container {
    flex: 1; /* Allows the map container to take more space */
    margin: 10px;
    background-color: #2b2b2b;
    color: #d3d3d3;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: 65vh;
}

.button_row {
    display: flex;
    flex-wrap: wrap; /* Allow the contents to wrap */
    justify-content: space-around; /* Space out buttons evenly */
    align-items: center; /* Align items vertically */
    flex-grow: 1; /* Allow this row to grow as needed */
}

/* Targets all table cells */
.checkbox-group table td {
    padding: 4px; /* Adjust padding as needed */
}

/* Targets cells specifically containing checkboxes */
.checkbox-group table td:nth-child(2) {
    width: 1%; /* Minimize width */
    white-space: nowrap; /* Prevent wrapping, if necessary */
}



.checkbox_row {
    display: flex;
    flex-wrap: wrap; /* Allow the contents to wrap */
    justify-content: space-around; 
    align-items: center; /* Align items vertically */
    margin-top: 10px; /* Margin top for spacing from the button_row */
}

.checkbox_row input[type="checkbox"],
.checkbox_row label {
    display: inline-block; /* Makes the element inline with block features */
    vertical-align: middle; /* Aligns the elements vertically in the middle */
    margin-right: 5px; /* Adds some space to the right of each element */
}

.baseMapSwitcherContainer {
    display: flex;
    align-items: center; /* Align the label and select box */
}

.baseMapSwitcherContainer label {
    margin-right: 5px; /* Space between label and select */
}

.map_and_table_buttons, .baseMapSwitcherContainer select {
    margin: 5px; /* Margin around buttons and select for spacing */
    padding: 1px 5px; /* Padding inside buttons and select */
}

.map_buttons button, .baseMapSwitcherContainer button {
    padding: 5px 10px;
    border: none;
    border-radius: 5px; /* Soften edges */
    background-color: #2b2b2b;
    color: #d3d3d3;
    cursor: pointer;
    font-size: 1rem; /* Responsive font size */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    outline: none; /* Remove focus outline for aesthetic purposes; ensure to manage focus state for accessibility */
}

.map_buttons button:hover, .baseMapSwitcherContainer button:hover,
.map_buttons button:focus, .baseMapSwitcherContainer button:focus {
    background-color: #0056b3; /* Darker shade for hover/focus */
    color: #ffffff; /* Keep text color consistent for readability */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Slight shadow for depth */
}

.map_buttons button:focus, .baseMapSwitcherContainer button:focus {
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px #007bff;
}

.map_buttons button:active, .baseMapSwitcherContainer button:active {
    background-color: #004099; /* Even darker for the active state */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Inward shadow for a "pressed" effect */
}


/**************************/
/* The Modal              */
/**************************/
/* General Modal Styles */
#searchModal {
    display: none; /* Hide modal by default */
}


#editLocaleModal {
    display: none; /* Hide modal by default */
}

#export_db_modal {
    display: none; /* Hide modal by default */
}

#tagModal {
    display: none; /* Hide modal by default */
}

/* Search results*/
#searchResults {
    background-color: #f9f9f9; /* Light grey background */
    border: 1px solid #ccc; /* Grey border */
    padding: 10px; /* Padding around the text */
    margin-top: 5px; /* Space above the results */
    overflow-y: auto; /* Enables vertical scrolling if content is too long */
    max-height: 300px; /* Limits the height of the results div */
}

.result-item {
    margin-bottom: 5px; /* Space between items */
    padding: 10px; /* Padding inside each result item */
    border-bottom: 1px solid #ddd; /* Line between items */
}

.result-item:last-child {
    border-bottom: none; /* Removes the bottom border from the last item */
}

.highlight {
    color: #c00; /* Red color for highlighting important info */
    font-weight: bold; /* Makes text bold */
}


.form-searchmodal {
    max-width: 600px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: calc(0.5rem + 0.3vw); /* Responsive font size */
    font-weight: normal;
    margin: 2px auto;
    padding: 4px;
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 0px; /* This controls the space between the forms */
}

.switch-field {
    display: flex;
    margin-bottom: 2px; /* Adjusted for visual spacing */
    overflow: hidden;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    border: 0;
    overflow: hidden;
}

.form-searchmodal:first-of-type {
    margin-bottom: 0; /* Remove bottom margin from the first form */
}

.form-searchmodal:last-of-type {
    margin-top: 0; /* Remove top margin from the second form */
    margin-bottom: 0;
}

.switch-field label {
    background-color: #e4e4e4;
    color: rgba(0, 0, 0, 0.6);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: calc(0.5rem + 0.3vw); /* Responsive font size */
    line-height: 1.6; /* Adjusted for better text alignment */
    text-align: center;
    padding: 2px 4px; /* More padding for a better touch area */
    margin-right: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
    cursor: pointer;
    background-color: #dcdcdc; /* Lighter grey on hover for better user feedback */
}

.switch-field input:checked + label {
    background-color: #a5dc86; /* Green background for active state */
    box-shadow: none;
    color: #ffffff; /* White text for better contrast on active state */
}

.switch-field label:first-of-type {
    border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
    border-radius: 0 4px 4px 0;
}

/* Styles for the search button inside the modal */
#modal_searchButton {
    display: block;      /* Ensures the button is a block element */
    width: 100px;        /* Specifies the width of the button */
    margin: 10px auto;   /* Centers the button horizontally and adds some vertical space */
    padding: 10px 0;     /* Adds padding to make the button taller */
    font-size: 1em;      /* Sets a reasonable font size */
    color: #fff;         /* Sets the text color to white */
    background-color: #007BFF; /* Sets the background color to a blue shade */
    border: none;        /* Removes the border */
    border-radius: 5px;  /* Adds rounded corners */
    cursor: pointer;     /* Changes the cursor to a pointer when hovering over the button */
    transition: background-color 0.3s ease; /* Smooth transition for background color change */
}

#modal_searchButton:hover {
    background-color: #0056b3; /* Darker blue on hover for better user interaction feedback */
}


.zoom-btn {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: calc(0.5rem + 0.3vw); /* Responsive font size */
    background-color: #007BFF;  /* Example primary button color */
    color: white;
    border: none;
    padding: 3px 5px;
    border-radius: 3px;
    cursor: pointer;
}

.zoom-btn[disabled] {
    background-color: #CCCCCC; /* Example disabled button color */
    color: #666666;
    cursor: not-allowed;
}

/* Ensure hover state has the same styling as the normal state */
.zoom-btn:not([disabled]):hover {
    background-color: #007BFF; /* Same as the normal state */
    color: white;
}

/* modals*/
.modal {
    position: absolute; /* Positions the modal within its parent context */
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%); /* Centers the modal */
    width: auto; 
    max-width: 350px; 
    background-color: #fefefe; /* Background of the modal */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
    z-index: 1000; /* Ensure it's above other content */
}

/*.modal-edit-tag {*/
/*    position: absolute; */
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%); */
/*    width: 50%; */
/*    height: 50%;*/
/*    background-color: #fefefe; */
/*    border-radius: 8px;*/
/*    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);*/
/*    z-index: 1000; */  
/*}*/

#editText_modal {
    display: none; /* Hide modal by default */
}

#editableDiv .word {
    display: inline-block;
    margin: 2px;
    color: black; /* Set the color of all words to black */
    text-decoration: none; /* Remove underline if you want the text to look like normal text */
}

#editableDiv {
    border: 1px solid #ccc;
    padding: 10px;
    min-height: 100px;
    width: 100%; 
    box-sizing: border-box;
}

.modal-edit-text{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 50%; /* Full width */
    height: 60%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */    
}

.modal-edit-tag {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 5;
    top: 5;
    width: 50%; /* Full width */
    height: 70%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-edit-locale {
    position: fixed; /* Position the modal relative to the viewport */
    top: 0;
    left: 0;
    width: 90vw; 
    height: 90vh;
    background-color: #fefefe; /* Background of the modal */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
    z-index: 1000; /* Ensure it's above other content */
    overflow: auto; /* Enable scrolling if the content is too tall */
}

.modal-content-locale {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 0px;
    border: 1px solid #888;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.modal-header-locale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    cursor: move; /* Indicates the element is movable */
	text-align: center; /* Centers text horizontally */
    background-color: #333; /* Light grey background */
    color: #fefefe; /* Dark text color */
    border-top-left-radius: 2px; /* Match the modal's border radius if it has any */
    border-top-right-radius: 2px;    
}

.modal-body-locale {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.form-section {
    flex: 1;
    padding: 10px;
}

/* Modal Content */
.form-group {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligns items to the start of the flex container */
    margin-bottom: 10px;
}

textarea {
    width: 100%; 
    padding: 10px;
    box-sizing: border-box;
    resize: vertical;
    overflow: auto;

}

.form-group-locale {
    margin-bottom: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: calc(0.7rem + 0.3vw); /* Responsive font size */
}

.form-group label {
    margin-right: 10px;
    white-space: nowrap;
    flex: 0 0 auto; /* Do not grow or shrink, based on content width */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: calc(0.5rem + 0.3vw); /* Responsive font size */
}

.form-group button {
    flex: 0 0 auto; /* Do not grow or shrink, based on content width */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: calc(0.5rem + 0.3vw); /* Responsive font size */
}

.form-group input {
    flex-grow: 1; /* Allows the input to grow and fill the available space */
    min-width: 200px; /* Ensures a minimum width for the input */
}

.modal-header {
    padding: 15px;
    cursor: move; /* Indicates the element is movable */
	text-align: center; /* Centers text horizontally */
    background-color: #333; /* Light grey background */
    color: #fefefe; /* Dark text color */
    border-top-left-radius: 2px; /* Match the modal's border radius if it has any */
    border-top-right-radius: 2px;
}

.modal-content {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: calc(0.5rem + 0.3vw); /* Responsive font size */
    padding: 0px;
    border: 1px solid #545353;
    background-color: #fefefe;
    color: #333;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius: 8px;
}


/* Input, Select, and Textarea Styles */
.modal-content input,
.modal-content select,
.modal-content textarea {
    width: 100%; /* Full width */
    padding: 5px; /* More space inside */
    margin: 0px 0; /* Space between elements */
    display: inline-block;
    border-radius: 4px; /* Rounded corners for inputs */
    box-sizing: border-box; /* Better box sizing */
}

.modal-content input {
    width: 100%; /* Ensures input width is responsive and fills the container */
    min-width: 300px; /* Ensures input has a minimum width, making it visually longer */
}

/* Focus Styles for Interactable Elements */
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
    outline: none;
    border: 2px solid #007bff; /* Highlight color */
}

.button-container {
    display: flex;
    justify-content: space-evenly; /* Even spacing between the buttons */
    padding: 10px; /* Padding around the buttons */
}

/* Button Styles */
.modal-content button {
    padding: 5px 10px; /* More padding for a larger click area */
    cursor: pointer; /* Cursor indication for clickable */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.modal-content button:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

/* Close Button Styles */
.close {
    position: absolute; /* Positions the button absolutely within its relative parent */
    top: 10px; /* Distance from the top edge of the modal */
    right: 10px; /* Distance from the right edge of the modal */
    display: inline-block; /* Ensures the element can have width and height */
    width: 24px; /* Size of the button */
    height: 24px; /* Size of the button */
    line-height: 24px; /* Centers the X vertically */
    text-align: center; /* Centers the X horizontally */
    color: #ffffff; /* Color of the X */
    background-color: #ff4545; /* Red background similar to Windows close button */
    border-radius: 50%; /* Makes the button circular */
    cursor: pointer; /* Cursor indication for clickable */
    font-size: 18px; /* Increases the font size for visibility */
    font-weight: bold; /* Makes the X bold */
    border: 2px solid #ffffff; /* Adds a white border to the button */
}

.close:hover, .close:focus {
    color: #ffffff; /* Keeps the X white */
    background-color: #d33; /* Darker shade of red for emphasis on interaction */
    text-decoration: none; /* Removes underline on hover/focus */
    border: 2px solid #ffdede; /* Lighter border color on hover/focus */
}


/*****************************/
/* Sliders and map legend */
/*****************************/
#draggable_vertical {
    cursor: col-resize;
    background: #666;
    width: 15px;
    height: 100%;
}

.tableTagDivider {
    height: 15px; /* Adjustable based on desired thickness */
    background-color: #666; /* Visible color */
    cursor: row-resize; /* Cursor indicates vertical resize */
    z-index: 1000; /* Ensure it's above other content */
}


/* Map Legend */
#legendDiv {
    max-width: 150px;
    margin-top: 5px;
    padding: 10px; /* Added padding for visual separation */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    background-color: #fff; /* Ensure the legend is legible by providing a background */
    border: 1px solid #ddd; /* Subtle border for definition */
    border-radius: 4px; /* Soften the edges */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: subtle shadow for depth */
}


/*****************************/
/* Text and Tag Tables Container on the right */
/*****************************/
.text_table_and_tag_wrapper {
    position: relative;
    width: 50%;
    font-family: "Gentium", "Cardo", "New Athena Unicode", "Noto Serif", Arial, sans-serif;
    font-size: calc(0.6rem + 0.3vw); /* Responsive font size */
    float: right;
    display: flex;
    flex-direction: column;
}

.tags_top_container {
    height: 50%;
    overflow: auto;
    font-family: "Gentium", "Cardo", "New Athena Unicode", "Noto Serif", Arial, sans-serif;
    font-size: calc(0.6rem + 0.3vw); /* Responsive font size */
    color: #d3d3d3; /* Maintains text color scheme */
}

.tags_bottom_container {
    overflow: auto;
    font-family: "Gentium", "Cardo", "New Athena Unicode", "Noto Serif", Arial, sans-serif;
    font-size: calc(0.8rem + 0.3vw); /* Responsive font size */
    color: #d3d3d3; /* Maintains text color scheme */
}

/* Ensures tables take up all available width in their respective containers */
.tags_text_container table, .tags_bottom_container table {
    width: 100%;
    font-family: "Gentium", "Cardo", "New Athena Unicode", "Noto Serif", Arial, sans-serif;
    font-size: calc(0.6rem + 0.3vw); /* Responsive font size */  
}

.index_intro_container h3 {
    text-align: center; /* Centers the title */
    margin-bottom: 3rem; /* Adds space equivalent to approximately two empty lines */
}

.tags_table {
    font-family: "Gentium", "Cardo", "New Athena Unicode", "Noto Serif", Arial, sans-serif;
    font-size: calc(0.8rem + 0.3vw); /* Responsive font size */  
}

.index_intro_table {
    width: 100%; /* Ensures the table uses the full container width */
}

.index_intro_table table {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    width: 90%;
    border: none; /* Ensures no border around the entire table */
}

.index_intro_table th, .index_intro_table td {
    text-align: left;
    padding: 8px;
    font-size: calc(0.3rem + 0.1vw);
    border-right: none; /* Ensures no vertical lines */
    border-bottom: none; /* Ensures no horizontal lines at cell level */
}

.index_intro_table tr {
    border-bottom: 1px solid #d3d3d3; /* Adds horizontal line between rows */
}

.index_intro_table tr:last-child {
    border-bottom: none; /* Removes the bottom line from the last row */
}

.index_intro_table th {
    background-color: #2b2b2b;
    color: #f3f3f3;
    font-size: calc(0.8rem + 0.1vw);
    text-align: center;
}

.index_intro_table td button {
    display: inline-block; /* Makes the button respect text-align of its parent */
    margin: 0 auto; /* Centers the button */
    text-align: center; /* Ensures text inside the button is centered */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
}

.index_intro_table td button:hover {
    background-color: #0056b3; /* Example hover background color */
    color: #ffffff; /* Example hover text color */
}

.index_intro_table td {
    text-align: center; /* Centers the content of the cell */
}

.books_table {
    width: 100%; /* Ensures the table uses the full container width */
}

.books_table table {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    width: 90%;
    border: none; /* Ensures no border around the entire table */
}

.books_table th, .books_table td {
    text-align: left;
    padding: 8px;
    font-size: calc(1rem + 0.1vw);
    border-right: none; /* Ensures no vertical lines */
    border-bottom: none; /* Ensures no horizontal lines at cell level */
}

.books_table tr {
    border-bottom: 1px solid #d3d3d3; /* Adds horizontal line between rows */
}

.books_table tr:last-child {
    border-bottom: none; /* Removes the bottom line from the last row */
}

.books_table th {
    background-color: #2b2b2b;
    color: #f3f3f3;
    font-size: calc(1rem + 0.1vw);
    text-align: center;
}

.books_table td {
    text-align: left; /* Centers the content of the cell */
}

.text_table_and_buttons_container{
    overflow: auto;
}

.book_text_container {
    overflow: auto;
    font-size: calc(0.7rem + 0.3vw);
    color: #f3f3f3;
    text-align: left; /* Centers the title */
    margin-bottom: 1rem; /* Adds space equivalent to approximately two empty lines */
}

/* Brevo Form Styles */
@font-face {
    font-display: block;
    font-family: Roboto;
    src: url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff");
}
@font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 600;
    src: url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff");
}
@font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 700;
    src: url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff");
}
#sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
}
#sib-container input::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
}
#sib-container textarea::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
}
#sib-container a {
    text-decoration: underline;
    color: #2BB2FC;
}



.sidebar_help {
    width: 20%;
    background-color: #3a3a3a;
    padding: 20px;
    border-right: 1px solid #ddd;
    height: 100vh;
    overflow-y: auto;
    font-size: calc(0.5rem + 0.3vw);
    font-family: "Gentium", "Cardo", "New Athena Unicode", "Noto Serif", Arial, sans-serif;
}

.sidebar_help a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: #007bff;
}

.sidebar_help a:hover {
    text-decoration: underline;
}

.submenu {
    margin-left: 20px; /* Indent the submenu */
}

.submenu a {
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: #007bff;
}

.submenu a:hover {
    text-decoration: underline;
}


.content_help {
    width: 80%;
    padding: 20px;
    height: 100vh;
    overflow-y: auto;
}


.chapter_help {
    display: none;
}

.chapter_help.active {
    display: block;
}

.content_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    align-items: start;
}


.content_wrapper_alt {
    display: flex;
    flex-direction: column; /* Stacks the image above the text */
    align-items: left;
}

.content_wrapper_alt .image_content img {
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Maintain the aspect ratio */
    margin-bottom: 10px; /* Space between image and text */
}

.content_wrapper_alt .text_content {
    width: 100%;
    text-align: left;
}


.text_content {
    display: flex;
    overflow: hidden;
    font-size: calc(0.6rem + 0.3vw);
    font-family: "Gentium", "Cardo", "New Athena Unicode", "Noto Serif", Arial, sans-serif;
}

.image_content {
    display: flex;
    justify-content: center;
    align-items: left;
}

.image_content img {
    max-width: 100%;
    height: auto;
    max-height: 80vh;
    width: auto;
}

/* Dropdown styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown_button {
    /*background-color: #1b1b1b; /* Adjust background color */
    color: #f3f3f3; /* Adjust text color */
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    font-size: calc(0.6rem + 0.3vw); /* Adjust button font size */
}

.dropdown_content {
    display: none;
    position: absolute;
    background-color: #3a3a3a; /* Adjust background color */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-size: calc(0.6rem + 0.3vw);
    font-family: "Gentium", "Cardo", "New Athena Unicode", "Noto Serif", Arial, sans-serif;
}

.dropdown_content a {
    color: #ffffff; /* Set text color to white */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown_content a:hover {
    background-color: #ddd;
    color: black; /* Change color on hover */
}

.dropdown:hover .dropdown_content {
    display: block;
}

.dropdown:hover .dropdown_button {
    background-color: #666;
    color: #eee;
}