:root {
    /* Base colors */
    --color-text: #323235;
    --color-bg-white: #fff;
    --color-border: #dee2e6;
    --color-brandscolour: #48a884; /* Green for buttons */
    --color-brandslight: #5ab594;  /* Light green for button hover */
    --color-panel: #dee2e685; /* Panel background color */
    --color-menudark: var(--blue); /* Main sidebar color */
    --color-menulight: #ffffff; /* Lighter blue for hover */
    
    /* New background color for page content */
    --color-page-content: #fff; /* Set the page content background color */
    
    /* Component variables */
    --sidebar-width: 60px;
    --sidebar-expanded-width: 250px;
    --top-navbar-height: 60px;
    --navbar-bg: var(--color-bg-white);
    --navbar-border: var(--color-border);

    /* Update semantic colors */
    --primary: var(--color-brandscolour);  /* Green for buttons */
    --secondary: var(--color-brandsdark);
    --background: var(--color-bg-light);
    --foreground: var(--color-text);
    --border: var(--color-border);

    /* Add font variables */
    --font-family-base: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

body {
    min-height: 100vh;
    margin: 0;
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-family-base);
}

.sidebar {
    position: fixed;
    top: var(--top-navbar-height) !important;
    left: 0;
    height: calc(100vh - var(--top-navbar-height)) !important;
    width: calc(var(--sidebar-width) + 10px);
    background-color: var(--color-menudark);
    transition: width 0.3s ease;
    overflow: hidden;
    z-index: 1000;
}

.sidebar.pinned {
    width: calc(var(--sidebar-expanded-width) + 10px);
}

.sidebar:hover {
    width: calc(var(--sidebar-expanded-width) + 10px);
}

.nav-item {
    position: relative;
    width: 100%;
}
.sidebar .nav .nav-item:first-child .nav-link {max-width:70%;}
.nav-link {
    display: flex;
    align-items: center;
    padding: 14px;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
    margin: 3px 10px;
    transition: background-color 0.3s ease;
}

.nav-link:focus, 
.nav-link:hover {
    color: white;
    background-color: var(--color-menulight);
}

.nav-link i {
    width: var(--sidebar-width);
    font-size: 1.3rem;
    text-align: center;
    transition: width 0.3s ease;
    opacity: 0.9;
}

.sidebar:hover .nav-link i,
.sidebar.pinned .nav-link i {
    width: 30px;
}

.link-text {
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
}

.sidebar:hover .link-text,
.sidebar.pinned .link-text {
    opacity: 1;
}

/* Update pin button styles */
.pin-button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    opacity: 0;
    transition: all 0.2s ease;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px;
    display: none;
    z-index: 10;
}

.sidebar:hover .pin-button,
.sidebar.pinned .pin-button {
    opacity: 0.8;
    display: block;
}

.sidebar.pinned .pin-button {
    transform: translateY(-50%) rotate(45deg);
}

.pin-button:hover {
    opacity: 1;
}

/* Ensure pin button doesn't conflict with submenu indicators */
.nav-item.has-submenu .pin-button {
    right: 35px;
}

/* Update dropdown indicator styles */
.nav-item.has-submenu > .nav-link:after {
    content: "\f107"; /* Font Awesome chevron-down */
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    right: 15px;
    font-size: 0.8rem;
    opacity: 0;
    transition: all 0.2s ease;
}

.sidebar:hover .nav-item.has-submenu > .nav-link:after,
.sidebar.pinned .nav-item.has-submenu > .nav-link:after {
    opacity: 1;
}

/* Update submenu styles */
.submenu {
    display: none;
    background-color: rgba(0, 0, 0, 0.15);
    padding: 5px 0;
}

.nav-item.has-submenu:hover .submenu,
.nav-item.has-submenu.active .submenu {
    display: block;
}

.submenu .nav-link {
    padding-left: 5px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: var(--font-weight-normal);
    opacity: 0.9;
}

/* Add collapsed state indicator */
.nav-item.has-submenu > .nav-link i {
    margin-right: 5px;
}

/* When sidebar is collapsed */
.sidebar:not(:hover):not(.pinned) .nav-item.has-submenu > .nav-link:before {
    content: "•";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.5;
}

