js-pkg/Content/ej/web/office-365/ej.theme.less

Npm package of Syncfusion.JavaScript.

@skin: "office-365";

@theme-darker: #004578;
@theme-dark: #005a9e;
@theme-dark-alt: #106ebe;
@theme-primary: #0078d7;
@theme-secondary: #2b88d8;
@theme-tertiary: #71afe5;
@theme-light: #c7e0f4;
@theme-lighter: #deecf9;
@theme-lighter-alt: #eff6fc;

@theme-dark-font: #ffffff;
@theme-primary-font: #ffffff;
@theme-light-font: #333333;

@neutral-dark: #212121;
@neutral-primary: #333333;
@neutral-secondary: #666666;
@neutral-secondary-alt: #767676;
@neutral-tertiary: #a6a6a6;
@neutral-tertiary-alt: #c8c8c8;
@neutral-quaternary: #d0d0d0;
@neutral-quaternary-alt: #dadada;
@neutral-light: #eaeaea;
@neutral-lighter: #f4f4f4;
@neutral-lighter-alt: #f8f8f8;
@neutral-white: #ffffff;

@neutral-dark-font: #ffffff;
@neutral-light-font: #333333;
@neutral-light-font-alt: #000000;

@alert-bg-color: #deecf9;
@error-bg-color: #fde7e9;
@success-bg-color: #dff6dd;
@info-bg-color: #f4f4f4;
@warning-bg-color: #fff4ce;
@alert-color: #d83b01;
@error-color: #a80000;
@success-color: #107c10;

@black-translucent-40: rgba(0,0,0,4);
@white-translucent-40: rgba(255,255,255,4);

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

@disable-control-background-color: #f4f4f4;
@disable-control-border-color: #f4f4f4;
@disable-icon-bg-color: #f4f4f4;

@header-bg-stcolor: @neutral-white;
@header-bg-endcolor: @neutral-white;
@header-gradient-color: none;
@header-border-color: @neutral-tertiary-alt;
@header-font-color: @neutral-dark;
@header-icon-color: @neutral-secondary;
@filtermenu-color: @neutral-tertiary-alt;

@tooltip-line-height: 18px;

@content-bg-color: @neutral-white;
@content-border-color: @neutral-tertiary-alt;
@content-font-color: @neutral-dark;

@default-bg-stcolor: @neutral-lighter;
@default-bg-endcolor: @neutral-lighter;
@default-gradient-color: none;
@default-border-color: @neutral-tertiary-alt;
@default-font-color: @neutral-dark;
@default-icon-color: @neutral-secondary;

@hover-bg-stcolor: @neutral-light;
@hover-bg-endcolor: @neutral-light;
@hover-gradient-color: none;
@hover-border-color: @neutral-tertiary-alt;
@hover-font-color: @neutral-dark;
@hover-icon-color: @neutral-secondary;
@toggle-hover-font-color: @active-bg-stcolor;
@toggle-content-font-color: @content-font-color;

@active-bg-stcolor: @theme-primary;
@active-bg-endcolor: @theme-primary;
@active-gradient-color: none;
@active-border-color: @theme-primary;
@active-font-color: @theme-primary-font;
@active-icon-color: @theme-primary-font;

@warning-color: #ffca1c;
@information-color: #489bd5;

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

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

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

/*-----------------------HeatMap Definition-----------------*/
@hmp-border-color: #c8c8c8;

@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: @neutral-light;
@gcaption-border-radius: 0px;

@row-hover-color: @hover-bg-stcolor;
@row-hover-font-color: @hover-font-color;
@row-border-color: @neutral-light;
@row-border-coloropac: rgba(196,196,196,0.5);
@row-selection-bg-color: @active-bg-stcolor;
@row-selection-font-color: @active-font-color;
@cell-selection-stbg-color: darken(@active-bg-stcolor, 7%);
@cell-selection-endbg-color: darken(@active-bg-endcolor, 7%);
@column-selection-bg-color: @default-bg-stcolor;
@alt-row-bg-color: darken(@content-bg-color, 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: #1C6DA3;

@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( spin( @default-font-color, 240deg ), 1% ), 62% );
@watermark-font-weight: lighter;
@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: #ffffff;

