@property --iq-body-bg {
    syntax: "<color>";
    inherits: true;
    initial-value: #0f1216;
}

@property --iq-card-bg {
    syntax: "<color>";
    inherits: true;
    initial-value: #181c22;
}

@property --fx-hover-bg {
    syntax: "<color>";
    inherits: true;
    initial-value: #242b33;
}

@property --iq-title-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #f1f5f9;
}

@property --iq-body-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #cbd5e1;
}

@property --iq-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #6c5ce7;
}

@property --iq-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #6c5ce7;
}

@property --bg {
    syntax: "<color>";
    inherits: true;
    initial-value: #0f1216;
}

@property --bg-card {
    syntax: "<color>";
    inherits: true;
    initial-value: #181c22;
}

@property --bg-card-h {
    syntax: "<color>";
    inherits: true;
    initial-value: #242b33;
}

@property --text {
    syntax: "<color>";
    inherits: true;
    initial-value: #f1f5f9;
}

@property --text-s {
    syntax: "<color>";
    inherits: true;
    initial-value: #cbd5e1;
}

html.fx-theme-color-transition,
html.fx-theme-color-transition body {
    transition:
        --iq-body-bg .46s cubic-bezier(.22,1,.36,1),
        --iq-card-bg .46s cubic-bezier(.22,1,.36,1),
        --fx-hover-bg .46s cubic-bezier(.22,1,.36,1),
        --iq-title-text .42s cubic-bezier(.22,1,.36,1),
        --iq-body-text .42s cubic-bezier(.22,1,.36,1),
        --iq-primary .36s cubic-bezier(.22,1,.36,1),
        --iq-accent .36s cubic-bezier(.22,1,.36,1),
        --bg .46s cubic-bezier(.22,1,.36,1),
        --bg-card .46s cubic-bezier(.22,1,.36,1),
        --bg-card-h .46s cubic-bezier(.22,1,.36,1),
        --text .42s cubic-bezier(.22,1,.36,1),
        --text-s .42s cubic-bezier(.22,1,.36,1),
        background-color .46s cubic-bezier(.22,1,.36,1),
        color .42s cubic-bezier(.22,1,.36,1),
        border-color .42s cubic-bezier(.22,1,.36,1) !important;
}

html.fx-theme-color-transition .fx-customizer-panel,
html.fx-theme-color-transition .ts-card,
html.fx-theme-color-transition .iq-card,
html.fx-theme-color-transition .auth-card,
html.fx-theme-color-transition .auth-input,
html.fx-theme-color-transition .auth-bg,
html.fx-theme-color-transition .auth-bg::before,
html.fx-theme-color-transition .content-page,
html.fx-theme-color-transition .iq-sidebar,
html.fx-theme-color-transition .iq-top-navbar,
html.fx-theme-color-transition .iq-navbar-custom {
    transition:
        background-color .46s cubic-bezier(.22,1,.36,1),
        background .46s cubic-bezier(.22,1,.36,1),
        color .42s cubic-bezier(.22,1,.36,1),
        border-color .42s cubic-bezier(.22,1,.36,1) !important;
}

.iq-sidebar .iq-sidebar-menu .iq-menu li a,
.iq-sidebar .iq-sidebar-menu .iq-menu li.active > a,
.iq-sidebar .iq-sidebar-menu .iq-menu .iq-submenu li a {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme] .iq-sidebar .iq-sidebar-menu .iq-menu li.active > a {
    background: rgba(var(--iq-user-accent-rgb, 244, 63, 94), 0.28) !important;
    color: #fff !important;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(var(--iq-user-accent-rgb, 244, 63, 94), 0.25);
}

[data-theme] .iq-sidebar .iq-sidebar-menu .iq-menu li.active > a i,
[data-theme] .iq-sidebar .iq-sidebar-menu .iq-menu li.active > a .iq-arrow-right {
    color: #fff !important;
}

[data-theme] .iq-sidebar .iq-sidebar-menu .iq-menu li a:hover {
    background: rgba(var(--iq-user-accent-rgb, 244, 63, 94), 0.14) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-radius: 999px;
    overflow: hidden;
}

