UNPKG

@progress/kendo-ui

Version:

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

1,855 lines 483 kB
/*! * Copyright 2018 Telerik EAD * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ .k-button[disabled], [disabled] .k-button { outline: none; cursor: default; opacity: 0.6; -webkit-filter: grayscale(0.1); filter: grayscale(0.1); pointer-events: none; box-shadow: none; } .k-block, .k-content, .k-editor, .k-flatcolorpicker, .k-notification, .k-panel, .k-scheduler-agendaview tr.k-state-hover .k-scheduler-datecolumn, .k-spreadsheet-filter-menu .k-spreadsheet-value-treeview-wrapper, .k-widget, .k-window { color: #656565; background-color: #fff; border-color: rgba(0, 0, 0, 0.08); } .k-menu-group, .k-menu.k-context-menu, .k-popup { color: #656565; background-color: #f9f9f9; border-color: rgba(0, 0, 0, 0.08); } .editorToolbarWindow.k-header.k-window-content, .k-block > .k-header, .k-calendar .k-calendar-view thead, .k-calendar .k-content thead, .k-calendar .k-header, .k-gantt-toolbar, .k-panel > .k-header, .k-scheduler-footer, .k-scheduler-toolbar, .k-spreadsheet-column-header, .k-spreadsheet-row-header, .k-spreadsheet-top-corner, .k-time-list-wrapper .k-title, .k-treemap .k-treemap-title { color: #656565; background-color: #f6f6f6; border-color: rgba(0, 0, 0, 0.08); } .k-calendar .k-nav-fast.k-state-hover, .k-calendar .k-nav-fast:hover, .k-calendar .k-nav-next.k-state-hover, .k-calendar .k-nav-next:hover, .k-calendar .k-nav-prev.k-state-hover, .k-calendar .k-nav-prev:hover { color: #656565; background-color: #ededed; border-color: rgba(0, 0, 0, 0.15); } .k-calendar .k-nav-fast:active, .k-calendar .k-nav-next:active, .k-calendar .k-nav-prev:active { color: #fff; background-color: #ff6358; border-color: rgba(0, 0, 0, 0.1); } .editorToolbarWindow.k-header.k-window-content a.k-tool, .k-button, .k-button-group.k-state-disabled .k-button:not(.k-state-active), .k-button-group .k-state-disabled:not(.k-state-active), .k-colorpicker .k-picker-wrap, .k-combobox .k-select, .k-ct-popup .k-editor-toolbar a.k-tool, .k-dateinput .k-select, .k-datepicker .k-select, .k-datetimepicker .k-select, .k-dropdown .k-dropdown-wrap, .k-dropdowntree .k-dropdown-wrap, .k-editor .k-editor-toolbar-wrap a.k-tool, .k-fieldselector .k-list li.k-item, .k-gantt-views li, .k-handle, .k-list-container .k-nodata .k-button, .k-map .k-navigator, .k-numerictextbox .k-select, .k-pivot-toolbar .k-button, .k-scheduler-footer li, .k-scheduler-navigation .k-nav-next, .k-scheduler-navigation .k-nav-prev, .k-scheduler-navigation .k-nav-today, .k-scheduler-views li, .k-spreadsheet-filter, .k-switch-handle, .k-timepicker .k-select, .k-toolbar .k-split-button .k-button { color: #656565; background-color: #f6f6f6; border-color: rgba(0, 0, 0, 0.08); background-image: linear-gradient(#f6f6f6, #f1f1f1); } .editorToolbarWindow.k-header.k-window-content a.k-tool.k-state-hover, .editorToolbarWindow.k-header.k-window-content a.k-tool:hover, .k-action-buttons .k-button.k-state-hover, .k-action-buttons .k-button:hover, .k-button.k-state-hover, .k-button:hover, .k-colorpicker .k-state-hover, .k-combobox .k-state-hover .k-select, .k-combobox > :hover .k-select, .k-ct-popup .k-editor-toolbar a.k-tool.k-state-hover, .k-ct-popup .k-editor-toolbar a.k-tool:hover, .k-dateinput .k-select:hover, .k-dateinput .k-select > .k-state-active, .k-dateinput .k-select > .k-state-selected, .k-dateinput .k-state-hover .k-select, .k-datepicker .k-state-hover .k-select, .k-datepicker:hover .k-select, .k-datetimepicker .k-state-hover .k-select, .k-datetimepicker:hover .k-select, .k-dropdown .k-dropdown-wrap.k-state-hover, .k-dropdown .k-dropdown-wrap:hover, .k-dropdowntree .k-dropdown-wrap.k-state-hover, .k-dropdowntree .k-dropdown-wrap:hover, .k-editor .k-editor-toolbar-wrap a.k-tool.k-state-hover, .k-editor .k-editor-toolbar-wrap a.k-tool:hover, .k-fieldselector .k-list li.k-item.k-state-hover, .k-fieldselector .k-list li.k-item:hover, .k-gantt-views li.k-state-hover, .k-handle:hover, .k-numerictextbox .k-select:hover, .k-numerictextbox .k-select > .k-state-active, .k-numerictextbox .k-select > .k-state-selected, .k-numerictextbox .k-state-hover .k-select, .k-pivot-toolbar .k-button.k-state-hover, .k-pivot-toolbar .k-button:hover, .k-scheduler-footer li.k-state-hover, .k-scheduler-navigation .k-nav-next.k-state-hover, .k-scheduler-navigation .k-nav-prev.k-state-hover, .k-scheduler-navigation .k-nav-today.k-state-hover, .k-scheduler-views li.k-state-hover, .k-spreadsheet-filter:hover, .k-switch-off:hover .k-switch-handle, .k-timepicker .k-state-hover .k-select, .k-timepicker:hover .k-select, .k-toolbar .k-split-button .k-button.k-state-hover, .k-toolbar .k-split-button .k-button:hover { color: #656565; background-color: #ededed; border-color: rgba(0, 0, 0, 0.15); background-image: linear-gradient(#ededed, #e8e8e8); } .editorToolbarWindow.k-header.k-window-content a.k-tool.k-state-active, .editorToolbarWindow.k-header.k-window-content a.k-tool:active, .k-action-buttons .k-button.k-state-active, .k-action-buttons .k-button:active, .k-button.k-state-active, .k-button:active, .k-colorpicker .k-state-active, .k-ct-popup .k-editor-toolbar a.k-tool.k-state-active, .k-ct-popup .k-editor-toolbar a.k-tool:active, .k-editor .k-editor-toolbar-wrap a.k-tool.k-state-active, .k-editor .k-editor-toolbar-wrap a.k-tool:active, .k-multiselect-wrap li.k-button.k-state-active, .k-multiselect-wrap li.k-button:active, .k-split-button.k-button-group .k-button.k-state-active, .k-split-button.k-button-group .k-button:active, .k-spreadsheet-filter.k-state-active, .k-toolbar .k-split-button .k-button.k-state-active, .k-toolbar .k-split-button .k-button:active { color: #656565; background-color: #f6f6f6; border-color: rgba(0, 0, 0, 0.08); background-image: none; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.06); } .k-button.k-primary, .k-slider .k-draghandle, .k-switch-on .k-switch-handle { color: #fff; background-color: #ff6358; border-color: #ff6358; background-image: linear-gradient(rgba(255, 138, 88, 0), rgba(255, 138, 88, 0.2)); } .k-action-buttons .k-primary.k-state-hvoer, .k-action-buttons .k-primary:hover, .k-button.k-primary.k-state-hover, .k-button.k-primary:hover, .k-slider .k-draghandle:hover, .k-switch-on:hover .k-switch-handle { color: #fff; background-color: #ff6b58; border-color: #ff6b58; background-image: linear-gradient(rgba(255, 146, 88, 0), rgba(255, 146, 88, 0.2)); } .k-action-buttons .k-primary.k-state-active, .k-action-buttons .k-primary:active, .k-button-group .k-button.k-state-active, .k-button-group .k-button.k-state-selected, .k-button-group .k-button:active, .k-button-group > input[type=checkbox]:checked + .k-button, .k-button-group > input[type=radio]:checked + .k-button, .k-button.k-primary.k-state-active, .k-button.k-primary.k-state-selected, .k-button.k-primary:active, .k-button.k-state-selected, .k-slider .k-draghandle.k-pressed, .k-slider .k-draghandle:active { color: #fff; background-color: #ff6358; border-color: #ff6358; background-image: linear-gradient(rgba(255, 138, 88, 0.2), rgba(255, 138, 88, 0)); } .k-editor-toolbar, .k-toolbar { color: #656565; background-color: #f6f6f6; border-color: rgba(0, 0, 0, 0.08); } .k-autocomplete, .k-combobox .k-dropdown-wrap, .k-dateinput .k-dateinput-wrap, .k-datepicker .k-picker-wrap, .k-datetimepicker .k-picker-wrap, .k-flatcolorpicker .k-color-value, .k-input.k-textbox, .k-multiselect-wrap, .k-numerictextbox .k-numeric-wrap, .k-textarea, .k-textbox, .k-timepicker .k-picker-wrap { color: #656565; background-color: #fff; border-color: rgba(0, 0, 0, 0.08); } .k-autocomplete.k-state-hover, .k-combobox .k-state-hover, .k-combobox > :hover, .k-dateinput .k-state-hover, .k-datepicker .k-state-hover, .k-datepicker:hover, .k-datetimepicker .k-state-hover, .k-datetimepicker:hover, .k-multiselect-wrap.k-state-hover, .k-multiselect-wrap:hover, .k-numerictextbox .k-state-hover, .k-timepicker .k-state-hover, .k-timepicker:hover { color: #656565; background-color: #fff; border-color: rgba(0, 0, 0, 0.15); } .k-autocomplete.k-state-active, .k-autocomplete.k-state-focused, .k-combobox .k-state-active, .k-combobox > .k-state-focused, .k-dateinput .k-state-focused, .k-datepicker .k-state-active, .k-datepicker .k-state-focused, .k-datetimepicker .k-state-active, .k-datetimepicker .k-state-focused, .k-dropdown .k-dropdown-wrap.k-state-focused, .k-dropdowntree .k-dropdown-wrap.k-state-focused, .k-numerictextbox .k-state-focused, .k-state-focused > .k-multiselect-wrap, .k-timepicker .k-state-active, .k-timepicker .k-state-focused { color: #656565; background-color: #fff; border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04); } .k-panelbar > .k-item.k-state-active > .k-link, .k-panelbar > .k-item.k-state-expanded > .k-link { color: #656565; background-color: #f6f6f6; border-color: #f6f6f6; } .k-calendar .k-state-hover .k-link, .k-panelbar .k-group > .k-item > .k-link.k-state-hover, .k-panelbar .k-group > .k-item > .k-link:hover, .k-panelbar > .k-item.k-state-active > .k-link.k-state-hover, .k-panelbar > .k-item.k-state-active > .k-link:hover, .k-panelbar > .k-item.k-state-expanded > .k-link.k-state-hover, .k-panelbar > .k-item.k-state-expanded > .k-link:hover, .k-scheduler-agendaview tr.k-state-hover, .k-treeview .k-in.k-state-hover { color: #656565; background-color: #ededed; border-color: #ededed; } .k-calendar .k-state-selected .k-link, .k-calendar .k-weekend.k-state-selected .k-link, .k-calendar:not(.k-calendar-infinite) .k-content .k-state-selected .k-link, .k-calendar:not(.k-calendar-infinite) .k-content .k-weekend .k-state-selected .k-link, .k-drag-clue, .k-event.k-state-selected, .k-panelbar .k-group > .k-item > .k-link.k-state-selected, .k-panelbar > .k-item > .k-link.k-state-selected:not(.k-state-active), .k-panelbar > .k-item > .k-link.k-state-selected:not(.k-state-expanded), .k-treeview .k-in.k-state-selected { color: #fff; background-color: #ff6358; border-color: #ff6358; } .k-list .k-item.k-state-focused, .k-list .k-item:focus { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.13); } .k-column-list-item:hover, .k-columnmenu-item:hover, .k-list-container .k-button.k-state-hover, .k-list-container .k-button:hover, .k-list-optionlabel:hover, .k-list .k-item.k-state-hover, .k-list .k-item:hover, .k-menu-group .k-item.k-state-hover, .k-menu-group .k-item:hover, .k-menu.k-context-menu .k-item.k-state-hover, .k-menu.k-context-menu .k-item:hover, .k-spreadsheet-filter-menu > .k-menu .k-item.k-state-hover, .k-spreadsheet-popup .k-button.k-state-hover, .k-spreadsheet-popup .k-button:hover { color: #656565; background-color: #ededed; } .k-list-container .k-button.k-state-active, .k-list-container .k-button:active, .k-list-optionlabel.k-state-selected, .k-list .k-item.k-state-selected, .k-menu-group .k-item.k-state-selected, .k-menu.k-context-menu .k-item.k-state-selected, .k-spreadsheet-popup .k-button.k-state-active, .k-spreadsheet-popup .k-button.k-state-selected, .k-spreadsheet-popup .k-button:active { color: #fff; background-color: #ff6358; } .k-widget { border-width: 1px; border-style: solid; box-sizing: border-box; outline: 0; font-size: 14px; line-height: 1.42857143; display: block; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } table.k-widget { display: table; } kendo-sortable { display: block; } .k-rtl { direction: rtl; } .k-link, .k-link:hover { color: inherit; text-decoration: none; } .k-content { outline: 0; } .k-centered { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .k-pdf-export-shadow { position: absolute; overflow: hidden; left: -15000px; width: 14400px; } .kendo-pdf-hide-pseudo-elements:after, .kendo-pdf-hide-pseudo-elements:before { display: none !important; } .k-state-selected { color: #fff; background-color: #ff6358; border-color: rgba(0, 0, 0, 0.1); } .k-state-disabled, .k-widget[disabled] { outline: none; cursor: default; opacity: 0.6; -webkit-filter: grayscale(0.1); filter: grayscale(0.1); pointer-events: none; box-shadow: none; } .k-state-disabled .k-button, .k-state-disabled .k-link, .k-widget[disabled] .k-button, .k-widget[disabled] .k-link { cursor: default; outline: 0; } .k-state-disabled .k-state-disabled, .k-state-disabled [disabled], .k-widget[disabled] .k-state-disabled, .k-widget[disabled] [disabled] { opacity: 1; -webkit-filter: grayscale(0); filter: grayscale(0); } .k-hr, .k-menu-group .k-item.k-separator, .k-menu-vertical .k-item.k-separator, .k-separator { margin: 1em auto; height: 0; border-width: 1px 0 0; border-style: solid; border-color: rgba(0, 0, 0, 0.08); display: block; } .k-columnset > .k-hr, .k-hbox > .k-hr, .k-menu-horizontal > .k-item.k-separator, .k-toolbar .k-separator { margin: 0; width: 0; height: auto; border-width: 0 0 0 1px; -ms-flex: 0 0 auto; flex: 0 0 auto; } .k-hr { padding: 0; float: none; clear: both; } .k-rowset > .k-hr, .k-vbox > .k-hr { margin: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .k-dirty { margin: 0; padding: 0; width: 0; height: 0; border-width: 3px; border-style: solid; border-color: #f31700 #f31700 transparent transparent; position: absolute; top: 0; right: 0; } .k-rtl .k-dirty, [dir=rtl] .k-dirty { border-color: transparent transparent #f31700 #f31700; right: auto; left: 0; } .k-display-inline { display: inline !important; } .k-display-block { display: block !important; } .k-display-inline-block { display: inline-block !important; } .k-display-flex { display: -ms-flexbox !important; display: flex !important; } .k-display-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } .k-display-table { display: table !important; } .k-display-inline-table { display: inline-table !important; } .k-display-none, .k-hidden { display: none !important; } .k-float-left { float: left !important; } .k-float-right { float: right !important; } .k-float-none { float: none !important; } .k-floatwrap:after, .k-grid-toolbar:after, .k-slider-items:after { content: ""; display: block; clear: both; } .k-flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .k-flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .k-flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .k-flex { -ms-flex: 1 1 0px; flex: 1 1 0; } .k-flex-auto { -ms-flex: 1 1 auto; flex: 1 1 auto; } .k-no-flex { -ms-flex: 0 0 0px; flex: 0 0 0; } .k-no-flex-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; } .k-flex-grow { -ms-flex-positive: 1; flex-grow: 1; } .k-no-flex-grow { -ms-flex-positive: 0; flex-grow: 0; } .k-flex-shrink { -ms-flex-negative: 1; flex-shrink: 1; } .k-no-flex-shrink { -ms-flex-negative: 0; flex-shrink: 0; } .k-align-items-start { -ms-flex-align: start; align-items: flex-start; } .k-align-items-end { -ms-flex-align: end; align-items: flex-end; } .k-align-items-center { -ms-flex-align: center; align-items: center; } .k-align-items-stretch { -ms-flex-align: stretch; align-items: stretch; } .k-align-items-baseline { -ms-flex-align: baseline; align-items: baseline; } .k-align-content-start { -ms-flex-line-pack: start; align-content: flex-start; } .k-align-content-end { -ms-flex-line-pack: end; align-content: flex-end; } .k-align-content-center { -ms-flex-line-pack: center; align-content: center; } .k-align-content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; } .k-align-content-baseline { -ms-flex-line-pack: baseline; align-content: baseline; } .k-align-self-start { -ms-flex-item-align: start; align-self: flex-start; } .k-align-self-end { -ms-flex-item-align: end; align-self: flex-end; } .k-align-self-center { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .k-align-self-stretch { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } .k-align-self-baseline { -ms-flex-item-align: baseline; align-self: baseline; } .k-justify-content-start { -ms-flex-pack: start; justify-content: flex-start; } .k-justify-content-end { -ms-flex-pack: end; justify-content: flex-end; } .k-justify-content-center { -ms-flex-pack: center; justify-content: center; } .k-justify-content-between { -ms-flex-pack: justify; justify-content: space-between; } .k-justify-content-around { -ms-flex-pack: distribute; justify-content: space-around; } .k-justify-content-evenly { -ms-flex-pack: space-evenly; justify-content: space-evenly; } .k-columnset, .k-hbox, .k-rowset, .k-vbox { display: -ms-flexbox; display: flex; } .k-ihbox, .k-ivbox { display: -ms-inline-flexbox; display: inline-flex; } .k-columnset, .k-hbox, .k-ihbox { -ms-flex-direction: row; flex-direction: row; } .k-ivbox, .k-rowset, .k-vbox { -ms-flex-direction: column; flex-direction: column; } .k-column { -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; } .k-reset { margin: 0; padding: 0; border-width: 0; outline: 0; font: inherit; text-decoration: none; list-style: none; } .k-text-nowrap { white-space: nowrap !important; } .k-text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-text-left { text-align: left !important; } .k-text-right { text-align: right !important; } .k-text-center { text-align: center !important; } .k-text-justify { text-align: justify !important; } .k-text-lowercase { text-transform: lowercase !important; } .k-text-uppercase { text-transform: uppercase !important; } .k-text-capitalize { text-transform: capitalize !important; } .k-font-weight-light { font-weight: 300 !important; } .k-font-weight-normal { font-weight: 400 !important; } .k-font-weight-bold { font-weight: 700 !important; } .k-flip-h { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .k-flip-v { -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1); } .k-flip-h.k-flip-v { -webkit-transform: scale(-1); -ms-transform: scale(-1); transform: scale(-1); } .k-rotate-45 { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .k-rotate-90 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .k-rotate-135 { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .k-rotate-180 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .k-rotate-225 { -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); } .k-rotate-270 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .k-rotate-315 { -webkit-transform: rotate(315deg); -ms-transform: rotate(315deg); transform: rotate(315deg); } .k-scale-0 { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .k-scale-1 { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .k-scale-2 { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } .k-translate-0 { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .k-translate-0-50 { -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } .k-translate-0-100 { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .k-translate-50-0 { -webkit-transform: translate(50%); -ms-transform: translate(50%); transform: translate(50%); } .k-translate-50-50 { -webkit-transform: translate(50%, 50%); -ms-transform: translate(50%, 50%); transform: translate(50%, 50%); } .k-translate-50-100 { -webkit-transform: translate(50%, 100%); -ms-transform: translate(50%, 100%); transform: translate(50%, 100%); } .k-translate-100-0 { -webkit-transform: translate(100%); -ms-transform: translate(100%); transform: translate(100%); } .k-translate-100-50 { -webkit-transform: translate(100%, 50%); -ms-transform: translate(100%, 50%); transform: translate(100%, 50%); } .k-translate-100-100 { -webkit-transform: translate(100%, 100%); -ms-transform: translate(100%, 100%); transform: translate(100%, 100%); } .k-animation-container { position: absolute; overflow: hidden; z-index: 100; } .k-animation-container-fixed { position: fixed; } .k-animation-container-relative { position: relative; display: inline-block; } .k-push-right-appear, .k-push-right-enter { -webkit-transform: translate(-100%); -ms-transform: translate(-100%); transform: translate(-100%); } .k-push-right-appear-active, .k-push-right-enter-active { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); 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; } .k-push-right-exit { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .k-push-right-exit-active { -webkit-transform: translate(100%); -ms-transform: translate(100%); transform: translate(100%); 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; } .k-push-left-appear, .k-push-left-enter { -webkit-transform: translate(100%); -ms-transform: translate(100%); transform: translate(100%); } .k-push-left-appear-active, .k-push-left-enter-active { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); 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; } .k-push-left-exit { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .k-push-left-exit-active { -webkit-transform: translate(-100%); -ms-transform: translate(-100%); transform: translate(-100%); 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; } .k-push-down-appear, .k-push-down-enter { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .k-push-down-appear-active, .k-push-down-enter-active { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); 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; } .k-push-down-exit { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .k-push-down-exit-active { 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; } .k-push-down-exit-active, .k-push-up-appear, .k-push-up-enter { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .k-push-up-appear-active, .k-push-up-enter-active { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); 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; } .k-push-up-exit { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .k-push-up-exit-active { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); 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; } .k-expand-vertical-appear, .k-expand-vertical-enter { -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .k-expand-vertical-appear-active, .k-expand-vertical-enter-active { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); 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; } .k-expand-vertical-exit { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .k-expand-vertical-exit-active { -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); 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; } .k-expand-horizontal-appear, .k-expand-horizontal-enter { -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } .k-expand-horizontal-appear-active, .k-expand-horizontal-enter-active { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); 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; } .k-expand-horizontal-exit { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .k-expand-horizontal-exit-active { -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); 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; } .k-fade-appear, .k-fade-enter { opacity: 0; } .k-fade-appear-active, .k-fade-enter-active { opacity: 1; transition: opacity 0.5s ease-in-out; } .k-fade-exit { opacity: 1; } .k-fade-exit-active { opacity: 0; transition: opacity 0.5s ease-in-out; } .k-fade-enter-active + .k-fade-enter-active, .k-fade-exit-active + .k-fade-exit-active { display: none; } .k-zoom-in-appear, .k-zoom-in-enter { opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .k-zoom-in-appear-active, .k-zoom-in-enter-active { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); transition: opacity 0.3s ease-in-out, -webkit-transform; transition: transform, opacity 0.3s ease-in-out; transition: transform, opacity 0.3s ease-in-out, -webkit-transform; } .k-zoom-in-exit { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .k-zoom-in-exit-active { transition: opacity 0.3s ease-in-out, -webkit-transform; transition: transform, opacity 0.3s ease-in-out; transition: transform, opacity 0.3s ease-in-out, -webkit-transform; } .k-zoom-in-exit-active, .k-zoom-out-appear, .k-zoom-out-enter { opacity: 0; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } .k-zoom-out-appear-active, .k-zoom-out-enter-active { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); transition: opacity 0.3s ease-in-out, -webkit-transform; transition: transform, opacity 0.3s ease-in-out; transition: transform, opacity 0.3s ease-in-out, -webkit-transform; } .k-zoom-out-exit { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .k-zoom-out-exit-active { opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); transition: opacity 0.3s ease-in-out, -webkit-transform; transition: transform, opacity 0.3s ease-in-out; transition: transform, opacity 0.3s ease-in-out, -webkit-transform; } .k-slide-in-appear { opacity: 0.1; -webkit-transform: translateY(-3em); -ms-transform: translateY(-3em); transform: translateY(-3em); } .k-slide-in-appear .k-centered { -webkit-transform: translate(-50%, -60%); -ms-transform: translate(-50%, -60%); transform: translate(-50%, -60%); } .k-slide-in-appear-active { opacity: 1; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); transition: opacity 0.3s cubic-bezier(0.2, 1, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.2, 0.6, 0.4, 1); transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.4, 1), opacity 0.3s cubic-bezier(0.2, 1, 0.2, 1); transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.4, 1), opacity 0.3s cubic-bezier(0.2, 1, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.2, 0.6, 0.4, 1); } .k-slide-in-appear-active .k-centered { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .k-slide-down-appear, .k-slide-down-enter { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .k-slide-down-appear-active, .k-slide-down-enter-active { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); 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; } .k-slide-down-exit { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .k-slide-down-exit-active { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); 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; } .k-slide-up-appear, .k-slide-up-enter { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .k-slide-up-appear-active, .k-slide-up-enter-active { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); 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; } .k-slide-up-exit { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .k-slide-up-exit-active { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); 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; } .k-slide-right-appear, .k-slide-right-enter { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .k-slide-right-appear-active, .k-slide-right-enter-active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); 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; } .k-slide-right-exit { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .k-slide-right-exit-active { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); 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; } .k-slide-left-appear, .k-slide-left-enter { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .k-slide-left-appear-active, .k-slide-left-enter-active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); 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; } .k-slide-left-exit { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .k-slide-left-exit-active { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); 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; } .k-reveal-vertical-appear, .k-reveal-vertical-enter { max-height: 0; } .k-reveal-vertical-appear-active, .k-reveal-vertical-enter-active, .k-reveal-vertical-exit-active { transition: max-height 0.3s ease-in-out; } .k-reveal-vertical-exit-active { max-height: 0 !important; } .k-reveal-horizontal-appear, .k-reveal-horizontal-enter { max-width: 0; } .k-reveal-horizontal-appear-active, .k-reveal-horizontal-enter-active, .k-reveal-horizontal-exit-active { transition: max-width 0.3s ease-in-out; } .k-reveal-horizontal-exit-active { max-width: 0 !important; } .k-arrow-e, .k-arrow-w { width: 0; height: 0; border: 5px solid transparent; position: absolute; top: -4px; } .k-arrow-e { border-left-color: currentColor; right: -6px; } .k-arrow-w { border-right-color: currentColor; left: -6px; } .k-drag-clue { padding: 2px 4px; border-width: 1px; border-style: solid; font-size: 12px; white-space: nowrap; overflow: hidden; cursor: default; } .k-drag-status { margin-right: 0.4ex; } .k-reorder-cue { position: absolute; } .k-reorder-cue:after, .k-reorder-cue:before { content: ""; width: 0; height: 0; border: 3px solid transparent; position: absolute; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .k-reorder-cue:before { border-bottom-width: 0; border-top-color: currentColor; top: -4px; } .k-reorder-cue:after { border-top-width: 0; border-bottom-color: currentColor; bottom: -4px; } .k-autocomplete, .k-combobox, .k-dateinput, .k-datepicker, .k-datetimepicker, .k-dropdown, .k-dropdowntree, .k-maskedtextbox, .k-multiselect, .k-numerictextbox, .k-timepicker { width: 12.4em; font-size: 14px; line-height: 1.42857143; text-align: left; white-space: nowrap; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; position: relative; } .k-autocomplete[dir=rtl], .k-combobox[dir=rtl], .k-dateinput[dir=rtl], .k-datepicker[dir=rtl], .k-datetimepicker[dir=rtl], .k-dropdown[dir=rtl], .k-dropdowntree[dir=rtl], .k-maskedtextbox[dir=rtl], .k-multiselect[dir=rtl], .k-numerictextbox[dir=rtl], .k-rtl .k-autocomplete, .k-rtl .k-combobox, .k-rtl .k-dateinput, .k-rtl .k-datepicker, .k-rtl .k-datetimepicker, .k-rtl .k-dropdown, .k-rtl .k-dropdowntree, .k-rtl .k-maskedtextbox, .k-rtl .k-multiselect, .k-rtl .k-numerictextbox, .k-rtl .k-timepicker, .k-timepicker[dir=rtl], [dir=rtl].k-dropdowntree { text-align: right; } .k-autocomplete[dir=rtl] .k-select, .k-combobox[dir=rtl] .k-select, .k-dateinput[dir=rtl] .k-select, .k-datepicker[dir=rtl] .k-select, .k-datetimepicker[dir=rtl] .k-select, .k-dropdown[dir=rtl] .k-select, .k-dropdowntree[dir=rtl] .k-select, .k-maskedtextbox[dir=rtl] .k-select, .k-multiselect[dir=rtl] .k-select, .k-numerictextbox[dir=rtl] .k-select, .k-rtl .k-autocomplete .k-select, .k-rtl .k-combobox .k-select, .k-rtl .k-dateinput .k-select, .k-rtl .k-datepicker .k-select, .k-rtl .k-datetimepicker .k-select, .k-rtl .k-dropdown .k-select, .k-rtl .k-dropdowntree .k-select, .k-rtl .k-maskedtextbox .k-select, .k-rtl .k-multiselect .k-select, .k-rtl .k-numerictextbox .k-select, .k-rtl .k-timepicker .k-select, .k-timepicker[dir=rtl] .k-select, [dir=rtl].k-dropdowntree .k-select { border-radius: 2px 0 0 2px; } .k-autocomplete[dir=rtl] .k-clear-value, .k-combobox[dir=rtl] .k-clear-value, .k-dateinput[dir=rtl] .k-clear-value, .k-datepicker[dir=rtl] .k-clear-value, .k-datetimepicker[dir=rtl] .k-clear-value, .k-dropdown[dir=rtl] .k-clear-value, .k-dropdowntree[dir=rtl] .k-clear-value, .k-maskedtextbox[dir=rtl] .k-clear-value, .k-multiselect[dir=rtl] .k-clear-value, .k-numerictextbox[dir=rtl] .k-clear-value, .k-rtl .k-autocomplete .k-clear-value, .k-rtl .k-combobox .k-clear-value, .k-rtl .k-dateinput .k-clear-value, .k-rtl .k-datepicker .k-clear-value, .k-rtl .k-datetimepicker .k-clear-value, .k-rtl .k-dropdown .k-clear-value, .k-rtl .k-dropdowntree .k-clear-value, .k-rtl .k-maskedtextbox .k-clear-value, .k-rtl .k-multiselect .k-clear-value, .k-rtl .k-numerictextbox .k-clear-value, .k-rtl .k-timepicker .k-clear-value, .k-timepicker[dir=rtl] .k-clear-value, [dir=rtl].k-dropdowntree .k-clear-value { left: 8px; right: auto; } .k-autocomplete ::-ms-clear, .k-combobox ::-ms-clear, .k-dateinput ::-ms-clear, .k-datepicker ::-ms-clear, .k-datetimepicker ::-ms-clear, .k-dropdown ::-ms-clear, .k-dropdowntree ::-ms-clear, .k-maskedtextbox ::-ms-clear, .k-multiselect ::-ms-clear, .k-numerictextbox ::-ms-clear, .k-timepicker ::-ms-clear { display: none; } .k-colorpicker, .k-combobox, .k-dateinput, .k-datepicker, .k-datetimepicker, .k-dropdown, .k-dropdowntree, .k-maskedtextbox, .k-multiselect, .k-numerictextbox, .k-timepicker { border-width: 0; background-color: transparent; } .k-nodata { min-height: 138px; width: 100%; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; text-transform: uppercase; font-weight: lighter; text-align: center; white-space: normal; } .k-nodata, .k-searchbar { display: -ms-flexbox; display: flex; } .k-searchbar { -ms-flex: 1; flex: 1; -ms-flex-direction: row; flex-direction: row; } .k-autocomplete, .k-dateinput-wrap, .k-dropdown-wrap, .k-multiselect-wrap, .k-numeric-wrap, .k-picker-wrap { border-radius: 2px; padding: 0; width: 100%; border-width: 1px; border-style: solid; box-sizing: border-box; position: relative; transition: all 0.1s ease; cursor: default; outline: 0; } .k-autocomplete .k-input, .k-dateinput-wrap .k-input, .k-dropdown-wrap .k-input, .k-multiselect-wrap .k-input, .k-numeric-wrap .k-input, .k-picker-wrap .k-input { padding: 4px 8px; height: calc(8px + 1.42857143em); box-sizing: border-box; border: 0; outline: 0; color: inherit; background: none; font: inherit; -ms-flex: 0 1 auto; flex: 0 1 auto; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; overflow: hidden; text-overflow: ellipsis; } .k-autocomplete { width: 12.4em; } .k-dateinput-wrap, .k-dropdown-wrap, .k-numeric-wrap, .k-picker-wrap { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .k-dateinput-wrap .k-input, .k-dropdown-wrap .k-input, .k-numeric-wrap .k-input, .k-picker-wrap .k-input { width: 100%; } .k-dateinput-wrap .k-select, .k-dropdown-wrap .k-select, .k-numeric-wrap .k-select, .k-picker-wrap .k-select { border-radius: 0 2px 2px 0; padding: 4px; border-width: 0; box-sizing: border-box; border-style: solid; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; -ms-flex: 0 0 auto; flex: 0 0 auto; text-align: center; cursor: pointer; } .k-autocomplete .k-clear-value, .k-autocomplete .k-i-loading, .k-dropdown-wrap .k-clear-value, .k-dropdown-wrap .k-i-loading, .k-multiselect-wrap .k-clear-value, .k-multiselect-wrap .k-i-loading { position: absolute; right: 8px; } .k-rtl .k-autocomplete .k-clear-value, .k-rtl .k-autocomplete .k-i-loading, .k-rtl .k-dropdown-wrap .k-clear-value, .k-rtl .k-dropdown-wrap .k-i-loading, .k-rtl .k-multiselect-wrap .k-clear-value, .k-rtl .k-multiselect-wrap .k-i-loading, [dir=rtl] .k-autocomplete .k-clear-value, [dir=rtl] .k-autocomplete .k-i-loading, [dir=rtl] .k-dropdown-wrap .k-clear-value, [dir=rtl] .k-dropdown-wrap .k-i-loading, [dir=rtl] .k-multiselect-wrap .k-clear-value, [dir=rtl] .k-multiselect-wrap .k-i-loading { right: auto; left: 8px; } .k-autocomplete .k-i-loading, .k-dropdown-wrap .k-i-loading, .k-multiselect-wrap .k-i-loading { margin-bottom: -0.5em; } .k-autocomplete .k-clear-value, .k-dropdown-wrap .k-clear-value, .k-multiselect-wrap .k-clear-value { height: 20px; line-height: 20px; outline: 0; opacity: 0.5; cursor: pointer; display: none; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; margin-bottom: -10px; } .k-autocomplete .k-clear-value:hover, .k-dropdown-wrap .k-clear-value:hover, .k-multiselect-wrap .k-clear-value:hover { opacity: 1; } .k-autocomplete.k-state-focused .k-clear-value, .k-autocomplete.k-state-hover .k-clear-value, .k-autocomplete:hover .k-clear-value, .k-dropdown-wrap.k-state-focused .k-clear-value, .k-dropdown-wrap.k-state-hover .k-clear-value, .k-dropdown-wrap:hover .k-clear-value, .k-multiselect-wrap.k-state-focused .k-clear-value, .k-multiselect-wrap.k-state-hover .k-clear-value, .k-multiselect-wrap:hover .k-clear-value, .k-state-focused > .k-multiselect-wrap .k-clear-value, .k-state-hover > .k-multiselect-wrap .k-clear-value { display: -ms-inline-flexbox; display: inline-flex; } .k-dropdown-wrap .k-clear-value { right: calc(8px + 1.42857143em); } .k-rtl .k-dropdown-wrap .k-clear-value, [dir=rtl] .k-dropdown-wrap .k-clear-value { right: auto; left: calc(8px + 1.42857143em); } .k-autocomplete .k-clear-value, .k-autocomplete .k-i-loading, .k-dropdown-wrap .k-clear-value, .k-dropdown-wrap .k-i-loading { bottom: 50%; } .k-multiselect-wrap .k-clear-value, .k-multiselect-wrap .k-i-loading { bottom: 14px; } .k-multiselect-wrap { padding-right: 24px; } .k-rtl .k-multiselect-wrap, [dir=rtl] .k-multiselect-wrap { padding-left: 24px; padding-right: 8px; } .k-autocomplete { padding-right: 24px; } .k-autocomplete[dir=rtl], .k-rtl .k-autocomplete { padding-left: 24px; padding-right: 0; } .k-dateinput .k-select, .k-numerictextbox .k-select { padding: 0; border-width: 0; width: calc(8px + 1.42857143em); display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: stretch; align-items: stretch; } .k-dateinput .k-link, .k-numerictextbox .k-link { -ms-flex: 1 1 0px; flex: 1 1 0; display: block; overflow: hidden; position: relative; } .k-dateinput .k-link .k-icon, .k-numerictextbox .k-link .k-icon { position: absolute; right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } .k-dateinput .k-link-increase .k-icon, .k-numerictextbox .k-link-increase .k-icon { bottom: -2px; } .k-dateinput .k-link-decrease .k-icon, .k-numerictextbox .k-link-decrease .k-icon { top: -2px; } .k-virtual-content { overflow-y: scroll; -webkit-overflow-scrolling: touch; position: relative; } .k-virtual-content > .k-virtual-list > .k-virtual-item { position: absolute; width: 100%; box-sizing: border-box; overflow: hidden; white-space: nowrap; } .k-textbox.k-space-left { padding-left: 1.9em; } .k-textbox.k-space-right { padding-right: 1.9em; } .k-textbox .k-icon { top: 50%; margin: -8px 0 0; position: absolute; } .k-space-left .k-icon { left: 3px; } .k-space-right .k-icon { right: 3px; } .k-widget.k-state-invalid.k-autocomplete, .k-widget.k-state-invalid.k-maskedtextbox > .k-textbox, .k-widget.k-state-invalid > .k-dateinput-wrap, .k-widget.k-state-invalid > .k-dropdown-wrap, .k-widget.k-state-invalid > .k-multiselect-wrap, .k-widget.k-state-invalid > .k-numeric-wrap, .k-widget.k-state-invalid > .k-picker-wrap, .ng-invalid.ng-dirty.k-autocomplete, .ng-invalid.ng-dirty.k-maskedtextbox > .k-textbox, .ng-invalid.ng-dirty > .k-dateinput-wrap, .ng-invalid.ng-dirty > .k-dropdown-wrap, .ng-invalid.ng-dirty > .k-multiselect-wrap, .ng-invalid.ng-dirty > .k-numeric-wrap, .ng-invalid.ng-dirty > .k-picker-wrap, .ng-invalid.ng-touched.k-autocomplete, .ng-invalid.ng-touched.k-maskedtextbox > .k-textbox, .ng-invalid.ng-touched > .k-dateinput-wrap, .ng-invalid.ng-touched > .k-dropdown-wrap, .ng-invalid.ng-touched > .k-multiselect-wrap, .ng-invalid.ng-touched > .k-numeric-wrap, .ng-invalid.ng-touched > .k-picker-wrap { color: #f31700; border-color: rgba(243, 23, 0, 0.5); } .k-widget.form-control { padding: 0; } .k-maskedtextbox.form-control .k-textbox, .k-textbox.form-control, .k-widget.form-control { width: 100%; } .k-autocomplete.form-control .k-input { box-sizing: border-box; } .input-group .k-dateinput-wrap, .input-group .k-dateinput-wrap .k-select, .input-group .k-dropdown-wrap, .input-group .k-dropdown-wrap .k-select, .input-group .k-maskedtextbox .k-textbox, .input-group .k-maskedtextbox .k-textbox .k-select, .input-group .k-multiselect-wrap, .input-group .k-multiselect-wrap .k-select, .input-group .k-numeric-wrap, .input-group .k-numeric-wrap .k-select, .input-group .k-picker-wrap, .input-group .k-picker-wrap .k-select { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group .k-maskedtextbox.form-control .k-textbox, .input-group .k-textbox.form-control, .input-group .k-widget.form-control { width: auto; } .input-group .k-widget.form-control:not(:first-child):not(:last-child) .k-dateinput-wrap, .input-group .k-widget.form-control:not(:first-child):not(:last-child) .k-dropdown-wrap, .input-group .k-widget.form-control:not(:first-child):not(:last-child) .k-multiselect-wrap, .input-group .k-widget.form-control:not(:first-child):not(:last-child) .k-numeric-wrap, .input-group .k-widget.form-control:not(:first-child):not(:last-child) .k-picker-wrap, .input-group .k-widget.form-control:not(:first-child):not(:last-child) > .k-textbox { border-radius: 0; } .input-group-prepend + .k-widget.form-control .k-dateinput-wrap, .input-group-prepend + .k-widget.form-control .k-dropdown-wrap, .input-group-prepend + .k-widget.form-control .k-multiselect-wrap, .input-group-prepend + .k-widget.form-control .k-numeric-wrap, .input-group-prepend + .k-widget.form-control .k-picker-wrap, .input-group-prepend + .k-widget.form-control > .k-textbox { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .k-widget.form-control .k-input { padding: 0.5rem 0.75rem; height: 2.25rem; } .k-widget.form-control-sm .k-input { padding: 0.25rem 0.5rem; height: 1.8125rem; } .k-widget.form-control-sm .k-dateinput-wrap .k-select, .k-widget.form-control-sm .k-dropdown-wrap .k-select, .k-widget.form-control-sm .k-picker-wrap .k-select { padding: 0.25rem; } .k-widget.form-control-sm .k-select { width: 1.8125rem; } .k-widget.form-control-lg .k-input { padding: 0.5rem 1rem; height: 2.875rem; } .k-widget.form-control-lg .k-dateinput-wrap .k-select, .k-widget.form-control-lg .k-dropdown-wrap .k-select, .k-widget.form-control-lg .k-picker-wrap .k-select { padding: 0.5rem; } .k-widget.form-control-lg .k-select { width: 2.875rem; } .k-maskedtextbox.form-control .k-textbox { height: calc(2.25rem + 2px); padding: 0.5rem 0.75rem; } .k-maskedtextbox.form-control-sm .k-textbox { height: calc(1.8125rem + 2px); padding: 0.25rem 0.5rem; line-height: 1.5; } .k-maskedtextbox.form-control-lg .k-textbox { height: calc(2.875rem + 2px); padding: 0.5rem 1rem; line-height: 1.5; } .k-textbox.form-control { height: calc(2.25rem + 2px); padding: 0.5rem 0.75rem; } .k-textbox.form-control-sm { height: calc(1.8125rem + 2px); padding: 0.25rem 0.5rem; line-height: 1.5; } .k-textbox.form-control-lg { height: calc(2.875rem + 2px); padding: 0.5rem 1rem; line-height: 1.5; } .k-dateinput.form-control-sm .k-link-increase > .k-icon, .k-numerictextbox.form-control-sm .k-link-increase > .k-icon { bottom: -2px; } .k-dateinput.form-control-sm .k-link-decrease > .k-icon, .k-numerictextbox.form-control-sm .k-link-decrease > .k-icon { top: -2px; } .k-dateinput.form-control-sm .k-link, .k-numerictextbox.form-control-sm .k-link { height: 0.90625rem; } .k-dateinput.form-control-lg .k-link, .k-numerictextbox.form-control-lg .k-link { height: 1.4375rem; } .k-dateinput.form-control .k-dateinput-wrap .k-select { padding-top: 0; padding-bottom: 0; } @font-face { font-family: WebComponentsIcons; font-style: normal; font-weight: 400; src: url(data:font/ttf;base64,AAEA