@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: #67C1B2;
@gantt-chart-manual-child-progressbar-endbg-color: #67C1B2;
@gantt-chart-manual-child-progressbar-gradient-color: none;
@gantt-chart-manual-child-taskbar-color: #8DD1C4;
@gantt-chart-manual-child-taskbar-border-color: #4FB29F;

@schedule-app-stbg-color: @theme-primary;
@schedule-app-endbg-color: @theme-primary;
@schedule-app-border-color: lighten(@theme-primary, 10%);
@schedule-select-bg-color: @neutral-lighter;
@schedule-active-border-size: @border-size;
@schedule-header-border-color: @neutral-tertiary-alt;
@schedule-cells-bg-color: @neutral-lighter-alt;

@grid-uisupport-background-color: #BBBDC0;
@grid-uisupport-number-color: #FFFFFF;
@grid-focusout: #A5A5A5;

@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-parent-taskbar-color: @content-font-color;
@gantt-row-selection-bg-color: fadeout(@active-bg-stcolor,80%);
@gantt-header-bg-color: @header-bg-stcolor;
@gantt-header-stbg-color: @header-bg-stcolor;
@gantt-header-endbg-color: @header-bg-endcolor;
@gantt-milestone-bg-color: @neutral-dark;
@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: @neutral-secondary-alt;
@gantt-child-progress-bg-color: @active-bg-stcolor;
@gantt-child-task-bg-color: @theme-tertiary;
@gantt-parent-progress-stbg-color: @content-font-color;
@gantt-parent-progress-enbg-color: @content-font-color;
@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: @theme-light-font;
@gantt-menuitem-hover-font-color: @neutral-light-font;
@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: @neutral-quaternary;

@gantt-editDialog-font-color: @theme-light-font;
@gantt-content-font-color: @theme-light-font;
@gantt-selection-font-color: @theme-light-font;
@gantt-header-font-color: @neutral-secondary;
@gantt-schedule-font-color: @theme-light-font;
@gantt-toolbar-font-color: @content-font-color;
@gantt-tooltip-font-color: @content-font-color;

@treegrid-detailcellwrapper-background-color: @neutral-white;
@treegrid-detailcellwrapper-font-color: @neutral-primary;
@treegrid-detailcellwrapperfly-border-color: @neutral-light;
@treegrid-detailcellwrapperfly-shadow-color: @neutral-light;
@treegrid-detailicon-shadow-color: darken(@neutral-white,11%);
@filtermenudialog-color: @filtermenu-color;


@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: @neutral-tertiary-alt; /*@neutral-light;*/

@treegrid-summaryrow-backgroundcolor: lighten(@default-bg-stcolor, 4%);
@treegrid-totalsummaryrow-backgroundcolor: lighten(@default-bg-stcolor, 4%);
@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;
@tab-background-color: @content-bg-color;
.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;
    background-color: @scroll-handle-color;
}

.scroller-hover-gradient() {
    background-image: @hover-grid-image;
    background-color: @scroll-handle-hover-color;
}

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

.schedule-app-color() {
    background: @schedule-app-stbg-color; /* Old browsers */
    background: -moz-linear-gradient(top, 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;
}

.treegrid-hover-gradient() {
   background: @neutral-lighter;
}

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

.tgheader-gradient() {
    .header-gradient();
}
.ganttheader-gradient() {
    .header-gradient();
}
.hover-gradientfunction() {
    background: @rv-documentMappopup-bg-color; /* Old browsers */
}

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

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

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

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

.header-hover-gradient() {
    .hover-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: none;
    .custom-gradient(@temp-gradient, @gantt-parent-progress-stbg-color, @gantt-parent-progress-enbg-color, 0%, 0% );
}

.gantt-child-progress-background() {
  background: @theme-primary;
}

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

@colorpicker-image: url(../common-images/colorpicker_light.png);
@colorpicker-bg-color: @content-bg-color;
@colorpicker-border-color: #c8c8c8;
@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);

