/*Definition*/
@skin:"material";
@font-family: 'Roboto',Segoe UI,Helvetica Neue,Ubuntu,Arial;
@font-size: 14px;
@font-path: "common-images";
@font-icon-path: "material/icons";
@border-size: 1px;
@border-type: solid;
@header-font-weight:bold;
@header-font-size:16px;
@content-font-weight: normal;
@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:500;
@gantt-schedule-font-size: 13px;
@gantt-tooltip-font-size: 12px;
@gantt-tasklable-font-family:@font-family;
@gantt-tasklable-font-size:13px;
@gantt-tasklable-font-style:normal;
@treegrid-headercell-height:36px;
@treegrid-header-padding:9px;
@input-height: 32px;
@input-width: 328px;
@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: 2px;
@slider-border-radius: 2px;
@slider-handle-size: 12px;
@slider-bs-border-radius: 20px;
@treeview-text-padding: 4px 7px 5px 7px;
@treeview-edit-text-padding: 0 0 0 7px;
@treeview-rtl-edit-text-padding: 0 7px 0 0;
@treeview-ul-padding: 2px 0px 0px 24px;
@treeview-icon-margin: 4px;
@treeview-rtl-item-padding: 2px 24px 2px 0px;
@treeview-rtl-ul-padding: 2px 24px 0px 0px;
@treeview-ul-margin-bottom: -2px;
@treeview-chk-margin-top: 7px;
@treeview-fullrow-height: 32px;
@rte-ul-margin-buttom: 5px;
@rte-ul-margin-top: 6px;
@rte-split-height: 34px;
@rte-toolbar-res-margin-top: 12px;
@fe-toolbar-res-margin-top: 10px;
@fe-treeview-image-top: 5px;
@button-height: 36px;
@border-radius: 2px;
@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: 0 1.83px 1px rgba(0, 0, 0, 0.20);
@button-box-shadow: 0 1.83px 1px rgba(0, 0, 0, 0.20);
@schedule-commonviewbutton: 10px;
@schedule-input-height:30px;
@schedule-viewstable-margin-top:0px;
@schedule-agendaday-line-height:34px;
@schedule-box-shadow:@box-shadow;
@schedule-commonviewbutton-box-shadow: none;
@ribbon-line-height:33px;
@ribbon-resizebtn-height:auto;
@tools-border-radius: 0; 
@header-border-size: 0;
@grid-box-shadow:@box-shadow;

@input-border-width:0px 0px 1px 0px;
@box-shadow-color:#000000;
@spreadsheet-font-family: 'Roboto', Regular;
@spreadsheet-font-size:12px;

.e-ribbon.e-js .e-header .e-active a,.e-ribbon .e-header > .e-apptab .e-apptabanchor,
.e-ribbon .e-expandcollapse span{
    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-spanicon.e-radsmaller .e-icon.e-rad-icon {
    text-indent: 1.2px;
}
.e-radiobtn-wrap .e-radmedium .e-rad-icon {
    text-indent: -1.5px;
}
@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-fileexplorer .e-fe-split-button .e-split,
        .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-no-spin::-webkit-inner-spin-button, .e-no-spin::-webkit-outer-spin-button {
            -webkit-appearance: none;
             margin: 0;
        }
        
     .e-no-spin {
             -moz-appearance:textfield;
        }

    .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-slider-wrap .e-sliderbtn.e-select {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        box-shadow: none;
    }
    
    .e-slider-wrap.e-horizontal .e-decreasebtn.e-select {
        left:0;
        right:auto;
    }

    .e-slider-wrap.e-horizontal.e-rtl .e-decreasebtn.e-select {
        right:0;
        left:auto;
    }

    .e-slider-wrap.e-horizontal .e-increasebtn.e-select {
        right:0;
        left:auto;
    }

    .e-slider-wrap.e-horizontal.e-rtl .e-increasebtn.e-select {
        left:0;
        right:auto;
    }

    .e-slider-wrap.e-vertical .e-increasebtn.e-select {
        top:0;
        bottom:auto;
    }

    .e-slider-wrap.e-vertical.e-top-to-bottom .e-increasebtn.e-select {
        bottom:0;
        top:auto;
    }
	
	.e-slider-wrap.e-vertical.e-top-to-bottom.e-rtl {
		direction: ltr;
    }

        .e-slider-wrap.e-vertical.e-top-to-bottom .e-decreasebtn.e-select {
        top:0;
        bottom:auto;
    }
        .e-slider-wrap.e-vertical .e-top.e-decreasebtn.e-select {
         bottom:0;
         top:auto;
    }

   .e-slider-wrap.e-horizontal.e-slider-buttons{
        position:relative !important;
        padding-right: 40px !important;
        padding-left: 40px !important;
    }

    .e-slider-wrap.e-vertical.e-slider-buttons{
            position:relative !important;
            padding-top:40px !important;
            padding-bottom:40px !important;
        }

   .e-slider-wrap .e-sliderbtn.e-select:active {
        & when (@skin= "material") {
            border-radius: 10px;
            box-shadow: none;
        }
    }

    .e-slider-wrap .e-sliderbtn.e-select:hover {
        & when (@skin= "material") {
            box-shadow: none;
        }
    }

    .e-slider-wrap .e-sliderbtn:not(.e-animate).e-select:not(:active):after {
        & when (@skin= "material") {
            position: absolute;
            width: 35px;
            height: 35px;
            content: "";
            top: -7.1px;
            left: -7.8px;
            border-radius: 30px;
            opacity: 0.12;
            transform: scale(0,0);
            animation: sliderFocusHandle .7s cubic-bezier(.35,0,.25,1);
            visibility: visible;
            }
        }

    .e-slider-wrap .e-sliderbtn.e-select {
        & when (@skin= "material") {
            overflow: visible;
            }
        }

    .e-slider-wrap .e-sliderbtn .e-icon.e-plus:before {
        & when (@skin= "material") {
            content: "\e861";
        }

        & when (@skin= "office-365") {
            content: "\e88a";
        }

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

    .e-slider-wrap .e-sliderbtn .e-icon.e-minus:before {
        & when (@skin= "material") {
            content: "\e860";
        }

        & when (@skin= "office-365") {
            content: "\e889";
        }

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

    .e-sliderbtn.e-btn.e-select .e-icon{
        & when (@skin= "material") {
            padding: 0 !important;
            font-size:21px;
        }

       & when not (@skin= "material") {
            padding: 0px 2px 0.5px 2px;
        }
       }
        

        .e-sliderbtn.e-btn.e-select .e-btn-span{
           & when (@skin= "material") {
            margin-left:-11px;
            margin-top:-8px;
        }
           & when not (@skin= "material") {
            display:block;
        }
       }

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

    .e-tooltip-wrap .e-corner {
        border-radius: 2px 2px 2px 2px;
    }

    div.e-tooltip-wrap.e-customAnimation {
        & when (@skin="material") {
            webkit-transition: all .4s cubic-bezier(.25,.8,.25,1);
            transition: all .4s cubic-bezier(.25,.8,.25,1);
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
    }

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

    .e-rtl {
        direction: rtl;
    }
}

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

    .e-btn,  .e-btn,  .e-btn {
        cursor: pointer;
        overflow: hidden;
        text-align: center;
        text-decoration: none;
        border: medium none;
        box-shadow: @button-box-shadow;

        & when (@skin="office-365") {
            font-family: @font-family;
            font-weight: 600;
            font-size: 14px;
        }
    }

    .e-btn.e-select, .e-btn.e-select {
        & when not(@skin="material") {
            border: 1px solid;
        }
    }

    .e-btn,  .e-btn,  .e-btn, .e-btn .e-btn-span {
        vertical-align: middle;
        border-spacing: 0;
    }

    .e-btn .e-icon,  .e-split-btn-div .e-icon {
        display: table-cell;
        padding: 4px 3px;
        visibility: visible;
        vertical-align: middle;
    }

     .e-split-btn-div .e-icon {
        & when (@skin="material") {
            font-size: 14px;
        }

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

        & when (@skin="office-365") {
            font-size: 14px;
        }
    }

    .e-btn.e-btn-normal .e-icon {
        & when (@skin="material") {
            padding: 8px;
        }
    }

    .e-rtl .e-splitarrowleft .e-split-btn.e-left-btn {
        border-left: 1px solid;
    }

    .e-rtl .e-splitarrowright .e-split-btn.e-left-btn {
        & when (@skin="office-365") {
            border: none;
        }

        & when not (@skin="office-365") {
            border-right: 1px solid;
        }
    }

    .e-split.e-btn-normal .e-in-wrap .e-left-btn .e-icon {
        & when (@skin="material") {
            padding: 4px;
        }
    }

    .e-btn.e-btn-normal.e-txt,.e-btn.e-btn-normal.e-txt {
        & when (@skin="office-365") {
            padding: 0px 20px 0px;
        }
    }

    .e-btn.e-txt, .e-btn.e-txt {
        & when not (@skin="material") {
            padding: 0.1em 0.4em 0.3em;
        }
    }

    .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 {
        & when (@skin="office-365") {
            border-radius: 0px;
        }
    }

    .e-split .e-btn.e-txt {
        padding: 0.1em 0.4em 0.3em;
    }

    .e-btn .e-btntxt,  .e-tbtn.e-txt {
        width: auto;
        cursor: default;
        display: table-cell;
        vertical-align: middle;
        line-height: normal;

        & when (@skin="material") {
            padding: 0px;
        }

        & when not (@skin="material") {
            padding: 0.1em 0.15em 0.3em;
        }

        & when (@skin="office-365") {
            padding: 0px;
        }
    }

    .e-btn.e-btn-normal, .e-btn.e-btn-normal, .e-btn.e-btn-normal, .e-tbtn.e-btn-normal {
        & when (@skin="material") {
            padding: 0px 16px;
            font-size: 14px;
        }

        height: @button-height;

        & when (@skin="office-365") {
            font-size: 14px;
        }
    }

    .e-btn.e-btn-mini, .e-btn.e-btn-mini, .e-btn.e-btn-mini,  .e-tbtn.e-btn-mini {
        & when (@skin="material") {
            padding: 0px 8px;
            height: 28px;
            width: 58px;
        }

        & when not (@skin="material") {
            height: 28px;
            width: 63px;
        }
    }

    .e-btn.e-btn-small, .e-btn.e-btn-small , .e-btn.e-btn-small, .e-tbtn.e-btn-small {
        & when (@skin="material") {
            padding: 0px 10px;
            height: 32px;
            width: 72px;
        }

        & when not (@skin="material") {
            height: 32px;
            width: 89px;
        }
    }

    .e-btn.e-select.e-btn-medium,  .e-tbtn.e-select.e-btn-medium {
        & when (@skin="material") {
            padding: 0px 12px;
            height: 36px;
            width: 84px;
        }

        & when not (@skin="material") {
            height: 36px;
            width: 113px;
        }
    }

    .e-btn.e-btn-large, .e-btn.e-btn-large , .e-btn.e-btn-large ,  .e-tbtn.e-btn-large {
        & when (@skin="material") {
            padding: 0px 20px;
            height: 40px;
            width: 110px;
        }

        & when not (@skin="material") {
            height: 40px;
            width: 130px;
        }
    }

    .e-btn.e-btn-normal,  .e-btn.e-btn-normal,  .e-btn.e-btn-normal,  .e-tbtn.e-btn-normal, .e-split.e-btn-normal .e-split-btn.e-select, .e-split .e-btn-arrowsplit-normal .e-split-btn.e-select {
        & when (@skin="material") {
            font-size: 14px;
        }
    }

    .e-btn.e-btn-large,  .e-btn.e-btn-large,  .e-btn.e-btn-large,  .e-tbtn.e-btn-large, .e-split.e-btn-large .e-split-btn.e-select, .e-split .e-btn-arrowsplit-large .e-split-btn.e-select {
        & when (@skin="material") {
            font-size: 16px;
        }

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

    .e-btn.e-btn-mini, .e-btn.e-btn-mini, .e-btn.e-btn-mini ,  .e-tbtn.e-btn-mini, .e-split.e-btn-mini .e-split-btn.e-select, .e-split .e-btn-arrowsplit-mini .e-split-btn.e-select {
        & when (@skin="material") {
            font-size: 11px;
        }

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

    .e-btn.e-btn-small,  .e-btn.e-btn-small,  .e-btn.e-btn-small,  .e-tbtn.e-btn-small, .e-split.e-btn-small .e-split-btn.e-select, .e-split .e-btn-arrowsplit-small .e-split-btn.e-select {
        font-size: 13px;
    }

    .e-btn.e-btn-medium,  .e-btn.e-btn-medium,  .e-btn.e-btn-medium,  .e-tbtn.e-btn-medium, .e-split.e-btn-medium .e-split-btn.e-select, .e-split .e-btn-arrowsplit-medium .e-split-btn.e-select {
        font-size: 14px;
    }

     .e-split-btn.e-select {
        vertical-align: initial;
    }

    .e-tbtn-wrap {
        display: block;
    }

     .e-tbtn.e-chkbx-hidden {
        border: 0 none;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        position: absolute;
        width: 1px;
        opacity: 0;
        filter: Alpha(Opacity=0);
    }

    .e-tbtn-wrap label {
        cursor: pointer;
        display: block;
        font-weight: normal;
        margin-bottom: 0;
    }

    .e-split.e-btn-small {
        height: 32px;
        width: 89px;
    }

    .e-split.e-btn-mini {
        height: 28px;
        width: 63px;
    }

    .e-split.e-btn-normal {
        height: 30px;

        & when (@skin="office-365") {
            height: 32px !important;
        }
    }

    .e-split.e-btn-medium {
        height: 36px;
        width: 113px;
    }

    .e-split.e-btn-large {
        height: 40px;
        width: 130px;
    }

    .e-split.e-btn-arrowsplit-large {
        height: 64px;
        width: 135px;
    }

     .e-split.e-btn-arrowsplit-medium {
        height: 60px;
        width: 113px;
    }

    .e-split.e-btn-arrowsplit-normal {
        height: 54px;
    }

    .e-split.e-btn-arrowsplit-mini {
        height: 52px;
        width: 63px;
    }

    .e-split.e-btn-arrowsplit-small {
        height: 56px;
        width: 89px;
    }

    .e-split.e-btn-arrowsplit-small.e-drop {
        height: 42px;
        width: 89px;
    }

    .e-split.e-btn-arrowsplit-large.e-drop {
        height: 50px;
        width: 135px;
    }

    .e-split.e-btn-arrowsplit-medium.e-drop {
        height: 46px;
        width: 113px;
    }

    .e-split.e-btn-arrowsplit-normal.e-drop {
        height: 40px;
    }

    .e-split.e-btn-arrowsplit-mini.e-drop {
        height: 38px;
        width: 63px;
    }

    .e-split {
        display: block;
        position: relative;
        margin: 0;
        overflow: hidden;
    }

    .e-split.e-btnrtl {
        padding: 0;
    }

     .e-split-btn,  .e-split-btn.e-left-btn {
        height: 100%;
    }

     .e-split-btn.e-btn-txt {
        & when not(@skin="material") {
            width: 24px;
        }

        height: 100%;
    }

     .e-split-btn.e-left-btn {
        width: 100%;
    }

    .e-split.e-btn-normal .e-split-btn.e-left-btn {
        & when (@skin="office-365") {
            height: 32px;
        }
    }

     .e-split-btn.e-rht-btn {
        width: 24px;
        height: 100%;
    }

     .e-split-btn.e-drp-btn.e-select {
        float: left;
        position: absolute;
    }

     .e-split.e-drop .e-in-wrap .e-left-btn .e-split-btn-div .e-icon,  .e-split.e-drop .e-in-wrap .e-left-btn .e-split-btn-div .e-icon:before {
        & when (@skin="material") {
            height: 18px;
            width: 18px;
            font-size: 14px;
        }

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

        & when (@skin="office-365") {
            font-size: 14px;
        }
    }

    .e-split.e-btn-normal.e-drop .e-in-wrap .e-left-btn .e-split-btn-div .e-icon, .e-split.e-btn-normal.e-drop .e-in-wrap .e-left-btn .e-split-btn-div .e-icon:before {

        & when (@skin="office-365") {
            height: 22px;
            font-size: 14px;
        }
    }

    .e-split .e-in-wrap {
        border: none;
    }

    .e-split .e-padding {
        & when not(@skin="material") {
            padding: 0 24px 0 0;
        }
    }

    .e-split.e-rtl .e-padding, .e-split.e-btn-normal.e-rtl .e-padding.e-splitarrowright, .e-split.e-btn-normal .e-padding.e-splitarrowleft {
        & when not(@skin="material") {
            padding: 0 0 0 24px;
        }
    }


    .e-split.e-btn-mini .e-padding.e-splitarrowright, .e-split.e-btn-mini.e-rtl .e-padding.e-splitarrowleft,
    .e-split.e-btn-normal .e-padding.e-splitarrowright, .e-split.e-btn-normal.e-rtl .e-padding.e-splitarrowleft {
        & when (@skin="material") {
            padding: 0 24px 0 0;
        }
    }

    .e-split.e-btn-small .e-padding.e-splitarrowright, .e-split.e-btn-small.e-rtl .e-padding.e-splitarrowleft {
        & when (@skin="material") {
            padding: 0 34px 0 0;
        }
    }

    .e-split .e-in-wrap .e-left-btn .e-icon, .e-split .e-in-wrap .e-left-btn .e-icon:before {
        & when (@skin="material") {
            height: 24px;
            width: 24px;
            padding: 0;
            font-size: 24px;
        }
    }

    .e-split.e-btn-medium .e-padding.e-splitarrowright, .e-split.e-btn-medium.e-rtl .e-padding.e-splitarrowleft,
    .e-split.e-btn-large .e-padding.e-splitarrowright, .e-split.e-btn-large.e-rtl .e-padding.e-splitarrowleft {
        & when (@skin="material") {
            padding: 0 40px 0 0;
        }
    }

    .e-split.e-btn-mini.e-rtl .e-padding.e-splitarrowright, .e-split.e-btn-mini .e-padding.e-splitarrowleft, .e-split.e-btn-normal.e-rtl .e-padding.e-splitarrowright, .e-split.e-btn-normal .e-padding.e-splitarrowleft {
        & when (@skin="material") {
            padding: 0 0 0 24px;
        }
    }

    .e-split.e-btn-small.e-rtl .e-padding.e-splitarrowright, .e-split.e-btn-small .e-padding.e-splitarrowleft {
        & when (@skin="material") {
            padding: 0 0 0 34px;
        }
    }

    .e-split.e-btn-medium.e-rtl .e-padding.e-splitarrowright, .e-split.e-btn-medium .e-padding.e-splitarrowleft,
    .e-split.e-btn-large.e-rtl .e-padding.e-splitarrowright, .e-split.e-btn-large .e-padding.e-splitarrowleft {
        & when (@skin="material") {
            padding: 0 0 0 40px;
        }
    }

    .e-split.e-drop .e-padding {
        padding: 0;
    }

    .e-split .e-padding.e-splitarrowleft, .e-split.e-rtl .e-padding.e-splitarrowright {
        & when not (@skin="material") {
            padding: 0 0 0 24px;
        }
    }

    .e-split.e-rtl .e-padding.e-splitarrowleft, .e-split .e-padding.e-splitarrowright {
        & when not (@skin="material") {
            padding: 0 24px 0 0;
        }
    }

     .e-splitarrowleft .e-split-btn.e-rht-btn,  .e-splitarrowleft .e-split-btn.e-btn-txt {
        & when not (@skin="material") {
            width: 24px;
        }

        height: 100%;
        left: 0;
    }

     .e-splitarrowleft .e-split-btn.e-left-btn {
        border-left: medium none;
    }

    .e-split.e-rtl .e-splitarrowleft .e-split-btn.e-rht-btn, .e-split.e-rtl .e-splitarrowleft .e-split-btn.e-btn-txt {
        right: 0;
    }

     .e-splitarrowright .e-split-btn.e-rht-btn.e-btn-normal,  .e-splitarrowright .e-split-btn.e-btn-txt.e-btn-normal {
        width: 24px;
        height: 100%;
    }

    .e-split.e-btn-normal .e-splitarrowright .e-split-btn.e-rht-btn, .e-split.e-btn-normal .e-splitarrowright .e-split-btn.e-btn-txt {
        & when (@skin="office-365") {
            height: 32px;
        }
    }

     .e-splitarrowright .e-split-btn.e-left-btn {
        border-right: medium none;
    }

     .e-splitarrowleft .e-split-btn.e-left-btn {
        border-left: medium none;
    }

     .e-splitarrowtop .e-split-btn.e-left-btn {
        border-top: medium none;
    }

     .e-splitarrowtop .e-split-btn.e-left-btn {
        border-top: medium none;
    }

    .e-split.e-rtl .e-splitarrowright .e-split-btn.e-rht-btn, .e-split.e-rtl .e-splitarrowright .e-split-btn.e-btn-txt {
        left: 0;
    }

    .e-split .e-padding.e-splitarrowbottom {
        padding: 0 0 24px 0;
    }

     .e-splitarrowbottom .e-split-btn.e-rht-btn,  .e-splitarrowbottom .e-split-btn.e-btn-txt {
        height: 24px;
        width: 100%;
        bottom: 0;
        left: 0;
    }

     .e-splitarrowbottom .e-split-btn.e-left-btn {
        border-bottom: medium none;
    }

    .e-split .e-padding.e-splitarrowtop {
        padding: 24px 0 0 0;
    }

     .e-splitarrowtop .e-split-btn.e-rht-btn,  .e-splitarrowtop .e-split-btn.e-btn-txt {
        height: 24px;
        width: 100%;
        top: 0;
        left: 0;
    }

     .e-splitarrowtop .e-split-btn.e-left-btn {
        border-top: medium none;
    }

    .e-split.e-drop .e-droparrowleft, .e-split.e-drop.e-rtl .e-droparrowright {
        padding: 0 0 0 15px;
    }

    .e-split.e-drop.e-rtl .e-droparrowleft, .e-split.e-drop .e-droparrowright {
        padding: 0 15px 0 0;
    }

     .e-droparrowleft .e-split-btn-div {
        left: 0;
        top: 50%;

        & when (@skin="material") {
            margin-top: -6px;
        }

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

     .e-splitbutton.e-btn {
        box-sizing: border-box;
    }

    .e-split.e-rtl .e-droparrowleft .e-split-btn-div {
        right: 0;
        left: auto;
        top: 50%;

        & when (@skin="material") {
            margin-top: -6px;
        }

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

     .e-droparrowright .e-split-btn-div {
        right: 0;
        top: 50%;

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

        & when (@skin="material") {
            margin-top: -6px;
        }
    }

    .e-split.e-rtl .e-droparrowright .e-split-btn-div {
        left: 0;
        right: auto;
        top: 50%;

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

        & when (@skin="material") {
            margin-top: -6px;
        }
    }

    .e-split.e-active .e-droparrowright .e-split-btn-div, .e-split.e-active.e-rtl .e-droparrowright .e-split-btn-div,
    .e-split.e-active .e-droparrowleft .e-split-btn-div, .e-split.e-active.e-rtl .e-droparrowleft .e-split-btn-div {
        & when (@skin= "material") and not (@skin="office-365") {
            margin-top: -10px;
        }
    }

    .e-split.e-drop .e-droparrowbottom {
        padding: 0 0 15px 0;
    }

     .e-droparrowbottom .e-split-btn-div {
        bottom: 0;
        left: 50%;
        margin-left: -10px;
    }

    .e-split.e-drop .e-droparrowtop {
        padding: 10px 0 0 0;
    }

     .e-droparrowtop .e-split-btn-div {
        top: 2px;
        left: 50%;
        margin-left: -10px;
    }

    .e-split.e-menu {
        & when (@skin="material") {
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
            border-radius: 2px;
            background: #ffffff;
        }

        & when not (@skin="material") {
            border-radius: 0px;
            box-shadow: @box-shadow;
        }
    }

    .e-split.e-menu.e-corner {
        & when not (@skin="material") {
            border-radius: 4px;
        }
    }

    .e-split.e-context, .e-split.e-context li.e-list.e-haschild {
        overflow: visible;
    }

    .e-split.e-context li.e-list, .e-split.e-context li.e-list.e-haschild span {
        overflow: hidden;
    }

    .e-flat-icon-btn.e-btn.e-select.e-icon, .e-icon-btn.e-btn.e-select.e-icon,  .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon, .e-float-btn.e-btn.e-select.e-icon, .e-primary-icon-btn.e-btn.e-select.e-icon {
        height: 56px;
        width: 56px;
        overflow: hidden;

        & when (@skin="office-365") {
            height: 32px;
            width: 32px;
            font-size: 16px;
        }
    }

    .e-icon-btn.e-btn.e-select.e-icon,  .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon, .e-float-btn.e-btn.e-select.e-icon, .e-primary-icon-btn.e-btn.e-select.e-icon {
        border-radius: 100%;
    }

    .e-flat-icon-btn.e-btn.e-select.e-icon > .e-btn-span, .e-icon-btn.e-btn.e-select.e-icon > .e-btn-span, .e-togglebutton.e-btn.e-tbtn.e-select.e-toggle-icon-btn.e-icon > .e-btn-span, .e-float-btn.e-btn.e-select.e-icon > .e-btn-span, .e-primary-icon-btn.e-btn.e-select.e-icon > .e-btn-span {
        display: none;
    }

     .e-split-btn.e-btn .e-btn-span {
        & when (@skin="material") {
            padding: 0px;
        }
    }

     .e-split-btn.e-btn.e-droparrowright .e-btn-span.e-split-btn-div span.e-icon, .e-split-btn.e-btn.e-droparrowleft .e-btn-span.e-split-btn-div span.e-icon {
        & when (@skin="material") {
            padding: 0px 2px;
        }
    }

    .e-split.e-btn-small [class*="e-splitarrow"] .e-split-btn.e-left-btn {
        & when (@skin="material") {
            padding: 0px 10px;
        }
    }

    .e-split.e-btn-small .e-split-btn.e-drp-btn {
        & when (@skin="material") {
            padding: 0px 8px;
        }
    }

    .e-split.e-btn-medium [class*="e-splitarrow"] .e-split-btn.e-left-btn {
        & when (@skin="material") {
            padding: 0px 12px;
        }
    }

    .e-split.e-btn-medium .e-split-btn.e-drp-btn {
        & when (@skin="material") {
            padding: 0px 8px;
        }
    }


    .e-split.e-btn-large [class*="e-splitarrow"] .e-split-btn.e-left-btn {
        & when (@skin="material") {
            padding: 0px 12px;
        }
    }

    .e-split.e-btn-large .e-split-btn.e-drp-btn {
        & when (@skin="material") {
            padding: 0px 8px;
        }
    }

    .e-split.e-btn-mini.e-drp-btn .e-split-btn-div, .e-split.e-btn-small .e-drp-btn .e-split-btn-div {
        & when (@skin="material") {
            width: 18px;
        }
    }

    .e-split.e-btn-normal .e-drp-btn .e-split-btn-div {
        & when (@skin="material") {
            width: 24px;
            margin-left: 4px;
        }
    }

    .e-split.e-btn-medium .e-drp-btn, .e-split.e-btn-large .e-drp-btn {
        & when (@skin="material") {
            width: 40px;
        }
    }

    .e-split.e-btn-mini .e-drp-btn {
        & when (@skin="material") {
            width: 24px;
        }
    }

    .e-split.e-btn-small .e-drp-btn {
        & when (@skin="material") {
            width: 34px;
        }
    }

    .e-split .e-splitarrowright .e-splitbutton.e-corner, .e-split .e-splitarrowright .e-splitbutton, .e-split .e-splitarrowright .e-corner .e-drp-btn {
        & when (@skin="material") {
            border-radius: 0px;
            border: 0px;
        }
    }

    .e-split.e-widget.e-active .e-in-wrap .e-split-btn-div .e-icon {
        & when (@skin="material") {
            transform: rotate(180deg);
        }
    }

    .e-split.e-widget .e-in-wrap .e-split-btn-div .e-icon {
        & when (@skin="material") {
            transform: rotate(0deg);
            transition: transform 300ms ease;
        }
    }

    .e-split.e-widget.e-disable:hover, .e-split.e-widget.e-disable:focus, .e-split.e-widget.e-disable:hover:focus {
        & when (@skin="material") {
            background-color: transparent;
            box-shadow: none;
        }
    }

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

    .e-split.e-corner, .e-split .e-splitarrowright .e-corner + .e-drp-btn {
        & when (@skin= "office-365") {
            border-radius: 0px;
        }
    }

    .e-split.e-menu.e-context .e-list {
        & when (@skin= "office-365") {
            line-height: 34px;
        }
    }

    .e-split.e-widget .e-splitarrowleft .e-splitbutton.e-corner, .e-split.e-widget .e-splitarrowright .e-corner + .e-drp-btn, .e-rtl.e-split.e-widget .e-splitarrowright .e-splitbutton.e-corner, .e-rtl.e-split.e-widget .e-splitarrowleft .e-corner + .e-drp-btn {
        & when(@skin="material") {
            border-radius: 0px 2px 2px 0px;
        }
    }

    .e-split.e-widget .e-splitarrowright .e-splitbutton.e-corner, .e-split.e-widget .e-splitarrowleft .e-corner + .e-drp-btn, .e-rtl.e-split.e-widget .e-splitarrowleft .e-splitbutton.e-corner, .e-rtl.e-split.e-widget .e-splitarrowright .e-corner + .e-drp-btn {
        & when(@skin="material") {
            border-radius: 0px 2px 2px 0px;
        }
    }

    .e-split.e-widget .e-split-btn.e-left-btn, .e-split.e-widget .e-split-btn.e-drp-btn {
        & when (@skin="material") {
            background: none;
            border-color: transparent;
            box-shadow: none;
        }
    }
}

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

    .e-numeric .e-in-wrap, .e-percent .e-in-wrap, .e-currency .e-in-wrap, .e-mask .e-in-wrap {
        border-width: @input-border-width;
    }

    .e-numeric,.e-percent, .e-currency, .e-mask {
        display: block;
        overflow: visible;
        height: @input-height;
        width: @input-width;
    }

    .e-numeric .e-spin, .e-percent .e-spin, .e-currency .e-spin {
        position: absolute;
        right: 0;
        border: 0 none;
        cursor: pointer;
    }

    .e-numeric .e-spin-up, .e-numeric .e-spin-down, .e-percent .e-spin-up, .e-percent .e-spin-down, .e-currency .e-spin-up, .e-currency .e-spin-down {
        display: block;

        & when (@skin= "material") {
            height: 100%;
            width: 50%;
        }

        & when not (@skin= "material") {
            height: 50%;
            width: 100%;
        }
    }

    .e-numeric .e-spin-up, .e-percent .e-spin-up, .e-currency .e-spin-up {
        top: 0;
    }

    .e-numeric .e-spin-down, .e-percent .e-spin-down, .e-currency .e-spin-down {
        bottom: 0;
    }

    .e-numeric .e-padding, .e-percent .e-padding, .e-currency .e-padding,
    .e-numeric:hover .e-padding, .e-percent:hover .e-padding, .e-currency:hover .e-padding {
        & when (@skin= "material") {
            padding: 0 48px 0 0;
        }

        & when (@skin= "office-365") {
            padding: 0 30px 0 0;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            padding: 0 24px 0 0;
        }
    }

    .e-numeric .e-icon, .e-percent .e-icon, .e-currency .e-icon {
        display: block;
        width: 100%;
        position: absolute;
        top: 50%;
    }

    .e-numeric .e-icon, .e-percent .e-icon, .e-currency .e-icon {
        height: 8px;
        margin-top: -4px;

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

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

    .e-numeric .e-select, .e-percent .e-select, .e-currency .e-select, .e-mask .e-select {
        cursor: pointer;
        display: block;
        position: absolute;
        right: 0;
        text-align: left;
        border-left: 1px solid;
        top: 0;

        & when (@skin= "material") {
            width: 48px;
            height: 99.9%;
        }

        & when (@skin= "office-365") {
            width: 30px;
            height: 100%;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            width: 23px;
            height: 100%;
        }
    }

   .e-numeric.e-rtl .e-select, .e-percent.e-rtl .e-select, .e-currency.e-rtl .e-select, .e-mask.e-rtl .e-select {
        border-right: 1px solid;
        border-left: none;
    }

    .e-numeric.e-rtl .e-in-wrap.e-padding, .e-percent.e-rtl .e-in-wrap.e-padding, .e-currency.e-rtl .e-in-wrap.e-padding,
    .e-numeric.e-rtl:hover .e-in-wrap.e-padding, .e-percent.e-rtl:hover .e-in-wrap.e-padding, .e-currency.e-rtl:hover .e-in-wrap.e-padding {
        & when (@skin= "material") {
            padding: 0 0 0 48px;
        }

        & when (@skin= "office-365") {
            padding: 0 0 0 30px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            padding: 0 0 0 24px;
        }
    }

    .e-numeric .e-input, .e-percent .e-input, .e-currency .e-input, .e-mask .e-input {
        & when (@skin= "material") {
            font-size: 13px;
        }

        & when (@skin= "office-365") {
            font-size: 14px;
            font-weight: 400;
        }
    }

    .e-numeric .e-in-wrap,
    .e-percent .e-in-wrap,
    .e-currency .e-in-wrap,
    .e-mask .e-in-wrap,
    .e-numeric .e-in-wrap .e-input,
    .e-percent .e-in-wrap .e-input,
    .e-currency .e-in-wrap .e-input,
    .e-mask .e-in-wrap .e-input {
        & when (@skin= "material") {
            border-radius: 0px;
        }
    }

    .e-numeric input.e-input, .e-numeric input[type="text"].e-input, .e-numeric .e-input.e-placeholder,
    .e-percent input.e-input, .e-percent input[type="text"].e-input, .e-percent .e-input.e-placeholder,
    .e-currency input.e-input, .e-currency input[type="text"].e-input, .e-currency .e-input.e-placeholder,
    .e-mask input.e-input, .e-mask input[type="text"].e-input,.e-mask .e-input.e-placeholder {
        & when (@skin= "material") {
            padding-left: 0px;
        }

        & when (@skin= "office-365") {
            padding-left: 10px;
            box-shadow: none;
        }
    }

    .e-numeric.e-rtl input.e-input, .e-numeric.e-rtl input[type="text"].e-input, .e-numeric.e-rtl .e-input.e-placeholder,
    .e-percent.e-rtl input.e-input, .e-percent.e-rtl input[type="text"].e-input, .e-percent.e-rtl .e-input.e-placeholder,
    .e-currency.e-rtl input.e-input, .e-currency.e-rtl input[type="text"].e-input, .e-currency.e-rtl .e-input.e-placeholder,
   .e-mask.e-rtl input.e-input, .e-mask.e-rtl input[type="text"].e-input, .e-mask.e-rtl .e-input.e-placeholder {
        & when (@skin= "material") {
            padding-right: 0px;
        }

        & when (@skin= "office-365") {
            padding-right: 10px;
            padding-left: 0px;
        }
    }

    .e-numeric .e-select .e-spin-up.e-active,
    .e-numeric .e-select .e-spin-down.e-active,
    .e-percent .e-select .e-spin-up.e-active,
    .e-percent .e-select .e-spin-down.e-active,
    .e-currency .e-select .e-spin-up.e-active,
    .e-currency .e-select .e-spin-down.e-active,
    .e-numeric .e-select .e-spin-up:hover,
    .e-numeric .e-select .e-spin-down:hover,
    .e-percent .e-select .e-spin-up:hover,
    .e-percent .e-select .e-spin-down:hover,
    .e-currency .e-select .e-spin-up:hover,
    .e-currency .e-select .e-spin-down:hover {
        & when (@skin= "material") {
            border-radius: 2px;
        }
    }

    .e-numeric .e-spin-up, .e-percent .e-spin-up, .e-currency .e-spin-up {
        & when (@skin= "material") {
            right: 50%;
        }
    }

    .e-numeric input.e-input, .e-numeric input[type="text"].e-input,
    .e-percent input.e-input, .e-percent input[type="text"].e-input,
    .e-currency input.e-input, .e-currency input[type="text"].e-input,
    .e-mask input.e-input, .e-mask input[type="text"].e-input {
        & when (@skin= "material") {
            box-shadow: none;
        }
    }

    .e-numeric.e-error .e-in-wrap, .e-percent.e-error .e-in-wrap, .e-currency.e-error .e-in-wrap {
        & when (@skin= "material") {
            border-width: 0px 0px 2px;
        }
    }

    .e-numeric .e-select .e-spin-up,
    .e-numeric .e-select .e-spin-down,
    .e-percent .e-select .e-spin-up,
    .e-percent .e-select .e-spin-down,
    .e-currency .e-select .e-spin-up,
    .e-currency .e-select .e-spin-down {
        & when (@skin= "material") {
            height: 24px;
            margin-top: -12px;
            top: 50%;
            overflow: hidden;
        }
    }
}

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

    .e-atc {
        display: block;
        overflow: visible;
        width: 143px;
        height: @input-height;
    }

    .e-atc .e-padding {
        padding: 0 24px 0 0;
    }

    .e-atc .e-icon {
        display: block;
        width: 100%;
        position: absolute;
        top: 50%;
    }

    .e-atc .e-select {
        cursor: pointer;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 23px;
        height: 100%;
        text-align: left;
        border-left: 1px solid;
    }

    .e-atc.e-rtl .e-select {
        border-right: 1px solid;
        border-left: none;
    }

    .e-atc .e-in-wrap .e-iclose:before {
        content: "\e60a";
        width: 18px;
        right: 0px;
        color: #c8c8c8;
        font-size: 20px;
        margin-top: 4px;
        display: block;
    }

    .e-atc.e-rtl .e-in-wrap .e-iclose:before {
        width: 0px;
    }


    .e-atc .e-in-wrap .e-iclose {
        width: 14px;
        right: 10px;
        box-sizing: content-box;
        backface-visibility: hidden;
    }


    .e-atc .e-popup .e-iclose:before {
        float: right;
        padding-right: 45px;
    }



    .e-atc.e-rtl .e-popup .e-iclose:before {
        float: left;
        padding-left: 35px;
    }

    .e-atc .e-in-wrap .e-iclose {
        width: 24px;
        right: 0px;
        box-sizing: content-box;
        backface-visibility: hidden;
        top: 7px;
        height: inherit;
        vertical-align: middle;
    }



    .e-atc .e-reset .e-input {
        padding: 0 20px 0 7px;
    }

    .e-rtl .e-in-wrap.e-reset .e-input {
        padding: 0 7px 0 20px;
    }


    .e-atc.e-rtl .e-in-wrap .e-iclose {
        right: auto;
        left: 0;
        padding-left: 10px;
    }

    .e-atc.e-rtl .e-padding {
        padding: 0 0 0 24px;
    }

    .e-atc-popup {
        cursor: default;
        overflow: auto;
        position: absolute;
        border: 1px solid;
        outline: 0 none;
    }

    .e-atc-popup .e-hilight-txt {
        font-weight: bold;
    }

    .e-atc-popup ul li.e-category {
        font-weight: bold;
    }

    .e-atc-popup.e-rtl ul li.e-category {
        margin: 0 0.857em 0 0;
        padding: 5px 0 5px 5px;
    }

    .e-atc-popup ul li {
        padding: 5px 5px 5px 0.857em;
        min-height: 1.3em;
        white-space: nowrap;
    }

    .e-atc-popup.e-rtl ul li {
        padding: 5px 0.857em 5px 5px;
    }

    .e-atc .e-input.e-load {
        background-position: right center;
        background-repeat: no-repeat;
    }

    .e-atc.e-rtl .e-input.e-load {
        background-position: left center;
    }

    .e-atc .e-icon {
        height: 14px;
        margin-top: -7px;
    }

    .e-atc .e-options {
        border: 1px solid;
        border-radius: 4px;
        cursor: default;
        display: inline-block;
        float: left;
        margin: 2px 0 2px 2px;
        padding: @visual-mode-padding;
        position: relative;
    }

    .e-atc.e-rtl .e-options {
        margin: 2px 2px 2px 0;
        padding: @visual-mode-rtl-padding;
        float: right;
    }

    .e-atc .e-visual-mode.e-input {
        display: inline-block;
        max-width: 99%;
        text-indent: 0;
        float: left;
        height: @input-height - 2px;
        margin: 0 0 0 2px;
        padding-left: 0;
        box-shadow: none;
    }

    .e-atc.e-rtl .e-visual-mode.e-input {
        float: right;
        margin: 0 2px 0 0;
    }

    .e-atc .e-options .e-icon.e-close {
        font-size: 10px;
        cursor: pointer;
        height: 10px;
        margin-top: -5px;
        right: 4px;
        width: 10px;
        opacity: 0.75;
    }

    .e-atc .e-options .e-icon.e-close:hover {
        opacity: 1;
    }

    .e-atc.e-rtl .e-options .e-icon.e-close {
        left: 4px;
        right: auto;
    }

    .e-atc-popup .e-atc-tableContent tr td, .e-atc-popup .e-atc-tableHeaderContent th {
        padding: 5px 5px 5px .857em;
        min-height: 1.3em;
        white-space: nowrap;
    }

    .e-atc-popup .e-atc-tableContent, .e-atc-popup div.e-atc-tableHeaderContent table {
        table-layout: fixed;
    }

    .e-atc-popup div.e-atc-tableHeaderScroll {
        padding-right: 19px;
    }

    .e-atc-popup div.e-atc-tableHeaderRTL {
        padding-left: 19px;
    }

    .e-atc-popup div.e-atc-tableHeader {
        table-layout: fixed;
        border-collapse: separate;
        margin-top: 0;
        border-spacing: 0;
        overflow: hidden;
        vertical-align: middle;
        clear: right;
    }

    .e-atc-popup div.e-atc-tableHeaderContent {
        overflow: hidden;
    }

    .e-atc .e-boxes.e-disable {
        pointer-events: none;
    }

    .e-atc .e-select:after {
        & when (@skin= "material") {
            .e-ripple-style();
        }
    }

    .e-atc .e-select.e-active:after {
        & when (@skin= "material") {
            .e-ripple-animation();
        }
    }

    .e-ripple-style() {
        content: '';
        position: absolute;
        top: 45%;
        left: 45%;
        width: 4px;
        height: 4px;
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }

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

    @keyframes e-ripple {
        0% {
            transform: scale(0, 0);
            opacity: 1;
        }

        2% {
            transform: scale(1, 1);
            opacity: 1;
        }

        5% {
            transform: scale(2, 2);
            opacity: 1;
        }

        10% {
            transform: scale(4, 4);
            opacity: 1;
        }

        25% {
            transform: scale(7, 7);
            opacity: 1;
        }

        100% {
            opacity: 1;
            transform: scale(10, 10);
        }
    }
}

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

	.e-waitpopup-pane.e-widget.e-tree-popup {
		display:none !important;
	}
}

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

    .e-ddl {
        display: block;
        overflow: visible;
        width: 143px;
        outline: 0 none;

        & when (@skin= "office-365") {
            height: 32px;
        }

        & when not (@skin= "office-365") {
            height: @input-height;
        }
    }

    .e-ddl .e-in-wrap {
        & when (@skin= "material") {
            padding: 0 24px 0 -1px;
        }

        & when not (@skin= "material") {
            padding: 0 24px 0 0;
        }
    }

    .e-ddl .e-icon {
        display: block;
        position: absolute;

        & when (@skin= "office-365") {
            width: 12px;
            padding-left: 9px;
            padding-right: 9px;
        }

        & when not (@skin= "office-365") {
            top: 50%;
            width: 100%;
        }
    }

    .e-ddl .e-icon.e-arrow-sans-down {
        & when (@skin= "office-365") {
            top: 50%;
            margin-top: -6px;
        }
    }

    .e-ddl .e-select {
        cursor: pointer;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 23px;
        height: 100%;
        text-align: left;

        & when (@skin= "office-365") {
            border-left: 0px solid;
        }

        & when not (@skin= "office-365") {
            border-left: 1px solid;
        }
    }

    .e-ddl.e-rtl .e-select {
        border-right: 1px solid;
        border-left: none;
    }

    .e-ddl.e-rtl .e-in-wrap {
        & when (@skin= "material") {
            padding: 0 0 0 0;
        }

        & when not (@skin= "material") {
            padding: 0 0 0 24px;
        }
    }

    .e-ddl-popup {
        cursor: default;
        overflow: auto;
        position: absolute;
        border: 1px solid;
        outline: 0 none;

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

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                -webkit-animation-name: fadeIn,slideDownIn20;
                animation-name: fadeIn,slideDownIn20;
                -webkit-animation-duration: 367ms;
                -moz-animation-duration: 367ms;
                -ms-animation-duration: 367ms;
                -o-animation-duration: 367ms;
                -webkit-animation-timing-function: cubic-bezier(.1,.9,.2,1);
                animation-timing-function: cubic-bezier(.1,.9,.2,1);
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
                box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
            }

            box-shadow: none;
        }
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
            -webkit-animation-timing-function: cubic-bezier(.1,.25,.75,.9);
            animation-timing-function: cubic-bezier(.1,.25,.75,.9);
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes slideDownIn20 {
        0% {
            -webkit-transform: translate3d(0,-20px,0);
            transform: translate3d(0,-20px,0);
        }

        100% {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
    }

    .e-ddl-popup div > ul li, .e-ddl-popup div > .e-listbox li {
        min-height: 1.3em;

        & when (@skin= "material") {
            padding: 15px 0px 15px 18px;
        }

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

            & when not (@skin= "office-365") {
                line-height: 1.4;
                padding: 5px 5px 5px 0.857em;
            }
        }
    }

    .e-ddl-popup div > .e-listbox li {
        & when (@skin= "office-365") {
            max-height: none;
        }
    }

    .e-ddl-popup.e-js {
        & when (@skin= "office-365") {
            animation: none;
            box-shadow: none;
        }
    }

    .e-ddl-popup.e-rtl div > ul li {
        & when (@skin= "material") {
            padding: 15px 18px 15px 0px;
        }

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

    .e-ddl .e-options {
        & when (@skin= "office-365") {
            border-radius: none;
            padding: 1px 19px 4px 8px;
        }

        & when not (@skin= "office-365") {
            border-radius: 4px;
            padding: @visual-mode-padding;
        }

        border: 1px solid;
        cursor: default;
        display: inline-block;
        float: left;
        margin: 2px 0 2px 2px;
        position: relative;
    }

    .e-ddl .e-input {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

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

    .e-ddl.e-widget .e-input.e-disable {
        pointer-events: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .e-ddl.e-rtl .e-options {
        margin: 2px 2px 2px 0;
        padding: @visual-mode-rtl-padding;
        float: right;
    }

    .e-ddl .e-options .e-icon.e-close {
        font-size: 10px;
        cursor: pointer;
        height: 10px;
        right: 4px;
        width: 10px;
        opacity: 0.75;

        & when (@skin= "office-365") {
            padding: 0px;
            margin-top: -12px;
            margin-left: 8px;
        }

        & when not (@skin= "office-365") {
            margin-top: -5px;
        }
    }

    .e-ddl .e-options .e-icon.e-close:before {
        & when (@skin= "office-365") {
            width: 10px;
            height: 10px;
        }
    }

    .e-ddl .e-options .e-icon.e-close:hover {
        opacity: 1;
    }

    .e-ddl.e-rtl .e-options .e-icon.e-close {
        left: 4px;
        right: auto;
    }

    .e-ddl.e-rtl .e-in-wrap .e-select {
        border-left: 0 none;
        text-align: right;
    }

    .e-ddl-popup.e-atc-popup.e-rtl ul li.e-category {
        margin: 0;
        padding: 5px 0.857em 5px 5px;
    }

    .e-ddl-popup div > ul li {
        vertical-align: middle;
    }

    .e-ddl .e-in-wrap .e-select.e-load {
        background-position: center center;
        background-repeat: no-repeat;
        opacity: 0.35;
        filter: alpha(opacity=35);
    }

    .e-ddl-popup div > ul li .e-align {
        float: left;
        vertical-align: middle;

        & when (@skin= "material") {
            margin-right: 24px;
        }
    }

    .e-ddl-popup.e-rtl div > ul li .e-align {
        float: right;
    }

     .e-ejinputtext {
        padding-right: 4px;

        & when not (@skin= "material") {
            text-indent: 10px;
        }

        & when (@skin= "material") {
            text-indent: 0px;
        }
    }

    .e-ddl-popup .e-atc.e-search {
        width: 100%;
        height: 36px;
        border-bottom: 1px solid;
        position: relative;
    }

    .e-ddl-popup .e-atc.e-search .e-in-wrap {
        margin: 8px;
        height: 28px;
        position: relative;
    }

    .e-ddl-popup .e-atc.e-search .e-search, .e-ddl-popup .e-atc.e-search .e-cross-circle {
        width: 14px;
        right: 10px;
    }

    .e-ddl-popup .e-atc.e-search .e-input {
        padding: 0 20px 0 7px;
    }

    .e-ddl-popup .e-atc.e-search .e-search:before {
        content: "\e66e";
        font-size: 20px;
        margin-top: -3px;
    }

    .e-ddl-popup .e-atc.e-search .e-cross-circle:before {
        content: "\e60a";
        font-size: 20px;
        margin-top: -3px;
    }

    .e-ddl .e-icon {
        & when (@skin= "material") {
            font-size: 9px;
            height: 8px;
            margin-top: -3px;
            color: rgba(0,0,0,.54);
        }

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

            & when not (@skin= "office-365") {
                margin-top: -6px;
            }
        }
    }

    .e-ddl-popup.e-rtl .e-atc.e-search .e-input {
        padding: 0 7px 0 20px;
    }

    .e-ddl-popup.e-rtl .e-atc.e-search .e-search, .e-ddl-popup.e-rtl .e-atc.e-search .e-cross-circle {
        right: auto;
        left: 0;
        padding-left: 10px;
    }

    .e-ddl-popup.e-rtl .e-atc.e-search .e-search:before {
        -ms-transform: rotate(60deg); /* IE 9 */
        -webkit-transform: rotate(60deg); /* Chrome, Safari, Opera */
        transform: rotate(60deg);
        margin-top: 0;
    }

    .e-ddl-popup .e-checkwrap {
        cursor: pointer;

        & when (@skin= "material") {
            margin-right: 24px;
            height: 14px;
            width: 14px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                margin-right: 8px;
                height: 16px;
                width: 16px;
            }

            & when not (@skin= "office-365") {
                margin-right: 10px;
                height: 14px;
                width: 14px;
            }
        }

        position: relative;
        top: 3px;
        font-size: 12px;
        z-index: 2;
        text-align: left;
    }

    .e-ddl-popup .e-check-act:before {
        content: "\e657";
        width: 100%;
        height: 100%;
        position: absolute;

        & when (@skin= "material") {
            top: 1px;
            left: 1px;
        }

        & when not (@skin= "material") {
            top: 1px;
            left: 1px;
        }
    }

    .e-ddl-popup .e-check-input {
        display: none;
    }

    .e-ddl-popup.e-rtl .e-checkwrap {
        margin: 0 0 0 10px;
    }

    .e-ddl-popup .e-ddltxt, .e-ddl-popup .e-checkwrap {
        display: inline-block;
    }
}

.e-ddl-popup.e-rtl div > ul li .e-chkbox-wrap {
    padding-left: 10px;
    padding-right: 0px;
}

.e-ddl-popup div > ul li .e-chkbox-wrap, .e-ddl-popup div > .e-listbox li .e-chkbox-wrap {
    padding-right: 10px;
}

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

    .e-timewidget {
        display: block;
        overflow: visible;

        & when (@skin= "material") {
            /*material*/
            height: 34px;
            width: 143px;
        }

        & when (@skin= "office-365") {
            width: 300px;
            height: 32px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            height: @input-height;
            width: 143px;
        }
    }

    .e-timewidget .e-padding {
        & when (@skin= "material") {
            /*material*/
            border-color: fade(#000000,12%);
            border-width: 0 0 1px 0;
        }

        padding: 0 24px 0 0;
    }

    .e-timewidget .e-icon {
        display: block;
        width: 100%;
        position: absolute;
        top: 50%;
    }

    .e-timewidget .e-select {
        cursor: pointer;
        display: block;
        position: absolute;
        right: 0;
        top: 0px;

        & when (@skin= "material") {
            /*material*/
            border-left: 0;
            width: 23px;
            height: 100%;
        }

        & when (@skin= "office-365") {
            width: 30px;
            height: 30px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            border-left: 1px solid;
            width: 23px;
            height: 100%;
        }

        text-align: left;
    }

    .e-timewidget.e-rtl .e-select {
        & when (@skin= "material") {
            /*material*/
            border-right: 0;
        }

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

        border-left: none;
    }

    .e-timewidget.e-rtl .e-padding {
        padding: 0 0 0 24px;
    }

    .e-time-popup {
        cursor: default;
        position: absolute;
        border: 1px solid;
        outline: 0 none;
    }

    .e-timewidget .e-input {
        & when not (@skin = "material") {
            letter-spacing: 1px;
        }
    }

    .e-timewidget .e-icon {
        font-size: 20px;
        height: 20px;
        margin-top: -10px;

        & when (@skin= "material") {
            /*material*/
            width: 20px;
        }
    }

    .e-time-popup {
        font-weight: @content-font-weight;

        & when not (@skin= "material") {
            letter-spacing: 1px;
        }

        & when (@skin= "material") {
            /*material*/
            box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.21);
            border: 2px;
        }
    }

    .e-time-popup ul li {
        & when (@skin= "material") {
            /*material*/
            padding: 15px 3px 15px 24px;
        }

        & when (@skin="office-365") {
            padding: 9px 2px 9px 12px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding: 2px 2px 2px 0.857em;
        }
    }

    .e-time-popup.e-rtl ul li {
        & when (@skin= "material") {
            /*material*/
            padding: 15px 24px 15px 3px;
        }

        & when (@skin="office-365") {
            padding: 9px 12px 9px 2px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding: 2px 0.857em 2px 2px;
        }
    }

    .e-timewidget.e-error .e-in-wrap {
        border-color: #FF0000;
    }
    .e-timewidget.e-widget.e-ntouch.e-active {
        & when not (@skin="material") {
        background:none;
    }
}
}

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

    .e-datewidget.e-error .e-in-wrap {
        border-color: #FF0000;
    }

    .e-datewidget {
        display: block;
        overflow: visible;
        height: @input-height;

        & when (@skin= "office-365") {
            width: 300px;
        }

        & when not (@skin= "office-365") {
            width: 143px;
        }
    }

    .e-datewidget .e-padding {
        padding: 0 24px 0 0;
    }

    .e-datewidget .e-icon {
        display: block;
        width: 100%;
        position: absolute;
        top: 50%;
    }

    .e-datewidget .e-select {
        cursor: pointer;
        display: block;
        position: absolute;
        top: 0;
        right: 0;

        & when (@skin= "material") {
            /*material*/
            width: 24px;
            border-left: 0;
        }

        & when (@skin= "office-365") {
            /*material*/
            width: 30px;
            border-left: 0;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            width: 23px;
            border-left: 1px solid;
        }

        height: 100%;
        text-align: left;
    }

    .e-datewidget.e-rtl .e-select {
        & when (@skin= "material") {
            /*material*/
            border-right: 0;
        }

        & when (@skin= "office-365") {
            /*office 365*/
            border-right: 0;
        }

        & when not (@skin = "material") and not (@skin = "office-365") {
            /*other*/
            border-right: 1px solid;
        }

        border-left: none;
    }


    .e-datewidget.e-rtl .e-in-wrap.e-padding {
        padding: 0 0 0 24px;
    }

    .e-datewidget .e-icon {

        & when (@skin= "material") {
            /*material*/
            font-size: 21px;
            height: 24px;
        }


        & when (@skin= "office-365") {
            /*material*/
            height: 20px;
            font-size: 20px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            height: 21px;
            font-size: 21px;
        }

        margin-top: -11px;
    }

    .e-datepicker .e-datepicker-months td, .e-datepicker .e-datepicker-years td, .e-datepicker .e-datepicker-allyears td {
        height: 45px;
    }

    .e-datepicker .e-datepicker-months, .e-datepicker .e-datepicker-years, .e-datepicker .e-datepicker-allyears {
        width: 100%;
    }

    .e-datepicker.e-calendar {
        overflow: hidden;

        & when (@skin= "material") {
            /*material*/
            border: 0;
            box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.21);
        }

        & when (@skin= "office-365") {
            /*material*/
            border: 0;
            box-shadow: 0 0 15px -5px rgba(0,0,0,.4);
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            border: 1px solid;
            box-shadow: @box-shadow;
        }
    }

    .e-datepicker.e-calendar .e-header, .e-datetime-popup .e-timecontainer .e-header {
        text-align: center;
        height: 30px;
        line-height: 27px;

        & when (@skin= "material") {
            /*material*/
            padding: 9px 0 9px 0;
        }

        & when (@skin= "office-365") {
            /*material*/
            padding-bottom: 15px;
        }
    }
	.e-widget.e-calendar .e-header {
		display: block;
		font-weight: normal;
		height: 30px;
		width: auto;
	}
	.e-widget.e-calendar .e-header .e-text,
	.e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-text
	{
		line-height: 27px;
		text-indent: 0px;
	}
    .e-datepicker .e-header .e-next, .e-datepicker .e-header .e-prev {
        cursor: pointer;
        position: relative;
        top: 2px;
    }
    .e-datepicker .e-header .e-disable .e-icon{
        cursor:default;
    }

    .e-datepicker .e-week-header {
        & when not (@skin= "office-365") {
            /*material*/
            height: 35px;
        }

        & when (@skin= "office-365") {
            /*material*/
            height: 30px;
        }
    }


    .e-datepicker .e-icon {
        height: 18px;
        width: 18px;
        padding: 0px;
    }

    .e-datepicker .e-header .e-icon:before {
        top: 2px;
        left: 2px;
        position: absolute;
    }

    .e-datepicker .e-header .e-disable.e-arrow-sans-left{
        position: inherit;
    }

    .e-datepicker .e-datepicker-days .e-state-default {
        height: 26px;
        border: 0 none;
    }

    .e-datepicker .e-icon.e-arrow-sans-left {
        float: left;
    }

    .e-datepicker .e-icon.e-arrow-sans-right {
        float: right;
    }

    .e-datepicker .e-icon.e-arrow-sans-right:before {
        left: 4px;
    }

    .e-datepicker.e-rtl .e-header .e-next {
        right: -10px;
    }

    .e-datepicker .e-header .e-next {
        right: 5px;
    }

    .e-datepicker.e-rtl .e-header .e-prev {
        left: -10px;
    }

    .e-datepicker .e-header .e-prev {
        left: 5px;
    }

    .e-datepicker .e-header .e-text {
        cursor: pointer;
        padding: 1px 0px;
        text-align: center;
        vertical-align: middle;
        width: 83%;
    }

    .e-datepicker .e-header .e-text .e-datepicker-headertext {
        padding: 0px 7px 0px 8px;
        border-radius: 4px;
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;

        & when (@skin="material") {
            display: inline;
        }
    }

    .e-datepicker .e-header a:hover, .e-datepicker .e-header a:focus {
        text-decoration: none;
        padding: 0px;
    }

    .e-datepicker .e-footer {
        cursor: pointer;

        & when (@skin="material") {
            padding: 14px 10px 10px 10px;
            height: 18px;
            font-size: 14px;
            text-align: center;
            margin: 3px 0px 0px;
        }

        & when (@skin="office-365") {
            padding: 10px 10px 10px 0;
            height: 18px;
            font-size: 14px;
            text-align: right;
        }


        & when not (@skin="material") and not (@skin="office-365") {
            padding: 3px;
            text-align: center;
            margin: 3px 0px 0px;
        }
    }

    .e-datepicker .e-hide-date, .e-datepicker table td.e-disable > span.e-image, .e-datepicker .e-footer.e-footer-disable {
        opacity: 0.34;
    }

    .e-datepicker table {
        border-collapse: collapse;
        border-style: none;
        position: relative;
        table-layout: fixed;
        text-align: center;
        width: 100%;

        & when (@skin= "material") {
            /*material*/
            margin: 10px 0 10px 0;
        }
    }

    .e-datepicker .e-footer.e-footer-disable {
        pointer-events: none;
    }

    .e-datepicker table th, .e-datepicker .e-week-header:hover, .e-datepicker table td.e-weeknumber, .e-datepicker table td.e-weeknumber:hover {
        cursor: default;
        font-weight: @content-font-weight;
        text-align: center;
        background: transparent;
        border: 0 none;
        vertical-align: middle;

        & when (@skin = "office-365") {
            font-weight: 600;
        }

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

    .e-datepicker table td.e-weeknumber, .e-datepicker table td.e-weeknumber:hover {
        font-weight: 300;
        font-style: italic;
        border-radius: 0px;
    }

    .e-datepicker table td {
        cursor: pointer;
        border: medium none;
        vertical-align: middle;
        text-align: center;
    }

    .e-datepicker .e-dp-viewdays .e-current-month:hover {
        border-radius: 4px;
    }

    .e-datepicker .e-dp-viewdays {
        cellspacing: 2;
    }

    .e-rtl .e-select {
        right: auto;
        left: 0;
    }

    .e-datepicker.e-js.e-input.e-disable, .e-timepicker.e-js.e-input.e-disable, .e-daterangepicker.e-js.e-input.e-disable, .e-datetimepicker.e-js.e-input.e-disable {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .e-datepicker.e-icons table .e-datepicker-days td, .e-datepicker.e-icons table th {
        text-align: center;

        & when not (@skin = "office-365") and not (@skin = "material") {
            text-align: right;
            padding-right: 10px;
        }
    }

    .flag .e-image, .e-special-day .e-image {
        display: inline-block;
        margin-right: 3px;
        vertical-align: text-top;
    }

    .e-datepicker.e-calendar {
        position: absolute;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        & when not (@skin = "office-365") {
            width: 18em;
        }

        & when (@skin = "office-365") {
            width: 19em;
        }
    }

    .e-datepicker.e-calendar.e-inline {
        position: static;
    }

    .e-datepicker.e-calendar.e-headerlong {
        width: 35em;
    }

    .e-datepicker table .e-datepicker-days td.e-state-default.e-week-end {
        font-weight: bold;
    }

    .e-selected-week, .e-selected-month {
        border-radius: 4px;
    }

    .e-datepicker .e-special-date-icon {
        width: 12px;
        height: 12px;
        display: inline-block;
        margin-right: 3px;
    }

    .e-datepicker.e-popup.e-disable table td,
    .e-datepicker.e-popup.e-disable .e-footer,
    .e-datepicker.e-popup.e-disable .e-header .e-text,
    .e-datepicker.e-popup.e-disable .e-header .e-next,
    .e-datepicker.e-popup.e-disable .e-header .e-prev,
    .e-daterangewidget .e-select.e-disable, .e-daterangewidget .e-select.e-disable .e-icon,
    .e-datewidget .e-select.e-disable, .e-datewidget .e-select.e-disable .e-icon {
        cursor: default;
    }

    .e-datepicker.e-popup .e-icon.e-arrow-sans-right:before, .e-datepicker.e-popup.e-rtl .e-icon.e-arrow-sans-left:before,
    .e-timepicker.e-popup .e-icon.e-arrow-sans-right:before, .e-timepicker.e-popup.e-rtl .e-icon.e-arrow-sans-left:before {
        & when (@skin="material"), (@skin="office-365") {
            content: "\e62f";
        }
    }

    .e-datepicker.e-popup .e-icon.e-arrow-sans-left:before, .e-datepicker.e-popup.e-rtl .e-icon.e-arrow-sans-right:before,
    .e-timepicker.e-popup .e-icon.e-arrow-sans-left:before, .e-timepicker.e-popup.e-rtl .e-icon.e-arrow-sans-right:before {
        & when (@skin="material"), (@skin="office-365") {
            content: "\e630";
        }
    }

    .e-datepicker .e-header .e-prev, .e-datepicker .e-header .e-next {
        & when (@skin="material") {
            overflow: hidden;
            position: relative;
            border-radius: 50%;
        }
    }

    .e-datepicker .e-header .e-prev:hover, .e-datepicker .e-header .e-next:hover {
        & when (@skin="material") {
            background: none;
        }
    }
    .e-datewidget.e-widget.e-ntouch.e-active {
        & when not (@skin="material") {
        background:none;
    }
}
}

.mixin(@widget) when (@widget = daterangepicker), (@widget = none) {
    .e-daterangewidget.e-error .e-in-wrap {
        border-color: red;
    }

    .e-daterangewidget .e-timewidget {
        & when (@skin="material") {
            height: 32px;
        }
    }

    .e-daterangewidget {
        display: block;
        overflow: visible;
        width: 143px;
        height: 30px;
    }

    .e-daterangewidget .e-timewidget {
        & when (@skin="material") {
            height: 32px;
        }
    }

    .e-daterangewidget .e-padding {
        padding: 0 24px 0 0;
    }

    .e-daterangewidget .e-icon {
        display: block;
        position: absolute;
        top: 50%;
        font-size: 21px;
        margin-top: -11px;

        & when (@skin="material") {
            height: 20px;
            width: 20px;
        }

        & when (@skin= "office-365") {
            width: 23px;
        }

        & when not (@skin="material") {
            height: 21px;
        }
    }

    .e-daterangewidget .e-select {
        cursor: pointer;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        text-align: left;
        border-left: 1px solid;

        & when (@skin= "office-365") {
            width: 30px;
        }

        & when not (@skin= "office-365") {
            width: 23px;
        }
    }

    .e-daterangewidget.e-rtl .e-select {
        border-right: 1px solid;
        border-left: none;
    }

    .e-daterangewidget.e-rtl .e-in-wrap.e-padding {
        padding: 0 0 0 24px;
    }

    .e-daterangepicker-popup {
        display: inline-block;
        width: auto;
        box-sizing: content-box;
        position: absolute;
    }

    .e-daterangepicker-popup .e-left-datepicker.e-left-timepicker .e-datewidget, .e-daterangepicker-popup .e-right-datepicker.e-right-timepicker .e-datewidget {
        width: 117px;

        & when (@skin= "office-365") {
            width: 110px;
        }
    }

    .e-daterangepicker-popup .e-left-datepicker .e-datewidget, .e-daterangepicker-popup .e-right-datepicker .e-datewidget {
        width: 100%;
    }

    .e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-state-hover,
    .e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.today {
        border-radius: 1px;
    }

    .e-daterangepicker-popup .e-custom-dateranges {
        width: auto;
        float: right;
        font-size: 13px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .e-daterangepicker-popup .e-datepickers-popup {
        display: inline-block;
    }

    .e-daterangepicker-popup .e-right-datepicker {
        float: right;
        padding-right: 5px;

        &when (@skin="office-365") {
            padding-right: 10px;
        }
    }

    .e-daterangepicker-popup .e-datewidget {
        &when (@skin="office-365") {
            height: 30px;
        }
    }

    .e-daterangepicker-popup .e-timewidget {
        &when (@skin="office-365") {
            padding-bottom: 10px;
            height: 30px;
        }
    }

    .e-daterangepicker-popup .e-left-datepicker {
        display: inline-block;
    }

    .e-daterangepicker-popup .e-left-datepicker, .e-daterangepicker-popup .e-right-datepicker {
        padding-left: 10px;
        padding-top: 5px;

        &when (@skin="office-365") {
            padding-top: 10px;
        }
    }

    .e-daterangepicker-popup .e-left-datepicker .e-calendar, .e-daterangepicker-popup .e-right-datepicker .e-calendar {
        padding-top: 5px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .e-daterangepicker-popup .e-left-datepicker .e-timewidget, .e-daterangepicker-popup .e-right-datepicker .e-timewidget {
        float: right;
        padding-top: 5px;

        &when (@skin="office-365") {
            padding-top: 10px;
        }

        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .e-daterangepicker-popup .e-datepicker.e-popup.e-calendar {
        border: none;

        & when (@skin= "material") {
            /*material*/
            box-shadow: none;
            padding: 5px 10px 10px 0px;
        }

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

    .e-daterangepicker-popup .e-datepicker .e-header {
        border: none;
    }

    .e-daterangepicker-popup .e-datepicker .e-dp-viewdays {
        border-collapse: separate;
        border-spacing: 0 2px;
    }

    .e-datepickers-popup {
        display: inline-flex;
    }

    .e-daterangepicker-popup.e-daterange-responsive .e-custom-dateranges .e-dateranges-ul li.rangeItem {
        text-align: center;
        padding: 0px 25px;

        & when (@skin= "material") {
            padding: 9px 65px;
        }

        & when (@skin="office-365") {
            padding: 3px 80px;
        }
    }

    .e-daterangepicker-popup.e-daterange-responsive .e-drp-button.e-select.e-flat {
        float: none;
        margin: 5px 5px;

        & when (@skin= "material") {
            padding: 5px 25px;
        }
    }

    .e-daterangepicker-popup.e-daterange-responsive .e-drpbuttons {
        max-width: none;
    }

     .e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default {
        height: 30px;
    }

     .e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.in-range:hover {
        border-radius: 1px;
    }

     .e-daterangepicker-popup .e-ntouch.e-datepicker .e-datepicker-days td:hover::before,  .e-daterangepicker-popup .e-datepicker .today:before,  .e-daterangepicker-popup .e-ntouch.e-datepicker .e-datepicker-days .current-month.e-state-default.e-special-day:hover::before {
        background: none;
    }

     .e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-start-date,
     .e-daterangepicker-popup .e-datepicker .e-datepicker-days .e-state-default.e-end-date {
        border-radius: 4px;

        & when(@skin="material") {
            border-radius: 24px !important;
        }

        & when(@skin="office-365") {
            border-radius: 0px;
        }
    }

    .e-dateranges {
        height: 104px;
        width: 100px;
    }

     .e-daterange-timepopup.e-time-popup {
        font-size: 13px;
    }

     .e-daterangepicker-popup .e-custom-dateranges ul {
        padding: 0;
        margin-top: 0;
    }

     .e-custom-dateranges li {
        cursor: pointer;
        list-style: none;
        line-height: 30px;
        padding: 0 10px 0 10px;
        margin: 5px;
        overflow: hidden;
        white-space: nowrap;
        max-width: 200px;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;

        &when (@skin="office-365") {
            line-height: 36px;
            margin: 0px;
        }
    }

     .e-daterangepicker-popup .e-datepicker .e-datepicker-days td.e-state-default.in-range:last-child,
     .e-daterangepicker-popup .e-datepicker .e-datepicker-days td.e-state-default.in-range:last-child :hover {
        & when (@skin="material") {
            border-bottom-right-radius: 14px;
            border-top-right-radius: 14px;
        }
    }

     .e-daterangepicker-popup .e-datepicker.e-calendar {
        box-shadow: none;
    }

     .e-daterangepicker-popup .e-datepicker .e-datepicker-days td.e-state-default.in-range:first-child,
     .e-daterangepicker-popup .e-datepicker .e-datepicker-days td.e-state-default.in-range:last-child :hover {
        & when (@skin="material") {
            border-bottom-left-radius: 14px;
            border-top-left-radius: 14px;
        }
    }
    /*apply buttons*/
     .e-daterangepicker-popup .e-drp-button {
        float: right;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        border: 1px solid;
        margin-left: 10px;
        margin: 5px 5px 5px 5px;
        font-size: 13px;

        & when (@skin="material") {
            height: 20px;
            line-height: 20px;
            padding: 5px 28px 5px 28px;
        }

        & when not(@skin="material") {
            padding: 4px 16px;
        }
    }

     .e-daterangepicker-popup .e-drpbuttons div {
        overflow: hidden;
        white-space: nowrap;
        max-width: 100px;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border-radius: @border-radius;
    }

     .e-daterangepicker-popup .e-drp-button.e-drp-reset {
        float: left;
    }

     .e-daterangepicker-popup .e-drp-button.e-drp-apply,  .e-daterangepicker-popup .e-drp-button.e-drp-cancel {
        margin-left: 0;
    }
    /* responsive css*/
     .e-daterange-responsive {
        display: block;
    }

     .e-daterange-responsive .e-datepickers-popup {
        width: 100%;
        display: block;
    }

     .e-daterange-responsive .e-datepickers-popup > div {
        width: 100%;
        display: block;
        padding: 0;
    }

     .e-daterange-responsive .e-datepickers-popup .e-datewidget {
        padding: 5px;
        width: 95%;
    }

     .e-daterange-responsive .e-drpbuttons {
        display: block;
        width: 100%;
        float: none;
        max-width: 200px;
    }

     .e-daterange-responsive .e-custom-dateranges {
        width: 100%;
        border-top: 1px solid;
    }

     .e-daterange-responsive .e-drpbuttons div {
        max-width: 40px;
    }
	 .e-responsive.e-daterangepicker-popup .e-custom-dateranges.e-responsive {
		border-left:none;
		border-top: none;
	}
	 .e-responsive.e-daterangepicker-popup .e-left-datepicker .e-calendar {
		padding-top: 0px;
	}
	 .e-responsive.e-daterangepicker-popup .e-left-datepicker .e-datewidget {
		 display:none;
	}
	 .e-responsive.e-daterangepicker-popup .e-right-datepicker {
		 display:none; 
	}
.e-drp-button.e-drp-reset.e-btn.e-select.e-flat, .e-drp-button.e-drp-apply.e-disable.e-btn.e-select.e-flat, .e-drp-button.e-drp-apply.e-btn.e-select.e-flat, .e-drp-button.e-drp-cancel.e-btn.e-select.e-flat{
 & when (@skin = "material") {    
         box-shadow: none;
    }    }
    .e-daterangewidget.e-widget.e-ntouch.e-active {
        & when not (@skin="material") {
        background:none;
    }
}

}

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

    .e-menu .e-list ul .e-list ul {
        & when (@skin="material") {
            box-shadow: @box-shadow;
            padding: 0px;
            margin: 0px;
        }
    }

    .e-menu {
        & when (@skin="material") {
            border: 0px solid;
        }

        & when not(@skin="material") {
            & when (@skin="office-365") {
                border: 0px solid;
            }

            & when not(@skin="office-365") {
                border: 1px solid;
            }
        }

        font-size: 0;
        display: block;
        width: auto;
        height: auto;
        font-weight: @content-font-weight;
    }

    .e-menu * {
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
    }

    .e-menu * a:focus {
        outline: none;
    }

    * .e-menu > .e-list > ul,
    * .e-menu > .e-list > ul .e-list > ul {
        left: 102%;
        top: -0.8px;
    }

    .e-menu > .e-list {
        border: 0 none;
        position: relative;
        text-align: left;
        cursor: pointer;
    }

    .e-menu .e-list > ul {
        position: absolute;
        visibility: inherit;
        padding: 1px;
        margin: 0;
        left: -1px;
        z-index: 1000;
        display: none;
    }

    .e-menu .e-list > ul .e-list > .e-menulink {
        & when (@skin="office-365") {
            line-height: 16px;
        }
    }

    * .e-menu .e-list > ul .e-list {
        border: 0 none;
        float: none;
        position: relative;
        cursor: pointer;

        & when (@skin="material") {
            line-height: 26px;
        }

        & when not(@skin="material") {
            & when (@skin="office-365") {
                line-height: 16px;
            }

            & when not (@skin="office-365") {
                line-height: @menu-hor-child-line-height;
            }
        }
    }

    .e-menu .e-list > .e-menulink {
        & when (@skin="material") {
            font-size: 13px;
        }

        & when not(@skin="material") {
            & when (@skin="office-365") {
                min-height: 10px;
                line-height: 10px;
            }

            & when not (@skin="office-365") {
                min-height: 18px;
            }

            font-size: @font-size;
        }

        text-decoration: none;
        display: block;
        border: 0px none;
        width: auto;
        height: auto;
        position: relative;
    }

    .e-menu .e-list > .e-menulink > span.e-icon.e-arrowhead-down,
    .e-menu.e-rtl .e-list > .e-menulink > span.e-icon.e-arrowhead-down {
        & when (@skin="office-365") {
            margin-left: 8px;
            margin-right: 12px;
        }
    }

    .e-menu .e-list > .e-menulink > span.e-icon.e-arrowhead-right {
        & when (@skin="office-365") {
            margin: 12px;
            top: 0%;
        }
    }

    .e-menu.e-context .e-list > .e-menulink > span.e-icon.e-arrowhead-right {
        & when (@skin="office-365") {
            top: 2px;
        }
    }

    .e-menu.e-vertical .e-list > ul .e-list > .e-menulink {
        & when (@skin="office-365") {
            padding: 10px 18px 10px 28px;
        }
    }

    .e-menu.e-vertical .e-list > .e-menulink > span.e-icon.e-arrowhead-right {
        & when (@skin= "office-365") {
            margin: 14px;
        }
    }

    .e-menu.e-horizontal .e-list > .e-menulink {
        & when (@skin= "office-365") {
            padding: 15px 24px 15px 10px;
        }
    }

    .e-menu.e-horizontal .e-list > ul .e-list > .e-menulink {
        & when (@skin="office-365") {
            padding: 10px 18px 10px 28px;
        }
    }

    .e-menu .e-list > .e-menulink {
        & when (@skin="material") {
            padding: 3px 18px 3px 28px;
        }

        &when not(@skin="material") {

            &when not(@skin="office-365") {
                padding: 3px 18px 3px 28px;
            }
        }

        height: inherit;
        white-space: nowrap;
    }

    .e-menu li.e-list > ul > li.e-list .e-menulink > img,
    .e-menu li.e-list > ul > li.e-list .e-menulink > div,
    .e-menu li.e-list > ul > li.e-list .e-menulink > span {
        & when (@skin= "office-365") {
            margin: 0 4px 0 0;
        }
    }

    .e-menu li.e-list > .e-menulink > img,
    .e-menu li.e-list > .e-menulink > div,
    .e-menu li.e-list > .e-menulink > span {
        left: 2px;

        & when (@skin= "office-365") {
            margin: 0 8px 0 8px;
            top: 30%;
        }

        & when not (@skin= "office-365") {
            margin: 0 4px 0 0;
            top: 25%;
        }

        position: absolute;
        vertical-align: middle;
        border: 0 none;
    }

    .e-menu .e-list > .e-menulink > span.e-icon.e-arrowhead-down {
        & when (@skin="office-365") {
            top: 35%;
        }
    }

    .e-menu .e-list > .e-menulink > span.e-icon.e-arrowhead-down, .e-menu .e-list > .e-menulink > span.e-icon.e-arrowhead-right {
        left: auto;
        position: absolute;

        & when (@skin="material") {
            top: 14%;
            right: 12px;
            width: 10px;
            height: 8px;
            font-size: 9px;
        }

        & when not(@skin="material") {
            & when (@skin="office-365") {
                width: 12px;
                height: 12px;
            }

            & when not(@skin="office-365") {
                top: 35%;
                font-size: 10px;
            }

            right: -4px;
        }
    }

    .e-menu .e-list > .e-menulink > span.e-icon.e-arrowhead-down:before, .e-menu .e-list > .e-menulink > span.e-icon.e-arrowhead-right:before {
        & when (@skin="material") {
            width: 10px;
            height: 8px;
        }
    }

    .e-menu .e-list > .e-menulink > span.e-icon.e-arrowhead-right:before {
        & when (@skin="material") {
            padding: 7px;
        }
    }

     .e-menu-res-wrap .e-check-wrap .e-chkbox-wrap {
        opacity: 0;
        width: 100%;
        height: 100%;
    }

     .e-menu-res-wrap {
        display: none;
        height: 32px;
        overflow: hidden;
    }

     .e-menu-res-wrap .e-menu-res-in-wrap {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

     .e-menu-res-wrap .e-menu-res-in-wrap .e-check-wrap .e-res-icon,
     .e-menu-res-wrap .e-menu-res-in-wrap .e-check-wrap {
        cursor: pointer;
        display: block;
        height: 100%;
        position: absolute;
        right: 0;
        text-align: left;
        top: 0;
        margin: 0px;
        width: 30px;
    }

     .e-menu-res-wrap .e-menu-res-in-wrap .e-check-wrap {
        & when (@skin="material") {
            border-left: 0px solid #AAAAAA;
        }

        & when not(@skin="material") {
            border-left: 1px solid #AAAAAA;
        }

        background-position: 3px 7px;
        background-repeat: no-repeat;
    }

     .e-menu-res-wrap .e-menu-res-in-wrap .e-res-title {
        height: 100%;
        font-family: @font-family;
        font-size: 13px;
    }

     .e-menu-res-wrap .e-in-wrap.e-menu-res-in-wrap {
        padding: 5px 30px 5px 5px;
    }

    .e-menu.e-horizontal > .e-ham-wrap {
        & when (@skin="material") {
            float: right;
            border-left: 0px solid;
            cursor: pointer;
            margin: 4px 16px 0px 16px;
        }

        & when not(@skin="material") {
            float: right;
            border-left: 1px solid;
            cursor: pointer;
        }
    }

    .e-menu.e-rtl.e-horizontal > .e-ham-wrap {
        float: left;
    }

    .e-menu.e-horizontal > .e-ham-wrap > div {
        & when (@skin="material") {
            padding: 6px;
            font-size: 13px;
        }

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

    .e-menu.e-horizontal > .e-ham-wrap > div > .e-hamburger {
        position: relative;
        display: inline-block;
        width: 1.25em;
        height: 0.8em;
        border-top: 0.2em solid;
        border-bottom: 0.2em solid;
    }

    .e-menu.e-horizontal > .e-ham-wrap > div > .e-hamburger:before {
        content: "";
        position: absolute;
        top: 0.3em;
        left: 0px;
        width: 100%;
        border-top: 0.2em solid;
    }

    .e-menu.e-separator.e-horizontal > .e-list.e-last {
        border-right: none;
    }

    .e-menu-wrap > .e-menu-popwrap {
        position: absolute;
        overflow-y: auto;
        z-index: 10000;
        border: 1px solid;
    }

    .e-menu.e-horizontal > .e-menu-show {
        display: inline-block;
    }

    .e-menu.e-horizontal > .e-menu-hide {
        display: none;
    }

    .e-menu-wrap > .e-menu-popwrap ul {
        border: none;
        position: static;
    }

    .e-menu-wrap > .e-menu-popwrap > .e-vertical > .e-list ul {
        border: none;
    }

    .e-menu-wrap > .e-menu-popwrap > .e-menu.e-vertical .e-list > .e-menulink {
        white-space: normal;
        word-wrap: break-word;
    }

    .e-menu.e-rtl,
    .e-menu.e-rtl > .e-list {
        text-align: right;
    }

    .e-menu.e-rtl .e-list > .e-menulink > img,
    .e-menu.e-rtl .e-list > .e-menulink > div,
    .e-menu.e-rtl .e-list > .e-menulink > span {
        margin: 0 0 0 4px;
    }

    .e-menu.e-rtl .e-list > .e-menulink > span.e-icon.e-arrowhead-down,
    .e-menu.e-rtl .e-list > .e-menulink > span.e-icon.e-arrowhead-right {
        & when (@skin= "material") {
            left: 0px;
            margin-left: 24px;
            right: auto;
        }

        & when not (@skin= "material") {
            left: -2px;

            & when (@skin= "office-365") {
                margin-left: 8px;
            }

            & when not (@skin= "office-365") {
                margin-left: 5px;
            }

            right: auto;
        }
    }

    .e-menu.e-rtl .e-list > .e-menulink > span {
        right: 0px;

        & when (@skin= "material") {
            margin-right: 0px;
        }

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

    .e-menu.e-horizontal > .e-list > .e-menulink {
        & when (@skin= "office-365") {
            line-height: 10px;
        }

        & when not (@skin= "office-365") {
            padding: 0 8px;
            line-height: @menu-horizontal-line-height;
        }

        height: 100%;
    }

    .e-menu.e-horizontal .e-list > ul {
        & when (@skin= "material") {
            box-shadow: @box-shadow;
            border: 0px solid;
            margin-top: 2px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
            }

            & when not (@skin= "office-365") {
                border: 1px solid;
            }
        }
    }

    .e-menu.e-horizontal .e-list > ul li.e-list > .e-menulink,
    .e-menu.e-vertical .e-list > .e-menulink, {
        display: block;

        & when (@skin= "material") {
            min-width: 126px;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 3px 18px 3px 32px;
        }
    }

    .e-menu.e-context .e-list > .e-menulink > span.e-icon.e-arrowhead-down, .e-menu.e-context .e-list > .e-menulink > span.e-icon.e-arrowhead-right {
        & when (@skin= "material") {
            top: 10%;
            right: 12px;
            width: 10px;
            height: 8px;
            font-size: 8px;
        }
    }

    .e-menu.e-context.e-rtl .e-list > .e-menulink > span.e-icon.e-arrowhead-down, .e-menu.e-context.e-rtl .e-list > .e-menulink > span.e-icon.e-arrowhead-right {
        & when (@skin= "material") {
            top: 10%;
            right: auto;
            width: 10px;
            height: 8px;
        }
    }

    .e-menu.e-horizontal > .e-list a.e-arrow-space {
        & when (@skin= "material") {
            padding: 1px 16px 1px 16px;
        }

        & when not (@skin= "material") {

            & when not (@skin= "office-365") {
                padding-right: 24px;
            }
        }
    }

    .e-menu.e-horizontal > .e-list span.e-menu-arrow {
        height: 10px;
        bottom: -1px;
        overflow: hidden;
        position: absolute;
        bottom: -1px;
        left: 12%;
        z-index: 10005;
        width: 20px;
    }

    .e-menu.e-horizontal > .e-list span.e-menu-left {
        left: 12%;
        right: auto;
    }

    .e-menu.e-rtl.e-horizontal > .e-list span.e-menu-left {
        right: 12%;
        left: auto;
    }

    .e-menu.e-rtl.e-horizontal .e-list > ul {
        left: auto;
        right: -1px;
    }

    .e-context.e-menu .e-list > a.e-menulink {
        text-overflow: ellipsis;
        overflow: hidden;

        & when (@skin= "material") {
            min-width: 126px;
        }
    }

    .e-menu.e-rtl.e-horizontal .e-list > ul ul {
        right: auto;
        left: 102%;
    }

    .e-menu.e-horizontal > .e-list > .e-menulink > img,
    .e-menu.e-horizontal > .e-list > .e-menulink > div,
    .e-menu.e-horizontal > .e-list > .e-menulink > span {
        left: 2px;
        top: -2px;
        margin: 0 4px 0 0;
        position: relative;
        vertical-align: middle;
        border: 0px none;
    }

    .e-menu.e-rtl.e-horizontal > .e-list .e-arrow-space {
        & when (@skin= "material") {
            padding-right: 16px;
            padding-left: 16px;
        }

        & when not (@skin= "material") {
            padding-left: 24px;
            padding-right: 4px;
        }
    }

    .e-menu.e-rtl .e-list > ul li.e-list .e-arrow-space {
        padding-right: 28px;
    }

    .e-menu.e-horizontal > .e-list,
    .e-menu.e-separator.e-horizontal > li.e-list:last-child, .e-menu.e-horizontal > li.e-separator:last-child, .e-menu.e-horizontal .e-list > ul .e-list.e-separator:last-child,
    .e-menu.e-separator.e-vertical > li:last-child, .e-menu.e-vertical > li.e-separator:last-child, .e-menu.e-vertical .e-list > ul .e-list.e-separator:last-child,
    .e-menu.e-rtl.e-horizontal > .e-list,
    .e-menu.e-rtl.e-separator.e-horizontal > li:last-child, .e-menu.e-rtl.e-horizontal > li.e-separator:last-child, .e-menu.e-rtl.e-horizontal .e-list > ul .e-list.e-separator:last-child,
    .e-menu.e-rtl.e-separator.e-vertical > li:last-child, .e-menu.e-rtl.e-vertical > li.e-separator:last-child, .e-menu.e-rtl.e-vertical .e-list > ul .e-list.e-separator:last-child,
    .e-menu.e-separator.e-context > li:last-child, .e-menu.e-context > li.e-separator:last-child, .e-menu.e-context .e-list > ul .e-list.e-separator:last-child,
    .e-menu.e-rtl.e-separator.e-context > li:last-child, .e-menu.e-rtl.e-context > li.e-separator:last-child, .e-menu.e-rtl.e-context .e-list > ul .e-list.e-separator:last-child {
        border: 0 none;
    }

    .e-menu.e-separator.e-horizontal > .e-list, .e-menu.e-horizontal > .e-separator {
        & when (@skin= "material") {
            border-right: 0px solid;
            border-radius: 2px;
        }

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

    .e-menu.e-horizontal .e-list > ul .e-list.e-separator,
    .e-menu.e-horizontal .e-list > ul .e-list.e-separator:hover,
    .e-menu.e-vertical .e-list > ul .e-list.e-separator,
    .e-menu.e-vertical .e-list > ul .e-list.e-separator:hover,
    .e-menu.e-context .e-list > ul .e-list.e-separator,
    .e-menu.e-context .e-list > ul .e-list.e-separator:hover,
    .e-menu.e-separator.e-vertical > .e-list, .e-menu.e-vertical > .e-separator,
    .e-menu.e-context > .e-separator {
        & when (@skin= "material") {
            border-bottom: 0px solid;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                border-bottom: 0px solid;
            }

            & when not (@skin= "office-365") {
                border-bottom: 1px solid;
            }
        }
    }

    .e-menu.e-separator.e-rtl.e-horizontal > .e-list, .e-menu.e-rtl.e-horizontal > .e-separator.e-list {
        border-right: 0 none;

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

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                border-left: 0px solid;
            }

            & when not (@skin= "office-365") {
                border-left: 1px solid;
            }
        }
    }

    .e-menu.e-rtl.e-vertical .e-list > ul li.e-list > .e-menulink,
    .e-menu.e-rtl.e-horizontal .e-list > ul li.e-list > .e-menulink {
        & when (@skin= "material") {
            padding: 3px 32px 3px 30px;
        }

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

            & when not (@skin= "office-365") {
                padding: 3px 28px 3px 18px;
            }
        }
    }

    .e-menu.e-vertical > .e-list > .e-menulink {
        & when (@skin= "office-365") {
            padding: 15px 28px 15px 28px;
        }

        & when not (@skin= "office-365") {
            padding: 0 28px;
        }
    }

    .e-menu.e-vertical {
        & when (@skin= "material") {
            box-shadow: @box-shadow;
            border: 0px solid;
            width: auto;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                border: 0px solid;
                width: auto;
            }

            & when not (@skin= "office-365") {
                border: 1px solid;
                width: 150px;
            }
        }
    }

    .e-menu.e-vertical .e-list, .e-menu.e-vertical > li.e-list.e-separator {
        & when (@skin= "office-365") {
            line-height: 10px;
        }

        & when not (@skin= "office-365") {
            line-height: @menu-vertical-line-height;
        }
    }

    .e-menu.e-vertical .e-list > ul {
        margin: -0.8px 0 0 0;
        top: 0;
        left: 102%;

        & when (@skin= "material") {
            box-shadow: @box-shadow;
            border: 0px solid;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
            }

            border: 1px solid;
        }
    }

    .e-menu.e-vertical .e-list > ul .e-list {
        & when (@skin= "material") {
            line-height: 26px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                line-height: 16px;
            }

            & when not (@skin= "office-365") {
                line-height: @menu-ver-child-line-height;
            }
        }
    }

    .e-menu.e-vertical > .e-list > img {
        position: absolute;
    }

    .e-menu.e-vertical > .e-list > .e-menulink > img,
    .e-menu.e-vertical > .e-list > .e-menulink > div,
    .e-menu.e-vertical > .e-list > .e-menulink > span,
    .e-menu.e-context > .e-list > .e-menulink > img,
    .e-menu.e-context > .e-list > .e-menulink > div,
    .e-menu.e-context > .e-list > .e-menulink > span {
        & when (@skin= "material") {
            left: 2px;
            margin: 0px 4px 0 3px;
            position: absolute;
            vertical-align: middle;
            border: 0px none;
        }

        & when not (@skin= "material") {
            left: 2px;
            margin: 0 4px 0 0;
            position: absolute;
            vertical-align: middle;
            border: 0px none;
        }
    }

    .e-menu.e-context > .e-list > .e-menulink {
        display: block;

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

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                line-height: 38px;
                font-size: 14px;
            }

            & when not (@skin= "office-365") {
                font-size: 13px;
            }

            padding: 1px 18px 1px 28px;
        }
    }

    .e-menu.e-context li.e-list > ul li.e-list > .e-menulink {
        & when (@skin= "material") {
            padding: 3px 18px 3px 32px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                line-height: 35px;
            }

            padding: 1px 18px 1px 28px;
        }

        height: inherit;
        white-space: nowrap;
    }

    .e-menu.e-context {
        position: absolute;
        z-index: 9998;
        font-size: 13px;

        & when (@skin= "material") {
            box-shadow: @box-shadow;
            padding: 0px;
            border: 0px solid;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
                -webkit-animation-name: menuFadeIn,menuslideDown;
                animation-name: menuFadeIn,menuslideDown;
                -webkit-animation-duration: 367ms;
                -moz-animation-duration: 367ms;
                -ms-animation-duration: 367ms;
                -o-animation-duration: 367ms;
                -webkit-animation-timing-function: cubic-bezier(.1,.9,.2,1);
                animation-timing-function: cubic-bezier(.1,.9,.2,1);
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
            }

            padding: 1px;
            border: 1px solid;
            width: 150px;
        }
    }

    @keyframes menuslideDown {
        0% {
            -webkit-transform: translate3d(0,-20px,0);
            transform: translate3d(0,-20px,0);
        }

        100% {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
    }

    @keyframes menuFadeIn {
        0% {
            opacity: 0;
            -webkit-animation-timing-function: cubic-bezier(.1,.25,.75,.9);
            animation-timing-function: cubic-bezier(.1,.25,.75,.9);
        }

        100% {
            opacity: 1;
        }
    }

    .e-menu.e-context .e-list > ul .e-list {
        & when (@skin= "office-365") {
            line-height: 35px;
        }
    }

    .e-menu.e-context .e-list > ul .e-list, .e-menu.e-context .e-list, .e-menu.e-context > li.e-list.e-separator {
        & when (@skin= "material") {
            line-height: 26px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                line-height: 38px;
            }

            & when not (@skin= "office-365") {
                line-height: 27px;
            }
        }
    }

    .e-menu.e-context .e-list > ul {
        margin: -0.8px 0 0 0;
        top: 0;
        left: 102%;
        line-height: 23px;

        & when (@skin= "material") {
            box-shadow: @box-shadow;
            border: 0px solid;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
                -webkit-animation-name: menuFadeIn,menuSlideRight;
                animation-name: menuFadeIn,menuSlideRight;
                -webkit-animation-duration: 367ms;
                -moz-animation-duration: 367ms;
                -ms-animation-duration: 367ms;
                -o-animation-duration: 367ms;
                -webkit-animation-timing-function: cubic-bezier(.1,.9,.2,1);
                animation-timing-function: cubic-bezier(.1,.9,.2,1);
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
            }

            border: 1px solid;
        }
    }

    @keyframes menuSlideRight {
        0% {
            -webkit-transform: translate3d(-20px,0,0);
            transform: translate3d(-20px,0,0);
        }

        100% {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
    }

    .e-menu.e-context > .e-list > .e-menulink > img,
    .e-menu.e-context > .e-list > .e-menulink > div,
    .e-menu.e-context > .e-list > .e-menulink > span {
        float: left;
    }

    .e-menu.e-context.e-rtl > .e-list > .e-menulink {
        & when (@skin= "material") {
            /*material*/
            padding: 3px 32px 3px 18px;
        }

        & when not (@skin= "material") {
            /*other*/
            padding: 1px 28px 1px 18px;
        }
    }

    .e-menu.e-rtl.e-context li.e-list > ul li.e-list > .e-menulink {
        & when (@skin= "material") {
            /*material*/
            padding: 3px 32px 3px 18px;
        }

        & when not (@skin= "material") {
            /*other*/
            padding: 1px 28px 1px 18px;
        }
    }

    .e-menu .e-list.e-hidden-item {
        display: none;
    }
}

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

    .e-acrdn {
        outline: 0 none;
    }

    .e-acrdn > .e-select > .e-icon, .e-acrdn.e-rtl > .e-select > div.e-close {
        border: 0 none transparent;
        display: block;
        height: 16px;
        width: 16px;
        margin-left: -5px;
        margin-top: 5px;
        cursor: pointer;

        & when (@skin= "material") {
            /*material*/
            float: right;
            margin-right: 16px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                float: right;
                margin-right: 16px;
            }

            & when not (@skin= "office-365") {
                /*other*/
                float: left;
                margin-right: 6px;
            }
        }
    }

    .e-acrdn .e-select:first-child {
        & when not (@skin= "material") {
            border-top: 1px solid;
        }
    }

    .e-acrdn .e-select:last-of-type {
        & when (@skin= "office-365") {
            border-bottom: 1px solid;
        }
    }

    .e-acrdn > .e-select {
        & when (@skin= "material") {
            /*material*/
            padding: 12.5px 0px 12.5px 16px;
            line-height: 23px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                /*office-365*/
                padding: 12px;
                border-style: none solid none solid;
                line-height: 15px;
            }

            & when not (@skin= "office-365") {
                /*other*/
                padding-left: 1em;
                border-style: none solid solid;
                line-height: 23px;
            }

            border-width: 1px;
            padding: 0.5em;
        }
    }

    .e-acrdn .e-select a {
        text-decoration: none;
        border-bottom-width: 0;
        outline: 0 none;
    }

    .e-acrdn > .e-content {
        & when (@skin= "material") {
            padding: 16px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                padding: 15px;
            }

            & when not (@skin= "office-365") {
                padding: 1em 1.4em;
            }
        }

        text-align: justify;
        position: relative;
        border: 1px solid;
    }

    .e-acrdn.e-rtl .e-icon, .e-acrdn > .e-select > div.e-close {
        & when (@skin= "material") {
            float: left;
            margin-left: 16px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                float: left;
                margin-left: 16px;
            }

            & when not (@skin= "office-365") {
                float: right;
                margin-left: 5px;
            }
        }
    }

    .e-acrdn .e-select.e-disable a, .e-acrdn .e-select.e-disable span.e-icon {
        cursor: default;
    }

    .e-acrdn > .e-select > div.e-close {
        visibility: hidden;
    }

    .e-acrdn > .e-select:hover > div.e-close {
        visibility: visible;
    }

    .e-acrdn > .e-select.e-disable:hover > div.e-close {
        visibility: hidden;
    }
}

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

    .e-chkbox-wrap, .e-radiobtn-wrap {
        outline: 0 none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

    .e-chkbox-wrap.e-disable .e-text, .e-radiobtn-wrap.e-disable .e-text {
        cursor: default;
    }

    .e-chkbox-wrap .e-text {
        text-align: left;
        top: 0px;
        cursor: pointer;

        & when (@skin= "material") {
            padding: 18px 5px 2px 5px;
        }

        & when (@skin= "office-365") {
            padding: 9px 5px 2px 5px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding: 8px 5px 2px 5px;
        }
    }

    .e-chkbox-wrap.e-check-small .e-text {
        & when (@skin= "material") {
            padding: 7px 5px 2px 5px;
        }

        & when (@skin= "office-365") {
            padding: 4px 5px 2px 5px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding: 2px 5px 2px 5px;
        }
    }

    .e-chkbox-wrap input.e-checkbox {
        display: none;
        z-index: 1;
        text-align: left;
        top: 2px;
    }

    .e-chkbox-wrap.e-disable div > span, .e-radiobtn-wrap.e-disable > span {
        cursor: default;
    }

    .e-chkbox-wrap div > span, .e-radiobtn-wrap > span {
        display: block;
        cursor: pointer;
        z-index: 2;
        position: relative;
        border: 1px solid;

        & when (@skin= "material") {
            border: 2px solid;
        }

        text-align: left;
    }

    .e-chkbox-wrap.e-rtl div > span, .e-radiobtn-wrap.e-rtl > span, .e-rtl .e-chkbox-wrap.e-widget div > span, .e-rtl .e-radiobtn-wrap.e-widget > span {
        text-align: right;
    }

    .e-chkbox-wrap .e-chkbox-small > span {
        & when (@skin= "material") {
            /*material*/
            height: 14px;
            width: 14px;
        }

        & when (@skin= "office-365") {
            height: 16px;
            width: 16px;
            top: 3px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            height: 14px;
            width: 14px;
            top: 3px;
        }
    }

    .e-chkbox-wrap .e-chkbox-medium > span {
        height: 20px;
        width: 20px;

        & when not (@skin= "material") {
            top: 6px;
        }
    }

    .e-chkbox-wrap .e-chk-image {
        height: 100%;
        position: absolute;
        width: 100%;
    }

    .e-chkbox-wrap .e-chkbox-small .e-chk-image.e-stop:before {
        & when not (@skin= "material") {
            text-indent: 1px;
        }
    }

    .e-chkbox-wrap .e-chkbox-small .e-stop, .e-chkbox-wrap .e-chkbox-small .e-checkmark {

        & when (@skin= "material") {
            font-size: 14px;
            line-height: 15px;
        }

        & when (@skin= "office-365") {
            font-size: 12px;
            line-height: 16px;
            text-align: center;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            font-size: 12px;
            line-height: 15px;
        }
    }

    .e-chkbox-wrap .e-chkbox-medium .e-checkmark {
        & when (@skin= "material") {
            font-size: 21px;
        }

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

    .e-chkbox-wrap .e-chkbox-medium .e-stop {
        & when (@skin= "material") {
            font-size: 25px;
            line-height: 22px;
        }

        & when not (@skin= "material") {
            font-size: 18px;
            line-height: 20px;
        }
    }

    .e-chkbox-wrap .e-chkbox-medium .e-checkmark {
        & when (@skin= "material") {
            line-height: 21px;
        }

        & when (@skin= "office-365") {
            line-height: 20px;
            text-align: center;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            line-height: 21px;
        }
    }

    .e-chkbox-wrap .e-chkbox-medium .e-chk-image.e-stop:before {
        & when (@skin= "material") {
            text-indent: -5.0px;
        }

        & when not (@skin= "material") {
            text-indent: -2px;
        }
    }

    .e-chkbox-wrap .e-chkbox-medium .e-chk-image.e-checkmark:before {
        & when (@skin= "material") {
            text-indent: 0px;
        }
    }

    .e-chkbox-wrap .e-chk-image.e-checkmark:before {
        content: "\e657";
        width: 100%;

        & when (@skin= "material") {
            text-indent: 0.5px;
        }

        & when not (@skin= "material") {
            text-indent: 1px;
        }

        height: 100%;
    }
}

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

    .e-radiobtn-wrap {
        vertical-align: middle;
        margin-bottom: 3px;
    }

    .e-radiobtn-wrap > span.e-radsmaller, .e-radiobtn-wrap > span.e-radmedium {
        display: inline-block;
    }

    .e-radiobtn-wrap .e-radiobtn {
        display: none;
        height: 0px;
        width: 0px;
        z-index: 1;
        text-align: left;
    }

    .e-rad-outer {
        overflow: hidden;
    }

    .e-rad-outer.e-radiobtn-wrap .e-radiobtn {
        display: block;
    }

    .e-radiobtn-wrap > span .e-rad-icon {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .e-radiobtn-wrap .e-radmedium {
        & when (@skin= "material") {
            height: 20px;
            width: 20px;
            border-radius: 20px;
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
        }

        & when (@skin= "office-365") {
            height: 20px;
            width: 20px;
            border-radius: 20px;
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 16px;
            width: 16px;
            border-radius: 15px;
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
        }
    }

    .e-radiobtn-wrap .e-radmedium .e-rad-icon {
        font-size: 9px;
        border-radius: 9px;
        -moz-border-radius: 9px;
        -webkit-border-radius: 9px;

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

        & when (@skin= "office-365") {
            font-size: 10px;
            line-height: 11px;
        }
    }

    .e-radiobtn-wrap .e-radmedium .e-rad-icon.e-icon:before {
        & when (@skin= "material") {
            height: 10px;
            width: 10px;
        }

        & when (@skin="office-365") {
            height: 10px;
            width: 10px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            height: 9px;
            width: 9px;
        }

        margin: 24% auto;
    }

    .e-radiobtn-wrap .e-radsmaller {

        & when (@skin= "material") {
            height: 16px;
            width: 16px;
            border-radius: 16px;
            -moz-border-radius: 16px;
            -webkit-border-radius: 16px;
        }

        & when (@skin= "office-365") {
            height: 16px;
            width: 16px;
            border-radius: 16px;
            -moz-border-radius: 16px;
            -webkit-border-radius: 16px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 13px;
            width: 13px;
            border-radius: 13px;
            -moz-border-radius: 13px;
            -webkit-border-radius: 13px;
        }
    }

    .e-radiobtn-wrap .e-radsmaller .e-rad-icon {
        text-indent: 2px;
        border-radius: 7px;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        padding: 0.5px;

        & when (@skin= "material") {
            font-size: 10px;
            line-height: 15px;
        }

        & when (@skin= "office-365") {
            font-size: 9px;
            line-height: 15px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            font-size: 8px;
            line-height: 12px;
        }
    }

    .e-radiobtn-wrap .e-text {
        margin-left: 3px;
        padding: 2px;
        text-align: left;
        top: 0;
        cursor: pointer;
        float: right;
        vertical-align: middle;
        line-height: 12px;

        & when (@skin= "material") {
            line-height: 20px;
        }
    }

    .e-radiobtn-wrap.e-radmed .e-text {
        line-height: 16px;

        & when (@skin= "material") {
            line-height: 25px;
        }
    }

    .e-radiobtn-wrap.e-rtl .e-text {
        float: left;
    }
}

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

    .e-tab {
        outline: 0 none;
    }

    .e-tab.e-js.e-widget.e-scrolltab {
        padding: 50px;
    }

    .e-tab .e-rtl-top-line {
        margin: 0 -1px -1px 1px;
    }

    .e-tab .e-rtl-bottom-line {
        margin: -1px -1px -1px 1px;
    }

    .e-tab .e-header .e-item:first-child a {
        & when (@skin= "office-365") {
            padding-left: 8px;
        }
    }

    .e-tab.e-js .e-header > .e-rtl-top-line.e-active.e-top-hover {
        & when (@skin= "material") {
            /*material*/
            padding-bottom: 0px;
            border-bottom: 2px solid #ff4081;
        }

        & when not (@skin= "material") {
            /*other*/
            padding-bottom: 1px;
            border-bottom: transparent;
        }
    }

    .e-tab .e-bottom-line, .e-tab .e-top-line, .e-tab .e-activetop, .e-tab .e-activebottom {
        border: @border-size @border-type;
    }

    .e-tab .e-top-line {
        margin: -1px 0px 0px 0px;
    }

    .e-tab .e-bottom-line.e-active {
        margin: 0px 0px -1px 0;
    }

    .e-tab .e-bottom-line, .e-tab .e-activebottom, .e-tab .e-left > .e-active, .e-tab .e-left > .e-active:hover, .e-tab .e-right > .e-active, .e-tab .e-right > .e-active:hover {
        border-bottom: 0 none;
    }

    .e-tab .e-top-line, .e-tab .e-activetop {
        border-top: 0 none;
    }

    .e-tab.e-js > .e-header {
        font-size: 0px;

        & when (@skin= "material") {
            /*material*/
            box-shadow: none;
            width: 100%;
        }

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

            & when not (@skin= "office-365") {
                /*other*/
                box-shadow: @box-shadow;
                width: 99.9%;
            }
        }
    }

    .e-tab .e-header li {
        border-right: @border-size @border-type;
        line-height: normal;
        list-style: none outside none;

        & when (@skin= "material") {
            /*material*/
            border-right: 0px @border-type;
        }
    }

    .e-tab .e-header li a {
        & when (@skin= "material") {
            /*material*/
            padding: 16px 24px 16px 24px;
        }

        & when not (@skin= "material") {
            /*other*/
            padding: 0.6em 0.9em;
        }

        text-decoration: none;
        border-bottom-width: 0;
        outline: 0 none;
    }

    .e-tab .e-header li.e-tab-active {
        margin-bottom: 0;
        padding-bottom: 1px;
    }

    .e-tab .e-content-item {
        display: none;
    }

    .e-tab .e-active-content {
        & when (@skin= "office-365") {
            /*office-365*/
            padding: 15px 1.4em 1em 1.4em;
        }

        & when not (@skin= "office-365") {
            padding: 1em 1.4em;
        }

        text-align: justify;
    }

    .e-tab .e-tab-active {
        font-weight: @header-font-weight;
    }

    .e-tab > .e-header .e-icon {
        float: right;
        cursor: pointer;
        background-color: transparent;
        background-image: none;


        & when (@skin= "material") {
            height: 16px;
            width: 16px;
            /*material*/
            margin-top: 16px;
            padding-left: 12px;
            padding-right: 12px;
            padding: 3px;
            margin-right: 3px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                height: 12px;
                width: 12px;
                margin-top: 9px;
                padding-left: 8px;
                padding-right: 8px;
                padding: 3px;
            }

            & when not (@skin= "office-365") {
                /*other*/
                height: 16px;
                width: 16px;
                margin-top: 11px;
                margin-right: 3px;
                padding: 3px;
            }
        }
    }

    .e-tab.e-rtl .e-header > .e-item:first-child {
        margin-right: 0;
    }

    .e-tab.e-rtl .e-header .e-icon, .e-tab .e-left, .e-tab.e-vertical .e-right .e-icon {
        float: left;
    }

    .e-tab.e-vertical .e-content {
        height: 100%;
    }

    .e-tab .e-left, .e-tab .e-right {
        & when (@skin= "material") {
            /*material*/
            box-shadow: none;
        }

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

            & when not (@skin= "office-365") {
                /*other*/
                box-shadow: @box-shadow;
            }
        }

        line-height: normal;
        list-style: none outside none;
        margin: 0;
        text-align: left;
        padding: 0;
    }

    .e-tab.e-vertical .e-right .e-icon {
        margin-left: 5px;
    }

    .e-tab.e-vertical .e-left .e-icon {
        margin-right: 5px;
    }

    .e-tab .e-right, .e-tab.e-vertical .e-left .e-icon {
        float: right;
    }

    .e-tab .e-left li a, .e-tab .e-right li a {
        & when (@skin= "material") {
            /*material*/
            padding: 14px 24px;
        }

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

            & when not (@skin= "office-365") {
                /*other*/
                padding: 9px 5px;
            }

            margin-left: 5px;
        }

        display: inline-block;
        outline: 0 none;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .e-tab.e-vertical .e-icon.e-close {
        background-position: -445px -24px;
        margin-top: 18.5px;
    }

    .e-tab .e-icon.e-chevron-circle-left, .e-tab .e-icon.e-chevron-circle-right {
        & when (@skin= "material") {
            /*material*/
            font-size: 20px;
            top: 12px;
        }

        & when not (@skin= "material") {
            /*other*/
            font-size: 40px;
        }
    }

    .e-tab.e-vertical, .e-tab.e-vertical .e-active-content, .e-tab .e-left li a, .e-tab .e-right li a {
        overflow: hidden;
    }

    .e-tab.e-vertical .e-icon.e-reload {
        background-position: -82px 0;
        margin-top: 20px;
        display: inline-block;
    }

    .e-tab .e-left .e-icon, .e-tab .e-right .e-icon {
        background-image: none;
    }
}

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

     .e-dialog {
        outline: 0 none;
    }

    .e-dialog > .e-titlebar {
        padding: 0.7em;
        position: relative;
        overflow: hidden;
        z-index: inherit;
        box-shadow: @box-shadow;
    }

    .e-dialog > .e-header .e-title {
        display: inline-block;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: top;
    }

    .e-dialog .e-draggable {
        cursor: move;
    }

    .e-dialog.e-dialog-wrap > .e-disable-overlay {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 10001;
    }

    .e-dialog .e-dialog-icon {
        cursor: pointer;
        padding: 1px;
        right: 5px;
        top: 50%;
        float: right;
        height: 23px;
        width: 20px;
        text-align: center;
        position: relative;
    }

    .e-dialog .e-dialog-favicon {
        padding: 1px;
        height: 20px;
        width: 20px;
        text-align: center;
        position: relative;
        margin-right: 3px;
    }

    .e-dialog .e-dialog-favicon .e-dialog-custom {
        display: block;
        height: 100%;
        width: 100%;
        margin: 0 auto;
    }

    .e-dialog-icon.e-btn-normal.e-btn {
        background: none;
        border: none;
        color: inherit;
        filter: none;
    }

    .e-dialog-icon.e-btn-normal.e-btn > div {
        display: block;
        margin: 0 auto;
        width: 14px;
        height: 14px;
    }

    .e-dialog-icon.e-btn.e-select .e-icon {
        color: inherit;
        padding: 0px;
    }

    .e-dialog .e-widget-content {
        position: relative;
        border: 0;
        padding: .5em 1em;
        background: none;
        border-image: initial;
        min-height: 15px;
    }

    .e-dialog > .e-icon.e-resizable {
        bottom: 0;
        cursor: se-resize;
        display: block;
        height: 14px;
        position: absolute;
        right: 0;
        width: 16px;
    }

    .e-dialog > .e-icon.e-resizable:before {
        position: absolute;
        top: 0;
        left: 0;
    }

    .e-dialog.e-rtl .e-dialog-icon {
        float: left;
    }

     .e-dialog > .e-icon {
        height: 20px;
        width: 20px;
    }

    .e-dialog .e-dialog-icon::after {
        & when (@skin= "material") {
            .e-ripple-style();
        }
    }

    .e-dialog .e-dialog-icon:active::after {
        & when (@skin= "material") {
            .e-ripple-animation();
        }
    }

    .e-ripple-style() {
        content: '';
        position: absolute;
        top: 45%;
        left: 45%;
        width: 4px;
        height: 4px;
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }

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

    @keyframes e-ripple {
        0% {
            transform: scale(0, 0);
            opacity: 1;
        }

        2% {
            transform: scale(1, 1);
            opacity: 1;
        }

        5% {
            transform: scale(2, 2);
            opacity: 1;
        }

        10% {
            transform: scale(4, 4);
            opacity: 1;
        }

        25% {
            transform: scale(7, 7);
            opacity: 1;
        }

        100% {
            opacity: 1;
            transform: scale(10, 10);
        }
    }
}

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

    .e-h-arrow, .e-v-arrow {
        display: block;
        z-index: 10002;
    }

    .e-v-arrow.e-arrow-sans-down {
        margin-left: -9px;
        top: -4px;
    }

    .e-v-arrow.e-arrow-sans-up {
        top: -1.4px;
    }

    .e-splitter.e-rtl .e-h-arrow.e-arrow-sans-right {
        left: -2px;
    }

    .e-splitter.e-rtl .e-h-arrow.e-arrow-sans-left {
        left: -0.4px;
    }

    .e-h-arrow.e-arrow-sans-right {
        left: -4px;
        margin-top: -9px;
    }

    .e-h-arrow.e-arrow-sans-left {
        left: -1.4px;
    }

    .e-splitter .e-splitbar.e-resize.e-shadowbar {
        position: absolute;
        z-index: 10002;

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

        & when not (@skin= "office-365") {
            border-style: dotted;
        }
    }

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

    .e-splitter .e-splitbar {
        border-style: @border-type;
        display: block;
        float: left;
        position: relative;
        outline: 0 none;
        overflow: hidden;
    }

    .e-pane.e-splitter {
        border: none !important;
    }

    .e-splitter .e-splitbar.e-h-bar.e-resize {
        cursor: e-resize;
    }

    .e-splitter .e-splitbar.e-v-bar.e-resize {
        cursor: n-resize;
    }

    .e-splitter .e-splitbar.e-h-bar {
        border-style: solid;
        border-width: 0 1px;
        height: 100%;
        vertical-align: middle;
        width: 9px;
    }

    .e-splitter .e-splitbar.e-v-bar {
        border-style: solid;
        border-width: 1px 0;
        height: 9px;
        vertical-align: middle;
        width: 100%;
    }

    .e-splitter .e-splitbar .e-v-arrow, .e-splitter .e-splitbar .e-h-arrow {
        cursor: pointer;
        position: absolute;
    }

    .e-splitter .e-splitbar .e-v-arrow {
        float: left;
        height: 11px;
        width: 12px;
        left: 50%;
    }

    .e-splitter .e-splitbar .e-h-arrow {
        height: 12px;
        width: 11px;
        top: 50%;
    }

    .e-splitter .e-pane {
        border: none;
        cursor: default;
        float: left;
        position: relative;
        overflow-x: auto;
    }

    .e-splitter .e-pane.collapsed {
        overflow: hidden;
    }

    .e-splitter .e-h-pane {
        height: 100%;
    }

    .e-splitter .e-v-pane {
        width: 100%;
    }
}

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


    .e-upload-box.e-drag-wrapper {
        border: dashed 3px #C1C3C5;
        display: table;
        position: relative;
        box-sizing: border-box;
    }

    .e-upload-box.e-drag-wrapper .e-drag-container {
        display: table-cell;
        height: 100%;
        width: 100%;
        vertical-align: middle;
    }

    .e-upload-box .e-drag-text {
        color: #CCCCD3;
        font-size: 12pt;
        font-weight: bold;
        padding: 11px;
        display: block;
        margin: 0 auto;
        text-align: center;

        & when (@skin= "office-365") {
            padding-bottom: 25px;
        }
    }

    .e-upload-box.e-drag-wrapper .e-uploadbox.e-widget {
        margin: 0 auto;
    }

    .e-uploadbox .e-selectpart {
        overflow: hidden;
        position: relative;
        width: auto;
    }

    .e-uploadbox .e-inputbtn {
        background-color: transparent;
        border: @border-size @border-type transparent;
    }

    .e-uploadbox.e-widget .e-selectpart.e-select {
        & when (@skin="material") {
            border: 0px solid;
        }

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

        box-shadow: @box-shadow;

        .border-radius(@radius) when not(@radius = 0px) {
            border-radius: @border-radius;
        }

        .border-radius(@border-radius);
    }

    .e-uploadbox .e-action-container {
        width: 233px;

        & when (@skin="material") {
            float: right;
            padding-top: 16px;
        }

        & when not(@skin="material") {
            & when (@skin="office-365") {
                margin: 0px 25px 0px auto;
                float: right;
            }

            & when not (@skin="office-365") {
                margin: 0px auto 8px auto;
                padding-top: 16px;
            }
        }
    }

    .e-uploadbox .e-uploadinput {
        display: block;
        cursor: pointer;
        filter: alpha(opacity=0);
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0px;
        margin: 0;
    }

    .e-uploadbox.e-browse-hide {
        opacity: 0;
        filter: alpha(opacity=0);
        top: 0;
        left: 0;
        width: 500px;
        height: 100px;
        cursor: pointer;
        position: absolute;
    }

    .e-uploadbox.e-browse-hide .e-select .e-inputbtn {
        filter: alpha(opacity=0);
    }

    .e-uploadbox .e-ul {
        width: 100%;
    }

    .e-uploadbox .e-file-list {
        & when (@skin= "material") {
            /*material*/
            height: 64px;
            top: 0px;
        }

        & when not (@skin= "material") {
            /*other*/
            height: 58px;
            top: 5px;
        }

        text-align: center;
        text-indent: 3px;
        position: relative;
    }

    .e-uploadbox .e-file-list .file-status {
        float: left;
        min-width: 77px;
        padding-right: 0;
        padding-top: 5px;
        text-align: right;
    }

    .e-uploadbox .e-file-list .e-file-view {
        height: 85%;
    }

    .e-uploadbox .e-file-list .e-file-percentage {
        float: left;
        padding-left: 0;
        padding-right: 0;
        padding-top: 15px;
        width: 140px;
        font-size: 10px;
    }

    .e-uploadbox .e-file-progress {
        float: left;
        width: 200px;
        position: relative;
        overflow: hidden;
    }

    .e-uploadbox .e-file-name {
        display: block;
        height: 25px;
        text-align: left;
        width: 100%;
    }

    .e-uploadbox .e-file-progress-bar {
        & when (@skin= "material") {
            /*material*/
            height: 5px;
            width: 100px;
            margin-left: 30px;
            margin-top: 12px;
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                height: 2px;
                width: 100%;
                margin-top: 6px;
                margin-left: 8px;
            }

            & when not (@skin= "office-365") {
                height: 10px;
                width: 100%;
                margin: 2px;
            }
        }
    }

    .e-uploadbox .e-ul > li {
        width: 100%;

        & when (@skin= "material") {
            /*material*/
            height: 64px;
        }

        & when not (@skin= "material") {
            /*other*/
            height: 60px;
        }
    }

    .e-uploadbox .e-ul li .e-file-list {
        width: 100%;
        clear: both;
    }

    .e-uploadbox .e-file-progress-status {
        & when (@skin= "material") {
            /*material*/
            height: 5px;
            width: 0%;
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                height: 2px;
            }

            & when not (@skin= "office-365") {
                height: 10px;
            }

            width: 0%;
        }
    }

    .e-uploadbox .e-file-list .e-file-size {
        float: left;
        min-width: 100px;
        padding-left: 0;
        padding-right: 0;
        width: 100px;
    }

    .e-uploadbox .e-file-name .e-file-name-txt, .e-uploadbox .e-drag-wrapper .e-file-name .e-file-name-txt, .e-uploadbox .e-file-head.e-head-name, .e-uploadbox .e-drag-wrapper .e-file-head.e-head-name {
        text-indent: 16px;
    }

    .e-uploadbox .e-file-size .e-file-name-txt {
        left: -11px;
        text-align: left;
    }

    .e-uploadbox .e-file-name-txt {
        position: relative;
        top: 13px;
        font-weight: @content-font-weight;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-indent: 20px;
    }

    .e-uploadbox .e-file-upload {
        & when (@skin= "material") {
            /*material*/
            padding: 0;
            height: 64px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                padding: 20px 0px;
                height: 70px;
                box-sizing: border-box;
            }

            & when not (@skin= "office-365") {
                /*other*/
                padding: 10px 0;
            }
        }
    }

    .e-uploadbox .e-uploadbtn, .e-uploadbox .e-uploadclosebtn {
        font-weight: @content-font-weight;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 40px;
        width: 100px;
        position: relative;

        & when (@skin= "material") {
            margin-left: 8px;
            border: 0px solid;
        }

        & when not (@skin= "material") {
            /*other*/
            margin-left: 15px;
            border: 1px solid;
        }
    }

    .e-uploadbox .e-uploadinput, .e-uploadbox .e-selectpart, .e-uploadbox .e-select .e-inputbtn, .e-uploadbox.e-disable .e-select .e-inputbtn {
        height: 100%;
        width: 100%;
        border: none;
        padding: 0;
        margin: 0;
    }

    .e-uploadbox.e-rtl .e-icon.e-file-cancel:before,
    .e-uploadbox.e-rtl .e-icon.e-delete:before,
    .e-uploadbox.e-rtl .e-icon.e-reload:before {
        top: 0px;
        left: 2px;
    }

    .e-uploadbox.e-rtl .e-file-name-txt, .e-mobile-upload.e-uploadbox.e-dialog.e-rtl .e-file-name-txt {
        text-align: right;
        left: 0px;
    }

    .e-uploadbox.e-rtl .e-file-view, .e-uploadbox.e-rtl .e-file-head, .e-uploadbox.e-rtl .e-action-perform, .e-uploadbox.e-rtl .e-icon.e-file-cancel {
        float: right;
    }

    .e-uploadbox.e-rtl .e-action-perform {
        margin-left: 0px;

        & when (@skin= "material") {
            /*material*/
            margin-right: 31px;
        }

        & when not (@skin= "material") {
            /*other*/
            margin-right: 15px;
        }
    }

    .e-uploadbox.e-rtl .e-file-progress-bar {
        & when (@skin= "material") {
            /*material*/
            margin-right: 30px;
        }
    }

    .e-uploadbox.e-rtl .e-file-size .e-file-name-txt {
        left: 10px;
        text-align: right;
    }

    .e-uploadbox.e-rtl .e-file-list {
        text-align: right;
    }

    .e-uploadbox.e-rtl .e-upload-file .e-icon {
        margin-right: 35%;
        left: 0;
    }

    .e-uploadbox .e-file-progress {
        border: @border-size @border-type transparent;
    }

    .e-uploadbox .e-upload-progress {
        border: @border-size @border-type transparent;
    }

    .e-uploadbox.e-dialog .e-ul .e-action-perform .e-icon {
        float: left;
        margin-top: 5px;
        position: relative;
        cursor: pointer;

        & when (@skin= "office-365") {
            height: 16px;
            width: 16px;
        }

        & when not (@skin= "office-365") {
            height: 20px;
            width: 30px;
        }
    }
    .e-uploaddialog.e-dialog .e-ul .e-action-perform .e-icon {
        float: left;
        margin-top: 5px;
        position: relative;
        cursor: pointer;

        & when (@skin= "office-365") {
            height: 16px;
            width: 16px;
        }

        & when not (@skin= "office-365") {
            height: 20px;
            width: 30px;
        }
    }
    .e-uploadbox .e-file-list .e-checkmark, .e-uploadbox .e-file-list .e-file-percentage-failed {
        margin-top: -5px;
        left: 43%;
        border-radius: 60px 60px 60px 60px;
        position: relative;

        & when (@skin= "material") {
            /*material*/
            height: 18px;
            width: 18px;
            margin-left: -20px;
        }

        & when not (@skin= "material") {
            /*other*/
            height: 23px;
            width: 23px;
        }
    }

    .e-uploadbox .e-action-perform {
        border-radius: 4px 4px 4px 4px;

        & when (@skin= "material") {
            /*material*/
            width: 20px;
            height: 25px;
            margin-right: 12px;
            float: right;
            margin-top: 16px;
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                width: 16px;
                height: 16px;
                margin-left: 25px;
            }

            & when not (@skin= "office-365") {
                width: 25px;
                height: 25px;
                margin-left: 15px;
            }

            float: left;
            margin-top: 11px;
        }
    }

    .e-uploadbox.e-dialog .e-ul .e-action-perform .e-icon:before {
        & when (@skin= "material") {
            /*material*/
            margin-left: 7px;
            font-size: 12px;
            margin-top: 2px;
        }
    }

    .e-uploadbox.e-rtl .e-dialog .e-ul .e-action-perform .e-icon:before {
        & when (@skin= "material") {
            /*material*/
            margin-left: 3px;
        }
    }

    .e-uploadbox .e-icon.e-checkmark:before {
        top: 4px;
        position: relative;
        left: -3px;
    }

    .e-uploadbox .e-head-name, .e-uploadbox .e-head-status {
        width: 200px;
    }

    .e-uploadbox .e-file-list .e-image-wrapper {
        height: 85%;
        padding: 0 5px;
        float: left;
    }

    .e-uploadbox .e-file-list .e-image-wrapper {
        text-align: left;
        width: 30px;
        margin-top: 1%;
        margin-left: 1%;
    }

    .e-uploadbox .e-file-list .e-image-wrapper .e-fileformat-image {
        height: 40px;
        width: 40px;
        display: block;
    }

    .e-uploadbox .e-file-progress {
        width: 200px;
    }

    .e-uploadbox.e-rtl .e-icon.e-file-percentage-failed:before, .e-uploadbox.e-rtl .e-icon.e-checkmark:before {
        left: 3px;
    }

    .e-uploadbox .e-icon.e-file-cancel:before,
    .e-uploadbox .e-icon.e-delete:before,
    .e-uploadbox .e-icon.e-reload:before {
        top: 0px;
        position: relative;

        & when (@skin= "material") {
            /*material*/
            font-size: none;
            left: -6px;
        }

        & when not (@skin= "material") {
            /*other*/
            font-size: 16px;
            left: -7px;
        }
    }

    .e-uploadbox .e-uploaddialog.e-dialog.e-dialog-content {
        position: relative;
        border: 0;
        background: none;
        overflow: auto;
        border-image: initial;
    }

    .e-uploadbox.e-dialog .e-titlebar {
        & when (@skin= "material") {
            /*material*/
            padding: 12px;
            position: relative;
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                padding: 20px 25px 28px 25px;
            }

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

            position: relative;
        }
    }

    .e-uploadbox.e-dialog .e-titlebar .e-title {
        margin-left: 3px;
        margin-right: 5px;
        position: relative;
        top: 1px;
    }


    .e-uploadbox.e-dialog .e-close {
        margin: 0px 2px 2px 2px;
    }

    .e-uploadbox.e-dialog .e-dialog-icon {
        & when (@skin= "material") {
            /*material*/
            top: 10px;
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                width: 16px;
                height: 16px;
            }

            top: 5px;
        }
    }

    .e-uploadbox .e-file-head {
        & when (@skin= "material") {
            /*material*/
            font-size: 13px;
            font-weight: 600;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                font-size: 13px;
                font-weight: 600;
            }

            & when not (@skin= "office-365") {
                /*others*/
                font-weight: 900;
            }
        }

        float: left;
        height: 25px;
        position: relative;
        text-indent: 12px;
        top: 30%;
    }

    .e-uploadbox .e-head-size {
        width: 100px;
    }

    .e-uploadbox .e-file-head.e-head-status {
        text-indent: 50px;

        & when (@skin= "material") {
            /*material*/
            margin-left: -15px;
        }
    }

    .e-uploadbox .e-head-content {
        & when (@skin= "material") {
            /*material*/
            height: 64px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                height: 36px;
            }

            & when not (@skin= "office-365") {
                /*other*/
                height: 50px;
            }
        }

        display: inline-block;
        vertical-align: middle;
        width: 100%;
    }

    .e-uploadbox.e-rtl .e-head-content {
        & when (@skin= "material") {
            /*material*/
            padding-right: 12px;
        }
    }

    .e-uploadbox.e-rtl .e-file-upload {
        & when (@skin= "material") {
            /*material*/
            padding-right: 12px;
            padding-left: 12px;
        }
    }

    .e-uploadbox .e-dialog.e-widget-content {
        padding: 0px;
    }

    .e-uploadbox .e-dialog.e-widget-content .e-icon {
        display: block;
        vertical-align: middle;
    }

    .e-mobile-upload.e-uploadbox .e-action-container {
        width: 160px;
        padding-top: 10px;
    }

    .e-uploadbox .e-action-container.sync {
        width: 125px;
    }

    .e-mobile-upload.e-uploadbox .e-action-container.sync {
        width: 75px;
    }

    .e-mobile-upload.e-uploadbox .e-uploadbtn, .e-mobile-upload.e-uploadbox .e-uploadclosebtn {
        margin-left: 0px;
    }

    .e-mobile-upload.e-uploadbox.e-dialog .e-header {
        padding: 4px;
        font-size: 14px;
    }

    .e-mobile-upload.e-uploadbox.e-dialog .e-uploadbtn.e-btn {
        float: right;

        & when (@skin="material") {
            margin-left: 8px;
            margin-right: 12px;
        }

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

    .e-mobile-upload.e-rtl.e-uploadbox.e-dialog .e-uploadclosebtn.e-btn {
        margin-left: 0px;
        float: left;
    }

    .e-mobile-upload.e-rtl.e-uploadbox.e-dialog .e-uploadclosebtn.e-btn {
        margin-left: 15px;
        float: right;
    }

    .e-mobile-upload.e-rtl.e-uploadbox.e-dialog .e-uploadbtn.e-btn {
        margin-left: 0px;
        float: left;
    }

    .e-mobile-upload.e-uploadbox.e-dialog .e-head-content {
        display: none;
    }

    .e-mobile-upload.e-uploadbox.e-dialog .e-file-name-txt {
        top: 0px;
        font-size: 12px;
    }

    .e-mobile-upload.e-uploadbox.e-dialog .e-file-list > div {
        float: left;
        height: 20px;
    }

    .e-mobile-upload.e-uploadbox.e-dialog .e-file-percentage {
        padding-top: 0px;
        padding-left: 15px;
        width: 175px;
    }

    .e-mobile-upload.e-uploadbox.e-dialog .e-titlebar .e-title {
        margin-right: 15px;
        margin-left: 12px;
    }

    .e-mobile-upload.e-uploadbox.e-dialog .e-file-list .e-action-perform {
        float: right;
        margin-right: 12px;
        width: 15px;

        & when (@skin= "material") {
            /*material*/
            margin-top: -4px;
        }

        & when not (@skin= "material") {
            /*material*/
            margin-top: 0px;
        }
    }

    .e-mobile-upload.e-uploadbox.e-dialog .e-file-size > .e-file-name-txt {
        font-size: 10px;
        left: -1px;
        text-align: left;
    }

    .e-mobile-upload.e-uploadbox.e-dialog .e-file-progress-status, .e-mobile-upload.e-uploadbox.e-dialog .e-file-progress-bar {
        & when (@skin= "material") {
            /*material*/
            height: 5px;
            margin-left: 0px;
        }

        & when not (@skin= "material") {
            /*material*/
            height: 12px;
        }
    }

    .e-mobile-upload.e-uploadbox.e-dialog .e-file-upload button.e-btn {
        font-size: 12px;
        height: 30px;
        width: 70px;
        font-size: 12px;
    }

    .e-rtl.e-mobile-upload.e-uploadbox.e-dialog .e-file-upload > button {
        left: -4px;
    }

    .e-mobile-upload.e-uploadbox.e-dialog .e-ul .e-action-perform .e-icon {
        width: 10px;
        top: -2px;

        & when (@skin= "material") {
            /*material*/
            margin-left: -1px;
        }

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

    .e-mobile-upload.e-uploadbox.e-dialog .e-dialog-icon {
        & when (@skin= "material") {
            /*material*/
            top: 12px;
        }

        & when not (@skin= "material") {
            /*material*/
            top: 0px;
        }
    }

    .e-mobile-upload.e-uploadbox .e-ul > li, .e-mobile-upload {
        height: 100%;
    }

    .e-mobile-upload.e-uploadbox .e-icon.e-close:before, .e-mobile-upload.e-uploadbox .e-icon.e-file-cancel:before {
        & when (@skin= "material") {
            /*material*/
            font-size: 14px;
        }

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

    .e-uploadbox .e-icon.e-checkmark:before, .e-uploadbox .e-icon.e-file-percentage-failed:before {
        position: relative;

        & when (@skin= "material") {
            /*material*/
            top: 3px;
            left: -2px;
            font-size: 12px;
        }

        & when not (@skin= "material") {
            /*material*/
            top: 4px;
            left: -3px;
        }
    }

    .e-mobile-upload.e-uploadbox .e-file-upload {
        height: 50px;
        padding: 0px;
    }

    .e-mobile-upload.e-uploadbox .e-ul > li, .e-mobile-upload.e-uploadbox .e-ul li .e-file-list, .e-mobile-upload.e-uploadbox .e-ul li:nth-child(odd) > .e-file-list {
        height: 100%;
        border-bottom: none;
        top: 3px;
    }

    .e-mobile-upload.e-uploadbox .e-ul li .e-file-list {
        padding-bottom: 5px;
    }

    .e-mobile-upload.e-uploadbox .e-ul {
        border-bottom: 1px solid #c4c4c4;
    }

    .e-mobile-upload.e-rtl.e-uploadbox.e-dialog .e-file-list > div {
        float: right;
        height: 20px;
    }

    .e-rtl.e-mobile-upload.e-uploadbox.e-dialog .e-file-list .e-action-perform {
        float: left;
        margin-left: 5px;
    }

    .e-mobile-upload.e-rtl.e-uploadbox.e-dialog .e-file-size > .e-file-name-txt {
        text-align: right;
        left: 0px;
    }

    .e-mobile-upload.e-uploadbox.e-rtl.e-dialog .e-file-percentage {
        margin-right: 15px;
    }
}

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

    .e-treeview-wrap {
        white-space: nowrap;
        outline: 0 none;
        border-image: initial;
    }

    .e-treeview-wrap > .e-ul {
        overflow: auto;
        height: inherit;
    }

    .e-treeview .e-treeview-ul {
        background: 0;
        list-style-type: none;
        position: relative;
        outline: 0 none;

        & when (@skin= "material") {
            margin-left: -24px;
        }

        & when (@skin= "office-365") {
            margin-left: 0px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-left: -12px;
        }
    }

    .e-fullrow-wrap.e-treeview-wrap {
        position: relative;
    }

    .e-fullrow-wrap .e-ul {
        position: relative;
    }

    .e-fullrow-wrap .e-treeview-ul {
        position: inherit;
    }

    .e-treeview .e-item {
        margin: 0;

        & when (@skin= "material") {
            padding: 2px 0px 2px 24px;
        }

        & when (@skin= "office-365") {
            padding: 2px 0px 2px 20px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            padding: 0px 0px 2px 16px;
        }

        white-space: nowrap;
        outline: 0 none;
    }

    .e-treeview .e-text {
        border: @border-size @border-type transparent;
        padding: @treeview-text-padding;
        text-decoration: none;
        min-height: 15px;
        min-width: 10px;
        border-image: initial;

        & when (@skin= "material") {
            margin-left: 8px;
            font-size: 13px;
            line-height: 21px;
        }

        & when (@skin= "office-365") {
            margin-left: 8px;
            font-size: 14px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-left: 2px;
            font-size: 14px;
        }
    }

    .e-fullrow-wrap .e-text {
        vertical-align: top;
    }

    .e-fullrow-wrap .e-fullrow {
        width: 100%;
        position: absolute;
        left: 0;
        -webkit-user-select: none;
        margin-top: -@treeview-fullrow-height;
        height: @treeview-fullrow-height;
        box-sizing: border-box;
        overflow: hidden;
    }

    .e-fullrow-wrap .e-text-wrap {
        position: relative;
        z-index: 1;
        cursor: pointer;
    }

    .e-treeview .e-text.e-editable {
        background: none;
        border: none;
        padding: 0;
    }

    .e-treeview .e-text.e-editable .e-tree-input {
        box-sizing: border-box;
        padding: @treeview-edit-text-padding;

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

        margin: 0;
    }

    .e-treeview-wrap.e-rtl .e-text.e-editable .e-tree-input {
        padding: @treeview-rtl-edit-text-padding;
    }

    .e-dragedNode {
        z-index: 10002;
        line-height: 1.42857143;
        margin-left: 20px;
        display: table;

        & when (@skin= "material") {
            font-size: 13px;
            padding: 4px 8px 5px 8px;
            font-weight: 500;
        }

        & when (@skin= "office-365") {
            padding: 4px 8px 5px 0px;
            font-size: 14px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            font-size: 14px;
            padding: 0 10px 0 0;
        }
    }

    .e-rtl.e-dragedNode {
        & when (@skin= "office-365") {
            padding: 4px 0px 5px 8px;
        }

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

    .e-icon.e-dropedStatus:before {
        float: left;

        & when (@skin= "office-365") {
            margin: 4px 8px;
        }

        & when not (@skin="office-365") {
            margin: 4px 5px;
        }
    }

    .e-dragedNode .e-icon.e-minus:before, .e-dragedNode.e-rtl .e-icon.e-minus:before {
        content: "\e833";
    }

    .e-dragedNode .e-icon.e-plus:before, .e-dragedNode.e-rtl .e-icon.e-plus:before {
        content: "\e834";
    }

    .e-dragedNode .e-insertInbetween:before {
        content: "\e835";
    }

    .e-dragedNode .e-insertInbetween-rtl:before {
        content: "\e836";
    }

    .e-rtl .e-icon.e-dropedStatus:before {
        float: right;
    }

    .e-dragedNode .e-text {
        text-decoration: none;
        display: table-cell;
        white-space: nowrap;
        margin: 0 0 1px;
    }

    .e-treeview-wrap .e-sibling {
        & when (@skin= "material") {
            width: 6px;
            height: 6px;
            border-radius: 10px;
        }

        & when (@skin= "office-365") {
            width: 0;
            height: 0;
            border-top: 3px solid transparent;
            border-left: 4px solid;
            border-bottom: 3px solid transparent;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            width: 80px;
            height: 5px;
        }

        position: absolute;
        margin-top: -2px;
        z-index: 2;
    }

    .e-treeview-wrap.e-rtl .e-sibling {
        & when (@skin= "office-365") {
            border-left: none;
            border-right: 4px solid;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            background: url('@{font-path}/treeview/drop-sibling-rtl.png');
        }
    }

    .e-treeview-wrap .e-sibling::before {
        & when (@skin= "material") {
            content: '';
            position: absolute;
            top: 3px;
            left: 6px;
            width: 94px;
            height: 1px;
            z-index: 2;
        }

        & when (@skin= "office-365") {
            content: '';
            position: absolute;
            top: 0px;
            left: 3px;
            width: 94px;
            height: 1px;
            z-index: 2;
        }
    }

    .e-treeview-wrap.e-rtl .e-sibling::before {
        & when (@skin= "material") {
            right: 6px;
        }

        & when (@skin= "office-365") {
            right: 3px;
        }
    }

    .e-icon.e-dropedStatus {
        width: 14px;
        height: 14px;
        display: table-cell;

        & when (@skin= "material") {
            padding-right: 5px;
        }
    }

    .e-rtl .e-icon.e-dropedStatus {
        & when (@skin= "material") {
            padding-right: 0px;
            padding-left: 5px;
        }
    }

    .e-drop-count {
        position: absolute;
        top: -10px;
        border: 1px solid;
        min-width: 12px;
        padding: 2px 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 15px;

        & when (@skin= "material") {
            margin-left: -3px;
            font-weight: 500;
        }

        & when (@skin= "office-365") {
            margin-left: -3px;
            font-weight: 500;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-left: 2px;
            font-weight: 600;
        }
    }

    .e-rtl .e-drop-count {
        & when (@skin= "office-365") {
            left: -10px;
        }

        & when not (@skin="office-365") {
            left: -18px;
        }
    }

    .e-treeview ul {
        padding: @treeview-ul-padding;
        width: auto;
        list-style-type: none;
        outline: 0 none;
    }

    .e-treeview-wrap > ul {
        & when (@skin= "material") {
            padding: 0px 0px 0px 24px;
        }

        & when (@skin= "office-365") {
            padding: 0px 0px 0px 15px;
        }
    }

    .e-treeview.e-rtl ul {
        & when not (@skin="office-365") {
            padding-right: 10px;
            padding-left: 0;
        }
    }

    .e-treeview-wrap.e-rtl > ul {
        & when (@skin= "office-365") {
            padding: 0px 15px 0px 0px;
        }
    }

    .e-treeview ul:first-child, .e-treeview {
        min-height: 15px;
    }

    .e-treeview .e-plus,
    .e-treeview .e-minus, .e-treeview .e-icon.e-load {
        background-repeat: no-repeat;
        border: 0 none transparent;
        float: left;
        cursor: pointer;

        & when (@skin= "material") {
            width: 24px;
            margin-left: -24px;
            height: 24px;
            position: relative;
            margin-top: @treeview-icon-margin;
            padding-top: 0px;
        }

        & when (@skin= "office-365") {
            width: 20px;
            height: 20px;
            margin-top: @treeview-icon-margin;
            margin-left: -20px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            width: 16px;
            margin-left: -16px;
            padding-top: @treeview-icon-margin;
        }
    }

    .e-treeview-wrap .e-plus:before, .e-treeview-wrap .e-minus:before, .e-treeview-wrap .e-load:before {
        & when (@skin= "material") {
            margin: 5px auto;
        }

        & when (@skin= "office-365") {
            margin: 4px auto;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-right: 0;
        }
    }

    .e-treeview-wrap.e-rtl .e-plus:before, .e-treeview-wrap.e-rtl .e-minus:before, .e-treeview-wrap.e-rtl .e-load:before {
        & when (@skin= "office-365") {
            margin: 4px auto;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-right: 6px;
        }
    }

    .e-treeview-wrap .e-icon.e-load {
        & when (@skin= "material") {
            background-size: 14px;
        }

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

    .e-treeview .e-item img.e-align {
        vertical-align: middle;
        margin-left: 5px;
    }

    .e-treeview-wrap .e-item div > a > span, .e-treeview-wrap .e-item div > a > img,
    .e-dragedNode .e-text > span, .e-dragedNode .e-text > img {
        & when (@skin= "material") {
            margin-right: 5px;
        }

        & when (@skin= "office-365") {
            margin-right: 8px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-right: 3px;
        }
    }

    .e-treeview-wrap .e-item div > .e-chkbox-wrap {
        & when (@skin= "material") {
            margin-left: 8px;
            margin-right: 0;
        }

        & when (@skin= "office-365") {
            margin-left: 16px;
            margin-right: 0;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-left: 3px;
            margin-right: 4px;
        }

        float: left;
        margin-top: @treeview-chk-margin-top;
    }

    .e-treeview-wrap.e-rtl .e-item div > span + span {
        margin-right: 6px;
        margin-left: 4px;
    }

    .e-treeview-wrap.e-rtl .e-item {
        padding: @treeview-rtl-item-padding;
    }

    .e-treeview-wrap.e-rtl .e-treeview {
        & when (@skin= "material") {
            padding: 0px 24px 0 0;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            padding: 3px 14px 3px 0;
        }
    }

    .e-treeview-wrap.e-rtl .e-treeview-ul {
        & when (@skin= "material") {
            margin-left: 0px;
            padding: @treeview-rtl-ul-padding;
            margin-right: -24px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-left: 0px;
            padding: @treeview-rtl-ul-padding;
            margin-right: -12px;
        }
    }

    .e-treeview-wrap.e-rtl .e-treeview.e-treeview-ul {
        & when not (@skin="office-365") {
            padding: 0;
            margin: 0;
        }
    }

    .e-treeview-wrap.e-rtl .e-item .e-icon {
        float: right;
    }

    .e-treeview-wrap.e-rtl .e-plus, .e-treeview-wrap.e-rtl .e-minus, .e-treeview-wrap.e-rtl .e-icon.e-load {
        & when (@skin= "material") {
            margin-right: -24px;
        }

        & when (@skin= "office-365") {
            margin-right: -20px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-right: -16px;
        }
    }

    .e-treeview-wrap.e-rtl .e-item img.e-align {
        vertical-align: middle;
        margin-right: 5px;
    }

    .e-treeview-wrap.e-rtl .e-text {
        & when (@skin= "material") {
            margin-right: 8px;
        }

        & when (@skin= "office-365") {
            margin-right: 8px;
            margin-left: 0;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-right: 2px;
        }
    }

    .e-treeview-wrap.e-rtl .e-item div > .e-chkbox-wrap {
        & when (@skin= "material") {
            margin-left: 0;
            margin-right: 8px;
        }

        & when (@skin= "office-365") {
            margin-left: 0;
            margin-right: 16px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-left: 3px;
            margin-right: 4px;
        }

        float: right;
    }

    .e-treeview-wrap.e-rtl .e-chkbox-wrap div > span {
        text-align: right;
    }

    .e-treeview-wrap .e-chkbox-wrap .e-chkbox-small > span {
        & when (@skin= "material") {
            top: 0px;
        }
    }

    .e-treeview-wrap.e-rtl .e-item div > a > span, .e-treeview-wrap.e-rtl .e-item div > a > img,
    .e-dragedNode.e-rtl .e-text > span, .e-dragedNode.e-rtl .e-text > img {
        margin-right: 0px;

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

        & when (@skin= "office-365") {
            margin-left: 8px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-left: 3px;
        }
    }

    .e-treeview .e-treeview-ul {
        margin-bottom: @treeview-ul-margin-bottom;
    }

    .e-treeview .e-text, .e-autocomplete.e-disable {
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .e-treeview .e-fe-popup span {
        display: inline-block;
        height: 16px;
        cursor: pointer;
        padding: 4px;
        border: 1px solid transparent;
        width: 16px;
    }

    .e-treeview .e-fe-popup .e-tail:before, .e-treeview .e-fe-popup .e-tail:after {
        border: 10px solid transparent;
        content: "";
        height: 0;
        left: 8px;
        position: absolute;
        width: 0;
    }

    .e-treeview .e-fe-popup {
        position: absolute;
        font-weight: normal;
        z-index: 99999;
    }

    .e-treeview .e-fe-popup .e-content {
        border-radius: 4px;
        font-size: 14px;
        padding: 4px 4px;
    }

    .e-treeview .e-fe-popup .e-content {
        border-width: 1px;
        border-style: solid;
    }

    .e-treeview .e-fe-popup .e-downtail:after {
        top: 34px;
    }

    .e-fullrow-wrap .e-treeview-ul {
        margin-bottom: -2px;
    }

    .e-fullrow-wrap .e-li-active .e-active, .e-fullrow-wrap .e-li-hover .e-node-hover, .e-fullrow-wrap .e-li-hover .e-node-focus, .e-fullrow-wrap .e-li-focus .e-node-focus {
        border: 0px;

        & when (@skin= "material") {
            margin: 1px 1px 1px 9px;
        }

        & when (@skin= "office-365") {
            margin: 1px 1px 1px 9px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin: 1px 1px 1px 3px;
        }
    }

    .e-fullrow-wrap.e-rtl .e-li-active .e-active, .e-fullrow-wrap.e-rtl .e-li-hover .e-node-hover, .e-fullrow-wrap.e-rtl .e-li-hover .e-node-focus, .e-fullrow-wrap.e-rtl .e-li-focus .e-node-focus {
        & when (@skin= "material") {
            margin: 1px 9px 1px 1px;
        }

        & when (@skin= "office-365") {
            margin: 1px 9px 1px 1px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin: 1px 3px 1px 1px;
        }
    }

    .e-treeview-wrap.e-dragging .e-text, .e-fullrow-wrap.e-dragging .e-text-wrap, .e-treeview-wrap.e-dragging .e-chkbox-wrap div > span {
        cursor: default;
    }

    .e-treeview-wrap:not(.e-fullrow-wrap) .e-text {
        & when (@skin= "material") {
            display: inline-flex;
        }
    }

    .e-treeview-wrap .e-icon.e-plus, .e-treeview-wrap .e-icon.e-minus {
        & when (@skin= "material") {
            -webkit-transition: -webkit-transform 0.3s ease-in-out;
            transition: -webkit-transform 0.3s ease-in-out;
            transition: transform 0.3s ease-in-out;
            transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
        }

        & when (@skin= "office-365") {
            -webkit-transition: -webkit-transform .1s linear;
            transition: -webkit-transform .1s linear;
            transition: transform .1s linear;
            transition: transform .1s linear,-webkit-transform .1s linear;
        }
    }

    .e-treeview-wrap:not(.e-rtl) .e-icon.e-plus {
        & when (@skin= "material") {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        & when (@skin= "office-365") {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

    .e-treeview-wrap.e-rtl .e-icon.e-plus {
        & when (@skin= "material") {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        & when (@skin= "office-365") {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

    .e-treeview-wrap:not(.e-rtl) .e-icon.e-minus {
        & when (@skin= "material") {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        & when (@skin= "office-365") {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }
    }

    .e-treeview-wrap.e-rtl .e-icon.e-minus {
        & when (@skin= "material") {
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }

        & when (@skin= "office-365") {
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }
    }

    .e-treeview .e-draggable {
        touch-action: none;
    }
}

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

    .e-waitpopup-pane {
        opacity: 0.85;
        filter: alpha(opacity=85);
        position: absolute;
    }

    .e-waitpopup-pane .e-image {
        & when (@skin= "material") {
            /*material*/
            height: 52px;
            width: 52px;
            border-radius: 50%;
            box-shadow: 0 0px 3px rgba(0,0,0,.26);
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                /*office-365*/
                height: 55px;
                width: 55px;
                border-radius: 50%;
            }

            & when not (@skin= "office-365") {
                /*other*/
                height: 70px;
                width: 70px;
                border-radius: 15px 15px 15px 15px;
            }
        }

        background-position: center center;
        background-repeat: no-repeat;
        display: block;
        margin: 0 auto;
        position: relative;
    }

    .e-waitpopup-pane .e-text {
        font-size: @header-font-size;
        margin: 0;
        position: relative;
        text-align: center;
    }
}

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

    .e-tagcloud {
        & when (@skin= "material") {
            box-shadow: @box-shadow;
        }

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

        width: 350px;
        display: block;
    }

    .e-tagcloud .e-title {
        & when (@skin= "material") {
            box-shadow: none;
            border-width: 0px;
            padding: 16px 6px 10px 16px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                box-shadow: none;
                border: 1px solid;
                padding: 8px 15px 8px 15px;
            }

            & when not (@skin= "office-365") {
                box-shadow: @box-shadow;
                border: 1px solid;
                padding: 10px 6px 10px 11px;
            }
        }

        font-size: @header-font-size;
        font-weight: 600;
        vertical-align: middle;
    }

    .e-tagcloud ul.e-notitle {
        border-top-width: 1px;
    }

    .e-tagcloud .e-title-img {
        margin-right: 7px;
        vertical-align: middle;
    }

    .e-tagcloud .e-ul {
        & when (@skin= "material") {
            font-size: @font-size;
            padding: 12px 12px 12px 16px;
            font-family: @font-family;
            border: 0px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                padding: 15px;
            }

            & when not (@skin= "office-365") {
                padding: 6px;
            }

            font-size: @font-size;
            border: 1px solid;
        }

        font-weight: 400;
        list-style-position: outside;
        width: 100%;
        overflow: hidden;
        display: block;
        border-top-width: 0;
    }

    .e-tagcloud .e-list .e-tagitems, .e-tagcloud .e-cloud .e-tagitems {
        cursor: pointer;
        list-style-type: none;
        padding: 5px 3px;
    }

    .e-tagcloud .e-list .e-tagitems {
        display: block;
    }

    .e-tagcloud .e-tagitems .e-txt {
        outline: 0 none;
        text-decoration: none;
        line-height: 20px;
        padding: 0px 2px;
    }

    .e-tagcloud .e-load {
        min-height: 30px;
        width: 100%;
    }
}

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

    .e-toolbar {
        margin-top: 0;
        outline: 0 none;

        & when (@skin= "material") {
            border: 0px solid;
        }

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



    .e-toolbar.e-toolbarspan {
        width: 100%;

        & when (@skin= "material") {
            box-shadow: none;
            padding-left: 24px;
            padding-right: 24px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                height: auto;
                box-shadow: none;
                padding-left: 10px;
                padding-right: 10px;
            }

            & when not (@skin= "office-365") {
                height: auto;
                box-shadow: @box-shadow;
            }
        }
    }

    .e-toolbar.e-toolbarspan.e-inline {
        border-radius: 0px;
        padding-left: 0px;
        padding-right: 0px;

        & when(@skin= "office-365") {
            border: 0px;
        }
    }

    .e-toolbar > ul > li {
        position: relative;
        cursor: default;
        list-style-type: none;

        & when (@skin= "material") {
            border: 0px @border-type transparent;
            padding: 11px;
        }

        & when not (@skin= "material") {
            & when (@skin= "office-365") {
                border: 0px @border-type transparent;
                padding: 12px;
            }

            & when not (@skin= "office-365") {
                border: @border-size @border-type transparent;
                padding: @toolbar-padding;
            }
        }
    }

    .e-toolbar > ul > li div.e-item-overlay {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        opacity: 0.10;
        filter: alpha(opacity=10);
    }

    .e-toolbar.e-js ul > li.e-tooltxt {
        & when (@skin= "material") {
            /*material*/
            margin-right: 10px;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                margin-right: 2px;
            }

            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
        }
    }

    .e-toolbar.e-js ul.e-ul.e-vertical > li.e-tooltxt {
        & when (@skin= "office-365") {
            margin-right: 0px;
            margin-bottom: 2px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }

    .e-toolbar.e-js ul > li.e-tooltxt:last-child {
        & when (@skin= "material") {
            margin-right: 0px;
        }
    }

    .e-toolbar, .e-toolbar > .e-vertical, .e-toolbar > .e-horizontal, .e-toolbar div:first-child {
        overflow: hidden;
    }

    .e-toolbar > .e-horizontal.e-ul > li, .e-toolbar > .e-horizontal .e-spriteimg, .e-toolbar.e-rtl > .e-res-pos {
        float: left;
    }

    .e-toolbar > .e-horizontal.e-ul {
        & when (@skin= "material") {
            /*material*/
            vertical-align: middle;
            float: left;
            height: inherit;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        & when not (@skin= "material") {
            /*other*/
            vertical-align: middle;
            float: left;
            height: auto;
        }
    }

    .e-toolbar.e-rtl > .e-horizontal.e-comnrtl, .e-toolbar.e-rtl > .e-horizontal .e-comnrtl, .e-toolbar > .e-res-pos {
        float: right;
    }

    .e-toolbar > .e-vertical .e-comnrtl {
        direction: rtl;
    }

    .e-toolbar > .e-horizontal .e-align, .e-toolbar > .e-horizontal .e-tooltxt, .e-toolbar > .e-vertical .e-align, .e-toolbar > .e-vertical > .e-tooltxt {
        vertical-align: middle;
        outline: none;
    }

    .e-toolbar > .e-horizontal .e-disable, .e-toolbar > .e-vertical .e-disable {
        background-color: transparent;

        & when (@skin= "material") {
            /*material*/
            border: 0px @border-type transparent;
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                border: 0px @border-type transparent;
            }

            & when not (@skin= "office-365") {
                border: @border-size @border-type transparent;
            }
        }
    }

    .e-toolbar ul:last-child > li:last-child, .e-toolbar.e-rtl ul:first-child > li:last-child {
        margin-right: 0;
    }

    .e-toolbar > ul > li {
        & when (@skin= "office-365") {
            margin-right: 2px;
        }

        & when not (@skin= "office-365") {
            margin-right: @toolbar-margin-right;
        }
    }

    .e-toolbar .e-icon.e-res-pos.e-arrow-sans-down {
        height: 23px;
        line-height: normal;
        font-size: 17px;
        cursor: pointer;
        margin-top: 5px;

        &when (@skin= "office-365") {
            margin-top: 15px;
        }

        & when (@skin= "material") {
            /*material*/
            padding-top: 15px;
            -webkit-transform: rotate(0deg);
            -webkit-transition: -webkit-transform 300ms ease;
        }
    }

    .e-toolbar .e-icon.e-res-pos.e-arrow-sans-down:before {
        & when (@skin= "material") {
            /*material*/
            content: "\e673";
        }
    }

    .e-toolbar .e-icon.e-res-pos.e-arrow-sans-down.e-active {
        & when (@skin= "material") {
            -webkit-transform: rotate(180deg);
            margin-top: 15px;
        }
    }

    .e-toolbar .e-icon.e-res-pos.e-arrow-sans-down.e-active:before {
        & when not (@skin= "material") and not (@skin="office-365") {
            content: "\e667";
        }
    }

    .e-toolbar .e-icon.e-toolbar-res-arrow {
        & when (@skin= "material") {
            /*material*/
            height: 28px;
            width: 28px;
            line-height: normal;
            padding-top: 12px;
        }

        & when not (@skin= "material") {
            /*other*/
            height: 28px;
            width: 28px;
            line-height: normal;
        }
    }

    .e-toolbar .e-icon.e-toolbar-res-arrow:before {
        content: "\e76b";
        font-size: 21px;
        cursor: pointer;

        & when (@skin= "office-365") {
            margin-top: 9px;
        }

        & when not (@skin= "office-365") {
            margin-top: @toolbar-res-margin-top;
        }
    }

    .e-toolbar .e-display-none, .e-toolbar.e-display-none {
        display: none;
    }

    .e-toolbar .e-display-block, .e-toolbar.e-display-block {
        display: block;
    }

     .e-abs-position {
        position: absolute;
    }

     .e-rel-position {
        position: relative;

        & when (@skin= "material") {
            /*material*/
            right: 0px;
        }

        & when not (@skin= "material") {
            /*other*/
            right: 8px;
        }
    }

    .e-rtl .e-rel-position {
        right: auto;

        & when (@skin= "material") {
            /*material*/
            left: 0px;
        }

        & when not (@skin= "material") {
            /*other*/
            left: 8px;
        }
    }

    .e-toolbar.e-responsive-toolbar {
        & when (@skin= "material") {
            /*material*/
            width: 480px;
            height: auto;
        }

        & when not (@skin= "material") {
            /*other*/
            width: 200px;
        }
    }
}

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

    .e-rating {
        display: inline-block;
        list-style-type: none;
        position: relative;
    }

    .e-rating.e-vertical .e-ul {
        -webkit-margin-before: 0.2em;
    }

    .e-rating.e-horizontal .e-ul, .e-rating.e-vertical .e-ul {
        padding: 0 2px;
        list-style-type: none;
        margin: 0px;
    }

    .e-rating.e-horizontal .e-shape-list, .e-rating.e-horizontal .e-shape, .e-rating.e-horizontal .e-reset {
        float: left;
    }

    .e-rating.e-horizontal .e-shape-list,
    .e-rating.e-vertical .e-shape-list,
    .e-rating.e-horizontal .e-shape,
    .e-rating.e-vertical .e-shape,
    .e-rating.e-horizontal .e-reset,
    .e-rating.e-vertical .e-reset {
        cursor: pointer;
    }

    .e-rating,
    .e-rating .e-shape-list {
        outline: 0 none;
    }
}

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

    .e-progressbar {
        & when (@skin= "material") {
            /*material*/
            border: 0px solid;
            border-radius: 0px !important;
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                border: 0px solid;
                border-radius: 0px;
            }

            & when not (@skin= "office-365") {
                border: 1px solid;
                border-radius: @border-radius;
            }
        }

        display: block;
        height: @progressbar-height;
        position: relative;
        width: 100%;
    }

    .e-progressbar .e-progress {
        border: none;
        height: 100%;
        width: 0;
    }

    .e-progressbar.e-rtl .e-progress-txt {
        & when (@skin= "material") {
            /*material*/
            position: absolute;
            text-align: left;
            width: 100%;
            font-family: @font-family;
            top: 10px !important;
            font-size: 13px;
            color: fade(#000000,87%);
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                text-align: left;
                top: 0px !important;
                margin-top: 10px;
            }

            & when not (@skin= "office-365") {
                position: absolute;
                text-align: center;
                width: 100%;
            }
        }
    }

    .e-progressbar .e-progress-txt {
        & when (@skin= "material") {
            /*material*/
            position: absolute;
            text-align: right;
            width: 100%;
            font-family: @font-family;
            top: 10px !important;
            font-size: 13px;
            color: fade(#000000,87%);
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                text-align: right;
                top: 0px !important;
                margin-top: 10px;
            }

            & when not (@skin= "office-365") {
                position: absolute;
                text-align: center;
                width: 100%;
            }
        }
    }
}

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

  .e-slider {
        display: block;
        outline: 0 none;
        position: relative;
        height: 100%;
        width: 100%;
        z-index: 10;

        & when (@skin= "material"), (@skin= "office-365") {
            border: 0 none;
        }

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

    .e-slider-wrap.e-horizontal {
        height: @slider-size;
    }

    .e-slider-wrap.e-vertical {
        height: 100%;
        width: @slider-size;
    }

    .e-slider.e-corner, .e-slider.e-corner .e-handle, .e-slider.e-corner .e-range {
        border-radius: @slider-border-radius;
    }

    .e-slider.e-js, .e-slider.e-js .e-range {
        & when (@skin= "material"), (@skin= "office-365") {
            border-radius: @slider-border-radius;
        }
    }

    .e-slider, .e-slider .e-handle, .e-slider .e-range {
        border-radius: @slider-bs-border-radius;
    }

     .e-scale-wrap .e-slider.e-js {
        & when (@skin= "office-365") {
            border-radius: 5px;
        }
    }

    .e-slider-wrap .e-handle {
        & when (@skin= "material") {
            -ms-transform: scale(1);
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: -webkit-transform .4s cubic-bezier(.25,.8,.25,1);
            transition: transform .4s cubic-bezier(.25,.8,.25,1);
            box-sizing: border-box;
        }
    }

    .e-slider-wrap.e-horizontal .e-handle {
        top: -3px;
    }

    .e-slider-wrap.e-horizontal .e-handle.e-default {
        & when (@skin= "material") {
            top: -6px;
        }

        & when (@skin= "office-365") {
            top: -6px;
        }
    }


   .e-slider .e-handle.e-hover {
        & when (@skin= "material") {
            -webkit-transform: scale(1.333);
            transform: scale(1.333);
        }
    }

    .e-slider .e-handle.e-focus {
        & when (@skin= "material") {
            -webkit-transform: scale(1.667);
            transform: scale(1.667);
        }
    }

    .e-slider-wrap.e-disable .e-handle.e-select {
        & when (@skin= "material") {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    .e-slider .e-handle.e-select.e-focus:not(.e-no-tab) {
        & when (@skin= "material") {
            -ms-transform: none;
            -webkit-transform: initial;
            transform: none;
            -webkit-animation: sliderFocusHandle .7s cubic-bezier(.35,0,.25,1);
            animation: sliderFocusHandle .7s cubic-bezier(.35,0,.25,1);
        }
    }

    .e-slider .e-handle {
        touch-action: none;
    }

    @-webkit-keyframes sliderFocusHandle {
        0% {
            -webkit-transform: scale(.714);
        }

        50% {
            -webkit-transform: scale(1.05);
        }

        100% {
            -webkit-transform: scale(1);
        }
    }

    @keyframes sliderFocusHandle {
        0% {
            -ms-transform: scale(.714);
            transform: scale(.714);
        }

        50% {
            -ms-transform: scale(1.05);
            transform: scale(1.05);
        }

        100% {
            -ms-transform: scale(1);
            transform: scale(1);
        }
    }

    .e-slider-wrap.e-disable .e-handle.e-select.e-handle-start {
        & when (@skin= "material") {
            -webkit-transform: scale(1);
            transform: scale(1);
            top: -3px;
            height: 8px;
            width: 8px;
            transform: scale(1);
            cursor: default;
        }
    }

    .e-slider-wrap.e-disable .e-handle.e-select.e-handle-start:after {
        & when (@skin= "material") {
            position: absolute;
            height: 8px;
            width: 8px;
            content: "";
            border: 2px solid;
            box-sizing: content-box;
            background-color: transparent;
            top: -4px !important;
            left: -4px !important;
        }
    }

    .e-slider .e-handle.e-select.e-focus.e-handle-start:not(.e-no-tab):after {
        & when (@skin= "material") {
            opacity: 1;
        }
    }

    .e-slider .e-handle.e-select.e-focus:not(.e-no-tab):after {
        & when (@skin= "material") {
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            width: 100%;
            content: "";
            height: 100%;
            padding: 10px;
            position: absolute;
            top: -10px;
            left: -10px;
            border: 0px solid;
            border-radius: 26px;
            opacity: 0.26;
            filter: alpha(opacity=26);
            z-index: -1;
        }
    }

    .e-slider .e-handle.e-select.e-default.e-focus:not(.e-no-tab):after {
        & when (@skin= "material") {
            width: 30px;
            height: 30px;
            padding: 0px;
        }
    }

    .e-tooltipbox {
        & when (@skin= "material") {
            transition: top 150ms cubic-bezier(0.0, 0.0, 0.2, 1);
            margin-top: -3px;
            border-radius: 2px;
        }

        & when (@skin= "office-365") {
            margin-top: -1px;
            -webkit-animation: e-fadeIn 365ms cubic-bezier(.1,.9,.2,1);
            -moz-animation: e-fadeIn 365ms cubic-bezier(.1,.9,.2,1);
            -o-animation: e-fadeIn 365ms cubic-bezier(.1,.9,.2,1);
            -ms-animation: e-fadeIn 365ms cubic-bezier(.1,.9,.2,1);
            animation: e-fadeIn 365ms cubic-bezier(.1,.9,.2,1);
        }
    }

    .e-tooltipbox.e-vertical {
        & when (@skin= "material") {
            transition: left 150ms cubic-bezier(0.0, 0.0, 0.2, 1);
            margin-top: 0px;
            margin-left: 4px;
        }

        & when (@skin= "office-365") {
            margin-left: 1px;
            -webkit-animation: e-fadeIn 365ms cubic-bezier(.1,.9,.2,1);
            -moz-animation: e-fadeIn 365ms cubic-bezier(.1,.9,.2,1);
            -o-animation: e-fadeIn 365ms cubic-bezier(.1,.9,.2,1);
            -ms-animation: e-fadeIn 365ms cubic-bezier(.1,.9,.2,1);
            animation: e-fadeIn 365ms cubic-bezier(.1,.9,.2,1);
        }
    }

    .e-slider-wrap .e-scale .e-tick .e-tick-value {
        & when (@skin= "material") {
            font-family: @font-family;
        }
    }

    .e-slider-wrap .e-scale {
        & when (@skin= "material") {
            font-size: 10px;
            font-family: @font-family;
        }
    }

    .e-slider .e-handle.e-select.e-default.e-focus:not(.e-no-tab):after, .e-slider-wrap.e-disable .e-slider .e-handle.e-default:after {
        & when (@skin= "material") {
            top: -11px;
            left: -11px;
        }
    }

    .e-slider-wrap.e-vertical .e-handle {
        left: -3px;
    }

    .e-slider-wrap.e-vertical .e-handle.e-default {
        & when (@skin= "material") {
            left: -5px;
        }

        & when (@skin= "office-365") {
            left: -6px;
        }
    }

    .e-slider .e-handle {
        cursor: pointer;
        outline: 0 none;
        position: absolute;
        height: @slider-handle-size;
        width: @slider-handle-size;

        & when (@skin= "material"), (@skin= "office-365") {
            border: 2px solid;
        }

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

    .e-slider-wrap.e-horizontal .e-range {
        height: 100%;
        top: 0;
    }

    .e-slider-wrap.e-vertical .e-range {
        left: 0;
        width: 100%;
    }

    .e-slider .e-range {
        border: 0 none;
        display: block;
        position: absolute;
    }

     .e-scale {
        list-style: none outside none;
        outline: 0 none;
        position: relative;
        z-index: 1;
    }

     .e-scale.e-ie8 {
        & when (@skin= "material") {
            z-index: 10;
        }
    }

    .e-slider-wrap.e-small-size .e-scale.e-h-scale {
        width: 100%;

        & when (@skin= "material") {
            height: 100% !important;
            top: -10px !important;
        }
    }

     .e-scale.e-v-scale {
        height: 100%;
    }

    .e-slider-wrap.e-small-size .e-scale.e-v-scale {
        & when (@skin= "material") {
            width: 100% !important;
            right: 0px !important;
        }
    }

    .e-slider-wrap.e-small-size .e-v-scale .e-tick .e-tick-value {
        & when (@skin= "material") {
            margin-right: -12px;
        }
    }

     .e-scale.e-v-scale .e-tick {
        & when (@skin= "material") {
            width: 100% !important;
            right: 0px !important;
        }
    }

     .e-scale .e-tick {
        background-color: transparent;
        background-position: center center;
        cursor: default;
        position: relative;
        height: 100%;
    }

     .e-scale .e-tick .e-tick-value {
        font-size: 10px;
        position: absolute;
    }

     .e-h-scale .e-tick {
        background-repeat: repeat-y;
    }

     .e-v-scale .e-tick {
        background-repeat: repeat-x;
    }

     .e-h-scale .e-tick .e-tick-value {
        & when (@skin= "material") {
            top: -24px;
        }

        & when (@skin= "office-365") {
            top: -17px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            top: -15px;
        }
    }

     .e-scale.e-h-scale .e-tick {
        & when (@skin= "material") {
            height: 100% !important;
            top: 0px !important;
        }
    }

     .e-h-scale .e-tick.e-first-tick {
        background-position: left center;
    }

     .e-h-scale .e-tick.e-last-tick {
        background-position: right center;
    }

    .e-rtl .e-h-scale .e-tick.e-first-tick {
        background-position: right center;
    }

     .e-rtl .e-h-scale .e-tick.e-last-tick {
        background-position: left center;
    }

      .e-v-scale .e-tick.e-first-tick {
        background-position: center top;
    }

      .e-v-scale .e-tick.e-last-tick {
        background-position: center bottom;
    }

    @keyframes e-fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
}

.mixin(@widget) when (@widget = common), (@widget = none) {
    /*SVG*/
    @font-face {
        font-family: 'ej-webfont';
        src: url('@{font-icon-path}/ejicons.eot?-dzszjm');
        src: url('@{font-icon-path}/ejicons.eot?#iefix-dzszjm') format('embedded-opentype'), url('@{font-icon-path}/ejicons.woff?-dzszjm') format('woff'),url('@{font-icon-path}/ejicons.woff') format('woff'), url('@{font-icon-path}/ejicons.ttf?-dzszjm') format('truetype'), url('@{font-icon-path}/ejicons.svg?-dzszjm#ejicons') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    .e-icon,  .e-rte-toolbar-icon, .e-background-color, .e-font,  .e-rte-footericon, .e-resize-handle , .e-ddl-icon{
        font-family: 'ej-webfont';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        /* Better Font Rendering */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .e-icon {
        font-size: 14px;
    }

     .e-rte-toolbar-icon, .e-background-color, .e-font,  .e-rte-footericon,  .e-rte-footer .e-resize-handle {
        font-size: 16px;
    }

    .e-icon:before,  .e-rte-toolbar-icon:before, .e-background-color:before, .e-font:before,  .e-rte-footericon:before, .e-resize-handle:before {
        display: block;
        margin: 0 auto;
    }

     .e-rte-toolbar-icon:before, .e-background-color:before, .e-font:before,  .e-rte-footericon:before, .e-resize-handle:before {
        width: 16px;
        height: 16px;
    }

    .e-icon:before {
        width: 14px;
        height: 14px;
    }

    .e-grid .e-filterbarcell .e-icon:before {
        display: block;
        margin: 0 auto;
    }

    .e-icon {
        width: 16px;
        height: 16px;
    }
    /*
.e-icon.e-ui-light
{
background-image: url('../@{font-path}/icons-gray.png');
}
.e-icon.e-ui-dark
{
background-image: url('../@{font-path}/icons-white.png');
}

*/
    /* icon positions */
    .e-menu.e-horizontal > .e-list > a span.e-arrowhead-down:before, .e-menu.e-horizontal > .e-list > span span.e-arrowhead-down:before,
    .e-menu.e-horizontal > .e-list:hover > a span.e-arrowhead-down:before, .e-menu.e-horizontal > .e-list:hover > span span.e-arrowhead-down:before,
    /* RTL menu */
    .e-menu.rtl > .e-list > a span.arrows:before, .e-menu.rtl > .e-list > span span.arrows, .e-menu.rtl > .e-list:hover > a span.arrows, .e-menu.rtl > .e-list:hover > span span.arrows:before,
    .e-menu.rtl.e-context > .e-list > a span.arrows:before, .e-menu.rtl.e-context > .e-list > span span.arrows:before,
    .e-menu.rtl.e-vertical > .e-list > a span.arrows:before, .e-menu.rtl.e-vertical > .e-list > span span.arrows:before,
    .e-menu.rtl .e-list > ul > .e-list > a span.arrows:before, .e-menu.rtl .e-list > ul .e-list:hover > span span.arrows:before,
    .e-menu.rtl.e-context > .e-list:hover span.arrows:before, .e-menu.rtl.e-vertical > .e-list:hover span.arrows:before {
        & when (@skin= "office-365") {
            content: "\e804";
        }

        & when not (@skin= "office-365") {
            content: "\e627";
        }
    }

    .e-menu .e-list > ul > .e-list > a span.e-arrowhead-right:before, .e-menu .e-list > ul > .e-list > span span.e-arrowhead-right:before,
    .e-menu.e-context > .e-list > a span.e-arrowhead-right:before, .e-menu.e-context > .e-list > span span.e-arrowhead-right:before,
    .e-menu.e-vertical > .e-list > a span.e-arrowhead-right:before, .e-menu.e-vertical > .e-list > span span.e-arrowhead-right:before,
    .e-menu .e-list > ul .e-list:hover > a span.e-arrowhead-right:before, .e-menu .e-list > ul .e-list:hover > span span.e-arrowhead-right:before,
    .e-menu > .e-list:hover > a span.e-arrowhead-right:before, .e-menu > .e-list:hover > span span.e-arrowhead-right:before {
        & when (@skin= "office-365") {
            content: "\e62f";
        }

        & when not (@skin= "office-365") {
            content: "\e622";
        }
    }

    .e-menu.e-rtl .e-list > ul > .e-list > a span.e-arrowhead-right:before, .e-menu.e-rtl .e-list > ul > .e-list > span span.e-arrowhead-right:before,
    .e-menu.e-rtl.e-context > .e-list > a span.e-arrowhead-right:before, .e-menu.e-rtl.e-context > .e-list > span span.e-arrowhead-right:before,
    .e-menu.e-rtl.e-vertical > .e-list > a span.e-arrowhead-right:before, .e-menu.e-rtl.e-vertical > .e-list > span span.e-arrowhead-right:before,
    .e-menu.e-rtl .e-list > ul .e-list:hover > a span.e-arrowhead-right:before, .e-menu.e-rtl .e-list > ul .e-list:hover > span span.e-arrowhead-right:before {
        & when (@skin= "office-365") {
            content: "\e630";
        }

        & when not (@skin= "office-365") {
            content: "\e623";
        }
    }
    /*Map*/
    /* common icon position */
    .e-icon.e-boardpin:before, .e-icon.e-unpin:before {
        content: "\e684";
    }

    .e-icon.e-boardpin1:before, .e-icon.e-pin:before {
        content: "\e683";
    }

    .e-icon.e-upload:before {
        content: "\e678";
    }

    .e-icon.e-reload:before {
        content: "\e677";
    }

    .e-upload-file .e-file-list .e-icon.e-file-cancel:before {
        & when (@skin= "material") {
            /*material*/
            content: "\e605";
        }

        & when not (@skin= "material") {
            /*other*/
            content: "\e656";
        }
    }

    .e-icon.e-close:before {
        content: "\e605";
    }

    .e-icon.e-addnew:before, .e-icon.e-plus:before {
        content: "\e676";
    }

    .e-icon.e-minus:before, .e-icon.e-minimize:before {
        content: "\e675";
    }

    .e-icon.e-rarrowright-2x:before {
        content: "\e674";
    }

    .e-icon.e-rarrowup-2x:before {
        content: "\e672";
    }

    .e-icon.e-rarrowdown-2x:before {
        content: "\e673";
    }

    .e-icon.e-rarrowleft-2x:before {
        content: "\e671";
    }

    .e-icon.e-login:before {
        content: "\e670";
    }

    .e-icon.e-orientationlanscape:before {
        content: "\e66f";
    }

    .e-icon.e-searchfind:before, .e-icon.e-search:before {
        content: "\e66e";
    }

    .e-icon.e-alignleft:before {
        content: "\e682";
    }

    .e-icon.e-aligncenter:before {
        content: "\e66d";
    }

    .e-icon.e-alignright:before {
        content: "\e66b";
    }

    .e-icon.e-alignjustify:before {
        content: "\e66c";
    }

    .e-icon.e-alignnone:before {
        content: "\e66a";
    }

    .e-icon.e-filterset:before {
        content: "\e669";
    }

    .e-icon.e-filternone:before {
        content: "\e668";
    }
    /**/
    .e-icon.e-arrowheadup-2x:before {
        content: "\e667";
    }

    .e-icon.e-arrowheaddown-2x:before {
        content: "\e666";
    }

    .e-icon.e-arrowheadleft:before, .e-icon.e-arrowheadleft-2x:before, .e-icon.e-left-arrow:before, .e-rtl .e-icon.e-right-arrow:before, :not(.e-splitter).e-rtl .e-icon.e-arrow-sans-right:before {
        content: "\e665";
    }

    .e-icon.e-arrowheadright:before, .e-icon.e-arrowheadright-2x:before, .e-icon.e-right-arrow:before, .e-rtl .e-icon.e-left-arrow:before, :not(.e-splitter).e-rtl .e-icon.e-arrow-sans-left:before {
        content: "\e664";
    }

    .e-icon.e-numbering:before {
        content: "\e663";
    }

    .e-icon.e-bullets:before {
        content: "\e661";
    }

    .e-icon.e-maximize:before {
        content: "\e660";
    }

    .e-icon.e-delete:before {
        content: "\e681";
    }

    .e-icon.e-chevron-circle-right:before {
        content: "\e73f";
    }

    .e-icon.e-chevron-circle-left:before {
        content: "\e740";
    }

    .e-icon.e-mediaback:before {
        content: "\e65f";
    }

    .e-icon.e-mediaforward:before {
        content: "\e65e";
    }

    .e-icon.e-arrowheadright-2x:before {
        content: "\e664";
    }

    .e-icon.e-arrowheadleft-2x:before {
        content: "\e665";
    }

    .e-icon.e-medianext:before {
        content: "\e65d";
    }

    .e-icon.e-mediaprev:before {
        content: "\e65c";
    }

    .e-icon.e-mediaeject:before {
        content: "\e65a";
    }

    .e-icon.e-mediaclose:before {
        content: "\e65b";
    }

    .e-icon.e-mediapause:before {
        content: "\e659";
    }

    .e-icon.e-mediaplay:before {
        content: "\e658";
    }

    .e-icon.e-righttick:before, .e-icon.e-checkmark:before {
        content: "\e657";
    }

    .e-icon.e-cancel:before, .e-icon.e-file-cancel:before, .e-icon.e-file-percentage-failed:before {
        content: "\e656";
    }

    .e-icon.e-smile:before {
        content: "\e655";
    }

    .e-icon.e-information:before {
        content: "\e654";
    }
    /**/
    .e-icon.e-cut:before {
        content: "\e680";
    }

    .e-icon.e-edit:before {
        content: "\e653";
    }

    .e-icon.e-swapleft:before {
        content: "\e652";
    }

    .e-icon.e-swapright:before {
        content: "\e651";
    }

    .e-icon.e-swapup:before {
        content: "\e650";
    }

    .e-icon.e-swapdown:before {
        content: "\e64f";
    }

    .e-icon.e-zoomin:before {
        content: "\e64e";
    }

    .e-icon.e-zoomout:before {
        content: "\e64d";
    }

    .e-icon.e-warningmessage:before {
        content: "\e64c";
    }

    .e-icon.e-cursor:before {
        content: "\e64b";
    }

    .e-icon.e-shoppingcart:before {
        content: "\e64a";
    }

    .e-icon.e-handup:before {
        content: "\e648";
    }

    .e-icon.e-palette:before {
        content: "\e67f";
    }

    .e-icon.e-star:before {
        content: "\e647";
    }

    .e-icon.e-copy:before {
        content: "\e646";
    }

    .e-icon.e-paste:before {
        content: "\e645";
    }

    .e-icon.e-settings:before {
        content: "\e644";
    }

    .e-icon.e-clock:before {
        content: "\e643";
    }

    .e-icon.e-hyperlink:before {
        content: "\e642";
    }

    .e-icon.e-hyperlinkbreak:before {
        content: "\e641";
    }
    /**/
    .e-icon.e-resizers:before, .e-icon.e-resize-handle:before, .e-icon.e-resize-handle:before {
        content: "\e640";
    }

    .e-icon.e-home:before {
        content: "\e63f";
    }

    .e-icon.e-clipboard:before {
        content: "\e63e";
    }

    .e-icon.e-userlogin:before {
        content: "\e63d";
    }

    .e-icon.e-dataexport:before {
        content: "\e63c";
    }

    .e-icon.e-arrowheadright:before {
        content: "\e658";
    }

    .e-icon.e-arrowhead-down:before, .e-icon.e-down-arrow:before {
        content: "\e63b";
    }

    .e-icon.e-arrowheadup:before, .e-icon.e-up-arrow:before {
        content: "\e63a";
    }

    .e-icon.e-arrowheadleft:before {
        content: "\e639";
    }

    .e-icon.e-undo:before {
        content: "\e637";
    }

    .e-icon.e-redo:before {
        content: "\e638";
    }

    .e-icon.e-bold:before {
        content: "\e636";
    }

    .e-icon.e-italic:before {
        content: "\e635";
    }

    .e-icon.e-underline:before {
        content: "\e634";
    }

    .e-icon.e-strikethrough:before {
        content: "\e633";
    }

    .e-icon.e-font:before {
        content: "\e632";
    }

    .e-icon.e-rarrowdown:before {
        content: "\e631";
    }

    .e-icon.e-rarrowleft:before {
        content: "\e630";
    }

    .e-icon.e-rarrowup:before {
        content: "\e67d";
    }

    .e-icon.e-rarrowright:before {
        content: "\e62f";
    }
    /**/
    .e-icon.e-calender:before {
        content: "\e62e";
    }

    .e-icon.e-datetimecalendar:before,
    .e-icon.e-datetime:before {
        content: "\e62d";
    }

    .e-icon.e-collapse-arrow:before {
        content: "\e624";
    }

    .e-icon.e-expand-arrow:before {
        content: "\e622";
    }

    .e-icon.e-maximize:before {
        content: "\e61e";
    }

    .e-icon.e-restore:before {
        content: "\e61d";
    }

    .e-icon.e-reload:before {
        content: "\e677";
    }

    .e-icon.e-plus:before {
        content: "\e676";
    }

    .e-icon.e-minus:before {
        content: "\e675";
    }

    .e-rtl .e-icon.e-plus:before {
        content: "\e676";
    }

    .e-rtl .e-icon.e-minus:before {
        content: "\e675";
    }

    .e-icon.e-gridgroupbutton:before {
        content: "\e61c";
    }

    .e-icon.e-gnextmedia {
        background-position: -51px -84px;
    }

    .e-gnext {
        background-position: -336px -84px;
    }

    .e-gprevmedia {
        background-position: -103px -84px;
    }

    .e-gprev {
        background-position: -313px -84px;
    }

    .e-gadd {
        background-position: -103px 1px;
    }

    .e-gedit {
        background-position: -26px -41px;
    }

    .e-gdelete {
        background-position: -181px -20px;
    }

    .e-icon.e-save:before {
        content: "\e620";
    }

    .e-icon.e-insertInbetween:before {
        content: "\e70c";
    }

    .e-icon.e-insertInbetween-rtl:before {
        content: "\e70a";
    }

    .e-icon.e-gcancel {
        background-position: -440px -20px;
    }

    .e-icon.e-gsearch {
        background-position: -310px 4px;
    }

    .e-icon.e-gdiagonalnext:before {
        content: "\e67c";

        & when (@skin= "office-365") {
            content: "\e821";
        }
    }

    .e-icon.e-gnextforward:before {
        content: "\e67e";

        & when (@skin= "office-365") {
            content: "\e820";
        }
    }

    .e-icon.e-gupward {
        background-position: -204px 2px;
    }

    .e-icon.e-gdownward {
        background-position: -180px 2px;
    }

    .e-icon.e-gclose {
        background-position: -445px -22px;
    }

    .e-icon.e-guparrow:before {
        content: "\e625";

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

    .e-icon.e-gdownarrow:before {
        content: "\e627";

        & when (@skin= "office-365") {
            content: "\e820";
        }
    }

    .e-icon.e-gupdatenotify:before {
        content: "\e6ff";
        font-size: 10px;
    }
    /* Control Icon Properties */
    .e-datewidget .e-calendar.e-icon:before,
    .e-datetime-wrap .e-datetime.e-icon:before {
        & when (@skin= "office-365") {
            height: 20px;
            width: 20px;
        }

        & when not (@skin= "office-365") {
            height: 21px;
            width: 21px;
        }
    }

    .e-timewidget .e-arrow-sans-down.e-icon:before,
    .e-ddl .e-arrow-sans-down.e-icon:before {
        height: 12px;
        width: 12px;
    }

    .e-ddl .e-arrow-sans-down.e-icon:before {
        & when (@skin= "material") {
            width: 10px;
            height: 8px;
            margin: 0px 7px 0 7px;
        }
    }

    .e-numeric .e-icon:before,
    .e-percent .e-icon:before,
    .e-currency .e-icon:before {
        height: 8px;
        width: 10px;
    }

    .e-treeview-wrap .e-icon.e-plus:before {
        & when (@skin= "material") {
            content: "\e62f";
            font-size: 14px;
            width: 14px;
            height: 14px;
        }

        & when (@skin= "office-365") {
            content: "\e62f";
            font-size: 12px;
            width: 12px;
            height: 12px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            content: "\e664";
            font-size: 11px;
            width: 10px;
            height: 10px;
        }
    }

    .e-treeview-wrap.e-rtl .e-icon.e-load:before,
    .e-treeview-wrap .e-icon.e-load:before {
        content: "";
    }

    .e-treeview-wrap .e-icon.e-minus:before {
        & when (@skin= "material") {
            content: "\e631";
            font-size: 14px;
            width: 14px;
            height: 14px;
        }

        & when (@skin= "office-365") {
            content: "\e631";
            font-size: 12px;
            width: 12px;
            height: 12px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            content: "\e67c";
            font-size: 8px;
            height: 10px;
            width: 10px;
        }
    }

    .e-treeview-wrap.e-rtl .e-icon.e-plus:before {
        & when (@skin= "material") {
            content: "\e630";
        }

        & when (@skin= "office-365") {
            content: "\e630";
        }

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

    .e-treeview-wrap.e-rtl .e-icon.e-minus:before {
        & when (@skin= "material") {
            content: "\e631";
        }

        & when (@skin= "office-365") {
            content: "\e631";
        }

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

    .e-treeview-wrap:not(.e-ie8) .e-icon.e-minus:before {
        & when (@skin= "material") {
            content: "\e62f";
        }

        & when (@skin= "office-365") {
            content: "\e62f";
        }
    }

    .e-treeview-wrap.e-rtl:not(.e-ie8) .e-icon.e-minus:before {
        & when (@skin= "material") {
            content: "\e630";
        }

        & when (@skin= "office-365") {
            content: "\e630";
        }
    }

    .e-splitter .e-splitbar > .e-icon:before {
        height: 100%;
        width: 100%;
        font-size: 13px;

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

    .e-splitter .e-splitbar > .e-icon.v-backward:before, .e-splitter .e-splitbar > .e-icon.e-arrow-sans-left:before {
        font-size: 12px;
    }

    .e-splitter .h-backward:before {
        content: "\e665";
    }

    .e-splitter .h-forward:before {
        content: "\e664";
    }

    .e-splitter .v-backward:before {
        content: "\e667";
    }

    .e-splitter .v-forward:before {
        content: "\e666";
    }

    .e-rowselect:before {
        content: "\e701";
    }

    .e-sortdirect:before {
        content: "\e700";
    }

    .e-tab .e-icon.e-close:before,  .e-uploadbox.e-dialog .e-close:before {
        content: "\e605";
    }

    .e-tab .e-icon.e-chevron-circle-right:before {
        & when (@skin= "material") {
            /*material*/
            content: "\e62f";
        }

        & when not (@skin= "material") {
            /*other*/
            content: "\e73f";
        }
    }

    .e-tab .e-icon.e-chevron-circle-left:before {
        & when (@skin= "material") {
            /*material*/
            content: "\e630";
        }

        & when not (@skin= "material") {
            /*other*/
            content: "\e740";
        }
    }

    .e-dialog .e-icon.e-collapse-arrow:before {
        content: "\e625";
    }

    .e-dialog .e-icon.e-expand-arrow:before {
        content: "\e627";
    }

    .e-scrollbar .e-vup.e-icon:before {
        content: "\e672";
        left: 5px;
    }

    .e-scrollbar .e-vdown.e-icon:before {
        content: "\e673";
    }

    .e-scrollbar .e-hup.e-icon:before {
        content: "\e671";
    }

    .e-scrollbar .e-hdown.e-icon:before {
        content: "\e674";
    }
    /*-------------------------------------Icons----------------------------------------------------------*/
    .e-icon.e-shrink:before {
        content: "\e600";
    }

    .e-icon.e-full-screen-collapse:before {
        content: "\e787";
    }

    .e-icon.e-list:before {
        content: "\e601";
    }

    .e-icon.e-list-numbered_01:before {
        content: "\e7a6";
    }

    .e-icon.e-indent:before {
        content: "\e603";
    }

    .e-icon.e-indent_01:before {
        content: "\e614";
    }

    .e-icon.e-outdent:before {
        content: "\e604";
    }

    .e-icon.e-outdent_01:before {
        content: "\e613";
    }

    .e-icon.e-close_01:before {
        content: "\e74e";
    }

    .e-icon.e-redo:before {
        content: "\e606";
    }

    .e-icon.e-redo_01:before {
        content: "\e737";
    }

    .e-icon.e-undo:before {
        content: "\e607";
    }

    .e-icon.e-undo_01:before {
        content: "\e736";
    }

    .e-icon.e-video_01:before {
        content: "\e608";
    }

    .e-icon.e-cross-circle:before {
        content: "\e60a";
    }

    .e-icon.e-clean-brush:before {
        content: "\e60b";
    }

    .e-icon.e-delete-column:before {
        content: "\e60c";
    }

    .e-icon.e-delete-row:before {
        content: "\e60d";
    }

    .e-icon.e-insert-column-left:before {
        content: "\e60e";
    }

    .e-icon.e-insert-column-left_01:before {
        content: "\e788";
    }

    .e-icon.e-insert-column-right:before {
        content: "\e60f";
    }

    .e-icon.e-insert-column-right_01:before {
        content: "\e789";
    }

    .e-icon.e-insert-row-below:before {
        content: "\e610";
    }

    .e-icon.e-insert-row-below_01:before {
        content: "\e78b";
    }

    .e-icon.e-insert-row-above:before {
        content: "\e611";
    }

    .e-icon.e-insert-row-above_01:before {
        content: "\e78a";
    }

    .e-icon.e-table:before {
        content: "\e612";
    }

    .e-icon.e-sigma:before {
        content: "\e615";
    }

    .e-icon.e-sigma_01:before {
        content: "\e735";
    }

    .e-icon.e-uppercase:before {
        content: "\e616";
    }

    .e-icon.e-lowercase:before {
        content: "\e617";
    }

    .e-icon.e-background-color:before {
        content: "\e618";
    }

    .e-icon.e-superscript:before {
        content: "\e61a";
    }

    .e-icon.e-subscript:before {
        content: "\e61b";
    }

    .e-icon.e-download:before {
        content: "\e61f";
    }

    .e-icon.e-save_01:before {
        content: "\e6b7";
    }

    .e-icon.e-mail:before, .e-icon.e-message:before {
        content: "\e621";
    }

    .e-icon.e-arrowhead-right_01:before {
        content: "\e7d3";
    }

    .e-icon.e-arrowhead-left:before {
        content: "\e623";
    }

    .e-icon.e-arrowhead-left_01:before {
        content: "\e7d2";
    }

    .e-icon.e-datetime_01:before {
        content: "\e733";
    }

    .e-icon.e-calendar_01:before {
        content: "\e75e";
    }

    .e-icon.e-calendar-plus:before {
        content: "\e759";
    }

    .e-icon.e-calendar-edit:before {
        content: "\e77c";
    }

    .e-icon.e-chevron-right_02:before {
        content: "\e69b";
    }

    .e-icon.e-chevron-left_02:before {
        content: "\e68b";
    }

    .e-icon.e-bold_01:before {
        content: "\e79b";
    }

    .e-icon.e-link:before {
        content: "\e794";
    }

    .e-icon.e-external-link:before {
        content: "\e73e";
    }

    .e-icon.e-external-link_01:before {
        content: "\e744";
    }

    .e-icon.e-copy_01:before {
        content: "\e77f";
    }

    .e-icon.e-zoom-in_02:before {
        content: "\e738";
    }

    .e-icon.e-zoom-out_02:before {
        content: "\e739";
    }

    .e-icon.e-arrow-circle-left_03:before {
        content: "\e778";
    }

    .e-icon.e-edit_02:before {
        content: "\e705";
    }

    .e-icon.e-edit_03:before {
        content: "\e749";
    }

    .e-icon.e-edit_05:before {
        content: "\e783";
    }

    .e-icon.e-notification_01:before {
        content: "\e6c3";
    }

    .e-icon.e-media-forward_01:before {
        content: "\e62c";
    }

    .e-icon.e-play-circle:before {
        content: "\e685";
    }

    .e-icon.e-media-fast-forward:before {
        content: "\e7ce";
    }

    .e-icon.e-full-screen-expand:before {
        content: "\e786";
    }

    .e-icon.e-full-screen-expand_01:before {
        content: "\e793";
    }

    .e-icon.e-filter-settings:before {
        content: "\e753";
    }

    .e-icon.e-search_01:before {
        content: "\e729";
    }

    .e-icon.e-image_01:before {
        content: "\e7ba";
    }

    .e-icon.e-minus_01:before {
        content: "\e693";
    }

    .e-icon.e-plus_01:before {
        content: "\e691";
    }

    .e-icon.e-code_01:before {
        content: "\e780";
    }

    .e-icon.e-code-hexagon:before {
        content: "\e77e";
    }

    .e-icon.e-cut_01:before {
        content: "\e7a0";
    }

    .e-icon.e-delete_01:before {
        content: "\e69d";
    }

    .e-icon.e-delete_02:before {
        content: "\e6d8";
    }

    .e-icon.e-delete_04:before {
        content: "\e706";
    }

    .e-icon.e-stop:before {
        content: "\e694";
    }

    .e-icon.e-circle-square:before {
        content: "\e6a5";
    }

    .e-icon.e-vertical-barchart:before {
        content: "\e6a6";
    }

    .e-icon.e-fullborders:before {
        content: "\e6a7";
    }

    .e-icon.e-diagonal-square:before {
        content: "\e6a8";
    }

    .e-icon.e-3d:before {
        content: "\e6a9";
    }

    .e-icon.e-file-excel:before {
        content: "\e6aa";
    }

    .e-icon.e-file-text:before {
        content: "\e6ab";
    }

    .e-icon.e-file-text_01:before {
        content: "\e6b5";
    }

    .e-icon.e-file-mdx:before {
        content: "\e6ac";
    }

    .e-icon.e-file-empty:before {
        content: "\e6ad";
    }

    .e-icon.e-hexagon-square:before {
        content: "\e6ae";
    }

    .e-icon.e-globe:before {
        content: "\e6af";
    }

    .e-icon.e-globe_01:before {
        content: "\e734";
    }

    .e-icon.e-file-delete_01:before {
        content: "\e6b4";
    }

    .e-icon.e-pentagon-square:before {
        content: "\e6b6";
    }

    .e-icon.e-vertical-barchart_01:before {
        content: "\e6bd";
    }

    .e-icon.e-triangle:before {
        content: "\e6bf";
    }

    .e-icon.e-inverted-triangle:before {
        content: "\e6b0";
    }

    .e-icon.e-power-cord:before {
        content: "\e6c1";
    }

    .e-icon.e-comments:before {
        content: "\e6c2";
    }

    .e-icon.e-horizontal-barchart:before {
        content: "\e6c5";
    }

    .e-icon.e-horizontal-barchart_01:before {
        content: "\e6c6";
    }

    .e-icon.e-triangle:before {
        content: "\e6bf";
    }

    .e-icon.e-inverted-triangle:before {
        content: "\e6b0";
    }

    .e-icon.e-pyramid:before {
        content: "\e6c9";
    }

    .e-icon.e-inverted-pyramid:before {
        content: "\e6c8";
    }

    .e-icon.e-pie-chart:before {
        content: "\e6ca";
    }

    .e-icon.e-table_01:before {
        content: "\e72d";
    }

    .e-icon.e-folder:before {
        content: "\e6e1";
    }

    .e-icon.e-folder-open:before {
        content: "\e6dd";
    }

    .e-icon.e-signal:before {
        content: "\e6e3";
    }

    .e-icon.e-print:before {
        content: "\e715";
    }

    .e-icon.e-word_01:before {
        content: "\e71d";
    }

    .e-icon.e-word-export:before {
        content: "\e6d5";
    }

    .e-icon.e-pdf_01:before {
        content: "\e71b";
    }

    .e-icon.e-pdf-export:before {
        content: "\e6d3";
    }

    .e-icon.e-excel_01:before {
        content: "\e71a";
    }

    .e-icon.e-excel-export:before {
        content: "\e6d4";
    }

    .e-icon.e-powerpoint-export:before {
        content: "\e6d2";
    }

    .e-icon.e-ie:before {
        content: "\e71c";
    }

    .e-icon.e-documents:before {
        content: "\e743";
    }

    .e-icon.e-question:before {
        content: "\e72b";
    }

    .e-icon.e-film:before {
        content: "\e732";
    }

    .e-icon.e-volume-up:before {
        content: "\e73c";
    }

    .e-icon.e-circle-four:before {
        content: "\e745";
    }

    .e-icon.e-circle-one:before {
        content: "\e746";
    }

    .e-icon.e-circle-two:before {
        content: "\e747";
    }

    .e-icon.e-circle-three:before {
        content: "\e748";
    }

    .e-icon.e-arrow-down:before {
        content: "\e74c";
    }

    .e-icon.e-arrow-down_01:before {
        content: "\e7cc";
    }

    .e-icon.e-arrow-left_01:before {
        content: "\e74d";
    }

    .e-icon.e-sync:before {
        content: "\e752";
    }

    .e-icon.e-sync-disabled:before {
        content: "\e754";
    }

    .e-icon.e-paperclip:before {
        content: "\e772";
    }

    .e-icon.e-paperclip_01:before {
        content: "\e78f";
    }

    .e-icon.e-circle:before {
        content: "\e782";
    }

    .e-icon.e-circle_01:before {
        content: "\e686";
    }

    .e-icon.e-clear:before {
        content: "\e756";
    }

    .e-icon.e-file-html:before {
        content: "\e798";
    }

    .e-icon.e-th:before {
        content: "\e7bc";
    }

    .e-icon.e-th-small:before {
        content: "\e7bd";
    }

    .e-icon.e-file-resize-four-direction:before {
        content: "\e7d7";
    }

    .e-icon.e-file-resize-horizontal:before {
        content: "\e7d8";
    }

    .e-icon.e-media-backward_01:before {
        content: "\e62a";
    }

    .e-icon.e-chevron-right_01:before {
        content: "\e674";
    }

    .e-icon.e-chevron-down_01:before {
        content: "\e673";
    }

    .e-icon.e-chevron-up_01:before {
        content: "\e672";
    }

    .e-icon.e-chevron-left_01:before {
        content: "\e671";
    }

    .e-icon.e-key:before {
        content: "\e670";
    }

    .e-icon.e-align-left:before {
        content: "\e682";
    }

    .e-icon.e-align-center:before {
        content: "\e66d";
    }

    .e-icon.e-align-right:before {
        content: "\e66b";
    }

    .e-icon.e-align-justify:before {
        content: "\e66c";
    }

    .e-icon.e-align-none:before {
        content: "\e66a";
    }

    .e-icon.e-filter:before {
        content: "\e669";
    }

    .e-icon.e-list-numbered:before {
        content: "\e663";
    }

    .e-icon.e-chevron-circle-right:before {
        content: "\e73f";
    }

    .e-icon.e-chevron-circle-left:before {
        content: "\e740";
    }

    .e-icon.e-media-backward:before {
        content: "\e65f";
    }

    .e-icon.e-media-forward:before {
        content: "\e65e";
    }

    .e-icon.e-media-previous:before {
        content: "\e65d";
    }

    .e-icon.e-media-next:before {
        content: "\e65c";
    }

    .e-icon.e-media-eject:before {
        content: "\e65b";
    }

    .e-icon.e-media-pause:before {
        content: "\e659";
    }

    .e-icon.e-media-play:before {
        content: "\e658";
    }

    .e-icon.e-checkmark:before {
        content: "\e657";
    }

    .e-icon.e-smiley:before {
        content: "\e655";
    }

    .e-icon.e-notification:before {
        content: "\e654";
    }

    .e-icon.e-arrow-circle-right:before {
        content: "\e652";
    }

    .e-icon.e-arrow-circle-down:before {
        content: "\e651";
    }

    .e-icon.e-arrow-circle-left:before {
        content: "\e650";
    }

    .e-icon.e-arrow-circle-up:before {
        content: "\e64f";
    }

    .e-icon.e-zoom-in:before {
        content: "\e64e";
    }

    .e-icon.e-zoom-out:before {
        content: "\e64d";
    }

    .e-icon.e-warning:before {
        content: "\e64c";
    }

    .e-icon.e-pointer:before {
        content: "\e648";
    }

    .e-icon.e-unlink:before {
        content: "\e641";
    }

    .e-icon.e-user:before {
        content: "\e63d";
    }

    .e-icon.e-export:before {
        content: "\e63c";
    }

    .e-icon.e-arrow-sans-down:before {
        & when (@skin= "material") {
            content: "\e666";
        }

        & when (@skin= "office-365") {
            content: "\e804";
        }

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

    .e-icon.e-arrow-sans-up:before {
        & when (@skin= "material") {
            content: "\e667";
        }

        & when (@skin= "office-365") {
            content: "\e803";
        }

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

    .e-icon.e-arrow-sans-left:before {
        content: "\e639";
    }

    .e-icon.e-reply:before {
        content: "\e637";
    }

    .e-icon.e-forward:before {
        content: "\e638";
    }

    .e-icon.e-chevron-down:before {
        content: "\e631";
    }

    .e-icon.e-chevron-left:before {
        content: "\e630";
    }

    .e-icon.e-chevron-up:before {
        content: "\e67d";
    }

    .e-icon.e-chevron-right:before {
        content: "\e62f";
    }

    .e-icon.e-calendar:before {
        content: "\e62e";
    }

    .e-icon.e-arrowhead-right:before {
        content: "\e622";
    }

    .e-icon.e-arrow-sans-right:before {
        content: "\e67e";
    }

    .e-icon.e-arrowhead-up:before {
        content: "\e625";
    }

    .e-icon.e-arrowhead-down:before {
        content: "\e627";
    }

    .e-icon.e-print_02:before {
        content: "\e741";
    }

    .e-icon.e-excel:before {
        content: "\e718";
    }

    .e-icon.e-word:before {
        content: "\e716";
    }

    .e-icon.e-pdf:before {
        content: "\e717";
    }

    .e-icon.e-edit_04:before {
        content: "\e7c2";
    }

    .e-icon.e-delete_03:before {
        content: "\e7c1";
    }

    .e-icon.e-save_02:before {
        content: "\e7c8";
    }

    .e-icon.e-sort-alpha-asc_01:before {
        content: "\e7ca";
    }

    .e-icon.e-sort-alpha-desc_01:before {
        content: "\e7c9";
    }

    .e-icon.e-arrow-sans-right_01:before {
        content: "\e7c6";
    }

    .e-icon.e-media-forward_03:before {
        content: "\e7c5";
    }

    .e-icon.e-arrow-sans-left_01:before {
        content: "\e7c7";
    }

    .e-icon.e-media-backward_03:before {
        content: "\e7c3";
    }

    .e-icon.e-full-screen-collapse_01:before {
        content: "\e792";
    }

    .e-icon.e-italic_01:before {
        content: "\e7a4";
    }

    .e-icon.e-underline_01:before {
        content: "\e7ad";
    }

    .e-icon.e-strikethrough_01:before {
        content: "\e7aa";
    }

    .e-icon.e-align-left_01:before {
        content: "\e799";
    }

    .e-icon.e-align-center_01:before {
        content: "\e79d";
    }

    .e-icon.e-align-right_01:before {
        content: "\e79a";
    }

    .e-icon.e-align-justify_01:before {
        content: "\e7a5";
    }

    .e-icon.e-bullets_01:before {
        content: "\e79c";
    }

    .e-icon.e-filternone_01:before {
        content: "\e751";
    }

    .e-icon.e-copy_02:before {
        content: "\e79f";
    }

    .e-icon.e-paste_01:before {
        content: "\e7a7";
    }

    .e-icon.e-link_01:before {
        content: "\e7b6";
    }

    .e-icon.e-unlink_01:before {
        content: "\e7b4";
    }

    .e-icon.e-image:before {
        content: "\e7a8";
    }

    .e-icon.e-video:before {
        content: "\e797";
    }

    .e-icon.e-table_02:before {
        content: "\e78c";
    }

    .e-icon.e-insert-row-above_02:before {
        content: "\e7b0";
    }

    .e-icon.e-insert-row-below_02:before {
        content: "\e7b1";
    }

    .e-icon.e-insert-column-left_02:before {
        content: "\e7b2";
    }

    .e-icon.e-insert-column-right_02:before {
        content: "\e7b3";
    }

    .e-icon.e-delete-row_01:before {
        content: "\e78e";
    }

    .e-icon.e-delete-column_01:before {
        content: "\e78d";
    }

    .e-icon.e-superscript_01:before {
        content: "\e7ac";
    }

    .e-icon.e-subscript_01:before {
        content: "\e7ab";
    }

    .e-icon.e-uppercase_01:before {
        content: "\e796";
    }

    .e-icon.e-lowercase_01:before {
        content: "\e791";
    }

    .e-icon.e-file-code:before {
        content: "\e7b5";
    }

    .e-icon.e-delete_05:before {
        content: "\e7a2";
    }

    .e-icon.e-arrow-left:before {
        content: "\e74b";
    }

    .e-icon.e-arrow-right:before {
        content: "\e74a";
    }

    .e-icon.e-print_01:before {
        content: "\e71f";
    }

    .e-icon.e-exit:before {
        content: "\e720";
    }

    .e-icon.e-file-settings:before {
        content: "\e6d1";
    }

    .e-icon.e-media-backward_04:before {
        content: "\e721";
    }

    .e-icon.e-filter_01:before {
        content: "\e728";
    }

    .e-icon.e-file-list:before {
        content: "\e719";
    }

    .e-icon.e-document:before {
        content: "\e72a";
    }

    .e-icon.e-media-forward_04:before {
        content: "\e724";
    }

    .e-icon.e-zoom-in_01:before {
        content: "\e725";
    }

    .e-icon.e-print_03:before {
        content: "\e7d0";
    }

    .e-icon.e-zoom-out_01:before {
        content: "\e726";
    }

    .e-icon.e-media-backward_02:before {
        content: "\e7d1";
    }

    .e-icon.e-media-forward_02:before {
        content: "\e7d4";
    }

    .e-icon.e-sort-alpha-asc:before {
        content: "\e714";
    }

    .e-icon.e-sort-alpha-desc:before {
        content: "\e713";
    }

    .e-icon.e-folder_01:before {
        content: "\e768";
    }

    .e-icon.e-folder-open_01:before {
        content: "\e769";
    }

    .e-icon.e-checkmark_01:before {
        content: "\e77a";
    }

    .e-icon.e-folder-add:before {
        content: "\e76a";
    }

    .e-icon.e-arrow-circle-left_01:before {
        content: "\e773";
    }

    .e-icon.e-arrow-circle-right_01:before {
        content: "\e774";
    }

    .e-icon.e-arrow-up:before {
        content: "\e74f";
    }

    .e-icon.e-arrow-circle-left_02:before {
        content: "\e775";
    }

    .e-icon.e-arrow-circle-right_02:before {
        content: "\e776";
    }

    .e-icon.e-info:before {
        content: "\e777";
    }

    .e-icon.e-edit_01:before {
        content: "\e69c";
    }

    .e-icon.e-th-list:before {
        content: "\e7b9";
    }

    .e-icon.e-th-large:before {
        content: "\e7bb";
    }

    .e-icon.e-shoppingcart_01:before {
        content: "\e649";
    }

    .e-icon.e-enlarge:before {
        content: "\e679";
    }

    .e-icon.e-code:before {
        content: "\e67b";
    }

    .e-icon.e-view-details:before {
        content: "\e7be";
    }
    /*-----------------------------------Icons end-------------------------------------------*/
    /*ripple animation effect*/
    .e-btn.e-select:focus:after, .e-tbtn.e-btn:focus:after, .e-split-btn.e-btn:focus:after, .e-datetime-popup .e-dt-button.e-focus:after,
    .e-split:hover .e-split-btn.e-select.e-left-btn:after, .e-split:hover .e-split-btn.e-select.e-drp-btn:after, .e-groupbutton > .e-ul > .e-grp-btn-item.e-hover:after,
    .e-datepicker.e-popup .e-header .e-prev:hover:after, .e-datepicker .e-datepicker-days td.e-hover:after, .e-datepicker.e-popup .e-header .e-next:hover:after, .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-icon:hover:after,
    .e-daterangepicker-popup .e-datepicker .e-datepicker-days td:hover:after, .e-daterangepicker-popup .e-datepicker .e-datepicker-days td:hover:after,
    .e-colorwidget .e-color-container:active .e-selected-color::after, .e-colorwidget .e-select:active .e-icon::after, .e-datepicker table td:hover:after,
    .e-colorpicker .e-colorblock .e-color-image.e-add:active:after, .e-uploadbox.e-widget .e-selectpart.e-select:active:after {
        & when( @skin="material") {
            visibility: visible;
        }
    }
    /*end*/
}

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

    .e-scrollbar {
        background-color: #ecedee;
        cursor: default;
    }
	
	.e-scroller .e-content,
	.e-scroller.e-rtl .e-content, {
	touch-action : none;
	}

    .e-scrollbar.e-hscrollbar {
        float: left;
    }

    .e-scrollbar .e-hhandlespace,
    .e-scrollbar .e-hup,
    .e-scrollbar .e-hdown,
    .e-scrollbar.e-rtl .e-vscroll {
        float: left;
    }

    .e-scrollbar .e-hhandlespace,
    .e-scrollbar .e-hup,
    .e-scrollbar .e-hdown {
        height: inherit;
        display: inline-block;
    }

    .e-scrollbar .e-hhandle, .e-scrollbar .e-hscroll {
        height: inherit;
    }

    .e-scrollbar .e-vscroll .e-button.e-icon {
        width: inherit;
    }

    .e-scrollbar .e-hscroll .e-button.e-icon, .e-scrollbar .e-vscroll .e-button.e-icon {
        display: table;
    }

    .e-scrollbar .e-icon {
        font-size: 9px;
    }

    .e-scrollbar .e-vhandle.e-v-line {
        width: 100%;
        margin: 0 auto;
    }

    .e-scrollbar .e-v-line:before {
        width: 16px;
    }

    .e-scrollbar .e-vscroll .e-icon:before,
    .e-scrollbar .e-hscroll .e-icon:before {
        height: inherit;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }

    .e-scrollbar .e-vscroll .e-button.e-icon:before,
    .e-scrollbar .e-hscroll .e-button.e-icon:before,
    .e-scrollbar .e-hscroll .e-hhandle.e-icon:before {
        width: inherit;
    }

    .e-scrollbar .e-vscroll,
    .e-scrollbar .e-hscroll,
    .e-scrollbar .e-unselectable {
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .e-scrollbar .e-vscroll {
        vertical-align: top;
        width: inherit;
        float: right;
    }

    .e-scrollbar .e-vhandle,
    .e-scrollbar .e-hhandle,
    .e-scrollbar .e-button {
        position: relative;
    }

    .e-scrollbar.e-rtl {
        direction: rtl;
    }

    .e-scrollbar.e-rtl .e-content,
    .e-scrollbar.e-rtl .e-hscroll {
        float: right;
    }

    .e-scroller.e-js.e-widget.e-rtl .e-vscrollbar {
        left: 0;
        right: auto;
    }

    .e-scroller, .e-scroller > .e-content {
        overflow: hidden;
    }

    .e-scroller.e-autohide {
        position: relative;
    }

    .e-scroller.e-autohide .e-vscrollbar,
    .e-scroller.e-autohide .e-vscroll {
        position: absolute;
        right: 0;
    }

    .e-scroller.e-autohide .e-hscrollbar,
    .e-scroller.e-autohide .e-hscroll {
        position: absolute;
        bottom: 0;
    }

    .e-scroller > .e-content, .e-scroller.e-rtl .e-vscrollbar, .e-scroller.e-rtl .e-vscroll,
    .e-scroller .e-hscroll, .e-scroller .e-hscroll .e-hhandle {
        float: left;
    }

    .e-scroller.e-rtl .e-content, .e-scroller.e-rtl .e-hscrollbar,
    .e-scroller.e-rtl .e-hscroll, .e-scroller.e-rtl .e-hscroll .e-hhandle {
        float: right;
    }

    .e-scroller .e-vscrollbar {
        float: right;
    }

    .e-scroller .e-hscrollbar {
        float: left;
    }

    .e-scroller.e-rtl {
        direction: rtl;
    }

    .e-scroller.e-rtl > .e-content, .e-scroller.e-rtl .e-hscroll {
        float: right;
    }
	.e-scroller.e-native-scroll > .e-content, .e-scroller.e-native-scroll > .e-content > .e-target-pane {
	    overflow: scroll;
	    touch-action: manipulation;
        -ms-overflow-style: none;
    }

    .e-scroller.e-native-scroll > .e-content::-webkit-scrollbar, .e-scroller.e-native-scroll > .e-content > .e-target-pane::-webkit-scrollbar {
	    height: 0;
	    width: 0;
	}
}

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

    .e-datetime-wrap.e-error .e-in-wrap {
        border-color: #FF0000;
    }

    .e-datetime-wrap {
        display: block;
        overflow: visible;
        width: 143px;
        height: @input-height;
    }

    .e-datetime-wrap .e-padding {
        padding: 0 24px 0 0;
    }

    .e-datetime-wrap .e-icon {
        display: block;
        width: 100%;
        position: absolute;
        top: 50%;
    }

    .e-datetime-wrap .e-select {
        cursor: pointer;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        text-align: left;
        border-left: 1px solid;

        & when (@skin= "office-365") {
            width: 30px;
        }

        & when not (@skin= "office-365") {
            width: 23px;
        }
    }

    .e-datetime-wrap.e-rtl .e-select {
        border-left: none;
        right: auto;

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

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

    .e-datetime-wrap.e-rtl .e-padding {
        padding: 0 0 0 24px;
    }

    .e-datetime-wrap .e-icon {
        font-size: 21px;

        & when (@skin= "material") {
            /*material*/
            height: 24px;
        }

        & when not (@skin= "material") {
            /*other*/
            height: 21px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            margin-top: -10px;
        }

        & when not (@skin= "office-365") {
            /*others*/
            margin-top: -11px;
        }
    }

    .e-datetime-popup {
        cursor: default;
        overflow: auto;
        position: absolute;
        outline: 0 none;

        & when (@skin= "material") {
            /*material*/
            border: 0;
            box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.21);
        }

        & when not (@skin= "material") {
            /*other*/
            border: 1px solid;
            box-shadow: @box-shadow;
        }
    }

    .e-datetime-wrap .e-datetime {
        background-position: -26px -85px;
    }

    .e-datetime-popup .e-popup-container {
        display: inline-flex;

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

    .e-datetime-popup .e-button-container {
        display: block;

        & when not (@skin = "office-365") {
            padding: 0 5px 5px;
        }

        & when (@skin = "office-365") {
            padding: 10px;
        }
    }

    .e-datetime-popup .e-datecontainer, .e-datetime-popup .e-timecontainer {
        display: inline-block;
    }

    .e-datetime-popup .e-datecontainer {
        float: left;

        & when (@skin= "material") {
            /*material*/
            margin: 0;
        }

        & when (@skin = "office-365") {
            margin: 0;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            margin: 0 5px 0 0;
        }
    }

    .e-datetime-popup.e-rtl .e-datecontainer {
        float: right;
        margin: 0 0 0 5px;
    }

    .e-datetime-popup .e-timecontainer .e-time-popup {
        & when not (@skin= "office-365") {
            /*material*/
            border-top: medium none;
        }

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

    .e-datetime-popup .e-timecontainer .e-header {
        & when (@skin= "material") {
            /*material*/
            border-left: 1px solid;
        }

        & when not (@skin= "material") {
            /*other*/
            border-style: solid solid none;
            border-width: 1px;
        }
    }

    .e-datetime-popup.e-corner .e-header {
        border-radius: 4px 4px 0 0;
    }

    .e-datetime-popup.e-corner .e-time-popup {
        border-radius: 0 0 4px 4px;
    }

    .e-datetime-popup .e-timecontainer.e-focus {
        & when not(@skin="office-365") {
            border-radius: 4px;
        }
    }

    .e-datetime-popup .e-dt-button {
        & when(@skin="material") {
            height: 20px;
            line-height: 20px;
            padding: 5px 28px 5px 28px;
        }

        & when not(@skin="material") {
            padding: 3px 28px;
        }

        cursor: pointer;
        display: inline-block;
        text-align: center;
        border: 1px solid;
    }

    .e-datetime-popup .e-dt-button.e-dt-today {
        margin: 0 5px 0 0;
    }

    .e-datetime-popup.e-rtl .e-dt-button.e-dt-today {
        margin: 0 0 0 5px;
    }

    .e-datetime-popup .e-dt-button.e-dt-done {
        float: right;
    }

    .e-datetime-popup.e-rtl .e-dt-button.e-dt-done {
        float: left;
    }

    .e-dt-responsive.e-datetime-popup .e-popup-container {
        display: inline-block;
    }

    .e-dt-responsive.e-datetime-popup .e-datecontainer {
        float: none;
        margin: 0 0 5px 0;
    }

    .e-dt-responsive.e-datetime-popup .e-dt-button.e-dt-today, .e-dt-responsive.e-datetime-popup .e-dt-button.e-dt-now {
        margin: 0 8px 0 0;
    }

    .e-dt-responsive.e-datetime-popup .e-dt-button {
        padding: 3px 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: top;
    }

    .e-dt-responsive.e-datetime-popup .e-datecontainer, .e-dt-responsive.e-datetime-popup .e-timecontainer {
        display: block;
    }

    .e-dt-responsive.e-datetime-popup .e-dt-button.e-dt-today {
        width: 36px;
    }

    .e-dt-responsive.e-datetime-popup .e-dt-button.e-dt-now {
        width: 59px;
    }

    .e-dt-responsive.e-datetime-popup .e-dt-button.e-dt-done {
        width: 31px;
    }

    .e-drill-down.e-datetime-popup {
        border: 0px;
    }

    .e-drill-down.e-datetime-popup .e-popup-container {
        padding: 0px;
    }

    .e-drill-down.e-datetime-popup .e-datecontainer {
        margin: 0px;
    }

    .e-datetime-popup .e-dp-viewhours .e-timepicker-hours .e-state-default,
    .e-datetime-popup .e-dp-viewmins .e-timepicker-mins .e-state-default {
        & when (@skin= "material") {
            /*material*/
            border-radius: 50%;
            box-shadow: none;
            width: 40px;
            height: 40px;
            line-height: 40px;
            position: relative;
        }

        & when (@skin= "office-365") {
            /*material*/
            box-shadow: none;
            width: 40px;
            height: 40px;
            position: relative;
            z-index: 1;
            font-size: 12px;
        }

        & when not (@skin= "material") {
            /*other*/
            height: 26px;
            border: 0 none;
        }
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker table {
        box-sizing: content-box;
        border-collapse: collapse;
        border-style: none;
        position: relative;
        table-layout: fixed;
        text-align: center;
        width: 100%;
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker table td {
        cursor: pointer;
        border: medium none;
        vertical-align: middle;
        text-align: center;
    }

    .e-datetime-popup .e-drillDowncontainer .e-dp-viewhours td,
    .e-datetime-popup .e-drillDowncontainer .e-dp-viewmins td {
        text-align: right;

        & when (@skin= "office-365") {
            padding: 10px 0;
        }

        & when not (@skin= "office-365") {
            padding: 3px;
        }
    }

    .e-datetime-popup .e-drillDowncontainer .e-dp-viewhours .e-timepicker-hours,
    .e-datetime-popup .e-drillDowncontainer .e-dp-viewmins .e-timepicker-mins {
        width: 100%;
    }

    .e-timepicker.e-time-hours, .e-timepicker.e-time-minitues {
        font-family: @font-family;
        width: 18em;
        position: absolute;
        overflow: hidden;

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

        & when not (@skin= "material") {
            /*other*/
            border: 1px solid;
            font-size: @font-size;
        }
    }

    .e-timepicker table,
    .e-timepicker table th,
    .e-timepicker table td {
        margin: 0;
        padding: 0;
        outline: 0 none;
        line-height: normal;
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup {
        display: inline-block;
        z-index: 10000;
        position: static;
        display: block;

        & when (@skin= "material") {
            /*material*/
            width: 308px;
            padding: 0 5px;
        }

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

    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm {
        & when (@skin= "material") {
            /*material*/
            margin-top: 12px;
        }

        & when not (@skin= "material") {
            /*other*/
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
    /*Footer design*/
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-footer {
        text-align: center;
        cursor: pointer;
        padding: 3px;
        margin: 4px 0 0;

        & when (@skin = "material") {
            padding: 12px 10px 10px 10px;
            height: 18px;
            font-size: 14px;
            margin: 4px 11px 0;
        }

        & when (@skin= "office-365") {
            /*material*/
            text-align: right;
        }
    }
    /*Prev, Next icon style*/
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-icon.e-arrow-sans-left {
        float: left;
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-icon.e-arrow-sans-right {
        float: right;
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-icon {
        height: 18px;
        width: 18px;
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-icon:before {
        top: 2px;
        left: 2px;
        position: absolute;
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-next,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-prev {
        cursor: pointer;
        position: relative;
        top: 2px;
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-icon.e-arrow-sans-right:before {
        left: 4px;
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-prev {
        left: 5px;
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-next {
        right: 5px;
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-next,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-prev,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-text,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-am .e-text,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm .e-text,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-mins-header .e-text {
        display: inline-block;
    }
    /*Header Text style*/
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-text,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-am .e-text,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm .e-text,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-mins-header .e-text {
        cursor: pointer;
        text-align: center;
        width: 83%;
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-text .e-hours-headertext,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-text .e-minitues-headertext,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-am .e-text .e-hours-meridiantxt-am,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm .e-text .e-hours-meridiantxt-pm,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-mins-header .e-text .e-minitues-meridiantxt {
        padding: 2px 7px 3px 8px;
        border-radius: 4px;
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-am,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header-pm,
    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-mins-header {
        text-align: center;
        height: 30px;
        line-height: 29px;
    }

    .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header {
        & when not (@skin= "office-365") {
            margin-bottom: 4px;
        }

        & when (@skin= "office-365") {
            margin-bottom: 5px;
            padding-bottom: 5px;
        }
    }
    /*disable hours and minutes*/
    .e-timepicker table td.e-disable {
        opacity: 1;
    }

    .e-timepicker.e-popup.e-disable table td,
    .e-timepicker.e-popup.e-disable .e-footer,
    .e-timepicker.e-popup.e-disable .e-header .e-text,
    .e-timepicker.e-popup.e-disable .e-header .e-next,
    .e-timepicker.e-popup.e-disable .e-header .e-prev {
        cursor: default;
    }

    .e-timepicker .e-disable.e-arrow-sans-left:hover,
    .e-timepicker .e-disable.e-arrow-sans-right:hover {
        background: none;
        border-radius: 0px;
        cursor: default;
    }

    .e-timepicker.e-popup.e-disable table td:hover,
    .e-timepicker.e-popup.e-disable td.e-state-hover {
        background: none;
        font-weight: normal;
        border-radius: 0px;
    }

    .e-timepicker.e-popup.e-disable .e-arrow-sans-left:hover,
    .e-timepicker.e-popup.e-disable .e-arrow-sans-left:hover {
        background: none;
        border-radius: 0px;
    }

    .e-time-minitues .e-hide-mins.e-disable, .e-time-hours .e-hide-hour.e-disable {
        visibility: hidden;
    }
	.e-datetime-popup .e-dt-button.e-dt-today.e-btn.e-select.e-flat,.e-datetime-popup .e-dt-button.e-dt-now.e-btn.e-select.e-flat,.e-datetime-popup .e-dt-button.e-dt-done.e-btn.e-select.e-flat{
       & when (@skin = "material") {    
         box-shadow: none;
    } 
}   
.e-datetime-popup .e-drillDowncontainer .e-timepicker table td{
    & when (@skin= "material") {
    background:none;
    }
}
.e-datetime-wrap.e-widget.e-ntouch.e-active {
    & when not (@skin="material") {
    background:none;
}
}
}

.mixin(@widget) when (@widget = grid), (@widget = none) {
    /*Grid core*/
    
    .e-filtertext::-ms-clear {
        display: none;
    }

    .e-grid.e-rtl .e-headercell .e-descending, .e-grid.e-rtl .e-headercell .e-ascending {
        margin: -15px -4px -1px -32px;
        float: left;
        width: 16px;
    }

    .e-grid.e-rtl .e-headercell .e-rtlsortfiltertoggle { 
        margin-left: -4px;
    }
    .e-grid.e-rtl .e-headercell .e-rtlgrouporfilter {
        margin-left: -5px;
    }
    .e-grid.e-rtl .e-headercell .e-rtlsortadjust { 
        margin-left: -25px;
    }

    ej-grid {
        display: block;
    }

    .e-grid *:focus {
        outline: none;
    }

    .e-grid .e-filtertext::-webkit-search-cancel-button,
    .e-grid .e-responsesearch .e-ejinputtext::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

    .e-grid .e-gridsummary .e-indentcell {
        width: 30px !important;
        background-color: white;
        border-right: none;
        border-top: 1px solid #c4c4c4;
    }

    .e-grid .e-gridcontent tr.e-editedrow.e-batchrow:first-child td {
        border-top-width: 0px;
    }

    .e-grid .e-gridcontent tr td.e-gupdatenotify:empty:before {
        margin-top: -21px !important;
    }

    .e-grid .e-gridcontent tr td.e-gupdatenotify.e-icon {
        height: 14px !important;
    }

    .e-grid {
        height: auto;
        outline: 0 none;
        border-width: @border-size;
        border-style: none @border-type @border-type @border-type;
    }

    .e-grid .e-textover .e-headercelldiv {
        text-overflow: ellipsis;
    }

    .e-grid, .e-grid .e-groupcaption, .e-grid .e-groupcaptionsummary, .e-grid .e-headercell, .e-grid .e-headercell-hover,
    .e-grid .e-groupheadercell, .e-grid .e-groupheadercell:hover, .e-grid .e-rowcell, .e-grid .e-indentcell,
    .e-grid .e-recordpluscollapse, .e-grid .e-recordplusexpand, .e-grid .e-filterbarcell, .e-grid .e-filterbarcelldisabled,
    .e-grid .e-tabletd {
        border-collapse: collapse;
    }

    .e-grid .e-tableLastCell {
        border-right: 1px solid !important;
        border-style: solid !important;
    }

    .e-grid .e-gridcontent, .e-grid .e-groupdroparea, .e-grid .e-headercell, .e-grid .e-headercell-hover, .e-grid .e-headercelldiv,
    .e-grid .e-groupheadercell, .e-grid .e-groupheadercell:hover, .e-grid .e-rowcell, .e-grid .e-indentcell, .e-grid .e-recordpluscollapse,
    .e-grid .e-recordplusexpand, .e-grid .e-filterbarcell, .e-grid .e-filterbarcelldisabled, .e-grid .e-summaryrow,
    .e-grid .e-headercontent, .e-grid .e-gridheader, .e-grid .e-gridfooter, .e-grid .e-footercontent {
        overflow: hidden;
        vertical-align: middle;
    }

    .e-grid .e-dialog .e-addedrow table, .e-grid .e-dialog .e-editedrow table, .e-grid .e-inlineformedit table, .e-grid .e-externalformedit table {
        border-collapse: separate;
        border-spacing: 11px;
    }

    .e-grid .e-dialog .e-addedrow label, .e-grid .e-dialog .e-editedrow label, .e-grid .e-inlineformedit label, .e-grid .e-externalformedit label {
        display: inline;
        font-weight: normal;
        margin-bottom: 0px;
        white-space: nowrap;
    }

    .e-grid .e-dialog .e-editedrow, .e-grid .e-dialog .e-addedrow {
        padding-bottom: 1px;
    }

    .e-grid .e-validError {
        position: relative;
        overflow: visible;
    }

    .e-grid [class ^="e-"], .e-grid .e-unboundcelldiv > button {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    .e-grid .e-widget [class^="e-"] {
        box-sizing: border-box;
    }
    .e-grid .e-dialog.e-widget .e-dialog-icon, .e-grid .e-widget .e-pagercontainer > .e-icon, .e-grid .e-widget .e-pagercontainer .e-numericitem,
    .e-grid .e-widget .e-filtericon, .e-grid .e-widget .e-filtertext, .e-grid .e-widget .e-predicate span, .e-grid .e-widget .e-value .e-chk-act, .e-grid .e-detailcell .e-groupheadercell,
    .e-grid .e-detailcell .e-ungroupbutton, .e-grid .e-excelfilter .e-chk-act {
        box-sizing: content-box;
    }

    .e-table, .e-grid table {
        max-width: none;
    }

    .e-grid .e-editedrow *, .e-grid .e-addedrow *, .e-grid .e-dlgcontainer * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .e-grid .e-unboundcelldiv button {
        margin: 0px 0px 0px 7px;
        padding: 0;
    }

    .e-grid .e-gridcontent .e-table > tbody > tr:first-child td.e-editCell .e-table {
        border-top-width: 0;
        border-top-style: none;
    }

    .e-grid > .e-gridcontent > div > .e-table,
    .e-grid > .e-gridheader > div > .e-table,
    .e-grid > .e-gridfooter .e-gridsummary,
    .e-grid .e-tabletd .e-table,
    .e-grid .e-normaledit .e-table,
    .e-grid > .e-gridcontent .e-movablecontentdiv > .e-table,
    .e-grid > .e-gridcontent .e-frozencontentdiv > .e-table,
    .e-grid > .e-gridheader .e-frozenheaderdiv > .e-table,
    .e-grid > .e-gridheader .e-movableheaderdiv > .e-table {
        border-spacing: 0px;
    }

    .e-grid table th:first-child .e-headercell-hover {
        border-width: @border-size 0 @border-size 0;
    }

    .e-grid .e-gridcontent tr:first-child td,
    .e-grid tr.e-editedrow:first-child td.e-rowcell,
    .e-grid .e-gridcontent .e-firstrow > td {
        border-top: 0 none;
    }

    .e-grid .e-gridcontent .e-addedrow.e-normaledit .e-lastrowcell, .e-grid .e-detailrowcollapse,
    .e-grid .e-gridcontent .e-editedrow .e-normaledit tr:first-child td:first-child,
    .e-grid .e-gridcontent tr:last-child.e-addedrow.e-normaledit:not(:only-child) td:first-child {
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #c8c8c8;
    }

    .e-grid .e-gridcontent tr:last-child.e-addedrow.e-normaledit tr:first-child td:first-child,
    .e-grid .e-gridcontent tr:first-child.e-editedrow tr:first-child td:first-child {
        border-top: 0px;
    }

    .e-grid .e-groupdroparea,
    .e-grid .e-groupTopLeftcell {
        border-style: solid none;
        border-width: 1px 0px 0px;
    }

    .e-grid .e-number {
        border-radius: 65%;
        width: 7px;
        height: 15px;
        padding: 1px 5px;
        line-height: 15px;
        margin-top: 7px;
    }

    .e-grid .e-grid-icon {
        float: left;
    }

    .e-grid .e-table, .e-grid .e-gridsummary {
        width: 100%;
        table-layout: fixed;
        border: 0 none;
        border-collapse: separate;
        margin-top: 0px;
    }

    .e-grid .e-columnheader:not(.e-stackedHeaderRow) {
        cursor: pointer;
    }

    .e-grid .e-columnheader.e-defaultcursor, .e-grid .e-headercell.e-defaultcursor {
        cursor: default;
    }

    .e-grid .e-gridcontent {
        outline: none;
    }

    .e-grid .e-groupdroparea {
        padding-top: 5px;
        padding-bottom: 8px;
        text-indent: 10pt;
        width: 100%;

        & when (@skin= "material") {
            padding-top: 15px;
            padding-bottom: 16px;
        }

        & when (@skin= "office-365") {
            text-indent: 3pt;
            padding-top: 6px;
            padding-bottom: 6px;
        }
    }

    .e-grid .e-icon.e-print:before {
        content: "\e741";
    }

    .e-grid .e-excelIcon:before {
        content: "\e718";
    }

    .e-grid .e-wordIcon:before {
        content: "\e716";
    }

    .e-grid .e-pdfIcon:before {
        content: "\e717";
    }

    .e-grid .e-icon.e-delete:before {
        content: "\e681";
    }

    .e-icon.e-contextadd:before {
        content: "\e7bf";
    }

    .e-icon.e-contextedit:before {
        content: "\e7c2";
    }

    .e-icon.e-contextdelete:before {
        content: "\e7c1";
    }

    .e-icon.e-contextcancel:before {
        content: "\e7c0";
    }

    .e-icon.e-contextsave:before {
        content: "\e7c8";
    }

    .e-icon.e-contextgrouping:before {
        content: "\e7c4";
    }

    .e-icon.e-contextungrouping:before {
        content: "\e7cb";
    }

    .e-icon.e-contextascending:before {
        content: "\e7ca";
    }

    .e-icon.e-contextdescending:before {
        content: "\e7c9";
    }

    .e-icon.e-contextnext:before {
        content: "\e7c6";
    }

    .e-icon.e-contextlast:before {
        content: "\e7c5";
    }

    .e-icon.e-contextprevious:before {
        content: "\e7c7";
    }

    .e-icon.e-contextfirst:before {
        content: "\e7c3";
    }

    .e-columnChooser {
        min-width: 200px;
        padding: 0px;
        font-family: @font-family;
        height: 307px !important;
        background: none white;
    }
	.e-grid.e-columnChooser .e-button, .e-grid .e-ccButton{
		box-sizing: border-box;
	}
    .e-columnChooser .e-searchbox {
        position: relative;
        margin: 0px 10px 5px 11px;

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

    .e-columnChooser .e-searchbox input {
        width: 96%;
        height: 21px;
        border-radius: 4px;

        & when (@skin= "material") {
            border-radius: 0px;
        }
    }

    div.e-dialog.e-columnChooser {
        padding-left: 0;
        padding-right: 0;

        & when (@skin= "material") {
            padding-top: 3px;
        }

        & when (@skin= "office-365") {
            padding: 10px 12px;
        }
    }

    .e-gridheader {
        clear: right;
    }

    .e-columnChooser .e-searchbox span {
        cursor: pointer;
        display: block;
        height: 16px;
        position: absolute;
        right: 6px;
        top: 18%;
    }

    .e-columnChooser .e-scroller {
        outline: none;
    }

    .e-columnChoosertail {
        height: 0;
        position: relative;
        width: 0;
        top: 7px;
        left: 1239px;
        border: 10px solid transparent;
    }

    .e-columnChoosertailAlt {
        height: 0;
        position: relative;
        width: 0;
        top: 7px;
        left: 1239px;
        border: 10px solid transparent;
    }

    .e-columnChooserListDiv label {
        width: auto;
        margin-left: 15px;
        margin-right: 17px;
        display: inline-block;
        margin-bottom: 0px;
        font-weight: inherit;
    }

    .e-columnChooserListDiv {
        line-height: 2.5;
        white-space: nowrap;
        padding: 0 13px;
    }

    .e-columnChooser .e-vscroll,
    .e-columnChooser .e-vscrollbar {
        width: 10px !important;
    }

    .e-columnChooser .e-hhandle {
        height: 8px !important;
        border-radius: 10px;
    }

    .e-columnChooser .e-hhandlespace {
        margin-top: 0px;
    }

    .e-columnChooser .e-content {
        width: 214px;
    }

    .e-columnChooserSplitter {
        width: 100%;
        border-bottom: 0px;
    }

    .e-columnChooser .e-hscrollbar {
        height: 11px !important;
        margin-top: 8px;
    }

    .e-grid.e-columnChooser .e-hscroll, .e-grid.e-columnChooser .e-vscroll {
        border: 0px;
    }

    .e-columnChooser .e-vhandle.e-v-line {
        width: 8px;
        margin-left: -3px;
        border-radius: 10px;
    }

    .e-columnChooser .e-scrollbar .e-hscroll .e-button,
    .e-columnChooser .e-scrollbar .e-vscroll .e-button {
        display: none;
    }

    .e-grid .e-gridellipsis {
        text-overflow: ellipsis;
    }

    .e-grid .e-groupcaption,
    .e-grid .e-groupcaptionsummary {
        border-style: @border-type;
        border-width: @border-size 0;
        display: table-cell;
        font-weight: normal;
        line-height: 30px;

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

        & when (@skin = "material") {
            line-height: 48px;
            padding-left: 0.7em;
            padding-right: 0.7em;
            font-size: 13px;
        }
    }

    .e-grid .e-headercell,
    .e-grid .e-headercell-hover {
        height: 40px;
        padding: 0 0.5em;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;

        & when (@skin= "material") {
            /*material*/
            height: 56px;
            color: rgba(0, 0, 0, 0.84);
        }

        & when (@skin= "office-365") {
            height: 36px;
            padding: 0 8px 0 8px;
        }
    }

    .e-grid .e-headercelldiv {
        font-weight: bold;
        font-size: @gheader-font-size;
        display: block;
        border: 0 none;
        height: 29px;
        line-height: 29px;
        margin: -7px;
        padding: 0 0.7em;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;

        & when (@skin= "material") {
            /*material*/
            color: #000000;
            font-weight: normal;
            color: rgba(0, 0, 0, 0.54);
            text-overflow: ellipsis;
            font-size: 12px;
        }

        & when (@skin= "office-365") {
            padding: 0 0.5em;
        }
    }


    .e-grid .e-stackedHeaderCell {
        padding: 0 0.7em;

        & when (@skin= "material") {
            /*material*/
            color: rgba(0, 0, 0, 0.54);
            font-weight: normal;
            text-overflow: ellipsis;
        }

        & when (@skin= "office-365") {
            /*material*/
            padding: 0 8px;
            padding: 0 0.5em;
        }
    }


    .e-grid .e-stackedHeaderCell:hover {
        & when (@skin= "material") {
            color: rgba(0, 0, 0, 0.84);
        }
    }

    .e-grid .e-groupheadercell,
    .e-grid .e-groupheadercell:hover {
        font-size: @font-size;
        font-weight: normal;
        margin-left: 10px;
        padding: 7px;
        cursor: pointer;
        height: 17px;
        border: @border-size @border-type;

        & when (@skin= "material") {
            /*material*/
            border-color: #2856b6;
            margin-right: 12px !important;
            font-size: 13px;
            border: 0;
        }

        & when (@skin= "office-365") {
            border: 0;
            height: 20px;
            margin-left: 8px;
            padding: 3px 0;
        }
    }

    .e-grid .e-groupheadercell:first-child {
        & when (@skin= "material") {
            margin-left: 24px !important;
        }
    }

    .e-grid .e-groupheadercell:last-child {
        & when (@skin= "material") {
            margin-right: 24px !important;
        }
    }

    .e-grid .e-rowcell, .e-grid .e-indentcell {
        border-style: @border-type;
        display: table-cell;
    }

    .e-grid .e-rowcell {
        border-width: @border-size 0 0 @border-size;
        padding: 0.7em;
        line-height: 14px;
        white-space: nowrap;
        width: auto;
        vertical-align: middle;

        & when (@skin= "material") {
            /*material*/
            line-height: 14px;
            padding: 1.31em 0.7em 1.3em;
            color: rgba(0, 0, 0, 0.84);
            font-size: 13px;
        }

        & when (@skin= "office-365") {
            padding: 0 8px 0 8px;
        }
    }

    .e-grid tr, tr.e-row, tr.e-alt_row {
        & when (@skin= "office-365") {
            height: 36px;
        }
    }

    .e-grid .e-rowcell:empty {
        height: 14px !important;
    }

    .e-grid .e-verticallines .e-rowcell,
    .e-grid .e-verticallines .e-normaledit td.e-rowcell,
    .e-grid .e-verticallines .e-detailrowcollapse,
    .e-grid .e-verticallines .e-detailrowcollapse.e-lastrowcell,
    .e-grid .e-verticallines .e-detailrowexpand,
    .e-grid .e-verticallines .e-filterbarcell {
        border-width: 0 0 0 @border-size;
    }

    .e-grid.e-rtl .e-verticallines .e-rowcell,
    .e-grid.e-rtl .e-verticallines .e-normaledit td.e-rowcell,
    .e-grid.e-rtl .e-verticallines .e-detailrowcollapse,
    .e-grid.e-rtl .e-verticallines .e-detailrowexpand,
    .e-grid.e-rtl .e-verticallines .e-filterbarcell {
        border-width: 0 @border-size 0 0;
    }

    .e-grid .e-verticallines .e-detailcell,
    .e-grid .e-horizontallines .e-detailcell,
    .e-grid .e-hidelines .e-detailcell,
    .e-grid .e-verticallines .e-detailindentcell,
    .e-grid .e-horizontallines .e-detailindentcell,
    .e-grid .e-hidelines .e-detailindentcell,
    .e-grid.e-rtl .e-hidelines .e-rowcell,
    .e-grid.e-rtl .e-hidelines .e-normaledit td.e-rowcell,
    .e-grid.e-rtl .e-hidelines tr.e-editedrow td.e-rowcell,
    .e-grid .e-hidelines .e-rowcell,
    .e-grid .e-hidelines .e-normaledit td.e-rowcell,
    .e-grid .e-hidelines tr.e-editedrow td.e-rowcell,
    .e-grid .e-hidelines .e-detailrowcollapse,
    .e-grid .e-hidelines .e-detailrowcollapse.e-lastrowcell,
    .e-grid .e-hidelines .e-detailrowexpand,
    .e-grid .e-horizontallines .e-headercell,
    .e-grid .e-hidelines .e-headercell,
    .e-grid.e-rtl .e-horizontallines .e-headercell,
    .e-grid.e-rtl .e-hidelines .e-headercell,
    .e-grid .e-hidelines .e-filterbarcell,
    .e-grid.e-rtl .e-hidelines .e-filterbarcell {
        border-width: 0px;
    }

    .e-grid .e-verticallines .e-detailcell,
    .e-grid .e-horizontallines .e-detailcell {
        padding: 0px;
    }

    .e-grid .e-horizontallines .e-rowcell,
    .e-grid .e-horizontallines .e-normaledit td.e-rowcell,
    .e-grid .e-horizontallines .e-detailrowcollapse,
    .e-grid .e-horizontallines .e-detailrowexpand,
    .e-grid.e-rtl .e-horizontallines .e-rowcell,
    .e-grid.e-rtl .e-horizontallines .e-normaledit td.e-rowcell,
    .e-grid.e-rtl .e-horizontallines .e-detailrowcollapse,
    .e-grid.e-rtl .e-horizontallines .e-detailrowexpand,
    .e-grid .e-horizontallines .e-filterbarcell {
        border-width: @border-size 0 0 0;
    }

    .e-grid .e-horizontallines td.e-lastrowcell,
    .e-grid .e-horizontallines .e-normaledit td.e-rowcell {
        border-width: @border-size 0 @border-size 0;
    }

    .e-grid.e-wrap .e-columnheader .e-headercelldiv,
    .e-grid.e-wrap .e-rowcell, .e-grid.e-wrap.e-responsive .e-rowcell,
    .e-grid .e-columnheader.e-wrap .e-headercelldiv,
    .e-grid .e-gridcontent.e-wrap .e-rowcell,
    .e-grid.e-responsive .e-gridcontent.e-wrap .e-rowcell {
        height: Auto;
        white-space: normal;
        line-height: 18px;
    }

    .e-grid .e-rowcell.e-nowrap,
    .e-grid .e-wrap .e-rowcell.e-nowrap {
        white-space: nowrap;
    }

    .e-grid.e-wrap .e-columnheader .e-headercelldiv {
        margin-bottom: 2px;
        margin-top: 0px;
    }

    .e-grid .e-normaledit .e-rowcell {
        & when not (@skin= "material") {
            padding: 1px 3px;
        }

        & when (@skin= "material") {
            padding: 1px 3px;
        }

        & when(@skin= "office-365") {
            padding: 1px 8px 1px 7px;
        }
    }

    .e-grid .e-normaledit .e-boolcell {
        & when not (@skin= "material") {
            padding-left: 0.7em;
        }

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

    .e-grid .e-normaledit .e-templatecell {
        padding: 1px .7em;
    }

    .e-grid .e-normaledit .e-unboundcell {
        & when not (@skin= "material") {
            padding: 0.7em;
        }

        & when (@skin= "material") {
            padding: 0.7em;
        }
    }

    .e-grid .e-lastrowcell {
        border-bottom-width: @border-size;
    }

    .e-grid .e-boolrowcell {
        & when not (@skin= "material") {
            padding-bottom: 0px;
            padding-top: 0px;
            padding-left: 0px;
        }

        & when (@skin= "material") {
            padding-bottom: 0px;
            padding-top: 0px;
            padding-left: 0px;
        }
    }

    .e-grid .e-indentcell {
        border-width: 0 @border-size 0 0;
        line-height: 0.3em;
        padding: 0px;
    }

    .e-grid .e-recordpluscollapse, .e-grid .e-recordplusexpand {
        display: table-cell;
        cursor: pointer;
        padding: 0px;
    }


    .e-grid .e-recordplusexpand {
        white-space: nowrap;
    }

    .e-grid .e-recordpluscollapse ~ td {
        border-bottom: 0 none;
    }

    .e-grid .e-detailrowcollapse, .e-grid .e-detailrowexpand, .e-grid .e-recordpluscollapse, .e-grid .e-recordplusexpand {
        border-style: @border-type;
        border-width: @border-size 0px 0px;
    }

    .e-grid .e-detailrowcollapse.e-lastrowcell {
        border-bottom-width: @border-size;
    }

    .e-grid .e-togglegroup, .e-grid .e-toggleungroup {
        padding-left: 7px;
    }

    .e-grid .e-headercell .e-toggleungroup,
    .e-grid .e-headercell .e-togglegroup{
        float: right;
        height: 10px;
        margin:-15px -20px -1px -20px;
        padding: 0px;
        width: 10px;
    }
    .e-grid .e-headercell .e-togglesortgroupfilter {
        margin-right : -38px;
    }

    .e-grid .e-headercellgroup {
        padding-right: 35px;
    }

    .e-grid .e-toolbaricons {
        min-height: 26px;
        min-width: 26px;
        text-decoration: none;
        vertical-align: middle;
        line-height: 26px;
        margin: 0;
    }

    .e-grid .e-toolbar.e-toolbarspan {
        border-width: @border-size 0 0;
        border-style: @border-type;
        display: block !important;

        & when (@skin= "material") {
            /*height: 56px !important;*/
            box-sizing: border-box;
        }
    }

    .e-grid .e-editcell, .e-grid .e-tabletd {
        padding: 0px;
    }

    .e-grid .e-editcell .e-table {
        border-style: @border-type;
    }

    .e-grid .e-grid-filterstatusbar,
    .e-grid .e-grid-filterstatusbarbottom {
        height: 10px;
        border-style: @border-type;
        padding-bottom: 4px;
        padding-top: 5px;
        display: none;
        position: absolute;
    }

    .e-grid .e-grid-filterstatusbar {
        margin-top: -20px;
        border-width: @border-size @border-size 0px @border-size;
        -moz-border-radius: 4px 4px 0px 0px;
    }

    .e-grid .e-grid-filterstatusbarbottom {
        margin-top: @border-size;
        border-width: 0px @border-size @border-size @border-size;
        -moz-border-radius: 0px 0px 4px 4px;
    }

    .e-grid .e-filterbarcell input {
        width: 89%;
        border-width: @border-size;
        text-indent: @border-size;
        font-family: @font-family;
        font-weight: normal;
        font-size: @font-size;
        padding-right: 10%;
        height: 26px;

        & when (@skin= "material") {
            border-width: 0 0 1px 0;
        }

        & when (@skin= "office-365") {
            height: 28px;
        }
    }

    .e-grid .e-filterbarcell,
    .e-grid .e-filterbarcelldisabled {
        border-width: @border-size 0 0 @border-size;
        height: 27px;
        padding: 0px;
        border-style: @border-type;
        cursor: default;
        padding-left: 7px;
        padding-right: 9px;


        & when (@skin= "office-365") {
            /*border-width: 0 0 @border-size 0;*/
            padding-left: 8px;
            padding-right: 8px;
            padding-bottom: 1px;
            padding-top: 1px;
        }
    }

    .e-grid-filterstatusbar .e-msgdiv,
    .e-grid-filterstatusbarbottom .e-msgdiv {
        margin-left: 5px;
        margin-top: -3px;
        position: absolute;
    }

    .e-grid .e-headercell .e-filtericon, .e-grid .e-headercell .e-filteredicon {
        float: right;
        height: 10px;
        margin: -17px -34px -1px 3px;
        padding: 3px;
        width: 10px;
    }
    .e-grid .e-headercell .e-sortfiltericon {
        margin-right: -45px;
    }

    .e-grid .e-headercell .e-sortgroupicon {
        margin-right: -38px;
    }
    .e-grid .e-headercell .e-groupfiltericon
    {
        margin-right: -45px;
    }
    .e-grid .e-headercell .e-sortfiltergroupicon {
        margin-right: -63px;
    }

    .e-grid .e-headercell .e-ascending, .e-grid .e-headercell .e-descending
    {
        float: right;
        height: 10px;
        margin:-15px -22px -1px -20px;
        padding: 0px;
        width: 10px;
    } 
    .e-grid .e-headercell .e-filtericon, .e-grid .e-headercell .e-filteredicon {
        width: 16px;
        height: 16px;
        padding: 3px;
    }

    .e-grid .e-headercell .e-ascending, .e-grid .e-headercell .e-descending, .e-grid .e-headercell .e-togglegroup, .e-grid .e-headercell .e-toggleungroup {
        padding-left: 0px;
        padding-bottom: 4px;
    }

    .e-grid .e-headercell .e-sortadjust {
        margin-right: -16px;
    }
    
    .e-grid.e-dlgcontainer .e-predicate {
        border-width: 0;
        border-style: solid;
        padding: 10px 5px 0 0;
        text-align: left;
    }

    .e-grid.e-dlgcontainer .e-caption {
        margin: 0 9px 0 6px;
        position: relative;
        top: -2px;
    }

    .e-grid.e-dlgcontainer .e-value .e-caption {
        margin: 0 5px 0 0;
    }

    .e-grid.e-dlgcontainer .e-dlgBtns {
        padding: 10px 0;
        text-align: right;

        & when (@skin ="office-365") {
            padding: 0;
            margin: 20px -6px 0 0;
        }
    }

    .e-grid.e-dlgcontainer .e-dlgBtns .e-filter {
        & when not (@skin= "material") {
            margin-right: 6%;
        }
    }

    .e-grid.e-dlgcontainer .e-dlgBtns .e-clear, .e-grid.e-dlgcontainer .e-dlgBtns .e-filter {
        & when not (@skin= "material") {
            width: 47%;
        }

        & when (@skin= "material") {
            width: auto;
        }
    }

    .e-grid.e-filterDialog .e-input {
        line-height: 20px;
    }

    .e-grid.e-dlgcontainer .e-operator {
        & when not (@skin= "material") {
            padding-top: 10px;
        }

        & when (@skin= "material") {
            padding-top: 8px;
            padding-bottom: 16px;
        }

        & when (@skin= "office-365") {
            padding-top: 0;
        }
    }

    .e-grid.e-dlgcontainer .e-value {
        & when not (@skin= "material") {
            padding-top: 10px;
        }

        & when (@skin= "material") {
            padding-top: 16px;
            padding-bottom: 16px;
        }

        & when (@skin= "office-365") {
            padding-top: 12px;
        }
    }

    .e-grid.e-dlgcontainer.e-filterDialog {
        & when (@skin= "material") {
            padding-top: 24px !important;
        }

        & when (@skin= "office-365") {
            padding: 20px 12px;
        }
    }

    .e-grid.e-dlgcontainer .e-dlgBtns {
        & when (@skin= "material") {
            padding: 8px 0px 0px 8px;
        }

        & when (@skin= "office-365") {
            padding: 0;
        }
    }

    .e-grid.e-dlgcontainer select {
        padding: 0;
        height: 20px;
        width: 100%;
    }

    .e-grid .e-filterdialoglarge .e-dlgcontainer input[type='text'] {
        width: 197px;
    }

    .e-grid .e-summaryrow {
        font-weight: bold;
        border-style: solid;
        border-width: @border-size 0 0;
        padding: 0.5em;
        height: auto;
        line-height: 18px;
        white-space: normal;
        word-wrap: break-word;

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

    .e-grid .e-summaryscroll {
        padding-right: 18px;
    }

    .e-grid .e-summaryscroll .e-rtl {
        padding-left: 18px;
    }

    .e-grid .e-boolrowcell input[type='checkbox'] {
        margin-left: 0.7em;
        width: auto;
        height: auto;
    }

    .e-grid .e-icon {
        background-repeat: no-repeat;
        background-attachment: scroll;
    }

    .e-grid .e-recordpluscollapse > div,
    .e-grid .e-detailrowcollapse > div,
    .e-grid .e-recordplusexpand > div,
    .e-grid .e-detailrowexpand > div {
        height: 19px;
        vertical-align: middle;
        width: 23px;
        padding: 0px;
        background-repeat: repeat;
        cursor: pointer;

        & when (@skin= "office-365") {
            height: 32px;
            width: 32px;
        }
    }

    .e-grid .e-dialog .e-close {
        background-repeat: repeat;
    }

    .e-grid .e-ungroupbutton {
        float: right;
        width: 16px;
        height: 16px;
        display: none;
        padding-top: 2px;
    }

    .e-grid .e-grid-icon .e-ascending,
    .e-grid .e-grid-icon .e-descending {
        padding-left: 7px;

        & when (@skin= "office-365") {
            float: left;
            padding-top: 3px;
            margin-right: 8px;
            padding-left: 0;
        }
    }

    .e-grid .e-headertemplate > .e-headercelldiv {
        padding: 0 8px;
    }

    .e-gridwaitingpopup.e-waitpopup-pane {
        background-color: transparent !important;
    }

    .e-grid .e-gridheader .e-headercell, .e-grid .e-rowcell {
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .e-grid div.e-error, .e-grid .e-gridpopup {
        position: absolute;
        font-weight: normal;
        z-index: 9999;
    }

    .e-grid .e-gridpopup .e-content {
        border-width: 1px;
        border-style: solid;
    }

    .e-grid .e-gridpopup .e-content {
        border-radius: 4px;
        font-size: 14px;
        padding: 4px 4px;
    }

    .e-grid .e-gridpopup span {
        display: inline-block;
        height: 16px;
        cursor: pointer;
        padding: 4px;
        border: 1px solid transparent;
        width: 16px;
    }

    .e-grid div.e-error .e-errortail {
        height: 0;
        position: relative;
        width: 0;
        border: 10px solid transparent;
    }

    .e-grid .e-filterdiv,
    .e-grid .e-fltrtempdiv {
        position: relative;
        width: 100%;
        text-align: center;
        padding-right: 7%;
    }

    .e-grid .e-normaledit td {
        border-bottom: none;
    }

    .e-grid .e-addedrow .e-indentcell {
        border-top: 1px solid #c4c4c4;
    }

    .e-grid .e-dialog .e-addedrow td {
        border: none;
    }

    .e-grid .e-externalformedit .e-addedrow td {
        border: none;
    }

    .e-grid .e-addedrow .e-inlineformedit td {
        border: none;
    }

    .e-grid .e-filterdiv.e-fltrinputdiv span {
        display: block;
        height: 16px;
        position: absolute;
        right: 10%;
        top: 8px;
        cursor: pointer;
        width: 21px;
    }

    .e-grid .e-filterdiv.e-fltrinputdiv span.e-cancel.e-icon {
        & when (@skin= "material") {
            display: none !important;
        }
    }

    .e-grid .e-filterdiv.e-searchinputdiv span {
        display: block;
        height: 16px;
        position: absolute;
        right: 10%;
        top: 5px;
        cursor: pointer;
        width: 21px;

        & when (@skin= "office-365") {
            top: 8px;
        }
    }

    .e-grid .e-gridpopup .e-tail:before, .e-grid .e-gridpopup .e-tail:after {
        border: 10px solid rgba(0, 0, 0, 0);
        content: "";
        height: 0;
        left: 8px;
        position: absolute;
        width: 0;
    }

    .e-grid .e-gridpopup .e-downtail:after {
        top: 34px;
    }

    .e-grid div.e-error .e-toparrow {
        left: 10%;
        border-top-width: 2px;
        display: block;
    }

    .e-grid.e-rtl div.e-error .e-toparrow {
        right: 10%;
    }

    .e-grid .e-headercellfilter {
        padding-right: 35px;
    }
    .e-grid .e-headercellgroupfilter
    {
        padding-right: 45px;
    }
    .e-grid .e-headercellsort {
        padding-right: 25px;
    }
    .e-grid .e-headercellsortfilter
    {
        padding-right: 45px;
    }
    .e-grid .e-headercellsortgroupfilter {
        padding-right: 63px;
    }
    .e-grid.e-rtl .e-detailindentcell {
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #c8c8c8;
    }

    .e-grid.e-rtl .e-headercellfilter {
        padding-right: 25px;
        padding-left: 28px;
    }

    .e-grid.e-rtl .e-filterdiv {
        padding-right: 2%;
    }

    .e-reSizeColbg {
        position: absolute;
        border-left-width: 1px;
        border-left-style: dotted;
    }

    .e-grid .e-gridtoolbar li {
        padding: 4px 0 4px 6px;

        & when (@skin= "office-365") {
            padding: 7px;
        }
    }

    .e-grid .e-gridtoolbar li a {
        padding-left: 3px;
    }

    .e-grid .e-groupheadercell .e-togglegroupbutton {
        padding-top: 2px;
    }

    .e-grid .e-scrollcss {
        padding-right: 17px;
    }

    .e-grid .e-animatebutton {
        width: 16px;
        height: 10px;
        font-size: 12px;
        padding-right: 26px;
        float: right;

        & when (@skin= "office-365") {
            float: none;
            padding-left: 46%;
        }
    }


    .e-grid tr td:first-child, .e-grid tr th:first-child {
        border-left: 0px;
    }

    .e-grid .e-filterbarcell,
    .e-grid .e-filterbarcelldisabled {
        & when not (@skin= "office-365") {
            height: 40px;
        }
    }

    .e-grid .e-dialog .gridform .e-rowcell {
        border: none;
        padding: 0.1em;
    }

    .e-grid .e-headercell,
    .e-grid .e-grouptopleftcell {
        border-width: 0 0 0 @border-size;
        border-style: @border-type;
    }

    .e-grid .e-grouptopleftcell,
    .e-grid.e-rtl .e-grouptopleftcell,
    .e-grid .e-verticallines .e-grouptopleftcell {
        cursor: default;
        border-width: 0px;
        padding: 0px;
    }

    .e-grid .e-reorderindicate {
        border-right-width: 3px;
    }

    .e-grid .e-groupdroparea {
        font-size: 19px;
        font-weight: lighter;
        text-align: center;
        border-top-width: @border-size;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;

        & when (@skin= "material") {
            font-size: 13px;
            font-weight: normal;
            text-align: left;
        }

        & when (@skin="office-365") {
            font-size: 17px;
        }
    }

    .e-grid .e-cloneproperties {
        & when not (@skin= "material") {
            padding: 4px 5px;
            border-style: solid;
            border-width: @border-size;
            text-align: center;
            vertical-align: middle;
            overflow: hidden;
            opacity: 0.6;
            white-space: nowrap;
        }

        & when (@skin= "material") {
            padding: 4px 5px;
            border-style: solid;
            border-width: @border-size;
            text-align: center;
            vertical-align: middle;
            overflow: hidden;
            white-space: nowrap;
        }
    }

    .e-grid .e-cloneproperties.draganddrop {
        padding: 0px;
    }

    .e-grid.e-draganddrop {
        background-color: #179bd7;
        border-color: #5396bc;
        border-width: 1px;

        & when not (@skin= "material") {
            opacity: 0.5;
        }
    }

    .e-grid .e-griddragarea {
        border: 1px solid #fff;
        background-color: rgba(255,255,255,0.3);
        opacity: 0.6;
    }

    .e-grid.e-draganddrop .e-rowcell {
        border-color: #b4daef;
        color: #fff;

        & when not (@skin= "material") {
            opacity: 0.8;
        }
    }

    .e-grid .e-allowRowDrop {
        cursor: url('@{font-path}/grid/dropPointer.cur'), default;
    }

    .e-grid.e-draganddrop tr:first-child td {
        border-top-width: 0px;
    }

    .e-grid .e-dialog .e-buttons {
        clear: both;
        float: right;

        & when (@skin= "material") {
            padding: 2px;
        }
    }

    .e-grid .e-detailcell {
        & when not (@skin= "material") {
            padding: 0.4em 0.6em;
        }

        & when (@skin= "material") {
            padding: 0.6em 0.6em;
        }
    }

    .e-grid .e-gridheader {
        border-bottom-width: @header-border-size;
        border-bottom-style: @border-type;
        box-shadow: @grid-box-shadow;

        & when (@skin= "material") {
            border-bottom-width: 1px;
        }
    }

    .e-grid .e-externalformedit .e-rowcell,
    .e-grid .e-inlineformedit .e-rowcell {
        border: none;
    }

    .e-grid .e-inlineformedit .e-rowcell {
        border-top: 0 none;
    }

    .e-grid .e-inlineform-titlebar {
        font-weight: bold;
        padding: 0.7em;
    }

    .e-grid .e-inlineformedit .e-editform-btn {
        float: right;
        padding: 13px;

        & when (@skin ="office-365") {
            margin-bottom: 15px;
            margin-top: 15px;
            margin-right: 6px;
            padding: 0;
        }
    }

    .e-grid .e-externalformedit .e-editform-btn {
        float: right;
        padding: 0px 0px 13px 0px;

        & when (@skin= "office-365") {
            margin-bottom: 15px;
            margin-top: 15px;
            margin-right: 6px;
            padding: 0;
        }
    }

    .e-grid .e-inlineformedit form div.e-gridFromDiv,
    .e-grid .e-inlineformedit form div.e-gridFromDiv > div,
    .e-grid .e-externalformedit form div.e-gridFromDiv,
    .e-grid .e-externalformedit form div.e-gridFromDiv > div {
        display: inline-block;
        padding-left: 0px;
        padding-right: 0.7em;

        & when (@skin= "material") {
            padding-top: 4px;
        }
    }

    .e-grid .e-inlineformedit div > label,
    .e-grid .e-externalformedit div > label {
        display: inline-block;
        width: 80px;
        white-space: normal;
        word-wrap: break-word;
    }

    .e-grid .e-inlineformedit .e-display div,
    .e-grid .e-externalformedit .e-display div {
        display: block;
    }

    .e-grid .e-inlineformedit form table div.e-gridFromDiv,
    .e-grid .e-inlineformedit form table div.e-gridFromDiv > div,
    .e-grid .e-externalformedit form table div.e-gridFromDiv,
    .e-grid .e-externalformedit form table div.e-gridFromDiv > div {
        display: block;
        padding-left: 0px;
        padding-right: 0.7em;
    }

    .e-grid .e-inlineformedit table div > label,
    .e-grid .e-externalformedit table div > label {
        display: block;
        width: 80px;
        white-space: normal;
        word-wrap: break-word;
    }

    .e-grid .e-inlineformedit {
        padding: 0px;
    }

    .e-grid .e-form-container {
        border-width: 0 @border-size @border-size @border-size;
        border-style: @border-type;
    }

    .e-grid .e-externalform {
        padding: 1.5em 1em 3em 1em;

        & when (@skin= "material") {
            height: 125px;
        }

        & when (@skin= "material") {
            padding: 0 1em 5em 1em;
        }

        & when (@skin= "office-365") {
            padding: 0 0 4em;
            margin-right: 6px;
        }
    }

    .e-grid .e-form-titlebar {
        font-size: 16px;
        font-weight: normal;
        padding: 0.7em;
    }

    .e-grid .e-form-togglebtn {
        cursor: pointer;
        display: inline-block;
        float: right;
        height: 20px;
        padding: 0 0 4px 5px;
        right: 5px;
        top: 50%;
        width: 20px;
    }

    .e-grid .e-form-toggle-icon.e-bottomleft:before {
        content: "\e672";
    }

    .e-grid .e-form-toggle-icon.e-topright:before {
        content: "\e671";
    }

    .e-grid .e-form-toggle-icon {
        display: inline-block;
        height: 20px;
        width: 20px;
    }

    .e-grid .e-editedbatchcell {
        padding: 1px 3px;
    }

    .e-grid td.e-editedbatchcell.e-boolrowcell {
        padding-bottom: 0px;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0.7em;
    }

    .e-grid .e-detailrowcollapse, .e-grid .e-detailcell, .e-grid tr.e-editedrow td.e-rowcell {
        border-top-width: @border-size;
        border-top-style: @border-type;
    }

    .e-grid .e-hscrollcss, .e-grid .e-detailindentcell {
        border-right-width: @border-size;
        border-right-style: @border-type;
    }

    .e-grid .e-gridheader {
        border-top-width: @border-size;
        border-top-style: @border-type;
    }

    .e-grid .e-lastgrouptopleftcell {
        border-right: 0 none;
    }

    .e-grid .e-detailrowcollapse + td,
    .e-grid .e-detailrowexpand + td {
        border-left: none;
    }

    .e-grid .e-gridcontent .e-detailrowvisible {
        border-left: none;
    }


    .e-grid .e-pagermsgdiv {
        padding-left: 9px;
        padding-top: 0;
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }

    .e-grid .e-inlineform-titlebar {
        border-bottom-width: 1px;
        border-style: solid;
        border-width: 0 0 1px 0;
    }

    .e-grid .e-inlineformedit form {
        padding-left: 10px;
        padding-top: 10px;

        & when (@skin= "office-365") {
            padding-left: 0;
            padding-top: 0;
            margin-left: 6px;
        }
    }

    .e-grid .e-inlineformedit .e-editform-btn {
        padding-top: 0;
    }

    .e-grid .e-movablecontent,
    .e-grid .e-movableheader {
        border-left: 1px solid;
    }

    .e-grid .e-frozeny {
        border-bottom: 1px solid !important;
    }

    .e-grid .e-movablecontent,
    .e-grid .e-movableheader,
    .e-grid .e-movablefooter {
        overflow: hidden;
    }

    .e-grid .e-frozencontentdiv,
    .e-grid .e-frozenheaderdiv,
    .e-grid .e-frozenfooterdiv {
        float: left;
    }

    .e-grid .e-frozenunbound {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .e-grid .e-error div.e-field-validation-error {
        & when not (@skin= "material") {
            border-radius: 7px;
            font-size: 14px;
            padding: 7px;
            text-align: left;
        }

        & when (@skin= "material") {
            border-radius: 2px;
            font-size: 10px;
            padding: 7px;
            text-align: left;
        }

        & when (@skin= "material") {
            border-radius: 0px;
            font-size: 12px;
            padding: 15px;
            text-align: left;
        }
    }

    .e-grid div.e-error .e-toparrow.e-bottomarrow {
        border-color: #fffe92 transparent transparent;
        border-top-width: 10px;
    }

    .e-grid .e-hide {
        display: none !important;
    }

    .e-grid .emptyrecord {
        white-space: nowrap;
    }

    .e-grid .e-frozeny {
        border-bottom-width: 1px !important;
        border-bottom-style: solid !important;
    }

    .e-grid .e-frozenrow + tr > td,
    .e-grid .e-content .e-frozenrow + tr > td {
        border-top-width: 0px;
    }

    .e-grid .e-widget .e-select .e-icon:before {
        display: block;
    }

    .e-grid .e-icon:before,
    .e-grid form .e-templatecell .e-icon:before {
        display: inline-block;
    }

    .e-grid .e-updatedtd:before {
        float: left;
        margin-left: -11px;
        margin-top: -14px;
        text-align: left;
        font-family: 'ej-webfont';
        color: red;
    }

    .e-grid .e-boolrowcell.e-updatedtd:before {
        float: left;
        margin-left: -1px;
        margin-top: -12px;
        text-align: left;
        width: 0px;
        font-family: 'ej-webfont';
        color: red;
    }

    .e-grid .e-excelfilter .e-ejinputtext::-ms-clear {
        display: none;
    }

    .e-grid .e-toolbar.e-toolbarspan .e-ejinputtext::-ms-clear {
        display: none;
    }

    .e-grid .e-toolbar.e-toolbarspan .e-gridsearchbar {
        box-sizing: content-box;
    }

    .e-grid form .e-icon:before {
        display: block;
    }

    .e-grid .e-icon.e-animatebutton {
        font-size: 10px;
    }

    .e-grid .e-icon.e-gdiagonalnext {
        & when not (@skin= "material") {
            margin-left: 11px;
        }

        font-size: 8px;
        margin-top: 12px;

        & when (@skin= "material") {
            margin-left: 24px;
        }

        & when (@skin= "office-365") {
            margin: 10px 7px -16px;
        }
    }

    .e-grid .e-icon.e-gnextforward {
        font-size: 10px;
        font-size: 10px;

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

        margin-top: 10px;

        & when (@skin= "material") {
            margin-left: 24px;
        }

        & when (@skin= "office-365") {
            font-size: 8px;
            margin: 10px 7px -16px;
        }
    }

    .e-grid .e-groupheadercell .e-cancel {
        padding-right: 11px;

        & when (@skin= "office-365") {
            margin-left: 8px;
            padding-right: 0;
            padding-top: 4px;
        }
    }

    .e-grid .e-groupheadercell .e-icon:before {
        display: inline;
    }

    .e-grid .e-filterbarcell .e-icon:before, .e-grid .e-dialog .e-icon:before {
        display: block;
    }

    .e-grid .e-toolbaricons.e-searchfind {
        padding-left: 6px;

        & when (@skin= "office-365") {
            padding-top: 1px;
            padding-left: 2px;
        }
    }

    .e-grid .e-gridtoolbar .e-ejinputtext {
        vertical-align: middle;

        & when not(@skin= "material") {
            text-indent: 10px;
        }

        & when (@skin= "material") {
            text-indent: 0px;
        }

        & when (@skin= "office-365") {
            padding-top: 2px;
            padding-bottom: 2px;
            text-indent: 0px;
        }
    }

    .e-grid .e-rowcell.e-updatedtd {
        font-size: @font-size;
        font-family: @font-family;
    }

    .e-grid .e-dlgBtns .e-button {
        cursor: pointer;
        overflow: hidden;
        text-align: center;
        text-decoration: none;
        margin: 0;
    }

    .e-grid.e-columnChooser .e-columnChooserListDiv * {
        box-sizing: content-box;
    }
    /*-------------- grid rtl----------------*/
    .e-grid.e-rtl {
        direction: rtl;
    }

    .e-grid.e-rtl .e-groupheadercell .e-icon:before {
        display: inline-block;
    }

    .e-grid.e-rtl .e-groupheadercell .e-cancel {
        padding-left: 23px;
        padding-right: 0px;
        padding-top: 2px;
    }

    .e-grid.e-rtl .e-gridtoolbar li a {
        padding-right: 5px;
        padding-left: 0px;
    }

    .e-grid.e-rtl .e-gridtoolbar li {
        padding: 4px 4px 4px 0;
    }

    .e-grid.e-rtl .e-headercell .e-descending,
    .e-grid.e-rtl .e-headercell .e-ascending{
        padding-right: 7px;
    }
    .e-grid.e-rtl .e-headercell .e-toggleungroup,    
    .e-grid.e-rtl .e-headercell .e-togglegroup {
        margin: -15px 0px -1px -22px;
        width:16px;
        height:16px;
    }
    .e-grid.e-rtl .e-headercell .e-rtltoggle {
        margin-left: -25px;
    }
    .e-grid.e-rtl .e-headercellgroupfilter,
    .e-grid.e-rtl .e-headercellgroup {
        padding-right: 25px;
        padding-left: 40px;
    }

    .e-grid.e-rtl .e-icon.e-gdiagonalnext {
        margin-right: 9px;
    }

    .e-grid .e-icon.e-gnextforward {
        margin-right: 10px;
    }

    .e-grid.e-rtl .e-groupheadercell, .e-grid.e-rtl .e-groupheadercell:hover {
        margin-right: 10px;
    }

    .e-grid .e-rtl a, .e-grid.e-rtl .e-groupheadercell, .e-grid.e-rtl .e-groupheadercell:hover {
        float: right;
    }

    .e-grid.e-rtl .e-scrollcss > .e-headercontent {
        border-left-width: @border-size;
        border-left-style: @border-type;
    }

    .e-grid.e-rtl .e-headercontent {
        border-right-width: 0px;
    }

    .e-grid.e-rtl .e-headercell .e-filtericon, .e-grid.e-rtl .e-headercell .e-filteredicon {
        margin: -17px -1px -1px -25px;
    }
    .e-grid.e-rtl .e-headercell .e-groupfiltericon {
        margin-left: -40px;
    }
    .e-grid.e-dlgcontainer .e-dlgBtns .e-filter.e-rtl {
        margin-left: 6%;
        width: 47%;
        margin-right: 0px;
    }

    .e-grid.e-rtl .e-rowcell, .e-grid.e-rtl .e-filterbarcell, .e-grid.e-rtl .e-filterbarcelldisabled {
        border-width: @border-size @border-size 0 0;
    }

    .e-grid.e-rtl .e-lastrowcell {
        border-bottom-width: @border-size;
    }

    .e-grid.e-rtl .e-filterbarcell,
    .e-grid.e-rtl .e-filterbarcelldisabled {
        padding-left: 9px;
        padding-right: 7px;
    }

    .e-grid.e-rtl tr td:first-child, .e-grid.e-rtl tr th:first-child {
        border-right: 0 none;
    }

    .e-grid.e-rtl .e-indentcell {
        border-left-width: @border-size;
        border-left-style: @border-type;
    }

    .e-grid.e-rtl .e-headercell {
        border-width: 0px @border-size 0px 0px;
        padding-right: 25px;
    }

    .e-grid.e-rtl .e-reorderindicate {
        border-left-width: 3px;
    }

    .e-grid.e-rtl .e-cloneproperties {
        border-width: @border-size @border-size 3px @border-size;
    }

    .e-grid.e-rtl div.e-pagermsgdiv {
        padding-left: 6px;
        text-align: left;
    }

    .e-grid .e-pager.e-rtl .e-pagercontainer {
        float: none;
    }

    .e-grid .e-rtl .e-parentmsgbar {
        float: left;
        padding-left: 6px;
    }

    .e-grid.e-rtl .e-headercelldiv {
        text-align: right;
        padding: 0 0.7em;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        margin-right: -25px;

        & when (@skin= "office-365") {
            padding: 0 0.5em;
        }
    }

    .e-grid.e-rtl .e-headercelldiv:not(:only-child) {
        text-align: right;
        padding: 0 9.8px 0 9.8px;
    }
    .e-grid.e-rtl .e-headercellsort {
        padding-left : 40px;
    }
    .e-grid.e-rtl .e-headercellsortfilter:not(:only-child) {
        padding: 0 9.8px 0 28px;
    }
    .e-grid.e-rtl .e-headercelldivgroup:not(:only-child) {
        padding: 0 0.7em 0 0.7em;
    }
    .e-grid.e-rtl .e-headercelldivsortgroupfilter:not(:only-child) {
        padding: 0 0.7em 0 2em;
    }
    .e-grid.e-rtl .e-recordpluscollapse > div:before, .e-grid.e-rtl .e-detailrowcollapse > div:before {
        content: "\e623";
    }

    .e-grid.e-rtl .e-recordplusexpand > div:before, .e-grid.e-rtl .e-detailrowexpand > div:before {
        content: "\e624";
    }

    .e-grid.e-rtl .e-headercell .e-filtericon, .e-grid.e-rtl .e-headercell .e-filteredicon, .e-grid.e-rtl .e-headercell .e-togglegroup, .e-grid.e-rtl .e-headercell .e-toggleungroup, .e-grid.e-rtl .e-animatebutton, .e-grid.e-rtl .e-ungroupbutton {
        float: left;
    }

    .e-grid.e-rtl .e-filterbarcell input {
        float: right;
        margin-right: 4px;
    }

    .e-grid.e-rtl .e-scrollcss {
        padding-right: 0px;
        padding-left: 17px;
    }

    .e-grid .e-widget .e-pager.e-rtl {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    .e-grid.e-rtl .e-grid-filterstatusbar .e-msgdiv, .e-grid.e-rtl .e-grid-filterstatusbarbottom .e-msgdiv {
        margin-right: 5px;
    }

    .e-grid.e-rtl .e-animatebutton {
        padding-left: 26px;
        padding-right: 0px;

        & when (@skin= "office-365") {
            padding-left: 46%;
        }
    }

    .e-grid.e-rtl .e-frozencontentdiv,
    .e-grid.e-rtl .e-frozenheaderdiv,
    .e-grid.e-rtl .e-frozenfooterdiv {
        float: right;
    }

    .e-grid.e-rtl .e-movablecontent,
    .e-grid.e-rtl .e-movableheader {
        border-left-width: 0px;
        border-right: 1px solid;
    }

    .e-grid.e-rtl .e-frozenrow + tr > td {
        border-top-width: 0px;
    }

    .e-grid.e-rtl .e-filterdiv:not(.e-fltrtempdiv) input {
        padding-left: 15%;
        padding-right: 3%;
        width: 75%;
    }

    .e-grid.e-rtl .e-filterdiv:not(.e-fltrtempdiv) span {
        right: 78%;
    }

    .e-grid.e-rtl .e-gridcontent .e-detailrowvisible {
        border-right: none;
    }

    .e-grid .e-scroller.e-rtl .e-columnChooserListDiv > label, .e-grid .e-scroller.e-rtl > #nomatches, .e-grid.e-rtl .e-searchcontainer {
        margin-right: 15px;
        margin-left: 0px;
    }

    .e-grid.e-rtl .e-checkboxlist.e-scroller.e-rtl .e-content > .e-ftrchk label, .e-grid.e-rtl .e-checkboxlist.e-scroller.e-rtl .e-content > .e-ftrchk, .e-grid.e-rtl .e-excelfilter .e-checkboxlist .e-ftrchk {
        margin-right: 10px;
    }

    .e-grid.e-rtl .e-excelfilter .e-menu.e-vertical.e-rtl .e-list {
        height: 27px;
    }

    .e-grid.e-rtl .e-excelfilter .e-menu.e-vertical.e-rtl .e-list.e-separator {
        height: 1px;
    }

    .e-grid.e-rtl .e-excelfilter .e-menu.e-rtl .e-list > ul li.e-separator {
        margin: 2px 0px 2px 0;
    }

    .e-grid.e-rtl .e-excelfilter .e-menu.e-rtl.e-vertical .e-list > ul .e-list > a {
        padding: 0px 22px 0px 15px;
    }

    .e-grid.e-rtl .e-excelfilter .e-searchbox .e-icon.e-search, .e-grid.e-rtl .e-excelfilter .e-searchbox .e-icon.e-cancel {
        position: absolute;
        right: 215px;
    }

    .e-grid.e-columnChooser .e-searchbox span.e-rtl {
        position: absolute;
        right: 189px;
    }

    .e-grid.e-rtl .e-excelfilter .e-menu.e-rtl .e-list > a span.e-filternone.e-icon, .e-grid.e-rtl .e-excelfilter .e-menu.e-rtl .e-list > a span.e-sortdesc.e-icon, .e-grid.e-rtl .e-excelfilter .e-menu.e-rtl .e-list > a span.e-sortasc.e-icon, .e-grid.e-rtl .e-excelfilter .e-menu.e-rtl .e-list > a span.e-exceltick.e-icon {
        right: 0px;
    }

    .e-grid.e-rtl .e-menu .e-list > a span.e-icon.e-arrowhead-right {
        right: 224px;
    }

    .e-grid .e-columnheader .e-headercelldiv.e-nwrap, .e-grid .e-rowcell.e-nwrap, .e-grid.e-responsive .e-rowcell.e-nwrap, .e-grid .e-columnheader .e-headercelldiv.e-nwrap, .e-grid .e-gridcontent .e-rowcell.e-nwrap, .e-grid.e-responsive .e-gridcontent .e-rowcell.e-nwrap {
        white-space: nowrap;
    }
}

.e-heatmap.e-js.e-grid .e-headercell {

    & when (@skin= "material") {
        border: none;
    }
}

.e-heatmap.e-js.e-grid .e-headercontent {
    & when (@skin= "material") {
        border-right: none;
    }
}

.e-heatmap.e-js.e-grid .e-frozenheaderdiv .e-headercell.e-default.e-headertemplate {
    & when (@skin= "material") {
        border: none;
    }
}

.e-heatmap.e-js.e-grid .e-movableheader {
    & when (@skin= "material") {
        border: none;
    }
}

.e-heatmap.e-js.e-grid .e-headercell.e-default.e-headertemplate {
    & when (@skin= "material") {
        border-bottom: none;
    }
}

.e-heatmap.e-js.e-grid .e-headercell {
    & when (@skin= "material") {
        border-color: #c8c8c8;
        border-left: 1px solid;
    }
}

.e-heatmap.e-js.e-grid .e-rowcell {
    & when (@skin= "material") {
        /*material*/
        border-width: @border-size 0 0 @border-size;
        padding: 0.7em;
        line-height: 14px;
        color: rgba(0, 0, 0, 0.84);
        font-size: 12px;
    }
}

.mixin(@widget) when (@widget = pager), (@widget = none) {
    /*---------------------Pager core ------------------------*/
     .e-pager,  .e-grid .e-pagerstatusbar {
        border-style: @border-type;
        border-width: @border-size;
        padding-bottom: 9px;
        padding-top: 9px;
        width: 100%;
        white-space: normal;
    }

     .e-grid .e-pagerstatusbar,
     .e-grid .e-pager {
        border-width: @border-size 0px 0px;
    }

     .e-grid .e-widget .e-pagercontainer > .e-icon {
        box-sizing: content-box;
    }

     .e-pager div.e-parentmsgbar {
        & when (@skin= "material") {
            /*material*/
            padding-right: 24px;
            padding-top: 11px;
        }

        & when (@skin= "office-365") {
            padding-top: 10px;
            padding-right: 10px;
            margin-right: 10px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding-right: 6px;
            padding-top: 4px;
        }

        float: right;
    }

     .e-pager .e-pagerstatusbar {
        padding-bottom: 9px;
    }

     .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-icon {
        display: inline-block;
        box-sizing: content-box;
    }

     .e-pager .e-icon {
        & when (@skin= "material") {
            font-size: 13px;
            vertical-align: top;
            line-height: 10px;
            position: relative;
        }

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

        & when not (@skin= "material") and not (@skin="office-365") {
            font-size: 10px;
        }
    }

     .e-pager .e-numeric.e-gototextbox {
        margin: 5px;
    }

     .e-pager .e-numericitem {
        border-right-width: @border-size;
        border-right-style: @border-type;
        display: inline-block;
        min-width: 22px;
        text-align: center;
        line-height: 1;
    }

     .e-pager .e-NP {
        position: relative;
    }

     .e-pager div.e-pagermsgdiv {
        padding-right: 6px;
        padding-top: 4px;
        text-align: right;
    }

     .e-pager .e-firstpagedisabled,
     .e-pager .e-prevpagedisabled,
     .e-pager .e-nextpagedisabled,
     .e-pager .e-lastpagedisabled {
        /* IE 8 */
        -ms-filter: "progid:DXImageTraneorm.Microsoft.Alpha(Opacity=30)";
        /* IE 5-7 */
        filter: alpha(opacity=30);
        /* Netscape */
        -moz-opacity: 0.3;
        /* Safari 1.x */
        -khtml-opacity: 0.3;
        /* Good browsers */
        opacity: 0.3;
    }

     .e-pager .e-spacing,
     .e-pager .e-numericitem:hover,
     .e-pager .e-currentitem.e-active {
        & when (@skin= "material") {
            /*material*/
            padding: 6px 1px 6px 1px;
        }

        & when (@skin= "office-365") {
            padding: 0;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding: 6px 1px 7px 2px;
        }

        cursor: pointer;
        text-decoration: none;
    }

     .e-pager.e-disable .e-spacing,
     .e-pager.e-disable .e-numericitem:hover,
     .e-pager.e-disable .e-currentitem.e-active,  .e-pager.e-disable .e-nextpage:hover,  .e-pager.e-disable .e-lastpage:hover {
        cursor: default;
    }


     .e-pager .e-customtext .e-spacing,
     .e-pager .e-customtext .e-numericitem:hover,
     .e-pager .e-customtext .e-currentitem.e-active {

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding: 8px;
        }
    }

     .e-pager .e-currentitem.e-active {
        border-width: @border-size;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
    }

     .e-pager div,
     .e-pager a {
        display: inline;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        user-select: none;

        & when (@skin= "office-365") {
            display: inline-block;
        }
    }

     .e-pager .e-icon:before {
        display: inline-block;
    }

     .e-pager .e-firstpage,
     .e-pager .e-prevpage,
     .e-pager .e-firstpagedisabled,
     .e-pager .e-prevpagedisabled,
     .e-pager .e-nextpage,
     .e-pager .e-lastpage,
     .e-pager .e-nextpagedisabled,
     .e-pager .e-lastpagedisabled {
        & when (@skin= "material") {
            /*material*/
            border-right-width: 0px;
            min-width: 13px;
        }

        & when not (@skin= "material") {
            /*other*/
            border-right-width: @border-size;
            min-width: 17px;
        }

        padding: 9px 3px 8px 8px;
        border-right-style: @border-type;
    }

     .e-pager .e-pagercontainer {
        overflow: hidden;
    }

     .e-pager .e-lastpage,  .e-pager .e-lastpagedisabled {
        border-right: none;
    }

     .e-pager .e-disableditem {
        height: 10px;
    }

     .e-pager .e-firstpage:hover,
     .e-pager .e-prevpage:hover,
     .e-pager .e-lastpage:hover,
     .e-pager .e-nextpage:hover {
        cursor: pointer;
    }

     .e-pager a.e-nextprevitemdisabled {
        display: none;
        padding-right: 5px;
        padding-left: 5px;
        margin-right: @border-size;
        margin-left: @border-size;
        text-decoration: none;
    }

     .e-pager .e-pagercontainer {
        border-width: @border-size;
        border-style: @border-type;
        border-radius: 4px 4px 4px 4px;
        margin: 0 6px 0 6px;

        @media (max-width: 270px) {
            min-width: 200px;
        }

        & when (@skin= "office-365") {
            margin: 0 6px 0 10px;
        }
    }

     .e-pager .e-nextpage.e-hover,
     .e-pager .e-lastpage.e-hover,
     .e-pager .e-firstpage.e-hover,
     .e-pager .e-prevpage.e-hover {
        cursor: pointer;
        text-decoration: none;
    }

     .e-pager .e-lastpage.e-hover {
        border-radius: 0px 4px 4px 0px;
    }

     .e-pager .e-firstpage.e-hover {
        border-radius: 4px 0px 0px 4px;
    }

     .e-pager.e-rtl {
        direction: rtl;
    }

     .e-pager.e-rtl .e-pagercontainer, .e-pager.e-rtl div, .e-pager.e-rtl a {
        & when (@skin= "material") {
            float: none;
        }

        & when (@skin= "office-365") {
            float: none;
        }

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

     .e-pager .e-pagermessage {
        display: block;
        margin: 6px;
    }

     .e-grid .e-pagerfiltermsg {
        display: block;
        margin: 6px 0px 6px;
        padding-left: 9px;
    }

     .e-pager.e-rtl .e-pagercontainer {
        float: right;
        margin-right: 6px;
        padding: 0px;

        & when (@skin= "office-365") {
            margin-right: 10px;
        }
    }

     .e-pager.e-rtl .e-firstpage,
     .e-pager.e-rtl .e-prevpage,
     .e-pager.e-rtl .e-firstpagedisabled,
     .e-pager.e-rtl .e-prevpagedisabled,
     .e-pager.e-rtl .e-nextpage,
     .e-pager.e-rtl .e-lastpage,
     .e-pager.e-rtl .e-nextpagedisabled,
     .e-pager.e-rtl .e-lastpagedisabled {
        padding: 8px 8px 2px 2px;
        -webkit-padding-after: 2px;

        & when (@skin= "material") {
            height: 12px;
            width: 14px;
        }

        & when (@skin= "office-365") {
            padding: 0;
            -webkit-padding-after: 0px;
        }
    }

     .e-pager.e-rtl .e-firstpage:before,
     .e-pager.e-rtl .e-firstpagedisabled:before {
        & when (@skin= "material") {
            content: "\e841";
        }

        & when (@skin= "office-365") {
            content: "\e841";
        }

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

     .e-pager.e-rtl .e-prevpage:before,
     .e-pager.e-rtl .e-prevpagedisabled:before {
        & when (@skin= "material") {
            content: "\e840";
        }

        & when (@skin= "office-365") {
            content: "\e840";
        }

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

     .e-pager.e-rtl .e-nextpage:before,
     .e-pager.e-rtl .e-nextpagedisabled:before {
        & when (@skin= "material") {
            content: "\e83f";
        }

        & when (@skin= "office-365") {
            content: "\e83f";
        }

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

     .e-pager.e-rtl .e-lastpage:before,
     .e-pager.e-rtl .e-lastpagedisabled:before {
        & when (@skin= "material") {
            content: "\e83e";
        }

        & when (@skin= "office-365") {
            content: "\e83e";
        }

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

     .e-pager .e-NP.e-numericitem.e-animate:after,  .e-pager .e-PP.e-numericitem.e-animate:after,
     .e-pager .e-icon.e-animate.e-disable:after,  .e-pager .e-numericitem.e-animate.e-disable:after {
        & when (@skin= "material") {
            background: none;
        }
    }

     .e-pager .e-icon.e-animate:after {
        & when (@skin= "material") {
            background: rgba(0,0,0,.12);
        }
    }

     .e-pager .e-numericitem.e-animate:after {
        & when (@skin= "material") {
            background: rgba(255,255,255,0.87);
        }
    }

     .e-pager.e-rtl .e-nextpage,
     .e-pager.e-rtl .e-nextpagedisabled,
     .e-pager.e-rtl .e-prevpage,
     .e-pager.e-rtl .e-prevpagedisabled,
     .e-pager.e-rtl .e-firstpage,
     .e-pager.e-rtl .e-firstpagedisabled {
        & when (@skin= "material") {
            /*material*/
            border-left-width: 0px;
        }

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

        border-left-style: @border-type;
    }

     .e-pager.e-rtl .e-nextpage,
     .e-pager.e-rtl .e-nextpagedisabled,
     .e-pager.e-rtl .e-prevpage,
     .e-pager.e-rtl .e-prevpagedisabled {
        border-right-width: 0px;
        border-right-style: none;
    }

     .e-pager.e-rtl .e-firstpage,  .e-pager.e-rtl .e-firstpagedisabled {
        border-right: medium none;
    }

     .e-pager.e-rtl .e-firstpage:hover {
        & when (@skin= "material") {
            border-radius: 50%;
        }

        & when (@skin= "office-365") {
            border-radius: 0;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            border-radius: 0px 4px 4px 0px;
        }
    }

     .e-pager.e-rtl .e-lastpage.e-hover {
        & when (@skin= "material") {
            border-radius: 50%;
        }

        & when (@skin= "office-365") {
            border-radius: 0;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            border-radius: 4px 0px 0px 4px;
        }
    }

     .e-pager.e-rtl .e-numericcontainer {
        float: none;
    }

     .e-pager.e-rtl .e-numericitem {
        border-right-width: 0px;
        border-right-style: none;
        border-left-style: solid;

        & when (@skin= "material") {
            /*material*/
            border-left-width: 0px;
        }

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

     .e-pager.e-rtl .e-numericitem {
        min-width: 25px;
    }

     .e-pager.e-rtl .e-spacing,
     .e-pager.e-rtl .e-numericitem:hover,
     .e-pager.e-rtl .e-currentitem.e-active {
        & when (@skin= "material") {
            padding: 6px 1px 6px;
        }

        & when (@skin= "office-365") {
            padding: 0;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            padding: 6px 1px 7px;
        }
    }

     .e-pager .e-mediaback:before {
        & when (@skin= "material") {
            content: "\e83e";
        }

        & when (@skin= "office-365") {
            content: "\e83e";
        }
    }

     .e-pager .e-arrowheadleft-2x:before {
        & when (@skin= "material") {
            content: "\e83f";
        }

        & when (@skin= "office-365") {
            content: "\e83f";
        }
    }

     .e-pager .e-arrowheadright-2x:before {
        & when (@skin= "material") {
            content: "\e840";
        }

        & when (@skin= "office-365") {
            content: "\e840";
        }
    }

     .e-pager .e-mediaforward:before {
        & when (@skin= "material") {
            content: "\e841";
        }

        & when (@skin= "office-365") {
            content: "\e841";
        }
    }

    .e-pager .e-pagercontainer {
        float: left;
    }

     .e-grid .e-pagercontainer {
        float: none;
    }

     .e-pager div.e-pager-goto-res {
        margin-top: 4px;
        float: left;
    }

    .e-grid .e-pager div.e-pager-goto-res {
        float: none;
    }

     .e-pager div.e-parentmsgbar.e-msg-res {
        margin-top: 1px;
    }

     .e-pager .e-parentmsgbar.e-msg-res {
        float: left;
        padding-left: 5px;
    }

     .e-pager input.e-textbox.e-pager-goto-res {
        margin-top: 0px;
    }

     .e-pager input.e-textbox {
        margin-top: -4px;
        margin-right: 10px;
    }


     .e-pager div.e-drpdwndiv {
        border: 1px solid;
        overflow: hidden;
        height: 26px;
        width: 50px;
        position: relative;
        display: inline-block;
        overflow: visible;
        border-radius: 4px 4px 4px 4px;

        &when(@skin="office-365") {
            height: 32px;
        }
    }

     .e-pager .e-drpdwn {
        border: 1px solid;
        font-size: 16px;
        width: 50px;
        font-family: @font-family;
        font-size: 13px;
        position: absolute;
        top: 28px;

        &when(@skin="office-365") {
            top: 32px;
        }
    }

     .e-pager .e-drpdwn li {
        padding: 5px;
        width: 40px;
    }

    .e-pager div.e-drpdwndiv:before {
        padding: 9px 0px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
        text-align: center;
        width: 40%;
        height: 100%;
        pointer-events: none;
        box-sizing: border-box;
        border-radius: 4px 4px 4px 4px;

        &when(@skin="office-365") {
            padding: 0px;
        }
    }

     .e-pager .e-pager-itemsinterval span.e-text {
        height: 28px;
        line-height: 25px;
        padding-left: 25%;
        font-family: @font-family;
        font-size: 13px;
        position: absolute;

        &when(@skin="office-365") {
            padding-left: 0;
            margin-left: -25%;
        }
    }

     .e-pager.e-rtl .e-pager-itemsinterval span.e-text {
        position: inherit;
        float: left;

        &when(@skin="office-365") {
            padding-left: 12.5;
            margin-left: 0px;
        }
    }

     .e-pager .e-pager-itemsinterval {
        display: inline-block;
        height: 28px;
        padding-left: 5px;
    }

    @media (max-width: 270px) {
         .e-pager.e-js {
            min-width: 177px;
        }
    }

    .e-pager .e-pager-itemsinterval .e-interval-msg.e-interval-msg {
        float: right;
        margin: 0px 5px;
        line-height: 28px;
    }
    .e-pager .e-numericitem.e-spacing , .e-pager .e-mediaback , .e-pager .e-arrowheadleft-2x , .e-pager .e-arrowheadright-2x , .e-pager .e-mediaforward, .e-pager .e-newrecord.e-icon.e-plus {
     & when (@skin= "material") {   
         box-sizing: content-box;
     }
    }

}

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

    .e-rotator-wrap {
        position: relative;
        display: block;
        direction: ltr;
    }

    .e-rotator-wrap .e-in-wrap {
        border: medium none;
        overflow: visible;
    }

    .e-rotator-wrap .e-in-wrap .e-inner {
        position: relative;
        overflow: hidden;
    }

    .e-rotator-wrap .e-in-wrap.e-multiple {
        padding: 4px;
        border: 1px solid;
    }

    .e-rotator-wrap .e-in-wrap .e-single {
        border: 1px solid;
    }

    .e-rotator-wrap .e-in-wrap .e-inner > ul {
        position: relative;
        width: 1200px;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    .e-rotator-wrap .e-in-wrap .e-inner.e-horizontal > ul > li {
        float: left;
    }

    .e-rotator-wrap .e-in-wrap .e-nav .e-nav-btn {
        height: 40px;
        width: 40px;
        opacity: 0.80;
        filter: alpha(opacity=80);
        position: absolute;
        top: 44%;
        display: none;
        background-repeat: no-repeat;
        cursor: pointer;

        & when (@skin= "office-365") {
            opacity: 0.40;
        }
    }

    .e-rotator-wrap .e-in-wrap .e-nav .e-nav-btn:hover {
        & when (@skin= "office-365") {
            opacity: 0.70;
        }
    }

    .e-rotator-wrap .e-in-wrap .e-nav .e-next {
        right: 2%;

        & when (@skin= "office-365") {
            right: 15px;
        }
    }

    .e-rotator-wrap .e-in-wrap .e-nav .e-previous {
        left: 2%;

        & when (@skin= "office-365") {
            left: 15px;
        }
    }

    .e-rotator-wrap .e-in-wrap .e-nav .e-next:before, .e-rotator-wrap .e-in-wrap .e-nav .e-previous:before {
        width: 40px;
        height: 40px;
    }

    .e-rotator-wrap .e-in-wrap .e-nav .e-next, .e-rotator-wrap .e-in-wrap .e-nav .e-previous {
        top: 47%;
        font-size: 40px;
    }

    .e-rotator-wrap .e-in-wrap .e-nav .play, .e-rotator-wrap .e-in-wrap .e-nav .pause {
        height: 66px;
        width: 66px;
        left: 46%;
    }

    .e-rotator-wrap .e-in-wrap .e-nav .play:before, .e-rotator-wrap .e-in-wrap .e-nav .pause:before {
        height: 60px;
        width: 60px;
        font-size: 60px;
    }

    .e-rotator-wrap .e-nav .e-nav-btn.e-show {
        visibility: visible;
    }

    .e-rotator-wrap .e-nav .e-nav-btn.e-hide {
        visibility: hidden;
    }

    .e-rotator-wrap .e-pager-wrap {
        display: block;
        text-align: center;
    }

    .e-rotator-wrap .e-pager-wrap .e-bullet {
        margin: 0px;
        padding: 10px;
        position: absolute;
    }

    .e-rotator-wrap .e-pager-wrap .e-bullet.default {
        left: 45%;
    }

    .e-rotator-wrap .e-pager-wrap .e-bullet > li {
        border-radius: 20px;
        display: inline-block;
        list-style-type: none;
        width: 10px;
        height: 10px;
        margin: 3px;
        background-repeat: no-repeat;
        background-position: 0 5px;
        cursor: pointer;

        & when (@skin= "office-365") {
            width: 12px;
            height: 12px;
            margin: 3px 4px;
            border: none;
        }

        & when not (@skin= "office-365") {
            border: 1px solid;
        }
    }

    .e-rotator-wrap .e-pager-wrap .e-bullet > li:hover, .e-rotator-wrap .e-pager-wrap .e-bullet > li.e-active {
        & when (@skin= "office-365") {
            border: none;
        }

        & when not (@skin= "office-365") {
            border: 1px solid;
        }
    }

    .e-rotator-wrap .e-pager-wrap .e-bullet {
        position: absolute;
    }

    .e-rotator-wrap .e-pager-wrap .e-bullet.e-topleft {
        left: 0;
        top: 0;
    }

    .e-rotator-wrap .e-pager-wrap .e-bullet.e-topright {
        right: 0;
        top: 0;
    }

    .e-rotator-wrap .e-pager-wrap .e-bullet.e-topCenter {
        left: 42%;
        top: 0;
    }

    .e-rotator-wrap .e-pager-wrap .e-bullet.e-bottomleft {
        bottom: 0;
        left: 0;
    }

    .e-rotator-wrap .e-pager-wrap .e-bullet.e-bottomright {
        bottom: 0;
        right: 0;
    }

    .e-rotator-wrap .e-pager-wrap .e-bullet.e-thumb-pos {
        bottom: 29%;
    }

    .e-rotator-wrap .e-pager-wrap .e-bullet.e-outside {
        margin: auto;
        position: relative;
    }

    .e-rotator-wrap .e-thumb {
        position: relative;
        overflow: hidden;
        margin: 2% 10%;
    }

    .e-rotator-wrap .e-thumb .e-thumb-items {
        position: relative;
        width: 1200px;
        height: 200px;
        left: 0;
        overflow: hidden;
    }

    .e-rotator-wrap .e-thumb .e-thumb-items li {
        float: left;
        list-style: none outside none;
        margin: 5px;
        position: relative;
        left: 0;
        overflow: hidden;
    }

    .e-rotator-wrap .e-thumb .e-thumb-items li img {
        width: 135px;
        height: 85px;
    }

    .e-rotator-wrap .e-thumb .e-thumb-items li:hover, .e-rotator-wrap .e-thumb .e-thumb-items li.e-active, .e-rotator-wrap .e-thumb .e-thumb-items li.e-thumbhover, .e-rotator-wrap.e-disable .e-thumb .e-thumb-items li.e-active:hover {
        border: 3px solid;
        padding: 4px;
    }

    .e-rotator-wrap .e-thumb .e-thumb-items li, .e-rotator-wrap.e-disable .e-thumb .e-thumb-items li:hover, .e-rotator-wrap.e-disable .e-thumb .e-thumb-items li.e-thumbhover {
        border: 1px solid;
        padding: 6px;
    }

    .e-rotator-wrap .e-thumb-nav .e-thumb-btn {
        height: 30px;
        width: 30px;
        position: absolute;
        top: 84%;
        visibility: visible;
        background-repeat: no-repeat;
        cursor: pointer;
        font-size: 30px;

        & when (@skin= "office-365") {
            height: 40px;
            width: 40px;
        }
    }

    .e-rotator-wrap.e-disable .e-thumb-nav .e-thumb-btn {
        cursor: default;
    }

    .e-rotator-wrap .e-thumb-nav .e-thumb-btn.e-previous {
        left: 3%;
    }

    .e-rotator-wrap .e-thumb-nav .e-thumb-btn.e-next {
        right: 3%;
    }

    .e-rotator-wrap .e-inner .e-caption {
        bottom: 0;
        left: 0;
        opacity: 0.50;
        filter: alpha(opacity=50);
        position: absolute;
        height: 50px;
        width: 100%;
        display: none;
    }

    .e-rotator-wrap .e-inner .e-caption.e-hide {
        visibility: hidden;
    }

    .e-rotator-wrap .e-inner .e-caption.e-show {
        visibility: visible;
    }

    .e-rotator-wrap .e-inner .e-caption > span {
        font-family: icon;
        font-size: 22px;
        margin-left: 20px;
        margin-right: 20px;
        padding-top: 11px;
        position: absolute;
    }
}

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

    .e-groupbutton {
        outline: 0 none;
        overflow: hidden;
        display: block;
    }

    .e-groupbutton > .e-ul {
        cursor: default;
        list-style-type: none;
        vertical-align: middle;
        overflow: hidden;
        display: table;
        height: 100%;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0px;
    }

    .e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content .e-center {
        display: block;
        margin: 0 auto;
    }

    .e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content .e-inline {
        display: inline-block;
        vertical-align: middle;
    }

    .e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content {
        display: block;
        vertical-align: middle;
        padding: 0.5em;
        text-align: -moz-center;
        text-align: -webkit-center;
    }

    .e-groupbutton.e-no-border > .e-horizontal.e-ul {
        border-spacing: 1px 0;
    }

    .e-groupbutton > .e-horizontal.e-ul > .e-grp-btn-item {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
    }

    .e-groupbutton > .e-vertical.e-ul > .e-grp-btn-item {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .e-groupbutton.e-hidden, .e-groupbutton > .e-ul > .e-grp-btn-item.e-hidden {
        display: none;
    }

    .e-groupbutton > .e-horizontal.e-ul > .e-grp-btn-item {
        & when not(@skin="material") {
            border: 1px solid;
        }

        & when(@skin="material") {
            border: none;
        }
    }

    .e-groupbutton > .e-vertical.e-ul > .e-grp-btn-item {
        & when not(@skin="material") {
            border: 1px solid;
        }

        & when(@skin="material") {
            border: none;
        }
    }

    .e-groupbutton > .e-vertical.e-ul > .e-grp-btn-item.e-border-bottom {
        & when not(@skin="material") {
            border: 1px solid;
        }
    }

    .e-groupbutton.e-no-border, .e-groupbutton.e-no-border > .e-horizontal.e-ul > .e-grp-btn-item {
        border: none;
    }

    .e-groupbutton.e-no-border > .e-vertical.e-ul > .e-grp-btn-item {
        margin-bottom: 1px;
    }

    .e-groupbutton.e-no-border > .e-vertical.e-ul > .e-grp-btn-item.last {
        margin-bottom: 0;
    }

    .e-groupbutton.e-no-border.e-corner > .e-ul > .e-grp-btn-item {
        & when not(@skin="material") {
            border-radius: 4px 4px 4px 4px;
        }

        & when(@skin="material") {
            border-radius: 2px 2px 2px 2px;
        }
    }

    .e-groupbutton .e-grp-btn-item.e-hover * {
        cursor: pointer;
    }
    /* -------------------show rounder corener property------------------- */
    .e-groupbutton.e-corner > .e-ul > li.e-grp-btn-item:first-child {
        & when not(@skin="material") {
            border-radius: 4px 0px 0px 4px;
        }

        & when(@skin="material") {
            border-radius: 2px 0px 0px 2px;
        }
    }

    .e-groupbutton.e-corner > .e-ul > .e-grp-btn-item.last {
        & when not(@skin="material") {
            border-radius: 0px 4px 4px 0px;
        }

        & when(@skin="material") {
            border-radius: 0px 2px 2px 0px;
        }
    }

    .e-groupbutton.e-corner > .e-vertical.e-ul > li.e-grp-btn-item:first-child {
        & when not(@skin="material") {
            border-radius: 4px 4px 0px 0;
        }

        & when(@skin="material") {
            border-radius: 2px 2px 0px 0;
        }
    }

    .e-groupbutton.e-corner > .e-vertical.e-ul > .e-grp-btn-item.last {

        & when not(@skin="material") {
            border-radius: 0 0px 4px 4px;
        }

        & when(@skin="material") {
            border-radius: 0 0px 2px 2px;
        }
    }

    .e-groupbutton.e-rtl.e-corner > .e-ul > li.e-grp-btn-item:first-child {
        & when not(@skin="material") {
            border-radius: 0px 4px 4px 0;
        }

        & when(@skin="material") {
            border-radius: 0px 2px 2px 0;
        }
    }

    .e-groupbutton.e-rtl.e-corner > .e-ul > .e-grp-btn-item.last {
        & when not(@skin="material") {
            border-radius: 4px 0 0 4px;
        }

        & when(@skin="material") {
            border-radius: 2px 0 0 2px;
        }
    }

    .e-groupbutton.e-rtl.e-corner > .e-vertical.e-ul > li.e-grp-btn-item:first-child {
        & when not(@skin="material") {
            border-radius: 4px 0px 0px 4px;
        }

        & when(@skin="material") {
            border-radius: 2px 0px 0px 2px;
        }
    }

    .e-groupbutton.e-rtl.e-corner > .e-vertical.e-ul > .e-grp-btn-item.last {
        border-radius: 0px 0px 4px 4px;

        & when not(@skin="material") {
            border-radius: 4px 0px 0px 4px;
        }

        & when(@skin="material") {
            border-radius: 2px 0px 0px 2px;
        }
    }

    .e-grp-btn-mini {
        height: 28px;
        font-size: 12px;
    }

    .e-grp-btn-mini > .e-horizontal.e-ul > .e-grp-btn-item .e-btntxt {
        line-height: 0px;
    }

    .e-grp-btn-small > .e-horizontal.e-ul > .e-grp-btn-item .e-btntxt {
        line-height: 0px;
    }

    .e-grp-btn-medium > .e-horizontal.e-ul > .e-grp-btn-item .e-btntxt {
        line-height: 0px;
    }

    .e-grp-btn-large > .e-horizontal.e-ul > .e-grp-btn-item .e-btntxt {
        line-height: 0px;
    }

    .e-groupbutton.e-grp-btn-large > .e-ul > .e-grp-btn-item .e-btn-content {
        padding: 0px;
    }

    .e-groupbutton.e-grp-btn-small > .e-ul > .e-grp-btn-item .e-btn-content {
        padding: 0px;
    }

    .e-groupbutton.e-grp-btn-medium > .e-ul > .e-grp-btn-item .e-btn-content {
        padding: 0px;
    }

    .e-groupbutton.e-grp-btn-mini > .e-ul > .e-grp-btn-item .e-btn-content {
        padding: 0px;
    }

    .e-grp-btn-small {
        height: 32px;
        font-size: 13px;
    }

    .e-grp-btn-medium {
        height: 36px;
        font-size: 14px;
    }

    .e-grp-btn-large {
        height: 40px;
        font-size: 15px;
    }

    .e-groupbutton .e-grp-btn-item .e-icon {
        padding: 4px 3px;
        visibility: visible;
        vertical-align: middle;
    }

    .e-groupbutton .e-grp-btn-item .e-btntxt {
        width: auto;
        cursor: default;
        display: table-cell;
        vertical-align: middle;
        line-height: normal;
        padding: 2px;
    }

    .e-groupbutton .e-grp-btn-item {
        text-align: center;
    }

    .e-groupbutton > .e-ul > .e-grp-btn-item .e-btn-content {
        display: inline-block;
    }

    .e-groupbutton .e-grp-btn-link {
        display: block;
    }
}

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

    .e-fileexplorer {
        line-height: 1.428571429;
    }

    .e-fileexplorer, .e-fileexplorer .e-treeview .e-fe-node-hover, .e-fileexplorer input,  input.e-fe-dialog-text, .e-fe-toolbar.e-responsive-toolbar input {
        border: 1px solid;
    }

    .e-fileexplorer .e-toolbar {
        border: 0 none;
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-selection-rect, .e-fileexplorer .e-gridcontent .e-fe-selection-rect{
            position: absolute;
            cursor: default;
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-selection-rect, .e-fileexplorer .e-gridcontent .e-fe-selection-rect{
            position: absolute;
            cursor: default;
    }

    .e-fileexplorer.e-ie8 .e-tile-wrapper .e-fe-selection-rect, .e-fileexplorer.e-ie8 .e-gridcontent .e-fe-selection-rect{
        filter: alpha(opacity=30);
    }

    .e-fileexplorer .e-treeview .e-fe-node-hover {
        border-image: initial;
        cursor: pointer;
    }

    .e-fileexplorer .e-scroller .e-vscroll .e-icon, .e-fileexplorer .e-scroller .e-hscroll .e-icon {
        color: transparent;
    }

    .e-fileexplorer .e-scroller .e-vscroll, .e-fileexplorer .e-scroller .e-hscroll, .e-fileexplorer .e-scroller .e-vhandlespace, .e-fileexplorer .e-switchView .e-button {
        background: transparent;
    }

    .e-fileexplorer .e-statusbar .e-itemStaus, .e-fileexplorer input,  input.e-fe-dialog-text, .e-fileexplorer .e-treeview .e-text, .e-fe-toolbar.e-responsive-toolbar input {
        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: 12px;
        }

        & when (@skin= "office-365") {
            font-size: 14px;
        }
    }


    .e-fileexplorer .e-statusbar .e-itemStaus {
        & when (@skin= "material") {
            font-size: 13px;
        }
    }

    .e-fileexplorer .e-toolbar input, .e-fe-toolbar.e-responsive-toolbar input {
        & when (@skin= "material") {
            font-size: 12px;
        }

        & when (@skin= "office-365") {
            font-size: 14px;
        }
    }

    .e-fileexplorer .e-split.e-btn-normal, .e-fe-toolbar.e-responsive-toolbar .e-split.e-btn-normal {
        & when (@skin= "material") {
            height: 45px !important;
        }

        & when (@skin= "office-365") {
            height: 38px !important;
        }
    }

    .e-fileexplorer .e-toolbar .e-fe-split-button, .e-fe-toolbar.e-responsive-toolbar .e-fe-split-button {
        & when (@skin= "material"), (@skin= "office-365") {
            padding: 0px;
        }
    }

    .e-fe-toolbar.e-toolbar.e-responsive-toolbar {
        & when (@skin= "material"), (@skin= "office-365") {
            width: auto;
        }
    }

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

    .e-fileexplorer .e-splitter .e-splitbar.e-h-bar.e-resize {
        & when (@skin= "material") {
            cursor: e-resize;
        }
    }

    .e-fe-dialog.e-dialog input {
        & when (@skin= "material") {
            text-indent: 0px;
        }
    }
    /* FileExplorer Grid and Tree padding*/
    .e-fileexplorer .e-grid > .e-gridcontent > div > .e-table {
        & when (@skin= "material") {
            padding: 0px 32px;
        }
    }

    .e-fileexplorer .e-grid .e-gridcontent .e-rowcell.e-col-check {
        & when (@skin= "material") {
            padding-left: 3px;
        }
    }

    .e-fileexplorer.e-js .e-grid .e-gridcontent .e-rowcell.e-grid-image {
        & when (@skin= "material") {
            overflow: visible;
            position: relative;
            padding-left: 28px;
        }

        & when (@skin= "office-365") {
            overflow: visible;
            position: relative;
            padding-left: 12px;
        }
    }

    .e-fileexplorer .e-grid .e-gridcontent .e-rowcell.e-grid-image + td span {
        & when (@skin= "material") {
            padding-left: 35px;
        }

        & when (@skin= "office-365") {
            padding-left: 18px;
        }
    }

    .e-fileexplorer .e-grid .e-headercontent {
        & when (@skin= "material") {
            padding-left: 29px;
            padding-right: 29px;
        }
    }

    .e-fileexplorer .e-grid .e-gridheader .e-headercell.e-col-check {
        & when (@skin= "material") {
            padding-left: 3px;
        }
    }

    .e-fileexplorer .e-grid .e-gridheader .e-headercell.e-grid-image + th {
        & when (@skin= "material") {
            padding-left: 34px;
        }

        & when (@skin= "office-365") {
            padding-left: 19px;
        }
    }
    /* RTL Grid and Tree */
    .e-fileexplorer.e-rtl .e-grid .e-gridcontent .e-rowcell.e-col-check {
        & when (@skin= "material") {
            padding-right: 3px;
        }
    }

    .e-fileexplorer.e-rtl .e-grid .e-gridcontent .e-rowcell.e-grid-image {
        & when (@skin= "material") {
            padding-right: 28px;
        }

        & when (@skin= "office-365") {
            padding-right: 12px;
        }
    }

    .e-fileexplorer.e-rtl .e-grid .e-gridcontent .e-rowcell.e-grid-image + td {
        & when (@skin= "material") {
            padding-right: 35px;
        }

        & when (@skin= "office-365") {
            padding-right: 22px;
        }
    }

    .e-fileexplorer.e-rtl .e-grid .e-gridheader .e-headercell.e-col-check {
        & when (@skin= "material") {
            padding-right: 3px;
        }
    }

    .e-fileexplorer.e-rtl .e-grid .e-gridheader .e-headercell.e-grid-image + th {
        & when (@skin= "material") {
            padding-right: 34px;
        }

        & when (@skin= "office-365") {
            padding-right: 20px;
        }
    }

    .e-fileexplorer.e-js.e-rtl .e-treeview .e-fe-folder {
        & when (@skin= "material") {
            right: 7px;
        }
    }

    .e-fileexplorer.e-js .e-grid .e-gridcontent tr td.e-last-rowcell {
        & when (@skin= "material") {
            padding-right: 15px;
        }
    }

     .e-fe-split-context.e-menu.e-split.e-context .e-list .e-icon {
        & when (@skin= "material") {
            margin-top: 5px;
        }
    }

    .e-fileexplorer.e-rtl .e-grid .e-gridcontent .e-rowcell.e-grid-image + td span {
        & when (@skin= "material") {
            padding-left: 0px;
        }
    }

    .e-fileexplorer.e-rtl .e-grid .e-gridheader .e-headercell.e-grid-image + th {
        & when (@skin= "material") {
            padding-right: 34px;
        }
    }

    .e-fileexplorer.e-js.e-rtl .e-treeview .e-fe-folder {
        & when (@skin= "material") {
            right: 7px;
        }
    }

    .e-fileexplorer.e-js .e-grid .e-gridcontent tr td.e-last-rowcell {
        & when (@skin= "material") {
            padding-right: 15px;
        }
    }

    .e-fileexplorer .e-tileInfo-view .e-tilenode.e-folder .e-file-name {
        & when (@skin= "material"), (@skin= "office-365") {
            font-weight: normal;
        }
    }

    .e-fe-dialog.e-dialog .e-widget-content input.e-textbox {
        & when (@skin= "material") {
            height: 25px;
            box-sizing: border-box;
        }
    }

    .e-fileexplorer .e-statusbar .e-switchView .e-button,
    .e-fileexplorer .e-statusbar .e-switchView .e-button:hover {
        & when (@skin= "material") {
            border-radius: 100%;
            background: none;
            border: none;
            box-shadow: none;
            color: rgba(0,0,0,.54);
            height: 48px;
            width: 48px;
        }
    }

    .e-fileexplorer .e-statusbar .e-fe-resize, .e-fileexplorer .e-statusbar .e-icon:before {
        & when (@skin= "material") {
            height: 16px;
            width: 16px;
        }

        & when (@skin= "office-365") {
            height: 20px;
            width: 20px;
        }
    }

    .e-fileexplorer .e-statusbar .e-switchView .e-button .e-icon:before {
        & when (@skin= "material") {
            margin-left: -4px;
        }
    }

    .e-fileexplorer .e-statusbar .e-icon {
        & when (@skin= "material") {
            font-size: 16px;
        }

        & when (@skin= "office-365") {
            font-size: 20px;
        }
    }

    .e-fe-dialog .e-button {
        & when (@skin= "material") {
            font-weight: 500;
        }

        & when (@skin= "office-365") {
            font-weight: 600;
        }
    }

    .fe-context-menu.e-menu.e-context > .e-list > .e-menulink > span,  .e-fe-split-context.e-menu.e-context > .e-list > .e-menulink > span {
        & when (@skin= "material") {
            top: 3px;
        }
    }

    .fe-context-menu.e-rtl.e-menu .e-fileexplorer-toolbar-icon {
        & when (@skin= "material") {
            height: 22px;
            width: 22px;
        }
    }
    /*icon correction temp*/
    .e-fileexplorer .e-split .e-in-wrap .e-left-btn .e-icon,
    .e-fileexplorer .e-split .e-in-wrap .e-left-btn .e-icon:before {
        & when (@skin= "material") {
            height: 14px;
            padding: 0;
            font-size: 14px;
        }
    }

    .e-fe-toolbar.e-responsive-toolbar .e-split .e-in-wrap .e-left-btn .e-icon,
    .e-fe-toolbar.e-responsive-toolbar .e-split .e-in-wrap .e-left-btn .e-icon:before {
        & when (@skin= "material") {
            height: 18px;
            padding: 0;
            font-size: 14px;
        }
    }

     .e-fe-split-context.e-menu.e-context > .e-list > .e-menulink {
        & when (@skin= "material") {
            font-size: 13px;
        }
    }

    .e-fileexplorer .e-toolbar .e-horizontal.e-ul.e-ul-searchBar {
        & when (@skin= "material") {
            height: 36px;
        }
    }

    .e-fileexplorer.e-rtl .e-statusbar .e-switchView .e-button .e-icon {
        & when (@skin= "material") {
            padding-left: 3px;
            padding-right: 0px;
            width: 12px;
        }
    }


    .e-fileexplorer .e-grid .e-headercelldiv, .e-fileexplorer .e-grid .e-gridcontent tr, .e-fileexplorer .e-tileview .e-tilenode .e-name {
        font-weight: normal;

        & when (@skin= "material") {
            color: rgba(0,0,0,.87);
            font-family: @font-family;
        }

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

    .e-fileexplorer .e-tileview .e-tilenode .e-name {
        & when (@skin= "material") {
            font-size: 13px;
            padding-top: 0px;
        }

        & when (@skin= "office-365") {
            font-size: 13px;
        }
    }

    .e-fileexplorer .e-tileview .e-tilenode .e-name-wrap {
        & when (@skin= "material") {
            margin-top: -2px;
            padding-bottom: 5px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-tileview .e-tilenode .e-name {
        & when (@skin= "material") {
            padding-top: 10px;
        }
    }

    .e-fe-dialog.e-dialog .e-widget-content, .e-fe-dialog.e-dialog .e-fe-table table tr .e-readonly {
        & when (@skin= "material") {
            font-size: 13px;
            color: rgba(0,0,0,.87);
            font-family: @font-family;
        }
    }

    .e-fe-dialog.e-dialog.e-widget-content {
        & when (@skin= "material") {
            padding-bottom: 16px;
        }
    }

    .e-fileexplorer .e-splitter, .e-fileexplorer .e-grid .e-headercontent {
        border: 0 none;
    }

    .e-fileexplorer .e-splitter .e-tileview, .e-fileexplorer .e-splitter .e-pane {
        overflow: visible;
    }

    .e-fileexplorer .e-splitter .e-splitbar.e-h-bar {
        width: 9px;
        border-width: 0px 0px 0px 1px !important;
    }

    .e-fileexplorer.e-fe-mobile .e-splitter.e-rtl .e-fe-split-icon {
        right: 9px;
        border-right-width: 0px;
        border-radius: 10px 0px 0px 10px;
    }

    .e-fileexplorer.e-fe-mobile .e-splitter.e-rtl .e-fe-split-icon .e-icon:before {
        left: 3px;
    }

    .e-fileexplorer .e-splitter .e-pane.collapsed {
        overflow: hidden;
    }

    .e-fileexplorer .e-splitter .e-splitbar .e-icon {
        visibility: hidden;
    }

    .e-fileexplorer .e-splitbar.e-split-divider {
        position: absolute;
    }

    .e-imageViewer > img {
        width: 100%;
        height: 100%;
    }

    .e-fileexplorer .e-grid .e-rowcell {
        text-overflow: ellipsis;
    }

    .e-imageViewer-wrap .e-vscrollbar {
        display: none;
    }

    .e-fileexplorer .e-addressBar {
        width: 228px;
        text-indent: 0px;
    }

    .e-fileexplorer .e-addressBar.e-tool-input {
        padding-left: 27px;
        padding-right: 5px;
    }

    .e-fileexplorer .e-addressBar, .e-fe-toolbar .e-addressBar, .e-fileexplorer .e-searchBar, .e-fe-toolbar .e-searchBar {
        margin: 0;
        padding: 0;

        & when (@skin= "material"), (@skin= "office-365") {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            line-height: normal !important;
        }
    }

    .e-fe-toolbar.e-responsive-toolbar .e-addressBar {
        width: 150px;
    }

    .e-fileexplorer input,  input.e-fe-dialog-text, .e-fe-toolbar.e-responsive-toolbar input {
        line-height: 20px;
        font-family: inherit;

        & when (@skin= "office-365") {
            height: 28px;
            text-indent: 10px;
        }

        & when not (@skin= "office-365") {
            height: 22px;
            text-indent: 9px;
        }
    }

    .e-fileexplorer .e-searchBar::-webkit-input-placeholder {
        text-indent: 9px;
    }

    .e-dialog.e-rtl .e-fe-dialog .e-fe-dialog-label,
    .e-fileexplorer.e-rtl .e-tilenode .e-file-name, .e-fileexplorer.e-rtl .e-tilenode .e-file-type, .e-fileexplorer.e-rtl .e-tilenode .e-file-size,
    .e-fileexplorer.e-rtl .e-grid .e-rowcell, .e-fileexplorer.e-rtl .e-treeview .e-text {
        direction: ltr;
    }

    .e-fe-dialog .e-fe-table table tr .e-readonly {
        text-indent: 0px;
    }

    .e-fileexplorer.e-rtl .e-tileInfo-view .e-tilenode .e-file-name, .e-fileexplorer.e-rtl .e-tileInfo-view .e-tilenode .e-file-type, .e-fileexplorer.e-rtl .e-tileInfo-view .e-tilenode .e-file-size {
        text-align: right;
    }

    .e-fileexplorer .e-toolbar > ul > li .e-splitbutton.e-btn {
        vertical-align: top;
    }

    .e-fileexplorer .e-switchView .e-btn.e-btn-normal {
        & when not (@skin= "material") {
            height: auto;
        }
    }

    .e-fileexplorer.e-rtl .e-grid .e-chkbox-wrap, .e-fileexplorer .e-tileInfo-view.e-rtl .e-name.e-name-in-wrap,
    .e-fileexplorer.e-rtl .e-grid .e-rowcell.e-grid-image, .e-fileexplorer.e-rtl .e-grid .e-rowcell.e-col-check {
        direction: rtl;
    }

    .e-fileexplorer .e-toolbar.e-toolbarspan {
        width: auto;
    }

    .e-fileexplorer .e-ul.e-horizontal, .e-fe-toolbar.e-responsive-toolbar .e-ul.e-horizontal {
        & when not (@skin= "material") and not (@skin="office-365") {
            margin-top: 4px;
            margin-bottom: 4px;
            padding-left: 2px;
            padding-right: 2px;
        }
    }

    .e-fileexplorer .e-treeview > ul:first-child {
        margin-top: 4px;

        & when (@skin= "material") {
            margin-top: 20px;
        }

        & when (@skin= "office-365") {
            margin-top: 22px;
        }
    }

    .e-fileexplorer .e-treeview-wrap > .e-ul {
        overflow: visible;
    }

    .e-fileexplorer .e-tree-wrapper .e-widget.e-scrollbar, .e-fileexplorer .e-tree-wrapper .e-widget.e-scrollbar [class^="e-"] {
        box-sizing: border-box;
    }

    .e-fileexplorer .e-statusbar .e-itemStaus {
        & when (@skin= "material") {
            margin: 15px 16px 0 16px;
        }

        & when (@skin= "office-365") {
            margin: 8px 12px 0 12px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin: 4px 8px 0 8px;
        }
    }

    .e-rtl.e-fileexplorer .e-statusbar .e-itemStaus {
        direction: ltr;
    }

    .e-fileexplorer.e-rtl .e-icon.e-fe-resize:before {
        content: "\e902";
    }

    .e-fileexplorer.e-rtl .e-icon.e-fe-resize {
        float: left;
        margin-left: 8px;
        font-size: 13px;
    }

    .e-fileexplorer .e-toolbar .e-addressbar-foldericon, .e-fe-toolbar.e-responsive-toolbar .e-addressbar-foldericon {
        margin-left: 4px;
        margin-top: 4px;
    }

    .e-fileexplorer .e-uploadbox .e-selectpart, .e-fileexplorer .e-uploadbox {
        & when not (@skin= "material") and not (@skin="office-365") {
            border: 0 none;
        }
    }

    .e-fileexplorer .e-uploadbox .e-selectpart {
        height: auto;
        width: auto;
    }

    .e-fileexplorer .e-uploadbox.e-dialog .e-titlebar {
        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: .25em .25em .25em 1em;
        }
    }

    .e-fileexplorer .e-uploadbox.e-dialog .e-header {
        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: 16px;
        }
    }

    .e-fileexplorer .e-uploadbox.e-dialog .e-titlebar .e-title {
        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-left: 0;
            top: 0;
        }
    }

    .e-fileexplorer .e-uploadbox.e-dialog .e-titlebar > .e-dialog-icon .e-close {
        & when not (@skin= "material") and not (@skin= "office-365") {
            margin: -9px 0px 0px -1px;
        }
    }

    .e-fileexplorer .e-uploadbox.e-dialog .e-dialog-icon {
        & when not (@skin= "material") and not (@skin= "office-365") {
            top: 0;
            right: 0;
        }
    }

    .e-fileexplorer .e-uploadbox.e-dialog .e-file-upload {
        & when not (@skin= "material") and not (@skin= "office-365") {
            float: right;
            width: 100%;
        }
    }

    .e-fileexplorer .e-uploadbox.e-dialog .e-file-upload > .e-btn {
        & when not (@skin= "material") and not (@skin= "office-365") {
            left: 0;
            height: 30px;
            float: right;
            margin: 0 9px 0 9px;
        }
    }

    .e-fileexplorer .e-uploadbox.e-rtl.e-dialog .e-file-upload {
        & when not (@skin= "material") and not (@skin= "office-365") {
            float: left;
        }
    }

    .e-fileexplorer .e-uploadbox.e-rtl.e-dialog .e-file-upload > .e-btn {
        & when not (@skin= "material") and not (@skin= "office-365") {
            float: left;
            margin-left: 11px;
            margin-right: 7px;
        }
    }

    .e-fileexplorer .e-uploadbox.e-dialog .e-head-content {
        & when not (@skin= "office-365") {
            display: none;
        }
    }

    .e-fileexplorer .e-uploadbox .e-file-list .e-file-progress {
        & when not (@skin= "material") and not (@skin= "office-365") {
            width: 180px;
        }
    }

    .e-fileexplorer .e-uploadbox .e-file-list .e-file-size {
        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-left: 3px;
            min-width: 135px;
        }
    }

    .e-fileexplorer .e-uploadbox .e-file-list .e-file-percentage {
        & when not (@skin= "material") and not (@skin= "office-365") {
            width: 130px;
            margin-left: 3px;
        }
    }

    .e-fileexplorer .e-uploadbox .e-file-list .e-file-percentage .e-file-progress-bar {
        width: auto;
    }

    .e-fileexplorer .e-uploadbox .e-file-list .e-action-perform {
        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-left: 17px;
        }
    }

    .e-fileexplorer .e-uploadbox.e-rtl .e-file-list .e-file-size, .e-fileexplorer .e-uploadbox.e-rtl .e-file-list .e-file-percentage {
        margin-left: 0;
    }

    .e-fileexplorer .e-uploadbox.e-rtl .e-file-list .e-action-perform {
        margin-left: 0px;
        margin-right: 23px;
    }

    .e-fileexplorer .e-uploadbox .e-ul > li {
        & when not (@skin= "material") and not (@skin= "office-365") {
            height: 54px;
        }
    }

    .e-fileexplorer .e-uploadbox .e-file-list {
        & when not (@skin= "material") and not (@skin= "office-365") {
            height: 53px;
            top: 0;
        }
    }

    .e-fe-dialog.e-dialog.e-dialog-wrap {
        border: none;
    }

    .e-fileexplorer .e-tileview {
        overflow: initial;

        & when (@skin= "material") {
            margin: 27px;
        }

        & when (@skin= "office-365") {
            margin: 27px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-bottom: 0px;
            margin-left: 10px;
            margin-top: 4px;
            margin-right: 10px;
        }
    }

    .e-fileexplorer .e-grid {
        height: inherit;
    }

    .e-fileexplorer .e-fileurl > input {
        width: 100%;
        max-width: 900px;
    }

    .e-fileexplorer .e-fileurl {
        width: 343px;
    }

    .e-fileexplorer .e-filename {
        width: 206px;
    }

    .e-fileexplorer .e-filename > input {
        width: 100%;
    }

    .e-fileexplorer .e-filewidth > input, .e-fileexplorer .e-fileheight > input {
        width: 60px;
    }

    .e-fileexplorer .e-grid {
        border: 0 none;
    }

    .e-fileexplorer .e-gridheader .e-headercell .e-headercelldiv {
        font-weight: bold;
    }

    .e-fileexplorer .e-statusbar {
        overflow: hidden;
        border-top: 1px solid;

        & when (@skin= "material") {
            height: 48px;
        }

        & when (@skin= "office-365") {
            height: 35px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            height: 24px;
        }
    }

    .e-fileexplorer .e-grid .e-gridheader {
        border-bottom: 1px solid;
        border-left: 0 none;
        border-top: 0 none;
        border-right: 0 none;
    }

    .e-fileexplorer .e-grid .e-headercell {
        border-style: none;
    }

    .e-fileexplorer .e-tilenode {
        list-style: none;
        display: inline-block;
        vertical-align: top;
        padding: 0 0 4px 0;
        width: 104px;

        & when (@skin= "material") {
            margin: 5px;
            border: 0 none;
        }

        & when (@skin= "office-365") {
            margin: 5px;
            border: 0 none;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin: 7px 7px 3px 7px;
            border: 1px solid transparent;
        }
    }

    .e-fileexplorer .e-addNewFolder.e-button {
        margin-left: 4px;
        padding-right: 10px;
        height: 25px;
        background-color: transparent;
        border: none;
        float: left;
    }

    .e-fileexplorer .e-switchGridView.e-button {
        background: transparent;
        border: none;
    }

    .e-fileexplorer .e-swithListView.e-button {
        background: transparent;
        border: none;
    }

    .e-fileexplorer .e-thumbImage {
        padding: 4px;
        display: block;
        max-height: 88px;
        text-align: center;
        width: auto;
        height: auto;
        margin-left: auto;
        margin-right: auto;

        & when (@skin= "material") {
            max-width: 80px;
        }

        & when not (@skin= "material") {
            max-width: 96px;
        }
    }

    .e-fileexplorer .e-name {
        text-align: center;
        word-wrap: break-word;
    }

    .e-fileexplorer .e-addressbar-foldericon {
        position: absolute;
    }

    .e-fileexplorer .e-h-arrow {
        z-index: 10001;
    }

    .e-fileexplorer .e-responsive-toolbar {
        z-index: 1;
    }

    .e-rtl.e-fileexplorer .e-grid .e-headercelldiv {
        text-align: right;
    }

    .e-fileexplorer .e-statusbar .e-switchView {
        & when not (@skin= "material") and not (@skin= "office-365") {
            margin: 0 8px 0 0;
        }

        & when (@skin= "office-365") {
            margin: 0px;
        }
    }

    .e-rtl.e-fileexplorer .e-statusbar .e-switchView {
        & when not (@skin= "material") and not (@skin="office-365") {
            margin: 0 0 0 8px;
        }

        & when (@skin= "office-365") {
            margin: 0px;
        }
    }

    .e-fileexplorer .e-statusbar {
        & when (@skin= "material") {
            padding-left: 16px;
            padding-right: 20px;
        }

        & when (@skin= "office-365") {
            padding-left: 3px;
            padding-right: 10px;
        }
    }

    .e-fileexplorer.e-rtl .e-statusbar {
        & when (@skin= "material") {
            padding-left: 20px;
            padding-right: 16px;
        }

        & when (@skin= "office-365") {
            padding-left: 10px;
            padding-right: 3px;
        }
    }


    .e-fileexplorer .e-statusbar .e-switchView .e-button, .e-fileexplorer .e-statusbar .e-fe-resize {
        & when (@skin= "material") {
            padding: 2px 12px;
        }

        & when (@skin= "office-365") {
            padding: 0px;
            margin: 3px 5px;
        }
    }

    .e-rtl.e-fileexplorer .e-toolbar > .e-horizontal.e-ul, .e-rtl.e-fileexplorer .e-statusbar .e-itemStaus,
    .e-fileexplorer .e-statusbar .e-switchView, .e-rtl.e-fileexplorer .e-toolbar > .e-horizontal.e-ul > li,
    .e-fileexplorer .e-toolbar .e-ul-searchBar, .e-fileexplorer .e-tileInfo-view.e-rtl .e-align,
    .e-fileexplorer.e-rtl .e-treeview .e-fe-folder {
        float: right;
    }

    .e-fileexplorer .e-statusbar .e-itemStaus, .e-rtl.e-fileexplorer .e-statusbar .e-switchView,
    .e-rtl.e-fileexplorer .e-toolbar .e-horizontal.e-ul.e-ul-searchBar {
        float: left;
    }

    .e-fileexplorer .e-tileview, .e-fileexplorer .e-toolbar .e-feItem-Addressbar, .e-fileexplorer .e-toolbar .e-feItem-Searchbar,
    .e-fe-toolbar.e-responsive-toolbar .e-feItem-Addressbar, .e-fe-toolbar.e-responsive-toolbar .e-feItem-Searchbar {
        padding-left: 0px;
        padding-right: 0px;
    }

    .e-fileexplorer .e-toolbar .e-feItem-Addressbar, .e-fileexplorer .e-toolbar .e-feItem-Searchbar,
    .e-fe-toolbar.e-responsive-toolbar .e-feItem-Addressbar, .e-fe-toolbar.e-responsive-toolbar .e-feItem-Searchbar {
        & when (@skin="office-365") {
            padding: 5px 0px 4px 0px;
        }
    }

     .e-fileexplorer-toolbar-icon, .e-fileexplorer .e-tree-foldericon, .e-fileexplorer .e-addressbar-foldericon {
        font-family: 'ej-webfont';

        & when not (@skin= "material") and not (@skin="office-365") {
            padding-top: 2px;
            width: 22px;
            height: 22px;
        }

        & when not (@skin="office-365") {
            font-size: 18px;
            text-align: center;
        }
    }

    .e-fileexplorer .e-tree-foldericon {
        height: 18px;
        width: 14px;
        padding-right: 4px;
    }

    .e-rtl.e-fileexplorer .e-tree-foldericon {
        padding-right: 0;
        padding-left: 4px;
        float: right;
    }

    .e-fileexplorer .e-addressbar-foldericon, .e-fileexplorer .e-tree-foldericon {
        font-size: 14px;
    }

    .e-fileexplorer .e-addressbar-foldericon:before, .e-fileexplorer .e-tree-foldericon:before, .e-fileexplorer .e-plus ~ .e-tree-foldericon:before {
        content: "\e768";
    }

    .e-fileexplorer .e-minus ~ .e-tree-foldericon:before,  .e-fileexplorer-toolbar-icon.Open:before,  .e-fileexplorer-toolbar-icon.OpenFolderLocation:before {
        content: "\e769";
    }

     .e-fileexplorer-toolbar-icon.Delete:before {
        content: "\e708";
    }

     .e-fileexplorer-toolbar-icon.NewFolder:before {
        content: "\e76a";
    }

     .e-fileexplorer-toolbar-icon.Back:before {
        content: "\e773";
    }

     .e-fileexplorer-toolbar-icon.Forward:before {
        content: "\e774";
    }

     .e-fileexplorer-toolbar-icon.Upward:before {
        content: "\e74f";
    }

     .e-fileexplorer-toolbar-icon.Back:hover:before {
        content: "\e775";
    }

     .e-fileexplorer-toolbar-icon.Forward:hover:before {
        content: "\e776";
    }

     .e-fileexplorer-toolbar-icon.Cut:before {
        content: "\e680";
    }

     .e-fileexplorer-toolbar-icon.Copy:before {
        content: "\e646";
    }

     .e-fileexplorer-toolbar-icon.Paste:before {
        content: "\e645";
    }

     .e-fileexplorer-toolbar-icon.Details:before,  .e-fileexplorer-toolbar-icon.Getinfo:before {
        content: "\e777";
    }

     .e-fileexplorer-toolbar-icon.Upload:before {
        content: "\e678";
    }

     .e-fileexplorer-toolbar-icon.Refresh:before {
        content: "\e677";
    }

     .e-fileexplorer-toolbar-icon.Rename:before {
        content: "\e69c";
    }

     .e-fileexplorer-toolbar-icon.Download {
        & when not (@skin= "office-365") {
            top: -3px;
            position: relative;
        }

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

        & when not (@skin= "material") and not (@skin="office-365") {
            font-size: 26px;
        }
    }

    .e-disable .e-fileexplorer-toolbar-icon.Download {
        filter: alpha(opacity=35);
    }

     .e-fileexplorer-toolbar-icon.Download:before {
        content: "\e61f";
    }

     .e-fileexplorer-toolbar-icon.SortBy:before,
    .e-icon.e-fe-sortby:before {
        content: "\e823";
        text-indent: 1px;
        margin-top: 2px;
        margin-left: 1px;

        & when (@skin="office-365") {
            height: 14px;
            width: 14px;
        }

        & when not (@skin="office-365") {
            height: 100%;
            width: 100%;
        }
    }

    .e-fe-toolbar .e-splitbutton > span:first-child .e-icon {
        & when (@skin="office-365") {
            width: 14px;
            height: 14px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-thumbImage.e-fe-icon {
        width: 67px;
        height: 67px;
    }

    .e-fileexplorer .e-tile-wrapper.e-js, .e-fileexplorer.e-js, .e-fileexplorer .e-gridcontent,
    .e-fileexplorer .e-statusbar, .e-fileexplorer .e-statusbar .e-switchView .e-button,
    .e-fileexplorer .e-toolbar .e-tool-input:focus, .e-fe-toolbar.e-responsive-toolbar .e-tool-input:focus {
        outline: none;
        box-shadow: none;
    }

    .e-fileexplorer .e-toolbar.e-focus {
        outline: none;

        & when not (@skin= "material") and not (@skin="office-365") {
            box-shadow: none;
        }
    }

    .e-fe-dialog input.e-ejinputtext:focus {
        outline: none;
    }

     .e-fe-dialog-btn, .e-fe-dialog-centerbtn,  .e-fe-dialog-text {
        & when (@skin= "material") {
            margin-top: 31px;
        }

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

    .e-fe-dialog input,  input.e-fe-dialog-text {
        & when (@skin= "material") {
            border: 0px none;
            border-bottom: 1px solid;
            width: 295px;
            min-width: 295px;
        }

        & when (@skin= "office-365") {
            width: 292px;
            min-width: 292px;
        }

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

     .e-fe-dialog-text {
        max-width: 310px;
        width: 310px;
    }

     .e-fe-dialog-btn {
        float: right;
        width: 50%;

        & when (@skin= "material") {
            padding-bottom: 0px;
        }

        & when (@skin= "office-365") {
            padding-bottom: 0px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding-bottom: 4px;
        }
    }

    .e-fe-dialog-centerbtn {
        padding: 1px;
        width: 70%;
        float: right;
    }

    .e-rtl .e-fe-dialog-centerbtn {
        width: 70%;
        float: left;
    }

    .e-fe-dialog .e-fe-btn-ok, .e-fe-dialog .e-fe-btn-skip,
    .e-fe-dialog .e-fe-btn-cancel {
        height: 27px;

        & when (@skin= "material"), (@skin= "office-365") {
            width: auto;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            width: 45%;
        }
    }

    .e-fe-dialog-centerbtn .e-fe-btn-ok,  .e-fe-dialog-btn .e-fe-btn-ok, .e-fe-dialog-centerbtn .e-fe-btn-skip,  .e-fe-dialog-btn .e-fe-btn-skip {
        margin-left: 0px;

        & when (@skin= "office-365") {
            margin-right: 6px;
        }

        & when not (@skin= "office-365") {
            margin-right: 14px;
        }
    }

    .e-rtl .e-fe-dialog-centerbtn .e-fe-btn-ok, .e-rtl .e-fe-dialog-btn .e-fe-btn-ok, .e-rtl .e-fe-dialog-centerbtn .e-fe-btn-skip, .e-rtl .e-fe-dialog-btn .e-fe-btn-skip {
        margin-right: 0px;

        & when (@skin= "office-365") {
            margin-left: 6px;
        }

        & when not (@skin= "office-365") {
            margin-left: 14px;
        }
    }

    .e-fe-dialog.e-icon.e-close {
        float: right;
        margin: 4px 4px 0 0;
    }

    .e-rtl .e-fe-dialog.e-icon.e-close {
        margin: 4px 0 0 4px;
    }

    .e-fe-dialog.e-icon.e-close:before {
        padding-top: 2px;
    }

    .e-rtl .e-fe-dialog.e-icon.e-close, .e-rtl .e-fe-dialog-btn {
        float: left;
    }

    .e-fe-dialog-centerbtn, .e-fileexplorer .e-grid .emptyrecord,
    .e-fe-center {
        text-align: center;
    }

    .e-fileexplorer .e-tileInfo-view .e-align {
        float: left;
    }

    .e-fileexplorer .e-tileInfo-view .e-tilenode {
        padding: 0px;
        overflow: hidden;

        & when (@skin= "material") {
            width: 273px;
            height: 76px;
        }

        & when (@skin= "office-365") {
            width: 250px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            width: 252px;
            height: 60px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-thumb-image.e-image .e-thumbImage, .e-fileexplorer .e-tile-wrapper .e-thumb-image.e-image img.e-thumbImage {
        & when (@skin= "material") {
            margin: 8px 8px 6px 8px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-thumb-image.e-image .e-thumbImage {
        & when (@skin= "material") {
            margin: 8px 13px 6px 13px;
        }
    }

    .e-fileexplorer .e-tileInfo-view .e-name {
        display: table-cell;
        vertical-align: middle;
        width: 112px;
        padding: 0px 5px;
        word-wrap: break-word;

        & when (@skin= "office-365") {
            height: 54px;
        }

        & when not (@skin= "office-365") {
            height: 60px;
        }
    }

    .e-fileexplorer .e-tileInfo-view .e-name-wrap {
        overflow: hidden;

        & when (@skin= "office-365") {
            display: block;
            padding-left: 10px;
            width: 172px;
            height: 54px;
        }

        & when not (@skin= "office-365") {
            display: table;
            width: 184px;
            height: 60px;
        }
    }

    .e-fileexplorer .e-tileInfo-view .e-name.e-name-in-wrap {
        vertical-align: middle;
        text-align: inherit;
        display: table-cell;
        word-wrap: break-word;
    }

    .e-fileexplorer .e-tileInfo-view .e-name.e-name-in-wrap p {
        margin: 0;
    }

    .e-fileexplorer .e-tileInfo-view .e-thumb-image.e-image .e-thumbImage {
        & when (@skin= "office-365") {
            max-height: 54px;
            max-width: 46px;
        }

        & when not (@skin= "office-365") {
            max-height: 52px;
            max-width: 58px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-thumb-image.e-image img.e-thumbImage {
        height: auto;
        width: auto;
    }

    .e-fileexplorer .e-tileInfo-view .e-thumbImage {
        display: block;
        max-width: 59px;
        margin: 0;

        & when (@skin= "office-365") {
            padding: 0px;
        }

        & when not (@skin= "office-365") {
            padding: 4px;
        }
    }

    .e-fileexplorer .e-tileInfo-view .e-tilenode .e-image {
        display: table-cell;
        vertical-align: middle;
        width: auto;
        padding-top: 0px;

        & when (@skin= "material") {
            height: 73px !important;
        }

        & when (@skin= "office-365") {
            height: 54px !important;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 60px;
        }
    }

     .e-fileexplorer-toolbar-icon {
        & when (@skin= "office-365") {
            height: 15px;
        }
    }

    .e-fileexplorer .e-tileInfo-view .e-name-wrap .e-name.e-name-in-wrap div {
        & when (@skin= "material") {
            width: 179px;
        }

        & when not (@skin= "material") {
            width: 168px;
        }
    }

    .e-fileexplorer .e-tileview .e-name-wrap .e-name.e-name-in-wrap div {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .e-fileexplorer .e-tileInfo-view .e-file-name {
        font-weight: bold;
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-thumbImage {
        width: 60px;

        & when (@skin="office-365") {
            height: 54px;
        }

        & when not (@skin="office-365") {
            height: 52px;
        }
    }

    .e-fileexplorer .e-splitbutton.e-btn.e-left-btn:focus, .e-fileexplorer .e-split-btn.e-btn.e-select.e-drp-btn:focus,
    .e-fe-toolbar .e-splitbutton.e-btn.e-left-btn:focus, .e-fe-toolbar .e-split-btn.e-btn.e-select.e-drp-btn:focus {
        & when (@skin="office-365") {
            border: 0 none;
        }
    }

    .e-fileexplorer:not(.e-rtl) .e-toolbar.e-js .e-feItem-Layout .e-split-btn-div,
    .e-fe-toolbar:not(.e-rtl).e-toolbar.e-js .e-feItem-Layout .e-split-btn-div {
        & when (@skin="office-365") {
            left: 16px;
        }
    }

    .e-fileexplorer:not(.e-rtl) .e-toolbar.e-js .e-feItem-SortBy .e-split-btn-div,
    .e-fe-toolbar:not(.e-rtl).e-toolbar.e-js .e-feItem-SortBy .e-split-btn-div {
        & when (@skin="office-365") {
            left: 18px;
        }
    }

    .e-fileexplorer .e-tileInfo-view span.e-file-type, .e-fileexplorer .e-tileInfo-view span.e-file-size {
        font-size: 13px;
    }

    .e-fileexplorer .e-fe-view-icon:before {
        content: "\e76b";
        font-size: 16px;
        width: 22px;
        height: 100%;
    }

     .e-fe-activeicon:before {
        content: "\e657";
        width: 100%;
        text-indent: 1px;
        height: 100%;
        margin-left: 1px;

        & when (@skin= "office-365") {
            margin-top: 2px;
        }

        & when not (@skin= "office-365") {
            margin-top: 1px;
        }
    }

     .e-fe-ascending:before {
        content: "\e825";
        width: 100%;
        text-indent: 1px;
        height: 100%;
        margin-left: 1px;
        margin-top: 1px;
    }

     .e-fe-descending:before {
        content: "\e824";
        width: 100%;
        text-indent: 1px;
        height: 100%;
        margin-top: 1px;
        margin-left: 1px;
    }

    .e-fileexplorer .e-toolbar > ul > li, .e-fe-toolbar.e-toolbar > ul > li {
        & when not (@skin= "material") and not (@skin="office-365") {
            padding: 0px;
        }
    }

    .e-fileexplorer .e-toolbar .e-split.e-btn-normal .e-split-btn.e-left-btn,
    .e-fe-toolbar .e-split.e-btn-normal .e-split-btn.e-left-btn {
        & when (@skin= "office-365") {
            height: 38px;
        }
    }

    .e-fileexplorer .e-toolbar input {
        & when (@skin= "material") {
            height: 30px !important;
            margin-top: -3px;
        }

        & when (@skin= "office-365") {
            height: 28px !important;
        }
    }

    .e-fe-toolbar.e-responsive-toolbar.e-toolbar input.e-tool-input {
        & when (@skin= "material") {
            height: 30px !important;
            margin-top: -6px;
        }

        & when (@skin= "office-365") {
            height: 28px !important;
        }
    }

    .e-fileexplorer.e-rtl .e-toolbar.e-js .e-split-btn-div,
    .e-fe-toolbar.e-rtl.e-toolbar.e-js .e-split-btn-div {
        & when (@skin= "office-365") {
            right: 16px;
        }
    }

    .e-fileexplorer .e-treeview > ul {
        margin: 0px;
    }

    .e-fileexplorer .e-toolbar .e-searchBar {
        width: 138px;
    }

    .e-dialog .e-fe-table tr td {
        word-break: break-all;

        & when (@skin= "office-365") {
            padding: 10px 0 10px 0;
        }

        & when not (@skin= "office-365") {
            padding: 4px 0px 4px 0px;
        }
    }

    .e-dialog .e-fe-table tr td:first-child {
        min-width: 60px;
        padding-right: 14px;
        width: 25%;

        & when (@skin= "office-365") {
            font-weight: bold;
        }
    }

    .e-rtl.e-dialog .e-fe-table tr td:first-child {
        padding-left: 14px;
        padding-right: 0px;
    }

    .e-fileexplorer .e-toolbar > ul > li div.e-item-overlay {
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .e-fe-dialog.e-dialog > .e-titlebar {
        & when (@skin= "material") {
            padding-bottom: 24px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: .3em .25em .25em 1em;
        }
    }

    .e-fileexplorer .e-uploadbox .e-scrollbar.e-hscrollbar {
        & when not (@skin= "material") and not (@skin="office-365") {
            top: 0;
        }
    }

    .e-fe-dialog.e-dialog.e-rtl > .e-titlebar, .e-fileexplorer .e-uploadbox.e-dialog.e-rtl .e-titlebar {
        & when not (@skin= "material") and not (@skin="office-365") {
            padding: .3em 1em .25em .25em;
        }
    }

    .e-fileexplorer .e-uploadbox.e-widget .e-selectpart.e-select {
        border: none;
    }

    .e-fileexplorer .e-uploadbox .e-file-upload {
        & when not (@skin= "material") and not (@skin="office-365") {
            padding: 0;
        }
    }

    .e-fileexplorer .e-uploadbox .e-file-upload .e-action-container {
        & when not (@skin= "material") and not (@skin="office-365") {
            margin: 0 0px 8px auto;
            padding-top: 8px;
        }
    }

    .e-fileexplorer .e-uploadbox .e-action-container {
        & when not (@skin= "material") and not (@skin="office-365") {
            width: 228px;
        }
    }

    .e-fileexplorer .e-uploadbox.e-rtl .e-action-container {
        & when not (@skin= "material") and not (@skin="office-365") {
            width: 220px;
        }
    }

    .e-fileexplorer .e-uploadbox.e-rtl .e-file-upload .e-action-container {
        & when not (@skin= "material") and not (@skin="office-365") {
            margin: 0px auto 8px 0;
        }
    }

    .e-fileexplorer .e-uploadbox .e-uploadbtn, .e-fileexplorer .e-uploadbox .e-uploadclosebtn {
        & when not (@skin= "material") and not (@skin="office-365") {
            margin-left: 8px;
        }
    }

    .e-dialog.e-imageViewer-wrap .e-titlebar .e-title {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 90%;
        float: left;
    }

    .e-dialog.e-rtl.e-imageViewer-wrap .e-titlebar .e-title {
        float: right;
    }

    .e-menu > .e-list.e-fe-separator {
        border-bottom: 1px solid;
    }

    .fe-context-menu.e-menu li.e-list > a > span {
        & when (@skin= "material") {
            top: 3px;
        }

        & when (@skin= "office-365") {
            top: 2px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            top: 0px;
        }
    }

    .fe-context-menu.e-menu li.e-list > a {
        padding-left: 30px;
    }

    .fe-context-menu.e-menu.e-rtl li.e-list > a {
        padding-right: 32px;
    }

    .fe-context-menu.e-menu.e-context {
        width: auto;
    }

    .e-fileexplorer .e-tilenode {
        cursor: pointer;
    }

    .e-fe {
        padding: 5px;
    }

    .e-fe .e-fe-icon, .e-fe .e-thumbImage.e-fe-icon {
        background-repeat: no-repeat;
        background-image: url('@{font-path}/fileexplorer/file_icons.png');
        display: block;
        margin-left: -2px;

        & when (@skin= "office-365") {
            width: 46px;
            height: 55px;
        }

        & when not (@skin= "office-365") {
            width: 70px;
            height: 74px;
        }
    }

    .e-fe .e-fe-folder {
        background-position: -21px -1480px;
    }

    .e-fe .e-fe-images {
        background-position: -21px -325px;
    }

    .e-fe .e-thumbImage {
        width: 65px;
        height: 65px;
    }

    .e-fe .e-count {
        position: absolute;
        color: white;
        background: blue;
        min-width: 14px;
        text-align: center;
        border: 1px solid white;
        font-size: 11px;

        & when (@skin="office-365") {
            top: 24px;
            left: 19px;
        }

        & when not(@skin="office-365") {
            top: 30px;
            left: 26px;
        }
    }

    .e-fileexplorer .e-treeview-wrap .e-item div > span {
        margin-right: 0px;
        display: inline-table;
        vertical-align: middle;
    }

    .e-fileexplorer .e-grid tr td:first-child, .e-fileexplorer.e-rtl .e-grid tr td.e-last-rowcell {
        border-left: 1px solid transparent;
        border-right: 0;
    }

    .e-fileexplorer .e-grid tr td.e-last-rowcell, .e-fileexplorer.e-rtl .e-grid tr td:first-child {
        border-right: 1px solid transparent;
        border-left: 0;
    }

    .e-fileexplorer .e-grid .e-rowcell {
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        border-width: 1px 0;
        padding: 0.4em;
    }

    .e-fileexplorer .e-grid .e-gridcontent tr:first-child td {
        border-top: 1px solid transparent;
    }

    .e-fe-dialog.e-dialog > .e-titlebar .e-dialog-icon {
        right: 0;
    }

    .e-fileexplorer .e-blur {
        opacity: 0.6;
        filter: alpha(opacity= 60);
    }

    .e-fileexplorer .e-tileview .e-tilenode .e-name, .e-fileexplorer .e-treeview .e-text,
    .e-dialog.e-imageViewer-wrap .e-title, .e-fe-dialog.e-content, .e-fileexplorer .e-statusbar .e-itemStaus {
        white-space: pre-wrap;
    }

    .e-fe-dialog.e-dialog .e-widget-content {
        word-wrap: break-word;

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 0.5em 1.1em;
        }
    }

    .e-fe-dialog.e-dialog .e-fe-table tr td {
        & when (@skin= "material") {
            padding: 0px 0px;
            height: 37px;
        }
    }

    .e-fe-dialog.e-dialog, .e-fileexplorer .e-uploadbox .e-file-cancel, .e-fileexplorer .e-uploadbox.e-dialog .e-titlebar > .e-dialog-icon .e-close {
        & when not (@skin= "material") and not (@skin="office-365") {
            font-size: 12px;
        }
    }

    .e-fe-dialog .e-fe-dialog-btn .e-fe-btn-yes, .e-fe-dialog .e-fe-dialog-btn .e-fe-btn-no {
        margin-right: 10px;

        & when (@skin= "material"), (@skin= "office-365") {
            width: auto;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            width: 20%;
        }
    }

    .e-fe-dialog .e-error-msg {
        margin-top: 5px;
        color: red;
        font-size: 12px;
        margin-left: 2px;
    }

    .e-rtl .e-fe-dialog-label {
        text-align: right;
    }

     .e-fe-dialog-btn.e-replace {
        & when (@skin= "material") {
            width: 81%;
        }

        & when not (@skin= "material") {
            width: 100%;
        }
    }

    .e-fileexplorer .e-toolbar {
        & when (@skin= "material"), (@skin= "office-365") {
            border-bottom: 1px solid;
        }

        & when (@skin= "office-365") {
            border-bottom: 0px none;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            border-bottom: 3px solid;
            padding: 0 4px;
        }
    }

    .e-fileexplorer .e-toolbar .e-icon.e-toolbar-res-arrow:before {
        & when not (@skin= "office-365") {
            margin-top: 6px;
        }
    }

    .e-fileexplorer .e-scrollbar .e-hscroll .e-button.e-icon, .e-fileexplorer .e-scrollbar .e-vscroll .e-button.e-icon {
        display: none;
    }

    .e-fileexplorer .e-tree-wrapper .e-scrollbar.e-hscrollbar {
        top: 10px;
    }

    .e-fileexplorer .e-icon.e-fe-resize {
        float: right;
        cursor: se-resize;

        & when (@skin= "office-365") {
            font-size: 20px;
            padding: 4px;
        }

        & when not (@skin= "office-365") {
            font-size: 16px;
        }

        & when (@skin= "material") {
            padding: 17px 16px 0 16px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 5px 2px 0 0;
        }
    }

    .e-fileexplorer .e-icon.e-fe-resize + .e-switchView {
        margin: 0;
    }

    .e-fileexplorer .e-tilenode .e-image {
        display: table-cell;
        vertical-align: bottom;
        width: 100px;
    }

    .e-dialog .e-fe-table table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .e-dialog .e-fe-table table tr .e-readonly {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: @font-family;

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

        & when not (@skin= "office-365") {
            font-size: 14px;
        }
    }

    .e-dialog .e-fe-table table .e-border {
        & when (@skin= "office-365") {
            border: 0 none;
        }

        & when not (@skin= "office-365") {
            border-bottom: 1px solid;
        }
    }

    .e-fileexplorer .e-treeview .e-text,
    .e-dialog.e-imageViewer-wrap .e-title, .e-fileexplorer .e-statusbar .e-itemStaus {
        white-space: pre;
    }

    .e-fileexplorer .e-tileview .e-tilenode .e-name, .e-fe-dialog.e-content {
        white-space: pre-wrap;
    }

    .e-fileexplorer .e-grid .e-gridcontent .e-rowcell.e-grid-image {
        padding: 2px;
    }

    .e-fileexplorer .e-fe-icon {
        background-repeat: no-repeat;
        background-image: url('@{font-path}/fileexplorer/file_icons.png');
    }

    .e-fileexplorer .e-grid .e-gridcontent .e-rowcell.e-grid-image .e-fe-icon {
        width: 20px;
        height: 20px;
        display: block;
    }

    .e-fileexplorer .e-treeview .e-fe-folder, .e-fileexplorer .e-toolbar .e-fe-folder {
        background-position: -245px -21px;
    }

    .e-fileexplorer .e-treeview .e-text {
        position: relative;

        & when (@skin= "material") {
            padding-left: 26px;
        }

        & when (@skin= "office-365") {
            padding-left: 27px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            padding-left: 20px;
        }
    }

    .e-fileexplorer .e-treeview-wrap > .e-ul {
        overflow: visible;
    }

    .e-fileexplorer.e-rtl .e-treeview .e-text {
        padding-left: 4px;

        & when (@skin= "material") {
            padding-right: 26px;
        }

        & when (@skin= "office-365") {
            padding-right: 27px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            padding-right: 20px;
        }
    }

    .e-fileexplorer .e-treeview .e-fe-icon, .e-fileexplorer .e-toolbar .e-fe-icon {
        width: 14px;
        height: 14px;
        position: absolute;
    }

    .e-fileexplorer .e-treeview .e-fe-folder {
        top: @fe-treeview-image-top;

        & when (@skin= "material"), (@skin= "office-365") {
            left: 7px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            left: 2px;
        }
    }

    .e-fileexplorer.e-rtl .e-treeview .e-fe-icon {
        left: inherit;

        & when (@skin= "office-365") {
            right: 7px;
        }

        & when not (@skin= "office-365") {
            right: 2px;
        }
    }

    .e-fileexplorer .e-toolbar .e-fe-folder {
        & when (@skin= "material") {
            top: 17px;
            left: 8px;
        }

        & when (@skin= "office-365") {
            top: 13px;
            left: 10px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            top: 5px;
            left: 8px;
        }
    }


    .e-fileexplorer .e-toolbar .e-feItem-Addressbar, .e-fileexplorer .e-toolbar .e-feItem-Searchbar {
        & when (@skin= "material") {
            margin-top: -5px;
        }
    }

    .e-fileexplorer .e-toolbar .e-fe-split-button {
        & when (@skin= "material") {
            margin-top: -2px;
        }
    }


    .e-fileexplorer .e-statusbar .e-switchView .e-button, .e-fileexplorer .e-statusbar .e-fe-resize {
        & when (@skin= "material") {
            margin: 0px;
        }
    }

    .e-treeview-wrap .e-item div > a > span {
        & when (@skin= "material") {
            margin-top: 3px;
        }
    }

    .e-fileexplorer.e-rtl .e-toolbar .e-fe-folder {
        left: 0px;
        right: 8px;
    }

    .e-fileexplorer .e-grid .e-fe-doc, .e-fileexplorer .e-grid .e-fe-docx {
        background-position: -196px -20px;
    }

    .e-fileexplorer .e-grid .e-fe-ppt, .e-fileexplorer .e-grid .e-fe-pptx {
        background-position: -196px -48px;
    }

    .e-fileexplorer .e-grid .e-fe-xls, .e-fileexplorer .e-grid .e-fe-xlsx {
        background-position: -196px -76px;
    }

    .e-fileexplorer .e-grid .e-fe-pdf {
        background-position: -196px -104px;
    }

    .e-fileexplorer .e-grid .e-fe-images {
        background-position: -196px -132px;
    }

    .e-fileexplorer .e-grid .e-fe-rar {
        background-position: -196px -160px;
    }

    .e-fileexplorer .e-grid .e-fe-zip {
        background-position: -196px -188px;
    }

    .e-fileexplorer .e-grid .e-fe-txt {
        background-position: -196px -216px;
    }

    .e-fileexplorer .e-grid .e-fe-audio {
        background-position: -196px -244px;
    }

    .e-fileexplorer .e-grid .e-fe-video {
        background-position: -196px -272px;
    }

    .e-fileexplorer .e-grid .e-fe-js {
        background-position: -196px -300px;
    }

    .e-fileexplorer .e-grid .e-fe-css {
        background-position: -196px -328px;
    }

    .e-fileexplorer .e-grid .e-fe-html {
        background-position: -196px -356px;
    }

    .e-fileexplorer .e-grid .e-fe-php {
        background-position: -196px -384px;
    }

    .e-fileexplorer .e-grid .e-fe-exe {
        background-position: -196px -412px;
    }

    .e-fileexplorer .e-grid .e-fe-msi {
        background-position: -196px -440px;
    }

    .e-fileexplorer .e-grid .e-fe-unknown {
        background-position: -196px -468px;
    }

    .e-fileexplorer .e-grid .e-fe-rtf {
        background-position: -196px -496px;
    }

    .e-fileexplorer .e-grid .e-fe-xml {
        background-position: -196px -524px;
    }

    .e-fileexplorer .e-grid .e-fe-folder {
        background-position: -196px -552px;
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-doc, .e-fileexplorer .e-tile-wrapper .e-fe-docx, .e-fe .e-fe-icon.e-fe-docx, .e-fe .e-fe-icon.e-fe-doc {
        & when (@skin="office-365") {
            background-position: -124px -19px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -17px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-ppt, .e-fileexplorer .e-tile-wrapper .e-fe-pptx, .e-fe .e-fe-icon.e-fe-ppt, .e-fe .e-fe-icon.e-fe-pptx {
        & when (@skin="office-365") {
            background-position: -124px -81px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -94px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-xls, .e-fileexplorer .e-tile-wrapper .e-fe-xlsx, .e-fe .e-fe-icon.e-fe-xlsx, .e-fe .e-fe-icon.e-fe-xls {
        & when (@skin="office-365") {
            background-position: -124px -143px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -171px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-pdf, .e-fe .e-fe-icon.e-fe-pdf {
        & when (@skin="office-365") {
            background-position: -124px -205px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -248px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-images, .e-fe .e-fe-icon.e-fe-images {
        & when (@skin="office-365") {
            background-position: -124px -267px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -325px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-rar, .e-fe .e-fe-icon.e-fe-rar {
        & when (@skin="office-365") {
            background-position: -124px -329px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -402px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-zip, .e-fe .e-fe-icon.e-fe-zip {
        & when (@skin="office-365") {
            background-position: -124px -391px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -479px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-txt, .e-fe .e-fe-icon.e-fe-txt {
        & when (@skin="office-365") {
            background-position: -124px -453px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -556px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-audio, .e-fe .e-fe-icon.e-fe-audio {
        & when (@skin="office-365") {
            background-position: -124px -515px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -633px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-video, .e-fe .e-fe-icon.e-fe-video {
        & when (@skin="office-365") {
            background-position: -124px -577px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -710px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-js, .e-fe .e-fe-icon.e-fe-js {
        & when (@skin="office-365") {
            background-position: -124px -639px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -787px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-css, .e-fe .e-fe-icon.e-fe-css {
        & when (@skin="office-365") {
            background-position: -124px -701px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -864px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-html, .e-fe .e-fe-icon.e-fe-html {
        & when (@skin="office-365") {
            background-position: -124px -763px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -941px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-php, .e-fe .e-fe-icon.e-fe-php {
        & when (@skin="office-365") {
            background-position: -124px -825px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -1018px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-exe, .e-fe .e-fe-icon.e-fe-exe {
        & when (@skin="office-365") {
            background-position: -124px -887px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -1095px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-msi, .e-fe .e-fe-icon.e-fe-msi {
        & when (@skin="office-365") {
            background-position: -124px -949px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -1172px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-unknown, .e-fe .e-fe-icon.e-fe-unknown {
        & when (@skin="office-365") {
            background-position: -124px -1011px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -1249px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-rtf, .e-fe .e-fe-icon.e-fe-rtf {
        & when (@skin="office-365") {
            background-position: -124px -1073px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -1326px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-xml, .e-fe .e-fe-icon.e-fe-xml {
        & when (@skin="office-365") {
            background-position: -124px -1135px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -1403px;
        }
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-folder, .e-fe .e-fe-icon.e-fe-folder {
        & when (@skin="office-365") {
            background-position: -126px -1198px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -1480px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-doc, .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-docx {
        & when (@skin="office-365") {
            background-position: -127px -20px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -17px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-ppt, .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-pptx {
        & when (@skin="office-365") {
            background-position: -127px -82px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -79px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-xls, .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-xlsx {
        & when (@skin="office-365") {
            background-position: -127px -144px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -141px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-pdf {
        & when (@skin="office-365") {
            background-position: -127px -206px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -203px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-images {
        & when (@skin="office-365") {
            background-position: -127px -269px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -265px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-rar {
        & when (@skin="office-365") {
            background-position: -127px -330px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -327px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-zip {
        & when (@skin="office-365") {
            background-position: -127px -392px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -389px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-txt {
        & when (@skin="office-365") {
            background-position: -127px -454px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -451px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-audio {
        & when (@skin="office-365") {
            background-position: -127px -516px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -513px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-video {
        & when (@skin="office-365") {
            background-position: -127px -578px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -575px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-js {
        & when (@skin="office-365") {
            background-position: -127px -640px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -637px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-css {
        & when (@skin="office-365") {
            background-position: -127px -702px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -699px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-html {
        & when (@skin="office-365") {
            background-position: -127px -764px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -761px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-php {
        & when (@skin="office-365") {
            background-position: -127px -826px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -823px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-exe {
        & when (@skin="office-365") {
            background-position: -127px -888px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -885px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-msi {
        & when (@skin="office-365") {
            background-position: -127px -950px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -947px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-unknown {
        & when (@skin="office-365") {
            background-position: -127px -1012px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -1009px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-rtf {
        & when (@skin="office-365") {
            background-position: -127px -1074px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -1071px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-xml {
        & when (@skin="office-365") {
            background-position: -127px -1136px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -1133px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-folder {
        & when (@skin="office-365") {
            background-position: -127px -1198px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -1195px;
        }
    }

    .e-fileexplorer .e-treeview .e-fe-folder.e-fe-lock {
        background-position: -245px -40px;
    }

    .e-fileexplorer .e-grid .e-fe-folder.e-fe-lock {
        background-position: -196px -580px;
    }

    .e-fileexplorer .e-tile-wrapper .e-fe-folder.e-fe-lock {
        & when (@skin="office-365") {
            background-position: -126px -1260px;
        }

        & when not (@skin="office-365") {
            background-position: -21px -1557px;
        }
    }

    .e-fileexplorer .e-tile-wrapper.e-tileInfo-view .e-fe-folder.e-fe-lock {
        & when (@skin="office-365") {
            background-position: -127px -1261px;
        }

        & when not (@skin="office-365") {
            background-position: -116px -1258px;
        }
    }

    .e-fileexplorer.e-rtl .e-gridcontent tr td.e-grid-image {
        text-indent: -68px;
    }

    .e-fileexplorer .e-grid .e-headercell.e-grid-image .e-descending, .e-fileexplorer .e-grid .e-headercell.e-grid-image .e-ascending {
        padding: 0 2px;
    }

     .e-fe-split-context.e-menu.e-context > .e-list > a > span {
        & when not (@skin= "material") {
            margin: 0;
            padding: 0 4px;
        }
    }

    .e-fileexplorer.e-rtl .e-icon.e-fe-grid:before,  .e-fe-split-context.e-rtl .e-icon.e-fe-grid:before {
        content: "\e81c";
    }


    .e-fileexplorer .e-icon.e-fe-grid:before,  .e-fe-split-context .e-icon.e-fe-grid:before {
        content: "\e7b9";
    }

    .e-fileexplorer .e-icon.e-fe-largeicons:before,  .e-fe-split-context .e-icon.e-fe-largeicons:before {
        content: "\e7bb";
    }

    .e-fileexplorer.e-rtl .e-icon.e-fe-tile:before,  .e-fe-split-context.e-rtl .e-icon.e-fe-tile:before {
        content: "\e81b";
    }

    .e-fileexplorer .e-icon.e-fe-tile:before,  .e-fe-split-context .e-icon.e-fe-tile:before {
        content: "\e7be";
    }

    .e-fileexplorer .e-icon.e-fe-largeicons {
        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: 13px;
        }
    }

    .e-fileexplorer .e-tile-content {
        position: relative;
    }

    .e-fileexplorer .e-tilenode .e-chkbox-wrap {
        display: block;
        visibility: hidden;
        position: absolute;
        padding: 0px 2px 0px 2px;

        & when (@skin= "office-365") {
            margin-left: -5px;
            margin-top: -5px;
        }
    }

    .e-fileexplorer .e-gridcontent .e-chkbox-wrap {
        visibility: hidden;
    }

    .e-fileexplorer .e-tilenode.e-hover .e-chkbox-wrap, .e-fileexplorer .e-tilenode.e-active .e-chkbox-wrap, .e-fileexplorer .e-gridcontent .e-active .e-chkbox-wrap, .e-fileexplorer .e-gridcontent .e-hover .e-chkbox-wrap {
        visibility: visible;
    }

    .e-fileexplorer .e-grid .e-chkbox-wrap .e-chk-image.e-checkmark:before {
        text-indent: 0px;
    }

    .e-fileexplorer .e-gridcontent .e-chkbox-wrap .e-chkbox-small > span {
        top: 1px;
    }

    .e-fileexplorer .e-grid .e-headercell, .e-fileexplorer .e-grid .e-headercell-hover {
        & when not (@skin= "material") and not (@skin="office-365") {
            height: 30px;
        }
    }

    .e-fileexplorer .e-tilenode .e-chkbox-wrap .e-chkbox-small > span {
        height: 13px;
    }

    .fe-context-menu.e-menu.e-context > .e-list > .e-menulink {
        & when (@skin= "material") {
            padding: 3px 28px 3px 28px;
        }
    }

    .e-fileexplorer .e-tilenode .e-chkbox-wrap .e-chkbox-small {
        & when (@skin= "material") {
            margin: 8px 6px;
        }
    }

    .e-fileexplorer .e-grid .e-table {
        & when (@skin= "office-365") {
            padding: 0px 12px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            padding: 0 6px;
        }
    }

    .e-fileexplorer .e-grid .e-widget [class^="e-"] {
        & when (@skin= "material") {
            box-sizing: content-box;
        }
    }

    .e-fileexplorer .e-grid .e-gridheader .e-headercell.e-col-check {
        & when (@skin= "material") {
            padding-top: 8px;
        }
    }

    .e-fileexplorer .e-gridheader .e-headercell .e-headercelldiv {
        padding: 0px 3px;
    }

    .e-fileexplorer th.e-headercell.e-default.e-col-check.e-defaultcursor {
        text-align: center;
    }

    .e-fileexplorer .e-grid .e-gridcontent .e-rowcell {
        padding-left: 3px;
        padding-right: 3px;
        text-overflow: ellipsis;

        & when not (@skin= "material") and not (@skin="office-365") {
            line-height: 12px;
        }
    }

    .e-fileexplorer .e-splitter .e-activebar.e-h-arrow {
        & when (@skin= "material"), (@skin= "office-365") {
            display: none !important;
        }
    }

    .e-fileexplorer .e-grid .e-gridcontent .e-rowcell.e-col-check, .e-fileexplorer .e-grid .e-headercell.e-col-check,
    .e-fileexplorer .e-grid .e-textover .e-headercelldiv.e-col-check {
        & when (@skin= "material") {
            overflow: visible;
        }
    }

    .e-fileexplorer .e-grid .e-col-check input {
        height: initial;
        line-height: initial;
        margin-top: 0px;
    }

    .e-fileexplorer.e-rtl .e-addressBar {
        direction: ltr;
        text-align: right;
        padding-right: 27px;
        width: 228px;
        padding-left: 5px;
    }

    .e-fileexplorer.e-corner-all .e-item .e-text, .e-fileexplorer.e-corner-all .e-tilenode, .e-fileexplorer.e-corner-all input,
    .e-fe-dialog.e-corner input, .e-fe-dialog.e-corner button, .fe-context-menu.e-corner ul, .e-fe-toolbar.e-corner .e-tool-input,
    .e-fileexplorer.e-corner-all .e-scrollbar .e-vhandle, .e-fileexplorer.e-corner-all .e-scrollbar .e-hhandle {
        border-radius: 4px 4px 4px 4px;
    }

    .e-fileexplorer.e-corner-all .e-grid tr td:first-child, .e-fileexplorer.e-rtl.e-corner-all .e-grid tr td.e-last-rowcell {
        border-radius: 4px 0 0 4px;
    }

    .e-fileexplorer.e-corner-all .e-grid tr td.e-last-rowcell, .e-fileexplorer.e-rtl.e-corner-all .e-grid tr td:first-child {
        border-radius: 0 4px 4px 0;
    }

    .e-fileexplorer .e-toolbar .e-splitbutton > span:first-child {
        display: table;
    }

    .e-fileexplorer .e-toolbar .e-splitbutton > span:first-child .e-icon {
        width: 14px;
        height: 14px;
        padding: 0 3px;
    }

    .e-fe-mobile.e-toolbar.e-responsive-toolbar {
        width: auto;
        max-width: 100%;
    }

    .e-fileexplorer.e-fe-mobile .e-toolbar .e-addressBar, .e-fe-toolbar.e-fe-mobile .e-addressBar {
        width: 140px;
    }

    .e-fileexplorer.e-fe-mobile .e-toolbar .e-searchBar, .e-fe-toolbar.e-fe-mobile .e-searchBar {
        width: 80px;
    }

    .e-fileexplorer .e-mobile-upload.e-uploadbox .e-ul > li {
        height: 100%;
    }

    .e-fileexplorer .e-mobile-upload.e-uploadbox .e-file-list .e-file-progress {
        width: 200px;
    }

    .e-fileexplorer .e-mobile-upload.e-uploadbox .e-file-list .e-file-size {
        margin-left: 0px;
    }

    .e-fileexplorer .e-mobile-upload.e-uploadbox .e-file-list .e-file-percentage {
        width: 185px;
        margin-left: 0px;
    }

    .e-fileexplorer .e-mobile-upload.e-uploadbox .e-file-upload .e-action-container {
        margin: 0 auto 8px auto;
        width: 160px;
        padding-top: 10px;
    }

    .e-fileexplorer .e-mobile-upload.e-uploadbox .e-uploadbtn, .e-fileexplorer .e-mobile-upload.e-uploadbox .e-uploadclosebtn {
        margin-left: 0;
    }

    .e-fileexplorer .e-fe-popup span {
        display: inline-block;
        height: 16px;
        cursor: pointer;
        padding: 4px;
        border: 1px solid transparent;
        width: 16px;
    }

    .e-fileexplorer .e-fe-popup .e-tail:before, .e-fileexplorer .e-fe-popup .e-tail:after {
        border: 10px solid transparent;
        content: "";
        height: 0;
        left: 8px;
        position: absolute;
        width: 0;
    }

    .e-fileexplorer .e-fe-popup {
        position: absolute;
        font-weight: normal;
        z-index: 99999;
    }

    .e-fileexplorer .e-fe-popup .e-content {
        border-radius: 4px;
        font-size: 14px;
        padding: 4px 4px;
    }

    .e-fileexplorer .e-fe-popup .e-content {
        border-width: 1px;
        border-style: solid;
    }

    .e-fileexplorer .e-fe-popup .e-downtail:after {
        top: 34px;
    }

    .e-fileexplorer.e-fe-mobile .e-fe-split-icon {
        position: absolute;
        top: 50%;
        left: -4px;
        cursor: pointer;
    }

    .e-fileexplorer.e-fe-mobile .e-splitter .e-fe-split-icon .e-icon {
        visibility: visible;
    }

    .e-fileexplorer.e-fe-mobile .e-fe-split-icon {
        position: absolute;
        top: 41%;
        left: 0px;
        width: 14px;
        cursor: pointer;
        border: 1px solid;
        border-radius: 0 10px 10px 0;
        height: 40px;
    }

    .e-fileexplorer.e-fe-mobile .e-splitter .e-splitbar {
        overflow: visible;
    }

    .e-fileexplorer.e-fe-mobile .e-splitter .e-fe-split-icon .e-icon {
        font-size: 18px;
    }

    .e-fileexplorer.e-fe-mobile .e-splitter .e-fe-split-icon .e-icon:before {
        position: absolute;
        left: -3px;
        top: 12px;
    }

    .e-fileexplorer.e-fe-mobile .e-grid .e-table {
        padding: 0 20px;
    }

    .e-fileexplorer.e-fe-mobile .e-tileview {
        margin-left: 20px;
        margin-right: 20px;
    }

    .e-fileexplorer .e-tilenode {
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .e-fileexplorer .e-grid .e-gridcontent .e-rowcell.e-col-check {
        & when not (@skin="office-365") {
            line-height: 10px;
            padding-top: 3px;
        }
    }

    .e-fileexplorer .e-chkbox-wrap .e-checkmark {
        line-height: 14px;
    }

    .e-fileexplorer, .e-fileexplorer .e-splitter .e-cont1, .e-fileexplorer .e-splitter .e-cont2, .e-fileexplorer input,
    .e-fe-toolbar.e-responsive-toolbar .e-tool-input,
    .e-fe-dialog input {
        border-radius: @border-radius;
    }

    .e-fileexplorer .e-cont1 .e-hhandlespace {
        border-bottom-left-radius: @border-radius;
    }

    .e-fileexplorer.e-rtl .e-cont1 .e-hhandlespace {
        border-bottom-right-radius: @border-radius;
    }

    .e-fileexplorer .e-tile-wrapper .e-vhandlespace {
        border-top-right-radius: @border-radius;
    }

    .e-fileexplorer.e-rtl .e-tile-wrapper.e-rtl .e-vhandlespace {
        border-top-left-radius: @border-radius;
    }

    .e-fileexplorer.e-fe-small .e-fe-dialog-text {
        width: 97%;
    }

    .e-fileexplorer.e-fe-small .e-fe-dialog-btn {
        width: 80%;
    }

    .e-fileexplorer.e-fe-short .e-tileInfo-view .e-tilenode {
        width: 100%;
    }

    .e-fileexplorer.e-fe-short .e-tileInfo-view .e-name-wrap .e-name.e-name-in-wrap div, .e-fileexplorer.e-fe-short .e-tileInfo-view .e-tilenode .e-name-wrap {
        width: 100px;
    }

    .e-fileexplorer .e-statusbar .e-button.e-btn:after {
        & when (@skin= "material") {
            width: 30%;
            height: 30%;
            left: 35%;
            top: 35%;
        }
    }

    .e-fileexplorer.e-js .e-tilenode {
        & when (@skin="office-365") {
            padding: 8px 10px;
            box-sizing: border-box;
        }
    }

    .e-fileexplorer .e-tile-wrapper:not(.e-tileInfo-view) .e-thumbImage {
        & when (@skin="office-365") {
            padding: 0px;
            max-height: 55px;
            max-width: 48px;
        }
    }

    .e-fileexplorer .e-tile-wrapper:not(.e-tileInfo-view) .e-thumbImage.e-fe-icon {
        & when (@skin="office-365") {
            width: 48px;
            height: 55px;
        }
    }

    .e-fileexplorer .e-tile-wrapper:not(.e-tileInfo-view) .e-tilenode .e-image {
        & when (@skin="office-365") {
            width: 48px;
        }
    }

    .e-fileexplorer .e-tile-wrapper:not(.e-tileInfo-view) .e-tilenode .e-align {
        & when (@skin="office-365") {
            margin: 5px;
        }
    }

    .e-fileexplorer .e-tile-wrapper:not(.e-tileInfo-view) .e-tilenode {
        & when (@skin="office-365") {
            width: 80px;
        }
    }

    .e-fileexplorer.e-js .e-tile-wrapper:not(.e-tileInfo-view) .e-tilenode {
        & when (@skin="office-365") {
            padding: 7px 10px 10px 10px;
        }
    }

    .e-fileexplorer.e-js .e-tile-wrapper:not(.e-tileInfo-view) .e-tilenode .e-name-wrap {
        & when (@skin="office-365") {
            margin-top: 5px;
        }
    }

    .e-fileexplorer .e-tile-wrapper:not(.e-tileInfo-view) .e-tilenode .e-chkbox-wrap {
        & when (@skin="office-365") {
            padding: 0px;
            margin-left: -4px;
            margin-top: -4px;
        }
    }

     .e-fe-dialog-text.e-ejinputtext,
    .e-fe-dialog .e-error-msg {
        & when (@skin="office-365") {
            margin-top: 0px;
        }
    }

     .e-fe-dialog-label {
        & when (@skin="office-365") {
            margin-bottom: 10px;
            font-weight: bold;
        }
    }

    .e-fileexplorer .e-statusbar .e-switchView .e-button,
    .e-fileexplorer .e-statusbar .e-switchView .e-button:hover {
        & when (@skin="office-365") {
            height: 28px;
            width: 28px;
        }
    }

    .e-fileexplorer.e-rtl .e-tilenode .e-chkbox-wrap {
        & when (@skin="office-365") {
            margin-right: -5px;
        }
    }

    .e-fileexplorer.e-rtl .e-tile-wrapper:not(.e-tileInfo-view) .e-tilenode .e-chkbox-wrap {
        & when (@skin="office-365") {
            margin-right: -4px;
        }
    }

    .e-fileexplorer.e-rtl .e-tileInfo-view .e-name-wrap {
        & when (@skin="office-365") {
            padding-right: 10px;
            padding-left: 0px;
        }
    }

    .e-fileexplorer .e-draggable {
        touch-action: none;
    }
}

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

    .e-rte-wrapper {
        display: block;
    }

    .e-rte-imageTab ul {
        list-style: none;
    }

    .e-rte .e-rte-toolbar {
        width: 100%;
        height: auto;
        margin-bottom: -2px;

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

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

    .e-rte .editarea {
        margin-bottom: -4px;
        padding-top: 3px;
    }

    .e-rte .content-iframe {
        border: none;
        margin: 0px;
    }

     .e-rte-fontgroup .e-split-btn-div .e-icon, .e-rte-lists .e-split-btn-div .e-icon {
        padding: 0px;
    }

     .e-rte-fontgroup .e-splitarrowright .e-split-btn.e-rht-btn, .e-rte-fontgroup .e-splitarrowright .e-split-btn.e-btn-txt, .e-rte-lists .e-splitarrowright .e-split-btn.e-rht-btn, .e-rte-lists .e-splitarrowright .e-split-btn.e-btn-txt {
        width: 15px;
    }

     .e-rte-fontgroup .e-split .e-padding.e-splitarrowright, .e-rte-lists .e-split .e-padding.e-splitarrowright {
        padding: 0px 15px 0 0;
    }

     .e-rte-fontgroup .e-split.e-rtl .e-padding.e-splitarrowright, .e-rte-lists .e-split.e-rtl .e-padding.e-splitarrowright {
        padding: 0px 0 0 15px;
    }

    .e-rte .e-resizable-handle {
        bottom: 0;
        cursor: se-resize;
        display: block;
        height: 16px;
        position: absolute;
        right: 0;
        width: 16px;
    }

     .e-rte-toolbar-icon:before {
        & when (@skin= "material") {
            /*material*/
            color: fade(#000000,54%);
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                /*office-365*/
                margin-top: 0px;
            }

            & when not (@skin= "office-365") {
                /*other*/
                margin-top: 5px;
            }
        }
    }

     .e-tooltxt.e-disable .e-rte-toolbar-icon:before {
        & when (@skin= "material") {
            /*material*/
            color: fade(#000000,26%);
        }
    }

    .e-rte-context-menu .e-rte-toolbar-icon:before {
        margin-top: 0px;
    }

    .e-rte-context-menu.e-context .e-list {
        cursor: default;
    }

    .e-rte .e-ipadscroll {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .e-rte.e-resizable .e-rte-overlay, .e-pane-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .e-rte-format-ddl.e-ddl-popup div > ul li {
        & when (@skin= "material") {
            /*material*/
            padding: none;
        }

        & when not (@skin= "material") {
            /*other*/
            padding: 5px 5px 5px 11px;
        }
    }

    .e-rte-format-ddl.e-ddl-popup.e-rtl div > ul li {
        & when (@skin= "material") {
            /*material*/
            padding: 15px 18px 15px 0;
        }

        & when not (@skin= "material") {
            /*other*/
            padding: 11px 5px 5px 5px;
        }
    }

    .e-rte.e-rte-wrapper .e-ul.e-horizontal {
        & when (@skin= "material") {
            /*material*/
            margin-bottom: @rte-ul-margin-buttom;
            margin-top: 7px;
            height: 36px;
        }

        & when not (@skin= "material") {
            /*other*/
            & when not (@skin= "default") {
                margin-bottom: @rte-ul-margin-buttom;
                margin-top: @rte-ul-margin-top;
            }
        }
    }

    .e-rte.e-rte-wrapper .e-ul.e-horizontal {
        & when (@skin= "office-365") {
            margin-bottom: 0px;
            margin-top: 0px;
        }
    }

     .e-responsive-toolbar.e-inline .e-ul.e-horizontal.e-rte-fontgroup {
        & when (@skin= "material") {
            /*material*/
            height: inherit;
        }
    }

     .e-responsive-toolbar.e-inline .e-ul.e-horizontal {
        & when (@skin= "material") {
            /*material*/
            padding-left: 4px;
            padding-right: 4px;
        }
    }

     .e-responsive-toolbar.e-inline .e-ul.e-horizontal.e-rte-fontgroup > li {
        & when (@skin= "material") {
            /*material*/
            padding: 2px;
        }
    }

     .e-responsive-toolbar.e-inline {
        border-right: 0px;
        border-left: 0px;
        border-bottom: 0px;
    }

    .e-rte .e-toolbar .e-icon.e-toolbar-res-arrow:before {
        width: 21px;
        height: 21px;

        & when (@skin= "office-365") {
            /*office-365*/
            margin-top: 9px;
        }

        & when (@skin= "material") {
            /*material*/
            margin-top: @rte-toolbar-res-margin-top;
        }

        & when not (@skin= "material") {
            /*other*/
            & when not (@skin= "office-365") {
                margin-top: 0px;
                padding-top: 2px;
            }
        }
    }

    .e-rte .e-split.e-btn-normal .e-drp-btn .e-split-btn-div {
        & when (@skin= "material") {
            /*material*/
            width: 24px;
            margin-left: -1px;
            margin-top: -6px;
        }
    }

    .e-rte .e-split .e-in-wrap .e-left-btn .e-icon:before {
        & when (@skin= "material") {
            /*material*/
            font-size: 16px;
        }
    }

    .e-rte .e-toolbar.e-rtl .e-rte-format.e-ul.e-horizontal.e-separator {
        & when (@skin= "material") {
            border-right: 0px;
        }
    }

     .e-rteItem-unorderedList.e-tooltxt .e-split.e-btn-normal {
        & when (@skin= "office-365") {
            /*office-365*/
            height: 38px !important;
        }
    }

     .e-rteItem-unorderedList.e-tooltxt.e-active .e-splitbutton.e-btn.e-left-btn:focus, .e-rteItem-unorderedList.e-tooltxt.e-active .e-split-btn.e-btn.e-select.e-drp-btn:focus,
     .e-rteItem-orderedList.e-tooltxt.e-active .e-splitbutton.e-btn.e-left-btn:focus, .e-rteItem-orderedList.e-tooltxt.e-active .e-split-btn.e-btn.e-select.e-drp-btn:focus {
        & when (@skin= "office-365") {
            /*office-365*/
            border: 0px;
        }
    }
    /*-----------------------For Tab inside RTE Dialog----------------------*/
    .e-rte .e-dialog .e-tab .e-img-field-group {
        display: inline-block;
        width: 100%;
    }

    .e-rte .e-dialog .e-tab .e-rte-field {
        width: 67%;
    }

    .e-rte .e-dialog .e-tab .e-rte-label {
        width: 31%;
    }

    .e-rte .e-dialog .e-tab .e-img-border-field {
        width: 30%;
        float: left;
        padding-right: 0.6em;
    }

    .e-rte .e-dialog .e-tab .e-rte-field .e-inputtext {
        width: 95%;
    }

    .e-rte .e-dialog .e-tab .e-rte-field .e-dimensions {
        width: 50px;
    }

    .e-rte .e-dialog .e-rte-tablefields {
        padding: 1em 0.3em 0.3em;
    }

    .e-rte.e-rtl .e-dialog .e-tab .e-img-border-field:nth-child(1) {
        padding: 0;
    }

    .e-rte.e-rtl .e-dialog .e-tab .e-img-border-field {
        float: right;
    }

    .e-rte .e-dialog .e-tab .e-rte-stylefield {
        display: inline-block;
        float: right;
        margin-top: 1em;
        vertical-align: middle;
        width: 75%;
    }

    .e-rte .e-dialog .e-tab .e-rte-stylefield .e-inputtext {
        width: 95%;
    }

    .e-rte .e-dialog .e-dialog-tab .e-header {
        border-width: 0px;
    }

    .e-rte .e-tab .e-activetop, .e-rte .e-tab .e-activebottom {
        border: 0px solid;
    }

    .e-rte .e-tab .e-header .e-nofirst {
        margin-left: 4px;
    }

    .e-rte .e-dialog .e-dialog-tab.e-tab .e-bottom-line, .e-rte .e-dialog .e-dialog-tab.e-tab .e-top-line, .e-rte .e-dialog .e-dialog-tab.e-tab .e-activetop, .e-rte .e-dialog .e-dialog-tab.e-tab .e-activebottom {
        border: 0px solid;
    }

    .e-rte .e-dialog .e-dialog-tab.e-tab .e-header li {
        border-right: 1px solid;
    }

    .e-rte.e-dialog .e-rte-imgUrl, .e-rte.e-dialog .e-rte-fileUrl {
        text-overflow: ellipsis;
    }

     .e-rte-imgTab .e-content .e-colorwidget.e-widget {
        height: 30px;
    }
    /*-----------------------Toolbar CSS----------------------*/
    .e-rte .e-background-color, .e-rteItem-backgroundColor .e-background-color,
    .e-rte .e-font, .e-rteItem-fontColor .e-font,
     .e-rte-toolbar-icon {
        display: block;

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                /*material*/
                height: 16px;
                width: 16px;
            }

            & when not (@skin= "office-365") {
                /*other*/
                height: 24px;
                width: 24px;
            }
        }
    }

    .e-rte .e-horizontal .e-tooltxt {
        cursor: pointer;
    }

    .e-rte .e-toolbar .e-ul.e-horizontal.e-separator .e-rteItem-createTable.e-tooltxt, .e-rte .e-toolbar .e-ul.e-horizontal.e-separator .e-rteItem-clearFormat.e-tooltxt,
     .e-responsive-toolbar.e-toolbar .e-ul.e-horizontal.e-separator .e-rteItem-createTable.e-tooltxt, .e-responsive-toolbar.e-toolbar .e-ul.e-horizontal.e-separator .e-rteItem-clearFormat.e-tooltxt {
        & when (@skin= "material") {
            /*other*/
            margin-right: 4px;
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                /*other*/
                margin-right: 8px;
            }
        }
    }

     .e-rte-toolbar .e-icon.e-res-pos.e-arrow-sans-down {

        & when not (@skin= "material") {
            /*other*/
            margin-top: 10px;
        }

        & when (@skin= "material") {
            /*material*/
            padding-top: 12px;
        }
    }

     .e-rte-toolbar .e-icon.e-res-pos.e-arrow-sans-down.e-active {
        & when (@skin= "material") {
            transform: rotate(180deg);
            margin-top: 10px;
        }
    }

    .e-rte.e-rte-wrapper .e-horizontal {
        & when (@skin= "material") {
            /*other*/
            padding-left: 0px;
            padding-right: 0px;
            margin-bottom: 4px;
            margin-top: 4px;
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                /*office-365*/
                padding-left: 0px;
                padding-right: 0px;
                margin-bottom: 0px;
                margin-top: 0px;
            }

            & when not (@skin= "office-365") {
                /*office-365*/
                padding-left: 4px;
                padding-right: 4px;
                margin-bottom: 4px;
                margin-top: 4px;
            }
        }
    }

    .e-rte .e-toolbar .e-rte-format,
    .e-rte .e-toolbar .e-rte-fontgroup,
    .e-rte .e-toolbar .e-rte-lists {
        margin: 2px 0;

        & when (@skin= "office-365") {
            /*office-365*/
            padding-left: 0px;
            padding-right: 0px;
        }

        & when not (@skin= "office-365") {
            /*office-365*/
            padding-left: 2px;
            padding-right: 2px;
        }
    }

    .e-rte .e-toolbar .e-rte-format > li,
    .e-rte .e-toolbar .e-rte-fontgroup > li,
    .e-rte .e-toolbar .e-rte-lists > li {
        & when (@skin= "material") {
            /*other*/
            border-width: 0px;
            padding: 0px;
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                /*office-365*/
                border-width: 0px;
                padding: 1px;
            }

            & when not (@skin= "office-365") {
                /*office-365*/
                border-width: 1px;
                padding: 1px;
            }
        }
    }

    .e-rte .e-toolbar .e-rte-fontgroup > li.e-rteItem-fontColor,
    .e-rte .e-toolbar .e-rte-fontgroup > li.e-rteItem-backgroundColor {
        & when not (@skin= "office-365") {
            /*office-365*/
            padding: 1px;
        }
    }

    .e-rte .e-rte-toolbar .e-input {
        font-size: 13px;
        line-height: 20px;
    }

    .e-rte .e-rte-toolbar .e-input.e-dropdownlist {
        line-height: 20px;
    }

     .e-rte-toolbar .e-responsive-toolbar.e-toolbarspan {
        & when not(@skin= "material") and not (@skin="office-365") {
            border-style: solid;
        }

        border-width: 1px;
    }
    /*-----------------Icon Set---------------------*/
     .e-rte-toolbar-icon.e-bold_01:before {
        content: "\e79b";
    }

     .e-rte-toolbar-icon.e-full-screen-expand_01:before {
        content: "\e793";
    }

     .e-rte-toolbar-icon.e-full-screen-collapse_01:before {
        content: "\e792";
    }

     .e-rte-toolbar-icon.e-italic_01:before {
        content: "\e7a4";
    }

     .e-rte-toolbar-icon.e-underline_01:before {
        content: "\e7ad";
    }

     .e-rte-toolbar-icon.e-strikethrough_01:before {
        content: "\e7aa";
    }

     .e-rte-toolbar-icon.e-align-left_01:before {
        content: "\e799";
    }

     .e-rte-toolbar-icon.e-align-center_01:before {
        content: "\e79d";
    }

     .e-rte-toolbar-icon.e-align-right_01:before {
        content: "\e79a";
    }

     .e-rte-toolbar-icon.e-align-justify_01:before {
        content: "\e7a5";
    }

     .e-rte-toolbar-icon.e-bullets_01:before {
        content: "\e79c";
    }

     .e-rte-toolbar-icon.orderedList,  .e-rte-toolbar-icon.e-bullets_01 {
        padding: 0px;
    }

     .e-rte-toolbar-icon.e-bullets_01:before,  .e-rte-toolbar-icon.orderedList:before {
        & when (@skin= "material") {
            /*other*/
            margin-top: 6px;
            margin-left: -2px;
        }

        & when not (@skin= "material") {
            /*other*/
            margin-top: 0px;
        }
    }

    .e-rte .e-toolbar.e-rtl .e-rte-toolbar-icon.e-bullets_01:before, .e-rte .e-toolbar.e-rtl .e-rte-toolbar-icon.orderedList:before {
        & when (@skin= "material") {
            /*other*/
            margin-right: -2px;
        }
    }

     .e-rteItem-unorderedList .e-split-btn.e-drp-btn .e-icon.e-arrow-sans-down:before,  .e-rteItem-orderedList .e-split-btn.e-drp-btn .e-icon.e-arrow-sans-down:before {
        & when (@skin= "material") {
            /*other*/
            margin-top: 4px;
        }
    }

     .e-rte-toolbar-icon.orderedList:before {
        content: "\e7e6";
    }

     .e-rte-toolbar-icon.indent:before {
        content: "\e7a3";
    }

     .e-rte-toolbar-icon.outdent:before {
        content: "\e7a1";
    }

     .e-rte-toolbar-icon.e-cut_01:before {
        content: "\e7a0";
    }

     .e-rte-toolbar-icon.e-copy_02:before {
        content: "\e79f";
    }

     .e-rte-toolbar-icon.e-paste_01:before {
        content: "\e7a7";
    }

     .e-rte-toolbar-icon.undo:before {
        content: "\e7ae";
    }

     .e-rte-toolbar-icon.redo:before {
        content: "\e7a9";
    }

     .e-rte-toolbar-icon.e-link_01:before {
        content: "\e7b6";
    }

     .e-rte-toolbar-icon.e-unlink_01:before {
        content: "\e7b4";
    }

     .e-rte-toolbar-icon.e-image:before, .e-rte-toolbar-icon.imageProperties:before {
        content: "\e7a8";
    }

     .e-rte-toolbar-icon.e-fileBrowser:before {
        content: "\e78f";
    }

     .e-rte-toolbar-icon.e-video:before {
        content: "\e797";
    }

     .e-rte-toolbar-icon.e-table_02:before, .e-rte-toolbar-icon.insertTable:before {
        content: "\e78c";
    }

     .e-rte-toolbar-icon.e-insert-row-above_02:before {
        content: "\e7b0";
    }

     .e-rte-toolbar-icon.e-insert-row-below_02:before {
        content: "\e7b1";
    }

     .e-rte-toolbar-icon.e-insert-column-left_02:before {
        content: "\e7b2";
    }

     .e-rte-toolbar-icon.e-insert-column-right_02:before {
        content: "\e7b3";
    }

     .e-rte-toolbar-icon.e-delete-row_01:before {
        content: "\e78e";
    }

     .e-rte-toolbar-icon.e-delete-column_01:before {
        content: "\e78d";
    }

     .e-rte-toolbar-icon.deleteTable:before, .e-rte-toolbar-icon.deleteTables:before {
        content: "\e7af";
    }

     .e-rte-toolbar-icon.e-superscript_01:before {
        content: "\e7ac";
    }

     .e-rte-toolbar-icon.e-subscript_01:before {
        content: "\e7ab";
    }

     .e-rte-toolbar-icon.e-uppercase_01:before {
        content: "\e796";
    }

     .e-rte-toolbar-icon.e-lowercase_01:before {
        content: "\e791";
    }

     .e-rte-toolbar-icon.e-zoom-in:before {
        content: "\e64e";
    }

     .e-rte-toolbar-icon.e-zoom-out:before {
        content: "\e64d";
    }

     .e-rte-toolbar-icon.print:before {
        content: "\e742";
    }


    .e-rte .e-file-code:before {
        content: "\e7b5";
    }

     .e-rte-footer .clearFormat:before, .e-rte-toolbar-icon.clearFormat:before {
        content: "\e79e";
    }

     .e-rte-footer .e-delete_05:before, .e-rte-toolbar-icon.e-delete_05:before {
        content: "\e7a2";
    }

    .e-rte .e-font:before, .e-rteItem-fontColor .e-font:before {
        content: "\e632";
        margin-top: 4px;

        & when (@skin= "office-365") {
            /*office-365*/
            margin-left: 2px;
        }
    }


    .e-rte .e-background-color:before, .e-rteItem-backgroundColor .e-background-color:before {
        content: "\e618";
        margin-top: 4px;
    }

    .e-dialog .customtable-image:before, .e-rte .e-dialog .e-table:before, .e-rte-toolbar-icon.tableProperties:before {
        content: "\e612";
    }

     .e-rte-listitems:before, .e-rte-unlistitems:before {
        & when (@skin= "material") {
            /*material*/
            border: 1px solid rgba(0,0,0,.12);
            font-size: 14px;
            width: 28px;
            height: 28px;
            margin: 0px;
            padding: 6px;
        }

        & when not (@skin= "material") {
            /*material*/
            font-size: 32px;
            width: 32px;
            height: 32px;

            & when (@skin= "office-365") {
                /*office-365*/
                margin: -2px auto;
            }

            & when not (@skin= "office-365") {
                /*office-365*/
                margin: 0px;
            }
        }
    }

     .e-rte-listitems:before {
        & when (@skin= "office-365") {
            /*office-365*/
            font-size: 20px;
            margin: 0px 6px;
        }
    }

    .e-rte-unorderlistname .e-list .e-rte-toolbar-icon.e-rte-unlistitems.e-menulink, .e-rte-orderlistname .e-list .e-rte-toolbar-icon.e-rte-unlistitems.e-menulink {
        & when (@skin= "material") {
            /*material*/
            padding-right: 11px;
            width: 28px;
            padding: 4px 4px 4px 10px;
        }
    }

    .e-rtl .e-rte-unlistitems:before, .e-rtl .e-rte-unlistitems:before {
        & when (@skin= "material") {
            /*material*/
            border: 1px solid rgba(0,0,0,.12);
            font-size: 14px;
            width: 28px;
            height: 28px;
            margin: 0px;
            padding: 6px;
        }
    }

     .e-rte-toolbar-icon.e-rte-unlistitems.customUnOrder.e-list, .e-rte-toolbar-icon.e-rte-listitems.customOrder.e-list {
        & when (@skin= "material") {
            /*material*/
            padding: 4px 0px 4px 0px;
        }
    }

     .e-rte-toolbar-icon.e-loweralpha-icon:before {
        content: "\e7e9";
    }

     .e-rte-toolbar-icon.e-numbering-icon:before {
        content: "\e7eb";
    }

     .e-rte-toolbar-icon.e-upperalpha-icon:before {
        content: "\e7ed";
    }

     .e-rte-toolbar-icon.e-lowerroman-icon:before {
        content: "\e7ea";
    }

     .e-rte-toolbar-icon.e-upperroman-icon:before {
        content: "\e7ee";
    }

     .e-rte-toolbar-icon.e-circlelist-icon:before {
        content: "\e7e8";
    }

     .e-rte-toolbar-icon.e-squarelist-icon:before {
        content: "\e7ec";
    }

     .e-rte-toolbar-icon.e-disclist-icon:before {
        content: "\e7e7";
    }

     .e-rte-toolbar-icon.e-nonelist-icon:before {
        content: "\e7ef";

        & when (@skin= "material") {
            /*material*/
            font-weight: 600;
        }
    }

    .e-rte-orderlistname.e-menu .e-list > span.e-rte-toolbar-icon,
    .e-rte-orderlistname.e-menu.e-context.e-rtl > .e-list > span.e-rte-toolbar-icon,
    .e-rte-unorderlistname.e-menu .e-list > span.e-rte-toolbar-icon,
    .e-rte-unorderlistname.e-menu.e-context.e-rtl > .e-list > span.e-rte-toolbar-icon {
        & when (@skin= "material") {
            /*material*/
            padding: 4px 4px 4px 10px;
        }

        & when not (@skin= "material") {
            /*material*/
            & when (@skin= "office-365") {
                /*office-365*/
                padding: 0px;
            }

            & when not (@skin= "office-365") {
                /*office-365*/
                padding: 4px 4px 4px 4px;
            }
        }
    }

    .e-rte-unorderlistname.e-menu.e-rtl .e-list > span.e-rte-toolbar-icon,
    .e-rte-unorderlistname.e-menu.e-rtl > .e-list > span.e-rte-toolbar-icon {
        & when (@skin= "material") {
            /*material*/
            padding: 4px 10px 4px 10px;
        }
    }

    .e-rte-orderlistname.e-menu.e-rtl .e-list > span.e-rte-toolbar-icon,
    .e-rte-orderlistname.e-menu.e-rtl > .e-list > span.e-rte-toolbar-icon {
        & when (@skin= "material") {
            /*material*/
            padding: 4px 6px 4px 10px;
        }
    }

    .e-rte-orderlistname.e-menu .e-list > span.e-rte-toolbar-icon {
        & when (@skin= "material") {
            /*material*/
            padding: 4px 4px 4px 7px;
        }
    }

    .e-rte-unorderlistname.e-menu {
        & when (@skin= "material") {
            /*material*/
            width: 100px !important;
            border: 0px;
            padding: 0px;
        }
    }
    /*-----------------Footer------------------------*/
    .e-rte .e-rte-footer {
        width: 100%;
        margin-top: 2px;
        font-family: monospace;
    }

    .e-rte .e-rte-footer:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }

    .e-rte .e-rte-footeritems {
        height: 16px;
        display: inline-block;
        vertical-align: middle;
        text-align: left;
    }

    .e-rte .e-rte-footer .e-rte-footer-left {
        display: inline-block;
        text-align: left;
        float: left;
    }

    .e-rte .e-rte-footer.e-rtl .e-rte-footer-left {
        float: right;
    }

    .e-rte .e-rte-footer .e-rte-footer-right {
        display: inline-block;
        text-align: right;
        float: right;
    }

    .e-rte .e-rte-footer.e-rtl .e-rte-footer-right {
        float: left;
    }

    .e-rte .e-rte-footericon {
        height: 16px;
        width: 16px;
        cursor: pointer;
        padding: 3px;
    }

    .e-rte .e-rte-htmltaginfo {
        margin-bottom: 5px;
        padding-left: 9px;
    }

    .e-rte .e-rte-wordcount, .e-rte .e-rte-charcount {
        padding: 2px 4px 4px 4px;
    }

    .e-ddl-popup .e-h1 {
        font-size: 2em;
        font-weight: bold;
    }

    .e-ddl-popup .e-h2 {
        font-size: 1.5em;
        font-weight: bold;
    }

    .e-ddl-popup .e-h3 {
        font-size: 1.16em;
        font-weight: bold;
    }

    .e-ddl-popup .e-h4 {
        font-size: 1em;
        font-weight: bold;
    }

    .e-ddl-popup .e-h5 {
        font-size: 0.83em;
        font-weight: bold;
    }

    .e-ddl-popup .e-h6 {
        font-size: 0.7em;
        font-weight: bold;
    }

    .e-rte .e-btntxt,  .e-rteItem-fontColor .e-btntxt,  .e-rteItem-backgroundColor .e-btntxt {
        display: table-caption;
        height: 0px;
        margin-left: 1px;
        width: 16px;

        & when (@skin= "office-365") {
            /*office-365*/
            margin-top: 1px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            margin-top: -5px;
        }
    }

    .e-rte .e-background-color,  .e-rteItem-backgroundColor .e-background-color,
    .e-rte .e-font,  .e-rteItem-fontColor .e-font {
        padding: 0;
        margin-top: -5px;
    }

    .e-rte-context-menu.e-context .e-rte-separator {
        border-bottom: 1px solid;
    }
    /*------------------Table Style------------------*/
    .e-rte .e-rte-tablecell {
        border-style: solid;
        border-width: 1px;
        display: inline-block;
        height: 18px;
        margin: 1px;
        overflow: hidden;
        vertical-align: top;
        width: 18px;
    }

     .e-rte-palettetable {
        border-style: solid;
        border-width: 0;
        display: inline-block;
        height: 25px;
        overflow: hidden;
        vertical-align: top;
        width: 25px;
    }

    .e-menu.e-split .customcolor-link {
        display: inline-block;
        padding-left: 30px;
        margin-top: 5px;
        color: inherit;
        cursor: pointer;
    }

     .e-rte-transbtn {
        margin-bottom: 8px;
    }

    .e-custom-Dialog .e-dialog-scroller > div.e-rte-customColor {
        padding: 0px;
    }

    .e-rte .customtable-group {
        padding: 3px;
        cursor: pointer;
    }

    .e-rte .e-table {
        display: inline-block;
        height: 16px;
        width: 16px;
    }

    .e-rte .customtable-link {
        display: inline-block;
        text-decoration: none;
        padding-left: 5px;
        color: inherit;
    }
    /*Dialog Content*/
    .e-rte .e-rte-label {
        clear: both;
        float: left;
        padding: 0.4em 0.1em 1em;
        text-align: left;
        width: 29%;
    }

    .e-rte .e-rte-field {
        float: right;
        padding: 0em 0 0.6em;
        width: 69%;
    }

    .e-rte .e-rte-field label {
        display: inline;
    }

     .e-rte-label.e-rtlrte, .e-rte-field.e-rtlrte > label {
        float: right;
    }

     .e-rte-field.e-rtlrte, button.e-rtlrte {
        float: left;
    }

     .e-rtlrte .e-colorwidget .e-icon {
        left: -3%;
    }

    .e-rte .e-rte-elements {
        width: 100%;
        height: 82px;
        margin-top: 10px;
    }

    .e-rte .e-rte-tablefields {
        display: inline-block;
        width: 22%;
        padding: 0.3em;
        vertical-align: middle;
    }

    .e-rte .e-inputtext {
        height: @input-height - 4px;
        width: 98%;
        text-indent: 10px;
        font-family: @font-family;
        font-size: @font-size;
        font-size: @font-size;
    }

    .e-rte .e-dimensions {
        width: 50px;
    }

    .e-dialog .e-fieldseparate {
        border-style: dashed;
        border-width: 1px 0 0;
        padding-top: 0.6em;
    }

    .e-rte.e-dialog > .e-dialog-scroller.e-rtl .e-rte-button {
        padding-bottom: 2em;
    }

    .e-rte .e-fieldgroup {
        margin-bottom: 10px;
    }

    .e-dialog .e-rte-button {
        & when (@skin= "material") {
            /*material*/
            border-width: 0;
            bottom: -1em;
            clear: both;
            text-align: right;
            margin-top: 10px;
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                /*office-365*/
                padding-top: 20px;
            }

            bottom: -1em;
            clear: both;
            text-align: right;
            margin-top: 10px;
        }
    }

    .e-dialog .e-rte-imgTab {
        clear: both;
        margin-top: 10px;
    }

    .e-dialog .e-rte-btn {
        margin-left: 5px;
    }

    .e-dialog .e-rte-alertBtnRTL {
        float: left;
    }

    .e-dialog .e-rte-srctextarea {
        width: 600px;
        height: 400px;
        font-family: inherit;
        font-size: inherit;
    }

    .e-rte .e-rte-video {
        min-height: 100px;
        min-width: 370px;
    }

    .e-rte .e-rte-srcbutton {
        padding: 0.6em;
        text-align: right;
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content > span {
        color: #e24048;
        height: 22px;
        display: block;
        margin: 5px;
    }

     .e-rte-toolbar-icon.findAndReplace:before {
        content: "\e7f2";
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-txtbox {
        margin: 0px 15px 0px 15px;

        & when (@skin= "material") {
            /*material*/
            border-bottom: 1px solid rgba(0,0,0,0.12);
            width: 180px;
        }

        & when not (@skin= "material") {
            /*other*/
            & when (@skin= "office-365") {
                /*office-365*/
                width: 205px;
            }

            & when not (@skin= "office-365") {
                /*office-365*/
                width: 230px;
            }

            border: 1px solid #c8c8c8;
            height: 27px;
        }
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-txtbox .e-input:focus {
        & when (@skin= "material") {
            /*material*/
            border-bottom: 2px solid #ff4081;
            box-shadow: none;
        }
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-rtefindcount {
        font-style: italic;
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-rteReplaceCount {
        text-align: center;
        float: left;
        margin-left: 80px;
        font-style: italic;
    }

    .e-rte.e-findandreplace.e-dialog.e-rtl .e-widget-content .e-txtbox {
        margin-right: 15px;
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-fd-btncol {
        height: 49px;

        & when (@skin= "material") {
            /*material*/
            border-top: 1px solid rgba(0,0,0,0.12);
        }

        & when not (@skin= "material") {
            /*material*/
            border-top: 1px solid #c8c8c8;
        }
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-fd-checkboxlable {
        margin: 0px 0px 0px 5px;
        font-size: 13px;
        font-weight: 400;
    }

    .e-rte.e-findandreplace.e-dialog.e-rtl .e-widget-content .e-fd-checkboxlable {
        margin: 0px 5px 0px 0px;
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-fd-btncol > .e-btn-left, .e-rte.e-findandreplace.e-dialog.e-rtl .e-widget-content .e-fd-btncol > .e-btn-right {
        float: left;

        & when (@skin= "material") {
            /*material*/
            margin: 0px 0px 0px 0px;
        }

        & when not (@skin= "material") {
            /*material*/
            & when (@skin= "office-365") {
                /*office-365*/
                margin: 20px 0px 0px 9px;
            }

            & when not (@skin= "office-365") {
                /*office-365*/
                margin: 0px 0px 0px 9px;
            }
        }
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-fd-btncol > .e-btn-right, .e-rte.e-findandreplace.e-dialog.e-rtl .e-widget-content .e-fd-btncol > .e-btn-left {
        float: right;

        & when (@skin= "material") {
            /*material*/
            margin: 0px 0px 0px 0px;
        }

        & when not (@skin= "material") {
            /*material*/
            & when (@skin= "office-365") {
                /*office-365*/
                margin: 20px 0px 0px 0px;
            }

            & when not (@skin= "office-365") {
                /*office-365*/
                margin: 0px 16px 0px 0px;
            }
        }
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-btn {
        & when (@skin= "office-365") {
            /*office-365*/
            margin: 0px 0px 0px 7px;
            max-width: 72px;
            padding: 0px;
        }

        & when not (@skin= "office-365") {
            /*office-365*/
            max-width: 85px;
            margin: 13px 0px 13px 7px;
        }
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .ejRTE-replaceAll.e-btn {
        & when (@skin= "material") {
            /*material*/
            padding: 0px;
        }
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-fd-lable {
        width: 50px;
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-fd-InnerContent {
        margin: 10px 0px 15px 65px;
    }

    .e-rte.e-findandreplace.e-dialog.e-rtl .e-widget-content .e-fd-InnerContent {
        margin: 15px 65px 10px 0px;
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-fd-InnerContent .e-checkbx {
        margin: 0px 0px 0px 10px;
    }

    .e-rte.e-findandreplace.e-dialog.e-rtl .e-widget-content .e-fd-InnerContent .e-checkbx {
        margin: 0px 10px 0px 0px;
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-maincontent {
        & when (@skin= "office-365") {
            /*office-365*/
            height: 110px;
        }

        & when not (@skin= "office-365") {
            /*office-365*/
            margin: 23px 0px 0px 15px;
            height: 110px;
        }
    }

    .e-rte.e-findandreplace.e-dialog.e-rtl .e-widget-content .e-maincontent {
        margin: 23px 13px 15px 0px;
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-maincontent > div {
        display: inline-block;
        float: left;
    }

    .e-rte.e-findandreplace.e-dialog.e-rtl .e-widget-content .e-maincontent > div, .e-rte.e-findandreplace.e-dialog.e-rtl .e-widget-content .e-maincontent > div > div {
        float: right;
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content {
        & when not (@skin= "material") {
            /*material*/
            & when not (@skin= "office-365") {
                /*office-365*/
                padding: 0px;
            }
        }
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-maincontent > div > div {
        float: left;
    }

    .e-rte.e-findandreplace.e-dialog .e-widget-content .e-icon.e-chevron-left_02:before, .e-rte.e-findandreplace.e-dialog .e-widget-content .e-icon.e-chevron-right_02:before {
        margin-left: -2px;

        & when (@skin= "material") {
            /*material*/
            margin-left: -15px;
        }
    }

     .e-rte.e-findandreplace.e-dialog.e-rtl .e-widget-content .e-icon.e-chevron-left_02:before, .e-rte.e-findandreplace.e-dialog .e-widget-content .e-icon.e-chevron-right_02:before {
        margin-right: -2px;
    }
}

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



    .e-tile-group {
        float: left;
    }

    .e-tile-group.aligncenter {
        display: table;
        float: none;
        margin: 0 auto;
        padding: 0;
    }

    .e-tile-small-col-2 {
        width: 160px;
        float: left;
    }

    .e-skew-bottomleft, .e-skew-bottomright, .e-skew-topright, .e-skew-topleft, .e-skew-top, .e-skew-bottom, .e-skew-left, .e-skew-right, .e-skew-center {
        & when not (@skin= "material") {
            transition: transform 250ms;
        }
    }

    .e-skew-top {
        & when not (@skin= "material") {
            transform: perspective(1000px) rotateX(10deg);
            -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 10deg);
            -moz-transform: perspective(1000px) rotate3d(1, 0, 0, 10deg);
            -webkit-transition-duration: 350ms;
            -moz-transition-duration: 350ms;
        }
    }

    .e-skew-bottom {
        & when not (@skin= "material") {
            transform: perspective(1000px) rotateX(-10deg);
            -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, -10deg);
            -moz-transform: perspective(1000px) rotate3d(1, 0, 0, -10deg);
            -webkit-transition-duration: 350ms;
            -moz-transition-duration: 350ms;
        }
    }

    .e-skew-left {
        & when not (@skin= "material") {
            transform: perspective(1000px) rotateY(-10deg);
            -webkit-transform: perspective(1000px) rotateY(-10deg);
            -moz-transform: perspective(1000px) rotateY(-10deg);
            -webkit-transition-duration: 350ms;
            -moz-transition-duration: 350ms;
        }
    }

    .e-skew-right {
        & when not (@skin= "material") {
            transform: perspective(1000px) rotateY(10deg);
            -webkit-transform: perspective(1000px) rotateY(10deg);
            -moz-transform: perspective(1000px) rotateY(10deg);
            -webkit-transition-duration: 350ms;
            -moz-transition-duration: 350ms;
        }
    }

    .e-skew-center {
        & when not (@skin= "material") {
            transform: perspective(1000px) scale(0.95);
            -webkit-transform: perspective(1000px) scale(0.95);
            -moz-transform: perspective(1000px) scale(0.95);
            -webkit-transition-duration: 350ms;
            -moz-transition-duration: 350ms;
        }
    }

    .e-tile-backface {
        backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        position: absolute;
    }

    .e-skew-topleft {
        & when not (@skin= "material") {
            transform: perspective(1000px) rotateX(10deg) rotateY(-10deg);
        }
    }

    .e-skew-topright {
        & when not (@skin= "material") {
            transform: perspective(1000px) rotateX(10deg) rotateY(10deg);
        }
    }

    .e-skew-bottomright {
        & when not (@skin= "material") {
            transform: perspective(1000px) rotateX(-10deg) rotateY(10deg);
        }
    }

    .e-skew-bottomleft {
        & when not (@skin= "material") {
            transform: perspective(1000px) rotateX(-10deg) rotateY(-10deg);
        }
    }

    .e-tile-group {
        float: left;
    }

    .e-tile-small-col-2 {
        width: 160px;
        float: left;
    }

    .e-tile-group .e-tile-column {
        float: left;
        overflow: hidden;
        padding-top: 5px;
        position: relative;
    }

    .e-tile-group .e-tile-column .e-tile.e-tile-wide,
    .e-tile-group .e-tile-column .e-tile.e-tile-small,
    .e-tile-group .e-tile-column .e-tile.e-tile-medium {
        float: left;
    }

    .e-tile-group {
        position: relative;
        margin: 0 auto;
        padding-left: 50px;
    }

    .e-tile-group .e-tile-column {
        max-height: 100%;
        max-width: 320px;
    }

    .e-tile-round-corner .e-tile-overlay {
        border-radius: 10px;
    }

    .e-tile * {
        box-sizing: border-box;
    }

    .e-tile {
        box-sizing: border-box;
        margin: 5px;
        overflow: hidden;
        position: relative;
        min-width: 70px;
        min-height: 70px;
    }

    .e-tile-wide {
        width: 310px;
        height: 150px;
        float: left;
    }

    .e-tile-small {
        float: left;
        height: 70px;
        width: 70px;
    }

    .e-tile-medium {
        float: left;
        height: 150px;
        width: 150px;
    }

    .e-tile-large {
        float: left;
        height: 310px;
        width: 310px;
    }

    .e-tile-wide.e-caption-outer {
        width: 310px;
        height: 200px;
    }

    .e-tile-medium.e-caption-outer {
        height: 200px;
        width: 150px;
    }

    .e-tile-large.e-caption-outer {
        height: 360px;
        width: 310px;
    }

    .e-tile-wide.e-caption-outer .e-image-parent, .e-tile-wide.e-caption-outer .e-tile-overlay {
        width: 310px;
        height: 150px;
    }

    .e-tile-medium.e-caption-outer .e-image-parent, .e-tile-medium.e-caption-outer .e-tile-overlay {
        height: 150px;
        width: 150px;
    }

    .e-tile-large.e-caption-outer .e-image-parent, .e-tile-large.e-caption-outer .e-tile-overlay {
        height: 310px;
        width: 310px;
    }

    .e-tile .e-tile-selected:after {
        position: absolute;
        display: block;
        border-left: 28px solid transparent;
        right: 0;
        content: "";
        top: 0;
        z-index: 101;
    }

    .e-tile.e-tile-web .e-image-parent .e-tile-image:not(.e-tile-imagefill) {
        background-size: 64px 64px;
        font-size: 64px;
    }

    .e-tile.e-tile-small .e-image-parent .e-tile-image:not(.e-tile-imagefill) {
        background-size: 32px 32px;
        font-size: 32px;
    }

    .e-tile.e-tile-web .e-image-parent .e-tile-image:not(.e-tile-imagefill) {
        background-repeat: no-repeat;
    }

    .e-tile.e-tile-large .e-image-parent .e-tile-image:not(.e-tile-imagefill) {
        background-size: 64px 64px;
        font-size: 64px;
    }

    .e-tile .e-tile-selected {
        border: 2px solid gray;
    }

    .e-tile .e-tile-overlay {
        height: 100%;
        width: 100%;
        display: block;
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
    }

    .e-tile.e-state-active .e-tile-overlay {
        background-color: rgba(0,0,0,0.5);
    }

    .e-tile-small.e-tile-badge.e-badge-position-topright::after {
        top: 5px;
        right: 5px;
    }

    .e-tile-small.e-tile-badge.e-badge-position-bottomright::after {
        bottom: 5px;
        right: 5px;
    }

    .e-tile.e-badge-position-bottomright::after {
        bottom: 6px;
    }

    .e-tile.e-caption-outer.e-badge-position-bottomright::after {
        bottom: 55px;
    }

    .e-tile.e-badge-position-topright::after {
        top: 10px;
    }

    .e-tile.e-tile-badge.e-tile-badge-value::after {
        content: attr(data-ej-badgeValue);
        font-size: 14px;
        text-align: center;
    }

    .e-tile.e-tile-badge::after {
        color: white;
        font-size: 18px;
        line-height: 18px;
        right: 10px;
        min-height: 18px;
        min-width: 18px;
        position: absolute;
        z-index: 10;
    }

    .e-tile-caption.e-tile-caption-icon.e-caption-innertop::before {
        top: 10px;
    }

    .e-tile-caption.e-tile-caption-icon.e-caption-innerbottom::before {
        bottom: 10px;
    }

    .e-tile-caption-text.e-caption-innertop::before {
        top: 0px;
        margin-top: 10px;
    }

    .e-tile-caption-text.e-caption-innerbottom::before {
        bottom: 0px;
        margin-bottom: 6px;
    }

    .e-tile-caption-text.e-caption-innerbottom::before, .e-tile-caption-text.e-caption-innertop::before {
        max-height: 38px;
        height: auto;
        left: 0px;
    }

    .e-tile-caption-text.e-caption-outer::before {
        bottom: 0px;
        height: 45px;
        color: black;
    }

    .e-tile-caption-text::before {
        content: attr(data-ej-text);
        width: 100%;
    }

    .e-tile-caption.e-tile-caption-icon::before {
        width: 30px;
        height: 30px;
        font-size: 30px;
    }

    .e-tile-caption.e-caption-outer.e-tile-caption-icon::before {
        bottom: 15px;
    }

    .e-tile-caption::before {
        font-size: 14px;
        position: absolute;
        display: block;
        float: left;
        overflow: hidden;
        z-index: 10;
    }

    .e-caption-align-right.e-caption-innertop.e-badge-position-topright.e-tile-caption-icon::before,
    .e-caption-align-right.e-caption-innerbottom.e-badge-position-bottomright.e-tile-caption-icon::before {
        right: 35px;
    }

    .e-caption-align-normal.e-tile-caption-icon::before,
    .e-caption-align-left.e-tile-caption-icon::before {
        left: 10px;
    }

    .e-tile-caption-icon.e-caption-align-center::before {
        margin-left: -10px;
        left: 50%;
    }

    .e-tile-caption-icon.e-caption-align-right::before {
        right: 10px;
    }

    .e-tile-caption-text.e-caption-align-right.e-caption-innertop.e-badge-position-topright::before,
    .e-tile-caption-text.e-caption-align-right.e-caption-innerbottom.e-badge-position-bottomright::before {
        padding-right: 34px;
    }

    .e-tile-caption-text.e-caption-align-normal::before, .e-tile-caption-text.e-caption-align-left::before {
        text-align: left;
    }

    .e-tile-caption-text::before {
        left: 0px;
        right: 0px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .e-tile-caption-text.e-caption-align-center::before {
        text-align: center;
    }

    .e-tile-caption-text.e-caption-align-right::before {
        direction: rtl;
    }

    .e-tile.e-tile-web .e-image-parent .e-tile-image {
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .e-tile.e-tile-web .e-image-parent .e-tile-image.e-tile-imagecenter {
        background-position: center center;
    }

    .e-tile.e-tile-web .e-image-parent .e-tile-image.e-tile-imagefill {
        background-size: 100% 100%;
    }

    .e-tile.e-tile-web .e-image-parent .e-tile-image.e-tile-imagetopcenter {
        background-position: top center;
    }

    .e-tile.e-tile-web .e-image-parent .e-tile-image.e-tile-imagebottomcenter {
        background-position: bottom center;
    }

    .e-tile.e-tile-web .e-image-parent .e-tile-image.e-tile-imageleftcenter {
        background-position: left center;
    }

    .e-tile.e-tile-web .e-image-parent .e-tile-image.e-tile-imagerightcenter {
        background-position: right center;
    }

    .e-tile.e-tile-web .e-image-parent .e-tile-image.e-tile-imagetopleft {
        background-position: top left;
    }

    .e-tile.e-tile-web .e-image-parent .e-tile-image.e-tile-imagetopright {
        background-position: top right;
    }

    .e-tile.e-tile-web .e-image-parent .e-tile-image.e-tile-imagebottomright {
        background-position: bottom right;
    }

    .e-tile.e-tile-web .e-image-parent .e-tile-image.e-tile-imagebottomleft {
        background-position: bottom left;
    }

    .e-tile.e-tile-caption.e-caption-outer {
        padding: 0px;
    }


    .e-tile:not(.e-tile-imagefill) {
        box-sizing: border-box;
    }

    .e-tile .e-tile-template {
        background-size: 100% 100%;
        width: inherit;
        height: inherit;
    }

    .e-tile .e-image-parent, .e-tile .e-tile-image {
        width: 100%;
        height: 100%;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        position: absolute;
    }

    .e-tile .e-image-parent.e-tile-flip, .e-tile .e-image-parent.e-tile-flipback {
        backface-visibility: hidden;
    }

    .e-tile-round-corner.e-caption-outer, .e-tile-round-corner .e-image-parent, .e-tile-round-corner .e-image-parent .e-tile-image {
        border-radius: 10px;
    }

    .e-tile .e-tile-selected::before {
        position: absolute;
        display: block;
        content: "";
        background-color: transparent;
        border-left: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        height: 5px;
        width: 10px;
        right: 3px;
        top: 3px;
        z-index: 102;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    //tile animation
    .e-tile.e-livetile-enable .e-tile-slideback {
        position: absolute;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transition-duration: 350ms;
        -webkit-transition-duration: 350ms;
        -moz-transition-duration: 350ms;
    }

    .e-tile.e-livetile-enable .e-tile-slide {
        position: absolute;
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transition-delay: 350ms;
        -webkit-transition-delay: 350ms;
        -ms-transition-delay: 350ms;
        transition-duration: 0ms;
        -webkit-transition-duration: 0ms;
        -moz-transition-duration: 0ms;
        -ms-transition-duration: 0ms;
    }

    .e-tile.e-livetile-enable .e-tile-slideup {
        position: absolute;
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transition-duration: 350ms;
        -webkit-transition-duration: 350ms;
        -moz-transition-duration: 350ms;
    }

    .e-tile.e-livetile-enable .e-tile-carouselback {
        position: absolute;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transition-duration: 350ms;
        -webkit-transition-duration: 350ms;
        -moz-transition-duration: 350ms;
    }

    .e-tile.e-livetile-enable .e-tile-carousel {
        position: absolute;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transition-delay: 350ms;
        -webkit-transition-delay: 350ms;
        -ms-transition-delay: 350ms;
        transition-duration: 0ms;
        -webkit-transition-duration: 0ms;
        -moz-transition-duration: 0ms;
        -ms-transition-duration: 0ms;
    }

    .e-tile.e-livetile-enable .e-tile-carouselup {
        position: absolute;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transition-duration: 350ms;
        -webkit-transition-duration: 350ms;
        -moz-transition-duration: 350ms;
    }

    .e-tile.e-livetile-enable .e-image-parent.e-tile-flip {
        position: absolute;
        transform: perspective(1000px) rotateX(180deg);
        -webkit-transform: perspective(1000px) rotateX(180deg);
        -moz-transform: perspective(1000px) rotateX(180deg);
        transition-duration: 350ms;
        -webkit-transition-duration: 350ms;
        -moz-transition-duration: 350ms;
    }

    .e-tile.e-livetile-enable .e-image-parent.e-tile-flipback {
        position: absolute;
        transform: perspective(1000px) rotateX(0deg);
        -webkit-transform: perspective(1000px) rotateX(0deg);
        -moz-transform: perspective(1000px) rotateX(0deg);
        transition-duration: 350ms;
        -webkit-transition-duration: 350ms;
        -moz-transition-duration: 350ms;
    }
}

.gantt-textOverflow() {
    -ms-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -khtml-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.gantt-user-select() {
    -ms-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    user-select: none;
    -webkit-touch-callout: none;
}

.gantt-border-boxSizing() {
    -ms-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    -khtml-box-sizing: border-box !important;
    -o-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

.gantt-content-boxSizing() {
    -ms-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -khtml-box-sizing: content-box;
    -o-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.e-gantt .e-gantt-criticaltask:before {
    content: "\e822";
}

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

    ej-gantt {
        display: block;
    }

    .e-gantt *:focus {
        outline: none;
    }

    .e-gantt-core {
        display: inline-block;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    .e-gantt .e-gantt-Spliter {
        .gantt-user-select();
    }

    .e-gantt .e-treegridPane {
        overflow-y: hidden;
    }

    .e-gantt .e-ganttchartPane {
        overflow: hidden;
    }

    .e-gantt .e-gantttoolbar {
        display: block !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        -ms-user-select: none; /*selection*/
        -webkit-user-select: none;
        -khtml-user-select: none;
        -o-user-select: none;
        -moz-user-select: -moz-none;
        user-select: none;
        -webkit-touch-callout: none;

        & when (@skin= "material") {
            height: 56px !important;
            padding-top: 11px;
        }

        & when (@skin= "office-365") {
            height: 40px !important;
            padding-left: 0px;
            padding-right: 0px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            height: 36px !important;
        }

        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .e-gantt .e-toolbar {
        border-width: 1px 1px 0px 1px !important;
        outline: none;
        -webkit-user-select: none; /*unselectable*/
        -ms-user-select: none;
        -khtml-user-select: none;
        -o-user-select: none;
        -moz-user-select: -moz-none;
        user-select: none;
        -webkit-touch-callout: none;
        outline: none;
    }

    .e-gantt .e-toolbarspan {
        margin: 0;
    }

    .e-gantt .e-search.e-tooltxt.e-hover {
        background: none !important;
        border-color: transparent !important;
        padding: 2px !important;
    }

    .e-gantt .e-search.e-tooltxt {
        box-shadow: none !important;
    }

    .e-gantt .e-disable.e-tooltxt:hover {
        background: none !important;
    }

    .e-treegrid .e-disable.e-tooltxt:hover {
        background: none !important;
    }


    .e-gantt .e-toolbaricons {
        float: left;
        text-decoration: none;
    }

    .e-gantt .e-ganttcustomtoolbaritem {
        padding-top: 4px;
        margin-left: 3px;
        font-size: 14px;
    }

    .e-gantt .e-gantttoolbaritem {
        width: 30px;
        height: 24px;
    }

    .e-gantt .e-gantt-collapseall:before {
        margin-left: 3px;
        margin-top: 5px;
    }

    .e-gantt .e-gantt-criticaltask:before {
        margin-left: 3px;
        margin-top: 5px;
    }

    .e-gantt .e-gantt-prevtimespan:before {
        content: "\e74b";
    }

    .e-gantt .e-gantt-nexttimespan:before {
        content: "\e74a";
    }

    #Task.e-menuitem > div.e-icon:before {
        content: "\e601";

        & when (@skin= "office-365") {
            padding-top: 2px;
        }

        & when not (@skin= "office-365") {
            padding-top: 3px;
        }
    }

    #Add.e-menuitem > div.e-icon:before,
    div.e-menuitem > div.e-expander:before {
        & when (@skin= "office-365") {
            padding-top: 2px;
        }

        & when not (@skin= "office-365") {
            padding-top: 3px;
        }
    }

    #Indent.e-menuitem > div.e-icon:before {
        & when (@skin= "office-365") {
            padding-top: 2px;
        }

        & when not (@skin= "office-365") {
            padding-top: 3px;
        }
    }

    #Outdent.e-menuitem > div.e-icon:before {
        & when (@skin= "office-365") {
            padding-top: 2px;
        }

        & when not (@skin= "office-365") {
            padding-top: 3px;
        }
    }

    #Delete.e-menuitem > div.e-icon:before {
        & when (@skin= "office-365") {
            padding-top: 2px;
        }

        & when not (@skin= "office-365") {
            padding-top: 3px;
        }
    }

    div.e-menuitem > div.e-expander:before, 
    div.e-columnmenu span.e-expander:before,
    div.e-contextmenu div.e-expander:before,
    div.e-columnmenu div.e-expander:before {
        content: "\e67e" !important;
    }

    #PrevTimeSpan.e-menuitem > div.e-icon:before {
        padding-top: 3px;
    }

    #NextTimeSpan.e-menuitem > div.e-icon:before {
        padding-top: 3px;
    }

    .e-gantt .e-addnewitem,
    .e-gantt .e-outdent,
    .e-gantt .e-edititem,
    .e-gantt .e-deleteitem,
    .e-gantt .e-saveitem,
    .e-gantt .e-cancel,
    .e-gantt .e-indent {

        & when (@skin= "material") {
            margin-left: 4px;
            padding-top: 5px;
            font-size: 14px;
        }

        & when (@skin= "office-365") {
            margin-left: 3px;
            padding-top: 4px;
            font-size: 16px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-left: 3px;
            padding-top: 4px;
            font-size: 14px;
        }
    }

    .e-gantt .e-excelIcon:before {
        font-size: 14px;
        margin-left: 3px;
        content: "\e718";

        & when (@skin= "material") {
            padding-top: 6px;
        }

        & when not (@skin= "material") {
            padding-top: 4px;
        }
    }

    .e-gantt .e-pdfIcon:before {
        margin-left: 5px;
        font-size: 14px;
        content: "\e717";

        & when (@skin= "material") {
            padding-top: 6px;
        }

        & when not (@skin= "material") {
            padding-top: 4px;
        }
    }

    .e-gantt .e-excelIcon {
        & when (@skin= "material") {
            padding-left: 2px;
        }

        & when (@skin= "office-365") {
            padding-top: 1px;
            padding-left: 1px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding-top: 1px;
            padding-left: 2px;
        }
    }

    .e-gantt .e-expandall {
        margin-left: 6px;

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

        & when (@skin= "office-365") {
            padding-top: 7px;
            font-size: 13px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding-top: 7px;
            font-size: 12px;
        }
    }

    .e-gantt .e-gantt-add:before {
        content: "\e6fe";

        & when (@skin= "office-365") {
            font-size: 17px;
        }
    }

    .e-gantt .e-gantt-edit:before {
        content: "\e705";
    }

    .e-gantt .e-gantt-delete:before {
        content: "\e706";
    }

    .e-gantt .e-gantt-save:before {
        content: "\e6fc";
    }

    .e-gantt .e-gantt-cancel:before {
        content: "\e708";
    }

    .e-gantt .e-gantt-indent:before {
        content: "\e702";
    }

    .e-gantt .e-gantt-outdent:before {
        content: "\e6fd";
    }

    .e-gantt .e-gantt-expandall:before {
        content: "\e703";
    }

    .e-gantt .e-gantt-collapseall:before {
        content: "\e707";
    }

    #Add.e-menuitem > div.e-icon:before {
        content: "\e6fe";

        & when (@skin= "office-365") {
            font-size: 15px;
        }
    }

    #Indent.e-menuitem > div.e-icon:before {
        content: "\e702";
    }

    #Outdent.e-menuitem > div.e-icon:before {
        content: "\e6fd";
    }

    #Delete.e-menuitem > div.e-icon:before {
        content: "\e706";
    }

    .e-gantt .e-splitter .e-splitbar.e-h-bar:before {
        content: "\e6fa";
    }

    .e-gantt .e-collapseall {
        & when (@skin= "office-365") {
            font-size: 16px;
        }

        & when not (@skin= "office-365") {
            font-size: 13px;
        }
    }

    .e-gantt .e-criticaltask {
        font-size: 14px;
    }

    .e-gantt .e-prevtimespan,
    .e-gantt .e-nexttimespan {
        font-size: 14px;
        margin-left: 3px;
        padding-top: 5px;
    }

    .e-gantt .e-collapse,
    .e-gantt .e-h-arrow {
        z-index: 2 !important;
    }

    .e-gantt .e-splitter {
        border-style: solid !important;
        border-width: 1px 0px !important;
    }

    .e-gantt .e-dialog .e-titlebar {
        padding: 0.7em 0 0.2em 0 !important;
        border-bottom-width: 3px !important;
        border-style: none none solid none !important;
        margin: 0 auto !important;
        width: 95% !important;
        font-weight: 600;
    }

     .e-addpre.e-icon:before {
        background-color: #72af33;
        border: 1px solid #72af33;
        border-radius: 11px;
        color: #ffffff;
        content: "\e691";
        display: inline;
        font-size: 14px;
        font-family: 'ej-webfont';
    }

     .e-addpre.e-icon {
        display: inline-block;
        width: 80px;
    }

     .e-deletepre.e-icon:before {
        background-color: #ec1e24;
        border: 1px solid #ec1e24;
        border-radius: 9px;
        color: #ffffff;
        content: "\e693";
        display: inline;
        font-family: 'ej-webfont';
    }

    .e-gantt .e-editValue .e-treegrid .e-headercell {
        border-bottom-width: 1px;
    }

    .e-gantt .e-dialog .e-header {
        font-weight: 600;
    }

    .e-gantt .e-dialog-wrap.e-dialog {
        width: auto !important;
    }

    .e-gantt .e-shadow {
        box-shadow: none !important;
    }

    .e-gantt .e-dialog .e-numeric .e-padding,
    .e-gantt .e-dialog .e-percent .e-padding,
    .e-gantt .e-dialog .e-currency .e-padding,
    .e-gantt .e-dialog .e-atc .e-padding,
    .e-gantt .e-dialog .e-datewidget .e-padding,
    .e-gantt .e-dialog .e-ddl .e-in-wrap,
    .e-gantt .e-dialog .e-timewidget .e-padding,
    .e-gantt .e-dialog .e-datetime-wrap .e-padding {
        padding: 0 !important;
    }

    .e-gantt .e-dialog .e-dialog-content {
        width: auto !important;
        height: auto !important;
    }

    .e-gantt .e-dialog-scroller {
        height: auto !important;
    }

    .e-gantt .e-title {
        position: absolute;
        margin-top: -4px;
    }

    .e-gantt .e-dialog-icon .e-close {
        position: absolute;
    }

    .e-gantt .e-icon.e-close {
        position: absolute;
    }

    .e-gantt .e-gantttoolbar li {
        & when (@skin= "office-365") {
            padding: 7px 0 8px 7px;
        }

        & when not (@skin= "office-365") {
            padding: 4px 0 5px 5px;
        }
    }

    .e-gantt .e-ejinputtext:focus {
        box-shadow: none;
    }

    .e-gantt .e-dialog .e-widget-content {
        padding: 0;
    }

    .e-gantt .e-field.e-ejinputtext {
        text-indent: 4px;
    }

    .e-gantt .e-datewidget input.e-input {
        line-height: 20px;
    }

    .e-gantt .e-splitter .e-splitbar.e-h-bar:before {
        top: 50%;
        left: 0.5px;
        position: absolute;
    }

    .e-gantt .e-datewidget input.e-input {
        line-height: 20px;
    }

    .e-gantt .e-splitter .e-splitbar.e-h-bar {
        font-family: 'ej-webfont';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 14px;
    }

    .e-gantt .e-splitter .e-splitbar.e-h-bar .e-h-arrow {
        display: none;
    }

    .e-gantt .e-splitter .e-splitbar.e-h-bar {
        width: 9px !important;
    }

    .e-ganttdialog .e-tab.e-js .e-header > .e-select, 
    .e-ganttdialog .e-tab.e-js .e-header > .e-active {
        & when (@skin= "material") {
            font-size: 14px !important;
        }

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

    .e-ganttdialog .e-titlebar {
        & when (@skin= "office-365") {
            font-size: 20px !important;
        }

        & when not (@skin= "office-365") {
            font-size: 16px !important;
        }
    }

    .e-contextmenu,
    .e-innerContextmenu {
        & when (@skin= "material") {
            border-width: 0px;
            border-style: solid;
        }

        & when not (@skin= "material") {
            border-width: 1px;
            border-style: solid;
        }
    }

    .e-ganttdialog .e-ejinputtext {
        & when (@skin= "material") {
            height: 32px;
        }

        & when (@skin= "office-365") {
            height: 30px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            height: 25px;
        }

        padding: 1px 4px 1px 0px;
    }

    .e-gantt .e-search .e-ejinputtext {
        & when (@skin = "material") {
            text-indent: 16px !important;
        }

        & when (@skin = "office-365") {
            text-indent: 10px !important;
        }
    }

    .e-gantt .e-search {
        & when (@skin = "material") {
            margin-right: 18px !important;
        }
    }

     .e-gantt-contextmenu {
        & when (@skin = "material") {
            padding: 8px 0px 8px 0px;
        }
    }

    .e-ganttdialog .e-ejinputtext {
        & when (@skin = "material") {
            box-sizing: border-box;
            text-indent: 0px;
        }
    }

    .e-gantt .e-toolbarspan {
        & when (@skin = "material") {
            padding-left: 0px;
            padding-right: 0px;
        }
    }

    .e-ganttdialog .e-dialog.e-widget-content {
        & when (@skin = "material") {
            padding: 0px;
        }
    }

     .e-gantt-manualparenttaskbar, 
     .e-gantt-manualparenttaskbar-left,
     .e-gantt-manualparenttaskbar-right {
        z-index: 7;
        position: absolute;
    }

     .e-gantt-manualparenttaskbar-left {
        border-right-style: none;
        border-top-style: none;
        border-left-style: solid;
    }

     .e-gantt-manualparenttaskbar-right {
        border-top-style: none;
        border-left-style: none;
        border-right-style: solid;
    }

    .e-ganttdialog .e-titlebar.e-dialog {
        & when (@skin = "material") {
            font-weight: normal;
            padding-bottom: 13px;
        }
    }

    .e-ganttdialog .e-tab .e-header {
        & when (@skin = "material") {
            position: relative;
            top: -3px;
        }
    }

    .e-ganttdialog .e-gantt-editor-container {
        & when (@skin= "material") {
            padding: 4px 15px 0px 15px;
        }

        & when (@skin= "office-365") {
            padding: 0px;
            margin-left: -3px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 4px;
        }
    }

    .e-ganttdialog .e-gantt-predecessor-container,
    .e-ganttdialog .e-gantt-resource-container,
    .e-ganttdialog .e-gantt-csfield-container {
        & when (@skin= "material") {
            padding: 0px 15px 0px 15px;
        }

        & when (@skin= "office-365") {
            padding: 0px;
            margin-left: -10px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 0px;
        }
    }

    .e-ganttdialog .e-gantt-notes-container {
        & when (@skin= "material") {
            padding: 0px 10px 0px 15px;
        }

        & when (@skin= "office-365") {
            padding: 0px;
            margin-left: -10px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 0px;
        }
    }

    .e-ganttdialog .e-general-edit-div,
    .e-ganttdialog .e-general-edit-div td:last-child table {
        & when (@skin= "material") {
            width: 100%;
        }

        & when (@skin= "office-365") {
            width: 100%;
        }
    }

    .e-ganttdialog .e-editfrom-btn-right {
        & when (@skin= "material") {
            margin: 10px 24px 10px 0px;
        }

        & when not (@skin= "material") {
            margin-top: 10px;
            margin-bottom: 3px;
            margin-right: 0px;
        }
    }

    .e-ganttdialog .e-editfrom-btn-left {
        & when (@skin= "material") {
            margin: 10px 0px 10px 24px;
        }

        & when not (@skin= "material") {
            margin-top: 10px;
            margin-bottom: 3px;
            margin-right: 0px;
        }
    }

    .e-ganttdialog .e-editform-btn input {
        & when (@skin= "material") {
            font-size: 14px;
            margin-right: 0px;
        }

        & when (@skin= "office-365") {
            font-size: 14px;
            margin-right: 0px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: 14px;
            font-weight: normal;
            margin-right: 0px;
        }
    }

    .e-ganttdialog .e-btn.e-select, 
    .e-ganttdialog .e-btn.e-select:hover, 
    .e-ganttdialog .e-btn.e-select:active {
        & when (@skin = "material") {
            font-weight: 500;
        }
    }

    .e-ganttdialog .e-general-edit-div .e-editLabel {
        & when (@skin= "office-365") {
            padding-bottom: 8px;
            font-size: 12px;
        }

        & when not (@skin= "office-365") {
            padding: 1px;
            font-size: 14px;
        }

        outline: none;
        font-weight: normal;
    }

    .e-ganttdialog .e-general-edit-div .e-editLabel label {
        & when (@skin= "material") {
            font-weight: normal;
            margin-bottom: 0px;
            font-size: 14px;
        }

        & when (@skin= "office-365") {
            font-weight: normal;
            margin-bottom: 0px;
            font-size: 12px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            font-weight: normal;
            margin-bottom: 0px;
            font-size: 14px;
        }
    }

    .e-ganttdialog .e-general-edit-div .e-editValue {
        & when (@skin = "office-365") {
            padding: 0px 0px 8px 0px !important;
        }

        & when not (@skin= "office-365") {
            padding: 0px 0px 1px 0px;
        }
    }

    .e-ganttdialog .e-property-container {
        text-align: left;
        padding: 5px 5px 0px;
        font-weight: normal;
        outline: none;
    }

    .e-ganttdialog .e-property-container:first-child {
        & when (@skin = "office-365") {
            padding-left: 0px;
        }
    }

    .e-ganttdialog .e-property-container:last-child {
        & when (@skin = "office-365") {
            padding-right: 0px;
        }
    }

    .e-gantt .e-toolbar.e-toolbarspan,
    .e-gantt .e-toolbar.e-focus {
        box-shadow: none;
    }

    .e-rg-tasklabel.e-tasklabel{
          overflow: hidden;
          text-overflow: ellipsis;
     }
      .e-gantt-taskbarSelection .e-gantt-childtaskbar:before {
         content: " ";
         position: absolute;
         z-index: 1;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         border: 2px solid;
         border-radius:5px;
     }
     .e-ganttdialog .e-dialog.e-connectordialog{         
         padding:15px !important;
         -webkit-user-select: none;
        /*unselectable*/
        -ms-user-select: none;
        -khtml-user-select: none;
        -o-user-select: none;
        -moz-user-select: -moz-none;
        user-select: none;
        -webkit-touch-callout: none;
     }
     .e-ganttdialog .e-connectordialog .e-editlabel{    
         padding-right:15px;
         padding-bottom:5px;
         font-size:14px;
     }
     .e-ganttdialog .e-connectordialog .e-editvalue{        
         padding-bottom:5px;         
         width:100%;
         font-size:14px;
     }

    .e-ganttdialog .e-connectordialog .e-editform-btn{
         padding:5px 15px 5px 15px;
         border-radius:3px;
     }

    .e-ganttdialog .e-connectordialog .e-icon.e-deleteline{
         padding:7px;
         font-size:16px;
         width:16px;
         height:16px;
     }

    .e-ganttdialog .e-connectordialog .e-icon.e-deleteline:before{
        content: "\e706";
     }
}

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

    ej-treegrid {
        display: block;
    }

    .e-treegrid-core {
        border-collapse: collapse;
        font-size: @gantt-content-font-size;
        height: auto;
        outline: 0 none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        font-weight: normal;
    }

    .e-treegridtoolbar {
        border-color: #c3c3c3 !important;
        background-color: #fff;
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
    }

    .e-treegrid .e-toolbarspan {
        margin: 0;
    }

    .e-treegrid .e-widget [class^="e-"] {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    .e-treegrid *:focus {
        outline: none;
    }

    .e-treegrid .e-unboundcelldiv > button {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    .e-treegrid .e-unboundcelldiv button {
        margin: 0px 0px 0px 7px;
        padding: 0px;
    }

    .e-treegrid .e-textwrapcell {
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    .e-treegrid .e-textwrapcolumnicon {
        margin-top: -20px !important;
    }

    .e-treegrid .e-textwrapheaderdiv {
        word-wrap: break-word;
    }
    .e-treegrid .e-summarytreegridexpand:before,
    .e-treegrid .e-treegridexpand:before {
        content: "\e67c";
        font-size: 7px !important;
        margin-right: 0px;

        & when (@skin= "material") {
            padding-top: 9px;
        }

        & when (@skin= "office-365") {
            padding-top: 9px;
        }

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

    .e-treegrid .e-icon.e-printIcon:before {
        content: "\e741";
    }

    .e-treegrid .e-pager .e-numericitem,
    .e-treegrid .e-pager .e-firstpage,
    .e-treegrid .e-pager .e-prevpage,
    .e-treegrid .e-pager .e-firstpagedisabled,
    .e-treegrid .e-pager .e-prevpagedisabled,
    .e-treegrid .e-pager .e-nextpage,
    .e-treegrid .e-pager .e-lastpage,
    .e-treegrid .e-pager .e-nextpagedisabled,
    .e-treegrid .e-pager .e-lastpagedisabled {
        box-sizing: content-box;
    }
    .e-treegrid .e-summarytreegridcollapse:before,
    .e-treegrid .e-treegridcollapse:before {
        content: "\e67e";
        margin-right: 0px;

        & when (@skin= "material") {
            font-size: 8px;
            padding-top: 11px;
        }

        & when (@skin= "office-365") {
            padding-top: 9px;
            font-size: 10px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: 10px;
            padding-top: 7px;
        }
    }

    .e-treegrid .e-treegrid-add:before {
        content: "\e6fe";

        & when (@skin= "office-365") {
            font-size: 17px;
        }
    }

    .e-treegrid .e-treegrid-edit:before {
        content: "\e705";
    }

    .e-treegrid .e-treegrid-delete.e-delete:before {
        content: "\e706";
    }

    .e-treegrid .e-treegrid-save:before {
        content: "\e6fc";
    }

    .e-treegrid .e-treegrid-cancel:before {
        content: "\e708";
    }

    .e-treegrid .e-treegrid-expandall:before {
        content: "\e703";
    }

    .e-treegrid .e-treegrid-collapseall:before {
        content: "\e707";
    }

    .e-treegrid .e-summarytreegridexpand,
    .e-treegrid .e-treegridexpand {
        width: 24px;
        height: 24px;
    }

    .e-treegrid .e-detailsinfoiconshow {
        margin-left: 5px;
    }

    .e-treegrid .e-detailsinfoiconhide {
        margin-left: 5px;
    }

    .e-treegrid .e-detailsinfoiconshow:before {
        content: "\e77b";
        font-size: 4px;
        margin-left: 4px;
    }

    .e-treegrid .e-detailsinfoiconhide:before {
        content: "\e77b";
        font-size: 4px;
        margin-left: 4px;
    }

    .e-treegrid .e-detailsiconcell {
        border-radius: 5px;
        padding-top: 5px;
        height: 15px;
        width: 28px;
    }

    .e-treegrid .e-detailsrowcell {
        padding: 0px !important;
        cursor: default;
    }

    .e-treegrid .e-detailheadercell {
        border-top: none !important;
        border-bottom: none !important;
        background-color: transparent !important;
    }

    .e-treegrid .e-detailscellwrapper {
        overflow: auto;
        padding: 10px 10px 10px 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

     .e-detailscellwrapperfly {
        overflow: auto;
        padding: 10px 10px 10px 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 1000;
        border-width: 1px;
        border-style: solid;
    }

    .e-treegrid .e-detailsrowcell {
        border-collapse: collapse;
        border-style: solid;
        border-width: 0 1px 1px 0;
        display: table-cell;
        overflow: hidden;
        width: auto;
        vertical-align: middle;
        .gantt-border-boxSizing();
        text-align: left;
        margin-left: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .e-treegrid div.e-error {
        position: absolute;
        font-weight: normal;
        z-index: 9999;
    }

    .e-treegrid div.e-error .e-errortail {
        height: 0;
        position: relative;
        width: 0;
        border: 10px solid transparent;
    }

    .e-treegrid div.e-error .e-toparrow {
        left: 10%;
        border-top-width: 2px;
        display: block;
    }

    .e-treegrid div.e-error .e-bottomarrow {
        left: 10%;
        border-bottom-width: 2px;
        display: block;
    }

    .e-treegrid .e-error div.e-field-validation-error {
        border-radius: 7px;
        font-size: 14px;
        padding: 7px;
        text-align: left;
    }

    .e-treegrid div.e-field-validation-error {
        background-color: #fffe91;
        color: #cd0a0a;
        white-space: normal;
    }

    .e-treegrid .e-aboveIcon,
    .e-treegrid .e-belowIcon,
    .e-treegrid .e-childIcon,
    .e-treegrid .e-cancelIcon,
    .e-treegrid .e-summarytreegridcollapse,
    .e-treegrid .e-treegridcollapse {
        width: 24px;
        height: 24px;
    }

    .e-treegrid .e-treegridcustomtoolbaritem {
        padding-top: 4px;
        margin-left: 3px;
    }

    .e-treegrid .e-treegridtoolbaritem {
        width: 30px;
        height: 24px;
    }

    .e-treegrid .e-treegridtoolbar li {
        & when (@skin= "office-365") {
            padding: 7px 0 7px 7px;
        }

        & when not (@skin= "office-365") {
            padding: 5px 0 5px 5px;
        }

        box-sizing: content-box !important;
        -webkit-box-sizing: content-box !important;
        -moz-box-sizing: content-box !important;
    }

    .e-treegrid .e-treegrid-collapseall:before {
        margin-left: 3px;
        margin-top: 5px;
    }

    .e-treegrid .e-treegrid-collapseall:before {
        margin-left: 3px;
        margin-top: 5px;
    }

    .e-treegrid .e-aboveIcon:before {
        content: "\e765";
        font-size: 20px;
        margin-top: -5px;
    }

    .e-treegrid .e-belowIcon:before {
        content: "\e766";
        font-size: 20px;
        margin-top: 9px;
    }

    .e-treegrid .e-childIcon:before {
        content: "\e764";
        font-size: 20px;
        margin-top: 2px;
    }

    .e-treegrid .e-cancelIcon:before {
        content: "\e767";
        font-weight: 200;
        font-size: 20px;
        margin-top: 3px;
    }

    .e-treegrid .e-table {
        width: 100%;
        table-layout: fixed;
        border: 0 none;
        margin-top: 0px;
        border-collapse: separate;
    }

    .e-ganttchart .e-ganttgridLinesTable,
    .e-ganttviewerbodyContianer-ganttViewTable {
        border-collapse: separate;
        margin-top: 0px;
    }

    .e-treegrid .e-hide {
        display: none !important;
    }

    .e-treegrid .e-scrollcss {
        padding-right: 17px;
    }

    .e-treegrid .e-gridheadercontainer {
        -webkit-user-select: none;
        /*unselectable*/
        -ms-user-select: none;
        -khtml-user-select: none;
        -o-user-select: none;
        -moz-user-select: -moz-none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    .e-treegrid .e-scrollcss .e-gridheadercontainer {
        border-right-style: solid;
        border-right-width: 1px;
    }

    .e-treegrid .e-borderbox {
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        border-bottom-width: 16px;
        border-bottom-style: solid;
    }

    .e-treegrid .e-gridcontent {
        overflow: hidden;
        outline: none;
        -webkit-user-select: none; /*unselectable*/
        -ms-user-select: none;
        -khtml-user-select: none;
        -o-user-select: none;
        -moz-user-select: -moz-none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    .e-treegrid .e-headercell {
        border-collapse: collapse;
        overflow: hidden;
        .gantt-textOverflow();
        white-space: nowrap;
        text-align: left;
        border-style: solid;
        border-width: 0px 1px 0px 0px;
        outline: none;
        -ms-user-select: none; /*user select*/
        -webkit-user-select: none;
        -khtml-user-select: none;
        -o-user-select: none;
        -moz-user-select: -moz-none;
        user-select: none;
        -webkit-touch-callout: none;
        .gantt-border-boxSizing();
        height: @treegrid-headercell-height;

        & when (@skin= "material") {
            padding: 0px 28px;
        }

        & when (@skin= "office-365") {
            padding: 0px 8px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 0 0.5em;
        }
    }

    .e-treegrid .e-filterHeader {
        cursor: pointer;
    }

    .e-treegrid .e-spanstyle {
        cursor: pointer;
        display: block;
        height: 16px;
        position: absolute;
        right: 8%;
        top: 1px;
        width: 21px;
        color: gray;
        margin: 4px 0;
    }

    .e-treegrid .e-filterbarcell {
        border-style: solid;
        border-width: 1px 1px 0 0px;
        cursor: default;
        vertical-align: middle;
        font-weight: normal;

        & when (@skin= "material") {
            padding: 7px 28px 0px 28px;
        }

        & when (@skin= "office-365") {
            padding: 2px 8px;
        }

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

    .e-treegrid .e-filterbarcell .e-filtertext {
        height: 24px;
    }

    .e-treegrid .e-filterbarcell .e-ejinputtext {
        .gantt-content-boxSizing();
    }

    .e-treegrid .e-filterbarcell .e-icon:before, 
    .e-treegrid .e-dialog .e-icon:before {
        display: block;
    }

    .e-treegrid .e-filterbarcell .e-icon:before {
        display: block;
        height: 14px;
        margin: 0 auto;
    }

    .e-treegrid .e-filterbarcell .e-ddl .e-down-arrow.e-icon:before {
        display: block;
        height: 12px !important;
        margin: 0 auto;
        width: 12px !important;
    }

    .e-treegrid .e-field {
        padding: 1px;
    }

    .e-treegrid .e-filterdiv {
        left: 1px;
        position: relative;
        right: 1px;
        width: 100%;
        height: 30px;
        padding: 1px;
        box-sizing: border-box;
    }

    .e-treegrid tr th:last-child {
        border-right: 0;
    }

    .e-treegrid tr td:last-child {
        border-right: 0;
    }

    .e-treegrid .e-headercelldiv {
        & when (@skin= "material") {
            font-size: 12px;
            font-weight: 500;
            padding: 0px;
            margin: -7px -7px -7px 0px;
        }

        & when (@skin= "office-365") {
            font-size: 14px;
            font-weight: 400;
            padding: 0px;
            margin: -7px -7px -7px 0px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: @gantt-header-font-size;
            font-weight: 600;
            padding: 0 14px 0 7px;
            margin: -7px;
        }

        display: block;
        border: 0 none;
        height: 29px;
        line-height: 29px;
        overflow: hidden;
        text-align: left;
        white-space: nowrap;
    }

    .e-treegrid .e-toolbar {
        border-width: 1px !important;
        border-bottom-style: none !important;
        outline: none;
        -webkit-user-select: none; /*unselectable*/
        -ms-user-select: none;
        -khtml-user-select: none;
        -o-user-select: none;
        -moz-user-select: -moz-none;
        user-select: none;
        -webkit-touch-callout: none;
        outline: none;
    }

    .e-treegrid .e-treegridtoolbar {
        & when (@skin= "material") {
            height: 56px !important;
            padding-top: 11px;
        }

        & when (@skin= "office-365") {
            padding-left: 0px;
            padding-right: 0px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            height: 36px !important;
        }

        display: block !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        -ms-user-select: none; /*selection*/
        -webkit-user-select: none;
        -khtml-user-select: none;
        -o-user-select: none;
        -moz-user-select: -moz-none;
        user-select: none;
        -webkit-touch-callout: none;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .e-treegrid .e-treegridadaptivetoolbar {
        & when (@skin= "material") {
            height: 56px !important;
        }

        & when not (@skin= "material") {
            height: auto !important;
        }
    }

    .e-treegrid .e-toolbar.e-toolbarspan,
    .e-treegrid .e-toolbar.e-focus {
        box-shadow: none;
    }

    .e-treegrid .e-iconMargin:before {
        margin-left: -4px !important;
    }

    .e-treegrid .e-firstLevIconMargin:before {
        margin-right: -6px !important;
    }

    .e-treegrid .e-toolbaricons {
        float: left;
        text-decoration: none;
    }

    .e-treegrid .e-excelIcon:before {
        content: "\e718";
        padding-top: 3px;
    }

    .e-treegrid .e-pdfIcon:before {
        content: "\e717";
    }

    .e-treegrid .e-addnew,
    .e-treegrid .e-pdfIcon,
    .e-treegrid .e-edit,
    .e-treegrid .e-delete,
    .e-treegrid .e-save,
    .e-treegrid .e-printIcon,
    .e-treegrid .e-cancel {
        & when (@skin= "material") {
            margin-left: 4px;
            padding-top: 5px;
            font-size: 14px;
        }

        & when (@skin= "office-365") {
            margin-left: 3px;
            padding-top: 4px;
            font-size: 16px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-left: 3px;
            padding-top: 4px;
            font-size: 14px;
        }
    }

    .e-treegrid .e-expandall {
        font-size: 12px;
        margin-left: 6px;
        padding-top: 5px;
    }

    .e-treegrid .e-collapseall {
        & when (@skin= "material") {
            font-size: 13px;
            padding-right: 2px;
        }

        & when (@skin= "office-365") {
            font-size: 15px;
        }

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

    .e-treegrid .e-excelIcon {

        & when (@skin= "material") {
            padding-top: 2px;
            padding-left: 5px;
        }

        & when (@skin= "office-365") {
            padding-top: 2px;
            padding-left: 4px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding-top: 1px;
            padding-left: 4px;
        }
    }

    .e-treegrid .e-treegridrowexpand, 
    .e-treegrid .e-treegridrowcollapse .e-rowcell {
        font-weight: @gantt-parentGanttRecord-font-weight;
    }

    .e-treegrid .e-rowcell .e-cell,
    .e-treegrid .e-rowcell .e-inner-treecolumn-container {
        word-wrap: normal;
        white-space: nowrap;
    }

    .e-treegrid .e-rowcell {
        border-collapse: collapse;
        border-style: solid;
        border-width: 0 1px 1px 0;
        display: table-cell;
        overflow: hidden;
        white-space: nowrap;
        width: auto;
        vertical-align: middle;
        .gantt-border-boxSizing();
        text-align: left;
        margin-left: 10px;
        padding-top: 0;
        padding-bottom: 0;

        & when (@skin= "material") {
            padding-left: 28px;
            padding-right: 28px;
        }

        & when (@skin= "office-365") {
            padding-left: 8px;
            padding-right: 8px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding-left: 10px;
            padding-right: 10px;
        }
    }


     .e-dragrowcell {
        border-collapse: collapse;
        border-style: solid;
        border-width: 0 1px 1px 0;
        display: table-cell;
        overflow: hidden;
        white-space: nowrap;
        width: auto;
        vertical-align: middle;
        .gantt-border-boxSizing();
        text-align: left;
        margin-left: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 0;
        padding-bottom: 0;
    }


    .e-treegrid .e-descending:before {
        content: "\e673";
        display: inline-block;
        font-size: 14px;
        margin-left: 10px;
    }

    .e-treegrid .e-ascending:before {
        content: "\e672";
        display: inline-block;
        font-size: 14px;
        margin-left: 10px;
    }

    .e-treegrid .e-gridheader {
        overflow-x: hidden;
        background-repeat: repeat-x;
        background-attachment: scroll;
        background-position: 0 0;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        .gantt-border-boxSizing();
        padding-top: @treegrid-header-padding;
        padding-bottom: @treegrid-header-padding;
    }

    .e-treegrid .e-treegrid-icon .e-ascending,
    .e-treegrid .e-treegrid-icon .e-descending {
        padding-right: 26px;
        padding-top: 2px;
    }

    .e-treegrid {
        border-top: none;
    }
    .e-treegrid .e-intend.e-editedcell {
        & when (@skin= "material") {
            padding: 2px 28px !important;
        }

        & when not (@skin= "material") {
            padding: 2px !important;
        }

        margin: 0;
        font-weight: normal;
    }

    .e-treegrid .e-editedcell {
        & when (@skin= "material") {
            padding: 2px 28px !important;
        }

        & when not (@skin= "material") {
            padding: 2px !important;
        }

        margin: 0;
        font-weight: normal;
    }

    .e-treegrid .e-editedfirstcell {
        padding: 0 0 4px;
    }

    .e-treegrid .e-tabletd {
        padding: 0;
        border-collapse: collapse;
    }

    .e-treegrid .e-ejinputtext,
     .e-addedColumn .e-ejinputtext,
     .e-treegridrenamedialog .e-ejinputtext {
        & when (@skin= "material") {
            border-width: 0px 0px 1px 0px;
            text-indent: 0px;
        }

        & when not (@skin= "material") {
            border-width: 1px;
        }

        border-style: solid;
        outline: none;
        vertical-align: baseline;
        float: left;
        font-weight: normal;
    }

    .e-treegrid .e-ejinputtext:focus {
        box-shadow: 0 0 5px;
    }

    .e-treegrid .e-searchinput::-ms-clear {
        display: none;
    }

    .e-treegrid .e-reSizeColbg {
        position: absolute;
        border-left: 1px dotted;
    }

     .e-treegrid-overflow {
        overflow: hidden;
    }

    .e-treegrid .e-gridcontent .e-rowcell,
    .e-treegrid .e-gridheader .e-headercell {
        .gantt-user-select();
        vertical-align: middle;
    }

    .e-treegrid .e-intend,
    .e-treegrid .e-summaryintend
     {
        padding-left: 0px !important;
    }

    .e-treegrid .e-headercell .e-columnicon {
        & when (@skin= "material") {
            width: 16px;
            padding: 4px;
            margin-top: -19px;
        }

        & when not (@skin= "material") {
            width: 10px;
            padding: 3px;
            margin-top: -17px;
        }

        height: 16px;
        float: right;
        margin-right: -30px;
        box-sizing: content-box;
        -webkit-box-sizing: content-box;
    }

    .e-treegrid .e-headercell .e-columnicon:before {
        font-size: 14px !important;
    }

    .e-treegrid .e-headercell .e-filtericon {
        & when (@skin= "material") {
            width: 16px;
            padding: 4px;
            margin-top: -19px;
        }

        & when not (@skin= "material") {
            width: 10px;
            padding: 3px;
            margin-top: -17px;
        }

        height: 16px;
        float: right;
        margin-right: -30px;
        padding: 3px;
        box-sizing: content-box;
        -webkit-box-sizing: content-box;
    }

     .e-treegridmenufilterwraper {
        & when (@skin= "material") {
            padding: 24px !important;
        }

        & when (@skin= "office-365") {
            padding: 20px 12px !important;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 15px !important;
        }

        border: solid 1px;
    }

    .e-treegridadaptivedialog {
        height: auto !important;
        width: auto !important;
    }

     .e-treegridadaptivesubicon {
        display: none !important;
    }

     .e-treegridadaptivewidth {
        width: auto !important;
    }

    .e-treegrid .e-headercell .e-filtericon:before {
        font-size: 14px !important;
    }

    div.e-dialog.e-columnSelector {
        padding: 0;
    }

    .e-treegrid .e-columnmenu-icon:before {
        content: "\e76b";
    }

    .e-treegrid .e-summaryrow td,
    .e-treegrid .e-footersummaryrow td {
        & when (@skin= "office-365") {
            font-weight: 600;
            border-width: 0px;
            font-size: 13px;
        }

        & when not (@skin= "office-365") {
            font-weight: bold;
            border-width: 0px;
            font-size: 12px;
        }
    }
    .e-treegrid .e-firstfootersummaryrow td .e-summarycell {
           padding-left: 2px !important;
           padding-top: 4px !important;
    }
   
    .e-treegrid .e-treegridtrimcell {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .e-treegrid .e-summaryrow .e-summarytitle.e-treegridtrimcell,
    .e-treegrid .e-summaryrow .e-summarytitle.e-textwrapcell {
        width: 100%;
    }

    .e-treegrid .e-summaryrow .e-summarytitle,
    .e-treegrid .e-footersummaryrow .e-summarytitle {
        padding-right:10px;
    }

    .e-treegrid .e-summaryrow td:last-child,
    .e-treegrid .e-footersummaryrow td:last-child {
        border-width: 0px 1px 0px 0px;
    }

    .e-treegrid .e-dialog .e-treegridform .e-editdialogrowcell {
        & when (@skin= "material") {
            border: none;
            padding: 10px 0px 10px 10px;
        }

        & when not (@skin= "material") {
            border: none;
            padding: 5px 0px 5px 10px;
        }
    }

    .e-treegrid .e-hide {
        display: none !important;
    }

    .e-treegrid .e-dialog .e-treegridform .e-editdialoglabel {
        & when (@skin= "material") {
            border: none;
            padding: 10px 10px 10px 0px;
        }

        & when not (@skin= "material") {
            border: none;
            padding: 5px 10px 5px 0px;
        }
    }

    .e-treegrid .e-dialog .e-treegridform .e-editdialogbutton {
        & when (@skin= "material") {
            padding: 10px 0px 0px 0px;
        }

        & when not (@skin= "material") {
            padding: 5px 0px;
        }
    }

    .e-treegrid .e-dialog .e-editdialog-padding {
        font-weight: normal;

        & when (@skin= "office-365") {
            font-size: 14px;
        }

        & when not (@skin= "material") {
            padding: 7px 24px;
        }
    }

    .e-treegrid .e-dialog .e-treegridform .e-editdialoglabel label:first-child {
        font-weight: normal;
    }

     .e-columnMenuListDiv label {
        width: 175px;
        display: inline-block;
        margin-bottom: 0px;
        font-weight: normal;

        & when (@skin= "office-365") {
            margin-left: 8px;
            font-size: 13px;
        }

        & when not (@skin= "office-365") {
            margin-left: 15px;
            font-size: 12px;
        }
    }

     .e-columnMenuListDiv {
        line-height: 1.9;
        white-space: nowrap;

        & when (@skin= "office-365") {
            padding: 6px 8px 5px 12px;
        }

        & when not (@skin= "office-365") {
            padding: 3px 8px 3px;
        }
    }

     .e-column-insertleft-icon:before {
        content: "\e7f3";
    }

     .e-column-insertright-icon:before {
        content: "\e7f4";
    }

     .e-column-rename-icon:before {
        content: "\e7f5";
    }

     .e-column-filter-icon:before {
        content: "\e669";
    }

     .e-column-filtered-icon:before {
        content: "\e668";
    }

     .e-column-delete-icon:before {
        content: "\e7f6";
    }

     .e-columnmenu-ascending:before {
        content: "\e714";
    }

     .e-columnmenu-descending:before {
        content: "\e713";
    }

     .e-columnchooser-icon:before {
        content: "\e76e";
    }

    .e-treegrid .e-frozencontentdiv, 
    .e-treegrid .e-frozenheaderdiv, 
    .e-treegrid .e-frozenfooterdiv {
        float: left;
    }

    .e-treegrid .e-frozencontentdiv .e-table, 
    .e-treegrid .e-movablecontentdiv .e-table {
        position: relative;
    }

    .e-treegrid .e-movablecontainer, 
    .e-treegrid .e-movableheader, 
    .e-treegrid .e-movablefooter {
        border-left-width: 1px;
        border-left-style: solid;
    }

    .e-treegrid .e-movableheader, 
    .e-treegrid .e-movablefooter {
        overflow: hidden;
    }

     .e-freezecolumn-icon:before {
        content: "\e7da";
    }

     .e-unfreezecolumn-icon:before {
        content: "\e7d9";
    }

     .e-freezecolumnbefore-icon:before {
        content: "\e7db";
    }

    .e-treegrid .e-scrollcss .e-footercontainer {
        border-right-style: solid;
        border-right-width: 1px;
    }

    .e-treegrid .e-lastsummaryrow {
        border-bottom-width: 1px !important;
    }

    .e-treegrid .e-treegridpopup {
        position: absolute;
        font-weight: normal;
        z-index: 10000;
    }

    .e-treegrid .e-treegridpopup .e-popupcontent {
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        font-size: 14px;
        padding: 4px 4px;
    }

    .e-treegrid .e-treegridpopup span {
        display: inline-block;
        height: 16px;
        cursor: pointer;
        padding: 4px;
        border: 1px solid transparent;
        width: 16px;
        box-sizing: content-box;
    }

    .e-treegrid .e-treegridpopup .e-tail:before, 
    .e-treegrid .e-treegridpopup .e-tail:after {
        border: 10px solid rgba(0, 0, 0, 0);
        content: "";
        height: 0;
        left: 8px;
        position: absolute;
        width: 0;
    }

    .e-treegrid .e-treegridpopup .e-downtail:after {
        top: 34px;
    }

     .e-columnmenuitem {
        & when (@skin= "material") {
            padding-left: 8px;
            padding-right: 8px;
        }

        & when (@skin= "office-365") {
            padding-left: 5px;
        }

        box-sizing: border-box;
    }

     .e-menuitem {
        & when (@skin= "material") {
            padding-left: 8px;
            padding-right: 8px;
        }

        & when (@skin= "office-365") {
            padding-left: 5px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding-left: 0px;
        }

        box-sizing: border-box;
    }

     .e-columnmenuitem .e-menuitem-label {
        & when (@skin= "material") {
            padding: 8px;
            font-size: 12px;
        }

        & when (@skin= "office-365") {
            padding: 9px 2px;
            font-size: 13px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 7px;
            font-size: 12px;
        }

        float: left;
    }

     .e-columnmenuitem .e-icon {
        & when (@skin= "material") {
            padding: 8px;
        }

        & when (@skin= "office-365") {
            padding: 9px 7px;
        }

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

        font-size: 16px;
        float: left;
    }

     .e-columnmenuitem .e-expander {
        & when (@skin= "material") {
            padding: 8px;
            font-size: 10px;
        }

        & when (@skin= "office-365") {
            padding: 9px 7px;
            font-size: 16px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 7px;
            font-size: 16px;
        }
    }

     .e-columnmenuitem .e-expander:before {
        & when (@skin = "material") {
            margin-top: 4px;
        }
    }

     .e-menuitem-hr {
        & when (@skin= "material") {
            margin-top: 8px;
            margin-bottom: 8px;
        }

        & when not (@skin= "material") {
            margin-top: 0px;
            margin-bottom: 0px;
        }
    }

     .e-treegrid-columnmenu,
    .e-treegrid-contextmenu,
    .e-innerContextmenu {
        & when (@skin= "material") {
            padding: 8px 0px 8px 0px;
            margin: 0px;
        }

        & when not (@skin= "material") {
            padding: 0px;
            margin: 0px;
        }
    }

    .e-treegrid .e-headercelldiv div {
        display: inline-block;
    }

    .e-treegrid .e-headertemplate > .e-headercelldiv {
        padding: 0 8px;
    }

    .e-treegrid.e-wrap .e-headercelldiv {
        height: Auto;
        white-space: normal;
        line-height: 19px;
    }

    .e-treegrid.e-wrap .e-headercelldiv {
        margin-bottom: 2px;
        margin-top: 0px;
    }

    .e-treegrid .e-page {
        .gantt-content-boxSizing();
    }

    .e-treegrid .e-pager, 
    .e-treegrid .e-pagerstatusbar {
        border-top-style: none !important;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-left-style: solid;
        border-left-width: 1px;
        border-right-style: solid;
        border-right-width: 1px;
        padding-bottom: 9px;
        padding-top: 9px;
        white-space: normal;
    }

    .e-treegrid .e-pagercontainer .e-icon:before {
        display: inline-block;
    }

    .e-treegrid .e-pagercontainer {
        float: none;
    }

    .e-treegrid .e-pager {
        & when (@skin= "office-365") {
            padding-left: 0px;
            padding-right: 0px;
        }
    }

    .e-treegridicon {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }

    .e-treegrid .e-table {
        margin-top: 0px;
    }

    .e-treegrid .e-tableLastCell {
        border-right-width: 1px;
        border-style: solid;
    }

    .e-treegrid .e-column-menu-padding {
        & when (@skin= "material") {
            padding-right: 59px !important;
        }

        & when (@skin= "office-365") {
            padding-right: 43px !important;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding-right: 35px !important;
        }
    }

    .e-columnmenu,
    .e-innerContextmenu,
    .e-contextmenu {
        & when (@skin= "material") {
            border-width: 0px;
            border-style: solid;
        }

        & when not (@skin= "material") {
            border-width: 1px;
            border-style: solid;
        }
    }

    .e-treegrid .e-rowcell .e-cell.e-treecheckboxcolumn {
        & when (@skin= "material") {
            padding-top: 2px;
        }

        & when (@skin= "office-365") {
            padding-top: 0px;
            margin-top: -3px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding-top: 0px;
            margin-top: 3px;
        }
    }

    .e-treegrid .e-rowcell .e-cell {
        padding-top: 4px;
    }

    .e-treegrid .e-chkbox-wrap .e-chkbox-small > span {
        .gantt-content-boxSizing();
    }

    .e-headertooltip {
        & when (@skin= "material") {
            font-weight: 500;
            opacity: 1;
            border-radius: 2px;
        }

        & when not (@skin= "material") {
            font-weight: bold;
            opacity: 0.8;
            border-radius: 0px;
        }

        position: absolute;
        padding: 5px 25px 5px 25px !important;
        font-size: 12px;
        border: 1px solid;
        text-align: center;
        cursor: pointer;
    }

     .e-treegridPane .e-treegrid .e-headercelldiv {
        & when (@skin = "material") {
            font-size: 13px;
        }
    }

    .e-material-treegrid {
        & when (@skin = "material") {
            font-family: material;
        }
    }

     .e-addedColumn .e-editValue {
        & when (@skin = "material") {
            padding: 0px 0px 10px 0px;
            height: 30px;
        }

        & when (@skin= "office-365") {
            padding: 0px 0px 0px 0px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 0px;
        }
    }

    .e-treegrid .e-columnheader .e-filterbar-material {
        & when (@skin = "material") {
            height: 46px;
        }

        & when (@skin = "office-365") {
            height: 36px;
        }
    }

    .e-treegrid .e-columnheader .e-filterbarcell {
        & when (@skin = "material") {
            padding: 7px 28px 0px 28px;
        }
    }

    .e-treegrid .e-gridheader .e-headercell:last-child {
        & when (@skin = "material") {
            padding-right: 24px;
        }

        & when (@skin = "office-365") {
            padding-right: 8px;
        }
    }

    .e-treegrid .e-gridcontent .e-rowcell:last-child {
        & when (@skin = "material") {
            padding-right: 24px;
        }

        & when (@skin = "office-365") {
            padding-right: 10px;
        }
    }

    .e-treegrid .e-gridheader .e-headercell:first-child {
        & when (@skin = "material") {
            padding-left: 24px;
        }

        & when (@skin = "office-365") {
            padding-left: 8px;
        }
    }

    .e-treegrid .e-gridcontent .e-rowcell:first-child {
        & when (@skin = "material") {
            padding-left: 24px;
        }

        & when (@skin = "office-365") {
            padding-left: 10px;
        }
    }

     .e-column-filter-icon:before {
        & when (@skin = "material") {
            margin-top: 1px;
        }

        & when (@skin = "office-365") {
            margin-top: 2px;
        }
    }
    .e-treegrid .e-summarytreegridcollapse,
    .e-treegrid .e-treegridcollapse,
    .e-treegrid .e-summarytreegridexpand,
    .e-treegrid .e-treegridexpand,
    .e-treegrid .e-columnicon,
    .e-treegrid .e-filtericon {
        & when (@skin = "material") {
            position: relative;
        }
    }

    .e-treegrid .e-filtericon:after,
    .e-treegrid .e-columnicon:after {
        & when (@skin = "material") {
            content: '';
            position: absolute;
            display: block;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            opacity: 0.75;
            filter: alpha(opacity=75);
            -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);
            background-color: rgba(0, 0, 0, 0.12);
        }
    }

    .e-treegrid .e-treegridcollapse:after,
    .e-treegrid .e-summarytreegridcollapse:after,
    .e-treegrid .e-summarytreegridexpand:after,
    .e-treegrid .e-treegridexpand:after {
        & when (@skin = "material") {
            content: '';
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            opacity: 0.75;
            filter: alpha(opacity=75);
            -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);
            background-color: rgba(0, 0, 0, 0.12);
        }
    }

    .e-treegrid .e-treegridcollapse.e-treegrid-animate:not(:active):after,
    .e-treegrid .e-treegridexpand.e-treegrid-animate:not(:active):after,
    .e-treegrid .e-summarytreegridcollapse.e-treegrid-animate:not(:active):after,
    .e-treegrid .e-summarytreegridexpand.e-treegrid-animate:not(:active):after,
    .e-treegrid .e-columnicon.e-treegrid-animate:not(:active):after,
    .e-treegrid .e-filtericon.e-treegrid-animate:not(:active):after {
        & when (@skin = "material") {
            -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;
        }
    }

    .e-treegrid .e-chkbox-wrap .e-chkbox-small > span {
        & when (@skin = "material") {
            top: 3px;
            box-sizing: content-box;
            -moz-box-sizing: content-box;
        }
    }

    @-webkit-keyframes e-ripple-treegrid {
        100% {
            & when (@skin = "material") {
                opacity: 0;
                -webkit-transform: scale(4);
                transform: scale(4);
            }
        }
    }

    @keyframes e-ripple-treegrid {
        100% {
            & when (@skin = "material") {
                opacity: 0;
                -webkit-transform: scale(4);
                transform: scale(4);
            }
        }
    }

     .e-filterMenuDiv .e-btn.e-select, 
     .e-filterMenuDiv .e-btn.e-select:hover, 
     .e-filterMenuDiv .e-btn.e-select:active,
    .e-treegrid-dialog .e-btn.e-select, 
    .e-treegrid-dialog .e-btn.e-select:hover, 
    .e-treegrid-dialog .e-btn.e-select:active {
        & when (@skin = "material") {
            font-weight: 500;
        }
    }

    .e-dialog.e-widget-content.e-filterMenuDiv {
        & when (@skin = "material") {
            font-size: 13px;
        }
    }

    .e-treegridadaptivedialog .e-widget-content {
        & when (@skin = "material") {
            padding: 10px 5px 20px 5px;
        }
    }

    .e-treegrid-dialog div[id$="ColumnRenameDialog"],
    .e-treegrid-dialog div[id$="ConfirmDialog"] {
        & when (@skin = "material") {
            padding: 24px 24px 0px 24px;
        }
    }

    .e-treegrid-dialog div[id$="ColumnRenameDialog"] .e-editValue {
        & when (@skin = "material") {
            height: 30px;
        }
    }

     .e-filterMenuDiv .e-filter-container {
        & when (@skin= "material") {
            min-width: 255px;
        }

        & when (@skin= "office-365") {
            min-width: 224px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            min-width: 200px;
        }
    }

     .e-filterMenuDiv .e-dropdown-filter-container,
     .e-filterMenuDiv .e-filter-operator {
        & when (@skin = "material") {
            padding-bottom: 24px;
        }

        & when (@skin= "office-365") {
            padding-bottom: 15px;
        }

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

     .e-filterMenuDiv .e-filter-value {
        & when (@skin = "material") {
            padding-top: 5px;
            padding-bottom: 14px;
        }

        & when (@skin= "office-365") {
            padding-top: 10px;
            padding-bottom: 20px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding-top: 5px;
            padding-bottom: 14px;
        }
    }

     .e-filterMenuDiv .e-checkbox-filter-container {
        & when (@skin = "material") {
            padding-bottom: 0px;
        }

        & when not (@skin= "material") {
            padding-bottom: 10px;
        }
    }

     .e-filterMenuDiv .e-filter-button-container {
        & when (@skin = "material") {
            text-align: right;
        }

        height: 28px;
    }

     .e-filterMenuDiv .e-filter-btn-filter {
        & when (@skin = "material") {
            width: auto;
            display: inline-block;
            margin-right: 8px;
        }

        & when not (@skin= "material") {
            width: 47%;
            float: left;
            margin-right: 6%;
        }
    }

     .e-filterMenuDiv .e-filter-btn-clear {
        & when (@skin = "material") {
            width: auto;
            display: inline-block;
        }

        & when not (@skin= "material") {
            width: 47%;
            float: left;
        }
    }

     .e-filterMenuDiv .e-checkbox-filter-text {
        padding-right: 24px;
        float: left;
    }

    .e-treegrid-dialog .e-add-dialog-btn-ok {
        & when (@skin = "material") {
            width: 100px;
            display: inline-block;
        }

        & when (@skin = "office-365") {
            width: 100px;
            display: inline-block;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            width: 50%;
            float: left;
        }
    }

    .e-treegrid-dialog .e-add-dialog-btn-ok div {
        & when (@skin = "office-365") {
            padding: 5px 3px 15px 0px;
        }

        & when not (@skin= "office-365") {
            padding: 5px 0px 15px 15px;
        }
    }

    .e-treegrid-dialog .e-add-dialog-btn-cancel {
        & when (@skin = "material") {
            width: 100px;
            display: inline-block;
        }

        & when (@skin = "office-365") {
            width: 100px;
            display: inline-block;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            width: 50%;
            float: left;
        }
    }

    .e-treegrid-dialog .e-add-dialog-btn-cancel div {
        & when (@skin = "office-365") {
            padding: 5px 0px 15px 3px;
        }

        & when not (@skin= "office-365") {
            padding: 5px 0px 15px 15px;
        }
    }

    .e-treegrid-dialog .e-treegrid-add-btn input,
    .e-treegrid-dialog .e-confirm-dialog-btn input, 
    .e-treegrid .e-dialog .e-treegridform .e-editdialogbutton input {
        & when (@skin = "material") {
            font-size: 14px;
            margin-right: 0px;
        }

        & when (@skin = "office-365") {
            font-size: 14px;
            margin-right: 0px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: 14px;
            font-weight: normal;
            margin-right: 0px;
        }
    }

    .e-treegrid .e-dialog .e-treegridform .e-editdialoglabel label {
        font-size: 14px;
    }

    .e-treegrid-dialog .e-treegrid-rename-dialog-btn input {
        font-size: 14px;
        font-weight: normal;
    }

    .e-treegrid-dialog .e-treegrid-rename-dialog-btn-cancel {
        margin-right: 0px;
    }

     .e-addedColumn .e-editLabel {
        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 1px 1px 0px 1px;
        }
    }

    .e-treegrid-dialog .e-treegrid-add-btn {
        width: 100%;
        height: 27px;

        & when (@skin = "material") {
            margin-top: 20px;
            text-align: right;
            margin-bottom: 15px;
        }

        & when (@skin = "office-365") {
            text-align: right;
            margin-top: -5px;
            margin-bottom: 12px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-top: 20px;
            margin-bottom: 15px;
        }
    }

    .e-treegrid-dialog .e-confirm-dialog-btn {
        width: 100%;
        margin-right: 15px;

        & when (@skin = "material") {
            text-align: right;
            margin-top: 10px;
            margin-bottom: 15px;
        }

        & when (@skin= "office-365") {
            margin-top: 20px;
            margin-bottom: 0px;
            text-align: right;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-top: 20px;
            margin-bottom: 15px;
        }
    }

    .e-treegrid-dialog .e-confirm-dialog-btn-cancel {
        & when (@skin = "material") {
            width: auto;
            margin-left: 8px;
        }

        & when (@skin= "office-365") {
            width: 80px;
            margin-left: 8px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-left: 4%;
            width: 47%;
        }
    }

    .e-treegrid-dialog .e-confirm-dialog-btn-ok {
        & when (@skin = "material") {
            width: 80px;
        }

        & when (@skin= "office-365") {
            width: 80px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            width: 47%;
        }
    }

    .e-treegrid-dialog .e-treegrid-rename-dialog-btn {
        margin-top: 20px;
        width: 100%;
        margin-right: 15px;

        & when (@skin = "material") {
            text-align: right;
            margin-bottom: 15px;
        }

        & when (@skin= "office-365") {
            text-align: right;
            margin-bottom: 0px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-bottom: 15px;
        }
    }

    .e-treegrid-dialog .e-treegrid-rename-dialog-btn-ok {
        & when (@skin = "material") {
            margin-right: 8px;
            width: 80px;
        }

        & when (@skin= "office-365") {
            margin-right: 8px;
            width: 80px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            float: left;
            width: 47%;
            margin-right: 5%;
        }
    }

    .e-treegrid-dialog .e-treegrid-rename-dialog-btn-cancel {
        & when (@skin = "material") {
            width: 80px;
        }

        & when (@skin= "office-365") {
            width: 80px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            width: 47%;
        }
    }

     .e-columnMenuListDiv .e-chkbox-small > span {
        position: relative;
        top: 3px;
    }

      .e-treegridPane .e-treegrid .e-headercell {
        & when (@skin = "office-365") {
            height: 58px;
        }
    }

     .e-contextmenu-image {
        & when (@skin = "material") {
            padding: 8px 5px 8px 7px;
        }

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

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

        box-sizing: content-box;
        display: inline-block;
        float: left;
    }

     .e-contextmenu-icon {
        & when (@skin = "material") {
            padding: 8px 5px 8px 7px;
        }

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

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

        box-sizing: content-box;
        display: inline-block;
        float: left;
    }

     .e-contextmenu-label {
        & when (@skin = "material") {
            padding: 5px 5px 6px 5px;
        }

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

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

        display: inline-block;
        float: left;
    }

    .e-contextmenu-label span {
        & when (@skin = "office-365") {
            font-size: 13px;
        }

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

    .e-menuitem .e-expander {
        & when (@skin = "material") {
            padding: 8px 5px 8px 7px;
            font-size: 10px;
        }

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

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 7px 5px 7px 7px;
            font-size: 14px;
        }

        box-sizing: content-box;
        display: inline-block;
        float: right;
    }

     .e-menuitem .e-expander:before {
        & when (@skin = "material") {
            margin-top: 2px;
        }
    }

     .e-addedColumn table {
        & when (@skin= "office-365") {
            border-spacing: 0px;
        }
    }

     .e-addedColumn .e-add-property-container {
        & when (@skin = "material") {
            padding: 5px 15px 0px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 5px 15px 0px;
        }

        text-align: left;
        font-weight: normal;
        outline: none;
        width: 50%;
    }

     .e-addedColumn .e-add-property-container:nth-child(odd) {
        & when (@skin= "office-365") {
            padding: 0px 10px 15px 0px;
        }
    }

     .e-addedColumn .e-add-property-container:nth-child(even) {
        & when (@skin= "office-365") {
            padding: 0px 0px 15px 10px;
        }
    }


     .e-addedColumn .e-editLabel {
        & when (@skin = "material") {
            padding: 0px 0px 2px 0px;
        }

        & when (@skin= "office-365") {
            padding: 0px 0px 10px 0px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 0px 0px 2px 0px;
        }
    }

     .e-addedColumn .e-editLabel label,
     .e-treegridrenamedialog .e-editLabel label {
        & when (@skin = "material") {
            margin-bottom: 5px;
            font-size: 13px;
        }

        & when (@skin= "office-365") {
            margin-bottom: 0px;
            font-size: 13px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-bottom: 5px;
            font-size: 14px;
        }
    }

     .e-addedColumn .e-editValue {
        & when (@skin= "office-365") {
            padding: 0px 0px 0px 0px;
        }
    }

     .e-treegridrenamedialog .e-editLabel {
        & when (@skin= "office-365") {
            padding: 0px 0px 10px 0px;
        }
    }

      .e-treegridrenamedialog .e-ejinputtext,
     .e-addedColumn .e-ejinputtext {
        & when (@skin = "material") {
            height: 28px;
            width: 98%;
        }

        & when (@skin= "office-365") {
            height: 30px;
            width: 98%;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            height: 26px;
            width: 98%;
        }
    }

    .e-treegrid .e-table.e-zerospace {
        border-spacing: 0px;
    }

     .e-treegird-filterDialogHeaderDiv {
        height: 10% !important;
        text-align: center;
    }

     .e-treegrid-resultSearch .e-searchbox .e-ejinputtext {
        height: 23px;
        width: 97% !important;
    }

     .e-treegrid-responsiveBack:before {
        content: "\e74d";
    }

     .e-treegrid-resFilterleftIcon {
        float: left;
        line-height: 2 !important;
        position: absolute;
        left: 0;
        top: 0;
        vertical-align: middle;
        font-size: 21px;
        cursor: pointer;
        margin-left: 2%;
    }

     .e-treegrid-resIcon {
        font-size: 21px !important;
    }

     .e-treegrid-resFilterRigthIcon {
        float: right;
        line-height: 2 !important;
        font-size: 21px;
        position: absolute;
        right: 0;
        top: 0;
        margin-right: 5%;
        cursor: pointer;
    }

     .e-treegrid-resIcon.e-responsiveCustomFilter:before {
        content: "\e753";
    }

     .e-treegrid-responsiveFilterBtnLeft {
        height: 31px;
        left: 0px;
        bottom: 0px;
        position: absolute !important;
        float: left;
        border-radius: 0px;
        border-right: 1px solid #c4c4c4 !important;
    }

     .e-treegrid-responsiveFilterBtnRight {
        bottom: 0px;
        right: 0px;
        position: absolute !important;
        height: 31px;
        float: right;
        border-radius: 0px;
    }

     .e-treegrid-responsiveClose:before {
        content: "\e74e";
    }

    .e-headerContextmenu .e-icon {
        position: relative;
        top: 5px;
    }

    .e-headerContextmenu .e-expander {
        float: right;
        position: relative;
        top: 0px;
    }

     .e-treegrid-textWrap {
        word-break: break-all;
    }

    .e-contextmenu .e-save, 
    .e-contextmenu .e-cancel {
        position: relative;
        top: 3.5px;
    }

    .e-contextmenu .e-edit {
        position: relative;
        top: 3px;
    }
}

.mixin(@widget) when (@widget = ganttchart), (@widget = none) {
    .e-ganttchart .e-ganttviewercontainer {
        display: block;
        position: relative;
    }

    .e-ganttchart .e-widget [class^="e-"] {
        box-sizing: border-box;
    }

    .e-ganttchart .e-borderbox {
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        border-bottom-width: 16px;
        border-bottom-style: solid;
    }

    .e-ganttchart .e-ganttviewerheaderContainer {
        position: relative;
        overflow: auto;
        overflow-x: hidden;
        overflow-y: hidden;
        height: 45px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

    .e-ganttchart .e-ganttviewerbodyContianer {
        display: block;
        position: relative;
    }

    .e-ganttchart .e-ganttviewerbodyContianer-dependencyViewContainer {
        display: block;
        position: absolute;
        z-index: 1;
    }

    .e-ganttchart .e-ganttviewerbodyContianer-secondaryCanvas {
        display: block;
        position: absolute;
    }

    .e-ganttchart .e-gantt-schedule-container {
        display: block;
        position: static;
    }

    .e-ganttchart .e-ganttviewerbodyContianer-ganttViewTable {
        display: block;
        position: absolute;
        z-index: 2;
        margin-top: 0px;
        border-spacing: 0;
        overflow: hidden;
    }

    .e-ganttchart .e-ganttviewerbodyContent {
        display: block;
        position: relative;
        overflow: hidden\9;
    }

    .e-ganttchart-core {
        position: relative;
    }

    .e-ganttchart .e-schedule-headerrow-week > thead > tr > th,
    .e-ganttchart .e-schedule-headerrow-day > thead > tr > th {
        border-left: none;
    }

    .e-ganttchart .e-schedule-week-headercell-content {
        height: 22px;
    }

    .e-ganttchart .e-schedule-day-headercell {
        height: 25px;
        border-bottom: none !important;
    }

    .e-ganttchart .e-schedule-hour-headercell {
        height: 25px;
    }

    .e-ganttchart .e-schedule-day-headercell,
    .e-ganttchart .e-schedule-hour-headercell,
    .e-ganttchart .e-schedule-week-headercell {
        font-weight: @gantt-schedule-font-weight;
        font-size: @gantt-schedule-font-size;
        text-align: center;
        border-spacing: 0;
        border-style: solid;
        border-width: 1px;
        white-space: nowrap;
        position: static;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -khtml-box-sizing: border-box;
        -o-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        .gantt-user-select();
        border-top: none;
        display: inline-block;
        padding: 0;
        margin: 0;
    }

    .e-ganttchart .e-ganttgridlines {
        display: table-cell;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        -ms-box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        -khtml-box-sizing: border-box !important;
        -o-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .e-ganttchart .e-gripper:before {
        content: "\e602";
        padding: 2px;
    }

    .e-ganttchart .e-taskbarresizer-right.e-icon.e-gripper {
        margin-left: -4px;
    }

    .e-ganttchart .e-taskbarresizer-left.e-icon.e-gripper {
        margin-left: -6px;
    }

    .e-ganttchart .e-schedule-headerrow-week,
    .e-ganttchart .e-schedule-headerrow-day {
        border-collapse: collapse;
        padding: 0;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -khtml-box-sizing: border-box;
        -o-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-width: 0;
        border-spacing: 0;
        margin: 0;
    }

    .e-ganttchart .e-chartcell {
        display: table-cell;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        -ms-box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        -khtml-box-sizing: border-box !important;
        -o-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important;
        border-collapse: collapse;
        border-spacing: 0;
        vertical-align: middle;
    }

    .e-ganttchart .e-tasknameContainer {
        text-align: right;
        position: relative;
    }


    .e-ganttchart .e-hoilday_label {
        -webkit-transform: rotate(270deg); /* Chrome & Safari */
        -moz-transform: rotate(270deg); /* Firefox */
        -ms-transform: rotate(270deg); /* IE 9+ */
        -o-transform: rotate(270deg); /* Opera */
        transform: rotate(270deg); /* CSS3 */
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */
    }

    .e-ganttchart .e-gantt-childtaskbar,
    .e-ganttchart .e-gantt-parenttaskbar-innerdiv {
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -khtml-box-sizing: border-box;
        -o-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: auto;
        border-spacing: 0;
        padding: 0;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        position: absolute;
        border-style: solid;
        border-width: 1px;
    }

    .e-gantt .e-ganttpopup {
        position: absolute;
        z-index: 10000;
        font-weight: normal;
    }

    .e-gantt .e-ganttpopup .e-popupcontent {
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        font-size: 14px;
        padding: 4px 4px;
    }

    .e-gantt .e-ganttpopup span {
        display: inline-block;
        height: 16px;
        cursor: pointer;
        padding: 4px;
        border: 1px solid transparent;
        width: 16px;
        box-sizing: content-box;
    }

    .e-gantt .e-ganttpopup .e-tail:before,
    .e-gantt .e-ganttpopup .e-tail:after {
        border: 10px solid rgba(0, 0, 0, 0);
        content: "";
        height: 0;
        left: 8px;
        position: absolute;
        width: 0;
    }

    .e-gantt .e-ganttpopup .e-downtail:after {
        top: 34px;
    }

    .e-ganttchart .e-milestone-top,
    .e-ganttchart .e-baseline-milestone-top,
    .e-ganttchart .e-milestone-bottom,
    .e-ganttchart .e-baseline-milestone-bottom {
        width: 0;
        height: 0;
        position: absolute;
        z-index: 3;
    }

    .e-ganttchart .e-taskbarresizer-left {
        position: absolute;
        z-index: 4;
    }

     .e-predecessor-false:before {
        background-color: #ec1e24;
        border: 1px solid #ec1e24;
        border-radius: 9px;
        color: white;
        content: "\e656";
        display: inline;
        font-family: 'ej-webfont';
    }

     .e-predecessor-true:before {
        background-color: #72af33;
        border: 1px solid #72af33;
        border-radius: 11px;
        color: white;
        content: "\e657";
        display: inline;
        font-size: 14px;
        font-family: 'ej-webfont';
    }

    .e-ganttchart .e-connectorpoint-left {
        position: absolute;
        z-index: 5;
    }

    .e-ganttchart .e-connectortouchpoint {
        position: absolute;
        z-index: 5;
        display: none;
    }

    .e-ganttchart .e-enableconnectortouchpoint {
        display: block;
    }

    .e-ganttchart .e-connectorpoint-right {
        position: absolute;
        z-index: 5;
    }

    .e-ganttchart .e-criticalconnectorline {
        z-index: 100 !important;
    }

    .e-ganttchart .e-criticalconnectorlinerightarrow {
        z-index: 100 !important;
    }

    .e-ganttchart .e-criticalconnectorlineleftarrow {
        z-index: 100 !important;
    }

    .e-ganttchart .e-connectorpoint-hover {
        cursor: pointer;
    }

    .e-ganttchart .e-gantt-parenttaskbar-innerdiv {
        position: absolute;
        z-index: 3;
    }

    .e-ganttchart .e-tasklabel {
        & when (@skin= "material") {
            font-size: 12px;
            margin-right: 10px;
        }

        & when (@skin= "office-365") {
            font-size: 12px;
            margin-right: 8px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: 11px;
            margin-right: 10px;
        }

        vertical-align: middle;
        margin-left: 5px;
        display: block;
        font-weight: normal;
    }

    .e-ganttchart .e-gantt-childtaskbar-progress,
    .e-ganttchart .e-gantt-parenttaskbar-progress {
        position: static;
        margin: auto;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -khtml-box-sizing: border-box;
        -o-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-style: solid;
        border-width: 1px;
    }

    .e-ganttchart .e-progressright {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .e-ganttchart .e-ejganttschedule {
        display: inline-block;
        display: -moz-inline-stack;
        *display: inline;
        zoom: 1;
        white-space: nowrap;
        border-spacing: 0 !important;
        border-collapse: collapse;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -khtml-box-sizing: border-box;
        -o-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
    }

    .e-ganttchart td {
        position: static;
        margin: auto;
        border-spacing: 0;
        padding: 0;
        zoom: 1;
        white-space: nowrap;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -khtml-box-sizing: border-box;
        -o-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }


    .e-ganttchart .e-connectorline-rightarrow,
    .e-ganttchart .e-connectorline-leftarrow {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
    }

    .e-ganttchart .e-connectorline-rightarrow {
        border-left-width: 10px;
        border-left-style: solid;
    }

    .e-ganttchart .e-connectorline-leftarrow {
        border-right-width: 10px;
        border-right-style: solid;
    }

    .e-ganttchart .e-connectorline-leftarrow-hover,
    .e-ganttchart .e-connectorline-rightarrow-hover,    
    {    
        z-index: 101;
    }

    .e-ganttchart .e-connectorline-hover{  
        z-index: 101;
        outline: 1px solid;
    }

    .e-tooltipgantt,
    .e-progressbartooltip,
    .e-editingtooltip,
    .e-tooltipganttpredecessor {
        width: auto;
        height: auto;
        min-height: 30px;
        position: relative;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        margin: 5px;
        display: block;
        overflow: hidden;
        z-index: 6;
        font-size: @gantt-tooltip-font-size;
        border-width: 1px;
        border-style: solid;
        .gantt-user-select();
        padding: 5px;
    }

     .e-tooltiptaskname {
        font-size: @gantt-tooltip-font-size;
        font-weight: bold;
    }

    .e-ganttchart .e-progressbartooltip {
        width: 188px;
    }

    .e-ganttchart .e-childContainer,
    .e-ganttchart .e-parentContainer,
    .e-ganttchart .e-ganttviewerbodyContianer,
    .e-ganttchart .e-ganttviewerbodyContent {
        .gantt-user-select();
    }

    .e-ganttchart .e-taskbarname,
    .e-ganttchart .e-resourceinfo {
        font-size: @gantt-tasklable-font-size;
        .gantt-user-select();
        font-style: @gantt-tasklable-font-style;
        margin: 5px;
    }

    .e-customTooltip {
        z-index: 6;
        width: auto;
        padding: 3px;
    }

     .e-tooltiptable {
        .gantt-content-boxSizing();
        border-spacing: 5px;
        border-collapse: separate;
    }

     .e-tooltiptable td {
        padding: 0px;
    }

    .e-tooltipgantt table {
        margin-top: 0px;
    }

     .e-tooltiptd-alignright {
        text-align: right;
    }

     .e-tooltiptd-alignleft {
        text-align: left;
    }

     .e-tooltiptd-aligncenter {
        text-align: center;
    }

    .e-ganttchart .e-holidays {
        position: absolute;
        white-space: nowrap;
        overflow: hidden;
    }

    .e-ganttchart .e-secondary-canvas-holiday {
        top: 0;
        position: absolute;
    }

    .e-ganttchart .e-holiday-label-ie8 {
        /* Internet Explorer */
        white-space: nowrap;
        position: relative;
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        display: inline-block;
    }

    .e-ganttchart .e-holiday-label {
        white-space: nowrap;
        position: relative;
        /* Safari */
        -webkit-transform: rotate(270deg);
        /* Firefox */
        -moz-transform: rotate(270deg);
        /* IE */
        -ms-transform: rotate(270deg);
        /* Opera */
        -o-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .e-ganttchart .e-striplinespan {
        color: white;
        white-space: nowrap;
        padding: 3px;
        position: absolute;
        height: auto;
        width: auto;
        font-size: 0.8em;
        top: 27px;
        left: -2px;
    }

    .e-ganttchart .e-stripline {
        top: 0;
        position: absolute;
        z-index: 4;
    }

    .e-ganttchart .e-stripLines {
        top: 0;
        position: absolute;
    }

    .e-ganttchart .e-weekends {
        position: absolute;
    }

    .e-ganttchart .e-progresshandle {
        width: 10px;
        height: 5px;
        position: absolute;
        left: 0;
        margin-left: 5px;
    }

      .e-progresshandleafter {
        position: absolute;
        left: 0;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom-width: 5px;
        border-bottom-style: solid;
        z-index: -100;
        margin-left: 5px;
    }

      .e-progresshandle .e-progresshandler-element {
        background: none repeat scroll 0 0 #FFFFFF;
        height: 4px;
        margin-bottom: 1px;
        margin-left: 1px;
        margin-right: 1px;
        width: 8px;
    }


      .e-progresshandleafter .e-progresshandlerafter-element {
        border-bottom: 5px solid #FFFFFF;
        border-left: 3px solid rgba(0, 0, 0, 0);
        border-right: 4px solid rgba(0, 0, 0, 0);
        height: 0;
        left: 0;
        margin-left: -3px;
        width: 0;
    }


    .e-ganttchart .e-headercell-weekend {
        -ms-background-clip: content-box;
        -webkit-background-clip: content-box;
        -khtml-background-clip: content-box;
        -o-background-clip: content-box;
        background-clip: content-box;
    }

    .e-ganttchart .e-resourcename {
        outline: none;
    }

    .e-gantticon {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }

    .e-ganttchart .e-ganttgridLinesTable, 
    .e-ganttchart .e-ganttviewerbodyContianer-ganttViewTable {
        margin-top: 0px;
    }

    .e-ganttchart .e-zerospacing {
        border-spacing: 0px;
    }
}

.mixin(@widget) when (@widget = recurrenceeditor), (@widget = none) {
    .e-recurrenceeditor .e-textlabel {
        text-align: left;
        cursor: default;

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

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

    .e-recurrenceeditor table td {
        & when (@skin= "material") {
            padding: 10px;
        }

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

    .e-recurrenceeditor .e-recurendsalign {
        margin-top: 8px;

        & when (@skin= "office-365") {
            font-family: @font-family;
            font-weight: normal;
            font-size: 13px;
        }
    }

    .e-recurrenceeditor .e-recurendslabel {
        text-align: left;
        vertical-align: top;
        cursor: default;

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

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

    .e-recurrenceeditor .e-labelcursor {
        cursor: default;

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

        & when (@skin= "office-365") {
            font-weight: normal;
            font-size: 13px;
        }
    }

    .e-recurrenceeditor .e-textmargin {
        margin: 4px;
    }
}

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

    .e-schedule.e-scheduleouter {
        font-family: @font-family;
        font-size: @font-size;
        overflow: hidden;
        display: block;
        visibility: visible;
        outline: medium none;
    }

    .e-schedule {
        touch-action: none;
    }

    .e-schedule .e-scheduleoutertable {
        height: 100%;
        width: 100%;
        position: relative;
    }

    .e-schedule .e-scheduleoutertable td, .e-schedule .e-scheduleoutertable tr {
        vertical-align: top;
    }

    .e-schedule .e-headrealldaytable td {
        vertical-align: middle;
    }

    .e-schedule .e-horizontalheader {
        vertical-align: middle !important;
    }

    .e-schedule .e-horizontalresheader {
        width: 100%;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .e-schedule .e-horizontaltimecells {
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    .e-schedule .e-horizontaltimecellsht {

        & when (@skin= "material") {
            height: 96px;
        }

        & when (@skin= "office-365") {
            height: 72px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 59px;
        }
    }

    .e-schedule .e-horizontalmonthtimecellsht {

        & when (@skin= "material") {
            height: 96px;
        }

        & when (@skin= "office-365") {
            height: 72px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 62px;
        }
    }

    .e-schedule .e-headertable {
        width: 100%;
    }

    .e-schedule .e-resourceheadertext,
    .e-schedule .e-monthnamerow .e-monthrow .e-monthnameheadertext {
        overflow: hidden;
        width: inherit;
        text-overflow: ellipsis;
        cursor: default;
        white-space: nowrap;
    }

    .e-schedule .e-monthnamerow .e-monthrow .e-monthnameheadertext {
        & when not (@skin= "material") and not (@skin="office-365") {
            height: 19px;
            margin: 5px;
        }
    }

    .e-schedule .e-headerdays {
        position: relative;
        width: 100%;
    }

    .e-schedule .e-agendacellstab {
        width: 100%;
        table-layout: fixed;
    }

    .e-schedule .e-agendacellstab td {
        & when (@skin= "material") {
            height: 48px;
            vertical-align: middle;
        }

        & when (@skin= "office-365") {
            height: 30px;
            vertical-align: middle;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 30px;
        }
    }

    .e-schedule .e-agendaday {
        float: left;
        line-height: @schedule-agendaday-line-height;
        font-weight: normal;

        & when (@skin= "material") {
            margin: 0 16px 0 0;
            font-size: 34px;
            opacity: 0.87;
        }

        & when (@skin= "office-365") {
            margin: 0 8px 0 0;
            font-size: 28px;
            font-family: @font-family Semilight;
            color: #333333;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin: 0 .2em 0 0;
            font-size: 3em;
        }
    }

    .e-schedule .e-agendaweek {
        display: block;
        font-style: normal;

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

        & when (@skin= "office-365") {
            font-size: 13px;
            font-family: @font-family Semibold;
            color: #333333;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            font-size: 1.1em;
        }
    }

    .e-schedule .e-agendamonth {

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

        & when (@skin= "office-365") {
            font-size: 11px;
            font-family: @font-family;
            font-weight: @content-font-weight;
            color: #666666;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            font-size: .9em;
        }
    }

    .e-schedule .e-datecolumn {
        width: 160px;
    }

    .e-schedule .e-timecolumn {
        width: 150px;

        & when (@skin= "material") {
            line-height: 20px;
        }
    }

    .e-schedule .e-resourcecolumn {
        width: 75px;
    }

    .e-schedule .e-agendacells {
        border-top: none;
        cursor: default;
    }

    .e-schedule .e-textwrapper {
        padding: 5px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;

        & when (@skin= "material") {
            margin-left: 19px;
        }

        & when (@skin= "office-365") {
            margin-left: 15px;
            font-family: @font-family;
            font-size: 13px;
            font-weight: @content-font-weight;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-left: 5px;
        }
    }

    .e-schedule .e-textwrapper b {
        & when (@skin= "office-365") {
            font-weight: normal;
        }
    }

    .e-schedule .e-hide {
        display: none !important;
    }

    .e-schedule .e-agendacolordiv {
        width: 14px;
        height: 14px;
        display: inline-block;
        vertical-align: middle;

        & when (@skin= "material") {
            border-radius: 12px;
            margin: -3px 10px 0 0;
        }

        & when (@skin= "office-365") {
            border-radius: 12px;
            margin: -3px 8px 0 0;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin: 0 5px 0 0;
        }
    }

    .e-schedule .e-scheduleallday:before {
        font-size: 16px;
    }

    .e-schedule .e-scheduleallday {
        margin-right: 5px;
        float: left;
    }

    .e-schedule .e-schedulerepeat:before,
    .e-schedule .e-recurapp:before {
        content: "\e7b7";

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

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

    .e-schedule .e-appup:before {
        font-size: 16px;

        & when (@skin= "material") {
            content: "\e667";
        }

        & when (@skin= "office-365") {
            content: "\e625";
        }

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

    .e-schedule .e-appdown:before {
        font-size: 16px;

        & when (@skin= "material") {
            content: "\e666";
        }

        & when (@skin= "office-365") {
            content: "\e627";
        }

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

    .e-schedule .e-schedulerepeat,
    .e-schedule .e-schedulerepeatedit {
        display: inline-block;
        vertical-align: middle;

        & when (@skin= "material") {
            margin: 1px 5px 0 -2px;
        }

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

    .e-schedule .e-schedulerepeatedit:before,
    .e-schedule .e-recureditapp:before {
        content: "\e7b8";

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

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

    .e-schedule .e-firstcolumn {
        border-left: none !important;
    }

    .e-schedule .e-agendaappointment {
        position: relative;
        display: block;
        line-height: 14px;

        & when (@skin= "office-365") {
            font-family: @font-family;
            font-size: 13px;
            font-weight: normal;
        }
    }

    .e-schedule .e-agendaappointment.e-selectedAppointment {
        border: none;
    }

    .e-schedule .e-agendacells:focus,
    .e-schedule .e-agendaappointment {
        outline: 0 none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

    .e-schedule .e-agendahover {
        cursor: pointer;
        top: 0px;
        right: 0px;
        position: absolute;
        display: none;
        height: 14px;
    }

    .e-schedule .e-editapp:before {
        font-size: 16px;
    }

    .e-schedule .e-deleteapp:before {
        font-size: 16px;
    }

    .e-schedule .e-editapp,
    .e-schedule .e-deleteapp {
        padding-right: 10px;
        display: inline-block;
    }

    .e-schedule.e-rtl .e-textwrapper {
        padding: 5px;

        & when (@skin= "material") {
            margin-right: 19px;
        }

        & when (@skin= "office-365") {
            margin-right: 15px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-right: 5px;
        }
    }

    .e-schedule.e-rtl .e-scheduleallday,
    .e-schedule.e-rtl .e-agendaday {
        margin: 0 0 0 5px;
        float: right;
    }

    .e-schedule.e-rtl .e-schedulerepeat,
    .e-schedule.e-rtl .e-schedulerepeatedit,
    .e-schedule.e-rtl .e-agendacolordiv {
        margin: 0 -2px 0 5px;
    }

    .e-schedule.e-rtl .e-firstcolumn {
        border-right: none !important;
    }

    .e-schedule.e-rtl .e-agendahover {
        left: 0px;
        right: inherit;
    }

    .e-schedule.e-rtl .e-editapp,
    .e-schedule.e-rtl .e-deleteapp {
        padding: 0 10px 0 0;
    }

    .e-schedule .e-horizontalheadertddate {
        & when (@skin= "material") {
            vertical-align: middle !important;
            height: 46px;
            width: 80px;
        }

        & when (@skin= "office-365") {
            vertical-align: middle !important;
            height: 35px;
            width: 80px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            vertical-align: middle !important;
            height: 30px;
            width: 70px;
        }
    }

    .e-schedule .e-horizontalheaderdiv {
        text-align: center;
        overflow: hidden;

        & when (@skin= "material") {
            height: 30px;
            line-height: 30px;
        }

        & when (@skin= "office-365") {
            height: 30px;
            line-height: 30px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 20px;
        }
    }

    .e-schedule .e-horizontaltimetd {
        vertical-align: middle !important;
        overflow: hidden;
        text-align: center !important;
        position: static !important;

        & when (@skin= "material") {
            height: 47px;
        }

        & when (@skin= "office-365") {
            height: 35px;
            width: 40px !important;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 25px;
        }
    }

    .e-schedule .e-horizontaltimespan {
        float: left;
        width: 25px;
    }

    .e-schedule .e-horizontaltimespandiv {
        font-size: 9px;
        vertical-align: top;
        position: absolute;

        & when (@skin= "material") {
            margin-left: 26px;
            margin-top: -4px;
        }

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

    .e-schedule .e-horizontalalternatetd {
        position: static !important;

        & when (@skin= "material") {
            height: 47px;
        }

        & when (@skin= "office-365") {
            height: 35px;
            width: 40px !important;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 25px;
        }
    }

    .e-schedule .e-horizontmonthheaderdatetd {
        & when (@skin= "material") {
            height: 47px;
            vertical-align: middle !important;
        }

        & when (@skin= "office-365") {
            height: 35px;
            width: 40px !important;
            vertical-align: middle !important;
        }
    }

    .e-schedule .e-horizontmonthheaderdaytd {
        & when (@skin= "material") {
            height: 47px;
            vertical-align: middle !important;
        }

        & when (@skin= "office-365") {
            height: 35px;
            width: 40px !important;
            vertical-align: middle !important;
        }

        cursor: default;
    }

    .e-schedule .e-horizontresdiv {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .e-schedule .e-horires {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .e-schedule .e-alternateworkcell {
        width: 25px;
    }

    .e-schedule .e-headerdays table tr:first-child td:first-child,
    .e-schedule .e-headerdays table tr:last-child td:first-child {
        border-left: none !important;
    }

    .e-scheduledialog .e-table,
    .e-schedule .e-table {
        border: 0 none;
        border-collapse: separate;
        margin: 0;
    }

    .e-schedule .e-table {
        border-spacing: 0px !important;
    }

     .e-categorizeMenuSelected {
        height: 18px;
        width: 18px;
    }

    .e-schedule .e-multipleCategory {
        position: absolute;
        bottom: 2px;
        right: 3px;
    }

    .e-schedule .e-table td {
        padding: 0;
    }

    .e-schedule .e-nextapp,
    .e-schedule .e-prevapp {
        cursor: pointer;
        position: absolute;
        border-radius: 7px 7px 0 0;
        text-align: center;
        width: 150px;
        height: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        & when (@skin= "material") {
            text-transform: uppercase;
            font-size: 12px;
            line-height: 2.5;
        }
    }

    .e-schedule .e-scheduleheader {
        & when (@skin= "material") {
            height: 56px;
        }

        & when (@skin= "office-365") {
            height: 59px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 51px;
        }
    }

    .e-schedule .e-contentarearow {
        height: 100%;
    }

    .e-schedule .e-horizontmonthdatealign {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .e-schedule .e-dateheadercell {
        & when not (@skin= "material") and not (@skin="office-365") {
            height: 19px;
            margin: 5px;
        }

        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .e-schedule .e-dateheaderselect {
        cursor: pointer !important;
    }

    .e-schedule .e-headercells {
        & when (@skin= "material") {
            height: 47px;
        }

        & when (@skin= "office-365") {
            height: 35px;
        }

        cursor: default;
    }


    .e-schedule .e-headercells:not(.e-horizontalheadertddate),
    .e-schedule .e-resourcecells,
    .e-schedule .e-monthleftcells,
    .e-schedule .e-settingsindent,
    .e-schedule .e-resourceleftindentcells {
        & when (@skin= "material") {
            font-size: 12px;
            font-weight: 500;
            opacity: 0.56;
        }
    }

    .e-schedule .e-horizontaldaterender,
    .e-schedule .e-horizontalheader {
        & when (@skin= "material") {
            font-size: 12px;
            font-weight: 500;
        }
    }

    .e-schedule .e-datecommondiv {
        border: none;
        cursor: pointer;
        float: left;
        position: absolute;

        & when (@skin= "material") {
            padding: 14px 20px;
            display: flex;
        }

        & when (@skin= "office-365") {
            padding: 1em;
            height: 30px;
        }

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

    .e-schedule .e-viewsdiv {
        float: right;
        height: 100%;

        & when (@skin= "office-365") {
            padding: 1em;
        }

        & when not (@skin= "office-365") {
            margin-right: 37px;
        }
    }

    .e-schedule .e-viewstable {
        table-layout: fixed;
        margin-top: @schedule-viewstable-margin-top;
    }

    .e-schedule .e-viewstable tr, .e-schedule .e-viewstable td {
        border: none;
    }

    .e-schedule .e-datedisplay {
        border: none;
        cursor: pointer;
        text-align: center;
        outline: medium none;
        width: auto;
        display: inline-block;
        line-height: 1.42857;

        & when (@skin= "material") {
            font-family: @font-family;
            font-size: 15px;
            font-weight: normal;
        }

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

    .e-schedule.e-rtl .e-datedisplay {
        margin-left: 8px;
    }

    .e-schedule.e-scheduleresponsive .e-datedisplay {
        & when (@skin= "material") {
            font-size: 15px;
        }

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

    .e-schedule.e-rtl .e-datecommondiv.e-datecursor,
    .e-schedule.e-rtl .e-datecommondiv.e-datecursor .e-datedisplay,
    .e-schedule .e-datecommondiv.e-datecursor,
    .e-schedule .e-datecommondiv.e-datecursor .e-datedisplay {
        cursor: default;
    }

    .e-schedule .e-commonviewbutton {
        cursor: pointer;
        height: 20px;
        padding: @schedule-commonviewbutton;
        text-align: center;
        border-right: none;
        outline: none;
        box-shadow: @schedule-commonviewbutton-box-shadow;

        & when (@skin= "material") {
            margin-top: 13px;
            text-transform: uppercase;
            opacity: 0.7;
            font-size: 13px;
            font-weight: normal;
        }

        & when (@skin= "office-365") {
            font-size: 14px;
            line-height: 18px;
            font-family: @font-family;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            margin-top: 15px;
        }
    }

    .e-schedule .e-icon.e-topind:before {
        font-size: 12px;
    }

    .e-schedule .e-icon.e-bottomind:before {
        font-size: 12px;
    }

    .e-schedule .e-icon.e-bottomind {
        position: absolute;
        width: 100%;
        background-size: 19px;
        bottom: 0;
        left: 1px;
    }

    .e-schedule .e-icon.e-leftind:before {
        font-size: 12px;
    }

    .e-schedule .e-icon.e-leftind {
        position: absolute;
        background-size: 20px;
        top: 3px;

        & when (@skin= "office-365") {
            top: 8px;
        }
    }

    .e-schedule.e-rtl .e-icon.e-leftind {
        left: 3px;
        top: 3px;
    }

    .e-schedule .e-icon.e-rightind:before {
        font-size: 12px;
    }

    .e-schedule .e-icon.e-rightind {
        position: absolute;
        right: 0px;
        background-size: 19px;
        top: 3px;

        & when (@skin= "office-365") {
            top: 8px;
        }
    }

    .e-schedule .e-singleview {
        & when not (@skin= "material") {
            border-radius: 6px;
        }
    }

    .e-schedule.e-rtl .e-lastview,
    .e-schedule .e-firstview {
        & when not (@skin= "material") and not (@skin="office-365") {
            border-radius: 6px 0 0 6px;
        }
    }

    .e-schedule.e-rtl .e-firstview,
    .e-schedule .e-lastview {
        & when not (@skin= "material") and not (@skin="office-365") {
            border-radius: 0 6px 6px 0;
        }
    }

    .e-schedule.e-rtl .e-lastview {
        & when not (@skin= "material") and not (@skin="office-365") {
            border-right: none;
        }
    }

    .e-schedule .e-schedulesettings {
        text-align: center;

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

    .e-schedule .e-emptytrdesign {
        height: 3px;
        width: 100%;
    }

    .e-schedule .e-headrealldaytable {
        table-layout: fixed;
        height: 100%;
        position: relative;
        float: left;
    }

    .e-schedule .e-empty,
    .e-schedule .e-leftindenttable,
    .e-schedule .e-workleftindent {

        & when (@skin= "material") {
            width: 140px;
        }

        & when not (@skin= "material") {
            width: 56px;
        }
    }

    .e-schedule .e-leftindent {
        vertical-align: middle !important;
    }

    .e-schedule .e-fixedlayout,
    .e-schedule .e-leftindenttable {
        table-layout: fixed;
    }

    .e-schedule .e-workleftindent,
    .e-schedule .e-timecelltable tr:last-child td,
    .e-schedule .e-workcellstab tr:last-child td {
        border-bottom: none;
    }

    .e-schedule .e-lastcell {
        border-bottom: none !important;
    }

    .e-schedule .e-worktable {
        height: 100%;
        width: 100%;
        table-layout: fixed;
    }

    .e-schedule .e-workcells {
        border-top: none;
        cursor: default;
    }

    .e-schedule.e-scheduleouter,
    .e-scheduledialog {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        overflow: hidden;
    }

    .e-schedule .e-monthcells,
    .e-schedule .e-alldaycells {
        cursor: default;
    }

    .e-schedule .e-timecells {
        text-align: center;
        position: relative;
        cursor: default;

        & when (@skin= "material") {
            width: 70px;
            font-size: 15px;
            text-transform: uppercase;
            opacity: 0.87;
        }

        & when (@skin= "office-365") {
            vertical-align: middle !important;
            width: 30px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            width: 30px;
        }
    }

    .e-schedule .e-monthleftindent .e-timecells {
        & when (@skin= "material") {
            width: 140px;
            vertical-align: middle;
            text-transform: none;
            font-size: 13px;
        }

        & when (@skin= "office-365") {
            width: 140px;
            vertical-align: middle;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            width: 51px;
        }
    }

    .e-schedule .e-timecells:not(.e-dateheaderselect) .e-timecelldivs {
        & when (@skin= "material") {
            padding-top: 20px;
        }
    }

    .e-schedule .e-timedivcells {
        width: 51px;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .e-schedule .e-headerareadiv {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .e-schedule .e-resourcecells,
    .e-schedule .e-monthnamecells  {
        & when (@skin= "material") {
            height: 47px;
        }

        & when (@skin= "office-365") {
            height: 35px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 27px;
        }

        overflow: hidden;
        text-overflow: ellipsis;
    }

    .e-schedule .e-scrolltimecells {
        position: absolute;
    }

    .e-schedule .e-celldefaultheight .e-workcells,
    .e-schedule .e-celldefaultheight .e-ampmdisplay {
        & when (@skin= "material") {
            height: 48px;
        }

        & when (@skin= "office-365") {
            height: 30px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 20px;
        }
    }

    .e-schedule .e-horizontal .e-celldefaultheight .e-workcells {
        height: 20px;

        & when (@skin= "office-365") {
            width: 40px !important;
        }
    }

    .e-schedule .e-headercellsheight,
    .e-schedule .e-alldaycellsheight,
    .e-schedule .e-monthnameleftindentcell.e-headercellsheight {
        & when (@skin= "material") {
            height: 47px !important;
        }

        & when (@skin= "office-365") {
            height: 35px !important;
        }
    }

    .e-schedule .e-headercellsheight,
    .e-schedule .e-alldaycellsheight {
        & when not (@skin= "material") and not (@skin="office-365") {
            height: 27px !important;
        }
    }

    .e-schedule .e-monthnameleftindentcell.e-headercellsheight {
        & when not (@skin= "material") and not (@skin="office-365") {
            height: 29px !important;
        }
    }

    .e-schedule .e-ampmstyle {
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;

        & when (@skin= "material") {
            width: 70px;
            line-height: 3;
            font-size: 13px;
            text-transform: uppercase;
            opacity: 0.87;
        }

        & when (@skin= "office-365") {
            font-size: 12px;
            width: 26px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: 10px;
            width: 26px;
        }
    }

    .e-schedule .e-ampmstyle,
    .e-schedule .e-commonviewbutton,
    .e-schedule .e-alldaycells {
        box-sizing: content-box;
    }

    .e-schedule .e-appointwrapper {
        position: relative;
    }

    .e-schedule .e-inlinewrapper {
        position: relative;
        z-index: 9;
    }

    .e-schedule .e-monthcurrenttime {
        font-weight: 600;
    }

    .e-schedule .e-highlightcurrenttimeline {
        height: 1px;
        position: absolute;
        z-index: 1;
    }

    .e-schedule .e-currenttime {
        height: 13px;
        width: 28px;
        margin-left: 25%;
        font-size: 9px;
        text-align: center;
    }

    .e-schedule .e-timewidth {
        width: 42px !important;
    }

    .e-schedule .e-appsoverflow {
        height: 15px;
        width: 15px;
        position: absolute;
        cursor: pointer;
    }

    .e-schedule .e-workareadiv {
        position: relative;
        height: 100%;
        overflow: hidden;
    }

    .e-schedule .e-workcellstab {
        width: 100%;
        table-layout: fixed;
    }

    .e-schedule .e-timecelltable {
        width: 100%;
    }

    .e-schedule .e-monthheader {
        padding-left: 5px;
        height: 20px;
        cursor: pointer;

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

        & when (@skin= "office-365") {
            font-size: 13px;
        }
    }

    .e-schedule .e-monthdateshighlight {
        & when (@skin= "material") {
            opacity: 0.38;
        }
    }

    .e-schedule .e-monthempty,
    .e-schedule .e-monthempty .e-leftindenttable,
    .e-schedule .e-monthleftindent {
        & when (@skin= "material") {
            width: 140px;
        }

        & when (@skin= "office-365") {
            width: 140px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            width: 50px;
        }
    }

    .e-schedule .e-monthappointment, .e-schedule .e-alldayappointment {
        box-sizing: border-box !important;
    }

    .e-schedule .e-monthappointment,
    .e-schedule .e-alldayappointment,
    .e-schedule .e-appointment,
    .e-schedule .e-inline {
        overflow: hidden;
        position: absolute;
        text-align: left;
        font-size: 12px;
        border-radius: @border-radius;
    }

    .e-schedule .e-inlineedit:focus,
    .e-schedule .e-inlinetext:focus {
        outline: none;
    }

    .e-schedule .e-alldayappointment {

        & when (@skin= "material") {
            margin: 2px 0px;
            height: 22px;
        }

        & when (@skin= "office-365") {
            height: 30px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 19px;
        }
    }

    .e-schedule .e-monthappointment {

        & when (@skin= "material") {
            margin-top: 3px;
            height: 22px;
        }

        & when (@skin= "office-365") {
            height: 30px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 19px;
        }
    }

    .e-schedule .e-horizontal .e-appointment {

        & when (@skin= "material") {
            margin-top: 3px;
            height: 22px;
        }

        & when (@skin= "office-365") {
            height: 30px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            height: 20px;
        }
    }

    .e-schedule .e-scheduleheader > td {
        border-radius: @border-top-radius;
    }

    .e-schedule .e-contentarearow > td {
        border-radius: @border-bottom-radius;
    }

    .e-schedule .e-apptext {
        & when (@skin= "material") {
            font-size: 13px;
            line-height: 20px;
        }

        & when (@skin= "office-365") {
            font-size: 13px;
            padding-top: 5px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            font-size: 11px;
        }

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .e-schedule .e-vertical .e-appointment .e-apptext {
        & when (@skin= "material") {
            padding: 8px 0px 8px 0px;
        }

        & when (@skin= "office-365") {
            padding: 5px 0px 0px 0px;
        }
    }

    .e-schedule .e-apptime {
        & when (@skin= "material") {
            font-size: 11px;
            line-height: 20px;
        }

        & when (@skin= "office-365") {
            font-size: 10px;
            padding-top: 2px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: 10px;
        }

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .e-schedule .e-tophandle {
        height: 2px;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .e-schedule .e-rowcursor {
        cursor: ns-resize;
    }

    .e-schedule .e-columncursor {
        cursor: e-resize;
    }

    .e-schedule .e-bottomhandle {
        height: 3px;
        position: absolute;
        width: 100%;
        bottom: 0;
    }

    .e-schedule .e-lefthandle {
        height: 100%;
        width: 10px;
        position: absolute;
        float: left;
        left: 0;
    }

    .e-schedule .e-righthandle {
        height: 100%;
        width: 10px;
        position: absolute;
        float: right;
        right: 0;
    }

    .e-schedule.e-rtl .e-horizontaltimespan {
        float: right;
        width: 25px;
        margin-right: 8px;
    }

    .e-schedule.e-rtl .e-navigateprevious,
    .e-schedule .e-navigateprevious {

        & when (@skin= "material") {
            padding-right: 10px;
        }

        & when (@skin= "office-365") {
            padding-right: 8px;
        }

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

    .e-schedule.e-rtl .e-navigatenext,
    .e-schedule .e-navigatenext {

        & when (@skin= "material") {
            padding-left: 16px;
        }

        & when (@skin= "office-365") {
            padding-left: 10px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            padding-left: 15px;
        }
    }

    .e-schedule.e-scheduleresponsive .e-navigatenext {
        & when not (@skin= "material") {
            margin-left: 5px;
        }
    }

    .e-schedule .e-lefttimeindicator {
        margin-left: -4px;
        margin-top: -19px;
        position: absolute;
    }

    .e-schedule .e-righttimeindicator {
        margin-top: -19px;
        position: absolute;
    }

    .e-schedule.e-rtl .e-datecommondiv {
        float: right;
    }

    .e-schedule.e-rtl .e-viewsdiv {
        float: left;
        margin-left: 37px;
    }

    .e-schedule.e-rtl .e-headrealldaytable {
        float: right;
        border-right: medium none !important;
    }

    .e-schedule.e-rtl .e-currenttime {
        margin-right: 25%;
    }

    .e-schedule.e-rtl .e-lefttimeindicator {
        margin-right: -7px;
    }

    .e-schedule.e-rtl .e-righttimeindicator {
        margin-right: -6px;
        right: 100%;
    }

    .e-schedule .e-appointinnertext {
        overflow: hidden;
        text-align: left;
        vertical-align: top;
        height: 100%;

        & when (@skin= "material") {
            padding: 1px 16px 1px 6px;
        }

        & when (@skin= "office-365") {
            padding: 1px 12px 1px 12px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 1px 16px 1px 4px;
        }
    }

    .e-schedule .e-vertical .e-appointment .e-appointinnertext {
        & when (@skin= "material") {
            padding: 1px 16px 1px 12px;
        }
    }

    .e-schedule.e-rtl .e-appointinnertext {
        text-align: right;
        padding: 1px 4px 1px 16px;
    }

    .e-schedule .e-navigatenext,
    .e-schedule .e-navigateprevious {
        outline: medium none;
        display: inline-block;
        cursor: pointer;

        & when (@skin= "material") {
            font-size: 15px;
            width: 24px;
            height: 24px;
            line-height: 1.42857;
        }

        & when (@skin= "office-365") {
            font-size: 20px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: 16px;
        }
    }

    .e-schedule .e-textellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: default;
    }

    .e-schedule .e-draggableworkarea {
        position: relative;
    }

    .e-schedule .e-headerscrolldiv {
        overflow: hidden;
    }

    .e-schedule .e-blocktimewrapper {
        position: relative;
    }

    .e-schedule .e-blocktimeappointment {
        overflow: hidden;
        position: absolute;
        text-align: left;
        font-size: 12px;
        width: 100%;
    }

    .e-schedule .e-monthappointment,
    .e-schedule .e-alldayappointment,
    .e-schedule .e-appointment {
        z-index: 1;
    }

    .e-schedule .e-blockenable {
        z-index: 2;
    }

    .e-schedule .e-mobileNavigation {
        position: absolute;
        float: right;
        padding: 12px 10px 0px 0px;
    }

    .e-schedule .e-mobileNavigation:before {
        content: "\e75d";
        font-size: 20px;
    }

    .e-scheduledrawer .e-mAddEvent:before {
        content: "\e759";
        font-size: 36px;
        width: 36px;
        height: 36px;
        margin: 10px auto;
    }

    .e-scheduledrawer .e-mday:before {
        content: "\e75b";
        font-size: 36px;
        width: 36px;
        height: 36px;
        margin: 10px auto;
    }

    .e-scheduledrawer .e-mcustomview:before {
        content: "\e77c";
        font-size: 36px;
        width: 36px;
        height: 36px;
        margin: 10px auto;
    }

    .e-scheduledrawer .e-mweek:before {
        content: "\e760";
        font-size: 36px;
        width: 36px;
        height: 36px;
        margin: 10px auto;
    }

    .e-scheduledrawer .e-mworkweek:before {
        content: "\e762";
        font-size: 36px;
        width: 36px;
        height: 36px;
        margin: 10px auto;
    }

    .e-scheduledrawer .e-mmonth:before {
        content: "\e75e";
        font-size: 36px;
        width: 36px;
        height: 36px;
        margin: 10px auto;
    }

    .e-scheduledrawer .e-magenda:before {
        content: "\e781";
        font-size: 36px;
        width: 36px;
        height: 36px;
        margin: 10px auto;
    }

    .e-schedule .e-mobileNavigation,
    .e-scheduledrawer .e-mAddEvent,
    .e-scheduledrawer .e-mday,
    .e-scheduledrawer .e-mweek,
    .e-scheduledrawer .e-mworkweek,
    .e-scheduledrawer .e-mmonth,
    .e-scheduledrawer .e-mcustomview,
    .e-scheduledrawer .e-magenda {
        cursor: pointer;
    }

    .e-scheduledrawer .e-mAddEvent,
    .e-scheduledrawer .e-mday,
    .e-scheduledrawer .e-mweek,
    .e-scheduledrawer .e-mworkweek,
    .e-scheduledrawer .e-mmonth,
    .e-scheduledrawer .e-mcustomview,
    .e-scheduledrawer .e-magenda {
        height: 100% !important;
        width: 100% !important;
        margin-bottom: -3px;
        float: none !important;

        & when (@skin= "office-365") {
            padding: 0px !important;
        }
    }

    .e-scheduledrawer .e-list-hdr > li > a > span {
        top: 0px !important;
        font-size: 12px !important;
        left: 0px !important;
        display: block;
        text-align: center;
        font-family: @font-family;
        padding-bottom: 5px;
        line-height: normal;
        padding-left: 0px !important;
    }

    .navDrawerMenu li > a {
        padding: 0px !important;
        height: auto !important;
    }

    .navDrawerMenu li {
        padding: 0px !important;
        height: auto !important;
    }

    .e-schedule,
    .e-schedule [class^="e-"]:not(.e-box),
    .e-schedule [class*=" e-"]:not(.e-box) {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    .e-scheduledialog table td {
        & when (@skin= "material") {
            padding: 10px 5px;
        }

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

    .e-scheduledialog.e-appointmentaddwindow {
        & when (@skin= "material") {
            padding: 20px 24px 14px 14px !important;
        }
    }

    .e-scheduledialog .e-appwindow table td {
        & when (@skin= "material") {
            padding: 10px !important;
        }
    }

    .e-scheduledialog .e-recurEditor table td {
        & when (@skin= "material") {
            padding: 10px !important;
        }
    }


    .e-scheduledialog .e-appwindow,
    .e-scheduledialog .e-recurwindow {
        & when (@skin= "office-365") {
            width: 540px;
        }

        & when not (@skin= "office-365") {
            width: 550px;
        }
    }

    .e-scheduledialog .e-inputtext {
        height: 26px;
        text-indent: 5px;
        width: 100%;
        padding: 1px;
        margin: 0;
        max-width: 100%;
        height: @schedule-input-height;
        border-radius: @border-radius;
    }

    .e-scheduledialog .e-ripple-bar {
        width: auto;
    }

    .e-scheduledialog label {
        display: inline-block;

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

        & when (@skin= "office-365") {
            font-family: @font-family;
            font-weight: normal;
            font-size: 13px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: inherit;
            font-weight: bold;
        }
    }

    .e-scheduledialog .e-floatleft {
        float: left;
    }

    .e-scheduledialog .e-leftfields {
        width: 15%;
    }

    .e-scheduledialog .e-rightfields {
        width: 95%;
    }

    .e-scheduledialog .e-windowmargin {
        & when (@skin= "material") {
            margin-left: 10px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin: 10px;
        }
    }

    .e-scheduledialog .e-btnmargin {
        & when (@skin= "office-365") {
            margin-top: 20px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin: 10px -3px 10px 13px;
        }
    }


    .e-scheduledialog button {
        & when (@skin= "material") {
            text-transform: uppercase;
        }
    }

    .e-scheduledialog .e-btnmargin button {
        & when (@skin= "material") {
            width: 100% !important;
            text-transform: uppercase;
        }
    }


    .e-scheduledialog .e-textlabel {
        text-align: left;
        cursor: default;

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

        & when (@skin= "office-365") {
            font-family: @font-family;
            font-weight: normal;
            font-size: 13px;
        }

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

    .e-scheduledialog .e-appchecktable label {
        & when (@skin= "material") {
            height: 25px;
        }
    }

    .e-scheduledialog #endsonafter .e-labelcursor {
        & when (@skin= "office-365") {
            margin: 0px !important;
            position: absolute;
            left: 300px;
            line-height: 0px;
        }
    }

    .e-scheduledialog.e-rtl #endsonafter .e-labelcursor {
        & when (@skin= "office-365") {
            margin: 0px !important;
            position: absolute;
            right: 300px;
            line-height: 0px;
        }
    }

    .e-scheduledialog .e-checkboxmargin {
        & when not (@skin= "material") {
            margin-bottom: 10px;
        }

        margin-left: -3px;
    }

    .e-scheduledialog .e-textmargin {
        margin: 4px;
    }

    .e-scheduledialog .e-alldaytext {
        padding-right: 21px;
        white-space: nowrap;

        & when (@skin= "office-365") {
            font-size: 14px;
        }
    }

    .e-scheduledialog.e-rtl .e-chkbox-wrap .e-chk-image {
        margin-right: 0px;
    }

    .e-scheduledialog .e-appcheckbox {
        float: left;

        & when (@skin= "office-365") {
            font-family: @font-family;
            font-weight: normal;
            font-size: 13px;
        }
    }

    .e-scheduledialog .e-apptextalign {
        float: left;
        padding-right: 15px;
    }

    .e-scheduledialog .e-controlalign {
        float: left;
        margin-right: 5px;
    }

    .e-scheduledialog.e-rtl .e-description {
        padding-right: 5px;
    }

    .e-scheduledialog .e-description {
        width: 99%;
        height: 70px;
        resize: vertical;
        text-indent: 0px;
        padding-left: 5px;
    }

    .e-scheduledialog .e-description:focus {
        & when (@skin= "material") {
            border-width: 0 !important;
        }
    }

    .e-scheduledialog .e-recurendslabel {
        text-align: left;
        vertical-align: top;

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

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

    .e-scheduledialog .e-recurendsalign {
        margin-top: 8px;
    }

    .e-scheduledialog .e-floatright {
        float: right;
    }

    .e-scheduledialog.e-rtl .e-floatright {
        float: left;
    }

    .e-scheduledialog .e-recurFinalRule,
    .e-scheduledialog .e-recurRule {
        padding-right: 10px;
        font-weight: normal;
    }

    .e-scheduledialog .e-recureditmsg {
        & when (@skin= "material") {
            padding: 0 0 10px 0;
        }

        & when (@skin= "office-365") {
            padding: 0 0 20px 0;
            font-size: 13px;
            font-family: @font-family;
            font-weight: normal;
        }

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

        cursor: default;
    }

    .e-scheduledialog .e-recureditopt {
        padding: 5px 0;
    }

    .e-scheduledialog .e-recureditlbl {
        padding: 0px 5px;
        position: relative;
        top: -3px;
    }

    .e-scheduledialog .e-recureditbtns {
        & when (@skin= "office-365") {
            bottom: -1em;
            clear: both;
            padding: 0;
            text-align: right;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            bottom: -1em;
            clear: both;
            padding: 0 7px 12px;
            text-align: right;
        }
    }

    .e-scheduledialog.e-rtl .e-recureditbtns {
        & when (@skin= "office-365") {
            bottom: -1em;
            clear: both;
            padding: 0;
            text-align: left;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            bottom: -1em;
            clear: both;
            padding: 0 7px 35px;
            text-align: left;
        }
    }

    .e-scheduledialog.e-rtl .e-recureditbtns .e-editonly,
    .e-scheduledialog.e-rtl .e-recureditbtns .e-editfutureonly {
        & when (@skin= "office-365") {
            float: none;
            margin-left: 8px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            float: right;
            margin-left: 10px;
        }
    }

    .e-scheduledialog .e-recureditbtns .e-editonly {
        & when (@skin= "material") {
            padding: 0 13px;
        }

        & when (@skin= "office-365") {
            width: auto;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-right: 10px;
        }
    }

    .e-scheduledialog .e-recureditbtns .e-editfutureonly {
        float: none;
        margin-left: 0px;

        & when (@skin= "material") {
            padding: 0 13px;
        }

        & when (@skin= "office-365") {
            width: auto;
        }
    }

    .e-scheduledialog .e-recureditbtns .e-editseries {
        & when (@skin= "material") {
            padding: 0 11px;
            margin-left: 0px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-right: 10px;
        }

        width: auto;
    }

    .e-scheduledialog .tdpadding {
        padding-left: 0px;
    }

    .e-scheduledialog .e-alerttext {
        & when (@skin= "material") {
            text-align: left;
        }

        & when (@skin= "office-365") {
            text-align: justify;
            padding: 0 0 20px 0;
            font-family: @font-family;
            font-weight: normal;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            text-align: center;
            padding: 10px;
        }
    }

    .e-scheduledialog .e-alertbtn {
        margin: 0 auto;

        & when (@skin= "material") {
            padding-top: 16px;
            text-align: right;
        }

        & when (@skin= "office-365") {
            text-align: right;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            text-align: center;
        }
    }

    .e-scheduledialog.e-rtl .e-alertbtn {
        margin: 0 auto;

        & when (@skin= "material") {
            padding-top: 16px;
            text-align: left;
        }

        & when (@skin= "office-365") {
            text-align: left;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            text-align: center;
        }
    }

    .e-scheduledialog .e-recuredit {
        display: none;

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

    .e-scheduledialog .e-quickAppDone {
        & when not (@skin= "material") {
            margin-top: 2px;
            margin-right: 10px;
        }
    }

    .e-scheduledialog .e-qAppDone {
        & when (@skin= "material") {
            width: 140px;
            padding: 0px !important;
        }

        & when (@skin= "office-365") {
            width: 140px;
            padding: 0 14px 0 !important;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            width: 130px;
        }
    }

    .e-scheduledialog .e-detailedapp {
        cursor: pointer;
        float: left;
        width: 50%;
        font-size: 12px;

        & when (@skin= "material") {
            height: 56px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        & when (@skin= "office-365") {
            width: auto;
        }

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

    .e-scheduledialog.e-rtl .e-detailedapp {
        float: right;
    }

    .e-scheduledialog .e-detailedwindow {
        & when (@skin= "office-365") {
            font-family: @font-family;
            font-size: 13px;
            font-weight: normal;
        }

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

        outline: medium none;
    }

    .e-scheduledialog .icon-Pasteicon:before {
        float: left;
        margin-left: 10px;
        margin-top: 9px;
        vertical-align: middle;
    }

    .e-scheduledialog .icon-Close:before {
        float: right;
        cursor: pointer;
        font-size: 10px;
    }

    .e-schedulequickdialog > div {
        overflow: visible;
    }

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

    .e-scheduledialog .e-quickarrow {
        bottom: -1px;
        height: 10px;
        left: 40%;
        overflow: hidden;
        position: absolute;
        visibility: visible;
        width: 20px;
    }

    .e-scheduledialog .icon-Delete:before {
        font-size: 15px;
        margin-left: 5px;
        margin-top: 2px;
        position: absolute;
        cursor: pointer;
    }

    .e-schedule .icon-AddGrad:before {
        margin-top: 5px;
        float: right;
    }

    .e-scheduledialog .e-textellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        & when (@skin= "office-365") {
            font-family: @font-family;
            font-size: 13px;
            font-weight: normal;
        }
    }

    .e-scheduledialog .e-editevents {
        font-size: 12px;
    }

    .e-scheduledialog .e-editevent {
        float: left;
        width: 100px;
        cursor: pointer;
        outline: medium none;
    }

    .e-scheduledialog .e-editfutureonly {
        float: left;
        cursor: pointer;
        outline: medium none;

        & when (@skin= "material") {
            width: 90px;
            margin-left: 5px;
        }

        & when (@skin= "office-365") {
            width: 100px;
            margin-left: 8px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            width: auto;
            margin-left: 12px;
        }
    }

    .e-scheduledialog .e-editseries {
        cursor: pointer;
        float: right;
        outline: medium none;
        width: 88px;
        text-align: left;

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

        & when (@skin= "office-365") {
            margin-left: 8px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-left: 12px;
        }
    }

    .e-scheduledialog.e-rtl .e-editevent {
        float: right;
        margin-right: 2px;
        text-align: right;
    }

    .e-scheduledialog.e-rtl .e-editfutureonly {
        float: right;
    }

    .e-scheduledialog.e-rtl .e-editseries {
        float: left;
        text-align: right;

        & when (@skin= "office-365") {
            margin: 0;
        }
    }

    .e-scheduledialog .e-disableseries {
        cursor: default !important;
    }

    .e-scheduledialog .e-quickstartend {
        float: left;
        height: auto;
        width: 91%;

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

        & when (@skin= "office-365") {
            font-size: 14px;
            font-weight: normal;
            font-family: @font-family;
            padding-bottom: 10px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: 14px;
        }
    }

    .e-scheduledialog.e-rtl .e-quickstartend,
    .e-scheduledialog.e-rtl .e-quicksubject {
        float: right;
    }

    .e-scheduledialog .e-quicksubject {
        height: auto;
        width: 220px;
        float: left;

        & when (@skin= "material") {
            font-weight: 600;
            width: 200px;
        }

        & when (@skin= "office-365") {
            font-family: @font-family;
            font-size: 17px;
            font-weight: normal;
        }

        & when not (@skin= "material") {
            padding-bottom: 4px;
        }
    }

    .e-scheduledialog .e-quickduein {
        & when (@skin= "material") {
            padding-bottom: 0px;
            font-size: 14px;
        }

        & when (@skin= "office-365") {
            font-family: @font-family;
            font-size: 14px;
            font-weight: normal;
        }
    }

    .e-scheduledialog .e-schedclosemargin {
        & when (@skin= "material") {
            float: right;
            margin: -10px -16px 0 0;
        }

        & when (@skin= "office-365") {
            float: right;
            margin: 4px -5px 0 0;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            float: right;
            margin: 4px -10px 0 0;
        }
    }

    .e-scheduledialog.e-rtl .e-schedclosemargin {
        & when (@skin= "material") {
            float: left;
            margin: -10px 0 0 -16px;
        }

        & when not (@skin= "material") {
            float: left;
            margin: 4px 0 0 -10px;
        }
    }

    .e-scheduledialog .e-pointercursor,
    .e-schedule .e-resourceicon {
        cursor: pointer;
        outline: medium none;
    }

    .e-scheduledialog .e-quickstartendtime {
        font-size: 12px;

        & when (@skin= "material") {
            padding-bottom: 23px;
        }

        & when (@skin= "office-365") {
            font-family: @font-family;
            font-size: 13px;
            font-weight: normal;
        }

        & when not (@skin= "material") {
            padding-bottom: 7px;
        }
    }

    .e-scheduledialog .e-dialogouter {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
        display: block;
        height: auto;
        margin-bottom: -9px !important;
        overflow: hidden;
        position: relative;
        z-index: 1001;

        & when (@skin= "material") {
            padding: 14px 24px 0px 24px !important;
        }

        & when not (@skin= "material") {
            padding: 7px 14px !important;
        }
    }

    .e-scheduledialog .e-tableAppoint {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
        position: relative;
        top: -3px;

        & when not (@skin= "material") {
            padding-top: 0px;
            padding-bottom: 12px;
        }
    }

    .e-scheduledialog .e-tablePosition {
        padding-bottom: 0px;
        top: 0px;

        & when (@skin= "material") {
            padding-top: 14px;
        }

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

    .e-scheduledialog .e-quickwinarrowbottom {
        top: 4px;
    }

    .e-scheduledialog .e-quickcreatebottomcontainer {
        & when (@skin= "material") {
            margin-top: 25px;
            padding-bottom: 64px;
            line-height: 56px;
        }

        & when (@skin= "office-365") {
            margin-top: 14px;
            padding: 12px 0 40px 0;
            border-top: 1px solid #eaeaea;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-top: 5px;
            padding-bottom: 30px;
        }
    }

    .e-scheduledialog .e-quickbottomcontainer {
        & when (@skin= "material") {
            line-height: 22px;
            padding-bottom: 22px;
        }

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

    .e-scheduledialog .e-quickwinarrowtop {
        top: -10px;
    }

    .e-scheduledialog.e-rtl .e-appdetails {
        padding-bottom: 27px;
    }

    .e-scheduledialog .e-qappwindow {
        width: 100%;
        cursor: default;
    }

    .e-scheduledialog .e-subjectlabel {
        width: 17%;

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

        & when (@skin= "office-365") {
            font-family: @font-family;
            font-size: 13px;
            font-weight: normal;
        }

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

    .e-schedule .e-priority {
        position: absolute;
        top: 0px;
        left: auto;
        right: 3px;
    }

    .e-schedule .e-alldayappointment .e-priority,
    .e-schedule .e-monthappointment .e-priority {
        top: -2px;
    }

    .e-schedule.e-rtl .e-priority {
        right: auto;
        left: 3px;
    }

     .e-priorwidth {
        width: 80%;
    }

     .e-none {
        height: 20px;
        width: 20px;
        float: left;
    }

     .e-high,
     .e-medium,
     .e-low {
        background: url('@{font-path}/schedule/schedule_priority.png');
        height: 12px;
        width: 20px;
        float: left;
        background-repeat: no-repeat;
        background-size: 60px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

     .e-high {
        background-position: 0px;
    }

     .e-medium {
        background-position: -41px;
    }

     .e-low {
        background-position: -20px;
    }

    .e-schedule.e-rtl .e-navigatenext:before,
    .e-schedule .e-navigateprevious:before {
        content: "\e68b";
    }

    .e-schedule.e-rtl .e-navigateprevious:before,
    .e-schedule .e-navigatenext:before {
        content: "\e69b";
    }

    .e-schedule .e-resourceexpand:before {
        & when (@skin= "material") {
            content: "\e631";
            margin: 4px;
        }

        & when not (@skin= "material") {
            content: "\e664";
        }
    }

    .e-schedule .e-resourcecollapse:before {
        & when (@skin= "material") {
            content: "\e631";
            margin: 4px;
        }

        & when not (@skin= "material") {
            content: "\e67c";
        }
    }

    .e-schedule .e-resourceicon {
        font-family: "ej-webfont";
        font-size: 12px;

        & when (@skin= "material") {
            font-size: 13px;
            margin-top: 0px !important;
            width: 20px;
            height: 20px;
            -webkit-transition: -webkit-transform 1s ease-in-out;
            transition: -webkit-transform 1s ease-in-out;
            transition: transform 0.9s ease-in-out;
            transition: transform 0.9s ease-in-out, -webkit-transform 0.3s ease-in-out;
        }
    }

    .e-schedule .e-resourcecollapse {
        & when (@skin= "material") {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

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

    .e-schedule .e-resourceexpand {
        & when (@skin= "material") {
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }
    }

    .e-scheduledialog .e-scheduledelete:before {
        font-size: 20px;
    }

    .e-scheduledialog .e-scheduleclose:before {
        content: "\e69e";

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

        & when (@skin= "office-365") {
            font-size: 12px;
            margin: 0;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: 8px;
            margin: 4px 0 0 4px;
        }
    }

    .e-scheduledialog.e-rtl .e-scheduleclose:before {
        & when not (@skin= "material") {
            margin: 4px 4px 0 0;
        }
    }

    .e-schedule .e-schedulemouseclose:before {
        content: "\e779";
        font-size: 8px;
        width: 9px;
        height: 9px;
    }

    .e-schedule .e-schedulemouseclose:hover {
        cursor: pointer;
    }

    .e-schedule .e-icon.e-schedulemouseclose {
        top: 5px;
        display: none;
        position: absolute;
        z-index: 1;
        width: 9px;
        height: 9px;
        left: auto;

        & when (@skin= "material") {
            right: 7px;
        }

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

    .e-schedule.e-rtl .e-icon.e-schedulemouseclose {
        right: auto;
        left: 5px;
    }

    .e-scheduledialog .e-alertbtn .e-alertOk {
        & when not (@skin= "office-365") {
            margin: 0px 10px 0px 10px;
        }
    }

    .e-scheduledialog .e-alertbtn .e-alertCancel {
        & when not (@skin= "material") {
            margin-right: 10px;
        }
    }

    .e-scheduledialog .e-recurtitle {
        font-size: 16px;
        font-weight: bold;
        padding: 8px;
    }

    .e-schedule .icon-AddGrad:before:before {
        content: "\e69f";
    }

    .e-schedule .e-timeidicatorcircle:before {
        font-size: 9px;
        top: 2px;
        left: -1px;
        position: absolute;
    }

    .e-schedule .e-ewexpand:before {
        content: "\e6fb";
        font-size: 14px !important;
    }

    .e-schedule .e-appointresizer-right {
        margin-right: -4px;
        margin-top: 2px;

        & when (@skin= "office-365") {
            margin-top: 6px;
        }
    }

    .e-schedule .e-appointresizer-left {
        margin-left: 0;
        margin-top: 2px;

        & when (@skin= "office-365") {
            margin-top: 6px;
        }
    }

    .e-schedule.e-rtl .e-appointresizer-left {
        margin-left: 4px;
        margin-top: 2px;

        & when (@skin= "office-365") {
            margin-top: 6px;
        }
    }

    .e-schedule.e-rtl .e-appointresizer-right {
        margin-right: -8px;
        margin-top: 2px;

        & when (@skin= "office-365") {
            margin-top: 6px;
        }
    }

    .e-schedule .e-nsexpand:before {
        content: "\e712";
        font-size: 14px !important;
        line-height: 0px;
    }

    .e-schedule .e-appointresizer-top {
        margin-top: 1px;
    }

    .e-schedule .e-appointresizer-bottom {
        margin-bottom: 0;
    }

    .e-schedule .e-appsoverflow:before {
        font-size: 12px;
    }

     .e-draggableAppointment {
        font-family: @font-family;
        font-size: 11px;
        border: 1px solid black;
        background-color: #DBDBDE;
        overflow: hidden;
        z-index: 1;
    }

    .e-schedule .e-upicon,
    .e-schedule .e-downicon {
        height: 20px;
        position: absolute;
        z-index: 1;
    }

    .e-schedule .e-appup,
    .e-schedule .e-appdown {
        float: right;
        margin-right: 2px;
        opacity: 0.5;
    }

    .e-schedule.e-rtl .e-appup,
    .e-schedule.e-rtl .e-appdown {
        float: left;
        margin-left: 2px;
        opacity: 0.5;
    }

    .e-schedule .e-recurapp,
    .e-schedule .e-recureditapp {
        display: inline-block;
        vertical-align: middle;
        float: left;

        & when (@skin= "material") {
            margin: 3px 5px 0 -1px;
        }

        & when (@skin= "office-365") {
            line-height: 18px;
        }

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

    .e-schedule.e-rtl .e-recurapp,
    .e-schedule.e-rtl .e-recureditapp {
        margin: 1px 0 0 5px;
        float: right;
    }

    .e-schedule .e-scheduleAppGlassy {
        filter: alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
    }

    .e-scheduledialog div.e-error {
        position: absolute;
        z-index: 9999;
    }

    .e-scheduledialog div.e-error .e-errortail {
        height: 0;
        width: 0;
        position: relative;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid;
    }

    .e-scheduledialog div.e-error .e-toparrow {
        left: 10%;
        border-top-width: 2px;
        display: block;
    }

    .e-scheduledialog.e-rtl div.e-error .e-toparrow {
        right: 10%;
    }

    .e-scheduledialog .e-error div.e-field-validation-error {
        border-radius: 4px;
        font-size: 14px;
        padding: 4px;
    }

    .e-scheduleAppGlassy { /*While enable external drag and drop the appointment rendered in body tag. The class applies only external drag and drop*/
        filter: alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
    }

    .e-schedule .e-monthnamerow .e-monthrow{
        text-align: center;
    }

    .e-schedule .e-horizontalmonthtimecellsht.e-monthheaderrow{
        height:92px;
    }

    .e-schedule .e-horizontaltimecellsht.e-monthheaderrow{
        height:87px;
    }
}

.mixin(@widget) when (@widget = reportviewer), (@widget = none) {
     .e-reportviewer-icon {
        font-family: 'ej-webfont';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-align: center;
        vertical-align: middle;
        line-height: normal !important;
        font-size: 17px;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        cursor: default;
    }

    @font-face {
        font-family: 'ej-reportviewericons';
        src: url('@{font-icon-path}/reportviewer/ej-reportviewericons.eot?wpa4ep');
        src: url('@{font-icon-path}/reportviewer/ej-reportviewericons.eot?wpa4ep#iefix') format('embedded-opentype'), url('@{font-icon-path}/reportviewer/ej-reportviewericons.ttf?wpa4ep') format('truetype'), url('@{font-icon-path}/reportviewer/ej-reportviewericons.woff?wpa4ep') format('woff'), url('@{font-icon-path}/reportviewer/ej-reportviewericons.svg?wpa4ep#ej-reportviewericons') format('svg');
        font-weight: normal;
        font-style: normal;
    }

     .e-reportviewer-toggleicon {
        /* use !important to prevent issues with browser extensions that change fonts */
        font-family: 'ej-reportviewericons' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        font-size: 16px;
        line-height: 1;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .e-reportviewer-toolbarcontainer {
        vertical-align: middle;
        border: 1px solid;
        border-bottom: 0 solid;
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;

        & when (@skin = "bootstrap") {
            border-radius: 4px 4px 0 0;
        }

        & when not (@skin = "material") and not (@skin = "office-365") {
            height: 38px;
        }
        & when (@skin = "office-365") {
            height: 45px;
        }
        & when (@skin = "material") {
            height: 48px;
            -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.20) !important;
            -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.20) !important;
            box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.20) !important;
        }
    }

    .e-reportviewer-toolbarcontainer .e-rel-position{
        margin-top: 4px;
    }

     .e-reportviewer-toolbarul {
        & when not (@skin = "material") and not (@skin = "office-365")  {
            height: 34px !important;
            margin: 0.75px !important;
        }
        & when (@skin = "material") {
            padding-right: 4px !important;
            margin-right: 4px !important;
            margin-top: 5.5px !important;
            margin-bottom: 5.5px !important;
        }
    }

     .e-reportviewer-toolbarli {
        & when (@skin = "office-365") {
            width: 20px;
            height: 20px;
        }
        & when not (@skin = "material") and not (@skin = "office-365") {
            margin: 2px;
            width: 20px;
            height: 20px;
            padding: 4px !important;
        }
        & when (@skin = "material") {
            margin-left: 12px;
            margin-right: 12px !important;
            width: 21px;
            height: 21px;
            padding: 7px !important;
        }
    }

     .e-reportviewer-tbdiv {
        width: 16px;
        height: 16px;
        border: 1px solid;
        border-color: transparent;
        margin: 4px 0px;
    }

     .e-reportviewer-outerborder {
        background-color: transparent;
        border: 1px solid;
        border-color: transparent;
        width: 28px;
        height: 90%;
        margin: 1px;
        float: left;
    }

     .e-reportviewer-outerborder:hover {
        border: 1px solid;
    }

    .e-reportviewer-tbdiv.e-reportviewer-fittopagetip {
        width: auto;
        height: auto;
        min-height: 30.5px;
        min-width: 55px;
        position: absolute;
        padding: 1px;
        word-wrap: break-word;
        border: 1px solid;
        margin: 0.5px auto;
        z-index: 2147483647;

        & when (@skin = "office-365") {
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
        }
    }

    .e-reportviewer-tbdiv.e-reportviewer-exporttip {
        width: auto;
        height: auto;
        min-height: 30.5px;
        min-width: 55px;
        position: absolute;
        padding: 1px;
        word-wrap: break-word;
        border: 1px solid;
        margin: 0.5px auto;
        z-index: 2147483647;

        & when (@skin = "office-365") {
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
        }
    }

    .e-reportviewer-tbdiv.e-reportviewer-tooltip {
        width: auto;
        height: auto;
        min-height: 30.5px;
        min-width: 35px;
        position: absolute;
        padding: 1px;
        max-width: 250px;
        word-wrap: break-word;
        border: 1px solid;
        margin: 0px auto;
        z-index: 2147483647;
    }

     .e-reportviewer-headerspan {
        font-style: normal;
        font-weight: bold;
        padding: 1px;
        margin: 1.5px;
        word-wrap: break-word;
    }

     .e-reportviewer-contentspan {
        word-wrap: break-word;

        & when (@skin= "material") {
            /*material*/
            padding: 5px;
            margin: 5.5px;
        }
        & when not (@skin = "material") {
            /*other*/
            padding: 1px;
            margin-left: 15px;
            margin-bottom: 5px;
            margin: 0px 5px 5px 15px;
        }
    }

     .e-reportviewer-param-datepicker {
       float: left;
    }

     .e-reportviewer-ejdropdownlist {
        width: auto;
		height: auto;
        float: left;
        border: 1px solid transparent;

        & when (@skin = "office-365") {
            padding: 8px !important;
            padding-bottom: 15px !important;
        }
        & when not (@skin = "material") and not (@skin = "office-365") {
            padding: 1px !important;
        }
        & when (@skin = "material") {
            padding: 8px !important;
            padding-top: 4px !important;
        }
    }

    .e-reportviewer-toolbarcontainer input.e-input,  .e-reportviewer-viewerblockcontent input.e-input {
        line-height: normal !important;
    }

     .e-reportviewer-print,  .e-reportviewer-emptyconetent,  .e-reportviewer-pagefit,  .e-reportviewer-export,  .e-reportviewer-gotonext,  .e-reportviewer-gotonext.e-reportviewer-disabled,  .e-reportviewer-gotoprevious,  .e-reportviewer-gotoprevious.e-reportviewer-disabled,  .e-reportviewer-gotofirst,  .e-reportviewer-gotofirst.e-reportviewer-disabled,  .e-reportviewer-gotolast,  .e-reportviewer-gotolast.e-reportviewer-disabled,  .e-reportviewer-zoomin,  .e-reportviewer-zoomout,  .e-reportviewer-refresh,  .e-reportviewer-parameter,  .e-reportviewer-documentmap,  .e-reportviewer-gotoparent,  .e-reportviewer-preview,  .e-reportviewer-pagesetup,  .e-reportviewer-printsetup {
        width: 20px;
        height: 20px;
    }

     .e-reportviewer-tbpage {
        background-color: transparent;
        text-align: center;
        width: auto;

        & when (@skin = "office-365") {
            padding-top: 9px !important;
            padding-bottom: 15px !important;
        }
        & when not (@skin = "material") and not (@skin = "office-365") {
            margin-top: 0px;
            padding-top: 3px !important;
            padding-bottom: 9px !important;
        }
        & when (@skin = "material") {
            padding-top: 4px !important;
            padding-bottom: 9px !important;
        }
    }

     .e-reportviewer-pagenumber {
        min-height: 22px !important;
        min-width: 25px !important;
        height: 22px !important;
        width: 28px !important;
        text-align: center;
        margin-top: 3.7px;
        display: inline-block !important;

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

     .e-reportviewer-tbdiv.e-reportviewer-zoomlist {
        border: 1px solid;
        margin: 4px 7px;
        width: 60px;
        height: 19px;
    }

     .e-reportviewer-viewer {
        width: 100%;
        text-shadow: none !important;
    }

     .e-reportviewer-viewerblock {
        width: 100%;
        border-top: 1px solid;
        border-bottom: 0px solid;
        border-left: 1px solid;
        border-right: 1px solid;
        font-size: 11pt;
        color: #5B5B5B;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        & when (@skin = "material") {
            -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.20) !important;
            -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.20) !important;
            box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.20) !important;
        }
    }

     .e-reportviewer-paramblock-disable {
        pointer-events: none;
        opacity: 0.5;
    }

     .e-reportviewer-blockstyle {
        position: absolute;
        top: 0;
        left: 0;
        width: 99.5%;
        height: 100%;
        z-index: 10;
    }

     .e-reportviewer-viewerblockcontent {
        width: 100%;
    }

     .e-reportviewer-viewerblockcellcontent {
        border: 0;
        vertical-align: middle;
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
    }

     .e-reportviewer-paramcheckbox {
        & when (@skin = "office-365") {
            padding: 2px 5px 6px 0.58em;
            width: 95.5%;
        }
        & when (@skin = "material") {
            padding: 8px 5px 8px 1.25em;
            width: 90.5%;
        }
        & when not (@skin = "material") and not (@skin = "office-365") {
            padding: 2px 5px 2px 0.85em;
            width: 93.5%;
        }
    }

     .e-reportviewer-paramcheckboxlabel {
        font-size: 14px !important;
        & when (@skin = "office-365") {
            padding: 3px 0 0 0.56em !important;
        }
        & when (@skin = "material") {
            padding: 6px 0 0 1.76em !important;
        }
        & when not (@skin = "material") and not (@skin = "office-365") {
            padding: 1px 0 0 0.76em !important;
        }
    }

     .e-reportviewer-device-paramcheckbox {
        & when (@skin = "office-365") {
            background-color: #ffffff;
            padding-left: 4.5% !important;
            width: 95.5%;
        }
        & when (@skin = "material") {
            padding-left: 9.5%;
            width: 90.5%;
        }
        & when not (@skin = "material") and not (@skin = "office-365") {
            padding-left: 1.2% !important;
            width: 98.8%;
        }
    }

     .e-reportviewer-viewreport {
        border-left: 1px solid;
        border-right: 0;
        border-bottom: 0;
        border-top: 0;
        padding: 10px;
        text-align: center;
        vertical-align: top;
    }

     .e-reportviewer-viewreportbutton {
        line-height: normal;
        vertical-align: baseline;
        padding: initial;
        margin: initial;
        border: 1px solid;

        & when (@skin = "material") {
            &:extend(.e-accent all);
        }
    }

     .e-reportviewer-scrollcontainer {
        line-height: normal !important;
        position: relative;
        height: 100%;
        width: 100%;
        overflow: auto;
        text-align: left;
    }

     .e-reportviewer-pageviewcontainer {
        width: auto;
        height: auto;
        border: 1px none;
        margin: 0px auto;
    }

     .e-reportviewer-pageouterline {
        background-color: transparent;
        position: relative;
        border: 1px solid;
        border-color: transparent;
        margin: 0px auto;

        & when (@skin= "material") {
            /*material*/
            padding: 16px;
        }
        & when not (@skin = "material") {
            /*other*/
            padding: 10px;
        }
    }

     .e-reportviewer-pageview {
        position: absolute;
        & when (@skin = "office-365") {
            -moz-box-shadow: 0px 0px 5px 0.2px rgba(0,0,0,0.22);
            -webkit-box-shadow: 0px 0px 5px 0.2px rgba(0,0,0,0.22);
            box-shadow: 0px 0px 5px 0.2px rgba(0,0,0,0.22);
        }
        & when not (@skin = "office-365") {
            -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.22);
            -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.22);
            box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.22);
        }
    }

     .e-reportviewer-elementalignments {
        & when not (@skin= "material") {
            /*other*/
            border: 1px solid;
        }

        margin: 0;
        padding: 1px !important;
        vertical-align: inherit;
    }

     .e-reportviewer-elementalignments:focus {
        & when not (@skin= "material") {
            /*other*/
            border: 1px solid !important;
            border-color: #000000 !important;
            opacity: 54 !important;
        }
    }

	 .e-reportviewer-viewercontainer {
		border: 1px solid;

        & when (@skin = "material") {
            -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.20) !important;
            -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.20) !important;
            box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.20) !important;
        }
	}

	 .e-reportviewer-box-border,  .e-reportviewer-pageviewcontainer,
	 .e-reportviewer-pageouterline,  .e-reportviewer-viewercontainer,
	 .e-reportviewer-viewercontainer,  .e-reportviewer-viewerblock {
		-webkit-box-sizing: border-box !important;
		-moz-box-sizing: border-box !important;
		box-sizing: border-box !important;
	}

	 .e-reportviewer-box-content,  .e-reportviewer-pageview {
		-webkit-box-sizing: content-box !important;
		-moz-box-sizing: content-box !important;
		box-sizing: content-box !important;
	}

     .e-reportviewer-textbox {
        & when not (@skin= "material") {
            /*other*/
            border: 1px solid;
        }

        height: 26px;
        line-height: normal;
        text-indent: 10px;
        vertical-align: middle;
        padding: 0px;
    }

     .e-reportviewer-label,  .e-reportviewer-labelpageno {
        border: none;
        vertical-align: text-top;
    }

     .e-reportviewer-documentmappopup {
        border: 1px solid;
    }

     .e-reportviewer-pagepopupinfo {
        height: 30px;
        width: auto;
        /*height: auto;*/
        min-width: 65px;
        position: absolute;
        padding: 1px;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid;
        margin: 10px auto;
        z-index: 9999;
        opacity: .5;
    }

     .e-reportviewer-popuppageno {
        min-width: 20px;
        height: 15px;
        display: table-cell;
    }

     .e-reportviewer-popuptotalpage {
        /*display: table-cell;*/
        /*vertical-align: middle;*/
    }

     .e-reportviewer-expandtoggle {
        background: url('@{font-path}/reportviewer/expand.svg') no-repeat center;
    }

     .e-reportviewer-collapsetoggle {
        background: url('@{font-path}/reportviewer/collapse.svg') no-repeat center;
    }

     .e-reportviewer-sortingUpDown {
        background: url('@{font-path}/reportviewer/updown.png');
        background-repeat: no-repeat;
        background-origin: padding-box;
        background-position: center;
        background-color: transparent;
        background-size: 10px;
    }

     .e-reportviewer-sortingUp {
        background: url('@{font-path}/reportviewer/up.png');
        background-repeat: no-repeat;
        background-origin: padding-box;
        background-position: center;
        background-color: transparent;
        background-size: 10px;
    }

     .e-reportviewer-sortingDown {
        background: url('@{font-path}/reportviewer/down.png');
        background-repeat: no-repeat;
        background-origin: padding-box;
        background-position: center;
        background-color: transparent;
        background-size: 10px;
    }

     .e-reportviewer-close {
        padding-bottom: 29px;
        padding-right: 7px;
        font-weight: bold;
        font-size: 15px;
        cursor: pointer;
    }

    .e-reportviewer-alertbox .e-titlebar {
        padding: 6.5px .7em !important;
    }

    .e-reportviewer-alertbox .e-widget-content {
        padding: 23px 26px 32px 26px !important;
    }

	 .e-reportviewer-error-content {
		padding: 4px 0px 4px 6px !important;
		line-height: 1.8;
	}

     .e-reportviewer-alert-table {
        border-spacing: 2px !important;
        border-collapse: separate !important;
    }

     .e-reportviewer-scroller .e-scrollbar .e-hscroll .e-hup.e-icon {
        display: none;
    }

    .e-reportviewer-alertbox .e-footerbar {
        width: 100%;
        height: auto !important;
        padding:0px 28px 12px 0px !important;
        display: inline-table !important;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .e-rptviewer-dialog .e-footerbar {
        padding: .5em 17px !important;
        height: auto !important;
        display: inline-table !important;
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

   .e-rptviewer-dialog .e-radiobtn-wrap .e-radsmaller {
       height: 11px;
       width: 11px;
   }

   .e-rptviewer-dialog .e-radiobtn-wrap .e-radsmaller .e-rad-icon {
      font-size: 7px;
      line-height: 10px;
      text-indent: 1.2px;
   }

     .e-rptviewer-okbtn {
        width: 68px;
    }

     .e-rptviewer-cancelbtn {
        width: 72px;
    }

     .e-reportviewer-blockcontainer {
        & when (@skin = "material") {
            padding-left: 15px !important;
            padding-right: 10px !important;
        }
        & when (@skin = "office-365") {
            padding: 5px 20px !important;
            padding-right: 0px !important;
        }
    }

     .e-reportviewer-tr {
        & when (@skin = "office-365") {
            height: 12px !important;
        }
        & when not (@skin = "office-365") {
            height: 10px !important;
        }
    }

     .e-reportviewer-pagesetuptr {
        height: 10px !important;
        & when (@skin = "office-365") {
            font-size: 14px !important;
        }
    }

     .e-reportviewer-pagesetupheader {
        padding-top: 10px;
        padding-bottom: 5px !important;
    }

     .e-reportviewer-pagesetupcontent {
        & when not (@skin = "material") {
            font-size: 14px;
        }
        font-weight: 400;
        padding-top: 5px !important;
        padding-bottom: 10px !important;
    }

     .ej-reportviewericonscollapse:hover,  .ej-reportviewericonsexpand:hover,  .e-reportviewer-drillhover:hover,  .e-reportviewer-sortingUp:hover,  .e-reportviewer-sortingDown:hover,  .e-reportviewer-sortingUpDown:hover,  .e-reportviewer-drillhover:hover {
        cursor: pointer;
    }

     .e-reportviewer-pagefit:before {
        content: "\e660";
    }

     .e-reportviewer-pagefittopage:before {
        content: "\e657";
    }

     .e-reportviewer-emptyconetent:before {
        content: "\00a0 \00a0";
    }

     .e-reportviewer-print:before {
        content: "\e71f";
    }

     .e-reportviewer-export:before {
        content: "\e720";
    }

     .e-reportviewer-pagesetup:before {
        content: "\e6d1";
    }

     .e-reportviewer-gotonext:before {
        content: "\e723";
    }

     .e-reportviewer-gotonext.e-reportviewer-disabled:before {
        content: "\e723";
    }

     .e-reportviewer-gotoprevious:before {
        content: "\e722";
    }

     .e-reportviewer-gotoprevious.e-reportviewer-disabled {
        content: "\e722";
    }

     .e-reportviewer-gotofirst:before {
        content: "\e721";
    }

     .e-reportviewer-gotolast:before {
        content: "\e724";
    }

     .e-reportviewer-gotolast.e-reportviewer-disabled {
        content: "\e724";
    }

     .e-reportviewer-gotofirst.e-reportviewer-disabled {
        content: "\e721";
    }

     .e-reportviewer-zoomin:before {
        content: "\e725";
    }

     .e-reportviewer-zoomout:before {
        content: "\e726";
    }

     .e-reportviewer-refresh:before {
        content: "\e727";
    }

     .e-reportviewer-parameter:before {
        content: "\e728";
    }

     .e-reportviewer-documentmap:before {
        content: "\e719";
    }

     .e-reportviewer-gotoparent:before {
        content: "\e71e";
    }

     .e-reportviewer-preview:before {
        content: "\e72a";
    }

     .e-reportviewer-close:before {
        content: "\e74e";
    }

     .e-reportviewer-zoomSelection_popup {
        max-height: none !important;
    }

     .e-reportviewer-zoomSelection_popup-ul {
        text-align: center !important;
    }

     .ej-reportviewericonscollapse:before {
        content: "\e900";
    }

     .ej-reportviewericonsexpand:before {
        content: "\e901";
    }

     .e-reportviewer-popupli {
        border: 0 none;
        float: none;
        position: relative;
        line-height: normal;
        cursor: pointer;
        list-style-type: none;
        text-align: left;

        & when (@skin = "office-365") {
            padding-left: 12px;
            width: 80px;
            height: 36px;
        }
        & when (@skin = "material") {
            padding-top: 3px;
            padding-bottom: 3px;
            padding-left: 4px;
        }
        & when not (@skin = "material") and not (@skin = "office-365") {
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 6px;
        }
    }

     .e-reportviewer-popupspan {
        & when (@skin = "office-365") {
            position: absolute;
            padding-top: 8px;
        }
    }

     .e-reportviewer-lispan {
        text-decoration: none;
        white-space: nowrap;
        padding: 2px !important;
        vertical-align: text-bottom;
    }

     .e-reportviewer-viewerblock-parentdiv .e-scrollbar .e-vscroll .e-vup.e-icon {
        display: none;
    }

     .e-reportviewer-txt-overflow {
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.mixin(@widget) when (@widget = pdfviewer), (@widget = none) {
    .e-pdfviewer .e-pdfviewer-icon {
        font-family: 'ej-webfont';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-align: center;
        vertical-align: middle;
        line-height: normal;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        cursor: default;

        & when not (@skin = "material") and not (@skin = "office-365") {
            font-size: 17px;
        }

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

        & when (@skin = "office-365") {
            font-size: 14px;
        }
    }

    .e-pdfviewer .e-pdfviewer-toolbarcontainer {
        width: 100%;
        vertical-align: middle;
        border-width: 1px;
        border-style: solid;
        border-bottom: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;

        & when (@skin = "material") and not (@skin = "office-365") {
            padding-top: 2.2px;
            padding-bottom: 2.2px;
        }
    }

    .e-pdfviewer .e-pdfviewer-toolbarcontainer.e-toolbar {
        height: inherit;

        & when (@skin = "material") and not (@skin = "office-365") {
            padding-right: 11px;
        }
    }

    .e-pdfviewer .e-pdfviewer-toolbarul {
        height: inherit;
        position: relative;
        left: 1px;
        top: 1px;

        & when not (@skin = "material") and not (@skin = "office-365") {
            margin: 5px !important;
        }

        & when (@skin = "material") {
            padding-right: 4px !important;
            margin-right: 4px !important;
            margin-top: 7.5px !important;
            margin-bottom: 7.5px !important;
        }
    }

    .e-pdfviewer .e-pdfviewer-toolbarli {
        & when not (@skin = "material") and not (@skin = "office-365") {
            margin: 2px 0px;
            width: 20px;
            height: 20px;
            padding: 4px !important;
        }

        & when (@skin = "material") {
            margin-left: 5px;
            width: 21px;
            height: 21px;
        }
    }

    .e-pdfviewer .e-pdfviewer-toolbarli.e-tooltxt {
        & when (@skin = "material") {
            padding: 7.5px;
        }
    }

    .e-pdfviewer .e-toolbar ul > li.e-pdfviewer-toolbarli.e-tooltxt {
        & when (@skin = "material") {
            margin-right: 5px;
        }
    }

    .e-pdfviewer .e-pdfviewer-tbdiv {
        width: 16px;
        height: 16px;
        border-width: 1px;
		border-style: solid;
        margin: 4px 0px;
    }

    .e-pdfviewer .e-pdfviewer-outerborder {
        background-color: transparent;
        border: 1px solid;
        border-color: transparent;
        width: 28px;
        height: 90%;
        margin: 1px;
        float: left;
    }

    .e-pdfviewer .e-pdfviewer-outerborder:hover {
        border: 1px solid;
    }

    .e-pdfviewer .e-pdfviewer-tbdiv.e-pdfviewer-fittopagetip {
        width: auto;
        height: auto;
        min-height: 30.5px;
        min-width: 55px;
        position: absolute;
        padding: 1px;
        word-wrap: break-word;
        border-width: 1px;
		border-style: solid;
        margin: 10px auto;
        z-index: 9999;
    }

    .e-pdfviewer .e-pdfviewer-tbdiv.e-pdfviewer-tooltip {
        width: auto;
        height: auto;
        min-height: 30.5px;
        min-width: 35px;
        position: absolute;
        padding: 1px;
        max-width: 250px;
        word-wrap: break-word;
        border-width: 1px;
		border-style: solid;
        margin: 10px auto;
        z-index: 9999;
    }

    .e-pdfviewer .e-pdfviewer-headerspan {
        font-style: normal;
        font-weight: bold;
        padding: 1px;
        word-wrap: break-word;

        & when not (@skin = "material") and not (@skin = "office-365") {
            margin: 1.5px;
        }

        & when (@skin = "material") {
            margin: 1px;
        }

        & when (@skin = "office-365") {
            margin-left: 0px;
        }
    }

    .e-pdfviewer .e-pdfviewer-contentspan {
        padding: 1px;
        margin-bottom: 5px;
        margin: 0px 5px 5px 15px;
        word-wrap: break-word;

        & when not (@skin = "material") and not (@skin = "office-365") {
            margin-left: 15px;
        }

        & when (@skin = "material") {
            margin: 1px;
        }

        & when (@skin = "office-365") {
            margin-left: 0px;
        }
    }

    .e-pdfviewer .e-pdfviewer-ejdropdownlist {
        width: auto;
        height: 90%;
        float: left;
        border: 1px solid transparent;

        & when not (@skin="material") and not (@skin = "office-365") {
            margin: 4.7px 2px 2px 2px;
        }

        & when (@skin="material") {
            margin-top: 6px;
            margin-left: 5px;
            margin-right: 5px;
        }

        & when (@skin = "office-365") {
            margin: 7.3px 2px 2px 2px;
        }
    }

    .e-pdfviewer-responsivesecondarytoolbar {
        width: 230px;
        left: 244px;
        top: 54px;
        z-index: 10235;
        position: absolute;
    }

    .e-pdfviewer .e-pdfviewer-toolbarcontainer input.e-input, .e-pdfviewer .e-pdfviewer-viewerblockcontent input.e-input {
        line-height: normal;
    }

    .e-pdfviewer .e-pdfviewer-print, .e-pdfviewer .e-pdfviewer-emptyconetent, .e-pdfviewer .e-pdfviewer-fitpage, .e-pdfviewer .e-pdfviewer-fitwidth, .e-pdfviewer .e-pdfviewer-gotonext, .e-pdfviewer .e-pdfviewer-gotonext.e-pdfviewer-disabled, .e-pdfviewer .e-pdfviewer-gotoprevious, .e-pdfviewer .e-pdfviewer-gotoprevious.e-pdfviewer-disabled, .e-pdfviewer .e-pdfviewer-gotofirst, .e-pdfviewer .e-pdfviewer-gotofirst.e-pdfviewer-disabled, .e-pdfviewer .e-pdfviewer-gotolast, .e-pdfviewer .e-pdfviewer-gotolast.e-pdfviewer-disabled, .e-pdfviewer .e-pdfviewer-zoomin, .e-pdfviewer .e-pdfviewer-zoomout, .e-pdfviewer .e-pdfviewer-download, .e-pdfviewer-find, .e-pdfviewer .e-pdfviewer-sign {
        margin-top: 1px;

        & when not (@skin = "material") and not (@skin = "office-365") {
            width: 20px;
            height: 20px;
        }

        & when (@skin = "material") {
            width: inherit;
            height: 16px;
        }

        & when (@skin = "office-365") {
            width: 16px;
            height: 16px;
            margin-top: -4px !important;
        }
    }

    .e-pdfviewer .e-pdfviewer-tbpage {
        background-color: transparent;
        float: left;
        text-align: center;
        width: auto;
        height: 25px;

        & when not (@skin = "material") and not (@skin = "office-365") {
            margin-top: 2.6px;
        }

        & when (@skin = "material") {
            margin-left: 5px;
            margin-top: 5px;
            margin-right: 7.5px;
        }

        & when (@skin = "office-365") {
            margin-top: 7.9px;
        }
    }

    .e-pdfviewer .e-pdfviewer-toolbarli-label.e-tooltxt {
        padding: 0px;
    }

    .e-pdfviewer li.e-tooltxt > .e-pdfviewer-ejdropdownlist {
        border: 0px;
    }

    .e-pdfviewer li.e-tooltxt > .e-pdfviewer-search-checkboxcontainer {
        & when not (@skin = "material") {
            margin-top: -2px;
        }

        & when (@skin = "material") {
            margin-top: 2px;
        }
    }

    .e-pdfviewer .e-toolbar ul > li.e-tooltxt.e-pdfviewer-toolbarli-label {
        & when (@skin = "material") {
            margin-right: 4px;
        }
    }

     .e-pdfviewer-sign-dialog.e-dialog.e-widget-content {
        background: #fff;
    }

    .e-pdfviewer .e-pdfviewer-pagenumber {
        min-height: 22px;
        min-width: 25px;
        height: 22px;
        width: 28px;
        display: inline-block;
        text-align: center;

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

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

    .e-pdfviewer .e-pdfviewer-tbdiv.e-pdfviewer-zoomlist {
        border: 1px solid;
        margin: 4px 7px;
        width: 60px;
        height: 19px;
    }

    .e-pdfviewer .e-pdfviewer-viewer {
        width: 100%;
        text-shadow: none;
        min-width: 320px;
        -webkit-user-select: text;
    }

    .e-pdfviewer .e-pdfviewer-viewerblock {
        width: 100%;
        border-top: 1px solid;
        border-bottom: 0px solid;
        border-left: 1px solid;
        border-right: 1px solid;
        overflow: auto;
        font-size: 11pt;
        color: #5B5B5B;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .e-pdfviewer .e-pdfviewer-blockstyle {
        position: absolute;
        top: 0;
        left: 0;
        width: 99.5%;
        height: 100%;
        z-index: 10;
    }

    .e-pdfviewer .e-pdfviewer-viewerblockcontent {
        width: 100%;
    }

    .e-pdfviewer .e-pdfviewer-viewerblockcellcontent {
        border: 0;
        vertical-align: middle;
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
    }

    .e-pdfviewer .e-pdfviewer-scrollcontainer {
        line-height: normal;
        position: relative;
        height: 100%;
        width: 100%;
        overflow: auto;
        text-align: left;
    }

    .e-pdfviewer .e-pdfviewer-pageviewcontainer {
        width: auto;
        height: auto;
        border: 1px none;
        margin: 0px auto;
    }

    .e-pdfviewer .e-pdfviewer-pageouterline {
        background-color: transparent;
        position: relative;
        border: 1px solid;
        border-color: transparent;
        margin: 0px auto;
        padding: 10px;
    }

    .e-pdfviewer .e-pdfviewer-pageview {
        position: absolute;
        -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.22);
        -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.22);
        box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.22);
    }

    .e-pdfviewer .e-pdfviewer-elementalignments {
        border-width: 1px;
        border-style: solid;
        margin: 0;
        padding: 1px;
    }

    .e-pdfviewer .e-pdfviewer-viewercontainer {
        border-width: 1px;
        border-style: solid;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .e-pdfviewer .e-pdfviewer-textbox {
        height: 23px;
        line-height: normal;
        text-indent: 10px;
        border: 1px solid;
        vertical-align: middle;
        padding: 0px;
    }

    .e-pdfviewer .e-pdfviewer-label, .e-pdfviewer .e-pdfviewer-labelpageno {
        border: none;
    }

    .e-pdfviewer .e-pdfviewer-labelpageno {
        float: right;
        margin-left: 5px;

        & when (@skin = "material") {
            margin-top: 4px;
        }
    }

    .e-pdfviewer .e-pdfviewer-pagepopupinfo {
        height: 30px;
        width: auto;
        /*height: auto;*/
        min-width: 65px;
        position: absolute;
        padding: 1px;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid;
        margin: 10px auto;
        z-index: 9999;
        opacity: .5;
    }

    .e-pdfviewer .e-pdfviewer-popuppageno {
        min-width: 20px;
        height: 15px;
        display: table-cell;
    }

    .e-pdfviewer .e-pdfviewer-toolbarul-search {
        position: relative;
        left: 1px;
        top: 1px;
        margin-left: 4px;
    }

    .e-pdfviewer .e-pdfviewer-searchbox.e-toolbar > .e-horizontal.e-ul.e-pdfviewer-toolbarul-search {
        & when (@skin="material") {
            margin-top: 3px;
        }
    }

    .e-pdfviewer .e-pdfviewer-searchbox.e-toolbar ul:last-child > li:last-child {
        & when (@skin="material") {
            margin-right: 0px;
        }
    }

    .e-pdfviewer .e-pdfviewer-toolbarul > li.e-pdfviewer-toolbarli:first-child {
        & when (@skin="material") {
            margin-left: 0px;
        }
    }

    .e-pdfviewer .e-pdfviewer-toolbarul > li.e-pdfviewer-toolbarli:last-child {
        & when (@skin="material") {
            margin-right: 0px !important;
        }
    }

    .e-pdfviewer .e-pdfviewer-toolbarul.e-separator > li.e-pdfviewer-toolbarli:last-child {
        & when (@skin="office-365") {
            margin-right: 0px !important;
        }
    }

    .e-pdfviewer .e-pdfviewer-match-checkbox {
        float: left;

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

    .e-pdfviewer .e-pdfviewer-toolbarli-search {
        width: 20px;
        height: 20px;
        padding: 4px !important;

        & when (@skin="material") {
            margin-top: 3px !important;
        }
    }

    .e-pdfviewer .e-pdfviewer-label {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
    }

    .e-pdfviewer .e-pdfviewer-searchbox {
        z-index: 10;
        display: none;
        overflow: visible;
        position: absolute;

        & when not (@skin="material") {
            height: 35px !important;
        }

        & when (@skin="material") {
            height: 48px !important;
            padding: 0px !important;
        }

        & when (@skin = "office-365") {
            padding: 0px !important;
        }
    }

    .e-pdfviewer .e-pdfviewer-search-inputcontainer {
        float: left;

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

        & when (@skin="material") {
            margin-top: 9px;
        }
    }

    .e-pdfviewer .e-pdfviewer-search-checkboxcontainer {
        float: left;
    }

    .e-pdfviewer .e-toolbar ul > li.e-tooltxt.e-pdfviewer-toolbarli-search {
        & when (@skin="material") {
            margin-right: 1px !important;
        }
    }

    .e-pdfviewer .e-pdfviewer-pagenumber {
        & when (@skin = "material") {
            border-color: rgba(0,0,0,0.26);
            border-width: 1px;
            border-radius: 2px;
        }
    }

    .e-pdfviewer .e-pdfviewer-pagenumber:focus {
        & when (@skin = "material") {
            border-color: rgba(0,0,0,0.38);
        }
    }

    .e-pdfviewer .e-pdfviewer-waitingpopup-print {
        opacity: 1;
    }

    .e-pdfviewer .e-waitpopup-pane.e-pdfviewer-waitingpopup-print .e-text {
        color: white;
    }

    .e-pdfviewer .e-pdfviewer-texthighlight {
        background-color: #000D3D;
        opacity: 1;
        margin: -1px;
        padding: 1px;
    }

    .e-pdfviewer .e-pdfviewer-text-highlightother {
        background-color: #000D3D;
        opacity: 0.4;
        margin: -1px;
        padding: 1px;
    }
    .e-pdfviewer .e-pdfviewer-maintaincontent{
            background-color:#00f;
    }
    .e-pdfviewer .e-pdfviewer-nooccurrence {
        background-color: #FC7A7A !important;
    }

    .e-pdfviewer .e-pdfviewer-arrow::before, .e-pdfviewer .e-pdfviewer-arrow::after {
        font-family: 'ej-webfont';
        position: absolute;
        border: solid transparent;

        & when not (@skin="material") and not (@skin="office-365") {
            bottom: 70%;
        }

        & when (@skin="material") {
            bottom: 78.5%;
        }

        & when (@skin="office-365") {
            bottom: 83%;
        }
    }

    .e-pdfviewer .e-pdfviewer-progressloader {
        background-image: url("common-images/pdfviewer/preloader-pdfviewer.gif");
        background-repeat: no-repeat;
        background-position: right;
    }

     .e-tab .e-header > .e-active.e-pdfviewer-tab-li {
        & when (@skin = "flat-azure") {
            border-top-width: 1px !important;
            border-top-style: solid !important;
        }
    }

    .e-pdfviewer .e-pdfviewer-popupmenu {
        z-index: 1000;
        position: absolute;
        width: auto;
        min-width: 396px;
        display: none;
        padding-bottom: 18px;
    }

    .e-pdfviewer .e-pdfviewer-header {
        height: 23px;
        padding-top: 14px;
    }

    .e-pdfviewer .e-pdfviewer-content {
        height: auto;
        width: auto;
        padding: 14px;
        padding-bottom: 0px;
    }

    .e-pdfviewer .e-pdfviewer-innercontent {
        border: 1px solid;
        min-height: 132.08px;
        font-size: 14px;
		color: #000;
    }

    .e-pdfviewer .e-pdfviewer-closepopup, .e-pdfviewer .e-pdfviewer-closeicon {
        float: right;
        height: 20px;
        width: 20px;
    }

    .e-pdfviewer .e-pdfviewer-closepopup {
        margin-right: 14px;
    }

    .e-pdfviewer .e-pdfviewer-postbutton.e-btn {
        padding-left: 30px;
        padding-right: 30px;
        float: right;
    }

    .e-pdfviewer .e-pdfviewer-footer {
        height: auto;
        margin-top: 2px;
        margin-right: 14px;
    }

    .e-pdfviewer .e-pdfviewer-currenttime {
        padding-top: 8px;
        padding-left: 14px;
        height: 14px;
        width: 100%;
    }

    .e-pdfviewer .e-pdfviewer-username {
        margin-left: 14px;
        float: left;
        font-size: 17px;
        font-weight: bold;
    }

     .e-pdfviewer-propertiestitle.e-header {
        padding: 20px 16px;
    }

     .e-pdfviewer-propertiestitle.e-header.e-titlebar {
        border-bottom: 0px;
    }

     .e-pdfviewer-propertiestab.e-widget-content {
        padding-top: 0px;
        padding-bottom: 20px;
        padding-right: 16px;
        padding-left: 16px;
    }

     .e-pdfviewer-innertab {
        padding-bottom: 20px;
    }

     .e-pdfviewer-appearanceprop.e-content-item,  .e-pdfviewer-generalprop.e-content-item {
        padding-top: 24px;
        padding-left: 16px;
    }

     .e-tab.e-pdfviewer-innertab .e-header > .e-select.e-pdfviewer-tab-li,  .e-tab.e-pdfviewer-innertab .e-header > .e-active.e-pdfviewer-tab-li a {
        font-size: 14px;
    }
     .e-tab.e-pdfviewer-innertab>.e-header{
        border-top-style:initial;
        border-left-style:initial;
        border-right-style:initial;
    }
    .e-pdfviewer .e-toolbar.e-pdfviewer-toolbarcontainer{
        border-bottom:0px;
    }
    .e-pdfviewer .e-toolbar>ul>li.e-pdfviewer-toolbarli-label{
        padding:0px;
    }
     .e-slider-wrap.e-horizontal.e-widgete-pdfviewer-opacity-slider{
        & when not (@skin= "material") and not (@skin="office-365"){
            height:14px;
        }
    }

    .e-pdfviewer .e-pdfviewer-colorpicker {
        position: absolute;
        z-index: 11241;
    }

     .e-pdfviewer-color-picker,  .e-pdfviewer-author-inputdiv,  .e-pdfviewer-subject-inputdiv,  .e-pdfviewer-modifieddate-labeldiv {
        padding-left: 95px;
    }

     .e-pdfviewer-opacity-container,  .e-pdfviewer-subject-container,  .e-pdfviewer-modifieddate-container {
        padding-top: 16px;
    }

     .e-pdfviewer-opacity-field {
        padding-left: 45px;
        float: left;
    }

     .e-pdfviewer-slider-control {
        padding-left: 170px;
        margin-top: 5px;
    }

     .e-pdfviewer-opacity-container {
        padding-bottom: 43px;
    }

     .e-pdfviewer-modifieddate-container {
        padding-bottom: 14px;
    }

     .e-pdfviewer-color-span {
        float: left;
        padding-top: 3px;
    }

     .e-pdfviewer-opacity-span {
        float: left;
        padding-top: 1px;
    }

     .e-pdfviewer-author-span,  .e-pdfviewer-subject-span,  .e-pdfviewer-modified-labeldiv {
        float: left;
    }

     .e-inputchangeval {
        padding-left: 6px;
        border-radius: 3px;
    }

     .e-pdfviewer-subject-input,  .e-pdfviewer-author-input {
        border-radius: 3px;
        width: 75%;
    }

     .e-pdfviewer-properties-label {
        margin-left: 8px;
    }

     .e-pdfviewer-lockedcheckbox,  .e-pdfviewer-properties-label,  .e-pdfviewer-defaultCheckbox {
        margin-top: 3px;
    }

    .e-pdfviewer .e-pdfviewer-dropdown-wrapper {
        width: 30%;
    }

    .e-pdfviewer .e-pdfviewer-dropdown-arrow {
        font-size: 8px;
    }

    .e-pdfviewer .e-pdfviewer-toolbar-highlight, .e-pdfviewer .e-pdfviewer-toolbar-strikeout, .e-pdfviewer .e-pdfviewer-toolbar-underline {
        width: 30px;
    }

    .e-pdfviewer .e-pdfviewer-dropdown-arrow {
        height: 9px;
        width: 9px;

        & when (@skin = "office-365") {
            margin-top: -4px;
            margin-left: -3px;
        }

        & when (@skin = "material") {
            margin-left: -4px;
        }
    }

    .e-pdfviewer .e-pdfviewer-highlight-markup, .e-pdfviewer .e-pdfviewer-underline-markup, .e-pdfviewer .e-pdfviewer-strikeout-markup {
        & when (@skin = "office-365") {
            height: 16px;
            width: 16px;
            margin-top: -4px;
        }
    }

    .e-pdfviewer .e-pdfviewer-highlight-markup:before {
        & when not (@skin = "material") and not (@skin = "office-365") {
            content: "\e86b";
        }

        & when (@skin = "material") {
            content: "\e844";
        }

        & when (@skin = "office-365") {
            content: "\e86d";
        }
    }

    .e-pdfviewer .e-pdfviewer-underline-markup:before {
        & when not (@skin = "material") and not (@skin = "office-365") {
            content: "\e86d";
        }

        & when (@skin = "material") {
            content: "\e846";
        }

        & when (@skin = "office-365") {
            content: "\e86f";
        }
    }

    .e-pdfviewer .e-pdfviewer-strikeout-markup:before {
        & when not (@skin = "material") and not (@skin = "office-365") {
            content: "\e86c";
        }

        & when (@skin = "material") {
            content: "\e845";
        }

        & when (@skin = "office-365") {
            content: "\e86e";
        }
    }

    .e-pdfviewer .e-pdfviewer-dropdown-arrow:before {
        & when not (@skin = "material") and not (@skin = "office-365") {
            content: "\e86e";
        }

        & when (@skin = "material") {
            content: "\e847";
        }

        & when (@skin = "office-365") {
            content: "\e870";
        }
    }

    .e-pdfviewer .e-pdfviewer-closeicon:before {
        content: "\e837";
    }

    .e-pdfviewer .e-pdfviewer-arrow::before {
        content: "\e832";
    }

    .e-pdfviewer .e-pdfviewer-arrow::after {
        content: "\e831";
    }

    .e-pdfviewer .e-pdfviewer-popuptotalpage {
        /*display: table-cell;*/
        /*vertical-align: middle;*/
    }

    .e-pdfviewer .e-pdfviewer-fitwidth:before {
        content: "\e82a";
    }

    .e-pdfviewer .e-pdfviewer-disabled-fitWidthButton:before {
        content: "\e7d8";
    }

    .e-pdfviewer .e-pdfviewer-fitpage:before {
        content: "\e82b";
    }

    .e-pdfviewer .e-pdfviewer-disabled-fitPageButton:before {
        content: "\e7d7";
    }

    .e-pdfviewer .e-pdfviewer-pagefittopage:before {
        content: "\e657";
    }

    .e-pdfviewer .e-pdfviewer-emptyconetent:before {
        content: "\00a0 \00a0";
    }

    .e-pdfviewer .e-pdfviewer-print:before {
        content: "\e82c";
    }

    .e-pdfviewer .e-pdfviewer-gotonext:before {
        content: "\e827";
    }

    .e-pdfviewer .e-pdfviewer-gotonext.e-pdfviewer-disabled:before {
        content: "\e7d3";
    }

    .e-pdfviewer .e-pdfviewer-gotoprevious:before {
        content: "\e826";
    }

    .e-pdfviewer .e-pdfviewer-gotoprevious.e-pdfviewer-disabled {
        content: "\e7d2";
    }

    .e-pdfviewer .e-pdfviewer-gotofirst:before {
        content: "\e7d1";
    }

    .e-pdfviewer .e-pdfviewer-gotolast:before {
        content: "\e7d4";
    }

    .e-pdfviewer .e-pdfviewer-gotolast.e-pdfviewer-disabled {
        content: "\e7d4";
    }

    .e-pdfviewer .e-pdfviewer-gotofirst.e-pdfviewer-disabled {
        content: "\e7d1";
    }

    .e-pdfviewer .e-pdfviewer-zoomin:before {
        content: "\e829";
    }

    .e-pdfviewer .e-pdfviewer-download:before {
        content: "\e82d";
    }

    .e-pdfviewer .e-pdfviewer-zoomout:before {
        content: "\e828";
    }

    .e-pdfviewer .e-pdfviewer-find:before {
        content: "\e82e";
    }

    .e-pdfviewer .e-pdfviewer-prevfind:before {
        content: "\e82f";
    }

    .e-pdfviewer .e-pdfviewer-nextfind:before {
        content: "\e830";
    }

    .e-pdfviewer .e-pdfviewer-closefind:before {
        content: "\e837";
    }

    .e-pdfviewer .e-pdfviewer-select:before {
        & when not (@skin = "material") and not (@skin = "office-365") {
            content: "\e904";
        }

        & when (@skin = "office-365") {
            content: "\e901";
        }

        & when (@skin = "material") {
            content: "\e903";
        }
    }

    .e-pdfviewer .e-pdfviewer-scroll:before {
        & when not (@skin = "material") and not (@skin = "office-365") {
            content: "\e905";
        }

        & when (@skin = "office-365") {
            content: "\e902";
        }

        & when (@skin = "material") {
            content: "\e904";
        }
    }

    .e-pdfviewer .e-pdfviewer-sign:before {
        & when not (@skin = "material") and not (@skin = "office-365") {
            content: "\e903";
        }

        & when (@skin = "material") {
            content: "\e902";
        }

        & when (@skin = "office-365") {
            content: "\e900";
        }
    }

    .e-ddl-popup.e-box.e-popup.e-pdfviewer-ddl, .e-ddl-popup.e-box.e-popup.e-pdfviewer-ddl > .e-scroller {
        max-height: none !important;
    }

    .e-pdfviewer .e-pdfviewer-popupli {
        border: 0 none;
        float: none;
        position: relative;
        line-height: normal;
        cursor: pointer;
        list-style-type: none;
        text-align: left;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 4px;
    }

    .e-pdfviewer .e-pdfviewer-custom-menu, .e-pdfviewer .e-pdfviewer-highlight-menu {
        z-index: 1000;
        position: absolute;
        border: solid 2px #000;
        background-color: #fff;
        padding: 5px 0;
        display: none;
    }

    .e-pdfviewer .e-pdfviewer-custom-menu ol, .e-pdfviewer .e-pdfviewer-highlight-menu ol {
        padding: 0;
        margin: 0;
        list-style-type: none;
        width: auto;
        max-width: 248px;
        font-family: Verdana;
        font-size: 12px;
    }

    .e-pdfviewer .e-pdfviewer-custom-menu ol li, .e-pdfviewer .e-pdfviewer-highlight-menu ol li {
        margin: 0;
        display: block;
        list-style: none;
        padding: 5px 5px;
    }

    .e-pdfviewer .e-pdfviewer-custom-menu ol li:hover, .e-pdfviewer .e-pdfviewer-highlight-menu ol li:hover {
        background-color: #efefef;
    }

    .e-pdfviewer .e-pdfviewer-custom-menu ol li:active, .e-pdfviewer .e-pdfviewer-highlight-menu ol li:active {
        color: #fff;
    }

    .e-pdfviewer .e-pdfviewer-custom-menu ol li a, .e-pdfviewer .e-pdfviewer-highlight-menu ol li a {
        color: #000;
        text-decoration: none;
        display: block;
        padding: 0 5px;
    }

    .e-pdfviewer .e-pdfviewer-custom-menu ol li a:active, .e-pdfviewer .e-pdfviewer-highlight-menu ol li a:active {
        color: #fff;
        background-color: #000;
    }

    .e-pdfviewer .e-pdfviewer-pageCanvas, .e-pdfviewer .e-pdfviewer-secondarycanvas {
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    .e-pdfviewer .e-pdfviewer-textLayer::selection {
        background: #00f;
    }

    .e-pdfviewer .e-pdfviewer-textLayer::-moz-selection {
        background: #00f;
    }

    .e-pdfviewer .e-pdfviewer-droplet1 {
        background-color: blue;
        position: absolute;
        z-index: 1000;
        display: inline-block;
        transform: rotate(-30deg);
        width: 21px;
        height: 25px;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        display: none;
    }

    .e-pdfviewer .e-pdfviewer-droplet2 {
        background-color: blue;
        z-index: 1000;
        position: absolute;
        display: inline-block;
        transform: rotate(-30deg);
        width: 21px;
        height: 25px;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        display: none;
    }

    .e-pdfviewer .e-pdfviewer-touchCopy {
        z-index: 1000;
        position: absolute;
        background-color: white;
        padding: 5px 0;
        float: left;
        text-align: center;
        width: 65px;
    }

    .e-pdfviewer .e-pdfviewer-touchDot {
        z-index: 1000;
        position: absolute;
        margin-left: 64px;
        background-color: white;
        padding: 5px 0;
        float: right;
        text-align: center;
        width: 65px;
    }

    .e-pdfviewer .e-pdfviewer-touchcustom-menu {
        z-index: 1000;
        position: absolute;
        box-sizing: border-box;
        box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
        width: 130px;
        padding: 5px 0;
        display: none;
        height: 35px;
        background: white;
    }

    .e-pdfviewer .e-pdfviewer-annotation-note {
        height: auto;
        width: auto;
        min-height: 10px;
        min-width: 30px;
        max-width: 300px;
        font-size: 14px;
        padding: 5px;
        z-index: 10000;
    }

    .e-pdfviewer .e-pdfviewer-touchcustom-menu::after {
        content: "";
        z-index: 1000;
        position: absolute;
        width: 0;
        height: 0;
        margin-left: -9px;
        bottom: -8px;
        left: 50%;
        box-sizing: border-box;
        border: 5px solid black;
        border-color: white white;
        transform-origin: 0 0;
        transform: rotate(-45deg);
        box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
    }

    .e-pdfviewer .e-pdfviewer-touchcustom-menu div a {
        color: Black;
        text-decoration: none;
        display: block;
        padding: 0px 5px;
    }

    .e-pdfviewer .e-pdfviewer-touchcustom-menu div a:active {
        color: White;
    }

    .e-pdfviewer .e-pdfviewer-pageCanvas {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }

    .e-pdfviewer .e-dropdownlist.e-input.e-pdfviewer-ddl, .e-ddl-popup.e-pdfviewer-ddl .e-ul li {
        text-align: center;
        padding-left: 0px;
    }
}

.mixin(@widget) when (@widget = excelfilter), (@widget = none) {
    /*Excel Filter Core*/
    .e-excelfilter.e-dlgcontainer {
        min-width: 266px;
        padding: 0px;
        width: 266px;
        padding: 4px 0px 16px 0px;

        & when (@skin= "material") {
            padding: 4px 0px 8px 0px;
        }

        & when(@skin = "office-365") {
            min-width: 229px;
            width: 229px;
        }
    }

    .e-excelfilter.e-dlgcontainer,
    .e-excelfilter .e-searchcontainer,
    .e-excelfilter .e-searchcontainer input {
        box-sizing: content-box;
    }

    .e-sortasc:before {
        content: "\e714";
    }

    .e-sortdesc:before {
        content: "\e713";
    }

    .e-exceltick:before {
        content: "\e77a";
    }

    .e-excelfilter .e-menu.e-vertical .e-list > a {
        & when not (@skin= "material") {
            margin: 0px 10px 0px 15px;
        }

        & when (@skin= "office-365") {
            padding-bottom: 13px;
            padding-top: 13px;
            margin: 0;
        }
    }

    .e-excelfilter .e-menu.e-vertical .e-list > ul .e-list > a {
        padding-left: 15px;

        & when (@skin= "office-365") {
            padding-left: 0;
        }
    }

    .e-excelfilter .e-menu.e-vertical li.e-separator,
    .e-excelfilter .e-list > ul li.e-separator {
        margin: 4px 0px 4px 0px;
    }

    .e-excelfilter .e-menu.e-vertical {
        border: none;
    }

    .e-excelfilter .e-menu .e-menulink .e-chkbox-wrap {
        top: 0;
        opacity: 1;
    }

    .e-excelfilter .e-menu.e-vertical .e-exceltick::before {
        margin-left: -7px;
    }

    .e-excelfilter .e-menu.e-vertical .e-exceltick:before {
        margin-left: ~"-7px\9";
    }

    .e-excelfilter .e-searchcontainer {
        position: relative;
        margin-left: 15px;
        margin-top: 4px;

        & when (@skin= "office-365") {
            margin-top: 12px;
            margin-bottom: 20px;
            margin-left: 0;
        }
    }

    .e-excelfilter .e-searchcontainer .e-fields {
        margin: 7px 0px;

        & when (@skin= "office-365") {
            margin: 6px 0 20px;
        }
    }

    .e-excelfilter .e-checkboxlist {
        width: 234px;
        height: 130px;
        outline: none;
    }

    .e-excelfilter .e-searchbox .e-icon:before {
        display: inline-block;
    }


    .e-excelfilter .e-searchbox .e-ejinputtext {
        width: 228px;
        height: 23px;
    }

    .e-excelfilter .e-searchinput::-ms-check {
        display: none;
    }

    .e-excelfilter .e-btncontainer.e-fields {
        & when not (@skin= "material") {
            width: 170px;
            margin: 16px 0px 0px 68px;
        }

        & when (@skin= "office-365") {
            width: auto;
            margin: 0;
        }
    }

    .e-excelfilter .e-btncontainer input,
    .e-excelfilter .e-checkboxlist .e-ftrchk {
        margin-left: 10px;

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

        & when (@skin= "material") {
            margin-top: 8px;
            margin-bottom: 0px;
        }
    }

    .e-excelfilter .e-checkboxlist .e-ftrchk {
        white-space: nowrap;
    }

    .e-excelfilter .e-checkboxlist {
        padding-top: 3px;
    }

    .e-excelfilter .e-btncontainer > div {
        margin-bottom: 5px;

        & when (@skin= "office-365") {
            padding: 0 8px 0 0;
            margin-bottom: 0;
        }
    }

    .e-excelfilter .e-checkboxlist label.e-ftrchk,
    .e-excelfilter .e-searchbox .e-searchitem {
        cursor: pointer;
        line-height: 11px;
    }

    .e-excelfilter.e-dlgcustom {
        width: 341px;
        padding: 10px 14px 0;
        box-sizing: content-box;

        & when (@skin= "office-365") {
            padding-bottom: 0;
        }
    }

    .e-excelfilter.e-dlgcustom .e-dlgfields {
        padding-bottom: 14px;
        box-sizing: content-box;

        & when (@skin= "office-365") {
            padding-bottom: 20px;
        }
    }

    .e-excelfilter.e-dlgcustom .e-dlgfields:last-child {
        & when (@skin= "material") {
            padding-bottom: 0px;
        }
    }

    .e-excelfilter.e-dlgcustom fieldset.e-fieldset {
        & when not (@skin= "material") {
            padding: 14px 8px 13px;
        }

        width: auto;
        margin: 0px 2px;

        & when (@skin= "office-365") {
            padding: 0;
        }
    }

    .e-excelfilter.e-dlgcustom .e-fieldset legend {
        width: auto;
        margin-left: 3px;
        margin-bottom: 2px;
        padding: 0 3px;
    }

    .e-excelfilter.e-dlgcustom .e-optable {
        border-collapse: separate;
        border-spacing: 1px;
    }

    .e-excelfilter.e-dlgcustom .e-optable td {
        width: 27px;
        padding: 0px 5px;

        & when (@skin= "office-365") {
            padding: 15px 4px 0;
        }
    }

    .e-excelfilter.e-dlgcustom .e-optable .e-predicate td {
        padding-top: 11px;
        padding-bottom: 11px;

        & when (@skin= "material") {
            padding-right: 2px;
        }

        & when (@skin= "office-365") {
            padding-top: 15px;
            padding-bottom: 0;
        }
    }

    .e-excelfilter.e-dlgcustom .e-optable .e-predicate td:last-child {
        padding-top: 8px;

        & when (@skin= "material") {
            padding-right: 2px;
        }

        & when (@skin= "office-365") {
            padding-top: 15px;
        }
    }

    .e-excelfilter.e-dlgcustom .e-dlgfields .e-btncontainer {
        width: 100%;

        & when not (@skin= "material") {
            margin-left: 35%;
            margin-top: -5px;
        }

        & when (@skin= "material") {
            margin-left: 23%;
            /*margin-top: -8px;*/
        }

        & when (@skin= "office-365") {
            margin-left: 50%;
            margin-top: 0;
        }
    }

    .e-excelfilter.e-dlgcustom .e-dlgfields .e-predicate .e-caption {
        margin-left: 5px;
        padding-right: 13px;

        & when (@skin= "office-365") {
            padding-right: 13px;
            display: inline-block;
            vertical-align: middle;
            padding-bottom: 3px;
        }
    }

    .e-excelfilter .e-dlgcustom.e-dialog .e-predicate td div.e-radsmall,
    .e-excelfilter .e-dlgcustom.e-dialog .e-predicate td span.e-check-small {
        & when (@skin= "office-365") {
            height: 32px;
            margin-bottom: -8px;
        }
    }

    .e-excelfilter .e-hide {
        display: none !important;
    }

    .e-excelfilter .e-searchbox span {
        cursor: pointer;
        display: block;
        height: 16px;
        position: absolute;
        right: 6%;
        top: 6px;
        width: 21px;

        & when (@skin= "office-365") {
            right: 0;
        }
    }

    .e-excelfilter.e-dlgcustom .e-widget [class^="e-"],
    .e-excelfilter.e-dlgcustom.e-dialog,
    .e-excelfilter.e-dlgcustom.e-dialog [class^="e-"] {
        box-sizing: content-box;
    }

    .e-excelfilter .e-ftrchk * {
        box-sizing: content-box !important;
    }

    .e-excelfilter.e-dlgcustom .e-ddl.e-widget [class^="e-"],
    .e-excelfilter.e-dlgcustom .e-atc.e-widget [class^="e-"],
    .e-excelfilter.e-dlgcustom .e-datewidget.e-widget [class^="e-"],
    .e-excelfilter.e-dlgcustom .e-numeric.e-widget [class^="e-"],
    .e-excelfilter.e-dlgcustom .e-ejinputtext {
        box-sizing: border-box;
    }

    .e-excelfilter .e-menu .e-list .e-bghdrcolor {
        padding: 0px;
        height: 26px;
    }

    .e-excelfilter .e-menu .e-list .e-fghdrcolor {
        padding-bottom: 4px;
        height: 26px;
    }

    .e-excelfilter .e-menu.e-vertical .e-list ul li.e-bghdrcolor > a, .e-excelfilter .e-menu.e-vertical .e-list ul li.e-fghdrcolor > a {
        padding: 0px;
    }

    .e-bghdrcolor > a, .e-fghdrcolor > a {
        font-size: 13px;
    }

    .e-excelfilter .e-menu .e-list .e-valcolor {
        margin: 0 auto;
        height: 16px;
        width: 70px;
        border-style: solid;
        border-width: 2px;
        padding: 2px;
    }

    .e-excustmfltr.e-ejinputtext {
        text-indent: 0px;
    }
}

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

    .e-nb.e-nb-home {
        width: 100%;
    }

    .e-nb.e-nb-container {
        direction: ltr;
    }

    .e-nb.e-nb-layout {
        margin-right: 6px;
        vertical-align: top;
        position: absolute;
        top: 0px;
        z-index: 1000;
    }

    .e-nb-fixed, .e-nb-normal {
        overflow: visible !important;
    }

    .e-nb-fixed:not(.e-nb-type-overlay) {
        width: 100%;
    }

    .e-nb-fixed-slide {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .e-nb.e-nb-animate {
        -moz-transition: transform 250ms ease 0s;
        -o-transition: transform 250ms ease 0s;
        -webkit-transition: transform 250ms ease 0s;
        transition: transform 250ms ease 0s;
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .e-nb.e-user-select {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    .e-nb.e-nb-overlay {
        z-index: 999;
        width: 100%;
        height: 100%;
    }

    .e-nb.e-list-hdr.e-clearall {
        margin: 0;
        padding: 0;
    }

    .e-nb.e-nb-container {
        height: 100%;
        position: absolute;
        overflow: hidden;
        top: 0px;
    }

    .e-nb.e-nb-container .e-nb.e-nb-layout {
        position: relative;
    }

    .e-nb.e-nb-container.e-nb-right {
        float: right;
        right: 0;
    }
}

.mixin(@widget) when (@widget = radialmenu), (@widget = none) {
    /*------------------------------ Radial Menu Start ---------------------------------------*/
    .e-radialmenu .e-radial {
        border: 2px solid;
        height: 40px;
        border-radius: 50%;
        width: 40px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 60%;
        z-index: 1;
    }

    .e-radialmenu .e-radialslider {
        border-radius: 50%;
        top: 29px;
        left: 29px;
    }

    .e-radialmenu .e-radialimage {
        background-image: url('@{font-path}/radialmenu/radial.png');
    }

    .e-radialmenu .e-backimage {
        background-image: url('@{font-path}/radialmenu/back.png');
    }


    .e-radialmenu.e-overlow {
        overflow: hidden;
    }

    .e-radialmenu .e-itemdisabled {
        opacity: 0.4;
        pointer-events: none;
    }

    .e-radialmenu .e-pathdisabled {
        pointer-events: none;
    }

    .e-radialmenu.e-user-select {
        -webkit-user-select: none; /* Chrome all / Safari all */
        -moz-user-select: none; /* Firefox all */
        -ms-user-select: none; /* IE 10+ */ /* No support for these yet, use at own risk */
        -o-user-select: none;
        user-select: none;
        z-index: 100001;
    }

    .e-tile .e-user-select {
        -webkit-user-select: none; /* Chrome all / Safari all */
        -moz-user-select: none; /* Firefox all */
        -ms-user-select: none; /* IE 10+ */ /* No support for these yet, use at own risk */
        -o-user-select: none;
        user-select: none;
    }

    .e-radialmenu.e-abs, .e-radialmenu .e-abs {
        position: absolute;
    }

    .e-radialmenu .e-rel {
        position: relative;
    }

    .e-radialmenu.e-displaynone, .e-radialmenu .e-displaynone {
        display: none;
    }

    .e-radialmenu .e-textcolor {
        text-anchor: middle;
        font-size: 12px;
        font-family: @font-family;
    }

    .e-radialmenu .e-badgetext {
        text-anchor: middle;
        font-size: 10px;
        font-family: @font-family;
    }

    .e-radialmenu .e-radialshow {
        -moz-animation: radialshow 300ms;
        -webkit-animation: radialshow 300ms;
        -o-animation: radialshow 300ms;
        -ms-animation: radialshow 300ms;
        animation: radialshow 300ms;
    }

    @-moz-keyframes radialshow {
        from {
            -moz-transform: rotate(-70deg) scale(0.7);
        }

        to {
            -moz-transform: rotate(0deg) scale(1);
        }
    }

    @-webkit-keyframes radialshow {
        from {
            -webkit-transform: rotate(-70deg) scale(0.7);
        }

        to {
            -webkit-transform: rotate(0deg) scale(1);
        }
    }

    @-o-keyframes radialshow {
        from {
            -o-transform: rotate(-70deg) scale(0.7);
        }

        to {
            -o-transform: rotate(0deg) scale(1);
        }
    }

    @-ms-keyframes radialshow {
        from {
            -ms-transform: rotate(-70deg) scale(0.7);
        }

        to {
            -ms-transform: rotate(0deg) scale(1);
        }
    }

    @keyframes radialshow {
        from {
            transform: rotate(-70deg) scale(0.7);
        }

        to {
            transform: rotate(0deg) scale(1);
        }
    }

    .e-radialmenu .e-radialhide {
        -moz-animation: radialhide 300ms;
        -webkit-animation: radialhide 300ms;
        -o-animation: radialhide 300ms;
        -ms-animation: radialhide 300ms;
        animation: radialhide 300ms;
    }

    @-moz-keyframes radialhide {
        from {
            -moz-transform: rotate(0deg) scale(1);
        }

        to {
            -moz-transform: rotate(-70deg) scale(0.7);
        }
    }

    @-webkit-keyframes radialhide {
        from {
            -webkit-transform: rotate(0deg) scale(1);
        }

        to {
            -webkit-transform: rotate(-70deg) scale(0.7);
        }
    }

    @-o-keyframes radialhide {
        from {
            -o-transform: rotate(0deg) scale(1);
        }

        to {
            -o-transform: rotate(-70deg) scale(0.7);
        }
    }

    @-ms-keyframes radialhide {
        from {
            -ms-transform: rotate(0deg) scale(1);
        }

        to {
            -ms-transform: rotate(-70deg) scale(0.7);
        }
    }

    @keyframes radialhide {
        from {
            transform: rotate(0deg) scale(1);
        }

        to {
            transform: rotate(-70deg) scale(0.7);
        }
    }

    .e-radialmenu .e-scalehide {
        -moz-animation: scalehide 300ms;
        -webkit-animation: scalehide 300ms;
        -o-animation: scalehide 300ms;
        -ms-animation: scalehide 300ms;
        animation: scalehide 300ms;
    }

    @-moz-keyframes scalehide {
        from {
            -moz-transform: scale(1);
        }

        to {
            -moz-transform: scale(0.4);
        }
    }

    @-webkit-keyframes scalehide {
        from {
            -webkit-transform: scale(1);
        }

        to {
            -webkit-transform: scale(0.4);
        }
    }

    @-o-keyframes scalehide {
        from {
            -o-transform: scale(1);
        }

        to {
            -o-transform: scale(0.4);
        }
    }

    @-ms-keyframes scalehide {
        from {
            -ms-transform: scale(1);
        }

        to {
            -ms-transform: scale(0.4);
        }
    }

    @keyframes scalehide {
        from {
            transform: scale(1);
        }

        to {
            transform: scale(0.4);
        }
    }

    .e-radialmenu .e-scaleshow {
        -moz-animation: scaleshow 300ms;
        -webkit-animation: scaleshow 300ms;
        -o-animation: scaleshow 300ms;
        -ms-animation: scaleshow 300ms;
        animation: scaleshow 300ms;
    }

    @-moz-keyframes scaleshow {
        from {
            -moz-transform: scale(0.4);
        }

        to {
            -moz-transform: scale(1);
        }
    }

    @-webkit-keyframes scaleshow {
        from {
            -webkit-transform: scale(0.4);
        }

        to {
            -webkit-transform: scale(1);
        }
    }

    @-o-keyframes scaleshow {
        from {
            -o-transform: scale(0.4);
        }

        to {
            -o-transform: scale(1);
        }
    }

    @-ms-keyframes scaleshow {
        from {
            -ms-transform: scale(0.4);
        }

        to {
            -ms-transform: scale(1);
        }
    }

    @keyframes scaleshow {
        from {
            transform: scale(0.4);
        }

        to {
            transform: scale(1);
        }
    }
    /*------------------------------ Radial Menu End ---------------------------------------*/
}

.mixin(@widget) when (@widget = signature), (@widget = none) {
    /*------------------------------ Signature Start ---------------------------------------*/
    .e-signature {
        position: relative;
        height: 100%;
        width: 100%;
        border: 3px solid #000000;
    }

    .e-signature canvas {
        position: absolute;
        cursor: pointer;
        height: 100%;
        width: 100%;
    }

    .e-signature.e-disable {
        opacity: .35;
        filter: alpha(opacity=35);
        background-image: none;
        pointer-events: none;
    }
    /*------------------------------ Signature End ---------------------------------------*/
}

.mixin(@widget) when (@widget = listview), (@widget = none) {
    /*
==============================================
slideLeft animate
==============================================
*/
    .e-slideleft {
        animation-name: slideLeft;
        -webkit-animation-name: slideLeft;
        animation-duration: 0.23s;
        -webkit-animation-duration: 0.23s;
        animation-timing-function: ease;
        -webkit-animation-timing-function: ease;
        visibility: visible !important;
    }

    @keyframes slideLeft {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(0%);
        }
    }

    @-webkit-keyframes slideLeft {
        0% {
            -webkit-transform: translateX(100%);
        }

        100% {
            -webkit-transform: translateX(0%);
        }
    }
    /*
==============================================
slideRight Animate
==============================================
*/
    .e-slideright {
        animation-name: slideRight;
        -webkit-animation-name: slideRight;
        animation-duration: .23s;
        -webkit-animation-duration: .23s;
        animation-timing-function: ease;
        -webkit-animation-timing-function: ease;
        visibility: visible !important;
    }

    @keyframes slideRight {
        0% {
            transform: translateX(-100%);
        }

        100% {
            transform: translateX(0%);
        }
    }

    @-webkit-keyframes slideRight {
        0% {
            -webkit-transform: translateX(-100%);
        }

        100% {
            -webkit-transform: translateX(0%);
        }
    }

    .e-lv .e-grouptitle {
        font-size: 15px;
        height: 34px;
        line-height: 34px;
        padding-left: 6px;
    }

    .e-lv .e-header {
        cursor: pointer;
        height: 45px;
        padding-left: 5px;
        box-shadow: @box-shadow;
    }

     .e-htitle,  .e-btn-text {
        font-weight: bold;
        padding: 10px 10px 10px 0px;
        vertical-align: middle;
    }

    .e-lv .e-clearall {
        margin: 0;
        padding: 0;
    }

    .e-lv .e-childcontainer, .e-lv .e-list-container, .e-lv .e-childitem {
        position: relative;
    }

    .e-lv .e-list .e-chevron-right_01 {
        text-decoration: none;
    }

    .e-lv .e-htitle, .e-lv .e-btn-text {
        font-size: @font-size;
        height: 25px;
    }

    .e-lv-inputdiv .e-lv-input {
        font-style: italic;
        line-height: 1.4;
        margin: 0;
        outline: 0 none;
        padding: 8px 0;
        text-indent: 5px;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .e-lv .e-list .e-chevron-right_01 {
        display: inline-block;
        outline: 0 none;
        padding-bottom: 12px;
        padding-top: 12px;
        vertical-align: middle;
        width: 100%;
    }

    .e-lv .e-list-hdr {
        list-style: none outside none;
        padding: 0px;
    }

    .e-lv .e-list .e-lv-checkdiv {
        float: right;
    }

    .e-lv .e-list {
        line-height: normal;
        padding: 0px 15px;
        cursor: pointer;
        vertical-align: middle;
    }

    .e-lv .e-header * {
        display: table-cell;
        vertical-align: middle;
    }

    .e-lv.e-js.e-parentlv {
        overflow: hidden;
    }

    .e-lv .e-list .e-list-img {
        background-size: cover;
        float: left;
        height: 30px;
        width: 30px;
    }

    .e-lv .e-arrow .e-chevron-right_01:before {
        float: right;
        font-size: 14px;
        position: relative;
        right: 0;

        & when (@skin= "material") {
            top: 2px;
        }
    }

    .e-lv .e-list.e-margin .e-chevron-right_01 span {
        left: 10px;
        position: relative;
        top: 9px;
    }

    .e-lv .e-list .e-chevron-right_01 [class*="icon-"] {
        width: 35px;
        height: 35px;
        float: left;
    }

    .e-lv :not(.e-arrow) > .e-icon.e-chevron-right_01:before {
        display: none;
    }
}

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

    .e-colorpicker .e-buttons .e-color-code.e-error {
        border-color: #FF0000;
    }

    .e-colorwidget .e-in-wrap {
        cursor: default;
        display: inline-block;
        height: 100%;
        width: 100%;

        & when not (@skin = "office-365") {
            border-radius: 4px;
        }

        & when (@skin = "office-365") {
            border: 1px solid;
        }

        & when not (@skin = "material") {
            border: 1px solid #dbdbde;
        }
    }

    .e-colorwidget .e-in-wrap.e-tool {
        border-radius: 4px;
        cursor: default;
        height: 100%;
        width: 100%;

        & when not (@skin = "material") {
            border: 1px solid #dbdbde;
            background: #ecedee;
        }
    }

    .e-colorwidget .e-in-wrap .e-tool-icon .e-icon{
        position: absolute;
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;

        & when (@skin = "material") {
            padding: 9px 11px 2px;
        }

        & when not (@skin = "material") {
            padding: 3px 3px 2px;
        }
    }

    .e-colorwidget.e-widget {
        & when not (@skin = "material") and not (@skin = "office-365") {
            background-clip: border-box;
            box-sizing: content-box;
            border-radius: 4px;
            display: block;
            position: relative;
            height: 28px;
            width: 35px;
        }

        & when (@skin = "material") {
            height: 40px;
            width: 80px;
            font-size: 14px;
        }

        & when (@skin = "office-365") {
            height: 32px;
            width: 62px;
            font-size: 14px;
        }

        outline: 0 none;
    }

    .e-colorwidget .e-in-wrap .e-input {
        color: transparent;
    }

    .e-colorwidget .e-selected-color {
        position: absolute;
        z-index: 1;

        & when not (@skin = "material") and not (@skin = "office-365") {
            left: 4px;
            top: 4px;
        }

        & when (@skin = "material") {
            left: 28%;
            top: 29%;
        }

        & when (@skin = "office-365") {
            height: 28px;
            width: 28px;
            border: 1px solid #fff;
        }

        & when not (@skin = "office-365") {
            border-radius: 3px;
            height: 17px;
            width: 17px;
        }
    }

    .e-colorwidget .e-color-container {
        height: 100%;
        display: inline-block;
        position: relative;
        cursor: pointer;

        & when (@skin = "material"), (@skin = "office-365") {
            width: 50%;
            overflow: hidden;
        }

        & when not (@skin = "material") and not (@skin = "office-365") {
            width: 70%;
        }
    }

    .e-colorwidget .e-color-container .e-tool-icon + .e-selected-color {
        height: 3px;

        & when (@skin = "material") {
            top: 25px;
        }
        & when (@skin = "office-365") {
            top: 20px;
        }
        & when not (@skin = "material") and not (@skin = "office-365")  {
            top: 18px;
        }
    }

    .e-colorwidget .e-icon {
        display: block;
        position: absolute;
        top: 50%;
        margin-top: -6px;
        height: 12px;

        & when not (@skin = "material") and not (@skin = "office-365") {
            width: 42%;
            font-size: 10px;
        }

        & when (@skin = "material") {
            width: 50%;
            font-size: 12px;
            overflow: hidden;
        }

        & when (@skin = "office-365") {
            width: 58%;
            font-size: 10px;
        }
    }

    .e-colorwidget.e-split .e-icon:before {
        & when (@skin = "material") {
            height: 12px;
            width: 12px;
        }
    }

    .e-colorwidget .e-select {
        cursor: pointer;
        display: inline-block;
        height: 100%;
        text-align: left;

        & when not (@skin = "material") {
            width: 30%;
        }

        & when (@skin = "material"), (@skin = "office-365") {
            width: 50%;
            overflow: hidden;
        }
    }

    .e-colorwidget .e-in-wrap .e-select .e-icon {
        cursor: pointer;
    }

    .e-colorpicker.e-popup {
        outline: 0 none;
        border-style: solid;
        border-width: 1px;
        height: auto;
        overflow: hidden;

        & when (@skin= "material") {
            padding: 14px;
            width: 266px;
            box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.21);
        }

        & when (@skin= "office-365") {
            padding: 12px;
            width: 331px;
            box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.21);
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            padding: 11px;
            width: 223px;
            box-shadow: @box-shadow;
        }
    }

    .e-colorwidget.e-active .e-in-wrap .e-icon {
        & when (@skin = "material") {
            transform: rotate(180deg);
        }
    }

    .e-colorwidget .e-in-wrap .e-icon {
        & when (@skin = "material") {
            transform: rotate(0deg);
            transition: transform 300ms ease;
        }
    }

    .e-colorwidget.e-split:hover .e-in-wrap .e-color-container, .e-colorwidget.e-split:focus .e-in-wrap .e-color-container {
        & when (@skin = "material") {
            border-right-color: fade(#000, 26%);
        }
    }

    .e-colorwidget.e-split .e-in-wrap .e-color-container {
        & when (@skin = "material") {
            border-right: 0.5px solid transparent;
            box-sizing: border-box;
        }
    }

    .e-colorpicker .e-palette-color {
        position: relative;
    }

    .e-colorpicker .e-hsv-color {
        display: inline-block;
        position: relative;
        overflow: hidden;

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

        & when (@skin = "material"), (@skin = "office-365") {
            width: 80%;
        }

        & when not (@skin = "material") and not (@skin = "office-365") {
            width: 75%;
        }
    }

    .e-colorpicker .e-hsv-color .e-hsv-gradient {
        & when (@skin = "material") {
            height: 151px;
        }

        & when (@skin = "office-365") {
            height: 200px;
        }

        & when not (@skin = "material") and not (@skin = "office-365") {
            height: 146px;
        }

        width: 100%;
    }

    .e-colorpicker .e-hsv-gradient {
        background: -moz-linear-gradient(top,rgba(0,0,0,0) 0,#000 100%),-moz-linear-gradient(left,#fff 0,rgba(255,255,255,0) 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,#000)),-webkit-gradient(linear,left top,right top,color-stop(0%,#fff),color-stop(100%,rgba(255,255,255,0)));
        background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,#000 100%),-webkit-linear-gradient(left,#fff 0,rgba(255,255,255,0) 100%);
        background: -o-linear-gradient(top,rgba(0,0,0,0) 0,#000 100%),-o-linear-gradient(left,#fff 0,rgba(255,255,255,0) 100%);
        background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,#000 100%),-ms-linear-gradient(left,#fff 0,rgba(255,255,255,0) 100%);
        background: -top-linear-gradient(top,rgba(0,0,0,0) 0,#000 100%),-left-linear-gradient(left,#fff 0,rgba(255,255,255,0) 100%);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(top, startColorstr=#f00 100%),(left, endColorstr=#000 0)";
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(top, startColorstr='#00000000',(left, endColorstr='#FF000000')";
    }

    .e-colorpicker .e-hsv-color .e-color-image.e-draghandle {
        cursor: pointer;
        position: absolute;
        overflow: hidden;
        outline: 0 none;
        margin: -11px 0 0 -11px;
        width: 20px;
        height: 20px;
        background-position: 0px -876px;
        background-repeat: no-repeat;
    }

    .e-colorpicker .e-buttons .e-preview, .e-hsv-color .e-hsv-gradient {
        & when not (@skin = "office-365") {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }
    }

    .e-colorpicker .e-buttons .e-preview {
        display: inline-block;
        outline: 0 none;
        height: 100%;
        position: relative;

        & when not (@skin = "office-365") {
            border-style: solid;
            border-width: 3px;
        }

        & when (@skin = "material") {
            width: 32px;
            margin-left: 14px;
        }

        & when (@skin = "office-365") {
            width: 14%;
            top: -1px;
            padding-left: 16px;
        }

        & when not (@skin = "material") and not (@skin = "office-365") {
            width: 14%;
            top: 6px;
        }
    }

    .e-colorpicker .e-buttons .e-current, .e-colorpicker .e-buttons .e-previous {
        float: left;
        width: 100%;

        & when (@skin = "material") {
            height: 38px;
            box-sizing: border-box;
            border: 2px solid #eee;
        }

        & when (@skin = "office-365") {
            height: 37px;
        }

        & when not (@skin = "material") and not (@skin = "office-365") {
            height: 27px;
        }
    }


    .e-colorpicker .e-buttons .e-previous {
        border-top: 1px solid;
    }

    .e-colorpicker .e-buttons .e-color-code {
        border-style: solid;
        display: block;
        outline: 0 none;

        & when (@skin = "material") {
            height: 30px;
            padding-left: 8px;
            text-align: left;
            border-width: 0.5px;
            box-sizing: border-box;
            border-radius: @border-radius;
            width: 100%;
            font-size: 13px;
        }

        & when (@skin = "office-365") {
            height: 32px;
            text-align: right;
            border-width: 0.5px;
            width: 100%;
            padding: 0 8px 0 0;
        }

        & when not (@skin = "material") and not (@skin = "office-365") {
            border-width: 1px;
            height: 23px;
            padding-right: 10px;
            text-align: right;
            border-radius: 4px;
            width: 93%;
            font-size: 13px;
        }
    }

    .e-colorpicker .e-buttons .e-form {
        display: inline-block;
        position: relative;

        & when not (@skin = "material") and not (@skin = "office-365") {
            width: 81%;
            top: 7px;
        }

        & when (@skin = "material") {
            width: 80%;
            top: 80%;
        }

        & when (@skin = "office-365") {
            width: 80%;
        }
    }

    .e-colorpicker .e-buttons .e-grpbtn {
        float: left;

        & when (@skin = "material") {
            height: 32px;
            border-radius: 2px;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
            width: 100%;
        }

        & when (@skin = "office-365") {
            height: 32px;
            width: 100%;
        }

        & when not (@skin = "material") and not (@skin = "office-365") {
            height: 25px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            border-style: solid;
            border-width: 1px;
            width: 93%;
        }
    }

    .e-colorpicker .e-buttons .e-codeeditor {
        float: left;
        position: relative;

        & when (@skin= "material") {
            margin-top: 14px;
            width: 100%;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-top: 6px;
            width: 93%;
        }

        & when (@skin= "office-365") {
            margin-top: 10px;
            width: 96%;
        }
    }

    .e-colorpicker .e-buttons .e-grpbtn .e-btn.e-select {
        & when not (@skin= "material") and not (@skin= "office-365") {
            font-size: 12px;
        }

        & when(@skin = "office-365") {
            font-size: 14px;
            font-weight: 400;
        }
    }

    .e-colorpicker .e-buttons .e-color-code::-ms-clear {
        display: none;
    }

    .e-colorpicker .e-buttons .e-grpbtn .e-rgbButton, .e-colorpicker .e-buttons .e-grpbtn .e-hexButton, .e-colorpicker .e-buttons .e-grpbtn .e-hsvButton {
        border: 0px;

        & when (@skin = "material") {
            height: 32px;
            padding: 0 14px;
            width: 33.3%;
        }

        & when (@skin = "office-365") {
            height: 32px;
            padding: 0 14px;
            width: 33%;
        }

        & when not (@skin = "material") and not (@skin = "office-365") {
            height: 25px;
            border-radius: 5px;
            margin-left: 2px;
            width: 32%;
        }
    }

    .e-colorpicker .e-buttons .e-grpbtn .e-click {
        & when not (@skin = "material") {
            margin-left: 1px;
            font-weight: bold;
        }
    }

    .e-colorpicker .e-buttons .e-grpbtn .e-btn.e-select.e-click:hover {
        & when not (@skin = "material") {
            font-weight: bold;
        }
    }

    .e-colorpicker .e-slider-wrap .e-handle {
        background: transparent;
        border: 3px solid #fff;

        & when not (@skin = "material") {
            box-shadow: rgb(146, 146, 146) 0px 0px 5px inset;
        }
    }

    .e-colorpicker .e-popupWrapper .e-slider-wrap {
        display: inline-block;
        padding: 0 !important;

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-left: 7px;
            width: 13px;
            height: 151px;
        }

        & when (@skin= "material") {
            margin-left: 14px;
            width: 8px;
            height: 151px;
        }

        & when (@skin= "office-365") {
            margin-left: 17px;
            width: 11px;
            ;
            height: 200px;
        }
    }

    .e-colorpicker .e-slider-wrap .e-handle.e-select, .e-colorpicker .e-slider-wrap .e-handle.e-select:hover {
        border-radius: 12px;
        border-width: 2px;
        border-color: #fff;

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

    .e-colorpicker .e-slider-wrap .e-handle.e-select {
        & when not (@skin="material") {
            margin: 0px 0px -12px -2px !important;
        }

        & when (@skin="material") {
            margin: 0px 0px -6px 3px !important;
        }
    }

    .e-colorpicker .e-slider-wrap .e-hue.e-common {
        background: -moz-linear-gradient(bottom,#f00 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 84%,#ff0004 100%);
        background: -webkit-gradient(linear,left top,right top,color-stop(0%,#f00),color-stop(16%,#ff0),color-stop(33%,#0f0),color-stop(50%,#0ff),color-stop(67%,#00f),color-stop(84%,#f0f),color-stop(100%,#ff0004));
        background: -webkit-linear-gradient(bottom,#f00 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 84%,#ff0004 100%);
        background: -o-linear-gradient(bottom,#f00 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 84%,#ff0004 100%);
        background: -ms-linear-gradient(bottom,#f00 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 84%,#ff0004 100%);
        background: -left-linear-gradient(bottom,#f00 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 84%,#ff0004 100%);
    }

    .e-colorpicker .e-slider-wrap .e-hue.e-color-image.e-filter {
        background-position: 0px -914px;
    }

    .e-colorpicker .e-slider-wrap .e-hue, .e-colorpicker .e-slider-wrap .e-opacity {



        & when (@skin = "material") {
            width: 8px;
        }

        & when not (@skin = "office-365") {
            border-style: solid;
            border-width: 3px;
            box-shadow: 0 0 5px #929292 inset;
        }
    }

    .e-colorpicker .e-color-labels {
        position: relative;
        top: 10px;
    }

    .e-colorpicker .e-slider-wrap .e-handle {
        padding: 0px;
    }

    .e-colorpicker .e-slider-wrap.e-vertical .e-handle.e-default {
        & when (@skin = "office-365") {
            left: -2px;
        }
    }

    .e-colorpicker .e-recent-color,  .e-presetWrapper .e-presets-table .e-tablerow {
        padding: 0px;
    }

    .e-colorpicker .e-recent-color .e-colorblock.e-block.e-select {
        box-shadow: 0px 0px 3px rgba(16,189,229,0.5);
    }

    .e-colorpicker .e-recent-color .e-colorblock {
        cursor: pointer;
        display: inline-block;
        height: 28px;
        list-style: none outside none;
        outline: 0 none;
        width: 28px;

        & when (@skin = "material") {
            margin: 4px 9px 4px 2px;
            box-shadow: none;
            border-radius: 2px;
        }

        & when (@skin = "office-365") {
            margin: 6px 25px 6px 0px;
            box-shadow: none;
            border-radius: 2px;
            height: 24px;
            width: 24px;
        }

        & when not (@skin = "material") and not (@skin = "office-365") {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            margin: 2px 3px 0 2px;
            border-radius: 5px;
        }
    }

    .e-colorpicker .e-recent-color .e-colorblock.e-select {
        & when not (@skin = "material") {
            box-shadow: 0px 0px 5px 0px rgba(16,189,229,0.5);
        }

        & when (@skin = "material") {
            overflow: hidden;
        }
    }

    .e-colorpicker .e-colorblock .e-color-image.e-empty {
        & when not (@skin = "material") {
            background-position: 0px -788px;
        }

        & when (@skin = "material") {
            background-position: 2px -789px;
            border: 1px solid #e0e0e0;
            border-radius: 2px;
        }
    }

    .e-colorpicker .e-colorblock .e-color-image.e-add {
        background-position: 4px -764px;

        & when (@skin = "material") {
            overflow: hidden;
        }
    }

    .e-colorpicker .e-colorblock .e-color-image.e-add::after {
        & when (@skin = "material") {
            top: inherit;
            left: inherit;
        }
    }

    .e-colorpicker .e-colorblock .e-set {
        height: 18px;
        width: 18px;

        & when (@skin = "material") {
            border-radius: 2px;
            margin: 5px;
        }

        & when not (@skin = "material") {
            border-radius: 4px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.1) inset;
            margin: 5px 5px 0;
        }
    }

    .e-colorpicker .e-buttons .e-close_01 {
        font-size: 21px;
        height: 26px;
        position: absolute;
        width: 26px;

        & when (@skin = "material") {
            right: 10px;
            top: 7px;
        }

        & when not (@skin = "material") {
            left: -6px;
            top: 3px;
        }
    }

    .e-colorpicker .e-buttons .e-close_01:before {
        content: "\e767";
        font-family: 'ej-webfont';
        font-size: 22px;
    }

    .e-colorpicker .e-buttons .e-close_01:hover {
        cursor: pointer;
    }

    .e-colorpicker .e-colorblock div.e-empty, .e-colorpicker .e-colorblock div.e-add {
        height: 20px;
        margin: 4px;
        width: 20px;
    }

    .e-colorpicker .e-footer .e-in-wrap.e-box, .e-colorpicker .e-footer .e-in-wrap.e-box .e-splitbutton, .e-colorpicker .e-footer .e-in-wrap.e-box .e-split-btn {
        border-right: 0 none;
    }

    .e-colorpicker .e-footer .e-in-wrap.e-box .e-drp-btn.e-rht-btn {
        border-left: 0 none;

        & when (@skin= "material") {
            width: 10px;
            width: 40%;
            padding: 0;
        }

        & when (@skin= "office-365") {
            border: 0 none;
        }
    }

    .e-colorpicker .e-footer .e-split-btn.e-btn .e-btn-span {
        padding: 0px;

        & when (@skin= "material") {
            width: auto;
            margin: 0;
        }
    }

    .e-colorpicker .e-footer {
        & when (@skin= "material") {
            margin: 14px -14px 0 -14px;
            border-top: .5px solid rgba(0,0,0,.12);
            padding: 14px 14px 0;
        }

        & when (@skin= "office-365") {
            padding-top: 12px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            margin-top: 13px;
        }
    }

    .e-colorpicker .e-footerContainer {
        & when (@skin= "material") {
            padding-top: 12px;
        }

        & when (@skin= "office-365") {
            padding-top: 12px;
        }
    }

    .e-colorpicker .e-footer .e-element {
        display: inline-block;

        & when not (@skin = "material") and not (@skin = "office-365") {
            width: 85px;
            float: left;
        }

        & when (@skin = "material") {
            width: 48%;
        }

        & when (@skin = "office-365") {
            width: 50%;
        }
    }

    .e-colorpicker .e-footer .e-switcher {
        & when not (@skin = "material") and not (@skin = "office-365") {
            border-radius: 6px;
            box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
            height: 27px;
            width: 26px;
        }

        & when (@skin = "material") {
            border-radius: 2px;
            height: 30px;
            width: 30px;
        }

        & when (@skin = "office-365") {
            height: 30px;
            width: 30px;
        }

        border-style: solid;
        border-width: 0px;
        cursor: pointer;
        display: inline;
        float: left;
        margin-right: 10px;
    }

    .e-colorpicker .e-footer .e-switcher .e-color-image.e-pickerModel {
        & when (@skin = "material") {
            background-position: 3.5px -815px;
            margin: 2px 1px;
        }

        & when (@skin= "office-365") {
            margin: 5px 4px;
            background-position: 1px -816px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            background-position: 1px -816px;
            margin: 2px 1px;
        }
    }

    .e-colorpicker .e-footer .e-switcher .e-color-image.e-paletteModel {
        & when (@skin = "material") {
            margin: 3px 2px 0;
            background-position: 3px -844px;
        }

        & when (@skin= "office-365") {
            margin: 4px 3px;
            background-position: 3px -844px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            margin: 3px 2px 2px;
            background-position: 1px -846px;
        }
    }

    .e-colorpicker .e-footer .e-switcher .e-pickerModel, .e-colorpicker .e-footer .e-switcher .e-paletteModel {
        & when not (@skin = "material") {
            height: 21px;
            width: 21px;
        }

        & when (@skin = "material") {
            height: 26px;
            width: 26px;
        }
    }

    .e-colorpicker .e-footer .e-applyButton {
        position: absolute;

        & when not (@skin = "material") and not (@skin = "office-365") {
            left: 91px;
            margin-left: 8px;
        }

        & when (@skin = "office-365") {
            margin-left: -16px;
        }
    }

    .e-colorpicker .e-footer .e-split.e-widget {
        display: inline-block;

        & when not (@skin = "material") and not (@skin = "office-365") {
            height: 25px;
        }

        & when (@skin = "material") {
            width: 56px;
            height: 30px !important;
        }

        & when (@skin = "office-365") {
            width: 62px;
            height: 30px !important;
        }
    }

    .e-colorpicker .e-footer .e-split .e-padding.e-splitarrowright {
        & when (@skin = "material"), (@skin = "office-365") {
            padding: 0;
        }
    }

    .e-colorpicker .e-footer .e-cancelButton {
        float: right;
    }

    .e-colorpicker .e-footer .e-split .e-splitarrowright .e-split-btn.e-left-btn,
    .e-colorpicker .e-footer .e-split .e-splitarrowleft .e-btn.e-split-btn {
        height: 100%;
        padding: 0;

        & when (@skin = "material") {
            width: 60%;
        }
    }

    .e-colorpicker .e-footer .e-cancelButton.e-flat, .e-colorpicker .e-footer .e-applyButton.e-flat {
        & when not (@skin = "material") and not (@skin = "office-365") {
            border-radius: 5px;
            border-style: solid;
            border-width: 1px;
            font-size: 12px;
            height: 27px;
            width: 4.2em;
        }

        & when (@skin = "material") {
            text-transform: uppercase;
            padding: 0px 6px 0px 6px;
            height: 30px;
            width: 4.5em;
        }

        & when (@skin = "office-365") {
            font-size: 14px;
            font-size: 14px;
            height: 32px;
            width: 80px;
        }
    }

    .e-colorpicker .e-split.e-widget .e-splitbutton .e-color-image.e-webcolors {
        & when not (@skin = "material") {
            background-position: 0px -741px;
        }

        & when (@skin = "material") {
            background-position: 3px -737px;
        }
    }

    .e-colorpicker .e-split.e-widget .e-splitbutton .e-color-image.e-vintage {
        & when not (@skin = "material") {
            background-position: 0px -677px;
        }

        & when (@skin = "material") {
            background-position: 3px -673px;
        }
    }

    .e-colorpicker .e-split.e-widget .e-splitbutton .e-color-image.e-seawolf {
        & when not (@skin = "material") {
            background-position: 0px -613px;
        }

        & when (@skin = "material") {
            background-position: 3px -611px;
        }
    }

    .e-colorpicker .e-split.e-widget .e-splitbutton .e-color-image.e-sandy {
        & when not (@skin = "material") {
            background-position: 0px -549px;
        }

        & when (@skin = "material") {
            background-position: 3px -547px;
        }
    }

    .e-colorpicker .e-split.e-widget .e-splitbutton .e-color-image.e-pinkshades {
        & when not (@skin = "material") {
            background-position: 0px -485px;
        }

        & when (@skin = "material") {
            background-position: 3px -483px;
        }
    }

    .e-colorpicker .e-split.e-widget .e-splitbutton .e-color-image.e-moonlight {
        & when not (@skin = "material") {
            background-position: 0px -421px;
        }

        & when (@skin = "material") {
            background-position: 3px -418px;
        }
    }

    .e-colorpicker .e-split.e-widget .e-splitbutton .e-color-image.e-monochrome {
        & when not (@skin = "material") {
            background-position: 0px -357px;
        }

        & when (@skin = "material") {
            background-position: 3px -354px;
        }
    }

    .e-colorpicker .e-split.e-widget .e-splitbutton .e-color-image.e-misty {
        & when not (@skin = "material") {
            background-position: 0px -294px;
        }

        & when (@skin = "material") {
            background-position: 3px -290px;
        }
    }

    .e-colorpicker .e-split.e-widget .e-splitbutton .e-color-image.e-flatcolors {
        & when not (@skin = "material") {
            background-position: 0px -229px;
        }

        & when (@skin = "material") {
            background-position: 3px -225px;
        }
    }


    .e-colorpicker .e-split.e-widget .e-splitbutton .e-color-image.e-basic {
        & when not (@skin = "material") {
            background-position: 0px -37px;
        }

        & when (@skin = "material") {
            background-position: 3px -34px;
        }
    }

    .e-colorpicker .e-split.e-widget .e-splitbutton .e-color-image.e-candycrush {
        & when not (@skin = "material") {
            background-position: 0px -101px;
        }

        & when (@skin = "material") {
            background-position: 3px -98px;
        }
    }

    .e-colorpicker .e-split.e-widget .e-splitbutton .e-color-image.e-citrus {
        & when not (@skin = "material") {
            background-position: 0 -165px;
        }

        & when (@skin = "material") {
            background-position: 2px -163px;
        }
    }

     .e-presetWrapper .e-presets-table .e-tablerow .e-color-image#e-presets00 {
        & when not (@skin = "material") {
            background-position: 0px -704px;
        }

        & when (@skin = "material") {
            background-position: 1.5px -701px;
        }
    }

     .e-presetWrapper .e-presets-table .e-tablerow .e-color-image#e-presets01 {
        & when not (@skin = "material") {
            background-position: 0px -640px;
        }

        & when (@skin = "material") {
            background-position: 1.5px -638px;
        }
    }

     .e-presetWrapper .e-presets-table .e-tablerow .e-color-image#e-presets02 {
        & when not (@skin = "material") {
            background-position: 0px -576px;
        }

        & when (@skin = "material") {
            background-position: 1.5px -572px;
        }
    }

     .e-presetWrapper .e-presets-table .e-tablerow .e-color-image#e-presets10 {
        & when not (@skin = "material") {
            background-position: 0px -512px;
        }

        & when (@skin = "material") {
            background-position: 1.5px -510px;
        }
    }

     .e-presetWrapper .e-presets-table .e-tablerow .e-color-image#e-presets11 {
        & when not (@skin = "material") {
            background-position: 0px -448px;
        }

        & when (@skin = "material") {
            background-position: 1.5px -446px;
        }
    }

     .e-presetWrapper .e-presets-table .e-tablerow .e-color-image#e-presets12 {
        & when not (@skin = "material") {
            background-position: 0px -384px;
        }

        & when (@skin = "material") {
            background-position: 1.5px -380px;
        }
    }

     .e-presetWrapper .e-presets-table .e-tablerow .e-color-image#e-presets20 {
        & when not (@skin = "material") {
            background-position: 0px -320px;
        }

        & when (@skin = "material") {
            background-position: 1.5px -319px;
        }
    }

     .e-presetWrapper .e-presets-table .e-tablerow .e-color-image#e-presets21 {
        & when not (@skin = "material") {
            background-position: 0px -256px;
        }

        & when (@skin = "material") {
            background-position: 1.5px -254px;
        }
    }

     .e-presetWrapper .e-presets-table .e-tablerow .e-color-image#e-presets22 {
        & when not (@skin = "material") {
            background-position: 0px -192px;
        }

        & when (@skin = "material") {
            background-position: 1.5px -190px;
        }
    }

     .e-presetWrapper .e-presets-table .e-tablerow .e-color-image#e-presets30 {
        & when not (@skin = "material") {
            background-position: 0px 0px;
        }

        & when (@skin = "material") {
            background-position: 1.5px 1px;
        }
    }

     .e-presetWrapper .e-presets-table .e-tablerow .e-color-image#e-presets31 {
        & when not (@skin = "material") {
            background-position: 0px -64px;
        }

        & when (@skin = "material") {
            background-position: 1.5px -63px;
        }
    }

     .e-presetWrapper .e-presets-table .e-tablerow .e-color-image#e-presets32 {
        & when not (@skin = "material") {
            background-position: 0px -128px;
        }

        & when (@skin = "material") {
            background-position: 1.5px -126px;
        }
    }

    .e-colorpicker .e-element .e-split.e-widget .e-splitbutton .e-icon {
        & when (@skin = "material") {
            height: 15px;
            width: 17px;
        }

        & when not (@skin = "material") {
            height: 17px;
            width: 17px;
        }
    }

    .e-colorpicker .e-popupWrapper table {
        border-collapse: inherit;
        border-spacing: 10px;
    }

    .e-colorpicker .e-popupWrapper .e-gradient {
        display: inline-block;
    }

    .e-colorpicker .e-popupWrapper .e-container {
        display: block;
    }

    .e-colorpicker .e-palette-color, .e-colorpicker .e-popupWrapper .e-container {
        & when not (@skin = "material") {
            min-height: 156px;
        }
    }

    .e-colorpicker .e-palette-color.e-custom {
        min-height: 0px;
        height: auto;
    }

    .e-colorpicker .e-palette-color.e-hide, .e-colorpicker .e-popupWrapper .e-container.e-hide,  .e-colorpicker .e-footer .e-split.e-widget.e-hide, .e-colorpicker .e-footer .e-switcher.e-hide, .e-colorpicker .e-buttons .e-preview.e-hide {
        display: none;
    }

    .e-colorpicker .e-footer .e-switcher .e-splitarrowright .e-btn.e-presets.e-split-btn {
        & when (@skin = "material") {
            padding: 0 0 0px 5px;
        }
    }

    .e-colorpicker .e-row .e-item {
        border-style: solid;
        cursor: pointer;
        display: inline-block;
        margin-left: 4px;
        overflow: hidden;

        & when not (@skin = "material") and not (@skin = "office-365") {
            max-width: 14.5px;
            height: 22px;
            width: 14px;
            margin-top: 3px;
            border-width: 1px;
        }

        & when (@skin = "material") {
            max-width: 20px;
            height: 20px;
            width: 20px !important;
            border-width: 0;
        }

        & when (@skin = "office-365") {
            height: 24px;
            width: 24px !important;
            margin-left: 7px;
            box-shadow: inset 0px 0px 0px 1.5px rgba(255,255,255,1);
            box-sizing: border-box;
        }
    }

    .e-colorpicker .e-row .e-item.e-filter {
        border: 1px solid white;
        outline: 1px solid black;
    }

    .e-colorpicker .e-row:first-child {
        & when (@skin = "office-365") {
            margin-top: 0;
        }
    }

    .e-colorpicker .e-row {
        & when (@skin = "office-365") {
            margin-top: 3px;
        }
    }

    .e-colorpicker .e-row .e-item:first-child {
        margin-left: 0;
    }

    .e-colorpicker .e-item.e-state-selected {
        z-index: 100;
        position: relative;

        & when not (@skin = "material") and not (@skin = "office-365") {
            box-shadow: 0 1px 4px #000,inset 0 0 3px #fff;
        }

        & when (@skin = "material") {
            box-shadow: inset 0px 0px 0px 1.5px rgba(255,255,255,1);
            box-sizing: border-box;
        }

        & when (@skin = "office-365") {
            border: 1.3px solid #000;
        }
    }

     .e-presetWrapper .e-presets-table,  .e-presetWrapper .e-presets-table .e-tablerow {
        background: none;
    }

     .e-presetWrapper .e-presetHeader {
        & when not (@skin = "office-365") {
            margin-left: 6px;
        }

        & when (@skin = "office-365") {
            margin-left: 28px;
        }
    }

     .e-presetWrapper .e-presets-table .e-tablerow {
        & when not (@skin = "office-365") {
            margin-top: 10px;
        }

        & when (@skin = "office-365") {
            margin-top: 4px;
        }
    }

     .e-presetWrapper .e-presets-table .e-preset-row {
        display: inline-block;
        background-repeat: no-repeat !important;

        & when (@skin = "material") {
            height: 32px;
            width: 32px;
            border-radius: 2px;
        }

        & when not (@skin = "office-365") {
            margin-left: 5px;
            margin-right: 5px;
        }

        & when (@skin = "office-365") {
            margin-right: 12px;
        }

        & when not (@skin = "material") {
            height: 27px;
            width: 27px;
        }
    }

     .e-presetWrapper.e-widget.e-context {

        & when not (@skin = "office-365") {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            border: 3px solid;
            width: auto;
        }

        & when (@skin = "office-365") {
            width: auto;
            padding: 12px 0 12px 12px;
        }

        & when (@skin = "material") {
            padding: 5px;
        }
    }

    .e-colorpicker .e-element .e-btn .e-icon, .e-colorpicker .e-element .e-split-btn-div .e-icon {
        display: table-cell;
        visibility: visible;

        & when not (@skin = "material") {
            padding: 1px 0;
        }
    }

    .e-colorpicker .e-element .e-icon:before {
        display: block;

        & when not (@skin = "material") {
            height: 16px;
            width: 10px;
            margin-top: 3px;
        }

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

        & when (@skin = "material") {
            margin-top: -2px;
        }
    }

    .e-colorpicker .e-element .e-split-btn.e-rht-btn {
        height: 100%;
        width: 13px;

        & when (@skin = "office-365") {
            width: 50%;
        }
    }

    .e-colorpicker .e-element .e-split-btn.e-left-btn {
        & when not (@skin = "material") and not (@skin = "office-365") {
            width: 24px;
        }

        & when (@skin = "material") {
            width: 60%;
            padding: 0;
        }

        & when (@skin = "office-365") {
            width: 50%;
            padding: 0;
        }

        float: left;
    }

    .e-colorpicker .e-handle .e-handle-wrapper {
        height: inherit;
        width: inherit;
    }
    .e-colorpicker .e-footer .e-cancelButton.e-flat:focus, .e-colorpicker .e-footer .e-applyButton.e-flat:focus{
        & when (@skin = "material") {
        background-color: rgba(0,0,0,.12);
        }
    }
}

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

    .e-captcha .refresh {
        & when (@skin = "material") {
            margin-left: 0px;
            padding: 0 0;
            height: 28px;
            width: 28px;
            margin-top: 12px;
        }

        & when not (@skin = "material") {
            & when (@skin = "office-365") {
                margin-left: 15px;
                padding: 7px 7px;
                border-radius: 0px;
                margin-top: 15px;
                height: 32px;
            }

            & when not (@skin = "office-365") {
                margin-left: 13px;
                height: 28px;
                width: 28px;
                border-radius: 3px;
                margin-top: 12px;
            }
        }

        cursor: pointer;
    }

    .e-captcha .e-reload:before {
        content: "\e73b";

        & when (@skin = "office-365") {
            height: 18px;
            width: 18px;
            margin-top: 3px;
        }
    }

    .e-captcha .e-captcha.e-reload, .e-captcha .e-captcha.e-volume-up {
        & when (@skin = "office-365") {
            padding: 0px;
        }
    }

    .e-captcha .e-volume-up:before {
        content: "\e73c";

        & when (@skin = "office-365") {
            width: 18px;
            height: 18px;
            margin-top: 3px;
        }

        & when not (@skin = "office-365") {
            margin: -3px;
            padding-top: 3px;
        }

        & when (@skin = "material") {
            padding-top: 0px;
        }
    }

    .e-captcha .audio {
        & when (@skin = "material") {
            margin-left: 0px;
            padding: 0 0;
            height: 28px;
            width: 28px;
        }

        & when not (@skin = "material") {
            & when (@skin = "office-365") {
                margin-left: 15px;
                padding: 7px 7px;
                border-radius: 0px;
                height: 32px;
            }

            & when not (@skin = "office-365") {
                margin-left: 13px;
                height: 28px;
                width: 28px;
                border-radius: 3px;
            }
        }

        cursor: pointer;
        direction: rtl;
        display: block;
        margin-top: 0px;
    }

    .e-captcha .imagecontainer {
        border-radius: 3px;
        float: left;
        height: 100%;
    }

    .e-captcha .spanText {
        color: red;
        float: left;
        margin-top: 4px;
    }

    .e-captcha .validTextBox {
        padding-left: 5px;
        width: 185px;

        & when (@skin = "material") {
            border-radius: 0px;
            height: 23px;
            margin-top: 12px;
        }

        & when not (@skin = "material") {
            & when (@skin = "office-365") {
                border-radius: 0px;
                margin-top: 15px;
                margin-bottom: 20px;
                height: 30px;
            }

            & when not (@skin = "office-365") {
                border-radius: 3px;
                height: 23px;
                margin-top: 12px;
            }
        }
    }

    .e-captcha .error {
        border: 1px solid red;
    }

    .e-captcha .e-validTextBox {
        direction: rtl;
        margin-left: 13px;
        padding-right: 5px;
        width: 190px;

        & when (@skin = "office-365") {
            border-radius: 0px;
            margin-top: 15px;
            margin-bottom: 20px;
            height: 30px;
        }

        & when not (@skin = "office-365") {
            border-radius: 3px;
            height: 23px;
            margin-top: 11px;
        }
    }

    .e-captcha .e-refresh {
        cursor: pointer;

        & when (@skin = "office-365") {
            border-radius: 0px;
            padding: 7px 7px;
            margin-left: 10px;
            margin-top: 15px;
            height: 32px;
        }

        & when not (@skin = "office-365") {
            border-radius: 3px;
            height: 28px;
            width: 28px;
            margin-top: 12px;
            margin-left: 13px;
        }
    }

    .e-captcha .e-audio {
        cursor: pointer;
        display: block;

        & when (@skin = "office-365") {
            border-radius: 0px;
            padding: 7px 7px;
            margin-left: 10px;
        }

        & when not (@skin = "office-365") {
            border-radius: 3px;
            height: 28px;
            width: 28px;
            margin-top: 1px;
            margin-left: 13px;
        }
    }

    .e-captcha .e-imageContainer {
        border-radius: 3px;
        float: right;
    }

    .e-captcha .error {
        border: 1px solid red;
    }
}

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

    .e-kanban .e-table, .e-kbnadapt-editdlg .e-table {
        border: 0 none;
        border-collapse: separate;
        margin-top: 0;
        table-layout: fixed;
        width: 100%;
    }

    ej-kanban {
        display: block;
    }

    .e-kanban .e-widget [class^="e-"], .e-kbnadapt-editdlg .e-widget [class^="e-"] {
        box-sizing: border-box;
    }

    .e-kanban [class^="e-"] {
        box-sizing: content-box;
    }

    .e-kanban .e-kanbancontent .e-rowcell, .e-kbnadapt-editdlg .e-rowcell {
        vertical-align: top;
        display: table-cell;
    }

    .e-kanban .e-kanbanheader tr {
        & when (@skin= "material") {
            /*material*/
            height: 64px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            height: 60px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            height: 45px;
        }
    }

    .e-kanban .e-kanbanheader .e-headercell {
        & when (@skin= "office-365") {
            /*office-365*/
            padding-left: 15px;
        }
    }

    .e-kanban .e-kanbanheader .e-headercell, .e-kanban .e-kanbancontent .e-rowcell, .e-kbnadapt-editdlg .e-rowcell {
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .e-kanban.e-kanbanscroll {
        border-style: solid;
        border-width: 1px;
    }

    .e-kanban .e-swimlanerow div {
        display: inline-block;
    }

    .e-kanban .e-swimlanerow .e-slkey {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
            font-size: 16px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            font-family: @font-family;
            font-size: 17px;
            font-weight: 100;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            font-size: 18px;
            font-weight: 500;
        }
    }

    .e-kanban .e-print.e-ul {
        float: right;
        margin-left: 7px;
    }

    .e-kanban .e-printlist {
        padding: 9px;
    }

    .e-kanban .e-printicon {
        padding: 0px !important;
    }

    .e-kanban.e-rtl .e-kanbantoolbar .e-print.e-ul {
        float: left !important;
    }

    .e-kanban .e-swimlanerow .e-slcount {
        font-size: 12px;
        padding: 8px;
    }

    .e-kanban .e-freezeswimlanerow {
        position: relative;
        overflow: hidden;
        opacity: 0.9;
        z-index: 10001;
    }

    .e-kanban .e-freezeswimlanerow .e-rowcell.e-shrink {
        opacity: 0.9;
        cursor: default;
    }

    .e-kanban .e-freezeswimlanerow > div {
        position: relative;

        & when (@skin= "material") {
            /*material*/
            margin-left: 65px;
            top: 4px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            margin-left: 60px;
            top: 6px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            margin-left: 40px;
            top: 6px;
        }
    }

    .e-kanban .e-freezeswimlanerow .e-freeze-table {
        position: relative;
        height: 12px;
        border-spacing: 8px 0;
    }

    .e-kanban .e-scrollcss {
        padding-right: 17px;
    }

    .e-kanban .e-hscrollcss {
        border-right-style: @border-type;
        border-right-width: @border-size;
    }

    .e-kanban, .e-kanban .e-kanbanheader .e-headercell, .e-kanban .e-kanbanheader .e-headercell-hover, .e-kanban .e-kanbancontent .e-rowcell, .e-kbnadapt-editdlg .e-rowcell {
        border-collapse: collapse;
    }

    .e-kanban .e-kanbancontent .e-rowcell .e-targetclonemulti .e-columnkey .e-text {
        position: relative;
        text-align: center;
        opacity: 0.5;
    }

    .e-kanban .e-kanbancontent .e-rowcell .e-targetclonemulti {
        position: relative;
    }


    .e-kanban {
        font-family: @font-family;
        font-size: @font-size;
        border-top: none;
    }

    .e-kanban .e-form-container {
        border: 1px solid;
    }

    .e-kanban .e-form-titlebar {
        font-size: 16px;

        & when (@skin= "material") {
            /*material*/
            height: 64px;
            padding: 20px 24px 0px 24px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding: 20px 15px 8px 25px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding: .7em;
        }
    }

    .e-kanban .e-externalform {
        padding: 1.5em 1em 0em 1em;
        padding-bottom: 70px;

        & when (@skin= "material") {
            /*material*/
            padding-right: 24px;
            padding-left: 24px;
            padding-top: 0px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding-right: 25px;
            padding-left: 33px;
            padding-top: 0px;
        }
    }

    .e-kanban .e-form-titlebar .e-externalform-icon {
        display: inline-block;
        float: right;
        cursor: pointer;

        & when (@skin= "office-365") {
            /*office-365*/
            padding: 5px 8px;
        }
    }

    .e-kanban .e-externaledit.e-cancel {
        & when (@skin= "office-365") {
            /*office-365*/
            font-size: 16px;
        }
    }

    .e-kanban .e-dialog .e-titlebar .e-title {
        & when (@skin="office-365") {
            /*office-365*/
            font-size: 21px;
            font-weight: 100;
        }
    }

    .e-kanban .e-dialog-icon:before {
        & when (@skin="office-365") {
            /*office-365*/
            font-size: 16px;
            height: 16px;
            width: 16px;
            margin-top: 4px;
        }
    }

    .e-kanban .e-dialog .e-dialog-icon {
        & when (@skin="office-365") {
            /*office-365*/
            height: 32px;
            width: 32px;
            padding: 0px;
        }
    }

    .e-kanban .e-externalformedit .e-label {
        width: 80px;
        text-align: left !important;

        & when (@skin= "material") {
            /*material*/
            padding-top: 8px;
            width: 100%;
        }
    }

    .e-kanban .e-form-title {
        & when (@skin="office-365") {
            /*office-365*/
            font-size: 21px;
        }
    }

    .e-kanban .e-externalformedit div > label {
        font-weight: normal;
    }

    .e-kanban .e-kanbantoolbar .e-icon.e-searchfind:before, .e-kanban .e-kanbantoolbar .e-icon.e-cancel:before {
        & when (@skin= "office-365") {
            height: 16px;
            width: 16px;
            margin-left: -8px;
        }
    }

    .e-kanban .e-externalformedit .e-editform-btn {
        float: right;

        & when (@skin= "material") {
            /*material*/
            padding: 10px 0px 10px 0;
        }

        & when not (@skin= "material") {
            /*other*/
            padding: 20px 0px 20px 0;
        }
    }

    .e-kanban .e-externalformedit form div {
        display: inline-block;

        & when (@skin= "office-365") {
            padding-top: 0px;
        }

        & when not (@skin="office-365") {
            padding-top: 5px;
        }
    }

    .e-kanban .e-externalformedit .e-externalrow {
        & when (@skin= "material") {
            /*material*/
            width: 50%;
            padding-right: 0px;
            display: table-cell;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding-right: 20px;
            padding-top: 20px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            padding-right: 30px;
        }
    }


    .e-kanban.e-rtl .e-externalformedit .e-externalrow {
        padding-left: 86px;
        padding-right: 0px;
    }

    .e-kanban.e-rtl .e-externalformedit .e-label {
        text-align: right !important;
    }

    .e-kanban.e-rtl .e-form-titlebar .e-externalform-icon {
        float: left;
    }

    .e-kanban .e-dialog, .e-kbnadapt-editdlg .e-dialog, .e-kbnadapt-editdlg {
        border-collapse: separate;
    }

    .e-kanban .e-kanbancontent, .e-kanban .e-kanbanheader .e-headercell, .e-kanban .e-kanbanheader .e-headercelldiv, .e-kanban .e-kanbancontent .e-rowcell, .e-kanban .e-headercontent, .e-kanban .e-kanbanheader, .e-kanban .e-kanbancard {
        overflow: hidden;
    }

    .e-kanbanheader {
        clear: right;
    }

    .e-kanban .e-dialog .e-grid .e-icon::before,
    .e-kanbandialog .e-grid .e-icon::before {
        display: inline-block !important;
    }

    .e-kanban .e-dialog .e-addedrow .e-grid table, .e-kanban .e-dialog .e-editedrow .e-grid table, .e-kanbandialog .e-addedrow .e-grid table, .e-kanbandialog .e-editedrow .e-grid table {
        border-spacing: 0px !important;
    }

    .e-kanban .e-widget .e-grid [class^="e-"] {
        box-sizing: content-box !important;
    }

    .e-kanban > .e-kanbancontent > div > .e-table, .e-kanban > .e-kanbanheader > div > .e-table {
        border-spacing: 8px 0;
    }

    .e-kanban tr td:first-child, .e-kanban tr th:first-child {
        border-left: 0 none;
    }

    .e-kanban .e-kanbanheader .e-headercell {
        height: 30px;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
    }

    .e-kanban .e-kanbanheader .e-headercelldiv {
        border: 0 none;
        display: block;
        text-align: left;
    }

    .e-kanban .e-totalcard, .e-kanban .e-limits {
        height: 20px;
        line-height: 20px;
    }

    .e-kanban .e-kanbanheader .e-headercell .e-totalcount, .e-kanban .e-kanbancontent .e-rowcell .e-shrinkcount {
        font-size: 15px;
    }

    .e-kanban .e-kanbanheader .e-headercell .e-totalcard, .e-kanban .e-kanbancontent .e-rowcell .e-shrinklabel {
        font-size: 19px;
        font-weight: normal;
        padding: 0 0.3em;
    }

    .e-kanban .e-kanbancontent .e-rowcell .e-shrinklabel {
        display: inline-block;
        margin-top: -2px;
    }

    .e-kanban .e-kanbanheader .e-headercell .e-limits {
        font-size: 14px;
        font-weight: normal;
        margin-top: 1px;
    }

    .e-kanban .e-kanbanheader .e-headercell .e-minlimit, .e-kanban .e-kanbanheader .e-headercell .e-maxlimit {
        font-size: 12px;
        font-weight: normal;
        padding-top: 2px;
    }

    .e-kanban .e-icon::before {
        display: inline-block;
    }

    .e-kanban .e-kanbanheader .e-headercell .e-limits, .e-kanban.e-rtl .e-headercelldiv {
        float: right;
    }

    .e-kanban.e-rtl .e-headercell .e-limits {
        float: left;
    }

    .e-kanban .e-kanbanheader .e-headercelldiv {
        font-size: 17px;
        font-weight: 600;
        float: left;
        width: 100%;
        margin-top: -4px;
    }

    .e-kanban .e-kanbanheader .e-stackedHeaderCell {
        font-size: 17px;
        font-weight: 600;
        text-align: center;

        & when (@skin= "office-365") {
            /*office-365*/
            font-family: @font-family;
        }
    }

    .e-kanban .e-kanbanheader .e-headercelldiv .e-headerdiv {
        float: left;

        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
            font-size: 16px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            font-family: @font-family;
            font-size: 17px;
        }
    }

    .e-kanban .e-icon::before {
        display: inline-block;
    }

    .e-kanban tr td:first-child, .e-kanban tr th:first-child {
        border-left: 0 none;
    }

    .e-kanban .e-lastrowcell {
        border-bottom-width: @border-size;
    }

    .e-kanban .e-hide {
        display: none !important;
    }

    .e-kanban {
        height: auto;
        font-family: @font-family;
        outline: 0 none;
    }

    .e-kanban .e-kanbancard .e-primarykey {
        width: 70%;
        font-size: 14px;

        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            font-family: @font-family;
            font-weight: 700;
        }

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

    .e-kanban .e-kanbancard .e-expandcollapse {
        float: right;
        cursor: pointer;
        margin-right: -8px;
        margin-top: -5px;
        padding: 4px 3px 8px 6px;
    }

    .e-kanban .e-kanbancard .e-cardheader div {
        display: inline-block;
    }

    .e-kanban .e-kanbancontent .e-rowcell .e-targetclone, .e-kanban .e-kanbancontent .e-rowcell .e-targetdragclone {
        position: relative;

        & when (@skin= "office-365") {
            /*office-365*/
            margin: 15px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            margin: 12px;
        }
    }

    .e-kanban .e-kanbancard .e-cardheader {
        & when (@skin= "material") {
            /*material*/
            padding: 16px 6px 8px 16px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding: 16px 6px 16px 16px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            padding: 6px 6px 6px 10px;
        }
    }

    .e-kanban .e-kanbancard .e-image {
        width: 100%;
        height: 100%;
    }

    .e-kanban .e-kanbancard .e-tags {
        display: table-cell;

        & when (@skin= "material") {
            /*material*/
            padding: 12px 0 6px 0;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding: 24px 0 6px 0;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            padding: 5px 0 10px 0;
        }
    }

    .e-kanban .e-kanbancard .e-imagecell {
        vertical-align: top;
        width: 54px;
    }

    .e-kanban .e-cardheader .e-cardtext {
        font-size: 11px;
        padding-left: 4px;
        padding-top: 12px;
    }

    .e-kanban .e-kanbancard .e-cardheader .e-text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        & when (@skin= "office-365") {
            /*office-365*/
            font-size: 13px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            font-size: 11px;
        }
    }

    .e-kanban .e-kanbantouchbar {
        position: absolute;
        font-weight: normal;
        z-index: 99999;
    }

    .e-kanban .e-kanbantouchbar .e-content {
        border-width: 1px;
        border-style: solid;
    }

    .e-kanban .e-kanbantouchbar .e-content {
        border-radius: 4px;
        font-size: 14px;
        padding: 4px 4px;
    }

    .e-kanban .e-kanbantouchbar span {
        display: inline-block;
        height: 16px;
        cursor: pointer;
        padding: 4px;
        border: 1px solid transparent;
        width: 16px;
    }

    .e-kanban .e-kanbantouchbar .e-tail:before, .e-kanban .e-kanbantouchbar .e-tail:after {
        border: 10px solid rgba(0, 0, 0, 0);
        content: "";
        height: 0;
        left: 8px;
        position: absolute;
        width: 0;
    }

    .e-kanban .e-kanbantouchbar .e-downtail:after {
        top: 34px;
    }

    .e-kanban .e-cardtouch:before {
        content: "\e701";
    }

    .e-kanban .e-kanbantoolbar li a {
        text-decoration: none;

        & when (@skin="office-365") {
            /*office-365*/
            padding: 0px 20px 0px 20px;
        }

        & when not (@skin="office-365") {
            /*other*/
            padding: 7px 8px;
        }
    }

    .e-kanban .e-kanbantoolbar .e-toolbartext {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
            font-size: 13px;
        }

        & when (@skin="office-365") {
            /*office-365*/
            font-family: @font-family;
            font-size: 14px;
            line-height: 30px;
            font-weight: 600;
        }

        & when not (@skin="office-365") {
            /*other*/
            line-height: 26px;
        }

        min-height: 26px;
        min-width: 26px;
    }

    .e-kanban {
        border-top: medium none;
        height: auto;
    }

    .e-kanban .e-columnrow .e-kanbancard {
        border-width: @border-size;
    }

    .e-kanban .e-kanbancard {
        cursor: all-scroll;
        border-width: @border-size;
        border-style: @border-type;

        & when (@skin= "material") {
            /*material*/
            position: relative;
            border-radius: 4px;
            margin: 12px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            border-radius: 0px;
            margin: 15px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            border-radius: 4px;
            margin: 12px;
        }
    }

    .e-kanban .e-draggedcard .e-kanbancard {
        margin: 0;

        & when (@skin= "office-365") {
            /*office-365*/
            border-radius: 0px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            border-radius: 4px;
        }
    }

    .e-kanban .e-kanbancard .e-tag {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
            font-size: 11px;
            padding: 2px 8px 2px 8px;
            margin-right: 5px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding: 0px 8px 0px 8px;
            height: 20px;
            font-family: @font-family;
            font-size: 12px;
            margin-right: 6px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            font-size: 12px;
            padding: 1px 7px 3px 7px;
            margin-right: 5px;
        }

        overflow: hidden;
        border-radius: 2px;
        display: inline-block;
        margin-bottom: -4px;
    }

    .e-kanban .e-kanbancard.e-cardselection {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-style: @border-type;
    }

    .e-kanban .e-draggedcard {
        float: left;

        & when (@skin= "office-365") {
            /*office-365*/
            box-shadow: 3px 3px 14px 3px rgba(0,0,0,0.2);
        }
    }

    .e-kanban .e-draggedcard .e-dragmultiple {
        padding: 6px 6px 8px 3px;
        text-align: center;
        font-size: 14px;
        display: table-cell;
        vertical-align: middle;
        width: 90px;
    }

    .e-kanban-context li div {
        float: left;
        width: 16px;
        height: 16px;
        margin-left: 3px;
        margin-top: 3px;
    }

    .e-kanban-context {
        min-width: 180px;
        font-size: 11px;
    }

    .e-kanban-context .e-kanbancontext.e-icon {
        & when (@skin= "material") {
            /*material*/
            padding-left: 8px;
        }

        & when not (@skin= "material") {
            /*other*/
            padding-left: 5px;
        }
    }

    .e-kanban-context .e-visiblecolumn .e-list > a {
        overflow: visible;
    }

    .e-kanban-context.e-menu.e-context.e-js .e-list > a.e-menulink {
        & when (@skin= "material") {
            /*material*/
            padding: 3px 24px 3px 35px;
        }

        & when not (@skin= "material") {
            /*other*/
            padding: 1px 18px 1px 32px;
        }
    }

    .e-kanban-context .e-icon.e-contextprint:before, .e-kanban .e-printicon:before {
        content: "\e80f";
    }

    .e-kanban-context .e-icon.e-contextadd:before {
        content: "\e802";
    }

    .e-kanban-context .e-icon.e-contextdelete:before {
        content: "\e800";
    }

    .e-kanban-context .e-icon.e-contextedit:before {
        content: "\e801";
    }

    .e-kanban-context .e-icon.e-contexttop:before {
        content: "\e7ff";
    }

    .e-kanban-context .e-icon.e-contextbottom:before {
        content: "\e7fe";
    }

    .e-kanban-context .e-icon.e-contextleft:before {
        content: "\e7fa";
    }

    .e-kanban-context .e-icon.e-contextright:before {
        content: "\e7fb";
    }

    .e-kanban-context .e-icon.e-contextup:before {
        content: "\e7fd";
    }

    .e-kanban-context .e-icon.e-contextdown:before {
        content: "\e7fc";
    }

    .e-kanban-context .e-icon.e-contextswimlane:before {
        content: "\e7f9";
    }

    .e-kanban-context .e-icon.e-contexthide:before {
        content: "\e7f8";
    }

    .e-kanban-context .e-icon.e-contextvisible:before {
        content: "\e7f7";
    }

    .e-kanban .e-kanbancontent {
        outline: medium none;
        font-weight: @content-font-weight;
    }

    .e-kanban .e-cardcontent .e-cardtable {
        width: 100%;
        table-layout: fixed;
        border-spacing: 0px;
    }

    .e-kanban .e-kanbancard .e-card_image {
        height: 45px;
        width: 45px;
        float: right;
        border: 1px solid;

        & when (@skin= "material") {
            /*material*/
            margin-right: 16px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            margin-right: 16px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            margin-right: 8px;
        }
    }

    .e-kanban .e-kanbantoolbar.e-toolbar, .e-kbntoolbar-body.e-toolbar {
        & when (@skin= "material") {
            /*material*/
            padding: 9px 0;
            border-width: 0 0 1px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding: 0;
            height: 40px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding: 15px 0;
            border-width: 0 0 1px;
        }

        border-style: solid;
        font-size: 12px;
        box-shadow: none;
    }

    .e-kanban.e-kanbanscroll .e-kanbantoolbar {
        & when (@skin = "office-365") {
            /*office-365*/
            border-top: none;
            border-left: none;
        }
    }

    .e-kanban .e-kanbantoolbar .e-printlist.e-tooltxt {
        & when (@skin = "office-365") {
            /*office-365*/
            margin: 4px 15px 4px 0px !important;
            width: 32px !important;
        }
    }

    .e-kanban .e-toolbar .e-customtoolbar .e-tooltxt a {
        & when (@skin = "office-365") {
            /*office-365*/
            padding-left: 9px;
        }
    }

    .e-kanban .e-toolbar .e-customtoolbar .e-tooltxt {
        & when (@skin = "office-365") {
            /*office-365*/
            margin-left: 15px !important;
            padding-top: 2px;
            width: 32px;
        }
    }

    .e-kanban .e-kanbantoolbar .e-printicon:before {
        & when (@skin = "office-365") {
            height: 12px;
            width: 12px;
            margin-top: 8px;
            margin-left: 9px;
        }
    }

    .e-kanban .e-kanbantoolbar li {
        margin: 0 0.4em;
    }

    .e-kanban .e-kanbantoolbar .e-quickfilter .e-text {
        font-weight: normal;
        margin-bottom: auto;

        & when (@skin= "office-365") {
            /*office-365*/
            padding-left: 7px;
        }
    }

    .e-kanban .e-kanbantoolbar .e-quickfilter {
        border: 0 none !important;

        & when (@skin= "office-365") {
            /*office-365*/
            background: none !important;
        }
    }

    .e-kanban .e-slexpand:before, .e-kanban .e-toggle-expand:before {
        content: "\e804";
    }

    .e-kanban .e-slcollapse:before {
        & when (@skin= "material") {
            /*material*/
            content: "\e804";
        }

        & when not (@skin= "material") {
            /*other*/
            content: "\e80b";
        }
    }

    .e-kanban .e-toggle-collapse:before {
        content: "\e803";
    }

    .e-kanban .e-toggle-expand:before, .e-kanban .e-toggle-collapse:before {
        font-size: 17px;
    }

    .e-kanban .e-columnrow .e-rowcell .e-toggle-header {
        cursor: pointer;
    }

    .e-kanban .e-columnrow .e-rowcell .e-toggle-header div {
        display: inline-block;
    }

    .e-kanban .e-columnrow .e-rowcell .e-toggle-header .e-toggle-icon {
        padding-right: 12px;
    }

    .e-kanban .e-columnrow .e-rowcell .e-togglekey {
        padding-left: 12px;
    }

    .e-kanban .e-kanbancontent .e-rowcell .e-togglekey div {
        margin-left: 0px;
    }

    .e-kanban .e-columnrow .e-rowcell .e-toggle-key {
        font-weight: normal;
    }

    .e-kanban .e-columnrow .e-rowcell .e-togglekey {
        font-size: 14px;
        font-weight: 500;
    }

    .e-kanban .e-columnrow .e-rowcell .e-toggle-count {
        float: right;
    }

    .e-kanban .e-columnrow .e-rowcell .e-toggle-header {
        margin: 12px 12px 12px 12px;
        font-size: 17px;
    }

    .e-kanban.e-rtl .e-columnrow .e-rowcell .e-toggle-header .e-toggle-icon {
        padding-right: 0px;
        padding-left: 10px;
    }

    .e-kanban.e-rtl .e-columnrow .e-rowcell .e-togglekey {
        padding-right: 12px;
    }

    .e-kanban.e-rtl .e-columnrow .e-rowcell .e-togglekey div {
        margin-left: 0px;
        margin-right: 0px;
    }

    .e-kanban.e-rtl .e-columnrow .e-rowcell .e-toggle-count {
        float: left;
    }

    .e-kanban .e-columnrow .e-rowcell .e-togglekey .e-kanbancard {
        font-weight: normal;
    }

    .e-kanban .e-slcollapse {
        & when (@skin= "material") {
            /*material*/
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }
    }

    .e-kanban .e-icon.e-slexpand, .e-kanban .e-icon.e-slcollapse {
        & when (@skin= "office-365") {
            /*office-365*/
            font-size: 12px;
            height: 32px;
            width: 32px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            font-size: 16px;
        }
    }

    .e-kanban .e-limits > div {
        padding-right: 8px;
    }

    .e-kanban .e-clexpand:before {
        content: "\e68b";
        position: relative;
        left: 2px;

        & when (@skin= "material") {
            /*material*/
            top: 2px;
        }
    }

    .e-kanban .e-clcollapse:before {
        & when (@skin= "material") {
            /*material*/
            content: "\e68b";
            position: relative;
            top: -1px;
        }

        & when not (@skin= "material") {
            /*other*/
            content: "\e69b";
        }
    }

    .e-kanban .e-slexpand, .e-kanban .e-slcollapse {
        height: 20px;
        text-align: center;
        width: 22px;

        & when (@skin= "office-365") {
            /*office-365*/
            padding-right: 0px;
            padding-top: 0px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            padding-right: 2px;
            padding-top: 2px;
        }
    }

    .e-kanban.e-rtl .e-slexpand, .e-kanban.e-rtl .e-slcollapse {
        padding-left: 2px;
    }

    .e-kanban .e-dialog .e-rowcell {
        & when (@skin= "material") {
            /*material*/
            float: left;
        }
    }

    .e-kanbanwaitingpopup.e-waitpopup-pane {
        background-color: transparent !important;
    }

    .e-kanban .e-kanban-editdiv {
        text-align: right;

        & when (@skin= "material") {
            /*material*/
            padding: 18px 0px 14px 0px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding-bottom: 0px;
            padding-top: 9px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding-bottom: 17px;
            padding-top: 10px;
        }
    }

    .e-kanban .e-emptycard {
        white-space: nowrap;
    }

    .e-kanban .e-image.e-no-user {
        background: rgba(0, 0, 0, 0) url("@{font-path}/kanban/nouser.svg") no-repeat scroll 0 0;
    }

    .e-kanban .e-columnrow .e-rowcell {
        height: 200px;
        min-height: 200px;
        line-height: 1.5;
        padding: 0 1px;
        position: relative;
    }

    .e-kanban .e-kanbancard .e-cardheader .e-icon {
        font-size: 11px;
    }

    .e-kanban .e-cardexpand:before {
        content: "\e821";
        font-size: 5px;

        & when (@skin= "material") {
            /*material*/
            height: 16px;
            width: 16px;
        }
    }

    .e-kanban .e-cardcollapse:before {
        & when (@skin= "material") {
            /*material*/
            content: "\e821";
            margin: 5px;
        }

        & when not (@skin= "material") {
            /*other*/
            content: "\e820";
        }

        font-size: 5px;
    }

    .e-kanban .e-cardcollapse {
        & when (@skin= "material") {
            /*material*/
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
    }

    .e-kanban .e-slexpand {
        & when (@skin= "material") {
            /*material*/
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

    .e-kanban .e-slcollapse, .e-kanban .e-slexpand {
        & when (@skin= "material") {
            /*material*/
            -webkit-transition: -webkit-transform 0.3s ease-in-out;
            transition: -webkit-transform 0.3s ease-in-out;
            transition: transform 0.3s ease-in-out;
            transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
        }
    }

    .e-kanban .e-slcollapse:after, .e-kanban .e-slexpand:after, .e-kanban .e-columnadd:after {
        & when (@skin= "material") {
            /*material*/
            .e-kanbanripple-style();
        }
    }

    .e-kanban .e-slcollapse:not(:active):after, .e-kanban .e-slexpand:not(:active):after, .e-kanban .e-columnadd:not(:active):after {
        & when (@skin= "material") {
            /*material*/
            .e-kanbanripple-animation();
        }
    }

    .e-kanbanripple-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: 40%;
        height: 40%;
        left: 30%;
        top: 30%;
    }

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

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

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

    .e-kanban.e-rtl {
        direction: rtl;
    }

    .e-kanban.e-rtl .e-headercelldiv .e-headerdiv {
        float: right;
    }

    .e-kanban.e-rtl .e-icon.e-clexpand {
        float: left;
        padding: 4px 0;
        position: relative;
    }

    .e-kanban.e-rtl .e-rowcell.e-dragged:first-child {
        border-left-width: 1px !important;
    }

    .e-kanban.e-rtl td:last-child {
        padding-left: 1px !important;
    }

    .e-kanban .e-columnrow .e-rowcell.e-dropping {
        border-style: dashed;
        border-width: 1px;
        padding: 0 !important;
    }

    .e-kanban .e-widget .e-select .e-icon::before, .e-kanban .e-dialog .e-icon::before, .e-kanban form .e-icon::before,
    .e-kanbandialog .e-icon::before, .e-kanbandialog form .e-icon::before {
        display: block;
    }

    .e-kanban .e-dialog .e-addedrow table, .e-kanban .e-dialog .e-editedrow table, .e-kanban .e-externalform table,
    .e-kanbandialog .e-addedrow table, .e-kanbandialog .e-editedrow table {
        border-collapse: separate;
        border-spacing: 11px;
    }

    .e-kanban .e-dialog .e-addedrow label, .e-kanban .e-dialog .e-editedrow label,
    .e-kanbandialog .e-addedrow label, .e-kanbandialog .e-editedrow label {
        display: inline;
        font-weight: normal;
        margin-bottom: 0;
        white-space: nowrap;

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

        & when not (@skin= "office-365") {
            /*other*/
            font-size: 14px;
        }
    }

    .e-kanban .e-dialog .e-save, .e-kanban .e-dialog .e-cancel {
        font-size: 14px;
        font-weight: normal;
    }

    .e-kanban .e-dialog .e-kanbantextarea {
        text-indent: 0px;

        & when not (@skin= "material") {
            /*other*/
            width: auto;
        }
    }

    .e-kanban .e-shrinkcol {
        width: 50px !important;
    }

    .e-kanban .e-swimlanerow .e-rowcell .e-slexpandcollapse {
        & when (@skin= "material") {
            /*material*/
            padding: 8px 14px 8px 24px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding: 4px 8px 4px 15px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding: 10px 10px 10px 3px;
        }

        cursor: pointer;
    }

    .e-kanban .e-swimlanerow {
        & when (@skin= "material") {
            /*material*/
            height: 48px;
        }

        & when (@skin="office-365") {
            /*office-365*/
            height: 40px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            height: 45px;
        }
    }

    .e-kanban .e-dialog-content {
        & when (@skin="office-365") {
            /*office-365*/
            padding: 8px 25px 20px 25px;
        }
    }

    .e-kanban .e-icon.e-clexpand {
        float: right;
    }

    .e-kanban .e-kanbanheader .e-headercell .e-clcollapse {
        text-align: center;
        width: 100%;
        padding: 14px 0;
        cursor: pointer;
    }

    .e-kanban .e-kanbanheader .e-headercell .e-clexpand {
        padding: 10px 0px 10px 0;
        cursor: pointer;
        text-align: center;
    }

    .e-kanban .e-kanbancard .e-text {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
            font-size: 14px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            font-family: @font-family;
            font-size: 13px;
        }

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

    .e-kanban .e-shrinkheader {
        font-size: 17px;
        font-weight: 600;
        display: inline-block;
        width: 100%;
        white-space: nowrap;
    }

    .e-kanban .e-shrinkheader.IE .e-shrinklabel {
        padding-top: 10px;
    }

    .e-kanban .e-shrinkheader.IE {
        writing-mode: tb-rl;
        padding-top: 15px;
    }

    .e-kanban .e-shrinkheader.IE .e-shrinkcount {
        display: inline-block;
        padding-right: 5px;
        position: relative;
        right: -2px;
    }

    .e-kanban .e-shrinkheader:not(.IE) {
        transform: rotate(90deg) translate(25px);
        -webkit-transform: rotate(90deg) translate(25px);
    }

    .e-kanban .e-shrink {
        cursor: pointer;
    }

    .e-kanban .e-shrinkcount {
        display: inline-block;
    }

    .e-kanban div.e-error .e-toparrow {
        left: 10%;
        display: block;
    }

    .e-kanban .e-error div.e-field-validation-error {
        border-radius: 7px;
        font-size: 14px;
        white-space: normal;
        padding: 7px;
    }

    .e-kanban div.e-error,
    .e-kanban .e-kanbanpopup {
        position: absolute;
        font-weight: normal;
        z-index: 99999;
    }

    .e-kanban .e-kanbantoolbar .e-ejinputtext, .e-kbnadapt-editdlg .e-ejinputtext {
        text-indent: 0px;

        & when (@skin= "office-365") {
            /*office-365*/
            height: 28px;
            font-family: @font-family;
            font-size: 14px;
            font-weight: 400;
        }

        & when not (@skin= "office-365") {
            /*other*/
            height: 33px;
        }
    }

    .e-kanban .e-searchdiv {
        position: relative;
    }

    .e-kanban .e-kanbantoolbar .e-search {
        float: right !important;
        display: flex;
        padding: 0px;
        height: 35px;
    }


    .e-kanban .e-kanbantooltip {
        & when (@skin= "office-365") {
            /*office-365*/
            font-size: 12px;
            margin-top: 15px;
            padding: 5px;
            margin-left: 5px;
        }

        & when (@skin= "material") {
            /*material*/
            font-size: 10px;
            margin-top: 14px;
            padding: 5px 8px 5px 8px;
            border-radius: 2px;
            margin-left: 0px;
        }

        & when not (@skin= "office-365") and not (@skin = "material") {
            /*other*/
            margin-left: 5px;
            font-size: 10px;
            margin-top: 15px;
            padding: 5px;
        }

        opacity: 25;
        width: auto;
    }

    .e-kanban .e-toolbaricons.e-cancel {
        & when (@skin = "office-365") {
            /*office-365*/
            padding-right: 23px;
        }
    }

    .e-kanban .e-kanbantoolbar .e-toolbaricons.e-searchfind, .e-kanban .e-kanbantoolbar .e-toolbaricons.e-cancel {
        & when (@skin= "office-365") {
            /*office-365*/
            height: 28px;
            padding-top: 6px;
            padding-right: 19px;
            width: 13%;
        }

        & when not (@skin= "office-365") {
            /*other*/
            height: 33px;
            padding-top: 9px;
            padding-right: 23px;
        }
    }

    .e-kanban .e-slexpand:before, .e-kanban .e-slcollapse:before {
        & when (@skin ="office-365") {
            /*office-365*/
            margin: 4px;
            padding-top: 6px;
        }
    }

    .e-kanban .e-clcollapse::before, .e-kanban .e-clexpand::before {
        & when (@skin ="office-365") {
            /*office-365*/
            height: 24px;
            width: 24px;
            padding-right: 12px;
        }
    }

    .e-kanban .e-kanbantoolbar li.e-search.e-tooltxt {
        & when (@skin= "office-365") {
            /*office-365*/
            margin: 0px !important;
            height: 30px !important;
        }
    }

    .e-kanban .e-kanbantoolbar .e-searchbar.e-ul {
        float: right;

        & when (@skin= "material") {
            /*material*/
            margin-right: 20px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            margin: 5px 15px 5px 0px;
            height: 30px;
        }
    }

    .e-kanban.e-rtl .e-kanbantoolbar .e-searchbar.e-ul {
        float: left;
    }

    .e-kanban .e-search {
        & when (@skin= "office-365") {
            /*office-365*/
            width: 230px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            width: 190px;
        }
    }

    .e-kanban .e-kanbantooltip {
        position: absolute;
        z-index: 105;
        display: block;
    }

    .e-kanban.e-rtl .e-toolbaricons.e-searchfind, .e-kanban.e-rtl .e-toolbaricons.e-cancel {
        padding-left: 21px;
        padding-right: 10px;
        line-height: 17px;
    }

    .e-kanban.e-rtl .e-rowcell .e-limits {
        text-align: left;
    }

    .e-kanban .e-kanbancontent .e-rowcell .e-limits {
        text-align: right;
        margin: 12px 12px 0px 12px;
        line-height: 12px;
        height: 12px;
    }

    .e-kanban .e-kanbancontent .e-rowcell .e-limits > div:last-child {
        padding-right: 0px;
    }

    .e-kanban .e-kanbancontent .e-rowcell .e-limits > div {
        display: inline-block;
    }

    .e-kanban div.e-error .e-errortail {
        height: 0;
        position: relative;
        width: 0;
        border: 10px solid transparent;
        border-top: 5px;
    }

    .e-kanban .e-kanbancard.e-collapsedcard .e-cardheader {
        border-bottom: 0 none;
        padding-right: 0px;
    }

    .e-kanban.e-rtl .e-shrinkheader:not(.IE) {
        transform: rotate(90deg) translate(60px);
        -webkit-transform: rotate(90deg) translate(60px);
    }

    .e-kanban.e-rtl .e-swimlanerow .e-rowcell .e-slexpandcollapse {
        padding: 10px 3px 10px 10px;
    }

    .e-kanban.e-rtl div.e-error .e-toparrow {
        right: 10%;
    }

    .e-kanban.e-rtl .e-kanbancard .e-expandcollapse {
        float: left;
        margin-left: -7px;
    }

    .e-kanban.e-rtl .e-kanbancard .e-card_image {
        float: left;
    }

    .e-kanban.e-rtl td:last-child, .e-kanban.e-rtl th:last-child {
        border-left: 0 none;
    }

    .e-kanban.e-rtl .e-kanbanheader .e-headercelldiv, .e-kanban.e-rtl .e-kanbanheader .e-headercell, .e-kanban.e-rtl .e-totalcard, .e-kanban.e-rtl .e-minlimit, .e-kanban.e-rtl .e-maxlimit {
        text-align: right;
    }

    .e-kanban.e-rtl .e-dialog .e-dialog-content td.e-rowcell {
        text-align: right !important;
    }

    .e-kanban.e-rtl .e-dialog .e-dialog-content td.e-label {
        border-left: 0 none;
    }

    .e-kanban.e-rtl .e-kanbantoolbar.e-toolbar ul {
        float: right;
    }

    .e-kanban.e-rtl .e-kanbantoolbar.e-toolbar ul li {
        margin: 0.7em 0.7em 0.7em 0;
    }

    .e-kanban.e-rtl .e-scrollcss {
        padding-left: 18px;
        padding-right: 0;
    }

    .e-kanban.e-rtl.e-kanbanscroll .e-headercontent {
        border-right: 0px none;
        border-left: @border-size @border-type;
    }

    .e-kanban.e-rtl .e-columnrow td.e-dropping:first-child {
        border-left-style: dashed;
        border-left-width: 1px;
        padding-left: 0 !important;
    }

    .e-kanban .e-kanbanheader .e-headercell div {
        display: inline-block;
    }

    .e-kanban .e-headercontent.e-vscroll-area {
        border: none;
    }

    .e-kanban .e-kanbantoolbar.e-js ul > li.e-tooltxt {
        margin-bottom: 1px;
    }

    .e-kanban .e-customtoolbarseparator {
        & when (@skin= "office-365") {
            /*office-365*/
            margin-right: 0px;
            padding-right: 0px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            margin-right: 6px;
            padding-right: 14px;
        }
    }

    .e-kanban .e-customaddbutton {
        border-style: dashed;
        height: 36px;
        margin: 12px;
        padding-right: 1px;
        border-width: 1px;
        cursor: pointer;
    }

    .e-kanban .e-customtoolbar {
        & when (@skin= "office-365") {
            /*office-365*/
            padding-left: 0px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            padding-left: 18px;
        }
    }

    .e-kanban .e-columnadd {
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
        padding-top: 8px;
        display: block;
    }

    .e-kanban .e-columnadd:before {
        content: "\e802";
    }

    .e-kanban .e-icon.e-externaledit.e-cancel:before {
        content: "\e800";

        & when (@skin= "office-365") {
            /*office-365*/
            height: 16px;
            width: 16px;
        }
    }

    .e-kanban .e-externalform .e-ddl .e-select {
        & when (@skin= "office-365") {
            /*office-365*/
            width: 25px;
        }
    }

    .e-kanban .e-externalform .e-rowcell > span {
        & when (@skin= "office-365") {
            /*office-365*/
            margin-right: 0px;
            margin-left: 0px;
        }
    }

    .e-kanban .e-kanbandialog table td.e-label, .e-kbnadapt-editdlg .e-kanbandialog table td.e-label {
        & when (@skin= "material") {
            /*material*/
            text-align: left;
            text-align: left;
            float: left;
            width: 100%;
        }

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

    .e-kanban .e-kanbandialog .e-kanban-editdiv .e-save, .e-kanban .e-kanbandialog .e-kanban-editdiv .e-cancel, .e-kanban .e-externalform .e-editform-btn .e-save, .e-kanban .e-externalform .e-editform-btn .e-cancel {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family !important;
        }

        width: 100px;
    }

    .e-kanban .e-kanbandialog .e-kanban-editdiv .e-cancel, .e-kanban .e-externalform .e-editform-btn .e-cancel {
        & when (@skin= "office-365") {
            margin-right: 0px;
            margin-left: 8px;
        }

        & when not (@skin= "office-365") {
            margin-left: 15px;
            margin-right: 13px;
        }
    }

    .e-kanban .e-freezeswimlanerow.e-swimlanerow .e-slkey {
        margin-left: 3px;

        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
            font-size: 16px;
        }
    }

    .e-kanban-context .e-checkbox {
        & when (@skin= "material") {
            /*material*/
            top: 4px !important;
            padding-left: 3px !important;
        }

        & when not (@skin= "material") {
            /*other*/
            top: 0px !important;
            padding-left: 0px !important;
        }
    }

    .e-kanban .e-kanbanheader .e-headercell.e-toggleonly .e-clexpand {
        cursor: pointer;
        right: 0;
        text-align: center;
        position: absolute;

        & when (@skin= "material") {
            /*material*/
            top: 10px;
            height: 24px;
            width: 24px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            top: 10px;
            height: 24px;
            width: 24px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            top: 4px;
        }
    }

    .e-kanban .e-kanbanheader .e-headercell .e-totalcard, .e-kanban .e-kanbanheader .e-headercell .e-limits {
        float: left;
    }

    .e-kanban.e-rtl .e-headercell .e-totalcard, .e-kanban.e-rtl .e-headercell .e-limits {
        float: right;
    }

    .e-kanban .e-kanbanheader .e-headercell .e-totalcard, .e-kanban .e-kanbanheader .e-headercell .e-totalcount, .e-kanban .e-kanbanheader .e-headercell .e-limits {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
            font-size: 12px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            font-family: @font-family;
            font-size: 12px;
        }

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

    .e-kanban .e-kanbanheader .e-headercell .e-totalcard {
        & when (@skin= "office-365") {
            /*office-365*/
            padding: 8px 3px 0px 0px;
        }

        & when not (@skin="office-365") {
            /*other*/
            padding: 0px 3px 0px 0px;
        }
    }

    .e-kanban .e-limits > div {
        padding-left: 3px;
        padding-right: 3px;
    }

    .e-kanban .e-kanbanheader .e-headercell .e-limits {
        & when (@skin= "office-365") {
            /*office-365*/
            padding-top: 8px;
        }

        & when not (@skin="office-365") {
            /*others*/
            margin-top: 0px;
        }
    }

    .e-kanban .e-kanbancard .e-bottom-triangle {
        & when (@skin= "material") {
            /*material*/
            border-bottom: 24px solid;
            border-left: 24px solid transparent;
        }

        & when (@skin= "office-365") {
            border-bottom: 24px solid;
            border-left: 24px solid transparent;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            border-bottom: 20px solid;
            border-left: 20px solid transparent;
        }

        float: right;
    }

    .e-kanban.e-rtl .e-kanbancard .e-bottom-triangle {
        border-right: 20px solid transparent;
        border-left: none;
        float: left;
    }

    .e-kanban .e-kanbancard .e-contentcell {
        vertical-align: top;
    }

    .e-kanban .e-kanbancard .e-image, .e-kanban .e-kanbancard .e-card_image {
        border-radius: 50%;
    }

    .e-kanban.e-rtl td.e-trainglecell {
        padding-left: 0px !important;
    }

    .e-kanban .e-kanbancard .e-cardcontent {
        & when (@skin= "material") {
            /*material*/
            padding: 12px 0 0 16px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding: 0 0 0 16px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding: 6px 0 0 10px;
        }

        margin-right: -1px;
    }

    .e-kanban.e-rtl .e-kanbancard .e-cardcontent {
        padding: 6px 6px 0px 0px;
        margin-right: 0px;
    }

    .e-kanban.e-rtl .e-kanbancard .e-card_image {
        margin-left: 6px;
    }

    .e-kanban.e-rtl .e-kanbancard .e-cardheader .e-bottom-triangle {
        border-left: none;
    }

    .e-kanban .e-kanbancard.e-collapsedcard .e-cardheader .e-cardcollapse {
        margin-right: 6px;
    }

    .e-kanban.e-rtl .e-kanbancard.e-collapsedcard .e-cardheader {
        padding-left: 0px;
        padding-right: 6px;
    }

    .e-kanban .e-kanban-draggedcard {
        display: none;
    }

    .e-kanban .e-kanbancard .e-trainglecell {
        vertical-align: bottom;
        padding: 0px;
    }

    .e-kanban .e-kanbanheader .e-headercell.e-toggle-withoutcount .e-headercelldiv {
        height: 100%;
    }

    .e-kanban .e-kanbanheader .e-headercell.e-toggle-withoutcount .e-clexpand {
        padding: 0px;
    }

    .e-kanban .e-kanbanheader .e-headercell.e-toggle-withcount .e-clexpand {
        & when (@skin="office-365") {
            /*office-365*/
            margin-top: -21px;
            padding: 3px 8px 41px 8px;
        }

        & when not (@skin="office-365") {
            /*other*/
            padding: 3px 0 6px 0;
        }
    }

    .e-kanban .e-kanbancard .e-expandcollapse div {
        position: relative;
        top: -6px;
        left: -5px;
    }

    .e-kanban.e-rtl .e-kanbancard .e-expandcollapse div {
        left: -5px;
    }

    .e-kanban .e-columnheader.e-header-withcount .e-shrinkcol .e-clcollapse {
        position: relative;
        top: 8px;
    }

    .e-kanban.e-rtl .e-headercell .e-clexpand:before {
        left: -4px;
    }

    .e-kanban.e-rtl .e-headercell .e-totalcard {
        padding: 0 0px 0px 3px;
    }

    .e-kanban.e-rtl .e-headercell.e-toggleonly .e-clexpand {
        top: 11px;
        right: auto;
        left: 0;
    }

    .e-kanban .e-ejinputtext, .e-kbnadapt-editdlg .e-ejinputtext {
        outline: none;
        vertical-align: baseline;
        border: 1px solid;
    }

    .e-kanban.e-onlycontent .e-kanbancard .e-contentcell {
        width: 99%;
    }

    .e-kanban.e-rtl .e-kanbancard.e-collapsedcard .e-cardheader .e-cardcollapse {
        left: 3px;
    }

    .e-kanban .e-columnheader.e-header-withcount .e-headercell:not(.e-toggle-withcount):not(.e-toggle-withoutcount) .e-headercelldiv {
        margin-top: -22px;
    }

    .e-kanban {
        touch-action: none;
    }

    .e-kanban .e-dialog .e-titlebar, .e-kbnadapt-editdlg.e-dialog .e-titlebar {
        & when (@skin= "material") {
            /*material*/
            padding: 0 24px;
            height: 64px;
        }
    }

    .e-kanban .e-dialog .e-titlebar span.e-title, .e-kbnadapt-editdlg.e-dialog .e-titlebar span.e-title {
        & when (@skin= "material") {
            /*material*/
            padding-top: 20px;
        }
    }

    .e-kanban .e-dialog .e-titlebar .e-icon.e-close, .e-kbnadapt-editdlg.e-dialog .e-titlebar .e-icon.e-close {
        & when (@skin= "material") {
            /*material*/
            top: 24px;
            left: 4px;
        }
    }

    .e-kanban .e-externalform .e-cancel {
        & when (@skin= "material") {
            /*material*/
            margin-right: 0px;
        }
    }

    .e-kanban .e-externalformedit .e-rowcell {
        & when (@skin= "material") {
            /*material*/
            padding-bottom: 12px;
        }
    }

    .e-kanban .e-externalformedit div > label {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
            font-size: 13px;
        }

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

    .e-kanban .e-dialog div > label {
        & when (@skin= "office-365") {
            /*office-365*/
            font-size: 12px;
        }
    }

    .e-kanban .e-ejinputtext, .e-kbnadapt-editdlg .e-ejinputtext {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
            font-size: 13px;
            border-width: 0px 0px 1px 0px;
            text-indent: 0px;
            box-shadow: none !important;
        }
    }

    .e-kanban .e-kanbantoolbar .e-quickfilter label.e-toolbartext {
        & when (@skin= "material") {
            /*material*/
            margin-left: 5px;
        }
    }

    .e-kanban .e-kanbantoolbar .e-search {
        & when (@skin= "material") {
            /*material*/
            border-width: 0px 0px 2px 0px;
        }
    }

    .e-kanban .e-kanbantoolbar .e-searchdiv .e-ejinputtext, .e-kanban .e-emptycard, .e-kbnadapt-editdlg .e-ejinputtext, .e-kanbanfilter-window .e-clearfilter.e-btn {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family !important;
            font-size: 13px;
        }
    }

    .e-kanban .e-kanbantoolbar li.e-tooltxt {
        & when (@skin= "material") {
            /*material*/
            margin: 0px 8px 1px 12px;
            border: none;
        }

        & when (@skin="office-365") {
            /*office-365*/
            margin: 4px 0px 0px 8px !important;
            padding: 0px;
            height: 32px !important;
        }
    }

    .e-kanban .e-kanbantoolbar .e-toolbaricons.e-searchitem {
        & when (@skin= "material") {
            /*material*/
            border-left: none;
            padding-right: 25px;
        }
    }

    .e-kanban .e-kanbancard .e-cardtable tr:first-child {
        & when (@skin= "office-365") {
            /*office-365*/
            padding-right: 16px;
        }
    }

    .e-kanban .e-externalform .kanbanform div.e-externalrow:nth-child(even) {
        & when (@skin= "material") {
            /*material*/
            float: right;
        }
    }

    .e-kanban .e-externalform .kanbanform div.e-externalrow:nth-child(odd) {
        & when (@skin= "material") {
            /*material*/
            float: left;
        }
    }

    .e-kanban .e-externalform {
        & when (@skin= "material") {
            /*material*/
            padding-right: 24px;
            padding-left: 24px;
        }
    }

    .e-kanban .e-externalform .kanbanform {
        & when (@skin= "material") {
            /*material*/
            display: table;
        }
    }

    .e-kanban .e-dialog .e-titlebar {
        & when (@skin= "material") {
            /*material*/
            box-shadow: none;
            border: none;
        }

        & when (@skin="office-365") {
            /*office-365*/
            padding: 20px 25px 20px 25px;
            border: 0px !important;
            box-shadow: none;
        }
    }

    .e-kanban .e-dialog .e-dialog-scroller.e-scroller, .e-kbnadapt-editdlg .e-dialog .e-dialog-scroller.e-scroller {
        & when (@skin= "material") {
            /*material*/
            border: none;
        }
    }

    .e-kanban .e-kanbandialog .e-kanban-editdiv .e-cancel, .e-kbnadapt-editdlg .e-kanbandialog .e-kanban-editdiv .e-cancel {
        & when (@skin= "material") {
            /*material*/
            margin-right: 0px;
        }
    }

    .e-kanban .e-dialog .e-addedrow table, .e-kanban .e-dialog .e-editedrow table, .e-kbnadapt-editdlg .e-dialog .e-addedrow table, .e-kbnadapt-editdlg .e-dialog .e-editedrow table {
        & when (@skin= "material") {
            /*material*/
            border-spacing: 0px;
        }
    }

    .e-kanban .e-dialog .e-addedrow, .e-kanban .e-dialog .e-editedrow, .e-kbnadapt-editdlg .e-dialog .e-addedrow, .e-kbnadapt-editdlg .e-dialog .e-editedrow {
        & when (@skin= "material") {
            /*material*/
            padding: 8px 24px;
        }
    }

    .e-kanban .e-kanbandialog.e-widget-content, .e-kbnadapt-editdlg .e-kanbandialog.e-widget-content {
        & when (@skin= "material") {
            /*material*/
            padding: 0px;
            box-shadow: none;
        }
    }

    .e-kanban .e-swimlanerow .e-rowcell .e-slexpandcollapse .e-icon:before {
        & when (@skin= "material") {
            /*material*/
            position: relative;
            top: 1px;
        }
    }

    .e-kanban .e-kanbantoolbar.e-toolbarspan {
        & when (@skin= "material") {
            /*material*/
            height: auto;
            border-bottom: none;
        }
    }

    .e-kanban .e-kanbantoolbar > .e-horizontal.e-ul {
        & when (@skin= "material") {
            /*material*/
            margin-top: 0px;
            margin-bottom: 0px;
        }
    }

    .e-kanban .e-kanbantoolbar.e-js ul > li.e-tooltxt {
        & when (@skin= "material") {
            /*material*/
            margin-right: 0px;
        }
    }

    .e-kanban .e-kanbantoolbar .e-searchbar {
        & when (@skin= "material") {
            /*material*/
            margin-top: 10px;
        }
    }

    .e-kbnadapt-editdlg .e-kanbandialog .e-save {
        & when (@skin= "material") {
            /*material*/
            margin-top: 10px;
        }
    }

    .e-kbnadapt-editdlg .e-kanbandialog .e-save, .e-kbnadapt-editdlg .e-kanbandialog .e-cancel {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family !important;
            width: 100% !important;
            margin-left: 0px;
            margin-right: 0px;
        }
    }

    .e-kanban.e-responsive .e-kanbantoolbar .e-searchbar.e-ul {
        & when (@skin= "material") {
            /*material*/
            margin-right: 0px;
            border: none;
        }
    }

    .e-kanban .e-kanbandialog .e-ddl input.e-input, .e-kbnadapt-editdlg .e-ddl input.e-input {
        & when (@skin= "material") {
            /*material*/
            padding: 0px;
        }
    }

    .e-kanban.e-js .e-swimlanerow .e-slexpand, .e-kanban.e-js .e-swimlanerow .e-slcollapse {
        & when (@skin= "material") {
            /*material*/
            position: relative;
            top: 4px;
        }
    }

    .e-kanban.e-responsive .e-kanbantoolbar.e-toolbar .e-swimlane-ddl, .e-kbntoolbar-body.e-toolbar .e-swimlane-ddl {
        & when (@skin= "material") {
            /*material*/
            width: 150px;
        }
    }

    .e-kanban.e-js .e-ddl.e-widget .e-input, .e-kanban.e-js .e-ddl .e-select, .e-kbnadapt-editdlg .e-ddl.e-widget .e-input, .e-kbnadapt-editdlg .e-ddl .e-select {
        & when (@skin= "material") {
            /*material*/
            box-shadow: none;
        }
    }

    .e-kanban .e-dialog .e-rowcell, .e-kanbandialog table td.e-rowcell {
        & when (@skin= "material") {
            /*material*/
            padding-bottom: 24px;
        }
    }

    .e-kanban.e-js .e-dialog .kanbanform td.e-rowcell.e-last-rowcell, .e-kanbandialog table td.e-rowcell.e-last-rowcell {
        & when (@skin= "material") {
            padding-bottom: 0px !important;
        }
    }

    .e-kanban .e-externalform .e-editedrow, .e-kanban .e-externalform .e-editedrow {
        & when (@skin= "material") {
            padding: 8px 0px;
        }
    }

    .e-kbnadapt-editdlg .e-kanbandialog .e-save {
        & when (@skin= "material") {
            margin-top: 18px;
        }
    }

    .e-kanban.e-js .e-toolbar.e-js ul > li.e-tooltxt, .e-kbntoolbar-body.e-toolbar.e-js ul > li.e-tooltxt {
        & when (@skin= "material") {
            width: auto;
            height: auto;
        }
    }

    .e-kanban.e-js .e-toolbar > .e-horizontal.e-ul:first-child, .e-kbntoolbar-body.e-toolbar.e-js > .e-horizontal.e-ul:first-child {
        & when (@skin= "material") {
            margin: 0;
            padding: 0;
        }
    }

    .e-kanban .e-swimlanerow .e-slkey, .e-kanban .e-swimlanerow .e-slcount {
        & when (@skin= "material") {
            position: relative;
            top: 4px;
        }
    }

    .e-kanban.e-js .e-kanbantoolbar .e-kbnclearfl-icon:before {
        & when (@skin= "material") {
            content: "\e751";
            position: relative;
            left: 3px;
        }
    }

    .e-kanban .e-toolbar > ul > li {
        & when (@skin= "material") {
            padding: 5px;
        }
    }

    .e-kanban .e-kanbandialog input.e-ejinputtext, .e-kbnadapt-editdlg input.e-ejinputtext {
        & when (@skin= "material") {
            line-height: 32px;
        }
    }

    .e-kanban .e-dialog.e-dialog-wrap.e-shadow, .e-kbnadapt-editdlg.e-dialog.e-dialog-wrap.e-shadow {
        & when (@skin= "material") {
            opacity: 1;
            -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
        }

        & when (@skin="office-365") {
            -webkit-transition: all 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
            transition: all 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
            animation: kanbandialog-fadein 0.167s linear;
        }
    }

    .e-kanban .e-dialog.e-dialog-wrap.e-shadow.e-kbndialog-transitionclose, .e-kbnadapt-editdlg.e-dialog.e-dialog-wrap.e-shadow.e-kbndialog-transitionclose {
        & when (@skin= "material") {
            opacity: 0;
            -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            -webkit-transform: translate(0, 100%) scale(0.2);
            transform: translate(0, 100%) scale(0.2);
        }
    }

    .e-kanban .e-kanbancard:after {
        & when (@skin="material") {
            content: '';
            visibility: hidden;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            box-sizing: border-box;
            left: 50%;
            width: 1px;
            height: 1px;
            background-color: transparent;
            border-width: 1px;
        }
    }

    @keyframes kanbandialog-fadein {
        0% {
            opacity: 0;
            transform: scale(1);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .e-kanban.e-js .e-kanbantoolbar .e-quickfilter.e-tooltxt.e-active:after {
        & when (@skin= "material") {
            /*material*/
            animation: none;
        }
    }

    .e-kanban-context.e-menu.e-context .e-list > a.e-menulink .e-kanbancontext.e-icon {
        & when (@skin= "material") {
            /*material*/
            margin: 0 4px 0 0;
            position: absolute;
        }
    }

    .e-kanban-context.e-menu.e-context .e-list > a.e-menulink .e-icon.e-arrowhead-right {
        & when (@skin= "material") {
            /*material*/
            margin-right: 5px;
            top: 20%;
        }
    }

    .e-kanban.e-js .e-kanbanheader.e-slheader .e-headercell, .e-kanban.e-swimlane-responsive.e-js .e-columnrow .e-rowcell {
        & when (@skin= "material") {
            /*material*/
            border-bottom-width: 1px;
        }
    }

    .e-kanban.e-responsive .e-kanbantoolbar .e-searchbar.e-ul {
        & when (@skin="office-365") {
            margin: 0px;
        }
    }

    .e-kanban.e-responsive .e-kanbantoolbar .e-search .e-searchfind, .e-kanban.e-responsive .e-kanbantoolbar .e-searchbar.e-ul, .e-kanban.e-responsive .e-kanbantoolbar.e-toolbar {
        & when (@skin="office-365") {
            height: 35px;
        }
    }

    .e-kanban.e-responsive .e-kanbantoolbar.e-adaptive-search .e-search .e-searchfind {
        & when (@skin="office-365") {
            height: 25px;
        }
    }

    .e-kanban.e-responsive .e-kanbantoolbar.e-adaptive-search .e-search .e-searchfind.e-adapt-search:before {
        & when (@skin="office-365") {
            left: 5px;
            top: 0px;
        }
    }

    .e-kanban.e-responsive .e-kanbantoolbar.e-adaptive-search .e-search .e-adapt-cancel:before {
        & when (@skin="office-365") {
            top: 4px;
            left: 2px;
        }
    }

    .e-kanban.e-responsive .e-kanbantoolbar li.e-search.e-tooltxt {
        & when (@skin="office-365") {
            height: 35px !important;
        }
    }

    .e-kanban.e-responsive .e-kanbantoolbar.e-adaptive-search li.e-search.e-tooltxt {
        & when (@skin="office-365") {
            height: 25px !important;
        }
    }

    .e-kanban.e-responsive .e-adaptive-search .e-ejinputtext.e-input {
        & when (@skin="office-365") {
            padding-bottom: 3px;
        }
    }

    .e-kanban.e-responsive .e-kanbantoolbar:not(.e-adaptive-search) .e-searchitem:before {
        & when (@skin="office-365") {
            left: 6px;
            top: 3px;
        }
    }

    .e-kanban.e-responsive .e-kanbantoolbar:not(.e-adaptive-search) .e-searchitem {
        & when (@skin="office-365") {
            width: 30px;
            padding-left: 10px;
            padding-right: 10px;
        }
    }
}

.mixin(@widget) when (@widget = ribbon), (@widget = none) {
    /*------------------------------Ribbon Start-------------------------------*/
    .e-ribbon.e-js.e-widget {
        position: relative;
    }

    .e-ribbon .e-rbnondemand {
        box-sizing: border-box !important;
    }

    .e-ribbon.e-js .e-header .e-apptab .e-list .e-menulink.e-arrow-space {
        & when (@skin= "office-365") {
            line-height: 27px;
        }
    }

    .e-ribbon.e-rtl .e-header .e-apptab {
        & when (@skin= "office-365") {
            padding-left: 4px;
        }
    }

    .e-ribbon.e-js > .e-header {
        & when not (@skin= "material") {
            position: relative;
            border: 1px solid;
            height: 53px;
            width: 100%;
            white-space: nowrap;
            display: inline-flex;
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
        }

        box-sizing: content-box;
    }

    .e-ribbon .e-content {
        width: 100%;
        white-space: nowrap;
    }

    .e-ribbon.e-js .e-header .e-active.e-contextualtabset a, .e-ribbon.e-js .e-header .e-select.e-contextualtabset a {
        & when (@skin= "office-365") {
            padding-left: 15px;
        }
    }

    .e-ribbon.e-js .e-split.e-btn-normal .e-split-btn.e-left-btn {
        & when (@skin= "office-365") {
            width: 100%;
        }
    }

    .e-ribbon.e-js .e-split.e-btn-normal .e-split-btn-div .e-icon {
        & when (@skin= "office-365") {
            font-size: 10px;
        }
    }

    .e-ribbon .e-active-content {
        z-index: 10000;
        position: relative;
    }

    .e-ribbon .e-empty-content {
        padding: 0;
        margin: 0;
        height: 30px !important;
    }

    .e-ribbon .e-menu.e-horizontal .e-list > .e-menulink {
        & when (@skin= "office-365") {
            /*office-365*/
            padding: 0px 24px 0px 8px;
        }
    }

    .e-ribbon .e-menu .e-list > .e-menulink > span.e-icon.e-arrowhead-down, .e-ribbon .e-menu.e-rtl .e-list > .e-menulink > span.e-icon.e-arrowhead-down {
        & when (@skin= "office-365") {
            /*office-365*/
            top: 25%;
            margin-right: 8px;
        }
    }

    .e-ribbon .e-content-show {
        display: block !important;
    }

    .e-ribbon.e-js .e-groupdiv .e-rbn-button.e-gallerybtn, .e-ribbon.e-js .e-groupdiv .e-rbn-button.e-gallerybtn:hover, .e-ribbon.e-js .e-groupdiv .e-rbn-button.e-galleryselect,
    .e-ribbon.e-js .e-resizediv .e-rbn-button.e-gallerybtn, .e-ribbon.e-js .e-resizediv .e-rbn-button.e-gallerybtn:hover, .e-ribbon.e-js .e-resizediv .e-rbn-button.e-galleryselect {
        border: 3px solid;
        overflow: hidden;
    }

     .e-ribbon .e-rbn-button > span {
        display: inline-block;
    }

     .e-ribbon .e-groupdiv {
        display: inline-block;
        height: 95%;
        position: relative;
        vertical-align: top;

        & when (@skin= "material") {
            /*material*/
            padding: 5px 10px 0px 10px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding: 10px 8px 0px 10px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding: 5px 5px 0px 0px;
        }
    }

     .e-ribbon .e-groupdiv .e-gallerycontent,
     .e-ribbon .e-resizediv .e-gallerycontent {
        border: 1px solid;
        border-right: 0;
        overflow: hidden;
        float: left;
    }

     .e-ribbon.e-rtl .e-groupdiv .e-gallerycontent {
        border-left: 0;
        border-right: 1px solid;
        float: right;
    }

    .e-ribbon.e-rtl.e-js .e-header .e-apptab .e-menu > li:first-child > a {
        padding-right: 8px;
        border-left-width: 0;

        & when (@skin= "office-365") {
            /*office-365*/
            padding-left: 24px;
        }
    }

     .e-ribbon.e-rtl .e-header .e-apptab .e-menu .e-arrows {
        margin-left: 1px;
    }

     .e-ribbon .e-groupdiv .e-gallexpandcontent,
     .e-ribbon .e-resizediv .e-gallexpandcontent {
        border: 1px solid;
        z-index: 1002;
        position: relative;
    }

     .e-ribbon .e-groupdiv .e-extracontent,
     .e-ribbon .e-resizediv .e-extracontent {
        border-top: 1px solid;
    }

     .e-ribbon .e-groupdiv .e-rbn-button.e-galleryextrabtn,
     .e-ribbon .e-resizediv .e-rbn-button.e-galleryextrabtn {
        overflow: hidden;
        display: table;
        width: 100%;
    }

    .e-ribbon.e-responsive .e-respcontent .e-groupdiv .e-resizegroupdiv {
         height: 100%;
    }

     .e-ribbon .e-groupdiv .e-menu,
     .e-ribbon .e-resizediv .e-menu {
        border: none;
    }

    .e-ribbon.e-js .e-header .e-active.e-tab .e-removeapptab,
    .e-ribbon.e-js .e-header .e-active.e-contextualtabset .e-removeapptab {
        border-left-width: 0;
    }

     .e-ribbon .e-groupdiv .e-gallerymovediv,
     .e-ribbon .e-resizediv .e-gallerymovediv {
        float: right;
        width: 16px;
    }

     .e-ribbon .e-groupdiv .e-moveupdiv,
     .e-ribbon .e-groupdiv .e-movedowndiv,
     .e-ribbon .e-resizediv .e-moveupdiv,
     .e-ribbon .e-resizediv .e-movedowndiv {
        border-style: solid;
        border-width: 1px 1px 0 1px;
        height: 21px;
    }

     .e-ribbon .e-groupdiv .e-expgallerydiv,
     .e-ribbon .e-resizediv .e-expgallerydiv {
        border: 1px solid;
        height: 21px;
    }

     .e-ribbon .e-groupdiv .e-resizebtn {
        position: relative;
        left: 2px;

        & when (@skin= "office-365") {
            /*office-365*/
            min-width: 75px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            min-width: 48px;
        }
    }

     .e-ribbon .e-groupdiv .e-resizebtn .e-btntxt {
        padding-top: 18px;
        display: block;
    }

     .e-ribbon.e-rtl .e-galleryup:before {
        margin-left: auto;
        margin-right: 3px;
    }

     .e-ribbon.e-rtl .e-resizebtn .e-icon {
        float: none;
    }

     .e-ribbon.e-rtl .e-ribbongallerycontrol .e-icon {
        float: none;
    }

     .e-ribbon.e-rtl .e-gallerydown:before {
        margin-left: auto;
        margin-right: 3px;
    }

    .e-ribbon.e-rtl .e-galleryexpand:before {
        margin-left: auto;
        margin-right: 3px;
    }

    .e-ribbon.e-rtl.e-rbnwithqat .e-rbnquickaccessbar.e-rbnabove {
        left: auto;
        right: 1px;
    }

    .e-ribbon.e-rtl .e-expandcollapse {
        left: 0;
        right: auto;

        & when (@skin= "office-365") {
            padding: 0 0 0 10px;
        }
    }

    .e-ribbon.e-rtl .e-rarrowup-2x:before {
        left: -2px;
    }

    .e-ribbon.e-rtl .e-ribbonpinicon:before {
        left: -2px;
    }

    .e-ribbon.e-rtl .e-rbn-button.e-button .e-icon {
        float: none;
    }

    .e-ribbon.e-js.e-rtl .e-content .e-splitbutton .e-icon.e-arrow-sans-down {
        & when (@skin= "office-365") {
            padding: 4px 21px 4px 19px;
        }
    }

    .e-ribbon.e-rtl .e-groupdiv > div:after {
        right: auto;

        & when (@skin= "office-365") {
            left: 1px;
        }

        & when not (@skin= "office-365") {
            left: 0;
        }
    }

    .e-ribbon.e-rtl .e-header > li {
        margin-left: 2px;
        margin-right: 0;
    }

   .e-ribbon.e-rtl .e-backstageli {
        text-align: right;
    }

    .e-ribbon.e-rtl .e-backstagetopicon {
        right: 15px;
    }

    .e-ribbon.e-rtl .e-backstagescrollcontent .e-vscrollbar .e-icon {
        float: none;
    }

    .e-ribbon.e-rtl .e-ribbonbackstagepage .e-backstagetitlecontent {
        padding-right: 40px;
        padding-left: 0px;
    }

    .e-ribbon.e-rtl.e-rbnwithqat .e-rbnqatmenu .e-removemenuli p {
        padding-right: 9px;
    }

    .e-ribbon.e-rtl.e-rbnwithqat .e-rbnqatmenu .e-removemenuli:before {
        padding-right: 7px;
    }

    .e-ribbon.e-rtl.e-rbnwithqat .e-qatmorecommands,
    .e-ribbon.e-rtl.e-rbnwithqat .e-rbnshowbelow,
    .e-ribbon.e-rtl.e-rbnwithqat .e-rbnshowabove,
    .e-ribbon.e-rtl.e-rbnwithqat .e-addmenuli {
        padding-right: 33px;
    }

    .e-ribbon .e-resizediv {
        & when (@skin= "material") {
            /*material*/
            border-width: 1px;
        }

        & when not (@skin= "material") {
            /*other*/
            border-width: 0 1px 1px 1px;
        }

        border-style: solid;
        width: 100%;
        z-index: 1002;
        position: absolute;
        padding: 6px 8px 0 3px;
    }

    .e-ribbon.e-js .e-rbn-button.e-btn {
        border: none;

        & when (@skin="material") {
            padding: 0px;
        }
    }

    .e-ribbon.e-js .e-rbn-button.e-btn .e-icon {
        & when (@skin="material") {
            padding: 3px;
        }
    }

    .e-ribbon .e-parentdiv {
        padding: 0;
    }

    .e-ribbon .e-header .e-contextualtab {
        font-size: 10pt;
        height: 33px;
    }

    .e-ribbon .e-header .e-contextualtabset {
        border: none;
        display: table-cell;

        & when (@skin= "office-365") {
            /*office-365*/
            height: 27px;
        }

        & when (@skin= "material") {
            /*material*/
            height: 34px;
        }

        & when not (@skin= "office-365") and not(@skin= "material") {
            /*other*/
            height: 33px;
        }
    }

    .e-ribbon.e-js .e-header .e-contextualtabset.e-active {
        border: none;
    }

    .e-ribbon .e-rbn-ddl.e-ddl .e-select {
        background: none repeat scroll 0 0;
        border: medium none;
    }

    .e-ribbon .e-innerdiv {
        & when (@skin= "material") {
            /*material*/
            padding: 2px 0 2px 2px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding-left: 1px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            padding-left: 5px;
        }

        display: table-cell;
        vertical-align: top;
    }

    .e-ribbon .e-innerdivrow {
        & when (@skin= "material") {
            /*material*/
            padding: 2px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding-bottom: 5px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding-left: 5px;
            padding-bottom: 5px;
        }

        display: table;
    }

    .e-ribbon.e-js .e-menu.e-vertical > .e-list > .e-menulink {
        & when (@skin= "office-365") {
            /*office-365*/
            padding: 15px 20px 15px 28px;
        }
    }

    .e-ribbon .e-innerdivchild {
        float: left;
    }

    .e-ribbon .e-contextualtab .e-link {
        text-align: center;
        width: inherit;
    }

    .e-ribbon .e-contextualtab > .e-active a {
        border-bottom: 3px solid;
    }

    .e-ribbon .e-contextualtabset > .e-active a {
        border-bottom: 3px solid;
    }

    .e-ribbon .e-groupdiv > div:after {
        content: ' ';
        right: 0;
        height: auto;
        position: absolute;
        top: 5px;
        width: 1px;

        & when (@skin= "material") {
            /*material*/
            bottom: 22px;
        }

        & when not (@skin= "material") {
            /*other*/
            bottom: 5px;
        }
    }

    .e-ribbon .e-captionarea {
        line-height: 11px;
        text-align: center;
        position: relative;
        left: 2px;

        & when (@skin= "material") {
            /*material*/
            bottom: -3px;
            font-family: @font-family;
            font-size: 11px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            font-family: @font-family;
            bottom: 0px;
            font-size: 12px;
        }

        & when not (@skin= "material")and not (@skin="office-365") {
            /*other*/
            bottom: 0px;
            font-family: @font-family;
            font-size: 11px;
        }

        width: 100%;
        float: left;
        height: 14px;
        display: table-cell;
    }

    .e-ribbon .e-groupxpand {
        float: left;
    }

    .e-ribbon .e-expandcollapse {
        bottom: 0;
        list-style: none;
        margin: 0;
        position: absolute;
        right: 0;
        cursor: default;

        & when (@skin= "office-365") {
            /*office-365*/
            padding: 0px 10px 0px 0px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            padding: 0;
        }
    }

    .e-ribbon .e-header .e-contextliset {
        border: none;

        & when (@skin= "material") {
            /*material*/
            height: auto;
        }
    }

    .e-ribbon .e-header .e-contextli ul .e-contexttitle,
    .e-ribbon .e-header .e-contextliset ul .e-contexttitle {
        border: none;
        text-align: center;
        width: 100%;
        font-size: 12px;
    }

    .e-ribbon .e-menu .e-list > ul .e-list a {
        font-size: 10pt;
        font-style: normal;
    }

    .e-ribbon .e-menu .e-list > ul .e-list {
        width: 100%;
        line-height: normal;
        border: none;
    }

    .e-ribbon .e-centeralign {
        vertical-align: middle;
    }

    .e-ribbon .e-controlpadding {
        & when (@skin= "office-365") {
            /*office-365*/
            padding-left: 0px;
            padding-right: 1px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            padding-left: 1px;
            padding-right: 1px;
        }
    }

    .e-ribbon .e-groupdiv .e-controlpadding {
        & when (@skin= "material") {
            /*material*/
            padding: 3px;
        }
    }

    .e-ribbon .e-rarrowup-2x:before {
        position: relative;
        font-size: 10px;
        top: 3px;
        left: 2px;
    }

    .e-ribbon .e-rarrowdown-2x:before {
        font-size: 10px;
        left: 2px;
        position: relative;
        top: 4px;
    }

    .e-ribbon.e-responsive .e-resbackstage:before {
        font-family: 'ej-webfont';
        content: "\e816";
        position: relative;

        & when (@skin= "material") {
            /*material*/
            font-size: 24px;
            top: -5px;
        }

        & when not (@skin= "material") {
            /*other*/
            font-size: 20px;
            top: -4px;
        }
    }


    .e-ribbon .e-icon.e-ribdownarrow:before {
        font-family: 'ej-webfont';
        content: "\e81d";
        left: 1px;
        position: relative;

        & when (@skin= "material") {
            /*material*/
            font-size: 16px;
            top: 6px;
        }

        & when not (@skin= "material") {
            /*other*/
            font-size: 20px;
            top: 0px;
        }
    }

    .e-ribbon .e-icon.e-ribuparrow:before {
        font-family: 'ej-webfont';
        position: relative;

        & when (@skin= "material") {
            /*material*/
            font-size: 16px;
            top: 5px;
            content: "\e81d";
        }

        & when not (@skin= "material") {
            /*other*/
            font-size: 20px;
            content: "\e81e";
            top: 0px;
        }
    }

    .e-ribbon .e-resgroupheader .e-groupresponsive.e-ribuparrow {
        padding: 0;
        position: relative;
        right: 12px;
        top: 18px;
    }

    .e-ribbon.e-responsive .e-resgroupheader .e-ribupdivarrow, .e-ribbon.e-responsive .e-resizegroupdiv .e-ribrightdivarrow {
        float: right;
        height: 48px;
        width: 40px;
    }

    .e-ribbon.e-responsive .e-backstagecontent.e-backstageactive-content {
        display: block !important;
    }

    .e-ribbon.e-responsive .e-ribGroupContent {
        & when (@skin= "material") {
            /*material*/
            padding: 0px 12px !important;
        }

        & when not (@skin= "material") {
            /*other*/
            padding-left: 12px;
            padding-right: 12px;
        }
    }

    .e-ribbon.e-responsive .e-resgroupheader .e-groupresponsive.e-ribdownarrow {
        position: relative;
        right: 14px;
        top: 14px;
        padding: 0;
    }

    .e-ribbon .e-icon.e-ribleftarrow:before {
        font-family: 'ej-webfont';
        font-size: 20px;

        & when (@skin= "material") {
            /*material*/
            content: "\e818";
        }

        & when not (@skin= "material") {
            /*other*/
            content: "\e819";
        }
    }

    .e-ribbon .e-icon.e-ribrightarrow:before {
        font-family: 'ej-webfont';
        content: "\e818";

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

        & when not (@skin= "material") {
            /*other*/
            font-size: 20px;
        }
    }


    .e-ribbon .e-groupexpander {
        height: 14px;
        width: 14px;
        cursor: pointer;
        display: table-cell;
        line-height: 2;
        position: relative;
        text-align: right;
        float: right;

        & when (@skin= "material") {
            /*material*/
            top: -12px;
            left: 6px;
        }

        & when not (@skin= "material") {
            /*other*/
            top: -14px;
            left: -1px;
        }
    }

    .e-ribbon .e-contentbottom {
        width: 100%;

        & when (@skin= "material") {
            /*material*/
            height: 14px;
        }

        & when not (@skin= "material") {
            /*other*/
            height: 11px;
        }

        display: inline-block;
    }

    .e-ribbon .e-small {
        & when (@skin= "material") {
            /*material*/
            width: 24px;
            height: 24px;
        }

        & when not (@skin= "material") {
            /*other*/
            width: 25px;
            height: 25px;
        }
    }

    .e-ribbon .e-big {
        width: 50px;
        height: 50px;
    }

    .e-ribbon .e-separatordivrow {
        width: 1px;
        float: left;

        & when (@skin= "material") {
            /*material*/
            margin: 6px 8px 6px 8px;
        }

        & when not (@skin= "material") {
            /*other*/
            margin: 0px 3px 0px 3px;
        }
    }

    .e-ribbon .e-contextul li a {
        text-decoration: none;
        border-bottom-width: 0;
        padding: 8px 12px 5px;
        outline: 0 none;
        color: inherit;
    }

    .e-ribbon .e-expander:before {
        content: "\e73d";
        position: relative;
        font-size: 9px;
        left: -1px;
        top: -2px;
    }

    .e-ribbon .e-galleryup:before {
        content: "\e771";
        font-size: 7px;
        margin-left: 3px;
        margin-top: 7px;
    }

    .e-ribbon .e-gallerydown:before {
        content: "\e770";
        position: absolute;
        font-size: 7px;
        margin-left: 3px;
        margin-top: 5px;
    }

    .e-ribbon .e-galleryexpand:before {
        content: "\e7cd";
        font-size: 6px;
        margin-left: 3px;
        margin-top: 7px;
    }

    .e-ribbon .e-ribbonresize:before {
        content: "\e770";
        font-size: 7px;
    }

    .e-ribbon .e-menu ul li {
        min-width: 100px;
    }

    .e-ribbon .e-menu li ul > .e-list > a, .e-ribbon .e-menu li ul .e-list > span {
        & when (@skin= "material") {
            /*material*/
            padding: 3px 18px 3px 16px;
        }

        & when not (@skin= "material") {
            /*other*/
            padding: 3px 18px 3px 28px;
        }

        height: inherit;
        white-space: nowrap;
        font-family: @font-family;
    }

    .e-ribbon .e-menu.e-gallerymenu li ul > .e-list > a, .e-ribbon .e-menu.e-gallerymenu li ul .e-list > span {
        & when (@skin= "office-365") {
            /*office-365*/
            padding: 10px 18px 10px 16px;
        }
    }

    .e-ribbon.e-js .e-gallerymenu a {
        font-family: @font-family;

        & when (@skin= "office-365") {
            /*office-365*/
            font-weight: 500 !important;
        }
    }

    .e-ribbon .e-btn.e-btn-normal, .e-ribbon .e-tbtn.e-btn-normal {
        & when (@skin= "office-365") {
            /*office-365*/
            width: 22px;
        }
    }

    .e-ribbon .e-menu.e-horizontal > .e-list > ul::after {
        border-style: none;
    }

    .e-ribbon.e-js .e-header .e-expandcollapse span {
        margin: 0;
    }

    .e-ribbon .e-header > .e-bottom-line.e-active,
    .e-ribbon .e-header > .e-bottom-line.e-active:hover {
        padding-bottom: 0;
    }

   .e-ribbon.e-js .e-header .e-tab.e-bottom-line.e-active, .e-ribbon.e-js .e-header .e-tab.e-bottom-line.e-active:hover {
        & when not (@skin= "material") {
            /*other*/
            border-bottom: 0 none !important;
        }
    }

    .e-ribbon .e-menu.e-horizontal > .e-list > a, .e-ribbon .e-menu.e-horizontal > .e-list > span {
        & when (@skin= "office-365") {
            /*office-365*/
            line-height: 28px;
        }
    }

    .e-ribbon .e-bottom-line {
        border: 0;
        margin-right: 0;
    }

    .e-ribbon .e-header li a {
        & when (@skin= "office-365") {
            /*office-365*/
            padding: 3px 15px;
            font-size: 13px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            padding: 4px 14px;
        }

        border: 1px solid transparent;
    }

    .e-ribbon .e-header > .e-apptab .e-menu {
        border: 0;
    }

    .e-ribbon .e-header .e-apptab .e-menu > li > a {
        border-top: 0 !important;
        border: 1px solid transparent;

        & when (@skin= "office-365") {
            /*office-365*/
            font-size: 13px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            font-size: 16px;
        }

        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
        }

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

    .e-ribbon.e-js .e-header .e-tab a, .e-ribbon .e-header > .e-apptab .e-apptabanchor {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
            font-size: 16px;
        }
    }

    .e-ribbon .e-header > .e-apptab {
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .e-ribbon .e-header .e-backstagetab {
        padding-top: 0px;
        align-self: flex-end;
    }

    .e-ribbon .e-header > li {
        display: inline-table;
        padding-top: 0px;
        margin-right: 2px;
        border-right: 0;

        & when (@skin= "material") {
            /*material*/
            margin: 20px 0px 0px 0px !important;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            margin-top: 26px !important;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            margin-top: 20px !important;
        }
    }

    .e-ribbon .e-header .e-contextli, .e-ribbon .e-header .e-contextliset {
        padding-top: 0px;

        & when (@skin= "material") {
            /*material*/
            margin-top: 14px !important;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            margin-top: 23px !important;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            margin-top: 17px !important;
        }
    }

    .e-ribbon.e-js .e-header .e-active.e-tab a, .e-ribbon.e-js .e-header .e-active.e-contextualtabset a {
        & when not (@skin= "material") {
            border: 1px solid;
            border-bottom-color: transparent;
            border-bottom-width: 4px;
        }

        & when (@skin="office-365") {
            font-weight: normal;
            font-size: 13px;
        }
    }

    .e-ribbon .e-header .e-menu .e-list {
        padding-top: 0;
    }

    .e-ribbon .e-header .e-contextualtab, .e-ribbon .e-header .e-contextualtabset {
        padding-top: 0;
        font-size: 16px;
        border-right: 0px;

        & when (@skin= "material") {
            /*material*/
            border-bottom: 2px solid;
        }
    }

    .e-ribbon .e-header .e-contextli ul, .e-ribbon .e-header .e-contextliset ul {
        margin-left: 3px;
        border-top: 3px solid;
    }

    .e-ribbon .e-header .e-contextli ul,
    .e-ribbon .e-header .e-contextliset ul {
        margin-left: 10px;
        padding: 0;
    }

    .e-ribbon .e-header .e-contextli ul, .e-ribbon .e-header .e-contextliset ul {
        margin-left: 3px;
    }

    .e-ribbon .e-header .e-contextli {
        margin-bottom: -1px;
    }

    .e-ribbon .e-header > li {
        & when (@skin= "material") {
            /*material*/
            height: 32px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            height: 28px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            height: 33px;
        }
    }

    .e-ribbon .e-tooltipdiv {
        position: absolute;
        z-index: 1000001;
        width: 170px;
        border-width: 0 1px 1px 1px;
        border-style: solid;

        & when (@skin= "material") {
            /*material*/
            border-radius: 2px;
        }
    }

    .e-ribbon .e-js.e-colorSplit.e-splitbutton.e-split-btn.e-rbn-button {
        border: 1px solid;
        border-right: none;
    }

    .e-ribbon .e-drp-btn.e-rht-btn.e-rbn-button {
        border: 1px solid;
    }

    .e-ribbon .e-tooltipdivwithimg {
        width: auto;
    }

    .e-ribbon .e-tooltipdiv .e-tooltiptitle {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
            margin: 3px 0 0 0;
            padding: 0 8px 0 8px;
        }

        & when not (@skin= "material") {
            /*other*/
            font-family: @font-family;
            margin: 3px 10px 0 10px;
        }

        font-size: 14px;
    }

    .e-ribbon .e-tooltipdiv .e-tooltipdesc {
        & when (@skin= "material") {
            /*material*/
            margin: 10px 8px 10px 8px;
        }

        & when not (@skin= "material") {
            /*other*/
            margin: 10px;
        }
    }

    .e-ribbon .e-tooltipdiv .e-tooltipcontent {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
        }

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

        width: 150px;
        line-height: 1.42857;
        margin: 0;
        padding: 0;
    }

    .e-ribbon .e-tooltipdiv .e-tooltipcntwithimg {
        display: table-cell;
        vertical-align: top;
        padding: 0 0 10px 10px;

        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
        }

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

        width: 170px;
    }

    .e-ribbon .e-tooltipdiv .e-tooltipimg {
        display: table-cell;
    }

    .e-ribbon .e-resizecontent {
        overflow: hidden;
        white-space: normal;
    }

    .e-ribbon .e-header .e-apptab .e-menu .e-arrows {
        margin-top: 0px;
        padding-top: 0px;
    }

    .e-ribbon .e-header .e-apptab .e-menu > li:first-child > a > .e-arrows {
        margin-top: 0px;
        padding-top: 3px;
    }

    .e-ribbon .e-content .e-rbn-button.e-split-btn, .e-ribbon .e-header .e-apptab .e-menu {
        white-space: normal;
    }

    .e-ribbon .e-content .e-rbn-button.e-split-btn,
    .e-ribbon .e-header .e-apptab .e-menu {
        white-space: normal;
    }

    .e-ribbon .e-ribbonbackstagepage {
        border: 1px solid;
        position: absolute;
        z-index: 10002;
        top: 0;
        overflow: hidden;
    }

    .e-ribbon .e-backstageheader {
        display: table-cell;
        list-style: none;
        padding: 0;
        vertical-align: top;
    }

    .e-ribbon .e-backstageli {
        & when (@skin= "material") {
            /*material*/
            padding: 14px 15px 14px 24px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding: 9px 20px 9px 20px;
        }

        & when not (@skin= "material") and not (@skin="office-365") {
            /*other*/
            padding: 8px 15px 8px 20px;
        }

        text-align: left;
    }

    .e-ribbon .e-backstageseparator {
        height: 1px;
        margin: 5px 8px 5px 20px;
    }

    .e-ribbon .e-backstageli a {
        background: transparent;
        text-decoration: none;
        font-size: 12px;
        outline: none;
        position: relative;
        top: -1px;
        white-space: nowrap;
    }

    .e-ribbon .e-backstagecontent {
        display: table-cell;
        padding: 0px 5px 5px 45px;
        white-space: normal;
    }

    .e-ribbon .e-backstagetopicon {
        & when (@skin= "material") {
            /*material*/
            left: 24px !important;
        }

        & when not (@skin= "material") {
            /*other*/
            left: 26px;
        }

        position: relative;
        top: 26px;
        width: 36px;
        display: table-cell;
    }

    .e-ribbon .e-backstagetopicon span:before {
        & when (@skin= "material") {
            /*material*/
            content: "\e7fa";
        }

        & when not (@skin= "material") {
            /*other*/
            content: "\e83d";
        }

        & when (@skin= "office-365") {
            /*office-365*/
            font-size: 36px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            font-size: 35px;
        }

        font-family: "ej-webfont";
        top: -9px;
        right: 2px;
        position: relative;
    }

    .e-ribbon .e-ribbonbackicon {
        & when (@skin= "material") {
            /*material*/
            height: 24px;
            width: 24px;
        }

        & when not (@skin= "material") {
            /*other*/
            height: 31px;
            width: 31px;
        }

        border-radius: 50%;
    }

    .e-ribbon.e-rtl .e-backstagetopicon span:before {
        & when (@skin= "material") {
            /*material*/
            content: "\e7fb";
        }

        & when not (@skin= "material") {
            /*other*/
            content: "\e80c";
        }

        font-family: "ej-webfont";
        font-size: 35px;
    }

    .e-ribbon .e-backstagetopicon:hover, .e-ribbon .e-apptab .e-apptabanchor:hover, .e-ribbon .e-backstageli a:hover, .e-ribbon .e-backstagebutton:hover {
        cursor: default;
    }

    .e-ribbon .e-header > .e-apptab .e-apptabanchor {
        padding-bottom: 6px;
    }

    .e-ribbon .e-backstagebutton {
        font-size: 12px;
    }

    .e-ribbon .e-rbntooltipshadow {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    }

    .e-ribbon .e-ribbonbackstagepage .e-backstagetitlecontent {
        display: table-cell;
        vertical-align: middle;
        font-size: 30px;
        padding-bottom: 38px;
    }

    .e-ribbon .e-ribbonbackstagepage .e-backstagetopcontent {
        display: table-cell;
        height: 92px;
    }

    .e-ribbon .e-rarrowup-2x, .e-ribbon .e-ribbonpinicon {
        background-color: transparent;
        background-image: none;
        float: left;

        & when (@skin= "office-365") {
            /*office-365*/
            height: 15px;
            padding: 0px;
            width: 15px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            height: 16px;
            padding: 4px;
            width: 16px;
        }
    }

    .e-ribbon .e-ribbonpinicon:before {
        font-size: 10px;
        top: 3px;
        font-family: 'ej-webfont';
        content: "\e785";
        position: relative;

        & when (@skin= "office-365") {
            /*office-365*/
            left: 1px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            left: 2px;
        }
    }

    .e-ribbon.e-rbnwithqat .e-rbnquickaccessbar {
        & when (@skin= "material") {
            /*material*/
            height: 48px;
        }

        & when not (@skin= "material") {
            /*other*/
            height: 36px;
        }
    }

    .e-ribbon.e-rbnwithqat .e-splitbtnqatdiv, .e-ribbon.e-rbnwithqat .e-qatooldiv, .e-ribbon.e-rbnwithqat .e-qaresizebtndiv {
        display: table-cell;

        & when (@skin= "material") {
            /*material*/
            padding: 6px 6px 2px 6px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            padding: 3px 0.5px 3px 0.5px;
        }

        & when not (@skin= "material") and not (@skin= "office-365") {
            /*other*/
            padding: 3px 3px 2px 3px;
        }
    }

    .e-ribbon.e-rbnwithqat .e-qatexpand:before {
        & when (@skin= "material") {
            /*material*/
            font-size: 8px;
            position: relative;
            left: -2px;
            top: 1px;
        }

        & when not (@skin= "material") {
            /*other*/
            font-size: 6px;
        }

        content: "\e7cd";
        height: auto;
        width: auto;
    }

    .e-ribbon.e-rbnwithqat .e-rbnqatmenu {
        border: 1px solid;
        position: relative;
        padding: 3px;
        z-index: 100001;
        display: table;
        width: auto;
        margin-top: 0px;
    }

    .e-ribbon.e-rbnwithqat .e-qaresizediv {
        border: 1px solid;
        position: absolute;
        z-index: 100001;
    }

    .e-ribbon.e-rbnwithqat .e-rbnqatmenu .e-removemenuli p {
        display: inline-block;
        padding-left: 15px;
    }

    .e-ribbon.e-rbnwithqat .e-rbnqatmenu .e-qatmenuli p {
        margin-bottom: 0px;
        margin-top: 0px;

        & when (@skin= "material") {
            /*material*/
            vertical-align: middle;
        }
    }

    .e-ribbon.e-rbnwithqat .e-rbnqatmenu .e-removemenuli:before {
        content: "\e7cf";
        display: inline-block;
        font-family: "ej-webfont";
        padding-left: 7px;
        position: relative;
        bottom: 1px;

        & when (@skin= "material") {
            /*material*/
            font-size: 14px;
            top: 1px;
        }

        & when not (@skin= "material") {
            /*other*/
            font-size: 9px;
        }
    }

    .e-ribbon.e-rbnwithqat .e-rbnqatmenu div {
        padding: 3px;
    }

    .e-ribbon.e-rbnwithqat .e-qatmorecommands, .e-ribbon.e-rbnwithqat .e-rbnshowbelow, .e-ribbon.e-rbnwithqat .e-rbnshowabove, .e-ribbon.e-rbnwithqat .e-addmenuli {
        padding-left: 33px;
    }

    .e-ribbon.e-rbnwithqat .e-qatmenuli {
        list-style: none;
        margin: 3px;
        cursor: default;
        text-transform: capitalize;

        & when (@skin= "material") {
            /*material*/
            height: 28px;
        }
    }

    .e-ribbon.e-rbnwithqat .e-qatmenuli.e-rbnshowbelow {
        text-transform: none;
    }

    .e-ribbon.e-rbnwithqat .e-qatmenuli.e-rbnshowabove {
        text-transform: none;
    }

    .e-ribbon.e-rbnwithqat .e-qatseparator {
        height: 1px;
        list-style: none;
        text-align: center;
        cursor: default;
        margin-left: 36px;
    }

    .e-ribbon.e-rbnwithqat .e-qaresizebtnicon:before {
        content: "\e7ce";
        font-size: 5px;
        padding-top: 35%;
    }

    .e-ribbon.e-rbnwithqatabove.e-js > .e-header {
        & when (@skin= "material") {
            /*material*/
            height: 78px;
        }

        & when (@skin= "office-365") {
            /*office-365*/
            height: 64px;
        }

        & when not (@skin= "material") and not(@skin="office-365") {
            /*other*/
            height: 68px;
        }
    }

    .e-ribbon.e-rbnwithqatabove .e-header > li {
        padding-top: 0px;

        & when (@skin= "material") {
            /*material*/
            margin-top: 42px !important;
        }

        & when not (@skin= "material") {
            /*other*/
            margin-top: 37px !important;
        }
    }

    .e-ribbon.e-js .e-header .e-apptab {
        & when (@skin= "office-365") {
            /*office-365*/
            margin-right: 6px;
        }
    }

    .e-ribbon.e-rbnwithqatabove.e-js .e-header > li.e-contextliset {
        & when (@skin= "material") {
            /*material*/
            margin-top: 40px !important;
        }
    }

    .e-ribbon.e-rbnwithqat .e-rbnquickaccessbar.e-rbnabove {
        position: absolute;
        z-index: 10001;
        left: 1px;

        & when (@skin= "office-365") {
            /*office-365*/
            padding-left: 8px;
            top: 0px;
        }

        & when not (@skin= "office-365") {
            /*other*/
            padding-left: 0px;
            top: 1px;
        }
    }

    .e-ribbon.e-grpdivhide, .e-ribbon .e-resdivshow {
        overflow: hidden;
    }

    .e-ribbon.e-rtl.e-grpdivhide {
        border-right: 0 !important;
    }

     .e-ribbon-show {
        display: block !important;
    }

    .e-ribbon .e-responsiveqat,
    .e-ribbon .e-groupresponsive,
    .e-ribbon .e-ribresmenu,
    .e-ribbon .e-responsivetabheader,
    .e-ribbon .e-resbackstage {
        display: none !important;
    }

    .e-ribbon .e-responsivebackstagecontent {
        display: none;
    }

    .e-ribbonwaitingpopup.e-waitpopup-pane {
        background-color: transparent !important;
    }

    .e-ribbon.e-js .e-rbn-button, .e-ribbon.e-js .e-rbn-button:hover, .e-ribbon.e-js .e-rbn-button .e-btntxt, .e-ribbon.e-js .e-backstageli.e-backstagebutton, .e-ribbon.e-js .e-backstageli a, .e-ribbon.e-js .e-groupdiv ul.e-gallerymenu li a {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
            font-size: 13px;
        }
    }

    .e-ribbon.e-js .e-groupdiv ul.e-gallerymenu > li:last-child {
        & when (@skin= "material") {
            /*material*/
            margin-right: 0px;
        }
    }

   .e-ribbon.e-responsive.e-js .e-ribresmenu a, .e-ribbon.e-responsive .e-responsivetabli, .e-ribbon.e-responsive.e-js .e-respcontent .e-resizebtn .e-btntxt {
        & when (@skin= "material") {
            /*material*/
            font-family: @font-family;
            font-size: 14px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-responsiveqat .e-qatooldiv .e-icon:before {
        & when (@skin= "material") {
            /*material*/
            height: 24px;
            width: 24px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-header .e-apptab {
        & when (@skin= "material") {
            /*material*/
            padding-left: 6px;
        }
    }

    .e-ribbon.e-responsive .e-header > li {
        & when (@skin= "material") {
            /*material*/
            margin-right: 12px !important;
            padding-left: 0px !important;
        }
    }

    .e-ribbon.e-rbnwithqat.e-responsive .e-responsiveqat {
        & when (@skin= "material") {
            /*material*/
            margin-right: 0px;
        }
    }

    .e-ribbon.e-responsive .e-header li a {
        & when (@skin= "material") {
            /*material*/
            padding-top: 5px;
        }
    }

    .e-ribbon.e-rbnwithqat.e-responsive .e-qatooldiv {
        & when (@skin= "material") {
            /*material*/
            padding: 0px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-rescontent {
        & when (@skin= "material") {
            /*material*/
            width: 136px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-responsiveback .e-restopbackcontent {
        & when (@skin= "material") {
            padding-left: 12px;
            font-size: 17px;
            font-family: @font-family;
        }
    }

    .e-ribbon.e-responsive .e-ribresmenu .e-icon {
        & when (@skin= "office-365") {
            top: -12px !important;
        }
    }

    .e-ribbon.e-responsive .e-groupdiv {
        & when (@skin= "material") {
            padding: 0px;
        }

        & when (@skin= "office-365") {
            padding-left: 0px;
        }
    }

    .e-ribbon.e-responsive .e-header .e-apptab {
        & when (@skin= "office-365") {
            margin-top: 0px !important;
        }
    }

    .e-ribbon .e-ddl.e-widget.e-rbn-ddl .e-in-wrap {
        & when (@skin= "material") {
            /*material*/
            border: none;
        }
    }

    .e-ribbon .e-ddl.e-rtl.e-widget.e-rbn-ddl .e-in-wrap {
        & when (@skin= "material") {
            /*material*/
            padding: 0 0 0 20px;
        }
    }

    .e-ribbon.e-js .e-rbn-button, .e-ribbon .e-rbn-button .e-btntxt, .e-ribbon.e-js .e-apptab .e-menu ul > li > a {
        & when (@skin= "material") {
            /*material*/
            text-transform: none;
        }
    }

    .e-ribbon.e-responsive.e-js .e-resbackstage {
        & when (@skin= "material") {
            /*material*/
            padding-left: 0px;
            margin-left: 12px;
        }
    }


    .e-ribbon.e-responsive.e-js .e-resbackstage, .e-ribbon.e-responsive.e-js .e-ribresmenu .e-icon {
        & when (@skin= "material") {
            /*material*/
            margin-top: 13px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-header {
        & when (@skin= "material") {
            height: 48px !important;
        }
    }

    .e-ribbon.e-responsive.e-js .e-content.e-responsiveheight, .e-ribbon.e-responsive.e-js .e-backstagerestop, .e-ribbon.e-responsive.e-js .e-groupmobdiv, .e-ribbon.e-responsive.e-js .e-respmobcontent .e-mobribgroup .e-btn:not(.e-split-btn) {
        & when (@skin= "material") {
            height: 56px !important;
        }
    }

    .e-ribbon.e-responsive.e-js .e-resizegroupdiv {
        & when (@skin= "material") {
            padding: 0 24px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-content.e-responsiveToolbarScroll {
        & when (@skin= "material") {
            height: 60px !important;
        }
    }

    .e-ribbon.e-responsive.e-js .e-mobdiv {
        & when (@skin= "material") {
            padding-right: 12px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-innerdiv, .e-ribbon.e-responsive.e-js .e-innerdivrow {
        & when (@skin= "material") {
            padding: 12px 0px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-controlpadding {
        & when (@skin= "material") {
            padding: 10px 4px !important;
        }
    }

    .e-ribbon.e-rbnwithqat.e-responsive .e-responsiveqat {
        & when (@skin= "material") {
            margin-right: 0px !important;
        }
    }

    .e-ribbon.e-responsive.e-js .e-mobdiv:nth-child(1) {
        & when (@skin= "material") {
            padding-left: 24px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-mobribgroup .e-ribupdivarrow {
        & when (@skin= "material") {
            padding-right: 24px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-responsivecontent .e-innerdivrow:after, .e-ribbon.e-responsive.e-js .e-responsivecontent .e-innerdiv:after {
        & when (@skin= "material") {
            content: '';
            width: 108%;
            position: relative;
            height: 1px;
            display: table;
            top: 12px;
            left: -12px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-rbn-resize, .e-ribbon.e-responsive.e-js .e-responsivecontent .e-innerdivrow, .e-ribbon.e-responsive.e-js .e-responsivecontent .e-innerdiv {
        & when (@skin= "material") {
            min-width: 94% !important;
        }
    }

    .e-ribbon.e-rbnwithqat.e-responsive.e-js .e-responsiveqat {
        & when (@skin= "material") {
            padding-right: 10px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-responsiveqat .e-rbn-button.e-btn {
        & when (@skin= "material") {
            margin-left: 6px;
        }
    }

    .e-ribbon.e-rbnwithqat .e-rbnqatmenu .e-addmenuli p {
        & when (@skin= "material") {
            padding-left: 8px;
            padding-top: 3px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-backstagerestopcontent .e-icon.e-ribleftarrow:before {
        & when (@skin= "material") {
            position: relative;
            top: -1px;
            left: -2px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-groupresponsive.e-ribleftarrow:before {
        & when (@skin= "material") {
            position: relative;
            top: -6px;
            left: 3px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-rescontent {
        & when (@skin= "material") {
            top: 0px;
            left: 48px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-groupresponsive.e-ribrightarrow {
        & when (@skin= "material") {
            top: 15px;
        }
    }

    .e-ribbon.e-js .e-groupdiv .e-resizebtn {
        & when (@skin= "material") {
            margin-right: 5px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-icon.e-ribuparrow {
        & when (@skin= "material") {
            /*material*/
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
    }

    .e-ribbon.e-responsive.e-js .e-icon.e-ribdownarrow {
        & when (@skin= "material") {
            /*material*/
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

    .e-ribbon.e-responsive.e-js .e-icon.e-ribdownarrow, .e-ribbon.e-responsive.e-js .e-icon.e-ribuparrow {
        & when (@skin= "material") {
            /*material*/
            -webkit-transition: -webkit-transform 0.3s ease-in-out;
            transition: -webkit-transform 0.3s ease-in-out;
            transition: transform 0.3s ease-in-out;
            transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
        }
    }

   .e-ribbon .e-expandcollapse .e-icon:after, .e-ribbon.e-responsive.e-js .e-ribuparrow.e-icon:after, .e-ribbon.e-responsive.e-js .e-ribdownarrow.e-icon:after {
        & when (@skin= "material") {
            /*material*/
            .e-ribbonripple-style();
        }
    }

    .e-ribbon .e-expandcollapse .e-icon:not(:active):after, .e-ribbon.e-responsive.e-js .e-ribuparrow.e-icon:not(:active):after, .e-ribbon.e-responsive.e-js .e-ribdownarrow.e-icon:not(:active):after {
        & when (@skin= "material") {
            /*material*/
            .e-ribbonripple-animation();
        }
    }

    .e-ribbonripple-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: 40%;
        height: 40%;
        left: 30%;
        top: 30%;
    }

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

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

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

    .e-ribbon .e-backstageli:after {
        & when (@skin="material") {
            content: '';
            visibility: hidden;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            box-sizing: border-box;
            left: 50%;
            width: 1px;
            height: 1px;
            background-color: transparent;
            border-width: 1px;
        }
    }

    .e-ribbon .e-backstageli:not(:active):after {
        & when (@skin="material") {
            animation: ribbon-shadow 1.6s ease-out 0ms;
        }
    }

    .e-ribbon li.e-backstageli:focus:after, .e-ribbon li.e-bsmaterial-focus:after {
        & when (@skin="material") {
            visibility: visible;
        }
    }

    .e-ribbon li.e-backstageli:focus, .e-ribbon li.e-backstageli a:focus {
        & when (@skin="material") {
            outline: none;
        }
    }

    .e-ribbon .e-backstageli, .e-ribbon.e-responsive.e-js .e-resizegroupdiv {
        & when (@skin="material") {
            position: relative;
            overflow: hidden;
        }
    }

    @keyframes ribbon-shadow {
        0% {
            box-shadow: 0 0 0 0px rgba(255,255,255,0.5);
            border-color: rgba(255,255,255,0.5);
        }

        100% {
            box-shadow: 0 0 0 200px rgba(255,255,255,0.12);
        }
    }

    .e-ribbon.e-rtl.e-js .e-menu .e-list > ul .e-list a {
        & when (@skin="material") {
            padding-right: 8px;
        }
    }

    .e-ribbon.e-rbnwithqat .e-rbnqatmenu .e-qatmorecommands, .e-ribbon.e-rbnwithqat .e-rbnqatmenu .e-rbnshowbelow {
        & when (@skin= "material") {
            padding-top: 4px;
            height: 22px;
            padding-bottom: 3px;
        }
    }

    .e-ribbon.e-rbnwithqat.e-js .e-rbnquickaccessbar .e-tbtn.e-btn:not(:active):after {
        & when (@skin= "material") {
            animation: ribbonqat-shadow 1.6s ease-out 0ms;
        }
    }

    @keyframes ribbonqat-shadow {
        0% {
            box-shadow: 0 0 0 0px rgba(255,255,255,0.5);
            border-color: rgba(255,255,255,0.5);
        }

        100% {
            box-shadow: 0 0 0 200px rgba(255,255,255,0.12);
        }
    }

    .e-ribbon .e-groupdiv .e-extracontent .e-gallerymenu.e-menu .e-list > ul .e-list a {
        & when (@skin= "material") {
            height: 28px;
            padding-top: 6px;
            padding-bottom: 0px;
        }
    }

    .e-ribbon.e-js .e-groupdiv .e-menu.e-gallerymenu {
        & when (@skin= "material") {
            box-shadow: none;
        }
    }

    .e-ribbon.e-rbnwithqat.e-js .e-rbnquickaccessbar .e-rbn-button.e-btn {
        & when (@skin= "material") {
            padding: 4px;
        }
    }

    .e-ribbon.e-rbnwithqat.e-js .e-rbnquickaccessbar .e-rbn-button.e-btn.e-splitbtnqat {
        & when (@skin= "material") {
            padding: 0px;
        }
    }

    .e-ribbon.e-js .e-groupdiv .e-gallerymenu.e-menu .e-list > .e-menulink > span.e-icon.e-arrowhead-down, .e-ribbon.e-js .e-groupdiv .e-gallerymenu.e-menu .e-list > .e-menulink > span.e-icon.e-arrowhead-right {
        & when (@skin= "material") {
            top: 18%;
        }
    }

    .e-ribbon.e-js .e-split .e-in-wrap .e-left-btn .e-icon, .e-ribbon.e-js .e-split .e-in-wrap .e-left-btn .e-icon:before {
        & when (@skin= "material") {
            height: 14px;
            width: 14px;
            vertical-align: baseline;
        }
    }

    .e-ribbon.e-js .e-content.e-active-content .e-rbn-splitbtn.e-js {
        & when (@skin= "material") {
            padding-bottom: 15px;
        }
    }

    .e-ribbon.e-js .e-split.e-drop .e-in-wrap .e-left-btn .e-split-btn-div .e-icon, .e-ribbon.e-js .e-split.e-drop .e-in-wrap .e-left-btn .e-split-btn-div .e-icon:before {
        & when (@skin= "material") {
            height: 18px;
            width: 18px;
            font-size: 14px;
        }
    }

    .e-ribbon.e-js .e-rbnquickaccessbar .e-rbn-splitbtn.e-rbn-button.e-btn.e-js {
        & when (@skin= "material") {
            padding-right: 15px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-responsivetabli {
        & when (@skin= "material") {
            padding: 14px 15px 14px 18px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-groupresponsive.e-ribleftarrow {
        & when (@skin= "material") {
            padding-top: 18px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-groupresponsive.e-ribuparrow, .e-ribbon.e-responsive.e-js .e-groupresponsive.e-ribdownarrow {
        & when (@skin= "material") {
            padding-right: 0px;
            padding-top: 0px;
            width: 24px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-groupresponsive.e-ribuparrow:before, .e-ribbon.e-responsive.e-js .e-groupresponsive.e-ribdownarrow:before {
        & when (@skin= "material") {
            top: 0px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-mobribgroup .e-ribupdivarrow {
        & when (@skin= "material") {
            position: relative;
            top: 4px;
            left: -6px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-resbackstage {
        & when (@skin= "material") {
            padding-right: 0px;
        }
    }

    .e-ribbon.e-responsive.e-js > .e-header .e-apptab.e-backstagetab {
        & when (@skin= "material") {
            margin-right: 16px !important;
        }
    }

    .e-ribbon.e-responsive.e-js .e-header li a {
        & when (@skin= "material") {
            padding-top: 4px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-ribresmenu .e-icon:before {
        & when (@skin= "material") {
            font-size: 14px;
            left: -2px;
            top: 2px;
        }
    }

    .e-ribbon.e-responsive.e-js > .e-header .e-responsiveqat .e-icon {
        & when (@skin= "material") {
            margin-top: 4px;
        }
    }

    .e-ribbon.e-js .e-rbn-button.e-btn.e-resizebtn {
        & when (@skin= "material") {
            padding: 0px;
        }
    }

    .e-ribbon.e-js .e-rbn-button.e-btn.e-btn-normal, .e-ribbon.e-js .e-rbn-button.e-tbtn.e-btn-normal {
        & when (@skin= "material") {
            height: 24px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-respcontent .e-resizebtn {
        & when (@skin= "material") {
            height: 48px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-rbn-button.e-button .e-btntxt {
        & when (@skin= "material") {
            padding-top: 10px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-respcontent .e-resizebtn .e-btntxt {
        & when (@skin= "material") {
            padding-top: 15px;
        }
    }

    .e-ribbon.e-responsive.e-js .e-responsivebackstagecontent .e-backstageTitle {
        & when (@skin= "material") {
            font-size: 17px;
            font-family: @font-family;
        }
    }

    .e-ribbon.e-js .e-rbn-button.e-btn.e-btn-normal.e-resizebtn {
        & when (@skin= "material") {
            height: auto;
        }
    }

    .e-ribbon.e-js .e-groupdiv .e-rbn-button.e-galleryextrabtn {
        & when (@skin= "material") {
            height: 36px;
        }
    }
    /*------------------------------Ribbon End-------------------------------*/
}



/*------------------------------------- Document Editor -------------------------------------------*/
.mixin(@widget) when (@widget = documenteditor), (@widget = none) {

    .e-de-table-properties-alignment:hover {
        border-color: #08aeff;
    }

    .e-de-table-properties-alignment {
        border-style: solid;
        border-width: 2px;
        border-color: transparent;
    }

    .e-de-tablecell-alignment {
        border-style: solid;
        border-width: 2px;
        border-color: transparent;
    }

    .e-de-tablecell-alignment:hover {
        border-color: #08aeff;
    }

    .e-de-table-left-alignment {
        background-image: url('@{font-path}/documenteditor/tableleftalignment.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

    .e-de-table-center-alignment {
        background-image: url('@{font-path}/documenteditor/tablecenteralignment.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

    .e-de-table-right-alignment {
        background-image: url('@{font-path}/documenteditor/tablerightalignment.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

    .e-de-tablecell-top-alignment {
        background-image: url('@{font-path}/documenteditor/celltopalignment.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

    .e-de-tablecell-center-alignment {
        background-image: url('@{font-path}/documenteditor/cellcenteralignment.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

    .e-de-tablecell-bottom-alignment {
        background-image: url('@{font-path}/documenteditor/cellbottomalignment.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

    .e-de-table-alignment-active {
        border-style: solid;
        border-width: 2px;
        border-color: #008bce;
    }

    .e-de-table-border-setting {
        width: 30px;
        height: 30px;
        top: 4px;
        left: 4px;
        position: absolute;
    }

    .e-de-table-border-setting:hover {
        border: 2px solid #08aeff;
    }

    .e-de-table-border-preview {
        width: 14px;
        height: 14px;
        top: 2px;
        left: 2px;
        position: absolute;
    }

    .e-de-table-border-preview:hover {
        border: 2px solid #08aeff;
    }

    .e-de-table-border-setting-click {
        border: 2px solid blue;
    }

    .e-de-table-border-preview-click {
        border: 2px solid blue;
    }
}
/*------------------------------------- Document Editor End-------------------------------------------*/

.mixin(@widget) when (@widget = spreadsheet), (@widget = none) {
    /*-------------------------------------SpreadSheet core -----------------------*/
    ej-spreadsheet {
        display: block;
    }

    .e-spreadsheet {
        height: auto;
        outline: none;
        line-height: 1.428571429;
        -webkit-user-select: none; /* Chrome all / Safari all */
        -moz-user-select: none; /* Firefox all */
        -ms-user-select: none; /* IE 10+ */
        -o-user-select: none;
        border: 1px solid;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .e-spreadsheet .e-spreadsheet-list {
        position: relative;
    }

    .e-spreadsheet h6 {
        font-size: 12px;
        font-weight: 500;
    }

    .e-spreadsheet label,
    .e-ss-dialog label {
        font-size: 14px;
    }

    .e-ss-dialog input[type="submit"],
    .e-ss-dialog input[type="button"],
    .e-ss-dialog button {
        font-weight: normal;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-spreadsheetcolumnheader {
        border-bottom: 1px solid;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-headercell {
        height: 20px;
        background: none repeat scroll 0 0;
        border-width: 0 1px 1px 0;
        border-style: solid;
        font-weight: normal;
        font-size: 11pt;
        padding: 0 0.25em 0 0;
        text-align: center;
        text-overflow: ellipsis;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-headercell {
        & when (@skin= "material") {
            font-size: @spreadsheet-font-size;
            font-family: @spreadsheet-font-family;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-headercontent {
        border-right: 1px solid;
        border-left: 1px solid;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-headercontent.e-rmvrghtbdr,
    .e-spreadsheet .e-spreadsheetcontentcontainer .e-content.e-rmvrghtbdr td:last-child {
        border-right-color: transparent;
    }

    .e-spreadsheet .e-rowheadercontent {
        border-bottom: 1px solid;
    }

    .e-spreadsheet .e-rowheadercontent.e-rmvbtmbdr,
    .e-spreadsheet .e-rowheadercontent.e-rmvbtmbdr tr:last-child td,
    .e-spreadsheet .e-spreadsheetcontentcontainer .e-content.e-rmvbtmbdr tr:last-child td {
        border-bottom-color: transparent;
    }

    .e-spreadsheet .e-rowheader {
        text-align: center;
        vertical-align: bottom;
        display: table-cell;
        border-width: 0 1px 1px 0;
        border-style: solid;
        font-size: 11pt;
        line-height: 14px;
        padding: 0 1px 3px 1px;
    }

    .e-spreadsheet .e-rowheader {
        & when (@skin= "material") {
            font-size: @font-size;
            font-family: @font-family;
        }
    }

    .e-spreadsheet .e-table {
        border: 0 none;
        border-collapse: separate;
        margin-top: 0;
        table-layout: fixed;
        width: 100%;
        border-spacing: 0;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-rowcell {
        border-width: 0 1px 1px 0;
        border-style: solid;
        line-height: normal;
        width: auto;
        overflow: visible;
        vertical-align: bottom;
        padding: 0px 1px 0px 2px;
    }

    .e-spreadsheet .e-wrapword {
        white-space: pre;
    }

    .e-spreadsheet .e-rowcell.e-overflow {
        overflow: hidden;
        text-overflow: clip;
    }

    .e-spreadsheet .e-rowcell.e-foverflow,
	.e-spreadsheet .e-rowcell.e-moverflow, 
	.e-spreadsheet .e-rowcell.e-soverflow {
        overflow: hidden;
        text-overflow: clip;
    }

    .e-spreadsheet .e-cellreadonly {
        vertical-align: top;
        text-align: center;
        margin-top: 2px;
        padding: 0px;
    }

    .e-spreadsheet .e-cellreadonly .e-chkbox-wrap .e-chkbox-small > span {
        height: 13px;
        top: 2px;
        margin: 0 2px 0 2px;
    }

    .e-spreadsheet .e-rightalign .e-chkbox-wrap div > span {
        text-align: right;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-rowcell > button {
        font-size: 9px;
    }

    .e-spreadsheet .e-cellreadonly .e-datewidget .e-icon {
        font-size: 19px;
        margin-top: -10px;
        padding-left: 0.5px;
    }

    .e-spreadsheet .e-cellreadonly .e-datewidget .e-select {
        border: 0px;
    }

    .e-spreadsheet .e-cellreadonly .e-ddl .e-select {
        border: 0px;
    }

    .e-spreadsheet .e-ss-cursor {
        cursor: cell;
    }

    .e-spreadsheet .e-spreadsheetheader .e-ss-selectall {
        float: left;
        width: 29px;
        height: 20px;
    }

    .e-spreadsheet .e-scrollcss {
        padding-right: 17px;
        background: none repeat scroll 0 0;
    }

    .e-spreadsheet .e-scrollrowcss {
        padding-bottom: 18px;
        background: none repeat scroll 0 0;
    }

    .e-spreadsheet .e-spreadsheetrowheader {
        overflow: hidden;
        box-sizing: content-box;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-headercontent,
    .e-spreadsheet .e-spreadsheetmainpanel .e-rowheadercontent,
    .e-spreadsheet .e-spreadsheetmainpanel .e-headercell,
    .e-spreadsheet .e-spreadsheetmainpanel .e-spreadsheetcontentcontainer {
        overflow: hidden;
        position: relative;
    }

    .e-spreadsheet .e-content {
        position: relative;
    }

    .e-spreadsheet .e-spreadsheetactpanel .e-content {
        position: static;
    }

    .e-spreadsheet .e-spreadsheetactpanel {
        border-left: 1px solid;
    }

    .e-spreadsheet .e-spreadsheetactpanel .e-ss-pivotfield {
        border: none;
    }

    .e-spreadsheet .e-spreadsheetactpanel .e-pivotschemadesigner .fieldTable {
        width: 90%;
    }

    .e-spreadsheet .e-ralign {
        text-align: right;
    }

    .e-spreadsheet .e-rightalign {
        direction: rtl;
        unicode-bidi: plaintext;
		-moz-unicode-bidi: plaintext;
    }

    .e-spreadsheet .e-calign {
        text-align: center;
    }

    .e-spreadsheet .e-ss-virtualtop, 
	.e-spreadsheet .e-ss-virtualbottom {
        height: 0px;
        display: block;
    }
	.e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-icon {
        display: inline-block;
        box-sizing: content-box;
    }
    /*---------------------------- Spreadhsheet Scroller Start----------------------------------------*/
    .e-spreadsheet .e-spreadsheetcontentcontainer .e-scrollbar.e-hscrollbar {
        float: left;
    }

   .e-spreadsheet .e-spreadsheetcontentcontainer .e-scrollbar.e-vscrollbar {
        float: right;
    }

    .e-spreadsheet .e-spreadsheetcontentcontainer .e-content {
        position: relative;
        float: left;
        overflow: hidden;
    }
    /*---------------------------- Spreadhsheet Scroller End----------------------------------------*/
    /*-------------------- Borders ------------------------ */
    .e-spreadsheet .e-spreadsheetmainpanel td.e-bborderright,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-rborderright,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-vborderright,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-gborderright,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-pborderright,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-oborderright,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-bctrlborderright,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-rctrlborderright,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-vctrlborderright,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-gctrlborderright,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-pctrlborderright,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-octrlborderright {
        border-right: 1px dashed;
    }

    .e-spreadsheet .e-spreadsheetmainpanel td.e-bborderbottom,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-rborderbottom,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-vborderbottom,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-gborderbottom,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-pborderbottom,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-oborderbottom,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-bctrlborderbottom,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-rctrlborderbottom,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-vctrlborderbottom,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-gctrlborderbottom,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-pctrlborderbottom,
    .e-spreadsheet .e-spreadsheetmainpanel td.e-octrlborderbottom {
        border-bottom: 1px dashed;
    }
    /*--------------------- Chart Borders -----------------------*/
   .e-spreadsheet .e-spreadsheetmainpanel td.e-bcborderright,
   .e-spreadsheet .e-spreadsheetmainpanel td.e-vcborderright,
   .e-spreadsheet .e-spreadsheetmainpanel td.e-rcborderright {
        border-right: 1px solid;
    }

   .e-spreadsheet .e-spreadsheetmainpanel td.e-bcborderbottom,
   .e-spreadsheet .e-spreadsheetmainpanel td.e-vcborderbottom,
   .e-spreadsheet .e-spreadsheetmainpanel td.e-rcborderbottom {
        border-bottom: 1px solid;
    }
    /*--------------------- Border -------------------------- */
    .e-spreadsheet .e-spreadsheetmainpanel .e-thinborderright {
        border-right: 1px solid;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-thinborderbottom {
        border-bottom: 1px solid;
    }
    /*--------------------- Selection -------------------------- */
    .e-spreadsheet .e-focustop, .e-spreadsheet .e-focusright, .e-spreadsheet .e-focusbottom, .e-spreadsheet .e-focusleft {
        position: absolute;
    }

    .e-spreadsheet div.e-selecttop {
        border-top: 2px solid;
    }

    .e-spreadsheet div.e-selectright {
        border-right: 2px solid;
    }

    .e-spreadsheet div.e-selectbottom {
        border-bottom: 2px solid;
    }

    .e-spreadsheet div.e-selectleft {
        border-left: 2px solid;
    }
    /*--------------------- Auto Fill -------------------------------*/
    .e-spreadsheet div.e-autofilltop {
        border-top: 2px solid;
    }

    .e-spreadsheet div.e-autofillright {
        border-right: 2px solid;
    }

    .e-spreadsheet div.e-autofillbottom {
        border-bottom: 2px solid;
    }

    .e-spreadsheet div.e-autofillleft {
        border-left: 2px solid;
    }

    .e-spreadsheet .e-autofill {
        width: 5px;
        height: 5px;
        border: 1px solid white;
        background-clip: content-box;
        position: absolute;
        cursor: crosshair;
    }
    /*--------------------- Cut and Copy ------------------------ */
    .e-spreadsheet .e-spreadsheetmainpanel td.e-cutright {
        border-right: 1px dashed;
    }

    .e-spreadsheet .e-spreadsheetmainpanel td.e-cutbottom {
        border-bottom: 1px dashed;
    }
    /*------------------------- Pager------------------------- */
    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-mediaforward {
        border-right: solid 1px;
        border-radius: 0;
    }

    .e-spreadsheet .e-splitspan {
        position: absolute;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-new {
        height: 100%;
        padding: 0 4px 2px 8px;

        & when not (@skin = "office-365") {
            vertical-align: middle;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager {
        padding-bottom: 0px;
        padding-top: 0px;
        outline: 0px;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager,
    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-pagercontainer {
        border-style: none;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-currentitem {
        & when not (@skin= "material") {
            border-bottom: solid;
        }

        & when (@skin= "material") {
            border-top: solid;
            background: none;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-numericitem {
        padding-right: 9px;
        padding-left: 9px;
        padding-bottom: 4px;
        padding-top: 3px;

        & when (@skin = "office-365") {
            padding-bottom: 6px;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-numericitem {
        & when (@skin = "material") {
            border-right: none;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-firstpage,
    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-prevpage,
    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-firstpagedisabled,
    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-prevpagedisabled,
    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-nextpage,
    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-lastpage,
    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-nextpagedisabled,
    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-lastpagedisabled {
        padding: 7px 3px 0px 7px;

        & when (@skin = "office-365") {
            padding: 0;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-pagercontainer {
        overflow: visible;
        height: 24px;

        & when (@skin = "office-365") {
            height: 32px;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-pagercontainer {
        & when (@skin= "material") {
            margin-left: 18px;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-pagercontainer div {
        & when (@skin= "material") {
            border: none;
        }
    }

    .e-spreadsheet .e-spreadsheetfooter .e-table td {
        padding: 0;
    }

    .e-spreadsheet .e-spreadsheetfooter {
        border-top: 1px solid;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-spreadsheetfooter {
        & when (@skin= "material") {
            height: 35px;
        }
    }

    .e-spreadsheet .e-pager .e-pagercontainer {
        float: none;
    }
    /*--------------------- Resizing----------------------------- */
    .e-spreadsheet .e-reSizeColbg {
        position: absolute;
        border-left-width: 1px;
        border-left-style: dotted;
    }

    .e-spreadsheet .e-reSizeAPbg {
        position: absolute;
        border-left-width: 2px;
        border-left-style: dotted;
    }

    .e-spreadsheet .e-reSizeRowbg {
        position: absolute;
        border-top-width: 1px;
        border-top-style: dotted;
    }

    .e-spreadsheet .e-sswraptext {
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .e-spreadsheet .e-alt-unwrap {
        white-space: nowrap;
    }

    .e-spreadsheet .e-spreadsheetmainpanel,
    .e-spreadsheet .e-spreadsheetactpanel {
        font-family: Calibri;
        font-size: 11pt;
    }

    .e-spreadsheet .e-spreadsheetactpanel {
        float: right;
    }

    .e-spreadsheet .e-spreadsheetmainpanel {
        float: left;
    }
    /*--------------------- Manual Reorder----------------------------- */
    .e-spreadsheet .e-cursormove {
        cursor: move;
    }
    /*--------------------- Chart ----------------------------- */
    /*-------------------- Alert Dialog ------------------ */
    .e-ss-dialog .e-alertDlg {
        width: 200px;
        float: right;
    }

    .e-ss-dialog .e-alertok {
        margin-left: 100px;
        margin-top: 30px;
    }

    .e-spreadsheet .e-filterspan {
        cursor: pointer;
        width: 15px;
        height: 15px;
        float: right;
        vertical-align: bottom;
        position: relative;
    }

     .e-ss-dialog.e-filterdlg .e-textdiv,  .e-ss-dialog.e-filterdlg .e-operdiv {
        padding: 18px;
    }

     .e-ss-dialog.e-filterdlg .e-fltrbtndiv {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

     .e-ss-dialog.e-filterdlg .e-filter,  .e-ss-dialog .e-filterdlg .e-clear {
        margin-right: 10px;
    }

     .e-ss-dialog .e-insertdlgbtndiv {
        margin-left: 3px;
        margin-top: 0px;
    }

     .e-ss-dialog .e-contentdialog {
        height: 115px;
    }

     .e-ss-dialog .e-contentdialog td {
        padding-left: 10px;
    }
    /* ------------------------ Formula Tab ----------------- */
    .e-spreadsheet .e-in-wrap {
        background-color: inherit;
        color: inherit;
    }

    .e-spreadsheet .e-excelfilter .e-in-wrap {
        border: 1px solid;
    }

    .e-spreadsheet .e-formulabar {
        width: 100%;
        height: 36px;
        font-family: Calibri;
        font-size: 11pt;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: flex;
    }

    .e-spreadsheet .e-indexbox, .e-spreadsheet .e-insertbox {
        float: left;
        margin: 5px;
        border: 1px solid;
        height: 24px;
        font-size: 13px;
        line-height: 23px;
        color: black;
        text-align: center;
        box-sizing: content-box;
    }

    .e-spreadsheet .e-formulabar {
        & when (@skin= "material") {
            height: 42px;
        }
    }

    .e-spreadsheet .e-indexbox {
        & when (@skin= "material") {
            margin: 8px 12px 8px 24px;
        }
    }

    .e-ss-autocomplete .e-ss-function:before {
        content: "\e6a3";
        font-family: "ej-xlfont";
        font-size: 16px;
        float: left;
        height: 20px;
        width: 23px;
    }

    .e-spreadsheet .e-inputbox {
        & when (@skin= "material") {
            margin: 8px 24px 8px 12px;
        }

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

    .e-spreadsheet .e-inputbox > input {
        height: 100%;
        width: 100%;
        background-color: transparent;
        border: medium none;
    }

    .e-spreadsheet .e-ss-input {
        position: absolute;
        overflow: hidden;
        text-indent: 0px;
        width: 100%;
        padding: 0px 0px 0px 2px;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-editedcell {
        padding: 0px 1px 0px 0px;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-editedcell.e-msie-edit {
        padding: 0px;
    }
    /*------------------------- Validation---------------------- */
    .e-spreadsheet div.e-error .e-errortail {
        height: 0;
        width: 0;
        position: relative;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid;
    }

    .e-spreadsheet .e-ss-findselect {
        height: 29px;
    }

    .e-spreadsheet .e-ss-calcopt {
        height: 29px;
    }
    /*------ Dialog CSS-------*/
    .e-ss-dialog .e-conok {
        margin-right: 5px;
    }

    .e-ss-dialog .e-numberContent .e-numeric {
        float: right;
        margin-right: 100px;
    }

    .e-ss-dialog .e-dlgleft .e-listbox > li {
        padding: 4px;
    }

    .e-spreadsheet label, .e-ss-dialog .e-cfdiv label,.e-ss-dialog .e-ss-dlgtab label, .e-ss-dialog .e-ss-dlgtabval label, .e-ss-dialog label, .e-ss-dialog .e-widget-content td {
        font-weight: normal;
    }

    .e-ss-dialog .e-dlgtab .e-header,
    .e-ss-dialog .e-valdlgtab .e-header {
        height: 35px;
    }

    .e-ss-dialog .e-dlgtab .e-header li,
    .e-ss-dialog .e-valdlgtab .e-header li {
        height: 35px;
    }

    .e-ss-dialog .e-valdlgtab {
        margin: 10px;
    }

    .e-ss-dialog .e-subtab {
        margin: 6px 10px 13px;
    }

    .e-ss-dialog .e-numbercontent .e-chkbox-wrap,
    .e-ss-dialog .e-accountingcontent .e-chkbox-wrap {
        padding: 5px;
    }

    .e-ss-dialog .e-ss-clearval:before {
        content: "\e60b";
        font-size: 20px;
    }

    .e-spreadsheet .e-error div.e-field-validation-error {
        border-radius: 7px;
        font-size: 14px;
        padding: 7px;
    }

    .e-spreadsheet .e-ss-editinput, .e-cell-ac > .e-in-wrap {
        display: none;
    }

    .e-ss-dialog div.e-dlg-field-validation-error {
        border-radius: 7px;
        font-size: 14px;
        padding: 6px;
        position: absolute;
        font-size: 12px;
        line-height: 10px;
    }

    .e-ss-dialog div.e-dlg-field-validation-error:before {
        content: "";
        position: absolute;
        top: -17px;
        left: 10px;
        border-bottom: 10px solid;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid transparent;
    }

    .e-spreadsheet div.e-error .e-toparrow {
        left: 10%;
        display: block;
    }

    .e-spreadsheet div.e-error {
        position: absolute;
    }

    .e-ssr-validationsbtn {
        text-indent: -13px;
        line-height: 1px;
        text-align: center;
    }
    /* -------------------Font Icons ------------------- */
    @font-face {
        font-family: 'ej-xlfont';
        src: url('@{font-path}/spreadsheet/ejxlicons.eot?-dzszjm');
        src: url('@{font-path}/spreadsheet/ejxlicons.eot?#iefix-dzszjm') format('embedded-opentype'), url('@{font-path}/spreadsheet/ejxlicons.woff?-dzszjm') format('woff'),url('@{font-path}/spreadsheet/ejxlicons.woff') format('woff'), url('@{font-path}/spreadsheet/ejxlicons.ttf?-dzszjm') format('truetype'), url('@{font-path}/spreadsheet/ejxlicons.svg?-dzszjm#ejssicons') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    /*-------------------------SpreadSheet Ribbon icons Customization--------------------*/
    .e-spreadsheet .e-ssr-verticalHparent .e-splitbutton.e-select:enabled {
        border: 1px solid transparent;
        border-top: 0px;
    }

    .e-spreadsheet .e-ssr-verticalHparent .e-button.e-select:enabled {
        border: 1px solid transparent;
        border-bottom: 0px;
    }

    .e-spreadsheet .e-ssr-verticalHparent .e-active, .e-spreadsheet .e-ssr-verticalHparent .e-active .e-splitbutton.e-select {
        border: 0px;
    }

    .e-spreadsheet .e-ssr-verticalHparent .e-button.e-select:enabled {
        border: 1px solid transparent;
        border-bottom: 0px;
    }

    .e-spreadsheet .e-ssr-verticalHparent .e-active, .e-spreadsheet .e-ssr-verticalHparent .e-active .e-splitbutton.e-select {
        border: 0px;
    }

    .e-spreadsheet .e-split .e-in-wrap.e-ssr-horizontalprt .e-drp-btn.e-split-btn:enabled {
        border: 1px solid transparent;
        border-left: none;
    }

    .e-spreadsheet .e-split .e-in-wrap.e-ssr-horizontalprt .e-splitbutton.e-split-btn:enabled {
        border: 1px solid transparent;
        border-right: none;
    }

    .e-spreadsheet .e-ssr-verticalHparent .e-controlpadding {
        padding: 0px;
    }

    .e-spreadsheet .e-splitarrowright.e-ssr-horizontalprt .e-split-btn.e-rht-btn {
        width: 13px;
    }

    .e-spreadsheet .e-split .e-padding.e-splitarrowright.e-ssr-horizontalprt {
        padding: 0 13px 0 0;
    }

    .e-spreadsheet .e-ss-colorpicker .e-in-wrap.e-ssr-colpickHprt .e-ssr-colorcontainer {
        border: 1px solid transparent;
        height: 24px;
    }

    .e-spreadsheet .e-ss-colorpicker .e-in-wrap.e-ssr-colpickHprt .e-tool-icon.e-ss-fontcolor {
        padding: 1px 4px 2px;
    }

    .e-spreadsheet .e-ss-colorpicker .e-in-wrap.e-ssr-colpickHprt .e-tool-icon.e-ss-backgroundcolor {
        padding: 0px 3px 2px;
    }

    .e-spreadsheet .e-ssr-newcmnt + .e-btntxt,
    .e-spreadsheet .e-ssr-editcmnt + .e-btntxt,
    .e-spreadsheet .e-ssr-deletecmnt + .e-btntxt,
    .e-spreadsheet .e-ssr-previouscmnt + .e-btntxt,
    .e-spreadsheet .e-ssr-nextcmnt + .e-btntxt {
        line-height: 64px;
    }

    .e-spreadsheet .e-ssr-newcmnt + .e-btntxt {
        text-indent: -2px;
    }

    .e-spreadsheet .e-findbtn .e-btntxt,
    .e-spreadsheet .e-fpanebtn .e-btntxt {
        line-height: 14px;
        text-indent: 4px;
        text-align: left;
        width: 42px;
    }

    .e-spreadsheet .e-coptbtn .e-btntxt {
        line-height: 14px;
        text-indent: -1px;
    }

    .e-spreadsheet .e-deletesbtn .e-btntxt,
    .e-spreadsheet .e-insertsbtn .e-btntxt {
        text-indent: 8px;

        & when (@skin = "material") {
            padding-bottom: 10px;
        }
    }

    .e-spreadsheet .e-ssr-range + .e-btntxt {
        line-height: 15px;
    }

    .e-spreadsheet .e-ssr-charttype + .e-btntxt,
    .e-spreadsheet .e-ssr-srcolumn + .e-btntxt,
    .e-spreadsheet .e-formatastablebtn .e-btntxt,
    .e-spreadsheet .e-ssr-namemngr + .e-btntxt,
    .e-spreadsheet .e-ssr-protectsheet + .e-btntxt {
        line-height: 14px;
    }

    .e-spreadsheet .e-ssr-selectdata + .e-btntxt {
        line-height: 14px;
        padding-left: 1px;
    }

    .e-spreadsheet .e-ssr-print + .e-btntxt {
        padding-top: 5px;
    }

    .e-spreadsheet .e-ssr-filter + .e-btntxt {
        line-height: 25px;
    }

    .e-spreadsheet .e-ssr-pivottable + .e-btntxt,
    .e-spreadsheet .e-ssr-hyperlink + .e-btntxt,
    .e-spreadsheet .e-ssr-pictures + .e-btntxt,
    .e-spreadsheet .e-ssr-table + .e-btntxt {
        padding-top: 6px;
    }

    .e-ss-dialog.e-ss-chart .e-chartcontent {
        height: 40px;
    }

    .e-spreadsheet .e-cformatbtn .e-btntxt {
        line-height: 14px;
        text-align: left;
        text-indent: 4px;
        width: 67px;
    }

    .e-spreadsheet .e-cellstylebtn .e-btntxt {
        line-height: 14px;
        text-indent: 10px;
        text-align: left;
        width: 38px;
    }

    .e-spreadsheet .e-sortfltrbtn .e-btntxt {
        line-height: 14px;
        text-align: left;
        width: 35px;
        padding-top: 3px;

        & when (@skin = "material") {
            width: 38px;
        }
    }

    .e-spreadsheet .e-ssr-validationsbtn .e-btntxt {
        line-height: 14px;
        width: 71px;

        & when not (@skin = "material") {
            text-indent: 18px;
            padding-left: 8px;
            text-align: left;
        }

        & when (@skin = "material") {
            text-indent: 6px;
            padding-left: 4px;
            padding-bottom: 3px;
        }
    }

    .e-spreadsheet .e-clearbtn .e-btntxt {
        & when not (@skin = "material") {
            padding-bottom: 16px;
        }
    }

    .e-spreadsheet .e-autosumbtn .e-btntxt {
        padding-bottom: 6px;
    }

    .e-spreadsheet .e-ssr-cut + .e-btntxt,
    .e-spreadsheet .e-ssr-copy + .e-btntxt,
    .e-spreadsheet .e-ss-formatpainter + .e-btntxt {
        padding-bottom: 4px;
    }

    .e-spreadsheet .e-mergebtn .e-btntxt {
        & when not (@skin = "material") {
            text-indent: -16px;
            line-height: 15px;
        }
    }

    .e-spreadsheet .e-ssr-definename + .e-btntxt {
        text-indent: -6px;
    }

    .e-spreadsheet .e-ss-calcsheet + .e-btntxt {
        text-indent: 2px;
    }

    .e-spreadsheet .e-useinformulabtn .e-btntxt {
        text-indent: -9px;
    }

    .e-spreadsheet .e-ssr-pastesbtn .e-btntxt {
        text-indent: 6px;
        padding-bottom: 7px;
    }

    .e-spreadsheet .e-chartlayoutbtn .e-btntxt {
        line-height: 14px;
        text-align: left;
        text-indent: -2px;
        width: 53px;

        & when (@skin = "material"), (@skin = "office-365") {
            width: 58px;
        }
    }
    /* -------------------Clipboard Font Icons ------------------- */
    .e-spreadsheet .e-ssr-pastesbtn {
        text-indent: -12px;
    }

     .e-ss-cut:before {
        content: "\e601";
        font-family: "ej-xlfont";
    }

    .e-spreadsheet .e-ssr-cut:before {
        content: "\e601";
        font-family: "ej-xlfont";
        text-indent: -8px;
        font-size: 15px;
        line-height: 13px;
    }

    .e-spreadsheet .e-ssr-copy:before {
        content: "\e602";
        font-family: "ej-xlfont";
        font-size: 15px;
        text-indent: -6px;
        line-height: 13px;
    }

     .e-ss-copy:before {
        content: "\e602";
        font-family: "ej-xlfont";
        font-size: 15px;
        text-indent: -1px;
    }

     .e-ss-paste:before {
        content: "\e674";
        font-family: "ej-xlfont";
        font-size: 15px;
        line-height: 17px;
        text-indent: -1px;
    }

    .e-spreadsheet .e-ssr-paste:before {
        content: "\e600";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 20px;
        text-indent: -9px;
    }

    .e-spreadsheet .e-ss-formatpainter:before {
        content: "\e604";
        font-family: "ej-xlfont";
        font-size: 15px;
        text-indent: -1px;
        line-height: 14px;
    }
    /* -------------------Editing Font Icons ------------------- */
    .e-spreadsheet .e-new:before {
        content: "\e676";
        font-family: "ej-xlfont";
        font-size: 12px;
        line-height: 26px;
        text-indent: -1px;
    }

     .e-ssr-clear:before {
        content: "\e63a";
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 16px;
        text-indent: -4px;
        height: 30px;
    }

     .e-ss-clear:before {
        content: "\e63b";
        font-family: "ej-xlfont";
        font-size: 15px;
        text-indent: 0px;
    }

     .e-ss-clearformat:before {
        content: "\e63c";
        font-family: "ej-xlfont";
        font-size: 17px;
        text-indent: 2px;
    }

     .e-ssr-autosum:before {
        content: "\e690";
        font-family: "ej-xlfont";
        font-size: 16px;
        line-height: 13px;
        text-indent: -4px;
    }

     .e-ss-autosum:before {
        content: "\e690";
        font-family: "ej-xlfont";
        font-size: 16px;
        line-height: 14px;
        text-indent: 1px;
    }

     .e-ss-newsheet:before {
        content: "\e603";
        font-family: "ej-xlfont";
        font-size: 15px;
        text-indent: -3px;
        line-height: 8px;
    }

     .e-ss-open:before {
        content: "\e605";
        font-family: "ej-xlfont";
        font-size: 15px;
        line-height: 5px;
        text-indent: -3px;
    }
    /* -------------------Border Font Icons ------------------- */
     .e-ss-bottom:before,  .e-ss-top:before,  .e-ss-left:before,  .e-ss-right:before, .e-ss-noborder:before,  .e-ss-allborder:before,  .e-ss-outside:before,  .e-ss-thickbox:before,  .e-ss-thickbottom:before,  .e-ss-topandbottom:before,  .e-ss-topandthickbottom:before,  .e-ss-drawborder:before,  .e-ss-drawbordergrid:before,  .e-ss-doublebottom:before,  .e-ss-topanddoublebottom:before {
        font-family: "ej-xlfont";
        font-size: 15px;
        line-height: 15px;
        text-indent: 2px;
    }

     .e-ss-bottom:before {
        content: "\e63d";
    }

     .e-ss-top:before {
        content: "\e63e";
    }

     .e-ss-left:before {
        content: "\e63f";
    }

     .e-ss-right:before {
        content: "\e640";
    }

     .e-ss-noborder:before {
        content: "\e641";
    }

     .e-ss-allborder:before {
        content: "\e642";
    }

     .e-ss-outside:before {
        content: "\e643";
    }

     .e-ss-thickbox:before {
        content: "\e644";
    }

     .e-ss-thickbottom:before {
        content: "\e645";
    }

     .e-ss-topandbottom:before {
        content: "\e646";
    }

     .e-ss-topandthickbottom:before {
        content: "\e647";
    }

     .e-ss-drawborder:before {
        content: "\e648";
    }

     .e-ss-drawbordergrid:before {
        content: "\e649";
    }
     .e-ss-doublebottom:before {
        content:"\e90a";
    }
     .e-ss-topanddoublebottom:before {
        content:"\e909";
    }
     .e-ss-borderstyle:before,
     .e-ss-solid:before,
     .e-ss-dashed:before,
     .e-ss-dotted:before {
        content: "\e750";
        font-size: 18px;
    }

     .e-ss-bordercolor:before {
        content: "\e64b";
        font-family: "ej-xlfont";
        font-size: 18px;
    }
    /* -------------------Font Propertys Font Icons ------------------- */
    .e-spreadsheet .e-ss-backgroundcolor:before {
        content: "\e610";
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 19px;
        text-indent: -5px;
    }

    .e-spreadsheet .e-ss-fontcolor:before {
        content: "\e611";
        font-family: "ej-xlfont";
        font-size: 15px;
        line-height: 17px;
        text-indent: -5px;
    }

    .e-spreadsheet .e-ss-increasefontsize:before {
        content: "\e60e";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 15px;
    }

    .e-spreadsheet .e-ss-decreasefontsize:before {
        content: "\e60f";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 14px;
    }

    .e-spreadsheet .e-ss-bold:before {
        content: "\e609";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 13px;
    }

    .e-spreadsheet .e-ss-italic:before {
        content: "\e60a";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -3px;
        line-height: 15px;
    }

    .e-spreadsheet .e-ss-underline:before {
        content: "\e60b";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 14px;
    }

    .e-spreadsheet .e-ss-linethrough:before {
        content: "\e60d";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 16px;
    }

    .e-spreadsheet .e-ss-alignleft:before {
        content: "\e612";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -1px;
        line-height: 15px;
    }

    .e-spreadsheet .e-ss-aligncenter:before {
        content: "\e613";
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 13px;
        text-indent: -1px;
    }

    .e-spreadsheet .e-ss-alignright:before {
        content: "\e614";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -1px;
        line-height: 15px;
    }

    .e-spreadsheet .e-ss-alignjustify:before {
        content: "\e618";
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 14px;
        text-indent: -2px;
    }

    .e-spreadsheet .e-ss-decreaseindent:before {
        content: "\e61a";
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 14px;
        text-indent: -2px;
    }

    .e-spreadsheet .e-ss-increaseindent:before {
        content: "\e619";
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 12px;
        text-indent: -2px;
    }

    .e-spreadsheet .e-ss-wraptext:before {
        content: "\e61b";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 14px;
    }

    .e-spreadsheet .e-ss-topalign:before {
        content: "\e615";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 12px;
    }

    .e-spreadsheet .e-ss-middlealign:before {
        content: "\e616";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 14px;
    }

	.e-spreadsheet .e-ss-bottomalign:before {
        content: "\e617";
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 17px;
        text-indent: -2px;
    }

     .e-ss-addnew:before {
        content: "\e66c";
        font-family: "ej-xlfont";
        font-size: 15px;
    }

    .e-spreadsheet .e-ss-delete:before {
        content: "\e671";
        font-family: "ej-xlfont";
        font-size: 15px;
    }
    /* -------------------Number Font Icons ------------------- */
    .e-spreadsheet .e-ss-comma:before {
        content: "\e620";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 15px;
    }

    .e-spreadsheet .e-ss-accounting:before {
        content: "\e61e";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 15px;
    }

    .e-spreadsheet .e-ss-percentage:before {
        content: "\e61f";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 13px;
    }

    .e-spreadsheet .e-ss-increasedecimal:before {
        content: "\e621";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 13px;
    }

    .e-spreadsheet .e-ss-decreasedecimal:before {
        content: "\e622";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 13px;
    }

    .e-spreadsheet .e-ss-undo:before {
        content: "\e61c";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -9px;
        line-height: 2px;
    }

    .e-spreadsheet .e-ss-redo:before {
        content: "\e61d";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -9px;
        line-height: 2px;
    }

    .e-spreadsheet .e-ssr-find:before {
        content: "\e7e9";
        font-family: "ej-xlfont";
        font-size: 32px;
    }
    /* -------------------Merge Font Icons ------------------- */
    .e-spreadsheet .e-ssr-merge:before {
        content: "\e68e";
        font-family: "ej-xlfont";
        font-size: 16px;
        line-height: 14px;
        text-indent: -27px;
    }

    .e-menu .e-ss-merge:before, .e-menu .e-ss-mergecenter:before, .e-menu .e-ss-mergeacross:before, .e-menu .e-ss-unmerge:before {
        font-family: "ej-xlfont";
        font-size: 16px;
        line-height: 15px;
        text-indent: 2px;

        & when (@skin = "material") {
            line-height: 15px;
        }
    }

    .e-menu .e-ss-merge:before {
        content: "\e68d";
    }

    .e-menu .e-ss-mergecenter:before {
        content: "\e68e";
    }

    .e-menu .e-ss-mergeacross:before {
        content: "\e68c";
    }

    .e-menu .e-ss-unmerge:before {
        content: "\e68f";
    }
    /* -------------------Sorting Font Icons ------------------- */
    .e-menu .e-ss-sortatoz:before {
        content: "\e64f";
        font-family: "ej-xlfont";
        font-size: 15px;
        line-height: 17px;
        text-indent: -0px;
    }

    .e-menu .e-ss-sortztoa:before {
        content: "\e650";
        font-family: "ej-xlfont";
        font-size: 15px;
        line-height: 17px;
        text-indent: -0px;
    }

    .e-spreadsheet .e-ssr-sortatoz:before {
        content: "\e64f";
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 16px;
        text-indent: -4px;
    }

    .e-spreadsheet .e-ssr-sortztoa:before {
        content: "\e650";
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 16px;
        text-indent: -6px;
    }

    .e-menu .e-ssdrop-sortatoz:before {
        content: "\e64f";
    }

    .e-menu .e-ssdrop-sortztoa:before {
        content: "\e650";
    }
    /* -------------------Filtering Font Icons ------------------- */
    .e-menu .e-ssdrop-sortatoz:before, .e-menu .e-ssdrop-sortztoa:before, .e-menu .e-ssdrop-filter:before, .e-menu .e-ssdrop-clearfilter:before {
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 16px;
        text-indent: 1px;
    }

    .e-menu .e-ss-filter:before {
        content: "\e637";
        font-family: "ej-xlfont";
        font-size: 15px;
        line-height: 17px;
        text-indent: -0px;
    }

    .e-menu .e-ssdrop-filter:before {
        content: "\e637";
        text-indent: 0px;
    }

     .e-spreadsheet .e-ssfilter:before {
        content: "\e69d";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -8px;
        line-height: 15px;
    }

     .e-spreadsheet .e-ssfilter-asc:before {
        content: "\e6a1";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -8px;
    }

     .e-spreadsheet .e-ssfilter-dsc:before {
        content: "\e6a2";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -8px;
    }

    .e-spreadsheet .e-ssfiltered:before {
        content: "\e69e";
        font-family: "ej-xlfont";
        font-size: 17px;
        text-indent: -8px;
    }

    .e-spreadsheet .e-ssfiltered-asc:before {
        content: "\e6a0";
        font-family: "ej-xlfont";
        font-size: 17px;
        text-indent: -8px;
    }

    .e-spreadsheet .e-ssfiltered-dsc:before {
        content: "\e69f";
        font-family: "ej-xlfont";
        font-size: 17px;
        text-indent: -8px;
    }

    .e-ss-filternone:before {
        content: "\e668";
    }

    .e-spreadsheet .e-ssr-filter:before {
        content: "\e651";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -7px;
        line-height: 15px;

        & when (@skin = "material") {
            text-indent: -5px;
        }
    }

    .e-spreadsheet .e-ssr-filter .e-btntxt {
        line-height: 27px;
    }

    .e-spreadsheet .e-ss-clearfilter:before {
        content: "\e652";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -2px;
        line-height: 17px;
    }

    .e-menu .e-ssdrop-clearfilter:before {
        content: "\e652";
        text-indent: 3px;
    }
    /* -------------------Print Font Icons ------------------- */
    .e-spreadsheet .e-ss-printselected:before {
        content: "\e65e";
        font-family: "ej-xlfont";
        font-size: 40px;
        line-height: 19px;
        text-indent: -13px;
    }

    .e-spreadsheet .e-ssr-printselected:before {
        content: "\e65e";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -9px;
        line-height: 33px;
    }

    .e-spreadsheet .e-ss-print:before {
        content: "\e608";
        font-family: "ej-xlfont";
        font-size: 40px;
        line-height: 19px;
        text-indent: -12px;
    }

    .e-spreadsheet .e-ssr-print:before {
        content: "\e65d";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -9px;
        line-height: 6px;
    }
    /* -------------------Formula Font Icons ------------------- */
    .e-spreadsheet .e-ssr-namemngr:before {
        content: "\e65a";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -8px;
        line-height: 19px;
    }

    .e-spreadsheet .e-ssr-definename:before {
        content: "\e65b";
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 14px;
        text-indent: -16px;
    }

    .e-spreadsheet .e-ssr-useformula:before {
        content: "\e65c";
        font-family: "ej-xlfont";
        font-size: 21px;
        line-height: 14px;
        text-indent: -21px;
    }
    /* -------------------Import/Export Font Icons ------------------- */
     .e-spreadsheet .e-ss-importxl:before {
        content: "\e789";
        font-family: "ej-xlfont";
    }

     .e-spreadsheet .e-ss-saveas:before {
        content: "\e6a4";
        font-family: "ej-xlfont";
        font-size: 15px;
        line-height: 8px;
        text-indent: -3px;
    }

     .e-spreadsheet .e-ss-exportpdf:before,  .e-spreadsheet .e-ss-exportxl:before,  .e-spreadsheet .e-ss-exportcsv:before {
        font-family: "ej-xlfont";
        font-size: 40px;
        line-height: 19px;
        text-indent: -12px;
    }

     .e-spreadsheet .e-ss-exportxl:before {
        content: "\e607";
    }

     .e-spreadsheet .e-ss-exportcsv:before {
        content: "\e606";
    }

     .e-spreadsheet .e-ss-exportpdf:before {
        content: "\e6b9";
    }

    .e-spreadsheet .e-ssr-exportxl:before {
        content: "\e65f";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -7px;
        line-height: 33px;
    }

    .e-spreadsheet .e-ssr-exportcsv:before {
        content: "\e660";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -7px;
        line-height: 33px;
    }

    .e-spreadsheet .e-ssr-pagesize:before {
        content: "\e656";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 8px;
        text-indent: -10px;
    }

    .e-menu .e-ss-hlval:before {
        content: "\e60a";
        font-size: 20px;
        line-height: 16px;
        text-indent: 0;
    }

    .e-menu .e-ss-clearval:before {
        content: "\e60b";
        font-size: 20px;
        text-indent: 0px;
        line-height: 16px;
    }

    .e-spreadsheet .e-ssr-validation:before {
        content: "\e653";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -8px;
        line-height: 12px;
    }

    .e-menu .e-ss-validation:before {
        content: "\e655";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 13px;
        text-indent: -5px;
    }

    .e-menu .e-ss-formatcells:before {
        content: "\e67c";
        font-family: "ej-xlfont";
        font-size: 15px;
    }

    .e-spreadsheet .e-ssr-condformat:before {
        content: "\e677";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 34px;
        text-indent: -8px;
        height: 30px;
    }

    .e-spreadsheet .e-ss-selectall:before {
        content: "\e6a5";
        font-family: "ej-xlfont";
        font-size: 12px;
        line-height: 22px;
        text-indent: 5px;
    }
    /* -------------------Comment Font Icons ------------------- */
    .e-spreadsheet .e-ssr-newcmnt:before {
        content: "\e661";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 43px;
        text-indent: -13px;
    }

    .e-spreadsheet .e-ssr-editcmnt:before {
        content: "\e662";
        font-family: "ej-xlfont";
        font-size: 39px;
        line-height: 43px;
        text-indent: -13px;
    }

    .e-spreadsheet .e-ssr-deletecmnt:before {
        content: "\e663";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -13px;
        line-height: 42px;
    }

    .e-spreadsheet .e-ssr-previouscmnt:before {
        content: "\e665";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -13px;
        line-height: 42px;
    }

    .e-spreadsheet .e-ssr-nextcmnt:before {
        content: "\e664";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -13px;
        line-height: 42px;
    }

    .e-spreadsheet .e-ssr-showhidecmnt:before {
        content: "\e666";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -7px;
        line-height: 15px;
    }

    .e-spreadsheet .e-ssr-showallcmnt:before {
        content: "\e667";
        font-family: "ej-xlfont";
        font-size: 18px;
        text-indent: -7px;
        line-height: 15px;
    }

    .e-spreadsheet .e-ss-newcmnt:before {
        content: "\e699";
        font-family: "ej-xlfont";
        font-size: 18px;
    }

    .e-spreadsheet .e-ss-editcmnt:before {
        content: "\e69a";
        font-family: "ej-xlfont";
        font-size: 18px;
    }

    .e-spreadsheet .e-ss-deletecmnt:before {
        content: "\e69b";
        font-family: "ej-xlfont";
        font-size: 18px;
    }
    /* -------------------FreezePane Font Icons ------------------- */
    .e-spreadsheet .e-ssr-frzpane:before {
        content: "\e678";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 33px;
        text-indent: -8px;
        height: 30px;
    }

    .e-menu .e-ss-frzpane:before, .e-menu .e-ss-frzrow:before, .e-menu .e-ss-frzcln:before {
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 16px;
        text-indent: 1px;
    }

    .e-menu .e-ss-frzpane:before {
        content: "\e679";
    }

    .e-menu .e-ss-frzrow:before {
        content: "\e67a";
    }

    .e-menu .e-ss-frzcln:before {
        content: "\e67b";
    }

    .e-spreadsheet .e-ssr-pictures:before {
        content: "\e688";
        font-family: "ej-xlfont";
        font-size: 43px;
        line-height: 8px;
        text-indent: -13px;
    }

    .e-spreadsheet .e-ssr-changepicture:before {
        content: "\e694";
        font-family: "ej-xlfont";
        text-indent: -5px;
        line-height: 15px;
        font-size: 18px;

        & when (@skin = "material") {
            text-indent: -7px;
        }
    }

    .e-spreadsheet .e-ssr-resetpicture:before {
        content: "\e693";
        font-family: "ej-xlfont";
        text-indent: -5px;
        line-height: 15px;
        font-size: 18px;

        & when (@skin = "material") {
            text-indent: -9px;
        }
    }

    .e-menu .e-ss-resetpicture:before {
        content: "\e693";
        font-family: "ej-xlfont";
        text-indent: -1px;
        line-height: 16px;
        font-size: 18px;
    }

    .e-spreadsheet .e-ssr-pictureborder:before {
        content: "\e696";
        font-family: "ej-xlfont";
        text-indent: -1px;
        line-height: 15px;
        font-size: 18px;

        & when (@skin = "material") {
            text-indent: -10px;
        }
    }

    .e-spreadsheet .e-ssr-hyperlink:before {
        content: "\e64e";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -7px;
        line-height: 7px;
    }

    .e-menu .e-ss-hyperlink:before {
        content: "\e67d";
        font-family: "ej-xlfont";
        text-indent: 1px;
        line-height: 17px;
        font-size: 15px;
    }

    .e-menu .e-ss-removelink:before {
        content: "\e675";
        font-family: "ej-xlfont";
        text-indent: 1px;
        font-size: 18px;
    }
    /* Spreadsheet conditionalFormatting */
    .e-menu .e-ss-hlcellrules:before, .e-menu .e-ss-greaterthan:before, .e-menu .e-ss-lessthan:before, .e-menu .e-ss-between:before, .e-menu .e-ss-equalto:before, .e-menu .e-ss-textcontains:before, .e-menu .e-ss-dateoccur:before, .e-menu .e-ss-clearrules:before, .e-menu .e-ss-createrule:before {
        font-family: "ej-xlfont";
        font-size: 13px;
        text-indent: 3px;
        line-height: 15px;
    }

    .e-menu .e-ss-hlcellrules:before {
        content: "\e624";
    }

    .e-menu .e-ss-greaterthan:before {
        content: "\e625";
    }

    .e-menu .e-ss-lessthan:before {
        content: "\e626";
    }

    .e-menu .e-ss-between:before {
        content: "\e627";
    }

    .e-menu .e-ss-equalto:before {
        content: "\e628";
    }

    .e-menu .e-ss-textcontains:before {
        content: "\e629";
    }

    .e-menu .e-ss-dateoccur:before {
        font-size: 12px;
        content: "\e62a";
    }

    .e-menu .e-ss-clearrules:before {
        content: "\e654";
        font-size: 15px;
    }

    .e-menu .e-ss-createrule:before {
        content: "\e6b0";
        font-size: 15px;
    }

    .e-menu .e-ss-goto:before {
        content: "\e67f";
        font-family: "ej-xlfont";
        font-size: 15px;
        line-height: 18px;
        text-indent: 0px;
    }

    .e-menu .e-ss-replace:before {
        content: "\e639";
        font-family: "ej-xlfont";
        font-size: 15px;
        line-height: 16px;
        text-indent: 2px;
    }

    .e-spreadsheet .e-ss-findselect:before {
        content: "\e638";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 33px;
        text-indent: -8px;
        height: 30px;
    }

    .e-spreadsheet .e-ss-calcopt:before {
        content: "\e6ad";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 34px;
        text-indent: -4px;
    }

    .e-menu .e-ss-calcauto:before {
        content: "\e6aa";
        font-family: "ej-xlfont";
        font-size: 10px;
        line-height: 20px;
        text-indent: 8px;
    }

    .e-spreadsheet .e-ss-calcnow:before {
        content: "\e6ab";
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 14px;
        text-indent: -4px;
    }

    .e-spreadsheet .e-ss-calcsheet:before {
        content: "\e6ac";
        font-family: "ej-xlfont";
        font-size: 18px;
        line-height: 15px;
        text-indent: 1px;

        & when (@skin = "material") {
            text-indent: -2px;
        }
    }

    .e-menu .e-ss-find:before {
        content: "\e67e";
        font-family: "ej-xlfont";
        font-size: 15px;
        line-height: 12px;
        text-indent: 2px;
    }

    .e-spreadsheet .e-ss-sortfilter:before {
        content: "\e635";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -8px;
        line-height: 29px;
        height: 30px;
    }

    .e-spreadsheet .e-ssr-formatastable:before {
        content: "\e633";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -4px;
        line-height: 37px;
        height: 30px;
    }

    .e-spreadsheet .e-ssr-cellstyles:before {
        content: "\e634";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -6px;
        line-height: 34px;
        height: 30px;
    }

    .e-spreadsheet .e-ssr-table:before {
        content: "\e64d";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 8px;
        text-indent: -9px;
    }

    .e-spreadsheet .e-ssr-pivottable:before {
        content: "\e64c";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -9px;
        line-height: 8px;
    }

    .e-spreadsheet .e-ssr-range:before {
        content: "\e673";
        font-family: "ej-xlfont";
        text-indent: -3px;
        font-size: 18px;
        line-height: 17px;
    }

    .e-spreadsheet .e-ssr-resizetable:before {
        content: "\e672";
        font-family: "ej-xlfont";
        text-indent: -2px;
        font-size: 18px;

        & when (@skin = "material") {
            text-indent: -7px;
            line-height: 14px;
        }
    }

    .e-spreadsheet .e-ssr-insert:before {
        content: "\e668";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 15px;
        text-indent: -9px;
    }

     .e-menu .e-ssr-inscell:before,  .e-menu .e-ssr-insrow:before, .e-menu .e-ssr-inscol:before,  .e-menu .e-ssr-inssheet:before {
        font-family: "ej-xlfont";
        font-size: 15px;
        line-height: 18px;
        text-indent: 3px;
    }

     .e-menu .e-ssr-inscell:before {
        content: "\e669";
        line-height: 16px;
    }

     .e-menu .e-ssr-insrow:before {
        content: "\e66a";
        line-height: 18px;
    }

     .e-menu .e-ssr-inscol:before {
        content: "\e66b";
    }

     .e-menu .e-ssr-inssheet:before {
        content: "\e66c";
    }

    .e-spreadsheet .e-ssr-delete:before {
        content: "\e66d";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 15px;
        text-indent: -9px;
    }

    .e-menu .e-ssr-delcell:before, .e-menu .e-ssr-delrow:before, .e-menu .e-ssr-delcol:before, .e-menu .e-ssr-delsheet:before {
        font-family: "ej-xlfont";
        font-size: 15px;
        line-height: 17px;
        text-indent: 3px;
    }

    .e-menu .e-ssr-delcell:before {
        content: "\e66e";
    }

    .e-menu .e-ssr-delrow:before {
        content: "\e66f";
    }

    .e-menu .e-ssr-delcol:before {
        content: "\e670";
    }

    .e-menu .e-ssr-delsheet:before {
        content: "\e671";
    }

    .e-ss-noborderdlg:before {
        content: "\e641";
        font-family: "ej-xlfont";
        font-size: 30px;
        margin-left: -7px;
        margin-top: -15px;
    }

    .e-ss-outsideborderdlg:before {
        content: "\e643";
        font-family: "ej-xlfont";
        font-size: 30px;
        margin-left: -7px;
        margin-top: -15px;
    }

    .e-ss-topborderdlg:before {
        content: "\e63e";
        font-family: "ej-xlfont";
        font-size: 20px;
        margin-left: -2px;
        margin-top: -6px;
    }

    .e-ss-leftborderdlg:before {
        content: "\e63f";
        font-family: "ej-xlfont";
        font-size: 20px;
        margin-left: -2px;
        margin-top: -6px;
    }

    .e-ss-rightborderdlg:before {
        content: "\e640";
        font-family: "ej-xlfont";
        font-size: 20px;
        margin-left: -2px;
        margin-top: -6px;
    }

    .e-ss-bottomborderdlg:before {
        content: "\e63d";
        font-family: "ej-xlfont";
        font-size: 20px;
        margin-left: -2px;
        margin-top: -6px;
    }

    .e-ss-allborderdlg:before {
        content: "\e642";
        font-family: "ej-xlfont";
        font-size: 29px;
        margin-left: -7px;
        margin-top: -15px;
    }

    .e-spreadsheet .e-ssr-chartwidth:before {
        content: "\e68b";
        font-family: "ej-xlfont";
        font-size: 24px;
        margin-top: 3px;
    }

    .e-spreadsheet .e-ssr-chartheight:before {
        content: "\e68a";
        font-family: "ej-xlfont";
        font-size: 24px;
        margin-top: 3px;
    }

    .e-spreadsheet .e-ssr-srcolumn:before {
        content: "\e695";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 22px;
        text-indent: -9px;
    }

    .e-spreadsheet .e-ssr-selectdata:before {
        content: "\e697";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 27px;
        text-indent: -8px;
    }

    .e-spreadsheet .e-ssr-charttype:before {
        content: "\e698";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 26px;
        text-indent: -8px;
    }

    .e-spreadsheet .e-ribbon.e-js .e-split .e-in-wrap .e-left-btn .e-icon.e-ssr-celements:before {
        content: "\e689";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: -1px;
        text-indent: -10px;
    }
    /*-----------------------------------Spreadsheet Chart-----------------------*/
    .e-spreadsheet .e-ss-colchart:before {
        content: "\e680";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -14px;
        line-height: 14px;
    }

    .e-spreadsheet .e-ss-barchart:before {
        content: "\e681";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -14px;
        line-height: 14px;
    }

    .e-spreadsheet .e-ss-stockchart:before {
        content: "\e682";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -14px;
        line-height: 14px;
    }

    .e-spreadsheet .e-ss-linechart:before {
        content: "\e683";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -14px;
        line-height: 14px;
    }

    .e-spreadsheet .e-ss-areachart:before {
        content: "\e684";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -14px;
        line-height: 14px;
    }

    .e-spreadsheet .e-ss-combochart:before {
        content: "\e685";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -14px;
        line-height: 14px;
    }

    .e-spreadsheet .e-ss-piechart:before {
        content: "\e686";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -14px;
        line-height: 14px;
    }

    .e-spreadsheet .e-ss-scterchart:before {
        content: "\e687";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -14px;
        line-height: 12px;
    }

    .e-listbox .e-ss-dlgcolumnchart:before {
        content: "\e680";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -8px;
        line-height: 14px;
    }

    .e-listbox .e-ss-dlgbarchart:before {
        content: "\e681";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -8px;
        line-height: 14px;
    }

    .e-listbox .e-ss-dlgradarchart:before {
        content: "\e682";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -8px;
        line-height: 14px;
    }

    .e-listbox .e-ss-dlglinechart:before {
        content: "\e683";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -8px;
        line-height: 14px;
    }

    .e-listbox .e-ss-dlgareachart:before {
        content: "\e684";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -8px;
        line-height: 14px;
    }

    .e-listbox .e-ss-dlgcombochart:before {
        content: "\e685";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -8px;
        line-height: 14px;
    }

    .e-listbox .e-ss-dlgpiechart:before {
        content: "\e686";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -8px;
        line-height: 14px;
    }

    .e-listbox .e-ss-dlgscatterchart:before {
        content: "\e687";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -8px;
        line-height: 14px;
    }
    /*-------------------------------------AutoFill Option------------------------*/
    .e-menu .e-ss-filloption:before {
        content: "\e691";
        font-family: "ej-xlfont";
        font-size: 16px;
    }

    .e-menu .e-ss-fillselect:before {
        content: "\e692";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -1px;
        line-height: 13px;
    }

    .e-btn .e-ss-autofill:before {
        content: "\e6a6";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: -2px;
        line-height: 13px;

        & when (@skin = "material") {
            line-height: 7px;
        }
    }
    /*-------------------------------------Find replace ------------------------*/
     .e-lblreplace {
        position: relative;
        top: -11px;
    }

     .e-txtreplace {
        position: relative;
        left: 90px;
        top: -35px;
        width: 230px;
    }

     .e-txtfind {
        position: relative;
        left: 90px;
        top: -25px;
        width: 230px;
    }

     .e-divfind {
        height: 63px;
    }

    .e-spreadsheet .e-ssr-sortztoa + .e-btntxt {
        line-height: 25px;
    }

    .e-spreadsheet .e-ssr-sortatoz + .e-btntxt {
        line-height: 25px;
    }

    .e-spreadsheet .e-ss-clearfilter + .e-btntxt {
        line-height: 24px;
    }

    .e-spreadsheet .e-ssr-pagesizesbtn {
        text-indent: -12px;
        line-height: 1px;
    }

    .e-spreadsheet .e-datapadding {
        padding-bottom: 30px;
    }

    .e-spreadsheet.e-cformat-hl, .e-spreadsheet.e-cformat-tb, .e-spreadsheet.e-cformat-is, .e-spreadsheet.e-cformat-cr {
        border: none;
        width: 180px;
    }

    .e-spreadsheet.e-borderstyle {
        border: none;
    }

    .e-spreadsheet.e-cformat-tb > li > ul {
        width: 148px;
        height: 175px;
    }

    .e-spreadsheet.e-cformat-is > li > ul {
        width: 100px;
    }

    .e-spreadsheet.e-cformat-hl > li > ul {
        width: 148px;
    }

    .e-menu.e-context.e-separator.e-spreadsheet.e-border > li {
        line-height: 24px;
    }

    .e-menu.e-context.e-separator.e-spreadsheet.e-border > li > a {
        font-size: 13px;
    }
    /*--------------------------------- Name Manager -------------------------------------*/
     .e-nmdlg-editor {
        height: 25px;
    }
    /*--------------------------------- Format as table ----------------------------------*/
    .e-menu .e-nmuseinformula {
        width: 120px;
    }

    .e-menu .e-nmuseinformularow {
        padding: 3px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .e-spreadsheet.e-cellstyles {
        width: 477px;
        height: 325px;
        overflow-x: hidden;
    }

   .e-spreadsheet.e-menu.e-split.e-context .e-list .e-icon.e-customup {
       left: 45%;
   }
   .e-spreadsheet.e-cellstyles {
        & when (@skin= "material") {
            width: 496px;
            border-radius: @border-radius;
            box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.21);
        }
    }

    .e-spreadsheet .e-cellstyleheader, .e-spreadsheet .e-formatastableheader {
        color: gray;
        font-family: @font-family;
        font-size: 14px;
        font-weight: bold;
        height: 15px;
        padding: 5px;
        cursor: default;
        line-height: 11px;
        border-bottom: 1px solid transparent;

        & when (@skin= "office-365") {
            padding: 8px;
        }
    }

    .e-ss-Spreadsheet.e-ss-chart {
        display: none;
        width: auto;
        padding: 4px;
    }

    .e-ss-Spreadsheet.e-ss-chart {
        & when (@skin= "material") {
            padding: 8px;
        }
    }

    .e-spreadsheet.e-cellstyles .e-cellstylecontent, .e-spreadsheet.e-cellstyles .e-formatastablecontent, .e-spreadsheet.e-cellstyles .e-chartcontent {
        background-color: white;

        & when (@skin= "office-365") {
            margin: 4px;
        }
    }

    .e-spreadsheet .e-cellstylecell {
        border: 2px solid transparent;
        height: 15px;
        padding: 5px;
        width: 90px;
        margin: 5px;
        display: inline-block;
        font-family: Calibri;
        cursor: default;
    }

    .e-spreadsheet .e-cellstylecell {
        & when (@skin= "material") {
            border-width: 6px;
            border-radius: @border-radius;
        }
    }

    .e-spreadsheet.e-cellstyles .e-cellstylecontent {
        & when (@skin= "material") {
            margin: 3px;
        }
    }
    /*-----------------cellstyles-----------------------------------------------------*/
    .e-spreadsheet .e-formatastablecell div {
        background: url('@{font-path}/spreadsheet/sprites.png') no-repeat;
        width: 63px;
        height: 48px;
    }

     .e-bordercell {
        width: 63px;
        height: 48px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-1 {
        background-position: 0 -1px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-2 {
        background-position: -65px -1px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-3 {
        background-position: -130px -2px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-4 {
        background-position: -194px -2px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-5 {
        background-position: -259px -2px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-6 {
        background-position: -323px -3px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-7 {
        background-position: -1px -50px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-8 {
        background-position: -64px -50px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-9 {
        background-position: -127px -49px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-10 {
        background-position: -192px -50px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-11 {
        background-position: -257px -52px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-12 {
        background-position: -322px -51px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-13 {
        background-position: -2px -99px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-14 {
        background-position: -67px -99px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-15 {
        background-position: -132px -100px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-16 {
        background-position: -195px -100px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-17 {
        background-position: -257px -100px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-18 {
        background-position: -321px -101px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-19 {
        background-position: 1px -149px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-20 {
        background-position: -63px -149px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-21 {
        background-position: -130px -151px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-22 {
        background-position: -194px -151px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-23 {
        background-position: -258px -150px;
    }

    .e-spreadsheet .e-formatastablecell div.e-ss-cellstyles-24 {
        background-position: -321px -150px;
    }
    /*--------------------------------- Format as table ----------------------------------*/
    .e-spreadsheet.e-formatastable {
        width: 329px;
        height: 330px;
        overflow-x: hidden;
    }

    .e-spreadsheet.e-formatastable {
        & when (@skin="material") {
            width: 359px;
            border-radius: @border-radius;
            box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.21);
        }
    }

    .e-spreadsheet .e-formatastablecell {
        border: 4px solid transparent;
        height: 48px;
        width: 63px;
        margin: 3px;
        display: inline-block;
        font-family: @font-family;
        font-size: 14px;
        cursor: default;
    }

    .e-spreadsheet .e-formatastablecell {
        & when (@skin = "material") {
            border-width: 6px;
            border-radius: @border-radius;
        }
    }

    .e-spreadsheet .e-formatastablecontent, .e-spreadsheet .e-formatastablecell {
        & when (@skin = "material") {
            margin: 4px 4px 0px 4px;
        }
    }

    .e-ss-dialog .e-fatnamedlgcell input {
        margin: 0;
    }
    /*--------------------------------- Resize table ----------------------------------*/
    /*--------------------------------- Ribbon Table Properties ----------------------------------*/
    .e-spreadsheet .e-tablepropertiescell {
        padding: 3px;
    }

    .e-spreadsheet .e-tablepropetiesrow, .e-spreadsheet .e-tablestyleoptionsrow {
        display: table;
    }
    /*--------------------------------- Ribbon Table Style Options ----------------------------------*/
    .e-spreadsheet .e-tablestyleoptionscell {
        float: left;
        padding-left: 3px;
        width: 94px;
    }

    .e-spreadsheet .e-tablestyleoptionslabel {
        padding: 3px;
        margin-left: 3px;
        font-size: 12px;
    }

    .e-spreadsheet .e-tablestyleoptionsrow:last-child {
        margin-top: -2px;
    }

    .e-spreadsheet .e-tablestyleoptionsrow:first-child {
        margin-top: 2px;
    }
    /*--------Spreadsheet Comment-------------------*/
    .e-spreadsheet .e-celltoparrow {
        border-style: solid;
        border-width: 5px 0 0 5px;
        height: 0px;
        position: absolute;
        z-index: 8;
    }

    .e-spreadsheet .e-comment {
        float: right;
        height: 0;
        text-indent: 0;
        position: absolute;
    }

    .e-spreadsheet .e-ssr-disableitem {
        display: none;
    }

    .e-spreadsheet .e-comment-txtarea {
        border: 1px solid black;
        margin-left: 0.8%;
        position: absolute;
        overflow: hidden;
        resize: none;
        font-family: "Tahoma";
        font-weight: normal;
        font-size: 13px;
        line-height: normal;
        left: 13px;
        top: 6px;
        height: 70px;
        width: 130px;
        font-style: normal;
    }
    /*-------------Spreadsheet Hyperlink Dialog------------------------*/
    .e-ss-dialog .e-ss-hlbtndiv {
        margin-bottom: -2px;
        margin-left: 58%;
        width: 100%;
        margin-top: 5px;
    }

    .e-ss-dialog .e-ss-hllblfind {
        position: relative;
        top: -6px;
    }

    .e-ss-dialog .e-ss-hltxtfind {
        position: relative;
        left: 64px;
        top: -5px;
    }

    .e-ss-dialog .e-ss-hllblweb {
        position: relative;
        left: 2px;
        top: 5px;
    }

    .e-ss-dialog .e-ss-hltxtweb {
        position: relative;
        left: 92px;
        top: -24px;
    }

    .e-ss-dialog .e-ss-scroll {
        height: 150px;
        overflow: auto;
        position: relative;
        top: -10px;
    }

    .e-spreadsheet .e-hyperlinks {
        text-decoration: underline;
        cursor: pointer;
    }

    .e-spreadsheet .e-ss-object {
        position: absolute;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: 0 0;
        cursor: move;
        border: 1px solid transparent;
        z-index: 11;
    }

    .e-spreadsheet .e-ss-pivot {
        position: absolute;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: 0 0;
        cursor: move;
        border: 1px solid transparent;
        z-index: 11;
    }

    .e-spreadsheet .e-spreadsheetcontentcontainer .e-ss-object.e-ss-activeimg {
        border: 1px solid;
    }

    .e-spreadsheet .e-spreadsheetcontentcontainer .e-ss-pivot.e-ss-activepivot {
        border: 1px solid;
    }

    .e-spreadsheet .e-ss-object.e-datavisualization-chart {
        border: 1px solid;
    }

    .e-spreadsheet .e-ss-imgvisual {
        position: absolute;
        border: 2px solid;
        z-index: 12;
        display: none;
        box-sizing: content-box;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-headercell.e-ss-colresize {
        cursor: col-resize;
    }

   .e-spreadsheet .e-spreadsheetmainpanel .e-rowheader.e-ss-rowresize {
        cursor: row-resize;
    }

    .e-spreadsheet .e-ss-apresize {
        cursor: col-resize;
    }

    .e-spreadsheet .e-ss-imgcresize {
        cursor: col-resize !important;
    }

    .e-spreadsheet .e-ss-imgrresize {
        cursor: row-resize !important;
    }

    .e-spreadsheet .e-ss-resetpictbtn, .e-spreadsheet .e-ss-pictbrdrbtn {
        text-indent: 0px;
        line-height: 1px;
    }

     .e-spreadsheet .e-insertsbtn {
        text-indent: -12px;
        line-height: 19px;
    }

     .e-spreadsheet .e-deletesbtn {
        text-indent: -12px;
        line-height: 19px;
    }
    /*-----------------------Ribbon Control Alignments-----------------------------------*/
    .e-menu .e-ss-cut + span {
        width: 130px !important;
    }
    /*------------------- Ribbon Control Alignments --------------------------------*/
     .e-spreadsheet .e-backstagecontent {
        padding: 0 45px 5px 45px;
    }

    .e-spreadsheet .e-ssr-bstitle {
        font-size: 25px;
    }

     .e-spreadsheet .e-ssr-bscontent {
        margin-top: 10px;
    }

     .e-spreadsheet .e-ss-blank {
        background: url('@{font-path}/spreadsheet/blank.png') no-repeat;
        height: 121px;
        width: 149px;
    }

     .e-spreadsheet .e-ssr-bssaveasopt > span,  .e-spreadsheet .e-ssr-bsprintopt > span {
        padding-left: 13px;
        font-size: 15px;
    }

     .e-spreadsheet .e-ssr-bssaveasopt:not(:first-child),  .e-spreadsheet .e-ssr-bsprintopt:not(:first-child) {
        padding-top: 10px;
    }
    /*------------------- Print--------------------------------*/
     .e-spreadsheet .e-printhdrlbl,  .e-spreadsheet .e-viewhdrlbl,  .e-spreadsheet .e-printlinlbl,  .e-spreadsheet .e-viewlinlbl {
        margin-bottom: 0;
        margin-left: 3px;
    }

    .e-spreadsheet .e-spanfilter {
        border: 1px solid;
    }
    /*............DropDown list Support  in Cell*/
    .e-spreadsheet .e-ssddl:before {
        content: "\e6a0";
        font-size: 7px;
        line-height: 16px;
        text-indent: 2px;
    }

    .e-spreadsheet .e-spanddl {
        border: 1px solid;
    }

    .e-spreadsheet .e-ddlspan {
        cursor: pointer;
        width: 16px;
        height: 15px;
        position: absolute;
    }

    .e-spreadsheet .e-ss-previouscmnt + span, .e-spreadsheet .e-ss-nextcmnt + span, .e-ss-deletecmnt + span {
        left: -10px;
        position: absolute;
        top: 18px;
    }

      .e-ss-tablestyle {
        margin-right: 8px;
    }

    .e-spreadsheet .e-dlg-field-validation-error {
        border-radius: 7px;
        font-size: 14px;
        padding: 7px;
        line-height: 7px;
        margin-top: 5px;
    }

    .e-fatnamedlgrow, .e-chartnamedlgrow {
        margin-left: -15px;
        margin-top: -5px;
    }

    .e-spreadsheet .e-numeric .e-in-wrap {
        border: 1px solid;
    }

    .e-spreadsheet .e-ssr-chartwidth {
        margin-bottom: 10px;
    }

    .e-ss-dialog .e-ss-dlgtabval .e-header > .e-bottom-line.e-active {
        height: 23px;
    }

    .e-ss-dialog .e-ssdlg .e-nmclose {
        margin: 14px 0 0 449px;
    }

    .e-ss-dialog .e-dtvalbtndiv {
        width: 100%;
        margin-left: 59%;
        margin-top: 6px;
    }

    .e-ss-formatdlg .e-active-content .e-activetop {
        padding-left: 17px;
    }

    .e-ss-chrttitle {
        margin: 45px 0 0 -77px;
    }

    .e-ss-dialog .e-dlg-btnfields {
        padding: 9px 0px 2px 0px;

        & when (@skin = "office-365") {
            padding-top: 5px;
            padding-bottom: 0px;
        }
    }

    .e-ss-dialog .e-dlg-btnfields .e-dlg-btnctnr {
        width: 100%;
        text-align: right;
    }

    .e-ss-dialog .e-dlg-btnfields input,
    .e-ss-dialog .e-dlg-btnfields button {
        & when not (@skin = "material") {
            margin-left: 10px;
        }
    }

     .e-spreadsheet .e-resizediv .e-cformatbtn,  .e-spreadsheet .e-resizediv .e-formatastablebtn,  .e-spreadsheet .e-resizediv .e-cellstylebtn {
        font-size: 12px;
    }
    /*-----------Spreadsheet common dialog----------------*/
     .e-ss-dialog .e-tab .e-header.e-addborderbottom .e-active {
        border-top: 1px solid;
    }

     .e-ss-dialog input.e-btn.e-widget {
        box-sizing: content-box;

        & when not (@skin = "material") and not(@skin="office-365") {
            height: 19px;
        }
    }

     .e-ss-dialog > .e-titlebar {
        & when not (@skin = "material") {
            padding: 5px 0px;
            text-align: center;
        }

        & when (@skin = "office-365") {
            text-align: left;
        }
    }

     .e-ss-dialog .e-ss-dlgtabval > .e-content {
        height: 326px !important;
    }

     .e-ss-dialog .e-ss-dlgtab > .e-header li a,  .e-ss-dialog .e-ss-dlgtabval > .e-header li a {
        line-height: 7px;
        font-size: 14px;

        & when (@skin = "office-365") {
            line-height: inherit;
        }
    }

    .e-ss-formatdlg {
        margin-left: -14px;
        margin-top: -7px;
    }

    .e-spreadsheet .e-atc.e-focus {
        box-shadow: none;
    }

    .e-menu .e-list .e-ss-cmenuitem > a {
        line-height: 38px;
        padding: 3px 10px 1px 34px;
    }

    .e-menu .e-list .e-ss-cmenuitem > a > span {
        top: 15%;
    }

    .e-spreadsheet.e-menu .e-ss-chartimg {
        background-image: url('@{font-path}/spreadsheet/charttab-sprites.png');
		background-repeat:no-repeat;
        height: 28px;
        width: 28px;
    }

    .e-menu .e-ss-axes {
        background-position: -20px -22px;
    }

    .e-menu .e-ss-phaxis {
        background-position: -12px -62px;
    }

    .e-menu .e-ss-pvaxis {
        background-position: -67px -63px;
    }

    .e-menu .e-ss-axistitle {
        background-position: -63px -23px;
    }

    .e-menu .e-ss-phaxistitle {
        background-position: -109px -59px;
    }

    .e-menu .e-ss-pvaxistitle {
        background-position: -160px -63px;
    }

    .e-menu .e-ss-charttitle {
        background-position: -103px -19px;
    }

    .e-menu .e-ss-ctnone {
        background-position: -210px -60px;
    }

    .e-menu .e-ss-ctcenter {
        background-position: -113px -107px;
    }

    .e-menu .e-ss-ctfar {
        background-position: -113px -107px;
    }

    .e-menu .e-ss-ctnear {
        background-position: -113px -107px;
    }

    .e-menu .e-ss-datalabels {
        background-position: -130px -22px;
    }

    .e-menu .e-ss-dlnone {
        background-position: -62px -107px;
    }

    .e-menu .e-ss-dlcenter {
        background-position: -17px -109px;
    }

    .e-menu .e-ss-dlibase {
        background-position: -210px -108px;
    }

    .e-menu .e-ss-dliend {
        background-position: -166px -109px;
    }

    .e-menu .e-ss-dloend {
        background-position: -10px -158px;
    }

    .e-menu .e-ss-gridline {
        background-position: -168px -21px;
    }

    .e-menu .e-ss-pmajorh {
        background-position: -64px -161px;
    }

    .e-menu .e-ss-pmajorv {
        background-position: -112px -159px;
    }

    .e-menu .e-ss-pminorh {
        background-position: -161px -159px;
    }

    .e-menu .e-ss-pminorv {
        background-position: -210px -160px;
    }

    .e-menu .e-ss-legend {
        background-position: -212px -21px;
    }

    .e-menu .e-ss-lnone {
        background-position: -11px -203px;
    }

    .e-menu .e-ss-lleft {
        background-position: -108px -208px;
    }

    .e-menu .e-ss-lright {
        background-position: -63px -205px;
    }

    .e-menu .e-ss-ltop {
        background-position: -210px -207px;
    }

    .e-menu .e-ss-lbottom {
        background-position: -161px -206px;
    }

    .e-menu .e-ss-cmenuitem {
        height: 40px;
    }

    .e-menu .e-ss-cmenuitem > span {
        width: 32px;
    }

    .e-menu.e-context li.e-list > ul li.e-list > a.e-ss-chartlayout {
        padding-left: 35px;
        padding-top: 3px;
    }

    .e-menu-wrap .e-morechart {
        padding: 1px;
    }

    .e-menu .e-chartheader {
        color: gray;
        font-family: @font-family;
        font-size: 14px;
        font-weight: bold;
        padding: 1px 3px 3px;
    }

    .e-menu .e-chartcell {
        box-sizing: border-box;
        display: inline-block;
        padding: 20px 22px;
        background: url('@{font-path}/spreadsheet/chart-sprites.png') no-repeat;
        width: 32px;
        height: 32px;
    }
    /*--columnchart--*/
    .e-menu .e-columnchart1 {
        background-position: -2px -5px;
    }

    .e-menu .e-columnchart2 {
        background-position: -53px -6px;
    }

    .e-menu .e-columnchart3 {
        background-position: -102px -5px;
    }

    .e-menu .e-columnchart4 {
        background-position: -154px -5px;
    }

    .e-menu .e-columnchart5 {
        background-position: -204px -5px;
    }

    .e-menu .e-columnchart6 {
        background-position: -253px -5px;
    }
    /*--barchart--*/
    .e-menu .e-barchart1 {
        background-position: -3px -56px;
    }

    .e-menu .e-barchart2 {
        background-position: -54px -57px;
    }

    .e-menu .e-barchart3 {
        background-position: -101px -57px;
    }

    .e-menu .e-barchart4 {
        background-position: -153px -57px;
    }

    .e-menu .e-barchart5 {
        background-position: -203px -55px;
    }

    .e-menu .e-barchart6 {
        background-position: -250px -53px;
    }
    /*--stockchart--*/
    .e-menu .e-stockchart1 {
        background-position: -301px -53px;
    }

    .e-menu .e-stockchart2 {
        background-position: -2px -105px;
    }
    /*--linechart--*/
    .e-menu .e-linechart1 {
        background-position: -54px -102px;
    }

    .e-menu .e-linechart2 {
        background-position: -103px -102px;
        margin-left: 21px;
    }
    /*--areachart--*/
    .e-menu .e-areachart1 {
        background-position: -154px -102px;
    }

    .e-menu .e-areachart2 {
        background-position: -201px -102px;
    }

    .e-menu .e-areachart3 {
        background-position: -252px -104px;
    }
    /*--piechart--*/
    .e-menu .e-piechart1 {
        background-position: -103px -151px;
    }

    .e-menu .e-piechart2 {
        background-position: -204px -154px;
        margin-left: 6px;
    }

    .e-menu .e-piechart3 {
        background-position: -153px -152px;
        margin-left: 9px;
    }
    /*--scterchart--*/
    .e-menu .e-scatterchart1 {
        background-position: -251px -154px;
    }

    .e-menu .e-scatterchart2 {
        background-position: -300px -154px;
    }

.e-spreadsheet .e-ssr-exportxl + span, 
.e-spreadsheet .e-ssr-printselected + span, 
.e-spreadsheet .e-ssr-print + span, 
.e-spreadsheet .e-ssr-exportcsv + span {
        white-space: normal;
        padding-top: 18px;
        line-height: 14px;
    }

 
    .e-spreadsheet .e-ssr-namemngr + span {
        white-space: normal;
        padding-top: 12px;
    }

    .e-spreadsheet .e-ssr-srcolumn + span {
        white-space: normal;
        padding-top: 12px;
    }

    .e-spreadsheet .e-ssr-protectsheet + span,
    .e-spreadsheet .e-ssr-protect + span {
        white-space: normal;
    }

    .e-spreadsheet .e-ssr-charttype + span,
    .e-spreadsheet .e-ssr-selectdata + span {
        white-space: normal;
        padding-top: 12px;
    }

    .e-spreadsheet .e-ssr-celements {
        height: 30px;
    }

    .e-spreadsheet .e-ssr-celements + span {
        white-space: normal;
    }

    .e-spreadsheet .e-scrollbar .e-vscroll:hover, .e-spreadsheet .e-scrollbar .e-hscroll:hover {
        cursor: default;
    }

    .e-spreadsheet .e-content.e-viewbrdr {
        border-top: 1px solid;
    }
    /*------------------------------------chart Type Dialog-------------------------------*/
    .e-ndialog {
        margin-top: 5px;
        margin-left: 10px;
    }

    .e-ss-dialog .e-chtdlgtab .e-content {
        height: 355px;
    }

    .e-ss-dialog .e-chtdlgright {
        float: right;
        height: 95%;
        margin-right: -15px;
        width: 74%;
    }

    .e-ss-dialog .e-chtdlgleft {
        border-right: 1px solid;
        float: left;
        height: 100%;
        margin-left: -14px;
        width: 26%;
    }

    .e-ss-dialog .e-chtdlgcontent {
        height: 100%;
        margin: 2px;
    }

    .e-ss-dialog .e-chtdlgleft .e-listbox > li {
        padding: 4px;
    }

    .e-ss-dialog .e-chartdlgok {
        margin-right: 6px;
    }

    .e-ss-dialog .e-chartdlgcncl {
        margin-right: 2px;
    }

    .e-ss-dialog .e-chartimg {
        display: inline-block;
        padding: 25px;
        background: url('@{font-path}/spreadsheet/charttype-sprites.png') no-repeat;
        width: 35px;
        height: 35px;
        margin: 5px;
        border: 2px solid transparent;
    }

    .e-ss-dialog, .e-ss-dialog .e-ss-dlgtab {
        line-height: normal;
    }

    .e-ss-dialog label {
        display: inline-block;
    }

    .e-ss-dialog input {
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    .e-ss-dialog .e-dlg-fields {
        margin: 0px;
    }

    .e-ss-dialog .e-dialog .e-dlgctndiv input.ejinputtext {
        box-sizing: border-box;
        width: 100%;
        height: 27px;
        text-indent: 5px;

        & when (@skin = "office-365") {
            height: 32px;
        }
    }

    .e-ss-dialog .e-dialog .e-dlgctndiv table {
        width: 100%;
        white-space: pre-wrap;
    }

    .e-ss-dialog .e-dialog .e-dlgctndiv:not(.e-ss-finddiv):not(.e-ss-stgdiv) .e-dlgtd-fields td {
        padding-top: 7px;

        & when (@skin = "office-365"), (@skin = "material") {
            padding-top: 0px;
        }
    }

    .e-ss-dialog .e-ss-dlgtab table {
        border-spacing: 0;
        border-collapse: collapse;
    }
    /*--columnchart--*/
    .e-ss-dialog .e-dlgcolumnchart1 {
        background-position: -9px -5px;
    }

    .e-ss-dialog .e-dlgcolumnchart2 {
        background-position: -102px -5px;
    }

    .e-ss-dialog .e-dlgcolumnchart3 {
        background-position: -192px -5px;
    }

    .e-ss-dialog .e-dlgcolumnchart4 {
        background-position: -282px -6px;
    }

    .e-ss-dialog .e-dlgcolumnchart5 {
        background-position: -372px -6px;
    }

    .e-ss-dialog .e-dlgcolumnchart6 {
        background-position: -465px -11px;
    }
    /*--barchart--*/
    .e-ss-dialog .e-dlgbarchart1 {
        background-position: -9px -105px;
    }

    .e-ss-dialog .e-dlgbarchart2 {
        background-position: -100px -106px;
    }

    .e-ss-dialog .e-dlgbarchart3 {
        background-position: -192px -105px;
    }

    .e-ss-dialog .e-dlgbarchart4 {
        background-position: -281px -104px;
    }

    .e-ss-dialog .e-dlgbarchart5 {
        background-position: -373px -105px;
    }

    .e-ss-dialog .e-dlgbarchart6 {
        background-position: -464px -103px;
    }
    /*--radarchart--*/
    .e-ss-dialog .e-dlgradarchart1 {
        background-position: -9px -211px;
    }

    .e-ss-dialog .e-dlgradarchart2 {
        background-position: -100px -210px;
    }
    /*--linechart--*/
    .e-ss-dialog .e-dlglinechart1 {
        background-position: -466px -204px;
    }

    .e-ss-dialog .e-dlglinechart2 {
        background-position: -8px -307px;
    }
    /*--areachart--*/
    .e-ss-dialog .e-dlgareachart1 {
        background-position: -192px -208px;
    }

    .e-ss-dialog .e-dlgareachart2 {
        background-position: -282px -207px;
    }

    .e-ss-dialog .e-dlgareachart3 {
        background-position: -373px -208px;
    }
    /*--piechart--*/
    .e-ss-dialog .e-dlgpiechart1 {
        background-position: -282px -309px;
    }

    .e-ss-dialog .e-dlgpiechart2 {
        background-position: -191px -309px;
    }

    .e-ss-dialog .e-dlgpiechart3 {
        background-position: -100px -309px;
    }
    /*--scterchart--*/
    .e-ss-dialog .e-dlgscatterchart1 {
        background-position: -373px -305px;
    }
    /*---------------------------Spreadsheet Resizing Icons 100% width-----------------------*/
    .e-spreadsheet .e-ribbon .e-icon.e-Alignment:before {
        font-family: 'ej-xlfont';
        content: "\e68c";
        font-size: 32px;
        text-indent: 10px;
    }

    .e-spreadsheet .e-ribbon.e-responsive .e-icon.e-Alignment:before {
        text-indent: -3px;
    }

    .e-spreadsheet .e-Clipboard:before {
        font-family: 'ej-xlfont';
        content: "\e600";
        font-size: 32px;
        text-indent: 8px;
    }

    .e-spreadsheet .e-Actions:before {
        font-family: 'ej-xlfont';
        content: "\e61c";
        font-size: 32px;
    }

    .e-spreadsheet .e-Number:before {
        font-family: 'ej-xlfont';
        content: "\e61e";
        font-size: 32px;
        text-indent: 3px;
    }

    .e-spreadsheet .e-Font:before {
        font-family: 'ej-xlfont';
        content: "\e609";
        font-size: 32px;
        text-indent: -6px;
    }

    .e-spreadsheet .e-Styles:before {
        font-family: 'ej-xlfont';
        content: "\e677";
        font-size: 32px;
        text-indent: 0;
        width: 32px;
    }

    .e-spreadsheet .e-Editing:before {
        font-family: 'ej-xlfont';
        content: "\e635";
        font-size: 32px;
    }

    .e-spreadsheet .e-Changes:before {
        font-family: 'ej-xlfont';
        content: "\e6a8";
        font-size: 32px;
        text-indent: 5px;
    }

    .e-spreadsheet .e-Calculation:before {
        font-family: 'ej-xlfont';
        content: "\e6ad";
        font-size: 32px;
        text-indent: 15px;
    }

    .e-spreadsheet.e-ss-hide, .e-spreadsheet .e-fcol-hide, .e-spreadsheet .e-hide {
        display: none;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-hcol {
        border-right-width: 2px;
    }

    .e-spreadsheet .e-hrow {
        border-bottom-width: 2px;
    }

    .e-spreadsheet .e-hfcol {
        border-right: 1px solid;
    }

    .e-spreadsheet .e-hfrow {
        border-bottom: 2px solid;
    }

    .e-ss-colorpicker .e-in-wrap.e-tool, .e-ss-colorpicker .e-in-wrap.e-tool .e-select {
        border: medium none;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-colselected,
    .e-spreadsheet .e-spreadsheetmainpanel .e-colhighlight {
        font-weight: bold;
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-rowselected,
    .e-spreadsheet .e-spreadsheetmainpanel .e-rowhighlight {
        font-weight: bold;
    }

    .e-ss-grid .e-gridcontent .e-ss-emptyrecord, .e-ss-grid .e-gridcontent .emptyrecord {
        text-align: center;
    }

    .e-ss-dialog .e-addedrow .e-button, .e-ss-dialog .e-editedrow .e-button {
        width: 60px !important;

        & when not (@skin = "material") {
            margin-left: 10px !important;
            margin-right: 0 !important;
            box-sizing: border-box !important;
            border-radius: 4px 4px 4px 4px;
        }
    }

    .e-insertdialog .e-contentdialog td {
        padding-left: 0;
        padding-right: 5px;
    }

    .e-spreadsheet .e-ejinputtext {
        text-indent: 5px;
    }

    .e-ss-dialog .e-ejinputtext {
        text-indent: 5px;
    }

    .e-spreadsheet .e-ss-ddlwrap {
        display: none;
    }

    .e-ss-dialog .e-btn.e-txt {
        & when not (@skin = "material") {
            padding: .2em .2em;
        }
    }

     .e-ss-frdlg .e-btn.e-txt {
        line-height: 15px;
    }

     .e-ss-frdlg .e-dlg-btnctnr input {
        margin-right: 0px;
    }

    .e-spreadsheet .e-frow {
        border: 1px solid;
        position: absolute;
    }

    .e-spreadsheet .e-fcol {
        border: 1px solid;
        position: absolute;
        top: 0;
    }

     .e-ss-menuclrpkr .e-popupWrapper .e-row {
        height: 21px;
    }

     .e-ss-menuclrpkr .e-popupWrapper {
        margin-top: -5px;
    }

    .e-spreadsheet .e-formatastable-back, .e-spreadsheet .e-cellstyles-back, .e-spreadsheet .e-border-back {
        float: right;
    }

    .e-spreadsheet .e-icon.e-ss-leftarrow:before {
        font-family: 'ej-webfont';
        content: "\e819";
    }

    .e-spreadsheet .e-icon.e-ssr-resizetable {
        padding-top: 1px;
        padding-bottom: 6px;
    }

    .e-spreadsheet.e-split.e-context li.e-list.e-haschild span {
        overflow: visible;
    }

    .e-spreadsheet.e-split.e-context li.e-list.e-haschild ul li.e-list span {
        overflow: visible;
    }

    .e-ss-colorpicker .e-popupWrapper {
        margin: -3px 0px;
    }

    .e-ss-colorpicker.e-ss-menuclrpkr .e-popupWrapper {
        margin: -4px 1px;
    }

    .e-ss-colorpicker .e-colorpicker .e-footer {
        margin-left: -1px;
    }
    /*-------------------------------------Spreadsheet Ribbon override------------*/
    .e-spreadsheet .e-ribbon .e-header {
        border-right: none;
        border-left: none;
        border-top: none;
    }

    .e-spreadsheet .e-ribbon .e-content {
        border-right: none;
        border-left: none;
    }

    .e-spreadsheet .e-ribbon .e-header .e-menu ul span {
        margin-top: 0;
    }

    .e-spreadsheet .e-ribbon .e-header > .e-bottom-line.e-active {
        margin-top: 1px;
    }

    .e-spreadsheet .e-ribbon .e-tooltipdiv {
        width: 200px;
    }

    .e-spreadsheet .e-ribbon .e-tooltipdiv .e-tooltipcontent {
        width: 180px;
    }

    .e-spreadsheet .e-ribbon .e-ribbonbackstagepage {
        border-top-width: 0;
        border-left-width: 0;
    }

    .e-spreadsheet .e-ribbon .e-btntxt {
        font-size: 12px;
    }

    .e-spreadsheet .e-ribbon .e-ssr-fontfamily, .e-spreadsheet .e-ribbon .e-ssr-fontsize {
        & when not (@skin = "material") {
            padding: 0;
        }
    }

    .e-spreadsheet .e-backstagetopicon {
        & when not (@skin = "material") {
            text-indent: 16px;
            left: 0;
        }
    }
    /*-------------------------------------Spreadsheet Autocomplete Override------*/
    .e-ss-autocomplete.e-atc-popup ul li {
        font-size: 11px;
    }
    /*-------------------------------------Spreadsheet Split Button override------*/
    .e-spreadsheet .e-ssr-pagesizesbtn > .e-split-btn-div {
        text-indent: 31px;
        height: 32px;
    }

    .e-spreadsheet.e-cformatbtn > .e-split-btn-div {
        text-indent: 33px;
        top: 54px;

        & when (@skin = "material") {
            text-indent: 36px;
        }
    }

    .e-spreadsheet.e-mergebtn > .e-split-btn-div {
        top: 14px;
    }

    .e-spreadsheet.e-autosumbtn > .e-split-btn-div {
        top: 13px;
        text-indent: -2px;
    }

    .e-spreadsheet.e-cellstylebtn > .e-split-btn-div {
        text-indent: 21px;
        top: 54px;

        & when (@skin = "material") {
            text-indent: 23px;
        }
    }

    .e-spreadsheet.e-pastebtn > .e-split-btn-div {
        text-indent: -4px;
    }

    .e-spreadsheet.e-formatastablebtn > .e-split-btn-div {
        text-indent: 23px;
        top: 55px;

        & when (@skin = "material") {
            text-indent: 24px;
        }
    }

    .e-spreadsheet.e-useinformulabtn > .e-split-btn-div {
        text-indent: 57px;
        top: 4px;

        & when (@skin = "office-365") {
            top: 5px;
        }
    }

    .e-spreadsheet .e-ss-resetpictbtn > .e-split-btn-div, .e-spreadsheet .e-ss-pictbrdrbtn > .e-split-btn-div {
        top: 20px;
        text-indent: -1px;
    }

    .e-spreadsheet .e-insertsbtn > .e-split-btn-div {
        text-indent: 0px;
        height: 18px;
    }

    .e-spreadsheet .e-deletesbtn > .e-split-btn-div {
        text-indent: 0px;
        height: 18px;
    }

    .e-spreadsheet.e-sortfltrbtn > .e-split-btn-div {
        text-indent: 18px;
        height: 21px;

        & when (@skin = "material") {
            text-indent: 21px;
        }
    }

    .e-spreadsheet.e-clearbtn > .e-split-btn-div {
        top: 14px;
        text-indent: -2px;
    }

    .e-spreadsheet.e-findbtn > .e-split-btn-div {
        text-indent: 19px;
        height: 22px;
    }

    .e-spreadsheet.e-coptbtn > .e-split-btn-div {
        text-indent: 29px;
        height: 22px;
    }

    .e-spreadsheet.e-pagesizebtn > .e-split-btn-div {
        text-indent: 0px;
    }

    .e-spreadsheet.e-chartbtn > .e-split-btn-div {
        text-indent: 12px;
    }

    .e-spreadsheet.e-fpanebtn > .e-split-btn-div {
        text-indent: 19px;
        height: 22px;
    }

    .e-spreadsheet.e-chartlayoutbtn > .e-split-btn-div {
        text-indent: 25px;
        height: 22px;
    }

    .e-spreadsheet .e-ssr-validationsbtn > .e-split-btn-div {
        text-indent: 30px;
        top: 16px;
    }

    .e-spreadsheet .e-ssr-horizontalprt .e-split-btn-div .e-arrow-sans-down:before {
        text-indent: -8px;
        line-height: 14px;

        & when (@skin = "material") {
            text-indent: -14px;
        }
    }

    .e-spreadsheet .e-ssr-pastesbtn > .e-split-btn-div {
        text-indent: 0px;
        top: 17px;
    }

    .e-spreadsheet.e-autofillbtn > .e-split-btn-div {
        text-indent: 4px;
    }
    /*-------------------------------------Spreadsheet Colorpicker override-------*/
     .e-spreadsheet .e-ss-colorpicker.e-colorwidget .e-in-wrap,
     .e-spreadsheet .e-ss-colorpicker.e-colorwidget {
        border-radius: 0px;
    }

     .e-spreadsheet .e-ss-colorpicker.e-colorwidget .e-in-wrap.e-tool {
        height: 26px;
    }

     .e-spreadsheet .e-ss-colorpicker.e-colorwidget .e-color-container {
        width: 59%;
    }

    .e-spreadsheet .e-ss-colorpicker.e-colorwidget .e-tool-icon .e-selected-color {
        bottom: 0;
        left: 0;
    }

    .e-ss-colorpicker.e-colorpicker .e-footer .e-applyButton {
        left: 51px;
    }

    .e-ss-colorpicker.e-colorpicker.e-popup {
        padding-right: 0;
        padding-top: 10px;
        padding-bottom: 5px;

        & when not (@skin = "office-365") {
            width: 199px;
        }
    }

    .e-ss-colorpicker.e-colorpicker .e-palette-color,
    .e-ss-colorpicker .e-popupWrapper .e-container {
        min-height: 104px;
    }

    .e-ss-colorpicker.e-colorpicker .e-row .e-item {
        height: 12px;
        width: 12px;
    }

    .e-ss-colorpicker.e-colorwidget {
        height: 26px;
        width: 37px;
    }

    .e-spreadsheet .e-colorwidget .e-color-container .e-ss-backgroundcolor + .e-selected-color,
    .e-spreadsheet .e-colorwidget .e-color-container .e-ss-fontcolor + .e-selected-color {
        margin-left: -1px;
        margin-top: 1px;
    }

     .e-colorpicker.e-popup.e-ss-menuclrpkr {
        border: 0 none;
    }

     .e-ss-colorpicker.e-ss-menuclrpkr.e-colorpicker.e-popup {
        padding-bottom: 11px;
    }
    /*-------------------------------------Spreadsheet dialog override------------*/
    .e-dialog .e-crcontent {
        width: 100%;
        height: 100%;
    }

    .e-dialog .e-crlcell {
        float: left;
        width: 46%;
    }

    .e-dialog .e-crrcell {
        width: 50%;
        float: left;
        margin: 2px;
    }

    .e-dialog .e-crcontent .e-crrcell input {
        outline: none;
        width: 100%;
        text-indent: 5px;
    }

    .e-dialog .e-cractionbtn {
        margin-left: 45%;
        height: 37px;
    }

    .e-dialog .e-cractionbtn button {
        margin: 2px;
    }

    .e-dialog .e-alertdlgcontent {
        height: auto;
        padding-bottom: 7px;
        text-align: justify;
    }

    .e-dialog .e-alertdlgcontent ul {
        margin-bottom: 0px;
    }

    .e-dialog .e-custominput {
        width: 100%;
    }

    .e-dialog .e-ss-grid .e-rowcell {
        border: 0;
    }

    .e-dialog .e-nmdlg {
        padding: 10px;
    }

    .e-dialog .e-nmdlgcont {
        margin: 0px 2px;
    }

    .e-dialog .e-nmclose {
        margin-top: 10px;
        margin-right: -1px;
    }

    .e-dialog .e-nmscope {
        opacity: 0.4;
    }

    .e-dialog .e-nmdlgdiv {
        padding-top: 10px;
    }

    .e-dialog .e-formatastabletext {
        margin-left: -5px;
        width: 283px;
    }

    .e-dialog .e-fatnamedlgcell, .e-dialog .e-chartnamedlgcell {
        float: left;
        width: 150px;
        padding: 5px;
        margin: 5px;
    }

    .e-dialog .e-fatnamedlgbtn, .e-dialog .e-chartnamedlgbtn {
        float: left;
        width: 50px;
    }

    .e-dialog .e-fatresizetablecell {
        display: inline-block;
        width: 220px;
        padding: 5px;
        margin: 5px 5px 5px -5px;
    }

    .e-dialog .e-fatresizetablerow {
        width: 480px;
    }

    .e-dialog .e-fatresizetablebtn {
        float: left;
        width: 70px;
        position: relative;
        left: 335px;
    }

    .e-dialog-modal {
        overflow: hidden;
    }

    .e-dialog .e-ss-dlgtab .e-content .e-chkbox-wrap, .e-dialog .e-ss-dlgtabval .e-content .e-chkbox-wrap {
        padding: 5px 5px 5px 0px;
    }

    .e-ss-dialog.e-ss-grid .e-dialog .e-addedrow {
        padding-bottom: 0px;
    }

    .e-ss-dialog.e-ss-grid .e-dialog .e-addedrow table, .e-ss-grid .e-dialog .e-editedrow table {
        border-spacing: 1px;
    }

    .e-ss-dialog.e-ss-grid .e-dialog .e-addedrow table input, .e-ss-grid .e-dialog .e-addedrow table textarea,
    .e-ss-dialog.e-ss-grid .e-dialog .e-editedrow table input,.e-ss-grid .e-dialog .e-editedrow table textarea {
        text-align: left;
    }

    .e-insertdialog.e-widget-content.e-dialog {
        padding: 9px;
    }

    .e-spreadsheet .e-ssr-bscontent div:not(.e-ssr-bsnewtmpl) .e-btn.e-select {
        border: 1px solid transparent;
    }

    .e-spreadsheet .e-borderbtn div span.e-icon:before {
        line-height: 13px;
        text-indent: 0px;
        font-size: 15px;
    }

     .e-ss-menuclrpkr .e-footerContainer {
        display: none;
    }
    /*---------- Excel Like Filter Changes------- */
    .e-spreadsheet .e-excelfilter .e-btncontainer input {
        padding: .2em .4em .3em;
    }

    .e-spreadsheet.e-dlgcontainer .e-dlgBtns .e-clear {
        padding: 3px;
    }

    .e-spreadsheet.e-dlgcontainer .e-dlgBtns .e-filter {
        padding: 3px;
    }

    .e-spreadsheet .e-ssr-protect:before {
        content: "\e6a7";
        font-family: "ej-xlfont";
        font-size: 32px;
        text-indent: -9px;
        line-height: 18px;
    }

     .e-spreadsheet .e-rowcell.e-ofbrdr {
        border-right: 0px;
    }

     .e-spreadsheet .e-rmanchor {
        cursor: cell;
        pointer-events: none;
    }

     .e-spreadsheet .e-btnhgt {
        height: 100%;
    }

     .e-spreadsheet .e-ssr-protectsheet:before {
        content: "\e6a8";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 18px;
        text-indent: -10px;
    }

     .e-spreadsheet .e-ss-cmenuprotect:before {
        content: "\e6a9";
        font-family: "ej-xlfont";
        font-size: 16px;
    }

    .e-spreadsheet .e-ssr-protlockcell:before {
        content: "\e6ae";
        font-family: "ej-xlfont";
        font-size: 20px;
        line-height: 12px;
        text-indent: -4px;
    }

    .e-spreadsheet .e-ssr-protunlockcell:before {
        content: "\e6af";
        font-family: "ej-xlfont";
        font-size: 20px;
        line-height: 12px;
        text-indent: -4px;
    }

    .e-spreadsheet .e-spreadsheetcolumnheader, .e-spreadsheet .e-inputbox, .e-spreadsheet .e-autofill {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }
    /*--------textarea------------*/
    .e-ss-textarea, .e-ss-textarea:focus, .e-ss-textarea:hover {
        outline: none;
        border-width: 1px;
    }
    /*------VS2010-MVC3-site.css dialog-table-css-override------*/
    .e-ss-dialog table td {
        border: none;
        padding: 0px;
    }

    .e-spreadsheet .e-ribbon .e-content-item table td {
        border: none;
        padding: 7px;
    }

    .e-spreadsheet .e-ribbon table, .e-ss-dialog table {
        border: none;
    }
    /*--------Spreadsheet Pivot table------------*/
    .e-spreadsheet .e-ssr-datarefresh:before {
        content: "\e6b5";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 4px;
        text-indent: -8px;
    }

    .e-spreadsheet .e-ssr-changedatasource:before {
        content: "\e6b7";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 4px;
        text-indent: -9px;
    }

    .e-spreadsheet .e-ssr-pivotclearall:before {
        content: "\e6b8";
        font-family: "ej-xlfont";
        font-size: 16px;
        line-height: 16px;
        text-indent: -1px;
    }

    .e-spreadsheet .e-ssr-movepivottable:before {
        content: "\e6b6";
        font-family: "ej-xlfont";
        font-size: 16px;
        line-height: 13px;
        text-indent: -4px;

        & when (@skin = "material") {
            line-height: 16px;
        }
    }

    .e-spreadsheet .e-ssr-fieldlist:before {
        content: "\e6b2";
        font-family: "ej-xlfont";
        font-size: 32px;
        line-height: 4px;
        text-indent: -10px;
    }

    .e-menu .e-ss-pivotrefresh:before {
        content: "\e6b4";
        font-family: "ej-xlfont";
        font-size: 16px;
        text-indent: 3px;
    }

    .e-menu.e-formatastable-adaptive , .e-menu.e-cellstyles-adaptive{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
    }

    .e-spreadsheet .e-bordercontainer {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 99%;
        width: 100%;
        z-index: 10007;
    }

    .e-spreadsheet .e-bordercell {
        width: 63px;
        height: 48px;
        padding: 3px;
        display: inline-block;
        border: 2px solid transparent;
    }

    .e-spreadsheet .e-ss-border-content {
        padding: 15px 15px 15px 28px;
    }

    .e-spreadsheet .e-ss-bdr-header {
        height: 25px;
        border-bottom: 1px solid;
    }

    .e-spreadsheet .e-ribbon .e-icon.e-ss-border:before {
        font-size: 40px;
        display: inline-block;
        vertical-align: middle;
        line-height: 1.16;
        text-indent: 12px;
    }

    .e-spreadsheet .e-border-back {
        float: right;
        padding-top: 6px;
    }

    .e-spreadsheet ul.e-adaptive {
        top: 32px !important;
        left: 0px !important;
    }

    .e-mobileNavigation:before {
        content: "\e75d";
        font-size: 22px;
    }

    .e-mobileNavigation {
        position: absolute;
        float: left;
        padding: 12px 10px 0px 0px;
    }

    .e-spreadsheet .e-lv .e-list .e-list-img {
        height: 28px;
        width: 0px;
    }

    .e-s-dialog .e-ss-dlgtab > .e-content {
        position: relative;
        height: 100%;
    }

     .e-format-Number:before {
        font-family: 'ej-xlfont';
        content: "\e61e";
        font-size: 22px;
        text-indent: 3px;
    }

    .e-menu.e-formatastable-adaptive, .e-menu.e-cellstyles-adaptive,  .e-border-adaptive {
        width: 100%;
        height: 100%;
        top: 0 !important;
        left: 0 !important;
    }

     .e-dlgctndiv .e-ss-dlgtab > .e-content {
        & when not(@skin = "material") {
            padding: 7px 13px 14px 14px;
        }
    }

    .e-ss-dialog .e-lv .e-list.e-margin .e-chevron-right_01 span {
        left: 0;
    }

    .e-ss-dialog .e-chartimg {
        float: left;
    }

    .e-spreadsheet .e-groupexpander.e-disable {
        cursor: default;
        background: none;
    }

    .e-spreadsheet .e-groupexpander.e-disable:hover {
        background: none;
    }
    /* PivotTable Customization*/
    .e-spreadsheet .e-spreadsheetcontentcontainer .e-pivotgrid th,
    .e-spreadsheet .e-spreadsheetcontentcontainer .e-pivotgrid td {
        padding-top: 0px;
        padding-bottom: 0px;
        height: 19px;
        box-sizing: content-box;
    }

    .e-spreadsheet .e-ssr-fieldlist + span.e-btntxt {
        text-indent: -2px;
    }

    .e-ss-dialog .e-ss-lefttopdiv {
        width: 30%;
        float: left;
        padding-right: 28px;
    }

    .e-ss-dialog .e-ss-lefttopdiv label {
        padding-bottom: 7px;
    }

    .e-ss-dialog .e-ss-leftdiv {
        width: 30%;
        padding-right: 16px;
        float: left;

        & when (@skin = "office-365") {
            padding-right: 15px;
            padding-bottom: 15px;
        }
    }

    .e-ss-dialog.e-ss-fcdlg .e-ss-rightdiv tr.e-fdlg-num-options td label {
        & when not (@skin = "office-365") {
            padding-top: 9px;
            padding-bottom: 9px;
        }
    }

    .e-ss-dialog.e-ss-fcdlg .e-ss-rightdiv div button {
        float: right;
        margin-top: 5px;
    }

    .e-ss-dialog.e-ss-insdeldlg .e-dlgctndiv tr td label {
        & when not (@skin = "office-365"), (@skin = "material") {
            margin-top: 6px;
        }
    }

    .e-ss-pictureborder #dashes.picturecolor ul li div {
        width: 30px;
    }

    .e-ss-pictureborder #dashes.picturecolor ul li {
        margin: 10px;
    }

    .e-ss-pictureborder.e-menu #dashes.picturecolor .e-list > .e-menulink {
        min-height: 12px;
    }

    .e-ss-pictureborder.e-menu .e-list > .e-menulink > span.e-icon.e-arrowhead-right:before {
        & when (@skin = "material") {
            padding: 0px;
        }
    }

    .e-ss-pictureborder.e-menu .e-list > .e-menulink > span.e-icon.e-arrowhead-right {
        & when (@skin = "material") {
            top: 45%;
        }
    }

    .e-spreadsheet .e-ribbon .e-numeric {
        & when (@skin = "material") {
            width: 100%;
        }
    }
    .e-spreadsheet td.e-rowcell input.e-input {
           line-height:0.9em;
    }
     .e-fdlg-num-options .e-chkbox-small{
          padding-top:9px;
    } 
    /* Material Theme Changes*/
    .e-ss-dialog.e-ss-fcgdiv {
        bottom: 0;

        & when not (@skin = "material") {
            position: absolute;
        }

        & when (@skin = "material") {
            position: relative;
        }
    }

    .e-spreadsheet .e-ssr-verticalHparent .e-button.e-rbn-button.e-btn {
        & when (@skin = "material") {
            margin-bottom: 0px;
        }
    }


    .e-hyperlink-dlg {
        & when (@skin = "material") {
            width: 390px;
        }
    }

    .e-spreadsheet .e-split .e-padding.e-splitarrowright.e-ssr-horizontalprt {
        & when (@skin = "material") {
            padding-right: 16px;
        }
    }



    .e-spreadsheet .e-splitarrowright.e-ssr-horizontalprt .e-split-btn.e-rht-btn {
        & when (@skin = "material") {
            width: 16px;
        }
    }



    .e-spreadsheet .e-numeric .e-in-wrap {
        & when (@skin = "material") {
            border: none;
        }
    }

    .e-spreadsheet .e-ss-colorpicker .e-in-wrap.e-ssr-colpickHprt .e-ssr-colorcontainer {
        & when (@skin = "material") {
            border: none;
        }
    }

    .e-ss-colorpicker .e-popupWrapper {
        & when (@skin = "material") {
            margin: -5px -7px;
        }
    }

    .e-colorpicker.e-ss-colorpicker .e-footer {
        & when (@skin = "material") {
            margin: none;
        }
    }

     .e-ss-colorpicker.e-colorpicker .e-palette-color,.e-ss-colorpicker .e-popupWrapper .e-container {
        & when (@skin = "material") {
            min-height: 80px;
        }
    }

    .e-ss-dialog .e-tab .e-header.e-addborderbottom .e-active,
    .e-ss-dialog .e-tab .e-header .e-margine-top:hover {
        & when (@skin = "material"), (@skin = "office-365") {
            border-top: none;
        }
    }

    .e-ss-dialog label.e-dlg-fields, .e-ss-dialog span.e-ddl, .e-ss-dialog .ejinputtext, .e-ss-dialog label {
        & when (@skin = "material") {
            margin: 12px 0px 12px 0px;
        }
    }

    .e-ss-dialog .e-tab .e-dialog.e-widget-content > .e-tab {
        & when (@skin = "material") {
            padding: 0px;
        }
    }

    .e-ss-dialog .e-ddl-popup.e-wrap.e-js {
        & when (@skin = "material") {
            margin-top: 12px;
            margin-bottom: 12px;
        }
    }

    .e-ss-dialog .e-dlg-btnfields {
        & when (@skin = "material") {
            padding: 10px 0px 0px 0px;
        }
    }

    .e-ss-dialog.e-ss-mattab .e-dlg-btnfields {
        & when (@skin = "material") {
            padding-right: 24px;
        }
    }

    .e-spreadsheet .e-pager .e-currentitem.e-active, .e-spreadsheet .e-pager .e-currentitem.e-active:hover {
        & when (@skin = "material") {
            border-radius: 0px;
        }
    }

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

    .e-ss-dialog.e-ss-mattab .e-dlg-btnfields {
        & when (@skin = "material") {
            border-top: 2px solid transparent;
        }
    }

    .e-ss-dialog .e-radiobtn-wrap {
        & when (@skin = "material") {
            padding-right: 12px;
        }
    }

    .e-ss-dialog.e-ss-insdeldlg .e-radiobtn-wrap {
        & when not (@skin = "office-365") {
            margin-bottom: -4px;
        }
    }

    .e-ss-dialog.e-ss-valdlg label, .e-ss-dialog.e-ss-valdlg span.e-ddl, .e-ss-dialog.e-ss-valdlg .ejinputtext, .e-ss-dialog.e-ss-fcdlg label, .e-ss-dialog.e-ss-fcdlg .ejinputtext {
        & when (@skin = "material") {
            margin-bottom: 0px;
        }
    }

    .e-ss-dialog.e-ss-valdlg td label {
        & when (@skin = "material") {
            margin-top: 0px;
            padding-top: 12px;
        }
    }

    .e-ss-dialog.e-ss-mattab .e-dlgctndiv .e-ss-dlgtab > .e-content {
        & when (@skin = "material") {
            padding: 12px 24px 0px 24px;
        }
    }

    .e-ss-dialog.e-ss-mattab .e-dialog.e-widget-content {
        & when (@skin = "material") {
            padding: 0px 0px 10px 0px;
        }
    }

    .e-ss-dialog .e-dialog.e-widget-content {
        & when (@skin = "material") {
            padding-bottom: 10px;
        }
    }

    .e-ss-dialog.e-dialog > .e-titlebar {
        & when (@skin = "material") {
            padding-bottom: 13px;
        }
    }

    .e-ss-autocomplete.e-atc .e-in-wrap {
        & when (@skin = "material") {
            border: 1px solid transparent;
        }
    }

    .e-ss-dialog .e-treeview-wrap {
        & when (@skin = "material") {
            padding-bottom: 12px;
            padding-top: 12px;
        }
    }

    .e-ss-dialog .e-ss-fcgdiv {
        & when (@skin = "material") {
            padding: 38px 24px 12px 0px;
        }

        & when (@skin = "office-365") {
            padding: 0px;
        }

        & when not (@skin = "material") {
            padding: 4px;
        }
    }

    .e-ss-dialog label, .e-ss-dialog .e-ss-fcgdiv, .e-ss-dialog.e-ss-grid .e-dialog.e-widget-content {
        & when (@skin = "material") {
            font-family: @spreadsheet-font-family;
            font-size: @font-size;
            font-weight: bold;
        }
    }

    .e-ss-colorpicker.e-colorpicker .e-row .e-item {
        & when (@skin = "material") {
            width: 14px;
            height: 14px;
        }
    }

    .e-ss-dialog .e-chkbox-wrap div {
        & when (@skin = "material") {
            margin-right: 6px;
            margin-top: 12px;
        }
    }

    .e-ss-dialog .e-dialog input.ejinputtext:focus, .e-ss-dialog .e-dialog .ejinputtext {
        & when (@skin= "material") {
            border: 1px solid transparent;
            border-width: 0 0 1px 0;
        }
    }

    .e-ss-dialog .e-dialog input.ejinputtext:focus {
        & when (@skin= "material") {
            border-width: 0 0 2px 0;
        }
    }

    .e-ss-dialog button.e-btn.e-widget {
        & when (@skin= "material") {
            box-sizing: content-box;
        }
    }

    .e-ss-dialog .e-dialog .e-dialog-icon:hover {
        & when (@skin = "material") {
            background: none;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-numericitem {
        & when (@skin= "material") {
            text-indent: -4px;
            font-family: @spreadsheet-font-family;
            font-size: @font-size;
            min-width: 22px;
            width: auto;
        }
    }

    .e-ss-dialog .e-dialog .e-dialog-icon {
        & when (@skin= "material") {
            top: -13px;
            right: -14px;
        }
    }

    .e-ss-dialog .e-dialog.e-widget-content .e-dlgctndiv {
        & when (@skin = "material") {
            margin-bottom: 12px;
        }
    }

    .e-ss-dialog .e-tab.e-js .e-header > .e-item:hover {
        & when (@skin = "material") {
            background: none;
        }
    }

    .e-spreadsheet .e-split .e-left-btn .e-icon:before {
        & when (@skin = "material") {
            height: 14px;
            width: 14px;
            padding: 0px;
            font-size: 16px;
        }
    }

    .e-spreadsheet .e-split .e-left-btn .e-icon.e-ssr-frzpane:before, .e-spreadsheet .e-split .e-left-btn .e-icon.e-ss-findselect:before, .e-spreadsheet .e-split .e-left-btn .e-icon.e-ss-calcopt:before {
        & when (@skin = "material") {
            font-size: 32px;
        }
    }

    .e-spreadsheet .e-split.e-btn-normal [class*="e-splitarrow"] .e-split-btn.e-left-btn {
        & when (@skin = "material") {
            padding: 0px;
        }
    }

    .e-spreadsheet .e-ssr-pastesbtn .e-btntxt {
        & when (@skin = "material") {
            padding-bottom: 16px;
        }
    }

    .e-spreadsheet .e-ssr-paste:before {
        & when (@skin = "material") {
            line-height: 15px;
        }
    }

    .e-spreadsheet .e-split.e-drop .e-in-wrap .e-left-btn.e-fpanebtn .e-split-btn-div .e-icon:before {
        & when (@skin = "material") {
            line-height: 18px;
            text-indent: 19px;
        }
    }

    .e-spreadsheet .e-split.e-drop .e-left-btn .e-split-btn-div .e-icon, .e-spreadsheet .e-split.e-drop .e-in-wrap .e-left-btn .e-split-btn-div .e-icon:before {
        & when (@skin = "material") {
            height: 14px;
            width: 14px;
            font-size: 12px;
        }

        & when (@skin = "office-365") {
            font-size: 10px;
        }
    }

    .e-spreadsheet .e-split.e-drop .e-in-wrap .e-left-btn.e-ssr-validationsbtn .e-split-btn-div .e-icon:before {
        & when (@skin = "material") {
            line-height: 11px;
            text-indent: 30px;
        }
    }


    .e-spreadsheet .e-findbtn .e-btntxt,
    .e-spreadsheet .e-fpanebtn .e-btntxt {
        & when (@skin = "material") {
            line-height: 14px;
            text-indent: 7px;
            text-align: left;
            width: 50px;
        }
    }

    .e-ss-colorpicker.e-colorpicker.e-popup {
        & when (@skin = "material") {
            width: 270px;
        }
    }

    .e-ss-colorpicker.e-colorpicker .e-footer {
        & when (@skin = "material") {
            margin-top: 0px;
        }
    }

    .e-ss-colorpicker .e-popupWrapper {
        & when (@skin = "material") {
            margin: 6px 2px;
        }
    }


    .e-spreadsheet .e-new:before {
        & when (@skin = "material") {
            font-size: 13px;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-pagercontainer div.e-new {
        & when (@skin = "material") {
            margin: -18px 4px -8px 10px;
            top: -3px;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-numericitem {
        & when (@skin = "material") {
            padding-top: 4px;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-pagercontainer {
        & when (@skin = "material") {
            margin: 0px;
        }
    }

    .e-ss-dialog.e-ss-frdlg label {
        & when (@skin = "material") {
            vertical-align: bottom;
            line-height: 11px;
        }
    }

    .e-ss-dialog .e-ss-nmdlg label {
        & when (@skin = "material") {
            vertical-align: bottom;
            line-height: 2px;
        }
    }


    .e-spreadsheet .e-split .e-left-btn .e-icon.e-ssr-condformat:before, .e-spreadsheet .e-split .e-left-btn .e-icon.e-ssr-formatastable:before,
    .e-spreadsheet .e-split .e-left-btn .e-icon.e-ssr-cellstyles:before, .e-spreadsheet .e-split .e-left-btn .e-icon.e-ss-sortfilter:before {
        & when (@skin = "material") {
            font-size: 32px;
        }
    }

    .e-spreadsheet .e-split .e-left-btn .e-icon.e-ssr-autosum:before, .e-spreadsheet .e-split .e-left-btn .e-icon.e-ssr-clear:before {
        & when (@skin = "material") {
            font-size: 16px;
        }
    }


    .e-ss-dialog.e-ss-gotodlg label {
        & when (@skin = "material") {
            line-height: 20px;
        }
    }

    .e-ss-dialog.e-ss-gotodlg .e-dialog .e-ss-dlgtab .e-content .e-chkbox-wrap,
    .e-ss-dialog.e-ss-gotodlg .e-dialog .e-ss-dlgtabval .e-content .e-chkbox-wrap {
        & when (@skin = "material") {
            padding: 0px 5px 9px 0px;
        }
    }

    .e-spreadsheet .e-tablestyleoptionscell {
        & when (@skin = "material") {
            margin: 12px;
        }
    }

    .e-spreadsheet .e-tablestyleoptionslabel {
        & when (@skin = "material") {
            margin-left: 12px;
            vertical-align: top;
            padding: 0px;
        }
    }

    .e-spreadsheet .e-pager .e-arrowheadright:before {
        & when (@skin = "material") {
            content: "\e840";
        }
    }

    .e-spreadsheet .e-pager .e-arrowheadleft:before {
        & when (@skin = "material") {
            content: "\e83f";
        }
    }

    .e-spreadsheet input.ejinputtext:focus, .e-spreadsheet .ejinputtext {
        & when (@skin = "material") {
            border: 1px solid transparent;
            border-width: 0 0 1px 0;
        }
    }

    .e-spreadsheet input.ejinputtext:focus {
        & when (@skin = "material") {
            border-width: 0 0 2px 0;
        }
    }

    .e-spreadsheet .e-split.e-drop .e-droparrowbottom {
        & when (@skin = "material") {
            padding: 0 0 15px 0;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-pagercontainer div {
        & when (@skin = "material") {
            margin-top: 8px;
        }
    }

    .e-spreadsheet .e-spreadsheetmainpanel .e-pager .e-pagercontainer div.e-numericcontainer a {
        & when (@skin = "material") {
            line-height: 26px;
            padding-right: 24px;
            padding-left: 24px;
            margin: 0px;
        }
    }

    .e-spreadsheet .e-split.e-widget .e-in-wrap .e-split-btn-div .e-icon, .e-colorwidget .e-ssr-colpickHprt.e-in-wrap .e-icon,
    .e-ss-colorpicker .e-split.e-widget .e-in-wrap .e-split-btn-div .e-icon {
        & when (@skin = "material") {
            transform: none;
            transition: none;
        }
    }


     .e-spreadsheet .e-ss-wraptext + .e-btntxt {
        & when (@skin = "material") {
            text-indent: 2px;
        }
    }

     .e-spreadsheet .e-ssr-merge:before {
        & when (@skin = "material") {
            text-indent: -5px;
        }
    }

     .e-spreadsheet.e-cformatbtn > .e-split-btn-div .e-arrow-sans-down,  .e-spreadsheet.e-formatastablebtn > .e-split-btn-div .e-arrow-sans-down,
     .e-spreadsheet.e-cellstylebtn > .e-split-btn-div .e-arrow-sans-down {
        & when (@skin = "material") {
            line-height: 6px;
        }
    }

    .e-spreadsheet.e-cformatbtn > .e-split-btn-div .e-arrow-sans-down {
        & when (@skin = "material") {
            text-indent: 33px;
        }
    }

    .e-spreadsheet.e-sortfltrbtn > .e-split-btn-div .e-arrow-sans-down {
        & when (@skin = "material") {
            line-height: 1px;
        }
    }


    .e-spreadsheet.e-chartbtn > .e-split-btn-div .e-icon.e-arrow-sans-down:before {
        & when (@skin = "material") {
            line-height: 17px;
        }
    }

    .e-ssr-validationsbtn > .e-split-btn-div .e-arrow-sans-down {
        & when (@skin = "material") {
            line-height: 13px;
            text-indent: 32px;
        }
    }

    .e-spreadsheet.e-fpanebtn > .e-split-btn-div .e-arrow-sans-down:before {
        & when (@skin = "material") {
            line-height: 1px;
            text-indent: 19px;
        }
    }

    .e-spreadsheet.e-useinformulabtn > .e-split-btn-div .e-arrow-sans-down {
        & when (@skin = "material") {
            line-height: 22px;
        }
    }

    .e-spreadsheet.e-findbtn > .e-split-btn-div .e-arrow-sans-down {
        & when (@skin = "material") {
            line-height: 16px;
        }
    }

    .e-spreadsheet.e-coptbtn > .e-split-btn-div .e-arrow-sans-down:before {
        & when (@skin = "material") {
            line-height: 3px;
            text-indent: 31px;
        }
    }


    .e-ss-dialog .e-dlg-btnfields .e-button {
        & when (@skin = "material") {
            margin-left: 10px;
        }

        & when (@skin = "office-365") {
            margin-left: 15px;
        }
    }

    .e-spreadsheet.e-autosumbtn + .e-drp-btn .e-split-btn-div .e-icon.e-arrow-sans-down:before {
        & when (@skin = "material") {
            line-height: 10px;
        }
    }

    .e-spreadsheet.e-e-clearbtn > .e-split-btn-div .e-arrow-sans-down:before {
        & when (@skin = "material") {
            line-height: 4px;
        }
    }

    .e-spreadsheet .e-ssr-showallcmnt:before {
        & when (@skin = "material") {
            text-indent: -10px;
        }
    }

    .e-spreadsheet .e-ssr-protectsheet:before {
        & when (@skin = "material") {
            line-height: 8px;
        }
    }

    .e-spreadsheet .e-ssr-protect:before {
        & when (@skin = "material") {
            line-height: 12px;
        }
    }

    .e-spreadsheet .e-ssr-protlockcell:before {
        & when (@skin = "material") {
            text-indent: -9px;
        }
    }

    .e-spreadsheet.chartlayoutbtn > .e-split-btn-div .e-arrow-sans-down:before {
        & when (@skin = "material") {
            line-height: 3px;
            text-indent: 30px;
        }
    }

    .e-spreadsheet .e-split.e-drop .e-in-wrap .e-left-btn .e-split-btn-div .e-icon.e-arrow-sans-down,
    .e-spreadsheet .e-split.e-drop .e-in-wrap .e-left-btn .e-split-btn-div .e-icon.e-arrow-sans-down:before {
        & when (@skin = "material") {
            font-size: 12px;
        }
    }

    .e-spreadsheet .e-formulabar .e-inputbox .e-atc .e-in-wrap:before, .e-spreadsheet .e-formulabar .e-inputbox .e-atc .e-in-wrap:after {
        & when (@skin= "material") {
            background: none;
        }
    }

    .e-spreadsheet.e-chartlayoutbtn > .e-split-btn-div .e-icon.e-arrow-sans-down:before {
        & when (@skin= "material") {
            line-height: 16px;
            text-indent: 28px;
        }
    }

    .e-spreadsheet .e-ss-pictbrdrbtn .e-split-btn-div .e-icon.e-arrow-sans-down:before {
        & when (@skin = "material") {
            line-height: 10px;
            text-indent: 8px;
        }
    }

    .e-spreadsheet .e-ss-resetpictbtn .e-split-btn-div .e-icon.e-arrow-sans-down:before {
        & when (@skin = "material") {
            text-indent: 8px;
        }
    }

    .e-spreadsheet .e-content.e-active-content .e-rbn-splitbtn.e-js {
        & when (@skin = "material") {
            padding-bottom: 0px;
        }
    }

    .e-spreadsheet .e-insertsbtn > .e-split-btn-div .e-icon.e-arrow-sans-down:before, .e-spreadsheet .e-deletesbtn > .e-split-btn-div .e-icon.e-arrow-sans-down:before {
        & when (@skin = "material") {
            line-height: 17px;
        }
    }

     .e-spreadsheet.e-coptbtn > .e-split-btn-div .e-icon.e-arrow-sans-down:before {
        & when (@skin = "material") {
            line-height: 17px;
            text-indent: 29px;
        }
    }

    .e-ss-dialog .e-scroller.e-widget > .e-content.e-alertdlg {
        & when (@skin = "material") {
            float: none;
        }
    }

    .e-spreadsheet .e-spreadsheetgrppanel [class^="e-"] {
        & when (@skin = "material") {
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
        }
    }
    /*-------------------------------------Office-365 theme changes-----------------------*/
    .e-spreadsheet .e-spreadsheetmainpanel .e-spreadsheetfooter {
        & when (@skin="office-365") {
            height: 35px;
        }
    }

    .e-spreadsheet .e-formulabar {
        & when (@skin= "office-365") {
            height: 44px;
        }
    }

    .e-spreadsheet .e-indexbox {
        & when (@skin= "office-365") {
            margin: 8px 5px 8px 10px;
        }
    }


    .e-spreadsheet .e-inputbox {
        & when (@skin= "office-365") {
            margin: 8px 10px 8px 5px;
        }
    }

    .e-menu .e-formatastablecell {
        & when (@skin= "office-365") {
            border-width: 2px;
            margin: 4px;
        }
    }

    .e-menu .e-cellstylecell {
        & when (@skin= "office-365") {
            margin: 4px;
        }
    }

    .e-ss-dialog:not(.e-ss-fcdlg):not(.e-ss-valdlg) .e-dialog .e-dlgctndiv tr td,
    .e-ss-dialog.e-ss-valdlg .e-dialog .e-dlgctndiv form tr:nth-child(2) td,
    .e-ss-dialog.e-ss-cfdlg div.e-dlg-fields,
    .e-ss-dialog.e-ss-cfdlg div.e-dlg-fields:first-child,
    .e-ss-dialog.e-ss-hyperlinkdlg .e-treeview-wrap,
    .e-ss-dialog .e-ss-fcgdiv,
    .e-ss-dialog.e-ss-movedlg div.e-dlg-fields,
    .e-ss-dialog.e-ss-valdlg .e-ddl.e-widget,
    .e-ss-dialog.e-ss-gotodlg form div.e-dlg-fields {
        & when (@skin= "office-365") {
            padding-bottom: 15px;
        }
    }

    .e-ss-dialog .e-dialog .e-dlgctndiv label {
        & when (@skin = "office-365") {
            font-family: @spreadsheet-font-family;
            font-size: @spreadsheet-font-size;
        }
    }

    .e-ss-dialog > .e-titlebar {
        & when (@skin = "office-365") {
            text-align: left;
        }
    }

    .e-ss-dialog.e-ss-cfdlg div label.e-dlg-fields,
    .e-ss-dialog .e-ss-lefttopdiv label,
    .e-ss-dialog .e-ss-righttopdiv label,
    .e-ss-dialog.e-ss-valdlg label,
    .e-ss-dialog.e-ss-gotodlg div label.e-dlg-fields,
    .e-ss-dialog.e-ss-nmdlg .e-widget div.e-nmdlg-content ~ div.e-dlg-fields label {
        & when (@skin = "office-365") {
            padding-bottom: 6px;
        }
    }


    .e-ss-dialog.e-ss-fcdlg .e-ss-centerdiv .e-ss-rightdiv tr td label {
        & when (@skin = "office-365") {
            padding-bottom: 6px;
            padding-top: 15px;
        }
    }

    .e-ss-dialog .e-dlgctndiv .e-ss-dlgtab > .e-content {
        & when (@skin = "office-365") {
            padding: 15px 0 0 0;
        }
    }

    .e-ss-dialog.e-ss-pvtdlg .e-dialog .e-dlgctndiv table tr:nth-child(2) td {
        & when not (@skin = "office-365") {
            padding-top: 4px;
            padding-bottom: 4px;
        }

        & when (@skin = "office-365") {
            padding-top: 0px;
        }
    }


    .e-ss-dialog.e-ss-pvtdlg .e-dialog .e-dlgctndiv table tr:nth-child(3) td div,
    .e-ss-dialog.e-ss-pvtdlg .e-dialog .e-dlgctndiv table tr:nth-child(4) td div,
    .e-ss-dialog.e-ss-gotodlg .e-radiobtn-wrap.e-widget {
        & when (@skin = "office-365") {
            padding-right: 6px;
        }
    }

    .e-ss-dialog.e-ss-pvtdlg .e-dialog .e-dlgctndiv table tr:nth-child(3) td,
    .e-ss-dialog.e-ss-pvtdlg .e-dialog .e-dlgctndiv table tr:nth-child(4) td,
    .e-ss-dialog .e-ss-nmdlg tr td:nth-child(2) {
        & when (@skin = "office-365") {
            padding-left: 15px;
        }
    }

    .e-ss-dialog .e-ss-changerange tr td label, .e-ss-dialog.e-ss-hyperlinkdlg tr td label,
    .e-ss-dialog.e-ss-pwddlg tr td:nth-child(1), .e-ss-dialog.e-ss-grid tr td:nth-child(1) {
        & when (@skin = "office-365") {
            padding-right: 15px;
        }
    }

    .e-ss-dialog.e-ss-valdlg .e-dialog .e-dlgctndiv form tr td {
        & when (@skin = "office-365") {
            padding-bottom: 0px;
        }
    }

    .e-ss-dialog .e-ss-nmdlg .e-ss-fathdr {
        margin-left: 4px;
    }

    .e-ss-dialog .e-ss-nmdlg span.e-chkbox-wrap, .e-ss-dialog .e-ss-nmdlg .e-ss-fathdr {
        & when (@skin = "office-365") {
            vertical-align: middle;
        }
    }


    .e-ss-dialog.e-charttype-dlg .e-ss-leftdiv {
        & when (@skin = "office-365") {
            padding-right: 0px;
        }
    }

    .e-ss-dialog.e-charttype-dlg .e-chartimg {
        & when (@skin = "office-365") {
            margin: 0px 0px 15px 15px;
        }
    }

    .e-ss-dialog.e-ss-valdlg table,
    .e-ss-dialog.e-ss-fcdlg .e-ss-centerdiv .e-ss-rightdiv tr td input {
        & when (@skin = "office-365") {
            margin-bottom: 15px;
        }
    }

    .e-ss-dialog.e-ss-fcdlg .e-ss-centerdiv .e-ss-rightdiv tr td button {
        & when (@skin = "office-365") {
            margin-top: 15px;
        }
    }

    .e-ss-dialog .e-tab .e-bottom-line.e-active {
        & when (@skin = "office-365") {
            margin: 0px;
        }
    }

     .e-ss-drpdiv {
        display: none;
    }

     .e-ss-righttopdiv {
        width: 75%;
    }

     .e-ss-drpfontdiv {
        display: none;
    }

     .e-ss-fontcdiv {
        float: left;
        padding-left: 25px;
    }

     .e-ss-fontnrmldiv {
        float: left;
        margin-top: 10px;
        padding-left: 25px;
    }

     .e-ss-fontcntdiv {
        display: table;
        width: 100%;
    }

     .e-ss-fontstylediv {
        width: 30%;
        margin-right: 16px;
        float: left;
    }

     .e-ss-stylediv {
        margin-bottom: 15px;
        width: 100%;
    }

     .e-ss-colordiv {
             float: left;
    padding-right: 8px;
     }

     .e-ss-rightdiv {
        width: 240px;

        & when (@skin = "office-365") {
            width: 208px;
        }
    }

    .e-ss-dialog.e-ss-gotodlg div label.e-dlg-fields:nth-child(2) {
        & when (@skin = "office-365") {
            padding-top: 15px;
        }
    }

    .e-ss-dialog .e-ss-okbtn.e-btn.e-select {
        & when (@skin = "office-365") {
            border: 1px solid;
        }
    }

    .e-spreadsheet .e-pager div.e-numericcontainer {
        & when (@skin = "office-365") {
            margin-top: 0px;
        }
    }

    .e-spreadsheet .e-pager .e-numericitem {
        & when (@skin = "office-365") {
            width: auto;
            height: 14px;
            line-height: normal;
        }
    }

    .e-ss-dialog .e-ss-fcgdiv {
        & when (@skin = "office-365") {
            font-weight: normal;
        }
    }

    .e-ss-colorpicker.e-colorwidget .e-in-wrap.e-box.e-ssr-colpickHprt:hover {
        & when (@skin = "office-365") {
            border: none;
        }
    }

    .e-ss-colorpicker.e-colorwidget .e-select.e-ssr-colorcontainer {
        & when (@skin = "office-365") {
            width: 30%;
        }
    }

    .e-spreadsheet .e-split.e-btn-normal.e-drop .e-in-wrap .e-left-btn .e-split-btn-div .e-icon:before {
        & when (@skin = "office-365") {
            font-size: 10px;
        }
    }

    .e-ss-colorpicker span.e-ssr-colorcontainer .e-icon.e-arrow-sans-down:before {
        & when (@skin = "office-365") {
            text-indent: -3px;
            line-height: 15px;
        }
    }

    .e-ss-dialog .e-radiobtn-wrap .e-radmedium .e-rad-icon {
        & when (@skin = "office-365") {
            line-height: 13px;
        }
    }

    .e-ss-dialog.e-ss-nmdlg .e-widget .e-dlg-fields.e-nmdlg-content {
        & when (@skin = "office-365") {
            min-height: 200px;
        }
    }

    .e-ss-dialog.e-ss-nmdlg .e-widget div.e-nmdlg-content ~ div.e-dlg-fields {
        & when (@skin = "office-365") {
            padding-bottom: 15px;
            padding-top: 15px;
        }
    }

    .e-spreadsheet .e-ribbon .e-rbn-ddl.e-ddl .e-select {
        & when (@skin = "office-365") {
            height: 22px;
        }
    }

    .e-spreadsheet .e-ribbon .e-rbn-ddl.e-ddl .e-icon {
        & when (@skin = "office-365") {
            padding: 6px;
            text-indent: 3px;
        }
    }

    .e-spreadsheet .e-ribbon.e-js .e-split.e-btn-normal.e-drop .e-split-btn.e-left-btn {
        & when (@skin = "office-365") {
            width: 100%;
        }
    }

    .e-spreadsheet .e-ssr-clear:before {
        & when (@skin = "office-365") {
            line-height: 23px;
        }
    }

    .e-spreadsheet .e-clearbtn .e-btntxt {
        & when (@skin = "office-365") {
            padding-bottom: 5px;
        }
    }

    .e-spreadsheet.e-clearbtn > .e-split-btn-div {
        & when (@skin = "office-365") {
            top: 19px;
        }
    }

    .e-spreadsheet .e-ss-resetpictbtn > .e-split-btn-div, .e-spreadsheet .e-ss-pictbrdrbtn > .e-split-btn-div {
        & when (@skin = "office-365") {
            top: 19px;
            text-indent: 6px;
        }

        & when (@skin = "bootstrap") {
            top: 18px;
        }
    }

    .e-ss-dialog .e-nmdlg-content {
        width: 300px;
    }

    .e-ss-dialog .e-ss-maindiv {
        max-width: 418px;
    }

    .e-ss-dialog .e-ss-leftdiv {
        min-width: 120px;
    }

    .e-ss-dialog .e-ss-maindiv, .e-ss-dialog .e-ss-centerdiv {
        width: 100%;
    }

    .e-ss-dialog .e-chtdlgcontent .e-ss-rightdiv {
        min-height: 250px;
    }

    .e-ss-dialog .e-ss-cfdlg {
        max-width: 300px;
    }

    .e-ss-dialog .e-ss-nm-dlg-grid {
        width: 400px;
        height: 180px;
    }
    .e-ss-dialog .selement {
    width: 17%;
}
.e-spreadsheet span#editsparkline {
    margin: -4px 3px;
}
.e-spreadsheet .e-sparklinedesignshowcell{
    float: left;
    margin-left: 1px;
    margin-bottom: 2px;
    padding-left: 2px;
    padding-right: 22px;
    width: 89px;
}
.e-spreadsheet .e-ss-linesparkline:before {
    content: "\e904";
    font-family: "ej-xlfont";
    font-size: 16px;
    text-indent: -1px;
    line-height: 15px;
}
.e-spreadsheet .e-ss-columnsparkline:before {
    content: "\e901";
    font-family: "ej-xlfont";
    font-size: 16px;
    text-indent: -1px;
    line-height: 15px;
}
.e-spreadsheet .e-ss-piesparkline:before {
    content: "\e905";
    font-family: "ej-xlfont";
    font-size: 16px;
    text-indent: -1px;
    line-height: 15px;
}
.e-spreadsheet .e-ss-areasparkline:before {
    content: "\e900";
    font-family: "ej-xlfont";
    font-size: 16px;
    text-indent: -1px;
    line-height: 15px;
}
.e-spreadsheet .e-ss-winlosssparkline:before {
    content: "\e907";
    font-family: "ej-xlfont";
    font-size: 16px;
    text-indent: -1px;
    line-height: 15px;
}
.e-spreadsheet .e-ss-editdata:before {
    content: "\e902";
    font-family: "ej-xlfont";
    font-size: 20px;
    text-indent: -10px;
    line-height: 26px;
}
.e-spreadsheet .e-ss-sparkline {
    position: absolute;
    z-index: 0;
}
.e-spreadsheet .e-ss-sparklinecolor:before {
    content: "\e906";
    font-family: "ej-xlfont";
    font-size: 20px;
    text-indent: -3px;
    line-height: 17px;
}
.e-spreadsheet .e-ss-markercolor:before {
    content: "\e908";
    font-family: "ej-xlfont";
    font-size: 20px;
    text-indent: -11px;
    line-height: 17px;
}
.e-spreadsheet .e-ss-editdatasparkline:before  {
    content: "\e903";
    font-family: "ej-xlfont";
    text-indent: -1px;
    line-height: 16px;
    font-size: 18px;

}
.e-colorwidget.e-ss-colorpicker {
	border-radius:0;
}
    /*-------------------------------------SpreadSheet End -----------------------*/
}

.mixin(@widget) when (@widget = radialslider), (@widget = none) {
    /*---------------------------------------Radial slider start---------------------------*/
    @-webkit-keyframes radialslidershow /* Safari and Chrome */ {
        from {
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        to {
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes radialslidershow {
        from {
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        to {
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes radialsliderhide /* Safari and Chrome */ {
        from {
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }

        to {
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

    @keyframes radialsliderhide {
        from {
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }

        to {
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

    .e-slider-show {
        -webkit-animation: radialslidershow 2s;
        -moz-animation: radialslidershow 2s;
        -ms-animation: radialslidershow 2s;
        -o-animation: radialslidershow 2s;
        animation: radialslidershow 2s;
    }

    .e-slider-hide {
        -webkit-animation: radialsliderhide 2s;
        -moz-animation: radialsliderhide 2s;
        -ms-animation: radialsliderhide 2s;
        -o-animation: radialsliderhide 2s;
        animation: radialsliderhide 2s;
    }



    .e-radialslider-svg-show {
        -webkit-animation: clock 2s;
        -moz-animation: clock 2s;
        -ms-animation: clock 2s;
        -o-animation: clock 2s;
        animation: clock 2s;
    }

    .e-radialslider .e-rs-svg {
        border-radius: 50%;
    }

    .e-radialslider-svg-hide {
        -webkit-animation: anticlock 2s;
        -moz-animation: anticlock 2s;
        -ms-animation: anticlock 2s;
        -o-animation: anticlock 2s;
        animation: anticlock 2s;
    }

    @keyframes clock {
        0% {
            opacity: 0;
        }

        25% {
            opacity: 0.25;
        }

        50% {
            opacity: 0.75;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes anticlock {
        0% {
            opacity: 1;
        }

        25% {
            opacity: 0.35;
        }

        50% {
            opacity: 0.25;
        }

        100% {
            opacity: 0;
        }
    }


    .e-radialslider .e-inner-circle {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 60% auto;
        border: 4px solid;
        border-radius: 50%;
        height: 40px;
        width: 40px;
        z-index: 1;
        position: absolute;
        background-color: white;
    }


    .e-radail-slider-wrapper {
        position: relative;
    }
    /*---------------------------------------------Radial slider end-------------------------------------*/
}

/*------------------------------------- Spell Check -------------------------------------------*/
.mixin(@widget) when (@widget = spellchecker), (@widget = none) {

    .e-spellcheck .e-btnaddtodictionary,
    .e-spellcheck .e-btnignoreall,
    .e-spellcheck .e-btnchangeall,
    .e-spellcheck .e-btnclose {
        & when (@skin= "material") {
            margin-top: 15px;
        }

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

        & when (@skin= "office-365") {
            margin-top: 20px;
        }
    }

    .e-spellcheck .e-dictionarylabel,
     .e-lablesuggestions {
        font-weight: 400;
    }

    .e-spellcheck .e-spellcheckdialog {
        padding: 0.5em;
    }

    .e-spellcheck .e-sentence {
        height: 100%;
        width: 100%;
        border: 1px solid;
        box-sizing: border-box;
    }

    .e-spellcheck .e-sentencecontent {
        padding: 2px;
    }

    .e-spellcheck .e-errorword {
        background-image: url('common-images/spellcheck/highlight.png');
        background-repeat: repeat-x;
        background-position: bottom;
    }

    .e-spellcheck .e-sentencecontent .e-errorword {
        font-weight: bold;
        background-image: none;
    }

    .e-spellcheck .e-cell {
        & when not (@skin= "material") {
            height: 90px;
        }
    }

    .e-spellcheck .e-sentencecell,
     .e-suggestioncell {
        & when (@skin= "material") {
            height: 97.5%;
        }

        width: 65%;
        float: left;
    }

    .e-spellcheck .e-buttoncell {
        & when not (@skin= "material") {
            height: 90px;
        }

        & when (@skin= "material") {
            height: 100%;
        }

        width: 32%;
        float: right;
    }

    .e-spellcheck .e-labelcell,
    .e-spellcheck .e-dialogdiv {
        padding-bottom: 2px;
    }

    .e-spellalert .e-alerttextdiv {
        & when (@skin= "material") {
            width: 100%;
        }

        & when (@skin= "material") {
            width: 96%;
            padding: 5px;
        }

        & when (@skin="office-365") {
            padding-bottom: 20px !important;
        }
    }

    .e-spellalert .e-alerttextdiv,
    .e-spellalert .e-alertbtn {
        & when not (@skin="office-365") {
            padding: 5px;
        }
    }

    .e-spellalert .e-alertnotification {
        font-size: 30px;
        padding: 1px;
    }

    .e-spellalert .e-alertnotifydiv {
        float: left;
    }

    .e-spellalert .e-alerttext {
        float: right;

        & when (@skin="office-365") {
            width: 70%;
            font-weight: 400 !important;
        }

        & when not (@skin="office-365") {
            width: 75%;
        }
    }

    .e-spellalert .e-alerttextdiv {
        height: 30px;
    }

    .e-spellalert .e-alertnotification.e-icon,
    .e-spellalert .e-alertnotification.e-icon:before {
        height: 30px;
        width: 30px;
    }

    .e-spellalert .e-missingalert .e-alertnotification {
        width: 10%;
    }

    .e-spellalert .e-missingalert .e-alerttext {
        & when not(@skin= "office-365") {
            width: 89%;
        }

        & when (@skin= "office-365") {
            width: 88%;
            height: 22px;
        }
    }

    .e-spellalert .e-missingalert .e-alerttextdiv,
    .e-spellalert .e-missingalert .e-alertbtn {
        & when not(@skin= "office-365") {
            width: 98%;
        }

        & when (@skin= "office-365") {
            width: 100%;
        }
    }

    .e-spellmenu .e-errorsuggestions {
        font-weight: bold;
    }

    .e-spellcheck .e-titlebar {
        & when (@skin= "material") {
            padding: 18px 18px 0px 18px !important;
        }

        & when (@skin="office-365") {
            padding: 20px 25px 0;
        }
    }

    .e-spellcheckdialog.e-dialog {
        & when (@skin= "material") {
            padding: 16px 18px 18px 18px !important;
        }

        & when (@skin="office-365") {
            padding: 28px 25px 20px;
        }
    }

    .e-spellcheck .e-dialogdiv {
        & when (@skin= "material") {
            padding-bottom: 0px;
        }

        & when (@skin= "office-365") {
            padding-bottom: 0px;
        }
    }

    .e-spellcheck .e-labelrow {
        & when (@skin= "material") {
            padding-bottom: 12px;
            height: 5%;
        }

        & when (@skin= "office-365") {
            padding-bottom: 15px;
            height: 5%;
        }
    }

    .e-spellcheckdialog .e-buttoncell {
        & when (@skin= "material") {
            width: 40% !important;
            padding-left: 24px;
            box-sizing: border-box;
        }

        & when (@skin= "office-365") {
            width: 35% !important;
            padding-left: 20px;
            box-sizing: border-box;
        }
    }

    .e-spellcheck .e-sentencecell,
    .e-spellcheck .e-suggestioncell {
        & when (@skin= "material") {
            width: 60% !important;
            float: left;
        }
    }

    .e-spellcheckdialog .e-suggestionsrow,
    .e-spellcheckdialog .e-sentencerow {
        & when (@skin= "material") {
            width: 100%;
            height: 40%;
        }

        & when not (@skin= "material") {
            height: 90px;
        }

        & when (@skin ="office-365") {
            width: 100%;
            height: 39% !important;
        }
    }

    .e-spellcheckdialog .e-sentencerow {
        & when (@skin= "material") {
            padding-bottom: 16px;
        }

        & when (@skin= "office-365") {
            padding-bottom: 15px;
        }
    }

    .e-spellcheck.e-dialog-wrap {
        & when (@skin= "material") {
            min-height: 360px !important;
            width: 510px !important;
        }
    }

    .e-spellcheck .e-buttoncell {
        & when (@skin= "material") {
            height: 100%;
        }
    }

    .e-spellmenu {
        & when (@skin= "material") {
            width: 220px !important;
            box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.21) !important;
            border-radius: 2px !important;
            padding: 0px !important;
        }
    }

    .e-spellmenu .e-list {
        & when (@skin= "material") {
            line-height: 30px !important;
        }
    }

    .e-spellmenu .e-list.e-errorsuggestions > .e-menulink {
        & when (@skin= "office-365") {
            line-height: 34px !important;
            font-weight: bold !important;
        }
    }

    .e-spellmenu .e-list.e-errorsuggestions.e-separator {
        & when (@skin= "office-365") {
            border-bottom: 1px solid #c8c8c8 !important;
        }
    }

    .e-spellmenu .e-menulink {
        & when (@skin= "material") {
            padding: 3px 18px 3px 18px !important;
        }
    }

    .e-spellcheck .e-dialogdiv .e-dialog-scroller,
    .e-spellcheck .e-spellcheckdialog {
        & when (@skin= "material") {
            width: 510px !important;
            height: 394px !important;
        }

        & when (@skin="office-365") {
            width: 548px !important;
            height: 394px !important;
        }
    }

    .e-spellcheck .e-sentencecontent {
        & when (@skin= "material") {
            padding: 8px 0px 0px 8px !important;
            font-size: 13px !important;
        }

        & when (@skin= "office-365") {
            padding: 8px 0px 0px 8px !important;
            font-size: 13px !important;
            font-weight: 400 !important;
        }
    }

    .e-spellcheck.e-dialog.e-dialog-wrap {
        & when (@skin= "material") {
            height: 440px !important;
        }

        & when (@skin="office-365") {
            min-height: 360px !important;
            width: 550px !important;
        }
    }

    .e-spellcheck .e-sentencescroller {
        & when not (@skin= "material") {
            height: 100% !important;
        }

        & when not (@skin= "office-365") {
            height: 100% !important;
        }
    }

    .e-spellcheck .e-sentencescroller,
    .e-spellcheck .e-scrollbar,
    .e-spellcheck .e-dialogdiv {
        & when (@skin="material") {
            height: 100% !important;
        }

        & when (@skin="office-365") {
            height: 100% !important;
        }
    }

    .e-spellcheck .e-sentencecell,
    .e-spellcheck .e-buttoncell {
        & when (@skin= "material") {
            height: 100%;
        }

        & when (@skin= "office-365") {
            height: 100%;
        }
    }

    .e-spellcheck .e-suggestioncell {
        & when (@skin= "material") {
            height: 97.5%;
        }

        & when (@skin= "office-365") {
            height: 97.5%;
        }
    }

    .e-spellcheck .e-spellbuttons {
        & when not (@skin= "material") {
            height: 25px;
        }

        & when (@skin= "office-365") {
            height: 34px;
        }
    }

    .e-spellalert.e-dialog-wrap {
        & when (@skin= "office-365") {
            width: 280px !important;
        }
    }

    .e-spellalert .e-titlebar {
        & when (@skin= "material") {
            padding: 12px !important;
        }

        & when (@skin="office-365") {
            padding: 20px 25px 0 !important;
        }
    }

    .e-spellalert .e-dialog.e-widget-content {
        & when (@skin= "material") {
            padding: 0 12px 12px !important;
        }
    }

    .e-spellalert .e-alertdialog .e-alertbutton {
        & when not (@skin= "material") {
            height: 25px;
            min-width: 100px;
        }
    }

    .e-spellcheck .e-suggesteditems.e-listbox {
        & when (@skin= "material") {
            font-size: 13px;
        }
    }

    .e-spellcheck .e-suggesteditems.e-listbox li {
        & when (@skin= "material") {
            padding: 0px 0px 0px 18px !important;
            line-height: 36px !important;
        }
    }

    .e-spellalert.e-dialog.e-dialog-wrap,
    .e-spellalert .e-dialog-scroller,
    .e-spellalert .e-alertdialog {
        & when (@skin= "material") {
            width: 280px !important;
        }
    }

    .e-spellalert.e-elementmissing.e-dialog.e-dialog-wrap,
    .e-spellalert.e-elementmissing .e-dialog-scroller,
    .e-spellalert.e-elementmissing .e-alertdialog {
        & when (@skin= "material") {
            width: 460px !important;
        }
    }

    .e-spellalert.e-dialog.e-dialog-wrap {
        & when (@skin= "office-365") {
            width: 280px !important;
        }
    }

    .e-spellalert.e-elementmissing.e-dialog.e-dialog-wrap {
        & when (@skin= "office-365") {
            width: 400px !important;
        }
    }

    .e-spellalert.e-elementmissing .e-dialog-scroller,
    .e-spellalert.e-elementmissing .e-alertdialog {
        & when (@skin= "office-365") {
            width: 350px !important;
            height: 78px !important;
        }
    }

    .e-spellalert .e-dialog-scroller,
    .e-spellalert .e-alertdialog {
        & when (@skin= "office-365") {
            width: 228px !important;
            height: 78px !important;
        }
    }

    .e-spellalert .e-dialog-scroller {
        & when (@skin= "office-365") {
            padding: 28px 25px 20px;
        }
    }

    .e-spellalert .e-alertdialog {
        & when (@skin= "office-365") {
            padding: 0px !important;
        }
    }
}
/*------------------------------------- Media Player-------------------------------------------*/
.e-media-player .e-media-stop:before {
    content: "\e126";
}

.e-media-player .e-media-forward:before {
    content: "\e90f" !important;
}

.e-media-player .e-media-backward:before {
    content: "\e90e" !important;
}

.e-media-player .e-media-next:before {
    content: "\e910" !important;
}

.e-media-player .e-media-previous:before {
    content: "\e90d" !important;
}

.e-media-player .e-media-next.basic:before {
    content: "\e910" !important;
}

.e-media-player .e-media-previous.basic:before {
    content: "\e90d" !important;
}

.e-media-player .e-media-volume:before {
    content: "\e907";
}

.e-media-player .e-media-volume.media-muted:before {
    content: "\e105";
}

.e-media-player .e-media-fullscreen:before {
    content: "\e914";
}

.e-media-player .e-media-smallscreen:before {
    content: "\e100";
}

.e-media-player .e-media-settings:before {
    content: "\e913";
}

.e-media-player .e-media-playlist:before {
    content: "\e906";
}

.e-media-player .e-media-snapshot:before {
    content: "\e125";
}

.e-media-player .e-media-download:before {
    content: "\e102";
}

.e-media-player .e-media-repeat:before {
    content: "\e12b";
}

.e-media-player .e-media-shuffle:before {
    content: "\e142";
}

.e-media-player .e-media-play:before,
.e-media-player .e-media-playlist-play:before,
.e-media-player .e-media-center-play:before {
    content: "\e135";
}

.e-media-player .e-media-pause:before, .e-media-player .e-media-center-pause:before {
    content: "\e108";
}

.e-media-player .e-media-playlist-header-previous:before {
    content: "\e120";
}

.e-media-player .e-media-playlist-header-next:before {
    content: "\e107";
}

.e-media-player .e-media-playlist-close {
    content: "\e908";
}

.e-media-player .e-media-playlist-toggle.e-media-expand:before {
    content: "\e116";
}

.e-media-player .e-media-playlist-toggle.e-media-collapse:before {
    content: "\e118";
}

.e-media-player .e-media-settings-selector:before {
    content: "\e90b";
}

.e-media-player .e-media-playlist-close:before {
    content: "\e908";
}


/*region media container styles*/
.e-media-player .e-media-element {
    width: 100%;
    height: 100%;
}

.e-media-player .e-media-element-div {
    width: 100%;
    height: 100%;
    position: relative;
}

.e-media-player .e-media-focus-div {
    width: 0px;
    height: 0px;
}

.e-media-player .e-media-content-div {
    width: 100%;
    height: 100%;
    position: relative;
}

.e-media-player .e-media-youtube {
    pointer-events: none !important;
}

.e-media-player {
    border: 1px solid;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    outline: none;
    min-width: 300px !important;
    min-height: 250px !important;
    font-family: Segoe UI, Helvetica Neue, Ubuntu, Arial !important;
}

.e-media-player * {
    outline: none;
}

.e-media-player .e-media-control-container {
    bottom: 0px;
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 45px;
    z-index: 1;
}

.e-media-player .e-slider {
    border: none !important;
}
/*region media container styles*/

/* region toolbar styles*/
.e-media-player .e-media-timeslider.e-media-adv {
    height: 4px !important;
    top: 50%;
    margin-top: -4px;
}

.e-media-player .e-media-timeslider-div.e-media-adv {
    left: 0px;
    position: relative;
    top: 0px;
    height: 20px;
    padding-left: 7px;
    z-index: 100;
}

.e-media-player .e-media-timeslider-div.e-media-adv .e-slider-wrap {
    left: 7px;
    z-index: 3;
    height: 20px !important;
    padding: 0 !important;
}

.e-media-player .e-slider-wrap {
    cursor: pointer;
    padding: 0px !important;
}

.e-media-player .e-media-toolbar-icon:before, .e-media-player .e-media-playlist-icon:before, .e-media-player .e-media-playlist-toggle:before {
    position: relative;
    opacity: 0.85;
}

.e-media-player .e-media-playlist-icon:before, .e-media-player .e-media-playlist-toggle:before {
    top: 50%;
    margin-top: -7px;
    left: 50%;
    margin-left: -7px;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-icon {
    width: 20px;
    float: left;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: relative;
    margin-left: 10px;
    z-index: 2;
}

.e-media-player .e-media-toolbar.adv .e-media-play, .e-media-player .e-media-toolbar.adv .e-media-pause {
    padding-left: 3px;
    padding-right: 5px;
}

.e-media-player .e-media-toolbar.adv .e-media-volume-slider-li {
    margin-top: -3px;
    width: 50px;
    margin-left: 7px !important;
}

.e-media-player .e-media-toolbar.adv .e-media-volume-slider-li .e-slider-wrap {
    height: 20px;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-li {
    margin-top: 8px;
    cursor: pointer;
    width: 10px;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-shfflegroup .e-media-toolbar-li {
    width: 30%;
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-playgroup .e-media-toolbar-li {
    width: 5%;
    float: right !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-volumegroup .e-media-toolbar-li {
    width: 15%;
    float: right !important;
    padding-right: 0px !important;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-volume-li {
    width: 50px !important;
    max-width: 100px !important;
    padding-left: 6px !important;
    padding-right: 3px !important;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-volumegroup .e-media-volume-text-li {
    width: 15% !important;
    max-width: 50px !important;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-settingsgroup .e-media-toolbar-li {
    width: 20%;
    float: right !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.e-media-player .e-media-toolbar.adv {
    border: none !important;
    overflow: hidden;
    position: relative;
    top: -20px;
}

.e-media-player .e-media-toolbar-icon {
    display: inline-block;
}

.e-media-player .e-media-toolbar-icon.disabled:before, .e-media-player .e-media-playlist-icon.disabled:before, .e-media-player .e-list.disabled {
    opacity: 0.3 !important;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-ul {
    position: relative;
    height: 94% !important;
    float: left;
    padding: 0;
    margin-top: 0px;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-shfflegroup {
    width: 23%;
    left: 2%;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-playgroup {
    text-align: center;
    left: 10px;
    float: left;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-settingsgroup {
    text-align: right;
    right: 10px;
    float: right;
}

.e-media-player .e-media-toolbar.adv .e-slider-wrap {
    position: relative;
    width: 50px;
    float: left;
    top: 50%;
    margin-top: -3px;
    padding: 0;
}

.e-media-player .e-media-toolbar.adv .e-media-volume-text {
    font-size: 9px;
    width: 100%;
    position: absolute;
    top: 43%;
}

.e-media-player .e-media-custom-fullscreen {
    width: 100% !important;
    height: 100% !important;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2147483647;
}

.e-media-player.fullscreen {
    width: 100% !important;
    height: 100% !important;
    top: 0px;
    left: 0px;
    position: fixed;
    border: none !important;
}

.e-media-player .e-media-timeslider.e-media-adv.e-slider .e-handle {
    margin-top: -3px !important;
}

.e-media-player .e-media-toolbar.adv .e-media-volume-slider {
    width: 100%;
    height: 4px;
    margin-top: 1px;
}

.e-media-player .e-media-toolbar.adv .e-media-volume-slider .e-handle {
    height: 10px !important;
    width: 10px !important;
    margin-top: -1px !important;
}

.e-media-player .e-media-toolbar.adv .e-media-play-li div {
    margin-left: 3px;
}

.e-media-player .e-media-toolbar.adv .e-media-play:before, .e-media-player .e-media-toolbar.adv .e-media-pause:before {
    font-size: 17px !important;
}

.e-media-player .e-media-time-stamp.e-media-adv {
    font-size: 9px;
    height: 10px;
    position: absolute;
    right: 9px;
    margin-top: -1px;
    z-index: 2;
}

.e-media-player .e-media-time-stamp.e-media-adv div {
    height: 100%;
    float: left;
}

.e-media-player .media-shuffled:before, .e-media-player .media-muted:before, .e-media-player .media-repeated:before,
.e-media-player .e-media-playlist-visible:before {
    border: none;
}

.e-media-player .media-muted:before {
}

.e-media-player .e-media-toolbar.basic {
    border: none !important;
    overflow: hidden;
    height: 45px;
}

.e-media-player .e-media-prev-li.basic, .e-media-player .e-media-next-li.basic {
    position: absolute;
    width: 39px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    cursor: pointer;
}

.e-media-player .e-media-previous.basic, .e-media-player .e-media-next.basic {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.e-media-player .e-media-prev-li.basic .e-media-toolbar-icon:before, .e-media-player .e-media-next-li.basic .e-media-toolbar-icon:before {
    font-size: 30px !important;
    width: 30px;
    height: 30px;
    position: relative;
    opacity: 1 !important;
}

.e-media-player .e-media-prev-li.basic {
    left: 10%;
}

.e-media-player .e-media-next-li.basic {
    right: 10%;
}

.e-media-player .e-media-toolbar.basic .e-media-timeslider.e-media-basic {
    height: 3px !important;
}

.e-media-player .e-media-toolbar.basic .e-media-play:before, .e-media-player .e-media-toolbar.basic .e-media-pause:before {
    font-size: 17px !important;
    margin-top: -2px;
}

.e-media-player .e-media-toolbar.basic .e-media-toolbar-right-div {
    width: 20px;
    height: 100%;
    float: left;
    margin-left: 10px;
}

.e-media-player .e-media-toolbar-time-icon-li {
    width: 25px !important;
}

.e-media-player .e-media-toolbar.basic .e-media-toolbar-icon {
    width: 100%;
    position: relative;
    float: left;
}

.e-media-player .e-media-toolbar.basic .e-media-toolbar-li {
    width: 20px;
    margin-left: 10px;
    height: 100%;
    list-style: none !important;
    float: left;
    position: relative;
}

.e-media-player .e-media-toolbar.basic .e-media-toolbar-icon:before {
    font-size: 16px;
}

.e-media-player .e-media-toolbar.basic .e-media-previous:before, .e-media-toolbar.basic .e-media-next:before {
    font-size: 13px !important;
    margin-top: 1px;
}

.e-media-player .e-media-toolbar.basic .e-media-fullscreen:before {
    font-size: 13px !important;
    margin-top: -1px !important;
}

.e-media-player .e-media-toolbar.basic .e-media-settings:before {
    margin-top: -2px !important;
    margin-left: 2px !important;
}

.e-media-player .e-media-toolbar.basic .e-media-play-li {
    width: 20px;
    left: 5px;
}

.e-media-player .e-media-toolbar.basic .e-media-toolbar-right-li {
    width: 100px;
    float: right !important;
    right: 5px;
}

.e-media-player .e-media-toolbar.basic.fullscreen .e-media-toolbar-right-li {
    width: 38px !important;
}

.e-media-player .e-media-toolbar.basic .e-media-toolbar-split-li {
    width: 1px;
}

.e-media-player .e-media-toolbar.basic .e-media-split {
    top: 50% !important;
    margin-top: -10px;
}

.e-media-player .e-media-toolbar.basic .e-media-toolbar-time-icon-li {
    margin-left: -1px;
}

.e-media-player .e-media-toolbar.basic.audio .e-media-toolbar-right-li {
    width: 40px !important;
}

.e-media-player .e-media-toolbar.basic .e-media-play-li, .e-media-player .e-media-toolbar.basic .e-media-toolbar-right-li {
    height: 100%;
    background-position: 50% 50%;
}

.e-media-player .e-media-time-stamp-end.e-media-basic, .e-media-time-stamp-run.e-media-basic {
    font-size: 11px;
    position: absolute;
    top: 50%;
    margin-top: -8px;
}

.e-media-player .e-media-toolbar.basic .e-media-toolbar-time-run-li {
    width: 55px;
    left: 10px;
}

.e-media-player .e-media-time-stamp-end.e-media-basic {
    left: 10px;
}

.e-media-player .e-media-time-stamp-run.e-media-basic {
    right: 5px;
}

.e-media-player .e-media-toolbar.basic .e-media-time-li .e-slider-wrap {
    width: 100% !important;
    top: 50%;
    height: 40px !important;
    top: 50%;
    margin-top: -18px;
    position: absolute;
}

.e-media-player .e-media-toolbar.basic .e-media-time-li {
    left: 10px;
}

.e-media-player .e-media-toolbar.basic .e-media-time-li .e-handle {
    margin-top: -4px !important;
}

.e-media-player .e-media-toolbar.basic .e-media-toolbar-ul {
    width: 100%;
    height: 100%;
    position: relative;
    float: left;
    padding: 0;
}

.e-media-player .e-media-toolbar.basic .e-media-vol-slider-li {
    height: 90px;
    width: 20px;
    position: absolute;
    top: -75px;
    z-index: 3;
}

.e-media-player .e-media-toolbar.basic .e-media-vol-slider-li .e-slider-wrap {
    width: 40px !important;
    margin-left: -11px !important;
    margin-top: 10px;
}

.e-media-player .e-media-toolbar.basic .e-media-volume-slider {
    width: 4px !important;
    position: relative;
    left: 50%;
    margin-left: -0.5px;
}

.e-media-player .e-media-toolbar.basic .e-media-volume-slider .e-handle {
    width: 10px !important;
    height: 10px !important;
    margin-left: -1px !important;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-playgroup .e-media-toolbar-icon:before {
    margin-left: 0px;
}

.e-media-player .e-media-toolbar.mob {
    height: 30px !important;
    position: relative;
    top: 50%;
    margin-top: -15px;
}

.e-media-player .e-media-toolbar-ul.mob-playGroup {
    position: absolute;
    top: 50%;
    margin-top: -25px;
    width: 300px;
    height: 50px;
    margin-left: 0px;
}

.e-media-player .e-media-toolbar-ul.mob-playGroup .e-media-toolbar-icon {
    width: 50px;
    height: 100%;
    position: relative;
}

.e-media-player .e-media-toolbar-ul.mob-playGroup .e-media-toolbar-icon:before {
    font-size: 20px;
    width: 30px !important;
    height: 30px !important;
    opacity: 1 !important;
}

.e-media-player .e-media-toolbar-ul.mob-playGroup .e-media-previous {
    left: 0px;
}

.e-media-player .e-media-toolbar-ul.mob-playGroup .e-media-next {
    right: 0px;
    float: right;
    left: 0px;
}

.e-media-player .e-media-toolbar-ul.mob-playGroup .e-media-play:before, .e-media-player .e-media-toolbar-ul.mob-playGroup .e-media-pause:before {
    font-size: 32px !important;
}

.e-media-player .e-media-toolbar-ul.mob-playGroup .e-media-play:before {
    left: 5px;
}

.e-media-player .e-media-toolbar-ul.mob-playGroup .e-media-pause:before {
    left: -2px;
}

.e-media-player .e-media-toolbar.mob .toolGroup {
    width: 100%;
    height: 100%;
    padding: 0;
}

.e-media-player .e-media-toolbar.mob .e-media-toolbar-li {
    list-style: none !important;
    position: relative;
    float: left;
    display: inline-block;
    height: 25px;
    margin-left: 20px;
}

.e-media-player .e-media-toolbar.mob .e-media-time-li {
    top: 1px;
}

.e-media-player .e-media-toolbar.mob .e-media-toolbar-time-run-li, .e-media-player .e-media-toolbar.mob .e-media-toolbar-time-icon-li {
    width: 25px;
}

.e-media-player .e-media-toolbar.mob .e-media-toolbar-fullscreen-li {
    width: 15px;
}

.e-media-player .e-media-time-stamp-end.e-media-mob, .e-media-player .e-media-time-stamp-run.e-media-mob {
    font-size: 12px;
}

.e-media-player .e-media-timeslider.e-media-mob {
    height: 4px;
    top: 2px;
}

.e-media-player .e-media-toolbar.mob .e-slider-wrap {
    position: relative;
    top: 0px;
}

.e-media-toolbar.mob .e-slider .e-handle {
}

.e-media-player .e-media-toolbar.mob .e-media-fullscreen {
    width: 30px !important;
    height: 30px !important;
    margin-left: -10px;
    margin-top: 0px;
}

.e-media-player .e-media-toolbar.mob .e-media-fullscreen:before {
    font-size: 12px;
    margin-top: 2px;
}
/* end region toolbar styles*/
/* region toolbar font styles */
/* large size */
.e-media-large-size .e-media-toolbar.adv .e-media-stop:before {
    font-size: 13px !important;
}

.e-media-large-size .e-media-toolbar.adv .e-media-fullscreen:before {
    font-size: 12px !important;
    margin-left: 0px;
}

.e-media-large-size .e-media-toolbar.adv .e-media-toolbar-playgroup .e-media-toolbar-icon:before {
    font-size: 12px;
}

.e-media-large-size .e-media-toolbar.adv .e-media-toolbar-settingsgroup .e-media-toolbar-icon:before {
    font-size: 14px;
}

.e-media-large-size .e-media-toolbar.adv .e-media-toolbar-shfflegroup .e-media-toolbar-icon:before {
    font-size: 19px;
}

.e-media-large-size .e-media-toolbar.adv .e-media-toolbar-volumegroup .e-media-toolbar-icon:before {
    font-size: 17px;
}

.e-media-large-size .e-media-toolbar.adv .e-media-playlist:before {
    font-size: 15px !important;
    margin-top: -1px;
}

.e-media-large-size .e-media-toolbar.adv .e-media-toolbar-icon:before {
    cursor: pointer;
}

.e-media-player .e-media-toolbar-icon {
    cursor: pointer;
}

.e-media-player .disabled, .e-media-player .disabled:before {
    cursor: default !important;
}
/* end region toolbar font styles */

/*region settings styles*/
.e-media-settings-popup {
    height: auto !important;
    border: none !important;
    position: absolute;
    z-index: 2147483647;
    margin-left: -30px;
}

.e-media-settings-popup > .e-lv.subpage {
    padding: 5px;
    border: 1px solid !important;
    border-radius: 4px;
}

.e-media-settings-popup .e-sub-list-container {
    width: 100% !important;
}

.e-media-settings-popup .e-list-hdr.e-clearall.e-content {
    width: 100% !important;
}

.e-media-settings-popup .e-togglebutton {
    float: right;
    height: 18px;
    width: 30px;
    margin-right: -5px;
    margin-top: -27px;
    font-size: 10px;
    border-radius: 2px;
}

.e-media-settings-popup li {
    height: 25px !important;
    border: none !important;
}

.e-media-settings-popup .e-lv .e-list .e-chevron-right_01 {
    padding-top: 4px !important;
}

.e-media-settings-popup .e-lv.subpage.e-childitem .e-chevron-right_01 {
    text-align: left;
    margin-left: 20px;
}

.e-media-settings-popup .e-lv.subpage.e-childitem {
    width: 86px !important;
    position: relative;
    left: 50px;
}

.e-media-settings-popup .e-lv.subpage:not(.e-childitem) .e-header {
    display: none !important;
}

.e-media-settings-popup .e-lv.subpage.e-childitem .e-header, .e-media-settings-popup .e-lv.subpage.e-childitem .e-list-container,
.e-media-settings-popup .e-lv.subpage.e-childitem .e-content {
    width: 100%;
}

.e-media-settings-popup .e-list-hdr {
    margin-top: 4px;
}

.e-media-settings-popup .e-header {
    height: 30px !important;
    border: none !important;
    border-bottom: 1px solid !important;
    width: 112% !important;
    margin-left: -5px;
    box-shadow: none !important;
}

.e-media-settings-popup .e-lv.subpage.e-childitem .e-header .e-hicon,
.e-media-settings-popup .e-lv.subpage.e-childitem .e-btn-text {
    position: relative;
    top: -8px;
    font-size: 14px;
    font-weight: normal;
}

.e-media-settings-popup .e-lv.subpage.e-childitem .e-btn-text {
    left: 8px;
}

.e-media-settings-popup .e-lv.subpage.e-childitem .e-btn-text.speed {
    left: 24px !important;
}

.e-media-settings-popup .e-lv .e-list {
    padding-top: 1px;
    position: relative;
    padding-left: 9px;
}

.e-media-settings-popup .e-list-container {
    border: none !important;
    overflow: hidden !important;
}

.e-media-settings-popup .e-lv .e-arrow .e-chevron-right_01:before {
    right: -6px !important;
}
/*.e-media-settings-selector {
    font-family: 'ej-webfont' !important;
}*/

.e-media-player .e-media-settings-selector:before {
    font-size: 15px;
    position: absolute;
    left: 5px;
    font-family: 'ej-webfont' !important;
}

.e-media-settings-popup .e-childcontainer li {
    text-align: center;
}

.e-media-settings-popup .e-lv.subpage .e-header .e-htitle {
    position: relative;
    left: 2px;
}

/*.e-media-settings-subtitle a {
    width: 80% !important;
}*/

.e-media-player .e-media-settings-overlay {
    position: absolute;
    width: 96px;
    height: 35px;
    top: 0px;
    left: 0px;
    z-index: 3;
}
/*end region settings styles*/

/*region playlist styles*/
.e-media-player .e-media-playlist-item {
    width: 100%;
    height: 100%;
    position: relative;
}

.e-media-player .e-media-playlist-number {
    float: left;
    text-align: center;
    position: relative;
    top: 50%;
    margin-top: -8px;
    font-weight: normal;
    font-size: 11px;
    width: 20px;
    padding: 0;
    left: -2px;
}

.e-media-player .e-media-playlist-img-div {
    float: left;
    height: auto;
    top: 14%;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0;
}

.e-media-player .e-media-playlist-img-div.desktop {
    width: 50px;
    height: 70%;
    border: 1px solid;
}

.e-media-player .e-media-playlist-img-div.mobile {
    width: 50px;
    margin-left: 5px;
    height: 70%;
    border: 1px solid;
}

.e-media-player .e-media-playlist-img {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.e-media-player .e-media-playlist-play {
    width: 5px;
    height: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
}

.e-media-player .e-media-playlist-play:before {
    font-size: 7px;
    margin-top: -4px;
    margin-left: -1px;
    opacity: 0.4;
}

.e-media-player .e-media-playlist-title-div {
    float: left;
    padding: 0;
    height: 90%;
    overflow: hidden;
    padding-left: 10px;
    font-size: 11px;
}

.e-media-player .e-media-playlist-title-div div, .e-media-player .e-media-video-title, .e-media-player .e-media-audio-title, .e-media-playlist-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.e-media-player .e-media-playlist-name {
    font-size: 12px;
}

.e-media-player .e-media-playlist-title, .e-media-player .e-media-playlist-navigation {
    height: 50%;
    margin-left: 13px;
}

.e-media-player .e-media-playlist-title {
    font-size: 12px;
    top: 5px;
    position: relative;
    padding-top: 2px;
}

.e-media-player .e-media-playlist-author {
    font-size: 10px;
    margin-top: 2px;
}

.e-media-player .e-media-playlist-div li {
    height: 41px;
}

.e-media-player .e-media-playlist-container.desktop {
    width: 0%;
    position: absolute;
    z-index: 2;
    height: 99.5% !important;
    top: 0;
    right: 0;
    border: 1px solid;
}

.e-media-player .e-media-playlist-container.mobile {
    width: 100% !important;
    height: auto !important;
    position: relative;
    z-index: 1;
    top: 0;
    right: 1px;
    border: 1px solid;
}

.e-media-player .e-media-playlist-container.mobile .e-listbox-container {
    height: auto !important;
    width: 100% !important;
}

.e-media-player .e-media-playlist-container.mobile .e-ddl-popup.e-wrap.e-js {
    height: auto;
}

.e-media-player .e-media-playlist-header {
    height: 45px;
    border-bottom: 2px solid;
}

.e-media-player .e-media-playlist-container.mobile .e-media-playlist-header {
	border-bottom: 0px;
}

.e-mediaplayer .e-hide, .e-media-custom-fullscreen.e-hide {
    display: none;
}

.e-mediaplayer.e-js ul, .e-mediaplayer.e-js ol {
    margin-top: 0;
    margin-bottom: 10px;
}

.e-media-player .e-media-playlist-title-div {
    margin-top: 4px;
}

.e-media-player .e-media-playlist-container .e-ddl-popup {
    border: none;
}

.e-media-player .e-media-playlist-header label {
    float: left;
    position: relative;
    font-size: 9px;
    top: 50%;
    margin-top: -10px;
    font-weight: normal;
}

.e-media-player .e-media-playlist-header span {
    width: 20px;
    height: 20px;
    float: right;
    top: 50%;
    margin-top: -10px;
    position: relative;
    right: 13px;
}

.e-media-player .e-media-playlist-header-previous {
    cursor: pointer;
}

.e-media-player .e-media-playlist-header-next {
    cursor: pointer;
}

.e-media-player .e-media-playlist-header-next:before, .e-media-player .e-media-playlist-header-previous:before {
    font-size: 12px !important;
}

.e-media-player .e-media-playlist-toggle.desktop {
    position: absolute;
    width: 12px;
    height: 60px;
    top: 50%;
    margin-top: -30px;
    right: 0%;
    border: 1px solid;
    border-radius: 6px;
    z-index: 2;
    cursor: pointer;
}

.e-media-player .e-media-playlist-toggle.mobile {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 5px !important;
    bottom: -45px;
    transform: rotate(45);
    border-radius: 6px;
    z-index: 2;
    cursor: pointer;
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Safari */
    transform: rotate(270deg); /* Standard syntax */
}

.e-media-player .e-media-playlist-toggle.e-media-expand.desktop {
    border-radius: 0px 6px 6px 0px;
    margin-right: -13px;
}

.e-media-player .e-media-playlist-toggle.e-media-collapse.desktop {
    border-radius: 6px 0px 0px 6px;
}

.e-media-player .e-media-playlist-toggle.e-media-expand:before, .e-media-player .e-media-playlist-toggle.e-media-collapse:before {
    font-size: 12px !important;
    left: 50%;
    margin-left: -5px;
}

.e-media-player .e-media-playlist-container .e-listbox li {
    border-bottom: 1px solid;
    cursor: pointer;
    overflow: hidden;
}

.e-media-player .e-media-playlist-container .e-listbox-container {
    width: 100% !important;
}
/*region playlist styles*/

/*other styles*/
.e-media-player .e-media-video-baner {
    width: 100%;
    height: 40px;
    position: absolute;
    z-index: 1;
    top: 0px;
}

.e-media-player .e-media-video-baner {
    background-image: url('common-images/mediaplayer/header_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.e-media-player .e-media-video-title {
    height: 100%;
    width: 85%;
    position: relative;
    top: 50%;
    margin-top: -12px;
    font-size: 14px;
    left: 10px;
}

.e-media-player .e-media-audio-detail {
    width: 150px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -75px;
    top: 50%;
    margin-top: -100px;
}

.e-media-player .e-media-audio-poster {
    width: 100%;
    height: 85%;
}

.e-media-player .e-media-audio-title {
    width: 100%;
    height: 10%;
    z-index: 1;
    text-align: center;
    margin-top: 5px;
}

.e-media-player .e-media-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.e-media-player .e-slider .e-handle {
    margin-top: -3px !important;
    margin-left: -3px !important;
    border: 1px solid !important;
}

.e-media-player video::-webkit-media-controls {
    display: none !important;
}

.e-media-player .e-media-time-tooltip {
    width: auto;
    height: auto;
    position: absolute;
    z-index: 2147483647;
    border: 1px solid;
    padding: 4px 5px 4px 5px;
    font-size: 12px;
    border-radius: 2px;
    white-space: nowrap;
}

.e-media-player .e-media-hd-tag {
    float: right;
    position: absolute;
    right: 4px;
    font-weight: bold;
    top: 5px;
}

.e-media-player .e-media-settings-subtitle .e-slider-wrap {
    padding: 0px;
    position: absolute;
    top: 10px;
    right: 15px;
}

.e-media-player .e-media-settings-subtitle .e-slider {
    height: 13px !important;
}

.e-media-player .e-media-volume:before {
    font-size: 16px !important;
    margin-top: -2px;
}

.e-media-player .e-media-forward:before, .e-media-player .e-media-backward:before, .e-media-player .e-media-settings:before {
    font-size: 16px !important;
    margin-top: -2px;
}

.e-media-player .e-media-toolbar-split {
    width: 1px;
    height: 100%;
    position: relative;
    top: 13px;
    float: left;
    list-style: none;
    margin-left: 10px;
    z-index: 3;
}

.e-media-player .e-media-playlist-close {
    width: 10px;
    height: 10px;
    position: absolute;
    right: 13px;
    top: 10px;
    cursor: pointer;
}

.e-media-player .e-media-playlist-close:before {
    font-size: 9px;
}

.e-media-player .e-media-slider-size {
    width: 20px !important;
    height: 20px !important;
    top: -5.5px !important;
    border: 1px !important;
}

.e-media-player .e-waitpopup-pane {
    z-index: 1 !important;
}

.e-media-player .e-media-waiting-template {
    background: url('common-images/mediaplayer/waiting_popup.gif') no-repeat scroll 0px 0px transparent;
    background-size: 100% 100%;
    background-position: 100% 100%;
    height: 50px;
    width: 50px;
}

.e-media-player .e-waitpopup-pane > div {
    display: inline-block !important;
    margin-left: -25px;
    margin-top: -25px;
    left: 50% !important;
    top: 50% !important;
}

@keyframes e-media-fadeout {
    0% {
        opacity: 1;
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -ms-transform: scale(2);
        -webkit-transform: scale(2);
        transform: scale(2);
    }
}

.e-media-player .e-media-play-animation {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 1px;
    left: 0px;
    border-radius: 50%;
    opacity: 0;
    -moz-animation: e-media-fadeout .5s linear 1 normal forwards;
    -webkit-animation: e-media-fadeout .5s linear 1 normal forwards;
    animation: e-media-fadeout .5s linear 1 normal forwards;
    animation-name: e-media-fadeout;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-delay: initial;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: initial;
}
.e-media-player .e-media-player .e-hide {
	display:none;
}

.e-media-player .e-media-center-icon {
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 3;
}

.e-media-player .e-media-center-icon:before {
    font-size: 32px !important;
    width: 30px;
    height: 30px;
    opacity: 1 !important;
}
/*@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
    .e-media-toolbar.adv .e-media-lp-icons {
        display: none;
    }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
    .e-media-toolbar.adv .e-media-lp-icons {
        display: block;
    }
}*/

/*#region hover*/

.e-media-player .e-media-toolbar.adv .e-media-toolbar-volume-li:hover {
    border: none !important;
}

/*#region calc*/
.e-media-player .e-media-center-icon {
    top: 46% !important;
    top: -moz-calc(~'50% - 25px') !important;
    top: -webkit-calc(~'50% - 25px') !important;
    top: -o-calc(~'50% - 25px') !important;
    top: calc(~'50% - 25px') !important;
    left: 46% !important;
    left: -moz-calc(~'50% - 25px') !important;
    left: -webkit-calc(~'50% - 25px') !important;
    left: -o-calc(~'50% - 25px') !important;
    left: calc(~'50% - 25px') !important;
}

.e-media-player .e-media-center-icon:before {
    top: 46% !important;
    top: -moz-calc(~'50% - 17px') !important;
    top: -webkit-calc(~'50% - 17px') !important;
    top: -o-calc(~'50% - 17px') !important;
    top: calc(~'50% - 17px') !important;
}

.e-media-player .e-media-center-play:before {
    left: 46% !important;
    left: -moz-calc(~'50% - 19px') !important;
    left: -webkit-calc(~'50% - 19px') !important;
    left: -o-calc(~'50% - 19px') !important;
    left: calc(~'50% - 19px') !important;
}

.e-media-player .e-media-center-pause:before {
    left: 46% !important;
    left: -moz-calc(~'50% - 26px') !important;
    left: -webkit-calc(~'50% - 26px') !important;
    left: -o-calc(~'50% - 26px') !important;
    left: calc(~'50% - 26px') !important;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-icon {
    height: 95%;
    height: -moz-calc(~'100% - 20px');
    height: -webkit-calc(~'100% - 20px');
    height: -o-calc(~'100% - 20px');
    height: calc(~'100% - 20px');
}

.e-media-player .e-media-timeslider-div.e-media-adv, .e-media-player .e-media-timeslider-div.e-media-adv .e-slider-wrap {
    width: 96% !important;
    width: -moz-calc(~'100% - 8.5px') !important;
    width: -webkit-calc(~'100% - 8.5px') !important;
    width: -o-calc(~'100% - 8.5px') !important;
    width: calc(~'100% - 8.5px') !important;
}

.e-media-player .e-media-toolbar-ul.mob-playGroup .e-media-previous:before, .e-media-player .e-media-toolbar-ul.mob-playGroup .e-media-next:before {
    top: 46% !important;
    top: -moz-calc(~'50% - 12px') !important;
    top: -webkit-calc(~'50% - 12px') !important;
    top: -o-calc(~'50% - 12px') !important;
    top: calc(~'50% - 12px') !important;
    left: 5px;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-icon {
    top: 22px;
}

.e-media-player .e-media-toolbar.adv .e-media-toolbar-li {
    height: 95%;
    height: -moz-calc(~'100% - 6px');
    height: -webkit-calc(~'100% - 6px');
    height: -o-calc(~'100% - 6px');
    height: calc(~'100% - 6px');
}

.e-media-player .e-media-toolbar.adv {
    height: 100%;
}

.e-media-player .e-media-prev-li.basic .e-media-toolbar-icon:before, .e-media-player .e-media-next-li.basic .e-media-toolbar-icon:before {
    top: 45%;
    top: -moz-calc(~'50% - 18px');
    top: -webkit-calc(~'50% - 18px');
    top: -o-calc(~'50% - 18px');
    top: calc(~'50% - 18px');
    left: 45%;
    left: -moz-calc(~'50% - 18px');
    left: -webkit-calc(~'50% - 18px');
    left: -o-calc(~'50% - 18px');
    left: calc(~'50% - 18px');
}

.e-media-player .e-media-toolbar.basic .e-media-toolbar-icon {
    top: 47%;
    top: -moz-calc(~'50% - 6px');
    top: -webkit-calc(~'50% - 6px');
    top: -o-calc(~'50% - 6px');
    top: calc(~'50% - 6px');
}

.e-media-player .e-media-toolbar.basic .e-media-time-li {
    width: 47%;
    width: -moz-calc(~'100% - 255px');
    width: -webkit-calc(~'100% - 255px');
    width: -o-calc(~'100% - 255px');
    width: calc(~'100% - 255px');
}

.e-media-player .e-media-toolbar.basic.fullscreen .e-media-time-li {
    width: 47% !important;
    width: -moz-calc(~'100% - 165px') !important;
    width: -webkit-calc(~'100% - 165px') !important;
    width: -o-calc(~'100% - 165px') !important;
    width: calc(~'100% - 165px') !important;
}

.e-media-player .e-media-toolbar.basic.audio .e-media-time-li {
    width: 50%;
    width: -moz-calc(~'100% - 180px');
    width: -webkit-calc(~'100% - 180px');
    width: -o-calc(~'100% - 180px');
    width: calc(~'100% - 180px');
}

.e-media-player .e-media-toolbar-ul.mob-playGroup .e-media-toolbar-icon:before {
    top: 46%;
    top: -moz-calc(~'50% - 15px');
    top: -webkit-calc(~'50% - 15px');
    top: -o-calc(~'50% - 15px');
    top: calc(~'50% - 15px');
}

.e-media-player .e-media-toolbar-ul.mob-playGroup .e-media-play, .e-media-player .e-media-toolbar-ul.mob-playGroup .e-media-pause {
    left: 50px;
    left: -moz-calc(~'50% - 100px');
    left: -webkit-calc(~'50% - 100px');
    left: -o-calc(~'50% - 100px');
    left: calc(~'50% - 100px');
}

.e-media-player .e-media-toolbar.mob .e-media-time-li {
    width: 50%;
    width: -moz-calc(~'100% - 160px');
    width: -webkit-calc(~'100% - 160px');
    width: -o-calc(~'100% - 160px');
    width: calc(~'100% - 160px');
}

.e-media-large-size .e-media-toolbar.adv .e-media-repeat:before, .e-media-large-size .e-media-toolbar.adv .e-media-shuffle:before {
    top: 45%;
    top: -moz-calc(~'50% - 7px');
    top: -webkit-calc(~'50% - 7px');
    top: -o-calc(~'50% - 7px');
    top: calc(~'50% - 7px');
}

.e-media-large-size .e-media-toolbar.adv .e-media-toolbar-icon:before {
    top: 45%;
    top: -moz-calc(~'50% - 8px');
    top: -webkit-calc(~'50% - 8px');
    top: -o-calc(~'50% - 8px');
    top: calc(~'50% - 8px');
    left: 45%;
    left: -moz-calc(~'50% - 9px');
    left: -webkit-calc(~'50% - 9px');
    left: -o-calc(~'50% - 9px');
    left: calc(~'50% - 9px');
}

.e-media-player .e-media-playlist-title-div.desktop {
    width: 50%;
    width: -moz-calc(~'100% - 85px');
    width: -webkit-calc(~'100% - 85px');
    width: -o-calc(~'100% - 85px');
    width: calc(~'100% - 85px');
}

.e-media-player .e-media-playlist-title-div.mobile {
    width: 75%;
    width: -moz-calc(~'100% - 90px');
    width: -webkit-calc(~'100% - 90px');
    width: -o-calc(~'100% - 90px');
    width: calc(~'100% - 90px');
}

.e-media-player .e-media-playlist-title {
    width: 60%;
    width: -moz-calc(~'100% - 40px');
    width: -webkit-calc(~'100% - 40px');
    width: -o-calc(~'100% - 40px');
    width: calc(~'100% - 40px');
}

.e-media-player .e-media-playlist-navigation {
    width: 80%;
    width: -moz-calc(~'100% - 13px');
    width: -webkit-calc(~'100% - 13px');
    width: -o-calc(~'100% - 13px');
    width: calc(~'100% - 13px');
}

.e-media-player .e-media-playlist-container.desktop .e-ddl-popup {
    height: 80% !important;
    height: -moz-calc(~'100% - 46px') !important;
    height: -webkit-calc(~'100% - 46px') !important;
    height: -o-calc(~'100% - 46px') !important;
    height: calc(~'100% - 46px') !important;
}

.e-media-player .e-media-toolbar.mob .e-media-toolbar-li {
    top: 45%;
    top: -moz-calc(~'50% - 10px');
    top: -webkit-calc(~'50% - 10px');
    top: -o-calc(~'50% - 10px');
    top: calc(~'50% - 10px');
}

.e-media-player .e-media-toolbar.basic .e-media-timeslider.e-media-basic {
    top: 45%;
    top: -moz-calc(~'50% - 3.5px');
    top: -webkit-calc(~'50% - 3.5px');
    top: -o-calc(~'50% - 3.5px');
    top: calc(~'50% - 3.5px');
}

.e-media-player .e-media-timeslider.e-media-mob {
    top: 45%;
    top: -moz-calc(~'50% - 4px');
    top: -webkit-calc(~'50% - 4px');
    top: -o-calc(~'50% - 4px');
    top: calc(~'50% - 4px');
}

.e-media-player .e-media-toolbar-ul.mob-playGroup {
    left: 45%;
    left: -moz-calc(~'50% - 190px');
    left: -webkit-calc(~'50% - 190px');
    left: -o-calc(~'50% - 190px');
    left: calc(~'50% - 190px');
}

.e-media-player .e-media-toolbar.adv .e-media-play:before, .e-media-player .e-media-toolbar.adv .e-media-pause:before {
    top: 45% !important;
    top: -moz-calc(~'50% - 11px') !important;
    top: -webkit-calc(~'50% - 11px') !important;
    top: -o-calc(~'50% - 11px') !important;
    top: calc(~'50% - 11px') !important;
}

.e-media-settings-popup .e-lv.subpage.e-childitem.e-slideleft{
            box-sizing: content-box;
}




/*------------------------------------- End Media Player-------------------------------------------*/
/*------------------------------------- ComboBox-------------------------------------------*/
.mixin(@widget) when (@widget = combobox), (@widget = none) {

  .e-ddl.e-popup .e-dropdownbase.e-combobox-group .e-list-item {
    padding-left: 2em;
    text-indent: 0;
  }
  .e-ddl.e-input-group .e-ddl-icon.e-comboie,
  .e-ddl.e-input-group .e-clear-icon.e-comboie {
	display:block;
	position: absolute;	
  }
  .e-ddl.e-input-group .e-ddl-icon.e-comboie {
	right: 0px;
    top: 0px;
     & when (@skin= "office-365") {
        padding-top: 11px;
    }
  }
  .e-ddl.e-input-group .e-ddl-icon.e-comboie.e-comboie9 {
	padding: 8px 7px 8px 7px;
    margin: 1px;
    & when (@skin= "bootstrap") {
          border-radius: 0px 4px 4px 0px;          
        }
  }
  .e-ddl.e-input-group .e-ddl-icon.e-comboie.e-comboie8 {
	padding: 8px 7px 8px 7px;
    margin: 1px;
    & when (@skin= "bootstrap") {
          border-radius: 0px 4px 4px 0px;          
        }
  }
  .e-ddl.e-input-group .e-clear-icon.e-comboie {
	right: 30px;
	top:6px;
  }
  .e-control {
    font-family: @font-family;
    font-size: @font-size;
    font-weight: @content-font-weight;
  }

  .e-control,
  .e-control [class^='e-'],
  .e-control [class*=' e-'] {
    box-sizing: border-box;
  }

  .e-control .e-combobox.e-input.e-placeholder {
    color: #bbb;
    font-style: italic;
    position: absolute;
    top: 0;
    white-space: nowrap;
  }

  .e-disabled {
    background-image: none;
    cursor: default;
    filter: alpha(Opacity=35);
    opacity: .35;
  }

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

.clear-icon {
    content: '\e74e';
    font-family: 'ej-webfont';
  }

  .e-ddl.e-input-group {
    .e-clear-icon:before {
      .clear-icon;
    }
  }

  .e-ddl.e-input-group {
    display: table;
    margin-bottom: 0px;
  }

   input.e-combobox.e-input {
    border-width: 1px;
    font-weight: 400;
    height: auto;
    line-height: 1.4;
    margin: 0px;
    margin-bottom: 0px;
    outline: none;
    padding: 8px;
    width: 100%;
  }

   .e-combobox.e-input[disabled],
  .e-ddl.e-input-group.e-disabled,
  .e-ddl.e-input-group.e-disabled span,
  .e-ddl.e-input-group.e-disabled span button {
    cursor: not-allowed;
    filter: alpha(opacity=60);
    opacity: .6;
  }


   .e-combobox.e-input.e-rtl,
  .e-ddl.e-input-group.e-rtl  {
    direction: rtl;
  }

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

  .e-ddl.e-input-group,
  .e-ddl.e-input-group .e-input-group-btn,
  .e-ddl.e-input-group .e-input-group-icon {
    display: flex;
  }

  .e-ddl.e-input-group .e-input-group-btn button {
    align-items: center;
    display: flex;
    margin: 0px;
    outline: none;
    width: inherit;
  }

  .e-ddl.e-input-group .e-input-group-icon:first-child {
    border-left-width: 1px;
  }

   .e-input-group-btn button,
  .e-ddl.e-input-group .e-input-group-icon {
    white-space: nowrap;
  }

  .e-ddl.e-input-group.e-corner .e-combobox.e-input:first-child,
  .e-ddl.e-input-group.e-corner .e-input-group-btn:first-child button,
  .e-ddl.e-input-group.e-corner .e-input-group-icon:first-child {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
  }

  .e-ddl.e-input-group.e-corner .e-combobox.e-input:last-child,
  .e-ddl.e-input-group.e-corner .e-input-group-btn:last-child button,
  .e-ddl.e-input-group.e-corner .e-input-group-icon:last-child {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
  }

  .e-ddl.e-input-group.e-rtl .e-input-group-btn:first-child button,
  .e-ddl.e-input-group.e-rtl .e-input-group-icon:first-child {
    border-left-width: 0px;
    border-right-width: 1px;
  }

  .e-ddl.e-input-group.e-rtl .e-input-group-btn:last-child button {
    border-left-width: 1px;
    border-right-width: 0px;
  }

  .e-ddl.e-input-group.e-rtl .e-input-group-btn:not(:last-child) button,
  .e-ddl.e-input-group.e-rtl .e-input-group-icon:not(:last-child) {
    border-left-width: 1px;
  }

  .e-ddl.e-input-group.e-rtl .e-input-group-icon  + .e-combobox.e-input,
  .e-ddl.e-input-group.e-rtl .e-input-group-btn  + .e-combobox.e-input {
    border-right-width: 0px;
  }
  .e-ddl.e-input-group.e-corner.e-rtl .e-combobox.e-input:first-child,
  .e-ddl.e-input-group.e-corner.e-rtl .e-input-group-btn:first-child button,
  .e-ddl.e-input-group.e-corner.e-rtl .e-input-group-icon:first-child {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
  }

  .e-ddl.e-input-group.e-corner.e-rtl .e-combobox.e-input:last-child,
  .e-ddl.e-input-group.e-corner.e-rtl .e-input-group-btn:last-child button,
  .e-ddl.e-input-group.e-corner.e-rtl .e-input-group-icon:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 4px;
    border-top-right-radius: 0px;
  }

  .e-ddl.e-input-group.e-corner.e-rtl input.e-combobox.e-input:only-child {
    border-radius: 4px;
  }

  .e-ddl.e-input-group {
    position: relative;
    width: 100%;
  }

  .e-ddl.e-input-group .e-input-group-btn button:hover,
  .e-ddl.e-input-group .e-input-group-icon:hover,
  .e-ddl.e-input-group.e-rtl.e-corner .e-input-group-btn button:hover,
  .e-ddl.e-input-group.e-rtl.e-corner .e-input-group-icon:hover {
    border-radius: 0px;
  }

  .e-ddl.e-input-group .e-input-group-icon,
  .e-ddl.e-input-group .e-input-group-btn button {
    margin-bottom: 0px;
    margin-top: 0px;
  }


  .e-ddl.e-input-group {
    border-bottom: 0px;
    border-width: 1px;
  }

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

  .e-ddl.e-input-group .e-clear-icon {
    background: transparent;
    border: 0px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    outline: none;
    padding: 0px 8px 2px;
    text-align: center;
  }

  .e-ddl.e-input-group .e-clear-icon:before {
    font-size: 18px;
    padding: 0px;
    text-align: center;
    vertical-align: middle;
  }

   .e-combobox.e-input:not(:valid) ~ .e-clear-icon {
    display: none;
  }

  .e-ddl.e-input-group .e-clear-icon.e-clear-icon-hide {
    display: none;
  }

   .e-combobox.e-input:not(:valid),
   .e-combobox.e-input:valid,
  .e-ddl.e-input-group input:not(:valid),
  .e-ddl.e-input-group input:valid{
    box-shadow: none;
  }

  .e-ddl.e-input-group.e-disabled .e-input-group-btn button:hover,
  .e-ddl.e-input-group.e-disabled .e-input-group-icon:hover {
    background: transparent;
  }

  .e-control.e-ddl.e-popup {
    height: auto;
    position: absolute;
    width: auto;
    z-index: 1000;
    & when (@skin= "bootstrap") {
          border-radius: 4px;          
        }
  }

  .e-control.e-ddl.e-popup.e-popup-open {
    display: block;
  }

  .e-control.e-ddl.e-popup.e-popup-close {
    display: none;
  }

   .e-dropdownbase {
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
      & .e-list-parent {
        margin: 0;
        padding: 0;
      }

      & .e-list-item {
        cursor: default;
        overflow: hidden;
        position: relative;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        width: 100%;
      }

      & .e-list-item * {
        display: inline-block;
        vertical-align: middle;
      }

      & .e-fixed-head {
        position: fixed;
      }
  }

   .e-dropdownbase.e-content {
    overflow: auto;
    position: relative;
    & when (@skin= "bootstrap") {
          border-radius: 4px;          
        }
  }

   .e-dropdownbase.e-nodata {
    height: 48px;
    padding: 12px 16px;
  }

  .e-control:focus,
  .e-control *:focus {
    outline: none;
  }

   .e-combobox.e-input:focus {
    border-width: 1px;
    padding-bottom: 8px;
  }

  .e-ddl.e-input-group input.e-combobox.e-input,
  .e-ddl.e-input-group input.e-combobox.e-input:focus {
     & when (@skin= "material") {
    padding-left: 0px;
    }
    & when not (@skin= "material") {
        & when (@skin= "bootstrap") {
          border-radius: 4px;          
        }
    padding-left: 8px;
    }
  }

  .e-ddl.e-rtl.e-input-group input.e-combobox.e-input,
  .e-ddl.e-rtl.e-input-group input.e-combobox.e-input:focus {
     & when (@skin= "material") {
    padding-right: 0px;
    }
    & when not (@skin= "material") {
        & when (@skin= "bootstrap") {
          border-radius: 4px;          
        }
    padding-right: 8px;
    }
  }

  .e-ddl.e-input-group.e-input-focus {
    border-style: @border-type;
    & when (@skin= "material") {
    border-width: 0 0 1px 0;
    }
    & when not (@skin= "material") {
    border-width: 1px;
    }
  }

  .e-ddl.e-input-group.e-rtl .e-combobox.e-input:not(:first-child):focus {
    border-right-width: 1px;
  }

  .e-ddl.e-input-group.e-rtl.e-input-focus .e-combobox.e-input:not(:first-child):focus {
    border-right-width: 0px;
  }

  .e-ddl.e-input-group.e-input-focus.e-corner {
    border-radius: 4px;
  }

  .e-ddl.e-input-group.e-input-focus span:first-child.e-input-group-icon,
  .e-ddl.e-input-group.e-input-focus span:first-child button,
  .e-ddl.e-input-group.e-input-focus.e-rtl .e-combobox.e-input:last-child:focus,
  .e-ddl.e-input-group.e-input-focus span:first-child.e-input-group-icon,
  .e-ddl.e-input-group.e-input-focus span.e-input-group-icon:first-child button {
    border-color: transparent;
   }

   .e-ddl.e-input-group.e-input-focus .e-combobox.e-input:focus {
    border-bottom-color: transparent;
    border-top-color: transparent;
  }

  .e-bigger .e-input-group.e-ddl {
    & .e-combobox.e-input,
    .e-combobox.e-input:focus {
      padding: 7px 0 2px;
    }

    & .e-input-value,
    .e-input-value:focus {
      padding: 11px 0 2px;
    }
  }

  .e-ddl.e-input-group,
  .e-ddl.e-input-group.e-input-focus:focus {
    outline: none;
    & when (@skin= "bootstrap") {
          border-radius: 4px;          
        }
  }

  .e-ddl.e-input-group input.e-combobox.e-input {
    min-width: 0;
    width: 100%;
  }

  .e-ddl.e-input-group input.e-combobox.e-input,
  .e-ddl.e-input-group input.e-combobox.e-input:focus {
    border: 0px @border-type;
    border-width: 0px;
  }

  .e-ddl.e-input-group input.e-combobox.e-input {
    margin-bottom: 0px;
  }

  .e-ddl {
    input.e-combobox.e-input:focus,
    input.e-combobox.e-input {
      padding: 2px 0;
    }
  }

}

/*------------------------------------- End ComboBox-------------------------------------------*/