@import url("../fonts/stylesheet.css");

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100vw; /* Ensures elements do not exceed viewport width */
}

:root {
    /* Borders */
    --border-color: #3f4a43;

    /* Main background: dark gray with forest-green undertone */
    --background-color: #18231B;

    /* Text */
    --text-color: #f1f5f1;

    /* Primary colors */
    --primary-color: #598946;       /* Forest green */
    --secondary-color: #9aa39b;
    --third-color: #456c32;         /* Deep accent green */
    --link-color: #8fc866;          /* Bright green accent */

    /* Navigation */
    --navbar-background-color: #2b342d; /* Gray-dark forest green */
    --navbar-text-color: #ffffff;

    /* Effects */
    --shadow-color: rgba(0, 0, 0, 0.40);
    --highlight-color: #334236;     /* Hover/card background */
}



a {
    color: var(--link-color);
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

img {
	object-fit: cover;
}

html, body {
    overflow-x: hidden; /* Prevents horizontal scrolling */
    width: 100%; /* Ensures the body does not exceed viewport width */
}

/* Base styles */
body {
    font-family: 'Prompt', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    position: relative;
	letter-spacing: .1rem;
}










/* Base hidden state */
.popup-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1004;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
}

/* When show class is added, enable flex */
.popup-container.show {
    display: flex;
}

/* Content box */
.popup-content {
    background-color: var(--navbar-background-color);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Title */
.popup-content h4 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--navbar-text-color);
}

/* App buttons */
.popup-content .app-button {
    display: inline-block;
    margin: 10px 5px;
    padding: 12px 20px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.popup-content .app-button:hover {
    background-color: #476c32; /* Adjusted to match green tone */
}

/* Close X button */
.popup-content .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #888;
}

/* App Icon */
.popup-content .app-icon {
    width: 60px;
    height: 60px;
    margin: 20px 0;
}

/* Description text */
.popup-content p {
    color: var(--navbar-text-color);
    font-size: .8rem;
}

/* Flex container for app icons */
.app-buttons {
    display: flex;
    justify-content: space-evenly;
    margin-top: 15px;
}

.app-buttons img {
    width: 120px;
}


/* Sidebar styles */
.sidebar {
    background-color: var(--navbar-background-color);
    color: var(--navbar-text-color);
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1003;
    transition: transform 0.3s ease-in-out;
	/*border-right: 1px solid #ccc;
    /*box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3); /* Add shadow to sidebar */
	overflow-y: auto; /* Enable vertical scrolling */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #555 #e0e0e0; /* Scrollbar thumb and track color for Firefox */
}

/* Custom Scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.sidebar::-webkit-scrollbar {
    width: 18px; /* Set the width of the scrollbar */
}

.sidebar::-webkit-scrollbar-track {
    background: #e0e0e0; /* Track color */
    border-radius: 10px; /* Rounded corners for the track */
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #555; /* Thumb color */
    border-radius: 10px; /* Rounded corners for the thumb */
    border: 2px solid #e0e0e0; /* Adds padding around thumb */
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #333; /* Darker thumb color on hover */
}

/* Firefox scrollbar */
.sidebar {
    scrollbar-width: thin;
    scrollbar-color: #555 #e0e0e0; /* Thumb and track color */
}

/* Optional: Auto-Hide Scrollbar when not hovering (can be omitted if not desired) */
.sidebar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.sidebar::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, and Opera */
}

.sidebar:hover {
    /*scrollbar-width: thin;*/
}

.sidebar:hover::-webkit-scrollbar {
    display: block; /* Show the scrollbar when hovering */
}

/* Placeholder Shimmer Effect */
.menu-placeholder {
    display: flex;
    flex-direction: column;
    gap: 10px;
	margin-top: 15px;
}

.menu-item-placeholder {
    height: 1.3rem;
	margin: 15px 0;
    background: linear-gradient(
        90deg,
        var(--border-color) 25%, 
        var(--navbar-background-color) 50%, 
        var(--border-color) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
}

/* Shimmer Effect */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.sidebar ul li {
    margin: 15px 0;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.sidebar ul li:hover {
    background-color: var(--primary-color);
}

.sidebar ul li i.material-icons {
    font-size: 24px;
    margin-right: 10px;
    color: var(--text-color);
}

.sidebar ul li a {
    color: var(--navbar-text-color);
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease;
}

.sidebar ul li:hover a, .sidebar ul li:hover i {
    color: #fff;
}

/* Styles for disabled li */
.sidebar ul li[disabled],
.sidebar ul li.disabled {
    pointer-events: none;
    color: var(--border-color);
    cursor: not-allowed;
}

.sidebar ul li[disabled] i.material-icons,
.sidebar ul li.disabled i.material-icons {
    color: var(--border-color);
}

.sidebar ul li[disabled] a,
.sidebar ul li.disabled a {
    color: var(--border-color);
    text-decoration: none;
}


.sidebar ul .account {
	padding: 10px;
}

.sidebar ul .account img {
	height:64px;
	width:64px;
	border-radius: 50%;
}

.sidebar ul .account .name {
    color: var(--text-color);
}

.sidebar ul .account .email {
    font-size:.6rem;
	color: #999;
}

/* Hide sidebar when toggled */
.sidebar.hidden {
    transform: translateX(-250px);
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: 1002;
    transition: opacity 0.3s ease-in-out;
}

/* Show the sidebar */
.sidebar.active {
    transform: translateX(250px);
    left: 0;
}

/* Show the overlay */
.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Navbar styles */
.navbar {
    background-color: var(--background-color); /*var(--navbar-background-color);*/
    color: var(--navbar-text-color);
    height: 60px;
    position: fixed;
    top: 0;
    left: 250px; /* Account for sidebar */
    right: 0;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 500;
    transition: left 0.3s ease-in-out;
}

.navbar .nav-links a {
    color: var(--navbar-text-color);
    padding: 10px 15px;
    text-decoration: none;
}

.navbar .nav-links a:hover {
    /*background-color: var(--primary-color);*/
    color: var(--link-color);
	/*font-weight: bold;*/
}

.navbar .nav-links button.circle {
	height:45px;
	width:45px;
    border-radius: 50%;
}

/* Hamburger button */
#hamburger {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--navbar-text-color);
    cursor: pointer;
    display: none; /* Hidden by default on larger screens */
}

/* Adjust navbar position when sidebar is hidden */
.navbar.shifted {
    left: 0;
}

/* Content area */
.content {
    margin-top: 40px;
    margin-left: 250px; /* Account for sidebar */
    padding: 20px;
    flex-grow: 1;
    transition: margin-left 0.3s ease-in-out;


}

/* Adjust content margin when sidebar is hidden */
.content.shifted {
    margin-left: 0;
}

/* Toggle button styles */
.toggle-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--navbar-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.toggle-btn:hover {
	color: #fff;
}

/* Responsive design */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%); /* Hide sidebar by default on small screens */
    }

    .sidebar.active {
        transform: translateX(0); /* Show sidebar when active */
    }

    .navbar {
        left: 0;
        width: 100%; /* Navbar takes full width when sidebar is hidden */
    }

    #hamburger {
        display: block; /* Show hamburger button on small screens */
    }

    .content {
        margin-left: 0;
        padding: 0;
    }

	/* Hide the sidebar toggle button on small screens */
    #sidebarToggle {
        display: none;
    }
}



/* Buttons */
button {
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px; /*10px 20px;*/
    border: none;
    border-radius: 10px;
    cursor: pointer;
	letter-spacing: .1rem;
}

button:hover {
    background-color: var(--secondary-color);
}

/* Grid system */
.container {
	overflow-x: hidden;
    width: 100%; /* Ensure full width */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px; /* Apply padding uniformly */
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.col {
    padding-left: 15px;
    padding-right: 15px;
    flex: 1 1 auto; /* Allow columns to shrink and grow */
    min-width: 0; /* Prevent columns from shrinking too small */
}

.col-1 { flex: 0 0 8.33%; }
.col-2 { flex: 0 0 16.66%; }
.col-3 { flex: 0 0 25%; }
.col-4 { flex: 0 0 33.33%; }
.col-5 { flex: 0 0 41.66%; }
.col-6 { flex: 0 0 50%; }
.col-7 { flex: 0 0 58.33%; }
.col-8 { flex: 0 0 66.66%; }
.col-9 { flex: 0 0 75%; }
.col-10 { flex: 0 0 83.33%; }
.col-11 { flex: 0 0 91.66%; }
.col-12 { flex: 0 0 100%; }

/* Responsive Grid */
@media (max-width: 768px) {
    .col {
        flex: 0 0 100%;
        max-width: 100%; /* Ensure columns take full width */
    }

    .navbar a {
        float: none;
        width: 100%;
    }
}


.btn {
	cursor:pointer;
	color:#fff;
	font-size:.8rem;
	border-radius: 20px;
	padding: 8px 24px 8px 24px;
	/*box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 2px 6px 0 rgba(0, 0, 0, 0.12);*/
	position:relative;
	background-color: var(--primary-color);
}

.btn:hover {
    background-color: var(--secondary-color);
	text-decoration: none;
}

/* Base table styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 18px;
    text-align: left;
    /*background-color: #f9f9f9;*/
}

