body {
    padding-bottom: 20px;
    font-family: 'Fira Sans';
    font-style: normal;
    background: var(--background-color) !important;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 65px;
}

.body-content-details {
    padding-left: 15px;
    padding-right: 15px;
}

.color-mode-toggler {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    color: var(--text-color);
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}


/* Side menu starts from here */
.wrapper {
    vertical-align: middle;
}

.btn-menu {
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 10;
    background-color: transparent;
    font-size: 24px;
    color: var(--text-color);
    padding: 5px 10px;
    border-radius: 4px;
    border: 2px solid var(--text-color);
    background-color: var(--background-color);
    cursor: pointer;
}



input:focus, textarea:focus, select:focus {
    outline: none;
}

/* Login and Two-Factor Authentication* starts from here */
.login-center-container {
    text-align: center;
    font-family: Roboto;
}

    .login-center-container .bxb-logo-white img {
        height: 246px;
        width: 178px;
    }

    .login-center-container .login-form-frame {
        width: 90%;
        max-width: 320px;
        text-align: left;
        margin: 20px auto;
    }

        .login-center-container .login-form-frame .form-group .form-control {
            height: 50px;
            max-width: inherit;
            border-radius: 5px;
            border: 1px solid var(--border-color);
            color: rgba(256,256,256,0.5);
            font-size: 16px;
            line-height: 20px;
            background-color: var(--background-login-color);
        }

            .login-center-container .login-form-frame .form-group .form-control:focus {
                border: 1px solid var(--border-color);
                color: rgba(256,256,256,0.5);
                font-size: 16px;
                line-height: 20px;
                background-color: var(--background-login-color);
            }

        .login-center-container .login-form-frame label {
            color: var(--text-login-color);
            font-size: 16px;
            line-height: 20px;
        }

    .login-center-container .login-form-frame-footer p {
        height: 50px;
        width: 925px;
        color: var(--text-login-color);
        font-family: Gabriola;
        font-weight: normal;
        text-align: right;
        font-size: 50px;
        line-height: 50px;
    }

    .login-center-container .login-form-frame-footer span {
        height: 50px;
        width: 925px;
        color: var(--text-login-color);
        font-family: Gabriola;
        font-weight: normal;
        text-align: right;
        font-size: 30px;
        line-height: 30px;
        display: inline-block;
    }

.align-right {
    text-align: right;
}

.login-center-container .login-form-frame .btn-login-right {
    box-sizing: border-box;
    height: 27px;
    width: 99.5px;
    border-radius: 5px;
    background-color: var(--background-login-color);
    border: 1px solid var(--border-color);
    color: rgba(256,256,256,0.5);
    font-size: 16px;
    padding: 0;
}


.login-center-container span {
    font-weight: 300;
    color: var(--text-login-color);
}

.quote {
    height: 103px;
    width: 625px;
    margin-top: 50px;
}

.login-center-container .error-text span {
    color: #dc3545;
}

/* Login and Two-Factor Authentication* ends here */

.content-container {
}

    .content-container .content-frame {
    }

        .content-container .content-frame label {
            font-weight: 300;
            color: var(--text-content-container-color);
            display: block;
        }

        .content-container .content-frame textarea {
            box-sizing: border-box;
            min-height: 102px;
            width: 1190px;
            border: 1px solid var(--background-table-color);
            background: inherit;
            color: var(--text-content-container-color);
            font-weight: 300;
            height: 50px;
            max-width: inherit;
        }

.overview-label {
    height: 20px;
    width: 289px;
    color: var(--text-item-color);
    font-family: Arial;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
}

.btn-default#menu-toggle, .btn-default#menu-toggle:hover, .btn-default#menu-toggle:focus {
    border: none;
    outline: none;
    box-shadow: none;
    background: none;
    color: #DB1849;
}

.left-absolute-frame {
    position: absolute;
    width: 10%;
}

    .left-absolute-frame .top-frame img,
    .left-absolute-frame .top-frame .btn-menu {
        display: inline-block;
        margin: 0 10px;
    }

    .left-absolute-frame .top-frame .btn-menu {
        position: relative;
        top: 10px;
        left: inherit;
        border: 0 none;
    }

.btn-menu i {
    color: var(--btn-menu-item-color);
    font-size: 36px;
}

.left {
    width: 200px;
    margin-left: -200px;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    background-color: rgba(0,0,0,.35);
    z-index: 5;
    transition: left 0.75s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    border: 1px solid var(--background-button-color);
}

.right-content-frame {
    width: calc(100% - 10%);
    margin-left: 10%;
}

.section-title {
    font-size: 25px;
    font-weight: 600;
    color: var(--text-item-color);
    text-align: center;
    padding-top: 22px;
}