@ratingresetimage: url(images/Rating_Clear.png);
@ratingactiveimage: url(images/Rating_Active.png);
@ratingnormalimage: url(images/Rating_Default.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);

/*-----------------------Map------------------*/

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

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

.pdfviewer-searchtoolbar-border-color() {
    background-color: @content-bg-color;
    box-shadow: none;
}
.pdfviewer-toolbar-border-color() {
    background-color: @content-bg-color;
    box-shadow: none;
}
.pdfviewer-toolbar-border-color-hover(){}
.pdfviewer-viewercontainer-border-color(){}
.pdfviewer-viewercontainer-bgcolor() {
    @default-bg-stcolor: darken(@default-bg-endcolor, 1%);
}
/*-----------------------End PdfViewer------------------*/

/*-----------------------OLAP Definition-----------------*/
@table-font: 12px @font-family

!important; @pivotList-treeview-text-hvr-color:@active-font-color; @pivotList-dialog-close-hvr-color:@active-bg-stcolor; @pivotList-treeview-active-color:darken( desaturate( @active-bg-stcolor, 11 ), 2 ); @ogrid-dialog-bgcolor:darken( desaturate( @active-bg-stcolor, 4 ), 1 ); @pivotList-treeview-text:@default-font-color; @pivotList-treeview-hvr-color:@active-bg-stcolor; @ogrid-header-border-color:@content-border-color; @ogaugeTooltip-border-color:@content-border-color; @toolTipText-color:@content-font-color; @toolTip-bg-color:@default-bg-stcolor; @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: saturate( @active-bg-stcolor, 1 ); @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/olapkpi/up-arrow.png"); @kpi-rightarrow-img: url("../common-images/olapkpi/right-arrow.png"); @kpi-downarrow-img: url("../common-images/olapkpi/down-arrow.png"); @kpi-diamond-img: url("../common-images/olapkpi/diamond.png"); @kpi-triangle-img: url("../common-images/olapkpi/triangle.png"); @kpi-circle-img: url("../common-images/olapkpi/circle.png"); @kpi-red-img: url("../common-images/olapkpi/red.png"); @kpi-green-img: url("../common-images/olapkpi/green.png"); @kpi-all-img: url("../common-images/olapkpi/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; @pivot-selection-background:@hover-bg-stcolor; @pivot-selection-border:@default-border-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:@active-bg-stcolor; @oclient-ddl-color:@default-font-color; @oclient-ddl-bgcolor:@content-bg-color; @oclient-ddl-bcolor:@content-border-color; @oclient-ddl-hcolor:@hover-font-color; @oclient-ddl-hbgcolor:@hover-bg-stcolor; @oclient-icons-hover-bg: @hover-bg-stcolor; @toolbar-bgcolor:@default-bg-stcolor; @toolbar-icons-hvrcolor:@hover-icon-color; @fullscreen-bg-color:@content-bg-color; @maxview-bg-color:@content-bg-color; @groupingBar-bg-color:@active-bg-stcolor;
.groupingBar-btn-color() {
    color: @default-icon-color;
    border-color: @content-border-color;
}

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

.ogridheader-hvr-gradient() {
    background: @hover-bg-stcolor;
}

.oclientDialog-setcolor() {
    color: @default-font-color;
    background: @default-bg-stcolor;
}

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

.oclient-header-color() {
    color: @hover-font-color;
    background-color: @hover-bg-stcolor;
}

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

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

.scrollPane-setcolor() {
    background-color: @neutral-white;
}

.scrollThumb-setcolor() {
    background-color: @neutral-light;
}

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

.pageIndicator-setcolor() {
    background-color: @neutral-lighter;
    border: 1px solid @neutral-secondary-alt;
    color:@theme-light-font;
}

.scrollThumb-hovercolor() {
    background-color: @theme-light-font;
}


.chartTypesDialog-setcolor() {
    background-color: @default-bg-stcolor;
    border: 2px solid @content-border-color;
}
/*-----------------------OLAP Definition End-----------------*/

