/*
Theme Name: OSK
Theme URI: 
Author: JurisTech
Description: OSK Portal theme for Juris Access
*/

.surface--secondary {
    background-color: var(--color-base);
    border-color: var(--color-tint);
    color: var(--color-contrast)
}

[transparent].surface--secondary {
    background-color: rgba(0,0,0,0)
}

.surface--secondary {
    --color-base: var(--color-palette-secondary);
    --color-tint: var(--color-palette-secondary-tint);
    --color-shade: var(--color-palette-secondary-shade);
    --color-blush: var(--color-palette-secondary-blush);
    --color-contrast: var(--color-palette-secondary-contrast);
    --color-soft: var(--color-palette-secondary-soft);
    --color-bg: var(--color-palette-secondary-bg)
}

body.surface--secondary {
    background-color: var(--color-palette-secondary-bg)
}

.secondary {
    color: var(--color-palette-secondary) !important;
}

.secondary-bg {
    background-color: var(--color-palette-secondary) !important;
    border-color: var(--color-palette-secondary) !important;
    color: var(--color-palette-secondary-contrast) !important;
}

/*--- Debugging ------------------------------------------------------------- */

html[lang] {
    margin-top: 0 !important;
}

#wpadminbar {
    display: none;
}

/*--- Utilities ------------------------------------------------------------- */

.no-pad {
    margin: 0 !important;
    padding: 0 !important;
}

/*--- Adjustments ----------------------------------------------------------- */

/* ========================================================================== */
/* [#] ADJUSTMENTS                                                            */
/* ========================================================================== */

/*--- [##] Header ----------------------------------------------------------- */

.header__container {
    height: 100%;
    max-width: 1440px;
}

.header__grouping:last-child {
    margin: 0;
}

.header__button .icon:where([position=start]) {
    margin-inline-end: var(--spacing-50);
}

.header__button .icon:where([position=end]) {
    margin-inline-start: var(--spacing-50);
}

.header .app-logo {
    padding-block: var(--spacing-50);
}

.header .app-logo__image {
    height: var(--spacing-200);
}

@media only screen and (max-width: 577.98px) {
    .header__title {
        display: none;
    }
}

body {
    margin: 0;
}

fieldset {
    /*margin-bottom: var(--spacing);*/
    padding: 0;
    border: 0;
}

input,
select,
textarea,
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.field-unit__label,
.field-unit label,
.field-unit__notes,
.parsley-errors-list {
    font-weight: 400;
}

input, select, textarea, .select-wrapper .dropdown-content, .field-unit__action {
    min-height: calc(var(--base-height) + 2 * (var(--spacing-50) + var(--input-box-border)));
    border: 1px solid var(--color-palette-theme);
    border-radius: var(--border-radius-block);
    background: var(--color-bg);
    padding-block: var(--spacing-50);
}

.field-unit--disabled label,
.field-unit--disabled .field-unit__label,
.field-unit--readonly label,
.field-unit--readonly .field-unit__label {
    color: rgba(18, 23, 26, 0.3)
}

.select2-selection--multiple:is([readonly],[disabled],.disabled,.is-disabled),
.select2-selection--single:is([readonly],[disabled],.disabled,.is-disabled),
.select-wrapper .dropdown-content:is([readonly],[disabled],.disabled,.is-disabled),
textarea:is([readonly],[disabled],.disabled,.is-disabled),
input:is([readonly],[disabled],.disabled,.is-disabled),
select:is([readonly],[disabled],.disabled,.is-disabled) {
	border-color: rgba(176, 133, 77, 0.3);
    background-color: var(--color-bg);
    color: rgba(18, 23, 26, 0.38);
    opacity: 1;
}

.select2-selection--multiple:is([readonly],[disabled],.disabled,.is-disabled):is(:hover, :focus, :focus-visible),
.select2-selection--single:is([readonly],[disabled],.disabled,.is-disabled):is(:hover, :focus, :focus-visible),
.select-wrapper .dropdown-content:is([readonly],[disabled],.disabled,.is-disabled):is(:hover, :focus, :focus-visible),
textarea:is([readonly],[disabled],.disabled,.is-disabled):is(:hover, :focus, :focus-visible),
input:is([readonly],[disabled],.disabled,.is-disabled):is(:hover, :focus, :focus-visible),
select:is([readonly],[disabled],.disabled,.is-disabled):is(:hover, :focus, :focus-visible) {
	border-color: rgba(176, 133, 77, 0.3);
    background-color: var(--color-bg);
    color: rgba(18, 23, 26, 0.38);
    opacity: 1;
}