/* Table header styling */
table th, table td {
    padding: 12px 15px;
}

/* Table row border */
table tr {
    /*border-bottom: 1px solid var(--border-color); /* Use variable for border color */
}

/* Table header styling */
table th {
    /*background-color: var(--primary-color);*/
    color: var(--text-color); /*white;*/
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

table tbody tr {
    font-size: 14px;
}

/* Table row hover effect */
table tbody tr:hover {
    background-color: var(--navbar-background-color); /*#f1f1f1;*/
}

/* First column bold */
table td:first-child {
    /*font-weight: bold;*/
}

table td a {
	color: var(--text-color);
}

table td a:hover {
	text-decoration: none;
}



/* Apply border-radius to the first and last cells of each row */
tbody tr.radius:first-child td:first-child {
    border-top-left-radius: 16px;
}

tbody tr.radius:first-child td:last-child {
    border-top-right-radius: 16px;
}

tbody tr.radius:last-child td:first-child {
    border-bottom-left-radius: 16px;
}

tbody tr.radius:last-child td:last-child {
    border-bottom-right-radius: 16px;
}

/* Optional: Add padding for spacing around cells */
tbody tr.radius td {
    /*padding: 10px;
    /*border: 1px solid #ddd; /* Example border for visual clarity */
}

/* Optional: Add shadow for a nice effect */
tbody tr.radius {
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Smooth shadow effect */
}


/* Apply border-radius to the first and last td of each tr */
tbody tr.radius-td td {
    border-radius: 16px;
    /*padding: 10px; /* Optional padding for better spacing */
    /*border: 1px solid #ddd; /* Optional border for clarity */
}

/* Additional styling to make it look nice */
tbody tr.radius td:first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

tbody tr.radius td:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}


tbody tr td i, tbody tr td a i {
	position:relative;
	top:3px;
}




/* Zebra striping for table rows */
/*table tr:nth-child(even) {
    background-color: #f2f2f2;
}*/

/* Responsive table styling */
/*@media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block;
        width: 100%;
    }

    table tr {
		border-bottom: 1px solid var(--border-color);
    }

    table th, table td {
        padding: 10px;
        text-align: left;
        position: relative;
    }

    table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 15px;
        font-weight: bold;
        text-align: left;
    }

    table th {
        text-align: left;
        padding-left: 15px;
    }
} */


.hide-on-large-only {
    display: none !important;
}

@media only screen and (max-width: 600px) {
  .hide-on-small-only {
    display: none !important;
  }

  .hide-on-large-only {
    display: unset !important;
  }
}





/*select month date*/
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
	top: 2px;
    margin-right: 10px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(16px);
}

#switch-label {
    font-family: 'Prompt', sans-serif;
    font-size: 12px;
	position: relative;
	top: 2px;
	letter-spacing: .2rem;
    color: var(--text-color);
}

.select-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px;
}

.select-group {
    position: relative;
}

