/* Variables */
:root {
    --blue: #003566;
    --light-blue: #337ab7;
    --red: #BD0F05;
    --yellow: #E0C53C;
    --green: #156037;
    --purple: #563DB8;
}

/* Blue */
body.pattern-blue #main a {
    color: var(--blue) !important;
}
.ast-builder-menu-1 .blue .sub-menu,
body.pattern-blue .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button {
    border-color: var(--blue);
}
body.pattern-light-blue .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button:hover {
    background-color: var(--blue);
}
.ast-builder-menu-1 .blue.menu-item:hover > .menu-link,
.ast-builder-menu-1 .blue.menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .blue.menu-item.current-menu-ancestor > .menu-link,
.ast-builder-menu-1 .blue .menu-item:hover > .menu-link,
.ast-builder-menu-1 .blue .menu-item.current-menu-item > .menu-link {
    color: var(--blue) !important;
    font-weight: bold;
}

/* Light Blue */
body.pattern-light-blue #main a {
    color: var(--light-blue) !important;
}
.ast-builder-menu-1 .light-blue .sub-menu,
body.pattern-light-blue .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button {
    border-color: var(--light-blue);
}
body.pattern-light-blue .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button:hover {
    background-color: var(--light-blue);
}
.ast-builder-menu-1 .light-blue.menu-item:hover > .menu-link,
.ast-builder-menu-1 .light-blue.menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .light-blue.menu-item.current-menu-ancestor > .menu-link,
.ast-builder-menu-1 .light-blue .menu-item:hover > .menu-link,
.ast-builder-menu-1 .light-blue .menu-item.current-menu-item > .menu-link {
    color: var(--light-blue) !important;
    font-weight: bold;
}
body.pattern-light-blue #main .wp-block-button__link,
#main .button,
#main .wp-element-button {
    background-color: var(--light-blue);
    border-color: var(--light-blue);
}

/* Red */
body.pattern-red #main a {
    color: var(--red) !important;
}
.ast-builder-menu-1 .red .sub-menu,
body.pattern-red #main .wp-block-button .ast-outline-button,
body.pattern-red .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button,
body.pattern-red .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button {
    border-color: var(--red);
}
body.pattern-red #main .hover-highlight-active .ast-outline-button,
body.pattern-red #main .wp-block-button .ast-outline-button:hover,
body.pattern-red #main .wp-block-button .ast-outline-button:focus,
body.pattern-red #main .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button:hover,
body.pattern-red #main .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button:focus {
    background-color: var(--red);
    color: #ffffff !important;
}
.ast-builder-menu-1 .red.menu-item:hover > .menu-link,
.ast-builder-menu-1 .red.menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .red.menu-item.current-menu-ancestor > .menu-link,
.ast-builder-menu-1 .red .menu-item:hover > .menu-link,
.ast-builder-menu-1 .red .menu-item.current-menu-item > .menu-link {
    color: var(--red);
    font-weight: bold;
}
body.pattern-red #main .wp-block-button__link,
#main .button,
#main .wp-element-button {
    background-color: var(--red);
    border-color: var(--red);
}

/* Green */
body.pattern-green #main a {
    color: var(--green) !important;
}
.ast-builder-menu-1 .green .sub-menu,
body.pattern-green .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button {
    border-color: var(--green);
}
body.pattern-green #main .hover-highlight-active .ast-outline-button,
body.pattern-green #main .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button:hover,
body.pattern-green #main .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button:focus {
    background-color: var(--green);
    color: #ffffff !important;
}
.ast-builder-menu-1 .green.menu-item:hover > .menu-link,
.ast-builder-menu-1 .green.menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .green.menu-item.current-menu-ancestor > .menu-link,
.ast-builder-menu-1 .green .menu-item:hover > .menu-link,
.ast-builder-menu-1 .green .menu-item.current-menu-item > .menu-link {
    color: var(--green);
    font-weight: bold;
}
body.pattern-green #main .wp-block-button__link,
#main .button,
#main .wp-element-button {
    background-color: var(--green);
    border-color: var(--green);
}

/* Purple */
body.pattern-purple #main a {
    color: var(--purple) !important;
}
.ast-builder-menu-1 .purple .sub-menu,
body.pattern-purple .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button {
    border-color: var(--purple);
}
body.pattern-purple #main .hover-highlight-active .ast-outline-button,
body.pattern-purple #main .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button:hover,
body.pattern-purple #main .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button:focus {
    background-color: var(--purple);
    color: #ffffff !important;
}
.ast-builder-menu-1 .purple.menu-item:hover > .menu-link,
.ast-builder-menu-1 .purple.menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .purple.menu-item.current-menu-ancestor > .menu-link,
.ast-builder-menu-1 .purple .menu-item:hover > .menu-link,
.ast-builder-menu-1 .purple .menu-item.current-menu-item > .menu-link {
    color: var(--purple);
    font-weight: bold;
}
body.pattern-purple #main .wp-block-button__link,
#main .button,
#main .wp-element-button {
    background-color: var(--purple);
    border-color: var(--purple);
}

/* Yellow */
.ast-builder-menu-1 .yellow .sub-menu,
body.pattern-yellow .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button {
    border-color: var(--yellow);
}
body.pattern-yellow #main .hover-highlight-active .ast-outline-button,
body.pattern-yellow #main .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button:hover,
body.pattern-yellow #main .wp-block-uagb-buttons-child .uagb-buttons-repeater.ast-outline-button:focus {
    background-color: var(--yellow);
    color: #ffffff !important;
}
.ast-builder-menu-1 .yellow.menu-item:hover > .menu-link,
.ast-builder-menu-1 .yellow.menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .yellow.menu-item.current-menu-ancestor > .menu-link,
.ast-builder-menu-1 .yellow .menu-item:hover > .menu-link,
.ast-builder-menu-1 .yellow .menu-item.current-menu-item > .menu-link {
    color: var(--yellow);
    font-weight: bold;
}