:root {
    --w-login-fullscreen-background: radial-gradient(100% 300.28% at 100% 0%, 
        #1a1a2e 0%, /* Dark Blue */
        #16213e 32.94%, /* Deep Blue */
        #0f3460 49.9%, /* Purple-Blue */
        #533483 50.2%, /* Deep Purple */
        #ff2e63 100% /* Red */
    ) !important;
}

.login-wrapper {
    background-color: #eaeaf5 !important; /* Dark Blue */
}

/* Change text color for better contrast */
.login-wrapper .login-box {
    color: white !important;
}

/* Customize the login button */
button[type="submit"] {
    background-color: #ffd441 !important; /* yellow */
    border: none;
}

button[type="submit"]:hover {
    background-color: #ff2e63 !important;
}

/* Make the Select2 input field in the Wagtail admin panel match the size of other fields */
.select2-selection--single {
    height: 38px !important; /* Match the height of other fields */
}

/* Hide the default Wagtail SVG logo */
.sidebar-wagtail-branding__icon-wrapper svg {
    display: none !important;
}

/* Add your custom logo */

.sidebar-wagtail-branding__icon-wrapper {
    background: url("/static/images/logo.png") no-repeat center !important;
    background-size: contain !important;
    width: 80px !important;
    height: 80px !important;
    display: block !important;
    border-radius: 50%; /* Makes the background circular */
    background-color: #ffffff; /* Light gray background */
    padding: 10px; /* Add some space around the logo */
}


/* Increase specificity and use !important */
/* Target the sidebar container */
/* Override the CSS variable for the sidebar */
:root {
    --w-color-surface-menus: #535151; /* Set your desired color */
}
/* Target the sidebar and ensure the background color applies */
.sidebar {
    background-color: var(--w-color-surface-menus) !important;
}

/* Change color of the active tab */
.sidebar .active,
.sidebar .current {
    background-color: #e0e0e0 !important;  /* Your desired color */
    color: #000 !important;  /* Adjust text color as needed */
}