:root {
    --bs-primary: #0164CD !important;
    --bs-primary-rgb: 1, 100, 205 !important;
    --bs-primary-bg-subtle: #e0effc !important;
    --bs-primary-border-subtle: #99c2eb !important;
    --bs-primary-text-emphasis: #0150a4 !important;
    --bs-link-color: #0164CD !important;
    --bs-link-hover-color: #0150a4 !important;
    
    --bs-secondary: #C94249 !important;
    --bs-secondary-rgb: 201, 66, 73 !important;
    --bs-secondary-bg-subtle: #fbeee0 !important;
    --bs-secondary-border-subtle: #ebbdc0 !important;
    --bs-secondary-text-emphasis: #a33238 !important;
}

html, body {
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.app-brand {
    position: relative !important; /* Override any absolute positioning */
    background: none !important; /* Remove any inherited background */
    z-index: 10; /* Ensure it appears above */
}
.app-brand .logo {
    filter: none !important; /* Prevent any blending effects */
    mix-blend-mode: normal !important;
}
.sidebar-image {
    position: absolute;
    width: 272px;
    height: 100vh; /* Full height based on device */
    left: 0px;
    top: 0px;

    /* Linear */
    background: linear-gradient(180deg, #0164CD 0%, #C94249 100%) !important;
}

.sidebar-image::before {
    content: ""; /* Required for pseudo-elements */
    position: absolute;
    width: 319px;
    height: 100vh; /* Full height based on device */
    left: -47px;
    top: -5px;
    background: url("/assets/img/auth/cover.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5; /* Adjust opacity to make it visible */
    mix-blend-mode: luminosity; /* Might not work in some cases */
}

.light-style .menu .app-brand.demo {
    height: 90px !important;
}

.menu-item.open:not(.active) {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    border-radius: 8px;
}

.menu-item a {
    font-weight: 800 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    color: #ffffff !important;
}

.menu-item.active > a {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.5) 60%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    /* color:black !important; */
}

.menu-title {
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;

    color: #ffffff !important;
}

.menu-icon {
    color: #ffffff !important;
}

.bg-navbar-theme {
    background-color: #ffffff !important;
}

.navbar-top-title {
    font-weight: 700;
    font-size: 28px;
    line-height: 35px;
    color: #05264e;
}

.breadcrumb {
    box-sizing: border-box;
    display: inline-flex; /* Or use flex with width: fit-content */
    flex-direction: row;
    align-items: center;
    padding: 4px 20px;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e0e6f7;
    border-radius: 8px;
    width: fit-content; /* Adjust width dynamically based on content */
    max-width: 100%; /* Prevents overflow */
}

.btn-primary {
    background-color: #0164CD !important;
    border-color: #0164CD !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #0150a4 !important;
    border-color: #0150a4 !important;
}

.btn-secondary {
    background-color: #C94249 !important;
    border-color: #C94249 !important;
    color: #ffffff !important;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: #a33238 !important;
    border-color: #a33238 !important;
    color: #ffffff !important;
}

/* Set focus color for input, select, and textarea */
.form-control:focus,
.form-select:focus,
textarea:focus {
    border-color: #0164CD !important; /* Blue border */
    box-shadow: 0 0 5px rgba(1, 100, 205, 0.5) !important; /* Blue glow */
    outline: none !important;
}

/* Focus styles for Select2 */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: #0164CD !important; /* Blue border */
    box-shadow: 0 0 5px rgba(1, 100, 205, 0.5) !important; /* Blue glow */
    outline: none !important;
}