/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes scaleIn {
    to {
        transform: scale(1);
    }
}
@keyframes formFadeIn {
    from {
        opacity: 0;
    }
    50% {
    }
    to {
        opacity: 1;
    }
}
@keyframes formTranslateIn {
    from {
        transform: translateY(30px);
    }
    to {
        transform: translateY(0);
    }
}

@font-face {
    font-family: 'Readex Pro';
    font-style: normal;
    src: url('../fonts/ReadexPro-Bold.ttf');
    font-display: swap;
}
/* Button */






.bb-button-bar__button:first-child {
    margin-inline-end: 0rem;
    background-color: #5D452B !important;
    border-color: #5D452B !important;
    border-radius: 16px !important;
    color: #fff!important;

}
@media (min-width: 576px) {

    .bb-button-bar__button:first-child {
        margin-inline-end: 0rem;
        background-color: #5D452B !important;
        border-color: #5D452B !important;
        border-radius: 16px !important;
        color: #fff!important;

    }
}
h1 {
    font-family: "Readex Pro";
}

.bb-dropdown-btn-group-wrapper button.dropdown-toggle {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--light-mode-primary-default, #5D452B);
    color: var(--light-mode-typography-primary, #5D452B);
    border-radius: 16px;
}
.bb-dropdown-btn-group-wrapper .bb-dropdown-btn-group-wrapper:focus {
    border-color: #5D452B;
    border-radius: 16px!important;

}
.bb-dropdown-btn-group-wrapper:hover, .bb-dropdown-btn-group-wrapper:focus   .bb-dropdown-btn-group-wrapper:active{
    background-color: #5D452B;
    color: #000000;
    text-decoration: none;
    border-radius: 16px!important;

}
/*.dropdown-menu-right {*/
/*  left: -100px !important;*/
/*}*/
/*.dropdown-menu-left {*/
/*  right: -100px !important;*/
/*}*/
a {
    color:#3C3C3B;
}

a:hover {
    color: var(--light-mode-typography-primary, #5D452B);
}
.bb-button-bar--reverse {
    flex-direction: row;
}
.bb-button-bar--reverse .bb-button-bar__button:first-child {
    margin-inline-end: 0.5rem;
    background-color: #5D452B!important;
    border-color:#5D452B!important ;
    border-radius: 16px!important;
    color: #fff!important;

}
.bb-button-bar--reverse .bb-button-bar__button:first-child.btn-sm, .bb-button-bar--reverse .btn-group-sm > .bb-button-bar__button.btn:first-child {
    margin-inline-end: 0.5rem;
    background-color: #5D452B!important;
    border-color:#5D452B!important ;
    border-radius: 16px!important;
    color: #fff!important;

}
.bb-button-bar--reverse .bb-button-bar__button:last-child {
    margin-inline-end: 0!important;
    background-color: #5D452B!important;
    border-color:#5D452B!important ;
    border-radius: 16px!important;
}
.bb-button-bar--reverse .bb-button-bar__button:last-child:hover {
    margin-inline-end: 0!important;
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), #5D452B;
    border: none!important;
    color: #fff!important;
    border-radius: 16px!important;

}

.bb-button-bar--reverse:active  .bb-button-bar__button:last-child::before {
    border-color: #c5afaf!important;
    border-style: solid!important;
    border-width: 1px!important;
    outline: 3px solid #5D452B!important;
    outline-offset: 2px!important;
    box-shadow: none!important;
    border-radius: 16px!important;

}
.bb-button-bar--reverse:active  .bb-button-bar__button:last-child::after {
    border-color: #c5afaf!important;
    border-style: solid!important;
    border-width: 1px!important;
    outline: 3px solid #5D452B!important;
    outline-offset: 2px!important;
    box-shadow: none!important;
    border-radius: 16px!important;
}


button.bb-button-bar__button:hover {
    margin-inline-end: 0!important;
    border: none!important;
    color: #fff!important;
    border-radius: 16px!important;

}

button.bb-button-bar__button::before {
    border-color: #c5afaf!important;
    border-style: solid!important;
    border-width: 1px!important;
    outline: 3px solid #5D452B!important;
    outline-offset: 2px!important;
    box-shadow: none!important;
    border-radius: 16px!important;

}
button.bb-button-bar__button::after {
    border-color: #c5afaf!important;
    border-style: solid!important;
    border-width: 1px!important;
    outline: 3px solid #5D452B!important;
    outline-offset: 2px!important;
    box-shadow: none!important;
    border-radius: 16px!important;
}
.btn-link-text, .btn-link-text-light {
    --bs-btn-color: rgba(255, 255, 255, 0);
    --bs-btn-bg: rgba(255, 255, 255, 0);
    --bs-btn-border-color: rgba(255, 255, 255, 0);
    --bs-btn-hover-color: rgba(255, 255, 255, 0);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0);
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.2);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.1);
    --bs-btn-active-shadow: 0 0 0 3px #dfe7ff;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: rgba(255, 255, 255, 0);
    --bs-btn-disabled-border-color: rgba(255, 255, 255, 0);
    padding: 0;
    color: #5D452B!important;
    border: none;
    border-radius: 0;
    opacity: 1;
}

