
.chartViewer_header, .chartViewer_footer {
    background: #FFFFFF;
    padding: 8px;
    white-space: nowrap;
}

    .chartViewer_header div {
    }

    .chartViewer_footer table {
        border: none;
        border-collapse: collapse;
    }

    .chartViewer_footer td {
    }

        .chartViewer_footer td:nth-child(2n) {
            text-align: left;
            padding-right: 8px;
        }

        .chartViewer_footer td:nth-child(2n+1) {
            text-align: right;
        }
        .chartViewer_footer tr:nth-child(1) td:nth-child(2n) {
            text-align: right;
            padding-right: 1px;
        }

        .chartViewer_footer tr:nth-child(1) td:nth-child(2n+1) {
            text-align: left;
            padding-right: 8px;
        }

.chartViewer_body {
    background: #FFFFFF;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
}

    .chartViewer_body > div {
        position: relative;
    }

        .chartViewer_body > div > div {
            position: absolute;
            display: flex;
        }

        .chartViewer_body > div > .div_chart_number {
            display: flex;
            align-items: center;
            justify-content: center;
            top: 0px;
            left: 0px;
            text-align: center;
        }

        .chartViewer_body > div > div > .div_chart_line {
            display: block;
            position: absolute;
            height: 1px;
            top: calc(50% - 0.5px);
            z-index: 1;
        }

        .chartViewer_body > div > div > .div_chart_line_top {
            border-style: solid;
            border-width: 1px 0px;
            top: calc(50% - 1.5px);
        }

        .chartViewer_body > div > .div_bpm_line {
            display: block;
            position: absolute;
            height: 1px;
            top: calc(50% - 0.5px);
            z-index: 2;
        }

            .chartViewer_body > div > .div_bpm_line > .div_bpm_text {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                text-align: center;
            }

            .chartViewer_body > div > .div_bpm_line > .div_bpm_before {
                content: "";
                display: block;
                position: absolute;
                top: calc(50% - 2.5px);
                z-index: 2;
                clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
            }

            .chartViewer_body > div > .div_bpm_line > .div_bpm_right {
                content: "";
                display: block;
                position: absolute;
                top: calc(50% - 2.5px);
                z-index: 2;
            }

            .chartViewer_body > div > .div_bpm_line > .div_bpm_right_start {
                clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
            }

            .chartViewer_body > div > .div_bpm_line > .div_bpm_right_up {
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            }

            .chartViewer_body > div > .div_bpm_line > .div_bpm_right_down {
                clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
            }

        .chartViewer_body > div > .div_stop_line {
            display: block;
            position: absolute;
            height: 1px;
            top: calc(50% - 0.5px);
            z-index: 2;
        }

            .chartViewer_body > div > .div_stop_line > .div_stop_time {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                text-align: center;
            }

            .chartViewer_body > div > .div_stop_line > .div_stop_before {
                content: "";
                display: block;
                position: absolute;
                top: calc(50% - 2.5px);
                z-index: 2;
            }

            .chartViewer_body > div > .div_stop_line > .div_stop_after {
                content: "";
                display: block;
                position: absolute;
                top: calc(50% - 2.5px);
                z-index: 2;
            }


        .chartViewer_body > div > div > div {
            position: absolute;
        }

        .chartViewer_body > div > div > .div_background1,
        .chartViewer_body > div > div > .div_background2 {
            position: absolute;
        }

        .chartViewer_body > div > div > div > div {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 3;
        }

        .chartViewer_body > div > div > div > .div_arrow_SA_back {
            border-width: 1px 0px;
            border-style: solid;
        }

        .chartViewer_body > div > div > div > .div_arrow_color {
            z-index: 4;
            clip-path: polygon(45% 5%, 55% 5%, 95% 49%, 86% 55%, 56% 20%, 56% 95%, 44% 95%, 44% 20%, 14% 55%, 5% 49%);
        }

        .chartViewer_body > div > div > div > .div_arrow_line {
            z-index: 4;
            clip-path: polygon(45% 0%, 55% 0%, 100% 50%, 85% 60%, 60% 30%, 60% 100%, 40% 100%, 40% 30%, 15% 60%, 0% 50%);
        }

        .chartViewer_body > div > div > div > .div_arrow_FA_mid_color {
            top: -0.5px;
            clip-path: polygon(95% 0%, 95% 100%, 5% 100%, 5% 0%);
        }

        .chartViewer_body > div > div > div > .div_arrow_FA_mid_line {
            top: -0.5px;
            clip-path: polygon(0% 0%, 5% 0%, 50% 50%, 95% 0%, 100% 0%, 100% 100%, 95% 100%, 50% 50%, 5% 100%, 0% 100%);
        }

        .chartViewer_body > div > div > div > .div_arrow_FA_start_color_up {
            clip-path: polygon(45% 5%, 55% 5%, 95% 49%, 95% 100%, 5% 100%, 5% 49%);
        }

        .chartViewer_body > div > div > div > .div_arrow_FA_start_line_up {
            clip-path: polygon(100% 50%, 100% 100%, 0% 100%, 0% 50%);
        }

        .chartViewer_body > div > div > div > .div_arrow_FA_start_color_down {
            clip-path: polygon(95% 50%, 95% 100%, 5% 100%, 5% 50%, 55% 90%, 45% 90%);
        }

        .chartViewer_body > div > div > div > .div_arrow_FA_start_line_down {
            clip-path: polygon(100% 50%, 100% 100%, 0% 100%, 0% 50%, 55% 100%, 45% 100%);
        }

        .chartViewer_body > div > div > div > .div_arrow_FA_start_color_lr {
            clip-path: polygon(95% 55%, 95% 100%, 5% 100%, 5% 55%);
        }

        .chartViewer_body > div > div > div > .div_arrow_FA_start_line_lr {
            clip-path: polygon(100% 55%, 100% 100%, 0% 100%, 0% 55%);
        }

        .chartViewer_body > div > div > div > .div_arrow_FA_end_color {
            top: -0.5px;
            clip-path: polygon(5% 0%, 95% 0%, 95% 50%, 55% 95%, 45% 95%, 5% 50%);
        }

        .chartViewer_body > div > div > div > .div_arrow_FA_end_line {
            top: -0.5px;
            clip-path: polygon(0% 0%, 5% 0%, 50% 50%, 95% 0%, 100% 0%, 100% 50%, 55% 100%, 45% 100%, 0% 50%);
        }
