/*Dashboard*/
.shell-dashboard {
    background-color: #fff;
}

    .shell-dashboard > div.x-box-inner {
        overflow: auto !important;

        width: 100% !important;
        height: 100% !important;
    }

    .shell-dashboard.pinned > div.x-box-inner { 
            /*overflow: inherit;*/
    }

    .shell-dashboard div.x-box-target {
            /*overflow: auto;*/
    }

.shell-dashboard-edit {
    
}
.shell-dashboard-edit ul {
        min-height: 172px;
        background-position: 5px -4px;
        background-color: #DADADA;
        background-size:170px 170px;
        background-image:
                        linear-gradient(0deg, rgba(232, 232, 232, 0) 0, rgba(232, 232, 232, 0) 94%, rgba(232, 232, 232, 1) 95%, rgba(232, 232, 232, 1) 100%)
                        , linear-gradient(90deg, rgba(232, 232, 232, 0) 0, rgba(232, 232, 232, 0) 94%, rgba(232, 232, 232, 1) 95%, rgba(232, 232, 232, 1) 100%);
    }

.shell-dashboardform {
}

.x-css-shadow {
    border-radius: 50%;
    box-shadow: rgb(136, 136, 136) 0px 0px 0px !important;
}

/*
* x-layer class is overrided here to solve the icon issue.
* As sencha old version doesn't set top & left in x-layer class
* but new version sets top & left which overrided the top and left value.
*/
.dashboard-button.x-layer {
    top: initial !important;
    left: initial !important;
}

.dashboard-button {
    font-size: 22px;
    color: #f0f0f0; 
    position: absolute;
    width: 41px;
    height: 41px;
    padding-left: 14px;
    padding-top: 9px;
    padding-right: 17px;
    padding-bottom: 19px;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28);*/
    border: 0;
    border-radius: 50%;
    /*transition: all 0.5s cubic-bezier(.08,1.08,.58,1.11);
    transform: scale(1);*/
}

.dashboard-button:hover {
    /*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.31);
    transform: scale(1.03);*/
}

.dashboard-button-edit {
    /*right: 274px;
    bottom: 379px;*/
    height: 20px;
    width:20px;
    border-radius: 0;
    background: transparent;
    padding:0px;
    top: 57px !important;
    right: 270px;
  /*  font-size:20px !important;*/
}

.dashboard-button-edit.expanded {
    right:  270px;
}
.dashboard-button-edit.x-btn-focus,.dashboard-button-edit..x-btn-over{
background-color:transparent ;
}
.dashboard-button-ok {
    /*background-color: #009cde !important;*/

    bottom: 60px;
    right: 91px;
}

.dashboard-button-ok.x-btn-over {
  /*  background-color: #609226 !important;

    border-bottom-color: #588514 !important;*/
}

.dashboard-button-ok-role {
    bottom: 60px;
    right: 181px;
}

.dashboard-button-cancel {
  /*  background-color: #009cde !important;*/

    bottom: 60px;
    right: 30px;
}

.dashboard-button-cancel.x-btn-over {
   /* background-color: #972E26 !important;

    border-bottom-color: #8F2114 !important;*/
}

.dashboard-button-restore {
    bottom: 60px;
    right: 301px;
}

.dashboard-button-restore-role {
    bottom: 60px;
    right: 241px;
}

.dashboard-restore-role-menu-title {
    padding-left: 6px;
}

.dashboard-button-add {
    bottom: 60px;
    right: 361px;
}

.button-link, .button-link.x-btn-pressed, .button-link.x-btn-focus {
    background-color: transparent !important;
    padding: 7px 0px 0px 4px;
    border: 0;
    background-image: none;
    box-shadow: 0px 0px 0px 0px white !important;
}

.button-link:hover {
    background-color: transparent;
    padding: 7px 0px 0px 4px;
    border: 0;
}

.button-link span.x-btn-inner {
    color: #646464;
    font-family: 'robotoregular' !important;
    font-size: 12px;
    padding: 0;
}

.button-link:hover span.x-btn-inner, .button-link.x-btn-focus span.x-btn-inner {
	color: #009CDE;
}