/* Rotate chevron when submenu is open */
.nav-item.has-submenu:hover > .nav-link:after,
.nav-item.has-submenu.active > .nav-link:after {
    transform: rotate(180deg);
}

.divider {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 10px 0;
}

/* Add dark mode toggle styles */
.theme-toggle {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.theme-toggle .nav-link {
    justify-content: space-between;
    padding-right: 20px;
}

.sidebar:hover .theme-toggle .nav-link,
.sidebar.pinned .theme-toggle .nav-link {
    justify-content: flex-start;
}

/* Dark mode specific styles */
html[data-bs-theme="dark"] {
    background-color: #1a1a1a; /* Dark background for the entire page */
    color: var(--foreground); /* Use light text color defined in variables */
}

html[data-bs-theme="dark"] body {
    background-color: #1a1a1a; /* Dark background for the body */
    color: var(--bs-white); /* Set body text color to white */
}

/* Set yellow backgrounds to black in dark mode */
html[data-bs-theme="dark"] .yellow-background {
    background-color: black; /* Change yellow background to black */
}

/* Set background colour for page content to black in dark mode */
html[data-bs-theme="dark"] .page-content {
    background-color: black; /* Set background to black */
    color: var(--foreground); /* Ensure text is readable */
}

html[data-bs-theme="dark"] .top-navbar {
    background: #2c2c2c; /* Dark background for the top navbar */
    border-color: #444; /* Darker border for the navbar */
}

html[data-bs-theme="dark"] .sidebar {
    background-color: #2c2c2c; /* Dark background for the sidebar */
}

html[data-bs-theme="dark"] .nav-link {
    color: #ffffff; /* Set text color for nav links to white */
}

html[data-bs-theme="dark"] .nav-link:hover {
    background-color: #3d3d3d; /* Darker background on hover */
}

html[data-bs-theme="dark"] .card {
    background-color: #2c2c2c; /* Dark background for cards */
    color: var(--foreground); /* Use light text color for cards */
}

html[data-bs-theme="dark"] .table {
    background-color: #2c2c2c; /* Dark background for tables */
    color: var(--foreground); /* Use light text color for tables */
}

html[data-bs-theme="dark"] .user-name {
    color: #ffffff; /* Set text color for user name to white */
}

html[data-bs-theme="dark"] img {
    filter: none; /* Ensure images are not affected by dark mode */
}

/* Add these styles */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin-left: 10px;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-panel);
    transition: .4s;
    border-radius: 24px;
}

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

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

input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.sidebar:not(:hover):not(.pinned) .toggle-switch {
    width: var(--sidebar-width);
    display: flex;
    justify-content: center;
}

/* Add content layout styles */
.layout-wrapper {
    padding-top: var(--top-navbar-height);
    min-height: 100vh;
    display: flex;
}

.page-content {
    flex: 1;
    padding: 20px;
    margin-left: calc(var(--sidebar-width) + 10px);
    margin-top: 0;
    transition: margin-left 0.3s ease;
    background-color: var(--color-page-content); /* Set the background color for page content */
}

.sidebar.pinned + .page-content {
    margin-left: calc(var(--sidebar-expanded-width) + 10px);
}

/* Timeline styles */
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.timeline-marker {
    position: absolute;
    left: -30px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--color-bg-white);
}

.timeline-marker i {
    font-size: 12px;
}

.timeline-content {
    padding-left: 15px;
    border-left: 2px solid var(--color-panel);
}

