/* Define CSS Variables for Colors */
:root {
    --sidebar-bg-color: #f8f9fa; /* Sidebar background color */
    --primary-color: #43B061; /* Hover background color */
    --sidebar-text-color: #212529; /* Default text color */
    --sidebar-hover-text-color: #ffffff; /* Text color on hover */
    --icon-bg-color: #ffffff; /* Background color for icon container */
    --icon-shadow: 0px 2px 5px 0px #00000026; /* Box shadow for icon */
    --border-color: #E1E1E1; /* Border color for link items */
}

/* Sidebar Styles */
.sidebar {
    height: 100vh; /* Full height */
    position: fixed; /* Fix the sidebar to the viewport */
    top: 0;
    left: 0;
    width: 250px;
    background-color: var(--sidebar-bg-color); /* Use the background color variable */
    padding: 1rem 0;
    margin: 0; /* Remove any default margin */
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for separation */
}

.sidebar.closed {
    width: 0;
    overflow: hidden;
}
 
 /* Sidebar Logo */
 .sidebar-logo {
     width: 100%;
     text-align: center; /* Center the logo horizontally */
     padding: 1rem 0; /* Add some padding around the logo */
     border-bottom: 1px solid var(--border-color); /* Optional: Add a border below the logo */
 }
 
 .sidebar-logo .logo-img {
     max-width: 110px; /* Adjust the logo size */
     height: auto; /* Maintain aspect ratio */
 }
 

/* Sidebar Navigation Items */
.sidebar .nav-item {
    width: 100%; /* Full width */
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: var(--sidebar-text-color); /* Use the default text color */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s, color 0.3s, transform 0.3s; /* Smooth transition for hover */
    border-bottom: 1px solid #ddd; /* Add border at the bottom */
}

/* Hover Effect */
.sidebar .nav-item:hover, .sidebar .nav-item.active {
    background-color: var(--primary-color); /* Hover background color */
    color: var(--sidebar-hover-text-color); /* Text color on hover */
    transform: translateX(5px); /* Slight movement for hover effect */
}

/* Sidebar Icon with Card-like Box */
.sidebar .nav-item .nav-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--icon-bg-color); /* White background for the icon container */
    width: 30px; /* Set the width of the icon container */
    height: 30px; /* Set the height of the icon container */
    border-radius: 8px; /* Round corners */
    box-shadow: var(--icon-shadow); /* Card-like shadow */
    margin-right: 1rem; /* Add space between icon and text */
    /* font-size: 1.2rem; */
    transition: color 0.3s; /* Smooth transition for icon color */
}

/* Hover Effect for Icons */
.sidebar .nav-item:hover .nav-icon, .sidebar .nav-item.active .nav-icon {
    color: var(--primary-color); /* Icon color on hover */
}

/* Sidebar Link Text */
.sidebar .nav-item .nav-text {
    flex: 1; /* Take remaining space */
    font-size: 15px; /* Adjust text size */
}

.sidebar .nav-item:hover .nav-text {
    color: var(--sidebar-hover-text-color); /* White text and icon on hover */
}

/* Header Styles */
.top-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: #ffffff;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed; /* Fixed position */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Ensure header is above the sidebar */
    width: calc(100% - 250px); /* Adjust header width based on sidebar width */
    height: 61px;
    margin-left: 250px; /* Ensure header starts where sidebar ends */
    box-sizing: border-box;
}

.sidebar.closed ~ .top-header {
    margin-left: 0;
    width: 100%;
}

.burger-icon {
    font-size: 18px;
    cursor: pointer;
    color: #212529; /* Default icon color */
    transition: color 0.3s ease-in-out;
}

.burger-icon:hover {
    color: var(--sidebar-hover-bg-color); /* Change color on hover */
}

.top-header-title h1 {
    margin: 0; /* Remove margin */
    font-size: 1.5rem;
}

/* Right side icon container */
.top-header-right {
    display: flex;
    align-items: center;
    gap: 1rem; /* Space between icons */
}

/* Individual icons */
.top-header-right .icon {
    /* font-size: 1.5rem; */
    color: #212529; 
    cursor: pointer;
    transition: color 0.3s, transform 0.3s; 
}

/* Hover effect for icons */
.top-header-right .icon:hover {
    color: #43B061; /* Icon color on hover */
    transform: scale(1.1); /* Slight zoom effect */
}

/* Notification, chat, and logout icon alignment */
#notifications, #chat, #logout {
    position: relative;
}

