.chart-container{
    width: 1000px;
    float: left;
}

.sidebar-container{
    margin-left: 20px;
    float: right;
    width: calc(100% - 1020px);
}

.sidebar-container-below-breakpoint{
    max-width: 1000px;
    margin-left: 0px;
    width: 100%;
    float: left;
    margin-top: 36px;
}

.daext-form-container{
    width: 100% !important;
}

table.daext-form > tbody > tr > th{
    width: 218px !important;
}

#data-structure,
#arc-configuration,
#line-configuration,
#point-configuration,
#rectangle-configuration,
.chart-preview,
.common-chart-configuration,
.title-configuration,
.legend-configuration,
.tooltip-configuration,
.animation-configuration,
.misc-configuration,
.scales-common-configuration-x,
.scales-grid-line-configuration-x,
.scales-title-configuration-x,
.scales-tick-configuration-x,
.scales-configuration-options-x,
.scales-time-configuration-options-x,
.scales-common-configuration-y,
.scales-grid-line-configuration-y,
.scales-title-configuration-y,
.scales-tick-configuration-y,
.scales-configuration-options-y,
.scales-common-configuration-y2,
.scales-grid-line-configuration-y2,
.scales-title-configuration-y2,
.scales-tick-configuration-y2,
.scales-configuration-options-y2,
.scales-common-configuration-rl,
.scales-grid-line-configuration-rl,
.scales-angle-line-configuration-rl,
.scales-point-label-configuration-rl,
.scales-tick-configuration-rl,
.scales-configuration-options-rl,
.source,
.performance{
    display: none;
}

.expand-icon{
    background: url("../img/arrow-down-f7f7f7.png") 0 0 no-repeat !important;
    width: 20px !important;
    height: 20px !important;
    float: right;
    margin: 2px 0;
    cursor: pointer;
}

.group-trigger{
    background: #f7f7f7;
    cursor: pointer;
}

.group-title{
    font-weight: 600;
    color: #333 !important;
    text-align: left !important;
}

.expand-icon.arrow-down{
    background: url("../img/arrow-up-f7f7f7.png") 0 0 no-repeat !important;
}

table.daext-items .icons-container{
    width: 76px;
    max-width: 76px;
}

table.daext-items .menu-icon.update{
    margin-right: 8px !important;
}

table.daext-items .update{
    background: url("../img/update.png") 0 0 no-repeat !important;
}

table.daext-items .update:hover{
    background: url("../img/update-hover.png") 0 0 no-repeat !important;
}

.empty-icon-container{
    width: 20px !important;
    height: 20px !important;
    float: left !important;
    margin: 4px 8px 4px 0 !important;
}


table.daext-items .clone{
    background: url("../img/clone.png") 0 0 no-repeat !important;
    margin-right: 8px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

table.daext-items .clone:hover{
    background: url("../img/clone-hover.png") 0 0 no-repeat !important;
}

#data-structure-error,
#data-structure-updated,
#chart-error{
    display: none;
    margin-top: 8px;
}

#chart-preview-error{
    display: none;
}

#chart-preview-error-details{
    display: none;
}

.spectrum-toggle{
    width: 20px;
    height: 20px;
    background: url("../img/color-picker.png") 0 0 no-repeat !important;
    float: left;
    cursor: pointer;
    visibility: hidden;
    margin: 2px 0 2px 8px;
}

.spectrum-toggle:hover{
    /*background: url("../img/art-hover.png") 2px 2px no-repeat !important;*/
}

.sp-replacer{
    display: none !important;
}

