/*   Brightics 2.0 Chart Build 190718 */
.bcharts-adonis {
    display: flex;
}

.bcharts-adonis-display-flex {
    display: flex;
}

.bcharts-adonis-flex-1-1-auto {
    flex: 1 1 auto;
}

.bcharts-adonis-flex-direction-column {
    flex-direction: column;
}

.bcharts-adonis .jqx-tabs, .bo-container .jqx-tabs {
    border: none;
}

.bcharts-adonis .jqx-tabs-headerWrapper, .bo-container .jqx-tabs-headerWrapper  {
    border: none;
}

.bcharts-adonis li.jqx-tabs-title, .bo-container li.jqx-tabs-title{
    border: 1px solid #DBDDE2;
    padding-bottom: 7px;
    margin-right: 0;
    width: 76px;
}

.bcharts-adonis li.jqx-tabs-title-selected-top, .bo-container li.jqx-tabs-title-selected-top {
    border-top: 2px solid #6C79E9;
    color: rgba(0, 0, 0, 0.8);
    background-color: #FFFFFF;
    padding-bottom: 6px;
    border-bottom: 1px solid #FFF;
}

.bcharts-adonis-left {
    width: 260px;
    height: 100%;
    box-sizing: border-box;
    border: solid 1px #DBDDE2;
    background: #f7f7f7;
    margin-right: 8px;
}

.bcharts-adonis-center {
    flex: 1;
    width: calc(100% - 560px);
    height: 100%;
    box-sizing: border-box;
}

.bcharts-adonis-right {
    width: 300px;
    height: 100%;
    box-sizing: border-box;
    border: solid 1px #DBDDE2;
    background: #f7f7f7;
    margin-left: 8px;
}

.bcharts-adonis-viewpart {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.bcharts-adonis-viewpart-header {
    height: 54px;
    box-sizing: border-box;
    line-height: 54px;
    text-align: center;
    font-weight: bold;
}

.bcharts-adonis-viewpart::before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #DBDDE2;
    z-index: 1;
}

.bcharts-adonis-viewpart-contents {
    height: calc(100% - 54px);
    position: relative;
}

.bcharts-adonis-viewpart-contents.chart-option {
    border-bottom: solid 1px #DBDDE2;
}

.brtc-adonis-fill-state-hover {
    background-color: #d9bce6;
    border-color: #9d7ee6;
}

/*chart type*/

