.b1 {
    color: #ffffff;
    background-color: #0099f0;
    border: none;
}

@media (hover: hover) and (pointer: fine) {
    .b1:hover {
        background-color: rgba(0, 153, 240, 0.54);
    }
}

.b1.noHover {
    color: #ffffff;
    background-color: #0099f0;
    border: none;
    pointer-events: none;
}

.b1:active {
    background-color: #007acd;
}

.b1.disabled, .b1[disabled="disabled"], .b1[disabled], .b1.inactive {
    background-color: rgba(47, 59, 91, 0.26);
    opacity: 0.4;
}

.b2 {
    color: #0099f0;
    border: solid 1px rgba(47, 59, 91, 0.26);
    background-color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
    .b2:hover {
        background-color: rgba(0, 153, 240, 0.12);
    }
}

.b2:active {
    background-color: rgba(0, 153, 240, 0.26);
}

.b2.disabled, .b2[disabled="disabled"], .b2[disabled], .b2.inactive {
    color: rgba(47, 59, 91, 0.26);
    border: solid 1px rgba(47, 59, 91, 0.08);
    background-color: #ffffff;
    opacity: 1;
}

.b2.button-left {
    color: unset;
}

    .b2.button-left:hover {
        background-color: unset;
    }

.b4 {
    color: #59d6fd;
    border: solid 1px #59d6fd;
    background-color: black;
}

@media (hover: hover) and (pointer: fine) {
    .b4:hover {
        background-color: rgba(89, 214, 253, 0.26);
    }
}

.b4:active {
    background-color: rgba(89, 214, 253, 0.54);
}

.b4.disabled, .b4[disabled="disabled"], .b4[disabled], .b4.inactive {
    color: rgba(89, 214, 253, 0.54);
    border: solid 1px rgba(89, 214, 253, 0.26);
    background-color: black;
    opacity: 1;
}

/*New Customer UI*/

.client-page.new-ui .b1 {
    color: var(--lds-brand-color-on-primary);
    background-color: var(--lds-brand-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .client-page.new-ui .b1:hover {
        background-color: var(--lds-brand-color-primary-hover);
    }
}

.client-page.new-ui .b1.noHover {
    color: var(--lds-brand-color-on-primary);
    background-color: var(--lds-brand-color-primary);
}

.client-page.new-ui .b1:active {
    background-color: var(--lds-brand-color-primary);
}

.client-page.new-ui .b1.disabled,
.client-page.new-ui .b1[disabled="disabled"],
.client-page.new-ui .b1[disabled],
.client-page.new-ui .b1.inactive {
    opacity: 1;
    background-color: var(--lds-color-neutral-transparent-300);
    color: var(--lds-color-font-disabled);
}

.client-page.new-ui .b2 {
    color: var(--lds-brand-color-font-primary-base);
    border: solid 1px var(--lds-color-border-dark);
    background-color: var(--lds-color-background-base);
}

@media (hover: hover) and (pointer: fine) {
    .client-page.new-ui .b2:hover {
        background-color: var(--lds-brand-color-interaction-primary-hover);
    }
}

.client-page.new-ui .b2:active {
    background-color: var(--lds-brand-color-interaction-primary-focus);
}

.client-page.new-ui .b2.disabled,
.client-page.new-ui .b2[disabled="disabled"],
.client-page.new-ui .b2[disabled],
.client-page.new-ui .b2.inactive {
    color: var(--lds-color-font-disabled);
    border: solid 1px var(--lds-color-border-light);
    background-color: var(--lds-color-background-base);
}

.client-page.new-ui .b3 {
    color: var(--lds-color-font-base);
    border: solid 1px var(--lds-color-border-dark);
    background-color: var(--lds-color-background-base);
}

@media (hover: hover) and (pointer: fine) {
    .client-page.new-ui .b3:hover {
        background-color: var(--lds-color-interaction-hover);
    }
}

.client-page.new-ui .b3:active {
    background-color: var(--lds-color-interaction-focus);
}

.client-page.new-ui .b3.disabled,
.client-page.new-ui .b3[disabled="disabled"],
.client-page.new-ui .b3[disabled],
.client-page.new-ui .b3.inactive {
    color: var(--lds-color-font-disabled);
    border: solid 1px var(--lds-color-border-light);
    background-color: var(--lds-color-background-base);
}