/*----------------------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: 13px;
@rv-viewerblockcellcontent-font-size: 13px;

@rv-viewerblock-bg-color: @neutral-light;
@rv-pageviewcontainer-bg-color: @neutral-quaternary-alt;
@rv-documentMappopup-bg-color: #EBEBEB;

@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------------------*/
/*-----------------------SymbolPalette Definition-----------------*/
@sp-outline:transparent none 0px; @sp-item-hover-color:#eaeaea; @sp-noborder:0px solid transparent; @sp-header-font-size:14px; @sp-header-border-radius:0px;
/*-----------------------Diagram Definition-----------------*/
@dg-contextmenu:url("../common-images/diagram_context.png");@dg-contextmenu-hover:url("../common-images/diagram_context.png");
@dg-ruler-overlap-bg: #D8D8D8;
@dg-ruler-space-bg: #EdEdEd;
@dg-ruler-tick: #aaaaaa;
@dg-ruler-label: #7c7c7c;
/*-----------------------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() {
    border-color: @active-bg-stcolor;
}

.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-menu-font-hover-color: @active-bg-stcolor;
@rbnbackstage-item-select-color: @active-font-color;
@rbnbackstage-item-hover-color: @hover-font-color;
@rbn-border-color: @default-border-color;
@rbnapptab-font-color: @active-bg-stcolor;
@rbn-bg-color: @active-bg-stcolor;
@rbn-act-color: none;
@rbn-act-a-border-color: @default-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: @header-font-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: darken(@active-bg-stcolor, 15%);
@rbnbackstage-end-hover-color: darken(@active-bg-endcolor, 15%);
@rbnbackstage-normal-color: @active-bg-stcolor;
@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, 18%);
@rbntoggle-end-color: lighten(@active-bg-endcolor, 18%);
@rbnhover-font-color: @hover-font-color;
.ribbon-toggle-gradient(){
  .custom-gradient(@active-gradient-color,@rbntoggle-start-color, @rbntoggle-end-color, 18%, 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(){}
.ribbon-app-hover-gradient(){
     background:none;
	 @rbn-menu-font-hover-color:@active-bg-stcolor !important;
}
.office-ribbon-file-hover(){
 background:@theme-dark;
}
.ribbon-shadow(){   
}
.ribbon-app-tab-font(){
  color: @active-font-color;
}
/*----------------------Ribbon 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-cell-bg(){
	.custom-gradient(@default-gradient-color, darken(@content-bg-color,4%), @content-bg-color, 0%, 0%);
}
.kanban-dragclone-bg(){
    .custom-gradient(@active-gradient-color, lighten(@active-bg-stcolor, 47.8%), @active-bg-endcolor, 0%, 0%);
}
.kanban-skheader-bg(){
	.custom-gradient(@default-gradient-color, lighten(@default-bg-stcolor, 1%), @default-bg-endcolor, 0%, 0%);
}
.kanban-header-font(){
     color:@active-bg-stcolor;
}
.kanban-targetdrag-font(){
	.default-gradient();
}
/*----------------------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: @hover-bg-stcolor;
@ssheader-hover-bordercolor: @hover-border-color;
@sscontent-border-color: @content-border-color;
@ssfroze-highlight-color: @active-bg-stcolor;
@sschart-darktheme-bgcolor: darken( @content-font-color, 13% );
@ssdrpdwnbrdr: darken( @header-border-color, 7% );
@ssselectall: lighten(@active-bg-stcolor, 40%);
@ssselectallhover: lighten(@active-bg-stcolor, 20%);
@ssselectselected: lighten( desaturate( @active-bg-stcolor, 17% ), 14% );
@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, 18%);
@ssbtntgle-end-color: lighten(@active-bg-stcolor, 18%);
@ss-chartmenu-bgcolor: @content-bg-color;
@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, 18%, 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;
@ssheader-hover-bgcolor: @theme-lighter;
@ssheader-hover-fontcolor:@theme-light-font;
@sscontent-selection-bgcolor:@neutral-quaternary-alt;
@sschart-select-color:@theme-tertiary;
@ssdlgbtn-dark-font:@theme-dark-font;
@ssactive-border-color:@active-border-color;
@ssdlgbtn-dark-bg:@theme-dark;
@sshover-border-color:@neutral-secondary-alt;
@ssactive-buttonbg-color:@theme-light;
/*----------------------Spreadsheet End-----------------------*/
/*----------------------Office 365 theme-----------------------*/
.border-selection() {
    border: none;
}
.colorpicker-color-selection() {
    @colorpicker-button-border-color: @content-border-color;
}
.colorpicker-boxshadow-selection() {
    box-shadow: none;
}

