js-pkg/Content/ej/web/material/ej.theme.less

Npm package of Syncfusion.JavaScript.

@skin: "material";
@accent-color: #ff4081;
@accent-font-color: #ffffff;
@primary-color:#3f51b5;
@base-font-color: #000000;
@primary-font-color:#ffffff;
@content-bg-color:#ffffff;
@error-color: #f44336;

@grey-50: #fafafa;
@grey-100: #f5f5f5;
@grey-200: #eeeeee; 
@grey-300: #e0e0e0;
@grey-400: #bdbdbd;
@grey-500: #9e9e9e;

@grey-light-font: #000000;

@grey-600: #757575;
@grey-700: #616161;
@grey-800: #424242;
@grey-900: #212121;

@grey-dark-font: #ffffff;

@primary-color-50:#e8eaf6;
@primary-color-100:#c5cae9;

@primary-font-color-50: #000000;

@primary-color-300:#7986cb;

@primary-font-color-300: #ffffff;

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

@header-bg-stcolor: @primary-color;
@header-bg-endcolor: @primary-color;
@header-gradient-color:none;
@header-border-color: @primary-color;
@header-font-color: @primary-font-color;
@header-icon-color: @primary-font-color;
@filtermenu-color: @grey-300;

@tooltip-line-height : 18px;

@content-border-color: @grey-300;
@content-font-color: @grey-900;

@default-bg-stcolor: @grey-100;
@default-bg-endcolor: @grey-100;
@default-gradient-color:none;
@default-border-color: @grey-300;
@default-font-color: @grey-900;
@default-icon-color: @grey-800;

@hover-bg-stcolor: @grey-300;
@hover-bg-endcolor: @grey-300;
@hover-gradient-color:none;
@hover-border-color: @grey-300;
@hover-font-color: @grey-900;
@hover-icon-color: @grey-800;
@toggle-hover-font-color: @active-bg-stcolor;
@toggle-content-font-color: @content-font-color;

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

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

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

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

@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: @default-border-color;
@gheader-font-color: @header-font-color;
@gheader-hover-font-color: @hover-font-color;
@gheader-font-size: 14px;
@gedit-title-color: #fafafa;

@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: @grey-300;
@gdroparea-font-color: @active-font-color;
@gdroparea-hover-color: @hover-bg-stcolor;
@gcaption-border-color: @grey-50;
@gcaption-border-radius: 20px;

@row-hover-color: @hover-bg-stcolor;
@row-hover-font-color: @hover-font-color;
@row-border-color: @grey-300;
@row-border-coloropac: @grey-300;
@row-selection-bg-color: #e0e0e0;
@row-selection-font-color: @base-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: @grey-50;

@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;
@disable-control-background-color: #000000;
@disable-control-border-color: #000000;
@disable-icon-bg-color: #000000;

@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: @active-bg-stcolor;
@schedule-app-endbg-color: @active-bg-endcolor;
@schedule-app-border-color: lighten(@active-bg-stcolor, 10%);
@schedule-select-bg-color: @grey-200;
@schedule-active-border-size:1px;
@schedule-header-border-color:@grey-300;
@schedule-cells-bg-color: @grey-50;

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

@gantt-toolbar-bg-color: @grey-50;
@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: @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;
@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: fade(@base-font-color,87%);
@gantt-menuitem-hover-font-color: fade(@base-font-color,87%);
@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: @content-border-color;
@gantt-splitter-border-color: @content-border-color;
@gantt-content-border-color: @content-border-color;
@gantt-header-border-color: @content-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: fadeout(@base-font-color,46%);
@gantt-schedule-font-color: @header-font-color;
@gantt-toolbar-font-color: @content-font-color;
@gantt-tooltip-font-color: @content-font-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%);
@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: @content-border-color;

@material-tile-hover-color: darken(saturate(spin(@primary-color, -0.3211), 0.3573), 9.6078);

@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: @header-bg-stcolor;      
    }
    color: @header-font-color;
} 
@radial-badge-color:#FFFFFF;

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

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

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

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

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

