js-pkg/Content/ej/web/flat-azure-dark/ej.theme.less

Npm package of Syncfusion.JavaScript.

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

@header-bg-stcolor: #000000;
@header-bg-endcolor: #000000;
@header-gradient-color: none;
@header-border-color: #494949;
@header-font-color: #dddddd; 
@header-icon-color: #cccccc;
@tooltip-line-height : 18px;
@content-bg-color: #000000;
@content-border-color: #494949;
@content-font-color: #dddddd;
@filtermenu-color: #494949;

@default-bg-stcolor: #212121;
@default-bg-endcolor: #212121;
@default-gradient-color: none;
@default-border-color: #777777;
@default-font-color: #dddddd;
@default-icon-color: #cccccc;

@disable-control-background-color: #1d1d1d;
@disable-control-border-color: #333333;
@disable-icon-bg-color: #525252;

@hover-bg-stcolor: #082e40;
@hover-bg-endcolor: #082e40;
@hover-gradient-color: none;
@hover-border-color: #494949;
@hover-font-color: #aaaaaa;
@hover-icon-color: #efefef;
@toggle-hover-font-color: @active-bg-stcolor ;
@toggle-content-font-color: @content-font-color;

@active-bg-stcolor: #179bd7;
@active-bg-endcolor: #179bd7;
@active-gradient-color: none;
@active-border-color: #494949;
@active-font-color: #ffffff;
@active-icon-color: #ffffff;

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

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

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

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

@scroll-bg-color: lighten(@content-bg-color, 15%);
@scroll-handle-color: lighten( @content-bg-color, 25% );
@scroll-handle-hover-color: @hover-bg-stcolor;
@scroll-handle-active-color: @active-bg-stcolor;


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

@gtouch-border-color: #FFFFFF;

@gdroparea-hover-color: @hover-bg-stcolor;

@pager-hover-stbg-color: @hover-bg-stcolor;

@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;
@gcaption-border-color: lighten( @default-bg-stcolor, 5% );
@gcaption-border-radius: 0px;


@row-hover-color: @hover-bg-stcolor;
@row-hover-font-color: @hover-font-color;
@row-border-color: @content-border-color;
@row-border-coloropac: rgba(48,48,48,0.5);
@row-selection-bg-color: @active-bg-stcolor;
@row-selection-font-color: @active-font-color;
@cell-selection-stbg-color: darken( desaturate( spin( @active-bg-stcolor, -1deg ), 15% ), 11% );
@cell-selection-endbg-color: darken( desaturate( spin( @active-bg-stcolor, -1deg ), 15% ), 11% );
@column-selection-bg-color: @default-bg-stcolor;
@alt-row-bg-color: lighten( @content-bg-color, 7%);

@pager-font-color: @default-font-color;
@pager-default-font-color: @default-font-color;
@pager-default-bg-color: @default-bg-stcolor;
@pager-default-border-color: @default-border-color;
@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: #424242;
@filter-input-bg-color: #3a3a3a;

@alternate-border-color: #242424;
@timeline-bg-color: #1C6DA3;

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

@watermark-font-style: italic;
@watermark-font-color: darken( @default-font-color, 71% );
@watermark-font-weight: normal;
@watermark-font-size: 14px;

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

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

@shadow-bg-color: lighten( @default-bg-stcolor, 54% );
@input-bg-color: #050505;

@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: @hover-bg-stcolor;
@schedule-active-border-size:3px;
@schedule-header-border-color:@active-bg-stcolor;
@schedule-cells-bg-color: lighten( @content-bg-color, 7%);

@grid-uisupport-background-color: #58585B;
@grid-uisupport-number-color: #1E1F1E;
@grid-focusout: desaturate( @active-bg-stcolor, 80% );

@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: lighten( @content-bg-color, 7%);
@gantt-weekends-bg-color: @gantt-altRow-bg-color;
@gantt-selection-bg-color: fadeout(@active-bg-stcolor,80%);
@gantt-row-stbg-color: fadeout(@active-bg-stcolor,80%);
@gantt-row-endbg-color: fadeout(@active-bg-endcolor,80%);
@gantt-header-bg-color: @header-bg-stcolor;
@gantt-header-stbg-color: @header-bg-stcolor;
@gantt-header-endbg-color: @header-bg-endcolor;
@gantt-milestone-bg-color: @content-font-color;
@gantt-parent-taskbar-color: #a7b1be;
@gantt-row-selection-bg-color: #179bd7;
@gantt-spliiter-bg-color: @content-bg-color;
@gantt-connectorline-arrow-bg-color: @content-font-color;
@gantt-progressHandle-color: @content-font-color;
@gantt-toolTip-bg-color: @content-bg-color;
@gantt-parent-progress-bg-color: @content-font-color;
@gantt-parent-task-bg-color: fadeout(@content-font-color,40%);
@gantt-child-progress-bg-color: @active-bg-stcolor;
@gantt-child-task-bg-color: fadeout(@active-bg-stcolor,40%);
@gantt-parent-progress-stbg-color: @content-font-color; /* need verify with UX team*/
@gantt-parent-progress-enbg-color: @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: @content-font-color;
@gantt-menuitem-hover-font-color: @hover-font-color;
@gantt-expandcollapse-icon-color: @default-icon-color;
@gantt-task-gripper-color: fadeout(@content-bg-color,60%);
@gantt-dialog-close-icon-mouseover-color: lighten(@content-bg-color,10%);

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

