/*CSS for buttons*/
/*OB - OTBASY BANK*/
/* CSS NEED TO BE NAMED AS  OB-{{NAME OF CLASS OR ID}}-{{COLOR AND ETC.}} */

.ob-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 20px;
    gap: 8px;
    border-radius: 6px;
    justify-content: center;
}

.ob-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 20px;
    gap: 8px;
    border-radius: 6px;
    justify-content: center;
}

button:disabled,
button[disabled] {
    background-color: #EFEFEF !important;
    color: #99A0A1 !important;
}

.ob-btn-white, button[type=button].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;
    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-tangerine:disabled {
        background-color: #F5F6F8;
        color: #ADB2B2 !important;
        border: 1px solid #F5F6F8;
    }

.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) !important;
    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-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-light-gray {
    background: var(--Light-Gray, #EBEFF1);
    border: none;
}

    .ob-btn-light-gray:hover, .ob-btn-light-gray:active, .ob-btn-light-gray:focus {
        box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.18);
    }

.ob-btn-red {
    background: #ED3A32;
    border: none;
    color: white;
}

    .ob-btn-red:hover, .ob-btn-red:active, .ob-btn-red:focus {
        box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.18);
    }


.ob-btn-check-teal {
    background: var(--Light-Gray, #EBEFF1);
    border: none;
    cursor: pointer;
}

    .ob-btn-check-teal.checked {
        background: var(--Brand-green, #008F91);
        color: var(--White, #FFF) !important;
        border: none;
    }


.ob__btn__mid__blue {
    background: #DAE6F8;
    border: none;
    cursor: pointer;
}