.max570 {
    max-width: 570px;
}

.btn-dark-grey {
    color: var(--text-item-color);
    padding: 8px 20px;
}

.table {
    margin-top: 20px;
    margin-bottom: 20px;
}

    .table th, .table td {
    }

/* The rebalance-result table is built as an HTML string in TradingSystems/Index.cshtml,
   so its body cells never got a themed colour and fell through to Bootstrap's near-black
   default - unreadable on the dark theme, which is the default here. The header row was
   fine only because it separately carries .th-section. --modal-color, not one of the
   table variables: every other piece of text in this dialog already uses it, and the
   rows are the part being read. */
.table-rebalance-result td {
    color: var(--modal-color);
}

/* Rebalance outcomes. Not Bootstrap's text-success / text-danger / text-warning:
   those are hardcoded for a light background and #dc3545 is 3.22:1 on the dark
   modal - "Failed" was the least legible cell in the table. !important because the
   .table-rebalance-result td rule above outranks a bare class, and because it is how
   .color-red / .color-green next door already do it. Unscoped on purpose: the app has
   four hardcoded reds and no themed status colour, and these are meant to be the ones
   the rest of it converges on - but note they live in site.css, which
   _LayoutTradingSystem does not load, so a view on that layout needs them moved
   somewhere shared first. */
.outcome-ordered {
    color: var(--outcome-ordered-color) !important;
}

.outcome-failed {
    color: var(--outcome-failed-color) !important;
}

.outcome-inflight {
    color: var(--outcome-inflight-color) !important;
}

    .table a,
    .table .rnd-btn-link {
        border-radius: 10px 10px;
        -webkit-border-radius: 10px 10px;
        -moz-border-radius: 10px 10px;
        background: var(--background-table-color);
        color: var(--text-content-container-color);
        font-size: 14px;
        padding: 3px 10px;
    }



.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: var(--slider-color);
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: var(--slider-background-color);
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.dot-green {
    height: 25px;
    width: 25px;
    background-color: #2AC940;
    border-radius: 50%;
    display: inline-block;
}

.dot-yellow {
    height: 25px;
    width: 25px;
    background-color: yellow;
    border-radius: 50%;
    display: inline-block;
}

.dot-blue {
    height: 25px;
    width: 25px;
    background-color: #3399FF;
    border-radius: 50%;
    display: inline-block;
}

.h2-color {
    margin-top: 10px;
    color: var(--text-item-color);
}

.h3-color {
    color: var(--text-item-color);
}

.h4-color {
    color: var(--text-item-color);
}

.green-up-arrow {
    font-size: 20px;
    color: #2AC940;
}

.red-down-arrow {
    font-size: 20px;
    color: #FF3366;
}

.modal-price-alert {
    width: 700px;
    margin: 0 auto;
}

#tblChart td {
    padding: 5px;
    text-align: center;
    min-width: 25px;
    border: none !important;
}

.fixed {
    position: relative !important;
}

.search-table-outter {
    overflow-y: scroll;
    overflow-x: no-display;
}

.LastTD {
    background-color: var(--text-color);
}

.btnHistory {
    border-radius: 8px;
    margin: 8px 0px 8px 0px;
    border-style: none;
    background-color: var(--background-button-color);
    font-size: 12px;
    opacity: 100;
    margin-left: 30px;
    font-weight: bold
}

#btnNo, #btnEdit, #btnCreateTradingSystem {
    margin-right: 1rem;
}

.extra-small {
    font-size: 75%
}

/*START css for performance page*/
.btnRturn {
    border-radius: 8px;
    margin: 8px 0px 8px 0px;
    border-style: none;
    background-color: var(--background-button-color);
    font-size: 12px;
    opacity: 100;
    margin-left: 30px;
    font-weight: bold
}

.positiveColor {
    color: #007003;
}

.negativeColor {
    color: #AE022D;
}

.table th, .table td {
    padding: 0.4rem;
}


.pagination {
    display: inline-block;
}

    .pagination a {
        color: var(--log-color);
        float: left;
        padding: 8px 16px;
        text-decoration: none;
    }

        .pagination a.active {
            background-color: var(--text-header-color);
            color: var(--log-color);
        }

        .pagination a:hover:not(.active) {
            background-color: var(--text-header-color);
        }

.grey-text {
    color: var(--text-header-color);
}

.log-color {
    color: var(--log-color);
    word-break: break-word;
}

.header {
    border-top: none;
    border-bottom: 2px var(--background-table-color) solid;
    padding: 0.4rem;
    color: var(--text-header-color);
    padding: 0.75rem;
    vertical-align: top;
    font-weight: bold;
}

