html {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-grow: 1;
    --container-max-width: 500px;
}

html.rb {
    --color-orange: #fc6719;
    --color-orange-second: #fd8547;
    --color-orange-third: #fda475;
    --color-orange-fourth: #fec2a3;
    --color-orange-sixth: #fff0e8;
    --color-orange-seventh: #fff7f3;
}

html.solo {
    --color-orange: #FFA400;
    --color-orange-second: #FFB633;
    --color-orange-third: #FFC866;
    --color-orange-fourth: #FFDA99;
    --color-orange-sixth: #FFF6E5;
    --color-orange-seventh: #FFFAF2;
}

html.wm {
    --color-orange: #525252;
    --color-orange-second: #ADADAD;
    --color-orange-third: #D6D6D6;
    --color-orange-fourth: #EBEBEB;
    --color-orange-sixth: #FAFAFA;
    --color-orange-seventh: #FDFDFD;
}

body {
    display: flex;
    margin: 0;
    font-family: BOG, sans-serif;
    position: relative;
    overflow-x: hidden;
    background: var(--color-invert-background-solid-30);
    flex-grow: 1;
}

body.frame {
    background: transparent;
}

/*bd-link {
    font-size: 12px;
}*/

bd-input {
    outline: none;
}

bd-select-box {
    margin: 0;
}

bd-form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

html.dark #kc-header {
    color: var(--color-invert-component-tr-20);
}

html.dark #kc-header-wrapper {
    color: var(--color-invert-component-tr-20);
}

html.dark #kc-content {
    color: var(--color-invert-component-tr-20);
}

html.dark #kc-content-wrapper {
    color: var(--color-invert-component-tr-20);
}

html.dark #kc-form {
    color: var(--color-invert-component-tr-20);
}

html.dark #kc-form-wrapper {
    color: var(--color-invert-component-tr-20);
}

html.dark .form-footer {
    background-color: var(--color-invert-background-solid-50);
    border-top: 1px solid var(--color-invert-component-tr-70);
}

html.dark acc-loading-overlay {
    --overlay-component-bg: rgba(0, 0, 0, 0.4);
    --loader-component-bg: var(--color-black-solid-10);
}

html.dark .container {
    background-color: var(--color-invert-background-solid-50) !important;
}

html.dark bd-input {
    --label-color: none;
    --primary-text-color: none;
    --border: 1px solid var(--color-greyish-second);
    --caret-color: initial;
}

html.dark bg-input-conditions-container {
    background-color: var(--color-invert-background-solid-40);
}

html.dark bg-input-condition {
    color: var(--color-invert-component-tr-30);
}

html.dark {
    --color-greyish-brown: var(--color-invert-component-tr-20);
}

#kc-container {
    display: flex;
    flex-grow: 1;
    justify-content: center;
}

body:not(.frame) #kc-container {
    max-width: 636px;
    width: 100%;
    margin: auto;
    background: var(--color-invert-background-solid-10);
    border-radius: 12px;
    box-shadow: var(--shadow-raised);
    align-items: center;
}

@media (max-width: 425px) {
    body:not(.frame) #kc-container {
        margin: auto auto 0;
        border-radius: 12px 12px 0 0;
    }
}

.body.frame #kc-container {
    max-width: 100%;
}

#kc-container-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 510px;
    flex-grow: 1;
}

#kc-header-wrapper {
    display: flex;
    font-family: BOG Headline, sans-serif;
    padding: 0;
    color: var(--color-black-tr-20);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    align-items: center;
    height: 80px;
    width: 100%;
    margin: auto;
    padding: 0 var(--space-64);
    box-sizing: border-box;
}

body:not(.frame) #kc-header-wrapper {
    max-width: var(--container-max-width);
    padding: 0 var(--space-16);
}

.header-back-button {
    margin-right: 8px;
    width: 32px;
    height: 32px;
    --icon-color: var(--color-invert-component-tr-50);
}

#kc-header-wrapper.extra-spacing{
    padding: 0 var(--space-24);
}

#kc-header {
    display: flex;
    border-bottom: 1px solid var(--color-invert-component-tr-70);
}

#kc-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
}

#kc-content {
    display: flex;
    flex-grow: 1;
}

#kc-form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

acc-message-box[active] + #kc-form {
    display: none;
}

#kc-form-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.elements-wrapepr {
    padding: var(--space-32) var(--space-64);
}

.input-wrapper {
    padding-bottom: var(--space-16);
}

.input-wrapper.inline {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.input {
    margin: 0;
}

.form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    align-items: center;
}

.form-content {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-32) var(--space-64) 0;
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
}

body:not(.frame) .form-content {
    max-width: var(--container-max-width);
    padding: var(--space-32) var(--space-16) 0;
}

body.s-viewport .form-content {
    max-width: var(--container-max-width);
    padding: var(--space-32) var(--space-24) 0;
}

body.s-viewport #kc-header-wrapper {
    padding: 0 var(--space-24) 0;
}

#kc-ob-claim-consents .user-consent-list-item {
    --li-min-height: var(--space-48);
    --padding-left: var(--space-24);
    --border-left-color: var(--color-invert-component-tr-70);
}

.grid-gap-12 {
    grid-gap: var(--space-12);
}

.form-footer {
    display: flex;
    flex-direction: column;
    background-color: var(--color-greyish-eighth);
    padding: var(--space-32) 0;
    border-top: 1px solid var(--color-greyish-sixth);
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

.form-footer-border {
    display: flex;
    justify-content: center;
    padding: var(--space-24) 0;
    /* border-top: 1px solid var(--color-invert-component-tr-70); */
    align-self: stretch;
    width: 100%;
}

.form-footer-border.with-border {
    border-top: 1px solid var(--color-invert-component-tr-70);
}

body.frame .form-footer-border {
    padding: var(--space-16) 0;
}

.form-footer-content {
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-64);
    width: 100%;
    box-sizing: border-box;
}

.form-footer-content.vertical-items > *:not(:last-child) {
    margin-bottom: var(--space-12);
}

body:not(.frame) .form-footer-content {
    padding: 0 var(--space-16);
    max-width: var(--container-max-width);
}

