/*About Box
------------------------------------------*/
.about-bottom .x-form-textarea-body .x-form-trigger-wrap {
    border: none !important;
}

.about-bottom-text .x-form-field {
    padding-left: 0;
}


/* TextBox triggers
------------------------------------------*/

.starlims-trigger-arrow {
    font: 16px/16px FontAwesome;
    vertical-align: center;
    width: 20px;
}

    .starlims-trigger-arrow:before {
        /*content: '\f107';*/
    }

.starlims-trigger-ellipsis {
    font: 16px/16px FontAwesome;
    vertical-align: bottom;
    width: 20px;
}

    .starlims-trigger-ellipsis:before {
        content: '\f141';
    }

/* DateTimePicker triggers
------------------------------------------*/
.starlims-trigger-checked {
    font: 16px/16px FontAwesome;
    vertical-align: middle;
    width: 20px;
}

.starlims-trigger-unchecked {
    font: 16px/16px FontAwesome;
    vertical-align: middle;
    width: 20px;
}

.starlims-trigger-checked:before {
    content: '\f046';
}

.starlims-trigger-unchecked:before {
    content: '\f096';
}


/*Shell Loading Message
------------------------------------------*/
.x-mask-msg {
    padding: 10px;
    background: #d0d0d0;
    border-radius: 5px;
}

/*Shell mainview
------------------------------------------*/
.shell-main-view {
    background-color: white;
}

.app-main {
    background-color: #e3e3e3;
}

/*Shell Apps - Remove Border from Apps
------------------------------------------*/
.x-container .shell-application-hoster .x-box-item .x-container-default {
    border: none;
}

/*Shell topbar
------------------------------------------*/
.shell-main-view, .shell-main-view > .x-panel-body, .shell-topbar div {
    border: none;
}

.shell-topbar .x-panel-body-default {
    background-color: #009CDE;
    border: none;
}