.note-container {
    display: block;
    word-wrap: break-word;
    width: 100px;
}

.loadingColumn {
    text-align: center;
    font-style: italic;
}

.loadingImage {
    height: 27px;
}
/*END css for performance page */

.borderThin {
    border-bottom: 1px solid #606060
}

.borderThick {
    border-bottom: 2px solid #dee2e6
}

.hoverColor:hover {
    background-color: #606060;
    color: #D8D5DF;
    border: 1px solid #D8D5DF;
}

.icon-square:hover {
    border: 1px solid #D8D5DF
}


.parentDiv {
    overflow-wrap: break-word;
    text-align: left;
}

.alignMiddle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-dialog > .modal-lg, .modal-xl {
    max-width: 85%;
    display: flex;
}

.panel-title a {
    color: #212529 !important;
    text-decoration: none;
}

.collapsible-link {
    width: 94%;
    position: relative;
    text-align: left;
}

    .collapsible-link::before {
        content: '\f107';
        position: absolute;
        top: 50%;
        right: 0.8rem;
        transform: translateY(-50%);
        display: block;
        font-family: 'FontAwesome';
        font-size: 1.1rem;
    }

    .collapsible-link[aria-expanded='true']::before {
        content: '\f106';
    }

/*Menu section*/
.menu-list {
    margin-top: 10px;
}

    .menu-list ul {
        padding: 10px 18px;
    }

    .menu-list li {
        list-style: none;
    }

        .menu-list li a {
            line-height: 50px !important;
            cursor: pointer;
            font-family: 'Fira Sans';
            font-style: normal;
            font-weight: 800;
            font-size: 13px;
            line-height: 24px;
            color: var(--menu-color) !important;
        }

            .menu-list li a:hover,
            .menu-list li a:focus {
                text-decoration: none;
            }

        .menu-list li img {
            width: 100px;
            height: 100px;
            display: block;
        }

.border-menu {
    border-bottom: 1px solid #404040;
}

.switch-dark-mode {
    float: right;
    margin-right: 20px;
    vertical-align: sub;
    color: var(--log-color);
}
/* Side menu ends here */
.menu-section {
    background: var(--menu-background);
    position: absolute;
    width: 200px;
    height: 1130px;
    left: 0px;
    top: 70px;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 800;
    font-size: 13px;
    line-height: 24px;
    color: var(--menu-color);
}

.a-color {
    color: #7E7B85 !important;
}
/*overview*/
.padding-right {
    padding-left: 5px !important;
    padding-right: 25px;
}
.container-style {
    padding: 20px;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
    padding-top: 12px;
}

.header-section {
    width: 100%;
    height: 70px;
    background: var(--header-section-background);
    border: 1px solid var(--header-section-border);
}

.header-logo {
    position: absolute;
    width: 35.58px;
    height: 49px;
    top: 12px;
    left: 7px;
    top: 6px;
}

.header-logo-box {
    box-sizing: border-box;
    width: 66px;
    height: 69px;
    top: 0px;
    left: 0px;
    background: var(--header-logo-box-background);
    border: 1px solid var(--header-section-border);
}

.header-menu {
    width: 66px;
    height: 67px;
    background: var(--header-menu-background);
    color: var(--header-menu-color);
    border: none;
}

.screen-section-title {
    height: 24px;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    display: flex;
    align-items: center;
    color: var(--header-section-color);
}

.page-title {
    background: var(--page-tittle-background);
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    height: 44px;
}

.page-title-heading {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: #FFFFFF;
}

.padding-header {
    padding: 8px 0px 0px 0px;
}

.padding-header-history {
    padding: 4px 0px 0px 0px;
}

a:hover {
    text-decoration: none !important;
}

.header_button {
    background: var(--header-button-background);
    border: 1px solid var(--header-button-border) !important;
    border-radius: 4px !important;
    border-radius: 4px;
    font-size: 13px;
    line-height: 0px;
    align-items: center;
    text-align: center;
    color: var(--header-button-color) !important;
    padding: 14px 10px 12px 10px;
    border: none;
}

.margin-top-5 {
    margin-top: 4px;
}

.initial-button {
    background: #00B36E;
}

.table-body {
    width: 100%;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 15px;
    border: 1px solid var(--overview-table-border) !important;
}

.th-section {
    background: var(--overview-th-background);
    line-height: 15px;
    color: var(--overview-th-color);
}

.th-color {
    background: var(--th-color-background);
    color: var(--th-color-color);
}

.tr-section {
    background: var(--overview-tr-background);
    border: 1px solid var(--overview-table-border) !important;
    color: var(--overview-tr-color);
}

