.mycls {
    background: url('images/ico_inactive_16.png') no-repeat;
    height: 16px;
    width: 16px;
    display: inline-block;
    padding: 0 0 0 0px;
}

.iconCart {
    background: url('images/shopping_cart.png') no-repeat;
    background-size: 16px 16px;
    display: inline-block;
    padding: 0 0 0 0px;
}

.iconNefco {
    background: url('images/nefco.jpg') no-repeat;
    background-size: 16px 16px;
    display: inline-block;
    padding: 0 0 0 0px;
}

.iconHelp {
    background: url('Themes/Gray/images/shared/icon-question.gif') no-repeat;
    background-size: 16px 16px;
    display: inline-block;
    padding: 0 0 0 0px;
}

/*.thumbnail {
    max-width: 64px;
    max-height: 64px;
}*/

.x-form-readonly input {
    background-color: ghostwhite;
    background-image: none;
}

.mask-readonly.x-form-readonly input {
    background-color: unset !important;
}

.x-form-readonly textarea {
    background-color: ghostwhite;
    background-image: none;
}

.mycls:checked {
    background: url('images/ico_active_16.png') no-repeat;
}
.lightgreenButton{
    background-image: none;
    background-color: lightgreen;
}
.RefreshGridButton {
    background-image: Url('images/refresh.gif');
    background-repeat: no-repeat;
    background-size: 16px 16px;
    width: 16px !important;
    height: 16px !important;
}
.HistoryGridButton {
    background-image: Url('images/history_icon.gif');
    background-repeat: no-repeat;
    background-size: 16px 16px;
    width: 16px !important;
    height: 16px !important;
}
.roundedGreenLabel{
    /*border-radius: 20%;*/
    background-color: green;
    color: white;
    font-weight: bold;
    padding: 2px 5px;
}

.blueComboBox {
    background: #f7dede;
    color: black;
    /*font-weight: bold;*/
    padding: 2px 5px;
    border: 0px;
}

.roundedOrangeLabel {
    /*border-radius: 10px;*/
    background-color: #cfeef7;
    color: black;
    font-weight: bold;
    padding: 2px 5px;
    margin-bottom: 5px;
}
.redRectangle {
    background-image: url('/Content/Images/on.gif');
    background-repeat: no-repeat;
    display: block;
    height: 10px;
    width: 10px;
    padding-left: 12px;
}

