js-pkg/Content/ej/web/ej.widgets.core.bootstrap.less

Npm package of Syncfusion.JavaScript.

/*Definition*/
@skin:"bootstrap";
@font-family: sans-serif,Segoe UI,Helvetica Neue,Ubuntu,Arial;
@font-size: 14px;
@font-path: "common-images";
@font-icon-path: "common-images";
@border-size: 1px;
@border-type: solid;
@header-font-weight: bold;
@header-font-size: 16px;
@content-font-weight: normal;
@datepicker-image-top:5px;
@gheader-font-size: 14px;
@gantt-content-font-size: 12px;
@gantt-header-font-family: @font-family;
@gantt-header-font-size: 14px;
@gantt-parentGanttRecord-font-weight: bold;
@gantt-schedule-font-weight: 600;
@gantt-schedule-font-size: 13px;
@gantt-tooltip-font-size: 12px;
@gantt-tasklable-font-family: @font-family;
@gantt-tasklable-font-size: 12px;
@gantt-tasklable-font-style: normal;
@treegrid-headercell-height:45px;
@treegrid-header-padding:0px;
@input-height: 34px;
@input-width: 143px;
@visual-mode-padding: 2px 19px 5px 4px;
@visual-mode-rtl-padding: 2px 4px 5px 19px;
@progressbar-height: 20px;
@toolbar-padding: 4px;
@toolbar-margin-right: 1px;
@toolbar-res-margin-top: 5px;
@menu-horizontal-line-height: 38px;
@menu-vertical-line-height: 38px;
@menu-hor-child-line-height: 24px;
@menu-ver-child-line-height: 24px;
@slider-size: 20px;
@slider-border-radius: 12px;
@slider-handle-size: 22px;
@slider-bs-border-radius: 12px;
@treeview-text-padding: .308em .6667em .4167em .5833em;
@treeview-edit-text-padding: 0 0 0 .5833em;
@treeview-rtl-edit-text-padding: 0 .5833em 0 0;
@treeview-ul-padding: 2px 0px 0px 10px;
@treeview-icon-margin: 10px;
@treeview-rtl-item-padding: 0px 16px 2px 0px;
@treeview-rtl-ul-padding: 2px 10px 0px 0px;
@treeview-ul-margin-bottom: -2px;
@treeview-chk-margin-top: 4px;
@treeview-fullrow-height: 31px;
@rte-ul-margin-buttom: 5px;
@rte-ul-margin-top: 6px;
@rte-split-height: 34px;
@rte-toolbar-res-margin-top: 12px;
@fe-treeview-image-top: 5px;
@button-height: 34px;
@border-radius: 4px;
@border-left-radius: @border-radius 0 0 @border-radius;
@border-right-radius: 0 @border-radius @border-radius 0;
@border-top-radius: @border-radius @border-radius 0 0;
@border-bottom-radius: 0 0 @border-radius @border-radius;
@inner-border-radius: @border-radius - 1;
@inner-border-left-radius: @inner-border-radius 0 0 @inner-border-radius;
@inner-border-right-radius: 0 @inner-border-radius @inner-border-radius 0;
@inner-border-top-radius: @inner-border-radius @inner-border-radius 0 0;
@box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px inset;
@button-box-shadow: none;
@schedule-commonviewbutton: 7px 10px 7px 10px;
@schedule-input-height: 30px;
@schedule-viewstable-margin-top: -8px;
@schedule-agendaday-line-height: 42px;
@schedule-box-shadow: @box-shadow;
@schedule-commonviewbutton-box-shadow: @box-shadow;
@ribbon-line-height: 33px;
@ribbon-resizebtn-height: auto;
@tools-border-radius: 3px;
@ss_box-sizing: border-box;
@ss-button-height: 34px;
@ss-formula-border: none;
@ss-formula-wrapper-height: 26px;
@ss-button-bottom-margin: 4px;
@ss-button-left-margin: 11px;
@ss-pagercontainer-height: 28px;
@ss-pagercontainer-overflow: visible;
@ss-pager-height: 30px;
@ss-margin-bottom: 4px;
@ss-margin-top: 7px;
@ss-addnew-padding-top: 1px;
@ss-icon-margin:9px 3px 0px 7px;
@header-border-size: 1px;
@grid-box-shadow:none;

@input-border-width:@border-size;

.e-ribbon.e-js .e-header .e-active a, .e-ribbon .e-header > .e-apptab .e-apptabanchor,
.e-ribbon .e-expandcollapse span, .e-ribbon .e-header .e-contextual, .e-ribbon .e-menu li.e-list.e-active.e-mfocused {
    border-radius: @border-radius;
}
.e-ribbon .e-menu.e-horizontal > .e-list > a, .e-menu.e-horizontal > .e-list > span {
    line-height: @ribbon-line-height;
}
.e-ribbon .e-groupdiv .e-resizebtn {
    height: @ribbon-resizebtn-height;
}

.e-datepicker .e-header .e-next, .e-datepicker .e-header .e-prev {
    top: @datepicker-image-top;
}

.e-ss-dialog .e-widget .e-addedrow .e-dlg-btnfields .e-btn-normal , 
.e-ss-dialog .e-widget .e-widget-content .e-dlg-btnfields input.e-btn.e-widget,
.e-ss-dialog .e-widget .e-widget-content .e-dlg-btnfields button.e-btn.e-widget,
.e-ss-dialog .e-widget .e-widget-content .e-dlg-btnfields .e-dlg-btnctnr input.e-btn.e-widget{
    box-sizing: @ss_box-sizing;
    height: @ss-button-height;
    margin-left: @ss-button-left-margin;
    margin-bottom: @ss-button-bottom-margin;
}

.e-spreadsheet .e-widget .e-content .e-groupdiv .e-ribGroupContent .e-innerdivrow .e-innerdivchild .e-ss-colorpicker,
.e-spreadsheet .e-ss-colorpicker.e-colorwidget,.e-spreadsheet .e-formulabar .e-indexbox,.e-ss-textarea, .ejinputtext{
    border-radius: @border-radius;
}

.e-spreadsheet .e-formulabar .e-inputbox{
    border: @ss-formula-border;
}

.e-spreadsheet .e-formulabar .e-inputbox .e-ss-autocomplete .e-in-wrap{
    height: @ss-formula-wrapper-height;
}

.e-spreadsheet .e-spreadsheetgrppanel .e-spreadsheetmainpanel .e-spreadsheetfooter{
    height: @ss-pager-height;
}

.e-spreadsheet .e-spreadsheetgrppanel .e-spreadsheetmainpanel .e-spreadsheetfooter .e-table .e-pager:first-child .e-pagercontainer {
    overflow: @ss-pagercontainer-overflow;
    height: @ss-pagercontainer-height;
}