.custom-select {
	width: 100%;
	font-size: 16px;
	font-family: 'Prompt', sans-serif;
	letter-spacing: .1rem;
    padding: 10px 15px;
    border: 2px solid var(--navbar-background-color); /*#007bff;*/
    border-radius: 10px;
    background-color: var(--background-color); /*#fff;*/
    color: var(--text-color); /*#333;*/
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-select:hover {
    border-color: var(--primary-color);
}

.custom-select:disabled {
	color: var(--navbar-background-color);
	border: 2px solid var(--navbar-background-color);
	cursor: default;
}

.custom-btn {
    padding: 13px 20px; /*15px 20px*/
    background-color: var(--primary-color);
    color: #fff;
	font-size: 16px;
    border: none;
    border-radius: 10px 16px 16px 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.custom-btn:hover {
    background-color: var(--primary-color);
}










/* Container for custom select box */
.custom-select-container {
    margin: 20px 0;
    width: 100%;
    max-width: 400px;
    position: relative;
}

/* Label Styling */
.custom-select-container label.title {
    display: block;
    margin-bottom: 8px;
    font-size: .8rem;
    /*font-weight: bold;*/
    color: var(--text-color); /*#333;*/
}

/* Custom select box */
.custom-single-select {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid var(--navbar-background-color); /*#007bff;*/
    border-radius: 10px;
    background-color: var(--background-color); /*#fff;*/
    color: var(--text-color); /*#333;*/
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-single-select:hover {
    border-color: var(--primary-color);
}

.custom-single-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.select-placeholder {
    pointer-events: none;
}

.select-arrow {
    pointer-events: none;
}

/* Dropdown options */
.select-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    background-color: var(--background-color); /*#fff;*/
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.select-options .select-option {
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.select-options .select-option:hover {
	color: var(--text-color);
    background-color: var(--navbar-background-color); /*#f1f1f1;*/
}

/* Disabled option */
.select-options .select-option[data-disabled="true"] {
	color: var(--navbar-background-color); /* Disabled color *//*color: #6c757d;*/
    cursor: not-allowed;
	pointer-events: none; /* Prevent interaction */
}

.custom-select-container.disabled, .custom-select-container.disabled label.title, .custom-select-container.disabled .select-placeholder,
.custom-multi-select-container.disabled, .custom-multi-select-container.disabled label.title, .custom-multi-select-container.disabled .select-placeholder {
	color: var(--navbar-background-color);
	cursor: not-allowed;
	pointer-events: none; /* Prevent interaction */
}

/* Show the dropdown */
.select-options.show {
    display: block;
}

/* Highlight the selected option */
.select-option.selected {
    background-color: var(--primary-color); /* Highlight background color */
    color: white; /* Highlight text color */
}

/* Add some padding and margin to the search input */
.custom-select-search {
    width: 90%;
    padding: 8px 12px;
    margin: 10px;
    border: 2px solid var(--navbar-background-color);
    border-radius: 8px;
    font-size: 14px;
    display: block;
    background-color: var(--background-color);
	color: var(--text-color);
}

/* Hide the dropdown container when no options are available */
.select-options.hide {
    display: none;
}

/* Highlight the selected option */
.select-option.selected {
    background-color: var(--primary-color);
    color: white;
}

.select-option {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


/* Container for custom select box */
.custom-multi-select-container {
    margin: 20px 0;
    width: 100%;
    max-width: 400px;
    position: relative;
}

/* Label Styling */
.custom-multi-select-container label.title {
    display: block;
    margin-bottom: 8px;
	font-size: .8rem;
    /*font-weight: bold;*/
    color: var(--text-color); /*#333;*/
}

/* Custom select box */
.custom-multi-select {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid var(--navbar-background-color); /*#007bff;*/
    border-radius: 10px;
    background-color: var(--background-color); /*#fff;*/
    color: var(--text-color); /*#333;*/
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-multi-select:hover {
    border-color: var(--primary-color);
}

.custom-multi-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.select-placeholder {
    pointer-events: none;
}

.select-arrow {
    pointer-events: none;
}

/* Group title styling */
.group-title, .sub-group-title {
    /*font-weight: bold;*/
    font-size: 0.8rem;
	color: var(--secondary-color);
	background: var(--navbar-background-color);
	border-radius: 10px;
    padding: 10px;
}

.group-title {
    margin: 10px;
}

.sub-group-title {
    margin: 10px 10px 10px 30px;
}

.select-options label.sub-options, .select-options label.sub-sub-options {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.select-options label.sub-options {
	padding: 10px 10px 10px 30px;
}
.select-options label.sub-sub-options {
    padding: 10px 10px 10px 60px;
}

/* Option styles */
.select-options label {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}

.select-options label:hover {
    background-color: var(--navbar-background-color); /*#f1f1f1;*/
}

.select-options input[type="checkbox"] {
    margin-right: 10px;
}

/* Disabled option */
.select-options input[type="checkbox"]:disabled + label {
    color: #6c757d;
    cursor: not-allowed;
}

/* Show the dropdown */
.select-options.show {
    display: block;
}


/*select-options scrollbar*/
.select-options {
    overflow-y: auto;
    scrollbar-width: none; /* For Firefox: hides the scrollbar */
    -ms-overflow-style: none; /* Hides scrollbar for IE and Edge */
    padding-right: 10px; /* Prevents content cut-off when a scrollbar appears */
}

/* For Webkit browsers (Chrome, Safari) */
.select-options::-webkit-scrollbar {
    width: 0; /* Completely hide the scrollbar */
}

/* Optional: Smooth scrolling for touch devices */
.select-options {
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */
}

/* Optional: Custom scrollbar for modern browsers when you want a minimal visible scrollbar */
.select-options:hover {
    scrollbar-width: thin; /* Thin scrollbar for Firefox */
    scrollbar-color: var(--border-color) transparent; /* Firefox scrollbar color */
}

.select-options::-webkit-scrollbar {
    width: 8px; /* Show thin scrollbar when hovering */
}

.select-options::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* Minimal thumb for Chrome/Safari */
    border-radius: 4px; /* Rounded scrollbar */
    transition: background-color 0.3s ease;
}

.select-options::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4); /* Slightly darker thumb on hover */
}

.select-options::-webkit-scrollbar-track {
    background-color: transparent; /* Transparent scrollbar track */
}




/* Container for the search bar */
.search-container {
    width: 100%;
    max-width: 360px;
    margin: 50px auto;
    display: flex;
    align-items: center;
    border: 2px solid var(--navbar-background-color); /*#f1f1f1;*/
    border-radius: 10px;
    overflow: hidden;
}

/* Search input styling */
.search-input {
    flex: 1;
	font-family: 'Prompt', sans-serif;
	letter-spacing: .1rem;
    padding: 10px 15px;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--text-color);
	background-color: transparent;
}

/* Search button styling */
.search-button {
    background-color: var(--primary-color);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

button.search-button {
	/*height:48px;
	width:48px;
    border-radius: 50%;*/
	border-radius: 0 10px 10px 0;
}

.search-button:hover {
    background-color: #00796b;
}

/* Icon styling */
.search-button i.material-icons {
    font-size: 24px;
}

/* Responsive design */
@media (max-width: 768px) {
    .search-container {
        width: 100%;
    }
}


.container-border-right {
	border-right: 2px solid var(--navbar-background-color);
}

@media only screen and (max-width: 600px) {
	.container-border-right {
		border-right: none;
	}
}


.pagination {
  text-align: center;
}

.pagination li {
  display: inline-block;
  font-size: 1rem;
  padding: 0 10px;
  line-height: 30px;
  margin: 0 .3rem;
  border-radius: 10px;
  text-align: center;
}
/*editing start*/
.pagination li {
  color: var(--secondary-color);
}

.pagination li:hover {
  background-color: var(--navbar-background-color);
}

.pagination li.active {
  color: #fff;
}
/*editing end*/
.pagination li a {
  color: var(--secondary-color);
}

.pagination li a:hover {
	text-decoration: none;
}

.pagination li.active a {
  color: #fff;
}

.pagination li.active {
  /*background-color: transparent;
  border: 1px solid #e0e0e0;*//*editing*/
  background-color: var(--primary-color);
}

.pagination li.disabled a {
  cursor: default;
  color: var(--navbar-background-color);
}

.pagination li i {
  font-size: 2.2rem;
  vertical-align: middle;
}

.pagination li.pages ul li {
  display: inline-block;
  float: none;
}

@media only screen and (max-width: 992px) {
  .pagination {
    width: 100%;
  }
  .pagination li.prev,
  .pagination li.next {
    width: 10%;
  }
  .pagination li.pages {
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
  }
}

/* Popup Container */
.progress-popup {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 80px;
    height: 80px;
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    /*background: rgba(0, 0, 0, 0.5);*/
    border-radius: 50%;
    z-index: 1100;
    transition: transform 0.5s ease-in-out;
}

/* Circular Progress Bar */
.circular-progress {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(var(--primary-color) 0% 0%, #e0e0e0 0% 100%);
    position: relative;
}

/* Remove text */
.progress-value {
    display: none;
}


/* Tooltip container */
.tooltip {
    position: relative;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    max-width: 90vw; /* Ensure it doesn’t overflow too much */
    background-color: #424242;
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 120%; /* Position above the tooltip container */
    left: 50%;
    transform: translateX(-50%);
    word-wrap: break-word; /* Ensure text wraps within the tooltip */
    white-space: normal; /* Allow text to wrap to the next line */
    overflow-wrap: break-word;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #424242 transparent transparent transparent;
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


.switch,
.switch * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
}

.switch label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.switch label input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch label input[type=checkbox]:checked + .lever {
  background-color: var(--primary-color) /*#4CAF50; /* Modern green color for checked state */
}

.switch label input[type=checkbox]:checked + .lever:after {
  background-color: #ffffff; /* White circle */
  left: 19px; /*22px; /* Align with the switch width */
}

.switch label .lever { 
  position: relative;
  display: inline-block;
  width: 40px; /* Slightly longer for a modern look */
  height: 24px; /* Thinner height */
  background-color: #cccccc; /* Light gray background */
  border-radius: 22px; /* Rounded to match the height */
  margin-right: 10px;
  transition: background 0.3s ease;
  vertical-align: middle;
}

.switch label .lever:after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: #ffffff; /* White for the toggle */
  border-radius: 50%; /* Fully rounded */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  left: 3px;
  top: 3px;
  transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
}

input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after,
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever:after {
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.6); /* Modern glowing effect */
}

input[type=checkbox]:not(:disabled) ~ .lever:active:after,
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever:after {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Subtle shadow on focus */
}

.switch input[type=checkbox][disabled] + .lever {
  cursor: default;
  opacity: 0.6;
}

.switch label input[type=checkbox][disabled] + .lever:after,
.switch label input[type=checkbox][disabled]:checked + .lever:after {
  background-color: #e0e0e0; /* Gray background for disabled state */
}



/* Segmented control */
.segmented-control-container {
  position: relative;
  width: 100%;
}

.segment { position: relative; } /* Ensure badge positions correctly */

.segmented-control-wrapper {
  position: relative;
  width: 100%;
  overflow-y: auto;
    scrollbar-width: none; /* For Firefox: hides the scrollbar */
    -ms-overflow-style: none; /* Hides scrollbar for IE and Edge */
  padding-top: 15px; /* Add space for badges */
  scroll-behavior: smooth;
}

.segmented-control {
  display: block;
  justify-content: space-between;
  border-radius: 20px;
  background-color: transparent;/*var(--navbar-background-color);*/
  max-width: none;
  margin-bottom: 10px;
  white-space: nowrap;
  position: sticky;
  width: max-content; /* Adjust width to accommodate all child elements */
  top: 0;
  z-index: 1;
  padding: 0;
  scroll-behavior: smooth;
  overflow-x: visible; /* Change overflow to visible to show badges */
  /*overflow-x: auto; /* Enable horizontal scrolling */
}

.segmented-control::-webkit-scrollbar {
  display: none; /* Hide scrollbar */
}


.segmented-control .segment {
  position: relative;
  flex: 1;
  font-family: 'Prompt', sans-serif;
  color: #666;
  background-color: var(--navbar-background-color);/*transparent;*/
  border: none;
  outline: none;
  cursor: pointer;
  font-size: .8rem;
  padding: 6px 24px;
  text-align: center;
  transition: background-color 0.3s, color 0.3s;
  white-space: nowrap;
  border-radius: 20px;
}

.segmented-control .segment.active {
  background-color: var(--primary-color);
  color: #fff;
}

.segmented-control .segment:hover:not(.active) {
  /*background-color: transparent;*/
  color: var(--text-color);
}

.segment.disabled {
    background-color: transparent;/*#ccc;*/
    color: var(--text-color);
    cursor: not-allowed;
}
.segment.disabled:hover {
    background-color: transparent;/*#ccc; /* Prevent hover effect */
    color: #999;
}

/* Badge styling with full circle and shadow */
.badge {
  position: absolute;
  top: -12px;/*4px; /* Adjust for proper positioning */
  right: -8px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 3px 8px;
  font-size: 0.75rem;
  /*font-weight: bold;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);*/
  z-index: 1001;
}


.nav-buttons {

    /*background-color: rgba(0, 0, 0, 0.5);*/
    background-color: var(--text-color);
	color: var(--background-color);
    padding: 10px 17px;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border-radius: 50%;
    font-size: 18px;
	transition: background-color 0.3s;
	display: none; /* Initially hidden */
}




.nav-buttons.left {
  left: 0;
}

.nav-buttons.right {
  right: 0;
}

.nav-buttons:hover {
  background-color: var(--primary-color);
  color: white;
}



.page-container {
  flex: 1;
  overflow-y: auto;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

.page {
  display: none;
  background-color: transparent;
  padding: 20px 0 0 0;
  border: none;
  border-radius: 8px;
}

.page.active-page {
  display: block;
}

@media (max-width: 600px) {
.segmented-control {
	max-width: 400px;
  }
}





/* Checkbox container */
.checkbox-container-checkmark {
    display: inline-block;
    position: relative;
    cursor: pointer;
    user-select: none;
    font-size: 16px;
}

/* Hide default checkbox */
.checkbox-container-checkmark input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Custom checkmark */
.checkbox-container-checkmark .checkmark {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    margin-right: 8px;
    transition: all 0.3s ease;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);*/
}

.checkbox-container-checkmark .checkmark:after {
    content: '';
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

/* Checked state */
.checkbox-container-checkmark input:checked + .checkmark {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox-container-checkmark input:disabled + .checkmark {
    background-color: var(--border-color);
    border: 2px solid var(--border-color);
}

.checkbox-container-checkmark input:checked + .checkmark:after {
    display: block;
}





/* Base styling for hiding the checkbox */
input[type="checkbox"].checkbox-custom {
    opacity: 0;
    position: absolute;
  }
  
  /* Custom checkbox styling for each type */
  .checkbox-custom-label:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    margin-right: 8px;
    vertical-align: middle;
    transition: background-color 0.3s ease;
  }
  
  /* When checkbox is checked, change background and border colors */
  input[type="checkbox"].checkbox-custom:checked + .checkbox-custom-label:before {
    background-color: #1e88e5;
    border-color: #1e88e5;
  }
  

  
  /* Add a tick or custom checkmark for checked items */
  input[type="checkbox"].checkbox-custom:checked + .checkbox-custom-label:before {
    /*content: "✔";*/
    color: white;
    text-align: center;
    line-height: 18px;
  }

  .checkbox-custom:checked + .checkbox-custom-label:before {
    background: #1E88E5;
	border: 2px solid #1E88E5;
    box-shadow: inset 0px 0px 0px 0px #fff;
}
  
  
input[type="checkbox"].checkbox-custom-hotspotS_NPP_Gistda:checked + .checkbox-custom-label-hotspotS_NPP_Gistda:before {
	border-radius: 50%;
    background: #C62828;
	border: 2px solid #C62828;
    box-shadow: inset 0px 0px 0px 0px #fff;
	-webkit-transform: scale(0.5);
          transform: scale(0.5);
}
input[type="checkbox"].checkbox-custom-hotspotS_NPP_NASA:checked + .checkbox-custom-label-hotspotS_NPP_NASA:before {
	border-radius: 50%;
    background: #AD1457;
	border: 2px solid #AD1457;
    box-shadow: inset 0px 0px 0px 0px #fff;
	-webkit-transform: scale(0.5);
          transform: scale(0.5);
}
input[type="checkbox"].checkbox-custom-hotspotNOAA_NASA:checked + .checkbox-custom-label-hotspotNOAA_NASA:before {
	border-radius: 50%;
    background: #6A1B9A;
	border: 2px solid #6A1B9A;
    box-shadow: inset 0px 0px 0px 0px #fff;
	-webkit-transform: scale(0.5);
          transform: scale(0.5);
}
input[type="checkbox"].checkbox-custom-hotspotMODIS_NASA:checked + .checkbox-custom-label-hotspotMODIS_NASA:before {
	border-radius: 50%;
    background: #4527A0;
	border: 2px solid #4527A0;
    box-shadow: inset 0px 0px 0px 0px #fff;
	-webkit-transform: scale(0.5);
          transform: scale(0.5);
}

input[type="checkbox"].checkbox-custom-clusterS_NPP_NASA:checked + .checkbox-custom-label-clusterS_NPP_NASA:before {
	background: transparent;
	border: 2px solid #AD1457;
    box-shadow: inset 0px 0px 0px 0px #fff;
}
input[type="checkbox"].checkbox-custom-clusterNOAA_NASA:checked + .checkbox-custom-label-clusterNOAA_NASA:before {
	background: transparent;
	border: 2px solid #6A1B9A;
    box-shadow: inset 0px 0px 0px 0px #fff;
}

input[type="checkbox"].checkbox-custom-spreadS_NPP_NOAA_NASA1:checked + .checkbox-custom-label-spreadS_NPP_NOAA_NASA1:before {
	background: transparent;
	border: 2px dashed #80DEEA;
    box-shadow: inset 0px 0px 0px 0px #fff;
}

input[type="checkbox"].checkbox-custom-rain:checked + .checkbox-custom-label-rain:before {
    content: "✔";
    color: white;
    text-align: center;
    line-height: 18px;
}


input[type="checkbox"].checkbox-custom-NRF:checked + .checkbox-custom-label-NRF:before {
    background:#ec407a;
	border: 2px solid #ec407a;
    box-shadow: inset 0px 0px 0px 0px #fff;
}
input[type="checkbox"].checkbox-custom-DNP:checked + .checkbox-custom-label-DNP:before {
    background: #8a2be2;
	border: 2px solid #8a2be2;
    box-shadow: inset 0px 0px 0px 0px #fff;
}
input[type="checkbox"].checkbox-custom-FIRESTATION:checked + .checkbox-custom-label-FIRESTATION:before {
    background:#b40f3b;
	border: 2px solid #b40f3b;
    box-shadow: inset 0px 0px 0px 0px #fff;
}
input[type="checkbox"].checkbox-custom-FORESTTYPES61:checked + .checkbox-custom-label-FORESTTYPES61:before {
    background:#4caf50;
	border: 2px solid #4caf50;
    box-shadow: inset 0px 0px 0px 0px #fff;
}
input[type="checkbox"].checkbox-custom-CONTROLAREA:checked + .checkbox-custom-label-CONTROLAREA:before {
    background:transparent;
	border: 2px solid #fbc02d;
    box-shadow: inset 0px 0px 0px 0px #fff;
}

input[type="checkbox"].checkbox-custom-PROVINCE:checked + .checkbox-custom-label-PROVINCE:before {
    background: transparent;
	border: 2px solid #263238;
    box-shadow: inset 0px 0px 0px 0px #fff;
}
input[type="checkbox"].checkbox-custom-AMPHOE:checked + .checkbox-custom-label-AMPHOE:before {
    background: transparent;
	border: 2px solid #37474F;
    box-shadow: inset 0px 0px 0px 0px #fff;
}
input[type="checkbox"].checkbox-custom-TAMBON:checked + .checkbox-custom-label-TAMBON:before {
    background: transparent;
	border: 2px solid #455A64;
    box-shadow: inset 0px 0px 0px 0px #fff;
}






  /* Styling for labels */
  .checkbox-custom-label {
    font-size: 0.8rem;
    color: var(--text-color);
    letter-spacing: 1px;
    cursor: pointer;
    display: inline-block;
  }
  
  .layer-controls {
    width: 100%;
  }
  
  .collection {
    list-style: none;
    padding: 15px 0;
    margin: 0;
  }
  
  .collection-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    /*border-bottom: 2px solid var(--navbar-background-color);*/
    align-items: center;
  }


.item-container {
    display: flex;
    align-items: center;
    width: 100%;
}




#headerContainer {
    position: sticky;
    top: 0;
    /*background: #1f1f1f;*/
    z-index: 10;
    transition: all 0.3s ease;
}

#headerContainer.shrink .image-container img {
    width: 40px !important;
    height: 40px !important;
}

#headerContainer.shrink .additional-info {
    display: none;
}