.tr-section-overview {
    background: var(--overview-tr-background);
    border: 1px solid var(--overview-table-border) !important;
    color: var(--overview-tr-color);
}

    .tr-section-overview:nth-child(even) {
        background: var(--overview-tr-even-background);
    }

    .tr-section-overview:nth-child(odd) {
        background: var(--overview-tr-background);
    }

.tr-sub-section {
    background: var(--tr-sub-section-background);
    border: 1px solid var(--tr-sub-section-border);
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--tr-sub-section-color);
}

th, td {
    padding: 5px;
}

.refresh-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 166px;
    background: #1A1B1D;
}

.margin-right {
    margin-right: 10px;
}

.modal-header {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    background: var(--modal-header-background);
    border-radius: 3px 3px 0px 0px;
    color: var(--modal-header-color);
    padding: 10px;
    border: none;
}

.modal-footer-system {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    background: #424248;
    border-radius: 3px 3px 0px 0px;
    color: #ffffff;
    padding: 5px;
    border: none;
}

.modal-btn-footer {
    box-sizing: border-box;
    height: 40px;
    background: #424248;
    border-radius: 3px 3px 0px 0px;
    color: #ffffff;
    padding: 5px;
    border: none;
}

.create-btn {
    background: #00B36E;
    border-radius: 4px;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 14px;
    text-align: center;
    color: #FFFFFF;
    width: 7%;
    padding: 8px;
    border: none;
    text-align: center;
}

.no-btn {
    background: #D64646;
    border-radius: 4px;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 14px;
    text-align: center;
    color: #FFFFFF;
    width: 7%;
    padding: 8px;
    border: none;
    text-align: center;
}

.edit-module-style {
    width: 100%;
    height: 40px;
    background: var(--edit-module-style-background);
    border-radius: 3px 3px 0px 0px;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #FFFFFF;
    padding: 5px 0px 0px 14px;
}

.modal-header-system {
    box-sizing: border-box;
    height: 40px;
    background: var(--notification-modal-header-background);
    color: #ffffff;
    padding: 10px;
    border: none;
}

.modal-heading-system {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    color: #FFFFFF;
}

.form-control {
    background: var(--modal-formcontrol-background);
    border: 1px solid var(--modal-formcontrol-border);
    border-radius: 4px;
    color: var(--modal-formcontrol-color);
    font-family: 'Fira Sans';
    font-style: normal;
    font-size: 14px;
}

.form-control-style {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: var(--formcontrol-color);
    padding: 8px;
}

.form-control:disabled, .form-control[readonly] {
    background: var(--form-control-disable-background) !important;
    border: 1px solid var(--form-control-disable-border);
    border-radius: 4px;
    color: var(--form-control-disable-color) !important;
    opacity: 1;
}

.modal-body {
    background: var(--modal-background);
    font-family: 'Fira Sans';
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    align-items: center;
    color: var(--modal-color);
}

.fetch-btn {
    background: var(--edit-module-style-background);
    border-radius: 4px;
    display: inline-table;
    color: #FFFFFF;
    border: none;
    margin-left: 15px;
    padding: 3px;
    width: 30%;
}

.cross-btn-color {
    color: #D8D5DF;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    cursor: pointer;
}

.padding-left-10 {
    padding-left: 8px;
}
.cursor{
    cursor:pointer;
}

.modal-footer {
    background: var(--modal-footer-background);
    height: 45px;
    border: none;
    border-radius: 0px 0px 3px 3px;
}

.modal-title-h3 {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
}

.modal-close {
    color: #D8D5DF;
    height: 14px;
    width: 14px;
    padding: 0px;
    margin: 0px;
}

.modal-create-btn {
    background: #00B36E;
    border-radius: 4px;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 14px;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    padding: 4px 10px 0px 13px;
    width: 102px;
    padding: 8px;
    border: none;
}

.modal-close-btn {
    background: #D64646;
    border-radius: 4px;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 14px;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    padding: 4px 10px 0px 13px;
    width: 70px;
    padding: 8px;
    border: none;
}

.footer-button {
    text-align: right;
    padding: 0px;
}

/*overview*/
.overview-page-title {
    height: 42px;
    margin-left: 24px;
    margin-top: 55px;
    background: #0F1C3F;
    border-radius: 3px 3px 0px 0px;
}

.header-delta-label {
    box-sizing: border-box;
    width: 100%;
    background: #000000;
}

.overview-margin-80 {
    margin-top: 80px;
}

.padding-left-25 {
    padding-left: 25px;
}

.padding-right-25 {
    padding-right: 25px;
}

.overview-heading-label {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #FFFFFF;
    background: #0F1C3F !important;
    padding-left: 14px !important;
    padding: 8px !important;
    margin-bottom: 3px;
}

