:root {
    --primary: #4f2683;
    --primary-darker: #371b5c;
    --accent: #d5e04e;
    --accent-darker: #959d37;
    --info: #008bb0;
    --text-support: #7c6a55;
    --success: #5c8727;
    --warning: #e58e1a;
    --error: #c3343e;
    --bs-btn-disabled-opacity: .65;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: #3d3d3d;
}

.input-group-prepend .btn,
.input-group-append .btn {
    color: #3d3d3d;
}

/* Logo */
.identity-logo {
    background-image: url(../assets/images/logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    width: 160px;
    height: 120px;
}

/* Input */
input,
.input-group-append .btn,
.input-group-append .btn:not(.disabled):not(:disabled):focus,
.form-control,
.bb-country-selector.ng-select.ng-select-multiple .ng-select-container,
.bb-select-list.ng-select.ng-select-single .ng-select-container,
.bb-select-list.ng-select.ng-select-multiple .ng-select-container {
    border-color: var(--accent);
}

.input-group-append .btn:not(.btn-unstyled):focus::before {
    border: none;
}

.form-control:focus ~ .input-group-append,
.form-control:focus ~ .input-group-append .btn:not(.disabled):not(:disabled) {
    border-color: var(--accent-darker) !important;
}

.input-group-prepend .btn:not(.disabled):not(:disabled):hover,
.input-group-prepend .btn:not(.disabled):not(:disabled):hover .bb-icon,
.input-group-append .btn:not(.disabled):not(:disabled):hover,
.input-group-append .btn:not(.disabled):not(:disabled):hover .bb-icon {
    color: var(--accent) !important;
}

.btn:not(.btn-unstyled):focus::before.btn-primary {
    border-color: var(--primary) !important;
}

.form-control[type="text"]:focus,
.bb-country-selector.ng-select.ng-select-multiple .ng-select-container[type="text"]:focus,
.bb-select-list.ng-select.ng-select-single .ng-select-container[type="text"]:focus,
.bb-select-list.ng-select.ng-select-multiple .ng-select-container[type="text"]:focus,
.form-control[type="number"]:focus,
.bb-country-selector.ng-select.ng-select-multiple .ng-select-container[type="number"]:focus,
.bb-select-list.ng-select.ng-select-single .ng-select-container[type="number"]:focus,
.bb-select-list.ng-select.ng-select-multiple .ng-select-container[type="number"]:focus,
.form-control[type="email"]:focus,
.bb-country-selector.ng-select.ng-select-multiple .ng-select-container[type="email"]:focus,
.bb-select-list.ng-select.ng-select-single .ng-select-container[type="email"]:focus,
.bb-select-list.ng-select.ng-select-multiple .ng-select-container[type="email"]:focus,
.form-control[type="password"]:focus,
.bb-country-selector.ng-select.ng-select-multiple .ng-select-container[type="password"]:focus,
.bb-select-list.ng-select.ng-select-single .ng-select-container[type="password"]:focus,
.bb-select-list.ng-select.ng-select-multiple .ng-select-container[type="password"]:focus,
.form-control[type="tel"]:focus,
.bb-country-selector.ng-select.ng-select-multiple .ng-select-container[type="tel"]:focus,
.bb-select-list.ng-select.ng-select-single .ng-select-container[type="tel"]:focus,
.bb-select-list.ng-select.ng-select-multiple .ng-select-container[type="tel"]:focus,
.form-control[type="search"]:focus,
.bb-country-selector.ng-select.ng-select-multiple .ng-select-container[type="search"]:focus,
.bb-select-list.ng-select.ng-select-single .ng-select-container[type="search"]:focus,
.bb-select-list.ng-select.ng-select-multiple .ng-select-container[type="search"]:focus {
    border-style: solid;
    border-width: 1px;
    outline: none;
    border-color: var(--accent-darker);
    box-shadow: none;
}

/* Background img */
.full-background-container.identity-page--ready.identity-page--background-1 .identity-bg-layout {
    background-image: url("../assets/images/ewb-login-bg.jpg");
}
.full-background-container.identity-page--ready.identity-page--background-2 .identity-bg-layout {
    background-image: url("../assets/images/ewb-login-bg.jpg");
}
.full-background-container.identity-page--ready.identity-page--background-3 .identity-bg-layout {
    background-image: url("../assets/images/ewb-login-bg.jpg");
}
.full-background-container.identity-page--ready.identity-page--background-4 .identity-bg-layout {
    background-image: url("../assets/images/ewb-login-bg.jpg");
}
.full-background-container.identity-page--ready.identity-page--background-5 .identity-bg-layout {
    background-image: url("../assets/images/ewb-login-bg.jpg");
}

.identity-page--ready.identity-page--background-1 .identity-bg-layout {
    background-image: url("../assets/images/ewb-half-bg.jpg");
}
.identity-page--ready.identity-page--background-2 .identity-bg-layout {
    background-image: url("../assets/images/ewb-half-bg.jpg");
}
.identity-page--ready.identity-page--background-3 .identity-bg-layout {
    background-image: url("../assets/images/ewb-half-bg.jpg");
}
.identity-page--ready.identity-page--background-4 .identity-bg-layout {
    background-image: url("../assets/images/ewb-half-bg.jpg");
}
.identity-page--ready.identity-page--background-5 .identity-bg-layout {
    background-image: url("../assets/images/ewb-half-bg.jpg");
}
.simple-logo {
    background-image: url("../assets/images/simple-logo.svg");
    height: 40px;
    width: 40px;
}
.inline-logo {
    background-image: url("../assets/images/inline-logo.svg");
    height: 40px;
    background-repeat: no-repeat;
}

.full-background-container .identity-container__panel {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

@media (min-width: 768px) {
    .full-background-container .identity-container__panel {
        margin: 0 6.5rem;
    }
}

@media (min-width: 1024px) {
    .full-background-container .identity-container__panel {
        align-items: flex-end;
    }
}

.full-background-container .identity-container {
    z-index: 1;
    height: auto;
}

.full-background-container .bb-terms-container {
    max-height: 40vh;
    padding-right: 15px;
}

/* Login Screen */
.identity-container__form {
    height: auto;
    background: white;
    border-radius: 25px;
    padding: 2rem;
    max-width: 500px !important;
    margin: initial;
}

.identity-banner-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

#kc-page-title {
    padding: 1rem 0;
}

.bb-subtitle {
    color: var(--text-support);
    font-size: 14px;
}

.bb-text-support {
    color: var(--text-support);
}

.mt-2 {
    margin-top: 1.5rem;
}

/* Button */
.btn-link-text,
.btn-link-text-light,
#bb-support-dropdown-icon {
    color: var(--primary);
}

