/* Minification failed. Returning unminified contents.
(257,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(258,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(259,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(263,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(264,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(265,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(607,41): run-time error CSS1030: Expected identifier, found '>'
(607,53): run-time error CSS1031: Expected selector, found ')'
(607,53): run-time error CSS1025: Expected comma or open brace, found ')'
(722,12): run-time error CSS1038: Expected hex color, found '#ffff'
(727,12): run-time error CSS1038: Expected hex color, found '#ffff'
(732,12): run-time error CSS1038: Expected hex color, found '#ffff'
(737,12): run-time error CSS1038: Expected hex color, found '#ffff'
(742,12): run-time error CSS1038: Expected hex color, found '#ffff'
(747,12): run-time error CSS1038: Expected hex color, found '#ffff'
(752,12): run-time error CSS1038: Expected hex color, found '#ffff'
(757,12): run-time error CSS1038: Expected hex color, found '#ffff'
(762,12): run-time error CSS1038: Expected hex color, found '#ffff'
(767,12): run-time error CSS1038: Expected hex color, found '#ffff'
(772,12): run-time error CSS1038: Expected hex color, found '#ffff'
(777,12): run-time error CSS1038: Expected hex color, found '#ffff'
(981,12): run-time error CSS1038: Expected hex color, found '#ffff'
(1520,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1521,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1561,20): run-time error CSS1039: Token not allowed after unary operator: '-info-tooltip-pos-left--neg'
(1566,25): run-time error CSS1039: Token not allowed after unary operator: '-info-tooltip-pos-left--pos'
(1583,25): run-time error CSS1039: Token not allowed after unary operator: '-info-tooltip-pos-left--neg'
(1590,25): run-time error CSS1039: Token not allowed after unary operator: '-info-tooltip-pos-left--pos'
 */