/* Opt-in, NOT on .overview-heading-label itself: the Active Trading Systems heading has four
   children, where space-between would push the "charts under process" count a third of the
   header away from its own label. Only the heading
   carrying the System Board jump needs flex, so only it asks for it. */
.overview-heading-label.has-page-jump {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Jump between the two pages an operator actually lives on. Deliberately quiet: an outline,
   not a filled button, because it is navigation sitting inside a data heading and must not
   read as the primary action of the page. */
.page-jump {
    font-family: 'Fira Sans';
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .04em;
    white-space: nowrap;
    color: #CFE0FF;
    background: transparent;
    border: 1px solid #3E5A8C;
    border-radius: 4px;
    padding: 6px 11px;
    text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease;
}

.page-jump:hover,
.page-jump:focus {
    color: #FFFFFF;
    background: rgba(207, 224, 255, .12);
    border-color: #6E8FD0;
    text-decoration: none;
}

.page-jump:focus-visible {
    outline: 2px solid #6E8FD0;
    outline-offset: 2px;
}

.page-jump .fa {
    margin-right: 5px;
    opacity: .8;
}

.overview-sub-label {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    color: #FFFFFF;
    background: #0F1C3F !important;
    padding: 6px;
}


.total-chart-tittle {
    width: 343px;
    height: 29px;
    margin-left: 412px;
    margin-top: 8px;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 26px;
    color: #D8D5DF;
}

.overview-margin-delta {
    margin: 0px 6px 0px 6px;
}

.padding-bottom {
    padding-bottom: 88px;
}

.margin-top-55 {
    margin-top: 55px;
}

.overview-heading {
    background: #000;
    background: var(--overview-header-cart);
}

.overview-border-left {
    border-left: 3px solid var(--overview-header-cart-border);
}

.overview-border-bottom1 {
    border-bottom: 10px solid var(--overview-header-cart-border);
}

.table-body-overview {
    width: 100%;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    border: 1px solid #27292C !important;
}

.overview-table {
    width: 100%;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    border: 1px solid var(--overview-table-border) !important;
}

.padding-main {
    padding: 0px 18px 0px 10px;
}

.overview-padding-0 {
    padding: 0px;
}

.partiallable {
    left: 958px;
}

.table-body-partial {
    margin-left: 802px;
    margin-top: 217px;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
}

.overview-tittle {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--overview-header-cart-color);
}

.overview-mb-25 {
    margin-bottom: 26px
}

.sub-tr {
    background: #27292C;
    border: 1px solid #000000;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #A29FA8;
    height: 40px;
    left: 28px;
    top: 166px;
    border: 1px solid #000000;
    color: #7E7B85;
    font-size: 14px;
    line-height: 20px;
}

.icon-square {
    padding: 4px;
    border: 1px solid #7E7B85;
    cursor: pointer;
}

.color-green {
    color: forestgreen !important;
}

.color-red {
    color: red !important;
}
.color-yellow {
    color: yellow !important;
}
.color-green-per {
    color: forestgreen !important;
    background: #27292C;
    padding: 5px;
}

.color-red-per {
    color: red !important;
    background: #27292C;
    padding: 5px;
}
.color-yellow-per {
    color: yellow !important;
    background: #27292C;
    padding: 5px;
}

.margin-top-10 {
    top: 8px;
}

.header_button_system {
    background: #3C6FF2;
    border-radius: 4px;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 0px;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    padding: 13px;
    border: none;
    margin-top: 7px;
    color: #FFFFFF !important;
}

.gray-color {
    background: #27292C;
    border: 1px solid #424248;
    border-radius: 4px;
}

.blue-btn {
    background: #3C85F2;
    box-shadow: 10px 10px 15px rgba(131, 104, 204, 0.1);
    border-radius: 4px;
    color: #FFFFFF !important;
}

.padding-10 {
    padding: 10px;
}

.th-center {
    left: 100px;
    text-align: left;
}

.padding-20 {
    padding: 22px;
}

.align-th {
    display: flex;
    align-items: center;
}

.action-btn {
    color: var(--icon-btn-action-color);
}

.edit-icon {
    background: #7E7B85;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 1px;
    padding-bottom: 0px;
}

.fa-icon-margin {
    margin-left: 2px !important;
    margin-top: 2px;
    font-size: 12px;
}

.fa-edit-icon {
    font-size: 12px;
    color: #000;
}

.nb-none {
    background: none
}

.font-18 {
    font-size: 19px
}

.background-blue {
    background: var(--slider-background-color) !important
}

.margin-right-15 {
    margin-right: 6px;
}