.list-view-scroll {
    /* max-width: var(--container-max-width); */
    height: 100%;
    max-height: 290px;
    /* padding: 0 var(--space-16); */
    box-sizing: border-box;
}

.forgot-password-link {
    font-size: 12px;
}

.remember-me {
    font-size: 12px;
    margin-bottom: var(--space-32);
    display: flex;
}

#kc-form-buttons {
    margin-top: var(--space-24);
}

.prolong-password-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: var(--space-72);
}

.prolong-password-buttons bd-button:not(:first-child) {
    margin-top: var(--space-16);
    padding: var(--space-12);
}

#onb-registration-button {
    margin-bottom: var(--space-16);
}

.tos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.tos > * {
    flex: 50%;
}

.tos bd-button[type=link] {
    font-size: 12px;
}

.tos #card-submit {
    width: 100%;
    max-width: 222px;
}

.margin-bottom-24 {
    margin-bottom: var(--space-24);
}

.consent-header {
    font-size: 14px;
    font-weight: normal;
    margin: 0;
}

.consent {
    font-size: 12px;
    max-width: 340px;
    padding-left: 0;
    list-style: none;
    margin-bottom: 32px;
}

.user {
    display: flex;
    flex-direction: row;
    width: 340px;
    height: 64px;
    border: 1px solid var(--color-greyish-sixth);
    background-color: var(--color-greyish-eighth);
    box-sizing: border-box;
    padding: var(--space-8) var(--space-24);
    margin-bottom: 16px;
    align-items: center;
}

.image-wrapper {
    display: flex;
    width: 43px;
    max-width: 43px;
    height: 43px;
    max-height: 43px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: var(--space-8);
}

.user-image {
    height: 43px;
    object-fit: cover;
}

.user-details {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.user-details-caption {
    color: #ac989b;
    font-size: 12px;
    font-weight: 300;
}

.user-details-username {
    color: var(--color-greyish);
    font-size: 14px;
    font-weight: 500;
}

.consent-tos {
    display: flex;
    justify-content: center;
}

.back-icon {
    color: var(--color-orange);
    margin-right: var(--space-16);
    width: 20px;
    max-width: 20px;
    height: 20px;
    max-height: 20px;
    cursor: pointer;
}

.otp-entry {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-16);
}

.otp-entry.otp-entry-2 {
    align-items: flex-start;
    min-height: 250px;
}

#otp-input {
    width: 100%;
}

.instruction {
    max-width: 340px;
    margin: 0;
}

.prolong-password-wrapper {
    font-size: 12px;
    max-width: 340px;
    padding-left: 0;
}

.text-center {
    text-align: center;
    max-width: var(--container-max-width);
}

.contact-chooser {
    flex-direction: column;
    /* border-bottom: 1px solid var(--color-invert-component-tr-70); */
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 12px;
    padding: 0 24px;
}

.contact-entry {
    /* margin-bottom: var(--space-32);
    border-bottom: solid 1px var(--color-invert-component-tr-70);
    height: 48px; */
    padding: 16px 0;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 12px;
    align-items: center;
    grid-auto-rows: 32px;
    --radio-group-vertical-space: 0;
}

.contact-entry > * {
    align-items: center;
}

.contact-entry:not(:last-child) {
    border-bottom: 1px solid var(--color-invert-component-tr-70);
}

.contacy-chooser-header-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-12);
}

@media (max-width: 425px) {
    #kc-add-new-financial-contact {
        width: min-content;
    }
}

.company-chooser {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
}

.company-chooser-list {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.company-image {
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: 50%;
    margin-left: var(--space-16);
    margin-right: var(--space-8);
}

.company-entry {
    padding: var(--space-16) 0;
    margin: 0 !important;
    align-items: center;
    font-size: 12px;
    font-weight: 300;
    border-bottom: 1px solid var(--color-invert-component-tr-70);
}

.line {
    display: flex;
    border: 1px solid #f1f1f1;
    margin-top: 11px;
    margin-bottom: var(--space-16);
}

.company-chooser-title {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: var(--space-16);
}

.company-chooser-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-self: stretch;
}

.chooser-footer-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.chooser-footer-buttons-row {
    display: flex;
    flex: 1;
    flex-direction: row;
}

.chooser-footer-buttons-row:first-child {
    justify-content: space-between;
    align-items: center;
    padding: var(--space-16) 0;
    border-bottom: 1px solid var(--color-greyish-sixth);
    height: 80px;
    width: 340px;
    margin: auto;
}

.chooser-footer-buttons-row:last-child {
    justify-content: center;
    align-items: center;
    min-height: 40px;
    padding: var(--space-8) var(--space-64);
}

.save-company-checkbox {
    /* max-width: 170px; */
}

.otp-message {
    font-size: 12px;
    color: var(--color-greyish-second);
    margin-bottom: var(--space-16);
    align-self: flex-start;
}

.cvv-icon, .password-hint, .doc-type-hint {
    cursor: pointer;
    position: relative;
    width: 16px;
}

.cvv-tooltip, .doc-type-hint-tooltip {
    background-position: center center;
    width: 258px;
    height: 67px;
    position: absolute;
    bottom: calc(100% - 12px);
    right: 0;
    padding: 4px;
}

.doc-type-hint-tooltip {
    bottom: 50px;
    right: 10px;
    width: 179px;
    height: 114px;
    border-radius: 12px;
    padding: 8px;
}

.cvv-tooltip:after, .doc-type-hint-tooltip:after {
    top: 100%;
    right: 22px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.cvv-tooltip:after, .doc-type-hint-tooltip:after {
    border-color: transparent;
    border-top-color: var(--color-slate-grey);
    border-width: 10px;
    margin-left: -10px;
}

.hidden {
    display: none;
}

.otp-tooltip {
    align-self: flex-start;
    width: 100%;
    max-width: 343px;
    margin: 0 auto;
}

.form-no-stretch {
    align-self: flex-start;
    width: max-content;
}

#kc-locale {
    display: none;
}