/*!
 * Datetimepicker for Bootstrap 3
 * version : 4.17.47
 * https://github.com/Eonasdan/bootstrap-datetimepicker/
 */.bootstrap-datetimepicker-widget{list-style:none}.bootstrap-datetimepicker-widget.dropdown-menu{display:block;margin:2px 0;padding:4px;width:19em}@media (min-width:768px){.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs{width:38em}}@media (min-width:992px){.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs{width:38em}}@media (min-width:1200px){.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs{width:38em}}.bootstrap-datetimepicker-widget.dropdown-menu:before,.bootstrap-datetimepicker-widget.dropdown-menu:after{content:'';display:inline-block;position:absolute}.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,0.2);top:-7px;left:7px}.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid white;top:-6px;left:8px}.bootstrap-datetimepicker-widget.dropdown-menu.top:before{border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0,0,0,0.2);bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.dropdown-menu.top:after{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid white;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget .list-unstyled{margin:0}.bootstrap-datetimepicker-widget a[data-action]{padding:6px 0}.bootstrap-datetimepicker-widget a[data-action]:active{box-shadow:none}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:54px;font-weight:700;font-size:1.2em;margin:0}.bootstrap-datetimepicker-widget button[data-action]{padding:6px}.bootstrap-datetimepicker-widget .btn[data-action=incrementHours]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Increment Hours"}.bootstrap-datetimepicker-widget .btn[data-action=incrementMinutes]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Increment Minutes"}.bootstrap-datetimepicker-widget .btn[data-action=decrementHours]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Decrement Hours"}.bootstrap-datetimepicker-widget .btn[data-action=decrementMinutes]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Decrement Minutes"}.bootstrap-datetimepicker-widget .btn[data-action=showHours]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Show Hours"}.bootstrap-datetimepicker-widget .btn[data-action=showMinutes]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Show Minutes"}.bootstrap-datetimepicker-widget .btn[data-action=togglePeriod]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Toggle AM/PM"}.bootstrap-datetimepicker-widget .btn[data-action=clear]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Clear the picker"}.bootstrap-datetimepicker-widget .btn[data-action=today]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Set the date to today"}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget .picker-switch::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Toggle Date and Time Screens"}.bootstrap-datetimepicker-widget .picker-switch td{padding:0;margin:0;height:auto;width:auto;line-height:inherit}.bootstrap-datetimepicker-widget .picker-switch td span{line-height:2.5;height:2.5em;width:100%}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget table td,.bootstrap-datetimepicker-widget table th{text-align:center;border-radius:4px}.bootstrap-datetimepicker-widget table th{height:20px;line-height:20px;width:20px}.bootstrap-datetimepicker-widget table th.picker-switch{width:145px}.bootstrap-datetimepicker-widget table th.disabled,.bootstrap-datetimepicker-widget table th.disabled:hover{background:none;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget table th.prev::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Previous Month"}.bootstrap-datetimepicker-widget table th.next::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Next Month"}.bootstrap-datetimepicker-widget table thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget table thead tr:first-child th:hover{background:#eee}.bootstrap-datetimepicker-widget table td{height:54px;line-height:54px;width:54px}.bootstrap-datetimepicker-widget table td.cw{font-size:.8em;height:20px;line-height:20px;color:#777}.bootstrap-datetimepicker-widget table td.day{height:20px;line-height:20px;width:20px}.bootstrap-datetimepicker-widget table td.day:hover,.bootstrap-datetimepicker-widget table td.hour:hover,.bootstrap-datetimepicker-widget table td.minute:hover,.bootstrap-datetimepicker-widget table td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget table td.old,.bootstrap-datetimepicker-widget table td.new{color:#777}.bootstrap-datetimepicker-widget table td.today{position:relative}.bootstrap-datetimepicker-widget table td.today:before{content:'';display:inline-block;border:solid transparent;border-width:0 0 7px 7px;border-bottom-color:#337ab7;border-top-color:rgba(0,0,0,0.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget table td.active,.bootstrap-datetimepicker-widget table td.active:hover{background-color:#337ab7;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.bootstrap-datetimepicker-widget table td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget table td.disabled,.bootstrap-datetimepicker-widget table td.disabled:hover{background:none;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget table td span{display:inline-block;width:54px;height:54px;line-height:54px;margin:2px 1.5px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget table td span:hover{background:#eee}.bootstrap-datetimepicker-widget table td span.active{background-color:#337ab7;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.bootstrap-datetimepicker-widget table td span.old{color:#777}.bootstrap-datetimepicker-widget table td span.disabled,.bootstrap-datetimepicker-widget table td span.disabled:hover{background:none;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget.usetwentyfour td.hour{height:27px;line-height:27px}.bootstrap-datetimepicker-widget.wider{width:21em}.bootstrap-datetimepicker-widget .datepicker-decades .decade{line-height:1.8em !important}.input-group.date .input-group-addon{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}
.chart-title-block {
    text-align: center;
}

.chart-title {
    font-family: 'Roboto', Arial, sans-serif;
    text-align: center;
    color: #003199;
    font-size: 18px;
    fill: #003199;
    display: inline-block;
}

.treegrid-indent {
    width: 0px;
    height: 16px;
    display: inline-block;
    position: relative;
}

.treegrid-expander {
    /*width: 0px;*/
    margin-right: 2px;
    height: 16px;
    display: inline-block;
    position: relative;
    /*left: -17px;*/
    cursor: pointer;
    font-size: 11px;
    padding-left: 2px;
    padding-right: 3px;
}

.screener-toolbar__button:hover {
    background-color: #fff2d7;
}

.screener-dropdown__item--link, .js-toolbar-button {
    cursor: pointer;
}

.screener-toolbar__button--spacing-right {
    margin-right: 10px;
}

.screener-toolbar__button {
    cursor: pointer;
    border: 1px solid #b1b2b3;
    border-radius: 2px;
    color: #3c3a3a;
    padding: 5px 10px;
    margin: 2px;
    box-sizing: border-box;
    display: inline-block;
    white-space: nowrap;
    margin-top: 3px;
}

.screener-tooltip {
    position: relative;
}

.screener-tooltip:hover::before, .screener-tooltip:hover::after {
    display: block;
}

.screener-tooltip:before, .screener-tooltip:after {
    display: none;
    pointer-events: none;
    z-index: 5000;
}
.screener-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    /* vertically center */
    top: 0%;
    left: 0%;
    transform: translate(-10%, -100%);
    /* move to top */
    margin-top: -10px;
    /*basic style*/
    padding: 5px 10px;
    background-color: #335295;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.screener-tooltip::after {
    content: " ";
    position: absolute;
    top: 0px;
    margin-top: -10px;
    border-width: 6px;
    border-style: solid;
    border-color: #335295 transparent transparent transparent;
}

.btn-active {
    background-color: #01579B !important;
    color: rgba(255,255,255,.87) !important;
    outline: 0 !important;
}

.chart-btn-img{
    width: 15px;
}

.general-markets__chart-top-row {
    height: 26px;
    width: fit-content;
}

.general-markets__chart-timeframe {
    padding: 3px 16px;
    height: 24px;
}

.input-group.date .input-group-addon {
    cursor: pointer
}