.button-link span.x-btn-icon-el {
    color: #646464;
}

.button-link:hover span.x-btn-icon-el, .button-link.x-btn-focus span.x-btn-icon-el  {
	color: #009CDE;
}

.shell-app-hoster-parent, .shell-app-hoster-parent > div {
    overflow: visible;
}


/*Dashboard Form*/
div.x-toolbar.dashboardform-menu {
    padding-right: 4px;
    background-color:#f2f2f2;
}

.dashboardform-button {
    font-size: 20px;
    color: #009cde !important;
    width: 35px;
    height: 35px;
    padding-left: 0px !important;
    padding-top: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 12px !important;
    margin: 2px !important;
}

.dashboardform-button-refresh {
}

.dashboardform-button-config {
}

.dashboardform-button-delete {
}

.dashboardform-button-roles {
    padding-right: 12px !important;
}
.dashboardform-button-refresh .x-btn-icon-el-default-toolbar-small,
.dashboardform-button-config .x-btn-icon-el-default-toolbar-small,
.dashboardform-button-delete .x-btn-icon-el-default-toolbar-small,
.dashboardform-button-roles .x-btn-icon-el-default-toolbar-small{
    color:#009cde;
}
.dashboardform-button-roles-menu-title {
    padding-left: 40px;
}

/*Gridster*/
.gridster *:not(a) {
  margin:0 !important;
  padding:0;
}

ul {
  list-style-type: none;
}

.controls {
    margin-bottom: 20px;
}

.gridster ul {
    /*background-color: #EFEFEF;*/
}

.gridster li {
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    line-height: 100%;
}


.gridster {
    margin: 0 auto;

    opacity: .8;

    -webkit-transition: opacity .6s;
    -moz-transition: opacity .6s;
    -o-transition: opacity .6s;
    -ms-transition: opacity .6s;
    transition: opacity .6s;
}

.gridster .gs-w {
    background-color: #fff;
    cursor: default;

    /*box-shadow: 2px 2px 3px #DADADA;*/
}

.gridster.draggable .gs-w {
    cursor: move;
}

.gridster.draggable .gs-w.dragging.player {
    box-shadow: 4px 4px 20px #A9A9A9;
}

.gridster.draggable .gs-w.dragging.player.leftdrag {
    transform: scale(1.05, 1.05) rotateZ(-1deg);
}

.gridster.draggable .gs-w.dragging.player.rightdrag {
    transform: scale(1.05, 1.05) rotateZ(1deg);
}

.gridster.draggable .gs-w.dragging.player.topdrag {
    transform: scale(1.05, 1.05) rotate3D(1, -1, 0, 15deg);
}

.gridster.draggable .gs-w.dragging.player.bottomdrag {
    transform: scale(1.05, 1.05) rotate3D(1, 1, 0, 15deg);
}

.gridster .player {
    background: #BBB;
}


.gridster .preview-holder {
    z-index: 1;
    position: absolute;
    background-color: #fff;
    border-color: #fff;
    opacity: 0.3;
}

/*Dashboard - Add Parts*/
#images-view .x-panel-body {
    background: white;
    font: 11px Arial, Helvetica, sans-serif;

     overflow-y: scroll; 
}
#images-view .thumb{
    background: #dddddd;
    padding: 3px;
    padding-bottom: 0;
}

.x-quirks #images-view .thumb {
    padding-bottom: 3px;
}

#images-view .thumb img{
    height: 240px;
    width: 320px;
}
#images-view .thumb-wrap{
    float: left;
    margin: 4px;
    margin-right: 0;
    padding: 5px;
}
#images-view .thumb-wrap span {
    
    display: block;
    overflow: hidden;
    text-align: center;
    width: 100%;
}

#images-view .x-item-over{
    border:1px solid #dddddd;
    background: #efefef url(over.gif) repeat-x left top;
    padding: 4px;
}

#images-view .x-item-selected{
    background: #eff5fb url(selected.gif) no-repeat right bottom;
    border:1px solid #99bbe8;
    padding: 4px;
}
#images-view .x-item-selected .thumb{
    background:transparent;
}

