/* ==========================================================
   11 SECTORS INTRO
   BALANCED WORDING WIDTH
   ========================================================== */

.cf-balanced-sector-copy {
    max-width:960px !important;
    width:calc(100% - 40px) !important;

    margin-left:auto !important;
    margin-right:auto !important;

    text-align:center !important;

    text-wrap:balance !important;

    line-height:1.55 !important;
}


/* ==========================================================
   THREE DEFINITIONS — DIRECTLY ABOVE CAPITAL FLOW
   ========================================================== */

#cf-sector-definitions-master {
    width:100% !important;

    display:grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    margin:
        0 0 14px 0 !important;

    border:
        1px solid rgba(0,229,255,.16) !important;

    background:
        #030a0e !important;

    box-sizing:
        border-box !important;
}


.cf-master-definition {
    padding:
        15px 18px !important;

    border-right:
        1px solid rgba(0,229,255,.14) !important;

    box-sizing:
        border-box !important;
}


.cf-master-definition:last-child {
    border-right:
        none !important;
}


.cf-master-definition-title {
    display:block !important;

    margin-bottom:
        8px !important;

    color:
        #99ff00 !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .06em !important;
}


.cf-master-definition-copy {
    margin:0 !important;

    color:
        #bbc8ce !important;

    font-size:
        10px !important;

    line-height:
        1.52 !important;

    font-weight:
        400 !important;
}


.cf-master-definition-copy strong,
.cf-master-definition-copy b {
    color:inherit !important;
    font-weight:400 !important;
}


/* ==========================================================
   CAPITAL FLOW TWO-COLUMN FRAME
   ========================================================== */

#capital-flow-sector {
    align-items:
        stretch !important;
}


#capital-flow-sector .sector-identity,
#capital-flow-sector .sector-identity.product-copy,
#capital-flow-sector .capital-sector-right {
    align-self:
        stretch !important;
}


#capital-flow-sector .cf-left-inner-master {
    height:
        100% !important;

    display:
        flex !important;

    flex-direction:
        column !important;
}


/* ==========================================================
   LEFT SIDE:
   STOCKS / CURRENT GROUPS / PERFORMANCE
   CENTERED IN THEIR SPACES
   ========================================================== */

#capital-flow-sector .product-detail {
    display:grid !important;

    grid-template-columns:
        128px minmax(0,1fr) !important;

    align-items:
        center !important;

    flex:
        1 1 0 !important;

    min-height:
        62px !important;

    margin:
        0 !important;

    padding:
        9px 0 !important;

    box-sizing:
        border-box !important;

    border-bottom:
        1px solid rgba(0,229,255,.13) !important;
}


#capital-flow-sector .product-detail:last-of-type {
    border-bottom:
        none !important;
}


#capital-flow-sector .product-detail .detail-label {
    display:flex !important;

    align-items:center !important;

    height:
        100% !important;

    margin:
        0 !important;

    color:
        #ffffff !important;
}


#capital-flow-sector .product-detail > span:last-child {
    align-self:
        center !important;
}


#capital-flow-sector .cf-master-performance > span:last-child {
    transform:
        translateY(-3px) !important;
}


/* ==========================================================
   ORIGINAL TOP LIVE FEED
   KEEP IT LARGE
   ========================================================== */

#capital-flow-sector #capital-live-feed,
#capital-flow-sector .embedded-live-feed.real-feed {
    display:block !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    width:
        100% !important;
}


#capital-flow-sector .real-feed-toolbar {
    display:flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    flex-wrap:
        wrap !important;
}


#capital-flow-sector .feed-mode-tabs {
    display:flex !important;

    gap:
        6px !important;

    align-items:
        center !important;
}


#capital-flow-sector .real-feed-stage {
    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        315px !important;

    min-height:
        315px !important;

    overflow:
        hidden !important;
}


#capital-flow-sector #cf-market-canvas {
    display:
        block !important;

    width:
        100% !important;

    height:
        315px !important;

    min-height:
        315px !important;
}


/* ==========================================================
   WHOLE SECTOR
   ========================================================== */

#cf-whole-sector-master {
    height:
        27px !important;

    padding:
        0 10px !important;

    border:
        1px solid #24434e !important;

    background:
        #061016 !important;

    color:
        #99ff00 !important;

    font-size:
        8px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .05em !important;

    cursor:
        pointer !important;
}


