/*
denary #ce3261
#b43b5f8e

*/
/* GLOBAL COLORS */
:root {
    --lp:#f18f78;
    --tertiary: #43cc9e;
    --tertiary_hover: #44a987;
    --quaternary: #008181;
    --quaternary_hover: #00a8a8;
    --quinary: #fb9754;
    --senary-lg: #f698ff;
    --senary: #c34dce;
    --senary_hover: #953b9d;
    --septenary: #dde012;
    --octonay: #244e60;
    --white: #fff;
}

.color-lp {
    color: var(--lp);
}
.navbar-lp{
    background: var(--lp)!important;
    background-color: var(--lp)!important;
}
.sidebar-dark-lp .nav-link.active{
    border-color: var(--lp)!important;
}
.card-tertiary.card-outline {
    border-top: 4px solid var(--tertiary);
}
.opacity-70 {
    opacity: 0.7;
}
.opacity-60 {
    opacity: 0.6;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-40 {
    opacity: 0.4;
}
.opacity-30 {
    opacity: 0.3;
}

/* BACKGROUNDS */
.bg-lp {
    background: var(--lp)!important;
    background-color: var(--lp)!important;
}
.bg-w-tertiary.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--tertiary);
}
.bg-tertiary {
    background-color: var(--tertiary);
}

.bg-senary {
    background-color: var(--senary);
}
.bg-quinary {
    background-color: var(--quinary);
}

.bg-quaternary {
    color: var(--white);
    background-color: var(--quaternary);
}

.bg-octonay {
    color: var(--white);
    background-color: var(--octonay);
}

/* BUTTONS */
.btn-tertiary {
    background-color: var(--tertiary);
    color: var(--white);
}
.btn-tertiary:hover {
    color: var(--white);
    background-color: var(--tertiary_hover);
}
.btn-senary {
    background-color: var(--senary);
    color: var(--white);
}
.btn-senary:hover {
    color: var(--white);
    background-color: var(--senary_hover);
}
.btn-quaternary {
    background-color: var(--quaternary);
    color: var(--white);
}
.btn-quaternary:hover {
    color: var(--white);
    background-color: var(--quaternary_hover);
}

/* TEXT */
.text-quinary {
    color: var(--quinary);
}
.text-senary {
    color: var(--senary);
}
.tertiary {
    color: var(--tertiary);
}
.text-octonay {
    color: var(--octonay);
}

/* badges */
.badge-senary {
    color: var(--white);
    background-color: var(--senary);
}
.badge-quinary {
    color: var(--white);
    background-color: var(--quinary);
}
.badge-senary-lg {
    color: #1f2d3d;
    background-color: var(--senary-lg);
}

.badge-quaternary {
    color: var(--white);
    background-color: var(--quaternary);
}
.badge-sixth {
    color: var(--white);
    background-color: var(--octonay);
}
a:hover #nameImageProfile {
    display: block !important;
}

/* Modern sidebar theme */
.main-sidebar {
    background: linear-gradient(180deg, #121a27 0%, #1b2536 52%, #2d1d3c 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.main-sidebar .brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: linear-gradient(90deg, rgba(255, 106, 0, 0.16) 0%, rgba(0, 166, 251, 0.14) 100%);
}

.main-sidebar .brand-text {
    color: #f8fbff !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 10px rgba(0, 166, 251, 0.25);
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link {
    color: rgba(241, 245, 249, 0.9) !important;
    border-radius: 10px;
    margin: 3px 8px;
    padding: 10px 12px;
    transition: all 0.2s ease;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
    transform: translateX(3px);
    background: linear-gradient(90deg, rgba(255, 106, 0, 0.24) 0%, rgba(0, 166, 251, 0.16) 100%);
    color: #fff !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background: linear-gradient(90deg, #ff6a00 0%, #ff9f1c 55%, #00a6fb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link {
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
}

.main-sidebar .nav-header {
    color: #94a3b8 !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-top: 10px;
}

.main-sidebar .os-content,
.main-sidebar .sidebar {
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

@media (max-width: 768px) {
    .main-sidebar .nav-sidebar > .nav-item > .nav-link {
        margin: 2px 6px;
        padding: 9px 10px;
    }
}