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

    .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 {
        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%;
}

/*
* 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: 38px;

    color: #f0f0f0;
    
    position: absolute;

    width: 56px;
    height: 56px;

    padding-left: 0px;
    padding-top: 0px;

    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: 323px;
    bottom: 23px;
}

.dashboard-button-edit.expanded {
    right: 22px;
}

.dashboard-button-ok {
    background-color: #689F38 !important;

    bottom: 23px;
    right: 123px;
}

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

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

.dashboard-button-ok-role {
    bottom: 23px;
    right: 423px;
}

.dashboard-button-cancel {
    background-color: #9F3B38 !important;

    bottom: 23px;
    right: 23px;
}

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

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

.dashboard-button-restore {
    bottom: 23px;
    right: 273px;
}

.dashboard-button-restore-role {
    bottom: 23px;
    right: 523px;
}

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

.dashboard-button-add {
    bottom: 123px;
    right: 23px;
}

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

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

.button-link span.x-btn-inner {
    color: black;
    font-family: 'robotoregular';
    font-size: 13px;
    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: black;
}

.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;
}

.dashboardform-button {
    font-size: 27px;

    color: #f0f0f0;
    
    width: 35px;
    height: 35px;

    padding-left: 0px !important;
    padding-top: 0px !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-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: white;
    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;
}
#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-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: #666666;
}

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

.shell-widgetconfigform {
    margin: 4px;
}

.shell-widgetconfigform > div {
    border: none;
}