.icon-btn-radius {
    border-radius: 50px;
    background: var(--icon-btn-radius-background);
    color: var(--icon-btn-radius-color);
    padding-top: 3px;
    padding-bottom: 3px;
    border: none;
}

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 20px;
    margin-right:6px;
}

.margin-left-15 {
    margin-left: 16px;
}

.margin-left-30 {
    margin-left: 30px;
}

.td-scroll {
    overflow-y: auto;
    overflow-x: auto;
    height: 22px;
    bottom: 8px;
}

.bottom-7 {
    bottom: 7px;
}
.slider-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--switch-background);
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider-switch:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 17px;
        left: 1px;
        bottom: 4px;
        background-color: var(--slider-color);
        -webkit-transition: .4s;
        transition: .4s;
        top: 2px;
    }

input:checked + .slider-switch {
    background-color: var(--slider-background-color);
}

input:focus + .slider-switch {
    box-shadow: 0 0 1px #2196F3;
}

/* Mixed state: some but not all of a bucket's systems are on. Amber, knob
   mid-track - a part-running bucket must never look identical to a stopped one. */
input:indeterminate + .slider-switch {
    background-color: var(--switch-indeterminate-background);
}

    input:indeterminate + .slider-switch:before {
        -webkit-transform: translateX(13px);
        -ms-transform: translateX(13px);
        transform: translateX(13px);
    }

input:checked + .slider-switch:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider-switch.round {
    border-radius: 34px;
}

    .slider-switch.round:before {
        border-radius: 50%;
    }

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--card-background);
    background-clip: border-box;
    border-radius: 1.25rem;
    border: 1px solid var(--card-border);
    border-radius: 4px;
}

.cancel-btn {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 14px;

    display: flex;
    align-items: center;
    text-align: center;
    background: #D64646;
    border-radius: 4px;
    color: #FFFFFF;
}

.btn-margin {
    margin: 0px 0px 0px 20px;
}

.update-btn {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 14px;
    text-align: right;
    display: flex;
    align-items: center;
    text-align: center;
    background: #00B36E;
    border-radius: 4px;
    color: #FFFFFF;
}

.notification-popup {
    background: var(--notification-popup-background);
    border: 1px solid var(--notification-popup-border);
    border-radius: 3px;
}

.active, .btn-hov:hover {
    background-color: #3C85F2 !important;
    color: white;
}

.table-body-log {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
    border: 1px solid var(--setting-box-border) !important;
}

.th-btn-margin {
    margin-top: 6px;
    margin-bottom: 6px;
}

.log-text {
    font-size: 14px;
    line-height: 20px;
    color: #7E7B85;
}

.inner-padding {
    padding: 1px 8px 0px 0px !important;
}

.header-section-testing {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
}

.result-section {
    background: var(--result-section-background);
    border: 1px solid var(--result-section-border);
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: var(--result-section-color);
    padding: 12px;
}

.box-section {
    background: var(--setting-box-background);
    left: 10px;
    padding: 26px;
    line-height: 20px;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    align-items: center;
    color: var(--setting-box-color);
}

.box-section-1 {
    background: var( --list-title1-background);
    left: 10px;
    line-height: 20px;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    align-items: center;
    color: var(--list-title1-color);
    margin-top: 10px;
}

.h2-heading {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: var(--heading-2-color);
    height: 30px;
    left: 10px;
    top: 309px;
}

.list-title {
    background: var(--list-title-background);
    width: 100%;
    margin-left: 0px;
    padding-left: 20px;
    padding-top: 12px;
}

.margin-top {
    margin-top: 0px;
}

.play-btn {
    display: inline-table;
    background: #00B36E;
    border-radius: 4px;
    position: absolute;
    padding: 8px;
    width: 16%;
}

.padding-0 {
    padding: 0px;
}

.exception-width {
    width: 421px;
}

.border {
    border: 1px solid var(--list-title1-border) !important;
}

.upload-width {
    margin: 10px;
    width: 31%;
    margin-top: 0px;
    margin-left: 20px;
}

.padding-left-15 {
    padding: 7px;
}

.margin-top-3 {
    margin-top: 3px !important;
}

.td-width {
    width: 16%;
}

.table-body-setting {
    width: 100%;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
    border: 1px solid var(--table-setting-border) !important;
    margin-top: 8px;
}

.page-title-setting {
    width: 100%;
    height: 40px;
    background: var(--page-tittle-background);
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
}

.width-100 {
    width: 100%;
}

.text-align-right {
    text-align: right;
}

.padding-header-0 {
    padding: 0px;
}

