/* Font family styles */
html, body {
    font-family: "Arial", sans-serif;
}

/* Background color styles */
.opp-header-color-bg {
    background: #FFFFFF;
}
.opp-primary-color-bg {
    background: #B4975B;
}
.opp-primary-color-bg-darkened, .opp-primary-color-bg.opp-darken-on-hover:hover {
    background: #af9051;
}
.opp-primary-text-color-bg {
    background: #016647;
}
.opp-secondary-color-bg {
    background: #016647;
}
.opp-secondary-color-bg-darkened, .opp-secondary-color-bg.opp-darken-on-hover:hover {
    background: #01573c;
}
.opp-success-color-bg {
    background: #7CBB3E;
}
.opp-success-color-bg-darkened, .opp-success-color-bg.opp-darken-on-hover:hover {
    background: #69d101;
}
.opp-warning-color-bg {
    background: #EFB91C;
}
.opp-warning-color-bg-darkened, .opp-warning-color-bg.opp-darken-on-hover:hover {
    background: #ebb311;
}
.opp-alert-color-bg {
    background: #ED831E;
}
.opp-alert-color-bg-darkened, .opp-alert-color-bg.opp-darken-on-hover:hover {
    background: #e97b13;
}
.opp-danger-color-bg {
    background: #C0112F;
}
.opp-danger-color-bg-darkened, .opp-danger-color-bg.opp-darken-on-hover:hover {
    background: #b2102c;
}
.opp-disabled-color-bg {
    background: grey;
}


/* Text/foreground color styles */
.opp-primary-color {
    color: #B4975B;
}
.opp-primary-color-darkened, .opp-primary-color.opp-darken-on-hover:hover {
    color: #af9051;
}

/* This is the color we use for text rendered on top of the primary color background */
.opp-primary-text-color {
    color: #016647;
}

.opp-secondary-color {
    color: #016647;
}
.opp-secondary-color-darkened, .opp-secondary-color.opp-darken-on-hover:hover {
    color: #01573c;
}
.opp-success-color {
    color: #7CBB3E;
}
.opp-success-color-darkened, .opp-success-color.opp-darken-on-hover:hover {
    color: #69d101;
}
.opp-warning-color {
    color: #EFB91C;
}
.opp-warning-color-darkened, .opp-warning-color.opp-darken-on-hover:hover {
    color: #ebb311;
}
.opp-alert-color {
    color: #ED831E;
}
.opp-alert-color-darkened, .opp-alert-color.opp-darken-on-hover:hover {
    color: #e97b13;
}
.opp-danger-color {
    color: #C0112F;
}
.opp-danger-color-darkened, .opp-danger-color.opp-darken-on-hover:hover {
    color: #b2102c;
}

/* Border color styles */
/* Those are -top-bottom-left-right-x(left+right)-y(top+bottom) */
/* This pattern is taken from Bootstrap: https://getbootstrap.com/docs/4.0/utilities/spacing/ */
.opp-primary-color-border {
    border-color: #B4975B;
}
.opp-primary-color-border-darkened, .opp-primary-color-border.opp-darken-on-hover:hover {
    border-color: #af9051;
}
.opp-secondary-color-border {
    border-color: #016647;
}
.opp-secondary-color-border-darkened, .opp-secondary-color-border.opp-darken-on-hover:hover {
    border-color: #01573c;
}
.opp-success-color-border {
    border-color: #7CBB3E;
}
.opp-success-color-border-darkened, .opp-success-color-border.opp-darken-on-hover:hover {
    border-color: #69d101;
}
.opp-warning-color-border {
    border-color: #EFB91C;
}
.opp-warning-color-border-darkened, .opp-warning-color-border.opp-darken-on-hover:hover {
    border-color: #ebb311;
}
.opp-alert-color-border {
    border-color: #ED831E;
}
.opp-alert-color-border-darkened, .opp-alert-color-border.opp-darken-on-hover:hover {
    border-color: #e97b13;
}
.opp-danger-color-border {
    border-color: #C0112F;
}
.opp-danger-color-border-darkened, .opp-danger-color-border.opp-darken-on-hover:hover {
    border-color: #b2102c;
}