@media screen and (min-width: 768px) {
    .input-group.date > input {
        max-width: 100px;
    }
}

.chart-rangetime {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
}

.chart-option-box {
    padding: 4px 10px;
    background: #e1f5fe;
    text-align: center;
}

.chart-option-group {
    padding-top: 7px;
    margin-bottom: 7px;
}

.chart-option-item {
    padding: 5px 7px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
}

.chart-option-item > .btn-remove-item {
    opacity: 0;
}

.chart-option-item:hover > .btn-remove-item {
    opacity: 1;
}

.chart-sector-container {
    margin-left: -15px;
    margin-right: -15px;
}

.chart-point {
    position: relative;
    cursor: pointer;
    min-width: 10px;
    min-height: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.chart-point input[type='color'] {
    opacity: 0;
    width: 100%;
    position: absolute;
    height: 100%;
    cursor: pointer;
}

.highcharts-container {
    background: url(https://image.vietstock.vn/common/vietstock_60.png) no-repeat center 25%;
}

.heatmap-toolbar__button-text {
    margin-left: 5px;
}

.heatmap-toolbar-dropdown {
    display: none;
    width: 190px;
    position: absolute;
    top: 40px;
    left: -1px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 1px 3px 5px #0c0b0b59;
    z-index: 10;
    color: #4a4e52;
}

.table-option-dropdown {
    display: none;
    width: 190px;
    position: absolute;
    top: 12px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 1px 3px 5px #0c0b0b59;
    z-index: 100;
    color: #4a4e52;
    left: -600px;
}

.heatmap-dropdown--sizing {
    width: 750px;
    height: 400px;
    left: calc(100% - 450px);
}

.heatmap-dropdown--small {
    width: 170px;
    left: -33px;
}

.heatmap-dropdown--right {
    left: auto;
    right: 0px;
}

.table-item-checkbox {
    margin-left: 3px !important;
    margin-right: 5px !important;
    width: 14px !important;
    height: 14px !important;
    cursor: pointer;
    margin-top: 0 !important;
}

.heatmap-dropdown--sizing::before {
    left: 350px;
}

#table-option-wrapper {
    --itemHoverColor: #ffdead;
    --itemActiveColor: #fff3d0;
    --borderToolbarColor: #e1e1e1;
}

#chart-option-wrapper {
    --itemHoverColor: #ffdead;
    --itemActiveColor: #fff3d0;
    --borderToolbarColor: #e1e1e1;
}

.table-option-dropdown__item {
    margin-bottom: 6px !important;
    cursor: default;
}

.table-option-dropdown__item--active {
    background-color: #e1f5fe !important;
    color: #0b5495 !important;
    font-weight: 600;
}

.table-option-dropdown__header {
    cursor: all-scroll;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.heatmap-dropdown__item {
    cursor: default;
    white-space: normal;
}

.heatmap-dropdown__item--disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: transparent !important;
    user-select: none;
}

.edoc-content .edoc-first {
    float: left;
    padding: 10px;
    width: 100%;
}

.edoc-content img {
    float: left;
    margin-right: 10px;
    border: 1px solid #ddd;
}

.edoc-content img.item-first {
    width: 155px;
    height: 190px;
    margin-bottom: 10px;
}

