html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;  
    overflow: clip;  
}

body {
    margin: 0;
    line-height: normal;
}

.doka-main-layout {
    background-color: transparent;
    overflow-y: auto;
    height: 100vh;
    scrollbar-width: none;
    padding-bottom: 120px;
}

@media (max-width: 488px) {
    .doka-main-layout {
        padding: 16px;
        padding-bottom: 120px;
    }

    .mobile-container {
        padding: 0px !important;
        margin: 0px !important;
    }
}

.main-layout-height {
    height: 100vh;
}

@media (max-width: 960px) {
    .main-layout-height {
        height: auto;
    }
}

#app {
    background-color: var(--doka-gray-lighter);
}

.doka-page-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: var(--doka-appbar-height);
}

.doka-page-md {
    max-width: 488px;
    margin-left: auto;
    margin-right: auto;
}

.doka-page-lg {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.doka-page-header {
    display: flex;
    flex-direction: column;
    padding: 8px;
    height: 40px;
    background: #0133A0;
    color: white;
    border-radius: 8px;
    align-items: center;
    margin-bottom: 16px;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

img {
    filter: grayscale(var(--doka-grayscale-level));
}

@media (max-width: 430px) {
    .doka-page-header {
        display: flex;
        flex-direction: column;
        gap: 16px;
        text-align: left;
    }
}

.doka-page-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}

.doka-bread-crumb {
    font-size: 11px;
    font-weight: 400;
    line-height: 16.5px;
    padding: 0px;
}

.doka-divider {
    opacity: 30%;
    border-color: #BBBDCC;
    border-width: 1px;
}

.doka-back-button {
    color: var(--doka-theme-primary);
    margin-left: -24px;
}

    .doka-back-button:hover {
        cursor: pointer;
    }

.primary-cursor-pointer:hover {
    cursor: pointer;
    color: var(--doka-theme-primary);
}

.doka-form-container { /* form  dvider  button*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.doka-form-section-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.doka-form-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.doka-form-section-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: space-between;
}

.doka-form-input-container {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

    .doka-form-input-container .mud-input-control {
        margin-top: 0px !important;
    }

.doka-form-field {
    width: 100%;
}

    .doka-form-field .mud-input {
        font-size: 14px;
        font-weight: 400;
    }

.doka-date-field {
    min-height: 48px;
}

.doka-form-content { /*without section*/
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
}


.doka-primary-btn {
    color: var(--doka-theme-white);
    background: var(--doka-theme-primary-gradient);
    border-radius: 12px;
    height: 48px;
    min-width: 260px;
    font-size: 13px;
    font-weight: 600;
    line-height: 19.5px;
}

    .doka-primary-btn:disabled {
        background: var(--doka-gray-default) !important;
        color: var(--doka-gray-400) !important;
    }

.doka-reject-btn {
    color: var(--doka-palette-white);
    background: var(--doka-error-color);
    border-radius: 12px;
    height: 48px;
    min-width: 260px;
    font-size: 13px;
    font-weight: 600;
    line-height: 19.5px;
}

    .doka-reject-btn:disabled {
        background: var(--doka-gray-default) !important;
        color: var(--doka-gray-400) !important;
    }

.doka-card-primary-btn {
    color: var(--doka-palette-white);
    background: var(--doka-theme-primary-gradient);
    border-radius: 12px;
    height: 40px;
}

.doka-card-error-btn {
    color: var(--doka-palette-white);
    background: var(--doka-theme-error);
    border-radius: 12px;
    height: 40px;
}

.doka-continue-btn {
    margin-left: auto;
}

.doka-confirm-btn {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 22.5px !important;
    width: 412px;
    height: 54px !important;
}

.doka-card-btn {
    font-size: 10px;
    font-weight: 600;
    line-height: 19.5px;
    width: 180px;
    margin-left: auto;
}

@media screen and (max-width: 960px) {
    .doka-page-md {
        margin-left: auto;
        margin-right: auto;
    }

    .doka-page-lg {
        margin-left: auto;
        margin-right: auto;
    }

    .doka-form-input-container {
        flex-direction: column;
        gap: 12px;
    }

    .doka-form-field {
        width: unset;
    }
}


@media screen and (max-width: 690px) {

    .doka-page-md {
        margin-left: unset;
        margin-right: unset;
    }

    .doka-continue-btn {
        margin-left: unset;
    }

    .doka-primary-btn {
        min-width: 100%;
    }

    .doka-reject-btn {
        min-width: 100%;
    }

    .doka-confirm-btn {
        width: 100%;
    }

    .doka-back-button {
        margin-left: -10px;
    }
}

.doka-form {
    display: flex;
    gap: 4px;
    flex-direction: column;
}

.doka-form-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 8px;
    margin-left: 8vw;
    margin-right: 8vw;
}

