:root {
    /* Default Colour settings */
    --default-sidebar-text-color: #ffffff; /* Text color */
    --default-sidebar-bg-color: rgba(70, 70, 70, 0.2); /* Background color */
    --default-sidebar-hover-color: rgba(168, 168, 168, 0.2); /* Hover color */
    --sidebar-blur: 10px; /* Sidebar blur effect */

    --border-width: 1.5px; /* Border line width */
    --border-size: 0.3rem; /* Border size */
    --default-border-color: #fffefe; /* Border color */
    --default-background-color: #f9f9f9;
    --default-text-color: #6e6e6e; /* Text color */
    --default-button-text-color: #6e6e6e;
    --default-empty-color: #dd3e46;
    --default-icon-color: #dd3e46; /* Icon color */
    --default-icon-hover-color: #f1323b; /* Icon color */
    --default-paginator-color: #0dcaf0; /* Paginator color */
    --default-paginator-hover-color: #0ed0f7; /* Paginator hover color */
    
    /* Accesibility versions of all colours */
    --accessible-sidebar-text-color: #0000ff; /* Accessible text color */
    --accessible-sidebar-bg-color: rgba(255,255,255, 0.5); /* Accessible background color */
    --accessible-sidebar-hover-color: rgba(45, 61, 151, 0.2); /* Accessible hover color */
    
    --accessible-border-color: #000000; /* Accessibility border color */
    --accessible-background-color: #ffffff; /* Accessibility background color */
    --accessible-text-color: #008cff; /* Accessibility text color */
    --accessible-button-text-color: #ffffff; /* Button text color */
    --accessible-empty-color: #000000; /* Accessibility empty color */
    --accessible-icon-color: #0051ff; /* Accessibility icon color */
    --accessible-icon-hover-color: #ff0000; /* Accessibility icon hover color */
    --accessible-paginator-color: #0051ff; /* Paginator color */
    --accessible-paginator-hover-color: #ff0000; /* Paginator hover color */
    
    /* Initial values of all colours (Dynamic during runtime) */
    --sidebar-text-color: var(--default-sidebar-text-color); /* Text color */
    --sidebar-bg-color: var(--default-sidebar-bg-color); /* Background color */
    --sidebar-hover-color: var(--default-sidebar-hover-color); /* Hover color */
    --border-color: var(--default-border-color); /* Border color */
    --background-color: var(--default-background-color); /* Background color */
    --text-color: var(--default-text-color); /* Text color */
    --button-text-color: var(--default-button-text-color); /* Button text color */
    --empty-color: var(--default-empty-color); /* Empty color */
    --icon-color: var(--default-icon-color); /* Icon color */
    --icon-hover-color: var(--default-icon-hover-color); /* Icon hover color */
    --paginator-color: var(--default-paginator-color); /* Paginator color */
    --paginator-hover-color: var(--default-paginator-hover-color); /* Paginator hover color */
}

/* Sidebar Toggle Button */
.sidebar-toggle {
    position: fixed; /* Fix the button's position */
    top: 35px; /* Distance from the top of the page */
    right: 20px; /* Distance from the right of the page */
    z-index: 1051; /* Ensure it stays above other elements */
}

.sidebar-toggle.btn {
    /* --bs-btn-color: var(--btn-color); (overriden) */
    --bs-btn-bg: var(--btn-color);
    --bs-btn-border-color: var(--btn-color);
    --bs-btn-hover-color: var(--background-color);
    --bs-btn-hover-bg: var(--btn-hover-color);
    --bs-btn-hover-border-color: var(--btn-hover-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--background-color);
    --bs-btn-active-bg: var(--btn-hover-color);
    --bs-btn-active-border-color: var(--btn-hover-color);
    --bs-btn-border-radius: 0.5rem;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
}


/* Sidebar */
#sidebar.offcanvas {
    background-color: var(--sidebar-bg-color); /* Semi-transparent background */
    backdrop-filter: blur(var(--sidebar-blur)) !important; /* Apply blur effect */
    -webkit-backdrop-filter: blur(var(--sidebar-blur)); /* For Safari support */
    color: var(--sidebar-text-color); /* Set text color */
    font-family: var(--main-font); /* Set font family */
}

/* Sidebar Header */
#sidebar .offcanvas-header {
    background-color: var(--sidebar-bg-color) !important; /* Slightly darker background for the header */
    color: var(--sidebar-text-color) !important; /* Set text color */
    font-family: var(--main-font) !important; /* Set font family */
}

/* Sidebar Title */
#sidebar .offcanvas-title {
    color: var(--sidebar-text-color) !important; /* Set text color */
}

/* Sidebar Body */
#sidebar .offcanvas-body {
    background-color: var(--sidebar-bg-color) !important; /* Match the sidebar background */
    color: var(--sidebar-text-color) !important; /* Set text color */
    font-family: var(--main-font); /* Set font family */
}

/* Sidebar List Items */
#sidebar .list-group-item {
    background-color: transparent !important; /* Transparent background for list items */
    color: var(--sidebar-text-color) !important; /* Set text color */
    font-family: var(--main-font); /* Set font family */
    border: none; /* Remove borders */
}

#sidebar .list-group-item:hover {
    background-color: var(--sidebar-hover-color) !important; /* Highlight color on hover */
    color: var(--sidebar-text-color) !important;
}

/* Footer */
#footer {
    background-color: var(--empty-color); /* Set the background color */
    color: var(--background-color); /* Set the text color */
    text-align: center;
    padding: 0.5rem;
    width: 100%;
}

/* accesibility switcher ---------------------------------- */
.accessibility-switcher {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 10px;
    text-align: center;
    width: 200px;
}

.accessibility-switcher .picker_close {
    display: inline-block;
    margin-bottom: 10px;
    color: #333;
    font-size: 20px;
    cursor: pointer;
}

.accessibility-switcher .accessibility-options {
    display: none;
    text-align: left;
    margin-top: 10px;
}

.accessibility-switcher.open .accessibility-options {
    display: block;
}

/* Disable scrolling when the sidebar is active */
.no-scroll {
    overflow: hidden; /* Disable scrolling */
}

/* Profile dropdown ------------------------------------ */
/* Hide the dropdown menu by default */
/* #profile-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    width: 200px;
} */

#profile-content {
    background-color: var(--background-color);
    color: var(--text-color);
    border-radius: 0.5rem;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
    z-index: 1000;
    width: 300px;
    top: 100%;
    right: 0;
    display: none;
    position: absolute;
    list-style: none;
}

/* Show the dropdown menu when the 'show' class is added */
#profile-content.show {
    display: block;
}

#profile-toggle,
#profile-toggle:focus,
#profile-toggle:hover {
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--text-color) !important;
}

/* Style the dropdown items */
#profile-content .dropdown-item {
    padding: 10px 20px;
    color: var(--text-col);
    text-decoration: none;
    display: block;
    
    /* Add transition for hover effect */
    transform: translateY(0);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

#profile-email {
    color: var(--text-col) !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.0rem !important;
}

/* Add shadow and slight upward movement on hover */
#profile-content .dropdown-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
    transform: translateY(-3px); /* Move upward slightly */
}

/* Style the divider */
#profile-content .dropdown-divider {
    height: 1px;
    margin: 5px 0;
    background-color: #e9ecef;
    border: none;
}