input::placeholder, select::placeholder, textarea::placeholder {
    color: var(--color-soft);
    opacity: 0.5;
}

.field-unit__action {
    width: calc(3.5 * var(--spacing) * var(--spn) / var(--spn));
    height: calc(var(--base-height) + 2 * (var(--spacing-50) + var(--input-box-border)));
    padding: var(--spacing-50) var(--spacing);
    border-left: 0;
    color: var(--color-palette-theme);
}

.field-unit__action:last-child {
    border-radius: 0 var(--border-radius-block) var(--border-radius-block) 0
}

.field-unit__action .icon {
    line-height: inherit;
}

.field-unit.has-actions input {
    /* Height matches field-unit__action height to counter sub-pixel rendering defects */
    height: calc(var(--base-height) + 2 * (var(--spacing-50) + var(--input-box-border)));
    padding-right: calc(var(--field-unit-num-actions) * calc(3.5 * var(--spacing) * var(--spn) / var(--spn)) + var(--spacing-50));
}

select option {
    background-color: var(--color-base);
    color: var(--color-contrast);
}

:checked+.field-unit__descriptor,
.field-unit__options :checked+:where(input+span) {
    font-weight: inherit;
}

.card__container:not(.card__container--list)
.card,
.card__container--list,
.card--stack {
    border-radius: 0;
    box-shadow: none;
    background: var(--color-bg);
}

.message--notification {
    background-color: var(--color-flavor-b-300);
    color: var(--color-flavor-b-900);
}

/* TODO Review selector specifity after Fondue upgrade */

a:not(.button):not(.soft).menu,
.menu a:not(.button):not(.soft) {
    border: 0;
    color: inherit;
}

button,
.button {
    min-width: calc(10 * var(--spacing));
    border-radius: 999px;
    box-shadow: none;
    font-size: inherit;
}

hr {
    margin: calc(2 * var(--spacing)) 0;
}

.field-unit--checkbox input {
    width: calc(2 * var(--spacing) * var(--spn) / var(--spn));
    margin: 0 calc(1 * var(--spacing) * var(--spn) / var(--spn)) 0 0;
}

.field-unit--checkbox .field-unit__label {
    width: 100%;
    flex: 100%;
}

.field-unit__options input+span::before {
    border: 1px solid var(--color-palette-theme);
    background-color: var(--color-bg);
}

.field-unit__options :is([disabled], .disabled, .is-disabled):where(input)+:where(input+span)::before {
    opacity: 0.4 !important;
    filter: none;
    cursor: no-drop !important;
}

/* TODO Update selectors after Fondue upgrade */

.field-unit>.field-unit--password {
    min-width: 0px !important;
    /* Remove after ugrade */
    width: calc(0.66 * var(--spacing) * var(--spn) / var(--spn) + var(--base-height));
    height: calc(0.66 * var(--spacing) * var(--spn) / var(--spn) + var(--base-height));
    color: inherit;
    text-align: center;
    line-height: calc(0.66 * var(--spacing) * var(--spn) / var(--spn) + var(--base-height));
    opacity: 0.7;
}

.field-unit>.field-unit--password:hover {
    opacity: 1;
}

.field-unit--stacked>.field-unit--password {
    top: 26px !important;
    /* Label height + input border */
    right: 2px;
    /* Account for input border */
}

input[type="password"][disabled]~.field-unit--password {
    pointer-events: none;
}

.anchor, a {
    color: var(--color-palette-theme);;
}

.anchor:where([type=default]), .anchor--default,
.anchor, :where(a) {
    border-bottom: 1px solid var(--color-palette-theme);
}