.edoc-content .edoc-child {
    min-height: 110px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.edoc-content img.item-child {
    width: 70px;
    height: 80px;
}

ul.list-sector-news .news-item {
    padding: 10px 5px;
}

ul.list-sector-news .news-item:not(:last-child) {
    border-bottom: 1px solid #dbdbdb;
}

ul.list-sector-news .news-item:hover {
    background-color: #ffdead;
}

ul.list-sector-news .news-item a:hover .news-title {
    color: #1973ed;
}

ul.list-sector-news .news-item .frame-news-img {
    float: left;
    margin-right: 10px;
}

ul.list-sector-news .news-item .frame-news-img .news-img {
    width: 100px;
    height: 65px;
}

ul.list-sector-news .news-item .frame-news-text {
    margin-top: -5px;
}

ul.list-sector-news .news-item .frame-news-text .news-title {
    font-size: 14px;
    font-weight: 700;
}

ul.list-sector-news .news-item .frame-news-text .news-publish-time {
    font-size: 12px;
    color: #646464;
    margin-left: 5px
}

ul.list-sector-news .news-item .frame-news-text .news-head {
    font-size: 14px;
    color: #3e3d3d;
    line-height: 1.5;
    margin-top: 5px;
}

.option-menu-btn {
    opacity: 0;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 50%;
    /*background: #f8f9fa;*/
    cursor: pointer;
}

.col-first-sector{
    display: flex !important;
    align-items: center !important;
}

.col-first-sector:hover .option-menu-btn {
    opacity: 1;
}

.option-menu-group {
    margin-left: auto;
    position: relative;
}

.menu-dropdown {
    display: none;
    min-width: 190px;
    position: absolute;
    top: 12px;
    left: 20px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 1px 3px 5px #0c0b0b59;
    z-index: 100;
    color: #4a4e52;
}

.menu-dropdown:hover {
    display: block !important;
}

.menu-dropdown__header {
    padding: 10px 5px 10px 7px;
    border-bottom: 1px solid #f3f3f3;
    position: relative;
    background: #f8f9fb;
}

.menu-dropdown__header-text {
    color: #545B66;
    font-size: 13px;
    font-weight: bold;
}

.menu-dropdown__body {
    position: relative;
    top: 0px;
    padding: 5px 0px;
    padding-top: 0px;
    max-height: 350px;
    overflow-y: auto;
}

.menu-dropdown__item {
    display: flex;
    align-items: center;
    padding: 7px 15px;
    white-space: nowrap;
    position: relative;
    top: 0px;
    cursor: pointer;
    color: #4a4e52;
}

.menu-dropdown__item:hover {
    background-color: #ffdead;
}

.menu-dropdown__item-label {
    margin-left: 7px;
}

.heatmap-wrapper--fullscreen {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #fff;
    margin: 0px;
}

.heatmap-visualization--fullscreen {
    height: calc(100vh - 60px) !important;
}

.col-option {
    position: relative;
}

.text-right .col-option {
    display: flex;
    justify-content: flex-end;
}

.text-left .col-option {
    display: flex;
    justify-content: flex-start;
}

.col-option-dropdown {
    position: absolute;
    min-width: 150px;
    display: flex;
    display: none;
    flex-direction: column;
    right: 0;
    top: 100%;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
    margin-top: 5px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 1px 3px 5px #0c0b0b59;
    z-index: 100;
    color: #4a4e52;
    padding: 6px 0 0;
}

.col-option-name {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 3px;
    padding-right: 3px;
}

.col-option-name--active {
    font-weight: 600;
    color: #131722;
}

th.text-left .col-option-name {
    flex-direction: row-reverse;
}

.col-option-dropdown__group {
    width: 100%;
    flex-shrink: 0;
}

.col-option-dropdown__group:not(:last-child) {
    border-bottom: 1px solid rgb(224, 227, 235);
}

.col-option-dropdown__header {
    padding: 3px 12px;
    text-align: left;
    font-weight: 400;
    color: #6a6d78;
}

.col-option-dropdown__header-text {
    color: #015096;
}

.col-option-dropdown__body {
    margin-top: 6px;
    margin-bottom: 6px;
}

.col-option-dropdown__item {
    height: 32px;
    padding: 6px 12px;
    text-align: left;
    color: rgb(19, 23, 34);
    cursor: default;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.col-option-dropdown__item > svg {
    width: 25px;
    margin-right: 5px;
    max-width: 25px;
}

.col-option-dropdown__item > svg > path {
    fill: #131722;
}

.col-option-dropdown__item-label {
    white-space: nowrap;
}

.col-option-dropdown__item--active {
    background-color: rgb(16, 123, 215) !important;
    color: #f5f9ff !important;
}

.col-option-dropdown__item--active > svg > path {
    fill: #f5f9ff !important;
}

.col-option-dropdown__item:hover {
    background-color: #fff3d0;
}

.col-hover{
    cursor: default;
    user-select: none;
}

.col-hover:hover {
    /*background-color: #e1f5fe !important;*/
    background-color: #fbfdff !important;
    cursor: pointer;
}

.container {
    width: 90%;
}

@media screen and (max-width: 1440px) {
    .container {
        width: 95%;
    }
}

@media screen and (max-width: 1366px) {
    .container:not(.page-header-content > .container) {
        width: 100%;
    }
}

.visualization {
    height: 550px;
}

.option-dropdown--sizing {
    right: 0;
    left: auto;
    top: calc(100% + 5px);
    width: 910px;
    height: 500px;
}

.option-dropdown--sizing .heatmap-dropdown__item {
    padding: 7px 10px;
}

.option-dropdown--sizing .heatmap-dropdown__body--ChildCol {
    max-height: 440px;
}

@media screen and (max-width: 1440px){
    .option-dropdown--chart-index {
        left: calc(50% - 50vw);
    }
}

@media screen and (max-width: 992px){
    .option-dropdown--sizing {
        width: 650px;
        height: 450px;
    }
    .option-dropdown--sizing .row-heatmap-container {
        display: flex;
        flex-direction: column;
    }
    .option-dropdown--sizing .heatmap-dropdown__body--ChildCol {
        max-height: 380px;
    }

    .option-dropdown--sizing .heatmap-dropdown__body--ParentCol {
        width: 40%;
    }
    .option-dropdown--sizing .menu--content__container {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .option-dropdown--sizing {
        width: 320px;
        height: 400px;
    }
    .option-dropdown--sizing .heatmap-dropdown__body--ParentCol {
        display: none;
    }
    .general-markets__chart-top-row{
        width: 100%;
    }

    .option-dropdown--chart-index {
        left: calc(110% - 50vw);
    }
}

@media screen and (max-width: 992px){
    .table-responsive {
        overflow-x: auto !important;
    }

    /*.chart-rangetime {
        flex-direction: column-reverse;
    }*/

    .chart-rangetime > * {
        align-self: self-end;
    }

    .chart-rangetime > .general-markets__chart-top-row {
        align-self: self-start;
        max-width: 50%;
        overflow: scroll;
    }
}

.col-name-fixed {
    min-width: 250px !important;
    max-width: 250px !important;
    width: 250px !important;
}

.table-sector-performance th:first-child {
    width: 16%;
    min-width: 180px;
}

/*.table-sector-performance th:not(:first-child) {
    width: 10.5%;
}*/
.table-sector-performance tr > * {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    cursor: default;
}

.table-hover-col > tbody > tr:hover, .table-hover-col > tbody > tr:hover > td {
    background-color: #ffdead;
}

.color-red111 {
    background-color: #4caf50 !important;
    color: #ffff;
}

.color-increase-1 {
    background-color: #97e79b !important;
    color: #ffff;
}

.color-increase-2 {
    background-color: #68d96c !important;
    color: #ffff;
}

.color-increase-3 {
    background-color: #4caf50 !important;
    color: #ffff;
}

.color-increase-4 {
    background-color: #359339 !important;
    color: #ffff;
}

.color-increase-5 {
    background-color: green !important;
    color: #ffff;
}

.color-decrease-1 {
    background-color: #f9a6be !important;
    color: #ffff;
}

.color-decrease-2 {
    background-color: #f9759b !important;
    color: #ffff;
}

.color-decrease-3 {
    background-color: #ff3c6b !important;
    color: #ffff;
}

.color-decrease-4 {
    background-color: #ff3742 !important;
    color: #ffff;
}

.color-decrease-5 {
    background-color: #d50100 !important;
    color: #ffff;
}

.color-unchange {
    background-color: #FFA60C !important;
    color: #ffff;
}

.sector-info-group {
    display: flex;
    border-radius: 8px;
    border: 1px solid #e0e4e9;
    flex-direction: row;
    padding-block: 20px;
    justify-content: space-evenly;
    /*width: fit-content;*/
    /*margin-left: 40px;*/
    max-width: 800px;
    min-width: 550px;
    /*margin-top: 10px;*/
}

.sector-info-item {
    border-right: 1px solid #e0e4e9;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /*padding: 0 40px;*/
    font-size: 15px;
}

.sector-info-item:last-child {
    border-right: none;
}

.sector-info-item__label {
    /*color: #015096;*/
    font-weight: 600;
    text-align: center;
    color: #999;
}

.sector-info-item__value {
    color: rgba(0, 0, 0, .81);
    font-weight: 700;
    font-size: 20px;
}

.sector-index-group {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
}

@media screen and (max-width: 480px) {
    .sector-index-group {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow: auto;
    }
}

.sector-index-card {
    padding: 12px;
    border: 1px solid #e0e4e9;
    margin-top: 10px;
    border-radius: 8px;
}

.sector-index-card__header {
    font-weight: 600;
    font-size: 15px;
    color: #015096;
    color: #333;
}

.sector-index-card__body {
    display: flex;
    margin-top: 8px;
    justify-content: flex-start;
}

.sector-index-card__item {
    width: 90px;
    text-align: left;
}

.sector-index-card__item-label {
    font-size: 13px;
}

.sector-index-card__item-value {
    font-weight: 600;
    /*color: green;*/
}

.sector-performance-content {
    display: flex;
    align-items: center;
}

.option-group {
    display: flex;
    align-items: baseline;
    gap: 10px 20px;
}

.option-tab-group {
    display: flex;
    padding: 4px;
    border-radius: 10px;
    background-color: rgb(239, 242, 245);
    width: fit-content;
    max-width: 100%;
    overflow: auto;
}

.option-tab {
    padding: 6px 20px;
    margin-left: 5px;
    border-radius: 7px;
    cursor: default;
    text-decoration: none !important;
    white-space: nowrap;
}

.option-tab:hover {
    background-color: #ffdead;
}

.option-tab--active {
    background: rgb(10, 138, 227) !important;
    color: white !important;
}

/*.option-selection{
    margin-left: 20px;
}*/

.grid-board {
    display: flex;
    font-size: 15px;
    min-height: 300px;
}

.left-col-group {
    width: 110px;
    min-width: 110px;
}

.left-col-item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 1px 1px 2px;
    background-color: #f3f3f3;
    border: 1px solid #efefef;
    /*font-weight: 600;*/
    color: #333;
    cursor: default;
}

.right-col-group {
    overflow: auto;
    width: 100%;
    position: relative;
}

@-moz-document url-prefix() {
    .right-col-group {
        scrollbar-width: thin;
        scrollbar-color: #b6b7b766 #efefef;
    }
}

.right-col-group::-webkit-scrollbar {
    height: 9px;
}

.right-col-group::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #efefef;
}

.right-col-group::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #b6b7b766;
}