/*#kc-content-wrapper{
    display: flex;
}

#kc-info{
}

.control-label{
    display: inline-block;
    font-size: 14px;
    line-height: 16px;
    color: #9e9e9e;
    margin-bottom: 5px;
}

#kc-form-login{
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    font-size: 11px;
}

.form-control{

    border: solid 1px #f3f4f4;
    outline: none !important;
    padding: 0 10px;
    box-sizing: border-box;
    height: 35px;
}

#kc-form-login .input-label{
    display: none;
}

#kc-login{
    height: 35px;
    padding-left: 22px;
    padding-right: 22px;
    box-sizing: border-box;
    color: white;
    text-align: center;
    background-color: #5f576b;
    border: 0;
    border-radius: 2px;
    outline: none !important;
    margin: 0 auto;
    cursor: pointer;
    display: flex;
    align-items: center;
}*/

.password-hint-container {
    position: absolute;
    right: 0px;
    background: var(--color-white);
    top: 42px;
    width: 290px;
    height: 150px;
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    z-index: 1;
    font-family: MarkGeo;
}

.password-hint-container:after {
    right: 12px;
    top: -10px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.password-hint-container:after {
    border-color: transparent;
    border-right-color: var(--color-white);
    border-width: 12px;
    margin-top: -12px;
    transform: rotate(90deg);
}

.password-hint-wrapper {
    position: relative;
}

.password-hint-container:hover,
.password-hint-wrapper #password[focused] + .password-hint-container {
    display: flex;
}

#kc-register-form bd-form-layout {
    grid-gap: var(--space-16);
}

#kc-choose-reset-method-form {

}

#kc-choose-reset-method-form .reset-method-title {
    font-family: 'BOG Headline';
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    color: var(--color-invert-component-tr-20);
}

#kc-choose-reset-method-form .reset-method-description {
    font-family: 'BOG';
    font-size: 14px;
    font-weight: 500;
    line-height: 1.29;
    color: var(--color-invert-component-tr-20);
    margin-top: var(--space-8);
    margin-bottom: var(--space-24);
}

#kc-choose-reset-method-form .form-content {
    justify-content: flex-start;
    align-items: center;
    margin-top: var(--space-32);
}

#kc-choose-reset-method-form .reset-methods-list {
    display: flex;
    flex-direction: column;
}

.reset-methods-list {
    width: 100%;
}

#kc-choose-reset-method-form .reset-method-item {
    width: 340px;
    height: 64px;
    border-radius: 4px;
    /* background-color: var(--color-greyish-seventh); */
    /* margin-bottom: var(--space-16); */
    /* padding: 0 24px; */
    display: flex;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    border: none;
    font-family: MarkGEO;
    font-size: 14px;
    line-height: 1.75;
    color: var(--color-greyish-second);
    outline: none;

    width: 100%;
    height: 48px;
    background: transparent;
}

/* #kc-choose-reset-method-form .reset-method-item:hover {
    background-color: var(--color-greyish-sixth);
} */

#kc-choose-reset-method-form .reset-method-item .reset-method-item-icon {
    width: 49px;
    height: 30px;
    border-radius: 4px;
    color: var(--color-invert-component-tr-20);
}

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}

ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

#kc-choose-reset-method-form .reset-method-item .reset-method-item-title {
    font-size: 13px;
    line-height: 1.75;
    color: var(--color-invert-component-tr-20);
    margin-left: 12px;
    flex-grow: 1;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-invert-component-tr-70);
    padding: 14px 0;
}

#kc-choose-reset-method-form .reset-methods-list .right-icon {
    color: var(--color-orange);
    --iron-icon-width: 16px;
    --iron-icon-height: 16px;
    margin-right: -8px;
}

.doc-type-choose-form .contact-chooser, .financial-contact-type-chooser {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 16px;
    border-bottom: solid 1px var(--color-invert-component-tr-70)
}

.doc-type-choose-form .contact-entry, .financial-contact-type-chooser .contact-entry {
    display: flex;
    align-items: flex-start;
    font-family: MarkGeo;
    font-size: 14px;
    margin-bottom: 0px;
    border: none;
    align-items: center;
}

.doc-type-choose-form .contact-entry:not(:first-child), .financial-contact-type-chooser .contact-entry:not(:first-child) {
    margin-left: 16px;
}

.doc-type-choose-form .contact-entry[checked], .financial-contact-type-chooser .contact-entry[checked] {
    font-weight: bold;
}

.form-content.center-form {
    align-items: center;
    align-self: center;
}

#kc-high-risk-warning-form .warning-icon-wrapper,
#kc-video-id-form .warning-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #fff4dc;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    align-self: center;
}

#kc-video-id-form.error-try-again .warning-icon-wrapper {
    background-color: rgba(255, 0, 0, 0.08);
}

#kc-high-risk-warning-form .warning-icon-wrapper iron-icon,
#kc-video-id-form .warning-icon-wrapper iron-icon {
    --iron-icon-width: 20px;
    --iron-icon-height: 20px;
    color: var(--color-orange);
}

#kc-video-id-form.error-try-again .warning-icon-wrapper iron-icon {
    color: var(--color-error);
}

#kc-high-risk-warning-form .warning-header,
#kc-verification-pending-form .warning-header,
#kc-verification-rejected-form .warning-header,
#kc-video-id-form .warning-header {
    font-family: MarkGEO;
    font-size: 14px;
    font-weight: bold;
    color: var(--color-greyish);
    margin-bottom: 16px;
}

#kc-verification-pending-form .warning-body,
#kc-video-id-form .warning-body {
    font-family: MarkGEO;
    font-size: 14px;
    font-weight: normal;
    color: var(--color-greyish-fourth);
    margin-bottom: 8px;
}

#kc-high-risk-warning-form .warning-footer,
#kc-video-id-form .warning-footer {
    font-family: MarkGEO;
    font-size: 14px;
    font-weight: bold;
    color: var(--color-greyish);
}

.doc-type-info-slider {
    flex-grow: 1;
    width: 340px;
    height: 100%;
    padding-bottom: 22px;
    justify-content: flex-start;
    align-self: center;
    --active-circle-color: var(--color-orange);
    --circle-color: #888888;
    --buttons-width: unset;
    --buttons-position: absolute;
    --bottons-bottom: 20px;
    --bottons-right: 40px;
    --color-white: var(--circle-color);
}