.anchor:where([type=default]):hover,
.anchor:where([type=default]):focus,
.anchor:where([type=default]):focus-visible,
.anchor--default:hover,
.anchor--default:focus,
.anchor--default:focus-visible,
.anchor:hover,
.anchor:focus,
.anchor:focus-visible,
a:hover,
a:focus,
a:focus-visible {
    color: var(--color-palette-theme-blush);
}

/*--- Portal header --------------------------------------------------------- */

.jp-header__wrapper {
    position: relative;
    z-index: 3;
}

.jp-header {
    flex-wrap: nowrap;
}

.jp-header__start>*,
.jp-header__end>* {
    position: relative;
    flex-wrap: nowrap;
}

.jp-header__start,
.jp-header__end {
    flex-wrap: nowrap;
}

.jp-header__button {
    width: calc(2 * var(--spacing));
    height: calc(2 * var(--spacing));
    border-radius: 50%;
    text-align: center;
    line-height: calc(2 * var(--spacing));
}

.jp-header__button .icon {
    font-size: 1.2rem;
    line-height: inherit;
}

.jp-header__top-level-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 calc(0.1 * var(--spacing));
    border-radius: var(--border-radius-inline);
    line-height: 2.5rem;
    text-align: center;
}

.jp-header__back {
    margin-right: var(--spacing);
}

.hamburger__button {
    margin-left: calc(0.7*var(--spacing));
}

.jp-header__title {
    margin: 0;
    font-weight: lighter;
    cursor: default;
}

.jp-header__home {
    opacity: 1 !important;
}

.jp-header__logo {
    width: calc(5 * var(--spacing));
    height: calc(2 * var(--spacing));
    margin-right: var(--spacing);
    background: url('assets/images/logo.png') no-repeat center;
    background-size: contain;
}


/**
    Size of home button
 */

a[rel='home'] {
    font-size: 1.2em;
}

@media only screen and (max-width: 767.98px) {
    .header .app-logo__image {
        height: var(--spacing-150);
    }

    .header__button {
        justify-content: center;
        min-width: calc(4 * var(--spacing-50));
        padding-inline: var(--spacing-50);
    }
}

/* [##] Hamburger menu ------------------------------------------------------ */

#hamburger {
    position: relative;
}


/* [##] Language switcher --------------------------------------------------- */

.language__flag {
    position: relative;
    top: -2px;
    margin-right: calc(0.5 * var(--spacing));
}

.language .icon--status {
    opacity: 0;
}

.language.is-active .icon--status {
    opacity: 1;
}

@media only screen and (max-width: 767.98px) {
    .language-switcher__button .button__label,
    .language-switcher__button .icon[position="end"] {
        display: none;
    }

    .language-switcher__button .icon[position="start"] {
        margin-inline-end: 0;
    }
}

/*--- Portal content ------------------------------------------------------- */

main {
    height: calc(100vh - var(--header-size));
    padding-left: 0;
}

.main--simple .main__wrapper {
    min-height: calc(100% - var(--footer-size));
    padding: var(--spacing-200) 0;
}

.main--simple .main__wrapper.dead-centering {
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.main--simple .container {
    max-width: 720px;
}

@media screen and (max-width: 1199.98px) {
    .main--simple .container {
        max-width: 720px;
    }
}

@media screen and (max-width: 991.98px) {
    .main--simple .container {
        max-width: 720px;
    }
}


.main .row {
    height: 100%;
}

/*--- Portal footer -------------------------------------------------------- */

.footer {
    flex-flow: column;
    margin: 0;
    padding: var(--spacing) 0;
}

.footer__block {
    width: 100%;
}

.footer__links,
.footer__copyright {
    text-align: center;
    padding-block: var(--spacing-50);
}

.footer__links {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing);
}

.footer__links a {
    color: var(--color-soft);
}

.footer__links a:hover,
.footer__links a:focus,
.footer__links a:focus-visible {
    color: var(--color-contrast);
}

@media screen and (max-width: 575.98px) {
    .footer__links {
        flex-flow: column nowrap;
    }
}

/* ========================================================================== */
/* [#] SHARED                                                                 */
/* ========================================================================== */

/* [##] Island -------------------------------------------------------------- */