.shell-topbar-button.x-btn, .shell-starlims-console-button.x-btn, .shell-topbar-button.x-btn-focus {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.shell-topbar-button.x-btn-over.x-btn, .shell-starlims-console-button.x-btn-over.x-btn {
    background-color: transparent;
}

.shell-topbar-button .x-btn-icon-el:hover {
    color: #F2E18C;
}

.shell-topbar-button:focus .x-btn-icon-el {
    color: #F2E18C;
}


/*Console button
------------------------------------------*/
a.shell-starlims-console-button.x-btn-over ::before {
    color: #ffe460;
}

a.shell-starlims-console-button.x-btn-focus ::before {
    color: #F2E18C;
}

a.shell-starlims-console-button {
    color: white;
    height: 48px;
    top: 0px;
}

.shell-starlims-console-button span {
    color: inherit;
}

    .shell-starlims-console-button span.x-btn-inner {
        font-family: 'roboto_condensedregular';
        font-weight: bold;
        font-size: 16pt;
        height: 48px;
        padding-top: 16px;
    }

/*Breadcrumbs
------------------------------------------*/
.shell-breadcrumbs {
    background-color: #f2f2f2;
    border-bottom: 1px solid #cccccc;
    font-weight: 400;
    color: #222731;
    padding-left: 5px;
}

/*Console
------------------------------------------*/

.shell-console-container,
.shell-console-container > .x-panel-body,
.shell-console div {
    border: none;
}

.shell-console .x-grid-body {
    border: none !important;
}

/* 
*Due to minor change in the structure when sencha upgraded to a newer version.
*Added x-panel-bodywrap to ensure that dashboard looks similar.
*/

.shell-console.x-tree-panel,
.shell-console > .x-panel-bodyWrap,
.shell-console > .x-panel-bodyWrap > .x-grid-header-ct,
.shell-console > .x-panel-bodyWrap > .x-panel-body,
.shell-console > .x-panel-bodyWrap > .x-panel-body .x-grid-item {
    background-color: #646464 !important;
}

    .shell-console > .x-panel-bodyWrap > .x-panel-body .x-grid-item {
        color: #cccccc;
    }

        .shell-console > .x-panel-bodyWrap .x-grid-item td.x-grid-item-focused {
            color: inherit;
        }

.shell-console .x-grid-cell-inner-treecolumn:before {
    border: none !important;
}

.shell-console .x-tree-elbow-img.x-tree-expander {
    color: #cccccc !important;
}

.shell-console .x-tree-icon {
    display: none;
}

.shell-console span.x-tree-node-text span.shell-console-parent,
.shell-console span.x-tree-node-text span.shell-console-leaf {
    font-family: 'robotoregular';
}

.shell-console span.shell-console-leaf {
    color: #F2F2F2;
}

.shell-console span.shell-console-parent {
    font-weight: 500;
    color: #F2F2F2;
}

.shell-console .x-grid-cell:hover span.shell-console-parent {
    color: #009CDE;
}

.shell-console .x-grid-cell:focus span.shell-console-parent {
    color: #009CDE;
}

.shell-console .x-grid-cell:focus span::before {
    color: #009CDE;
}

.shell-console .x-grid-item-focused span.shell-console-parent {
    color: #009CDE;
}

.shell-console .x-grid-item span.x-tree-node-text:hover {
    cursor: pointer;
}

.shell-console .x-grid-item .pin-app-button {
    display: none;
}

.shell-console .x-grid-item:hover .pin-app-button {
    display: inline;
}

.shell-console .x-grid-item .pin-app-button:focus {
    display: inline;
    color: #009CDE;
}

.shell-console .x-grid-item:hover span.x-tree-node-text > span::before {
    color: #009CDE;
}

.shell-console .x-grid-cell:focus span.x-tree-node-text > span::before {
    color: #009CDE;
}

.shell-console .x-grid-cell:focus span.x-tree-node-text > span > span {
    color: #009CDE;
}

.shell-console .x-grid-item:hover .shell-console-leaf {
    color: #009CDE;
}

    .shell-console .x-grid-item:hover .shell-console-leaf > span::before {
        color: #009CDE;
    }

.shell-console-container,
.shell-console-container > div.x-panel-body,
.shell-console, .shell-console > div.x-panel-body,
.app-main > div,
.app-main .x-box-target,
.shell-console .x-tree-view {
    height: 100% !important;
}


/*Console Pin Button
------------------------------------------*/
div.shell-console-container > div.x-panel-body,
.shell-console-toolbar {
    top: 0px !important;
}

.shell-console-toolbar {
    background: transparent;
    width: 30px !important;
    right: 20px !important;
    left: auto !important;
    border: none;
    height: 30px !important;
}

.shell-console-pin-button {
    right: auto !important;
    left: 0px !important;
    background: transparent;
    border: none;
    width: 20px;
}

    .shell-console-pin-button.x-btn-focus,
    .shell-console-pin-button.x-btn-over {
        box-shadow: none !important;
    }

        .shell-console-pin-button.x-btn-over .x-btn-icon-el,
        .shell-console-pin-button.x-btn-focus .x-btn-icon-el {
            color: #009CDE;
        }

    .shell-console-pin-button.x-btn-over,
    .shell-console-pin-button.x-btn-pressed,
    .shell-console-pin-button.x-btn-focus {
        background-color: transparent !important;
    }

.baseNotificationButton,
.baseNotificationButton:hover {
    background-color: #009CDE !important;
}

    .baseNotificationButton.x-btn-over .x-btn-icon-el,
    .baseNotificationButton.x-btn-focus .x-btn-icon-el {
        color: #F2E18C;
    }

    /*the circle with number over every button
------------------------------------------*/
    .baseNotificationButton .x-btn-text .x-btn-inner {
        display: inline-block;
        min-width: 26px;
        /*padding: 4px 13px 3px 4px;*/
        font-size: 9px;
        font-weight: 400;
        line-height: 2;
        color: #fff;
        white-space: nowrap;
        vertical-align: middle;
        background-color: #DE0B00;
        border-radius: 5px;
        position: inherit;
        top: -4px;
        margin-left: -12px;
        float: right;
    }

    .baseNotificationButton.animated .x-btn-text .x-btn-inner {
        animation: pound .5s 5;
    }

.baseNotificationButton {
    border: none;
}

    .baseNotificationButton.x-btn {
        box-shadow: none !important;
    }

/*color of the icon for notifications
------------------------------------------*/
.glyphRed .x-menu-item-glyph {
    color: red;
}


/*color of the icon for notifications
------------------------------------------*/
.glyphGreen .x-menu-item-glyph {
    color: green;
}

/* Notification Animation Settings
------------------------------------------*/

@keyframes pound {
    from {
        transform: none;
    }

    50% {
        transform: scale(1.4);
    }

    to {
        transform: none;
    }
}


















/*--------------------------------------------------------------STARLIMS PLATFORM HTML 

CONTROLS--------------------------------------------------------------*/

/*StarlimsTreeView*/
/*UseImages property*/
.starlims-control-treebody-images table td > div > img {
    display: none;
}

.starlims-control-treebody-images table td > div > span {
    padding-left: 0px;
}
/*End StarlimsTreeView*/


.x-form-itemselector-addAll {
    background-image: url(images/allRight.gif);
}
/* /home/teamcity/buildAgent/work/47e72153b7b97580/sencha/ext/packages/ux/classic/sass/src/form/ItemSelector.scss:20 */
.x-form-itemselector-removeAll {
    background-image: url(images/allLeft.gif);
}

/*------------------------------------------------------------END STARLIMS PLATFORM HTML 

CONTROLS------------------------------------------------------------*/