[data-theme] .iq-sidebar .iq-sidebar-menu .iq-menu li a:hover i {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme] .iq-sidebar .iq-sidebar-menu .iq-menu li a[aria-expanded="true"] {
    background: rgba(var(--iq-user-accent-rgb, 244, 63, 94), 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme] .iq-sidebar .iq-sidebar-menu .iq-menu li.active .iq-submenu li.active > a {
    background: rgba(var(--iq-user-accent-rgb, 244, 63, 94), 0.22) !important;
    color: #fff !important;
    border-radius: 12px;
    overflow: hidden;
}
[data-theme] .iq-sidebar .iq-sidebar-menu .iq-menu li.active .iq-submenu li.active > a i {
    background: transparent !important;
}

[data-theme] .iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu li.active > a,
[data-theme] .iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu li > a:hover {
    background: rgba(var(--iq-user-accent-rgb, 244, 63, 94), 0.28) !important;
    color: #fff !important;
}

[data-theme] .iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu li > a:hover {
    background: rgba(var(--iq-user-accent-rgb, 244, 63, 94), 0.14) !important;
}

[data-theme] .iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu li.active .iq-submenu li.active > a {
    background: rgba(var(--iq-user-accent-rgb, 244, 63, 94), 0.22) !important;
    color: #fff !important;
}

.iq-top-navbar .navbar-list li a:hover,
.iq-top-navbar .topbar-menu-icon li a:hover {
    color: var(--iq-primary, #8b5cf6) !important;
}

body[data-theme="Light"] .iq-sidebar .iq-sidebar-menu .iq-menu li.active > a {
    background: var(--iq-light-hover-bg) !important;
    color: var(--iq-light-title-text) !important;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: none !important;
}
body[data-theme="Light"] .iq-sidebar .iq-sidebar-menu .iq-menu li.active > a i,
body[data-theme="Light"] .iq-sidebar .iq-sidebar-menu .iq-menu li.active > a .iq-arrow-right {
    background: transparent !important;
    color: var(--iq-light-title-text) !important;
}
body[data-theme="Light"] .iq-sidebar .iq-sidebar-menu .iq-menu li a:hover {
    background: transparent !important;
    color: var(--iq-light-body-text) !important;
    border-radius: 999px;
    overflow: hidden;
}
body[data-theme="Light"] .iq-sidebar .iq-sidebar-menu .iq-menu li a:hover i {
    background: transparent !important;
    color: var(--iq-light-body-text) !important;
}
body[data-theme="Light"] .iq-sidebar .iq-sidebar-menu .iq-menu li a[aria-expanded="true"] {
    background: transparent !important;
    color: var(--iq-light-body-text) !important;
}
body[data-theme="Light"] .iq-sidebar .iq-sidebar-menu .iq-menu li.active .iq-submenu li.active > a {
    background: var(--iq-light-hover-bg) !important;
    color: var(--iq-light-title-text) !important;
    border-radius: 12px;
    overflow: hidden;
}
body[data-theme="Light"] .iq-sidebar .iq-sidebar-menu .iq-menu li.active .iq-submenu li.active > a i {
    background: transparent !important;
    color: var(--iq-light-title-text) !important;
}
body[data-theme="Light"] .iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu li.active > a,
body[data-theme="Light"] .iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu li.active .iq-submenu li.active > a {
    background: var(--iq-light-hover-bg) !important;
    color: var(--iq-light-title-text) !important;
}
body[data-theme="Light"] .iq-sidebar.sidebar-dark-blue .iq-sidebar-menu .iq-menu li > a:hover {
    background: transparent !important;
    color: var(--iq-light-body-text) !important;
}
body[data-theme="Light"] .iq-top-navbar .navbar-list li a:hover,
body[data-theme="Light"] .iq-top-navbar .topbar-menu-icon li a:hover {
    color: var(--iq-light-title-text) !important;
}


body.sidebar-main[data-theme]:not([data-theme="Light"]) .iq-sidebar .iq-sidebar-menu .iq-menu li.active > a {
    background: rgba(var(--iq-user-accent-rgb, 244, 63, 94), 0.28) !important;
    color: #fff !important;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(var(--iq-user-accent-rgb, 244, 63, 94), 0.25);
}
body.sidebar-main[data-theme]:not([data-theme="Light"]) .iq-sidebar .iq-sidebar-menu .iq-menu li.active > a i {
    background: transparent !important;
    color: #fff !important;
}
body.sidebar-main[data-theme]:not([data-theme="Light"]) .iq-sidebar .iq-sidebar-menu .iq-menu li a:hover {
    background: rgba(var(--iq-user-accent-rgb, 244, 63, 94), 0.14) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-radius: 999px;
    overflow: hidden;
}
body.sidebar-main[data-theme]:not([data-theme="Light"]) .iq-sidebar .iq-sidebar-menu .iq-menu li a:hover i {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.95) !important;
}
body.sidebar-main[data-theme="Light"] .iq-sidebar .iq-sidebar-menu .iq-menu li.active > a {
    background: rgba(var(--iq-user-accent-rgb, 244, 63, 94), 0.14) !important;
    color: var(--iq-light-title-text) !important;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: none !important;
}
body.sidebar-main[data-theme="Light"] .iq-sidebar .iq-sidebar-menu .iq-menu li.active > a i {
    background: transparent !important;
    color: var(--iq-light-title-text) !important;
}
body.sidebar-main[data-theme="Light"] .iq-sidebar .iq-sidebar-menu .iq-menu li a:hover {
    background: rgba(var(--iq-user-accent-rgb, 244, 63, 94), 0.09) !important;
    color: var(--iq-light-title-text) !important;
    border-radius: 999px;
    overflow: hidden;
}
body.sidebar-main[data-theme="Light"] .iq-sidebar .iq-sidebar-menu .iq-menu li a:hover i {
    background: transparent !important;
    color: var(--iq-light-title-text) !important;
}

.content-page .iq-card,
.content-page .fx-welcome-card {
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary,
a.btn-primary,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link,
.badge.bg-primary,
.alert.alert-primary {
    transition: background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.ts-hex-input:focus,
.ts-color-input:focus {
    transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    body,
    body[data-theme],
    .wrapper,
    .content-page,
    .iq-sidebar,
    .iq-top-navbar,
    .iq-navbar-custom,
    .iq-sub-dropdown,
    .dropdown-menu,
    .dropdown-item,
    .modal-content,
    .modal-header,
    .modal-footer,
    .table,
    th,
    td,
    .breadcrumb,
    .fx-customizer-panel,
    .fx-customizer-toggle,
    .ts-header,
    .ts-title,
    .ts-section-label,
    .ts-card,
    .ts-card-icon,
    .ts-card-label,
    .ts-hex-input,
    .ts-custom-panel,
    .iq-sidebar .iq-sidebar-menu .iq-menu li a,
    .content-page .iq-card,
    .content-page .fx-welcome-card,
    .btn-primary,
    .form-control:focus {
        transition: none;
    }
    .fx-customizer-toggle:hover > i {
        transform: none;
    }
}