/*.image-container {
    position: relative;
    display: inline-block;
	width: 100px;
	padding: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}*/

.image-container img {
	width: 80px;
    height: 80px;
    border-radius: 50%;
	/*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    object-fit: cover;
	transition: width 0.3s ease, height 0.3s ease; /*transition: transform 0.3s, background-color 0.3s;*/
}

.image-container img:hover {
    transform: scale(1.05);
    /*box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);*/
}

/* Popup styling */
.image-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1004;
    justify-content: center;
    align-items: center;
}

.popup-image {
    max-width: 90%;
    max-height: 90%;
    border-radius: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-in-out;
}

.popup-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    z-index: 1001;
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


.profile-label {
    display: block;
    cursor: pointer;
}

.edit-icon {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s;
}

.edit-icon i {
    font-size: 18px;
}

.edit-icon:hover {
    transform: scale(1.1);
    background-color: var(--primary-color);
}

.content-container {
    flex: 1;
    padding-left: 20px; /* Space between image and text */
}

.content-container h4 {
    margin: 0 0 5px;
    font-size: 1.2rem;
    color: var(--text-color);
}

.content-container p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-color);
	letter-spacing: .2rem;
}

.additional-info {
    font-size: 0.8rem;
    color: var(--secondary-color);
}



.detail-section {
    text-align: left;
}