.doc-type-info-slider .slider-item {
    display: flex;
    flex-direction: column;
    width: 340px;
    height: 100%;
    flex-shrink: 0;
    flex-grow: 1;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

.doc-type-info-slider .slider-item-img {
    width: 105px;
    /*height: 64px;*/
    border-radius: 4px;
    margin-bottom: 8px;
    padding-bottom: 32px;
}

.doc-type-info-slider .slider-item-title {
    font-family: BOG Headline;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-invert-component-tr-20);
    margin-bottom: 32px;
    max-width: 350px;
    text-align: center;
    text-transform: uppercase;
}

.doc-type-info-slider .slider-item-description {
    font-family: MarkGEO;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-greyish);
    max-width: 300px;
    text-align: center;
    margin-bottom: 16px;
}

#videoid-container #video-loading p {
    color: var(--color-white);
    font-family: MarkGeoCAPS;
    font-size: 12px;
    font-weight: 600;
}

#videoid-container div.videoid-notification.notification-image h1 {
    /*     color:red; */
}

#videoid-container #video-loading {
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
}

#videoid-container #video-loading #videoid-progress-bar {
    background-color: rgba(255, 255, 255, 0.3);
}

#videoid-container #video-loading #videoid-progress-bar #bar {
    background: var(--color-white);
}

#videoid-wrapper #videoid-mark-roi {
    border: solid 8px var(--color-white);
    border-radius: 20px;
}

#videoid-wrapper .videoid-notification.notification-text.show {
    background-color: var(--color-white);
    padding: 8px;
    color: var(--color-greyish);
    border-radius: 4px;
    margin-bottom: 16px;
    text-align: left;
}

#videoid-wrapper .videoid-notification.notification-text.show span {
    color: var(--color-greyish) !important;
    font-family: MarkGEO;
    font-size: 14px;
    font-weight: 500;
}

#videoid-overlay .spinner span {
    border: 4px solid rgba(255, 255, 255, 0.1);
}

#videoid-wrapper #videoid-overlay .spinner span div {
    border-top: 4px solid var(--color-white);
    border-left: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 4px solid transparent;
    border-radius: 100%;
}

#videoid-wrapper #videoid-overlay .spinner span div {
    top: -4px;
}

#videoid-wrapper div.videoid-notification.notification-image h1 {
    font-family: MarkGeoCAPS;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 10px;
}

#videoid-wrapper div.videoid-notification.notification-image.show {
    background-color: rgba(0, 0, 0, 0.8);
}

#videoid-wrapper div.videoid-notification.notification-image p.paragraph {
    font-family: MarkGEO;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: var(--color-white);
}

#videoid-wrapper .svg-face {
    stroke: #06a74c !important;
}

#videoid-wrapper #videoid-mark-roi.face {
    border: none;
}

#videoid-wrapper #video-error {
    background: rgba(0, 0, 0, 0.6) !important;
    align-items: center !important;
}

#videoid-wrapper .title-error {
    font-family: MarkGEO;
    color: #ffffff !important;
    font-weight: bold !important;
    font-style: normal !important;
}

#videoid-wrapper .description-error {
    font-family: MarkGEO;
    color: #ffffff !important;
    font-weight: lighter !important;
}

#videoid-wrapper #repeat {
    border-radius: 4px;
    font-family: MarkGEOCAPS;
    background: #fc6719 !important;
    border-width: 0px !important;
    color: #ffffff !important;
}

svg#phase-check .path,
svg#phase-check .path.circle,
svg#phase-check .path.line,
svg#phase-check .path.check {
    stroke: #06a74c !important;
    color: #06a74c !important;
}

#kc-registration-terms-and-conditions {
    justify-content: flex-start;
}

#kc-registration-terms-and-conditions .list-view-scroll {
    align-self: center;
    padding-left: 84px;
    padding-right: 84px;
    max-height: 325px;
}

@media (max-width: 425px) {
    #kc-registration-terms-and-conditions .list-view-scroll {
        padding-left: 24px;
        padding-right: 24px;
    }
}

#kc-registration-terms-and-conditions .list-view-scroll > *:first-child {
    padding-top: var(--space-32);
}

#kc-registration-terms-and-conditions .terms-text {
    font-family: MarkGEO;
    font-size: 14px;
    font-weight: normal;
}

#kc-registration-terms-and-conditions .free-service {
    font-family: MarkGEO;
    font-size: 14px;
    font-weight: normal;
}

#kc-registration-terms-and-conditions #consent-checkbox {
    margin-right: 4px;
}


#kc-adv-client-final-form .warning-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #fff4dc;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    align-self: center;
}

#kc-adv-client-final-form.error-try-again .warning-icon-wrapper {
    background-color: #fff4dc;
}

#kc-high-risk-warning-form .warning-icon-wrapper iron-icon,
#kc-adv-client-final-form .warning-icon-wrapper iron-icon {
    --iron-icon-width: 20px;
    --iron-icon-height: 20px;
    color: var(--color-orange);
}

#kc-adv-client-final-form.error-try-again .warning-icon-wrapper iron-icon {
    color: var(--color-orange);
}

#kc-high-risk-warning-form .warning-header,
#kc-adv-client-final-form .warning-header {
    font-family: MarkGEO;
    font-size: 14px;
    font-weight: bold;
    color: var(--color-greyish);
    margin-bottom: 16px;
}

#kc-high-risk-warning-form .warning-body,
#kc-adv-client-final-form .warning-body {
    font-family: MarkGEO;
    font-size: 14px;
    font-weight: normal;
    color: var(--color-greyish-fourth);
    margin-bottom: 8px;
}

#kc-high-risk-warning-form .warning-footer,
#kc-adv-client-final-form .warning-footer {
    font-family: MarkGEO;
    font-size: 14px;
    font-weight: bold;
    color: var(--color-greyish);
}

#kc-verification-pending-form .warning-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #fff4dc;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    align-self: center;
}