/*----------------------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--------------------*/



/*----------------------High-Contrast-01 & High-Contrast-02 theme-----------------------*/
.colorpickericon-color-selection() {
}
/*----------------------material theme-----------------------*/
.material-stylefor-bordertop(){}
.material-stylefor-fileexplorer() {
    border-bottom: @border-size @border-type @header-border-color;
}

.material-stylefor-button(){}
.material-stylefor-datepicker(){} 
.material-stylefor-borderradius(){}

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

.switch-animate-icon-color() {}

.tab-header-background() {
    background: @default-bg-stcolor;
}

.switch-grid-header-icon() {
    
}

.switch-datepick-header-hover() {
    @header-font-color: @hover-font-color;
}

.switch-datepick-header-text() {
    @hover-font-color: @header-font-color;
}

.switch-datetimepick-button-text() {
    @content-font-color: @default-font-color;
}

.switch-colorpicker-grpbtn-text() {
    @default-font-color: @content-font-color;
}

.switch-splitter-divder-hover() {
    @hover-border-color: @active-border-color;
}

.switch-schedule-appointment-btn() {
    @active-bg-stcolor: @theme-primary;
}

.switch-schedule-header-color() {
    @schedule-header-border-color: @neutral-tertiary-alt;
    @header-border-color: @neutral-tertiary-alt;
    @content-border-color: @neutral-tertiary-alt;
    @header-bg-stcolor: @neutral-white;
    @header-font-color: @neutral-secondary;
}

.switch-pivotgrid-draggale-button() {
    @default-font-color: @default-icon-color;
}

.switch-pivotgrid-groupingBar-btn-color() {
    @default-icon-color: @default-font-color;
}

.switch-pivotgrid-btn-hover() {
    @active-font-color: @hover-border-color;
}

.switch-pivotclient-icon-hover() {
    color: @hover-icon-color;
}

.switch-pivotclient-treeview-icon-hover-active() {
    color: inherit;
}

.switch-checkbox-icontick() {
    @active-bg-stcolor: @content-font-color;
}

.switch-ribbon-file-header-txt-color() {
    @rbn-white-color: @default-font-color;
}

.switch-file-explorer-context-icon-color() {
    @hover-font-color: @hover-icon-color;
}

.switch-rte-active-icon-color() {
    @active-font-color: @active-icon-color;
}

.switch-rte-context-icon-color() {
    @hover-font-color: @hover-icon-color;
}

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

.high-contrast-groupbtn-border() {
    @hover-border-color: @default-border-color;
}
.switch-themes-groupbtn-border-color() {
    @hover-gbtn-border-color: @hover-border-color;
}
.high-contrast-gantt-toolbar-icon-border() {
    @hover-border-color: transparent;
}
.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() {
    border:1px solid @neutral-secondary-alt;
}
.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(){}
.high-contrast-stylefor-daterange(){}
/*---------------- Office-365 ----------------*/

.office-grid-footer-bg-color() {
    @gcaption-border-color: lighten(@content-bg-color, 4%);
}

.office-grid-footer-border-color() {
    @default-border-color: @content-border-color;
}

.office-grid-pager-bg-color() {
    @pager-default-bg-color: @content-bg-color;
}

.office-grid-pager-hover-color() {
    background-color: @content-border-color;
}

.office-button-bg-color() {
    background: @content-bg-color;
}

.office-silder-handle-bg-color() {
    @default-bg-stcolor: @content-bg-color;
}

.office-silder-handle-border-color() {
    @default-border-color: @content-border-color;
}

.office-silder-handle-hover-border-color() {
    @hover-border-color: @content-border-color;
}

.office-acrd-header-bg-color() {
    background: @content-bg-color;
}