.doka-form-label {
    color: var(--doka-primary-darken-color);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

.doka-field-form-label {
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    color: var(--doka-primary-darken-color);
}

.doka-field-form-label-gray {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 18px;
    color: var(--doka-primary-darken-color);
}

.doka-blue-background {
    background: var(--doka-theme-primary-gradient);
    color: var(--doka-theme-white);
}

.doka-form-section-label {
    color: var(--doka-section-label-color);
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.login-message-dialog .message-content {
    font-weight: 600;
    font-size: 14px;
    line-height: 23px;
}

.login-message-dialog .mud-dialog-title {
    color: var(--doka-theme-primary);
}

.mud-dialog .mud-dialog-actions {
    justify-content: center;
}

.login-message-dialog .mud-overlay-scrim.mud-overlay-dark {
    background-color: rgba(256, 256, 256, 0.90);
}

.mud-overlay {
    z-index: 1200;
}

/*Mudblazor updates*/

.doka-form-label-container {
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 600px) {
    .doka-form-label-container {
        display: block;
        align-items: initial;
    }

    .mud-picker-inline-paper .mud-paper {
        position: fixed !important;
        margin-top: 0 !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        top: 50% !important;
    }

    .mud-drawer .mud-drawer-content .doka-grid.sm-column tbody tr {
        display: flex;
        flex-direction: column;
    }

        .mud-drawer .mud-drawer-content .doka-grid.sm-column tbody tr td {
            border: none;
            padding: 4px 8px;
        }

    .mud-drawer .mud-drawer-content .doka-grid.sm-column thead {
        display: none;
    }
}

/*Campaign Drawer*/
.campaign-drawer-icon-container {
    position: fixed;
    top: 200px;
    right: 0;
    z-index: 999;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
}


.campaign-drawer-toggle-btn {
    top: 300px;
    background-color: var(--doka-theme-primary);
    color: var(--doka-theme-white);
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px 5px 0px 0px;
    position: fixed;
    z-index: 2;
    transition: transform 0.3s ease;
    transform: rotate(270deg);
}

.campaign-drawer-toggle-btn-hide {
    top: 300px;
    background-color: var(--doka-theme-primary);
    color: var(--doka-theme-white);
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px 5px 0px 0px;
    position: fixed;
    right: 504px;
    z-index: 2;
    transition: transform 0.3s ease;
    transform: rotate(270deg);
}

.campaign-drawer-sidebar {
    display: none;
}

.campaign-drawer-sidebar-show {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: var(--doka-appbar-height);
    right: 0;
    width: 500px;
    background-color: var(--doka-theme-white);
    box-shadow: -5px 0 5px rgba(0, 0, 0, 0.2);
    padding: 48px;
    z-index: 1;
    margin-top: 20px;
    border-radius: 16px 0px 0px 16px;
}

@media only screen and (max-width: 430px) {
    .campaign-drawer-sidebar-show {
        width: 330px !important;
    }

    .campaign-drawer-toggle-btn-hide {
        right: 334px !important;
    }
}

.campaign-drawer-toggle-btn:hover {
    background-color: #0056b3;
}
/*Campaign Drawer.*/

.drawer-close-icon-button {
    color: var(--drawer-close-icon-color);
    padding: 0px;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rem 0rem 0rem 0rem;
    margin: -4px -6px 10px -6px;
}

.menu-search-items-container .mud-typography-subtitle1 {
    color: var(--mud-palette-text-primary);
}

.mud-nav-link {
    padding: 4px !important;
    display: flex;
    align-items: center;
    word-break: break-word;
    border-radius: 10px;
}

    .mud-nav-link .mud-nav-link-text {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: 0px;
        margin-inline-start: 0px;
    }

.mud-nav-group {
    background: transparent !important;
}

.mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: inherit;
}

.mud-nav-link .mud-nav-link-expand-icon {
    color: inherit;
}

input[type=number]::-webkit-inner-spin-button {
    visibility: hidden;
}

.menu-item-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.menu-item-container-step1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.menu-item-container-step1-active {
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    background: linear-gradient( 104deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.02) 100% ) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07), 0 5px 20px rgba(31, 156, 235, 0.07) !important;
    color: #fff !important;
    width: 100%;
    padding: 4px !important;
}