.greenButton {
    background: #98fb98;
    background: -moz-linear-gradient(top, #98fb98 0%, #7CFC00 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#98fb98), color-stop(100%,#7CFC00));
    background: -webkit-linear-gradient(top, #98fb98 0%,#7CFC00 100%);
    background: -o-linear-gradient(top, #98fb98 0%,#7CFC00 100%);
    background: -ms-linear-gradient(top, #98fb98 0%,#7CFC00 100%);
    background: linear-gradient(to bottom, #98fb98 0%,#7CFC00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98fb98', endColorstr='#7CFC00',GradientType=0 );
    font-weight: bold;
}

.orangeButton {
    background: orange;
    background: -moz-linear-gradient(top, orange 0%, darkorange 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,orange), color-stop(100%,darkorange));
    background: -webkit-linear-gradient(top, orange 0%,darkorange 100%);
    background: -o-linear-gradient(top, orange 0%,darkorange 100%);
    background: -ms-linear-gradient(top, orange 0%,darkorange 100%);
    background: linear-gradient(to bottom, orange 0%,#7CFC00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='orange', endColorstr='darkorange',GradientType=0 );
    font-weight: bold;
}

.redButton {
    background: #ff3019;
    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
    background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
    background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
    background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
    background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);
    color: white;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
}

    .redButton .x-btn-inner {
        color: white;
    }


    .redButton.x-btn-over {
        background: #ff3019;
        background: -moz-linear-gradient(top, #ff3019 0%, #af0606 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#af0606));
        background: -webkit-linear-gradient(top, #ff3019 0%,#af0606 100%);
        background: -o-linear-gradient(top, #ff3019 0%,#af0606 100%);
        background: -ms-linear-gradient(top, #ff3019 0%,#af0606 100%);
        background: linear-gradient(to bottom, #ff3019 0%,#af0606 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
    }

.redButton.x-btn-pressed {
    background: #ff3019;
    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
    background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
    background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
    background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
    background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
}

.missingDocumentButton {
    background: #F06363;
}

    .missingDocumentButton.x-btn-over {
        background: red;
    }

    .missingDocumentButton.x-btn-pressed {
        background: red;
    }

.noErrorsButton {
    background: #98fb98;
}

    .noErrorsButton.x-btn-over {
        background: green;
    }

    .noErrorsButton.x-btn-pressed {
        background: green;
    }

.notValidButton {
    background: #edac36;
}

    .notValidButton.x-btn-over {
        background: orange;
    }

    .notValidButton.x-btn-pressed {
        background: orange;
    }


.addSave {
    background-image: Url('images/Save.png') !important;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
}

.addBack {
    background-image: Url('images/back.png') !important;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
}

.gridWithWrapping .x-grid-cell-inner {
    white-space: normal
}

.MaximizePanelButton {
    background-image: Url('images/full-screen-16.png');
    background-repeat: no-repeat;
    background-size: 16px 16px;
    width: 16px !important;
    height: 16px !important;
}

.addGreenIcon {
    background-image: Url('images/Add.png') !important;
    background-repeat: no-repeat;
    margin-left: 4px;
}

.addAddMagnifyIcon {
    background-image: Url('images/AddMagnify.png') !important;
    background-repeat: no-repeat;
    width: 40px !important;
    margin-left: 4px;
}

.magnifyIcon {
    background-image: Url('images/magnify.png') !important;
    background-repeat: no-repeat;
    width: 40px !important;
    margin-left: 4px;
}

/*use x-form-search-trigger
    .searchTrigger {
    background: 0 0 transparent url('images/magnify.png') no-repeat;
    background-size: 17px 17px;
}*/

.actionIcon {
    background-image: Url('images/actions.png') !important;
    background-repeat: no-repeat;
    margin-left: 4px;
}

.missingDocument .x-grid-cell {
    background-color: #F06363 !important;
    background-image: none !important;
    min-height: 25px;
}
    .missingDocument .x-grid-cell .x-grid-cell-inner {
        min-height: 25px;
    }

.notValidDocument .x-grid-cell {
    background-color: #edac36 !important;
    background-image: none !important;
}

    .notValidDocument .x-grid-cell .x-grid-cell-inner {
        min-height: 25px;
    }

tr.x-grid-row.row-alert-orange {
    background-color: #edac36;
}

.noErrors .x-grid-cell {
    background-color: #98fb98 !important;
    background-image: none !important;
}

    .noErrors .x-grid-cell .x-grid-cell-inner {
        min-height: 25px;
    }

    .overriden .x-grid-cell .x-grid-cell-inner {
        min-height: 25px;
    }

.x-action-col-cell .icon-del {
    background-image: url('Images/trash-icon.png');
}

.x-action-col-cell .icon-undel {
    background-image: url('images/undelete.png');
}

.x-action-col-cell .icon-yes {
    background-image: url('images/ico_active_16.png');
}

.x-action-col-cell .icon-no {
    background-image: url('images/ico_inactive_16.png');
}

.x-action-col-cell .icon-warning {
    background-image: url('images/icon-warning_16.png');
}

.x-action-col-cell .no-icon {
    background-image: none;    
}

.x-action-col-cell .icon-email {
    background-image: url('Images/envelope16x16.png');
}

.row-deleted .x-grid-cell {
    color: gray;
    font-style: italic;
}

.x-action-col-cell .icon-edit {
    background-image: url('Images/Pencil-icon.png');
}

.icon-edit-trigger {
    background-image: url('Images/edit-trigger.gif');
}

.drag-files-here {
    background-image: url(http://www.sencha.com/img/apple-touch-icon.png) !important;
    /*background-image: url('images/Drag-and-Drop-128.png') !important;*/
    /*background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;*/
}

.ClauseHorizontalBorders {
    -webkit-border-radius: 0em;
    border-radius: 0em;
    background-image: Url('images/border-dashed.png');
    background-repeat: repeat-x;
}

.ClauseVerticalBorders {
    -webkit-border-radius: 0em;
    border-radius: 0em;
    background: Url('images/figurebracketsside.png') -4px 0;
    background-repeat: repeat-y;
    background-color: white;
}

.ClauseVerticalBordersRight {
    -webkit-border-radius: 0em;
    border-radius: 0em;
    background: Url('images/figurebracketsside.png') 0 0;
    background-repeat: repeat-y;
    background-color: white;
}

.figureBraketCenterLeft {
    /*width: 13px;
    height: 13px;*/
    background: url('images/figurebracketscenter.png') 0 0;
    background-repeat: no-repeat;
    -webkit-border-radius: 0em;
    border-radius: 0em;
    background-color: white;
}

.figureBraketCenterRight {
    /*width: 13px;
    height: 13px;*/
    background: url('images/figurebracketscenter.png') -13px 0;
    background-repeat: no-repeat;
    -webkit-border-radius: 0em;
    border-radius: 0em;
    background-color: white;
}

.figureBraketTopLeft {
    /*width: 13px;
    height: 13px;*/
    background: url('images/figurebrackets2.png') 0 0;
    background-repeat: no-repeat;
    -webkit-border-radius: 0em;
    border-radius: 0em;
    background-color: white;
}

.figureBraketBottomLeft {
    /*width: 13px;
    height: 13px;*/
    background: url('images/figurebrackets2.png') -21px 0;
    background-repeat: no-repeat;
    -webkit-border-radius: 0em;
    border-radius: 0em;
    background-color: white;
}

.figureBraketTopRight {
    /*width: 13px;
    height: 13px;*/
    background: url('images/figurebrackets2.png') -41px 0;
    background-repeat: no-repeat;
    -webkit-border-radius: 0em;
    border-radius: 0em;
    background-color: white;
}

.figureBraketBottomRight {
    /*width: 13px;
    height: 13px;*/
    background: url('images/figurebrackets2.png') -61px 0;
    background-repeat: no-repeat;
    -webkit-border-radius: 0em;
    border-radius: 0em;
    background-color: white;
}


.purchaseTypeItem {
    float: left;
    width: 90px;
    height: 80px;
    text-align: center;
    border-radius: 10px;
    border-color: #9D9D9D;
    border-style: solid;
    border-width: 1px;
    background-color: #EAEAEA;
    margin: 4px;
    padding: 4px;
    cursor: pointer;
}

.purchaseTypeItem:hover {
    float: left;
    width: 90px;
    height: 80px;
    text-align: center;
    border-radius: 10px;
    border-color: #9D9D9D;
    border-style: solid;
    border-width: 1px;
    margin: 4px;
    padding: 4px;
    cursor: pointer;
}
.purchaseTypeItemMatCat {
    float: left;
    width: 90px;
    height: 80px;
    text-align: center;
    border-radius: 10px;
    border-color: #9D9D9D;
    border-style: solid;
    border-width: 1px;
    background-color: #EAEAEA;
    margin: 4px;
    cursor: pointer;
}

.purchaseTypeItemMatCat:hover {
    float: left;
    width: 90px;
    height: 80px;
    margin: 4px;
    border-radius: 10px;
    border-color: #9D9D9D;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
}


.locationItem {
    float: left;
    width: 80px;
    height: 45px;
    text-align: center;
    border-radius: 10px;
    border-color: #9D9D9D;
    border-style: solid;
    border-width: 1px;
    background-color: #EAEAEA;
    margin: 5px;
    padding: 5px;
    cursor: pointer;
    font-size: 10px;
}

.cornerStar {
    background-color: #ccffff;
    background-image: url('Images/star.png');
    background-position: bottom 2px right;
    background-repeat: no-repeat; /*Prevent showing multiple background images*/
}

    .locationItem:hover {
        float: left;
        width: 80px;
        height: 45px;
        text-align: center;
        border-radius: 10px;
        border-color: #9D9D9D;
        border-style: solid;
        border-width: 1px;
        margin: 5px;
        padding: 5px;
        cursor: pointer;
        font-size: 10px;
    }

a:hover {
    text-decoration: underline;
}

.FilterIcon {
    background-image: Url('images/filter.gif');
}

.RemoveFilterIcon {
    background-image: Url('images/removefilter.gif');
}

.extjsGrid-lightgreen .x-grid-cell {
    background-color: lightgreen !important;
    background-image: none !important;
}

.extjsGrid-orange .x-grid-cell {
    background-color: orange !important;
    background-image: none !important;
}

.extjsGrid-yellow .x-grid-cell {
    background-color: yellow !important;
    background-image: none !important;
}

.extjsGrid-lightblue .x-grid-cell {
    background-color: lightblue !important;
    background-image: none !important;
}

.label_lightgreen {
    background-color: lightgreen !important;
    font-weight: bold;
}
.label_orange {
    background-color: orange !important;
    font-weight: bold;
}
.label_lightblue {
    background-color: lightblue !important;
    font-weight: bold;
}

.textfieldLink {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}

.linkBtnCls {
    border: none;
    background-image: none;
    background-color: transparent;
    color: blue;
    text-decoration: underline;
}

.linkBtnCls span{
    color: blue;
}

.approvers-grid {
    font: normal 12px tahoma, arial, verdana, sans-serif
}


.approvers-grid .x-grid-cell-inner {
    padding: 1px 3px 2px;
}

.x-action-col-cell .icon-fav {
    background-image: url('Images/star.png');
}

.x-action-col-cell .icon-notfav {
    background-image: url('Images/star-unchecked.png')
}

.bug {
    background-image: Url('images/bug.png') !important;
    background-repeat: no-repeat;
    margin-left: 4px !important;
}

.x-btn.star-unchecked {
    background-image: url('Images/star-unchecked.png');
    background-position: center;
    background-repeat: no-repeat;
}

.x-btn.star-checked {
    background-image: url('Images/star.png');
    background-position: center;
    background-repeat: no-repeat;
}

.x-btn.star-unchecked:hover {
    background-image: url('Images/star.png');
    background-position: center;
    background-repeat: no-repeat;
}

.ccLabel {
    background-image: Url('Images/CreditCard.png');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 16px 16px;
}

.usaLabel {
    background-image: Url('images/usa.png');
    background-size: 16px 16px;
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    /*background-position: top;*/
}

.x-grid-item-selected {
    background-color: #ADD8E6;
}

.gearButton {
    background-image: Url('images/gear-16.gif');
    background-repeat: no-repeat;
    background-size: 16px 16px;
    width: 16px !important;
    height: 16px !important;
}

.taxStatesLabel {
    /*    padding: 2px;
    margin-top: -3px !important;
*/
    font-size: x-small;
    /*width: 100% !important;*/
    background-color: #fe7f7f;
    background-image: none;
    color: black;

/*    overflow: auto !important;
    white-space: normal !important;
    text-overflow: ellipsis;
    display: block;
*/}

div.slct-req-type-pan {
    margin-top: 10px;
    border: none;
    background: none;
}

div.slct-req-type-pan * {
    background: none;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

div.slct-req-type-pan div.x-header div.x-title div.x-title-text {
    display: inline-block;
    background: #FFFFFF;
    padding: 0 5px;
    font-size: 14px;
}

div.slct-req-type-pan .req-type-wrap-col div.x-header {
    top: 7px !important;
}

div.slct-req-type-pan .req-type-wrap-col div.x-header div.x-title {
    text-align: left;
}

div.slct-req-type-pan .req-type-wrap-col .req-type-cat-pan .purchaseTypeItem {
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    line-height: 1;
    background: #f7f7f7;
    box-shadow: 3px 3px 3px 0px #e5e5e5;
}

div.slct-req-type-pan .req-type-wrap-col .req-type-cat-pan .purchaseTypeItem:hover {
    border: none;
    background: #e6ebf1;
}

div.slct-req-type-pan div.req-type-wrap-col div.req-type-cat-pan div.x-panel-body {
    border: 1px solid #b7b7b7;
    border-radius: 5px;
}

    div.slct-req-type-pan div.req-type-wrap-col div.req-type-cat-pan div.x-panel-body div.x-panel-body {
        border: none;
    }

.editable-grid .grid-cell-editable div.x-grid-cell-inner {
    padding-right: 15px;
    background-image: url("/content/images/Pencil-icon.png");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top;
    background-size: 10px;
    cursor: pointer;
}

.filterColumnCtrl input {
    background-image: none;
    background-color: lightblue;    
}
.filterSelectColumnCtrl input {
    background-image: none;
    background-color: lightblue;
    cursor: pointer;
}

div.html-editor-inputs-select div.step {
    padding: 10px 5px;
}

div.html-editor-inputs-select div.html-editor-input-label {
    padding: 3px 10px;
    cursor: pointer;
}

    div.html-editor-inputs-select div.html-editor-input-label.selected, div.html-editor-inputs-select div.html-editor-input-label:hover {
        font-size: 120%;
        font-weight: bolder;
        padding: 3px 15px;
        color: #022095;
        background-color: #f1f1f1;
    }

div.html-editor-inputs-select div.step div.options {
    margin-top: 50px;
}

div.html-editor-inputs-select div.step.name .name-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
}

div.html-editor-inputs-select div.step.name .name-wrap .radio-group-select-wrap {
    margin-top: 10px;
}

div.html-editor-inputs-select div.step.name .name-wrap .radio-group-select-wrap select {
    width: 120px;
}

div.html-editor-inputs-select div.step div.options div.list {
    margin: 5px 0px;
    height: 160px;
    overflow-y: auto;
}

div.html-editor-inputs-select div.step div.options div.list div.opt-value {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 5px 0;
}

div.custom-grid-first-column-sticky-header.x-column-header-first {
    z-index: 1;
    position: fixed !important;
    left: unset !important;
    top: unset !important;
}

div.custom-grid-first-column-sticky .x-grid-cell-first {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #ffffff;
}

*.hidden {
    display: none !important;
}

.ellipsis-combo-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* or set a fixed width like 200px */
    display: block;
}