.office-acrd-header-border-color() {
    @default-border-color: @content-border-color;
}

.office-tab-headerborder() {
    @content-border-color: none;
}

.office-tab-header-normal-font() {
    @content-font-color: @default-font-color;
}

.office-colorpick-popup-bg-color() {
    @colorpicker-popup-bg-color: @content-bg-color;
}

.office-colorpick-popup-border-color() {
    @colorpicker-popup-boder-color: @content-border-color;
}

.office-rotator-pager-hover-border() {
    @hover-border-color: @content-font-color;
}

.office-ribbon-header-bg-color() {
    background: @default-bg-stcolor;
}

.office-ribbon-header-border() {
    @header-border-color: none;
}

.office-ribbon-header-font-color() {
    @rbncontent-font-color: @default-font-color;
}

.office-ribbon-file-header() {
    background: @theme-primary;
}

.office-pivotclient-toolbar-bg-color() {
    @toolbar-bgcolor: @content-bg-color;
}

.office-checkbox-bordercolor() {
    @content-border-color: @content-font-color;
}

.office-file-explorer-toolbar-bg-color {
    background: @content-bg-color;
}

.office-file-explorer-toolbar-border-color() {
    @default-border-color: @content-border-color;
}

.office-rte-toolbar-color() {
    @default-border-color: @content-border-color;
}

.office-split-menu-color() {
    @default-bg-stcolor: @content-bg-color;
    @default-font-color: @content-font-color;
    @default-border-color: @content-border-color;
}

.office-tab-header-bg-color {
    background: @content-bg-color;
}

.office-radio-iconcircle() {
    @active-bg-stcolor: @content-font-color;
}

.office-radio-bordercolor() {
    @content-border-color: @content-font-color;
}

.office-dialog-active-line-color() {
    @tools-border-radius: @border-size;
    @active-bg-stcolor: @header-border-color;
}
.office-tab-header-hover-font() {
    @hover-font-color: @active-bg-stcolor;
}
.office-file-explorer-splitbtn-bg-color() {
    background: @content-bg-color;
}
.office-ddl-checkbox-bordercolor() {
    @content-border-color: @content-font-color;
}
.office-toolbar-bg-color() {
    @default-bg-stcolor: @neutral-white;
}
.office-rte-splitbtn-bg-color() {
    @default-bg-stcolor: @content-bg-color;
}
.office-upload-btn-hover-color() {
    @default-bg-stcolor: @hover-bg-stcolor;
}
.office-tab-header-bghover-color {
    @hover-bg-stcolor: @active-font-color;
}
.office-upload-button-border() {
    border: 1px solid @default-border-color;
}
.office-tab-border-left-right() {
    border: 1px solid @default-border-color;
}
.office-pivot-treeview-hover-border() {
    border: 1px solid @hover-border-color;
}
.office-pivot-button-active() {
    .active-gradient();
}
.office-pivot-groupingBar-button-active() {
    .active-gradient();
    color: @active-font-color;
}

.office-pivot-treeview-active-color() {
    color: @active-font-color;
}

.office-pivot-button-border() {
    border: none;
}
.office-pivot-dialog-icon-hover() {
    .hover-gradient();
}
/*------------------ material theme ---------------------*/
.material-tab-border() {
    border-bottom: transparent;
}
.material-tab-borderbottom() {
    border-top: 3px solid transparent;
}
.material-tab-right-border() {
    border-left: transparent;
}
.material-tab-right-bottom-border() {
    border-right: transparent;
}
.material-tab-left-border() {
    border-right: transparent;
}
.material-tab-left-bottom-border() {
    border-left: transparent;
}
.material-tab-bottom-border() {
    border-top: transparent;
}
.material-tab-bottom-border-bottom() {
    border-bottom: transparent;
}
.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: none;
}
.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-upload-dialog-bg-color(){}
.material-headerStylefor-datepicker() {
    background-color: fadeout(lighten(@header-bg-stcolor, 40%),50%);
}

.material-dateDimension-datepicker() {
    height: 30px;
    position: relative;
    z-index: 1;
    padding-top: 5px;
}

.material-timeDimension-datepicker() {
    height: 35px;
}