.bcharts-adonis-chart-selector {
    padding-left: 30px;
    box-sizing: border-box;
    line-height: 30px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.bcharts-adonis-chart-selector.bcharts-non-editable {
    background-image: none;
    pointer-events: none;
}

.bcharts-adonis-chart-selector::before {
    content: '';
    width: 30px;
    height: 30px;
    background-image: url('images/bcharts.png');
    background-position-y: -30px;
    position: absolute;
    top: 0;
    left: 0;
}

.bcharts-adonis-chart-selector[chart="scatter"]::before {
    background-position-x: -60px;
}

.bcharts-adonis-chart-selector[chart="line"]::before {
    background-position-x: -90px;
}

.bcharts-adonis-chart-selector[chart="column"]::before {
    background-position-x: -120px;
}

.bcharts-adonis-chart-selector[chart="column-stacked"]::before {
    background-position-x: -150px;
}

.bcharts-adonis-chart-selector[chart="column-stacked-100"]::before {
    background-position-x: -180px;
}

.bcharts-adonis-chart-selector[chart="bar"]::before {
    background-position-x: -210px;
}

.bcharts-adonis-chart-selector[chart="bar-stacked"]::before {
    background-position-x: -240px;
}

.bcharts-adonis-chart-selector[chart="bar-stacked-100"]::before {
    background-position-x: -270px;
}

.bcharts-adonis-chart-selector[chart="area"]::before {
    background-position-x: -300px;
}

.bcharts-adonis-chart-selector[chart="area-stacked"]::before {
    background-position-x: -330px;
}

.bcharts-adonis-chart-selector[chart="area-stacked-100"]::before {
    background-position-x: -360px;
}

.bcharts-adonis-chart-selector[chart="boxplot"]::before {
    background-position-x: -390px;
}

.bcharts-adonis-chart-selector[chart="heatmap"]::before {
    background-position-x: -420px;
}

.bcharts-adonis-chart-selector[chart="pie"]::before {
    background-position-x: -450px;
}

.bcharts-adonis-chart-selector[chart="network"]::before {
    background-position-x: -480px;
}

.bcharts-adonis-chart-selector[chart="treemap"]::before {
    background-position-x: -510px;
}

.bcharts-adonis-chart-selector[chart="decisionTree"]::before {
    background-position-x: -540px;
}

.bcharts-adonis-chart-selector[chart="decisionTreeForBrightics"]::before {
    background-position-x: -540px;
}

.bcharts-adonis-chart-selector[chart="table"]::before {
    background-position-x: -570px;
}

.bcharts-adonis-chart-selector[chart="mcc"]::before {
    background-position-x: -600px;
}

.bcharts-adonis-chart-selector[chart="dendrogram"]::before {
    background-position-x: -630px;
}

.bcharts-adonis-chart-selector[chart="roccurve"]::before {
    background-position-x: -660px;
}

.bcharts-adonis-chart-selector[chart="correlation-matrix"]::before {
    background-position-x: -690px;
}

.bcharts-adonis-chart-selector[chart="map"]::before {
    background-position-x: -720px;
}

.bcharts-adonis-chart-selector[chart="biplot"]::before {
    background-position-x: -750px;
}

.bcharts-adonis-chart-selector[chart="pos-neg-bar"]::before {
    background-position-x: -780px;
}

.bcharts-adonis-chart-selector[chart="radar"]::before {
    background-position-x: -810px;
}

.bcharts-adonis-chart-selector[chart="wordcloud"]::before {
    background-position-x: -840px;
}

.bcharts-adonis-chart-selector[chart="complex"]::before {
    background-position-x: -870px;
}

.bcharts-adonis-chart-selector[chart="histogram"]::before  {
    background-position-x: -900px;
}

.bcharts-adonis-chart-selector[chart="bubble"]::before  {
    background-position-x: -930px;
}

.bcharts-adonis-chart-selector[chart="heatmap-matrix"]::before  {
    background-position-x: -960px;
}

.bcharts-adonis-chart-selector[chart="qqplot"]::before  {
    background-position-x: -990px;
}

.bcharts-adonis-chart-selector[chart="pairwise-scatter"]::before  {
    background-position-x: -1020px;
}

.bcharts-adonis-chart-selector[chart="card"]::before  {
    background-position-x: -1050px;
}

.bcharts-adonis-chart-selector[chart="donut"]::before  {
    background-position-x: -1080px;
}

.bcharts-adonis-chart-selector[chart="image-grid"]::before  {
    background-position-x: -1110px;
}

.selected .bcharts-adonis-chart-selector::before {
    background-position-y: -60px;
}

.bcharts-adonis-chart-selector-16 {
    padding: 0 2px 0 18px;
    box-sizing: border-box;
    line-height: 16px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.bcharts-adonis-chart-selector-16::before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url('images/bcharts.png');
    background-position-y: -238px;
    position: absolute;
    top: 0;
    left: 0;
}

.bcharts-adonis-chart-selector-16[chart="column"]::before {
    background-position-x: -60px;
}

.bcharts-adonis-chart-selector-16[chart="bar"]::before {
    background-position-x: -76px;
}

.bcharts-adonis-chart-selector-16[chart="line"]::before {
    background-position-x: -92px;
}

.bcharts-adonis-chart-selector-16[chart="boxplot"]::before {
    background-position-x: -108px;
}

.bcharts-adonis-chart-selector-16[chart="scatter"]::before {
    background-position-x: -124px;
}

.bcharts-adonis-chart-selector-16[chart="pie"]::before {
    background-position-x: -140px;
}

.bcharts-adonis-chart-selector-16[chart="table"]::before {
    background-position-x: -156px;
}

.bcharts-adonis-chart-selector-16[chart="treemap"]::before {
    background-position-x: -172px;
}

.bcharts-adonis-chart-selector-16[chart="network"]::before {
    background-position-x: -188px;
}

.bcharts-adonis-chart-selector-16[chart="decisionTree"]::before {
    background-position-x: -204px;
}

.bcharts-adonis-chart-selector-16[chart="decisionTreeForBrightics"]::before {
    background-position-x: -204px;
}

.bcharts-adonis-chart-selector-16[chart="dendrogram"]::before {
    background-position-x: -220px;
}

/*FIXME: correlation matrix img ->heatmap image*/
.bcharts-adonis-chart-selector-16[chart="heatmap"]::before {
    background-position-x: -236px;
}

.bcharts-adonis-chart-selector-16[chart="mcc"]::before {
    background-position-x: -252px;
}

.bcharts-adonis-chart-selector-16[chart="roccurve"]::before {
    background-position-x: -268px;
}

.bcharts-adonis-chart-selector-16[chart="map"]::before {
    background-position-x: -284px;
}

.bcharts-adonis-chart-selector-16[chart="biplot"]::before {
    background-position-x: -300px;
}

.bcharts-adonis-chart-selector-16[chart="pos-neg-bar"]::before {
    background-position-x: -316px;
}

.bcharts-adonis-chart-selector-16[chart="bar-stacked"]::before {
    background-position-x: -332px;
}

.bcharts-adonis-chart-selector-16[chart="bar-stacked-100"]::before {
    background-position-x: -348px;
}

.bcharts-adonis-chart-selector-16[chart="column-stacked"]::before {
    background-position-x: -364px;
}

.bcharts-adonis-chart-selector-16[chart="column-stacked-100"]::before {
    background-position-x: -380px;
}

.bcharts-adonis-chart-selector-16[chart="area"]::before {
    background-position-x: -396px;
}

.bcharts-adonis-chart-selector-16[chart="area-stacked"]::before {
    background-position-x: -412px;
}

.bcharts-adonis-chart-selector-16[chart="area-stacked-100"]::before {
    background-position-x: -428px;
}

.bcharts-adonis-chart-selector-16[chart="radar"]::before {
    background-position-x: -444px;
}

.bcharts-adonis-chart-selector-16[chart="wordcloud"]::before {
    background-position-x: -460px;
}

.bcharts-adonis-chart-selector-16[chart="complex"]::before {
    background-position-x: -476px;
}

.bcharts-adonis-chart-selector-16[chart="histogram"]::before {
    background-position-x: -492px;
}

.bcharts-adonis-chart-selector-16[chart="bubble"]::before {
    background-position-x: -508px;
}

.bcharts-adonis-chart-selector-16[chart="heatmap-matrix"]::before {
    background-position-x: -524px;
}

.bcharts-adonis-chart-selector-16[chart="qqplot"]::before {
    background-position-x: -540px;
}

.bcharts-adonis-chart-selector-16[chart="pairwise-scatter"]::before {
    background-position-x: -556px;
}

.bcharts-adonis-chart-selector-16[chart="card"]::before {
    background-position-x: -572px;
}

.bcharts-adonis-chart-selector-16[chart="donut"]::before {
    background-position-x: -588px;
}

.bcharts-adonis-chart-selector-16[chart="image-grid"]::before {
    background-position-x: -604px;
}

.bos-col-1 {
    width: 8.33333333%;
}

.bos-col-2 {
    width: 16.66666667%;
}

.bos-col-3 {
    width: 25%;
}

.bos-col-4 {
    width: 33.33333333%;
}

.bos-col-5 {
    width: 41.66666667%;
}

.bos-col-6 {
    width: 50%;
}

.bos-col-7 {
    width: 58.33333333%;
}

.bos-col-8 {
    width: 66.66666667%;
}

.bos-col-9 {
    width: 75%;
}

.bos-col-10 {
    width: 83.33333333%;
}

.bos-col-11 {
    width: 91.66666667%;
}

.bos-col-12 {
    width: 100%;
}

.bos-full {
    width: 100%;
    height: 100%;
}

.bos-relative-full {
    width: 100%;
    height: 100%;
    position: relative;
}

.bos-col-50px {
    width: 50px;
}

.bos-display-flex {
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bos-display-flex-center {
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.bos-flex-direction-column {
    flex-direction: column;
}

.bos-flex-space-between {
    justify-content: space-between;
}

.bos-flex-space-evenly {
    justify-content: space-evenly;
}

.bos-flex-center {
    justify-content: center;
}

.bos-flex-align-center {
    align-items: center;
}

.bos-flex-wrap {
    flex-wrap: wrap;
}

.bos-flex-1 {
    flex: 1;
}

.bos-flex-2 {
    flex: 2;
}

.bos-flex-3 {
    flex: 3;
}

.bos-flex-4 {
    flex: 4;
}

.bos-display-flex .bos-widget-header {
    width: 70px;
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*justify-content: center;*/
    align-items: center;
}

.bos-display-flex .bos-widget-header.half {
    width: 35px;
}

.bos-text-overflow-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*white-space: normal;*/
    /*display: -webkit-box;*/
    /*-webkit-line-clamp: 1;*/
    /*-webkit-box-orient: vertical;*/
}

.bos-complex-tab {
    overflow: hidden;
    padding: 0px 5px 5px 5px;
}

.bos-flex-direction-column .bos-widget-header,
.bos-widget-contents {
    flex-grow: 1;
    padding: 2.5px 0;
}

.bos-border-only-bottom {
    border-top: 0px !important;
    border-right: 0px !important;
    border-left: 0px !important;
}

.bos-text-blur {
    color: rgba(0, 0, 0, 0.6);
}

.bos-simple-square {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.bos-simple-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.bos-slash {
    /*border-top:4px solid #ff00ff;*/
    height: 10px;
    margin-left: -7px;
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    background: transparent;
}

/*widget css START*/

.bos-widget-label {
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
}

.bos-widget-inputbox {
    font-size: 13px;
    box-sizing: border-box;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    padding-right: 10px;
    padding-left: 10px;
    border-width: 1px;
    border-style: solid;
}

.bos-widget-line-inputbox {
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
}

.bos-widget-button {
    padding: 5px 0;
    text-align: center;
    box-sizing: border-box;
    background-color: #ffffff;
    border: solid 1px #d9d9d9;
    color: #656eea;
    cursor: pointer;
}

.bos-widget-button-disable {
    cursor: default;
    pointer-events: none;
    color: rgba(0, 0, 0, 0.8);
}

.bos-widget-button:hover {
    background-color: #656eea;
    color: #ffffff;
}

.bos-widget-except-right-button-area {
    width: calc(100% - 30px);
}

.bos-widget-right-button-area {
    /*position: absolute;*/
    /*right: 0px;*/
    display: inline-block;
    cursor: pointer;
    width: 30px;
    height: 100%;
    color: rgba(0, 0, 0, 0.8);
    background-image: url('images/icon-down-17.png');
    background-repeat: no-repeat;
    background-position: center;
}

.bos-widget-right-button-area.border {
    border-left: 1px solid #d9d9d9;
}

.bos-widget-chart-selector-readonly .bos-widget-right-button-area.border {
    border-left: initial;
    background-image: initial;
}

/*.bos-widget-right-button-area:hover {*/
/*background-color: #d4d4d4;*/
/*}*/

.bos-position-relative {
    position: relative;
}

.bos-border-none {
    border: none;
}

.bos-border-color-red {
    border-color: rgba(194, 6, 17, .65) !important;
    border: 1px solid;
}

.bos-border-color-blue {
    border-color: rgba(98, 111, 219, 1.0) !important;
    border: 1px solid;
}

.bos-dialogs-header {
    font-family: Arial, helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;

    width: calc(100% - 20px) !important;
    margin-left: 10px;
    padding: 10px 0 5px 0;

    border-color: #d9d9d9;
    background-color: #fff;
}

.bos-dialogs-header .jqx-window-close-button {
    position: absolute;
    right: 0;
    top: 0 !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url(images/tool-close-18.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.bos-dialogs-body {
    font-family: Arial, helvetica, sans-serif;
    width: 100%;
    height: 100%;
    position: relative;
}

.bos-font-bold {
    font-weight: bold;
}

.bos-color-picker-control {
    padding-left: 15px;
    padding-top: 5px;
}

.bos-plus-circle-17 {
    background: url(images/plus-circle-17.png) no-repeat;
    background-position: 0 0;
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.bos-remove-circle-17 {
    position: absolute;
    float: right;
    display: none;
    width: 17px;
    height: 17px;
    background: url(images/icon_property.png) no-repeat;
    background-color: white !important;
    background-position: -37px 0;
    border-radius: 50%;
    right: 5px;
    top: 9px;
}

.bos-margin-left-5 {
    margin-left: 5px;
}

.bos-widget-column-contents {
    width: calc(100% - 70px);
}

.bos-widget-column-unit {
    font-family: Arial, helvetica, sans-serif;
    font-size: 11px;
    position: relative;
    float: left;
    align-items: center;
    display: flex;
    flex: 1;
    line-height: 34px;
    height: 100%;

    background-color: white;

    border: 1px solid #CCCCCC;
    border-radius: 17.5px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
}

.bos-widget-column-unit:hover .bos-remove-circle-17 {
    display: block;
}

.bos-remove-circle-17:hover {
    background-position: -37px -27px;
}

.bos-plus-circle-17:hover {
    background-position: -17px 0;
}

.bos-widget-column-unit-wrapper {
    flex-grow: 1;
    position: relative;
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    align-items: center;
    height: 35px;
    margin: 2px 0;
}

.bos-widget-column-unit-label,
.bos-widget-datasource-unit-label {
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 20px 0 8px;

}

.bos-column-unit-type {
    min-width: 65px;
    width: 65px;
    height: 100%;
    box-sizing: border-box;
    background-color: #E6E9FF;
    color: #454758;
    font-size: 12px;
    font-family: Arial;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bos-widget-disable {
    background-color: rgb(247, 247, 247);
    border-color: rgb(212, 212, 212);
}

.bos-widget-disable .bos-widget-right-button-area {
    color: rgba(0, 0, 0, 0.5);
}

.bos-widget-disable-cover {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
}

.bos-widget-button-group-container {
    margin: 3px 0 3px 1px;
}

.bos-widget-button-group-container .jqx-button {
    height: 30px;
    background-color: #ffffff;
}

.bos-widget-button-group-container .jqx-button:not(:first-child) {
    border-left: none;
    margin-left: 0 !important;
}

.bos-widget-button-group-container .jqx-button.jqx-fill-state-pressed-office {
    background-color: #8290FF;
    border-color: #d9d9d9;
    color: #ffffff;
}

.bos-aggregation-list-box {
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    flex-direction: column;
    flex: 1;
}

.bos-widget-chart-selector,
.bos-widget-item-selector {
    box-sizing: border-box;
    border: 1px solid #d9d9d9;
    /*border-radius: 4px;*/
    padding-left: 4px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    height: 30px;
    cursor: pointer;
    position: relative;
}

.bo-control-container-contents .bos-widget-chart-selector {
    max-width: calc(100% - 70px);
}

.bos-widget-chart-selector.bos-widget-chart-selector-readonly,
.bos-widget-chart-selector.bos-widget-chart-selector-readonly .list,
.bos-widget-chart-selector.bos-widget-chart-selector-readonly .bos-widget-right-button-area {
    cursor: default;
}

.bos-widget-item-selector {
    height: 35px;
    border-radius: 17.5px;
    padding: 3px 0;
    margin: 2px 0;
}

.bos-item-selected {
    padding-left: 14px;
    font-size: 11px;
}

.bos-item-selected.placeholder {
    padding-left: 9px;
    color: rgba(0, 0, 0, .7);
}

.bos-aggregation-list-box[selectable=false] {
    background-color: rgba(0, 0, 0, .07);
    pointer-events: none;
}

.bos-widget-column-selector-container {
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    flex-direction: column;
    flex: 1;
    max-width: 270px;
    margin: 3px 10px 0px 10px;
    position: relative;
}

.bos-widget-column-selector-list {
    width: 100%;
    position: relative;
}

.bos-dialog-column-item-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 25px;
    cursor: pointer;
    margin-right: 10px;
    overflow: hidden;
}

.bos-dialog-column-item-type {
    width: 70px;
    min-width: 70px;
    height: 21px;
    box-sizing: border-box;
    margin-top: 2px;
    margin-left: 2px;
    border-radius: 9.5px;
    background-color: #e6e9ff;
    border: solid 1px #bdc0d6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    text-align: center;
}

.bos-dialog-column-item-type.bos-dialog-column-item-type-schema  {
    background-color: #828282;
    color: #ffffff;
}

.bos-dialog-column-item-wrapper.selected {
    background-color: #8190ff;
}

.bos-dialog-column-item-label {
    font-size: 12px;
    padding-left: 10px;
}

.bos-dialog-column-item-label.has-type {
    max-width: calc(100% - 80px);
}

.selected .bos-dialog-column-item-label {
    color: #ffffff;
}

.bos-aggregation-list-box .bos-dialog-column-item-wrapper {
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-size: 12px;
}

.bos-aggregation-list-box .bos-dialog-column-item-wrapper.selected {
    color: #ffffff;

}

.bos-dialog-filter-container {
    box-sizing: border-box;
    width: 100%;
    padding: 5px 10px 5px 10px;
}

input[type=search].jqx-input-office {
    padding-right: 30px;
    background: url(images/search-28.png) no-repeat;
    background-position: center right;
    font-size: 13px;
    box-sizing: border-box;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    padding-right: 10px;
    padding-left: 10px;
    border-width: 1px;
    border-style: solid;
    width: 100%;
}

.bos-dialog-column-item {
    padding: 5px 10px 5px 10px;
    cursor: pointer;
}

.bos-dialog-column-item.selected {
    font-weight: bold;
    color: #6f7cec;
}

.bos-dialog-column-item:hover {
    background-color: rgba(0, 0, 0, .07);
}

.bos-widget-selector {
    box-sizing: border-box;
    border: 1px solid #d9d9d9;
    padding-left: 0.1px;
    background-color: #ffffff;
}

.bos-widget-font-selector-unit {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 3px;
}

.bos-widget-dash-selector-unit {
    border-style: inset;
    border-width: 1px;
    flex: 1;
}

.bos-widget-dash-selector-unit[value=none] {
    border-top: solid 0px;
}

.bos-widget-dash-selector-unit[value=solid] {
    border-top: solid 1px;
}

.bos-widget-dash-selector-unit[value=dotted] {
    border-top: dotted 1px;
}

.bos-widget-dash-selector-unit[value=dashed] {
    border-top: dashed 1px;
}

.bos-widget-row-separator {
    margin-bottom: 10px;
}

.bos-widget-column-separator {
    margin-right: 2px;
}

.bos-container .bos-control-container-expander-expanded .jqx-expander-header-content {
    color: rgba(0, 0, 0, 1);
}

.bos-container .bos-control-container-expander-collapsed .jqx-expander-header-content {
    color: rgba(0, 0, 0, 0.8);
}

/*chart option control START*/
.bos-container .bos-control-container-expander {
    position: relative;
    box-sizing: border-box;
}

.bos-container .bos-control-container-expander::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #DBDDE2;
    z-index: 1;
}

.bos-container .bos-control-container-expander::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #DBDDE2;
    z-index: 1;
}

.bos-control-container-expander.bos-control-container-expander-expanded::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #AEAEAE;
    z-index: 2;
}

.bos-control-container-expander.bos-control-container-expander-expanded::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #AEAEAE;
    z-index: 2;
}

.bos-control-container-label {
    border: none;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    padding: 0 0 0 20px;
    box-sizing: border-box;
    font-size: 14px !important;
    height: 40px !important;
    position: relative;
}

.bos-control-container-label.jqx-fill-state-pressed {
    background-color: #ffffff;
}

.bos-control-container-label.jqx-fill-state-pressed:after {
    content: '';
    position: absolute;
    top: 39px;
    left: 20px;

    box-sizing: border-box;
    width: calc(100% - 40px);
    height: 1px;
    background-color: #d9d9d9;
}

.bos-widget-chart-selector-container,
.bos-widget-item-selector-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

.bos-widget-chart-item-wrapper {
    width: 64px;
    height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    margin: 1px 2px;
}

.bos-widget-chart-item-wrapper:hover,
.bos-widget-item-selector-item-wrapper:hover {
    background-color: #d9d9d9;
}

.bos-widget-chart-item-wrapper.selected,
.bos-widget-item-selector-item-wrapper.selected {
    color: #656eea;
}

.bos-widget-chart-item-title {
    height: 28px;
    width: 68px;
    -webkit-line-clamp: 2;
    text-align: center;
    font-size: 11px;
}

.bos-widget-item-selector-item-wrapper {
    width: 100%;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;
    cursor: pointer;
    margin: 1px 2px;
}

.bos-widget-item-selector-item {
    -webkit-line-clamp: 2;
    font-size: 11px;
    padding: 0 5px;
}

.bos-widget-onoff-switch {
    display: inline-block;
    width: 50px;
    height: 28px;
    vertical-align: middle;
    margin: 5px 0 6px auto;
}

.bos-widget-onoff-switch input {
    display: none;
}

.bos-widget-onoff-switch-slider {
    position: absolute;
    cursor: pointer;
    width: 50px;
    height: 28px;
    background-color: #ccc;
    border-radius: 14px;
}

.bos-widget-onoff-switch-slider::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 11px;
}

.bos-widget-onoff-switch input:checked + .bos-widget-onoff-switch-slider {
    background-color: #8290FF;
}

.bos-widget-onoff-switch input:hover + .bos-widget-onoff-switch-slider {
    box-shadow: 0 0 2px #8290FF;
}

.bos-widget-onoff-switch input:checked + .bos-widget-onoff-switch-slider::before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}