@gantt-editDialog-font-color: @content-font-color;
@gantt-content-font-color: @content-font-color;
@gantt-selection-font-color: @content-font-color;
@gantt-header-font-color: @header-font-color;
@gantt-schedule-font-color: @header-font-color;
@gantt-toolbar-font-color: @content-font-color;
@gantt-tooltip-font-color: @content-font-color;

@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: lighten(@content-bg-color,11%);

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

@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: #1e1e1e;
@filtermenudialog-color:@filtermenu-color;

@tab-background-color-dark: #1e1e1e;
.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;
}

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

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

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

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

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

.treegrid-popup-gradient() {
    background: @default-bg-stcolor;
}

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

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

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

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

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

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

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

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

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

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

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

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

@default-ui-icon: url(../common-images/icons-halfwhite.png);

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

@active-grid-image: url(../common-images/icons-halfwhite.png);

@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:lighten(@content-bg-color,15%);

.pdfviewer-searchtoolbar-border-color(){}
.pdfviewer-toolbar-border-color(){}
.pdfviewer-toolbar-border-color-hover(){}
.pdfviewer-viewercontainer-border-color(){}
.pdfviewer-viewercontainer-bgcolor(){}

/*-----------------------End PdfViewer------------------*/

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

!important; @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:@hover-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-color: darken( @default-icon-color, 62 );
}

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

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

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

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


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

@rv-viewerblock-bg-color: lighten(@default-bg-stcolor, 4%); 
@rv-pageviewcontainer-bg-color: lighten(@content-bg-color, 24%); 
@rv-documentMappopup-bg-color:#111111 !important; 

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

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