.date-section {
    text-align: right;
}

/* Responsive styling for small screens */
@media (max-width: 768px) {
    .date-section {
        text-align: left; /* Change text alignment for small screens */
    }
}

  
  .layer-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  
  .layer-left {
    flex: 1; /* Take up the first column width */
    display: flex;
    align-items: center;
  }
  
  .layer-left input {
    margin-right: 10px;
  }
  
  .layer-right {
    flex: 0 0 150px; /* Set fixed width for the opacity slider column */
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  .opacity-slider {
    width: 70px;
    margin-left: 10px;
  }
  
  /* Additional responsive styling for smaller screens */
  @media (max-width: 600px) {
    .collection-item {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .layer-right {
      width: 100%;
      justify-content: flex-start;
      margin-top: 5px;
    }
  }
  
  .switch-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }
  
  .switch-label-left, .switch-label-right {
    font-size: 0.8rem;
    padding: 0 10px;
  }
  
  .switch-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
  }
  
  .switch {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  

  .slider-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  input[type="range"].slider {
    -webkit-appearance: none; /* Remove default slider appearance */
    width: 80%; /* Adjust slider width */
    height: 4px; /* Slider track height */
    background: var(--border-color); /* Neutral background for track */
    outline: none; /* Remove focus outline */
    border-radius: 8px; /* Round corners of the slider track */
    position: relative;
  }
  
  /* Slider thumb for WebKit browsers (Chrome, Safari) */
  input[type="range"].slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Remove default thumb appearance */
    appearance: none;
    width: 16px; /* Thumb width */
    height: 16px; /* Thumb height */
    background: var(--primary-color); /* Flat blue color for the thumb */
    border-radius: 50%; /* Round thumb */
    cursor: pointer; /* Pointer on hover */
    transition: background 0.3s ease, box-shadow 0.2s ease; /* Smooth transition */
    margin-top: -6px; /* Center the thumb vertically (half the height of the thumb) */
  }
  
  /* Slider thumb for Firefox (Moz) */
  input[type="range"].slider::-moz-range-thumb {
    width: 16px; 
    height: 16px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.2s ease;
    margin-top: -4px; /* Center the thumb vertically (half the height of the thumb) */
  }
  
  /* Hover effect for slider thumb */
  input[type="range"].slider:hover::-webkit-slider-thumb,
  input[type="range"].slider:hover::-moz-range-thumb {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Shadow on hover */
  }
  
  /* Slider track for WebKit browsers (Chrome, Safari) */
  input[type="range"].slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: var(--border-color);
    border-radius: 50%;
  }
  
  /* Slider track for Firefox (Moz) */
  input[type="range"].slider::-moz-range-track {
    width: 100%;
    height: 4px;
    background: var(--border-color);
    border-radius: 50%;
  }
  
  /* Focus effect for slider thumb */
  input[type="range"].slider:focus::-webkit-slider-thumb {
    background: var(--primary-color); /* Keep the blue color on focus */
  }
  
  input[type="range"].slider:focus::-moz-range-thumb {
    background: var(--primary-color);
  }




  

.layers-content {
    width: 420px;
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent content from flowing outside the container */
    transition: transform 0.3s ease-in-out;
    position: relative;
    padding: 20px 0 0 20px;
    height: 100%; /* Full height for the content */
}

.map-content {
    flex: 1;
    background-color: var(--background-color);
    position: relative;
    height: 100vh; /* Full screen height for map content */
}

/* Sidebar hidden and sliding up from the bottom on small screens */
@media screen and (max-width: 768px) {
    .layers-content {
        position: fixed;
        bottom: -100%; /* Initially hidden off-screen at the bottom */
        left: 0;
        right: 0;
        height: 75%; /* 3/4 of the screen height */
        width: 100%;
        z-index: 1001;
        background-color: var(--background-color);
        border-radius: 16px 16px 0 0;
        transition: bottom 0.3s ease;
    }

    .layers-content.show {
        bottom: 0; /* Show the layers-content by sliding it up */
    }

    .overlays {
        display: none; /* Initially hide the overlay */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Dark semi-transparent overlay */
        z-index: 15; /* Below the layers-content but above the map */
        transition: opacity 0.3s ease;
    }

    .overlays.show {
        display: block;
    }
}

/* On larger screens, hide the circle button and show the sidebar as static */
@media screen and (min-width: 768px) {
    .layers-content {
        position: relative;
        bottom: auto;
        height: 100vh;
        width: 420px;
        box-shadow: none;
    }

    .overlays {
        display: none; /* No overlay needed on larger screens */
    }
}



#map {
    width: 100%;
    height: 100%;
    position: relative; /* Ensures the map is positioned relative to its parent */
  }
  
  .map-info {
    background-color: var(--navbar-background-color);
    color: var(--navbar-text-color);
    padding: 10px 20px; /* Padding around the text */
    font-size: 0.6rem; /* Font size */
    border-radius: 8px; /* Rounded corners for the box */
    text-align: center;
    max-width: 100%; /* Ensures the box doesn't overflow the screen */
	border-radius: 0 0 4px 4px;
  }

  .map-info-box {
    position: absolute;
    bottom: 20px; /* Distance from the bottom of the map */
    left: 50%;
    transform: translateX(-50%); /* Center the info-box horizontally */
    background-color: var(--navbar-background-color);
    color: var(--navbar-text-color);
    padding: 10px 20px; /* Padding around the text */
    font-size: 0.6rem; /* Font size */
    border-radius: 8px; /* Rounded corners for the box */
    z-index: 1000; /* Ensures the info-box is above the map content */
    text-align: center;
    max-width: 90%; /* Ensures the box doesn't overflow the screen */
  }
  



  .scrollable-content {
    overflow-y: auto;
    scrollbar-width: none; /* For Firefox: hides the scrollbar */
    -ms-overflow-style: none; /* Hides scrollbar for IE and Edge */
    padding-right: 10px; /* Prevents content cut-off when a scrollbar appears */
}

/* For Webkit browsers (Chrome, Safari) */
.scrollable-content::-webkit-scrollbar {
    width: 0; /* Completely hide the scrollbar */
}

/* Optional: Smooth scrolling for touch devices */
.scrollable-content {
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */
}

/* Optional: Custom scrollbar for modern browsers when you want a minimal visible scrollbar */
.scrollable-content:hover {
    scrollbar-width: thin; /* Thin scrollbar for Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Firefox scrollbar color */
}

.scrollable-content::-webkit-scrollbar {
    width: 8px; /* Show thin scrollbar when hovering */
}

.scrollable-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* Minimal thumb for Chrome/Safari */
    border-radius: 4px; /* Rounded scrollbar */
    transition: background-color 0.3s ease;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4); /* Slightly darker thumb on hover */
}

.scrollable-content::-webkit-scrollbar-track {
    background-color: transparent; /* Transparent scrollbar track */
}




.segmented-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  padding: 5px;
  background-color: var(--navbar-background-color);
  max-width: 380px;
  position: relative;
  overflow: hidden;
}

.switch-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.switch-option {
  flex: 1;
  text-align: center;
  font-size: 0.8rem; 
  color: #666;
}

.switch-label input[type="checkbox"] {
  display: none;
}

.switch-label .lever {
  position: relative;
  width: 40px;
  height: 24px;
  background-color: #ccc;
  border-radius: 50px;
  margin: 0 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.switch-label .lever:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.switch-label input[type="checkbox"]:checked + .lever {
  background-color: var(--primary-color);
}

.switch-label input[type="checkbox"]:checked + .lever:before {
  transform: translateX(16px);
}

.switch-label input[type="checkbox"]:checked ~ .switch-option:last-of-type {
  color: var(--primary-color);
}

.switch-label input[type="checkbox"]:not(:checked) ~ .switch-option:first-of-type {
  color: var(--primary-color);
}



.text-group p {
    font-size: .9rem;
	margin-bottom: 10px;
}

.text-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 15px 0;
	line-height: 1.8; /* Line height for readability */
    color: var(--navbar-text-color); /* Main title color */
}

.text-subtitle {
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-color); /* Subtitle color */
}

p.text-content {
    font-size: .8rem;
    color: var(--secondary-color);
    line-height: 1.6; /* Line height for readability */
}