.bos-widget-onoff-switch-inner {
    display: inline-block;
    line-height: 28px;
    height: 28px;
    font-size: 10px;
    font-weight: bold;
}

.bos-widget-onoff-switch-inner.on {
    color: #fff;
    margin-left: 7px;
}

.bos-widget-onoff-switch-inner.off {
    float: right;
    margin-right: 4px;
}

.bos-control-container-label .jqx-expander-arrow {
    width: 12px;
    height: 6px;
    margin: 0 !important;
    left: 20px;
    top: 17px;
}

.bos-control-container-label .jqx-expander-arrow.jqx-expander-arrow-top {
    background-image: url('images/icon/icon-arrow-down.png');
}

.bos-control-container-label .jqx-expander-arrow.jqx-expander-arrow-bottom {
    background-image: url('images/icon/icon-arrow-up.png');
}

.bos-control-container-label .jqx-expander-header-content {
    padding: 0 !important;
    margin: 0 24px !important;
    flex-grow: 1;
}

.bos-control-container-contents {
    padding: 0 20px;
}

.bos-control {
    padding: 5px 0;
}

.bos-widget-number-input {
    padding-right: 10px;
    padding-left: 10px;
    text-align: right;
    word-wrap: normal;
}

.bos-control-contents {
    background-color: #f7f7f7;
    padding: 8px;
    margin-bottom: 5px;
}