/*----------------------Reportviewer Definition End------------------*/
/*-----------------------SymbolPalette Definition-----------------*/
@sp-outline:transparent none 0px; @sp-item-hover-color:rgba(35, 130, 195, 0.40); @sp-noborder:0px solid transparent; @sp-header-font-size:14px; @sp-header-border-radius:0px;
/*-----------------------Diagram Definition-----------------*/
@dg-contextmenu:url("../common-images/diagram_context1.png");@dg-contextmenu-hover:url("../common-images/diagram_context1.png");
@dg-ruler-overlap-bg: #D8D8D8;
@dg-ruler-space-bg: #EdEdEd;
@dg-ruler-tick: #aaaaaa;
@dg-ruler-label: #7c7c7c;
/*-----------------------Datepicker Definition-----------------*/
@disable-datepicker-text:darken( @default-font-color, 46% );
/*-----------------------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:#FFFFFF; .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:@active-bg-stcolor;
@rbn-act-color:none;
@rbn-act-a-border-color:@active-border-color;
@rbnapptab-font-color:@rbntab-font-color;
@rbncontent-font-color: @header-font-color; 
@rbntab-font-color:@header-font-color;
@rbncontent-border-color: @content-border-color; 
@rbnhelp-color: @default-icon-color;
@rbncaption-font-color: @content-font-color;
@rbndropdown-color: @content-bg-color; 
@rbnmenu-font-color: @hover-font-color; 
@rbn-white-color:#FFFFFF;    
@rbn-apptab-color:@rbn-white-color;                          
@rbngallery-hover-color:@hover-bg-stcolor;   
@rbngallery-select-color:@active-bg-stcolor;                    
@rbn-text-color:@hover-font-color;        
@rbngallery-bg-color: @content-bg-color;        
@rbngallery-border-color:@default-border-color;
@rbngallery-disable-color:#4F4F4F;
@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: #FFFFFF;
.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(){
   .ribbon-hover-gradient();
}
.office-ribbon-file-hover(){}
.ribbon-shadow(){
    
}
.ribbon-app-tab-font(){
  color: @rbn-apptab-color;
}
/*----------------------Ribbon End-----------------------*/
/*----------------------Kanban Definition-----------------------*/
@kanban-cell-exceed: darken( #f8d9c7, 68% );
@kanban-cell-deceed: darken( #ffedcd, 70% );
@kanban-cell-border:darken(@default-border-color,25%);
@kanban-card-border:darken(@content-border-color,25%);
@kanban-select-cardhead-border:darken(@default-border-color, 28%);
@kanban-cardhead-border:darken(@default-border-color, 28%);
@kanban-toolbar-border:darken(@default-border-color,25%);
@kanban-filter-done-stcolor: @hover-bg-stcolor;
@kanban-card-shadow:none;
.kanban-cell-bg(){
.custom-gradient(@default-gradient-color, lighten(@default-bg-stcolor, 4%), @default-bg-endcolor, 0%, 0%);
}
.kanban-dragclone-bg(){
.custom-gradient(@hover-gradient-color, lighten(@hover-bg-stcolor, 21%), @hover-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% );
@ssheader-select-bgcolor: darken( @active-bg-stcolor, 33% );
@ssheader-hover-bordercolor:@hover-border-color;
@sscontent-border-color:@content-border-color;
@sspager-font-color:@default-font-color;
@ssheader-border-color: @header-border-color;
@ssheader-bgcolor: @content-bg-color;
@sshover-bg-color: @hover-bg-stcolor;
@ssfroze-highlight-color: darken( desaturate( @active-bg-stcolor, 11% ), 2% );
@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:lighten( @default-bg-stcolor, 1% );
@ss-chartmenu-color:@default-font-color;
@ss-chartmenuheader-bgcolor:@header-bg-stcolor;
@ss-textarea-color:@default-border-color;
@ssrowselect-font-color:darken(saturate(@content-font-color, 1%),70%);
.spread-toggle-gradient(){
  .custom-gradient(@active-gradient-color,@ssbtntgle-start-color, @ssbtntgle-end-color, 18%, 0%);
}
@ssactive-font-color:@active-font-color;
@ssactive-icon-color:@active-icon-color;
@ssdown-arrow-cursor:url("../common-images/spreadsheet/down_arrow_dark.cur"),auto;
@ssright-arrow-cursor:url("../common-images/spreadsheet/right_arrow_dark.cur"),auto;
@ssformatpainter-cursor:url("../common-images/spreadsheet/format_painter_dark.cur"),auto;
@ssdraw-border-cursor:url("../common-images/spreadsheet/draw_border_dark.cur"),auto;
@ssdraw-border-grid-cursor:url("../common-images/spreadsheet/draw_border_grid_dark.cur"),auto;
/*----------------------Spreadsheet End-----------------------*/
/*----------------------Office 365 theme-----------------------*/
.border-selection(){}
.colorpicker-color-selection(){  }
.colorpicker-boxshadow-selection(){}
/*----------------------High-Contrast-01 & High-Contrast-02 theme-----------------------*/
.colorpickericon-color-selection(){}
 /*----------------------material theme-----------------------*/
.material-stylefor-bordertop(){}
.material-stylefor-fileexplorer(){
   border-bottom-color: @active-bg-stcolor;
}

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

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

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

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

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

.high-contrast-groupbtn-border() {
    @hover-border-color: @default-border-color;
}
.switch-themes-groupbtn-border-color() {
    @hover-gbtn-border-color: transparent;
}
.high-contrast-gantt-toolbar-icon-border() {
    @hover-border-color: transparent;
}
.high-contrast-stylefor-silder-active() {}
.high-contrast-checkbox-bordercolor() {}
.high-contrast-radio-bordercolor() {}
.high-contrast-radio-iconcircle() {}
.high-contrast-tab-headerborder() {}
.high-contrast-tab-header-normal-font() {}
.high-contrast-rotator-default-border() {}
.high-contrast-rotator-pager-border() {}
.high-contrast-file-explorer-search-text() {}
.high-contrast-file-explorer-content-active() {}
.high-contrast-tagcloud-txt-hover() {}
.high-contrast-ribbon-header-active() {}
.high-contrast-ribbon-header-border() {}
.high-contrast-ribbon-header-active-border() {}
.high-contrast-ribbon-header-active-font() {}
.high-contrast-ribbon-header-hover-font() {}
.high-contrast-ribbon-file-header() {}
.high-contrast-ribbon-file-header-hover() {}
.high-contrast-gantt-textbox-border-color() {}
.high-contrast-gantt-active-font-color() {}
.high-contrast-toolbar-border() {}
.high-contrast-grid-button-border-color() {}
.high-contrast-schedule-content-icon-color() {}
.high-contrast-upload-btn-hover-color(){}
.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-tab-border() {
    border-bottom: transparent;
}
.material-tab-borderbottom() {
    border-top: 3px @border-type @active-bg-stcolor;
}

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

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

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

.material-datePicker-header() {}
.material-borderRadius-datepicker(){}
.material-datePicker-headerText(){}
.material-headerText-padding(){}
.material-rightIcon-alignment(){}
.material-icon-dimension(){}
.material-icon-position(){}
.material-otherMonth-dateColor(){}
.material-text-dimension(){}
.material-headerHoverStylefor-datepicker(){}
.material-headerHoverStylefor-dateTimePicker(){}
.material-upload-dialog-bg-color(){}
.material-rte-splitbtn-radius(){}
.material-header-RTL(){}
.material-prevIcon-RTL(){}
.material-nextIcon-RTL(){}
.material-drillDownContainer-font(){}
.material-timeDimension-datepicker(){}
.material-content-border-color(){}
/*-----------------------HeatMap Definition-----------------*/
@hmp-border-color: #808080;
@hmp-font-color: #FFFFFF;
@hmp-background-color: #000000;
/* 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-filterdialoglarge .e-numeric,
 .e-grid .e-filterdialoglarge .e-atc, .e-grid .e-filterdialoglarge .e-datewidget
 {
     & when (@skin= "office-365") {
         height : 32px !important;
     }
 }

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

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

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

     }
}

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