/* 台股資訊 */
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* 自訂水平卷軸樣式 */
.scrollbar-x {
    overflow-x: auto;
}

    .scrollbar-x:after {
        content: '';
        display: block;
        position: absolute;
        width: 30px;
        top: 0;
        right: 0;
        bottom: 3px;
        background: rgb(247,247,247);
        background: linear-gradient(90deg, rgba(247,247,247,0.4990371148459384) 0%, rgba(247,247,247,1) 50%);
    }

    .scrollbar-x::-webkit-scrollbar-track {
        /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;*/
    }

    .scrollbar-x::-webkit-scrollbar {
        height: 3px;
        background-color: #fff;
    }

    .scrollbar-x::-webkit-scrollbar-thumb {
        background-color: #dee2e6;
    }

/* 股市資料 */
.section-stock .table-sm {
    font-size: 14px;
}

.section-stock .stock-main .title {
    color: #777777;
    font-size: 14px;
    white-space: nowrap;
}

.section-stock .stock .name {
    font-size: 24px;
    font-weight: bold;
}

.section-stock .stock .no {
    font-size: 20px;
    font-weight: bold;
}

.section-stock .stock .badge {
    font-size: 14px;
    border-radius: 10rem;
    padding: 0.3em 0.6em;
    color: #188fff;
    background-color: rgba(24,143,255,.08);
}

    .section-stock .stock .badge:hover {
        background-color: rgba(24,143,255,.2);
    }

.section-stock .pricing-changes .last-price {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.0;
}

.section-stock .pricing-changes .change {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.0;
}

.section-stock .pricing-changes .volume {
    font-weight: bold;
    line-height: 1.0;
    margin-top: 2px;
}

.section-stock .timestamp {
    color: #777777;
    font-size: 14px;
}

/* 左選單 */
#stock-data-menu {
    width: 225px;
    top: 56px;
}

    #stock-data-menu .wrapper {
        width: 100%;
        overflow-y: auto;
    }

    #stock-data-menu .header {
        padding: 9px 15px;
        /*border-bottom: 1px solid rgba(0, 0, 0, 0.1);*/
        justify-content: space-between;
        align-items: center;
    }

        #stock-data-menu .header h6 {
            color: #3f3a39;
            width: auto;
            height: auto;
            margin-bottom: 0;
            margin-top: 0;
            line-height: 1.0;
        }

        #stock-data-menu .header .exit {
            position: relative;
            width: 15px;
            height: 15px;
        }

            #stock-data-menu .header .exit:before,
            #stock-data-menu .header .exit:after {
                position: absolute;
                left: 7px;
                top: 0;
                content: '';
                height: 15px;
                width: 2px;
                background-color: #777;
            }

            #stock-data-menu .header .exit:before {
                transform: rotate(45deg);
            }

            #stock-data-menu .header .exit:after {
                transform: rotate(-45deg);
            }

    #stock-data-menu .bg {
        background-color: rgba(0, 0, 0, 0.5);
    }

    #stock-data-menu ul {
        padding-left: 0;
        list-style: none;
    }

        #stock-data-menu ul > li > a {
            display: block;
            padding: 7px 15px;
            color: #777777;
        }

            #stock-data-menu ul > li > a:hover,
            #stock-data-menu ul > li > a.active {
                color: #212529;
                background-color: rgba(0, 0, 0, 0.02);
            }

                #stock-data-menu ul > li > a:hover:after,
                #stock-data-menu ul > li > a.active:after {
                    color: #ffffff;
                }

        #stock-data-menu ul > li > ul > li > a {
            padding-left: calc(15px + 1em);
        }

        #stock-data-menu ul > li > ul {
            display: none;
        }

        #stock-data-menu ul > li.open > ul,
        #stock-data-menu ul > li.active > ul {
            display: block;
        }

/* 重大消息 */
#breaking-news .item {
    font-size: 14px;
}

    #breaking-news .item .date {
        color: #146cda;
        font-size: 12px;
        font-weight: bold;
    }

/* 相關概念股 */
#concept .intro {
    color: #666666;
    font-size: 14px;
    margin-top: 5px;
}