.bos-control-subcontents {
    background-color: #eaeaea;
    padding: 10px;
    margin-bottom: 5px;
}

.bos-control-header {
    margin: 5px 0;
}

.bos-control-header-add-button {
    width: 17px;
    height: 17px;
    display: inline-block;
    background: url('images/plus-circle-17.png') no-repeat;
    background-position: 0px 0px;
    vertical-align: middle;
    cursor: pointer;
}

.bos-control-header-add-button:hover {
    background-position: -17px 0;
}

.bos-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    display: inline-block;
    background: url('images/tool-close-18.png') no-repeat;
    background-position: -4px -5px;
}

.bos-middle-button {
    position: initial;
    margin-left: 2.5px;
}

.bos-deletable-component {
    position: relative;
    padding-top: 17px;
}

.bos-fit-contents {
    width: fit-content;
    padding: 2.5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/*modify jqx widget css */
.jqx-fill-state-pressed-office {
    /*background-color: #ffffff;*/
}

.jqx-expander-header-content-office {
    margin-left: 12px;
}

.bos-icon-help {
    float: right;

    width: 18px;
    height: 18px;
    margin-bottom: 3px;

    opacity: .8;
    background: url('images/tool-help.png') no-repeat;
}

/************************
 * Color Picker CSS Start
 ************************/
.bos-widget-color-picker-container {
    position: relative;
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid #d9d9d9;
    background-color: #ffffff;
    margin: 2.5px 0;
    /* javascript code로 width: 50px; height: 30px; 넣고 있음. 2017. 05. 30
       ColorPickerWidget.prototype._configureMainControlSize = function () {
          this.$mainControl.css('width', (this.options.width) ? this.options.width : '50px');
          this.$mainControl.css('height', (this.options.height) ? this.options.height : '30px');
       };
    */
}

.bos-widget-color-picker-container.bos-widget-disable .bos-widget-disable-cover {
    background-color: rgba(245, 245, 245, 0.5);
}

.bos-color-picker-box-wrapper {
    width: 20px;
    height: 20px;
    padding: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 4px 0 4px 4px;
    border: 1px solid #d9d9d9;
}

.bos-widget-color-picker-container .bos-widget-right-button-area {
    position: relative;
    margin-left: 0;
    width: 24px;
    background-color: #ffffff;
}

.bos-widget-color-picker-button-area {
    width: 210px;
    margin-top: 9px;
    margin-left: 27px;
}

.bos-widget-color-picker-reset-button {
    line-height: 24px;
    height: 24px;
    background-color: #f7f7f7;
    border: solid 1px #DBDDE2;
    text-align: center;
    cursor: pointer;

}

.bos-widget-color-picker-reset-button:hover {
    background-color: #e7e7e7;
}

/************************
 * Color Picker CSS End
 ************************/
.bos-background-image {
    background-repeat: no-repeat;
    background-position: center;
}

/*********************************
 * FontStyleButtonWidget CSS Start
 *********************************/

.bos-font-style-bold {
    background-image: url('images/icon/icon-font-heavy.png');
    height: 12px;
}

.bos-font-style-italic {
    background-image: url('images/icon/icon-font-slope.png');
    height: 12px;
}

.bos-font-style-underline {
    background-image: url('images/icon/icon-font-underline.png');
    height: 12px;
}

.bos-font-style-bold.jqx-fill-state-pressed {
    background-image: url('images/icon/icon-font-heavy-white.png');
}

.bos-font-style-italic.jqx-fill-state-pressed {
    background-image: url('images/icon/icon-font-slope-white.png');
}

.bos-font-style-underline.jqx-fill-state-pressed {
    background-image: url('images/icon/icon-font-underline-white.png');
}

/*********************************
 * FontStyleButtonWidget CSS END
 *********************************/

/**********************************************
 * HorizontalAlignRadioButtonWidget CSS Start
 **********************************************/
.bos-horizontal-align-left {
    background-image: url('images/align-left.png');
}

.bos-horizontal-align-center {
    background-image: url('images/align-center.png');
}

.bos-horizontal-align-right {
    background-image: url('images/align-right.png');
}

.bos-horizontal-align-left.jqx-fill-state-pressed {
    background-image: url('images/align-left-white.png');
}

.bos-horizontal-align-center.jqx-fill-state-pressed {
    background-image: url('images/align-center-white.png');
}

.bos-horizontal-align-right.jqx-fill-state-pressed {
    background-image: url('images/align-right-white.png');
}

/**********************************************
 * HorizontalAlignRadioButtonWidget CSS END
 **********************************************/

/**********************************************
 * VerticalAlignRadioButtonWidget CSS Start
 **********************************************/
.bos-vertical-align-up {
    background-image: url('images/align-up.png');
    background-position-y: 20%;
}

.bos-vertical-align-middle {
    background-image: url('images/align-middle.png');
    height: 13px;
}

.bos-vertical-align-down {
    background-image: url('images/align-down.png');
    background-position-y: 80%;
}

.bos-vertical-align-up.jqx-fill-state-pressed {
    background-image: url('images/align-up-white.png');
    background-position-y: 20%;
}

.bos-vertical-align-middle.jqx-fill-state-pressed {
    background-image: url('images/align-middle-white.png');
}

.bos-vertical-align-down.jqx-fill-state-pressed {
    background-image: url('images/align-down-white.png');
    background-position-y: 80%;
}

.bos-direction-align-horizontal {
    background-image: url('images/align-horizontal.png');
}

.bos-direction-align-vertical {
    background-image: url('images/align-vertical.png');
}

.bos-direction-align-horizontal.jqx-fill-state-pressed {
    background-image: url('images/align-horizontal-white.png');
}

.bos-direction-align-vertical.jqx-fill-state-pressed {
    background-image: url('images/align-vertical-white.png');
}

.bos-complex-tab-header {
    height: 40px;
    display: flex;
    box-sizing: border-box;
}

.bos-complex-tab-header > li {
    display: inline-flex;
}

.bos-complex-tab-items {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    height: 35px;
    width: 75px;
}

.bos-row-multi-div {
    display: inline-flex;
}

/*chart option control END*/

.bcharts-ds-panel {
    position: relative;
}

/* jqxTab에 가려짐. */
.bcharts-ds-panel .ps-scrollbar-x-rail {
    z-index: 999999;
}

/* jqxTab에 가려짐. */
.bcharts-ds-panel .ps-scrollbar-y-rail {
    z-index: 999999;
}

.bcharts-ds {
    position: relative;
    box-sizing: border-box;
    background-color: #fff;
}

.bcharts-ds::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #DBDDE2;
    z-index: 1;
}

