/* ============================== PALETTE ============================== */
/*
    #FAB450 : Main accent
    #FAF6C7 : Highlight
    #F5EC8A : Highlight Border
*/

/* ============================== HEADER ============================== */
.x-panel-header .x-panel-header-title {
    color: #666;
    line-height: normal;
    margin-bottom: 12px;
}


/* ============================== HEADER BADGES ============================== */

.header-badge.type-button,
.header-badge.toggled-on {
    border-color: #FAB450;
    color: #FAB450;
}

    .header-badge.type-button:before,
    .header-badge.toggled-on:before {
        color: #FAB450;
    }

.header-badge.unreadtickets:before {
    content: '%';
}

.header-badge.pendingbrainbusinessforms:before {
    content: '$';
}

.header-badge.powerfinder:before {
    content: '4';
}


/* ============================== BADGES ============================== */

.x-badge {
    background-color: #FAB450;
    border-color: #FAB450;
}

    .x-badge .x-badge-inner {
        color: #FAB450;
    }


/* ============================== HDA HEADER CALLOUT ============================== */

.logon-info-callout {
    border: 2px solid #FAB450;
    border-radius: 0;
    z-index: 10100;
    box-shadow: 0 0 20px #666;
}

    .logon-info-callout.x-callout-top .x-callout-arrow,
    .logon-info-callout.x-callout-topleft .x-callout-arrow,
    .logon-info-callout.x-callout-topright .x-callout-arrow {
        border-top-color: #FAB450;
    }

        .logon-info-callout.x-callout-top .x-callout-arrow:after,
        .logon-info-callout.x-callout-topleft .x-callout-arrow:after,
        .logon-info-callout.x-callout-topright .x-callout-arrow:after {
            border-top-color: #FAB450;
        }

    .logon-info-callout.x-callout-right .x-callout-arrow,
    .logon-info-callout.x-callout-righttop .x-callout-arrow,
    .logon-info-callout.x-callout-rightbottom .x-callout-arrow {
        border-right-color: #FAB450;
    }

        .logon-info-callout.x-callout-right .x-callout-arrow:after,
        .logon-info-callout.x-callout-righttop .x-callout-arrow:after,
        .logon-info-callout.x-callout-rightbottom .x-callout-arrow:after {
            border-right-color: #FAB450;
        }

    .logon-info-callout.x-callout-bottom .x-callout-arrow,
    .logon-info-callout.x-callout-bottomleft .x-callout-arrow,
    .logon-info-callout.x-callout-bottomright .x-callout-arrow {
        border-bottom-color: #FAB450;
    }

        .logon-info-callout.x-callout-bottom .x-callout-arrow:after,
        .logon-info-callout.x-callout-bottomleft .x-callout-arrow:after,
        .logon-info-callout.x-callout-bottomright .x-callout-arrow:after {
            border-bottom-color: #FAB450;
        }

    .logon-info-callout.x-callout-left .x-callout-arrow,
    .logon-info-callout.x-callout-lefttop .x-callout-arrow,
    .logon-info-callout.x-callout-leftbottom .x-callout-arrow {
        border-left-color: #FAB450;
    }

        .logon-info-callout.x-callout-left .x-callout-arrow:after,
        .logon-info-callout.x-callout-lefttop .x-callout-arrow:after,
        .logon-info-callout.x-callout-leftbottom .x-callout-arrow:after {
            border-left-color: #FAB450;
        }

    .logon-info-callout .x-btn.profileButton {
        background-color: #db7b1b;
    }

    .logon-info-callout .x-btn.logoutButton {
        background-color: #ff1d25;
    }

.profileCalloutGroupRow {
    display: block;
    margin-top: 5px;
    cursor: pointer;
}

.profileCalloutGroupItem:hover {
    background-color: #efdaa3;
    font-weight: bold;
}

.profileCalloutGroupItem {
    font-size: 12px;
    margin-left: 20px;
}

    .profileCalloutGroupItem.selected {
        font-weight: bold;
        background-color: #FAB450;
        margin-bottom: 5px;
    }

.profileCalloutGroupRadio {
    width: 12px;
    height: 12px;
    float: left;
    padding-right: 5px;
    border-radius: 10px;
    border: 1px solid #999999;
    margin-top: 2px;
}

    .profileCalloutGroupRadio.selected {
        background-color: #FAB450;
        border-color: black;
    }

.hdaProfileCalloutLabel {
    font-size: 10px;
    color: #999999;
    font-weight: bold;
}