.menu-item-container-step1-passive {
    color: var(--menu-color-txt) !important;
    padding: 4px !important;
    width: 100%;
}

.mud-drawer-fixed.mud-drawer-mini.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-persistent:not(.mud-drawer-clipped-never), .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always {
    top: 0;
    height: -webkit-fill-available;
}

.account-card-drawer {
    --mud-drawer-width: 30%;
    padding: 0rem 1rem 0rem 1rem;
    background: var(--login-color-bg);
    overflow: hidden;
}

@media screen and (max-width:960px) {
    .account-card-drawer {
        --mud-drawer-width: 40%;
    }
}

@media screen and (max-width:700px) {
    .account-card-drawer {
        --mud-drawer-width: 60%;
    }
}

@media screen and (max-width:500px) {
    .account-card-drawer {
        --mud-drawer-width: 100%;
    }

    .campaign-card-drawer {
        --mud-drawer-width: 100%;
    }

    .receipt-drawer {
        --mud-drawer-width: 100%;
    }

    .bank-update-drawer {
        --mud-drawer-width: 100%;
    }
}

.account-detail-drawer {
    --mud-drawer-width: 40%;
    padding: 0rem 1rem 0rem 1rem;
    background: var(--login-color-bg);
}

@media screen and (max-width:1280px) {
    .account-detail-drawer {
        --mud-drawer-width: 50%;
    }
}

@media screen and (max-width:960px) {
    .account-detail-drawer {
        --mud-drawer-width: 60%;
    }
}

@media screen and (max-width:700px) {
    .account-detail-drawer {
        --mud-drawer-width: 80%;
    }
}

@media screen and (max-width:500px) {
    .account-detail-drawer {
        --mud-drawer-width: 100%;
    }
}

.mud-chart-donut .mud-donut-segment {
    transition: transform 0.25s ease, stroke-width 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
    transform-origin: center;
    cursor: pointer;
}

.mud-chart-donut:hover .mud-donut-segment {
    opacity: 0.35;
}

[class*="index-"] .mud-donut-segment {
    opacity: 0.35;
}

[class*="index--1"] .mud-donut-segment {
    opacity: 1 !important;
}

.mud-chart-donut .mud-donut-segment:hover {
    transform: scale(1.15);
    stroke-width: 5;
    opacity: 1;
}

.mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding-right: 12px;
}

.index-0 .mud-donut-segment:nth-of-type(2),
.index-1 .mud-donut-segment:nth-of-type(3),
.index-2 .mud-donut-segment:nth-of-type(4),
.index-3 .mud-donut-segment:nth-of-type(5),
.index-4 .mud-donut-segment:nth-of-type(6),
.index-5 .mud-donut-segment:nth-of-type(7),
.index-6 .mud-donut-segment:nth-of-type(8),
.index-7 .mud-donut-segment:nth-of-type(9),
.index-8 .mud-donut-segment:nth-of-type(10) {
    transform: scale(1.15);
    stroke-width: 5;
    opacity: 1;
}

.campaign-carousel-container {
    height: 256px;
    max-width: 488px;
}


@media (max-width: 960px) {
    .campaign-carousel-container {
        height: 300px;
    }
}

@media (max-width: 500px) {
    .campaign-carousel-container {
        height: 112px;
    }
}

.carousel-icon-size-selected {
    height: 6px;
    width: 24px;
    background: var(--doka-palette-secondary);
    border-radius: 4px;
    color: var(--doka-palette-secondary);
    margin: 8px 0px 0px 4px;
}

.carousel-icon-size-selected-primary {
    height: 6px;
    width: 24px;
    background: var(--doka-palette-primary);
    border-radius: 4px;
    color: var(--doka-palette-primary);
    margin: 8px 0px 0px 4px;
}