.bcharts-ds::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #DBDDE2;
    z-index: 1;
}

.bcharts-ds.bcharts-ds-collapsed {
    background-color: transparent;
}

.bcharts-ds.bcharts-ds-expanded::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #AEAEAE;
    z-index: 2;
}

.bcharts-ds.bcharts-ds-expanded::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #AEAEAE;
    z-index: 2;
}

.bcharts-ds-header {
    height: 40px;
    display: flex;
    padding-right: 0;
    padding-left: 20px;
    cursor: pointer;
}

.bcharts-ds-header > div {
    display: flex;
    align-items: center;
}

.bcharts-expander-arrow {
    justify-content: center;
    margin-right: 10px;
}

.bcharts-expander-arrow .bcharts-expander-arrow-element {
    width: 12px;
    height: 6px;
    background-repeat: no-repeat;
}

.bcharts-expander-arrow.bcharts-icon-arrow-up .bcharts-expander-arrow-element {
    background-image: url('images/icon/icon-arrow-up.png');
}

.bcharts-expander-arrow.bcharts-icon-arrow-down .bcharts-expander-arrow-element {
    background-image: url('images/icon/icon-arrow-down.png');
}

.bcharts-ds-title {
    flex-grow: 1;
    max-width: calc(100% - 70px);
    overflow: hidden;
}