/* ============================== MASTER TAB ============================== */

.masterTab .x-tab.x-tab-active {
    border-bottom-color: #FAB450;
}
    .masterTab .x-tab.x-tab-active .x-tab-inner {
        color: #FAB450;
    }

/* ============================== PORTAL TAB ============================== */
.portalTab .x-tab-bar .x-tab.x-tab-active,
.portalTab .tab.active {
    border-bottom-color: #FAB450;
}


/* ============================== GRID ============================== */

body .x-grid .x-grid-item.x-grid-item-over,
body .x-grid .x-grid-item.x-grid-item-selected {
    background-color: #FAF6C7;
}

.x-grid-row .x-grid-cell-selected {
    background-color: #FAF6C7;
}


/* =========== CARD LAYOUT REQUIREMENTS =========== */

.list.cards .x-grid-item.x-grid-item-selected .card {
    background-color: #FAF6C7;
}


/* ============================== MAIN MENU ============================== */

body.mobile .navTreeMain.navTree .x-grid-item.x-grid-item-selected {
    background-color: #FAF6C7;
}


/* ============================== CONTROLS ============================== */

/* Combobox */
.x-boundlist-item-over,
.x-boundlist-selected {
    background-color: #FAF6C7;
    border-color: #F5EC8A;
}

/* PowerFinderDataView */
.powerfinder-results .powerfinder-result {
    border-left: 2px solid #FAB450 !important;
}

.powerfinder-result.powerfinder-result-over,
.powerfinder-result.powerfinder-result-selected {
    background-color: #FAF6C7;
}

.powerfinder-results .powerfinder-result .x-panel-body-default {
    background-color: #FFF;
}


/* ============================== CATALOG LIST STYLES ============================== */

.svc-tpl .x-toolbar.toolbar {
    margin-bottom: 12px;
    border-radius: 5px;
    background-color: #ECECEC;
    padding: 6px;
}

.catalogitem-image {
    width: 48px;
    height: 48px;
}

