MTP20_WEB_GLOBAL/src/components/base/hqchart/index.less

.app-hqchart {
    flex: 1;
    overflow: hidden;

    &__container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    a {
        transition-duration: 0.4s, 0.5s;
        transition-property: background-color, color;
        transition-timing-function: ease, ease;
    }

    i {
        font-style: normal;
    }

    input,
    canvas {
        outline: 0px;
    }

    .redColor {
        color: #ee1515;
    }

    .greenColor {
        color: #199e00;
    }


    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-button {
        display: none;
    }

    ::-webkit-scrollbar-track {
        background: #F1F1F1;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
        background: #C1C1C1;
        border-radius: 4px;
    }

    /*右键菜单*/
    .context-menu-wrapper {
        position: absolute;
        z-index: 500;
        overflow: auto;
        border: 1px solid;
        border-color: #b5b7b9;
        background-color: #fff;
        white-space: nowrap;
    }

    html.theme-dark .context-menu-wrapper {
        background-color: #1c2030;
        border-color: #363c4e;
    }

    .context-menu-wrapper .backlight {
        background-color: #f2f3f5;
    }

    html.theme-dark .context-menu-wrapper .backlight {
        background-color: #2f3241;
    }

    tr.context-menu.disabled {
        color: #9d9d9d;
    }

    /*
    tr.context-menu.spinner > td {
        background: url("/static/images/loading-small.0c15c93a2cb0.gif") 50% no-repeat;
        cursor: default;
    }
    */

    .submenu.center {
        background-color: #fff;
    }

    .context-menu {
        font-family: Tahoma, Arial, sans-serif;
        font-size: 11px;
        white-space: nowrap;
    }

    tr.context-menu {
        cursor: pointer;
        height: 29px;
    }

    tr.context-menu:hover {
        background: #f2f3f5;
    }

    html.theme-dark tr.context-menu-hover {
        background: #2f3241;
    }

    td.context-menu {
        opacity: 1;
        cursor: pointer;
        padding-left: 4px;
    }

    .context-menu-item-separated {
        border-bottom: 1px solid #cecece;
    }

    .context-menu .text {
        min-width: 100px;
    }

    .context-menu .spacer {
        width: 18px;
        text-align: center;
    }

    .context-menu .icon {
        height: 27px;
        width: 18px;
    }

    .context-menu .shortcut {
        text-align: right;
        color: #aaa;
        padding: 0 2px 0 10px;
    }

    .submenu-arrow {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAKElEQVR4AWOgExgFo6Cvr+8/1Q0EYaoaCMNUNBCBB68LqRvLIxiMAgAKDyqRblYs2AAAAABJRU5ErkJggg==);
        background-repeat: no-repeat;
        background-position: 50%;
        width: 20px;
    }

    .border td {
        border-bottom: 1px solid #b5b7b9;
    }

    /*右键菜单结束*/

    /*工具条*/
    .tools {
        margin-bottom: 8px;
        height: 38px;
        color: #4c525e;
        float: left;
    }

    .tools .txt {
        height: 28px;
        width: 80px;
        border: none;
        margin-top: 3px;
        padding-left: 5px;
    }

    .tools .item {
        float: left;
        margin-right: 1px;
        padding: 0 5px;
        cursor: pointer;
        border: 1px solid #ECEFF2;
        height: 36px;
        line-height: 36px;
    }

    .button {
        -moz-box-shadow: inset 0px 0px 0px 0px #edf0f2;
        -webkit-box-shadow: inset 0px 0px 0px 0px #edf0f2;
        box-shadow: inset 0px 0px 0px 0px #edf0f2;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fcfffa), color-stop(1, #ffffff));
        background: -moz-linear-gradient(top, #fcfffa 5%, #ffffff 100%);
        background: -webkit-linear-gradient(top, #fcfffa 5%, #ffffff 100%);
        background: -o-linear-gradient(top, #fcfffa 5%, #ffffff 100%);
        background: -ms-linear-gradient(top, #fcfffa 5%, #ffffff 100%);
        background: linear-gradient(to bottom, #fcfffa 5%, #ffffff 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfffa', endColorstr='#ffffff', GradientType=0);
        background-color: #fcfffa;
        border: 1px solid #eceff2;
        display: inline-block;
        cursor: pointer;
        font-family: Arial;
        font-size: 13px;
        text-decoration: none;
    }

    .button:hover {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f2f3f5), color-stop(1, #f2f3f5));
        background: -moz-linear-gradient(top, #f2f3f5 5%, #f2f3f5 100%);
        background: -webkit-linear-gradient(top, #f2f3f5 5%, #f2f3f5 100%);
        background: -o-linear-gradient(top, #f2f3f5 5%, #f2f3f5 100%);
        background: -ms-linear-gradient(top, #f2f3f5 5%, #f2f3f5 100%);
        background: linear-gradient(to bottom, #f2f3f5 5%, #f2f3f5 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f3f5', endColorstr='#f2f3f5', GradientType=0);
        background-color: #f2f3f5;
    }

    .button:active {
        position: relative;
        top: 1px;
    }

    /*工具条结束*/

    /*工具条下拉菜单*/
    .dropdownList {
        width: 200px;
        border: 1px solid #ECEFF2;
        position: absolute;
        z-index: 500;
        overflow: auto;
        padding: 5px 0;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
        border-radius: 3px;
        display: none;
        color: #4c525e;
    }

    .dropdownList .item {
        padding: 2px 8px;
        height: 28px;
        line-height: 28px;
    }

    .dropdownList .item:hover {
        background-color: #EBF7FC;
        cursor: pointer;
    }

    /*工具条下拉菜单结束*/

    /*拖拽切换*/
    .selected {
        height: 38px;
        overflow: hidden;
        text-align: center;
        float: left;
    }

    .selected ul li {
        float: left;
        margin: 0 5px;
        list-style-type: none;
    }

    .selected ul a {
        display: block;
        background: #EBF7FC;
        height: 38px;
        text-decoration: none;
        color: #4c525e;
        -webkit-transition: margin .4s ease-in-out;
        -moz-transition: margin .4s ease-in-out;
        -o-transition: margin .4s ease-in-out;
        -ms-transition: margin .4s ease-in-out;
        transition: margin .4s ease-in-out;
        padding: 0px 8px;
        line-height: 38px;
    }

    .selected ul a:nth-of-type(even) {
        background: #fff2f4;
        color: #4c525e;
    }

    /*拖拽切换结束*/

    /*画图工具*/
    .drawing {
        height: 36px;
        float: left;
        border: 1px solid #ECEFF2;
    }

    .drawing .lable {
        background: #ECEFF2;
        height: 36px;
        line-height: 36px;
        float: left;
        margin-right: 1px;
        padding: 0px 5px;
    }

    .drawing .item {
        float: left;
        margin: 1px 1px 1px 0px;
        padding: 0 5px;
        cursor: pointer;
        border: 1px solid #ECEFF2;
        height: 32px;
        line-height: 32px;
    }

    .drawing .item.active {
        background: #1592e6;
        color: #fff;
        border-color: #1592e6;
    }

    .drawtools {
        border: 1px solid #ccc;
        background: #fff;
    }

    .drawtools .icon-image {
        text-align: center;
        padding: 5px 0 5px 10px;
        height: 24px;
        position: relative;
    }

    .drawtools .icon-image>i:nth-of-type(1) {
        font-size: 24px;
    }

    .drawtools .icon-image.active>i:nth-of-type(1) {
        color: #0182d4;
    }

    .drawtools .icon-image .menuTwo {
        position: absolute;
        top: 0;
        right: 46px;
        border: 1px solid #ccc;
        background-color: #fff;
        display: none;
        text-align: right;
    }

    .drawtools .icon-image .menuTwo .menuTwoItem {
        height: 24px;
        line-height: 24px;
        width: 125px;
        font-size: 12px;
        padding: 5px 0;
        display: block;
        padding-right: 10px;
    }

    .drawtools .icon-image .menuTwo .menuTwoItem::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        clear: both;
        overflow: hidden;
    }

    .drawtools .icon-image .menuTwo .menuTwoItem>i {
        float: right;
        margin-left: 5px;
        font-size: 24px;
    }

    .drawtools .icon-image .menuTwo .menuTwoItem:hover {
        background-color: #ebf7fc;
    }

    .drawtools .icon-image .menuTwo .menuTwoItem.current {
        background-color: #37a6ef;
    }

    .drawtools .icon-image .contentArrow {
        font-size: 12px;
        position: absolute;
        top: 12px;
        left: 0;
        transition: transform 0.2s;
        display: none;
    }

    .drawtools .icon-image .contentArrow.trans {
        transform: rotate(180deg);
    }

    .drawtools .icon-image:last-child {
        border-top: 1px solid #ccc;
    }

    .chartpicture-text-setting {
        width: 400px;
        background-color: #fff;
        border: 1px solid;
        border-color: #b5b7b9;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15)
    }

    .titleWrap {
        height: 53px;
        line-height: 53px;
        width: 100%;
        border-bottom: 1px solid;
        border-color: #dadde0;
        position: relative;
    }

    .titleWrap .titleName {
        height: 53px;
        line-height: 53px;
        display: inline-block;
        padding: 0 2px;
        font-size: 14px;
        color: #4f5966;
        margin-left: 14px;
        position: relative;
    }

    .titleWrap .titleName::after {
        content: ' ';
        position: absolute;
        display: block;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 3px;
        background-color: #5cb888;
    }

    .titleWrap .closeBtn {
        font-size: 12px;
        color: #777;
        position: absolute;
        top: 0;
        right: 0;
        padding-right: 14px;
        padding-left: 14px;
        cursor: pointer;
    }

    .contentWrap {
        padding: 15px 27px;
    }

    .contentWrap .styleOptions {
        height: 27px;
        margin-bottom: 7px;
    }

    .contentWrap .styleOptions .colorPicker {
        width: 25px;
        height: 25px;
        cursor: pointer;
        display: inline-block;
        border: 1px solid;
        border-color: #1e90ff;
        background-color: #1e90ff;
        margin-right: 5px;
        position: relative;
    }

    .contentWrap .colorPicker #fontColor {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    .contentWrap .likeSelect {
        height: 25px;
        width: 50px;
        background-color: #f1f3f6;
        line-height: 25px;
        cursor: pointer;
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
        padding: 0 20px 0 10px;
        border: 1px solid;
        border-color: #dadde0;
        margin-right: 5px;
        position: relative;
    }

    .contentWrap .fontSelect {
        font-size: 12px;
    }

    .contentWrap .likeSelect .choicedText {
        display: inline-block;
        width: 78px;
        height: 100%;
        overflow: hidden;
    }

    /* .contentWrap .likeSelect select {position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 999; opacity: 0.5;}
    .contentWrap .likeSelect option {height: 30px; line-height: 30px;} */
    .contentWrap .likeSelect i {
        font-size: 15px;
        position: absolute;
        top: 0;
        right: 6px;
    }

    .contentWrap .likeSelect .selectList {
        position: absolute;
        top: 27px;
        left: 0;
        background-color: #fff;
        border: 1px solid #dadde0;
        display: none;
    }

    .contentWrap .selectList p {
        padding: 0 15px;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        white-space: nowrap;
    }

    .contentWrap .selectList p:hover {
        background-color: #f1f3f6;
    }

    .contentWrap .selectList p.active {
        background-color: #f1f3f6;
        border-left: 3px solid #5cb888;
    }

    .contentWrap .likeBtn {
        border: 1px solid;
        border-color: #dadde0;
        text-align: center;
        cursor: pointer;
        vertical-align: top;
        font-size: 16px;
        margin-right: 5px;
        color: #4a4a4a;
        display: inline-block;
        width: 25px;
        height: 25px;
        line-height: 25px;
        background-color: #f1f3f6;
    }

    .contentWrap .strongFont {
        font-weight: bold;
    }

    .contentWrap .italicsFont {
        font-style: italic;
    }

    .contentWrap .tArea {
        border: 1px solid #b5b7b9;
        background-color: #fff;
        resize: none;
        color: #4a4a4a;
        font-size: 12px;
        line-height: 18px;
        box-sizing: border-box;
        padding: 8px 5px;
        width: 100%;
        height: 200px;
    }

    .contentWrap .likeSelect:hover,
    .contentWrap .likeBtn:hover {
        border-color: #b5b7b9;
    }

    .contentWrap .likeSelect.hot,
    .contentWrap .likeBtn.hot {
        background-color: #fff;
    }

    .btnsContainer {
        text-align: right;
        padding: 0 13px 27px 13px;
    }

    .btnsContainer .btn {
        width: 72px;
        height: 24px;
        line-height: 24px;
        cursor: pointer;
        padding-top: 4px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        margin-right: 10px;
        display: inline-block;
    }

    .btnsContainer .okBtn {
        background-color: #3bb3e4;
    }

    .btnsContainer .okBtn:hover {
        background-color: #38acdb;
    }

    .btnsContainer .cancelBtn {
        background-color: #9ca0a6;
        margin-right: 0;
    }

    .btnsContainer .cancelBtn:hover {
        background-color: #898c91;
    }

    /*画图工具结束*/

    /*区间统计*/
    .jchart-select-statistics-box {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.01);
        display: none;
        z-index: 999;
    }

    .interval .top {
        padding-left: 10px;
        box-sizing: border-box;
        height: 40px;
        line-height: 40px;
        text-align: left;
        border-bottom: solid 1px #e1ecf2;
        font-size: 14px;
        color: #757d81;
    }

    .interval .top .closeBtn {
        float: right;
        margin-right: 15px;
        cursor: pointer;
        font-weight: 600;
    }

    .interval table {
        width: 100%;
        height: 170px;
    }

    .changColorR {
        border-right-color: #1295d9 !important;
    }

    .changColorL {
        border-left-color: #1295d9 !important;
    }

    .interval table .dateChange1 {
        /*padding :0px 3px;*/
        display: inline-block;
        cursor: pointer;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-right: 6px solid #c8d2db;
    }

    .interval table .dateChange2 {
        /*padding :0px 3px;*/
        display: inline-block;
        cursor: pointer;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-left: 6px solid #c8d2db;
    }

    .interval table tr td:nth-child(2),
    .interval table tr td:nth-child(4),
    .interval table tr td:nth-child(6) {
        font-weight: bold;
    }

    .interval table td {
        padding-left: 10px;
        border-bottom: 1px solid #ECEFF2;
    }

    .interval table td.name {
        text-align: right;
    }

    .interval table td:last-child {
        padding-right: 10px;
    }

    /*区间统计结束*/

    /*形态匹配*/
    .kLineMatch {
        position: absolute;
        z-index: 520;
        width: 300px;
        height: 600px;
        border: 1px solid #ECEFF2;
        background: #fff;
        display: none;
    }

    .kLineMatch .top {
        height: 30px;
        line-height: 30px;
        background: #ccc;
        text-align: center;
    }

    .kLineMatch .top .closeBtn {
        float: right;
        margin-right: 20px;
        cursor: pointer;
    }

    .kLineMatch .title {
        padding: 5px;
    }

    .kLineMatch .title .name {
        float: left;
        width: 70px;
        border-right: 1px solid #ccc;
    }

    .kLineMatch .title .time {
        float: left;
        width: 140px;
        padding-left: 5px;
        border-right: 1px solid #ccc;
    }

    .kLineMatch .title .similar {
        float: left;
        padding-left: 5px;
    }

    .kLineMatch .list {
        overflow-y: auto;
        height: 544px;
        width: 290px;
        padding: 5px 5px 0px 5px;
    }

    .kLineMatch .list .item .name {
        width: 70px;
        float: left;
        padding-bottom: 5px;
    }

    .kLineMatch .list .item .time {
        padding: 0px 0px 5px 5px;
        float: left;
        width: 140px;
    }

    .kLineMatch .list .item .similar {
        float: left;
        padding-left: 7px;
        padding-bottom: 5px;
    }

    /*形态匹配结束*/

    /*形态匹配结果列表 start*/
    .jchart-kline-match-box {
        font: 13px 'Microsoft Yahei';
    }

    .jchart-kline-match-box .matchTable {
        border-collapse: collapse;
        width: 100%;
    }

    .jchart-kline-match-box .matchTable td,
    .jchart-kline-match-box .matchTable th {
        line-height: 20px;
        border: 1px solid #ccc;
        padding: 0 10px;
    }

    .jchart-kline-match-box .matchTable td.red {
        color: red;
    }

    /*分页*/
    .pagination {
        height: 22px;
        text-align: center;
        margin-top: 10px;
    }

    .pagination span {
        display: inline-block;
        line-height: 20px;
        padding: 0 6px;
        border: 1px solid #ccc;
        margin-right: 6px;
        cursor: pointer;
    }

    .pagination span:hover,
    .pagination span.active {
        color: #ffb400;
    }

    /*形态匹配结果列表 end*/

    /*加载层*/
    .spinnerBg {
        background: #ccc;
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0.5;
        display: none;
    }

    .spinner {
        width: 50px;
        height: 60px;
        font-size: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        display: none;
    }

    .spinner>div {
        background-color: #39adce;
        height: 100%;
        width: 6px;
        display: inline-block;

        -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
        animation: stretchdelay 1.2s infinite ease-in-out;
    }

    .spinner .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .spinner .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .spinner .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .spinner .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

    @-webkit-keyframes stretchdelay {

        0%,
        40%,
        100% {
            -webkit-transform: scaleY(0.4)
        }

        20% {
            -webkit-transform: scaleY(1.0)
        }
    }

    @keyframes stretchdelay {

        0%,
        40%,
        100% {
            transform: scaleY(0.4);
            -webkit-transform: scaleY(0.4);
        }

        20% {
            transform: scaleY(1.0);
            -webkit-transform: scaleY(1.0);
        }
    }

    /*加载层结束*/

    .kline-info {
        position: absolute;
        /*opacity: 0.8;*/
        width: 16px;
        height: 16px;
        background-color: #fff;
        /*border: 2px solid #ff3232;*/
        color: #ff3232;
        text-align: center;
        cursor: pointer;
        font: bold 12px/1.4 arial;
    }

    .klineframe-toolbar {
        position: absolute;
        color: #fff;
        text-align: right;
        line-height: 24px;
        padding-right: 5px;
        box-sizing: border-box;
    }

    .klineframe-toolbar span:hover {
        color: #0182d4;
    }

    .klineframe-button {
        position: absolute;
        text-align: right;
        border: 1px solid #cccccc;
        padding: 2px;
    }

    /*.klineframe-button span:hover{*/
    /*color: #0182d4;*/
    /*}*/
    /*.klineframe-button span:active{*/
    /*color: #0182d4;*/
    /*}*/

    .icon-active {
        color: #0182d4;
    }

    .increase {
        margin-left: 3px;
        margin-right: 10px;
    }

    .rate-discount {
        font-weight: normal;
        margin-left: 90px;
    }

    .tipBoxTitle {
        display: inline-block;
        width: 130px;
    }

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

    /*参数设置面板*/
    .jchart-changeindex-box {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 999;
        background-color: rgba(0, 0, 0, 0.01);
    }

    .jchart-modifyindex-box {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 999;
        background-color: rgba(0, 0, 0, 0.01);
    }

    .jchart-kline-minute-box {
        position: absolute;
        display: none;
        width: 500px;
        height: 550px !important;
        padding: 0 5px 20px 10px;
        background-color: rgba(255, 255, 255, 0.95);
        border: solid 1px rgba(200, 210, 219, 0.92);
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
        z-index: 999;
    }

    .parameter {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        padding: 3px;
        box-sizing: border-box;
        width: 520px;
        height: 421px;
        background-color: rgba(255, 255, 255, 0.96);
        box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.55);
        border-radius: 2px;
        z-index: 999;
    }

    .parameter-header {
        position: relative;
        width: 100%;
        height: 42px;
        line-height: 42px;
        border-bottom: 1px solid #c8d2db;
    }

    .parameter-header span {
        font-family: 微软雅黑;
        font-size: 14px;
        margin-left: 10px;
    }

    .parameter-header strong {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 14px;
        font-weight: 300;
    }

    .parameter-content {
        padding: 20px;
        box-sizing: border-box;
    }

    .row-line {
        margin-right: 20px;
        margin-top: 10px;
        padding-left: 3px;
        box-sizing: border-box;
        width: 100px;
        height: 24px;
        line-height: 24px;
        border: 1px solid #cccccc;
    }

    #close {
        cursor: pointer;
    }

    .parameter1 {
        cursor: pointer;
    }

    .parameter-footer {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .parameter-footer button {
        margin-left: 15px;
        width: 78px;
        height: 28px;
        border: none;
        border-radius: 2px;
        color: #ffffff;
    }

    .submit {
        background-color: #0182d4;
    }

    .cancel {
        background-color: #c8d2db;
    }

    /*指数设置面板*/
    .target-box {
        position: absolute;
        display: none;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.01);
        z-index: 999;
    }

    .target-panel {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 800px;
        height: 500px;
        background-color: rgba(255, 255, 255, 0.96);
        box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.55);
        border-radius: 3px;
    }

    .target-header {
        position: relative;
        width: 100%;
        height: 42px;
        line-height: 42px;
        border-bottom: 1px solid #c8d2db;
    }

    .target-header span {
        font-family: 微软雅黑;
        font-size: 14px;
        margin-left: 10px;
    }

    .target-header strong {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 14px;
        font-weight: 300;
    }

    #close-tar {
        cursor: pointer;
    }

    .target-content {
        height: 100%;
    }

    .target-left {
        float: left;
        width: 200px;
        height: calc(100% - 43px);
        border-right: 1px solid #c8d2db;
    }

    .target-left input {
        margin-left: 10px;
        height: 40px;
        line-height: 40px;
        border: none;
        font-size: 14px;
    }

    .target-left ul {
        border-top: 1px solid #c8d2db;
        list-style: none;
        padding: 10px;
        box-sizing: border-box;
    }

    .target-left ul li {
        font-size: 13px;
        line-height: 30px;
        color: #757d81;
        cursor: pointer;
    }

    .active-list {
        color: #1295d9 !important;
    }

    .target-right {
        float: left;
        width: 595px;
    }

    .target-right ul {
        width: 590px;
        max-height: 450px;
        overflow: auto;
        padding-top: 10px;
        padding-left: 20px;
        box-sizing: border-box;
    }

    .target-right ul li {
        display: inline-block;
        margin-top: 5px;
        margin-left: 10px;
        list-style: none;
        width: 175px;
        line-height: 30px;
        text-align: left;
        float: left;
        cursor: pointer;
    }

    /*分钟走势图*/
    .minute-dialog-title {
        position: relative;
        margin-bottom: 10px;
        height: 36px;
        line-height: 36px;
        width: 100%;
        border-bottom: 1px solid #ccc;
    }

    .minute-dialog-title span {
        margin-left: 5px;
    }

    .minute-dialog-title strong {
        position: absolute;
        right: 5px;
        top: 0;
        font-weight: 300;
        font-size: 12px;
    }

    .minute-dialog-title strong:hover,
    .parameter-header strong:hover {
        color: #0182d4;
    }

    /*tooltip的外层样式*/
    .jschart-tooltip {
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
        border: solid 1px rgba(200, 210, 219, 0.92);
        padding: 7px 20px 15px 13px;
        box-sizing: border-box;
        position: relative;
        display: none;
        z-index: 9;
        user-select: none;
    }

    /*tooltip的内层样式*/
    .tooltip-title {
        color: #2b3645;
        font-family: 微软雅黑;
        font-size: 12px;
        text-align: center;
        display: block;
        line-height: 24px;
    }

    .tooltip-con {
        color: #2b3645;
        font-family: 微软雅黑;
        font-size: 12px;
        line-height: 24px;
    }

    .tooltip-num {
        font-family: 微软雅黑;
        font-size: 12px;
        line-height: 24px;
        text-align: right;
        display: inline-block;
        width: 90px;
    }


    /*区间选择*/
    .jschart-selectrect {
        border: dashed 1px #0f248de0;
        display: none;
    }

    /*提示详情*/
    .jchart-klineinfo-tooltip {
        position: absolute;
        z-index: 10;
        max-height: 270px;
        line-height: 28px;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
        border: solid 1px rgba(200, 210, 219, 0.92);
        padding: 15px;
        background: rgba(255, 255, 255, 0.92);
        box-sizing: border-box;
        display: none;
        user-select: none;
    }

    .total-list {
        color: #f39800;
    }

    .jchart-klineinfo-tooltip span {
        display: block;
        /* width:100%; */
        /* overflow: hidden; */
        /* white-space: nowrap; */
        /* text-overflow: ellipsis; */
        vertical-align: bottom;
    }

    .title-length {
        max-height: 220px;
        overflow: hidden;
    }

    .close-munite {
        cursor: pointer;
    }

    /*交易指标提示信息*/
    .jchart-klinetrade-tooltip {
        position: absolute;
        z-index: 10;
        max-height: 270px;
        line-height: 28px;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
        border: solid 1px rgba(200, 210, 219, 0.92);
        padding: 7px;
        background: rgba(255, 255, 255, 0.92);
        box-sizing: border-box;
        display: none;
    }

    /*分时图异动信息*/
    .jchart-minuteinfo-tooltip {
        position: absolute;
        z-index: 10;
        max-height: 270px;
        line-height: 28px;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
        border: solid 1px rgba(200, 210, 219, 0.92);
        padding: 7px;
        background: rgba(255, 255, 255, 0.92);
        box-sizing: border-box;
        display: none;
    }

    /*图标提示信息*/
    .jchart-iconinfo-tooltip {
        position: absolute;
        z-index: 10;
        max-height: 270px;
        line-height: 28px;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
        border: solid 1px rgba(200, 210, 219, 0.92);
        padding: 7px;
        background: rgba(255, 255, 255, 0.92);
        box-sizing: border-box;
        display: none;
    }

    /*ox图提示信息*/
    .jchart-chartox-tooltip {
        position: absolute;
        z-index: 10;
        max-height: 270px;
        line-height: 28px;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
        border: solid 1px rgba(200, 210, 219, 0.92);
        padding: 7px;
        background: rgba(255, 255, 255, 0.92);
        box-sizing: border-box;
        display: none;
    }

    /*散点图提示信息*/
    .jchart-charscatterplot-tooltip {
        position: absolute;
        z-index: 10;
        max-height: 270px;
        line-height: 28px;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
        border: solid 1px rgba(200, 210, 219, 0.92);
        padding: 7px;
        background: rgba(255, 255, 255, 0.92);
        box-sizing: border-box;
        display: none;
    }

    /*ChartDrawSVG提示信息*/
    .jchart-chartdrawsvg-tooltip {
        position: absolute;
        z-index: 10;
        max-height: 270px;
        line-height: 28px;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);
        border: solid 1px rgba(200, 210, 219, 0.92);
        padding: 7px;
        background: rgba(255, 255, 255, 0.92);
        box-sizing: border-box;
        display: none;

        /*禁止文字选中*/
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }


    /*龙虎榜*/
    .trade-detall {
        margin-left: 80px;
    }

    .reason-list {
        display: inline-block;
        width: 200px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        vertical-align: bottom;
    }

    .trade-time {
        vertical-align: top;
    }

    /*业绩预告*/
    .prorecast-week {
        margin-left: 70px;
    }

    /*=======区间选择弹出框=========*/
    .jchart-select-section {
        height: 340px;
    }

    .jchart-select-table-right .jchart-select-date {
        width: 100%;
        margin-bottom: 5px;
    }

    .jchart-select-date span {
        display: inline-block;
        width: 32%;
        padding-left: 10px;
        box-sizing: border-box;
        font-size: 13px;
    }

    .jchart-select-date span i {
        display: inline-block;
        width: 12px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #dddddd;
        background-color: #f5f5f5;
        cursor: pointer;
    }

    .start-date-left,
    .end-date-left {
        margin: 0 2px 0 5px;
    }

    .jchart-select-table-right>table {
        width: 100%;
        border-collapse: collapse;
    }

    .jchart-select-table-right>table,
    .jchart-select-table-right>table tr,
    .jchart-select-table-right>table td {
        border: 1px solid #dddddd;
    }

    .jchart-select-table-right td {
        padding-left: 10px;
        box-sizing: border-box;
        width: 32%;
        height: 40px;
        vertical-align: center;
    }

    .jchart-select-table-right>table td span {
        margin-left: 20px;
    }

    .jchart-select-table-right>table td strong {
        display: inline-block;
        width: 50px;
        font-weight: normal;
    }

    /*设置涨跌颜色*/
    .PriceUp {
        color: #ee1515 !important;
    }

    .PriceDown {
        color: #199e00 !important;
    }

    .PriceNull {
        color: black;
    }

    /*按钮背景色*/
    .BtnBackground {
        background-color: #ffffff !important;
        color: #eeeeee;
    }

    /*K线右上角图标*/
    .icon-image {
        cursor: pointer;
    }

    .icon-image img {
        /*margin-top: 12px;*/
        padding: 10px 8px;
        display: block;
        width: 22px;
        height: 22px;
        border-left: 1px solid #cccccc;
        border-right: 1px solid #cccccc;
    }

    .icon-image:first-child img {
        border-top: 1px solid #cccccc;
    }

    .icon-image:last-child img {
        border-bottom: 1px solid #cccccc;
    }

    /*K线子图标*/
    .subTolls {
        padding: 8px 5px 0px 8px;
        border: 1px solid #aaaaaa;
        background-color: #fff;
        height: 26px;
    }

    .subTolls::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        clear: both;
    }

    .subTolls>* {
        margin: 0 3px;
        cursor: pointer;
        display: block;
        width: 20px;
        height: 20px;
        float: left;
    }

    .subTolls>.subtool-set {
        vertical-align: top;
    }

    .change-color {
        width: 24px;
        height: 3px;
        outline: none;
        border: 0;
        position: relative;
    }

    .changes-color {
        position: relative;
    }

    .change-image {
        margin-left: 3px;
        margin-bottom: 2px;
        display: inline-block;
        width: 16px;
        height: 13px;
    }

    .changes-color input {
        position: absolute;
        left: 0;
        bottom: 0;
    }

    input[type="color"] {
        border: 0;
        padding: 0;
        cursor: pointer;
    }

    ::-webkit-color-swatch-wrapper {
        background-color: #ffffff;
    }

    ::-webkit-color-swatch {
        height: 4px;
        width: 25px;
        position: relative;
        left: 0;
        top: -5px;
        border: 0;
    }

    .subtool-del {
        position: relative;
    }
}