#cf-whole-sector-master.active {
    border-color:
        #99ff00 !important;

    background:
        #0a1608 !important;

    box-shadow:
        inset 0 0 0 1px rgba(153,255,0,.15) !important;
}


#cf-whole-overlay-master {
    position:
        absolute !important;

    inset:
        0 !important;

    z-index:
        80 !important;

    display:
        none;

    background:
        #02070a !important;

    pointer-events:
        none !important;
}


#cf-whole-overlay-master.show {
    display:
        block !important;
}


#cf-whole-canvas-master {
    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;
}


/* ==========================================================
   BOTTOM BUSINESS FEED
   ========================================================== */

.cf-master-business-section {
    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        #030a0e !important;

    overflow:
        hidden !important;
}


.cf-master-business-head {
    display:flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    min-height:
        30px !important;

    gap:
        10px !important;

    padding:
        5px 9px !important;

    box-sizing:
        border-box !important;

    border-bottom:
        1px solid rgba(0,229,255,.14) !important;
}


.cf-master-business-title {
    color:
        #ffffff !important;

    font-size:
        8px !important;

    font-weight:
        800 !important;
}


.cf-master-business-note {
    color:
        #70838d !important;

    font-size:
        6px !important;
}


/* 4 ACROSS x 5 ROWS */

.cf-master-business-grid {
    display:grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    grid-template-rows:
        repeat(5,minmax(78px,1fr)) !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        0 !important;
}


.cf-master-card {
    min-width:
        0 !important;

    min-height:
        78px !important;

    padding:
        6px 6px !important;

    box-sizing:
        border-box !important;

    border-right:
        1px solid rgba(0,229,255,.13) !important;

    border-bottom:
        1px solid rgba(0,229,255,.13) !important;

    overflow:
        hidden !important;

    cursor:
        pointer !important;
}


.cf-master-card:nth-child(4n) {
    border-right:
        none !important;
}


.cf-master-card:nth-child(n+17) {
    border-bottom:
        none !important;
}


.cf-master-card.selected {
    background:
        rgba(153,255,0,.035) !important;

    box-shadow:
        inset 2px 0 0 #99ff00 !important;
}


.cf-master-card-name {
    display:flex !important;

    align-items:center !important;

    gap:
        4px !important;

    min-width:
        0 !important;
}


.cf-master-number {
    color:
        #00e5ff !important;

    font-size:
        7px !important;

    font-weight:
        800 !important;
}


.cf-master-company {
    min-width:
        0 !important;

    color:
        #ffffff !important;

    font-size:
        7.5px !important;

    font-weight:
        800 !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}


.cf-master-sector {
    margin-top:
        3px !important;

    color:
        #6b7f88 !important;

    font-size:
        5px !important;
}


/* ==========================================================
   MARKET CAP | LAST | 1D | 1WP
   ========================================================== */

.cf-master-stats {
    display:grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    width:
        100% !important;

    margin-top:
        6px !important;

    border-top:
        1px solid rgba(0,229,255,.09) !important;
}


.cf-master-stat {
    min-width:
        0 !important;

    padding:
        4px 2px 0 2px !important;

    box-sizing:
        border-box !important;

    border-right:
        1px solid rgba(0,229,255,.09) !important;
}


.cf-master-stat:last-child {
    border-right:
        none !important;
}


.cf-master-stat-label {
    display:block !important;

    color:
        #566b75 !important;

    font-size:
        4.6px !important;

    font-weight:
        700 !important;

    white-space:
        nowrap !important;
}


.cf-master-stat-value {
    display:block !important;

    margin-top:
        2px !important;

    color:
        #ffffff !important;

    font-size:
        6px !important;

    font-weight:
        800 !important;

    font-variant-numeric:
        tabular-nums !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        clip !important;
}


.cf-master-up {
    color:
        #99ff00 !important;
}


.cf-master-down {
    color:
        #ff4057 !important;
}


.cf-master-flat {
    color:
        #aab8be !important;
}


.cf-master-business-foot {
    min-height:
        21px !important;

    display:flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        10px !important;

    padding:
        4px 8px !important;

    box-sizing:
        border-box !important;

    color:
        #617781 !important;

    font-size:
        5px !important;

    border-top:
        1px solid rgba(0,229,255,.12) !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:900px) {

    #cf-sector-definitions-master {
        grid-template-columns:
            1fr !important;
    }


    .cf-master-definition {
        border-right:
            none !important;

        border-bottom:
            1px solid rgba(0,229,255,.14) !important;
    }


    .cf-master-definition:last-child {
        border-bottom:
            none !important;
    }


    #capital-flow-sector .real-feed-stage,
    #capital-flow-sector #cf-market-canvas {
        height:
            275px !important;

        min-height:
            275px !important;
    }


    .cf-master-business-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        grid-template-rows:
            repeat(10,minmax(78px,1fr)) !important;
    }


    .cf-master-card:nth-child(4n) {
        border-right:
            1px solid rgba(0,229,255,.13) !important;
    }


    .cf-master-card:nth-child(2n) {
        border-right:
            none !important;
    }
}