/* Border colors for t-b-l-r-x-y */
.opp-primary-color-border-t {
    border-top-color: #B4975B;
}
.opp-primary-color-border-t-darkened, .opp-primary-color-border-t.opp-darken-on-hover:hover {
    border-top-color: #af9051;
}
.opp-secondary-color-border-t {
    border-top-color: #016647;
}
.opp-secondary-color-border-t-darkened, .opp-secondary-color-border-t.opp-darken-on-hover:hover {
    border-top-color: #01573c;
}
.opp-success-color-border-t {
    border-top-color: #7CBB3E;
}
.opp-success-color-border-t-darkened, .opp-success-color-border-t.opp-darken-on-hover:hover {
    border-top-color: #69d101;
}
.opp-warning-color-border-t {
    border-top-color: #EFB91C;
}
.opp-warning-color-border-t-darkened, .opp-warning-color-border-t.opp-darken-on-hover:hover{
    border-top-color: #ebb311;
}
.opp-alert-color-border-t {
    border-top-color: #ED831E;
}
.opp-alert-color-border-t-darkened, .opp-alert-color-border-t.opp-darken-on-hover:hover {
    border-top-color: #e97b13;
}
.opp-danger-color-border-t {
    border-top-color: #C0112F;
}
.opp-danger-color-border-t-darkened, .opp-danger-color-border-t.opp-darken-on-hover:hover {
    border-top-color: #b2102c;
}

.opp-primary-color-border-b {
    border-bottom-color: #B4975B;
}
.opp-primary-color-border-b-darkened, .opp-primary-color-border-b.opp-darken-on-hover:hover {
    border-bottom-color: #af9051;
}
.opp-secondary-color-border-b {
    border-bottom-color: #016647;
}
.opp-secondary-color-border-b-darkened, .opp-secondary-color-border-b.opp-darken-on-hover:hover {
    border-bottom-color: #01573c;
}
.opp-success-color-border-b {
    border-bottom-color: #7CBB3E;
}
.opp-success-color-border-b-darkened, .opp-success-color-border-b.opp-darken-on-hover:hover {
    border-bottom-color: #69d101;
}
.opp-warning-color-border-b {
    border-bottom-color: #EFB91C;
}
.opp-warning-color-border-b-darkened, .opp-warning-color-border-b.opp-darken-on-hover:hover {
    border-bottom-color: #ebb311;
}
.opp-alert-color-border-b {
    border-bottom-color: #ED831E;
}
.opp-alert-color-border-b-darkened, .opp-alert-color-border-b.opp-darken-on-hover:hover {
    border-bottom-color: #e97b13;
}
.opp-danger-color-border-b {
    border-bottom-color: #C0112F;
}
.opp-danger-color-border-b-darkened, .opp-danger-color-border-b.opp-darken-on-hover:hover {
    border-bottom-color: #b2102c;
}

.opp-primary-color-border-l {
    border-left-color: #B4975B;
}
.opp-primary-color-border-l-darkened, .opp-primary-color-border-l.opp-darken-on-hover:hover {
    border-left-color: #af9051;
}
.opp-secondary-color-border-l {
    border-left-color: #016647;
}
.opp-secondary-color-border-l-darkened, .opp-secondary-color-border-l.opp-darken-on-hover:hover {
    border-left-color: #01573c;
}
.opp-success-color-border-l {
    border-left-color: #7CBB3E;
}
.opp-success-color-border-l-darkened, .opp-success-color-border-l.opp-darken-on-hover:hover {
    border-left-color: #69d101;
}
.opp-warning-color-border-l {
    border-left-color: #EFB91C;
}
.opp-warning-color-border-l-darkened, .opp-warning-color-border-l.opp-darken-on-hover:hover {
    border-left-color: #ebb311;
}
.opp-alert-color-border-l {
    border-left-color: #ED831E;
}
.opp-alert-color-border-l-darkened, .opp-alert-color-border-l.opp-darken-on-hover:hover {
    border-left-color: #e97b13;
}
.opp-danger-color-border-l {
    border-left-color: #C0112F;
}
.opp-danger-color-border-l-darkened, .opp-danger-color-border-l.opp-darken-on-hover:hover {
    border-left-color: #b2102c;
}