.island {
    padding: var(--spacing-400) calc(6 * var(--spacing) * var(--spn) / var(--spn));
    opacity: 0.9;
}

@media screen and (max-width: 991.98px) {
    .island {
        padding: var(--spacing-200);
    }
}

@media screen and (max-width: 575.98px) {
    .island {
        padding: var(--spacing);
    }
}

/* [##] Listings ------------------------------------------------------------ */

.listing:not(:last-child) {
    margin-bottom: var(--spacing-200);
}

.listing__header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding-block: var(--spacing) var(--spacing-50);
    border-bottom: 1px solid var(--color-tint);
    cursor: pointer;
    transition: all var(--animation-duration) var(--animation-timing-function);
}

.listing__header.is-opened {}

.listing__header:hover,
.listing__header:focus,
.listing__header:focus-visible {}

.listing__header .listing__text {
    flex: 1 1 0;
    margin-right: var(--spacing);
}

.listing__header .listing__title {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
}

.listing__header .listing__title.hard{
    color : var(--color-palette-theme);
    font-weight: bolder;
    font-size: var(--font-size-h3);
}

.listing__header .expander {
    margin-left: auto;
}

.listing__header.is-opened .listing__subtitle {
    color: inherit;
}

.listing__body {
    padding-top: var(--spacing);
}

.listing__actions {
    margin-top: var(--spacing);
}

.listing__actions .button{
    margin: 0;
}

.listing__body > .listing__header {
    margin-top: var(--spacing);
    padding: var(--spacing);
    background-color: #e4e0dc;
}
.listing__body > .listing__header.is-closed {
    border: 0;
}

.listing__body > .listing__body , .listing__body > .listing__body .surface--light {
    background: var(--color-palette-light-bg);
}

.listing__body > .listing__body {
    padding: var(--spacing);
    padding-top: 0;
}


/* [##] Forms --------------------------------------------------------------- */

form .row {
    margin-left: calc(-1 * var(--spacing-200));
    margin-right: calc(-1 * var(--spacing-200));
}

form .row > [class^=col-] {
    padding-left: var(--spacing-200);
    padding-right: var(--spacing-200);
}

form .row > [class^=col-]:last-child .field-unit,
form .row > [class^=col-]:last-child .field-unit__notes {
    margin-bottom: 0;
}

.form__actions .button {
    margin: 0;
}
.form__actions .button:not(:last-child) {
    margin-inline-end: var(--spacing);
}

@media screen and (max-width: 575.98px) {
    .form__actions {
        display: flex;
        flex-flow: column-reverse;
        gap: var(--spacing-20);
    }

    .form__actions .button:not(:last-child) {
        margin: 0;
    }
}

/* ========================================================================== */
/* [#] PAGES                                                                  */
/* ========================================================================== */

.main--wide .container {
    max-width: calc(992px + var(--spacing-200));
}

@media screen and (max-width: 1199.98px) {
    .main--wide .container {
        max-width: calc(992px + var(--spacing-200));
    }
}

@media screen and (max-width: 991.98px) {
    .main--wide .container {
        max-width: 100%;
    }
}

/* ========================================================================== */
/* [#] LOGIN                                                                  */
/* ========================================================================== */

.login {
    flex-flow: row wrap;
    opacity: 0.9;
    overflow: auto;
}

.login__column {
    width: 100%;
}

.login__column:not(:only-child) {
    max-height: unset;
}

.login__column--login {
    padding: var(--spacing-400) calc(6 * var(--spacing) * var(--spn) / var(--spn)) var(--spacing-300);
}

.login__column--register {
    padding: var(--spacing-200) calc(6 * var(--spacing) * var(--spn) / var(--spn)) var(--spacing-400);
    background: var(--color-tint);
}

#login-links {
    margin-top: var(--spacing-200);
}

#login-links .login-submit,
#login-links .button {
    margin: 0;
}

#login-links a {
    opacity: 1;
    text-decoration: none;
}

@media screen and (max-width: 991.98px) {
    .login__column--login,
    .login__column--register {
        padding: var(--spacing-200);
    }
}