/* Card hover effect */
.card {
    border-radius: 15px;
    background-color: var(--color-bg-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: var(--color-bg-white);
}

.card-header:first-child {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
    background: initial !important;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .page-content {
        margin-left: var(--sidebar-width);
    }
    
    .sidebar.pinned + .page-content {
        margin-left: var(--sidebar-width);
    }
}

/* Add these styles for the top navbar */
.top-navbar {
    height: var(--top-navbar-height);
    background: #0a2d48;
    /* border-bottom: 1px solid var(--border); */
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1020;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Logo styles */
.logo {
    height: 40px;
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.logo img {
    height: 100%;
    max-width: 120px;
    object-fit: contain;
}

/* User profile styles */
.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 36px;
    height: 36px;
    background: var(--color-brandscolour);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
}

.user-info {
    text-align: right;
    line-height: 1.2;
}

.user-name {
    font-size: 14px;
    color: var(--foreground);
    font-weight: var(--font-weight-semibold);
}

.user-role {
    font-size: 12px;
    color: var(--secondary);
    font-weight: var(--font-weight-medium);
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #2d3e50;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
}

/* Action icons */
.navbar-right a {
    color: #f26922;
    padding: 8px;
    transition: color 0.2s;
}

.navbar-right a:hover {
    color: var(--secondary);
}

/* Dark mode adjustments */
html[data-bs-theme="dark"] .user-name {
    color: var(--foreground);
}

html[data-bs-theme="dark"] .user-role {
    color: var(--color-brandslight);
}

html[data-bs-theme="dark"] .navbar-right a {
    color: var(--color-brandslight);
}

html[data-bs-theme="dark"] .navbar-right a:hover {
    color: var(--color-brandscolour);
}

/* Responsive styles */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }

    .user-info {
        display: none;
    }

    .logo {
        margin-right: 10px;
    }

    .top-navbar {
        padding: 0 15px;
    }

    .search-container {
        margin: 0 10px;
    }

    .nav-link {
        margin: 2px 5px;
    }
}

 
.btn-outline-primary {
    color: var(--color-brandscolour);
    border-color: var(--color-brandscolour);
}

.btn-outline-primary:hover {
    background-color: var(--color-brandscolour);
    border-color: var(--color-brandscolour);
}

/* Active state for menu items */
.nav-item.active .nav-link {
    background-color: var(--color-menulight);
}

.nav-item.active .nav-link:hover {
    background-color: var(--color-menulight);
}

/* Search styles */
.search-container {
    flex: 1;
    max-width: 600px;
    margin: 0 20px;
}

.search-wrapper {
    position: relative;
    width: 100%;
}

.search-input {
    width: 100%;
    padding: 8px 15px 8px 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--color-bg-light);
    font-size: 14px;
    transition: all 0.2s ease;
    color: var(--foreground);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-brandscolour);
    background-color: var(--color-bg-white);
    box-shadow: 0 0 0 3px rgba(72, 168, 132, 0.1);
}

.search-icon {
position: absolute !important;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary);
    font-size: 14px;
    pointer-events: none;
}

/* Dark mode adjustments for search */
html[data-bs-theme="dark"] .search-input {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--foreground);
}

html[data-bs-theme="dark"] .search-input:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-brandslight);
}

/* Update theme toggle text to match */
.theme-toggle .link-text {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
}