.opp-primary-color-border-r {
    border-right-color: #B4975B;
}
.opp-primary-color-border-r-darkened, .opp-primary-color-border-r.opp-darken-on-hover:hover {
    border-right-color: #af9051;
}
.opp-secondary-color-border-r {
    border-right-color: #016647;
}
.opp-secondary-color-border-r-darkened, .opp-secondary-color-border-r.opp-darken-on-hover:hover {
    border-right-color: #01573c;
}
.opp-success-color-border-r {
    border-right-color: #7CBB3E;
}
.opp-success-color-border-r-darkened, .opp-success-color-border-r.opp-darken-on-hover:hover {
    border-right-color: #69d101;
}
.opp-warning-color-border-r {
    border-right-color: #EFB91C;
}
.opp-warning-color-border-r-darkened, .opp-warning-color-border-r.opp-darken-on-hover:hover {
    border-right-color: #ebb311;
}
.opp-alert-color-border-r {
    border-right-color: #ED831E;
}
.opp-alert-color-border-r-darkened, .opp-alert-color-border-r.opp-darken-on-hover:hover {
    border-right-color: #e97b13;
}
.opp-danger-color-border-r {
    border-right-color: #C0112F;
}
.opp-danger-color-border-r-darkened, .opp-danger-color-border-r.opp-darken-on-hover:hover {
    border-right-color: #b2102c;
}

.opp-primary-color-border-x {
    border-left-color: #B4975B;
    border-right-color: #B4975B;
}
.opp-primary-color-border-x-darkened, .opp-primary-color-border-x.opp-darken-on-hover:hover {
    border-left-color: #af9051;
    border-right-color: #af9051;
}
.opp-secondary-color-border-x {
    border-left-color: #016647;
    border-right-color: #016647;
}
.opp-secondary-color-border-x-darkened, .opp-secondary-color-border-x.opp-darken-on-hover:hover {
    border-left-color: #01573c;
    border-right-color: #01573c;
}
.opp-success-color-border-x {
    border-left-color: #7CBB3E;
    border-right-color: #7CBB3E;
}
.opp-success-color-border-x-darkened, .opp-success-color-border-x.opp-darken-on-hover:hover {
    border-left-color: #69d101;
    border-right-color: #69d101;
}
.opp-warning-color-border-x {
    border-left-color: #EFB91C;
    border-right-color: #EFB91C;
}
.opp-warning-color-border-x-darkened, .opp-warning-color-border-x.opp-darken-on-hover:hover {
    border-left-color: #ebb311;
    border-right-color: #ebb311;
}
.opp-alert-color-border-x {
    border-left-color: #ED831E;
    border-right-color: #ED831E;
}
.opp-alert-color-border-x-darkened, .opp-alert-color-border-x.opp-darken-on-hover:hover {
    border-left-color: #e97b13;
    border-right-color: #e97b13;
}
.opp-danger-color-border-x {
    border-left-color: #C0112F;
    border-right-color: #C0112F;
}
.opp-danger-color-border-x-darkened, .opp-danger-color-border-x.opp-darken-on-hover:hover {
    border-left-color: #b2102c;
    border-right-color: #b2102c;
}

.opp-primary-color-border-y {
    border-top-color: #B4975B;
    border-bottom-color: #B4975B;
}
.opp-primary-color-border-y-darkened, .opp-primary-color-border-y.opp-darken-on-hover:hover {
    border-top-color: #af9051;
    border-bottom-color: #af9051;
}
.opp-secondary-color-border-y {
    border-top-color: #016647;
    border-bottom-color: #016647;
}
.opp-secondary-color-border-y-darkened, .opp-secondary-color-border-y.opp-darken-on-hover:hover {
    border-top-color: #01573c;
    border-bottom-color: #01573c;
}
.opp-success-color-border-y {
    border-top-color: #7CBB3E;
    border-bottom-color: #7CBB3E;
}
.opp-success-color-border-y-darkened, .opp-success-color-border-y.opp-darken-on-hover:hover {
    border-top-color: #69d101;
    border-bottom-color: #69d101;
}
.opp-warning-color-border-y {
    border-top-color: #EFB91C;
    border-bottom-color: #EFB91C;
}
.opp-warning-color-border-y-darkened, .opp-warning-color-border-y.opp-darken-on-hover:hover {
    border-top-color: #ebb311;
    border-bottom-color: #ebb311;
}
.opp-alert-color-border-y {
    border-top-color: #ED831E;
    border-bottom-color: #ED831E;
}
.opp-alert-color-border-y-darkened, .opp-alert-color-border-y.opp-darken-on-hover:hover {
    border-top-color: #e97b13;
    border-bottom-color: #e97b13;
}
.opp-danger-color-border-y {
    border-top-color: #C0112F;
    border-bottom-color: #C0112F;
}
.opp-danger-color-border-y-darkened, .opp-danger-color-border-y.opp-darken-on-hover:hover {
    border-top-color: #b2102c;
    border-bottom-color: #b2102c;
}