﻿.ob__btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 20px;
    gap: 8px;
    border-radius: 6px;
    justify-content: center;
    width: max-content;
    box-shadow: none !important;
}

    .ob__btn:focus, .ob__btn:active {
        outline: 0px auto -webkit-focus-ring-color;
    }

button:disabled,
button[disabled] {
    background-color: #EFEFEF !important;
    color: #99A0A1 !important;
}

.ob__btn__white {
    border: 1px solid var(--Dark-gray, #8A8C99);
    background: var(--White, #FFF);
    color: #19181B !important;
}

    .ob__btn__white:hover {
        border: 1px solid var(--Dark-gray, #8A8C99);
        background: var(--White, #FFF);
        box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.10);
    }

    .ob__btn__white:active,
    .ob__btn__white:focus {
        border: 1px solid var(--Dark-gray, #8A8C99);
        background: var(--Neutral-gray, #D2D4D9);
    }

.ob__btn__tangerine {
    background-color: #F05E22 !important;
    color: white !important;
    border: none;
}

    .ob__btn__tangerine:hover {
        box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.18);
        border: none;
    }

    .ob__btn__tangerine:active, .ob__btn__tangerine:hover {
        background-color: #BD5B00;
        border: none;
    }


.ob__btn__blue {
    background: #007FF5;
    color: var(--White, #FFF);
    border: none;
}

    .ob__btn__blue:hover {
        background: #1F46CD;
        box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.18);
    }

    .ob__btn__blue:active,
    .ob__btn__blue:focus {
        background: var(--Dark-blue, #004595);
    }

.ob__btn__teal {
    background: var(--Brand-green, #008F91);
    color: var(--White, #FFF);
    border: none;
}

    .ob__btn__teal:hover {
        box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.18);
    }

    .ob__btn__teal:active,
    .ob__btn__teal:focus {
        background: var(--Brand-green-hover, #16604F);
    }

.ob__btn__outline__blue {
    border: 1px solid var(--Mid-blue, #92B5EA);
    background: var(--White, #FFF);
    color: var(--Neutral-blue, #3D62E3);
}

    .ob__btn__outline__blue:hover {
        border: 1px solid var(--Neutral-blue, #3D62E3);
        box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.10);
    }

.ob__btn__outline__red {
    border: 1px solid var(--error, #ED3A32);
    background: var(--white-background, #FFF);
    color: #ED3A32;
}

    .ob__btn__outline__red:hover {
        border: 1px solid var(--Dark-red, #B7150E);
        box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.10);
        color: #B7150E;
    }

    .ob__btn__outline__red:active, .ob__btn__outline__red:focus, .ob__btn__outline__blue:hover, .ob__btn__outline__blue:active {
        border: 1px solid var(--Dark-gray, #8A8C99);
        background: var(--Neutral-gray, #D2D4D9);
        color: var(--Dark-gray, #8A8C99);
    }


.ob__btn__gray {
    background-color: #A9A9A9;
    color: white !important;
    border: 1px solid #A9A9A9;
    border-radius: 6px;
}

.ob__btn__black {
    background: #19181B !important;
    color: #fff !important;
    border: none;
}

    .ob__btn__black:hover {
        box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.18);
    }

    .ob__btn__black:active, .ob__btn__black:focus, .ob__btn__black:active:hover, .ob__btn__black:focus:hover {
        background: var(--Brand-green-hover, #16604F);
    }

.ob__btn__mid__blue {
    background: #DAE6F8;
    border: none;
    cursor: pointer;
    border-radius: 6px;
}

/*primary*/
.ob__lib-button-primary {
    background: var(--Teal-500, #0E7D7D);
    color: #FFFFFF;
    display: inline-block;
    align-content: center;
    text-decoration: none;
    border: 1px solid var(--Teal-500, #0E7D7D);
}

    .ob__lib-button-primary:hover {
        background: #006E70;
        box-shadow: 0px 8px 14px 0px #0000002E;
        color: #ffffff;
    }

    .ob__lib-button-primary:focus {
        background: #004645;
    }

    .ob__lib-button-primary:disabled {
        background: #D1D4D7;
        color: #7A7E81;
        border-color: #D1D4D7;
    }

    .ob__lib-button-primary:disabled {
        box-shadow: none;
    }

.cursor-pointer {
    cursor: pointer;
}

.ob__lib-button-tangerine {
    background: #F05E22;
    color: #FFFFFF;
    display: inline-block;
    align-content: center;
    text-decoration: none;
    border: 1px solid #F05E22;
}

.ob__lib-button-secondary {
    background: transparent;
    color: #333839;
    display: inline-block;
    align-content: center;
    text-decoration: none;
    border: 1px solid #ADB0B2;
}