.-canvasjs-actual .-canvasjs-actual-element {
    position: absolute !important;
    margin: 0;
    border: 0 solid #AAAAAA;
    cursor: default;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box;
    overflow: visible;
    display: block;
    padding: 0;
    font-family: arial;
    font-size: 12px;
}

/*
================================
 Workspace
================================
*/

.-canvasjs-design {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color:#FFFFFF;
}

.-canvasjs-design .-canvasjs-workspace {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 10px;
    box-sizing: border-box;
}

.-canvasjs-design .-canvasjs-workspace div[data-id=toolbar] {
    position: absolute;
    top:-10px;
    height:122px;
    right:-10px;
    left:-10px;
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.-canvasjs-design .-canvasjs-workspace div[data-id=toolbox] {
    position: absolute;
    top: 122px;
    bottom: 0;
    width: 250px;
    left: 0;
    box-sizing: border-box;
}

.-canvasjs-design .-canvasjs-workspace div[data-id=surface] {
    position: absolute;
    top: 122px;
    bottom: 30px;
    right: 0;
    left: 260px;
    box-sizing: border-box;
}

.-canvasjs-design .-canvasjs-workspace div[data-id=statusbar] {
    position: absolute;
    height: 30px;
    bottom: 0;
    right: 0;
    left: 260px;
    box-sizing: border-box;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
}

.-canvas-toolbox-draghint {
    background-color: #333333;
    border-radius: 50%;
    height: 12px;
    width: 12px;
    z-index: 60000;
    cursor: crosshair;
}

/*
================================
 Surface
================================
*/
    .-canvasjs .-canvasjs-surface {
        overflow: auto;
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        bottom: 0px;
        border-width: 0px;
    }

.-canvasjs-design .-canvasjs-surface {
    overflow: auto;
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 0;
    right: 0;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-style: solid;
    border-color: #AAAAAA;
    border-width: 1px;
    background-position: 1px 0px;
    padding: 0 0 0 0;
}

.-canvasjs-design .-canvasjs-surface-message {
    height: 100%;
    width: 100%;
}

/*
================================
 Document
================================
*/

.-canvasjs .-canvasjs-document {
    border-width: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    width: auto;
    background-color: transparent;
}

.-canvasjs-design .-canvasjs-document {
    /*position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;*/
    position: absolute;
    overflow: hidden;
    border-width: 0 1px 1px 0px;
    border-color: #CCCCCC;
    border-style: solid;
    margin: 0 0 0 0;
    background-color: transparent;
    box-sizing: border-box;
    height: 10000px;
    width: 10000px;
}

/*
================================
 Element
================================
*/

.-canvasjs-design .-canvasjs-element {
    position: absolute !important;
    margin: 0;
    border: 0 solid #AAAAAA;
    cursor: default;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box;
    overflow: visible;
    display: block;
    padding: 0;
    font-family: arial;
    font-size: 12px;
}

.-canvasjs-design .-canvasjs-element > .-canvasjs-overlay {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: transparent;
    box-sizing: border-box;
}

.-canvasjs-design .-canvasjs-element > .-canvasjs-overlay > .-canvasjs-highlight {
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    border: 1px solid transparent;
    display: none;
}

.-canvasjs-design .-canvasjs-element > .-canvasjs-overlay > .-canvasjs-highlight > .ne,
.-canvasjs-design .-canvasjs-element > .-canvasjs-overlay > .-canvasjs-highlight > .nw,
.-canvasjs-design .-canvasjs-element > .-canvasjs-overlay > .-canvasjs-highlight > .sw,
.-canvasjs-design .-canvasjs-element > .-canvasjs-overlay > .-canvasjs-highlight > .se {
    position: absolute;
    height: 5px;
    width: 5px;
    background-color: #333333; /*#46E8EB;*/
    border-radius: 50%;
}

.-canvasjs-design .-canvasjs-element > .-canvasjs-overlay > .-canvasjs-highlight > .ne {
    top: 1px;
    left: 1px
}

.-canvasjs-design .-canvasjs-element > .-canvasjs-overlay > .-canvasjs-highlight > .nw {
    top: 1px;
    right: 1px
}

.-canvasjs-design .-canvasjs-element > .-canvasjs-overlay > .-canvasjs-highlight > .sw {
    bottom: 1px;
    right: 1px
}

.-canvasjs-design .-canvasjs-element > .-canvasjs-overlay > .-canvasjs-highlight > .se {
    bottom: 1px;
    left: 1px
}

.-canvasjs-design .-canvasjs-element.ui-selected > .-canvasjs-overlay > .-canvasjs-highlight {
    border: 0 dashed #CCCCCC /*#46E8EB*/;
    display: inline-block;
}

.-canvasjs-design .-canvasjs-element > .-canvasjs-overlay > .-canvasjs-transparency {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background-color: #FFFFFF;
    opacity: .001 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=.2)";
}

/*
================================
Selection
================================
*/

.-canvasjs-selection-box {
    position: absolute !important;
    margin: 0px;
    box-sizing: border-box !important;
    padding: 0px;
    pointer-events: all;
    z-index: 1;
    cursor: move;
}

.-canvasjs-selection-box *::before,
.-canvasjs-selection-box *::after,
.-canvasjs-selection-box > DIV,
.-canvasjs-selection-box > DIV > DIV {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.-canvasjs-selection-box > DIV:first-child {
    border: 1px solid #46E8EB !important;
    height: 100%;
}

.-canvasjs-selection-box DIV:first-child > DIV {
    height: 100%;
    opacity: .2 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=.2)";
}