/* Optional: Add notification count or badges */
#notifications::after {
    content: "5"; /* Example notification count */
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: #43B061; /* Green background for badge */
    color: white;
    font-size: 0.8rem;
    border-radius: 50%;
    padding: 0.2rem 0.5rem;
}

#chat::after {
    content: "3"; /* Example unread messages count */
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: #43B061;
    color: white;
    font-size: 0.8rem;
    border-radius: 50%;
    padding: 0.2rem 0.5rem;
}



/* Main Content Styles */
.main-content {
    margin-left: 250px; /* Offset content by sidebar width */
    margin-top: 56px; /* Offset content by header height */
    padding: 2rem;
    flex: 1; /* Take remaining width */
    overflow-y: auto; /* Enable scrolling for long content */
}

/* Content full-width when sidebar is closed */
.sidebar.closed ~ .main-content {
    margin-left: 0;
    width: 100%;
}


/* Overall wrapper for the login page */
.custom-login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* background: linear-gradient(to bottom right, #4caf50, #81c784); */
    font-family: 'Arial', sans-serif;
}

/* Container for the login form */
.custom-login-form {
    /* background: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center; */
    width: 100%;
    width: 400px;
}

#page-login-index{
    width: 100%;
}

.custom-login-form #guestlogin,  .custom-login-form .login-heading, button[data-modal="alert"][data-modal-title-str*="cookiesenabled"] {
    display: none; /* Hide the button */
}

.btn-primary{
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover {
    background-color: #388e3c;
}

.custom-login-form .btn-primary{
    width: 100% !important;
}

/* Header for the login page */
.custom-login-header h2 {
    margin: 0 0 10px;
    color: #4caf50;
    font-size: 24px;
}

.custom-login-header p {
    margin: 0 0 20px;
    color: #757575;
    font-size: 14px;
}

/* Style the Moodle login form */
.custom-login-form form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.custom-login-form input[type="text"],
.custom-login-form input[type="password"] {
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 10px;
    font-size: 14px;
    width: 100%;
}

.custom-login-form input[type="submit"] {
    background: #4caf50;
    color: #ffffff;
    border: none;
    padding: 10px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.custom-login-form input[type="submit"]:hover {
    background: #388e3c;
}

/* Footer links */
.custom-login-footer p {
    font-size: 14px;
    color: #757575;
    margin: 10px 0;
}

.custom-login-footer a {
    color: #4caf50;
    text-decoration: none;
    font-weight: bold;
}

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

/* Center the logo */
.custom-login-logo {
    text-align: center;
    margin-bottom: 30px;
}

/* Style the SVG */
.custom-login-logo img, 
.custom-login-logo svg {
    max-width: 250px; /* Adjust as needed */
    height: auto;
}

#page.drawers, #page.drawers .main-inner {
    margin: 0 !important;
    padding: 0 !important;
}

a, a:hover, .page-link {
    color:  var(--primary-color);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(67,176,70, 0.5);
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: var(--primary-color);
    background-color: transparent;
}
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(67,176,70, 0.5);
}

.moremenu .nav-link.active {
    border-bottom-color: var(--primary-color);
}

.btn.btn-icon.icons-collapse-expand {
    color: var(--primary-color);
    background-color: #ceebd6;
}

.btn.btn-icon.icons-collapse-expand:hover {
    outline: 2px solid var(--primary-color);
}


.maincalendar .calendarmonth td.today .day-number-circle, .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--primary-color);
}

.aabtn.focus, .aabtn:focus, .btn-link.focus, .btn-link:focus, .nav-link.focus, .nav-link:focus, .editor_atto_toolbar button.focus, .editor_atto_toolbar button:focus, .editor_atto_toolbar .atto_toolbar_row.focus, .editor_atto_toolbar .atto_toolbar_row:focus, [role="button"].focus, [role="button"]:focus, .list-group-item-action.focus, .list-group-item-action:focus, input[type="checkbox"].focus, input[type="checkbox"]:focus, input[type="radio"].focus, input[type="radio"]:focus, input[type="file"].focus, input[type="file"]:focus, input[type="image"].focus, input[type="image"]:focus, .sr-only-focusable.focus, .sr-only-focusable:focus, a.dropdown-toggle.focus, a.dropdown-toggle:focus, .moodle-dialogue-base .closebutton.focus, .moodle-dialogue-base .closebutton:focus, button.btn-close.focus, button.btn-close:focus, .form-autocomplete-selection.focus, .form-autocomplete-selection:focus, [role="treeitem"]:not([aria-expanded="true"]).focus, [role="treeitem"]:not([aria-expanded="true"]):focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(67,176,70, 0.5);
}

.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.top-header button{
    border: none;
    background: none;
}