/*:root { --sys-left-menu-bg-color: #4d1a1c; --sys-left-menu-text-color: #d3603b; --sys-left-menu-hover-bg-color: #00e300; --sys-left-menu-border-color: #e36e5b; --sys-left-menu-link-color: #d3603b; --sys-left-menu-link-hover-color: #ffb84d; --sys-left-menu-highlight-bg: #f74444; --sys-left-menu-info-bg: #ffb84d; --sys-left-menu-neutral-bg: #f30a0a; --sys-left-menu-alternate-bg: #e50808; --sys-left-menu-dark-bg: #6b0404; --sys-left-menu-light-bg: #ff0366; --sys-left-menu-hover-bg: #ffb84d; --sys-left-menu-dark-text: #b02e3b; --sys-left-menu-active-tab-bg: #ffb84d; --sys-left-menu-background-white: #ffffff; --sys-left-menu-text-theme-100: #ffffff; --sys-left-menu-text-theme-200: #e0181b; --sys-left-menu-text-theme-300: #c0283c; --sys-left-menu-text-theme-400: #25a022; --sys-left-menu-text-theme-500: #802d22; --sys-left-menu-text-theme-600: #f34957; --sys-left-menu-text-theme-700: #9b0808; --sys-left-menu-primary-color: #ffb84d; --sys-left-menu-secondary-color: #f4bb60; --sys-left-menu-success-color: #7ed321; --sys-left-menu-danger-color: #ff4d4d; --sys-left-menu-warning-color: #ffc107; --sys-left-menu-info-color: #2196f3; --sys-left-menu-light-color: #f4bb60; --sys-left-menu-dark-color: #9f0d0d; --sys-left-menu-white-color: #ffffff; --sys-left-menu-black-50: #d05252; --sys-left-menu-white-50: #ab6565; }*/ /* #sys-top-header */ #sys-top-header .text-primary { color: var(--sys-top-header-primary-color) !important; } #sys-top-header .text-secondary { color: var(--sys-top-header-secondary-color) !important; } #sys-top-header .text-success { color: var(--sys-top-header-success-color) !important; } #sys-top-header .text-danger { color: var(--sys-top-header-danger-color) !important; } #sys-top-header .text-warning { color: var(--sys-top-header-warning-color) !important; } #sys-top-header .text-info { color: var(--sys-top-header-info-color) !important; } #sys-top-header .text-light { color: var(--sys-top-header-light-color) !important; } #sys-top-header .text-dark { color: var(--sys-top-header-dark-color) !important; } #sys-top-header .text-muted { color: var(--sys-top-header-secondary-color) !important; } #sys-top-header .text-white { color: var(--sys-top-header-white-color) !important; } #sys-top-header .text-black-50 { color: var(--sys-top-header-black-50) !important; } #sys-top-header .text-white-50 { color: var(--sys-top-header-white-50) !important; } #sys-top-header .bg-primary { background-color: var(--sys-top-header-primary-color) !important; } #sys-top-header .bg-secondary { background-color: var(--sys-top-header-secondary-color) !important; } #sys-top-header .bg-success { background-color: var(--sys-top-header-success-color) !important; } #sys-top-header .bg-danger { background-color: var(--sys-top-header-danger-color) !important; } #sys-top-header .bg-warning { background-color: var(--sys-top-header-warning-color) !important; } #sys-top-header .bg-info { background-color: var(--sys-top-header-info-color) !important; } #sys-top-header .bg-light { background-color: var(--sys-top-header-light-color) !important; } #sys-top-header .bg-dark { background-color: var(--sys-top-header-dark-color) !important; } #sys-top-header .bg-white { background-color: var(--sys-top-header-white-color) !important; } #sys-top-header .bg-transparent { background-color: transparent !important; } #sys-top-header .border-primary { border-color: var(--sys-top-header-primary-color) !important; } #sys-top-header .border-secondary { border-color: var(--sys-top-header-secondary-color) !important; } #sys-top-header .border-success { border-color: var(--sys-top-header-success-color) !important; } #sys-top-header .border-danger { border-color: var(--sys-top-header-danger-color) !important; } #sys-top-header .border-warning { border-color: var(--sys-top-header-warning-color) !important; } #sys-top-header .border-info { border-color: var(--sys-top-header-info-color) !important; } #sys-top-header .border-light { border-color: var(--sys-top-header-light-color) !important; } #sys-top-header .border-dark { border-color: var(--sys-top-header-dark-color) !important; } #sys-top-header .border-white { border-color: var(--sys-top-header-white-color) !important; } #sys-top-header .bg-gradient { background: linear-gradient(var(--sys-top-header-primary-color), var(--sys-top-header-secondary-color)) !important; } #sys-top-header .alert-primary { background-color: var(--sys-top-header-primary-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .alert-secondary { background-color: var(--sys-top-header-secondary-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .alert-success { background-color: var(--sys-top-header-success-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .alert-danger { background-color: var(--sys-top-header-danger-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .alert-warning { background-color: var(--sys-top-header-warning-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .alert-info { background-color: var(--sys-top-header-info-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .alert-light { background-color: var(--sys-top-header-light-color) !important; color: var(--sys-top-header-dark-color) !important; } #sys-top-header .alert-dark { background-color: var(--sys-top-header-dark-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .btn-primary { background-color: var(--sys-top-header-primary-color) !important; border-color: var(--sys-top-header-primary-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .btn-secondary { background-color: var(--sys-top-header-secondary-color) !important; border-color: var(--sys-top-header-secondary-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .btn-success { background-color: var(--sys-top-header-success-color) !important; border-color: var(--sys-top-header-success-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .btn-danger { background-color: var(--sys-top-header-danger-color) !important; border-color: var(--sys-top-header-danger-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .btn-warning { background-color: var(--sys-top-header-warning-color) !important; border-color: var(--sys-top-header-warning-color) !important; color: var(--sys-top-header-dark-color) !important; } #sys-top-header .btn-info { background-color: var(--sys-top-header-info-color) !important; border-color: var(--sys-top-header-info-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .btn-light { background-color: var(--sys-top-header-light-color) !important; border-color: var(--sys-top-header-light-color) !important; color: var(--sys-top-header-dark-color) !important; } #sys-top-header .btn-dark { background-color: var(--sys-top-header-dark-color) !important; border-color: var(--sys-top-header-dark-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .btn-outline-primary { background-color: transparent !important; border-color: var(--sys-top-header-primary-color) !important; color: var(--sys-top-header-primary-color) !important; } #sys-top-header .btn-outline-secondary { background-color: transparent !important; border-color: var(--sys-top-header-secondary-color) !important; color: var(--sys-top-header-secondary-color) !important; } #sys-top-header .btn-outline-success { background-color: transparent !important; border-color: var(--sys-top-header-success-color) !important; color: var(--sys-top-header-success-color) !important; } #sys-top-header .btn-outline-danger { background-color: transparent !important; border-color: var(--sys-top-header-danger-color) !important; color: var(--sys-top-header-danger-color) !important; } #sys-top-header .btn-outline-warning { background-color: transparent !important; border-color: var(--sys-top-header-warning-color) !important; color: var(--sys-top-header-warning-color) !important; } #sys-top-header .btn-outline-info { background-color: transparent !important; border-color: var(--sys-top-header-info-color) !important; color: var(--sys-top-header-info-color) !important; } #sys-top-header .btn-outline-light { background-color: transparent !important; border-color: var(--sys-top-header-light-color) !important; color: var(--sys-top-header-light-color) !important; } #sys-top-header .btn-outline-dark { background-color: transparent !important; border-color: var(--sys-top-header-dark-color) !important; color: var(--sys-top-header-dark-color) !important; } #sys-top-header .badge-primary { background-color: var(--sys-top-header-primary-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .badge-secondary { background-color: var(--sys-top-header-secondary-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .badge-success { background-color: var(--sys-top-header-success-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .badge-danger { background-color: var(--sys-top-header-danger-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .badge-warning { background-color: var(--sys-top-header-warning-color) !important; color: var(--sys-top-header-dark-color) !important; } #sys-top-header .badge-info { background-color: var(--sys-top-header-info-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .badge-light { background-color: var(--sys-top-header-light-color) !important; color: var(--sys-top-header-dark-color) !important; } #sys-top-header .badge-dark { background-color: var(--sys-top-header-dark-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .text-bg-primary { background-color: var(--sys-top-header-primary-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .text-bg-secondary { background-color: var(--sys-top-header-secondary-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .text-bg-success { background-color: var(--sys-top-header-success-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .text-bg-danger { background-color: var(--sys-top-header-danger-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .text-bg-warning { background-color: var(--sys-top-header-warning-color) !important; color: var(--sys-top-header-dark-color) !important; } #sys-top-header .text-bg-info { background-color: var(--sys-top-header-info-color) !important; color: var(--sys-top-header-white-color) !important; } #sys-top-header .text-bg-light { background-color: var(--sys-top-header-light-color) !important; color: var(--sys-top-header-dark-color) !important; } #sys-top-header .text-bg-dark { background-color: var(--sys-top-header-dark-color) !important; color: var(--sys-top-header-white-color) !important; } /* #content */ #content .text-primary { color: var(--sys-content-primary-color) !important; } #content .text-secondary { color: var(--sys-content-secondary-color) !important; } #content .text-success { color: var(--sys-content-success-color) !important; } #content .text-danger { color: var(--sys-content-danger-color) !important; } #content .text-warning { color: var(--sys-content-warning-color) !important; } #content .text-info { color: var(--sys-content-info-color) !important; } #content .text-light { color: var(--sys-content-light-color) !important; } #content .text-dark { color: var(--sys-content-dark-color) !important; } #content .text-muted { color: var(--sys-content-secondary-color) !important; } #content .text-white { color: var(--sys-content-white-color) !important; } #content .text-black-50 { color: var(--sys-content-black-50) !important; } #content .text-white-50 { color: var(--sys-content-white-50) !important; } #content .bg-primary { background-color: var(--sys-content-primary-color) !important; } #content .bg-secondary { background-color: var(--sys-content-secondary-color) !important; } #content .bg-success { background-color: var(--sys-content-success-color) !important; } #content .bg-danger { background-color: var(--sys-content-danger-color) !important; } #content .bg-warning { background-color: var(--sys-content-warning-color) !important; } #content .bg-info { background-color: var(--sys-content-info-color) !important; } #content .bg-light { background-color: var(--sys-content-light-color) !important; } #content .bg-dark { background-color: var(--sys-content-dark-color) !important; } #content .bg-white { background-color: var(--sys-content-white-color) !important; } #content .bg-transparent { background-color: transparent !important; } #content .border-primary { border-color: var(--sys-content-primary-color) !important; } #content .border-secondary { border-color: var(--sys-content-secondary-color) !important; } #content .border-success { border-color: var(--sys-content-success-color) !important; } #content .border-danger { border-color: var(--sys-content-danger-color) !important; } #content .border-warning { border-color: var(--sys-content-warning-color) !important; } #content .border-info { border-color: var(--sys-content-info-color) !important; } #content .border-light { border-color: var(--sys-content-light-color) !important; } #content .border-dark { border-color: var(--sys-content-dark-color) !important; } #content .border-white { border-color: var(--sys-content-white-color) !important; } #content .bg-gradient { background: linear-gradient(var(--sys-content-primary-color), var(--sys-content-secondary-color)) !important; } #content .alert-primary { background-color: var(--sys-content-primary-color) !important; color: var(--sys-content-white-color) !important; } #content .alert-secondary { background-color: var(--sys-content-secondary-color) !important; color: var(--sys-content-white-color) !important; } #content .alert-success { background-color: var(--sys-content-success-color) !important; color: var(--sys-content-white-color) !important; } #content .alert-danger { background-color: var(--sys-content-danger-color) !important; color: var(--sys-content-white-color) !important; } #content .alert-warning { background-color: var(--sys-content-warning-color) !important; color: var(--sys-content-dark-color) !important; } #content .alert-info { background-color: var(--sys-content-info-color) !important; color: var(--sys-content-white-color) !important; } #content .alert-light { background-color: var(--sys-content-light-color) !important; color: var(--sys-content-dark-color) !important; } #content .alert-dark { background-color: var(--sys-content-dark-color) !important; color: var(--sys-content-white-color) !important; } #content .btn-primary { background-color: var(--sys-content-primary-color) !important; border-color: var(--sys-content-primary-color) !important; color: var(--sys-content-white-color) !important; } #content .btn-secondary { background-color: var(--sys-content-secondary-color) !important; border-color: var(--sys-content-secondary-color) !important; color: var(--sys-content-white-color) !important; } #content .btn-success { background-color: var(--sys-content-success-color) !important; border-color: var(--sys-content-success-color) !important; color: var(--sys-content-white-color) !important; } #content .btn-danger { background-color: var(--sys-content-danger-color) !important; border-color: var(--sys-content-danger-color) !important; color: var(--sys-content-white-color) !important; } #content .btn-warning { background-color: var(--sys-content-warning-color) !important; border-color: var(--sys-content-warning-color) !important; color: var(--sys-content-dark-color) !important; } #content .btn-info { background-color: var(--sys-content-info-color) !important; border-color: var(--sys-content-info-color) !important; color: var(--sys-content-white-color) !important; } #content .btn-light { background-color: var(--sys-content-light-color) !important; border-color: var(--sys-content-light-color) !important; color: var(--sys-content-dark-color) !important; } #content .btn-dark { background-color: var(--sys-content-dark-color) !important; border-color: var(--sys-content-dark-color) !important; color: var(--sys-content-white-color) !important; } #content .btn-outline-primary { background-color: transparent !important; border-color: var(--sys-content-primary-color) !important; color: var(--sys-content-primary-color) !important; } #content .btn-outline-secondary { background-color: transparent !important; border-color: var(--sys-content-secondary-color) !important; color: var(--sys-content-secondary-color) !important; } #content .btn-outline-success { background-color: transparent !important; border-color: var(--sys-content-success-color) !important; color: var(--sys-content-success-color) !important; } #content .btn-outline-danger { background-color: transparent !important; border-color: var(--sys-content-danger-color) !important; color: var(--sys-content-danger-color) !important; } #content .btn-outline-warning { background-color: transparent !important; border-color: var(--sys-content-warning-color) !important; color: var(--sys-content-warning-color) !important; } #content .btn-outline-info { background-color: transparent !important; border-color: var(--sys-content-info-color) !important; color: var(--sys-content-info-color) !important; } #content .btn-outline-light { background-color: transparent !important; border-color: var(--sys-content-light-color) !important; color: var(--sys-content-light-color) !important; } #content .btn-outline-dark { background-color: transparent !important; border-color: var(--sys-content-dark-color) !important; color: var(--sys-content-dark-color) !important; } #content .badge-primary { background-color: var(--sys-content-primary-color) !important; color: var(--sys-content-white-color) !important; } #content .badge-secondary { background-color: var(--sys-content-secondary-color) !important; color: var(--sys-content-white-color) !important; } #content .badge-success { background-color: var(--sys-content-success-color) !important; color: var(--sys-content-white-color) !important; } #content .badge-danger { background-color: var(--sys-content-danger-color) !important; color: var(--sys-content-white-color) !important; } #content .badge-warning { background-color: var(--sys-content-warning-color) !important; color: var(--sys-content-dark-color) !important; } #content .badge-info { background-color: var(--sys-content-info-color) !important; color: var(--sys-content-white-color) !important; } #content .badge-light { background-color: var(--sys-content-light-color) !important; color: var(--sys-content-dark-color) !important; } #content .badge-dark { background-color: var(--sys-content-dark-color) !important; color: var(--sys-content-white-color) !important; } #content .text-bg-primary { background-color: var(--sys-content-primary-color) !important; color: var(--sys-content-white-color) !important; } #content .text-bg-secondary { background-color: var(--sys-content-secondary-color) !important; color: var(--sys-content-white-color) !important; } #content .text-bg-success { background-color: var(--sys-content-success-color) !important; color: var(--sys-content-white-color) !important; } #content .text-bg-danger { background-color: var(--sys-content-danger-color) !important; color: var(--sys-content-white-color) !important; } #content .text-bg-warning { background-color: var(--sys-content-warning-color) !important; color: var(--sys-content-dark-color) !important; } #content .text-bg-info { background-color: var(--sys-content-info-color) !important; color: var(--sys-content-white-color) !important; } #content .text-bg-light { background-color: var(--sys-content-light-color) !important; color: var(--sys-content-dark-color) !important; } #content .text-bg-dark { background-color: var(--sys-content-dark-color) !important; color: var(--sys-content-white-color) !important; } /* #sys-left-menu */ #sys-left-menu .text-primary { color: var(--sys-left-menu-primary-color) !important; } #sys-left-menu .text-secondary { color: var(--sys-left-menu-secondary-color) !important; } #sys-left-menu .text-success { color: var(--sys-left-menu-success-color) !important; } #sys-left-menu .text-danger { color: var(--sys-left-menu-danger-color) !important; } #sys-left-menu .text-warning { color: var(--sys-left-menu-warning-color) !important; } #sys-left-menu .text-info { color: var(--sys-left-menu-info-color) !important; } #sys-left-menu .text-light { color: var(--sys-left-menu-light-color) !important; } #sys-left-menu .text-dark { color: var(--sys-left-menu-dark-color) !important; } #sys-left-menu .text-muted { color: var(--sys-left-menu-secondary-color) !important; } #sys-left-menu .text-white { color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .text-black-50 { color: var(--sys-left-menu-black-50) !important; } #sys-left-menu .text-white-50 { color: var(--sys-left-menu-white-50) !important; } #sys-left-menu .bg-primary { background-color: var(--sys-left-menu-primary-color) !important; } #sys-left-menu .bg-secondary { background-color: var(--sys-left-menu-secondary-color) !important; } #sys-left-menu .bg-success { background-color: var(--sys-left-menu-success-color) !important; } #sys-left-menu .bg-danger { background-color: var(--sys-left-menu-danger-color) !important; } #sys-left-menu .bg-warning { background-color: var(--sys-left-menu-warning-color) !important; } #sys-left-menu .bg-info { background-color: var(--sys-left-menu-info-color) !important; } #sys-left-menu .bg-light { background-color: var(--sys-left-menu-light-color) !important; } #sys-left-menu .bg-dark { background-color: var(--sys-left-menu-dark-color) !important; } #sys-left-menu .bg-white { background-color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .bg-transparent { background-color: transparent !important; } #sys-left-menu .border-primary { border-color: var(--sys-left-menu-primary-color) !important; } #sys-left-menu .border-secondary { border-color: var(--sys-left-menu-secondary-color) !important; } #sys-left-menu .border-success { border-color: var(--sys-left-menu-success-color) !important; } #sys-left-menu .border-danger { border-color: var(--sys-left-menu-danger-color) !important; } #sys-left-menu .border-warning { border-color: var(--sys-left-menu-warning-color) !important; } #sys-left-menu .border-info { border-color: var(--sys-left-menu-info-color) !important; } #sys-left-menu .border-light { border-color: var(--sys-left-menu-light-color) !important; } #sys-left-menu .border-dark { border-color: var(--sys-left-menu-dark-color) !important; } #sys-left-menu .border-white { border-color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .bg-gradient { background: linear-gradient(var(--sys-left-menu-primary-color), var(--sys-left-menu-secondary-color)) !important; } #sys-left-menu .alert-primary { background-color: var(--sys-left-menu-primary-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .alert-secondary { background-color: var(--sys-left-menu-secondary-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .alert-success { background-color: var(--sys-left-menu-success-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .alert-danger { background-color: var(--sys-left-menu-danger-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .alert-warning { background-color: var(--sys-left-menu-warning-color) !important; color: var(--sys-left-menu-dark-color) !important; } #sys-left-menu .alert-info { background-color: var(--sys-left-menu-info-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .alert-light { background-color: var(--sys-left-menu-light-color) !important; color: var(--sys-left-menu-dark-color) !important; } #sys-left-menu .alert-dark { background-color: var(--sys-left-menu-dark-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .btn-primary { background-color: var(--sys-left-menu-primary-color) !important; border-color: var(--sys-left-menu-primary-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .btn-secondary { background-color: var(--sys-left-menu-secondary-color) !important; border-color: var(--sys-left-menu-secondary-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .btn-success { background-color: var(--sys-left-menu-success-color) !important; border-color: var(--sys-left-menu-success-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .btn-danger { background-color: var(--sys-left-menu-danger-color) !important; border-color: var(--sys-left-menu-danger-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .btn-warning { background-color: var(--sys-left-menu-warning-color) !important; border-color: var(--sys-left-menu-warning-color) !important; color: var(--sys-left-menu-dark-color) !important; } #sys-left-menu .btn-info { background-color: var(--sys-left-menu-info-color) !important; border-color: var(--sys-left-menu-info-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .btn-light { background-color: var(--sys-left-menu-light-color) !important; border-color: var(--sys-left-menu-light-color) !important; color: var(--sys-left-menu-dark-color) !important; } #sys-left-menu .btn-dark { background-color: var(--sys-left-menu-dark-color) !important; border-color: var(--sys-left-menu-dark-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .btn-outline-primary { background-color: transparent !important; border-color: var(--sys-left-menu-primary-color) !important; color: var(--sys-left-menu-primary-color) !important; } #sys-left-menu .btn-outline-secondary { background-color: transparent !important; border-color: var(--sys-left-menu-secondary-color) !important; color: var(--sys-left-menu-secondary-color) !important; } #sys-left-menu .btn-outline-success { background-color: transparent !important; border-color: var(--sys-left-menu-success-color) !important; color: var(--sys-left-menu-success-color) !important; } #sys-left-menu .btn-outline-danger { background-color: transparent !important; border-color: var(--sys-left-menu-danger-color) !important; color: var(--sys-left-menu-danger-color) !important; } #sys-left-menu .btn-outline-warning { background-color: transparent !important; border-color: var(--sys-left-menu-warning-color) !important; color: var(--sys-left-menu-warning-color) !important; } #sys-left-menu .btn-outline-info { background-color: transparent !important; border-color: var(--sys-left-menu-info-color) !important; color: var(--sys-left-menu-info-color) !important; } #sys-left-menu .btn-outline-light { background-color: transparent !important; border-color: var(--sys-left-menu-light-color) !important; color: var(--sys-left-menu-light-color) !important; } #sys-left-menu .btn-outline-dark { background-color: transparent !important; border-color: var(--sys-left-menu-dark-color) !important; color: var(--sys-left-menu-dark-color) !important; } #sys-left-menu .badge-primary { background-color: var(--sys-left-menu-primary-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .badge-secondary { background-color: var(--sys-left-menu-secondary-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .badge-success { background-color: var(--sys-left-menu-success-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .badge-danger { background-color: var(--sys-left-menu-danger-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .badge-warning { background-color: var(--sys-left-menu-warning-color) !important; color: var(--sys-left-menu-dark-color) !important; } #sys-left-menu .badge-info { background-color: var(--sys-left-menu-info-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .badge-light { background-color: var(--sys-left-menu-light-color) !important; color: var(--sys-left-menu-dark-color) !important; } #sys-left-menu .badge-dark { background-color: var(--sys-left-menu-dark-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .text-bg-primary { background-color: var(--sys-left-menu-primary-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .text-bg-secondary { background-color: var(--sys-left-menu-secondary-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .text-bg-success { background-color: var(--sys-left-menu-success-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .text-bg-danger { background-color: var(--sys-left-menu-danger-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .text-bg-warning { background-color: var(--sys-left-menu-warning-color) !important; color: var(--sys-left-menu-dark-color) !important; } #sys-left-menu .text-bg-info { background-color: var(--sys-left-menu-info-color) !important; color: var(--sys-left-menu-white-color) !important; } #sys-left-menu .text-bg-light { background-color: var(--sys-left-menu-light-color) !important; color: var(--sys-left-menu-dark-color) !important; } #sys-left-menu .text-bg-dark { background-color: var(--sys-left-menu-dark-color) !important; color: var(--sys-left-menu-white-color) !important; } /* Indigo Replacements in Aside */ #sys-left-menu .text-indigo-100 { color: var(--sys-left-menu-text-theme-100) !important; } #sys-left-menu .text-indigo-200 { color: var(--sys-left-menu-text-theme-200) !important; } #sys-left-menu .text-indigo-300 { color: var(--sys-left-menu-text-theme-300) !important; } #sys-left-menu .text-indigo-400 { color: var(--sys-left-menu-text-theme-400) !important; } #sys-left-menu .text-indigo-500 { color: var(--sys-left-menu-text-theme-500) !important; } #sys-left-menu .text-indigo-700 { color: var(--sys-left-menu-text-theme-700) !important; } #sys-left-menu .bg-indigo-500 { background-color: var(--sys-left-menu-text-theme-500) !important; } #sys-left-menu .hover\:text-indigo-600:hover { color: var(--sys-left-menu-text-theme-600) !important; } #sys-left-menu .hover\:bg-indigo-500:hover { background-color: var(--sys-left-menu-text-theme-500) !important; } #sys-left-menu .border-indigo-500 { border-color: var(--sys-left-menu-text-theme-500) !important; } #sys-left-menu .bg-indigo-100 { background-color: var(--sys-left-menu-text-theme-100) !important; } /* Aside Styles */ #sys-left-menu { background-color: var(--sys-left-menu-bg-color); color: var(--sys-left-menu-text-color); } #sys-left-menu .text-primary { color: var(--sys-left-menu-text-color) !important; } #sys-left-menu .text-primary-hover:hover { color: var(--sys-left-menu-hover-bg-color) !important; } #sys-left-menu .bg-primary { background-color: var(--sys-left-menu-bg-color) !important; } #sys-left-menu .bg-primary-hover:hover { background-color: var(--sys-left-menu-hover-bg-color) !important; } #sys-left-menu .border-primary { border-color: var(--sys-left-menu-border-color) !important; } #sys-left-menu .border-primary-hover:hover { border-color: var(--sys-left-menu-link-hover-color) !important; } #sys-left-menu .btn-primary { background-color: var(--sys-left-menu-link-color) !important; border-color: var(--sys-left-menu-link-hover-color) !important; color: var(--sys-left-menu-text-color) !important; } #sys-left-menu .btn-primary-hover:hover { background-color: var(--sys-left-menu-hover-bg-color) !important; border-color: var(--sys-left-menu-hover-bg-color) !important; color: var(--sys-left-menu-text-color) !important; } #sys-left-menu .btn-outline-primary { color: var(--sys-left-menu-link-color) !important; border-color: var(--sys-left-menu-link-hover-color) !important; } #sys-left-menu .btn-outline-primary-hover:hover { color: var(--sys-left-menu-text-color) !important; background-color: var(--sys-left-menu-link-hover-color) !important; border-color: var(--sys-left-menu-link-hover-color) !important; } #sys-left-menu .alert-primary { background-color: var(--sys-left-menu-bg-color) !important; border-color: var(--sys-left-menu-border-color) !important; color: var(--sys-left-menu-text-color) !important; } #sys-left-menu .badge-primary { background-color: var(--sys-left-menu-bg-color) !important; color: var(--sys-left-menu-text-color) !important; } #sys-left-menu .table-primary { background-color: var(--sys-left-menu-bg-color) !important; } #sys-left-menu .list-group-item-primary { background-color: var(--sys-left-menu-bg-color) !important; } #sys-left-menu .progress-bar-primary { background-color: var(--sys-left-menu-link-color) !important; } #sys-left-menu .nav-link-primary { color: var(--sys-left-menu-link-color) !important; } #sys-left-menu .pagination-primary .page-link { color: var(--sys-left-menu-link-color) !important; } #sys-left-menu .breadcrumb-item-primary { color: var(--sys-left-menu-link-color) !important; } #sys-left-menu .form-control-primary { border-color: var(--sys-left-menu-border-color) !important; } #sys-left-menu .custom-control-input-primary:checked ~ .custom-control-label::before { background-color: var(--sys-left-menu-bg-color) !important; border-color: var(--sys-left-menu-border-color) !important; } #sys-left-menu .custom-checkbox-primary .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sys-left-menu-bg-color) !important; } #sys-left-menu .custom-radio-primary .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sys-left-menu-bg-color) !important; } #sys-left-menu .custom-select-primary:focus, #sys-left-menu .form-check-input-primary:checked ~ .form-check-label::before { border-color: var(--sys-left-menu-border-color) !important; box-shadow: 0 0 0 0.2rem rgba(0, 166, 251, 0.25) !important; } #sys-left-menu .input-group-text-primary { background-color: var(--sys-left-menu-bg-color) !important; border-color: var(--sys-left-menu-border-color) !important; color: var(--sys-left-menu-text-color) !important; } /* Modal adjustments in Aside */ #sys-left-menu .modal-header.bg-primary { background-color: var(--sys-left-menu-bg-color) !important; } #sys-left-menu .modal-header .text-primary { color: var(--sys-left-menu-text-color) !important; } #sys-left-menu .modal-footer .btn-primary { background-color: var(--sys-left-menu-link-color) !important; border-color: var(--sys-left-menu-link-hover-color) !important; color: var(--sys-left-menu-text-color) !important; } #sys-left-menu .modal-footer .btn-outline-primary { color: var(--sys-left-menu-link-color) !important; border-color: var(--sys-left-menu-link-hover-color) !important; } /* Links and Navigation Adjustments in Aside */ #sys-left-menu a:hover, #sys-left-menu a:active { color: var(--sys-left-menu-link-hover-color) !important; } #sys-left-menu a:hover i, #sys-left-menu a:active i { color: var(--sys-left-menu-highlight-bg) !important; } #sys-left-menu .nav-link.active { color: var(--sys-left-menu-link-color) !important; text-decoration-color: var(--sys-left-menu-text-color); } #sys-left-menu .nav-link.active:hover, #sys-left-menu .nav-link.active:focus { color: var(--sys-left-menu-link-color) !important; } #sys-left-menu .nav-item.active .pro-nav-tabs { text-decoration-color: var(--sys-left-menu-text-color) !important; border-bottom-color: var(--sys-left-menu-text-color); } #sys-left-menu .nav-link.active i, #sys-left-menu .nav-link.active:hover i, #sys-left-menu .nav-link.active:focus i { color: var(--sys-left-menu-link-color) !important; } /* Ribbon Styles in Aside */ #sys-left-menu .ribbon.info span { background: var(--sys-left-menu-info-bg); } #sys-left-menu .ribbon.info span:before { border-left: 3px solid var(--sys-left-menu-info-bg) !important; border-top: 3px solid var(--sys-left-menu-info-bg) !important; } #sys-left-menu .ribbon.info span:after { border-right: 3px solid var(--sys-left-menu-info-bg) !important; border-top: 3px solid var(--sys-left-menu-info-bg) !important; } /* Additional Class Adjustments in Aside */ #sys-left-menu .bg-dark { background-color: var(--sys-left-menu-dark-bg) !important; color: var(--sys-left-menu-dark-text) !important; } #sys-left-menu .navbar { background-color: var(--sys-left-menu-dark-bg) !important; color: var(--sys-left-menu-dark-text) !important; } #sys-left-menu .navbar-fixed-top-xs { background-color: var(--sys-left-menu-dark-bg) !important; color: var(--sys-left-menu-dark-text) !important; } #sys-left-menu .navbar-header { background-color: var(--sys-left-menu-dark-bg) !important; color: var(--sys-left-menu-dark-text) !important; } #sys-left-menu .navbar-brand { color: var(--sys-left-menu-dark-text) !important; } #sys-left-menu nav.navbar-nav.hidden-xs { background-color: var(--sys-left-menu-dark-bg) !important; color: var(--sys-left-menu-dark-text) !important; } #sys-left-menu .navbar-nav .nav-link { color: var(--sys-left-menu-dark-text) !important; } /**SINTONIA FINA*/ #sys-left-menu .nav.lt { background-color: var(--sys-left-menu-bg-color) !important; color: var(--sys-left-menu-text-color) !important; } #sys-left-menu .nav.lt li { border-bottom: 1px solid var(--sys-left-menu-border-color) !important; } #sys-left-menu .nav.lt a { color: var(--sys-left-menu-link-color) !important; text-decoration: none !important; display: flex !important; align-items: center !important; padding: 10px !important; transition: background-color 0.3s, color 0.3s !important; } #sys-left-menu .nav.lt a:hover { background-color: var(--sys-left-menu-hover-bg-color) !important; color: var(--sys-left-menu-link-hover-color) !important; } #sys-left-menu .nav.lt i, #sys-left-menu .nav.lt span { margin-right: 8px !important; transition: color 0.3s !important; color: var(--sys-left-menu-text-color) !important; } /* Alternância de cores para criar variação visual */ /*#sys-left-menu .nav.lt li:nth-child(odd) a { color: var(--sys-left-menu-link-color) !important; } #sys-left-menu .nav.lt li:nth-child(even) a { color: var(--sys-left-menu-text-theme-200) !important; !* Usando uma variação mais clara para contraste *! }*/ /*#sys-left-menu .nav.lt li:nth-child(odd) i, #sys-left-menu .nav.lt li:nth-child(odd) span { color: var(--sys-left-menu-text-color) !important; }*/ /*#sys-left-menu .nav.lt li:nth-child(even) i, #sys-left-menu .nav.lt li:nth-child(even) span { color: var(--sys-left-menu-text-theme-300) !important; !* Usando uma variação mais clara para contraste *! }*/ /* Para destacar o item ativo */ #sys-left-menu .nav.lt .active > a { background-color: var(--sys-left-menu-active-tab-bg) !important; color: var(--sys-left-menu-dark-text) !important; } #sys-left-menu .nav.lt .active > a i { color: var(--sys-left-menu-dark-text) !important; } /* Set the SVG color using currentColor */ #sys-left-menu .btn.bg-transparent .svg-inline--fa path { fill: var(--sys-left-menu-primary-color) !important; /* Set your desired color */ } #sys-left-menu .icon, #sys-left-menu .fa, #sys-left-menu .fas { color: var(--sys-content-text-theme-100) !important; /* Use your desired color variable */ } /* Apply to all text within the #sys-left-menu */ #sys-left-menu, #sys-left-menu a, #sys-left-menu .nav > li > a, #sys-left-menu .nav-primary, #sys-left-menu .nav-primary li, #sys-left-menu .nav-primary .nav-w-children > a span, #sys-left-menu .nav-primary .nav-w-children > a .icon { color: var(--sys-content-text-theme-100) !important; /* Use your desired text color variable */ } /* Dropdown Menu Styling */ #sys-left-menu .dropdown-menu { background-color: var(--sys-left-menu-bg-color) !important; border-color: var(--sys-left-menu-border-color) !important; color: var(--sys-left-menu-text-color) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Sombra suave */ border-radius: 4px; /* Bordas arredondadas */ } /* Links dentro do Dropdown Menu */ #sys-left-menu .dropdown-menu a { color: var(--sys-left-menu-link-color) !important; padding: 10px 15px; display: block; text-decoration: none; } /* Hover State para Links no Dropdown */ #sys-left-menu .dropdown-menu a:hover { background-color: var(--sys-left-menu-hover-bg-color) !important; color: var(--sys-left-menu-link-hover-color) !important; } /* Estilização para o item ativo */ #sys-left-menu .dropdown-menu li.active a { background-color: var(--sys-left-menu-active-tab-bg) !important; color: var(--sys-left-menu-text-color) !important; } /* Arrow do Dropdown */ #sys-left-menu .dropdown-menu .arrow { border-bottom-color: var(--sys-left-menu-bg-color) !important; border-top-color: var(--sys-left-menu-bg-color) !important; } /* Ajuste para as bordas e sombras */ #sys-left-menu .dropdown-menu { border: 1px solid var(--sys-left-menu-border-color) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; border-radius: 4px !important; } /* Indigo Replacements in Header */ #sys-top-header .text-indigo-100 { color: var(--sys-top-header-text-theme-100) !important; } #sys-top-header .text-indigo-200 { color: var(--sys-top-header-text-theme-200) !important; } #sys-top-header .text-indigo-300 { color: var(--sys-top-header-text-theme-300) !important; } #sys-top-header .text-indigo-400 { color: var(--sys-top-header-text-theme-400) !important; } #sys-top-header .text-indigo-500 { color: var(--sys-top-header-text-theme-500) !important; } #sys-top-header .text-indigo-700 { color: var(--sys-top-header-text-theme-700) !important; } #sys-top-header .bg-indigo-500 { background-color: var(--sys-top-header-text-theme-500) !important; } #sys-top-header .hover\:text-indigo-600:hover { color: var(--sys-top-header-text-theme-600) !important; } #sys-top-header .hover\:bg-indigo-500:hover { background-color: var(--sys-top-header-text-theme-500) !important; } #sys-top-header .border-indigo-500 { border-color: var(--sys-top-header-text-theme-500) !important; } #sys-top-header .bg-indigo-100 { background-color: var(--sys-top-header-text-theme-100) !important; } /* Indigo Replacements in Content */ #content .text-indigo-100 { color: var(--sys-content-text-theme-100) !important; } #content .text-indigo-200 { color: var(--sys-content-text-theme-200) !important; } #content .text-indigo-300 { color: var(--sys-content-text-theme-300) !important; } #content .text-indigo-400 { color: var(--sys-content-text-theme-400) !important; } #content .text-indigo-500 { color: var(--sys-content-text-theme-500) !important; } #content .text-indigo-700 { color: var(--sys-content-text-theme-700) !important; } #content .bg-indigo-500 { background-color: var(--sys-content-text-theme-500) !important; } #content .hover\:text-indigo-600:hover { color: var(--sys-content-text-theme-600) !important; } #content .hover\:bg-indigo-500:hover { background-color: var(--sys-content-text-theme-500) !important; } #content .border-indigo-500 { border-color: var(--sys-content-text-theme-500) !important; } #content .bg-indigo-100 { background-color: var(--sys-content-text-theme-100) !important; } /* Header Styles */ #sys-top-header { background-color: var(--sys-top-header-bg-color) !important; color: var(--sys-top-header-text-color) !important; } #sys-top-header .container-fluid { background-color: var(--sys-top-header-bg-color) !important; color: var(--sys-top-header-text-color) !important; } #sys-top-header .text-primary { color: var(--sys-top-header-text-color) !important; } #sys-top-header .text-primary-hover:hover { color: var(--sys-top-header-link-hover-color) !important; } #sys-top-header .bg-primary { background-color: var(--sys-top-header-bg-color) !important; } #sys-top-header .bg-primary-hover:hover { background-color: var(--sys-top-header-hover-bg-color) !important; } #sys-top-header .border-primary { border-color: var(--sys-top-header-border-color) !important; } #sys-top-header .border-primary-hover:hover { border-color: var(--sys-top-header-link-hover-color) !important; } #sys-top-header .btn-primary { background-color: var(--sys-top-header-link-color) !important; border-color: var(--sys-top-header-link-hover-color) !important; color: var(--sys-top-header-text-color) !important; } #sys-top-header .btn-primary-hover:hover { background-color: var(--sys-top-header-hover-bg-color) !important; border-color: var(--sys-top-header-hover-bg-color) !important; color: var(--sys-top-header-text-color) !important; } #sys-top-header .btn-outline-primary { color: var(--sys-top-header-link-color) !important; border-color: var(--sys-top-header-link-hover-color) !important; } #sys-top-header .btn-outline-primary-hover:hover { color: var(--sys-top-header-text-color) !important; background-color: var(--sys-top-header-link-hover-color) !important; border-color: var(--sys-top-header-link-hover-color) !important; } #sys-top-header .alert-primary { background-color: var(--sys-top-header-bg-color) !important; border-color: var(--sys-top-header-border-color) !important; color: var(--sys-top-header-text-color) !important; } #sys-top-header .badge-primary { background-color: var(--sys-top-header-bg-color) !important; color: var(--sys-top-header-text-color) !important; } #sys-top-header .table-primary { background-color: var(--sys-top-header-bg-color) !important; } #sys-top-header .list-group-item-primary { background-color: var(--sys-top-header-bg-color) !important; } #sys-top-header .progress-bar-primary { background-color: var(--sys-top-header-link-color) !important; } #sys-top-header .nav-link-primary { color: var(--sys-top-header-link-color) !important; } #sys-top-header .pagination-primary .page-link { color: var(--sys-top-header-link-color) !important; } #sys-top-header .breadcrumb-item-primary { color: var(--sys-top-header-link-color) !important; } #sys-top-header .form-control-primary { border-color: var(--sys-top-header-border-color) !important; } #sys-top-header .custom-control-input-primary:checked ~ .custom-control-label::before { background-color: var(--sys-top-header-bg-color) !important; border-color: var(--sys-top-header-border-color) !important; } #sys-top-header .custom-checkbox-primary .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sys-top-header-bg-color) !important; } #sys-top-header .custom-radio-primary .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sys-top-header-bg-color) !important; } #sys-top-header .custom-select-primary:focus, #sys-top-header .form-check-input-primary:checked ~ .form-check-label::before { border-color: var(--sys-top-header-border-color) !important; box-shadow: 0 0 0 0.2rem rgba(0, 166, 251, 0.25) !important; } #sys-top-header .input-group-text-primary { background-color: var(--sys-top-header-bg-color) !important; border-color: var(--sys-top-header-border-color) !important; color: var(--sys-top-header-text-color) !important; } /* Modal adjustments in Header */ #sys-top-header .modal-header.bg-primary { background-color: var(--sys-top-header-bg-color) !important; } #sys-top-header .modal-header .text-primary { color: var(--sys-top-header-text-color) !important; } #sys-top-header .modal-footer .btn-primary { background-color: var(--sys-top-header-link-color) !important; border-color: var(--sys-top-header-link-hover-color) !important; color: var(--sys-top-header-text-color) !important; } #sys-top-header .modal-footer .btn-outline-primary { color: var(--sys-top-header-link-color) !important; border-color: var(--sys-top-header-link-hover-color) !important; } /* Links and Navigation Adjustments in Header */ #sys-top-header a:hover, #sys-top-header a:active { color: var(--sys-top-header-link-hover-color) !important; } #sys-top-header .dropdown { background-color: var(--sys-top-header-bg-color) !important; color: var(--sys-top-header-text-color) !important; } #sys-top-header .dropdown-toggle { background-color: var(--sys-top-header-bg-color) !important; color: var(--sys-top-header-text-color) !important; } #sys-top-header .dropdown-menu { background-color: var(--sys-top-header-bg-color) !important; color: var(--sys-top-header-text-color) !important; } #sys-top-header .dropdown-toggle:hover { background-color: var(--sys-top-header-info-bg) !important; color: var(--sys-top-header-text-color) !important; } #sys-top-header .dropdown:hover { background-color: var(--sys-top-header-warning-color) !important; color: var(--sys-top-header-text-color) !important; } #sys-top-header a:hover i, #sys-top-header a:active i { color: var(--sys-top-header-warning-color) !important; } /*#sys-top-header a { color: var(--sys-top-header-link-color) !important; }*/ /* #sys-top-header a:hover { color: var(--sys-top-header-link-hover-color) !important; background-color: var(--sys-top-header-link-color) !important; } */ /* #sys-top-header .nav-user li a { color: var(--sys-top-header-link-color) !important; } */ #sys-top-header .nav-user li a:hover { color: var(--sys-top-header-warning-color) !important; } #sys-top-header .notif a { color: var(--sys-top-header-link-color) !important; fill: var(--sys-top-header-link-color) !important; } #sys-top-header .notif a:hover { color: var(--sys-top-header-link-hover-color) !important; fill: var(--sys-top-header-link-hover-color) !important; } #sys-top-header .nav-link.active { color: var(--sys-top-header-link-color) !important; text-decoration-color: var(--sys-top-header-text-color) !important; } #sys-top-header .nav-link.active:hover, #sys-top-header .nav-link.active:focus { color: var(--sys-top-header-link-color) !important; } #sys-top-header .nav-item.active .pro-nav-tabs { text-decoration-color: var(--sys-top-header-text-color) !important; border-bottom-color: var(--sys-top-header-text-color) !important; } #sys-top-header .nav-link.active i, #sys-top-header .nav-link.active:hover i, #sys-top-header .nav-link.active:focus i { color: var(--sys-top-header-link-color) !important; } /* Ribbon Styles in Header */ #sys-top-header .ribbon.info span { background: var(--sys-top-header-info-bg) !important; } #sys-top-header .ribbon.info span:before { border-left: 3px solid var(--sys-top-header-info-bg) !important; border-top: 3px solid var(--sys-top-header-info-bg) !important; } #sys-top-header .ribbon.info span:after { border-right: 3px solid var(--sys-top-header-info-bg) !important; border-top: 3px solid var(--sys-top-header-info-bg) !important; } /* Additional Class Adjustments in Header */ #sys-top-header .bg-dark { background-color: rgba(var(--sys-top-header-dark-bg), 0.3) !important; /* 0.3 for 30% opacity, even more transparent */ color: var(--sys-top-header-dark-text) !important; } #sys-top-header .navbar { background-color: rgba(var(--sys-top-header-dark-bg), 0.3) !important; /* 0.3 for 30% opacity, even more transparent */ color: var(--sys-top-header-dark-text) !important; } #sys-top-header .navbar-fixed-top-xs { background-color: rgba(var(--sys-top-header-dark-bg), 0.3) !important; /* 0.3 for 30% opacity, even more transparent */ color: var(--sys-top-header-dark-text) !important; } #sys-top-header .navbar-header { background-color: rgba(var(--sys-top-header-dark-bg), 0.3) !important; /* 0.3 for 30% opacity, even more transparent */ color: var(--sys-top-header-dark-text) !important; } #sys-top-header .navbar-brand { color: var(--sys-top-header-dark-text) !important; } #sys-top-header nav.navbar-nav.hidden-xs { background-color: rgba(var(--sys-top-header-dark-bg), 0.3) !important; /* 0.3 for 30% opacity, even more transparent */ color: var(--sys-top-header-dark-text) !important; } #sys-top-header .navbar-nav .nav-link { color: var(--sys-top-header-dark-text) !important; } /* Content Styles */ #content { background-color: var(--sys-content-bg-color) !important; color: var(--sys-content-text-color) !important; } #content .text-primary { color: var(--sys-content-text-color) !important; } #content .text-primary-hover:hover { color: var(--sys-content-hover-bg-color) !important; } #content .bg-primary { background-color: var(--sys-content-bg-color) !important; } #content .bg-primary-hover:hover { background-color: var(--sys-content-hover-bg-color) !important; } #content .border-primary { border-color: var(--sys-content-border-color) !important; } #content .border-primary-hover:hover { border-color: var(--sys-content-link-hover-color) !important; } /* Styling for primary buttons with either .btn or .btn-primary */ #content .btn-primary, #content .btn.btn-primary { background-color: var(--sys-content-link-color) !important; border-color: var(--sys-content-link-hover-color) !important; color: var(--sys-content-dark-text) !important; transition: background-color 0.3s, border-color 0.3s, color 0.3s; } #content .btn-primary:hover, #content .btn.btn-primary:hover, #content .btn-primary:focus, #content .btn.btn-primary:focus, #content .btn-primary:active, #content .btn.btn-primary:active { background-color: var(--sys-content-hover-bg) !important; border-color: var(--sys-content-link-hover-color) !important; color: var(--sys-content-text-color) !important; } #content .btn-primary:disabled, #content .btn .btn-primary:disabled, #content .btn-primary[disabled], #content .btn .btn-primary[disabled] { background-color: var(--sys-content-neutral-bg) !important; border-color: var(--sys-content-border-color) !important; color: var(--sys-content-text-theme-300) !important; cursor: not-allowed !important; } #content .btn-outline-primary { color: var(--sys-content-link-color) !important; border-color: var(--sys-content-link-hover-color) !important; } #content .btn-outline-primary-hover:hover { color: var(--sys-content-text-color) !important; background-color: var(--sys-content-link-hover-color) !important; border-color: var(--sys-content-link-hover-color) !important; } #content .alert-primary { background-color: var(--sys-content-bg-color) !important; border-color: var(--sys-content-border-color) !important; color: var(--sys-content-text-color) !important; } #content .badge-primary { background-color: var(--sys-content-bg-color) !important; color: var(--sys-content-text-color) !important; } #content .table-primary { background-color: var(--sys-content-bg-color) !important; } #content .list-group-item-primary { background-color: var(--sys-content-bg-color) !important; } #content .progress-bar-primary { background-color: var(--sys-content-link-color) !important; } #content .nav-link-primary { color: var(--sys-content-link-color) !important; } #content .pagination-primary .page-link { color: var(--sys-content-link-color) !important; } #content .breadcrumb-item-primary { color: var(--sys-content-link-color) !important; } #content .form-control-primary { border-color: var(--sys-content-border-color) !important; } #content .custom-control-input-primary:checked ~ .custom-control-label::before { background-color: var(--sys-content-bg-color) !important; border-color: var(--sys-content-border-color) !important; } #content .custom-checkbox-primary .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sys-content-bg-color) !important; } #content .custom-radio-primary .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sys-content-bg-color) !important; } #content .custom-select-primary:focus, #content .form-check-input-primary:checked ~ .form-check-label::before { border-color: var(--sys-content-border-color) !important; box-shadow: 0 0 0 0.2rem rgba(0, 166, 251, 0.25) !important; } #content .input-group-text-primary { background-color: var(--sys-content-bg-color) !important; border-color: var(--sys-content-border-color) !important; color: var(--sys-content-text-color) !important; } /* Modal adjustments in Content */ #content .modal-header.bg-primary { background-color: var(--sys-content-bg-color) !important; } #content .modal-header .text-primary { color: var(--sys-content-text-color) !important; } #content .modal-footer .btn-primary { background-color: var(--sys-content-link-color) !important; border-color: var(--sys-content-link-hover-color) !important; color: var(--sys-content-text-color) !important; } #content .modal-footer .btn-outline-primary { color: var(--sys-content-link-color) !important; border-color: var(--sys-content-link-hover-color) !important; } /* Links and Navigation Adjustments in Content */ #content a:hover, #content a:active { color: var(--sys-content-link-hover-color) !important; } #content a:hover i, #content a:active i { color: var(--sys-content-highlight-bg) !important; } #content .nav-link.active { color: var(--sys-content-link-color) !important; text-decoration-color: var(--sys-content-text-color); } #content .nav-link.active:hover, #content .nav-link.active:focus { color: var(--sys-content-link-color) !important; } #content .nav-item.active .pro-nav-tabs { text-decoration-color: var(--sys-content-text-color) !important; border-bottom-color: var(--sys-content-text-color); } #content .nav-link.active i, #content .nav-link.active:hover i, #content .nav-link.active:focus i { color: var(--sys-content-link-color) !important; } /* Ribbon Styles in Content */ #content .ribbon.info span { background: var(--sys-content-link-color); } #content .ribbon.info span:before { border-left: 3px solid var(--sys-content-info-bg) !important; border-top: 3px solid var(--sys-content-info-bg) !important; } #content .ribbon.info span:after { border-right: 3px solid var(--sys-content-info-bg) !important; border-top: 3px solid var(--sys-content-info-bg) !important; } /* Additional Class Adjustments in Content */ #content .bg-dark { background-color: var(--sys-content-dark-bg) !important; color: var(--sys-content-dark-text) !important; } #content .navbar { background-color: var(--sys-content-dark-bg) !important; color: var(--sys-content-dark-text) !important; } #content .navbar-fixed-top-xs { background-color: var(--sys-content-dark-bg) !important; color: var(--sys-content-dark-text) !important; } #content .navbar-header { background-color: var(--sys-content-dark-bg) !important; color: var(--sys-content-dark-text) !important; } #content .navbar-brand { color: var(--sys-content-dark-text) !important; } #content nav.navbar-nav.hidden-xs { background-color: var(--sys-content-dark-bg) !important; color: var(--sys-content-dark-text) !important; } #content .navbar-nav .nav-link { color: var(--sys-content-dark-text) !important; } #content #todolist { background-color: var(--sys-content-bg-color) !important; } #content .nav-user .notif { color: var(--sys-content-text-color) !important; } #content .dropdown-toggle { color: var(--sys-content-text-color) !important; } #content .badge-primary { background-color: var(--sys-content-bg-color) !important; color: var(--sys-content-text-color) !important; } #content .up { background-color: var(--sys-content-bg-color) !important; color: var(--sys-content-text-color) !important; } #content .btn { color: var(--sys-content-link-color) !important; border-color: var(--sys-content-border-color) !important; } #content .btn-link { color: var(--sys-content-link-color) !important; border-color: var(--sys-content-border-color) !important; } #content .btn:hover, #content .btn-link:hover { background-color: var(--sys-content-hover-bg) !important; } #content .nav-user { background-color: var(--sys-content-bg-color) !important; color: var(--sys-content-text-color) !important; } #content .nav-z { background-color: var(--sys-content-bg-color) !important; color: var(--sys-content-text-color) !important; } #content .nav { background-color: var(--sys-content-dark-bg) !important; color: var(--sys-content-dark-text) !important; } #content .dropdown { background-color: var(--sys-content-bg-color) !important; color: var(--sys-content-text-color) !important; } #content .dropdown-toggle { background-color: var(--sys-content-bg-color) !important; color: var(--sys-content-text-color) !important; } #content .dropdown-menu { background-color: var(--sys-content-bg-color) !important; color: var(--sys-content-text-color) !important; } #content .avatar, #content .thumb-sm, #content .img-circle { border-color: var(--sys-content-highlight-bg) !important; } #content .divider { border-color: var(--sys-content-highlight-bg) !important; } #content .dropdown-toggle:hover { background-color: var(--sys-content-hover-bg) !important; color: var(--sys-content-text-color) !important; } /* Styling for dropdown items and icons on hover */ /*#content .dropdown-menu .dropdown-item:hover { background-color: var(--sys-content-link-color) !important; color: var(--sys-content-text-color) !important; }*/ #content .dropdown-menu .dropdown-item:hover i { color: var(--sys-content-link-hover-color) !important; } #content .nav.pro-nav-tabs.nav-tabs-justified.border-0 { border-bottom: 1px solid var(--sys-content-border-color) !important; background-color: var(--sys-content-neutral-bg) !important; padding: 0 !important; margin: 20px 0; } #content .nav.pro-nav-tabs.nav-tabs-justified.border-0 .nav-item { margin-bottom: -1px !important; border: none !important; } #content .nav.pro-nav-tabs.nav-tabs-justified.border-0 .nav-link { border: 1px solid var(--sys-content-border-color) !important; border-radius: 10px 10px 0 0 !important; margin-right: 5px !important; color: var(--sys-content-dark-text) !important; background-color: var(--sys-content-light-bg) !important; padding: 10px 20px !important; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1) !important; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important; } #content .nav.pro-nav-tabs.nav-tabs-justified.border-0 .nav-link:hover { background-color: var(--sys-content-hover-bg) !important; color: var(--sys-content-text-color) !important; box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15) !important; } #content .nav.pro-nav-tabs.nav-tabs-justified.border-0 .nav-link.active, #content .nav.pro-nav-tabs.nav-tabs-justified.border-0 .nav-link.active:hover { background-color: var(--sys-content-active-tab-bg) !important; border-color: var(--sys-content-border-color) var(--sys-content-border-color) var(--sys-content-neutral-bg) !important; color: var(--sys-content-text-color) !important; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2) !important; } #content .nav.pro-nav-tabs.nav-tabs-justified.border-0 .nav-link .fa { margin-right: 5px !important; } #content .nav.pro-nav-tabs.nav-tabs-justified.border-0 .tab-content { border: 1px solid var(--sys-content-border-color) !important; border-top: none !important; padding: 15px !important; background-color: var(--sys-content-background-white) !important; } /* Toggle Aside */ #content #toggle-asidex { background-color: var(--sys-content-light-bg) !important; color: var(--sys-content-dark-bg) !important; border: 1px solid var(--sys-content-border-color) !important; border-radius: 5px !important; } #content #toggle-asidex:hover { background-color: var(--sys-content-hover-bg) !important; color: var(--sys-content-text-color) !important; border-color: var(--sys-content-hover-bg) !important; } #content #toggle-asidex i { margin-right: 0 !important; } /* Dropdown Menu Styles in Content */ #content .dropdown-menu { background-color: var(--sys-content-background-white) !important; color: var(--sys-content-dark-text) !important; border: 1px solid var(--sys-content-border-color) !important; border-radius: 8px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; padding: 5px 0 !important; min-width: 220px; margin: 0 !important; } /* Dropdown Menu Items in Content */ #content .dropdown-menu a { color: var(--sys-content-dark-text) !important; padding: 10px 20px !important; text-decoration: none !important; display: block !important; border-bottom: 1px solid var(--sys-content-border-color) !important; width: 90%; margin: 0 auto !important; transition: background-color 0.3s ease, color 0.3s ease !important; } /* Hover and Active States in Content */ #content .dropdown-menu a:hover, #content .dropdown-menu a:focus, #content .dropdown-menu .active { background-color: var(--sys-content-hover-bg) !important; color: var(--sys-content-link-color) !important; text-decoration: none !important; } #content .dropdown-menu .disabled { color: var(--sys-content-dark-text); } /* General Styles for Tabs in Content */ #content .nav.nav-tabs { border-bottom: 1px solid var(--sys-content-border-color) !important; margin-bottom: 15px !important; background-color: var(--sys-content-neutral-bg) !important; } #content .nav.nav-tabs li a { background-color: var(--sys-content-light-bg) !important; color: var(--sys-content-dark-text) !important; border: 1px solid var(--sys-content-border-color) !important; border-bottom: none !important; border-radius: 5px 5px 0 0 !important; margin-right: 5px !important; padding: 10px 20px !important; font-weight: bold !important; transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease !important; } #content .nav.nav-tabs li.active a, #content .nav.nav-tabs li.active a:hover { background-color: var(--sys-content-active-tab-bg) !important; color: var(--sys-content-text-color) !important; border-color: var(--sys-content-active-tab-bg) var(--sys-content-active-tab-bg) var(--sys-content-neutral-bg) !important; border-bottom: 1px solid var(--sys-content-background-white) !important; cursor: default !important; } #content .nav.nav-tabs li a:hover { background-color: var(--sys-content-hover-bg) !important; color: var(--sys-content-text-color) !important; } #content .tab-content { border: 1px solid var(--sys-content-border-color) !important; padding: 20px !important; background-color: var(--sys-content-background-white) !important; border-radius: 0 0 5px 5px !important; border-top: none !important; } /* Custom Select Styling in Content */ #content .custom-select { background-color: var(--sys-content-light-bg) !important; color: var(--sys-content-dark-text) !important; border-color: var(--sys-content-border-color) !important; border-radius: 5px !important; font-size: 16px !important; padding: 5px 10px !important; height: auto !important; width: auto !important; max-width: 300px; } #content .custom-select:focus { background-color: var(--sys-content-highlight-bg) !important; color: var(--sys-content-text-color) !important; border-color: var(--sys-content-hover-bg) !important; box-shadow: 0 0 5px var(--sys-content-hover-bg) !important; } #content .custom-select option { background-color: var(--sys-content-background-white) !important; color: var(--sys-content-dark-text) !important; padding: 5px 10px !important; border-bottom: 1px solid var(--sys-content-border-color); } #content .custom-select option:hover { background-color: var(--sys-content-hover-bg) !important; color: var(--sys-content-text-color) !important; } /* Ensure button text has good contrast in Content */ #content .btn, #content .nav-link, #content .dropdown-item { color: var(--sys-content-text-color) !important; } #content .btn-primary, #content .nav-link.active, #content .dropdown-item.active { background-color: var(--sys-content-link-color) !important; border-color: var(--sys-content-link-hover-color) !important; color: var(--sys-content-dark-text) !important; } #content .btn-secondary, #content .btn-outline-secondary, #content .nav-link:hover, #content .dropdown-item:hover { background-color: var(--sys-content-hover-bg) !important; border-color: var(--sys-content-hover-bg) !important; color: var(--sys-content-text-color) !important; } .bg-red-600 { background-color: var(--sys-content-danger-color) !important; color: #fff !important; /* Optional: To ensure text is readable */ padding: 10px !important; /* Optional: To add some padding */ } #content .edit-icon .newItem { color: var(--sys-content-primary-color) !important; /* Use your CSS variable */ } #content .disabled-icon { color: var(--sys-content-text-theme-400) !important; /* Dark Grey */ border: 1px solid var(--sys-content-text-theme-400) !important; /* Border color matches the icon */ border-radius: 3px !important; padding: 2px !important; } #content .disabled-label-text { color: var(--sys-content-text-theme-400) !important; /* Matching color for text */ } /* For text in the top header */ #sys-top-header, #sys-top-header a, #sys-top-header .nav > li > a, #sys-top-header .dropdown-menu a { color: var(--sys-top-header-text-color) !important; } /* For icons in the top header */ #sys-top-header .icon, #sys-top-header .fas, #sys-top-header .fa { color: var(--sys-top-header-text-color) !important; } /* For dropdown menu background */ #sys-top-header .dropdown-menu { background-color: var(--sys-top-header-bg-color) !important; } /* Panel Container within #content */ #content .panel { background-color: var(--sys-content-bg-color) !important; border-color: var(--sys-content-border-color) !important; color: var(--sys-content-text-color) !important; } /* Panel Body within #content */ #content .panel-body { background-color: var(--sys-content-bg-color) !important; color: var(--sys-content-text-color) !important; } /* Panel Heading within #content */ #content .panel-heading { background-color: var(--sys-content-bg-color) !important; color: var(--sys-content-text-color) !important; border-bottom-color: var(--sys-content-border-color) !important; } /* Buttons within Panels in #content */ #content .panel{ background-color: var(--sys-content-bg-color) !important; border-color: var(--sys-content-border-color) !important; color: var(--sys-content-text-color) !important; } /* Links within Panels in #content */ #content .panel a, #content .panel-heading a { color: var(--sys-content-link-color) !important; } /* For specific text elements within #content */ #content .text-sm, #content .text-base, #content .text-xl, #content .text-gray-600, #content .text-gray-500, #content .text-gray-900, #content .font-semibold, #content .font-normal, #content .leading-6, #content h4, #content dt { color: var(--sys-content-text-theme-500) !important; /* Adjust based on your preference */ } /* Footer Styling */ #changeLanguages { background-color: var(--sys-content-bg-color) !important; color: var(--sys-content-text-color) !important; } /* Button within Footer */ #changeLanguages .btn { background-color: var(--sys-content-bg-color) !important; border-color: var(--sys-content-border-color) !important; color: var(--sys-content-text-color) !important; } #changeLanguages .btn:hover { background-color: var(--sys-content-hover-bg-color) !important; color: var(--sys-content-text-color) !important; border-color: transparent !important; /* Assuming hover effect removes border */ } /* SVG within Button */ #changeLanguages .btn svg { fill: var(--sys-content-text-color) !important; } /* Dropdown Menu */ #changeLanguages .dropdown-menu { background-color: var(--sys-content-bg-color) !important; border-color: var(--sys-content-border-color) !important; color: var(--sys-content-text-color) !important; } /* Dropdown Menu Links */ #changeLanguages .dropdown-menu a { color: var(--sys-content-link-color) !important; } #changeLanguages .dropdown-menu a:hover { background-color: var(--sys-content-hover-bg-color) !important; color: var(--sys-content-text-color) !important; } /* Styling for small text elements */ #content .uppercase.text-xs.text-gray-700 { text-transform: uppercase !important; font-size: 0.75rem !important; /* Equivalent to text-xs */ color: var(--sys-content-text-theme-700) !important; /* Assuming this variable is for a darker text color */ } /* Avatar image styling */ #content .thumb-sm.avatar img.img-circle { border-radius: 50% !important; border: 2px solid var(--sys-content-border-color) !important; } /* Comment item avatar */ #content .comment-item .thumb-sm.avatar img.img-circle { border-radius: 50% !important; border: 2px solid var(--sys-content-border-color) !important; } /* Button within Footer */ #changeLanguages .btn, .comment-item .btn { background-color: var(--sys-content-bg-color) !important; border-color: var(--sys-content-border-color) !important; color: var(--sys-content-text-color) !important; } #changeLanguages .btn:hover, .comment-item .btn:hover { background-color: var(--sys-content-hover-bg-color) !important; color: var(--sys-content-text-color) !important; border-color: transparent !important; /* Assuming hover effect removes border */ } /* SVG within Button */ #changeLanguages .btn svg, .comment-item .btn svg { fill: var(--sys-content-text-color) !important; } /* Thumbnail container within #content */ #content .thumbnail { background-color: var(--sys-content-bg-color) !important; border-color: var(--sys-content-border-color) !important; color: var(--sys-content-text-color) !important; padding: 15px !important; /* Example padding */ border-radius: 5px !important; /* Example border radius */ } /* Override all images with avatar-img class within #content */ #content .avatar-img { border-radius: 50% !important; /* If circular avatars are desired */ border: 2px solid var(--sys-content-border-color) !important; } /* Specific for rounded thumbnails, ensuring uniformity within #content */ #content .thumb-rounded .avatar-img { border-radius: 50% !important; border: 2px solid var(--sys-content-border-color) !important; } /* Override SVG styles within #content */ #content .svg-inline--fa { fill: var(--sys-content-text-color) !important; } /* Links and text within caption or similar containers in #content */ #content .caption .text-indigo-600, #content .caption .text-muted, #content .caption a { color: var(--sys-content-link-color) !important; } /* Buttons within caption or similar containers in #content */ #content .caption .btn, #content .caption .btn-icon { background-color: var(--sys-content-bg-color) !important; border-color: var(--sys-content-border-color) !important; color: var(--sys-content-text-color) !important; } #content .caption .btn:hover, #content .caption .btn-icon:hover { background-color: var(--sys-content-hover-bg-color) !important; color: var(--sys-content-text-color) !important; border-color: transparent !important; /* Assuming hover effect removes border */ } /* Additional styles for specific use cases within #content */ #content .text-center { text-align: center !important; color: var(--sys-content-text-color) !important; } #content .display-block { display: block !important; color: var(--sys-content-text-color) !important; } /* Ensure uniform font size for text-muted within #content */ #content .text-muted { font-size: 0.875rem !important; /* For example, to match text-xs or similar */ color: var(--sys-content-text-theme-500) !important; } /* Pagination buttons within #content */ #content .pagination { list-style: none !important; /* Remove default list styling */ display: flex !important; /* Align buttons horizontally */ padding: 0 !important; margin: 0 !important; } #content .pagination .paginate_button { margin: 0 5px !important; /* Space between buttons */ } #content .pagination .paginate_button a { display: block !important; padding: 8px 12px !important; /* Adjust padding as needed */ border-radius: 4px !important; /* Rounded corners */ background-color: var(--sys-content-bg-color) !important; /* Background color */ color: var(--sys-content-text-color) !important; /* Text color */ text-decoration: none !important; /* Remove underline */ border: 1px solid var(--sys-content-border-color) !important; /* Border */ } #content .pagination .paginate_button a:hover { background-color: var(--sys-content-hover-bg-color) !important; /* Hover background */ color: var(--sys-content-text-color) !important; /* Hover text color */ } #content .pagination .paginate_button.disabled a { background-color: var(--sys-content-neutral-bg) !important; /* Disabled background */ color: var(--sys-content-text-theme-300) !important; /* Disabled text color */ cursor: not-allowed !important; /* Not-allowed cursor */ border: 1px solid var(--sys-content-border-color) !important; /* Border */ } /* General styling for aside in #content */ #content aside { background-color: var(--sys-content-bg-color) !important; border-left: 1px solid var(--sys-content-border-color) !important; } /* Styling for the dashmenu list inside aside */ #content aside .dashmenu { list-style: none !important; padding: 0 !important; margin: 0 !important; background-color: var(--sys-content-neutral-bg) !important; /* Set background for the ul */ } /* Styling for each list item */ #content aside .dashmenu li { margin-bottom: 5px !important; /* Space between items */ } /* Links inside the dashmenu */ #content aside .dashmenu li a { display: flex !important; align-items: center !important; padding: 10px 15px !important; text-decoration: none !important; color: var(--sys-content-link-color) !important; font-size: 0.875rem !important; /* Adjust font size as needed */ } /* Hover state for links */ #content aside .dashmenu li a:hover { color: var(--sys-content-link-hover-color) !important; background-color: var(--sys-content-hover-bg) !important; border-radius: 4px !important; } /* Overriding default classes for colors */ #content aside .text-gray-600, #content aside .text-indigo-500, #content aside .hover\:text-indigo-600 { color: var(--sys-content-text-color) !important; } #content aside .text-indigo-500:hover, #content aside .hover\:text-indigo-600:hover { color: var(--sys-content-link-hover-color) !important; } /* SVG icon styling */ #content aside .dashmenu li a svg { margin-right: 10px !important; /* Space between icon and text */ fill: var(--sys-content-text-color) !important; } /* Styling for alert within aside */ #content aside .alert { background-color: var(--sys-content-highlight-bg) !important; /* Use the highlight background color */ border: 1px solid var(--sys-content-border-color) !important; /* Use the border color */ color: var(--sys-content-text-color) !important; /* Use the text color */ padding: 15px !important; margin-bottom: 10px !important; border-radius: 4px !important; /* Rounded corners */ } /* Close button styling */ #content aside .alert .close { color: var(--sys-content-text-color) !important; opacity: 0.8 !important; font-size: 1.2rem !important; line-height: 1 !important; cursor: pointer !important; } /* Link styling within alert */ #content aside .alert a { color: var(--sys-content-link-color) !important; /* Use the link color */ font-weight: bold !important; /* Make the link text bold */ text-decoration: underline !important; /* Underline the link */ } /* Hover state for links */ #content aside .alert a:hover { color: var(--sys-content-link-hover-color) !important; /* Use the hover link color */ } /* Styling for header within content */ #content header { padding: 10px 20px !important; font-weight: bold !important; background-color: var(--sys-content-light-bg) !important; /* Use the light background color */ border-bottom: 1px solid var(--sys-content-border-color) !important; /* Use the border color */ color: var(--sys-content-dark-text) !important; /* Use the dark text color */ display: flex !important; justify-content: space-between !important; align-items: center !important; } /* Styling for the pull-right div within header */ #content header .m-b-sm.pull-right { margin-bottom: 0 !important; } /* Styling for buttons in the dropdown */ #content header .btn-group .btn { background-color: transparent !important; border: 1px solid var(--sys-content-border-color) !important; /* Use the border color */ color: var(--sys-content-primary-color) !important; /* Use the primary color for text */ padding: 5px 10px !important; border-radius: 4px !important; font-weight: bold !important; } /* Hover and active states for buttons */ #content header .btn-group .btn:hover, #content header .btn-group .btn:focus { background-color: var(--sys-content-primary-color) !important; /* Use the primary color */ color: var(--sys-content-background-white) !important; /* Use the white color */ border-color: var(--sys-content-primary-color) !important; } /* Styling for dropdown menu */ #content header .btn-group .dropdown-menu { background-color: var(--sys-content-light-bg) !important; /* Use the light background color */ border: 1px solid var(--sys-content-border-color) !important; /* Use the border color */ } /* Styling for dropdown menu items */ #content header .btn-group .dropdown-menu li a { color: var(--sys-content-dark-text) !important; /* Use the dark text color */ padding: 5px 10px !important; } /* Hover state for dropdown menu items */ #content header .btn-group .dropdown-menu li a:hover { background-color: var(--sys-content-hover-bg) !important; /* Use the hover background color */ color: var(--sys-content-text-color) !important; /* Use the text color */ } /* Style the icons within the navigation */ /* Encapsulate all styles under the #sys-left-menu selector */ /* Encapsulate all styles under the #sys-left-menu selector */ /* Encapsulate all styles under the #sys-left-menu selector */ #sys-left-menu .nav-primary .nav .nav-w-children a .icon { color: var(--sys-left-menu-icon-color) !important; /* White color for the icon */ background-color: var(--sys-left-menu-icon-bg-color) !important; /* Initial background color for the icon */ } #sys-left-menu .nav-primary .nav .nav-w-children a .icon b { background-color: var(--sys-left-menu-icon-b-bg-color) !important; /* Initial background color for the b element */ color: var(--sys-left-menu-icon-b-color); /* White color for the b element */ } #sys-left-menu .nav-primary .nav .nav-w-children:hover, #sys-left-menu .nav-primary .nav .nav-w-children:hover a .icon, #sys-left-menu .nav-primary .nav .nav-w-children a .icon:hover { background-color: var(--sys-left-menu-icon-hover-bg-color) !important; /* Green background color on hover */ color: var(--sys-left-menu-icon-hover-color) !important; /* Ensuring the icon color remains white on hover */ } #sys-left-menu .nav-primary .nav .nav-w-children:hover { background-color: var(--sys-left-menu-li-hover-bg-color) !important; /* Background color for the list item on hover */ color: var(--sys-left-menu-li-hover-color) !important; /* Ensuring the text color changes on hover */ } #sys-left-menu .nav-primary .nav .nav-w-children:hover span { color: var(--sys-left-menu-li-hover-color) !important; /* Ensuring the text color of the span changes on hover */ }