:root {
    --primary_color: #7ca0ea;
    --dark_color: #1d3463;
    --primary_color_trasparent4: rgba(75, 97, 209, 0.4);
    --primary_color_trasparent1: rgba(75, 97, 209, 0.1);
    --primary_color_trasparent7: rgba(75, 97, 209, 0.7);
}

.labelInfo{
    margin:5px;
    font-size: 15px;

}

.x-tab-bar-default-top > .x-tab-bar-body-default {
    padding: 4px 4px 0 8px!important;
}
.x-tab-default-top {
    padding-top: 4px!important;
    padding-right: 10px!important;
    padding-bottom: 4px!important;
    padding-left: 10px!important;
}

.x-grid-item-selected{
    color: #000!important;
}
.x-grid-item-focused{
    color: #000!important;
}

.x-grid-item{
    color: #000!important;
}
.x-panel-header-default-horizontal {
    padding-top: 5px!important;
    padding-right: 15px!important;
    padding-bottom: 5px!important;
    padding-left: 15px!important;
}
.x-panel-header-default-vertical {
    padding-top: 15px;
    padding-right: 5px;
    padding-bottom: 15px;
    padding-left: 5px;
}


.x-box-inner {
    /* overflow: hidden; */
    overflow: visible;
    position: relative;
    left: 0;
    top: 0;
}

.x-boundlist-selected {
    color: var(--primary_color);
    background: var(--primary_color_trasparent4);
    border-color: var(--primary_color_trasparent4);
}
.x-boundlist-item-over {
    color:var(--primary_color);
    background: var(--primary_color_trasparent4);
    border-color: var(--primary_color_trasparent4);
}

.x-form-itemselector-top {
    background-image: url(image/itemselector/top.gif)
}

.x-form-itemselector-up {
    background-image: url(image/itemselector/up.gif)
}

.x-form-itemselector-add {
    background-image: url(image/itemselector/right.gif)
}

.x-form-itemselector-allright {
    background-image: url(image/itemselector/all-right.gif)
}
.x-form-itemselector-allleft {
    background-image: url(image/itemselector/all-left.gif)
}

.x-form-itemselector-remove {
    background-image: url(image/itemselector/left.gif)
}

.x-form-itemselector-down {
    background-image: url(image/itemselector/down.gif)
}

.x-form-itemselector-bottom {
    background-image: url(image/itemselector/bottom.gif)
}

.tableInfo {
    border: 1px solid var(--primary_color);
    border-collapse: collapse;
    margin:5px

}
.tableInfo th{
    background-color: var(--primary_color_trasparent4);
    border:1px solid var(--primary_color);
    padding-left:5px;
    padding-right:5px
}
.tableInfo td{
    border:1px solid var(--primary_color);
    padding-left:5px;
    padding-right:5px
}

/*FONT*/
.x-body, .x-panel-header-title-default,.x-progress-default .x-progress-text,
.x-btn-inner-default-large,.x-btn-inner-default-small,.x-btn-inner-default-toolbar-medium,.x-btn-inner-default-toolbar-large,
.x-btn-inner-default-medium,.x-btn-inner-default-toolbar-small,.x-toolbar-text-default,.x-toolbar-text-footer,
.x-panel-header-title-default,.x-panel-body-default, .x-panel-header-title-default-framed,
.x-panel-body-default-framed,.x-window-body-default,.x-window-header-title-default,
.x-form-display-field-defaul,.x-html-editor-wrap textarea,.x-grid-empty,.x-grid-item,
.x-column-header,.x-btn-inner-grid-cell-small,.x-grid-group-title,.x-grid-rowbody,.x-grid-row-summary .x-grid-cell,
.x-grid-row-summary .x-grid-rowwrap,.x-grid-row-summary .x-grid-cell-rowbody,
.x-menu-item-text-default,.x-menu-item-text-default-menubar, .x-accordion-hd .x-panel-header-title,
.x-tab-inner-default,.x-mask-msg-inner,.x-dd-drag-proxy,.x-panel-header-title-default,.x-btn-group-header-title-default,
.x-btn-group-header-title-default-framed,.x-form-item-label-default,.x-form-invalid-under-default,
.x-form-text-default,.x-form-cb-label-default,.x-fieldset-header-default>.x-fieldset-header-text,
.x-boundlist-item,.x-datepicker-column-header,.x-datepicker-date,.x-monthpicker-item,
.x-form-display-field-default,.x-btn-inner-plain-toolbar-small,.x-btn-inner-plain-toolbar-medium,.x-btn-inner-plain-toolbar-large,
.x-panel-header-title-light,.x-panel-body-light, .x-panel-header-title-light-framed,.x-panel-body-light-framed
{
    font-family: 'Montserrat', 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
}