/* Nav slides */
.slider-nav-container {
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}


    .slider-nav-container a[data-toggle="feature-panel"] {
        color: rgba(0, 0, 0, 0.7);
        font-size: 14px;
        text-align: center;
        white-space: nowrap;
        padding: 2px 6px;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        background-color: #ffffff;
    }

    .slider-nav-container .nav-link {
        color: rgba(0, 0, 0, 0.7);
        font-size: 14px;
        text-align: center;
        padding: 2px 6px 8px;
        border: 1px solid transparent;
        border-radius: 0.25rem 0.25rem 0 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .slider-nav-container .slider-nav {
        margin-bottom: -6px;
        padding: 0 31px;
        border-radius: 0.25rem;
    }

        .slider-nav-container .slider-nav .slick-current .nav-link {
            border-top-color: #dee2e6;
            border-right-color: #dee2e6;
            border-left-color: #dee2e6;
            background-color: #ffffff;
        }

        .slider-nav-container .slider-nav .slick-arrow {
            position: absolute;
            top: 0;
            font-size: 1rem;
            line-height: 1.0;
            cursor: pointer;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 25px;
            padding: 0 0 2px;
            height: calc(100% - 12px);
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            background-color: rgba(255, 255, 255, 1);
        }

        .slider-nav-container .slider-nav .slick-disabled {
            opacity: 0.3;
        }

        .slider-nav-container .slider-nav .slick-prev {
            left: 0px;
        }

        .slider-nav-container .slider-nav .slick-next {
            right: 0px;
        }

    .slider-nav-container .slick-prev:before,
    .slider-nav-container .slick-next:before {
        content: "";
    }

.slider-for-container {
    border: 1px solid #dee2e6;
}

    .slider-for-container .slick-slider {
        -webkit-user-select: text;
        -khtml-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }

    .slider-for-container .slick-list.draggable {
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .slider-for-container > .slider-for .slider-nav {
        padding: 0 25px;
        background-color: #f0f3f5;
    }

        .slider-for-container > .slider-for .slider-nav .nav-link {
            font-size: 14px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 6px 6px 2px;
        }

        .slider-for-container > .slider-for .slider-nav .slick-current {
            position: relative;
        }

            .slider-for-container > .slider-for .slider-nav .slick-current:after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                display: block;
                height: 3px;
                width: 100%;
                background-color: #146cda;
            }

            .slider-for-container > .slider-for .slider-nav .slick-current .nav-link {
                color: #146cda;
            }

        .slider-for-container > .slider-for .slider-nav .slick-arrow {
            position: absolute;
            top: 0;
            line-height: 1.0;
            cursor: pointer;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 25px;
            padding: 0 0 2px;
            height: 33px;
            background-color: #f0f3f5;
        }

        .slider-for-container > .slider-for .slider-nav .slick-disabled {
            opacity: 0.3;
        }

        .slider-for-container > .slider-for .slider-nav .slick-prev {
            left: 0px;
        }

        .slider-for-container > .slider-for .slider-nav .slick-next {
            right: 0px;
        }

/* 頁籤 */
.stock-data-container .nav-tabs {
    border-bottom: 1px solid #ddd;
}

    .stock-data-container .nav-tabs .nav-link {
        color: rgba(0, 0, 0, 0.7);
        font-size: 14px;
        white-space: nowrap;
        border-top: 3px solid transparent;
        border-right: 1px solid transparent;
        border-bottom: 3px solid transparent;
        border-left: 1px solid transparent;
        padding: 4px 6px;
    }

        .stock-data-container .nav-tabs .nav-link:hover,
        .stock-data-container .nav-tabs .nav-link:focus {
            border-color: transparent transparent #dee2e6;
            border-bottom-color: #dee2e6;
        }

        .stock-data-container .nav-tabs .nav-link.active,
        .stock-data-container .nav-tabs .nav-item.show .nav-link {
            color: #188fff;
            border-color: #188fff #dee2e6 transparent;
        }

.tab-content ol > li {
    margin-bottom: 0.5em;
}

/* 即時行情價 */
#chart-real-time {
    height: 400px;
    max-height: 55vh;
}

#real-time {
    font-size: 14px;
}

    #real-time .summary .item {
        padding: 4px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    }

        #real-time .summary .item .value {
            font-weight: bold;
        }

    #real-time .percent .progress {
        height: 8px;
    }

    #real-time .volumes .header {
        padding: 4px 0;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    }

    #real-time .volumes .item {
        padding: 4px 0;
    }

    #real-time .volumes .subtotal {
        padding: 4px 0;
        margin-top: 4px;
        border-top: 1px solid rgba(0, 0, 0, 0.125);
    }

    #real-time .volume, #real-time .volume .value {
        position: relative;
    }

        #real-time .volume .progress {
            position: absolute;
            top: 0;
            width: 100%;
            height: 20px;
            background-color: transparent;
        }

            #real-time .volume .progress .progress-bar {
                background-color: rgba(179, 224, 255, 0.5);
            }

    #real-time .volumes .buy .progress {
        flex-direction: row-reverse;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

        #real-time .volumes .buy .progress .progress-bar {
            border-top-left-radius: 0.25rem;
            border-bottom-left-radius: 0.25rem;
        }

    #real-time .volumes .sell .progress {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

        #real-time .volumes .sell .progress .progress-bar {
            border-top-right-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
        }

