/* Font family */
body {
    font-family: var(--font-family);
}

/* Font color */
body {
    color: var(--color-font);
}

/* Primary color */
h1,
a, a:hover, a:focus,
.color-primary,
.main-navigation-item.navigation-current, .main-navigation-item.navigation-active,
.left-off-canvas-menu .icon-user {
    color: var(--color-primary);
}

#vanselect-frontendLogin-userNameWrapper.meta-menu-box .red-colored-box,
#vanselect-frontendLogin-loginAndRegister.meta-menu-box .red-colored-box,
.off-canvas-toggle .left-off-canvas-toggle span {
    background-color: var(--color-primary);
}

.register-form-step.active span.form-step {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Secondary color */
h2, h3, h4, h5, h6 {
    color: var(--color-secondary);
}

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

/* Secondary color */
ul.off-canvas-list li a {
    color: var(--color-tertiary);
}

/* Info color */
.light-blue {
    background-color: var(--color-info);
}

/* Alert boxes */
.alert-box.alert {
    background-color: var(--color-alert);
    border-color: var(--color-alert);
}

.alert-box.info {
    background-color: var(--color-info);
    border-color: var(--color-info);
}

.alert-box.success {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.alert-box, .alert-box.warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}

/* Buttons */
button, .button,
button.disabled, button[disabled], .button.disabled, .button[disabled] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
button:hover, button:focus, .button:hover, .button:focus {
    background-color: var(--color-primary-hover);
}

.button.abort, .button.abort:hover, .button.abort:focus {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}