#images-view .loading-indicator {
    font-size:11px;
    background-repeat: no-repeat;
    background-position: left;
    padding-left:20px;
    margin:10px;
}

.x-view-selector {
    position:absolute;
    left:0;
    top:0;
    width:0;
    border:1px dotted;
    opacity: .5;
    -moz-opacity: .5;
    filter:alpha(opacity=50);
    zoom:1;
    background-color:#c3daf9;
    border-color:#3399bb;
}
.ext-strict .ext-ie .x-tree .x-panel-bwrap{
    position:relative;
    overflow:hidden;
}
.x-editable {
    color: #000;
}

/*Widget Add*/
.shell-widgetadd > div.x-panel-body {
    overflow-y: scroll;
}

.shell-widgetadd div.x-tool-close {
    margin-left: -11px;
}

.shell-widgetadd div.x-tool-save {
    margin-left: -20px;
}

.shell-widgetadd-hidden {
    border-width: 0px;
}

/*Parts*/
.dashboard-cartesian,
    .dashboard-cartesian div.x-panel-body,
    .dashboard-cartesian div.x-legend-panel > div.x-panel-body,
    .dashboard-cartesian div.x-legend-container,
    .dashboard-cartesian div.x-legend-item {
    border: none;
}

.dashboardform,
    .dashboardform div.x-panel-body,
    .dashboardform div.x-legend-panel > div.x-panel-body,
    .dashboardform div.x-legend-container,
    .dashboardform div.x-legend-item {
    border: none;
}

.dashboardform div.x-panel-header {
    background-color: white;
    border: none;
}

.dashboardform div.x-title-text {
    /*text-align: center;*/
    color: #646464;
}

/*Widget Config*/
.shell-widgetconfig {
}

.shell-widgetconfigform {
    margin: 4px;
}

.shell-widgetconfigform > div {
    border: none;
}
/** New dashboard design
==============================================================*/
.gridster {
	background-color: #fff !important;
}
.x-tree-view.shell-tabbable{
    margin-left:5px !important;
}
.shell-console-container .x-panel-header-title-default{
    font-family:robotoregular;
}
.dashboardform-menu {
    border-width: 1px 1px 0px 1px !important;
	border-color: #ccc !important;
	border-style:solid !important;
}
.slider-button{
	border-radius:5px;
	background-color:#ccc !important;
	color:#646464 !important;
	height:30px !important;
	top: 50% !important;
}
.shell-console-container{
	overflow:visible !important;
}
.slider-button.x-btn-docked-left {
    left: -7px !important;
}
.slider-button.x-btn-docked-right {
    left: 243px !important;
}

.slider-button .x-btn-icon-el-default-small{
	color: #646464;
	position: relative;
    top: 20%;
}
.dashboard-button-edit .x-btn-icon-el-default-small{
    color:#646464;
    font-size:12px;
}
.shell-tabbable .x-grid-tree-node-leaf .fa-file-o:before {
    display: none !important;
}
.shell-tabbable .x-tree-elbow-img{
    display: none;   
}
.shell-tabbable .x-grid-item .x-grid-tree-node-leaf .x-tree-node-text {
    margin-left: 20px !important;
}
.labelBreadcrumbs .x-panel-body-default{
    top:7px !important;
    left:0px !important;
    background-color:#f2f2f2;
    overflow:visible !important;
}
.dashboard-button.x-layer.dashboard-button-edit {
    top: 55px !important;
}
.dashboard-button-edit:hover,.dashboard-button-edit:focus{
    background-color: transparent !important;
    box-shadow: white 0px 0px 0px;
}
.dashboard-button-edit .x-btn-icon-el-default-small:hover {
    color: #009cde;
}
.x-keyboard-mode .dashboard-button-edit.x-btn-focus.x-btn-over.x-btn-default-small{
     box-shadow: white 0px 0px 0px !important;
}
.shell-topbar .x-btn-wrap-default-small.x-btn-arrow-right:after{
    content:none;
}
.shell-topbar .x-btn-arrow-right > .x-btn-icon.x-btn-no-text.x-btn-button-default-small{
    padding-right:unset;
 }