.wizard > .content {
    background-color: white !important;
    display: flex !important;
    justify-content: center;
}

.card-body ,.content-date {
    background-color: rgb(255, 255, 255) !important;
}

.step-form-horizontal .wizard .steps li.current a, .step-form-horizontal .wizard .steps li.disabled a {
    color: #56008b !important;
    padding-top: 7px;
}

.form-input {
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #d2d2d2 !important;
    -webkit-transition: 0.5s;
    transition: 0.6s;
    outline: none;
}

.form-input[type=text]:focus {
    border: 1px solid #6f10aa !important;
}

.form-invalid {
    box-sizing: border-box;
    border: 1px solid #ff5555 !important;
    -webkit-transition: 0.5s;
    transition: 0.6s;
    outline: none;
}

.step {
    display: none;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.step.active {
    opacity: 1;
    transform: translateX(0);
}

.step {
    display: none;
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.step.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.step.slide-out-left {
    opacity: 0;
    transform: translateX(-50px);
}

.step.slide-out-right {
    opacity: 0;
    transform: translateX(50px);
}

.step.slide-in-left {
    opacity: 1;
    transform: translateX(0);
    animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.step.slide-in-right {
    opacity: 1;
    transform: translateX(0);
    animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.card-progress {
    background-color: none !important;
    box-shadow: none;
}

.segment-detail canvas[data-chart-config] {
    display: inline-block !important;
    max-width: 100% !important;
    vertical-align: top;
}

.segment-detail canvas[data-chart-field-type="option"] {
    width: 100% !important;
    height: 200px !important;
}

:root {
    --primary: #7b0a14;
    --secondary: #fb3d32;
    --primary-rgb: 123, 10, 20;
    --secondary-rgb: 251, 61, 50;
    --secondary-dark: #e6352c;
    --sidebar-submenu-bg: #6b0a12;
}

[data-color-theme="aubergine"] {
    --primary: #1b1112;
    --secondary: #aa9f98;
    --primary-rgb: 27, 17, 18;
    --secondary-rgb: 170, 159, 152;
    --secondary-dark: #8f8680;
    --sidebar-submenu-bg: #140c0d;
}

[data-color-theme="bordeaux"] {
    --primary: #7b0a14;
    --secondary: #fb3d32;
    --primary-rgb: 123, 10, 20;
    --secondary-rgb: 251, 61, 50;
    --secondary-dark: #e6352c;
    --sidebar-submenu-bg: #6b0a12;
}

[data-color-theme="earth"] {
    --primary: #633a11;
    --secondary: #c3a26c;
    --primary-rgb: 99, 58, 17;
    --secondary-rgb: 195, 162, 108;
    --secondary-dark: #a8895b;
    --sidebar-submenu-bg: #4f2e0e;
}

[data-color-theme="terracotta"] {
    --primary: #9e540a;
    --secondary: #fe7200;
    --primary-rgb: 158, 84, 10;
    --secondary-rgb: 254, 114, 0;
    --secondary-dark: #e56600;
    --sidebar-submenu-bg: #7f4308;
}

[data-color-theme="olive"] {
    --primary: #707014;
    --secondary: #afcc0d;
    --primary-rgb: 112, 112, 20;
    --secondary-rgb: 175, 204, 13;
    --secondary-dark: #9ab30b;
    --sidebar-submenu-bg: #5a5a10;
}

[data-color-theme="ocean"] {
    --primary: #3a4972;
    --secondary: #3da8d5;
    --primary-rgb: 58, 73, 114;
    --secondary-rgb: 61, 168, 213;
    --secondary-dark: #3392ba;
    --sidebar-submenu-bg: #2f3b5b;
}

[data-color-theme="wheat"] {
    --primary: #bf910c;
    --secondary: #f4d800;
    --primary-rgb: 191, 145, 12;
    --secondary-rgb: 244, 216, 0;
    --secondary-dark: #d9bf00;
    --sidebar-submenu-bg: #9a740a;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.badge-primary,
.label-primary,
.progress-bar-primary {
    background-color: var(--primary) !important;
}

.alert-primary,
.list-group-item-primary,
.table-primary,
.table-primary > th,
.table-primary > td,
.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
    background-color: rgba(var(--primary-rgb), 0.12) !important;
    border-color: rgba(var(--primary-rgb), 0.2) !important;
    color: var(--primary) !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.border-secondary {
    border-color: var(--secondary) !important;
}

.btn-secondary {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
    background-color: var(--secondary-dark) !important;
    border-color: var(--secondary-dark) !important;
}

.btn-outline-secondary {
    color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.show > .btn-outline-secondary.dropdown-toggle {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: #fff !important;
}

.hamburger .line,
.hamburger:hover .line,
.hamburger.is-active .line {
    background-color: var(--primary) !important;
}

.badge-secondary,
.label-secondary,
.progress-bar-secondary {
    background-color: var(--secondary) !important;
}

.alert-secondary,
.list-group-item-secondary,
.table-secondary,
.table-secondary > th,
.table-secondary > td,
.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
    background-color: rgba(var(--secondary-rgb), 0.12) !important;
    border-color: rgba(var(--secondary-rgb), 0.2) !important;
    color: var(--secondary) !important;
}

.nav-header,
.quixnav,
[data-nav-headerbg] .nav-header,
[data-sibebarbg] .quixnav {
    background-color: var(--primary) !important;
}

.header,
[data-headerbg] .header {
    background-color: #fff !important;
}

.nav-control,
.header-right .dropdown > a,
.header-left .btn,
.header-left input:focus {
    color: var(--primary) !important;
}

.quixnav .metismenu > li > a,
.quixnav .metismenu a,
.quixnav .metismenu .has-arrow:after {
    color: #fff !important;
}

.quixnav .metismenu > li:hover > a,
.quixnav .metismenu > li:focus > a,
.quixnav .metismenu > li.mm-active > a,
.quixnav .metismenu a:hover,
.quixnav .metismenu a:focus,
.quixnav .metismenu a.mm-active {
    background-color: var(--secondary) !important;
    color: #fff !important;
}

.quixnav .metismenu ul {
    background-color: var(--sidebar-submenu-bg) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.page-title,
.page-titles h4 {
    color: var(--primary) !important;
}

.pulse-css,
.pulse-css:before,
.pulse-css:after {
    background-color: var(--primary) !important;
}

.menu-toggle .nav-header .logo-compact {
    display: block;
}

.menu-toggle .nav-header .brand-logo img.w-100 {
    display: none;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-option.is-active {
    font-weight: 600;
}

.theme-swatch {
    width: 28px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, var(--swatch-primary) 0%, var(--swatch-primary) 50%, var(--swatch-secondary) 50%, var(--swatch-secondary) 100%);
}