body {
}

:root {
    --ct-light_black: #606060;
    --primary-color: #0D89D4;
    --secondary-color: #0da2fc;
    --ct-logo-lg-height: 40px;
    --ct-body-font-size: 0.8rem;
    --ct-black: #000000;
    --hover-active-color: rgb(4, 125, 199);
}

html[data-menu-color=brand] {
    --ct-menu-bg: linear-gradient(0deg, #0D89D4 0%, #ffffff 90%);
    --ct-menu-item-color: #000;
    --ct-menu-item-hover-color: #007ec9;
    --ct-menu-item-active-color: var(--primary-color);
}

.link-primary-color, .primary-color {
    color: var(--primary-color) !important;
}

.bg-primary {
    background: var(--primary-color) !important;
}

.text-primary {
    color: rgba(var(--ct-primary-rgb), var(--ct-text-opacity)) !important;
}

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

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

.light-black, .form-floating > label {
    color: var(--ct-light_black) !important;
}

:root,
[data-bs-theme=light] {
    --ct-primary-rgb: 114, 124, 245;
    --ct-body-color: #000 --ct-secondary-color: var(--secondary-color);
}

.form-control::-webkit-input-placeholder {
    color: var(--ct-light_black);
}

.form-control::-moz-placeholder {
    color: var(--ct-light_black);
}

.form-control:-ms-input-placeholder {
    color: var(--ct-light_black);
}

.form-control::-ms-input-placeholder {
    color: var(--ct-light_black);
}

.form-control::placeholder {
    color: var(--ct-light_black);
}

.form-control:focus, .form-check-input:focus, .form-select:focus {
    border: 2px solid #bee2e6;
}

.btn {
    --ct-btn-border-radius: 0.45rem;
}

.btn-primary {
    --ct-btn-bg: var(--primary-color);
    --ct-btn-hover-bg: var(--hover-active-color);
    --ct-btn-active-bg: var(--hover-active-color);
    --ct-btn-active-border-color: var(--hover-active-color);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.nav-pills .nav-link.active {
    background: var(--primary-color) !important;
}

.col-form-label {
    font-size: var(--ct-body-font-size);
}

.form-select {
    font-size: var(--ct-body-font-size);
}

.nav-pills > li > a {
    color: var(--ct-black);
}

.nav {
    --ct-nav-link-hover-color: var(--primary-color);
    border: solid 1px rgb(222, 226, 230);
}

.nav-padding {
    --ct-nav-link-padding-y: 0.0rem;
}

.font-28 {
    font-size: 28px !important;
}

.p-margin {
    margin-bottom: 0px;
}

.text-color {
    color: #ffffff !important;
}

.accordion-button:not(.collapsed) {
    color: #ffffff !important;
    background-color: var(--primary-color);
}

.accordion {
    --ct-accordion-btn-padding-y: 0.5rem;
}

.tooltip {
    --ct-tooltip-bg: var(--ct-light_black);
    --ct-tooltip-color: var(--ct-white);
}

.page-title-box .page-title {
    line-height: 50px;
}

.card {
    --ct-card-spacer-y: 0rem;
}

.dropdown-menu {
    color: var(--ct-black);
    --ct-dropdown-font-size: 0.8rem;
}

.text-bg-primary {
    background-color: var(--primary-color) !important;
}

.pagination {
    --ct-pagination-hover-color: var(--ct-white);
    --ct-pagination-hover-bg: var(--hover-active-color);
    /* --ct-pagination-hover-border-color: var(--hover-active-color);*/
    --ct-pagination-focus-color: var(--ct-white);
    --ct-pagination-focus-bg: var(--ct-secondary-bg);
}

.dataTables_paginate .pagination .paginate_button.active {
    --ct-pagination-hover-color: var(--hover-active-color);
    --ct-pagination-hover-bg: var(--hover-active-color);
    --ct-pagination-hover-border-color: var(--hover-active-color);
    --ct-pagination-focus-color: var(--hover-active-color);
    --ct-pagination-active-bg: var(--primary-color);
    --ct-pagination-active-border-color: var(--hover-active-color);
}

.show-spinner {
    position: fixed !important;
    top: 40%;
    left: 50%;
    font-size: 60px;
    color: orangered !important;
    display: flex;
}

.hide-spinner {
    position: relative !important;
    display: none !important;
}

.iti {
    width: 100%;
}

.drop-area {
    border: 2px dashed #ccc;
    border-radius: 10px;
    /* padding: 20px;*/
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border-color 0.3s;
}

    .drop-area.dragover {
        border-color: var(--primary-color);
        background-color: #f0f8ff;
    }

.profile-pic {
    max-width: 250px;
    max-height: 400px;
    height: auto;
}

    .profile-pic:hover {
        border: 1px solid var(--primary-color);
    }
.profile-icon {
    max-width: 199px;
    max-height: 70px;
    height: auto;
}

.otp-box {
    width: 50px;
    height: 50px;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    font-size: 20px;
}

.side-nav .side-nav-link:hover, .side-nav .menuitem-active > a {
    color: var(--primary-color);
}

html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper .leftside-menu .side-nav .side-nav-item:hover .side-nav-link {
    background: var(--primary-color);
}

.logo-topbar {
    line-height: normal;
}

small.logosbtitle {
    display: none;
    text-align:right;
    color:black;
}
.mobile-sm {
    padding-right: 61px;
    display: none;
    color: black;
    text-align: right;
}
.logosubtitle-signup {
    text-align: center;
    padding-left: 100px;
    display: none;
    color: black;
}
.logo-full{
    height:70px!important;
}
.logo-leftSidebar {
    line-height: normal;
    margin-top: 13px;
}
.navbar-custom .topbar-menu .nav-link:hover, .navbar-custom .topbar-menu li .nav-link.show {
    color: var(--primary-color);
}
.asset-icon, .asset-icon-small {
    font-size: 32px;
    transition: all .3s ease;
}
.asset-icon-small {
    font-size: 20px;
}


.asset-icon:hover, .asset-icon-small:hover {
    transform: scale(1.15);

}
.currency-item {
    padding: 8px 10px;
    border-radius: 8px;
}
.currency-item:hover {
     background: #f8f9fa;
     cursor: pointer;
}

.currency-item input[type="checkbox"] {
width: 18px;
height: 18px;
}
#currencyList {
    height: 320px;
    overflow-y: auto;
    
}
.modal-content {
    border-radius: 20px;
}

.modal-header {
    border-bottom: none;
}

.modal-body {
    padding: 25px;
}
.pair-icons {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 32px;
    margin-right: 8px;
    vertical-align: middle;
}

.first-icon {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 30px;
    z-index: 1;
}

.second-icon {
    position: absolute;
    top: 12px; /* Move down */
    left: 18px; /* Move right */
    font-size: 22px; /* Slightly smaller */
    z-index: 3;
    border-radius: 50%;
}
.fiat-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    font-weight: 700;
}
.icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}