#kc-verification-pending-form .warning-icon-wrapper iron-icon {
    --iron-icon-width: 20px;
    --iron-icon-height: 20px;
    color: var(--color-orange);
}

#kc-verification-rejected-form .warning-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #fdebeb;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    align-self: center;
}

#kc-verification-rejected-form .warning-icon-wrapper iron-icon {
    --iron-icon-width: 20px;
    --iron-icon-height: 20px;
    color: var(--color-error);
}

#kc-form-buttons .prolog-button {
    margin-top: var(--space-16);
    padding: var(--space-16);
}

.info-icon-wrapper {
    width: 64px;
    height: 64px;
    background-color: var(--color-information-solid-10);
    margin-bottom: 12px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-icon {
    width: 20px;
    height: 20px;
    color: var(--color-primary-solid-10);
    margin-bottom: 16px;
}

.info-check {
    display: flex;
    align-items: flex-start;
    padding: 8px 24px 0;
}

.info-check:last-of-type {
    margin-bottom: 32px;
}

.info-check > .info-check-icon {
    width: 16px;
    height: 16px;
    color: var(--color-primary-solid-10);
    margin-right: 16px;
}

.info-check > .info-check-text {
    border-bottom: 1px solid var(--color-invert-component-tr-70);
    padding-bottom: 8px;
    min-width: 272px;
}

.info-check:last-of-type > .info-check-text {
    border-bottom: none;
}

/* QR */

#kc-qr-form-content .how-qr-works {
    margin: 0 auto 40px;
}

#kc-qr-form-content div.label {
    display: flex;
    flex-grow: 1;
    padding: 14px 0;
    font-size: 13px;
    color: var(--color-invert-component-tr-20);
    border-bottom: 1px solid var(--color-invert-component-tr-70);
}

#kc-qr-form-content > div {
    display: flex;
    align-items: center;
}

#kc-qr-form-content > div > .icon {
    width: 20px;
    margin-right: 18px;
    color: var(--color-primary-solid-10);
}

#kc-qr-submit-button {
    display: none;
}

#kc-qr-container {
    display: flex;
    margin: 48px auto 32px;
    padding: 0;
}

#kc-qr-auth-button {
    font-size: 13px;
}

#kc-login-credentials-title {
    width: 100%;
    display: flex;
    justify-content: space-between
}

#kc-login-with-qr.hide-mobile-link {
    display: none;
}

#kc-login-with-qr {
    position: absolute;
    top: -52px;
    right: 16px;
    font-size: 13px;
}

.kc-totp-login-qr-layout {
    grid-template-columns: 1fr auto;
    grid-gap: var(--space-32);
}

.kc-totp-login-qr-layout.hide-qr {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.kc-totp-login-qr {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.kc-totp-login-qr.hide-qr {
    display: none !important;
}

.kc-totp-login-qr .qr-skeleton[loading] ~ * {
    display: none !important;
}

.contract-info {
    margin-top: var(--space-32);
    max-height: 126px;
  }



@media (max-width: 500px) {
    .kc-totp-login-qr-layout {
        grid-template-columns: 1fr;
    }

    .kc-totp-login-qr {
        display: none;
    }
}

.kc-totp-login-qr-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    max-width: 140px;
    position: relative;
}

.kc-totp-login-qr-container-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-right: var(--space-12);
}

#kc-totp-login-qr-container {
    width: 94px;
    height: 94px;
    margin-bottom: var(--space-8);
}

#kc-totp-login-qr-container > svg {
    width: 94px;
    height: 94px;
    box-sizing: border-box;
    border: 0 none;
}

html.dark #kc-totp-login-qr-container > svg {
    border: 4px solid #fff;
}

.kc-totp-login-qr-info-button {
    --height: 32px;
    --icon-color: 14px;
    color: var(--color-invert-component-tr-50);
}

#password-show-hide {
    --icon-color: var(--color-invert-component-tr-50);
}

.kc-login-enter-credentials-buttons {
    grid-gap: var(--space-12)
}

.kc-totp-login-qr-tooltip {
    --tooltip-border-radius: var(--space-12);
}

.page-expire-title {
    color: var(--color-warning-solid-20);
    margin-bottom: 6px;
    font-weight: 700;
}

.grey-icon-button {
    color: var(--color-invert-component-tr-50);
}

.list-item-without-icon-border {
    --item-border-left-color: transparent;
}

#kc-ob-claim-consents .user-consent-wrapper  {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-24);
}

.offer-list-item-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    padding: 8px 0;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.07);
}

.list-item-radio-button > bd-radio-button {
    align-items: center;
}

.offer-list-item-wrapper > * {
    --li-min-height: 48px;
    margin: 0;
}

.offer-list-item-wrapper > *:last-child {
    --item-border-color: transparent;
}

.offer-list-item-wrapper bd-icon {
    margin-right: var(--space-16);
}

.offer-message {
    width: 100%;
    margin-bottom: var(--space-24);
}

.no-border {
    border: none;
}

bg-scroll, bd-scroll {
    --scrollbar-bar-width: 4px;
}

bg-scroll > *, bd-scroll > * {
    max-width: calc(100% - 8px) !important;
}

.corporate-switcher-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-16);
}

.card-input-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-input-header .card-input-header-image {
    width: 144px;
    height: auto;
}

.card-input-header .card-input-header-text {
    margin-top: var(--space-8);
    margin-bottom: var(--space-24);
}

#kc-add-card-form .card-input-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--space-24);
}

#kc-add-card-form .card-input-header .card-input-header-image {
    width: 84px;
    margin-right: var(--space-12)
}

#kc-add-card-form .card-input-header .card-input-header-text {
    margin-top: 0;
    margin-bottom: 0;
}

#kc-add-card-form .form-content {
    padding: var(--space-24);
    border: 1px solid var(--color-invert-component-tr-70);
    border-radius: 12px;
    margin-top: var(--space-32);
    margin-bottom: var(--space-40);
    flex-grow: 1;
    padding-bottom: 0;
}