/* SOVRASCRIVE STYLE EXT*/


.x-panel-header-default,
.x-tab-bar-default {
    background-color: var(--primary_color);
    border: 1px solid var(--dark_color);
}
.x-panel-header-default .x-tool-tool-el {
    background-color: var(--dark_color);
}
.x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
    color:  var(--primary_color);
}
.x-panel-default {
    border-color: var(--primary_color);
    padding: 0;
}
.x-tree-icon-parent {
    font-size: 16px;
    font-family: FontAwesome;
    color: var(--primary_color);
}


.x-toolbar-default {
    padding: 6px 0 6px 8px;
    border-style: solid;

    border-width: 1px;
    background-image: none;
  /*   border-color: var(--primary_color);
  background-color: var(--primary_color);*/
    border-color: white;
    background-color: white;
}
.x-btn-default-toolbar-small {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 6px;
    padding: 7px 7px 7px 7px;
   /* border-width: 1px;*/
    border-style: solid;
    background-color: var(--primary_color);
}



.x-btn-inner-default-toolbar-small {
    font: 400 12px/16px 'Montserrat', 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
    color: white;
    padding: 0 5px;
    max-width: 100%;
}

.x-message-box-no {
    background-color:white!important;

}
.x-message-box-no .x-btn-inner {
    color: var(--primary_color) !important;   }

.x-btn.x-btn-disabled.x-btn-default-toolbar-small {
    background-image: none;
    background-color: var(--primary_color);
}

.x-tab-focus.x-tab-default {
    border-color: transparent;
    background-color: transparent;
    outline: 0px;
}

.x-btn-disabled.x-btn-default-toolbar-small {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    opacity: 0.3;
}
.x-btn-default-small {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-color: var(--primary_color)!important;
    border-style: solid!important;
    border-width: 2px !important;
    border-radius: 6px;
    padding: 7px 7px 7px 7px;

    background-color:var(--primary_color);
    border-color: var(--primary_color);
}
.x-btn-focus.x-btn-default-small,
.x-btn-focus.x-btn-over.x-btn-default-small{
    background-color:var(--primary_color);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }


.x-btn-over.x-btn-default-small {
    border-color:var(--dark_color);
    background-color:var(--primary_color);
}

.x-menu-item-default.x-menu-item-focus,
.x-menu-item-default.x-menu-item-active {

    background-color: var(--primary_color);
}