.button-group-container {
    display: flex;
    justify-content: flex-end; /* Align the button group to the right */
}

.button-group {
    display: flex;
    overflow: hidden;
    max-width: 450px; /* Adjust width as needed */
}

.segment-btn {
    flex: 1;
    padding: 5px 20px;
	margin: 0 10px;
    border: none;
    background-color: var(--primary-color);
    cursor: pointer;
	font-family: 'Prompt', sans-serif;
    font-size: .8rem;
    color: white;
	white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.segment-btn.red {
	background-color: #e53935;
}

.segment-btn.large {
	font-size: 1.2rem;
	border-radius: 20px;
}

.segment-btn i {
    margin-right: 8px; /* Space between icon and text */
    font-size: 1rem;
}

.segment-btn:hover {
    background-color: var(--secondary-color);
}





/* Container for the gallery */
.photo-gallery {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Buttons to navigate through images */
.prev, .next {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px 17px;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border-radius: 50%;
    font-size: 18px;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Hide the horizontal scroll bar */
.photo-container {
    width: 100%;
    overflow-x: hidden;
}

.photo-wrapper {
    display: flex;
    transition: transform 0.3s ease;
    padding: 20px;
	max-width: 360px;
}

/* Style for images */
.photo-wrapper img {
    height: 100px;
    width: auto;
    border-radius: 20px;
    margin-right: 20px;
    cursor: pointer;
    transition: transform 0.2s;
}

.photo-wrapper img:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Modal view for larger image */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1003;
    justify-content: center;
    align-items: center;
}

.modal-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
}

.close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}




/* General Styles */
.collection-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-container {
    flex: 1;
}

.action-link {
    text-align: right;
}

.action-icon {
    color: #FF5722;
    font-size: 1.5rem;
}

.divider {
    height: 2px;
    background-color: var(--navbar-background-color);
    margin: 1rem 0;
}




/* Container and label styling */
.input-container {
    margin: 20px 0;
    /*width: 100%;*/
    max-width: 400px;
    position: relative;
}

.input-container label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: var(--text-color); /* Custom text color */
}

/* Style for .input-container label when disabled */
.input-container.disabled label, 
.input-container.disabled textarea::placeholder, .input-container.disabled input::placeholder, 
.input-container.disabled textarea, .input-container.disabled input
 {
    color: var(--navbar-background-color); /* Disabled color */
	cursor: not-allowed;
	pointer-events: none; /* Prevent interaction */
}

/* Shared input/textarea styling */
.input-container textarea, .input-container input {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid var(--navbar-background-color);
    border-radius: 10px;
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Prompt', sans-serif;
    letter-spacing: .1rem;
}

input, .input-container textarea::placeholder, .input-container input::placeholder {
	font-family: 'Prompt', sans-serif;
	letter-spacing: .1rem;
    color: var(--border-color);
    font-size: 1rem;
}

/* Hover and focus effects */
.input-container textarea:focus, .input-container textarea:hover,
.input-container input:focus, .input-container input:hover {
    border-color: var(--primary-color);
    /*box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);*/
}

/* Textarea specific styling */
.input-container textarea {
    resize: vertical; /* Allows vertical resizing, but not horizontal */
	height: 50px;
    min-height: 50px; /* Ensures some height for textarea */
    max-height: 200px; /* Optional: set a max height */
	overflow: hidden; /* Hide scrollbars */
	box-sizing: border-box;
}






/* Styles for the required red dot */
.label-required::before,
.label-filled::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    transform: scale(1.1); /* Slightly larger when filled */
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover effect for additional emphasis */
.label-required:hover::before,
.label-filled:hover::before,
.custom-label.label-required:hover::after,
.custom-label.label-filled:hover::after {
    transform: scale(1.2);
}

/* Styling for required dot (red) */
.label-required::before, 
.custom-label.label-required::after {
    background-color: #FF5252; /* Red dot for required */
}

/* Styling for filled dot (green) */
.label-filled::before, 
.custom-label.label-filled::after {
    background-color: #4CAF50; /* Green dot for filled */
}


/* Green or red dot depending on state */
.custom-label.label-required::after,
.custom-label.label-filled::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    right: -14px; /* Position to left of text */
    top: calc(50% - 4px);
    transform: scale(1.1);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.radio-group .label-required::before, 
.radio-group .custom-label.label-required::after,

.radio-group .label-filled::before, 
.radio-group .custom-label.label-filled::after {
    background-color: transparent;
}


/* Container for date picker, styled like custom-select-container */
.date-picker-container {
    margin: 20px 0;
    width: 100%;
    max-width: 400px;
    position: relative;
}

/* Label Styling */
.date-picker-container label.title {
    display: block;
    margin-bottom: 8px;
    font-size: .8rem;
    color: var(--text-color);
}

/* Custom select box for day, month, and year */
.dob-select {
    width: 100%;
    padding: 9px 15px;
    border: 2px solid var(--navbar-background-color);
    border-radius: 10px;
    background-color: var(--background-color);
    color: var(--text-color);
	font-family: 'Prompt', sans-serif;
	letter-spacing: .1rem;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.dob-select:hover, .dob-select:focus {
    border-color: var(--primary-color);
    /*box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);*/
}

.dob-select-container {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}



/* Styling for the custom alert box */
.custom-alert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f44336;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    /*box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);*/
    z-index: 1000;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Fade-out effect */
.fade-out {
    opacity: 0;
    transform: translateX(-50%);
}






.search {
    position: relative;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
    opacity: 1;
    z-index: 10;
}

.search.hide {
    transform: translateX(-100%); /* Slide search off the screen */
    opacity: 0;
}

.list {
    position: relative;
    width: 100%; /* Takes full width by default */
    transition: transform 0.5s ease-in-out, width 0.5s ease-in-out; /* Smooth transition for width and transform */
    z-index: 5;
}

.list.shrink {
    transform: translateX(-250px); /* Slide the list slightly when the descript is shown */
    width: 75%; /* Shrink width when .descript is shown */
	margin-left: 250px;
}

.descript {
    position: fixed;
    right: -100%; /* Initially hidden on larger screens */
    top: 0;
    width: 25%;
	min-width: 350px;
	max-width: 500px;
    height: 100%; /*100vh;*/
	padding: 20px;
    background-color: var(--navbar-background-color);
    transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition for right and opacity */
    z-index: 9999;
    opacity: 0;
}

.descript.show {
    right: 0; /* Slide descript in from the right */
    opacity: 1;
}


/* Mobile-specific styles */
@media (max-width: 768px) {
    .descript {
        top: auto; /* Remove top positioning on mobile */
        bottom: -100%; /* Initially hidden at the bottom */
        right: 0;
        width: 100%; /* Full width on mobile */
        height: 75%;
        border-radius: 16px 16px 0 0; /* Rounded top corners */
        transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out;
        visibility: hidden; /* Ensure it's completely hidden when off-screen */
        pointer-events: none; /* Prevent interaction when hidden */
    }

    .descript.show {
        bottom: 0; /* Slide up from the bottom */
        visibility: visible; /* Ensure it's visible when shown */
        pointer-events: auto; /* Enable interaction */
        opacity: 1; /* Ensure opacity is set to visible */
    }

    /*.search {
        display: none; /* Hide search on mobile */
    /*}*/

    .list {
        width: 100%; /* Full width on mobile */
    }
}

/* Optional: Style for the close button on mobile */
#close-descript {
    position: absolute;
    top: 10px;
    right: 10px;
    /*background: #ff5c5c;
    color: white;
    border: none;
    border-radius: 50%;*/
	color: var(--text-color);
	background: transparent;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* Hide the default radio and checkbox */
input[type="radio"].custom-radio,
input[type="checkbox"].custom-checkbox {
    display: none;
}

/* Custom radio style */
.custom-radio + .custom-label,
.custom-checkbox + .custom-label {
    position: relative;
    padding-left: 40px;
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: 1px;
    display: inline-block;
    color: var(--text-color);
    margin: 12px 0;
    transition: color 0.3s ease;
}

/* Custom label color when disabled */
input[type="radio"].custom-radio:disabled + .custom-label,
input[type="checkbox"].custom-checkbox:disabled + .custom-label {
    color: var(--navbar-background-color); /* Set disabled label color */
    cursor: not-allowed; /* Show cursor as not allowed */
}

/* Create a custom radio button */
.custom-radio + .custom-label:before,
.custom-checkbox + .custom-label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--navbar-background-color);
    background: transparent;
    transition: background 0.2s ease, border-color 0.3s ease;
}