.hover-gradient-material() {
    .custom-gradient(@hover-gradient-color, @grey-200, @grey-200, 0%, 0% );
}
.active-gradient() {
    /*.custom-gradient(@active-gradient-color, @active-bg-stcolor, @active-bg-endcolor, 0%, 0% );*/
    background-color: @grey-50;
}
.active-splitter-gradient() {
    .custom-gradient(@active-gradient-color, @grey-100, @grey-100, 0%, 0% );
}
.active-material-gradient() {
    .custom-gradient(@active-gradient-color, @accent-color, @accent-color, 0%, 0% );
}
.select-listbox-material() {
    .custom-gradient(@active-gradient-color,@grey-100, @grey-100, 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() {
    .hover-gradient();
}

.gheader-gradient() {
    //background-color:@primary-font-color;

    .header-gradient();
}

.tgheader-gradient() {
    .header-gradient();
}
.ganttheader-gradient() {
    background: @grey-50;
}

.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(){
    background: lighten(@header-bg-stcolor,10%);
}

.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() {
  .custom-gradient(@active-gradient-color, @active-bg-stcolor, @active-bg-endcolor, 0%, 0% );
}

.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_material.png);
@colorpicker-bg-color: @content-bg-color;
@colorpicker-border-color: #cecece;
@colorpicker-grpbutton-bg-color: @grey-50;
@colorpicker-button-bg-color: @content-bg-color;
@colorpicker-button-border-color: @content-bg-color;
@colorpicker-popup-bg-color: @content-bg-color;
@colorpicker-popup-boder-color: @default-border-color;
@colorpicker-btn-bg-color: @content-bg-color;

@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);