.btn-link-text.btn-link-text--primary:not(:disabled):not(.disabled) {
    color: var(--primary);
}

.btn:not(.btn-unstyled):focus::before {
    border: none !important;
}

.btn.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn.btn-secondary {
    border-color: var(--primary);
    color: var(--primary);
}

.btn.btn-secondary:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:focus:not(:hover):not(:active):not(:disabled):not(.disabled) {
    background-color: var(--primary-darker);
    border-color: var(--primary-darker);
}

/* Alert */
.alert.alert-success {
    background-color: var(--success);
    color: white;
}
.alert.alert-error,
.alert.alert-danger {
    background-color: var(--error);
    color: white;
}
.alert.alert-warning {
    background-color: var(--warning);
    color: white;
}
.alert.alert-info {
    background-color: var(--info);
    color: white;
}
.alert-warning .bb-icon,
.alert-info .bb-icon,
.alert-error .bb-icon,
.alert-danger .bb-icon,
.alert-success .bb-icon {
    color: white;
}

/* Custom selector */
.identity-bg-layout {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    overflow: auto;
}

.get-app-qr {
    min-width: 160px;
    max-width: 160px;
    height: 160px;
    background-image: url("../assets/images/east-west-app-qr-code.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.bb-brand-info {
    position: initial;
    font-size: 10px;
}

.bb-stack__item {
    margin: 0 1rem;
}

@media (max-width: 992px) {
    .full-background-container .identity-container__panel {
        align-items: center;
    }

    .full-background-container .identity-container__form {
        max-width: 60vw;
    }

    .full-background-container.identity-page--ready.identity-page--background-1 .identity-bg-layout,
    .full-background-container.identity-page--ready.identity-page--background-2 .identity-bg-layout,
    .full-background-container.identity-page--ready.identity-page--background-3 .identity-bg-layout,
    .full-background-container.identity-page--ready.identity-page--background-4 .identity-bg-layout,
    .full-background-container.identity-page--ready.identity-page--background-5 .identity-bg-layout {
        background-image: url("../assets/images/green-bg.jpg");
    }
}
@media (max-width: 767.98px) {
    .full-background-container .bb-brand-info {
        text-align: center;
    }

    .full-background-container .identity-container__form {
        max-width: none;
        margin-right: 1rem;
    }
}

@media (max-width: 575.98px) {
    .bb-stack__item {
        margin: 0;
    }

    .full-background-container .identity-container__form {
        margin-right: 0;
    }

    .identity-container__form #kc-form-buttons,
    .identity-container__form #kc-form-wrapper form > div.bb-block.bb-block--xl {
        flex-direction: column;
        margin-bottom: 0;
    }

    .identity-container__form .bb-button-bar__button .bb-stack {
        justify-content: center;
    }

    .identity-container__form #kc-form-buttons .bb-button-bar__button {
        width: initial;
        margin-left: auto;
        margin-right: auto;
    }
}