.bb-stack-secondary {
    color:white!important;
    margin-inline-end: 1rem;
    margin-inline-start: 0;
    background-color: transparent!important;
    display: contents!important;
}

.bb-stack {
    margin-inline-end: 1rem;
    margin-inline-start: 0;
    color: #5D452B!important;
    background-color: transparent!important;
}
/* Background */
body {
    background-color: white;
}
.identity-page--ready.identity-page--background-1 .identity-bg-layout {
    background-image: url("../img/01.jpg");
}
.identity-page--ready.identity-page--background-2 .identity-bg-layout {
    background-image:  url("../img/02.jpg");
}
.identity-page--ready.identity-page--background-3 .identity-bg-layout {
    background-image:  url("../img/03.jpg");
}
.identity-page--ready.identity-page--background-4 .identity-bg-layout {
    background-image:  url("../img/04.jpg");
}
.identity-page--ready.identity-page--background-5 .identity-bg-layout {
    background-image: url("../img/05.jpg");
}
.identity-page--ready.identity-page--background-6 .identity-bg-layout {
    background-image: url("../img/06.jpg");
}

.identity-page--ready.identity-page--background-7 .identity-bg-layout {
    background-image: url("../img/07.jpg");
}

.identity-bg-layout {
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.1);
    margin-right: 0;
}
.identity-page--ready .identity-bg-layout {
    animation-delay: 0.15s;
    animation-duration: 0.35s, 0.45s;
    animation-fill-mode: forwards;
    animation-name: fadeIn, scaleIn;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94),
    cubic-bezier(0.075, 0.82, 0.165, 1);
    opacity: 0;
    animation-delay: 0.3s;
    animation-duration: 0.5s, 1s;
}
@media (max-width: 428px) {
    .identity-bg-layout {
        display: none;
    }
}
@media (min-width: 428px) and (max-width: 991px) {
    .identity-bg-layout {
        height: 35%;
    }
}

/* Form Container */

.identity-logo {
    background-image: url(../img/logoLightBig.png);
    background-repeat: no-repeat;
    width: 16rem;
    height: 8rem;
}

.identity-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}
@media (max-width: 991px) {
    .identity-container {
        min-height: 65%;
        height: unset;
    }
}
.identity-container ol {
    padding-left: 1rem;
    font-size: 0.875rem;
}
.identity-container__panel {
    animation-delay: 0.525s;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 2rem;
}
.identity-container__panel.identity-container__panel--animated {
    animation-delay: 0s;
    animation-duration: 0.35s, 0.4s;
    animation-fill-mode: forwards;
    animation-name: formFadeIn, formTranslateIn;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94),
    cubic-bezier(0.075, 0.82, 0.165, 1);
    opacity: 0;
}
.identity-container__form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 464px;
    padding: 0 2rem;
    overflow-x: hidden !important;
}
.identity-page-wide .identity-container__form {
    max-width: 564px;
}
.identity-page-narrow .identity-container__form {
    max-width: 400px;
}
.identity-qr-code {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
}
.identity-section {
    margin: -0.5rem;
    padding: 0.5rem;
    white-space: normal;
    font-weight: normal;
    border-radius: 0.5rem;
}
.identity-section--highlight:focus {
    outline: 0;
    box-shadow: 0 0 0 3px #5d452b;
    border-radius: 0.5rem;
    margin: -0.5rem;
    padding: 0.5rem;
}
.bb-terms-container {
    max-height: 50vh;
    overflow: scroll;
    margin: 1rem 0;
}
@media (max-width: 428px) {
    .bb-terms-container {
        max-height: 40vh;
    }

    .identity-container__form {
        padding: 0;
    }
}

/* Theme Modifications */
.identity-locale {
    z-index: 1;
    align-self: flex-end;
}

/* Hide arrow icons on otp input */
input.identity-otp-input::-webkit-outer-spin-button,
input.identity-otp-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input.identity-otp-input[type=number] {
    -moz-appearance: textfield;
}

/* Fix for hr disappearing in a flex container */
hr.identity-separator {
    margin-left: 0;
    margin-right: 0;
}

.identity-button-break {
    white-space: normal;
    text-align: left;
}

.bb-input-password__input.is-invalid + .btn {
    border-color: var(--danger);
}
.bb-input-password__input:focus {
    border-color:  #5D452B!important;
}
.bb-input-password__input:active {
    border-color:  #5D452B!important;
}

.form-control:focus {
    border-color:  #5D452B!important;
}
.form-control:active {
    border-color:  #5D452B!important;
}
.identity-card-section:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 3px #5d452b;
    background-color: #f2f2f2;
}