.bcharts-ds.bcharts-ds-expanded .bcharts-ds-title {
    color: rgba(0, 0, 0, 1);
}

.bcharts-ds.bcharts-ds-collapsed .bcharts-ds-title {
    color: rgba(0, 0, 0, 0.8);
}

.bcharts-ds-title-ellipsis {
    /* display: flex; 는 ellipsis 적용이 안됨. 그래서 한번 더 wrapping */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bcharts-ds-icon {
    width: 16px;
    height: 100%;
    justify-content: center;
    visibility: hidden;
}

.bcharts-ds-icon-schedule-clock {
    width: 16px;
    height: 16px;
    background: url('images/icon/icon-schedule-clock.png') no-repeat;
}

.bcharts-ds-drawer {
    box-sizing: border-box;
    width: 33px;
    padding-left: 10px;
    cursor: pointer;
}

.bcharts-ds-drawer-button {
    width: 2px;
    height: 12px;
    background: url('images/btn-ham.png') no-repeat;
}

.bcharts-ds-header.ui-draggable-dragging {
    background-color: #ECECEC;
}

.bcharts-ds-header.ui-draggable-dragging .bcharts-expander-arrow,
.bcharts-ds-header.ui-draggable-dragging .bcharts-ds-drawer {
    visibility: hidden;
}

.bcharts-ds-contents {
}

.bcharts-ds .jqx-tabs-headerWrapper.jqx-tabs-header {
    padding: 0 !important;
    margin: 0 20px;
    height: 32px !important;
}

.bcharts-ds ul.jqx-tabs-title-container.jqx-tabs-title-container-office {
    width: 100% !important;
    height: 32px !important;
}

.bcharts-ds li.jqx-tabs-title {
    width: 50% !important; /* 다른 css가 .jqx-tabs-title을 바꿀 수 도 있어서 important */
    background-color: #fff;
    box-sizing: border-box;

    height: 32px !important;
    line-height: 26px !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    border: none; /* 모든 border를 제거한 후 bottom 만 붙인다. */
    border-bottom: 1px solid #D9D9D9;
}

.bcharts-ds li.jqx-tabs-title-selected-top {
    color: #8190FF;
    border-bottom: 2px solid #8190FF;
}

.bcharts-ds .jqx-tabs-content {
    padding: 0 !important; /* 다른 css가 .jqx-tabs-content을 바꿀 수 도 있어서 important */
    margin: 15px 0 10px 19px;
}

.bcharts-ds-columns-util-tools-area {
    width: calc(100% - 21px);
}

.bcharts-ds-columns {
    box-sizing: border-box;
    padding: 0 12px 0 0;
    max-height: 378px;
    position: relative;
    width: calc(100% - 9px);
}

.bcharts-ds-column {
    display: flex;
    width: 100%;
    height: 35px;
    line-height: 34px;
    font-size: 12px;
    border: 1px solid #CCCCCC;
    border-radius: 17.5px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 5px;
}

.bcharts-ds-column-type {
    width: 73px;
    box-sizing: border-box;
    background-color: #E6E9FF;
    color: #454758;
    font-size: 12px;
    font-family: Arial;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bcharts-ds-column-name {
    padding: 0 4px 0 8px;
    box-sizing: border-box;
    flex-grow: 1;
    background-color: white;
    max-width: calc(100% - 73px);
    font-size: 12px;
}

.bcharts-ds-column-name-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bcharts-ds-column:hover {
    border-color: #8190FF;
}

.bcharts-ds-column:hover .bcharts-ds-column-type {
    background-color: #CDD3FF;
}

/* search input */
.bcharts-ds-columns-searcharea {
    margin-bottom: 10px;
    box-sizing: content-box;
}

.bcharts-ds-columns-searcharea input[type=search].jqx-input-office {
    width: 100%;
    height: 31px;
}

input[type=search].jqx-input-office {
    padding-right: 30px;

    background: url('images/search-28.png') no-repeat;
    background-position: center right;
}

input[type=search].jqx-input-office::-webkit-search-cancel-button {
    position: relative;
    right: -3px !important;

    width: 17px;
    height: 17px;

    background: url('images/icon/icon_palette.png') no-repeat;
    background-position: -27px 0;

    -webkit-appearance: none;
}

input[type=search].jqx-input-office::-webkit-search-cancel-button:hover {
    position: relative;
    right: -3px !important;

    width: 17px;
    height: 17px;

    background: url('images/icon/icon_palette.png') no-repeat;
    background-position: -54px 0;

    -webkit-appearance: none;
}

input[type=search].jqx-input-office::-ms-clear {
    width: 17px;
    height: 17px;
    margin-right: 20px;

    color: #fff;
    background: url('images/icon/icon_palette.png') no-repeat;
    background-position: -27px 0;
}

input[type=search].jqx-input-office::-ms-clear:hover {
    width: 17px;
    height: 17px;
    margin-right: 20px;

    color: #fff;
    background: url('images/icon/icon_palette.png') no-repeat;
    background-position: -54px 0;
}

.bcharts-ds .jqx-tabs-titleContentWrapper {
    display: flex !important;
    float: none !important;
    margin-top: 0 !important;
}

.bcharts-ds .bcharts-ds-contents-tab-columns {
    margin-right: 3px;
}

.bcharts-ds .bcharts-ds-contents-columns-count {
    max-width: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bfs-display-none {
    display: none;
}

.bfs-relative-full {
    width: 100%;
    height: 100%;
    position: relative;
}

.bfs-container .bfs-control-container-expander-expanded .jqx-expander-header-content {
    color: rgba(0, 0, 0, 1);
}

.bfs-container .bfs-control-container-expander-collapsed .jqx-expander-header-content {
    color: rgba(0, 0, 0, 0.8);
}

.bfs-control-container-header-label {
    flex-grow: 1;
    line-height: 18px;
    margin-right: 10px;
}

.bfs-control-container-header-remove {
    width: 18px;
    height: 18px;
    background-image: url('images/tool-close-18.png');
}

.bfs-control-container-header-remove:hover {
    background-position-x: -18px;
}

.bfs-message-area {
    border-top: 1px solid #DBDDE2;
    width: 100%;
    text-align: center;
    color: red;
    line-height: 20px;
}

.bfs-text-blur {
    color: rgba(0, 0, 0, 0.6);
}

/*chart option control START*/

.bcharts-filter-panel-message-area {
    width: 100%;
    height: 100%;
    line-height: 100%;
}

.bfs-container .bfs-control-container-expander {
    position: relative;
    box-sizing: border-box;
}

.bfs-container .bfs-control-container-expander::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #DBDDE2;
    z-index: 1;
}

.bfs-container .bfs-control-container-expander::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #DBDDE2;
    z-index: 1;
}


.bfs-control-container-expander.bfs-control-container-expander-expanded::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #AEAEAE;
    z-index: 2;
}