.carousel-icon-size {
    height: 6px;
    width: 6px;
    color: var(--carousel-icon-bg);
    margin: 8px 0px 0px 4px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.cta-button-displayed-text {
    text-transform: uppercase;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
    max-height: calc(1.3em * 2);
    height: 100%;
    align-content: center;
}

.mud-button-root:disabled {
    opacity: 50% !important;
}

@media (hover: hover) and (pointer: fine) {
    .mud-button-filled.mud-button-filled-primary:hover {
        background-color: var(--doka-palette-primary);
    }
}

@media (hover: hover) and (pointer: fine) {
    .save-btn.mud-button-filled.mud-button-filled-primary:hover {
        background-color: transparent;
    }
}

@media (max-width: 465px) {
    .mud-dialog-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.mud-appbar.mud-appbar-fixed-top.main-layout-top-bar {
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    max-width: 1200px;
    width: 100%;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

@media (max-width: 1200px) {
    .mud-appbar.mud-appbar-fixed-top.main-layout-top-bar {
        border-radius: 0;
        max-width: 100%;
    }
}

.main-layout-bottom-bar-container {
    padding-right: 40px;
    padding-left: 40px;
}

@media (max-width: 1200px) {
    .main-layout-bottom-bar-container {
        padding-right: 0;
        padding-left: 0;
    }
}

.main-layout-bottom-bar-container .contact-phone-number {
    margin-left: 4px;
}

@media (max-width: 488px) {
    .dashboard-grid {
        margin-top: -46px;
    }
}

.last-login-time-paper {
    width: 100%;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: var(--login-input-radius);
}

.accessibility-button:focus-visible {
    outline: 1px solid var(--doka-palette-white);
}

.tab-item:focus-visible {
    outline: 1px solid var(--doka-palette-white);
}

.tab-item:has(button:focus-visible) {
    outline: 1px solid var(--doka-palette-white);
    border-radius: 8px;
}

strong, b {
    font-weight: 500 !important;
}

.txn-search-popover {
    border-radius: 8px !important;
    overflow: hidden;
    top: 178px !important;
}

    .txn-search-popover .mud-list-item {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .txn-search-popover .mud-list :first-child {
        color: var(--doka-palette-text-primary) !important;
    }

    .txn-search-popover .mud-list-item-gutters {
        padding-left: 0px;
        padding-right: 0px;
    }

    .txn-search-popover .mud-list {
        padding: 12px;
    }

    .txn-search-popover .mud-primary-hover {
        background-color: var(--doka-palette-white) !important;
    }

.txn-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.txn-search-popover .mud-list .mud-list-item:last-child .txn-item-row {
    border-bottom: none;
}

.txn-noresult-row {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
}

.txn-noresult-text {
    font-size: 12px;
    font-weight: 400;
}

.txn-search-popover .mud-list-item:last-child .mud-divider {
    display: none;
}

.txn-search-popover .mud-list-item-clickable {
    box-shadow: none
}

.tran-conf-field-drawer .drawer-header {
    padding: 12px;
}

.tran-conf-field-drawer .drawer-card {
    margin-left: 12px !important;
    margin-right: 12px !important;
}

.postbox-delete-icon-button.mud-icon-button {
    padding-top: 2px;
    padding-bottom: 2px;
}

.mud-nav-link:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.mud-nav-link.mud-nav-link-active {
    background: rgba(255,255,255,0.18);
    color: #fff !important;
    font-weight: 500;
}

.mud-nav-link-expand-icon {
    display: none !important;
}

.mud-nav-group .mud-nav-link {
    border-radius: 6px;
    color: rgba(255,255,255,0.7);
}

    .mud-nav-group .mud-nav-link:hover {
        background: rgba(255,255,255,0.08);
    }

    .mud-nav-group .mud-nav-link.mud-nav-link-active {
        background: rgba(255,255,255,0.15) !important;
        color: #fff !important;
    }

.mud-nav-group.menu-expanded-Step1.is-navigable {
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(169deg, rgba(238, 243, 252, 0.10) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
}

.mud-nav-group.menu-expanded-Step1.is-static {
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(169deg, rgba(238, 243, 252, 0.10) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
}

.mud-nav-group.menu-expanded-Step3.is-navigable .mud-expanded {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: linear-gradient(104deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07), 0 5px 20px rgba(31, 156, 235, 0.07) !important;
    color: #fff !important;
}