/* Radio button styling */
.custom-radio + .custom-label:before {
    border-radius: 50%;
}

/* Checkbox styling */
.custom-checkbox + .custom-label:before {
    border-radius: 4px;
}

/* Custom radio button color when checked */
input[type="radio"].custom-radio:checked + .custom-label:before {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

/* Custom checkbox color when checked */
input[type="checkbox"].custom-checkbox:checked + .custom-label:before {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

/* Add checkmark for checked checkboxes */
input[type="checkbox"].custom-checkbox:checked + .custom-label:after {
    content: "";
    position: absolute;
    left: 8px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Custom disabled radio and checkbox styles */
input[type="radio"].custom-radio:disabled + .custom-label:before,
input[type="checkbox"].custom-checkbox:disabled + .custom-label:before {
    background-color: transparent; /*#e0e0e0; /* Light gray for disabled state */
    border-color: var(--navbar-background-color); /* Set to navbar color for disabled border */
}

/* Hover effect for enabled labels */
.custom-radio:not(:disabled) + .custom-label:hover:before,
.custom-checkbox:not(:disabled) + .custom-label:hover:before {
    border-color: var(--primary-color);
}







/* Flex container for aligning radio-group and input-group */
.input-container-flex {
    display: flex;
    align-items: center; /* Align items vertically centered */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.radio-group {
    flex: 0 1 auto; /* Take space as per content */
	align-self: flex-start;
    margin-right: 20px; /* Space between radio and inputs */
    display: flex;
    align-items: center; /* Vertically align the radio and label */
}

.input-group {
    flex: 1; /* Take remaining space */
    display: flex;
    align-items: center;
}

.input-group .row {
    display: flex;
	top: -12px;
	position: relative;
    justify-content: space-between;
    width: 100%; /* Full width for inputs */
}

/* Responsive adjustments for mobile screens */
@media screen and (max-width: 768px) {
    .input-container-flex {
        flex-direction: column;
    }

    .radio-group {
        margin-bottom: 10px;
    }

    .input-group .row {
        flex-direction: column;
    }

}


.underline {
	margin: 1.25rem 0 1.25rem 0; 
	border-bottom: 2px solid var(--navbar-background-color);
}

/* Styling for the title */
.section-title {
    font-size: 1.5rem; /* Adjust for the desired size */
    font-weight: 600; /* A bit bold to stand out */
    color: var(--text-color); /* Define your main accent color */
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

/* Modern underline or border effect */
.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px; /* The underline width */
    height: 4px; /* The underline height */
    background-color: var(--primary-color); /* Secondary accent color */
    border-radius: 2px;
}

.section-title.red {
    color: #e53935; /* Define your main accent color */
}

.section-title.red::after {
	background-color: #e53935;
}

/* For responsive adjustments */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.3rem; /* Slightly smaller on mobile */
    }
}


.switch-option.label-required {
    color: red; /* Highlight if required */
}

.switch-option.label-filled {
    color: green; /* Highlight if filled */
}









.signaturePadContainer {
	position: relative;
	width: 100%; /* Allow it to take up full width of the parent */
	max-width: 380px; /* Limit maximum width */
	aspect-ratio: 2 / 1; /* Maintain a 600:300 aspect ratio */
	margin: 0 auto;
	border: 2px solid var(--navbar-background-color); /*#FF5252; /*var(--navbar-background-color);*/
	border-radius: 20px;
	background: var(--navbar-background-color);
	/*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
}

.signaturePadContainer canvas {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	cursor: crosshair;
}

.signaturePadContainer .button-group {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}


.file-upload-container {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 2 / 1;
    border: 2px dashed var(--navbar-background-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--background-color);
    padding: 10px;
    transition: border-color 0.3s;
}

.file-upload-container.dragover {
    border-color: var(--navbar-background-color);
    background-color: rgba(0, 128, 255, 0.1);
}

.file-upload-input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1; /* Ensure it doesn't overlap the button */
}

.file-upload-content {
    position: relative;
    z-index: 2; /* Ensure content is above the input overlay */
    text-align: center;
}


.view-file-button {
    display: inline-block;
    padding: 8px 16px;
    font-size: 1rem;
    color: var(--text-color);;
    background-color: var(--navbar-background-color);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 3; /* Ensure the button is always on top */
}

.view-file-button:hover {
    background-color: #0073e6;
	color: #fff;
}

.view-file-button:active {
    background-color: #005bb5;
}

.view-file-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.file-upload-label {
    font-size: .8rem;
    color: #666;
	text-align: center;
	pointer-events: none;
}

.progress-bar {
	width: 100%;
	height: 5px;
	background-color: var(--navbar-background-color);
	position: absolute;
	bottom: 0;
	left: 0;
	display: none; /* Hidden by default */
}
.progress-fill {
	width: 0;
	height: 100%;
	background-color: var(--primary-color);
	transition: width 0.3s ease;
}
.file-name {
	margin-top: 10px;
	color: var(--text-color);
	font-size: 1rem;
}


.image-upload-container {
    margin: 20px 0;
}

/* Style the file input label */
.image-file-upload-label {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    text-align: center;
}

.image-file-upload-label:hover {
    background-color: var(--secondary-color); /*#005FCC;*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/*.image-file-upload-label.label-required {
    border: 2px solid red;
    animation: shake 0.3s ease-in-out;
}

.image-file-upload-label.label-filled {
    border: 2px solid green;
}*/

/* Keyframe animation for a shaking effect */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

.sortable-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding: 15px;
    border: 2px dashed var(--border-color);
    border-radius: 20px;
    background-color: var(--background-color);
}

.sortable-images .image-item {
    /*width: 100px;*/
    height: 100px;
    /*border: 1px solid var(--border-color);*/
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: grab;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    transition: box-shadow 0.2s ease-in-out;
}

.sortable-images .image-item.dragging {
    opacity: 0.5;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.sortable-images .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sortable-images .image-item .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-download {
    display: inline-block;
    background-color: var(--navbar-background-color);
    color: var(--text-color);
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 16px;
    transition: background-color 0.3s ease;
    text-align: center;
    vertical-align: middle;
}

.btn-download i {
    margin-right: 8px;
    vertical-align: middle;
}

.btn-download:hover {
	color: #fff;
    background-color: var(--primary-color);
    text-decoration: none;
}


/* Firefox */
* {
  scrollbar-width: none; /*scrollbar-width: thin;*/
  scrollbar-color: var(--border-color) transparent;
}

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

/* Chrome, Edge, Safari */
/**::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #666;
}*/




/* Popup Container */
.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*max-height: calc(100vh - 80px); /* Viewport height minus 40px margin */
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1004;
}

/* Popup Content */
.popup-content-input {
  position: relative;
  background: var(--background-color);
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  max-height: calc(100% - 80px);/*calc(100vh - 80px); /* Viewport height minus 40px margin */
  overflow-y: auto;
  /*padding: 20px;*/
  /*text-align: center;*/
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  animation: popupSlideIn 0.4s ease;
}

@keyframes popupSlideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Actions */
.popup-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* Buttons */
.btn-save {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 6px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-save:hover {
  /*background-color: var(--navbar-background-color);*/
}

.btn-cancel {
  background-color: var(--navbar-background-color);
  color: #666;
  border: none;
  padding: 6px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-cancel:hover {
  color: #fff;
}

/* Show Popup */
.popup-container.show {
  opacity: 1;
  visibility: visible;
}

/* Close Button */
.close-btn {
  position: absolute;
  z-index: 1005;
  /*background-color: var(--navbar-background-color);
  color: #666;
  border: none;
  padding: 5px 20px;
  border-radius: 50%;*/
  top: 10px;
  right: 20px;
  font-size: 2rem;
  cursor: pointer;
  color: #666;
}

.close-btn:hover {
  color: var(--text-color);
}


.cancelStamp {
  color: #e53935;
  border: 4px solid #e53935;
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  margin: 1rem 0;
  cursor: pointer;
}


		.login-container, .signin-container {
            background-color: var(--background-color);
            /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
			border: 2px var(--navbar-background-color) solid;
            border-radius: 20px;
            padding: 2rem;
			margin: 10px;
            /*width: 100%;*/
            max-width: 400px;
        }

        .login-container h1, .signin-container h1 {
            text-align: center;
            margin-bottom: 1rem;
            color: var(--text-color);
			letter-spacing: .3rem;
        }

        .login-container form {
            display: flex;
            flex-direction: column;
        }

        .login-button, .signin-button {
            background-color: var(--primary-color);
            color: #ffffff;
			font-family: 'Prompt', sans-serif;
            padding: 0.8rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 16px;
			width: 100%;
        }

        .login-button:hover, .signin-button:hover {
            background-color: var(--secondary-color);
        }

		.circle {
			position: fixed;
			top: 8px;
			right: 20px;
			border-radius: 50%;
			padding: 10px;
			height:45px;
			width:45px;
		}

	
/* Container for the profile image and active dot */
.container-active {
    position: relative;
	top: 5px;
    width: 40px; /* Adjust width as needed */
    height: 40px; /* Adjust height as needed */
    display: inline-block;
}



/* Circular profile image */
.profile-img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
	transition: transform 0.3s, background-color 0.3s;
	/*padding: 5px;
	/*background-color: var(--navbar-background-color);
	/*border: 2px solid white;*/
}

.profile-img:hover {
    transform: scale(1.05);
    /*box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);*/
}

/* Active status dot */
.active-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px; /* Size of the dot */
    height: 12px; /* Size of the dot */
    border-radius: 50%;
    border: 2px solid var(--background-color); /* Optional border for better contrast */
	background-color: var(--border-color);
}

/* Status colors */
.active-good {
    background-color: #4CAF50; /* Good status */
}

.active-normal {
    background-color: #FFB300; /* Normal status */
}

.active-bad {
    background-color: #FF5252; /* Bad status */
}



/* Circular profile image */
.account img {
    object-fit: cover;
	transition: transform 0.3s, background-color 0.3s;
}

.account img:hover {
    transform: scale(1.05);
}



/* Access container */
.access-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.access-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Custom checkbox styling */
.custom-checkbox-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  padding: 0.5rem 1rem;
  border: 2px solid var(--navbar-background-color);
  border-radius: 20px;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.custom-checkbox-container:hover {
  border-color: var(--primary-color);
  /*background-color: rgba(0, 0, 0, 0.03); /* Soft hover effect */
  /*box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Smooth shadow */
}

/* Hide default checkbox */
.custom-checkbox-container input[type="checkbox"] {
  display: none;
}

/* Icon styles */
.custom-checkbox-container i {
  font-size: 1rem;
  color: var(--text-color);
  transition: color 0.3s ease; /* Smooth icon color transition */
}

/* Checked state */
.custom-checkbox-container input[type="checkbox"]:checked + i,
.custom-checkbox-container input[type="checkbox"]:checked + i + span {
  color: var(--primary-color);
}

/* Disabled state */
.custom-checkbox-container input[type="checkbox"]:disabled + i,
.custom-checkbox-container input[type="checkbox"]:disabled + i + span {
  color: var(--navbar-background-color);
  opacity: 0.6; /* Add slight transparency for disabled */
}

/* Default span styles */
.custom-checkbox-container span {
  color: var(--text-color);
  transition: color 0.3s ease; /* Smooth text color transition */
}

.chip {
  display: inline-flex;
  align-items: center;
  background-color: var(--border-color);
  color: var(--secondary-color);
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  margin: 0.2rem 0.4rem 0.2rem 0;
  font-size: 0.6rem;
  /*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);*/
}

.chip i {
  font-size: 0.6rem;
  margin-right: 0.5rem;
}


.online-users {
    position: absolute;
    bottom: 20px;
    width: 210px;
    text-align: center;
    font-size: 14px;
    color: var(--navbar-text-color);
	font-weight: bold;

    padding: 10px 0;
	border: 2px solid var(--border-color);
	border-radius: 20px;
	background: var(--navbar-background-color);
    /*background: linear-gradient(90deg, #6a11cb, #2575fc);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);*/
}

.online-users-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.online-users-content i {
    font-size: 18px;
}

/*collapsible*/
.collapsible {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.collapsible li {
    list-style: none;
}

.collapsible-header {
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--primary-color);/*color: white;*/
    cursor: pointer;
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    /*background-color: var(--primary-color);*/
    border-radius: 10px;
    transition: background 0.3s ease;
}

.collapsible-header:hover {
    background-color: var(--navbar-background-color);/*#476c32; /* darker forest green on hover */
}

.collapsible-header .material-icons {
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.collapsible-item.active .material-icons {
    transform: rotate(90deg);
}

.collapsible-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    background-color: transparent;
    padding: 0 10px;
    border-radius: 0 0 6px 6px;
	color: var(--secondary-color);
}

.collapsible-item.active .collapsible-body {
	/*max-height: 100%; /* or large enough value to fit content */
    padding: 10px;
}

/*rfdbook*/
.demo-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
	border-radius:0 0 20px 20px;
	background:rgba(224, 224, 224, 0.9);
	padding:1rem 0;
}

.demo-wrap.bottom-dashed-line {
	border-radius:0;
}

.bottom-dashed-line::after{
  content: "";
  display: block;
  margin-top: 10px;
  height: 2px;
  width: 100%;

  --s: 7px;
  --c: rgb(120,110,95);

  background: 0 / calc(2*var(--s)) repeat-x;
  background-image:
    radial-gradient(circle at 50% 50%, var(--c) 40%, transparent 41%);
  opacity:.95;
}


.demo-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center both axes */
    height: 80%;
    object-fit: cover;
    opacity: 0.1;
    z-index: 1;
}