.bfs-control-container-expander.bfs-control-container-expander-expanded::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #AEAEAE;
    z-index: 2;
}

.bfs-control-container-label {
    border: none;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    padding: 0 0 0 20px;
    box-sizing: border-box;
    font-size: 14px !important;
    height: 40px !important;
    position: relative;
}

.bfs-control-container-label.jqx-fill-state-pressed {
    background-color: #ffffff;
}

.bfs-control-container-label.jqx-fill-state-pressed:after {
    content: '';
    position: absolute;
    top: 39px;
    left: 20px;

    box-sizing: border-box;
    width: calc(100% - 40px);
    height: 1px;
    background-color: #d9d9d9;
}

.bfs-control-container-label .jqx-expander-arrow {
    width: 12px;
    height: 6px;
    margin: 0 !important;
}

.bfs-control-container-label .jqx-expander-arrow.jqx-expander-arrow-top {
    background-image: url('images/icon/icon-arrow-down.png');
}

.bfs-control-container-label .jqx-expander-arrow.jqx-expander-arrow-bottom {
    background-image: url('images/icon/icon-arrow-up.png');
}

.bfs-control-container-label .jqx-expander-header-content {
    padding: 0 !important;
    margin: 0 24px !important;
    flex-grow: 1;
    width: calc(100% - 48px);
}

.bfs-control-container-contents {
    padding: 0 20px;
}

.bfs-control {
    padding: 5px 0;
}

.bfs-widget-number-input {
    padding-right: 10px;
    padding-left: 10px;
    text-align: right;
    word-wrap: normal;
}

.bfs-control-contents {
    background-color: #f7f7f7;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.bfs-control-subcontents {
    border: 1px solid;
    background-color: #eaeaea;
    padding: 10px;
    margin-bottom: 5px;
}

.bfs-control-area-wrapper {
    position: relative;
}

.bfs-control-header {
    margin: 5px 0;
}

.bfs-control-header-add-button {
    width: 17px;
    height: 17px;
    display: inline-block;
    background: url('images/plus-circle-17.png') no-repeat;
    background-position: 0px 0px;
    vertical-align: middle;
    cursor: pointer;
}

.bfs-control-header-add-button:hover {
    background-position: -17px 0;
}

.bfs-control-change-filter-button {
    width: 17px;
    height: 17px;
    background-image: url('images/icon-down-17.png');
    cursor: pointer;
}

.bfs-control-content-control-area {
    margin-top: 10px;
}

.bfs-column-filter-control .jqx-checkbox-office  {
    margin-bottom: 4px;
}

.bfs-column-filter-slider {
    margin: auto;
}

.bfs-column-filter-searchbar {
    margin-bottom: 5px;
}