#kc-add-card-form .no-card-submit-item {
    display: flex;
    flex-direction: row;
    margin-top: var(--space-32);
    align-items: center;
    margin-left: -24px;
    margin-right: -24px;
    border-top: 1px solid var(--color-invert-component-tr-70);
    padding: var(--space-24);
    flex-grow: 0;
}

.loader-button {
    background-color: transparent;
    --color-white-tr-20: var(--color-primary-solid-10);
    height: 8px;
    margin-bottom: var(--space-16);
}

.color-green {
    color: var(--color-success-solid-10);
}

.kc-login-enter-credentials-buttons {
    grid-gap: var(--space-12);
}

.country-select {
    --max-height: 120px;
}

.region-select {
    --max-height: 120px;
}

.same-as-legal-address-check {
    margin: 24px 0px 12px 0px
}

.facetec_doc_type {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-invert-component-tr-70);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 64px;
}

.facetec_doc_type bd-list-item {
    --li-min-height: 64px;
}

.kc-login-enter-credentials-buttons .list-item {
    --li-min-height: 64px;
}

.kc-login-enter-credentials-buttons .list-item {
    --li-min-height: 64px;
}

.kc-login-enter-credentials-buttons .list-item bd-icon {
    padding: var(--space-8);
    border-radius: 50%;
    background-color: var(--color-primary-solid-70);
    margin-left: var(--space-16);
}

.kc-login-enter-credentials-buttons .dropdown {
    --border-radius: 12px;
}

.kc-login-enter-credentials-buttons .dd-body a {
    color: inherit;
    text-decoration: none;
}

/* password recovery - start */

#kc-contacts-form .list-view-scroll {
    width: 100%;
    max-height: 342px;
}

#kc-contacts-form .form-content {
    width: var(--container-max-width);
    margin: auto;
    padding-top: 0;
    padding-bottom: 32px;
}

#kc-contacts-form .list-item {
    --border-left-color: none;
    height: 48px;
    text-transform: capitalize;
}

#kc-contacts-form .list-view-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 8px 0px;
    padding-bottom: 0;
    padding-top: 0;
}

#kc-contacts-form bd-list-item:last-child {
    --border-color: none;
}

#kc-contacts-form .titles-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: var(--space-16);
    margin-top: var(--space-24);
}

#kc-contacts-form .titles-wrapper > bd-font {
    margin-bottom: var(--space-4);
}

#kc-contacts-form .subTitle {
    color: var(--color-invert-component-tr-40);
}

#kc-contacts-form .resetBtn {
    width: var(--container-max-width);
}

#kc-contacts-form .disableResetBtn {
    background-color: var(--color-primary-solid-40);
    pointer-events: none;
}

#kc-transactions-form .list-item {
    --border-left-color: none;
    min-height: 72px;
}

#kc-transactions-form .list-item[disabled] {
    pointer-events: none;
}

#kc-transactions-form .list-item .list-item-title span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
    width: 300px;
    margin-top: var(--space-4);
}

#kc-transactions-form .list-item .list-item-desc span {
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    width: 300px;
    margin-top: var(--space-4);
}

#kc-transactions-form .list-item .checkbox {
    padding-right: 12px;
}

#kc-transactions-form .list-view-scroll {
    width: 100%;
    max-height: 342px;
}

#kc-transactions-form .form-content {
    width: var(--container-max-width);
    margin: auto;
    padding-top: 0;
    padding-bottom: 32px;
}

#kc-transactions-form .list-view-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 8px 0px;
    padding-bottom: 0;
    padding-top: 0;
}

#kc-transactions-form bd-list-item:last-child {
    --border-color: none;
}

#kc-transactions-form bd-list-item .container {
    display: flex;
    flex-direction: column;
    padding-left: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
}

#kc-transactions-form .top, #kc-transactions-form .bottom {
    color: var(--color-invert-component-tr-40);
}

#kc-transactions-form .center {
    color: var(--color-invert-component-tr-20)
}

.reset-back-icon {
    color: var(--color-invert-component-tr-50);
    margin-right: var(--space-16);
    width: 16px;
    max-width: 16px;
    height: 16px;
    max-height: 16px;
    cursor: pointer;
}


.red {
    color: var(--color-error-solid-10);
}

.green {
    color: var(--color-success-solid-10);
}

.yellow {
    color: var(--color-warning-solid-10);
}

.green .timer-icon {
    color: var(--color-success-solid-10);
}

.red .timer-icon {
    color: var(--color-error-solid-10);
}

.yellow .timer-icon {
    color: var(--color-warning-solid-10);
}

#kc-transactions-form .titles-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: var(--space-16);
    margin-top: var(--space-24);
}

#kc-transactions-form .subTitle {
    color: var(--color-invert-component-tr-40);
}

#kc-transactions-form .resetBtn {
    width: var(--container-max-width);
}

#kc-transactions-form .disableResetBtn {
    background-color: var(--color-primary-solid-40);
    pointer-events: none;
}

#kc-transactions-form .titles-wrapper > bd-font {
    margin-bottom: var(--space-4);
}

.timer {
    display: flex;
    align-items: center;
}

.timer-icon {
    margin-right: var(--space-8);
    width: 16px;
    max-width: 16px;
    height: 16px;
    max-height: 16px;
    cursor: pointer;
}

