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
*/
.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;
    }



/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.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);
}

/* Rounded sliders */
.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;
}

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/

#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;
}


.div-alternate {
    background: var(--background-table-alternate-color)
}

.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';
    }

/**Css Added by for new Design**/
/*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;
    /* identical to box height, or 185% */
    color: var(--menu-color);
}

.a-color {
    color: #7E7B85 !important;
}
/*overview*/
.padding-right {
    padding-left: 5px !important;
    padding-right: 25px;
}
/** Rectangle 1620 **/
.container-style {
    padding: 20px;
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    /* identical to box height, or 133% */
    /* White */
    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);
    /*    border-radius: 3px 3px 0px 0px;*/
    color: #ffffff;
    padding: 10px;
    border: none;
}

.modal-heading-system {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    /* identical to box height, or 133% */
    /* White */
    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;
    /* identical to box height, or 108% */
    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;
    /* identical to box height, or 108% */
    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: that class has four users and one of them
   (_TradingSystemsSummary) 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-bottom {
    border-bottom: 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;
}

.overview-heading-trade {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: var(--overview-header-cart-color);
    padding: 22px;
}

.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;
}

/*Create emp*/
.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;
}
/* The slider */
.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);
}

/* Rounded sliders */
.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;
    /* identical to box height, or 108% */

    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;
    /* identical to box height, or 108% */
    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;
}

/**Log*/
.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;
}

/**Regration testing*/
.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;
}

/*setting notification*/
.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;
}

/*For trading system*/
.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: 486px;*/
    height: 642px;
    border: 1px solid #424248;
    border-radius: 3px;
}

a {
    color: none;
}

/**Order history*/
.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%;
    /* left: 25px; */
    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;
}
/*Trade system*/
.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).
   Bootstrap twelfths cannot express this, so it is a grid. The ratio is MEASURED, not guessed:
   intrinsic widths at a 1900px viewport are 657px for the trading systems table (with real
   system names), 590px for the trader detail table, and 518px for the row of three summary
   boxes. A first pass pinned the right column at a fixed 760px, which starved it -- the three
   boxes had ~250px each and wrapped mid-value -- while the left sat at 1090px mostly empty.
   1fr / 1.15fr gives ~860px and ~990px, clearing every intrinsic with room to breathe and
   staying proportional instead of pinned to one viewport width. */
.overview-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    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 the left 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 left
   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;
}

/* Five delta tiles across one row (issue #263 layout pass). */
.overview-delta-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

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

/* The assets table carries five 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;
}

/* Right column at 760px gives each of the three summary boxes ~250px, which wraps
   "BTC MTD Δ: x% / YTD Δ: y%" mid-value. Stack the two metrics per currency instead of
   running them inline, so the wrap point is chosen rather than accidental. */
.currency-performance-line {
    display: block;
    float: none !important;
    white-space: nowrap;
}

/* The three summary boxes split the row 3-even by default (col-sm-4 each). BTC/ETH MTD/YTD
   is always a couple of short percentages and never needs the room; Account Equity/Deployed
   and Net Exposure/Net Leverage carry live-read numbers (gross/long/short dollars, a leverage
   ratio, a UTC stamp) that are longer and grow with the account, so they get the width the
   currency box gives up. */
.overview-summary-col-narrow {
    width: 28%;
}

.overview-summary-col-wide {
    width: 36%;
}

/* Both boxes using .overview-summary-col-wide show a second, longer line (the long/short
   split, the lever-vs-100-base figure and its UTC stamp) that the BTC/ETH box never needs.
   Tightening the space between the two labelled rows here keeps the box close to the BTC/ETH
   box's height instead of growing by a full extra line. */
.overview-summary-col-wide label {
    margin-top: 0.15em;
    margin-bottom: 0.15em;
}

.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;
}