@media screen and (max-width: 575.98px) {
    .login__column--login,
    .login__column--register {
        padding: var(--spacing);
    }
}

/* ========================================================================== */
/* [#] FORGOT PASSWORD                                                        */
/* ========================================================================== */

.field-unit.field-unit--actions {
    margin-top: var(--spacing-200);
}

/* ========================================================================== */
/* [#] APPLICATIONS                                                           */
/* ========================================================================== */

.application__date {
    margin-top: var(--spacing-50);
}

.application-list .listing__body .button {
    margin-top: var(--spacing);
}

@media screen and (max-width: 767.98px) {
    .application__status,
    .button--card {
        width: 100%;
    }
}

/*--- Chatbot window -------------------------------------------------------- */

.chatbot {
    position: fixed;
    bottom: 0;
    right: 2rem;
    z-index: 3;
    height: calc(450px + 50px + 2 * 2rem);
    width: calc(400px + 2 * 2rem);
    max-width: 100%;
    max-height: 100%;
    transition: 0.1s;
}

.chatbot.is-minimized {
    height: 50px;
}

.chatbot__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: var(--spacing);
    background-color: var(--color-palette-theme);
    color: var(--color-palette-theme-contrast);
}

.chatbot .icon {
    display: none;
    cursor: pointer;
}

.chatbot:not(.is-minimized) .icon.when-normal,
.chatbot.is-minimized .icon.when-minimized {
    display: block;
}

.chatbot iframe {
    position: absolute;
    top: 50px;
    left: 0;
    height: calc(100% - 50px);
    transition: 0.2s;
}

@media only screen and (max-width: 991px) {
    .chatbot {
        right: 0;
        width: 50%;
    }
    .chatbot:not(.is-minimized) {
        top: 10%;
        bottom: auto;
        left: 0;
        right: auto;
        width: 100%;
        height: 90%;
        padding: 0;
    }
    #content .listing {
        flex-wrap: wrap;
    }
}

/* ========================================================================== */
/* [#] DASHBOARD                                                              */
/* ========================================================================== */

.dashboard__heading {
    flex-flow: row;
    align-items: center;
}

.dashboard__username {
     /*font-size: var(--font-size-h3);*/
     line-height: 1;
}

.dashboard .card--promo {
    flex-flow: column nowrap;
    align-items: flex-start;
}

.dashboard .card--promo .card__actions {
    margin-left: initial;
}

.dashboard .card__container--grid {
    --card-grid-max-columns: 2;
    --card-grid-gutter: calc(var(--card-grid-max-columns) * 2 * var(--spacing-50));
    --card-grid-min-width: calc((992px - (2 * 90px) + var(--spacing-200) - var(--card-grid-gutter)) / var(--card-grid-max-columns));
}

.dashboard-card {
    padding: 0;
    border: 0;
    cursor: initial;
}

.dashboard-card .card__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--spacing);
    background-color: #e4e0dc;
    border-bottom: 1px solid var(--color-shade);
    border: 0;
}

.dashboard-card .card__body {
    flex: 1 1 0;
    padding: var(--spacing);
}

.dashboard-card .card__body,
.dashboard-card .card__footer {
    width: 100%;
}

.dashboard-card .card__footer {
    padding: var(--spacing) var(--spacing);
}

.dashboard-card .card__body + .card__footer {
    padding-top: 0;
}

.dashboard-card .card__header {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
}
.dashboard-card .card__header .icon {
    margin: 0 calc(.5*var(--spacing)*var(--spn)/var(--spn)) 0 0;
}

.dashboard-card .card__breakdown {
    margin: 0;
}

.dashboard-card .card__breakdown .breakdown__item {
    padding-block: var(--spacing-33);
}

.dashboard-card .card__breakdown .breakdown__item:first-child {
    padding-top: 0;
}

.dashboard-card .card__breakdown .breakdown__item:last-child {
    padding-bottom: 0;
}

.dashboard-card .card__footer .button {
    width: 100%;
    margin-block: 0;
}

.dashboard-card .card__footer .button:not(:last-child) {
    margin-bottom: var(--spacing);
}

.dashboard-card form {
    margin-bottom: var(--spacing);
}