.right-col-group::-webkit-scrollbar-thumb:hover {
    background: #b6b7b7;
}

.right-col-group ul {
    display: flex;
}

.right-col-group ul > li {
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 100px;
    min-width: 100px;
    margin: 1px;
    color: #ffff;
    cursor: default;
    flex: 1;
}

.right-col-group ul:not(:first-child) > li:hover {
    opacity: 0.7;
}

.right-col-group ul:first-child > li {
    background-color: #f3f3f3;
    /*font-weight: 600;*/
    color: #333;
}

.cell-item {
    
}

.cell-item--neutral{
    background-color: #aaa;
}

.cell-item--green {
    background-color: #4caf50;
}

.cell-item--red {
    background-color: #d50100;
}

.cell-item--orange {
    background-color: #ffa60c;
}

.stock-col-container {
    display: flex;
    align-items: center;
}

.stock-img {
    padding: 3px;
    width: 100px;
    min-width: 100px;
    text-align: center;
    border: 1px solid #f2f1f1;
    border-radius: 5px;
}

.stock-img > img {
    height: 28px;
    max-height: 28px;
    width: auto;
}

.stock-col-container > a {
    padding: 5px 0px;
    text-align: center;
    background-color: #e1f5fe;
    color: #0b5495;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    width: 60px;
    min-width: 60px;
}