.header-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.header-content-operations {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.kc-onboarding-texts-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.kc-onboarding-texts-wrapper > bd-font {
    text-align: center;
}

.kc-onboarding-texts-wrapper > bd-font[type="h4"] {
    margin-bottom: 8px;
    margin-top: 8px;
}

.kc-onboarding-form {
    justify-content: space-between;
}

.onboarding-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.kc-onboarding-img {
    width: 176px;
    height: 127px;
    background-size: contain;
    background-repeat: no-repeat;
}

.kc-onboarding-img lottie-player {
    height: 150px;
    width: 200px;
    display: flex;
    background-color: gainsboro;
    margin-bottom: 8px;
    border-radius: 8px;
}

.kc-onboarding-img img {
    display: flex;
    margin-bottom: 8px;
}

.popup-mobile-qr {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.hide-login-form {
    display: none;
}

.popup-mobile-qr.hide-login-qr{
    display: none !important;
}
.popup-mobile-qr .popup-layout{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-32) var(--space-24);
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.popup-mobile-qr .popup-layout bd-font{
    text-align: center;
}
.popup-mobile-qr .popup-layout bd-button{
    --dropdown-icon-size: 16px;
}
.popup-mobile-qr .popup-layout .inline-text-divider{
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    margin: var(--space-16) 0;
    align-items: center;
}

.popup-mobile-qr .popup-layout .inline-text-divider .line{
    margin-top: var(--space-16);
    border: 1px solid var(--color-invert-component-tr-70);
}

.popup-mobile-qr .popup-layout .login-buttons-container{
    display: flex;
    flex-direction: column;
}

#popup-mobile-back-button.hidden + .popup-button-text,
#popup-mobile-back-button:not(.hidden) ~ .default-header-text{
    display: none;
}

@media (max-width: 425px) {

    .header-content-operations {
        padding-right: 60px;
        padding-left: 60px;
    }

    .onboarding-footer {
        padding-left: 24px;
        padding-right: 24px;
    }

    #kc-transactions-form .form-content {
        padding-right: 60px;
        padding-left: 60px;
    }

    #kc-transactions-form .list-item .list-item-title span {
        width: 230px;
    }

    #kc-transactions-form .list-item .green bd-amount {
        font-size: 12px;
    }

    #kc-transactions-form .list-item .list-item-desc span {
        width: 240px;
    }

    #kc-contacts-form .form-content {
        padding-right: 60px;
        padding-left: 60px;
    }
}

#kc-pwd-rec-success-form .success-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #06A74C29;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    align-self: center;
}

#kc-pwd-rec-success-form .success-icon-wrapper iron-icon {
    --iron-icon-width: 20px;
    --iron-icon-height: 20px;
    color: #06A74C;
}

#kc-pwd-rec-success-form .success-header {
    font-family: MarkGEO;
    font-size: 14px;
    font-weight: bold;
    color: #06A74C;
    margin-bottom: 16px;
}

#kc-pwd-rec-success-form .success-body {
    font-family: MarkGEO;
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 8px;
}

#kc-ob-claim-consents .two-lines {
    --li-min-height: 56px;
}

#kc-ob-claim-consents .two-lines div{
    display: flex;
    flex-direction: column;
}

#kc-ob-claim-consents .list-container {
    margin-top: var(--space-16);
    border: 1px solid var(--color-invert-component-tr-70);
    margin-bottom: var(--space-16);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-self: center;
    width: 100%;
    max-width: 468px;
}

#kc-ob-claim-consents bd-list-item {
    --li-min-height: 40px;
}

#kc-ob-claim-consents bd-list-item:last-of-type {
    --item-border-color: transparent;
}

body:not(.frame) .tp-16 {
    padding-top: var(--space-16);
    padding-left: 0;
    padding-right: 0;
}

.tp-16 {
    padding-top: var(--space-16);
    padding-left: 0;
    padding-right: 0;
}

.terms-content {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: var(--space-24) var(--space-24) 0;
    box-sizing: border-box;
    width: 516px;
    margin: auto;
}

.button-with-checkbox {
    display:flex;
    flex-direction: column;
    width: 468px;
    padding: 0 var(--space-24)
}

@media(max-width: 600px) {
    .user-consent-wrapper {
        padding-left: var(--space-24);
        padding-right: var(--space-24)
    }
    .terms-content {
        width: unset;
    }
    .button-with-checkbox {
        width: 100%;
    }
}

.li-value {
    max-width: 260px;
}

.li-title {
    max-width: 150px;
    margin-right: var(--space-12);
}

.digipass-unlock-header{
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: end;
}

@media(max-width: 600px) {
    .li-title {
        max-width: 130px;
    }
}

