html:not(.dark-theme) body.light-blue {
    background: #b7ebf7;
    background: -webkit-linear-gradient(120deg, #f0f9ff 0%, #e0f2fe 30%, #bae6fd 70%, #99e6ff 100%);
    background: linear-gradient(120deg, #f0f9ff 0%, #e0f2fe 30%, #bae6fd 70%, #99e6ff 100%);
}

    html:not(.dark-theme) body.light-blue .sidebar-wrapper {
        background-color: #252525;
    }

        html:not(.dark-theme) body.light-blue .sidebar-wrapper .sidebar-header .logo-text {
            color: white;
        }

        html:not(.dark-theme) body.light-blue .sidebar-wrapper .sidebar-header .logo-icon {
            filter: invert(1) grayscale(100%) brightness(200%);
        }

            html:not(.dark-theme) body.light-blue .sidebar-wrapper .sidebar-header .logo-icon.green-icon {
                filter: invert(49%) sepia(90%) saturate(3000%) hue-rotate(120deg) brightness(100%) contrast(100%) !important;
            }

        html:not(.dark-theme) body.light-blue .sidebar-wrapper .metismenu a {
            color: rgb(231, 231, 231);
        }

            html:not(.dark-theme) body.light-blue .sidebar-wrapper .metismenu a .parent-icon svg {
                fill: white;
            }

        html:not(.dark-theme) body.light-blue .sidebar-wrapper .metismenu .mm-active > a {
            position: relative;
            overflow: hidden;
            color: #0ab5ee;
            background-color: #ffffff;
        }

            html:not(.dark-theme) body.light-blue .sidebar-wrapper .metismenu .mm-active > a::before {
                content: "";
                position: absolute;
                top: 0;
                right: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(120deg, transparent, rgba(0, 131, 253, 0.20), transparent);
                transform: skewX(-20deg);
                animation: shine 5s infinite;
            }

@keyframes shine {
    0% {
        right: -100%;
    }

    25% {
        right: 100%;
    }

    100% {
        right: 100%;
    }
}

html:not(.dark-theme) body.light-blue .sidebar-wrapper::before {
    opacity: 0.2;
}

html:not(.dark-theme) body.light-blue .paye-title-bar h6 {
    color: #0ea5e9;
    -webkit-text-stroke: 3px white;
    text-stroke: 2px #0ea5e9;
    paint-order: stroke fill;
}

html:not(.dark-theme) body.light-blue .paye-card table a {
    color: var(--bs-table-color);
    transition: color 0.2s linear;
}

    html:not(.dark-theme) body.light-blue .paye-card table a:hover {
        color: #0ea5e9;
    }

html:not(.dark-theme) body.light-blue .filter-modal .filter-area .filter-card {
    background: linear-gradient(-45deg, #e4f2ff, #b1d0ff);
}

html:not(.dark-theme) body.light-blue .card {
    box-shadow: 0 2px 6px 0 rgba(218, 218, 253, 0.8),0 2px 6px 0 rgb(206, 206, 238) !important;
}


/* Light Green */
html:not(.dark-theme) body.light-green {
    background: #b7f7c4;
    background: -webkit-linear-gradient(120deg, #f0fff4 0%, #e0f7ed 30%, #bae6d9 70%, #99e6b8 100%);
    background: linear-gradient(120deg, #f0fff4 0%, #e0f7ed 30%, #bae6d9 70%, #99e6b8 100%);
}

    html:not(.dark-theme) body.light-green .sidebar-wrapper {
        background-color: #252525;
    }

        html:not(.dark-theme) body.light-green .sidebar-wrapper .sidebar-header .logo-text {
            color: white;
        }

        html:not(.dark-theme) body.light-green .sidebar-wrapper .sidebar-header .logo-icon {
            filter: invert(1) grayscale(100%) brightness(200%);
        }

            html:not(.dark-theme) body.light-green .sidebar-wrapper .sidebar-header .logo-icon.green-icon {
                filter: invert(49%) sepia(90%) saturate(3000%) hue-rotate(120deg) brightness(100%) contrast(100%) !important;
            }

        html:not(.dark-theme) body.light-green .sidebar-wrapper .metismenu a {
            color: rgb(231, 231, 231);
        }

            html:not(.dark-theme) body.light-green .sidebar-wrapper .metismenu a .parent-icon svg {
                fill: white;
            }

        html:not(.dark-theme) body.light-green .sidebar-wrapper .metismenu .mm-active > a {
            position: relative;
            overflow: hidden;
            color: #0ab57a;
            background-color: #ffffff;
        }

            html:not(.dark-theme) body.light-green .sidebar-wrapper .metismenu .mm-active > a::before {
                content: "";
                position: absolute;
                top: 0;
                right: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(120deg, transparent, rgba(0, 253, 81, 0.20), transparent);
                transform: skewX(-20deg);
                animation: shine 5s infinite;
            }

@keyframes shine {
    0% {
        right: -100%;
    }

    25% {
        right: 100%;
    }

    100% {
        right: 100%;
    }
}

html:not(.dark-theme) body.light-green .sidebar-wrapper::before {
    opacity: 0.2;
}

html:not(.dark-theme) body.light-green .paye-title-bar h6 {
    color: #0ea95e;
    -webkit-text-stroke: 3px white;
    text-stroke: 2px #0ea95e;
    paint-order: stroke fill;
}

html:not(.dark-theme) body.light-green .paye-card table a {
    color: var(--bs-table-color);
    transition: color 0.2s linear;
}

    html:not(.dark-theme) body.light-green .paye-card table a:hover {
        color: #0ea95e;
    }

html:not(.dark-theme) body.light-green .filter-modal .filter-area .filter-card {
    background: linear-gradient(-45deg, #e4fff0, #b1ffcf);
}

html:not(.dark-theme) body.light-green .card {
    box-shadow: 0 2px 6px 0 rgba(218, 253, 225, 0.8),0 2px 6px 0 rgb(206, 238, 210) !important;
}


/* Light Purple */
html:not(.dark-theme) body.light-purple {
    background: #f0e6ff;
    background: -webkit-linear-gradient(120deg, #faf5ff 0%, #f3e8ff 30%, #e9d5ff 70%, #d8b4fe 100%);
    background: linear-gradient(120deg, #faf5ff 0%, #f3e8ff 30%, #e9d5ff 70%, #d8b4fe 100%);
}

    html:not(.dark-theme) body.light-purple .sidebar-wrapper {
        background-color: #252525;
    }

        html:not(.dark-theme) body.light-purple .sidebar-wrapper .sidebar-header .logo-text {
            color: white;
        }

        html:not(.dark-theme) body.light-purple .sidebar-wrapper .sidebar-header .logo-icon {
            filter: invert(1) grayscale(100%) brightness(200%);
        }

            html:not(.dark-theme) body.light-purple .sidebar-wrapper .sidebar-header .logo-icon.green-icon {
                filter: invert(49%) sepia(90%) saturate(3000%) hue-rotate(120deg) brightness(100%) contrast(100%) !important;
            }

        html:not(.dark-theme) body.light-purple .sidebar-wrapper .metismenu a {
            color: rgb(231, 231, 231);
        }

            html:not(.dark-theme) body.light-purple .sidebar-wrapper .metismenu a .parent-icon svg {
                fill: white;
            }

        html:not(.dark-theme) body.light-purple .sidebar-wrapper .metismenu .mm-active > a {
            position: relative;
            overflow: hidden;
            color: #8b5cf6;
            background-color: #ffffff;
        }

            html:not(.dark-theme) body.light-purple .sidebar-wrapper .metismenu .mm-active > a::before {
                content: "";
                position: absolute;
                top: 0;
                right: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(120deg, transparent, rgba(139, 92, 246, 0.20), transparent);
                transform: skewX(-20deg);
                animation: shine 5s infinite;
            }

@keyframes shine {
    0% {
        right: -100%;
    }

    25% {
        right: 100%;
    }

    100% {
        right: 100%;
    }
}

html:not(.dark-theme) body.light-purple .sidebar-wrapper::before {
    opacity: 0.2;
}

html:not(.dark-theme) body.light-purple .paye-title-bar h6 {
    color: #8b5cf6;
    -webkit-text-stroke: 3px white;
    text-stroke: 2px #8b5cf6;
    paint-order: stroke fill;
}

html:not(.dark-theme) body.light-purple .paye-card table a {
    color: var(--bs-table-color);
    transition: color 0.2s linear;
}

    html:not(.dark-theme) body.light-purple .paye-card table a:hover {
        color: #8b5cf6;
    }

html:not(.dark-theme) body.light-purple .filter-modal .filter-area .filter-card {
    background: linear-gradient(-45deg, #f5f0ff, #d9c9ff);
}

html:not(.dark-theme) body.light-purple .card {
    box-shadow: 0 2px 6px 0 rgba(200, 180, 255, 0.8),0 2px 6px 0 rgb(210, 195, 240) !important;
}