#blazor-error-ui {
    display: none;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

html {
    font-size: 0.8em !important; /*supplement inability to uze zoom */
}

body {
    /* zoom: 0.8;*/ /*Note this causes a known issues with Blazor virtualize */
    /*-moz-transform: scale(3=0.8);*/
    -moz-transform-origin: 0 0;
    height: 100%;
}

.modal-backdrop {
    width: 140vw !important; /*adjust based on zoom out for body*/
    height: 140vh !important; /*adjust based on zoom out for body*/
}

.nav-item {
    padding: 0px !important;
}

.navbar {
    --bs-navbar-padding-y: 7px !important;
}

.nav-item a.active {
    background-color: #181b1e !important;
    color: #a376fb !important;
}

.nav-link {
    color: #FFFFFF !important;
}

.navbar-toggler-icon {
    background-color: #4d4d4d !important;
}

.tp-brand-link {
    display: inline-flex;
    align-items: center;
}

.tp-brand-text {
    color: #FFFFFF !important;
    font-family: "Roboto", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-rendering: geometricPrecision;
}

.tp-brand-text-lg {
    font-size: 1.25em !important;
}

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

.violet-text {
    color: #712cf9 !important;
}

.grecaptcha-badge {
    visibility: hidden;
}
/*fun button styles*/

.bubbly-button {
    font-family: "Helvetica", "Arial", sans-serif;
    display: inline-block;
    -webkit-appearance: none;
    appearance: none;
    background-color: #6610f2 !important;
    color: #fff;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
    box-shadow: 0 2px 25px rgba(102, 16,242, 0.5);
}

    .bubbly-button:focus {
        outline: 0;
    }

    .bubbly-button:before, .bubbly-button:after {
        position: absolute;
        content: "";
        display: block;
        width: 140%;
        height: 100%;
        left: -20%;
        z-index: -1000;
        transition: all ease-in-out 0.5s;
        background-repeat: no-repeat;
    }

    .bubbly-button:before {
        display: none;
        top: -75%;
        background-image: radial-gradient(circle, #6610f2 20%, transparent 20%), radial-gradient(circle, transparent 20%, #6610f2 20%, transparent 30%), radial-gradient(circle, #6610f2 20%, transparent 20%), radial-gradient(circle, #6610f2 20%, transparent 20%), radial-gradient(circle, transparent 10%, #6610f2 15%, transparent 20%), radial-gradient(circle, #6610f2 20%, transparent 20%), radial-gradient(circle, #6610f2 20%, transparent 20%), radial-gradient(circle, #6610f2 20%, transparent 20%), radial-gradient(circle, #6610f2 20%, transparent 20%);
        background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
    }

    .bubbly-button:after {
        display: none;
        bottom: -75%;
        background-image: radial-gradient(circle, #6610f2 20%, transparent 20%), radial-gradient(circle, #6610f2 20%, transparent 20%), radial-gradient(circle, transparent 10%, #6610f2 15%, transparent 20%), radial-gradient(circle, #6610f2 20%, transparent 20%), radial-gradient(circle, #6610f2 20%, transparent 20%), radial-gradient(circle, #6610f2 20%, transparent 20%), radial-gradient(circle, #6610f2 20%, transparent 20%);
        background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
    }

    .bubbly-button:active {
        transform: scale(0.9);
        background-color: #e60074;
        box-shadow: 0 2px 25px rgba(102, 16,242, 0.2);
    }

    .bubbly-button.animate:before {
        display: block;
        animation: topBubbles ease-in-out 0.75s forwards;
    }

    .bubbly-button.animate:after {
        display: block;
        animation: bottomBubbles ease-in-out 0.75s forwards;
    }

@keyframes topBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }

    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }

    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

@keyframes bottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }

    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }

    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

/*Simple select styles */

.filter-container {
    top: 0;
    z-index: 1;
    background-color: var(--tp-surface, white);
    height: 60px !important;
}

.filter-container > div {
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.dropdown-item {
    user-select: none;
    height: 40px !important;
    max-height: 40px !important;
}

.dropdown-toggle::after {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    margin-top: -2px;
}

.btn.dropdown-toggle {
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--bs-btn-bg);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: var(--bs-btn-bg);
    --bs-btn-active-border-color: var(--bs-btn-border-color);
}

    .btn.dropdown-toggle.show {
        color: var(--bs-btn-color);
        background-color: var(--bs-btn-bg);
        border-color: var(--bs-btn-border-color);
    }

.long-run-table{
    font-size: 0.95em;
}
table.long-run-table td {
    line-height: 30px !important
}

.bottom-sticky-buttons-height {
    height: 32px;
}

::deep .sortable-ghost {
    visibility: hidden;
}

::deep .sortable-fallback {
    opacity: 1 !important
}

.has-text-white {
    color: #FFFFFF !important;
}
.has-cursor-grab {
    cursor: grab;
}

.has-border-light {
    border: 1px solid #fff;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.recommendationOrderListItem {
    padding: .5rem !important;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
}
.card-body {
    min-height: 140px;
    min-width: 220px;
    margin-right: 5px;
    white-space: normal;
}

.card-mybasket {
    min-height: 100px;
    max-height: 600px;
    max-width: 239px;
    margin-right: 5px;
    padding:0px!important;
}
.list-group-item-mybasket {
    margin: 4px !important;
}
.scroll-container-my-bucket {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    background-color: #f0f0f0;
}
.chart-container {
    position: relative;
   /* margin: auto;*/
    height: 85%;
    width: 100%;
}
.center-tradeophecy {
    margin: 0 auto;
    text-align:center;
}
.gray-card-bg-tradeophecy {
    background-color: #fdfdfd;
}

.special-form-range {
    accent-color: white;
    cursor: grab;
    background: linear-gradient(to right, #3905a1, #a376fb);
    -webkit-appearance: none;
    width: 100%;
    height: 1.5rem;
    padding: 0;
    border-radius: 10px !important;
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 80vh;
    min-height: 600px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    margin: 20px;
}

.messages {
    flex: 1;
    overflow-y: scroll;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /*height:250px;*/
    height:100%;
}

.message {
    padding: 10px;
    border-radius: 8px;
    max-width: 80%;
}

.user-message {
    align-self: flex-end;
    background-color: #e6f7ff;
}

.ai-message {
    align-self: flex-start;
    background-color: #f6f6f6;
}

.input-container {
    display: flex;
    margin-top: 10px;
    padding: 10px;
}

    .input-container input {
        flex: 1;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #ccc;
        margin-right: 10px;
    }

    .input-container button {
        padding: 10px 20px;
        border-radius: 4px;
        border: none;
        color: white;
        cursor: pointer;
    }

        .input-container button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

.loading-indicator {
    display: inline-block;
    animation: ellipsis 1.5s infinite;
}

@keyframes ellipsis {
    0% {
        content: ".";
    }

    33% {
        content: "..";
    }

    66% {
        content: "...";
    }
}

/* Public pages: reduce bright textbox borders and harmonize spacing */
.has-border-light {
    border-color: transparent !important;
}

.tp-public-content .form-control,
.tp-public-content .form-select,
.tp-public-content textarea {
    border-color: transparent !important;
}

.tp-public-content .form-control:focus,
.tp-public-content .form-select:focus,
.tp-public-content textarea:focus {
    border-color: var(--tp-primary, #712cf9) !important;
    box-shadow: 0 0 0 0.2rem var(--tp-primary-focus-ring, rgba(113, 44, 249, 0.2)) !important;
}

.tp-public-content .card-body {
    padding: 1rem;
}