.add-btn {
    background: #3C6FF2;
    border-radius: 4px;
    color: #ffffff;
    margin-top: 10px;
    padding: :5px;
    padding: 4px;
    width: 18%;
    margin-left: 20px;
}

.accordion-div-style {
    overflow: hidden scroll;
    height: 642px;
    border: 1px solid #424248;
    border-radius: 3px;
}

a {
    color: none;
}

.page-title-history {
    height: 40px;
    background: var(--page-title-history-background);
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
}

.page-sub-title-history {
    height: 40px;
    background: var(--page-sub-title-history-background);
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    margin-top: 2px;
    margin-bottom: 10px;
}

.table-body-history {
    width: 100%;
    margin-top: 10px;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
    border: 1px solid va(--tr-section-history-border) !important;
    margin-bottom: 20px;
}

.padding-history-0 {
    padding: 0px;
}

.table-body-history > tbody > tr:nth-child(2n) > td, .table-striped > tbody > tr:nth-child(2n) > th {
    background: var(--tr-section-history-even-background);
}

.history-title {
    padding: 0px;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #A29FA8;
}

.title-width-history {
    background: #1A1A1A;
    border-radius: 3px;
    padding-left: 5px;
    border-left: 2px solid #000 !important;
}
.padding-top-20 {
    padding-top: 20px;
}

.btn-no {
    background: #D64646 !important;
}

.btn-blue {
    background: #3C6FF2 !important;
}

.trash-btn {
    padding: 4px 4px 2px 4px;
    background: #A04F59;
    color: var(--action-btn-color);
    cursor: pointer;
}

.edit-icon-system {
    padding: 4px 2px 2px 4px;
    background: var(--action-btn-background);
    color: var(--action-btn-color);
    cursor: pointer;
}
.margin-right {
    margin-right: 7px;
}

.tr-sub-view {
    text-align: right;
    border: 1px solid var(--tr-sub-view-color);
    color: var(--tr-sub-view-color) !important;
}

.backgroundNone {
    background: none !important;
}

.cursor {
    cursor: pointer;
}

.padding-history-header {
    padding-left: 10px !important;
    margin-bottom: 10px;
}

.th-section-history {
    background: var(--th-section-history-background);
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
    color: var(--th-section-history-color);
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    line-height: 16px;
}

.th-header-history {
    background: var(--th-header-history-background);
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
    color: var(--th-header-history-color);
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
}

.tr-section-history {
    background: var(--tr-section-history-background);
    border: 1px solid var(--tr-section-history-border) !important;
    color: var(--tr-section-history-color);
    font-size: 11px;
}

.return-btn a {
    color: #FFFFFF !important;
}

.border-right-history {
    border-right: 2px solid var(--border-right-history-color)
}

.return-btn {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 14px;
    align-items: center;
    text-align: center;
    background: #3C6FF2;
    border-radius: 5px;
    border: none;
    padding: 4px 12px 4px 12px;
    margin-left: 15px;
}

.js-popup {
    background: none;
    border: none;
    float: right;
}

.js-btn-padding {
    padding: 8px 15px 8px 15px;
    border: none;
}

.js-ys-btn {
    background: #00B36E;
    border-radius: 4px;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 14px;
    text-align: center;
    color: #FFFFFF;
    width: 14%;
    padding: 8px;
    border: none;
    text-align: center;
}

.pause-btn {
    padding: 5px 6px 4px 5px;
    background: var(--action-btn-background);
    color: var(--action-btn-color);
    font-size: 10px;
    border-radius: 50px;
}

.refresh-btn-back {
    padding: 4px 5px 3px 5px;
    border-radius: 50px;
    font-size: 12px;
    background: var(--action-btn-background);
    color: var(--action-btn-color);
}

.long-btn {
    padding: 3px 10px 3px 10px;
    background: var(--long-btn-background);
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
    color: var(--long-btn-color);
}

.square-btn {
    padding: 3px 6px 3px 6px;
    background: var(--square-btn-background);
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
    color: var(--square-btn-color);
}

.short-btn {
    padding: 3px 10px 3px 10px;
    background: var(--short-btn-background);
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
    color: var(--short-btn-color);
}

.button-outline {
    outline: none !important;
}

.overview-number-color {
    color: #3C85F2 !important;
}

.overview-label-padding {
    margin-top: 0.4em;
}

.position-background {
    background: var(--position-background) !important;
}

.padding-left-20 {
    padding: 3px 18px 3px 10px;
}

.margin-left-20 {
    margin-left: 20px;
}

.td-color {
    background-color: var(--td-color);
}

button:disabled, .fa-disabled {
    cursor: not-allowed;
    pointer-events: all !important;
}

.delete-button {
    background: none;
    border: none;
    cursor: pointer;
}

