@skin: "gradient-saffron";
@font-family: Segoe UI,Helvetica Neue,Ubuntu,Arial;
@font-size: 12px;
@border-size: 1px;
@border-type: solid;
@tools-border-radius: 3px;
@widget-bg-color:#ffffff;
@label-color:#111111;

@header-bg-stcolor: #f9f9f9;
@header-bg-endcolor: #f2f2f2;
@header-gradient-color: #f9f9f9, #f2f2f2;
@header-border-color: #c8c8c8;
@header-font-color: #282827;
@header-icon-color: #232323;
@filtermenu-color: #c8c8c8;

@tooltip-line-height : 18px;

@content-bg-color: #ffffff;
@content-border-color: #c8c8c8;
@content-font-color: #333333;

@default-bg-stcolor: #f5f5f5;
@default-bg-endcolor: #dddddd;
@default-gradient-color: #f5f5f5, #dddddd;
@default-border-color: #c8c8c8;
@default-font-color: #333333;
@default-icon-color: #686969;

@hover-bg-stcolor: #fde3c2;
@hover-bg-endcolor: #fcce91;
@hover-gradient-color: #fde3c2, #fcce91;
@hover-border-color: #c8c8c8;
@hover-font-color: #282827;
@hover-icon-color: #282827;

@active-bg-stcolor: #fbbe6d;
@active-bg-endcolor: #f9920b;
@active-gradient-color: #fbbe6d, #f9920b;
@active-border-color: #c8c8c8;
@active-font-color: #ffffff;
@active-icon-color: #ffffff;

@error-color: #ee2924;
@warning-color: #ffca1c;
@success-color: #22b24b;
@information-color: #489bd5;

@overlay-bg-color: #383838;
@sort-filter-disable: #999999;

@header-font-weight: normal;
@header-font-size: 17px;

@content-font-weight: normal;
@content-font-size:14px;

@disable-control-background-color: #f5f5f5;
@disable-control-border-color: #e3e3e3;
@disable-icon-bg-color: #d6d7d7;

@hover-bg-mdcolor: #fa9e39;

@scroll-bg-color: darken(@content-bg-color, 2%);
@scroll-handle-color: @default-bg-stcolor;
@scroll-handle-hover-color: @hover-bg-stcolor;
@scroll-handle-active-color: @active-bg-stcolor;

@gheader-bg-color: @header-bg-stcolor;
@gheader-bg-colorhover: @hover-bg-stcolor;
@gheader-border-color: @active-bg-stcolor;
@gheader-font-color: @header-font-color;
@gheader-hover-font-color: @hover-font-color;
@gheader-font-size: 14px;
@gedit-title-color: darken( @content-bg-color, 3%);

@gtouch-border-color: #000000;

@gcontent-bg-color: @content-bg-color;
@gcontent-font-color: @content-font-color;

@gdroparea-stbg-color: @active-bg-stcolor;
@gdroparea-endbg-color: @active-bg-endcolor;
@gdroparea-border-color: @content-border-color;
@gdroparea-font-color: @active-font-color;
@gdroparea-hover-color: @hover-bg-stcolor;
@gcaption-border-color: lighten( @default-bg-stcolor, 1% );
@gcaption-border-radius: 0px;

@row-hover-color: @hover-bg-stcolor;
@row-hover-font-color: @hover-font-color;
@row-border-color: @content-border-color;
@row-border-coloropac: rgba(187,188,187,0.5);
@row-selection-bg-color: @active-bg-stcolor;
@row-selection-font-color: @active-font-color;
@cell-selection-stbg-color: @active-bg-stcolor;
@cell-selection-endbg-color: darken(@active-bg-endcolor, 10%);
@column-selection-bg-color: @default-bg-stcolor;
@alt-row-bg-color: darken( saturate( spin( @content-bg-color, 180deg ), 6%), 3%);

@pager-font-color: @default-font-color;
@pager-default-font-color: @default-font-color;
@pager-default-border-color: @default-border-color;
@pager-default-bg-color: @default-bg-stcolor;
@pager-active-stbg-color: @active-bg-stcolor;
@pager-active-endbg-color: @active-bg-endcolor;
@pager-hover-stbg-color: @hover-bg-stcolor;
@pager-hover-endbg-color: @hover-bg-endcolor;
@pager-active-font-color: @active-font-color;

@filter-input-border-color: #939292;
@filter-input-bg-color: #F6F7F7;


@alternate-border-color: #c1c1c1;
@timeline-bg-color: #CE8715;


@captcha-refresh-border: 1px solid lighten( @default-border-color, 1% );
@captcha-image-border: 1px solid darken( @default-border-color, 18% );
@captcha-valid-border: 1px solid saturate( @default-border-color, 2% );
@captcha-image: #f7f7f7;

@watermark-font-style: italic;
@watermark-font-color: lighten( saturate( @default-font-color, 1% ), 57% );
@watermark-font-weight: normal;
@watermark-font-size: 14px;

@hightlight-bg-color: #5EABDE;
@highlight-border-color: #AAAAAA;
@highlight-font-color: #363636;
@highlight-font-weight: bold;
@highlight-font-size: 14px;

@error-bg-color: #fef1ec;
@error-border-color: #cd0a0a;
@error-font-color: #cd0a0a;
@error-font-weight: bold;

@shadow-bg-color: darken( @default-bg-stcolor, 13% );
@input-bg-color: #807F7F;

@gantt-chart-critical-connectorline-color: #ff5555;
@gantt-chart-critical-connectorline-rightarrow-color: #ff5555;
@gantt-chart-critical-connectorline-leftarrow-color: #ff5555;
@gantt-chart-critical-child-progressbar-color: #ff5555;
@gantt-chart-critical-child-progressbar-border-color: #ff5555;
@gantt-chart-critical-child-taskbar-color: #ff8b8b;
@gantt-chart-critical-child-taskbar-border-color: #ff8b8b;

@gantt-chart-manual-child-progressbar-stbg-color: #7ECCBE;
@gantt-chart-manual-child-progressbar-endbg-color: #54B4A2;
@gantt-chart-manual-child-progressbar-gradient-color:#7ECCBE,#54B4A2;
@gantt-chart-manual-child-taskbar-color: #8DD1C4;
@gantt-chart-manual-child-taskbar-border-color: #4FB29F;

@gantt-chart-connectorline-hover-color: #0026da;

@schedule-app-stbg-color: @active-bg-stcolor;
@schedule-app-endbg-color: @active-bg-endcolor;
@schedule-app-border-color: lighten(@active-bg-stcolor, 10%);
@schedule-select-bg-color: @hover-bg-stcolor;
@schedule-active-border-size:3px;
@schedule-header-border-color:@active-bg-stcolor;
@schedule-cells-bg-color: darken( saturate( spin( @content-bg-color, 180deg ), 6%), 3%);

@grid-uisupport-background-color: #BBBDC0;
@grid-uisupport-number-color: #FFFFFF;
@grid-focusout: desaturate( @active-bg-endcolor, 95% );

@gantt-toolbar-bg-color: @content-bg-color;
@gantt-editDialog-bg-color: @content-bg-color;
@gantt-content-bg-color: @content-bg-color;
@gantt-chart-content-bg-color: @content-bg-color;
@gantt-altRow-bg-color: darken(@content-bg-color,2%);
@gantt-weekends-bg-color: @gantt-altRow-bg-color;
@gantt-selection-bg-color: fadeout(@active-bg-stcolor,80%);
@gantt-row-stbg-color: fadeout(@active-bg-stcolor,80%);
@gantt-row-endbg-color: fadeout(@active-bg-endcolor,80%);
@gantt-header-bg-color: @header-bg-stcolor;
@gantt-parent-taskbar-color: #a7b1be;
@gantt-row-selection-bg-color: #f9920b;
@gantt-header-stbg-color: @header-bg-stcolor;
@gantt-header-endbg-color: @header-bg-endcolor;
@gantt-milestone-bg-color: @content-font-color;
@gantt-spliiter-bg-color: @content-bg-color;
@gantt-connectorline-arrow-bg-color: @content-font-color;
@gantt-progressHandle-color: @content-font-color;
@gantt-toolTip-bg-color: @content-bg-color;
@gantt-parent-progress-bg-color: @content-font-color;
@gantt-parent-task-bg-color: fadeout(@content-font-color,40%);
@gantt-child-progress-bg-color: @active-bg-stcolor;
@gantt-child-task-bg-color: fadeout(@active-bg-stcolor,40%);
@gantt-parent-progress-stbg-color: @content-font-color; /* need verify with UX team*/
@gantt-parent-progress-enbg-color: lighten(@content-font-color, 60%);
@gantt-child-progress-stbg-color: @active-bg-stcolor;
@gantt-child-progress-enbg-color: @active-bg-endcolor;
@gantt-predecessor-header-bg-color: @content-bg-color;
@gantt-toolbar-icon-color: @default-icon-color;
@gantt-toolbar-icon-mouseover-color: @hover-icon-color;
@gantt-menuitem-font-color: @content-font-color;
@gantt-menuitem-hover-font-color: @hover-font-color;
@gantt-expandcollapse-icon-color: @default-icon-color;
@gantt-task-gripper-color: fadeout(@content-bg-color,60%);
@gantt-dialog-close-icon-mouseover-color: darken(@content-bg-color,10%);

@gantt-toolbar-border-color: @header-border-color;
@gantt-splitter-border-color: @content-border-color;
@gantt-content-border-color: @content-border-color;
@gantt-header-border-color: @header-border-color;
@gantt-schedule-border-color: @header-border-color;
@gantt-tooltip-border-color: @content-border-color;
@gantt-parent-taskbar-border-color: @gantt-parent-progress-stbg-color;
@gantt-child-taskbar-border-color: @gantt-child-progress-stbg-color;
@gantt-chart-border-color: @content-border-color;

@gantt-editDialog-font-color: @content-font-color;
@gantt-content-font-color: @content-font-color;
@gantt-selection-font-color: @content-font-color;
@gantt-header-font-color: @header-font-color;
@gantt-schedule-font-color: @header-font-color;
@gantt-toolbar-font-color: @content-font-color;
@gantt-tooltip-font-color: @content-font-color;
@gantt-taskbar-selection-border-color: #000000;
@gantt-selectionpopup-content-bg-color: @content-bg-color;
@gantt-selectionpopup-border-color:@content-border-color;
@gantt-selectionpopup-default-icon-color:@default-icon-color;

@treegrid-detailcellwrapper-background-color: @content-bg-color;
@treegrid-detailcellwrapper-font-color: @content-font-color;
@treegrid-detailcellwrapperfly-border-color: @content-border-color;
@treegrid-detailcellwrapperfly-shadow-color: @content-border-color;
@treegrid-detailicon-shadow-color: darken(@content-bg-color,11%);

@gantt-theme-line-color: @active-bg-stcolor;
@gantt-connectorline-color: @gantt-connectorline-arrow-bg-color;
@gantt-connectorpoint-hover-color: @gantt-connectorline-arrow-bg-color;
@gantt-falseLine-color: @gantt-connectorline-arrow-bg-color;
@gantt-columnchooser-border-color: @default-border-color;

@treegrid-summaryrow-backgroundcolor: lighten(@default-bg-stcolor, 1%);
@treegrid-totalsummaryrow-backgroundcolor: lighten(@default-bg-stcolor, 1%);
@treegrid-summaryrow-textcolor: @content-font-color;
@treegrid-summaryrow-border-color: @content-border-color;
@treegrid-selectionpopup-content-bg-color: @content-bg-color;
@treegrid-selectionpopup-border-color:@content-border-color;
@treegrid-selectionpopup-default-icon-color:@default-icon-color;
@filtermenudialog-color:@filtermenu-color;

@colorpicker-image: url(../common-images/lighttheme/colorpicker_light.png);
@colorpicker-bg-color: @content-bg-color;
@colorpicker-border-color: #cecece;
@colorpicker-button-bg-color: @content-bg-color;
@colorpicker-button-border-color: @content-bg-color;
@colorpicker-popup-bg-color: @default-bg-stcolor;
@colorpicker-popup-boder-color: @default-border-color;
@colorpicker-btn-bg-color: @content-bg-color;
@colorpicker-hover-font-color: #5c5c5c;




@ajaxloaderimage: url(images/ajax-loader.gif);

@ratingimage: url(images/rating-star.png);
@treeview-drop-image: url(images/drop-sibling.png);
@slider-tick: url(images/slider-tick.png);
@loading-img: url(images/waitingpopup.gif);



@checkedtick-image: url(images/checkedtick.png);
@tab-background-color: #ebebeb;
.tab-headerbg(@is-color: none){
    & when not (@is-color = none) {
        background: @content-bg-color;
    }
    color: @active-bg-stcolor;
}
@radial-badge-color:#FFFFFF;

.header-gradient() {
   .custom-gradient(@header-gradient-color, @header-bg-stcolor, @header-bg-endcolor, 0%, 0% );
}

.default-gradient() {
   .custom-gradient(@default-gradient-color, @default-bg-stcolor, @default-bg-endcolor, 0%, 0% );
}

.hover-gradient() {
    .custom-gradient(@hover-gradient-color, @hover-bg-stcolor, @hover-bg-endcolor, 0%, 0% );
}

.active-gradient() {
    .custom-gradient(@active-gradient-color, @active-bg-stcolor, @active-bg-endcolor, 0%, 0% );
}


@isDefault: true;

.custom-gradient(@derivedfrom, @start, @end, @light, @dark) when (@isDefault) {
    &{
        .generate();
    }
    .generate() when (@derivedfrom = none) {
        @gradient: none;
        background: @start;
    }
    .generate() when not (@derivedfrom = none) {
        @gradient: lighten(extract(@derivedfrom, 1), @light), darken(extract(@derivedfrom, 2), @dark);
        background: @start; /* Old browsers */
        background: -moz-linear-gradient(top, @gradient); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(100%,@end)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,@gradient); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, @gradient); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, @gradient); /* IE10+ */
        background: linear-gradient(to bottom, @gradient); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{start}', endColorstr='@{end}',GradientType=0 ); /* IE6-9 */
    }
}

.scroller-gradient() {
    background-image: @active-grid-image, @default-bg-stcolor; /* Old browsers */
    background-image: @active-grid-image, -moz-linear-gradient(top, @default-bg-stcolor 0%, @default-bg-endcolor 100%); /* FF3.6+ */
    background-image: @active-grid-image, -webkit-gradient(linear, left top, left bottom, color-stop(0%,@default-bg-stcolor), color-stop(100%,@default-bg-endcolor)); /* Chrome,Safari4+ */
    background-image: @active-grid-image, -webkit-linear-gradient(top, @default-bg-stcolor 0%,@default-bg-endcolor 100%); /* Chrome10+,Safari5.1+ */
    background-image: @active-grid-image, -o-linear-gradient(top, @default-bg-stcolor 0%,@default-bg-endcolor 100%); /* Opera 11.10+ */
    background-image: @active-grid-image, -ms-linear-gradient(top, @default-bg-stcolor 0%,@default-bg-endcolor 100%); /* IE10+ */
    background-image: @active-grid-image, linear-gradient(to bottom, @default-bg-stcolor 0%,@default-bg-endcolor 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{default-bg-stcolor}', endColorstr='@{default-bg-endcolor}',GradientType=0 ); /* IE6-9 */
}

.scroller-hover-gradient() {
    background-image: @hover-grid-image, @hover-bg-stcolor; /* Old browsers */
    background-image: @hover-grid-image, -moz-linear-gradient(top, @hover-bg-stcolor 0%, @hover-bg-endcolor 100%); /* FF3.6+ */
    background-image: @hover-grid-image, -webkit-gradient(linear, left top, left bottom, color-stop(0%,@hover-bg-stcolor), color-stop(100%,@hover-bg-endcolor)); /* Chrome,Safari4+ */
    background-image: @hover-grid-image, -webkit-linear-gradient(top, @hover-bg-stcolor 0%,@hover-bg-endcolor 100%); /* Chrome10+,Safari5.1+ */
    background-image: @hover-grid-image, -o-linear-gradient(top, @hover-bg-stcolor 0%,@hover-bg-endcolor 100%); /* Opera 11.10+ */
    background-image: @hover-grid-image, -ms-linear-gradient(top, @hover-bg-stcolor 0%,@hover-bg-endcolor 100%); /* IE10+ */
    background-image: @hover-grid-image, linear-gradient(to bottom, @hover-bg-mdcolor 0%, @hover-bg-endcolor 56%,@hover-bg-stcolor 56%, @hover-bg-mdcolor 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{hover-bg-stcolor}', endColorstr='@{hover-bg-endcolor}',GradientType=0 ); /* IE6-9 */
}

.row-selection() {
    .active-gradient();
}

.schedule-app-color() {
    background: @schedule-app-stbg-color; /* Old browsers */
    background: -moz-linear-gradient(top, @schedule-app-stbg-color 0%, @schedule-app-endbg-color 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@schedule-app-stbg-color), color-stop(100%,@schedule-app-endbg-color)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, @schedule-app-stbg-color 0%,@schedule-app-endbg-color 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, @schedule-app-stbg-color 0%,@schedule-app-endbg-color 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, @schedule-app-stbg-color 0%,@schedule-app-endbg-color 100%); /* IE10+ */
    background: linear-gradient(to bottom, @schedule-app-stbg-color 0%,@schedule-app-endbg-color 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{schedule-app-stbg-color}', endColorstr='@{schedule-app-endbg-color}',GradientType=0 ); /* IE6-9 */
}

.cell-selection() {
    .custom-gradient(@active-gradient-color, @cell-selection-stbg-color, @cell-selection-endbg-color, 0%, 10%);
}

.column-selection() {
    background-color: @column-selection-bg-color;
}

.row-Hover() {
    .hover-gradient();
}

.tgPopUp-gradient() {
    background: @content-bg-color;
}

.gheader-gradient() {
    .header-gradient();
}

.tgheader-gradient() {
    .header-gradient();
}
.ganttheader-gradient() {
    .header-gradient();
}
.treegrid-hover-gradient() {
    .hover-gradient();
}

.treegrid-default-gradient() {
    background: @default-bg-stcolor; /* Old browsers */
    background: -moz-linear-gradient(top, @default-bg-stcolor 0%, @default-bg-endcolor 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@default-bg-stcolor), color-stop(100%,@default-bg-endcolor)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, @default-bg-stcolor 0%,@default-bg-endcolor 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, @default-bg-stcolor 0%,@default-bg-endcolor 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, @default-bg-stcolor 0%,@default-bg-endcolor 100%); /* IE10+ */
    background: linear-gradient(to bottom, @default-bg-stcolor 0%,@default-bg-endcolor 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{default-bg-stcolor}', endColorstr='@{default-bg-endcolor}',GradientType=0 ); /* IE6-9 */
}

.hover-gradientfunction() {
    background: @tab-background-color; /* Old browsers */
}

.tile-bg-gradient() {
    .active-gradient();
}

.pager-hover-gradient() {
    .hover-gradient();
}

.header-hover-gradient(){
    .hover-gradient();
}

.hover-pager-gradient() {
    .hover-gradient();
}

.pager-selection-gradient() {
    .active-gradient();
}

.gdroparea-gradient() {
    .active-gradient();
}

.gantt-row-selection() {
    @temp-gradient: @gantt-row-stbg-color, @gantt-row-endbg-color;
	background: -moz-linear-gradient(top, @temp-gradient); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@gantt-row-stbg-color), color-stop(100%,@gantt-row-endbg-color)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  @temp-gradient); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, @temp-gradient); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, @temp-gradient); /* IE10+ */
    background: linear-gradient(to bottom, @temp-gradient); /* W3C */
}

.gantt-parent-progress-background() {
    @temp-gradient:@gantt-parent-progress-stbg-color, @gantt-parent-progress-enbg-color;
    .custom-gradient(@temp-gradient, @gantt-parent-progress-stbg-color, @gantt-parent-progress-enbg-color, 0%, 0% );
}

.gantt-child-progress-background() {
   .active-gradient();
}
.gantt-child-manualprogress-background(){
    .custom-gradient(@gantt-chart-manual-child-progressbar-gradient-color,  @gantt-chart-manual-child-progressbar-stbg-color, @gantt-chart-manual-child-progressbar-endbg-color, 0%, 0% );
}
/*-----------------------Map------------------*/

@map-home: url(../common-images/maps/Home_saffron.png);
@map-home-hover: url(../common-images/maps/Home_hover_saffron.png);

/*-----------------------PdfViewer------------------*/
@pdfviewer-scrollcontainer:darken(@content-bg-color,12%);

.pdfviewer-searchtoolbar-border-color(){}
.pdfviewer-toolbar-border-color(){}
.pdfviewer-toolbar-border-color-hover(){}
.pdfviewer-viewercontainer-border-color(){}
.pdfviewer-viewercontainer-bgcolor(){}
/*-----------------------End PdfViewer------------------*/

/*----------------------OLAP Definition------------------*/
@table-font: 12px @font-family !important; @toolTipText-color:@content-font-color; @toolTip-bg-color:linear-gradient(to bottom,@default-bg-stcolor 0%,@default-bg-endcolor 100%); @fg-table-color: @content-font-color; @bg-table-color: @content-bg-color; @brd-table-color: @gdroparea-border-color; @bg-value-color: @content-bg-color; @bg-summary-color: linear-gradient(to bottom,saturate( @active-bg-stcolor, 1 ) 0%,saturate( @active-bg-endcolor, 1 ) 100%); @fg-header-color: @content-font-color; @fg-header-hvr-color: @hover-font-color; @expander-img: url("../common-images/icons-gray.png"); @kpi-uparrow-img: url("../common-images/pivotgrid/up-arrow.png"); @kpi-rightarrow-img: url("../common-images/pivotgrid/right-arrow.png"); @kpi-downarrow-img: url("../common-images/pivotgrid/down-arrow.png"); @kpi-diamond-img: url("../common-images/pivotgrid/diamond.png"); @kpi-triangle-img: url("../common-images/pivotgrid/triangle.png"); @kpi-circle-img: url("../common-images/pivotgrid/circle.png"); @kpi-red-img: url("../common-images/pivotgrid/red.png"); @kpi-green-img: url("../common-images/pivotgrid/green.png"); @kpi-all-img: url("../common-images/pivotgrid/three-color.png"); @aeb-bgcolor: @content-bg-color; @oclient-bgcolor: @content-bg-color; @oclient-border-color: @content-border-color; @oclient-icons-color:@default-icon-color; @oclient-dialog-bgcolor:@content-bg-color; @oclient-dialog-color:@default-font-color; @oclient-treeview-text:@default-font-color; @oclient-treeview-text-hover:@hover-font-color; @oclient-treeview-active:linear-gradient(to bottom,@active-bg-stcolor 0%,@active-bg-endcolor 100%); @oclient-ddl-color:@default-font-color; @oclient-ddl-bgcolor:@content-bg-color; @oclient-ddl-bcolor:@hover-border-color; @oclient-ddl-hcolor:@hover-font-color; @oclient-ddl-hbgcolor:linear-gradient(to bottom,@hover-bg-stcolor 0%,@hover-bg-endcolor 100%); @oclient-icons-hover-bg: linear-gradient(to bottom,@hover-bg-stcolor 0%,@hover-bg-endcolor 100%); @toolbar-bgcolor:linear-gradient(to bottom,@default-bg-stcolor 0%,@default-bg-endcolor 100%); @toolbar-icons-hvrcolor:@hover-icon-color; @fullscreen-bg-color:@content-bg-color; @maxview-bg-color:@content-bg-color; @ogrid-header-border-color:@content-border-color; @ogaugeTooltip-border-color:@content-border-color; @pivotList-treeview-text:@default-font-color; @pivotList-treeview-hvr-color:linear-gradient(to bottom,@active-bg-stcolor 0%,@active-bg-endcolor 100%); @pivotList-treeview-text-hvr-color:linear-gradient(to bottom,@active-bg-stcolor 0%,@active-bg-endcolor 100%); @ogrid-dialog-bgcolor:linear-gradient(to bottom,darken( desaturate( @active-bg-stcolor, 4 ), 1 ) 0%,darken( desaturate( @active-bg-endcolor, 4 ), 1 ) 100%); @pivotList-dialog-close-hvr-color:linear-gradient(to bottom,@active-bg-stcolor 0%,@active-bg-endcolor 100%); @pivotList-treeview-active-color:linear-gradient(to bottom,darken( desaturate( @active-bg-stcolor, 11 ), 2 ) 0%,darken( desaturate( @active-bg-endcolor, 11 ), 2 ) 100%); @pivot-selection-background:linear-gradient(to bottom,@hover-bg-stcolor 0%,@hover-bg-endcolor 100%); @pivot-selection-border:@default-border-color; @groupingBar-bg-color:linear-gradient(to bottom,@active-bg-stcolor 0%,@active-bg-endcolor 100%);
.groupingBar-btn-color() {
    color: @default-icon-color;
    border-color: @content-border-color;
}

.oclientDialog-setcolor() {
    color: @default-font-color;
    .default-gradient();
}

.ogridheader-gradient() {
    background: @content-bg-color;
}

.ogridheader-hvr-gradient() {
    .hover-gradient();
}

.summary-gradient() {
    .hover-gradient();
    color: @hover-font-color;
}

.oclient-header-color() {
    color: @hover-font-color;
	.hover-gradient();
}

.hyperlink-setcolor() {
    color: @active-bg-stcolor;
}

.pivotpager-setcolor() {
    color: @default-icon-color;
}

.scrollPane-setcolor() {
    background-color: lighten( @default-icon-color, 48 );
}

.scrollThumb-setcolor() {
    background-color: lighten( @default-icon-color, 32 );
}

.scrollThumb-dragcolor() {
    background-color: @default-icon-color !important;
}

.pageIndicator-setcolor() {
    .active-gradient();
    border: thin solid @active-border-color;
    color: @active-font-color;
}

.scrollThumb-hovercolor() {
    background-color: lighten( @default-icon-color, 19 );
}

.chartTypesDialog-setcolor() {
    .default-gradient();
    border: 2px solid @content-border-color;
}
/*----------------------Reportviewer Definition start------------------*/
@rv-toolbar-exportlistTip-before-border-color: transparent transparent @content-border-color transparent;
@rv-toolbar-exportlistTip-after-border-color: transparent transparent @default-bg-stcolor transparent;
@rv-popuppage-color: @content-bg-color;
@rv-navigate-disabled-opacity: 0.5;
@rv-viewerblock-font-size: 12.5px;
@rv-viewerblockcellcontent-font-size: 14.5px;

@rv-viewerblock-bg-color: lighten(@default-bg-endcolor, 4%);
@rv-pageviewcontainer-bg-color: darken(@content-bg-color, 20%); 
@rv-documentMappopup-bg-color:#EBEBEB !important; 

@rv-popuppageinfo-bg-color:black; 
@rv-labelpageno-font-size:16px !important; 
@rv-pageview-moz-box-shadow:rgba(0,0,0,0.6); 
@rv-pageview-webkit-box-shadow:rgba(0,0,0,0.6); 
@rv-pageview-box-shadow:rgba(0,0,0,0.3); 
@rv-pageview-border-color: rgb(128,128,128);

@rv-ttooltip-background:white;
@rv-ttooltip-border-color:@content-border-color;
@rv-ttooltip-color:black;

/*----------------------Reportviewer Definition End------------------*/
/*----------------------Reportdesigner Definition Start------------------*/
@rd-widget-font-size: 8px;
@rd-nav-arrow-size: 9px;
@rd-button-font-size: 11px;
@rd-preview-font-size: 13px;
@rd-header-font-size: 16.5px;
@rd-data-font-size: 18px;
@rd-acrdn-nav-size: 30px;
@rd-text-border-radius: 2px;
@rd-button-border-radius: 4px;
@rd-border-radius: 4px 4px 0 0;
@rd-exp-set:#000000;
@rd-exp-border:#c8c8c8;
@rd-exp-reset:#ffffff;
@rd-list-bgreset:transparent;
@rd-surfacecontainer-bg-color:darken(@content-bg-color, 20%);
@rd-switch-bg-color: @content-border-color;
@rd-accordion-hover:#f4f4f4,#e9e9e9;
@rd-accordion-border:#c8c8c8;
@rd-tab-fontcolor:#686969;
@rd-tab-hover-fontcolor:#282827;
@rd-dialog-addBtn:@active-bg-stcolor;
@rd-accordion-tile-hover:#f6f6f6,#d9d9d9;
.rd-tile-hover-gradient(){
    .custom-gradient(@rd-accordion-tile-hover, #f6f6f6,#d9d9d9, 0%, 0% );
}
.rd-hover-gradient() {
    .custom-gradient(@rd-accordion-hover,#f4f4f4,#e9e9e9, 0%, 0% );
}
/*----------------------Reportdesigner Definition End------------------*/
/*-----------------------SymbolPalette Definition-----------------*/
@sp-outline:transparent none 0px; @sp-item-hover-color: rgba(250, 198, 125, 0.40); @sp-noborder:0px solid transparent; @sp-header-font-size:14px; @sp-header-border-radius:0px;
/*-----------------------Diagram Definition-----------------*/
@dg-contextmenu:url("../common-images/diagram/diagram_context.png");@dg-contextmenu-hover:url("../common-images/diagram/diagram_context.png");
@dg-ruler-overlap-bg: #dddddd;
@dg-ruler-space-bg: #f5f5f5;
@dg-ruler-tick: #686969;
@dg-ruler-label: #333333;

/*-----------------------Datepicker Definition-----------------*/
@disable-datepicker-text: lighten( @default-font-color, 55% );
/*-----------------------Bootstrap support-----------------*/
@bs-default-bg-stcolor:@default-bg-stcolor; @bs-header-bg-stcolor:@header-bg-stcolor; @bs-shadow-bg-color:@shadow-bg-color; @bs-content-font-color:@content-font-color; @bs-header-font-color:@header-font-color; @bs-hover-font-color:@hover-font-color; @bs-active-font-color:@active-font-color; @shadow-bg-size:2px; @content-font-color-element:#000000; .bs-default-gradient() {
    .default-gradient();
}

.bs-header-gradient() {
    .header-gradient();
}

.tooltip-colors() {
    background-color: @content-bg-color;
    border-color: @content-border-color;
    color: @content-font-color;
}

.handle-default-gradient() {
    .default-gradient();
}

.handle-hover-gradient() {
    .hover-gradient();
}

.vhandle-arrow(){
    content: "";
}

.hhandle-arrow(){
    content: "";
}

.border-bottom() {
}

.focus-border-color() {
}

.bs-hover-gradient() {
}

.hover-font-color() {
}

.active-icon-color() {
}

.default-icon-color() {
}

.add-borderdiv() {
    border: @border-size @border-type @default-border-color;
}

.transparent-border() {
}
/*----------------------Ribbon Definition-----------------------*/
@rbncontent-content-bg-color:@content-bg-color;
@rbn-border-color:@default-border-color;
@rbn-bg-color:@active-bg-stcolor;
@rbn-act-color: none;
@rbnapptab-font-color:@rbntab-font-color;
@rbn-menu-font-hover-color:@hover-font-color;
@rbnbackstage-item-select-color:@active-font-color;
@rbnbackstage-item-hover-color:@hover-font-color;
@rbn-bg-color-start:@active-bg-stcolor;
@rbn-bg-color-end:@active-bg-endcolor;
@rbn-act-a-border-color:@active-border-color;
@rbncontent-font-color:@header-font-color;
@rbntab-font-color:@header-font-color;
@rbncontent-border-color: @content-border-color;
@rbnhelp-color: @default-icon-color;
@rbncaption-font-color: @content-font-color;
@rbndropdown-color: @content-bg-color;
@rbnmenu-font-color:@hover-font-color;
@rbn-white-color:#FFFFFF;
@rbn-apptab-color:@rbn-white-color;
@rbngallery-hover-color:@hover-bg-stcolor;
@rbngallery-select-color:@active-bg-stcolor;
@rbn-text-color:@hover-font-color;
@rbngallery-bg-color: @content-bg-color;
@rbngallery-border-color:@default-border-color;
@rbngallery-disable-color:#CECECE;
@rbnbackstage-start-hover-color:@active-bg-stcolor;
@rbnbackstage-end-hover-color:darken(@active-bg-endcolor, 15%);
@rbnbackstage-start-select-color:lighten(@active-bg-stcolor, 15%);
@rbnbackstage-end-select-color:lighten(@active-bg-endcolor, 15%);
@rbntoggle-start-color:lighten(@active-bg-stcolor, 10%);
@rbntoggle-end-color:lighten(@active-bg-endcolor, 15%);
@rbnhover-font-color: @hover-font-color;
.ribbon-toggle-gradient(){
 .custom-gradient(@active-gradient-color, @rbntoggle-start-color, @rbntoggle-end-color, 10%, 0%);
}
.ribbon-header-gradient(){
 .ribbon-active-gradient();
}
.ribbon-active-gradient(){
 .active-gradient();
}
.ribbon-hover-gradient(){
 .hover-gradient();
}
.ribbon-backstage-hover-bg(){
 .custom-gradient(@active-gradient-color, @rbnbackstage-start-hover-color, @rbnbackstage-end-hover-color, 0%, 15%);
}
.ribbon-backstage-select-bg(){
 .custom-gradient(@active-gradient-color, @rbnbackstage-start-select-color, @rbnbackstage-end-select-color, 15%, 0%);
}
.ribbon-bg-hover-gradient(){}
.ribbon-tab-hover(){}
.ribbon-bg-active-gradient(){}
.office-ribbon-file-hover(){}
.ribbon-app-hover-gradient(){
   .ribbon-hover-gradient();
}
.ribbon-shadow(){
}
.ribbon-app-tab-font(){
  color: @rbn-apptab-color;
}
/*----------------------Ribbon End-----------------------*/
/*----------------------File Explorer Start-----------------------*/

.mouseselection-stylefor-fileexplorer() {
    background-color: fade(@active-bg-stcolor,20%);
}
/*----------------------File Explorer End-----------------------*/
/*----------------------Kanban Definition-----------------------*/
@kanban-cell-exceed: #f8d9c7;
@kanban-cell-deceed: #ffedcd;
@kanban-cell-border:@default-border-color;
@kanban-card-border:@content-border-color;
@kanban-select-cardhead-border:lighten(@default-border-color,3%);
@kanban-cardhead-border:lighten(@default-border-color,3%);
@kanban-toolbar-border:@default-border-color;
@kanban-filter-done-stcolor: @hover-bg-stcolor;
@kanban-card-shadow:none;
@kanban-toggle-hover-ftcolor: @active-bg-stcolor;
.kanban-cell-bg(){
.custom-gradient(@default-gradient-color, @default-bg-stcolor, @default-bg-endcolor, 4%, 0%);
}
.kanban-dragclone-bg(){
.custom-gradient(@hover-gradient-color, @hover-bg-stcolor, @hover-bg-endcolor, 21%, 0%);
}
.kanban-skheader-bg(){
	.custom-gradient(@default-gradient-color, @default-bg-stcolor, @default-bg-endcolor, 1%, 0%);
}
.kanban-header-font(){
     color:@active-bg-stcolor;
}
.kanban-targetdrag-font(){
	.default-gradient();
}
.kanban-toggle-content-ftcolor(){
     color: @content-font-color;
     opacity: 0.6;
     filter: alpha(opacity=60);
}
.kanban-toggle-icon-ftcolor(){
     color: @content-font-color;
     opacity: 0.8;
     filter: alpha(opacity=80);
}
/*----------------------Kanban End-----------------------*/
/*----------------------Spreadsheet Definition-----------------------*/
@sscontent-color: @content-font-color;
@ssheader-content-color:@header-font-color;
@sscontent-border-color: @content-border-color;
@ssfroze-border-color: @content-border-color;
@ssdialog-border: @content-border-color;
@sscopy-blank-bgcolor: @content-border-color;
@sscopy-blur-bgcolor: darken( @content-bg-color, 4% );
@sscomments-hdr-bgcolor: darken( @content-bg-color, 5% );
@ssborder-bright: darken( desaturate( @active-bg-stcolor, 8% ), 1% );
@sscomments-focused-border: lighten( desaturate( @active-bg-stcolor, 18% ), 14% );
@sscomments-excel-border: darken( saturate( @header-border-color, 1% ), 4% );
@sspager-font-color:@default-font-color;
@ssheader-border-color: @header-border-color;
@ssheader-bgcolor: @content-bg-color;
@sshover-bg-color: @hover-bg-stcolor;
@ssheader-select-bgcolor: lighten( desaturate(@hover-bg-stcolor, 15% ), 7% );
@ssheader-hover-bordercolor:@hover-border-color;
@sscontent-border-color:@content-border-color;
@ssfroze-highlight-color: darken( desaturate( @active-bg-stcolor, 11% ), 22% );
@sschart-darktheme-bgcolor: darken( @content-font-color, 13% );
@ssdrpdwnbrdr: darken( @header-border-color, 7% );
@ssselectall: lighten(@active-bg-stcolor, 20%);
@ssselectallhover: @active-bg-stcolor;
@ssselectselected: darken( desaturate( @active-bg-stcolor, 16% ), 6% );
@sschart-select-bgcolor: lighten( desaturate( @active-bg-stcolor, 24% ), 20% );
@sscontent-active-bgcolor: darken( desaturate( @active-bg-stcolor, 11% ), 2% );
@sscontent-active-color: @active-font-color;
@ssnumeric-icon-color: darken( @header-border-color, 31% );
@ssactive-bg-color: @active-bg-stcolor;
@ss-icon-color:@default-icon-color;
@ssbtntgle-start-color:lighten(@active-bg-stcolor, 10%);
@ssbtntgle-end-color:lighten(@active-bg-stcolor, 15%);
@ss-chartmenu-bgcolor:lighten( @default-bg-stcolor, 4% );
@ss-chartmenu-color:@default-font-color;
@ss-chartmenuheader-bgcolor:@header-bg-stcolor;
@ss-textarea-color:@default-border-color;
@ssrowselect-font-color:@content-font-color;
.spread-toggle-gradient(){
  .custom-gradient(@active-gradient-color,@ssbtntgle-start-color, @ssbtntgle-end-color, 10%, 0%);
}
@ssactive-font-color:@default-font-color;
@ssactive-icon-color:@default-icon-color;
@ssdown-arrow-cursor:url("../common-images/spreadsheet/down_arrow_light.cur"),auto;
@ssright-arrow-cursor:url("../common-images/spreadsheet/right_arrow_light.cur"),auto;
@ssformatpainter-cursor:url("../common-images/spreadsheet/format_painter_light.cur"),auto;
@ssdraw-border-cursor:url("../common-images/spreadsheet/draw_border_light.cur"),auto;
@ssdraw-border-grid-cursor:url("../common-images/spreadsheet/draw_border_grid_light.cur"),auto;
/*----------------------Spreadsheet End-----------------------*/

/*----------------------rangeScrollbar Start------------------*/

@default-rangeScroll-select-fill: @default-bg-stcolor;
@default-rangeScroll-select-stroke : @default-border-color;
@hover-rangeScroll-select-fill: @hover-bg-stcolor;
@hover-rangeScroll-select-stroke : @hover-border-color;
@default-rangeScroll-backRect-fill:@content-bg-color;
@default-rangeScroll-backRect-stroke:@content-border-color;
@default-rangeScroll-arrow-fill:@default-icon-color;
@hover-rangeScroll-arrow-fill:@hover-icon-color;

/*----------------------rangeScrollbar End--------------------*//*----------------------Office 365 theme-----------------------*/
.border-selection(){}
.colorpicker-color-selection(){  }
.colorpicker-boxshadow-selection(){}
/*----------------------High-Contrast-01 & High-Contrast-02 theme-----------------------*/
.colorpickericon-color-selection(){}
  /*----------------------material theme-----------------------*/
.material-stylefor-bordertop(){}
.material-stylefor-fileexplorer(){
   border-bottom-color: @active-bg-stcolor;
}
.material-stylefor-button(){}
.material-stylefor-datepicker(){}
.material-stylefor-borderradius(){}

/*--------------- common ----------------- */

.switch-animate-icon-color() {
    @active-icon-color: white;
}
.tab-header-background() {}
.switch-grid-header-icon() {}
.switch-datepick-header-hover() {}
.switch-datepick-header-text() {}
.switch-datetimepick-button-text() {}
.switch-colorpicker-grpbtn-text() {}
.switch-splitter-divder-hover() {}
.switch-schedule-appointment-btn() {}
.switch-schedule-header-color() {}
.switch-pivotgrid-draggale-button() {}
.switch-pivotgrid-groupingBar-btn-color() {}
.switch-pivotgrid-btn-hover() {}
.switch-pivotclient-icon-hover() {}
.switch-pivotclient-treeview-icon-hover-active() {}
.switch-checkbox-icontick() {}
.switch-ribbon-file-header-txt-color() {}
.switch-file-explorer-context-icon-color() {}
.switch-rte-active-icon-color() {}
.switch-rte-context-icon-color() {}

/*---------------high-contrast ------*/

.high-contrast-groupbtn-border() {
    @hover-border-color: @default-border-color;
}
.switch-themes-groupbtn-border-color() {
    @hover-gbtn-border-color: transparent;
}
.high-contrast-gantt-toolbar-icon-border() {
    @hover-border-color: transparent;
}
.high-contrast-stylefor-daterange(){}
.high-contrast-stylefor-silder-active() {}
.high-contrast-checkbox-bordercolor() {}
.high-contrast-radio-bordercolor() {}
.high-contrast-radio-iconcircle() {}
.high-contrast-tab-headerborder() {}
.high-contrast-tab-header-normal-font() {}
.high-contrast-rotator-default-border() {}
.high-contrast-rotator-pager-border() {}
.high-contrast-file-explorer-search-text() {}
.high-contrast-file-explorer-content-active() {}
.high-contrast-tagcloud-txt-hover() {}
.high-contrast-ribbon-header-active() {}
.high-contrast-ribbon-header-border() {}
.high-contrast-ribbon-header-active-border() {}
.high-contrast-ribbon-header-active-font() {}
.high-contrast-ribbon-header-hover-font() {}
.high-contrast-ribbon-file-header() {}
.high-contrast-ribbon-file-header-hover() {}
.high-contrast-gantt-textbox-border-color() {}
.high-contrast-gantt-active-font-color() {}
.high-contrast-toolbar-border() {}
.high-contrast-grid-button-border-color() {}
.high-contrast-schedule-content-icon-color() {}
.high-contrast-upload-btn-hover-color(){}
.daterange-inrange-background() {}
/*---------------- Office-365 ----------------*/

.office-grid-footer-bg-color() {}
.office-grid-footer-border-color() {}
.office-grid-pager-bg-color() {}
.office-grid-pager-hover-color() {}
.office-button-bg-color() {}
.office-silder-handle-bg-color() {}
.office-silder-handle-border-color() {}
.office-silder-handle-hover-border-color() {}
.office-acrd-header-bg-color() {}
.office-acrd-header-border-color() {}
.office-tab-headerborder() {}
.office-tab-header-normal-font() {}
.office-colorpick-popup-bg-color() {}
.office-colorpick-popup-border-color() {}
.office-rotator-pager-hover-border() {}
.office-ribbon-header-bg-color() {}
.office-ribbon-header-border() {}
.office-ribbon-header-font-color() {}
.office-ribbon-file-header() {}
.office-pivotclient-toolbar-bg-color() {}
.office-checkbox-bordercolor() {}
.office-file-explorer-toolbar-bg-color() {}
.office-file-explorer-toolbar-border-color() {}
.office-rte-toolbar-color() {}
.office-split-menu-color() {}
.office-tab-header-bg-color {}
.office-radio-iconcircle() {}
.office-radio-bordercolor() {}
.office-dialog-active-line-color() {}
.office-tab-header-hover-font(){}
.office-file-explorer-splitbtn-bg-color(){}
.office-ddl-checkbox-bordercolor(){}
.office-toolbar-bg-color(){}
.office-rte-splitbtn-bg-color(){}
.office-upload-btn-hover-color(){}
.office-tab-header-bghover-color{}
.office-upload-button-border(){}
.office-tab-border-left-right(){
    border: none;
}
.office-pivot-treeview-hover-border(){}
.office-pivot-button-active(){}
.office-pivot-treeview-active-color(){}
.office-pivot-groupingBar-button-active(){}
.office-pivot-button-border(){
    border:1px solid;
}
.office-pivot-dialog-icon-hover(){
   background:@pivotList-dialog-close-hvr-color;
}
/*------------------ material theme ---------------------*/

.material-tab-border() {
    border-bottom: transparent;
}
.material-tab-borderbottom() {
    border-top: 3px @border-type @active-bg-stcolor;
}

.material-tab-right-border(){
  border-left: transparent;
}
.material-tab-right-bottom-border(){
    border-right: 3px @border-type @active-bg-stcolor;
}
.material-tab-left-border(){
    border-right: transparent;
}
.material-tab-left-bottom-border(){
    border-left: 3px @border-type @active-bg-stcolor;
}
.material-tab-bottom-border(){
    border-top: transparent;
}
.material-tab-bottom-border-bottom(){
    border-bottom: 3px @border-type @active-bg-stcolor;
}

.material-datepick-header-icon-color() {}
.material-dialog-icon-hover-bg-color() {}
.material-dialog-icon-hover-color(){}
.material-menu-active-bg-color() {}
.material-radio-bg-color() {}
.material-radio-bordercolor() {}
.material-radio-iconcircle() {}
.material-tab-header-bg-hover-color() {}
.material-tab-headerborder() {}
.material-tab-header-normal-font() {}
.material-tab-header-hover-font() {}
.material-hover-navigation-header-icon-color() {}
.material-tootip-bg-color() {}
.material-tootip-border-color() {}
.material-tootip-text-color() {}
.material-button-border-color() {}
.material-listview-header-icon-color() {}
.material-tileview-bg-color() {}
.material-ribbon-header-active-font() {}
.material-ribbon-file-header() {}
.material-ribbon-file-header-hover() {}
.material-pivot-drag-bg-color() {}
.material-pivot-drag-column-color() {}
.material-pivot-drag-column-br-color() {}
.material-pivot-drag-column-txt-color() {}
.material-pivotclient-box-shadow() {}
.material-grid-droparea-bg-color() {}
.material-grid-header-border-top-color() {}
.material-gantt-header-background() {}
.material-gantt-header-icon-color() {}
.material-upload-background() {}
.material-upload-border() {}
.material-active-box-shadow() {}
.material-normal-box-shadow() {}
.material-checkbox-bordercolor() {}
.material-checkbox-act-bordercolor() {}
.material-upload-dialog-active-line(){
    border-bottom: 3px @border-type @active-bg-stcolor;
}
.material-radio-act-bordercolor(){}
.material-file-explorer-splitbtn-shadow(){}
.material-file-explorer-splitbtn-radius(){}
.material-ddl-checkbox-bordercolor(){}
.material-tab-padding-bottom(){
   padding-bottom: 1px;
}
.material-tab-border-bottom-line(){}

.material-headerStylefor-datepicker(){}
.material-dateDimension-datepicker(){}
.material-dateCircle-datepicker(){}
.material-monthDimension-datepicker(){}
.material-buttonText-alignment(){}
.material-icon-alignment(){}
.material-gantt-toolbar-shadow(){}

.material-datePicker-header() {}
.material-borderRadius-datepicker(){}
.material-datePicker-headerText(){}
.material-headerText-padding(){}
.material-rightIcon-alignment(){}
.material-icon-dimension(){}
.material-icon-position(){}
.material-otherMonth-dateColor(){}
.material-text-dimension(){}
.material-headerHoverStylefor-datepicker(){}
.material-headerHoverStylefor-dateTimePicker(){}
.material-upload-dialog-bg-color(){}
.material-rte-splitbtn-radius(){}
.material-header-RTL(){}
.material-prevIcon-RTL(){}
.material-nextIcon-RTL(){}
.material-drillDownContainer-font(){}
.material-timeDimension-datepicker(){}
.material-content-border-color(){}
/*-----------------------HeatMap Definition-----------------*/
@hmp-border-color: #c8c8c8;
@hmp-font-color:black;
@hmp-background-color:white;
/* Common style */

.e-content-area{
   background-color:@widget-bg-color;
   color:@label-color;
   border-color:@content-border-color;
   font-family:@font-family;
}

/*Theme Color*/
@{e-js}.e-grid.e-rtl .e-indentcell{
border-left-color: @row-border-color;
}
@{e-js}.e-grid .e-rarrowup-2x:before{
    & when (@skin= "material") {
        content: "\e826" !important;
    }
    & when (@skin= "office-365") {
        content: "\e826";
    }
}
@{e-js}.e-grid .e-rarrowdown-2x:before {
    & when (@skin= "material") {
        content: "\e827" !important;
    }
     & when (@skin= "office-365") {
        content: "\e827";
    }
}
@{e-js}.e-grid.e-rtl .e-headercell,
@{e-js}.e-grid.e-rtl .e-grouptopleftcell{
border-right-color:@row-border-color;
border-bottom-color:@row-border-color;
}
@{e-js}.e-grid.e-rtl .e-movablecontent,
@{e-js}.e-grid.e-rtl .e-movableheader {
  border-right-color: @gheader-border-color;
}

/*..........................Skin css...........................*/
@{e-js}.e-grid{
font-family: @font-family;
border-color: @gdroparea-border-color;
color: @gcontent-font-color;
border-top: none;
& when (@skin= "office-365") {
    border-color : @neutral-light;
}
}
@{e-js}.e-grid .e-pager{
.office-grid-pager-bg-color;
& when not (@skin= "material") {
background-color: @pager-default-bg-color;
}
& when (@skin= "material") {
    background-color:@content-bg-color;
    border-width : 1px 0 0;
}
& when (@skin= "office-365") {
    border-width : 1px 0 0;
}

}
@{e-js}.e-grid .e-pager .e-numericitem:hover,
@{e-js}.e-grid .e-pager .e-nextpage:Hover,
@{e-js}.e-grid .e-pager .e-lastpage:Hover,
@{e-js}.e-grid .e-pager .e-firstpage:Hover,
@{e-js}.e-grid .e-pager .e-prevpage:Hover{
.office-grid-pager-hover-color;
}

@{e-js}.e-grid .e-btn.e-select{
.high-contrast-grid-button-border-color;
}
@{e-js}.e-grid .e-togglebutton.e-btn.e-tbtn.e-select.e-flat, @{e-js}.e-grid .e-btn.e-select.e-flat{
    & when (@skin  ="office-365"){
        margin-left: 0 !important;
        margin-right: 6px !important;
    }
}
@{e-js}.e-grid .e-btn.e-btn-normal.e-txt{
    & when (@skin  ="office-365"){
        padding:0;
    }
}
@{e-js}.e-grid .e-icon{
 color: @default-icon-color;
}
.e-groupheadercell .e-icon {
color: @header-icon-color;
}
@{e-js}.e-grid .e-gridheader .e-icon{
 .switch-grid-header-icon;  
 color: @header-icon-color;
}

@{e-js}.e-grid .e-dialog > .e-dialog-scroller,
@{e-js}.e-grid .e-excelfilter.e-dlgcontainer {
  border:@border-size @border-type @content-border-color ~"\9";
}
@{e-js}.e-grid.e-dlgcontainer .e-value .e-caption{
    & when (@skin= "office-365") {
        color:@neutral-secondary;
        font-size:14px;
        
    }
}
@{e-js}.e-grid .e-icon.e-animatebutton {
 .switch-animate-icon-color;
 color: @active-icon-color;
 cursor: pointer;
 & when (@skin= "material") {
     color: @primary-font-color-50;
 }
 & when (@skin= "office-365") {
     color:@neutral-light-font;
 }
}
@{e-js}.e-grid .e-grouptopleftcell {
 border-right: 1px solid #c8c8c8;
}
@{e-js}.e-grid td.e-indentcell + .e-rowcell {
border-left: none;
}
@{e-js}.e-grid th.e-lastgrouptopleftcell + .e-headercell,
@{e-js}.e-grid th.e-grouptopleftcell + .e-stackedHeaderCell{
border-left: none;
}
@{e-js}.e-grid th.e-filterbarcell.e-grouptopleftcell + th.e-filterbarcell{
border-left:none;
}
.e-columnChooser {
	border: 1px solid @default-border-color;
	font-size: @font-size;
    color: @default-font-color;
}
@{e-js}.e-grid .e-ccButton{
    & when (@skin= "material") {
    width:100px !important;
    padding-left:9px !important;
    margin-right:1px !important;
    }

}
@{e-js}.e-grid .e-btncan{
     & when (@skin= "material") {
    color: @base-font-color !important;
     }
}
@{e-js}.e-grid .e-btnsub.e-flat.e-button:after, @{e-js}.e-grid .e-btncan.e-flat.e-button:after{
 & when (@skin= "material") {
    animation: none !important;
	background:transparent;
 }

}
@{e-js}.e-grid .e-ccBtndiv{
    & when (@skin= "material") {
        margin-right:-1px !important;
        border:none !important;
        margin-top:-7px !important;
    }
    & when (@skin= "office-365") {
        margin-top:3px !important;
    }
}

@{e-js}.e-grid .e-ccformbtn{
    & when (@skin= "material") {
    width:80px !important;
    }
}
 .e-columnChoosertail {
	border-bottom-color: @default-border-color;
    & when (@skin= "material") {
   display:none !important;
    }

}
 .e-columnChoosertailAlt {
	border-bottom-color: @gheader-bg-color;
     & when (@skin= "material") {
      border-bottom-color: @default-border-color;
      display:none !important
     }
}
 .e-columnChooserListDiv:hover{
	background-color: @alt-row-bg-color;
}
 .e-columnChooser .e-vhandlespace  {
  background-color: @content-bg-color !important ;
}
 .e-columnChooser .e-hhandlespace  {
  background-color: @content-bg-color !important ;
}
 .e-columnChooserSplitter  {
  border-top: 1px solid @default-border-color; 
     & when (@skin= "material") {
         display:none !important;
   }
 }
@{e-js}.e-grid .e-number  {
  background-color: @grid-uisupport-background-color; 
  color: @grid-uisupport-number-color;
}
@{e-js}.e-grid .e-tableLastCell {
   border-right-color: @row-border-color !important;
}
 .e-stackedHeaderRow th {
	border-bottom: 1px solid @row-border-color !important;
}
 .e-resFilterDialogHeaderDiv {
	border-bottom: 1px solid @row-border-color !important;
}
 .e-resposnsiveFilterBtnLeft {
	border-right: 1px solid @row-border-color !important;
}
 .e-resIcon {
	color:@gheader-border-color !important;
}

 @{e-js}.e-grid .e-filterdialoglarge .e-ddl, @{e-js}.e-grid .e-filterdialoglarge .e-numeric,
 @{e-js}.e-grid .e-filterdialoglarge .e-atc, @{e-js}.e-grid .e-filterdialoglarge .e-datewidget
 {
     & when (@skin= "office-365") {
         height : 32px !important;
     }
 }

@{e-js}.e-grid .e-toolbar .e-hover .e-icon,
@{e-js}.e-grid .e-headercell.e-hover .e-icon  {
 color: @hover-icon-color;
 .material-headerHoverStylefor-datepicker;
}
@{e-js}.e-grid .e-toolbar > .e-horizontal [data-content = "Search"]:hover,
 @{e-js}.e-grid .e-toolbar > .e-horizontal [data-content = "Search"]:active{
    & when (@skin= "material") {
       background:none;
    }
}
@{e-js}.e-grid .e-toolbar > .e-horizontal [data-content = "Search"].e-active >a, 
@{e-js}.e-grid .e-toolbar > .e-horizontal [data-content = "Search"].e-hover >a{
    & when (@skin= "material") {
            background:none;
    }
}

@{e-js}.e-grid .e-toolbar > .e-horizontal [data-content = "Search"] >a.e-searchitem:hover,
@{e-js}.e-grid .e-toolbar > .e-horizontal [data-content = "Search"] >a.e-searchitem:active{
   & when (@skin= "material") {
     background-color:@default-border-color;
   }
}
@{e-js}.e-grid div.e-gridtoolbar{
       & when (@skin= "office-365") {
           background-color:@neutral-white;
           height:40px;
           padding-left:0;
           padding-right:0;
   }
}
@{e-js}.e-grid .e-ejinputtext.e-gridsearchbar{
     & when (@skin= "material") {
    line-height :20px !important;
    text-indent:0.75em;
     }
}

@{e-js}.e-grid .e-dlgBtns .e-button{
  font-family: @font-family;
  font-weight: normal;
  font-size: 14px;
}
@{e-js}.e-grid .e-gridpopup .e-content{
   background-color: @content-bg-color;
   border-color: @gdroparea-border-color;
}
@{e-js}.e-grid .e-gridpopup span:hover,
@{e-js}.e-grid .e-gridpopup .e-spanclicked {
    border-color:@default-icon-color;
}
@{e-js}.e-grid .e-gridpopup .e-downtail:before,
@{e-js}.e-grid .e-gridpopup .e-downtail {
    border-top-color: @gdroparea-border-color;
}
@{e-js}.e-grid .e-gridpopup .e-downtail:after {
    border-top-color: @content-bg-color;
}
@{e-js}.e-grid .e-gridcontent,
@{e-js}.e-grid .e-form-container{
background-color: @gcontent-bg-color;
}
@{e-js}.e-grid.e-columnChooser .e-hscroll ,
@{e-js}.e-grid.e-columnChooser .e-vscroll{
background-color: transparent;           
}
@{e-js}.e-grid .e-groupdroparea{
.pager-selection-gradient();
border-top-color: @row-border-color;
color: @gdroparea-font-color;
 & when (@skin= "material") {
         color: @base-font-color;
         opacity:0.87;
     }
}
@{e-js}.e-grid .e-groupheadercell div{
    & when (@skin= "office-365") {
        margin-right : 8px;
    }
}
@{e-js}.e-grid .e-groupdroparea{
    .material-grid-droparea-bg-color;
}
@{e-js}.e-grid .e-groupdroparea.e-default{
     & when (@skin= "material") {
         background: @primary-color-50;
     }
     & when (@skin= "office-365") {
         background: @neutral-quaternary-alt;
     }
}
@{e-js}.e-grid .e-groupdroparea.e-active{
     & when (@skin= "material") {
         background: @primary-color-300;
     }
      & when (@skin= "office-365") {
         background: @theme-primary;
         padding-top:16px;
         padding-bottom:16px;
     }
}
@{e-js}.e-grid .e-groupdroparea.e-allowDrop{
    & when (@skin= "office-365") {
         background: @theme-primary;
    }
}
@{e-js}.e-grid .e-cloneproperties{
  & when not (@skin= "material"){
    color: @gheader-hover-font-color;
    .row-Hover();
  }
  border-color: @row-border-color;
  & when (@skin= "material") {
    color:rgba(0, 0, 0, 0.54);
    background-color: @grey-200;
    font-size: 13px !important;
    font-family:'Roboto', Segoe UI;
    font-weight:normal;
    border-radius: 22px;
    height:17px !important;
    padding:10px !important;
    width:auto !important;
 }
}
@{e-js}.e-grid.e-draganddrop {
     & when (@skin= "material") {
         background-color: @grey-200;
         border-color: @row-border-color;
         border-width: 1px;
         /*opacity: .5;*/
         padding: 4px 5px;
         /* border-width: 1px; */
         font-size:13px;
          font-family: 'Roboto', Segoe UI;
         border-style: solid;
         white-space: nowrap;
         vertical-align: middle;
         height: auto !important;
         border-radius: 0!important
     }
}
@{e-js}.e-grid.e-draganddrop .e-rowcell{
     & when (@skin= "material") {
         color:rgba(0, 0, 0, 0.54);
         border-color: @row-border-color;

     }
}

@{e-js}.e-grid .e-groupcaption,
@{e-js}.e-grid .e-groupcaptionsummary{
color: @default-font-color;
background-color: @gcaption-border-color;
border-color: @row-border-color;
border-top-color: @default-border-color;
}
@{e-js}.e-grid .e-gridfooter tr.e-gridSummaryRows td.e-scrollindent
{
    border-style: solid;
    border-width: 1px 0 0;
    border-color: @row-border-color;
}
@{e-js}.e-grid .e-gridfooter tr:first-child.e-gridSummaryRows td:first-child.e-indentcell,
@{e-js}.e-grid .e-gridfooter tr:first-child.e-gridSummaryRows td.e-summaryrow,
@{e-js}.e-grid .e-gridfooter tr:first-child.e-gridSummaryRows td.e-scrollindent,
@{e-js}.e-grid .e-gridfooter tr:first-child.e-gridSummaryRows td.e-indentcell
{
    border:none;
}
@{e-js}.e-grid .e-gridsummary .e-indentcell
{
   background-color:@gcaption-border-color;
   border-top-color: @default-border-color;
}
@{e-js}.e-grid .e-headercell-hover,
@{e-js}.e-grid .e-groupheadercell:hover{
color: @gheader-hover-font-color;
.material-headerHoverStylefor-datepicker;
}
@{e-js}.e-grid .e-headercell-hover{
     & when (@skin= "material") {
         background-color:@grey-200;
     }
}
@{e-js}.e-grid .e-headercell-hover .e-headercelldiv{
& when (@skin= "material") {
color : @hover-icon-color;
 .material-headerHoverStylefor-datepicker;
}
}
@{e-js}.e-grid .e-headercell-hover >.e-headercelldiv:hover{
& when (@skin= "material") {
color : @hover-icon-color;
 .material-headerHoverStylefor-datepicker;
 opacity:1;
}
}
@{e-js}.e-grid  .e-gridheader .e-headercellactive .e-icon{
& when (@skin= "material") {
color: @pager-active-font-color;
}
& when (@skin= "office-365") {
color: @pager-active-font-color;
}
} 
@{e-js}.e-grid .e-headercell:not(.e-stackedHeaderCell):not(.e-headercellactive):hover{
    & when (@skin= "office-365") {
        background-color:@neutral-lighter-alt;
    }
}
@{e-js}.e-grid .e-groupheadercell{
color: @gheader-font-color;
border-color: @row-border-color;
border-radius: @gcaption-border-radius;
background-color:@default-bg-stcolor;
  & when (@skin= "material") {
     border-color: @header-bg-stcolor;
  }
}
@{e-js}.e-grid .e-alt_row{
background: @alt-row-bg-color;
  & when (@skin= "material") {
    background: @grey-50;
  }
  & when (@skin ="office-365"){
      background:@neutral-lighter-alt;
  }

}
@{e-js}.e-grid .e-inlineform-titlebar{
border-color: @row-border-color;
background-color: @gedit-title-color;
 & when (@skin= "material") {
    background-color:@widget-bg-color;
 }
 & when (@skin= "office-365") {
    background-color:@neutral-light;
    color:@neutral-secondary;
    font-size:14px;
 }
}
@{e-js}.e-grid .gridform .e-label label{
    & when (@skin= "office-365") {
        padding-top:15px;
        font-size:14px;
        color: @theme-light-font;
    }
}
@{e-js}.e-grid .e-dialog .gridform .e-numerictextbox{
  & when (@skin= "material") {
    width:100% !important;
   }
}
@{e-js}.e-grid .e-indentcell,
@{e-js}.e-grid .e-recordpluscollapse,
@{e-js}.e-grid .e-recordplusexpand{
border-color: @row-border-color;
border-top-color: @default-border-color;
background-color: @gcaption-border-color;
}
@{e-js}.e-grid .e-detailcell,
@{e-js}.e-grid .e-detailrowcollapse,
@{e-js}.e-grid .e-detailrowexpand,
@{e-js}.e-grid tr.e-editedrow td.e-rowcell{
border-top-color:@row-border-color;
}
@{e-js}.e-grid  .e-detailrowcollapse.e-lastrowcell{
 border-bottom-color:@row-border-color;
 }
@{e-js}.e-grid .e-detailindentcell {
 border-right-color: @row-border-color;
}
@{e-js}.e-grid .e-rowcell.e-updatedtd {
    color: @gcontent-font-color;
}
@{e-js}.e-grid .e-rowcell.e-updatedtd.e-active {
    color: @row-selection-font-color;
}
.e-activefocusout@{e-js}.e-grid .e-numericitem.e-active, .e-activefocusout@{e-js}.e-grid .e-groupdroparea , .e-activefocusout@{e-js}.e-grid td.e-active, .e-activefocusout@{e-js}.e-grid td.e-cellselectionbackground {
  background: @grid-focusout;
}
@{e-js}.e-grid td.e-active,
@{e-js}.e-grid .e-form-titlebar{
   & when (@skin= "material") {
     background-color: @grey-100 ;
     color:rgba(0, 0, 0, 0.84) ;
  }
  & when not (@skin= "material") {
     .row-selection();
     color: @row-selection-font-color;
  }
  & when (@skin= "office-365") {
      background-color:@theme-lighter;
      color:@theme-light-font;
  }
}
@{e-js}.e-grid .e-gridFromDiv{
    & when (@skin= "office-365") {
       margin-top:15px;
    }
}
@{e-js}.e-grid td.e-cellselectionbackground{
     & when not (@skin= "material") {
         .cell-selection();
         color: @row-selection-font-color;
     }
      & when (@skin= "material") {
          background-color: @grey-100;
      }
      & when (@skin= "office-365") {
            background-color:@theme-lighter;
            color:@theme-light-font;
      }
}
@{e-js}.e-grid .e-headercelldiv:hover {
     & when (@skin= "material") {
            color: @primary-font-color-50;
			opacity: 0.84
        }
    }
@{e-js}.e-grid .e-inlineform-titlebar{
font-size: @gheader-font-size;
color: @gheader-font-color;
& when (@skin= "material") {
color : @base-font-color;
}
& when (@skin= "office-365") {
color : @neutral-secondary;
}
}
@{e-js}.e-grid .e-form-titlebar{
 & when (@skin= "material") {
color : @base-font-color !important;
border-bottom : 1px solid;
border-color :@default-border-color;
 background-color:@widget-bg-color !important;
}
 & when (@skin= "office-365") {
color : @neutral-secondary;
background-color:@neutral-light;
border-color:@neutral-light;
font-size:14px;
}
}
@{e-js}.e-grid .e-recordpluscollapse > div,
@{e-js}.e-grid .e-detailrowcollapse > div{
background-color: transparent;
cursor:pointer;
}
@{e-js}.e-grid .e-dialog .gridform .e-save{
& when (@skin= "material") {
    margin-left:55px !important;
   }
& when (@skin= "material") {
    margin-left:42px !important;
    }
& when (@skin = "office-365"){
    margin-left:36px !important;
}
}
@{e-js}.e-grid .e-dialog.e-titlebar{
    & when (@skin = "office-365"){
        padding-bottom :20px;
    }
}
@{e-js}.e-grid .e-headercell,
@{e-js}.e-grid .e-grouptopleftcell{
& when not (@skin= "material") {
.gheader-gradient();
border-top-color : @gdroparea-border-color ;
border-left-color : @header-border-color ;
border-bottom-color : @gheader-border-color;
}
& when (@skin= "material") {
    /*background-color : @content-bg-color;*/
    border-left-color: @default-border-color;
    border-bottom-color:@default-border-color;
    border-right-color:@default-border-color;
    /*//border-bottom:1px;*/

  }

& when (@skin= "office-365") {
    /*background-color : @content-bg-color;*/
    border-left-color: @neutral-light;
    border-bottom-color:@neutral-light;
    border-right-color:@neutral-light;
    /*//border-bottom:1px;*/

  }
}

  @{e-js}.e-grid .e-headercell,
    @{e-js}.e-grid .e-headercell-hover{

       & when (@skin= "office-365") {
            /*office-365*/
            color:@neutral-secondary;
        }
  }
  @{e-js}.e-grid .e-rowcell{
        & when (@skin= "office-365") {
            /*office-365*/
            color:@theme-light-font;
            font-size:13px;
        }
  }
@{e-js}.e-grid .e-grouptopleftcell{
    & when (@skin= "material") {
    border-left-color: @default-border-color;
    border-bottom-color:@default-border-color;
 }
}
@{e-js}.e-grid .e-horizontallines .e-resizer{
    & when (@skin= "material") {
    border-width:0 1px 0 0;
    }
}
@{e-js}.e-grid th.e-headercell[aria-sort = ascending] div , @{e-js}.e-grid th.e-headercell[aria-sort = descending] div {
    & when (@skin= "material") {
   font-size:medium;
    }
}
@{e-js}.e-grid .e-columnselection{
.column-selection();
color: @row-selection-bg-color;
 & when (@skin= "material") {
     color:rgba(0, 0, 0, 0.84) ;
 }
& when (@skin= "office-365") {
    background-color: @neutral-light;
    color:@theme-light-font;
    }
}
@{e-js}.e-grid @{e-js}.e-grid-icon{
.gheader-gradient();
}
 @{e-js}.e-grid .e-groupheadercell {
     & when (@skin= "office-365") {
    font:14px;
    background:@theme-light;
    color:@theme-light-font;
    }

 }
 @{e-js}.e-grid .e-groupheadercell:hover{
      & when (@skin= "office-365") {
          background:@theme-lighter;
          font:14px;
          color:@theme-light-font;
      }
 }
 @{e-js}.e-grid .e-groupcaption, @{e-js}.e-grid .e-groupcaptionsummary{
     & when (@skin= "office-365") {
         font-size:17px;
         color:@neutral-secondary;
      }
 }
@{e-js}.e-grid tr.e-groupcaptionrow{
     & when (@skin= "office-365") {
        height:40px;
      }
 }
@{e-js}.e-grid .e-gridheader{ 
color: @gheader-font-color;
border-bottom-color:@gdroparea-border-color;
border-top-color:@gdroparea-border-color;
.material-grid-header-border-top-color;
& when (@skin= "office-365") {
        border-bottom-color:@neutral-light;
        border-top-color:@neutral-light;
      }
}
@{e-js}.e-grid .e-headercontent,
@{e-js}.e-grid .e-movableheader{
border-right-color:@gdroparea-border-color;
}
@{e-js}.e-grid.e-rtl .e-headercontent{
border-left-color: @gdroparea-border-color;
}
@{e-js}.e-grid .e-editcell,
@{e-js}.e-grid .e-form-container,
@{e-js}.e-grid .e-externalformedit,
@{e-js}.e-grid .e-tabletd,
@{e-js}.e-grid .e-rowcell{ 
border-color: @row-border-color;
}
@{e-js}.e-grid .e-form-container,
@{e-js}.e-grid .e-externalformedit{
    & when (@skin= "material") {
        width:100%
    }
}

@{e-js}.e-grid .e-rowcell:first-child{
    & when (@skin= "office-365") {
            padding: 0 8px 0 10px;
           
        }
}
@{e-js}.e-grid .e-rowcell:last-child{
    & when (@skin= "office-365") {
            padding:0 10px 0 8px;
           
        }
}
@{e-js}.e-grid .e-rowcell .e-ejinputtext,
@{e-js}.e-grid .e-ejinputtext.e-filtertext
{
    & when (@skin= "material") {
        background-color:transparent;
        color: @base-font-color;
        border-color: @base-font-color;
        color: fade(@base-font-color,87%);
        border-color: fade(@base-font-color,12%);
        
    }
}
@{e-js}.e-grid .e-rowcell .e-ejinputtext{
    & when (@skin= "material") {
     height:34px !important;
     border-width : 0 0 1px 0;
     width:100% !important;
     }
}

@{e-js}.e-grid .e-ejinputtext.e-filtertext{
  & when (@skin= "material") {
     border-width : 0 0 2px 0;
     text-indent:0;
}

}

@{e-js}.e-grid .e-rowcell .e-ejinputtext:active,
@{e-js}.e-grid .e-ejinputtext.e-filtertext:active
{
     & when (@skin= "material") {
        box-shadow: none;
        border-color: @accent-color;
        border-width:0 0 2px 0;     
    }
     & when (@skin= "office-365") {
         border-color:@theme-primary;
     }
}
@{e-js}.e-grid .e-rowcell .e-ejinputtext:focus,
@{e-js}.e-grid .e-ejinputtext.e-filtertext:focus
{
   & when (@skin= "office-365") {
         border-color:@theme-primary !important;
     }
}

@{e-js}.e-grid .e-rowcell .e-ejinputtext:hover,
@{e-js}.e-grid .e-ejinputtext.e-filtertext:hover
{
     & when (@skin= "material") {
        box-shadow: none;
    }
      & when (@skin= "office-365") {
        border-color: @neutral-dark;
    }
}

@{e-js}.e-grid .e-rowcell .e-ejinputtext[disabled],
@{e-js}.e-grid .e-ejinputtext.e-filtertext[disabled]
{
    & when (@skin= "material") {
        box-shadow: none;
        border-width:0 0 1px 0;
        border-bottom-color: transparent;
        background-image: linear-gradient(to right,rgba(0,0,0,.38) 0%,rgba(0,0,0,.38) 33%,transparent 0%);
        background-image: -ms-linear-gradient(left,transparent 0%,rgba(0,0,0,.38) 100%);
        background-position: bottom -1px left 0;
        background-size: 4px 1px;
        background-repeat: repeat-x;
        color: @base-font-color;
        color: fade(@base-font-color,38%);
      }
}
@{e-js}.e-grid .e-rowcell .e-ejinputtext[disabled]:hover,
@{e-js}.e-grid .e-ejinputtext.e-filtertext[disabled]:hover
{
    & when (@skin= "material") {
       box-shadow: none;
      }
}

@{e-js}.e-grid .e-rowcell .e-ejinputtext.e-animation:focus,
@{e-js}.e-grid .e-ejinputtext.e-filtertext.e-animation:focus
{
     & when (@skin= "material") {
        border-color: @base-font-color;
        border-color: fade(@base-font-color,12%);
    }
}
@{e-js}.e-grid .e-rowcell .e-ejinputtext::selection,
@{e-js}.e-grid .e-ejinputtext.e-filtertext::selection
{
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
        border-width:0 0 2px 0;
    }
}
@{e-js}.e-grid .e-rowcell .e-ejinputtext::-moz-selection,
@{e-js}.e-grid .e-ejinputtext.e-filtertext::-moz-selection
{
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
    }
}

@{e-js}.e-grid .e-form-togglebtn:hover{
 .hover-gradient();
}
@{e-js}.e-grid .e-form-toggle-icon{
color:white;
}
@{e-js}.e-grid .e-filterbarcell,
@{e-js}.e-grid .e-filterbarcelldisabled{
border-color: @row-border-color;
background-color: @gheader-bg-color;
background-image: none;
& when (@skin= "material") {
   background-color:@content-bg-color;
   border-color:@default-border-color;
 }
}
@{e-js}.e-grid @{e-js}.e-grid-filterstatusbar,
@{e-js}.e-grid @{e-js}.e-grid-filterstatusbarbottom{
.pager-selection-gradient();
border-color: @gdroparea-border-color;
}

@{e-js}.e-grid @{e-js}.e-grid-filterstatusbar .e-msgdiv,
@{e-js}.e-grid @{e-js}.e-grid-filterstatusbarbottom .e-msgdiv{
color: white;
}

@{e-js}.e-grid .e-groupdroparea.e-hover {
.pager-hover-gradient();
& when (@skin= "office-365"){
    background-color:@theme-primary;
}
}
@{e-js}.e-grid tr.e-hover {

 .row-Hover();
 color:@hover-font-color;
  & when (@skin= "material"){
      background-color: @grey-200;
      color:rgba(0, 0, 0, 0.84);
  }
    & when (@skin= "office-365"){
      background-color: @neutral-lighter;
      color:@theme-light-font;
  }
}
@{e-js}.e-grid tr.e-traverse  {
 .row-Hover();
 color:@hover-font-color;
}
@{e-js}.e-grid .e-scrollcss {
  & when not (@skin= "material") {
   .gheader-gradient();
  }
 & when (@skin= "material") {
    background-color:@grey-50;
 }
}
@{e-js}.e-grid .e-headercell-hover,
@{e-js}.e-grid .e-filtercell:hover,
@{e-js}.e-grid .e-groupheadercell:hover{
     & when not (@skin= "office-365") {
         .header-hover-gradient();
     }
}
@{e-js}.e-grid .e-reorderindicate {
 border-right-color:@row-selection-bg-color;
 & when (@skin= "material") {
 border-right-color:@accent-color;
 }
}
@{e-js}.e-grid.e-rtl .e-reorderindicate{
 border-left-color:@row-selection-bg-color;
}
@{e-js}.e-grid div.e-field-validation-error {
    & when not (@skin= "material") {
     background-color: #FFFE91;
	color: #CD0A0A;
    word-wrap: break-word;
    }
     & when (@skin= "material") {
      background-color:@grey-700;
      color:@primary-font-color;
     }
       & when (@skin= "office-365") {
      font-size:12px;
      background-color:@warning-bg-color;
      color:@neutral-light-font;
     }
    white-space: normal;
}
@{e-js}.e-grid .e-dialog .e-addedrow label, @{e-js}.e-grid .e-dialog .e-editedrow label, @{e-js}.e-grid .e-inlineformedit label, @{e-js}.e-grid .e-externalformedit label{
    & when (@skin= "office-365") {
        font-size:14px;
        color:@neutral-light-font;
    }

}
@{e-js}.e-grid form.gridform.field-validation-empty{
    border: 1px solid #cd0a0a;    
}

@{e-js}.e-grid .e-editedrow .e-normaledit .e-ddl{
     & when (@skin= "office-365") {
         width:100%;
     }
}
@{e-js}.e-grid div.e-error .e-toparrow {
    & when not (@skin= "material") {
          border-bottom-color:#fffe92; 

    }
    & when (@skin= "material") {
      border-bottom-color:@grey-700;
     }
    & when (@skin= "office-365"){
        border-bottom-color:@warning-bg-color;
    }
}
@{e-js}.e-grid .e-ejinputtext {
border: 1px solid @content-border-color;
outline:none;
background-color: @content-bg-color;
color: @content-font-color;
vertical-align:baseline;
}

 .e-ejinputtext:focus {
box-shadow: 0 0 5px @shadow-bg-color;
}
@{e-js}.e-grid .e-summaryrow {
    .office-grid-footer-bg-color;
	background-color:@gcaption-border-color;
    .office-grid-footer-border-color;
	border-color: @default-border-color;
    border-left-color:  @default-border-color !important;  
    & when (@skin= "office-365"){
        background-color:@neutral-light;
        border-color:@neutral-white;
    }
}
    .e-gridfooter {
        width: 100%;
        background-color: @gcaption-border-color;
        border-top: 1px solid @default-border-color;
    }
@{e-js}.e-grid .e-detailcell tr:first-child td.e-summaryrow{
	border-top: 1px solid @default-border-color;
}

@{e-js}.e-grid .e-gridSummaryRows{
    color: @default-font-color;
    & when (@skin= "material") {
        height:48px ;
     color:rgba(0, 0, 0, 0.84) ;
    }
     & when (@skin= "office-365") {
       font-size:14px;
     color:@theme-light-font ;
    }
}

@{e-js}.e-grid .e-reSizeColbg {
  border-left-color:@row-border-color;
    & when (@skin= "office-365") {
      border-left-color:@neutral-light-font-alt;
      border-left-style:solid;
    }
}

 @{e-js}.e-grid .e-headercell-hover .e-ascending,
@{e-js}.e-grid .e-groupheadercell:hover .e-ascending,
@{e-js}.e-grid .e-headercell-hover .e-filtericon,
@{e-js}.e-grid .e-headercell-hover .e-descending,
@{e-js}.e-grid .e-headercell-hover .e-togglegroupbutton,
@{e-js}.e-grid .e-groupheadercell:hover .e-descending,
@{e-js}.e-grid .e-groupheadercell:hover .e-togglegroupbutton,
@{e-js}.e-grid .e-groupheadercell:hover .e-ungroupbutton{
background-color:transparent;
 & when not (@skin= "material") {
color:@hover-icon-color;

 }

}

@{e-js}.e-grid .e-headercellactive,@{e-js}.e-grid .e-headercellactive span,
@{e-js}.e-grid .e-headercellactive div {
color: @pager-active-font-color;
}
@{e-js}.e-grid .e-headercellactive {
.pager-selection-gradient();
& when (@skin= "material") {
 .header-hover-gradient();
}
}
@{e-js}.e-grid .e-movablecontent,
@{e-js}.e-grid .e-movableheader {
    & when not (@skin= "material") {
          border-left-color: @gheader-border-color;
    }
    & when (@skin= "material") {
        border-left-color:@grey-500;
    }
}
@{e-js}.e-grid .e-frozeny {
     & when not (@skin= "material") {
         border-bottom-color: @gheader-border-color !important;
     }
      & when (@skin= "material") {
          border-bottom-color:@grey-500 !important;
      }
}
@{e-js}.e-grid .e-dialog .e-header .e-icon{
color: @header-font-color;
}
@{e-js}.e-grid.e-responsive .e-rowcell{
border-bottom-color: @row-border-coloropac;
}
@{e-js}.e-grid.e-responsive .e-table > tbody > tr > td:last-child {
border-bottom-color: @row-border-color;
}
@{e-js}.e-grid form .e-select:hover .e-icon,@{e-js}.e-grid form .e-select:hover .e-icon{
color: @hover-icon-color;
}
@{e-js}.e-grid.e-touch .e-gridheader .e-headercell,@{e-js}.e-grid.e-touch .e-rowcell{
  -moz-user-select: text;
            -khtml-user-select: none;
            -webkit-user-select: text;
            -ms-user-select: text;
            user-select: text;
}
@{e-js}.e-grid .e-gridcontent tr.e-editedrow:not(.e-alt_row) {
    background-color: @content-bg-color;
}


.e-heatmap.e-grid {
    display: block;
}

.e-heatmaplegend {
    display: block;
}

.e-heatmap.e-grid .e-alt_row,
.e-heatmap.e-grid td.e-cellselectionbackground,
.e-heatmap.e-grid .e-headercell, .e-heatmap.e-grid .e-grouptopleftcell {
    background: white;
}

.e-heatmap.e-js.e-grid {
    font-size: 12px;
}

.e-heatmap.e-js.e-grid .e-headercelldiv {
    font-weight: 600;
    font-size: 12px;
}

.e-heatmap.e-js.e-grid.e-responsive .e-rowcell {
    font-size: 12px;
}

.e-heatmap.e-js.e-grid .e-headercell {
    height: 30px;
}

.e-heatmap.e-js.e-grid.e-responsive .e-row td:first-child,
.e-heatmap.e-js.e-grid.e-responsive .e-alt_row td:first-child {
    font-weight: 600;
    font-size: 12px;
}

.e-heatmap.e-js.e-grid .e-gridheader {
    border-bottom-width: 1px;
}

.e-heatmap.e-js.e-grid,
.e-heatmap.e-js.e-grid.e-responsive .e-row td:first-child,
.e-heatmap.e-js.e-grid.e-responsive .e-alt_row td:first-child,
.e-heatmap.e-js.e-grid.e-responsive .e-rowcell,
.e-heatmap.e-js.e-grid .e-alt_row,
.e-heatmap.e-js.e-grid td.e-cellselectionbackground,
.e-heatmap.e-js.e-grid .e-headercell,
.e-heatmap.e-js.e-grid .e-grouptopleftcell,
.e-heatmap.e-js.e-grid.e-headercell.e-default.e-headertemplate,
.e-heatmap.e-js.e-grid .e-gridheader,
.e-heatmap.e-js.e-grid .e-movablecontent,
.e-heatmap.e-js.e-grid .e-movableheader {
    border-color: @hmp-border-color;
}

.e-heatmap.e-js.e-grid.e-responsive .e-rowcell {
    border-bottom: none;
}

.e-heatmaplegend.e-js .sf-ht-label,
.e-heatmap.e-js.e-grid .e-rowcell.sf-ht-heatmapcell,
.e-heatmap.e-js.e-grid .e-headercelldiv {
    color: @hmp-font-color;
}

.e-heatmap.e-js.e-grid .e-alt_row,
.e-heatmap.e-js.e-grid .e-row,
.e-heatmap.e-js.e-grid .e-headercell.e-default.e-headertemplate,
.e-heatmap.e-js.e-grid .e-cellselectionbackground .e-activecell,
.e-heatmap.e-grid td.e-cellselectionbackground {
    background-color: @hmp-background-color;
}

.e-heatmaplegend.e-js .sf-ht-label,
.e-heatmap.e-js.e-grid .e-rowcell.sf-ht-heatmapcell,
.e-heatmap.e-js.e-grid .e-headercelldiv {
    color: @hmp-font-color;
}

.e-heatmap.e-js.e-grid .e-alt_row,
.e-heatmap.e-js.e-grid .e-row,
.e-heatmap.e-js.e-grid .e-headercell.e-default.e-headertemplate,
.e-heatmap.e-js.e-grid .e-cellselectionbackground .e-activecell,
.e-heatmap.e-grid td.e-cellselectionbackground {
    background-color: @hmp-background-color;
}



.e-excelfilter.e-dlgcontainer {
    font-family: @font-family;
    font-weight: normal;
    font-size: @font-size + 1;   
    color: @gcontent-font-color;
    z-index:10001;
    & when (@skin= "office-365") {
        padding :20px 12px;
    }
}

.e-excelfilter .e-searchcontainer,
.e-excelfilter.e-dlgcontainer {
    background: none @gcontent-bg-color;
}
.e-excelfilter .e-btncan{
    & when (@skin= "material") {
        color:@base-font-color !important; 
  }

}
.e-excelfilter .e-menu,
.e-excelfilter .e-menu.e-vertical,
.e-excelfilter .e-menu.e-vertical .e-list > ul {
    background: @gcontent-bg-color;
    & when (@skin= "material") {
        box-shadow:none;
    }
}

.e-excelfilter .e-checkboxlist {
    background: @alt-row-bg-color;
    border: @alt-row-bg-color;
}
.e-excelfilter.e-dlgcontainer,
.e-excelfilter.e-dlgcustom .e-fieldset,
.e-excelfilter .e-menu.e-vertical .e-list > ul{
    border-width: @border-size;
    border-style: @border-type;
    border-color: @scroll-bg-color;
}
.e-excelfilter .e-checkboxlist label.e-ftrchk,
.e-excelfilter.e-dlgcustom label.e-caption,
.e-excelfilter .e-searchbox .e-searchitem{
    font-weight:normal;
}
.e-excelfilter .e-optable .e-fields .e-value span.e-widget{
    & when (@skin= "material") {
      width:160px !important;
    }
}
 .e-sortasc,
 .e-sortdesc {
    font-size: @font-size + 6;
}
.e-excelfilter.e-dlgcustom .e-fieldset legend {      
       font-size: @font-size + 2;
       color: @gcontent-font-color;
       border: none;      
}
.e-excelfilter .e-select:hover .e-icon{
color: @hover-icon-color;
}
.e-excelfilter.e-dlgcustom .e-input{
line-height: 1.7em;
}
.e-excelfilter{
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
     user-select: none;
}
.e-excelfilter .e-menu .e-list.e-fghdrcolor, .e-excelfilter .e-menu .e-list.e-bghdrcolor, e-excelfilter .e-menu .e-list.e-fghdrcolor.e-mhover.e-mfocused, .e-excelfilter .e-menu .e-list.e-bghdrcolor.e-mhover.e-mfocused,
.e-excelfilter .e-menu.e-vertical .e-list.e-fghdrcolor:hover, .e-excelfilter .e-menu.e-vertical .e-list.e-bghdrcolor:hover  {
    background: @content-bg-color;
}
.e-bghdrcolor > a, .e-fghdrcolor > a {
	color: @gheader-font-color;
}
.e-excelfilter .e-menu .e-list.e-valcolor{
    border-color: @gheader-bg-color;
}
.e-excelfilter .e-menu .e-list.e-valcolor.e-mhover.e-mfocused{
   border-color: @gheader-border-color;
   background: transparent;
}
.e-excelfilter .e-menu .e-list.e-fghdrcolor.e-mhover > a, .e-excelfilter .e-menu .e-list.e-fghdrcolor.e-mfocused > a, 
.e-excelfilter .e-menu .e-list.e-bghdrcolor.e-mhover > a, .e-excelfilter .e-menu .e-list.e-bghdrcolor.e-mfocused > a {
    background: transparent;  
    color: @gheader-font-color; 
}

.e-excelfilter .e-searchbox .e-ejinputtext{
     & when (@skin= "material") {
         border-width:0 0 2px 0;
         text-indent:0.75em; 
     }
}
.e-excelfilter .e-searchbox .e-ejinputtext:focus{

     & when (@skin= "material") {
         box-shadow:none;
         border-color:@accent-color;
     }
}

.e-excelfilter .e-menu-wrap ul.e-menu{
    & when (@skin= "material") {
        padding-left:0px;
        padding-top:12px;
    }
}
.e-excelfilter .e-btncontainer input,
.e-excelfilter .e-checkboxlist .e-ftrchk{
    & when (@skin= "material") {
        margin-top: 12px;
        margin-bottom: 12px;
        margin-left: 14px;
    }
}
.e-excelfilter .e-searchcontainer .e-fields{
    & when (@skin= "material") {
        margin:12px 0;
    }
}
.e-btn.e-btn-normal,.e-tbtn.e-btn-normal{
    & when (@skin= "material") {
        padding:0 10px;
    }
}

.e-excelfilter .e-btncontainer > div{
        & when (@skin= "material") {
        padding-left: 41px;
    }

}

.e-excelfilter.e-dlgcustom{
    & when (@skin= "material") {
        padding-bottom: 8px !important;
    }
}

.e-excelfilter  .e-dialog{
    & when (@skin= "office-365") {
        padding:20px 25px 0;
    }
}
.e-excelfilter.e-dlgcustom.e-dialog:first-child{
        & when (@skin= "office-365") {
            padding-top:8px;
        }
    }
.e-excelfilter.e-dlgcustom .e-dlgfields:last-child{
      & when (@skin= "office-365") {
            padding-bottom:0;
        }
}
 .e-excelfilter.e-dlgcustom .e-dlgfields {
        & when (@skin= "office-365") {
            padding-bottom: 20px;
        }
    }
.e-excelfilter span.e-filternone.e-icon{
     & when (@skin= "office-365") {
         margin:0;
     }
}
.e-excelfilter .e-checkboxlist .e-ftrchk{
    & when (@skin= "office-365") {
         margin-top:6px;
         height:36px;
     }
}
.e-excelfilter ul.e-menu.e-vertical{
     & when (@skin= "office-365") {
         width:242px !important;
     }
}
.e-excelfilter .e-searchcontainer .e-btncontainer.e-fields .e-button:last-child{
      & when (@skin= "office-365") {
         margin-right:0 !important;
     }
}
.e-excelfilter .e-searchcontainer .e-btncontainer.e-fields{
    & when (@skin= "office-365") {
        float:right;
    }

}
.e-excelfilter .e-shadow .e-list>a{
    & when (@skin= "office-365") {
       padding-left:12px !important;
    }
}
.e-excelfilter .e-shadow{
     & when (@skin= "material") {
        box-shadow:10px 10px 10px @grey-300 !important;
    }
}

/*---------------------------------Schedule Theme--------------------------------*/
@{e-js}.e-schedule,
@{e-js}.e-schedule.e-scheduleouter {
    & when (@skin= "material") {
        color: @base-font-color;
        background-color: @content-bg-color;
    }

    & when (@skin= "office-365") {
        color: @neutral-dark;
        background-color: @neutral-white;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        color: @content-font-color;
        background-color: @content-bg-color;
    }
}

@{e-js}.e-schedule .e-mobileNavigation {
    & when (@skin= "material") {
        color: @primary-font-color;
    }

    & when not (@skin= "material") {
        color: @default-icon-color;
    }
}

@{e-js}.e-scheduledrawer .e-mAddEvent,
@{e-js}.e-scheduledrawer .e-mday,
@{e-js}.e-scheduledrawer .e-mweek,
@{e-js}.e-scheduledrawer .e-mworkweek,
@{e-js}.e-scheduledrawer .e-mmonth,
@{e-js}.e-scheduledrawer .e-mcustomview,
@{e-js}.e-scheduledrawer .e-magenda {
    color: @default-icon-color;
}

@{e-js}.e-scheduledrawer .e-lv .e-list.e-state-default:hover > .e-list-img {
    color: @hover-icon-color;
}

.navDrawerMenu li {
    & when (@skin= "office-365") {
        border-bottom: 1px solid @neutral-light !important;
    }
}

@{e-js}.e-scheduledrawer .e-list.e-state-active .e-list-img {
    & when (@skin= "material") {
        color: @accent-color;
    }

    & when (@skin= "office-365") {
        color: @theme-primary;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        color: @active-icon-color;
    }
}

@{e-js}.e-schedule .icon-AddGrad:before {
    color: #2382C3;
}

@{e-js}.e-schedule .e-datecommondiv {
    & when (@skin= "material") {
        color: @primary-font-color;
    }

    & when (@skin= "office-365") {
        color: @neutral-secondary;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        color: @default-font-color;
    }
}

@{e-js}.e-schedule .e-commonviewbutton {
    & when (@skin= "material") {
        color: @primary-font-color;
        background: @primary-color;
    }

    & when (@skin= "office-365") {
        color: @neutral-light-font;
        background: @neutral-lighter;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        .bs-default-gradient();
        color: @default-font-color;
        border: @border-size @border-type @default-border-color;
        border-right: none;
    }
}

@{e-js}.e-schedule .e-commonviewbutton.e-activeview:hover {
    & when (@skin= "office-365") {
        color: @theme-dark-font;
        background: @theme-dark;
    }
}

@{e-js}.e-schedule .e-nextapp:hover,
@{e-js}.e-schedule .e-prevapp:hover {

    & when (@skin="material") {
        background-color: fade(@base-font-color,12%);
    }

    & when (@skin= "office-365") {
        color: @neutral-light-font-alt;
        background-color: @neutral-light;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        .hover-gradient();
        border-color: @hover-border-color;
        color: @hover-font-color;
    }
}

@{e-js}.e-scheduledialog .e-scheduleclose:hover {
    & when (@skin="material") {
        background-color: none;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        .hover-gradient();
        border-color: @hover-border-color;
        color: @hover-font-color;
    }
}

@{e-js}.e-schedule .e-commonviewbutton:hover {
    & when (@skin= "office-365") {
        color: @neutral-light-font-alt;
        background: @neutral-light;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        .hover-gradient();
        color: @hover-font-color;
    }
}

@{e-js}.e-schedule .e-appup,
@{e-js}.e-schedule .e-appdown {
    & when (@skin= "material") {
        color: @base-font-color;
    }

    & when not (@skin= "material") {
        color: @default-font-color;
    }
}

@{e-js}.e-schedule .e-appup:hover,
@{e-js}.e-schedule .e-appdown:hover {
    & when not (@skin= "material") {
        color: @schedule-select-bg-color;
    }
}

@{e-js}.e-schedule .e-singleview {
    & when not (@skin= "material") and not (@skin="office-365") {
        border-right: @border-size @border-type @default-border-color;
    }
}

@{e-js}.e-schedule.e-rtl .e-firstview,
@{e-js}.e-schedule .e-lastview {
    & when not (@skin= "material") and not (@skin="office-365") {
        border: @border-size @border-type @default-border-color;
    }
}

@{e-js}.e-schedule .e-dateheader {
    border-bottom: @schedule-active-border-size @border-type @schedule-header-border-color;
}

@{e-js}.e-schedule .e-horizontalemptytd {
    .switch-schedule-header-color;
    border: none !important;
    border-right: @border-size @border-type @content-border-color !important;
    border-top: @border-size @border-type @content-border-color !important;
}

@{e-js}.e-schedule.e-rtl .e-horizontalemptytd {
    .switch-schedule-header-color;
    border: none !important;
    border-left: @border-size @border-type @content-border-color !important;
    border-top: @border-size @border-type @content-border-color !important;
}

.e-categorizeMenuSelected {
    background: none repeat scroll 0 0 aliceblue;
    border: 1px solid #0094ff !important;
}

@{e-js}.e-schedule .e-dateheader, @{e-js}.e-schedule .e-leftindent {
    .switch-schedule-header-color;
    border-bottom: @border-size @border-type @content-border-color;
}

@{e-js}.e-scheduledialog .e-quickstartend {
    & when (@skin= "material") {
        color: fade(@base-font-color,87%);
    }
}

@{e-js}.e-scheduledialog .e-quickstartendtime {
    .switch-schedule-header-color;
    border-bottom: @border-size @border-type @content-border-color;
}

@{e-js}.e-scheduledialog .e-quickcreatebottomcontainer {
    & when (@skin= "material") {
        border-top: @border-size @border-type @grey-300;
    }
}

@{e-js}.e-schedule .e-horizontalheader {
    .switch-schedule-header-color;
    border-bottom: @schedule-active-border-size @border-type @schedule-header-border-color !important;
    background: @header-bg-stcolor;
    color: @header-font-color;
}

@{e-js}.e-schedule .e-horizontalheadertddate {
    border-left: none !important;
    border-bottom: none !important;
    border-right: none !important;
}

@{e-js}.e-schedule .e-horizontaltimetd {
    .switch-schedule-header-color;
    border-bottom: @schedule-active-border-size @border-type @schedule-header-border-color !important;
    border-top: @border-size @border-type @header-border-color !important;
    border-left: @border-size @border-type @header-border-color;
}

@{e-js}.e-schedule .e-horizontalalternatetd {
    .switch-schedule-header-color;
    border-bottom: @schedule-active-border-size @border-type @schedule-header-border-color !important;
    border-left: @border-size @border-type transparent;
    border-top: @border-size @border-type @header-border-color !important;
}

@{e-js}.e-schedule .e-horizontmonthheaderdatetd {
    .switch-schedule-header-color;
    border-bottom: @border-size @border-type @header-border-color !important;
    border-left: @border-size @border-type @header-border-color;
}

@{e-js}.e-schedule .e-horizontmonthheaderdaytd {
    .switch-schedule-header-color;
    border-bottom: @schedule-active-border-size @border-type @schedule-header-border-color !important;
    border-left: @border-size @border-type @header-border-color;
}

@{e-js}.e-schedule .e-horizontmonthheaderdaytd,
@{e-js}.e-schedule .e-horizontaltabletimecell {
    & when (@skin= "material") {
        background: @content-bg-color;
    }
}

@{e-js}.e-schedule .e-alternateworkcell {
    .switch-schedule-header-color;
    border-left: @border-size dotted @content-border-color !important;
}

@{e-js}.e-schedule .e-dayend {
    .switch-schedule-header-color;
    border-left: 2px @border-type @content-border-color !important;
}

@{e-js}.e-schedule .e-parentnode,
@{e-js}.e-schedule .e-parentworkcell {
    .switch-schedule-header-color;
    border-bottom: @border-size @border-type @content-border-color !important;
}


@{e-js}.e-schedule .e-parentnode {
    & when not (@skin= "material") {
        .default-gradient();
        border-bottom: @border-size @border-type @content-border-color !important;
    }
}

@{e-js}.e-schedule .e-childnode,
@{e-js}.e-schedule .e-childworkcell {
    .switch-schedule-header-color;
    border-bottom: @border-size dotted @content-border-color !important;
}

@{e-js}.e-schedule .e-workcells,
@{e-js}.e-schedule .e-monthcells {
    .switch-schedule-header-color;
    border-bottom: @border-size @border-type @content-border-color;
    border-left: @border-size @border-type @content-border-color;
    background: @schedule-cells-bg-color;
}

@{e-js}.e-schedule .e-othermonths {
    border-left: @border-size @border-type transparent;
}

@{e-js}.e-schedule .e-agendacells {
    .switch-schedule-header-color;
    border-bottom: @border-size @border-type @content-border-color;
    border-left: @border-size @border-type @content-border-color;
}

@{e-js}.e-schedule .e-agendahover,
@{e-js}.e-schedule .e-schedulerepeat,
@{e-js}.e-schedule .e-schedulerepeatedit,
@{e-js}.e-schedule .e-scheduleallday {
    .high-contrast-schedule-content-icon-color;
    color: @active-bg-stcolor;
}

@{e-js}.e-schedule .e-alternatecells, @{e-js}.e-schedule .e-ampmstyle {
    & when (@skin= "material") {
        border-bottom: @border-size dashed @grey-300;
    }

    & when (@skin= "office-365") {
        border-bottom: @border-size dotted @neutral-quaternary;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        border-bottom: @border-size dotted lighten( @content-border-color, 2% );
    }
}

@{e-js}.e-schedule .e-ampmstyle {
    & when (@skin= "material") {
        border-bottom: @border-size dotted transparent;
    }
}

@{e-js}.e-schedule .e-appointresizer-top,
@{e-js}.e-schedule .e-appointresizer-bottom,
@{e-js}.e-schedule .e-appointresizer-left,
@{e-js}.e-schedule .e-appointresizer-right {
    & when (@skin= "office-365") {
        color: @theme-primary-font;
    }

    & when not (@skin="office-365") {
        color: @active-font-color;
    }
}

@{e-js}.e-schedule .e-monthcellhighlight {
    & when (@skin= "office-365") {
        background: @neutral-white;
    }

    & when not (@skin="office-365") {
        background: @content-bg-color;
    }
}

@{e-js}.e-schedule .e-businesshighlightworkcells {
    & when (@skin= "office-365") {
        background: @neutral-white;
    }

    & when not (@skin="office-365") {
        background: @content-bg-color;
    }
}

@{e-js}.e-schedule .e-scheduleheader {
    & when (@skin= "material") {
        background: @primary-color;
    }

    & when (@skin= "office-365") {
        background: @neutral-white;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        .default-gradient();
    }
}

@{e-js}.e-schedule .e-nextapp,
@{e-js}.e-schedule .e-prevapp {
    & when (@skin="material") {
        color: fade(@base-font-color,87%);
        background-color: @grey-100;
        border: @border-size @border-type @grey-400;
        border-bottom: transparent;
    }

    & when (@skin= "office-365") {
        color: @neutral-light-font;
        background: @neutral-lighter;
        border: @border-size @border-type @neutral-lighter;
        border-bottom: transparent;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        .default-gradient();
        border: @border-size @border-type @default-border-color;
        border-bottom: transparent;
        color: @default-font-color;
    }
}

@{e-js}.e-schedule .e-nextprevappdisable {
    & when (@skin= "material") {
        color: fade(@base-font-color,26%);
        background-color: fade(@base-font-color,12%);
    }

    & when (@skin= "office-365") {
        color: @neutral-tertiary;
        background: @neutral-lighter;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        opacity: 0.4;
    }
}

@{e-js}.e-schedule .e-navigatenext,
@{e-js}.e-schedule .e-navigateprevious {
    & when (@skin= "material") {
        color: @primary-font-color;
    }

   & when (@skin= "office-365") {
         color:@neutral-secondary;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        color: @default-icon-color;
    }
}

@{e-js}.e-schedule .e-scheduleheader > td {
    & when (@skin= "office-365") {
        border: @border-size @border-type @content-border-color;
        border-bottom: none;
    }

    & when not (@skin="office-365") {
        border: @border-size @border-type @default-border-color;
        border-bottom: none;
    }
}

@{e-js}.e-schedule .e-headerarearow > td {
    .switch-schedule-header-color;
    border: @border-size @border-type @content-border-color;
    border-bottom: none;
}

@{e-js}.e-schedule .e-contentarearow > td {
    .switch-schedule-header-color;
    border: @border-size @border-type @content-border-color;
    border-top: none;
}

@{e-js}.e-schedule .e-resourceexpand:after,
@{e-js}.e-schedule .e-resourcecollapse:after {
    & when (@skin= "material") {
        background: @grey-400;
    }
}

.e-schedule.e-scheduleresponsive.e-resources {
    .switch-schedule-header-color;
    border-right: @border-size @border-type @content-border-color;
}

@{e-js}.e-schedule.e-rtl.e-scheduleresponsive.e-resources {
    .switch-schedule-header-color;
    border-right: none;
    border-left: @border-size @border-type @content-border-color;
}

@{e-js}.e-schedule .e-headerbackcolor,
@{e-js}.e-schedule .e-timecells {
    .switch-schedule-header-color;
    border-bottom: @border-size @border-type @content-border-color;
}

@{e-js}.e-schedule .e-monthheader, @{e-js}.e-schedule .e-scrolltimecells {
    & when (@skin= "material") {
        color: @base-font-color;
    }

    & when (@skin= "office-365") {
        color: @neutral-light-font;
    }
}

@{e-js}.e-schedule .e-currentdayhighlight {
    & when (@skin= "material") {
        color: @accent-color !important;
        background: fade(@accent-color,12%) !important;
    }

    & when (@skin= "office-365") {
        color: @theme-light-font !important;
        background: @theme-lighter !important;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        color: @header-font-color !important;
        background: fade(@active-bg-stcolor, 30%) !important;
    }
}

@{e-js}.e-schedule .e-horizontal .e-currentdayhighlight {
    & when (@skin= "material") {
        background: none !important;
    }

    & when (@skin= "office-365") {
        background: @neutral-white !important;
        color: @theme-primary !important;
    }
}

@{e-js}.e-schedule .e-currentdayhighlight .e-activeview {
    & when (@skin= "material") {
        background: none !important;
        color: @accent-color !important;
        border: none;
    }

    & when (@skin= "office-365") {
        background: @neutral-white !important;
        color: @theme-primary !important;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        background: none !important;
        color: @header-font-color !important;
    }
}

@{e-js}.e-schedule .e-headercells:not(.e-currentdayhighlight) .e-activeview {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
        border: none;
    }
}

@{e-js}.e-schedule .e-mousehover {
    background-color: @schedule-select-bg-color !important;
    color: @hover-font-color;
}

@{e-js}.e-schedule .e-mousehover .e-agendahover,
@{e-js}.e-schedule .e-mousehover .e-schedulerepeat,
@{e-js}.e-schedule .e-mousehover .e-schedulerepeatedit,
@{e-js}.e-schedule .e-mousehover .e-scheduleallday {
    & when (@skin= "material") {
        color: fade(@base-font-color,54%);
    }

    & when not (@skin= "material") {
        color: @hover-icon-color;
    }
}

@{e-js}.e-schedule .e-highlightcurrenttimeline {
    background-color: darken(@active-bg-stcolor,5%);
}

@{e-js}.e-schedule .e-currenttime {
    background-color: darken(@active-bg-stcolor,5%);
    color: @active-font-color;
}

@{e-js}.e-schedule .e-timeidicatorcircle {
    color: darken(@active-bg-stcolor,5%);
}

@{e-js}.e-scheduledialog .e-recuredit {
    color: @active-bg-stcolor;
}

@{e-js}.e-schedule .e-alldaycells {
    .switch-schedule-header-color;
    border-left: @border-size @border-type @content-border-color;
    border-bottom: @border-size @border-type @content-border-color;
}

@{e-js}.e-schedule .e-headerresourcecells {
    .switch-schedule-header-color;
    border-bottom: @border-size @border-type @content-border-color;
}

@{e-js}.e-schedule .e-resourcecells,
@{e-js}.e-schedule .e-monthnamecells{
    .switch-schedule-header-color;
    border-left: @border-size @border-type @header-border-color;
    border-bottom: @border-size @border-type @header-border-color;
    background: @header-bg-stcolor;
    color: @header-font-color;
}

@{e-js}.e-schedule .e-headercells {
    .switch-schedule-header-color;
    border-left: @border-size @border-type @header-border-color;
    border-bottom: @schedule-active-border-size @border-type @schedule-header-border-color;
    background: @header-bg-stcolor;
    color: @header-font-color;
}

@{e-js}.e-schedule .e-monthdateshighlight {
    & when (@skin= "office-365") {
        color: @neutral-tertiary-alt;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        color: @watermark-font-color !important;
    }
}

@{e-js}.e-schedule .e-monthcurrenttime {
    background: darken(@active-bg-stcolor,5%);
    color: @active-font-color;
}

@{e-js}.e-schedule.e-rtl .e-agendacells,
@{e-js}.e-schedule.e-rtl .e-workcells,
@{e-js}.e-schedule.e-rtl .e-alldaycells,
@{e-js}.e-schedule.e-rtl .e-monthcells {
    border-left: none !important;
    border-right: @border-size @border-type @content-border-color;
}

@{e-js}.e-schedule.e-rtl .e-resourcecells,
@{e-js}.e-schedule.e-rtl .e-headercells,
@{e-js}.e-schedule.e-rtl .e-horizontmonthheaderdatetd,
@{e-js}.e-schedule.e-rtl .e-horizontmonthheaderdaytd,
@{e-js}.e-schedule.e-rtl .e-monthnamecells{
    .switch-schedule-header-color;
    border-left: none !important;
    border-right: @border-size @border-type @header-border-color;
}

@{e-js}.e-schedule.e-rtl .e-othermonths {
    border-left: none !important;
    border-right: @border-size @border-type transparent;
}

@{e-js}.e-schedule.e-rtl .e-dayend {
    border-left: none !important;
    border-right: 2px @border-type @content-border-color !important;
}

@{e-js}.e-schedule.e-rtl .e-horizontaltimetd {
    .switch-schedule-header-color;
    border-left: none !important;
    border-right: @border-size @border-type @header-border-color;
}

@{e-js}.e-schedule.e-rtl .e-alternateworkcell {
    border-left: none !important;
    border-right: @border-size dotted @content-border-color !important;
}

@{e-js}.e-schedule.e-rtl .e-horizontalalternatetd {
    border-left: none !important;
    border-right: @border-size @border-type transparent !important;
}

@{e-js}.e-schedule .e-activeview {
    & when (@skin= "material") {
        opacity: 1;
        border-bottom: 2px @border-type @accent-color;
    }

    & when (@skin= "office-365") {
        color: @theme-primary-font;
        background: @theme-primary;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        .schedule-app-color();
        color: @active-font-color;
    }
}

@{e-js}.e-schedule .e-monthleftcells,
@{e-js}.e-schedule .e-settingsindent {
    .switch-schedule-header-color;
    border-bottom: @schedule-active-border-size @border-type @schedule-header-border-color;
    background: @header-bg-stcolor;
    color: @header-font-color;
}

@{e-js}.e-schedule .e-resourceleftindentcells,
@{e-js}.e-schedule .e-monthnameleftindentcell{
    .switch-schedule-header-color;
    border-bottom: @border-size @border-type transparent;
    background: @header-bg-stcolor;
    color: @header-font-color;
}

@{e-js}.e-schedule .e-horizontaldaterender {
    .switch-schedule-header-color;
    background: @header-bg-stcolor;
    color: @header-font-color;
}

@{e-js} .e-draggableAppointment,
@{e-js}.e-schedule .e-monthappointment,
@{e-js}.e-schedule .e-alldayappointment,
@{e-js}.e-schedule .e-appointment,
@{e-js}.e-schedule .e-inline {
    .schedule-app-color();
    color: @active-font-color;
    border: @border-size @border-type @schedule-app-border-color;
}

@{e-js}.e-schedule .e-categorycolor,
@{e-js}.e-schedule .e-agendacolordiv {
    .schedule-app-color();
}

@{e-js}.e-schedule .e-selectedAppointment {
    border: 1px solid black;
}

@{e-js}.e-schedule .e-selectedCell,
@{e-js}.e-schedule .e-agendaappointment.e-selectedAppointment {
    & when (@skin= "material") {
        background-color: @grey-100 !important;
    }

    & when (@skin= "office-365") {
        background-color: @theme-lighter !important;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        background-color: @schedule-select-bg-color !important;
    }
}

@{e-js}.e-schedule .e-borderleft {
    border-left: @border-size @border-type @content-border-color;
}

@{e-js}.e-schedule .e-borderright {
    border-right: @border-size @border-type @content-border-color !important;
}

@{e-js}.e-scheduledialog .e-buttonactive:not(.e-disable) {
    & when (@skin= "material") {
        background-color: fade(@base-font-color,12%) !important;
    }

    & when (@skin= "office-365") {
        background: @theme-primary !important;
        color: @theme-primary-font !important;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        background: @active-bg-stcolor !important;
        color: @active-font-color !important;
    }
}

@{e-js}.e-scheduledialog .e-buttonactive:not(.e-disable):hover {
    & when (@skin= "material") {
        background-color: fade(@base-font-color,12%) !important;
    }

    & when (@skin= "office-365") {
        background: @theme-dark !important;
        color: @theme-dark-font !important;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        background: @hover-bg-stcolor !important;
        color: @hover-font-color !important;
    }
}

@{e-js}.e-scheduledialog .e-detailedapp,
@{e-js}.e-scheduledialog .e-editevents {
    .switch-schedule-appointment-btn;
    color: @active-bg-stcolor;
}

@{e-js}.e-scheduledialog .e-dialogheader {
    font-weight: bold !important;
}

@{e-js}.e-scheduledialog .e-outerarrowline {
    border-color: @content-border-color rgba(0, 0, 0, 0);
    border-image: none;
    border-style: solid;
    border-width: 9px 9px 0;
    left: 0;
    position: absolute;
    top: 0;
}

@{e-js}.e-scheduledialog .e-innerarrow {
    border-color: @content-bg-color rgba(0, 0, 0, 0);
    border-image: none;
    border-style: solid;
    border-width: 8px 8px 0;
    left: 1px;
    position: absolute;
    top: 0;
}

@{e-js} .e-draggableAppointment {
    box-shadow: 5px 5px 5px @overlay-bg-color;
}

@{e-js}.e-schedule .e-blocktimeappointment {
    background-color: darken(@default-bg-stcolor, 20%);
    color: @default-font-color;
    opacity: 0.4;
}

@{e-js}.e-scheduledialog div.e-field-validation-error {
    & when (@skin= "material") {
        background-color: @grey-700;
        color: @primary-font-color;
        white-space: normal;
    }

    & when not (@skin= "material") {
        background-color: #fffe91;
        color: #cd0a0a;
        white-space: normal;
    }
}

@{e-js}.e-schedule .e-appsoverflow {
    color: @default-icon-color;
}

@{e-js}.e-schedule .e-appsoverflow:hover {
    color: @hover-icon-color;
}

@{e-js}.e-scheduledialog div.e-error .e-toparrow {
    & when not (@skin= "material") {
        border-bottom-color: #fffe92;
    }

    & when (@skin= "material") {
        border-bottom-color: @grey-700;
    }
}

@media print {
    @{e-js}.e-schedule .e-monthappointment,
    @{e-js}.e-schedule .e-alldayappointment,
    @{e-js}.e-schedule .e-appointment,
    @{e-js}.e-schedule .e-activeview,
    @{e-js}.e-schedule .e-currenttime,
    @{e-js}.e-schedule .e-highlightcurrenttimeline,
    @{e-js}.e-schedule .e-agendacolordiv,
    @{e-js}.e-schedule .e-selectedCell{
        background: @schedule-app-stbg-color !important; /* Old browsers */
        & when (@skin= "gradient-azure-dark") {
            background: -moz-linear-gradient(top, @schedule-app-stbg-color 0%, @schedule-app-endbg-color 100%) !important; /* FF3.6+ */
        }
        & when (@skin= "gradient-lime") {
            background: -moz-linear-gradient(top, @schedule-app-stbg-color 0%, @schedule-app-endbg-color 100%) !important; /* FF3.6+ */
        }
        & when (@skin= "gradient-lime-dark") {
            background: -moz-linear-gradient(top, @schedule-app-stbg-color 0%, @schedule-app-endbg-color 100%) !important; /* FF3.6+ */
        }
        & when (@skin= "gradient-saffron") {
            background: -moz-linear-gradient(top, @schedule-app-stbg-color 0%, @schedule-app-endbg-color 100%) !important; /* FF3.6+ */
        }
        & when (@skin= "gradient-saffron-dark") {
            background: -moz-linear-gradient(top, @schedule-app-stbg-color 0%, @schedule-app-endbg-color 100%) !important; /* FF3.6+ */
        }
        & when not (@skin= "gradient-azure-dark") and not (@skin="gradient-lime") and not (@skin="gradient-lime-dark") and not (@skin="gradient-saffron") and not (@skin="gradient-saffron-dark"){
            background: -moz-linear-gradient(top, 0%, @schedule-app-endbg-color 100%) !important; /* FF3.6+ */
        }
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@schedule-app-stbg-color), color-stop(100%,@schedule-app-endbg-color)) !important; /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, @schedule-app-stbg-color 0%,@schedule-app-endbg-color 100%) !important; /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, @schedule-app-stbg-color 0%,@schedule-app-endbg-color 100%) !important; /* Opera 11.10+ */
        background: -ms-linear-gradient(top, @schedule-app-stbg-color 0%,@schedule-app-endbg-color 100%) !important; /* IE10+ */
        background: linear-gradient(to bottom, @schedule-app-stbg-color 0%,@schedule-app-endbg-color 100%) !important; /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{schedule-app-stbg-color}', endColorstr='@{schedule-app-endbg-color}',GradientType=0 ) !important; /* IE6-9 */
        color: #fff !important;
    }
    
    @{e-js}.e-schedule .e-scheduleheader {
        & when (@skin= "material") {
            background: @primary-color !important;
        }
        & when (@skin= "office-365") {
            background: @neutral-white !important;
        }
        & when not (@skin= "material") and not (@skin="office-365") {
            .media-print-default-gradient(@default-gradient-color, @default-bg-stcolor, @default-bg-endcolor, 0%, 0%);
        }
    }
    
    .media-print-default-gradient(@derivedfrom, @start, @end, @light, @dark) when (true) {
        &{
            .generate();
        }
        .generate() when (@derivedfrom = none) {
            @gradient: none;
            background: @start !important; 
        }
        .generate() when not (@derivedfrom = none) {
            @gradient: lighten(extract(@derivedfrom, 1), @light), darken(extract(@derivedfrom, 2), @dark) !important;
            background: @start !important; /* Old browsers */
            background: -moz-linear-gradient(top, @gradient) !important; /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(100%,@end)) !important; /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,@gradient) !important; /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, @gradient) !important; /* Opera 11.10+ */
            background: -ms-linear-gradient(top, @gradient) !important; /* IE10+ */
            background: linear-gradient(to bottom, @gradient) !important; /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{start}', endColorstr='@{end}',GradientType=0 ) !important; /* IE6-9 */
        }
    }

    @{e-js}.e-schedule .e-workcells,
    @{e-js}.e-schedule .e-monthcells {   
        border-bottom: @border-size @border-type @content-border-color !important;
        border-left: @border-size @border-type @content-border-color !important;
        background: @schedule-cells-bg-color !important;
    }

    @{e-js}.e-schedule .e-monthcellhighlight {
        & when (@skin= "office-365") {
            background: @neutral-white !important;
        }
        & when not (@skin="office-365") {
            background: @content-bg-color !important;
        }
    }

    @{e-js}.e-schedule .e-businesshighlightworkcells {
        & when (@skin= "office-365") {
            background: @neutral-white !important;
        }
        & when not (@skin="office-365") {
            background: @content-bg-color !important;
        }
    }

    @{e-js}.e-schedule .e-nextapp,
    @{e-js}.e-schedule .e-prevapp {
        & when (@skin="material") {
            color: fade(@base-font-color,87%) !important;
            background-color: @grey-100 !important;
            border: @border-size @border-type @grey-400 !important;
            border-bottom: transparent !important;
        }
        & when (@skin= "office-365") {
            color: @neutral-light-font !important;
            background: @neutral-lighter !important;
            border: @border-size @border-type @neutral-lighter !important;
            border-bottom: transparent !important;
        }
        & when not (@skin= "material") and not (@skin="office-365") {
            .media-print-default-gradient(@default-gradient-color, @default-bg-stcolor, @default-bg-endcolor, 0%, 0%);
            border: @border-size @border-type @default-border-color !important;
            border-bottom: transparent !important;
            color: @default-font-color !important;
        }
    }

    @{e-js}.e-schedule .e-apptext,
    @{e-js}.e-schedule .e-apptime,
    @{e-js}.e-schedule .e-recurapp:before,
    @{e-js}.e-schedule .e-recureditapp:before {
        color: @active-font-color !important;
    }
    
    @{e-js}.e-schedule .e-scheduleallday:before,
    @{e-js}.e-schedule .e-schedulerepeat:before,
    @{e-js}.e-schedule .e-schedulerepeatedit:before,
    @{e-js}.e-schedule .e-timeidicatorcircle:before {
        color: @schedule-app-stbg-color !important;
    }

    @{e-js}.e-schedule .e-alternatecells, 
    @{e-js}.e-schedule .e-ampmstyle {
        & when (@skin= "material") {
            border-bottom: @border-size dashed @grey-300 !important;
        }
        & when (@skin= "office-365") {
            border-bottom: @border-size dotted @neutral-quaternary !important;
        }
        & when not (@skin= "material") and not (@skin="office-365") {
            border-bottom: @border-size dotted lighten( @content-border-color, 2% ) !important;
        }
    }

    @{e-js}.e-schedule .e-othermonths {
        border-left: @border-size @border-type transparent !important;
    }
}
/*-----------------------Schedule Theme End -----------------------------*/



 @{e-js}.e-grid.e-rtl .e-nextpage,
  @{e-js}.e-grid.e-rtl .e-nextpagedisabled{
border-left-color: @pager-default-border-color;
}

@{e-js}.e-pager, @{e-js}.e-grid .e-pagerstatusbar, @{e-js}.e-pager .e-drpdwn li, @{e-js}.e-pager .e-drpdwn, @{e-js}.e-pager div.e-drpdwndiv {
background-color: @pager-default-bg-color;
border-color: @pager-default-border-color;
color: @pager-font-color;
 & when (@skin= "office-365") { 
       background-color: @neutral-white;
    }
}

@{e-js}.e-pager {
    & when (@skin= "material") {
        /*material*/
        font-family: @font-family;
        font-size: 13px;
        color: fade(@base-font-color, 87%);
        background-color: @primary-font-color;
        border-color: @grey-300;
        border-width: 1px 1px 1px;
    }
     & when (@skin= "office-365") { 
       border-width:1px 1px;
    }
}

@{e-js}.e-pager .e-icon {
    & when (@skin= "material") {
        position: relative;
    }
    & when (@skin= "office-365") { 
        height:32px;
        width: 32px;   
        line-height:32px;   
        padding:0;
        text-align:center;
         color: @default-icon-color;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        color: @default-icon-color;
    }
}

@{e-js}.e-pager .e-default:hover {
    & when (@skin= "office-365") {        
         color:@neutral-secondary;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        color: @hover-font-color;
    }
}

@{e-js}.e-pager .e-spacing {
    color: @pager-default-font-color;
    & when (@skin= "material") {
        /*material*/
        padding: 6px 1px 6px 1px;
    }    
     & when (@skin= "office-365") {        
         color: @neutral-secondary;
    }
}

@{e-js}.e-pager .e-spacing.e-NP {
    color: @default-icon-color;
}

@{e-js}.e-pager .e-numericitem.e-hover ,
@{e-js}.e-pager .e-currentitem.e-hover{
     & when (@skin= "material") {   
         background-color:@grey-200;
         color: fade(@base-font-color, 87%);
    }
    & when (@skin= "office-365") {   
         background-color:@neutral-lighter;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        color: @hover-font-color;
        .pager-hover-gradient();
    }
}
@{e-js}.e-pager.e-disable .e-numericitem.e-hover {
	 background: @pager-default-bg-color;
     border-right-color: @pager-default-border-color;
	& when (@skin= "material") {
		background: @content-bg-color;
        color: fade(@base-font-color, 87%);
	}
    & when (@skin= "office-365") {        
        background:transparent;
        border-right-color:#fff;
    }
}
@{e-js}.e-pager .e-numericitem {
    font-family: @font-family;
    & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
        color: fade(@base-font-color, 87%);
        border-right-color: @content-bg-color;
        width: 30px;
        height: 20px;
        line-height: 20px;
        border-right: 0;
        margin: 0 8px 0 8px;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
    }
    & when (@skin= "office-365") {        
         width: 32px;
        height: 32px; 
        line-height:32px;  
        border-right-color:@neutral-white;
    }
    & when not (@skin= "material") and not (@skin="office-365"){
                /*other*/
        background: @pager-default-bg-color;
        border-right-color: @pager-default-border-color;
    }
}

@{e-js}.e-pager .e-prevpagedisabled,
@{e-js}.e-pager .e-prevpage,
@{e-js}.e-pager .e-nextpage,
@{e-js}.e-pager .e-nextpagedisabled,
@{e-js}.e-pager .e-lastpagedisabled,
@{e-js}.e-pager .e-lastpage,
@{e-js}.e-pager .e-firstpage,
@{e-js}.e-pager .e-firstpagedisabled {
    & when not (@skin= "material") {
        /*other*/
        background-color: @pager-default-bg-color;
        color: @default-icon-color;
    }
    & when (@skin= "office-365") {        
         background-color:@neutral-white;
        color: @neutral-secondary;
    }
}

@{e-js}.e-pager .e-prevpagedisabled,
@{e-js}.e-pager .e-nextpagedisabled,
@{e-js}.e-pager .e-lastpagedisabled,
@{e-js}.e-pager .e-firstpagedisabled {
    & when (@skin= "material") {
        /*material*/
        background-color: @content-bg-color;
        color: fade(@base-font-color, 26%);
    }
}

@{e-js}.e-pager .e-prevpage,
@{e-js}.e-pager .e-nextpage,
@{e-js}.e-pager .e-lastpage,
@{e-js}.e-pager .e-firstpage {
    & when (@skin= "material") {
        /*material*/
        background-color: @content-bg-color;
        color: fade(@base-font-color, 54%);
    }
}

@{e-js}.e-pager .e-lastpage,
@{e-js}.e-pager .e-firstpage {
    & when not (@skin= "material") {
        /*other*/
        background-color: transparent;
    }
}

@{e-js}.e-pager .e-nextpage.e-hover,
@{e-js}.e-pager .e-lastpage.e-hover,
@{e-js}.e-pager .e-firstpage.e-hover,
@{e-js}.e-pager .e-prevpage.e-hover {
     & when (@skin= "material") {        
         color:fade(@base-font-color,87%);  
         background-color:@grey-200;
         border-radius:50%;
    }
     & when (@skin= "office-365") {        
         border-radius:0;
         background-color:@neutral-lighter;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        .hover-pager-gradient();
    }
     
}
@{e-js}.e-pager.e-disable .e-nextpage.e-hover,
@{e-js}.e-pager.e-disable .e-lastpage.e-hover,
@{e-js}.e-pager.e-disable .e-firstpage.e-hover,
@{e-js}.e-pager.e-disable .e-prevpage.e-hover {
     & when (@skin= "material") {        
        background: @content-bg-color;
        color: fade(@base-font-color, 54%);
    }
     & when (@skin= "office-365") {        
         border-radius:0;
         background:transparent;
     }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        background: transparent;
        border-right-color: #c8c8c8;
        color: #686969;
    }
     
}
@{e-js}.e-pager .e-pagercontainer {
    & when (@skin= "material") {
        /*material*/
        background-color: @content-bg-color;
        border-color: @content-bg-color;
        margin: 2px 6px -4px 16px;
        border-width: 0px;
    }
    & when (@skin= "office-365") {        
         border:none;
         background-color: @neutral-white;
         border-radius:0;
    }
    & when not (@skin= "material") and not (@skin="office-365"){
        /*other*/
        background-color: @pager-default-bg-color;
        border-color: @pager-default-border-color;
    }
}

@{e-js}.e-pager.e-rtl .e-pagercontainer {
    & when (@skin= "material") {
        /*material*/        
        margin: 4px 16px -4px 6px;
    }
}

@{e-js}.e-pager.e-rtl .e-numericitem {
    & when (@skin= "material") {
        /*material*/
        border-left-color: @primary-font-color;
    }
     & when (@skin= "office-365") {        
         border-left-color: @neutral-white;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        border-left-color: @pager-default-border-color;
    }
}

@{e-js}.e-pager .e-firstpage,
@{e-js}.e-pager .e-prevpage,
@{e-js}.e-pager .e-firstpagedisabled,
@{e-js}.e-pager .e-prevpagedisabled,
@{e-js}.e-pager .e-nextpage,
@{e-js}.e-pager .e-lastpage,
@{e-js}.e-pager .e-nextpagedisabled,
@{e-js}.e-pager .e-lastpagedisabled {
    & when (@skin= "material") {
        /*material*/
        border-right-color: @primary-font-color;
        padding: 6px 5px 6px 6px;
        margin: 5px 8px 0 8px;
        height: 12px;
        width: 13px;
        display: inline-block;
        border-radius: 50%;
    }
    & when (@skin= "office-365") {        
        border-right-color: @neutral-white;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        border-right-color: @pager-default-border-color;
    }
}

@{e-js}.e-pager.e-rtl .e-firstpage,
@{e-js}.e-pager.e-rtl .e-prevpage,
@{e-js}.e-pager.e-rtl .e-firstpagedisabled,
@{e-js}.e-pager.e-rtl .e-prevpagedisabled,
@{e-js}.e-pager.e-rtl .e-nextpage,
@{e-js}.e-pager.e-rtl .e-lastpage,
@{e-js}.e-pager.e-rtl .e-nextpagedisabled,
@{e-js}.e-pager.e-rtl .e-lastpagedisabled {
    & when (@skin= "material") {
        /*material*/
        border-left-color: @primary-font-color;
        padding: 6px 5px 6px 5px;
    }
     & when (@skin= "office-365") {        
         border-left-color:@neutral-white;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        border-left-color: @pager-default-border-color;
    }
}

@{e-js}.e-pager.e-rtl div.e-parentmsgbar {
    & when (@skin= "material") {
        /*material*/
        padding-left: 24px;
    }
     & when (@skin= "office-365") {        
         margin-left:10px;
    }
      & when not (@skin= "material") and not (@skin="office-365"){
       margin-left:6px;    
      }
    float: left;    
   
}

@{e-js}.e-pager .e-currentitem.e-active {
    & when (@skin= "material") {
        /*material*/
        background: @accent-color;
        border-radius: 50%;
        color: @accent-font-color;
    }
    & when (@skin= "office-365") {        
         background: @theme-lighter;
    }
    & when not (@skin= "material") and not (@skin="office-365"){
        /*other*/
        .pager-selection-gradient();
        color: @pager-active-font-color;
        /*background-color:#428BCA;*/
    }
}
@{e-js}.e-pager .e-currentitem.e-hover {
     & when (@skin= "material") {
        /*material*/
        background: @grey-200;
        border-radius: 50%;
        color: fade(@base-font-color,87%);
    }
     & when (@skin= "office-365") {        
          background-color:@neutral-lighter;
    }
       & when not (@skin= "material") and not (@skin="office-365"){
        /*other*/
        .pager-selection-gradient();
        color: @pager-active-font-color;
        /*background-color:#428BCA;*/
    }
}

@{e-js}.e-pager.e-disable .e-currentitem.e-hover {
     & when (@skin= "material") {
        /*material*/
        background: #ff4081;
        border-radius: 50%;
        color: #fff;
       
    }
     & when (@skin= "office-365") {        
          background:#deecf9;
          border-right-color:#fff;
    }
       & when not (@skin= "material") and not (@skin="office-365"){
        /*other*/
        .pager-selection-gradient();
        color: @pager-active-font-color;
        background-color:#179bd7;
    }
}

@{e-js}.e-pager .e-NP.e-numericitem, @{e-js}.e-pager .e-PP.e-numericitem {
    & when (@skin= "material") {
        vertical-align: top;
        line-height: 12px;
    }
}
@{e-js}.e-pager .e-drpdwndiv:before {
    color: @pager-font-color;
    background: @pager-default-bg-color;
}
@{e-js}.e-pager .e-pager-itemsinterval .e-drpdwndiv:hover:before, 
@{e-js}.e-pager .e-pager-itemsinterval .e-drpdwndiv:hover,
@{e-js}.e-pager .e-drpdwn li:hover {
    & when (@skin= "material") {
        /*material*/
       background: @grey-200;
       color:  fade(@base-font-color,87%);  
    }

    & when not (@skin= "material") {
        /*other*/
       .hover-gradient();
       color: @hover-font-color;
    }  
}
@{e-js}.e-pager.e-disable .e-pager-itemsinterval .e-drpdwndiv:hover:before, 
@{e-js}.e-pager.e-disable .e-pager-itemsinterval .e-drpdwndiv:hover,
@{e-js}.e-pager.e-disable .e-drpdwn li:hover {
    color: @pager-font-color;
    background: @pager-default-bg-color;
}
@{e-js}.e-pager .e-drpdwn li.e-active {
     & when (@skin= "material") {
        /*material*/
        background-color: @content-bg-color;
        color: @accent-color; 
    }
    & when not (@skin= "material")  {
        /*other*/ 
	   .active-gradient();
       color: @active-font-color;
    } 
    border-bottom: 1px solid rgb(255,255,255);
    border-bottom: 1px solid rgba(255,255,255,0.3);    
}

@{e-js}.e-pager div.e-numericcontainer{
     & when (@skin= "office-365") {        
         margin-top:6px;
    }
}
@{e-js}.e-pager div.e-parentmsgbar{
    & when (@skin= "office-365") {        
         color:@neutral-secondary;
    }
}
@{e-js}.e-pager .e-textbox-paging.e-pagercontainer{
	float: none;
}
@{e-js}.e-pager .e-template{
	width: 100%;
}
@{e-js}.e-pager .e-textbox-paging .e-gototextbox{
  & when not (@skin= "material") and not (@skin="office-365"){
			border: none;
	}
}
@{e-js}.e-pager .e-textbox-paging .e-nextpage,@{e-js}.e-pager .e-textbox-paging .e-nextpagedisabled{
	& when not (@skin= "material") and not (@skin="office-365"){
		border-left: 1px solid;
		border-color: @pager-default-border-color;
	}	
}
@{e-js}.e-pager.e-rtl .e-textbox-paging .e-nextpage,@{e-js}.e-pager.e-rtl .e-textbox-paging .e-nextpagedisabled{
	& when not (@skin= "material") and not (@skin="office-365"){
		border-right: 1px solid;
		border-color: @pager-default-border-color;
	}
}
@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-gototextbox{
	float: none;
	margin-right:0px;
	height: 26px;
}
@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-gototextbox{
	width: 75px;
}
@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-newrecord,@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-firstpage,
@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-lastpage,@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-nextpage,
@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-prevpage,@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-firstpagedisabled,
@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-lastpagedisabled,@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-nextpagedisabled,
@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-prevpagedisabled{
	 & when (@skin= "material") {  
			margin: 5px 8px 0 8px;
			height: 12px;
			width: 13px;
			display: inline-block;
			border-radius: 50%;
			padding: 6px 3px 5px 6px;
			color: rgba(0,0,0,.54);
	}
	& when not (@skin= "material") and not (@skin="office-365"){
		padding: 9px 3px 8px 8px;
	}
	& when (@skin="office-365"){
		padding: 0px;
	}
}
@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-newrecord,@{e-js}.e-pager.e-rtl .e-textbox-paging.e-pagercontainer .e-newrecord{
	& when (@skin="office-365"){
		font-weight: bolder;
	}
}
@{e-js}.e-pager.e-disable .e-textbox-paging.e-pagercontainer .e-newrecord.e-hover{
	background: transparent;
}
@{e-js}.e-pager.e-rtl .e-textbox-paging.e-pagercontainer .e-newrecord,@{e-js}.e-pager.e-rtl .e-textbox-paging.e-pagercontainer .e-firstpage,
@{e-js}.e-pager.e-rtl .e-textbox-paging.e-pagercontainer .e-lastpage,@{e-js}.e-pager.e-rtl .e-textbox-paging.e-pagercontainer .e-nextpage,
@{e-js}.e-pager.e-rtl .e-textbox-paging.e-pagercontainer .e-prevpage,@{e-js}.e-pager.e-rtl .e-textbox-paging.e-pagercontainer .e-firstpagedisabled,
@{e-js}.e-pager.e-rtl .e-textbox-paging.e-pagercontainer .e-lastpagedisabled,@{e-js}.e-pager.e-rtl .e-textbox-paging.e-pagercontainer .e-nextpagedisabled,
@{e-js}.e-pager.e-rtl .e-textbox-paging.e-pagercontainer .e-prevpagedisabled{

	& when not (@skin= "material") and not (@skin="office-365"){
			padding: 8px 8px 2px 2px;
	}
	& when (@skin="office-365"){
			padding: 0px;
	}
}
@{e-js}.e-pager.e-rtl .e-textbox-paging .e-gototextbox{
	& when not (@skin= "material") and not (@skin="office-365"){
		float: right;
	}
}
@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-newrecord.e-hover{
	& when not (@skin= "material") and not (@skin="office-365"){
		border-radius: 0px 4px 4px 0px;
	}
	& when (@skin= "material"){
		border-radius: 50%;
	}
}
@{e-js}.e-pager.e-rtl .e-textbox-paging.e-pagercontainer .e-newrecord.e-hover{
	& when not (@skin= "material") and not (@skin="office-365"){
		border-radius: 0px;
	}
}
@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-lastpage.e-hover{
	& when not (@skin= "material") and not (@skin="office-365"){
		border-radius: 0px;
	}
}
@{e-js}.e-pager .e-textbox-paging.e-pagercontainer .e-newrecord.e-hover{
	& when not (@skin= "material") and not (@skin="office-365"){
		.hover-pager-gradient();
	}
	& when (@skin= "office-365"){
		 background-color:@neutral-lighter;
	}
		& when (@skin= "material"){ 
         background-color:@grey-200;
	}
}
@{e-js}.e-pager .e-template .e-textbox-paging .e-lastpage,@{e-js}.e-pager .e-template .e-textbox-paging .e-lastpagedisabled{
	border-right: inherit;
}
@{e-js}.e-pager.e-rtl .e-template .e-lastpage,@{e-js}.e-pager.e-rtl .e-template .e-lastpagedisabled{
	& when not (@skin= "material") and not (@skin="office-365"){
		border-right: none;
		border-left: 1px solid;
		border-left-color: @pager-default-border-color;
	}
}
@{e-js}.e-pager .e-template .e-previouspager.e-nextprevitemdisabled,@{e-js}.e-pager .e-template .e-nextpager.e-nextprevitemdisabled{
	display: none;
}



/*------------------------------------- scrollbar -------------------------------------------*/

@{e-widget}.e-scrollbar .e-vscroll,
@{e-widget}.e-scrollbar .e-hscroll,
@{e-widget}.e-scrollbar .e-vhandlespace {
    & when (@skin="material") {
        background-color: @grey-400;
        border-color: @grey-300;
    }
    & when (@skin= "office-365") {        
         background-color: @neutral-white;
    }
   & when not (@skin= "material") and not (@skin="office-365") {
        background-color: @scroll-bg-color;
    }
}
@{e-widget}.e-scrollbar .e-vscroll{
    &when not(@skin="material"){
        border-left:@border-size @border-type @content-border-color;
    }
    &when (@skin="material"){
        border-left:@border-size @border-type @grey-300;
    }
     &when (@skin="office-365"){
        border-left:none;
    }
    border-right:none;
}
@{e-widget}.e-scrollbar .e-hscroll{
    &when not(@skin="material"){
        border-top:@border-size @border-type @content-border-color;
    }
    &when (@skin="material"){
        border-top:@border-size @border-type @grey-300;
    }
     &when (@skin="office-365"){
        border-top:none;
    }
}
@{e-widget}.e-scrollbar .e-vhandlespace,
@{e-widget}.e-scrollbar .e-hhandlespace {
    position: relative;
    background-color: @scroll-bg-color;
}
@{e-widget}.e-scrollbar .e-hscroll .e-hdown.e-icon{
    &when not(@skin="material"){
        border-right: @border-size @border-type @content-border-color;
    }
    &when (@skin="material"){
        border-right:@border-size @border-type @grey-300;
    }
     &when (@skin="office-365"){
        border-right:none;
    }
}
@{e-widget}.e-scrollbar .e-hscroll .e-hup.e-icon{
    border-left: none;
} 
@{e-widget}.e-scrollbar .e-vscroll .e-chevron-down_01.e-icon{
    &when not(@skin="material"){
        border-bottom: @border-size @border-type @content-border-color;
    }
    &when (@skin="material"){
        border-bottom:@border-size @border-type @grey-300;
    }
      &when (@skin="office-365"){
        border-bottom:none;
    }
}
@{e-widget}.e-scroller.e-rtl .e-scrollbar .e-vscroll{
    &when not(@skin="office-365"){
    border-right:@border-size @border-type @content-border-color;
    }   
     &when (@skin="office-365"){
        border-right:none;
    }
    border-left:none;
}
@{e-widget}.e-scroller.e-rtl .e-scrollbar .e-hscroll .e-hup.e-icon{
    border-left: @border-size @border-type @content-border-color;
}
@{e-widget}.e-scroller.e-rtl .e-scrollbar .e-hscroll .e-hdown.e-icon{
    border-right: none;
} 
@{e-widget}.e-scrollbar .e-vhandle,
@{e-widget}.e-scrollbar .e-hhandle {
    &when (@skin="material") {
        background-color: @grey-400;
    }
    & when (@skin= "office-365") {        
         background-color: @neutral-light;
    }
    & when not (@skin= "material") and not (@skin="office-365"){
        background-color: @scroll-handle-color;
    }
    transition: top .1s linear 0s, left .1s linear 0s;
}
@{e-widget}.e-scrollbar .e-vhandle {
    &when not(@skin="material") {
        border-top: 1px solid @row-border-color;
        border-bottom: 1px solid @row-border-color;
    }

    &when (@skin="material") {
        border-top: 0.5px solid transparent;
        border-bottom: 0.5px solid transparent;
    }
}
@{e-widget}.e-scrollbar .e-vhandle:hover,@{e-widget}.e-scrollbar .e-vhandle:active {   
    &when (@skin="material") {
        border-top: 0.5px solid @grey-300;
        border-bottom: 0.5px solid @grey-300;
    }
}
@{e-widget}.e-scrollbar .e-hhandle {
    &when not(@skin="material") {
        border-left: 1px solid @row-border-color;
        border-right: 1px solid @row-border-color;
    }

    &when (@skin="material") {
        border-left: 0.5px solid transparent;
        border-right: 0.5px solid transparent;
    }
}

@{e-widget}.e-scrollbar .e-hhandle:hover,@{e-widget}.e-scrollbar .e-hhandle:active {   
    &when (@skin="material") {
        border-left: 0.5px solid @grey-300;
        border-right: 0.5px solid @grey-300;
    }
}

@{e-widget}.e-vhandle.e-box.e-pinch.e-touch,@{e-widget}.e-hhandle.e-box.e-pinch.e-touch{
    & when not (@skin="material") {
        background-color:@hover-bg-stcolor;
    }
    & when (@skin="material") {
        background-color: @grey-600;
        border-color: @grey-700;
    }
}
@{e-widget}.e-scrollbar .e-vhandle:hover,
@{e-widget}.e-scrollbar .e-hhandle:hover {    
    & when (@skin="material") {
        background-color: @grey-500;
        border-color: @grey-600;
    }
    & when (@skin= "office-365") {        
         background-color: @neutral-primary;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        background-color: @hover-bg-stcolor;
        cursor: default;
        border-color: @hover-border-color;
    }
}

@{e-widget}.e-scrollbar .e-vhandle.e-disable:hover,
@{e-widget}.e-scrollbar .e-hhandle.e-disable:hover,
@{e-widget}.e-scrollbar .e-vhandle.e-disable,
@{e-widget}.e-scrollbar .e-hhandle.e-disable,
@{e-widget}.e-scroller .e-vscroll .e-vup.e-button.e-disable, @{e-widget}.e-scroller .e-vscroll .e-vdown.e-button.e-disable,
@{e-widget}.e-scroller .e-hscroll .e-hup.e-button.e-disable, @{e-widget}.e-scroller .e-hscroll .e-hdown.e-button.e-disable,
@{e-widget}.e-scroller .e-vscroll .e-vup.e-button.e-disable:hover, @{e-widget}.e-scroller .e-vscroll .e-vdown.e-button.e-disable:hover,
@{e-widget}.e-scroller .e-hscroll .e-hup.e-button.e-disable:hover, @{e-widget}.e-scroller .e-hscroll .e-hdown.e-button.e-disable:hover {
    & when (@skin="material") {
        background-color: fade(@base-font-color,12%);
        border-color: fade(@base-font-color,12%);
    }
}

@{e-widget}.e-scrollbar .e-vhandle:active,
@{e-widget}.e-scrollbar .e-hhandle:active {
    & when (@skin="material") {
        background-color: @grey-600;
        border-color: @grey-700;
    }
}

@{e-widget}.e-scrollbar .e-button {
    & when (@skin= "office-365") {        
        color:@neutral-dark;
    }
    & when not (@skin="office-365") {
        /*other*/       
   color: @default-icon-color;
   }
    }
    
@{e-widget}.e-scrollbar .e-button:hover
{
    & when (@skin= "office-365") {        
         background-color:@neutral-white;
        color: @neutral-dark;
    }
    & when not (@skin="office-365") {
        /*other*/       
     background-color:@hover-bg-stcolor;
    color: @hover-icon-color;
    }
    border-color:@hover-border-color;
}

@{e-widget}.e-scrollbar .e-button{
     & when (@skin= "office-365") {        
        background-color:@neutral-white;
    }
    & when not (@skin="office-365") {
        /*other*/       
   background-color:@scroll-handle-color;
    }
    
}
@{e-widget}.e-scroller.e-speed-scroll > .e-content{
    overflow: scroll !important;
}

@{e-widget}.e-scroller.e-speed-scroll .e-content, @{e-widget}.e-scroller.e-speed-scroll .e-content {
	touch-action: manipulation;
    -ms-overflow-style: none;
}

@{e-widget}.e-scroller.e-speed-scroll .e-content::-webkit-scrollbar {
		height: 0;
		width: 0;
}

@{e-widget}.e-scroller .e-disable .e-vhandle:hover,
@{e-widget}.e-scroller .e-disable .e-button :hover,
@{e-widget}.e-scroller .e-disable .e-hhandle:hover
{
    &when not(@skin="material"){
    .handle-default-gradient();
    border: 1px solid @row-border-color;
    transition: top .1s linear 0s, left .1s linear 0s;
    }
}

@{e-widget}.e-scrollbar .e-v-line:before{
    .vhandle-arrow();
}

@{e-widget}.e-scrollbar .e-h-line:before{
    .hhandle-arrow();
}

@{e-widget}.e-scroller .e-button,
@{e-widget}.e-scroller .e-disable .e-button:hover
{   
    &when (@skin="material"){
        color:fade(@base-font-color,54%);
    }
    & when (@skin= "office-365") {        
         color:@neutral-secondary-alt;
    }
    & when not (@skin= "material") and not (@skin="office-365"){
        color: @default-icon-color;
    }
}
@{e-widget}.e-scroller .e-disable .e-button:hover
{
   background-color: transparent;
}

@{e-widget}.e-scroller .e-vscroll .e-vup.e-button, @{e-widget}.e-scroller .e-vscroll .e-vdown.e-button, @{e-widget}.e-scroller .e-hscroll .e-hup.e-button, @{e-widget}.e-scroller .e-hscroll .e-hdown.e-button {
    & when (@skin= "material") {
        background-color: @grey-400;
    }
}

@{e-widget}.e-scroller .e-vscroll .e-vup.e-button:hover, @{e-widget}.e-scroller .e-vscroll .e-vdown.e-button:hover, @{e-widget}.e-scroller .e-hscroll .e-hup.e-button:hover, @{e-widget}.e-scroller .e-hscroll .e-hdown.e-button:hover {
    & when (@skin= "material") {
        background-color: @grey-500;
    }
}

@{e-widget}.e-scroller .e-vscroll .e-vup.e-button:active, @{e-widget}.e-scroller .e-vscroll .e-vdown.e-button:active, @{e-widget}.e-scroller .e-hscroll .e-hup.e-button:active, @{e-widget}.e-scroller .e-hscroll .e-hdown.e-button:active {
    & when (@skin= "material") {
        background-color: @grey-600;
        border-color: @grey-700;
    }
}

/*Theme Color*/

@{e-js}.e-acrdn
{
    font-family: @font-family;
}
@{e-js}.e-acrdn > .e-content
{
	border-color: @content-border-color;
	background-color: @content-bg-color;
   & when (@skin= "material") {
        /*material*/
        border-right: 0;
        border-left: 0;
        border-bottom: 0px solid;
        color: fade(@base-font-color,54%); 
	    font-size: 13px;
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			color: @theme-light-font; 
			font-size: 12px;
		}
		& when not (@skin= "office-365") {
			/*other*/
			color: @content-font-color;
			font-size:@content-font-size;
		}
		border-right: -1;
		border-left: -1;
    }  
}

@{e-js}.e-acrdn > .e-select, @{e-js}.e-acrdn > .e-disable.e-select:hover, @{e-js}.e-acrdn > .e-disable.e-select:hover a
{
       & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
        color:  fade(@base-font-color,87%); 
    }

    & when not (@skin= "material") {
        /*other*/
        .default-gradient();
        color: @default-font-color;
    } 
}

@{e-js}.e-acrdn > .e-select, @{e-js}.e-acrdn > .e-disable.e-select:hover, @{e-js}.e-acrdn > .e-disable.e-select:hover a {
    .office-acrd-header-bg-color();
}

@{e-js}.e-acrdn .e-select
{   
    & when (@skin= "material") {
       /*material*/ 
        border-color: @content-bg-color;
        font-size: 15px;
    }
    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			font-size: 14px;
			border-color: @neutral-light;
		}
		& when not (@skin= "office-365") {
			 /*other*/ 
			border-color: @default-border-color; 
			font-size:@header-font-size;  
		}
    }
    font-weight: @content-font-weight; 
    font-family: @font-family;
}
@{e-js}.e-acrdn .e-select:hover 
{
      & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
        color:  fade(@base-font-color,87%);
        border-color: @content-bg-color;
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			color : @neutral-light-font;
			background-color: @neutral-lighter;
		}
		& when not (@skin= "office-365") {
			/*other*/
			.hover-gradient();
			color: @hover-font-color;
			border-color: @hover-border-color;
		}
    } 
}
@{e-js}.e-acrdn .e-select a
{
	& when (@skin= "office-365") {
		color: @neutral-light-font;
	}
	& when not (@skin= "office-365") {
		color: @default-font-color;
	}
}
@{e-js}.e-acrdn .e-select:first-child 
{
	& when (@skin= "office-365") {
		border-top-color: @neutral-light;
	}
	& when not (@skin= "office-365") {
		border-top-color:@default-border-color;
	}
}
@{e-js}.e-acrdn > .e-select:first-child
{
    & when (@skin= "material") {
       /*material*/ 
        border-color: @content-bg-color;
    }
    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			border-color: @neutral-light;
		}
		& when not (@skin= "office-365") {
			/*other*/   
			border-color: @default-border-color;
		}
    } 
}
@{e-js}.e-acrdn .e-select:last-of-type {
	& when (@skin= "office-365") {
		border-bottom-color: @neutral-light;
	}
}

@{e-js}.e-acrdn .e-select.e-active, @{e-js}.e-acrdn .e-disable.e-active.e-select:hover a, @{e-js}.e-acrdn .e-disable.e-active.e-select:hover
{
    & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
        color:  fade(@base-font-color,87%);
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			color: @theme-primary-font;
			background-color: @theme-primary;
		}
		 & when not (@skin= "office-365"){
			/*other*/
			.active-gradient();
			color:@active-font-color;
		}
    }
}
@{e-js}.e-acrdn.e-disable .e-select:hover, @{e-js}.e-acrdn.e-disable .e-select:hover a
{
background: #ecedee;
color:#5c5c5c;
}
@{e-js}.e-acrdn .e-select.e-active
{    
     & when (@skin= "material") {
       /*material*/  
        border: none;
    }
    & when not (@skin= "material") {
        /*other*/ 
        border-color:@active-border-color;    
    }
    font-weight: normal;
    border-bottom: medium none;
}
@{e-js}.e-acrdn .e-select.e-active:hover {
     & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
        color: fade(@base-font-color,87%);
        border-color: @content-bg-color;
    }

    & when not (@skin= "material") {
        /*other*/
        .hover-gradient();
        color: @hover-font-color;
        border-color:@hover-border-color;
    }
}
@{e-js}.e-acrdn .e-select.e-active a
{
     & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,87%);
    }

    & when not (@skin= "material") {
        /*other*/
        color: @active-font-color;
    }  
}
@{e-js}.e-acrdn .e-select:hover a, @{e-js}.e-acrdn .e-select.e-active:hover a { 
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,87%);
    }

    & when not (@skin= "material") {
        /*other*/
        color: @hover-font-color;
    }
}
@{e-js}.e-acrdn .e-select > span{
    color:@default-icon-color;
}
@{e-js}.e-acrdn .e-select.e-active > span{
      & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,87%);
    }

    & when not (@skin= "material") {
        /*other*/
        color: @active-icon-color;
    }
}
@{e-js}.e-acrdn .e-select:hover > span, @{e-js}.e-acrdn .e-select.e-active:hover > span{
    color:@hover-icon-color;
}
@{e-js}.e-acrdn .e-select.e-disable:hover > span, @{e-js}.e-acrdn .e-select.e-disable.e-active:hover > span{
    color:@default-icon-color;
}
@{e-js}.e-acrdn .e-content.e-load
{
    background-image: @ajaxloaderimage;
	background-position: center;
    background-repeat: no-repeat;
}


/*------------------------------------- autocomplete -------------------------------------------*/

@{e-widget}.e-atc .e-in-wrap, @{e-widget}.e-atc .e-input, @{e-widget}.e-atc-popup, @{e-widget}.e-atc .e-options {
    background-color: @content-bg-color;
    border-color: @content-border-color;
      & when (@skin= "material") {
        color: fade(@base-font-color, 87%);
        font-size: 13px;
        font-weight: @content-font-weight;
	  }
      & when (@skin= "office-365") {
        color:@neutral-primary;
        font-weight:400;
        font-size: @content-font-size;
      }
      & when not (@skin= "material") and not (@skin="office-365") {
        color: @content-font-color;
        font-size: @content-font-size;
        font-weight: @content-font-weight;
	  }
    font-family: @font-family;
}
@{e-widget}.e-atc-popup {
    & when (@skin= "material") {
        font-size:13px !important;
    }
}
@{e-widget}.e-atc-popup .e-hilight-txt {
    & when (@skin= "material") {
        font-size:13px;
        color: fade(@base-font-color, 54%);
    }
}
@{e-widget}.e-atc .e-options.e-active {
    & when (@skin= "material") {
        border-color: @primary-font-color;
        .active-material-gradient()
	}
    & when not (@skin= "material") {
        border-color: @active-border-color;
       .active-gradient(); 
    }
   color: @bs-active-font-color;
    
}
@{e-widget}.e-atc .e-options.e-active:hover , @{e-widget}.e-atc .e-options:hover {
    & when (@skin= "office-365") {
         color:@neutral-primary;
         .hover-gradient();
         border-color: @neutral-white;
    }
    & when not (@skin="office-365") {
         color: @bs-hover-font-color;
         .hover-gradient();
         border-color: @hover-border-color;
    }
}
@{e-widget}.e-atc .e-boxes {
    background-color:@content-bg-color;
}
@{e-widget}.e-atc.e-focus .e-in-wrap {
    & when (@skin= "office-365") {
       border-color:@theme-primary !important;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
       box-shadow: 0 0 @shadow-bg-size @bs-shadow-bg-color;
       .material-normal-box-shadow;
       .focus-border-color();
    }
}
@{e-widget}.e-atc .e-in-wrap input.e-input , input[type="text"].e-input {
     & when (@skin= "material") {
        padding-left: 0.1em;
     }
}
@{e-widget}.e-atc:hover .e-in-wrap {
    & when (@skin= "office-365") {
        border-color: @neutral-secondary-alt;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
    .material-normal-box-shadow;
    .focus-border-color();
    }
}

@{e-widget}.e-atc-popup .e-category {
	border-bottom: 1px solid @content-border-color;
}
@{e-widget}.e-atc-popup .e-hover , @{e-widget}.e-atc-popup .e-content .e-atc-trbgcolor.e-hover {   
    & when (@skin= "material") {
        .hover-gradient-material();
        color: @hover-font-color;
        border-color: @hover-bg-stcolor;
    }
    & when (@skin= "office-365") {
        border-color:@neutral-lighter;
        background:@neutral-lighter;
        color: @neutral-light-font;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        .hover-gradient();
        color: @hover-font-color;
        border-color: @hover-bg-stcolor;
    }
}
@{e-widget}.e-atc .e-select:hover, @{e-widget}.e-atc.e-rtl .e-select:hover {
    & when (@skin= "material") {
      border-color: @content-bg-color;
      color: @hover-icon-color;
    }
    & when (@skin= "office-365") {
        background:@neutral-lighter;
        border-color:@neutral-lighter;
        color:@neutral-light-font-alt;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
      border-color: @content-border-color;
      color: @hover-icon-color;
      .hover-gradient();
    } 
}
@{e-widget}.e-atc-popup ul li, @{e-widget}.e-atc-popup.e-rtl ul li{
     & when (@skin= "material") {
       padding: 13.5px 5px 5px 24px;
       min-height: 2.1em;
     }
     & when (@skin= "office-365") {
         padding: 0 10px 0 10px;
         line-height:32px;
     }
}
@{e-widget}.e-atc .e-select, @{e-widget}.e-atc.e-rtl .e-select, @{e-widget}.e-atc .e-select.e-disable:hover {
     & when (@skin= "material") {
         border-color: @content-bg-color;
         .default-material-gradient();
         color: @default-icon-color;
     }
     & when (@skin= "office-365") {
         border-color: @content-bg-color;
         color: @neutral-light-font;
         .bs-default-gradient();
     }
     & when not (@skin= "material") and not (@skin="office-365") {
       border-color: @content-border-color;
       color: @default-icon-color;
       .bs-default-gradient();
     }
}

@{e-widget}.e-atc .e-select, @{e-widget}.e-atc.e-rtl .e-select, @{e-widget}.e-atc .e-select.e-disable:hover {
    .office-button-bg-color();
}
@{e-widget}.e-atc .e-input.e-load {
    background-image: @ajaxloaderimage;
}

@{e-widget}.e-atc ::-webkit-input-placeholder {
    & when (@skin= "office-365") {
        color: @neutral-tertiary;
        font-style: normal;
    }
    & when not (@skin= "office-365") {
        color: @content-font-color;
    }
}
@{e-widget}.e-atc :-ms-input-placeholder {
    & when (@skin= "office-365") {
        color: @neutral-tertiary;
        font-style: normal;
    }
    & when not (@skin= "office-365") {
        color: @content-font-color;
    }
}
@{e-widget}.e-atc ::-moz-placeholder {
    & when (@skin= "office-365") {
        color: @neutral-tertiary;
        font-style: normal;
    }
    & when not (@skin= "office-365") {
        color: @content-font-color;
    }
}
@{e-widget}.e-atc :-moz-placeholder {
    & when (@skin= "office-365") {
        color: @neutral-tertiary;
        font-style: normal;
    }
    & when not (@skin= "office-365") {
        color: @content-font-color;
    }
}
@{e-widget}.e-atc-popup .e-atc-tdbottom , @{e-widget}.e-atc-popup div.e-atc-tableHeader {
	border-bottom: 1px solid @content-border-color;;
}
@{e-widget}.e-atc-popup  .e-atc-tdright  , @{e-widget}.e-atc-popup .e-atc-tableHeaderScroll .e-atc-tableHeaderBorder , @{e-widget}.e-atc-popup div .e-atc-thright{
	border-right:1px solid @content-border-color;;
}
@{e-widget}.e-atc-popup  .e-atc-tdleft , @{e-widget}.e-atc-popup .e-atc-tableHeaderRTL .e-atc-tableHeaderBorder , @{e-widget}.e-atc-popup div .e-atc-thleft{
	border-left:1px solid @content-border-color;;
}
@{e-widget}.e-atc-popup .e-atc-tableHeaderContent th {
	background: @alt-row-bg-color;
    & when (@skin= "office-365") {
        font-weight: 400;
    }
}
@{e-widget}.e-atc-popup .e-content .e-atc-trbgcolor {
    background: @alt-row-bg-color; 
    & when (@skin= "office-365") {
        background-color: @theme-primary-font;
    }
}
@{e-widget}.e-atc .e-in-wrap {
    & when (@skin= "material") {
        border: none;
        border-bottom: 1px solid;
        border-color: fade(@base-font-color,12%);
        background:transparent;
    }       
}
@{e-widget}.e-atc .e-in-wrap , @{e-widget}.e-atc .e-in-wrap .e-input {
    & when (@skin= "material") {
        border-radius: 0px;
    }
}
@{e-widget}.e-atc .e-in-wrap input.e-input, input[type="text"].e-input {
     & when (@skin= "material") {
        box-shadow: 0 1.83px 1px rgba(0, 0, 0, -0.8);
     }
     & when (@skin= "office-365") {
         box-shadow:0 0 3px rgba(0, 0, 0, 0);
         padding-left:10px;
     }
}
@{e-widget}.e-atc-popup {
     & when (@skin= "material") {
         box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.21);
     }
     & when (@skin= "office-365") {
         box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2);
         border-color:@neutral-light;
     }
}
@{e-widget}.e-atc .e-input::selection{
      & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
      }
      & when (@skin= "office-365") {
        background: @theme-primary;
        color: @neutral-white;
      }
}
@{e-widget}.e-atc .e-input::-moz-selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
    }
    & when (@skin= "office-365") {
        background: @theme-primary;
        color: @neutral-white;
    }
}
@{e-widget}.e-atc.e-disable-wrap .e-in-wrap{
     & when (@skin= "material") {
        border-bottom-color: transparent;
        background-image: linear-gradient(to right, fade(@base-font-color,38%) 0%, fade(@base-font-color,38%) 33%, transparent 0%);
        background-image: -ms-linear-gradient(left, transparent 0%, fade(@base-font-color,38%) 100%);
        background-position: bottom -1px left 0;
        background-size: 4px 1px;
        background-repeat: repeat-x;
    }
    & when (@skin= "office-365") {
        border:none;
        background:@neutral-lighter;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        background-color: @disable-control-background-color;
        border-color:@disable-control-border-color;
    }
}

@{e-widget}.e-atc .e-in-wrap:before,@{e-widget}.e-atc .e-in-wrap:after {
    & when (@skin= "material") {
       background: @accent-color;
    }
 }

@{e-widget}.e-atc .e-select.e-active, @{e-widget}.e-atc .e-select:hover {
  & when (@skin= "material") { 
     border-radius:2px;
  }
}
@{e-widget}.e-atc .e-select:after {
   & when (@skin= "material") { 
       background: fade(@base-font-color,12%);
   }
}
@{e-widget}.e-atc .e-select {
    & when (@skin= "material") {
        right:5px; 
    }
}
@{e-widget}.e-atc .e-visual-mode.e-input {
     & when (@skin= "material") {
         float:none;
     }
}
@{e-widget}.e-atc-popup .e-ul .txt {
     & when (@skin= "material") {
            padding-left:24px;
     }
}
@{e-widget}.e-atc-popup .e-ul .flag {
     & when (@skin= "material") {
         margin-top:4px;
     }
     & when (@skin= "office-365") {
         margin-top:10px;
     }
}
@{e-widget}.e-atc .e-select .e-icon.e-search {
    & when (@skin= "material") {
        font-size:18px;
    }
}
@{e-widget}.e-atc .e-autocomplete.e-input {
    & when (@skin= "office-365") {
       color:@neutral-light-font;
       font-weight:400;
    }
}
@{e-widget}.e-atc .e-select:active {
    & when (@skin= "office-365") {
         color:@neutral-white;
         background:@theme-primary;
     }
}
@{e-widget}.e-atc .e-select.e-disable,@{e-widget}.e-atc .e-select.e-disable:hover {
    & when (@skin= "office-365") {
      color:@neutral-tertiary-alt;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        background-color: @disable-icon-bg-color;
    }
}
@{e-widget}.e-atc .e-options .e-icon.e-close {
    & when (@skin= "office-365") {
      color:@neutral-secondary-alt;
    }
}
@{e-widget}.e-atc .e-options.e-active .e-icon.e-close {
    & when (@skin= "office-365") {
      color:@neutral-white;
    }
}
@{e-widget}.e-atc .e-options {
    & when (@skin= "office-365") {
       border-color:@neutral-white;
       background:@neutral-lighter;
    }
}
@{e-widget}.e-atc .e-visual-mode.e-input {
    & when (@skin= "office-365") {
        padding-left:0px !important;
    }
}
@{e-widget}.e-atc-popup .e-atc-tableContent td {
    & when (@skin= "office-365") {
        font-weight: 300;
    }
}
@{e-widget}.e-atc .e-options.e-active:hover .e-icon.e-close {
    & when (@skin= "office-365") {
        color: @theme-light-font;
    }
}
@{e-widget}.e-atc .e-in-wrap.e-padding {
     & when (@skin= "material") {
         overflow:hidden;
     }
}
@{e-widget}.e-atc .e-in-wrap.e-padding:before, @{e-widget}.e-atc .e-in-wrap.e-padding:after {
     & when (@skin= "material") {
         height: 3px;
     }
}
@{e-widget}.e-atc-popup .e-activeli, @{e-widget}.e-atc-popup .e-content .e-activeli {
     background: @active-bg-stcolor;
}




/*------------------------------------- Button -------------------------------------------*/
.e-btn, @{e-widget} .e-tbtn, @{e-widget} .e-split-btn {
    & when (@skin="material") {
        font-family: @font-family;
        position: relative;
        text-transform: uppercase;
    }

    & when not (@skin="material") {
        font-weight: @content-font-weight;
        font-size: @content-font-size;
    }
}

@{e-widget}.e-btn{
    & when (@skin="office-365") {
        font-weight: 600;
    }
}
@{e-widget}.e-btn.e-select:focus {
    box-shadow: 0 0 2px @shadow-bg-color;
}

@{e-widget}.e-btn.e-txt.e-select, @{e-widget} .e-tbtn.e-txt.e-select, @{e-widget} .e-split-btn.e-txt.e-select {
    & when not (@skin="material") {
        font-family: @font-family;
    }
	& when (@skin="office-365") {
        font-family: @font-family;
        font-weight: 600;
    }
}

@{e-widget}.e-split-btn-hide {
    visibility: hidden;
}

@{e-widget}.e-rtl .e-splitarrowleft .e-split-btn.e-left-btn {
    & when not (@skin="material") {
        border-right: medium none;
        border-left-color: @default-border-color;
    }
}

@{e-widget}.e-rtl .e-splitarrowright .e-split-btn.e-left-btn {
    & when not (@skin="material") {
        border-left: medium none;
        border-right-color: @default-border-color;
    }
}


@{e-widget}.e-btn.e-select.e-disable, @{e-widget}.e-btn.e-disable.e-select:hover, @{e-widget}.e-btn.e-disable.e-select:hover {
    & when (@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.38);
        border-radius: 2px;
        border: fade(@base-font-color,12%);
        color: fade(@base-font-color,26%);
        background-color: @grey-50;
        font-family: @font-family;
        border-color: @grey-50;
    }
}

@{e-widget}.e-btn.e-disable.e-select:hover, @{e-widget}.e-btn.e-disable.e-select:hover, @{e-widget} .e-tbtn.e-disable:hover,
@{e-widget}.e-btn.e-disable.e-select:active, @{e-widget}.e-btn.e-disable.e-select:active {
    & when not (@skin="material") {
        .bs-default-gradient();
        color: @default-font-color;
        border-color: @default-border-color;
        .border-selection();
    }
}

@{e-widget}.e-btn.e-select {
    & when not (@skin="material") {
        .bs-default-gradient();
        color: @default-font-color;
        border-color: @default-border-color;
        .border-selection();
    }

    & when (@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        border-radius: 2px;
        color: fade(@base-font-color,87%);
        background-color: @grey-50;
        border-color: @grey-50;
    }
	& when (@skin="office-365") {
		border-color:@neutral-lighter;
		background-color:@neutral-lighter;
		color:@theme-light-font;
	}
}

@{e-widget}.e-btn.e-disable, @{e-widget}.e-btn.e-select.e-disable .e-icon,@{e-widget}.e-btn.e-select.e-disable .e-icon,@{e-widget}.e-btn.e-select.e-disable:hover .e-icon,@{e-widget}.e-btn.e-select.e-disable:active .e-icon, {
    cursor: default;
    & when (@skin="office-365") {
		color:@neutral-tertiary-alt
	}
}

/*flat button*/

@{e-widget}.e-btn.e-select.e-flat:hover, @{e-widget}.e-btn.e-select.e-flat:focus {
    & when (@skin="material") {
        color: @accent-color;
        border: none;
        background-color: fade(@base-font-color,12%);
        border-radius: 0px;
        box-shadow: none;
    }
}

@{e-widget}.e-btn.e-select.e-flat:active {
    & when (@skin="material") {
        color: @accent-color;
        border: none;
        background-color: fade(@base-font-color,12%);
        border-radius: 0px;
        box-shadow: none;
    }
}

@{e-widget}.e-button.e-btn.e-flat.e-disable.e-select, @{e-widget}.e-button.e-btn.e-flat.e-disable.e-select:active, @{e-widget}.e-button.e-btn.e-flat.e-disable.e-select:hover {
    & when (@skin="material") {
        color: fade(@base-font-color,26%);
        background-color: transparent;
    }
}

/*end*/

/*accent button*/

@{e-widget}.e-btn.e-select.e-primary {
    & when (@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        color: @accent-font-color;
        border-radius: 2px;
        background: @accent-color;
        border: none;
        font-family: @font-family;
    }
}

@{e-widget}.e-btn.e-select.e-primary .e-icon, @{e-widget}.e-btn.e-select.e-primary:hover .e-icon {
    & when (@skin="material") {
        color: @content-bg-color;
    }
}

@{e-widget} .e-tbtn.e-btn.e-select.e-primary:hover {
    & when (@skin="material") {
        background: none;
    }
}

@{e-widget} .e-tbtn.e-btn.e-select.e-primary.e-active,@{e-widget} .e-tbtn.e-btn.e-select.e-primary.e-active:hover {
    & when (@skin="material") {
        background: @accent-color;
        border: none;
        box-shadow: none;
    }
}


@{e-widget}.e-btn.e-primary.e-select:hover, @{e-widget}.e-btn.e-primary.e-select:focus {
    & when (@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        color: @accent-font-color;
        border-radius: 2px;
        background: @accent-color;
        border: none;
        border-color: fade(@base-font-color,12%);
    }
	& when (@skin="office-365") {
	    background-color: @theme-dark;
		color: @theme-dark-font;
		border-color:@theme-primary;
	}
}


@{e-widget}.e-btn.e-select.e-primary:active {
    & when (@skin="material") {
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
        color: @accent-font-color;
        border-radius: 2px;
        background: @accent-color;
        border-color: fade(@content-bg-color,12%);
        border: none;
    }
	& when (@skin="office-365") {
	    background-color: @theme-primary;
		color: @theme-dark-font;
		border-color:@theme-primary;
	}
}



/*primary raised button*/


@{e-widget}.e-btn.e-select.e-primary-raised {
    & when (@skin="material") {
        color: @accent-font-color;
        border-radius: 2px;
        background: @accent-color;
        border: none;
        font-family: @font-family;
        box-shadow: none;
    }
}

@{e-widget}.e-btn.e-select.e-primary-raised .e-icon, @{e-widget}.e-btn.e-select.e-primary-raised:hover .e-icon {
    & when (@skin="material") {
        color: @content-bg-color;
    }
}

@{e-widget}.e-btn.e-select.e-primary-raised.e-active, @{e-widget}.e-btn.e-select.e-primary-raised.e-active:hover {
    & when (@skin="material") {
        background: @accent-color;
        border: none;
    }
}


@{e-widget}.e-btn.e-primary-raised.e-select:hover, @{e-widget}.e-btn.e-primary-raised.e-select:focus {
    & when (@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        color: @accent-font-color;
        border-radius: 2px;
        background: @accent-color;
        border: none;
        border-color: fade(@base-font-color,12%);
    }
}


@{e-widget}.e-btn.e-select.e-primary-raised:active {
    & when (@skin="material") {
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
        color: @accent-font-color;
        border-radius: 2px;
        background: @accent-color;
        border-color: fade(@content-bg-color,12%);
        border: none;
    }
}


@{e-widget}.e-btn.e-select.e-primary-raised.e-disable, @{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-disable:hover {
    & when (@skin="material") {
        background: fade(@base-font-color,12%);
        color: fade(@base-font-color,26%);
        box-shadow: none;
    }
}


/*end*/

/*float button*/

.e-float-btn.e-btn.e-select.e-icon {
    & when (@skin="material") {
        color: @accent-font-color;
        background-color: @accent-color;
        font-family: 'ej-webfont';
        box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.16);
    }

    border: none;
}


.e-float-btn.e-btn.e-select.e-icon:hover {
    & when (@skin="material") {
        box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.2);
        color: @accent-font-color;
        background-color: @accent-color;
        border-color: fade(@base-font-color,12%);
        font-family: 'ej-webfont';
    }

    border: none;
}

.e-float-btn.e-btn.e-select.e-icon:active {
    & when (@skin="material") {
        box-shadow: 0px 16px 20px 0px rgba(0,0,0,0.18);
        color: @content-bg-color;
        border-radius: 100%;
        font-family: 'ej-webfont';
        border-color: fade(@content-bg-color,12%);
    }

    border: none;
}

.e-float-btn.e-btn.e-select.e-icon:not(:active):after {
    & when (@skin="material") {
        background-color: fade(@content-bg-color,12%);
    }

    border: none;
    box-shadow: none;
}

/*end*/


/*icon button*/

/*accent icon button*/

.e-primary-icon-btn.e-btn.e-select.e-icon, .e-primary-icon-btn.e-btn.e-select.e-icon:hover {
    & when(@skin="material") {
        color: @accent-color;
        background: none;
        border: none;
        box-shadow: none;
    }
}

.e-primary-icon-btn.e-btn.e-select.e-icon.e-disable, .e-primary-icon-btn.e-tbtn.e-btn.e-select.e-icon.e-disable:hover, .e-primary-icon-btn.e-btn.e-select.e-icon.e-disable:focus {
    & when(@skin="material") {
        color: fade(@base-font-color, 26%);
        background: none;
        border: none;
        box-shadow: none;
    }
}

.e-primary-icon-btn.e-btn.e-select.e-icon:focus {
    & when(@skin="material") {
        background-color: fade(@accent-color,26%);
        border: none;
        box-shadow: none;
    }
}

.e-primary-icon-btn.e-btn.e-select.e-icon:not(:active):after {
    & when(@skin="material") {
        background-color: fade(@content-bg-color, 26%);
        border: none;
        box-shadow: none;
    }
}

.e-primary-icon-btn.e-btn.e-select.e-icon:active {
    & when(@skin="material") {
        border-radius: 100%;
    }
}

.e-primary-icon-btn.e-btn.e-select.e-icon:focus:hover {
    & when(@skin="material") {
        background-color: fade(@accent-color,26%);
        border: none;
        box-shadow: none;
    }
}

.e-primary-icon-btn.e-btn.e-select.e-icon, .e-primary-icon-btn.e-btn.e-select.e-icon:focus, .e-primary-icon-btn.e-btn.e-select.e-icon:hover, .e-primary-icon-btn.e-btn.e-select.e-icon:active {
    font-family: 'ej-webfont';
}

/*end*/


/*flat icon button*/

.e-flat-icon-btn.e-btn.e-tbtn.e-select.e-icon {
    &when( @skin="material") {
        color: fade(@base-font-color,54%);
        background: none;
        border: none;
        font-family: 'ej-webfont';
        box-shadow: none;
    }
}

.e-flat-icon-btn.e-btn.e-select.e-icon:focus, .e-flat-icon-btn.e-btn.e-select.e-icon:hover {
    &when( @skin="material") {
        background-color: fade(@base-font-color,12%);
        border: none;
        box-shadow: none;
    }
}

.e-flat-icon-btn.e-tbtn.e-btn.e-select.e-icon:not(:active):after {
    &when( @skin="material") {
        background-color: @grey-400;
        border: none;
        box-shadow: none;
    }
}

.e-flat-icon-btn.e-tbtn.e-btn.e-select.e-icon.e-active:not(:active):after {
    &when( @skin="material") {
        background-color: fade(@base-font-color,12%);
        border: none;
        box-shadow: none;
    }
}

.e-flat-icon-btn.e-btn.e-select.e-icon:active:hover, .e-flat-icon-btn.e-btn.e-select.e-icon:active, .e-flat-icon-btn.e-btn.e-select.e-icon.e-active {
    &when( @skin="material") {
        background-color: @grey-400;
        border: none;
        box-shadow: none;
    }
}

.e-flat-icon-btn.e-btn.e-select.e-icon, .e-flat-icon-btn.e-btn.e-select.e-icon:focus, .e-flat-icon-btn.e-btn.e-select.e-icon:hover, .e-flat-icon-btn.e-btn.e-select.e-icon:active {
    font-family: 'ej-webfont';
}



/*end*/



/*normal icon button*/

.e-icon-btn.e-btn.e-select.e-icon {
    &when( @skin="material") {
        color: fade(@base-font-color,87%);
        background: none;
        border: none;
        box-shadow: none;
    }
	&when( @skin="office-365") {
		color: @neutral-secondary;
	}
}

.e-icon-btn.e-btn.e-select.e-icon:focus {
    &when( @skin="material") {
        background-color: fade(@base-font-color,12%);
        border: none;
        box-shadow: none;
    }
}

.e-icon-btn.e-btn.e-select.e-icon.e-disable, .e-icon-btn.e-btn.e-select.e-icon.e-disable:focus, .e-icon-btn.e-btn.e-select.e-icon.e-disable:hover,
.e-flat-icon-btn.e-btn.e-select.e-icon.e-disable, .e-flat-icon-btn.e-btn.e-select.e-icon.e-disable:focus, .e-flat-icon-btn.e-btn.e-select.e-icon.e-disable:hover {
    &when( @skin="material") {
        color: fade(@base-font-color,26%);
        border: none;
        box-shadow: none;
    }
}


.e-icon-btn.e-btn.e-select.e-icon:not(:active):after {
    &when( @skin="material") {
        background-color: fade(@base-font-color, 12%);
        border: none;
        box-shadow: none;
    }
}

.e-icon-btn.e-btn.e-select.e-icon:active {
    & when(@skin="material") {
        border-radius: 100%;
    }
	&when( @skin="office-365") {
		color: @neutral-light-font;
	}
}

.e-icon-btn.e-btn.e-select.e-icon:active, .e-primary-icon-btn.e-btn.e-select.e-icon:active,
.e-icon-btn.e-btn.e-select.e-icon:hover, .e-primary-icon-btn.e-btn.e-select.e-icon:hover {
    &when( @skin="material") {
        background: none;
        box-shadow: none;
        border: none;
    }
}

.e-icon-btn.e-btn.e-select.e-icon:focus:hover {
    &when( @skin="material") {
        background-color: fade(@base-font-color,12%);
        border: none;
        box-shadow: none;
    }
}

.e-icon-btn.e-btn.e-select.e-icon, .e-icon-btn.e-btn.e-select.e-icon:focus, .e-icon-btn.e-btn.e-select.e-icon:hover, .e-icon-btn.e-btn.e-select.e-icon:active {
    font-family: 'ej-webfont';
}

.e-primary-icon-btn.e-btn.e-select.e-icon.e-disable, .e-flat-icon-btn.e-btn.e-select.e-icon.e-disable, .e-icon-btn.e-btn.e-select.e-icon.e-disable,
.e-primary-icon-btn.e-btn.e-select.e-icon.e-disable:hover, .e-flat-icon-btn.e-btn.e-select.e-icon.e-disable:hover, .e-icon-btn.e-btn.e-select.e-icon.e-disable:hover {
    &when (@skin="material") {
        font-family: "ej-webfont";
        background: transparent;
        box-shadow: none;
        border: none;
    }
}

.e-float-btn.e-btn.e-select.e-icon.e-disable, .e-float-btn.e-btn.e-select.e-icon.e-disable:hover, .e-float-btn.e-btn.e-select.e-icon.e-disable:focus {
    &when (@skin="material") {
        font-family: "ej-webfont";
        box-shadow: none;
        border: none;
        border-radius: 50%;
        color: fade(@base-font-color,26%);
        background-color: fade(@base-font-color,12%);
    }
}

.e-primary-icon-btn.e-btn.e-select.e-icon.e-disable:hover, .e-icon-btn.e-btn.e-select.e-icon.e-disable:hover {
    &when (@skin="material") {
        border-radius: 50%;
    }
}
.e-icon-btn.e-btn.e-select.e-icon:hover {
	&when (@skin="office-365") {
		color:@neutral-light-font;
	}
}
.e-icon-btn.e-btn.e-select.e-icon.e-disable {
	 &when(@skin="office-365") {
		color:@neutral-tertiary-alt;
    }
	
}

@{e-widget}.e-button.e-btn.e-select.e-disable:after,@{e-widget} .e-tbtn.e-btn.e-select.e-disable:after, @{e-widget}.e-split .e-split-btn.e-btn:after {
    &when (@skin="material") {
        content: none;
    }
}

/*end*/

/*end*/

@{e-widget}.e-btn.e-select:hover, @{e-widget}.e-btn.e-select.e-active:hover {
    & when (@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        background-color: fade(@base-font-color,12%);
        font-family: @font-family;
    }

    &when not(@skin="material") {
        .hover-gradient();
        border-color: @hover-border-color;
        color: @hover-font-color;
    }
	& when (@skin="office-365") {
	  background-color: @neutral-light;
	  color: @neutral-light-font-alt;
	  border-color:@theme-primary;
	}
}
@{e-widget} .e-splitbutton.e-btn.e-left-btn:focus ,@{e-widget} .e-split-btn.e-btn.e-select.e-drp-btn:focus {
	& when (@skin="office-365") {
		border: 1px solid;
		border-color:@theme-primary;
		}
}
@{e-widget} .e-splitbutton.e-btn.e-left-btn.e-disable:focus ,@{e-widget} .e-split-btn.e-btn.e-select.e-drp-btn.e-disable:focus{
    & when (@skin="office-365") {
        border:none;
    }
}
@{e-widget}.e-split.e-widget.e-disable {
	& when (@skin="office-365") {
		opacity:100;
	}
}

@{e-widget} .e-splitbutton .e-btn.e-select:focus {
	& when (@skin= "office-365") {
		border:1px solid;
	}
}

@{e-widget}.e-btn.e-select:focus {
    & when (@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        background-color: fade(@base-font-color,12%);
        font-family: @font-family;
    }
    & when (@skin="office-365") {
	    background-color: @neutral-light;
		color: @neutral-light-font;
		border-color:@theme-primary;
	}
}

@{e-widget}.e-btn.e-select:active, @{e-widget}.e-btn.e-disable.e-active.e-select:hover, @{e-widget}.e-btn.e-disable.e-active.e-select:hover, @{e-widget}.e-tbtn.e-flat.e-active, @{e-widget}.e-tbtn.e-btn.e-select.e-flat {
    & when (@skin="material") {
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
        color: @base-font-color;
        border-radius: 2px;
        border: none;
    }
	& when (@skin="office-365") {
		background-color: @theme-primary;
		color: @theme-primary-font;
		border-color:@theme-primary;
	}
}

@{e-widget}.e-btn.e-select:active, @{e-widget}.e-tbtn.e-active {
    & when (@skin="material") {
        background-color: fade(@base-font-color,12%);
    }
}

.e-drp-btn.e-select .e-icon, .e-btn.e-select .e-icon {
    & when (@skin="material") {
        color: fade(@base-font-color,54%);
    }

    & when not (@skin="material") {
        color: @default-icon-color;
    }
}

@{e-widget}.e-btn.e-select:active, @{e-widget}.e-btn.e-select:active,@{e-widget} .e-tbtn.e-btn.e-select.e-active,@{e-widget} .e-tbtn.e-btn.e-select.e-active.e-disable:hover{
    & when not (@skin="material") {
        .active-gradient();
        border-color: @active-border-color;
        color: @active-font-color;
    }
}
.e-tbtn.e-btn.e-select.e-active:hover{
    & when (@skin="office-365") {
		background-color: @theme-dark;
		color: @theme-dark-font;
		border-color:@theme-dark;
	}
}
@{e-widget}.e-btn.e-select:hover .e-icon {
    & when (@skin="material") {
        color: fade(@base-font-color,54%);
    }
     & when (@skin="office-365") {
        color: @theme-dark-font;
    }
}

@{e-widget} .e-drp-btn.e-select:hover, @{e-widget}.e-btn.e-select:hover .e-icon {
    & when not(@skin="material") {
        color: @hover-icon-color;
    }

    & when (@skin="material") {
        color: fade(@base-font-color,54%);
    }
	 & when (@skin="office-365") {
        color: @neutral-dark;
    }
}

@{e-widget} .e-drp-btn.e-select:active, @{e-widget} .e-drp-btn.e-select:active, @{e-widget}.e-btn.e-select:active .e-icon, @{e-widget}.e-btn.e-select:active .e-icon, .e-btn.e-active .e-icon, .e-btn.e-disable.e-select.e-active:hover .e-icon, .e-btn.e-disable.e-select.e-active:hover .e-icon {
    & when (@skin="material") {
        color: fade(@base-font-color,54%);
    }

    & when not (@skin="material") {
        color: @active-icon-color;
    }
}

@{e-widget}.e-menu.e-split, @{e-widget}.e-menu.e-context.e-split, @{e-widget}.e-menu.e-context.e-split .e-list > ul, @{e-widget}.e-menu.e-widget.e-split li.e-list {
    & when (@skin="material") {
        background-color: @content-bg-color;
    }
    & when (@skin="office-365") {
        background-color: @neutral-white;
    }
   & when not (@skin= "material") and not (@skin="office-365") {
        background-color: @default-bg-stcolor;
        color: @default-font-color;
        border-color: @default-border-color;
    }
}
@{e-widget}.e-menu.e-widget.e-split li.e-list:hover{
    & when (@skin="office-365") {
        background-color: @neutral-lighter;
        color:@neutral-light-font;
    }
}
@{e-widget} .e-split-btn-div .e-icon {
    & when (@skin="material") {
        padding: 0px;
    }
}

@{e-widget}.e-btn.e-disable.e-select:hover, @{e-widget}.e-btn.e-disable, @{e-widget}.e-btn.e-disable.e-select:hover, @{e-widget}.e-btn.e-select.e-disable:hover, @{e-widget}.e-btn.e-select.e-disable {
    & when (@skin="material") {
        color: fade(@base-font-color,26%);
        box-shadow: none;
        border: none;
        background-color: fade(@base-font-color,12%);
        font-family: @font-family;
    }
	& when (@skin="office-365") {
		background-color: @neutral-lighter;
		color: @neutral-tertiary;
		border-color:@neutral-lighter;
	}
}
/*--------------------------------------------------ToggleButton----------------------------**/

/*toggle button*/

@{e-widget} .e-tbtn.e-btn.e-select {
    &when(@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        border-radius: 2px;
        color: fade(@base-font-color,87%);
        background-color: @grey-50;
        border-color: @grey-50;
    }
}

@{e-widget} .e-tbtn.e-btn.e-select:hover,@{e-widget} .e-tbtn.e-btn.e-select:focus {
    & when (@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        background-color: fade(@base-font-color,12%);
        font-family: @font-family;
    }
}

@{e-widget} .e-tbtn.e-btn.e-select.e-active:focus {
	& when (@skin="office-365") {
	    background-color: @theme-dark;
		color: @theme-dark-font;
		border-color:@theme-primary;
	}
}
@{e-widget} .e-tbtn.e-btn.e-select.e-active {
    & when (@skin="material") {
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
        background-color: @accent-color;
    }
}

@{e-widget} .e-tbtn.e-btn.e-select.e-active,@{e-widget} .e-tbtn.e-btn.e-select.e-active .e-icon {
    & when (@skin="material") {
        color: @accent-font-color;
    }
}

@{e-widget} .e-tbtn.e-btn.e-select.e-active.e-disable, @{e-widget} .e-tbtn.e-btn.e-select.e-disable {
    & when (@skin="material") {
        box-shadow: none;
        background-color: fade(@base-font-color,12%);
        color: fade(@base-font-color,87%);
    }
}

@{e-widget} .e-tbtn.e-select.e-flat:hover {
    & when (@skin="material") {
        background: none;
    }
}


@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-flat, @{e-widget}.e-btn.e-select.e-flat {
    & when (@skin="material") {
        background: none;
        color: @accent-color;
        font-family: @font-family;
        box-shadow: none;
        border: none;
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-flat .e-icon, @{e-widget}.e-btn.e-select.e-flat .e-icon {
    & when (@skin="material") {
        color: @accent-color;
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-flat.e-active {
    & when (@skin="material") {
        background-color: @accent-color;
        color: @accent-font-color;
        box-shadow: none;
        font-family: @font-family;
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-active.e-flat .e-icon {
    & when (@skin="material") {
        color: @content-bg-color;
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-flat.e-active:active {
    & when (@skin="material") {
        background-color: fade(@accent-color,61%);
        border-radius: 2px;
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-flat:active {
    & when (@skin="material") {
        background-color: fade(@accent-color,12%);
        border-radius: 2px;
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon,@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon:hover {
    & when (@skin="material") {
        font-family: "ej-webfont";
        border-radius: 100%;
        background: none;
        border: none;
        box-shadow: none;
        color: fade(@base-font-color, 54%);
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-disable,@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-disable:hover, @{e-widget}.e-btn.e-select.e-flat.e-disable, @{e-widget}.e-btn.e-select.e-flat.e-disable:hover,
@{e-widget}.e-split.e-widget.e-disable, @{e-widget}.e-split.e-widget.e-disable:hover, @{e-widget}.e-split.e-widget.e-disable .e-icon {
    & when (@skin="material") {
        color: fade(@base-font-color,26%);
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-disable,@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-disable:hover {
    & when (@skin="material") {
        background-color: fade(@base-font-color,12%);
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-disable .e-icon, @{e-widget}.e-btn.e-select.e-flat.e-disable .e-icon, @{e-widget}.e-btn.e-select.e-primary.e-disable .e-icon,@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-disable .e-icon:hover,
@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-disable .e-icon:hover, @{e-widget}.e-btn.e-select.e-flat.e-disable .e-icon:hover, .e-btn.e-select.e-primary.e-disable .e-icon:hover {
    & when (@skin="material") {
        color: fade(@base-font-color,26%);
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon:focus,@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon:hover {
    &when(@skin="material") {
        background-color: fade(@base-font-color,12%);
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon:not(:active):after {
    &when(@skin="material") {
        background-color: fade(@accent-color,12%);
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon.e-active:not(:active):after {
    &when(@skin="material") {
        background-color: fade(@content-bg-color,12%);
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon.e-active,@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon.e-active:hover {
    & when (@skin="material") {
        color: @accent-color;
        background: none;
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon.e-active:focus, @{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon.e-active:hover {
    &when(@skin="material") {
        background-color: fade(@accent-color,26%);
        color: @accent-font-color;
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon.e-disable,@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon.e-disable:active, @{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-disable.e-toggle-icon-btn.e-icon.e-icon:focus, @{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-disable.e-toggle-icon-btn.e-icon.e-icon:hover {
    & when (@skin="material") {
        color: fade(@base-font-color,26%);
        background-color: transparent;
    }
}

@{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-flat.e-disable, @{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-flat.e-disable:active, @{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-flat.e-disable:hover, @{e-widget} .e-togglebutton.e-btn.e-tbtn.e-select.e-flat.e-disable:focus {
    & when (@skin="material") {
        background: none;
    }
}
@{e-widget} .e-tbtn.e-btn.e-active:hover .e-icon
{
    & when (@skin= "office-365")
    {
        /*office-365*/
        color: @theme-primary-font;
    }

    & when (@skin= "material")
    {
        color: @primary-font-color;
    }

    & when not (@skin= "office-365") and not (@skin= "material")
    {
        color: @active-icon-color;
    }
}
/*-------------------------------------------SplitButton----------------------------------------------------*/

@{e-widget}.e-btn.e-select {
    & when (@skin="material") {
        color: fade(@base-font-color, 87%);
    }
}

@{e-widget}.e-btn.e-select .e-icon {
    & when (@skin="material") {
        color: fade(@base-font-color, 54%);
    }
}
@{e-widget}.e-split.e-widget.e-btn e-split-btn-div .e-icon:before {
	& when (@skin= "office-365") {
        content: "\e673";
        }
}
@{e-widget}.e-btn.e-select.e-disable {
    & when (@skin="material") {
        color: fade(@base-font-color, 26%);
    }
}

@{e-widget}.e-btn.e-select.e-disable .e-icon {
    & when (@skin="material") {
        color: fade(@base-font-color, 26%);
    }
}

@{e-widget}.e-split.e-widget {
    & when (@skin="material") {
        color: fade(@base-font-color,87%);
    }
	background: none;
}

@{e-widget}.e-split.e-widget:hover, @{e-widget}.e-split.e-widget:focus {
    & when (@skin="material") {
        background-color: fade(@base-font-color,12%);
        border-radius: 2px;
    }
}

@{e-widget}.e-split.e-widget.e-active .e-splitarrowright, @{e-widget}.e-split.e-widget.e-active .e-splitarrowleft, @{e-widget}.e-split.e-widget.e-active .e-splitarrowtop, @{e-widget}.e-split.e-widget.e-active .e-splitarrowbottom {
    & when (@skin="material") {
        background-color: @content-bg-color;
        border-radius: 2px;
        box-shadow: rgba(0,0,0,0.26);
    }
}

@{e-widget}.e-split.e-widget .e-in-wrap.e-splitarrowright .e-split-btn.e-left-btn, @{e-widget}.e-split.e-widget.e-rtl .e-in-wrap.e-splitarrowleft .e-split-btn.e-left-btn {
    & when (@skin="material") {
        border-width: 0px 0.5px 0px 0px;
        border-style: solid;
    }
}

@{e-widget}.e-split.e-widget .e-in-wrap.e-splitarrowleft .e-split-btn.e-left-btn, @{e-widget}.e-split.e-widget.e-rtl .e-in-wrap.e-splitarrowright .e-split-btn.e-left-btn {
    & when (@skin="material") {
        border-width: 0px 0px 0px 0.5px;
        border-style: solid;
    }
}

@{e-widget}.e-split.e-widget .e-in-wrap.e-splitarrowtop .e-split-btn.e-left-btn {
    & when (@skin="material") {
        border-width: 0.5px 0px 0px 0px;
        border-style: solid;
    }
}

@{e-widget}.e-split.e-widget .e-in-wrap.e-splitarrowbottom .e-split-btn.e-left-btn {
    & when (@skin="material") {
        border-width: 0px 0px 0.5px 0px;
        border-style: solid;
    }
}

@{e-widget}.e-split.e-widget:hover .e-in-wrap .e-split-btn.e-left-btn, @{e-widget}.e-split.e-widget.e-active .e-in-wrap .e-split-btn.e-left-btn, @{e-widget}.e-split.e-widget:focus .e-in-wrap .e-split-btn.e-left-btn {
    & when (@skin="material") {
        border-color: fade(@base-font-color,12%);
    }
}

@{e-widget}.e-split.e-widget:hover .e-in-wrap .e-split-btn.e-left-btn, @{e-widget}.e-split.e-widget:hover .e-in-wrap .e-split-btn.e-drp-btn {
    & when (@skin="material") {
        border-style: solid;
        background-color: @grey-100;
        box-shadow: none;
    }
}

@{e-widget}.e-split.e-widget.e-drop:hover .e-in-wrap .e-split-btn.e-left-btn.e-droparrowbottom, @{e-widget}.e-split.e-widget.e-drop:hover .e-in-wrap .e-split-btn.e-left-btn.e-droparrowtop, @{e-widget}.e-split.e-widget.e-drop:hover .e-in-wrap .e-split-btn.e-left-btn.e-droparrowleft, @{e-widget}.e-split.e-widget.e-drop:hover .e-in-wrap .e-split-btn.e-left-btn.e-droparrowright {
    & when (@skin="material") {
        border: none;
    }
}

@{e-widget}.e-split.e-widget.e-disable:hover .e-in-wrap .e-split-btn.e-left-btn.e-disable, @{e-widget}.e-split.e-widget.e-disable:hover .e-in-wrap .e-split-btn.e-drp-btn.e-disable {
    & when (@skin="material") {
        background-color: transparent;
    }
}

@{e-widget}.e-split.e-widget.e-disable:hover .e-in-wrap .e-split-btn.e-left-btn {
    & when (@skin="material") {
        border-color: transparent;
    }
}

@{e-widget}.e-split.e-widget:hover .e-in-wrap.e-splitarrowright .e-split-btn.e-drp-btn, @{e-widget}.e-split.e-widget:hover .e-in-wrap.e-splitarrowleft .e-split-btn.e-drp-btn, @{e-widget}.e-split.e-widget:hover .e-in-wrap.e-splitarrowtop .e-split-btn.e-drp-btn, @{e-widget}.e-split.e-widget:hover .e-in-wrap.e-splitarrowbottom .e-split-btn.e-drp-btn {
    & when (@skin="material") {
        border: none;
    }
}

@{e-widget}.e-split.e-widget:focus {
    & when (@skin="material") {
        border-style: solid;
        background-color: @grey-100;
        border: none;
        outline: none;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    }
}

@{e-widget}.e-split.e-widget.e-active {
    & when (@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    }
}

/*--*/

@{e-widget}.e-split.e-widget.e-active .e-in-wrap.e-splitarrowbottom .e-split-btn.e-left-btn {
    & when (@skin="material") {
        border-width: 0px 0px 0.5px 0px;
        border-style: solid;
        border-color: fade(@base-font-color,12%);
    }
}

@{e-widget}.e-split.e-widget.e-active .e-in-wrap.e-splitarrowleft .e-split-btn.e-left-btn {
    & when (@skin="material") {
        border-width: 0px 0px 0px 0.5px;
        border-style: solid;
        border-color: fade(@base-font-color,12%);
    }
}

@{e-widget}.e-split.e-widget.e-active .e-in-wrap.e-splitarrowtop .e-split-btn.e-left-btn {
    & when (@skin="material") {
        border-width: 0.5px 0px 0px 0px;
        border-style: solid;
        border-color: fade(@base-font-color,12%);
    }
}

@{e-widget}.e-split.e-widget.e-active .e-in-wrap.e-splitarrowbottom .e-split-btn.e-left-btn {
    & when (@skin="material") {
        border-width: 0px 0px 0.5px 0px;
        border-style: solid;
        border-color: fade(@base-font-color,12%);
    }
}

/*primary button*/

@{e-widget}.e-btn.e-select.e-primary, @{e-widget}.e-btn.e-select.e-primary:active {
    & when not (@skin="material") {
        .active-gradient();
        border-color: @active-border-color;
        color: @active-font-color;
    }
	& when (@skin="office-365") {
	    background-color: @theme-primary;
		color: @neutral-white;
		border-color:@theme-primary;
	}
}

@{e-widget}.e-btn.e-select.e-primary:hover {
    & when not (@skin="material") {
        .hover-gradient();
        border-color: @hover-border-color;
        color: @hover-font-color;
    }
	& when (@skin="office-365") {
	    background-color: @theme-dark;
		color: @theme-dark-font;
		border-color:@theme-dark;
	}
}


@{e-widget}.e-btn.e-select.e-primary .e-icon, @{e-widget}.e-btn.e-select.e-primary .e-icon:active {

    & when not (@skin="material") {
        color: @active-icon-color;
    }
}

@{e-widget}.e-btn.e-select.e-primary:hover .e-icon {

    & when not (@skin="material") {
        color: @hover-icon-color;
    }
}

@{e-widget}.e-btn.e-select.e-primary:active:hover .e-icon, @{e-widget}.e-btn.e-select.e-primary:active:hover {

    & when not (@skin="material") {
        color: @active-font-color;
    }
    & when (@skin="bootstrap") {
        .active-gradient();
    }
}

@{e-widget}.e-btn.e-select.e-disable.e-primary, @{e-widget}.e-btn.e-select.e.e-disable.e-primary:active, @{e-widget}.e-btn.e-select.e-disable.e-primary:hover {

    & when not (@skin="material") {
        .active-gradient();
        border-color: fade(@active-border-color,50%);
        color: fade(@active-font-color,50%);
    }
	& when (@skin="office-365") {
		background-color: @neutral-lighter;
		color: @neutral-tertiary;
		border-color:@neutral-lighter;
	}
	
}

@{e-widget}.e-btn.e-select.e-disable.e-primary .e-icon, @{e-widget}.e-btn.e-select.e-disable.e-primary:hover .e-icon, @{e-widget}.e-btn.e-select.e-disable.e-primary:active .e-icon {
    & when not (@skin="material") {
        color: fade(@active-icon-color,50%);
    }
}

@{e-widget}.e-button.e-btn:not(:active):after, @{e-widget} .e-tbtn.e-btn.e-active:not(:active):after, @{e-widget}.e-split .e-split-btn.e-select.e-btn:not(:active):after,
@{e-widget} .e-tbtn.e-btn.e-flat.e-active:not(:active):after, @{e-widget}.e-colorwidget .e-color-container .e-selected-color:active::after, @{e-widget}.e-colorwidget .e-select:active .e-icon::after, @{e-widget}.e-colorpicker .e-colorblock .e-color-image.e-add:active:after,
@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active:not(:active):after, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item:not(:active):after, {
    &when( @skin="material") {
        background-color: fade(@content-bg-color,12%);
    }
}

@{e-widget}.e-button.e-btn.e-flat:not(:active):after, @{e-widget} .e-tbtn.e-btn.e-flat:not(:active):after, @{e-widget} .e-tbtn.e-btn:not(:active):after {
    & when (@skin="material") {
        background-color: fade(@accent-color,12%);
    }
}


/*end*/
/*------------------------------------Custom Button---------------------------------------*/
@{e-widget}.e-btn.e-select.e-success {
    color: #fff;
    background: #5cb85c;
    border-color: #4cae4c;
}

@{e-widget}.e-btn.e-select.e-success .e-icon, @{e-widget}.e-btn.e-select.e-info .e-icon, @{e-widget}.e-btn.e-select.e-warning .e-icon, @{e-widget}.e-btn.e-select.e-danger .e-icon {
    color: #fff;
}

@{e-widget}.e-btn.e-select.e-success:active, @{e-widget}.e-btn.e-select.e-success:hover, @{e-widget}.e-btn.e-select.e-success:hover:focus {
    background: #449d44;
    border-color: #398439;
}


@{e-widget}.e-btn.e-select.e-success:focus, @{e-widget}.e-btn.e-select.e-success:active:hover, @{e-widget}.e-btn.e-select.e-success:active:focus {
    background: #398439;
    border-color: #255625;
}

@{e-widget}.e-btn.e-select.e-success:focus {
    background-color: #449d44;
}

@{e-widget}.e-btn.e-select.e-info {
    color: #fff;
    background: #5bc0de;
    border-color: #46b8da;
}

@{e-widget}.e-btn.e-select.e-info:active, @{e-widget}.e-btn.e-select.e-info:hover, @{e-widget}.e-btn.e-select.e-info:focus, @{e-widget}.e-btn.e-select.e-info:hover:focus {
    background: #31b0d5;
    border-color: #269abc;
}

@{e-widget}.e-btn.e-select.e-info:focus {
    border-color: #1b6d85;
}

@{e-widget}.e-btn.e-select.e-info:active:hover, @{e-widget}.e-btn.e-select.e-info:active:focus {
    background: #269abc;
    border-color: #1b6d85;
}

@{e-widget}.e-btn.e-select.e-warning {
    color: #fff;
    background: #f0ad4e;
    border-color: #eea236;
}

@{e-widget}.e-btn.e-select.e-warning:active, @{e-widget}.e-btn.e-select.e-warning:hover, @{e-widget}.e-btn.e-select.e-warning:focus, @{e-widget}.e-btn.e-select.e-warning:hover:focus {
    background: #ec971f;
    border-color: #d58512;
}

@{e-widget}.e-btn.e-select.e-warning:focus {
    border-color: #985f0d;
}

@{e-widget}.e-btn.e-select.e-warning:active:hover, @{e-widget}.e-btn.e-select.e-warning:active:focus {
    background: #d58512;
    border-color: #985f0d;
}

@{e-widget}.e-btn.e-select.e-danger {
    color: #fff;
    background: #d9534f;
    border-color: #d43f3a;
}

@{e-widget}.e-btn.e-select.e-danger:active, @{e-widget}.e-btn.e-select.e-danger:hover, @{e-widget}.e-btn.e-select.e-danger:focus, @{e-widget}.e-btn.e-select.e-danger:hover:focus {
    background: #c9302c;
    border-color: #ac2925;
}

@{e-widget}.e-btn.e-select.e-danger:focus {
    border-color: #761c19;
}

@{e-widget}.e-btn.e-select.e-danger:active:hover, @{e-widget}.e-btn.e-select.e-danger:active:focus {
    background: #ac2925;
    border-color: #761c19;
}

@{e-widget}.e-btn.e-select.e-link, @{e-widget}.e-btn.e-select.e-link .e-icon {
    background: transparent;
    font-weight: 400;
    color: #337ab7;
    border: none;
    box-shadow: none;
}

@{e-widget}.e-btn.e-select.e-link:active, @{e-widget}.e-btn.e-select.e-link:active .e-icon {
    text-decoration: none;
}

@{e-widget}.e-btn.e-select.e-link:hover, @{e-widget}.e-btn.e-select.e-link:hover .e-icon, @{e-widget}.e-btn.e-select.e-link:focus, @{e-widget}.e-btn.e-select.e-link:focus .e-icon,
@{e-widget}.e-btn.e-select.e-link:active:hover, @{e-widget}.e-btn.e-select.e-link:active:hover .e-icon {
    color: #23527c;
}

@{e-widget}.e-btn.e-select.e-link.e-txt:hover, @{e-widget}.e-btn.e-select.e-link.e-txt:focus, @{e-widget}.e-btn.e-select.e-link.e-txt:active:hover{
    text-decoration: underline;
}

@{e-widget}.e-btn.e-select.e-disable.e-success, @{e-widget}.e-btn.e-select.e-disable.e-success:focus, @{e-widget}.e-btn.e-select.e-disable.e-success:active, @{e-widget}.e-btn.e-select.e-disable.e-success:active:hover {
    background: fade(#5cb85c,50%);
}

@{e-widget}.e-btn.e-select.e-disable.e-info, @{e-widget}.e-btn.e-select.e-disable.e-info:hover, @{e-widget}.e-btn.e-select.e-disable.e-info:focus, @{e-widget}.e-btn.e-select.e-disable.e-info:active, @{e-widget}.e-btn.e-select.e-disable.e-info:active:hover {
    background: fade(#5bc0de,50%);
}

@{e-widget}.e-btn.e-select.e-disable.e-warning, @{e-widget}.e-btn.e-select.e-disable.e-warning:hover, @{e-widget}.e-btn.e-select.e-disable.e-warning:focus, @{e-widget}.e-btn.e-select.e-disable.e-warning:active, @{e-widget}.e-btn.e-select.e-disable.e-warning:active:hover {
    background: fade(#f0ad4e,50%);
}

@{e-widget}.e-btn.e-select.e-disable.e-danger, @{e-widget}.e-btn.e-select.e-disable.e-danger:hover, @{e-widget}.e-btn.e-select.e-disable.e-danger:focus, @{e-widget}.e-btn.e-select.e-disable.e-danger:active, @{e-widget}.e-btn.e-select.e-disable.e-danger:active:hover {
    background: fade(#d9534f,50%);
}

@{e-widget}.e-btn.e-select.e-disable.e-success, @{e-widget}.e-btn.e-select.e-disable.e-success:active:hover, @{e-widget}.e-btn.e-select.e-disable.e-info, @{e-widget}.e-btn.e-select.e-disable.e-info:active:hover,
@{e-widget}.e-btn.e-select.e-disable.e-warning, @{e-widget}.e-btn.e-select.e-disable.e-warning:active:hover, @{e-widget}.e-btn.e-select.e-disable.e-danger, @{e-widget}.e-btn.e-select.e-disable.e-danger:active:hover, @{e-widget}.e-btn.e-select.e-disable.e-link, @{e-widget}.e-btn.e-select.e-disable.e-link:active:hover {
    color: fade(#fff,50%);
    border-color: transparent;
    box-shadow: none;
}

@{e-widget}.e-btn.e-select.e-disable.e-link, @{e-widget}.e-btn.e-select.e-disable.e-link.e-txt, @{e-widget}.e-btn.e-select.e-disable.e-link:hover, @{e-widget}.e-btn.e-select.e-disable.e-link.e-txt:hover, @{e-widget}.e-btn.e-select.e-disable.e-link:active, @{e-widget}.e-btn.e-select.e-disable.e-link.e-txt:active,
@{e-widget}.e-btn.e-select.e-disable.e-link:focus, @{e-widget}.e-btn.e-select.e-disable.e-link:focus .e-txt, @{e-widget}.e-btn.e-select.e-disable.e-link:active:hover, @{e-widget}.e-btn.e-select.e-disable.e-link.e-txt:active:hover{
    color: fade(#337ab7,50%);
    background: transparent;
    text-decoration: none;
}

@{e-widget}.e-btn.e-select.e-disable.e-link .e-icon, @{e-widget}.e-btn.e-select.e-disable.e-link:hover .e-icon, @{e-widget}.e-btn.e-select.e-disable.e-link:focus .e-icon, @{e-widget}.e-btn.e-select.e-disable.e-link:active .e-icon, @{e-widget}.e-btn.e-select.e-disable.e-link:active:hover .e-icon {
    color: fade(#337ab7,50%);
}

/*---end---*/

/*------------------------------------- Common -------------------------------------------*/
.ejinputtext {
    background-color: @content-bg-color;

    & when (@skin= "material") {
        color: @base-font-color;
        border: 1px solid @base-font-color;
        color: fade(@base-font-color,87%);
        border: 1px solid fade(@base-font-color,26%);
    }

    & when not (@skin= "material") {
        border: 1px solid @content-border-color;
        color: @content-font-color;
    }

    outline: medium none;
}

.e-textbox, .e-textarea {
    background-color: @content-bg-color;

    & when (@skin= "material") {
        color: @base-font-color;
        border-color: @base-font-color;
        color: fade(@base-font-color,87%);
        border-color: fade(@base-font-color,12%);
    }

    & when (@skin= "office-365") {
        border-color: @neutral-tertiary-alt;
        color: @neutral-primary;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        border-color: @content-border-color;
        color: @content-font-color;
    }
}

.ejinputtext:focus {
    & when (@skin= "material") {
        box-shadow: none;
        border: 1px solid fade(@base-font-color,54%);
    }

    & when not (@skin= "material") {
        box-shadow: 0 0 @shadow-bg-size @shadow-bg-color;
    }
}

.e-textbox:hover, .e-textarea:hover {
    & when (@skin= "material") {
        box-shadow: none;
    }

    & when (@skin= "office-365") {
        border-color: @neutral-secondary-alt;
        background: @neutral-white;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        .focus-border-color();
    }
}

.e-textbox:focus, .e-textarea:focus {
    & when (@skin= "material") {
        box-shadow: none;
        border-color: @accent-color;
    }

    & when (@skin= "office-365") {
        border-color: @theme-primary;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        box-shadow: 0 0 @shadow-bg-size @shadow-bg-color;
        .focus-border-color();
    }
}

.e-textbox.e-animation:focus, .e-textarea.e-animation:focus {
    & when (@skin= "material") {
        border-color: @base-font-color;
        border-color: fade(@base-font-color,12%);
    }
}

.e-ripple-bar:before, .e-ripple-bar:after {
    & when (@skin= "material") {
        background: @accent-color;
    }
}

.e-textbox[disabled], .e-textarea[disabled] {
    box-shadow: none;
	
    & when (@skin= "material") {
        border-bottom-style: dashed;
        background-image: linear-gradient(to right,rgba(0,0,0,.38) 0%,rgba(0,0,0,.38) 33%,transparent 0%);
        background-image: -ms-linear-gradient(left,transparent 0%,rgba(0,0,0,.38) 100%);
        background-position: bottom -1px left 0;
        background-size: 4px 1px;
        background-repeat: repeat-x;
        color: @base-font-color;
        color: fade(@base-font-color,26%);
    }

    & when (@skin= "office-365") {
        background: @neutral-lighter;
        border-color: @neutral-lighter;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
		background-color:@disable-control-background-color;
	    border-color:@disable-control-border-color;
        color: fade(@content-font-color,38%);
    }
}

.e-textbox[disabled]:hover, .e-textarea[disabled]:hover, .e-textbox[disabled]:focus, .e-textarea[disabled]:focus {
    & when (@skin= "office-365") {
        border-color: @neutral-lighter;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        border-color: @content-border-color;
    }

    box-shadow: none;
}

.e-textbox::selection, .e-textarea::selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
    }

    & when (@skin= "office-365") {
        background: @theme-primary;
        color: @theme-primary-font;
    }
}

.e-textbox::-moz-selection, .e-textarea::-moz-selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
    }

    & when (@skin= "office-365") {
        background: @theme-primary;
        color: @theme-primary-font;
    }
}

.e-textbox::-webkit-input-placeholder, .e-textarea::-webkit-input-placeholder {
    & when (@skin= "material") {
        font-style: normal;
        color: fade(@base-font-color,38%);
    }

    & when (@skin= "office-365") {
        color: @neutral-tertiary;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        color: @content-font-color;
    }
}

.e-textbox:-ms-input-placeholder, .e-textarea:-ms-input-placeholder {
    & when (@skin= "material") {
        color: fade(@base-font-color,38%);
    }

    & when (@skin= "office-365") {
        color: @neutral-tertiary;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        color: @content-font-color;
    }
}

.e-textbox::-moz-placeholder, .e-textarea::-moz-placeholder {
    & when (@skin= "material") {
        color: fade(@base-font-color,38%);
    }

    & when (@skin= "office-365") {
        color: @neutral-tertiary;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        color: @content-font-color;
    }
}

.e-textbox:-moz-placeholder, .e-textarea:-moz-placeholder {
    & when (@skin= "material") {
        color: fade(@base-font-color,38%);
    }

    & when (@skin= "office-365") {
        color: @neutral-tertiary;
    }

    & when not (@skin= "material") and not (@skin="office-365") {
        color: @content-font-color;
    }
}

.e-textbox.e-error, .e-textarea.e-error {
    & when (@skin= "office-365") {
        border-color: @error-color;
    }
}

.e-validation-error {
    & when (@skin= "office-365") {
        color: @error-color;
    }
}

@{e-widget}.e-menu.e-split.e-context {
    &when(@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
    }
}


@{e-widget}.e-menu.e-split.e-context .e-list > .e-menulink {
    &when(@skin="material") {
        color: fade(@base-font-color,87%);
    }

    &when not(@skin="material") {
        color: @default-font-color;
    }
}

@{e-widget}.e-menu.e-split.e-context .e-list .e-icon {
    &when(@skin="material") {
        color: fade(@base-font-color,54%);
    }
}

@{e-widget}.e-menu.e-split.e-context .e-list.e-mhover {
    &when(@skin="material") {
        background-color: @grey-200;
    }
}
@{e-widget}.e-btn.e-disable.e-select, @{e-widget}.e-btn.e-disable.e-select,.e-tbtn.e-btn.e-disable.e-select.e-active, @{e-widget} .e-tbtn.e-disable,
@{e-widget}.e-btn.e-disable.e-select:active, @{e-widget}.e-btn.e-disable.e-select:active,
@{e-widget}.e-split.e-disable{
     & when not (@skin= "material") and not (@skin="office-365"){
     background-color: @disable-control-background-color;
    border-color:@disable-control-border-color;
    color:@disable-icon-bg-color;
    opacity:1;
    }
}
@{e-widget}.e-btn.e-disable.e-select,@{e-widget}.e-btn.e-disable.e-select:hover,@{e-widget} .e-tbtn.e-disable:hover, @{e-widget}.e-btn.e-disable.e-select:active, @{e-widget} .e-tbtn.e-btn.e-disable.e-select.e-active:hover{
     & when not (@skin= "material") and not (@skin="office-365"){
     background-color: @disable-control-background-color;
    border-color:@disable-control-border-color;
    color:@disable-icon-bg-color;
    opacity:1;
    }
}
@{e-widget}.e-btn.e-disable.e-select:hover .e-icon,
@{e-widget}.e-btn.e-disable.e-select:active .e-icon{
     & when not (@skin= "material") and not (@skin="office-365"){
     color:@disable-icon-bg-color;
     }
}
@{e-widget}.e-btn.e-disable.e-select .e-icon{
     & when not (@skin= "material") and not (@skin="office-365"){
     color:@disable-icon-bg-color;
     }
}
@{e-widget}.e-btn.e-disable.e-select:focus{
     & when not (@skin= "material") and not (@skin="office-365"){
    box-shadow:none;
    }
}

@{e-widget}.e-split.e-drop.e-rtl .e-in-wrap .e-left-btn .e-split-btn-div .e-icon{
    & when (@skin= "office-365") {
       padding:4px 3px 4px 8px;
    }
}
@{e-widget}.e-split.e-drop .e-in-wrap .e-left-btn .e-split-btn-div .e-icon{
    & when (@skin= "office-365") {
       padding:4px 8px 4px 3px;
    }
}

/*------------------------------------- Captcha -------------------------------------------*/

@{e-js}.e-captcha .refresh {	
       & when (@skin= "material") {
        /*material*/  
        border: 0px;	 
        margin-left: 20px;
        padding: 0px 0px;
    } 
    & when not (@skin= "material") {
        /*other*/
    & when (@skin= "office-365") {
        /*office-365*/ 
        background: transparent;
        border: 0px; 	
    } 
    & when not (@skin= "office-365") {
        /*other*/
        background: @captcha-image;	 
		border: @captcha-refresh-border;  
    }  
    } 	            
}
@{e-js}.e-captcha .audio {	
      & when (@skin= "material") {
        /*material*/  
        border: 0px;	 
        margin-left: 20px;
        padding: 0px 0px;
    } 
    & when not (@skin= "material") {
        /*other*/
    & when (@skin= "office-365") {
        /*office-365*/ 
        background: transparent;	
    } 
    & when not (@skin= "office-365") {
        /*other*/
        background: @captcha-image;	
    } 
    } 			
}
@{e-js}.e-captcha .imagecontainer {
	    border: @captcha-image-border;       
}
@{e-js}.e-captcha .validTextBox {	
    & when (@skin= "material") {
        /*material*/ 
        border-width: 0 0 1px 0;
        border-color: fade(@base-font-color,12%); 
        color: fade(@base-font-color,38%);
        margin-bottom: 12px;
        margin-top: 26px;
    } 
    & when not (@skin= "material") {
        /*other*/ 
    & when not (@skin= "office-365") {
        /*other*/
		border: @captcha-valid-border;
    }
    & when (@skin= "office-365") {
        /*office-365*/ 
		border: 1px solid @neutral-light;
    } 
    }         
}
@{e-js}.e-captcha .e-validTextBox {	
    & when (@skin= "material") {
        /*material*/ 
        border-width: 0 0 1px 0;
        border-color: fade(@base-font-color,12%); 
        color: fade(@base-font-color,38%);
        margin-bottom: 12px;
        margin-top: 26px;
    } 
    & when not (@skin= "material") {
        /*other*/
        & when not (@skin= "office-365") {
        /*other*/
		border: @captcha-valid-border;
    }
    & when (@skin= "office-365") {
        /*office-365*/ 
		border: 1px solid @neutral-light;
    }  
    }     
}
@{e-js}.e-captcha .e-refresh {	
     & when (@skin= "material") {
        /*material*/  
        border: 0px;	 
        margin-left: 8px;
        padding: 0 0;
    } 
    & when not (@skin= "material") {
        /*other*/
    & when (@skin= "office-365") {
        /*office-365*/ 
        background: transparent;      
		border: 0px;		
    } 
    & when not (@skin= "office-365") {
        /*other*/
        background: @captcha-image;	      
		border:@captcha-refresh-border;	
    }  
    } 	     
}
@{e-js}.e-captcha .e-audio {	
      & when (@skin= "material") {
        /*material*/  
        border: 0px;	 
        margin-left: 8px;
        padding: 0 0;
    } 
    & when not (@skin= "material") {
        /*other*/
        & when (@skin= "office-365") {
        /*office-365*/ 
        background: transparent;      
		border: 0px;		
    } 
    & when not (@skin= "office-365") {
        /*other*/
        background: @captcha-image;	      
		border:@captcha-valid-border;	
    }  
    } 	
}
@{e-js}.e-captcha .e-imageContainer {	
		border: @captcha-image-border;        
}
@{e-js}.e-captcha div:nth-child(2) {
    & when (@skin= "material") {  
        width: 0px !important;
    } 
    & when not (@skin= "material") { 
    & when (@skin= "office-365") {
        /*office-365*/ 
		width: 0px !important;
    } 
    & when not (@skin= "office-365") {
        /*other*/
		width: 0px;
    }     
    } 
}
@{e-js}.e-captcha .validTextBox:focus{ 
        & when (@skin= "material") {  
            outline: none;
            border-bottom: 2px solid @accent-color;
        } 
    }
    @{e-js}.e-captcha .refresh.e-btn.e-select:active, @{e-js}.e-captcha .e-refresh.e-btn.e-select:active{
    & when (@skin= "material") {  
            background: @grey-400;   
        } 
}
@{e-js}.e-captcha .audio.e-btn.e-select:active, @{e-js}.e-captcha .e-audio.e-btn.e-select:active{
    & when (@skin= "material") {  
            background: @grey-400;  
    } 
}
 
@{e-js}.e-captcha .refresh.e-btn.e-select:focus, @{e-js}.e-captcha .audio.e-btn.e-select:focus, @{e-js}.e-captcha .refresh.e-btn.e-select:active, @{e-js}.e-captcha .audio.e-btn.e-select:active,
@{e-js}.e-captcha .e-refresh.e-btn.e-select:focus, @{e-js}.e-captcha .e-audio.e-btn.e-select:focus, @{e-js}.e-captcha .e-refresh.e-btn.e-select:active, @{e-js}.e-captcha .e-audio.e-btn.e-select:active{
    & when (@skin= "material") {  
            box-shadow: none;
    } 
}
@{e-js}.e-captcha .imagecontainer img, @{e-js}.e-captcha .e-imageContainer img{
    & when (@skin= "office-365") {  
        height: 80px;
        width: 150px;
    } 
}
@{e-js}.e-captcha .refresh:focus, @{e-js}.e-captcha .audio:focus, @{e-js}.e-captcha .e-refresh:focus, @{e-js}.e-captcha .e-audio:focus { 
    & when (@skin= "office-365") {  
        box-shadow: none;
    } 
}


/*------------------------------------- Colorpicker -------------------------------------------*/

 @{e-widget}.e-colorpicker .e-hsv-color,  @{e-widget}.e-colorpicker .e-buttons .e-preview,  @{e-widget}.e-colorpicker .e-slider-wrap .e-hue,  @{e-widget}.e-colorpicker .e-slider-wrap .e-opacity {
    & when (@skin="material") {
        border: none;
    }

    & when not (@skin="material") and not (@skin="office-365") {
        border: 3px solid @colorpicker-bg-color;
    }
}

@{e-widget}.e-colorpicker .e-slider-wrap .e-handle.e-select,  @{e-widget}.e-colorpicker .e-slider .e-handle.e-select.e-handle-start,
@{e-widget}.e-colorpicker .e-slider .e-handle.e-select.e-focus.e-handle-start:not(.e-no-tab),
@{e-widget}.e-colorpicker .e-slider .e-handle.e-select.e-handle-start.e-focus, 
@{e-widget}.e-colorpicker .e-slider-wrap .e-handle.e-select:hover {
    border: 3px solid @colorpicker-bg-color;
}
@{e-widget}.e-colorpicker:focus{
    outline: none;
}
@{e-widget}.e-colorwidget .e-select {
    & when not (@skin="material") {
        background: @colorpicker-button-bg-color;
        color: @default-icon-color;
        border-color: @content-border-color;
    }


    & when (@skin = "material") {
        color: fade(@base-font-color,54%);
    }
}

@{e-widget}.e-colorpicker .e-buttons .e-codeeditor .e-color-code{
    & when (@skin= "material")
    {
        border-color: fade(@base-font-color,12%);
    } 
}

@{e-widget}.e-colorwidget.e-split .e-in-wrap .e-select:hover, @{e-widget}.e-colorwidget.e-split .e-color-container:hover {
    & when not (@skin = "material") {
        .hover-gradient();
        border-color: @hover-border-color;
        color: @hover-icon-color;
    }
}

@{e-widget}.e-colorwidget.e-split .e-in-wrap .e-select:active,  @{e-widget}.e-colorpicker .e-footer .e-element .e-in-wrap.e-box .e-rht-btn:active {
    & when (@skin = "office-365") {
       background-color: @theme-primary;
	   color: @neutral-white;
    }
}

@{e-widget}.e-colorwidget .e-in-wrap,@{e-widget}.e-colorwidget .e-in-wrap.e-box.e-disable:hover,@{e-widget}.e-colorwidget .e-in-wrap.e-box.e-disable:focus{
    & when (@skin = "office-365"){
		border-color: @neutral-tertiary-alt;
	}
}

@{e-widget}.e-colorwidget .e-in-wrap.e-box:hover {
    & when (@skin = "material") {
        background-color: @grey-100;
        color: @hover-icon-color;
    }
	& when (@skin = "office-365") {
        border: 1px solid @neutral-secondary-alt;
    }
}

@{e-widget}.e-colorwidget .e-in-wrap.e-box:focus {
    & when (@skin = "material") {
        .hover-gradient();
        color: @hover-icon-color;
    }
}

@{e-widget}.e-colorwidget.e-picker.e-split.e-disable .e-in-wrap .e-select:hover, @{e-widget}.e-colorwidget.e-picker.e-split.e-disable .e-in-wrap .e-color-container:hover {
    cursor: default;
    background: @colorpicker-button-bg-color;
}

@{e-widget}.e-colorpicker.e-popup {
    .office-colorpick-popup-bg-color;
    background-color: @colorpicker-popup-bg-color;
    .office-colorpick-popup-border-color;
    border-color: @colorpicker-popup-boder-color;
}

@{e-widget}.e-presetWrapper.e-widget.e-context {
    border-color: @colorpicker-popup-boder-color;

    & when (@skin = "material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    }
}

@{e-widget}.e-colorwidget.e-focus {
    box-shadow: 0 0 @shadow-bg-size @bs-shadow-bg-color;
}

@{e-widget}.e-colorwidget.e-focus .e-in-wrap:active {
    .focus-border-color();
}

@{e-widget}.e-colorpicker .e-recent-color .e-colorblock.e-block, @{e-widget}.e-colorpicker .e-recent-color .e-colorblock.e-select, @{e-widget}.e-colorpicker .e-footer .e-switcher {
    background-color: @colorpicker-button-bg-color;
    color: @content-font-color;
	& when not (@skin = "office-365"){
		border-color: @colorpicker-button-border-color;
	}
	& when (@skin = "office-365"){
		border-color: @neutral-tertiary-alt;
	}
}

@{e-widget}.e-colorpicker .e-footer .e-split.e-widget{
	& when (@skin = "office-365"){
		border: 1px solid @neutral-tertiary-alt;
	}
}

@{e-widget}.e-colorpicker .e-footer .e-split.e-widget:hover{
	& when (@skin = "office-365"){
		border: 1px solid @neutral-secondary-alt;
	}
}

@{e-widget}.e-colorpicker .e-footer .e-split.e-widget:active{
	& when (@skin = "office-365"){
		border: 1px solid @theme-primary;
	}
}

@{e-widget}.e-colorpicker .e-colorblock .e-color-image.e-add:active {
    & when (@skin = "material") {
        background-color: fade(#000, 12%);
    }
}

@{e-widget}.e-colorpicker .e-recent-color .e-colorblock.e-colorset:hover {
    & when (@skin = "material") {
        background-color: @grey-100;
    }
}

@{e-widget}.e-colorpicker .e-recent-color .e-colorblock.e-colorset.e-select {
    & when (@skin = "material") {
        background-color: @grey-200;
    }
}


@{e-widget}.e-colorpicker .e-colorblock .e-color-image.e-add:active {
    & when (@skin = "material") {
        background-color: fade(@base-font-color, 12%);
    }
}



@{e-widget}.e-colorwidget .e-color-container .e-selected-color::after, @{e-widget}.e-colorwidget .e-select .e-icon::after, @{e-widget}.e-colorpicker .e-colorblock .e-color-image.e-add:after {
    & when (@skin="material") {
        background-color: fade(@primary-font-color, 50%);
    }
}


@{e-widget}.e-colorpicker .e-footer .e-switcher:hover {
    & when (@skin = "material") {
        .hover-gradient();
        border-radius: 2px;
    }
}

@{e-widget}.e-colorwidget .e-in-wrap.e-box, @{e-widget}.e-colorwidget .e-in-wrap.e-box .e-select, @{e-widget}.e-colorpicker .e-footer .e-in-wrap.e-box .e-splitbutton, @{e-widget}.e-colorpicker .e-footer .e-in-wrap.e-box .e-rht-btn, @{e-widget}.e-colorpicker .e-footer .e-in-wrap.e-box .e-split-btn, @{e-widget}.e-colorpicker .e-footer .e-in-wrap.e-box .e-drp-btn.e-rht-btn,@{e-widget}.e-colorwidget.e-split .e-in-wrap .e-select.e-disable:active {
    & when not (@skin = "material") and not (@skin = "office-365") {
        background: @colorpicker-button-bg-color;
    }

    & when (@skin = "material") {
        border-color: transparent;
        color: fade(@base-font-color, 54%);
    }

    color: @content-font-color;
    .colorpickericon-color-selection();
}
@{e-widget}.e-colorpicker .e-footer .e-in-wrap.e-box .e-drp-btn.e-rht-btn{
	& when not (@skin = "material") and not (@skin = "office-365") {
		border-right: 1px solid;
		border-right-color: @colorpicker-popup-boder-color;
	}
}
@{e-widget}.e-colorwidget .e-select:hover, @{e-widget}.e-colorpicker .e-element .e-split-btn.e-select.e-rht-btn:hover {
    & when not (@skin = "material") {
        background-color: @colorpicker-button-bg-color;
    }

    color: @hover-font-color;
    border-color: @hover-border-color;
}

@{e-widget}.e-colorpicker .e-footer .e-in-wrap.e-box .e-splitbutton:hover, @{e-widget}.e-colorpicker .e-footer .e-in-wrap.e-box .e-rht-btn:hover {
    & when not (@skin = "material") and not (@skin = "office-365") {
        .hover-gradient();
        color: @hover-icon-color;
        border-color: @hover-border-color;
    }
	 & when (@skin = "office-365") {
       .hover-gradient();
        color: @hover-icon-color;
    }
}

@{e-widget}.e-presetWrapper.e-menu.e-context, @{e-widget}.e-presetWrapper.e-menu.e-context .e-list.e-mhover.e-mfocused, @{e-widget}.e-presetWrapper.e-menu.e-context .e-list > ul, @{e-widget}.e-presetWrapper.e-menu.e-context .e-list:hover {
    background: @colorpicker-button-bg-color;
    color: @content-font-color;
    border-color: @colorpicker-btn-bg-color;
}

@{e-widget}.e-presetWrapper.e-menu.e-context .e-list:hover {
    background: @colorpicker-button-bg-color;
    color: @content-font-color;
}

@{e-widget}.e-colorpicker .e-footer .e-split .e-splitbutton:hover {
    .default-gradient();
    border-color: @hover-border-color;
}

@{e-widget}.e-colorpicker .e-footer .e-cancelButton.e-btn, @{e-widget}.e-colorpicker .e-footer .e-applyButton.e-btn {
    & when not (@skin = "material") {
        .bs-default-gradient();
        border-color: @colorpicker-popup-boder-color;
    }
}

@{e-widget}.e-colorpicker .e-footer .e-cancelButton.e-btn:hover, @{e-widget}.e-colorpicker .e-footer .e-applyButton.e-btn:hover {
    & when not (@skin = "material") {
        .hover-gradient();
        border-color: @hover-border-color;
        color: @hover-font-color;
    }
}

@{e-widget}.e-colorpicker .e-buttons .e-grpbtn {
    & when (@skin = "material") {
        box-shadow: 0 2px 5px 0 fade(@base-font-color, 26%);
    }
}

@{e-widget}.e-colorpicker .e-buttons .e-grpbtn .e-btn,@{e-widget}.e-colorpicker .e-buttons .e-grpbtn .e-btn.e-disable:hover{

	& when not (@skin = "office-365") {
		color: @default-font-color;
	}
	
    & when (@skin = "material") {
        background: @colorpicker-grpbutton-bg-color;
        box-shadow: none;
        border-radius: 0;
    }
	& when (@skin = "office-365") {
        box-shadow: none;
        color: @theme-light-font;
    }
}

@{e-widget}.e-colorpicker .e-buttons .e-grpbtn, @{e-widget}.e-colorpicker .e-buttons .e-color-code, @{e-widget}.e-colorpicker .e-buttons .e-grpbtn .e-btn {
    & when not (@skin = "material") {
        background-color: @colorpicker-button-bg-color;
        .colorpicker-color-selection();
        border-color: @colorpicker-button-border-color;
    }
	& when (@skin = "office-365") {
        .colorpicker-color-selection();
    }
}

@{e-widget}.e-colorpicker .e-buttons .e-grpbtn, @{e-widget}.e-colorpicker .e-buttons .e-grpbtn .e-btn {
    & when (@skin = "material") {
        border-color: @content-border-color;
    }
	& when (@skin = "office-365") {
        background-color: @neutral-lighter;
    }
}
@{e-widget}.e-colorpicker.e-buttons.e-grpbtn .e-hsvButton.e-button.e-js.e-ntouch.e-btn-normal.e-btn.e-select.e-widget.e-txt.e-disable{
    background:none
}

@{e-widget}.e-colorpicker .e-buttons .e-color-code {
    & when (@skin = "material") {
        border-color: fade(@base-font-color, 26%);
    }
	& when (@skin = "office-365") {
        border: 1px solid @neutral-tertiary-alt;
    }
}

@{e-widget}.e-colorpicker .e-buttons .e-color-code:hover {
	 & when (@skin = "office-365") {
        border-color: @neutral-secondary-alt;
    }
	
}

@{e-widget}.e-colorpicker .e-buttons .e-color-code:focus {
    & when (@skin = "material") {
        border-color: fade(@base-font-color, 54%);
    }
	
	 & when (@skin = "office-365") {
        border-color: @theme-primary;
    }
	
}

@{e-widget}.e-colorpicker .e-buttons .e-codeeditor::before{
        & when (@skin= "material") {
          background: @accent-color;        
        }
    }

@{e-widget}.e-colorpicker .e-buttons .e-previous, @{e-widget}.e-presetWrapper .e-presets-table .e-preset-row {
    border-color: @content-border-color;
}

@{e-widget}.e-colorpicker .e-item {
    & when not (@skin = "material") {
        border-color: @colorpicker-popup-boder-color;
    }
	& when (@skin = "office-365") {
		border: 1px solid @neutral-tertiary-alt;
	}
}

@{e-widget}.e-colorpicker .e-item.e-state-selected {
    & when (@skin = "material") {
        border-color: @base-font-color;
        border-width: 1px;
    }
}

@{e-widget}.e-colorpicker .e-color-image, @{e-widget}.e-presetWrapper .e-color-image, @{e-widget}.e-presetWrapper.e-menu.e-context .e-color-image.e-mhover {
    background-image: @colorpicker-image;
    background-color: transparent;
    filter: none;
}

@{e-widget}.e-presetWrapper.e-menu.e-context .e-color-image.e-mhover {
    & when (@skin = "material") {
        background-color: fade(@base-font-color, 12%);
    }
}

@{e-widget}.e-presetWrapper.e-menu.e-context .e-color-image.e-presetsactive {
    & when (@skin = "material") {
        background-color: fade(@base-font-color, 24%);
    }
}

@{e-widget}.e-presetWrapper .e-presetHeader, @{e-widget}.e-colorpicker .e-element .e-icon:before {
    color: @content-font-color;
}

@{e-widget}.e-colorpicker .e-element .e-drp-btn.e-rht-btn:active .e-icon:before
{
    & when (@skin="office-365") {
        color: @theme-primary-font;
    }
}

@{e-widget}.e-colorpicker .e-buttons .e-color-code, @{e-widget}.e-colorpicker .e-codeeditor .e-close_01 {
    color: @content-font-color;
}

@{e-widget}.e-colorpicker .e-buttons .e-grpbtn .e-click {

    & when (@skin = "material") {
        color: @base-font-color;
        background-color: @grey-400;
    }

    & when not (@skin = "material") {
        .active-gradient();
        color: @active-font-color;
        border-color: @active-border-color;
        box-shadow: 0 0 0 2px @colorpicker-bg-color;
        .colorpicker-boxshadow-selection();
    }
}

@{e-widget}.e-colorpicker .e-buttons .e-grpbtn .e-btn:hover {
    .hover-gradient();
    color: @hover-font-color;
    border-color: @hover-border-color;
}

@{e-widget}.e-presetWrapper.e-menu.e-context li.e-list {
    background: @content-bg-color;
}

@{e-widget}.e-colorpicker .e-context.e-menu .e-mhover > a, @{e-widget}.e-colorpicker .e-context.e-menu .e-mhover > span,
@{e-widget}.e-colorpicker .e-context.e-menu .e-mfocused, @{e-widget}.e-colorpicker .e-context.e-menu .e-mfocused > a, @{e-widget}.e-colorpicker .e-context.e-menu .e-mfocused > span {
    background: transparent;
}
@{e-widget}.e-colorpicker .e-slider .e-handle.e-select.e-focus:not(.e-no-tab):after,
 @{e-widget}.e-colorpicker .e-slider .e-handle.e-select.e-focus.e-handle-start:not(.e-no-tab):after,
 {
    background: transparent;
}

@{e-widget}.e-colorwidget .e-color-container .e-selected-color:active::after, @{e-widget}.e-colorwidget .e-select:active .e-icon::after, @{e-widget}.e-colorpicker .e-colorblock .e-color-image.e-add:active:after {
        &when( @skin="material") {
            background-color: fade(@content-bg-color,50%);
        }
    }
@{e-widget}.e-colorpicker .e-footer .e-switcher:focus{
    & when not (@skin = "material") {
       box-shadow: 0 0 2px @shadow-bg-color;
       outline-color:@shadow-bg-color;
    }
}
@{e-widget}.e-colorwidget.e-disable{
     & when not (@skin= "material") and not (@skin="office-365"){
     background-color: @disable-control-background-color;
    border-color:@disable-control-border-color;
    opacity:1;
    }
}
@{e-widget}.e-colorwidget.e-disable .e-select,
@{e-widget}.e-colorwidget.e-disable .e-select:hover{
     & when not (@skin= "material") and not (@skin="office-365"){
    background-color: @disable-icon-bg-color;
    }
}
@{e-widget}.e-colorwidget .e-in-wrap .e-tool-icon.e-icon{
    font-family: 'ej-webfont';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    transform: rotate(0deg);
    transition: transform 300ms ease;
    & when (@skin = "material") {
        margin: -11px 8px;
        height:14px;
    }

    & when not (@skin = "material") {
        margin: -11px 5px;
    }
}




@{e-widget}.e-fileexplorer,@{e-widget}.e-fileexplorer input:not(.e-textbox),@{e-widget} input.e-fe-dialog-text:not(.e-textbox),
@{e-widget}.e-fe-toolbar.e-responsive-toolbar input{
    border-color:@default-border-color;
} 
@{e-widget}.e-fileexplorer input, @{e-widget} input.e-fe-dialog-text{
    & when (@skin= "office-365") {
        border-color:@default-border-color;
    }
}

@{e-widget}.e-fileexplorer,@{e-widget}.e-fileexplorer input,@{e-widget} input.e-fe-dialog-text,
@{e-widget}.e-fe-toolbar.e-responsive-toolbar input{
    & when not (@skin= "material") and not (@skin="office-365") {
        border-color:@default-border-color;
    }
} 

@{e-widget}.e-fileexplorer {
    .office-file-explorer-toolbar-border-color;
    border-color:@default-border-color;
} 

@{e-widget}.e-fileexplorer .e-splitter .e-splitbar,
@{e-widget}.e-fileexplorer .e-statusbar,@{e-widget}.e-fileexplorer .e-grid .e-gridheader, @{e-widget}.e-fileexplorer.e-fe-mobile .e-fe-split-icon
{
    border-color: @content-border-color;
}
@{e-widget}.e-fileexplorer .e-splitter .e-splitbar.e-h-bar{
    & when (@skin= "office-365") {
        border-color: @content-border-color;
        border-style: solid;
    }
}
@{e-widget}.e-fileexplorer .e-statusbar {
    .material-stylefor-bordertop();
}
@{e-widget}.e-fileexplorer .e-statusbar .e-itemStaus{
    & when (@skin= "material") {
        color: fade(@base-font-color, 87%);
    }
}
@{e-widget}.e-fileexplorer input:not(.e-textbox),
@{e-widget}.e-fileexplorer .e-grid .e-headercelldiv, @{e-widget}.e-fileexplorer .e-grid .e-gridcontent tr,
@{e-widget}.e-fileexplorer .e-tileview .e-tilenode .e-name, @{e-widget} input.e-fe-dialog-text:not(.e-textbox),
@{e-widget}.e-fe-toolbar.e-responsive-toolbar input
{
    & when (@skin= "material") {
        color: fade(@base-font-color, 87%);
    }
    & when not (@skin= "material") {
        color: @content-font-color;
    }
    
}

@{e-widget}.e-fileexplorer .e-tileview .e-tilenode:hover .e-name,@{e-widget}.e-fileexplorer .e-grid .e-gridcontent tr.e-hover td{
    color: @hover-font-color;
}
.e-fileexplorer.e-js .e-grid td.e-active, @{e-widget}.e-fileexplorer .e-tileview .e-tilenode.e-active .e-name{
    & when (@skin= "material") {
        color:rgba(0,0,0,.87);
    }
    & when (@skin= "office-365") {
        color: @theme-light-font;
    }
    & when not (@skin= "material") and not (@skin= "office-365") {
        color:@active-font-color;
    }
    
}
@{e-widget}.e-fileexplorer .e-tileview .e-tilenode.e-active:hover{
    .hover-gradient();
    border-color:@hover-border-color;
}
@{e-widget}.e-fileexplorer .e-tileview .e-tilenode.e-active:hover .e-name{
    & when (@skin= "office-365") {
        color:@theme-light-font;
    }
    & when not (@skin= "office-365") {
        color: @hover-font-color;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar .e-fe-split-button .e-active .e-icon, @{e-widget}.fe-context-menu.e-menu.e-context .e-list.e-active > .e-menulink > .e-fileexplorer-toolbar-icon
{
    & when not (@skin= "material") and not (@skin="office-365"){
        color: @active-icon-color;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar .e-fe-split-button.e-hover .e-active .e-icon, @{e-widget}.e-fileexplorer .e-toolbar .e-fe-split-button.e-hover .e-icon {
    & when not (@skin= "material") and not (@skin="office-365") {
        color: @hover-icon-color;
    }
}

@{e-widget}.e-fileexplorer .e-treeview .e-fe-node-hover,  @{e-widget}.e-fe-dialog.e-icon.e-close:hover
{
    & when not (@skin= "material") and not (@skin="office-365") {
        .hover-gradient();
        color: @hover-font-color;
        border-color: @hover-border-color;
    }    
}

 .e-fileexplorer.e-js .e-tilenode.e-active, .e-fileexplorer.e-js .e-grid .e-gridcontent tr td.e-active
{
     & when (@skin= "material") {
        border-color: @grey-100;
        background: @grey-100;
     }
     & when (@skin= "office-365") {
        border-color: @theme-lighter;
        background:@theme-lighter;
     }
     & when not (@skin= "material") and not(@skin= "office-365") {
        .high-contrast-file-explorer-content-active;
        border-color: @active-border-color;
        background: @active-bg-stcolor; 
     }    
}
 .e-fileexplorer.e-js .e-tilenode.e-active:hover, .e-fileexplorer.e-js .e-grid .e-gridcontent tr:hover td.e-active{
     & when (@skin= "material") {
        border-color: @grey-200;
        background: @grey-200;
     }
     & when (@skin= "office-365") {
        border-color: @neutral-lighter;
        background: @neutral-lighter;
     }
     & when not (@skin= "material") and not(@skin= "office-365") {
        .hover-gradient();
        color:@hover-font-color;
        border-color:@hover-border-color;
     }
 }

.e-fileexplorer.e-js .e-statusbar .e-active .e-icon
{
    & when not (@skin= "material") and not (@skin="office-365") {
        color: @active-bg-stcolor;
    }
}

.e-fileexplorer.e-js .e-treeview .e-text:hover,
@{e-widget}.e-fileexplorer .e-actionbar .e-btn.e-select:hover,
@{e-widget}.e-fileexplorer .e-treeview .e-text.e-file-droppable
{
    & when not (@skin= "material") and not (@skin="office-365") {
        color: @hover-font-color;
        border-color:@hover-border-color;
    }
}

@{e-widget}.e-fileexplorer input:not(.e-textbox) , @{e-widget} input.e-fe-dialog-text:not(.e-textbox), @{e-widget}.e-fe-toolbar.e-responsive-toolbar input,
@{e-widget} .e-fe-split-context.e-menu.e-context.e-split, @{e-widget} .e-fe-split-context.e-menu.e-widget.e-split li.e-list
{
    background: @content-bg-color;
}

@{e-widget}.e-fileexplorer .e-tilenode.e-hover, @{e-widget}.e-fileexplorer .e-grid .e-gridcontent tr.e-hover td,
@{e-widget}.e-fileexplorer .e-tilenode.e-file-droppable, @{e-widget}.e-fileexplorer .e-grid .e-gridcontent tr.e-file-droppable td,
@{e-widget}.e-fileexplorer .e-treeview .e-text.e-file-droppable
{
    & when (@skin= "material") {
        border-color: @grey-200;
		background: @grey-200;
    }
    & when (@skin= "office-365") {
        border-color: @neutral-lighter;
        background: @neutral-lighter;
    }
    & when not (@skin= "material") and not(@skin= "office-365") {
        border-color: @hover-border-color;
        background: @hover-bg-stcolor;
    }
}

@{e-widget}.e-fileexplorer .e-switchGridView.e-button:hover,
@{e-widget}.e-fileexplorer .e-swithListView.e-button:hover
{
    & when (@skin="office-365") {
        background-color: @neutral-lighter;
    }
    & when not (@skin="office-365") {
        .hover-gradient();
    }
    border-color: @hover-border-color;
    border-color:@hover-border-color;
}

@{e-widget}.e-fileexplorer .e-toolbar .e-fe-split-button.e-hover .e-btn.e-select,
@{e-widget}.e-fileexplorer .e-toolbar .e-fe-split-button .e-btn.e-select:focus {
    & when not (@skin= "material") and not (@skin="office-365") {
	    .hover-gradient();
    }
}

@{e-widget}.e-fileexplorer .e-toolbar>.e-horizontal>.e-active>span.e-fe-folder{
     & when (@skin="office-365") {
         background-color: transparent;
     }
}

@{e-widget}.e-fileexplorer .e-toolbar .e-hover .e-tool-input,
@{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-hover .e-tool-input {
    & when (@skin="office-365") {
        border-color: @neutral-secondary-alt;
    }
}

.e-fileexplorer.e-js .e-toolbar .e-feItem-Addressbar.e-hover,
.e-fileexplorer.e-js .e-toolbar .e-feItem-Searchbar.e-hover,
.e-fe-toolbar.e-responsive-toolbar.e-js .e-feItem-Addressbar.e-hover,
.e-fe-toolbar.e-responsive-toolbar.e-js .e-feItem-Searchbar.e-hover {
    & when (@skin="office-365") {
        background: transparent;
        border-color: transparent;
    }
}

@{e-widget}.e-fileexplorer .e-split.e-widget .e-split-btn.e-left-btn,@{e-widget}.e-fileexplorer .e-split.e-widget .e-split-btn.e-drp-btn,
@{e-widget}.e-fe-toolbar .e-split.e-widget .e-split-btn.e-left-btn, @{e-widget}.e-fe-toolbar .e-split.e-widget .e-split-btn.e-drp-btn{
    background: none;
}

@{e-widget}.e-fileexplorer .e-toolbar > .e-horizontal > .e-active > span.e-fe-folder {
    & when (@skin= "material") {
        background-color: transparent;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar input, @{e-widget}.e-fe-toolbar.e-responsive-toolbar.e-toolbar input {
    & when (@skin= "material") {
        border-color: fade(@base-font-color, 26%);
    }
}

@{e-widget}.e-fileexplorer .e-toolbar input::selection, @{e-widget}.e-fe-toolbar.e-responsive-toolbar.e-toolbar input::selection {
    & when (@skin= "material") {
        color: @accent-font-color;
        background: @accent-color;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar .e-tool-input:focus, @{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-tool-input:focus {
    & when (@skin= "material") {
        border-color: fade(@base-font-color, 38%);
    }
}

@{e-widget}.e-fileexplorer .e-toolbar .e-hover .e-tool-input,
@{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-hover .e-tool-input {
    & when (@skin= "material") {
        border-color: fade(@base-font-color, 38%);
    }
}

.e-fileexplorer.e-js .e-toolbar .e-feItem-Addressbar.e-hover, .e-fileexplorer.e-js .e-toolbar .e-feItem-Searchbar.e-hover,
.e-fe-toolbar.e-responsive-toolbar.e-js .e-feItem-Addressbar.e-hover, .e-fe-toolbar.e-responsive-toolbar.e-js .e-feItem-Searchbar.e-hover {
    & when (@skin= "material") {
        background: transparent;
        border-color: transparent;
    }
}

@{e-widget}.e-fileexplorer .e-statusbar .e-switchView .e-btn.e-select.e-flat .e-icon {
    & when (@skin= "material") {
        color: fade(@base-font-color, 54%);
    }
}

@{e-widget}.e-fileexplorer .e-statusbar .e-switchView .e-btn.e-select.e-active.e-flat .e-icon {
    & when (@skin= "material") {
        color: @accent-color;
    }
}

@{e-widget}.e-fileexplorer .e-split.e-widget:hover .e-in-wrap .e-split-btn.e-left-btn,
@{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-split.e-widget:hover .e-in-wrap .e-split-btn.e-left-btn {
    & when (@skin= "material") {
        background-color: @grey-300;
    }
}

@{e-widget}.e-fileexplorer .e-tooltxt.e-feItem-Addressbar.e-active:after,
@{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-tooltxt.e-feItem-Searchbar.e-active:after {
    & when (@skin= "material") {
        animation: none;
    }
}

@{e-widget}.e-fileexplorer .e-scrollbar .e-vscroll, @{e-widget}.e-fileexplorer .e-scrollbar .e-hscroll {
    & when (@skin= "material") {
        border-color: @default-border-color;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar > .e-horizontal .e-fe-split-button .e-active, @{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-horizontal .e-fe-split-button .e-active {
    & when (@skin= "material") {
        background: @grey-300;
        box-shadow: none;
    }
}

@{e-widget}.e-fileexplorer .e-statusbar .e-switchView .e-button.e-active:focus, @{e-widget}.e-fileexplorer .e-statusbar .e-switchView .e-button.e-active:focus:hover {
    & when (@skin= "material") {
        background-color: fade(@accent-color, 26%);
    }
}

@{e-widget}.e-fileexplorer .e-statusbar .e-switchView .e-active.e-btn.e-select .e-icon {
    & when (@skin= "material") {
        color: @accent-color;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar
{
    & when not (@skin= "material") and not (@skin="office-365") {
        color: @default-icon-color;
        .default-gradient();
        border-color:@default-border-color;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar {
    & when not (@skin= "material") and not (@skin="office-365") {
        .office-file-explorer-toolbar-bg-color;
    }
}

@{e-widget}.e-fe-toolbar.e-toolbar .e-feItem-Searchbar.e-tooltxt.e-active {
    background: transparent;
}
@{e-widget}.e-fileexplorer .e-grid .e-gridheader, @{e-widget}.e-fileexplorer .e-grid .e-gridheader.e-scrollcss, @{e-widget}.e-fileexplorer .e-grid .e-gridheader .e-headercell {
    background: @content-bg-color;
}
@{e-widget}.e-fileexplorer .e-alt_row, @{e-widget}.e-fileexplorer .e-gridheader ,
@{e-widget}.e-fileexplorer .e-gridheader .e-headercell, @{e-widget}.e-fileexplorer .e-grid .e-gridcontent,
@{e-widget}.e-fileexplorer .e-splitter .e-pane, @{e-widget}.e-fileexplorer .e-scroller .e-scrollbar .e-vhandlespace, 
@{e-widget}.e-fileexplorer .e-scroller .e-scrollbar .e-hhandlespace
{
    background-color: @content-bg-color;
}

@{e-widget}.e-fileexplorer .e-tilenode.e-hover .e-thumbImage
{
    border-color: @hover-border-color;
}

.e-fileexplorer.e-js .e-active .e-thumbImage
{
    border-color: @active-bg-stcolor;
}

 @{e-widget}.e-menu > .e-list.e-fe-separator {
    border-color: @content-border-color;
}



@{e-widget}.e-fileexplorer .e-toolbar .e-hover .e-tool-input, @{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-hover .e-tool-input,
@{e-widget}.e-fileexplorer .e-toolbar .e-tool-input:focus, @{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-tool-input:focus {
    & when not (@skin= "material") and not (@skin="office-365") {
        .high-contrast-file-explorer-search-text;
        border-color: @active-bg-stcolor;
    }
}
@{e-widget}.e-fileexplorer .e-toolbar .e-feItem-Addressbar.e-hover, @{e-widget}.e-fileexplorer .e-toolbar .e-feItem-Searchbar.e-hover,
@{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-feItem-Addressbar.e-hover, @{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-feItem-Searchbar.e-hover,
@{e-widget}.e-fileexplorer .e-toolbar .e-feItem-Searchbar.e-active, @{e-widget}.e-fileexplorer .e-toolbar .e-feItem-Addressbar.e-active,
@{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-feItem-Searchbar.e-active, @{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-feItem-Addressbar.e-active {
    & when (@skin="office-365") {
        background: transparent;
        border-color: transparent;
    }
    & when not (@skin="office-365") {
        background: @default-bg-stcolor;
        border-color: @default-bg-stcolor;
    }
}
@{e-widget}.e-fileexplorer .e-toolbar .e-fe-split-button.e-hover, @{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-fe-split-button.e-hover,
@{e-widget}.e-fileexplorer .e-toolbar .e-fe-split-button.e-active, @{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-fe-split-button.e-active {
    & when not (@skin= "material") and not (@skin="office-365") {
        background: @default-bg-stcolor;
        border-color: @default-bg-stcolor;
    }
}
@{e-widget}.e-dialog .e-fe-table table tr .e-readonly {
  background:@content-bg-color;    
  color: @content-font-color;
}

@{e-widget}.e-dialog .e-fe-table table .e-border {
    border-color:@content-border-color;
}

@{e-widget}.e-fileexplorer .e-toolbar .e-fe-split-button .e-active .e-btn {
    & when not (@skin= "material") and not (@skin="office-365") {
        background: @active-bg-stcolor;
        color: @active-font-color;
    }
}
@{e-widget}.e-fileexplorer .e-splitter .e-splitbar.e-shadowbar, @{e-widget}.e-fileexplorer .e-splitter .e-splitbar.e-split-divider, 
@{e-widget}.e-fileexplorer .e-splitter .e-splitbar.e-split-divider:hover, @{e-widget}.e-fileexplorer .e-splitter .e-hover.e-splitbar.e-split-divider{
	background-color: transparent;
}

@{e-widget}.e-fileexplorer .e-fe-popup .e-content {
    background-color: @content-bg-color;
    border-color: @default-border-color;
}

@{e-widget}.e-fileexplorer .e-fe-popup .e-downtail:after {
    border-top-color: @content-bg-color;
}

@{e-widget}.e-fileexplorer .e-fe-popup .e-downtail:before, @{e-widget}.e-fileexplorer .e-fe-popup .e-downtail {
    border-top-color: @default-border-color;
}

@{e-widget}.e-fileexplorer .e-fe-popup span:hover, @{e-widget}.e-fileexplorer .e-fe-popup .e-spanclicked {
    border-color: @default-icon-color;
}
@{e-widget}.e-fileexplorer .e-tile-wrapper.e-js.e-file-droppable, @{e-widget}.e-fileexplorer .e-grid .e-gridcontent.e-file-droppable{
	box-shadow: 0px 0px 6px -1px @default-border-color inset;
}
@{e-widget}.e-fe-dialog.e-dialog .e-fe-table tr td:first-child{
     & when (@skin= "material") {
            color: rgba(0,0,0,.38);
			border-color: rgba(0,0,0,.38);
     }
}
/*------------------------------------------------------------------*/

@{e-widget}.e-fileexplorer .e-toolbar.e-js {
    .material-stylefor-fileexplorer();
}

@{e-widget}.fe-context-menu.e-menu.e-context .e-mhover > a > span.e-fileexplorer-toolbar-icon,
@{e-widget}.fe-context-menu.e-menu.e-context .e-mfocused > a > span.e-fileexplorer-toolbar-icon {
    & when not (@skin= "material") and not (@skin="office-365") {
        .switch-file-explorer-context-icon-color;
        color: @hover-font-color;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar.e-focus{
    & when not (@skin= "material") and not (@skin="office-365") {
	    .material-normal-box-shadow;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar > ul > li .e-splitbutton.e-btn.e-select {
    & when not (@skin= "material") and not (@skin="office-365") {
        .material-file-explorer-splitbtn-shadow;
        .office-file-explorer-splitbtn-bg-color;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar > ul > li .e-split.e-active .e-splitbutton.e-btn.e-select{
    & when not (@skin= "material") and not (@skin="office-365") {
        background: @active-bg-stcolor;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar > ul > .e-fe-split-button.e-hover .e-split.e-active .e-splitbutton.e-btn.e-select{
    & when not (@skin= "material") and not (@skin="office-365"){
        background: @hover-bg-stcolor;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar > ul > li .e-splitbutton.e-btn.e-ntouch.e-select:hover {
    & when not (@skin= "material") and not (@skin="office-365"){
        .material-file-explorer-splitbtn-shadow;
    }
}


@{e-widget}.e-fileexplorer .e-toolbar .e-hover .e-tool-input,
@{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-hover .e-tool-input,
@{e-widget}.e-fileexplorer .e-toolbar .e-tool-input:focus,
@{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-tool-input:focus
{
    & when not (@skin= "material") and not (@skin="office-365"){
        .material-normal-box-shadow;
        .focus-border-color();
    }
}
@{e-widget}.e-fe-dialog input.e-fe-dialog-text{
    & when (@skin= "material") {
        box-shadow: none;
        border-color: fade(@base-font-color, 12%);
    }
}
@{e-widget}.e-fe-dialog input.e-fe-dialog-text:hover, @{e-widget}.e-fe-dialog input.e-fe-dialog-text:focus {
    & when not (@skin= "material") and not (@skin="office-365"){
        .material-normal-box-shadow;
        .focus-border-color();
    }
}
@{e-widget}.e-fe-dialog input.e-fe-dialog-text:focus{
    & when (@skin= "material") {
        box-shadow: none;
        border-color: @accent-color;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar > ul > li .e-split {
    & when not (@skin= "material") and not (@skin="office-365"){
        .material-file-explorer-splitbtn-radius;
    }
}
@{e-widget}.e-fileexplorer .e-statusbar .e-button.e-btn:after {
    & when (@skin= "material") {
        background-color: fade(@accent-color, 38%);
    } 
}

@{e-widget}.e-fileexplorer .e-tile-wrapper .e-fe-selection-rect, @{e-widget}.e-fileexplorer .e-gridcontent .e-fe-selection-rect {

    & when (@skin= "high-contrast-01") {
        border: 1px solid @active-border-color;
    }

    & when (@skin= "high-contrast-02") {
        border: 1px solid @active-border-color;
    }

    & when (@skin= "material") {
        border: 1px solid @accent-color;
    }

    & when not (@skin= "high-contrast-01") and not (@skin= "high-contrast-02") and not (@skin= "material") {
        border: 1px solid @active-bg-stcolor;
    }

    .mouseselection-stylefor-fileexplorer();
}

@{e-widget}.e-fileexplorer.e-ie8 .e-tile-wrapper .e-fe-selection-rect.e-active, @{e-widget}.e-fileexplorer.e-ie8 .e-gridcontent .e-fe-selection-rect.e-active {
    background-color: @active-bg-stcolor;
}

@{e-widget}.e-fileexplorer .e-toolbar .e-tool-input:focus, @{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-tool-input:focus, @{e-widget}.e-fe-dialog input.e-fe-dialog-text:focus {
    & when (@skin= "office-365") {
        border-color: @theme-primary;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar .e-tool-input:hover, @{e-widget}.e-fe-toolbar.e-responsive-toolbar .e-tool-input:hover, @{e-widget}.e-fe-dialog input.e-fe-dialog-text:hover {
    & when (@skin= "office-365") {
        border-color: @neutral-secondary-alt;
    }
}

@{e-widget}.e-fe-dialog input.e-fe-dialog-text {
    & when (@skin= "office-365") {
        border-color: @neutral-tertiary-alt;
    }
}

@{e-widget}.e-fileexplorer input:not(.e-textbox), @{e-widget}.e-fileexplorer .e-grid .e-headercelldiv, @{e-widget}.e-fileexplorer .e-grid .e-gridcontent tr, @{e-widget}.e-fileexplorer .e-tileview .e-tilenode .e-name, @{e-widget} input.e-fe-dialog-text:not(.e-textbox), @{e-widget}.e-fe-toolbar.e-responsive-toolbar input {
    & when (@skin= "office-365") {
        color: @neutral-light-font;
    }
}

@{e-widget}.e-fileexplorer .e-statusbar .e-switchView .e-button.e-active:focus, @{e-widget}.e-fileexplorer .e-statusbar .e-switchView .e-button.e-active:focus:hover {
    & when (@skin= "office-365") {
        background-color: @theme-lighter;
    }
}

@{e-widget}.e-fileexplorer .e-statusbar .e-switchView .e-active.e-btn.e-select .e-icon {
    & when (@skin= "office-365") {
        color: @theme-light-font;
    }
}

@{e-widget}.e-fileexplorer .e-statusbar .e-btn.e-select:hover .e-icon {
    & when (@skin= "office-365") {
        color: @neutral-dark;
    }
}

@{e-widget}.e-fileexplorer .e-switchGridView.e-button.e-active {
    & when (@skin= "office-365") {
        background-color: @theme-lighter;
    }
}

@{e-widget}.e-fileexplorer .e-switchGridView.e-button.e-active .e-icon {
    & when (@skin= "office-365") {
        color: @theme-light-font;
    }
}

@{e-widget}.e-fileexplorer .e-toolbar .e-split.e-widget .e-btn.e-select:active .e-icon,
@{e-widget}.e-fe-toolbar .e-split.e-widget .e-btn.e-select:active .e-icon {
    & when (@skin= "office-365") {
        color: @neutral-dark;
    }
}


/*------------DatePicker themes -------------*/
@{e-widget}.e-datepicker table td.e-disable,
@{e-widget}.e-datepicker.e-dp-restrict-show table td.e-hidedate,@{e-widget}.e-datepicker .e-footer.e-footer-disable  {
    opacity: 1;
    color: @disable-datepicker-text;
    visibility: visible;
    cursor:default;
}

@{e-widget}.e-datepicker table td.e-hidedate {
    visibility: hidden;
}

@{e-widget}.e-datepicker:focus {
    outline: none;
}
@{e-widget}.e-datewidget .e-in-wrap {
    border-color: @content-border-color;

    & when (@skin= "material") {
        /*material*/
        border-width: 0 0 1px 0;
        border-color: fade(@base-font-color,12%);
    }
}

@{e-widget}.e-datewidget .e-in-wrap:before, @{e-widget}.e-datewidget .e-in-wrap:after {
    & when (@skin= "material") {
        background: @accent-color;
    }
}

@{e-widget}.e-datewidget.e-widget:hover .e-in-wrap {
    & when (@skin= "office-365") {
       border-color:@neutral-secondary-alt;
    }
    & when not (@skin= "office-365") {
        /*other*/
    .focus-border-color();
    }
}

@{e-widget}.e-datewidget.e-disable:hover .e-in-wrap {
    & when (@skin = "office-365") {
        border-color: @neutral-tertiary-alt;
    }
}

@{e-widget}.e-datewidget.e-focus .e-in-wrap,@{e-widget}.e-datewidget.e-focus .e-in-wrap:hover {
    & when (@skin= "material") {
        /*material*/
        box-shadow: none;
    }

    & when not (@skin= "material") {
        /*other*/
        .focus-border-color();
        box-shadow: 0 0 @shadow-bg-size @bs-shadow-bg-color;
    }
}

@{e-widget}.e-datewidget.e-widget .e-select:active:hover {
    & when (@skin= "office-365") {
        background-color: @theme-primary;
        color: @neutral-white;
    }
}

@{e-widget}.e-datewidget .e-select, @{e-widget}.e-datewidget.e-rtl .e-select, @{e-widget}.e-ntouch.e-datewidget .e-disable.e-select:hover {
    & when (@skin= "material") {
        /*material*/
        background-color: @content-bg-color;
        color: fade(@base-font-color,54%);
    }

    & when (@skin= "office-365") {
        /*office 365*/
        background-color: @neutral-white;
        color: @neutral-light-font;
    }
    & when not (@skin = "material") and not (@skin = "office-365") {
        /*other*/
        .bs-default-gradient();
        border-color: @content-border-color;
        color: @default-icon-color;
        .border-selection();
    }
}

@{e-widget}.e-datewidget .e-select, @{e-widget}.e-datewidget.e-rtl .e-select, @{e-widget}.e-ntouch.e-datewidget .e-disable.e-select:hover {
    .office-button-bg-color();
}

@{e-widget}.e-ntouch.e-datewidget .e-select:hover {
    & when (@skin= "material") {
        /*material*/
        background-color: @content-bg-color;
        color: fade(@base-font-color,54%);
        border-color: @content-border-color;
    }

    & when (@skin= "office-365") {
        /*material*/
        background-color: @neutral-light;
        color: @theme-light-font;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        .hover-gradient();
        color: @hover-icon-color;
        border-color: @content-border-color;
    }
}

@{e-widget}.e-datewidget .e-select.e-active {
    .active-gradient();
    border-color: @active-bg-stcolor;
}

@{e-widget}.e-datewidget .e-input {
    background-color: @content-bg-color;

    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,87%);
        font-size: 13px;
    }

    & when (@skin= "office-365") {
        /*material*/
        color: @theme-light-font;
        font-size: 14px;
        font-weight: 400;
    }

    & when not (@skin= "material") and not (@skin= "material") {
        /*other*/
        color: @content-font-color;
    }
}

@{e-widget}.e-datepicker table td.other-month,
@{e-widget}.e-datepicker .e-allyear-first,
@{e-widget}.e-datepicker .e-allyear-last,
@{e-widget}.e-datepicker .e-year-first,
@{e-widget}.e-datepicker .e-year-last {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,38%);
    }

    & when (@skin= "office-365") {
        /*material*/
        color: #adadad; // need to add variable in office-365 defn file.
    }


    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        color: @active-bg-stcolor;
    }
}

@{e-widget}.e-datepicker table td.e-dp-weekend {
    color: @error-font-color;
}

@{e-widget}.e-datepicker.e-calendar {
    & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
        font-size: 12px;
        width: 308px;
        padding: 0 10px 10px 10px;
    }

    & when (@skin= "office-365") {
        /*material*/
        padding: 10px;
        font-size: 12px;
        font-weight: 600;
    }

    border-color: @content-border-color;
    background-color: @content-bg-color;
}

@{e-widget}.e-datepicker .e-header, @{e-widget}.e-datetime-popup .e-timecontainer .e-header {
    .header-gradient();
    font-weight: @header-font-weight;

    & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
        color: fade(@base-font-color,87%);
        border-bottom: 0;
        font-size: @header-font-size;
    }
     & when (@skin= "office-365") {
        font-weight: 300;
        color: @theme-light-font;
        font-size: @header-font-size;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        border-bottom: @border-size @border-type @header-border-color;
        font-size: @header-font-size;
        color: @header-font-color;
    }

   
}

@{e-widget}.e-datepicker .e-header:hover > span {
    color: @hover-font-color;
}

@{e-widget}.e-datepicker .e-footer {
    & when (@skin= "material") {
        /*material*/
        color: @accent-color;
        text-transform: uppercase;
        border: none;
        width: 94%;
    }

    & when (@skin= "office-365") {
        /*material*/
        color: @theme-primary;
        font-size: 14px;
        font-weight: 400;
        width:20%;
        float: right;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        color: @default-font-color;
        border: @border-size @border-type transparent;
    }
}

@{e-widget}.e-datepicker .e-footer.e-btn.e-select {
    & when not (@skin= "material") {
        /*other*/
        background: transparent;
        width: 100%;
    }
}

@{e-widget}.e-ntouch.e-datepicker .e-footer:hover {
    & when (@skin= "material") {
        /*material*/
        color: @accent-color;
        border: none;
        background-color: fade(@base-font-color,12%);
        border-radius: 0px;
        box-shadow: none;
    }

    & when (@skin= "office-365") {
        /*material*/
        border: none;
        box-shadow: none;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        .hover-gradient();
        color: @hover-font-color;
        border: @border-size @border-type @hover-border-color;
    }

    .transparent-border();
}

@{e-widget}.e-datepicker .e-text {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,87%);
    }

    & when (@skin= "office-365") {
        /*material*/
        color: @neutral-light-font-alt;
        font-weight: 300;
        font-size: 17px;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        color: @header-font-color;
    }
}

@{e-widget}.e-datepicker .e-week-header, @{e-widget}.e-ntouch.e-datepicker .e-week-header:hover {
    .default-gradient();

    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,38%);
        background: @content-bg-color;
    }

    & when (@skin= "office-365") {
        /*material*/
        color: @neutral-light-font;
        background: transparent;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        color: @default-font-color;
    }

    border-bottom: @border-size @border-type transparent;
}

@{e-widget}.e-ntouch.e-datepicker table td:hover,@{e-widget}.e-datepicker td.e-state-hover, @{e-widget}.e-ntouch.e-datepicker .current-month.e-state-default.e-special-day:hover {
    .hover-gradient();
    border-color: @hover-border-color;
    box-shadow: 0 0 0 transparent inset;

    & when (@skin= "material") {
        /*material*/
        background: transparent;
        color: fade(@base-font-color,87%);
        border-radius: 50%;
    }

    & when (@skin= "office-365") {
        /*office-365*/
        color: @theme-light-font;
        background-color: transparent;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        color: @hover-font-color;
        border-radius: 4px;
    }
}
@{e-widget}.e-datepicker table td.e-weeknumber,@{e-widget}.e-datepicker table td.e-weeknumber:hover{
    background:transparent;
}

@{e-widget}.e-datepicker td.e-state-hover {
    & when (@skin= "material") {
        /*material*/
        color: @accent-color;
        background: transparent;
    }
}

@{e-widget}.e-ntouch.e-datepicker table td.e-disable:hover,
@{e-widget}.e-ntouch.e-datepicker table td.e-hidedate:hover {
    background: none;
    border-color: none;

    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,38%);
    }

    & when not (@skin= "material") {
        /*other*/
        color: @disable-datepicker-text;
    }
}

@{e-widget}.e-datepicker .e-datepicker-days .e-selected-days {
    .active-gradient();
    border-radius: 0px;
    box-shadow: 0 0 0 transparent inset; /*For flicker issue */
    color: @active-font-color;
}

.e-work-week .e-week-day, .e-selected-week, .e-selected-month {
    background-color: @default-bg-stcolor;
    color: @default-font-color;
}

@{e-widget}.e-datepicker .e-header .e-icon {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,54%);
    }

    & when (@skin= "office-365") {
        /*material*/
        color: @neutral-light-font;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        color: @hover-icon-color;
    }
}

@{e-widget}.e-ntouch.e-datepicker .e-header .e-prev.e-disable .e-arrow-sans-left:hover,
@{e-widget}.e-ntouch.e-datepicker .e-header .e-next.e-disable .e-arrow-sans-right:hover {
    background-color: transparent;
}

@{e-widget}.e-ntouch.e-datepicker .e-arrow-sans-left:hover,
@{e-widget}.e-ntouch.e-datepicker .e-arrow-sans-right:hover {
    & when (@skin= "material"), (@skin= "office-365") {
        /*material*/
        background-color: @content-bg-color;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        background-color: @hover-bg-stcolor;
        border-radius: 4px 4px 4px 4px;
    }

    .material-borderRadius-datepicker();
    border-color: @hover-border-color;
}

@{e-widget}.e-ntouch.e-datepicker .e-disable.e-arrow-sans-left:hover,
@{e-widget}.e-ntouch.e-datepicker .e-disable.e-arrow-sans-right:hover {
    background: none;
    border-radius: 0px;
    cursor: default;
    border-color: @hover-border-color;
}


@{e-widget}.e-datepicker .e-state-default{
    & when not (@skin="material") and not (@skin="office-365") {
        color: @content-font-color;
        font-weight: @content-font-weight;
    }

    & when (@skin="material") {
        color: fade(@base-font-color,87%);
        font-size:14px;
    }

    & when (@skin="office-365") {
        color: @theme-light-font;
    }
}

@{e-widget}.e-datepicker table td.e-weeknumber, @{e-widget}.e-datepicker table td.e-weeknumber:hover {
    & when (@skin="material") {
        color: fade(@grey-light-font,54%);
    }
    & when (@skin="office-365") {
        color: fade(@theme-light-font,54%);
    }
}

@{e-widget}.e-datepicker .today {
    & when (@skin= "material") {
        /*material*/
        color: @accent-color;
        background: @content-bg-color;
        box-shadow: 0 0 0 transparent inset;
        .material-dateCircle-datepicker();
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        color: @default-font-color;
        background-color: @default-bg-stcolor;
        border-radius: 4px;
    }

    & when (@skin= "office-365") {
        /*material*/
        color: @theme-light-font;
        background-color: transparent;
    }
}

@{e-widget}.e-datepicker .today:before,@{e-widget}.e-datepicker .today.e-state-hover::before {
    & when (@skin= "office-365") {
        background-color: @theme-lighter;
        border:0px;
    }
}

@{e-widget}.e-datepicker .other-month.e-active {
    background: none;
}

@{e-widget}.e-datepicker .e-active,@{e-widget}.e-datepicker .e-active:hover, @{e-widget}.e-datepicker .e-active.e-state-hover {
    .active-gradient();
    box-shadow: 0 0 0 transparent inset; /*For flicker issue */
    color: @active-font-color;
    border-color: @active-border-color;

    & when not (@skin= "office-365") {
        border-radius: 4px;
    }
    & when (@skin= "material"){
        color: @accent-font-color;
    }
    & when (@skin= "material"), (@skin= "office-365") {
        /*material*/
        background: transparent;
    }
}

@{e-widget}.e-ntouch.e-datepicker table td.other-month:hover,
@{e-widget}.e-ntouch.e-datepicker .e-allyear-first:hover,
@{e-widget}.e-ntouch.e-datepicker .e-allyear-last:hover,
@{e-widget}.e-ntouch.e-datepicker .e-year-first:hover,
@{e-widget}.e-ntouch.e-datepicker .e-year-last:hover {
    background-color: transparent;
    border-color: @hover-border-color;

    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,38%);
    }

    & when (@skin= "office-365") {
        /*material*/
        color: #adadad;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        //color: fade(@base-font-color,38%);
    }
}
/*Disable State Styles*/

@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable .e-footer:hover {
    background: none;
    color: @default-font-color;
    border: @border-size @border-type transparent;
}

@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable table td:hover,
@{e-widget}.e-datepicker.e-popup.e-disable td.e-state-hover,
@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable .current-month.e-state-default.e-special-day:hover {
    background: none;
    color: @content-font-color;
    font-weight: @content-font-weight;
    border-radius: 0px;
    border-color: @hover-border-color;
}

@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable .e-arrow-sans-left:hover,
@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable .e-arrow-sans-right:hover {
    background: none;
    border-radius: 0px;
    border-color: @hover-border-color;
}

@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable table td.e-disable:hover,
@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable table td.e-hidedate:hover,
@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable .e-disable.e-select:hover,
@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable .e-hidedate.e-select:hover {
    background: none;
    border-color: none;
    color: @disable-datepicker-text;
}

@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable table td.other-month:hover,
@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable .e-allyear-first:hover,
@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable .e-allyear-last:hover,
@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable .e-year-first:hover,
@{e-widget}.e-ntouch.e-datepicker.e-popup.e-disable .e-year-last:hover {
    color: @bs-header-bg-stcolor;
}

@{e-widget}.e-ntouch.e-datepicker .e-datepicker-headertext:hover {
    & when (@skin = "office-365") {
        background-color: transparent;
    }

    & when not (@skin = "office-365") and not (@skin = "material") {
        background: @hover-bg-stcolor;
    }
}

@{e-widget}.e-ntouch.e-datepicker.e-disable .e-datepicker-headertext:hover {
    background: none;
}

@{e-widget}.e-datepicker::-webkit-input-placeholder {
    color: @content-font-color;
}

@{e-widget}.e-datepicker:-ms-input-placeholder {
    color: @content-font-color;
}

@{e-widget}.e-datepicker::-moz-placeholder {
    color: @content-font-color;
}

@{e-widget}.e-datepicker:-moz-placeholder {
    color: @content-font-color;
}

@{e-widget}.e-ntouch.e-datepicker .e-datepicker-headertext:hover {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,87%);
        background: @content-bg-color;
    }
}

@{e-widget}.e-datepicker .e-datepicker-days .e-state-default {
    .material-dateDimension-datepicker();
}

@{e-widget}.e-datepicker .e-datepicker-months td, @{e-widget}.e-datepicker .e-datepicker-years td {
    & when (@skin= "material") {
        /*material*/
        height: 50px;
        position: relative;
        z-index: 1;
    }

    & when (@skin= "office-365") {
        /*material*/
        height: 40px;
        position: relative;
        z-index: 1;
        padding-bottom: 15px;
    }
}

@{e-widget}.e-datepicker .e-datepicker-allyears td {
    .material-monthDimension-datepicker();
}

@{e-widget}.e-datepicker .e-datepicker-months td:hover::before, @{e-widget}.e-datepicker .e-datepicker-years td:hover::before {
    & when (@skin= "material") {
        /*material*/
        top: 5px;
        left: 18px;
    }
}

@{e-widget}.e-datepicker .e-header .e-next, @{e-widget}.e-datepicker .e-header .e-prev {
    .material-icon-alignment();
    .material-datePicker-header();
}

@{e-widget}.e-datepicker .e-header .e-next:hover, @{e-widget}.e-datepicker .e-header .e-prev:hover {
    & when (@skin = "office-365") {
        color: @neutral-light-font-alt;
    }
}

@{e-widget}.e-datepicker .e-header .e-prev {
    .material-icon-alignment();
}

@{e-widget}.e-datepicker .e-header .e-text {
    .material-datePicker-headerText();
}

@{e-widget}.e-datepicker .e-header .e-text .e-datepicker-headertext {
    .material-headerText-padding();
}

@{e-widget}.e-datepicker .e-header .e-next {
    .material-rightIcon-alignment();
}

@{e-widget}.e-datepicker .e-icon {
    .material-icon-dimension();
}

@{e-widget}.e-datepicker .e-header .e-icon:before {
    .material-icon-position();
}

@{e-widget}.e-datepicker .e-header .e-text {
     & when (@skin= "material") {
        /*material*/
        width:79%
    }

    & when (@skin= "office-365") {
        /*office-365*/
        width:73%;
    }
}
@{e-widget}.e-datepicker.e-headerlong .e-header .e-text {
     & when (@skin= "material") {
        /*material*/
        width:85%
    }

    & when (@skin= "office-365") {
        /*office-365*/
        width:85%;
    }
}

@{e-widget}.e-datepicker.e-rtl .e-header .e-text {
    .material-header-RTL();
}

@{e-widget}.e-datepicker.e-rtl .e-header .e-prev {
    .material-prevIcon-RTL();
}

@{e-widget}.e-datepicker.e-rtl .e-header .e-next {
    .material-nextIcon-RTL();
}

@{e-widget}.e-datewidget.e-active .e-select {
    & when (@skin= "material") {
        /*material*/
        color: @accent-color;
    }
}

@{e-widget}.e-datewidget.e-active .e-select:hover {
    & when (@skin= "material") {
        /*material*/
        color: @accent-color;
    }
}

@{e-widget}.e-datepicker .today:hover {
    & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
    }
}

@{e-widget}.e-ntouch.e-datepicker table td:hover::before,
@{e-widget}.e-ntouch.e-datepicker .current-month.e-state-default.e-special-day:hover::before {
    & when (@skin= "material") {
        /*material*/
        border-radius: 50%;
        background: @grey-200;
        color: @base-font-color;
    }

    & when (@skin= "office-365") {
        background-color: @neutral-light;
        color: @neutral-light-font;
        border:0px;
    }
}

@{e-widget}.e-datepicker table td::before {
    & when (@skin= "material") {
        /*material*/
        width: 40px;
        height: 40px;
        content: "";
        position: absolute;
        left: 2px;
        top: 2px;
        z-index: -1;
    }

    & when (@skin= "office-365") {
        /*office-365*/
        width: 30px;
        height: 30px;
        content: "";
        position: absolute;
        left: 1px;
        top: 5px;
        z-index: -1;
    }
}
@{e-widget}.e-datepicker table td.e-weeknumber:hover::before {
     & when (@skin = "material") {
         content: none;
     }
     & when  (@skin = "office-365") {
         content: none;
    }
}
@{e-widget}.e-datepicker.e-headerlong .e-datepicker-days .e-active::before, @{e-widget}.e-datepicker.e-headerlong .e-datepicker-days .e-active .e-state-hover::before,@{e-widget}.e-datepicker.e-headerlong table .e-datepicker-days td::before{
    & when (@skin= "office-365") {
        left:14px;
    }
     & when (@skin= "material") {
         left:10px;
     }
}
@{e-widget}.e-datepicker.e-headerlong table .e-datepicker-allyears td::before{
    & when (@skin= "office-365") {
        width:75px;
    }
     & when (@skin= "office-365") {
         left:14px;
     }
}

@{e-widget}.e-datepicker table .e-datepicker-months td::before, @{e-widget}.e-datepicker table .e-datepicker-years td::before {
    & when (@skin= "office-365") {
        /*material*/
        width: 45px;
        height: 45px;
        left: 6px;
        top: -2px;
        padding-bottom: 0;
        background-color: @neutral-lighter;
    }
}
@{e-widget}.e-datepicker.e-headerlong table .e-datepicker-months td::before, @{e-widget}.e-datepicker.e-headerlong table .e-datepicker-years td::before {
    & when (@skin= "office-365") {
        left: 29px;
    }
}
@{e-widget}.e-datepicker.e-headerlong e-datepicker-months .e-active::before, @{e-widget}.e-datepicker.e-headerlong e-datepicker-months .e-active .e-state-hover::before, @{e-widget}.e-datepicker.e-headerlong e-datepicker-months table td::before{
     & when (@skin= "office-365") {
        left: 29px;
    }
}

@{e-widget}.e-datepicker.e-icons .e-datepicker-months td.e-state-hover::before, @{e-widget}.e-datepicker.e-icons .e-datepicker-years td.e-state-hover::before, @{e-widget}.e-datepicker.e-icons .e-datepicker-years td.e-state-default::before, @{e-widget}.e-datepicker.e-icons .e-datepicker-months td.e-state-default::before, @{e-widget}.e-datepicker.e-icons .e-datepicker-years td.e-current-year::before
{
    & when (@skin= "office-365")
    {
        left: 16px;
    }
}


@{e-widget}.e-datepicker table .e-datepicker-months td.e-active::before, @{e-widget}.e-datepicker table .e-datepicker-years td.e-active::before,
@{e-widget}.e-datepicker table .e-datepicker-months td.e-active.e-state-hover::before, @{e-widget}.e-datepicker table .e-datepicker-years td.e-active.e-state-hover::before {
    & when (@skin= "office-365") {
        background-color: @theme-primary;
    }
}

@{e-widget}.e-datepicker table .e-datepicker-months td.e-active:hover::before, @{e-widget}.e-datepicker table .e-datepicker-years td.e-active:hover::before,
@{e-widget}.e-datepicker table .e-datepicker-allyears td.e-active:hover::before {
    & when (@skin= "office-365") {
        background-color: @neutral-light;
    }
}

@{e-widget}.e-datepicker table .e-datepicker-allyears td::before {
    & when (@skin= "office-365") {
        /*material*/
        width: 50px;
        height: 50px;
        left: 3px;
        top: 6px;
        background-color: @neutral-lighter;
    }
}
@{e-widget}.e-datepicker table .e-datepicker-allyears td.e-active::before{
   & when (@skin= "office-365") {
        background-color: @theme-primary;
    } 
}
@{e-widget}.e-datepicker .e-active::before, @{e-widget}.e-datepicker .e-active .e-state-hover::before {
    & when (@skin= "material") {
        /*material*/
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: @accent-color;
        content: "";
        position: absolute;
        left: 2px;
        top: 2px;
        z-index: -1;
    }

    & when (@skin= "office-365") {
        /*material*/
        background: #0078d7;
        content: "";
        position: absolute;
        left: 2px;
        top: 5px;
        z-index: -1;
        height: 30px;
        width: 30px;
        color: white;
        background: @theme-primary;
    }
}
@{e-widget}.e-datepicker.e-headerlong table td.e-current-allyear::before{
     & when (@skin= "material") {
         left:14px;
     }
}
@{e-widget}.e-datepicker.e-icons .e-active::before, @{e-widget}.e-datepicker.e-icons .e-active .e-state-hover::before,
@{e-widget}.e-datepicker.e-icons td::before, @{e-widget}.e-datepicker.e-icons td.e-state-hover::before {
    & when (@skin= "material") {
        left: 2px;
    }

    & when (@skin= "office-365") {
        left: 7px;
    }
}

@{e-widget}.e-datepicker.e-icons .e-datepicker-allyears .e-active::before, @{e-widget}.e-datepicker.e-icons .e-active .e-datepicker-allyears .e-state-hover::before,
@{e-widget}.e-datepicker.e-icons .e-datepicker-allyears td::before, @{e-widget}.e-datepicker.e-icons .e-datepicker-allyears td.e-state-hover::before,
@{e-widget}.e-datepicker.e-icons .e-datepicker-allyears td.e-current-allyear::before {    
    & when (@skin= "office-365") {
        left: 13px;
    }
}

@{e-widget}.e-datepicker.e-icons .e-datepicker-allyears td
{
    & when (@skin= "office-365") {
        word-break: break-word;
        white-space: pre;
    }
}

@{e-widget}.e-datepicker td.e-state-hover::before {
    & when (@skin= "material") {
        /*material*/
        border-radius: 50%;
    }
    & when (@skin= "office-365") {
        /*office-365*/
       border:1px solid @theme-primary;
    }
}

@{e-widget}.e-datepicker .e-active::before,@{e-widget}.e-datepicker .e-active.e-state-hover::before {
    & when (@skin= "material") {
        /*material*/
        background: @accent-color;
        border-radius: 50%;
    }

    & when (@skin= "office-365") {
        /*office-365*/
        background-color: @theme-primary;
    }
}

@{e-widget}.e-ntouch.e-datepicker table td.e-disable:hover::before,
@{e-widget}.e-ntouch.e-datepicker table td.e-hidedate:hover::before {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,38%);
    }
    & when (@skin= "office-365") {
        /*office-365*/
        color: @neutral-light-font;
        
    }
}
@{e-widget}.e-datepicker table td.e-hidedate:hover::before{
    & when (@skin= "material") {
        /*material*/
    background: none;
    }
    & when (@skin= "office-365") {
        /*office-365*/
    background: none;
    }
}
@{e-widget}.e-datepicker .e-datepicker-months td.e-active::before,
@{e-widget}.e-datepicker .e-datepicker-years td.e-active::before {
    & when (@skin= "material") {
        /*material*/
        top: 5px;
        left: 20px;
    }
}

@{e-widget}.e-datepicker .e-datepicker-months td.e-state-hover::before,
@{e-widget}.e-datepicker .e-datepicker-years td.e-state-hover::before {
    & when (@skin= "material") {
        /*material*/
        top: 5px;
        left: 20px;
    }
}
@{e-widget}.e-datepicker.e-headerlong .e-datepicker-months td::before,
@{e-widget}.e-datepicker.e-headerlong .e-datepicker-years td::before {
    & when (@skin= "material") {
        left:32px;
    }
}

@{e-widget}.e-datewidget .e-input::selection, @{e-widget}.e-datewidget .e-input::selection,
@{e-widget}.e-datewidget .e-input::selection, @{e-widget}.e-datewidget .e-input::selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
    }

    & when (@skin= "office-365") {
        background: @theme-primary;
        color: @widget-bg-color;
    }
}

@{e-widget}.e-datewidget .e-input::-moz-selection, @{e-widget}.e-datewidget .e-input::-moz-selection,
@{e-widget}.e-datewidget .e-input::-moz-selection, @{e-widget}.e-datewidget .e-input::-moz-selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
    }

    & when (@skin= "office-365") {
        background: @theme-primary;
        color: @widget-bg-color;
    }
}

@{e-widget}.e-datepicker.e-popup .e-header .e-prev:not(:active):after, @{e-widget}.e-datepicker.e-popup .e-header .e-next:not(:active):after {
    & when (@skin="material") {
        background-color: fade(@base-font-color,12%);
    }
}

@{e-widget}.e-datepicker.e-popup .e-header .e-prev.e-disable:not(:active):after, @{e-widget}.e-datepicker.e-popup .e-header .e-next.e-disable:not(:active):after {
    & when (@skin="material") {
        background-color: transparent;
    }
}

@{e-widget}.e-datepicker .e-footer.e-btn.e-select.e-flat:not(:active):after {
    & when (@skin= "material") {
        background-color: fade(@accent-color,12%);
    }
}

@{e-widget}.e-datepicker .e-datepicker-days td.e-active:not(:active):after {
    & when (@skin= "material") {
        background: fade(@accent-color,50%);
    }
}

@{e-widget}.e-datepicker .e-datepicker-days td.e-active {
    & when (@skin= "material") {
        overflow: hidden;
        border-radius: 50%;
    }
}
@{e-widget}.e-datewidget.e-disable{
     & when not (@skin= "material") and not (@skin="office-365"){
    background-color: @disable-control-background-color;
    border-color:@disable-control-border-color;
    opacity:1;
    }
}

@{e-widget}.e-datewidget .e-select.e-disable,
@{e-widget}.e-datewidget.e-disable .e-select:hover,
@{e-widget}.e-ntouch.e-datewidget .e-disable.e-select:hover{
     & when not (@skin= "material") and not (@skin="office-365"){
    background-color: @disable-icon-bg-color;
    }
}
@{e-widget}.e-datepicker .e-footer:active{
    & when (@skin= "office-365") {
	        color: @neutral-light-font-alt;
        }
}
@{e-widget}.e-datepicker .e-footer.e-btn.e-select:focus{
     & when (@skin= "office-365") {
         box-shadow:none;
         border:1px solid @theme-primary;
         }
}
@{e-widget}.e-datepicker.e-popup .e-dp-viewallyears .e-datepicker-allyears td.e-current-allyear.e-active::before,@{e-widget}.e-datepicker.e-popup .e-dp-viewallyears .e-datepicker-allyears td.e-current-allyear:hover::before,
@{e-widget}.e-datepicker.e-popup .e-dp-viewallyears .e-datepicker-allyears td.e-current-allyear::before {
    & when (@skin= "material") { 
        /*material*/
        content: "";
        width: 75px;
        height: 75px;
        z-index: -1;
    }
}


/*------------------------------------- DateTimePicker -------------------------------------------*/
@{e-widget}.e-datetime-wrap .e-input, @{e-widget}.e-datetime-popup {
    background-color: @content-bg-color;
    font-family: @font-family;
    font-weight: @content-font-weight;

    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,87%);
    }

    & when not (@skin= "material") {
        /*other*/
        color: @content-font-color;
    }
}

@{e-widget}.e-datetime-popup.e-widget .e-ntouch.e-timepicker table td:hover, @{e-widget}.e-datetime-popup.e-widget .e-timepicker table td.e-state-hover {
    & when (@skin= "office-365") {
        border-radius: 0;
    }
}

@{e-widget}.e-datetime-wrap .e-input {
    & when (@skin= "material") {
        /*material*/
        font-size: 13px;
    }
}

@{e-widget}.e-datetime-wrap.e-widget .e-select:active:hover {
    & when (@skin= "office-365") {
        background-color: @theme-primary;
        color: @theme-primary-font;
    }
}

@{e-widget}.e-datetime-wrap .e-in-wrap, @{e-widget}.e-datetime-popup,
@{e-widget}.e-datetime-popup .e-timecontainer .e-header {
    border-color: @content-border-color;
}

@{e-widget}.e-datetime-wrap.e-widget:hover .e-in-wrap {
     & when (@skin= "office-365") {
       border-color:@neutral-secondary-alt;
    }
    & when not (@skin= "office-365") {
    .focus-border-color();
    }
}

@{e-widget}.e-datetime-wrap.e-widget.e-disable:hover .e-in-wrap {
    & when (@skin = "office-365"){
        border-color: @content-border-color;
    }
}

@{e-widget}.e-datetime-wrap.e-focus .e-in-wrap, @{e-widget}.e-datetime-popup .e-focus {
    & when (@skin= "material") and (@skin= "office-365") {
        /*material*/
        box-shadow: none;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        box-shadow: 0 0 @shadow-bg-size @bs-shadow-bg-color;
    }
}

@{e-widget}.e-datetime-wrap.e-focus .e-in-wrap,@{e-widget}.e-datetime-wrap.e-focus .e-in-wrap:hover {
    & when not (@skin= "material") {
        .focus-border-color();
    }
}

@{e-widget}.e-datetime-popup .e-focus .e-in-wrap {
    .focus-border-color();
}

@{e-widget}.e-datetime-wrap .e-select, @{e-widget}.e-datetime-wrap.e-rtl .e-select,
@{e-widget}.e-ntouch.e-datetime-wrap .e-disable.e-select:hover {
    .bs-default-gradient();
    border-color: @content-border-color;
    .border-selection();

    & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
        color: fade(@base-font-color,54%);
    }
    & when (@skin= "office-365") {
        /*office 365*/
        background-color: @neutral-white;
        color: @neutral-light-font;
    }
     & when not (@skin = "material") and not (@skin = "office-365") {
        /*other*/
        .office-button-bg-color();
        color: @default-icon-color;
    }
}

@{e-widget}.e-ntouch.e-datetime-wrap .e-select:hover {
    & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
    }

    & when not (@skin= "material") {
        /*other*/
        .hover-gradient();
        color: @hover-icon-color;
    }
}

@{e-widget}.e-datetime-popup .e-dt-button {
    & when (@skin= "material") {
        border: none;
        color: @accent-color;
        background: @content-bg-color;
        text-transform: uppercase;
        font-size: 14px;
    }

    & when (@skin= "office-365") {
        border: none;
        color: @theme-primary;
        background: none;
        font-size: 14px;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        .bs-default-gradient();
        border: @border-size @border-type @content-border-color;
        .switch-datetimepick-button-text;
        color: @default-font-color;
    }
}

@{e-widget}.e-datetime-popup .e-dt-button:active {
    & when (@skin= "material") {
        border-color: @content-bg-color;
        color: @accent-color;
        background: @content-bg-color;
    }

    & when not (@skin= "material") {
        .active-gradient();
        border-color: @active-border-color;
        color: @content-font-color;
    }
}

@{e-widget}.e-ntouch.e-datetime-popup .e-dt-button:hover {
    & when not (@skin= "material") and not (@skin= "office-365") {
        .hover-gradient();
        color: @hover-font-color;
        border-color: @hover-border-color;
    }
	
    & when (@skin= "office-365") {
        color: @theme-primary;
        border-color: @hover-border-color;
        background-color: transparent;
    }
}

@{e-widget}.e-timepicker.e-time-hours,
@{e-widget}.e-timepicker.e-time-minitues {
    border-color: @content-border-color;
    background-color: @content-bg-color;
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-mins-header,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-am,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm {
    & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
        color: fade(@base-font-color,87%);
    }

    & when not (@skin= "material") {
        /*other*/
        color: @header-font-color;
    }

    font-size: @header-font-size;
    font-weight: @header-font-weight;
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header:hover > span,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-mins-header:hover > span,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-am:hover > span,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm:hover > span {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,87%);
    }

    & when not (@skin= "material") {
        /*other*/
        color: @hover-font-color;
    }
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-mins-header:hover > span,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-am:hover > span,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm:hover > span {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,38%);
    }
}
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-am,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-mins-header{
    & when (@skin= "office-365") {
        /*material*/
       font-size:12px;
       font-weight:bold;
       color:@neutral-light-font;
    }
}
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header {
    .header-gradient();

    & when (@skin= "material") {
        /*material*/
        border-bottom: none;
        background: @content-bg-color;
        padding: 9px 0 9px 0;
    }

    & when (@skin= "office-365") {
        /*material*/
        border-bottom: none;
    }

   & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        border-bottom: @border-size @border-type @header-border-color;
    }
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm > .e-text {
    & when (@skin= "material") {
        /*material*/
        border-top: 0;
        padding-top: 12px;
    }
    & when (@skin= "office-365") {
        /*material*/
        border-top: 0;
        padding-top: 10px;
    }

   & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        border-top: @border-size @border-type @header-border-color;
    }
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm {
    & when (@skin= "material") {
        /*material*/
        border-top: 1px solid;
        border-color: fade(@base-font-color,12%);
    }
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-icon {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,54%);
    }

    & when not (@skin= "material") {
        /*other*/
        color: @hover-icon-color;
    }
}

.e-timepicker table td.e-active::before,
.e-timepicker table td.e-active.e-state-hover::before {
    border-color: @active-border-color;

    & when (@skin= "material") {
        /*material*/
        content: "";
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: 0;
        background-color: @accent-color;
        position: absolute;
    }
    & when (@skin= "office-365") {
        /*material*/
        content: "";
        width: 40px;
        height: 40px;
        box-shadow: 0;
        background-color: @theme-primary;
        position: absolute;
    }
}

.e-timepicker table td.e-active,
.e-timepicker table td.e-active.e-state-hover {
    & when (@skin= "material") {
        /*material*/
        color: @active-font-color;
    }
    & when (@skin= "office-365") {
        /*other*/
        color: @active-font-color;
    }
    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        .active-gradient();
        color: @active-font-color;
        border-color: @active-border-color;
        border-radius: 4px;
        box-shadow: 0 0 0 transparent inset; /*For flicker issue */
    }
}

.e-timepicker table td.e-active:hover{
     & when (@skin= "office-365") {
        /*other*/
        color: @content-font-color;
    }
}

.e-timepicker .e-state-default {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,87%);
    }

    & when not (@skin= "material") {
        /*other*/
        color: @content-font-color;
    }

    font-weight: @content-font-weight;
}

.e-ntouch.e-timepicker table td:hover::before,
.e-timepicker table td.e-state-hover::before {
    .hover-gradient();
    border-color: @hover-border-color;

    & when (@skin= "material") {
        /*material*/
        border-radius: 50%;
        box-shadow: none;
        width: 40px;
        height: 40px;
        line-height: 40px;
        display: inline-block;
    }
     & when (@skin= "office-365") {
        /*material*/
        box-shadow: none;
        width: 40px;
        height: 40px;
        line-height: 40px;
        display: inline-block;
    }
}

.e-ntouch.e-timepicker table td:hover,
.e-timepicker table td.e-state-hover {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,87%);
    }

    & when (@skin= "office-365") {
        /*material*/
        background: @content-bg-color;
        border: none;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        .hover-gradient();
        color: @hover-font-color;
        border-color: @hover-border-color;
        border-radius: 4px;
        box-shadow: 0 0 0 transparent inset;
    }
}

.e-ntouch.e-timepicker .e-hours-headertext:hover,
.e-ntouch.e-timepicker .e-minitues-headertext:hover {
    & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
    }
     & when (@skin= "office-365") {
        background: @neutral-white;
    }
     & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        background: @hover-bg-stcolor;
    }
}

.e-timepicker .e-footer {

    & when (@skin= "material") {
        /*material*/
        border: none;
        color: @default-font-color;
    }

    & when not (@skin= "material") {
        /*other*/
        border: @border-size @border-type transparent;
        color: @default-font-color;
    }
     & when (@skin= "office-365") {
        /*material*/
        border: none;
        color: @theme-primary;
    }
}

.e-ntouch.e-timepicker .e-footer:hover {
    & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
        border: none;
    }

    & when (@skin= "office-365") {
        /*material*/
        background: @content-bg-color;
        border: none;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        .hover-gradient();
        color: @hover-font-color;
        border: @border-size @border-type @hover-border-color;
        .transparent-border();
    }
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-footer {
    & when (@skin= "material") {
        /*material*/
        color: @accent-color;
        text-transform: uppercase;
    }
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-footer:hover {
    & when (@skin= "material") {
        /*material*/
        color: @accent-color;
        border: none;
        background-color: fade(@base-font-color,12%);
        border-radius: 0px;
        box-shadow: none;
    }
}

@{e-widget}.e-timepicker table td.e-disable {
    color: @disable-datepicker-text;
}

@{e-widget}.e-ntouch.e-timepicker table td.e-disable:hover {
    background: none;
    border-color: none;
    color: @disable-datepicker-text;
}

@{e-widget}.e-ntouch.e-timepicker .e-arrow-sans-left:hover,
@{e-widget}.e-ntouch.e-timepicker .e-arrow-sans-right:hover {
    & when (@skin= "material") {
        /*material*/
        background-color: @content-bg-color;
    }
     & when (@skin= "office-365") {
        /*material*/
        background-color: @neutral-white;
    }
     & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        background-color: @hover-bg-stcolor;
        border-radius: 4px 4px 4px 4px;
        border-color: @hover-border-color;
    }
}

@{e-widget}.e-ntouch.e-timepicker .e-disable.e-arrow-sans-left:hover,
@{e-widget}.e-ntouch.e-timepicker .e-disable.e-arrow-sans-right:hover {
    border-color: @hover-border-color;
}

@{e-widget}.e-ntouch.e-timepicker.e-popup.e-disable table td:hover,
@{e-widget}.e-timepicker.e-popup.e-disable td.e-state-hover {
    background: none;
    color: @content-font-color;
    font-weight: @content-font-weight;
    border-radius: 0px;
    border-color: @hover-border-color;
}

@{e-widget}.e-ntouch.e-timepicker.e-popup.e-disable .e-arrow-sans-left:hover,
@{e-widget}.e-ntouch.e-timepicker.e-popup.e-disable .e-arrow-sans-right:hover {
    border-color: @hover-border-color;
}

@{e-widget}.e-ntouch.e-timepicker.e-popup.e-disable .e-footer:hover {
    background: none;
    color: @default-font-color;
    border: @border-size @border-type transparent;
}

@{e-widget}.e-datetime-popup .e-dp-viewhours .e-timepicker-hours .e-state-default {
    .material-timeDimension-datepicker();
}

@{e-widget}.e-datetime-wrap .e-in-wrap {
    & when (@skin= "material") {
        /*material*/
        border-width: 0 0 1px 0;
        border-color: fade(@base-font-color,12%);
    }
}

@{e-widget}.e-datetime-popup .e-header-am + .e-dp-viewhours .e-timepicker-hours .e-state-default,
@{e-widget}.e-datetime-popup .e-header-pm + .e-dp-viewhours .e-timepicker-hours .e-state-default {
    .material-dateDimension-datepicker();
}

@{e-widget}.e-datetime-wrap .e-in-wrap:before, @{e-widget}.e-datetime-wrap .e-in-wrap:after {
    & when (@skin= "material") {
        background: @accent-color;
    }
}

@{e-widget}.e-datetime-wrap.e-focus .e-in-wrap {
    & when (@skin= "material") {
        /*material*/
        box-shadow: none;
    }
}

@{e-widget}.e-datetime-popup .e-dp-viewmins .e-timepicker-mins .e-state-default {
    .material-monthDimension-datepicker();
}

@{e-widget}.e-datetime-wrap .e-select {
    & when (@skin= "material") {
        /*material*/
        border-left: 0;
        width: 24px;
    }
}

@{e-widget}.e-ntouch.e-datetime-wrap.e-active .e-select:hover {
    & when (@skin= "material") {
        /*material*/
        color: @accent-color;
    }
}

@{e-widget}.e-ntouch.e-datetime-wrap.e-active .e-select {
    & when (@skin= "material") {
        /*material*/
        color: @accent-color;
    }
}

@{e-widget}.e-datetime-popup .e-time-popup {
    & when (@skin= "material") {
        /*material*/
        border-left: 1px solid;
        border-color: fade(@base-font-color,12%);
        box-shadow: none;
    }

    & when (@skin= "office-365") {
        /*material*/
        border-left: 1px solid;
        box-shadow: none;
        font-size: 12px;
    }
}

@{e-widget}.e-datetime-popup .e-time-popup.e-rtl {
    & when (@skin= "material") {
        /*material*/
        border-right: 1px solid;
        border-color: fade(@base-font-color,12%);
        box-shadow: none;
    }
}

@{e-widget}.e-datetime-popup .e-datepicker {
    & when (@skin= "material") {
        /*material*/
        box-shadow: none;
        padding: 0;
    }
    & when (@skin= "office-365") {
        /*material*/
        box-shadow: none;
        padding:10px 10px 10px 10px;
    }
}

@{e-widget}.e-datetime-popup .e-datepicker.e-calendar {
    & when (@skin= "material") and (@skin= "office-365") {
        border: none;
        padding: 0px 10px;
        box-shadow: none;
    }
}

@{e-widget}.e-datetime-popup .e-popup-container {
    & when (@skin= "material") {
        /*material*/
        padding: 0;
        border-bottom: 1px solid;
        border-color: fade(@base-font-color,12%);
    }

    & when (@skin= "office-365") {
        /*material*/
        padding: 0;
        border-bottom: 1px solid;
        border-color: @neutral-tertiary-alt;
    }
}

@{e-widget}.e-datetime-popup .e-timecontainer {
    & when (@skin= "office-365") {
        border-left: 1px solid @neutral-tertiary-alt;
    }
}

@{e-widget}.e-datetime-popup.e-rtl .e-timecontainer {
    & when (@skin= "office-365") {
        border-right: 1px solid @neutral-tertiary-alt;
    }
}


@{e-widget}.e-datetime-popup .e-button-container {
    & when (@skin= "material") {
        /*material*/
        padding: 5px 5px 5px;
    }
}

@{e-widget}.e-datetime-popup .e-datepicker table {
    & when (@skin= "material") {
        /*material*/
        margin: 0;
    }
}

@{e-widget}.e-datetime-popup .e-timecontainer .e-header {
    & when (@skin= "material") {
        /*material*/
        display: none;
    }

    & when (@skin= "office-365") {
        /*office-365*/
        border: none;
        padding-top: 10px;
        font-size: 17px;
    }
}

@{e-widget}.e-datetime-popup .e-timecontainer .e-time-popup ul li {
    & when (@skin= "material") {
        /*material*/
        padding: 15px 0px 15px 18px;
    }
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-mins-header,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-am,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,38%);
    }
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-icon {
    .material-icon-dimension();
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-text,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-am .e-text,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm .e-text,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-mins-header .e-text {
    .material-text-dimension();
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-text {
    .material-datePicker-headerText();
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-text .e-hours-headertext,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-text .e-minitues-headertext,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-am .e-text .e-hours-meridiantxt-am,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm .e-text .e-hours-meridiantxt-pm,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-mins-header .e-text .e-minitues-meridiantxt {
    .material-headerText-padding();
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-icon:before {
    .material-icon-position();
}

@{e-widget}.e-datetime-popup .e-dp-viewmins .e-timepicker-mins .e-state-default {
    & when (@skin= "material") {
        /*material*/
        border-radius: 50%;
        box-shadow: none;
        width: 70px;
        height: 50px;
        line-height: 50px;
        position: relative;
        z-index: 1;
    }
    & when (@skin= "office-365") {
        /*material*/
        box-shadow: none;
        line-height: 40px;
        position: relative;
        z-index: 1;
    }
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-next,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-prev {
    .material-icon-alignment();
    .material-datePicker-header();

    & when (@skin= "material") {
        /*material*/
        overflow: hidden;
    }
}

@{e-widget}.e-datetime-popup .e-dp-viewmins .e-timepicker-mins .e-state-default::before {
    & when (@skin= "material") {
        /*material*/
        top: 8px;
        left: 17px;
    }
     & when (@skin= "office-365") {
        /*material*/
        top: 19px;
        left: 12px;
    }
}

@{e-widget}.e-datetime-popup.e-rtl .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-text {
    .material-header-RTL();
}

@{e-widget}.e-datetime-popup.e-drill-down .e-popup-container {
    & when (@skin= "material") {
        /*material*/
        padding: 0px 10px 10px 10px;
        border-bottom: 0;
    }
}

@{e-widget}.e-datetime-popup.e-rtl .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-next {
    .material-nextIcon-RTL();
}

@{e-widget}.e-datetime-popup.e-rtl .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-prev {
    .material-prevIcon-RTL();
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer table td::before {
    & when (@skin= "material") {
        /*material*/
        content: "";
        width: 40px;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: -1;
    }
    & when (@skin= "office-365") {
        /*material*/
        content: "";
        width: 40px;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: -1;
    }
}

@{e-widget}.e-datetime-popup .e-dp-viewhours .e-timepicker-hours .e-state-default {
    & when (@skin= "material") {
        /*material*/
        width: 40px;
        height: 40px;
        padding: 3px 15px;
        z-index: 1;
    }
}

@{e-widget}.e-datetime-popup .e-dp-viewhours .e-timepicker-hours .e-state-default::before {
    & when (@skin= "material") {
        /*material*/
        top: 3px;
        left: 18px;
    }
     & when (@skin= "office-365") {
        /*material*/
        top: 2px;
        left: 12px;
    }
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-header-am + .e-dp-viewhours .e-timepicker-hours .e-state-default,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-header-pm + .e-dp-viewhours .e-timepicker-hours .e-state-default {
    & when (@skin= "material") {
        /*material*/
        width: 40px;
        height: 40px;
        padding: 3px;
        position: relative;
        z-index: 1;
    }
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-header-am + .e-dp-viewhours .e-timepicker-hours .e-state-default::before,
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-header-pm + .e-dp-viewhours .e-timepicker-hours .e-state-default::before {
    & when (@skin= "material") {
        /*material*/
        top: 3px;
        left: 5px;
    }
     & when (@skin= "office-365") {
        /*material*/
        top: 0px;
        left: 2px;
    }
}

@{e-widget}.e-datetime-popup .e-datepicker .e-footer {
    & when (@skin= "material") {
        /*material*/
        margin: 0;
    }
}

@{e-widget}.e-datetime-popup .e-timecontainer .e-time-popup.e-rtl ul li {
    & when (@skin= "material") {
        /*material*/
        padding: 15px 18px 15px 0px;
    }
}

@{e-widget}.e-datetime-wrap .e-input::selection, @{e-widget}.e-datetime-wrap .e-input::selection,
@{e-widget}.e-datetime-wrap .e-input::selection, @{e-widget}.e-datetime-wrap .e-input::selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
    }
}

@{e-widget}.e-datetime-wrap .e-input::-moz-selection, @{e-widget}.e-datetime-wrap .e-input::-moz-selection,
@{e-widget}.e-datetime-wrap .e-input::-moz-selection, @{e-widget}.e-datetime-wrap .e-input::-moz-selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
    }
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm + .e-dp-viewhours {
    & when (@skin= "material") {
        margin-top: 10px;
    }
}

@keyframes flatshadow {
    0% {
        box-shadow: 0 0 0 0px rgba(255,64,129,0.5);
        border-color: rgba(255,64,129,0.5);
    }

    100% {
        box-shadow: 0 0 0 200px rgba(255,64,129,0);
    }
}

@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-icon:not(:active):after {
    & when (@skin= "material") {
        background: rgba(0,0,0,0.12);
    }
}

@{e-widget}.e-datetime-popup .e-dt-button.e-btn.e-select.e-flat:not(:active):after {
    & when (@skin= "material") {
        background-color: fade(@accent-color,12%);
    }
}
@{e-widget}.e-datetime-wrap.e-disable{
     & when not (@skin= "material") and not (@skin="office-365"){
     background-color: @disable-control-background-color;
    border-color:@disable-control-border-color;
    opacity:1;
    }
}
@{e-widget}.e-datetime-wrap .e-select.e-disable,
@{e-widget}.e-datetime-wrap .e-select.e-disable:hover,
@{e-widget}.e-ntouch.e-datetime-wrap .e-disable.e-select:hover{
     & when not (@skin= "material") and not (@skin="office-365"){
    background-color: @disable-icon-bg-color;
    }
}
@{e-widget}.e-datetime-popup .e-timecontainer .e-header{
     & when (@skin= "office-365") {
       padding-bottom:0;
    }
}
@{e-widget}.e-datetime-popup .e-datepicker.e-calendar .e-header{
     & when (@skin= "office-365") {
       padding-bottom:0;
    }
}
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm{
    & when (@skin= "office-365") {
       border-top:1px solid @neutral-light;
    }
}
@{e-widget}.e-datetime-popup .e-header+.e-dp-viewhours .e-timepicker-hours .e-state-default{
    & when (@skin= "office-365") {
      padding:0;
    }
}
@{e-widget}.e-datetime-popup .e-header+.e-dp-viewhours .e-timepicker-hours .e-state-default:before,
@{e-widget}.e-datetime-popup .e-header+.e-dp-viewhours .e-timepicker-hours .e-state-default:hover:before{
    & when (@skin= "office-365") {
     height:30px;
     line-height:30px;
    }
}
@{e-widget}.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header{
    & when (@skin= "office-365") {
     font-size:17px;
     font-weight:300;
    }
}


/*------------DateRangePicker themes -------------*/

@{e-widget}.e-daterangepicker-popup {
    background-color: @content-bg-color;
    font-family: @font-family;
    font-weight: @content-font-weight;
    color: @content-font-color;
    & when (@skin= "material") {
        /*material*/
     border: 0;
     box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.21);
} 
    & when not (@skin= "material") {
        /*other*/ 
    border: 1px solid @content-border-color;
}
}
@{e-widget}.e-daterangewidget .e-select {
    & when (@skin= "material") {
        /*material*/     
       border-left: 0;
       width:24px;
    } 
}
@{e-widget}.e-daterangewidget .e-in-wrap:before, @{e-widget}.e-daterangewidget .e-in-wrap:after {
    & when (@skin= "material") {
        background: @accent-color;
    }
}
@{e-widget}.e-daterangewidget .e-input  {
	background-color: @content-bg-color;
    font-family: @font-family;
    font-weight: @content-font-weight;
    & when (@skin= "material") {
        /*material*/
      color:fade(@base-font-color,87%);
      font-size:13px;
    } 
    & when not (@skin= "material") {
        /*other*/
    color: @content-font-color;
    }		    
}
@{e-widget}.e-daterangewidget .e-in-wrap, @{e-widget}.e-daterangepicker-popup {
    border-color: @content-border-color;
}
@{e-widget}.e-daterangewidget .e-in-wrap{
    & when (@skin= "material") {
        /*material*/     
     border-width:0 0 1px 0;
     border-color:fade(@base-font-color,12%)
    }   
}
@{e-widget}.e-daterangewidget.e-widget:hover .e-in-wrap {
    .focus-border-color();
    & when (@skin= "office-365") {        
        border-color:@neutral-secondary-alt;
    }
}

@{e-widget}.e-daterangewidget.e-focus .e-in-wrap, @{e-widget}.e-daterangewidget .e-focus {
    & when (@skin= "material") {
        /*material*/
    box-shadow: none;
} 
    & when not (@skin= "material") {
        /*other*/ 
    box-shadow: 0 0 @shadow-bg-size @bs-shadow-bg-color;
}
    }  

@{e-widget}.e-daterangewidget.e-focus .e-in-wrap, @{e-widget}.e-daterangewidget .e-focus .e-in-wrap,
@{e-widget}.e-daterangewidget.e-focus .e-in-wrap:hover, @{e-widget}.e-daterangewidget .e-focus  .e-in-wrap:hover{
    .focus-border-color();
}

@{e-widget}.e-daterangewidget .e-select,
@{e-widget}.e-daterangewidget .e-drpbuttons .e-disable:hover,
@{e-widget}.e-ntouch.e-daterangewidget .e-disable.e-select:hover {
    .bs-default-gradient();    
    border-color: @content-border-color;   
    .border-selection();

     & when (@skin= "material") {
        /*material*/
     background:@content-bg-color;
     color: fade(@base-font-color,54%);
    }
 
    & when not (@skin= "material") {
        /*other*/ 
    background-color: @content-bg-color;
     color: @default-icon-color;
    }  
}
@{e-widget}.e-daterangewidget .e-drpbuttons .e-btn.e-select.e-flat {   
 & when (@skin= "office-365") {
	    background-color: none;
		}
}

@{e-widget}.e-daterangewidget .e-select,
@{e-widget}.e-ntouch.e-daterangewidget .e-disable.e-select:hover {
    .office-button-bg-color();
}

@{e-widget}.e-ntouch.e-daterangewidget .e-select:hover {
     & when (@skin= "material") {
        /*material*/
        background:@content-bg-color;
    } 
    & when not (@skin= "material") {
        /*other*/  
    .hover-gradient();
    color: @hover-icon-color;
    } 
}

@{e-widget}.e-daterangepicker-popup .e-custom-dateranges {
    & when not (@skin= "office-365") {
    border-left: 1px solid @content-border-color;
	}
}
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-start-date.e-hidedate:hover, 
 @{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.in-range.e-state-hover.e-hidedate, 
@{e-widget}.e-daterangepicker-popup .e-ntouch.e-datepicker .e-datepicker-days .e-state-default.in-range:hover.e-hidedate,
 @{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-active.e-start-date.e-hidedate:hover, 
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-state-hover.e-end-date.e-hidedate:hover, 
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-end-date.e-hidedate:hover, 
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-state-hover.e-hidedate.e-start-date,
 @{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-state-hover.e-hidedate.e-end-date,
 @{e-widget}.e-daterangepicker-popup .e-ntouch.e-datepicker table td.e-hidedate:hover
{
    background:none;
 & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,38%);
    }

    & when not (@skin= "material") {
        /*other*/
        color: @disable-datepicker-text;
    }

}
@{e-widget}.e-daterangepicker-popup  .e-datepicker table .e-datepicker-months td.e-hidedate:hover::before, 
@{e-widget}.e-datepicker table .e-datepicker-years td.e-hidedate:hover::before
{
    & when (@skin= "office-365") {
        /*material*/
        background-color: @neutral-lighter;
    }

}
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-start-date:hover,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.in-range.e-state-hover,
@{e-widget}.e-daterangepicker-popup .e-ntouch.e-datepicker .e-datepicker-days .e-state-default.in-range:hover,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-active.e-start-date:hover,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-state-hover.e-end-date:hover,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-state-hover.e-end-date.e-active:hover,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-end-date.e-active:hover,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-end-date:hover,
@{e-widget}.e-daterangepicker-popup .e-ntouch.e-datepicker table td:hover {
            background: @hover-bg-stcolor;
            color: @hover-font-color;
                  
    &when (@skin="material"){
        background-color: @grey-200;
    }
	& when (@skin="office-365"){
        background-color: @neutral-light;
    }

}
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-active::before, .e-datepicker .e-active .e-state-hover::before,
@{e-widget}.e-daterangepicker-popup .e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default,
@{e-widget}.e-daterangepicker-popup .e-datepicker table td::before,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default
 {
    top:0px;
    padding-top:0px;
}

@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-start-date,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.today.e-start-date,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-active.e-start-date,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-end-date,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.today.e-end-date,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-active.e-end-date,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.in-range.e-end-date {    
    & when (@skin= "material") {
        /*material*/
        background:transparent;
    color: @accent-font-color;
    }
 
    & when not (@skin= "material") {
        /*other*/
      .active-gradient();
    color: @active-font-color;
    }  
}
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-start-date::before,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.today.e-start-date::before,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-active.e-start-date::before,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-end-date::before,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.today.e-end-date::before,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-active.e-end-date::before,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.in-range.e-end-date::before{
    & when (@skin= "material") {
        /*material*/
        background:@accent-color;
        border-radius:50%;
		top:2px;
    }
	 & when (@skin= "office-365") {
           border-radius:none;
    } 
}

@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default:hover,
@{e-widget}.e-daterangepicker-popup .e-ntouch.e-datepicker table td.e-state-default:hover {  
      & when (@skin= "material") {
        /*material*/
        color:fade(@base-font-color,38%);
        background:transparent;
    }
 }
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-allyears td.e-state-default:hover,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-months td.e-state-default:hover,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-years td.e-state-default:hover,
@{e-widget}.e-daterangepicker-popup .e-ntouch.e-datepicker .e-datepicker-allyears td.e-state-default:hover,
@{e-widget}.e-daterangepicker-popup .e-ntouch.e-datepicker .e-datepicker-months td.e-state-default:hover,
@{e-widget}.e-daterangepicker-popup .e-ntouch.e-datepicker .e-datepicker-years td.e-state-default:hover {
    	 & when (@skin= "office-365") {
     background:transparent;
     }
}
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default:hover::before,
@{e-widget}.e-daterangepicker-popup .e-ntouch.e-datepicker table td.e-state-default:hover::before {  
      & when (@skin= "material") {
        /*material*/
        background:transparent;
        content:"";
    }
}
@{e-widget}.e-daterangepicker-popup .e-val-error .e-in-wrap {
    border: 1px solid red;
}

@{e-widget}.e-daterangepicker-popup .e-drpbuttons .e-drp-apply.e-disable {
    cursor: default;
}
@{e-widget}.e-custom-dateranges li {
    & when (@skin= "material") {
        /*material*/
     box-shadow: none;
    background:@content-bg-color;
    border: 0;
    padding:9px 24px;
    margin:0;
    text-align:center;
    height:30px;
    box-sizing:content-box;
    }
 
    & when not (@skin= "material") {
	    & when not (@skin= "office-365") {
		        /*other*/ 
		    box-shadow: 0 0 5px @default-bg-stcolor;
		    background: @content-bg-color;
		    border: 1px solid @content-border-color;
		}
    }  
}

@{e-widget}.e-custom-dateranges li.e-active {
     & when (@skin= "material") {
        /*material*/
        background:@content-bg-color;
        color:@accent-color;
        border-color:@content-bg-color;
    } 
    & when not (@skin= "material") {
        /*other*/  
		 & when not (@skin= "office-365") {
		    .active-gradient();
		    border-color: @active-border-color;
		    color: @active-font-color;
		    border-color: @active-border-color;
		  }
		& when (@skin= "office-365") {
			color:@theme-primary;
		 }
    } 
}

@{e-widget}.e-custom-dateranges li:hover {
    & when not (@skin= "office-365") {
	    .hover-gradient();
	    color: @hover-font-color;
	    border-color: @hover-border-color;
	}
	 & when (@skin= "office-365") {
	     color: @theme-dark;
	}
}

@{e-widget}.e-daterange-responsive .e-custom-dateranges {
	 & when not (@skin= "office-365") {
    	border-top: 1px solid @content-border-color;
	}
}
@{e-widget}.e-daterangepicker-popup .e-drp-button.e-btn.e-select.e-flat {
	 & when (@skin= "office-365") {

background:none;
color:@theme-primary;
}
}
@{e-widget}.e-daterangepicker-popup .e-drp-button.e-btn.e-select.e-flat:hover{
	 & when (@skin= "office-365") {

background:none;
color:@theme-dark;
}
}
 @{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-months td:hover::before,
 @{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-allyears td:hover::before,
 @{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-years td:hover::before {
		 
 }
 @{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-months td, 
 @{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-years td, 
 @{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-allyears td {
  & when (@skin= "office-365") {
	background:transparent;
	color:@neutral-light-font-alt;
	}
 }


@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-state-hover,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.today {
    background: @content-bg-color;
    color: @content-font-color;
}

@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-state-hover:hover,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.today:hover {
     & when not (@skin= "material") {
        background: @hover-bg-stcolor;
        color: @hover-font-color;
        & when not (@skin= "office-365") {
            border-radius: 4px;
        }
     }
}

@{e-widget}.e-daterangepicker-popup .e-custom-dateranges li:hover {
    & when (@skin= "material") {
        /*material*/
      background-color:@grey-200;
      color:fade(@base-font-color,87%);
    }
 
    & when not (@skin= "material") {
		& when not (@skin= "office-365") {
				/*other*/ 
			.hover-gradient();
			background-color: #179bd7;
			color: @hover-font-color;
		}
		& when (@skin= "office-365") {
			color: @theme-dark;
		}
	}      
}

@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.in-range + .e-end-date {
.high-contrast-stylefor-daterange();
    & when (@skin= "material") {
        /*material*/
      box-shadow: -15px 0 0 0 @grey-200;
    }
	
}

@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-start-date.showrange {
.high-contrast-stylefor-daterange();
  & when (@skin= "material") {
        /*material*/
    box-shadow: 15px 0 0 0 @grey-200;
    }
}

@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.in-range {  
    color: @default-font-color;
.high-contrast-stylefor-daterange();    
    border-color: @content-border-color;
    & when (@skin= "material") {
        /*material*/
      background:@grey-200;
    box-shadow: none;
    }
 
   & when not (@skin= "material") {
        /*other*/ 
  background: @default-bg-stcolor;
 .daterange-inrange-background();   
  box-shadow: 0 0 0 transparent inset;
 
    } 
    & when (@skin= "office-365") {
       background-color:@neutral-lighter;
    } 
}
/*button css*/
@{e-widget}.e-daterangepicker-popup .e-drpbuttons {
	& when not (@skin= "office-365") {
			
		border-top: 1px solid @default-border-color;
		.bs-default-gradient();
		border-color: @default-border-color;
		.switch-datetimepick-button-text;
		color: @default-font-color;
	}
	& when (@skin= "office-365") {
		color: @default-font-color;
	}
	
}

.e-daterangepicker-popup .e-drpbuttons div {    
     & when (@skin= "material") {
        /*material*/
       border:none;
     color:@accent-color;
     background:@content-bg-color;
     text-transform: uppercase;
    } 
     & when not (@skin= "material") {
	 	& when not (@skin= "office-365") {
				/*other*/ 
			.bs-default-gradient();
			color: @default-font-color;
			border-color: @default-border-color;
		}
		& when (@skin= "office-365") {
			color: @default-font-color;
		}
	}
}    

.e-daterangepicker-popup .e-drpbuttons div:hover {
    & when (@skin= "material") {
        /*material*/ 
        background: @content-bg-color;
       color:@accent-color;
       border-color:@content-bg-color;
    } 
    & when not (@skin= "material") {
		 	& when not (@skin= "office-365") {
					/*other*/ 
				.hover-gradient();
				color: @hover-font-color;
				border-color: @hover-border-color;
			}
		   & when (@skin= "office-365") {
				color: @theme-dark;
		}
    }    
}

@{e-widget}.e-daterangepicker-popup .e-drpbuttons .e-active {
	& when not (@skin= "office-365") {
    .active-gradient();
    border-color: @active-border-color;
    color: @content-font-color;
    border-color: @active-border-color;
	}
	& when (@skin= "office-365") {
		color: @content-font-color;
	}
}

@{e-widget}.e-daterangepicker-popup .e-datewidget.e-error .e-in-wrap {
    border-color: @content-border-color;
}

@{e-widget}.e-daterangepicker-popup .e-datewidget.e-error {
    color: white;
}
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default{
         & when (@skin= "material") {

    .material-dateDimension-datepicker();
    }
}

@{e-widget}.e-daterangepicker-popup.e-popup .e-datepickers-popup .e-left-datepicker .e-datewidget.e-focus .e-in-wrap,
@{e-widget}.e-daterangepicker-popup.e-popup .e-datepickers-popup .e-right-datepicker .e-datewidget.e-focus .e-in-wrap{
     & when (@skin= "material") {
        /*material*/
         border-color: fade(@base-font-color,12%);
         box-shadow:none;
    } 
}
@{e-widget}.e-daterangepicker-popup .e-left-datepicker{
     & when (@skin= "material") {
        /*material*/
         border-right:1px solid;
         border-color: fade(@base-font-color,12%);
          box-shadow:none;
          margin-right:-1px;
    } 
}
@{e-widget}.e-daterangepicker-popup .e-right-datepicker{
     & when (@skin= "material") {
        /*material*/
         border-left:1px solid;
         border-color: fade(@base-font-color,12%);
          box-shadow:none;
    } 
}
@{e-widget}.e-daterangepicker-popup .e-left-datepicker .e-timewidget,
@{e-widget}.e-daterangepicker-popup .e-right-datepicker .e-timewidget{
& when (@skin= "material") {
        /*material*/
        height:32px;
    } 
}

 @{e-widget}.e-daterangepicker-popup .e-left-datepicker .e-timewidget.e-focus .e-in-wrap,
@{e-widget}.e-daterangepicker-popup .e-right-datepicker .e-timewidget.e-focus .e-in-wrap{
& when (@skin= "material") {
        /*material*/
        border-color:fade(@base-font-color,12%);
        box-shadow:none;
    } 
}
@{e-widget}.e-daterange-timepopup.e-time-popup ul li{
    & when (@skin= "material") {
        /*material*/
      padding:15px 0 15px 15px;
    } 
}
@{e-widget}.e-daterangepicker-popup .e-left-datepicker .e-timewidget.e-active .e-select,
@{e-widget}.e-daterangepicker-popup .e-right-datepicker .e-timewidget.e-active .e-select{
& when (@skin= "material") {
        /*material*/
         color:fade(@base-font-color,54%);
    } 
}
@{e-widget}.e-daterangepicker-popup .e-left-datepicker .e-timewidget .e-select,
@{e-widget}.e-daterangepicker-popup .e-right-datepicker .e-timewidget .e-select{
& when (@skin= "material") {
        /*material*/
        border-left:0;
    } 
}
@{e-widget}.e-daterangewidget.e-active .e-select{
    & when (@skin= "material") {
        /*material*/
        color:@accent-color;
    } 
}
@{e-widget}.e-daterangewidget .e-input::selection, @{e-widget}.e-datetime-wrap .e-input::selection,
@{e-widget}.e-daterangewidget .e-input::selection, @{e-widget}.e-datetime-wrap .e-input::selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
    }
}

@{e-widget}.e-daterangewidget .e-input::-moz-selection, @{e-widget}.e-datetime-wrap .e-input::-moz-selection,
@{e-widget}.e-daterangewidget .e-input::-moz-selection, @{e-widget}.e-datetime-wrap .e-input::-moz-selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
    }
}
@{e-widget}.e-daterangepicker-popup .e-drp-button.e-btn.e-select.e-flat:not(:active):after{
     & when (@skin= "material") {
            background-color:fade(@accent-color,12%);
        }
   
}
@{e-widget}.e-daterangepicker-popup .e-drp-button.e-btn.e-select.e-flat.e-disable:not(:active):after{
    & when (@skin= "material") {
    animation: none;
    }
}
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days td.e-start-date:not(:active):after,
@{e-widget}.e-daterangepicker-popup .e-datepicker .e-datepicker-days td.e-end-date:not(:active):after{
    & when (@skin= "material") {
        background: fade(@primary-font-color,50%);
    }
}
@{e-widget}.e-daterangepicker-popup .e-drp-button.e-btn.e-flat.e-disable.e-select,
@{e-widget}.e-daterangepicker-popup .e-drp-button.e-btn.e-flat.e-disable.e-select:active,
 @{e-widget}.e-daterangepicker-popup .e-drp-button.e-btn.e-flat.e-disable.e-select:hover{
    & when (@skin= "material") {
    color: rgba(0,0,0,.26);
    background-color: transparent;
    }
}
@keyframes flatshadow {
    0% {
        box-shadow: 0 0 0 0px rgba(255,64,129,0.5);
        border-color: rgba(255,64,129,0.5);
    }

    100% {
        box-shadow: 0 0 0 200px rgba(255,64,129,0);
    }
}
@{e-widget}.e-daterangepicker-popup.e-popup .e-datepickers-popup .e-right-datepicker.e-right-timepicker .e-datewidget .e-in-wrap,
@{e-widget}.e-daterangepicker-popup.e-popup .e-datepickers-popup .e-left-datepicker.e-left-timepicker .e-datewidget .e-in-wrap{
     & when (@skin= "material") {
        width:195px;
    }
}
@{e-widget}.e-daterangepicker-popup.e-popup .e-datepickers-popup .e-left-datepicker+::after{
 & when (@skin= "material") {
        content:"";
        width:100%;
        height:100%;
        float:left;
    }
}
@{e-widget}.e-daterangepicker-popup .e-custom-dateranges ul{
    & when (@skin= "material") {
       color:fade(@base-font-color,87%);
       margin-top:13px;
    }
}
@{e-widget}.e-daterangepicker-popup .e-datewidget.e-focus .e-in-wrap:before,
 @{e-widget}.e-daterangepicker-popup .e-datewidget.e-focus .e-in-wrap:after,
@{e-widget}.e-daterangepicker-popup .e-left-datepicker .e-timewidget.e-focus .e-in-wrap:before, 
@{e-widget}.e-daterangepicker-popup .e-left-datepicker .e-timewidget.e-focus .e-in-wrap:after,
@{e-widget}.e-daterangepicker-popup .e-right-datepicker .e-timewidget.e-focus .e-in-wrap:before,
@{e-widget}.e-daterangepicker-popup .e-right-datepicker .e-timewidget.e-focus .e-in-wrap:after{
 & when (@skin= "material") {
       width:0;
    }
}
@{e-widget}.e-daterangewidget.e-disable{
     & when not (@skin= "material") and not (@skin="office-365"){
     background-color: @disable-control-background-color;
    border-color:@disable-control-border-color;
    opacity:1;
    }
}
@{e-widget}.e-daterangewidget .e-select.e-disable,
@{e-widget}.e-daterangewidget.e-disable .e-select:hover,
@{e-widget}.e-ntouch.e-daterangewidget .e-disable.e-select:hover{
     & when not (@skin= "material") and not (@skin="office-365"){
    background-color: @disable-icon-bg-color;
    }
}
@{e-widget}.e-daterangewidget.e-widget.e-disable:hover .e-in-wrap {
    & when (@skin= "office-365") {
	     border-color: @content-border-color;
		}
}

@{e-widget}.e-daterangepicker-popup.e-daterange-responsive .e-right-datepicker{
    & when (@skin= "material") {
        float:none;
    }
}

 @{e-widget}.e-daterange-responsive .e-drpbuttons{
        background-color:transparent;
}



.svg-rotate-ie {
    cursor: url("../common-images/diagram/Rotate.cur"), default;
}

.svg-rotate {
    cursor: url("../common-images/diagram/Rotate.cur"), default;
}

.sf-d-menuitem {
    background-image: @dg-contextmenu;
    background-repeat: no-repeat;
    height: 25px;
    width: 25px;
}

.sf-d-menuitem.hover {
    background-image: @dg-contextmenu-hover;
}

.sf-d-menuitem.cut {
    background-position: 2px -290px;
}

.sf-d-menuitem.copy {
    background-position: 2px -264px;
}

.sf-d-menuitem.paste {
    background-position: 2px -238px;
}

.sf-d-menuitem.undo {
    background-position: 2px -186px;
}

.sf-d-menuitem.redo {
    background-position: 2px -213px;
}

.sf-d-menuitem.selectAll {
    background-position: 2px -160px;
}

.sf-d-menuitem.group {
    background-position: 2px -31px;
}

.sf-d-menuitem.ungroup {
    background-position: 2px -4px;
}

.sf-d-menuitem.bringToFront {
    background-position: 2px -134px;
}

.sf-d-menuitem.sendToBack {
    background-position: 2px -108px;
}

.sf-d-menuitem.moveForward {
    background-position: 2px -82px;
}

.sf-d-menuitem.sendBackward {
    background-position: 2px -56px;
}

.sf-d-menuitem.grouping {
    background-image: none;
}

.sf-d-menuitem.order {
    background-image: none;
}

.e-diagram-tooltip-default {
    width: 200px;
    background-color: #f7eebc;
    border: 1px solid #ddb654;
    z-index: 100000;
    position: absolute;
    text-align: center;
    border-radius: 3px 3px;
    pointer-events: none;
}

.e-diagram-tooltipLabel-default {
    font-weight: normal;
    pointer-events: none;
    white-space: pre;
}

.e-datavisualization-diagram {
    overflow: hidden;
    outline: none;
    display: block;
}

.e-datavisualization-diagram svg {
    position: absolute;
}

.e-datavisualization-diagram .drawing {
    position: relative;
}

.e-datavisualization-diagram .edit {
    position: absolute;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.e-datavisualization-diagram .edit textarea {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px dashed #99CCFF;
    outline: none;
    resize: none;
    padding: 2px;
}

.e-datavisualization-diagram .e-vscrollbar {
    float: right;
}

.e-datavisualization-diagram .e-hscrollbar {
    text-align: left;
}

.e-scrollbar .e-vhandlespace,
.e-scrollbar .e-hhandlespace {
    position: relative;
    background-color: @scroll-bg-color;
}

.e-datavisualization-diagram.e-js .sf-diagram_overlap {
    background-color: @dg-ruler-overlap-bg; 
}

.e-datavisualization-diagram.e-js .sf-diagram_hRuler,
.e-datavisualization-diagram.e-js .sf-diagram_vRuler {
    background-color: @dg-ruler-space-bg;
}

.sf-diagram_hRuler.e-datavisualization-ejruler.e-js .ej-ruler-space {
    background-color: @dg-ruler-space-bg;
}

.sf-diagram_hRuler.e-datavisualization-ejruler.e-js .ej-ruler-tick {
    stroke: @dg-ruler-tick;
}

.sf-diagram_hRuler.e-datavisualization-ejruler.e-js .ej-ruler-tick-label {
    font-size: 9px;
    fill: @dg-ruler-label;
}


@{e-widget}.e-dialog.e-dialog-wrap {    
    background: @content-bg-color;
    font-family: @font-family;
}

@{e-widget}.e-dialog .e-dialog-icon:hover {
    .hover-gradient();
	border-image: initial;
    border-color:@hover-border-color;
    & when (@skin= "office-365") {
         color: @neutral-light-font-alt;
         background: none;
     }
}

@{e-widget}.e-dialog-modal {
	overflow: hidden;
}

@{e-widget}.e-dialog .e-dialog-icon:hover {
    .material-dialog-icon-hover-bg-color;
}

@{e-widget}.e-dialog.e-disable .e-dialog-icon:hover {
    background:transparent;
}
@{e-widget}.e-dialog .e-dialog-icon:before {
    & when (@skin= "material") {
        color: fade(@base-font-color, 54%);
    }
    & when not (@skin= "material") {
        color:@header-icon-color;
    }
     line-height: 1.5;
 } 
@{e-widget}.e-dialog > .e-header {
    & when (@skin= "material") {
        font-size:20px;
        font-family: @font-family;
        color: fade(@base-font-color, 87%);
        font-weight: 500;
   }
   & when (@skin= "office-365") {
        font-size:21px;
        font-family:@font-family;
        font-weight:100;
        color:@neutral-primary; 
   }
   & when not (@skin= "material") and not (@skin="office-365") {
	   .header-gradient();
        color: @header-font-color;
        font-weight: @content-font-weight;
	    font-size:@header-font-size;
        border:@border-size @border-type @header-border-color;
       .office-dialog-active-line-color;
        border-bottom: @tools-border-radius @border-type @active-bg-stcolor;  
    }
}
@{e-widget} .e-titlebar + div.e-dialog-scroller .e-widget-content {
    & when (@skin= "office-365") {
        padding-top: 0;
    }
}
@{e-widget}.e-dialog.e-dialog-wrap:not(.e-shadow) {
    & when (@skin= "office-365") {
        box-shadow:0px 0px 15px 0px rgba(0,0,0,0.2);
    }
}
@{e-widget}.e-dialog > .e-titlebar {
     & when (@skin= "material") {
       box-shadow: 0 1.83px 1px rgba(0, 0, 0, -0.8);
       padding: 24px 24px 0px;
     }
     & when (@skin= "office-365") {
       box-shadow: 0 1.83px 1px rgba(0, 0, 0, -0.8);
       padding: 20px 25px 28px;
    }
}
@{e-widget}.e-dialog.e-shadow {
    & when (@skin= "material") {
       box-shadow:0 12px 40px 5px rgba(0, 0, 0, 0.26);
    }
    & when (@skin= "office-365") {
        box-shadow:0px 0px 15px 0px rgba(0,0,0,0.2);
    }
}
@{e-widget} .e-dialog.e-widget-content {
     & when (@skin= "material") {
        font-size:15px;
        font-family: @font-family;
        color: fade(@base-font-color, 54%);
        padding: 20px 24px 24px 24px;
        font-weight:400;
        line-height:1.5;
    }
    & when (@skin= "office-365") {
        font-size:12px;
        font-family: @font-family;
        color: @neutral-light-font;
        padding-top:28px;
        padding-left:25px;
        padding-right:25px;
        padding-bottom:20px;
        font-weight:300;
        line-height:1.5;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        background: @content-bg-color;
        color: @content-font-color;
	    font-size:@content-font-size;
    }
}
@{e-widget} .e-dialog.e-widget-content.e-load{
    background-image: @ajaxloaderimage;
	background-position: center;
    background-repeat: no-repeat;
}
@{e-widget}.e-overlay {
    background-color:@overlay-bg-color;
    & when (@skin= "office-365") {
         background-color: @neutral-light-font-alt;
         opacity: 0.4;
    }
}
@{e-widget}.e-dialog > .e-dialog-scroller {
    & when (@skin= "material") {
         border: none;
    }
    & when (@skin= "office-365") {
         border: none;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
         border:@border-size @border-type @content-border-color;
         border-top: none;
    }
}
@{e-widget}.e-dialog .e-dialog-icon:hover:before {
    .material-dialog-icon-hover-color;
    & when not (@skin= "material") {
    color:@hover-icon-color;
    }
}
@{e-widget}.e-dialog > .e-footerbar {
	position: relative;
     & when (@skin= "material") {
       height: 36px;
       padding:8px; 
       border: none;
     }
     & when (@skin= "office-365") { 
       height: 36px;
       padding-left:25px;
       padding-right:25px;
       padding-bottom:20px;
       border: none;
     }
     & when not (@skin= "material") and not (@skin="office-365") {
	   height: 40px;        
       border: @border-size @border-type @header-border-color;
       border-top: none;
     }
	 background: @content-bg-color; 
}
@{e-widget}.e-dialog > .e-footerbar > .e-icon.e-resize-handle.e-resizable.e-js {
	position: absolute;
	cursor: se-resize;
	bottom: 0;
	right: 0;
}
@{e-widget} .e-corner.e-dialog > .e-footerbar {
	border-radius: 0px 0px 3px 3px;
}
@{e-widget} .e-corner .e-dialog-content{
    border-radius:3px;
}
@{e-widget} .e-corner .e-dialog-bottom{
    border-radius:0px 0px 3px 3px;
}
@{e-widget} .e-corner .e-dialog-top{
    border-radius:3px 3px 0px 0px;
}
@{e-widget}.e-dialog .e-scrollbar .e-icon {
    display: block;
} .e-dialog .e-scrollbar .e-icon {
    display: block;
} 
 @{e-widget}.e-dialog .e-dialog-icon::after {
     & when (@skin= "material") { 
         background: fade(@base-font-color,12%);
     }
}
@{e-widget}.e-dialog > .e-icon.e-resizable:before {
    & when (@skin= "material") { 
        display:none;
    }
}
@{e-widget}.e-dialog .e-dialog-icon {
    & when (@skin= "material") { 
        top:3px;
    }
    & when (@skin= "office-365") {
        top: 3px;
        right: 0;
        padding-right: 0; 
        color: @neutral-light-font;
    }
}
@{e-widget}.e-dialog .e-dialog-icon.e-icon.e-close {
    & when (@skin= "material") { 
        font-size:12px;
    }
}
@{e-widget}.e-dialog .e-dialog-icon.e-icon.e-close:before {
     & when (@skin= "material") {
         content:"\e69e"; 
     }
     & when (@skin= "office-365") {
         content:"\e800"; 
     }
}
@{e-widget}.e-dialog .e-dialog-icon.e-icon.e-arrowhead-up:before {
    & when (@skin= "material") {
         content:"\e672";
    }
    & when (@skin= "office-365") {
        content:"\e803"; 
    }
}
@{e-widget}.e-dialog .e-dialog-icon.e-icon.e-arrowhead-down:before {
    & when (@skin= "material") {
          content:"\e673";
    }
    & when (@skin= "office-365") {
        content:"\e804"; 
    }
}
@{e-widget}.e-dialog .e-draggable {
    touch-action:none;
}
@{e-widget} .e-dialog.e-widget-content .e-pager .e-firstpage, @{e-widget} .e-dialog.e-widget-content .e-pager .e-prevpage, @{e-widget} .e-dialog.e-widget-content .e-pager .e-firstpagedisabled, @{e-widget} .e-dialog.e-widget-content .e-pager .e-prevpagedisabled, @{e-widget} .e-dialog.e-widget-content .e-pager .e-nextpage, @{e-widget} .e-dialog.e-widget-content .e-pager .e-lastpage, @{e-widget} .e-dialog.e-widget-content .e-pager .e-nextpagedisabled, @{e-widget} .e-dialog.e-widget-content .e-pager .e-lastpagedisabled {
    padding: 9px 3px 1px 9px;
}
@{e-widget} .e-dialog.e-widget-content .e-pager .e-firstpage, @{e-widget} .e-dialog.e-widget-content .e-pager .e-prevpage, @{e-widget} .e-dialog.e-widget-content .e-pager .e-firstpagedisabled, @{e-widget} .e-dialog.e-widget-content .e-pager .e-prevpagedisabled, @{e-widget} .e-dialog.e-widget-content .e-pager .e-nextpage, @{e-widget} .e-dialog.e-widget-content .e-pager .e-lastpage, @{e-widget} .e-dialog.e-widget-content .e-pager .e-nextpagedisabled, @{e-widget} .e-dialog.e-widget-content .e-pager .e-lastpagedisabled {
     & when (@skin= "office-365") {
         padding: 9px 3px -2px 9px;
     }
}



/*------------------------------------- dropdownlist -------------------------------------------*/
@{e-widget}.e-ddl .e-options {
	& when (@skin= "office-365") {
		background-color: @neutral-lighter;
	}
}
@{e-widget} .e-atc .e-in-wrap, @{e-widget} .e-atc .e-input, @{e-widget}.e-atc-popup, @{e-widget} .e-atc .e-options {
    background-color: @content-bg-color;
    border-color: @content-border-color;
      & when (@skin= "material") {
        color: fade(@base-font-color, 87%);
        font-size: 13px;
        font-weight: @content-font-weight;
	  }
      & when (@skin= "office-365") {
        color:@neutral-primary;
        font-weight:400;
        font-size: @content-font-size;
      }
      & when not (@skin= "material") and not (@skin="office-365") {
        color: @content-font-color;
        font-size: @content-font-size;
        font-weight: @content-font-weight;
	  }
    font-family: @font-family;
}
@{e-widget}.e-ddl .e-input,@{e-widget}.e-ddl .e-input[readonly],
@{e-widget}.e-ddl-popup,@{e-widget}.e-ddl .e-options { 
     & when (@skin= "material") {
        /*material*/ 
        color: fade(@base-font-color,87%);
		background-color: @content-bg-color;
    } 
    & when not (@skin= "material") {
        /*other*/
        & when (@skin= "office-365") {
			color: @neutral-primary; 
			background-color: @content-bg-color;
        }
		& when not (@skin= "office-365") {
			color: @content-font-color;
			background-color: @content-bg-color;
		}
    } 
	font-family: @font-family;
    font-size: @content-font-size;
    font-weight: @content-font-weight;
    cursor: default;
}
@{e-widget}.e-atc-popup ul li.e-category{
	& when (@skin= "office-365") {
		color: @theme-light-font;
	}
}
@{e-widget}.e-ddl .e-in-wrap,
@{e-widget}.e-ddl-popup,.e-ddl .e-options,
@{e-widget}.e-ddl-popup .e-atc.e-search{ 
    & when (@skin= "material") {
        /*material*/
        border-color: fade(@base-font-color,12%);
        border-width: 0 0 1px 0;   
    }

    & when not (@skin= "material") {
        /*other*/
		& when (@skin= "office-365") {
			border-color: @neutral-tertiary-alt;
		}
		& when not (@skin= "office-365") {
			border-color: @content-border-color;
		}
    } 
}
@{e-widget}.e-ddl .e-options.e-active {
    & when (@skin= "material") {
        /*material*/
    background-color: @primary-font-color;
    color: @accent-color;
    border-color: @primary-font-color;
    }

    & when not (@skin= "material") {
        /*other*/
    background-color: @active-bg-stcolor;
    color: @active-font-color;
    border-color: @active-bg-stcolor;
    }
}
@{e-widget}.e-ddl .e-options:hover {
    & when (@skin= "office-365") {
     background :@hover-bg-stcolor;
    }
}
@{e-widget}.e-ddl .e-options .e-icon.e-close {
	& when (@skin= "office-365") {
		color :@neutral-secondary-alt;
    }
}
@{e-widget}.e-ddl-popup div>ul li{
	& when (@skin= "office-365") {
		background-color: @content-bg-color;
    }
}
@{e-widget}.e-ddl-popup .e-active.e-hover{
    & when (@skin= "office-365") {
		background: @theme-lighter;
    }
}
@{e-widget}.e-ddl .e-boxes {
    background-color:@content-bg-color;
}
@{e-widget}.e-ddl.e-popactive .e-in-wrap:before, @{e-widget}.e-ddl.e-popactive .e-in-wrap:after {
    & when (@skin= "material") {
        background: @accent-color;
    }
}
@{e-widget}.e-ddl.e-focus .e-in-wrap
{
     & when (@skin= "material") {
        /*material*/
        box-shadow: none;
    }

    & when not (@skin= "material") {
        /*other*/
       box-shadow: 0 0 @shadow-bg-size @bs-shadow-bg-color;
       .material-normal-box-shadow;
       .focus-border-color();
    } 
}

@{e-widget}.e-ddl:hover .e-in-wrap { 
     & when (@skin= "office-365") {
        /*office-365*/
		border-color: @neutral-secondary-alt;
    }
    & when not (@skin= "office-365") {
        /*office-365*/
		.focus-border-color();
    }
}
@{e-widget}.e-ddl .e-input.e-watermark {
    color: @watermark-font-color !important;
    font-style: @watermark-font-style;
}
@{e-widget}.e-ddl-popup .e-hover {
   & when (@skin= "material") {
        /*material*/
       background: @grey-200;
       color:  fade(@base-font-color,87%);  
    }

    & when not (@skin= "material") {
        /*other*/
        & when (@skin= "office-365") {
			/*office-365*/
			background: @neutral-lighter;
			color: @theme-light-font;
		}
		& when not (@skin= "office-365") {
			.hover-gradient();
			color: @hover-font-color;
		}
    }  
}
@{e-widget}.e-ddl .e-select:hover,@{e-widget}.e-ddl.e-rtl .e-select:hover {

	& when (@skin= "material") {
		/*material*/
		background-color: @content-bg-color;
		color: fade(@base-font-color,87%);  
	}
    & when not (@skin= "material") {
		/*other*/
		& when (@skin= "office-365") {
			/*office-365*/
			width: 30px;
			height: 100%;
			background: @hover-bg-endcolor;
			color: @neutral-light-font-alt;
		}
		& when not (@skin= "office-365") {
			.hover-gradient();
			color: @hover-icon-color;
			border-color: @content-border-color;
		}
    }
	
}
@{e-widget}.e-ddl .e-select:active,@{e-widget}.e-ddl.e-rtl .e-select:active {
     & when (@skin= "office-365") {
        /*office-365*/
        width: 30px;
        height: 100%;
        background: @active-bg-stcolor;
        color: @widget-bg-color;
     }
}

@{e-widget}.e-ddl .e-select.e-disable{
	& when (@skin= "office-365") {
		/*office-365*/
		background: @default-bg-stcolor;
		border: 0px solid @default-bg-stcolor;
		color: @hmp-border-color;
	}
}
@{e-widget}.e-ddl .e-input.e-disable{
	& when (@skin= "office-365") {
		/*office-365*/
		background: @default-bg-stcolor;
	}
}

@{e-widget}.e-ddl-popup .e-active {
	& when (@skin= "material") {
		/*material*/
		background-color: @content-bg-color;
		color: @accent-color; 
	}
	& when not (@skin= "material")  {
	/*other*/ 
		& when (@skin= "office-365") {
			/*office-365*/ 
			background-color: @theme-lighter;
			color: @theme-light-font;
		}
		& when not (@skin= "office-365") {
			.active-gradient();
			color: @active-font-color;
		}
	}
    border-bottom: 1px solid rgb(255,255,255);
    border-bottom: 1px solid rgba(255,255,255,0.3);    
}
@{e-widget}.e-ddl-popup .e-active.e-hover{
        & when (@skin= "material") {
        /*material*/
        background-color: @grey-200;
        color: @accent-color; 
    }
}
@{e-widget}.e-ddl .e-select, @{e-widget}.e-ddl.e-rtl .e-select,@{e-widget}.e-ddl .e-disable.e-select:hover {
     & when (@skin= "material") {
        /*material*/
        background-color: @content-bg-color;
        color: fade(@base-font-color,87%);
        border: none;
    }

    & when not (@skin= "material")  {
         & when (@skin= "office-365") {
        /*office*/
        width: 30px;
        height: 100%;
        background: @content-bg-color;
     }
        /*other*/
        .bs-default-gradient();
        color: @default-icon-color;
        border-color: @content-border-color;
    }
}

@{e-widget}.e-ddl .e-select, @{e-widget}.e-ddl.e-rtl .e-select, @{e-widget}.e-ddl .e-disable.e-select:hover {
   .office-button-bg-color();
}

@{e-widget}.e-ddl .e-select.e-load {
    background-image: @ajaxloaderimage;
    background-position: center center;
    background-repeat: no-repeat;
}
@{e-widget}.e-ddl-popup .e-resize-handle {
  cursor: se-resize;
  float: right;
  padding: 4px 3px 0 0;
  margin-right: 2px;
}
@{e-widget}.e-ddl-popup .e-resize-handle.e-rtl-resize {
  float: left;
  cursor: sw-resize;
  transform: rotate(90deg); 
  padding: 3px 0 0 3px;
}
@{e-widget}.e-ddl-popup .e-resizebar {
    .bs-default-gradient();
   border-top: 1px solid @content-bg-color;
   height: 20px;
   width: auto;
   display: block;
} 
@{e-widget}.e-ddl-popup .e-atc.e-search .e-search:before, @{e-widget}.e-ddl-popup .e-atc.e-search .e-cross-circle:before  {
    color:@content-border-color;
}
@{e-widget}.e-ddl-popup .e-checkwrap.e-check-act, @{e-widget}.e-ddl-popup .e-checkwrap:hover { 
    & when (@skin= "material") {
        /*material*/ 
     border: 2px solid;
     border-color: fade(@base-font-color,54%);
    } 
    & when not (@skin= "material") {
		& when not (@skin= "office-365") {
			border: 1px solid @content-border-color;
		}
    }
}

@{e-widget}.e-ddl-popup .e-checkwrap.e-check-act:hover { 
	& when (@skin= "office-365") {
		background-color: @theme-dark-alt;
		border: 2px solid @theme-dark-alt;
		color: @neutral-white;
	}
}
@{e-widget}.e-ddl-popup .e-checkwrap.e-check-act{ 
     & when (@skin= "material") {
        /*material*/  
        border-color: @accent-color; 
    } 
}
@{e-widget}.e-ddl-popup .e-checkwrap { 
     & when (@skin= "material") {
        /*material*/ 
       border-radius: 2px;   
       border: 2px solid;
       border-color: fade(@base-font-color,54%);           
    } 
    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			background-color: @theme-dark-font;
			border: 2px solid @neutral-tertiary;
			color: @neutral-white;
		}
		& when not (@skin= "office-365") {
			border: 1px solid @content-border-color;
		}
        /*other*/
       border-radius: none; 
    }
    background-color: @content-bg-color;
}

@{e-widget}.e-ddl-popup .e-checkwrap:hover {
	& when (@skin= "office-365") {
		border: 2px solid @neutral-secondary-alt;
	}
}
@{e-widget}.e-ddl-popup .e-check-act {
     & when (@skin= "material") {
        /*material*/ 
        background-color: @accent-color; 
        color: @accent-font-color;   
        border-radius: 2px;             
    } 
    & when not (@skin= "material") {
        /*other*/
		& when (@skin= "office-365") {
			border: 2px solid @theme-primary;
			color: @neutral-white;
			background-color: @theme-primary;
		}
		& when not (@skin= "office-365") {
			.switch-checkbox-icontick;
			color: @active-bg-stcolor;
		}
    } 
}

@{e-widget} .e-dropdownlist::-webkit-input-placeholder {
   color: @content-font-color;
}
@{e-widget} .e-dropdownlist:-ms-input-placeholder {
   color: @content-font-color;
}
@{e-widget} .e-dropdownlist::-moz-placeholder {
   color: @content-font-color;
}
@{e-widget} .e-dropdownlist:-moz-placeholder {
   color: @content-font-color;
}

@{e-widget}.e-ddl.e-widget.e-popactive .e-select .e-icon{
    & when (@skin= "material") {
        /*material*/ 
      transform: rotate(180deg);  
      transition: transform 300ms ease;          
    } 
}
@{e-widget}.e-ddl.e-widget .e-select .e-icon{
    & when (@skin= "material") {
        transform: rotate(0deg);  
        transition: transform 300ms ease;          
    } 
}

@{e-widget}.e-ddl-popup .e-check-inact.e-ddl-anim:before{
     & when (@skin= "material") {
    border-radius: 50%;
    position: absolute;
    box-sizing: border-box;
    top: 43%;
    right: 6px;
    transform: translate(-5%,-50%) scale(0);
    width: 3px;
    height: 3px;
    background: rgba(255,64,129,.7);
    content: '';
    border: 0px solid rgba(255,64,129,.7);
    animation: smallShadow .45s cubic-bezier(.25,.8,.25,1);
    }
}
@{e-widget}.e-ddl-popup .e-check-act.e-ddl-anim:after{
     & when (@skin= "material") {
    border-radius: 50%;
    position: absolute;
    box-sizing: border-box;
    top: 43%;
    right: 6px;
    transform: translate(-5%,-50%) scale(0);
    width: 3px;
    height: 3px;
    background: rgba(255,64,129,.7);
    content: '';
    border: 1px solid rgba(255,64,129,.7);
    animation: smallShadow .45s cubic-bezier(.25,.8,.25,1);
     }
}
@{e-widget}.e-ddl.e-widget .e-in-wrap.e-disable{
    & when not (@skin= "material") and not (@skin="office-365") {
    border-color: @disable-control-border-color; 
    background-color: @disable-control-background-color;
    opacity: initial;
    }
}
@{e-widget}.e-ddl.e-widget .e-input.e-disable{
    & when not (@skin= "material") and not (@skin="office-365") {
    background: @disable-control-background-color;
    }
}
@{e-widget}.e-ddl.e-widget .e-select.e-disable{
    & when not (@skin= "material") and not (@skin="office-365") {
    background: @disable-icon-bg-color;
    border-color: @disable-control-border-color;
    }
} 
@{e-widget}.e-ddl.e-widget .e-input.e-disable{
     & when (@skin= "material"){
        background: @grey-100;
     }
}

/*------------------------------------- Tooltip -------------------------------------------*/

@{e-widget}.e-tooltip-wrap {
    .material-tootip-bg-color;
     & when (@skin= "material") {
        /*material*/
        border-radius: 2px;
        border: 0px @border-type @content-border-color;
		background-color: @grey-700;
    }

    & when not (@skin= "material") {
        /*other*/
		 & when (@skin= "office-365") {
			/*office-365*/
			border: @border-size @border-type @neutral-secondary-alt;
			background-color:@neutral-lighter;
		}
		& when not (@skin= "office-365") {
			border: @border-size @border-type @content-border-color;
			background-color: @content-bg-color;
		}
        border-radius: none;
        
    } 
}
@{e-widget}.e-tooltip-wrap .e-arrowTipOuter{
  .material-tootip-border-color;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  left :0px;
  top : 0px;
  position : absolute;
   & when (@skin= "material") {
        /*material*/
        border: none !important;
		border-top: 10px solid @content-border-color;
    }
	& when not (@skin= "material") {
        /*other*/
		 & when (@skin= "office-365") {
			/*office-365*/
			border-top: 10px solid @neutral-lighter;
		}
		& when not (@skin= "office-365") {
			  border-top: 10px solid @content-border-color;
		}
    } 
}
@{e-widget}.e-tooltip-wrap .e-arrowTipInner{
    .material-tootip-bg-color;
    width: 0; 
    height: 0; 
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
	& when (@skin= "office-365") {
		/*office-365*/
		order-top: 9px solid @content-bg-color;
	}
	& when not (@skin= "office-365") {
		   border-top: 9px solid @content-bg-color;
	}
    left : 1px;
    top : 0px;
    position : absolute;
}

@{e-widget} .e-def{
  .material-tootip-text-color;
  font-family: @font-family;
  line-height: @tooltip-line-height;
  & when (@skin= "material") {
      /*material*/
    font-size: 10px;
	color: @content-font-color;
    }
    & when not (@skin= "material") {
       /*other*/
	   & when (@skin= "office-365") {
			/*office-365*/
			font-size: 12px;
			color: @neutral-secondary;
		}
		& when not (@skin= "office-365") {
			/*office-365*/
			font-size: @font-size;
			color: @content-font-color;
		}
    
    }
}

@{e-widget}.e-tooltip-wrap .e-tipContainer	.e-tooltipHeader{
	& when (@skin= "office-365") {
		background: none repeat scroll 0 0 @neutral-lighter;
		border-bottom : 1px @border-type @neutral-secondary-alt;
	}
	& when not (@skin= "office-365") {
		background: none repeat scroll 0 0 @header-bg-stcolor;            
		border-bottom : 3px @border-type @active-bg-stcolor;
	}
}

@{e-widget}.e-tooltip-wrap .e-tipContainer .e-tooltipHeader .e-close:before{
    & when (@skin= "office-365") {
		color: @neutral-primary;
	}
	& when not (@skin= "office-365") {
		color: @header-font-color;
	}
}
@{e-widget}.e-tooltip-wrap .e-tipContainer .e-tooltipHeader .e-close:hover{
    & when (@skin= "office-365") {
		color: @neutral-light-font-alt;
	}
	& when not (@skin= "office-365") {
		.hover-gradient();
		color: @hover-icon-color;
		border-color: @hover-border-color;
	}
}
@{e-widget}.e-tooltip-wrap .e-cross-circle:hover{
	.hover-gradient();
    color: @hover-icon-color;
    border-color: @hover-border-color;
}




/*------------------------------------- listbox -------------------------------------------*/


@{e-js}.e-listbox .e-select {
  & when (@skin= "material") {
   .select-listbox-material();
    border-color: @grey-100;
  }
  & when (@skin= "office-365") {
       background:@theme-lighter;
       border-color:@theme-lighter;
       color:@theme-light-font;
  }
  & when not (@skin= "material") and not (@skin="office-365") {
  .active-gradient(); 
   border-color: @active-bg-stcolor;
   color: @active-font-color;
  }
}
@{e-js}.e-listbox .e-active{
  color:@active-font-color;
 .hover-gradient(); 
 border-color: @hover-bg-stcolor;
}
@{e-js}.e-listbox .e-hover{
  & when (@skin= "material") {
      .hover-gradient-material();
  }
  & when (@skin= "office-365") {
       background:@neutral-lighter;
       color:@neutral-light-font;
  }
  & when not (@skin= "material") and not (@skin="office-365") {
      .hover-gradient();
      color:@hover-font-color;
  }
}
@{e-js}.e-dragClonelist{
     & when (@skin= "material") {
          background: @grey-100;
          text-align:center;
          line-height: 38px;
     }
     & when (@skin= "office-365") {
         background:@theme-lighter;
         text-align:center;
         color:@neutral-light-font;
         line-height: 36px;
         padding: 0 12px !important;
         font-family: @font-family;
         font-size: 13px;
     }
     & when not (@skin= "material") and not (@skin="office-365") {
         background: @active-bg-stcolor;
         color: @active-font-color;
         opacity:0.5;
         text-align:center;
     }
}
@{e-js}.e-wrap .e-listbox li {
     & when (@skin= "material") {
        padding-left: 16px !important;
     }
     & when (@skin= "office-365") {
        padding: 0px 12px !important;
     }
     & when not (@skin= "material") and not (@skin="office-365") {
	    padding-left: 10px !important;
     }
	word-break: break-all;
}
@{e-js}.e-rtl.e-wrap .e-listbox li {
     & when (@skin= "material") {
        padding-right: 16px !important;
     }
     & when (@skin= "office-365") {
         padding-left:12px !important;
     }
}
@{e-js}.e-nowrap .e-listbox li {
	padding-left: 10px!important;  
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@{e-widget}.e-ddl-popup.e-load	{
    background-image: @ajaxloaderimage;
	background-position: center;
    background-repeat: no-repeat;
}
@{e-widget}.e-ddl-popup.e-wrap .e-listbox li.allowDrop {
    & when (@skin= "office-365") {
        background-color: @neutral-light;
    }
}
@{e-widget}.e-ddl-popup.e-wrap.e-js {
    & when (@skin= "material") {
        border: 1px solid @grey-300;
        box-shadow:0 1.83px 1px rgba(0, 0, 0, 0);
    }
}
@{e-js}.e-listbox .e-chkbox-wrap .e-chkbox-small .e-chk-inact, @{e-js}.e-listbox .e-chkbox-wrap .e-chkbox-small .e-chk-act {
     & when (@skin= "material") {
         height:14px;
         width:14px;
     }
     & when (@skin= "office-365") {
         top: 4px;
     }
     & when not (@skin= "office-365") {
        top: 2px;
     }
}
@{e-js}.e-listbox .e-chkbox-wrap .e-chkbox-small .e-chk-act .e-checkmark {
     & when (@skin= "material") {
         font-size:12px;
         line-height:15px;
     }
}

@{e-widget}.e-ddl-popup.e-wrap.e-js div > ul li .e-chkbox-wrap, @{e-widget}.e-ddl-popup div > .e-listbox li .e-chkbox-wrap {
    & when (@skin= "material") {
        padding-right:18px;
    }
    & when (@skin= "office-365") {
        padding-right:12px;
    }
}

@{e-widget}.e-ddl-popup div > .e-ul .e-ghead {
    & when (@skin= "material") {
        font-weight:500;
        font-size:15px;
        line-height:48px;
        border-bottom:  1px @border-type @content-border-color;
        display: block;
        margin: 2px 2px 2px 0px;
        position: relative;
	    padding-bottom:5px;
	    padding-left: 0.857em ; 
        padding-top:5px;
    }
    & when (@skin= "office-365") {
        border-bottom:  1px @border-type @neutral-light;
        display: block;
        margin: 2px 2px 2px 0px;
        position: relative;
        font-size:14px;
        font-weight:400;
        color:@neutral-secondary;
        padding-left:12px;
        line-height:36px;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        font-weight: bold;
        border-bottom:  1px @border-type @content-border-color;
        display: block;
        margin: 2px 2px 2px 0px;
        position: relative;
	    padding-bottom:5px;
	    padding-left: 0.857em ; 
    }
}
@{e-widget}.e-ddl-popup.e-wrap.e-js div > ul li .e-align {
  & when (@skin= "material") {
      margin-top:0px !important;
      margin-right:18px;
  }
  & when (@skin= "office-365") {
      padding-right:12px;
      padding-top:10px;
  }
}
@{e-widget}.e-ddl-popup.e-wrap {
     & when (@skin= "office-365") {
         color:@neutral-light-font;
         font-size:13px;
         font-family:@font-family;
         font-weight:400;
         border-color:@neutral-light;
     }
}
@{e-widget}.e-ddl-popup.e-wrap .e-listbox li {
   & when (@skin= "office-365") {
       line-height:36px;
       background-color: initial;
   }
}
@{e-widget}.e-ddl-popup.e-wrap .e-listbox li.e-select {
   & when (@skin= "office-365") {
        background-color:@theme-lighter;
   }
}
@{e-widget}.e-ddl-popup.e-wrap .e-listbox li.e-hover{
   & when (@skin= "office-365") {
        background-color:@neutral-lighter;
   }
}
@{e-widget}.e-ddl-popup div > .e-listbox li:empty {
    & when (@skin= "office-365") {
        min-height: 36px !important;
    }
}
@{e-widget}.e-ddl-popup.e-js{
    max-height: inherit;
    max-width: inherit;
}
@{e-js}.e-listbox .e-draggable {
    touch-action:none;
} 

/*Theme Color*/

@{e-js}.e-lv .e-list-text
{
     & when (@skin= "material") {
         font-size: 15px;
         font-family: @font-family;
     }
     & when (@skin= "office-365") {
         font-size:13px;
         font-family:@font-family;
         color:@neutral-light-font;
         font-weight:400;
     }
     & when not (@skin= "material") and not (@skin="office-365") {
	     font-size:@font-size;
         font-family: @font-family;
     }
}

/*List Item*/

@{e-js}.e-lv .e-list {
    & when (@skin= "material") {
        border-bottom: none;
        padding:0px 16px;
        height:48px;
        font-size:@font-size;
    }
    & when (@skin= "office-365") {
        border-bottom: none;
        padding:0px 12px;
        height:36px;
        font-size:13px;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        border-bottom: @border-size @border-type @content-border-color;
        font-size:@font-size;
    }
   
}
@{e-js}.e-lv .e-list .e-chevron-right_01.e-fontimage:before{
     & when (@skin= "material") {
         color:fade(@base-font-color,54%);
     }
     & when (@skin= "office-365") {
         color:@neutral-light-font;
     }
     & when not (@skin= "material") and not (@skin="office-365") {
         color:@default-icon-color;
     }
}

@{e-js}.e-lv .e-list.e-state-default {
    background-color: @content-bg-color;
    border-color:@content-border-color;
}
@{e-js}.e-lv .e-list.e-state-default > .e-chevron-right_01 .e-list-text{
     & when (@skin= "material") {
         color:fade(@base-font-color,87%);
         font-weight:400;
     }
     & when (@skin= "office-365") {
         color:@neutral-light-font;
         font-weight:400;
     }
     & when not (@skin= "material") and not (@skin="office-365") {
        color:@content-font-color;
     }
}
@{e-js}.e-lv .e-list.e-state-default:hover {
     & when (@skin= "material") {
        .hover-gradient-material();
        color:@hover-font-color;
     }
     & when (@skin= "office-365") {
         background:@neutral-lighter;
         color:@neutral-light-font;
     }
     & when not (@skin= "material") and not (@skin="office-365") {
        .hover-gradient();
        color:@hover-font-color;
     }
}
@{e-js}.e-lv .e-list.e-state-default:hover > .e-chevron-right_01 .e-list-text{
    color:@hover-font-color;
}
@{e-js}.e-lv .e-list:hover > .e-chevron-right_01.e-fontimage:before{
    color:@hover-icon-color;
}
@{e-js}.e-lv .e-list .e-chevron-right_01:hover{
    color:@hover-font-color;
}
@{e-js}.e-lv .e-list.e-state-active {
    & when (@skin= "material") {
        .active-splitter-gradient();
    }
    & when (@skin= "office-365") {
         background: @theme-lighter;
         color:@neutral-light-font;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        .active-gradient();
        color:@active-font-color;
    }
}
@{e-js}.e-lv .e-list.e-state-active .e-chevron-right_01 .e-list-text{
    & when (@skin= "material") {
         color:fade(@base-font-color,87%);
    }
    & when (@skin= "office-365") {
        color:@neutral-light-font;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
         color:@active-font-color;
    }
}
@{e-js}.e-lv .e-list.e-state-active > .e-chevron-right_01.e-fontimage:before{
    & when (@skin= "material") {
         color:fade(@base-font-color,87%)
    }
    & when (@skin= "office-365") {
        color:@neutral-light-font;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        color:@active-icon-color;
    }
}
/*Search Box*/
@{e-js}.e-lv-inputdiv .e-lv-input {
    border: @border-size @border-type @content-border-color;
    border-radius: 7px;
    font-size: @content-font-size;   
}

@{e-js}.e-lv .e-header {
    & when (@skin= "material") {
         .header-listview-gradient();
          color:fade(@base-font-color,87%);
          padding-left:16px;
          border-bottom:@border-size @border-type @content-border-color;
          height:64px;
          font-family:@font-family;
    }
    & when (@skin= "office-365") {
        color:@neutral-secondary;
        border-top: 1px solid #eaeaea;
        border-left: 1px solid #eaeaea;
        border-right: 1px solid #eaeaea;
        padding-left:12px;
        height:36px;
        font-size:14px;
        font-family:@font-family;
        font-weight:400;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        .header-gradient();
        color:@header-font-color;
        border:@border-size @border-type @header-border-color;
        border-bottom: @tools-border-radius @border-type @active-bg-stcolor;
    }
    .office-dialog-active-line-color;   
}
@{e-js}.e-lv.e-parentlv > .e-lv .e-list-container{
     & when (@skin= "material") {
         border: none;
     }
     & when (@skin= "office-365") {
         border:1px solid #eaeaea;
     }
     & when not (@skin= "material") and not (@skin="office-365") {
         border-left: @border-size @border-type @content-border-color;
         border-right: @border-size @border-type @content-border-color;
         border-top: @border-size @border-type @content-border-color;     
     }
}
@{e-js}.e-lv.e-parentlv > .e-lv.subpage{
    border:none;
}
@{e-js}.e-nb .e-lv .subpage .e-content{
            float:none;
        }
@{e-js}.e-lv > .e-header:hover > .e-icon:before {
      & when not (@skin= "material") {
       color: @hover-icon-color;
      }
}
@{e-js}.e-lv > .e-header >.e-icon:before, @{e-js}.e-lv > .e-header > .e-icon:hover:before {
      & when (@skin= "material") {
          color:fade(@base-font-color, 54%);
      }
      & when not (@skin= "material") {
          color:@header-icon-color;
      }
}
@{e-js}.e-lv .e-list .e-lv-checkdiv.e-template-checkmark, @{e-js}.e-lv .e-template-list .e-list-check div { 
    float:none;
    vertical-align: middle;
    display: table-cell;
}
@{e-js}.e-lv .e-template-list .e-list-check div{
    vertical-align: initial;
}
@{e-js}.e-lv  .e-template-list .e-list-check {
    display:table;
}

@{e-js}.e-lv .e-htitle, @{e-js}.e-lv .e-btn-text {
    & when (@skin= "material") {
       font-size:20px;
       height:40px;
    }
    & when (@skin= "office-365") {
        height:18px;
        padding:7px 7px 7px 0px;
    }
}
@{e-js} .e-htitle, @{e-js} .e-btn-text {
    & when (@skin= "material") {
       font-weight:500;
    }
    & when (@skin= "office-365") {
        font-weight:400;
    }
}
 @{e-js}.e-lv .e-btn-text {
     & when (@skin= "material") {
        padding-left:12px;
     }
 }
 @{e-js}.e-icon.e-chevron-left_01:before {
    & when (@skin= "material") {
       content: "\e74d";
       font-size:18px;
    }
 }
 @{e-js}.e-list-container .e-chkbox-wrap .e-chk-image.e-stop,@{e-js}.e-list-container .e-chkbox-wrap .e-chk-image.e-checkmark {
      & when (@skin= "material") {
          background-color:@accent-color;
      }
}
 @{e-js}.e-list-container .e-chkbox-wrap div>span.e-chk-act,@{e-js}.e-list-container .e-chkbox-wrap div>span.e-chk-indeter {
     & when (@skin= "material") {
         border-color:@accent-color;
     }
 }
 @{e-js}.e-lv .e-list.e-state-default.e-arrow, @{e-js}.e-lv .e-list .e-chevron-right_01 {
    & when (@skin= "material") {
        line-height:1.5;
    }
}
@{e-js}.e-lv .e-list-container .e-chkbox-wrap {
    & when (@skin= "material") {
        margin-top:3px;
    }
    & when (@skin= "office-365") {
        margin-top:3px;
    }
}
@{e-js}.e-lv .e-list-container .e-icon.e-chevron-right_01:before {
    & when (@skin= "office-365") {
        content: "\e69b";
    }
}
@{e-js}.e-lv .e-list .e-chevron-right_01 {
    & when (@skin= "office-365") {
         padding: 0;
         height: 36px;
         line-height: 34px;
    }
}
@{e-js}.e-lv .e-icon.e-chevron-left_01:before {
    & when (@skin= "office-365") {
        content: "\e68b";
    }
}
@{e-js}.e-lv .e-arrow .e-chevron-right_01:before, @{e-js}.e-lv .e-icon.e-chevron-left_01:before {
   & when (@skin= "office-365") {
        font-size:12px;
        padding-top: 1px;
   }
}
@{e-js}.e-lv .e-list .e-lv-checkdiv {
   & when (@skin= "office-365") {
       padding-left:12px;
   }
}
@{e-js}.e-lv.e-slideleft .e-header {
    & when (@skin= "office-365") {
        padding-left: 0;
    }
}
@{e-js}.e-lv.e-slideleft .e-header .e-chevron-left_01 {
    & when (@skin= "office-365") {
        width:36px;
        height:36px;
    }
}
@{e-js}.e-lv .e-icon.e-chevron-left_01:before {
    & when (@skin= "office-365") {
        padding-left: 4px;
    }
} 
@{e-js}.e-list-container .e-load	{
    background-image: @ajaxloaderimage;
	background-position: center;
    background-repeat: no-repeat;
}
@{e-js}.e-lv .e-list-container .e-chkbox-wrap .e-chkbox-small > span{
    & when not (@skin= "material") and not (@skin= "office-365") {
        top: 2px;
    }
}

/* ------- editor less ----------- */

@{e-widget}.e-numeric, @{e-widget}.e-percent,
@{e-widget}.e-currency,@{e-widget}.e-mask
{
    & when (@skin= "office-365") {
        background-color: @neutral-white;
    }
    & when not (@skin= "office-365") {
        background-color: @content-bg-color;
    }
}

@{e-widget}.e-numeric:hover .e-in-wrap, @{e-widget}.e-percent:hover .e-in-wrap,
@{e-widget}.e-currency:hover .e-in-wrap, @{e-widget}.e-mask:hover .e-in-wrap {
    & when (@skin= "material") {
        /*material*/
        box-shadow: none;
    }
    & when (@skin= "office-365") {
        border-color: @neutral-secondary-alt;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        .focus-border-color();
    }
}

@{e-widget}.e-numeric.e-disable-wrap .e-in-wrap, @{e-widget}.e-percent.e-disable-wrap .e-in-wrap,
@{e-widget}.e-currency.e-disable-wrap .e-in-wrap, @{e-widget}.e-mask.e-disable-wrap .e-in-wrap
{
    & when (@skin= "office-365") {
        border-color: @neutral-lighter;
        background: @neutral-lighter;
    }
	& when not (@skin= "material") and not (@skin="office-365") {
		border-color:@disable-control-border-color;
	}
}

@{e-widget}.e-mask.e-disable-wrap .e-placeholder {
            background-color: transparent;
        }

@{e-widget}.e-numeric.e-disable-wrap:hover .e-in-wrap, @{e-widget}.e-percent.e-disable-wrap:hover .e-in-wrap,
@{e-widget}.e-currency.e-disable-wrap:hover .e-in-wrap, @{e-widget}.e-mask.e-disable-wrap:hover .e-in-wrap
{
    & when (@skin= "office-365") {
        border-color: @neutral-lighter;
        background: @neutral-lighter;
    }
    & when not (@skin= "office-365") {
        border-color: @content-border-color;
    }
	box-shadow: none;
}

@{e-widget}.e-numeric.e-disable-wrap:hover .e-in-wrap input.e-input, @{e-widget}.e-percent.e-disable-wrap:hover .e-in-wrap input.e-input,
@{e-widget}.e-currency.e-disable-wrap:hover .e-in-wrap input.e-input, @{e-widget}.e-mask.e-disable-wrap:hover .e-in-wrap input.e-input
{
    box-shadow: none;
}

@{e-widget}.e-numeric .e-in-wrap, @{e-widget}.e-percent .e-in-wrap,
@{e-widget}.e-currency .e-in-wrap, @{e-widget}.e-mask .e-in-wrap {

    & when (@skin= "material") {
        /*material*/
        border-color: fade(@base-font-color,12%);
    }
    & when (@skin= "office-365") {
        border-color: @neutral-tertiary-alt;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        border-color: @content-border-color;
    }
}
.e-widget .e-select.e-disable .e-spin .e-icon,
.e-widget .e-select.e-disable .e-spin
{
	cursor: default;
	& when not (@skin= "material") and not (@skin="office-365") {
		background-color: @disable-icon-bg-color;
	}
}
@{e-widget}.e-numeric .e-input, @{e-widget}.e-percent .e-input,
@{e-widget}.e-currency .e-input, @{e-widget}.e-mask .e-input 
{
     & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,87%);
        background-color: @content-bg-color;
    }
    & when (@skin= "office-365") {
        color: @neutral-primary;
        background-color: @neutral-white;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        color: @content-font-color;
        background-color: @content-bg-color;
    }
}

@{e-widget}.e-numeric.e-focus .e-in-wrap, @{e-widget}.e-percent.e-focus .e-in-wrap,
@{e-widget}.e-currency.e-focus .e-in-wrap, @{e-widget}.e-mask.e-focus .e-in-wrap {
    & when (@skin= "material") {
        /*material*/
        box-shadow: none;
    }
    & when (@skin= "office-365") {
        border-color: @theme-primary;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        box-shadow: 0 0 @shadow-bg-size @shadow-bg-color;
        .focus-border-color();
    }
}

@{e-widget}.e-numeric .e-input.e-error ,
@{e-widget}.e-percent .e-input.e-error ,
@{e-widget}.e-currency .e-input.e-error,
@{e-widget}.e-mask.e-error, @{e-widget}.e-mask .e-error {
    & when (@skin= "material") {
        color: @error-color;
    }
    & when (@skin= "office-365") {
        color: @error-color;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        color: @error-font-color;
    }
}

@{e-widget}.e-numeric.e-error .e-in-wrap, @{e-widget}.e-percent.e-error .e-in-wrap, @{e-widget}.e-currency.e-error .e-in-wrap,@{e-widget}.e-mask.e-error .e-in-wrap {
    border-color: @error-color;
}

@{e-widget}.e-numeric.e-disable-wrap, @{e-widget}.e-percent.e-disable-wrap, @{e-widget}.e-currency.e-disable-wrap, @{e-widget}.e-mask.e-disable-wrap {
	& when not (@skin= "material") and not (@skin="office-365") {
		background-color: @disable-control-background-color;
	}
}

@{e-widget}.e-numeric .e-watermark ,
@{e-widget}.e-percent .e-watermark ,
@{e-widget}.e-currency .e-watermark,
@{e-widget}.e-mask .e-watermark {
	color: @watermark-font-color;
}

.e-widget .e-input.e-placeholder {
    & when (@skin= "material") {
        color: fade(@base-font-color,38%);
    }
    & when (@skin= "office-365") {
        color: @neutral-tertiary;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        color: @content-font-color;
    }
}

.e-validation-error {
    & when (@skin= "office-365") {
        color: @error-color;
    }
}

@{e-widget}.e-numeric .e-select, @{e-widget}.e-numeric.e-rtl .e-select, @{e-widget}.e-numeric .e-disable.e-select:hover,
@{e-widget}.e-percent .e-select, @{e-widget}.e-percent.e-rtl .e-select, @{e-widget}.e-percent .e-disable.e-select:hover,
@{e-widget}.e-currency .e-select, @{e-widget}.e-currency.e-rtl .e-select, @{e-widget}.e-currency .e-disable.e-select:hover {

    & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
        border-color: @content-bg-color;
        color: fade(@base-font-color,54%);
    }
    & when (@skin= "office-365") {
        color: @neutral-dark;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        .bs-default-gradient();
        border-color: @content-border-color;
        color: @default-icon-color;
    }
        
    .border-selection();
}

@{e-widget}.e-numeric .e-select, @{e-widget}.e-numeric.e-rtl .e-select,@{e-widget}.e-numeric .e-disable.e-select:hover,
@{e-widget}.e-percent .e-select , @{e-widget}.e-percent.e-rtl .e-select ,@{e-widget}.e-percent .e-disable.e-select:hover,
@{e-widget}.e-currency .e-select, @{e-widget}.e-currency.e-rtl .e-select,@{e-widget}.e-currency .e-disable.e-select:hover 
{
    & when not (@skin= "office-365") {
        .office-button-bg-color();
    }
}

@{e-widget}.e-numeric .e-select:hover,
@{e-widget}.e-percent .e-select:hover,
@{e-widget}.e-currency .e-select:hover {
    & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
        border-color: @content-bg-color;
        color: fade(@base-font-color,54%);
    }
    & when (@skin= "office-365") {
        color: @neutral-light-font-alt;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        .hover-gradient();
        border-color: @content-border-color;
        color: @hover-icon-color;
    }
}
@{e-widget}.e-numeric:hover .e-select,
@{e-widget}.e-percent:hover .e-select,
@{e-widget}.e-currency:hover .e-select {
    & when (@skin= "office-365") {
        color: @neutral-light-font-alt;
    }
}

@{e-widget}.e-numeric .e-select .e-spin-up.e-active,
@{e-widget}.e-numeric .e-select .e-spin-down.e-active,
@{e-widget}.e-percent .e-select .e-spin-up.e-active,
@{e-widget}.e-percent .e-select .e-spin-down.e-active,
@{e-widget}.e-currency .e-select .e-spin-up.e-active,
@{e-widget}.e-currency .e-select .e-spin-down.e-active {
    & when (@skin= "material") {
        /*material*/
        background: @grey-400;
        border-color: @grey-400;
        color: fade(@grey-light-font,54%);        
    }
    & when (@skin= "office-365") {
        background: @theme-primary;
        color: @theme-primary-font;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        .active-gradient();
        border-color: @active-border-color;
        color: @active-icon-color;
    }
}

@{e-widget}.e-numeric .e-select .e-spin-up:hover,
@{e-widget}.e-numeric .e-select .e-spin-down:hover,
@{e-widget}.e-percent .e-select .e-spin-up:hover,
@{e-widget}.e-percent .e-select .e-spin-down:hover,
@{e-widget}.e-currency .e-select .e-spin-up:hover,
@{e-widget}.e-currency .e-select .e-spin-down:hover {
    & when (@skin= "material") {
        background: @grey-300;
        border-color: @grey-300;
        background: fade(@base-font-color,12%);
        border-color: fade(@base-font-color,12%);
    }
    & when (@skin= "office-365") {
        background: @neutral-lighter;
        color: @neutral-light-font-alt;
    }
}

@{e-widget}.e-numeric .e-select .e-spin-up.e-active:hover,
@{e-widget}.e-numeric .e-select .e-spin-down.e-active:hover,
@{e-widget}.e-percent .e-select .e-spin-up.e-active:hover,
@{e-widget}.e-percent .e-select .e-spin-down.e-active:hover,
@{e-widget}.e-currency .e-select .e-spin-up.e-active:hover,
@{e-widget}.e-currency .e-select .e-spin-down.e-active:hover {
    & when (@skin= "material") {
        background: @grey-400;
        border-color: @grey-400;
    }
    & when (@skin= "office-365") {
        background: @theme-primary;
        color: @theme-primary-font;
    }
}

@{e-widget}.e-numeric.e-disable-wrap .e-select .e-spin-up,
@{e-widget}.e-numeric.e-disable-wrap .e-select .e-spin-down,
@{e-widget}.e-percent.e-disable-wrap .e-select .e-spin-up,
@{e-widget}.e-percent.e-disable-wrap .e-select .e-spin-down,
@{e-widget}.e-currency.e-disable-wrap .e-select .e-spin-up,
@{e-widget}.e-currency.e-disable-wrap .e-select .e-spin-down {
    & when (@skin= "office-365") {
        background: @neutral-lighter;
    }
}

@{e-widget}.e-numeric.e-disable-wrap .e-input, @{e-widget}.e-percent.e-disable-wrap .e-input,
@{e-widget}.e-currency.e-disable-wrap .e-input, @{e-widget}.e-mask.e-disable-wrap .e-input {
    & when (@skin= "material") {
        color: fade(@base-font-color,38%);
    }
    & when (@skin= "office-365") {
        background: @neutral-lighter;
    }
}

@{e-widget}.e-numeric .e-icon .e-arrow,
@{e-widget}.e-percent .e-icon .e-arrow,
@{e-widget}.e-currency .e-icon .e-arrow
{
    border: 0 none transparent;
}


.e-input::-webkit-input-placeholder {
    & when (@skin= "material") {
        /*material*/
        font-style:normal;
        color: fade(@base-font-color,38%);
    }
    & when (@skin= "office-365") {
        color: @neutral-tertiary;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        color: @content-font-color;
    }
}
.e-input:-ms-input-placeholder {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,38%);
    }
    & when (@skin= "office-365") {
        color: @neutral-tertiary;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        color: @content-font-color;
    }
}
.e-input::-moz-placeholder {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,38%);
    }
    & when (@skin= "office-365") {
        color: @neutral-tertiary;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        color: @content-font-color;
    }
}
.e-input:-moz-placeholder {
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,38%);
    }
    & when (@skin= "office-365") {
        color: @neutral-tertiary;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        color: @content-font-color;
    }
}

@{e-widget}.e-numeric .e-input::selection, @{e-widget}.e-percent .e-input::selection,
@{e-widget}.e-currency .e-input::selection, @{e-widget}.e-mask .e-input::selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
    }
    & when (@skin= "office-365") {
        background: @theme-primary;
        color: @theme-primary-font;
    }
}

@{e-widget}.e-numeric .e-input::-moz-selection, @{e-widget}.e-percent .e-input::-moz-selection,
@{e-widget}.e-currency .e-input::-moz-selection, @{e-widget}.e-mask .e-input::-moz-selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
    }
    & when (@skin= "office-365") {
        background: @theme-primary;
        color: @theme-primary-font;
    }
}

@{e-widget}.e-numeric.e-disable-wrap .e-in-wrap, @{e-widget}.e-percent.e-disable-wrap .e-in-wrap,
@{e-widget}.e-currency.e-disable-wrap .e-in-wrap, @{e-widget}.e-mask.e-disable-wrap .e-in-wrap,
@{e-widget}.e-numeric.e-disable-wrap:hover .e-in-wrap, @{e-widget}.e-percent.e-disable-wrap:hover .e-in-wrap,
@{e-widget}.e-currency.e-disable-wrap:hover .e-in-wrap, @{e-widget}.e-mask.e-disable-wrap:hover .e-in-wrap {
    & when (@skin= "material") {
        border-bottom-style: dashed;
        background-image: linear-gradient(to right, fade(@base-font-color,26%) 0%, fade(@base-font-color,26%) 33%, transparent 0%);
        background-image: -ms-linear-gradient(left, transparent 0%, fade(@base-font-color,26%) 100%);
        background-position: bottom -1px left 0;
        background-size: 4px 1px;
        background-repeat: repeat-x;
    }
}

@{e-widget}.e-numeric.e-disable-wrap .e-disable, @{e-widget}.e-percent.e-disable-wrap .e-disable,
@{e-widget}.e-currency.e-disable-wrap .e-disable, @{e-widget}.e-mask.e-disable-wrap .e-disable {
    & when (@skin= "material") {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@{e-widget}.e-numeric .e-disable.e-select, @{e-widget}.e-numeric.e-rtl .e-disable.e-select, @{e-widget}.e-numeric .e-disable.e-select:hover,
@{e-widget}.e-percent .e-disable.e-select, @{e-widget}.e-percent.e-rtl .e-disable.e-select, @{e-widget}.e-percent .e-disable.e-select:hover,
@{e-widget}.e-currency .e-disable.e-select, @{e-widget}.e-currency.e-rtl .e-disable.e-select, @{e-widget}.e-currency .e-disable.e-select:hover {
    & when (@skin= "material") {
        color: fade(@base-font-color,26%);
    }
}

@{e-widget}.e-numeric.e-disable-wrap .e-select .e-spin-up:hover,
@{e-widget}.e-numeric.e-disable-wrap .e-select .e-spin-down:hover,
@{e-widget}.e-percent.e-disable-wrap .e-select .e-spin-up:hover,
@{e-widget}.e-percent.e-disable-wrap .e-select .e-spin-down:hover,
@{e-widget}.e-currency.e-disable-wrap .e-select .e-spin-up:hover,
@{e-widget}.e-currency.e-disable-wrap .e-select .e-spin-down:hover {
    & when (@skin= "material") {
        background: @content-bg-color;
        border-color: @content-bg-color;
    }
}

@{e-widget}.e-numeric .e-in-wrap:before,
@{e-widget}.e-percent .e-in-wrap:before,
@{e-widget}.e-currency .e-in-wrap:before,
@{e-widget}.e-mask .e-in-wrap:before,
@{e-widget}.e-numeric .e-in-wrap:after,
@{e-widget}.e-percent .e-in-wrap:after,
@{e-widget}.e-currency .e-in-wrap:after,
@{e-widget}.e-mask .e-in-wrap:after {
    & when (@skin= "material") {
        background: @accent-color;
    }
}

@{e-widget}.e-numeric .e-select .e-spin-up:after,
@{e-widget}.e-numeric .e-select .e-spin-down:after,
@{e-widget}.e-percent .e-select .e-spin-up:after,
@{e-widget}.e-percent .e-select .e-spin-down:after,
@{e-widget}.e-currency .e-select .e-spin-up:after,
@{e-widget}.e-currency .e-select .e-spin-down:after {
    & when (@skin= "material") {
        background: @grey-400;
    }
}


/* ------- menu less ----------- */
@{e-widget}.e-menu.e-separator.e-horizontal > .e-list,@{e-widget}.e-menu.e-separator.e-horizontal > .e-list:hover,
@{e-widget}.e-menu.e-horizontal > .e-separator.e-list,@{e-widget}.e-menu.e-horizontal > .e-separator.e-list:hover {
     & when (@skin= "material") {
        /*material*/ 
       border-right-color: transparent;              
    } 
    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			/*office-365*/ 
			border-right-color: transparent;              
		} 
		& when not (@skin= "office-365") {
			/*other*/
			border-right-color: @content-border-color; 
		}
    } 
}

@{e-widget}.e-menu.e-horizontal .e-list > ul .e-list.e-separator, 
@{e-widget}.e-menu.e-horizontal .e-list > ul .e-list.e-separator:hover,
@{e-widget}.e-menu.e-vertical .e-list > ul .e-list.e-separator,
@{e-widget}.e-menu.e-vertical .e-list > ul .e-list.e-separator:hover,
@{e-widget}.e-menu.e-context .e-list > ul .e-list.e-separator,
@{e-widget}.e-menu.e-context .e-list > ul .e-list.e-separator:hover,
@{e-widget}.e-menu.e-separator.e-vertical > .e-list, @{e-widget}.e-menu.e-vertical > .e-separator.e-list,
@{e-widget}.e-menu.e-separator.e-vertical > .e-list:hover,@{e-widget}.e-menu.e-vertical > .e-separator.e-list:hover,
@{e-widget}.e-menu.e-context > .e-separator.e-list,@{e-widget}.e-menu.e-context > .e-separator.e-list:hover {
	border-bottom-color: @content-border-color;
}

@{e-widget}.e-menu.e-separator.e-rtl.e-horizontal > .e-list,@{e-widget}.e-menu.e-rtl.e-horizontal > .e-separator.e-list, @{e-widget}.e-menu.e-rtl.e-horizontal > .e-separator.e-list:hover {
    border-left-color:@content-border-color;
}
/*---------------------theming----------------------------------*/
@{e-widget}.e-menu.e-horizontal .e-list > .e-menulink,
@{e-widget}.e-menu.e-vertical .e-list > .e-menulink,
@{e-widget}.e-menu.e-context .e-list > .e-menulink,
@{e-widget} .e-menu-res-wrap .e-menu-res-in-wrap .e-res-title, @{e-widget}.e-menu.e-vertical {
    & when (@skin="material") {  
        color: fade(@base-font-color,87%); 
   }
   & when not (@skin= "material") {
		& when (@skin="office-365") {  
			color: @neutral-light-font;
			font-weight: 400;
			font-size: 14px;
		}
		& when not (@skin= "office-365") {
			color: @content-font-color;
		}
   }
}

@{e-widget}.e-menu,.e-menu-res-wrap .e-in-wrap.e-menu-res-in-wrap,@{e-widget}.e-menu.e-vertical,@{e-widget}.e-menu.e-vertical .e-list > ul,@{e-widget}.e-menu.e-context,.e-menu.e-context .e-list > ul {   
    & when (@skin= "material") {
        /*material*/ 
       border-color: transparent;     
    } 
    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			border-color: @neutral-light;
		}
		& when not (@skin= "office-365") {
			/*other*/ 
			border-color: @content-border-color;
		}
    }
       background: @content-bg-color;
}


@{e-widget}.e-menu.e-horizontal .e-list > ul {
  background: @content-bg-color;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   & when (@skin= "material") {
        /*material*/
        border-color: transparent;               
    }

    & when not (@skin= "material") {
        /*other*/
        border-color: @content-border-color;
    }
}
@{e-widget}.e-menu.e-horizontal > .e-list.e-active > span.e-menu-arrow > span.e-arrowMenuOuter{

  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  left :0px;
  top : 0px;
  border-bottom: 10px solid @hover-bg-stcolor;
  position : absolute;
 }

 @{e-widget}.e-menu.e-horizontal > .e-list.e-active > span.e-menu-arrow > span.e-arrowMenuInner{
    width: 0; 
    height: 0; 
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
   border-bottom: 9px solid @content-bg-color;
    left : 1px;
   top : 1px;
    position : absolute;
}

@{e-widget}.e-menu.e-horizontal .e-list:hover,
@{e-widget}.e-menu.e-vertical .e-list:hover,
@{e-widget}.e-menu.e-context .e-list:hover {
   & when (@skin="material") {  
      background: fade(@base-font-color,12%);
   }
   & when not (@skin= "material") {
		& when (@skin="office-365"){
			background-color: @neutral-lighter;
			color: @neutral-dark;
		}
		& when not (@skin= "office-365"){
			.hover-gradient();
			border-color: @hover-bg-stcolor;
		}
   }
}
@{e-widget}.e-menu.e-horizontal .e-list >ul li.e-haschild:hover,
@{e-widget}.e-menu.e-vertical .e-list >ul li.e-haschild:hover,
@{e-widget}.e-menu.e-context .e-list >ul li.e-haschild:hover {
    .bs-hover-gradient(); 
    border-color: @hover-bg-stcolor;      
}
@{e-widget}.e-menu.e-horizontal .e-list >ul li.e-haschild:hover > .e-menulink,
@{e-widget}.e-menu.e-vertical .e-list >ul li.e-haschild:hover > .e-menulink,
@{e-widget}.e-menu.e-context .e-list >ul li.e-haschild:hover > .e-menulink {
     .bs-hover-gradient();   
    .hover-font-color();
}

@{e-widget}.e-menu.e-horizontal .e-list:hover > .e-menulink,
@{e-widget}.e-menu.e-vertical  .e-list:hover > .e-menulink,
@{e-widget}.e-menu.e-context .e-list:hover > .e-menulink{
  color: @hover-font-color;
}

@{e-widget}.e-menu.e-horizontal .e-list.e-active,
@{e-widget}.e-menu.e-vertical .e-list.e-active,
@{e-widget}.e-menu.e-context .e-list.e-active {
    & when (@skin= "material") {
       /*material*/
        background: fade(@base-font-color,12%);
    }
    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			background-color: @theme-primary;
			color: @theme-primary-font;
		}
		 & when not (@skin= "office-365") {
			/*other*/
			.active-gradient();
			color:@active-font-color;
			border-color: @active-bg-stcolor;
		}
    } 

}

@{e-widget}.e-menu.e-horizontal .e-list.e-active,
@{e-widget}.e-menu.e-vertical .e-list.e-active,
@{e-widget}.e-menu.e-context .e-list.e-active {
    & when (@skin= "material") {
       /*material*/
      background: fade(@base-font-color,12%);
      color: fade(@base-font-color,87%);
    }
   
}

@{e-widget}.e-menu.e-horizontal .e-list >ul li.e-haschild.e-active > .e-menulink,
@{e-widget}.e-menu.e-vertical .e-list >ul li.e-haschild.e-active > .e-menulink,
@{e-widget}.e-menu.e-context .e-list >ul li.e-haschild.e-active > .e-menulink {
   & when (@skin= "material") {
        /*material*/
        background: none;
       color: none;
       border-color: none;
    }
    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			border-color: none;
			background-color: @theme-lighter;
			color : @theme-light-font;
		}
		& when not (@skin= "office-365") {
			 /*other*/
			.active-gradient();
			border-color: @active-bg-stcolor;
			color:@active-font-color;
		}
    } 
}

@{e-widget}.e-menu.e-horizontal .e-list.e-active > .e-menulink,
@{e-widget}.e-menu.e-vertical  .e-list.e-active > .e-menulink,
@{e-widget}.e-menu.e-context .e-list.e-active > .e-menulink,
@{e-widget}.e-menu.e-horizontal .e-list.e-active:hover,
@{e-widget}.e-menu.e-vertical .e-list.e-active:hover,
@{e-widget}.e-menu.e-context .e-list.e-active:hover{
      & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,87%);
    }

    & when not (@skin= "material") {
        /*other*/
		& when (@skin= "office-365"){
			color: @theme-primary-font;
		}
		& when not (@skin= "office-365"){
        	color: @active-font-color;
		}
    } 
}


@{e-widget}.e-menu .e-list > a .e-icon,@{e-widget}.e-menu .e-list > span > .e-icon{
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,54%);
    }
    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			color: @neutral-light-font;
		}
		& when not (@skin= "office-365") {
			/*other*/
			color:@default-icon-color;
		}
    }
}
@{e-widget}.e-menu .e-list.e-active>.e-menulink>span.e-icon.e-arrowhead-right {
	& when (@skin= "office-365") {
		color: @theme-light-font;
	}
}
@{e-widget}.e-menu .e-list:hover > a .e-icon,@{e-widget}.e-menu .e-list:hover > span > .e-icon{
	& when (@skin= "office-365") {
		color: @neutral-dark;
	}
	& when not (@skin= "office-365") {
		color:@hover-icon-color
	}
}
@{e-widget}.e-menu .e-list.e-active > a >.e-icon,@{e-widget}.e-menu .e-list.e-active > span > .e-icon,@{e-widget}.e-menu .e-list.e-active:hover > a >.e-icon,@{e-widget}.e-menu .e-list.e-active:hover > span > .e-icon{
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,54%);
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			color: @theme-primary-font;
		}
		& when not (@skin= "office-365") {
			color:@active-icon-color;
		}
    }  
}


/*----------------------------------- disabled items ----------------------------------*/
@{e-widget}.e-menu.e-horizontal .e-list.e-disable-item,
@{e-widget}.e-menu.e-vertical .e-list.e-disable-item,
@{e-widget}.e-menu.e-context .e-list.e-disable-item{
    background-color: transparent;
}
@{e-widget}.e-menu.e-horizontal .e-list.e-disable-item .e-icon,
@{e-widget}.e-menu.e-vertical .e-list.e-disable-item .e-icon,
@{e-widget}.e-menu.e-context .e-list.e-disable-item .e-icon{
    color: @default-icon-color;
}
@{e-widget}.e-menu.e-horizontal  .e-list.e-disable-item *,
@{e-widget}.e-menu.e-vertical .e-list.e-disable-item *,
@{e-widget}.e-menu.e-context  .e-list.e-disable-item *{
   filter: alpha(opacity=40);
   opacity: 0.4;
}
@{e-widget}.e-menu.e-horizontal  .e-list.e-disable-item .e-menulink:hover,
@{e-widget}.e-menu.e-horizontal  .e-list.e-disable-item:hover,
@{e-widget}.e-menu.e-vertical  .e-list.e-disable-item .e-menulink:hover,
@{e-widget}.e-menu.e-vertical  .e-list.e-disable-item:hover,
@{e-widget}.e-menu.e-context  .e-list.e-disable-item .e-menulink:hover,
@{e-widget}.e-menu.e-context  .e-list.e-disable-item:hover {
    background-color: transparent;
    background-image:none;
	color: @content-font-color;
	cursor: default;
}
@{e-widget}.e-menu.e-horizontal .e-mhover,@{e-widget}.e-menu.e-context .e-mhover,@{e-widget}.e-menu.e-vertical .e-mhover,
@{e-widget}.e-menu.e-horizontal .e-mhover > .e-menulink,
@{e-widget}.e-menu.e-context .e-mhover > .e-menulink,
@{e-widget}.e-menu.e-vertical .e-mhover > .e-menulink,
@{e-widget}.e-menu.e-horizontal .e-mfocused,@{e-widget}.e-menu.e-context .e-mfocused,@{e-widget}.e-menu.e-vertical .e-mfocused,
@{e-widget}.e-menu.e-horizontal .e-mfocused > .e-menulink,
@{e-widget}.e-menu.e-context .e-mfocused > .e-menulink,
@{e-widget}.e-menu.e-vertical .e-mfocused > .e-menulink,.e-menu-res-wrap .e-menu-res-in-wrap .e-icon.e-check-wrap:hover
{
    & when (@skin= "material") {
        /*material*/
        background: fade(@base-font-color,12%);
    }

    & when not (@skin= "material") {
        /*other*/
		& when (@skin="office-365") {
			background-color: @neutral-lighter;
		}
		& when not (@skin="office-365") {
			.hover-gradient();
			color: @hover-font-color;
			border-color: @hover-bg-stcolor;
		}
    }  
	 
}
@{e-widget}.e-menu.e-horizontal .e-active,@{e-widget}.e-menu.e-context .e-active,@{e-widget}.e-menu.e-vertical .e-active,
@{e-widget}.e-menu.e-horizontal .e-active > .e-menulink,
@{e-widget}.e-menu.e-context .e-active > .e-menulink,
@{e-widget}.e-menu.e-vertical .e-active > .e-menulink,
@{e-widget}.e-menu.e-horizontal .e-active,@{e-widget}.e-menu.e-context .e-active,@{e-widget}.e-menu.e-vertical .e-active,
@{e-widget}.e-menu.e-horizontal .e-active > .e-menulink,
@{e-widget}.e-menu.e-context .e-active > .e-menulink,
@{e-widget}.e-menu.e-vertical .e-active > .e-menulink,.e-menu-res-wrap .e-menu-res-in-wrap .e-icon.e-check-wrap:hover
{
      & when (@skin= "material") {
        /*material*/
        background: fade(@base-font-color,12%); 
    }

    & when not (@skin= "material")  {
        /*other*/
      .active-gradient();
     color: @active-font-color;
     border-color: @hover-bg-stcolor;
    }
}

@{e-widget}.e-menu.e-horizontal .e-active,@{e-widget}.e-menu.e-context .e-active,@{e-widget}.e-menu.e-vertical .e-active,
@{e-widget}.e-menu.e-horizontal .e-active > .e-menulink,
@{e-widget}.e-menu.e-context .e-active > .e-menulink,
@{e-widget}.e-menu.e-vertical .e-active > .e-menulink,
@{e-widget}.e-menu.e-horizontal .e-active,@{e-widget}.e-menu.e-context .e-active,@{e-widget}.e-menu.e-vertical .e-active,
@{e-widget}.e-menu.e-horizontal .e-active > .e-menulink,
@{e-widget}.e-menu.e-context .e-active > .e-menulink,
@{e-widget}.e-menu.e-vertical .e-active > .e-menulink,.e-menu-res-wrap .e-menu-res-in-wrap .e-icon.e-check-wrap:hover
{
    & when (@skin= "material") {
        /*material*/
        background: fade(@base-font-color,12%); 
    }
    & when not (@skin= "material")  {
        /*other*/
     .material-menu-active-bg-color;
    } 
}
.e-menu-res-wrap .e-menu-res-in-wrap .e-icon.e-check-wrap {
	& when (@skin="office-365") {
		color: @theme-light-font;
	}
}
.e-menu-res-wrap .e-menu-res-in-wrap .e-icon.e-check-wrap:hover {
	& when (@skin="office-365") {
		color: @neutral-light-font-alt;
	}
	& when not (@skin="office-365") {
		.hover-gradient();
		color: @active-font-color;
	}
	border-color: @hover-bg-stcolor;
}
.e-menu-res-wrap .e-menu-res-in-wrap .e-icon.e-check-wrap:active {
	& when not (@skin="office-365") {
		.active-gradient();
	}
     color: @active-font-color;
     border-color: @hover-bg-stcolor;
}
@{e-widget}.e-menu.e-horizontal>.e-list span.e-menu-left {
     & when (@skin= "material") {
        /*material*/
        display: none !important;
    }
    & when not (@skin= "material") {
        /*other*/
       display: block;
    }
}
@{e-widget}.e-menu .e-list>.e-menulink>span.e-icon.e-arrowhead-down {
     & when (@skin= "material") {
        /*material*/
        display: none;
    }
    & when not (@skin= "material") {
        /*other*/
       display: block;
    }
}
@{e-widget}.e-menu.e-horizontal>.e-ham-wrap{
		 background:@content-bg-color;
		 border-left-color:@content-border-color;
}
@{e-widget}.e-menu.e-horizontal>.e-ham-wrap:hover {
    .hover-gradient();
     color: @active-font-color;
     border-color: @hover-bg-stcolor;
}
@{e-widget}.e-menu.e-horizontal>.e-ham-wrap:active {
     & when (@skin= "material") {
        /*material*/
        background: fade(@base-font-color,12%); 
    }
    & when not (@skin= "material") {
        /*other*/
    .active-gradient();
    }
     color: @active-font-color;
     border-color: @hover-bg-stcolor;
}

@{e-widget}.e-menu.e-horizontal>.e-ham-wrap>div>.e-hamburger{
	border-top-color:@content-font-color;
	border-bottom-color:@content-font-color;
}
@{e-widget}.e-menu.e-horizontal>.e-ham-wrap>div>.e-hamburger:before{
	border-top-color:@content-font-color;
 }
 .e-menu-wrap>.e-menu-popwrap{
	border-color:@content-border-color;
 }
.e-menu-wrap>.e-menu-popwrap>.e-menu{
	background-color:@content-bg-color;	
}

@{e-widget}.e-menu .e-list ul:first-child li:first-child{
    & when (@skin= "material") {
        /*material*/
        margin-top: 21px;
    }
}

@{e-widget}.e-menu.e-context>.e-separator.e-list{
     & when (@skin= "material") {
        /*material*/
           border-bottom: 1px solid fade(@base-font-color,12%);
    }
}


@{e-js}.e-progressbar 
{ 
    & when (@skin= "material") {
        /*material*/  
	   background-color: fade(@base-font-color,12%);  
	   border-color: transparent;   
       height: 5px !important;         
    } 
    & when not (@skin= "material") {
        /*other*/ 
     & when (@skin= "office-365") {
	    background-color: @neutral-light;  
	    border-color: @neutral-light; 
        height: 2px !important;
        margin-top: 10px;
        margin-bottom: 10px;
        }
        & when not (@skin= "office-365") {
	    background-color: @content-bg-color;  
	    border-color: @content-border-color; 
        }
    }  
	color: @content-font-color;
}
@{e-js}.e-progressbar .e-progress 
{
    & when (@skin= "material") {
        /*material*/ 
        background: @accent-color;                
    } 
    & when not (@skin= "material") {
        /*other*/
        .active-gradient();
    }  
}


/*------------Rating themes -------------*/

   @{e-widget}.e-rating.e-horizontal .e-shape,
   @{e-widget}.e-rating.e-vertical .e-shape,
   @{e-widget}.e-rating.e-horizontal .e-shape-list,
   @{e-widget}.e-rating.e-vertical .e-shape-list,
   @{e-widget}.e-rating.e-horizontal .e-reset, 
   @{e-widget}.e-rating.e-vertical .e-reset
    { 
        & when (@skin= "office-365") {
            background: none;
        }
        & when not (@skin= "office-365") {
            background: @ratingimage no-repeat;
            height: 16px;
            width: 16px; 
        } 
    }
   @{e-widget}.e-rating.e-horizontal .e-reset, 
   @{e-widget}.e-rating.e-vertical .e-reset
    {  
        & when (@skin= "office-365") {
            background: @ratingresetimage no-repeat;
            margin: 1px;
        }
    }
   @{e-widget}.e-rating.e-horizontal .e-shape.selected,
   @{e-widget}.e-rating.e-horizontal .e-shape.active,
   @{e-widget}.e-rating.e-vertical .e-shape.selected,
   @{e-widget}.e-rating.e-vertical .e-shape.active  
    { 
        & when (@skin= "office-365") {
           background: @ratingactiveimage no-repeat;
        } 
    }
   @{e-widget}.e-rating.e-horizontal .e-shape.inactive,
   @{e-widget}.e-rating.e-vertical .e-shape.inactive,
   @{e-widget}.e-rating.e-horizontal .e-shape-list,
   @{e-widget}.e-rating.e-vertical .e-shape-list  
    { 
        & when (@skin= "office-365") {
           background: @ratingnormalimage no-repeat;
        } 
    }
   @{e-widget}.e-rating .e-shape.inactive
    {
     & when (@skin="material") {  
      background-position: 0 -174px; 
    }

    &when not(@skin="material") { 
        background-position: 0 -174px;
    }
    }

   @{e-widget}.e-rating .e-shape.active
    {
     & when (@skin="material") {  
      background-position: -1px -29px;
    }

    &when not (@skin="material") { 
        & when (@skin= "office-365") {
           background-position: 0 0;;
        } 
        & when not (@skin= "office-365") {
           background-position: 0 -60px;
        }  
    }
    }

   @{e-widget}.e-rating .e-shape.selected
    {
     & when (@skin="material") {  
      background-position: -1px -29px;
    }

    &when not(@skin="material") { 
        background-position: 0 -60px;
    }
    }
   @{e-widget}.e-rating.e-disable .e-shape,
   @{e-widget}.e-rating.e-disable .e-shape-list,
   @{e-widget}.e-rating.e-disable .e-reset
    {
        cursor: default;
    }
   @{e-widget}.e-rating.e-horizontal .e-reset:hover,
   @{e-widget}.e-rating.e-vertical .e-reset:hover
    {
     & when (@skin="material") {  
      background-position: 0px 0px;
    }

    &when not(@skin="material") { 
        & when (@skin= "office-365") {
           background-position: 2px 2px; 
        } 
        & when not (@skin= "office-365") {
            background-position: 0 -30px;
        }
    }
    }

   @{e-widget}.e-rating.e-horizontal .e-reset, 
   @{e-widget}.e-rating.e-vertical .e-reset, 
   @{e-widget}.e-rating.e-disable .e-reset:hover
    {
         & when (@skin= "office-365") {
           background-position: 2px 2px; 
        } 
        & when not (@skin= "office-365") {
        background-position: 0 0;
        margin-left: 2px;
        }
    }
   @{e-widget}.e-rating.e-vertical .e-reset,@{e-widget}.e-rating.e-vertical .e-reset:hover{
         & when (@skin= "office-365") {
           margin-left: 4px;
           background-position: 0 0;  
        }
    }

    @{e-widget}.e-rating.e-horizontal .e-shape-list,
    @{e-widget}.e-rating.e-vertical .e-shape-list
    {
     & when (@skin="material") {  
       background-position: 0 -91px;
        float: left;
    }

    &when not(@skin="material") { 
        & when (@skin= "office-365") {
           background-position: 0 0;
		    float: left;
        } 
        & when not (@skin= "office-365") {
          background-position: 0 -174px;
		    float: left;
        }
    }
    }
	


/*------------------------------------- Rotator -------------------------------------------*/
@{e-widget}.e-rotator-wrap :focus {
     outline: 0 none;
}
@{e-widget}.e-rotator-wrap .e-in-wrap .e-single, @{e-widget}.e-rotator-wrap .e-thumb .e-thumb-items li , @{e-widget}.e-rotator-wrap .e-in-wrap.e-multiple{
    .high-contrast-rotator-default-border;
    border-color: @default-border-color;  
}
@{e-widget}.e-rotator-wrap .e-thumb .e-thumb-items li:hover {
      & when (@skin= "material") {
        border-color: @grey-200;
        }
      & when not (@skin= "material") {
        border-color: @hover-border-color;
        }
}
@{e-widget}.e-rotator-wrap .e-thumb .e-thumb-items li.e-active,
@{e-widget}.e-rotator-wrap.e-disable .e-thumb .e-thumb-items li.e-active:hover {
    & when (@skin= "material") {
        border-color: @grey-200;
        }
    & when not (@skin= "material") {
        border-color: @active-border-color;
        }
}
@{e-widget}.e-rotator-wrap .e-thumb .e-thumb-items li.e-thumbhover {
     border-color: @hover-border-color;
}
@{e-widget}.e-rotator-wrap.e-disable .e-thumb .e-thumb-items li:hover,
@{e-widget}.e-rotator-wrap.e-disable .e-thumb .e-thumb-items li.e-thumbhover {
     border-color: @default-border-color;
}
@{e-widget}.e-rotator-wrap .e-inner .e-caption {
    & when (@skin= "material") {
       color: @primary-font-color;
       opacity:1.5;
    }
    & when not (@skin= "material") {
       background-color: @content-bg-color;
       color: @content-font-color;
    }
}
@{e-widget}.e-rotator-wrap .e-pager-wrap .e-bullet > li:hover {
    .office-rotator-pager-hover-border;
     border-color: @hover-border-color;
	& when (@skin= "material") {
      background-color:@primary-font-color;
    }
    & when (@skin= "office-365") {
        background-color: @neutral-tertiary;
    }
    & when not (@skin= "material") and not (@skin= "office-365") {
      background-color:@hover-bg-stcolor;
    }
}
@{e-widget}.e-rotator-wrap.e-disable .e-pager-wrap .e-bullet > li:hover {
     border-color: @default-border-color;
     background-color: @default-bg-stcolor;
}
@{e-widget}.e-rotator-wrap.e-disable .e-pager-wrap .e-bullet > li {
	cursor: default;
}
@{e-widget}.e-rotator-wrap .e-pager-wrap .e-bullet > li.e-active, 
@{e-widget}.e-rotator-wrap.e-disable .e-pager-wrap .e-bullet > li.e-active:hover{
    & when (@skin= "material") {
        width:16px;
        height:16px;
        margin-bottom:0px; 
        }
    & when not (@skin= "material") {
    border-color: @active-border-color;
	background-color:@active-bg-stcolor;
    }
}
@{e-widget}.e-rotator-wrap .e-pager-wrap .e-bullet > li {
    .high-contrast-rotator-pager-border;
	border-color:@default-border-color;
     & when (@skin= "material") {
         height:8px;
         width:8px;
         background-color:@primary-font-color;
     }
     & when (@skin= "office-365") {
         background-color:@neutral-quaternary-alt;
     }
     & when not (@skin= "material") and not (@skin= "office-365") {
         background-color:@default-bg-stcolor;
	 }
}

@{e-widget}.e-rotator-wrap .e-in-wrap .e-nav-btn.e-icon,@{e-widget}.e-rotator-wrap .e-thumb-nav .e-thumb-btn.e-icon{
background-image:url(images/rotator-icon.png);
}
@{e-widget}.e-rotator-wrap .e-in-wrap .e-nav-btn.e-icon.play{
 background-position: -161px  -0px;
    & when (@skin= "office-365") {
        background-position: -186px -0px;
    }
}
@{e-widget}.e-rotator-wrap .e-in-wrap .e-nav-btn.e-icon.pause{
 background-position: -248px -0px;
    & when (@skin= "office-365") {
        background-position: -273px -0px;
    }
}
@{e-widget}.e-rotator-wrap .e-in-wrap .e-nav-btn.e-icon.e-previous{
 background-position: -64px -15px;
    & when (@skin= "office-365") {
       background-position: -69px -15px;
    }
}
@{e-widget}.e-rotator-wrap .e-in-wrap .e-nav-btn.e-icon.e-next{
 background-position: -109px -15px;
    & when (@skin= "office-365") {
       background-position: -126px -15px;
    }
}
@{e-widget}.e-rotator-wrap .e-thumb-nav .e-thumb-btn.e-icon.e-previous{
    & when (@skin= "material") {
        background:none;
    }
    & when (@skin= "office-365") {
        background-position: 11px -15px;
    }
    & when not (@skin= "material") and not (@skin= "office-365") {
       background-position: 8px -18px;
    }
}
@{e-widget}.e-rotator-wrap .e-thumb-nav .e-thumb-btn.e-icon.e-next{
    & when (@skin= "material") {
        background:none;
    }
    & when (@skin= "office-365") {
        background-position: -22px -15px;
    }
    & when not (@skin= "material") and not (@skin= "office-365") {
        background-position: -27px -18px;
    }
}
@{e-widget}.e-rotator-wrap .e-pager-wrap .e-bullet {
     & when (@skin= "material") {
         padding-top:20px;
         }
}
@{e-widget}.e-rotator-wrap .e-pager-wrap .e-bullet > li:hover, @{e-widget}.e-rotator-wrap .e-pager-wrap .e-bullet > li.e-active {
     & when (@skin= "material") {
         border-color:#e0e0e0;
     }
}
@{e-widget}.e-rotator-wrap .e-inner .e-caption > span {
  & when (@skin= "material") {
      font-size:20px;
      margin-left:24px;
      margin-bottom:24px;
      font-family: @font-family;
    }
} 
@{e-widget}.e-rotator-wrap .e-thumb-nav .e-thumb-btn.e-icon.e-previous:before {
& when (@skin= "material") {
    content:"\e630";
    }
}
@{e-widget}.e-rotator-wrap .e-thumb-nav .e-thumb-btn.e-icon.e-next:before {
& when (@skin= "material") {
    content:"\e62f";
    }
}
@{e-widget}.e-rotator-wrap .e-thumb-nav .e-thumb-btn {
  & when (@skin= "material") {
    height: 36px;
    width: 36px;
    font-size:20px;
  }
}
 @{e-widget}.e-rotator-wrap .e-thumb-nav .e-thumb-btn.e-icon {
      & when (@skin= "material") {
          color:fade(@base-font-color,54%);
      }
 }
 @{e-widget}.e-rotator-wrap.e-Focused .e-shadow {
      & when (@skin= "material") {
           box-shadow:0 0 9px rgba(0,0,0,0) !important;
      }
 }
 



/*------------------------------------- slider -------------------------------------------*/

.e-slider.e-widget 
{
    & when (@skin= "material") {
        background-color: @grey-400;
        background-color: fade(@base-font-color, 26%);
    }
    & when (@skin= "office-365") {
        background-color: @neutral-tertiary-alt;
    }
    & when not (@skin= "material") and not (@skin= "office-365") {
        background-color: @content-bg-color;
        border-color: @content-border-color;
    }
}
.e-tooltipbox
{
    & when (@skin= "material") {
        background-color: @grey-700;
        border-color: @grey-700;
        color: @grey-dark-font;
    }
    & when (@skin= "office-365") {
        background-color: @neutral-lighter;
        border-color: @neutral-secondary-alt;
        color: @neutral-light-font;
    }
    & when not (@skin= "material") and not (@skin= "office-365"){
        .tooltip-colors(); 
    }
}
@{e-widget}.e-slider .e-handle.e-select 
{
    & when (@skin= "material") {
        background-color: @accent-color;
	    border-color: @accent-color;
    }
    & when (@skin= "office-365") {
        background-color: @neutral-white;
	    border-color: @neutral-secondary;
    }
    & when not (@skin= "material") and not (@skin= "office-365"){
        .office-silder-handle-bg-color;
        background-color: @default-bg-stcolor;
        .office-silder-handle-border-color;
        border-color: @default-border-color;
    }
}
@{e-widget}.e-slider .e-handle.e-hover 
{
    & when (@skin= "material") {
        background-color: @accent-color;
	    border-color: @accent-color;
    }
    & when not (@skin= "material") and not (@skin= "office-365") {
        background-color: @hover-bg-stcolor;
        .office-silder-handle-hover-border-color;
        border-color: @hover-border-color;
    }
}
@{e-widget}.e-slider .e-handle.e-focus 
{
    & when (@skin= "material") {
        background-color: @accent-color;
	    border-color: @accent-color;
    }
    & when not (@skin= "material") and not (@skin= "office-365")  {
        .high-contrast-stylefor-silder-active;
        background-color:@hover-bg-stcolor;
        box-shadow: 0 0 2px @shadow-bg-color;
        border-color:@active-bg-stcolor;
    }
}
@{e-widget}.e-slider .e-range  {
     & when (@skin= "material") {
		background: @accent-color;
     }
     & when (@skin= "office-365") {
        background: @neutral-secondary;
     }
     & when not (@skin= "material") and not (@skin= "office-365") {
        .active-gradient();
     }
}

.e-slider-wrap:hover .e-slider.e-widget {
    & when (@skin= "office-365") {
        background-color: @theme-light;
    }
}

@{e-widget}.e-slider-wrap:hover .e-slider .e-range {
    & when (@skin= "office-365") {
        background-color: @theme-primary;
        border-color: @theme-primary;
    }
}

.e-slider-wrap:active .e-slider.e-widget {
    & when (@skin= "office-365") {
        background-color: @theme-light;
    }
}

@{e-widget}.e-slider-wrap:active .e-slider .e-range {
    & when (@skin= "office-365") {
        background-color: @theme-dark-alt;
        border-color: @theme-dark-alt;
    }
}

@{e-widget}.e-slider-wrap:hover .e-slider .e-handle {
    & when (@skin= "office-365") {
        border-color: @theme-primary;
    }
}

@{e-widget}.e-slider-wrap:active .e-slider .e-handle {
    & when (@skin= "office-365") {
        border-color: @theme-dark-alt;
    }
}

.e-slider-wrap.e-disable .e-slider.e-widget {
    & when (@skin= "office-365") {
        background-color: @neutral-light;
    }
}

@{e-widget}.e-slider-wrap.e-horizontal.e-scale-wrap .e-slider.e-js,
@{e-widget}.e-slider-wrap.e-default-wrap.e-horizontal.e-scale-wrap .e-slider.e-js,
@{e-widget}.e-slider-wrap.e-vertical.e-scale-wrap .e-slider.e-js,
@{e-widget}.e-slider-wrap.e-default-wrap.e-vertical.e-scale-wrap .e-slider.e-js {
    & when (@skin= "office-365") {
        border-color: @widget-bg-color;
    }
}
@{e-widget}.e-slider-wrap.e-disable .e-slider .e-range{
    & when (@skin= "material") {
        background-color: fade(@base-font-color, 26%);
	    border-color: fade(@base-font-color, 26%);
    }
    & when (@skin= "office-365") {
        background-color: @neutral-tertiary-alt;
		border-color: @neutral-tertiary-alt;
    }
}

@{e-widget}.e-slider-wrap.e-disable, @{e-widget}.e-slider.e-disable{
    & when (@skin= "material"), (@skin= "office-365") {
        opacity: 1;
    }
}
@{e-widget}.e-slider-wrap.e-disable .e-handle.e-select{
    & when (@skin= "material") {
        border-color: @content-bg-color;
        background-color: @grey-400;
    }
    & when (@skin= "office-365") {
        border-color: @neutral-tertiary-alt;
    }
}
@{e-widget} .e-scale .e-tick 
{
    background-image: @slider-tick;
}
@{e-widget}.e-slider-wrap .e-scale .e-tick .e-tick-value {
     & when (@skin= "material") {
		color: fade(@base-font-color, 87%);
     }
     & when (@skin= "office-365") {
		color: @neutral-secondary;
     }
     & when not (@skin= "material") and not (@skin= "office-365") {
        color: @default-font-color;
     }
    
}
@{e-widget}.e-slider .e-handle.e-select.e-handle-start{
    & when (@skin= "material") {
        background-color: @content-bg-color;
	    border-color: fade(@base-font-color, 26%);
    }	
}
@{e-widget}.e-slider .e-handle.e-select.e-handle-start.e-focus{
    & when (@skin= "material") {
	    border-color: fade(@base-font-color, 38%);
    }	
}
@{e-widget}.e-slider-wrap.e-disable .e-handle.e-select.e-handle-start:after{
    & when (@skin= "material") {
        border-color: @content-bg-color;
    }
}
@{e-widget}.e-slider .e-handle.e-select.e-focus:not(.e-no-tab):after{
    & when (@skin= "material") {
        border-color: @accent-color;
	    background-color: @accent-color;
    }
}
@{e-widget}.e-slider .e-handle.e-select.e-focus.e-handle-start:not(.e-no-tab):after{
    & when (@skin= "material") {
        border-color: fade(@base-font-color, 24%);
	    background-color: fade(@base-font-color, 24%);       
    }
}
@{e-widget}.e-slider .e-handle.e-select.e-focus.e-handle-start:not(.e-no-tab){
    & when (@skin= "material") {        
         border-color: fade(@base-font-color, 24%);
        background-color: @content-bg-color;
    }
}

@{e-widget}.e-slider-wrap.e-disable .e-slider .e-handle:after{
     & when (@skin= "material") {
	    background-color: @content-bg-color;
    }
}


@{e-widget}.e-slider-wrap .e-sliderbtn:not(.e-animate).e-select:not(:active):after {
        & when (@skin= "material") {
            background-color:@gtouch-border-color;
    }
        }



/*------------------------------------- splitter -------------------------------------------*/

@{e-js}.e-splitter { 
    border-color: @content-border-color; 
}
@{e-js}.e-splitter .e-pane {
    background-color: @content-bg-color;
    color: @content-font-color;
}
 @{e-js}.e-splitter .e-splitbar.e-shadowbar.e-end-indicaton,
@{e-js}.e-splitter .e-splitbar .e-end-indicaton {
    background-color: @error-bg-color; 
}
@{e-js}.e-splitter .e-splitbar.e-shadowbar {
     & when (@skin= "material") {
         .active-splitter-gradient();
     }
      & when not (@skin= "material") {
         .active-gradient();
     }   
}
@{e-js}.e-splitter .e-splitbar {
   & when (@skin= "material") {
     background-color: @grey-300;
   }
   & when not (@skin= "material") {
      background-color: @content-bg-color;
   }
   border-color: @content-border-color;
}
@{e-js}.e-splitter .e-splitbar .e-icon {
    color: @default-icon-color;
}
@{e-js}.e-splitter .e-splitbar:hover .e-icon,
@{e-js}.e-splitter .e-splitbar.e-hover .e-icon {
    color: @hover-icon-color;
}
@{e-js}.e-splitter .e-hover.e-splitbar.e-split-divider,@{e-js}.e-splitter .e-splitbar.e-split-divider:hover {
    .switch-splitter-divder-hover;
    & when (@skin= "material") {
     background-color: @grey-300;
     border-color: @grey-300;
   }
   & when (@skin= "office-365"){
       background-color: @neutral-quaternary-alt;
   }
   & when not (@skin= "material") and not (@skin= "office-365") {
     background-color: @hover-bg-stcolor;
     border-color:@hover-border-color;
   }
   
}
@{e-js}.e-splitter .e-splitbar .e-icon.e-arrow-sans-left:before {
  & when (@skin= "material") {
      content:"\e630";
  }  
}
@{e-js}.e-splitter .e-splitbar .e-icon.e-arrow-sans-right:before {
  & when (@skin= "material") {
     content:"\e62f";
  } 
}
 @{e-js}.e-splitter .e-splitbar > .e-icon.v-backward:before, @{e-js}.e-splitter .e-splitbar > .e-icon.e-arrow-sans-left:before, @{e-js}.e-splitter .e-splitbar > .e-icon:before {
  & when (@skin= "material") {
     font-size:8px;
  }
}
@{e-js}.e-splitter .e-splitbar .e-h-arrow.e-arrow-sans-right {
  & when (@skin= "material") {
     left:-1.25px;
  }
  & when (@skin= "office-365") {
     margin-top: 35px;
     margin-left: 1px;
     font-size: 12px;
     width: 12px;
     color: @neutral-secondary-alt;
  }
}
@{e-js}.e-splitter .e-splitbar .e-h-arrow.e-arrow-sans-left {
    & when (@skin= "material") {
     left:-1px;
  }
  & when (@skin= "office-365") {
    left: 3px;
    width: 12px;
    font-size: 12px;
    margin-top: -20px;
    color: @neutral-secondary-alt;
  }
}
 @{e-js}.e-splitter .e-splitbar.e-h-bar {
   & when (@skin= "material") {
      width:8px;
   }
   & when (@skin= "office-365") {
      width: 12px;
      border: none;
      background-color: @neutral-light;
   }
 }
@{e-js}.e-splitter .e-splitbar .e-activebar {
   & when (@skin= "material") {
      display:block;
   }
   & when (@skin= "office-365") {
      display:block;
   }
   & when not (@skin= "material") and not (@skin= "office-365") {
      display:none;
   }
}
@{e-js}.e-splitter .e-splitbar .e-h-arrow.e-arrow-sans-left {
  & when (@skin= "material") {
     margin-top: -13px;
  }
}
/*&.e-splitter .e-splitbar .e-h-arrow.e-arrow-sans-right {
  & when (@skin= "material") {
     top:62%;
  }
}*/
@{e-js}.e-splitter .e-splitbar .e-icon.e-arrow-sans-up:before {
    & when (@skin= "material") {
     content:"\e67d";
  }
}
@{e-js}.e-splitter .e-splitbar .e-icon.e-arrow-sans-down:before {
    & when (@skin= "material") {
     content:"\e631";
  }
}
@{e-js}.e-splitter .e-splitbar.e-v-bar {
     & when (@skin= "material") {
       height:8px;
  }
  & when (@skin= "office-365") {
      height: 12px;
      border: none;
      background-color: @neutral-light;
  }
}
@{e-js}.e-splitter .e-splitbar .e-v-arrow.e-icon.e-arrow-sans-up:before {
    & when (@skin= "office-365") {
        content: "\e625";
    }
}
@{e-js}.e-splitter .e-splitbar .e-v-arrow.e-arrow-sans-up {
    & when (@skin= "material") {
    top:-0.5px;
    margin-left:-16px;
    }
    & when (@skin= "office-365") {
        height: 12px;
        margin-left: 32px;
        margin-top: 4px;
        font-size: 12px;
        color: @neutral-secondary-alt;
    }
}
@{e-js}.e-splitter .e-splitbar .e-v-arrow.e-icon.e-arrow-sans-down:before {
    & when (@skin= "office-365") {
        content: "\e627";
    }
}
@{e-js}.e-splitter .e-splitbar .e-v-arrow.e-arrow-sans-down {
  & when (@skin= "material") {
     top:-0.5px;
  }
  & when (@skin= "office-365") {
     height: 12px;
     margin-left: -24px;
     margin-top: 1px;
     font-size: 12px;
     color: @neutral-secondary-alt;
  }
}
@{e-js}.e-splitter .e-splitbar.e-v-bar .e-activebar {
    & when (@skin= "material") {
    height:2px;
    width: 14px;
    margin-top:2px;
    background: darken(@base-font-color,54%);
    }
    & when (@skin= "office-365") {
        font-family: 'ej-webfont';
        margin-top: -3.5px;
        font-size: 19px;
        width: 20px;
        line-height: normal;
        cursor: n-resize;
    }
}
@{e-js}.e-splitter .e-splitbar.e-v-bar .e-activebar:before {
    & when (@skin= "office-365") {
        content: "\e871";
    }
}
@{e-js}.e-splitter .e-splitbar.e-h-bar .e-activebar {
    & when (@skin= "material") {
    height:14px;
    width: 2px;
    margin-left:2px;
    background: darken(@base-font-color,54%);
    }
    & when (@skin= "office-365") {
        font-family: 'ej-webfont';
        margin-left: 3.5px;
        height: 20px;
        font-size: 19px;
        cursor: e-resize;
    }
}
@{e-js}.e-splitter .e-splitbar.e-h-bar .e-activebar:before {
     & when (@skin= "material") {
         height:100%;
         width:100%;
         display:block;
         }
    & when (@skin= "office-365") {
        content: "\e872";
    }
}
@{e-js}.e-splitter .e-h-arrow.e-arrow-sans-right {
     & when (@skin= "material") {
         margin-top:19px;
         }
}
@{e-js}.e-splitter .e-v-arrow.e-arrow-sans-down {
      & when (@skin= "material") {
         margin-left:21px;
         }
}

@{e-js}.e-splitter .e-splitbar.e-h-bar.e-icon-hide .e-activebar, @{e-js}.e-splitter .e-splitbar.e-v-bar.e-icon-hide .e-activebar {
    & when (@skin= "office-365") {
        display: none !important;
    }
}
@{e-js}.e-splitter .e-splitbar.e-h-bar.e-icon-hide .e-icon.e-arrow-sans-right {
    & when (@skin= "office-365") {
        margin-top: 0;
        margin-left: 4px;
    }
}
@{e-js}.e-splitter .e-splitbar.e-h-bar.e-icon-hide .e-icon.e-arrow-sans-left {
    & when (@skin= "office-365") {
        margin-top: 0;
        margin-left: -3px;
    }
}
@{e-js}.e-splitter .e-splitbar.e-v-bar.e-icon-hide .e-icon.e-arrow-sans-up {
    & when (@skin= "office-365") {
        margin-left: 0;
        margin-top: 1px;
    }
}
@{e-js}.e-splitter .e-splitbar.e-v-bar.e-icon-hide .e-icon.e-arrow-sans-down {
    & when (@skin= "office-365") {
        margin-left: 0;
        margin-top: 3px;
    }
}

@{e-js}.e-splitter.e-rtl .e-h-arrow.e-arrow-sans-left {
    & when (@skin= "material") {
        left:-3.4px;
        }
}
@{e-js}.e-splitter.e-rtl .e-h-arrow.e-arrow-sans-right {
      & when (@skin= "material") {
        left:-4px;
        }
     & when (@skin= "office-365") {
        left:-4px;
     }
}
@{e-js}.e-splitter.e-rtl .e-splitbar.e-h-bar .e-activebar {
    & when (@skin= "material") {
        margin-right:2px;
        }
    & when (@skin= "office-365") {
        margin-right: 5px;
    }
}
@{e-js}.e-splitter.e-rtl .e-splitbar .e-v-arrow.e-arrow-sans-up {
     & when (@skin= "material") {
         margin-left:-21px;
     }
}
@{e-js}.e-splitter .e-splitbar.e-v-bar.e-resize {
     & when (@skin= "material") {
         cursor: row-resize;
         }
}
@{e-js}.e-splitter .e-splitbar.e-h-bar.e-resize {
     & when (@skin= "material") {
         cursor: col-resize;
         }
}
@{e-js}.e-splitter .e-splitbar &.e-splitter-h-template {
	cursor: pointer;
	position: fixed;
	top: 30%;
}
@{e-js}.e-splitter .e-splitbar &.e-splitter-v-template {
	cursor: pointer;
	position: fixed;
	left: 49%;
}


.e-datavisualization-symbolpalette
{
    border: @border-size @border-type @content-border-color;
    outline: @sp-outline;
    text-decoration: none;
    font-family: @font-family;
    font-size: @sp-header-font-size;
	border-radius: @sp-header-border-radius;
}

.e-datavisualization-symbolpalette .e-scanvas
{
    border: 0px solid transparent;
}

.e-datavisualization-symbolpalette .e-header
{
    display: table;
    border: @sp-noborder;
    border-bottom-width: 1px;
    border-bottom-color: @default-border-color;
    outline: @sp-outline;
    cursor: pointer;
    color: @default-font-color;
    position: relative;
    width: 100%;
    background: @default-bg-stcolor;
    .default-gradient();
	border-radius: @sp-header-border-radius;
}

.e-datavisualization-symbolpalette .e-header-text
{
    display: table-cell;
    vertical-align: middle;
    padding-left: 1em;
    width: 100%;
    text-align: left;
	font-size: @sp-header-font-size;
}
.e-datavisualization-symbolpalette .e-header-wrapper
{
    padding-left: 2.5em;
}
.e-datavisualization-symbolpalette .e-header-arrow
{
    border: @sp-noborder;
    height: 16px;
    width: 16px;
    right: 14px;
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    font-size: 17px;
    top: 10px;
}

.e-datavisualization-symbolpalette .e-header-arrow.expanded:before
{
    content: "\e631";
}

.e-datavisualization-symbolpalette .e-header-arrow.collapsed:before
{
    content: "\e62f";
}

.e-datavisualization-symbolpalette .e-header-arrow.expanded.selected:before,
.e-datavisualization-symbolpalette .e-header-arrow.expanded.hover:before
{
    content: "\e631";
}

.e-datavisualization-symbolpalette .e-header-arrow.collapsed.selected:before,
.e-datavisualization-symbolpalette .e-header-arrow.collapsed.hover:beforess
{
    content: "\e62f";
}

.e-datavisualization-symbolpalette .e-header.collapsed.selected,
.e-datavisualization-symbolpalette .e-header.expanded.selected
{
    .active-gradient();
    color: white;
}

.e-datavisualization-symbolpalette .e-header.collapsed.hover,
.e-datavisualization-symbolpalette .e-header.expanded.hover
{
    .hover-gradient();
    color: @hover-font-color;
}
.e-datavisualization-symbolpalette .e-header.e-disableclick {
    cursor: default;
}
.e-datavisualization-symbolpalette .e-scontent
{
    display: block;
    border: @sp-noborder;
    outline-style: none;
    padding: 0.5em;
    padding-bottom: .6em;
    border-bottom-width: @border-size;
    border-bottom-color: @content-border-color;
    background: transparent;
    overflow: hidden; 
}

.e-datavisualization-symbolpalette .e-anchor
{
    overflow: hidden;
    padding: 0px;
    border: none;
    display: inline-block;
    color: #787878;
    font-size: 11px;
    font-family: @font-family;
    text-align: center;
    outline: @sp-outline;
    background: transparent;
    width: 100%;
}

.e-datavisualization-symbolpalette .e-paletteItem
{
    border: 0px solid transparent;
    float: left;
    padding-right:3px;
    padding-top: 3px;
    margin: 1px;
    overflow: visible;
}

.e-datavisualization-symbolpalette .e-paletteItem.hover
{
    background: @sp-item-hover-color;
}

.e-datavisualization-symbolpalette .e-paletteItem.selected
{
    background: @sp-item-hover-color;
}

.e-datavisualization-symbolpalette .e-text-container
{
    white-space: nowrap;
    color: black;
    overflow: hidden;
}

.e-datavisualization-symbolpalette .e-svg-container
{
    display: block;
    position: relative;
    border: @sp-noborder;
}

.e-datavisualization-symbolpalette .e-svg-container svg
{
    display: inline;
    padding: 1px;
}

[draggable=true]
{
    -khtml-user-drag: element;
    -webkit-user-drag: element;
    -khtml-user-select: none;
    -webkit-user-select: none;
}

.svg.foreignObject
{
    top: 0px;
    left: 0px;
    position: absolute;
    border: @sp-noborder;
    display: block;
}


/*Theme Color*/

.e-tab.e-js.e-widget
{
    font-family: @font-family;
    border: none;
}
.e-tab.e-js > .e-header > .e-item >.e-link,
.e-tab.e-js > .e-left > .e-item >.e-link,
.e-tab.e-js > .e-right > .e-item >.e-link {
	& when (@skin= "office-365") {
		font-family: @font-family;
		font-size: 14px;
		color: @neutral-light-font;
	}
}
.e-tab.e-js > .e-header,.e-tab.e-js .e-header > .e-select.e-disable:hover,.e-tab.e-js > .e-left,.e-tab.e-js > .e-right,@{e-js}.e-tab.e-disable .e-select:hover
{
     & when (@skin= "material") {
        /*material*/
        background: transparent; 
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			/*office-365*/
			background: transparent; 
		}
		& when not (@skin= "office-365") {
			/*other*/
			.header-gradient();   
			border: none;
		}
    }
}

.e-tab.e-js > .e-header, .e-tab.e-js .e-header > .e-select.e-disable:hover, .e-tab.e-js > .e-left, .e-tab.e-js > .e-right, @{e-js}.e-tab.e-disable .e-select:hover {
     & when (@skin= "material") {
        /*material*/
    background: @content-bg-color;
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			/*office-365*/
			background: @neutral-white; 
		}
		& when not (@skin= "office-365") {
			/*other*/
			.tab-header-background();
			border: none;
		}
    }
}
.e-tab.e-js .e-header > .e-active.e-disable:hover{
	background: transparent;
}
.e-tab.e-js .e-header > .e-active.e-disable:hover a{
	& when (@skin= "material") {
        /*material*/ 
		color: @accent-color;
    }
	& when not (@skin= "material") {
        /*material*/
	& when (@skin= "office-365") { 
		color: @neutral-light-font;
	}
	& when not (@skin= "office-365") {
		color: @active-bg-stcolor;
	}
    }
}
	.e-tab.e-js .e-header > .e-rtl-bottom-line.e-active {
        & when (@skin= "material") {
        /*material*/ 
		.material-tab-bottom-border; 
    }
	& when not (@skin= "material") {
        /*material*/
	& when (@skin= "office-365") { 
		border-top: 2px @border-type @theme-primary;
	}
	& when not (@skin= "office-365") {
		padding-top: 1px;
        border-top: transparent;
	}
    }
    }
.e-tab.e-js .e-header .e-select.e-disable a,.e-tab.e-js.e-disable a
{
	cursor: default;
	& when (@skin= "office-365") {
		/*office-365*/
		color : @neutral-tertiary;
	}
}
@{e-js}.e-tab >.e-header
{    
    & when (@skin= "material") {
        /*material*/
        border: none;
    }
    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			/*office-365*/
			border: 0px;
		}
		& when not (@skin= "office-365") {
			/*other*/
			border: none;
		}
    } 
    border-left:none;
}
@{e-js}.e-tab .e-left
{   
    & when (@skin= "material") {
        /*material*/
     border-right: 0px;
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			/*office-365*/
		 border-right: 0px;
		}
		& when not (@skin= "office-365") {
			/*other*/
			border-right:  @border-size @border-type @default-border-color;
		}
    } 
}
@{e-js}.e-tab .e-right
{    
    & when (@skin= "material") {
        /*material*/
     border-right: 0px;
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			/*office-365*/
			border-left: 0px;
		}
		& when not (@skin= "office-365") {
			/*other*/
			border-left: @border-size @border-type @default-border-color;
		}
    } 
}
.e-tab.e-js .e-left .e-item.e-active,.e-tab.e-js .e-left .e-item.e-active:hover{
	& when (@skin= "office-365") {
		/*office-365*/
		border-right: 2px @border-type @theme-primary;
	}
	& when not (@skin= "office-365") {
		.material-tab-left-border; 
	}
   outline:0 none;
   margin-right: -1px;
}
.e-tab.e-js .e-right .e-item.e-active,.e-tab.e-js .e-right .e-item.e-active:hover{
	& when (@skin= "office-365") {
		/*office-365*/
		border-left: 2px @border-type @theme-primary;
	}
	& when not (@skin= "office-365") {
		.material-tab-right-border;
	}
	margin-left: -1px; 
	outline:0 none;
}

@{e-js}.e-scrolltab.e-js .e-header>.e-bottom-line.e-item.e-active,@{e-js}.e-scrolltab.e-js .e-header>.e-bottom-line.e-item.e-active:hover {
    .add-borderdiv();
}
@{e-js}.e-tab .e-left .e-item.e-active,@{e-js}.e-tab .e-right .e-item.e-active{ 
  border-bottom:@border-size @border-type @default-border-color;
  position: relative;
}
@{e-js}.e-tab .e-header li{
  border-top: 0px;
}
.e-tab.e-js .e-header > .e-bottom-line.e-active,.e-tab.e-js .e-header > .e-bottom-line.e-active:hover{
	& when (@skin= "office-365") {
		/*office-365*/
		padding-bottom: 0px;
		border-bottom: 2px @border-type @theme-primary;
	}
	& when not (@skin= "office-365") {
		/*other*/
		.material-tab-padding-bottom;
		.material-tab-border();
	}
	outline:0 none;
}
.e-tab.e-js .e-header > .e-top-line.e-active,.e-tab.e-js .e-header > .e-top-line.e-active:hover{
	& when (@skin= "office-365") {
		/*office-365*/
		border-top: 2px @border-type @theme-primary;
	}
	& when not (@skin= "office-365") {
		/*other*/
		.material-tab-bottom-border; 
	}
   padding-top:1px;
   outline:0 none;
}
@{e-js}.e-tab .e-left li,@{e-js}.e-tab .e-right li { 
border-bottom:@border-size @border-type @default-border-color;
}
@{e-js}.e-tab.e-vertical {
background:transparent;
border: @border-size @border-type @default-border-color;
}
.e-tab.e-js .e-header > .e-item:hover,.e-tab.e-js .e-left > .e-item:hover,.e-tab.e-js .e-right > .e-item:hover
{
    .material-tab-header-bg-hover-color;
	background-color:@hover-bg-stcolor;
    .material-tab-header-hover-font;
    color: @hover-font-color;
    filter:none;
}
.e-tab.e-js .e-icon.e-chevron-circle-left, .e-tab.e-js .e-icon.e-chevron-circle-right{
     & when (@skin= "material") {
        /*material*/ 
       color: fade(@base-font-color,87%);    
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			/*office-365*/
			color : @neutral-dark;
		}
		& when not (@skin= "office-365") {
			/*other*/
			color: @active-bg-stcolor;
		}
    }
}
.e-tab.e-js .e-header > .e-item:hover > .e-icon,.e-tab.e-js .e-left > .e-item:hover > .e-icon,.e-tab.e-js .e-right > .e-item:hover > .e-icon{
    & when (@skin= "office-365") {
		/*office-365*/
		color : @theme-light-font;
	}
	& when not (@skin= "office-365") {
		color:@hover-icon-color;
	}
}
.e-tab.e-js > .e-content
{
     & when (@skin= "material") {
        /*material*/
       border-width: 0px; 
	   background: @content-bg-color;
	   color: @content-font-color;
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			/*office-365*/
			border-width: 0px; 
			color : @theme-light-font;
			background: @neutral-white;
			font-size: 14px;
		}
		& when not (@skin= "office-365") {
			/*other*/
			border-width:@border-size;
			background: @content-bg-color;
			color: @content-font-color;
		}
    } 
    border-color: @content-border-color;
	font-size: @content-font-size;
    border-style:@border-type;
}
.e-tab.e-js .e-header > .e-select,.e-tab.e-js .e-header > .e-active,.e-tab.e-js .e-left > .e-active,.e-tab.e-js .e-right > .e-active,
.e-tab.e-js .e-left > .e-select,.e-tab.e-js .e-right > .e-select
{
    & when (@skin= "material") {
        /*material*/
       background: transparent;
      font-weight: 400;
   	  font-size: 13px;
      font-family: @font-family;
      border-radius: 0px;
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			/*office-365*/
			background: transparent;
			font-size: @highlight-font-size;
			color : @neutral-light-font;
			font-family: @font-family;
			border-radius: 0px;
		}
		& when not (@skin= "office-365") {
			/*other*/
			.header-gradient(); 
			font-weight: normal;
			font-size: @header-font-size;
		}
    } 
      border-color: @default-border-color;
      color: @content-font-color;
      border: none;
	  background: none;    
	
}
@{e-js}.e-tab .e-header > .e-select a,@{e-js}.e-tab .e-left > .e-select a,@{e-js}.e-tab .e-right > .e-select a
{
    & when (@skin= "material") {
        /*material*/
        text-transform: uppercase;
		color: fade(@base-font-color,87%);    
    }

    & when not (@skin= "material") {
        /*other*/
		& when (@skin= "office-365") {
			font-weight: @content-font-weight;
			line-height: 19px;
		}
		& when not (@skin= "office-365") {
			& when(@skin= "high-contrast-01") {
				color: @header-font-color;
			}
			& when not (@skin= "high-contrast-01"){
				color: @content-font-color; 
			}
		}
    }
      
}
.e-tab.e-js .e-header > .e-active,
.e-tab.e-js .e-left > .e-active,
.e-tab.e-js .e-right > .e-active
{
    & when (@skin= "material") {
        /*material*/
      background: transparent;
      border-color: transparent;
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			font-weight: 600;
			color: @neutral-light-font;
		}
		& when not (@skin= "office-365") {
			/*other*/ 
			.tab-headerbg(@active-bg-stcolor);   
			border-color: @active-border-color;
			.high-contrast-tab-headerborder;
			.material-tab-headerborder;
			border:@border-size @border-type @content-border-color; 
		}
    } 
}


.e-tab.e-js .e-header>.e-select, 
.e-tab.e-js .e-left>.e-select, 
.e-tab.e-js .e-right>.e-select{
	& when (@skin= "office-365") {
		font-weight: 400;
		color: @neutral-light-font;
	}
    .office-tab-header-bg-color;     
}

.e-tab.e-js .e-header > .e-active:hover, .e-tab.e-js .e-left > .e-active:hover, .e-tab.e-js .e-right > .e-active:hover,.e-tab.e-js .e-header.e-item:hover,.e-tab.e-js .e-left.e-item:hover,.e-tab.e-js .e-right.e-item:hover {
     & when (@skin= "material") {
        /*material*/
      background: transparent;
      color: @accent-color;
    }

    & when not (@skin= "material") {
        /*other*/ 
      .material-tab-header-bg-hover-color;
      .office-tab-header-bghover-color;
	  & when not (@skin= "office-365") {
			background: @hover-bg-stcolor; 
			color:@hover-font-color;
		}
    } 
}

@{e-js}.e-tab .e-header > .e-active a,@{e-js}.e-tab .e-left > .e-active a,@{e-js}.e-tab .e-right > .e-active a
{
     & when (@skin= "material") {
        /*material*/
		text-transform: uppercase;
		color: @accent-color;
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			/*office-365*/
			font-weight : 600;
		}
		& when not (@skin= "office-365") {
			/*other*/ 
			.tab-headerbg();
		}
    } 
}
@{e-js}.e-tab .e-header > .e-select:hover a,@{e-js}.e-tab .e-left > .e-select:hover a,@{e-js}.e-tab .e-right > .e-select:hover a
{
      & when (@skin= "material") {
        /*material*/
        text-transform: uppercase;
        color: fade(@base-font-color,87%);    
    }

    & when not (@skin= "material") {
        /*other*/
    .material-tab-header-hover-font;
    .office-tab-header-hover-font;
    color: @hover-font-color;
    }
}
@{e-js}.e-tab .e-header > .e-active:hover a,@{e-js}.e-tab .e-left > .e-active:hover a,@{e-js}.e-tab .e-right > .e-active:hover a{
     & when not (@skin= "material") {
        /*other*/
		.material-tab-header-hover-font;
		color: @hover-font-color;
    }
}
@{e-js}.e-tab .e-load	{
    background-image: @ajaxloaderimage;
	background-position: center;
    background-repeat: no-repeat;
}
@{e-js}.e-tab .e-hidebottom	{
	border-top: none !important;		
}
@{e-js}.e-tab .e-hidetop	{
	border-bottom: none !important;		
}
@{e-js}.e-tab .e-header.e-addborderbottom	{
	 & when (@skin= "office-365") {
		border-size: 0px;
	 }
	 & when not (@skin= "office-365") {
		& when (@skin= "material") {
			.material-tab-border-bottom-line;
		}
		& when not (@skin= "material") {
		
			border-bottom: @border-size @border-type @content-border-color;
		}
	}
}
@{e-js}.e-tab .e-header.e-addbordertop	{
     & when (@skin= "material") {
        /*material*/
    border-top: 0px @border-type @content-border-color;
    }

    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			border-top: 0px;
		}
		& when not (@skin= "office-365") {
			/*other*/
			border-top: @border-size @border-type @content-border-color;
		}
    }
}
@{e-js}.e-tab .e-header.e-hideleft	{
	border-left: none;		
}
@{e-js}.e-tab .e-header.e-addborderleft	{
border-right: @border-size @border-type @content-border-color;
}
@{e-js}.e-tab .e-header.e-hideright	{
	border-right: none;		
}
@{e-js}.e-tab .e-header.e-addborderright	{
border-left: @border-size @border-type @content-border-color;
}
@{e-js}.e-tab .e-header .e-margine-top:hover	{
     & when (@skin= "material") {
        /*material*/
        border-top: none;
    } 
    & when not (@skin= "material") {
        /*other*/
       border-top: @border-size @border-type @tab-background-color;
    }
}
@{e-js}.e-tab .e-header .e-margine-bottom:hover	{
border-bottom: @border-size @border-type @tab-background-color;
}
@{e-js}.e-tab .e-header.e-addborderbottom .e-active{
	& when (@skin= "office-365") {
		border-top: 2px solid transparent;
	}
	& when not (@skin= "office-365") {
		.material-tab-borderbottom();
	}
}
@{e-js}.e-tab .e-header.e-addbordertop .e-active {
	& when (@skin= "office-365") {
		border-bottom: 2px solid transparent;
	}
	& when not (@skin= "office-365") {
		.material-tab-bottom-border-bottom; 
	}
}
@{e-js}.e-tab .e-right.e-addborderright .e-active{
    .material-tab-right-bottom-border; 
}
@{e-js}.e-tab .e-left.e-addborderleft .e-active{
    .material-tab-left-bottom-border; 
}
.e-tab.e-js.e-tabscroll>.e-content {
      & when (@skin= "material") {
        /*material*/
       padding-top: 65px !important;
    } 
    & when not (@skin= "material") {
        /*other*/
       padding-top: 44.3333px;
    }
}
.e-tab.e-js.e-tabscroll>.e-header.e-addborderbottom {
     & when (@skin= "material") {
        /*material*/
      border-bottom: 0px solid rgb(187, 188, 187) !important;
    } 
    & when not (@skin= "material") {
		 & when (@skin= "office-365") {
			/*office-365*/
		  border-bottom: 0px solid rgb(187, 188, 187) !important;
		} 
		& when not (@skin= "office-365") {
			/*other*/
			border-bottom: 1px solid rgb(187, 188, 187);
		}
    }
}
.e-tab.e-js .e-header .e-icon.e-chevron-circle-left{
	 & when (@skin= "material") {
        /*material*/
      top: 14px;
    } 
}



/*------------------------------------- tagcloud -------------------------------------------*/

@{e-js}.e-tagcloud {
    background-color: @content-bg-color;    
}
.e-tagcloud.e-js .header {
    border-color: @default-border-color;
}

@{e-js}.e-tagcloud .e-title {
    & when (@skin= "material") {
        /*material*/ 
       background: @content-bg-color;
	   color: fade(@base-font-color,87%);
	   font-size: 20px;
	   font-weight: 500;
       font-family: @font-family; 
       border-top: 0px solid @grey-200;
    } 
    & when not (@skin= "material") {
        /*other*/
        & when (@skin= "office-365") {  
            border-bottom: 0px @border-type @neutral-light;
            border-color: @neutral-light; 
            font-size: 14px;
            font-family: @font-family;
	        color: @theme-light-font; 
        } 
        & when not (@skin= "office-365") {  
            border-color: @header-border-color;
            border-bottom: @tools-border-radius @border-type @active-bg-stcolor;
            font-size: @header-font-size; 
	        color: @header-font-color; 
        }   
	   .header-gradient();
	   font-weight: @header-font-weight; 
    .office-dialog-active-line-color; 
    }   
}
@{e-js}.e-tagcloud .e-load {
    background-image: @ajaxloaderimage;
    background-position: center center;
    background-repeat: no-repeat;
}
@{e-js}.e-tagcloud .e-tagitems .e-txt { 
     & when (@skin= "material") {
        /*material*/ 
       color:fade(@base-font-color,87%);
    } 
    & when not (@skin= "material") {
        /*other*/ 
	color: @content-font-color; 
    }
}
@{e-js}.e-tagcloud .e-tagitems .e-txt.hover { 
     & when (@skin= "material") {
        /*material*/ 
       color:fade(@base-font-color,54%);
    } 
    & when not (@skin= "material") {
        /*other*/ 
	   .high-contrast-tagcloud-txt-hover;
	   color:@active-bg-stcolor; 
    }
    
}
@{e-js}.e-tagcloud .e-cloud, .e-tagcloud .e-list {
    & when (@skin= "office-365") {
    border-color: @neutral-light; 
    }
    & when not (@skin= "office-365") {
    border-color: @content-border-color; 
    }
} 



/*------------------------------------- TimeEditor -------------------------------------------*/

@{e-widget}.e-timewidget .e-input,
@{e-widget}.e-time-popup 
{
    background-color: @content-bg-color;
	font-family: @font-family;
    & when (@skin= "material") {
        /*material*/
        color: fade(@base-font-color,87%);
        font-weight: @content-font-weight;
    }
    & when (@skin= "office-365") {
        color:@neutral-light-font;
        font-weight:400;
    }
 
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
         color: @content-font-color;
         font-weight:@content-font-weight;
    }    
}
@{e-widget}.e-timewidget .e-input{
     & when (@skin= "material") {
        /*material*/
        font-size:13px;
    } 
     & when (@skin= "office-365") {
        color:@neutral-light-font;
        font-weight:400;
    }
}
@{e-widget}.e-timewidget .e-in-wrap,
@{e-widget}.e-time-popup 
{
  border-color: @content-border-color;
  & when (@skin= "material") {
        /*material*/
        border-color: fade(@base-font-color,12%);       
         }
}
@{e-widget}.e-timewidget .e-in-wrap:before, @{e-widget}.e-timewidget .e-in-wrap:after {
    & when (@skin= "material") {
        background: @accent-color;
    }
}
@{e-widget}.e-timewidget.e-focus .e-in-wrap,@{e-widget}.e-timewidget.e-focus .e-in-wrap:hover 
{   
    .focus-border-color();
    & when (@skin= "material") {
        /*material*/
        box-shadow:none;
    }
 
    & when not (@skin= "material") {
        /*other*/
         box-shadow: 0 0 @shadow-bg-size @bs-shadow-bg-color;
    }
}

@{e-widget}.e-timewidget:hover .e-in-wrap{
    & when (@skin= "office-365") {
        border-color: @neutral-secondary-alt;
    }
    & when not (@skin="office-365") {
        /*other*/
    .focus-border-color();
    }
}
@{e-widget}.e-timewidget.e-disable:hover .e-in-wrap{
     & when (@skin= "office-365") {
        border-color: @content-border-color;
    }
}

@{e-widget}.e-timewidget .e-select, @{e-widget}.e-timewidget.e-rtl .e-select,@{e-widget}.e-ntouch.e-timewidget .e-disable.e-select:hover 
{    
	.bs-default-gradient();	
    .border-selection();
    & when (@skin= "material") {
        /*material*/
       background: @content-bg-color;
       box-shadow: none;
       border-color: @content-bg-color;
       color:fade(@base-font-color,54%);
    }
    & when (@skin= "office-365") {
       color:@neutral-light-font;
       background-color: @neutral-white;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        border-color: @content-border-color; 
        color: @default-icon-color;
    }
}
@{e-widget}.e-timewidget.e-widget .e-select:active:hover,@{e-widget}.e-timewidget.e-rtl .e-select:active:hover {
    & when (@skin= "office-365") {
        background-color: @theme-primary;
        color: @theme-primary-font;
    }
}
@{e-widget}.e-timewidget.e-widget .e-select.e-disable:active:before:active:hover{
    & when (@skin= "office-365") {
        background:none;
    }
}

@{e-widget}.e-ntouch.e-timewidget .e-select:hover,
@{e-widget}.e-time-popup.e-popup .e-hover
{    
   .hover-gradient();
    & when (@skin= "material") {
        /*material*/
      background-color:@grey-200;
      color:fade(@base-font-color,87%);
    }
    & when (@skin= "office-365") {
        background:@info-bg-color;
        color:@neutral-light-font;
        }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        color: @hover-font-color;  
    }
}
@{e-widget}.e-ntouch.e-timewidget .e-select:hover,
@{e-widget}.e-timewidget .e-select:hover{
     & when (@skin= "office-365") {
       border-color:@neutral-tertiary-alt;
      }
}
@{e-widget}.e-time-popup .e-active.e-hover{
     & when (@skin= "material") {
        /*material*/
      background-color:@grey-200;
      color:fade(@base-font-color,87%);
    }
      & when (@skin= "office-365") {
        background:@info-bg-color;
        color:@neutral-light-font;
        }
}
@{e-widget}.e-ntouch.e-timewidget .e-select:hover{
     & when (@skin= "material") {
        /*material*/
      background-color:@content-bg-color;
       color:fade(@base-font-color,54%);
    }
}

@{e-widget}.e-time-popup .e-active 
{ 
    .active-gradient();	
    border-color: @active-bg-stcolor;   
    & when (@skin= "material") {
        /*material*/
      background:@content-bg-color;
      color: @accent-color;
    }
    & when (@skin= "office-365") {
        background: @theme-primary;
        color: @theme-primary-font;
    }
     & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
    color: @active-font-color;    
    }
}


@{e-widget}.e-time-popup.e-popup .e-hover.e-active {
    & when (@skin= "material") {
        color: fade(@base-font-color,87%);
    }
}

@{e-widget}.e-timewidget .e-icon.e-clock:before{
    width:20px;
    height:20px;
}
@{e-widget}.e-timewidget.e-active .e-select{
    & when (@skin= "material") {
        /*material*/     
      color:@accent-color;
    }   
}
@{e-widget}.e-timewidget.e-active .e-select:hover{
     & when (@skin= "material") {
        /*material*/     
      color:@accent-color;
    }  
     
}
@{e-widget}.e-time-popup{
     & when (@skin= "material") {
        /*material*/     
      font-size:13px;
    } 
     & when (@skin="office-365"){
         box-shadow: 0 0 15px -5px rgba(0,0,0,.4)
     }
}

@{e-widget}.e-timewidget .e-input::selection, @{e-widget}.e-timewidget .e-input::selection,
@{e-widget}.e-timewidget .e-input::selection, @{e-widget}.e-timewidget .e-input::selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
        }
    & when (@skin="office-365"){
        background:@theme-primary;
        color: @theme-primary-font;
        }
}

@{e-widget}.e-timewidget .e-input::-moz-selection, @{e-widget}.e-timewidget .e-input::-moz-selection,
@{e-widget}.e-timewidget .e-input::-moz-selection, @{e-widget}.e-timewidget .e-input::-moz-selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
        }
    & when (@skin="office-365"){
        background:@theme-primary;
        color: @theme-primary-font;
        }
}

@{e-widget}.e-timewidget .e-select{
     & when (@skin= "office-365") {
           border-color: @neutral-secondary-alt;
        }
}
@{e-widget}.e-timewidget .e-select:active:before{
    & when (@skin= "office-365") {
        content:"";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 30px;
        height:30px;
        background:@theme-primary;
        }
}
@{e-widget}.e-timewidget .e-select.e-disable:active:before{
    & when (@skin= "office-365") {
        content:"";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 30px;
        height:30px;
        background:@neutral-white;
        }
}
@{e-widget}.e-timewidget.e-disable{
     & when not (@skin= "material") and not (@skin="office-365"){
     background-color: @disable-control-background-color;
    border-color:@disable-control-border-color;
    opacity:1;
    }
}
@{e-widget}.e-timewidget .e-select.e-disable,
@{e-widget}.e-timewidget.e-disable .e-select:hover,
@{e-widget}.e-ntouch.e-timewidget .e-disable.e-select:hover{
     & when not (@skin= "material") and not (@skin="office-365"){
    background-color: @disable-icon-bg-color;
    }
}



/*------------------------------------- ToolBar -------------------------------------------*/

@{e-js}.e-toolbar{
   font-family: @font-family;
    font-weight: @content-font-weight;
    font-size: @content-font-size; 
    & when (@skin= "material") {
       /*material*/ 
        background: @grey-50;
        color: fade(@base-font-color,54%);
         background-repeat:no-repeat;
        border-color: @default-border-color;
    }
    & when not (@skin= "material") {
        /*other*/  
        & when (@skin= "office-365") {
       /*office-365*/ 
        background-repeat:no-repeat;
        border-color: @neutral-quaternary-alt;
        .default-gradient();   
        color: @neutral-dark;
    }
    & when not (@skin= "office-365") {
        /*other*/  
        background-repeat:no-repeat;
        border-color: @default-border-color;
        .default-gradient();   
        color: @default-icon-color;
    }
    }

}
@{e-js}.e-toolbar {
    & when (@skin= "material") {
       /*material*/ 
        background: @grey-50;
    }
    & when not (@skin= "material") {
        /*other*/  
    & when (@skin= "office-365") {
       /*office-365*/ 
        background: @neutral-white;
    }
    & when not (@skin= "office-365") {
        /*other*/  
     .office-toolbar-bg-color;
     background: @default-bg-stcolor;   
    } 
    }
}
@{e-js}.e-toolbar.e-focus 
{
	& when (@skin= "material") {
       /*material*/ 
		box-shadow: none;
    }
    & when not (@skin= "material") {
        /*other*/ 
        & when (@skin= "office-365") {
       /*office-365*/ 
		box-shadow: none;
    }
    & when not (@skin= "office-365") {
        /*other*/  
		box-shadow: 0 0 2px @shadow-bg-color;  
    } 
    }
}
@{e-js}.e-toolbar > .e-horizontal.e-separator
{
   & when (@skin= "material") {
       /*material*/ 
   border-right: @border-size @border-type @content-border-color;
   border-left:none;
   border-radius: initial;
   margin-right: 4px;
   height: 36px;
    }
    & when not (@skin= "material") {
        /*other*/  
        & when (@skin= "office-365") {
       /*office-365*/ 
        margin-right: 8px;
        border-right: @border-size @border-type @neutral-light;
    }
    & when not (@skin= "office-365") {
       /*office-365*/  
        border-right: @border-size @border-type @content-border-color;
    } 
   border-left:none;
   border-radius: initial;
    }
}
/*-------------------tooltip class ----------------------*/
.e-toolbarTooltip{
	min-width : auto;
}
.e-toolbarTooltip .e-tipContainer .e-tipcontent{
     & when (@skin= "material") {
       /*material*/ 
    padding: 2px 8px 2px 8px;
    }
    & when not (@skin= "material") {
        /*other*/  
    padding: 2px 4px;
    }
}

@{e-js}.e-toolbar > .e-horizontal .e-separator
{
   border-right: @border-size @border-type @content-border-color;
   border-left:none;
   border-radius: inherit;
   height: inherit;
}

@{e-js}.e-toolbar > .e-vertical.e-separator
{
   border-bottom: @border-size @border-type @content-border-color;
   border-top:none;
   border-radius: initial;
}

@{e-js}.e-toolbar > .e-vertical .e-separator
{
     & when (@skin= "office-365") {
       /*office-365*/  
        border-bottom: @border-size @border-type @neutral-light;
    }
    & when not (@skin= "office-365") {
       /*office-365*/  
        border-bottom: @border-size @border-type @content-border-color;
    }
   border-top:none;
   border-radius: inherit;
}

 @{e-js}.e-toolbar.e-rtl > .e-horizontal.e-separator
{
    & when (@skin= "office-365") {
       /*office-365*/  
        border-left: @border-size @border-type @neutral-light;
    }
     & when not (@skin= "office-365") {
       /*office-365*/  
        border-left: @border-size @border-type @content-border-color;
    }
   border-right:none;
   border-radius: initial;
}

@{e-js}.e-toolbar.e-rtl > .e-horizontal .e-separator
{
    & when (@skin= "material") {
       /*material*/  
   border-left: @border-size solid @content-border-color;
   border-right:none;
   border-radius: inherit;
   margin-right: 16px;
    }
    & when not (@skin= "material") {
        /*other*/  
   border-left: @border-size @border-type @content-border-color;
   border-right:none;
   border-radius: inherit;
    }
}

@{e-js}.e-toolbar.e-rtl > .e-vertical.e-separator
{
   border-top: @border-size @border-type @content-border-color;
   border-bottom:none;
   border-radius: initial;
}        

@{e-js}.e-toolbar.e-rtl > .e-vertical .e-separator
{
   border-top: @border-size @border-type @content-border-color;
   border-bottom:none;
   border-radius: inherit;
}

@{e-js}.e-toolbar.e-rtl > .e-vertical .e-corner-all {
   border-radius: inherit;
}

@{e-js}.e-toolbar > ul > li div.e-item-overlay
{
    background-color: @default-bg-stcolor;
}
@{e-js}.e-toolbar > .e-horizontal .e-hover, @{e-js}.e-toolbar > .e-vertical > .e-hover
{
    & when (@skin= "material") {
       /*material*/  
        color: fade(@base-font-color,54%);
    }
    & when not (@skin= "material") {
        /*other*/  
        & when (@skin= "office-365") {
        color: @neutral-light-font-alt;
        background-color: @neutral-lighter;
        }
        & when not (@skin= "office-365") {
        color: @hover-font-color;
        }   
    }
	.hover-gradient();    
    .high-contrast-toolbar-border;
    border-color: @hover-bg-stcolor;
}
@{e-js}.e-toolbar > .e-horizontal .e-hover > div:before, @{e-js}.e-toolbar > .e-vertical > .e-hover > div:before,@{e-js}.e-toolbar > .e-horizontal .e-hover > span:before, @{e-js}.e-toolbar > .e-vertical > .e-hover > span:before, @{e-js}.e-toolbar > .e-horizontal .e-hover > a:before, @{e-js}.e-toolbar > .e-vertical > .e-hover > a:before{
    & when (@skin= "office-365") {
        color: @neutral-light-font-alt; 
    }
    & when not (@skin= "office-365") {
        color:   @hover-icon-color;
    }
    
}
@{e-js}.e-toolbar > .e-horizontal .e-active.e-hover > div:before, @{e-js}.e-toolbar > .e-vertical > .e-active.e-hover > div:before,@{e-js}.e-toolbar > .e-horizontal .e-active.e-hover > span:before, @{e-js}.e-toolbar > .e-vertical > .e-active.e-hover > span:before, @{e-js}.e-toolbar > .e-horizontal .e-active.e-hover > a:before, @{e-js}.e-toolbar > .e-vertical > .e-active.e-hover > a:before{
    & when (@skin= "material") {
       /*material*/  
       color: fade(@base-font-color,54%);
    }
    & when not (@skin= "material") {
        /*other*/  
    & when (@skin= "office-365") {
        color: @neutral-light-font-alt; 
    }
    & when not (@skin= "office-365") {
       color:   @active-icon-color;
    }
    } 
}
@{e-js}.e-toolbar > .e-horizontal .e-active, @{e-js}.e-toolbar > .e-vertical > .e-active
{
    & when (@skin= "material") {
       /*material*/  
       background: @grey-400;
       border-color: transparent;
       color: fade(@base-font-color,12%);
    }
    & when not (@skin= "material") {
        /*other*/  
    & when (@skin= "office-365") {
       /*material*/  
       background-color: @theme-lighter;
       color: @neutral-light-font-alt;
    }
    & when not (@skin= "office-365") {
        /*other*/  
	    .active-gradient();
        border-color: @active-border-color;
        color:  @active-icon-color; 
    } 
    } 
}
@{e-js}.e-toolbar > .e-horizontal > .e-hover > a, 
@{e-js}.e-toolbar > .e-horizontal > .e-hover > span,
@{e-js}.e-toolbar > .e-horizontal > .e-hover > div,
@{e-js}.e-toolbar > .e-vertical > .e-hover > a, 
@{e-js}.e-toolbar > .e-vertical > .e-hover > span,
@{e-js}.e-toolbar > .e-vertical > .e-hover > div
{
    & when (@skin= "material") {
       /*material*/  
       background-color:transparent; 
       color: fade(@base-font-color,54%);
    }
    & when not (@skin= "material") {
        /*other*/   
    background-color:transparent;
    color:@hover-font-color;    
    } 
}
@{e-js}.e-toolbar > .e-horizontal > .e-active > a, 
@{e-js}.e-toolbar > .e-horizontal > .e-active > span,
@{e-js}.e-toolbar > .e-horizontal > .e-active > div,
@{e-js}.e-toolbar > .e-vertical > .e-active > a, 
@{e-js}.e-toolbar > .e-vertical > .e-active > span,
@{e-js}.e-toolbar > .e-vertical > .e-active > div
{
    & when (@skin= "material") {
       /*material*/ 
        background-color:@grey-400;
        color: fade(@base-font-color,87%);
    }
    & when not (@skin= "material") {
        /*other*/  
    & when (@skin= "office-365") {
       /*office-365*/ 
        background-color: @theme-lighter;
        color: @neutral-light-font-alt;
    }   
    & when not (@skin= "office-365") {
       /*office-365*/ 
        background-color:transparent;
        color:@active-font-color;  
    }   
    }
}
.e-toolbar.e-js .e-vertical>li.e-tooltxt {
     & when (@skin= "material") {
    margin-right: 0px;
    margin-bottom: 14px;
    }
}
@{e-js}.e-toolbar>.e-vertical>.e-hover {
     & when (@skin= "material") {
    margin-right: 0px !important;
    margin-left: 3px;
    }
}
@{e-js}.e-toolbar>.e-vertical .e-align{ 
     & when (@skin= "material") {
      margin-left: 0px;
    }
}
@{e-js}.e-toolbar .e-ul.e-vertical{
    & when (@skin= "material") {
       /*material*/ 
       width: 48px !important;
    }
}
.e-toolbar.e-js ul > li.e-tooltxt:before{
    & when (@skin= "material") { 
    color: fade(@base-font-color,54%);
    }
}
.e-toolbar.e-js ul > li.e-tooltxt.e-disable:before{
    & when (@skin= "material") { 
    color: fade(@base-font-color,26%);
    }
}
@{e-js}.e-toolbar .e-ul.e-horizontal.e-separator:first-child{
    & when (@skin= "material") {
    padding-left: 0px;
    }
 }


@{e-js}.e-toolbar>.e-horizontal.e-ul:first-child{
     & when (@skin= "material") {
    padding-left: 0px;
    }	
}
@{e-js}.e-toolbar .e-ul.e-horizontal.e-separator .e-tooltxt:last-child{
         & when (@skin= "material") {
        margin-right: 4px;
         }
    & when (@skin= "office-365") {
       /*office-365*/ 
        margin-right: 8px;
    }   
}
@{e-js}.e-toolbar > ul > li.e-icon{
     & when (@skin= "material") {
        width: 14px;
        height: 14px;
         }
}

@{e-js} .e-responsive-toolbar.e-toolbar .e-ul.e-horizontal.e-separator:first-child{
    & when (@skin= "material") {
       padding-left: 0px;
         }
} 
@{e-js}.e-toolbar.e-rtl .e-ul.e-horizontal.e-separator .e-tooltxt:last-child{
         & when (@skin= "material") {
        margin-right: 10px;
        margin-left: 4px;
         }
        & when (@skin= "office-365") {
       /*office-365*/ 
        margin-right: 2px;
        margin-left: 8px;
        } 
}
@{e-js}.e-toolbar.e-rtl .e-ul.e-horizontal.e-separator .e-tooltxt:first-child{
    & when (@skin= "material") {
       margin-right: 0px;
         }
    & when (@skin= "office-365") {
       /*office-365*/ 
        margin-right: 0px;
    } 
}
@{e-js}.e-toolbar.e-js.e-rtl ul>li.e-tooltxt:last-child{
  & when (@skin= "material") {
     margin-right: 10px;
    }
    & when (@skin= "office-365") {
         margin-right: 2px;
    }
}
@{e-js}.e-toolbar.e-rtl .e-ul.e-horizontal.e-separator:first-child{
    & when (@skin= "material") {
         padding-left: 0px;
         margin-right: 0px;
    }
    & when not (@skin= "material") {
        & when (@skin= "office-365") {
         padding-left: 0px;
         margin-right: 0px;
         }
    }
     
}
@{e-js}.e-toolbar.e-js.e-rtl ul>li.e-tooltxt:first-child {
    & when (@skin= "material") {
    margin-right: 4px;
    }
    & when (@skin= "office-365") {
         margin-right: 8px;
         }
}
@{e-js}.e-toolbar.e-toolbarspan.e-rtl{
    & when (@skin= "material") {
        padding-right: 24px;
        padding-left: 24px;
    }
}
@{e-js}.e-responsive-toolbar.e-toolbar.e-rtl .e-ul.e-horizontal.e-separator .e-tooltxt:first-child{
    & when (@skin= "material") {
        margin-left: 4px;
    }
}
@{e-js}.e-toolbar>.e-horizontal .e-disable, @{e-js}.e-toolbar>.e-vertical .e-disable{
    & when (@skin= "material") {
       color: fade(@base-font-color,26%);
    }
    & when not (@skin= "material") {
    & when (@skin= "office-365") { 
        color: @neutral-tertiary-alt;
         }
    }
}
.e-responsive-toolbar.e-toolbar.e-js.e-rtl ul>li.e-tooltxt:first-child{
    & when (@skin= "office-365") { 
        margin-right: 0px;
    }
}

/*Theme Color*/
   
@{e-js}.e-treeview, .e-dragedNode
{
    font-family: @font-family;
}
@{e-js}.e-treeview .e-text
{
    & when (@skin= "material") {
        color: @base-font-color;
        color: fade(@base-font-color, 87%);
    }
    & when (@skin= "office-365") {
        color: @neutral-light-font;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        color: @content-font-color;
    }
    background-color: transparent;
}
.e-dragedNode
{
    & when (@skin= "material") {
        background: @grey-200;
        color: @base-font-color;
        color: fade(@base-font-color, 54%);
    }
    & when (@skin= "office-365") {
        background: @theme-lighter;
        color: @theme-light-font;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        background: @active-bg-stcolor;
        color: @active-icon-color;
    }
}
.e-dragedNode .e-text
{
    & when (@skin= "material") {
        color: @base-font-color;
        color: fade(@base-font-color, 54%);
    }
    & when (@skin= "office-365") {
        color: @theme-light-font;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        color: @active-icon-color;
    }
    float: left;
}
@{e-js}.e-treeview .e-active, @{e-widget}.e-fullrow-wrap .e-li-active > .e-fullrow
{
    & when (@skin= "material") {
        background: @grey-100;
    }
    & when (@skin= "office-365") {
        background: @theme-lighter;
        color: @theme-light-font;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        .active-gradient();
        color: @active-font-color;
    }
    border: @border-size @border-type transparent;
    border-image: initial;
}
@{e-js}.e-treeview .e-node-hover,
@{e-js}.e-treeview .e-node-focus, @{e-widget}.e-fullrow-wrap .e-li-hover > .e-fullrow, @{e-widget}.e-fullrow-wrap .e-li-focus > .e-fullrow
{
    & when (@skin= "material") {
        background: @grey-200;
        border: @border-size @border-type transparent;
    }
    & when (@skin= "office-365") {
        background: @neutral-lighter;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        .hover-gradient();
        color: @hover-font-color;
        border: @border-size @border-type @hover-border-color;
    }
    border-image: initial;
	cursor:pointer;
}
@{e-widget}.e-treeview-wrap.e-dragging .e-node-hover, @{e-widget}.e-fullrow-wrap.e-dragging .e-li-hover > .e-fullrow {
    & when (@skin= "material") {
        background: transparent;
        border-color: @grey-200;
    }
}
@{e-widget}.e-treeview-wrap.e-dragging .e-active.e-node-hover, @{e-widget}.e-fullrow-wrap.e-dragging .e-li-active.e-li-hover > .e-fullrow {
    & when (@skin= "material") {
        background: @grey-100;
        border-color: @grey-100;
    }
}
@{e-widget}.e-treeview-wrap .e-sibling
{
    & when (@skin= "material") {
        background: @accent-color;
    }
    & when (@skin= "office-365") {
        border-left-color: @theme-primary;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        background: @treeview-drop-image;
        background-repeat: no-repeat;
    }
}
@{e-widget}.e-treeview-wrap.e-rtl .e-sibling {
    & when (@skin= "office-365") {
        border-right-color: @theme-primary;
    }
}
@{e-widget}.e-treeview-wrap .e-sibling::before {
    & when (@skin= "material") {
        background: @base-font-color;
        background: fade(@base-font-color,12%);
    }
    & when (@skin= "office-365") {
        background: @neutral-tertiary-alt;
    }
}
@{e-js}.e-treeview .e-node-disable
{
    filter: alpha(opacity=40);
    opacity: .4;
}

@{e-js}.e-treeview .e-icon.e-load,
@{e-js}.e-treeview.e-rtl .e-icon.e-load
{
    background-image: @ajaxloaderimage;
    background-repeat: no-repeat;
    & when (@skin= "material") {
        background-position: center;
    }
    & when (@skin= "office-365") {
        background-position: center;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        background-position: right center;
    }
}
@{e-js}.e-treeview.e-rtl .e-icon.e-load {
    & when not (@skin= "material") and not (@skin="office-365") {
        background-position: left center;
    }
}

@{e-js}.e-treeview .e-item .e-icon{
    & when (@skin= "material") {
        color: @base-font-color;
        color: fade(@base-font-color, 54%);
    }
    & when (@skin= "office-365") {
        color: @neutral-light-font;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        color: @default-icon-color;
    }
}

@{e-js}.e-treeview .e-fe-popup .e-content {
    background-color: @content-bg-color;
    border-color: @default-border-color;
}

@{e-js}.e-treeview .e-fe-popup .e-downtail:after {
    border-top-color: @content-bg-color;
}

@{e-js}.e-treeview .e-fe-popup .e-downtail:before, @{e-js}.e-treeview .e-fe-popup .e-downtail {
    border-top-color: @default-border-color;
}

@{e-js}.e-treeview .e-fe-popup .e-spanclicked {
    border-color: @default-icon-color;
}

.e-drop-count {
    & when (@skin= "material") {
        background-color: @accent-color;
        color: @accent-font-color;
    }
    & when (@skin= "office-365") {
        background-color: @theme-primary;
        color: @theme-primary-font;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        background-color: @default-icon-color;
        color: @content-bg-color;
    }
    border-color: @content-bg-color;
}

@{e-widget}.e-fullrow-wrap .e-li-active .e-active, @{e-widget}.e-fullrow-wrap .e-li-hover .e-node-hover, @{e-widget}.e-fullrow-wrap .e-li-focus .e-node-focus {
    background: transparent;
}

@{e-widget}.e-fullrow-wrap .e-item.e-li-active > .e-text-wrap > .e-icon {
    & when (@skin= "office-365") {
        color: @theme-light-font;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        color: @active-icon-color;
    }
}

@{e-widget}.e-fullrow-wrap .e-item.e-li-hover > .e-text-wrap > .e-icon, @{e-widget}.e-fullrow-wrap .e-item.e-li-active.e-li-focus > .e-text-wrap > .e-icon {
    & when (@skin= "office-365") {
        color: @neutral-light-font;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        color: @default-icon-color;
    }
}
@{e-js}.e-treeview .e-plus:after, @{e-js}.e-treeview .e-minus:after, @{e-js}.e-treeview .e-icon.e-load:after,
@{e-widget}.e-treeview-wrap:not(.e-fullrow-wrap) .e-text:after, @{e-widget}.e-fullrow-wrap .e-fullrow:after {
    & when (@skin= "material") {
        background: @base-font-color;
        background: fade(@base-font-color,12%);
    }
}
@{e-js}.e-treeview .e-text.e-editable .e-tree-input {
    & when (@skin= "material") {
        border-color: @base-font-color;
        border-color: fade(@base-font-color,54%);
    }
}

/*------------------------------------- Upload Box -------------------------------------------*/
@{e-js}.e-uploadbox .e-inputbtn,@{e-js}.e-uploadbox .e-file-name-txt{
    & when (@skin="material") { 
        font-family: roboto Medium;
        font-size: 16px;
        font-weight: @content-font-weight;
    }

    &when not(@skin="material") {
		font-family: @font-family;
		font-weight: @content-font-weight;
		& when (@skin="office-365") { 
			font-size: 13px;
		}
		& when not (@skin="office-365") { 
			font-size: @content-font-size;
		}
    }
}
@{e-js}.e-uploadbox.e-disable .e-uploadinput{
	cursor: default;
}
@{e-js}.e-uploadbox.e-widget .e-selectpart.e-select,
@{e-js}.e-uploadbox.e-disable .e-select:hover,
@{e-js}.e-uploadbox.e-widget.e-disable .e-selectpart.e-select:hover,
@{e-js}.e-uploadbox.e-widget.e-disable .e-selectpart.e-select:hover .e-inputbtn{
	& when (@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        background-color: @grey-50;
        color: fade(@base-font-color,87%);
        font-family: roboto Medium;
        font-size: 16px;
    }

    &when not(@skin="material") {
    .bs-default-gradient();
	color: @default-font-color;
	border-color: @default-border-color;
    }
}
@{e-js}.e-uploadbox.e-disable .e-uploadbtn.e-select:hover,
@{e-js}.e-uploadbox.e-disable .e-uploadclosebtn.e-select:hover  {
	.bs-default-gradient();
	color: @default-font-color;
	border-color: @default-border-color;
	cursor: default;
}
@{e-js}.e-uploadbox.e-widget .e-selectpart.e-select:hover{
    & when (@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        background-color: fade(@base-font-color,12%);
        color: @base-font-color;
        font-family: roboto Medium;
    }

    &when not(@skin="material") {
	.hover-gradient();
    border-color: @hover-border-color;
    color:  @hover-font-color;
    }
}
@{e-js}.e-uploadbox.e-widget .e-inputbtn,
@{e-js}.e-uploadbox.e-disable .e-select .e-inputbtn {
    & when (@skin="material") { 
	color: @base-font-color;  
    text-transform: none;
    }

    &when not(@skin="material") { 
	color: @default-font-color;    
    } 
}
@{e-js}.e-uploadbox.e-widget .e-inputbtn:focus{
	 & when (@skin="material") { 
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        background-color: fade(@base-font-color,12%);
	 }
}
.e-uploadbox.e-widget .e-selectpart.e-select:hover .e-inputbtn {
	color: @hover-font-color;
    border-color: @hover-border-color;
}
@{e-js}.e-uploadbox .e-file-name-txt 
{
    & when (@skin= "material") {
        /*material*/ 
       color:  fade(@base-font-color,87%);  
       font-size: 13px;
       padding-top: 9px;
       
    } 
    & when not (@skin= "material") {
        /*other*/
		& when (@skin= "office-365") {
			color: @theme-light-font;
		}
		& when not (@skin= "office-365") {
			color: @content-font-color;
		}
    } 
}
@{e-js}.e-uploadbox .e-file-size .e-file-name-txt {
        & when (@skin= "material") {
        /*material*/  
       color:  fade(@base-font-color,38%);   
    } 
}
@{e-js}.e-uploadbox .e-file-list .e-file-status-failed 
{
    color: @error-font-color;
}
@{e-js}.e-uploadbox .e-file-list .e-file-status-success 
{
   color: @content-font-color;
}
@{e-js}.e-uploadbox .e-file-progress-status 
{
   & when (@skin= "material") {
        /*material*/
       background: @accent-color;
       border-color:  @accent-color;  
    }
   & when not (@skin= "material") {
		& when (@skin= "office-365") {
			background: @theme-primary;
			border-color:  @theme-primary; 
		}
		& when not (@skin= "office-365") {
			 /*other*/
			.active-gradient();
			border-color:@active-border-color;
		}
    } 
}
@{e-js}.e-uploadbox .e-file-list {
   background-color: @content-bg-color;
   color: @content-font-color;
}
@{e-js}.e-uploadbox .e-ul li:nth-child(odd) .e-file-list {
   & when (@skin= "office-365") {
		border-bottom-width: 0px;
   }
   & when not (@skin= "office-365") {
		border-bottom: @border-size @border-type @gdroparea-border-color ;
		background-color: @content-bg-color;
	}
}
@{e-js}.e-uploadbox .e-head-content {
	& when (@skin= "office-365") {
		background-color: @neutral-white;
		border-bottom: @border-size @border-type @gdroparea-border-color ;
	}
}
@{e-js}.e-uploadbox .e-ul li:last-child .e-file-list {
	& when (@skin= "office-365") {
		border-bottom: @border-size @border-type @gdroparea-border-color ;
	}
}
@{e-js}.e-uploadbox .e-ul li .e-file-list {
	& when (@skin= "office-365") {
		background-color: @neutral-white;
	}
}
@{e-js}.e-uploadbox .e-ul li:nth-child(even) .e-file-list, @{e-js}.e-uploadbox .e-head-content {

	& when not (@skin= "office-365") {
		.material-upload-dialog-bg-color;
		background-color: @alt-row-bg-color;
		border-bottom: @border-size @border-type @gdroparea-border-color ;
	}
}
@{e-js}.e-uploadbox.e-dialog > .e-header + .e-dialog-scroller {
    border-top: 0px;
}
@{e-js}.e-mobile-upload.e-uploadbox .e-ul li:nth-child(even) .e-file-list, @{e-js}.e-mobile-upload.e-uploadbox .e-ul li:nth-child(odd) .e-file-list{
    border-bottom: none;
}
@{e-js}.e-uploadbox .e-file-upload{
	& when (@skin= "office-365") {
		background-color: @neutral-white;
	}
	& when not (@skin= "office-365") {
		.material-upload-dialog-bg-color;
		background-color: @alt-row-bg-color;
	}
}
@{e-js}.e-uploadbox .e-file-progress-bar {
     & when (@skin= "material") {
        /*material*/  
	   background-color: fade(@base-font-color,12%);   
    } 
    & when not (@skin= "material") {
		& when (@skin= "office-365") {
			background-color: @neutral-light;
		}
		& when not (@skin= "office-365") {
			/*other*/  
			border:@border-size @border-type @default-border-color;
		}
    }
}
/*Icons */

@{e-js}.e-uploadbox .e-file-list .e-checkmark
{
   background-color:#39b54a;
   color:@active-font-color;
   border-radius: 10px;
   & when (@skin= "material") {
        /*material*/  
	   margin-top: 4px;
    } 
}
@{e-js}.e-uploadbox .e-file-list .e-file-percentage-failed 
{
   background-color:red;
   color:@active-font-color;
   border-radius: 10px;
    & when (@skin= "material") {
        /*material*/  
	   margin-top: 4px;
    } 
}

@{e-js}.e-uploadbox.e-dialog .e-header{
     & when (@skin= "material") {
        /*material*/ 
       color: @base-font-color;  
       font-weight: bold; 
       line-height: 40px;
	   font-size: 23px;
    }

    & when not (@skin= "material") {
        /*other*/
		& when (@skin= "office-365") {
			color: @neutral-light-font;
			font-size: 21px;
			font-weight: 100;
			background: @neutral-white;
		}
		& when not (@skin= "office-365") {
			color: @header-font-color; 
			font-size: 23px;
			font-weight: @content-font-weight;
		}
    }
	border-color: @header-border-color;
    .material-upload-dialog-active-line; 
}

@{e-js}.e-uploadbox .e-uploadinput{
font-size: 200px;
}

@{e-js}.e-uploadbox .e-ul li:nth-child(odd) .e-file-list .e-action-perform,
@{e-js}.e-uploadbox.e-disable .e-ul li:nth-child(odd) .e-file-list .e-action-perform:hover {
    background-color: @content-bg-color;
	color: @default-icon-color;
}
@{e-js}.e-uploadbox .e-ul li:nth-child(even) .e-file-list .e-action-perform,
@{e-js}.e-uploadbox.e-disable .e-ul li:nth-child(even) .e-file-list .e-action-perform:hover {
    & when not (@skin="office-365") {
		background-color: @alt-row-bg-color;
		color: @default-icon-color;
	}
}
@{e-js}.e-uploadbox .e-ul li:nth-child(even) .e-file-list .e-action-perform:hover,
@{e-js}.e-uploadbox .e-ul li:nth-child(odd) .e-file-list .e-action-perform:hover {
	& when not (@skin="office-365") {
		.hover-gradient();
		color: @hover-icon-color;
		border-color:@hover-bg-stcolor;
	}
}
@{e-js}.e-uploadbox.e-disable .e-ul li:nth-child(even) .e-file-list .e-action-perform:hover,
@{e-js}.e-uploadbox.e-disable .e-ul li:nth-child(odd) .e-file-list .e-action-perform:hover{     
    background:none;
}
@{e-js} .e-uploaddialog.e-dialog .e-btn.e-select{
	& when (@skin="office-365") {
		border: 1px solid transparent;
	}
	& when not (@skin="office-365") {
		.material-upload-border;
		.office-upload-button-border;
		border-color: @default-border-color; 
	}
}
@{e-js} .e-uploaddialog.e-dialog .e-btn.e-select:hover{ 
    .office-upload-btn-hover-color;
    .high-contrast-upload-btn-hover-color;
    .material-upload-background;
    background: @default-bg-stcolor;
}
@{e-js} .e-uploaddialog.e-dialog .e-btn.e-select:active{ 
    & when (@skin="material") { 
	background: fade(@accent-color,12%);
    }
    &when not(@skin="material") { 
		& when (@skin="office-365") {
			background-color: @theme-primary;
			color: @theme-primary-font;
		}
		& when not (@skin="office-365") {
			background: @active-bg-stcolor;
		}
    }
}
@{e-js} .e-uploaddialog.e-dialog .e-btn.e-select{
    & when (@skin="material") { 
        color: @accent-color;
        background: @content-bg-color;
        box-shadow: none;
        border-radius: 0px;
    }
	& when not(@skin="material") { 
		& when (@skin="office-365") {
			color: @neutral-light-font;
			background: @neutral-lighter;
			border-radius: 0px;
		}
	}

}
@{e-js}.e-uploadbox.e-widget .e-selectpart.e-select:active, @{e-js} .e-uploaddialog.e-dialog .e-btn.e-select:active{
     & when (@skin="material") { 
        position: relative; 
    } 
}		
@{e-js}.e-uploadbox.e-widget .e-selectpart.e-select:active:after, @{e-js} .e-uploaddialog.e-dialog .e-btn.e-select:active:after{
    & when (@skin="material") {  
        animation: shadow 1.6s ease-out 0ms;	
    } 	
}

/*Theme Color*/

/*---------------- RTE Theme CSS----------------------*/
@{e-widget}.e-rte
{
    font-family: @font-family;
}
@{e-widget}.e-rte-wrapper
{
	background: @content-bg-color;
    color: @content-font-color;
	font-size:@content-font-size;
    & when (@skin= "material") {
       /*material*/ 
        border: @border-size @border-type fade(@base-font-color,12%);
    }
    & when not (@skin= "material") {
        /*other*/  
        & when (@skin= "office-365") {
       /*material*/  
        border: @border-size @border-type @neutral-quaternary-alt;
    }
    & when not (@skin= "office-365") {
        /*other*/  
        border: @border-size @border-type @default-border-color;
    }
    }
}

@{e-widget} .e-inputtext {
  & when (@skin= "material") {
       /*material*/ 
     border-width: 0 0 1px 0;
     border-color: @grey-300; 
     color: @grey-500;
    }
    & when not (@skin= "material") {
        /*other*/  
     border: 1px solid @content-border-color;
     color: @content-font-color;
    } 
outline:none;
background-color: @content-bg-color;
vertical-align:baseline;
}
@{e-widget} .e-rte-field .e-img-border-field .e-focus,
@{e-widget} .e-rte-field .e-chkbox-wrap.e-focus div > span,
@{e-widget} .e-rte-field .e-inputtext:focus,
@{e-widget} .e-rte-button .e-btn.e-select:focus,
@{e-widget} .e-rte-tablefields .e-chkbox-wrap.e-focus div > span,
@{e-widget} .e-rte-tablefields .e-inputtext:focus,
@{e-widget} .e-img-field-group .e-chkbox-wrap.e-focus div > span,
@{e-widget} .e-img-border-field .e-inputtext:focus,
@{e-widget} .e-rte-stylefield .e-inputtext:focus
{
    & when (@skin= "material") {
       /*material*/ 
       box-shadow: none; 
    }
    & when not (@skin= "material") {
        /*other*/  
        box-shadow: 0 0 2px 0 @active-bg-stcolor;
    }
    
}
@{e-widget} .e-rte-field .e-inputtext:focus, @{e-widget} .e-rte-tablefields .e-inputtext:focus{
    & when (@skin= "material") {
       /*material*/  
       border-bottom: 2px solid @accent-color;
    }
}
@{e-widget}.e-rte-imageTab .e-item:focus {
  box-shadow: 1px 0 0 0 @active-bg-stcolor;
}
/*-----------------Tooltip class ----------------------*/
@{e-widget}.e-rteTooltip{
	min-width : auto;
}
@{e-widget}.e-rteTooltip .e-tipContainer .e-tipcontent {
    padding: 2px 4px;
}
/*----------------------- Toolbar Class-------------------------- */
@{e-widget}.e-rte .e-toolbar.e-rtl > .e-horizontal.e-separator {
     & when (@skin= "material") {
       /*material*/ 
        border-right: @border-size solid fade(@base-font-color,12%);
        margin-right: 4px;
    }
    & when not (@skin= "material") {
        /*other*/  
    & when (@skin= "office-365") {
       /*material*/  
        border-left: @border-size solid @neutral-light;
    }
    & when not (@skin= "office-365") {
        /*other*/  
        border-left: @border-size dotted @content-border-color;
    }
    } 
}
/*.e-rte .e-toolbarspan ul:last-child*/
@{e-widget}.e-rte .e-horizontal.e-separator
{
     & when (@skin= "material") {
       /*material*/ 
        border-right: @border-size solid fade(@base-font-color,12%); 
    }
    & when not (@skin= "material") {
        /*other*/  
         & when (@skin= "office-365") {
       /*material*/  
        border-right: @border-size solid @neutral-light;
        height: 40px;
    }
    & when not (@skin= "office-365") {
        /*other*/  
        border-right: @border-size dotted @content-border-color;
    }
    } 
}
@{e-widget} .e-rte-unorderlistname .e-liseparator,
@{e-widget} .e-rte-orderlistname .e-liseparator
{
    border-bottom: @border-size dotted @content-border-color;
}
@{e-widget}.e-rte .customtable-group:hover
{
	.hover-gradient();
	color: @hover-font-color;
}

@{e-widget}.e-rte .e-toolbarspan
{
     & when (@skin= "office-365") {
       /*material*/  
        border: none; 
    border-bottom: @tools-border-radius @border-type @neutral-quaternary-alt; 
    }
    & when not (@skin= "office-365") {
        /*other*/  
        border: none; 
    border-bottom: @tools-border-radius @border-type @active-bg-stcolor; 
    }
    
}
@{e-widget}.e-rte .e-toolbar .e-ul.e-horizontal.e-separator:first-child, @{e-widget}.e-rte .e-toolbar>.e-horizontal.e-ul:first-child{
    & when (@skin= "material") {
        /*other*/  
        padding-left: 0px;
    } 
}
@{e-widget}.e-dialog .e-fieldseparate,@{e-widget} .e-rte-toolbar .e-responsive-toolbar.e-toolbarspan
{
    border-color: @content-border-color;
}

@{e-widget}.e-rte .e-rte-footer
{
    border-top: @border-size @border-type @content-border-color;
    .default-gradient();
}

 @{e-widget}.e-rte-colorpalette.e-menu.e-context > li:hover
{
	background:none;
}

 @{e-widget}.e-rte-colorpalette.e-menu.e-context .e-mfocused,
 @{e-widget}.e-rte-colorpalette.e-menu.e-context .e-mhover
{
	background:none;
}

 @{e-widget}.e-rte-table-picker.e-dialog
{
	.default-gradient();
}

@{e-widget} .e-rte-tablecell
{
    border-color: @default-border-color;
}

@{e-widget} .e-rte-tablecell.e-default
    {
        background: @content-bg-color;
    }

    @{e-widget} .e-rte-tablecell.e-active
    {
        .hover-gradient();
		border-color: @hover-border-color;
    }
 @{e-widget}.e-rte .e-toolbar .e-rte-format .e-hover,
 @{e-widget}.e-rte .e-toolbar .e-rte-fontgroup .e-hover,
 @{e-widget}.e-rte .e-toolbar .e-rte-lists .e-hover,
 @{e-widget}.e-rte .e-toolbar .e-res-pos:hover
{
    & when (@skin= "material") {
       /*material*/ 
        background-color: @grey-50;
    }
    & when not (@skin= "material") {
        /*other*/  
        background-color: @hover-bg-stcolor;   
    } 
    border-color: transparent;
	background-image:none;
	background-clip: padding-box;
}
@{e-widget}.e-rte .e-toolbar .e-rte-lists .e-active
{
    background:none;
	border-color: transparent;
}
@{e-widget}.e-rte-orderlistname.e-menu.e-context .e-list:hover ,
@{e-widget}.e-rte-unorderlistname.e-menu.e-context .e-list:hover,
@{e-widget}.e-rte-orderlistname.e-menu.e-context .e-list.e-mhover .e-rte-toolbar-icon,
@{e-widget}.e-rte-unorderlistname.e-menu.e-context .e-list.e-mhover .e-rte-toolbar-icon{
	& when (@skin= "material") {
       /*material*/ 
    background:@primary-font-color;
    height: 36px;
    }
    & when not (@skin= "material") {
        /*other*/  
    & when (@skin= "office-365") {
       /*office-365*/ 
    background:@theme-lighter;
    }
    & when not (@skin= "office-365") {
       /*office-365*/   
    background:@hover-bg-stcolor;
    }
    } 
}
@{e-widget}.e-rte-orderlistname.e-menu.e-context .e-list,
@{e-widget}.e-rte-unorderlistname.e-menu.e-context .e-list{
     & when (@skin= "office-365") {
       /*office-365*/ 
   border: 1px solid @neutral-light;
    }
}
@{e-widget}.e-rte-unorderlistname.e-menu li.e-list:nth-child(3), @{e-widget}.e-rte-unorderlistname.e-menu li.e-list:nth-child(4),
@{e-widget}.e-rte-orderlistname.e-menu li.e-list:nth-child(4), @{e-widget}.e-rte-orderlistname.e-menu li.e-list:nth-child(5), 
@{e-widget}.e-rte-orderlistname.e-menu li.e-list:nth-child(6)
{
	& when (@skin= "office-365") {
       /*office-365*/ 
    margin-top: 8px;
    }
}
@{e-widget}.e-rte-unorderlistname.e-menu li.e-list:nth-child(2), @{e-widget}.e-rte-unorderlistname.e-menu li.e-list:nth-child(4),
@{e-widget}.e-rte-orderlistname.e-menu li.e-list:nth-child(3), @{e-widget}.e-rte-orderlistname.e-menu li.e-list:nth-child(6)
{	 
    & when (@skin= "office-365") {
       /*office-365*/ 
    margin-right: 0px;
    }
}
@{e-widget} .e-rte-toolbar-icon.e-rte-unlistitems.customUnOrder.e-list.e-mhover, @{e-widget} .e-rte-toolbar-icon.e-rte-listitems.customOrder.e-list.e-mhover,
@{e-widget} .e-rte-toolbar-icon.e-rte-unlistitems.customUnOrder.e-list:hover,@{e-widget} .e-rte-toolbar-icon.e-rte-listitems.customOrder.e-list:hover
    {
        & when (@skin= "material") {
            /*material*/ 
            height: 25px;
        }
    }
@{e-widget}.e-rte .e-rte-resize
{
    height: 5px;
    cursor: se-resize;
}

@{e-widget}.e-rte .e-rte-htmltaginfo,
@{e-widget}.e-rte .e-rte-wordcount,
@{e-widget}.e-rte .e-rte-charcount
{
    font-family: @font-family;
    font-size: 14px;
    color: @content-font-color;
    cursor: default;
}

@{e-widget}.e-rte .e-rte-footericon,
@{e-widget}.e-rte .e-rte-wordcount,
@{e-widget}.e-rte .e-rte-charcount
{
    border-right: @border-size @border-type @content-border-color;
}

@{e-widget}.e-rte .e-rte-footer.e-rtl .e-rte-icons.clearAll.e-rte-footericon
{
    border-left: @border-size @border-type @content-border-color;
}

 @{e-widget}.e-rte-colorpalette
{
 & when (@skin= "material") {
       /*material*/ 
    background-color: @content-bg-color !important; 
    padding: 5px !important;
	width:auto !important;
    }
 & when not (@skin= "material") {
        /*other*/  
    padding: 5px !important;
	width:auto !important;
    } 
}
@{e-widget} .e-error
{
    color: #cd0a0a;
}
@{e-widget}.e-rte .e-dialog .e-dialog-tab
{    
    border: @border-size @border-type @default-border-color;
}
@{e-widget}.e-rte .e-dialog .e-dialog-tab.e-tab .e-header li,@{e-widget}.e-rte-context-menu.e-context .e-rte-separator {
    border-color: @content-border-color;
}
@{e-widget}.e-rte-context-menu.e-menu .e-list.e-mhover .e-rte-toolbar-icon{
     .switch-rte-context-icon-color;
	color: @hover-font-color;
}
@{e-widget} .e-rte-toolbar .e-toolbar .e-tooltxt.e-active{
    .switch-rte-active-icon-color;
	color: @active-font-color;
}
@{e-widget} .e-rte-toolbar .e-toolbar .e-ul{
     & when (@skin= "material") {
       /*material*/ 
        border-color: fade(@base-font-color,12%);
    }
    & when not (@skin= "material") {
        /*other*/   
    .office-rte-toolbar-color; 
	border-color: @default-border-color;
    } 
	}
@{e-widget}.e-rte .e-tooltxt .e-btn.e-select, @{e-widget}.e-rte .e-tooltxt .e-btn.e-ntouch.e-disable.e-select:hover, @{e-widget}.e-rte .e-tooltxt .e-btn.e-disable.e-select:hover{
      & when (@skin= "material") {
       /*material*/ 
        background: @grey-50;
    }
    & when not (@skin= "material") {
        /*other*/   
    & when (@skin= "office-365") {
       /*office-365*/ 
        background: @neutral-white;
        width: 24px;
        height: 36px;
    }
    & when not (@skin= "office-365") {
       /*office-365*/   
      background: @default-bg-stcolor;
    }
    }  
}
@{e-widget}.e-rte .e-tooltxt .e-split-btn.e-rht-btn, @{e-widget}.e-rte .e-tooltxt .e-split-btn.e-disable.e-select:hover, @{e-widget}.e-rte .e-tooltxt .e-split-btn.e-disable.e-select:hover{
& when (@skin= "office-365") {
       /*office-365*/ 
        background: @neutral-white;
        width: 16px !important;
        height: 36px !important;
    }
}
 @{e-widget}.e-rte .e-tooltxt.e-active .e-split-btn.e-rht-btn:focus, @{e-widget}.e-rte .e-tooltxt.e-active .e-split-btn.e-disable.e-select:focus{
    & when (@skin= "office-365") {
       /*office-365*/ 
        border: 0px solid;
    }
 }
 @{e-widget}.e-rte .e-tooltxt.e-active .e-btn.e-select:focus, @{e-widget}.e-rte .e-tooltxt.e-active .e-btn.e-ntouch.e-disable.e-select:focus{
    & when (@skin= "office-365") {
       /*office-365*/ 
        border: 0px solid;
    }
 }
 @{e-widget}.e-rte .e-tooltxt.e-active .e-btn.e-select, @{e-widget}.e-rte .e-tooltxt.e-active .e-btn.e-ntouch.e-disable.e-select{
    & when (@skin= "office-365") {
       /*office-365*/ 
        background: @theme-primary;
        color: @neutral-white;
    }
 }
 @{e-widget}.e-rte .e-tooltxt.e-active .e-btn.e-select span.e-icon, @{e-widget}.e-rte .e-tooltxt.e-active .e-btn.e-ntouch.e-disable.e-select span.e-icon{
    & when (@skin= "office-365") {
       /*office-365*/  
        color: @neutral-white;
    }
 }
@{e-widget}.e-rte .e-tooltxt .e-btn.e-select:hover{
     & when (@skin= "office-365") {
       /*office-365*/ 
     background: @neutral-lighter;
    }
}
@{e-widget}.e-rte .e-tooltxt .e-btn.e-ntouch.e-select:hover{
    background: @hover-bg-stcolor;
}
@{e-widget}.e-rte .e-rteItem-orderedList .e-split, @{e-widget}.e-rte .e-rteItem-unorderedList .e-split{
    .material-rte-splitbtn-radius;
}
@{e-widget} .e-responsive-toolbar .e-rte-lists.e-ul .e-rteItem-unorderedList.e-tooltxt .e-split, 
@{e-widget} .e-responsive-toolbar .e-rte-lists.e-ul .e-rteItem-orderedList.e-tooltxt .e-split{ 
    height: 24px !important;
    width: 36px !important;
} 
@{e-widget}.e-rte .e-toolbar.e-js ul>li.e-tooltxt .e-split {
    .material-rte-splitbtn-radius;
}
@{e-widget}.e-rte .e-toolbar.e-js ul>li.e-tooltxt .e-ddl .e-in-wrap {
     & when (@skin= "material") {
       /*material*/ 
        border-width: 0 0 0 0;
    }
    & when not (@skin= "material") {
        /*other*/    
      border-color: @content-border-color;
    }  
} 
@{e-widget}.e-rte .e-horizontal.e-separator > li:last-child {
     & when (@skin= "material") {
       /*material*/ 
    margin-right: 4px;
    }
}

@{e-widget}.e-rte .e-rte-toolbar .e-icon.e-toolbar-res-arrow, @{e-widget}.e-rte .e-rte-toolbar.e-rtl .e-icon.e-toolbar-res-arrow {
    & when (@skin= "material") {
       /*material*/ 
    padding-top: 0px !important;
    }
}
@{e-widget}.e-rte .e-toolbar .e-icon.e-toolbar-res-arrow{             
            height:26px;
             margin-top:5px;
         }

@{e-widget}.e-rte .e-toolbar.e-rtl .e-rteItem-unorderedList{
    & when (@skin= "material") {
       /*material*/ 
    margin-right: 0px;
    }
}
@{e-widget}.e-rte .e-toolbar.e-rtl .e-ul.e-horizontal.e-separator .e-tooltxt:first-child{
     & when (@skin= "material") {
       /*material*/ 
    margin-right: 4px;
    }
}
@{e-widget}.e-rte .e-toolbar.e-rtl .e-ul.e-horizontal.e-separator .e-tooltxt:last-child{
 & when (@skin= "material") {
       /*material*/ 
        margin-left: 0;
    }
}
@{e-widget}.e-rte .e-toolbar.e-rtl>.e-horizontal.e-separator{
     & when (@skin= "material") {
       /*material*/ 
    margin-right: 4px;
    border-left: 0px; 
    }
}
@{e-widget}.e-rte .e-background-color,@{e-widget} .e-rteItem-backgroundColor .e-background-color, @{e-widget}.e-rte .e-font,@{e-widget} .e-rteItem-fontColor .e-font{
    & when (@skin= "material") {
       /*material*/ 
        width: 24px;
        height: 24px;
    }
}
@{e-widget}.e-rte .e-toolbar>ul>li{
    & when (@skin= "material") {
       /*material*/ 
        padding: 10px;
    }
}
@{e-widget}.e-rte .e-toolbar .e-ul .e-tooltxt .e-ddl .e-select{
     & when (@skin= "material") {
       /*material*/ 
        background: @grey-50;
    }
}
@{e-widget}.e-rte .e-toolbar .e-ul .e-tooltxt .e-ddl .e-input{
    & when (@skin= "material") {
       /*material*/ 
        background: @grey-50;
    }
} 
@{e-widget}.e-rte .e-toolbar .e-rte-format.e-ul .e-tooltxt .e-ddl .e-input{
    & when (@skin= "office-365") {
       /*office-365*/ 
        padding-left: 0.557em;
    }
}
@{e-widget}.e-rte .e-toolbar.e-rtl .e-rte-format.e-ul .e-tooltxt .e-ddl .e-input{
    & when (@skin= "office-365") {
       /*office-365*/ 
        padding-right: 0.557em;
    }
} 
@{e-widget}.e-rte .e-toolbar .e-ul .e-tooltxt .e-ddl.e-widget.e-popactive .e-select{
    & when (@skin= "material") {
       /*material*/   
        width: 24px;
    }
}
@{e-widget}.e-rte .e-split.e-widget .e-in-wrap.e-splitarrowright .e-split-btn.e-left-btn{
    & when (@skin= "material") {
       /*material*/  
        border: 0px;
    }
}
@{e-widget} .e-rte-button .e-rte-btn.e-button.e-select, @{e-widget}.e-rte.e-findandreplace.e-dialog .e-widget-content .e-btn.e-select{
    & when (@skin="material") { 
        color: @accent-color;
        background: @content-bg-color;
        box-shadow: none;
        border-radius: 0px;
    }
}
@{e-widget} .e-rte-button .e-rte-btn.e-button.e-btn.e-select:hover, @{e-widget}.e-rte.e-findandreplace.e-dialog .e-widget-content .e-btn.e-select:hover{
    & when (@skin="material") { 
        background: fade(@base-font-color,12%);
        box-shadow: none;
        border-radius: 0px;
    }
}
@{e-widget} .e-rte-button .e-rte-btn.e-button.e-btn.e-select:active, @{e-widget}.e-rte.e-findandreplace.e-dialog .e-widget-content .e-btn.e-select:active{
    & when (@skin="material") { 
	background: fade(@accent-color,12%);
    }
}
@{e-widget}.e-rte .e-toolbar.e-rtl{
    & when (@skin="material") {
        padding-right: 24px;
    }
}
@{e-widget} .e-rte-format.e-ul.e-horizontal.e-separator.e-comnrtl{
    & when (@skin="material") {
        margin-right: 0px;
    }
}
@{e-widget} .e-responsive-toolbar>.e-horizontal.e-ul:first-child{
     & when (@skin="material") {
            padding-left: 0px;
    }
}
@{e-widget}.e-rte-orderlistname.e-menu.e-context .e-list.e-mhover, @{e-widget}.e-rte-unorderlistname.e-menu.e-context .e-list.e-mhover, @{e-widget}.e-rte-orderlistname.e-menu.e-context .e-mhover>.e-menulink, @{e-widget}.e-rte-unorderlistname.e-menu.e-context .e-mhover>.e-menulink{
     & when (@skin="material") { 
    background: @primary-font-color; 
    }
}
@{e-widget}.e-rte .e-toolbar.e-js ul>li.e-tooltxt .e-ddl{
    & when (@skin= "office-365") {
            /*office-365*/ 
       height: 32px !important;
    }
}
@{e-widget}.e-rte .e-toolbar.e-js ul>li.e-tooltxt .e-split{
    & when (@skin= "office-365") {
            /*office-365*/ 
       height: 35px !important;
    }
} 
@{e-widget}.e-rte-unorderlistname.e-menu{
    & when (@skin= "office-365") {
	width: 108px !important;
    padding: 15px; 
    }
}
@{e-widget}.e-rte-orderlistname.e-menu{
	& when (@skin= "office-365") {
    width: 150px !important;
	padding: 15px; 
    }
}
@{e-widget}.e-rte-unorderlistname.e-menu li.e-list, @{e-widget}.e-rte-orderlistname.e-menu li.e-list{
    & when (@skin= "office-365") {
	 width: 32px !important;
	 height: 32px;
	 margin-right: 8px; 
    }
}

@{e-widget} .e-rte-toolbar-icon.e-rte-unlistitems.customUnOrder.e-list{
	& when (@skin= "office-365") {
    width: 100% !important;
	margin-top: 15px;
    }
}
 
@{e-widget} .e-rte-toolbar-icon.e-rte-listitems.customOrder.e-list{
	& when (@skin= "office-365") {
    width: 100% !important;
	margin-top: 15px;
	margin-right: 0px;
    }
}

@{e-widget} .e-rtlrte label{
	height: 12px;
    line-height: 10px;
}

@{e-widget}.e-rte-orderlistname.e-menu.e-context.e-split, @{e-widget}.e-rte-unorderlistname.e-menu.e-context.e-split, @{e-widget}.e-rte-colorpalette.e-menu.e-context.e-split,
@{e-widget}.e-rte-orderlistname.e-menu.e-widget.e-split li.e-list, @{e-widget}.e-rte-unorderlistname.e-menu.e-widget.e-split li.e-list
{
	& when (@skin= "office-365") {
        background: @theme-primary-font;
        border-color: @neutral-light;
	}
}
/*---------------- RTE Theme End------------------*/



/*------------------------------------- MetroLight Skin -------------------------------------------*/

@{e-widget}.e-waitpopup-pane .e-image {
    background-color: #FFFFFF;
    background-image: @loading-img;
}
@{e-widget}.e-waitpopup-pane {
    & when (@skin= "material") {
       /*material*/ 
        background-color: fade(@base-font-color,54%);
    }
    & when not (@skin= "material") {
        & when (@skin= "office-365") {
            /*office-365*/ 
        background-color: fade(@neutral-light-font-alt,40%);
        }
        & when not (@skin= "office-365") {
            /*other*/   
        background-color: @overlay-bg-color;
        }
    }
    color: @header-font-color;
	-webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
}

@{e-widget}.e-chkbox-wrap {
    display: inline-flex;
}
@{e-widget}.e-chkbox-wrap.e-tb-cell .e-text, @{e-widget}.e-chkbox-wrap.e-tb-cell div {
    display: table-cell;
     padding: 0px 5px 2px 5px;    
}
@{e-widget}.e-chkbox-wrap.e-check-small.e-tb-cell .e-text {   
    padding: 0px 5px 2px 5px;        
}
@{e-widget}.e-chkbox-wrap.e-focus div > span 
{
	box-shadow: 0 0 2px @shadow-bg-color;
}
@{e-widget}.e-chkbox-wrap div > span
{
    .high-contrast-checkbox-bordercolor;
    .material-checkbox-bordercolor; 
	   & when (@skin= "material") {
	   		border-color:fade(@base-font-color,54%); 
            background-color: @content-bg-color;
	   }
        & when (@skin= "office-365") {
        border-width:2px;
        border-color:@neutral-tertiary;
        background-color: @neutral-white;
        }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
       border-color: @content-border-color;
       background-color: @content-bg-color;
    }
    
}
@{e-widget}.e-chkbox-wrap.e-disable {
   & when (@skin= "material") {
	  opacity:0.26;
	}
}
@{e-widget}.e-chkbox-wrap div>span.e-chk-act,@{e-widget}.e-chkbox-wrap div>span:hover{
    & when (@skin= "material") {        
            .high-contrast-checkbox-bordercolor; 
	   		.material-checkbox-bordercolor;
	   }
        & when (@skin= "office-365") {   
            color:@neutral-white;
        border:2px solid @theme-primary;
        background-color: @theme-primary;
        }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/             
    .high-contrast-checkbox-bordercolor; 
    border-color: @content-border-color;
    }
}
@{e-widget}.e-chkbox-wrap div>span:hover{
& when (@skin= "material") {
	   		border-color:fade(@base-font-color,54%);
	   }
  & when (@skin= "office-365") {    
        border:2px solid @neutral-secondary-alt;
        background-color: @neutral-white;
        }
}
@{e-widget}.e-chkbox-wrap div > span.e-chk-act {
    .high-contrast-checkbox-bordercolor;
    .office-checkbox-bordercolor;
    .material-checkbox-act-bordercolor;
    border-color: @content-border-color;
     & when (@skin= "office-365") {   
            color:@neutral-white;
        border:2px solid @theme-primary;
        background-color: @theme-primary;
        }
}
@{e-widget}.e-chkbox-wrap.e-widget.e-disable div > span.e-chk-act, 
@{e-widget}.e-chkbox-wrap.e-widget.e-disable div > span.e-chk-indeter, 
@{e-widget}.e-chkbox-wrap.e-disable div > span {
& when (@skin= "material") {
	   		border-color:fade(@base-font-color,26%);
	   }		
}
@{e-widget}.e-chkbox-wrap .e-chk-image.e-stop,@{e-widget}.e-chkbox-wrap .e-chk-image.e-checkmark
{    
    .switch-checkbox-icontick;
    & when (@skin= "material") {
        /*material*/
       color:@accent-font-color;
        background-color: @accent-color;
    }
    & when (@skin= "office-365") {
         color:@theme-primary-font;
        background-color: @theme-primary;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        color:@active-bg-stcolor;
    }
}
@{e-widget}.e-chkbox-wrap.e-disable .e-chk-image.e-stop,@{e-widget}.e-chkbox-wrap.e-disable .e-chk-image.e-checkmark{
    & when (@skin= "office-365") {
          background-color: @neutral-tertiary-alt;
    }
}
@{e-widget}.e-chkbox-wrap .e-chk-image.e-stop {
& when (@skin= "material") {
    color:rgba(0,0,0,.54);
	background-color: @content-bg-color;
			}
}
@{e-widget}.e-chkbox-wrap .e-chk-image.e-stop:before {
& when (@skin= "material") {
content: "\e833";
			}
}
@{e-widget}.e-chkbox-wrap.e-disable .e-chk-image.e-checkmark {
& when (@skin= "material") {
       background-color:fade(@base-font-color,26%);
			}
}

@{e-widget}.e-chkbox-wrap .e-text
{
    font-family:@font-family;
    font-size:@font-size;
	& when (@skin= "material") {
    font-size:13px;
	}
    color:@content-font-color;
}
.e-check-small.e-chkbox-wrap .e-text {
	& when (@skin= "material") {
	vertical-align:middle;
	margin-top:-7px;
	}
}
.e-check-medium.e-chkbox-wrap .e-text {
	& when (@skin= "material") {
	vertical-align:middle;
	margin-top:-15px;
	}
}

.e-material-animate.e-chkbox-wrap .e-chk-act::before {
	& when (@skin= "material") {
		border-radius: 50%;
		position: absolute;
		box-sizing: border-box;
		top: 43%;
		right: 6px;
		transform: scale(0);
        -webkit-transform: scale(0);
		width: 3px;
		height: 3px;
		content: '';
		border:1px solid fade(@base-font-color, 70%);
		animation: smallShadow .45s cubic-bezier(.25,.8,.25,1);
		background: fade(@base-font-color, 70%);
	 }
}
.e-material-animate.e-chkbox-wrap .e-chk-inact::after {
	& when (@skin= "material") {
		border-radius: 50%;
		position: absolute;
		box-sizing: border-box;
		top: 43%;
		right: 6px;
		transform: scale(0);
        -webkit-transform: scale(0);
		width: 3px;
		height: 3px;
		background: fade(@accent-color, 70%);
		content: '';
		border:1px solid fade(@accent-color,70%);
		animation:smallShadow 0.45s cubic-bezier(.25,.8,.25,1);
	}
}
	.e-material-animate.e-chkbox-wrap .e-chkbox-medium .e-chk-act::before {   
		& when (@skin= "material") {
			right: 8.7px;
			top: 45%;
			animation:mediumShadow 0.45s cubic-bezier(.25,.8,.25,1);
		}
	}
	.e-material-animate.e-chkbox-wrap .e-chkbox-medium .e-chk-inact::after {
	& when (@skin= "material") {
			right: 8.7px;
			top: 45%;
			animation:mediumShadow 0.45s cubic-bezier(.25,.8,.25,1);
	}
}
@keyframes mediumShadow {
   100% {
    opacity: 0;
    transform: scale(18, 18);
  }
}
@keyframes smallShadow {
    100% {
    opacity: 0;
	transform: scale(15, 15);

  }
}

@{e-widget}.e-chkbox-wrap div>span.e-chk-act:hover{
     & when (@skin= "office-365") {
        background-color: @theme-dark-alt;
        border:2px solid @theme-dark-alt;
    }
}
@{e-widget}.e-chkbox-wrap.e-disable div>span.e-chk-act{
    & when (@skin= "office-365") {
        background-color: @neutral-tertiary-alt;
        border:2px solid @neutral-tertiary-alt;
    }
}
@{e-widget}.e-chkbox-wrap.e-disable .e-chk-image.e-checkmark{
    & when (@skin= "office-365") {
        background-color: @neutral-tertiary-alt;
    }
}
@{e-widget}.e-chkbox-wrap.e-disable div>span:hover{
     & when (@skin= "office-365") {
        border-color:@neutral-tertiary-alt;
    }
}
@{e-widget}.e-chkbox-wrap.e-disable div>span{
     & when (@skin= "office-365") {
        background-color:@neutral-tertiary-alt;
        border:2px solid @neutral-tertiary-alt;
    }
}
@{e-widget}.e-chkbox-wrap.e-disable div>span.e-chk-act:hover{
     & when (@skin= "office-365") {
        border-color:@neutral-tertiary-alt;
    }
}
@{e-widget}.e-chkbox-wrap div>span.e-chk-indeter{
     & when (@skin= "office-365") {
         color:@neutral-white;
        border:2px solid @theme-primary;
        background-color: @theme-primary;
    }
}
@{e-widget}.e-chkbox-wrap div>span.e-chk-indeter:hover{
    & when (@skin= "office-365") {
        background-color: @theme-dark-alt;
        border:2px solid @theme-dark-alt;
    }
}

@{e-widget}.e-radiobtn-wrap.e-disable>span{
    & when (@skin= "office-365") {
        background-color: @neutral-tertiary-alt;
        border:2px solid @neutral-tertiary-alt;
    }
}
@{e-widget}.e-chkbox-wrap.e-disable div>span.e-chk-indeter{
    & when (@skin= "office-365") {
        background-color: @neutral-tertiary-alt;
        border:2px solid @neutral-tertiary-alt;
    }
}
@{e-widget}.e-chkbox-wrap.e-disable div>span{
     & when not (@skin= "material") and not (@skin="office-365"){
     background-color: @disable-control-background-color;
    border-color:@disable-control-border-color;
    }
}
@{e-widget}.e-chkbox-wrap.e-disable{
     & when not (@skin= "material") and not (@skin="office-365"){
    opacity:1;
    }
}
@{e-widget}.e-chkbox-wrap.e-disable .e-chk-image.e-stop,
@{e-widget}.e-chkbox-wrap.e-disable .e-chk-image.e-checkmark{
     & when not (@skin= "material") and not (@skin="office-365"){
    color:@disable-icon-bg-color;
    }
}
@{e-widget}.e-chkbox-wrap .e-chk-act, @{e-widget}.e-chkbox-wrap .e-chk-inact, @{e-widget}.e-chkbox-wrap .e-chk-indeter{
    box-sizing: content-box;
}

/*Theme Color*/
@{e-widget}.e-radiobtn-wrap > span {
    .high-contrast-radio-iconcircle;
    .high-contrast-radio-bordercolor;
    background-image: none;   
    & when (@skin= "material") {
        /*material*/
        .material-radio-bordercolor;
	 border-color:fade(@base-font-color,54%);
    background-color: @content-bg-color;
    }
    & when (@skin= "office-365") {
         background-color: @neutral-white;
         border:2px solid @neutral-tertiary;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/       
    background-color: @content-bg-color;
     border-color: @content-border-color;
    }
}
@{e-widget}.e-radiobtnwrap.e-disable > span , 
@{e-widget}.e-radiobtn-wrap.e-disable > span.e-rad-active , 
@{e-widget}.e-radiobtn-wrap.e-disable > span.e-rad-active:hover,
@{e-widget}.e-radiobtn-wrap.e-disable .e-circle_01,
@{e-widget}.e-radiobtn-wrap.e-disable > span:hover{
& when (@skin= "material") {
	   		border-color:fade(@base-font-color,26%);
	}
}
@{e-widget}.e-radiobtn-wrap > span.e-rad-active,@{e-widget}.e-radiobtn-wrap > span.e-rad-active:hover {
    .high-contrast-radio-iconcircle;
    .high-contrast-radio-bordercolor;
    border-color: @content-border-color;
	& when (@skin= "material") {        
    .material-radio-act-bordercolor;
		border-color: @accent-color;
	}
    
}
@{e-widget}.e-radiobtn-wrap > span.e-rad-active{
    & when (@skin= "office-365") {        
         border:2px solid @theme-primary;
    }
}
@{e-widget}.e-radiobtn-wrap.e-disable > span.e-rad-active{
    & when (@skin= "office-365") {        
         border:2px solid @neutral-tertiary-alt;
    }
}
@{e-widget}.e-radiobtn-wrap > span.e-rad-active:hover{
     & when (@skin= "office-365") {        
         border:2px solid @theme-dark-alt;
    }
}
@{e-widget}.e-radiobtn-wrap.e-disable > span.e-rad-active:hover{
     & when (@skin= "office-365") {        
         border:2px solid @neutral-tertiary-alt;
    }
}
@{e-widget}.e-radiobtn-wrap > span:hover{
    .high-contrast-radio-iconcircle;
    .high-contrast-radio-bordercolor;     
     & when (@skin= "material") {
        /*material*/
      .material-radio-bordercolor;
    }
    & when (@skin= "office-365") {        
         border:2px solid @neutral-secondary-alt;
    }
    & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/       
     border-color: @content-border-color;
    }
}
@{e-widget}.e-radiobtn-wrap.e-disable > span:hover{
    & when (@skin= "office-365") {        
         border:2px solid @neutral-tertiary-alt;
    }
}

@{e-widget}.e-radiobtn-wrap.e-focus > span 
{
	box-shadow: 0 0 2px @shadow-bg-color;
}
@{e-widget}.e-radiobtn-wrap .e-spanicon{
    box-sizing:content-box;
}
@{e-widget}.e-radiobtn-wrap .e-rad-select 
{
    background: none repeat scroll 0 0 transparent;
}
@{e-widget}.e-radiobtn-wrap .e-circle_01 {
    .high-contrast-radio-iconcircle;
    .office-radio-iconcircle;
    color: @active-bg-stcolor;
    .material-radio-iconcircle;
    border-color: @content-border-color;
	& when (@skin= "material") {
		border-color: @accent-color;
		color:@accent-color;
	}
     & when (@skin= "office-365") {        
        color:@theme-primary;
    }
}
@{e-widget}.e-radiobtn-wrap .e-circle_01:hover{
    & when (@skin= "office-365") {        
        color:@theme-dark-alt;
    }
}
@{e-widget}.e-radiobtn-wrap.e-disable .e-circle_01, @{e-widget}.e-radiobtn-wrap.e-disable .e-text {
& when (@skin= "material") {
		color:fade(@base-font-color,26%);
	}
 & when (@skin= "office-365") {        
        color:@neutral-tertiary-alt;
    }
}
@{e-widget}.e-radiobtn-wrap .e-text
{
    font-family:@font-family;
    font-size:@font-size;
	& when (@skin= "material") {
	    font-size:13px;
	}
    color:@content-font-color;
	
}

@{e-widget}.e-radiobtn-wrap.e-material-animate .e-radmedium span.e-rad-icon.e-icon.e-circle_01 {
	& when (@skin= "material") {
		}
}
@{e-widget}.e-radiobtn-wrap.e-material-animate .e-radsmaller span.e-rad-icon.e-icon.e-circle_01 {
	& when (@skin= "material") {
		font-size: 10px;
		}
}
@{e-widget}.e-radiobtn-wrap span.e-rad-icon.e-icon.e-rad-select:before {
	& when (@skin= "material") {
    content: "\e686";
    font-size: 0px;
	color:@accent-color;
	}
}

& when (@skin= "material") {
@keyframes rippleEffect {
	0% {
		opacity: 1;
		box-shadow: 0 0 0 0px @accent-color;
		}

	100% {
		box-shadow: 0 0 0 15px @content-bg-color;
		opacity: 0;
		}
	}
}
& when (@skin= "material") {

@keyframes back_rippleEffect {

	0% {
		box-shadow: 0 0 0 15px @content-bg-color;
		opacity: 1;
		}

	100% {
		opacity: 0;
		box-shadow: 0 0 0 0px @accent-color;
		}
	}
}

@{e-widget}.e-radiobtn-wrap span.e-spanicon.e-rad-active {

	& when (@skin= "material") {
	border-radius: 100%;
	z-index: 1;
	}
}

@{e-widget}.e-radiobtn-wrap.e-material-animate span.e-spanicon:after {
	& when (@skin= "material") {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box
	}
}



@{e-widget}.e-radiobtn-wrap.e-material-animate span.e-spanicon:after {
	& when (@skin= "material") {

	top: 0;
	left: 0;
	padding: 0;
	z-index: -1;
	opacity: 0

	}
	}


@{e-widget}.e-radiobtn-wrap.e-material-animate span.e-spanicon.e-rad-active:after {
	& when (@skin= "material") {
	animation: rippleEffect 0.30s linear 0ms;
	}
}
@{e-widget}.e-radiobtn-wrap.e-material-animate span.e-spanicon:after {
	& when (@skin= "material") {
	animation: back_rippleEffect 0.30s linear 0ms;
	}
}

@{e-widget}.e-radiobtn-wrap.e-disable .e-circle_01,
@{e-widget}.e-radiobtn-wrap.e-disable span.e-rad-select{  
     & when not (@skin= "material") and not (@skin="office-365"){ 
     color:@disable-icon-bg-color;
     }
}
@{e-widget}.e-radiobtn-wrap.e-disable>span{
     & when not (@skin= "material") and not (@skin="office-365"){
     background-color: @disable-control-background-color;
    border-color:@disable-control-border-color;
    }
}
@{e-widget}.e-radiobtn-wrap.e-disable{
     & when not (@skin= "material") and not (@skin="office-365"){
    opacity:1;
    }
}
@{e-widget}.e-radiobtn-wrap.e-disable.e-focus > span{
     & when not (@skin= "material") and not (@skin="office-365"){
    box-shadow:none;
    }
}


/*------------------------------------- GroupButton -------------------------------------------*/
@{e-widget}.e-groupbutton {
    & when (@skin="material") {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        border-radius: 2px;
        height: 32px;
        background-color:@grey-50;
    }

    & when not (@skin="material") {
        font-family: @font-family;
        font-weight: @content-font-weight;
        font-size: @content-font-size;
        color: @default-font-color;
        background-repeat: no-repeat;
        border-color: @default-border-color;
        .border-selection();
        .bs-default-gradient();
    }
	& when (@skin="office-365") {
        font-family: @font-family;
        font-weight: 600;
        font-size:14px;
        color: @neutral-light-font;
        background-repeat: no-repeat;
        border-color: @neutral-lighter;
		background-color:@neutral-lighter;
    }
}

@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item {
    & when (@skin="material") {
        position: relative;
        text-transform:uppercase;
        overflow:hidden;
    }
}

@{e-widget}.e-groupbutton-hSmall {
    min-height: 26px;
}

@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content.e-groupBtn-padding {
    padding: 0px;
}

@{e-widget}.e-groupbutton.e-focus {
    &when not(@skin="material"){
        box-shadow: 0 0 2px @shadow-bg-color;
    }
}
@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item:focus {
	& when (@skin="office-365") {
		border-color:@neutral-lighter;
		background-color:@neutral-light;
		color:@neutral-light-font;
    }
}
@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item:active {
	& when (@skin="office-365") {
		border-color:@theme-primary;
		background-color:@theme-primary;
		color:@theme-primary-font;
    }
}


@{e-widget}.e-groupbutton > .e-horizontal.e-ul > .e-grp-btn-item, @{e-widget}.e-groupbutton.e-rtl > .e-horizontal.e-ul > .e-grp-btn-item, @{e-widget}.e-groupbutton > .e-vertical.e-ul > .e-grp-btn-item, @{e-widget}.e-groupbutton > .e-horizontal.e-ul > .e-grp-btn-item.e-border-left, @{e-widget}.e-groupbutton > .e-vertical.e-ul > .e-grp-btn-item.e-border-bottom {
    border-color:@default-border-color;
    .border-selection();
}

@{e-widget}.e-groupbutton > .e-horizontal.e-ul > .e-grp-btn-item.e-disable, @{e-widget}.e-groupbutton > .e-vertical.e-ul > .e-grp-btn-item.e-disable {
    & when (@skin="material") {
        color:fade(@base-font-color,38%);
    }
	& when (@skin="office-365") {
		border-color:@neutral-lighter;
		background-color:@neutral-lighter;
		color:@neutral-tertiary;
    }
}

@{e-widget}.e-groupbutton > .e-horizontal.e-ul > .e-grp-btn-item.e-disable .e-icon, @{e-widget}.e-groupbutton > .e-vertical.e-ul > .e-grp-btn-item.e-disable .e-icon{
    & when (@skin="material") {
        color:fade(@base-font-color,26%);
    }
}

@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-select {
    & when (@skin="material") {
        background-color: @grey-400;
    }

    & when not (@skin="material") {
        color: #fff;
        .active-gradient();
        color: @active-font-color;
    }
}

@{e-widget}.e-groupbutton > .e-horizontal.e-ul > .e-grp-btn-item{
    & when (@skin="material") {
        padding-left:12px;
        padding-right:12px;
    }
}

@{e-widget}.e-groupbutton > .e-vertical.e-ul > .e-grp-btn-item{
    & when (@skin="material") {
        padding-top:12px;
        padding-bottom:12px;
    }
}

@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active.e-hover .e-btn-content .e-btntxt {
    &when not(@skin="material"){
    color: @hover-font-color;
    }
    &when (@skin="material"){
        color: fade(@base-font-color, 87%);
    }
	& when (@skin="office-365") {
		color:@theme-primary-font;
    }
}

@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active.e-hover, @{e-widget}.e-groupbutton.e-rtl > .e-horizontal.e-ul > .e-grp-btn-item.e-active.e-hover {
    .high-contrast-groupbtn-border;
    border-color:@hover-border-color;    
	& when (@skin="office-365") {
		border-color:@theme-dark;
		background-color:@theme-dark;
		color:@theme-primary-font;
    }
}
 @{e-widget}.e-groupbutton > .e-horizontal.e-ul > .e-grp-btn-item {
	border-right-color:transparent;
}
@{e-widget}.e-groupbutton > .e-vertical.e-ul > .e-grp-btn-item {
	border-bottom-color:transparent;
}
@{e-widget}.e-groupbutton.e-rtl >.e-horizontal.e-ul>.e-grp-btn-item {
	border-left-color:transparent;

}
@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-hover, @{e-widget}.e-groupbutton.e-rtl > .e-horizontal.e-ul > .e-grp-btn-item.e-hover {
    &when not (@skin="material"){
    .hover-gradient();
    color: @hover-font-color;
    .high-contrast-groupbtn-border;
    border-color: @hover-border-color;
    }
    &when (@skin="material"){
        background-color: fade(@base-font-color,12%);
    }
	& when (@skin="office-365"){
        background-color: @neutral-light;
    }
}
 
@{e-widget}.e-groupbutton > .e-horizontal.e-ul > .e-grp-btn-item.last,@{e-widget}.e-groupbutton > .e-horizontal.e-ul > .e-grp-btn-item.last.e-hover {
	border-right-color:@default-border-color;
	& when (@skin="office-365") {
		border-color:@neutral-lighter;
    }
}
.e-groupbutton > .e-vertical.e-ul > .e-grp-btn-item.last, .e-groupbutton > .e-vertical.e-ul > .e-grp-btn-item.last.e-hover {
	border-bottom-color:@default-border-color;
	& when (@skin="office-365") {
		border-color:@neutral-lighter;
    }
}

@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content > a.e-btntxt, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content > span.e-btntxt, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content > div.e-btntxt {
    & when (@skin="material") {
        font-family: @font-family;
        font-size: 14px;
    }

    & when not (@skin="material") {
        color: @default-font-color;
        text-decoration: none;
    }
}

@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content > span.e-btntxt.e-grp-responsive {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content > a.e-icon, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content > span.e-icon, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content > div.e-icon {
    & when (@skin="material") {        
        font-size: 18px;
        color: fade(@base-font-color,54%);
        height:24px;
        width:24px;
    }

    & when not (@skin="material") {
        color: @default-icon-color;
    }
}

@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content > a.e-icon:before, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content > span.e-icon:before, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content > div.e-icon:before {
    & when (@skin="material") {                
        height:18px;
        width:18px;
    }
}

@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content > a.e-btntxt, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content > span.e-btntxt, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content > div.e-btntxt,
@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active .e-btn-content > a.e-btntxt, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active .e-btn-content > span.e-btntxt, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active .e-btn-content > div.e-btntxt {
    & when (@skin="material") {
        color: fade(@base-font-color,87%)
    }
}

@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active .e-btn-content > a.e-btntxt, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active .e-btn-content > span.e-btntxt, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active .e-btn-content > div.e-btntxt, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active .e-btn-content > a.e-icon, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active .e-btn-content > span.e-icon, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active .e-btn-content > div.e-icon {
    & when not (@skin="material") {
        color: @active-font-color;
        text-decoration: none;
    }
}

@{e-widget}.e-groupbutton.e-rtl > .e-horizontal.e-ul > .e-grp-btn-item.last, @{e-widget}.e-groupbutton.e-rtl > .e-horizontal.e-ul > .e-grp-btn-item.last.e-hover {
	border-left-color:@default-border-color;
	& when (@skin="office-365") {
		border-color:@neutral-lighter;
    }
}

@{e-widget}.e-groupbutton > .e-ul > .e-disable .e-btn-content > span.e-btntxt,@{e-widget}.e-groupbutton > .e-ul > .e-disable .e-btn-content > a.e-btntxt,@{e-widget}.e-groupbutton > .e-ul > .e-disable .e-btn-content > div.e-btntxt,
@{e-widget}.e-groupbutton > .e-ul > .e-disable.e-active .e-btn-content > span.e-btntxt,@{e-widget}.e-groupbutton > .e-ul > .e-disable.e-active .e-btn-content > a.e-btntxt,@{e-widget}.e-groupbutton > .e-ul > .e-disable.e-active .e-btn-content > div.e-btntxt {
    & when (@skin="material") {
        font-family: @font-family;
        font-size: 14px;
        color: fade(@base-font-color,38%);
    }
}

@{e-widget}.e-groupbutton > .e-ul > .e-disable.e-active{
    & when (@skin="material") {
        background-color:transparent;
    }
}

@{e-widget}.e-groupbutton > .e-ul > .e-disable .e-btn-content > span.e-icon {
    & when (@skin="material") {
        /*font-family: roboto Medium;*/
        font-size: 14px;
        color: fade(@base-font-color,26%);
    }
}

@{e-widget}.e-groupbutton.e-disable {
    & when (@skin="material") {
        background: fade(@base-font-color,12%);
        box-shadow: none;
    }
}

@{e-widget}.e-groupbutton > .e-horizontal.e-ul > .e-grp-btn-item.e-hover {
	.switch-themes-groupbtn-border-color();
	border-right-color:@hover-gbtn-border-color;
	& when (@skin="office-365") {
		border-color:@neutral-light;
    }
	  
}
@{e-widget}.e-groupbutton > .e-vertical.e-ul > .e-grp-btn-item.e-hover {
	.switch-themes-groupbtn-border-color();
	border-bottom-color:@hover-gbtn-border-color; 
	& when (@skin="office-365") {
		border-color:@neutral-light;
    }
}
@{e-widget}.e-groupbutton.e-rtl > .e-horizontal.e-ul > .e-grp-btn-item.e-hover {
	.switch-themes-groupbtn-border-color();
	border-left-color:@hover-gbtn-border-color;
	& when (@skin="office-365") {
		border-color:@neutral-light;
    }
}
@{e-widget}.e-groupbutton.e-rtl > .e-vertical.e-ul > .e-grp-btn-item.e-hover {
	.switch-themes-groupbtn-border-color();
	border-left-color:@hover-gbtn-border-color;
	& when (@skin="office-365") {
		border-color:@neutral-light;
    }
}

@{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item.e-active:not(:active):after, @{e-widget}.e-groupbutton > .e-ul > .e-grp-btn-item:not(:active):after
{
    &when( @skin="material") {
        background-color: fade(@content-bg-color,50%);
    }
} 
@{e-widget}.e-groupbutton.e-disable{
     & when not (@skin= "material") and not (@skin="office-365"){
     background-color: @disable-control-background-color;
    border-color:@disable-control-border-color;
    opacity:1;
    color:@disable-icon-bg-color;
    }
}

&.e-innerIncrement:hover{
background-image:url(../common-images/maps/Zoom-In_hover.png);
}
&.e-legendLabelContent{
color: @gcontent-font-color;
}
&.e-map{
color: @gcontent-font-color;
background-color: @content-bg-color;
border-color: @gdroparea-border-color;
}

&.e-drilldownHeader 
{
   .active-gradient();
}

&.e-map-home 
{
    background-image:@map-home
}

&.e-map-labelContainer {
    width: 200px;
    height: 400px;
    border: 1px solid gray;
}
		
&.e-map-label{
    cursor:pointer;
    color:black;
    padding:5px;
}
&.e-map-label:hover {
	background-color: #eee;
}

&.e-map-home {
 height: 30px;
 width: 30px;
 
}

&.e-map-home:hover {
    background-image:@map-home-hover
}

&.e-map-contribution {
            border-color: #dbdbde;
            right: 0;
            bottom: 0;
            font-family: sans-serif;
            font-weight: normal;
            position: absolute;
            background-color: rgba(255,255,255,0.7);
            font-size: 10px;
            padding: 2px 4px;
            z-index: 1000;
            border-style: solid;
            border-width: 1px;
        }
&.sliderParent{
height:150px;
width:10px;
margin-top:-197px;
margin-left: 34px;
}
&.e-innerIncrement {
    background-image:url(../common-images/maps/Zoom-In.png);
    height:25px;
    width:25px;   
}

&.e-innerDecrement:hover {
   background-image:url(../common-images/maps/Zoom-out_hover.png);
   }
&.e-innerDecrement {
   background-image:url(../common-images/maps/Zoom-out.png);
    height:25px;
    width:25px;    
}
&.nav-dec-Vert{
   margin-top: 150px;
    margin-left: 27px;
}
&.nav-inc-Vert{
 margin-top: 40px;
    margin-left: 27px;
}
&.nav-dec-Horz{
   margin-top: -24px;
margin-left: 0px;
}
&.nav-inc-Horz{
 margin-top: -29px;
margin-left: 175px;
}
&.e-radialTop {
     height: 20px;
   margin-left: 15px;
   width: 52px;
}
&.e-arrowUp:hover {
    background-image:url(../common-images/maps/Arrow_Top_hover.png);
	}
&.e-arrowUp {
    background-image:url(../common-images/maps/Arrow_Top.png);
   height: 20px;   
   width: 52px;
}
&.e-radialLeft {
    height: 52px;
 width: 20px;
 margin-top: -4px;
}
&.e-radialRight {
     margin-left: 61px;
   margin-top:-53px;
    height: 52px;  
   width: 20px;
}
&.e-arrowLeft:hover {
 background-image:url(../common-images/maps/Arrow_Left_hover.png);
 }
 &.e-arrowLeft {
 background-image:url(../common-images/maps/Arrow_Left.png);
 height: 52px;
 width: 20px;
}
&.e-radialBottom {
     height: 20px;
   margin-left: 15px;
   margin-top: -6px;
   width: 52px;
}
&.e-arrowRight:hover {
    background-image:url(../common-images/maps/Arrow_Right_hover.png);
	}
&.e-arrowRight {
    background-image:url(../common-images/maps/Arrow_Right.png);
   height: 52px;  
   width: 20px;
}
&.e-arrowDown:hover{
    background-image:url(../common-images/maps/Arrow_Bootom_hover.png);
	}
&.e-arrowDown {
    background-image:url(../common-images/maps/Arrow_Bootom.png);
   height: 20px;  
   width: 52px;
}
&.e-home-bg {
     height: 30px;
 width: 30px;
 margin-top: -55px;
margin-left: 25px;
}



&.e-interactivelegend-title{
                font-family: @font-family;
                pointer-events: none;
                text-align: left;
				position: absolute;
}

&.e-interactivelegend-leftlabel{
                font-family: @font-family;
                pointer-events: none;
                text-align: left;
				position: absolute;
}

&.e-interactivelegend-rightlabel{
                font-family: @font-family;
                pointer-events: none;
                text-align: left;
				position: absolute;
}

&.e-legend-rangestartlabel{
                font-family: @font-family;
                pointer-events: none;
                text-align: left;
				position: absolute;
}

&.e-legend-rangeendlabel{
                font-family: @font-family;
                pointer-events: none;
                text-align: left;
				position: absolute;
}

&.e-legendlabeltext{
                font-family: @font-family;
                pointer-events: none;
                text-align: left;
				position: absolute;
}

&.e-defaultToolTip {
                    border: 1px solid #404041;
                    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
                    border-radius: 4px;
                    margin-right: 25px;
                    min-width: 30px;
                    height:20px;
                    padding-top: 9px;
                    padding-right: 10px;
                    padding-left: 10px;
                    width: auto;                    
                    opacity:0.85;
                    background: white;
                }

                &.e-defaultToolTip:before {
                position: absolute;
                display: inline-block;
                border-top: 7px solid transparent;
                border-right: 7px solid #404041;
                border-bottom: 7px solid transparent;               
                background: transparent;
                opacity:0.85;
                left: 4px;
                top: -16px;
                content: '';
            }
            &.e-defaultToolTip:after {
                position: absolute;
                display: inline-block;
                border-top: 7px solid transparent;
                border-right: 7px solid white;
                border-bottom: 7px solid transparent;
                left: 6px;                
                top: -16px;
                content: '';
            }       

&.e-defaultlegend-title{
	color:black;
	font-size:17px;
}
&.e-labelStyle {
		font-family:@font-family;
		font-size:14px;
		white-space: nowrap;
}
&.e-smartLabelStyle {
		padding:3px;
		font-weight: normal;
		color:black;
		width:auto;
		height:20px;
		text-align:center;
		font-size: 14px;
		font-family:@font-family;
    
}
&.e-smartLabelStyle:hover{
		cursor:pointer;
}
&.e-mapSelectedShape {            
            opacity: 1;
}
&.e-mapDragSelection {
    border:2px solid red;
}
&.e-mapHighlightedShape {
	opacity: 1;
}


&.e-drilldownHeader{	
	font-size:15px;
	text-indent:10px;	
}
&.e-drilldownlabel {		
		color:white;	
}

&.e-drilldownlabel:hover {
		text-decoration: underline;
}

&.e-drilldownarrow{
		fill:white;
		stroke:transparent;	
		stroke-width:1px;
		zoom:1;
}
&.e-treemap-leaflabel{
    font-size:14px;
    font-weight:normal;
    font-family:@font-family;
    color:white;
}
&.e-treemap-legendLabel{
            font-size:12px;

        }
&.e-treemap-label {

font-size:14px;

}

&.e-treemap-header {
 font-size:15px;
}

@{e-js}.e-pivotschemadesigner .e-hoverCell,@{e-js}.e-pivotgrid .e-hoverCell{
background-color:@hover-bg-stcolor !important;
}

@{e-js}.e-pivotschemadesigner .e-schemaBtnUnique{
    white-space:initial !important
}
@{e-js}.e-pivotschemadesigner *:focus:hover{
outline:none;
}
@{e-js}.e-pivotgrid .e-headerItem{   
    border: none !important;
    text-align: center;
    font-style: italic;
    font-weight: bold;  
    overflow: hidden !important;
    display: inline-block;
    text-overflow: ellipsis;    
    white-space: nowrap;
    font-size: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
@{e-js}.e-pivotgrid table {
    & when (@skin = "material") {
        /*material*/
        font-family:'Roboto',Segoe UI;
        font-size:13px;
        color:fade(@base-font-color,87%);
    }
        & when (@skin= "office-365") {
        /* office-365*/
        font:13px @font-family;
        color:@theme-light-font;    
        }
      & when not (@skin = "material") and not (@skin = "office-365") {
        /*other*/
      font: @table-font;
      color: @fg-table-color;
    }
  border-collapse: collapse;
  background-color: @bg-table-color;
  cursor: default;
}

@{e-js}.e-pivotgrid .e-chkbox-wrap .e-chk-image.e-stop, @{e-js}.e-pivotgrid .e-chkbox-wrap .e-chk-image.e-checkmark,
@{e-js}.e-pivotschemadesigner .e-chkbox-wrap .e-chk-image.e-stop, @{e-js}.e-pivotschemadesigner .e-chkbox-wrap .e-chk-image.e-checkmark
{    
    & when (@skin= "material") {        
       color:@accent-font-color !important;
       background-color: @accent-color !important;
    }
}

@{e-js}.e-pivotgrid .e-filterValues, @{e-js}.e-pivotschemadesigner .e-filterValues{
    background-color: @content-bg-color;
}

@{e-js}.e-pivotgrid .e-conditionFrom, .e-conditionTo{
    background-color: inherit;
    & when (@skin= "material") {
        color:fade(@base-font-color,87%);
        border: none;
        border-bottom: 1px solid fade(@base-font-color,12%);
        outline: none;
    }
    & when (@skin= "office-365") {
            width:158px !important;
            outline:none;
            margin-bottom:15px;
            border:1px solid @neutral-tertiary-alt;
    }
}

@{e-js}.e-pivotgrid .e-hoverBtn{
   .ogridheader-hvr-gradient();
}

@{e-js} .e-tooltipText {
    font-size: 12px;
    text-align: left;
    height: auto;
    font-weight: normal;
     & when (@skin= "material") {
        /*material*/
        font-family:'Roboto',Segoe UI;
       color: @primary-font-color;
           margin: 5px 0 10px 0;
    }
    & when (@skin= "office-365") {
       color:@neutral-secondary;
       margin: 0px 0px 8px 0px;
    }
      & when not (@skin = "material") and not (@skin = "office-365") {
       color: @toolTipText-color;
       margin: 5px 0 10px 0;
    }
}

@{e-js}.e-pivotgrid .e-reSizeColbg {
  border-left-color:@row-border-color;
    & when (@skin= "office-365") {
      border-left-color:@neutral-light-font-alt;
      border-left-style:solid;
    }
}
 @{e-js}.e-pivotgrid .e-editcondition, @{e-js}.e-pivotgrid .e-value2,@{e-js}.e-pivotgrid  .e-borderrangeLbl,@{e-js}.e-pivotgrid  .e-borderstyleLbl, @{e-js}.e-pivotgrid .e-fSizeLbl{
    margin-left: 15px;
}

 @{e-js}.e-pivotgrid input.inputConditionMbl[type=number]::-webkit-inner-spin-button, 
 @{e-js}.e-pivotgrid input.inputConditionMbl[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none !important; 
    margin: 0; 
}
 @{e-js} .e-pGridTooltip {
    position: fixed !important;
    z-index: 500;
    display: none;
    border-width: 10px;
    height: auto;
    & when (@skin= "material") {
        /*material*/
        font-family:'Roboto',Segoe UI;
        background:@grey-700;
        border:1px solid transparent;
        border-radius:2px;
        padding: 5px 8px;
    }
      & when not (@skin = "material") and not (@skin = "office-365") {
	    opacity:1;
        background: @toolTip-bg-color;
        border:2px solid @content-border-color;
        padding: 5px;
    }
    & when (@skin= "office-365") {
        /*office-365*/
        background:@neutral-lighter;
        border:1px solid @neutral-secondary-alt;
        padding:8px 8px 0px 8px;
    }
}
@{e-js}.e-pivotgrid .e-pivotGridTable th, @{e-js}.e-pivotgrid .e-pivotGridTable td {
overflow:hidden;
   & when not (@skin = "office-365") {
  border: solid 1px @content-border-color;
  }
   & when (@skin = "office-365") {
  border: solid 1px @neutral-light;
  }
}
@{e-js}.e-pivotgrid th, @{e-js}.e-pivotgrid td {
 & when (@skin= "material") {
  padding: 11px 2px 11px 8px;
 }
      & when not (@skin = "material") and not (@skin = "office-365") {
  padding: 6px 2px 6px 8px;
 }
 & when (@skin= "office-365") {
  padding: 6px 8px 6px 0px;
 }
  white-space: nowrap;
  height: 25px;
  font-weight: normal;
}
@{e-js}.e-pivotgrid .value {
  background-color: @bg-value-color;
 & when (@skin= "material") {
    padding: 11px 24px 11px 35px;
    text-align: right !important;
 }
  & when not (@skin = "material") and not (@skin = "office-365") {
    padding: 6px 6px 6px 16px;
    text-align: right !important;
 }
   & when (@skin= "office-365") {
    padding: 6px 8px 6px 16px;
    text-align: right !important;
 }
}
@{e-js}.e-pivotgrid .summary {
  white-space: nowrap;
  text-align: left;
      & when (@skin= "office-365") {
        font:14px @font-family Semibold;
        background-color:@neutral-light;
    }
    & when not (@skin="office-365")  {
        font-weight: bold !important;
    }
}
@{e-js}.e-pivotgrid .colheader, @{e-js}.e-pivotgrid .rowheader,@{e-js}.e-pivotgrid .calc {
  & when (@skin= "material") {
        font-weight: bold;
        /*material*/
        color:fade(@base-font-color,87%);
        padding: 11px 40px 11px 14px;
    }
     & when not (@skin = "material") and not (@skin = "office-365") {
        /*other*/
          font-weight: bold;
       color: @fg-header-color;
       padding: 6px 16px 6px 2px;
    }
       & when (@skin= "office-365") {
        /*office-365*/
        font:13px @font-family Semibold;
        color:@neutral-primary;
       padding: 6px 16px 6px 0px;
    }
  .ogridheader-gradient();
  background-repeat: repeat;
  text-align: left;
  font-style: normal;
}
@{e-js}.e-pivotgrid .colheader:hover, @{e-js}.e-pivotgrid .rowheader:hover, @{e-js}.e-pivotgrid .calc:hover {
  & when (@skin= "material") {
        font-weight: bold;
        /*material*/
        color:fade(@base-font-color,87%);
        padding: 11px 40px 11px 14px;
    }
   & when not (@skin = "material") and not (@skin = "office-365") {
         font-weight: bold;
        /*other*/
        color: @fg-header-hvr-color;
        padding: 6px 16px 6px 2px;
    }
     & when (@skin= "office-365") {
        /*office-365*/
        font:13px @font-family Semibold;
        color:@neutral-primary;
       padding: 6px 16px 6px 0px;
    }
  .ogridheader-hvr-gradient();
  background-repeat: repeat;
  text-align: left;
  font-style: normal;
}
@{e-js}.e-pivotgrid {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select :none;
  user-select: none;
}
.e-cellSelection{
 background: @pivot-selection-background;
 filter: alpha(opacity=50);
 opacity: 0.5;
 position: absolute;
 border-style:dotted;
 border-width:3px;
 border-color:@pivot-selection-border;
}
@{e-js}.e-pivotgrid .value.selection{
cursor:crosshair;
}
@{e-js}.e-pivotgrid.e-rtl .colheader,@{e-js}.e-pivotgrid.e-rtl .colheader:hover,@{e-js}.e-pivotgrid.e-rtl .rowheader, @{e-js}.e-pivotgrid.e-rtl .rowheader:hover {
    & when (@skin = "material") {
        padding:11px 24px 11px 40px;
    }
    & when not (@skin = "material") {
        padding:6px 0px 6px 40px;
    }
}
@{e-js}.e-pivotgrid table .e-expand, @{e-js}.e-pivotgrid table .e-collapse {
  height: 17px;
  display: inline-block;
  cursor: pointer;
  & when (@skin = "material") {
    margin-left: -2px;
    margin-right: 12px;
  }
    & when (@skin = "office-365") {
    width:8px;
    margin-left:8px;
    margin-right:15px;
  }
  & when not (@skin = "office-365") {
   width:23px;
  }
}
@{e-js}.e-pivotgrid .e-errOKBtn {
     display: inline-block; 
    & when (@skin = "material") {
     float: right; 
     width: 64px; 
    }
    & when not (@skin = "material") {
     margin: 20px 0 10px 165px; 
     width: 50px; 
    }
}
@{e-js}.e-pivotgrid.e-rtl .e-errOKBtn {
    & when (@skin = "material") {
     float: left; 
     width: 64px; 
     margin-right:150px !important;
    }
    & when (@skin = "office-365") {
        margin-right:150px !important;
    }
    & when not (@skin = "material") and not (@skin = "office-365"){
      margin-right:155px !important;
    }
}
@{e-js}.e-pivotgrid .e-dialogremoveBtn:before
{
  font-family: "ej-webfont";
  content: "\e711";
  display: inline-block;
}
@{e-js}.e-pivotgrid table .e-expand:before
{
    content:"\e6a3";
   display: inline-block;
    float: left;
   margin-top: 5px;
   & when (@skin = "office-365") {
    margin-left:0px;
     font-size: 8px;
  }
    & when not (@skin = "office-365") {
    margin-left: 9px;
    font-size: 7px;
  }
}
@{e-js}.e-pivotgrid.e-rtl .e-pGridTooltip > p {
    direction:ltr;
    text-align:right;
}
@{e-js}.e-pivotgrid .e-pGridTooltip p {
    white-space:nowrap;    
}
@{e-js}.e-pivotgrid.e-rtl table .e-expand:before {
    content:"\e699";
    & when not (@skin = "office-365") {
        font-size: 23px;
        margin-top: -3px;
    }
    & when (@skin = "office-365") {
        font-size: 14px;
        margin-top: 1px;
    }
}
@{e-js}.e-pivotgrid.e-rtl table .e-collapse:before {
    margin-left: 0px;
}
@{e-js}.e-pivotgrid table .e-collapse:before {
content:"\e6a0";
 display: inline-block;
    float: left;
    margin-top: 5px;
   & when (@skin = "office-365") {
    margin-left:0px;
    font-size: 8px;
  }
    & when not (@skin = "office-365") {
    margin-left: 7px;
    font-size: 6px;
  }
 
}
@{e-js}.e-pivotgrid.e-rtl .e-removeBtn:before, @{e-js}.e-pivotgrid.e-rtl .e-sorting:before, @{e-js}.e-pivotgrid.e-rtl .filter:before{
    float:left;
    margin-left:4px;
    margin-right:0px;
} 
@{e-js}.e-pivotgrid .kpiiconvalue {
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
}
@{e-js}.e-pivotgrid .kpiuparrow {
 background-image: @kpi-uparrow-img;
}
@{e-js}.e-pivotgrid .kpirightarrow {
 background-image: @kpi-rightarrow-img;
}
@{e-js}.e-pivotgrid .kpidownarrow {
  background-image: @kpi-downarrow-img;
  background-position: center center;
}
@{e-js}.e-pivotgrid .kpidiamond {
  background-image: @kpi-diamond-img;
  background-position: center center;
}
@{e-js}.e-pivotgrid .kpitriangle {
  background-image: @kpi-triangle-img;
  background-position: center center;
}
@{e-js}.e-pivotgrid .kpicircle {
  background-image: @kpi-circle-img;
  background-position: center center;
}
@{e-js}.e-pivotgrid .kpiredroad {
  background-image: @kpi-red-img;
  background-position: center center;
}
@{e-js}.e-pivotgrid .kpigreenroad {
  background-image: @kpi-green-img;
  background-position: center center;
}
@{e-js}.e-pivotgrid .kpiallcolor {
  background-image: @kpi-all-img;
  background-position: center center;
}
@{e-js}.e-pivotgrid .hyperlinkValueCell {
  .hyperlink-setcolor();
  text-decoration: underline;
  cursor: pointer;
}
@{e-js}.e-pivotgrid .hyperlinkHeaderCell {
  text-decoration: underline;
  cursor: pointer;
}
@{e-js}.e-pivotgrid .e-vScrollPanel {
  .scrollPane-setcolor();
  width:8px;
  margin-left:8px;
  display:inline-block;
}
@{e-js}.e-pivotgrid .e-hScrollPanel {
  .scrollPane-setcolor();
  height:8px;
  margin-top:4px;
}
@{e-js}.e-pivotgrid .e-vScrollThumb {
  width:6px;
  position:relative;
  top:1px;
  left:1px;
  .scrollThumb-setcolor();
}
@{e-js}.e-pivotgrid .e-hScrollThumb {
  height:6px;
  position:relative;
  left:1px;
     & when (@skin = "material") {
       top:-1px;
	 }
     & when not (@skin = "material") {
       top:1px;
	 }
  .scrollThumb-setcolor();
}
@{e-js}.e-pivotgrid .e-categPageIndicator, @{e-js}.e-pivotgrid .e-seriesPageIndicator {
   & when (@skin = "material") {
      padding: 5px 8px;
      width:auto;
      position:absolute;
      font-family:'Roboto',Segoe UI;
      font-size:12px;
  }
  & when not (@skin = "material") and not (@skin = "office-365") {
     width:auto;
     padding:5px;
     position:absolute;
  }
  & when (@skin = "office-365") {
     width:auto;
     padding:8px;
     position:absolute;
  }
  .pageIndicator-setcolor();
}
@{e-js}.e-pivotgrid.e-rtl .e-seriesPageIndicator .axislabel,
@{e-js}.e-pivotgrid.e-rtl .e-categPageIndicator .axislabel{
    float:right;
    margin-left:5px;
}
@{e-js}.e-pivotgrid.e-rtl .e-seriesPageIndicator .series_CurrentPage,
@{e-js}.e-pivotgrid.e-rtl .e-categPageIndicator .categ_CurrentPage{
    float:left;
    margin-right:2px;
}
@{e-js}.e-pivotgrid.e-rtl .e-seriesPageIndicator .series_pageCount,
@{e-js}.e-pivotgrid.e-rtl .e-categPageIndicator .categ_pageCount{
    float:right;
    margin-left:2px;
}
@{e-js}.e-pivotgrid .e-vScrollThumb:hover, @{e-js}.e-pivotgrid .e-hScrollThumb:hover {
  & when (@skin = "material") {
        background-color:@grey-500;
        border:.5px solid @grey-600;
  }
  & when not (@skin = "material") {
   .scrollThumb-hovercolor();
  }
}
@{e-js}.e-pivotgrid .inActive {
  display:none;
}
@{e-js}.e-pivotgrid .dragging {
  & when not (@skin = "material") {
    .scrollThumb-dragcolor();
  }
}
@{e-js}.e-pivotgrid .filter, @{e-js}.e-pivotgrid .e-sorting, @{e-js}.e-pivotgrid .e-removeBtn, @{e-js}.e-pivotgrid .valueSorting {
    .switch-pivotgrid-draggale-button;
      & when not (@skin = "office-365") {
    color: @default-font-color;
    }
    & when (@skin = "office-365") {
    color: @neutral-primary;
    }
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
}
@{e-js}.e-pivotgrid .filter:before {
  & when (@skin = "material"),(@skin = "office-365") {
    content: "\e669";
    font-size:16px;
  }
   & when not (@skin = "material") and not (@skin = "office-365") {
    content: "\e669";
  }
    float: right;
	margin-right: 4px;
}
@{e-js}.e-pivotgrid .filter.filtered:before {
    content: "\e668";
    float: right;
}
@{e-js}.e-pivotgrid .e-sorting:before, @{e-js}.e-pivotgrid .valueSorting:before {
  & when (@skin = "material"),(@skin = "office-365") {
    content: "\e7fc";
    font-size:16px;
  }
   & when not (@skin = "material") and not (@skin = "office-365") {
    content: "\e672";
  }
    float: right;
	margin-right: 4px;
}
@{e-js}.e-pivotgrid .e-sorting.descending:before, @{e-js}.e-pivotgrid .valueSorting.descending:before {
  & when (@skin = "material"),(@skin = "office-365") {
    content: "\e7fd";
    font-size:16px;
  }
   & when not (@skin = "material") and not (@skin = "office-365") {
    content: "\e673";
  }
    float: right;
}
@{e-js}.e-pivotgrid .e-removeBtn:before {
  & when (@skin = "material") {
    content: "\e60a";
    font-size:16px;
  }
   & when not (@skin = "material") and not (@skin = "office-365") {
    content: "\e711";
  }
   & when (@skin = "office-365") {
    content: "\e711";
    font-size:14px;
  }
    float: right;
	margin-right: 4px;
}
@{e-js}.e-pivotgrid .e-memberEditorDiv {
    height: 256px;
     & when  (@skin = "material") {
      margin-top: 24px;
    }
     & when not (@skin = "material") and not (@skin = "office-365") {
      margin-top: 7px;
    }
    & when  (@skin = "office-365") {
      margin-top: 15px;
       margin-bottom:10px;
    }
    border: 1px solid @default-border-color;
}
@{e-js}.e-pivotgrid .e-editorTreeView {
    margin-top: 7px;
    height: 245px !important;
}
@{e-js}.e-pivotgrid .e-dialogOKBtn {
    width: 69px;
    & when not (@skin = "material") and not (@skin = "office-365") {
    margin-left: 83px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
@{e-js}.e-pivotgrid.e-rtl .e-labelValueFilterDlg .e-dialogOKBtn {
  & when (@skin = "material") {
    margin-right: 55px;
      margin-left: 10px;
  }
    & when not (@skin = "material") and not (@skin = "office-365") {
    margin-right: 73px;
    margin-left: 10px;
  }
  & when (@skin = "office-365") {
    margin-right: 68px;
      margin-left: 8px;
  }
}
@{e-js}.e-pivotgrid.e-rtl .e-dialogOKBtn {
  & when (@skin = "material") {
    margin-right: 68px;
    margin-left: 10px;
  }
    & when not (@skin = "material") and not (@skin = "office-365") {
    margin-right: 87px;
    margin-left: 10px;
  }
  & when (@skin = "office-365") {
    margin-right: 68px;
    margin-left: 8px;
  }
}
@{e-js}.e-pivotgrid .e-dialogCancelBtn {
    width: 69px;
    margin-left: 10px;
    overflow:hidden;
    text-overflow:ellipsis;
}
@{e-js}.e-pivotgrid.e-rtl .e-dialogCancelBtn {
    margin-left:0px;
}
@{e-js}.e-pivotgrid.e-rtl .e-labelValueFilterDlg .e-dialogCancelBtn {
    margin-left:10px;
}
@{e-js}.e-pivotgrid .e-treeview .e-text {
 & when not (@skin = "office-365") {
    min-height: 20px;
    border: 1px solid transparent;
  & when not (@skin = "material") {
    font-family: @font-family;
    font-size: 12px;
    font-weight: bold;
  }
    cursor: move;
    color: @default-font-color;
 }
}
@{e-js}.e-pivotgrid .e-treeview .e-icon.e-stop:before, @{e-js}.e-pivotschemadesigner .e-treeview .e-icon.e-stop:before {
    content: "\e657" !important;
}
@{e-js}.e-pivotgrid .e-dialog a.e-linkPanel, @{e-js}.e-pivotschemadesigner .e-dialog a.e-linkPanel{
     text-decoration: underline;
     margin:-20px 0px 20px 0px;
}
@{e-js}.e-pivotgrid .e-dialog .e-infoImg.e-icon:before,@{e-js}.e-pivotschemadesigner .e-dialog .e-infoImg.e-icon:before  {
     content: "\e917";
     color: #D48E0B;
}
@{e-js}.e-pivotgrid .e-treeview .e-node-hover
{
     & when not (@skin = "office-365") {
  .office-pivot-treeview-hover-border();
  }
}
@{e-js}.e-pivotgrid  .e-treeview .e-active
{  
   & when not (@skin = "office-365") {
	.office-pivot-treeview-active-color();
   }
}
@{e-js}.e-pivotgrid .e-pivotButton {
.groupingBar-btn-color();
}
@{e-js}.e-pivotgrid .e-pivotButton .e-btn {
  text-align: left !important;
  & when (@skin = "material") {
      box-shadow: none;
      margin-left:12px;
  }
}
@{e-js}.e-pivotgrid .e-pivotButton .e-btn.e-select {
    border: none;
  & when (@skin = "material") {
      height:32px;
      background:@primary-color;
      color:@primary-font-color;
      text-transform:none;
      padding:0px 0px 1px;
  }
  & when not (@skin = "material") and not (@skin = "office-365") {
	  height:auto;
     .switch-pivotgrid-groupingBar-btn-color;
    .groupingBar-btn-color();
  }
    & when (@skin = "office-365") {
      height:26px;
      /*background:@primary-color;
      color:@primary-font-color;
      text-transform:none;
      padding:0px 0px 1px;*/
      background:@theme-light;
      color:@theme-light-font;
      padding:0px;
      margin-left:8px;
      font-family:@font-family;
  }
}

@{e-js}.e-pivotgrid .e-pivotButton .e-btn.e-select:hover {
    border: none;
  & when (@skin = "material") {
    background:@primary-color;
    box-shadow: none;
    color:@primary-font-color;
 }
  & when not (@skin = "material") and not (@skin = "office-365") {
      .hover-gradient();
      color:  @hover-font-color;
  }
 & when (@skin = "office-365") {
    background:@theme-lighter;
    color:@theme-light-font;
 }
    border-color: @hover-border-color;
}
@{e-js}.e-pivotgrid .e-pivotButton.e-btn.e-select {
    border: none;
}

@{e-js}.e-pivotgrid .e-drag {
    .material-pivot-drag-column-txt-color;
    color: @active-font-color;
    /*color: #5c5c5c;*/
   & when (@skin = "material") {
     padding:18px 0px;
     font-family:'Roboto',Segoe UI;
     font-size:14px;
   }
   & when not (@skin = "material") and not (@skin = "office-365") {
     padding: 9px 0px 9px 0px;
     font-family: @font-family;
     font-size: 14px;
     font-weight: bold;
    }
   & when (@skin = "office-365") {
     font-family:@font-family Semilight;
     font-size:17px;
     font-weight:300;
     padding: 9px 0px 9px 0px;
    }
    .material-pivot-drag-bg-color;
    background: @pivotList-treeview-hvr-color;
    /*background: @pager-default-bg-color;*/
    border: 1px solid @content-border-color;
    overflow: hidden;
    text-overflow: ellipsis;
}
  @{e-js}.e-pivotgrid .e-pivotButton.e-btn .e-icon{
    padding:0px;
 } 

@{e-js}.e-pivotgrid .values, @{e-js}.e-pivotgrid .columns, @{e-js}.e-pivotgrid .e-rows, @{e-js}.e-pivotgrid .emptyRows {
     & when (@skin = "material") {
        font-family:'Roboto',Segoe UI;
        font-size:14px;
     }
    & when not (@skin = "material") and not (@skin = "office-365") {
       font-family: @font-family;
       font-size: 14px;
       font-weight: bold;
    }
         & when (@skin = "office-365") {
        font-family: @font-family Semilight;
        font-size:17px;
        font-weight:300;
     }
    color: @active-font-color;
    padding: 5px 0px 5px 0px;
    /*background: @groupingBar-bg-color;*/
    overflow: hidden;
    text-overflow: ellipsis;
}
@{e-js}.e-pivotgrid .values{
    border-right:1px solid @content-border-color;
}
@{e-js}.e-pivotgrid .emptyRows{
   .material-pivot-drag-column-color;
   background: @groupingBar-bg-color;
   border: 1px solid @content-border-color;
}
@{e-js}.e-pivotgrid .valueColumn{
    .material-pivot-drag-column-color;
    background: @groupingBar-bg-color;
    height: auto;
	border-right: 1px solid @content-border-color;
	border-left: 1px solid @content-border-color;
}
@{e-js}.e-pivotgrid .values .e-pivotButton,@{e-js}.e-pivotgrid .e-drag .e-pivotButton,@{e-js}.e-pivotgrid .columns .e-pivotButton, @{e-js}.e-pivotgrid .e-rows .e-pivotButton{
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  & when (@skin = "material") {
       background:@primary-color;
       border:1px solid @primary-color;
  }
  & when not (@skin = "material") and not (@skin = "office-365") {
	   background: @toolbar-bgcolor;
  }
    & when (@skin = "office-365") {
       background:@theme-light;
  }
}
@{e-js}.e-pivotgrid .values .e-pivotButton:hover,@{e-js}.e-pivotgrid .e-drag .e-pivotButton:hover,@{e-js}.e-pivotgrid .columns .e-pivotButton:hover, @{e-js}.e-pivotgrid .e-rows .e-pivotButton:hover{
  & when (@skin = "material") {
       background:@primary-color;
        border:1px solid @primary-color;
        box-shadow: none;
  }
    & when not (@skin = "material") and not (@skin = "office-365") {
        background: @pivot-selection-background;
  }
  & when (@skin = "office-365") {
        background: @theme-lighter;
  }
}
@{e-js}.e-pivotgrid .e-pivotButton,@{e-js}.e-pivotgrid .e-rows,@{e-js}.e-pivotgrid .valueColumn,@{e-js}.e-pivotgrid .values,@{e-js}.e-pivotgrid .columns{
    display: inline-block;
    vertical-align: top;
}
@{e-js}.e-pivotgrid .e-btn{
  vertical-align: auto;
}
@{e-js}.e-pivotgrid .e-drag .e-btn ,@{e-js}.e-pivotgrid .e-drag .e-btn div{
  vertical-align: initial;
}
@{e-js}.e-pivotgrid .e-drag .e-pivotButton {
    vertical-align: top;
    line-height:0;
}
@{e-js}.e-pivotgrid .e-rows {
    padding-bottom: 4px;
    display: table-cell;
    vertical-align: bottom;
    height: 100%;
    width: 100%;
    min-height: 24px;
    min-width: 140px;
}
@{e-js}.e-pivotgrid .values, @{e-js}.e-pivotgrid .columns  {
    & when (@skin = "material") {
    min-height: 44px;
    }
    & when not (@skin = "material") and not (@skin = "office-365") {
    min-height: 24px;
   }
   & when (@skin = "office-365") {
    min-height: 36px;
   }
    min-width: 140px;
}

@{e-js}.e-pivotgrid .e-rows .e-pivotButton,@{e-js}.e-pivotgrid .values .e-pivotButton,@{e-js}.e-pivotgrid .columns .e-pivotButton,@{e-js}.e-pivotgrid .e-drag .e-pivotButton{
   vertical-align: bottom;
}
@{e-js}.e-pivotgrid .e-pivotButton {
  & when not (@skin = "material") {
    margin-left: 5px;
  }
}
@{e-js}.e-pivotgrid .e-grpRow{
        .material-pivot-drag-bg-color;
     background:@pivotList-treeview-hvr-color;
     vertical-align:bottom;
     text-align:left;
}
@{e-js}.e-pivotgrid .e-pivotButton {
    .material-pivot-drag-column-br-color;
    & when (@skin = "material") {
        border-radius:25px;
        border: 1px solid @primary-color;
    }
    & when not (@skin = "material") and not (@skin = "office-365") {
        border: 1px solid @active-border-color !important;
    }
    padding:0px !important;
}
@{e-js}.e-pivotgrid .e-pivotButton:hover {
    .material-pivot-drag-column-br-color;
     & when (@skin = "material") {
        border: 1px solid @primary-color;
    }
    & when not (@skin = "material") and not (@skin = "office-365") {
        border: 1px solid @active-border-color !important;
    }
}
@{e-js}.e-pivotgrid th.e-grpRow {
    padding: 10px 2px 0 0px !important;    
}
@{e-js}.e-pivotgrid .e-btn {
    font-size:13px;
}
@{e-js}.e-pivotgrid .e-widthSetter{
     width: 3em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}
@{e-js}.e-pivotgrid .contextMenuPopup .menuItem:hover{
    .summary-gradient();
    cursor: default;
}
@{e-js}.e-pivotgrid div.e-advancedFilterDlg, @{e-js}.e-pivotschemadesigner div.e-advancedFilterDlg{
        border:@border-size @border-type @content-border-color;
}
@{e-js}.e-pivotgrid td.e-grpRow{
    padding-left:0px !important;
}
@{e-js}.e-pivotgrid .e-grpRow{
    white-space:normal;
}

 @{e-js}.e-pivotgrid .e-dropIndicatorActive {
   height: 20px;
   width: 20px;
   position: fixed !important;
   z-index: 30000;
   color: @default-icon-color;
   cursor: pointer;
   font-family: "ej-webfont";
}

@{e-js}.e-pivotgrid .e-dropIndicatorActive:before {
   content: "\E7CC";
}

@{e-js}.e-pivotgrid .e-selected {
  background: @groupingBar-bg-color;
  color: @active-font-color;
}

@{e-js}.e-pivotgrid .e-highlighted
{
    background-color: @hover-bg-stcolor;
}

@{e-js}.e-pivotgrid .e-dlgCalculatedField label
{
    & when (@skin = "material") {
      font-size: 14px;
      font-family: 'Roboto',Segoe UI;
      color: fade(@base-font-color,54%);
      font-weight:normal !important;
    }
     & when (@skin = "material") {
       font-weight:bold;
    }
     & when (@skin = "office-365") {
       font: 12px @font-family;
       margin-right:8px;
       margin-bottom:20px;
       width:80px;
     }
}
@{e-js}.e-pivotgrid .borderLine{
    margin-left:-10px;
    margin-right:-10px;
    border-top:1px solid @content-border-color;
 }
@{e-js}.e-pivotgrid .calculatorFields{
    margin-top:-5px;
    height:31px;
   & when (@skin = "material") {
        padding:0px;
    }
    & when (@skin = "office-365") {
      width:auto;
      background:@neutral-white;
      color:@theme-light-font;
    }
}
@{e-js}.e-pivotgrid .e-column-resizeToSize {
  table-layout: fixed;
  width:100%;
}
@{e-js}.e-pivotgrid .e-column-resizeToContent {
  table-layout: fixed;
 }
@{e-js}.e-pivotgrid.e-column-resize td,@{e-js}.e-pivotgrid.e-column-resize th
        {
  overflow: hidden;
          }
@{e-js}.e-pivotgrid.e-column-resize thead>tr
        {
  cursor: pointer;
          }
.pivotTree .e-calculatedFieldMenuItem {
    border-bottom: solid 1px @content-border-color;
}
 @{e-js}.e-pivotgrid .e-pivotGridTable td{
    overflow:hidden;
}
@{e-js}.e-pivotgrid .e-enabled{
color:@active-font-color !important;
background:@oclient-treeview-active !important;
}
@{e-js}.e-pivotgrid @{e-js}.e-pivotgridContextMenu .e-enabledState::before {
content: "\e80a";
height: 16px;
width: 16px;
}
@{e-js}.e-pivotgrid .e-advancedFiltering:before {
content:"\e843";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-drillThrough:before {
content:"\e875";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-collapseByDefault:before {
content:"\e85d";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-numberFormatting:before{
content:"\e857";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-paging:before{
content:"\e854";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-pagingOptions:before{
content:"\e6b7";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-cellSelect:before{
content:"\e856";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-cellContext:before {
content:"\e844";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-cellEditing:before {
content: "\e855";
font-size: 20px;
}
@{e-js}.e-pivotgrid .e-columnResize:before{
content: "\e851";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-excelLikeLayout:before{
content: "\e859";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-toolTip:before{
content: "\e858";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .rtl:before{
content:"\e84d";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-hyperlinkOptions:before{
content: "\e84c";
font-size: 20px;
}
@{e-js}.e-pivotgrid .e-frozenHeaders:before {
content:"\e848";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-exporting:before {
content:"\e84f";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-calculatedField:before{
content:"\e84b";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-summaryCustomize:before{
content:"\e852";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-conditionalFormat:before{
content:"\e850";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-summaryTypes:before{
content:"\e849";
font-size: 20px;  
}
@{e-js}.e-pivotgrid .e-layouts:before{
content: "\e878";
font-size: 20px;
}
@{e-js}.e-pivotgrid .e-advancedFiltering:hover, @{e-js}.e-pivotgrid .e-drillThrough:hover, @{e-js}.e-pivotgrid .e-collapseByDefault:hover,  @{e-js}.e-pivotgrid .groupingBar:hover, @{e-js}.e-pivotgrid .e-numberFormatting:hover, @{e-js}.e-pivotgrid .e-paging:hover, @{e-js}.e-pivotgrid .e-pagingOptions:hover,
@{e-js}.e-pivotgrid .e-cellSelect:hover, @{e-js}.e-pivotgrid .e-cellContext:hover, @{e-js}.e-pivotgrid .e-cellEditing:hover, @{e-js}.e-pivotgrid .e-columnResize:hover, @{e-js}.e-pivotgrid .e-toolTip:hover, @{e-js}.e-pivotgrid .rtl:hover, @{e-js}.e-pivotgrid .e-hyperlinkOptions:hover, @{e-js}.e-pivotgrid .e-frozenHeaders:hover, @{e-js}.e-pivotgrid .e-exporting:hover, @{e-js}.e-pivotgrid .e-calculatedField:hover,@{e-js}.e-pivotgrid .e-layouts:hover,
@{e-js}.e-pivotgrid .e-summaryCustomize:hover, @{e-js}.e-pivotgrid .e-conditionalFormat:hover, @{e-js}.e-pivotgrid .e-summaryTypes:hover, @{e-js}.e-pivotgrid .e-advancedFiltering, @{e-js}.e-pivotgrid .e-drillThrough, @{e-js}.e-pivotgrid .e-collapseByDefault, @{e-js}.e-pivotgrid .groupingBar, @{e-js}.e-pivotgrid .e-numberFormatting, @{e-js}.e-pivotgrid .e-paging, @{e-js}.e-pivotgrid .e-pagingOptions,
@{e-js}.e-pivotgrid .e-cellSelect, @{e-js}.e-pivotgrid .e-cellContext, @{e-js}.e-pivotgrid .e-cellEditing, @{e-js}.e-pivotgrid .e-columnResize,
@{e-js}.e-pivotgrid .e-toolTip, @{e-js}.e-pivotgrid .rtl, @{e-js}.e-pivotgrid .e-hyperlinkOptions, @{e-js}.e-pivotgrid .e-frozenHeaders, @{e-js}.e-pivotgrid .e-exporting, @{e-js}.e-pivotgrid .e-calculatedField,
@{e-js}.e-pivotgrid .e-summaryCustomize, @{e-js}.e-pivotgrid .e-conditionalFormat, @{e-js}.e-pivotgrid .e-summaryTypes, @{e-js}.e-pivotgrid .e-layouts {
     background-repeat: no-repeat;
    margin: 4px;
	cursor: default;
	display: inline-block;
	height: 20px; 
	width: 20px;
}

@{e-js}.e-pivotgrid .e-advancedFiltering, @{e-js}.e-pivotgrid .e-drillThrough, @{e-js}.e-pivotgrid .e-collapseByDefault, @{e-js}.e-pivotgrid .groupingBar, @{e-js}.e-pivotgrid .e-numberFormatting, @{e-js}.e-pivotgrid .e-paging, @{e-js}.e-pivotgrid .e-pagingOptions,
@{e-js}.e-pivotgrid .e-cellSelect, @{e-js}.e-pivotgrid .e-cellContext, @{e-js}.e-pivotgrid .e-cellEditing, @{e-js}.e-pivotgrid .e-columnResize,
@{e-js}.e-pivotgrid .e-toolTip, @{e-js}.e-pivotgrid .rtl, @{e-js}.e-pivotgrid .e-hyperlinkOptions, @{e-js}.e-pivotgrid .e-frozenHeaders, @{e-js}.e-pivotgrid .e-exporting, @{e-js}.e-pivotgrid .e-calculatedField,
@{e-js}.e-pivotgrid .e-summaryCustomize, @{e-js}.e-pivotgrid .e-conditionalFormat, @{e-js}.e-pivotgrid .e-summaryTypes, @{e-js}.e-pivotgrid .e-layouts{
    overflow:visible !important;
    color:@oclient-icons-color;
    text-indent:-3px;
}

@{e-js}.e-pivotgrid .e-normalLayout:before{
content: "\e87d"; 
}
@{e-js}.e-pivotgrid .e-noSummariesLayout:before{
content: "\e87c";
}
@{e-js}.e-pivotgrid .e-normalTopSummaryLayout:before{
content: "\e881";
}
@{e-js}.e-pivotgrid .e-rowHeaderHyperLink:before {
  content:"\e85c";
}
@{e-js}.e-pivotgrid .e-colHeaderHyperLink:before {
  content:"\e84a";
}
@{e-js}.e-pivotgrid .e-valueCellHyperLink:before {
  content:"\e85a";
}
@{e-js}.e-pivotgrid .e-summaryCellHyperLink:before {
  content:"\e85b";
}
@{e-js}.e-pivotgrid .e-rowFreeze:before {
  content:"\e853";
}
@{e-js}.e-pivotgrid .e-colFreeze:before {
  content:"\e842";
}
@{e-js}.e-pivotgrid .e-excel:before {
  content:"\e845";
}
@{e-js}.e-pivotgrid .e-word:before {
  content:"\e84e";
}
@{e-js}.e-pivotgrid .e-pdf:before {
  content:"\e846";
}
@{e-js}.e-pivotgrid .csv:before {
  content:"\e847";
}

@{e-js}.e-pivotgrid .e-hyperLinkIcons:before, @{e-js}.e-pivotgrid .e-frozenHeaderIcons:before, @{e-js}.e-pivotgrid .e-exportingIcons:before, @{e-js}.e-pivotgrid .e-layoutIcons:before{
  font-family: 'ej-webfont';
  font-size: 20px;
  margin-left: 2px;
}
@{e-js}.e-pivotgrid .e-hyperLinkIcons, @{e-js}.e-pivotgrid .e-hyperLinkIcons:hover, @{e-js}.e-pivotgrid .e-frozenHeaderIcons, @{e-js}.e-pivotgrid .e-frozenHeaderIcons:hover,
@{e-js}.e-pivotgrid .e-exportingIcons, @{e-js}.e-pivotgrid .e-exportingIcons:hover, @{e-js}.e-pivotgrid .e-layoutIcons, @{e-js}.e-pivotgrid .e-layoutIcons:hover {
  background-repeat: no-repeat;
  cursor: default;
  display: inline-block;
  height: 22px;
  width: 24px;
}
@{e-js}.e-pivotgrid .e-hyperLinkIcons, @{e-js}.e-pivotgrid .e-frozenHeaderIcons, @{e-js}.e-pivotgrid .e-exportingIcons, @{e-js}.e-pivotgrid .e-layoutIcons {
  color: @oclient-icons-color;
}
 
@{e-js}.e-pivotgrid .e-hyperLinkIcons:hover, @{e-js}.e-pivotgrid .e-frozenHeaderIcons:hover, @{e-js}.e-pivotgrid .e-exportingIcons:hover, @{e-js}.e-pivotgrid .e-layoutIcons:hover {
  color: @toolbar-icons-hvrcolor;
  cursor: pointer;
  background: @oclient-icons-hover-bg;
}
@{e-js}.e-pivotgrid .e-frozenDialog, @{e-js}.e-pivotgrid .e-exportDialog, @{e-js}.e-pivotgrid .e-hyperLinkDialog, @{e-js}.e-pivotgrid .e-layoutsDialog {
  position: absolute;
  z-index: 1000000;
  .chartTypesDialog-setcolor()
}

    @{e-js}.e-pivotgrid .e-calcFormulaDiv {
       & when not (@skin = "office-365") {
        left: 136px;
        top: 102px;
       }
        & when (@skin = "office-365") {
        left: 137px;
        top: 69px;
       }
        position: absolute;
    }

    @{e-js}.e-pivotgrid .e-dlgCalculatedField {
     & when not (@skin = "office-365") {
        margin-top: 8px;
        border: 1px solid @content-border-color;
        margin-bottom: 12px;
        padding: 13px 10px 10px;
     }
    }


    @{e-js}.e-pivotgrid .calculateFieldName {
        position: absolute;
         & when (@skin = "material") {
            top: 57px;
            left: 110px;
        }
        & when not (@skin = "material") and not (@skin = "office-365") {
            top: 36px;
            left: 93px;
        }
        & when (@skin = "office-365") {
            top: 7px;
            left: 121px;
        }
        width: 197px;
        height: 24px;
        border: none;
        background-color: @content-bg-color;
        color: @content-font-color;
    }
        @{e-js}.e-pivotgrid .calculatedFieldFormula {
        background-color: @content-bg-color;
        color: @content-font-color;
        & when (@skin = "material") {
         border:none;
         border-bottom:1px solid fade(@base-font-color,12%);
        }
        & when not (@skin = "material") {
         border:1px solid @content-border-color;
        }
        & when (@skin = "office-365") {
            margin-bottom:15px;
        }
        cursor: not-allowed;
        opacity:0.85;
        padding:1px;
    }

    @{e-js}.e-pivotgrid .e-dlgCalculatedField .e-outerTable td {
         & when (@skin = "office-365") {
          padding:0px !important;
        }
        & when not (@skin = "office-365") {
          padding: 4px 10px 15px;
        }
    }
    @{e-js}.e-pivotgrid .e-dlgCalculatedField .e-fieldTable td {
         & when (@skin = "office-365") {
          padding:0px !important;
        }
        & when not (@skin = "office-365") {
          padding: 4px 10px;
        }
    }
    @{e-js}.e-pivotgrid .e-calcFormulaDiv td {
        border: 1px solid @content-border-color;
        background-color: @content-bg-color;
        padding: 5px 18px;
        cursor: default;
        color: @content-font-color;
    }
        @{e-js}.e-pivotgrid .e-calcFormulaDiv td:hover {
            .hover-gradient();
            color: @hover-font-color;
            border: 1px solid @hover-border-color;
        }
    

@{e-js}.e-pivotschemadesigner
{
    & when (@skin = "material") {
        /*material*/
        font-family:'Roboto',Segoe UI;
        background: none repeat scroll 0 0 @grey-50;
        padding:24px;
        border: 1px solid @oclient-border-color;
        color: @content-font-color;
   }
      & when not (@skin = "material") and not (@skin = "office-365") {
        /*other*/
       font-family:@font-family;
       background: none repeat scroll 0 0 @oclient-bgcolor;
       border: 1px solid @oclient-border-color;
       color: @content-font-color;
    }
    & when (@skin = "office-365") {
      font-family:@font-family;
      background: none repeat scroll 0 0 @neutral-lighter-alt;
      border: 1px solid @neutral-light;
      padding:15px 5px 15px 15px;
      color: @theme-light-font;
    }
    font-size: 12px;
    float: right;
	position:static;
}
&.bg-div
{
    background: none repeat scroll 0 0 @oclient-bgcolor;
    border: 1px solid @oclient-border-color;
}
@{e-js}.e-pivotgrid @{e-js}.e-pivotschemadesigner .e-fieldTable{
overflow:auto;
}
@{e-js}.e-pivotschemadesigner .e-kpiCDB:before, @{e-js}.e-pivotschemadesigner .e-kpiRootCDB:before, @{e-js}.e-pivotschemadesigner .e-kpiGoalCDB:before, @{e-js}.e-pivotschemadesigner .e-kpiStatusCDB:before, @{e-js}.e-pivotschemadesigner .e-kpiTrendCDB:before, @{e-js}.e-pivotschemadesigner .e-kpiValueCDB:before{
content:"\e6df";
font-size: 18px;
}
@{e-js}.e-pivotschemadesigner .e-kpiCDB, @{e-js}.e-pivotschemadesigner .e-kpiRootCDB, @{e-js}.e-pivotschemadesigner .e-kpiGoalCDB, @{e-js}.e-pivotschemadesigner .e-kpiStatusCDB, @{e-js}.e-pivotschemadesigner .e-kpiTrendCDB, @{e-js}.e-pivotschemadesigner .e-kpiValueCDB{
height:16px;
width:16px;
display:inline-block;
vertical-align: text-top;
}
@{e-js}.e-pivotschemadesigner .e-fieldTable
{
    background: @bg-table-color;
	& when not (@skin = "office-365"){
       border: 1px solid @oclient-border-color;
   }
    border-collapse: collapse;
     & when (@skin = "material") {
       margin: 0px 0px 15px 0px;
	   width: 100%;
       border-radius:2px;
    }
   & when not (@skin = "material") and not (@skin = "office-365") {
       margin: 10px 10px 8px;
	  }
  & when (@skin = "office-365"){
       border: 1px solid @neutral-light;
       margin: 4px 0px 12px 0px;
    }    
}
@{e-js}.e-pivotschemadesigner .e-schemaFieldList
{
    display: inline-block;
    overflow: auto;
	height: 182px;	
    width: 100%;
	color:@oclient-icons-color;
}
@{e-js}.e-pivotschemadesigner .e-elementSeparator
{
    border: solid @oclient-border-color;
    border-width: 0 0 1px 0;
    display: block;
    margin: 7px;
}
@{e-js}.e-pivotschemadesigner .e-schemaFieldTree
{
    overflow: hidden;
}
@{e-js}.e-pivotschemadesigner .e-editorTreeView
{
	margin-top: 7px;
	height: 245px !important;
}
@{e-js}.e-pivotschemadesigner .schemaHeaders
{
    overflow: hidden;
}
@{e-js}.e-pivotschemadesigner .e-schemaFilter, @{e-js}.e-pivotschemadesigner .e-schemaColumn, @{e-js}.e-pivotschemadesigner .e-schemaRow, @{e-js}.e-pivotschemadesigner .e-schemaValue
{
    /*background: @aeb-bgcolor;*/
   & when (@skin = "material") {
        /*material*/
        background-color:@content-bg-color;
    }
      & when (@skin = "office-365") {
        /*material*/
        background-color:@neutral-white;
        border: 1px solid @neutral-light;
    }
   & when not (@skin = "office-365"){
       border: 1px solid @ogrid-header-border-color;
       margin-left: 10px;
   }
   overflow-x: hidden;
    overflow-y: auto;
    height: 75%;
   /* margin-top: 3px; */
}
@{e-js}.e-pivotschemadesigner .e-schemaColumn, @{e-js}.e-pivotschemadesigner .e-schemaValue
{
    margin-right: 10px;
}
@{e-js}.e-pivotschemadesigner .e-axisTd1 {
    float:left;
    position:relative;
}
@{e-js}.e-pivotschemadesigner .e-axisTd2 {
    float:right;
    position:relative;
}
@{e-js}.e-pivotschemadesigner #axisTd, @{e-js}.e-pivotschemadesigner #axisTd3 {
    & when (@skin = "material") {
        margin-top:14px !important;
    }
    }
@{e-js}.e-pivotschemadesigner .deferUpdateLayout {
    & when (@skin = "material") {
        margin-top:28px;
    }
    & when not (@skin = "material") {
        margin-top:6px;
    }}
@{e-js}.e-pivotschemadesigner .deferUpdateLayout .e-text{
    & when (@skin = "material") {
        margin-top:0px !important;
    }
    & when (@skin = "office-365") {
        margin-top:4px !important;
    }
    & when not (@skin = "office-365") and not (@skin = "material") {
        margin-top:2px !important;
    }
}
@{e-js}.e-pivotschemadesigner .listSubhead
{
    margin: 10px 0 0;
    & when (@skin = "material") {
        /*material*/
        text-align:center;
    }
}
@{e-js}.e-pivotschemadesigner .e-pivotHeader, @{e-js}.e-pivotschemadesigner .e-rPivotHeader
{
   font-weight: bold;
   line-height: 240%;   
}
@{e-js}.e-pivotschemadesigner .e-rPivotHeader{
margin-right:10px;
}
@{e-js}.e-pivotschemadesigner .e-listHeader
{
    font-weight: bold;
    /*background: none repeat scroll 0 0 #5eabde;*/
   & when not (@skin = "office-365") {
	border-bottom: 1px solid @pivot-selection-border;
   }
    font-size: 15px;
    margin: -1px;
    line-height: 40px;
    & when (@skin = "material") {
        margin-top:-14px;
    }
   & when (@skin = "office-365") {
	border-bottom: 1px solid @neutral-light;
    margin-top:-14px;
    margin-right:10px;
   }
}
@{e-js}.e-pivotschemadesigner .e-folderCDB:before
{
    content: "\e6e1";
    display: inline;
    vertical-align: middle;
    font-size: 17px;
}


@{e-js}.e-pivotschemadesigner .e-namedSetCDB:before {
  content: "\e6de";
  display: inherit;
  vertical-align: middle;
  font-size: 18px;
}

@{e-js}.e-pivotschemadesigner .e-measureGroupCDB:before
{
    content: "\e615";
    display: inline;
    vertical-align: middle;
}
@{e-js}.e-pivotschemadesigner .e-dimensionCDB:before
{
     content: "\e704";
    display: inline;
    vertical-align: middle;
}

@{e-js}.e-pivotschemadesigner .centerDiv
{
   & when not (@skin = "office-365") {
      margin-left: 4px;
    background-color: @oclient-border-color;
   }
  & when (@skin = "office-365") {
    background-color: @neutral-light;
   }
    border-radius: 25px;
    height: 2px;
    width: 98%;
}
@{e-js}.e-pivotschemadesigner .centerDiv:hover
{
    cursor:default;
}
@{e-js}.e-pivotschemadesigner .centerHead
{
    & when (@skin = "material") {
        /*material*/
        font-family:'Roboto',Segoe UI;
        font-size:13px;
        font-weight:normal;
        color:fade(@base-font-color,54%);
        text-align: center;
        margin: 10px 10px;
    }
    & when not (@skin = "material") and not (@skin = "office-365") {
        /*other*/
	    font: normal 14px @font-family;
     	color: @fg-header-color;
        margin: 7px 10px;
    }
    & when (@skin = "office-365") {
	    font: 14px @font-family;
     	color: @theme-light-font;
        margin: 12px 0px;
    }
}
@{e-js}.e-pivotschemadesigner .e-pivotHeader, @{e-js}.e-pivotschemadesigner .e-rPivotHeader
{
    & when not (@skin = "material") {
        & when not (@skin = "office-365"){
          border: 1px solid @ogrid-header-border-color;
          border-bottom: none;
          margin-left: 10px;
        }
        & when (@skin = "office-365"){
            border: 1px solid @neutral-light;
            border-bottom: none;
            background-color:@neutral-white;
        }
    }
    & when (@skin = "material") {
      border-bottom: none;
       margin-left: 10px;
    }
	font-weight: bold;
   }
@{e-js}.e-pivotschemadesigner .e-rPivotHeader, @{e-js}.e-pivotschemadesigner .e-schemaColumn, @{e-js}.e-pivotschemadesigner .e-schemaValue
{
    & when not (@skin = "material") and not (@skin = "office-365") {
	margin-left: 1%;
    }
    & when (@skin = "office-365") {
	margin-left: 2px;

  }
}
@{e-js}.e-pivotschemadesigner.e-rtl .e-rPivotHeader,
@{e-js}.e-pivotschemadesigner.e-rtl .e-schemaColumn,
@{e-js}.e-pivotschemadesigner.e-rtl .e-schemaValue {
    & when (@skin = "material") {
       margin-right: 7%;
    }
     & when not (@skin = "material") and not (@skin = "office-365") {
       margin-right: 5%;
    }
    & when (@skin = "office-365") {
       margin-right: 0px;
    }
}
@{e-js}.e-pivotschemadesigner .headerText
{
    & when (@skin = "material") {
        font-family:'Roboto',Segoe UI;
        font-size:14px;
        font-weight:normal;
        color:fade(@base-font-color,87%);
        padding-left:0px;
    }
       & when not (@skin = "material") and not (@skin = "office-365") {
        padding:0px 5px 0px 5px;        
    }
   & when (@skin = "office-365") {
        font:17px @font-family Semilight;
        color:@theme-light-font;
  }
}
@{e-js}.e-pivotschemadesigner .subheadText
{
	margin: 10px 0 0;
    & when (@skin = "material") {
        /*material*/
        font-family:'Roboto',Segoe UI;
        font-size:13px;
        font-weight:normal;
        color:fade(@base-font-color,54%);
        padding-left: 10px;
    }
       & when not (@skin = "material") and not (@skin = "office-365") {
        /*other*/
     	font: normal 14px @font-family;
    	color: @fg-header-color;
        padding-left: 10px;
   }
   & when (@skin = "office-365") {
        font:14px @font-family;
        color:@theme-light-font;
    }
}
@{e-js}.e-pivotschemadesigner .pivotLabel:hover
{
    background: none repeat scroll 0 0 @groupingBar-bg-color;
    color: @active-font-color;
    cursor: move;
}
@{e-js}.e-pivotschemadesigner .e-pivotButton > .pvtBtnDiv
{
   & when (@skin = "material") {
       max-width:90%;
       display:inline-block;
       margin: 2px 0px 0;
    }
   & when not (@skin = "material") and not (@skin = "office-365") {
     display: block;
     margin: 2px 3px 0;
    }
      & when (@skin = "office-365") {
       max-width:96%;
       display:inline-block;
    //   margin: 2px 0px 0;
    }
    width:auto;
    background: @toolbar-bgcolor;
    .office-pivot-button-border();
    border-color:@ogrid-header-border-color !important;
    white-space: nowrap;
    overflow: hidden;
}
@{e-js}.e-pivotschemadesigner  .pvtBtnDiv > .e-pvtBtn
{
    cursor: move;
    text-align: left;
    text-overflow: ellipsis;
  & when (@skin = "material") {
   .groupingBar-btn-color();
   height:32px;
  }
   & when not (@skin = "material") and not (@skin = "office-365") {
	height:auto;
   .groupingBar-btn-color();
  }
     & when (@skin = "office-365") {
   height:26px;
   font:14px @font-family;
  }
    border: none !important;
    overflow: hidden;
}
@{e-js}.e-pivotschemadesigner .e-pivotButton > .e-pvtBtn {
  cursor: move;
  text-align: left;
  text-overflow: ellipsis;
   & when (@skin = "material") {
     height: 32px;
   }
   & when not (@skin = "material") and not (@skin = "office-365") {
	height:auto;
  }
     & when (@skin = "office-365") {
   height:26px;
  }
  .groupingBar-btn-color();
  overflow: hidden;
}
.e-hoverBtn
{
    background: @hover-bg-stcolor !important;
}

@{e-js}.e-pivotgrid .dragHover{
    & when not (@skin = "material") and not (@skin = "office-365") {
         background: @pivotList-treeview-hvr-color !important;
    }
}
@{e-js}.e-pivotschemadesigner.e-rtl  .pvtBtnDiv > .e-pvtBtn {
  text-align: right;
}
.dragHover.e-btn.e-select{
    & when (@skin = "material") {
        background:@grey-200;
        font-size:13px;
        font-weight:normal;
        color:fade(@base-font-color,54%);
        border-radius:25px;
        padding:0px 12px; 
        padding-bottom:1px;
        height:32px;
        box-shadow:none;
        text-transform:none;
        font-size: 13px;
    }
    & when not (@skin = "material") and not (@skin = "office-365") {
        background: @pivotList-treeview-hvr-color !important;
    }
  & when (@skin = "office-365") {
      font:14px @font-family;
      padding:0px 8px;
      background:@theme-lighter;
      color:@theme-light-font;
      width:auto;
}
 }

 @{e-js}.e-pivotschemadesigner .e-pivotButton > .pvtBtnDiv:hover
{
    .hover-gradient();
    .switch-pivotgrid-btn-hover;
    .office-pivot-button-border();
    border-color: @active-font-color !important;
    color:  @hover-font-color;
} 
  @{e-js}.e-pivotschemadesigner .e-pivotButton > .pvtBtnDiv:active
{
      .office-pivot-button-active();
  }
 @{e-js}.e-pivotschemadesigner .pvtBtnDiv > .e-pvtBtn:hover 
 {
         & when not (@skin = "office-365") {
     .hover-gradient();
     }
 }
  @{e-js}.e-pivotschemadesigner .pvtBtnDiv > .e-pvtBtn:active 
{
   & when not (@skin = "office-365") {
    .office-pivot-button-active();
   }
  }
 @{e-js}.e-pivotschemadesigner .filter, @{e-js}.e-pivotschemadesigner .e-sorting, @{e-js}.e-pivotschemadesigner .e-removeBtn
 {
     color: @default-font-color;
     display: inline-block;
     position: relative;
     vertical-align: middle;
     cursor: pointer;
 }
  @{e-js}.e-pivotschemadesigner .btnDeferUpdate {
    text-overflow:ellipsis;
    width:90px;
}
  @{e-js}.e-pivotclient .e-pivotschemadesigner .btnDeferUpdate {
    width:60px;
}
 @{e-js}.e-pivotschemadesigner .e-errOKBtn
 {
    & when (@skin = "material"){
        margin: 20px 0 10px 150px;
        width: 64px;
    }
    & when (@skin = "office-365"){
        margin: 20px 0 10px 150px;
        width: 50px;
    }
    & when not (@skin = "material") and not (@skin = "office-365")  {
        margin: 20px 0 10px 155px;
        width: 50px;
    }
    display: inline-block;
}
  @{e-js}.e-pivotschemadesigner.e-rtl .e-errOKBtn {
    & when (@skin = "material") {
     margin: 20px 150px 10px 0px;
     width: 64px; 
    }
    & when (@skin = "office-365"){
        margin: 20px 150px 10px 0px;
        width: 50px;
    }
    & when not (@skin = "material") and not (@skin = "office-365") {
        margin-right:155px;
        width: 50px;
    }
}
@{e-js}.e-pivotschemadesigner .pvtDrop:before, @{e-js}.e-pivotschemadesigner .treeDrop:before
{
    content: "\e666";
}
@{e-js}.e-pivotschemadesigner .e-dropIndicator
{
    background: none repeat scroll 0 0 transparent;
    height: 2px;
    width: auto;
 & when (@skin = "office-365") {
    display:inline-block;
 }
}
@{e-js}.e-pivotschemadesigner .e-dropIndicatorHover
{
    .hover-gradient();
}
@{e-js}.e-pivotschemadesigner .e-removePivotBtn:before
{
    background-repeat: no-repeat;
    height: 11px;
    padding-left: 10px;
    width: 11px;
    color: @active-font-color;
    content: "\e681";
    font-size: 13px;
    background-color: @content-bg-color;
    border: 1px solid @ogrid-header-border-color;
    float: none;
    padding: 6px;
    position: absolute;
}
@{e-js}.e-pivotschemadesigner .e-removePivotBtn:hover
{
    cursor: pointer;
    background: none repeat scroll 0 0 @pivot-selection-background;
}
@{e-js}.e-pivotschemadesigner .e-sorting:before {
  content: "\e672";
  float: right;
  margin-right: 4px;
}
@{e-js}.e-pivotschemadesigner .e-sorting.descending:before {
  content: "\e673";
  float: right;
}
@{e-js}.e-pivotschemadesigner .filter:before {
  content: "\e669";  
  margin-left: -35px;
}
@{e-js}.e-pivotschemadesigner .filter.filtered:before {
  content: "\e668";
  float: right;
}
@{e-js}.e-pivotschemadesigner .e-removeBtn:before {
  content: "\e711";
  float: right;
  margin-right: 4px;
}
@{e-js}.e-pivotschemadesigner.e-rtl .filter:before {
  float: left;
  margin-left: 17px;
  margin-right: 0px;
  margin-top: -20px;
}
@{e-js}.e-pivotschemadesigner.e-rtl .filter {
  float: left !important;
}
@{e-js}.e-pivotschemadesigner .pvtDrop:before, @{e-js}.e-pivotschemadesigner .treeDrop:before
{
    /* content: "\e666"; */
}

@{e-js}.e-pivotschemadesigner .treeDrop,@{e-js}.e-pivotschemadesigner .sortDiv:hover, 
@{e-js}.e-pivotschemadesigner .clearSorting:hover, @{e-js}.e-pivotschemadesigner .clearAllFilters:hover,
@{e-js}.e-pivotgrid .sortDiv:hover, @{e-js}.e-pivotgrid .clearSorting:hover, @{e-js}.e-pivotgrid .clearAllFilters:hover 
{
    cursor: pointer;
}
@{e-js}.e-pivotschemadesigner .filterBtn
{
    height: 24px;
}
@{e-js}.e-pivotschemadesigner .e-filterIndicator
{
    background: none repeat scroll 0 0 @pivotList-treeview-hvr-color;
}
@{e-js}.e-pivotschemadesigner .e-memberEditorDiv
{
    height: 256px;
     & when  (@skin = "material") {
      margin-top: 24px;
    }
    & when not (@skin = "material") and not (@skin = "office-365") {
      margin-top: 7px;
    }
    & when  (@skin = "office-365") {
      margin-top: 15px;
      margin-bottom:10px;
    }
    border: 1px solid @oclient-border-color;
}
@{e-js}.e-pivotschemadesigner .e-dialogOKBtn, @{e-js}.e-pivotschemadesigner .e-dialogCancelBtn
{
    width: 69px;
  & when not (@skin = "material") and not (@skin = "office-365") {
      margin-left: 10px;
    }
    & when (@skin = "office-365") {
      margin-left: 8px;
      margin-bottom:14px;
    }
}
@{e-js}.e-pivotschemadesigner .e-dialogOKBtn
{
   & when not (@skin = "material") and not (@skin = "office-365") {
      margin-left: 83px;
    }
}
@{e-js}.e-pivotschemadesigner.e-rtl .e-dialogOKBtn {
  margin-left: 10px;
    & when (@skin = "material") {
      margin-right: 68px;
    }
   & when not (@skin = "material") and not (@skin = "office-365") {
      margin-right: 86px;
    }
       & when (@skin = "office-365") {
      margin-right: 65px;
    }
}
@{e-js}.e-pivotschemadesigner.e-rtl .e-labelValueFilterDlg .e-dialogOKBtn {
  margin-left: 10px;
    & when (@skin = "material") {
      margin-right: 55px;
    }
   & when not (@skin = "material") and not (@skin = "office-365") {
      margin-right: 73px;
    }
       & when (@skin = "office-365") {
      margin-right: 65px;
    }
}
@{e-js}.e-pivotschemadesigner.e-rtl .e-dialogCancelBtn {
    margin-left:0px;
}
@{e-js}.e-pivotschemadesigner.e-rtl .e-labelValueFilterDlg .e-dialogCancelBtn {
    margin-left:5px;
}
@{e-js}.e-pivotschemadesigner .e-chkbox-wrap
{
    & when not (@skin = "office-365") {
      margin-left: 7px;
    }
}
@{e-js}.e-pivotschemadesigner .e-tbtn-wrap
{
    display: inline-block;
}
@{e-js}.e-pivotschemadesigner .e-togglebutton .e-icon
{
    height: 14px;
    width: 14px;
}

@{e-js}.e-pivotschemadesigner .e-treeview .e-text
{
    min-height: 20px;
    border: 1px solid transparent;
    & when (@skin = "material") {
        /*material*/
           font-family:'Roboto',Segoe UI;
           font-size:13px;
           color:fade(@base-font-color,87%);
    }
     & when not (@skin = "material") and not (@skin = "office-365") {
        /*other*/
     	font-family: @font-family;
        font-size: 12px;
    	color:  @content-font-color;
        font-weight: bold;
    }
    cursor: move;
}
@{e-js}.e-pivotschemadesigner .e-treeview .e-node-hover
{
	/*background:@pivotList-treeview-hvr-color;*/
             /*color:@pivotList-treeview-text-hvr-color;*/
    & when not (@skin = "office-365") {
     .office-pivot-treeview-hover-border();
   }
	
}
@{e-js}.e-pivotschemadesigner .e-dialog .e-header
{
	/*.oclientDialog-setcolor();*/

}
@{e-js}.e-pivotschemadesigner .e-dialog .e-dialog-icon:hover
{
      & when not (@skin = "material") {
       .office-pivot-dialog-icon-hover();
      }
}
@{e-js}.e-pivotschemadesigner .e-treeview .e-active
{
   & when not (@skin = "material") and not (@skin = "office-365") {
	background:@pivotList-treeview-active-color;
	color:@pivotList-treeview-text-hvr-color;
  }
}

@{e-js}.e-pivotschemadesigner .e-treeview .e-text .e-icon{
  & when not (@skin = "material") and not (@skin = "office-365") {
  .switch-pivotclient-treeview-icon-hover-active;
 }
}

@{e-js}.e-pivotschemadesigner .btnDeferUpdate{
    float: right;
   & when not (@skin = "office-365") {
    margin-right: 10px;
   }
   & when (@skin = "office-365") {
    margin-right: 15px;
   }
}
@{e-js}.e-pivotschemadesigner.e-rtl .btnDeferUpdate{
  float: left;
   & when not (@skin = "office-365") {
    margin-left: 10px;
   }
   & when (@skin = "office-365") {
    margin-left: 15px;
   }
}
@{e-js}.e-pivotschemadesigner .deferUpdateLayout{
   & when not (@skin = "material") and not (@skin = "office-365") {
     margin-left: 5px;
   }
}
@{e-js}.e-pivotschemadesigner.e-rtl .deferUpdateLayout {
   & when not (@skin = "office-365") {
    margin-right: 5px;
   }
}
@{e-js}.e-pivotschemadesigner.e-rtl .deferUpdateLayout .e-text {
  margin-right: 5px;
}
@{e-js}.e-pivotschemadesigner .e-schemaFieldTree.e-treeview .e-text{
	width: 90%;
}

@{e-js}.e-pivotschemadesigner .e-pivotButton .e-rtl {
  text-align: right;
  }

@{e-js}.e-pivotschemadesigner .e-btn
{
    /* font-size: 12px;
    background: none repeat scroll 0 0 @toolbar-bgcolor;
    border-color: @active-border-color; */
}
@{e-js}.e-pivotschemadesigner .e-schemaFieldTree ul, @{e-js}.e-pivotschemadesigner .e-schemaFieldTree li
{
    width: 96%;
    height: auto;
}

@{e-js}.e-pivotschemadesigner .e-btn .e-btntxt
{
    padding: 0 6px 6px;
}
@{e-js}.e-pivotschemadesigner .expandSchema {
    display: block;
    float: right;
    height: 25px;
    left: 24px;
    position: relative;
    top: -615px;
    width: 23px;
}
@{e-js}.e-pivotschemadesigner .collapseSchema {
    float: right;
    height: 25px;
    position: relative;
    top: -615px;
    width: 23px;
}

@{e-js}.e-pivotschemadesigner .freeze {
    position: absolute;
    height: 100%;
    width: 100%;
    content: ' ';
    top:0;
    left:0;
    z-index:10;
    opacity:0;
    background-color:lightgrey;
    filter:alpha(opacity=0);
}

@{e-js}.e-pivotschemadesigner .e-ddlGroupWrap,@{e-js}.e-pivotgrid .e-ddlGroupWrap {
    font-weight: bold;
    & when not (@skin = "office-365") {
       padding:5px 0px 5px 8px;
      }
        & when (@skin = "office-365") {
       padding:0px 12px;
      }
}

@{e-js}.e-pivotschemadesigner .e-ascOrder, @{e-js}.e-pivotschemadesigner .e-descOrder,@{e-js}.e-pivotgrid .e-ascOrder, @{e-js}.e-pivotgrid .e-descOrder {
    list-style: none;
    border: 1px solid @content-bg-color;
}

@{e-js}.e-pivotschemadesigner .e-descImage, @{e-js}.e-pivotschemadesigner .e-ascImage,  @{e-js}.e-pivotgrid .e-descImage, @{e-js}.e-pivotgrid .e-ascImage {
    display: inline-block;
    height: 18px;
    margin-right: 10px;
    vertical-align: middle;
    width: 20px;
}

@{e-js}.e-pivotschemadesigner .e-ascImage:before, @{e-js}.e-pivotgrid .e-ascImage:before {
    content: "\e714";
    font-size: 16px;
     margin-left:5px;
 	  & when (@skin = "material") {
	    margin-top: -3px;
      }
}


@{e-js}.e-pivotschemadesigner .e-descImage:before ,@{e-js}.e-pivotgrid .e-descImage:before {
    content: "\e713";
    font-size: 16px;
     margin-left:5px;
	  & when (@skin = "material") {
	    margin-top: -3px;
      }
}

@{e-js}.e-pivotschemadesigner .e-dialog .filter {
    float: left;
}

@{e-js}.e-pivotschemadesigner .e-selectedSort, @{e-js}.e-pivotgrid .e-selectedSort {
    border: 1px solid;
    padding-top: 2px;
}

@{e-js}.e-pivotschemadesigner .e-filterElementTag.e-vertical, @{e-js}.e-pivotgrid .e-filterElementTag.e-vertical {
    border-color:@content-bg-color;
}

@{e-js}.e-pivotschemadesigner .e-clrFilter:before, @{e-js}.e-pivotgrid .e-clrFilter:before {
    content: "\e668";
    font-size: 16px;
    float: left;
}

@{e-js}.e-pivotschemadesigner .e-clrSort:before, @{e-js}.e-pivotgrid .e-clrSort:before {
    content: "\e754";
    font-size: 19px;
    float: left;
    margin-top: 4px;
}

@{e-js}.e-pivotschemadesigner .e-filterElementTag, @{e-js}.e-pivotgrid .e-filterElementTag {
      & when not (@skin = "material") {
        font-family:@font-family;
      }
   & when (@skin = "material") {
    box-shadow:none !important;
   }
}

@{e-js}.e-pivotschemadesigner .e-filterState:before, @{e-js}.e-pivotgrid .e-filterState:before {
    content: "\e80a";
    height: 16px;
    width: 16px;
}

@{e-js}.e-pivotschemadesigner .clearAllFilters,  @{e-js}.e-pivotgrid .clearAllFilters {
    padding-top: 4px;
    padding-left: 5px;
}
@{e-js}.e-pivotschemadesigner .clearAllFilters .e-clrFilter,   @{e-js}.e-pivotgrid .clearAllFilters .e-clrFilter {
        margin-top: 1px;
        float: left;
}
@{e-js}.e-pivotschemadesigner .clearAllFilters .filter, @{e-js}.e-pivotgrid .clearAllFilters .filter {
        margin-left: 0px;
}

@{e-js}.e-pivotschemadesigner .e-filterIndicator:before,  @{e-js}.e-pivotgrid .e-filterIndicator:before {
    content: "\e7cf";
    height: 16px;
    width: 16px;
}

@{e-js}.e-pivotschemadesigner .advancedFilter, @{e-js}.e-pivotgrid .advancedFilter {

    & when not (@skin = "office-365") {
    margin-left: 9px;
    margin-right: 5px;
    }
   & when (@skin = "office-365") {
    padding:0px !important;
    margin:12px 12px 0px 12px;
   }
}

@{e-js}.e-pivotschemadesigner .e-activeFilter:before, @{e-js}.e-pivotgrid .e-activeFilter:before {
    content: "\e657";
    height: 16px;
    width: 16px;
}
@{e-js}.e-pivotschemadesigner .clearFilter .e-clrFilter, @{e-js}.e-pivotgrid .clearFilter .e-clrFilter {
     margin-top: -1px !important;
}

@{e-js}.e-pivotschemadesigner .advancedFilter .e-editorTreeView, @{e-js}.e-pivotgrid .advancedFilter .e-editorTreeView {
    height: inherit !important;
    margin-top: 0px;
}
@{e-js}.e-pivotschemadesigner .separator, @{e-js}.e-pivotgrid  .separator {
    width: 84%;
    height: 1px;
    background-color: @default-border-color;
    margin-top: 7px;
    margin-left: 35px;
}
@{e-js}.e-pivotschemadesigner .e-filterElementTag a,@{e-js}.e-pivotgrid .e-filterElementTag a
{
    margin-left: 3px !important;
}
@{e-js}.e-pivotschemadesigner .e-dialog.e-advancedFilterDlg .e-menu.e-vertical .e-list>ul{
      & when (@skin = "material") {
    box-shadow:0 8px 10px 0 rgba(0,0,0,.24);
    }
}
@{e-js}.e-pivotgrid .e-dialog.e-advancedFilterDlg .e-menu.e-vertical .e-list>ul{
      & when (@skin = "material") {
    box-shadow:0 8px 10px 0 rgba(0,0,0,.24);
    }
}
@{e-js}.e-pivotschemadesigner .clearFltrText,@{e-js}.e-pivotschemadesigner .clearSortText,
@{e-js}.e-pivotgrid .clearFltrText,@{e-js}.e-pivotgrid .clearSortText
{
    padding-left:1px !important;
}
@{e-js}.e-pivotschemadesigner .sortDiv, @{e-js}.e-pivotschemadesigner .clearSorting,@{e-js}.e-pivotschemadesigner .e-filterElementTag , 
@{e-js}.e-pivotgrid .sortDiv, @{e-js}.e-pivotgrid .clearSorting, @{e-js}.e-pivotgrid .e-filterElementTag 
{
    padding-left: 5px;
}
@{e-js}.e-pivotschemadesigner .clearSorting, @{e-js}.e-pivotgrid .clearSorting 
{
    height:20px;
}
@{e-js}.e-pivotschemadesigner .e-filterState, @{e-js}.e-pivotgrid .e-filterState 
{
    margin-left: 10px;
}
@{e-js}.e-pivotschemadesigner .memberFilter.e-filterState, @{e-js}.e-pivotgrid .memberFilter.e-filterState 
{
    margin-left : 0px!important;
    margin-top :5px;
    position: absolute;
    float: left;
}

 @{e-js}.e-pivotgrid #sep1, @{e-js}.e-pivotgrid #sep2, @{e-js}.e-pivotgrid #sep3, @{e-js}.e-pivotgrid #sep4, @{e-js}.e-pivotgrid #sep5, @{e-js}.e-pivotgrid #sep6, @{e-js}.e-pivotgrid #sep7, @{e-js}.e-pivotgrid #sep8, @{e-js}.e-pivotgrid #sep9, @{e-js}.e-pivotschemadesigner #sep1, @{e-js}.e-pivotschemadesigner #sep2, @{e-js}.e-pivotschemadesigner #sep3, @{e-js}.e-pivotschemadesigner #sep4, @{e-js}.e-pivotschemadesigner #sep5, @{e-js}.e-pivotschemadesigner #sep6, @{e-js}.e-pivotschemadesigner #sep7, @{e-js}.e-pivotschemadesigner #sep8, @{e-js}.e-pivotschemadesigner #sep9 {
     height: 1px;
     background-color: @oclient-border-color;
     margin-left: 30px;
 } 
 @{e-js}.e-pivotgrid #sep1{
     height:0px;
 }

@{e-js}.e-pivotgrid #labelFilterBtn, @{e-js}.e-pivotgrid #ascOrder, @{e-js}.e-pivotgrid #descOrder, @{e-js}.e-pivotgrid #clearAllFilters, @{e-js}.e-pivotgrid #clearSorting,
@{e-js}.e-pivotschemadesigner #labelFilterBtn,@{e-js}.e-pivotschemadesigner #ascOrder, @{e-js}.e-pivotschemadesigner #descOrder, @{e-js}.e-pivotschemadesigner #clearAllFilters,@{e-js}.e-pivotschemadesigner #clearSorting
{
   border-bottom:none;
}

@{e-js}.e-pivotgrid .e-advancedFilterDlg .e-treeview .e-text,
@{e-js}.e-pivotschemadesigner .e-advancedFilterDlg .e-treeview .e-text
{
    font-weight: normal;
}

@{e-js}.e-pivotschemadesigner .e-clrSort:before, @{e-js}.e-pivotgrid .e-clrSort:before {
 & when not (@skin = "material") {
   font-size: 22px;
   float: left;
   margin-top: -1px;
 }
  & when (@skin = "material") {
   font-size: 16px;
   float: left;
   margin-top: -3px;
   margin-left:3px;
 }
   
}

@{e-js}.e-pivotschemadesigner .e-selectedSort, @{e-js}.e-pivotgrid .e-selectedSort {
   border:1px solid !important;
}

@{e-js}.e-pivotschemadesigner .filterDialog div,@{e-js}.e-pivotgrid .filterDialog div
 {
    padding-bottom: 5px;
}
@{e-js}.e-pivotschemadesigner .filterDialog,@{e-js}.e-pivotgrid .filterDialog {
    margin-left: -7px;
}
 @{e-js}.e-pivotschemadesigner .e-filterElementTag , @{e-js}.e-pivotgrid .e-filterElementTag
{
     height: auto!important;
}
@{e-js}.e-pivotgrid #clientDialog_wrapper.e-advancedFilterDlg .e-scroller:not([id$="_fieldCollection_container"]), @{e-js}.e-pivotschemadesigner #clientDialog_wrapper.e-advancedFilterDlg .e-scroller {
    overflow: visible;
    border:none;
 }
@{e-js}.e-pivotgrid #clientDialog_wrapper.e-rtl.e-advancedFilterDlg .e-scroller>.e-content:not([id$="_fieldCollection_container"]), @{e-js}.e-pivotschemadesigner #clientDialog_wrapper.e-rtl.e-advancedFilterDlg .e-scroller>.e-content {
    overflow: visible !important;
 }
@{e-js}.e-pivotschemadesigner.e-rtl .e-axisTd1{
    & when (@skin = "material") {
        float:right;
    }
    & when not (@skin = "material") {
        float:left;
    }
}
 @{e-js}.e-pivotgrid #clientDialog_wrapper.e-advancedFilterDlg .clientDialog,
 @{e-js}.e-pivotschemadesigner #clientDialog_wrapper.e-advancedFilterDlg .clientDialog {
      overflow: visible !important;
 }
 @{e-js}.e-pivotgrid .e-icon.e-searchEditorTree:before,@{e-js}.e-pivotschemadesigner .e-icon.e-searchEditorTree:before {
    content: "\e812";
    cursor: pointer;
}

@{e-js}.e-pivotgrid .e-dialog .e-icon.e-searchEditorTree,@{e-js}.e-pivotschemadesigner .e-dialog .e-icon.e-searchEditorTree{
    display: inline-block;
    position: absolute;
    & when not (@skin = "material") and not (@skin = "office-365") {
    top: 15px;
    left: 232px;
    }
  & when (@skin = "material") {
    top: 32px;
    left: 222px;
  }
    & when (@skin = "office-365") {
    top: 10px;
    left: 220px;
  }
}

@{e-js}.e-pivotgrid.e-rtl .e-dialog.e-rtl .e-icon.e-searchEditorTree,@{e-js}.e-pivotschemadesigner.e-rtl .e-dialog.e-rtl .e-icon.e-searchEditorTree{
    display: inline-block;
    position: absolute;
   & when not (@skin = "material") and not (@skin = "office-365") {
    top: 15px;
    left: 13px;
    }
  & when (@skin = "material") {
    top: 32px;
    left: 25px;
  }
    & when (@skin = "office-365") {
    top: 11px;
    left: 27px;
  }
}

@{e-js}.e-pivotgrid.e-rtl .e-dialog.e-advancedFilterDlg.e-rtl .e-icon.e-searchEditorTree,@{e-js}.e-pivotschemadesigner.e-rtl .e-dialog.e-advancedFilterDlg.e-rtl .e-icon.e-searchEditorTree{
    display: inline-block;
    position: absolute;
       & when not (@skin = "material") and not (@skin = "office-365") {
    top: 229px;
    left: 12px;
    }
  & when (@skin = "material") {
    top: 320px;
    left: 12px;
  }
    & when (@skin = "office-365") {
    top: 305px;
    left: 12px;
  }
}

@{e-js}.e-pivotschemadesigner .e-dialog.e-advancedFilterDlg .e-icon.e-searchEditorTree,@{e-js}.e-pivotgrid .e-dialog.e-advancedFilterDlg .e-icon.e-searchEditorTree{
    display: inline-block;
    position: absolute;
       & when not (@skin = "material") and not (@skin = "office-365") {
   top: 236px;
    left: 235px;
    }
  & when (@skin = "material") {
    top: 320px;
    left: 240px;
  }
  & when (@skin = "office-365") {
     top: 302px;
    left: 235px;
 }
}
@{e-js}.e-pivotschemadesigner .e-dialog.e-advancedFilterDlg.advancedFilterDlgOSM .e-icon.e-searchEditorTree,@{e-js}.e-pivotgrid .e-dialog.e-advancedFilterDlg.advancedFilterDlgOSM .e-icon.e-searchEditorTree{
       & when not (@skin = "material") and not (@skin = "office-365") {
   top: 236px;
    left: 235px;
    }
  & when (@skin = "material") {
    top: 320px;
    left: 240px;
  }
  & when (@skin = "office-365") {
     top: 302px;
    left: 235px;
 }
}
@{e-js}.e-pivotschemadesigner  .e-dialog .e-memberPager,@{e-js}.e-pivotgrid .e-dialog .e-memberPager,
@{e-js}.e-pivotschemadesigner  .e-dialog .e-memberSearchPager,@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager,
@{e-js}.e-pivotschemadesigner  .e-dialog .e-memberDrillPager,@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager {
    margin-top:10px;
    margin-bottom:20px;
}
@{e-js}.e-pivotschemadesigner  .e-dialog .e-memberPager+div.e-dialogFooter,@{e-js}.e-pivotgrid .e-dialog .e-memberPager+div.e-dialogFooter,
@{e-js}.e-pivotschemadesigner  .e-dialog .e-memberSearchPager+div.e-dialogFooter,@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager+div.e-dialogFooter,
@{e-js}.e-pivotschemadesigner  .e-dialog .e-memberDrillPager+div.e-dialogFooter,@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager+div.e-dialogFooter  {
        & when not (@skin = "material") and not (@skin = "office-365") {
    margin-bottom:10px !important;
    }
    & when (@skin = "material") {
    margin-bottom:0px !important;
    }
     & when (@skin = "office-365") {
        margin-bottom:20px !important;
      }
}
@{e-js}.e-pivotgrid .e-advancedFilterDlg .e-memberPager,@{e-js}.e-pivotschemadesigner .e-advancedFilterDlg .e-memberPager,
@{e-js}.e-pivotgrid .e-advancedFilterDlg .e-memberSearchPager,@{e-js}.e-pivotschemadesigner .e-advancedFilterDlg .e-memberSearchPager,
@{e-js}.e-pivotgrid .e-advancedFilterDlg .e-memberDrillPager,@{e-js}.e-pivotschemadesigner .e-advancedFilterDlg .e-memberDrillPager{
    margin-left:12px;
    margin-right:12px;
}
@{e-js}.e-pivotschemadesigner .e-firstPage.e-pageDisabled, @{e-js}.e-pivotschemadesigner .e-prevPage.e-pageDisabled, @{e-js}.e-pivotschemadesigner .e-nextPage.e-pageDisabled,@{e-js}.e-pivotschemadesigner .e-lastPage.e-pageDisabled,@{e-js}.e-pivotgrid .e-firstPage.e-pageDisabled, @{e-js}.e-pivotgrid .e-prevPage.e-pageDisabled, @{e-js}.e-pivotgrid .e-nextPage.e-pageDisabled,@{e-js}.e-pivotgrid .e-lastPage.e-pageDisabled{
        & when not (@skin = "material") and not (@skin = "office-365") {
        filter: alpha(opacity=50) !important;
        -moz-opacity: 0.5 !important;
        opacity: 0.5 !important;
      }
        & when (@skin = "material"){
        filter: alpha(opacity=100) !important;
        -moz-opacity: 1 !important;
        opacity: 1 !important;
        color: fade(#000000, 24%);
      }
      & when (@skin = "office-365") {
         filter: alpha(opacity=100) !important;
        -moz-opacity: 1 !important;
        opacity: 1 !important;
         color: #c8c8c8;
      }
}
@{e-js}.e-pivotschemadesigner .e-firstPage.e-pageEnabled, @{e-js}.e-pivotschemadesigner .e-prevPage.e-pageEnabled, @{e-js}.e-pivotschemadesigner .e-nextPage.e-pageEnabled,@{e-js}.e-pivotschemadesigner .e-lastPage.e-pageEnabled,@{e-js}.e-pivotgrid .e-firstPage.e-pageEnabled, @{e-js}.e-pivotgrid .e-prevPage.e-pageEnabled, @{e-js}.e-pivotgrid .e-nextPage.e-pageEnabled,@{e-js}.e-pivotgrid .e-lastPage.e-pageEnabled{
        -moz-opacity: 1 !important;
        opacity: 1 !important;
        filter: alpha(opacity=100) !important;
      & when (@skin = "material"){
        color: fade(#000000, 54%);
      }
      & when (@skin = "office-365") {
        color: #666;
      }
}
@{e-js}.e-pivotschemadesigner .e-firstPage.e-pageEnabled:hover,@{e-js}.e-pivotschemadesigner .e-prevPage.e-pageEnabled:hover, @{e-js}.e-pivotschemadesigner .e-nextPage.e-pageEnabled:hover,@{e-js}.e-pivotschemadesigner .e-lastPage.e-pageEnabled:hover,@{e-js}.e-pivotgrid .e-firstPage.e-pageEnabled:hover, @{e-js}.e-pivotgrid .e-prevPage.e-pageEnabled:hover, @{e-js}.e-pivotgrid .e-nextPage.e-pageEnabled:hover,@{e-js}.e-pivotgrid .e-lastPage.e-pageEnabled:hover{
       & when not (@skin = "material"){
     background-color:@hover-bg-stcolor;
    }

}
@{e-js}.e-pivotschemadesigner .e-firstPage.e-pageEnabled:active, @{e-js}.e-pivotschemadesigner .e-prevPage.e-pageEnabled:active, @{e-js}.e-pivotschemadesigner .e-nextPage.e-pageEnabled:active,@{e-js}.e-pivotschemadesigner .e-lastPage.e-pageEnabled:active ,@{e-js}.e-pivotgrid .e-firstPage.e-pageEnabled:active, @{e-js}.e-pivotgrid  .e-prevPage.e-pageEnabled:active, @{e-js}.e-pivotgrid .e-nextPage.e-pageEnabled:active,@{e-js}.e-pivotgrid .e-lastPage.e-pageEnabled:active{
           & when not (@skin = "material"){
    background-color:@active-bg-stcolor;
    color:@active-font-color;
   }
}

@{e-js}.e-pivotschemadesigner .e-firstPage, @{e-js}.e-pivotschemadesigner .e-prevPage, @{e-js}.e-pivotschemadesigner .e-nextPage,@{e-js}.e-pivotschemadesigner .e-lastPage,@{e-js}.e-pivotgrid .e-firstPage, @{e-js}.e-pivotgrid .e-prevPage, @{e-js}.e-pivotgrid .e-nextPage,@{e-js}.e-pivotgrid .e-lastPage {
    width:24px;
    height:24px;
}
@{e-js}.e-pivotschemadesigner .e-icon.e-media-backward_01:before,@{e-js}.e-pivotschemadesigner .e-icon.e-arrowhead-left:before,@{e-js}.e-pivotschemadesigner .e-icon.e-arrowhead-right:before,@{e-js}.e-pivotschemadesigner .e-icon.e-media-forward_01:before,@{e-js}.e-pivotgrid .e-icon.e-media-backward_01:before,@{e-js}.e-pivotgrid .e-icon.e-arrowhead-left:before,@{e-js}.e-pivotgrid .e-icon.e-arrowhead-right:before,@{e-js}.e-pivotgrid .e-icon.e-media-forward_01:before{
    margin-top:5px;
}
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberCurrentPage,@{e-js}.e-pivotgrid .e-dialog .e-memberCurrentPage,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberCurrentSearchPage,@{e-js}.e-pivotgrid .e-dialog .e-memberCurrentSearchPage,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberCurrentDrillPage,@{e-js}.e-pivotgrid .e-dialog .e-memberCurrentDrillPage{
    margin-left:8px;
    margin-right:6px;
    outline:none;
    text-indent:3px;
}
@{e-js}.e-pivotschemadesigner .e-dialog .memberPageCount,@{e-js}.e-pivotgrid .e-dialog .memberPageCount,
@{e-js}.e-pivotschemadesigner .e-dialog .memberSearchPageCount,@{e-js}.e-pivotgrid .e-dialog .memberSearchPageCount,
@{e-js}.e-pivotschemadesigner .e-dialog .memberDrillPageCount,@{e-js}.e-pivotgrid .e-dialog .memberDrillPageCount
{
    margin-right:8px;
}
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager+div,@{e-js}.e-pivotgrid .e-dialog .e-memberPager+div,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager+div,@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager+div,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager+div,@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager+div{
    margin: 0px 0px 6px !important;
}

 /*---------------------------------------------------------- Material Theme and Office-365 -----------------------------------------------------------------------*/
@{e-js}.e-pivotgrid .filter,@{e-js}.e-pivotgrid .values .e-removeBtn{
   & when (@skin = "material") {
    margin-left:20px;
   }
}

@{e-js}.e-pivotschemadesigner .e-fieldTable .e-treeview-wrap:not(.e-fullrow-wrap) .e-text {
   & when (@skin = "material") {
    position:static !important;
   }
}

@{e-js}.e-pivotgrid .e-removeBtn, @{e-js}.e-pivotgrid .e-sorting{
   & when (@skin = "material") {
    margin-left:8px;
   }
   & when (@skin = "office-365") {
    margin-left:8px;
   }
}
@{e-js}.e-pivotgrid .e-pivotButton .e-btn.e-select.e-hoverBtn{
   & when (@skin = "office-365") {
    background-color:@theme-lighter;
   }
}
@{e-js}.e-pivotgrid .e-removeBtn {
   & when (@skin = "material") {
    margin-right: 4px;
   }
   & when (@skin = "office-365") {
    margin-right: 4px;
    margin-left:8px;
    margin-top:4px;
   }
}
@{e-js}.e-pivotgrid .filter{
   & when (@skin = "office-365") {
    margin-left:8px;
   }
}
@{e-js}.e-pivotgrid .e-pvtBtnIndent{
   & when (@skin = "office-365") {
    margin-left:25px !important;
   }
}
@{e-js}.e-pivotgrid .e-pvtBtnSort {
   & when (@skin = "office-365") {
     margin-top: -20px !important; 
  }
}
@{e-js}.e-pivotgrid .e-sorting{
   & when (@skin = "office-365") {
    margin-top:5px;
    float:left;
   }
}
@{e-js}.e-pivotgrid .e-pivotButton .e-pvtBtn+.e-removeBtn{
   & when (@skin = "material") {
    margin-left: 32px;
   }
}
@{e-js}.e-pivotgrid .summary{
   & when (@skin = "material") {
    padding-left:14px;
    padding-right:40px;
   }
}
@{e-js}.e-pivotgrid .summary.value{
 & when (@skin= "material") {
    padding: 11px 24px 11px 35px;
 }
}
@{e-js}.e-pivotgrid.e-rtl .summary{
   & when (@skin = "material") {
    padding-left:40px;
    padding-right:24px;
   }
}
@{e-js}.e-pivotgrid .filter:active, @{e-js}.e-pivotgrid .e-sorting:active, @{e-js}.e-pivotgrid .e-removeBtn:active{
   & when (@skin = "material") {
    color:@primary-font-color;
   }
}
@{e-js}.e-pivotgrid .e-sorting:after,@{e-js}.e-pivotgrid .filter:after,@{e-js}.e-pivotgrid .e-removeBtn:after{
   & when (@skin = "material") {
    background-color:@primary-font-color;
   }
}
@{e-js}.e-pivotgrid .e-pivotButton .e-btn.e-select:active,@{e-js}.e-pivotgrid .e-pivotButton:active{
   & when (@skin = "material") {
    box-shadow:none;
    border-radius:25px;
   }
   & when (@skin = "office-365") {
    background-color:@theme-lighter;
    color:@theme-light-font;
   }
}
@{e-js}.e-pivotgrid .e-hScrollThumb:active,@{e-js}.e-pivotgrid .e-vScrollThumb:active{
   & when (@skin = "material") {
    background-color:@grey-600;
    border:.5px solid @grey-700;
   }
}
@{e-js}.e-pivotgrid .e-hScrollPanel:hover{
   & when (@skin = "material") {
    border-bottom:.5px solid @grey-300;
   }
}
@{e-js}.e-pivotgrid .e-vScrollPanel:hover{
   & when (@skin = "material") {
    border-left:.5px solid @grey-300;
   }
}
@{e-js}.e-pivotgrid .dragClone.e-btn.e-select{
   & when (@skin = "material") {
    background:@grey-200;
    font-size:13px;
    height:32px;
    font-weight:normal;
    color:fade(@base-font-color,54%);
    border-radius:25px;
    padding:0px 12px;
    padding-bottom:1px;
    width:auto !important;
    box-shadow:none;
   }
   & when (@skin = "office-365") {
    background:@theme-lighter;
    font-size:14px;
    height:26px;
    font-family:@font-family;
    color:@theme-light-font;
    padding:0px 8px;
    width:auto !important;
   }
}
/*@{e-js}.e-pivotgrid .e-pivotButton:hover .e-icon,@{e-js}.e-pivotgrid .e-pivotButton .e-btn.e-select .e-icon,@{e-js}.e-pivotgrid .e-pivotButton:active .e-icon,@{e-js}.e-pivotgrid .e-pivotButton .e-btn.e-select:active .e-icon{
    color:fade(@primary-font-color,70%);
}*/
@{e-js}.e-pivotgrid .e-btn.e-select:active .e-icon,@{e-js}.e-pivotgrid .e-btn.e-select:hover .e-icon{
   & when (@skin = "material") {
    color:fade(@primary-font-color,70%);
   }
    & when (@skin = "office-365") {
    color:@theme-light-font;
   }
}
@{e-js}.e-pivotgrid .values .e-pivotButton,@{e-js}.e-pivotgrid .e-rows .e-pivotButton,@{e-js}.e-pivotgrid .columns .e-pivotButton{
   & when (@skin = "material") {
    margin-top:6px !important;
    margin-bottom:6px !important;
    margin-left:10px;
   }
   & when (@skin = "office-365") {
    margin-left: 8px;
    margin-top:5px;
    margin-bottom: 5px;
   }
}
@{e-js}.e-pivotgrid .e-drag .e-pivotButton{
   & when (@skin = "material") {
    margin-top:-6px !important;
    margin-bottom:-6px !important;
    margin-right:10px;
   }
   & when (@skin = "office-365") {
    margin-left: 8px;
    margin-top:1px;
    margin-bottom: 1px;
   }
}
@{e-js}.e-pivotgrid #grpvalue + span,@{e-js}.e-pivotgrid #grpcol + span,@{e-js}.e-pivotgrid #grpdrag + span ,@{e-js}.e-pivotgrid .e-rows > span:first-child{
   & when (@skin = "material") {
    margin-left: 10px;
    margin-top:20px;
    margin-bottom:6px;
   }
   & when (@skin = "office-365") {
    margin-left: 10px;
   }
}
@{e-js}.e-pivotgrid .e-drag > span:first-child{
   & when (@skin = "material") {
    margin-left: 10px;
   }
      & when (@skin = "office-365") {
    margin-left: 10px;
   }
}
@{e-js}.e-pivotgrid.e-rtl .value {
   & when (@skin = "material") {
    text-align: left !important;
    padding: 11px 35px 11px 24px;
   }
   & when (@skin = "office-365") {
    text-align: left !important;
    padding:  6px 16px 6px 8px;
   }
}
@{e-js}.e-pivotgrid.e-rtl table .e-expand, @{e-js}.e-pivotgrid.e-rtl table .e-collapse{
   & when (@skin = "material") {
    margin-left:12px;
    margin-right:-14px;
   }
}
@{e-js}.e-pivotgrid.e-rtl table .summary .e-expand{
   & when (@skin = "material") {
    margin-left:12px;
    margin-right:-14px;
   }
}
@{e-js}.e-pivotgrid.e-rtl .e-pivotButton .e-btn{
   & when (@skin = "material") {
    margin-left:0px;
    margin-right:12px;
   }
   & when (@skin = "office-365") {
    margin-left:0px;
    margin-right:8px;
   }
}
@{e-js}.e-pivotgrid.e-rtl .filter{
   & when (@skin = "material") {
    margin-left:0px;
    margin-right:32px;
   }
   & when (@skin = "office-365") {
    margin-left:0px;
    margin-right:8px;
   }
}
@{e-js}.e-pivotgrid.e-rtl .values .e-removeBtn,@{e-js}.e-pivotgrid.e-rtl .e-pivotButton .e-pvtBtn+.e-removeBtn{
   & when (@skin = "material") {
    margin-left:4px;
    margin-right:32px;
   }
}
@{e-js}.e-pivotgrid.e-rtl .e-removeBtn{
   & when (@skin = "material") {
    margin-right:8px;
    margin-left:4px;
   }
   & when (@skin = "office-365") {
    margin-left:4px;
    margin-right:8px;
   }
}
 @{e-js}.e-pivotgrid.e-rtl .e-sorting{
   & when (@skin = "material") {
    margin-right:8px;
    margin-left:0px;
   }
   & when (@skin = "office-365") {
    margin-top:5px;
    float:right;
    margin-right:8px;
    margin-left:0px;
   }
}

@{e-js}.e-pivotgrid.e-rtl .emptyPivotGrid .emptyRows .e-rows{
   & when (@skin = "material") and (@skin = "office-365")  {
    padding-right:15px !important;
    padding-left:0px !important;
   }   
}
@{e-js}.e-pivotgrid.e-rtl #grpvalue + span,@{e-js}.e-pivotgrid.e-rtl #grpcol + span,@{e-js}.e-pivotgrid.e-rtl #grpdrag + span ,@{e-js}.e-pivotgrid.e-rtl .e-rows > span:first-child{
   & when (@skin = "material") {
    margin-right:10px;
    margin-left:0px;
   }
   & when (@skin = "office-365") {
    margin-right:10px;
    margin-left:0px;
   }
}
@{e-js}.e-pivotgrid.e-rtl .values .e-pivotButton,@{e-js}.e-pivotgrid.e-rtl .e-rows .e-pivotButton,@{e-js}.e-pivotgrid.e-rtl .columns .e-pivotButton,@{e-js}.e-pivotgrid.e-rtl .e-drag .e-pivotButton{
   & when (@skin = "material") {
    margin-right:10px;
   }
   & when (@skin = "office-365") {
    margin-right:8px;
   }
   & when not (@skin = "office-365") and not (@skin = "material") {
    margin-right:5px;    
   }
   margin-left:0px;
}
@{e-js}.e-pivotgrid #clientDialog_wrapper.e-advancedFilterDlg .e-scroller>.e-content:not([id$="_fieldCollection_container"]), @{e-js}.e-pivotschemadesigner #clientDialog_wrapper.e-advancedFilterDlg .e-scroller>.e-content {
   & when (@skin = "material") {
    overflow: visible !important;
   }
}
   
@{e-js}.e-pivotgrid .e-dlgCalculatedField .editFormula 
{
   & when (@skin = "material") {
    margin-left:-65px !important;
   }
}

@{e-js}.e-pivotgrid  .e-dialog.e-rtl .e-dlgCalculatedField .editFormula{
   & when (@skin = "material") {
    margin-right:-65px !important;
   }
}
@{e-js}.e-pivotgrid .valueSorting{
   & when (@skin = "material") {
    color:fade(@base-font-color,87%) !important;
   }
}
@{e-js}.e-pivotgrid  .e-dialog.e-rtl .e-dlgCalculatedField .calculateFieldName{
   & when (@skin = "material") {
    margin-left:65px !important;
   }
}
@{e-js}.e-pivotgrid .emptyPivotGrid .e-drag ,@{e-js}.e-pivotgrid .emptyPivotGrid .valueColumn,@{e-js}.e-pivotgrid .emptyPivotGrid .valueColumn .values,@{e-js}.e-pivotgrid .emptyPivotGrid .valueColumn .columns ,@{e-js}.e-pivotgrid .emptyPivotGrid .emptyRows  ,@{e-js}.e-pivotgrid .emptyPivotGrid .emptyRows .e-rows  {
   & when (@skin = "material") {
    background-color:@primary-color-50;
    color:fade(@primary-font-color-50,87%);
    border-color:@primary-font-color;
   }
}

@{e-js}.e-pivotgrid .emptyPivotGrid  .emptyRows{
   & when (@skin = "material") {
    padding:0px;
   }
}
@{e-js}.e-pivotgrid .emptyPivotGrid  .emptyRows .e-rows{
   & when (@skin = "material") {
    padding-left:15px;
    height:45px;
    vertical-align:middle;
   }
      & when (@skin = "office-365") {
    padding-left:15px;
   }
   & when not (@skin = "material") and not (@skin = "office-365"){
     padding-left:5px;
     padding-right:5px;
   } 
}
@{e-js}.e-pivotgrid .emptyPivotGrid .values span,@{e-js}.e-pivotgrid .emptyPivotGrid .columns span{
   & when (@skin = "material") {
    padding-left:10px;   
    margin-top:50px;
    vertical-align:middle;
   }
   & when (@skin = "office-365") {
    margin-top:22px;
    padding-left:10px;
   }
}
@{e-js}.e-pivotgrid.e-rtl .emptyPivotGrid .values span,@{e-js}.e-pivotgrid.e-rtl .emptyPivotGrid .columns span{
   & when (@skin = "material") and (@skin = "office-365") {
    padding-right:10px;   
    padding-left:0px;
   }   
}
@{e-js}.e-pivotgrid .emptyPivotGrid .values{
   & when (@skin = "material") {
    padding: 0px;
    height:45px;
   }
}
@{e-js}.e-pivotgrid .emptyPivotGrid .columns{
   & when (@skin = "material") {
    height:45px;
    padding:0px 19px 0px 0px;
   }
}
@{e-js}.e-pivotgrid .emptyPivotGrid .e-drag:hover ,@{e-js}.e-pivotgrid .emptyPivotGrid .valueColumn:hover,@{e-js}.e-pivotgrid .emptyPivotGrid .valueColumn .values:hover,@{e-js}.e-pivotgrid .emptyPivotGrid .valueColumn .columns:hover ,@{e-js}.e-pivotgrid .emptyPivotGrid .emptyRows:hover  ,@{e-js}.e-pivotgrid .emptyPivotGrid .emptyRows .e-rows:hover  {
   & when (@skin = "material") {
    background-color:@primary-color-100;
   }
}
.e-dragedNode.pivotTreeViewDragedNode{
   & when (@skin = "material") {
    background:@grey-200;
    font-size:13px;
    font-weight:normal;
    color:fade(@base-font-color,54%);
    border-radius:25px;
    padding-right:12px; 
    box-shadow:none !important;
    text-transform:none;
  }
}

@{e-js}.e-pivotschemadesigner .e-dialog .e-editorTreeView .e-ul{
   & when (@skin = "material") {
    padding:0px 0px 0px 24px;
   }
}
@{e-js}.e-pivotgrid .filterDialog #filterValue1,@{e-js}.e-pivotgrid .filterDialog #filterValue2 {
   & when (@skin = "material") {
    background:inherit;
    color:fade(@base-font-color,87%);
    border: none;
    border-bottom: 1px solid fade(@base-font-color,12%);
    outline: none;
   }
}
@{e-js}.e-pivotgrid .filterDialog #filterValue1:active, @{e-js}.e-pivotgrid .filterDialog #filterValue1:focus,@{e-js}.e-pivotgrid .filterDialog #filterValue2:active,@{e-js}.e-pivotgrid .filterDialog #filterValue2:focus{
   & when (@skin = "material") {
    border-bottom:2px solid @accent-color;
   }
}

@{e-js}.e-pivotgrid .filterDialog #filterValue1:disabled,@{e-js}.e-pivotgrid .filterDialog #filterValue2:disabled{
   & when (@skin = "material") {
    border:none;
    border-bottom:1px solid fade(@base-font-color,12%);
    color:fade(@base-font-color,12%);
   }
}

@{e-js}.e-pivotgrid .filterDialog td .e-ddl,@{e-js}.e-pivotgrid .filterDialog #filterValue1,@{e-js}.e-pivotgrid .filterDialog #filterValue2{
   & when (@skin = "material") {
    margin-top:24px
   }
}
@{e-js}.e-pivotgrid .e-conditionFrom:active, @{e-js}.e-pivotgrid .e-conditionTo:active,@{e-js}.e-pivotgrid .e-conditionFrom:focus,@{e-js}.e-pivotgrid .e-conditionTo:focus{
   & when (@skin = "material") {
    border-bottom:2px solid @accent-color;
   }
}

@{e-js}.e-pivotgrid .e-conditionFrom:disabled,@{e-js}.e-pivotgrid .e-conditionTo:disabled{
   & when (@skin = "material") {
    border:none;
    border-bottom:1px solid fade(@base-font-color,12%);
    color:fade(@base-font-color,12%);
   }
}
/*@{e-js}.e-pivotgrid .e-conditionFrom:active, @{e-js}.e-pivotgrid .e-conditionTo:active,@{e-js}.e-pivotgrid .e-conditionFrom:hover,@{e-js}.e-pivotgrid .e-conditionTo:hover{
    border-bottom:1px solid fade(@base-font-color,12%);
}*/
@{e-js}.e-pivotgrid .e-dialog .e-btn,@{e-js}.e-pivotschemadesigner .e-dialog .e-btn,@{e-js}.e-pivotschemadesigner .btnDeferUpdate{
   & when (@skin = "material") {
    background: none;
    color: @accent-color;
    box-shadow: none;
    border: none;
    padding: 0px 12px;
    font-size:14px;
	text-overflow:ellipsis;
	overflow:hidden;
   }
}
@{e-js}.e-pivotgrid .e-dialog .e-dialogOKBtn, @{e-js}.e-pivotgrid .e-dialog .e-dialogCancelBtn {
   & when (@skin = "material") {    
    margin-bottom: 4px;
   }
}
@{e-js}.e-pivotgrid .e-dialog .e-btn.e-disable,@{e-js}.e-pivotgrid .e-dialog .e-btn.e-disable:hover,@{e-js}.e-pivotgrid .e-dialog .e-btn.e-disable:focus,@{e-js}.e-pivotgrid .e-dialog .e-btn.e-disable:active,@{e-js}.e-pivotschemadesigner .e-dialog .e-btn.e-disable,@{e-js}.e-pivotschemadesigner .e-dialog .e-btn.e-disable:focus,@{e-js}.e-pivotschemadesigner .e-dialog .e-btn.e-disable:hover,@{e-js}.e-pivotschemadesigner .e-dialog .e-btn.e-disable:active,@{e-js}.e-pivotschemadesigner .btnDeferUpdate.e-disable,@{e-js}.e-pivotschemadesigner .btnDeferUpdate.e-disable,@{e-js}.e-pivotschemadesigner .btnDeferUpdate.e-disable:hover,@{e-js}.e-pivotschemadesigner .btnDeferUpdate.e-disable:focus,@{e-js}.e-pivotschemadesigner .btnDeferUpdate.e-disable:active{
   & when (@skin = "material") {
    color:fade(@base-font-color,26%);
    background: none !important;
   }
}
@{e-js}.e-pivotgrid .e-dialog .calculatorFields,@{e-js}.e-pivotgrid .e-dialog .calculatorFields:hover,@{e-js}.e-pivotgrid .e-dialog .calculatorFields:focus{
   & when (@skin = "material") {
    padding:0px !important;
   }
}
@{e-js}.e-pivotgrid .e-dialog .e-btn:hover,@{e-js}.e-pivotschemadesigner .e-dialog .e-btn:hover,@{e-js}.e-pivotgrid .e-dialog .e-btn:focus,@{e-js}.e-pivotschemadesigner .e-dialog .e-btn:focus,@{e-js}.e-pivotschemadesigner .btnDeferUpdate:hover,@{e-js}.e-pivotschemadesigner .btnDeferUpdate:focus{
   & when (@skin = "material") {
    color: @accent-color;
    border: none;
    background-color: fade(@base-font-color,12%);
    border-radius: 0;
    box-shadow: none;
    padding: 0px 12px;
   }
}
@{e-js}.e-pivotgrid .e-dialog .e-btn:active,@{e-js}.e-pivotschemadesigner .e-dialog .e-btn:active,@{e-js}.e-pivotschemadesigner .btnDeferUpdate:active{
   & when (@skin = "material") {
    background-color:fade(@accent-color,12%);
   }
}
#PivotSchemaDesigner_dragClone{
   & when (@skin = "material") {
    background:@grey-200;
    font-size:13px;
    font-weight:normal;
    color:fade(@base-font-color,54%);
    border-radius:25px;
    padding:0px 12px; 
    box-shadow:none;
    text-transform:none;
    height:32px !important;
   }
}
    
@{e-js}.e-pivotschemadesigner.e-rtl .e-pivotButton{
   & when (@skin = "material") {
    margin-left:0px;
    margin-right:12px;
    float:right;
    clear:right;
   }
   & when (@skin = "office-365") {
    margin-left:0px;
    margin-right:8px;
    float:right;
    clear:right;
   }
}
@{e-js}.e-pivotschemadesigner .e-treeview ul{
   & when (@skin = "material") {
    padding-left:8px;
   }
}
@{e-js}.e-pivotschemadesigner .e-axisTd1 .e-schemaFilter, @{e-js}.e-pivotschemadesigner .e-axisTd1 .e-schemaRow, @{e-js}.e-pivotschemadesigner  .e-axisTd1 .e-pivotHeader, @{e-js}.e-pivotschemadesigner  .e-axisTd1 .e-rPivotHeader
{
   & when (@skin = "material") {
    margin-left:0px;
   }
}
@{e-js}.e-pivotschemadesigner .e-axisTd2 .e-schemaValue, @{e-js}.e-pivotschemadesigner .e-axisTd2 .e-schemaColumn, @{e-js}.e-pivotschemadesigner  .e-axisTd2 .e-pivotHeader, @{e-js}.e-pivotschemadesigner  .e-axisTd2 .e-rPivotHeader{
   & when (@skin = "material") {
    margin-left:14px;
   }
}
@{e-js}.e-pivotschemadesigner .e-pivotButton .e-btn.e-select{
   & when (@skin = "material") {
    background:@grey-300;
    font-size:13px;
    color:fade(@base-font-color,87%);
    text-transform:none;
    padding:0px 12px;
    padding-bottom:1px;
   }
   & when (@skin = "office-365") {
    background:@neutral-lighter;
    font:14px @font-family;
    color:@theme-light-font;
    padding:0px 8px;
   }
}
@{e-js}.e-pivotschemadesigner .e-pivotButton .e-pvtBtn,@{e-js}.e-pivotschemadesigner .e-pivotButton .e-pvtBtn:hover,@{e-js}.e-pivotschemadesigner .e-pivotButton .e-pvtBtn:active{
   & when (@skin = "material") {
    box-shadow:none;
    width:auto !important;
    border-radius:25px;
   }
       & when (@skin= "office-365") {
        /* office-365*/
        width:auto !important;
        padding:0px 8px;
       }
}
@{e-js}.e-pivotschemadesigner .e-pivotButton{
   & when (@skin = "material") {
    margin-left:12px;
    width: 96%;
    display: inline-block;
    float: left;
    clear: left;
   }
       & when (@skin= "office-365") {
        /* office-365*/
        margin-left:8px;
        width: 96%;
        display: inline-block;
        float: left;
        clear: left;
       }
}
@{e-js}.e-pivotschemadesigner #rowlabel + div, @{e-js}.e-pivotschemadesigner #columnlabel + div, @{e-js}.e-pivotschemadesigner #valuelabel + div ,@{e-js}.e-pivotschemadesigner #reportfilter + div{
   & when (@skin = "material") {
    margin-top:6px;
   }
     & when (@skin= "office-365") {
       margin-top:8px;
       }
}
@{e-js}.e-pivotschemadesigner .e-pivotButton .pvtBtnDiv,@{e-js}.e-pivotschemadesigner .e-pivotButton .e-pvtBtn{
       & when (@skin = "material") {
        display:inline-block;
        border-radius:25px;
       }
}
@{e-js}.e-pivotschemadesigner .e-pivotButton .e-pvtBtn:hover, @{e-js}.e-pivotschemadesigner .e-pivotButton .e-pvtBtn:active
{
   & when (@skin = "material") {
    background-color:@grey-600;
    color:@primary-font-color;
    font-size:13px;
   }
   & when (@skin = "office-365") {
    background-color:@neutral-light;
    color:@theme-light-font;
    font:14px @font-family;
   }
}
@{e-js}.e-pivotschemadesigner .e-dropIndicator+.e-pvtBtn{
   & when (@skin = "material") {
    margin-top:10px;
   }
}
@{e-js}.e-pivotschemadesigner .e-listHeader .headerText{
   & when (@skin = "material") {
    font-size:16px;
   }
}
@{e-js}.e-pivotgrid .summary.calc,@{e-js}.e-pivotgrid .summary.calc:hover {
      & when (@skin= "office-365") {
        font:14px @font-family Semibold;
        background-color:@neutral-light;
    }
}
@{e-js}.e-pivotgrid table .e-expand.e-icon:before, @{e-js}.e-pivotgrid table .e-collapse.e-icon:before{
  & when (@skin= "office-365") {
    width:8px;
  }
}
@{e-js}.e-pivotgrid.e-rtl table .e-expand, @{e-js}.e-pivotgrid.e-rtl table .e-collapse{
  & when (@skin= "office-365") {
    margin-left:15px;
    margin-right: 8px;
  }
}
@{e-js}.e-pivotgrid.e-rtl .colheader, @{e-js}.e-pivotgrid.e-rtl .colheader:hover, @{e-js}.e-pivotgrid.e-rtl .rowheader, @{e-js}.e-pivotgrid.e-rtl .rowheader:hover,@{e-js}.e-pivotgrid.e-rtl .calc, @{e-js}.e-pivotgrid.e-rtl .calc:hover{
  & when (@skin= "office-365") {
padding:6px 0 6px 40px;
  }
}
@{e-js}.e-pivotgrid.e-rtl th, @{e-js}.e-pivotgrid.e-rtl td {
  & when (@skin= "office-365") {
  padding: 6px 0px 6px 8px;
 }
}
@{e-js}.e-pivotschemadesigner .e-pivotButton:first-child{
  & when (@skin= "office-365") {
  margin-top: 8px;
 }
}
@{e-js}.e-pivotschemadesigner .e-pivotHeader .headerText , @{e-js}.e-pivotschemadesigner .e-rPivotHeader .headerText {
      & when (@skin= "office-365") {
    font: 14px @font-family;
    color: @theme-light-font;
    margin-left:8px;
 }
}
@{e-js}.e-pivotschemadesigner.e-rtl .e-pivotHeader .headerText , @{e-js}.e-pivotschemadesigner.e-rtl .e-rPivotHeader .headerText {
      & when (@skin= "office-365") {
    margin-right:8px;
    margin-left:0px;
 }
}
@{e-js}.e-pivotschemadesigner .btnDeferUpdate,@{e-js}.e-pivotschemadesigner .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid .e-dlgCalculatedField+div .e-btn:first-child{
   & when (@skin = "office-365"){
       background-color: @theme-primary;
       color:@theme-primary-font;
       border:1px @theme-primary;
   }    
}
@{e-js}.e-pivotschemadesigner .btnDeferUpdate:hover,@{e-js}.e-pivotschemadesigner .e-btn.e-dialogOKBtn:hover,@{e-js}.e-pivotgrid .e-btn.e-dialogOKBtn:hover,@{e-js}.e-pivotgrid .e-dlgCalculatedField+div .e-btn:first-child:hover{
   & when (@skin = "office-365"){
       background-color: @theme-dark;
       color:@theme-primary-font;
       border:1px @theme-dark;
   }    
}
@{e-js}.e-pivotschemadesigner .btnDeferUpdate:focus,@{e-js}.e-pivotschemadesigner .e-btn.e-dialogOKBtn:focus,@{e-js}.e-pivotgrid .e-btn.e-dialogOKBtn:focus,@{e-js}.e-pivotgrid .e-dlgCalculatedField+div .e-btn:first-child:focus {
   & when (@skin = "office-365"){
       background-color: @theme-dark;
       color:@theme-primary-font;
       border:1px @theme-primary;
   }    
}
@{e-js}.e-pivotschemadesigner .btnDeferUpdate:active,@{e-js}.e-pivotschemadesigner .e-btn.e-dialogOKBtn:active,@{e-js}.e-pivotgrid .e-btn.e-dialogOKBtn:active,@{e-js}.e-pivotgrid .e-dlgCalculatedField+div .e-btn:first-child:active {
   & when (@skin = "office-365"){
       background-color: @theme-primary;
       color:@theme-primary-font;
       border:1px @theme-primary;
   }    
}
@{e-js}.e-pivotgrid .e-dlgCalculatedField+div .e-btn.e-disable,@{e-js}.e-pivotgrid .e-dlgCalculatedField+div .e-btn.e-disable:hover,@{e-js}.e-pivotgrid .e-dlgCalculatedField+div .e-btn.e-disable:active{
   & when (@skin = "office-365"){
       background-color:@neutral-lighter;
       color:@neutral-tertiary;
       border:1px @neutral-lighter;
   }    
}
@{e-js}.e-pivotschemadesigner.e-rtl{
   & when (@skin = "office-365"){
       padding:15px 15px 15px 5px;
   }    
}
@{e-js}.e-pivotschemadesigner.e-rtl .e-listHeader{
       & when (@skin = "office-365"){
       margin-right:0px;
       margin-left:10px;
   }    
}
@{e-js}.e-pivotschemadesigner.e-rtl .e-schemaFilter, @{e-js}.e-pivotschemadesigner.e-rtl .e-schemaRow, @{e-js}.e-pivotschemadesigner.e-rtl .e-pivotHeader{
    & when (@skin = "office-365"){
       margin-right:4px;
   }    
}
 /*@{e-js}.e-pivotgrid .e-treeview-wrap .e-item div>.e-chkbox-wrap,@{e-js}.e-pivotschemadesigner .e-treeview-wrap .e-item div>.e-chkbox-wrap{
    & when (@skin = "office-365"){
       margin-left:0px;
   }    
}
 @{e-js}.e-pivotgrid .e-treeview-wrap .e-treeview-ul li.e-item div>.e-chkbox-wrap,@{e-js}.e-pivotschemadesigner .e-treeview-wrap  .e-treeview-ul li.e-item div>.e-chkbox-wrap,@{e-js}.e-pivotgrid .e-treeview-wrap li.e-item div>.e-icon+.e-chkbox-wrap,@{e-js}.e-pivotschemadesigner .e-treeview-wrap  li.e-item div>.e-icon+.e-chkbox-wrap{
    & when (@skin = "office-365"){
       margin-left:16px;
   }    
}
  @{e-js}.e-pivotgrid.e-rtl .e-treeview-wrap.e-rtl .e-item div>.e-chkbox-wrap,@{e-js}.e-pivotschemadesigner.e-rtl .e-treeview-wrap.e-rtl .e-item div>.e-chkbox-wrap{
    & when (@skin = "office-365"){
       margin-right:0px;
   }    
}
 @{e-js}.e-pivotgrid.e-rtl .e-treeview-wrap.e-rtl .e-treeview-ul li.e-item div>.e-chkbox-wrap,@{e-js}.e-pivotschemadesigner.e-rtl .e-treeview-wrap.e-rtl  .e-treeview-ul li.e-item div>.e-chkbox-wrap,@{e-js}.e-pivotgrid.e-rtl .e-treeview-wrap.e-rtl ul li.e-item div>.e-icon+.e-chkbox-wrap,@{e-js}.e-pivotschemadesigner.e-rtl .e-treeview-wrap.e-rtl  li.e-item div>.e-icon+.e-chkbox-wrap{
    & when (@skin = "office-365"){
       margin-right:16px;
   }    
}*/
@{e-js}.e-pivotschemadesigner .e-schemaFieldTree.e-treeview-wrap .e-item div>.e-chkbox-wrap{
    & when (@skin = "office-365"){
       margin-left:0px;
   }    
}
@{e-js}.e-pivotschemadesigner .e-schemaFieldTree.e-treeview-wrap  .e-treeview-ul li.e-item div>.e-chkbox-wrap,@{e-js}.e-pivotschemadesigner .e-schemaFieldTree.e-treeview-wrap  li.e-item div>.e-icon+.e-chkbox-wrap{
    & when (@skin = "office-365"){
       margin-left:16px;
   }    
}
@{e-js}.e-pivotschemadesigner.e-rtl .e-schemaFieldTree.e-treeview-wrap.e-rtl .e-item div>.e-chkbox-wrap{
    & when (@skin = "office-365"){
       margin-right:0px;
   }    
}
@{e-js}.e-pivotschemadesigner.e-rtl .e-schemaFieldTree.e-treeview-wrap.e-rtl  .e-treeview-ul li.e-item div>.e-chkbox-wrap,@{e-js}.e-pivotschemadesigner.e-rtl .e-schemaFieldTree.e-treeview-wrap.e-rtl  li.e-item div>.e-icon+.e-chkbox-wrap{
    & when (@skin = "office-365"){
       margin-right:16px;
   }    
}
 @{e-js}.e-pivotschemadesigner .e-editorDiv,@{e-js}.e-pivotgrid .e-editorDiv
{
    & when (@skin = "office-365"){
      margin-bottom: 8px;
    }
}
 @{e-js}.e-pivotschemadesigner.e-rtl .e-dialogCancelBtn,@{e-js}.e-pivotgrid.e-rtl .e-dialogCancelBtn
{
    & when (@skin = "office-365") {
      margin-left: 0px;
    }
}
 @{e-js}.e-pivotgrid .e-dialogOKBtn, @{e-js}.e-pivotgrid .e-dialogCancelBtn
{
    & when (@skin = "office-365") {
      margin-left: 8px;
      margin-bottom:14px;
    }
}
 @{e-js}.e-pivotgrid .e-dlgCalculatedField .e-btn.e-select:active .e-icon.e-sigma{
    & when (@skin = "office-365") {
     color:@theme-light-font;
    }
 }
  @{e-js}.e-pivotgrid .e-dlgCalculatedField+div{
    & when (@skin = "office-365") {
     margin-top:20px !important;
     margin-bottom:20px !important;
    }
 }
  @{e-js}.e-pivotgrid .e-conditionFrom:hover,@{e-js}.e-pivotgrid .filterDialog input.e-filterValues:hover, @{e-js}.e-pivotschemadesigner .filterDialog input.e-filterValues:hover, @{e-js}.e-pivotgrid .e-conditionTo:hover{
            & when (@skin = "office-365") {
          border-color: @neutral-secondary-alt;
      }
} 
  @{e-js}.e-pivotgrid .e-conditionFrom:active,  @{e-js}.e-pivotgrid .e-conditionTo:active,@{e-js}.e-pivotgrid .filterDialog input.e-filterValues:active, @{e-js}.e-pivotschemadesigner .filterDialog input.e-filterValues:active,@{e-js}.e-pivotgrid .filterDialog input.e-filterValues:focus, @{e-js}.e-pivotschemadesigner .filterDialog input.e-filterValues:focus,@{e-js}.e-pivotgrid .e-conditionFrom:focus,  @{e-js}.e-pivotgrid .e-conditionTo:focus{
            & when (@skin = "office-365") {
          border-color: @theme-primary;
      }
}
 @{e-js}.e-pivotgrid .conditionformatTbl label{
  & when (@skin = "office-365") {
    margin:0px 8px 0px 0px !important ;
    padding-bottom:15px;
        font: 12px @font-family;
  }
}
@{e-js}.e-pivotgrid .conditionformatTbl .e-ddl{
  & when (@skin = "office-365") {
    margin-right:15px;
    margin-bottom:15px;
    width:160px !important;
  }
}
@{e-js}.e-pivotgrid .conditionformatTbl th,@{e-js}.e-pivotgrid .conditionformatTbl td{
  & when (@skin = "office-365") {
    padding:0px;
  }
}
@{e-js}.e-pivotgrid .e-conditionDlg{
  & when (@skin = "office-365") {
    margin:0px !important;
  }
}
@{e-js}.e-pivotgrid .e-conditionDlg + div{
  & when (@skin = "office-365") {
    margin:20px 0px 20px 0px !important;
  }
}
    @{e-js}.e-pivotgrid .e-dialogremoveBtn{
       & when (@skin = "office-365") {
        padding:0px !important ;
        margin-bottom:15px;
        background:@neutral-white;
      }
    }
@{e-js}.e-pivotgrid.e-rtl .conditionformatTbl .e-ddl, @{e-js}.e-pivotgrid.e-rtl .conditionformatTbl label
{
  & when (@skin = "office-365") {
    margin-right:0px !important;
    margin-left:15px !important;
  }
}
@{e-js}.e-pivotgrid .e-filterElementTag a.e-menulink,@{e-js}.e-pivotschemadesigner .e-filterElementTag a.e-menulink {
       & when (@skin = "office-365"){
    padding-right: 30px !important;
    padding-left: 30px !important;
    }
}
@{e-js}.e-pivotgrid.e-advancedFilterDlg .e-ddlGroupWrap, @{e-js}.e-pivotgrid .e-advancedFilterDlg .e-menu-wrap,@{e-js}.e-pivotschemadesigner.e-advancedFilterDlg .e-ddlGroupWrap, @{e-js}.e-pivotschemadesigner .e-advancedFilterDlg .e-menu-wrap  {
       & when (@skin = "office-365"){
    padding-left: 12px !important;
    padding-right: 12px !important;
    }
}
@{e-js}.e-pivotgrid .e-advancedFilterDlg .e-memberSearchEditorDiv,@{e-js}.e-pivotschemadesigner .e-advancedFilterDlg .e-memberSearchEditorDiv  {
       & when (@skin = "office-365"){
         padding:12px 12px 0px 12px !important;
    }
}
@{e-js}.e-pivotgrid .clientDialog .e-menu.e-vertical .e-list>.e-menulink>span.e-icon.e-arrowhead-right,    @{e-js}.e-pivotschemadesigner .clientDialog .e-menu.e-vertical .e-list>.e-menulink>span.e-icon.e-arrowhead-right  {
       & when (@skin = "office-365"){
    right: 0px !important;
    top:0px !important;
    }
}
@{e-js}.e-pivotgrid .filterDialog .e-ddl, @{e-js}.e-pivotschemadesigner .filterDialog .e-ddl {
       & when (@skin = "office-365"){
    width: 200px !important;
    height: 32px !important;
    }
}
@{e-js}.e-pivotgrid .filterDialog td, @{e-js}.e-pivotschemadesigner .filterDialog td {
       & when (@skin = "office-365"){
    padding-right: 15px !important;
    }
}
@{e-js}.e-pivotgrid .filterDialog input.e-filterValues, @{e-js}.e-pivotschemadesigner .filterDialog input.e-filterValues {
       & when (@skin = "office-365"){
    width: 160px !important;
    height: 25px !important;
    margin-left: 0 !important;
    border:1px solid @neutral-tertiary-alt;
    outline:none;
    }
}
@{e-js}.e-pivotgrid .filterDialog .e-dialogCancelBtn, @{e-js}.e-pivotschemadesigner .filterDialog .e-dialogCancelBtn {
	margin-right: 10px;
       & when (@skin = "office-365"){
    margin-right: 14px !important;
    }
}
@{e-js}.e-pivotgrid.e-rtl .filterDialog .e-dialogCancelBtn, @{e-js}.e-pivotschemadesigner.e-rtl .filterDialog .e-dialogCancelBtn {
       & when (@skin = "office-365"){
    margin-right: 0px !important;
    }
}
@{e-js}.e-pivotgrid .e-dlgCalculatedField .e-ddl{
   & when (@skin = "office-365"){
    margin-right:15px;
    margin-bottom:15px;
  }
}

@{e-js}.e-pivotgrid .e-dlgCalculatedField .borderLine{
   & when (@skin = "office-365"){
    display:none !important;
   }
}

@{e-js}.e-pivotgrid .e-dlgCalculatedField .e-fieldTable .e-btn{
  & when (@skin = "office-365"){
    margin-top:8px;
  }
}
@{e-js}.e-pivotgrid .e-dlgCalculatedField .e-ddl-popup.e-wrap{
  & when (@skin = "office-365"){
    width:410px !important;
  }
}
@{e-js}.e-pivotgrid .e-dlgCalculatedField .e-btn.calculatorFields:hover,@{e-js}.e-pivotgrid .conditionformatTbl .e-btn.e-dialogremoveBtn:hover {
  & when (@skin = "office-365"){
     background-color:@neutral-lighter;
  }
}
@{e-js}.e-pivotgrid .e-dlgCalculatedField .e-btn.calculatorFields:active,@{e-js}.e-pivotgrid .e-dlgCalculatedField .e-btn.calculatorFields:focus,@{e-js}.e-pivotgrid .conditionformatTbl .e-btn.e-dialogremoveBtn:active,@{e-js}.e-pivotgrid .conditionformatTbl .e-btn.e-dialogremoveBtn:focus  {
  & when (@skin = "office-365"){
   background-color:@theme-lighter;
  }
}
@{e-js}.e-pivotgrid.e-rtl .e-dlgCalculatedField label {
  & when (@skin = "office-365"){
   margin-right:0px;
   margin-left:8px;
  }
}
@{e-js}.e-pivotgrid.e-rtl .e-dlgCalculatedField .e-ddl {
  & when (@skin = "office-365"){
   margin-right:0px;
   margin-left:15px;
  }
}
@{e-js}.e-pivotgrid.e-rtl .calculateFieldName {
  & when (@skin = "office-365"){
    left:96px;
  }
}
@{e-js}.e-pivotgrid.e-rtl .e-calcFormulaDiv td {
  & when (@skin = "office-365"){
    padding:5px 18px;
  }
}
@{e-js}.e-pivotgrid .calculateFieldName.e-hoverCell{
  & when (@skin = "material"),(@skin = "office-365") {
     background-color:#ffffff !important;
  }
}
@{e-js}.e-pivotgrid .conditionformatTbl .e-dialogremoveBtn:active{
    & when (@skin = "office-365") {
    color:@theme-light-font;
   }
}
@{e-js}.e-pivotgrid .e-advancedFilterDlg .e-dialogCancelBtn,@{e-js}.e-pivotschemadesigner .e-advancedFilterDlg .e-dialogCancelBtn{
       & when (@skin = "office-365"){
         margin-right:7px !important;
    }
}
@{e-js}.e-pivotgrid.e-rtl .e-advancedFilterDlg .e-dialogOKBtn ,@{e-js}.e-pivotschemadesigner.e-rtl .e-advancedFilterDlg .e-dialogOKBtn {
         margin-right:102px !important;    
}
@{e-js}.e-pivotgrid.e-rtl .e-advancedFilterDlg .e-dialogCancelBtn ,@{e-js}.e-pivotschemadesigner.e-rtl .e-advancedFilterDlg .e-dialogCancelBtn {
       & when (@skin = "office-365"){
         margin-right:0px !important;
    }
}
@{e-js}.e-pivotgrid.e-rtl .clientDialog .e-menu.e-vertical .e-list>.e-menulink>span.e-icon.e-arrowhead-right, @{e-js}.e-pivotschemadesigner.e-rtl .clientDialog .e-menu.e-vertical .e-list>.e-menulink>span.e-icon.e-arrowhead-right{
       & when (@skin = "office-365"){
         right:auto !important;
    }
}
@{e-js}.e-pivotgrid .e-labelValueFilterDlg .e-titlebar , @{e-js}.e-pivotschemadesigner .e-labelValueFilterDlg .e-titlebar{
       & when (@skin = "office-365"){
         padding:15px 25px 10px !important;
    }
}
@{e-js}.e-pivotgrid .e-labelValueFilterDlg .labelfilter + div,@{e-js}.e-pivotgrid .e-labelValueFilterDlg .valuefilter + div,@{e-js}.e-pivotschemadesigner .e-labelValueFilterDlg .labelfilter + div,@{e-js}.e-pivotschemadesigner .e-labelValueFilterDlg .valuefilter + div{
       & when (@skin = "office-365"){
         margin:14px 0px 18px !important;
    }
}
@{e-js}.e-pivotgrid .e-labelValueFilterDlg .e-dialogOKBtn,@{e-js}.e-pivotschemadesigner .e-labelValueFilterDlg .e-dialogOKBtn,@{e-js}.e-pivotgrid .e-labelValueFilterDlg .e-dialogCancelBtn,@{e-js}.e-pivotschemadesigner .e-labelValueFilterDlg .e-dialogCancelBtn{
       & when (@skin = "office-365"){
         margin-bottom:0px !important;
    }
}
@{e-js}.e-pivotgrid .curInput{
    width:100%;
    & when (@skin = "flat-azure-dark"),(@skin = "flat-lime-dark"),(@skin = "flat-saffron-dark"),(@skin = "gradient-azure-dark"),(@skin = "gradient-lime-dark"),(@skin = "gradient-saffron-dark"),(@skin = "high-contrast-01"),(@skin = "high-contrast-02") {
    color:#000000;
   }
}
@{e-js}.e-pivotgrid .e-memberEditorDiv.noChildNode .e-item div>.e-chkbox-wrap,@{e-js}.e-pivotschemadesigner .e-memberEditorDiv.noChildNode .e-item div>.e-chkbox-wrap{
    & when (@skin = "office-365"){
     margin-left:0px;
    }
}
@{e-js}.e-pivotgrid.e-rtl .e-memberEditorDiv.noChildNode .e-item div>.e-chkbox-wrap, @{e-js}.e-pivotschemadesigner.e-rtl .e-memberEditorDiv.noChildNode .e-item div>.e-chkbox-wrap{
   & when (@skin = "office-365"){
     margin-right:0px;
    }
}

@{e-js}.e-pivotschemadesigner .e-icon.e-media-backward_01:before,@{e-js}.e-pivotgrid .e-icon.e-media-backward_01:before{
  & when (@skin = "material"), (@skin = "office-365")  {
   content:"\e83e";
   }
}
@{e-js}.e-pivotschemadesigner .e-icon.e-arrowhead-left:before,@{e-js}.e-pivotgrid .e-icon.e-arrowhead-left:before{
  & when (@skin = "material"), (@skin = "office-365")  {
   content:"\e83f";
   }
}
@{e-js}.e-pivotschemadesigner .e-icon.e-arrowhead-right:before,@{e-js}.e-pivotgrid .e-icon.e-arrowhead-right:before{
      & when (@skin = "material") , (@skin = "office-365") {
   content:"\e840";
   }
}
@{e-js}.e-pivotgrid .e-icon.e-media-forward_01:before,@{e-js}.e-pivotschemadesigner .e-icon.e-media-forward_01:before{
      & when (@skin = "material"), (@skin = "office-365")  {
       content:"\e841";
       }
}
@{e-js}.e-pivotschemadesigner .e-firstPage,@{e-js}.e-pivotgrid .e-firstPage{
     & when (@skin = "material") {
    margin-right:12px;
    }
    & when (@skin = "office-365") {
    margin-right:1px;
    }
}
@{e-js}.e-pivotschemadesigner .e-lastPage,@{e-js}.e-pivotgrid .e-lastPage{
 & when (@skin = "material") {
    margin-left:12px;
}
   & when (@skin = "office-365") {
    margin-left:1px;
    }
}

@{e-js}.e-pivotgrid .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn, e-pivotgrid .e-dialog .e-memberPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn, @{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager+div .e-btn.e-dialogCancelBtn,
@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn, e-pivotgrid .e-dialog .e-memberSearchPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn, @{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager+div .e-btn.e-dialogCancelBtn,
@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn, e-pivotgrid .e-dialog .e-memberDrillPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn, @{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager+div .e-btn.e-dialogCancelBtn{
  & when (@skin = "material") {
      margin-top:0px;
      margin-bottom:0px;
   }
}
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager+div .e-btn, @{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager+div .e-btn,@{e-js}.e-pivotgrid .e-dialog .e-memberPager+div .e-btn, @{e-js}.e-pivotgrid .e-dialog .e-memberPager+div .e-btn,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager+div .e-btn, @{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager+div .e-btn,@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager+div .e-btn, @{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager+div .e-btn,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager+div .e-btn, @{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager+div .e-btn,@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager+div .e-btn, @{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager+div .e-btn{
  & when (@skin = "material") {
      margin-top:0px;
      margin-bottom:0px;
   }
}
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager+div,@{e-js}.e-pivotgrid .e-dialog .e-memberPager+div,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager+div,@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager+div,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager+div,@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager+div{
  & when (@skin = "material") {
      margin-top:0px !important;
      margin-bottom:20px !important;
   }
    & when (@skin = "office-365") {
         margin-top:0px !important;
      margin-bottom:20px !important;
      }
}
@{e-js}.e-pivotschemadesigner .e-firstPage.e-pageEnabled, @{e-js}.e-pivotschemadesigner .e-prevPage.e-pageEnabled, @{e-js}.e-pivotschemadesigner .e-nextPage.e-pageEnabled,@{e-js}.e-pivotschemadesigner .e-lastPage.e-pageEnabled,@{e-js}.e-pivotgrid .e-firstPage.e-pageEnabled, @{e-js}.e-pivotgrid .e-prevPage.e-pageEnabled, @{e-js}.e-pivotgrid .e-nextPage.e-pageEnabled,@{e-js}.e-pivotgrid .e-lastPage.e-pageEnabled {
      & when (@skin = "material") {
          color: fade(#000000, 54%);
      }
            & when (@skin = "office-365") {
          color: #666666;
      }
}
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn{
        & when (@skin = "office-365") {
      margin-left:60px !important;
      }
}
@{e-js}.e-pivotschemadesigner.e-rtl .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid.e-rtl .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn,
@{e-js}.e-pivotschemadesigner.e-rtl .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid.e-rtl .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn,
@{e-js}.e-pivotschemadesigner.e-rtl .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid.e-rtl .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn{
            & when (@skin = "office-365") {
      margin-right:60px !important;
      }
}
@{e-js}.e-pivotgrid .e-dialog .e-memberPager .e-memberCurrentPage:hover,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager .e-memberCurrentPage:hover,
@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager .e-memberCurrentPage:hover,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager .e-memberCurrentPage:hover,
@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager .e-memberCurrentPage:hover,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager .e-memberCurrentPage:hover{
          & when (@skin = "material") {
          border-color: fade(#000000, 26%);
      }
            & when (@skin = "office-365") {
          border-color: @neutral-secondary-alt;
      }
}
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager .e-memberCurrentPage:active,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager .e-memberCurrentPage:focus,@{e-js}.e-pivotgrid .e-dialog .e-memberPager .e-memberCurrentPage:active,@{e-js}.e-pivotgrid .e-dialog .e-memberPager .e-memberCurrentPage:focus,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager .e-memberCurrentPage:active,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager .e-memberCurrentPage:focus,@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager .e-memberCurrentPage:active,@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager .e-memberCurrentPage:focus,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager .e-memberCurrentPage:active,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager .e-memberCurrentPage:focus,@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager .e-memberCurrentPage:active,@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager .e-memberCurrentPage:focus{
          & when (@skin = "material") {
          border-color: fade(#000000, 54%);
      }
            & when (@skin = "office-365") {
          border-color: @theme-primary;
      }
}
@{e-js}.e-pivotgrid .e-dialog .e-memberPager .e-memberCurrentPage,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager .e-memberCurrentPage,
@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager .e-memberCurrentPage,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager .e-memberCurrentPage,
@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager .e-memberCurrentPage,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager .e-memberCurrentPage{
      & when (@skin = "material") {
          color: fade(#000000, 87%);
              font-family:'Roboto',Segoe UI;
    font-size:12px;
            border:1px solid fade(#000000, 26%);
            width:22px !important;
            height:15px !important;
            border-radius:2px;
      }
      & when (@skin = "office-365") {
         outline:none;
         border:1px solid @neutral-tertiary-alt;
      }
}
@{e-js}.e-pivotgrid table.pivotGridValueTable.rowFrozenTable tr td:first-child {
    border-left: 0px;
}
@{e-js}.e-pivotgrid table.pivotGridFrozenTable.rowFrozenTable tr td:last-child, table.pivotGridValueTable.rowFrozenTable tr td:last-child {
    border-right: 0px;
}
@{e-js}.e-pivotgrid .frozenBorderBtmClr {
    border-bottom: solid 1px @content-border-color;
}
@{e-js}.e-pivotgrid .e-dialog .e-memberPager,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager,
@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager,
@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager{
   & when (@skin = "office-365") {
    margin-top:0px;
   }
}
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotschemadesigner.e-rtl .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotschemadesigner.e-rtl .e-dialog .e-memberPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotgrid .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid .e-dialog .e-memberPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotgrid.e-rtl .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid.e-rtl .e-dialog .e-memberPager+div .e-btn.e-dialogCancelBtn,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberSearchPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotschemadesigner.e-rtl .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotschemadesigner.e-rtl .e-dialog .e-memberSearchPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid .e-dialog .e-memberSearchPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotgrid.e-rtl .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid.e-rtl .e-dialog .e-memberSearchPager+div .e-btn.e-dialogCancelBtn,
@{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotschemadesigner .e-dialog .e-memberDrillPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotschemadesigner.e-rtl .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotschemadesigner.e-rtl .e-dialog .e-memberDrillPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid .e-dialog .e-memberDrillPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotgrid.e-rtl .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotgrid.e-rtl .e-dialog .e-memberDrillPager+div .e-btn.e-dialogCancelBtn
{
        & when (@skin = "office-365") {
      margin-bottom:0px !important;
      }
}
@{e-js}.e-pivotschemadesigner .e-firstPage.e-pageEnabled:after, @{e-js}.e-pivotschemadesigner .e-prevPage.e-pageEnabled:after, @{e-js}.e-pivotschemadesigner .e-nextPage.e-pageEnabled:after, @{e-js}.e-pivotschemadesigner .e-lastPage.e-pageEnabled:after,@{e-js}.e-pivotgrid .e-firstPage.e-pageEnabled:after, @{e-js}.e-pivotgrid .e-prevPage.e-pageEnabled:after, @{e-js}.e-pivotgrid .e-nextPage.e-pageEnabled:after, @{e-js}.e-pivotgrid .e-lastPage.e-pageEnabled:after
{
   & when (@skin = "material") {
    background-color:rgba(0,0,0,.12);
   }
}
@{e-js}.e-pivotschemadesigner .e-firstPage,@{e-js}.e-pivotschemadesigner .e-prevPage, @{e-js}.e-pivotschemadesigner .e-nextPage, @{e-js}.e-pivotschemadesigner .e-lastPage,.e-memberCurrentPage,.memberPageCount,@{e-js}.e-pivotgrid .e-firstPage,@{e-js}.e-pivotgrid .e-prevPage, @{e-js}.e-pivotgrid .e-nextPage, @{e-js}.e-pivotgrid .e-lastPage,.e-memberCurrentPage,.memberPageCount,
@{e-js}.e-pivotschemadesigner .e-firstPage,@{e-js}.e-pivotschemadesigner .e-prevPage, @{e-js}.e-pivotschemadesigner .e-nextPage, @{e-js}.e-pivotschemadesigner .e-lastPage,.e-memberCurrentSearchPage,.memberSearchPageCount,@{e-js}.e-pivotgrid .e-firstPage,@{e-js}.e-pivotgrid .e-prevPage, @{e-js}.e-pivotgrid .e-nextPage, @{e-js}.e-pivotgrid .e-lastPage,.e-memberCurrentSearchPage,.memberSearchPageCount,
@{e-js}.e-pivotschemadesigner .e-firstPage,@{e-js}.e-pivotschemadesigner .e-prevPage, @{e-js}.e-pivotschemadesigner .e-nextPage, @{e-js}.e-pivotschemadesigner .e-lastPage,.e-memberCurrentDrillPage,.memberDrillPageCount,@{e-js}.e-pivotgrid .e-firstPage,@{e-js}.e-pivotgrid .e-prevPage, @{e-js}.e-pivotgrid .e-nextPage, @{e-js}.e-pivotgrid .e-lastPage,.e-memberCurrentDrillPage,.memberDrillPageCount
 {
   & when (@skin="material"), (@skin="office-365") {
    vertical-align:middle;
  }
}
/*.dragSchemaButtonClone{
  & when (@skin= "office-365") {
  font:14px Segoe UI;
  padding:0px 8px;
  background:@theme-lighter;
  color:@theme-light-font;
  width:auto;
 }
}*/
@media (min-width: 20px) and (max-width:799px) {
    @{e-js}.e-pivotgrid .e-table {
        width:100%;
        /*table-layout:fixed;*/
        overflow-wrap:break-word;
    }
       @{e-js}.e-pivotgrid .e-table td {
              overflow-wrap:break-word;
              overflow:hidden;
              text-overflow:ellipsis;
        }  
}

@media (min-width: 800px) and (max-width: 959px) {
    @{e-js}.e-pivotgrid .e-table {
        width:100%;
        /*table-layout:fixed;*/
        overflow-wrap:break-word;
    }
    @{e-js}.e-pivotgrid .e-table td {
              overflow-wrap:break-word;
              overflow:hidden;
              text-overflow:ellipsis;
        }  
}

@media (min-width: 960px) and (max-width: 1120px) {
   @{e-js}.e-pivotgrid .e-table {
        width:100%;
        /*table-layout:fixed;*/
        overflow-wrap:break-word;

    }
    @{e-js}.e-pivotgrid .e-table td {
              overflow-wrap:break-word;
              overflow:hidden;
              text-overflow:ellipsis;
        }  
}

@media (min-width: 1120px)  {
   @{e-js}.e-pivotgrid .e-table {
        width:100%;
        /*table-layout:fixed;*/
        overflow-wrap:break-word;
    }
    @{e-js}.e-pivotgrid .e-table td {
              overflow-wrap:break-word;
              overflow:hidden;
              text-overflow:ellipsis;
        }
   
}




@{e-js}.e-pivotclient, @{e-js}.e-pivotclient * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

@{e-js}.e-pivotclient .e-box,@{e-js}.e-pivotclient button.e-btn,@{e-js}.e-pivotclient input.e-btn,@{e-js}.e-pivotclient input.e-input,@{e-js}.e-pivotclient input[type="text"].e-input,
@{e-js}.e-pivotclient .e-input.e-placeholder,@{e-js}.e-pivotclient  input.e-input,@{e-js}.e-pivotclient .e-js.e-lv.e-js .e-header.e-box,@{e-js}.e-pivotclient .e-textbox, .e-textarea
{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@{e-js}.e-pivotclient td {
    padding: 0;
    border: 0 none;
}
@{e-js}.e-pivotclient .e-hoverCell{
background-color:@hover-bg-stcolor !important;
}
@{e-js}.e-pivotclient .e-collectionli:hover, @{e-js}.e-pivotclient .e-reportli:hover {
	.office-pivotclient-toolbar-bg-color;
	background: @toolbar-bgcolor !important;
	border: none !important;
	color: @oclient-icons-color !important;
	padding:3px !important;
	& when (@skin = "office-365"){
		padding:7px !important;
	}
	border-top:4px !important;
}
@{e-js}.e-pivotclient .e-collectiondiv {
	float: right;
	margin-left: 6px;
}
@{e-js}.e-pivotclient .e-reportLbl,@{e-js}.e-pivotclient .e-collectionLbl {
	margin-top: 2px;
}
@{e-js}.e-pivotclient .e-splitBtnUnique{
    height:auto !important
}
@{e-js}.e-pivotclient *:focus:hover{
    outline:none;
}
@{e-js}.e-pivotclient .e-removeBtnUnqiue{
    height:calc(100% - 39px) !important
}
@{e-js}.e-pivotclient .e-schemaRemoveBtnUnqiue{
    height: inherit !important
}
@{e-js}.e-pivotclient .e-schemaBtnUnique{
    margin-top:0px !important;
    height:auto !important;
    white-space:initial !important
}
@{e-js}.e-pivotclient .e-pvtBtnUnique{
    display:inline-flex !important
}                                                                                                                                      .e-pvtBtnUnique{display:inline-flex !important}
@{e-js}.e-pivotclient 
{
  border: 1px solid @oclient-border-color;
    & when (@skin = "office-365"){
        border: 1px solid @neutral-light;
    }
  background-color: @oclient-bgcolor;
    & when not (@skin = "office-365") {
    color: @fg-header-color;
  }
    & when (@skin = "office-365"){
        color:  @neutral-light-font;
    }
  & when (@skin = "material") {
    padding-bottom:10px;
  }
}

@{e-js}.e-pivotclient .e-gridPanel, @{e-js}.e-pivotclient .e-chartPanel {
 border: none !important;
}

@{e-js}.e-pivotclient .e-controlPanel{
  position: relative;
  right: 5px;
}
@{e-js}.e-pivotclient .e-sortFilterDisable{
  color:@sort-filter-disable;
}
@{e-js}.e-pivotclient ul.e-sortfiltTab.e-box.e-addborderbottom.e-header {
 & when not (@skin = "material") {
    background: transparent;
  }
}

@{e-js}.e-pivotclient .e-dialog .e-header{
& when not (@skin = "material") and not (@skin = "office-365") {
    background:@oclient-dialog-bgcolor;
    color:@oclient-dialog-color;
 }
}
@{e-js}.e-pivotclient textarea{
  background: @oclient-dialog-bgcolor;
}
@{e-js}.e-pivotclient .e-treeview .e-text {
    & when (@skin = "material") {
        color:fade(@base-font-color,87%);
    }
   & when not (@skin = "material") and not (@skin = "office-365") {
       color:@content-font-color;
    }
 }

 @{e-js}.e-pivotclient .e-treeview .e-text:hover{
color:@oclient-treeview-text-hover;

}
 @{e-js}.e-pivotclient .e-treeview .e-icon.e-stop:before {
     content: "\e657" !important;
}
 @{e-js}.e-pivotclient .e-dialog a.e-linkPanel{
     text-decoration: underline;
}
  @{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog a.e-linkPanel{
     margin-top:4px !important;
}
  @{e-js}.e-pivotclient .e-dialog .e-infoImg.e-icon:before {
     content: "\e917";
     color: #D48E0B;
}
 @{e-js}.e-pivotclient .e-treeview .e-active{
   & when not (@skin = "material") and not (@skin = "office-365") {
    color:@active-font-color;
    background:@oclient-treeview-active;
  }
}

 @{e-js}.e-pivotclient .e-chkbox-wrap .e-chk-image.e-stop, @{e-js}.e-pivotclient .e-chkbox-wrap .e-chk-image.e-checkmark
{    
    & when (@skin= "material") {        
       color:@accent-font-color !important;
       background-color: @accent-color !important;
    }
}

@{e-js}.e-pivotclient .e-childsplit > span.e-splitbar.e-h-bar{
width:5px;
border:none;
}
@{e-js}.e-pivotclient .e-parentsplit > span.e-splitbar.e-h-bar{
width:5px !important;
border:none;
}
@{e-js}.e-pivotclient .e-splitresponsive > span.e-splitbar.e-h-bar{
width:5px !important;
border:none;
}
@{e-js}.e-pivotclient .customCSS .e-splitbar{
background-color:@content-bg-color;
}
@{e-js}.e-pivotclient .e-olapFieldList .e-ul {
 width:100% !important;
 height:100% !important;
}
@{e-js}.e-pivotclient .e-splitter .e-pane{
overflow: visible !important;
}
@{e-js}.e-pivotclient .e-splitter{
border:none !important;
}
@{e-js}.e-pivotclient .e-splitter .e-splitbar.e-h-bar:before {
content:"\e6fa";
}
@{e-js}.e-pivotclient .e-splitter .e-splitbar.e-h-bar:before {
top: 50%;
left: 1px;
position: absolute;
}
@{e-js}.e-pivotclient .e-splitter .e-splitbar.e-h-bar{
font-family: 'ej-webfont';
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-fieldEnSplitTable.e-pane {
left:4.5px;
}
@{e-js}.e-pivotclient .e-axisTable.e-pane{
left:7.5px !important;
padding-right:9.5px !important;
}
@{e-js}.e-pivotclient .e-serverchildsplit > span.e-splitbar.e-h-bar {
width:5px !important;
border: none;
left: 1.5px;
}
@{e-js}.e-pivotclient .e-serverparentsplit > span.e-splitbar.e-h-bar {
width: 6px !important;
border: none;
}
@{e-js}.e-pivotclient .e-splitter .e-splitbar.e-h-bar .e-activebar{
background:none;
}
@{e-js}.e-pivotclient .e-serverchildsplit .cdbTD.e-pane{
padding-right:2px;
}
@{e-js}.e-pivotclient .axisBuilderTD.e-pane{
left: 2.5px;
padding-right: 7.5px;
}
@{e-js}.e-pivotclient .e-serversplitresponsive > span.e-splitbar.e-h-bar{
width:5px !important;
border: none;
}
@{e-js}.e-pivotclient .controlPanelTD {
  display:inline-block;
}
@{e-js}.e-pivotclient .e-childsplit.e-rtl > .e-axisTable.e-pane {
left:3.5px !important;
}
@{e-js}.e-pivotclient .e-childsplit.e-rtl > .e-fieldTable.e-pane {
left:-5.5px !important
}
@{e-js}.e-pivotclient .e-cubeTreeView .e-ul{
overflow:auto !important;
}
@{e-js}.e-olapclient .e-nextPageDiv {
    float: right;
    margin-top: 10px;
}
@{e-js}.e-olapclient .e-memberPageCount {
    padding-left: 5px;
}
/*.e-olapclient .firstPage, .e-prevPage, .e-nextPage, .e-lastPage, .memberCurrentPage {
    margin-left: 5px;
}*/
@{e-js}.e-olapclient .e-disabled {
    cursor : pointer;
    opacity: 0.5;
}
@{e-js}.e-olapclient .e-enabled {
    cursor: pointer;
    opacity: 1;
}


 @{e-js}.e-pivotclient .e-treeview .e-text .e-icon{
   & when not (@skin = "material") {
     .switch-pivotclient-treeview-icon-hover-active;
   }
 }

@{e-js}.e-pivotclient .e-ddl .e-select{
 & when not (@skin = "material") {
   color:@oclient-ddl-color;
    background:@oclient-ddl-bgcolor;
    border-color:@oclient-ddl-bcolor;
 }
}

@{e-js}.e-pivotclient .e-ddl .e-select:hover {
    & when not (@skin = "material") {
        color: @oclient-ddl-hcolor;
        background:@oclient-ddl-hbgcolor;
    }
}
@{e-js}.e-pivotclient .e-outerTable {
    & when (@skin = "material") {
      font-family:'Roboto',Segoe UI;
      font-size:12px;
      font-weight:normal;
    }
    & when not (@skin = "material") {
      font: normal 12px @font-family;
    }
  border-collapse: collapse;  
  background-color: @oclient-bgcolor;
}

@{e-js}.e-pivotclient .e-titleText {
  height: 50px;
  width: inherit;
  display: inline-block;
    & when (@skin = "material") {
      font-family:'Roboto',Segoe UI;
      font-size:20px;
        line-height: 48px;
    }
    & when not (@skin = "material") {
      font: normal 20px @font-family;
        line-height: 48px;
    }
}
@{e-js}.e-pivotclient .e-titleText span {
    padding-left: 10px;
}
@{e-js}.e-pivotclient .e-toolbar.e-toolbarspan{
    & when (@skin = "office-365"){
        height:42px !important;
    }
}
@{e-js}.e-pivotclient .e-reportCol, @{e-js}.e-pivotclient .e-collectionli,@{e-js}.e-pivotclient .e-reportli {
        & when (@skin = "office-365"){
            padding: 7px !important;
    }
}
@{e-js}.e-pivotclient .e-newReportImg:before {
	content:"\e6b3";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 20px;  
    }
}
@{e-js}.e-pivotclient .e-addReportImg:before {
	content:"\e6a1";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 20px;  
    }
}
@{e-js}.e-pivotclient .e-removeReportImg:before{
content:"\e6cf";
    & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 20px;  
    }
}
@{e-js}.e-pivotclient .e-renameReportImg:before{
content:"\e6d0";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 20px;  
    }
}
@{e-js}.e-pivotclient .e-reportDBImg:before {
  content: "\e839";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 20px;  
    }
}
@{e-js}.e-pivotclient .e-mdxImg:before {
	content:"\e6ac";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 20px;  
    }
}
@{e-js}.e-pivotclient .e-autoExecuteImg:before {
    content: "\e6c3";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 20px;  
    }
}
@{e-js}.e-pivotclient .e-calcMemberImg:before{
  & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 20px; 
        content: "\e86f";
  }
    & when (@skin = "material") {
    content:"\e842";
    }
   & when (@skin = "office-365") {
    content:"\e86b";
    }

}
@{e-js}.e-pivotclient .e-excelExportImg:before{
    content: "\e6d4";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 20px;  
    }
}
@{e-js}.e-pivotclient .e-wordExportImg:before{
    content: "\e6d5";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 20px;  
    }
}
@{e-js}.e-pivotclient .e-pdfExportImg:before{
    content: "\e6d3";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 20px;  
    }
}
@{e-js}.e-pivotclient .e-chartTypesImg:before{
    content:"\e6a4";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 20px;  
    }
}
@{e-js}.e-pivotclient .e-toggleaxisImg:before{
     content: "\e790";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 20px;  
    }
}
@{e-js}.e-pivotclient .e-kpiCDB:before, @{e-js}.e-pivotclient .e-kpiGoalCDB:before, @{e-js}.e-pivotclient .e-kpiStatusCDB:before, @{e-js}.e-pivotclient .e-kpiTrendCDB:before, @{e-js}.e-pivotclient .e-kpiValueCDB:before, @{e-js}.e-pivotclient .e-kpiRootCDB:before{
content:"\e6df";
font-size: 18px;
}
@{e-js}.e-pivotclient .e-kpiCDB, @{e-js}.e-pivotclient .e-kpiGoalCDB, @{e-js}.e-pivotclient .e-kpiStatusCDB, @{e-js}.e-pivotclient .e-kpiTrendCDB, @{e-js}.e-pivotclient .e-kpiValueCDB, @{e-js}.e-pivotclient .e-kpiRootCDB{
  height:16px;
  width:16px;
  display:inline-block;
  vertical-align: text-top;
 }
@{e-js}.e-pivotclient .e-newReportImg,@{e-js}.e-pivotclient .e-addReportImg,@{e-js}.e-pivotclient .e-removeReportImg,@{e-js}.e-pivotclient .e-renameReportImg,
@{e-js}.e-pivotclient .e-reportDBImg, @{e-js}.e-pivotclient .e-mdxImg,@{e-js}.e-pivotclient .maximizedView,@{e-js}.e-pivotclient .e-calcMemberImg,@{e-js}.e-pivotclient .e-excelExportImg,@{e-js}.e-pivotclient .e-wordExportImg,@{e-js}.e-pivotclient .e-pdfExportImg,@{e-js}.e-pivotclient .e-chartTypesImg,@{e-js}.e-pivotclient .e-rowSortFilterImg,@{e-js}.e-pivotclient .e-colSortFilterImg,@{e-js}.e-pivotclient .e-toggleExpandButton,
@{e-js}.e-pivotclient .e-toggleCollapseButton,@{e-js}.e-pivotclient .e-dimensionCDB,@{e-js}.e-pivotclient .e-folderCDB,@{e-js}.e-pivotclient .e-hierarchyCDB,@{e-js}.e-pivotclient .e-attributeCDB,@{e-js}.e-pivotclient .e-chartCDB,
@{e-js}.e-pivotclient .e-namedSetCDB,@{e-js}.e-pivotclient .e-level0,@{e-js}.e-pivotclient .e-level1,@{e-js}.e-pivotclient .level2,@{e-js}.e-pivotclient .e-level3,@{e-js}.e-pivotclient .e-level4,@{e-js}.e-pivotclient .e-level5,
@{e-js}.e-pivotclient .e-level6,@{e-js}.e-pivotclient .e-level7,@{e-js}.e-pivotclient .e-level8,@{e-js}.e-pivotclient .e-level9,@{e-js}.e-pivotclient .e-level10, 
@{e-js}.e-pivotclient .e-checkAll,@{e-js}.e-pivotclient .e-unCheckAll,@{e-js}.e-pivotclient .e-autoExecuteImg,@{e-js}.e-pivotclient .e-toggleaxisImg,@{e-js}.e-pivotclient .e-calcMemberCDB,@{e-js}.e-pivotclient .e-calcMemberGroupCDB, @{e-js}.e-pivotclient .e-kpiCDB, @{e-js}.e-pivotclient .e-kpiGoalCDB, @{e-js}.e-pivotclient .e-kpiStatusCDB, @{e-js}.e-pivotclient .e-kpiTrendCDB, @{e-js}.e-pivotclient .e-kpiValueCDB, @{e-js}.e-pivotclient .e-kpiRootCDB
{
    & when not (@skin = "office-365") {
    color:@oclient-icons-color;
  }
     & when (@skin = "office-365") {
    color: @neutral-light-font;
  }
  & when not (@skin = "material") and not (@skin = "office-365") {
    text-indent: -3px;
  }
}
@{e-js}.e-pivotclient .e-categoricalAxis p:first-child + div, @{e-js}.e-pivotclient .e-rowAxis p:first-child + div, @{e-js}.e-pivotclient .e-slicerAxis p:first-child + div {
  & when (@skin = "office-365") {
    margin-top: 8px;
  }    
}
@{e-js}.e-pivotclient .maximizedView:before{
    content:"\e660";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 21px;  
    }
}
 @{e-js}.e-pivotclient .e-colSortFilterImg:before {
       content: "\e6f9";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 32px; 
        line-height: 0.65;
         text-indent: -9px; 
    }
  & when (@skin = "material") {
     	font-size: 20px; 
         margin-top:-4px;
  }   
  & when (@skin = "office-365") {
     	font-size: 18px; 
         margin-top:-2px;
  }   
  }
@{e-js}.e-pivotclient .e-rowSortFilterImg:before{
    content: "\e6f8";
      & when not (@skin = "material") and not (@skin = "office-365") {
     	font-size: 29px;  
        line-height: 0.8;
        text-indent: -7px;
    }
  & when (@skin = "material") {
     	font-size: 17px; 
         margin-top:-2px;
  }   
  & when (@skin = "office-365") {
     	font-size: 18px; 
         margin-top:-2px;
  }   
}
@{e-js}.e-pivotclient .e-chartPanel{
    height: 0;
    width: 800px;
    margin: 3.5px 7px 7px;
}
@{e-js}.e-pivotclient .clientTab{
    & when not (@skin = "material") {
      margin-top: 6px !important;
    }
    font: bold 12px @font-family;
}

@{e-js}.e-pivotclient .e-toggleExpandButton, @{e-js}.e-pivotclient .e-toggleCollapseButton{
	background-repeat: no-repeat;
	height:20px;
	width:21px;
	cursor: pointer;
	position: relative;
	top: -3px;
}
@{e-js}.e-pivotclient .e-toggleExpandButton{
	float:right;
    background-position: center -20px;
	margin:5px;
}
@{e-js}.e-pivotclient .e-toggleCollapseButton{
    background-position: 6px 0px;
	position: relative;
	top: 11px;
}
@{e-js}.e-pivotclient .e-toggleExpandButton:hover,@{e-js}.e-pivotclient .e-toggleCollapseButton:hover
{
 color:@hover-font-color;
 background:@oclient-icons-hover-bg;
}
@{e-js}.e-pivotclient .e-toggleCollapseButton:before {
content:"\e674";
font-size: 20px;
}
@{e-js}.e-pivotclient .e-toggleExpandButton:before{
content:"\e671";
font-size: 20px;
    margin-right: 7px;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-fieldTable
{
    background: @bg-table-color !important;
    border-collapse: collapse !important;
    margin: 6px 0px 8px !important;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-fieldEnSplitTable{
margin: 6px 0px 8px !important;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-fieldDisSplitTable{
     & when (@skin = "material") {
      margin: 6px 4px 8px 4px !important;
    }
    & when not (@skin = "material") {
      margin: 6px 4px 8px !important;
    }
}
@{e-js}.e-pivotclient .e-chartToolBar{
     border:none;
 } 
 @{e-js}.e-pivotclient .e-toolBar{
     border:none;
 }

@{e-js}.e-pivotclient .e-toggleText{
	background-position: center 0px;
	background-repeat: no-repeat;
	height: 140px;
	width: 30px;
}
@{e-js}.e-pivotclient .e-splitBtn {
    & when (@skin = "material") {
        background-color:@grey-300;
        display:inline-block;
        width:auto;
        margin:12px 0px 0px 12px;
        border-radius:25px;
        overflow:hidden;
        border:1px solid @grey-300;
        font-family:'Roboto',Segoe UI !important;
        font-size:13px !important;
        color:fade(@base-font-color,87%);
        white-space:nowrap;
    }
    & when not (@skin = "material") and not (@skin = "office-365") {
      margin: 7px 0 0 6px;
      position: relative;
    }
    & when (@skin = "office-365") {
      margin: 4px 0px 0px 8px;
      position: relative;
    }
}

@{e-js}.e-pivotclient .e-csHeader {
    & when (@skin = "material") {
      font-family:'Roboto',Segoe UI;
      font-size:14px;
      font-weight:normal;
      margin: 8px 0 20px 3px;
    }
    & when not (@skin = "material") {
      font: normal 14px @font-family;
      margin: 8px 0 8px 3px;
    }
}

@{e-js}.e-pivotclient .e-cdbHeader, @{e-js}.e-pivotclient .e-axisHeader {
    & when not (@skin = "office-365") {
        border: 1px solid @oclient-border-color;
    }
    & when (@skin = "office-365") {
        border: 1px solid @neutral-light;
    }
  font-weight: bold;
  line-height: 28px;
}
@{e-js}.e-pivotclient .e-axisHeader span:not(.e-removeSplitBtn), @{e-js}.e-pivotclient .e-cdbHeader span {
    padding-left: 5px;
}

@{e-js}.e-pivotclient.e-rtl .e-axisHeader span:not(.e-removeSplitBtn), @{e-js}.e-pivotclient.e-rtl .e-cdbHeader span {
    padding-right: 5px;
}

@{e-js}.e-pivotclient .e-cubeTable
{
	border-collapse: collapse;
    margin: 0 5px 3px 5px;
}

@{e-js}.e-pivotclient .e-cdbHeader{
  border-bottom: 0px;
  overflow: hidden;
}

@{e-js}.e-pivotclient .e-ellipse {
    float: right;
    margin-right: 5px;
    margin-left: -17px;
    background-color: @oclient-bgcolor;
    position: relative;
}

@{e-js}.e-pivotclient .e-axisHeader {
    & when (@skin = "material") {
       border:none;
    }
    & when not (@skin = "material") {
       border-bottom: 0px;
    }
}
@{e-js}.e-pivotclient .e-reportToolbar{
border-color:@oclient-border-color !important;
   & when (@skin = "office-365"){
       border-color:@neutral-light !important;
   }
.office-pivotclient-toolbar-bg-color;
background:@toolbar-bgcolor;
}
@{e-js}.e-pivotclient .e-cubeBrowser{
   & when not (@skin = "office-365"){
       border: 1px solid @oclient-border-color !important;
   }
   & when (@skin = "office-365"){
       border: 1px solid @neutral-light !important;
   }  
}

@{e-js}.e-pivotclient .e-splitter {
   & when (@skin = "office-365"){
      border-color: #eaeaea;
   }
}

@{e-js}.e-pivotclient .e-cubeName {
  padding: 7px 0 0 6px;
  font: normal 14px @font-family;
}

@{e-js}.e-pivotclient .e-categoricalAxis, @{e-js}.e-pivotclient .e-rowAxis, @{e-js}.e-pivotclient .e-slicerAxis {
  & when not (@skin = "office-365"){
      border: 1px solid @oclient-border-color;
  }
  & when (@skin = "office-365"){
       border: 1px solid @neutral-light;
  }
  margin-bottom: 3px;
  /*background: @aeb-bgcolor;*/
  overflow:auto;
    & when (@skin = "material") {
       background-color:@grey-50;
    }
}

@{e-js}.e-pivotclient .e-gridContainer, @{e-js}.e-pivotclient .e-chartContainer{
   & when not (@skin = "office-365"){
       border: 1px solid @oclient-border-color;
   }
   & when (@skin = "office-365"){
       border: 1px solid @neutral-light;
       background-color:@neutral-lighter-alt;
   }  
}

@{e-js}.e-pivotclient .e-dropIndicator {
  & when not (@skin = "material") {
    margin-top:4px !important;
    border-top:3px dashed @active-bg-stcolor;
  }
}

@{e-js}.e-pivotclient .e-targetAxis {
    & when (@skin = "material") {
        background:@grey-50;
    }
    & when not (@skin = "material") {
       .summary-gradient();
    }
}
@{e-js}.e-pivotclient .e-reportToolbar .e-active {
  color: @active-font-color;
}
@{e-js}.e-pivotclient .e-connectImg, @{e-js}.e-pivotclient .e-newReportImg, @{e-js}.e-pivotclient .e-addReportImg, @{e-js}.e-pivotclient .e-removeReportImg, @{e-js}.e-pivotclient .e-renameReportImg, @{e-js}.e-pivotclient .e-reportDBImg, @{e-js}.e-pivotclient .e-mdxImg,@{e-js}.e-pivotclient .maximizedView, @{e-js}.e-pivotclient .e-calcMemberImg,@{e-js}.e-pivotclient .e-excelExportImg, @{e-js}.e-pivotclient .e-wordExportImg, @{e-js}.e-pivotclient .e-pdfExportImg, @{e-js}.e-pivotclient .e-chartTypesImg, @{e-js}.e-pivotclient .e-rowSortFilterImg, @{e-js}.e-pivotclient .e-colSortFilterImg, @{e-js}.e-pivotclient .e-connectImg:hover, @{e-js}.e-pivotclient .e-newReportImg:hover, @{e-js}.e-pivotclient .e-addReportImg:hover, @{e-js}.e-pivotclient .e-removeReportImg:hover, 
@{e-js}.e-pivotclient .e-renameReportImg:hover, @{e-js}.e-pivotclient .e-reportDBImg:hover, @{e-js}.e-pivotclient .e-mdxImg:hover, @{e-js}.e-pivotclient .e-calcMemberImg:hover, @{e-js}.e-pivotclient .e-excelExportImg:hover, @{e-js}.e-pivotclient .e-wordExportImg:hover, @{e-js}.e-pivotclient .e-pdfExportImg:hover, @{e-js}.e-pivotclient .e-chartTypesImg:hover,
@{e-js}.e-pivotclient .e-rowSortFilterImg:hover, @{e-js}.e-pivotclient .e-colSortFilterImg:hover,@{e-js}.e-pivotclient .e-autoExecuteImg:hover,@{e-js}.e-pivotclient .e-autoExecuteImg,@{e-js}.e-pivotclient .e-toggleaxisImg,@{e-js}.e-pivotclient .e-toggleaxisImg:hover{
    background-repeat: no-repeat;
	cursor: default;
	display: inline-block;
    & when not (@skin = "material") and not (@skin = "office-365") {
	    height: 20px; 
	    width: 20px;
        margin: 4px;
    }
}
@{e-js}.e-pivotclient .e-connectImg:hover, @{e-js}.e-pivotclient .e-newReportImg:hover, @{e-js}.e-pivotclient .e-addReportImg:hover, @{e-js}.e-pivotclient .e-removeReportImg:hover, @{e-js}.e-pivotclient .e-renameReportImg:hover, @{e-js}.e-pivotclient .e-reportDBImg:hover, @{e-js}.e-pivotclient .e-mdxImg:hover,@{e-js}.e-pivotclient .e-calcMemberImg:hover, @{e-js}.e-pivotclient .e-excelExportImg:hover,@{e-js}.e-pivotclient .e-wordExportImg:hover,@{e-js}.e-pivotclient .e-pdfExportImg:hover,@{e-js}.e-pivotclient .e-chartTypesImg:hover,@{e-js}.e-pivotclient .maximizedView:hover,@{e-js}.e-pivotclient .e-rowSortFilterImg:hover, @{e-js}.e-pivotclient .e-colSortFilterImg:hover,@{e-js}.e-pivotclient .e-autoExecuteImg:hover,@{e-js}.e-pivotclient .e-toggleaxisImg:hover { cursor: pointer;color:@toolbar-icons-hvrcolor; }
@{e-js}.e-pivotclient .reportList, @{e-js}.e-pivotclient e-collectionlist{
    overflow:visible !important;
    & when (@skin = "material") {
      margin-top:-6px;
    }
}
@{e-js}.e-pivotclient .e-pivotgrid .pivotGridRowTable th,
@{e-js}.e-pivotclient .e-pivotgrid .pivotGridRowTable td {
    padding: 6px 2px 6px 8px !important;
}
@{e-js}.e-pivotclient .e-renameDBReportTbl .e-ddl{
    & when (@skin = "office-365") {
      height:25px !important;
    }
}
@{e-js}.e-pivotclient div.e-advancedFilterDlg{
    border:@border-size @border-type @content-border-color;
}
@{e-js}.e-pivotclient li.e-reportCol.e-hover, @{e-js}.e-pivotclient .e-collectionli.e-hover, @{e-js}.e-pivotclient .e-reportli.e-hover {
    background: none;
    border-color:transparent;
}
@{e-js}.e-pivotclient .e-sortReportTbl {
   & when not (@skin = "office-365"){
       margin: 0px 4px 18px; 
   }
   & when (@skin = "office-365"){
       margin: 3px 4px 18px; 
   }     
     width:100%; 
}
@{e-js}.e-pivotclient .e-sortingDlg, @{e-js}.e-pivotclient .e-filteringDlg {
   & when not (@skin = "office-365"){
      font: bold 12px @font-family !important;
   }
   & when (@skin = "office-365"){
      font: normal 14px @font-family !important;
      font-weight:400 !important;
   }   
}
@{e-js}.e-pivotclient .e-sortingDlg label, @{e-js}.e-pivotclient .e-filteringDlg label{
   & when (@skin = "office-365"){
      font: normal 14px @font-family !important;
   } 
}
@{e-js}.e-pivotclient .e-sortDisable,@{e-js}.e-pivotclient .e-radioBtnDesc,@{e-js}.e-pivotclient .e-preserveHrchy,@{e-js}.e-pivotclient .e-filterLbl,@{e-js}.e-pivotclient .e-conditionLbl { vertical-align: middle;}
@{e-js}.e-pivotclient .e-sortEnable,@{e-js}.e-pivotclient .e-radioBtnAsc { vertical-align:text-bottom;}
@{e-js}.e-pivotclient .e-radioBtnAsc ,@{e-js}.e-pivotclient .e-radioBtnDesc, 
@{e-js}.e-pivotclient .e-measuresList,@{e-js}.e-pivotclient .e-sortEnable,@{e-js}.e-pivotclient .e-sortDisable,@{e-js}.e-pivotclient .filter,
@{e-js}.e-pivotclient .e-filterCondition,
@{e-js}.e-pivotclient .e-filterDisable,@{e-js}.e-pivotclient .e-filterEnable,@{e-js}.e-pivotclient .e-chkBoxColumn{
    margin-top:15px;
   & when (@skin = "office-365"){
       margin-left:8px !important;
       margin-right:4px !important;
   }
}
  @{e-js}.e-pivotclient input.inputConditionMbl[type=number]::-webkit-inner-spin-button, 
  @{e-js}.e-pivotclient input.inputConditionMbl[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none !important; 
    margin: 0; 
}

@{e-js}.e-pivotclient .e-filterFrmDiv{
   & when (@skin = "office-365"){
       margin-left:8px;
   }
}
@{e-js}.e-pivotclient .e-rtl .e-filterFrmDiv{
   & when (@skin = "office-365"){
       margin-right:8px;
   }
}
@{e-js}.e-pivotclient .e-cubeBrowserCalcMember, @{e-js}.e-pivotclient .e-calcMemberFieldPanel .e-textarea {
    font-weight: normal;
}
@{e-js}.e-pivotclient.e-rtl  .e-pivotschemadesigner.e-rtl{
    margin-left: 2px;
    margin-right: 4px;
}
@{e-js}.e-pivotclient.e-rtl .pivotFieldList, @{e-js}.e-pivotclient.e-rtl .e-togglePanel {
    float: right !important;
}
@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner .e-fieldEnSplitTable.e-pane {
    right: 4.5px !important;
    left:0px;
}         
@{e-js}.e-pivotclient.e-rtl .e-toggleExpandButton:before {
    margin-right: 0px;
}

@{e-js}.e-pivotclient .e-SortFilterDlg .e-ddl{
   & when (@skin = "office-365"){
       margin-left:8px;
       margin-right:8px !important;
       width:92% !important;
   }
}
@{e-js}.e-pivotclient .e-SortFilterDlg .e-preserveHrchy, @{e-js}.e-pivotclient .e-SortFilterDlg .e-preserveHrchyLbl{
   & when (@skin = "office-365"){
       margin-left:8px !important;
   }    
}
@{e-js}.e-pivotclient .e-sortDisable,@{e-js}.e-pivotclient .e-radioBtnDesc{    margin-bottom:15px;}
@{e-js}.e-pivotclient .e-filterFrmDiv,@{e-js}.e-pivotclient .e-filterToDiv ,@{e-js}.e-pivotclient .e-filterBtw { float:left;} 
@{e-js}.e-pivotclient .e-filterLbl{     margin-top: -23px;}
@{e-js}.e-pivotclient .e-sortingDlg,@{e-js}.e-pivotclient .e-filteringDlg {
   & when not (@skin = "office-365"){
       margin-top:-1px !important;
   }
   & when (@skin = "office-365"){
       margin-top:2px !important;
   }     
}
@{e-js}.e-pivotclient .e-filterFrmDiv,@{e-js}.e-pivotclient .e-filterBtw,@{e-js}.e-pivotclient .e-filterToDiv { margin-bottom:-7px; margin-top:10px !important;}
@{e-js}.e-pivotclient .e-conditionLbl,@{e-js}.e-pivotclient .filterMeasureListLbl { margin-bottom:14px; margin-top:10px !important;}
@{e-js}.e-pivotclient .e-filterBtw,@{e-js}.e-pivotclient .e-filterToDiv {  margin-left:4px;}
@{e-js}.e-pivotclient .e-sortDisableLbl,@{e-js}.e-pivotclient .e-sortEnableLbl,@{e-js}.e-pivotclient .e-radioBtnAscLbl,@{e-js}.e-pivotclient .e-radioBtnDescLbl,@{e-js}.e-pivotclient .e-preserveHrchyLbl,@{e-js}.e-pivotclient .e-filterDisableLbl{  
       margin-left:4px !important;   
}
@{e-js}.e-pivotclient .e-dialog-scroller {    height:auto !important; }
@{e-js}.e-pivotclient .e-filterDisableLbl{vertical-align: text-bottom;}
@{e-js}.e-pivotclient .e-filterBtw {
       margin-left: 12px;
}
@{e-js}.e-pivotclient.e-rtl .e-SortFilterDlg .e-preserveHrchy{
   & when (@skin = "office-365"){
       margin-right: 4px !important;
   }
}
@{e-js}.e-pivotclient .e-filterToDiv {  margin-left: 8px;}
@{e-js}.e-pivotclient .borderFilterSortDlg {    border: 1px solid @oclient-border-color; border-top:none;  margin-bottom: 13px;    margin-top: -4px; }
@{e-js}.e-pivotclient .filterMeasureListLbl,@{e-js}.e-pivotclient .e-conditionLbl,@{e-js}.e-pivotclient .e-filterValueLbl {margin-bottom:15px;}
@{e-js}.e-pivotclient .e-orderLbl,@{e-js}.e-pivotclient .e-sortingLbl {
    position: relative; padding-top: 12px; 
}
@{e-js}.e-pivotclient .e-filterValueLbl {
    margin-top: -5px !important;   position: absolute;
}
@{e-js}.e-pivotclient .e-sortDisableLbl,@{e-js}.e-pivotclient .e-sortEnableLbl ,@{e-js}.e-pivotclient .e-radioBtnAscLbl,@{e-js}.e-pivotclient .e-radioBtnDescLbl,@{e-js}.e-pivotclient .e-filterDisableLbl{
    margin-top: 13px; position: absolute;
}
@{e-js}.e-pivotclient .e-preserveHrchyLbl {  margin-top: 2px;  position: absolute; }
@{e-js}.e-pivotclient @{e-js}.e-pivotclient .e-filterLbl { margin-top: -40px;
}
@{e-js}.e-pivotclient .e-measureListLbl {    margin-top: 3px;
}
@{e-js}.e-pivotclient .e-reportCol,@{e-js}.e-pivotclient .e-collectionli, @{e-js}.e-pivotclient .e-reportli {
    & when (@skin = "material") {
        width: auto !important; height: 25px;
    }
    & when not (@skin = "material") {
        width: auto; height: 25px;
    }
}
@{e-js}.e-pivotclient .e-cubeBrowserCalcMember .e-measureGroupCDB:before {
    content: "\e6e1";
    font-size: 18px;
}

@{e-js}.e-pivotclient .e-cubeBrowserCalcMember .e-measureGroupCDB {
    height: 16px;
    width: 16px;
    display: inline-block;
    vertical-align: text-top;
}
@{e-js}.e-pivotclient .e-dimensionCDB, @{e-js}.e-pivotclient .e-folderCDB, @{e-js}.e-pivotclient .e-hierarchyCDB, @{e-js}.e-pivotclient .e-attributeCDB, @{e-js}.e-pivotclient .e-chartCDB, @{e-js}.e-pivotclient .e-namedSetCDB,
@{e-js}.e-pivotclient .e-level0, @{e-js}.e-pivotclient .e-level1, @{e-js}.e-pivotclient .e-level2, @{e-js}.e-pivotclient .e-level3, @{e-js}.e-pivotclient .e-level4, 
@{e-js}.e-pivotclient .e-level5, @{e-js}.e-pivotclient .e-level6, @{e-js}.e-pivotclient .e-level7, @{e-js}.e-pivotclient .e-level8, @{e-js}.e-pivotclient .e-level9, @{e-js}.e-pivotclient .e-level10,@{e-js}.e-pivotclient .e-calcMemberCDB,@{e-js}.e-pivotclient .e-calcMemberGroupCDB
{
  height:16px;
  width:16px;
  display:inline-block;
  vertical-align: text-top;
}
@{e-js}.e-pivotclient .e-attributeCDB:before {
content:"\e6e4";
font-size: 18px;
}

@{e-js}.e-pivotclient .e-folderCDB:before {
content:"\e6e1";
  font-size: 18px;
}
@{e-js}.e-pivotclient .e-dimensionCDB:before {
    content:"\e704";
  font-size: 15px;
}
@{e-js}.e-pivotclient .e-hierarchyCDB:before {
content:"\e6e0";
font-size: 18px;
}
@{e-js}.e-pivotclient .e-chartCDB:before {
content:"\e6e3";
 font-size: 15px;
}

@{e-js}.e-pivotclient .e-namedSetCDB:before {
content:"\e6de";
font-size: 18px;
}
@{e-js}.e-pivotclient .e-level0:before {
    content: "\e6f3";
    font-size: 19px;    
}
@{e-js}.e-pivotclient .e-level1:before {
    content: "\e6f3";
   font-size: 18px;    
}
@{e-js}.e-pivotclient .e-level2:before {
    content: "\e6ec";
  font-size: 17px;
}
@{e-js}.e-pivotclient .e-level3:before {
     content: "\e6eb";
    font-size: 17px;
}
@{e-js}.e-pivotclient .e-level4:before{
     content: "\e6ea";
	font-size: 18px;
}
@{e-js}.e-pivotclient .e-level5:before{
     content: "\e6e9";
	font-size: 17px;
}
@{e-js}.e-pivotclient .e-level6:before{
     content: "\e6e8";
     font-size: 17px;
}
@{e-js}.e-pivotclient .e-level7:before {
     content: "\e6e7";
     font-size: 17px;   
}
@{e-js}.e-pivotclient .e-level8:before {
     content: "\e6e6";
     font-size: 17px;
}
@{e-js}.e-pivotclient .e-level9:before {
    content: "\e6e5";
    font-size: 17px;
}
@{e-js}.e-pivotclient .e-level10:before {
    content: "\e6f2";
    font-size: 17px;    
}
@{e-js}.e-pivotclient .e-dialogOKBtn, @{e-js}.e-pivotclient .e-dialogCancelBtn {
  width: 69px;
  margin-left: 10px;
}
@{e-js}.e-pivotclient .e-dialogOKBtn{
   & when not (@skin = "office-365"){
       margin-left:83px;
   }
   & when (@skin = "office-365"){
       margin-left:65px;
       margin-top:10px;
       margin-bottom:15px;
   }  
}
@{e-js}.e-pivotclient .e-dialogCancelBtn{
   & when (@skin = "office-365"){
       margin-top:10px;
       margin-bottom:15px;
   }  
}
@{e-js}.e-pivotclient .e-checkOptions{
    & when (@skin = "office-365"){
        margin-left: 22px !important;
        margin-right: 16px !important;
   }
}
@{e-js}.e-pivotclient .e-editorPara{
    margin: 0 0 7px;
}
@{e-js}.e-pivotclient .e-loadReportTbl,
@{e-js}.e-pivotclient .e-removeDBReportTbl,
@{e-js}.e-pivotclient .e-renameDBReportTbl {
  margin: 10px 0px 10px 0px;
}
@{e-js}.e-pivotclient .e-loadReportTd,
@{e-js}.e-pivotclient .e-removeDBReportTd,
@{e-js}.e-pivotclient .e-renameDBReportTd {
  width: 100px;
}
@{e-js}.e-pivotclient table.e-renameDBReportTbl tr td{
    padding:5px;
}
@{e-js}.e-pivotclient .e-dialogInput{
    float: right;
    margin: 10px 0px 17px 7px;
}

@{e-js}.e-pivotclient .e-checkAll, @{e-js}.e-pivotclient .e-unCheckAll {
 
  display: inline-block;
  height: 15px;
  width: 16px;
  cursor: pointer;
   & when (@skin = "office-365"){
       margin-right:5px;
   }
}
@{e-js}.e-pivotclient .e-checkAll:hover, @{e-js}.e-pivotclient .e-unCheckAll:hover{
  background: @oclient-icons-hover-bg;
  color: @hover-font-color;
}
@{e-js}.e-pivotclient .e-checkAll:before {
content:"\e6db";
 font-size:16px;
}
@{e-js}.e-pivotclient .e-unCheckAll:before {
content:"\e6da";
font-size:16px;
}

@{e-js}.e-pivotclient .e-unCheckAll {
  margin-left: 5px;
}

@{e-js}.e-pivotclient .e-saveReportImg:before {
  content: "\e6b7";
}
@{e-js}.e-pivotclient .e-loadReportImg:before {
  content: "\e6ce";
}
@{e-js}.e-pivotclient .e-saveAsReportImg:before {
  content: "\e83c";
}
@{e-js}.e-pivotclient .e-removeDBReportImg:before {
  content: "\e83a";
}
@{e-js}.e-pivotclient .e-renameDBReportImg:before {
  content: "\e83b";
}

@{e-js}.e-pivotclient .e-line:before {
  content:"\e6b1";
}
@{e-js}.e-pivotclient .e-spline:before {
  content:"\e6bb";
}
@{e-js}.e-pivotclient .e-column:before {
  content:"\e6a6";
}
@{e-js}.e-pivotclient .e-area:before {
  content:"\e6a2";
}
@{e-js}.e-pivotclient .e-splinearea:before {
  content:"\e6ba";
}
@{e-js}.e-pivotclient .e-stepline:before {
  content:"\e6c0";
}
@{e-js}.e-pivotclient .e-steparea:before {
  content:"\e6be";
}
@{e-js}.e-pivotclient .e-pie:before {
  content:"\e6ca";
}
@{e-js}.e-pivotclient .e-bar:before {
  content:"\e6c5";
}
@{e-js}.e-pivotclient .e-stackingarea:before {
  content:"\e6bc";
}
@{e-js}.e-pivotclient .e-stackingcolumn:before {
  content:"\e6bd";
}
@{e-js}.e-pivotclient .e-stackingbar:before {
  content:"\e6c6";
}
@{e-js}.e-pivotclient .e-pyramid:before {
  content:"\e6c9";
}
@{e-js}.e-pivotclient .e-funnel:before {
  content:"\e6c8";
}
@{e-js}.e-pivotclient .e-doughnut:before {
  content:"\e7dd";
}
@{e-js}.e-pivotclient .e-scatter:before {
  content:"\e7df";
}
@{e-js}.e-pivotclient .e-bubble:before {
  content:"\e7dc";
}
@{e-js}.e-pivotclient .waterfall:before {
  content: "\e838";
}
@{e-js}.e-pivotclient .treemap:before {
  content:"\e810";
}

@{e-js}.e-pivotclient .e-chartTypesIcon:before,
@{e-js}.e-pivotclient .e-reportDBIcon:before {
  font-family: 'ej-webfont';
     & when not (@skin = "material") {
      font-size: 20px;
     }
  margin-left: 2px;
}

@{e-js}.e-pivotclient .e-chartTypesOnGridView {
  display: none !important;
}        

@{e-js}.e-pivotclient .e-chartTypesIcon,
@{e-js}.e-pivotclient .e-chartTypesIcon:hover,
@{e-js}.e-pivotclient .e-reportDBIcon,
@{e-js}.e-pivotclient .e-reportDBIcon:hover {
  background-repeat: no-repeat;
  cursor: default;
  display: inline-block;
  width: 24px;
  & when (@skin = "material") {
       margin: 5px 10px 0px 0px;
  }
   & when not (@skin = "material") {
       height: 28px;
       margin: 5px 5px 0px 0px;
   }
}

@{e-js}.e-pivotclient .e-chartTypesDialog, @{e-js}.e-pivotclient .e-reportDBDialog {
  position: absolute;
  padding: 0px 0px 5px 5px;
  z-index: 1000000;
  .chartTypesDialog-setcolor()
}


@{e-js}.e-pivotclient .e-chartTypesIcon,
@{e-js}.e-pivotclient .e-reportDBIcon {
    & when (@skin = "material") {
     color: fade(@base-font-color, 54%);
    }
    & when not (@skin = "material") {
     color: @oclient-icons-color;
   }
}

@{e-js}.e-pivotclient .e-chartTypesIcon:hover,
@{e-js}.e-pivotclient .e-reportDBIcon:hover {
    & when (@skin = "material") {
     color: fade(@base-font-color, 54%);
    }
    & when not (@skin = "material") {
      color: @toolbar-icons-hvrcolor;
   }
  cursor: pointer;
  background: @oclient-icons-hover-bg;
}

@{e-js}.e-pivotclient .e-activeChartType {
    & when not (@skin = "material") {
      color:@active-font-color;
      background:@oclient-treeview-active;
    }
}
    
@{e-js}.e-pivotclient.e-rtl .errOKBtn{
    & when (@skin = "material") and (@skin = "office-365")  {
     margin-right:150px !important;
    }    
    & when not (@skin = "material") and not (@skin = "office-365") {
      margin-right:155px !important;
    }
}    
@{e-js}.e-pivotclient .e-memberEditorDiv {
  height:256px;
  & when (@skin = "material") {
    margin-top: 24px;
  }
  & when not (@skin = "material") {
   & when not (@skin = "office-365"){
       margin-top: 7px;
   }
  }
  border: 1px solid @oclient-border-color;
  & when (@skin = "office-365"){
       margin-top: 15px;
       margin-bottom:10px;
  }
}
@{e-js}.e-pivotclient .e-labelValueFilterDlg .e-dialogCancelBtn {
      & when (@skin = "office-365"){
    margin-bottom: 0px !important;
    }
}
@{e-js}.e-pivotclient .e-advancedFilterDlg .e-memberSearchEditorDiv {
    padding: 12px 12px 0px 12px !important;
}
@{e-js}.e-pivotclient .e-advancedFilterDlg .e-memberEditorDiv {
    padding:0px !important;
    margin:12px 12px 0px 12px;
}
@{e-js}.e-pivotclient .e-removeSplitBtn, @{e-js}.e-pivotclient .e-removeMeasure {

  background-repeat: no-repeat;
  height: 11px;
  padding-left: 10px;
  width: 11px;
  color: @default-font-color;
}
@{e-js}.e-pivotclient .valuefilter td{
  padding:  6px 2px 6px 8px;
}
@{e-js}.e-pivotclient .e-removeSplitBtn:before{
     & when (@skin = "material") {
         margin-left: 1px;
         margin-top: 1px;
        content: "\e60a";
        font-size: 16px;
    }
    & when not (@skin = "material") {
         margin-left: -6px;
         margin-top: 2px;
         & when not (@skin = "office-365"){
             content:"\e681";
         }
         & when (@skin = "office-365"){
             content:"\e711";
         }
        font-size: 13px;
   }
}
@{e-js}.e-pivotclient .e-splitBtn .e-removeSplitBtn:hover,@{e-js}.e-pivotclient .e-splitBtn .e-removeSplitBtn.e-removeHover{
   cursor: pointer;
    & when (@skin = "material") {
        color:@primary-font-color;
    }
    & when not (@skin = "material") {
       background: @oclient-icons-hover-bg;
       .switch-pivotclient-icon-hover;
   }
}
@{e-js}.e-pivotclient .e-removeSplitBtn { 
  & when not (@skin = "material") {
      background: @toolbar-bgcolor;
      margin: 0 !important;
  }
  & when not (@skin = "office-365") {
      border: 1px solid @oclient-border-color;    
      padding-bottom: 7px;
      padding-right: 0;
  }
  & when (@skin = "office-365") {
      border: none;
      padding:2px 4px 7px 10px;    
  }
  display: inline-block;
  float: none;
  position: absolute;
  .material-normal-box-shadow;
}
@{e-js}.e-pivotclient input.e-memberCurrentPage,@{e-js}.e-pivotclient input.e-memberCurrentSearchPage,@{e-js}.e-pivotclient input.e-memberCurrentDrillPage {
    & when (@skin = "office-365"){
       width:23px !important;
       height:15px !important;
   }
}
@{e-js}.e-pivotclient .e-removeMeasure { 
  background-position: 0 -1835px !important;
  margin: 4px;
  color:@oclient-icons-color;
   & when (@skin = "office-365"){
       padding:3px 5px 6px 3px;
   }
}
@{e-js}.e-pivotclient .e-removeMeasure:hover{
    & when (@skin = "office-365"){
       background-color:@neutral-lighter;
   }
}
@{e-js}.e-pivotclient .e-removeMeasure:before {
 content:"\e681";
 font-size:13px;
 display: inline-block;
 }
@{e-js}.e-pivotclient .e-measureEditor {
   & when not (@skin = "office-365"){
       margin: 3px 5px 0px 5px;
   }
   & when (@skin = "office-365"){
       margin: 3px 15px 0px 15px;
       background-color:@neutral-white !important;
   }  
}
@{e-js}.e-pivotclient .e-measureEditor:hover {
  .oclient-header-color();
  cursor: pointer;
}
@{e-js}.e-pivotclient .e-measureEditor:focus{
   & when (@skin = "office-365"){
       background-color:@neutral-lighter;
   }
}
@{e-js}.e-pivotclient button.e-dialogOKBtn, @{e-js}.e-pivotclient .e-dialogFooter button:first-child, @{e-js}.e-pivotclient button.e-errOKBtn, @{e-js}.e-pivotclient button.e-btnCalcMemberOk {
   & when (@skin = "office-365"){
       background-color: @theme-primary;
       color:@theme-primary-font;
       border:1px @theme-primary;
   }    
}
@{e-js}.e-pivotclient button.e-dialogOKBtn:hover, @{e-js}.e-pivotclient .e-dialogFooter button:first-child:hover, @{e-js}.e-pivotclient button.e-errOKBtn:hover, @{e-js}.e-pivotclient button.e-btnCalcMemberOk:hover {
   & when (@skin = "office-365"){
       background-color: @theme-dark;
       color:@theme-primary-font;
       border:1px @theme-dark;
   }    
}
@{e-js}.e-pivotclient button.e-dialogOKBtn:focus, @{e-js}.e-pivotclient .e-dialogFooter button:first-child:focus, @{e-js}.e-pivotclient button.e-errOKBtn:focus, @{e-js}.e-pivotclient button.e-btnCalcMemberOk:focus {
   & when (@skin = "office-365"){
       background-color: @theme-dark;
       color:@theme-primary-font;
       border:1px @theme-primary;
   }    
}
@{e-js}.e-pivotclient button.e-dialogOKBtn:active, @{e-js}.e-pivotclient .e-dialogFooter button:first-child:active, @{e-js}.e-pivotclient button.e-errOKBtn:active, @{e-js}.e-pivotclient button.e-btnCalcMemberOk:active {
   & when (@skin = "office-365"){
       background-color: @theme-primary;
       color:@theme-primary-font;
       border:1px @theme-primary;
   }    
}

@{e-js}.e-pivotclient .e-nodetext {
  font-size:inherit !important;
}

@{e-js}.e-pivotclient .e-dialog { 
& when not (@skin = "material") and not (@skin = "office-365") {
    font: bold 12px @font-family !important;
    opacity: 1 !important;
  }
 }

@{e-js}.e-pivotclient .e-corner-all {
  border-radius: 0px !important;
}

@{e-js}.e-pivotclient .e-button {
  font-size: 12px !important;
   & when (@skin = "office-365"){
       padding: 0px 8px 0px 8px !important;
   }
}
/*@{e-js}.e-pivotclient .e-alertOKBtn {
    display: inline-block;
    margin: 20px 0 10px 165px;
    width: 50px;
}
@{e-js}.e-pivotclient .e-alertContent {
    font: normal 14px Segoe UI;
}*/
@{e-js}.e-pivotclient .e-treeview {
  background-color: @bg-value-color;
}
@{e-js}.e-pivotclient .e-treeview ul {
  margin: 0;
}

@{e-js}.e-pivotclient .e-treeview, @{e-js}.e-pivotclient .e-text 
{
   & when not (@skin = "material") and not (@skin = "office-365") {
    font-size: 12px;
   }
}

@{e-js}.e-pivotclient .e-tab, @{e-js}.e-pivotclient .e-header 
{
    width: auto;
}

@{e-js}.e-pivotclient .e-tab, @{e-js}.e-pivotclient .e-active-content 
{
    padding: 0 !important;
}
@{e-js}.e-pivotclient .e-tab, @{e-js}.e-pivotclient .e-content 
{
    border-width:0;
}
@{e-js}.e-pivotclient .e-toolbar 
{
    .material-pivotclient-box-shadow;
    border-width: 1px 0;
    & when (@skin = "material") {
     height:56px !important;
    }
}
@{e-js}.e-pivotclient .e-input 
{
    line-height: normal !important;
}
@{e-js}.e-pivotclient .e-progress-txt 
{
    top: -2px !important;
}
@{e-js}.e-pivotclient .filter
{
    display: none !important;
}
@{e-js}.e-cdbHeader.e-responsive,
@{e-js}.e-cubeBrowser.e-responsive {
      width: 98% !important;	  
}
@{e-js}.e-pivotclient .oClientTbl{
    position: relative;
}
@{e-js}.e-rowAxis.e-responsive,
@{e-js}.e-slicerAxis.e-responsive,
@{e-js}.e-categoricalAxis.e-responsive,
@{e-js}.e-axisHeader.e-responsive
{
     width: 95% !important;
}

@{e-js}.e-pivotclient .e-reportDlg {
    margin-bottom: -10px;
}
@{e-js}.e-pivotclient .e-dialogFooter {
   & when not (@skin = "office-365") and not (@skin = "material") {
     margin: 7px 0 6px;
   }
   & when (@skin = "office-365"){
     margin: 8px 0 20px;
   }
   float:right;
}
@{e-js}.e-pivotclient .e-dialogFooter .e-dialogOKBtn, @{e-js}.e-pivotclient .e-dialogFooter .e-dialogCancelBtn{
   & when (@skin = "office-365"){
    margin-top: 0px !important;
    margin-bottom: 0px !important;
   }
}

@{e-js}.e-pivotclient .e-dialog .e-dialogPara {
    & when (@skin = "office-365"){
        margin-right: 8px;
    }
}

@{e-js}.e-pivotclient .e-dialog .e-clientDialog, @{e-js}.e-pivotclient .e-dialog .e-errorDialog{
     & when (@skin = "office-365"){
        padding-right: 25px;     
        padding-left: 25px;  
    }
}

@{e-js}.e-pivotclient .e-filterDialog tr:first-child td{
    & when (@skin = "office-365"){
        padding-bottom: 15px;             
    }
}

@{e-js}.e-pivotclient .e-filterDialog input.e-filterValues {
    & when (@skin = "office-365"){
        width: 160px !important;
        height: 25px !important;
        margin-left:0px !important;
    }
}

@{e-js}.e-pivotclient .e-filterDialog .e-ddl {
    & when (@skin = "office-365"){
        width: 200px !important;
        height: 32px !important;
    }
}

@{e-js}.e-pivotclient.e-rtl .e-filterDialog .e-dialogCancelBtn{
   & when (@skin = "office-365"){
       margin-right:0px !important;
   }
}

@{e-js}.e-pivotclient .e-filterDialog .e-dialogCancelBtn{
	margin-right:10px;
   & when (@skin = "office-365"){
       margin-right:14px !important;
   }
}

@{e-js}.e-pivotclient table.e-renameDBReportTbl tr td:first-child{
    & when (@skin = "office-365"){
        padding-bottom: 15px;     
    }
}

@{e-js}.e-pivotclient e-reportCol, @{e-js}.e-pivotclient .e-collectionli,@{e-js}.e-pivotclient .e-reportli {
    margin-left: 3px;
}

@{e-js}.e-pivotclient.e-rtl .e-reportDlg table td {
    width: 100px;
}
@{e-js}.e-pivotclient.e-rtl .e-reportDlg {
    margin-left: -5px;
}
@{e-js}.e-pivotclient.e-rtl .e-titleText span {
    padding-right: 10px;
}

@{e-js}.e-pivotclient.e-rtl .e-splitBtn, @{e-js}.e-pivotclient.e-rtl .e-cubeName {
    margin: 7px 6px 0 0;
}

 @{e-js}.e-pivotclient.e-rtl .e-controlPanel {
    right: 10px;
}
 @{e-js}.e-pivotclient.e-rtl .e-controlPanel .e-icon{
    float: right;
}
@{e-js}.e-pivotclient .kpiGoal:before, @{e-js}.e-pivotclient .kpiStatus:before, @{e-js}.e-pivotclient .kpiTrend:before, @{e-js}.e-pivotclient .kpiValue:before{
content:"\e6df";
font-size: 18px;
}
@{e-js}.e-pivotclient .kpiGoal, @{e-js}.e-pivotclient .kpiStatus, @{e-js}.e-pivotclient .kpiTrend, @{e-js}.e-pivotclient .kpiValue{
  height:16px;
  width:16px;
  display:inline-block;
  vertical-align: text-top;
}
@{e-js}.e-pivotclient.e-rtl .e-controlPanel .e-expand, @{e-js}.e-pivotclient.e-rtl .e-controlPanel .e-collapse {
float: none !important;
}
@{e-js}.e-pivotclient.e-rtl .sortfilterTab .e-content{
    float: none;
}
 @{e-js}.e-pivotclient.e-rtl .e-unCheckAll {
    margin-right: 4px;
}

@{e-js}.e-pivotclient.e-rtl .e-filterFrmDiv, @{e-js}.e-pivotclient.e-rtl .e-filterToDiv, @{e-js}.e-pivotclient.e-rtl .e-filterBtw {
    float: right;
}

@{e-js}.e-pivotclient.e-rtl .e-sortDisableLbl, @{e-js}.e-pivotclient.e-rtl .e-sortEnableLbl, @{e-js}.e-pivotclient.e-rtl .e-radioBtnAscLbl, @{e-js}.e-pivotclient.e-rtl .e-radioBtnDescLbl, @{e-js}.e-pivotclient.e-rtl .e-preserveHrchyLbl, @{e-js}.e-pivotclient.e-rtl .e-filterDisableLbl {
    margin-right: 4px;
}

@{e-js}.e-pivotclient .e-SortFilterDlg .e-clientDialog {
    & when (@skin = "office-365"){   
        padding: 0px 25px 0px 25px !important;
    }
}

@{e-js}.e-pivotclient.e-rtl .e-dialogFooter {
    float: left;
    margin: 7px 6px 7px;
}

@{e-js}.e-pivotclient.e-rtl .e-dialogOKBtn {
   & when not (@skin = "office-365"){
        margin-left: 10px;
        margin-right: 91px;
   }
   & when (@skin = "office-365"){
        margin-left: 12px;
        margin-right: 65px;
   }   
}

@{e-js}.e-pivotclient.e-rtl .e-dialogCancelBtn {
   & when not (@skin = "office-365"){
       margin-left: -5px;
   }
   & when (@skin = "office-365"){
       margin-left: 0px;
   }    
}
@{e-js}.e-pivotclient.e-rtl .e-dialogFooter .e-dialogCancelBtn {
    & when (@skin = "office-365"){
       margin-left: -10px !important;
   }
}
@{e-js}.e-pivotclient.e-rtl .e-chartPanel {
    direction: ltr;
    margin: 5px -7px 0px 0px;
}
@{e-js}.e-pivotclient.e-rtl .e-gridPanel {
    margin-left: 1px;
}
@{e-js}.e-pivotclient.e-rtl .e-pivotGridTable.e-rtl .e-expand,@{e-js}.e-pivotclient.e-rtl .e-pivotGridTable.e-rtl .e-collapse {
            float:none !important;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotHeader,
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-rPivotHeader,
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-schemaFilter,
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-schemaColumn,
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-schemaRow,
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-schemaValue {
    margin: 0 !important;
    width: 100%;
}
@{e-js}.e-pivotclient .e-pGridTooltip {
    position: absolute !important;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-dropIndicator {
    margin-top: 0px !important;
    & when (@skin = "material") {
        border-top: 3px dashed @grey-600;
    }
    & when not (@skin = "material") {
        border-top: 3px dashed @active-bg-stcolor;
    }
    visibility: hidden;
    height: 2px;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotButton:hover .e-dropIndicatorActive {
 visibility: visible;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-schemaFieldTree.e-treeview .e-text {
    min-height: 0px !important;
    font-weight: normal!important;
    width: auto;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotButton > .e-pvtBtn {
    & when (@skin = "material") {
        margin-top: -3px;
        margin-left: 12px;
        margin-bottom:6px;
    }
    & when not (@skin = "material") {
        margin-top: -5px;
        & when not (@skin = "office-365"){
            margin-left: 2px;
        }
        & when (@skin = "office-365"){
            margin-left: 0px;
        }
    }
    margin-right:0px;
    width: auto!important;
    height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner .e-pivotButton>.e-pvtBtn{
    & when not (@skin = "material") and not (@skin = "office-365") {
        margin-right: 2px;
        margin-left: 0px;
    }
}
 @{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotButton > .e-pvtBtn:hover {
    & when (@skin = "material") {
       border:none;
    }
    & when not (@skin = "material") {
        .office-pivot-button-border();
        border-color:@header-border-color !important;
    }
}
 @{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotButton{
     & when (@skin = "office-365") {
         margin:4px 8px 0px 8px;
     }
 }
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-removeClientPivotBtn:before {
  & when (@skin = "material") {
    content: "\e60a";
    margin-top: 1px !important;
    font-size: 16px !important;
  }
  & when not (@skin = "material") {
        & when not (@skin = "office-365"){
            content: "\e681" !important;
        }
        & when (@skin = "office-365"){
            content: "\e711" !important;
        }    
     margin-top: 2.75px !important;
    font-size: 13px !important;
  }
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-schemaColumn div:first-child, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-schemaRow div:first-child, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-schemaFilter div:first-child, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-schemaValue div:first-child {
    & when (@skin = "office-365"){
        margin-top: 8px;
    }
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-removeClientPivotBtn {
     display: inline-block !important;
     float: none!important;
     box-sizing:content-box !important;
    & when (@skin = "material") {
        border:none !important;
        margin-left:32px;
        margin-right:8px;
        color:fade(@base-font-color,26%);
    }
    & when (@skin = "office-365"){
        border:none;
        padding:1px 0px 1px 1px; 
    }
    & when not (@skin = "material") {
        & when not (@skin = "office-365"){
         border: 1px solid @header-border-color !important;
        }
         margin: 0 !important;
         margin-top:4px;
         background: @default-bg-endcolor !important;
         height:18px;
    }
     padding-right: 0 !important;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-removeClientPivotBtn:hover,@{e-js}.e-pivotclient .e-pivotschemadesigner .e-removeClientPivotBtn.e-removeHover{
     cursor: pointer;
    & when (@skin = "material") {
        color:@primary-font-color;
    }
    & when (@skin = "office-365"){
        background-color:@neutral-light !important;
    }
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-olapFieldList {
    & when (@skin = "material") {
      border: 1px solid @grey-300;
    }
    & when not (@skin = "material") {
       border: 1px solid @header-border-color;
       & when (@skin = "office-365"){
            border: 1px solid @neutral-light !important;
       }
    }
     margin-top: 8px;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner,
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-fieldTable,
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-axisTable,
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-axisTd1,
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-axisTd2 {
    float: left !important;
}

@{e-js}.e-pivotclient .e-pivotschemadesigner .e-axisTable {
    margin-top: 6px;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .addedFieldTable {
margin: 6px 7px 8px 5px;
width: 43% !important;
}

@{e-js}.e-pivotclient .e-pivotschemadesigner .e-clientFieldTable{
    float: right !important;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-clientAxisSplitterTable{
      margin-left: 0px !important;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-clientAxisTable{
    width: 50% !important;
    margin-left: 0px !important;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner #axisTd {
    margin-top: 0px !important;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-axisTd2,
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-axisTd1 {
    height: 27%;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-cubelists {
    margin-bottom: -2px;
    & when (@skin = "material"){
        margin-left:10px;
    }
}
@{e-js}.e-pivotclient .e-pivotschemadesigner {
    border: none;
    & when (@skin = "material") {
        padding:6px 0px 0px 0px;
        background-color:@content-bg-color;
    }
    & when (@skin = "office-365") {
        padding:0px 0px 0px 0px;
        background-color:@content-bg-color;
    }
}
@{e-js}.e-pivotclient .e-toggleButtons {
    width: 15px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
}
@{e-js}.e-pivotclient .e-togglePanel {
     float: left;
     margin-left: 5px;
     background-color: @default-bg-endcolor;
}
@{e-js}.e-pivotclient .e-gridPanel {
     background: none !important;
 }
@{e-js}.e-pivotclient .e-clrFilter:before {
    content: "\e668";
    font-size: 16px;
    float: left;
}
@{e-js}.e-pivotclient .e-activeFilter:before {
    content: "\e657";
    height: 16px;
    width: 16px;
}
@{e-js}.e-pivotclient #clientDialog_wrapper.e-advancedFilterDlg .e-scroller {
    overflow: visible!important;
    border: none;
}
@{e-js}.e-pivotclient #clientDialog_wrapper.e-rtl.e-advancedFilterDlg .e-scroller>.e-content {
    overflow: visible!important;
}
 .e-pivotschemadesigner #clientDialog_wrapper.e-advancedFilterDlg .e-clientDialog {
    overflow: visible !important;
 }
 @{e-js}.e-pivotclient #sep1, @{e-js}.e-pivotclient #sep2, @{e-js}.e-pivotclient #sep3, @{e-js}.e-pivotclient #sep4, @{e-js}.e-pivotclient #sep5, @{e-js}.e-pivotclient #sep6, @{e-js}.e-pivotclient #sep7, @{e-js}.e-pivotclient #sep8, @{e-js}.e-pivotclient #sep9{
    height: 1px;
    background-color: @oclient-border-color;
    margin-left: 30px;
}
 @{e-js}.e-pivotclient #sep1{
     height: 0px;
 }
@{e-js}.e-pivotclient #labelFilterBtn,
@{e-js}.e-pivotclient #ascOrder,
@{e-js}.e-pivotclient #descOrder,
@{e-js}.e-pivotclient #clearAllFilters,
@{e-js}.e-pivotclient #clearSorting
{
   border-bottom:none;
}
@{e-js}.e-pivotclient .e-advancedFilterDlg .e-treeview .e-text
{
    font-weight: normal;
}
@{e-js}.e-pivotclient .e-clrSort:before {
    font-size: 22px;
    float: left;
    margin-top: -1px;
}
@{e-js}.e-pivotclient .e-selectedSort {
    border:1px solid !important;
}

@{e-js}.e-pivotclient .e-filterElementTag.e-vertical{
    border-color: @content-bg-color;
}
@{e-js}.e-pivotclient .e-filterElementTag{
& when (@skin = "material") {
    box-shadow:none !important;
   }
}
@{e-js}.e-pivotclient .e-filterIndicator {
    height: 16px;
    width: 16px;
    position:absolute;
    top:150px;
    margin-left:-12px;
}
@{e-js}.e-pivotclient .e-filterIndicator:before {
    content: "\e657";
    height: 16px;
    width: 16px;
}

@{e-js}.e-pivotclient .e-filterDialog td {    
   & when not (@skin = "office-365"){
       padding-left: 6px;
   }
   & when (@skin = "office-365"){
       padding-right: 15px;
   }
}
@{e-js}.e-pivotclient .e-filterDialog{
    & when (@skin = "office-365"){
       margin-left:0px;
   }
}
@{e-js}.e-pivotclient .e-filterElementTag a.e-menulink{
   & when (@skin = "office-365"){
       padding-left: 30px !important;
       padding-right:30px !important;
   }
}
@{e-js}.e-pivotclient .e-pivotButton button:active,@{e-js}.e-pivotclient .e-splitBtn button:active{
   & when (@skin = "office-365"){
        background-color:@neutral-light;
        color:@neutral-primary;
   }
}
@{e-js}.e-pivotclient .e-advancedFilterDlg .e-ddlGroupWrap{
    & when (@skin = "office-365"){
    padding: 0px 12px;
   }
}
@{e-js}.e-pivotclient .e-filterElementTag{
    height: auto !important;
}
@{e-js}.e-pivotclient .e-advancedFilterDlg .e-menu-wrap{
    & when (@skin = "office-365"){
       padding-left: 10px !important;
       padding-right: 10px !important
   }
}
@{e-js}.e-pivotclient .e-clientDialog .e-menu.e-vertical .e-list>.e-menulink>span.e-icon.e-arrowhead-right{
   & when (@skin = "office-365"){
       right:0px !important;
   }
}
@{e-js}.e-pivotclient.e-rtl .e-clientDialog .e-menu.e-vertical .e-list>.e-menulink>span.e-icon.e-arrowhead-right{
    & when (@skin = "office-365"){
       right:auto !important;
   }
}
@{e-js}.e-pivotclient .e-pivotpager {
    border: 1px solid @oclient-border-color;
    margin-bottom:5px;
    margin-left:6px !important;    
    & when (@skin = "office-365"){        
        border: 1px solid @neutral-light;
    }    
}
@{e-js}.e-pivotclient .e-pivotpager table{
    margin-left:auto !important;
    margin-right:auto !important;
}
@{e-js}.e-pivotclient .e-pivotpager .e-pagerDiv {
    padding: 0px;
}
@{e-js}.e-pivotclient .e-pivotpager .e-pagerTextBox {
   & when not (@skin = "office-365"){
       height: 14px;
   }
   & when (@skin = "office-365"){
       height: 16px;
   }    
}
@{e-js}.e-pivotclient .inActive {
    display: none;
}
@{e-js}.e-pivotclient .e-pivotpager tr{
   & when (@skin = "office-365"){
       height:32px;
   }
}
@{e-js}.e-pivotclient .e-pivotpager .e-movePrevious, @{e-js}.e-pivotclient .e-pivotpager .e-moveNext, .e-pivotpager .e-moveFirst, @{e-js}.e-pivotclient .e-pivotpager .e-moveLast{
    & when (@skin = "office-365"){
       width:18px;
   }
}
@{e-js}.e-pivotclient .e-pivotpager .e-movePrevious ,@{e-js}.e-pivotclient .e-pivotpager .e-pagerLabel,@{e-js}.e-pivotclient .e-pivotpager .e-pagerTextBox,@{e-js}.e-pivotclient .e-pivotpager .e-moveNext,@{e-js}.e-pivotclient .e-pivotpager .e-moveLast {
        & when (@skin = "office-365") and (@skin = "material"){
        margin-left:0px !important;
        }
  }
@{e-js}.e-pivotclient .e-vScrollPanel{
    .scrollPane-setcolor();
    width: 0px;
    margin-left: 5px;
    display: inline-block;
    border-radius:10px;
}
@{e-js}.e-pivotclient .e-vScrollThumb {
    width: 11px;
    position: relative;
    top: 1px;
    z-index:1000;
    border-radius:5px;
    .scrollThumb-setcolor();
}
@{e-js}.e-pivotclient .e-hScrollPanel {
    .scrollPane-setcolor();
    width: 0px;
    height: 6px;
    border-radius:10px;
}
@{e-js}.e-pivotclient .e-hScrollThumb {
    border-radius:5px;
    height: 11px;
    position: relative;
    left: 1px;
    top: 1px;
    z-index:1000;
    .scrollThumb-setcolor();
}
@{e-js}.e-pivotclient .e-vScrollThumb:hover,@{e-js}.e-pivotclient .e-hScrollThumb:hover {
    .scrollThumb-hovercolor();
}
@{e-js}.e-pivotclient .e-categPageIndicator, @{e-js}.e-pivotclient .e-seriesPageIndicator {
    width: auto;
    .pageIndicator-setcolor();
    padding: 5px;
    position: absolute;
    z-index: 1000;
    border-radius: 7px;
    .pageIndicator-setcolor();
}
 @{e-js}.e-pivotclient .e-pivotschemadesigner #axisTd, @{e-js}.e-pivotclient .e-pivotschemadesigner #axisTd3{
	margin-top:0px !important;
}
@{e-js}.e-pivotclient .hsVirtualScrolling {
    margin-bottom: 5px;
}
@{e-js}.e-pivotclient .e-dialog.e-advancedFilterDlg .e-menu.e-vertical .e-list>ul{
  & when (@skin = "material") {
    box-shadow:0 8px 10px 0 rgba(0,0,0,.24);
  }
}
@{e-js}.e-pivotclient .e-icon.e-searchEditorTree:before {
    content: "\e812";
    cursor: pointer;
}

@{e-js}.e-pivotclient .e-dialog .e-icon.e-searchEditorTree{
    display: inline-block;
    position: absolute;
    & when not (@skin = "material") and not (@skin = "office-365") {
     top: 37px;
    left: 225px;
    }
  & when (@skin = "material") {
   top: 60px;
    left: 235px;
  }
    & when (@skin = "office-365") {
    top: 35px;
    left: 220px;
  }

}
@{e-js}.e-pivotclient  .e-pivotschemadesigner .e-dialog .e-icon.e-searchEditorTree{
    display: inline-block;
    position: absolute;
    & when not (@skin = "material") and not (@skin = "office-365") {
    top: 15px;
    left: 232px;
    }
  & when (@skin = "material") {
    top: 32px;
    left: 222px;
  }
    & when (@skin = "office-365") {
    top: 10px;
    left: 220px;
  }
}
@{e-js}.e-pivotclient .e-dialog .e-titlebar{
    & when (@skin = "office-365") {
        padding: 10px 25px 15px;
  }
}
@{e-js}.e-pivotclient .e-dialog.e-SortFilterDlg .e-titlebar {
    & when (@skin = "office-365") {
    padding: 20px 25px 25px;
    }
}
@{e-js}.e-pivotclient.e-rtl .e-dialog.e-rtl .e-icon.e-searchEditorTree{
    display: inline-block;
    position: absolute;
   & when not (@skin = "material") and not (@skin = "office-365") {
    top: 37px;
    left: 13px;
    }
  & when (@skin = "material") {
   top: 60px;
    left: 25px;
  }
    & when (@skin = "office-365") {
    top: 35px;
    left: 27px;
  }
}
@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner.e-rtl .e-dialog.e-rtl .e-icon.e-searchEditorTree{
    display: inline-block;
    position: absolute;
   & when not (@skin = "material") and not (@skin = "office-365") {
    top: 15px;
    left: 13px;
    }
  & when (@skin = "material") {
    top: 32px;
    left: 25px;
  }
    & when (@skin = "office-365") {
    top: 11px;
    left: 27px;
  }
}
@{e-js}.e-pivotclient.e-rtl .e-dialog.e-advancedFilterDlg.e-rtl .e-icon.e-searchEditorTree{
    display: inline-block;
    position: absolute;
       & when not (@skin = "material") and not (@skin = "office-365") {
    top: 118px;
    left: 18px;
    }
  & when (@skin = "material") {
    top: 175px;
    left: 30px;
  }
    & when (@skin = "office-365") {
    top: 135px;
    left: 32px;
  }
}

@{e-js}.e-pivotclient .e-controlPanel .e-rtl .e-pivotchart .e-scroller .e-icon {
	float: left;
}
		
@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner.e-rtl .e-dialog.e-advancedFilterDlg.e-rtl .e-icon.e-searchEditorTree{
    display: inline-block;
    position: absolute;
       & when not (@skin = "material") and not (@skin = "office-365") {
    top: 229px;
    left: 12px;
    }
  & when (@skin = "material") {
    top: 320px;
    left: 12px;
  }
    & when (@skin = "office-365") {
    top: 305px;
    left: 12px;
  }
}
@{e-js}.e-pivotclient .e-dialog.e-advancedFilterDlg .e-icon.e-searchEditorTree{
    display: inline-block;
    position: absolute;
       & when not (@skin = "material") and not (@skin = "office-365") {
    top: 118px;
    left: 225px;
    }
  & when (@skin = "material") {
    top: 175px;
    left: 235px;
  }
    & when (@skin = "office-365") {
    top: 135px;
    left: 215px;
  }
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog.e-advancedFilterDlg .e-icon.e-searchEditorTree{
    display: inline-block;
    position: absolute;
       & when not (@skin = "material") and not (@skin = "office-365") {
    top: 236px;
    left: 235px;
    }
  & when (@skin = "material") {
    top: 320px;
    left: 240px;
  }
  & when (@skin = "office-365") {
    top: 302px;
    left: 235px;
  }
}
@{e-js}.e-pivotclient .e-dialog .e-calcMemberFooter{
    text-align:right;
    & when not (@skin = "material") and not (@skin = "office-365") {
      margin-top:18px;
    }
  & when (@skin = "office-365") {
      margin-top:20px;
  }
    & when (@skin = "material") {
    margin-top:24px;
  }
}
@{e-js}.e-pivotclient.e-rtl .e-dialog.e-rtl .e-calcMemberFooter{
    text-align:left;
    margin-top:18px;
}
@{e-js}.e-pivotclient .e-dialog .e-btnCalcMemberOk{
    & when not (@skin = "office-365") {
     margin:0px 18px;
    }
  & when (@skin = "office-365") {
    margin:0px 8px;
  }
}
@{e-js}.e-pivotclient .e-dialog .e-cubeBrowserCalcMember{
    border:1px solid @default-border-color;
    display:inline-block;
    vertical-align: top;
}
@{e-js}.e-pivotclient .e-dialog .e-cubeTreeViewCalcMember{
    & when not (@skin = "material") and not (@skin = "office-365") {
     height:371px;
      width:250px;
    }
  & when (@skin = "office-365") {
     height:458px;
     width:300px;
  }
    & when (@skin = "material") {
     height:582px;
     width:370px;
  }
}

@{e-js}.e-pivotclient .e-dialog .e-calcMemberFieldPanel {
    display:inline-block;
    & when not (@skin = "material") and not (@skin = "office-365") {
    margin-left:15px;
     width: 250px;
    }
  & when (@skin = "office-365") {
    margin-left:20px;
    width: 300px;
  }
  & when (@skin = "material") {
    margin-left:24px;
   width: 370px;
  }
    vertical-align: top;
}
@{e-js}.e-pivotclient .e-dialog.e-calcMemberDialog .e-widget-content{
            & when not (@skin = "material") and not (@skin = "office-365") {
    padding:20px 15px 18px 15px;
    }
}
@{e-js}.e-pivotclient .e-dialog.e-calcMemberDialog .expressionFieldCM{
  & when not (@skin = "material") and not (@skin = "office-365") {
    width:234px;
    }
    & when (@skin = "material") {
    width:366px !important;
    }
    & when (@skin = "office-365") {
    width:285px !important;
    }
    height:100px;
    resize:none;
}
@{e-js}.e-pivotclient .e-dialog.e-calcMemberDialog .e-mask,@{e-js}.e-pivotclient .e-dialog.e-calcMemberDialog .e-ddl,@{e-js}.e-pivotclient .e-dialog.e-calcMemberDialog textarea{
  & when not (@skin = "material") and not (@skin = "office-365") {
    margin-top:2px;
    margin-bottom:10px;
    }
  & when (@skin = "office-365") {
    margin-bottom:15px;
  }
  & when (@skin = "material") {
    margin-bottom:24px;
  }
}
@{e-js}.e-pivotclient .e-dialog.e-calcMemberDialog .e-ddl{
  & when not (@skin = "material") and not (@skin = "office-365") {
    margin-bottom:6px;
  }
} 
@{e-js}.e-pivotclient .e-dialog.e-rtl .e-calcMemberFieldPanel{
    margin-left:0px;
    margin-right:15px;
}
@{e-js}.e-pivotclient .e-dialog .e-calcMemberFieldPanel label{
  & when not (@skin = "material") and not (@skin = "office-365") {
    margin-bottom:0px;
  }
    & when (@skin = "office-365") {
    margin-bottom:10px;
  }
        & when (@skin = "material") {
    margin-bottom:24px;
    font-size:14px;
  }
}
@{e-js}.e-pivotclient .e-dialog.e-calcMemberDialog .e-calcMemberCustomFormat{
    margin-bottom:0px;
}
@{e-js}.e-pivotclient .e-dialog.e-calcMemberDialog .e-calcMemberDimensionField
{
      & when not (@skin = "material") and not (@skin = "office-365") {
    margin-bottom:10px;
    }
          & when (@skin = "office-365") {
    margin-bottom:15px;
  }
        & when (@skin = "material") {
    margin-bottom:24px;
  }
}
@{e-js}.e-pivotclient .e-calcMemberCDB:before {
  & when not (@skin = "material") and not (@skin = "office-365") {
    content:"\e870";
    font-size: 18px;
  }
      & when (@skin = "material") {
    content:"\e843";
    }
     & when (@skin = "office-365") {
    content:"\e86c";
      }
}
@{e-js}.e-pivotclient .e-calcMemberGroupCDB:before {
  & when not (@skin = "material") and not (@skin = "office-365") {
    content:"\e870";
    font-size: 18px;
  }
      & when (@skin = "material") {
    content:"\e843";
    }
     & when (@skin = "office-365") {
    content:"\e86c";
      }
}
@{e-js}.e-pivotclient .e-dialog.e-calcMemberDialog .e-maskedit,@{e-js}.e-pivotclient .e-dialog.e-calcMemberDialog .textarea{
    font:14px @font-family !important;
}

@{e-js}.e-pivotclient .e-dialog .e-memberPager, @{e-js}.e-pivotclient .e-dialog .e-memberSearchPager, @{e-js}.e-pivotclient .e-dialog .e-memberDrillPager {
    margin-top:10px;
    margin-bottom:20px;
}
@{e-js}.e-pivotclient .e-dialog .e-memberPager+div.e-dialogFooter {
        & when not (@skin = "material") and not (@skin = "office-365") {
    margin-bottom:10px !important;
    margin-top:0px;
    }
    & when (@skin = "material") {
    margin-bottom:0px !important;
    }
     & when (@skin = "office-365") {
        margin-bottom:20px !important;
      }
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-advancedFilterDlg .e-memberPager, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-advancedFilterDlg .e-memberSearchPager, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-advancedFilterDlg .e-memberDrillPager{
    margin-left:12px;
    margin-right:12px;
}
@{e-js}.e-pivotclient .e-firstPage.e-pageDisabled, @{e-js}.e-pivotclient .e-prevPage.e-pageDisabled, @{e-js}.e-pivotclient .e-nextPage.e-pageDisabled,@{e-js}.e-pivotclient .e-lastPage.e-pageDisabled {
        & when not (@skin = "material") and not (@skin = "office-365") {
        filter: alpha(opacity=50) !important;
        -moz-opacity: 0.5 !important;
        opacity: 0.5 !important;
      }
        & when (@skin = "material"){
        filter: alpha(opacity=100) !important;
        -moz-opacity: 1 !important;
        opacity: 1 !important;
        color: fade(#000000, 24%);
      }
      & when (@skin = "office-365") {
         filter: alpha(opacity=100) !important;
        -moz-opacity: 1 !important;
        opacity: 1 !important;
         color: #c8c8c8;
      }
}
@{e-js}.e-pivotclient .e-firstPage.e-pageEnabled, @{e-js}.e-pivotclient .e-prevPage.e-pageEnabled, @{e-js}.e-pivotclient .e-nextPage.e-pageEnabled,@{e-js}.e-pivotclient .e-lastPage.e-pageEnabled {
        -moz-opacity: 1 !important;
        opacity: 1 !important;
        filter: alpha(opacity=100) !important;
      & when (@skin = "material"){
        color: fade(#000000, 54%);
      }
      & when (@skin = "office-365") {
        color: #666;
      }
}
@{e-js}.e-pivotclient .e-firstPage.e-pageEnabled:hover, @{e-js}.e-pivotclient .e-prevPage.e-pageEnabled:hover, @{e-js}.e-pivotclient .e-nextPage.e-pageEnabled:hover,@{e-js}.e-pivotclient .e-lastPage.e-pageEnabled:hover {
       & when not (@skin = "material"){
     background-color:@hover-bg-stcolor;
    }

}
@{e-js}.e-pivotclient .e-firstPage.e-pageEnabled:active, @{e-js}.e-pivotclient .e-prevPage.e-pageEnabled:active, @{e-js}.e-pivotclient .e-nextPage.e-pageEnabled:active,@{e-js}.e-pivotclient .e-lastPage.e-pageEnabled:active {
           & when not (@skin = "material"){
    background-color:@active-bg-stcolor;
    color:@active-font-color;
   }
}
/*@{e-js}.e-pivotclient .e-dialog .memberPager+div .e-btn,@{e-js}.e-pivotclient .e-dialog.calcMemberDialog .calcMemberFooter .e-btn{
        & when not (@skin = "material") and not (@skin = "office-365") {
    border-radius:4px;
    }
}*/
@{e-js}.e-pivotclient .e-firstPage, @{e-js}.e-pivotclient .e-prevPage, @{e-js}.e-pivotclient .e-nextPage,@{e-js}.e-pivotclient .e-lastPage {
    width:24px;
    height:24px;
}
@{e-js}.e-pivotclient .e-icon.e-media-backward_01:before,@{e-js}.e-pivotclient .e-icon.e-arrowhead-left:before,@{e-js}.e-pivotclient .e-icon.e-arrowhead-right:before,@{e-js}.e-pivotclient .e-icon.e-media-forward_01:before{
    margin-top:5px;
}
@{e-js}.e-pivotclient .e-dialog .e-memberCurrentPage, @{e-js}.e-pivotclient .e-dialog .e-memberCurrentSearchPage, @{e-js}.e-pivotclient .e-dialog .e-memberCurrentDrillPage{
    margin-left:8px;
    margin-right:6px;
    outline:none;
    text-indent:3px;
}
@{e-js}.e-pivotclient .e-dialog .e-memberPageCount, @{e-js}.e-pivotclient .e-dialog .e-memberSearchPageCount, @{e-js}.e-pivotclient .e-dialog .e-memberDrillPageCount
{
    margin-right:8px;
}
@{e-js}.e-pivotclient .e-csHeader .cubeSelect .e-ddl,@{e-js}.e-pivotclient .e-cubeTable .e-cubeBrowser .searchDiv .e-mask{
   & when (@skin = "bootstrap"), (@skin = "office-365") {
   height:30px;
   }
}
/*------------------------------------------------------------------Material Theme---------------------------------------------------------------------------------------------*/
@{e-js}.e-pivotclient .e-splitBtn .e-pvtBtn{
  & when (@skin = "material") {
    height:32px !important;
    padding:0px;
    margin-left:12px;
    vertical-align:top;
   }
}
@{e-js}.e-pivotclient .e-pivotchart *{
   & when (@skin = "material") {
    font-family:'Roboto',Segoe UI ;
   }
}
.ejTooltipPivotChartContainer{
   & when (@skin = "material") {
    font-family:'Roboto',Segoe UI;
    background:@grey-700 !important;
    border:1px solid transparent;
    border-radius:2px !important;
    padding: 5px 8px !important;
    color: @primary-font-color !important;
   }
}
@{e-js}.e-pivotclient  .e-dialog .e-editorTreeView .e-ul{
  & when (@skin = "material") {
    padding:0px 0px 0px 24px;
  }
}
@{e-js}.e-pivotclient .e-dialog .e-btn{
   & when (@skin = "material") {
    background: none;
    color: @accent-color;
    font-family: 'Roboto',Segoe UI;
    box-shadow: none;
    border: none;
    padding:0px 12px;
   }
}
@{e-js}.e-pivotclient textarea{
   & when (@skin = "material") {
    width:430px !important;
    outline:none;
    border:1px solid @grey-300;
   }
   & when (@skin = "office-365") {
    width:435px !important;   
   }
}   
@{e-js}.e-pivotclient .e-dialog .e-btn:hover,@{e-js}.e-pivotclient .e-dialog .e-btn:focus{
   & when (@skin = "material") {
    color: @accent-color;
    border: none;
    background-color: fade(@base-font-color,12%);
    font-family: 'Roboto',Segoe UI;
    border-radius: 0;
    box-shadow: none;
    padding: 0px 12px;
   }
}
@{e-js}.e-pivotclient .e-dialog .e-btn:active{
   & when (@skin = "material") {
    background-color: fade(@accent-color,12%);
   }
}
@{e-js}.e-pivotclient .e-dialog .e-dialogCancelBtn.e-btn{
  & when (@skin = "material") {
    width:auto;
  }
}
@{e-js}.e-pivotclient .e-gridContainer{
   & when (@skin = "material") {
    padding-top:0px !important;
   }
}
@{e-js}.e-pivotclient .e-gridContainer .e-pivotgrid{
   & when (@skin = "material") {
    margin:10px !important;
   }
}

@{e-js}.e-pivotclient .e-pivotgrid td.summary.gtot {
  padding: 6px 6px 6px 16px !important;            
}

@{e-js}.e-pivotclient .e-csHeader .cubeText{
   & when (@skin = "material") {
    margin-top:4px;
   }
}   
@{e-js}.e-pivotclient .e-dialog .e-dialogOKBtn, @{e-js}.e-pivotclient .e-dialog .e-dialogCancelBtn{
   & when (@skin = "material") {
    margin-top: 20px;
    margin-bottom: 4px;
   }
}
/*@{e-js}.e-pivotclient .e-toolbar .e-ddl.e-rtl .e-select,@{e-js}.e-pivotclient .e-toolbar .e-ddl .e-select,@{e-js}.e-pivotclient .e-toolbar .e-ddl .e-select:hover,@{e-js}.e-pivotclient .e-toolbar .e-ddl.e-rtl .e-select:hover,@{e-js}.e-pivotclient .e-toolbar .e-ddl .e-input,@{e-js}.e-pivotclient .e-toolbar .e-ddl.e-rtl .e-input,@{e-js}.e-pivotclient .e-toolbar .e-ddl .e-input[readonly],@{e-js}.e-pivotclient .e-toolbar .e-ddl.e-rtl .e-input[readonly]{
    background-color:transparent;
}*/
@{e-js}.e-pivotclient .e-filterDialog #filterValue1,@{e-js}.e-pivotclient .e-filterDialog #filterValue2 {
       & when (@skin = "material") {
        background:inherit;
        color:fade(@base-font-color,87%);
        border: none;
        border-bottom: 1px solid fade(@base-font-color,12%);
        outline: none;
       }
}
@{e-js}.e-pivotclient .e-filterDialog #filterValue1:active, @{e-js}.e-pivotclient .e-filterDialog #filterValue1:focus,@{e-js}.e-pivotclient .e-filterDialog #filterValue2:active,@{e-js}.e-pivotclient .e-filterDialog #filterValue2:focus{
   & when (@skin = "material") {
    border-bottom:2px solid @accent-color;
   }
}

@{e-js}.e-pivotclient .e-filterDialog #filterValue1:disabled,@{e-js}.e-pivotclient .e-filterDialog #filterValue2:disabled{
   & when (@skin = "material") {
    border:none;
    border-bottom:1px solid fade(@base-font-color,12%);
    color:fade(@base-font-color,12%);
   }
}

@{e-js}.e-pivotclient .e-filterDialog td .e-ddl,@{e-js}.e-pivotclient .e-filterDialog #filterValue1,@{e-js}.e-pivotclient .e-filterDialog #filterValue2{
  & when (@skin = "material") {
    margin-top:24px
  }
}

@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotHeader .headerText, .e-pivotschemadesigner .e-rPivotHeader .headerText{
   & when (@skin = "material") {
    font-size:13px;
   }
}
@{e-js}.e-pivotclient .e-splitBtn:hover,@{e-js}.e-pivotclient .e-splitBtn.pvtBtnHover{
   & when (@skin = "material") {
    background-color:@grey-600;
    color:@content-bg-color;
   }
}
@{e-js}.e-pivotclient .e-toolbar>.e-horizontal.e-ul{
   & when (@skin = "material") {
    height:auto !important;
   }
}
@{e-js}.e-pivotclient .e-splitBtn .e-removeSplitBtn{
   & when (@skin = "material") {
    margin-left:32px;
    margin-right:8px;
    border:none;
    display:inline-block !important;
    position:relative;
    padding:0px;
    color:fade(@base-font-color,26%);
   }
   box-sizing:content-box !important;
}
@{e-js}.e-pivotclient.e-rtl .e-splitBtn .e-removeSplitBtn{
  & when (@skin = "material") {
    margin-right:32px;
    margin-left:8px;
  }
}
@{e-js}.e-pivotclient.e-rtl .e-splitBtn .e-pvtBtn{
   & when (@skin = "material") {
    margin-right:12px;
    margin-left:0px;
   }
}
@{e-js}.e-pivotclient .e-toolbar .e-reportCol, @{e-js}.e-pivotclient .e-toolbar .e-reportCol.e-hover, @{e-js}.e-pivotclient .e-collectionli, @{e-js}.e-pivotclient .e-collectionli.e-hover, @{e-js}.e-pivotclient .e-reportli, @{e-js}.e-pivotclient .e-reportli.e-hover{
   & when (@skin = "material") {
    border-left:1px solid @grey-300;
   }
}
@{e-js}.e-pivotclient.e-rtl .e-splitBtn{
   & when (@skin = "material") {
    margin:12px 12px 0px 0px;
   }
}
@{e-js}.e-pivotclient .e-removeSplitBtn.e-icon{
   & when (@skin = "material") {
    width:16px;
    height:16px;
   }
}
@{e-js}.e-pivotclient .e-splitBtn .e-pvtBtn ,@{e-js}.e-pivotclient .e-splitBtn .e-pvtBtn:hover,@{e-js}.e-pivotclient .e-splitBtn .e-pvtBtn:active{
   & when (@skin = "material") {
    background-color:inherit ;
    box-shadow:none;
    color:inherit;
    font:inherit !important;
    text-transform:none;
    border:none;
  }
}
@{e-js}.e-pivotclient .e-splitBtn .e-removeSplitBtn,@{e-js}.e-pivotclient .e-splitBtn .e-removeSplitBtn:hover{
   & when (@skin = "material") {
    box-shadow:none;
    margin-top:7px;
  }
}
@{e-js}.e-pivotclient .e-toolbar>.e-horizontal>.e-reportCol.e-active,@{e-js}.e-pivotclient .e-toolbar>.e-horizontal>.e-reportCol.e-active>.reportList, @{e-js}.e-pivotclient .e-toolbar>.e-horizontal>.e-collectionli.e-active,@{e-js}.e-pivotclient .e-toolbar>.e-horizontal>.e-collectionli.e-active>.e-collectionlist{
   & when (@skin = "material") {
    background:none;
   }
}
@{e-js}.e-pivotclient .e-toolbar>.e-horizontal>.e-reportCol.e-active:after, @{e-js}.e-pivotclient .e-toolbar>.e-horizontal>.e-collectionli.e-active:after, @{e-js}.e-pivotclient .e-toolbar>.e-horizontal>.e-reportli.e-active:after{
   & when (@skin = "material") {
    animation: none;
   }
}
@{e-js}.e-pivotclient .e-SortFilterDlg.e-dialog>.e-header,@{e-js}.e-pivotclient .e-SortFilterDlg.e-dialog .e-tab .e-header{
   & when (@skin = "material") {
    background-color:@primary-color;
    color: @primary-font-color;
   }
}
@{e-js}.e-pivotclient .e-SortFilterDlg.e-dialog .e-dialog-icon:before{
   & when (@skin = "material") {
    color:@primary-font-color;
   }
}
@{e-js}.e-pivotclient .e-SortFilterDlg.e-dialog .e-dialog-icon:hover{
  & when (@skin = "material") {
    background:none;
   }
}
@{e-js}.e-pivotclient .e-SortFilterDlg.e-dialog .e-dialog-icon::after{
   & when (@skin = "material") {
    background:@primary-font-color;
   }
}
@{e-js}.e-pivotclient .e-SortFilterDlg .e-dialog.e-widget-content{
       & when (@skin = "material") {
        padding:0px 0px 10px;
       }
}
@{e-js}.e-pivotclient .e-SortFilterDlg.e-dialog .e-tab .e-header li a{
       & when (@skin = "material") {
        color: @primary-font-color
       }
}
@{e-js}.e-pivotclient .e-SortFilterDlg.e-dialog .e-tab .e-header li.e-active a{
       & when (@skin = "material") {
        color: fade(@primary-font-color,70%);
       }
}
@{e-js}.e-pivotclient .e-SortFilterDlg .e-tab.e-js .e-header > .e-item:hover{
   & when (@skin = "material") {
    background:none;
   }
}
@{e-js}.e-pivotclient .e-SortFilterDlg .sortfilterTab .e-sortingDlg,@{e-js}.e-pivotclient .e-SortFilterDlg .sortfilterTab .e-filteringDlg{
   & when (@skin = "material") {
    padding:10px 24px 0px;
   }
   & when (@skin = "office-365") {
    margin-bottom:-8px;
   }
}
@{e-js}.e-pivotclient .e-filterLbl{
   & when (@skin = "material") {
    margin-right:24px;
   }
}
@{e-js}.e-pivotclient .e-orderLbl, @{e-js}.e-pivotclient .e-sortingLbl{
  & when (@skin = "material") {
    margin-right:24px;
   }
}
@{e-js}.e-pivotclient .e-SortFilterDlg .sortfilterTab .e-sortingDlg #measuresList_wrapper{
   & when (@skin = "material") {
    width:95% !important;
   }
}
@{e-js}.e-pivotclient .e-SortFilterDlg .e-dialogFooter,@{e-js}.e-pivotclient .e-SortFilterDlg .e-dialogFooter{
   & when (@skin = "material") {
    width:100% !important;
    text-align: right;
    border-top:2px solid fade(@primary-font-color,12%);
   }
}
@{e-js}.e-pivotclient .e-SortFilterDlg label {
   & when (@skin = "material") {
    color:fade(@base-font-color,54%);
   }
}
@{e-js}.e-pivotclient .e-SortFilterDlg .e-dialogFooter {
   & when (@skin = "material") {
    float: right;
    padding: 7px 0 6px;
    margin-top: 20px;
    border-top: 2px solid @grey-300;
   }
}
@{e-js}.e-pivotclient .e-SortFilterDlg.e-dialog .e-dialogCancelBtn{
   & when (@skin = "material") {
    margin-right:24px;
   }
}

@{e-js}.e-pivotclient .e-SortFilterDlg.e-dialog .e-dialogOKBtn, @{e-js}.e-pivotclient .e-SortFilterDlg.e-dialog .e-dialogCancelBtn{
   & when (@skin = "material") {
    margin-top:0px;
    margin-bottom:0px;
   }
}

@{e-js}.e-pivotclient .e-pvtBtn{
    & when (@skin = "office-365"){
        width:auto;
    }
}

@{e-js}.e-pivotclient .e-btn.e-select.dragClone{
   & when (@skin = "material") {
    height:32px !important;
    padding:0px 12px;
    box-shadow:none;
    font-family:'Roboto',Segoe UI !important;
    font-size:13px !important;
    background-color:@grey-200;
    border-radius:25px;
    color:fade(@base-font-color,54%);
    font-size:13px;
    text-transform:none;
   }
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-schemaFilter, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-schemaColumn, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-schemaRow, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-schemaValue{
   & when (@skin = "material") {
    background-color:@grey-50;
   }
   overflow:auto;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotButton {
   & when (@skin = "material") {
    margin: 11px 0px 0px 12px;
    width: auto;
    display: inline-block;
    float:left;
    clear:left;
    background-color:@grey-300;
    border-radius:25px;
    overflow:hidden;
    border:1px solid @grey-300;
    font-family:'Roboto',Segoe UI !important;
    font-size:13px !important;
    height:32px;
    color:fade(@base-font-color,87%);
   }
    white-space:nowrap;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotButton:hover,@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotButton.pvtBtnHover{
   & when (@skin = "material") {
    background-color:@grey-600;
    color:@content-bg-color;
   }
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotButton .e-removeClientPivotBtn ,@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotButton .e-removeClientPivotBtn :hover{
   & when (@skin = "material") {
    box-shadow:none;
    margin-top:2px;
   }
}
@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner.e-rtl .e-dialogOKBtn{
   & when (@skin = "material") {
    margin-right:70px;
  }
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotButton>.e-pvtBtn ,@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotButton>.e-pvtBtn:hover,@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotButton>.e-pvtBtn:active{
   & when (@skin = "material") {
    background-color:inherit;
    box-shadow:none;
    color:inherit;
    font:inherit !important;
    padding:0px;
    border:none;
   }
   & when (@skin = "office-365"){
       cursor:pointer;
   }
}
@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner.e-rtl .e-pivotButton{
   & when (@skin = "material") {
    margin-left:0px;
    margin-right:12px;
    float:right;
    clear:right;
   }
}
@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner.e-rtl .e-pivotButton .e-pvtBtn{
   & when (@skin = "material") {
    margin-left:0px;
    margin-right:12px;
   }
   & when (@skin = "office-365"){
       margin-left:0px;
       margin-right:0px;
   }
}
@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner.e-rtl .e-removeClientPivotBtn{
   & when (@skin = "material") {
    margin-right: 32px;
    margin-left: 8px;
   }
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialogOKBtn{
  & when (@skin = "material") {
    margin-left: 10px;
  }
}
@{e-js}.e-pivotclient .e-pivotpager .e-movePrevious,@{e-js}.e-pivotclient .e-pivotpager .e-moveNext,@{e-js}.e-pivotclient .e-pivotpager .e-moveLast,@{e-js}.e-pivotclient .e-pivotpager .e-moveFirst{
   & when (@skin = "material") {
    margin-left:0px !important;
   }
}
@{e-js}.e-pivotclient .e-pivotpager .e-pagerTextBox{
    & when (@skin = "material") {
     width:35px !important;
    }
}
@{e-js}.e-pivotclient .e-pivotpager table{
   & when (@skin = "material") {
    height:auto !important;
   }
   & when (@skin = "office-365") {
    width:100% !important;
   }
   border:none;
}
@{e-js}.e-pivotclient .e-pivotpager .e-pagerDiv{
   & when (@skin = "material") {
    margin:3px !important;
   }
}
@{e-js}.e-pivotclient .e-pivotpager{
  & when (@skin = "material") {
   margin-top:10px;
  }
}
@{e-js}.e-pivotclient .e-icon.e-media-backward_01:before{
  & when (@skin = "material"), (@skin = "office-365")  {
   content:"\e83e";
   }
}
@{e-js}.e-pivotclient .e-icon.e-arrowhead-left:before{
  & when (@skin = "material"), (@skin = "office-365")  {
   content:"\e83f";
   }
}
@{e-js}.e-pivotclient .e-icon.e-arrowhead-right:before{
      & when (@skin = "material") , (@skin = "office-365") {
   content:"\e840";
   }
}
@{e-js}.e-pivotclient .e-icon.e-media-forward_01:before{
      & when (@skin = "material"), (@skin = "office-365")  {
       content:"\e841";
       }
}
@{e-js}.e-pivotclient .e-firstPage{
     & when (@skin = "material") {
    margin-right:12px;
    }
    & when (@skin = "office-365") {
    margin-right:1px;
    }
}
@{e-js}.e-pivotclient .e-lastPage{
 & when (@skin = "material") {
    margin-left:12px;
}
   & when (@skin = "office-365") {
    margin-left:1px;
    }
}

@{e-js}.e-pivotclient .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn, @{e-js}.e-pivotclient .e-dialog .e-memberPager+div .e-btn.e-dialogCancelBtn, @{e-js}.e-pivotclient .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn, @{e-js}.e-pivotclient .e-dialog .e-memberSearchEditorDiv+div .e-btn.e-dialogCancelBtn, @{e-js}.e-pivotclient .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn, @{e-js}.e-pivotclient .e-dialog .e-memberDrillPager+div .e-btn.e-dialogCancelBtn{
  & when (@skin = "material") {
      margin-top:0px;
      margin-bottom:0px;
   }
}
@{e-js}.e-pivotclient .e-dialog .e-memberPager+div .e-btn, @{e-js}.e-pivotclient .e-dialog .e-memberPager+div .e-btn,@{e-js}.e-pivotclient .e-dialog .e-memberSearchPager+div .e-btn, @{e-js}.e-pivotclient .e-dialog .e-memberSearchPager+div .e-btn,@{e-js}.e-pivotclient .e-dialog .e-memberDrillPager+div .e-btn, @{e-js}.e-pivotclient .e-dialog .e-memberDrillPager+div .e-btn{
  & when (@skin = "material") {
      margin-top:0px;
      margin-bottom:0px;
   }
}
@{e-js}.e-pivotclient .e-dialog .e-memberPager+div, @{e-js}.e-pivotclient .e-dialog .e-memberSearchPager+div, @{e-js}.e-pivotclient .e-dialog .e-memberDrillPager+div{
  & when (@skin = "material") {
      margin-top:0px !important;
      margin-bottom:20px !important;
   }
    & when (@skin = "office-365") {
         margin-top:0px !important;
      margin-bottom:20px !important;
      }
}
@{e-js}.e-pivotclient .e-firstPage.e-pageEnabled, @{e-js}.e-pivotclient .e-prevPage.e-pageEnabled, @{e-js}.e-pivotclient .e-nextPage.e-pageEnabled,@{e-js}.e-pivotclient .e-lastPage.e-pageEnabled {
      & when (@skin = "material") {
          color: fade(#000000, 54%);
      }
            & when (@skin = "office-365") {
          color: #666666;
      }
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn{
        & when (@skin = "office-365") {
      margin-left:60px !important;
      }
}
@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn, @{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn, @{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn{
            & when (@skin = "office-365") {
      margin-right:60px !important;
      }
}
@{e-js}.e-pivotclient .e-dialog .e-memberPager .e-memberCurrentPage:hover,@{e-js}.e-pivotclient .e-dialog .e-memberSearchPager .e-memberCurrentSearchPage:hover,@{e-js}.e-pivotclient .e-dialog .e-memberDrillPager .e-memberCurrentDrillPage:hover{
          & when (@skin = "material") {
          border-color: fade(#000000, 26%);
      }
            & when (@skin = "office-365") {
          border-color: @neutral-secondary-alt;
      }
}
@{e-js}.e-pivotclient .e-dialog .e-memberPager .e-memberCurrentPage:active,@{e-js}.e-pivotclient .e-dialog .e-memberPager .e-memberCurrentPage:focus,
@{e-js}.e-pivotclient .e-dialog .e-memberSearchPager .e-memberCurrentSearchPage:active,@{e-js}.e-pivotclient .e-dialog .e-memberSearchPager .e-memberCurrentSearchPage:focus,
@{e-js}.e-pivotclient .e-dialog .e-memberDrillPager .e-memberCurrentDrillPage:active,@{e-js}.e-pivotclient .e-dialog .e-memberDrillPager .e-memberCurrentDrillPage:focus{
          & when (@skin = "material") {
          border-color: fade(#000000, 54%);
      }
            & when (@skin = "office-365") {
          border-color: @theme-primary;
      }
}
@{e-js}.e-pivotclient .e-dialog .e-memberPager .e-memberCurrentPage, @{e-js}.e-pivotclient .e-dialog .e-memberSearchPager .e-memberCurrentSearchPage, @{e-js}.e-pivotclient .e-dialog .e-memberDrillPager .e-memberCurrentDrillPage{
      & when (@skin = "material") {
          color: fade(#000000, 87%);
              font-family:'Roboto',Segoe UI;
    font-size:12px;
            border:1px solid fade(#000000, 26%);
            width:22px !important;
            height:15px !important;
            border-radius:2px;
      }
      & when (@skin = "office-365") {
         outline:none;
         border:1px solid @neutral-tertiary-alt;
      }
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog .e-memberPager, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog .e-memberSearchPager, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog .e-memberDrillPager{
   & when (@skin = "office-365") {
    margin-top:0px;
   }
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog .e-memberPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner .e-dialog .e-memberPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner .e-dialog .e-memberPager+div .e-btn.e-dialogCancelBtn, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog .e-memberSearchPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner .e-dialog .e-memberSearchPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner .e-dialog .e-memberSearchPager+div .e-btn.e-dialogCancelBtn, @{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotclient .e-pivotschemadesigner .e-dialog .e-memberDrillPager+div .e-btn.e-dialogCancelBtn,@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner .e-dialog .e-memberDrillPager+div .e-btn.e-dialogOKBtn,@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner .e-dialog .e-memberDrillPager+div .e-btn.e-dialogCancelBtn{
        & when (@skin = "office-365") {
      margin-bottom:0px !important;
      margin-top:0px !important;
      }
}
@{e-js}.e-pivotclient .e-firstPage.e-pageEnabled:after, @{e-js}.e-pivotclient .e-prevPage.e-pageEnabled:after, @{e-js}.e-pivotclient .e-nextPage.e-pageEnabled:after, @{e-js}.e-pivotclient .e-lastPage.e-pageEnabled:after{
   & when (@skin = "material") {
    background-color:rgba(0,0,0,.12);
   }
}
@{e-js}.e-pivotclient .e-firstPage, @{e-js}.e-pivotclient .e-prevPage, @{e-js}.e-pivotclient .e-nextPage, @{e-js}.e-pivotclient .e-lastPage,.e-memberCurrentPage,.e-memberPageCount,
@{e-js}.e-pivotclient .e-firstPage, @{e-js}.e-pivotclient .e-prevPage, @{e-js}.e-pivotclient .e-nextPage, @{e-js}.e-pivotclient .e-lastPage,.e-memberCurrentSearchPage,.e-memberSearchPageCount,
@{e-js}.e-pivotclient .e-firstPage, @{e-js}.e-pivotclient .e-prevPage, @{e-js}.e-pivotclient .e-nextPage, @{e-js}.e-pivotclient .e-lastPage,.e-memberCurrentDrillPage,.e-memberDrillPageCount {
   & when (@skin="material"), (@skin="office-365") {
    vertical-align:middle;
  }
}
@{e-js}.e-pivotclient .e-memberEditorDiv.noChildNode .e-item div>.e-chkbox-wrap{
    & when (@skin = "office-365"){
     margin-left:0px;
    }
}
@{e-js}.e-pivotclient.e-rtl .e-memberEditorDiv.noChildNode .e-item div>.e-chkbox-wrap{
   & when (@skin = "office-365"){
     margin-right:0px;
    }
}
 @{e-js}.e-pivotclient .e-ascImage:before{
    content: "\e714";
    font-size: 16px;
    margin-left: 5px;
}
@{e-js}.e-pivotclient .e-descImage:before {
    content: "\e713";
    font-size: 16px;
    margin-left: 5px;
}
@{e-js}.e-pivotclient .e-clrFilter:before {
    content: "\e668";
    font-size: 16px;
    float: left;
}
@{e-js}.e-pivotclient .e-clrSort:before {
    content: "\e754";
    font-size: 19px;
    float: left;
    margin-top: 4px;
}
@{e-js}.e-pivotclient .e-ascOrder, @{e-js}.e-pivotclient .e-descOrder {
    list-style: none;
}
@{e-js}.e-pivotclient .e-advancedFilterDlg .e-arrowhead-right, @{e-js}.e-pivotclient .e-advancedFilterDlg .e-clrSort {
    margin-top:-5px !important;
}
@{e-js}.e-pivotclient .e-advanceFltrElement .e-arrowhead-right {
    margin-right: -2px;
}
@{e-js}.e-pivotclient .e-advanceFltrElement .e-memberEditorDiv {
    margin: 12px 0px 0 0px;
}
@{e-js}.e-pivotclient .e-advanceFltrElement .e-memberSearchEditorDiv {
    padding: 5px 0px 0 0px !important;
}
@{e-js}.e-pivotclient .e-advanceFltrElement .e-editorDiv {
    margin-left:0px;
}
 @{e-js}.e-pivotclient.e-rtl .e-clientChartTabRtl {
    margin: 5px -10px 0 0 !important;
}
@{e-js}.e-pivotclient.e-rtl .e-serverChartTabRtl {
    margin: 5px -22px 0 0 !important;
}
@{e-js}.e-pivotclient .e-advanceFltrElement .searchEditorTreeView {
    font-weight: normal;
}
@{e-js}.e-pivotclient .e-advanceFltrElement .searchEditorTreeView textarea {
    font-style: normal !important;
}
@{e-js}.e-pivotclient .e-advancedFilterDlg .e-footerArea {
    margin: -12px 12px 6px 0px !important;
}
@{e-js}.e-pivotclient.e-rtl .e-pivotgrid .valueSorting{
	float: none !important;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pvtBtn {
    float:left;
}
@{e-js}.e-pivotclient.e-rtl .e-pivotschemadesigner .e-pvtBtn {
    float:right;
}
@{e-js}.e-pivotclient .e-pivotschemadesigner .e-pivotButton > .e-pvtBtn {
    margin-top: 0px !important;
}
@{e-js}.e-pivotclient .e-descImage, @{e-js}.e-pivotclient .e-ascImage {
    display: inline-block;
    height: 18px;
    margin-right: 10px;
    vertical-align: middle;
    width: 20px;
}
@{e-js}.e-pivotclient .e-filterState:before {
    content: "\e80a";
    height: 16px;
    width: 16px;
}
@{e-js}.e-pivotclient .e-selectedSort {
    border: 1px solid;
    padding-top: 2px;
    margin-top:-3px !important;
}
@{e-widget}.e-maximumView
{
    background-color: @maxview-bg-color;    
    z-index: 1000;        
    margin: 2% 4%;
    margin-top:2%;
    padding:20px;
    position: fixed;
}
@{e-widget}.e-fullScreenView
{
   position: absolute;
    top: 0;
    background-color:@fullscreen-bg-color;
    z-index:1000;
}
@{e-widget}.e-winCloseBtn:before {
    content:"\e69e";
    position: absolute;
    cursor: pointer;
    top: 10px;
    right:0;
    height:24px;
    width:24px;
	
}
@{e-widget}.e-winCloseBtn{color:@oclient-icons-color}
@{e-widget}.e-winCloseBtn:hover
{   color:@toolbar-icons-hvrcolor;
   cursor: pointer;
}    
@media (min-width: 640px) and (max-width:799px) {
    
}

@media (min-width: 800px) and (max-width: 959px) {
  
}

@media (min-width: 960px) and (max-width: 1120px) {
   
}

@media (min-width: 1120px)  {
   
}


@{e-js}.e-pivotchart .e-hoverCell{
background-color:@hover-bg-stcolor !important;
}
@{e-js}.e-pivotchart .e-enabled{
color:@active-font-color !important;
background:@oclient-treeview-active !important;
}
@{e-js}.e-pivotchart{
    font: normal 12px @font-family;
    border: 1px solid @oclient-border-color;
    background-color: @oclient-bgcolor;
    color: @fg-header-color;
}
@{e-js}.e-pivotchart *:focus:hover{
    outline:none;
}
@{e-js}.e-pivotchart .e-expandMenu{
	min-height: 50px;
}

@{e-js}.e-pivotchart .e-menuList{
	list-style-type: none; 
    padding: 4px 15px 4px 15px;
}

@{e-js}.e-pivotchart .e-menuList:hover{
	list-style-type: none;
    .oclient-header-color();
    cursor: pointer; 
}

@{e-js}.e-pivotchart .e-dialog, @{e-js}.e-pivotchart .e-wrapper, @{e-js}.e-pivotchart .e-shadow{
    min-height: 50px;
}

@{e-js}.e-pivotchart .e-dialog-scroller {
    height: auto !important;
}

@{e-js}.e-pivotchart .e-dialog, @{e-js}.e-pivotchart .e-content{
    padding: 0;
}
@{e-js}.e-pivotchart .e-chartTypesImg:before {
	content:"\e6b3";
	font-size: 20px;  
}
@{e-js}.e-pivotchart .e-toolTipImg:before {
	content:"\e863";
	font-size: 20px;  
}
@{e-js}.e-pivotchart .e-chart3DImg:before{
content:"\e6a9";
font-size: 20px;  
}
@{e-js}.e-pivotchart .e-exportImg:before{
content:"\e84f";
font-size: 20px;  
}
@{e-js}.e-pivotchart .e-disable3D:before{
    content: "\e86a";
}
@{e-js}.e-pivotchart .e-chartTypesIcon:before, @{e-js}.e-pivotchart .e-chart3DTypesIcon:before, @{e-js}.e-pivotchart .e-exportTypesIcon:before, @{e-js}.e-pivotchart .e-interactionsIcon:before, @{e-js}.e-pivotchart .e-smartLabelsIcon:before {
  font-family: 'ej-webfont';
  font-size: 20px;
  margin-left: 2px;
}
@{e-js}.e-pivotchart .e-chartTypesIcon, @{e-js}.e-pivotchart .e-chartTypesIcon:hover, @{e-js}.e-pivotchart .e-chart3DTypesIcon, .e-pivotclient .e-chart3DTypesIcon:hover, @{e-js}.e-pivotchart .e-exportTypesIcon, .e-pivotclient .e-exportTypesIcon:hover, @{e-js}.e-pivotchart .e-interactionsIcon, @{e-js}.e-pivotchart .e-interactionsIcon:hover, @{e-js}.e-pivotchart .e-smartLabelsIcon, @{e-js}.e-pivotchart .e-smartLabelsIcon:hover {
  background-repeat: no-repeat;
  margin: 5px 5px 0px 0px;
  cursor: default;
  display: inline-block;
  height: 22px;
  width: 24px;
}
@{e-js}.e-pivotchart .e-chartTypesDialog, @{e-js}.e-pivotchart .e-chart3DTypesDialog,@{e-js}.e-pivotchart .e-exportTypesDialog, @{e-js}.e-pivotchart .e-smartLabelsDialog, @{e-js}.e-pivotchart .e-interactionsDialog {
  position: absolute;
  padding: 0px 0px 5px 5px;
  z-index: 1000000;
  .chartTypesDialog-setcolor()
}
@{e-js}.e-pivotchart .e-chartTypesIcon, @{e-js}.e-pivotchart .e-chart3DTypesIcon, @{e-js}.e-pivotchart .e-exportTypesIcon, @{e-js}.e-pivotchart .e-smartLabelsIcon, @{e-js}.e-pivotchart .e-interactionsIcon {
  color: @oclient-icons-color;
}

@{e-js}.e-pivotchart .e-chartTypesIcon:hover, @{e-js}.e-pivotchart .e-chart3DTypesIcon:hover, @{e-js}.e-pivotchart .e-exportTypesIcon:hover, @{e-js}.e-pivotchart .e-smartLabelsIcon:hover, @{e-js}.e-pivotchart .e-interactionsIcon:hover {
  color: @toolbar-icons-hvrcolor;
  cursor: pointer;
  background: @oclient-icons-hover-bg;
}

@{e-js}.e-pivotchart .e-activeChartType {
  color:@active-font-color;
  background:@oclient-treeview-active;
}
@{e-js}.e-pivotchart .e-line:before {
  content:"\e6b1";
}
@{e-js}.e-pivotchart .e-spline:before {
  content:"\e6bb";
}
@{e-js}.e-pivotchart .e-column:before {
  content:"\e6a6";
}
@{e-js}.e-pivotchart .e-area:before {
  content:"\e6a2";
}
@{e-js}.e-pivotchart .e-splinearea:before {
  content:"\e6ba";
}
@{e-js}.e-pivotchart .e-stepline:before {
  content:"\e6c0";
}
@{e-js}.e-pivotchart .e-steparea:before {
  content:"\e6be";
}
@{e-js}.e-pivotchart .e-pie:before {
  content:"\e6ca";
}
@{e-js}.e-pivotchart .e-bar:before {
  content:"\e6c5";
}
@{e-js}.e-pivotchart .e-stackingarea:before {
  content:"\e6bc";
}
@{e-js}.e-pivotchart .e-stackingcolumn:before {
  content:"\e6bd";
}
@{e-js}.e-pivotchart .e-stackingbar:before {
  content:"\e6c6";
}
@{e-js}.e-pivotchart .e-pyramid:before {
  content:"\e6c9";
}
@{e-js}.e-pivotchart .e-funnel:before {
  content:"\e6c8";
}
@{e-js}.e-pivotchart .e-doughnut:before {
  content:"\e7dd";
}
@{e-js}.e-pivotchart .e-scatter:before {
  content:"\e7df";
}
@{e-js}.e-pivotchart .e-bubble:before {
  content:"\e7dc";
}

@{e-js}.e-pivotchart .e-excel:before {
  content:"\e845";
}
@{e-js}.e-pivotchart .e-word:before {
  content:"\e84e";
}
@{e-js}.e-pivotchart .e-pdf:before {
  content:"\e846";
}
@{e-js}.e-pivotchart .e-png:before {
  content:"\e861";
}
@{e-js}.e-pivotchart .e-emf:before {
  content:"\e862";
}
@{e-js}.e-pivotchart .e-gif:before {
  content:"\e85f";
}
@{e-js}.e-pivotchart .e-jpg:before {
  content:"\e860";
}
@{e-js}.e-pivotchart .e-bmp:before {
  content:"\e85e";
}
@{e-js}.e-pivotchart .e-column3D:before {
  content:"\e868";
}
@{e-js}.e-pivotchart .e-pie3D:before {
  content:"\e865";
}
@{e-js}.e-pivotchart .e-bar3D:before {
  content:"\e869";
}
@{e-js}.e-pivotchart .e-stackingbar3D:before {
  content:"\e866";
}
@{e-js}.e-pivotchart .e-stackingcolumn3D:before {
  content:"\e867";
}
@{e-js}.e-pivotchart .pivotChartContextMenu .e-enabledState::before {
content: "\e80a";
height: 16px;
width: 16px;
}
@{e-js}.e-pivotchart .e-legend:before{
content:"\e879";
font-size: 20px;
}
@{e-js}.e-pivotchart .e-zooming:before{
content:"\e886";
font-size: 20px;
}
@{e-js}.e-pivotchart .e-smartLabels:before{
content:"\e880";
font-size: 20px;
}
@{e-js}.e-pivotchart .e-interaction:before{
content:"\e877";
font-size: 20px;
}
@{e-js}.e-pivotchart .e-crossHair:before {
content: "\e872";
}
@{e-js}.e-pivotchart .e-trackBall:before{
content:"\e882";
}
@{e-js}.e-pivotchart .e-rotate45:before{
content:"\e87e";
}
@{e-js}.e-pivotchart .e-rotate90:before{
content:"\e87f";
}
@{e-js}.e-pivotchart .e-hiding:before{
content:"\e873";
}
@{e-js}.e-pivotchart .e-multipleRows:before{
content:"\e87b";
}
@{e-js}.e-pivotchart .e-trim:before{
content:"\e883";
}
@{e-js}.e-pivotchart .e-wrap:before{
content:"\e885";
}
@{e-js}.e-pivotchart .e-wrapByWord:before{
content:"\e884";
}
@{e-js}.e-pivotchart .none:before{
content:"\e871";
}
@{e-js}.e-pivotchart .e-icon-xAxis-title:before {
    content: "\e917";
    font-size:20px;
}
@{e-js}.e-pivotchart .e-icon-yAxis-title:before {
    content: "\e918";
    font-size:20px;
}

@{e-js}.e-pivotchart .e-chartTypesImg, @{e-js}.e-pivotchart .e-chartTypesImg:hover, @{e-js}.e-pivotchart .e-toolTipImg, @{e-js}.e-pivotchart .e-toolTipImg:hover, @{e-js}.e-pivotchart .e-chart3DImg, @{e-js}.e-pivotchart .e-chart3DImg:hover, @{e-js}.e-pivotchart .e-exportImg, @{e-js}.e-pivotchart .e-exportImg:hover, @{e-js}.e-pivotchart .e-chartTypesImg:hover, @{e-js}.e-pivotchart .e-legend, @{e-js}.e-pivotchart .e-legend:hover, @{e-js}.e-pivotchart .e-zooming, @{e-js}.e-pivotchart .e-zooming:hover, @{e-js}.e-pivotchart .e-smartLabels, @{e-js}.e-pivotchart .e-smartLabels:hover, @{e-js}.e-pivotchart .e-interaction, @{e-js}.e-pivotchart .e-interaction:hover, @{e-js}.e-pivotchart .e-icon-xAxis-title:hover, @{e-js}.e-pivotchart .e-icon-yAxis-title:hover, @{e-js}.e-pivotchart .e-icon-xAxis-title, @{e-js}.e-pivotchart .e-icon-yAxis-title{
    background-repeat: no-repeat;
    margin: 4px;
	cursor: pointer;
	display: inline-block;
	height: 20px; 
	width: 20px;
}
 @{e-js}.e-pivotchart .e-chartTypesImg, @{e-js}.e-pivotchart .e-toolTipImg, @{e-js}.e-pivotchart .e-chart3DImg, @{e-js}.e-pivotchart .e-exportImg, @{e-js}.e-pivotchart .e-chartTypesImg,  @{e-js}.e-pivotchart .e-legend, @{e-js}.e-pivotchart .e-zooming, @{e-js}.e-pivotchart .e-smartLabels, @{e-js}.e-pivotchart .e-interaction, @{e-js}.e-pivotchart .e-icon-xAxis-title, @{e-js}.e-pivotchart .e-icon-yAxis-title{     
    overflow:visible !important;
    color:@oclient-icons-color;
    text-indent:-3px;
    }


@{e-js}.e-pivottreemap .e-drillupAction{
            background-color: @oclient-bgcolor;
			color : @fg-header-color;
            margin-bottom: 5px;
            font-size: 13px;
            font-weight:700;
            z-index:10;
            border-color: @fg-header-color;
            border: 1px solid @fg-header-color;
            border-bottom: transparent;
            padding-top: 6px;
		}
@{e-js}.e-pivottreemap .e-drillupAction a{
            color: @fg-header-color;
            cursor: pointer;
        }
@{e-js}.e-pivottreemap .e-drillupAction a:hover {
            color: @fg-header-color;
			text-decoration: underline !important;
        }
        @{e-js}.e-pivottreemap label {
            font-weight:600;
        }
        @{e-js}.e-pivottreemap .e-treemap-header {
            font-size: 12px;
        }
        @{e-js}.e-pivottreemap .e-treemap-label {
            color: @fg-header-color !important;
            font-size: 12px;
            padding-left:5px;
            padding-top:5px;
        }
       @{e-js}.e-pivottreemap *:focus:hover{
	    	outline:none;
		}
		

@{e-js}.e-pivotgauge .kpiiconvalue{
    height: 24px;
    width: 20px;
    background-position: center;
    background-repeat: no-repeat;
}
@{e-js}.e-pivotgauge .e-wrapLayout{
    list-style-type: none;
    height: auto;
    width: auto;
}
@{e-js}.e-pivotgauge .e-wrapLayout li{
    float: left;
    display: inline-block;
    margin: 2px;
}
@{e-js}.e-pivotgauge *:focus:hover{
    outline:none;
}
@{e-js}.e-pivotgauge-tooltip{
    background-color: @content-bg-color;
    border: 2px solid @ogaugeTooltip-border-color;
}
@{e-js}.e-pivotgauge-tooltip{
    pointer-events: none;
    opacity: 0;
    display: inline-block;
    position: absolute;
    padding: 10px 20px;
    color: @fg-table-color;
    border-radius: 15px;
    margin-top: 20px;
    text-align: left;
    font: 12px @font-family;
    font-stretch: condensed;
    text-decoration: none;
    line-height: 20px;
}
@{e-js}.e-pivotgauge-tooltip, @{e-js}.e-pivotgauge-active{
    opacity: 1;
    margin-top: 5px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}
@{e-js}.e-pivotgauge .kpiuparrow{
    background-image: @kpi-uparrow-img;
}
@{e-js}.e-pivotgauge .kpirightarrow{
    background-image: @kpi-rightarrow-img;
}
@{e-js}.e-pivotgauge .kpidownarrow{
    background-image: @kpi-downarrow-img;
}
@{e-js}.e-pivotgauge .kpidiamond{
    background-image: @kpi-diamond-img;
}
@{e-js}.e-pivotgauge .kpitriangle{
    background-image: @kpi-triangle-img;
}
@{e-js}.e-pivotgauge .kpicircle{
    background-image: @kpi-circle-img;
}
@{e-js}.e-pivotgauge .kpiredroad{
    background-image: @kpi-red-img;
}
@{e-js}.e-pivotgauge .kpigreenroad{
    background-image: @kpi-green-img;
}
@{e-js}.e-pivotgauge .kpiallcolor{
    background-image: @kpi-all-img;
}



@{e-js}.e-pivotpager .e-pagerTextBox {
    display:inline-block;
      & when not (@skin = "material") and not (@skin = "office-365") {
        height: 18px;
       width: 35px;
     .pivotpager-setcolor();
    }
    & when (@skin = "material") {
      color:fade(@base-font-color,87%);
      outline:none;
      border:1px solid fade(@base-font-color,26%);
      border-radius:2px;
      text-indent:2px;
      height: 18px;
      width: 35px;
    }
    & when (@skin = "office-365") {
      color:@theme-light-font;
      outline:none;
      border:1px solid @neutral-tertiary-alt;
      text-indent:2px;
      font-family:@font-family;
    font-size:14px;
        height: 32px;
    width: 40px;
      text-align:center;
    }
}
@{e-js}.e-pivotpager *:focus:hover{
    outline:none;
}
& when (@skin = "material") {
    @{e-js}.e-pivotpager{
        font-family:'Roboto',Segoe UI;
    }
  @{e-js}.e-pivotpager .e-movePrevious , @{e-js}.e-pivotpager .e-pagerLabel, @{e-js}.e-pivotpager .e-pagerTextBox, @{e-js}.e-pivotpager .e-moveNext, @{e-js}.e-pivotpager .e-moveLast {
        margin-left:16px;
  }
  @{e-js}.e-pivotpager .e-moveFirst{
        margin-left:24px !important;
   }
  @{e-js}.e-pivotpager .e-moveLast{
        margin-right:24px !important;
   }
   @{e-js}.e-pivotpager .e-pagerTextBox{
        width:35px;
       height:21px;
    }
    @{e-js}.e-pivotpager table{
        height:56px;
    }
    @{e-js}.e-pivotpager .e-categPagerTd .e-pagerDiv{
       border-right: 1px solid @grey-300;
    }
    @{e-js}.e-pivotpager .e-pagerTextBox:active,@{e-js}.e-pivotpager .e-pagerTextBox:focus{
       border-color:fade(@base-font-color,54%);
    }
}    
@{e-js}.e-pivotpager .e-movePrevious, @{e-js}.e-pivotpager .e-moveNext ,
@{e-js}.e-pivotpager .e-moveFirst,@{e-js}.e-pivotpager .e-moveLast{
            display:inline-block;

         & when not (@skin = "office-365") {
            width:18px;
            height:18px;
         }
        & when (@skin = "office-365") {
            width:32px;
            height:32px;
            color:@neutral-dark;
        }
            position:relative;
            top:1px;
            cursor:pointer;
         & when (@skin = "material") {
           color:fade(@base-font-color,54%);
         }
 }
@{e-js}.e-pivotpager .e-moveFirst:before {
      & when (@skin = "material"), (@skin = "office-365")  {
        content: "\e83e";
    }
   & when not (@skin = "material") and not (@skin = "office-365") {
        content: "\e62a";
    }
    font-size: 14px;
    & when  not (@skin = "office-365") {
      margin-left: 5px;
    }
}
@{e-js}.e-pivotpager .e-moveLast:before {
      & when (@skin = "material"), (@skin = "office-365")  {
          content: "\e841";
        }
   & when not (@skin = "material") and not (@skin = "office-365") {
          content: "\e62c";
        }
          font-size: 14px;
       & when  not (@skin = "office-365") {
          margin-left: 5px;
      }
}
@{e-js}.e-pivotpager .e-categPagerTd {
      & when not (@skin = "material") and not (@skin = "office-365") {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: @default-icon-color;
   }
   & when (@skin = "office-365") {
       border-right: 1px solid @neutral-light;
   }
}
@{e-js}.e-pivotpager.e-rtl .e-categPagerTd {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: @default-icon-color;
    border-right-style: hidden !important;
}
@{e-js}.e-pivotpager.e-rtl .e-pagerDiv, @{e-js}.e-pivotpager.e-rtl .e-seriesPagerTd {
    direction: ltr;
}
@{e-js}.e-pivotpager .e-movePrevious:before {
      & when (@skin = "material"), (@skin = "office-365")  {
            content: "\e83f";
        }
   & when not (@skin = "material") and not (@skin = "office-365") {
            content:"\e665";
        }
			font-size: 14px;
          & when  not (@skin = "office-365") {
            margin-left: 5px;
         }
        }
@{e-js}.e-pivotpager .e-moveNext:before {
      & when (@skin = "material"), (@skin = "office-365")  {
            content: "\e840";
        }
   & when not (@skin = "material") and not (@skin = "office-365") {
            content:"\e67e";
        }
			font-size: 14px;
          & when  not (@skin = "office-365") {
            margin-left: 5px;
         }
}

@{e-js}.e-pivotpager .e-categPageCount, @{e-js}.e-pivotpager .e-seriesPageCount {
			cursor: default;
          & when not (@skin = "office-365") {
            padding:0px 0px 0px 5px;
            }
          & when (@skin = "office-365") {
            padding:0px;
            margin:0px 8px;
           }
        }

@{e-js}.e-pivotpager .e-pagerDiv {
      & when not (@skin = "material") and not (@skin = "office-365") {
            margin:3px;
            padding:7px;
           .pivotpager-setcolor();
    }
    & when (@skin = "material") {
        color:@base-font-color;
    }
       & when (@skin= "office-365") {
        /* office-365*/
        font-family: @font-family;
        font-size: 14px;
        color:@theme-light-font;
       }
}

@{e-js}.e-pivotpager .e-pagerLabel {
			cursor: default;
            display:inline-block;
          & when not (@skin= "office-365") {
            margin-left:5px;
			margin-right: 5px;
          }
         & when (@skin= "office-365") {
            margin:0px 8px;
          }
           & when (@skin = "material") {
           font-size:13px;
           }
}

@{e-js}.e-pivotpager .e-disabled {
        & when (@skin = "material") {
           color:fade(@base-font-color,26%);
        }
      & when not (@skin = "material") and not (@skin = "office-365") {
            opacity: 0.4;
        }
         & when (@skin = "office-365") {
           color:@neutral-tertiary-alt;
        }
            cursor: default !important;
        }

@{e-js}.e-pivotpager .pivotpager {
    overflow:auto;
}
@{e-js}.e-pivotpager input{
  background: @content-bg-color;
}
@{e-js}.e-pivotpager .e-pagerTextBox:active,@{e-js}.e-pivotpager .e-pagerTextBox:focus{
    & when (@skin = "office-365") {
    border-color:@theme-primary;
    }
}
@{e-js}.e-pivotpager .e-pagerTextBox:hover{
    & when (@skin = "office-365") {
    border-color:@neutral-secondary-alt;
    }
}
@{e-js}.e-pivotpager .e-categPagerTd .e-pagerDiv{
    & when (@skin = "office-365") {
   margin-right:8px;
    }
}
@{e-js}.e-pivotpager .e-seriesPagerTd .e-pagerDiv{
    & when (@skin = "office-365") {
   margin-left:8px;
    }
}
@{e-js}.e-pivotpager.e-rtl .e-categPagerTd .e-pagerDiv{
    & when (@skin = "office-365") {
   margin-left:8px;
   margin-right:0px
    }
}
@{e-js}.e-pivotpager.e-rtl .e-seriesPagerTd .e-pagerDiv{
    & when (@skin = "office-365") {
   margin-right:8px;
      margin-left:0px
    }
}
@{e-js}.e-pivotpager .e-moveFirst:before{
    & when (@skin = "office-365") {
   margin-top:12px;
   margin-left:10px;
    }
}
@{e-js}.e-pivotpager .e-movePrevious:hover, @{e-js}.e-pivotpager .e-moveNext:hover, @{e-js}.e-pivotpager .e-moveFirst:hover, @{e-js}.e-pivotpager .e-moveLast:hover{
    & when (@skin = "office-365") {
background-color:@neutral-lighter;
    }
  }
@{e-js}.e-pivotpager .e-movePrevious:active, @{e-js}.e-pivotpager .e-moveNext:active, @{e-js}.e-pivotpager .e-moveFirst:active, @{e-js}.e-pivotpager .e-moveLast:active{
    & when (@skin = "office-365") {
background-color:@theme-primary;
color:white;
    }
  }
@{e-js}.e-pivotpager .e-disabled:hover,@{e-js}.e-pivotpager .e-disabled:active{
        & when (@skin = "office-365") {
background-color:@neutral-white;
color:@neutral-tertiary-alt;
    }
}
@{e-js}.e-pivotpager .e-pagerLabel,@{e-js}.e-pivotpager .e-seriesPageCount, @{e-js}.e-pivotpager .e-categPageCount, @{e-js}.e-pivotpager .e-pagerTextBox,@{e-js}.e-pivotpager .e-movePrevious, @{e-js}.e-pivotpager .e-moveNext, @{e-js}.e-pivotpager .e-moveFirst, @{e-js}.e-pivotpager .e-moveLast{
        & when (@skin = "office-365") {
vertical-align:middle;
    }
}
@{e-js}.e-pivotpager .e-movePrevious:before, @{e-js}.e-pivotpager .e-moveNext:before, @{e-js}.e-pivotpager .e-moveFirst:before, @{e-js}.e-pivotpager .e-moveLast:before{
    & when (@skin = "office-365") {
margin-top:9px;
    }
  }
@{e-js}.e-pivotpager tr{
        & when (@skin = "office-365") {
height:59px;
    }
}
@{e-js}.e-pivotpager .e-movePrevious.e-disabled, @{e-js}.e-pivotpager .e-moveNext.e-disabled, @{e-js}.e-pivotpager .e-moveFirst.e-disabled, @{e-js}.e-pivotpager .e-moveLast.e-disabled{
    & when (@skin = "office-365") {
color:@neutral-tertiary-alt;
    }
  }
@{e-js}.e-pivotpager table{
	background-color: @bg-value-color;
    & when (@skin = "office-365") {
border:1px solid @neutral-light;
    }
  }


/*------------------------------reportviewer Theme Start-------------------------------*/
@{e-js} .e-reportviewer-outerborder:hover{
    .hover-gradient();
    border-color: @hover-border-color;
    color: @content-font-color;
}

@{e-js}.e-reportviewer-tbdiv.e-reportviewer-exporttip{
	.default-gradient();
    border-color:@content-border-color;
    & when (@skin= "material") {
        /*material*/
        background-color:@content-bg-color !important;
        -moz-box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.24);
        -webkit-box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.24);
        box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.24);
    }
    & when not (@skin = "material") {
        /*other*/
        background-color:@content-bg-color;
    }
}

@{e-js}.e-reportviewer-tbdiv.e-reportviewer-fittopagetip {
	.default-gradient();
    border-color:@content-border-color;
    & when (@skin= "material") {
        /*material*/
        background-color:@content-bg-color !important;
        -moz-box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.24);
        -webkit-box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.24);
        box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.24);
    }
    & when not (@skin = "material") {
        /*other*/
        background-color:@content-bg-color;
    }
}

@{e-js}.e-reportviewer-tbdiv.e-reportviewer-tooltip{
     & when (@skin= "material") {
        /*material*/
        background-color:@grey-700;
    }
    & when not (@skin= "material") {
        /*other*/
       background-color:@content-bg-color;
    }
    border-color:@content-border-color;
}

@{e-js} .e-reportviewer-headerspan{
     & when (@skin= "material") {
        /*material*/
        padding-left: 2px;
    }
}

@{e-js} .e-reportviewer-headerspan,@{e-js} .e-reportviewer-contentspan{
    & when (@skin= "material") {
        /*material*/
        color:@primary-font-color;
    }
    & when not (@skin = "material") {
        /*other*/
       color:@content-font-color;
    }
	font-family: @font-family !important;
}

@{e-js} .e-reportviewer-viewer{
    font-size:@content-font-size;
}

@{e-js} .e-reportviewer-popuppageno, @{e-js} .e-reportviewer-popuptotalpage{
    color : @rv-popuppage-color;
}

@{e-js}.e-reportviewer-toolbarcontainer .ejinputtext{
    & when (@skin= "material") {
        /*material*/
        background-color: @grey-50 !important;
        font-size: 16px;
    }
    & when not (@skin = "material") {
        /*other*/
        background-color: @content-bg-color !important;
        font-size: 16px;
    }
 }


@{e-js} .e-reportviewer-viewerblock {
    & when (@skin= "material") {
        /*material*/
        background-color:@grey-50;
        font-size: @rv-viewerblock-font-size-material-theme;
	    color:@base-font-color;
    }
    & when not (@skin = "material") {
        background-color:@rv-viewerblock-bg-color;
        font-size: @rv-viewerblock-font-size;
    }
    & when (@skin = "office-365") {
        color:@neutral-light-font;
    }
    & when not (@skin = "material") and not (@skin = "office-365") {
        color:@content-font-color;
    }
}

@{e-js} .e-reportviewer-viewerblockcellcontent {
    & when (@skin= "material") {
        /*material*/
        font-family: @font-family;
         font-size: @rv-viewerblock-font-size-material-theme;
         color: @base-font-color;
         opacity: 87;
    }
    & when not (@skin = "material") {
        font-size: @rv-viewerblockcellcontent-font-size;
    }
    & when (@skin = "office-365") {
        color:@neutral-light-font;
    }
    & when not (@skin = "material") and not (@skin = "office-365") {
        color:@content-font-color;
    }
}

@{e-js} .e-reportviewer-viewreport {
    border-left-color: @content-border-color;
    & when (@skin= "material") {
        /*material*/
        padding-left: 40px;
    }
    & when (@skin = "office-365") {
        padding:20px 25px;
    }
}

@{e-js} .e-reportviewer-scrollcontainer,
@{e-js} .e-reportviewer-viewer>.e-splitter .e-pane{
    & when (@skin= "material") {
        /*material*/
        background-color: @grey-200;
    }
    & when not (@skin = "material") {
        /*other*/
        background-color: @rv-pageviewcontainer-bg-color;
    }
}

@{e-js} .e-reportviewer-pageviewcontainer{
     & when (@skin= "material") {
        /*material*/
        background-color: @grey-200;
    }
    & when not (@skin= "material") {
        /*other*/
        background-color: @rv-pageviewcontainer-bg-color;
    }
}

@{e-js} .e-reportviewer-pageview {
     & when (@skin= "material") {
        /*material*/
        -moz-box-shadow: 0px 0px 7px 4px rgba(0,0,0,0.16);
        -webkit-box-shadow: 0px 0px 7px 4px rgba(0,0,0,0.16);
        box-shadow: 0px 0px 7px 4px rgba(0,0,0,0.16);
        border-color :@rv-pageview-border-color;
    }
    & when not (@skin = "material") {
        /*other*/
         -moz-box-shadow: @rv-pageview-moz-box-shadow;
         -webkit-box-shadow: @rv-pageview-webkit-box-shadow;
         box-shadow: @rv-pageview-box-shadow;
         border-color :@rv-pageview-border-color;
    }
}

@{e-js} .e-reportviewer-label,
@{e-js} .e-reportviewer-tbpage,
@{e-js} .e-reportviewer-elementalignments,
@{e-js} .e-reportviewer-textbox{
    color: @content-font-color;
}

@{e-js} .e-reportviewer-label,
@{e-js} .e-reportviewer-tbpage,
@{e-js} .e-reportviewer-elementalignments,
@{e-js} .e-reportviewer-textbox{
    font-size: @content-font-size;
    font-weight: @content-font-weight;
}

@{e-js} .e-reportviewer-labelpageno {
    font-size: @rv-labelpageno-font-size;
}

@{e-js} .e-reportviewer-documentmapcontainer div,
@{e-js} .e-reportviewer-documentmappopup{
    background-color: @rv-documentMappopup-bg-color;
}

@{e-js} .e-reportviewer-pagepopupinfo{
    background-color:@rv-popuppageinfo-bg-color;
}

@{e-js} .e-reportviewer-viewerblock,
@{e-js} .e-reportviewer-pagenumber,
@{e-js} .e-reportviewer-tbpage,
@{e-js} .e-reportviewer-tbdiv.e-reportviewer-exportlist,
@{e-js} .e-reportviewer-label,
@{e-js} .e-reportviewer-labelpageno {
    font-family: @font-family !important;
}

@{e-js}.e-reportviewer-toolbarcontainer,
@{e-js} .e-reportviewer-viewerblock,
@{e-js} .e-reportviewer-viewercontainer,
@{e-js} .e-reportviewer-elementalignments,
@{e-js} .e-reportviewer-viewerblockcellcontent,
@{e-js} .e-reportviewer-viewerblockcontent,
@{e-js} .e-reportviewer-textbox,
@{e-js} .e-reportviewer-documentmappopup{
    & when (@skin= "material") {
        /*material*/
        border-color: @grey-300;
    }
    & when not (@skin = "material") {
        /*other*/
        border-color: @content-border-color;
    }
}

@{e-js} .e-reportviewer-popupli:hover {
    .hover-gradient();
    & when (@skin= "office-365") {
        background-color: @default-bg-stcolor;
    }
    & when not (@skin = "office-365") {
        background-color:@hover-bg-stcolor;
    }
}

@{e-js} .e-reportviewer-popupli {
    & when (@skin= "office-365") {
        color: @neutral-light-font !important;
    }
    & when not (@skin = "office-365") {
        color: @content-font-color !important;
    }
    font-family: @font-family !important;
    font-size: @content-font-size !important;
    font-weight: @content-font-weight !important;
}

@{e-js} .e-reportviewer-gotonext.e-reportviewer-disabled,
@{e-js} .e-reportviewer-gotoprevious.e-reportviewer-disabled,
@{e-js} .e-reportviewer-gotolast.e-reportviewer-disabled,
@{e-js} .e-reportviewer-gotofirst.e-reportviewer-disabled{
    opacity: @rv-navigate-disabled-opacity;
}

@{e-js} .e-reportviewer-viewreportbutton{
    font-family: @font-family !important;
     & when (@skin= "material") {
        /*material*/
        &:extend(.e-accent all);
    }
    & when (@skin = "office-365") {
        width: 110px !important;
    }
}

@{e-js} .e-reportviewer-alert-icon {
    color: @error-color;
    font-size: 40px;
}

@{e-js} .e-reportviewer-error-content {
    background-color: @disable-control-background-color;
    font-size: @rv-viewerblock-font-size;
}

@{e-js} .e-reportviewer-scroller .e-scrollbar .e-icon {
    font-size: 0;
}
/*------------------------------reportviewer Theme End-------------------------------*/



/*------------------------------pdfviewer Theme Start-------------------------------*/
&.e-pdfviewer-outerborder:hover{
    .hover-gradient();
    border-color: @hover-border-color;
    color: @content-font-color;
}

&.e-pdfviewer-tbdiv.e-pdfviewer-exporttip{
	.default-gradient();
    border-color:@content-border-color;
	background-color:@content-bg-color;
}

&.e-pdfviewer-tbdiv.e-pdfviewer-fittopagetip{
	.default-gradient();
    border-color:@content-border-color;
	background-color:@content-bg-color;
}

&.e-pdfviewer-tbdiv.e-pdfviewer-tooltip{
    & when not (@skin="material") and not (@skin="office-365")  { 
        background:@content-bg-color;
        border-color:@content-border-color;
    }
    & when (@skin="material") {
        background-color:@grey-700;
        border:0px solid @content-border-color;
        border-radius:2px;
        padding-left:8px;
        padding-right:8px;
        padding-top:2px;
        padding-bottom:2px;
    }
    & when (@skin="office-365") {
        font-family:@font-family;
        font-size:12px;
        background-color:@info-bg-color;
        border-color: @neutral-secondary-alt;
        border-radius:2px;
        padding-left:8px;
        padding-right:8px;
        padding-top:2px;
        padding-bottom:2px;
    }
}

&.e-pdfviewer-headerspan,.e-pdfviewer-contentspan{
	font-family: @font-family !important; 
    & when not (@skin="material") { 
        color:@content-font-color;
    }
    & when (@skin="material") {
        color:@primary-font-color;
        font-size:10px !important;
    }
}

&.e-pdfviewer-viewer{
    font-size:@content-font-size;
}

&.e-pdfviewer-popuppageno,.e-pdfviewer-popuptotalpage{
    color : @rv-popuppage-color; 
}

&.e-pdfviewer-toolbarcontainer .ejinputtext{
	background-color: @content-bg-color !important;
 }

&.e-pdfviewer-viewerblock {
    background-color:@rv-viewerblock-bg-color;
    font-size: @rv-viewerblock-font-size;
	color:@content-font-color;
}

&.e-pdfviewer-viewerblockcellcontent {
    font-size: @rv-viewerblockcellcontent-font-size;
    color: @content-font-color;
}

&.e-pdfviewer-viewpdf {
    border-left-color: @content-border-color;
}

&.e-pdfviewer-scrollcontainer,
 .e-pdfviewer-viewer>.e-splitter .e-pane{
    background-color: @pdfviewer-scrollcontainer;
}

&.e-pdfviewer-pageviewcontainer{
    background-color: @rv-pageviewcontainer-bg-color;
}

&.e-pdfviewer-pageview {
    -moz-box-shadow: @rv-pageview-moz-box-shadow;
    -webkit-box-shadow: @rv-pageview-webkit-box-shadow;
    box-shadow: @rv-pageview-box-shadow;
    border-color :@rv-pageview-border-color;
}

&.e-pdfviewer-label,
&.e-pdfviewer-tbpage,
&.e-pdfviewer-elementalignments,
&.e-pdfviewer-textbox{
    color: @content-font-color;
}

&.e-pdfviewer-elementalignments.ejinputtext:focus {
    & when (@skin="material") {
        border-color:rgba(0,0,0,0.38);
    }
}

&.e-pdfviewer-label,
&.e-pdfviewer-tbpage,
&.e-pdfviewer-elementalignments, 
&.e-pdfviewer-textbox{
    font-size: @content-font-size;
    font-weight: @content-font-weight;
}

&.e-pdfviewer-labelpageno {
    & when not (@skin="material") {
        font-size: @rv-labelpageno-font-size;
    }
    & when (@skin="material") {
        font-size:13px;
    }
}

&.e-pdfviewer-documentmapcontainer div,
&.e-pdfviewer-documentmappopup{
    background-color: @rv-documentMappopup-bg-color;
}

&.e-pdfviewer-pagepopupinfo{
    background-color:@rv-popuppageinfo-bg-color;
}

 &.e-pdfviewer-viewerblock,
 &.e-pdfviewer-viewer,
 &.e-pdfviewer-pagenumber,
 &.e-pdfviewer-tbpage,
 &.e-pdfviewer-tbdiv.e-pdfviewer-exportlist,
 &.e-pdfviewer-label,
 &.e-pdfviewer-labelpageno {
    font-family: @font-family !important;
}

 &.e-pdfviewer-viewerblock,
 &.e-pdfviewer-elementalignments,
 &.e-pdfviewer-viewerblockcellcontent,
 &.e-pdfviewer-viewerblockcontent,
 &.e-pdfviewer-textbox, 
 &.e-pdfviewer-documentmappopup{
    border-color: @content-border-color;
}

 &.e-pdfviewer-elementalignments.ejinputtext {
     & when (@skin="material") {
        border-color:rgba(0,0,0,0.26);
        font-size: 13px;
        color:rgba(0,0,0,0.87);
        border-radius:2px;
     }
 }

 &.e-pdfviewer-elementalignments.ejinputtext::selection {
     & when (@skin="material") {
         background-color:@accent-color;
         color:@accent-font-color;
     }
 }

 &.e-pdfviewer-toolbarcontainer.e-toolbar{
     .pdfviewer-toolbar-border-color;
     & when not (@skin = "material") and not (@skin = "office-365") {
         border-color: @default-border-color;
     }
     & when (@skin = "material") {
         border-color:@grey-300;
     }
 }

 &.e-pdfviewer-searchbox{
     .pdfviewer-searchtoolbar-border-color;
    & when not (@skin = "material") {
         border-color: @default-border-color;
     }
     & when (@skin = "material") {
         border-color:@grey-300;
         background-color:@grey-50;
     }
 }
 
 &.e-pdfviewer-viewercontainer{
     & when not (@skin = "material") and not (@skin = "office-365") {
     .pdfviewer-viewercontainer-bgcolor;
     background-color: @default-bg-stcolor;
     .pdfviewer-viewercontainer-border-color;
     border-color: @default-border-color;
     }
     & when (@skin = "material") {
     .pdfviewer-viewercontainer-bgcolor;
     background-color: @grey-200;
     .pdfviewer-viewercontainer-border-color;
     border-color: @grey-300;
     }
     & when (@skin = "office-365") {
     .pdfviewer-viewercontainer-bgcolor;
     background-color: @neutral-quaternary-alt;
     .pdfviewer-viewercontainer-border-color;
     border-color: @neutral-tertiary-alt;
     }
 }

 &.e-pdfviewer-pageCanvas{
     & when not (@skin = "material") and not (@skin = "office-365") {      
         border: solid #000000 1px;
     }
     & when (@skin = "material") {
         box-shadow: 0 0 7px 4px rgba(0, 0, 0, 0.16);
     }
     & when (@skin = "office-365") {
         box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.2);
     }
 }
 
    &.e-pdfviewer-popupmenu {
        border: solid 2px @default-border-color;
        background-color: @default-bg-stcolor;
    }
    &.e-pdfviewer-innercontent{
        border-color:black;
        background-color:white;
    }
    &.e-pdfviewer-closeicon{
        color:@default-font-color;
    }
    &.e-pdfviewer-properties-okbtn, &.e-pdfviewer-properties-cancelbtn {
        & when not (@skin = "material") and not (@skin = "office-365") {
            background-color:@content-bg-color !important;
        }
    }
    &.e-pdfviewer-currenttime, &.e-pdfviewer-username{
        color:@default-font-color;
    }
    &.e-tab .e-header>.e-active.e-pdfviewer-tab-li a {
        color:@default-font-color !important;
    }
    &.e-pdfviewer-opacity-slider.e-slider .e-handle.e-select {
        background-color:@widget-bg-color;
    }
    &.e-tab .e-header>.e-active.e-pdfviewer-tab-li {
        & when (@skin = "flat-azure") {
        border-top-color:@default-border-color !important;
        }
    }

&.e-pdfviewer-popupli:hover {
   .hover-gradient();
    background-color:@hover-bg-stcolor;
    color:@hover-font-color;
}

&.e-pdfviewer-popupli {
    color: @content-font-color !important;
    font-family: @font-family !important;
    font-size: @content-font-size !important;
    font-weight: @content-font-weight !important;
}
/*------------------------------pdfviewer Theme End-------------------------------*/


/*Theme Color*/

@{e-js}.e-gantt .e-toolbaricons {
    & when (@skin= "material") {
        color: fadeout(@base-font-color,46%);
    }

    & when not (@skin= "material") {
        color: @gantt-toolbar-icon-color;
    }
}

@{e-js} .e-search.e-tooltxt.e-hover {
    color: @gantt-toolbar-icon-mouseover-color !important;
}

@{e-js}.e-gantt .e-tooltxt.e-hover > span {
    color: @gantt-toolbar-icon-mouseover-color;
}

@{e-js}.e-gantt .e-gantt-Spliter {
    .material-gantt-header-background;
    border-top-color: @gantt-header-border-color !important;
    border-bottom-color: @gantt-content-border-color !important;
}

@{e-js}.e-gantt .e-editValue .e-treegrid .e-headercell {
    border-bottom-color: @gantt-splitter-border-color !important;
    background-color: @gantt-predecessor-header-bg-color !important;
}

@{e-widget}.e-ganttdialog .e-ejinputtext,
@{e-js}.e-gantt .e-ejinputtext {
    & when (@skin= "material") {
        border-width: 0px 0px 1px 0px;
        background-color: transparent;
    }

    & when not (@skin= "material") {
        border-width: 1px;
        background-color: @content-bg-color;
    }

    color: @content-font-color;
    outline: none;
    border-style: solid;
    border-color: @content-border-color;
    vertical-align: baseline;
}

@{e-widget}.e-ganttdialog .e-ejinputtext:hover,
@{e-js}.e-gantt .e-ejinputtext:hover {
    .high-contrast-gantt-textbox-border-color;
}

@{e-widget}.e-ganttdialog .e-ejinputtext:focus,
@{e-js}.e-gantt .e-ejinputtext:focus {

    & when (@skin= "material") {
        box-shadow: none;
        border-width: 0px 0px 2px 0px;
        border-color: @accent-color;
    }

    & when (@skin= "office-365") {
        box-shadow: none;
        border: 1px solid @theme-primary;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        box-shadow: 0 0 5px @shadow-bg-color;
    }
}

.e-deletepre.e-icon,
.e-addpre.e-icon {
    font-family: @font-family;
}

@{e-js}.e-gantt .e-splitter .e-hover.e-splitbar.e-split-divider {
    & when (@skin= "material") {
        border-color: @grey-300;
    }

    & when not (@skin= "material") {
        border-color: @active-border-color;
    }
}

@{e-js}.e-gantt .e-splitter .e-splitbar.e-split-divider:hover {
    border-color: @hover-border-color;
}

@{e-js}.e-gantt .e-gantttoolbar li.e-hover {
    .high-contrast-gantt-toolbar-icon-border;
    border-color: @hover-border-color;
}

@{e-js}.e-gantt .e-treegrid .e-gridheader {
    .ganttheader-gradient();
    .material-gantt-header-background;
    color: @gantt-schedule-font-color;
    border-color: @gantt-header-border-color;
}

@{e-js}.e-gantt .e-treegrid .e-headercelldiv {
    .material-gantt-header-background;
    color: @gantt-schedule-font-color;
}

@{e-js}.e-gantt .e-treegrid .e-headercelldiv .e-descending, 
@{e-js}.e-gantt .e-treegrid .e-headercelldiv .e-ascending, 
@{e-js}.e-gantt .e-treegrid .e-headercell .e-columnmenu-icon {
    .material-gantt-header-icon-color;
    color: @header-icon-color;
}

@{e-js}.e-gantt .e-treegrid .e-headercell {
    .material-gantt-header-background;
    border-top-color: @gantt-header-border-color !important;

    & when (@skin= "material") {
        border-right-color: fadeout(@base-font-color,88%) !important;
    }

    & when (@skin= "office-365") {
        border-right-color: @neutral-quaternary !important;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        border-right-color: @gantt-header-border-color !important;
    }
}

@{e-widget}.e-ganttdialog .e-tab .e-header.e-addborderbottom .e-active {
    & when (@skin= "material") {
        border-top: solid 0px transparent !important;
    }

    & when (@skin= "office-365") {
        border-top: 1px solid transparent !important;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        border-top: solid 1px @gantt-content-border-color !important;
    }
}

@{e-widget}.e-ganttdialog .e-titlebar {
    & when (@skin= "material") {
        border-bottom: 1px solid transparent !important;
    }

    & when (@skin= "office-365") {
        border-bottom: 1px solid transparent !important;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        border-bottom: 1px solid @gantt-content-border-color !important;
    }
}

@{e-js}.e-gantt .e-toolbarspan {
    .material-gantt-toolbar-shadow;
}

& when (@skin = "material") {
    @{e-js}.e-gantt .e-search .e-ejinputtext {
        font-family: @font-family;
        border-width: 1px;
        font-size: 12px;
        color: fadeout(@base-font-color,13%);
        height: 24px;
        margin: 0px !important;
        border-radius: 2px;
        border-color: fadeout(@base-font-color,74%);
        background: @content-bg-color;
    }

    @{e-js}.e-gantt .e-search .e-ejinputtext:focus {
        border-color: fadeout(@base-font-color,46%);
    }

    @{e-js}.e-gantt .e-search .e-ejinputtext::-webkit-input-placeholder {
        font-family: @font-family;
        font-size: 13px;
        color: fadeout(@base-font-color,13%);
    }

    @{e-js}.e-gantt .e-search .e-ejinputtext:-moz-placeholder {
        font-family: @font-family;
        font-size: 13px;
        color: fadeout(@base-font-color,13%);
    }

    @{e-js}.e-gantt .e-search .e-ejinputtext::-moz-placeholder {
        font-family: @font-family;
        font-size: 13px;
        color: fadeout(@base-font-color,13%);
    }

    @{e-js}.e-gantt .e-search .e-ejinputtext:-ms-input-placeholder {
        font-family: @font-family;
        font-size: 13px;
        color: fadeout(@base-font-color,13%);
    }

    @{e-js}.e-gantt .e-search .e-ejinputtext::selection,
    .e-ganttdialog .e-ejinputtext::selection {
        background: @accent-color;
        color: @accent-font-color;
    }

    @{e-js}.e-gantt .e-toolbar > .e-horizontal.e-ul:first-child {
        padding-left: 20px;
        box-sizing: border-box;
        margin-top: 0px !important;
    }

    @{e-widget}.e-ganttdialog .e-ejinputtext {
        border-width: 0px 0px 1px 0px;
        color: fadeout(@base-font-color,13%);
    }

    @{e-widget}.e-ganttdialog .e-ejinputtext:focus {
        box-shadow: none;
        border-width: 0px 0px 2px 0px;
        border-color: @accent-color;
    }

    @{e-widget}.e-ganttdialog .e-titlebar.e-dialog {
        background: @primary-color;
        color: @primary-font-color;
        font-family: @font-family;
    }

    @{e-widget}.e-ganttdialog .e-dialog-icon:before,
    @{e-widget}.e-ganttdialog .e-tab .e-header.e-addborderbottom .e-active .e-link {
        color: @primary-font-color;
    }

    @{e-widget}.e-ganttdialog .e-dialog-icon:hover {
        background: none;
    }

    @{e-widget}.e-ganttdialog .e-dialog-icon:before:hover {
        background: transparent;
        color: @base-font-color;
    }

    @{e-widget}.e-ganttdialog .e-addborderbottom.e-header {
        background: @primary-color;
    }

    @{e-widget}.e-ganttdialog .e-tab .e-header li a,
    @{e-widget}.e-ganttdialog .e-tab .e-header li a:hover {
        color: fadeout(@content-bg-color,30%);
    }

    @{e-widget}.e-ganttdialog .e-tab.e-js .e-header > .e-item:hover {
        background: none;
    }

    @{e-widget}.e-ganttdialog .e-general-edit-div {
        font-family: @font-family;
        font-size: 13px;
        color: fadeout(@base-font-color,62%);
    }

    @{e-widget}.e-ganttdialog .e-editform-btn .e-btn.e-select, 
    @{e-widget}.e-ganttdialog .e-editform-btn .e-btn.e-select:hover, 
    @{e-widget}.e-ganttdialog .e-editform-btn .e-btn.e-select:active {
        color: @accent-color;
        border-width: 0px;
    }

    @{e-widget}.e-ganttdialog .e-editform-btn .e-btn.e-select, 
    @{e-widget}.e-ganttdialog .e-editform-btn .e-btn.e-select:hover {
        background: none;
        box-shadow: none;
    }

    @{e-widget}.e-ganttdialog .e-editform-btn .e-btn.e-select:hover {
        background: fadeout(@base-font-color,88%);
    }

    @{e-widget}.e-ganttdialog .e-editform-btn .e-btn.e-select:active {
        box-shadow: none;
        background: fadeout(@accent-color,88%);
    }

    @{e-js}.e-gantt .e-gantt-search-container {
        margin-top: 0px !important;
    }
}

@{e-js}.e-gantt .e-ganttpopup .e-popupcontent {
    background-color: @gantt-selectionpopup-content-bg-color;
    border-color: @gantt-selectionpopup-border-color;
}

@{e-js}.e-gantt .e-ganttpopup span:hover,
@{e-js}.e-gantt .e-ganttpopup .e-spanclicked {
    border-color: @gantt-selectionpopup-default-icon-color;
}

@{e-js}.e-gantt .e-ganttpopup .e-downtail:before,
@{e-js}.e-gantt .e-ganttpopup .e-downtail {
    border-top-color: @treegrid-selectionpopup-border-color;
}

@{e-js}.e-gantt .e-ganttpopup .e-downtail:after {
    border-top-color: @treegrid-selectionpopup-content-bg-color;
}

& when (@skin = "office-365") {
    @{e-js}.e-gantt .e-search .e-ejinputtext {
        font-family: @font-family;
        font-size: 13px;
        height: 26px;
        margin: 2px 8px 2px 2px !important;
        width: 230px;
    }

    @{e-js} .e-treegridPane .e-treegrid .e-editcell,
    @{e-js} .e-treegridPane .e-treegrid .e-detailsrowcell,
    @{e-js} .e-treegridPane .e-treegrid .e-rowcell,
    @{e-js} .e-treegridPane .e-treegrid .e-extendcolumn {
        border-bottom-color: @neutral-quaternary;
    }

    @{e-widget}.e-ganttdialog .e-editform-btn input[id$="Save"],
    @{e-widget}.e-ganttdialog .e-connectordialog input[id$="ok"] {
        background: @theme-primary;
        color: @theme-primary-font;
    }

    @{e-widget}.e-ganttdialog .e-editform-btn input[id$="Save"]:hover,
    @{e-widget}.e-ganttdialog .e-connectordialog input[id$="ok"]:hover {
        background: @theme-dark;
        color: @theme-dark-font;
    }

    @{e-widget}.e-ganttdialog .e-editform-btn input[id$="Save"]:focus,
    @{e-widget}.e-ganttdialog .e-connectordialog input[id$="ok"]:focus {
        background: @theme-dark;
        color: @theme-dark-font;
        border-color: @theme-primary;
    }

    @{e-widget}.e-ganttdialog .e-editform-btn input[id$="Save"]:active,
    @{e-widget}.e-ganttdialog .e-connectordialog input[id$="ok"]:active {
        background: @theme-primary;
        color: @theme-primary-font;
        border-color: @theme-primary;
    }
}


/*Theme Color*/

.e-rangeScroll-select{
    fill:@default-rangeScroll-select-fill;
	stroke:@default-rangeScroll-select-stroke;
	&:hover { 
		fill:@hover-rangeScroll-select-fill; 
        stroke:@hover-rangeScroll-select-stroke;
	}
    &:active { 
		fill:@hover-rangeScroll-select-fill; 
        stroke:@hover-rangeScroll-select-stroke;
	}
}

.e-rangeScroll-select-hover{
    fill:@hover-rangeScroll-select-fill; 
    stroke:@hover-rangeScroll-select-stroke;
}

.e-rangeScroll-backRect{
    fill:@default-rangeScroll-backRect-fill;
	stroke:@default-rangeScroll-backRect-stroke;
}

.e-rangeScroll-arrow{
     fill:@default-rangeScroll-arrow-fill;
	 stroke:@default-rangeScroll-arrow-fill;
     &:hover { 
		fill:@hover-rangeScroll-arrow-fill; 
        stroke:@hover-rangeScroll-arrow-fill;
	}
    &:active { 
		fill:@hover-rangeScroll-arrow-fill; 
        stroke:@hover-rangeScroll-arrow-fill;
	}
}

.e-rangeScroll-centerShape{
    fill:@default-rangeScroll-arrow-fill;
	stroke:@default-rangeScroll-arrow-fill;
}

.e-rangeScroll-leftCircle,
.e-rangeScroll-rightCircle{
    fill:@default-rangeScroll-arrow-fill;
	stroke:@default-rangeScroll-arrow-fill;
    &:hover { 
		fill:@hover-rangeScroll-arrow-fill; 
        stroke:@hover-rangeScroll-arrow-fill;
	}
    &:active { 
		fill:@hover-rangeScroll-arrow-fill; 
        stroke:@hover-rangeScroll-arrow-fill;
	}
}

.e-rangeScroll-leftRect:hover + .e-rangeScroll-leftCircle,
.e-rangeScroll-rightRect:hover + .e-rangeScroll-rightCircle,
.e-rangeScroll-leftRect:active + .e-rangeScroll-leftCircle,
.e-rangeScroll-rightRect:active + .e-rangeScroll-rightCircle{
    fill:@hover-rangeScroll-arrow-fill; 
	stroke:@hover-rangeScroll-arrow-fill;
}


@{e-js}.e-treegrid .e-extendcolumn {
    background-color: @gantt-content-bg-color;
}

@{e-js}.e-treegrid .e-headercelldiv {
    color: @gantt-header-font-color;
    font-family: @font-family;
}

@{e-js} .e-filterMenuDiv {
    & when (@skin= "material") {
        border-color: transparent !important;
    }

    & when (@skin= "office-365") {
        border-color: @gantt-columnchooser-border-color !important;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        border-color: @filtermenudialog-color !important;
    }

    font-family: @font-family;
    min-height: 0px !important;
}

@{e-js}.e-treegrid .e-treegridpopup .e-popupcontent {
    background-color: @treegrid-selectionpopup-content-bg-color;
    border-color: @treegrid-selectionpopup-border-color;
}

@{e-js}.e-treegrid .e-treegridpopup span:hover,
@{e-js}.e-treegrid .e-treegridpopup .e-spanclicked {
    border-color: @treegrid-selectionpopup-default-icon-color;
}

@{e-js}.e-treegrid .e-treegridpopup .e-downtail:before,
@{e-js}.e-treegrid .e-treegridpopup .e-downtail {
    border-top-color: @treegrid-selectionpopup-border-color;
}

@{e-js}.e-treegrid .e-treegridpopup .e-downtail:after {
    border-top-color: @treegrid-selectionpopup-content-bg-color;
}

@{e-js}.e-treegrid .e-headercelldiv .e-descending, 
@{e-js}.e-treegrid .e-headercelldiv .e-ascending, 
@{e-js}.e-treegrid .e-headercell .e-columnmenu-icon {
    & when (@skin= "material") {
        color: fadeout(@base-font-color,46%);
    }

    & when not (@skin= "material") {
        color: @header-icon-color;
    }
}

@{e-js}.e-treegrid-core {
    font-family: @font-family;
}

@{e-js}.e-treegrid {
    border-color: @gantt-content-border-color;
    color: @gantt-content-font-color;
}

@{e-js}.e-treegrid .e-gridcontent {
    background-color: @gantt-content-bg-color;
    border-color: @gantt-content-border-color;
}

@{e-js}.e-treegrid .e-borderbox {
    border-bottom-color: @gantt-content-bg-color;
}

@{e-js}.e-treegrid .e-editcell,
@{e-js}.e-treegrid .e-detailsrowcell,
@{e-js}.e-treegrid .e-rowcell,
@{e-js}.e-treegrid .e-extendcolumn {
    & when (@skin= "material") {
        border-right-color: transparent;
        border-bottom-color: @gantt-content-border-color;
    }

    & when (@skin= "office-365") {
        border-color: @neutral-quaternary;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        border-color: @gantt-content-border-color;
    }
}

@{e-js}.e-treegrid .e-tableLastCell {
    border-right-color: @gantt-content-border-color !important;
}

@{e-js}.e-treegrid .e-detailsiconcell:hover,
@{e-js}.e-treegrid .e-detailsinfoiconhide {
    background-color: @treegrid-detailicon-shadow-color;
}

@{e-js}.e-treegrid div.e-error .e-toparrow {
    & when not (@skin= "material") {
        border-bottom-color: #fffe92;
    }

    & when (@skin= "material") {
        border-bottom-color: @grey-700;
    }
}

@{e-js}.e-treegrid div.e-error .e-bottomarrow {
    & when not (@skin= "material") {
        border-top-color: #fffe92;
    }

    & when (@skin= "material") {
        border-top-color: @grey-700;
    }
}


@{e-js} .e-detailscellwrapperfly {
    border-color: @treegrid-detailcellwrapperfly-border-color;

    & when (@skin= "office-365") {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.10);
        -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.10);
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.10);
    }

    & when not (@skin= "office-365") {
        box-shadow: 0px 0px 11px 3px @treegrid-detailcellwrapperfly-shadow-color;
        -moz-box-shadow: 0px 0px 11px 3px @treegrid-detailcellwrapperfly-shadow-color;
        -webkit-box-shadow: 0px 0px 11px 3px @treegrid-detailcellwrapperfly-shadow-color;
    }
}

@{e-js} .e-dragrowcell {
    border-color: @gantt-content-border-color !important;
}

@{e-js}.e-treegrid .e-alt-row {
    & when (@skin= "material") {
        background: @grey-50;
    }

    & when (@skin= "office-365") {
        background: #fbfbfb;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        background: @gantt-altRow-bg-color;
    }
}

@{e-js}.e-treegrid .e-selectionbackground {
    & when (@skin= "material") {
        background: @grey-100;
    }

    & when (@skin = "office-365") {
        background: @theme-lighter;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        .active-gradient();
        color: @active-font-color;
        -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr="@{gantt-row-selection-bg-color}", endColorstr="@{gantt-row-selection-bg-color}", GradientType=0), progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
    }
}

@{e-js} .e-treegridPane .e-treegrid .e-selectionbackground {
    & when (@skin= "material") {
        background: fade(@grey-100,70);
    }

    & when (@skin= "office-365") {
        background: fade(@theme-lighter,70);
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        .gantt-row-selection();
        .high-contrast-gantt-active-font-color;
        color: @gantt-selection-font-color;
        filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr="@{gantt-row-selection-bg-color}", endColorstr="@{gantt-row-selection-bg-color}", GradientType=0), progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
    }
}

@{e-js}.e-treegrid .e-selectingcell {
    & when (@skin= "material") {
        background: @grey-100;
    }

    & when (@skin= "office-365") {
        background: @theme-lighter;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        .active-gradient();
        color: @active-font-color;
    }
}

@{e-js}  .e-treegridPane .e-treegrid .e-selectingcell {
    & when (@skin= "material") {
        background: @grey-100;
    }

    & when not (@skin= "material") {
        .gantt-row-selection();
        color: @gantt-selection-font-color;
    }
}

@{e-js}.e-treegrid .e-detailsinfoiconhide:before,
@{e-js}.e-treegrid .e-detailsinfoiconshow:before {
    & when (@skin= "material") {
        color: @grey-600 !important;
    }

    & when not (@skin= "material") {
        color: @active-bg-stcolor !important;
    }
}

@{e-js}.e-treegrid .e-selectionbackground .e-detailsinfoiconshow:before {
    & when (@skin= "material") {
        color: @grey-600 !important;
    }

    & when not (@skin= "material") {
        color: @active-font-color !important;
    }
}

@{e-js}.e-treegrid .e-detailscellwrapper,
@{e-js}  .e-detailscellwrapperfly {
    background: @treegrid-detailcellwrapper-background-color;
    color: @treegrid-detailcellwrapper-font-color !important;
}

@{e-js}.e-dragtooltipbackground {
    & when (@skin= "material") {
        background-color: @grey-700;
        color: @primary-font-color;
    }

    & when (@skin= "office-365") {
        background-color: @info-bg-color;
        color: @neutral-secondary;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        background-color: @gantt-content-bg-color;
        color: @gantt-content-font-color;
    }
}

@{e-js}.e-treegrid .e-tabletd {
    border-color: @gantt-content-border-color;
}

@{e-js}.e-treegrid .e-treegridtoolbar {
    background-color: @gantt-toolbar-bg-color !important;
    border-color: @gantt-toolbar-border-color !important;
}

@{e-js}.e-treegrid .e-headercell {
    & when (@skin= "office-365") {
        border-right-color: @neutral-quaternary !important;
        border-bottom-color: @neutral-quaternary !important;
    }

    & when not (@skin= "office-365") {
        border-right-color: @gantt-header-border-color !important;
        border-bottom-color: @gantt-header-border-color !important;
    }
}

@{e-js}.e-treegrid .e-filterbarcell {
    & when (@skin= "office-365") {
        border-color: @neutral-quaternary !important;
    }

    & when not (@skin= "office-365") {
        border-color: @gantt-header-border-color !important;
    }
}

@{e-js}.e-treegrid .e-grid-icon {
    background: @gantt-header-bg-color;
}


@{e-js}.e-treegrid .e-gridheader {
    color: @gantt-header-font-color;
    border-color: @gantt-header-border-color;

    & when (@skin= "material") {
        background: #fff;
    }

    & when not (@skin= "material") {
        .tgheader-gradient();
    }
}

@{e-js}.e-treegrid .e-headercontent {
    border-right-color: @gantt-header-border-color;
}

@{e-js}.e-treegrid .e-ejinputtext,
@{e-widget} .e-addedColumn .e-ejinputtext,
@{e-widget} .e-treegridrenamedialog .e-ejinputtext {
    & when (@skin= "material") {
        color: fade(@base-font-color,84%);
        background-color: transparent;
    }

    & when not (@skin= "material") {
        color: @content-font-color;
        background-color: @content-bg-color;
    }

    border-color: @content-border-color;
    outline: none;
    vertical-align: baseline;
}

@{e-widget} .e-addedColumn .e-ejinputtext:hover,
@{e-js}.e-treegrid .e-ejinputtext:hover,
@{e-widget} .e-treegridrenamedialog .e-ejinputtext:hover {
    .high-contrast-gantt-textbox-border-color;
}

@{e-js}.e-treegrid .e-ejinputtext:focus,
@{e-widget} .e-addedColumn .e-ejinputtext:focus,
@{e-widget} .e-treegridrenamedialog .e-ejinputtext:focus {
    & when (@skin= "material") {
        box-shadow: none;
        border-width: 0px 0px 2px 0px;
        border-color: @accent-color;
    }

    & when (@skin= "office-365") {
        box-shadow: none;
        border: 1px solid @theme-primary;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        box-shadow: 0 0 5px @shadow-bg-color;
    }
}

@{e-js}.e-treegrid .e-reSizeColbg {
    border-left-color: @gantt-header-border-color !important;
}

@{e-js}.e-treegrid .e-gridheadercontainer {
    & when (@skin= "office-365") {
        border-right-color: @neutral-quaternary !important;
    }

    & when not (@skin= "office-365") {
        border-right-color: @gantt-header-border-color !important;
    }
}

@{e-js}.e-columnmenu {
    .tgPopUp-gradient();
    color: @gantt-menuitem-font-color;
    font-family: @font-family;

    & when (@skin= "material") {
        border-color: transparent !important;
    }

    & when not (@skin= "material") {
        border-color: @gantt-columnchooser-border-color !important;
    }
}


@{e-js} .e-columnmenuitem .e-icon,
@{e-js} .e-menuitem .e-icon {
    & when (@skin= "material") {
        color: fadeout(@base-font-color,46%);
    }

    & when (@skin= "office-365") {
        color: @neutral-primary;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        color: @gantt-toolbar-icon-color;
    }
}

@{e-js}.e-treegrid .e-toolbaricons {
    & when (@skin= "material") {
        color: fadeout(@base-font-color,46%);
    }

    & when not (@skin= "material") {
        color: @gantt-toolbar-icon-color;
    }
}

@{e-js} .e-columnmenuselection .e-icon,
@{e-js} .e-contextmenu-mouseover .e-icon {
    & when (@skin= "material") {
        color: fadeout(@base-font-color,46%);
    }

    & when (@skin= "office-365") {
        color: @neutral-primary;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        color: @gantt-toolbar-icon-mouseover-color;
    }
}

@{e-js}.e-treegrid .e-tooltxt.e-hover > span {
    & when (@skin= "material") {
        color: fadeout(@base-font-color,46%);
    }

    & when not (@skin= "material") {
        color: @gantt-toolbar-icon-mouseover-color;
    }
}

@{e-js} .e-columnSelector {
    .tgPopUp-gradient();
    border: 1px solid;
    border-color: @gantt-columnchooser-border-color !important;
    color: @gantt-menuitem-font-color !important;
}

@{e-js} .e-columnMenuListDiv label {
    font-family: @font-family;
}

@{e-js} .e-columnmenuselection {
    & when (@skin= "material") {
        background: fade(@base-font-color,12%);
    }

    & when not (@skin= "material") {
        .treegrid-hover-gradient();
    }

    color: @gantt-menuitem-hover-font-color;
}

@{e-js}.e-treegrid .e-summaryrow {
    & when (@skin= "material") {
        background: @grey-50;
    }

    & when (@skin= "office-365") {
        background: @neutral-light;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        background: @treegrid-summaryrow-backgroundcolor;
    }
}

@{e-js}.e-treegrid .e-footersummaryrow,
@{e-js}.e-treegrid .e-footersummaryrowdiv {
    & when (@skin= "material") {
        background: @grey-50;
    }

    & when (@skin= "office-365") {
        background: @neutral-light;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        background: @treegrid-summaryrow-backgroundcolor;
    }
}

@{e-js}.e-treegrid .e-footersummaryrowdiv {
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: @treegrid-summaryrow-border-color;
}

@{e-js}.e-treegrid .e-summaryrow .e-summaryrowcell {
    & when (@skin= "office-365") {
        border-bottom-color: @treegrid-summaryrow-border-color;
    }

    & when not (@skin= "office-365") {
        border-bottom-color: @treegrid-summaryrow-border-color;
    }
}

@{e-js}.e-contextmenu,
@{e-js}.e-innerContextmenu {
    & when (@skin= "material") {
        border-color: transparent !important;
        color: @gantt-menuitem-font-color;
    }

    & when not (@skin= "material") {
        border-color: @gantt-columnchooser-border-color !important;
        color: @gantt-menuitem-font-color;
    }

    .tgPopUp-gradient();
    font-family: @font-family;
}

@{e-js}.e-headerContextmenu {

    & when (@skin= "material") {
        border-color: transparent !important;
        color: @gantt-menuitem-font-color;
    }

    & when not (@skin= "material") {
        border-color: @gantt-columnchooser-border-color !important;
        color: @gantt-menuitem-font-color;
    }

    .tgPopUp-gradient();
    font-family: @font-family;
    border: 1px solid;
}

@{e-js} .e-contextmenu-mouseover {
    & when (@skin= "material") {
        background: fade(@base-font-color,12%);
    }

    & when not (@skin= "material") {
        .treegrid-hover-gradient();
        color: @gantt-menuitem-hover-font-color;
    }
}

@{e-js}.e-tooltipgantt {
    & when (@skin= "material") {
        background-color: @grey-700;
        color: @primary-font-color;
        border-color: transparent;
    }

    & when (@skin= "office-365") {
        background-color: @info-bg-color;
        color: @neutral-secondary;
        border-color: @neutral-secondary-alt;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        background-color: @gantt-content-bg-color;
        color: @gantt-tooltip-font-color;
        border-color: @gantt-tooltip-border-color;
    }
}

@{e-js}.e-treegrid .e-movablecontainer, 
@{e-js}.e-treegrid .e-movableheader, 
@{e-js}.e-treegrid .e-movablefooter {
    & when (@skin= "material") {
        border-left-color: @primary-color;
    }

    & when (@skin= "office-365") {
        border-left-color: @theme-primary;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        border-left-color: @active-bg-stcolor;
    }
}

@{e-js}.e-treegrid .e-footercontainer {
    border-right-color: @gantt-header-border-color;
}

@{e-js}.e-headervline {
    & when (@skin= "material") {
        border-color: @primary-color;
    }

    & when not (@skin= "material") {
        border-color: @active-bg-stcolor;
    }
}

@{e-js}.e-headertooltip {
    & when (@skin= "material") {
        background-color: @grey-700;
        color: @primary-font-color;
        border-color: transparent;
    }

    & when not (@skin= "material") {
        color: @gantt-header-font-color;
        background-color: @gantt-header-endbg-color;
        border-color: @gantt-header-border-color;
    }
}

@{e-js} .e-menuitem-hr {
    border-width: 1px 0px 0px 0px;
    border-style: solid;

    & when (@skin= "material") {
        border-color: fade(@base-font-color,12%);
    }

    & when (@skin= "office-365") {
        border-color: @neutral-light;
    }

    & when not (@skin= "material") and not (@skin= "office-365") {
        border-color: @gantt-content-border-color;
    }
}

& when (@skin = "material") {
    @{e-js}.e-treegrid .e-rowcell {
        font-family: @font-family;
        font-size: 13px;
        color: fadeout(@base-font-color,13%);
        text-overflow: ellipsis;
    }

    @{e-js}.e-treegrid .e-treegridtoolbar ul {
        padding-left: 20px;
        margin-top: 0px !important;
    }

    @{e-js}.e-treegrid .e-ejinputtext::selection,
    @{e-widget} .e-addedColumn .e-ejinputtext::selection,
    @{e-widget} .e-treegridrenamedialog .e-ejinputtext::selection,
    @{e-js}.e-treegrid .e-ejinputtext::selection {
        background: @accent-color;
        color: @accent-font-color;
    }

    @{e-js}.e-treegrid .e-inner-treecolumn-container {
        padding-left: 24px;
        width: 100% !important;
    }

    @{e-js}.e-treegrid .e-rowcell .e-cell {
        padding-left: 10px;
    }

    @{e-js}.e-treegrid .e-filterbar-material,
    @{e-js}.e-treegrid .e-filterbarcell {
        border-right-color: transparent !important;
    }

    @{e-js}.e-columnmenu {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    }

    @{e-widget}.e-treegrid-columnchooser {
        box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.24);
    }

    @{e-js}.e-contextmenu {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    }

    @{e-js}.e-innerContextmenu {
        box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.24);
    }

    @{e-js}.e-treegrid .e-frozenheaderdiv {
        position: relative;
    }

    @{e-js}.e-treegrid .e-frozenheaderdiv::before {
        content: "";
        background: @primary-color;
        position: absolute;
        height: 55px;
        width: 1px;
        top: -10px;
        left: 100%;
    }

    @{e-js}.e-treegrid .e-frozenheaderdiv.e-filterbar-header-material::before {
        content: "";
        background: @primary-color;
        position: absolute;
        height: 103px;
        width: 1px;
        top: -10px;
        left: 100%;
    }

    @{e-js}.e-treegrid .e-frozenheaderdiv.e-stacked-header-material::before {
        content: "";
        background: @primary-color;
        position: absolute;
        height: 91px;
        width: 1px;
        top: -10px;
        left: 100%;
    }

    @{e-js}.e-treegrid .e-headercontent-material-filterbar {
        border-right-color: transparent !important;
    }

    @{e-js}.e-treegrid .e-frozen-header-container {
        overflow: visible !important;
    }

    @{e-js} .e-treegridmenufilterwraper {
        background: @content-bg-color;
    }

    @{e-widget}.e-treegrid-dialog .e-header.e-dialog {
        font-weight: normal;
    }

    @{e-widget}.e-treegrid-dialog .e-editLabel,
    @{e-js}.e-treegrid .e-dialog .e-treegridform .e-editdialoglabel label:first-child {
        font-size: 13px;
        color: fadeout(@base-font-color,62%);
    }

    @{e-js} .e-filterMenuDiv .e-btn.e-select,
    @{e-js} .e-filterMenuDiv .e-btn.e-select:hover,
    @{e-js} .e-filterMenuDiv .e-btn.e-select:active,
    @{e-widget}.e-treegrid-dialog .e-btn.e-select,
    @{e-widget}.e-treegrid-dialog .e-btn.e-select:hover,
    @{e-widget}.e-treegrid-dialog .e-btn.e-select:active {
        color: @accent-color;
        border-width: 0px;
    }

    @{e-js} .e-filterMenuDiv .e-btn.e-select, 
    @{e-js} .e-filterMenuDiv .e-btn.e-select:hover,
    @{e-widget}.e-treegrid-dialog .e-btn.e-select, 
    @{e-widget}.e-treegrid-dialog .e-btn.e-select:hover {
        background: none;
        box-shadow: none;
    }

    @{e-js} .e-filterMenuDiv .e-btn.e-select:hover,
    @{e-widget}.e-treegrid-dialog .e-btn.e-select:hover {
        background: fadeout(@base-font-color,88%);
    }

    @{e-js} .e-filterMenuDiv .e-btn.e-select:active,
    @{e-widget}.e-treegrid-dialog .e-btn.e-select:active {
        box-shadow: none;
        background: fadeout(@accent-color,88%);
    }
}

& when (@skin = "office-365") {
    @{e-js}.e-treegrid .e-rowcell .e-cell {
        padding-left: 5px;
    }

    @{e-js}.e-columnmenu {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.10);
    }

    @{e-js}.e-treegrid-columnchooser {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.10);
    }

    @{e-js}.e-contextmenu {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.10);
    }

    @{e-js}.e-innerContextmenu {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.10);
    }

    @{e-js} .e-parent-menuitem.e-columnmenuselection,
    @{e-js} .e-parent-menuitem.e-contextmenu-mouseover {
        background: @theme-lighter;
        color: @theme-light-font;
    }

    @{e-js}.e-treegrid .e-dialog .e-treegridform .e-editdialogbutton .e-save,
    @{e-widget}.e-treegrid-dialog .e-confirm-dialog-btn-ok.e-btn.e-select,
    @{e-widget} .e-treegrid-rename-dialog-btn-ok.e-btn.e-select,
    @{e-widget} .e-add-dialog-btn-ok .e-btn.e-select,
    @{e-js} .e-filter-btn-filter .e-btn.e-select {
        background: @theme-primary;
        color: @theme-primary-font;
    }

    @{e-js}.e-treegrid .e-dialog .e-treegridform .e-editdialogbutton .e-save:hover,
    @{e-widget}.e-treegrid-dialog .e-confirm-dialog-btn-ok.e-btn.e-select:hover,
    @{e-widget} .e-treegrid-rename-dialog-btn-ok.e-btn.e-select:hover,
    @{e-widget} .e-add-dialog-btn-ok .e-btn.e-select:hover,
    @{e-js} .e-filter-btn-filter .e-btn.e-select:hover {
        background: @theme-dark;
        color: @theme-dark-font;
    }

    @{e-js}.e-treegrid .e-dialog .e-treegridform .e-editdialogbutton .e-save:focus,
    @{e-widget}.e-treegrid-dialog .e-confirm-dialog-btn-ok.e-btn.e-select:focus,
    @{e-widget} .e-treegrid-rename-dialog-btn-ok.e-btn.e-select:focus,
    @{e-widget} .e-add-dialog-btn-ok .e-btn.e-select:focus,
    @{e-js} .e-filter-btn-filter .e-btn.e-select:focus {
        background: @theme-dark;
        color: @theme-dark-font;
        border-color: @theme-primary;
    }

    @{e-js}.e-treegrid .e-dialog .e-treegridform .e-editdialogbutton .e-save:active,
    @{e-widget}.e-treegrid-dialog .e-confirm-dialog-btn-ok.e-btn.e-select:active,
    @{e-widget} .e-treegrid-rename-dialog-btn-ok.e-btn.e-select:active,
    @{e-widget} .e-add-dialog-btn-ok .e-btn.e-select:active,
    @{e-js} .e-filter-btn-filter .e-btn.e-select:active {
        background: @theme-primary;
        color: @theme-primary-font;
        border-color: @theme-primary;
    }

    @{e-widget}.e-dialog.e-widget-content.e-filterMenuDiv {
        background: @neutral-white;
    }

    @{e-widget}.e-dialog.e-widget-content.e-filterMenuDiv .e-filter-text {
        font-size: 13px;
        font-weight: normal;
    }
}

@{e-widget} .e-treegrid-resIcon {
    & when (@skin= "material") {
        color: fade(@base-font-color, 54%);
    }

    & when not (@skin= "material") {
        color: @header-icon-color;
    }
}



.e-ribbon.e-js .e-header .e-bottom-line.e-select.e-item, .e-ribbon.e-js .e-header .e-top-line.e-select.e-item {
 & when not (@skin= "material") {
    background: transparent;
    outline: none;
    outline-offset: 0;
 }
}
.e-ribbon.e-js.e-widget {
    .ribbon-shadow();
    font-size: 14px;
}
@{e-widget}ej-ribbon {
	display: block;
}
@{e-widget}.e-ribbon .e-rbn-button.e-button .e-btntxt{
    white-space:pre-wrap;
	& when (@skin= "material") {
        /*material*/
      color: fade(@base-font-color,87%);
    }
	& when (@skin= "office-365") {
        /*office-365*/
      color: @neutral-secondary-alt;
    }
}

.e-ribbon.e-js .e-header .e-select.e-disable .e-apptabanchor{
    & when (@skin="office-365"){
	    color: @theme-primary-font;
	}
}

.e-ribbon.e-js .e-groupdiv .e-disable .e-icon{
	& when (@skin= "material") {
        /*material*/
      color: @base-font-color;
    }
}

@{e-widget}.e-ribbon .e-rbn-button.e-btn.e-select:focus {
    box-shadow:none;
}
@{e-widget}.e-ribbon .e-groupdiv > div:after {
	& when (@skin= "material") {
      /*material*/
     background: @grey-300;
    }
	& when not (@skin= "material") {
      /*other*/
     background: @rbncontent-border-color;
   }
}
@{e-widget}.e-ribbon .e-ribbonbackicon{
    .ribbon-header-gradient();
}
@{e-widget}.e-ribbon .e-backstagetopicon span:hover:before {
   & when not (@skin= "material") {
      /*other*/
     opacity: 0.8;
     filter: alpha(opacity=80);
	 }
}
@{e-widget}.e-ribbon .e-captionarea {
	& when (@skin= "material") {
      /*material*/
      color: fade(@base-font-color,38%);
    }
	& when (@skin= "office-365") {
      /*office-365*/
      color: @neutral-secondary-alt;
    }
	& when not (@skin= "material") and not (@skin= "office-365") {
      /*other*/
     color: @rbncaption-font-color;
   }
}
@{e-widget} .e-separatordiv, @{e-widget} .e-separatordivrow{
    background: @default-border-color;
}

.e-ribbon.e-js .e-content{
    & when (@skin= "material") {
      /*material*/
     background: @grey-100;
    }
	& when not (@skin= "material") {
      /*other*/
     background: @rbncontent-content-bg-color;
   }
   & when (@skin="office-365"){
        /*office-365*/
	    border-width: 1px;
		border-color: @neutral-tertiary-alt;
    } 
	& when not(@skin= "office-365"){
	    /*not office-365*/
		border-color: @rbncontent-border-color;
	}
	border-top-width:0;
	color:@content-font-color;
}

@{e-widget}.e-ribbon .e-drp-btn.e-select .e-icon, @{e-widget}.e-ribbon .e-btn.e-select .e-icon{
    & when (@skin="office-365"){
        /*office-365*/
	    color: @neutral-secondary-alt;
    }
}

@{e-widget}.e-ribbon .e-rbn-ddl.e-ddl .e-select{
   background: @rbndropdown-color;
   border-color: @content-border-color;
   color: @default-icon-color;
   filter:none;
}
@{e-widget}.e-ribbon .e-rbn-ddl.e-ddl .e-select:hover{
    .ribbon-hover-gradient();
	color: @hover-icon-color;
}
@{e-widget}.e-ribbon .e-expandcollapse span:hover, @{e-widget}.e-ribbon .e-expander:hover
{
    border-color: @hover-border-color;
	& when (@skin="office-365"){
        /*office-365*/
	    color: @neutral-secondary-alt;
		background: @theme-lighter;
    }
	& when not(@skin="office-365"){
        /*other*/
	    .hover-gradient();
		color:  @hover-icon-color;
    }
}
@{e-widget}.e-ribbon .e-expandcollapse span, @{e-widget}.e-ribbon .e-expander
{
   & when (@skin="office-365"){
	    color: @neutral-secondary-alt;
    }
    & when not(@skin="office-365"){
        /*other*/
    	color:  @default-icon-color;
	}
}
.e-ribbon.e-js .e-header,.e-ribbon.e-js .e-left,.e-ribbon.e-js .e-right{
     & when (@skin= "material") {
        /*material*/
        border-bottom: none;
      }
	  & when (@skin= "office-365"){
	     /*office-365*/
		 border: 1px solid @neutral-tertiary-alt;
	  }
    .high-contrast-ribbon-header-border;
    .office-ribbon-header-border;
	.header-gradient();
	& when not(@skin="office-365"){
         border:1px solid @header-border-color;
	}
}

.e-ribbon.e-js .e-header, .e-ribbon.e-js .e-left, .e-ribbon.e-js .e-right {
   & when not (@skin= "material") and not (@skin="office-365") {
      /*other*/
    .office-ribbon-header-bg-color;
   }
}

.e-ribbon.e-js .e-header > .e-select,@{e-widget}.e-ribbon.e-js .e-header > .e-active,.e-ribbon.e-js .e-left > .e-active,.e-ribbon.e-js .e-right > .e-active,.e-ribbon.e-js .e-left > .e-select,.e-ribbon.e-js .e-right > .e-select{
 & when not (@skin= "material") {
    background:transparent;
	border:none;
  }
  & when (@skin="office-365"){
    border: none! important;
  }
}
.e-ribbon.e-js .e-header > .e-select:not(.e-apptab) a, .e-ribbon.e-tab.e-js .e-header .e-select.e-disable a:hover {
 & when not (@skin= "material") and not (@skin= "office-365"){
    .office-ribbon-header-font-color;
     color:@rbntab-font-color;
	.ribbon-tab-hover();
 }
 & when (@skin= "office-365") {
    .office-ribbon-header-font-color;
     color:@theme-light-font;
	.ribbon-tab-hover();
 }
}
@{e-widget}.e-ribbon .e-apptab .e-menu .e-active >a,@{e-widget}.e-ribbon .e-apptab .e-menu .e-active span {
   & when not (@skin= "material") and not(@skin="office-365") and not(@skin="bootstrap"){
     color:@rbnapptab-font-color !important;
	}
	& when (@skin="office-365"){
	  color: @theme-dark-font ! important;
	}
	& when (@skin="bootstrap"){
	  color: @active-font-color ! important;
	}
}
.e-ribbon.e-js .e-header li.e-select:not(.e-apptab) a:hover {
  & when not (@skin= "material") {
    .high-contrast-ribbon-header-hover-font;
     color:@rbn-bg-color;
	.ribbon-bg-hover-gradient();
 }
}
.e-ribbon.e-js .e-header .e-active.e-tab a:hover, .e-ribbon.e-js .e-header .e-active.e-contextualtabset a:hover {
  & when not (@skin= "material") {
    .ribbon-bg-active-gradient();
	 color:@rbn-act-color;
 }
}
.e-ribbon.e-js .e-header .e-active.e-tab a, .e-ribbon.e-js .e-header .e-active.e-contextualtabset a {
  & when (@skin= "office-365") {
	 color:@theme-darker;
 }
}
@{e-widget}.e-ribbon .e-apptab .e-menu ul > li >a{
    color:@rbncontent-font-color !important;
}
@{e-widget}.e-ribbon .e-apptab .e-menu >li >a:hover,@{e-widget}.e-ribbon .e-apptab .e-menu .e-active span:hover,@{e-widget}.e-ribbon .e-apptab .e-menu .e-active,@{e-widget}.e-ribbon .e-apptab .e-menu .e-active >a{
 & when not (@skin= "material") {  
  .office-ribbon-file-hover();
  }
}

@{e-widget}.e-ribbon.e-grpdivhide{
   border-right:1px solid @header-border-color !important;
}
@{e-widget}.e-ribbon.e-rtl.e-grpdivhide{
   border-left:1px solid @header-border-color !important;
}
@{e-widget}.e-ribbon .e-header > .e-apptab  .e-menu {
    .ribbon-active-gradient();
}

@{e-widget}.e-ribbon .e-header > .e-apptab  .e-menu {
    .high-contrast-ribbon-file-header();
    .office-ribbon-file-header();
    .material-ribbon-file-header();
}

.e-ribbon.e-js .e-header .e-apptab .e-menu > li:first-child > a,.e-ribbon.e-js .e-header .e-apptab .e-menu > li:first-child > a > span {
    .switch-ribbon-file-header-txt-color;
    & when (@skin="office-365"){
	  color: @theme-primary-font;
	}
	& when not (@skin="office-365"){
	   color:@rbn-white-color;
	}
}

.e-ribbon.e-js .e-header > .e-item:hover {
 & when not (@skin= "material") {
    background:transparent;
	border:none;
 }
}
.e-ribbon.e-js .e-header .e-active.e-tab  a,.e-ribbon.e-js .e-header .e-active.e-contextualtabset a {
	& when not (@skin= "material") {
      /*other*/
    .high-contrast-ribbon-header-active-border;
    border-color:@rbn-act-a-border-color @rbn-act-a-border-color transparent;
    .high-contrast-ribbon-header-active-font;
    .material-ribbon-header-active-font;
       .high-contrast-ribbon-header-active;
     background: @rbncontent-content-bg-color;
   }
   & when not (@skin="material") and not (@skin="office-365"){
        color:@rbn-bg-color;
   }
   & when (@skin="office-365"){
     color: @theme-darker;
   }
}
@{e-widget}.e-ribbon .e-rbn-button.e-btn.e-select,@{e-widget}.e-ribbon .e-rbn-button.e-btn.e-disable.e-select:hover,@{e-widget}.e-ribbon .e-rbn-button.e-tbtn.e-disable{
	& when (@skin= "material") {
      /*material*/
     background: @grey-100;
	 color: @default-font-color;
    }
	& when (@skin= "office-365") {
      /*office-365*/
     background: @neutral-white;
	 color: @neutral-light-font;
	 
    }
	& when not (@skin= "material") and not (@skin= "office-365") {
      /*other*/
     background: @rbncontent-content-bg-color;
	 color: @default-font-color;
   }
    border-color: @rbncontent-content-bg-color;
	filter:none;
}
@{e-widget}.e-ribbon .e-rbn-button.e-btn.e-select .e-btntxt{
     & when (@skin= "office-365") {
      /*office-365*/
	 color: @theme-light-font;
    }
}
@{e-widget}.e-rbn-splitbtn.e-menu.e-split, @{e-widget}.e-rbn-splitbtn.e-menu.e-context.e-split,@{e-widget}.e-rbn-splitbtn.e-menu.e-context.e-split .e-list > ul{
    background: @rbncontent-content-bg-color;
}
.e-rbn-splitbtn.e-js.e-menu.e-split ul, .e-rbn-splitbtn.e-js.e-menu.e-context.e-split ul,.e-rbn-splitbtn.e-js.e-menu.e-context.e-split .e-list > ul,.e-rbn-splitbtn.e-js.e-menu.e-widget.e-split li.e-list{
    background: @rbncontent-content-bg-color;
}

@{e-widget} .e-resizegroupdiv.e-reshover,
@{e-widget} .e-resizegroupdiv.e-reshover .e-rbn-button.e-resizebtn,
@{e-widget}.e-ribbon.e-responsive .e-backstageli:hover, 
@{e-widget}.e-ribbon.e-responsive .e-responsivetabli:hover,
@{e-widget}.e-ribbon.e-js .e-rbn-button.e-btn.e-select:hover{
    & when (@skin= "office-365") {
      /*office-365*/
      background: @theme-lighter;
      color: @neutral-secondary-alt;
   }
   & when not (@skin= "office-365") {
      /*other*/
      .ribbon-hover-gradient();
	   color: @rbnhover-font-color;
   }
}

.e-ribbon.e-js .e-header .e-apptab.e-backstagetab:hover{
     & when (@skin= "office-365") {
	      background: @theme-dark;    
	  }
}
.e-ribbon.e-js .e-header .e-apptab.e-backstagetab:hover a {
      & when (@skin= "office-365") {
          color: @theme-dark-font! important;       
	  }
}

@{e-widget}.e-ribbon.e-responsive  .e-responsivebackstage li:hover, @{e-widget}.e-ribbon.e-responsive  .e-responsivebackstage li:hover a{
      & when (@skin= "office-365") {
      /*office-365*/
      color: @neutral-secondary-alt! important;
   }
}
@{e-widget}.e-ribbon .e-rbn-button.e-btn.e-select:active ,@{e-widget}.e-ribbon .e-rbn-button.e-btn.e-disable.e-active.e-select:hover,@{e-widget}.e-ribbon .e-rbn-button.e-tbtn.e-active
{
    .ribbon-toggle-gradient();
    color:  @rbnhover-font-color;
}
@{e-widget}.e-ribbon .e-rbn-button.e-btn.e-disable.e-active.e-select:hover{
    & when (@skin= "office-365") {
      /*office-365*/
      background: @theme-light;
	  color:  @rbnhover-font-color;
    }
}
@{e-widget}.e-ribbon .e-rbn-button.e-btn.e-select:active .e-icon,@{e-widget}.e-ribbon .e-rbn-button.e-btn.e-active .e-icon,@{e-widget}.e-ribbon .e-rbn-button.e-btn.e-select:hover .e-icon{
	& when not (@skin= "material") {
      /*other*/
      color:  @rbnhover-font-color;
   }
}
@{e-widget}.e-ribbon .e-rbn-button.e-btn.e-active .e-icon.e-ribbonresize{
    & when (@skin= "bootstrap") {
      /*bootstrap*/
      color:  @active-icon-color !important;
   }
}
@{e-widget}.e-ribbon .e-rbn-button.e-tbtn.e-active.e-disable {
  background: none;
}
.e-ribbon.e-js .e-header .e-apptab .e-menu >.e-list:nth-child(1):not(.e-active) > a:hover,.e-ribbon.e-js .e-header .e-apptab .e-menu >li:nth-child(1):not(.e-active) > a:hover span{
 & when not (@skin= "material") {
    color:@rbn-menu-font-hover-color;
 }
}
@{e-widget}.e-ribbon .e-disable{
   background: @rbncontent-content-bg-color;
   opacity: 0.35;
   filter: alpha(opacity=35);
}
@{e-widget}.e-ribbon .e-btn.e-disable.e-select, @{e-widget}.e-ribbon .e-btn.e-disable.e-select:hover,@{e-widget}.e-ribbon .e-tbtn.e-disable, @{e-widget}.e-ribbon .e-tbtn.e-disable:hover, @{e-widget}.e-ribbon .e-split.e-disable, @{e-widget}.e-ribbon .e-split.e-disable:hover, @{e-widget}.e-ribbon .e-btn.e-disable.e-select:active, @{e-widget}.e-ribbon .e-tbtn.e-btn.e-disable.e-select.e-active:hover, @{e-widget}.e-ribbon .e-tbtn.e-btn.e-disable.e-select.e-active{
   opacity: 0.35;
   filter: alpha(opacity=35);
}
@{e-widget}.e-ribbon .e-modelDiv{
   background: @rbncontent-content-bg-color;
   opacity: 0;
   filter: alpha(opacity=0);
}
@{e-widget}.e-ribbon .e-groupdiv .e-gallerycontent,@{e-widget}.e-ribbon .e-groupdiv .e-gallexpandcontent,
@{e-widget}.e-ribbon .e-resizediv .e-gallerycontent,@{e-widget}.e-ribbon .e-resizediv .e-gallexpandcontent{
  background:@rbngallery-bg-color;
  border-color: @rbncontent-border-color;
}
@{e-widget}.e-ribbon.e-rtl .e-groupdiv .e-gallerycontent{
 border-right-color: @rbncontent-border-color;
}
@{e-widget}.e-ribbon .e-groupdiv .e-gallscrollcontent .e-content,@{e-widget}.e-ribbon .e-resizediv .e-gallscrollcontent .e-content{
  background:@rbngallery-bg-color;
}
@{e-widget}.e-ribbon .e-groupdiv .e-gallerymovediv,@{e-widget}.e-ribbon .e-resizediv .e-gallerymovediv,
@{e-widget}.e-ribbon .e-groupdiv .e-gallexpandcontent,@{e-widget}.e-ribbon .e-resizediv .e-gallexpandcontent{
  background:@rbngallery-bg-color;
 }
@{e-widget}.e-ribbon .e-groupdiv .e-extracontent,@{e-widget}.e-ribbon .e-resizediv .e-extracontent{
  border-top-color: @rbncontent-border-color;
 }
@{e-widget}.e-ribbon .e-groupdiv .e-moveupdiv,@{e-widget}.e-ribbon .e-groupdiv .e-movedowndiv,@{e-widget}.e-ribbon .e-groupdiv .e-expgallerydiv,
@{e-widget}.e-ribbon .e-resizediv .e-moveupdiv,@{e-widget}.e-ribbon .e-resizediv .e-movedowndiv,@{e-widget}.e-ribbon .e-resizediv .e-expgallerydiv{
 border-color:@rbncontent-border-color;
 }
.e-ribbon.e-js .e-groupdiv .e-rbn-button.e-gallerybtn,.e-ribbon.e-js .e-resizediv .e-rbn-button.e-gallerybtn
{
  background:@rbngallery-bg-color !important;
  border-color:@rbngallery-bg-color;
}
@{e-widget}.e-ribbon .e-groupdiv .e-rbn-button.e-galleryextrabtn,@{e-widget}.e-ribbon .e-resizediv .e-rbn-button.e-galleryextrabtn,
.e-ribbon.e-js .e-groupdiv .e-extracontent .e-menu,.e-ribbon.e-js .e-resizediv .e-extracontent .e-menu{
   background:@content-bg-color;
   color:@content-font-color;
 }
.e-ribbon.e-js .e-gallerymenu a{
        & when (@skin= "office-365") {
            /*office-365*/
            color:@neutral-dark! important;
        }
		& when not (@skin= "office-365") {
            /*other*/
            color:@content-font-color;
        }
 }
 @{e-widget}.e-ribbon .e-groupdiv .e-rbn-button.e-galleryextrabtn:hover,@{e-widget}.e-ribbon .e-resizediv .e-rbn-button.e-galleryextrabtn:hover{
  .ribbon-hover-gradient();
 }
.e-ribbon.e-js .e-groupdiv .e-rbn-button.e-galleryselect,.e-ribbon.e-js .e-resizediv .e-rbn-button.e-galleryselect
{
  box-shadow:none;
  border-color:@rbngallery-select-color;
}
.e-ribbon.e-js .e-groupdiv .e-rbn-button.e-gallerybtn:hover,.e-ribbon.e-js .e-resizediv .e-rbn-button.e-gallerybtn:hover
{
  border-color:@rbngallery-hover-color;
  color:@rbn-text-color;
  background:@rbncontent-content-bg-color;
 }
 @{e-widget}.e-ribbon .e-groupdiv .e-gallerymovediv > div:hover,@{e-widget}.e-ribbon .e-resizediv .e-gallerymovediv > div:hover
{
   .ribbon-hover-gradient();
   border-color:@rbngallery-select-color;
  }
 @{e-widget}.e-ribbon .e-groupdiv .e-movedowndiv:hover ~ .e-expgallerydiv,@{e-widget}.e-ribbon .e-groupdiv .e-moveupdiv:hover ~ .e-movedowndiv{
     border-top-color:@rbngallery-select-color;
}
@{e-widget}.e-ribbon .e-groupdiv .e-disablegrymovebtn:hover ~ .e-expgallerydiv,@{e-widget}.e-ribbon .e-groupdiv .e-disablegrymovebtn:hover ~ .e-movedowndiv{
border-top-color:@rbncontent-border-color;
}
@{e-widget}.e-ribbon .e-groupdiv .e-gallerymovediv >.e-disablegrymovebtn,@{e-widget}.e-ribbon .e-groupdiv .e-gallerymovediv >.e-disablegrymovebtn:hover,
@{e-widget}.e-ribbon .e-resizediv .e-gallerymovediv >.e-disablegrymovebtn,@{e-widget}.e-ribbon .e-resizediv .e-gallerymovediv >.e-disablegrymovebtn:hover
{
  background:@rbngallery-bg-color;
  border-color:@rbncontent-border-color;
}
@{e-widget}.e-ribbon .e-tooltipdiv{
     & when (@skin= "material") {
      /*material*/
       border-color:@grey-700;
       background:@grey-700;
    }
	& when not (@skin= "material") {
      /*other*/
      border-color:@rbncontent-border-color;
      background:@rbngallery-bg-color;
   }
}
@{e-widget}.e-ribbon .e-tooltipdiv .e-tooltiptitle,@{e-widget}.e-ribbon .e-tooltipdiv .e-tooltipcontent,@{e-widget}.e-ribbon .e-tooltipdiv .e-tooltipcntwithimg{
    & when (@skin= "material") {
      /*material*/
       color: @primary-font-color;
    }
	& when not (@skin= "material") {
      /*other*/
      color:@rbncontent-font-color;
   }  
}
@{e-widget}.e-ribbon .e-resizediv{
    border-color:@rbncontent-border-color;
    & when (@skin= "material") {
      /*material*/
     background: @grey-100;
    }
	& when not (@skin= "material") {
      /*other*/
     background: @rbncontent-content-bg-color;
   }
}
@{e-widget}.e-ribbon .e-header .e-margine-top:hover{
 & when not (@skin= "material") {
    border-top: none;
 }
}
@{e-widget}.e-ribbon .e-groupdiv .e-gallexpandcontent,@{e-widget}.e-ribbon .e-resizediv .e-gallexpandcontent{
  border-color:@rbngallery-border-color;
 }	
 @{e-widget}.e-ribbon .e-groupdiv .e-disablegrymovebtn > span,@{e-widget}.e-ribbon .e-resizediv .e-disablegrymovebtn > span{
  color:@rbngallery-disable-color;
}
 @{e-widget}.e-ribbon .e-rbn-button.e-btn.e-disable.e-select:hover .e-icon {
  & when (@skin="office-365") {
     color: @neutral-secondary-alt! important;
  }
  & when not (@skin="office-365") {
     color: @rbn-text-color;
  }
}
@{e-widget}.e-ribbon .e-rbn-button.e-btn.e-disable.e-select:hover{
background:none;
}
@{e-widget}.e-ribbon .e-rbn-button.e-tbtn.e-active.e-disable .e-icon {
  color: @rbn-text-color;
}
@{e-widget}.e-ribbon .e-rbn-ddl.e-ddl .e-disable.e-select:hover {
  background:none;
  color: @rbn-text-color;
}

.e-ribbon.e-js .e-groupdiv .e-disable .e-icon {
    & when (@skin="material") {
        color: fade(@base-font-color, 26%);
    }
}
.e-ribbon.e-js .e-btn.e-disable.e-select:hover, .e-ribbon.e-js .e-btn.e-disable.e-select:hover, .e-ribbon.e-js .e-tbtn.e-disable:hover,
.e-ribbon.e-js .e-btn.e-disable.e-select:active, .e-ribbon.e-js .e-btn.e-disable.e-select:active{
    & when (@skin="office-365") {
	    /*office-365*/
		color: @neutral-secondary-alt! important;
    }
}
@{e-widget}.e-ribbon .e-ribbonbackstagepage{
  border-color:@rbn-border-color;
  background:@rbncontent-content-bg-color;
}
.e-backstagescrollcontent.e-js .e-content{
  background:@rbncontent-content-bg-color;
}
@{e-widget}.e-ribbon .e-backstagetopcontent,.e-ribbon .e-backstageheader{
  .ribbon-header-gradient();
}
@{e-widget}.e-ribbon .e-backstageli:hover{
   & when (@skin= "material") {
      /*material*/
      color: fade(@header-font-color,70%);
      background: fade(@content-bg-color,12%);
    }
	& when (@skin= "office-365") {
      /*office-365*/
       background: @theme-dark-alt;
    }
	& when not (@skin= "material") and not (@skin = "office-365") {
        /*other*/
     .ribbon-backstage-hover-bg();
    }
}
@{e-widget}.e-ribbon .e-backstageseparator,@{e-widget}.e-ribbon .e-backstageactive{
    & when (@skin= "material") {
        /*material*/
        color: fade(@header-font-color,100%);
        background: fade(@content-bg-color,12%);
    }
	& when (@skin= "office-365") {
        /*office-365*/
        background: @theme-secondary;
    }
	& when not (@skin= "material") and not (@skin="office-365"){
        /*other*/
     .ribbon-backstage-select-bg();
    }
}
@{e-widget}.e-ribbon .e-backstagetopicon span:hover:before{
	& when not (@skin= "material") {
        /*other*/
     color: @hover-bg-stcolor;
    }
}
@{e-widget}.e-ribbon .e-backstagetopicon span:before{
  color: @rbn-white-color;
}
@{e-widget}.e-ribbon .e-header > .e-apptab .e-apptabanchor:hover{
	& when not (@skin= "material") {
  .ribbon-app-hover-gradient();
  color:@rbn-menu-font-hover-color;
  }
}

@{e-widget}.e-ribbon .e-header > .e-apptab .e-apptabanchor:hover {
	& when not (@skin= "material") {
    .high-contrast-ribbon-file-header-hover();
    .material-ribbon-file-header-hover();
	}
}

@{e-widget}.e-ribbon .e-backstageli a,@{e-widget}.e-ribbon .e-backstagebutton{
  color: @active-font-color;
}
.e-ribbon.e-js .e-backstageheader .e-backstageli:hover a,.e-ribbon.e-js .e-backstageheader .e-backstageactive a,.e-ribbon.e-js .e-backstageheader .e-backstagebutton:hover{
    & when (@skin= "material") {
        /*material*/
        color: fade(@header-font-color,100%);
    }
	& when not (@skin= "material") {
        /*other*/
     color: @active-font-color;
    }
}
@{e-widget}.e-ribbon .e-backstagecontent{
  background:@rbncontent-content-bg-color;
}
@{e-widget}.e-ribbon .e-header > .e-apptab .e-apptabanchor{
  .ribbon-active-gradient();
  .ribbon-app-tab-font();
}

@{e-widget}.e-ribbon .e-header > .e-apptab .e-apptabanchor {
    .high-contrast-ribbon-file-header();
    .office-ribbon-file-header();
    .material-ribbon-file-header();
}
@{e-widget}.e-ribbon.e-rbnwithqat .e-rbnqatmenu,@{e-widget}.e-ribbon.e-rbnwithqat .e-qaresizediv{
    & when (@skin= "material") {
        /*material*/
        border-color: @grey-300;
	    box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.21);
      }
	  & when not (@skin= "material") {
        /*other*/
       border-color:@header-border-color;
     }
  background:@content-bg-color;
}
@{e-widget}.e-ribbon.e-rbnwithqat .e-rbnqatmenu div{
 .default-gradient();
}
@{e-widget}.e-ribbon.e-rbnwithqat .e-qatmenuli{
  background:@content-bg-color;
  color:@content-font-color;
}
@{e-widget}.e-ribbon.e-rbnwithqat .e-qatseparator{
  background:@content-border-color;
}
@{e-widget}.e-ribbon.e-rbnwithqat .e-qatmenuli:hover{
  .hover-gradient();
  color:@hover-font-color;
}
@{e-widget}.e-ribbon.e-rbnwithqat .e-rbnquickaccessbar,@{e-widget}.e-ribbon.e-rbnwithqat .e-rbnquickaccessbar .e-btn{
  background:transparent;
}
.e-ribbon.e-js .e-rbn-button.e-tbtn:hover, .e-ribbon.e-js .e-rbn-button.e-btn:hover, .e-ribbon.e-rbnwithqat.e-js .e-rbn-button.e-tbtn:hover{
    & when (@skin="office-365") {
	    /*office-365*/
        background: @theme-lighter;
		color: @neutral-secondary-alt;
    }
}
.e-ribbon.e-js .e-rbn-button.e-tbtn.e-active:hover,.e-ribbon.e-js .e-rbn-button.e-tbtn.e-active,.e-ribbon.e-js .e-rbn-button.e-btn.e-resizebtnselect,.e-ribbon.e-rbnwithqat.e-js .e-rbn-button.e-tbtn.e-active{
      & when (@skin="material") {
	    /*material*/
        background-color: @grey-400;
		color:fade(@base-font-color, 54%);
      }
	  & when (@skin="office-365") {
	    /*office-365*/
        background: @theme-light;
		color:  @rbnhover-font-color;
      }
	  & when (@skin="bootstrap") {
	    /*bootstrap*/
       .ribbon-toggle-gradient();
       color:  @active-font-color;
      }
	  & when not (@skin= "material") and not (@skin="office-365") and not (@skin="bootstrap") {
        /*other*/
       .ribbon-toggle-gradient();
       color:  @rbnhover-font-color;
     }
}

.e-ribbon.e-js .e-rbn-button.e-tbtn.e-select:active .e-icon,.e-ribbon.e-js .e-rbn-button.e-tbtn.e-active .e-icon,.e-ribbon.e-js .e-rbn-button.e-tbtn.e-select.e-active:hover,.e-ribbon.e-js .e-rbn-button.e-tbtn.e-select.e-active:hover .e-icon{
      & when (@skin="material") {
	    /*material*/
	 	color: fade(@base-font-color, 54%);
      }
	   & when (@skin="office-365") {
	    /*office-365*/
	 	color:@neutral-secondary-alt! important;
      }
	  & when (@skin="bootstrap") {
	    /*bootstrap*/
	 	color: @active-icon-color;
     }
	  & when not (@skin= "material") and not (@skin="office-365") and not (@skin="bootstrap") {
        /*other*/
       color:  @rbnhover-font-color;
     }
}
.e-ribbon.e-js .e-rbn-button.e-btn,@{e-widget}.e-ribbon .e-active-content.e-parentdiv .e-split,@{e-widget}.e-ribbon .e-resizediv .e-split,@{e-widget}.e-ribbon.e-rbnwithqat .e-rbnquickaccessbar .e-split {
  box-shadow:none;
}
@{e-widget}.e-ribbon.e-responsive .e-header,
@{e-widget}.e-ribbon.e-responsive  .e-responsiveqat .e-rbn-button.e-btn,
@{e-widget}.e-ribbon.e-responsive  .e-resqatScroll .e-content,
@{e-widget}.e-ribbon.e-responsive .e-backstagerestop
{
   & when (@skin= "material") {
      /*material*/
      background: @header-bg-endcolor !important;
    }
	& when not (@skin= "material") {
      /*other*/
     background:@active-bg-endcolor !important;
    }
}
@{e-widget}.e-ribbon.e-responsive .e-icon.e-resbackstage,
@{e-widget}.e-ribbon.e-responsive .e-ribresmenu .e-icon,
@{e-widget}.e-ribbon.e-responsive .e-ribresmenu a, 
@{e-widget}.e-ribbon.e-responsive .e-responsiveqat .e-rbn-button.e-btn .e-icon
 {
     color:@active-font-color !important;
    }
@{e-widget}.e-ribbon.e-responsive .e-responsivebackstagecontent{
    background:@active-font-color !important;
}
@{e-widget}.e-ribbon.e-responsive .e-backstageheader,
@{e-widget}.e-ribbon.e-responsive .e-rescontent
{
    .header-gradient();
}
@{e-widget}.e-ribbon.e-responsive .e-responsivetabheader .e-rescontent
{
 & when (@skin= "material") {
      /*material*/
    background:@content-bg-color;
	box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.21);
    border-radius: 2px;
 }
}
@{e-widget}.e-ribbon.e-responsive .e-backstageheader .e-backstagebutton,
@{e-widget}.e-ribbon.e-responsive .e-backstageheader a{
    color:@default-icon-color;
}

@{e-widget}.e-ribbon.e-responsive .e-responsiveback,
@{e-widget}.e-ribbon.e-responsive .e-groupmobdiv,
@{e-widget}.e-ribbon.e-responsive .e-groupdiv{
border-bottom: 1px solid @content-border-color;
}
@{e-widget}.e-ribbon.e-responsive .e-responsiveqat .e-rbn-button.e-btn.e-active .e-icon {
     color:@header-font-color !important;
}
@{e-widget}.e-ribbon.e-responsive .e-rescontent,
@{e-widget}.e-ribbon.e-responsive .e-backstageheader{
box-shadow: -1px 0 10px 0 black;
}

@{e-widget}.e-ribbon .e-rbnquickaccessbar .e-rbn-button .e-icon {
   & when (@skin= "material") {
        /*material*/
        color:@header-icon-color !important;
      }
}
@{e-widget}.e-ribbon.e-rbnwithqat .e-rbnquickaccessbar .e-qatooldiv .e-split .e-in-wrap .e-rbn-splitbtn.e-rbn-button,@{e-widget}.e-ribbon.e-rbnwithqat .e-rbnquickaccessbar .e-btn.e-rbn-button,@{e-widget}.e-ribbon.e-rbnwithqat .e-rbnquickaccessbar .e-qatooldiv .e-split .e-in-wrap{
	& when (@skin= "material") {
      /*material*/
      background: @header-bg-endcolor !important;
    }
}
@{e-widget}.e-ribbon.e-rbnwithqat .e-rbnquickaccessbar .e-qatooldiv .e-split .e-in-wrap .e-rbn-splitbtn.e-rbn-button:hover,@{e-widget}.e-ribbon.e-rbnwithqat .e-rbnquickaccessbar .e-btn.e-rbn-button:hover{
	& when (@skin= "material") {
      /*material*/
      background:transparent !important;
    }
}
.e-ribbon.e-rbnwithqat.e-js .e-rbnquickaccessbar .e-rbn-button.e-tbtn.e-active,.e-ribbon.e-rbnwithqat.e-js .e-rbnquickaccessbar .e-rbn-button.e-tbtn.e-active:hover{
	& when (@skin= "material") {
      /*material*/
     background:fade(@content-bg-color,12%)!important;
    }
}
@{e-widget}.e-ribbon.e-rbnwithqat.e-js .e-rbnquickaccessbar .e-rbn-button.e-tbtn.e-active,@{e-widget}.e-ribbon.e-rbnwithqat.e-js .e-rbnquickaccessbar .e-rbn-button.e-tbtn.e-active:hover,@{e-widget}.e-ribbon.e-rbnwithqat .e-rbnquickaccessbar .e-btn.e-rbn-button:hover{
	& when (@skin= "material") {
      /*material*/
     background:fade(@content-bg-color,12%);
    }
}
@{e-widget}.e-ribbon.e-responsive .e-responsivetabli.e-resactive{
	& when (@skin= "material") {
      /*material*/
     color:@grey-400;
    }
}
@{e-widget}.e-ribbon.e-responsive .e-ribresmenu a,@{e-widget}.e-ribbon.e-responsive .e-responsivetabli,@{e-widget}.e-ribbon.e-responsive .e-rescontent .e-responsivetabli:hover{
     & when (@skin= "material") {
        /*material*/
     background: @grey-200;
    }
}
@{e-widget}.e-ribbon.e-responsive .e-backstageheader .e-backstageli:hover, @{e-widget}.e-ribbon.e-responsive .e-backstageheader .e-backstagebutton:hover{
     & when (@skin= "material") {
        /*material*/
     background:fade(@content-bg-color,12%);
    }
}
.e-ribbon.e-js .e-backstageheader .e-backstageli a, .e-ribbon.e-js .e-backstageheader .e-backstagebutton{
     & when (@skin= "material") {
        /*material*/
      color: fade(@header-font-color,70%);
    }
}
@{e-widget}.e-ribbon .e-header>.e-select a, @{e-widget}.e-ribbon .e-left>.e-select a, @{e-widget}.e-ribbon .e-right>.e-select a,.e-ribbon.e-js .e-header .e-apptab .e-menu>li:first-child>a, .e-ribbon.e-js .e-header .e-apptab .e-menu>li:first-child>a>span,@{e-widget}.e-ribbon .e-header>.e-apptab .e-apptabanchor{
  & when (@skin= "material") {
        /*material*/
     color: fade(@header-font-color,70%);
    }
}
.e-ribbon.e-js .e-header .e-apptab .e-menu >.e-list:nth-child(1):not(.e-active) > a:hover{
  & when (@skin= "material") {
        /*material*/
      color: fade(@base-font-color,87%);    
    }
}
@{e-widget}.e-ribbon .e-header>.e-active a, @{e-widget}.e-ribbon .e-left>.e-active a, @{e-widget}.e-ribbon .e-right>.e-active a,@{e-widget}.e-ribbon .e-header>.e-select:hover a, @{e-widget}.e-ribbon .e-left>.e-select:hover a, @{e-widget}.e-ribbon .e-right>.e-select:hover a{
  & when (@skin= "material") {
        /*material*/
      color: @header-font-color;
    }
}
@{e-widget}.e-ribbon .e-header>.e-select, @{e-widget}.e-ribbon .e-left>.e-select, @{e-widget}.e-ribbon .e-right>.e-select,@{e-widget}.e-ribbon .e-header>.e-active, @{e-widget}.e-ribbon .e-left>.e-active, @{e-widget}.e-ribbon .e-right>.e-active{
  & when (@skin= "material") {
        /*material*/
      background: transparent !important;
      color: @header-font-color !important;
    }
}
 .e-ribbon .e-ddl.e-widget.e-rbn-ddl .e-input,@{e-widget}.e-ribbon .e-rbn-ddl.e-ddl .e-select{
    & when (@skin= "material") {
      /*material*/
     background: @grey-100;
     box-shadow: none;
    }
}
.e-ribbon.e-js .e-header .e-contextual .e-contextualtabset.e-active{
    & when (@skin= "material") {
      /*material*/
     border-bottom: 2px solid @accent-color !important;
    }
}
@{e-widget}.e-ribbon.e-rbnwithqat .e-rbnquickaccessbar.e-rbnbelow{
    & when (@skin= "material") {
      /*material*/
      background: @header-bg-endcolor;
    }
}
.e-ribbon.e-js .e-split.e-widget .e-rbn-button.e-btn.e-select:hover,@{e-widget}.e-ribbon.e-js .e-rbn-button.e-btn.e-select:hover,
.e-ribbon.e-js .e-split.e-widget:hover .e-in-wrap.e-splitarrowbottom .e-split-btn.e-left-btn,.e-ribbon.e-js .e-split.e-widget:hover .e-in-wrap.e-splitarrowbottom .e-split-btn.e-drp-btn,
.e-ribbon.e-js .e-split.e-widget:hover .e-in-wrap.e-splitarrowtop .e-split-btn.e-left-btn,.e-ribbon.e-js .e-split.e-widget:hover .e-in-wrap.e-splitarrowtop .e-split-btn.e-drp-btn,
.e-ribbon.e-js .e-split.e-widget:hover .e-in-wrap.e-splitarrowleft .e-split-btn.e-left-btn,.e-ribbon.e-js .e-split.e-widget:hover .e-in-wrap.e-splitarrowright .e-split-btn.e-drp-btn,
.e-ribbon.e-js .e-split.e-widget:hover .e-in-wrap.e-splitarrowright .e-split-btn.e-left-btn,.e-ribbon.e-js .e-split.e-widget:hover .e-in-wrap.e-splitarrowleft .e-split-btn.e-drp-btn
{
    & when (@skin= "material") {
      /*material*/
      background: @grey-300;
    }
}
.e-ribbon.e-js .e-rbn-button.e-tbtn.e-select.e-active:hover, .e-ribbon.e-js .e-rbn-button.e-tbtn.e-select.e-active{
    & when (@skin= "material") {
      /*material*/
      background: @grey-400;
    }
}

.e-ribbon.e-js .e-rbn-split.e-split.e-widget:hover .e-in-wrap.e-splitarrowright .e-split-btn.e-left-btn {
    & when (@skin="material") {
        border-width: 0px 0.5px 0px 0px;  
        border-color: fade(@base-font-color,12%);
    }
}
.e-ribbon.e-responsive.e-js .e-responsivecontent .e-innerdivrow:after, .e-ribbon.e-responsive.e-js .e-responsivecontent .e-innerdiv:after {
	 & when (@skin= "material") {
    background:  @grey-300;
	}
}
.e-ribbon.e-responsive.e-js .e-ddl.e-widget.e-rbn-ddl .e-in-wrap{
 & when (@skin= "material") {
  border-bottom: 1px solid fade(@base-font-color,12%);
	 }
}
@{e-widget}.e-ribbon .e-expandcollapse .e-icon:after{
  & when (@skin= "material") {
     /*material*/
     background: @base-font-color;
     background: fade(@base-font-color,12%);
 }
}

.e-ribbon.e-responsive.e-js .e-icon.e-ribuparrow:before,.e-ribbon.e-responsive.e-js .e-ribupdivarrow .e-icon.e-ribdownarrow:before,.e-ribbon.e-responsive.e-js .e-icon.e-ribrightarrow:before,.e-ribbon.e-responsive.e-js .e-groupresponsive.e-ribleftarrow:before {
	 & when (@skin= "material") {
        /*material*/
       color: fade(@base-font-color,87%);
      }
}
@{e-widget}.e-ribbon .e-expandcollapse .e-icon:after,.e-ribbon.e-responsive.e-js .e-ribupdivarrow .e-icon:after{
  & when (@skin= "material") {
     /*material*/
     background: @base-font-color;
     background: fade(@base-font-color,12%);
 }
}


@{e-widget}.e-kanban, @{e-widget}.e-kanban .e-kanbanheader .e-headercell, @{e-widget}.e-kanban .e-swimlanerow {
    background: @content-bg-color;
}

@{e-widget}.e-kanban .e-icon,@{e-widget}.e-kbntoolbar-body .e-icon{
    color: @default-icon-color;
}

@{e-widget}.e-kanban {
    border-color: @content-border-color;
    color: @content-font-color;
}

@{e-widget}.e-kanban .e-kanbancontent .e-rowcell .e-shrinkheader {
     & when (@skin= "material") {
        /*material*/
    color: @accent-color;
   }
   & when not (@skin= "material") {
        /*other*/
    color: @active-bg-stcolor;
   }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-searchbar .e-search:before, @{e-widget}.e-kanban .e-kanbantoolbar .e-searchbar .e-search:after {
    & when (@skin= "material") {
        /*material*/
        background: @accent-color;
    }
}

@{e-widget}.e-kanban .e-kanbandialog .e-save, @{e-widget}.e-kanban .e-externalform .e-save{
    & when (@skin= "office-365"){
        background-color: @theme-primary;
		color: @theme-primary-font;
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-icon.e-searchfind:before{
    & when (@skin= "office-365"){
        color: @header-font-color;
    }
}

@{e-widget}.e-kanban-context .e-checkbox .e-checkmark {
    color: @active-bg-stcolor !important;
}
@{e-widget}.e-kanban .e-kanbantoolbar .e-searchdiv{
   & when (@skin= "material") {
        /*material*/
        background: @grey-50;
   }
   & when not (@skin= "material") {
        /*other*/
        background: @content-bg-color;
   }
}
@{e-widget}.e-kanban .e-kanbantoolbar .e-searchdiv .e-ejinputtext,@{e-widget}.e-kanban .e-kanbantoolbar .e-toolbaricons.e-searchitem,@{e-widget}.e-kanban .e-kanbantoolbar .e-toolbaricons.e-searchitem:hover{
    & when (@skin= "material") {
        /*material*/
        background: @grey-50;
   }
} 
@{e-widget}.e-kanban .e-adaptive-search .e-searchdiv .e-ejinputtext{
    & when (@skin= "material") {
        /*material*/
        background: @content-bg-color;
   }
} 
@{e-widget}.e-kanban .e-search.e-tooltxt:hover .e-searchdiv{
  background: @content-bg-color;
}
@{e-widget}.e-kanban .e-kanbanheader.e-slheader .e-headercell, @{e-widget}.e-kanban.e-swimlane-responsive .e-columnrow .e-rowcell {
    & when (@skin = "office-365"){
        border-bottom: 2px solid @header-border-color;
    }
    & when not (@skin = "office-365"){
        border-bottom: 4px solid @default-bg-stcolor;
    }
}

@{e-widget}.e-kanban .e-stackedHeaderRow th {
    border-bottom: 2px @border-type @active-bg-stcolor !important;
}

@{e-widget}.e-kanban .e-kanbanheader.e-slheader .e-headercell.e-exceed {
    border-bottom-color: @kanban-cell-exceed;
}

@{e-widget}.e-kanban .e-kanbanheader.e-slheader .e-headercell.e-deceed {
    border-bottom-color: @kanban-cell-deceed;
}

@{e-widget}.e-kanban .e-columnrow .e-kanbancard {
    background: @content-bg-color;
	box-shadow:@kanban-card-shadow;
	& when (@skin= "office-365"){
	    /*office-365*/
        color: @neutral-light-font;
    } 
}

@{e-widget}.e-kanban .e-kanbancard {
    border-color: @kanban-card-border;
    color: @content-font-color;
}

@{e-widget}.e-kanban .e-kanbancard .e-tag {
	& when (@skin= "office-365"){
	    /*office-365*/
        background: @active-bg-stcolor;
        color: @active-font-color;
    } 
    & when not (@skin="office-365"){
	    /*others*/
        background: @default-bg-stcolor;
        color: lighten(@content-font-color, 22%);
    }
}

@{e-widget}.e-kanban .e-kanbancard.e-cardselection {
   & when (@skin= "material") {
      /*material*/
      background-color: @grey-100;
      border-color: @grey-300;
	  color: @active-font-color;
    }
	& when (@skin="office-365"){
	   /*office-365*/
       background-color: @theme-lighter;
       border-color: @content-border-color;
       color: @theme-light-font;
   }
	& when not (@skin= "material") and not (@skin= "office-365"){
      /*other*/
      .active-gradient();
      border-color: @active-border-color;
	  color: @active-font-color;
   }
    
}

@{e-widget}.e-kanban .e-stackedHeaderCell{
    & when (@skin= "office-365"){
	    /*office-365*/
        color: @neutral-light-font;
    }
}

@{e-widget}.e-kanban .e-draggedcard, @{e-widget}.e-kanban .e-kanbancard.e-cardselection.dragClone {
    & when (@skin= "material") {
        /*material*/
         background:@grey-50;
    }
	& when (@skin= "office-365"){
	    /*office-365*/
        background: @default-bg-stcolor;
    }
	& when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
        background: @content-bg-color;
    }
    color: @content-font-color;
}

@{e-widget}.e-kanban .e-draggedcard .e-dragmultiple {
  & when (@skin= "material") {
        /*material*/
       color: @accent-color;
      }
	  & when not (@skin= "material") {
        /*other*/
      color: @active-bg-stcolor;
     }
      border: 1px solid @content-border-color;
}

@{e-widget}.e-kanban .e-kanbancontent .e-rowcell .e-targetclone {
	  & when (@skin= "material") {
          /*material*/
          border: 1px dashed @accent-color;
          background:fade(@accent-color,26%);
      }
	  & when (@skin="office-365"){
	      /*office-365*/
          border: 1px dashed @content-border-color;
          background: @alert-bg-color;
      }
	  & when not (@skin= "material") and not (@skin= "office-365") {
          /*other*/
          border: 1px dashed @active-bg-stcolor;
         .kanban-dragclone-bg();
     }
}
@{e-widget}.e-kanban .e-kanbancontent .e-rowcell .e-targetclonemulti .e-columnkey{
 border-left: 1px dashed;
 border-right: 1px dashed;
 border-bottom: 1px dashed;
 }
@{e-widget}.e-kanban .e-kanbancontent .e-rowcell .e-targetclonemulti .e-columnkey{
      border-color: @default-border-color;
}
@{e-widget}.e-kanban .e-kanbancontent .e-rowcell .e-targetclonemulti .e-columnkey.e-active{
    .kanban-dragclone-bg();
}
@{e-widget}.e-kanban .e-kanbancontent .e-rowcell .e-targetclonemulti .e-columnkey.e-active{
     border-color:@active-bg-stcolor;
}
@{e-widget}.e-kanban .e-kanbancontent .e-rowcell .e-targetclonemulti .e-columnkey.e-multiclonestyle{
    border-bottom-color:@active-bg-stcolor;
}
 @{e-widget}.e-kanban .e-kanbancontent .e-rowcell .e-targetclonemulti .e-columnkey:first-child {
 border-top-width: 1px;
 border-top-style: dashed;
 }
 
@{e-widget}.e-kanban .e-kanbancontent .e-rowcell .e-targetdragclone {
    & when (@skin= "material") {
        /*material*/
	   background:@grey-100;
      }
	  & when not (@skin= "material") {
        /*other*/
       .kanban-targetdrag-font();
     }
    border: 1px dashed @content-border-color;
}

@{e-widget}.e-kanban .e-form-titlebar {
    & when (@skin= "material") {
        /*material*/
        border-bottom: none;
      }
    & when (@skin="office-365"){
        /*office-365*/
        border-bottom: none;
    }
	& when not (@skin= "material") and not (@skin= "office-365") {
        /*other*/
       border-bottom: 1px solid @content-border-color;
     }
}

@{e-widget}.e-kanban .e-form-container {
    border-color: @content-border-color !important;
	background-color: @content-bg-color;
    & when (@skin= "office-365"){
        /*office-365*/
        border: 1px solid @hover-bg-stcolor !important;
    }
}

@{e-widget}.e-kanban .e-form-title{
    & when (@skin= "office-365"){
        /*office-365*/
        color: @neutral-light-font;
    }
}

@{e-widget}.e-kanban .e-columnrow .e-rowcell {
	& when (@skin= "material") {
        /*material*/
	   background:@grey-50;
       border-bottom: 1px solid @grey-300;
       border-top: 1px solid @grey-300;
      }
     & when (@skin= "office-365"){
          /*office-365*/
         background: @neutral-lighter-alt;
		 border-bottom: 1px solid @kanban-cell-border;
         border-top: 1px solid @kanban-cell-border;
     }
	  & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
       border-bottom: 1px solid @kanban-cell-border;
       border-top: 1px solid @kanban-cell-border;
       .kanban-cell-bg();
     }
}

@{e-widget}.e-kanban .e-printlist {
    .kanban-cell-bg();
}

@{e-widget}.e-kanban .e-collapsedrow .e-rowcell, @{e-widget}.e-kanban .e-frozenrow .e-rowcell {
    border-bottom: 1px solid @default-bg-stcolor;
}

@{e-widget}.e-kanban .e-kanbancontent .e-rowcell.e-shrink, @{e-widget}.e-kanban .e-kanbanheader .e-headercell.e-shrinkcol {
     & when (@skin="office-365"){
        /*office-365*/
        background-color: @neutral-lighter-alt;
    }
	& when not (@skin= "office-365"){
         /*others*/
	    .kanban-skheader-bg();
	}
}

@{e-widget}.e-kanban .e-dialog .e-titlebar .e-title{
	 & when (@skin="office-365"){
        /*office-365*/
        color: @neutral-light-font;
     }
}

@{e-widget}.e-kanban .e-kanbancard {
    color: @content-font-color;
}

@{e-widget}.e-kanban .e-swimlanerow .e-slkey {	
    & when (@skin= "material") {
         /*material*/
     color: fade(@base-font-color,87%);
    }
    & when (@skin="office-365"){
        /*office-365*/
        color: @default-icon-color;
    }  
	& when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        color: @content-font-color;
    }
}

@{e-widget}.e-kanban  .e-columnrow .e-rowcell .e-toggle-header:hover > div  {
    color: @kanban-toggle-hover-ftcolor;
}

@{e-widget}.e-kanban .e-toggle-header:hover > div div {
    color: @kanban-toggle-hover-ftcolor !important;
}

@{e-widget}.e-kanban  .e-columnrow .e-rowcell .e-toggle-header > div {
    .kanban-toggle-content-ftcolor();
}

@{e-widget}.e-kanban .e-columnrow .e-rowcell .e-toggle-header > div div {
    .kanban-toggle-icon-ftcolor();
}

@{e-widget}.e-kanbanfilter-window .e-filter-scrollcontent, @{e-widget}.e-kbnfilterwindow-head {
    color: @content-font-color;
}

@{e-widget}.e-kanban .e-slexpand, @{e-widget}.e-kanban .e-slcollapse {
    & when (@skin="office-365"){
        /*office-365*/
        color: @header-font-color;
    }
    & when not (@skin = "office-365"){
        /*other*/
       color: @default-icon-color;
    }
}

@{e-widget}.e-kanban .e-slexpand:hover, @{e-widget}.e-kanban .e-slcollapse:hover {
	& when not (@skin= "material") {
        /*other*/
      .hover-gradient();
    }
    color: @hover-icon-color;
}

@{e-widget}.e-kanban .e-clcollapse::before, @{e-widget}.e-kanban .e-clexpand::before {
	  & when (@skin= "material") {
          /*material*/
          color: fade(@base-font-color,87%);
      }
      & when (@skin= "office-365"){
          /*office-365*/
          color: @header-font-color;
      }
	  & when not (@skin= "material") and not (@skin="office-365") {
          /*other*/
          color: @default-icon-color;
      }
}

@{e-widget}.e-kanban .e-kanbancard.e-hover .e-cardcollapse:before, @{e-widget}.e-kanban .e-kanbancard.e-hover .e-cardexpand:before {
    color: @hover-icon-color;
}

@{e-widget}.e-kanban .e-kanbancard.e-cardselection .e-cardcollapse:before, @{e-widget}.e-kanban .e-kanbancard.e-cardselection .e-cardexpand:before {
      & when (@skin= "material") {
        /*material*/
       color: @base-font-color;
      }
      & when (@skin= "office-365"){
          /*office-365*/
         color: @header-font-color;
      }
	  & when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
       color: @active-icon-color;
     }
}

@{e-widget}.e-kanban .e-kanbancard.e-cardselection.e-hover .e-cardcollapse:before, @{e-widget}.e-kanban .e-kanbancard.e-cardselection.e-hover .e-cardexpand:before {
     & when (@skin= "office-365"){
         /*office-365*/
        color: @header-font-color; 
    }
    & when not (@skin= "office-365"){
          /*other*/
         color: @hover-icon-color;
    }
}

@{e-widget}.e-kanban .e-swimlanerow .e-slcount {
    & when (@skin= "office-365"){
        /*office-365*/
        color: @default-icon-color; 
    }
    & when not (@skin= "office-365"){
        /*other*/
        color: lighten(@content-font-color, 40%);
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-search .e-ejinputtext:focus{
    & when (@skin= "office-365"){
        /*office-365*/
        color: @neutral-light-font; 
    }
}

@{e-widget}.e-kanban .e-kanbanheader .e-columnheader .e-shrinkcol:hover{
     & when (@skin= "office-365"){
         /*office-365*/
         background-color: @hover-bg-stcolor;
    }
}

@{e-widget}.e-kanban .e-kanbancontent .e-rowcell.e-shrink:hover{
     & when (@skin= "office-365"){
       /*office-365*/
       background-color: @hover-bg-stcolor;
    }
}

@{e-widget}.e-kanban .e-kanbancontent .e-rowcell .e-shrinkcount { 
  & when (@skin= "material") {
        /*material*/
    color: @accent-color;
   }
   & when not (@skin= "material") {
        /*other*/
    color: @active-bg-stcolor;
   }
}

@{e-widget}.e-kanban .e-collapserow .e-rowcell {
    border: none;
}

@{e-widget}.e-kanban .e-kanbancard.e-hover {
     & when (@skin= "material") {
         /*material*/
         background-color: @grey-200;
         border-color: @hover-border-color;
		 color: @hover-font-color;
     }
     & when (@skin= "office-365"){
         /*office-365*/
         background-color: @default-bg-stcolor;
         border-color: @content-border-color;
		 color: @neutral-light-font;
     }
   	& when not (@skin= "material") and not (@skin="office-365") {
        /*other*/
        .hover-gradient();
         border-color: @hover-border-color;
		 color: @hover-font-color;
    }
}

@{e-widget}.e-kanban .e-headercontent {
    border-right-color: @content-border-color;
}

@{e-widget}.e-kanban .e-kanbanheader .e-headercelldiv {
    & when (@skin= "material") {
      /*material*/
     color: fade(@base-font-color,87%);
    }
     & when (@skin= "office-365"){
         /*office-365*/
        color: @neutral-light-font;
    }
	& when not (@skin= "material") and not (@skin= "office-365"){
      /*other*/
    .kanban-header-font();
   }
}

@{e-widget}.e-kanban .e-kanbanheader {
    .kanban-header-font();
}

@{e-widget}.e-kanban .e-kanbancontent {
    background-color: @content-bg-color;
}

@{e-widget}.e-kanban .e-kanbancontent .e-rowcell {
    border-color: @content-border-color;
}

@{e-widget}.e-kanban .e-cardcollapse:before, @{e-widget}.e-kanban .e-cardexpand:before, @{e-widget}.e-kanban .e-kanbancard.e-cardselection.dragClone .e-cardexpand:before, @{e-widget}.e-kanban .e-kanbancard.e-cardselection.dragClone .e-cardcollapse:before {
    & when (@skin= "office-365"){
        /*office-365*/
        color: @header-font-color;
    }
    & when not (@skin= "office-365"){
        /*other*/
        color: @default-icon-color;
    }
}

@{e-widget}.e-kanban .e-kanbancard .e-card_image {
    background: @default-bg-stcolor;
    border-color: @content-border-color;
}
@{e-widget}.e-kanban .e-kanbantoolbar.e-toolbar,@{e-widget}.e-kbntoolbar-body.e-toolbar{
     & when (@skin= "material") {
        /*material*/
        background: @grey-50;
      }
	  & when not (@skin= "material") {
        /*other*/
        background: @content-bg-color;
     }
    border-color: @kanban-toolbar-border;
    filter: none;
}

@{e-widget}.e-kanban .e-kanbantoolbar li {
    & when (@skin= "office-365"){
       /*office-365*/
       border:  @border-size @border-type @default-bg-stcolor;
    }
    & when not (@skin= "office-365"){
        /*other*/
       border: @border-size @border-type @default-border-color;
    }
}
@{e-widget}.e-kanban .e-kanbantoolbar li.e-tooltxt.e-kbnfilter-tbtn.e-hover{
   & when (@skin= "material") {
        /*material*/
        background:  @grey-50;
   }
}
@{e-widget}.e-kanban .e-kanbantoolbar li.e-select{
	  & when not (@skin= "material") {
        /*other*/
       .active-gradient();
     }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-tooltxt.e-hover{
    & when (@skin= "office-365"){
        /*office-365*/
        background: @hover-bg-stcolor;
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-tooltxt.e-hover .e-text{
    & when (@skin= "office-365"){
        /*office-365*/
        color: @neutral-light-font-alt;
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar li.e-tooltxt.e-kbnfilter-tbtn.e-select,@{e-widget}.e-kanban .e-kanbantoolbar li.e-tooltxt.e-kbnfilter-tbtn.e-active,@{e-widget}.e-kanban .e-kanbantoolbar li.e-tooltxt.e-select.e-kbnfilter-tbtn.e-hover,@{e-widget}.e-kanban.e-js .e-kanbantoolbar li.e-tooltxt.e-kbnfilter-tbtn.e-active a {
     & when (@skin= "material") {
        /*material*/
        background: @accent-color;
      }
}

@{e-widget}.e-kanban .e-kanbantoolbar li.e-tooltxt{
    & when (@skin="office-365"){
        /*office-365*/
        background: @default-bg-stcolor;
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-select a.e-toolbartext.e-text{
    color: @active-font-color;
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-active a.e-toolbartext.e-text,@{e-widget}.e-kanban .e-kanbantoolbar .e-select.e-hover a.e-toolbartext.e-text{
     & when (@skin= "material") {
        /*material*/
     color: @active-font-color;
	}
}
@{e-widget}.e-kanban .e-kanbantoolbar .e-select.e-hover a.e-toolbartext.e-text {
    color: @content-font-color;
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-text, @{e-widget}.e-kanban .e-kanbantoolbar .e-quickfilter .e-text,@{e-widget}.e-kbntoolbar-body .e-text,@{e-widget}.e-kbntoolbar-body .e-quickfilter .e-text {
    & when (@skin="office-365"){
        /*office-365*/
        color: @neutral-light-font;
    }
    & when not (@skin="office-365"){
        /*other*/
       color: @content-font-color;
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-select.e-hover {
    .hover-gradient();
    & when (@skin= "office-365"){
        /*office-365*/
        border-color: @hover-bg-stcolor;
    }
    & when not (@skin= "office-365"){
        /*other*/
       border-color: @hover-border-color;
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-tooltxt.e-select{
     & when (@skin= "office-365"){
         /*office-365*/
         background: @active-bg-stcolor;
         border-color: @active-bg-stcolor;
     }
 }
 
@{e-widget}.e-kanban .e-kanbantoolbar .e-select a.e-toolbartext.e-text, @{e-widget}.e-kanban .e-kanbantoolbar .e-select.e-hover a.e-toolbartext.e-text{
    & when (@skin= "office-365"){
        /*office-365*/
        color: @theme-primary-font;
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-tooltxt.e-select.e-hover{
    & when (@skin= "office-365"){
        /*office-365*/
        background: @theme-primary;
        border-color: @theme-primary;
    }
}

@{e-widget}.e-kanban .e-columnrow .e-rowcell.e-dropping {
    border-color: @default-border-color;
}

@{e-widget}.e-kanban .e-kanbancontent .e-rowcell.e-exceed {
    background: @kanban-cell-exceed;
    filter: none !important;
}

@{e-widget}.e-kanban .e-kanbancontent .e-rowcell.e-deceed {
    background: @kanban-cell-deceed;
}

@{e-widget}.e-kanban .e-kanbantooltip {
   & when (@skin= "material"){
        /*office-365*/
        background: @grey-700;
        color: #ffffff;
    }
	& when not (@skin= "material"){
        /*office-365*/
        background: @content-bg-color;
        color: @content-font-color;
    }
    border: @border-size @border-type @content-border-color;
    box-shadow: 9px 9px 15px -9px rgba(0,0,0,0.3);
    -moz-box-shadow: 9px 9px 15px -9px rgba(0,0,0,0.3);
    -webkit-box-shadow: 9px 9px 15px -9px rgba(0,0,0,0.3);
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-toolbaricons.e-searchfind, @{e-widget}.e-kanban .e-kanbantoolbar .e-toolbaricons.e-cancel {
	& when (@skin="office-365"){
	      /*office-365*/
        border-left: 0px;
        background-color: @content-bg-color;
    }
    & when not (@skin= "office-365"){
	      /*other*/
       .kanban-cell-bg();
        border-left: 1px solid @default-border-color;
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar li.e-search.e-tooltxt{
    & when (@skin="office-365"){
        border-color: @content-border-color;
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar li.e-search.e-tooltxt:hover{
    & when (@skin="office-365"){
        border-color: @neutral-secondary-alt;
    }
}
@{e-widget}.e-kanban .e-kanbandialog .e-save:hover, @{e-widget}.e-kanban .e-externalform .e-save:hover{
    & when (@skin="office-365"){
        background-color: @theme-dark;
		color: @theme-dark-font;
    }
}
@{e-widget}.e-kanban .e-kanbandialog .e-save:focus, @{e-widget}.e-kanban .e-externalform .e-save:focus{
    & when (@skin="office-365"){
     }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-search.e-hover .e-searchfind{
    & when (@skin="office-365"){
        background-color: @neutral-light;
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-highliht-kbnsearchbar .e-search.e-tooltxt{
    & when (@skin="office-365"){
        border-color: @theme-primary;
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-highliht-kbnsearchbar .e-search.e-tooltxt .e-cancel{
   & when (@skin="office-365"){
        background: @theme-primary;
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-highliht-kbnsearchbar .e-search.e-tooltxt .e-cancel:before{
   & when (@skin="office-365"){
        color: @theme-primary-font;
    }
}

@{e-widget}.e-kanban .e-kanbantoolbar .e-search.e-hover .e-searchfind:before{
    & when (@skin="office-365"){
        color: @neutral-light-font-alt;
    }
}

@{e-widget}.e-kanban div.e-error .e-toparrow {
    border-bottom-color: #fffe92;
}

@{e-widget}.e-kanban div.e-field-validation-error {
    background-color: #FFFE91;
    color: #CD0A0A;
}

@{e-widget}.e-kanban .e-kanbantouchbar .e-content {
    background-color: @content-bg-color;
    border-color: @content-border-color;
}

@{e-widget}.e-kanban .e-kanbantouchbar span:hover,
@{e-widget}.e-kanban .e-kanbantouchbar .e-spanclicked {
    border-color: @default-icon-color;
}

@{e-widget}.e-kanban .e-kanbantouchbar .e-downtail:before,
@{e-widget}.e-kanban .e-kanbantouchbar .e-downtail {
    border-top-color: @content-border-color;
}

@{e-widget}.e-kanban .e-kanbantouchbar .e-downtail:after {
    border-top-color: @content-bg-color;
}

@{e-widget}.e-kanban .e-freezeswimlanerow .e-rowcell.e-shrink {
    background: @content-bg-color;
}

@{e-widget}.e-kanban.e-rtl .e-toolbaricons.e-searchfind, @{e-widget}.e-kanban.e-rtl .e-toolbaricons.e-cancel {
    border-right: 1px solid @default-border-color;
	border-left: 0px;
}

@{e-widget}.e-kanban.e-rtl td:first-child, @{e-widget}.e-kanban.e-rtl th:first-child,
@{e-widget}.e-kanban.e-rtl .e-headercontent, @{e-widget}.e-kanban.e-rtl .e-columnrow td.e-dropping:first-child, @{e-widget}.e-kanban .e-kanbancontent .e-rowcell.e-dragged {
    border-left-color: @content-border-color !important;
}

@{e-widget}.e-kanban.e-rtl .e-kanbancard {
    border-color: @content-border-color;
}

@{e-widget}.e-kanban .e-customaddbutton,.e-kanban .e-columnadd { 
   & when (@skin= "material") {
        /*material*/
      color: @accent-color;
      }
	  & when not (@skin= "material") {
        /*other*/
      color: @active-bg-stcolor;
     }
}

@{e-widget}.e-kanban .e-customtoolbarseparator {
    & when (@skin= "office-365") {
        /*office-365*/
       border-right: 0px;
      }
	  & when not (@skin= "office-365") {
        /*other*/
       border-right: 1px solid @default-border-color;
     }
}

@{e-widget}.e-kanban.e-responsive .e-kanbantoolbar.e-toolbar,@{e-widget}.e-kbntoolbar-body.e-toolbar{
    .default-gradient();
}

@{e-widget}.e-kanban.e-responsive .e-kanbantoolbar:not(.e-adaptive-search) .e-searchfind {
    background: transparent;
}

@{e-widget}.e-kanbanfilter-window {
	  & when (@skin= "material") {
        /*material*/
       border: 1px solid @grey-300;
      }
	  & when not (@skin= "material") {
        /*other*/
       border: 1px solid @header-border-color;
     }
    background: @content-bg-color;
}

@{e-widget}.e-kanbanfilter-window .e-kbnfilterwindow-head {
     & when (@skin= "material") {
        /*material*/
       background: @grey-100;
       border-bottom: 1px solid @grey-300;
      }
	  & when not (@skin= "material") {
        /*other*/
       background: @header-bg-stcolor;
       border-bottom: 1px solid @header-border-color;
     }
}

@{e-widget}.e-kanbanfilter-window .e-filter-content,@{e-widget}.e-swimlane-window, @{e-widget}.e-kanban .e-adapt-search, @{e-widget}.e-kanban.e-responsive .e-adapt-cancel {
    background: @content-bg-color;
}

@{e-widget}.e-swimlane-window .e-swimlane-item:hover {
    .hover-gradient();
	 & when (@skin= "material") {
        /*material*/
      color: fade(@base-font-color,87%);
     }
	 & when not (@skin= "material") {
        /*other*/
      color: @active-font-color;
     }
}
@{e-widget}.e-swimlane-window .e-swimlane-item {
	 & when (@skin= "material") {
        /*material*/
      color: fade(@base-font-color,87%);
     }
}
.e-swimlane-window .e-swimlane-item.e-selected-item{
	 & when (@skin= "material") {
        /*material*/
      color: @accent-color;
      background: transparent;
     }
}
@{e-widget}.e-kanban.e-responsive .e-kanbantoolbar .e-kanbanfilter-icon:hover {
    .hover-gradient();
    color: @hover-font-color;
}

@{e-widget}.e-kanban.e-responsive .e-kanbantoolbar:not(.e-adaptive-search) .e-searchitem:hover {
    .hover-gradient();
}

@{e-widget}.e-kanbanfilter-window .e-filter-done:hover {
     & when (@skin= "material") {
        /*material*/
       color: @grey-500;
      }
	  & when not (@skin= "material") {
        /*other*/
       color: @kanban-filter-done-stcolor;
     }
}

@{e-widget}.e-kanbanfilter-window .e-filter-done {
     & when (@skin= "material") {
        /*material*/
       color: @accent-color;
      }
	  & when not (@skin= "material") {
        /*other*/
      color: @active-bg-stcolor;
     }
}

@{e-widget}.e-swimlane-window {
    background: @content-bg-color;
}

@{e-widget}.e-kanban.e-responsive .e-kanbantoolbar .e-searchitem:hover {
    .hover-gradient();
}

@{e-widget}.e-swimlane-ul li:not(:last-child) div:after {
    background: @content-border-color;
}

@{e-widget}.e-swimlane-arrow:hover, @{e-widget}.e-kanbanfilter-window .e-filterback-icon:hover,@{e-widget}.e-kanban.e-responsive .e-adapt-cancel:hover {
    & when (@skin= "material") {
        /*material*/
      color: @accent-color;
      }
	  & when not (@skin= "material") {
        /*other*/
      color: @active-bg-stcolor;
     }
}

@{e-widget}.e-kanban .e-kanbanheader .e-headercell .e-totalcard, @{e-widget}.e-kanban .e-kanbanheader .e-headercell .e-totalcount, @{e-widget}.e-kanban .e-minlimit, @{e-widget}.e-kanban .e-maxlimit,@{e-widget}.e-kanban .e-limits, @{e-widget}.e-kanban .e-kanbancontent .e-rowcell .e-shrinklabel  {
      & when (@skin= "material") {
        /*material*/
       color: fade(@base-font-color,64%);
      }
	  & when (@skin= "office-365"){
          /*office-365*/
          color: @header-icon-color;
      }
	  & when not (@skin= "material") and not (@skin= "office-365"){
        /*other*/
	     color: lighten(@content-font-color, 40%);
     }
}

@{e-widget}.e-kanban .e-kanbancard .e-bottom-triangle {
    & when (@skin= "material") {
        /*material*/
       border-bottom-color: @header-bg-endcolor;
      }
	  & when not (@skin= "material") {
        /*other*/
      border-bottom-color: @active-bg-stcolor;
     }
}
@{e-widget}.e-kanban.e-responsive .e-vhandlespace,@{e-widget}.e-kanbanfilter-window .e-vhandlespace,@{e-widget}.e-kbnslwindow-body .e-vhandlespace,@{e-widget}.e-kbnadapt-editdlg .e-vhandlespace{
    border-color: @content-border-color;
}
@{e-widget}.e-kanban.e-js .e-numeric.e-widget .e-in-wrap,@{e-widget}.e-kbnadapt-editdlg .e-numeric.e-widget .e-in-wrap,@{e-widget}.e-kanban.e-js .e-ddl.e-widget .e-in-wrap, @{e-widget}.e-kbnadapt-editdlg .e-ddl.e-widget .e-in-wrap{
    & when (@skin= "material") {
        /*material*/
     border-color:@grey-400;
      }
}
@{e-widget}.e-kanban .e-ejinputtext,@{e-widget}.e-kbnadapt-editdlg .e-ejinputtext{
    & when (@skin= "material") {
        /*material*/
     border-color:@grey-400;
      }
	  & when not (@skin= "material") {
        /*other*/
     border-color:@content-border-color;
     }
  background-color: @content-bg-color;
  color: @content-font-color;
}
@{e-widget}.e-kanban .e-kanbancard .e-primarykey,@{e-widget}.e-kanban.e-swimlane-responsive.e-js .e-limits .e-swimlane-name,@{e-widget}.e-swimlane-ddl .e-swimlane-text {
  & when (@skin= "material") {
     /*material*/
     color: fade(@base-font-color,87%);
   } 
}
@{e-widget}.e-kanban .e-kanbancard .e-primarykey{
    & when (@skin= "office-365") {
        /*office-365*/
        color: @neutral-light-font;
    } 
}

@{e-widget}.e-kanban .e-kanbancard .e-text {
  & when (@skin= "material") {
     /*material*/
     color: fade(@base-font-color,64%);
   } 
   & when (@skin= "office-365") {
     /*office-365*/
     color: @theme-light-font;
   } 
}
@{e-widget}.e-kanban .e-externalformedit div>label,@{e-widget}.e-kanban .e-kanbandialog .kanbanform label{
  & when (@skin= "material") {
      /*material*/
     color: fade(@base-font-color,38%);
  } 
   & when (@skin= "office-365"){
       /*office-365*/
      color: @neutral-light-font;
   }
}
@{e-widget}.e-kanban .e-ejinputtext,@{e-widget}.e-kbnadapt-editdlg .e-ejinputtext{
  & when (@skin= "material") {
      /*material*/
     color: fade(@base-font-color,87%);
  } 
}
@{e-widget}.e-kanban .e-totalcard,@{e-widget}.e-kanban .e-limits{
   & when (@skin= "material") {
      /*material*/
     color: fade(@base-font-color,64%);
  } 
}
@{e-widget}.e-kanban .e-kanbantoolbar .e-kbnfilter-tbtn a.e-toolbartext.e-text{
   & when (@skin= "material") {
      /*material*/
     color: @accent-color;
  } 
}
@{e-widget}.e-kanban.e-js .e-kanbantoolbar .e-kbnfilter-tbtn.e-select a.e-toolbartext.e-text{
   & when (@skin= "material") {
      /*material*/
     color: @active-font-color;
  } 
}
@{e-widget}.e-kanban .e-dialog .e-titlebar{
   & when (@skin= "material") {
      /*material*/
     background: @content-bg-color;
     color: @base-font-color;
     box-shadow: none;
  } 
}
@{e-widget}.e-kanban .e-dialog .e-titlebar .e-icon.e-close:hover:before,@{e-widget}.e-kanban .e-dialog .e-titlebar .e-icon.e-close:before{
   & when (@skin= "material") {
      /*material*/
     color: @base-font-color;
  } 
}
@{e-widget}.e-kanban .e-kanbantoolbar .e-searchbar.e-ul,@{e-widget}.e-kanban .e-adaptive-search .e-search.e-tooltxt{
   & when (@skin= "material") {
      /*material*/
	  border-bottom: 2px solid @grey-500;
  } 
}
@{e-widget}.e-kanban.e-responsive .e-kanbantoolbar .e-searchbar.e-ul{
   & when (@skin= "material") {
    border-bottom:none !important;
  }
}
@{e-widget}.e-kanban .e-kanbantoolbar .e-highliht-kbnsearchbar {
   & when (@skin= "material") {
      /*material*/
	  border-bottom-color: @accent-color !important;
  } 
}
@{e-widget}.e-kanban .e-toolbar.e-js ul>li.e-tooltxt.e-search.e-active{
   & when (@skin= "material") {
      /*material*/
	  background: @grey-50;
  } 
}
@{e-widget}.e-kanban .e-toolbar.e-js ul>li.e-tooltxt.e-search.e-active a:before{
   & when (@skin= "material") {
      /*material*/
    color: @default-icon-color !important;
  } 
}
@{e-widget}.e-kanban .e-ejinputtext:focus,@{e-widget}.e-kbnadapt-editdlg .e-ejinputtext:focus{
   & when (@skin= "material") {
      /*material*/
	  border-color: @accent-color;
	  border-bottom-width: 2px;
  } 
}
@{e-widget}.e-kanban .e-kanbandialog .e-kanban-editdiv .e-save, @{e-widget}.e-kanban .e-kanbandialog .e-kanban-editdiv .e-cancel, @{e-widget}.e-kanban .e-externalform .e-save, @{e-widget}.e-kanban .e-externalform .e-cancel,@{e-widget}.e-kbnadapt-editdlg .e-save,.e-kbnadapt-editdlg .e-cancel,@{e-widget}.e-kanbanfilter-window .e-clearfilter{
   & when (@skin= "material") {
      /*material*/
    background: @content-bg-color;
    color: @accent-color;
    box-shadow: none !important;
  } 
}
@{e-widget}.e-kanban.e-js .e-kanbandialog .e-save:hover, @{e-widget}.e-kanban.e-js .e-kanbandialog .e-cancel:hover, @{e-widget}.e-kanban.e-js .e-externalform .e-save:hover, @{e-widget}.e-kanban.e-js .e-externalform .e-cancel:hover, @{e-widget}.e-kbnadapt-editdlg .e-save:hover, @{e-widget}.e-kbnadapt-editdlg .e-cancel:hover, @{e-widget}.e-kanbanfilter-window .e-clearfilter:hover{
   & when (@skin= "material") {
      /*material*/
	  background: fade(@base-font-color,12%);
	  color:@base-font-color;
  } 
}
 @{e-widget}.e-kanbantoolbar .e-customtoolbar li.e-hover.e-active .e-icon:before{
   & when (@skin= "material") {
      /*material*/
    color: @grey-600;
	}
}
@{e-widget}.e-kanban .e-kanbantoolbar .e-quickfilter.e-tooltxt{
	background:transparent;
}
@{e-widget}.e-kanban .e-kanbantoolbar .e-search.e-hover{
  & when (@skin= "material") {
    /*material*/
	background:transparent !important;
  }
}
@{e-widget}.e-kanban .e-cardcollapse:after,@{e-widget}.e-kanban .e-cardexpand:after,@{e-widget}.e-kanban .e-slcollapse:after,@{e-widget}.e-kanban .e-slexpand:after{
  & when (@skin= "material") {
     /*material*/
     background: @base-font-color;
     background: fade(@base-font-color,12%);
 }
}
 @{e-widget}.e-kanban.e-js .e-kanbantoolbar .e-searchbar.e-highliht-kbnsearchbar .e-searchdiv .e-ejinputtext{
      & when (@skin= "material") {
    color: @base-font-color;
	}
 }
@{e-widget}.e-kanban.e-js.e-kanbanscroll .e-kanbantoolbar.e-toolbarspan{
      & when (@skin= "material") {
	    border-bottom: 1px solid @grey-300;
	}
 }

@{e-js}.e-spreadsheet {
    color: @sscontent-color;
    border-color: @sscontent-border-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-headercell,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-headercontent,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowheader {
    border-color: @ssheader-border-color;
    color: @ssheader-content-color;
}
    @{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-headercell,
    @{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-headercontent,
    @{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowheader {
        & when (@skin= "material") {
            color: @material-ssheader-content-color;
        }
    }
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-headercell:hover,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowheader:hover {
    background-color: @ssheader-select-bgcolor;
    border-color:@ssheader-hover-bordercolor;
	color: @ssheader-content-color;
     & when (@skin= "office-365") {
            background-color: @ssheader-hover-bgcolor;
            color: @ssheader-hover-fontcolor;
        }
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowheadercontent {
    border-bottom-color: @ssheader-border-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-spreadsheetcontentcontainer {
    border-left-color: @ssheader-border-color;
	background-color: @content-bg-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-spreadsheetcolumnheader {
    border-color: @ssheader-border-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetheader {
    border-bottom-color: @ssheader-border-color;
    border-top-color: @ssheader-border-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-spreadsheetcolumnheader {
    border-right-color: @ssheader-border-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowcell {
    color: @content-font-color;
    background-color: @content-bg-color;
    border-color: @content-border-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-spreadsheetcolumnheader,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowheader,
@{e-js}.e-spreadsheet .e-scrollcss,
@{e-js}.e-spreadsheet .e-scrollrowcss {
    background-color: @ssheader-bgcolor;
}
@{e-widget}.e-ss-editinput .e-in-wrap, @{e-widget}.e-ss-editinput .e-input {
  color: inherit;
  font-size: 11pt;
  font-family: Calibri;
}
/*---------------------------Frozen Row------------------------*/
@{e-js}.e-spreadsheet .e-reSizeColbg {
    border-left-color: @ssheader-border-color;
}
@{e-js}.e-spreadsheet .e-reSizeAPbg {
    border-left-color: @ssheader-border-color;
}
@{e-js}.e-spreadsheet .e-reSizeRowbg {
    border-top-color: @ssheader-border-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-selected,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-ctrlselected {
    background: @ssheader-select-bgcolor;
	color:@sscontent-color;
     & when (@skin = "office-365") {
    background: @sscontent-selection-bgcolor;
  }
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-activecell {
    background-color: @content-bg-color;
	color:@sscontent-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowheader.e-rowhighlight, 
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-colhighlight {
    background-color: @ssheader-select-bgcolor;
    color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowhighlight {
    border-right-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-colhighlight {
    border-bottom-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-colhighlight:hover {
    background-color: @ssheader-select-bgcolor;
    border-bottom-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowhighlight:hover {
    background-color: @ssheader-select-bgcolor;
    border-right-color: @ssfroze-highlight-color;
}
@{e-widget}.e-menu-wrap .e-chartcell:hover, .e-chartimg:hover {
    background-color: @sshover-bg-color;
}
@{e-widget}.e-chartimg:hover {
   & when (@skin = "office-365") {
      border-color:@sscontent-selection-bgcolor;
      background-color:none;
  }
}
/*-------------------- Borders ------------------------ */
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-bborderright,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-bctrlborderright,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-bcborderright {
    border-right-color: @ssborder-bright;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-bborderbottom,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-bctrlborderbottom,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-bcborderbottom {
    border-bottom-color: @ssborder-bright;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-rborderright,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-rctrlborderright,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-rcborderright {
    border-right-color: #fc100c;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-rborderbottom,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-rctrlborderbottom,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-rcborderbottom {
    border-bottom-color: #fc100c;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-vborderright,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-vctrlborderright,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-vcborderright {
    border-right-color: #6a13ad;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-vborderbottom,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-vctrlborderbottom,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-vcborderbottom {
    border-bottom-color: #6a13ad;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-gborderright,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-gctrlborderright {
    border-right-color: #62c435 !important;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-gborderbottom,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-gctrlborderbottom {
    border-bottom-color: #62c435;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-pborderright,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-pctrlborderright {
    border-right-color: #f411b0;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-pborderbottom,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-pctrlborderbottom {
    border-bottom-color: #f411b0;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-oborderright,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-octrlborderright {
    border-right-color: #e59604;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-oborderbottom,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-octrlborderbottom {
    border-bottom-color: #e59604;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-thinborderright {
    border-right-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-thinborderbottom {
    border-bottom-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet .e-ss-numeric .e-select .e-spin {
    background-color: @sscontent-active-color;
    color: @ssnumeric-icon-color;
}

@{e-js}.e-spreadsheet .e-ss-numeric .e-select .e-spin:hover {
    background-color: @sscomments-focused-border;
    border-color: @sscomments-excel-border;
    color:@sscontent-active-color;
}

@{e-js}.e-spreadsheet .e-ss-numeric .e-select {
    border-color: @sscontent-active-color;
}

@{e-js}.e-spreadsheet .e-ss-numeric .e-select:hover {
    border-color: @sscomments-excel-border;
}
/*--------------------- Selection -------------------------- */
@{e-js}.e-spreadsheet div.e-selecttop {
    border-top-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet div.e-selectbottom {
    border-bottom-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet div.e-selectright {
    border-right-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet div.e-selectleft {
    border-left-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet .e-ss-selectall {
    color: @ssselectall;
}
@{e-js}.e-spreadsheet .e-ss-selectall:hover {
    color: @ssselectallhover;
}
@{e-js}.e-spreadsheet .e-sheetselected, .e-spreadsheet .e-sheetselected:hover {
    color: @ssselectselected;
}
/*--------------------- Auto Fill -------------------------------*/
@{e-js}.e-spreadsheet .e-autofill {
    border-color: @content-bg-color;
    background-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet div.e-autofillright {
    border-right-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet div.e-autofillbottom {
    border-bottom-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet div.e-autofilltop {
    border-top-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet div.e-autofillleft {
    border-left-color: @ssfroze-highlight-color;
}
/*--------------------- Cut and Copy ------------------------ */
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-cutright {
    border-right-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel td.e-cutbottom {
    border-bottom-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet .e-blur {
    background-color: @sscopy-blur-bgcolor;
}
@{e-js}.e-spreadsheet .e-spanfilter, @{e-js}.e-spreadsheet .e-spanddl{
    border-color: @ssheader-border-color;
    background-color: @default-bg-stcolor;
    color: @default-icon-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetcontentcontainer .e-ss-object.e-ss-activeimg {
    border-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetcontentcontainer .e-ss-pivot.e-ss-activepivot {
    border-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet  .e-ss-object.e-datavisualization-chart {
    border-color: @ssheader-border-color;
}
@{e-js}.e-spreadsheet .e-ss-imgvisual {
    border-color: @ssheader-border-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowcell.e-redft {
    background-color: #ffc7ce;
    color: #9C0055;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowcell.e-yellowft {
    background-color: #ffeb9c;
    color: #9c6500;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowcell.e-greenft {
    background-color: #c6efce;
    color: #006100;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowcell.e-redf {
    background-color: #ffc7ce;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowcell.e-redt {
    color: #9C0055;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowcell.e-hlcell {
    background-color: #ffff00;
    color: #ff0000;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowcell.e-goto-blank {
    background-color: @sscopy-blank-bgcolor;
}
/*-------------------------- Formula Tab --------------------------- */
@{e-js}.e-spreadsheet .e-indexbox,
@{e-js}.e-spreadsheet .functionbox,
@{e-js}.e-spreadsheet .e-inputbox {
    border-color: @sscontent-border-color;
    color: @content-font-color;
    background-color: @content-bg-color;
}
@{e-widget}.e-ss-autocomplete.e-atc-popup ul li {
    color: @ssheader-content-color;
}
@{e-js}.e-spreadsheet .e-inputbox > input {
    color: @sscontent-color;
}
/*-------------Pager-------------*/
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-numericitem {
    color: @sspager-font-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-currentitem,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-currentitem:hover {
& when not (@skin = "material") {
    background: @ssheader-select-bgcolor;
    color: @ssfroze-highlight-color;
    filter:none;   /* IE9 only*/
	}
& when (@skin = "material") {
    background: none;
	color: @ssfroze-highlight-color;
    filter:none;   /* IE9 only*/
        }
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-numericitem:hover {
  color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager {
    background-color: @ssheader-bgcolor;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-prevpagedisabled,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-prevpage,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-nextpage,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-nextpagedisabled,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-lastpagedisabled,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-lastpage,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-firstpage,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-firstpagedisabled,
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-numericcontainer {
    background-color: @ssheader-bgcolor;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-pagercontainer {
    background-color: @ssheader-bgcolor;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-icon:not(.e-disable):hover {
    color: @ssfroze-highlight-color;
    cursor: pointer;
}
@{e-js}.e-spreadsheet div.e-field-validation-error {
    background-color:  #fffe91;
    color: #cd0a0a;
}
@{e-widget}.e-ss-dialog div.e-dlg-field-validation-error:before {
    border-bottom-color:  #fffe91;
}
@{e-js}.e-spreadsheet div.e-error .e-errortail {
    border-bottom-color:  #fffe91;
}
@{e-js}.e-spreadsheet .e-spreadsheetfooter {
    border-color: @ssheader-border-color;
}
@{e-js}.e-spreadsheet .e-hyperlinks {
    color: inherit;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-mediaforward {
    border-right-color: @content-border-color;
	& when (@skin = "office-365") {
	border-right-color: @theme-dark-font;
	}
}
@{e-js}.e-spreadsheet .e-formulabar {
    background-color:@ssheader-bgcolor;
}
@{e-widget}.e-ss-dialog .e-chartheader {
    background-color:@ssheader-bgcolor;
    color:@ss-chartmenu-color;
}
@{e-widget}.e-ss-dialog .e-tab .e-header.e-addborderbottom .e-active {
    border-top-color:@ssheader-border-color;
}
/*---------------------- Dialog -------------------------- */
@{e-widget} .e-dlgtab .e-header,
@{e-widget} .e-valdlgtab .e-header {
    overflow: visible;
    /*border-color: @ssheader-bgcolor;*/
}
@{e-js}.e-spreadsheet .e-dlg-field-validation-error, @{e-widget}.e-ss-dialog .e-dlg-field-validation-error {
    background-color:  #fffe91;
    color: #cd0a0a;
}
@{e-widget} .e-dlgright,
@{e-widget} .e-dlgleft,
@{e-widget} .e-dlginput,
@{e-widget} .e-dlgcontent,
@{e-widget} .e-chtdlgright,
@{e-widget} .e-chtdlgleft,
@{e-widget} .e-chtdlgcontent {
    border-color: @ssheader-border-color;
}
@{e-widget} .e-dlgviewpanel {
    border: 1px solid @ssdialog-border;
}
@{e-widget}.e-ss-dlgtab .e-ss-sctnseparator {
    border-color: @ssdialog-border;
}

@{e-widget}.e-ss-dialog hr {
    border-color: #eeeeee;
}
/*---------------------- Name Manager ------------------*/
@{e-widget}.e-menu .e-nmuseinformularow:hover {
    background-color: @ssfroze-highlight-color;
}
/*---------------------- Cell Styles--------------------*/
@{e-widget}.e-menu-wrap .e-cellstylecontent, @{e-widget}.e-menu-wrap .e-formatastablecontent, @{e-widget}.e-menu-wrap .e-chartcontent {
    background-color: @ss-chartmenu-bgcolor;
	color: @ss-chartmenu-color;
}
@{e-widget}.e-menu-wrap .e-cellstyleheader, @{e-widget}.e-menu-wrap .e-formatastableheader {
    background-color: @ss-chartmenuheader-bgcolor;
	color: @ss-chartmenu-color;
	border-color: @ssheader-border-color;
}
@{e-widget}.e-menu-wrap .e-cellstylecell:hover, @{e-widget}.e-menu-wrap .e-formatastablecell:hover, @{e-widget}.e-menu-wrap .e-chartcontent:hover {
    border-color: @sshover-bg-color;
}
@{e-widget}.e-menu-wrap .e-cellstylecell:hover, @{e-widget}.e-menu-wrap .e-formatastablecell:hover, @{e-widget}.e-menu-wrap .e-chartcontent:hover {
    & when (@skin = "material") {
          border-color: @material-sshover-border-color;
    }
}
/*---------------------- Comments--------------------*/
@{e-js}
.e-spreadsheet .e-celltoparrow {
    border-color:  #ff0000 transparent transparent;
}
@{e-js}.e-spreadsheet .e-comment-txtarea {
    background-color: #f7fbbd;
	 color: #000000;
}
@{e-widget} .e-list.e-hdrcolor {
    background-color: @sscomments-hdr-bgcolor !important;
    color: @sscontent-color !important;
}
@{e-widget} .e-list.e-color {
    border-color: @header-bg-stcolor !important;
}
@{e-widget} .e-list.e-hdrcolor.e-mhover > a, @{e-widget} .e-list.e-hdrcolor.e-mfocused > a {
    background-color: transparent !important;
    color: @sscontent-color !important;
}
@{e-widget} .e-list.e-color.e-mhover.e-mfocused {
    border-color: @sscomments-focused-border !important;
}
@{e-js}.e-spreadsheet .e-excelfilter .e-in-wrap {
    border-color: @sscomments-excel-border;
}
/*---------------------------RTL--------------------------*/
@{e-js}.e-spreadsheetrowheader.e-scrollrowcss.e-rtl {
    border-color: @ssheader-border-color;
}
@{e-js}.e-spreadsheetcolumnheader.e-rtl {
    border-color: @ssheader-border-color;
}
@{e-js}.e-spreadsheetcontentcontainer.e-rtl {
    border-color: @ssheader-border-color;
}
@{e-js}.e-spreadsheet .e-numeric .e-in-wrap {
    border-color: @sscomments-excel-border;
}
@{e-widget}.e-ss-dialog .e-chartselect {
    border-color: @ssactive-bg-color;
	 & when (@skin = "office-365") {
         border-color: @sschart-select-color;
		}
}
@{e-widget}.e-menu-wrap .e-chartcell {
    border-color: @header-bg-stcolor;
}
@{e-js}.e-spreadsheet .e-ss-object {
    background-color: @content-bg-color;
}
@{e-js}.e-spreadsheet .e-ss-charttheme {
    background-color: @sschart-darktheme-bgcolor;
}
/*-------------------------Merge--------------------*/
@{e-js}.e-spreadsheet .e-ssr-horizontalprt .e-btn.e-ss-active {
   .spread-toggle-gradient();
   color:@sscontent-color;
   & when (@skin = "bootstrap") {
	color:@active-font-color;
	}
   & when (@skin = "office-365") {
	background:@ssactive-buttonbg-color;
	}
}

@{e-js}.e-spreadsheet .e-ssr-horizontalprt .e-btn.e-ss-active:hover {
    & when (@skin = "office-365") {
	background:@ssactive-buttonbg-color;
	}
	& when (@skin = "bootstrap") {
		color:@content-bg-color;
	}
}

@{e-js}.e-spreadsheet .e-ssr-horizontalprt .e-btn.e-ss-active:hover .e-icon {
    color:@ss-icon-color;
}
/*-------------------------Auto fill Option--------------------*/
@{e-widget}.e-ss-colorpicker .e-in-wrap.e-tool, .e-ss-colorpicker .e-in-wrap.e-tool .e-select {
     & when not (@skin = "material") {
            background-color: @rbncontent-content-bg-color;
        }
     & when (@skin = "material") {
            background-color: none;
        }
}
/*--------------------------------- Freeze Pane -------------------------------*/
@{e-js}.e-spreadsheet .e-frow{
	border-color: @ssfroze-highlight-color;
}
@{e-js}.e-spreadsheet .e-fcol {
	border-color: @ssfroze-highlight-color;
}
/*-------------------------Ribbon icons Customization--------------------*/
@{e-js}.e-spreadsheet .e-ssr-verticalHparent:hover .e-btn.e-select:not(.e-disable):not(.e-active),
@{e-js}.e-spreadsheet .e-split .e-in-wrap.e-ssr-horizontalprt:hover .e-split-btn:not(.e-disable),
@{e-js}.e-spreadsheet .e-ss-colorpicker .e-in-wrap.e-ssr-colpickHprt:hover:not(.e-disable) .e-ssr-colorcontainer {
  border-color: @sshover-bg-color;
   & when (@skin = "office-365") {
            border-color:@ssactive-buttonbg-color;
        }
}
@{e-js}.e-spreadsheet .e-ssr-verticalHparent:hover .e-active,@{e-js}.e-spreadsheet .e-splitspan .e-spreadsheet.e-btn.e-select:hover {
    .spread-toggle-gradient();
	& when (@skin = "office-365") {
	background:@ssactive-buttonbg-color;
	}
}
@{e-js}.e-spreadsheet .e-split.e-active .e-in-wrap.e-ssr-horizontalprt:hover .e-split-btn:not(.e-disable) {
    .spread-toggle-gradient();
	& when (@skin = "office-365") {
	background:@ssactive-buttonbg-color;
	}
}
@{e-js}.e-spreadsheet .e-split.e-active .e-box .e-btn.e-select, 
@{e-js}.e-spreadsheet .e-split.e-active .e-box .e-btn.e-select:hover, 
@{e-js}.e-spreadsheet .e-button.e-btn.e-select.e-active, 
@{e-js}.e-spreadsheet .e-ribbon.e-js .e-rbn-button.e-button.e-btn.e-select.e-active:hover {
    .spread-toggle-gradient();
	color:@ssactive-font-color;
	 & when (@skin = "office-365") {
	background:@ssactive-buttonbg-color;
	border-color:@ssactive-buttonbg-color;
	}
}

@{e-js}.e-spreadsheet .e-split.e-active .e-box .e-btn.e-select.e-ss-active{
	& when (@skin = "bootstrap") {
		color: @active-font-color;
	}
}
@{e-js}.e-spreadsheet .e-ribbon.e-js .e-btn.e-select.e-ss-active:hover .e-icon {
	& when (@skin = "bootstrap") {
		color: @active-font-color;
	}
}
@{e-js}.e-spreadsheet .e-ribbon .e-rbn-button.e-btn.e-active .e-icon {
	& when (@skin = "bootstrap") {
		color: @active-font-color;
	}
}
@{e-js}.e-spreadsheet .e-ribbon.e-js .e-controlclicked .e-btn.e-select.e-ss-active:hover .e-icon {
  & when (@skin = "bootstrap") {
		color: @default-icon-color;
	}
}

@{e-js}.e-spreadsheet .e-split.e-active .e-box .e-btn.e-select,
@{e-js}.e-spreadsheet .e-split.e-active .e-box .e-btn.e-select:hover {
	& when (@skin = "bootstrap") {
		color: @active-font-color;
	}
}
@{e-js}.e-spreadsheet .e-ribbon.e-js .e-btn.e-select.e-ss-active .e-icon {
	& when (@skin = "bootstrap") {
		color: @active-font-color;
	}
}
@{e-js}.e-spreadsheet .e-split.e-active .e-box .e-btn .e-icon, @{e-js}.e-spreadsheet .e-split .e-btn.e-select:active .e-ss-active .e-icon{
    color: @ssactive-icon-color;
	& when (@skin = "bootstrap") {
		color: @active-font-color;
	}
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-hborder {
    border-color: transparent;
}
@{e-js}.e-spreadsheet .e-content.e-viewbrdr {
    border-color: @ssheader-border-color;
}
/*-------------------------------------Spreadsheet Ribbon override------------*/
@{e-js}.e-spreadsheet .e-ribbon .e-header {
    border-right: none;
    border-left: none;
    border-top: none;
}
@{e-js}.e-spreadsheet .e-ribbon .e-content {
    border-right: none;
    border-left: none;
}
@{e-js}.e-spreadsheet .e-ribbon .e-header {
    border-right: medium none;
    border-left: medium none;
    border-top: medium none;
}
@{e-js}.e-spreadsheet .e-ribbon  .e-content {
    border-right: medium none;
    border-left: medium none;
}
@{e-js} .e-ribbon .e-btn.e-ss-active {
    background-color: @ssfroze-highlight-color;
    color: @header-bg-stcolor;
}
@{e-js}.e-spreadsheet .e-ribbon .e-ddl {
    border-color: @ssdrpdwnbrdr;
}

@{e-js}.e-spreadsheet .e-ribbon .e-ddl.e-widget.e-focus .e-in-wrap {
    box-shadow: 0 0 7px #ccc;
}

@{e-js}.e-spreadsheet .e-ribbon .e-ddl {
    border-color: @ssdrpdwnbrdr;
}
@{e-js}.e-spreadsheet .e-menu.e-split,@{e-widget}.e-menu-wrap .e-spreadsheet.e-split.e-autofillbtn li.e-list, @{e-js}.e-spreadsheet .e-splitspan .e-btn.e-select {
   background:@ssheader-bgcolor;
}
@{e-js}.e-spreadsheet .e-ssr-bscontent div:not(.e-ssr-bsnewtmpl) .e-btn.e-select{ 
   border-color:@ssheader-border-color;
}
@{e-widget}.e-ss-colorpicker.e-popup {
   background-color:@ssheader-bgcolor;
   color:@ssheader-content-color;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-numericitem:not(.e-currentitem) {
   background-color:@ssheader-bgcolor;
}
@{e-js}.e-spreadsheet .e-ribbon .e-btn.e-select.e-disable:hover .e-icon {
   color:@disable-icon-bg-color;
   & when (@skin="material") {
        color: fade(@base-font-color,26%);
    }
}

@{e-js}.e-spreadsheet .e-ribbon .e-togglebutton.e-btn.e-tbtn.e-select.e-disable:not(.e-active),@{e-js}.e-spreadsheet .e-ribbon .e-togglebutton.e-btn.e-tbtn.e-select.e-disable:not(.e-active):hover {
    & when (@skin="material") {
        background: @hover-bg-stcolor;
    }
}

@{e-js}.e-spreadsheet .e-ribbon .e-button.e-btn.e-select.e-disable:hover {
  & when (@skin="material") {
        background: none;
    }
}

@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowheader.e-filterhiglight, @{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowheader.e-rowhighlight.e-filterhiglight {
   color:#00cc00;
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-headercell {
        cursor:@ssdown-arrow-cursor;
    }
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowheader {
        cursor:@ssright-arrow-cursor;
    }
@{e-js}.e-spreadsheet .e-ss-fpcursor {
        cursor:@ssformatpainter-cursor;
    }
@{e-js}.e-spreadsheet .e-ss-drwbrdrcursor {
        cursor:@ssdraw-border-cursor;
    }
@{e-js}.e-spreadsheet .e-ss-drwbrdrgridcursor {
        cursor:@ssdraw-border-grid-cursor;
    }

/***********************SpreadsheetTextArea***********************************/

   @{e-widget}.e-ss-textarea, @{e-widget}.e-ss-textarea:focus, @{e-widget}.e-ss-textarea:hover{
        border-color:@ss-textarea-color;
    }

/*-------------------------------------SpreadsheetCellType--------------------*/
@{e-js}.e-spreadsheet .e-cellreadonly .e-datewidget .e-select{
	 background:@ssheader-bgcolor;
}
@{e-js}.e-spreadsheet .e-cellreadonly .e-ddl .e-select{
	 background:@ssheader-bgcolor;
}
/*----------------------------Activation Panel-------------------------*/
@{e-js}.e-spreadsheet .e-spreadsheetactpanel{
	border-left-color: @ssheader-border-color;
}
/*---------------------------Border Menu-------------------------------*/
@{e-js}.e-spreadsheet .e-bordercontainer {
	background-color: @content-bg-color;
}
@{e-js}.e-spreadsheet .e-bordercell:hover {
	border-color: @sshover-bg-color;
}
@{e-js}.e-spreadsheet .e-ss-bdr-header {
	background-color: @content-bg-color;
	border-color: @header-border-color;
}
/*---------------------------Pivot Table-------------------------------*/
@{e-js}.e-spreadsheet .e-ss-pivottableheader {
     background-color: @ssheader-select-bgcolor;
     border-color: @ssheader-border-color;
    color: @ssheader-content-color;

}
/*-------------------------------------Material Theme Changes -----------------------*/
@{e-js}.e-spreadsheet .e-formulabar, @{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-spreadsheetcontentcontainer, @{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-spreadsheetcolumnheader, @{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-rowheader, @{e-js}.e-spreadsheet .e-scrollcss, @{e-js}.e-spreadsheet .e-scrollrowcss {
    & when (@skin = "material") {
        background-color: @material-ssbg-default-color;
    }
}

@{e-widget}.e-ss-dialog .e-btn.e-select, @{e-widget}.e-ss-dialog .e-btn.e-select:hover, @{e-widget}.e-ss-dialog .e-btn.e-select:active {
    & when (@skin = "material") {
        color: @ssactive-bg-color;
    }
}

    @{e-widget}.e-ss-dialog .e-btn.e-select:hover {
        & when (@skin = "material") {
            background-color: @material-sstextbox-border-color;
        }
    }

    @{e-widget}.e-ss-dialog .e-btn.e-select:active {
        & when (@skin = "material") {
            background-color: @ssselectall;
        }
    }

@{e-widget}.e-ss-dialog .e-dialog input.ejinputtext:focus, @{e-js}.e-spreadsheet input.ejinputtext:focus {
    & when (@skin= "material") {
        border-color: @ssactive-bg-color;
    }
}

@{e-widget}.e-ss-dialog .e-dialog input.ejinputtext, @{e-js}.e-spreadsheet input.ejinputtext {
    & when (@skin= "material") {
        border-color: @material-sshover-border-color;
    }
}

@{e-widget}.e-ss-dialog.e-ss-mattab .e-dlg-btnfields {
    & when (@skin = "material") {
        border-top-color: @material-sstextbox-border-color;
    }
}

@{e-widget}.e-ss-dialog.e-ss-mattab .e-titlebar {
    & when (@skin = "material") {
        background-color: @material-dlgtab-bgcolor;
        color: @material-dlgtab-fontcolor;
    }
}

@{e-widget}.e-ss-dialog.e-ss-mattab .e-dialog .e-tab .e-header {
    & when (@skin = "material") {
        background-color: @material-dlgtab-bgcolor;
    }
}

    @{e-widget}.e-ss-dialog.e-ss-mattab .e-dialog .e-tab .e-header li a {
        & when (@skin = "material") {
            color: @material-dlgtab-inactcolor;
        }
    }

    @{e-widget}.e-ss-dialog.e-ss-mattab .e-dialog .e-tab .e-header li.e-active a {
        & when (@skin = "material") {
            color: @material-dlgtab-fontcolor;
        }
    }

@{e-widget}.e-ss-autocomplete.e-atc .e-in-wrap {
    & when (@skin = "material") {
        border-color: @material-ac-brdr-color;
    }
}

    @{e-widget}.e-ss-autocomplete.e-atc .e-in-wrap:active {
        & when (@skin = "material") {
            border-color: @material-ac-brdractive-color;
        }
    }

@{e-js}.e-spreadsheet .e-ss-dialog.e-ss-mattab .e-dialog-icon:before {
    & when (@skin = "material") {
        color: @material-dlgtab-fontcolor;
    }
}

@{e-widget}.e-ss-dialog label, @{e-widget}.e-ss-dialog .e-ss-fcgdiv {
    & when (@skin = "material") {
        color: @material-dialog-content-color;
    }
}
@{e-js}.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-numericitem:not(.e-active) {
    & when (@skin = "material") {
          color: @material-ssheader-content-color;
    }
}

@{e-widget}.e-ss-dialog .e-dialog .e-dlgctndiv label {
  & when (@skin = "office-365") {
    color:@ssheader-hover-fontcolor;
  }
}

@{e-widget}.e-ss-dialog .e-ss-okbtn.e-btn.e-select {
	& when (@skin = "office-365") {
		background-color:@ssactive-bg-color;
		color:@sscontent-active-color;
		border-color: @ssactive-border-color;
	}
}
@{e-widget}.e-ss-dialog .e-ss-okbtn.e-btn.e-select:hover{
	& when (@skin = "office-365") {
		background-color:@ssdlgbtn-dark-bg;
		color:@ssdlgbtn-dark-font;
		border-color: @ssdlgbtn-dark-bg;
    }
}
@{e-widget}.e-ss-dialog .e-ss-okbtn.e-btn.e-select:focus {
	& when (@skin = "office-365") {
		background-color:@ssdlgbtn-dark-bg;
		color:@ssdlgbtn-dark-font;
		border-color: @ssactive-border-color;
	}
}
@{e-widget}.e-ss-dialog .e-ss-okbtn.e-btn.e-select:active {
	& when (@skin = "office-365") {
		background-color:@ssactive-bg-color;
		color:@sscontent-active-color;
		border-color: @ssactive-border-color;
	}
}
@{e-widget}.e-ss-colorpicker .e-colorwidget .e-in-wrap.e-box.e-ssr-colpickHprt:hover {
& when (@skin = "office-365") {
  border:none;
  }
}
@{e-js}.e-spreadsheet .e-ribbon.e-js .e-rbn-button.e-tbtn.e-select:active .e-icon {
	& when (@skin="bootstrap") {
	    /*bootstrap*/
	 	color: @hover-icon-color;
    }
}
/*-------------------------------------SpreadSheet End -----------------------*/




.e-documenteditor {
    background-color: @content-bg-color;
}

.e-documenteditor-contextmenuitem:hover {
    background-color: @hover-bg-stcolor;
    color: @hover-font-color;
}

.e-documenteditor-contextmenuitem {
    background-color: @content-bg-color;
    color: @content-font-color;
}

.e-documenteditor-disabledcontextmenuitem {
    background-color: @content-bg-color;
    color: #808080;
}

.e-documenteditor-optionspane {
    background-color: @content-bg-color;
    color: @content-font-color;
}

.e-documenteditor-icon.e-search {
    color: @hover-bg-stcolor;
}



/*------------------------------------- Mediaplayer -------------------------------------------*/
/*#region mediaplayer*/
/*region media container styles*/

@{e-js}.e-media-player .e-media-content-div .e-waitpopup-pane {
    background-color: transparent;
}

@{e-js}.e-media-player {
    border-color: @header-border-color;
    background-color: @content-bg-color;
}

@{e-js}.e-media-player .e-media-control-container {
    background: @content-bg-color;
}

@{e-js}.e-media-player .e-media-element {
    background: @content-bg-color;
}

@{e-js}.e-media-player .e-slider {
    background-color: @default-icon-color !important;
}
/*region media container styles*/

/* region toolbar styles*/

@{e-js}.e-media-player .e-media-toolbar-icon:before, @{e-js}.e-media-player .e-media-playlist-icon:before, @{e-js}.e-media-player .e-media-playlist-toggle:before {
    color: @default-icon-color;
}

@{e-js}.e-media-player .e-media-toolbar.adv .e-media-volume-text {
    color: @default-icon-color;
}

@{e-js}.e-media-player .e-media-time-stamp.e-media-adv {
    color: @default-font-color;
}

@{e-js}.e-media-player .media-shuffled:before, @{e-js}.e-media-player .media-muted:before, @{e-js}.e-media-player .media-repeated:before,
@{e-js}.e-media-player .e-media-playlist-visible:before {
    color: @active-bg-stcolor;
}

@{e-js}.e-media-player .e-media-timeslider-div.e-media-adv {
    background: transparent;
}

@{e-js}.e-media-player .e-media-prev-li.basic .e-media-toolbar-icon:before, @{e-js}.e-media-player .e-media-next-li.basic .e-media-toolbar-icon:before {
    color: @default-icon-color;
}

@{e-js}.e-media-player .e-media-toolbar.basic .e-media-toolbar-split-li {
    color: @default-icon-color;
}

@{e-js}.e-media-player .e-media-toolbar.basic .e-media-split {
    color: @default-font-color;
}

@{e-js}.e-media-player .e-media-toolbar.basic .e-media-vol-slider-li {
    background-color: @content-bg-color;
}

.e-media-time-stamp-end.e-media-basic, .e-media-time-stamp-run.e-media-basic {
    color: @default-font-color;
}

@{e-js}.e-media-player .e-media-time-stamp-end.e-media-mob, @{e-js}.e-media-player .e-media-time-stamp-run.e-media-mob {
    color: @default-font-color;
}
/* end region toolbar styles*/

/*region settings styles*/

@{e-js}.e-media-settings-popup > .e-lv.subpage {
    background-color: @content-bg-color;
    border-color: @content-border-color !important;
}

@{e-js}.e-media-settings-popup li {
    background-color: @content-bg-color !important;
}

@{e-js}.e-media-settings-popup .e-header {
    background-color: @header-bg-stcolor !important;
    border-bottom-color: @header-border-color !important;
}

@{e-js}.e-media-settings-selector:before {
    color: @active-bg-stcolor;
}

@{e-js}.e-media-settings-popup .e-lv .e-list .e-chevron-right_01.e-fontimage:before,
@{e-js}.e-media-settings-popup .e-lv > .e-header > .e-icon:before {
    color: @active-bg-stcolor !important;
}

@{e-js}.e-media-settings-popup .e-list-text, @{e-js}.e-media-settings-popup .e-btn-text {
    color: @default-font-color !important;
}
/*end region settings styles*/

/*region playlist styles*/

@{e-js}.e-media-player .e-media-playlist-img-div {
    color: @content-bg-color !important;
}

@{e-js}.e-media-player .e-media-playlist-img-div.desktop {
    border-color: @content-border-color;
}

@{e-js}.e-media-player .e-media-playlist-img-div.mobile {
    border-color: @content-border-color;
}

@{e-js}.e-media-player .e-media-playlist-play:before {
    color: @default-font-color;
}

@{e-js}.e-media-player .e-media-playlist-title {
    color: @default-font-color;
}

@{e-js}.e-media-player .e-media-playlist-container.desktop,@{e-js}.e-media-player .e-media-playlist-container.mobile {
    background-color: @content-bg-color;
    border-color: @content-border-color;
}

@{e-js}.e-media-player .e-media-playlist-header {
    border-bottom-color: @header-border-color;
}

@{e-js}.e-media-player .e-media-playlist-header label {
    color: @default-font-color;
}

@{e-js}.e-media-player .e-media-playlist-toggle.desktop {
    background-color: @default-font-color;
}

@{e-js}.e-media-player .e-media-playlist-toggle.e-media-expand:before, @{e-js}.e-media-player .e-media-playlist-toggle.e-media-collapse:before {
    color: @default-font-color !important;
}

@{e-js}.e-media-player .e-media-playlist-container .e-listbox .e-select {
    /*background: @active-bg-stcolor !important;*/
}

@{e-js}.e-media-player .e-media-playlist-container .e-listbox li {
    border-bottom-color: @content-border-color;
}

@{e-js}.e-media-player .e-media-playlist-container .e-listbox-container {
    background-color: @content-bg-color;
}
/*region playlist styles*/

/*other styles*/
@{e-js}.e-media-player .e-media-video-baner {
    color: @active-font-color;
}

@{e-js}.e-media-player .e-media-audio-title {
    color: @header-font-color;
}

@{e-js}.e-media-player .e-media-overlay {
    color: white;
}

@{e-js}.e-media-player .e-media-time-tooltip {
    border-color: @content-border-color;
    color: @content-font-color;
    background-color: @content-bg-color;
}

@{e-js}.e-media-player .e-media-hd-tag {
    color: red;
}

@{e-js}.e-media-player .e-media-toolbar-split {
    background: @header-border-color;
}

@{e-js}.e-media-player .e-media-playlist-close:before {
    color: @default-icon-color;
}

@{e-js}.e-media-player .e-media-play-animation {
    background: rgba(0,0,0,.5);
}

@{e-js}.e-media-player .e-slider .e-handle {
    border-color: @default-border-color !important;
}
/*#region hover*/
@{e-js}.e-media-player .e-media-mouse .e-media-toolbar-icon:not(.disabled):hover::before {
    color: @hover-font-color !important;
}

@{e-js}.e-media-player .e-media-toolbar.adv .e-media-toolbar-volume-li:hover {
    background: transparent !important;
}

@{e-js}.e-media-settings-popup li:hover {
    background: @hover-bg-stcolor !important;
}


/*material theme*/

@{e-js}.e-media-player .e-media-toolbar.basic .e-media-time-li .e-handle {
    & when (@skin= "material") {
        margin-top: -3px !important;
    }
}

@{e-js}.e-media-player .e-media-toolbar.basic .e-media-volume-slider .e-handle {
    & when (@skin= "material") {
        margin-left: 0px !important;
    }
}

@{e-js}.e-media-settings-popup .e-lv .e-list .e-chevron-right_01 {
    & when (@skin= "material") {
        padding-top: 0px !important;
    }
}

@{e-js}.e-media-settings-popup .e-header {
    & when (@skin= "material") {
        background-color: white !important;
        box-shadow: none !important;
        border-top: 0px !important;
    }
}

@{e-js}.e-media-settings-popup .e-lv.subpage.e-childitem .e-btn-text {
    & when (@skin= "material") {
        left: 0px !important;
    }
}

@{e-js}.e-media-settings-popup .e-lv.subpage.e-childitem .e-header .e-hicon,
@{e-js}.e-media-settings-popup .e-lv.subpage.e-childitem .e-btn-text {
    & when (@skin= "material") {
        top: -18px !important;
        right: 0px !important;
    }
}

@{e-js}.e-media-player .e-media-timeslider.e-media-adv.e-slider .e-handle {
    & when (@skin= "material") {
        margin-top: -2px !important;
    }
}

@{e-js}.e-media-player .e-media-toolbar.adv .e-media-volume-slider .e-handle {
    & when (@skin= "material") {
        margin-top: 0px !important;
    }
}

@{e-js}.e-media-player .e-media-shuffle:before {
    & when (@skin= "material") {
        font-size: 17px !important;
        margin-top: -3px !important;
    }
}

@{e-js}.e-media-player .e-media-toolbar.adv .e-media-volume-slider-li {
    & when (@skin= "material") {
        margin-top: -2px !important;
    }
}

@{e-js}.e-media-player .e-media-playlist-toggle.e-media-collapse:before {
    & when (@skin= "material") {
        content: "\e116" !important;
        -ms-transform: rotate(180deg) !important;
        -webkit-transform: rotate(180deg) !important;
        transform: rotate(180deg) !important;
    }
}

@{e-js}.e-media-player .e-media-playlist-toggle.mobile {
    & when (@skin= "material") {
        -ms-transform: rotate(90deg) !important;
        -webkit-transform: rotate(90deg) !important;
        transform: rotate(90deg) !important;
    }
}

@{e-js}.e-media-player .e-media-center-play:before {
    & when (@skin= "material") {
        left: 46% !important;
        left: -moz-calc(~'50% - 23px') !important;
        left: -webkit-calc(~'50% - 23px') !important;
        left: -o-calc(~'50% - 23px') !important;
        left: calc(~'50% - 23px') !important;
    }
}

@{e-js}.e-media-player .e-media-hd-tag {
    & when (@skin= "material") {
        right: 0px !important;
    }
}

@{e-js}.e-media-settings-popup .e-list-text {
    & when (@skin= "material") {
        font-size: 13px !important;
    }
}
/*office-365 theme*/
@{e-js}.e-media-player .e-media-toolbar.basic .e-media-volume-slider .e-handle {
    & when (@skin= "office-365") {
        margin-left: -2px !important;
    }
}

@{e-js}.e-media-settings-popup .e-lv .e-list .e-chevron-right_01 {
    & when (@skin= "office-365") {
        padding-top: 0px !important;
        margin-top: -6px;
    }
}

@{e-js}.e-media-settings-popup .e-lv.subpage.e-childitem .e-btn-text {
    & when (@skin= "office-365") {
        left: 0px !important;
    }
}

@{e-js}.e-media-player .e-media-settings-selector:before {
    & when (@skin= "office-365") {
        top: 6px !important;
    }
}

@{e-js}.e-media-player .e-media-toolbar.adv .e-media-volume-slider .e-handle {
    & when (@skin= "office-365") {
        margin-top: -2px !important;
    }
}

@{e-js}.e-media-player .e-media-playlist-container .e-listbox li {
    & when (@skin= "office-365") {
        padding: 4px !important;
    }
}

@{e-js}.e-media-player .e-media-playlist-number {
    & when (@skin= "office-365") {
        margin-top: -17px !important;
    }
}

@{e-js}.e-media-settings-popup .e-header {
    & when (@skin= "office-365") {
        box-shadow: none !important;
        border-top: 0px !important;
    }
}

@{e-js}.e-media-settings-popup .e-lv.subpage.e-childitem .e-header .e-hicon,
@{e-js}.e-media-settings-popup .e-lv.subpage.e-childitem .e-btn-text {
    & when (@skin= "office-365") {
        top: -6px !important;
    }
}

@{e-js}.e-media-player .e-media-shuffle:before {
    & when (@skin= "office-365") {
        font-size: 17px !important;
        margin-top: -3px !important;
    }
}

@{e-js}.e-media-player .e-media-toolbar.adv .e-media-volume-slider-li {
    & when (@skin= "office-365") {
        margin-top: -2px !important;
    }
}

@{e-js}.e-media-player .e-media-playlist-toggle.e-media-collapse:before {
    & when (@skin= "office-365") {
        content: "\e116" !important;
        -ms-transform: rotate(180deg) !important;
        -webkit-transform: rotate(180deg) !important;
        transform: rotate(180deg) !important;
    }
}

@{e-js}.e-media-player .e-media-playlist-toggle.mobile {
    & when (@skin= "office-365") {
        -ms-transform: rotate(90deg) !important;
        -webkit-transform: rotate(90deg) !important;
        transform: rotate(90deg) !important;
    }
}

@{e-js}.e-media-player .e-media-center-play:before {
    & when (@skin= "office-365") {
        left: 46% !important;
        left: -moz-calc(~'50% - 23px') !important;
        left: -webkit-calc(~'50% - 23px') !important;
        left: -o-calc(~'50% - 23px') !important;
        left: calc(~'50% - 23px') !important;
    }
}
/*#end region mediaplayer*/



@{e-js}.e-ganttchart .e-ganttviewerbodyContianer{
    background-color:@gantt-chart-content-bg-color;
}
@{e-js}.e-ganttchart .e-ganttviewerbodyContianerparent {
    border-right-color:@gantt-content-border-color;
}

@{e-js}.e-ganttchart .e-headercell-weekend > div
{
    & when (@skin= "office-365") {
        background:@neutral-lighter-alt;
    }
    & when not (@skin= "office-365"){
        .ganttheader-gradient();    
    }
}
@{e-js}.e-ganttchart .e-weekends
{
    background-color:@gantt-weekends-bg-color;
}

@{e-js}.e-ganttchart-core{
    background:@gantt-chart-content-bg-color; 
}

@{e-js}.e-ganttchart  .e-borderbox {
  border-bottom-color:@gantt-chart-content-bg-color;
 }

@{e-js}.e-ganttchart .e-schedule-day-headercell,
@{e-js}.e-ganttchart .e-schedule-hour-headercell,
@{e-js}.e-ganttchart .e-schedule-week-headercell {  
    .material-gantt-header-background;
    color: @gantt-schedule-font-color;    
    border-color: @gantt-header-border-color !important;    
    font-family:@font-family;
    & when (@skin= "material") {
        height:27px;
        line-height:27px;
    }
    & when (@skin= "office-365") {
        height:29px;
        line-height:29px;
    }
}

.e-gantt-dialog {
width:42% !important; 
}

.e-gantt-dialog .e-gantt-validation-btn {
    margin-top: 20px;
    margin-bottom: 15px;
    width: 100%;
    height: 27px;
}

@{e-js}.e-ganttchart .e-ganttviewerheaderContainer { 
    .ganttheader-gradient();
    .material-gantt-header-background;
    color: @gantt-schedule-font-color;
    border-bottom-color:@gantt-header-border-color !important;
    border-right-color:@gantt-header-border-color;
     & when (@skin= "material") {
        height:54px!important;
    }
     & when (@skin= "office-365") {
        height:58px!important;
    }
}

@{e-js}.e-ganttchart .e-milestone-top{
    
    border-bottom-color:@gantt-milestone-bg-color;
}

@{e-js}.e-ganttchart .e-milestone-bottom {
    border-top-color:@gantt-milestone-bg-color;
}

@{e-js}.e-ganttchart .e-taskbarname,
@{e-js}.e-ganttchart .e-resourceinfo {
    color: @gantt-content-font-color;
    font-family: @font-family;
}
@{e-js}.e-ganttchart .e-connectorline-rightarrow {
    border-left-color:  @gantt-connectorline-arrow-bg-color;
}

@{e-js}.e-ganttchart .e-connectorline-leftarrow {
    border-right-color:  @gantt-connectorline-arrow-bg-color;
}

@{e-js}.e-progressbartooltip,
@{e-js}.e-editingtooltip,
@{e-js}.e-tooltipganttpredecessor {
     & when (@skin= "material") {
        background-color: @grey-700;
        color: @primary-font-color;
        border-color: transparent;
    }
    & when (@skin= "office-365") {
        background-color: @info-bg-color;
        color: @neutral-secondary;
        border-color: @neutral-secondary-alt;
    }
    & when not (@skin= "material") and not (@skin= "office-365") {
      .tgPopUp-gradient();
       background-color: @gantt-content-bg-color;
       color: @gantt-content-font-color;
       border-color: @gantt-tooltip-border-color;
    }
}

@{e-js} .e-tooltiptaskname {
     & when (@skin= "material") {
        color: @primary-font-color;
    }
     & when (@skin= "office-365") {
        color: @neutral-secondary;
    }
    & when not (@skin= "material") and not (@skin= "office-365") {
        color: @gantt-tooltip-font-color;
    }
	font-family: @font-family;
}
@{e-js}.e-tooltipgantt,
@{e-js}.e-progressbartooltip,
@{e-js}.e-editingtooltip,
@{e-js}.e-tooltipganttpredecessor {
    font-family: @font-family;
}
@{e-js}.e-ganttchart .e-tasklabel {
    font-family: @font-family;
    color:@active-font-color;
}
@{e-js}.e-ganttchart .e-gantt-mouseclick td.e-chartcell {       
    & when not (@skin= "material") and not (@skin= "office-365") {   
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@{gantt-row-selection-bg-color}", endColorstr="@{gantt-row-selection-bg-color}", GradientType=0); /* IE9 and below */
   }
}
@{e-js}.e-ganttchart .e-gantt-mouseclick {
    & when (@skin= "material") {
          background:fade(@grey-100,70);
    }
    & when (@skin= "office-365") {
          background:fade(@theme-lighter,70);
    }
    & when not (@skin= "material") and not (@skin= "office-365") {
        .gantt-row-selection();
        .high-contrast-gantt-active-font-color;
        color:@gantt-selection-font-color;
        filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr="@{gantt-row-selection-bg-color}", endColorstr="@{gantt-row-selection-bg-color}", GradientType=0), progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
    }
}

@{e-js}.e-ganttchart .e-progresshandle {
    background: @gantt-progressHandle-color;
}

@{e-js}.e-ganttchart .e-progresshandleafter {
     border-bottom-color:  @gantt-progressHandle-color;
}

@{e-js}.e-ganttchart .e-gantt-parenttaskbar-progress,
@{e-js}.e-ganttchart .e-gantt-parenttaskbar-innerdiv {
    & when (@skin= "office-365") {
          border-color: transparent;
    }
    & when not (@skin= "office-365") {
        border-color:@gantt-parent-taskbar-border-color;
    }
}

@{e-js}.e-ganttchart .e-gantt-childtaskbar-progress,
@{e-js}.e-ganttchart .e-gantt-childtaskbar {
     & when (@skin= "office-365") {
          border-color: transparent;
    }
    & when not (@skin= "office-365") {
        border-color:@gantt-child-taskbar-border-color;
    }
}

@{e-js}.e-ganttchart .e-chartcell {
    border-bottom-color: transparent;
}

@{e-js}.e-ganttchart .e-gantt-mouseclick .e-chartcell .e-resourceinfo,
@{e-js}.e-ganttchart .e-gantt-mouseclick .e-chartcell .e-tasknameContainer .e-taskbarname {
    font-family: @font-family;
    .high-contrast-gantt-active-font-color;
    color: @gantt-selection-font-color;
}

@{e-js}.e-ganttchart .e-gantt-parenttaskbar-progress {
     & when (@skin= "office-365") {
          background: @neutral-primary;
    }
    & when not (@skin= "office-365") {
     .gantt-parent-progress-background();
	 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{gantt-parent-progress-enbg-color}', endColorstr='@{gantt-parent-progress-enbg-color}',GradientType=0 );
     }
}

@{e-js}.e-ganttchart .e-gantt-parenttaskbar-innerdiv {
    background-color:@gantt-parent-task-bg-color;
    background: rgb(red(@gantt-parent-task-bg-color),green(@gantt-parent-task-bg-color),blue(@gantt-parent-task-bg-color))~'\9';
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{gantt-parent-taskbar-color}', endColorstr='@{gantt-parent-taskbar-color}',GradientType=0 );
}

@{e-js}.e-ganttchart .e-gantt-childtaskbar-progress{
    .gantt-child-progress-background();
}
@{e-js}.e-ganttchart .e-gantt-childtaskbar {
    background-color:@gantt-child-task-bg-color;
    background: rgb(red(@gantt-child-task-bg-color),green(@gantt-child-task-bg-color),blue(@gantt-child-task-bg-color))~'\9';
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}
@{e-js}.e-ganttchart .e-manualprogressbar {
 .gantt-child-manualprogress-background();
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{gantt-chart-manual-child-progressbar-stbg-color}', endColorstr='@{gantt-chart-manual-child-progressbar-endbg-color}',GradientType=0 );
  border-color:@gantt-chart-manual-child-taskbar-border-color;
}
@{e-js}.e-ganttchart .e-manualchildtaskbar {
    background-color:@gantt-chart-manual-child-taskbar-color;
    border-color:@gantt-chart-manual-child-taskbar-border-color;
}
@{e-js}.e-ganttchart .e-line {
    border-color: @gantt-connectorline-color;
}

@{e-js}.e-ganttchart .e-connectorpoint-hover {
    background-color:@gantt-connectorpoint-hover-color;
}

@{e-js}.e-ganttchart .e-gantt-falseLine {
    border-top-color:@gantt-falseLine-color;
}

@{e-js}.e-ganttchart .e-gripper:before {
   color:@gantt-task-gripper-color;
   background: rgb(red(@gantt-task-gripper-color),green(@gantt-task-gripper-color),blue(@gantt-task-gripper-color))~'\9';
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}

@{e-js}.e-ganttchart .e-ganttgridlines {
   border-bottom-color:  @gantt-chart-border-color;
}

@{e-js}.e-ganttchart .e-criticalconnectorline {
    border-color: @gantt-chart-critical-connectorline-color !important;
}

@{e-js}.e-ganttchart .e-criticalconnectorlinerightarrow {
    border-left-color: @gantt-chart-critical-connectorline-rightarrow-color !important;
}

@{e-js}.e-ganttchart .e-criticalconnectorlineleftarrow {
    border-right-color: @gantt-chart-critical-connectorline-leftarrow-color !important;
}

@{e-js}.e-ganttchart .e-criticalprogressbar {
    background: @gantt-chart-critical-child-progressbar-color !important;
    border-color: @gantt-chart-critical-child-progressbar-border-color !important;
}

@{e-js}.e-ganttchart .e-criticaltaskbar {
    background: @gantt-chart-critical-child-taskbar-color !important;
    border-color: @gantt-chart-critical-child-taskbar-border-color !important;
}

@{e-js} .e-gantt-manualparenttaskbar {
    background-color: #b3b3b3;
}

@{e-js} .e-gantt-manualparenttaskbar-left, 
@{e-js} .e-gantt-manualparenttaskbar-right {
    border-color: #b3b3b3;
}

@{e-js} .e-gantt-manualparenttaskbar-connectorpoint-hover {
    background-color: #b3b3b3 !important;
}

.e-rg-rangdiv {
  background: #ff0000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  opacity: 0.8;
}
@{e-js} .e-gantt-taskbarSelection .e-gantt-childtaskbar:before {
    border-color: @gantt-taskbar-selection-border-color;
}

@{e-js}.e-ganttchart .e-connectorline-leftarrow-hover{
    border-right-color: @gantt-chart-connectorline-hover-color !important;
}

@{e-js}.e-ganttchart .e-connectorline-rightarrow-hover{
    border-left-color: @gantt-chart-connectorline-hover-color !important;
}

@{e-js}.e-ganttchart .e-connectorline-hover{
    border-color: @gantt-chart-connectorline-hover-color !important;
    outline-color: @gantt-chart-connectorline-hover-color !important;
}


/*------------------------------------- Radial Menu -------------------------------------------*/

@{e-js}.e-radialmenu .e-childdefault{
    fill: @active-bg-stcolor;
}
@{e-js}.e-radialmenu .e-default, @{e-js}.e-radialmenu .e-outerdefault{
    fill: @default-bg-stcolor;
}
@{e-js}.e-radialmenu .e-active{
    fill: @hover-bg-stcolor;
}
@{e-js}.e-radialmenu .e-arcbgcolor,@{e-js}.e-radialmenu .e-itembgcolor,@{e-js}.e-radialmenu .e-circlebgcolor{
    fill: @content-bg-color;
    stroke:@content-bg-color;
}
@{e-js}.e-radialmenu .e-textcolor{
    fill: @content-font-color;    
}
@{e-js}.e-radialmenu .e-radial{
    border-color: @active-bg-stcolor; 
    background-color:@content-bg-color;
}
@{e-js}.e-radialmenu .e-badgetext{
    fill: @radial-badge-color;    
}
@{e-js}.e-radialmenu .e-badgecircle{
    fill: @active-bg-stcolor;    
}
@{e-js}.e-radialmenu .e-radialslider {
    background-color:@content-bg-color;
}
@{e-js}.e-radialmenu:focus{
outline:none !important;
}




@{e-js}.e-nb.e-nb-layout.e-nb-right {
    .default-gradient();
    color: @default-font-color;
    border-left: 1px solid @default-border-color;
    box-shadow: -1px 0 10px 0 black;
    overflow-y: auto;
}

@{e-js}.e-nb.e-nb-layout.e-nb-left {
    background: @content-bg-color;
    box-shadow: -1px 0 10px 0 black;
    overflow-y: auto;
    & when (@skin= "material") {
        border: 1px solid @default-border-color;
    }
    & when (@skin= "office-365") {
        border: none;
    }
    & when not (@skin= "office-365") and not (@skin= "material") {
        border-right: 1px solid @default-border-color;
    }
}
@{e-js}.e-lv.subpage
{
    & when (@skin= "office-365") {
        font-family: @font-family;
        color: @theme-light-font;
        font-size: 13px;
        padding: 0;
        background-color: #ffffff;
        border-bottom: @border-size @border-type @neutral-light;
        border-left: @border-size @border-type @neutral-light;
        border-right: @border-size @border-type @neutral-light;
    }
    & when not (@skin= "office-365") {
        border-bottom: @border-size @border-type @content-border-color;
        border-left: @border-size @border-type @content-border-color;
        border-right: @border-size @border-type @content-border-color;
    }
}
@{e-js}.e-lv.subpage .e-list-container div.e-content {
    & when (@skin= "office-365") {
        padding: 10px;
    }
}
@{e-js}.e-lv .e-lv .e-list-container {
    border:none;
}
@{e-js}.e-lv.e-navigation > .e-header > .e-icon:hover:before{
    .material-hover-navigation-header-icon-color;
}
@{e-js}.e-nb .e-nb-listview.e-lv .e-list.e-state-active .e-chevron-right_01 .e-list-text, @{e-js}.e-nb .e-nb-listview.e-lv .e-list.e-state-active .e-home, @{e-js}.e-nb .e-nb-listview.e-lv .e-list.e-state-active .e-profile, @{e-js}.e-nb .e-nb-listview.e-lv .e-list.e-state-active .e-people, @{e-js}.e-nb .e-nb-listview.e-lv .e-list.e-state-active .e-photo,  @{e-js}.e-nb .e-nb-listview.e-lv .e-list.e-state-active .e-communities,  @{e-js}.e-nb .e-nb-listview.e-lv .e-list.e-state-active .e-location {
    & when (@skin= "material") {
    color: @accent-color;
    }
    & when (@skin= "office-365") {
        color: @theme-primary;
    }
}
@{e-js}.e-nb .e-nb-listview.e-lv .e-list.e-state-active {
    & when (@skin= "office-365") {
        background-color: @neutral-lighter;
        border-left: 2px @border-type @theme-primary;
    }
}
@{e-js}.e-nb .e-nb-listview.e-lv .e-list:hover {
    & when (@skin= "office-365") {
        background-color: @neutral-lighter-alt; 
    }
}
@{e-js}.e-nb .e-nb-listview.e-lv .e-list {
     & when (@skin= "material") {
         padding-left:24px;
     }
     & when (@skin= "office-365") {
         height:44px;
         padding: 0;
     }
}
@{e-js}.e-nb .e-nb-listview.e-lv .e-list .e-list-text{
     & when (@skin= "material") {
         padding-left:24px;
         color:fade(@base-font-color,87%);
     }
     & when (@skin= "office-365") {
         font-size: 14px;
         color: @theme-light-font;
     }

}
@{e-js}.e-lv .e-header {
      & when (@skin= "material") {
          box-shadow:0 1.83px 1px rgba(0, 0, 0, 0);
          }
}
@{e-js}.e-nb.e-nb-overlay {
     & when (@skin= "material") {
         background-color:#383838;
         opacity:0.5;
         }
    & when (@skin= "office-365") {
        background-color: @neutral-light-font-alt;
        opacity: 0.4;
    }
}
@{e-js}.e-nb .e-nb-listview.e-lv .e-list.e-margin .e-chevron-right_01 span {
     & when (@skin= "material") {
         top:5px;
     }
    & when (@skin= "office-365") {
        left: 8px;
        top: 6px;
    }
}
@{e-js}.e-nb .e-nb-listview.e-lv .e-list .e-list-img {
    & when (@skin= "material") {
        margin-top:-4px;
    }
    & when (@skin= "office-365") {
        padding-left: 12px;
        padding-top: 6px;
        font-size: 16px;
        height: 20px;
        width: 20px;
    }
}
@{e-js}.e-nb .e-nb-listview.e-lv.e-parentlv > .e-lv .e-list-container {
    & when (@skin= "office-365") {
        border: none;
    }
}
@{e-js}.e-nb-container .e-icon + .e-nb-listview .e-lv .e-list-hdr {
    & when (@skin= "office-365") {
        margin-top: 0;
    }
}
@{e-js}.e-nb .e-nb-listview.e-lv .e-list-hdr {
    & when (@skin= "office-365") {
        margin-top: 8px;
    }
}
@{e-js}.e-lv.e-navigation .e-header h2 {
    & when (@skin= "material") {
       padding-top:11px;
       padding-left:24px;
       color:@primary-font-color;
       font-size:20px;
    }
    & when (@skin= "office-365") {
        font-size: 17px;
        font-weight: 300;
        padding-left: 20px;
        color: @theme-primary-font;
    }
}
@{e-js}.e-lv.e-navigation .e-header > .e-icon:before {
    & when (@skin= "office-365") {
        color: @theme-primary-font;
        line-height: 15px;
        font-size: 20px;
        height: 14px;
    }
}
@{e-js}.e-lv.e-navigation .e-header .drawericon {
    & when (@skin= "material") {
        padding-top:10px;
    }
    & when (@skin= "office-365") {
        height: 44px;
        width: 44px;
        padding: 0;
    }
}
@{e-js}.e-lv.e-navigation .e-header .drawericon:before {
     & when (@skin= "material") {
         color:@primary-font-color;
     }
}
@{e-js}.e-lv.e-navigation>.e-header>.e-icon:hover:before{
    & when (@skin= "material") {
       color:@primary-font-color;
       opacity:1.5;
    }
}
 @{e-js}.e-lv.e-navigation .e-header {
     & when (@skin= "material") {
        background:@primary-color !important;
     }
     & when (@skin= "office-365") {
         padding: 0;
         height: 44px;
         box-shadow: none;
         border: none;
         background: @theme-primary;
     }
}
 @{e-js}.e-nb-listview .e-list-img.e-home, @{e-js}.e-nb-listview .e-list-img.e-profile, @{e-js}.e-nb-listview .e-list-img.e-people, @{e-js}.e-nb-listview .e-list-img.e-photo, @{e-js}.e-nb-listview .e-list-img.e-communities, @{e-js}.e-nb-listview .e-list-img.e-location {
    & when (@skin= "material") {
        color: fade(@base-font-color,54%);
    }
}
@{e-js}.e-nb .e-nb-listview.e-lv .e-list.e-margin .e-chevron-right_01 {
    & when (@skin= "material") {
        line-height: normal;
    }
}

/*------------------------------------- Tile View -------------------------------------------*/

@{e-js}.e-tile {
    color: @active-font-color;
     & when (@skin= "material") { 
         margin:2px;
         font-weight:400;
         font-family:@font-family;
     }
}

@{e-js}.e-tile .e-image-parent {
    .tile-bg-gradient;
}

@{e-js}.e-tile .e-image-parent {
    .material-tileview-bg-color;
    & when  (@skin= "office-365") {
        background-color: @theme-primary;
    }
}

@{e-js}.e-tile .e-tile-selected::after {
    border-top: 28px solid @cell-selection-stbg-color;
}

@{e-js}.e-tile .e-tile-selected {
    border: 2px solid @active-border-color;
}
.e-tile-wide {
     & when (@skin= "material") {
         width: 354px !important; 
         }
         
}
@{e-js}.e-tile-medium {
     & when (@skin= "material") {
         width: 175px !important; 
         }        
}
@{e-js}.e-tile-small {
     & when (@skin= "material") {
         width: 85.5px !important; 
         height: 73px !important;
         } 
}
.e-tile-group .e-tile-column {
     & when (@skin= "material") {
         max-width:358px;
         }    
}
@{e-js}.e-tile.e-js.e-tile-web:hover {
     & when (@skin= "material") {
        box-shadow:0px 3px 6px 0px rgba(0,0,0,0.26);
       }    
}
@{e-js}.e-tile.e-js.e-tile-web:hover .e-image-parent {
    & when (@skin= "material") {
       background-color: @material-tile-hover-color;
    }
    & when  (@skin= "office-365") {
        border: 2px @border-type @theme-darker;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
}
@{e-js}.e-tile-caption-text.e-caption-innerbottom::before {
   & when (@skin= "material") {
       margin-bottom: 16px;
       }
}
@{e-js}.e-tile-caption-text::before {
    & when (@skin= "material") {
        padding-left:12px;
        }
}
@{e-js}.e-tile.e-tile-web.e-tile-medium .e-image-parent .e-tile-image:not(.e-tile-imagefill), @{e-js}.e-tile.e-tile-web.e-tile-wide .e-image-parent .e-tile-image:not(.e-tile-imagefill) {
    & when (@skin= "material") {
       background-size:48px 48px;
    }
}
@{e-js}.e-tile-caption::before {
    & when (@skin= "material") {
      font-size:15px;
    }
    & when  (@skin= "office-365") {
        font-size: 14px;
        font-family: @font-family;
        color: @theme-primary-font;
    }
}
.e-tile-small-col-2 {
     & when (@skin= "material") {
        width:179px;
        height:154px;
        }
}
@{e-js}.e-tile.e-tile-small .e-image-parent .e-tile-image:not(.e-tile-imagefill) {
   & when (@skin= "material") {
       background-size:24px 24px;
   }
}
@{e-js}.e-tile.e-tile-imagefill .e-tile-overlay {
    & when (@skin= "material") {
        margin-top:75px;
        background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,0.49) 70%,rgba(0,0,0,0.7) 100%);
        background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,0.49) 70%,rgba(0,0,0,0.7) 100%);
        background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,0.49) 70%,rgba(0,0,0,0.7) 100%);
        background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,0.49) 70%,rgba(0,0,0,0.7) 100%);
        background:  linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,0.49) 70%,rgba(0,0,0,0.7) 100%);
    }
}


/*------------------------------------- Radial Slider -------------------------------------------*/
@{e-js}.e-radialslider .e-radial-needle {
    stroke: @active-bg-stcolor;
}

@{e-js}.e-radialslider .e-inner-circle {
    border-color: @active-bg-stcolor;
}

@{e-js}.e-radialslider .e-radialarcdefault {
    stroke: @active-bg-stcolor;
}

@{e-js}.e-radialslider .e-ticks-text, @{e-js}.e-radialslider .e-dynamic-text {
    fill: @default-font-color;
}

@{e-js}.e-radialslider .e-needle-over {
    stroke: @active-bg-stcolor;
}

/*------------------------------------- Signature -------------------------------------------*/


@{e-widget}.e-signature{

         background-color: @content-bg-color;
         border: 3px solid @active-bg-stcolor;
}
@{e-widget}.e-signature.e-disable {
    border-color:@disable-control-border-color;
}


/*------------SpellCheck themes -------------*/

@{e-widget}.e-spellcheck .e-sentencecontent .e-errorword {
    color: red;
}

@{e-widget}.e-spellcheck .e-sentence {
    border-color: @content-border-color;
    background-color: @content-bg-color;
}

@{e-widget}.e-spellcheck .e-suggestionlist {
    border-color: @content-border-color;
}

@{e-widget}.e-spellmenu {
    & when (@skin= "material") {
        fill: @widget-bg-color;
        border: @material-sshover-border-color !important;
    }
}

@{e-widget}.e-spellmenu .e-list:hover {
    & when (@skin= "material") {
        background-color: @grey-200 !important;
    }
}

@{e-widget}.e-spellmenu {
    & when (@skin= "material") {
        fill: @widget-bg-color;
        border: @material-sshover-border-color !important;
    }
}



/*------------------------------------- ComboBox -------------------------------------------*/

@{e-widget} .e-ddl-icon {
      & when (@skin= "material") {
  transform: rotate(0deg);
  transition: transform 300ms ease;
  }
}

@{e-widget} .e-ddl.e-input-group .e-ddl-hidden {
  border: 0;
  height: 0;
  visibility: hidden;
  width: 0;
}

@{e-widget} .e-input-group .e-input.e-placeholder {
	top: 0px;
	position: absolute;
	border:inherit;
	font-style: italic;
}

@{e-widget}.e-ddl.e-input-group .e-input-group-btn button:hover,
@{e-widget}.e-ddl.e-input-group .e-input-group-icon:hover,
@{e-widget}.e-ddl.e-input-group .e-input-group-btn button:active,
@{e-widget}.e-ddl.e-input-group .e-input-group-icon:active {
    & when (@skin= "material") {
         background: white;
  }
  }

  @{e-widget}.e-input-group::before {
    & when (@skin= "material") {
  left: 50%;
  }
}

@{e-widget}.e-input-group::before,
@{e-widget}.e-input-group::after {
    & when (@skin= "material") {
    background: @accent-color;
    }
  }

  @{e-widget}.e-input-group.e-input-focus::before,
  @{e-widget}.e-input-group.e-input-focus::after {
    & when (@skin= "material") {
  width: 50%;
  }
}

@{e-widget}.e-input-group::after {
    & when (@skin= "material") {
  right: 50%;
  }
}

@{e-widget}.e-input-group::before,
@{e-widget}.e-input-group::after {
        & when (@skin= "material") {
  bottom: -2px;
  content: '';
  height: 2px;
  position: absolute;
  transition: 0.2s cubic-bezier(0.4, 0, 0.4, 1);
  width: 0;
  z-index: 10;
  }
}

@{e-widget}.e-icon-anim .e-ddl-icon {
    & when (@skin= "material") {
  transform: rotate(180deg);
  transition: transform 300ms ease;
  }
}

@{e-widget}.e-input-group .e-ddl-icon:hover {
    & when (@skin= "material") {
  background: transparent;
  }
}

@{e-widget}.e-input-group:not(.e-disabled) .e-ddl-icon:active {
    & when (@skin= "material") {
  background: transparent;
  }
}

@{e-widget} input.e-combobox.e-input::selection {
    & when (@skin= "material") {
		background: @accent-color;
        color: @accent-font-color;
	}

		& when (@skin= "office-365") {
			background: @theme-primary;
            color: @neutral-white;
		}
}

@{e-widget} input.e-combobox.e-input::-moz-selection {
    & when (@skin= "material") {
        background: @accent-color;
        color: @accent-font-color;
    }
    & when (@skin= "office-365") {
        background: @theme-primary;
        color: @neutral-white;
    }
}

@{e-widget}.e-input-group .e-ddl-icon:not(:active)::after {
     & when (@skin= "material") {
  animation: none;
  }
}

@{e-widget} .e-dropdownbase.e-content {
    background: @content-bg-color;
    color: @content-font-color;
  }

  @{e-widget} .e-list-item.e-hover {
    background: @hover-bg-stcolor;
    color: @hover-font-color;
  }
  
  @{e-widget} input.e-combobox.e-input {
    border: @border-size @border-type;
    font-family: @font-family;
    font-size: @content-font-size;
  }

  @{e-widget}  .e-combobox.e-input[disabled],
  @{e-widget}.e-ddl.e-input-group.e-disabled {
    border-style: @border-type;
  }

  @{e-widget}.e-ddl.e-input-group.e-disabled {
    border-bottom-style: @border-type;
  }

  @{e-widget}.e-ddl.e-input-group .e-input-group-btn button {
    font-family: @font-family;
    font-size: @content-font-size;
  }

  @{e-widget}.e-ddl.e-input-group.e-disabled {
    border-style: @border-type;
  }

  @{e-widget}.e-ddl.e-input-group .e-clear-icon {
    color: @default-icon-color;
  }
 
  @{e-widget} input.e-combobox.e-input,
  @{e-widget} textarea.e-combobox.e-input {
    background: @content-bg-color;
    border-color: @content-border-color;
    color:@content-font-color;
  }

  @{e-widget}.e-ddl.e-input-group {
    background: @content-bg-color;
  }

  @{e-widget}.e-ddl.e-input-group .e-input-group-icon {
    & when (@skin= "material") {
        /*material*/
        background-color: @content-bg-color;
        color: fade(@base-font-color,87%);
        border: none;
    }

    & when not (@skin= "material")  {
         & when (@skin= "office-365") {
        /*office*/
        background: @content-bg-color;
     }
     & when not (@skin= "office-365") {
        /*other*/
        .bs-default-gradient();
        color: @default-icon-color;
        border-color: @content-border-color;
     }
    }
  }
  
  @{e-widget}.e-ddl.e-input-group:not(.e-rtl) .e-input-group-icon {
    & when not (@skin= "material")  {
     & when not (@skin= "office-365") {
		border-left: 1px solid @content-border-color;
     }
    }
  }

  @{e-widget}.e-ddl.e-input-group.e-rtl .e-input-group-icon {
      & when (@skin= "material") { 
        border: none;
    } 
    & when not (@skin= "material")  { 
		    border-right: 1px solid @content-border-color; 
    }
  }
  @{e-widget} .e-combobox.e-input[disabled] {
    background: 0px;
  }

  @{e-widget} .e-combobox.e-input[readonly] {
    background: @content-bg-color;
 }

 @{e-widget}.e-ddl.e-input-group .e-input-group-btn button {
    background: @content-bg-color;
    border-color: @content-border-color;
    color: @default-icon-color;
  }

  @{e-widget}.e-ddl.e-input-group .e-input-group-btn button:hover,
  @{e-widget}.e-ddl.e-input-group .e-input-group-icon:hover {
    & when not (@skin= "material") {
    background: @hover-bg-stcolor;
    }
  }

 
  @{e-widget}.e-ddl.e-input-group:not(.e-disabled) .e-input-group-btn:active button,
  @{e-widget}.e-ddl.e-input-group:not(.e-disabled) .e-input-group-icon:active,
  input.e-combobox.e-input::selection {
    & when not (@skin= "material") {
    background: @active-bg-stcolor;
    color: @active-font-color;
    }
  }
 
  @{e-widget} input.e-combobox.e-input::-webkit-input-placeholder,
  @{e-widget} input.e-combobox.e-input:-moz-placeholder,
  @{e-widget} input.e-combobox.e-input::-moz-placeholder,
  @{e-widget} input.e-combobox.e-input:-ms-input-placeholder {
    color: @header-border-color;
  }


  @{e-widget}.e-ddl.e-input-group {
    border-bottom-color: @content-border-color;
   }


   @{e-widget}.e-ddl.e-input-group .e-ddl-icon:before {
    & when (@skin= "material") {
            content: "\e666";
    }
    & when (@skin= "office-365") {
            content: "\e804";
    }
    & when not (@skin= "material") {
       & when not (@skin="office-365") {
            content: "\e63b";
       }
        }
    width: 14px;
    height: 14px;
    display: block;
    margin: 0 auto;
  }


  @{e-widget}.e-input-group.e-ddl {
    & when (@skin= "office-365") { 
            height: 32px;
        }
         & when not (@skin= "office-365") {
            height:30px;
        }
  }

  @{e-widget}.e-ddl.e-popup {
    border: 1px solid @default-border-color;
    position: absolute;
      & .e-input-group {
        margin-bottom: 0;
     }
  }


  @{e-widget}.e-ddl.e-popup {
    border-color: @default-border-color;
  }

  @{e-widget} .e-dropdownbase.e-nodata {
    font-family: @font-family;
    font-size: 16px;
  }

  // theme
  @{e-widget} .e-dropdownbase {
    border-color: @default-border-color;
      & .e-list-item {
         & when (@skin= "material") { 
        color: fade(@base-font-color,87%);
    } 
    & when not (@skin= "material") {
        & when (@skin= "office-365") {
			color: @neutral-primary; 
        }
		& when not (@skin= "office-365") {
			color: @content-font-color;
		}
    }
        background-color: @content-bg-color;
        border-bottom: @border-size;
        border-color: @default-gradient-color;
        color: @default-font-color;
        font-family: @font-family;
        font-size: @content-font-size;
        line-height: 2.4em;
        text-indent: 1.067em;
      }

      & .e-list-group-item,
      .e-fixed-head {
        background-color:@content-bg-color;
        border-color: @content-bg-color;
        & when (@skin= "material") { 
            color: fade(@base-font-color,87%);
          } 
        & when not (@skin= "material") {
        & when (@skin= "office-365") {
			      color: @neutral-primary; 
          }
		    & when not (@skin= "office-365") {
			    color: @content-font-color;
		      }
        }
        font-family: @font-family;
        font-size: @content-font-size;
        font-weight: 600;
        line-height: 2.4em;
        padding-left: 1.067em;
      }
	  
	  & .e-list-item.e-active.e-hover {
		& when (@skin= "office-365") {
		background: @theme-lighter;
		}
		& when (@skin= "material") {
        /*material*/
        background-color: @grey-200;
        color: @accent-color; 
		}
    }
    
      & .e-list-item.e-hover {
        & when (@skin= "material") {
        /*material*/
       background: @grey-200;
       color:  fade(@base-font-color,87%);  
    }

    & when not (@skin= "material") {
        /*other*/
        & when (@skin= "office-365") {
			/*office-365*/
			background: @neutral-lighter;
			color: @theme-light-font;
		}
		& when not (@skin= "office-365") {
			.hover-gradient();
			color: @hover-font-color;
      border-color: @hover-border-color;
		}
    }
        
      }

        & .e-list-item.e-active {
		& when (@skin= "material") {
			/*material*/
			background-color: @content-bg-color;
			color: @accent-color; 
		}
		& when not (@skin= "material")  {
		/*other*/ 
			& when (@skin= "office-365") {
				/*office-365*/ 
				background-color: @theme-lighter;
				color: @theme-light-font;
			}
			& when not (@skin= "office-365") {
				.active-gradient();
				color: @active-font-color;
			}
		}
       }

      & .e-list-item:last-child {
        border-bottom: 0;
      }

      & .e-list-item.e-item-focus {
        background-color: @hover-bg-stcolor;
      }
  }


  @{e-widget}.e-ddl.e-input-group input.e-combobox.e-input ,
  @{e-widget}.e-ddl.e-input-group.e-input-focus .e-combobox.e-input:focus {
    border-color: @content-border-color;
  }

  @{e-widget}.e-ddl.e-input-group.e-input-focus {
    & when (@skin= "office-365") {
       border-color:@theme-primary !important;
    }
    & when not (@skin= "material") { 
      & when not (@skin="office-365") {
       box-shadow: 0 0 @shadow-bg-size @bs-shadow-bg-color;
       .material-normal-box-shadow;
       .focus-border-color();
    }
    }
   }

   @{e-widget}.e-ddl.e-input-group.e-input-focus .e-combobox.e-input:first-child:focus,
   @{e-widget}.e-ddl.e-input-group.e-input-focus.e-rtl span:last-child.e-input-group-icon,
   @{e-widget}.e-ddl.e-input-group.e-input-focus.e-rtl span:last-child button {
    border-color: transparent @content-border-color transparent transparent;
  }

  @{e-widget}.e-ddl.e-input-group.e-input-focus.e-rtl span.e-input-group-icon,
  @{e-widget}.e-ddl.e-input-group.e-input-focus span button,
  @{e-widget}.e-ddl.e-input-group.e-input-focus.e-rtl span:first-child.e-input-group-icon,
  @{e-widget}.e-ddl.e-input-group.e-input-focus.e-rtl span:first-child button,
  @{e-widget}.e-input-focus.e-rtl .e-combobox.e-input:first-child:focus,
  @{e-widget}.e-input-focus .e-combobox.e-input:last-child:focus,
  @{e-widget}.e-ddl.e-input-group.e-input-focus span.e-input-group-icon,
  @{e-widget}.e-ddl.e-input-group.e-input-focus span button {
    border-color:  transparent transparent transparent @content-border-color;
   }

   @{e-widget}.e-ddl.e-input-group {
    border: @border-size @border-type;
    border-color: @content-border-color;
     & when (@skin= "material") {
    border-width: 0 0 1px 0;
    }
    & when not (@skin= "material") {
    border-width: 1px;
    }
  }

  @{e-widget} .e-input-group-btn:not(:last-child) button,
  @{e-widget}.e-ddl.e-input-group .e-input-group-icon:not(:last-child) {
    & when (@skin= "material") {
            border-left-width: 0px;
        }
        & when (@skin= "office-365") {
            border-left-width: 0px;
        }

        & when not (@skin= "material") {
             border-left: 1px @border-type;
            border-left-width: 1px;
             border-color: @content-border-color;
        }
    
  }

  @{e-widget}.e-ddl.e-input-group .e-input-group-icon,
  @{e-widget}.e-ddl.e-input-group .e-input-group-btn button {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: @content-font-size;
    padding: 7px;  
    & when (@skin= "bootstrap") {
        border-radius: 0px 4px 4px 0px;          
    }
  }
  @{e-widget}.e-ddl.e-rtl.e-input-group .e-input-group-icon,
  @{e-widget}.e-ddl.e-rtl.e-input-group .e-input-group-btn button {
    & when (@skin= "bootstrap") {
        border-radius: 4px 0px 0px 4px;          
    }
  }

  @{e-widget}.e-ddl {
    .e-input-value,
    .e-input-value:focus {
      font-family: @font-family;
      font-size: @content-font-size;
      height:auto;
      line-height: 1.4;
      margin: 0px;
      outline: none;
      padding: 2px 0;
      width: 100%;
    }
  }
  
  @{e-widget}.e-input-group.e-ddl .e-comboie8.e-comboie.e-ddl-icon{
	& when not (@skin= "material")  {
     & when not (@skin= "office-365") {
		border-left-width: 1px;
		border-left-style:solid;
		border-left-color: @content-border-color;
     }
    } 
  }

  /*------------------------------------- End ComboBox -------------------------------------------*/