.catalogitem-image img {
    width: 48px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.catalogitem-data-tpl h1,
.catalogitem-data-tpl h2,
.catalogitem-data-tpl h3 {
    margin: 0;
    padding: 0;
    font-family: opensans-regular;
}

.catalogitem-data-tpl h1 {
    font-size: 16px;
    color: #666;
}

.catalogitem-data-tpl h2 {
    margin-top: 2px;
    font-size: 12px;
    color: #999;
}

.catalogitem-data-tpl h3.message,
.svc-catalog-list .catalogitem-data-tpl h3.message {
    margin-top: 2px;
    font-size: 11px;
    color: #666;
}

    .catalogitem-data-tpl h3.message .icon {
        margin-right: 6px;
        vertical-align: middle;
        font-size: 16px;
    }

    .catalogitem-data-tpl h3.message.warning .icon {
        color: #F8D92C;
    }

    .catalogitem-data-tpl h3.message.warning,
    .catalogitem-data-tpl h3.message.error,
    .svc-catalog-list .catalogitem-data-tpl h3.message.warning,
    .svc-catalog-list .catalogitem-data-tpl h3.message.error {
        color: #666;
    }

        .catalogitem-data-tpl h3.message.error .icon {
            color: #FF7256;
        }

.svc-catalog-list .x-grid-cell {
    padding: 6px 0;
    vertical-align: middle;
}

.svc-catalog-list .catalog-quantity,
.svc-tpl .available-items .x-grid-cell.col-quantity,
.svc-tpl .selected-items .x-grid-cell.col-quantity {
    font-size: 14px;
}

.svc-catalog-list .catalog-price,
.svc-tpl .available-items .x-grid-cell.col-price,
.svc-tpl .selected-items .x-grid-cell.col-price {
    font-size: 14px;
}

.svc-catalog-list .catalog-totalprice,
.svc-tpl .available-items .x-grid-cell.col-totalprice,
.svc-tpl .selected-items .x-grid-cell.col-totalprice {
    font-size: 14px;
    font-family: opensans-bold;
}

.svc-catalog-list .x-column-header-checkbox .x-column-header-inner {
    padding-left: 8px;
}

.svc-catalog-list .x-grid-item {
    border: 0px none;
}

.svc-catalog-list .x-grid-cell {
    border-bottom: 1px solid #EEE;
}

.svc-catalog-list .x-grid-group-hd {
    display: none;
}

.svc-catalog-list .x-grid-row .x-grid-cell:first-child {
    border-left: 3px solid transparent;
}

.svc-catalog-list .x-grid-row.warning-row .x-grid-cell:first-child {
    border-left-color: #F8D92C;
}

.svc-catalog-list .x-grid-row.invalid-row .x-grid-cell:first-child {
    border-left-color: #FF7256;
}

.svc-catalog-list .x-grid-empty {
    padding: 40px 0;
    text-align: center;
    font-size: 12px;
}

.svc-catalog-list .x-btn .x-btn-icon-el {
    font-size: 16px;
}


/* ============================== CATALOG ITEM ============================== */

.CatalogItem {
}

    .CatalogItem H1 {
        font-size: 26px;
        font-weight: normal;
        color: #666;
        margin: 10px 0 6px 0;
    }

    .CatalogItem H2 {
        font-size: 18px;
        font-weight: normal;
    }

    .CatalogItem TEXTAREA {
        width: 100%;
        height: 100px;
    }

.CatalogItem .available {
    color: green;
}

.CatalogItem .notavailable {
    color: red;
}


/* ============================== CATALOG REQUEST ============================== */

/* ATTENTION! This style breaks the layout. A Margin here will truncate the fields of the fieldset. */
/* http://forums.ext.net/showthread.php?59776-Custom-control-control-container-height-is-not-calculated-correctly-in-PartialViews&p=273454#post273454 */
.service-catalog-request .x-toolbar {
}

/* service catalog request toolbar (using "!important" because ExtJS flat toolbar has base css rules with "!important") */
.ServiceCatalog .CatalogItemRequestToolbar {
    padding: 12px 6px !important;
    background-color: #FAFAFA !important;
    margin: 4px 0 !important;
}

.catalogRequestFields legend.x-fieldset-header {
    padding: 0;
    -webkit-padding-start: 0;
    -webkit-padding-end: 0;
}

.catalogRequestFields {
    margin: 0;
    padding: 0;
}

    .catalogRequestFields.x-fieldset-with-title {
        margin: 0 0 12px 0;
    }

/* catalog request detail inside ticket detail */
.module.detail .service-catalog-request .x-fieldset {
    margin-bottom: 0;
}


/* ============================== PREVIEW USER VOTE ============================== */

.html-preview-container .user-vote {
    margin: 20px 0 20px 0;
    display: inline-block;
}

.html-preview-container .user-vote-up,
.html-preview-container .user-vote-down {
    cursor: pointer;
    margin: 0 20px 0 0;
    border-radius: 30px;
    color: #FFF;
    float: left;
}

    .html-preview-container .user-vote-up:before,
    .html-preview-container .user-vote-down:before {
        font-family: "pat-font";
        color: #FFF;
        width: 16px;
        height: 16px;
        font-size: 16px;
    }

.html-preview-container .user-vote-up {
    padding: 10px 20px 10px 25px;
}

    .html-preview-container .user-vote-up:before {
        content: "\7e";
        padding-right: 10px;
    }

.html-preview-container .user-vote-down {
    padding: 10px;
}

    .html-preview-container .user-vote-down:before {
        content: "\5c";
    }

.html-preview-container .user-vote-up-off {
    background-color: #818185;
}

.html-preview-container .user-vote-up-on {
    background-color: #F6702B;
}

.html-preview-container .user-vote-down-off {
    background-color: #818185;
}

.html-preview-container .user-vote-down-on {
    background-color: #F6702B;
}


/* ============================== DETAIL - EMAIL ============================== */

.detail.email {
    padding: 0 10px;
}

.detail.email .x-panel-body {
    padding: 0 8px 0 5px;
}

.detail.email > .x-panel-body > .x-box-inner > .x-box-target > .x-box-item,
.detail.email > .x-panel-body > .x-box-inner > .x-box-target > .x-vbox-form-item {
    margin-bottom: 5px;
}

.detail.email .x-taglabel-list,
.detail.email .x-form-text {
    height: 28px;
}

.detail.email .boxTag .x-taglabel-item {
    padding: 4px !important;
}

.detail.email .boxTag input.x-form-field {
    margin-top: 0;
}

.detail.email .address-selector.x-btn-default-small {
    padding: 6px 2px;
}


/* ============================== USE CONDITIONS ============================== */

.use-conditions .use-conditions-ct .x-panel-header {
    background-color: #FAB450;
}


/* ============================== RECORDVIEW DIRTY STATUS MANAGEMENT ============================== */

.module.dirty .recordViewTitle:after,
.x-tab.dirty .x-tab-wrap:after {
    color: #FAB450;
}