.dashboard-card .card__footer > div + form {
    margin-top: var(--spacing-150);
}

.dashboard-card .card__body + .card__footer > form:only-child {
    margin: 0;
}

@media only screen and (max-width: 552px) {
    .listing .card__text  {
        display: block
    }
    .listing .card__title {
        padding: calc(0.33*var(--spacing)) 0;
    }
}

.semantic-draft 
{
    color: var(--color-flavor-x-500);
}

.semantic-draftexp ,
.semantic-discard
 {
    color: var(--color-flavor-x-700);
}

.semantic-incomplete-ekyc,
.semantic-pending-ekyc {
    color: var(--color-flavor-a-500);
}

.semantic-submitted ,
.semantic-process-mindataentry,
.semantic-pending-submit{
    color: var(--color-flavor-g-300);
}

.semantic-cancelled,
.semantic-cust_cancel,
.semantic-rejected,
.semantic-cancel
{
    color: var(--color-flavor-r-500);
}

.semantic-submit-fail,
.semantic-failed{
    color: var(--color-flavor-r-300);
}

.semantic-process-pend-agent,
.semantic-process-prescreening,
.semantic-process-dataentry,
.semantic-process-verification,
.semantic-process-approval {
    color: var(--color-flavor-y-500);
}

.semantic-approved {
    color: var(--color-flavor-y-300);
}

.semantic-pending-disb,
.semantic-new {
    color: var(--color-flavor-o-500);
}

.semantic-disbursed,
.semantic-successful{
    color: var(--color-flavor-b-700);
}

.semantic-active{
    color : var(--color-flavor-g-700);
}

.semantic-setfull{
    color : var(--color-flavor-g-500);
}

.semantic-delq,
.semantic-imp{
    color : var(--color-flavor-t-300);
}

.prompt--confirmation-prompt .button {
    min-width: 220px;
}

/*--- Dialog ----------------------------------------------------------------- */

.prompt__container .prompt__header {
    min-height: var(--header-size);
    height: auto;
}

.prompt__title h2 {
    white-space: normal;
}

.prompt.prompt--confirmation-prompt.is-active {
    padding-top: var(--spacing-150);
}

.disclaimer {
    font-style: italic;
    color : red;
}

.disclaimer__actions .button {
    margin: 0;
}

.disclaimer__actions .button:not(:last-child) {
    margin-inline-end: var(--spacing)
}

.disclaimer__actions > form {
    display: inline-block;
    margin-right: var(--spacing-50);
}

/*--- Login ------------------------------------------------------------------ */

#login-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login__divider{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing);
    margin-bottom: var(--spacing);
    text-transform: uppercase;
}

/* ========================================================================== */
/* [#] OTP                                                                    */
/* ========================================================================== */

.otp__heading {
    /* Display heading manually on the page */
    display: none;
}

.otp__info {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing);
}

.otp__contact .contact__value {
    font-weight: bold;
}

.otp__image {
    text-align: center;
}

.otp__image img {
    width: calc(5 * var(--spacing));
    margin: var(--spacing-200);
}

.otp__actions {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: var(--spacing);
}

.field-unit ~ .otp__actions {
    justify-content: flex-start;
}

.otp__resend {
    flex: 0 0 100%;
    order: 1;
    margin-bottom: var(--spacing-50);
}

.otp__verify {
    flex: 0 0 auto;
    order: 3;
}

.otp__phone {
    flex: 0 0 auto;
    order: 2;
}

.otp__resend p {
    display: inline;
    margin: 0;
    padding: 0;
}

.otp__resend .button {
    min-width: fit-content;
    width: auto;
    margin: 0 0 var(--spacing-150);
    padding: var(--spacing-20) var(--spacing-50);
    background-color: var(--color-tint);
    border-radius: var(--border-radius-inline);
    font-size: 0.9rem;
    color: var(--color-contrast);
}

.otp__resend .button[disabled] {
    pointer-events: none;
}

.otp__resend .button__label::after {
    opacity: 0;
}

.otp__send .button, .otp__verify .button, .otp__phone .button {
    min-width: calc(14 * var(--spacing) * var(--spn) / var(--spn));
    max-width: 100%;
}

