/* Global Theme Color Variables */
:root {
    --color-blau: #00519e;
    --color-magenta: #de1682;
    --color-orange: #e1780a;
    --color-hellblau: #359ccc;
    --color-gruen: #48ac60;
    --color-violet: #ae71a9;

    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray: #fafafa;
    --color-graydark: #ededed;

    --color-primary: var(--color-magenta);
    --color-secondary: var(--color-blau);

    --wpforms-button-background-color: var(--color-magenta);
    --wpforms-button-border-color: var(--color-magenta);
    --wpforms-page-break-color: var(--color-magenta);
}

/* Color options in dropdown and buttons  */
.wb-color-selector option[value="white"],
.vc_btn3.vc_btn3-color-white,
.wb-bg-white {
    background-color: var(--color-white) !important;
    border-color: var(--color-graydark) !important;
    color: var(--color-black) !important;
}

.color-white,
.color-white * {
    color: var(--color-white) !important;
}

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

.vc_btn3.vc_btn3-color-white:before {
    background-color: var(--color-graydark) !important;
}

.vc_btn3.vc_btn3-color-white .vc_btn3-icon {
    border-color: var(--color-graydark) !important;
}

.wb-color-selector option[value="blau"],
.vc_btn3.vc_btn3-color-blau,
.wb-bg-blau {
    background-color: var(--color-blau) !important;
    border-color: var(--color-blau) !important;
    color: var(--color-white) !important;
}

.color-blau,
.color-blau * {
    color: var(--color-blau) !important;
}

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

.wb-color-selector option[value="magenta"],
.vc_btn3.vc_btn3-color-magenta,
.wb-bg-magenta,
button.wpforms-submit {
    background-color: var(--color-magenta) !important;
    border-color: var(--color-magenta) !important;
    color: var(--color-white) !important;
}

.color-magenta,
.color-magenta * {
    color: var(--color-magenta) !important;
}

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

.wb-color-selector option[value="orange"],
.vc_btn3.vc_btn3-color-orange,
.wb-bg-orange {
    background-color: var(--color-orange) !important;
    border-color: var(--color-orange) !important;
    color: var(--color-white) !important;
}

.color-orange,
.color-orange * {
    color: var(--color-orange) !important;
}

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

.wb-color-selector option[value="hellblau"],
.vc_btn3.vc_btn3-color-hellblau,
.wb-bg-hellblau {
    background-color: var(--color-hellblau) !important;
    border-color: var(--color-hellblau) !important;
    color: var(--color-white) !important;
}

.color-hellblau,
.color-hellblau * {
    color: var(--color-hellblau) !important;
}

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

.wb-color-selector option[value="gruen"],
.vc_btn3.vc_btn3-color-gruen,
.wb-bg-gruen {
    background-color: var(--color-gruen) !important;
    border-color: var(--color-gruen) !important;
    color: var(--color-white) !important;
}

.color-gruen,
.color-gruen * {
    color: var(--color-gruen) !important;
}

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

.wb-color-selector option[value="violet"],
.vc_btn3.vc_btn3-color-violet,
.wb-bg-violet {
    background-color: var(--color-violet) !important;
    border-color: var(--color-violet) !important;
    color: var(--color-white) !important;
}

.color-violet,
.color-violet * {
    color: var(--color-violet) !important;
}

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