.card .card-content {
    background-color: #252120;
    background-color: var(--background-color);
    border: 1px solid hsla(25, 8%, 51%, .12);
    border: 1px solid var(--border-color-dark);
    border-radius: 8px !important;
    padding: var(--page-padding);
}
.transparent-card {
    background-color: transparent !important; /* Use !important to override Materialize default styles */
    color: white; /* Maintains white text color */
}

/* Icon Containers */
.icon-container {
    --color: var(--text-color, #000); /* Fallback color */
}

    .icon-container svg {
        display: block;
        height: 100%;
        width: 100%;
    }

    .icon-container.icon-color-fill > svg g,
    .icon-container.icon-color-fill > svg path {
        fill: var(--color);
    }

    .icon-container.icon-color-stroke > svg g,
    .icon-container.icon-color-stroke > svg path {
        stroke: var(--color);
    }

    .icon-container.secondary {
        --color: var(--text-color-inverse, #fff); /* Fallback color */
    }

/* Spinners */
.spinner {
    --spinner-color: var(--text-color-secondary, #aaa); /* Fallback color */
    animation: spin 1s linear infinite;
    border: 3px solid transparent;
    border-radius: 50%;
    border-top-color: var(--spinner-color);
    display: inline-block; /* Changed to inline-block for better alignment */
    height: 24px;
    width: 24px;
}

    .spinner.xs {
        border-width: 2px;
        height: 14px;
        width: 14px;
    }

    .spinner.small {
        border-width: 2px;
        height: 16px;
        width: 16px;
    }

    .spinner.big {
        border-width: 4px;
        height: 36px;
        width: 36px;
    }

    .spinner.secondary {
        --spinner-color: var(--black, #000); /* Fallback color */
    }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Tooltips */
.tooltip {
    background-color: var(--background-color-secondary, #333); /* Fallback color */
    border: 1px solid var(--border-color-dark, #444); /* Fallback color */
    border-radius: 6px;
    color: var(--text-color, #fff); /* Fallback color */
    font-size: 12px;
    left: 0;
    line-height: 15px;
    max-width: 320px;
    opacity: 0;
    padding: 8px 12px;
    position: fixed;
    text-align: left;
    top: 0;
    transition: opacity .15s ease-in-out;
    white-space: normal;
    z-index: 10000; /* Adjusted for compatibility */
}

/* Responsive Tooltips */
@media only screen and (max-width: 720px) {
    .tooltip {
        max-width: calc(100% - 16px);
    }
}

/* Hover styles for non-touch devices */
@media (hover: hover) {
    .tooltip:hover {
        opacity: 1; /* Show tooltip on hover */
    }
}

.overlay-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

    .overlay-container.dim {
        background-color: rgba(0, 0, 0, 0.5); /* Materialize's modal overlay color */
        pointer-events: auto;
    }

    .overlay-container .overlay-pane {
        position: relative; /* Changed from absolute for centering */
        max-width: calc(100% - 32px);
        max-height: 90%;
        width: auto; /* Adjusted for Materialize compatibility */
        opacity: 0;
        overflow: auto;
        pointer-events: auto;
        transition: opacity 0.3s ease-in-out; /* Smooth transition for visibility */
    }

        .overlay-container .overlay-pane.visible {
            opacity: 1;
        }



/* Base table styles to integrate with Materialize */
.table {
    width: 100%;
    background-color: var(--background-color, #fff);
    border-radius: 6px;
    margin-bottom: 20px; /* Ensures consistent spacing */
}

.table-row {
    background-color: transparent; /* Default state */
}

    .table-row.header {
        background-color: var(--background-color-secondary, #f2f2f2);
        color: var(--text-color-secondary, #9e9e9e);
        font-size: 12px;
        font-weight: 500; /* Medium emphasis for headers */
    }

.table-column {
    padding: var(--column-vertical-padding, 4px) var(--column-horizontal-padding, 10px);
    text-align: left;
    user-select: none; /* Prevent text selection */
}

.table-row:not(.header):hover {
    background-color: #292524; /* Highlight row on hover */
}

/* Sticky columns adaptation */
.table-column.sticky {
    position: sticky;
    left: 0;
    background-color: var(--background-color, #fff);
    z-index: 1;
}

    .table-column.sticky.haveIndex {
        left: var(--index-column-width, 50px);
    }

@media only screen and (max-width: 1024px) {
    .table {
        --index-column-width: 40px;
        --column-horizontal-padding: 6px;
    }
}

@media only screen and (max-width: 720px) {
    .table {
        --index-column-width: 30px;
        --column-horizontal-padding: 4px;
    }
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    background-color: rgba(var(--badge-color, 255, 255, 255), .15);
    border: 1px solid rgba(var(--badge-color, 255, 255, 255), .22);
    border-radius: var(--border-radius, 30px);
    color: rgba(var(--badge-color, 255, 255, 255));
    padding: var(--padding, 4px 7px);
    font-size: var(--font-size, 14px);
}

/* Alerts */
.alert-container {
    padding: 16px;
    border-radius: 8px;
    position: relative;
    color: var(--cream, #fff);
    background-color: var(--alert-bg-color, #f44336); /* Example alert background */
}

    .alert-container .alert-icon-container {
        position: absolute;
        top: 0;
        left: 0;
        padding: 6px;
        display: flex;
        align-items: center;
        height: 100%;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }



/* Custom alert styles adapted for Materialize */
.alert-container {
    padding: 24px;
    border-radius: 4px;
    color: #fff; /* Default text color */
    margin-bottom: 1rem; /* Spacing between alerts */
}

    .alert-container.info {
        background-color: rgba(var(--blue-rgb), .3);
    }

        .alert-container.info .alert-icon-container {
            background-color: var(--blue);
        }

    .alert-container.success {
        background-color: var(--dark-green);
    }

        .alert-container.success .alert-icon-container {
            background-color: var(--green);
        }

    .alert-container.warning {
        background-color: rgba(var(--orange-rgb), .5);
    }

        .alert-container.warning .alert-icon-container {
            background-color: var(--orange);
        }

    .alert-container.error {
        background-color: rgba(var(--red-rgb), .3);
    }

        .alert-container.error .alert-icon-container {
            background-color: var(--red);
        }
/* Custom dialog styles adapted for Materialize modals */
.dialog {
    border: none;
    box-shadow: none;
    padding: 24px;
}

    .dialog .dialog-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px; /* Spacing between header and content */
    }

        .dialog .dialog-header .dialog-title {
            flex-grow: 1;
            color: var(--text-color);
        }

        .dialog .dialog-header .close-button {
            cursor: pointer;
        }

    .dialog .dialog-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px; /* Spacing above action buttons */
    }

        .dialog .dialog-actions > :not(:last-child) {
            margin-right: 8px;
        }
/* Customizations for Materialize select and other components */
.select-trigger .trigger-arrow svg {
    transition: transform .15s ease-in-out;
}

.select-trigger.open .trigger-arrow svg {
    transform: rotate(180deg); /* Flip arrow when open */
}

/* Assuming Materialize's select is styled appropriately, focus on enhancing it with JavaScript if needed */



/* Transaction Fees styled with Materialize's card layout */
.transaction-fees-container .transaction-fee {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-top: 12px;
    border: 1px solid #eee; /* Use Materialize's border utility or customize */
    border-radius: 4px; /* Optional for rounded corners */
}

    .transaction-fees-container .transaction-fee .transaction-fee-value {
        font-weight: 600;
    }


/* Bond Amount Slider with default HTML input range */
.asset-bond-dialog .bond-amount-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: #f2f2f2;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .asset-bond-dialog .bond-amount-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #007bff;
        cursor: pointer;
    }

    .asset-bond-dialog .bond-amount-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #007bff;
        cursor: pointer;
    }

/* Using Materialize's switch for toggle-switch-container adaptation */
.toggle-switch-container .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .toggle-switch-container .switch .lever {
        position: absolute;
        cursor: pointer;
        width: 100%;
        height: 14px;
        background-color: #f1f1f1;
        border-radius: 15px;
        transition: background 0.3s ease-in-out;
    }

    .toggle-switch-container .switch input:checked + .lever {
        background-color: #84c7c1;
    }

    .toggle-switch-container .switch .lever:before {
        content: "";
        position: absolute;
        left: 4px;
        top: -3px;
        width: 26px;
        height: 26px;
        background-color: #fff;
        border-radius: 50%;
        transition: left 0.3s ease-in-out, background 0.3s ease-in-out;
    }

    .toggle-switch-container .switch input:checked + .lever:before {
        left: 30px;
    }

/* Responsive grid layout for asset list header */
.asset-list-header {
    display: flex;
    align-items: center;
    margin: 3rem 0 1rem;
}

/* Tokens swap section using grid */
.tokens-swap-section {
    margin-bottom: 2rem;
}

    .tokens-swap-section .swap-button {
        margin-top: 1rem;
    }
}

.jse-theme-dark {
    --jse-theme: dark;
    --jse-theme-color: #2f6dd0;
    --jse-theme-color-highlight: #467cd2;
    --jse-background-color: #1e1e1e;
    --jse-text-color: #d4d4d4;
    --jse-text-color-inverse: #4d4d4d;
    --jse-main-border: 1px solid #4f4f4f;
    --jse-menu-color: #fff;
    --jse-modal-background: #2f2f2f;
    --jse-modal-overlay-background: rgba(0,0,0,.5);
    --jse-modal-code-background: #2f2f2f;
    --jse-tooltip-color: var(--jse-text-color);
    --jse-tooltip-background: #4b4b4b;
    --jse-tooltip-border: 1px solid #737373;
    --jse-tooltip-action-button-color: inherit;
    --jse-tooltip-action-button-background: #737373;
    --jse-panel-background: #333;
    --jse-panel-background-border: 1px solid #464646;
    --jse-panel-color: var(--jse-text-color);
    --jse-panel-color-readonly: #737373;
    --jse-panel-border: 1px solid #3c3c3c;
    --jse-panel-button-color-highlight: #e5e5e5;
    --jse-panel-button-background-highlight: #464646;
    --jse-navigation-bar-background: #656565;
    --jse-navigation-bar-background-highlight: #7e7e7e;
    --jse-navigation-bar-dropdown-color: var(--jse-text-color);
    --jse-context-menu-background: #4b4b4b;
    --jse-context-menu-background-highlight: #595959;
    --jse-context-menu-separator-color: #595959;
    --jse-context-menu-color: var(--jse-text-color);
    --jse-context-menu-pointer-background: #737373;
    --jse-context-menu-pointer-background-highlight: #818181;
    --jse-context-menu-pointer-color: var(--jse-context-menu-color);
    --jse-key-color: #9cdcfe;
    --jse-value-color: var(--jse-text-color);
    --jse-value-color-number: #b5cea8;
    --jse-value-color-boolean: #569cd6;
    --jse-value-color-null: #569cd6;
    --jse-value-color-string: #ce9178;
    --jse-value-color-url: #ce9178;
    --jse-delimiter-color: #949494;
    --jse-edit-outline: 2px solid var(--jse-text-color);
    --jse-selection-background-color: #464646;
    --jse-selection-background-inactive-color: #333;
    --jse-hover-background-color: #343434;
    --jse-active-line-background-color: hsla(0,0%,100%,.06);
    --jse-search-match-background-color: #343434;
    --jse-collapsed-items-background-color: #333;
    --jse-collapsed-items-selected-background-color: #565656;
    --jse-collapsed-items-link-color: #b2b2b2;
    --jse-collapsed-items-link-color-highlight: #ec8477;
    --jse-search-match-color: #724c27;
    --jse-search-match-outline: 1px solid #966535;
    --jse-search-match-active-color: #9f6c39;
    --jse-search-match-active-outline: 1px solid #bb7f43;
    --jse-tag-background: #444;
    --jse-tag-color: #bdbdbd;
    --jse-table-header-background: #333;
    --jse-table-header-background-highlight: #424242;
    --jse-table-row-odd-background: hsla(0,0%,100%,.1);
    --jse-input-background: #3d3d3d;
    --jse-input-border: var(--jse-main-border);
    --jse-button-background: grey;
    --jse-button-background-highlight: #7a7a7a;
    --jse-button-color: #e0e0e0;
    --jse-button-secondary-background: #494949;
    --jse-button-secondary-background-highlight: #5d5d5d;
    --jse-button-secondary-background-disabled: #9d9d9d;
    --jse-button-secondary-color: var(--jse-text-color);
    --jse-a-color: #55abff;
    --jse-a-color-highlight: #4387c9;
    --jse-svelte-select-background: #3d3d3d;
    --jse-svelte-select-border: 1px solid #4f4f4f;
    --list-background: #3d3d3d;
    --item-hover-bg: #505050;
    --multi-item-bg: #5b5b5b;
    --input-color: #d4d4d4;
    --multi-clear-bg: #8a8a8a;
    --multi-item-clear-icon-color: #d4d4d4;
    --multi-item-outline: 1px solid #696969;
    --list-shadow: 0 2px 8px 0 rgba(0,0,0,.4);
    --jse-color-picker-background: #656565;
    --jse-color-picker-border-box-shadow: #8c8c8c 0 0 0 1px
}

:root {
    --top-bar-height: 72px;
    --page-padding: 24px;
    --page-small-padding: 16px;
    --page-large-padding: 44px;
    --cream-rgb: 241,225,212;
    --cream-dark-rgb: 192,180,168;
    --cream-very-dark-rgb: 140,129,121;
    --black-rgb: 37,33,32;
    --black-dark-rgb: 26,23,23;
    --black-light-rgb: 49,44,44;
    --red-rgb: 240,89,89;
    --blue-rgb: 47,103,195;
    --green-rgb: 89,240,190;
    --dark-green-rgb: 37,164,24;
    --orange-rgb: 227,161,49;
    --cream: rgb(var(--cream-rgb));
    --cream-dark: rgb(var(--cream-dark-rgb));
    --cream-very-dark: rgb(var(--cream-very-dark-rgb));
    --black: rgb(var(--black-rgb));
    --black-dark: rgb(var(--black-dark-rgb));
    --black-light: rgb(var(--black-light-rgb));
    --blue: rgb(var(--blue-rgb));
    --green: rgb(var(--green-rgb));
    --dark-green: rgb(var(--dark-green-rgb));
    --orange: rgb(var(--orange-rgb));
    --red: rgb(var(--red-rgb));
    --text-color: var(--cream);
    --text-color-secondary: var(--cream-very-dark);
    --text-color-disabled: rgba(var(--cream-very-dark-rgb),0.4);
    --background-color: var(--black);
    --background-color-secondary: var(--black-light);
    --border-color: rgba(var(--cream-very-dark-rgb),0.22);
    --border-color-light: rgba(var(--cream-very-dark-rgb),0.32);
    --border-color-dark: rgba(var(--cream-very-dark-rgb),0.12);
    --text-color-inverse: var(--black);
    --background-color-inverse: var(--cream)
}

@media only screen and (max-width:1024px) {
    :root {
        --page-small-padding: 12px;
        --page-large-padding: 32px
    }
}

@media only screen and (max-width:720px) {
    :root {
        --page-large-padding: 24px;
        --page-small-padding: 8px;
        --page-padding: 16px
    }
}

@font-face {
    font-family: Inter;
    src: local("Inter"),url(/static/media/Inter-Black.143c28420846d45c5834.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-weight: 100;
    src: local("Inter"),url(/static/media/Inter-Thin.f341ca512063c66296d1.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-weight: 200;
    src: local("Inter"),url(/static/media/Inter-ExtraLight.1815b9a8a67debdb3966.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-weight: 300;
    src: local("Inter"),url(/static/media/Inter-Light.eec8664621fec98efb37.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-weight: 400;
    src: local("Inter"),url(/static/media/Inter-Regular.e89cb19905e7db5591b0.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-weight: 500;
    src: local("Inter"),url(/static/media/Inter-Medium.6dcbc9bed1ec438907ee.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-weight: 600;
    src: local("Inter"),url(/static/media/Inter-SemiBold.4d56bb21f2399db8ad48.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-weight: 700;
    src: local("Inter"),url(/static/media/Inter-Bold.88fa7ae373b07b41ecce.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-weight: 800;
    src: local("Inter"),url(/static/media/Inter-ExtraBold.e4a4cb7133001f282a15.ttf) format("truetype")
}


#root, body, html {
    height: 100%;
    margin: 0;
    width: 100%
}

    html:before {
        background-image: linear-gradient(180deg,#252120,#000);
        background-image: linear-gradient(to bottom,var(--background-color),#000)
    }

    body:before, html:before {
        content: "";
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: -1
    }

    body:before {
        background-image: linear-gradient(90deg,rgba(70,60,58,.08) 2.5px,transparent 0),linear-gradient(180deg,rgba(70,60,58,.08) 2.5px,transparent 0);
        background-size: 60px 45px