/* Add DataTable specific styles */
.dataTables_wrapper {
    background: var(--color-bg-white);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.table thead th {
    background: var(--color-bg-light);
    border-bottom: none;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.table tbody td {
    vertical-align: middle;
}

.dataTables_filter input {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 12px;
}

.dataTables_filter input:focus {
    border-color: var(--color-brandscolour);
    box-shadow: 0 0 0 3px rgba(72, 168, 132, 0.1);
    outline: none;
}

/* Status badge styles */
.badge {
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: var(--font-weight-medium);
}

/* Menu toggle button styles */
.menu-toggle {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.25rem;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.menu-toggle:hover {
    background-color: rgba(50, 93, 127, 0.1);
}

/* Add collapsed state for sidebar */
.sidebar.collapsed {
    width: 0;
    overflow: hidden;
}

/* Adjust content margin when sidebar is collapsed */
.sidebar.collapsed + .page-content {
    margin-left: 0;
}

/* Dark mode adjustments */
html[data-bs-theme="dark"] .menu-toggle {
    color: var(--color-bg-white);
}

html[data-bs-theme="dark"] .menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Update top navbar layout */
.top-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.top-navbar > div:first-child {
    min-width: max-content;
}

/* Form styles */
.form-label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.nav-tabs .nav-link {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.nav-tabs .nav-link.active {
    color: var(--color-brandscolour);
    border-color: var(--color-brandscolour);
    border-bottom-color: transparent;
}

.nav-tabs .nav-link:hover:not(.active) {
    border-color: transparent;
    color: var(--color-brandscolour);
}

/* Dark mode adjustments */
html[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--color-bg-white);
    border-bottom-color: var(--color-bg-white);
}

/* Button and component styles */
.btn {
    border-radius: 10px; /* Set border radius to 10px without !important */
}

.btn-sm {
    border-radius: 5px !important; /* Smaller border radius for small buttons */
}

.card {
    border-radius: 15px; /* Set border radius to 15px */
}

.card-header {
    border-top-left-radius: 15px; /* Match the card's border radius */
    border-top-right-radius: 15px; /* Match the card's border radius */
    background-color: var(--color-bg-white); /* Ensure background matches */
}

.card-header:first-child {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
    background: initial !important;
}

.form-control {
    border-radius: 5px !important; /* Apply to form controls */
}

.alert {
    border-radius: 5px !important; /* Apply to alerts */
}

.table {
    border-radius: 5px !important; /* Apply to tables */
    font-size: 14px;
}

.toggle-slider {
    border-radius: 24px; /* Rounded corners for the toggle slider */
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin-left: 10px;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-panel);
    transition: .4s;
    border-radius: 24px; /* Rounded corners for the toggle switch */
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%; /* Circular knob for the toggle switch */
}

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

input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.sidebar:not(:hover):not(.pinned) .toggle-switch {
    width: var(--sidebar-width);
    display: flex;
    justify-content: center;
}

/* Submenu link styles */
.submenu .nav-link {
    padding-left: 5px; /* Adjust padding for submenu links */
    margin-left: 20px; /* Adjust left margin for submenu links */
    margin-right: 20px; /* Adjust right margin for submenu links */
    font-weight: var(--font-weight-normal); /* Normal font weight */
    opacity: 0.9; /* Slightly transparent */
}

/* New style for submenu link text */
.submenu .nav-link span.link-text {
    font-size: 15px; /* Adjust font size for submenu link text */
}

/* New style for submenu link icons */
.submenu .nav-link i {
    width: var(--sidebar-width); /* Set width for submenu link icons */
    font-size: 16px; /* Set font size for submenu link icons */
}

/* Card hover effect disabled */
.card {
    /* Remove hover effect styles */
    /* transition: transform 0.2s, box-shadow 0.2s; */
    /* background: var(--color-bg-white); */
    /* border-color: var(--border); */
}

/* Commented out hover effect */
/* .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--color-panel);
} */

/* Widget styles */
.widget {
    border-radius: 5px;
    background-color: var(--color-bg-white);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex: 1; /* Allow widgets to grow equally */
    min-width: 300px; /* Minimum width for widgets */
    height: 200px; /* Fixed height for uniformity */
    overflow: hidden; /* Prevent overflow */
}

 
 
 
 
table tr td:last-child {
    white-space: nowrap;
}

.man td span[id^="_HTMLSpan"] .sr-only {
    display: none;
}

.man #DataTable table {
    max-width: 100%;
}

.man #DataTable {
    max-width: 100%;
}

.man td:nth-child(1),
.man td:nth-child(2),
.man td:nth-child(3) {
    max-width: 100px !important;
}




.equal-height {
display: flex;
flex-wrap: wrap;
}

.equal-height .card {
flex: 1 1 auto; /* Allow cards to grow and shrink equally */
}

.card-body {
display: flex;
flex-direction: column; /* Ensure card body takes full height */
flex: 1; /* Allow card body to grow and fill the card */
}

#PageSizeSelect {min-width:85px;}

#DataTable table {
min-width: 700px;
} 

#DataTable {
 overflow-x: scroll;
 overflow-y: hidden;
 white-space: nowrap;
 scrollbar-width: thin;
 scrollbar-color: #325d7f white;
 -webkit-overflow-scrolling: touch;
 } 
/* Add border radius to the first and last pagination items */
.pagination .page-item:first-child .page-link {
    border-top-left-radius: 15px; /* Set border radius for the first item */
    border-bottom-left-radius: 15px; /* Set border radius for the first item */
}

.pagination .page-item:last-child .page-link {
    border-top-right-radius: 15px; /* Set border radius for the last item */
    border-bottom-right-radius: 15px; /* Set border radius for the last item */
}