.-canvasjs-selection-box .ui-resizable-handle {
    width: 12px !important;
    height: 12px !important;
    background-color: #46E8EB !important;
    border: 1px solid #08a5a8;
    border-radius: 50%;
}

.-canvasjs-selection-box .ui-resizable-n {
    top: -6px !important;
    right: 0px !important;
    background-image: none !important;
    cursor: n-resize !important;
    margin-left: auto;
    margin-right: auto;
}

.-canvasjs-selection-box .ui-resizable-s {
    bottom: -6px !important;
    right: 0px !important;
    background-image: none !important;
    cursor: s-resize !important;
    margin-left: auto;
    margin-right: auto;
}

.-canvasjs-selection-box .ui-resizable-e {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6px;
    margin: auto;
    cursor: e-resize !important;
}

.-canvasjs-selection-box .ui-resizable-w {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6px;
    margin: auto;
    cursor: w-resize !important;
}

.-canvasjs-selection-box .ui-resizable-ne {
    top: -5px !important;
    right: -5px !important;
    background-image: none !important;
    cursor: ne-resize !important;
}

.-canvasjs-selection-box .ui-resizable-nw {
    top: -5px !important;
    left: -5px !important;
    background-image: none !important;
    cursor: nw-resize !important;
}

.-canvasjs-selection-box .ui-resizable-se {
    right: -5px !important;
    bottom: -5px !important;
    background-image: none !important;
    cursor: se-resize !important;
}

.-canvasjs-selection-box .ui-resizable-sw {
    left: -5px !important;
    bottom: -5px !important;
    background-image: none !important;
    cursor: sw-resize !important;
}

.-canvasjs-selection-highlight {
    background-color: #46E8EB !important;
}

.-canvasjs-selection-box > .info-box {
    position: absolute;
    bottom: 1px;
    right: 1px;
    font-size: 11px;
    background-color: #46E8EB;
    padding: 5px;
}

.-canvasjs-selection-box > .-canvasjs-selection-box-dimensions {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #46E8EB;
    border-right: 0;
    border-bottom: 0;
    height: 60px;
    width: 60px;
    font-family: Consolas !important;
    font-size: 11px;
    padding: 3px 5px 3px 5px;
    box-sizing: border-box;
}

/*
================================
ToolBox
================================
*/

.-canvasjs-toolbox {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #AAAAAA;
}

.-canvasjs-toolbox > [data-role=title] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background-color: #007acc;
    line-height: 20px;
    font-size: 13px;
    font-family: Arial;
    padding: 5px;
    color: #FFFFFF;
}

.-canvasjs-toolbox > [data-role=groups] {
    background-color: #FFFFFF;
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    border-width: 0 1px 1px 1px;
    border-color: #AAAAAA;
    border-style: solid;
    overflow-y: auto;
    overflow-x: hidden;
}
    
.-canvasjs-toolbox .-canvasjs-toolbox-group [role=label] {
    height: 26px;
    width: 100%;
    line-height: 28px;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 3px 3px 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.-canvasjs-toolbox .-canvasjs-toolbox-item {
    height: 26px;
    width: 100%;
    line-height: 24px;
    font-family: Arial;
    font-size: 12px;
    padding: 3px 3px 3px 40px;
    background-position: 20px center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    cursor: pointer;
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.-canvasjs-toolbox .-canvasjs-toolbox-item:hover {
    background-color: #EEEEEE;
}

.-canvasjs-toolbox .-canvasjs-toolbox-item:active {
    background-color: #EEEEEE;
    cursor: move;
    cursor: grabbing;
}

/*
================================
GROUP
================================
*/

.-canvasjs-group {
    z-index:20000;
}

.-canvasjs-group div[role=box]  {
}

.-canvasjs-group.-canvasjs-group-master div[role=box] {
    border-style: dashed;
    border-color: darkred;
    border-width: 1px;
}

.-canvasjs-group.-canvasjs-group-master.-canvas-ignore-select div[role=box] {
    border-style: dashed;
    border-color: darkgrey;
}

.-canvasjs-design .-canvasjs-element.-canvasjs-group > .-canvasjs-overlay > .-canvasjs-highlight > .ne,
.-canvasjs-design .-canvasjs-element.-canvasjs-group > .-canvasjs-overlay > .-canvasjs-highlight > .nw,
.-canvasjs-design .-canvasjs-element.-canvasjs-group > .-canvasjs-overlay > .-canvasjs-highlight > .sw,
.-canvasjs-design .-canvasjs-element.-canvasjs-group > .-canvasjs-overlay > .-canvasjs-highlight > .se {
    position: absolute;
    height: 7px;
    width: 7px;
    background-color: #666666; /*#46E8EB;*/
    display: none;
}

.-canvasjs-design .-canvasjs-element.-canvasjs-group.ui-selected > .-canvasjs-overlay > .-canvasjs-highlight {
    border: 0 dotted #666666 /*#46E8EB*/;
    display: inline-block;
}

/*
================================
 Status Bar
================================
*/

.-canvasjs-statusbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    box-sizing: border-box;
}

.-canvasjs-statusbar [role=dimensions] {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    bottom: 0;
    box-sizing: border-box;
    font-family: Consolas;
    font-size: 12px;
    line-height: 27px;
    padding-left: 10px;
}

.-canvasjs-statusbar [role=selections] {
    position: absolute;
    top: 0;
    left: 250px;
    width: 100px;
    bottom: 0;
    box-sizing: border-box;
    font-family: Consolas;
    font-size: 12px;
    line-height: 27px;
    padding-left: 10px;
}

.-canvasjs-statusbar [role=dimensions] span:first-child {
    color: red;
}

.-canvasjs-statusbar [role=dimensions] span:last-child {
    color: blue;
}
