.theme-header {
    background-color: #ffffff;
    box-shadow: 2px 2px 4px 0px #DDDDDD40;
    padding: 8px 32px;

    .nav-link {
        color: #838383;
        margin: 8px 20px;
        padding: 0 !important;

        &.active {
            margin: 0;
            padding: 8px 20px !important;
            box-shadow: 0px 0.5px 2px 0px #BBBBBB40;
            background-color: #f6f2ff;
            color: #3A4459;
        }

        &:hover {
            color: #3A4459;
        }
    }

    .profile-section {
        .dropdown-toggle {
            color: #212121;
            text-decoration: none;

            &::after {
                display: none;
            }
        }

        .dropdown-menu {
            box-shadow: 1px 2px 5px 0px #EDEDED;
            border-radius: 9px;
            margin-top: 16px;
            border-color: #E2E2E2;

            .logout {
                color: #FF5858;
            }
        }
    }
}

.nav-item:has(.nav-link.active) {
    
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 9px;
        padding: 0.5px;
        background: linear-gradient(180deg, #EEEEEE 0%, rgba(93, 69, 144, 0.17) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
}