/*-----------------------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(){}
.pdfviewer-toolbar-border-color(){
    position:relative;
    z-index:1;
    box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.20);
    background-color: @grey-50;
}
.pdfviewer-toolbar-border-color-hover(){}
.pdfviewer-viewercontainer-border-color(){}
.pdfviewer-viewercontainer-bgcolor(){}

/*-----------------------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: @hover-bg-stcolor;
    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:transparent;
    border:.5px solid transparent;
}

.scrollThumb-setcolor() {
    background-color:@grey-400;
    border:.5px solid @grey-500;
}

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

.pageIndicator-setcolor() {
    background:@grey-700;
    border:1px solid transparent;
    border-radius:2px;
    color: @primary-font-color;
}

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


.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: 12.5px;
@rv-viewerblockcellcontent-font-size: 14.5px;
@rv-viewerblock-font-size-material-theme: 13px;

@rv-viewerblock-bg-color: darken(@default-bg-stcolor, 4%); 
@rv-pageviewcontainer-bg-color: darken(@content-bg-color, 20%); 
@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:#C8E6C9; @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() {
}

.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:@hover-font-color;
@rbnbackstage-item-select-color:@active-font-color;
@rbnbackstage-item-hover-color:@hover-font-color;
@rbn-border-color:@default-border-color;
@rbn-bg-color:@header-font-color;
@rbn-act-color: none;
@rbnapptab-font-color:@rbntab-font-color;
@rbn-act-a-border-color:none;
@rbncontent-font-color: @content-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(){
 .header-gradient();
}
.ribbon-active-gradient(){
 .active-gradient();
}
.ribbon-app-tab-font(){
  color: @rbn-apptab-color;
   opacity: 1;
   filter: alpha(opacity=100);
}
.ribbon-hover-gradient(){
 .hover-gradient();
}
.ribbon-backstage-hover-bg() {
	background-color: darken( @header-bg-stcolor, 12% );
}
.ribbon-backstage-select-bg(){
    background-color: lighten( @header-bg-stcolor, 10% );
}
.ribbon-bg-hover-gradient(){
   background: fade(@header-font-color,30%);
}
.ribbon-tab-hover(){
    opacity: 0.7;
	filter: alpha(opacity=70);
}
.ribbon-bg-active-gradient(){ }
.office-ribbon-file-hover(){}
.ribbon-app-hover-gradient(){
   .ribbon-hover-gradient();
}
.ribbon-shadow(){
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
/*----------------------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:0 1.83px 1px rgba(0, 0, 0, 0.2);
.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, 17.5%), @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(){
	background:@content-bg-color;
}
/*----------------------Kanban End-----------------------*/
/*----------------------Spreadsheet Definition-----------------------*/
@sscontent-color: @content-font-color;
@ssheader-content-color: darken( @header-font-color, 100% );
@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( @accent-color, 8% ), 1% );
@sscomments-focused-border: lighten( desaturate( @accent-color, 18% ), 14% );
@sscomments-excel-border: darken( saturate( @header-border-color, 1% ), 4% );
@sspager-font-color:@default-font-color;
@ssheader-border-color: @content-border-color;
@ssheader-bgcolor: @content-bg-color;
@sshover-bg-color: @hover-bg-stcolor;
@ssheader-select-bgcolor: fade(@accent-color, 12%);
@ssheader-hover-bordercolor:@hover-border-color;
@sscontent-border-color:@content-border-color;
@ssfroze-highlight-color:@accent-color;
@sschart-darktheme-bgcolor: darken( @content-font-color, 13% );
@ssdrpdwnbrdr: darken( @header-border-color, 7% );
@ssselectall: fade(@accent-color, 12%);
@ssselectallhover: fade(@accent-color, 20%);
@ssselectselected: @accent-color;
@sschart-select-bgcolor: lighten( desaturate( @accent-color, 24% ), 20% );
@sscontent-active-bgcolor: darken( desaturate( @accent-color, 11% ), 2% );
@sscontent-active-color: @active-font-color;
@ssnumeric-icon-color: darken( @header-border-color, 31% );
@ssactive-bg-color: @accent-color;
@ss-icon-color:@default-icon-color;
@ssbtntgle-start-color:lighten(@accent-color, 18%);
@ssbtntgle-end-color:lighten(@accent-color, 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;
@material-ssheader-content-color:fade(@base-font-color, 87%);
@material-sshover-border-color:fade(@base-font-color, 12%);
@material-ssbg-default-color:@default-bg-stcolor;
@material-sstextbox-border-color:fade(@base-font-color,12%);
@material-dlgtab-bgcolor:@primary-color;
@material-dlgtab-fontcolor:@primary-font-color;
@material-dlgtab-inactcolor:fade(@primary-font-color, 70%);
@material-ac-brdr-color:fade(@base-font-color,26%);
@material-ac-brdractive-color:fade(@base-font-color,54%);
@material-base-font-color:@base-font-color;
@material-dialog-content-color:fade(@base-font-color, 38%);
/*----------------------Spreadsheet End-----------------------*/
/*----------------------Office 365 theme-----------------------*/
.border-selection(){}
.colorpicker-color-selection(){}
.colorpicker-boxshadow-selection(){}

 /*----------------------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-stylefor-button(){    
    background-color:@active-bg-stcolor;
    color:@active-font-color;
}
.material-stylefor-fileexplorer(){
    border-bottom: 1px solid @default-border-color;
} 
.material-stylefor-bordertop(){}
.material-stylefor-datepicker(){
    color:@header-font-color;
}
.material-stylefor-borderradius(){
    border-radius:4px;
}

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

.high-contrast-groupbtn-border() {
    @hover-border-color: @default-border-color;
}

.switch-themes-groupbtn-border-color() {
    @hover-gbtn-border-color: @hover-border-color;
}

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

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

.switch-grid-header-icon() {
    @header-icon-color: @default-icon-color;
}

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

.switch-datepick-header-text() {
    color: @hover-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: @accent-color;
    text-transform: uppercase;
}

.switch-schedule-header-color() {
    @schedule-header-border-color: @grey-300;
    @header-border-color: @grey-300;
    @content-border-color: @grey-300;
    @header-bg-stcolor: @grey-50;
    @header-font-color: @base-font-color;
}

.switch-pivotgrid-draggale-button() {
    @default-font-color: fade(@primary-font-color,70%);
}

.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() {
    background-color: @active-bg-endcolor;
    @active-bg-stcolor: @active-font-color;
}

.switch-ribbon-file-header-txt-color() {
    @rbn-white-color: @header-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-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() {
    @active-bg-stcolor:@default-border-color;
}
.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() {
     box-shadow:none;
}
.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() {}
.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-datepick-header-icon-color() {
    @hover-icon-color: @header-icon-color;
}
.material-dialog-icon-hover-bg-color() {
    background: @content-bg-color;
}
.material-dialog-icon-hover-color(){
    @hover-icon-color: @grey-200;
}
.material-menu-active-bg-color() {}

.material-radio-bg-color() {}

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

.material-radio-act-bordercolor() {
    @content-border-color: @active-bg-stcolor;
}

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

.material-tab-header-bg-hover-color() {
    @hover-bg-stcolor: fade(@header-font-color,30%);
}

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

.material-tab-header-normal-font() {
    @content-font-color: fade(@header-font-color,70%);
    text-transform: uppercase;
}

.material-tab-header-hover-font() {
    @hover-font-color: fade(@header-font-color,70%);
}

.material-tootip-bg-color() {
    @content-bg-color: @grey-700;
}

.material-tootip-border-color() {
    @content-border-color: none;
}

.material-tootip-text-color() {
    @content-font-color: @content-bg-color;
}

.material-button-border-color() {
    @default-border-color: none;
    @hover-border-color: none;
    @active-border-color: none;
    border: none;
}

.material-listview-header-icon-color() {
    @hover-icon-color: @header-icon-color;
}

.material-hover-navigation-header-icon-color() {
    opacity: 0.7;
    color: @hover-icon-color;
}

.material-tileview-bg-color() {
    background: @primary-color;
}

.material-ribbon-header-active-font() {
    @rbn-bg-color: @content-font-color;
	border-color: @header-bg-stcolor @header-bg-stcolor transparent;
}

.material-ribbon-file-header() {
    .header-gradient();
}

.material-ribbon-file-header-hover() {
    background: fade(@header-font-color,30%);
}

.material-pivot-drag-bg-color() {
    @pivotList-treeview-hvr-color: @primary-color-300;
}

.material-pivot-drag-column-color() {
    @groupingBar-bg-color: @primary-color-300;
}

.material-pivot-drag-column-br-color() {
    @active-border-color: @hover-border-color;
}

.material-pivot-drag-column-txt-color() {
    @active-font-color: @header-font-color;
}

.material-pivotclient-box-shadow() {
   box-shadow: 0 1.83px 1px rgba(0, 0, 0, 0.20);
   overflow:visible;
   margin-bottom:2px;
}

.material-grid-droparea-bg-color() {
    background: @primary-color-300;
}

.material-grid-header-border-top-color(){
    border-top-color:@content-border-color;
}

.material-gantt-header-background() {
    @gantt-schedule-font-color: fadeout(@base-font-color,13%);
    @gantt-header-border-color: @content-border-color;
}

.material-gantt-header-icon-color() {
    @header-icon-color: fadeout(@base-font-color,46%);
}

.material-tab-border() {
    border-bottom: 2px @border-type @accent-color;
}

.material-tab-borderbottom() {
    border-top: 0px @border-type transparent;
}

.material-upload-background() {
    @default-bg-stcolor: fade(@base-font-color,12%);
    box-shadow: none;
    border-radius: 0px;
}

.material-upload-border() {
    @default-border-color: none;
}

.material-active-box-shadow() {
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.26);
}

.material-normal-box-shadow() {
    box-shadow: 0 1.83px 1px rgba(0, 0, 0, 0.20);
}

.material-checkbox-bordercolor() {
    @content-border-color: @content-font-color;
}
.material-upload-dialog-bg-color(){
    @alt-row-bg-color: @content-bg-color;
}

.material-checkbox-act-bordercolor() {
    @content-border-color: @accent-color;
}
.material-upload-dialog-active-line(){
   border-bottom: none;
}
.material-file-explorer-splitbtn-shadow(){
    box-shadow:none;
    border: 1px solid @default-border-color;
}
.material-file-explorer-splitbtn-radius(){
    box-shadow:none;
    border-radius:0px;
}
.material-ddl-checkbox-bordercolor(){
    @content-border-color: @content-font-color;
    border-radius: 2px;
}
.material-tab-right-border(){ 
  border-left: 2px @border-type @accent-color;
}
.material-tab-right-bottom-border(){
    border-right: transparent;
}
.material-tab-left-border(){
    border-right: 2px @border-type @accent-color;
}
.material-tab-left-bottom-border(){
    border-left: transparent;
}
.material-tab-bottom-border(){
   border-top: 2px @border-type @accent-color;  
}
.material-tab-bottom-border-bottom(){
    border-bottom: transparent;
}
.material-content-border-color(){
    @content-border-color: transparent;
}
/*------------------ DatePicker ---------------------*/
.material-headerStylefor-datepicker(){
    background-color: fadeout(lighten(@header-bg-stcolor, 40%),50%);
}
.material-dateDimension-datepicker(){
    height:44px;
    position:relative;
    z-index:1;
}
 .material-timeDimension-datepicker(){
     height:56px;
 }
.material-dateCircle-datepicker(){
    border-radius:50%;
}
.material-monthDimension-datepicker(){
    height:78px;
    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(){
    padding:7px;    
     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: 79%;
}
.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-c