.e-spreadsheet .e-spreadsheetgrppanel .e-spreadsheetmainpanel .e-spreadsheetfooter .e-pager:first-child .e-pagercontainer .e-numericcontainer .e-numericitem {
    padding-bottom: @ss-margin-bottom;
    padding-top: @ss-margin-top;
}

.e-spreadsheet .e-spreadsheetgrppanel .e-spreadsheetmainpanel .e-spreadsheetfooter .e-table .e-pager:first-child .e-pagercontainer .e-new{
    padding-top: @ss-addnew-padding-top;
}

.e-spreadsheet .e-spreadsheetgrppanel .e-spreadsheetmainpanel .e-spreadsheetfooter .e-pager:first-child .e-pagercontainer .e-firstpage,
.e-spreadsheet .e-spreadsheetgrppanel .e-spreadsheetmainpanel .e-spreadsheetfooter .e-pager:first-child .e-pagercontainer .e-prevpage, 
.e-spreadsheet .e-spreadsheetgrppanel .e-spreadsheetmainpanel .e-spreadsheetfooter .e-pager:first-child .e-pagercontainer .e-nextpage,
.e-spreadsheet .e-spreadsheetgrppanel .e-spreadsheetmainpanel .e-spreadsheetfooter .e-pager:first-child .e-pagercontainer .e-prevpage{
    padding: @ss-icon-margin;
}

@widget: none;

& {
    .mixin(@widget);
}