/* 技術分析 */
#d3 svg {
    font-size: 12px;
}

text.symbol {
    fill: #BBBBBB;
}

path {
    fill: none;
    stroke-width: 1;
}

    path.candle {
        stroke: #000000;
    }

        path.candle.body {
            stroke-width: 0;
        }

        path.candle.up {
            fill: #FF0000;
            stroke: #FF0000;
        }

        path.candle.down {
            fill: #00AA00;
            stroke: #00AA00;
        }

.close.annotation,
.close.annotation:not(:disabled):not(.disabled):hover,
.close.annotation:not(:disabled):not(.disabled):focus {
    fill: #ffffff;
    opacity: 1;
    font-size: 12px;
    font-weight: normal;
    text-shadow: unset;
}

    .close.annotation.up path {
        fill: #333333;
    }

path.volume {
    fill: #DDDDDD;
}

    path.volume.up {
        fill: #FF0000;
    }

    path.volume.down {
        fill: #00AA00;
    }

    path.volume.equal {
        fill: #DDDDDD;
    }

.indicator-plot path.line {
    fill: none;
    stroke-width: 1;
}

.ma-0 path.line {
    stroke: #1f77b4;
}

.ma-1 path.line {
    stroke: #aec7e8;
}

.ma-2 path.line {
    stroke: #ff7f0e;
}

path.macd {
    stroke: #0000AA;
}

path.signal {
    stroke: #FF9999;
}

path.zero {
    stroke: #BBBBBB;
    stroke-dasharray: 0;
    stroke-opacity: 0.5;
}

path.difference {
    fill: #BBBBBB;
    opacity: 0.5;
}

path.rsi {
    stroke: #000000;
}

path.overbought, path.oversold {
    stroke: #FF9999;
    stroke-dasharray: 5, 5;
}

path.middle, path.zero {
    stroke: #BBBBBB;
    stroke-dasharray: 5, 5;
}

.analysis path, .analysis circle {
    stroke: blue;
    stroke-width: 0.8;
}

.trendline circle {
    stroke-width: 0;
    display: none;
}

.mouseover .trendline path {
    stroke-width: 1.2;
}

.mouseover .trendline circle {
    stroke-width: 1;
    display: inline;
}

.dragging .trendline path, .dragging .trendline circle {
    stroke: darkblue;
}

.interaction path, .interaction circle {
    pointer-events: all;
}

.interaction .body {
    cursor: move;
}

.trendlines .interaction .start, .trendlines .interaction .end {
    cursor: nwse-resize;
}

.supstance path {
    stroke-dasharray: 2, 2;
}

.supstances .interaction path {
    pointer-events: all;
    cursor: ns-resize;
}

.mouseover .supstance path {
    stroke-width: 1.5;
}

.dragging .supstance path {
    stroke: darkblue;
}

.crosshair {
    cursor: crosshair;
}

    .crosshair path.wire {
        stroke: #DDDDDD;
        stroke-dasharray: 1, 1;
    }

    .crosshair .axisannotation path {
        fill: #DDDDDD;
    }

#candlestick .description {
    font-size: 14px;
}

    #candlestick .description .close {
        float: unset;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.5;
        color: #000;
        text-shadow: unset;
        opacity: 1;
    }

/* 成交彙整 */
#transaction .table-sm thead th {
    font-weight: normal;
    white-space: nowrap;
}

#price-volume-change .nav-pills .nav-link {
    color: #777777;
    border: 1px solid #ced4da;
    background-color: #efefef;
}

    #price-volume-change .nav-pills .nav-link:hover {
        color: #000000;
        background-color: #dcdddd;
    }

    #price-volume-change .nav-pills .nav-link.active,
    #price-volume-change .nav-pills .show > .nav-link {
        color: #ffffff;
        background-color: #146cda;
    }

#price-volume-change .tab-content .price {
    position: relative;
    padding-left: 0.75em;
    white-space: nowrap;
}

#price-volume-change .tab-content tr.last-price .price {
    font-weight: bold;
}

    #price-volume-change .tab-content tr.last-price .price:before {
        content: '';
        display: inline-block;
        position: absolute;
        left: 0;
        top: calc(50% - 4px);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0.35em 0 0.35em 0.5em;
        border-color: transparent transparent transparent #000000;
    }

#price-volume-change .progress-bar {
    background-color: #85bdf2;
}

#price-volume-change .open-price .progress-bar {
    background-color: #6e57d9;
}