.demo-content {
  position: relative;
  z-index: 2;
  padding: 1rem;
  color: #333333; /* or var(--text-color); */
  font-size: 1rem;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically center all children */
  align-items: center;      /* Horizontally center all children */
  height: 100%;             /* or a fixed height if needed */
  text-align: center;
}


/* Watermark for cancelled entries */
.cancel-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
  
  font-size: clamp(1.5rem, 8vw, 4rem);        /* Scales with screen size */
  font-weight: bold;
  color: #C62828;

  border: clamp(2px, 1vw, 10px) solid #C62828; /* Responsive border width */
  border-radius: clamp(8px, 2vw, 20px);        /* Responsive border radius */

  padding: clamp(4px, 1vw, 12px) clamp(8px, 2vw, 24px); /* Responsive padding */
  
  z-index: 10;
  opacity: 0.75;
  pointer-events: none;
  text-transform: uppercase;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  user-select: none;
}


.center-text {
  display: flex;
  flex-direction: column;
  justify-content: center;     /* Vertical center */
  align-items: center;         /* Horizontal center */
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

.center-text p {
  margin: 0 0 .5rem 0;         /* Add spacing between paragraphs */
  line-height: 170%;           /* Default line height for text within same <p> */
}

.center-text p + p {
  margin-top: 0;             /* Adds 200% spacing between paragraphs */
}




.head-content {
  font-size: clamp(1rem, 2.5vw, 1.5rem); /* min 1rem, preferred 2.5vw, max 1.5rem */
}

.demo-content {
  font-size: clamp(0.5rem, 1.5vw, 1rem); /* min 0.5rem, preferred 1.5vw, max 1rem */
}

.warning-content {
  font-size: clamp(0.3rem, 1vw, 0.8rem); /* min 0.3rem, preferred 1vw, max 0.8rem */
}


.image-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: #ECEFF1;

  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.04);
}

/*.image-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: #ECEFF1;

  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 4px 6px rgba(0, 0, 0, 0.10),
    0 10px 20px rgba(0, 0, 0, 0.08);
}*/

#image {
    width: 100%;
    display: block;
    background: transparent;
}

/*.svg-section {
  width: 100%;
  max-width: 720px;
  margin: 12px auto 0;
  display: flex;
  justify-content: center;
}

.svg-section img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
}

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

*/



/*.demo-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
	border-radius:0 0 20px 20px;
	background:rgba(224, 224, 224, 0.9);
	padding:1rem 0;
}

.demo-wrap.bottom-dashed-line {
	border-radius:0;
}*/

/* Ensure SVG host takes space but stays under overlay */
#svgHost {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#svgHost svg {
  max-width: 100%;
  max-height: 100%;
  width: 700px; /*auto;*/
  height: auto;
  object-fit: contain;
  display: block;
  background: transparent;
}






/* Container that holds compass icon */
.compass-container {
  position: absolute;
  top: 16%;
  right: 1.75em;/*left: 1.75em;/*right: 30%;*/
  z-index: 10;
  pointer-events: none;
  user-select: none;
  width: clamp(8px, 6vw, 50px);
  height: auto;
  /*width: 8vw;           /* responsive size */
  /*max-width: 50px;      /* limit when big screen */
  /*min-width: 10px;      /* limit when small screen */
  transition: width 0.15s ease-out;
}

/* Compass SVG itself */
.compass-svg {
  width: 100%;
  height: auto;
  display: block;
  color: #333;
  /*filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15)); /* soft shadow for beauty */
}