.otp__send .button, .otp__verify .button {
    margin-right: var(--spacing);
}

.otp__phone .button {
    margin-right: var(--spacing);
}

.otp__timer--resend {
    display: inline;
    margin-top: calc(-1 * var(--spacing-50));
    margin-bottom: var(--spacing-33);
    color: var(--color-palette-theme);
    vertical-align: middle;
}

@media screen and (max-width: 767.98px) {
    .otp__send, .otp__verify, .otp__phone {
        flex-basis: 100%;
    }

    .otp__send .button, .otp__verify .button, .otp__phone .button {
        width: 100%;
        margin-right: 0;
    }
}

.otp--multi-input .otp__inputs {
    display: flex;
    gap: var(--spacing-50);
}

.otp--multi-input .otp__input {
    width: calc(var(--base-height) + 2 * (var(--spacing-50) + var(--input-box-border)));
    height: calc(var(--base-height) + 2 * (var(--spacing-50) + var(--input-box-border)));
    font-size: 1rem;
    font-weight: normal;
    text-align: center;
}

@media screen and (max-width: 575.98px) {
    .otp--multi-input .otp__inputs {
        display: flex;
        gap: 2px;
    }
}

/* ========================================================================== */
/* [#] ATTESTATION                                                            */
/* ========================================================================== */

.attestation iframe {
    width: 100%;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 16/9;
}

/* ========================================================================== */
/* [#] PROFILE                                                                */
/* ========================================================================== */

.main--profile .col-lg-4 .field-unit,
.main--profile .col-lg-4 .field-unit__notes {
    margin-bottom: 0;
}

@media screen and (max-width: 991.98px) {
    .main--profile .col-12 .field-unit,
    .main--profile .col-12 .field-unit__notes {
        margin-bottom: var(--spacing);
    }

    .main--profile .col-12:last-child .field-unit,
    .main--profile .col-12:last-child .field-unit__notes {
        margin-bottom: 0;
    }
}

/* ========================================================================== */
/* [#] REPAYMENT                                                              */
/* ========================================================================== */

/* [##] Account Details ----------------------------------------------------- */

.repayment__cards {
    margin-bottom: var(--spacing);
}
.repayment-card {
    padding: var(--spacing);
    border-radius: var(--border-radius-block);
    background: var(--color-bg);
}

.repayment-card__detail {
    padding: var(--spacing-50) 0;
}
.repayment-card__value {
    font-weight: 700;
}

.breakdown {
    margin: 0 var(--spacing) var(--spacing-200);
}

.breakdown__detail {
    padding: var(--spacing-50) 0;
    border-bottom: 1px solid var(--color-shade);
}
.breakdown__detail:last-child {
    border-bottom: 0;
}

@media screen and (max-width: 551.98px) {
    .repayment-card__detail, .breakdown__detail {
        display: block;
    }
}

/* [##] Documents ----------------------------------------------------------- */

.repayment .document.card--stack {
    background: var(--color-bg);
    box-shadow: none;
}

.repayment .document .icon {
    line-height: inherit;
}

.repayment .document .button {
    margin-block: 0;
    margin-inline: auto 0;
}

@media screen and (max-width: 767.98px) {
    .repayment .document .button {
        min-width: unset;
    }
    .repayment .document .button__label {
        display: none;
    }
    .repayment .document .button__icon {
        margin-inline-end: 0;
    }
}

/*--- Payment History ------------------------------------------------------- */

.history-record {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing) 0;
}

.history-record:not(:last-child) {
    border-bottom: 1px solid var(--color-tint);
}

.history-record__content--end {
    font-size: var(--font-size-h4);
    font-weight: bold;
}

.history-record__note {
    margin-top: calc(0.5 * var(--spacing) * var(--spn) / var(--spn));
}

@media only screen and (max-width: 576px) {
    .history-record {
        flex-flow: column-reverse nowrap;
        justify-content: flex-start;
        align-items: stretch;
    }

    .history-record__content--end {
        margin-bottom: calc(0.5 * var(--spacing) * var(--spn) / var(--spn));
    }
}