*:focus {
    outline: 0 !important;
}

.form-group {
    margin-bottom: 0.7rem !important;
}

.align-center {
    text-align: center;
}

.align-text-content {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 15px;
    color: #D8D5DF;
}

.modal-content {
    border: none !important;
}
.padding-top-10 {
    padding-top: 10px;
}
.padding-right-30 {
    padding-right: 30px;
}
.error-color {
    color: var(--error-color);
}
input[type="radio"]:disabled {
    -webkit-appearance: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    padding: 0px;
    background-clip: content-box;
    border: 2px solid #bbbbbb;
    background-color: white;
    border-radius: 50%;
}

input[type="radio"]:checked {
    background-color: var(--slider-background-color);
}
.three-dots-on-off:after {
    cursor: pointer;
    color: var(--three-dots-on-off);
    content: '\2807';
    font-size: 20px;
    padding: 0 5px;
}

.dropdown-on-off {
    width: 100%;
    position: absolute;
    background-color: var(--dropdown-on-off);
    outline: none;
    opacity: 0;
    z-index: -1;
    max-height: 0;
}

.dropdown-container-on-off:focus {
    outline: none;
}

.list-item-on-off {
    color: var(--three-dots-on-off);
    cursor: pointer !important;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 25px;
}

    .list-item-on-off :hover {
        background: var(--list-item-on-off) !important;
        cursor: pointer !important;
    }

.dropdown-container-on-off:focus .dropdown-on-off {
    opacity: 1;
    z-index: 100;
    max-height: 100vh;
    transition: opacity 0.2s, z-index 0.2s, max-height: 0.2s;
}

.padding-left-7 {
    padding-left: 7px;
}
.offColor {
    color: #D64646;
}
.onColor {
    color :#00B36E;
}
.float-end {
    float: right;
}
.tdAlignment {
    padding: 0px !important;
    text-align: center;
}

/* Overview two-column layout (issue #263). The left track carries the seven-column delta grid
   and assets table, the right the trader detail table; the wider share goes left. */
.overview-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

/* Below this the two tables can no longer sit side by side. MEASURED against this file at
   1451/1460/1600/1920px: the trader table's min-content width is ~655px once the 3mo column is
   in and the reclaim rule below has run, and its (right) grid track is (viewport - 40 container
   padding - 10 gap) / 2.15. 655 * 2.15 + 50 = 1458.25, so 1459 is the first width whose track
   (655.35px) could hold it -- by 0.35px, which is not worth taking, so 1459 stacks too and 1460
   is the first two-column width. The previous 1450 came from the nine-column table and left
   1451-1459px overflowing. Re-measure when a column is added: this number is derived from the
   table's min-content, not chosen. */
@media (max-width: 1459px) {
    .overview-columns {
        grid-template-columns: 1fr;
    }
}

.trader-detail-table td,
.trader-detail-table th {
    padding: 3px 7px !important;
}

/* Ten columns since the 3mo addition. At 7px of side padding the table needs 695px and the right
   track is 652px at the breakpoint, so it overflowed its own column. The width comes back out of
   the four columns that are read as labels rather than compared -- the trader name, the balance,
   and the two MDD figures -- which drops min-content to ~655px. The six period columns keep their
   padding: those are the numbers being scanned across. Addressed from BOTH ends (nth-child for
   the first two, nth-last-child for the last two) so adding a period column cannot slide the
   rule onto one. */
.trader-detail-table td:nth-child(-n+2),
.trader-detail-table th:nth-child(-n+2),
.trader-detail-table td:nth-last-child(-n+2),
.trader-detail-table th:nth-last-child(-n+2) {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/* A label column, then one column per window: a header row, our book's row, then BTC and ETH. */
.overview-delta-row {
    display: grid;
    grid-template-columns: max-content repeat(6, minmax(max-content, 1fr));
}

.overview-delta-cell {
    padding: 6px 10px;
    white-space: nowrap;
}

.overview-delta-head {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* The assets table carries seven short columns. Left to width:100% in a ~1090px column it
   spread them so far apart the rows were hard to track across; cap it at its comfortable
   reading width and let the column breathe instead of the table. */
.overview-assets-table {
    width: auto !important;
    min-width: 520px;
    max-width: 720px;
}

.trader-range-btn {
    background: none;
    border: none;
    color: var(--three-dots-on-off);
    cursor: pointer;
    font-size: 0.75em;
    padding: 0 5px;
}

.trader-range-btn:hover,
.trader-range-btn:focus-visible {
    text-decoration: underline;
    outline-offset: 2px;
}

.trader-range-btn.active {
    font-weight: 700;
    text-decoration: underline;
}