.stock-col-container > span {
    /*color: #015096;*/
    cursor: default;
    min-width: 200px;
}

.table-hover > tbody > tr:hover .stock-txt {
    color: white;
    background-color: #01579B;
}

.table-hover > tbody > tr:hover .stock-img {
    border-color: #2dce89;
}

.stock-txt:hover, .stock-txt--active {
    color: white !important;
    background-color: #01579B !important;
}

.option-tab--mobile{
    display: none;
}

.chart-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}

@media screen and (min-width: 1040px) and (max-width: 1310px) {
    .col-11-custom {
        width: 45.83333333%;
    }

    .col-13-custom {
        width: 54.16666667%;
    }
}


@media screen and (min-width: 768px) and (max-width: 860px) {
    .sector-index-option{
        display: none;
    }

    .sector-index-chart{
        width: 100%;
    }
}

@media screen and (max-width: 767px){
    .chart-action-container{
        flex-direction: column;
    }

    .chart-action-label {
        align-self: flex-start;
    }

    .chart-action .form-group {
        margin-bottom: 0;
    }

    .chart-rangetime {
        flex-direction: column-reverse;
    }

    .general-markets__chart-top-row {
        max-width: 100% !important;
    }

    .chart-rangetime .form-inline {
        display: flex;
        align-items: center;
    }

    .chart-rangetime .form-group {
        display: flex;
        align-items: center;
    }

    .chart-rangetime .form-group:first-child{
        margin-right: 10px;
    }

    .chart-rangetime .form-control {
        max-width: 100px;
    }

    .sector-index-option > .chart-option-group {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.50s ease-in;
    }

    /*.sector-index-option > .chart-option-box:hover ~ .chart-option-group {
        max-height: 500px;
    }*/

    .sector-performance-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .option-group {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 7px 12px;
    }

    .option-tab-group{
        display: none;
    }

    .option-tab--mobile {
        display: initial;
    }

    .option-type {
        /*flex-basis: 100%;*/
    }

    .option-selection {
        margin-left: 0;
        margin-top: 10px;
    }

    .left-col-group {
        width: 100px;
        min-width: 100px;
    }

    .right-col-group ul > li {
        width: 80px;
        min-width: 80px;
    }

    .hidden-long-text-3--mobile {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
}

.tab-bar-group {
    border-bottom: 1px solid #e0e3eb;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.tab-bar-item {
    color: #777;
    width: fit-content;
    padding: 10px 15px;
    cursor: pointer;
    margin-bottom: 0;
}

.tab-bar-item:hover {
    color: #015096;
}

.tab-bar-item--active {
    border-bottom: 2px solid #ed6e6e;
    color: #015096;
}

.cell-hover {
    background-color: #ffdead !important;
    color: #333 !important;
}

.option-menu-group:hover .menu-dropdown {
    display: block !important; 
}

.data-content-table__cell-value--green {
    color: #008000;
}

.data-content-table__cell-value--red {
    color: #ff0000;
}

.data-content-table__cell-value--yellow {
    color: #ffa60c;
}

.data-content-table__cell-value--ceil {
    color: #c900ca;
}

.data-content-table__cell-value--floor {
    color: #1e90ff;
}

.table-cell-content-110{
    min-width: 110px;
}

ul.list-sector-news .news-item a {
    color: #181717;
    font-size: 14px;
}

.sector-basic-info {
    display: flex;
    align-items: baseline;
}

.sector-logo-mobile{
    display: none;
}

@media screen and (max-width: 680px) {
    .sector-basic-info {
        align-items: flex-start;
        flex-direction: column;
        row-gap: 10px;
    }

    .sector-basic-info__name {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sector-logo-mobile{
        display: block;
    }

    .sector-logo-mobile img{
        height: 45px;
    }

    .sector-logo-default{
        display: none;
    }
}

.toolbar-dropdown--mobile {
    display: block;
    position: fixed;
    top: unset;
    left: 0;
    bottom: 0;
    width: 100%;
}

.toolbar-dropdown--mobile .heatmap-dropdown__header {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 12px;
}

.toolbar-dropdown--mobile .heatmap-dropdown__item {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
}

.col-option-dropdown--mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    top: unset;
    width: 100%;
}

.col-option-dropdown--mobile .col-option-dropdown__header {
    padding: 7px 15px;
}

.col-option-dropdown--mobile .col-option-dropdown__item {
    padding: 10px 15px;
}

@media screen and (min-width: 768px) {
    .table-sticky-col {
        position: sticky !important;
        position: -webkit-sticky !important;
        left: 0 !important;
        z-index: 5 !important;
    }

    td.table-sticky-col {
        background: #fff;
    }

    .table-sticky-col:nth-child(1) {
        left: 0 !important;
    }

    .table-sticky-col.col-40{
        min-width: 40px;
    }

    .table-sticky-col:nth-child(2) {
        left: 40px !important;
    }

    ul.list-sector-news .news-item .frame-news-img .news-img {
        width: 150px;
        height: 100px;
        border-radius: 4px;
    }
}

.hidden-long-text-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.table-cell-content-120 {
    min-width: 120px;
}

.min-width-140 {
    min-width: 140px;
}

.min-width-150{
    min-width: 150px;
}

.link-ref-content {
    display: flex;
    gap: 15px;
    margin-left: auto;
    padding: 10px 20px;
    background: #f5f5f5;
    border-radius: 8px;
}

.link-ref-content a {
    white-space: nowrap;
}

.flex-persist{
    display: flex !important;
}

.sector-performance-content .option-group {
    flex-wrap: wrap;
}

.table-header--sticky {
    position: absolute;
    background-color: #f3f3f3;
}

@media screen and (min-width: 768px) {
    .table-header--sticky {
        z-index: 60;
    }

    .table-row--sticky {
        z-index: 50;
    }
}

.table-custom{

}

.table-custom > thead > tr > th {
    background-color: #f3f3f3;
    font-weight: 500;
    color: #333;
}


.table-row--sticky {
    position: relative;
    background-color: #f3f3f3;
}

.table-row--sticky:after {
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.banner-container {
    min-width: 310px;
    width: 310px;
    min-height: 100px;
    display: flex;
    justify-content: end;
}

.banner-content {
    width: 300px;
    min-height: 100px;
    margin-top: 10px;
}

@media screen and (max-width: 991px){
    .banner-container{
        display: none;
    }
}

.table-header--static{
    position: relative;
    top: -100px;
    opacity: 0;
}

.table-horizontal-scroll{
    user-select: none;
}

.table-horizontal-scroll tbody:active {
    cursor: grabbing;
}

.d-flex-item-center{
    display: flex;
    align-items: center;
}

.custom-scrollbar-horz {
    overflow: auto;
    width: 100%;
    position: relative;
}

@-moz-document url-prefix() {
    .custom-scrollbar-horz {
        scrollbar-width: thin;
        scrollbar-color: #b6b7b766 #efefef;
    }
}

.custom-scrollbar-horz::-webkit-scrollbar {
    height: 9px;
}

.custom-scrollbar-horz::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #efefef;
}

.custom-scrollbar-horz::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #b6b7b766;
}