.bfs-display-flex {
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bfs-display-flex-center {
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.bfs-flex-direction-column {
    flex-direction: column;
}

.bfs-flex-space-between {
    justify-content: space-between;
}

.bfs-flex-align-center {
    align-items: center;
}

.bfs-flex-wrap {
    flex-wrap: wrap;
}

.bfs-flex-1 {
    flex: 1;
}

.bfs-flex-2 {
    flex: 2;
}

.bfs-display-flex .bfs-widget-header {
    width: 70px;
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*justify-content: center;*/
    align-items: center;
}

.bfs-text-overflow-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*white-space: normal;*/
    /*display: -webkit-box;*/
    /*-webkit-line-clamp: 1;*/
    /*-webkit-box-orient: vertical;*/
}

.bfs-flex-direction-column .bfs-widget-header,
.bfs-widget-contents {
    flex: 1;
    padding: 2.5px 0;
}

.bfs-widget-button {
    line-height: 30px;
    height: 30px;
    background-color: #f7f7f7;
    border: solid 1px #DBDDE2;
    text-align: center;
    cursor: pointer;
}

.bfs-widget-button:hover {
    background-color: #e7e7e7;
}


.bcharts-layout {
    width: 100%;
    height: 100%;
}

.bcharts-layout-composite {
    width: 100%;
    height: 100%;
}

.bcharts-layout-splitter {
    border: none;
}

.bcharts-layout-panel {
    width: 100%;
    height: 100%;
}

.bcharts-layout .jqx-splitter-collapse-button-horizontal, .bcharts-layout .jqx-splitter-collapse-button-vertical {
    display: none;
}

.bcharts-layout .jqx-splitter-splitbar-horizontal, .bcharts-layout .jqx-splitter-splitbar-vertical {
    border-color: transparent;
}

.bcharts-layout-splitter > .jqx-splitter-splitbar-vertical:last-child, .bcharts-layout-splitter > .jqx-splitter-splitbar-horizontal:last-child {
    background-color: #e5e5e5;
}
.bcharts-ws-panel {
    display: block;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    border: solid 1px #d9d9d9;
    box-sizing: border-box;
}

.bcharts-ws-panel[chart="table"] {
    overflow: hidden;
}

.bcharts-worksheet > .bcharts-ws-panel {
    display: none;
}

.bcharts-ws-panel-header {
    box-sizing: border-box;
    height: 38px;
    background-color: #fff;
    display: flex;
    overflow: hidden;
    position: relative;
}

.bcharts-ws-panel-chart-selector {
    margin: 4px;
}

.bcharts-ws-panel-chart-selector:hover {
    background-color: #EEEEEF;
}

.bcharts-ws-panel-chart-selector.bcharts-non-editable {
    background-image: none;
    pointer-events: none;
}

.bcharts-ws-panel-chart-selector .bo-widget-header.bos-widget-header {
    display: none;
}

.bcharts-ws-panel-chart-selector .bos-widget-except-right-button-area {
    width: initial;
}

.bcharts-ws-panel-chart-selector .bos-widget-right-button-area {
    right: -24px;
    border: none;
}

.bcharts-ws-panel-chart-selector .bos-widget-chart-selector {
    border: none;
}

.bcharts-ws-panel-title {
    height: 100%;
    flex-grow: 1;
    cursor: move;
}

.bcharts-ws-panel-toolbar {
    display: flex;
    height: 100%;
    padding: 7px;
    box-sizing: border-box;
}

.bcharts-ws-panel-toolitem {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    cursor: pointer;
    background: url('images/panel-tools-24x24.png') no-repeat;
    margin: 0 0 0 4px;
}

.bcharts-ws-panel-toolitem[action="setting"] {
    background-position-x: 0px;
}

.bcharts-ws-panel-toolitem[action="report"] {
    background-position-x: -24px;
}

.bcharts-ws-panel-toolitem[action="duplicate"] {
    background-position-x: -48px;
}

.bcharts-ws-panel-toolitem[action="details"] {
    background-position-x: -72px;
    display: none;
}

.bcharts-ws-panel[chart='scatter'] .bcharts-ws-panel-toolitem[action="details"],
.bcharts-ws-panel[chart='column'] .bcharts-ws-panel-toolitem[action="details"],
.bcharts-ws-panel[chart='bar'] .bcharts-ws-panel-toolitem[action="details"] {
    display: block;
}

.bcharts-ws-panel-toolitem[action="close"] {
    background-position-x: -120px;
}

/*TODO: biplot report 개발 완료 후 제거*/
.bcharts-ws-panel[chart='biplot'] .bcharts-ws-panel-toolitem[action="report"] {
    display: none;
}

/* todo: 멀티 차트 개발 완료 후 제거 */
.bcharts-ws-panel-toolitem[action="multichart"] {
    background-position-x: -96px;
    display: block;
}

.bcharts-ws-panel-toolitem[action="export-img"] {
    background-position-x: -144px;
    display: block;
}

/* TODO: 멀티 차트 개발 완료 후 제거 */
.bcharts-ws-panel[chart='table'] .bcharts-ws-panel-toolitem[action="multichart"],
.bcharts-ws-panel[chart='decisionTree'] .bcharts-ws-panel-toolitem[action="multichart"],
.bcharts-ws-panel[chart='dendrogram'] .bcharts-ws-panel-toolitem[action="multichart"],
.bcharts-ws-panel[chart='biplot'] .bcharts-ws-panel-toolitem[action="multichart"],
.bcharts-ws-panel[chart='map'] .bcharts-ws-panel-toolitem[action="multichart"],
.bcharts-ws-panel[chart='image-grid'] .bcharts-ws-panel-toolitem[action="multichart"]
{
    display: none;
}

.bcharts-ws-panel-toolitem:hover {
    background-color: #EEEEEF;
}

.bcharts-ws-panel-contents {
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 38px);
    padding: 0 7px 7px 7px;
}

.bcharts-ws-panel-contents .bcharts-chart.jqx-grid {
    box-sizing: border-box;
}

.bcharts-ws-panel.ui-selected {
    border-color: #656eea;
}

.bcharts-ws-panel-drag-helper {
    width: 180px;
    height: 40px;
    box-sizing: border-box;
    border: solid 1px #DDDEE0;
    background-color: #fff;
    opacity: .8;
    z-index: 1000;
    font-size: 13px;
}

.bcharts-ws-panel-droppable {
    display: none;
    text-align: center;
    background-color: #9d7ee6;
    border: solid 1px #9d7ee6;
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 700;
    opacity: .5;
}

.bcharts-ws-panel-droppable[anchor="top"] {
    top: 10%;
    left: calc(50% - 15px);
}

.bcharts-ws-panel-droppable[anchor="left"] {
    top: calc(50% - 15px);
    left: 10%;
}

.bcharts-ws-panel-droppable[anchor="right"] {
    top: calc(50% - 15px);
    right: 10%;
}

.bcharts-ws-panel-droppable[anchor="bottom"] {
    bottom: 10%;
    left: calc(50% - 15px);
}

.bcharts-ws-panel-droppable-location {
    position: absolute;
    border: solid 1px transparent;
    z-index: 700;
    opacity: 0.5;
}

.bcharts-droppable-state-active {
    background-color: #D1B8E6;
    border-color: #9d7ee6;
    -webkit-animation-name: droppable-state-ani; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: droppable-state-ani;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes droppable-state-ani {
    25% {
        background-color: #F8FBF9;
    }
    50% {
        background-color: #D1B8E6;
    }
    75% {
        background-color: #d9bce6;
    }
    100% {
        background-color: #D1B8E6;
    }
}

/* Standard syntax */
@keyframes droppable-state-ani {
    25% {
        background-color: #F8FBF9;
    }
    50% {
        background-color: #D1B8E6;
    }
    75% {
        background-color: #d9bce6;
    }
    100% {
        background-color: #D1B8E6;
    }
}

.bcharts-droppable-state-hover {
    background-color: #D1B8E6;
    border-color: #9d7ee6;
    -webkit-animation-name: droppable-state-ani; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 0.1s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1;
    animation-name: droppable-state-ani;
    animation-duration: 0.1s;
    animation-iteration-count: 1;
}

.bcharts-layout-splitter, .bcharts-layout-splitter .jqx-splitter-panel {
    overflow: visible;
}