.material-dateCircle-datepicker() {
    border-radius: 50%;
}

.material-monthDimension-datepicker() {
    height: 58px;
    position: relative;
    z-index: 1;
}

.material-tab-padding-bottom() {
    padding-bottom: 0px;
}

.material-tab-border-bottom-line() {
    @border-size: 0px;
}

.material-buttonText-alignment() {
    padding: 0.1em 0.2em .1em;
}

.material-icon-alignment() {
    top: 0;
    left: 0;
}

.material-gantt-toolbar-shadow() {
}

.material-datePicker-header() {
    float: left;
}

.material-borderRadius-datepicker() {
    border-radius: 0px;
}

.material-datePicker-headerText() {
    float: left;
}

.material-headerText-padding() {
    border-radius: 0;
}

.material-rightIcon-alignment() {
    right: 0;
}

.material-icon-dimension() {
    height: 30px;
    width: 30px;
}

.material-icon-position() {
    top: 7px;
    left: 8px;
}

.material-otherMonth-dateColor() {
    color: fadeout(@active-bg-stcolor,50%);
}

.material-text-dimension() {
    width: 76%;
}

.material-headerHoverStylefor-datepicker() {
    color: @header-font-color;
}

.material-rte-splitbtn-radius() {
    box-shadow: none;
    border-radius: 0px;
    height: 36px !important;
}

.material-headerHoverStylefor-dateTimePicker() {
    color: @content-font-color;
}

.material-header-RTL() {
    float: right;
}

.material-prevIcon-RTL() {
    left: 0;
    float: right;
}

.material-nextIcon-RTL() {
    right: 0;
    float: right;
}

.material-drillDownContainer-font() {
    color: @content-font-color;
}

.material-styleFor-timePicker() {
    background-color: @primary-font-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-grid.e-rtl .e-indentcell{
border-left-color: @row-border-color;
}
.e-grid .e-rarrowup-2x:before{
    & when (@skin= "material") {
        content: "\e826" !important;
    }
    & when (@skin= "office-365") {
        content: "\e826";
    }
}
.e-grid .e-rarrowdown-2x:before {
    & when (@skin= "material") {
        content: "\e827" !important;
    }
     & when (@skin= "office-365") {
        content: "\e827";
    }
}
.e-grid.e-rtl .e-headercell,
.e-grid.e-rtl .e-grouptopleftcell{
border-right-color:@row-border-color;
border-bottom-color:@row-border-color;
}
.e-grid.e-rtl .e-movablecontent,
.e-grid.e-rtl .e-movableheader {
  border-right-color: @gheader-border-color;
}

/*..........................Skin css...........................*/
.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-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-grid .e-pager .e-numericitem:hover,
.e-grid .e-pager .e-nextpage:Hover,
.e-grid .e-pager .e-lastpage:Hover,
.e-grid .e-pager .e-firstpage:Hover,
.e-grid .e-pager .e-prevpage:Hover{
.office-grid-pager-hover-color;
}

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

.e-grid .e-dialog > .e-dialog-scroller,
.e-grid .e-excelfilter.e-dlgcontainer {
  border:@border-size @border-type @content-border-color ~"\9";
}
.e-grid.e-dlgcontainer .e-value .e-caption{
    & when (@skin= "office-365") {
        color:@neutral-secondary;
        font-size:14px;
        
    }
}
.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-grid .e-grouptopleftcell {
 border-right: 1px solid #c8c8c8;
}
.e-grid td.e-indentcell + .e-rowcell {
border-left: none;
}
.e-grid th.e-lastgrouptopleftcell + .e-headercell,
.e-grid th.e-grouptopleftcell + .e-stackedHeaderCell{
border-left: none;
}
.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-grid .e-ccButton{
    & when (@skin= "material") {
    width:100px !important;
    padding-left:9px !important;
    margin-right:1px !important;
    }

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

}
.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-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-grid .e-number  {
  background-color: @grid-uisupport-background-color; 
  color: @grid-uisupport-number-color;
}
.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-grid .e-filterdialoglarge .e-ddl, .e-grid .e-filterdialo