:root {
    --color-primary: #333F68;
    --color-primary-hover: #5E74BF;
    --color-secondary: #8E3551;
    --color-secondary-hover: #C94B73;
}

.app-sidebar .sidebar-header {
    background-color: var(--color-primary);
}

a {
    color: var(--color-primary);
}

.hover {
    color: var(--color-primary);
}

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

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn {
    border-color: var(--color-primary);
    border: 1px solid;
}

.cardprimary {
    background-color: var(--color-primary);
}

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

    .btn-primary:hover {
        background-color: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
    }
    .btn-primary:focus, .btn-primary.focus {
        -webkit-box-shadow: 0 0 0 .2rem var(--color-primary);
        box-shadow: 0 0 0 .2rem rgba(148,23,79,0.5)
    }

    .btn-primary.disabled, .btn-primary:disabled {
        color: #fff;
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

        .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 .2rem var(--color-primary);
            box-shadow: 0 0 0 .2rem rgba(148,23,79,0.5)
        }

.bg-secondary {
    background-color: var(--color-secondary);
}
    .bg-secondary:hover {
        background-color: var(--color-secondary-hover);
        border-color: var(--color-secondary-hover);
    }