/* CAPITAL_METICULOUS_V3_START */


/* ==========================================================
   CAPITAL SECTOR ONLY
   ========================================================== */

#capital-flow-sector {
    gap:0 !important;
    column-gap:0 !important;
    align-items:stretch !important;
}


/* ==========================================================
   LEFT PANEL INNER CONTENT
   move slightly RIGHT
   ========================================================== */

#capital-flow-sector .cf-left-inner-master {

    width:100% !important;

    padding-left:
        12px !important;

    padding-right:
        3px !important;

    box-sizing:
        border-box !important;
}


/* ==========================================================
   CAPITAL RIGHT PANEL
   REMOVE INTERNAL LEFT/RIGHT SPACE
   ========================================================== */

#capital-flow-sector .capital-sector-right {

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    box-sizing:
        border-box !important;

    align-self:
        stretch !important;

    justify-self:
        stretch !important;
}


/* ==========================================================
   TOP CAPITAL LIVE FEED
   MEET CENTER WALL + RIGHT WALL
   ========================================================== */

#capital-flow-sector #capital-live-feed,
#capital-flow-sector .embedded-live-feed.real-feed {

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding-left:
        0 !important;

    padding-right:
        0 !important;

    box-sizing:
        border-box !important;
}


#capital-flow-sector .real-feed-toolbar,
#capital-flow-sector .real-feed-stage {

    width:
        100% !important;

    max-width:
        none !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;

    box-sizing:
        border-box !important;
}


#capital-flow-sector .real-feed-stage {

    position:
        relative !important;
}


/* ==========================================================
   COMPANY NAME INSIDE TOP GRAPH
   ========================================================== */

#capital-flow-sector .cf-company-inside-chart {

    position:
        absolute !important;

    top:
        13px !important;

    left:
        14px !important;

    z-index:
        100 !important;

    color:
        #f5f7f8 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        17px !important;

    line-height:
        1 !important;

    font-weight:
        800 !important;

    letter-spacing:
        -.015em !important;

    white-space:
        nowrap !important;

    pointer-events:
        none !important;

    user-select:
        none !important;

    text-shadow:
        0 1px 0 rgba(0,0,0,.95),
        0 0 6px rgba(0,229,255,.10)
        !important;
}


/* ==========================================================
   BOTTOM CAPITAL FEED
   TAKE IT ALL THE WAY TO BOTH WALLS
   ========================================================== */

#capital-flow-sector .cf-master-business-section {

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    box-sizing:
        border-box !important;
}


#capital-flow-sector .cf-master-business-head,
#capital-flow-sector .cf-master-business-grid,
#capital-flow-sector .cf-master-business-foot {

    width:
        100% !important;

    max-width:
        none !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;

    box-sizing:
        border-box !important;
}


/* ==========================================================
   PERMANENT CYAN LIGHT BOX
   AROUND EVERY BUSINESS CARD
   ========================================================== */

#capital-flow-sector .cf-master-business-grid {

    gap:
        0 !important;

    padding:
        0 !important;
}


#capital-flow-sector .cf-master-card,

#capital-flow-sector
.cf-master-card:nth-child(4n),

#capital-flow-sector
.cf-master-card:nth-child(n+17) {

    border:
        1px solid rgba(0,229,255,.68) !important;

    box-sizing:
        border-box !important;

    background:
        rgba(2,9,13,.96) !important;

    box-shadow:

        inset 0 0 0 1px
        rgba(0,229,255,.035),

        0 0 4px
        rgba(0,229,255,.11)

        !important;
}


#capital-flow-sector .cf-master-card:hover {

    border-color:
        rgba(0,229,255,.95) !important;

    box-shadow:

        inset 0 0 0 1px
        rgba(0,229,255,.07),

        0 0 6px
        rgba(0,229,255,.18)

        !important;
}