/* PROFIT */
.profit-card {
    background: #f0fff4;
    /*border-left: 6px solid #16a34a !important;*/
}

    .profit-card h2,
    .profit-card .mdi {
        color: #16a34a;
    }

    .profit-card .badge {
        background: #16a34a;
    }


/* LOSS */
.loss-card {
    background: #fff5f5;
    /*border-left: 6px solid #dc2626 !important;*/
}

    .loss-card h2,
    .loss-card .mdi {
        color: #dc2626;
    }

    .loss-card .badge {
        background: #dc2626;
    }


/* NEUTRAL */
.neutral-card {
    background: #f8fafc;
    /*border-left: 6px solid #64748b !important;*/
}

    .neutral-card h2,
    .neutral-card .mdi {
        color: #64748b;
    }

    .neutral-card .badge {
        background: #64748b;
    }
.price-flash-up {
    animation: priceFlashUp 2.5s ease-out;
}

.price-flash-down {
    animation: priceFlashDown 2.5s ease-out;
}

@keyframes priceFlashUp {
    0% {
        background-color: #16a34a;
        color: #ffffff;
        box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.45);
    }

    60% {
        background-color: #bbf7d0;
        color: #14532d;
    }

    100% {
        background-color: transparent;
        color: inherit;
        box-shadow: none;
    }
}

@keyframes priceFlashDown {
    0% {
        background-color: #dc2626;
        color: #ffffff;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.45);
    }

    60% {
        background-color: #fecaca;
        color: #7f1d1d;
    }

    100% {
        background-color: transparent;
        color: inherit;
        box-shadow: none;
    }
}

.chart-container {
    position: relative;
    width: 100%;
    height: 360px;
}

#singleChartContainer {
    position: relative;
    width: 100%;
    height: 360px;
}

/* Mobile */
@media (max-width: 767.98px) {

    .chart-container,
    #singleChartContainer {
        height: 430px;
    }
}
/* Main desktop layout */
.portfolio-chart-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

/* Chart area */
.portfolio-chart-container {
    width: 45%;
    min-width: 400px;
    height: 400px;
    position: relative;
}

/* Custom legend */
.portfolio-pie-legend {
    width: 55%;
    max-height: 400px;
    overflow-y: auto;
    display: grid;
    /* 15 items vertically per column */
    grid-auto-flow: column;
    grid-template-rows: repeat(15, auto);
    grid-auto-columns: minmax(180px, 1fr);
    column-gap: 15px;
    row-gap: 7px;
    align-content: start;
}

/* Each legend item */
.portfolio-legend-item {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}

/* Color box */
.portfolio-legend-color {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin-right: 7px;
}

/* Legend text */
.portfolio-legend-text {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile */
@media (max-width: 767px) {

    .portfolio-chart-wrapper {
        flex-direction: column;
        gap: 14px;
    }

    .portfolio-chart-container {
        width: 100%;
        min-width: 0;
        height: 350px;
    }

    .portfolio-pie-legend {
        width: 100%;
        /* Legend goes below chart */
        max-height: none;
        /* 15 items vertically, then next column */
        grid-auto-flow: column;
        grid-template-rows: repeat(15, auto);
        grid-auto-columns: minmax(200px, 1fr);
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 8px;
        column-gap: 22px;
    }

    .portfolio-legend-item {
        font-size: 11px;
    }

    .portfolio-legend-color {
        width: 14px;
        height: 14px;
        min-width: 14px;
    }
    .user-search-hidden {
        display: none !important;
    }
}