#data-structure-backgroundColor,
#data-structure-borderColor,
#data-structure-pointBorderColor,
#data-structure-pointBackgroundColor,
#data-structure-pointHoverBackgroundColor,
#data-structure-pointHoverBorderColor,
#data-structure-hoverBackgroundColor,
#data-structure-hoverBorderColor,
#defaultFontColor,
#title-fontColor,
#canvas-backgroundColor,
#legend-labels-fontColor,
#tooltips-backgroundColor,
#tooltips-titleFontColor,
#tooltips-bodyFontColor,
#tooltips-footerFontColor,
#tooltips-multiKeyBackground,
#elements-line-backgroundColor,
#elements-line-borderColor,
#elements-rectangle-backgroundColor,
#elements-rectangle-borderColor,
#elements-point-backgroundColor,
#elements-point-borderColor,
#elements-arc-backgroundColor,
#elements-arc-borderColor,
#scales-xAxes-gridLines-color,
#scales-xAxes-gridLines-zeroLineColor,
#scales-xAxes-scaleLabel-fontColor,
#scales-xAxes-ticks-fontColor,
#scales-yAxes-gridLines-color,
#scales-yAxes-gridLines-zeroLineColor,
#scales-yAxes-scaleLabel-fontColor,
#scales-yAxes-ticks-fontColor,
#scales-y2Axes-gridLines-color,
#scales-y2Axes-gridLines-zeroLineColor,
#scales-y2Axes-scaleLabel-fontColor,
#scales-y2Axes-ticks-fontColor,
#scales-rl-gridLines-color,
#scales-rl-angleLines-color,
#scales-rl-pointLabels-fontColor,
#scales-rl-ticks-fontColor,
#scales-rl-ticks-backdropColor{
    float: left;
}

.spectrum-input{
    visibility: hidden;
}

#chart-preview-container-td{
    position: relative;
    height: 492px;
}

#chart-preview-container{
    height: 492px;
}

#uberchart-0{
    max-height: 492px !important;
}

#refresh-preview{
    width: 20px;
    height: 20px;
    position: absolute;
    right: 8px;
    top: 8px;
    cursor: pointer;
    background: url("../img/refresh-preview.png") 0 0 no-repeat !important;
    z-index: 2;
    margin: 0;
}

#chart-preview-error{
    position: absolute;
    left: 0;
    top: 219px;
    width: 100%;
    line-height: 56px;
    color: #777;
    height: auto;
    font-size: 46px !important;
    text-align: center;
    margin-bottom: 8px;
}

#chart-preview-error-details{
    position: absolute;
    top: 285px;
    box-sizing: border-box;
    padding: 0 132px;
    color: #777;
    width: 100%;
    font-size: 12px !important;
    left: 0;
    line-height: 15px;
    text-align: center;
}

input[type=number]{
    color: #333 !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    height: 24px !important;
}

select{
    height: 24px !important;
}

/* Handsontable rows border color */
.ht_master tr > td {
    border-color: #dddddd !important;
    color: #333;
}

/* Different background for the cells of the first row */
.ht_master tr:first-child > td {
    background: #f7f7f7 !important;
}

.wtBorder {
    background-color: #0075a5 !important;
}

.handsontable td.area{
    background:-moz-linear-gradient(top,rgba(181,227,255,0.34) 0,rgba(181,227,255,0.34) 100%) !important;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(181,227,255,0.34)),color-stop(100%,rgba(181,227,255,0.34))) !important;
    background:-webkit-linear-gradient(top,rgba(181,227,255,0.34) 0,rgba(181,227,255,0.34) 100%) !important;
    background:-o-linear-gradient(top,rgba(181,227,255,0.34) 0,rgba(181,227,255,0.34) 100%) !important;
    background:-ms-linear-gradient(top,rgba(181,227,255,0.34) 0,rgba(181,227,255,0.34) 100%) !important;
    background:linear-gradient(to bottom,rgba(181,227,255,0.34) 0,rgba(181,227,255,0.34) 100%) !important;
}

#daextubch-table{
    height: 347px;
    overflow: hidden;
    width: 750px;
}

#daextubch-table-td{
    padding-bottom: 7px;
}

/* set right alignment to the table cells */
#daextubch-table td,
#daextubch-table textarea{
    text-align: right;
}

#daextubch-table tr:first-child td{
    text-align: center;
}

#daextubch-table textarea:focus{
    background: #0075a5 !important;
    color: #fff !important;
}

.daext-form-container input[type="text"]{
    width: 218px;
}

.daext-form-container .select2-container{
    width: 218px !important;
}

table.daext-form input[disabled]{
    opacity: 1 !important;
    cursor: default !important;
    color: #ccc !important;
    background: #f7f7f7 !important;
    padding-left: 5px !important;
    border-color: #ddd !important;
}

.daext-form-container[form-disabled="1"] .spectrum-toggle,
.daext-form-data-structure[form-disabled="1"] .spectrum-toggle{
    display: none !important;
}

.chart-preview[preview-disabled="1"],
.group-trigger[preview-disabled="1"]{
    display: none !important;
}

.daext-form-container select {
    min-width: 218px;
    max-width: 218px;
    display: none;
}