/* 成交彙整的價量變化圖例 */
#price-volume-change ul.diagram {
    font-size: 14px;
    padding-left: 0;
    list-style: none;
}

    #price-volume-change ul.diagram > li {
        display: inline-block;
        position: relative;
        margin-right: 10px;
    }

        #price-volume-change ul.diagram > li:last-child {
            margin-right: 0;
        }

        #price-volume-change ul.diagram > li.diagram-icon {
            padding-left: 15px;
        }

            #price-volume-change ul.diagram > li.diagram-icon.last-price:before {
                content: '';
                display: inline-block;
                position: absolute;
                left: 4px;
                top: calc(50% - 4px);
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0.35em 0 0.35em 0.5em;
                border-color: transparent transparent transparent #000000;
            }

        #price-volume-change ul.diagram > li.diagram-bar {
            padding-left: 30px;
        }

            #price-volume-change ul.diagram > li.diagram-bar:before {
                content: '';
                display: inline-block;
                position: absolute;
                left: calc(8px - 3.5px);
                top: calc(50% - 3.5px);
                width: 1.5em;
                height: 0.5em;
                background-color: #85bdf2;
            }

            #price-volume-change ul.diagram > li.diagram-bar.open-price:before {
                background-color: #6e57d9;
            }

            #price-volume-change ul.diagram > li.diagram-bar.support:before,
            #price-volume-change .support .progress-bar {
                background-color: #00ab5e;
            }

            #price-volume-change ul.diagram > li.diagram-bar.resistance:before,
            #price-volume-change .resistance .progress-bar {
                background-color: #ff333a;
            }

/* 三大法人買賣超 */
#institutional .nav-pills .nav-link {
    color: #777777;
    border: 1px solid #ced4da;
    background-color: #efefef;
}

    #institutional .nav-pills .nav-link:hover {
        color: #000000;
        background-color: #dcdddd;
    }

    #institutional .nav-pills .nav-link.active,
    #institutional .nav-pills .show > .nav-link {
        color: #ffffff;
        background-color: #146cda;
    }

/* 公司基本資料 */
#basic .table-tr {
    height: 100%;
}

#basic .table-th,
#basic .table-td {
    font-size: 0.875rem;
    border-bottom: 1px solid #dee2e6;
    padding: 0.4em;
    word-break: break-word;
}

#basic .table-th {
    width: 130px;
    background-color: #f0f3f5;
}

/* 新聞 */
#social-news .item .title {
    color: #1a0dab;
    line-height: 24px;
}

#social-news a.item:visited {
    color: #681da8;
}

#social-news .item .contents {
    color: #4d5156;
    font-size: 14px;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 22px;
    max-height: 66px;
}

/* 行事曆 */
#calendar .day a[data-toggle='collapse'] i {
    transition: all ease .3s;
}

#calendar .day a[data-toggle='collapse']:not(.collapsed) i {
    transform: rotate(180deg);
}

#calendar .calendars .item {
    padding: 5px;
    border-bottom: 1px solid #dee2e6;
}

    #calendar .calendars .item:first-child {
        padding-top: 0;
    }

    #calendar .calendars .item:last-child {
        padding-bottom: 0px;
        border-bottom: 0;
    }

#calendar .detail {
    position: relative;
    padding: 5px 10px;
    margin-top: 10px;
    border-radius: 0.25rem;
    background-color: rgba(230, 230, 230, 0.5);
}

#calendar .collapse {
    margin-left: -98px;
}

    #calendar .collapse.show .detail:before {
        content: '';
        position: absolute;
        left: 100px;
        bottom: 100%;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 6px 10px 6px;
        border-color: transparent transparent rgba(230, 230, 230, 0.5) transparent;
    }

#calendar .detail .item {
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(222, 226, 230, 0.8);
}

    #calendar .detail .item:last-child {
        border-bottom: 0;
    }

    #calendar .detail .item .table-th {
        width: 140px;
    }

@media (min-width: 576px) {

    /* 行事曆 */
    #calendar .detail .item {
        font-size: 1rem;
    }

        #calendar .detail .item .table-th {
            width: 180px;
        }
}

@media (min-width: 768px) {

    .slider-nav-container a[data-toggle="feature-panel"] {
        font-size: 1rem;
        padding: 5px 12px;
    }

    .slider-nav-container .slider-nav {
        padding: 0 0 0 15px;
    }

    .slider-nav-container .nav-link {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }

    .slider-for-container > .slider-for .slider-nav {
        padding: 0 15px;
    }

        .slider-for-container > .slider-for .slider-nav .nav-link {
            padding-left: 10px;
            padding-right: 10px;
        }

    .stock-data-container .nav-tabs .nav-link {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }

    /* 公司基本資料 */
    #basic .table-th,
    #basic .table-td {
        font-size: 1rem;
    }

    #basic .table-th {
        width: 145px;
    }

    /* 行事曆 */
    #calendar .collapse {
        margin-left: 0;
    }

        #calendar .collapse.show .detail:before {
            left: 15px;
        }
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}