.text-secondary {
    --bs-text-opacity: 1;
    color: var(--color-text) !important; /* Set text color with full opacity */
}.card .text-secondary {
color: #325d7f !important;
}

.active > .page-link,
.page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: var(--color-brandscolour); /* Set background color to the brand color */
    border-color: var(--color-brandscolour); /* Set border color to the brand color */
}

.page-link {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    color: var(--color-brandscolour);
    text-decoration: none;
    background-color: var(--bs-white);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.user-profile-icon {
    opacity: 1; /* Set opacity for user profile icons back to 1 */
}

.icon-opacity {
    opacity: 0.5; /* Set opacity for icons */
}

.list-group {
    border-radius: 5px; /* Set border radius to match the cards */
    overflow: hidden; /* Ensure the border radius is applied correctly */
}

.list-group-item {
    border-radius: 0; /* Reset individual item border radius to avoid conflicts */
}

.list-group-item:first-child {
    border-top-left-radius: 10px; /* Set border radius for the first item */
    border-top-right-radius: 10px; /* Set border radius for the first item */
}

.list-group-item:last-child {
    border-bottom-left-radius: 10px; /* Set border radius for the last item */
    border-bottom-right-radius: 10px; /* Set border radius for the last item */
}

tbody, td, tfoot, th, thead, tr {
    border-color: inherit; /* Inherit border color */
    border-style: unset;    /* Remove border style */
    border-width: 0;        /* Remove border width */
}

thead {
    border-bottom: 3px solid #a7acb1; /* Set bottom border for the table header */
}

/* Add margin to the top of the navigation */
ul.nav.flex-column {
    margin-top: 10px; /* Set top margin for the navigation */
}

.navbar-nav h2 {
 white-space: nowrap;
}


.PopUpForm,
.PopUp {
    box-shadow: none !important;
    height: auto !important;
    position: fixed !important;
    border: none !important;
    background-color: rgb(255, 255, 255) !important;
    padding-top: initial !important;
    border-radius: 5px;
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    box-shadow: 0 0.15rem 2rem 18px rgb(50 49 51 / 19%) !important;
    outline: 1500px solid #0000008a !important;
    width: auto !important;
    min-width: 480px;
	overflow:visible!important;
}
#DataState {
    position: absolute;
    top: -45px;
    right: 0px;
    font-size: 14px;
    color: #ffffff;
    background: #10bbb778;
    border-radius: 5px;
    padding: 3px 8px 3px 8px;
    line-height: 24px;
}

span#DataState::before {
    content: "\f0f3";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    margin-right: 10px;
    font-size: 14px;
}

span#DataState:empty {
    display: none;
}

.modal-header {
    background: var(--color-menudark);
    color: white;
    padding: .75rem;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}

.modal-header #CloseThisButton {
    background: var(--brand-highlight-color);
}

.modal-body {
    padding: .75rem;
}

.modal-body table {
    /*empty-cells: hide;*/
}

.modal-body div {
    max-height: 70vh !important;
}

.modal-body table,
.modal-body table div,
.modal-body table .form-select,
.modal-body *:before {
    font-size: 12px !important;
}

.modal-body .btn *:before {
    font-size: 16px !important;
}

.modal-footer {
    background: #f3f4f7;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: .75rem;
    border-top: 1px solid #e3e6f0;
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-bottom-left-radius: calc(0.3rem - 1px);
}

.modal-footer .pull-left {
    position: absolute;
    left: 0px;
}

.modal-footer .pull-left span {
    /* border: 1px solid black; */
}

.modal-footer #InternalIdLabel {
    backdrop-filter: red;
}

.modal-footer ul.pagination {
    margin-bottom: 0 !important;
}

.modal-footer .pagination_button a {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.modal-footer .col-3 {
    line-height: 37px;
}

.modal-footer label.form-label {
    margin-bottom: 0px;
}

.modal-footer div,
.modal-footer row {
    margin: 0px;
    padding: 0px;
    /* width: 100%; */
    text-align: right;
}


#navigator {
	/*float: right;*/
	/* padding-bottom: 25px; */
	/* padding-top: 25px; */
	/* z-index: 99; */
	text-align: right;
}

