/* ULTIMATE UNIVERSAL THEME ENGINE (BOOTSTRAP 4.6 + ADMINLTE 3) 10 Premium Themes Overrider Usage: Add [data-theme="nama-tema"] to the tag. */ /* ========================================================================== GLOBAL COMPONENT OVERRIDES (THE OPTIMIZATION) ========================================================================== */ /* 1. TEXT & BACKGROUNDS */ .text-primary { color: var(--primary) !important; } .text-secondary { color: var(--secondary) !important; } .text-success { color: var(--success) !important; } .text-danger { color: var(--danger) !important; } .text-warning { color: var(--warning) !important; } .text-info { color: var(--info) !important; } .text-dark { color: var(--dark) !important; } .text-subtle-primary { color: color-mix(in srgb, var(--primary), transparent 50%) !important; } .text-subtle-secondary { color: color-mix(in srgb, var(--secondary), transparent 50%) !important; } .text-subtle-success { color: color-mix(in srgb, var(--success), transparent 50%) !important; } .text-subtle-danger { color: color-mix(in srgb, var(--danger), transparent 50%) !important; } .text-subtle-warning { color: color-mix(in srgb, var(--warning), transparent 50%) !important; } .text-subtle-info { color: color-mix(in srgb, var(--info), transparent 50%) !important; } .text-subtle-dark { color: color-mix(in srgb, var(--dark), transparent 50%) !important; } .text-subtle-primary-lighter { color: color-mix(in srgb, var(--primary), transparent 75%) !important; } .text-subtle-secondary-lighter { color: color-mix(in srgb, var(--secondary), transparent 75%) !important; } .text-subtle-success-lighter { color: color-mix(in srgb, var(--success), transparent 75%) !important; } .text-subtle-danger-lighter { color: color-mix(in srgb, var(--danger), transparent 75%) !important; } .text-subtle-warning-lighter { color: color-mix(in srgb, var(--warning), transparent 75%) !important; } .text-subtle-info-lighter { color: color-mix(in srgb, var(--info), transparent 75%) !important; } .text-subtle-dark-lighter { color: color-mix(in srgb, var(--dark), transparent 75%) !important; } .text-subtle-primary-darker { color: color-mix(in srgb, var(--primary), transparent 30%) !important; } .text-subtle-secondary-darker { color: color-mix(in srgb, var(--secondary), transparent 30%) !important; } .text-subtle-success-darker { color: color-mix(in srgb, var(--success), transparent 30%) !important; } .text-subtle-danger-darker { color: color-mix(in srgb, var(--danger), transparent 30%) !important; } .text-subtle-warning-darker { color: color-mix(in srgb, var(--warning), transparent 30%) !important; } .text-subtle-info-darker { color: color-mix(in srgb, var(--info), transparent 30%) !important; } .text-subtle-dark-darker { color: color-mix(in srgb, var(--dark), transparent 30%) !important; } .bg-primary { background-color: var(--primary) !important; color: #fff !important; } .bg-secondary { background-color: var(--secondary) !important; color: #fff !important; } .bg-success { background-color: var(--success) !important; color: #fff !important; } .bg-danger { background-color: var(--danger) !important; color: #fff !important; } .bg-warning { background-color: var(--warning) !important; color: #212529 !important; } .bg-info { background-color: var(--info) !important; color: #fff !important; } .bg-dark { background-color: var(--dark) !important; color: #fff !important; } .bg-subtle-primary { background-color: color-mix(in srgb, var(--primary), transparent 50%) !important; color: #fff !important; } .bg-subtle-secondary { background-color: color-mix(in srgb, var(--secondary), transparent 50%) !important; color: #fff !important; } .bg-subtle-success { background-color: color-mix(in srgb, var(--success), transparent 50%) !important; color: #fff !important; } .bg-subtle-danger { background-color: color-mix(in srgb, var(--danger), transparent 50%) !important; color: #fff !important; } .bg-subtle-warning { background-color: color-mix(in srgb, var(--warning), transparent 50%) !important; color: #212529 !important; } .bg-subtle-info { background-color: color-mix(in srgb, var(--info), transparent 50%) !important; color: #fff !important; } .bg-subtle-dark { background-color: color-mix(in srgb, var(--dark), transparent 50%) !important; color: #fff !important; } .bg-subtle-light { background-color: color-mix(in srgb, var(--light), transparent 50%) !important; color: #212529 !important; } .bg-subtle-primary-darker { background-color: color-mix(in srgb, var(--primary), transparent 30%) !important; color: #fff !important; } .bg-subtle-secondary-darker { background-color: color-mix(in srgb, var(--secondary), transparent 30%) !important; color: #fff !important; } .bg-subtle-success-darker { background-color: color-mix(in srgb, var(--success), transparent 30%) !important; color: #fff !important; } .bg-subtle-danger-darker { background-color: color-mix(in srgb, var(--danger), transparent 30%) !important; color: #fff !important; } .bg-subtle-warning-darker { background-color: color-mix(in srgb, var(--warning), transparent 30%) !important; color: #212529 !important; } .bg-subtle-info-darker { background-color: color-mix(in srgb, var(--info), transparent 30%) !important; color: #fff !important; } .bg-subtle-dark-darker { background-color: color-mix(in srgb, var(--dark), transparent 30%) !important; color: #fff !important; } .bg-subtle-light-darker { background-color: color-mix(in srgb, var(--light), transparent 30%) !important; color: #fff !important; } .bg-subtle-primary-lighter { background-color: color-mix(in srgb, var(--primary), transparent 75%) !important; color: #212529 !important; } .bg-subtle-secondary-lighter { background-color: color-mix(in srgb, var(--secondary), transparent 75%) !important; color: #fff !important; } .bg-subtle-success-lighter { background-color: color-mix(in srgb, var(--success), transparent 75%) !important; color: #fff !important; } .bg-subtle-danger-lighter { background-color: color-mix(in srgb, var(--danger), transparent 75%) !important; color: #fff !important; } .bg-subtle-warning-lighter { background-color: color-mix(in srgb, var(--warning), transparent 75%) !important; color: #212529 !important; } .bg-subtle-info-lighter { background-color: color-mix(in srgb, var(--info), transparent 75%) !important; color: #fff !important; } .bg-subtle-dark-lighter { background-color: color-mix(in srgb, var(--dark), transparent 75%) !important; color: #fff !important; } .bg-subtle-light-lighter { background-color: color-mix(in srgb, var(--light), transparent 75%) !important; color: #212529 !important; } /* 2. ADMINLTE GRADIENTS (SPECIAL REQUEST) */ .bg-gradient-primary { background: var(--primary) linear-gradient(180deg, rgba(255,255,255,.15), transparent) repeat-x !important; color: #fff !important; } .bg-gradient-secondary { background: var(--secondary) linear-gradient(180deg, rgba(255,255,255,.15), transparent) repeat-x !important; } .bg-gradient-success { background: var(--success) linear-gradient(180deg, rgba(255,255,255,.15), transparent) repeat-x !important; } .bg-gradient-danger { background: var(--danger) linear-gradient(180deg, rgba(255,255,255,.15), transparent) repeat-x !important; } .bg-gradient-warning { background: var(--warning) linear-gradient(180deg, rgba(0,0,0,.05), transparent) repeat-x !important; } .bg-gradient-info { background: var(--info) linear-gradient(180deg, rgba(255,255,255,.15), transparent) repeat-x !important; } /* 3. BUTTONS (SOLID, OUTLINE, GRADIENT) */ .btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; color:#fff!important; } .btn-success { background: var(--success) !important; border-color: var(--success) !important; color:#fff!important; } .btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color:#fff!important; } .btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color:#212529!important; } .btn-info { background: var(--info) !important; border-color: var(--info) !important; color:#fff!important; } .btn-secondary { background: var(--secondary)!important; border-color: var(--secondary)!important; color:#fff!important; } .btn-dark { background: var(--dark) !important; border-color: var(--dark) !important; color:#fff!important; } .btn-light { background: var(--light) !important; border-color: var(--light) !important; color:#212529!important; } .btn-outline-primary { color: var(--primary)!important; border-color: var(--primary)!important; } .btn-outline-success { color: var(--success)!important; border-color: var(--success)!important; } .btn-outline-danger { color: var(--danger)!important; border-color: var(--danger)!important; } .btn-outline-warning { color: var(--warning)!important; border-color: var(--warning)!important; } .btn-outline-info { color: var(--info)!important; border-color: var(--info)!important; } .btn-outline-secondary { color: var(--secondary)!important; border-color: var(--secondary)!important; } .btn-outline-dark { color: var(--dark)!important; border-color: var(--dark)!important; } .btn-outline-light { color: var(--dark)!important; border-color: var(--light)!important; } .btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-info:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover { color:#fff!important; } .btn-outline-warning:hover, .btn-outline-light:hover { color:#212529!important; } .btn-outline-primary:hover { background: var(--primary)!important; } .btn-outline-success:hover { background: var(--success)!important; } .btn-outline-danger:hover { background: var(--danger)!important; } .btn-outline-warning:hover { background: var(--warning)!important; } .btn-outline-info:hover { background: var(--info)!important; } .btn-outline-secondary:hover { background: var(--secondary)!important; } .btn-outline-dark:hover { background: var(--dark)!important; } .btn-outline-light:hover { background: var(--light)!important; } .btn-gradient-primary { background: var(--primary) linear-gradient(180deg, rgba(255,255,255,.15), transparent) !important; border-color: var(--primary)!important; color:#fff!important; } .btn-gradient-success { background: var(--success) linear-gradient(180deg, rgba(255,255,255,.15), transparent) !important; border-color: var(--success)!important; color:#fff!important; } .btn-gradient-danger { background: var(--danger) linear-gradient(180deg, rgba(255,255,255,.15), transparent) !important; border-color: var(--danger)!important; color:#fff!important; } .btn-gradient-warning { background: var(--warning) linear-gradient(180deg, rgba(0,0,0,.05), transparent) !important; border-color: var(--warning)!important; color:#212529!important; } .btn-gradient-info { background: var(--info) linear-gradient(180deg, rgba(255,255,255,.15), transparent) !important; border-color: var(--info)!important; color:#fff!important; } .btn-gradient-secondary { background: var(--secondary) linear-gradient(180deg, rgba(255,255,255,.15), transparent) !important; border-color: var(--secondary)!important; color:#fff!important; } .btn-gradient-dark { background: var(--dark) linear-gradient(180deg, rgba(255,255,255,.1), transparent) !important; border-color: var(--dark)!important; color:#fff!important; } .btn-gradient-light { background: var(--light) linear-gradient(180deg, rgba(0,0,0,.05), transparent) !important; border-color: var(--light)!important; color:#212529!important; } .btn-gradient-primary:hover, .btn-gradient-success:hover, .btn-gradient-danger:hover, .btn-gradient-warning:hover, .btn-gradient-info:hover, .btn-gradient-secondary:hover, .btn-gradient-dark:hover, .btn-gradient-light:hover { filter: brightness(92%); } .btn-subtle-primary { background-color: color-mix(in srgb, var(--primary), transparent 50%) !important; border-color: color-mix(in srgb, var(--primary), transparent 30%) !important; color: #fff !important; } .btn-subtle-secondary { background-color: color-mix(in srgb, var(--secondary), transparent 50%) !important; border-color: color-mix(in srgb, var(--secondary), transparent 30%) !important; color: #fff !important; } .btn-subtle-success { background-color: color-mix(in srgb, var(--success), transparent 50%) !important; border-color: color-mix(in srgb, var(--success), transparent 30%) !important; color: #fff !important; } .btn-subtle-danger { background-color: color-mix(in srgb, var(--danger), transparent 50%) !important; border-color: color-mix(in srgb, var(--danger), transparent 30%) !important; color: #fff !important; } .btn-subtle-warning { background-color: color-mix(in srgb, var(--warning), transparent 50%) !important; border-color: color-mix(in srgb, var(--warning), transparent 30%) !important; color: #212529 !important; } .btn-subtle-info { background-color: color-mix(in srgb, var(--info), transparent 50%) !important; border-color: color-mix(in srgb, var(--info), transparent 30%) !important; color: #fff !important; } .btn-subtle-dark { background-color: color-mix(in srgb, var(--dark), transparent 50%) !important; border-color: color-mix(in srgb, var(--dark), transparent 30%) !important; color: #fff !important; } .btn-subtle-light { background-color: color-mix(in srgb, var(--light), transparent 50%) !important; border-color: color-mix(in srgb, var(--light), transparent 30%) !important; color: #212529 !important; } .btn-subtle-primary-darker { background-color: color-mix(in srgb, var(--primary), transparent 30%) !important; border-color: var(--primary) !important; color: #fff !important; } .btn-subtle-success-darker { background-color: color-mix(in srgb, var(--success), transparent 30%) !important; border-color: var(--success) !important; color: #fff !important; } .btn-subtle-danger-darker { background-color: color-mix(in srgb, var(--danger), transparent 30%) !important; border-color: var(--danger) !important; color: #fff !important; } .btn-subtle-warning-darker { background-color: color-mix(in srgb, var(--warning), transparent 30%) !important; border-color: var(--warning) !important; color: #212529 !important; } .btn-subtle-info-darker { background-color: color-mix(in srgb, var(--info), transparent 30%) !important; border-color: var(--info) !important; color: #fff !important; } .btn-subtle-dark-darker { background-color: color-mix(in srgb, var(--dark), transparent 30%) !important; border-color: var(--dark) !important; color: #fff !important; } .btn-subtle-light-darker { background-color: color-mix(in srgb, var(--light), transparent 30%) !important; border-color: var(--light) !important; color: #212529 !important; } .btn-subtle-primary-lighter { background-color: color-mix(in srgb, var(--primary), transparent 75%) !important; border-color: color-mix(in srgb, var(--primary), transparent 55%) !important; color: var(--primary) !important; } .btn-subtle-success-lighter { background-color: color-mix(in srgb, var(--success), transparent 75%) !important; border-color: color-mix(in srgb, var(--success), transparent 55%) !important; color: var(--success) !important; } .btn-subtle-danger-lighter { background-color: color-mix(in srgb, var(--danger), transparent 75%) !important; border-color: color-mix(in srgb, var(--danger), transparent 55%) !important; color: var(--danger) !important; } .btn-subtle-warning-lighter { background-color: color-mix(in srgb, var(--warning), transparent 75%) !important; border-color: color-mix(in srgb, var(--warning), transparent 55%) !important; color: var(--warning) !important; } .btn-subtle-info-lighter { background-color: color-mix(in srgb, var(--info), transparent 75%) !important; border-color: color-mix(in srgb, var(--info), transparent 55%) !important; color: var(--info) !important; } .btn-subtle-dark-lighter { background-color: color-mix(in srgb, var(--dark), transparent 75%) !important; border-color: color-mix(in srgb, var(--dark), transparent 55%) !important; color: var(--dark) !important; } .btn-subtle-light-lighter { background-color: color-mix(in srgb, var(--light), transparent 75%) !important; border-color: color-mix(in srgb, var(--light), transparent 55%) !important; color: var(--light) !important; } [class*="btn-subtle-"]:hover { filter: brightness(92%); transform: translateY(-1px); } .btn-subtle-outline-primary { background-color: transparent !important; border-color: color-mix(in srgb, var(--primary), transparent 60%) !important; color: var(--primary) !important; } .btn-subtle-outline-secondary { background-color: transparent !important; border-color: color-mix(in srgb, var(--secondary), transparent 60%) !important; color: var(--secondary) !important; } .btn-subtle-outline-success { background-color: transparent !important; border-color: color-mix(in srgb, var(--success), transparent 60%) !important; color: var(--success) !important; } .btn-subtle-outline-danger { background-color: transparent !important; border-color: color-mix(in srgb, var(--danger), transparent 60%) !important; color: var(--danger) !important; } .btn-subtle-outline-warning { background-color: transparent !important; border-color: color-mix(in srgb, var(--warning), transparent 60%) !important; color: var(--warning) !important; } .btn-subtle-outline-info { background-color: transparent !important; border-color: color-mix(in srgb, var(--info), transparent 60%) !important; color: var(--info) !important; } .btn-subtle-outline-dark { background-color: transparent !important; border-color: color-mix(in srgb, var(--dark), transparent 60%) !important; color: var(--dark) !important; } .btn-subtle-outline-light { background-color: transparent !important; border-color: color-mix(in srgb, var(--light), transparent 60%) !important; color: var(--light) !important; } .btn-subtle-outline-primary:hover { background-color: color-mix(in srgb, var(--primary), transparent 50%) !important; border-color: color-mix(in srgb, var(--primary), transparent 30%) !important; color: #fff !important; } .btn-subtle-outline-success:hover { background-color: color-mix(in srgb, var(--success), transparent 50%) !important; border-color: color-mix(in srgb, var(--success), transparent 30%) !important; color: #fff !important; } .btn-subtle-outline-danger:hover { background-color: color-mix(in srgb, var(--danger), transparent 50%) !important; border-color: color-mix(in srgb, var(--danger), transparent 30%) !important; color: #fff !important; } .btn-subtle-outline-warning:hover { background-color: color-mix(in srgb, var(--warning), transparent 50%) !important; border-color: color-mix(in srgb, var(--warning), transparent 30%) !important; color: #212529 !important; } .btn-subtle-outline-info:hover { background-color: color-mix(in srgb, var(--info), transparent 50%) !important; border-color: color-mix(in srgb, var(--info), transparent 30%) !important; color: #fff !important; } .btn-subtle-outline-secondary:hover { background-color: color-mix(in srgb, var(--secondary), transparent 50%) !important; border-color: color-mix(in srgb, var(--secondary), transparent 30%) !important; color: #fff !important; } .btn-subtle-outline-dark:hover { background-color: color-mix(in srgb, var(--dark), transparent 50%) !important; border-color: color-mix(in srgb, var(--dark), transparent 30%) !important; color: #fff !important; } .btn-subtle-outline-light:hover { background-color: color-mix(in srgb, var(--light), transparent 50%) !important; border-color: color-mix(in srgb, var(--light), transparent 30%) !important; color: #212529 !important; } .btn-subtle-outline-primary:active, .btn-subtle-outline-primary:focus { background-color: color-mix(in srgb, var(--primary), transparent 30%) !important; border-color: var(--primary) !important; color: #fff !important; } .btn-subtle-outline-success:active, .btn-subtle-outline-success:focus { background-color: color-mix(in srgb, var(--success), transparent 30%) !important; border-color: var(--success) !important; color: #fff !important; } .btn-subtle-outline-danger:active, .btn-subtle-outline-danger:focus { background-color: color-mix(in srgb, var(--danger), transparent 30%) !important; border-color: var(--danger) !important; color: #fff !important; } .btn-subtle-outline-warning:active, .btn-subtle-outline-warning:focus { background-color: color-mix(in srgb, var(--warning), transparent 30%) !important; border-color: var(--warning) !important; color: #fff !important; } .btn-subtle-outline-info:active, .btn-subtle-outline-info:focus { background-color: color-mix(in srgb, var(--info), transparent 30%) !important; border-color: var(--info) !important; color: #fff !important; } .btn-subtle-outline-secondary:active, .btn-subtle-outline-secondary:focus { background-color: color-mix(in srgb, var(--secondary), transparent 30%) !important; border-color: var(--secondary) !important; color: #fff !important; } .btn-subtle-outline-dark:active, .btn-subtle-outline-dark:focus { background-color: color-mix(in srgb, var(--dark), transparent 30%) !important; border-color: var(--dark) !important; color: #fff !important; } .btn-subtle-outline-light:active, .btn-subtle-outline-light:focus { background-color: color-mix(in srgb, var(--light), transparent 30%) !important; border-color: var(--light) !important; color: #fff !important; } /* 4. CARDS (BOOTSTRAP & ADMINLTE) */ .card-primary.card-outline { border-top: 3px solid var(--primary) !important; } .card-primary:not(.card-outline) > .card-header { background-color: var(--primary) !important; color: #fff !important; } .card-success.card-outline { border-top: 3px solid var(--success) !important; } .card-success:not(.card-outline) > .card-header { background-color: var(--success) !important; color: #fff !important; } /* 5. TAB PANES & NAVS */ /* .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--primary) !important; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: var(--primary) !important; border-top: 3px solid var(--primary) !important; } .nav-tabs .nav-link:hover { border-top-color: var(--primary) !important; } */ .nav-tabs .nav-link { border-radius: 0 !important; } .nav-pills.navtabsprimary .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--primary) !important; } .nav-tabs.navtabsprimary .nav-item.show .nav-link, .nav-tabs.navtabsprimary .nav-link.active { color: var(--primary) !important; border-top: 3px solid var(--primary) !important; } .nav-tabs.navtabsprimary .nav-link:hover { border-top-color: var(--primary) !important; } .nav-pills.navtabsinfo .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--info) !important; } .nav-tabs.navtabsinfo .nav-item.show .nav-link, .nav-tabs.navtabsinfo .nav-link.active { color: var(--info) !important; border-top: 3px solid var(--info) !important; } .nav-tabs.navtabsinfo .nav-link:hover { border-top-color: var(--info) !important; } .nav-pills.navtabswarning .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--warning) !important; } .nav-tabs.navtabswarning .nav-item.show .nav-link, .nav-tabs.navtabswarning .nav-link.active { color: var(--warning) !important; border-top: 3px solid var(--warning) !important; } .nav-tabs.navtabswarning .nav-link:hover { border-top-color: var(--warning) !important; } .nav-pills.navtabssuccess .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--success) !important; } .nav-tabs.navtabssuccess .nav-item.show .nav-link, .nav-tabs.navtabssuccess .nav-link.active { color: var(--success) !important; border-top: 3px solid var(--success) !important; } .nav-tabs.navtabssuccess .nav-link:hover { border-top-color: var(--success) !important; } .nav-pills.navtabsdanger .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--danger) !important; } .nav-tabs.navtabsdanger .nav-item.show .nav-link, .nav-tabs.navtabsdanger .nav-link.active { color: var(--danger) !important; border-top: 3px solid var(--danger) !important; } .nav-tabs.navtabsdanger .nav-link:hover { border-top-color: var(--danger) !important; } .nav-pills.navtabsdark .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--dark) !important; } .nav-tabs.navtabsdark .nav-item.show .nav-link, .nav-tabs.navtabsdark .nav-link.active { color: var(--dark) !important; border-top: 3px solid var(--dark) !important; } .nav-tabs.navtabsdark .nav-link:hover { border-top-color: var(--dark) !important; } .nav-pills.navtabslight .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--light) !important; } .nav-tabs.navtabslight .nav-item.show .nav-link, .nav-tabs.navtabslight .nav-link.active { color: var(--light) !important; border-top: 3px solid var(--light) !important; } .nav-tabs.navtabslight .nav-link:hover { border-top-color: var(--light) !important; } /* 6. ALERTS */ .alert-primary { background-color: var(--light) !important; border-color: var(--primary) !important; color: var(--primary) !important; border-left-width: 5px !important; } .alert-success { background-color: rgba(16, 185, 129, 0.1) !important; border-color: var(--success) !important; color: var(--success) !important; border-left-width: 5px !important; } .alert-danger { background-color: rgba(239, 68, 68, 0.1) !important; border-color: var(--danger) !important; color: var(--danger) !important; border-left-width: 5px !important; } /* 7. BADGES */ .badge-primary { background-color: var(--primary) !important; } .badge-success { background-color: var(--success) !important; } .badge-warning { background-color: var(--warning) !important; } .badge-info { background-color: var(--info) !important; } .badge-danger { background-color: var(--danger) !important; } .badge-secondary { background-color: var(--secondary) !important; } .badge-dark { background-color: var(--dark) !important; } .badge-light { background-color: var(--light) !important; } .badge-subtle-primary { background-color: color-mix(in srgb, var(--primary), transparent 50%) !important; color: var(--primary) !important;} .badge-subtle-success { background-color: color-mix(in srgb, var(--success), transparent 50%) !important; color: var(--success) !important;} .badge-subtle-warning { background-color: color-mix(in srgb, var(--warning), transparent 50%) !important; color: var(--warning) !important;} .badge-subtle-info { background-color: color-mix(in srgb, var(--info), transparent 50%) !important; color: var(--info) !important;} .badge-subtle-danger { background-color: color-mix(in srgb, var(--danger), transparent 50%) !important; color: var(--danger) !important;} .badge-subtle-secondary { background-color: color-mix(in srgb, var(--secondary), transparent 50%) !important; color: var(--secondary) !important;} .badge-subtle-dark { background-color: color-mix(in srgb, var(--dark), transparent 50%) !important; color: var(--dark) !important;} .badge-subtle-light { background-color: color-mix(in srgb, var(--light), transparent 50%) !important; color: var(--light) !important;} .badge-subtle-primary-lighter { background-color: color-mix(in srgb, var(--primary), transparent 80%) !important; color: var(--primary) !important;} .badge-subtle-success-lighter { background-color: color-mix(in srgb, var(--success), transparent 80%) !important; color: var(--success) !important;} .badge-subtle-warning-lighter { background-color: color-mix(in srgb, var(--warning), transparent 80%) !important; color: var(--warning) !important;} .badge-subtle-info-lighter { background-color: color-mix(in srgb, var(--info), transparent 80%) !important; color: var(--info) !important;} .badge-subtle-danger-lighter { background-color: color-mix(in srgb, var(--danger), transparent 80%) !important; color: var(--danger) !important;} .badge-subtle-secondary-lighter { background-color: color-mix(in srgb, var(--secondary), transparent 80%) !important; color: var(--secondary) !important;} .badge-subtle-dark-lighter { background-color: color-mix(in srgb, var(--dark), transparent 80%) !important; color: var(--dark) !important;} .badge-subtle-light-lighter { background-color: color-mix(in srgb, var(--light), transparent 80%) !important; color: var(--light) !important;} .badge-subtle-primary-darker { background-color: color-mix(in srgb, var(--primary), transparent 30%) !important; color: var(--primary) !important;} .badge-subtle-success-darker { background-color: color-mix(in srgb, var(--success), transparent 30%) !important; color: var(--success) !important;} .badge-subtle-warning-darker { background-color: color-mix(in srgb, var(--warning), transparent 30%) !important; color: var(--warning) !important;} .badge-subtle-info-darker { background-color: color-mix(in srgb, var(--info), transparent 30%) !important; color: var(--info) !important;} .badge-subtle-danger-darker { background-color: color-mix(in srgb, var(--danger), transparent 30%) !important; color: var(--danger) !important;} .badge-subtle-secondary-darker { background-color: color-mix(in srgb, var(--secondary), transparent 30%) !important; color: var(--secondary) !important;} .badge-subtle-dark-darker { background-color: color-mix(in srgb, var(--dark), transparent 30%) !important; color: var(--dark) !important;} .badge-subtle-light-darker { background-color: color-mix(in srgb, var(--light), transparent 30%) !important; color: var(--light) !important;} /* 8. PAGINATION */ .page-item.active .page-link { background-color: var(--primary) !important; border-color: var(--primary) !important; } .page-link { color: var(--primary); } /* 9. TABLES */ .table-primary, .table-primary > td, .table-primary > th { background-color: var(--light) !important; color: var(--primary) !important; } .thead-dark th { background-color: var(--dark) !important; border-color: var(--dark) !important; } /* 10. PROGRESS BAR */ .progress-bar { background-color: var(--primary) !important; } /* 11. SIDEBAR ACTIVE (CUSTOM) */ /* .sidebar-active, .nav-sidebar .nav-link.active { background-color: var(--sidebar-active) !important; color: #fff !important; font-weight: 600; } */ /* .nav-link { border-radius: 10px 30px 30px 10px !important; } */ .nav-link:not(:has(> :parent).nav-tabs):hover { background-color: var(--sidebar-hover) !important; } /* 12. BORDERS */ /* --- PRIMARY --- */ .border-primary { border-color: var(--primary) !important; } .border-top-primary { border-top-color: var(--primary) !important; } .border-bottom-primary { border-bottom-color: var(--primary) !important; } .border-start-primary { border-left-color: var(--primary) !important; } .border-end-primary { border-right-color: var(--primary) !important; } /* --- SECONDARY --- */ .border-secondary { border-color: var(--secondary) !important; } .border-top-secondary { border-top-color: var(--secondary) !important; } .border-bottom-secondary { border-bottom-color: var(--secondary) !important; } .border-start-secondary { border-left-color: var(--secondary) !important; } .border-end-secondary { border-right-color: var(--secondary) !important; } /* --- SUCCESS --- */ .border-success { border-color: var(--success) !important; } .border-top-success { border-top-color: var(--success) !important; } .border-bottom-success { border-bottom-color: var(--success) !important; } .border-start-success { border-left-color: var(--success) !important; } .border-end-success { border-right-color: var(--success) !important; } /* --- DANGER --- */ .border-danger { border-color: var(--danger) !important; } .border-top-danger { border-top-color: var(--danger) !important; } .border-bottom-danger { border-bottom-color: var(--danger) !important; } .border-start-danger { border-left-color: var(--danger) !important; } .border-end-danger { border-right-color: var(--danger) !important; } /* --- WARNING --- */ .border-warning { border-color: var(--warning) !important; } .border-top-warning { border-top-color: var(--warning) !important; } .border-bottom-warning { border-bottom-color: var(--warning) !important; } .border-start-warning { border-left-color: var(--warning) !important; } .border-end-warning { border-right-color: var(--warning) !important; } /* --- INFO --- */ .border-info { border-color: var(--info) !important; } .border-top-info { border-top-color: var(--info) !important; } .border-bottom-info { border-bottom-color: var(--info) !important; } .border-start-info { border-left-color: var(--info) !important; } .border-end-info { border-right-color: var(--info) !important; } /* --- LIGHT --- */ .border-light { border-color: var(--light) !important; } .border-top-light { border-top-color: var(--light) !important; } .border-bottom-light { border-bottom-color: var(--light) !important; } .border-start-light { border-left-color: var(--light) !important; } .border-end-light { border-right-color: var(--light) !important; } /* --- DARK --- */ .border-dark { border-color: var(--dark) !important; } .border-top-dark { border-top-color: var(--dark) !important; } .border-bottom-dark { border-bottom-color: var(--dark) !important; } .border-start-dark { border-left-color: var(--dark) !important; } .border-end-dark { border-right-color: var(--dark) !important; } /* SUBTLE BORDER */ .border-subtle-primary { border-color: color-mix(in srgb, var(--primary), transparent 50%) !important; } .border-subtle-top-primary { border-top-color: color-mix(in srgb, var(--primary), transparent 50%) !important; } .border-subtle-bottom-primary { border-bottom-color: color-mix(in srgb, var(--primary), transparent 50%) !important; } .border-subtle-start-primary { border-left-color: color-mix(in srgb, var(--primary), transparent 50%) !important; } .border-subtle-end-primary { border-right-color: color-mix(in srgb, var(--primary), transparent 50%) !important; } .border-subtle-secondary { border-color: color-mix(in srgb, var(--secondary), transparent 50%) !important; } .border-subtle-top-secondary { border-top-color: color-mix(in srgb, var(--secondary), transparent 50%) !important; } .border-subtle-bottom-secondary { border-bottom-color: color-mix(in srgb, var(--secondary), transparent 50%) !important; } .border-subtle-start-secondary { border-left-color: color-mix(in srgb, var(--secondary), transparent 50%) !important; } .border-subtle-end-secondary { border-right-color: color-mix(in srgb, var(--secondary), transparent 50%) !important; } .border-subtle-success { border-color: color-mix(in srgb, var(--success), transparent 50%) !important; } .border-subtle-top-success { border-top-color: color-mix(in srgb, var(--success), transparent 50%) !important; } .border-subtle-bottom-success { border-bottom-color: color-mix(in srgb, var(--success), transparent 50%) !important; } .border-subtle-start-success { border-left-color: color-mix(in srgb, var(--success), transparent 50%) !important; } .border-subtle-end-success { border-right-color: color-mix(in srgb, var(--success), transparent 50%) !important; } .border-subtle-danger { border-color: color-mix(in srgb, var(--danger), transparent 50%) !important; } .border-subtle-top-danger { border-top-color: color-mix(in srgb, var(--danger), transparent 50%) !important; } .border-subtle-bottom-danger { border-bottom-color: color-mix(in srgb, var(--danger), transparent 50%) !important; } .border-subtle-start-danger { border-left-color: color-mix(in srgb, var(--danger), transparent 50%) !important; } .border-subtle-end-danger { border-right-color: color-mix(in srgb, var(--danger), transparent 50%) !important; } .border-subtle-warning { border-color: color-mix(in srgb, var(--warning), transparent 50%) !important; } .border-subtle-top-warning { border-top-color: color-mix(in srgb, var(--warning), transparent 50%) !important; } .border-subtle-bottom-warning { border-bottom-color: color-mix(in srgb, var(--warning), transparent 50%) !important; } .border-subtle-start-warning { border-left-color: color-mix(in srgb, var(--warning), transparent 50%) !important; } .border-subtle-end-warning { border-right-color: color-mix(in srgb, var(--warning), transparent 50%) !important; } .border-subtle-info { border-color: color-mix(in srgb, var(--info), transparent 50%) !important; } .border-subtle-top-info { border-top-color: color-mix(in srgb, var(--info), transparent 50%) !important; } .border-subtle-bottom-info { border-bottom-color: color-mix(in srgb, var(--info), transparent 50%) !important; } .border-subtle-start-info { border-left-color: color-mix(in srgb, var(--info), transparent 50%) !important; } .border-subtle-end-info { border-right-color: color-mix(in srgb, var(--info), transparent 50%) !important; } .border-subtle-light { border-color: color-mix(in srgb, var(--light), transparent 50%) !important; } .border-subtle-top-light { border-top-color: color-mix(in srgb, var(--light), transparent 50%) !important; } .border-subtle-bottom-light { border-bottom-color: color-mix(in srgb, var(--light), transparent 50%) !important; } .border-subtle-start-light { border-left-color: color-mix(in srgb, var(--light), transparent 50%) !important; } .border-subtle-end-light { border-right-color: color-mix(in srgb, var(--light), transparent 50%) !important; } .border-subtle-dark { border-color: color-mix(in srgb, var(--dark), transparent 50%) !important; } .border-subtle-top-dark { border-top-color: color-mix(in srgb, var(--dark), transparent 50%) !important; } .border-subtle-bottom-dark { border-bottom-color: color-mix(in srgb, var(--dark), transparent 50%) !important; } .border-subtle-start-dark { border-left-color: color-mix(in srgb, var(--dark), transparent 50%) !important; } .border-subtle-end-dark { border-right-color: color-mix(in srgb, var(--dark), transparent 50%) !important; } /* DASHED */ .border-dashed { border-style: dashed !important; } .border-top-dashed { border-top-style: dashed !important; } .border-bottom-dashed { border-bottom-style: dashed !important; } .border-start-dashed { border-left-style: dashed !important; } .border-end-dashed { border-right-style: dashed !important; } /* Shadow */ .text-shadow-primary { text-shadow: 1px 1px 15px var(--primary), -1px -1px 15px var(--primary) !important; } .text-shadow-success { text-shadow: 1px 1px 15px var(--success), -1px -1px 15px var(--success) !important; } .text-shadow-warning { text-shadow: 1px 1px 15px var(--warning), -1px -1px 15px var(--warning) !important; } .text-shadow-info { text-shadow: 1px 1px 15px var(--info), -1px -1px 15px var(--info) !important; } .text-shadow-danger { text-shadow: 1px 1px 15px var(--danger), -1px -1px 15px var(--danger) !important; } .shadow-primary { box-shadow: 1px 1px 15px var(--primary), -1px -1px 15px var(--primary) !important; } .shadow-success { box-shadow: 1px 1px 15px var(--success), -1px -1px 15px var(--success) !important; } .shadow-warning { box-shadow: 1px 1px 15px var(--warning), -1px -1px 15px var(--warning) !important; } .shadow-info { box-shadow: 1px 1px 15px var(--info), -1px -1px 15px var(--info) !important; } .shadow-danger { box-shadow: 1px 1px 15px var(--danger), -1px -1px 15px var(--danger) !important; } /* OPTIONAL: Transition for smooth theme switching */ body, .card, .btn, .nav-link, .sidebar-active { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .border-0 { border: none !important; border: 0px !important; } a:not(:has(> :parent).nav-tabs) { color: var(--primary); } a.dropdown-item:active { background-color: color-mix(in srgb, var(--primary), transparent 75%) !important; background: color-mix(in srgb, var(--primary), transparent 75%) !important; } .select2-container--bootstrap4 .select2-results__option--highlighted, .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] { background-color: var(--primary) !important; } /* TEXT ON BG-* */ .texton-bg-primary {color: #fff !important;} .texton-bg-secondary {color: #fff !important;} .texton-bg-success {color: #fff !important;} .texton-bg-danger {color: #fff !important;} .texton-bg-warning {color: #212529 !important;} .texton-bg-info {color: #fff !important;} .texton-bg-dark {color: #fff !important;} .btn:active { transform: translateY(1px); /* Slight downward movement */ } .btn.btn-primary:active { background: color-mix(in srgb, var(--primary), #000 30%) !important; /* Darker color */ transform: translateY(1px); /* Slight downward movement */ box-shadow: none; /* Reduce elevation */ } .btn.btn-secondary:active { background: color-mix(in srgb, var(--secondary), #000 30%) !important; /* Darker color */ transform: translateY(1px); /* Slight downward movement */ box-shadow: none; /* Reduce elevation */ } .btn.btn-success:active { background: color-mix(in srgb, var(--success), #000 30%) !important; /* Darker color */ transform: translateY(1px); /* Slight downward movement */ box-shadow: none; /* Reduce elevation */ } .btn.btn-danger:active { background: color-mix(in srgb, var(--danger), #000 30%) !important; /* Darker color */ transform: translateY(1px); /* Slight downward movement */ box-shadow: none; /* Reduce elevation */ } .btn.btn-warning:active { background: color-mix(in srgb, var(--warning), #000 30%) !important; /* Darker color */ transform: translateY(1px); /* Slight downward movement */ box-shadow: none; /* Reduce elevation */ } .btn.btn-info:active { background: color-mix(in srgb, var(--info), #000 30%) !important; /* Darker color */ transform: translateY(1px); /* Slight downward movement */ box-shadow: none; /* Reduce elevation */ } .btn.btn-dark:active { background: color-mix(in srgb, var(--dark), #000 30%) !important; /* Darker color */ transform: translateY(1px); /* Slight downward movement */ box-shadow: none; /* Reduce elevation */ } .btn.btn-light:active { background: color-mix(in srgb, var(--light), #000 30%) !important; /* Darker color */ transform: translateY(1px); /* Slight downward movement */ box-shadow: none; /* Reduce elevation */ } /* SHADOW */ .onMyShadow { /* SMALL */ --shadow-sm: 0 4px 6px -1px; --shadow-sm-2: 0 2px 4px -2px; /* DEFAULT */ --shadow-md: 0 10px 15px -3px; --shadow-md-2: 0 4px 6px -4px; /* LARGE */ --shadow-lg: 0 20px 25px -5px; --shadow-lg-2: 0 10px 10px -5px; } .onMyShadow.shadow-primary { box-shadow: var(--shadow-md) var(--primary), var(--shadow-md-2) var(--primary) !important; } .onMyShadow.shadow-primary-sm { box-shadow: var(--shadow-sm) var(--primary), var(--shadow-sm-2) var(--primary) !important; } .onMyShadow.shadow-primary-lg { box-shadow: var(--shadow-lg) var(--primary), var(--shadow-lg-2) var(--primary) !important; } .onMyShadow.shadow-subtle-primary { box-shadow: var(--shadow-md) color-mix(in srgb, var(--primary), transparent 60%), var(--shadow-md-2) color-mix(in srgb, var(--primary), transparent 70%) !important; } .onMyShadow.shadow-subtle-primary-sm { box-shadow: var(--shadow-sm) color-mix(in srgb, var(--primary), transparent 60%), var(--shadow-sm-2) color-mix(in srgb, var(--primary), transparent 70%) !important; } .onMyShadow.shadow-subtle-primary-lg { box-shadow: var(--shadow-lg) color-mix(in srgb, var(--primary), transparent 60%), var(--shadow-lg-2) color-mix(in srgb, var(--primary), transparent 70%) !important; } .onMyShadow.shadow-secondary { box-shadow: var(--shadow-md) var(--secondary), var(--shadow-md-2) var(--secondary) !important; } .onMyShadow.shadow-secondary-sm { box-shadow: var(--shadow-sm) var(--secondary), var(--shadow-sm-2) var(--secondary) !important; } .onMyShadow.shadow-secondary-lg { box-shadow: var(--shadow-lg) var(--secondary), var(--shadow-lg-2) var(--secondary) !important; } .onMyShadow.shadow-subtle-secondary { box-shadow: var(--shadow-md) color-mix(in srgb, var(--secondary), transparent 60%), var(--shadow-md-2) color-mix(in srgb, var(--secondary), transparent 70%) !important; } .onMyShadow.shadow-subtle-secondary-sm { box-shadow: var(--shadow-sm) color-mix(in srgb, var(--secondary), transparent 60%), var(--shadow-sm-2) color-mix(in srgb, var(--secondary), transparent 70%) !important; } .onMyShadow.shadow-subtle-secondary-lg { box-shadow: var(--shadow-lg) color-mix(in srgb, var(--secondary), transparent 60%), var(--shadow-lg-2) color-mix(in srgb, var(--secondary), transparent 70%) !important; } .onMyShadow.shadow-success { box-shadow: var(--shadow-md) var(--success), var(--shadow-md-2) var(--success) !important; } .onMyShadow.shadow-success-sm { box-shadow: var(--shadow-sm) var(--success), var(--shadow-sm-2) var(--success) !important; } .onMyShadow.shadow-success-lg { box-shadow: var(--shadow-lg) var(--success), var(--shadow-lg-2) var(--success) !important; } .onMyShadow.shadow-subtle-success { box-shadow: var(--shadow-md) color-mix(in srgb, var(--success), transparent 60%), var(--shadow-md-2) color-mix(in srgb, var(--success), transparent 70%) !important; } .onMyShadow.shadow-subtle-success-sm { box-shadow: var(--shadow-sm) color-mix(in srgb, var(--success), transparent 60%), var(--shadow-sm-2) color-mix(in srgb, var(--success), transparent 70%) !important; } .onMyShadow.shadow-subtle-success-lg { box-shadow: var(--shadow-lg) color-mix(in srgb, var(--success), transparent 60%), var(--shadow-lg-2) color-mix(in srgb, var(--success), transparent 70%) !important; } .onMyShadow.shadow-danger { box-shadow: var(--shadow-md) var(--danger), var(--shadow-md-2) var(--danger) !important; } .onMyShadow.shadow-danger-sm { box-shadow: var(--shadow-sm) var(--danger), var(--shadow-sm-2) var(--danger) !important; } .onMyShadow.shadow-danger-lg { box-shadow: var(--shadow-lg) var(--danger), var(--shadow-lg-2) var(--danger) !important; } .onMyShadow.shadow-subtle-danger { box-shadow: var(--shadow-md) color-mix(in srgb, var(--danger), transparent 60%), var(--shadow-md-2) color-mix(in srgb, var(--danger), transparent 70%) !important; } .onMyShadow.shadow-subtle-danger-sm { box-shadow: var(--shadow-sm) color-mix(in srgb, var(--danger), transparent 60%), var(--shadow-sm-2) color-mix(in srgb, var(--danger), transparent 70%) !important; } .onMyShadow.shadow-subtle-danger-lg { box-shadow: var(--shadow-lg) color-mix(in srgb, var(--danger), transparent 60%), var(--shadow-lg-2) color-mix(in srgb, var(--danger), transparent 70%) !important; } .onMyShadow.shadow-warning { box-shadow: var(--shadow-md) var(--warning), var(--shadow-md-2) var(--warning) !important; } .onMyShadow.shadow-warning-sm { box-shadow: var(--shadow-sm) var(--warning), var(--shadow-sm-2) var(--warning) !important; } .onMyShadow.shadow-warning-lg { box-shadow: var(--shadow-lg) var(--warning), var(--shadow-lg-2) var(--warning) !important; } .onMyShadow.shadow-subtle-warning { box-shadow: var(--shadow-md) color-mix(in srgb, var(--warning), transparent 60%), var(--shadow-md-2) color-mix(in srgb, var(--warning), transparent 70%) !important; } .onMyShadow.shadow-subtle-warning-sm { box-shadow: var(--shadow-sm) color-mix(in srgb, var(--warning), transparent 60%), var(--shadow-sm-2) color-mix(in srgb, var(--warning), transparent 70%) !important; } .onMyShadow.shadow-subtle-warning-lg { box-shadow: var(--shadow-lg) color-mix(in srgb, var(--warning), transparent 60%), var(--shadow-lg-2) color-mix(in srgb, var(--warning), transparent 70%) !important; } .onMyShadow.shadow-info { box-shadow: var(--shadow-md) var(--info), var(--shadow-md-2) var(--info) !important; } .onMyShadow.shadow-info-sm { box-shadow: var(--shadow-sm) var(--info), var(--shadow-sm-2) var(--info) !important; } .onMyShadow.shadow-info-lg { box-shadow: var(--shadow-lg) var(--info), var(--shadow-lg-2) var(--info) !important; } .onMyShadow.shadow-subtle-info { box-shadow: var(--shadow-md) color-mix(in srgb, var(--info), transparent 60%), var(--shadow-md-2) color-mix(in srgb, var(--info), transparent 70%) !important; } .onMyShadow.shadow-subtle-info-sm { box-shadow: var(--shadow-sm) color-mix(in srgb, var(--info), transparent 60%), var(--shadow-sm-2) color-mix(in srgb, var(--info), transparent 70%) !important; } .onMyShadow.shadow-subtle-info-lg { box-shadow: var(--shadow-lg) color-mix(in srgb, var(--info), transparent 60%), var(--shadow-lg-2) color-mix(in srgb, var(--info), transparent 70%) !important; } .onMyShadow.shadow-dark { box-shadow: var(--shadow-md) var(--dark), var(--shadow-md-2) var(--dark) !important; } .onMyShadow.shadow-dark-sm { box-shadow: var(--shadow-sm) var(--dark), var(--shadow-sm-2) var(--dark) !important; } .onMyShadow.shadow-dark-lg { box-shadow: var(--shadow-lg) var(--dark), var(--shadow-lg-2) var(--dark) !important; } .onMyShadow.shadow-subtle-dark { box-shadow: var(--shadow-md) color-mix(in srgb, var(--dark), transparent 60%), var(--shadow-md-2) color-mix(in srgb, var(--dark), transparent 70%) !important; } .onMyShadow.shadow-subtle-dark-sm { box-shadow: var(--shadow-sm) color-mix(in srgb, var(--dark), transparent 60%), var(--shadow-sm-2) color-mix(in srgb, var(--dark), transparent 70%) !important; } .onMyShadow.shadow-subtle-dark-lg { box-shadow: var(--shadow-lg) color-mix(in srgb, var(--dark), transparent 60%), var(--shadow-lg-2) color-mix(in srgb, var(--dark), transparent 70%) !important; } .onMyShadow.shadow-light { box-shadow: var(--shadow-md) color-mix(in srgb, var(--light), black 30%), var(--shadow-md-2) color-mix(in srgb, var(--light), black 40%) !important; } .onMyShadow.shadow-light-sm { box-shadow: var(--shadow-sm) color-mix(in srgb, var(--light), black 30%), var(--shadow-sm-2) color-mix(in srgb, var(--light), black 40%) !important; } .onMyShadow.shadow-light-lg { box-shadow: var(--shadow-lg) color-mix(in srgb, var(--light), black 30%), var(--shadow-lg-2) color-mix(in srgb, var(--light), black 40%) !important; } .onMyShadow.shadow-subtle-light { box-shadow: var(--shadow-md) color-mix(in srgb, var(--light), black 20%), var(--shadow-md-2) color-mix(in srgb, var(--light), black 30%) !important; } .onMyShadow.shadow-subtle-light-sm { box-shadow: var(--shadow-sm) color-mix(in srgb, var(--light), black 20%), var(--shadow-sm-2) color-mix(in srgb, var(--light), black 30%) !important; } .onMyShadow.shadow-subtle-light-lg { box-shadow: var(--shadow-lg) color-mix(in srgb, var(--light), black 20%), var(--shadow-lg-2) color-mix(in srgb, var(--light), black 30%) !important; }