.hide-enter-pin-form {
    display: none !important;
}
.popup-layout {
    height: 667px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.popup-solid-section {
    padding-top: 100px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.mobilebank-popup-image {
    padding: 1.28px 0px 1.28px 18.169px;
    display: flex;
    width: auto;
    height: 200px;
}
.mobilbank-popup-button {
    display: flex;
    width: 327px;
    padding: 19px 16px 19px 32px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}
.onb-access-camera {
    display: flex;
    width: 100%;
    padding-bottom: 32px;
    flex-direction: column;
    align-items: center;
    gap: 42px;
}
.onb-camera-solid-section {
    padding-top: 40px;
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.onb-notification-header {
    text-align: center;
    /* H4/Responsive/Xsmall */
    font-family: BOG;
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    width: 240px;
}
.onb-notification-text {
    text-align: center;
    font-family: BOG;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
}
.onb-camera-accept-button {
    display: flex;
    padding: 19px 32px;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
}
.onb-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 72%;
}

.onb-pin-alert-pad {
    padding-top: 20px;
}

.onb-nonresident-alert-pad {
    padding-bottom: 30px;
}

.onb-pin-alert {
    height: 100px;
    border-radius: 8px;
    background: #EFF0F3;
    display: flex;
    width: 95%;
    padding: 12px 16px 12px 16px;
    padding-left: 40px;
    flex-direction: column;
    align-content: flex-start;
    gap: 12px;
}

.onb-pin-alert-header {
    color: black;
    font-family: BOG;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 10px; /* 142.857% */
}

.onb-pin-alert-header-section {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
}

.onb-pin-alert-text {
    color: black;
    font-family: BOG;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 166.667% */
}

.onb-pin-alert-button {
    height: 30px;
    display: flex;
    padding: 8px 16px;
    align-self: start;
}

.menu-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 470px;
    margin: 40px auto;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    overflow: hidden;
}
.menu-card * {
    box-sizing: border-box;
    display: flex;
}
.menu-item {
    display: flex;
    padding: 24px 26px;
    align-items: center;
    gap: 12px;
    align-self: stretch;

    margin: 0;
    text-decoration: none;
    color: #333333;
    background-color: #fdfdfd;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease;
}

.menu-item:hover {
    background-color: #F5F5F5;
}

.menu-item:focus {
    outline: 2px solid #4A90E2; /* blue focus ring for keyboard navigation */
    outline-offset: 2px;
}

.menu-item:not(:last-child) {
    border-bottom: 1px solid #E0E0E0;
}

.menu-icon {
    flex: 0 0 24px;
    height: 24px;
}

.menu-icon img {
    width: 75%;
    height: 70%;
    object-fit: contain;
    display: block;
}

.menu-label {
    display: flex;
    margin-left: 12px;
    font-size: 14px;
    font-family: BOG;
    font-weight: 500;
    line-height: 1.2;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-arrow {
    flex: 0 0 16px; /* fixed 16×16px */
    height: 16px;
    margin-left: 12px; /* space between text and arrow */
    opacity: 0.6; /* slightly muted arrow */
}

.menu-arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.reset-text1 {
    border-bottom: 20px;
    font-family: BOG;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}


.grecaptcha-badge {
    width: 245px;
    height: 55px;
}

@media (min-width: 601px) {
    .grecaptcha-badge {
        visibility: hidden !important;
    }
}

.custom-popup-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.custom-popup-box {
    background: #ffffff;
    border-radius: 12px;
    width: 640px;
    max-width: 95%;
    min-height: 420px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding: 40px 36px 32px 36px;
    text-align: left;
    font-family: BOG, sans-serif;
    animation: customPopupFadeIn 0.2s ease-out;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.custom-popup-title {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    color: #000;
    height: 48px;
    border-bottom: 1px solid #c4bebe;
    padding: 0;
    margin: 0;
    line-height: 1;
}


.custom-popup-message {
    display: inline-block;
    font-size: 18px;
    color: #333;
    line-height: 1.6;
    margin: 24px 0;
    text-align: center;
    white-space: normal;
    font-weight: 500;
}

.custom-popup-message strong {
    display: inline;
    font-weight: 700;
}

.custom-popup-button,
.custom-popup-trigger {
    cursor: pointer;
    border: none;
    background-color: #2B6CB0;
    color: white;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.custom-popup-button:hover,
.custom-popup-trigger:hover {
    background-color: #1E4E8C;
}

.custom-popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 22px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    transition: color 0.2s ease;
}

.custom-popup-close:hover {
    color: #000;
}

.custom-popup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #c4bebe; /* subtle purple divider */
    padding-top: 16px;
    margin-top: 24px;
}

.custom-popup-checkbox {
    font-family: BOG, sans-serif;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-popup-checkbox input[type="checkbox"] {
    accent-color: var(--color-primary-solid-10);  /* BOG orange */
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.custom-popup-terms-link {
    color: var(--color-primary-solid-10);
    text-decoration: underline;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.custom-popup-right {
    display: flex;
    gap: 12px;
}

.custom-popup-btn {
    padding: 10px 22px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: BOG, sans-serif;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.custom-popup-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-popup-btn.primary {
    background-color: var(--color-primary-solid-10);
    color: #FFFFFF;
}

.custom-popup-btn.secondary {
    background-color: #FFF4EC;  /* pale orange background */
    color: var(--color-primary-solid-10);
}

.custom-popup-btn.secondary:hover {
    background-color: #FFE7D6;
}

.custom-popup-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 24px 0 16px 0;  /* space between title and text */
}

.custom-popup-image {
    width: 200px;
    height: auto;
    justify-content: center;
    object-fit: contain;
}

.custom-popup-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: #eeeeee;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 16px 0 24px 0;
}

.custom-popup-info-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1.5px solid #BDBDBD;
    color: #BDBDBD;
    background-color: transparent;
    font-weight: 500;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.custom-popup-info-text {
    margin: 0;
    font-family: BOG, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    flex: 1;
}
/* === MOBILE RESPONSIVE STYLES FOR POPUP === */
@media (max-width: 600px) {

    .custom-popup-box {
        width: 95%;
        padding: 24px 20px;
        min-height: auto;
        border-radius: 10px;
    }

    .custom-popup-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .custom-popup-left {
        order: 1;
        display: flex;
        justify-content: flex-start;
    }

    .custom-popup-right {
        order: 2;
        display: flex;
        flex-direction: column-reverse;
        gap: 12px;
    }

    .custom-popup-btn {
        width: 100%;
        text-align: center;
        font-size: 16px;
        padding: 14px 0;
    }

    .custom-popup-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .custom-popup-message {
        font-size: 13px;
        margin: 16px 0;
    }

    .custom-popup-info-text {
        font-size: 12px;
    }

    .custom-popup-image-wrapper {
        margin: 16px 0;
    }

    .custom-popup-image {
        width: 150px;
    }
}

/* Dark theme styles for custom popup */
html.dark .custom-popup-box {
    background: var(--color-invert-background-solid-40);
    color: var(--color-invert-component-tr-20);
    border: 1px solid var(--color-invert-component-tr-60);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html.dark .custom-popup-title {
    color: var(--color-invert-component-tr-20);
    border-bottom: 1px solid var(--color-invert-component-tr-70);
}

html.dark .custom-popup-message {
    color: var(--color-invert-component-tr-30);
}

html.dark .custom-popup-close {
    color: var(--color-invert-component-tr-40);
}

html.dark .custom-popup-close:hover {
    color: var(--color-invert-component-tr-20);
}

html.dark .custom-popup-footer {
    border-top: 2px solid var(--color-invert-component-tr-70);
}

html.dark .custom-popup-checkbox {
    color: var(--color-invert-component-tr-20);
}

html.dark .custom-popup-info {
    background-color: var(--color-invert-background-solid-50);
    border: 1px solid var(--color-invert-component-tr-70);
}

html.dark .custom-popup-info-text {
    color: var(--color-invert-component-tr-30);
}

html.dark .custom-popup-info-icon {
    border-color: var(--color-invert-component-tr-50);
    color: var(--color-invert-component-tr-50);
}

html.dark .custom-popup-overlay {
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

html.dark .custom-popup-btn.secondary {
    background-color: var(--color-invert-background-solid-50);
    color: var(--color-orange);
    border: 1px solid var(--color-invert-component-tr-70);
}