.card-body #navigator {
	float: right;
}

#navigator button {
	margin-left: 10px;
	min-height: 38px;
}

#navigator #CloseButton,
#navigator #CancelButton,
#DonationsCloseButton,
#SearchCloseButton {
	background: #1560bd !important;
	color: white !important;
	border: #4c4956 !important;
	float: right;
}

div.modal .p-3 {padding:0px!important;}
 body > .modal .btn {
    background-color: var(--color-brandscolour);
    border-color: var(--color-brandscolour);
    color: white;
}

.modal-body .row {
    margin-bottom: 15px;
}


#ParamsCancelButton::before,
#SalesEditCancelButton::before,
#IdEditCancelButton::before,
#CancelButton::before,
#CancelSalesButton::before,
#CancelAndNew::before,
#CancelAndFinish::before,
#CloseButton::before,
#SearchCloseButton::before,
#DonationsCloseButton::before,
#DonorCloseButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f08b";
	margin-right: 10px;
	font-size: 14px !important;
}

#R68Link a::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f1c1";
    margin-right: 10px;
    font-size: 14px !important;
}

#AddDonationButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f51e";
	margin-right: 10px;
	font-size: 14px !important;
}

#ConnectedCharityAdd::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f1ad";
	margin-right: 10px;
	font-size: 14px !important;
}

#UserEditSaveButton::before,
#SaveCCButton::before,
#SaveButtonCB::before,
#ParamsOKButton::before,
#IdEditOKButton::before,
#EditSalesButton::before,
#SaveButton::before,
#SaveAndNew::before,
#SaveAndFinish::before,
#SalesEditSaveButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f0c7 ";
	margin-right: 10px;
	font-size: 14px;
}

#RefreshButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f560";
	margin-right: 10px;
	font-size: 14px;
}

#AddButton::before,
#NewButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\2b";
	margin-right: 10px;
	font-size: 14px;
}

#EditButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f044 ";
	margin-right: 10px;
	font-size: 14px;
}

#PlaceJobButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f07c";
	margin-right: 10px;
	font-size: 14px;
}

#RequestButton::before,
#NewPasswordButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f09c ";
	margin-right: 10px;
	font-size: 14px;
}

#ClearSelectButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f12d ";
	margin-right: 10px;
	font-size: 14px;
}

#ChangePasswordButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f021";
	margin-right: 10px;
	font-size: 14px;
}

#CompleteButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f00c";
	margin-right: 10px;
	font-size: 14px;
}

#RefreshJobsButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f021";
	margin-right: 10px;
	font-size: 14px;
}

#DownloadButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f019 ";
	margin-right: 10px;
	font-size: 14px;
}

#MatchButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f52c";
	margin-right: 10px;
	font-size: 14px;
}

#AdvancedSearchButton::before,
#FindSelectButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f002";
	margin-right: 10px;
	/*font-size: 20px;*/
}

#OrderButton::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f65e ";
	margin-right: 10px;
	font-size: 14px;
}

.clickable::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f044";
	margin-right: 5px;
	font-size: 14px;
	cursor: pointer;
}

#DownloadLetterLink::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f019";
	margin-right: 10px;
	font-size: 14px;
}

#DownloadLetterLink a {
	text-decoration: none;
	color: white;
}

#edit-cancel-button::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f00d"; /* Font Awesome "times" icon */
    margin-right: 10px;
    font-size: 14px;
}

#edit-save-button::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f0c7"; /* Font Awesome "save" icon */
    margin-right: 10px;
    font-size: 14px;
}


/* FOR DEV STATS */
.PopUpForm label  {
    display: inline-block;
background: white;}

  /* Hide the original link text */
  #LogoutLink {
    
    font-size:0px;
    display: inline-block;
   
  }

  /* Replace link text with the sign-out icon */
  #LogoutLink::before {
    content: "\f2f5 ";                 /* sign-out-alt or right-from-bracket in FA Pro */
    font-family: "Font Awesome 6 Pro";  /* Update for your specific FA version */
    font-weight: 900;                 /* 900 for solid style; adjust if using another style */
    font-size:24px;
    display: inline-block;
    line-height: 1;
  }