.custom-scrollbar-horz::-webkit-scrollbar-thumb:hover {
    background: #b6b7b7;
}

.info-tooltip {
    /*margin-left: 10px;*/
    color: #3d3f41;
    font-size: 13px;
    font-weight: 400;
    position: relative;
    --info-tooltip-pos-left--neg: 0px;
    --info-tooltip-pos-left--pos: 0px;
}

.info-tooltip:hover .info-tooltip__tips {
    display: block
}

.info-tooltip__tips {
    display: none;
    position: absolute;
    top: 28px;
    left: -120px;
    padding: 10px;
    border: 1px solid #efefef;
    background-color: #335295;
    border-radius: 5px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    z-index: 50;
    width: 880px;
    white-space: normal;
}

.info-tooltip__tips:after {
    content: " ";
    position: absolute;
    top: -12px;
    left: 118px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #335295 transparent;
}

.info-tooltip__tips p {
    margin-bottom: 5px;
}

@media screen and (max-width: 1366px) {
    .info-tooltip__tips {
        left: var(--info-tooltip-pos-left--neg);
        transform: translateX(25%);
    }

    .info-tooltip__tips:after {
        left: calc(var(--info-tooltip-pos-left--pos));
        transform: translateX(-220px);
    }
}

@media screen and (max-width: 1200px) {
    .info-tooltip__tips{
        max-width: 600px;
    }

    .info-tooltip__tips:after {
        transform: translateX(-150px);
    }
}