.identity-container__form #kc-form-buttons .bb-button-bar__button .bb-stack span.bb-stack__item {
    margin-right: 0.5rem;
}

.identity-container__form #kc-form-buttons .bb-button-bar__button .bb-stack div.bb-stack__item {
    margin: 0 !important;
}

.primary {
    color: var(--primary);
}

.primary:hover {
    color: var(--primary-darker);
}

.identity-locale {
    margin-bottom: 2rem;
    margin-right: 2rem;
}

.bb-icon-psychology::before {
    content: "psychology";
}

.bb-icon-psychology.bb-icon--cropped::before {
    margin: 0 -1px;
}

.identity-container__form #kc-digital-onboarding a,
.identity-container__form #kc-registration a,
.btn-help {
    color: var(--primary);
    font-weight: 600;
}

.identity-container__form #kc-digital-onboarding a:focus-visible,
.identity-container__form #kc-registration a:focus-visible {
    outline-color: var(--primary);
}

.identity-container__form #kc-form-wrapper .bb-form-field--md {
    max-width: initial;
}

.text-info {
    color: var(--info) !important;
}

.font-style-bold {
    font-style: bold !important;
}

@media (max-width: 992px) {
    .error-layout .identity-bg-layout,
    .error-layout .identity-bg-layout + .bb-stack__break {
        display: none !important;
    }
}

.font-weight-bold {
    font-weight: 600;
}

.bb-alert {
    border-radius: 8px;
    padding: 1rem;
}

.bb-alert.bb-alert--danger {
    background: #c3343e;
    color: white;
}

.bb-alert.bb-alert--warning {
    background: #e58e1a;
    color: white;
}

.bb-bg-accent {
    background-color: var(--accent) !important;
}

.bb-progress-bar .bg-primary.progress-bar {
    background-color: var(--accent) !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.bb-input-confirm-password__input.is-invalid + .input-group-append .btn,
.bb-input-password__input.is-invalid + .input-group-append .btn {
    border-color: var(--danger) !important;
}

.identity-section--highlight:focus {
    outline: 0;
    box-shadow: none !important;
    margin: -0.5rem;
    padding: 0.5rem;
}

.bb-device-with-spacing {
    margin-left: -0.5rem !important;
}

.btn.btn-secondary:not(.btn-unstyled):focus::before,
.btn.btn-outline-primary:not(.btn-unstyled):focus::before,
.btn.btn-primary:not(.btn-unstyled):focus::before {
    border-color: var(--primary-darker);
}

.border-width-2 {
    border-width: 2px !important;
}

.alert-message {
    white-space: pre-line;
}

#default-login-header {
    font-size: 36px;
}

#flow-selection-header-container {
    font-size: 24px;
}

.button-bar-space-between {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    /* margin-bottom: 12px; */
}

.button-bar-space-between > * {
    flex-grow: 1;
}

.button-bar-space-between a .btn {
    width: 100%;
}

.row-separator {
    width: 100%;
    border-bottom: 1px solid #dedede;
    margin: 12px 0;
}

.regex-check-rule.success {
    color: var(--success);
}
.regex-check-rule.failed {
    color: var(--danger);
}
.filled-circle {
    height: 6px;
    width: 6px;
    vertical-align: middle;
    background-color: rgb(124, 106, 85);
    border-radius: 50%;
    display: inline-block;
}

.bb-input-password__visibility-toggle-button {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-left: 0;
    height: 42px;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.bb-input-password__visibility-toggle-button:hover {
    background-color: transparent !important;
    border-color: var(--accent) !important;
}
label {
    margin-bottom: 0.5rem;
}
.form-group {
    margin-bottom: 1rem;
}

/* Date input */
.date-input-container {
    position: relative;
}

.date-input-icon {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: #fff;
}

.date-input {
    text-indent: -500px;
}

/* Button loading */
button.overlay-spinner {
    position: relative;
    pointer-events: none;
}

.overlay-spinner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 50%);
}

.btn.overlay-spinner:focus::before {
    inset: unset !important;
}

.overlay-spinner::after {
    content: "";
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: currentColor;
    animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.badge-primary {
  color: #fff !important;
  background-color: var(--primary) !important;
}

.badge-secondary {
  color: #fff !important;
  background-color: var(--secondary) !important;
}

.badge-accent {
  color: #fff !important;
  background-color: var(--accent) !important;
}

.badge-info {
  color: #fff !important;
  background-color: var(--info) !important;
}

.badge-success {
  color: #fff !important;
  background-color: var(--success) !important;
}

.badge-warning {
  color: #fff !important;
  background-color: var(--warning) !important;
}

.badge-danger {
  color: #fff !important;
  background-color: var(--error) !important;
}

.badge-error {
  color: #fff !important;
  background-color: var(--error) !important;
}