.identity-card-section:hover {
    background-color: #f2f2f2;
}

.identity-card-section::after {
    border-bottom: none;
    content: "";
}

.bb-card:not(.bb-card--ignore).identity-card--outline {
    border: 1px solid #d3d3d3;
}

.bb-card:not(.bb-card--ignore).identity-card--outline:focus {
    outline: 0;
    box-shadow: 0 0 0 3px #5d452b;
}

.identity-dropdown-menu--full-width {
    width: 100%;
}

.identity-letter-spacing {
    letter-spacing: 5px;
}

/*
 * Ensures phone number directions are LTR orientated.
 * This should only be used where the phone number appears on it's own.
 * Replace once ui-ang has a similar CSS class.
 */
.ltr-phone {
    direction: ltr;
    text-align: right;
}

.dropdown-menu-left {
    left: 0;
}



.bb-dropdown-btn-group-wrapper button.dropdown-toggle:hover{
    border-radius: 16px!important;
    background: var(--light-mode-primary-default, #5D452B)!important;
    border: none!important;
}

.bb-dropdown-btn-group-wrapper:focus button.dropdown-toggle:focus{
    color: #fff!important;
    border:transparent!important;
    background: var(--light-mode-primary-darkest, linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 100%), #5D452B)!important;
}

.dropdown-toggle:focus{
    color: #fff!important;
    border:transparent!important;
    background: var(--light-mode-primary-darkest, linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 100%), #5D452B)!important;
}



.dropdown-toggle::before{
    color: #fff!important;
    border:transparent!important;
    background-color: transparent!important;
}

.dropdown-toggle::after{
    color: #c5afaf!important;
    border:#5D452B!important;
    background-color: transparent!important;
}


.form-control:focus, .bb-phone .bb-phone-country-code.ng-select.ng-select-single .ng-select-container:focus, .bb-country-selector.ng-select.ng-select-multiple .ng-select-container:focus {
    border-color: #c5afaf!important;
    border-style: solid!important;
    border-width: 1px!important;
    outline: 3px solid #5D452B!important;
    outline-offset: 4px!important;
    box-shadow: none!important;
}

.btn.btn-circle.btn-md {
    width: 2.7rem;
    height: 2.7rem;
    border-color: #5D452B!important;
    color: #5D452B!important;

}

.btn.btn-circle.btn-md:hover {
    background-color: #5D452B;
    border-color: #5D452B;
    color: #fff;

}

.btn.btn-circle.btn-md:active {
    background-color: #5D452B;
    border-color: #5D452B;
    color: #fff;

}
.btn-link-text::before {
    color: #5D452B !important;
    border-color: #5D452B !important;
}


.btn.btn-circle.btn-md::before {
    border-color: #5D452B!important;
}
.btn:not(.btn-unstyled):focus::before {
    position: absolute;
    inset: -8px;

    border-radius: 20rem;

}
.bb-stack__item:focus::before {
    border: 3px solid #5D452B;
}

[data-role="otp-choice__sms-description"] {
    unicode-bidi: plaintext;
}
.bg-primary {
    color: #fff !important;
    background-color: RGBA(93,69,43,1) !important;
}

.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item:focus-visible {
    outline: none !important;
    border-color: #5D452B !important;
    box-shadow: 0 0 0 3px  #5D452B !important;
}

.btn-link-text:not(:disabled):not(.disabled):hover .bb-icon {
    color: #5D452B !important;
}
.btn:not(.dropdown-menu):not(.disabled):not(:disabled):hover .bb-icon{
    color: #5D452B !important;
    border-color: #5D452B !important;
}
#bb-toggle-password-visibility-button {
    border: 2px solid #5D452B !important;
}



.bb-icon.bb-icon-visibility {
    color: #5D452B !important;
}

#bb-toggle-password-visibility-button:hover .bb-icon.bb-icon-visibility {
    color: #5D452B !important;
}

.input-group .btn:not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):not(:first-child) {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    border-color: #5D452B !important;
}
.btn-link:not(:disabled):not(.disabled):hover .bicon, .btn-link:not(:disabled):not(.disabled):hover .bb-transaction-category, .btn-link:not(:disabled):not(.disabled):hover .bb-icon, .btn-link:not(:disabled):not(.disabled):hover .bb-wealth-table-sortable [aria-hidden=true]::before, .bb-wealth-table-sortable .btn-link:not(:disabled):not(.disabled):hover [aria-hidden=true]::before, .btn-link:not(:disabled):not(.disabled):hover .table thead th.sortable .th-content [aria-hidden=true]::before, .table thead th.sortable .th-content .btn-link:not(:disabled):not(.disabled):hover [aria-hidden=true]::before {
    color: #5D452B!important;
}
.btn:not(.btn-unstyled):focus::before {
    border: 3px solid #5D452B!important;


}