.mixin(@widget) when (@widget = common), (@widget = none) {

    .border-radius(@radius) when not(@radius = 0px) {
        /* Common Core */
        .e-atc-popup, .e-atc .e-in-wrap, .e-atc .e-in-wrap .e-input,
        .e-acrdn-scroller, .e-acrdn .e-select,
        .e-chkbox-wrap div > span,
        .e-datepicker.e-popup, .e-datewidget .e-in-wrap, .e-datewidget .e-in-wrap .e-input,
        .e-daterangepicker-popup.e-popup, .e-daterangewidget .e-in-wrap, .e-daterangewidget .e-in-wrap .e-input,
        .e-daterangepicker-popup.e-popup, .e-drpbuttons, .e-daterangepicker-popup.e-popup .e-custom-dateranges li,
        .e-datetime-popup.e-popup, .e-datetime-popup .e-dt-button, .e-datetime-wrap .e-in-wrap, .e-datetime-wrap .e-in-wrap .e-input,
        .e-dialog-wrap, .e-dialog-wrap > .e-header .e-dialog-icon,
        .e-ddl-popup.e-popup, .e-ddl .e-in-wrap, .e-ddl .e-in-wrap .e-input,
        .e-numeric .e-in-wrap, .e-numeric .e-in-wrap .e-input,
        .e-percent .e-in-wrap, .e-percent .e-in-wrap .e-input,
        .e-currency .e-in-wrap, .e-currency .e-in-wrap .e-input,
        .e-mask .e-in-wrap, .e-mask .e-in-wrap .e-input, .e-textbox, .e-textarea,
        .e-menu,
        .e-tab,
        .e-time-popup.e-popup, .e-timewidget .e-in-wrap, .e-timewidget .e-in-wrap .e-input,
        .e-toolbar, .e-toolbar .e-tooltxt,
        .e-upload-box .e-selectpart, .e-upload-box .e-btn,
        .e-treeview .e-text, .e-fullrow-wrap .e-fullrow, .e-dragedNode,
        .e-splitbutton,
        .e-fileexplorer .e-tilenode,
        .e-rte, .e-rte.e-dialog .e-inputtext,
        .e-btn.e-select,
        .e-progressbar,
        .e-check-wrap .e-chk-inact, .e-check-wrap .e-chk-act, .e-check-wrap .e-chk-indeter {
            border-radius: @radius;
        }

        .e-groupbutton ul li.e-grp-btn-item:first-child {
            border-top-left-radius: @border-radius;
            border-bottom-left-radius: @border-radius;
        }

        .e-groupbutton ul li.e-grp-btn-item:last-child {
            border-top-right-radius: @border-radius;
            border-bottom-right-radius: @border-radius;
        }

        .e-groupbutton.e-rtl ul li.e-grp-btn-item:first-child {
            border-top-right-radius: @border-radius;
            border-bottom-right-radius: @border-radius;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
        }

        .e-groupbutton.e-rtl ul li.e-grp-btn-item:last-child {
            border-top-left-radius: @border-radius;
            border-bottom-left-radius: @border-radius;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
        }
    }

    .border-radius(@border-radius);

    .e-colorwidget.e-split.e-disable .e-in-wrap .e-select:hover, .e-colorwidget.e-split.e-disable .e-color-container:hover,
    .e-dialog.e-disable .e-dialog-icon:hover, .e-dialog.e-disable > .e-header, .e-ddl .e-disable.e-select:hover,
    .e-in-wrap .e-disable.e-select .e-icon, .e-in-wrap .e-disable.e-select, .e-rte .e-horizontal .e-disable,
    .e-slider.e-disable .e-handle.e-select {
        cursor: default;
    }

    .e-corner, .e-corner .e-input,
    .e-acrdn-scroller.e-corner, .e-acrdn.e-corner .e-select,
    .e-corner .e-dt-button,
    .e-corner > .e-header .e-dialog-icon,
    .e-corner .e-tooltxt,
    .e-corner + .e-dialog, .e-corner + .e-dialog > .e-header .e-dialog-icon, .e-corner + .e-dialog > .e-btn {
	 & when not(@skin="office-365"){
        border-radius: 4px 4px 4px 4px;
		}
	& when (@skin="office-365"){
      border-radius:0px;
	}
    }

    .border-radius(@radius) when not(@radius = 0px) {
        .e-tab > ul.e-addborderright .e-item, .e-tab .e-addborderleft.e-content-item,
        .e-split .e-splitarrowleft .e-splitbutton, .e-split .e-splitarrowright .e-drp-btn, .e-rtl.e-split .e-splitarrowright .e-splitbutton, .e-rtl.e-split .e-splitarrowleft .e-drp-btn,
        .e-fileexplorer .e-grid tr td.e-last-rowcell, .e-fileexplorer .e-grid.e-rtl tr td:first-child {
            & when (@skin= "material") {
                /*material*/
                border-radius: 0;
            }

            & when not (@skin= "material") {
                /*other*/
                border-radius: @border-right-radius;
            }
        }

        .e-tab > ul.e-addborderleft .e-item, .e-tab .e-addborderright.e-content-item,
        .e-split .e-splitarrowright .e-splitbutton, .e-split .e-splitarrowleft .e-drp-btn, .e-rtl.e-split .e-splitarrowleft .e-splitbutton, .e-rtl.e-split .e-splitarrowright .e-drp-btn,
        .e-fileexplorer .e-grid tr td:first-child, .e-fileexplorer .e-grid.e-rtl tr td.e-last-rowcell {
            & when (@skin= "material") {
                /*material*/
                border-radius: 0;
            }

            & when not (@skin= "material") {
                /*other*/
                border-radius: @border-left-radius;
            }
        }

        .e-acrdn .e-select.e-active,
        .e-datepicker.e-popup .e-header,
        .e-tab > ul.e-addborderbottom .e-item, .e-tab .e-addbordertop.e-content-item,
        .e-split .e-splitarrowtop .e-drp-btn, .e-split .e-splitarrowbottom .e-splitbutton,
        .e-rte .e-toolbar,
        .e-datetime-popup .e-header,
        .e-fileexplorer .e-toolbar {
            border-radius: @border-top-radius;
        }

        .e-acrdn-content-active,
        .e-dialog-wrap .e-widget-content,
        .e-tab > ul.e-addbordertop .e-item, .e-tab .e-addborderbottom.e-content-item,
        .e-split .e-splitarrowbottom .e-drp-btn, .e-split .e-splitarrowtop .e-splitbutton,
        .e-rte .e-rte-footer,
        .e-datetime-popup .e-time-popup {
            border-radius: @border-bottom-radius;
        }
    }

    .e-corner.e-tab > ul.e-addborderright .e-item, .e-corner.e-tab .e-addborderleft.e-content-item,
    .e-split .e-splitarrowleft .e-splitbutton.e-corner, .e-split .e-splitarrowright .e-corner + .e-drp-btn, .e-rtl.e-split .e-splitarrowright .e-splitbutton.e-corner, .e-rtl.e-split .e-splitarrowleft .e-corner + .e-drp-btn {
       & when (@skin="office-365") {
	    border-radius: 0px;
	}
    & when not (@skin="office-365") {
	   border-radius: 0 4px 4px 0;
	}
    }

    .e-corner.e-tab > ul.e-addborderleft .e-item, .e-corner.e-tab .e-addborderright.e-content-item,
    .e-split .e-splitarrowright .e-splitbutton.e-corner, .e-split .e-splitarrowleft .e-corner + .e-drp-btn, .e-rtl.e-split .e-splitarrowleft .e-splitbutton.e-corner, .e-rtl.e-split .e-splitarrowright .e-corner + .e-drp-btn {
        border-radius: 4px 0 0 4px;
    }

    .e-acrdn.e-corner .e-select.e-active,
    .e-datepicker.e-popup.e-corner .e-header,
    .e-corner.e-tab > ul.e-addborderbottom .e-item, .e-corner.e-tab .e-addbordertop.e-content-item,
    .e-split .e-splitarrowtop .e-corner + .e-drp-btn, .e-split .e-splitarrowbottom .e-splitbutton.e-corner,
    .e-datetime-popup.e-corner .e-header {
        border-radius: 4px 4px 0 0;
    }

    .e-corner .e-acrdn-content-active,
    .e-corner.e-dialog-wrap .e-widget-content,
    .e-corner.e-tab > ul.e-addbordertop .e-item, .e-corner.e-tab .e-addborderbottom.e-content-item,
    .e-split .e-splitarrowbottom .e-corner + .e-drp-btn, .e-split .e-splitarrowtop .e-splitbutton.e-corner,
    .e-datetime-popup.e-corner .e-time-popup {
        border-radius: 0 0 4px 4px;
    }

    .border-radius(@radius) when not(@radius = 0px) {
        .e-progressbar .e-progress.e-complete {
            border-radius: @inner-border-radius;
        }

        .e-atc.e-rtl .e-in-wrap.e-padding .e-input, .e-atc .e-in-wrap.e-padding .e-select,
        .e-datewidget.e-rtl .e-in-wrap.e-padding .e-input, .e-datewidget .e-in-wrap.e-padding .e-select,
        .e-datetime-wrap.e-rtl .e-in-wrap.e-padding .e-input, .e-datetime-wrap .e-in-wrap.e-padding .e-select,
        .e-ddl.e-rtl .e-in-wrap .e-input, .e-ddl .e-in-wrap .e-select,
        .e-numeric.e-rtl .e-in-wrap.e-padding .e-input, .e-numeric .e-in-wrap.e-padding .e-select,
        .e-percent.e-rtl .e-in-wrap.e-padding .e-input, .e-percent .e-in-wrap.e-padding .e-select,
        .e-currency.e-rtl .e-in-wrap.e-padding .e-input, .e-currency .e-in-wrap.e-padding .e-select,
        .e-timewidget.e-rtl .e-in-wrap.e-padding .e-input, .e-timewidget .e-in-wrap.e-padding .e-select {
            border-radius: @inner-border-right-radius;
        }

        .e-atc .e-in-wrap.e-padding .e-input, .e-atc.e-rtl .e-in-wrap.e-padding .e-select,
        .e-datewidget .e-in-wrap.e-padding .e-input, .e-datewidget.e-rtl .e-in-wrap.e-padding .e-select,
        .e-datetime-wrap .e-in-wrap.e-padding .e-input, .e-datetime-wrap.e-rtl .e-in-wrap.e-padding .e-select,
        .e-ddl .e-in-wrap .e-input, .e-ddl.e-rtl .e-in-wrap .e-select,
        .e-numeric .e-in-wrap.e-padding .e-input, .e-numeric.e-rtl .e-in-wrap.e-padding .e-select,
        .e-percent .e-in-wrap.e-padding .e-input, .e-percent.e-rtl .e-in-wrap.e-padding .e-select,
        .e-currency .e-in-wrap.e-padding .e-input, .e-currency.e-rtl .e-in-wrap.e-padding .e-select,
        .e-timewidget .e-in-wrap.e-padding .e-input, .e-timewidget.e-rtl .e-in-wrap.e-padding .e-select,
        .e-progressbar .e-progress {
            border-radius: @inner-border-left-radius;
        }

        .e-dialog-wrap > .e-header {
            border-radius: @inner-border-top-radius;
        }
    }

    .e-listbox li {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    .e-corner.e-progressbar .e-progress.e-complete {
        border-radius: 3px 3px 3px 3px;
    }

    .e-atc.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-atc .e-corner.e-in-wrap.e-padding .e-select,
    .e-daterangewidget.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-daterangewidget .e-corner.e-in-wrap.e-padding .e-select,
    .e-datewidget.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-datewidget .e-corner.e-in-wrap.e-padding .e-select,
    .e-datetime-wrap.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-datetime-wrap .e-corner.e-in-wrap.e-padding .e-select,
    .e-ddl.e-rtl .e-corner.e-in-wrap .e-input, .e-ddl .e-corner.e-in-wrap .e-select,
    .e-numeric.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-numeric .e-corner.e-in-wrap.e-padding .e-select,
    .e-percent.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-percent .e-corner.e-in-wrap.e-padding .e-select,
    .e-currency.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-currency .e-corner.e-in-wrap.e-padding .e-select,
    .e-timewidget.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-timewidget .e-corner.e-in-wrap.e-padding .e-select {
        border-radius: 0 3px 3px 0;
    }

    .e-atc .e-corner.e-in-wrap.e-padding .e-input, .e-atc.e-rtl .e-corner.e-in-wrap.e-padding .e-select,
    .e-datewidget .e-corner.e-in-wrap.e-padding .e-input, .e-datewidget.e-rtl .e-corner.e-in-wrap.e-padding .e-select,
    .e-daterangewidget .e-corner.e-in-wrap.e-padding .e-input, .e-daterangewidget .e-corner.e-in-wrap.e-padding .e-input,
    .e-datetime-wrap .e-corner.e-in-wrap.e-padding .e-input, .e-datetime-wrap.e-rtl .e-corner.e-in-wrap.e-padding .e-select,
    .e-ddl .e-corner.e-in-wrap .e-input, .e-ddl.e-rtl .e-corner.e-in-wrap .e-select,
    .e-numeric .e-corner.e-in-wrap.e-padding .e-input, .e-numeric.e-rtl .e-corner.e-in-wrap.e-padding .e-select,
    .e-percent .e-corner.e-in-wrap.e-padding .e-input, .e-percent.e-rtl .e-corner.e-in-wrap.e-padding .e-select,
    .e-currency .e-corner.e-in-wrap.e-padding .e-input, .e-currency.e-rtl .e-corner.e-in-wrap.e-padding .e-select,
    .e-timewidget .e-corner.e-in-wrap.e-padding .e-input, .e-timewidget.e-rtl .e-corner.e-in-wrap.e-padding .e-select,
    .e-corner.e-progressbar .e-progress {
        border-radius: 3px 0 0 3px;
    }

    .e-corner.e-dialog-wrap > .e-header {
        border-radius: 3px 3px 0 0;
    }

    input.e-input, input[type="text"].e-input, .e-input.e-placeholder, .e-ddl.e-widget .e-ul.e-boxes {
        & when (@skin= "material") {
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        & when not (@skin= "material") {
            -webkit-box-shadow: @box-shadow;
            box-shadow: @box-shadow;
        }
    }
    .e-float-container {
        & when (@skin= "material") {
            margin-bottom: 8px;
			padding-top: 16px;
			position: relative;
			width: auto;
        }
    }

    .e-float-text {
        & when (@skin= "material") {
            font-family: "Roboto", Segoe UI;
			top: -4px;
			font-weight: 400;
			padding-left: 2px;
			pointer-events: none;
			position: absolute;
			transform: translate3d(0, 28px, 0) scale(1);
			transform-origin: left top;
			transition: 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
			width: 100%;
			color: #9e9e9e;
        }
    }

    .e-focus + .e-float-text, .e-valid + .e-float-text {
        & when (@skin= "material") {
            top: -8px;
			-webkit-transform: translate3d(0, 6px, 0) scale(0.85);
			transform: translate3d(0, 6px, 0) scale(0.85);
			-webkit-transition: width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
			transition: width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
			transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
			transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
        }
    }

    .e-focus + .e-float-text {
        & when (@skin= "material") {
            color: #ff4081;
        }
    }

    .e-disable {
        opacity: .35;
        filter: Alpha(Opacity=35);
        background-image: none;
    }

    .e-corner-all {
        border-radius: 4px 4px 4px 4px;
    }

    .e-corner-top, .e-corner-left {
        -moz-border-radius-topleft: 4px;
        -webkit-border-top-left-radius: 4px;
        -khtml-border-top-left-radius: 4px;
        border-top-left-radius: 4px;
    }

    .e-corner-top, .e-corner-right {
        -moz-border-radius-topright: 4px;
        -webkit-border-top-right-radius: 4px;
        -khtml-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
    }

    .e-corner-bottom, .e-corner-left {
        -moz-border-radius-topleft: 4px;
        -webkit-border-bottom-left-radius: 4px;
        -khtml-border-bottom-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .e-corner-bottom, .e-corner-right {
        -moz-border-radius-topright: 4px;
        -webkit-border-bottom-right-radius: 4px;
        -khtml-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    /* validation message */
    .e-validation-error {
        & when (@skin= "material") {
            font-family: @font-family;
            font-size: 12px;
            color: #f44336;
            font-weight: normal;
            margin-bottom: 0px;
            margin-top: 8px;
            width: 328px;
            display: inline-block;
        }
        & when (@skin= "office-365") {
            font-family: @font-family;
            font-size: 12px;
            margin: 10px 0 0 0;
            font-weight: 400;
        }
        & when not (@skin= "material") and not (@skin="office-365") {
            font-size: 14px;
            color: #cd0a0a;
        }
    }

    .e-validation-error:before {
        & when (@skin= "material") {
            font-family: 'ej-webfont';
            content: "\e64c";
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            width: 16px;
            height: 16px;
            float: right;
            font-size: 16px;
        }
    }
    .e-textbox.e-validation-error, .e-textarea.e-validation-error {
        & when (@skin= "office-365") {
            margin: 0;
        }
    }

    .e-input, .e-tooltipbox, .e-btn, .e-time-popup, .e-datepicker.e-calendar, .e-menu, .e-uploadbox .e-file-name-txt, .e-uploadbox .e-selectpart,
    .e-uploadbox .e-uploadbtn, .e-uploadbox .e-uploadclosebtn, .e-waitpopup-pane .e-text, .e-tagcloud, .e-toolbar, .e-progressbar, .e-scale .e-tick .tick-value, .e-datetime-popup .e-dt-button, .e-grid, .e-ejinputtext, .e-pager,
    .e-fileexplorer, .e-textbox, .e-textarea {
        font-family: @font-family;

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

        & when (@skin = "material") {
            font-size: 12px;
        }
    }

    .e-menu, input.e-input, input[type="text"].e-input, .e-mask, .e-ul, .e-btn .e-btn-span, .e-tbtn.e-chkbx-hidden, .e-datepicker table, .e-datepicker table th, .e-datepicker table td,
    .e-menu.e-horizontal > .e-list, .e-menu.e-vertical > li.e-separator, .e-menu.e-context > li.e-separator, .e-tab.e-js > .e-header, .e-uploadbox .e-action-perform,
    .e-uploadbox .e-uploaddialog.e-dialog.e-dialog-content, .e-tagcloud .e-load, .e-scale, .e-select, .e-input.e-placeholder {
        margin: 0;
        padding: 0;
        outline: 0 none;
        line-height: normal;
    }

    .e-btn, .e-btn .e-btn-span, .e-datepicker .e-header .e-next, .e-datepicker .e-header .e-prev, .e-datepicker .e-header .e-text, .e-menu > .e-list > a > img, .e-menu > .e-list > span > img,
    .e-menu > .e-list > a > div, .e-menu > .e-list > span > div, .e-menu > .e-list > a > span, .e-menu > .e-list > span > span, .e-menu .e-list > a span.e-icon, .e-menu .e-list > span span.e-icon, .e-menu.e-horizontal > .e-list,
    .e-menu.e-vertical, .e-menu.e-context, .e-chkbox-wrap, .e-radiobtn-wrap, .e-chkbox-wrap div, .e-chkbox-wrap .e-text, .e-radiobtn-wrap .e-text,
    .e-tab.e-js > .e-header, .e-tab .e-header li, .e-tab .e-header li a, .e-dialog .e-dialog-icon, .e-dialog .e-icon, .e-uploadbox .e-selectpart, .e-uploadbox .e-file-list,
    .e-treeview .e-text, .e-tagcloud .e-cloud, .e-tagcloud .e-list, .e-tagcloud .e-cloud .e-tagitems, .e-h-scale .e-tick, .e-grid .e-groupheadercell,
    .e-grid .e-groupheadercell:hover, .e-pager, .e-pager .e-disableditem, .e-grid div.e-parentmsgbar, .e-grid .e-toolbaricons, .e-pager .e-pagercontainer {
        display: inline-block;
    }

    .e-ul {
        list-style-type: none;
    }

    input.e-input, input[type="text"].e-input, .e-input.e-placeholder {
        border: medium none;
        height: 100%;
        width: 100%;
        display: block;
        line-height: 1.908em;

        & when not (@skin= "material") {
            padding-left: 0.857em;
        }
    }

    .e-rtl input.e-input, .e-rtl input[type="text"].e-input, .e-rtl .e-input.e-placeholder, .e-textbox.e-rtl, .e-textarea.e-rtl {
        text-align: right;
        padding-left: 0;
        padding-right: 0.857em;
    }

    .e-in-wrap {
        display: block;
        height: 100%;
        position: relative;
        overflow: hidden;
        border: 1px solid;
    }

    .e-rtl {
        direction: rtl;
    }

    .e-widget, .e-widget [class^="e-"], .e-widget [class*=" e-"] {
        -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: content-box; /* Firefox, other Gecko */
        box-sizing: content-box; /* Opera/IE 8+ */
    }

    .e-widget.e-box, .e-widget .e-box, .e-widget button.e-btn, button.e-btn.e-widget, input.e-btn.e-widget, input.e-input, input[type="text"].e-input, .e-input.e-placeholder, .e-widget input.e-input, .e-lv.e-js .e-header.e-box, .e-textbox, .e-textarea {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box; /* Firefox, other Gecko */
        box-sizing: border-box; /* Opera/IE 8+ */
    }

    .e-scheduledialog.e-dialog .e-dialog-scroller, .e-ss-dialog.e-dialog .e-dialog-scroller {
        -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: content-box; /* Firefox, other Gecko */
        box-sizing: content-box; /* Opera/IE 8+ */
    }

    .e-shadow {
        -moz-box-shadow: 0 0 9px rgba(0,0,0,.4);
        -webkit-box-shadow: 0 0 9px rgba(0,0,0,.4);
        box-shadow: 0 0 9px rgba(0,0,0,.4);
    }

    .e-overlay {
        background-color: gray;
        opacity: 0.5;
        filter: alpha(opacity= 50);
        width: 100%;
        height: 100%;
    }

    .e-tooltipbox {
        font-weight: 600;
        height: auto;
        position: absolute;
        width: auto;
        min-width: 10px;
        text-align: center;
        z-index: 10000;

        & when (@skin= "material") {
            font-size: 10px;
            padding: 4px 8px 0px 8px;
            border: 0 none;
            height: 22px;
            box-sizing: border-box;
        }

        & when (@skin= "office-365") {
            font-size: 12px;
            padding: 0px 12px;
            height: 20px;
            border: 1px solid;
            box-sizing: border-box;
            border-radius: 0px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 2px;
            border: 1px solid;
        }
    }
        .e-slider-wrap.e-horizontal.e-scale-wrap .e-slider.e-js {
        & when (@skin="office-365") {
            border-top: 3px solid;
            border-bottom: 3px solid;
            box-sizing: content-box;
        }
    }

    .e-slider-wrap.e-default-wrap.e-horizontal.e-scale-wrap .e-slider.e-js {
        & when (@skin="office-365") {
            border-top: 4px solid;
            border-bottom: 4px solid;
        }
    }

    .e-slider-wrap.e-horizontal.e-default-wrap .e-scale.e-h-scale {
        & when (@skin="office-365") {
            margin-top: -6px;
            height: 26px !important;
        }
    }

    .e-slider-wrap.e-horizontal.e-default-wrap .e-scale .e-tick:not(.e-large) {
        & when (@skin="office-365") {
            height: 20px !important;
            top: -3px !important;
        }
    }

    .e-slider-wrap.e-horizontal .e-scale.e-h-scale {
        & when (@skin="office-365") {
            margin-top: -3px;
        }
    }

    .e-slider-wrap.e-default-wrap.e-horizontal .e-scale.e-h-scale {
        & when (@skin="office-365") {
            margin-top: -5px;
        }
    }

    .e-slider-wrap.e-vertical.e-scale-wrap .e-slider.e-js {
        & when (@skin="office-365") {
            border-left: 3px solid;
            border-right: 3px solid;
            box-sizing: content-box;
        }
    }

    .e-slider-wrap.e-default-wrap.e-vertical.e-scale-wrap .e-slider.e-js {
        & when (@skin="office-365") {
            border-left: 4px solid;
            border-right: 4px solid;
        }
    }

    .e-slider-wrap.e-default-wrap.e-vertical .e-scale.e-v-scale {
        & when (@skin="office-365") {
            margin-left: 3px;
            width: 26px !important;
        }
    }

    .e-slider-wrap.e-vertical .e-scale.e-v-scale {
        & when (@skin="office-365") {
            margin-left: 3px;
        }
    }

    .e-slider-wrap.e-vertical.e-default-wrap .e-scale .e-tick:not(.e-large) {
        & when (@skin="office-365") {
            width: 20px !important;
            left: 3px !important;
        }
    }

    .e-slider-wrap.e-vertical .e-scale .e-tick .e-tick-value {
        & when (@skin="office-365") {
            margin-right: 2px;
        }
    }

    .e-input::-ms-clear {
        display: none;
    }

    .edge-browser ::-webkit-input-placeholder {
        opacity: 1 !important;
    }

    .e-input::-webkit-input-placeholder, .e-textbox::-webkit-input-placeholder, .e-textarea::-webkit-input-placeholder {
        .watermerk-style();
    }

    .e-input::-moz-placeholder, .e-textbox::-moz-placeholder, .e-textarea::-moz-placeholder {
        .watermerk-style();
    }

    .e-input:-moz-placeholder, .e-textbox:-moz-placeholder, .e-textarea:-moz-placeholder {
        .watermerk-style();
    }

    .e-input:-ms-input-placeholder, .e-textbox:-ms-input-placeholder, .e-textarea:-ms-input-placeholder {
        .watermerk-style();
    }

    .e-input.e-watermark {
        .watermerk-style();
    }

    .watermerk-style() {
        & when (@skin= "material") {
            font-style: normal;
        }
        & when (@skin= "office-365") {
            font-weight: 400;
            font-size: 14px;
        }
        & when not (@skin= "material") and not (@skin="office-365") {
            font-style: italic;
            opacity: 0.6;
            filter: alpha(opacity=60);
        }
    }

    .e-widget .e-input.e-placeholder {
        top: 0;
        position: absolute;
        white-space: nowrap;
        text-align: left;

        & when (@skin= "material") {
            font-style: normal;
        }
        & when (@skin= "office-365") {
            font-weight: 400;
            font-size: 14px;
            line-height: 2.1em;
        }
        & when not (@skin= "material") and not (@skin="office-365") {
            font-style: italic;
        }
    }

    .e-textbox {
        height: @input-height;
    }

    .e-textbox, .e-textarea {
        line-height: 1.908em;
        outline: medium none;
        border: 1px solid;
        & when (@skin= "bootstrap") {
            box-shadow: @box-shadow;
        }

        & when (@skin= "material") {
            border-width: 0 0 1px 0;
            border-radius: 0px;
            padding-left: 0px;
            font-size: 13px;
            box-shadow: none;
            width: 328px;
        }
        & when (@skin= "office-365") {
            width: 300px;
            padding-left: 10px;
            font-size: 14px;
            font-weight: 400;
            box-shadow: none;
        }
        & when not (@skin= "material") and not (@skin="office-365") {
            width: 100%;
            padding-left: 0.857em;
        }
    }

    .e-textbox.e-rtl, .e-textarea.e-rtl {
        & when (@skin= "material") {
            padding-right: 0px;
        }
        & when (@skin= "office-365") {
            padding-right: 10px;
        }
    }

    .e-textbox[disabled], .e-textarea[disabled] {
        & when (@skin= "office-365") {
            opacity: .35;
            filter: Alpha(Opacity=35);
            background-image: none;
        }
    }

    .e-textbox:focus, .e-textarea:focus {
        & when (@skin= "material") {
            border-width: 0 0 2px 0;
        }
    }

    .e-textbox.e-animation:focus, .e-textarea.e-animation:focus {
        & when (@skin= "material") {
            border-width: 0 0 1px 0;
        }
    }

    .e-pinch {
        -ms-touch-action: pinch-zoom;
        touch-action: pinch-zoom;
    }

    .e-pan-x {
        -ms-touch-action: pinch-zoom pan-x;
        touch-action: pinch-zoom pan-x;
    }

    .e-pan-y {
        -ms-touch-action: pinch-zoom pan-y;
        touch-action: pinch-zoom pan-y;
    }

    .e-numeric .e-select .e-spin-up:after,
    .e-numeric .e-select .e-spin-down:after,
    .e-percent .e-select .e-spin-up:after,
    .e-percent .e-select .e-spin-down:after,
    .e-currency .e-select .e-spin-up:after,
    .e-currency .e-select .e-spin-down:after,
    .e-treeview .e-plus:after, .e-treeview .e-minus:after, .e-treeview .e-icon.e-load:after,
    .e-treeview-wrap:not(.e-fullrow-wrap) .e-text:after, .e-fullrow-wrap .e-fullrow:after,
    .e-pager .e-icon.e-animate:after, .e-pager .e-numericitem.e-animate:after,
    .e-schedule .e-resourceexpand:after, .e-schedule .e-resourcecollapse:after,
    .e-btn.e-select:after, .e-tbtn.e-btn:after, .e-split .e-split-btn.e-select.e-left-btn:after, .e-split .e-split-btn.e-select.e-drp-btn:after, .e-groupbutton > .e-ul > .e-grp-btn-item:after,
    .e-datepicker.e-popup .e-header .e-prev:after, .e-datepicker.e-popup .e-header .e-next:after, .e-tooltxt:after,
    .e-colorwidget .e-color-container .e-selected-color::after, .e-colorpicker .e-colorblock .e-color-image.e-add:after,
    .e-colorwidget .e-select .e-icon::after, .e-uploadbox.e-widget .e-selectpart.e-select:after, .e-pivotgrid .filter:after, .e-pivotgrid .sorting:after, .e-pivotgrid .removeBtn:after,
    .e-datepicker.e-popup .e-header .e-prev:not(:active):after,
    .e-datepicker.e-popup .e-header .e-next:not(:active):after,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-icon:not(:active):after,
    .e-daterangepicker-popup .e-drp-button.e-btn.e-select.e-flat:not(:active):after,
    .e-datepicker .e-footer.e-btn.e-select.e-flat:not(:active):after,
    .e-datetime-popup .e-dt-button.e-btn.e-select.e-flat:not(:active):after,
    .e-datepicker .e-datepicker-days td:after,.e-pivotclient .firstPage.pageEnabled:after, .e-pivotclient .prevPage.pageEnabled:after, .e-pivotclient .nextPage.pageEnabled:after, .e-pivotclient .lastPage.pageEnabled:after {
        & when (@skin= "material") {
            .e-ripple-style();
        }
    }

    .e-btn.e-select:after, .e-tbtn.e-btn:after, .e-split .e-split-btn.e-select.e-left-btn:after, .e-split .e-split-btn.e-select.e-drp-btn:after, .e-groupbutton > .e-ul > .e-grp-btn-item:after,
    .e-datepicker.e-popup .e-header .e-prev:after, .e-datepicker.e-popup .e-header .e-next:after, .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-icon:after,
    .e-colorwidget .e-color-container .e-selected-color::after, .e-colorpicker .e-colorblock .e-color-image.e-add:after,
    .e-colorwidget .e-select .e-icon::after {
        & when (@skin= "material") {
            visibility: hidden;
        }
    }

    .e-numeric .e-select .e-animate.e-spin-up:not(:active):after,
    .e-numeric .e-select .e-animate.e-spin-down:not(:active):after,
    .e-percent .e-select .e-animate.e-spin-up:not(:active):after,
    .e-percent .e-select .e-animate.e-spin-down:not(:active):after,
    .e-currency .e-select .e-animate.e-spin-up:not(:active):after,
    .e-currency .e-select .e-animate.e-spin-down:not(:active):after,
    .e-treeview .e-animate.e-plus:not(:active):after, .e-treeview .e-animate.e-minus:not(:active):after, .e-treeview .e-load.e-animate:not(:active):after,
    .e-pager .e-icon.e-animate:not(:active):after, .e-pager .e-numericitem.e-animate:not(:active):after,
    .e-schedule .e-resourcecollapse:not(:active):after, .e-schedule .e-resourceexpand:not(:active):after,
    .e-button.e-btn.e-animate:not(:active):after, .e-tbtn.e-btn.e-animate:not(:active):after,
    .e-split .e-split-btn.e-select.e-btn:not(:active):after, .e-split .e-split-btn.e-select.e-btn:not(:active):after,
    .e-groupbutton > .e-ul > .e-grp-btn-item.e-active:not(:active):after, .e-groupbutton > .e-ul > .e-grp-btn-item:not(:active):after,
    .e-tbtn.e-btn.e-flat.e-animate:not(:active):after, .e-button.e-btn.e-flat.e-animate:not(:active):after, .e-pivotgrid .filter:active:after, .e-pivotgrid .sorting:active:after, .e-pivotgrid .removeBtn:active:after,
    .e-datepicker .e-datepicker-days td.e-active:after,
    .e-daterangepicker-popup .e-datepicker .e-datepicker-days td.e-start-date:after,
    .e-daterangepicker-popup .e-datepicker .e-datepicker-days td.e-end-date:after,
    .e-datetime-popup .e-dt-button.e-btn.e-select.e-flat.e-focus:not(:active):after,
    .e-datepicker .e-footer.e-btn.e-select.e-flat:focus:not(:active):after,
    .e-daterangepicker-popup .e-drp-button.e-btn.e-select.e-flat:focus:not(:active):after,
    .e-datepicker.e-popup .e-header .e-prev:not(:active):after,
    .e-datepicker.e-popup .e-header .e-next:not(:active):after,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-icon:not(:active):after,
    .e-uploadbox.e-widget .e-selectpart.e-select:active:after,.e-pivotclient .firstPage.pageEnabled:active:after, .e-pivotclient .prevPage.pageEnabled:active:after, .e-pivotclient .nextPage.pageEnabled:active:after, .e-pivotclient .lastPage.pageEnabled:active:after {
        & when (@skin= "material") {
            .e-ripple-animation();
        }
    }

    .e-ripple-style() {
        content: '';
        display: block;
        position: absolute;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 0.75;
        filter: alpha(opacity=75);
        width: 50%;
        height: 50%;
        left: 25%;
        top: 25%;
    }

    .e-ripple-animation() {
        -webkit-animation: e-icon-ripple 0.45s linear;
        -moz-animation: e-icon-ripple 0.45s linear;
        -o-animation: e-icon-ripple 0.45s linear;
        -ms-animation: e-icon-ripple 0.45s linear;
        animation: e-icon-ripple 0.45s linear;
    }

    @-webkit-keyframes e-icon-ripple {
        100% {
            opacity: 0;
            -webkit-transform: scale(4);
        }
    }

    @keyframes e-icon-ripple {
        100% {
            opacity: 0;
            transform: scale(4);
        }
    }

    .e-treeview-wrap:not(.e-fullrow-wrap) .e-text:after, .e-fullrow-wrap .e-fullrow:after {
        & when (@skin= "material") {
            width: 10px;
            height: 10px;
            top: 33%;
            left: 45%;
        }
    }

    .e-treeview-wrap:not(.e-fullrow-wrap) .e-text.e-active.e-animate:not(:active):after {
        & when (@skin= "material") {
            -webkit-animation: e-text-ripple 0.45s linear;
            -moz-animation: e-text-ripple 0.45s linear;
            -o-animation: e-text-ripple 0.45s linear;
            -ms-animation: e-text-ripple 0.45s linear;
            animation: e-text-ripple 0.45s linear;
        }
    }

    @-webkit-keyframes e-text-ripple {
        100% {
            opacity: 0;
            -webkit-transform: scale(20);
        }
    }

    @keyframes e-text-ripple {
        100% {
            opacity: 0;
            transform: scale(20);
        }
    }

    .e-fullrow-wrap .e-animate:not(:active) + .e-fullrow:after, .e-fullrow-wrap .e-fullrow.e-animate:not(:active):after {
        & when (@skin= "material") {
            -webkit-animation: e-full-text-ripple 0.45s linear;
            -moz-animation: e-full-text-ripple 0.45s linear;
            -o-animation: e-full-text-ripple 0.45s linear;
            -ms-animation: e-full-text-ripple 0.45s linear;
            animation: e-full-text-ripple 0.45s linear;
        }
    }

    @-webkit-keyframes e-full-text-ripple {
        100% {
            opacity: 0;
            -webkit-transform: scale(70);
        }
    }

    @keyframes e-full-text-ripple {
        100% {
            opacity: 0;
            transform: scale(70);
        }
    }

    .e-treeview-wrap:not(.e-fullrow-wrap) .e-text {
        & when (@skin= "material") {
            position: relative;
            overflow: hidden;
        }
    }

    .e-ripple-bar {
        & when (@skin= "material") {
            position: relative;
            box-shadow: none;
            outline: medium none;
            width: 328px;
            display: block;
        }
    }

    .e-numeric .e-in-wrap:before,
    .e-percent .e-in-wrap:before,
    .e-currency .e-in-wrap:before,
    .e-mask .e-in-wrap:before,
    .e-numeric .e-in-wrap:after,
    .e-percent .e-in-wrap:after,
    .e-currency .e-in-wrap:after,
    .e-mask .e-in-wrap:after,
    .e-ripple-bar:before, .e-ripple-bar:after,
    .e-datewidget .e-in-wrap:before, .e-datewidget .e-in-wrap:after,
    .e-daterangewidget .e-in-wrap:before, .e-daterangewidget .e-in-wrap:after,
    .e-timewidget .e-in-wrap:before, .e-timewidget .e-in-wrap:after,
    .e-datetime-wrap .e-in-wrap:before, .e-datetime-wrap .e-in-wrap:after,
    .e-atc .e-in-wrap:before, .e-atc .e-in-wrap:after,
    .e-ddl .e-in-wrap:before, .e-ddl .e-in-wrap:after,
    .e-colorpicker .e-codeeditor:after, .e-colorpicker .e-buttons .e-codeeditor::before {
        & when (@skin= "material") {
            content: '';
            height: 2px;
            width: 0;
            bottom: -1px;
            position: absolute;
            z-index: 10;
            transition: .2s cubic-bezier(.4,0,.4,1);
            -moz-transition: .2s cubic-bezier(.4,0,.4,1);
            -webkit-transition: .2s cubic-bezier(.4,0,.4,1);
        }
    }    
     .e-colorpicker .e-buttons .e-codeeditor.e-focus::before{
          & when (@skin= "material") {
              width:100%;
              left: 0px;
          }
     }
    .e-colorpicker .e-buttons .e-codeeditor .e-color-code{
        & when (@skin= "material"){
            border-width:0 0 1px 0;
            overflow:visible;
        }
    }

    .e-colorpicker .e-buttons .e-codeeditor .e-color-code:focus{
        & when (@skin= "material"){
            box-shadow:none;
        }
    }
    .e-ddl .e-in-wrap:before, .e-ddl .e-in-wrap:after {
        & when (@skin= "material") {
            content: '';
            height: 2px;
            width: 0;
            bottom: 0px;
            position: absolute;
            z-index: 10;
            transition: .2s cubic-bezier(.4,0,.4,1);
            -moz-transition: .2s cubic-bezier(.4,0,.4,1);
            -webkit-transition: .2s cubic-bezier(.4,0,.4,1);
        }
    }

    .e-textbox + .e-ripple-bar:before, .e-textbox + .e-ripple-bar:after {
        & when (@skin= "material") {
            bottom: 0px;
        }
    }

    .e-textarea + .e-ripple-bar:before, .e-textarea + .e-ripple-bar:after {
        & when (@skin= "material") {
            bottom: 5px;
        }
    }

    .e-numeric .e-in-wrap:before,
    .e-percent .e-in-wrap:before,
    .e-currency .e-in-wrap:before,
    .e-mask .e-in-wrap:before,
    .e-ripple-bar:before,
    .e-datewidget .e-in-wrap:before,
    .e-daterangewidget .e-in-wrap:before,
    .e-timewidget .e-in-wrap:before,
    .e-datetime-wrap .e-in-wrap:before,
    .e-atc .e-in-wrap:before,
    .e-ddl .e-in-wrap:before,
    .e-colorpicker .e-codeeditor:before {
        & when (@skin= "material") {
            left: 50%;
        }
    }

    .e-numeric .e-in-wrap:after,
    .e-percent .e-in-wrap:after,
    .e-currency .e-in-wrap:after,
    .e-mask .e-in-wrap:after,
    .e-ripple-bar:after,
    .e-datewidget .e-in-wrap:after,
    .e-daterangewidget .e-in-wrap:after,
    .e-timewidget .e-in-wrap:after,
    .e-datetime-wrap .e-in-wrap:after,
    .e-atc .e-in-wrap:after,
    .e-ddl .e-in-wrap:after,
    .e-colorpicker .e-codeeditor:after {
        & when (@skin= "material") {
            right: 50%;
        }
    }

    .e-numeric.e-focus .e-in-wrap:before,
    .e-percent.e-focus .e-in-wrap:before,
    .e-currency.e-focus .e-in-wrap:before,
    .e-mask.e-focus .e-in-wrap:before,
    .e-numeric.e-focus .e-in-wrap:after,
    .e-percent.e-focus .e-in-wrap:after,
    .e-currency.e-focus .e-in-wrap:after,
    .e-mask.e-focus .e-in-wrap:after,
    .e-textbox:focus + .e-ripple-bar:before, .e-textbox:focus + .e-ripple-bar:after,
    .e-textarea:focus + .e-ripple-bar:before, .e-textarea:focus + .e-ripple-bar:after,
    .e-datewidget.e-focus .e-in-wrap:before, .e-datewidget.e-focus .e-in-wrap:after,
    .e-daterangewidget.e-focus .e-in-wrap:before, .e-daterangewidget.e-focus .e-in-wrap:after,
    .e-timewidget.e-focus .e-in-wrap:before, .e-timewidget.e-focus .e-in-wrap:after,
    .e-datetime-wrap.e-focus .e-in-wrap:before, .e-datetime-wrap.e-focus .e-in-wrap:after,
    .e-atc.e-focus .e-in-wrap:before, .e-atc.e-focus .e-in-wrap:after,
    .e-ddl.e-popactive .e-in-wrap:before, .e-ddl.e-popactive .e-in-wrap:after,
    .e-colorpicker .e-codeeditor:focus::after {
        & when (@skin= "material") {
            width: 50%;
        }
    }

    .e-numeric .e-in-wrap,
    .e-percent .e-in-wrap,
    .e-currency .e-in-wrap,
    .e-mask .e-in-wrap,
    .e-datewidget .e-in-wrap,
    .e-daterangewidget .e-in-wrap,
    .e-timewidget .e-in-wrap,
    .e-datetime-wrap .e-in-wrap,
    .e-atc .e-in-wrap,
    .e-ddl .e-in-wrap, .e-colorpicker .e-codeeditor {
        & when (@skin= "material") {
            overflow: visible;
        }
    }

    .e-ddl .e-in-wrap {
        & when (@skin= "material") {
            overflow: hidden;
        }
    }

    html {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
}

.mixin(@widget) when (@widget = tooltip), (@widget = none) {

    .e-tooltip-wrap {
        display: none;
        position: absolute;
        max-width: 350px;
        min-width: 50px;
        visibility: visible;
        padding: 0px;
    }

    .e-tooltip-wrap .e-arrowTip {
        height: 10px;
        left: 50%;
        top: 100%;
        overflow: hidden;
        position: absolute;
        width: 20px;
    }

    .e-tooltip-wrap .e-tipContainer {
        position: relative;
        overflow: hidden;
    }

    .e-tooltipShadowLeft {
        box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.06);
    }

    .e-tooltipShadowRight {
        box-shadow: -4px -4px 4px 0px rgba(0,0,0,0.06);
    }

    .e-tooltip-wrap .e-tipContainer .e-tooltipHeader {
        position: relative;
        overflow: hidden;
        display: block;
		& when (@skin= "office-365") {
			padding: 8px;
		}
		& when not (@skin= "office-365") {
			padding: 5px 7px 5px 7px;
		}
    }

    .e-tooltip-wrap .e-tipContainer .e-header {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        float: left;
		& when (@skin= "office-365") {
			 font-weight: 600;
			font-size: 14px;
		}
		& when not (@skin= "office-365") {
			font-weight: bold;
			font-size: 15px;
		}
    }

    .e-tooltip-wrap .e-tipContainer .e-tooltipHeader .e-tooltipTitle {

        overflow: hidden;
        text-overflow: ellipsis;
		& when (@skin= "office-365") {
			 font-weight: 600;
		}
		& when not (@skin= "office-365") {
			font-weight: bold;
		}
    }

    .e-tooltip-wrap .e-tipContainer .e-tooltipHeader .e-close:before {
        content: "\e6f7";
    }

    .e-tooltip-wrap .e-cross-circle:before {
        content: "\e60a";
        color: #474747;
    }

    .e-tooltip-wrap .e-cross-circle {
        top: -9px;
        right: -9px;
        float: right;
        position: absolute;
    }

    .e-tooltip-wrap .e-tipContainer .e-tooltipHeader .e-close {
        float: right;
        padding: 5px;
		& when (@skin= "office-365") {
			width: 12px;
			height: 12px;
			padding-right: 8px;
		}
    }

    .e-def {
        word-wrap: break-word;
    }

    .e-tooltip-wrap .e-tipContainer .e-tipcontent {
        & when (@skin= "material") {
            padding: 2px 8px 2px 8px;
        }

        & when not (@skin= "material") {
			& when (@skin= "office-365") {
				 padding: 10px 8px;
			}
			& when not (@skin= "office-365") {
				padding: 5px 7px;
			}

        }