.x-btn-default-toolbar-small.x-arrow-focus .x-btn-arrow-el {
    border: 1px solid var(--primary_color);
}
.x-btn-over.x-btn-default-toolbar-small,
.x-btn-focus.x-btn-default-toolbar-small,
.x-btn-focus.x-btn-menu-active.x-btn-default-small,
.x-btn-focus.x-btn-pressed.x-btn-default-small,
.x-btn.x-btn-menu-active.x-btn-default-toolbar-small,
.x-btn.x-btn-pressed.x-btn-default-toolbar-small
{
   border-color: var(--dark_color);
   background-color: var(--dark_color);
}
.x-btn-focus.x-btn-over.x-btn-default-toolbar-small {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.x-btn-wrap-default-toolbar-small.x-btn-arrow-right:after {
    width: 18px;
    content: "\f0d7";
    font: 16px/1 FontAwesome;
    color: white;
}
.x-window-header-default {
    font-size: 16px;
    border-color: var(--primary_color);
    }
.x-window-default {
    border-color: var(--primary_color)}

.x-window-header-default-top {border-style: solid;
    background-color: var(--primary_color);}

.x-window-header-default .x-tool-img {
    background-color: var(--dark_color);
}
.x-tab.x-tab-active.x-tab-default,
.x-tab-default-top,
.x-tab.x-tab-active.x-tab-default .x-tab-inner-default{
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
.x-form-radio-default {
    font: 18px/1 FontAwesome;
    color:var(--primary_color);
}
.x-form-checkbox-focus.x-form-radio-default {
    color: var(--primary_color);
}
.x-form-checkbox-focus.x-form-checkbox-default {
    color: var(--primary_color);
}

.x-tree-checkbox {
    margin-right: 6px;
    top: 7px;
    width: 18px;
    height: 18px;
    font: 18px/1 ExtJS;
    color:var(--primary_color);
}
.x-grid-tree-node-expanded .x-tree-elbow-plus, .x-grid-tree-node-expanded .x-tree-elbow-end-plus {
    font-size: 14px;
    font-family: FontAwesome;
    color:var(--primary_color);
}
.x-tree-icon-parent-expanded {
    font-size: 16px;
    font-family: FontAwesome;
    color:var(--primary_color);
}

.x-tree-icon-leaf {
    font-size: 16px;
    font-family: FontAwesome;
    color:var(--primary_color);
}

.x-tree-elbow-plus, .x-tree-elbow-end-plus {
    font-size: 14px;
    font-family: FontAwesome;
    color:var(--primary_color);
}

.myToolMenuLinkCls{
    font: normal normal 600 16px/36px Montserrat;
    color:var(--primary_color);
    text-decoration: none;
    margin-right: 10px!important;
   /* margin-left: 10px!important;*/
    padding: 0px 5px 0px 5px;
    border-radius: 6px;
}

.myToolMenuLinkCls:hover{
    background-color:var(--primary_color_trasparent1);
}

/* SOVRASCRIVE STYLE OL*/

.ol-zoom-extent
{
    top: 0.5em;
    left: 2.5em;
}
.ol-zoom-extent-GE
{
    top: 0.5em;
    left: 4.5em;
}
.ol-zoom-extent-SV
{
    top: 0.5em;
    left: 6.5em;
}

.ol-control button:focus, .ol-control button:hover {
    text-decoration: none;
    background-color: var(--primary_color_trasparent4);
}
.ol-control button {
    display: block;
    margin: 1px;
    padding: 0;
    color: #fff;
    font-size: 1.14em;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    height: 1.375em;
    width: 1.375em;
    line-height: .4em;
    background-color: var(--primary_color_trasparent4);
    border: none;
    border-radius: 2px;
}
.ol-scale {
    background-color: var(--primary_color_trasparent4);
    bottom: .5em !important;;
 }
.ol-dragzoom {
    border: 3px solid red !important;
    background-color: rgba(255, 255, 255, 0.4);
}
.custom-mouse-position {
    background-color: var(--primary_color_trasparent7);
    color:white;
    border: none;
    border-radius: 2px;
    top: 8px;
    right: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 5px;
    position: absolute;
}
.custom-scale-line {
    background: rgba(140, 140, 140, 0.4);
    border: none;
    border-radius: 2px;
    bottom: 8px;
    left: 8px;
    padding: 2px;
    position: absolute;
}
.custom-zoom-slider {
    top: 100px;
    left: .5em;
    height: 200px;
}
.myLocationCls {
    background-image: url('image/my-location.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}

/* STYLE della APP*/

/* etichette per misure su mappa (OL)*/
.tooltip {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    opacity: 0.7;
    white-space: nowrap;
}
.tooltip-measure {
    opacity: 1;
    font-weight: bold;
}
.tooltip-measure-static {
    background-color: #ffcc33;
    color: black;
    border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-measure-static:before {
    border-top: 6px solid rgba(0, 0, 0, 0.5);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: "";
    position: absolute;
    bottom: -6px;
    margin-left: -7px;
    left: 50%;
}
.tooltip-measure-static:before {
    border-top-color: #ffcc33;
}

.layerTreeInteractiveNode span{
    font-weight: bold;
    color: var(--primary_color);
    font-style: italic;
}

.iconFaButtonColor{
    font: 18px/1 FontAwesome;
    color: var(--primary_color);
}

.iconFaButtonColorBig{
    font: 24px FontAwesome;
    color: var(--primary_color);
}

.iconFaButtonColorMedium{
    font: 21px FontAwesome;
    color: var(--primary_color);
}

.iconFaButtonWhite{
    font: 18px/1 FontAwesome;
    color: white;
}

.iconFaButtonHome{
    font: 18px/1 FontAwesome;
    color: var(--primary_color_trasparent4);
}

.iconFaButtonSelect{
    font: 18px/1 FontAwesome;
    color: #ff9900;
    /*color: #7C243C;*/
 }

.iconFaButtonColorWhiteBig{
    font: 24px FontAwesome;
    color: white;
}

.baseBtnClsOverride{
   width: 30px!important;
    height: 30px!important;;
}

.hideNodeClass {
    visibility: hidden;
}

/* style per Cmp EXT*/
/*
.historyCls{
    background-image: url('image/history.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.historyCls_white{
    background-image: url('image/history_white.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.searchCls {
    background-image: url('image/search.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.searchCls_white {
    background-image: url('image/search_white.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.infoCls_white {
    background-image: url('image/info_white.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.infoCls {
    background-image: url('image/info.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.laodCls_white{
    background-image: url('image/file-upload_white.svg') !important;
    background-size: contain !important;
    border-style: none !important;}
.laodCls{
    background-image: url('image/file-upload.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.measCls {
    background-image: url('image/ruler.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.measCls_white {
    background-image: url('image/ruler_white.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.sketchCls {
    background-image: url('image/palette.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.sketchCls_white {
    background-image: url('image/palette_white.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.printCls {
    background-image: url('image/print.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.printCls_white {
    background-image: url('image/print_white.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.clearSearchCls {
    background-image: url('image/eraser.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.clearSearchCls_white {
    background-image: url('image/eraser_white.svg') !important;
    background-size: contain !important;
    border-style: none !important;
}
.infoClass{
   background-image: url('image/info-circle.svg') !important;
    fill: var(--dark_color);
    background-size: contain !important;
    border-style: none !important;
 }
.infoInteractiveClass{
   background-image: url('image/hand-point-up.svg') !important;
   fill: var(--dark_color);
   background-size: contain !important;
   border-style: none !important;
}
.searchClass{
   background-image: url('image/search.svg') !important;
   background-size: contain !important;
   border-style: none !important;
   width: 25px;
   height: 25px;
   background: white;
}
.searchAddressCls {
   background-image: url('image/search-location.svg') !important;
   background-size: contain !important;
   border-style: none !important;
 }
.searchSpatialCls {
   background-image: url('image/map-marked-alt.svg') !important;
   background-size: contain !important;
   border-style: none !important;
}

.deleteclass{
   width: 30px;
   height: 30px;
   background: white;
   background-repeat: no-repeat;
   background-image: url('image/delete.svg') !important;
   background-size: contain !important;
   border-style: none !important;
}
.downloadClass{
   width: 30px;
   height: 30px;
   background: white;
   background-repeat: no-repeat;
   background-image: url('image/download.svg') !important;
   background-size: contain !important;
   border-style: none !important;
}
.uploadClass{
   width: 30px;
   height: 30px;
   background-repeat: no-repeat;
   background-image: url('image/upload.svg') !important;
   background-size: contain !important;
   border-style: none !important;
}

.historyForwardButtonCls {
   width: 30px;
   height: 30px;
   background: white;
   background-repeat: no-repeat;
   background-image: url('image/redo.svg') !important;
   background-size: contain !important;
   border-style: none !important;
}
.historyForwardButtonCls :hover {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-image: url('image/redo.svg') !important;
   background-repeat: no-repeat;
   background-size: contain !important;
border-style: none !important;
}
.historyForwardButtonCls :active {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-image: url('image/redo.svg') !important;
   background-repeat: no-repeat;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02 !important;
}*/
.historyForwardButtonCls_pressed {
   /*width: 30px;
   height: 30px;

   background-image: url('image/redo.svg') !important;
   background-repeat: no-repeat;
   background-size: contain !important;
    background: #cacaca;*/

   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02 !important;
}
/*
.historyForwardButtonCls :focus {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-image: url('image/redo.svg') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02 !important;
}

.historyBackButtonCls {
   width: 30px;
   height: 30px;
   background: white;
   background-repeat: no-repeat;
   background-image: url('image/undo.svg') !important;
   background-size: contain !important;
   border-style: none !important;
}
.historyBackButtonCls :hover {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-image: url('image/undo.svg') !important;
   background-repeat: no-repeat;
   border-style: none !important;
}
.historyBackButtonCls :active {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-image: url('image/undo.svg') !important;
   background-repeat: no-repeat;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02 !important;
}
.historyBackButtonCls :focus {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-image: url('image/undo.svg') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02 !important;
}*/
.historyBackButtonCls_pressed {
   /*width: 30px;
   height: 30px;
    background-image: url('image/undo.svg') !important;
    background-repeat: no-repeat;
    background-size: contain !important;
    background: #cacaca;*/
    border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02 !important;
}
/*
.measureButtonCls {
   width: 30px;
   height: 30px;
   background: white;
   background-repeat: no-repeat;
   background-image: url('image/ruler.svg') !important;
   background-size: contain !important;
   border-style: none !important;
}
.measureButtonCls :hover {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-image: url('image/ruler.svg') !important;
   background-repeat: no-repeat;
   background-size: contain !important;
   border-style: none !important;
}
.measureButtonCls :active {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-image: url('image/ruler.svg') !important;
   background-repeat: no-repeat;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02 !important;
}
.measureButtonCls :focus {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-image: url('image/ruler.svg') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02 !important;
}
*/

.measureButtonCls_pressed {
    /*width: 30px;
    height: 30px;
     background-image: url('image/ruler.svg') !important;
     background-repeat: no-repeat;
     background-size: contain !important;
    background: #cacaca;*/
    border-style: solid !important;
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #ff1a02 !important;
}
/*
.measureAreaButtonCls {
   width: 30px;
   height: 30px;
   background: white;
   background-repeat: no-repeat;
   background-image: url('image/ruler-combined.svg') !important;
   background-size: contain !important;
   border-style: none !important;

}
.measureAreaButtonCls :hover {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-repeat: no-repeat;
   background-image: url('image/ruler-combined.svg') !important;
   background-size: contain !important;
   border-style: none !important;
}
.measureAreaButtonCls :active {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-repeat: no-repeat;
   background-image: url('image/ruler-combined.svg') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.measureAreaButtonCls :focus {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-repeat: no-repeat;
   background-image: url('image/ruler-combined.svg') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
*/

.measureAreaButtonCls_pressed {
 /*   width: 30px;
    height: 30px;
    background: #cacaca;
    background-repeat: no-repeat;
    background-image: url('image/ruler-combined.svg') !important;
    background-size: contain !important;*/
    border-style: solid !important;
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #ff1a02;
}

.sketchPointButtonCls {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_point.png') !important;
   background-size: contain !important;
   border-style: none !important;

}
.sketchPointButtonCls :hover {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_point_hover.png') !important;
   background-size: contain !important;
   border-style: none !important;
}
.sketchPointButtonCls :active {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_point_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchPointButtonCls_pressed {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_point_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchPointButtonCls :focus {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_point_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchLineButtonCls {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_line.png') !important;
   background-size: contain !important;
   border-style: none !important;

}
.sketchLineButtonCls :hover {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_line_hover.png') !important;
   background-size: contain !important;
   border-style: none !important;
}
.sketchLineButtonCls :active {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_line_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchLineButtonCls_pressed {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_line_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchLineButtonCls :focus {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_line_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchLineFreeButtonCls {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_linefree.png') !important;
   background-size: contain !important;
   border-style: none !important;

}
.sketchLineFreeButtonCls :hover {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_linefree_hover.png') !important;
   background-size: contain !important;
   border-style: none !important;
}
.sketchLineFreeButtonCls :active {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_linefree_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchLineFreeButtonCls_pressed {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_linefree_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchLineFreeButtonCls :focus {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_linefree_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchPolygonFreeButtonCls {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_polygonfree.png') !important;
   background-size: contain !important;
   border-style: none !important;

}
.sketchPolygonFreeButtonCls :hover {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_polygonfree_hover.png') !important;
   background-size: contain !important;
   border-style: none !important;
}
.sketchPolygonFreeButtonCls :active {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_polygonfree_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchPolygonFreeButtonCls_pressed {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_polygonfree_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchPolygonFreeButtonCls :focus {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_polygonfree_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchPolygonButtonCls {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_polygon.png') !important;
   background-size: contain !important;
   border-style: none !important;

}
.sketchPolygonButtonCls :hover {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_polygon_hover.png') !important;
   background-size: contain !important;
   border-style: none !important;
}
.sketchPolygonButtonCls :active {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_polygon_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchPolygonButtonCls_pressed {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_polygon_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchPolygonButtonCls :focus {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_polygon_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchCircleButtonCls {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_circle.png') !important;
   background-size: contain !important;
   border-style: none !important;

}
.sketchCircleButtonCls :hover {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_circle_hover.png') !important;
   background-size: contain !important;
   border-style: none !important;
}
.sketchCircleButtonCls :active {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_circle_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchCircleButtonCls_pressed {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_circle_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchCircleButtonCls :focus {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_circle_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchRectButtonCls {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_rect.png') !important;
   background-size: contain !important;
   border-style: none !important;

}
.sketchRectButtonCls :hover {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_rect_hover.png') !important;
   background-size: contain !important;
   border-style: none !important;
}
.sketchRectButtonCls :active {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_rect_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchRectButtonCls_pressed {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_rect_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.sketchRectButtonCls :focus {
   width: 30px;
   height: 30px;
   background: white;
   background-image: url('image/draw_rect_sel.png') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.annotateButtonCls {
   width: 30px;
   height: 30px;
   background: white;
   background-repeat: no-repeat;
   background-image: url('image/annotate.svg') !important;
   background-size: contain !important;
   border-style: none !important;
}
.annotateButtonCls :hover {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-repeat: no-repeat;
   background-image: url('image/annotate.svg') !important;
   background-size: contain !important;
   border-style: none !important;
}
.annotateButtonCls :active {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-repeat: no-repeat;
   background-image: url('image/annotate.svg') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}
.annotateButtonCls :focus {
   width: 30px;
   height: 30px;
   background: #cacaca;
   background-repeat: no-repeat;
   background-image: url('image/annotate.svg') !important;
   background-size: contain !important;
   border-style: solid !important;
   border-width: thin !important;
   border-radius: 4px !important;
   border-color: #ff1a02;
}

.userNameBox {
    display: flex;
    width: 100%;
    vertical-align: middle;
    padding: 5px 10px;
    min-height: 40px;
    background-color: #6a6a6a;
    color: #fff;
}

.userProfileBox {
    display: flex;
    width: 100%;
    vertical-align: middle;
    padding: 10px 10px;
    min-height: 40px;
    background-color: #4b61d1;
    color: #fff;
}

.vertical-center {
    -ms-flex-align: center!important;
    align-items: center!important;
}