#capital-flow-sector .cf-master-card.selected {

    border:
        1px solid rgba(0,229,255,.95) !important;

    background:
        rgba(153,255,0,.022) !important;

    box-shadow:

        inset 2px 0 0 #99ff00,

        inset 0 0 0 1px
        rgba(0,229,255,.07),

        0 0 6px
        rgba(0,229,255,.16)

        !important;
}


/* Never remove borders from outside/right/bottom cards */

#capital-flow-sector
.cf-master-card:nth-child(4n) {

    border-right:
        1px solid rgba(0,229,255,.68) !important;
}


#capital-flow-sector
.cf-master-card:nth-child(n+17) {

    border-bottom:
        1px solid rgba(0,229,255,.68) !important;
}


/* CAPITAL_METICULOUS_V3_END */

/* CAPITAL_FINAL_ALIGNMENT_BEGIN */

/* ==========================================================
   CAPITAL SECTOR ONLY
   ========================================================== */

#capital-flow-sector {
    gap: 0 !important;
    column-gap: 0 !important;
    align-items: stretch !important;
}

/* ==========================================================
   MOVE LEFT INNER CONTENT ~1 CENTIMETER RIGHT
   1cm ≈ 37.8px
   ========================================================== */

#capital-flow-sector .cf-left-inner-master {
    box-sizing: border-box !important;
    padding-left: 38px !important;
    padding-right: 4px !important;
}

/* ==========================================================
   CAPITAL RIGHT PANEL
   ========================================================== */

#capital-flow-sector .capital-sector-right {
    align-self: stretch !important;
    justify-self: start !important;

    min-width: 0 !important;
    max-width: none !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;
    overflow: visible !important;
}

/* ==========================================================
   TOP CAPITAL LIVE FEED
   ========================================================== */

#capital-flow-sector #capital-live-feed,
#capital-flow-sector .embedded-live-feed.real-feed,
#capital-flow-sector .capital-sector-right > .real-feed {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}

/* GRAPH ITSELF */

#capital-flow-sector .real-feed-stage {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}

#capital-flow-sector .real-feed-stage canvas,
#capital-flow-sector #cf-market-canvas {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Hide old CAPITAL external LIVE STOCK GRAPH heading */

#capital-flow-sector .cf-capital-hide-old-title {
    display: none !important;
}

/* ==========================================================
   COMPANY NAME INSIDE GRAPH
   LIKE AMERICAN TECH
   ========================================================== */

#capital-flow-sector .cf-capital-inside-title {
    position: absolute !important;

    z-index: 250 !important;

    top: 12px !important;
    left: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    color: #f4f8fa !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    letter-spacing: 0 !important;

    white-space: nowrap !important;

    pointer-events: none !important;
    user-select: none !important;

    text-shadow:
        0 1px 0 rgba(0,0,0,.95),
        0 0 5px rgba(0,229,255,.10) !important;
}

/* ==========================================================
   BOTTOM CAPITAL BUSINESS FEED TO RIGHT WALL
   ========================================================== */

#capital-flow-sector .cf-master-business-section {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}

#capital-flow-sector .cf-master-business-head,
#capital-flow-sector .cf-master-business-grid,
#capital-flow-sector .cf-master-business-foot {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}

/* ==========================================================
   PERMANENT BOX LINES AROUND EVERY CAPITAL BUSINESS
   ========================================================== */

#capital-flow-sector .cf-master-business-grid {
    display: grid !important;

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    background: #02080c !important;

    border:
        1px solid rgba(0,229,255,.30) !important;
}

#capital-flow-sector .cf-master-card,
#capital-flow-sector .cf-master-card:nth-child(4n),
#capital-flow-sector .cf-master-card:nth-child(n+17) {
    border: 0 !important;

    box-sizing: border-box !important;

    background:
        rgba(2,9,13,.96) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(0,229,255,.30) !important;
}

/* permanent line remains on hover */

#capital-flow-sector .cf-master-card:hover {
    box-shadow:
        inset 0 0 0 1px
        rgba(0,229,255,.55),

        inset 0 0 8px
        rgba(0,229,255,.03) !important;
}

/* selected card remains fully boxed */

#capital-flow-sector .cf-master-card.selected {
    background:
        rgba(153,255,0,.025) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(0,229,255,.95),

        inset 2px 0 0
        #99ff00 !important;
}

@media(max-width:900px) {

    #capital-flow-sector .cf-left-inner-master {
        padding-left: 20px !important;
        padding-right: 3px !important;
    }

}

/* CAPITAL_FINAL_ALIGNMENT_END */