@media screen and (max-width: 991px) {
    .info-tooltip__tips {
        left: calc(var(--info-tooltip-pos-left--neg));
        width: 100vw;
        transform: initial;
    }

    .info-tooltip__tips:after {
        transform: initial;
        left: calc(var(--info-tooltip-pos-left--pos));
    }
}

.txt-shadow {
    text-shadow: 1px 1px 4px #000;
}

.cell-hover.txt-shadow{
    text-shadow: none;
}

.basic-info-sector{
    display: flex;
    align-items: center;
}

.tooltip--sector-desc {
    color: #3d3f41;
    font-size: 13px;
    font-weight: 400;
    position: relative;
}

.tooltip--sector-desc--hover:hover .tooltip--sector-desc__tips {
    display: block
}

.tooltip--sector-desc__tips {
    display: none;
    position: absolute;
    top: 0;
    transform: translateY(calc(-100% - 10px));
    left: -80px;
    max-width: 680px;
    padding: 10px;
    border: 1px solid #efefef;
    background-color: #335295;
    border-radius: 5px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    z-index: 50;
    width: max-content;
    white-space: normal;
}

.tooltip--sector-desc__tips:after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 80px !important;
    border-width: 6px;
    border-style: solid;
    border-color: #335295 transparent transparent transparent;
}

.tooltip--sector-desc__tips p {
    margin-bottom: 5px;
}

@media screen and (max-width: 992px) {
    .tooltip--sector-desc__tips {
        max-width: 550px;
        transform: translate(-150px, calc(-100% - 10px));
    }

    .tooltip--sector-desc__tips:after {
        transform: translate(150px);
    }
}

@media screen and (max-width: 767px) {
    .tooltip--sector-desc__tips {
        max-width: 350px;
        transform: translate(-220px, calc(-100% - 10px));
    }

    .tooltip--sector-desc__tips:after {
        transform: translate(220px);
    }
}

@media screen and (min-width: 992px) {
    .heatmap-toolbar__button--first {
        display: block;
    }
}

.nav-header-container--show {
    display: flex;
}

.hidden-long-text-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.vert-middle{
    vertical-align: middle !important;
}

@media screen and (max-width: 991px) {
    .nav-sector-container.nav-header-container--show {
        top: 46px;
    }
}

.m-width-70{
    min-width: 70px;
}

.loading-layout {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}