:root {
    --jqx-grid-row-height: 36px;
    --jqx-grid-column-height: 48px;
    --jqx-grid-show-column-lines: 1;
    --jqx-list-item-height: -1;
    --jqx-grid-filter-menu-items-height: 30px;
    --jqx-dropdown-animation: transform;
    --jqx-datetimeinput-dropdown-height: 280px;
    --jqx-datetimeinput-dropdown-width: 280px;
    --jqx-calendar-header-height: 40px;
    --jqx-calendar-title-height: 49px;
    --jqx-icon-calendar: '\e82d';
    /* Code of calendar icon */
    --jqx-icon-filter: '\f0b0';
    /* Code of filter icon */
    --jqx-icon-menu: '\f0c9';
    /* Code of menu icon */
    --jqx-icon-check: '\e908';
    /* Code of check icon */
    --jqx-icon-first-page: '\e900';
    /* Code of first page icon */
    --jqx-icon-arrow-down: '\e901';
    /* Code of down arrow icon */
    --jqx-icon-arrow-left: '\e902';
    /* Code of left arrow icon */
    --jqx-icon-arrow-right: '\e903';
    /* Code of right arrow icon */
    --jqx-icon-arrow-up: '\e904';
    /* Code of up arrow icon */
    --jqx-icon-arrow-down-filled: '\e812';
    /* Code of filled down arrow icon */
    --jqx-icon-arrow-left-filled: '\e816';
    /* Code of filled left arrow icon */
    --jqx-icon-arrow-right-filled: '\e81e';
    /* Code of filled right arrow icon */
    --jqx-icon-arrow-up-filled: '\e815';
    /* Code of filled up arrow icon */
    --jqx-icon-visibility: '\e90d';
    /* Code of visibility icon */
    --jqx-icon-visibility-off: '\e90e';
    /* Code of visibility off icon */
    --jqx-icon-last-page: '\e905';
    /* Code of last page icon */
    --jqx-icon-close: '\e816';
    /* Code of close icon */
    --jqx-icon-search: '\e82c';
    /* Code of search icon */
    --jqx-icon-clock: '\e838';
    --jqx-icon-down: '\e800';
    --jqx-icon-plus: '\e801';
    --jqx-icon-filter-alt: '\e802';
    --jqx-icon-up: '\e803';
    --jqx-icon-left: '\e804';
    --jqx-icon-right: '\e805';
    --jqx-icon-edit: '\e806';
    --jqx-icon-calendar-alt: '\e807';
    --jqx-icon-close-alt: '\e8bb';
    --jqx-icon-delete: '\e894';
    --jqx-icon-download: '\e896';
    --jqx-icon-check-alt: '\e8fb';
    --jqx-icon-check-small: '\f13e';
    --jqx-icon-info: '\e946';
    --jqx-icon-circle: '\ea3a';
    --jqx-icon-sort-menu-down: '\e9d0';
    --jqx-icon-sort-menu-up: '\e808';
    --jqx-icon-sort-up: '\ee68';
    --jqx-icon-sort-down: '\ee69';
    --jqx-icon-menu-alt: '\ef66';
    --jqx-icon-calendar-up: '\e83b';
    --jqx-icon-calendar-down: '\e83d';

    --jqx-border-radius: 4px;
    --jqx-font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --jqx-font-family-icon: "jqx-icons";
    --jqx-font-size: 14px;
    --jqx-action-button-size: 25px;
    --jqx-window-header-height: 48px;
    --jqx-window-header-background: #ffffff;
    --jqx-window-header-padding: 5px;
    --jqx-border-width: 1px;
    /* Theme border-width */
    --jqx-border-radius: 4px;
    /* Theme border-radius */
    --jqx-border-top-left-radius: var(--jqx-border-radius);
    /* Theme border-radius */
    --jqx-border-top-right-radius: var(--jqx-border-radius);
    /* Theme border-radius */
    --jqx-border-bottom-left-radius: var(--jqx-border-radius);
    /* Theme border-radius */
    --jqx-border-bottom-right-radius: var(--jqx-border-radius);
    /* Theme border-radius */
    /* WCAG 1.4.11 component boundary, was #E0E0E0 at 1.35:1 on white.
       As light as the criterion allows and no lighter: 3.05:1 on #fff. A boundary is meant
       to be seen, not to draw attention, so this sits just above the threshold rather than
       comfortably over it.
       Measured across sixteen control-bearing widgets, base draws 40 of its 44 boundaries
       on white and the other 4 on the #e8e8e8 tab header. One colour tuned for the tab
       header would make all 40 heavier than they need to be, so the header has its own. */
    --jqx-border: #949494;
    /* The same boundary where it sits on the tab header rather than on the page.
       3.05:1 on #e8e8e8, 3.74:1 on white. */
    --jqx-border-strong: #848484;
}

/*Rounded Corners*/
/*top-left rounded Corners*/
.jqx-rc-tl {
    border-top-left-radius: 3px;
}

.jqx-rc-tl-base {
    border-top-left-radius: 4px;
}

/*top-right rounded Corners*/
.jqx-rc-tr {
    border-top-right-radius: 3px;
}

.jqx-rc-tr-base {
    border-top-right-radius: 4px;
}

/*bottom-left rounded Corners*/
.jqx-rc-bl {
    border-bottom-left-radius: 3px;
}

.jqx-rc-bl-base {
    border-bottom-left-radius: 4px;
}

/*bottom-right rounded Corners*/
.jqx-rc-br {
    border-bottom-right-radius: 3px;
}

.jqx-rc-br-base {
    border-bottom-right-radius: 4px;
}

/*top rounded Corners*/
.jqx-rc-t {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.jqx-rc-t-base {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/*bottom rounded Corners*/
.jqx-rc-b {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.jqx-rc-b-base {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/*right rounded Corners*/
.jqx-rc-r {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.jqx-rc-r-base {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/*left rounded Corners*/
.jqx-rc-l {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.jqx-rc-l-base {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/*all rounded Corners*/
.jqx-rc-all {
    border-radius: 3px;
}

.jqx-rc-all-base {
    border-radius: 4px;
}

/*reset rounded corners*/
.jqx-rc-reset {
    border-radius: 0px !important;
}

/*Reset Style*/
.jqx-reset {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    outline: none;
    box-sizing: content-box;
}

.jqx-clear {
    align: left;
    valign: top;
    left: 0px;
    top: 0px;
    -webkit-appearance: none !important;
    /* not !important: a focusable element carrying this class (the grid) still shows the keyboard
       focus ring of :focus-visible */
    outline: none;
    padding: 0px;
    margin: 0px;
}

.jqx-popup {
    box-sizing: content-box;
}

.jqx-position-reset {
    position: static !important;
}

.jqx-border-reset {
    border: none !important;
}

.jqx-overflow-hidden {
    overflow: hidden !important;
}

.jqx-position-relative {
    position: relative !important;
}

.jqx-position-absolute {
    position: absolute !important;
}

.jqx-max-size {
    width: 100% !important;
    height: 100% !important;
}

.jqx-background-reset {
    background: transparent !important;
}

/*Disable browser selection*/
.jqx-disableselect {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.jqx-enableselect {
    -webkit-user-select: text;
    user-select: all;
}

.jqx-hideborder {
    border: none !important;
}

.jqx-hidescrollbars {
    overflow: hidden !important;
}

/*jqxButton, jqxToggleButton, jqxRepeatButton Style*/
.jqx-button {
    outline: none;
    border: 1px solid transparent;
    padding: 5px;
    text-align: center;
    vertical-align: central;
    margin: 0 0 0 0;
    cursor: default;
}

.jqx-button[aria-disabled="true"] {
    pointer-events: none;
}

button.jqx-button,
input[type=button].jqx-button,
input[type=submit].jqx-button {
    box-sizing: border-box !important;
}

.jqx-buttongroup {}

.jqx-group-button-normal {
    vertical-align: middle;
    text-align: center;
}

/*applied to the link button's anchor element.*/
.jqx-link {
    text-decoration: none;
    color: #111111;
}

/*shows elements.*/
.jqx-visible {
    display: block;
}

/*hides elements.*/
.jqx-hidden {
    display: none;
}

.jqx-widget,
.jqx-widget-content,
.jqx-widget-header,
.jqx-fill-state-normal {
    line-height: 1.231;
}

/*jqxGauge Style*/
/* --jqx-gauge-text is set on the gauge by jqxGauge when the theme is dark. */
.jqx-gauge-label,
.jqx-gauge-caption {
    fill: var(--jqx-gauge-text, #333333);
    color: var(--jqx-gauge-text, #333333);
    font-size: 11px;
    font-family: Verdana;
}

.jqx-knob {
    text-align: center;
}

/*jqxChart Style*/
/* --jqx-chart-text is set on the chart by jqxChart when the theme is dark. */
.jqx-knob-label,
.jqx-chart-axis-text,
.jqx-chart-label-text,
.jqx-chart-tooltip-text,
.jqx-chart-legend-text {
    fill: var(--jqx-chart-text, #333333);
    color: var(--jqx-chart-text, #333333);
    font-size: 11px;
    font-family: Verdana;
}

.jqx-chart-axis-description {
    fill: var(--jqx-chart-text, #555555);
    color: var(--jqx-chart-text, #555555);
    font-size: 11px;
    font-family: Verdana;
}

.jqx-chart-title-text {
    fill: var(--jqx-chart-text, #111111);
    color: var(--jqx-chart-text, #111111);
    font-size: 14px;
    font-weight: bold;
    font-family: Verdana;
}

.jqx-chart-title-description {
    fill: var(--jqx-chart-text, #111111);
    color: var(--jqx-chart-text, #111111);
    font-size: 12px;
    font-weight: normal;
    font-family: Verdana;
}

/*applied to the Grid's element.*/
.jqx-grid {
    overflow: hidden;
    border-style: solid;
    border-width: 1px;
}

.jqx-grid .jqx-adaptive-table {
    border-collapse: collapse;
    border: none;
    width: 100%;
}

.jqx-grid .jqx-adaptive-table td,
.jqx-grid .jqx-adaptive-table th {
    border-bottom: 1px solid #ddd;
    padding: 8px;
    overflow: auto;
}

.jqx-grid .jqx-adaptive-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.jqx-grid .jqx-adaptive-table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

.jqx-grid .jqx-adaptive-view a {
    padding: 10px;
    text-decoration: none;
    color: orangered;
}

/*applied to the Pager.*/
.jqx-grid-pager {
    border: none;
    border-top: 1px solid transparent;
}

/*applied to the Top Pager.*/
.jqx-grid-pager-top {
    border: none;
    border-bottom: 1px solid transparent;
}

.jqx-grid-pager-number {
    padding: 2px 5px;
    text-decoration: none;
    margin: 1px;
    border: 1px solid transparent;
    color: inherit !important;
    outline: none;
    font-weight: normal !important;
    line-height: 14px;
}

.jqx-grid-menu-item-touch {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/*applied to the Grid's bottom-right area between the horizontal and vertical scrollbars.*/
.jqx-grid-bottomright {}

/*applied to the Grid's header area.*/
.jqx-grid-header {
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    overflow: hidden;
    border-color: transparent;
    margin: 0px;
    padding: 0px;
}

/*applied to the columns.*/
.jqx-grid-column-header,
.jqx-grid-columngroup-header {
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: transparent;
    white-space: nowrap;
    border-style: solid;
    font-weight: normal;
    overflow: hidden;
    text-align: left;
    padding: 0px;
    margin: 0px;
}

.jqx-grid-column-header-rtl,
.jqx-grid-columngroup-header-rtl {
    border-width: 0px 0px 0px 1px;
}

.jqx-grid-columngroup-header {
    border-bottom-width: 1px;
    border-left-width: 1px;
}

/*applied to the column's button.*/
.jqx-grid-column-menubutton {
    border-style: solid;
    border-width: 0px 0px 0px 1px;
    border-color: transparent;
    background-image: url('images/icon-menu-small.png') !important;
    background-repeat: no-repeat;
    background-position: center !important;
    cursor: pointer;
}

.jqx-grid-column-menubutton-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 4.5h10M3 8h10M3 11.5h10' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.jqx-grid-column-menubutton-rtl {
    border-width: 0px 1px 0px 0px;
}

/*applied to the column's sort button when the sort order is ascending.*/
.jqx-grid-column-sortascbutton {
    border: none;
    background-image: url('images/sortascbutton.png');
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.jqx-grid-column-sortascbutton-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 13V4.5M5 8l3.5-3.5L12 8' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to the column's sort button when the sort order is descending.*/
.jqx-grid-column-sortdescbutton {
    border: none;
    background-image: url('images/sortdescbutton.png');
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.jqx-grid-column-sortdescbutton-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 4v8.5M5 9l3.5 3.5L12 9' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to the column's filter button.*/
.jqx-grid-column-filterbutton {
    border: none;
    background-image: url('images/filter.png');
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 1px;
}

.jqx-grid-column-filterbutton-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 4h10l-4 4.8V12l-2 1V8.8z' fill='none' stroke='%23444' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to the column's resize line.*/
.jqx-grid-column-resizeline {
    border-right: 1px dotted #555;
}

/*applied to the validation popup during cell editing.*/
.jqx-grid-validation {
    background: #df2227 !important;
    color: #fff !important;
    padding: 4px 8px;
}

.jqx-grid-validation-label {
    color: #fff !important;
    background: #df2227 !important;
    border: 1px solid #df2227 !important;
}

.jqx-grid-validation-arrow-up {
    background-image: url('images/red_arrow_up.png');
    background-repeat: no-repeat;
    background-position: center center;
}

.jqx-grid-validation-arrow-down {
    background-image: url('images/red_arrow_down.png');
    background-repeat: no-repeat;
    background-position: center center;
}

/*applied to the column's resize start line.*/
.jqx-grid-column-resizestartline {
    border-right: 1px solid #444;
}

/*applied to the sort ascending menu item in the Grid's Context Menu*/
.jqx-grid-sortasc-icon {
    background-image: url('images/icon-sort-asc.png');
    background-repeat: no-repeat;
    background-position: left center;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: -4px;
    margin-right: 4px;
}

.jqx-grid-sortasc-icon-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 12.5V3.5M2.5 6L5 3.5 7.5 6M9.5 5h4M9.5 8h3M9.5 11h2' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to the sort ascending menu item in the Grid's Context Menu*/
.jqx-grid-sortdesc-icon {
    background-image: url('images/icon-sort-desc.png');
    background-repeat: no-repeat;
    background-position: left center;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: -4px;
    margin-right: 4px;
}

.jqx-grid-sortdesc-icon-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.5v9M2.5 10L5 12.5 7.5 10M9.5 5h2M9.5 8h3M9.5 11h4' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to the grid menu's sort remove item/*/
.jqx-grid-sortremove-icon {
    background-image: url('images/icon-sort-remove.png');
    background-repeat: no-repeat;
    background-position: left center;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: -4px;
    margin-right: 4px;
}

.jqx-grid-sortremove-icon-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5h6M3 8h5M3 11h4M10.5 9l3.5 3.5M14 9l-3.5 3.5' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to the grouping column's drag and drop item when the drop operation is allowed.*/
.jqx-grid-drag-icon {
    background-image: url('images/drag.png');
    background-repeat: no-repeat;
    background-position: left center;
    width: 16px;
    height: 16px;
}

/*applied to the grouping column's drag and drop item when the drop operation is not allowed.*/
.jqx-grid-dragcancel-icon {
    background-image: url('images/dragcancel.png');
    background-repeat: no-repeat;
    background-position: left center;
    width: 16px;
    height: 16px;
}

/*applied to the 'group by' menu item.*/
.jqx-grid-groupby-icon {
    background-repeat: no-repeat;
    background-position: left center;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: -4px;
    margin-right: 4px;
}

/*applied to the column anchor tags.*/
.jqx-grid-column-header a:link,
.jqx-grid-column-header a:visited {
    display: block;
    margin: 4px;
    height: 18px;
    line-height: 18px !important;
    color: inherit;
    outline: 0 none;
    text-decoration: none;
    cursor: pointer;
}

.jqx-grid-toolbar a:link,
.jqx-grid-toolbar a:visited {
    margin: 4px;
    height: 18px;
    line-height: 18px !important;
    color: inherit;
    outline: 0 none;
    text-decoration: none;
    cursor: pointer;
}

/*applied to the groups header area.*/
.jqx-grid-groups-header,
.jqx-grid-toolbar,
.jqx-scheduler-toolbar {
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    padding: 0px;
    margin: 0px;
}

/*applied to a grouping row.*/
.jqx-grid-groups-row {
    font-weight: bold;
    white-space: nowrap;
    text-align: left;
    padding: 0px;
    top: 50%;
    margin-top: -8px;
}

/*applied to the row details.*/
.jqx-grid-groups-row-details {
    font-weight: normal;
}

/*applied to a grouping column.*/
.jqx-grid-group-column {
    border: 1px solid transparent;
    white-space: nowrap;
    border-style: solid;
    font-weight: normal;
    overflow: hidden;
    text-align: left;
    padding: 0px;
    margin: 0px;
}

/*applied to the lines between the group columns.*/
.jqx-grid-group-column-line {
    background: #aaa;
}

/*applied to the drop line indicators displayed in the grouping header.*/
.jqx-grid-group-drag-line {
    background: #80be09;
}

/*applied to the anchor tags inside a grouping column.*/
.jqx-grid-group-column a:link {
    display: block;
    margin: 4px;
    height: 18px;
    line-height: 18px !important;
    outline: 0 none;
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}

.jqx-grid-group-column a:visited {
    color: inherit;
    display: block;
    margin: 4px;
    height: 18px;
    line-height: 18px !important;
    outline: 0 none;
    text-decoration: none;
    cursor: pointer;
}

/*applied to a grid cell*/
.jqx-grid-cell {
    border-style: solid;
    border-width: 0px 1px 1px 0px;
    margin-right: 1px;
    margin-bottom: 1px;
    border-color: transparent;
    background: #fff;
    white-space: nowrap;
    font-weight: normal;
    font-size: inherit;
    overflow: hidden;
    position: absolute !important;
    height: 100%;
    outline: none;
}

.jqx-grid-cell-batch {
    background: #46CA78 !important;
    color: white !important;
}

.jqx-grid-cell-locked {
    color: #aaa !important;
}

.jqx-grid-cell-left-align {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 2px;
    text-align: left;
    margin-right: 2px;
    margin-left: 4px;
}

.jqx-grid-cell-middle-align {
    text-overflow: ellipsis;
    overflow: hidden;
    padding-bottom: 2px;
    text-align: center;
}

.jqx-grid-cell-right-align {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 2px;
    text-align: right;
    margin-right: 4px;
    margin-left: 2px;
}

/*applied to a grid cell that is part of a rows group.*/
.jqx-grid-group-cell {
    overflow: hidden;
    position: absolute !important;
    height: 100%;
    background: #fff;
}

/*applied to the grid cells in the sort column*/
.jqx-grid-cell-sort {
    background-color: #f0f0f0;
    background-color: color-mix(in srgb, currentColor 3%, var(--jqx-background, #fff));
}

.jqx-grid-cell-sort-base {
    background-color: #f0f0f0;
}

/*applied to the grid cells in the filter column*/
.jqx-grid-cell-filter {
    background-color: #e6e6e6;
    background-color: color-mix(in srgb, currentColor 3%, var(--jqx-background, #fff));
}

.jqx-grid-cell-filter-base {
    background-color: #e6e6e6;
}

.jqx-grid-cell-add-new-row {
    background: #fdfcf3 !important;
    color: #000 !important;
}

/*applied to the grid cells area.*/
.jqx-grid-content {
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    border-color: transparent;
    white-space: nowrap;
    overflow: hidden;
}

/*applied to a grid cell that is part of a rows group.*/
.jqx-grid-group-cell,
.jqx-grid-empty-cell {
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    white-space: nowrap;
    font-weight: normal;
}

.jqx-widget .jqx-grid-cleared-cell,
.jqx-grid-cleared-cell {
    border: transparent !important;
}

.jqx-grid-cell-wrap {
    white-space: normal !important;
}

.jqx-tree-grid-indent {
    width: 18px;
    display: inline-block;
    height: 8px;
    overflow: hidden;
    vertical-align: top;
}

.jqx-tree-grid-title {
    text-decoration: none;
    vertical-align: bottom;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jqx-tree-grid-collapse-button,
.jqx-tree-grid-expand-button {
    display: inline-block;
    margin-top: 0px;
    margin-right: 0px;
    position: relative;
    width: 18px;
    height: 18px;
    vertical-align: top;
}

.jqx-tree-grid-checkbox {
    float: none !important;
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-right: 6px !important;
    margin-left: 2px !important;
}

.jqx-tree-grid-icon {
    float: none !important;
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

.jqx-tree-grid-icon-rtl {
    margin-right: 0px;
    margin-left: 4px;
}

.jqx-tree-grid-icon-size {
    width: 14px;
    height: 14px;
    line-height: 16px;
}

.jqx-tree-grid-checkbox-tick {
    width: 100%;
    height: 100%;
}

.jqx-tree-grid-expand-button {
    height: 18px;
    width: 18px;
    vertical-align: top;
}

/*applied to a cell in jqxDataTable*/
.jqx-cell {
    min-height: 23px;
    padding: 6px 4px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
    border-top-width: 0px;
    border-left-width: 0px;
    box-sizing: border-box;
    white-space: normal;
    line-height: 1.231;
}

.jqx-grid-cell-nowrap {
    white-space: nowrap;
}

.jqx-cell-editor {
    padding-left: 4px !important;
    padding-right: 3px !important;
}

.jqx-left-align {
    text-align: left;
}

.jqx-center-align {
    text-align: center;
}

.jqx-right-align {
    text-align: right;
}

.jqx-top-align {
    vertical-align: top;
}

.jqx-bottom-align {
    vertical-align: bottom;
}

.jqx-grid-table .jqx-grid-cell {
    position: static !important;
}

/*applied to the Grid's Table element.*/
.jqx-grid-table {
    font-size: 13px;
    table-layout: fixed;
    margin: 0px;
    padding: 0px;
    border-collapse: separate;
    border-spacing: 0px;
    -webkit-overflow-scrolling: touch;
    outline: none;
    empty-cells: show;
    border-right: 1px solid #aaa;
    line-height: 1.231;
    width: auto;
    border: none;
}

.jqx-grid-table-rtl {
    border-left-width: 1px;
    border-right-width: 0px;
}

.jqx-details table {
    border-collapse: collapse;
    table-layout: fixed;
    border-spacing: 0px;
}

/*applied to a grid cell that is part of a details row and grouping is enabled.*/
.jqx-grid-group-details-cell {}

/*applied to a grid cell that is part of a details row.*/
.jqx-grid-details-cell {
    border-width: 0px 1px 0px 0px;
}

/*applied to a grid cell. Represents the alternating cell background.*/
.jqx-grid-cell-alt {
    background: #f9f9f9;
}

/*applied to a sorted and alternating grid cell*/
.jqx-grid-cell-sort-alt {
    background-color: #e5e5e5;
    background-color: color-mix(in srgb, currentColor 5%, var(--jqx-background, #fff));
}

.jqx-grid-cell-sort-alt-base {
    background-color: #e5e5e5;
}

/*applied to a sorted and alternating grid cell*/
.jqx-grid-cell-filter-alt {
    background-color: #f0f0f0;
    background-color: color-mix(in srgb, currentColor 5%, var(--jqx-background, #fff));
}

.jqx-grid-cell-filter-alt-base {
    background-color: #f0f0f0;
}

/*applied to a pinned grid cell.*/
.jqx-grid-cell-pinned {
    background-color: #e5e5e5;
    background-color: color-mix(in srgb, currentColor 5%, var(--jqx-background, #fff));
}

.jqx-grid-cell-pinned-base {
    background-color: #e5e5e5;
}

/*applied to a pinned grid cell. Represents the alternating cell background.*/
.jqx-grid-cell-pinned-alt {
    background-color: #e5e5e5;
    background-color: color-mix(in srgb, currentColor 6%, var(--jqx-background, #fff));
}

.jqx-grid-cell-pinned-alt-base {
    background-color: #e5e5e5;
}

/*applied to a selected grid cell.*/
.jqx-grid-cell-selected {
    border-left: 0px solid transparent;
}

.jqx-grid-cell-selected.jqx-grid-cell-edit {
    border-color: #DDDDDD !important;
    background-color: #fff !important;
    color: #333 !important;
}

.jqx-fill-state-focus.jqx-grid-cell-edit,
.jqx-grid-cell-edit .jqx-fill-state-focus,
.jqx-grid-cell-edit.jqx-fill-state-focus .jqx-action-button,
.jqx-grid-cell-edit .jqx-numberinput-focus,
.jqx-grid-cell-edit .jqx-combobox-content-focus {
    border-color: #DDDDDD !important;
}

.jqx-cell-rtl {
    border-left-width: 1px;
    border-right-width: 0px;
}

.jqx-grid-cell-rtl {
    border-width: 0px 0px 1px 1px;
}

.jqx-grid-table .jqx-grid-cell {
    border-width: 0px 0px 1px 1px;
}

.jqx-grid-table-one-cell {
    border: none;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #aaa;
}

.jqx-grid-table .jqx-grid-cell:first-child {
    border-left-width: 0px;
}

/*applied to the selection area.*/
.jqx-grid-selectionarea {
    border: 1px solid transparent;
    opacity: 0.5;
}

/*applied to a hovered grid cell.*/
.jqx-grid-cell-hover {
    border-color: transparent;
}

/*applied to a grid cell when the grid is empty.*/
.jqx-grid-empty-cell {
    overflow: visible;
    border-bottom: none;
}

/*applied to the Grid when its loading the data.*/
.jqx-grid-load {
    padding-right: 0px;
    background-image: url(./images/loader.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    z-index: 9999;
    display: block;
}

/*applied to a group's collapse button.*/
.jqx-grid-group-collapse {
    padding-right: 0px;
    background-image: url(./images/icon-right.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
}

.jqx-grid-group-collapse-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-grid-group-collapse-rtl {
    padding-right: 0px;
    background-image: url(./images/icon-left.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
}

.jqx-grid-group-collapse-rtl-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to a group's expand button.*/
.jqx-grid-group-expand,
.jqx-grid-group-expand-rtl {
    padding-right: 0px;
    background-image: url(./images/icon-down.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
}

.jqx-grid-group-expand-base, .jqx-grid-group-expand-rtl-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 7l3.5 3.5L12 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* jqxGrid: the modern look (2026), the default in every theme. Row heights, options and
   class names are unchanged; the scheduler, which shares some grid classes, is left out. */

/* The lines between columns recede: drawn from the text colour at 5%, they come out much fainter
   than the row lines in light and dark themes alike (the rows lead, as in modern grids). showcolumnlines: false still removes them (the grid
   sets the colour transparent inline), and browsers without color-mix keep the theme's line.
   The highcontrast theme keeps its full-strength lines. */
.jqx-grid:not(.jqx-scheduler):not(.jqx-grid-highcontrast) .jqx-grid-cell {
    border-right-color: color-mix(in srgb, currentColor 5%, transparent);
}

.jqx-grid:not(.jqx-scheduler):not(.jqx-grid-highcontrast) .jqx-grid-cell-rtl,
.jqx-grid:not(.jqx-scheduler):not(.jqx-grid-highcontrast) .jqx-grid-table .jqx-grid-cell {
    border-left-color: color-mix(in srgb, currentColor 5%, transparent);
}

/* Room round the text: 8px either side of a cell's value and of a column's title, so the two line
   up (it was 2-4px, the text against the lines). Column widths are unchanged. Digits are tabular,
   so the figures of a right-aligned column line up. */
.jqx-grid:not(.jqx-scheduler) :is(.jqx-grid-cell-left-align, .jqx-grid-cell-right-align),
.jqx-grid:not(.jqx-scheduler) :is(.jqx-header-ellipsis-left-csp, .jqx-header-ellipsis-right-csp) {
    margin-left: 8px;
    margin-right: 8px;
}

.jqx-grid:not(.jqx-scheduler) .jqx-header-link-left-csp {
    margin-left: 8px;
}

.jqx-grid:not(.jqx-scheduler) .jqx-header-link-right-csp {
    margin-right: 8px;
}

/* jqxDataTable and jqxTreeGrid: their titles and the text of their cells the same 8px from the lines */
.jqx-grid.jqx-datatable:not(.jqx-scheduler) .jqx-csp-column-header-content {
    margin-left: 8px;
    margin-right: 8px;
}

.jqx-grid.jqx-datatable:not(.jqx-scheduler) .jqx-grid-cell {
    padding-left: 8px;
    padding-right: 8px;
}

.jqx-grid:not(.jqx-scheduler) .jqx-grid-cell {
    font-variant-numeric: tabular-nums;
}

/* Column titles in semibold; fluent and tailwind already set their own size and weight. */
.jqx-grid:not(.jqx-scheduler) .jqx-grid-column-header,
.jqx-grid:not(.jqx-scheduler) .jqx-grid-columngroup-header {
    font-weight: 600;
}

/* A menu button shown all the time (autoshowcolumnsmenubutton: false): the title ends before it
   (the widths allow for the title's 8px margins). */
.jqx-grid-column-header[menu]>div>div:not(.iconscontainer) {
    width: calc(100% - 40px);
}

.jqx-grid-column-header[menu][sort]>div>div:not(.iconscontainer),
.jqx-grid-column-header[menu][filter]>div>div:not(.iconscontainer) {
    width: calc(100% - 60px);
}

.jqx-grid-column-header[menu][filter][sort]>div>div:not(.iconscontainer) {
    width: calc(100% - 80px);
}

.jqx-grid-column-header[menu][sort][sort-index]>div>div:not(.iconscontainer) {
    width: calc(100% - 85px);
}

.jqx-grid-column-header[menu][filter][sort][sort-index]>div>div:not(.iconscontainer) {
    width: calc(100% - 105px);
}

/* The cells of the filter row and the status bar sit on the bar's own background, not as
   grey blocks. */
.jqx-grid:not(.jqx-scheduler) .jqx-grid-cell-filter-row,
.jqx-grid:not(.jqx-scheduler) .jqx-grid-statusbar .jqx-grid-cell {
    background-color: transparent !important;
}

.jqx-grid:not(.jqx-scheduler) .jqx-grid-statusbar .jqx-grid-cell {
    border-right-color: transparent;
    border-bottom-color: transparent;
}

/* Aggregates: "Sum: 630  Avg: $7.29" on one line, the names quieter than the values; in a
   narrow column they wrap to a second line, which the status bar's height still holds. */
.jqx-grid-aggregates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    column-gap: 12px;
    height: 100%;
    padding: 0 4px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}

.jqx-right-align>.jqx-grid-aggregates {
    justify-content: flex-end;
}

.jqx-center-align>.jqx-grid-aggregates {
    justify-content: center;
}

.jqx-grid-aggregate {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jqx-grid-aggregate-name {
    opacity: 0.7;
    margin-right: 4px;
}

.jqx-grid-aggregate-value {
    font-weight: 600;
}

/* Selection in the design-system themes: a tint of the accent with the row's own text, instead
   of a solid accent bar. A selected row is marked with an accent edge on its first cell, and a
   single selected cell with an accent outline, so the selection never depends on the tint alone
   (WCAG 1.4.11). Hover over a selected row deepens the tint. */
.jqx-grid:not(.jqx-scheduler) .jqx-grid-cell:is(.jqx-grid-cell-selected-fluent, .jqx-grid-cell-selected-fluent-dark,
    .jqx-grid-cell-selected-tailwind,
    .jqx-grid-cell-selected-tailwind-blue, .jqx-grid-cell-selected-tailwind-dark, .jqx-grid-cell-selected-tailwind-blue-dark, .jqx-grid-cell-selected-light,
    .jqx-grid-cell-selected-dark) {
    background: linear-gradient(rgba(var(--jqx-primary-rgb), 0.14), rgba(var(--jqx-primary-rgb), 0.14)), var(--jqx-background) !important;
    color: var(--jqx-background-color) !important;
    border-bottom-color: rgba(var(--jqx-primary-rgb), 0.35) !important;
    border-right-color: color-mix(in srgb, currentColor 9%, transparent) !important;
    /* jqxDataTable and jqxTreeGrid draw the lines between columns on the left of each cell */
    border-left-color: color-mix(in srgb, currentColor 9%, transparent) !important;
}

.jqx-grid:not(.jqx-scheduler) .jqx-grid-cell:is(.jqx-grid-cell-selected-fluent, .jqx-grid-cell-selected-fluent-dark,
    .jqx-grid-cell-selected-tailwind,
    .jqx-grid-cell-selected-tailwind-blue, .jqx-grid-cell-selected-tailwind-dark, .jqx-grid-cell-selected-tailwind-blue-dark, .jqx-grid-cell-selected-light,
    .jqx-grid-cell-selected-dark):is(.jqx-grid-cell-hover, .jqx-fill-state-hover) {
    background: linear-gradient(rgba(var(--jqx-primary-rgb), 0.2), rgba(var(--jqx-primary-rgb), 0.2)), var(--jqx-background) !important;
}

.jqx-grid:not(.jqx-scheduler):not(.jqx-grid-cellselectionmode) .jqx-grid-cell.jqx-grid-cell-selected:first-child:has(+ .jqx-grid-cell-selected) {
    box-shadow: inset 3px 0 0 var(--jqx-primary);
}

.jqx-grid:not(.jqx-scheduler):not(.jqx-grid-cellselectionmode) .jqx-grid-cell-rtl.jqx-grid-cell-selected:first-child:has(+ .jqx-grid-cell-selected) {
    box-shadow: inset -3px 0 0 var(--jqx-primary);
}

.jqx-grid:not(.jqx-scheduler):not(.jqx-grid-cellselectionmode) .jqx-grid-cell.jqx-grid-cell-selected:not(.jqx-grid-cell-selected + .jqx-grid-cell-selected):not(:has(+ .jqx-grid-cell-selected)) {
    box-shadow: inset 0 0 0 2px var(--jqx-primary);
}

/* Cell selection (the grid's cell modes, host class jqx-grid-cellselectionmode): one outline in the
   accent round each selected range, of any shape. The grid marks the sides of a selected cell that
   border an unselected one (jqx-grid-selection-edge-*): an inset shadow sized by its variable. On the
   right and bottom it is 1px plus the cell's own border in the accent (a 2px line inside a separate
   border read as double); on the top and left 2px, of which the neighbour's border, in the accent,
   covers the first. A run of cells down a column was a stack of boxes, cells side by side had no outline. */
.jqx-grid.jqx-grid-cellselectionmode:not(.jqx-scheduler) .jqx-grid-cell.jqx-grid-cell-selected:is(.jqx-grid-cell-selected-base, .jqx-grid-cell-selected-light, .jqx-grid-cell-selected-dark, .jqx-grid-cell-selected-fluent, .jqx-grid-cell-selected-fluent-dark, .jqx-grid-cell-selected-tailwind, .jqx-grid-cell-selected-tailwind-blue, .jqx-grid-cell-selected-tailwind-dark, .jqx-grid-cell-selected-tailwind-blue-dark, .jqx-grid-cell-selected-material, .jqx-grid-cell-selected-material-dark, .jqx-grid-cell-selected-material-purple, .jqx-grid-cell-selected-material-purple-dark, .jqx-grid-cell-selected-material-green, .jqx-grid-cell-selected-material-green-dark) {
    --jqx-selection-edge-top: 0px;
    --jqx-selection-edge-right: 0px;
    --jqx-selection-edge-bottom: 0px;
    --jqx-selection-edge-left: 0px;
    box-shadow:
        inset 0 var(--jqx-selection-edge-top) 0 var(--jqx-primary, #005c99),
        inset calc(-1 * var(--jqx-selection-edge-right)) 0 0 var(--jqx-primary, #005c99),
        inset 0 calc(-1 * var(--jqx-selection-edge-bottom)) 0 var(--jqx-primary, #005c99),
        inset var(--jqx-selection-edge-left) 0 0 var(--jqx-primary, #005c99);
}

.jqx-grid.jqx-grid-cellselectionmode:not(.jqx-scheduler) .jqx-grid-cell.jqx-grid-cell-selected:is(.jqx-grid-cell-selected-base, .jqx-grid-cell-selected-light, .jqx-grid-cell-selected-dark, .jqx-grid-cell-selected-fluent, .jqx-grid-cell-selected-fluent-dark, .jqx-grid-cell-selected-tailwind, .jqx-grid-cell-selected-tailwind-blue, .jqx-grid-cell-selected-tailwind-dark, .jqx-grid-cell-selected-tailwind-blue-dark, .jqx-grid-cell-selected-material, .jqx-grid-cell-selected-material-dark, .jqx-grid-cell-selected-material-purple, .jqx-grid-cell-selected-material-purple-dark, .jqx-grid-cell-selected-material-green, .jqx-grid-cell-selected-material-green-dark).jqx-grid-selection-edge-top {
    --jqx-selection-edge-top: 2px;
}

.jqx-grid.jqx-grid-cellselectionmode:not(.jqx-scheduler) .jqx-grid-cell.jqx-grid-cell-selected:is(.jqx-grid-cell-selected-base, .jqx-grid-cell-selected-light, .jqx-grid-cell-selected-dark, .jqx-grid-cell-selected-fluent, .jqx-grid-cell-selected-fluent-dark, .jqx-grid-cell-selected-tailwind, .jqx-grid-cell-selected-tailwind-blue, .jqx-grid-cell-selected-tailwind-dark, .jqx-grid-cell-selected-tailwind-blue-dark, .jqx-grid-cell-selected-material, .jqx-grid-cell-selected-material-dark, .jqx-grid-cell-selected-material-purple, .jqx-grid-cell-selected-material-purple-dark, .jqx-grid-cell-selected-material-green, .jqx-grid-cell-selected-material-green-dark).jqx-grid-selection-edge-right {
    /* the cell's own right border is part of the line: accent, with 1px more inside it (a 2px
       line inside a separate 1px border read as a double edge) */
    --jqx-selection-edge-right: 1px;
    border-right-color: var(--jqx-primary, #005c99) !important;
}

.jqx-grid.jqx-grid-cellselectionmode:not(.jqx-scheduler) .jqx-grid-cell.jqx-grid-cell-selected:is(.jqx-grid-cell-selected-base, .jqx-grid-cell-selected-light, .jqx-grid-cell-selected-dark, .jqx-grid-cell-selected-fluent, .jqx-grid-cell-selected-fluent-dark, .jqx-grid-cell-selected-tailwind, .jqx-grid-cell-selected-tailwind-blue, .jqx-grid-cell-selected-tailwind-dark, .jqx-grid-cell-selected-tailwind-blue-dark, .jqx-grid-cell-selected-material, .jqx-grid-cell-selected-material-dark, .jqx-grid-cell-selected-material-purple, .jqx-grid-cell-selected-material-purple-dark, .jqx-grid-cell-selected-material-green, .jqx-grid-cell-selected-material-green-dark).jqx-grid-selection-edge-bottom {
    --jqx-selection-edge-bottom: 1px;
    border-bottom-color: var(--jqx-primary, #005c99) !important;
}

.jqx-grid.jqx-grid-cellselectionmode:not(.jqx-scheduler) .jqx-grid-cell.jqx-grid-cell-selected:is(.jqx-grid-cell-selected-base, .jqx-grid-cell-selected-light, .jqx-grid-cell-selected-dark, .jqx-grid-cell-selected-fluent, .jqx-grid-cell-selected-fluent-dark, .jqx-grid-cell-selected-tailwind, .jqx-grid-cell-selected-tailwind-blue, .jqx-grid-cell-selected-tailwind-dark, .jqx-grid-cell-selected-tailwind-blue-dark, .jqx-grid-cell-selected-material, .jqx-grid-cell-selected-material-dark, .jqx-grid-cell-selected-material-purple, .jqx-grid-cell-selected-material-purple-dark, .jqx-grid-cell-selected-material-green, .jqx-grid-cell-selected-material-green-dark).jqx-grid-selection-edge-left {
    --jqx-selection-edge-left: 2px;
}

/* the cells above a range and before it paint their bottom and right borders over its first pixel
   row and column: those borders are the line's outer pixel there */
.jqx-grid.jqx-grid-cellselectionmode:not(.jqx-scheduler) .jqx-grid-cell:is(.jqx-grid-cell-base, .jqx-grid-cell-light, .jqx-grid-cell-dark, .jqx-grid-cell-fluent, .jqx-grid-cell-fluent-dark, .jqx-grid-cell-tailwind, .jqx-grid-cell-tailwind-blue, .jqx-grid-cell-tailwind-dark, .jqx-grid-cell-tailwind-blue-dark, .jqx-grid-cell-material, .jqx-grid-cell-material-dark, .jqx-grid-cell-material-purple, .jqx-grid-cell-material-purple-dark, .jqx-grid-cell-material-green, .jqx-grid-cell-material-green-dark).jqx-grid-selection-edge-above {
    border-bottom-color: var(--jqx-primary, #005c99) !important;
}

.jqx-grid.jqx-grid-cellselectionmode:not(.jqx-scheduler) .jqx-grid-cell:is(.jqx-grid-cell-base, .jqx-grid-cell-light, .jqx-grid-cell-dark, .jqx-grid-cell-fluent, .jqx-grid-cell-fluent-dark, .jqx-grid-cell-tailwind, .jqx-grid-cell-tailwind-blue, .jqx-grid-cell-tailwind-dark, .jqx-grid-cell-tailwind-blue-dark, .jqx-grid-cell-material, .jqx-grid-cell-material-dark, .jqx-grid-cell-material-purple, .jqx-grid-cell-material-purple-dark, .jqx-grid-cell-material-green, .jqx-grid-cell-material-green-dark).jqx-grid-selection-edge-before {
    border-right-color: var(--jqx-primary, #005c99) !important;
}

/* Check boxes in a selected row keep their normal look (the themes whiten them for a solid bar). */
.jqx-grid:not(.jqx-scheduler) :is(.jqx-grid-cell-selected-fluent, .jqx-grid-cell-selected-fluent-dark,
    .jqx-grid-cell-selected-tailwind,
    .jqx-grid-cell-selected-tailwind-blue, .jqx-grid-cell-selected-tailwind-dark, .jqx-grid-cell-selected-tailwind-blue-dark, .jqx-grid-cell-selected-light,
    .jqx-grid-cell-selected-dark) .jqx-checkbox-default {
    border-color: var(--jqx-border) !important;
}

/* jqxDataTable and jqxTreeGrid share the grid's modern look above (they carry .jqx-grid). Their
   group rows are a quiet band with a semibold title instead of a grey block. */
.jqx-grid:not(.jqx-scheduler) tr[data-role="row-group"] > td {
    background-color: color-mix(in srgb, currentColor 4%, var(--jqx-background, #fff)) !important;
    font-weight: 600;
}

/* jqxPivotGrid: the modern look (2026), the default in every theme. Cell sizes are unchanged.
   The widget sits on its content colour (no grey area below the rows), the lines between data
   cells recede, column titles and totals are semibold, and expand/collapse are chevrons in the
   text colour (the boxed plus/minus rasters needed a filter in every dark theme). */
.jqx-pivotgrid .jqx-pivotgrid-content-wrapper.jqx-grid-cell-normal.jqx-widget-content,
.jqx-pivotgrid .jqx-pivotgrid-content-wrapper.jqx-grid-cell-selected.jqx-widget-content {
    border-color: #e6e6e6;
    border-color: color-mix(in srgb, currentColor 10%, var(--jqx-background, #fff));
}

.jqx-pivotgrid-base .jqx-pivotgrid-content-wrapper-base.jqx-grid-cell-normal-base.jqx-widget-content-base, .jqx-pivotgrid-base .jqx-pivotgrid-content-wrapper-base.jqx-grid-cell-selected-base.jqx-widget-content-base {
    border-color: #e6e6e6;
}

.jqx-pivotgrid .jqx-pivotgrid-column-item,
.jqx-pivotgrid .jqx-pivotgrid-total {
    font-weight: 600;
}

.jqx-pivotgrid .jqx-pivotgrid-content-wrapper.jqx-grid-cell-normal.jqx-pivotgrid-total {
    background-color: color-mix(in srgb, currentColor 3%, var(--jqx-background, #fff));
}

.jqx-pivotgrid .jqx-pivotgrid-expand-button,
.jqx-pivotgrid .jqx-pivotgrid-collapse-button {
    background: currentColor !important;
    filter: none !important;
    opacity: 0.75;
    /* centred on the item's text (the inline top: 3px set the raster a few pixels low) */
    top: -2px !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.jqx-pivotgrid .jqx-pivotgrid-collapse-button {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-pivotgrid-content-wrapper.jqx-fill-state-pressed .jqx-pivotgrid-expand-button,
.jqx-pivotgrid-content-wrapper.jqx-fill-state-pressed .jqx-pivotgrid-collapse-button {
    opacity: 1;
}

/* The settings and menu buttons of the pivot grid and the pivot designer: a crisp menu glyph in
   the text colour instead of the raster each theme swapped or filtered. */
.jqx-pivotgrid .jqx-pivotgrid-settings-icon,
.jqx-pivotgrid .jqx-pivotgrid-menu-button {
    background: currentColor !important;
    filter: none !important;
    opacity: 0.7;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 4.5h10M3 8h10M3 11.5h10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 4.5h10M3 8h10M3 11.5h10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

/* A selected data cell in the design-system themes: the accent tint with an accent outline, as
   in jqxGrid (the cell used to take the hover colour, the same as a pointer passing over it). */
.jqx-pivotgrid .jqx-pivotgrid-content-wrapper:is(.jqx-grid-cell-selected-fluent, .jqx-grid-cell-selected-fluent-dark,
    .jqx-grid-cell-selected-tailwind,
    .jqx-grid-cell-selected-tailwind-blue, .jqx-grid-cell-selected-tailwind-dark, .jqx-grid-cell-selected-tailwind-blue-dark, .jqx-grid-cell-selected-light,
    .jqx-grid-cell-selected-dark, [class*="jqx-grid-cell-selected-material"]) {
    background: linear-gradient(rgba(var(--jqx-primary-rgb), 0.14), rgba(var(--jqx-primary-rgb), 0.14)), var(--jqx-background) !important;
    color: var(--jqx-background-color) !important;
    box-shadow: inset 0 0 0 2px var(--jqx-primary);
}

/* The base theme's modern look (2026), for widgets without a theme. jqxcore gives their elements
   <class>-base classes beside <class> (as a theme gives <class>-<theme>), and the look is written
   on those: each changed rule of jqx.base.css is followed by its -base version (e.g. .jqx-widget,
   then .jqx-widget-base with the system font), so the classic themes that build on this file keep
   every default they had. Here: a system font, light headers, almost white buttons, the accent
   #005c99 for selection and focus, 4px corners, SVG icons. jqx-fill-state-pressed is a selection
   in most widgets (an accent tint with an accent border); where it means something else, the
   rules below say what. */

/* an expanded expander or navigation bar header is a header, not a selection */
.jqx-expander-header-base.jqx-fill-state-pressed-base {
    background: #f5f5f5;
    border-color: #c5c5c5;
}

/* progress and range: the accent itself, light enough for the black value text (5.6:1) and 3:1
   against the empty track */
.jqx-progressbar-value-base.jqx-fill-state-pressed-base,
.jqx-slider-rangebar-base.jqx-fill-state-pressed-base {
    background: #4f8fbf;
    border-color: #4f8fbf;
}

.jqx-slider-tick-base.jqx-fill-state-pressed-base {
    background: #8a8a8a;
    border-color: #8a8a8a;
}

/* the selected tab: the page's own white with an accent edge, joined to its content */
.jqx-tabs-title-base.jqx-fill-state-pressed-base {
    background: #fff;
    /* 3.4:1 on the #f5f5f5 header strip, 3.7:1 on white (WCAG 1.4.11) */
    border-color: #858585;
}

.jqx-tabs-title-selected-top-base.jqx-fill-state-pressed-base {
    box-shadow: inset 0 2px 0 #005c99;
}

.jqx-tabs-title-selected-bottom-base.jqx-fill-state-pressed-base {
    box-shadow: inset 0 -2px 0 #005c99;
}

/* grid, data table and tree grid lines: light dividers instead of #aaa */
.jqx-grid-base .jqx-grid-cell-base,
.jqx-grid-base .jqx-grid-group-cell-base {
    border-color: #dedede;
}

.jqx-grid-base .jqx-grid-column-header-base {
    border-color: #cfcfcf;
}

/* jqxCalendar, jqxEditor, jqxWindow and the inputs: the modern look (2026), in the base theme and
   the design-system themes (light, dark, fluent, tailwind, material and their variants). The
   classic themes keep theirs. Sizes are unchanged. */

/* jqxEditor: one surface - the toolbar on the page colour above a divider, the text area without
   a second frame inside the first */
.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark) {
    background: var(--jqx-background, #fff);
}

.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark) .jqx-editor-toolbar-container {
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark) .jqx-editor-content {
    border-color: transparent;
}

/* jqxWindow in the base theme: rounded and lifted off the page */
.jqx-window-base {
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.jqx-window-header-base {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.jqx-window-content-base {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* text inputs in the base theme: the text clear of the border (border-box, so the size stays) */
input.jqx-input-widget-base {
    padding-left: 8px;
    padding-right: 8px;
}

/* the masked input's field is as wide as its host (content-box), so the text moves, not the box */
.jqx-maskedinput-base > .jqx-input-content-base {
    text-indent: 7px;
}

/* jqxSwitchButton: a pill with a round thumb, the accent when on - as light, fluent and tailwind
   draw it - instead of an uppercase bold box, in the base, dark and material themes. The off
   thumb is mixed from the text colour: 4.4:1 on white, 6:1 on the dark themes' surface. */
.jqx-switchbutton:is(.jqx-switchbutton-base, .jqx-switchbutton-dark, .jqx-switchbutton-material, .jqx-switchbutton-material-dark, .jqx-switchbutton-material-purple, .jqx-switchbutton-material-purple-dark, .jqx-switchbutton-material-green, .jqx-switchbutton-material-green-dark) {
    border-color: var(--jqx-border, #949494);
    border-radius: 15px;
}

.jqx-switchbutton:is(.jqx-switchbutton-base, .jqx-switchbutton-dark, .jqx-switchbutton-material, .jqx-switchbutton-material-dark, .jqx-switchbutton-material-purple, .jqx-switchbutton-material-purple-dark, .jqx-switchbutton-material-green, .jqx-switchbutton-material-green-dark) .jqx-switchbutton-label {
    font-size: inherit;
    font-family: inherit;
    text-align: center;
    text-transform: none;
    font-weight: normal;
    background: transparent;
}

.jqx-switchbutton:is(.jqx-switchbutton-base, .jqx-switchbutton-dark, .jqx-switchbutton-material, .jqx-switchbutton-material-dark, .jqx-switchbutton-material-purple, .jqx-switchbutton-material-purple-dark, .jqx-switchbutton-material-green, .jqx-switchbutton-material-green-dark) .jqx-switchbutton-thumb {
    border-radius: 50%;
    transform: scale(0.7);
    background: color-mix(in srgb, currentColor 60%, var(--jqx-background, #fff));
    border-color: transparent;
}

.jqx-switchbutton:is(.jqx-switchbutton-base, .jqx-switchbutton-dark, .jqx-switchbutton-material, .jqx-switchbutton-material-dark, .jqx-switchbutton-material-purple, .jqx-switchbutton-material-purple-dark, .jqx-switchbutton-material-green, .jqx-switchbutton-material-green-dark).jqx-switchbutton-on {
    background: var(--jqx-primary, #005c99);
    border-color: var(--jqx-primary, #005c99);
    color: var(--jqx-primary-color, #fff);
}

.jqx-switchbutton:is(.jqx-switchbutton-base, .jqx-switchbutton-dark, .jqx-switchbutton-material, .jqx-switchbutton-material-dark, .jqx-switchbutton-material-purple, .jqx-switchbutton-material-purple-dark, .jqx-switchbutton-material-green, .jqx-switchbutton-material-green-dark).jqx-switchbutton-on .jqx-switchbutton-label {
    color: var(--jqx-primary-color, #fff);
}

.jqx-switchbutton:is(.jqx-switchbutton-base, .jqx-switchbutton-dark, .jqx-switchbutton-material, .jqx-switchbutton-material-dark, .jqx-switchbutton-material-purple, .jqx-switchbutton-material-purple-dark, .jqx-switchbutton-material-green, .jqx-switchbutton-material-green-dark).jqx-switchbutton-on .jqx-switchbutton-thumb {
    background: var(--jqx-primary-color, #fff);
}

/* The base theme's radio button: a plain ring (the control border, 3:1) with an accent dot,
   instead of the raster ring and black dot. */
.jqx-radiobutton-default.jqx-radiobutton-default-base {
    background: #fff;
    border-color: var(--jqx-border, #949494);
}

.jqx-radiobutton-check-checked.jqx-radiobutton-check-checked-base {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Ccircle cx='6.5' cy='6.5' r='3.5' fill='%23005c99'/%3E%3C/svg%3E") center no-repeat;
}

/* The base theme's scroll bars: a rounded mid-grey thumb on a light track, without a frame; the
   thumb is 3.2:1 against the track. */
.jqx-scrollbar-state-normal.jqx-scrollbar-state-normal-base {
    background: #f5f5f5;
}

.jqx-scrollbar-thumb-state-normal.jqx-scrollbar-thumb-state-normal-base,
.jqx-scrollbar-thumb-state-normal-horizontal.jqx-scrollbar-thumb-state-normal-horizontal-base {
    background: #8a8a8a;
    border-color: #8a8a8a;
    border-radius: 8px;
}

.jqx-scrollbar-thumb-state-hover.jqx-scrollbar-thumb-state-hover-base,
.jqx-scrollbar-thumb-state-hover-horizontal.jqx-scrollbar-thumb-state-hover-horizontal-base {
    background: #6e6e6e;
    border-color: #6e6e6e;
}

.jqx-scrollbar-thumb-state-pressed.jqx-scrollbar-thumb-state-pressed-base,
.jqx-scrollbar-thumb-state-pressed-horizontal.jqx-scrollbar-thumb-state-pressed-horizontal-base {
    background: #575757;
    border-color: #575757;
}

/* jqxKanban: the modern look (2026), in the base theme and the design-system themes; the classic
   themes keep theirs. Columns are soft lanes with a gap between them (their side borders,
   transparent - the column widths and the board's size stay as they were), headers are titles on
   the lane, cards are rounded and lifted, without the rule above the tags, tags are pills and
   avatars round. The scope is in :where(), so each rule weighs two classes: enough to beat a
   theme's colours, while a card template's own CSS (the colour bar as a header strip, paddings,
   margins) still restyles what it restyles, as it did before. */
:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-column.jqx-widget-content {
    border-color: transparent;
    border-width: 0 4px;
    background: color-mix(in srgb, currentColor 4%, var(--jqx-background, #fff));
    background-clip: padding-box;
    border-radius: 10px;
}

:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-column .jqx-kanban-column-header,
:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-column .jqx-kanban-column-header-collapsed,
:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-column .jqx-kanban-column-container {
    background: transparent;
    border-color: transparent;
}

:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-column-header .jqx-kanban-column-header-title {
    font-weight: 600;
}

:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-column-header .jqx-kanban-column-header-status {
    opacity: 0.7;
}

:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-item.jqx-rc-all {
    background-color: var(--jqx-background, #fff);
    border-color: color-mix(in srgb, currentColor 10%, transparent);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* on the dark themes a card is lifted by being lighter than its lane */
:where(.jqx-kanban:is(.jqx-kanban-dark, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material-dark, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green-dark)) .jqx-kanban-item.jqx-rc-all {
    background-color: color-mix(in srgb, currentColor 9%, var(--jqx-background, #252526));
}

:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-item.jqx-rc-all:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* one class: the rounded card clips its colour bar, and a template can still say otherwise */
:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-item {
    overflow: hidden;
}

:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-item .jqx-kanban-item-footer {
    border-top-color: transparent;
}

:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-item-keyword.jqx-fill-state-normal {
    border-color: transparent;
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-radius: 999px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 20px;
}

:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-item .jqx-kanban-item-avatar,
:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-item .jqx-kanban-item-avatar-image {
    border-radius: 50%;
}

:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-column .jqx-kanban-item-placeholder {
    border: 2px dashed color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 8px;
}

/* jqxEditor: the modern toolbar (2026), in the base theme and the design-system themes; the classic
   themes keep theirs. A flat toolbar on the editor's own surface: no boxed groups (a thin divider
   between them), borderless buttons and drop-downs with a soft hover, the active formatting in an
   accent tint, and line icons in the text colour (masks, so they follow every light and dark theme
   without a sprite of their own). The scope is in :where(), so app CSS still restyles what it
   restyles. */
:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar.jqx-widget-header {
    background: transparent;
    padding: 2px 4px 6px;
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-group.jqx-fill-state-normal {
    background: transparent;
    border-color: transparent;
    border-right: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 0;
    padding-right: 6px;
    margin-right: 6px;
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-group.jqx-fill-state-normal:last-child {
    border-right-color: transparent;
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-button.jqx-button.jqx-fill-state-normal,
:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-item.jqx-widget.jqx-fill-state-normal {
    background: transparent;
    border-color: transparent;
    border-radius: 6px;
    box-shadow: none;
}

/* the same geometry in every state, so the toolbar never moves while a tool is pressed, active
   or open (the state classes replace jqx-fill-state-normal) */
:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-group .jqx-editor-toolbar-button.jqx-button {
    margin-right: 1px;
    border-radius: 6px;
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-group .jqx-editor-toolbar-item.jqx-widget {
    border-radius: 6px;
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-button.jqx-button.jqx-fill-state-hover,
:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-item.jqx-widget.jqx-fill-state-hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: transparent;
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-button.jqx-button.jqx-widget:hover,
:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-item.jqx-widget.jqx-widget:hover {
    /* a theme's own :hover border (fluent) stays off the flat buttons */
    border-color: transparent;
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-button.jqx-button.jqx-widget.jqx-fill-state-pressed,
:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-item.jqx-widget.jqx-fill-state-pressed {
    background: rgba(var(--jqx-primary-rgb, 0, 92, 153), 0.16);
    border-color: transparent;
    /* the themes force the on-accent colour on toggled tools (white), which the tint does not carry */
    color: inherit !important;
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon {
    background: currentColor !important;
    opacity: 0.8;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-fill-state-hover .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon,
:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-fill-state-pressed .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon {
    opacity: 1;
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-bold {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h7a4 4 0 0 1 0 8H6zM6 12h8a4 4 0 0 1 0 8H6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h7a4 4 0 0 1 0 8H6zM6 12h8a4 4 0 0 1 0 8H6z'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-italic {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 4h-9M14 20H5M15 4 9 20'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 4h-9M14 20H5M15 4 9 20'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-underline {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v6a6 6 0 0 0 12 0V4M4 20h16'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v6a6 6 0 0 0 12 0V4M4 20h16'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-fontname {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V4h16v3M9 20h6M12 4v16'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V4h16v3M9 20h6M12 4v16'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-fontsize {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5h10v2M8 5v14M6 19h4M14 12V11h7v1M17.5 11v8M16 19h3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5h10v2M8 5v14M6 19h4M14 12V11h7v1M17.5 11v8M16 19h3'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-createlink {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-insertorderedlist {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6h11M10 12h11M10 18h11M4 6h1v4M4 10h2M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6h11M10 12h11M10 18h11M4 6h1v4M4 10h2M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-insertunorderedlist {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-outdent {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8l-4 4 4 4M21 6H11M21 12H11M21 18H11'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8l-4 4 4 4M21 6H11M21 12H11M21 18H11'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-indent {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l4 4-4 4M21 6H11M21 12H11M21 18H11'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l4 4-4 4M21 6H11M21 12H11M21 18H11'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-insertimage {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='M21 15l-3.09-3.09a2 2 0 0 0-2.82 0L6 21'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='M21 15l-3.09-3.09a2 2 0 0 0-2.82 0L6 21'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-justifyleft {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 6H3M15 12H3M17 18H3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 6H3M15 12H3M17 18H3'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-justifycenter {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 6H3M17 12H7M19 18H5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 6H3M17 12H7M19 18H5'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-justifyright {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 6H3M21 12H9M21 18H7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 6H3M21 12H9M21 18H7'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-removeformat {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V4h16v3M5 20h6M13 4 8 20M15 15l5 5M20 15l-5 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V4h16v3M5 20h6M13 4 8 20M15 15l5 5M20 15l-5 5'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-viewsource {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18l6-6-6-6M8 6l-6 6 6 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18l6-6-6-6M8 6l-6 6 6 6'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-forecolor {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20 12 4l7 16M8 14h8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20 12 4l7 16M8 14h8'/%3E%3C/svg%3E");
}

:where(.jqx-editor:is(.jqx-editor-base, .jqx-editor-light, .jqx-editor-dark, .jqx-editor-fluent, .jqx-editor-fluent-dark, .jqx-editor-tailwind, .jqx-editor-tailwind-blue, .jqx-editor-tailwind-dark, .jqx-editor-tailwind-blue-dark, .jqx-editor-material, .jqx-editor-material-dark, .jqx-editor-material-purple, .jqx-editor-material-purple-dark, .jqx-editor-material-green, .jqx-editor-material-green-dark)) .jqx-editor-toolbar-icon.jqx-editor-toolbar-icon-backcolor {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l-6 6v3h9l3-3M22 12l-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l-6 6v3h9l3-3M22 12l-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4'/%3E%3C/svg%3E");
}

/* jqxKanban: a resource without an image shows the initials of its name, on a colour taken from
   the name (white text, 4.5:1 or more on each), in every theme. */
.jqx-kanban-item .jqx-kanban-item-avatar:has(> .jqx-kanban-item-avatar-initials) {
    background: transparent;
}

.jqx-kanban-item-avatar-initials {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0;
    vertical-align: top;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

.jqx-kanban-item-avatar-initials-c0 {
    background: #1565c0;
}

.jqx-kanban-item-avatar-initials-c1 {
    background: #2e7d32;
}

.jqx-kanban-item-avatar-initials-c2 {
    background: #6a1b9a;
}

.jqx-kanban-item-avatar-initials-c3 {
    background: #c62828;
}

.jqx-kanban-item-avatar-initials-c4 {
    background: #00695c;
}

.jqx-kanban-item-avatar-initials-c5 {
    background: #ad1457;
}

.jqx-kanban-item-avatar-initials-c6 {
    background: #4527a0;
}

.jqx-kanban-item-avatar-initials-c7 {
    background: #a1440a;
}

/* jqxKanban (the modern themes): the dragged card is lifted off the board. */
:where(.jqx-kanban:is(.jqx-kanban-base, .jqx-kanban-light, .jqx-kanban-dark, .jqx-kanban-fluent, .jqx-kanban-fluent-dark, .jqx-kanban-tailwind, .jqx-kanban-tailwind-blue, .jqx-kanban-tailwind-dark, .jqx-kanban-tailwind-blue-dark, .jqx-kanban-material, .jqx-kanban-material-dark, .jqx-kanban-material-purple, .jqx-kanban-material-purple-dark, .jqx-kanban-material-green, .jqx-kanban-material-green-dark)) .jqx-kanban-item.jqx-rc-all.jqx-sortable-helper {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.12);
    transform: rotate(1.5deg);
    cursor: grabbing;
}

/* jqxWindow: the modern dialog (2026), in the base theme and the design-system themes; the classic
   themes and docking panels keep theirs. One rounded surface lifted off the page: the title on the
   window's own colour (no bar, no rule under it), room at the sides of the content, a round hover behind the
   close button. The window's size is the one it is given: the content's size is worked out from its
   padding. The scope is in :where(), so app CSS still restyles what it restyles. */
:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)).jqx-window.jqx-popup {
    border-radius: 10px;
    border-color: color-mix(in srgb, currentColor 12%, transparent);
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)).jqx-window.jqx-popup:not(.jqx-noshadow) {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.08);
}

:where(.jqx-window:is(.jqx-window-dark, .jqx-window-fluent-dark, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material-dark, .jqx-window-material-purple-dark, .jqx-window-material-green-dark):not(.jqx-docking-window)).jqx-window.jqx-popup:not(.jqx-noshadow) {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.3);
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)).jqx-window .jqx-window-header.jqx-widget-header {
    background: transparent;
    border-bottom-color: transparent;
    border-radius: 10px 10px 0 0;
    padding: 10px 14px 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)).jqx-window .jqx-window-content.jqx-widget-content {
    padding: 4px 14px 10px;
    border-radius: 0 0 10px 10px;
}

/* the collapse and close buttons: the same 16px line icons in the title's colour (the themes drew
   them unlike - a small glyph beside a large one, at different heights), level with the title,
   10px apart, a round tint behind the one under the pointer */
:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) :is(.jqx-window-close-button, .jqx-window-collapse-button, .jqx-window-collapse-button-collapsed) {
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    position: static !important;
    opacity: 0.75;
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) .jqx-window-collapse-button {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 10l4-4 4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 10l4-4 4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) .jqx-window-collapse-button.jqx-window-collapse-button-collapsed,
:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) .jqx-window-collapse-button-collapsed {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) :is(.jqx-window-close-button, .jqx-window-collapse-button, .jqx-window-collapse-button-collapsed)::before,
:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) :is(.jqx-window-close-button, .jqx-window-collapse-button, .jqx-window-collapse-button-collapsed)::after {
    display: none !important;
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) :is(.jqx-window-close-button-background, .jqx-window-collapse-button-background) {
    translate: 0 2px;
    border-radius: 50%;
    cursor: pointer;
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) .jqx-window-collapse-button-background {
    translate: -10px 2px;
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) :is(.jqx-window-close-button-background, .jqx-window-collapse-button-background):hover {
    background-color: color-mix(in srgb, currentColor 10%, transparent);
    box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 10%, transparent);
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) :is(.jqx-window-close-button-background, .jqx-window-collapse-button-background):hover > * {
    opacity: 1;
}

/* the scheduler's edit dialog: the same room at the sides, the footer across the window's edge, Save
   in the accent and the deletes in red outline (the destructive action, not the main one) */
:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)).jqx-window .jqx-window-content.jqx-scheduler-edit-dialog-content {
    padding: 4px 14px 0;
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) .jqx-scheduler-edit-dialog-content.jqx-window-content > .jqx-scheduler-edit-dialog-footer {
    margin: 2px -14px 0;
    padding: 12px 14px 14px;
    border-top-color: color-mix(in srgb, currentColor 12%, transparent);
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) .jqx-scheduler-edit-dialog-buttons > .jqx-scheduler-edit-dialog-save.primary.jqx-button {
    background: var(--jqx-primary, #005c99);
    border-color: var(--jqx-primary, #005c99);
    color: var(--jqx-primary-color, #fff);
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) .jqx-scheduler-edit-dialog-buttons > .jqx-scheduler-edit-dialog-save.primary.jqx-button:hover {
    background: color-mix(in srgb, var(--jqx-primary, #005c99) 86%, #000);
    border-color: color-mix(in srgb, var(--jqx-primary, #005c99) 86%, #000);
}

/* Cancel: the quiet one beside Save (themes that fill every button, as material does, would make the two alike) */
:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) .jqx-scheduler-edit-dialog-buttons > .jqx-scheduler-edit-dialog-cancel.jqx-button {
    background: transparent;
    border-color: color-mix(in srgb, currentColor 28%, transparent);
    color: inherit;
    box-shadow: none;
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) .jqx-scheduler-edit-dialog-buttons > .jqx-scheduler-edit-dialog-cancel.jqx-button:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) .jqx-scheduler-edit-dialog-buttons > .jqx-scheduler-edit-dialog-delete.jqx-button {
    background: transparent !important;
    border-color: color-mix(in srgb, #c42b1c 60%, transparent) !important;
    color: #c42b1c !important;
    text-shadow: none !important;
}

:where(.jqx-window:is(.jqx-window-base, .jqx-window-light, .jqx-window-dark, .jqx-window-fluent, .jqx-window-fluent-dark, .jqx-window-tailwind, .jqx-window-tailwind-blue, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material, .jqx-window-material-dark, .jqx-window-material-purple, .jqx-window-material-purple-dark, .jqx-window-material-green, .jqx-window-material-green-dark):not(.jqx-docking-window)) .jqx-scheduler-edit-dialog-buttons > .jqx-scheduler-edit-dialog-delete.jqx-button:hover {
    background: rgba(196, 43, 28, 0.08) !important;
    border-color: #c42b1c !important;
}

:where(.jqx-window:is(.jqx-window-dark, .jqx-window-fluent-dark, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material-dark, .jqx-window-material-purple-dark, .jqx-window-material-green-dark):not(.jqx-docking-window)) .jqx-scheduler-edit-dialog-buttons > .jqx-scheduler-edit-dialog-delete.jqx-button {
    border-color: color-mix(in srgb, #ff8a80 60%, transparent) !important;
    color: #ff8a80 !important;
}

:where(.jqx-window:is(.jqx-window-dark, .jqx-window-fluent-dark, .jqx-window-tailwind-dark, .jqx-window-tailwind-blue-dark, .jqx-window-material-dark, .jqx-window-material-purple-dark, .jqx-window-material-green-dark):not(.jqx-docking-window)) .jqx-scheduler-edit-dialog-buttons > .jqx-scheduler-edit-dialog-delete.jqx-button:hover {
    background: rgba(255, 138, 128, 0.12) !important;
    border-color: #ff8a80 !important;
}

/* a drop-down list's place holder ("Select Time Zone") reads as a prompt, not as a chosen value */
.jqx-dropdownlist-placeholder:is(.jqx-dropdownlist-placeholder-base, .jqx-dropdownlist-placeholder-light, .jqx-dropdownlist-placeholder-dark, .jqx-dropdownlist-placeholder-fluent, .jqx-dropdownlist-placeholder-fluent-dark, .jqx-dropdownlist-placeholder-tailwind, .jqx-dropdownlist-placeholder-tailwind-blue, .jqx-dropdownlist-placeholder-tailwind-dark, .jqx-dropdownlist-placeholder-tailwind-blue-dark, .jqx-dropdownlist-placeholder-material, .jqx-dropdownlist-placeholder-material-dark, .jqx-dropdownlist-placeholder-material-purple, .jqx-dropdownlist-placeholder-material-purple-dark, .jqx-dropdownlist-placeholder-material-green, .jqx-dropdownlist-placeholder-material-green-dark) {
    color: color-mix(in srgb, currentColor 65%, transparent);
}

/* jqxCalendar and jqxDateTimeInput: the modern look (2026), in the base theme and the design-system
   themes; the classic themes keep theirs. Days are circles - a tint under the pointer, a ring in the
   accent for today, the accent filled for the selected day - and a range is one band with a circle at
   each end. The circles are drawn as backgrounds, as big as the cell allows up to a cap, so they stay
   round whatever the calendar's size (the year and decade views too) and nothing moves; they are
   laid over the cells' transparent borders too (border-box), so a range has no seams. The title is
   on the calendar's own colour, and Today and Clear are
   text buttons. The themes' cell rules are !important, so these are too. */
:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)).jqx-calendar.jqx-widget {
    border-radius: 8px;
    overflow: hidden;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) .jqx-calendar-title-container.jqx-widget-header,
:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) .jqx-calendar-title-container.jqx-widget-header > td {
    background: transparent !important;
    border-color: transparent !important;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) .jqx-calendar-title-container .jqx-calendar-title-content {
    font-weight: 600;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) .jqx-calendar-column-header.jqx-widget-content {
    border-color: color-mix(in srgb, currentColor 12%, transparent);
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) .jqx-calendar-top-left-header.jqx-calendar-top-left-header,
:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) .jqx-calendar-row-header.jqx-calendar-row-header,
:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) .jqx-calendar-row-header .jqx-calendar-row-cell.jqx-calendar-row-cell {
    background: transparent;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) table:has(> tbody > tr > td.jqx-calendar-cell) {
    border-spacing: 0;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell.jqx-calendar-cell {
    border-color: transparent !important;
    border-radius: 0 !important;
    outline: none !important;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell.jqx-calendar-cell::after {
    display: none !important;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell-month.jqx-calendar-cell-hover:not(.jqx-calendar-cell-selected) {
    background: radial-gradient(circle closest-side, color-mix(in srgb, currentColor 10%, transparent) calc(100% - 1px), transparent 100%) center / min(100%, 34px) min(100%, 34px) no-repeat border-box !important;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td:is(.jqx-calendar-cell-year, .jqx-calendar-cell-decade).jqx-calendar-cell-hover:not(.jqx-calendar-cell-selected) {
    background: radial-gradient(circle closest-side, color-mix(in srgb, currentColor 10%, transparent) calc(100% - 1px), transparent 100%) center / min(100%, 52px) min(100%, 52px) no-repeat border-box !important;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell-month.jqx-calendar-cell-today:not(.jqx-calendar-cell-selected) {
    background: radial-gradient(circle closest-side, transparent calc(100% - 2.5px), var(--jqx-primary, #005c99) calc(100% - 2px), var(--jqx-primary, #005c99) calc(100% - 1px), transparent 100%) center / min(100%, 34px) min(100%, 34px) no-repeat border-box !important;
    color: inherit !important;
    font-weight: 600;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell-month.jqx-calendar-cell-today.jqx-calendar-cell-hover:not(.jqx-calendar-cell-selected) {
    background: radial-gradient(circle closest-side, transparent calc(100% - 2.5px), var(--jqx-primary, #005c99) calc(100% - 2px), var(--jqx-primary, #005c99) calc(100% - 1px), transparent 100%) center / min(100%, 34px) min(100%, 34px) no-repeat border-box, radial-gradient(circle closest-side, color-mix(in srgb, currentColor 10%, transparent) calc(100% - 1px), transparent 100%) center / min(100%, 34px) min(100%, 34px) no-repeat border-box !important;
}

/* on the dark themes the ring is a lighter accent, 3:1 on their backgrounds */
:where(.jqx-calendar:is(.jqx-calendar-dark, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material-dark, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell-month.jqx-calendar-cell-today:not(.jqx-calendar-cell-selected) {
    background: radial-gradient(circle closest-side, transparent calc(100% - 2.5px), color-mix(in srgb, var(--jqx-primary, #005c99) 70%, #fff) calc(100% - 2px), color-mix(in srgb, var(--jqx-primary, #005c99) 70%, #fff) calc(100% - 1px), transparent 100%) center / min(100%, 34px) min(100%, 34px) no-repeat border-box !important;
}

:where(.jqx-calendar:is(.jqx-calendar-dark, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material-dark, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell-month.jqx-calendar-cell-today.jqx-calendar-cell-hover:not(.jqx-calendar-cell-selected) {
    background: radial-gradient(circle closest-side, transparent calc(100% - 2.5px), color-mix(in srgb, var(--jqx-primary, #005c99) 70%, #fff) calc(100% - 2px), color-mix(in srgb, var(--jqx-primary, #005c99) 70%, #fff) calc(100% - 1px), transparent 100%) center / min(100%, 34px) min(100%, 34px) no-repeat border-box, radial-gradient(circle closest-side, color-mix(in srgb, currentColor 10%, transparent) calc(100% - 1px), transparent 100%) center / min(100%, 34px) min(100%, 34px) no-repeat border-box !important;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell-month.jqx-calendar-cell-selected.jqx-calendar-cell,
:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell-month.jqx-calendar-cell-selected:has(+ .jqx-calendar-cell-selected):not(.jqx-calendar-cell-selected + .jqx-calendar-cell-selected).jqx-calendar-cell,
:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell-month.jqx-calendar-cell-selected:is(.jqx-calendar-cell-selected + .jqx-calendar-cell-selected):not(:has(+ .jqx-calendar-cell-selected)).jqx-calendar-cell {
    background: radial-gradient(circle closest-side, var(--jqx-primary, #005c99) calc(100% - 1px), transparent 100%) center / min(100%, 34px) min(100%, 34px) no-repeat border-box !important;
    color: var(--jqx-primary-color, #fff) !important;
    font-weight: 600;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td:is(.jqx-calendar-cell-year, .jqx-calendar-cell-decade).jqx-calendar-cell-selected.jqx-calendar-cell {
    background: radial-gradient(circle closest-side, var(--jqx-primary, #005c99) calc(100% - 1px), transparent 100%) center / min(100%, 52px) min(100%, 52px) no-repeat border-box !important;
    color: var(--jqx-primary-color, #fff) !important;
    font-weight: 600;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell-month.jqx-calendar-cell-selected:has(+ .jqx-calendar-cell-selected):not(.jqx-calendar-cell-selected + .jqx-calendar-cell-selected).jqx-calendar-cell {
    background: radial-gradient(circle closest-side, var(--jqx-primary, #005c99) calc(100% - 1px), transparent 100%) center / min(100%, 34px) min(100%, 34px) no-repeat border-box, linear-gradient(to right, transparent 50%, color-mix(in srgb, var(--jqx-primary, #005c99) 18%, transparent) 50%) border-box !important;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell-month.jqx-calendar-cell-selected:is(.jqx-calendar-cell-selected + .jqx-calendar-cell-selected):not(:has(+ .jqx-calendar-cell-selected)).jqx-calendar-cell {
    background: radial-gradient(circle closest-side, var(--jqx-primary, #005c99) calc(100% - 1px), transparent 100%) center / min(100%, 34px) min(100%, 34px) no-repeat border-box, linear-gradient(to left, transparent 50%, color-mix(in srgb, var(--jqx-primary, #005c99) 18%, transparent) 50%) border-box !important;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell-month.jqx-calendar-cell-selected:is(.jqx-calendar-cell-selected + .jqx-calendar-cell-selected):has(+ .jqx-calendar-cell-selected).jqx-calendar-cell {
    background: color-mix(in srgb, var(--jqx-primary, #005c99) 18%, transparent) !important;
    color: inherit !important;
    font-weight: normal;
}

/* a disabled calendar's selection, faded with it */
:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) td.jqx-calendar-cell-disabled.jqx-calendar-cell-selected.jqx-calendar-cell {
    opacity: 0.5;
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) a.jqx-calendar-footer.jqx-calendar-footer {
    padding: 0 6px;
    border-radius: 6px;
    color: var(--jqx-primary, #005c99);
    font-weight: 600;
    text-decoration: none;
}

:where(.jqx-calendar:is(.jqx-calendar-dark, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material-dark, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green-dark)) a.jqx-calendar-footer.jqx-calendar-footer {
    color: color-mix(in srgb, var(--jqx-primary, #005c99) 70%, #fff);
}

:where(.jqx-calendar:is(.jqx-calendar-base, .jqx-calendar-light, .jqx-calendar-dark, .jqx-calendar-fluent, .jqx-calendar-fluent-dark, .jqx-calendar-tailwind, .jqx-calendar-tailwind-blue, .jqx-calendar-tailwind-dark, .jqx-calendar-tailwind-blue-dark, .jqx-calendar-material, .jqx-calendar-material-dark, .jqx-calendar-material-purple, .jqx-calendar-material-purple-dark, .jqx-calendar-material-green, .jqx-calendar-material-green-dark)) a.jqx-calendar-footer.jqx-calendar-footer:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
    text-decoration: none;
}

/* jqxDateTimeInput's drop-downs: a little below the field, rounded and lifted. The container clips
   only at the top (the slide comes from there), so the shadow shows at the sides and below. */
:where(.jqx-calendar-container:is(.jqx-calendar-container-base, .jqx-calendar-container-light, .jqx-calendar-container-dark, .jqx-calendar-container-fluent, .jqx-calendar-container-fluent-dark, .jqx-calendar-container-tailwind, .jqx-calendar-container-tailwind-blue, .jqx-calendar-container-tailwind-dark, .jqx-calendar-container-tailwind-blue-dark, .jqx-calendar-container-material, .jqx-calendar-container-material-dark, .jqx-calendar-container-material-purple, .jqx-calendar-container-material-purple-dark, .jqx-calendar-container-material-green, .jqx-calendar-container-material-green-dark)).jqx-calendar-container {
    overflow: visible !important;
    clip-path: inset(0 -40px -40px -40px);
}

:where(.jqx-calendar-container:is(.jqx-calendar-container-base, .jqx-calendar-container-light, .jqx-calendar-container-dark, .jqx-calendar-container-fluent, .jqx-calendar-container-fluent-dark, .jqx-calendar-container-tailwind, .jqx-calendar-container-tailwind-blue, .jqx-calendar-container-tailwind-dark, .jqx-calendar-container-tailwind-blue-dark, .jqx-calendar-container-material, .jqx-calendar-container-material-dark, .jqx-calendar-container-material-purple, .jqx-calendar-container-material-purple-dark, .jqx-calendar-container-material-green, .jqx-calendar-container-material-green-dark)) > .jqx-calendar.jqx-popup {
    translate: 0 4px;
    border-color: color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
}

:where(.jqx-calendar-container:is(.jqx-calendar-container-base, .jqx-calendar-container-light, .jqx-calendar-container-dark, .jqx-calendar-container-fluent, .jqx-calendar-container-fluent-dark, .jqx-calendar-container-tailwind, .jqx-calendar-container-tailwind-blue, .jqx-calendar-container-tailwind-dark, .jqx-calendar-container-tailwind-blue-dark, .jqx-calendar-container-material, .jqx-calendar-container-material-dark, .jqx-calendar-container-material-purple, .jqx-calendar-container-material-purple-dark, .jqx-calendar-container-material-green, .jqx-calendar-container-material-green-dark)) > .jqx-popup:not(.jqx-calendar) {
    translate: 0 4px;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
}

:where(.jqx-calendar-container:is(.jqx-calendar-container-base, .jqx-calendar-container-light, .jqx-calendar-container-dark, .jqx-calendar-container-fluent, .jqx-calendar-container-fluent-dark, .jqx-calendar-container-tailwind, .jqx-calendar-container-tailwind-blue, .jqx-calendar-container-tailwind-dark, .jqx-calendar-container-tailwind-blue-dark, .jqx-calendar-container-material, .jqx-calendar-container-material-dark, .jqx-calendar-container-material-purple, .jqx-calendar-container-material-purple-dark, .jqx-calendar-container-material-green, .jqx-calendar-container-material-green-dark)) > .jqx-popup > .jqx-date-time-input-popup {
    border-color: transparent;
    box-shadow: none;
}

:where(.jqx-calendar-container:is(.jqx-calendar-container-dark, .jqx-calendar-container-fluent-dark, .jqx-calendar-container-tailwind-dark, .jqx-calendar-container-tailwind-blue-dark, .jqx-calendar-container-material-dark, .jqx-calendar-container-material-purple-dark, .jqx-calendar-container-material-green-dark)) > .jqx-calendar.jqx-popup,
:where(.jqx-calendar-container:is(.jqx-calendar-container-dark, .jqx-calendar-container-fluent-dark, .jqx-calendar-container-tailwind-dark, .jqx-calendar-container-tailwind-blue-dark, .jqx-calendar-container-material-dark, .jqx-calendar-container-material-purple-dark, .jqx-calendar-container-material-green-dark)) > .jqx-popup:not(.jqx-calendar) {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* A disabled template button (primary, success, ...) in fluent and tailwind: those themes draw a
   disabled button grey, setting its colours as variables on [disabled] (and no fading), but their
   template rules paint [disabled] like :hover, with !important - so a disabled Primary looked
   enabled. The variables win again. */
.jqx-button.jqx-button[disabled]:is(.jqx-primary-fluent, .jqx-success-fluent, .jqx-warning-fluent, .jqx-danger-fluent, .jqx-info-fluent, .jqx-inverse-fluent, .jqx-primary-fluent-dark, .jqx-success-fluent-dark, .jqx-warning-fluent-dark, .jqx-danger-fluent-dark, .jqx-info-fluent-dark, .jqx-inverse-fluent-dark, .jqx-primary-tailwind, .jqx-primary-tailwind-blue, .jqx-success-tailwind, .jqx-success-tailwind-blue, .jqx-warning-tailwind, .jqx-warning-tailwind-blue, .jqx-danger-tailwind, .jqx-danger-tailwind-blue, .jqx-info-tailwind, .jqx-info-tailwind-blue, .jqx-inverse-tailwind, .jqx-inverse-tailwind-blue, .jqx-primary-tailwind-dark, .jqx-primary-tailwind-blue-dark, .jqx-success-tailwind-dark, .jqx-success-tailwind-blue-dark, .jqx-warning-tailwind-dark, .jqx-warning-tailwind-blue-dark, .jqx-danger-tailwind-dark, .jqx-danger-tailwind-blue-dark, .jqx-info-tailwind-dark, .jqx-info-tailwind-blue-dark, .jqx-inverse-tailwind-dark, .jqx-inverse-tailwind-blue-dark) {
    background: var(--jqx-background) !important;
    border-color: var(--jqx-border) !important;
    color: var(--jqx-background-color) !important;
}

/* The indeterminate check box in fluent and tailwind: their mark was a 14px square in the
   background colour, which covered the box and drew nothing - the state was invisible. A square in
   the accent, centred, as in light and dark (in a tree too). */
.jqx-checkbox-check-indeterminate.jqx-checkbox-check-indeterminate:is(.jqx-checkbox-check-indeterminate-fluent, .jqx-checkbox-check-indeterminate-fluent-dark, .jqx-checkbox-check-indeterminate-tailwind, .jqx-checkbox-check-indeterminate-tailwind-blue, .jqx-checkbox-check-indeterminate-tailwind-dark, .jqx-checkbox-check-indeterminate-tailwind-blue-dark) {
    width: 8px !important;
    height: 8px !important;
    top: 4px;
    left: 4px;
    border-radius: 2px;
    background: var(--jqx-primary);
}

/* The base theme's buttons and inputs (2026): rounded a little more (6px), the label of a button
   medium weight, a clear hover and pressed state, a focus ring for the keyboard (2px, the accent,
   off the edge), and the templates in a current palette - white text 4.5:1 or more on each - in
   place of the 2013 one (#337ab7, the brown warning, the teal info). Fields: a darker border under
   the pointer, the accent border and a soft ring of it while focused. Sizes are unchanged. */
.jqx-button.jqx-button-base {
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.jqx-button.jqx-button-base.jqx-fill-state-normal:not(.jqx-fill-state-disabled):hover,
.jqx-button.jqx-button-base.jqx-fill-state-hover {
    background-color: #f2f2f2;
    border-color: #6e6e6e;
}

.jqx-button.jqx-button-base:focus-visible {
    outline: 2px solid #005c99;
    outline-offset: 2px;
}

.jqx-button.jqx-button-base.jqx-primary {
    background-color: #005c99 !important;
    border-color: #005c99 !important;
    color: #fff !important;
    text-shadow: none !important;
}

.jqx-button.jqx-button-base.jqx-primary:is(:hover, :focus, .jqx-fill-state-hover) {
    background-color: color-mix(in srgb, #005c99 86%, #000) !important;
    border-color: color-mix(in srgb, #005c99 86%, #000) !important;
}

.jqx-button.jqx-button-base.jqx-primary:is(:active, .active, .jqx-fill-state-pressed) {
    background-color: color-mix(in srgb, #005c99 74%, #000) !important;
    border-color: color-mix(in srgb, #005c99 74%, #000) !important;
}

.jqx-button.jqx-button-base.jqx-primary:is([disabled], .jqx-fill-state-disabled) {
    background-color: #005c99 !important;
    border-color: #005c99 !important;
}

.jqx-button.jqx-button-base.jqx-success {
    background-color: #15803d !important;
    border-color: #15803d !important;
    color: #fff !important;
    text-shadow: none !important;
}

.jqx-button.jqx-button-base.jqx-success:is(:hover, :focus, .jqx-fill-state-hover) {
    background-color: color-mix(in srgb, #15803d 86%, #000) !important;
    border-color: color-mix(in srgb, #15803d 86%, #000) !important;
}

.jqx-button.jqx-button-base.jqx-success:is(:active, .active, .jqx-fill-state-pressed) {
    background-color: color-mix(in srgb, #15803d 74%, #000) !important;
    border-color: color-mix(in srgb, #15803d 74%, #000) !important;
}

.jqx-button.jqx-button-base.jqx-success:is([disabled], .jqx-fill-state-disabled) {
    background-color: #15803d !important;
    border-color: #15803d !important;
}

.jqx-button.jqx-button-base.jqx-warning {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #fff !important;
    text-shadow: none !important;
}

.jqx-button.jqx-button-base.jqx-warning:is(:hover, :focus, .jqx-fill-state-hover) {
    background-color: color-mix(in srgb, #b45309 86%, #000) !important;
    border-color: color-mix(in srgb, #b45309 86%, #000) !important;
}

.jqx-button.jqx-button-base.jqx-warning:is(:active, .active, .jqx-fill-state-pressed) {
    background-color: color-mix(in srgb, #b45309 74%, #000) !important;
    border-color: color-mix(in srgb, #b45309 74%, #000) !important;
}

.jqx-button.jqx-button-base.jqx-warning:is([disabled], .jqx-fill-state-disabled) {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
}

.jqx-button.jqx-button-base.jqx-danger {
    background-color: #c42b1c !important;
    border-color: #c42b1c !important;
    color: #fff !important;
    text-shadow: none !important;
}

.jqx-button.jqx-button-base.jqx-danger:is(:hover, :focus, .jqx-fill-state-hover) {
    background-color: color-mix(in srgb, #c42b1c 86%, #000) !important;
    border-color: color-mix(in srgb, #c42b1c 86%, #000) !important;
}

.jqx-button.jqx-button-base.jqx-danger:is(:active, .active, .jqx-fill-state-pressed) {
    background-color: color-mix(in srgb, #c42b1c 74%, #000) !important;
    border-color: color-mix(in srgb, #c42b1c 74%, #000) !important;
}

.jqx-button.jqx-button-base.jqx-danger:is([disabled], .jqx-fill-state-disabled) {
    background-color: #c42b1c !important;
    border-color: #c42b1c !important;
}

.jqx-button.jqx-button-base.jqx-info {
    background-color: #0e7490 !important;
    border-color: #0e7490 !important;
    color: #fff !important;
    text-shadow: none !important;
}

.jqx-button.jqx-button-base.jqx-info:is(:hover, :focus, .jqx-fill-state-hover) {
    background-color: color-mix(in srgb, #0e7490 86%, #000) !important;
    border-color: color-mix(in srgb, #0e7490 86%, #000) !important;
}

.jqx-button.jqx-button-base.jqx-info:is(:active, .active, .jqx-fill-state-pressed) {
    background-color: color-mix(in srgb, #0e7490 74%, #000) !important;
    border-color: color-mix(in srgb, #0e7490 74%, #000) !important;
}

.jqx-button.jqx-button-base.jqx-info:is([disabled], .jqx-fill-state-disabled) {
    background-color: #0e7490 !important;
    border-color: #0e7490 !important;
}

.jqx-button.jqx-button-base.jqx-inverse {
    background-color: #1f2937 !important;
    border-color: #1f2937 !important;
    color: #fff !important;
    text-shadow: none !important;
}

.jqx-button.jqx-button-base.jqx-inverse:is(:hover, :focus, .jqx-fill-state-hover) {
    background-color: color-mix(in srgb, #1f2937 86%, #000) !important;
    border-color: color-mix(in srgb, #1f2937 86%, #000) !important;
}

.jqx-button.jqx-button-base.jqx-inverse:is(:active, .active, .jqx-fill-state-pressed) {
    background-color: color-mix(in srgb, #1f2937 74%, #000) !important;
    border-color: color-mix(in srgb, #1f2937 74%, #000) !important;
}

.jqx-button.jqx-button-base.jqx-inverse:is([disabled], .jqx-fill-state-disabled) {
    background-color: #1f2937 !important;
    border-color: #1f2937 !important;
}

.jqx-button.jqx-button-base.jqx-link {
    color: #005c99 !important;
    background: transparent !important;
    border-color: transparent !important;
}

.jqx-button.jqx-button-base.jqx-link:hover {
    text-decoration: underline;
}

/* a button group is one control: square between its buttons, rounded at its two ends */
.jqx-button.jqx-button-base.jqx-group-button-normal {
    border-radius: 0;
}

.jqx-button.jqx-button-base.jqx-group-button-normal.jqx-rc-tl {
    border-top-left-radius: 6px;
}

.jqx-button.jqx-button-base.jqx-group-button-normal.jqx-rc-bl {
    border-bottom-left-radius: 6px;
}

.jqx-button.jqx-button-base.jqx-group-button-normal.jqx-rc-tr {
    border-top-right-radius: 6px;
}

.jqx-button.jqx-button-base.jqx-group-button-normal.jqx-rc-br {
    border-bottom-right-radius: 6px;
}

.jqx-dropdownlist-state-normal-base.jqx-fill-state-normal-base {
    background-color: #fff;
}

:is(.jqx-input-base, .jqx-text-area-base, .jqx-dropdownlist-state-normal-base, .jqx-combobox-state-normal-base).jqx-widget {
    border-radius: 6px;
}

:is(.jqx-input-base, .jqx-text-area-base, .jqx-dropdownlist-state-normal-base, .jqx-combobox-state-normal-base).jqx-widget:not(.jqx-fill-state-disabled):not(:focus-within):hover {
    border-color: #6e6e6e;
}

:is(.jqx-input-base, .jqx-text-area-base, .jqx-dropdownlist-state-normal-base, .jqx-combobox-state-normal-base).jqx-widget:focus-within {
    border-color: #005c99;
    box-shadow: 0 0 0 3px rgba(0, 92, 153, 0.2);
}

/* Navigation and layout, modern (2026).
   The base theme's tabs and ribbon: titles on the widget's own colour (no grey band, no boxed tab),
   the selected one marked by the accent underneath (above, for tabs at the bottom), the others in a
   quieter colour (8.9:1). The base menu: a white bar, rounded items under the pointer, its drop-downs
   rounded and lifted. */
.jqx-tabs-base > .jqx-tabs-headerWrapper.jqx-tabs-header-base,
.jqx-ribbon-base > .jqx-ribbon-header.jqx-ribbon-header-base {
    background: #fff;
}

.jqx-tabs-title.jqx-tabs-title-base,
.jqx-ribbon-item.jqx-ribbon-item-base {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    color: #4a4a4a;
    font-weight: 500;
}

.jqx-tabs-title.jqx-tabs-title-base:hover,
.jqx-ribbon-item.jqx-ribbon-item-base:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1f1f1f;
}

.jqx-tabs-title.jqx-tabs-title-base.jqx-tabs-title-selected-top,
.jqx-ribbon-item.jqx-ribbon-item-base.jqx-ribbon-item-selected.jqx-ribbon-item-top {
    background: transparent;
    border-color: transparent;
    color: #005c99;
    box-shadow: inset 0 -3px 0 #005c99;
}

.jqx-tabs-title.jqx-tabs-title-base.jqx-tabs-title-selected-bottom,
.jqx-ribbon-item.jqx-ribbon-item-base.jqx-ribbon-item-selected.jqx-ribbon-item-bottom {
    background: transparent;
    border-color: transparent;
    color: #005c99;
    box-shadow: inset 0 3px 0 #005c99;
}

.jqx-menu.jqx-menu-base.jqx-widget-header {
    background: #fff;
}

.jqx-menu-item-top.jqx-menu-item-top-base,
.jqx-menu-item.jqx-menu-item-base {
    border-radius: 6px;
}

.jqx-menu-dropdown.jqx-menu-dropdown-base {
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Tool bar buttons, in the base theme and the design-system themes: flat until the pointer is on
   one (the tool bar is the frame; a box round every tool doubled it), a tint under the pointer,
   the accent tint when toggled on. */
:where(.jqx-toolbar:is(.jqx-toolbar-base, .jqx-toolbar-light, .jqx-toolbar-dark, .jqx-toolbar-fluent, .jqx-toolbar-fluent-dark, .jqx-toolbar-tailwind, .jqx-toolbar-tailwind-blue, .jqx-toolbar-tailwind-dark, .jqx-toolbar-tailwind-blue-dark, .jqx-toolbar-material, .jqx-toolbar-material-dark, .jqx-toolbar-material-purple, .jqx-toolbar-material-purple-dark, .jqx-toolbar-material-green, .jqx-toolbar-material-green-dark)) .jqx-toolbar-tool.jqx-button.jqx-fill-state-normal {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    /* the tool bar's text colour: a theme that fills its buttons (material) writes on them in white */
    color: inherit;
}

:where(.jqx-toolbar:is(.jqx-toolbar-base, .jqx-toolbar-light, .jqx-toolbar-dark, .jqx-toolbar-fluent, .jqx-toolbar-fluent-dark, .jqx-toolbar-tailwind, .jqx-toolbar-tailwind-blue, .jqx-toolbar-tailwind-dark, .jqx-toolbar-tailwind-blue-dark, .jqx-toolbar-material, .jqx-toolbar-material-dark, .jqx-toolbar-material-purple, .jqx-toolbar-material-purple-dark, .jqx-toolbar-material-green, .jqx-toolbar-material-green-dark)) .jqx-toolbar-tool.jqx-button.jqx-fill-state-hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: transparent;
}

:where(.jqx-toolbar:is(.jqx-toolbar-base, .jqx-toolbar-light, .jqx-toolbar-dark, .jqx-toolbar-fluent, .jqx-toolbar-fluent-dark, .jqx-toolbar-tailwind, .jqx-toolbar-tailwind-blue, .jqx-toolbar-tailwind-dark, .jqx-toolbar-tailwind-blue-dark, .jqx-toolbar-material, .jqx-toolbar-material-dark, .jqx-toolbar-material-purple, .jqx-toolbar-material-purple-dark, .jqx-toolbar-material-green, .jqx-toolbar-material-green-dark)) .jqx-toolbar-tool.jqx-button.jqx-fill-state-pressed {
    background: color-mix(in srgb, var(--jqx-primary, #005c99) 14%, transparent);
    border-color: transparent;
    color: inherit;
}

/* The nav bar: one segmented control - rounded, thin lines between its parts, the selected part in
   the accent's tint and colour. */
:where(.jqx-navbar:is(.jqx-navbar-base, .jqx-navbar-light, .jqx-navbar-dark, .jqx-navbar-fluent, .jqx-navbar-fluent-dark, .jqx-navbar-tailwind, .jqx-navbar-tailwind-blue, .jqx-navbar-tailwind-dark, .jqx-navbar-tailwind-blue-dark, .jqx-navbar-material, .jqx-navbar-material-dark, .jqx-navbar-material-purple, .jqx-navbar-material-purple-dark, .jqx-navbar-material-green, .jqx-navbar-material-green-dark)).jqx-navbar {
    border-radius: 8px;
    overflow: hidden;
}

:where(.jqx-navbar:is(.jqx-navbar-base, .jqx-navbar-light, .jqx-navbar-dark, .jqx-navbar-fluent, .jqx-navbar-fluent-dark, .jqx-navbar-tailwind, .jqx-navbar-tailwind-blue, .jqx-navbar-tailwind-dark, .jqx-navbar-tailwind-blue-dark, .jqx-navbar-material, .jqx-navbar-material-dark, .jqx-navbar-material-purple, .jqx-navbar-material-purple-dark, .jqx-navbar-material-green, .jqx-navbar-material-green-dark)) .jqx-navbar-block.jqx-navbar-block.jqx-button.jqx-fill-state-normal {
    background: transparent;
    border-color: color-mix(in srgb, currentColor 14%, transparent);
    color: inherit;
}

:where(.jqx-navbar:is(.jqx-navbar-base, .jqx-navbar-light, .jqx-navbar-dark, .jqx-navbar-fluent, .jqx-navbar-fluent-dark, .jqx-navbar-tailwind, .jqx-navbar-tailwind-blue, .jqx-navbar-tailwind-dark, .jqx-navbar-tailwind-blue-dark, .jqx-navbar-material, .jqx-navbar-material-dark, .jqx-navbar-material-purple, .jqx-navbar-material-purple-dark, .jqx-navbar-material-green, .jqx-navbar-material-green-dark)) .jqx-navbar-block.jqx-navbar-block.jqx-button.jqx-fill-state-hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

:where(.jqx-navbar:is(.jqx-navbar-base, .jqx-navbar-light, .jqx-navbar-dark, .jqx-navbar-fluent, .jqx-navbar-fluent-dark, .jqx-navbar-tailwind, .jqx-navbar-tailwind-blue, .jqx-navbar-tailwind-dark, .jqx-navbar-tailwind-blue-dark, .jqx-navbar-material, .jqx-navbar-material-dark, .jqx-navbar-material-purple, .jqx-navbar-material-purple-dark, .jqx-navbar-material-green, .jqx-navbar-material-green-dark)) .jqx-navbar-block.jqx-navbar-block.jqx-button.jqx-fill-state-pressed {
    background: color-mix(in srgb, var(--jqx-primary, #005c99) 14%, transparent);
    color: var(--jqx-primary, #005c99);
    font-weight: 600;
}

/* The expander and the navigation bar: headers on the widget's own colour and semibold, a thin
   line between header and content, a tint under the pointer; a lone expander is rounded. */
:where(.jqx-expander:is(.jqx-expander-base, .jqx-expander-light, .jqx-expander-dark, .jqx-expander-fluent, .jqx-expander-fluent-dark, .jqx-expander-tailwind, .jqx-expander-tailwind-blue, .jqx-expander-tailwind-dark, .jqx-expander-tailwind-blue-dark, .jqx-expander-material, .jqx-expander-material-dark, .jqx-expander-material-purple, .jqx-expander-material-purple-dark, .jqx-expander-material-green, .jqx-expander-material-green-dark)) .jqx-expander-header.jqx-expander-header.jqx-widget-header.jqx-widget-header,
:where(.jqx-navigationbar:is(.jqx-navigationbar-base, .jqx-navigationbar-light, .jqx-navigationbar-dark, .jqx-navigationbar-fluent, .jqx-navigationbar-fluent-dark, .jqx-navigationbar-tailwind, .jqx-navigationbar-tailwind-blue, .jqx-navigationbar-tailwind-dark, .jqx-navigationbar-tailwind-blue-dark, .jqx-navigationbar-material, .jqx-navigationbar-material-dark, .jqx-navigationbar-material-purple, .jqx-navigationbar-material-purple-dark, .jqx-navigationbar-material-green, .jqx-navigationbar-material-green-dark)) .jqx-expander-header.jqx-expander-header.jqx-widget-header.jqx-widget-header {
    background: var(--jqx-background, #fff);
    border-color: color-mix(in srgb, currentColor 14%, transparent);
    font-weight: 600;
}

:where(.jqx-expander:is(.jqx-expander-base, .jqx-expander-light, .jqx-expander-dark, .jqx-expander-fluent, .jqx-expander-fluent-dark, .jqx-expander-tailwind, .jqx-expander-tailwind-blue, .jqx-expander-tailwind-dark, .jqx-expander-tailwind-blue-dark, .jqx-expander-material, .jqx-expander-material-dark, .jqx-expander-material-purple, .jqx-expander-material-purple-dark, .jqx-expander-material-green, .jqx-expander-material-green-dark)) .jqx-expander-header.jqx-expander-header.jqx-widget-header.jqx-widget-header:hover,
:where(.jqx-navigationbar:is(.jqx-navigationbar-base, .jqx-navigationbar-light, .jqx-navigationbar-dark, .jqx-navigationbar-fluent, .jqx-navigationbar-fluent-dark, .jqx-navigationbar-tailwind, .jqx-navigationbar-tailwind-blue, .jqx-navigationbar-tailwind-dark, .jqx-navigationbar-tailwind-blue-dark, .jqx-navigationbar-material, .jqx-navigationbar-material-dark, .jqx-navigationbar-material-purple, .jqx-navigationbar-material-purple-dark, .jqx-navigationbar-material-green, .jqx-navigationbar-material-green-dark)) .jqx-expander-header.jqx-expander-header.jqx-widget-header.jqx-widget-header:hover {
    background: color-mix(in srgb, currentColor 5%, var(--jqx-background, #fff));
}

:where(.jqx-expander:is(.jqx-expander-base, .jqx-expander-light, .jqx-expander-dark, .jqx-expander-fluent, .jqx-expander-fluent-dark, .jqx-expander-tailwind, .jqx-expander-tailwind-blue, .jqx-expander-tailwind-dark, .jqx-expander-tailwind-blue-dark, .jqx-expander-material, .jqx-expander-material-dark, .jqx-expander-material-purple, .jqx-expander-material-purple-dark, .jqx-expander-material-green, .jqx-expander-material-green-dark)) .jqx-expander-content.jqx-expander-content.jqx-widget-content,
:where(.jqx-navigationbar:is(.jqx-navigationbar-base, .jqx-navigationbar-light, .jqx-navigationbar-dark, .jqx-navigationbar-fluent, .jqx-navigationbar-fluent-dark, .jqx-navigationbar-tailwind, .jqx-navigationbar-tailwind-blue, .jqx-navigationbar-tailwind-dark, .jqx-navigationbar-tailwind-blue-dark, .jqx-navigationbar-material, .jqx-navigationbar-material-dark, .jqx-navigationbar-material-purple, .jqx-navigationbar-material-purple-dark, .jqx-navigationbar-material-green, .jqx-navigationbar-material-green-dark)) .jqx-expander-content.jqx-expander-content.jqx-widget-content {
    border-color: color-mix(in srgb, currentColor 14%, transparent);
}

:where(.jqx-expander:is(.jqx-expander-base, .jqx-expander-light, .jqx-expander-dark, .jqx-expander-fluent, .jqx-expander-fluent-dark, .jqx-expander-tailwind, .jqx-expander-tailwind-blue, .jqx-expander-tailwind-dark, .jqx-expander-tailwind-blue-dark, .jqx-expander-material, .jqx-expander-material-dark, .jqx-expander-material-purple, .jqx-expander-material-purple-dark, .jqx-expander-material-green, .jqx-expander-material-green-dark)) > .jqx-expander-header {
    border-radius: 8px;
}

:where(.jqx-expander:is(.jqx-expander-base, .jqx-expander-light, .jqx-expander-dark, .jqx-expander-fluent, .jqx-expander-fluent-dark, .jqx-expander-tailwind, .jqx-expander-tailwind-blue, .jqx-expander-tailwind-dark, .jqx-expander-tailwind-blue-dark, .jqx-expander-material, .jqx-expander-material-dark, .jqx-expander-material-purple, .jqx-expander-material-purple-dark, .jqx-expander-material-green, .jqx-expander-material-green-dark)) > .jqx-expander-header.jqx-expander-header-expanded {
    border-radius: 8px 8px 0 0;
}

:where(.jqx-expander:is(.jqx-expander-base, .jqx-expander-light, .jqx-expander-dark, .jqx-expander-fluent, .jqx-expander-fluent-dark, .jqx-expander-tailwind, .jqx-expander-tailwind-blue, .jqx-expander-tailwind-dark, .jqx-expander-tailwind-blue-dark, .jqx-expander-material, .jqx-expander-material-dark, .jqx-expander-material-purple, .jqx-expander-material-purple-dark, .jqx-expander-material-green, .jqx-expander-material-green-dark)) > .jqx-expander-content {
    border-radius: 0 0 8px 8px;
}

/* The splitter: its bar a quiet line, its collapse button a small grey grip that turns the accent
   under the pointer (it was a block of the accent's tint). */
:where(.jqx-splitter:is(.jqx-splitter-base, .jqx-splitter-light, .jqx-splitter-dark, .jqx-splitter-fluent, .jqx-splitter-fluent-dark, .jqx-splitter-tailwind, .jqx-splitter-tailwind-blue, .jqx-splitter-tailwind-dark, .jqx-splitter-tailwind-blue-dark, .jqx-splitter-material, .jqx-splitter-material-dark, .jqx-splitter-material-purple, .jqx-splitter-material-purple-dark, .jqx-splitter-material-green, .jqx-splitter-material-green-dark)) .jqx-splitter-splitbar-vertical.jqx-fill-state-normal,
:where(.jqx-splitter:is(.jqx-splitter-base, .jqx-splitter-light, .jqx-splitter-dark, .jqx-splitter-fluent, .jqx-splitter-fluent-dark, .jqx-splitter-tailwind, .jqx-splitter-tailwind-blue, .jqx-splitter-tailwind-dark, .jqx-splitter-tailwind-blue-dark, .jqx-splitter-material, .jqx-splitter-material-dark, .jqx-splitter-material-purple, .jqx-splitter-material-purple-dark, .jqx-splitter-material-green, .jqx-splitter-material-green-dark)) .jqx-splitter-splitbar-horizontal.jqx-fill-state-normal {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

:where(.jqx-splitter:is(.jqx-splitter-base, .jqx-splitter-light, .jqx-splitter-dark, .jqx-splitter-fluent, .jqx-splitter-fluent-dark, .jqx-splitter-tailwind, .jqx-splitter-tailwind-blue, .jqx-splitter-tailwind-dark, .jqx-splitter-tailwind-blue-dark, .jqx-splitter-material, .jqx-splitter-material-dark, .jqx-splitter-material-purple, .jqx-splitter-material-purple-dark, .jqx-splitter-material-green, .jqx-splitter-material-green-dark)) :is(.jqx-splitter-collapse-button-vertical, .jqx-splitter-collapse-button-horizontal).jqx-fill-state-pressed {
    background: color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 2px;
}

:where(.jqx-splitter:is(.jqx-splitter-base, .jqx-splitter-light, .jqx-splitter-dark, .jqx-splitter-fluent, .jqx-splitter-fluent-dark, .jqx-splitter-tailwind, .jqx-splitter-tailwind-blue, .jqx-splitter-tailwind-dark, .jqx-splitter-tailwind-blue-dark, .jqx-splitter-material, .jqx-splitter-material-dark, .jqx-splitter-material-purple, .jqx-splitter-material-purple-dark, .jqx-splitter-material-green, .jqx-splitter-material-green-dark)) :is(.jqx-splitter-collapse-button-vertical, .jqx-splitter-collapse-button-horizontal).jqx-fill-state-pressed:hover {
    background: var(--jqx-primary, #005c99);
}

/* The smaller widgets, modern (2026).
   jqxRating: vector stars in place of the glossy images - filled in amber (3.2:1 on white, 5.5:1 on
   the dark themes), the empty ones an outline (3.4:1 on white, 4.5:1 on dark; the dark theme's pale
   empty stars read as filled before, so 3 looked like 5). The widget takes its images from these
   classes' background, so this is all it needs. */
.jqx-rating-image-default.jqx-rating-image-default-base,
.jqx-rating-image-default.jqx-rating-image-default-light,
.jqx-rating-image-default.jqx-rating-image-default-dark,
.jqx-rating-image-default.jqx-rating-image-default-material,
.jqx-rating-image-default.jqx-rating-image-default-material-dark,
.jqx-rating-image-default.jqx-rating-image-default-material-purple,
.jqx-rating-image-default.jqx-rating-image-default-material-purple-dark,
.jqx-rating-image-default.jqx-rating-image-default-material-green,
.jqx-rating-image-default.jqx-rating-image-default-material-green-dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.2l2.4 4.9 5.4.8-3.9 3.8.9 5.4L10 14.6l-4.8 2.5.9-5.4-3.9-3.8 5.4-.8z' fill='%23d97706' stroke='%23d97706' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-rating-image-hover.jqx-rating-image-hover-base,
.jqx-rating-image-hover.jqx-rating-image-hover-light,
.jqx-rating-image-hover.jqx-rating-image-hover-dark,
.jqx-rating-image-hover.jqx-rating-image-hover-material,
.jqx-rating-image-hover.jqx-rating-image-hover-material-dark,
.jqx-rating-image-hover.jqx-rating-image-hover-material-purple,
.jqx-rating-image-hover.jqx-rating-image-hover-material-purple-dark,
.jqx-rating-image-hover.jqx-rating-image-hover-material-green,
.jqx-rating-image-hover.jqx-rating-image-hover-material-green-dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.2l2.4 4.9 5.4.8-3.9 3.8.9 5.4L10 14.6l-4.8 2.5.9-5.4-3.9-3.8 5.4-.8z' fill='%23f59e0b' stroke='%23b45309' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-rating-image-backward.jqx-rating-image-backward-base,
.jqx-rating-image-backward.jqx-rating-image-backward-light,
.jqx-rating-image-backward.jqx-rating-image-backward-dark,
.jqx-rating-image-backward.jqx-rating-image-backward-material,
.jqx-rating-image-backward.jqx-rating-image-backward-material-dark,
.jqx-rating-image-backward.jqx-rating-image-backward-material-purple,
.jqx-rating-image-backward.jqx-rating-image-backward-material-purple-dark,
.jqx-rating-image-backward.jqx-rating-image-backward-material-green,
.jqx-rating-image-backward.jqx-rating-image-backward-material-green-dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.2l2.4 4.9 5.4.8-3.9 3.8.9 5.4L10 14.6l-4.8 2.5.9-5.4-3.9-3.8 5.4-.8z' fill='none' stroke='%238a8a8a' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* jqxSlider: the ticks quieter than the track and the thumb (they only mark the steps) */
:where(.jqx-slider:is(.jqx-slider-base, .jqx-slider-light, .jqx-slider-dark, .jqx-slider-fluent, .jqx-slider-fluent-dark, .jqx-slider-tailwind, .jqx-slider-tailwind-blue, .jqx-slider-tailwind-dark, .jqx-slider-tailwind-blue-dark, .jqx-slider-material, .jqx-slider-material-dark, .jqx-slider-material-purple, .jqx-slider-material-purple-dark, .jqx-slider-material-green, .jqx-slider-material-green-dark)) .jqx-slider-tickscontainer {
    opacity: 0.45;
}

/* jqxProgressBar: rounded, the bar inside following the corners */
:where(.jqx-progressbar:is(.jqx-progressbar-base, .jqx-progressbar-light, .jqx-progressbar-dark, .jqx-progressbar-fluent, .jqx-progressbar-fluent-dark, .jqx-progressbar-tailwind, .jqx-progressbar-tailwind-blue, .jqx-progressbar-tailwind-dark, .jqx-progressbar-tailwind-blue-dark, .jqx-progressbar-material, .jqx-progressbar-material-dark, .jqx-progressbar-material-purple, .jqx-progressbar-material-purple-dark, .jqx-progressbar-material-green, .jqx-progressbar-material-green-dark)).jqx-progressbar {
    border-radius: 6px;
    overflow: hidden;
}

/* jqxListBox, base theme: the selected item a tint of the accent with an accent bar at its start
   (3:1 against the item, which marks the state); no box round it; a plain tint under the pointer */
.jqx-listitem-state-selected.jqx-listitem-state-selected-base.jqx-fill-state-pressed {
    background: rgba(0, 92, 153, 0.1);
    border-color: transparent;
    box-shadow: inset 3px 0 0 #005c99;
    color: #1f1f1f;
}

.jqx-listitem-state-hover.jqx-listitem-state-hover-base {
    background: #f2f2f2;
    border-color: transparent;
}

/* jqxColorPicker: its fields rounded, their text off the edge (sizes unchanged) */
:where(.jqx-color-picker:is(.jqx-color-picker-base, .jqx-color-picker-light, .jqx-color-picker-dark, .jqx-color-picker-fluent, .jqx-color-picker-fluent-dark, .jqx-color-picker-tailwind, .jqx-color-picker-tailwind-blue, .jqx-color-picker-tailwind-dark, .jqx-color-picker-tailwind-blue-dark, .jqx-color-picker-material, .jqx-color-picker-material-dark, .jqx-color-picker-material-purple, .jqx-color-picker-material-purple-dark, .jqx-color-picker-material-green, .jqx-color-picker-material-green-dark)) input.jqx-input {
    border-radius: 4px;
    text-indent: 3px;
}

/* jqxTimePicker: the time on the widget's own colour, no grey band */
:where(.jqx-time-picker:is(.jqx-time-picker-base, .jqx-time-picker-light, .jqx-time-picker-dark, .jqx-time-picker-fluent, .jqx-time-picker-fluent-dark, .jqx-time-picker-tailwind, .jqx-time-picker-tailwind-blue, .jqx-time-picker-tailwind-dark, .jqx-time-picker-tailwind-blue-dark, .jqx-time-picker-material, .jqx-time-picker-material-dark, .jqx-time-picker-material-purple, .jqx-time-picker-material-purple-dark, .jqx-time-picker-material-green, .jqx-time-picker-material-green-dark)) .jqx-header.jqx-widget-header {
    background: transparent;
}

/* jqxFileUpload: a drop area - a dashed, rounded frame round the button and the files */
:where(.jqx-file-upload:is(.jqx-file-upload-base, .jqx-file-upload-light, .jqx-file-upload-dark, .jqx-file-upload-fluent, .jqx-file-upload-fluent-dark, .jqx-file-upload-tailwind, .jqx-file-upload-tailwind-blue, .jqx-file-upload-tailwind-dark, .jqx-file-upload-tailwind-blue-dark, .jqx-file-upload-material, .jqx-file-upload-material-dark, .jqx-file-upload-material-purple, .jqx-file-upload-material-purple-dark, .jqx-file-upload-material-green, .jqx-file-upload-material-green-dark)).jqx-file-upload.jqx-widget-content {
    border-style: dashed;
    border-radius: 8px;
}

/* jqxForm: the fields on the page's colour, not on a grey panel; a light, rounded frame */
:where(.jqx-form:is(.jqx-form-base, .jqx-form-light, .jqx-form-dark, .jqx-form-fluent, .jqx-form-fluent-dark, .jqx-form-tailwind, .jqx-form-tailwind-blue, .jqx-form-tailwind-dark, .jqx-form-tailwind-blue-dark, .jqx-form-material, .jqx-form-material-dark, .jqx-form-material-purple, .jqx-form-material-purple-dark, .jqx-form-material-green, .jqx-form-material-green-dark)) .jqx-form-table.jqx-form-table {
    background: transparent;
    border-color: color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 8px;
}

/* The calendar icon: the base theme's line icon (2026) in light, dark and the material family, in the text colour (the
   icon font's filled grid looked unlike every other icon) */
:is(.jqx-icon-calendar-light, .jqx-icon-calendar-hover-light, .jqx-icon-calendar-pressed-light, .jqx-icon-calendar-dark, .jqx-icon-calendar-hover-dark, .jqx-icon-calendar-pressed-dark, .jqx-icon-calendar-material, .jqx-icon-calendar-hover-material, .jqx-icon-calendar-pressed-material, .jqx-icon-calendar-material-dark, .jqx-icon-calendar-hover-material-dark, .jqx-icon-calendar-pressed-material-dark, .jqx-icon-calendar-material-purple, .jqx-icon-calendar-hover-material-purple, .jqx-icon-calendar-pressed-material-purple, .jqx-icon-calendar-material-purple-dark, .jqx-icon-calendar-hover-material-purple-dark, .jqx-icon-calendar-pressed-material-purple-dark, .jqx-icon-calendar-material-green, .jqx-icon-calendar-hover-material-green, .jqx-icon-calendar-pressed-material-green, .jqx-icon-calendar-material-green-dark, .jqx-icon-calendar-hover-material-green-dark, .jqx-icon-calendar-pressed-material-green-dark):is(.jqx-icon-calendar-light, .jqx-icon-calendar-hover-light, .jqx-icon-calendar-pressed-light, .jqx-icon-calendar-dark, .jqx-icon-calendar-hover-dark, .jqx-icon-calendar-pressed-dark, .jqx-icon-calendar-material, .jqx-icon-calendar-hover-material, .jqx-icon-calendar-pressed-material, .jqx-icon-calendar-material-dark, .jqx-icon-calendar-hover-material-dark, .jqx-icon-calendar-pressed-material-dark, .jqx-icon-calendar-material-purple, .jqx-icon-calendar-hover-material-purple, .jqx-icon-calendar-pressed-material-purple, .jqx-icon-calendar-material-purple-dark, .jqx-icon-calendar-hover-material-purple-dark, .jqx-icon-calendar-pressed-material-purple-dark, .jqx-icon-calendar-material-green, .jqx-icon-calendar-hover-material-green, .jqx-icon-calendar-pressed-material-green, .jqx-icon-calendar-material-green-dark, .jqx-icon-calendar-hover-material-green-dark, .jqx-icon-calendar-pressed-material-green-dark)::after {
    content: "";
    width: 14px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15'%3E%3Crect x='1.5' y='2.5' width='11' height='11' rx='1.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M1.5 6h11M4.5 1v3M9.5 1v3' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 15px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15'%3E%3Crect x='1.5' y='2.5' width='11' height='11' rx='1.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M1.5 6h11M4.5 1v3M9.5 1v3' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 15px no-repeat;
    opacity: 0.85;
}

/* The loading box of jqxGrid, jqxDataTable and jqxScheduler (2026), in base, light, dark and the
   design-system themes: a raised card in the theme's font and colours, sized to its text, with a
   ring in the accent (it was a fixed 100px grey box in Verdana with a GIF) */
.jqx-grid-load-box.jqx-grid-load-box:is(.jqx-fill-state-normal-base, .jqx-fill-state-normal-light, .jqx-fill-state-normal-dark, .jqx-fill-state-normal-fluent, .jqx-fill-state-normal-fluent-dark, .jqx-fill-state-normal-tailwind, .jqx-fill-state-normal-tailwind-blue, .jqx-fill-state-normal-tailwind-dark, .jqx-fill-state-normal-tailwind-blue-dark, .jqx-fill-state-normal-material, .jqx-fill-state-normal-material-dark, .jqx-fill-state-normal-material-purple, .jqx-fill-state-normal-material-purple-dark, .jqx-fill-state-normal-material-green, .jqx-fill-state-normal-material-green-dark) {
    display: inline-flex;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 16px;
    translate: -50% -50%;
    white-space: nowrap;
    font: inherit;
    font-size: 13px;
    color: var(--jqx-background-color, #1f1f1f);
    background: var(--jqx-background, #fff);
    border: 1px solid var(--jqx-border, #c5c5c5);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.jqx-grid-load-box.jqx-grid-load-box:is(.jqx-fill-state-normal-dark, .jqx-fill-state-normal-fluent-dark, .jqx-fill-state-normal-tailwind-dark, .jqx-fill-state-normal-tailwind-blue-dark, .jqx-fill-state-normal-material-dark, .jqx-fill-state-normal-material-purple-dark, .jqx-fill-state-normal-material-green-dark) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.jqx-grid-load-box.jqx-grid-load-box:is(.jqx-fill-state-normal-base, .jqx-fill-state-normal-light, .jqx-fill-state-normal-dark, .jqx-fill-state-normal-fluent, .jqx-fill-state-normal-fluent-dark, .jqx-fill-state-normal-tailwind, .jqx-fill-state-normal-tailwind-blue, .jqx-fill-state-normal-tailwind-dark, .jqx-fill-state-normal-tailwind-blue-dark, .jqx-fill-state-normal-material, .jqx-fill-state-normal-material-dark, .jqx-fill-state-normal-material-purple, .jqx-fill-state-normal-material-purple-dark, .jqx-fill-state-normal-material-green, .jqx-fill-state-normal-material-green-dark) .jqx-grid-load-row {
    display: flex;
    align-items: center;
    gap: 10px;
    float: none;
}

.jqx-grid-load-box.jqx-grid-load-box:is(.jqx-fill-state-normal-base, .jqx-fill-state-normal-light, .jqx-fill-state-normal-dark, .jqx-fill-state-normal-fluent, .jqx-fill-state-normal-fluent-dark, .jqx-fill-state-normal-tailwind, .jqx-fill-state-normal-tailwind-blue, .jqx-fill-state-normal-tailwind-dark, .jqx-fill-state-normal-tailwind-blue-dark, .jqx-fill-state-normal-material, .jqx-fill-state-normal-material-dark, .jqx-fill-state-normal-material-purple, .jqx-fill-state-normal-material-purple-dark, .jqx-fill-state-normal-material-green, .jqx-fill-state-normal-material-green-dark) .jqx-grid-load-icon-wrapper.jqx-grid-load {
    float: none;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    background-image: none;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--jqx-primary, #005c99) 20%, transparent);
    border-top-color: var(--jqx-primary, #005c99);
    animation: jqx-modern-spin 0.8s linear infinite;
}

.jqx-grid-load-box.jqx-grid-load-box.jqx-fill-state-normal-base .jqx-grid-load-icon-wrapper.jqx-grid-load {
    border-color: color-mix(in srgb, #005c99 20%, transparent);
    border-top-color: #005c99;
}

.jqx-grid-load-box.jqx-grid-load-box:is(.jqx-fill-state-normal-base, .jqx-fill-state-normal-light, .jqx-fill-state-normal-dark, .jqx-fill-state-normal-fluent, .jqx-fill-state-normal-fluent-dark, .jqx-fill-state-normal-tailwind, .jqx-fill-state-normal-tailwind-blue, .jqx-fill-state-normal-tailwind-dark, .jqx-fill-state-normal-tailwind-blue-dark, .jqx-fill-state-normal-material, .jqx-fill-state-normal-material-dark, .jqx-fill-state-normal-material-purple, .jqx-fill-state-normal-material-purple-dark, .jqx-fill-state-normal-material-green, .jqx-fill-state-normal-material-green-dark) .jqx-grid-load-text {
    float: none;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .jqx-grid-load-box.jqx-grid-load-box:is(.jqx-fill-state-normal-base, .jqx-fill-state-normal-light, .jqx-fill-state-normal-dark, .jqx-fill-state-normal-fluent, .jqx-fill-state-normal-fluent-dark, .jqx-fill-state-normal-tailwind, .jqx-fill-state-normal-tailwind-blue, .jqx-fill-state-normal-tailwind-dark, .jqx-fill-state-normal-tailwind-blue-dark, .jqx-fill-state-normal-material, .jqx-fill-state-normal-material-dark, .jqx-fill-state-normal-material-purple, .jqx-fill-state-normal-material-purple-dark, .jqx-fill-state-normal-material-green, .jqx-fill-state-normal-material-green-dark) .jqx-grid-load-icon-wrapper.jqx-grid-load {
        animation-duration: 1.6s;
    }
}

/* jqxChart text in the theme's font (it was Verdana in every theme); the sizes are unchanged and
   the chart measures its text in the same font, so the layout follows */
.jqx-chart-axis-text:is(.jqx-chart-axis-text-base, .jqx-chart-axis-text-light, .jqx-chart-axis-text-dark, .jqx-chart-axis-text-fluent, .jqx-chart-axis-text-fluent-dark, .jqx-chart-axis-text-tailwind, .jqx-chart-axis-text-tailwind-blue, .jqx-chart-axis-text-tailwind-dark, .jqx-chart-axis-text-tailwind-blue-dark, .jqx-chart-axis-text-material, .jqx-chart-axis-text-material-dark, .jqx-chart-axis-text-material-purple, .jqx-chart-axis-text-material-purple-dark, .jqx-chart-axis-text-material-green, .jqx-chart-axis-text-material-green-dark),
.jqx-chart-label-text:is(.jqx-chart-label-text-base, .jqx-chart-label-text-light, .jqx-chart-label-text-dark, .jqx-chart-label-text-fluent, .jqx-chart-label-text-fluent-dark, .jqx-chart-label-text-tailwind, .jqx-chart-label-text-tailwind-blue, .jqx-chart-label-text-tailwind-dark, .jqx-chart-label-text-tailwind-blue-dark, .jqx-chart-label-text-material, .jqx-chart-label-text-material-dark, .jqx-chart-label-text-material-purple, .jqx-chart-label-text-material-purple-dark, .jqx-chart-label-text-material-green, .jqx-chart-label-text-material-green-dark),
.jqx-chart-tooltip-text:is(.jqx-chart-tooltip-text-base, .jqx-chart-tooltip-text-light, .jqx-chart-tooltip-text-dark, .jqx-chart-tooltip-text-fluent, .jqx-chart-tooltip-text-fluent-dark, .jqx-chart-tooltip-text-tailwind, .jqx-chart-tooltip-text-tailwind-blue, .jqx-chart-tooltip-text-tailwind-dark, .jqx-chart-tooltip-text-tailwind-blue-dark, .jqx-chart-tooltip-text-material, .jqx-chart-tooltip-text-material-dark, .jqx-chart-tooltip-text-material-purple, .jqx-chart-tooltip-text-material-purple-dark, .jqx-chart-tooltip-text-material-green, .jqx-chart-tooltip-text-material-green-dark),
.jqx-chart-legend-text:is(.jqx-chart-legend-text-base, .jqx-chart-legend-text-light, .jqx-chart-legend-text-dark, .jqx-chart-legend-text-fluent, .jqx-chart-legend-text-fluent-dark, .jqx-chart-legend-text-tailwind, .jqx-chart-legend-text-tailwind-blue, .jqx-chart-legend-text-tailwind-dark, .jqx-chart-legend-text-tailwind-blue-dark, .jqx-chart-legend-text-material, .jqx-chart-legend-text-material-dark, .jqx-chart-legend-text-material-purple, .jqx-chart-legend-text-material-purple-dark, .jqx-chart-legend-text-material-green, .jqx-chart-legend-text-material-green-dark),
.jqx-chart-axis-description:is(.jqx-chart-axis-description-base, .jqx-chart-axis-description-light, .jqx-chart-axis-description-dark, .jqx-chart-axis-description-fluent, .jqx-chart-axis-description-fluent-dark, .jqx-chart-axis-description-tailwind, .jqx-chart-axis-description-tailwind-blue, .jqx-chart-axis-description-tailwind-dark, .jqx-chart-axis-description-tailwind-blue-dark, .jqx-chart-axis-description-material, .jqx-chart-axis-description-material-dark, .jqx-chart-axis-description-material-purple, .jqx-chart-axis-description-material-purple-dark, .jqx-chart-axis-description-material-green, .jqx-chart-axis-description-material-green-dark),
.jqx-chart-title-text:is(.jqx-chart-title-text-base, .jqx-chart-title-text-light, .jqx-chart-title-text-dark, .jqx-chart-title-text-fluent, .jqx-chart-title-text-fluent-dark, .jqx-chart-title-text-tailwind, .jqx-chart-title-text-tailwind-blue, .jqx-chart-title-text-tailwind-dark, .jqx-chart-title-text-tailwind-blue-dark, .jqx-chart-title-text-material, .jqx-chart-title-text-material-dark, .jqx-chart-title-text-material-purple, .jqx-chart-title-text-material-purple-dark, .jqx-chart-title-text-material-green, .jqx-chart-title-text-material-green-dark),
.jqx-chart-title-description:is(.jqx-chart-title-description-base, .jqx-chart-title-description-light, .jqx-chart-title-description-dark, .jqx-chart-title-description-fluent, .jqx-chart-title-description-fluent-dark, .jqx-chart-title-description-tailwind, .jqx-chart-title-description-tailwind-blue, .jqx-chart-title-description-tailwind-dark, .jqx-chart-title-description-tailwind-blue-dark, .jqx-chart-title-description-material, .jqx-chart-title-description-material-dark, .jqx-chart-title-description-material-purple, .jqx-chart-title-description-material-purple-dark, .jqx-chart-title-description-material-green, .jqx-chart-title-description-material-green-dark) {
    font-family: var(--jqx-font-family);
}

/* The minimized menu's button (jqxMenu, jqxResponsivePanel) in the modern themes: three lines in the
   text colour, drawn on ::before so the item's hover background stays whole (it was a heavy black
   PNG, also on the dark themes) */
.jqx-menu-minimized-button.jqx-menu-minimized-button:is(.jqx-menu-minimized-button-base, .jqx-menu-minimized-button-light, .jqx-menu-minimized-button-dark, .jqx-menu-minimized-button-fluent, .jqx-menu-minimized-button-fluent-dark, .jqx-menu-minimized-button-tailwind, .jqx-menu-minimized-button-tailwind-blue, .jqx-menu-minimized-button-tailwind-dark, .jqx-menu-minimized-button-tailwind-blue-dark, .jqx-menu-minimized-button-material, .jqx-menu-minimized-button-material-dark, .jqx-menu-minimized-button-material-purple, .jqx-menu-minimized-button-material-purple-dark, .jqx-menu-minimized-button-material-green, .jqx-menu-minimized-button-material-green-dark) {
    background-image: none;
    position: relative;
}

.jqx-menu-minimized-button.jqx-menu-minimized-button:is(.jqx-menu-minimized-button-base, .jqx-menu-minimized-button-light, .jqx-menu-minimized-button-dark, .jqx-menu-minimized-button-fluent, .jqx-menu-minimized-button-fluent-dark, .jqx-menu-minimized-button-tailwind, .jqx-menu-minimized-button-tailwind-blue, .jqx-menu-minimized-button-tailwind-dark, .jqx-menu-minimized-button-tailwind-blue-dark, .jqx-menu-minimized-button-material, .jqx-menu-minimized-button-material-dark, .jqx-menu-minimized-button-material-purple, .jqx-menu-minimized-button-material-purple-dark, .jqx-menu-minimized-button-material-green, .jqx-menu-minimized-button-material-green-dark)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

/* The base theme's check boxes and radio buttons: a ring round the box while it has keyboard focus
   (radios showed none, check boxes only a coloured border) */
.jqx-checkbox.jqx-checkbox-base:focus-visible,
.jqx-radiobutton.jqx-radiobutton-base:focus-visible {
    outline: none;
}

.jqx-checkbox.jqx-checkbox-base:focus-visible > .jqx-checkbox-default,
.jqx-radiobutton.jqx-radiobutton-base:focus-visible > .jqx-radiobutton-default {
    outline: 2px solid #005c99;
    outline-offset: 2px;
}

/* Keyboard focus in base, light, material and fluent (2026), as dark, material-dark, fluent-dark
   and the tailwind themes have it: a 2px ring in the accent wherever an element had no focus style
   of its own (it fell back to the browser's black ring). :focus-visible, so a click does not draw
   it. The rule weighs two classes: more than a widget's bare outline: none (.jqx-tree, .jqx-tabs),
   less than its own focus style (.jqx-button.jqx-button-base:focus-visible). The ring sits just
   outside the theme's elements (inset, the children's backgrounds covered it - the tabs, the grid)
   and inset on unclassed inner ones (list items). Text fields keep their widgets' focus border.
   Theme suffixes are matched whole (-light, not ui-lightness). */
:where(:is([class*="-base "], [class$="-base"]))[class*="jqx-"]:focus-visible:not(input):not(textarea) {
    outline: 2px solid #005c99;
    outline-offset: 1px;
}

:where(:is([class*="-base "], [class$="-base"])[class*="jqx-"]) :focus-visible:not(input):not(textarea):not([class*="jqx-"]) {
    outline: 2px solid #005c99;
    outline-offset: -2px;
}

:where(:is([class*="-light "], [class$="-light"], [class*="-material "], [class$="-material"], [class*="-material-purple "], [class$="-material-purple"], [class*="-material-green "], [class$="-material-green"]))[class*="jqx-"]:focus-visible:not(input):not(textarea) {
    outline: 2px solid var(--jqx-primary);
    outline-offset: 1px;
}

:where(:is([class*="-light "], [class$="-light"], [class*="-material "], [class$="-material"], [class*="-material-purple "], [class$="-material-purple"], [class*="-material-green "], [class$="-material-green"])[class*="jqx-"]) :focus-visible:not(input):not(textarea):not([class*="jqx-"]) {
    outline: 2px solid var(--jqx-primary);
    outline-offset: -2px;
}

:where(:is([class*="-fluent "], [class$="-fluent"]))[class*="jqx-"]:focus-visible:not(input):not(textarea) {
    outline: 2px solid #0078d4;
    outline-offset: 1px;
}

:where(:is([class*="-fluent "], [class$="-fluent"])[class*="jqx-"]) :focus-visible:not(input):not(textarea):not([class*="jqx-"]) {
    outline: 2px solid #0078d4;
    outline-offset: -2px;
}

/* the base theme's fields draw their own focus ring (an accent border and a halo, :focus-within) */
:is(.jqx-input-base, .jqx-text-area-base, .jqx-dropdownlist-state-normal-base, .jqx-combobox-state-normal-base).jqx-widget:focus-visible {
    outline: none;
}

/* jqxGrid takes focus on an inner wrapper inside two overflow: hidden parents, so no theme's ring
   could show: it is drawn round the grid (the browser's ring in the classic themes) */
.jqx-grid:has(> * > .jqx-clear:focus-visible) {
    outline: auto 2px;
    outline-offset: 1px;
}

.jqx-grid.jqx-grid-base:has(> * > .jqx-clear:focus-visible) {
    outline: 2px solid #005c99;
}

.jqx-grid:is(.jqx-grid-light, .jqx-grid-dark, .jqx-grid-material, .jqx-grid-material-dark, .jqx-grid-material-purple, .jqx-grid-material-purple-dark, .jqx-grid-material-green, .jqx-grid-material-green-dark, .jqx-grid-fluent-dark):has(> * > .jqx-clear:focus-visible) {
    outline: 2px solid var(--jqx-primary);
}

.jqx-grid.jqx-grid-fluent:has(> * > .jqx-clear:focus-visible) {
    outline: 2px solid #0078d4;
}

.jqx-grid:is(.jqx-grid-tailwind,.jqx-grid-tailwind-blue, .jqx-grid-tailwind-dark, .jqx-grid-tailwind-blue-dark):has(> * > .jqx-clear:focus-visible) {
    outline: 2px solid var(--tailwind-accent);
}

/* Disabled, in base and the design-system themes (2026): the text keeps the theme's colour and the
   dimming alone marks the state (.jqx-fill-state-disabled made it black - unreadable on the dark
   themes: the dark list box's items), and a disabled part of a disabled widget is not dimmed again
   (the calendar's dates were at 0.55 x 0.55). A theme's own disabled colours still win. */
.jqx-fill-state-disabled.jqx-fill-state-disabled:where(.jqx-fill-state-disabled-base, .jqx-fill-state-disabled-light, .jqx-fill-state-disabled-dark, .jqx-fill-state-disabled-fluent, .jqx-fill-state-disabled-fluent-dark, .jqx-fill-state-disabled-tailwind, .jqx-fill-state-disabled-tailwind-blue, .jqx-fill-state-disabled-tailwind-dark, .jqx-fill-state-disabled-tailwind-blue-dark, .jqx-fill-state-disabled-material, .jqx-fill-state-disabled-material-dark, .jqx-fill-state-disabled-material-purple, .jqx-fill-state-disabled-material-purple-dark, .jqx-fill-state-disabled-material-green, .jqx-fill-state-disabled-material-green-dark),
:where(.jqx-widget:is(.jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark)) .jqx-fill-state-disabled.jqx-fill-state-disabled {
    color: inherit;
}

:where(.jqx-fill-state-disabled:is(.jqx-fill-state-disabled-base, .jqx-fill-state-disabled-light, .jqx-fill-state-disabled-dark, .jqx-fill-state-disabled-fluent, .jqx-fill-state-disabled-fluent-dark, .jqx-fill-state-disabled-tailwind, .jqx-fill-state-disabled-tailwind-blue, .jqx-fill-state-disabled-tailwind-dark, .jqx-fill-state-disabled-tailwind-blue-dark, .jqx-fill-state-disabled-material, .jqx-fill-state-disabled-material-dark, .jqx-fill-state-disabled-material-purple, .jqx-fill-state-disabled-material-purple-dark, .jqx-fill-state-disabled-material-green, .jqx-fill-state-disabled-material-green-dark)) .jqx-fill-state-disabled.jqx-fill-state-disabled {
    opacity: 1;
}

/* The drop-down family (2026), in base, light, dark and the material family: the pop-ups of jqxDropDownList,
   jqxComboBox and jqxDropDownButton rounded, lifted 4px off the field on a soft shadow, with a quiet
   border (it was the accent, square, flush with the field), the field keeping its corners while open;
   their items rounded and inset; the combo box's arrow a plain chevron like the drop-down list's (it
   sat on a filled block behind a divider); multi-select tokens as pills; the drop-down button's
   content centred (it sat at the top). Sizes are unchanged. The list's container clips only the edge
   the list slides in from, so the shadow shows. */
.jqx-listbox-container:is(.jqx-listbox-container-base, .jqx-listbox-container-light, .jqx-listbox-container-dark, .jqx-listbox-container-material, .jqx-listbox-container-material-dark, .jqx-listbox-container-material-purple, .jqx-listbox-container-material-purple-dark, .jqx-listbox-container-material-green, .jqx-listbox-container-material-green-dark):not(.jqx-dropdownbutton-popup) > .jqx-listbox,
.jqx-dropdownbutton-popup:is(.jqx-dropdownbutton-popup-base, .jqx-dropdownbutton-popup-light, .jqx-dropdownbutton-popup-dark, .jqx-dropdownbutton-popup-material, .jqx-dropdownbutton-popup-material-dark, .jqx-dropdownbutton-popup-material-purple, .jqx-dropdownbutton-popup-material-purple-dark, .jqx-dropdownbutton-popup-material-green, .jqx-dropdownbutton-popup-material-green-dark) {
    border-radius: 8px !important;
    border-color: var(--jqx-border, #c5c5c5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.jqx-listbox-container:is(.jqx-listbox-container-dark, .jqx-listbox-container-material-dark, .jqx-listbox-container-material-purple-dark, .jqx-listbox-container-material-green-dark):not(.jqx-dropdownbutton-popup) > .jqx-listbox,
.jqx-dropdownbutton-popup:is(.jqx-dropdownbutton-popup-dark, .jqx-dropdownbutton-popup-material-dark, .jqx-dropdownbutton-popup-material-purple-dark, .jqx-dropdownbutton-popup-material-green-dark) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.jqx-listbox-container.jqx-listbox-container-base:not(.jqx-dropdownbutton-popup) > .jqx-listbox,
.jqx-dropdownbutton-popup.jqx-dropdownbutton-popup-base {
    border-color: #c5c5c5;
}

.jqx-listbox-container:is(.jqx-listbox-container-base, .jqx-listbox-container-light, .jqx-listbox-container-dark, .jqx-listbox-container-material, .jqx-listbox-container-material-dark, .jqx-listbox-container-material-purple, .jqx-listbox-container-material-purple-dark, .jqx-listbox-container-material-green, .jqx-listbox-container-material-green-dark):not(.jqx-dropdownbutton-popup) > .jqx-listbox {
    translate: 0 4px;
}

.jqx-listbox-container:is(.jqx-listbox-container-base, .jqx-listbox-container-light, .jqx-listbox-container-dark, .jqx-listbox-container-material, .jqx-listbox-container-material-dark, .jqx-listbox-container-material-purple, .jqx-listbox-container-material-purple-dark, .jqx-listbox-container-material-green, .jqx-listbox-container-material-green-dark):not(.jqx-dropdownbutton-popup).jqx-popup-up > .jqx-listbox {
    translate: 0 -4px;
}

.jqx-dropdownbutton-popup:is(.jqx-dropdownbutton-popup-base, .jqx-dropdownbutton-popup-light, .jqx-dropdownbutton-popup-dark, .jqx-dropdownbutton-popup-material, .jqx-dropdownbutton-popup-material-dark, .jqx-dropdownbutton-popup-material-purple, .jqx-dropdownbutton-popup-material-purple-dark, .jqx-dropdownbutton-popup-material-green, .jqx-dropdownbutton-popup-material-green-dark) {
    margin-top: 4px;
}

.jqx-dropdownbutton-popup:is(.jqx-dropdownbutton-popup-base, .jqx-dropdownbutton-popup-light, .jqx-dropdownbutton-popup-dark, .jqx-dropdownbutton-popup-material, .jqx-dropdownbutton-popup-material-dark, .jqx-dropdownbutton-popup-material-purple, .jqx-dropdownbutton-popup-material-purple-dark, .jqx-dropdownbutton-popup-material-green, .jqx-dropdownbutton-popup-material-green-dark).jqx-popup-up {
    margin-top: -4px;
}

.jqx-listbox-container:is(.jqx-listbox-container-base, .jqx-listbox-container-light, .jqx-listbox-container-dark, .jqx-listbox-container-material, .jqx-listbox-container-material-dark, .jqx-listbox-container-material-purple, .jqx-listbox-container-material-purple-dark, .jqx-listbox-container-material-green, .jqx-listbox-container-material-green-dark):not(.jqx-dropdownbutton-popup) {
    overflow: visible !important;
    clip-path: inset(0 -40px -40px -40px);
}

.jqx-listbox-container:is(.jqx-listbox-container-base, .jqx-listbox-container-light, .jqx-listbox-container-dark, .jqx-listbox-container-material, .jqx-listbox-container-material-dark, .jqx-listbox-container-material-purple, .jqx-listbox-container-material-purple-dark, .jqx-listbox-container-material-green, .jqx-listbox-container-material-green-dark):not(.jqx-dropdownbutton-popup).jqx-popup-up {
    clip-path: inset(-40px -40px 0 -40px);
}

:is(.jqx-dropdownlist-state-normal-base, .jqx-combobox-state-normal-base, .jqx-dropdownbutton-base).jqx-rc-b-expanded {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

:is(.jqx-dropdownlist-state-normal-base, .jqx-combobox-state-normal-base, .jqx-dropdownbutton-base).jqx-rc-t-expanded {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}

:is(.jqx-dropdownlist-state-normal-light, .jqx-combobox-state-normal-light, .jqx-dropdownbutton-light).jqx-rc-b-expanded {
    border-bottom-left-radius: var(--jqx-border-radius, 4px) !important;
    border-bottom-right-radius: var(--jqx-border-radius, 4px) !important;
}

:is(.jqx-dropdownlist-state-normal-light, .jqx-combobox-state-normal-light, .jqx-dropdownbutton-light).jqx-rc-t-expanded {
    border-top-left-radius: var(--jqx-border-radius, 4px) !important;
    border-top-right-radius: var(--jqx-border-radius, 4px) !important;
}

.jqx-listbox-container:is(.jqx-listbox-container-base, .jqx-listbox-container-light, .jqx-listbox-container-dark, .jqx-listbox-container-material, .jqx-listbox-container-material-dark, .jqx-listbox-container-material-purple, .jqx-listbox-container-material-purple-dark, .jqx-listbox-container-material-green, .jqx-listbox-container-material-green-dark):not(.jqx-dropdownbutton-popup) > .jqx-listbox :is(.jqx-listitem-state-normal, .jqx-listitem-state-hover, .jqx-listitem-state-selected) {
    border-radius: 6px;
    margin-left: 4px;
}

.jqx-combobox :is(.jqx-combobox-arrow-normal, .jqx-combobox-arrow-hover, .jqx-combobox-arrow-selected):is(.jqx-combobox-arrow-normal-base, .jqx-combobox-arrow-hover-base, .jqx-combobox-arrow-selected-base, .jqx-combobox-arrow-normal-light, .jqx-combobox-arrow-hover-light, .jqx-combobox-arrow-selected-light, .jqx-combobox-arrow-normal-dark, .jqx-combobox-arrow-hover-dark, .jqx-combobox-arrow-selected-dark, .jqx-combobox-arrow-normal-material-dark, .jqx-combobox-arrow-hover-material-dark, .jqx-combobox-arrow-selected-material-dark, .jqx-combobox-arrow-normal-material-purple-dark, .jqx-combobox-arrow-hover-material-purple-dark, .jqx-combobox-arrow-selected-material-purple-dark, .jqx-combobox-arrow-normal-material-green-dark, .jqx-combobox-arrow-hover-material-green-dark, .jqx-combobox-arrow-selected-material-green-dark) {
    background: transparent;
    border-color: transparent;
}

.jqx-combobox-content:is(.jqx-combobox-content-base, .jqx-combobox-content-light, .jqx-combobox-content-dark, .jqx-combobox-content-material-dark, .jqx-combobox-content-material-purple-dark, .jqx-combobox-content-material-green-dark) {
    border-right-color: transparent;
}

/* jqxDateTimeInput's calendar button and jqxNumberInput's spin buttons the same way: on the field,
   without a divider or a filled block; the spin buttons tint under the pointer */
.jqx-datetimeinput .jqx-action-button.jqx-action-button:is(.jqx-action-button-base, .jqx-action-button-light, .jqx-action-button-dark, .jqx-action-button-material-dark, .jqx-action-button-material-purple-dark, .jqx-action-button-material-green-dark),
.jqx-numberinput .jqx-action-button.jqx-action-button:is(.jqx-action-button-base, .jqx-action-button-light, .jqx-action-button-dark, .jqx-action-button-material-dark, .jqx-action-button-material-purple-dark, .jqx-action-button-material-green-dark) {
    background: transparent;
    border-color: transparent;
}

.jqx-numberinput .jqx-action-button.jqx-action-button:is(.jqx-action-button-base, .jqx-action-button-light, .jqx-action-button-dark, .jqx-action-button-material-dark, .jqx-action-button-material-purple-dark, .jqx-action-button-material-green-dark):hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.jqx-numberinput .jqx-input.jqx-rc-r:is(.jqx-input-base, .jqx-input-light, .jqx-input-dark, .jqx-input-material-dark, .jqx-input-material-purple-dark, .jqx-input-material-green-dark):has(> .jqx-action-button) {
    border-left-color: transparent;
}

/* jqxInput's suggestions the same way: rounded, lifted, the items rounded; in base white with the
   list box's tint for the highlighted item (the pop-up was grey and the item a pressed button
   with a dark border) */
.jqx-input-popup.jqx-input-popup:is(.jqx-input-popup-base, .jqx-input-popup-light, .jqx-input-popup-dark, .jqx-input-popup-material, .jqx-input-popup-material-dark, .jqx-input-popup-material-purple, .jqx-input-popup-material-purple-dark, .jqx-input-popup-material-green, .jqx-input-popup-material-green-dark) {
    border-radius: 8px;
    border-color: var(--jqx-border, #c5c5c5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 4px;
    margin-top: 4px;
}

.jqx-input-popup.jqx-input-popup:is(.jqx-input-popup-dark, .jqx-input-popup-material-dark, .jqx-input-popup-material-purple-dark, .jqx-input-popup-material-green-dark) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.jqx-input-popup.jqx-input-popup:is(.jqx-input-popup-base, .jqx-input-popup-light, .jqx-input-popup-dark, .jqx-input-popup-material, .jqx-input-popup-material-dark, .jqx-input-popup-material-purple, .jqx-input-popup-material-purple-dark, .jqx-input-popup-material-green, .jqx-input-popup-material-green-dark) .jqx-menu-item {
    border-radius: 6px;
}

.jqx-input-popup.jqx-input-popup-base {
    background: #fff;
    border-color: #c5c5c5;
}

.jqx-input-popup.jqx-input-popup-base .jqx-menu-item:is(.jqx-fill-state-hover, .jqx-fill-state-pressed) {
    background: rgba(0, 92, 153, 0.1);
    border-color: transparent;
    color: #1f1f1f;
}

/* jqxFormattedInput in base and the tailwind themes: its spin and drop-down buttons on the field like
   the number input's, without dividers or filled blocks; in tailwind the buttons' part of the frame in
   the field's border colour (it was white, and the buttons stood outside the field) */
.jqx-formatted-input-spin-buttons-container:is(.jqx-formatted-input-spin-buttons-container-base, .jqx-formatted-input-spin-buttons-container-tailwind, .jqx-formatted-input-spin-buttons-container-tailwind-blue, .jqx-formatted-input-spin-buttons-container-tailwind-dark, .jqx-formatted-input-spin-buttons-container-tailwind-blue-dark),
.jqx-formatted-input-addon:is(.jqx-formatted-input-addon-base, .jqx-formatted-input-addon-tailwind, .jqx-formatted-input-addon-tailwind-blue, .jqx-formatted-input-addon-tailwind-dark, .jqx-formatted-input-addon-tailwind-blue-dark),
.jqx-formatted-input-spin-button:is(.jqx-formatted-input-spin-button-base, .jqx-formatted-input-spin-button-tailwind, .jqx-formatted-input-spin-button-tailwind-blue, .jqx-formatted-input-spin-button-tailwind-dark, .jqx-formatted-input-spin-button-tailwind-blue-dark) {
    background: transparent;
}

.jqx-formatted-input-spin-button:is(.jqx-formatted-input-spin-button-base, .jqx-formatted-input-spin-button-tailwind, .jqx-formatted-input-spin-button-tailwind-blue, .jqx-formatted-input-spin-button-tailwind-dark, .jqx-formatted-input-spin-button-tailwind-blue-dark):hover,
.jqx-formatted-input-addon:is(.jqx-formatted-input-addon-base, .jqx-formatted-input-addon-tailwind, .jqx-formatted-input-addon-tailwind-blue, .jqx-formatted-input-addon-tailwind-dark, .jqx-formatted-input-addon-tailwind-blue-dark):is(:hover, .jqx-fill-state-pressed) {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

input:has(+ .jqx-formatted-input-spin-buttons-container:is(.jqx-formatted-input-spin-buttons-container-base, .jqx-formatted-input-spin-buttons-container-tailwind, .jqx-formatted-input-spin-buttons-container-tailwind-blue, .jqx-formatted-input-spin-buttons-container-tailwind-dark, .jqx-formatted-input-spin-buttons-container-tailwind-blue-dark), + .jqx-formatted-input-addon:is(.jqx-formatted-input-addon-base, .jqx-formatted-input-addon-tailwind, .jqx-formatted-input-addon-tailwind-blue, .jqx-formatted-input-addon-tailwind-dark, .jqx-formatted-input-addon-tailwind-blue-dark)),
.jqx-formatted-input-spin-buttons-container:is(.jqx-formatted-input-spin-buttons-container-base, .jqx-formatted-input-spin-buttons-container-tailwind, .jqx-formatted-input-spin-buttons-container-tailwind-blue, .jqx-formatted-input-spin-buttons-container-tailwind-dark, .jqx-formatted-input-spin-buttons-container-tailwind-blue-dark):has(~ .jqx-formatted-input-addon) {
    border-right-color: transparent !important;
}

:is(.jqx-formatted-input-spin-buttons-container-tailwind,.jqx-formatted-input-spin-buttons-container-tailwind-blue, .jqx-formatted-input-addon-tailwind, .jqx-formatted-input-addon-tailwind-blue, .jqx-formatted-input-spin-buttons-container-tailwind-dark, .jqx-formatted-input-spin-buttons-container-tailwind-blue-dark, .jqx-formatted-input-addon-tailwind-dark, .jqx-formatted-input-addon-tailwind-blue-dark):is(.jqx-formatted-input-spin-buttons-container, .jqx-formatted-input-addon) {
    border-top-color: var(--tailwind-input-border);
    border-bottom-color: var(--tailwind-input-border);
}

.jqx-formatted-input-addon:is(.jqx-formatted-input-addon-tailwind,.jqx-formatted-input-addon-tailwind-blue, .jqx-formatted-input-addon-tailwind-dark, .jqx-formatted-input-addon-tailwind-blue-dark),
.jqx-formatted-input-spin-buttons-container:is(.jqx-formatted-input-spin-buttons-container-tailwind,.jqx-formatted-input-spin-buttons-container-tailwind-blue, .jqx-formatted-input-spin-buttons-container-tailwind-dark, .jqx-formatted-input-spin-buttons-container-tailwind-blue-dark):not(:has(~ .jqx-formatted-input-addon)) {
    border-right-color: var(--tailwind-input-border);
}

/* jqxFormattedInput in the underlined themes: the underline runs on under the spin and drop-down
   buttons (their bottom border was the background colour, and the line stopped at the text) */
:is(.jqx-formatted-input-spin-buttons-container, .jqx-formatted-input-addon):is(.jqx-formatted-input-spin-buttons-container-light, .jqx-formatted-input-addon-light, .jqx-formatted-input-spin-buttons-container-dark, .jqx-formatted-input-addon-dark, .jqx-formatted-input-spin-buttons-container-material-dark, .jqx-formatted-input-addon-material-dark, .jqx-formatted-input-spin-buttons-container-material-purple-dark, .jqx-formatted-input-addon-material-purple-dark, .jqx-formatted-input-spin-buttons-container-material-green-dark, .jqx-formatted-input-addon-material-green-dark) {
    border-bottom-color: var(--jqx-border);
}

:is(.jqx-formatted-input-spin-buttons-container, .jqx-formatted-input-addon):is(.jqx-formatted-input-spin-buttons-container-material, .jqx-formatted-input-addon-material, .jqx-formatted-input-spin-buttons-container-material-purple, .jqx-formatted-input-addon-material-purple, .jqx-formatted-input-spin-buttons-container-material-green, .jqx-formatted-input-addon-material-green) {
    border-bottom-color: #949494;
}

/* the dark family's focus ring reached the combo box's inner text field (a small box beside the
   tokens); the combo box shows its own focus */
.jqx-combobox:is(.jqx-combobox-state-normal-dark, .jqx-combobox-state-normal-material-dark, .jqx-combobox-state-normal-material-purple-dark, .jqx-combobox-state-normal-material-green-dark) .jqx-combobox-input:focus-visible {
    outline: none;
}

.jqx-combobox-multi-item.jqx-combobox-multi-item:is(.jqx-combobox-multi-item-base, .jqx-combobox-multi-item-light, .jqx-combobox-multi-item-dark, .jqx-combobox-multi-item-material-dark, .jqx-combobox-multi-item-material-purple-dark, .jqx-combobox-multi-item-material-green-dark) {
    border-radius: 999px;
    border-color: transparent;
    background: color-mix(in srgb, currentColor 9%, transparent);
    padding: 1px 4px 1px 9px;
    font-weight: 500;
}

.jqx-combobox-multi-item.jqx-combobox-multi-item:is(.jqx-combobox-multi-item-base, .jqx-combobox-multi-item-light, .jqx-combobox-multi-item-dark, .jqx-combobox-multi-item-material-dark, .jqx-combobox-multi-item-material-purple-dark, .jqx-combobox-multi-item-material-green-dark) .jqx-icon-close {
    opacity: 0.7;
}

.jqx-combobox-multi-item.jqx-combobox-multi-item:is(.jqx-combobox-multi-item-base, .jqx-combobox-multi-item-light, .jqx-combobox-multi-item-dark, .jqx-combobox-multi-item-material-dark, .jqx-combobox-multi-item-material-purple-dark, .jqx-combobox-multi-item-material-green-dark):hover .jqx-icon-close {
    opacity: 1;
}

.jqx-dropdownbutton:is(.jqx-dropdownbutton-base, .jqx-dropdownbutton-light, .jqx-dropdownbutton-dark, .jqx-dropdownbutton-material, .jqx-dropdownbutton-material-dark, .jqx-dropdownbutton-material-purple, .jqx-dropdownbutton-material-purple-dark, .jqx-dropdownbutton-material-green, .jqx-dropdownbutton-material-green-dark) .jqx-dropdownlist-content {
    display: flex;
    align-items: center;
}

/* jqxGrid's column menu (2026), in base, light, dark and the material family: the pop-up look of the
   drop-downs - rounded, lifted on a soft shadow, a quiet border (it was a square grey panel); in base
   white, its Filter button the primary one, and the header's menu buttons quieter (no divider, the
   icon full strength only under the pointer) */
.jqx-grid-menu.jqx-grid-menu:is(.jqx-menu-base, .jqx-menu-light, .jqx-menu-dark, .jqx-menu-material, .jqx-menu-material-dark, .jqx-menu-material-purple, .jqx-menu-material-purple-dark, .jqx-menu-material-green, .jqx-menu-material-green-dark) {
    border-radius: 8px;
    border-color: var(--jqx-border, #c5c5c5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.jqx-grid-menu.jqx-grid-menu:is(.jqx-menu-dark, .jqx-menu-material-dark, .jqx-menu-material-purple-dark, .jqx-menu-material-green-dark) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.jqx-grid-menu.jqx-grid-menu.jqx-menu-base {
    background: #fff;
    border-color: #c5c5c5;
}

.jqx-grid-menu.jqx-menu-base .jqx-button.jqx-button-base.primary {
    background: #005c99;
    border-color: #005c99;
    color: #fff;
}

.jqx-grid-menu.jqx-menu-base .jqx-button.jqx-button-base.primary:hover {
    background: #004a7c;
    border-color: #004a7c;
}

.jqx-grid-column-menubutton.jqx-grid-column-menubutton.jqx-grid-column-menubutton-base {
    border-left-color: transparent;
    opacity: 0.6;
}

.jqx-grid-column-header:hover .jqx-grid-column-menubutton.jqx-grid-column-menubutton-base,
.jqx-grid-column-menubutton.jqx-grid-column-menubutton-base:hover {
    opacity: 1;
}

/* jqxScrollBar: the modern look (2026), in base, light, dark and the material family: the thumb a
   pill half the bar's thickness (it filled the bar), wider while the pointer is over the bar; no
   grey track. The thumb keeps 3:1 against the widget's colour. Sizes are unchanged. */
.jqx-scrollbar-state-normal:is(.jqx-scrollbar-state-normal-base, .jqx-scrollbar-state-normal-light, .jqx-scrollbar-state-normal-material, .jqx-scrollbar-state-normal-material-purple, .jqx-scrollbar-state-normal-material-green, .jqx-scrollbar-state-normal-dark, .jqx-scrollbar-state-normal-material-dark, .jqx-scrollbar-state-normal-material-purple-dark, .jqx-scrollbar-state-normal-material-green-dark):not(.jqx-rangeselector-shutter) {
    background: transparent;
    border-color: transparent;
}

:is(.jqx-scrollbar-thumb-state-normal-base, .jqx-scrollbar-thumb-state-normal-horizontal-base, .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-normal-horizontal-light, .jqx-scrollbar-thumb-state-normal-material, .jqx-scrollbar-thumb-state-normal-horizontal-material, .jqx-scrollbar-thumb-state-normal-material-purple, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple, .jqx-scrollbar-thumb-state-normal-material-green, .jqx-scrollbar-thumb-state-normal-horizontal-material-green, .jqx-scrollbar-thumb-state-normal-dark, .jqx-scrollbar-thumb-state-normal-horizontal-dark, .jqx-scrollbar-thumb-state-normal-material-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-dark, .jqx-scrollbar-thumb-state-normal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-material-green-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-green-dark):not(.jqx-scrollbar-thumb-state-normal-touch, .jqx-rangeselector-slider) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

:is(.jqx-scrollbar-thumb-state-normal-base, .jqx-scrollbar-thumb-state-normal-horizontal-base, .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-normal-horizontal-light, .jqx-scrollbar-thumb-state-normal-material, .jqx-scrollbar-thumb-state-normal-horizontal-material, .jqx-scrollbar-thumb-state-normal-material-purple, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple, .jqx-scrollbar-thumb-state-normal-material-green, .jqx-scrollbar-thumb-state-normal-horizontal-material-green, .jqx-scrollbar-thumb-state-normal-dark, .jqx-scrollbar-thumb-state-normal-horizontal-dark, .jqx-scrollbar-thumb-state-normal-material-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-dark, .jqx-scrollbar-thumb-state-normal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-material-green-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-green-dark):not(.jqx-scrollbar-thumb-state-normal-touch, .jqx-rangeselector-slider)::after {
    content: "";
    position: absolute;
    inset: 0 25%;
    border-radius: 999px;
    background: #8a8a8a;
    transition: inset 0.12s ease, background-color 0.12s ease;
}

:is(.jqx-scrollbar-thumb-state-normal-base, .jqx-scrollbar-thumb-state-normal-horizontal-base, .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-normal-horizontal-light, .jqx-scrollbar-thumb-state-normal-material, .jqx-scrollbar-thumb-state-normal-horizontal-material, .jqx-scrollbar-thumb-state-normal-material-purple, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple, .jqx-scrollbar-thumb-state-normal-material-green, .jqx-scrollbar-thumb-state-normal-horizontal-material-green, .jqx-scrollbar-thumb-state-normal-dark, .jqx-scrollbar-thumb-state-normal-horizontal-dark, .jqx-scrollbar-thumb-state-normal-material-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-dark, .jqx-scrollbar-thumb-state-normal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-material-green-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-green-dark):not(.jqx-scrollbar-thumb-state-normal-touch, .jqx-rangeselector-slider).jqx-scrollbar-thumb-state-normal-horizontal::after {
    inset: 25% 0;
}

.jqx-scrollbar-state-normal:hover > :is(.jqx-scrollbar-thumb-state-normal-base, .jqx-scrollbar-thumb-state-normal-horizontal-base, .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-normal-horizontal-light, .jqx-scrollbar-thumb-state-normal-material, .jqx-scrollbar-thumb-state-normal-horizontal-material, .jqx-scrollbar-thumb-state-normal-material-purple, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple, .jqx-scrollbar-thumb-state-normal-material-green, .jqx-scrollbar-thumb-state-normal-horizontal-material-green, .jqx-scrollbar-thumb-state-normal-dark, .jqx-scrollbar-thumb-state-normal-horizontal-dark, .jqx-scrollbar-thumb-state-normal-material-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-dark, .jqx-scrollbar-thumb-state-normal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-material-green-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-green-dark):not(.jqx-scrollbar-thumb-state-normal-touch, .jqx-rangeselector-slider)::after,
:is(.jqx-scrollbar-thumb-state-normal-base, .jqx-scrollbar-thumb-state-normal-horizontal-base, .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-normal-horizontal-light, .jqx-scrollbar-thumb-state-normal-material, .jqx-scrollbar-thumb-state-normal-horizontal-material, .jqx-scrollbar-thumb-state-normal-material-purple, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple, .jqx-scrollbar-thumb-state-normal-material-green, .jqx-scrollbar-thumb-state-normal-horizontal-material-green, .jqx-scrollbar-thumb-state-normal-dark, .jqx-scrollbar-thumb-state-normal-horizontal-dark, .jqx-scrollbar-thumb-state-normal-material-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-dark, .jqx-scrollbar-thumb-state-normal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-material-green-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-green-dark):not(.jqx-scrollbar-thumb-state-normal-touch, .jqx-rangeselector-slider):is(.jqx-scrollbar-thumb-state-pressed, .jqx-scrollbar-thumb-state-pressed-horizontal)::after {
    inset: 0 12%;
}

.jqx-scrollbar-state-normal:hover > :is(.jqx-scrollbar-thumb-state-normal-base, .jqx-scrollbar-thumb-state-normal-horizontal-base, .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-normal-horizontal-light, .jqx-scrollbar-thumb-state-normal-material, .jqx-scrollbar-thumb-state-normal-horizontal-material, .jqx-scrollbar-thumb-state-normal-material-purple, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple, .jqx-scrollbar-thumb-state-normal-material-green, .jqx-scrollbar-thumb-state-normal-horizontal-material-green, .jqx-scrollbar-thumb-state-normal-dark, .jqx-scrollbar-thumb-state-normal-horizontal-dark, .jqx-scrollbar-thumb-state-normal-material-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-dark, .jqx-scrollbar-thumb-state-normal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-material-green-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-green-dark):not(.jqx-scrollbar-thumb-state-normal-touch, .jqx-rangeselector-slider).jqx-scrollbar-thumb-state-normal-horizontal::after,
:is(.jqx-scrollbar-thumb-state-normal-base, .jqx-scrollbar-thumb-state-normal-horizontal-base, .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-normal-horizontal-light, .jqx-scrollbar-thumb-state-normal-material, .jqx-scrollbar-thumb-state-normal-horizontal-material, .jqx-scrollbar-thumb-state-normal-material-purple, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple, .jqx-scrollbar-thumb-state-normal-material-green, .jqx-scrollbar-thumb-state-normal-horizontal-material-green, .jqx-scrollbar-thumb-state-normal-dark, .jqx-scrollbar-thumb-state-normal-horizontal-dark, .jqx-scrollbar-thumb-state-normal-material-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-dark, .jqx-scrollbar-thumb-state-normal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-material-green-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-green-dark):not(.jqx-scrollbar-thumb-state-normal-touch, .jqx-rangeselector-slider):is(.jqx-scrollbar-thumb-state-pressed, .jqx-scrollbar-thumb-state-pressed-horizontal).jqx-scrollbar-thumb-state-normal-horizontal::after {
    inset: 12% 0;
}

:is(.jqx-scrollbar-thumb-state-normal-base, .jqx-scrollbar-thumb-state-normal-horizontal-base, .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-normal-horizontal-light, .jqx-scrollbar-thumb-state-normal-material, .jqx-scrollbar-thumb-state-normal-horizontal-material, .jqx-scrollbar-thumb-state-normal-material-purple, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple, .jqx-scrollbar-thumb-state-normal-material-green, .jqx-scrollbar-thumb-state-normal-horizontal-material-green):not(.jqx-scrollbar-thumb-state-normal-touch, .jqx-rangeselector-slider):is(.jqx-scrollbar-thumb-state-hover, .jqx-scrollbar-thumb-state-hover-horizontal)::after {
    background: #6e6e6e;
}

:is(.jqx-scrollbar-thumb-state-normal-base, .jqx-scrollbar-thumb-state-normal-horizontal-base, .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-normal-horizontal-light, .jqx-scrollbar-thumb-state-normal-material, .jqx-scrollbar-thumb-state-normal-horizontal-material, .jqx-scrollbar-thumb-state-normal-material-purple, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple, .jqx-scrollbar-thumb-state-normal-material-green, .jqx-scrollbar-thumb-state-normal-horizontal-material-green):not(.jqx-scrollbar-thumb-state-normal-touch, .jqx-rangeselector-slider):is(.jqx-scrollbar-thumb-state-pressed, .jqx-scrollbar-thumb-state-pressed-horizontal)::after {
    background: #575757;
}

:is(.jqx-scrollbar-thumb-state-normal-dark, .jqx-scrollbar-thumb-state-normal-horizontal-dark, .jqx-scrollbar-thumb-state-normal-material-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-dark, .jqx-scrollbar-thumb-state-normal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-material-green-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-green-dark):not(.jqx-scrollbar-thumb-state-normal-touch, .jqx-rangeselector-slider)::after {
    background: #7a7a7a;
}

:is(.jqx-scrollbar-thumb-state-normal-dark, .jqx-scrollbar-thumb-state-normal-horizontal-dark, .jqx-scrollbar-thumb-state-normal-material-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-dark, .jqx-scrollbar-thumb-state-normal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-material-green-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-green-dark):not(.jqx-scrollbar-thumb-state-normal-touch, .jqx-rangeselector-slider):is(.jqx-scrollbar-thumb-state-hover, .jqx-scrollbar-thumb-state-hover-horizontal)::after {
    background: #9e9e9e;
}

:is(.jqx-scrollbar-thumb-state-normal-dark, .jqx-scrollbar-thumb-state-normal-horizontal-dark, .jqx-scrollbar-thumb-state-normal-material-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-dark, .jqx-scrollbar-thumb-state-normal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-material-green-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-green-dark):not(.jqx-scrollbar-thumb-state-normal-touch, .jqx-rangeselector-slider):is(.jqx-scrollbar-thumb-state-pressed, .jqx-scrollbar-thumb-state-pressed-horizontal)::after {
    background: #bdbdbd;
}

@media (prefers-reduced-motion: reduce) {
    :is(.jqx-scrollbar-thumb-state-normal-base, .jqx-scrollbar-thumb-state-normal-horizontal-base, .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-normal-horizontal-light, .jqx-scrollbar-thumb-state-normal-material, .jqx-scrollbar-thumb-state-normal-horizontal-material, .jqx-scrollbar-thumb-state-normal-material-purple, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple, .jqx-scrollbar-thumb-state-normal-material-green, .jqx-scrollbar-thumb-state-normal-horizontal-material-green, .jqx-scrollbar-thumb-state-normal-dark, .jqx-scrollbar-thumb-state-normal-horizontal-dark, .jqx-scrollbar-thumb-state-normal-material-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-dark, .jqx-scrollbar-thumb-state-normal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-purple-dark, .jqx-scrollbar-thumb-state-normal-material-green-dark, .jqx-scrollbar-thumb-state-normal-horizontal-material-green-dark):not(.jqx-scrollbar-thumb-state-normal-touch, .jqx-rangeselector-slider)::after {
        transition: none;
    }
}

/* modern look: notifications, loader, tag cloud, timeline, popover, validator hints */

/* jqxNotification: a card tinted with its status colour, a line icon in that colour and the
   text in the theme's (they were saturated blocks with white text and glossy raster icons) */
.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark) {
    --jqx-notification-status: #0e7490;
    background: color-mix(in srgb, var(--jqx-notification-status) 9%, var(--jqx-background, #fff)) !important;
    border: 1px solid color-mix(in srgb, var(--jqx-notification-status) 35%, var(--jqx-background, #fff)) !important;
    color: var(--jqx-background-color, #1f1f1f) !important;
    text-shadow: none !important;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

.jqx-notification.jqx-notification.jqx-notification-base {
    color: #1f1f1f !important;
}

.jqx-notification.jqx-notification:is(.jqx-notification-dark, .jqx-notification-material-dark, .jqx-notification-material-purple-dark, .jqx-notification-material-green-dark) {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark).jqx-notification-info {
    --jqx-notification-status: #0e7490;
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark).jqx-notification-success {
    --jqx-notification-status: #15803d;
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark).jqx-notification-warning {
    --jqx-notification-status: #b45309;
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark).jqx-notification-error {
    --jqx-notification-status: #c42b1c;
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark).jqx-notification-mail {
    --jqx-notification-status: var(--jqx-primary, #005c99);
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark).jqx-notification-time {
    --jqx-notification-status: #4b5563;
}

.jqx-notification.jqx-notification:is(.jqx-notification-dark, .jqx-notification-material-dark, .jqx-notification-material-purple-dark, .jqx-notification-material-green-dark).jqx-notification-info {
    --jqx-notification-status: #5ec8e0;
}

.jqx-notification.jqx-notification:is(.jqx-notification-dark, .jqx-notification-material-dark, .jqx-notification-material-purple-dark, .jqx-notification-material-green-dark).jqx-notification-success {
    --jqx-notification-status: #5ccb7f;
}

.jqx-notification.jqx-notification:is(.jqx-notification-dark, .jqx-notification-material-dark, .jqx-notification-material-purple-dark, .jqx-notification-material-green-dark).jqx-notification-warning {
    --jqx-notification-status: #f5b84a;
}

.jqx-notification.jqx-notification:is(.jqx-notification-dark, .jqx-notification-material-dark, .jqx-notification-material-purple-dark, .jqx-notification-material-green-dark).jqx-notification-error {
    --jqx-notification-status: #ff8a80;
}

.jqx-notification.jqx-notification:is(.jqx-notification-dark, .jqx-notification-material-dark, .jqx-notification-material-purple-dark, .jqx-notification-material-green-dark).jqx-notification-mail {
    --jqx-notification-status: var(--jqx-primary);
}

.jqx-notification.jqx-notification:is(.jqx-notification-dark, .jqx-notification-material-dark, .jqx-notification-material-purple-dark, .jqx-notification-material-green-dark).jqx-notification-time {
    --jqx-notification-status: #b8b8b8;
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark) .jqx-notification-icon.jqx-notification-icon {
    background: var(--jqx-notification-status) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 9v4.5M10 6.5v.01'/%3E%3C/svg%3E") left center / 20px 20px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 9v4.5M10 6.5v.01'/%3E%3C/svg%3E") left center / 20px 20px no-repeat;
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark) .jqx-notification-icon.jqx-notification-icon-success {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M6.8 10.2l2.2 2.2 4.2-4.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M6.8 10.2l2.2 2.2 4.2-4.6'/%3E%3C/svg%3E");
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark) .jqx-notification-icon.jqx-notification-icon-warning {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.2l7.5 13.3h-15z'/%3E%3Cpath d='M10 8.2v3.6M10 14.2v.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.2l7.5 13.3h-15z'/%3E%3Cpath d='M10 8.2v3.6M10 14.2v.01'/%3E%3C/svg%3E");
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark) .jqx-notification-icon.jqx-notification-icon-error {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M7.5 7.5l5 5M12.5 7.5l-5 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M7.5 7.5l5 5M12.5 7.5l-5 5'/%3E%3C/svg%3E");
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark) .jqx-notification-icon.jqx-notification-icon-mail {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='2'/%3E%3Cpath d='M3 5.5l7 5.5 7-5.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='2'/%3E%3Cpath d='M3 5.5l7 5.5 7-5.5'/%3E%3C/svg%3E");
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark) .jqx-notification-icon.jqx-notification-icon-time {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 6v4.2l2.8 1.8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 6v4.2l2.8 1.8'/%3E%3C/svg%3E");
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark) .jqx-notification-icon.jqx-notification-icon-rtl {
    -webkit-mask-position: right center;
    mask-position: right center;
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark) .jqx-notification-close-button.jqx-notification-close-button {
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l8 8M14 6l-8 8'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l8 8M14 6l-8 8'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    top: -4px;
    opacity: 0.65;
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark) .jqx-notification-close-button.jqx-notification-close-button-ltr {
    right: -4px;
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark) .jqx-notification-close-button.jqx-notification-close-button-rtl {
    left: -4px;
}

.jqx-notification.jqx-notification:is(.jqx-notification-base, .jqx-notification-light, .jqx-notification-dark, .jqx-notification-material, .jqx-notification-material-dark, .jqx-notification-material-purple, .jqx-notification-material-purple-dark, .jqx-notification-material-green, .jqx-notification-material-green-dark) .jqx-notification-close-button:hover {
    opacity: 1;
}

/* jqxLoader: a ring in the accent on a raised card (it was a dotted GIF in a bordered box) */
.jqx-loader:is(.jqx-loader-base, .jqx-loader-light, .jqx-loader-dark, .jqx-loader-material, .jqx-loader-material-dark, .jqx-loader-material-purple, .jqx-loader-material-purple-dark, .jqx-loader-material-green, .jqx-loader-material-green-dark) {
    background: var(--jqx-background, #fff) !important;
    border: 0 !important;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
}

.jqx-loader:is(.jqx-loader-dark, .jqx-loader-material-dark, .jqx-loader-material-purple-dark, .jqx-loader-material-green-dark) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.jqx-loader:is(.jqx-loader-base, .jqx-loader-light, .jqx-loader-dark, .jqx-loader-material, .jqx-loader-material-dark, .jqx-loader-material-purple, .jqx-loader-material-purple-dark, .jqx-loader-material-green, .jqx-loader-material-green-dark) .jqx-loader-icon {
    background-image: none !important;
}

.jqx-loader:is(.jqx-loader-base, .jqx-loader-light, .jqx-loader-dark, .jqx-loader-material, .jqx-loader-material-dark, .jqx-loader-material-purple, .jqx-loader-material-purple-dark, .jqx-loader-material-green, .jqx-loader-material-green-dark) .jqx-loader-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--jqx-primary, #005c99) 20%, transparent);
    border-top-color: var(--jqx-primary, #005c99);
    animation: jqx-modern-spin 0.8s linear infinite;
}

.jqx-loader.jqx-loader-base .jqx-loader-icon::before {
    border-color: color-mix(in srgb, #005c99 20%, transparent);
    border-top-color: #005c99;
}

@keyframes jqx-modern-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .jqx-loader:is(.jqx-loader-base, .jqx-loader-light, .jqx-loader-dark, .jqx-loader-material, .jqx-loader-material-dark, .jqx-loader-material-purple, .jqx-loader-material-purple-dark, .jqx-loader-material-green, .jqx-loader-material-green-dark) .jqx-loader-icon::before {
        animation-duration: 1.6s;
    }
}

/* jqxTagCloud: tags without a textColor in the accent, not the browser's link blue */
.jqx-tag-cloud-item:is(.jqx-tag-cloud-item-base, .jqx-tag-cloud-item-material, .jqx-tag-cloud-item-material-dark, .jqx-tag-cloud-item-material-purple, .jqx-tag-cloud-item-material-purple-dark, .jqx-tag-cloud-item-material-green, .jqx-tag-cloud-item-material-green-dark) a {
    color: var(--jqx-primary, #005c99);
}

.jqx-tag-cloud-item.jqx-tag-cloud-item-base a {
    color: #005c99;
}

/* jqxTimeline: rounded cards with a soft shadow, a short connector to the line instead of the
   notch, a thin line with ring dots, the dates muted */
.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark) .jqx-timeline-item-content {
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.jqx-timeline:is(.jqx-widget-dark, .jqx-widget-material-dark, .jqx-widget-material-purple-dark, .jqx-widget-material-green-dark, .jqx-widget-fluent-dark, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark) .jqx-timeline-item-content {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark) .jqx-timeline-item-pointer {
    display: none;
}

.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark) .jqx-timeline-item-content::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -21px;
    width: 20px;
    height: 1px;
    background: var(--jqx-border, #c5c5c5);
}

.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark) .jqx-timeline-far-items .jqx-timeline-item-content::before {
    right: auto;
    left: -21px;
}

.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark)[horizontal] .jqx-timeline-item-content::before {
    top: auto;
    bottom: -21px;
    right: auto;
    left: 50%;
    width: 1px;
    height: 20px;
}

.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark)[horizontal] .jqx-timeline-far-items .jqx-timeline-item-content::before {
    bottom: auto;
    top: -21px;
    left: 50%;
}

.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark) .jqx-timeline-track {
    width: 2px;
    border: 0;
    border-radius: 1px;
    background: var(--jqx-border, #c5c5c5);
}

.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark)[horizontal] .jqx-timeline-track {
    width: 100%;
    height: 2px;
}

.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark) .jqx-timeline-dot {
    box-sizing: border-box;
    border: 4px solid var(--jqx-primary, #005c99);
    background: var(--jqx-background, #fff);
    box-shadow: 0 0 0 3px var(--jqx-background, #fff);
}

.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark)[horizontal] .jqx-timeline-dot {
    margin-top: -7px;
}

.jqx-timeline:not([class*="jqx-widget-"]) .jqx-timeline-dot,
.jqx-timeline.jqx-widget-base .jqx-timeline-dot {
    border-color: #005c99;
}

.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark) .jqx-timeline-item-title {
    font-weight: 600;
}

.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark) .jqx-timeline-item-subtitle,
.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark) .jqx-timeline-item-date {
    color: color-mix(in srgb, currentColor 72%, transparent);
    font-size: 13px;
}

.jqx-timeline:is(:not([class*="jqx-widget-"]), .jqx-widget-base, .jqx-widget-light, .jqx-widget-dark, .jqx-widget-material, .jqx-widget-material-dark, .jqx-widget-material-purple, .jqx-widget-material-purple-dark, .jqx-widget-material-green, .jqx-widget-material-green-dark, .jqx-widget-fluent, .jqx-widget-fluent-dark, .jqx-widget-tailwind, .jqx-widget-tailwind-blue, .jqx-widget-tailwind-dark, .jqx-widget-tailwind-blue-dark) .jqx-timeline-item .jqx-timeline-item-description {
    margin-top: 8px;
}

/* an item without an icon: no empty row above its title */
.jqx-timeline .jqx-timeline-item-icon:has(> span[class=""]:empty) {
    display: none;
}

/* jqxPopover: rounded, a soft shadow, the title on the popover's own surface (it was a grey bar),
   the arrow filled to match */
.jqx-popover.jqx-popover:is(.jqx-popover-base, .jqx-popover-light, .jqx-popover-dark, .jqx-popover-material, .jqx-popover-material-dark, .jqx-popover-material-purple, .jqx-popover-material-purple-dark, .jqx-popover-material-green, .jqx-popover-material-green-dark) {
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.jqx-popover.jqx-popover:is(.jqx-popover-dark, .jqx-popover-material-dark, .jqx-popover-material-purple-dark, .jqx-popover-material-green-dark) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.jqx-popover.jqx-popover:is(.jqx-popover-base, .jqx-popover-light, .jqx-popover-dark, .jqx-popover-material, .jqx-popover-material-dark, .jqx-popover-material-purple, .jqx-popover-material-purple-dark, .jqx-popover-material-green, .jqx-popover-material-green-dark) .jqx-popover-title.jqx-popover-title {
    background: transparent;
    border: 0;
    font-weight: 600;
    padding: 10px 14px 2px;
}

.jqx-popover.jqx-popover:is(.jqx-popover-base, .jqx-popover-light, .jqx-popover-dark, .jqx-popover-material, .jqx-popover-material-dark, .jqx-popover-material-purple, .jqx-popover-material-purple-dark, .jqx-popover-material-green, .jqx-popover-material-green-dark) .jqx-popover-content {
    padding: 6px 14px 12px;
}

.jqx-popover.jqx-popover:is(.jqx-popover-base, .jqx-popover-light, .jqx-popover-dark, .jqx-popover-material, .jqx-popover-material-dark, .jqx-popover-material-purple, .jqx-popover-material-purple-dark, .jqx-popover-material-green, .jqx-popover-material-green-dark).bottom .jqx-popover-arrow.jqx-popover-arrow:after {
    border-bottom-color: var(--jqx-background, #fff);
}

/* jqxValidator hints: rounded, the page's font, no raster arrow (it was Verdana in a square
   dark-red box) */
.jqx-validator-hint:is(.jqx-validator-hint-base, .jqx-validator-hint-light, .jqx-validator-hint-dark, .jqx-validator-hint-material, .jqx-validator-hint-material-dark, .jqx-validator-hint-material-purple, .jqx-validator-hint-material-purple-dark, .jqx-validator-hint-material-green, .jqx-validator-hint-material-green-dark) {
    height: auto;
    padding: 5px 10px;
    line-height: 18px;
    font-family: var(--jqx-font-family, inherit);
    font-size: 13px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.jqx-validator-hint:is(.jqx-validator-hint-base, .jqx-validator-hint-light, .jqx-validator-hint-dark, .jqx-validator-hint-material, .jqx-validator-hint-material-dark, .jqx-validator-hint-material-purple, .jqx-validator-hint-material-purple-dark, .jqx-validator-hint-material-green, .jqx-validator-hint-material-green-dark) img {
    display: none;
}

.jqx-validator-hint:is(.jqx-validator-hint-base, .jqx-validator-hint-light, .jqx-validator-hint-material, .jqx-validator-hint-material-purple, .jqx-validator-hint-material-green) {
    background: #c42b1c;
    border-color: #c42b1c;
}

/*jqxProgresBar Style*/
.jqx-progressbar {
    position: relative;
    overflow: hidden;
    outline: none;
    border: 1px solid transparent;
    height: 2em;
}

/*applied to the progressbar's value element*/
.jqx-progressbar-value {
    outline: none;
    border: 0px solid transparent;
    height: 100%;
}

/*applied to the progress bar's vertical value element- when the widget's orientation is 'vertical'*/
.jqx-progressbar-value-vertical {
    outline: none;
    border: 0px solid transparent;
    height: 100%;
    background: transparent;
}

/*applied to the progressbar's text element*/
.jqx-progressbar-text {
    font-size: 10px;
    border: none;
}

/*applied to the progress bar when the widget is in disabled state*/
.jqx-progressbar-disabled {
    outline: none;
    border: 1px solid transparent;
    height: 2em;
}

/*jqxMenu Style*/
.jqx-menu {
    border: 1px solid transparent;
    float: none;
    margin: 0px;
    height: 100%;
    padding: 0px;
    overflow: hidden;
    text-align: left;
}

.jqx-menu-dropdown-column {
    float: left;
}

/*applied to the menu when it is horizontal. Sets the menu's background*/
.jqx-menu-horizontal {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    text-align: center;
}

/*applied to the menu when it is vertical. Sets the menu's background*/
.jqx-menu-vertical {
    text-align: left;
}

/*applied to the sub menu. Sets the sub menu's background*/
.jqx-menu-dropdown {
    left: 100%;
    margin: 0px;
    padding: 0px;
    right: 0;
    overflow: hidden;
    display: none;
    float: none;
    width: 150px;
    border-style: solid;
    border-width: 1px;
    text-align: left;
    padding: 2px;
}

.jqx-menu-dropdown-base {
    padding: 0px;
}

/*applied to the sub menu's ul elements.*/
.jqx-menu-dropdown ul {
    left: 100%;
    margin: 0px;
    padding: 0px;
    right: 0;
    overflow: hidden;
    border: none;
}

/*applied to the menu's ul elements.*/
.jqx-menu ul {
    left: 100%;
    margin: 0px;
    padding: 2px;
    right: 0;
    overflow: hidden;
    background-color: transparent;
    border: none;
}

/*applied to the menu's li elements.*/
.jqx-menu li,
.jqx-menu-dropdown li {
    line-height: 1.3 !important;
}

/*applied to the top level menu items.*/
.jqx-menu-item-top {
    border: 1px solid transparent;
    text-indent: 0;
    list-style: none;
    padding: 4px 8px 4px 8px;
    left: 100%;
    overflow: hidden;
    color: inherit;
    right: 0;
    margin: 0px 3px 0px 3px;
    cursor: pointer;
}

/*applied to the sub menu items.*/
.jqx-menu-item {
    border: 1px solid transparent;
    text-indent: 0;
    list-style: none;
    padding: 4px 8px 4px 8px;
    margin: 1px;
    margin-left: 3px;
    margin-right: 3px;
    float: none;
    overflow: hidden;
    left: 100%;
    color: inherit;
    right: 0;
    text-align: left;
    cursor: pointer;
}

/*applied to a sub menu item when the mouse is over the item.*/
.jqx-menu-item-hover {
    color: inherit;
    right: 0;
    list-style: none;
    margin: 1px;
    margin-left: 3px;
    margin-right: 3px;
    left: 100%;
    padding: 4px 8px 4px 8px;
    text-align: left;
    cursor: pointer;
}

/*applied to a top-level menu item when the mouse is over it.*/
.jqx-menu-item-top-hover {
    color: inherit;
    right: 0;
    list-style: none;
    margin: 0px 3px 0px 3px;
    left: 100%;
    padding: 4px 8px 4px 8px;
    top: 50%;
    cursor: pointer;
}

/*applied to a sub menu item when its sub menu is opened.*/
.jqx-menu-item-selected {
    right: 0;
    list-style: none;
    margin: 1px;
    margin-left: 3px;
    margin-right: 3px;
    left: 100%;
    padding: 4px 8px 4px 8px;
    text-align: left;
    cursor: pointer;
}

/*applied to a disabled sub menu item.*/
.jqx-menu-item-disabled {}

/*applied to a top-level menu item when its sub menu is opened.*/
.jqx-menu-item-top-selected {
    right: 0;
    list-style: none;
    margin: 0px 1px 0px 1px;
    margin-left: 3px;
    margin-right: 3px;
    left: 100%;
    padding: 4px 8px 4px 8px;
    cursor: pointer;
}

/*applied to the menu separator items.*/
.jqx-menu-item-separator {
    text-indent: 0;
    background-color: #ddd;
    border: none;
    list-style: none;
    height: 1px;
    line-height: 0 !important;
    padding: 0px;
    margin: 1px 2px 1px 2px;
    float: none;
    overflow: hidden;
    left: 100%;
    color: inherit;
    right: 0;
    font-size: 1px;
}

/*applied to a sub menu item when it has sub menu items. Displays right arrow icon.*/
.jqx-menu-item-arrow-right {
    background-image: url(./images/icon-right.png);
}

.jqx-menu-item-arrow-right-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to a sub menu item when it has sub menu items. Displays down arrow icon.*/
.jqx-menu-item-arrow-down {
    background-image: url(./images/icon-down.png);
}

.jqx-menu-item-arrow-down-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 7l3.5 3.5L12 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to a sub menu item when it has sub menu items. Displays up arrow icon.*/
.jqx-menu-item-arrow-up {
    background-image: url(./images/icon-up.png);
}

.jqx-menu-item-arrow-up-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 10l3.5-3.5L12 10' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-menu-minimized {
    position: relative;
}

.jqx-menu-title {
    position: relative;
    float: right;
    margin-top: 4px;
    padding-top: 4px;
    padding-right: 20px;
}

.jqx-menu-minimized-button {
    background-image: url('images/icon-menu-minimized.png');
    background-repeat: no-repeat;
    background-position: left center;
    height: 24px;
    width: 24px;
    padding: 0px;
    margin-left: 7px;
    margin-top: 4px;
    float: left;
}

.jqx-menu-ul-minimized {
    display: block !important;
    width: auto !important;
}

.jqx-menu-ul-minimized ul {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    box-shadow: none !important;
}

.jqx-menu-minimized li:last-child {
    padding-bottom: 0px;
    margin: 0px;
}

.jqx-menu-item-arrow-right,
.jqx-menu-item-arrow-down,
.jqx-menu-item-arrow-up,
.jqx-menu-item-arrow-right {
    background-position: 100% 50%;
    background-repeat: no-repeat;
    padding-right: 0px;
    margin-right: -8px;
    width: 17px;
    height: 15px;
}

/*applied to a sub menu item when it has sub menu items. Displays left arrow icon.*/
.jqx-menu-item-arrow-left {
    padding-right: 0px;
    padding-left: 5px;
    width: 17px;
    height: 15px;
    background-image: url(./images/icon-left.png);
    background-position: 0 50%;
    background-repeat: no-repeat;
}

.jqx-menu-item-arrow-left-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to a sub menu item when it has sub menu items and its sub menu is opened. Displays right arrow icon.*/
.jqx-menu-item-arrow-right-selected {
    background-image: url(./images/icon-right.png);
}

.jqx-menu-item-arrow-right-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to a sub menu item when it has sub menu items and its sub menu is opened. Displays down arrow icon.*/
.jqx-menu-item-arrow-down-selected {
    background-image: url(./images/icon-down.png);
}

.jqx-menu-item-arrow-down-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 7l3.5 3.5L12 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to a sub menu item when it has sub menu items and its sub menu is opened. Displays up arrow icon.*/
.jqx-menu-item-arrow-up-selected {
    background-image: url(./images/icon-up.png);
}

.jqx-menu-item-arrow-up-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 10l3.5-3.5L12 10' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-menu-item-arrow-right-selected,
.jqx-menu-item-arrow-up-selected,
.jqx-menu-item-arrow-down-selected,
.jqx-menu-item-arrow-top-right {
    padding-right: 0px;
    margin-right: -8px;
    width: 17px;
    height: 15px;
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

/*applied to a top-level menu item when it has sub menu items. Displays right arrow icon.*/
.jqx-menu-item-arrow-top-right {
    background-image: url(./images/icon-right.png);
}

.jqx-menu-item-arrow-top-right-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to a sub menu item when it has sub menu items and its sub menu is opened. Displays left arrow icon.*/
.jqx-menu-item-arrow-left-selected {
    background-image: url(./images/icon-left.png);
}

.jqx-menu-item-arrow-left-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to a top-level menu item when it has sub menu items. Displays left arrow icon.*/
.jqx-menu-item-arrow-top-left {
    background-image: url(./images/icon-left.png);
}

.jqx-menu-item-arrow-top-left-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-menu-item-arrow-left-selected,
.jqx-menu-item-arrow-top-left {
    background-position: 0 50%;
    background-repeat: no-repeat;
    padding-right: 0px;
    padding-left: 5px;
    width: 17px;
    height: 15px;
}

/*applied to the anchor elements*/
.jqx-menu-item a:link,
.jqx-menu-item a:visited,
.jqx-menu-item a:hover,
.jqx-menu-item-top a:link,
.jqx-menu-item-top a:visited,
.jqx-menu-item-top a:hover {
    font: inherit;
    text-decoration: none;
    color: inherit;
    outline: none;
    background-color: transparent;
}

/*applied to the menu widget when it is disabled.*/
.jqx-menu-disabled {
    cursor: default;
}

/*applied to the anchor elements of all disabled menu items.*/
.jqx-menu-disabled a:link {
    cursor: default;
    text-decoration: none;
}

.jqx-menu-disabled a:visited {
    cursor: default;
    text-decoration: none;
}

.jqx-menu-disabled a:hover {
    cursor: default;
}

.jqx-menu-dropdown {
    right: -1px;
}

/*jqxtree Style*/
.jqx-tree {
    left: 100%;
    right: 0;
    float: none;
    margin: 0px;
    border-style: solid;
    border-width: 1px;
    padding: 0px;
    overflow: hidden;
    text-align: left;
    outline: none;
    white-space: nowrap;
    line-height: 14px !important;
}

/*applied to the jqxTree root UL element.*/
.jqx-tree-dropdown-root {
    left: 100%;
    padding: 0px 5px 0px 5px;
    right: 0;
    display: block;
    float: none;
    background-color: transparent;
    border-style: solid;
    border-width: 0px;
    border-color: #fff;
    text-align: left;
    outline: none;
    white-space: nowrap;
    margin: 0px;
}

.jqx-tree-dropdown-root-rtl {
    padding: 0px 5px 0px 0px;
    text-align: right;
    float: right;
    margin: 0px;
}

/*applied to the jqxTree UL elements.*/
.jqx-tree-dropdown {
    left: 100%;
    margin: 0px;
    padding: 0px 0px 0px 10px;
    right: 0;
    display: block;
    float: none;
    background-color: transparent;
    border-style: solid;
    border-width: 0px;
    border-color: transparent;
    text-align: left;
    outline: none;
}

.jqx-tree-dropdown-rtl {
    padding: 3px 0px 0px 0px;
    text-align: right;
}

/*applied to a tree item.*/
.jqx-tree-item {
    border: 1px solid transparent;
    text-indent: 0;
    list-style: none;
    padding: 3px;
    margin: 0px;
    float: none;
    overflow: hidden;
    left: 100%;
    right: 0;
    text-align: left;
    cursor: default;
    text-decoration: none;
}

/*applied to the jqxTree LI elements.*/
.jqx-tree-item-li {
    text-indent: 0;
    background-color: transparent;
    border: 0px solid transparent;
    list-style: none;
    left: 100%;
    right: 0;
    text-align: left;
    outline: none;
    margin: 0px;
    margin-top: 1px;
    padding: 0px;
}

/*applied to the last LI elements in an UL element.*/
.jqx-tree-item-u-last {
    margin: 0px 0px 0px 0px;
}

/*applied to a tree item when the mouse is over the item.*/
.jqx-tree-item-hover {
    color: inherit;
    right: 0;
    padding: 3px;
    margin: 0px;
    list-style: none;
    left: 100%;
    cursor: pointer;
    text-decoration: none;
}

/*applied to a tree item when the item is selected.*/
.jqx-tree-item-selected {
    color: inherit;
    right: 0;
    padding: 3px;
    margin: 0px;
    list-style: none;
    left: 100%;
    cursor: pointer;
    text-decoration: none;
}

.jqx-tree-item-rtl {
    text-align: right;
}

.jqx-tree-item-li-rtl {
    text-align: right;
}

/*applied to the anchor element of a tree item.*/
.jqx-tree-item a:link,
.jqx-tree-item a:visited {
    text-indent: 0;
    background-color: transparent;
    border: 0px solid transparent;
    list-style: none;
    padding: 0px;
    margin: 0px;
    float: none;
    overflow: hidden;
    left: 100%;
    color: inherit;
    right: 0;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    outline: none;
}

.jqx-tree-item-selected,
.jqx-tree-item-hover a:hover {
    color: inherit;
}

.jqx-tree-item-selected,
.jqx-tree-item-hover a:visited {
    color: inherit;
}

/*applied to a tree item when the item is disabled.*/
.jqx-tree-item-disabled {}

/*applied to a tree item when it has sub items and is collapsed. Displays an arrow icon next to the item.*/
.jqx-tree-item-arrow-collapse,
.jqx-tree-item-arrow-collapse-hover {
    padding-right: 0px;
    width: 17px;
    height: 17px;
    background-image: url(./images/icon-right.png);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
}

.jqx-tree-item-arrow-collapse-base, .jqx-tree-item-arrow-collapse-hover-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-tree-item-arrow-collapse-rtl,
.jqx-tree-item-arrow-collapse-hover-rtl {
    background-image: url(./images/icon-left.png);
}

.jqx-tree-item-arrow-collapse-rtl-base, .jqx-tree-item-arrow-collapse-hover-rtl-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to a tree item when it has sub items and is expanded. Displays an arrow icon next to the item.*/
.jqx-tree-item-arrow-expand,
.jqx-tree-item-arrow-expand-hover {
    padding-right: 0px;
    width: 17px;
    height: 17px;
    background-image: url(./images/icon-down.png);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
}

.jqx-tree-item-arrow-expand-base, .jqx-tree-item-arrow-expand-hover-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 7l3.5 3.5L12 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to the tree when it is disabled.*/
.jqx-tree-disabled {
    cursor: default;
}

/*applied to the anchor elements in a tree when it is disabled.*/
.jqx-tree-disabled a:link {
    cursor: default;
    text-decoration: none;
}

.jqx-tree-disabled a:visited {
    cursor: default;
    text-decoration: none;
}

.jqx-tree-disabled a:hover {
    cursor: default;
}

/*jqxTabs*/
.jqx-tabs {
    outline: none;
    margin: 0 0 0 0;
    padding: 0px;
    overflow: hidden;
    background: transparent;
    border: 1px solid transparent;
}

/*applied to the tab close button.*/
.jqx-tabs-close-button {
    outline: none;
    background-image: url(./images/close.png);
    cursor: pointer;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: relative;
    left: 5px;
}

.jqx-tabs-close-button-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to the tab close button when the tab is selected.*/
.jqx-tabs-close-button-selected {
    outline: none;
    background-image: url(./images/close.png);
    cursor: pointer;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.jqx-tabs-close-button-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to the tab close button when the mouse is over the tab.*/
.jqx-tabs-close-button-hover {
    outline: none;
    background-image: url(./images/close.png);
    cursor: pointer;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.jqx-tabs-close-button-hover-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-tabs-close-button,
.jqx-tabs-close-button-selected,
.jqx-tabs-close-button-hover {
    background-repeat: no-repeat;
    background-position: center;
}

/*applied to the tab's left scroll arrow.*/
.jqx-tabs-arrow-left {
    outline: none;
    position: relative;
    z-index: 15;
    float: left;
    cursor: pointer;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background-image: url('images/icon-left.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-tabs-arrow-left-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to the tab's right scroll arrow.*/
.jqx-tabs-arrow-right {
    outline: none;
    position: relative;
    z-index: 15;
    background-image: url('images/icon-right.png');
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    cursor: pointer;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.jqx-tabs-arrow-right-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-tabs-arrow-background {
    background: #eeeeee;
}

/*applied to the tab's title.*/
.jqx-tabs-title {
    outline: none;
    display: block;
    cursor: pointer;
    white-space: nowrap;
    left: 100%;
    right: 0;
    text-indent: 0px;
    list-style: none;
    border: 1px solid transparent;
    margin: 0px 2px 0px 0px;
    overflow: hidden;
    z-index: 1;
    padding-left: 13px;
    padding-right: 13px;
    padding-bottom: 5px;
    padding-top: 5px;
    background: transparent;
    height: auto;
    position: relative;
}

.jqx-tabs-title-bottom {}

.jqx-tabs-title a:link {
    color: inherit;
    text-decoration: none;
}

.jqx-tabs-title a:hover {
    color: inherit;
    text-decoration: none;
}

.jqx-tabs-title a:active {
    color: inherit;
    text-decoration: none;
}

.jqx-tabs-title a:visited {
    color: inherit;
    text-decoration: none;
}

/*applied to the tab's title when the tab is selected and the jqxTab's position property is set to 'top' .*/
.jqx-tabs-title-selected-top {
    z-index: 99;
    outline: none;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid #fff;
    background-color: #fff;
    padding-bottom: 7px;
}

/*applied to the tab's title when the tab is selected and the jqxTab's position property is set to 'bottom' .*/
.jqx-tabs-title-selected-bottom {
    outline: none;
    border-top: 1px solid #fff;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    padding-top: 7px;
    padding-bottom: 5px;
    margin-top: -2px;
    background-color: #fff;
}

/*applied to the tab's title when the tab is hovered and the jqxTab's position property is set to 'top' .*/
.jqx-tabs-title-hover-top {
    outline: none;
    border: 1px solid transparent;
    padding-bottom: 5px;
}

/*applied to the tab's title when the tab is hovered and the jqxTab's position property is set to 'bottom' .*/
.jqx-tabs-title-hover-bottom {
    outline: none;
    border: 1px solid transparent;
    padding-top: 5px;
}

/*applied to the tab's title when the tab is disabled.*/
.jqx-tabs-title-disable {}

/*applied to the tab's header.*/
.jqx-tabs-header {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 3px;
    padding-bottom: 1px;
    margin: 0px;
    border-top: 0px solid transparent;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 1px solid #aaa;
    background: #eeeeee;
}

/*applied to the tab's header when the position is bottom.*/
.jqx-tabs-header-bottom {
    padding-top: 1px;
    padding-bottom: 3px;
    border-top: 0px solid #aaa;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 1px solid transparent;
}

/*applied to the tab's header when the tab is collapsed.*/
.jqx-tabs-header-collapsed {
    border: 1px solid #aaa;
}

/*applied to the tab's header when the position is bottom and tab is collapsed.*/
.jqx-tabs-header-collapsed-bottom {
    border: 1px solid #aaa;
}

.jqx-tabs-collapsed {
    border: 0px solid transparent;
}

.jqx-tabs-collapsed-bottom {
    border: 0px solid transparent;
}

/*applied to the tab's selection tracker container element.*/
.jqx-tabs-selection-tracker-container {
    outline: none;
    position: relative;
    text-indent: 0px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 100%;
    background: transparent;
    height: 0px;
}

/*applied to the tab's selection tracker when the jqxTab's position property is set to 'top'.*/
.jqx-tabs-selection-tracker-top {
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    padding-bottom: 2px;
    background-color: #fff;
    outline: none;
    position: absolute;
    z-index: 10;
}

/*applied to the tab's selection tracker when the jqxTab's position property is set to 'bottom'.*/
.jqx-tabs-selection-tracker-bottom {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    background-color: #fff;
    outline: none;
    position: absolute;
    z-index: 10;
    margin-top: -1px;
    padding-bottom: 2px;
}

/*applied to the tab's content element which represents a DIV element.*/
.jqx-tabs-content {
    outline: none;
    border-bottom: 0px solid transparent;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    border-top: 0px solid transparent;
    text-align: left;
    clear: both;
}

.jqx-tabs-content-element {
    height: 100%;
    overflow: auto;
}

/*jqxCheckBox*/
.jqx-checkbox {
    overflow: hidden;
    text-align: left;
    border: none;
    outline: none;
    margin: 0 0 0 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*applied to the check box.*/
.jqx-checkbox-default {
    text-align: left;
    float: left;
    padding: 0px;
    border: 1px solid transparent;
    outline: none;
    margin: 0px 3px 0px 3px;
}

/*applied to the check box when the mouse cursor is over it.*/
.jqx-checkbox-hover {
    cursor: pointer;
    float: left;
    padding: 0px;
    border: 1px solid transparent;
    outline: none;
    margin: 0px 3px 0px 3px;
}

/*applied to the widget when it is disabled.*/
.jqx-checkbox-disabled {
    cursor: default;
    background: transparent;
    padding: 0px;
    border: none;
    outline: none;
    margin: 0px 0px 0px 0px;
}

/*applied to the check box when the widget is disabled.*/
.jqx-checkbox-disabled-box {
    float: left;
    padding: 0px;
    border: 1px solid transparent;
    outline: none;
    margin: 0px 3px 0px 3px;
}

/*applied to the check box when it is checked. Displays a check icon.*/
.jqx-checkbox-check-checked {
    float: left;
    background: transparent url(./images/check_black.png) center center no-repeat;
    padding: 0px;
    border: none;
    outline: none;
    margin: 0 0 0 0;
}

.jqx-checkbox-check-checked-base {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M2.6 6.9l2.7 2.7 5.1-5.5' fill='none' stroke='%231f1f1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center no-repeat;
}

/*applied to the check box when the widget is disabled. Displays a disabled check icon.*/
.jqx-checkbox-check-disabled {
    float: left;
    background: transparent url(./images/check_disabled.png) center center no-repeat;
    padding: 0px;
    border: none;
    outline: none;
    margin: 0 0 0 0;
}

.jqx-checkbox-check-disabled-base {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M2.6 6.9l2.7 2.7 5.1-5.5' fill='none' stroke='%238a8a8a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center no-repeat;
}

/*applied to the check box when its state is indeterminate.*/
.jqx-checkbox-check-indeterminate {
    float: left;
    background: transparent url(./images/check_indeterminate_black.png) center center no-repeat;
    padding: 0px;
    border: none;
    outline: none;
    margin: 0 0 0 0;
}

.jqx-checkbox-check-indeterminate-base {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M3.5 6.5h6' fill='none' stroke='%231f1f1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center no-repeat;
}

/*applied to the check box when its state is indeterminate and it is disabled.*/
.jqx-checkbox-check-indeterminate-disabled {
    float: left;
    background: transparent url(./images/check_indeterminate_disabled.png) center center no-repeat;
    padding: 0px;
    border: none;
    outline: none;
    margin: 0 0 0 0;
}

.jqx-checkbox-check-indeterminate-disabled-base {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M3.5 6.5h6' fill='none' stroke='%238a8a8a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center no-repeat;
}

.jqx-checkbox-label,
.jqx-radiobutton-label {
    cursor: pointer;
}

/* each item holds its floated box (flow-root), so the next one starts at the left edge and not
   beside the box above it */
.jqx-checkbox-group .jqx-checkbox-group-item,
.jqx-radiobutton-group .jqx-radiobutton-group-item {
    padding: 4px 0px;
    display: flow-root;
}

/* the focusable element of each item (the span that holds the floated box) floats too, so it wraps
   the box: inline, it measured 0x0 and its focus outline was drawn round nothing */
.jqx-checkbox-group-item > .jqx-checkbox-group-item-check {
    float: left;
}

/* right to left: the box at the right, the label beside it (the boxes did not show at all) */
.jqx-checkbox-group-item > .jqx-checkbox-group-item-check.jqx-rtl {
    float: right;
}

.jqx-container:has(> .jqx-checkbox-group-item > .jqx-checkbox-group-item-check.jqx-rtl) {
    direction: rtl;
}

.jqx-checkbox-group .jqx-container[layout="horizontal"],
.jqx-radiobutton-group .jqx-container[layout="horizontal"] {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
}

.jqx-checkbox-group .jqx-container[layout="horizontal"] .jqx-checkbox-group-item,
.jqx-radiobutton-group .jqx-container[layout="horizontal"] .jqx-radiobutton-group-item {
    padding: 0px 4px;
}

.jqx-checkbox-group .jqx-container[label-position="before"] .jqx-checkbox-group-item,
.jqx-radiobutton-group .jqx-container[label-position="before"] .jqx-radiobutton-group-item {
    display: flex;
    flex-direction: row;
}

.jqx-checkbox-group.jqx-fill-state-disabled label,
.jqx-radiobutton-group.jqx-fill-state-disabled label,
.jqx-checkbox-group-item.jqx-fill-state-disabled label,
.jqx-radiobutton-group-item.jqx-fill-state-disabled label {
    cursor: default;
}

/*applied to the check box when its in rtl mode.*/
.jqx-checkbox-rtl {
    float: right;
}

/*jqxRadioButton*/
.jqx-radiobutton {
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    margin: 0 0 0 0;
    white-space: nowrap;
}

/*applied to the radio button.*/
.jqx-radiobutton-default {
    cursor: pointer;
    float: left;
    background: transparent url(./images/roundbg_classic_normal.png) left center scroll repeat-x;
    padding: 0px;
    border: 1px solid transparent;
    outline: none;
    margin: 1px 3px 0px 3px;
    border-radius: 100%;
}

/*applied to the radio button when the mouse is over it.*/
.jqx-radiobutton-hover {
    cursor: pointer;
    float: left;
    background: transparent;
    padding: 0px;
    border: 1px solid transparent;
    outline: none;
    margin: 1px 3px 0px 3px;
    border-radius: 100%;
}

/*applied to the radio button when it is disabled.*/
.jqx-radiobutton-disabled {
    cursor: default;
}

/*applied to the radio button's radio icon when it is disabled.*/
.jqx-radiobutton-disabled-box {}

/*applied to the radio button when it is checked.*/
.jqx-radiobutton-check-checked {
    float: left;
    background: transparent url(./images/roundbg_check_black.png) left top no-repeat;
    padding: 0px;
    border: 1px solid transparent;
    outline: none;
    margin: 0 0 0 0;
    border-radius: 100%;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    margin-top: 2px;
}

/*applied to the radio button when it is checked and disabled.*/
.jqx-radiobutton-check-disabled {}

/*applied to the radio button when it is in indeterminate state.*/
.jqx-radiobutton-check-indeterminate {
    float: left;
    background: transparent url(./images/roundbg_check_indeterminate.png) left top no-repeat;
    padding: 0px;
    border: none;
    outline: none;
    margin: 0 0 0 0;
    border-radius: 100%;
    width: 6px;
    height: 6px;
    margin-left: 2px;
    margin-top: 2px;
}

/*applied to the radio button when it is in indeterminate state and disabled.*/
.jqx-radiobutton-check-indeterminate-disabled {}

/*applied to the radio button when its in rtl mode.*/
.jqx-radiobutton-rtl {
    float: right;
}

/*jqxRating*/
.jqx-rating {
    margin: 0px;
    padding: 0px;
    outline: none;
    overflow: hidden;
}

.jqx-rating-image {
    border-width: 0px;
}

.jqx-rating-image-default {
    margin: 0px;
    padding: 0px;
    outline: none;
    background-color: transparent;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url(./images/star.png);
    overflow: hidden;
}

/*applied to the rating when it is hovered.*/
.jqx-rating-image-hover {
    background-color: transparent;
    padding: 0px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url(./images/star_hover.png);
    overflow: hidden;
}

/*applied to the rating when it is disabled.*/
.jqx-rating-image-backward {
    background-color: transparent;
    padding: 0px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url(./images/star_disabled.png);
    overflow: hidden;
}

/*jqxCalendar Style*/
.jqx-calendar {
    border: 1px solid transparent;
    -webkit-appearance: none;
    overflow: hidden;
    outline: none;
    padding: 0px;
    margin: 0 0 0 0;
    cursor: default;
    border-collapse: separate;
}

.jqx-calendar .jqx-widget-header {}

.jqx-calendar>div {
    padding: 0px;
    box-sizing: border-box;
}

.jqx-calendar-light>div {
    padding: 10px;
}

.jqx-calendar td {
    padding-top: 0px;
    padding-bottom: 0px;
    border-collapse: separate;
    border-spacing: 1px;
    font-size: 13px;
    line-height: 1.231;
    height: auto;
}

.jqx-calendar table {
    margin: 0px;
    padding: 0px;
    border-collapse: separate;
    border-spacing: 1px;
    font-size: 13px;
    line-height: 1.231;
}

/*applied to the calendar's row header. This header displays the week numbers.*/
.jqx-calendar-row-header {
    outline: none;
    border: 0px solid #f2f2f2;
    padding: 0;
    margin: 0 0 0 0;
    cursor: default;
}

/*applied to the calendar's column. This header displays the day names.*/
.jqx-calendar-column-header {
    outline: none;
    text-align: right;
    padding: 3px;
    border-top: none;
    border-bottom: 1px solid transparent;
    border-left: none;
    border-right: none;
    margin: 0 0 0 0;
    cursor: default;
}

/*applied to the calendar's top-left header. This header is displayed before the day names and above the week numbers.*/
.jqx-calendar-top-left-header {
    outline: none;
    border: 0px solid #f2f2f2;
    margin: 0 0 0 0;
    cursor: default;
}

/*applied to the calendar's navigation buttons.*/
.jqx-calendar-title-navigation {
    cursor: pointer;
    background-color: transparent;
    margin: 0;
    padding: 0;
    border: none;
    width: 25px;
    height: 25px;
}

/*applied to the month table*/
.jqx-calendar-month {
    margin: 0;
    padding: 0;
    border: none;
    width: 100%;
}

/*applied to the calendar's title content.*/
.jqx-calendar-title-content {
    cursor: pointer;
    text-align: center;
}

/*applied to the calendar's navigation title.*/
.jqx-calendar-title-header {
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin: 0 0 0 0;
}

.jqx-calendar-title-header td {
    padding-left: 0px;
    padding-right: 0px;
    border: none;
}

/*applied to the calendar's navigation title when the calendar is disabled.*/
.jqx-calendar-title-header-disabled {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin: 0 0 0 0;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    border-top: 0px solid transparent;
}

/*applied to a calendar cell.*/
.jqx-calendar-cell {
    border: 1px solid transparent;
    margin: 0px;
    outline: none;
    text-align: center;
    padding: 1px;
    cursor: pointer;
    background-color: transparent;
}

.jqx-calendar-cell td {
    padding: 0;
    margin: 0;
}

/*applied to a calendar cell in decade and year views.*/
.jqx-calendar-cell-decade,
.jqx-calendar-cell-year {
    text-align: center;
}

.jqx-calendar .jqx-fill-state-normal {
    background: transparent;
    border: 1px solid transparent;
}

/*applied to a calendar cell when the cell is hidden. A cell can be hidden when the showOtherMonthDays property is false and the calendar hides the cells with dates from the other months*/
.jqx-calendar-cell-hidden {
    margin: 0 0 0 0;
    visibility: hidden;
    cursor: default;
}

/*applied to a calendar cell when the cell's date is a weekend date.*/
.jqx-calendar-cell-weekend {
    /* WCAG 1.4.3 - was #898989, 3.49:1 on white. #757575 is 4.61:1 on white, 4.52:1 on the today cell. */
    color: #757575 !important;
    margin: 0 0 0 0;
    cursor: pointer;
}

/*applied to a calendar cell when the cell's date is a special date(holiday, vacation, birthay. See the SpecialDates demo).*/
.jqx-calendar-cell-specialDate {
    color: #FF0000 !important;
    background-color: transparent;
    border: 1px solid #fff;
    margin: 0 0 0 0;
    cursor: pointer;
}

/*applied to a calendar cell when the cell's date is a restricted date.*/
.jqx-calendar-cell-restrictedDate {
    background-color: rgba(251, 132, 153, 1);
    border: 1px solid #fff;
    margin: 0 0 0 0;
    cursor: pointer;
}

.jqx-calendar-cell-selected-invalid {
    color: #FFF !important;
    background: #FF0000 !important;
    border: 1px solid #FF0000 !important;
}

/*applied to a calendar cell when the cell's date is the today date.*/
.jqx-calendar-cell-today {
    /* WCAG 1.4.3 - was #898989, 3.49:1 on white. #757575 is 4.61:1 on white, 4.52:1 on the today cell. */
    color: #757575;
    background-color: #ffffdb;
    border: 1px solid #fdc066;
    margin: 0 0 0 0;
    cursor: pointer;
}

/*applied to a calendar cell when the cell is hovered.*/
.jqx-calendar-cell-hover {
    margin: 0 0 0 0;
    cursor: pointer;
}

/*applied to a calendar cell when the cell is selected.*/
.jqx-calendar-cell-selected {
    margin: 0 0 0 0;
    cursor: pointer;
}

/*applied to a calendar cell when the cell's date represents a date from the previous or next month.*/
.jqx-calendar-cell-othermonth {
    /* WCAG 1.4.3 - was #898989, 3.49:1 on white. #757575 is 4.61:1 on white, 4.52:1 on the today cell. */
    color: #757575 !important;
    margin: 0 0 0 0;
    cursor: pointer;
}

/*applied to a calendar cell when the calendar is disabled.*/
.jqx-calendar-cell-disabled {
    color: #ccc;
}

/*applied to a calendar cell when the cell is from the row header that displays the week numbers.*/
.jqx-calendar-row-cell {
    outline: none;
    text-align: center;
    border: 1px solid transparent;
    margin: 0 0 0 0;
    cursor: default;
}

/*applied to a calendar cell when the cell is from the row header that displays the week numbers and the calendar is disabled.*/
.jqx-calendar-row-cell-disabled {}

.jqx-calendar-footer {
    margin: 5px;
    color: inherit;
    font-size: 13px;
}

.jqx-calendar-title-container {
    overflow: hidden;
}

/*applied to a calendar cell when the cell is from the column header that displays the day names.*/
.jqx-calendar-column-cell {
    overflow: hidden;
    text-align: center;
    outline: none;
    font-weight: normal;
    padding: 1px;
    border: 1px solid transparent;
    margin: 0 0 0 0;
    cursor: default;
}

/*applied to a calendar cell when the cell is from the column header that displays the day names and the calendar is disabled.*/
.jqx-calendar-column-cell-disabled {}

/*applied to the calendar's cell area element.*/
.jqx-calendar-view {
    -webkit-appearance: none;
    outline: none;
    padding: 0px;
    border: 0px solid #fff;
    margin: 0 0 0 0;
    cursor: default;
}

/*jqxExpander and jqxNavigationBar Style*/
.jqx-expander {}

/*applied to the Expander's header and content*/
.jqx-expander-header,
.jqx-expander-content {
    border-left-width: 1px;
    border-right-width: 1px;
    border-left-style: solid;
    border-right-style: solid;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    outline: 0;
}

/*applid to the content of the expander header.*/
.jqx-expander-header-content {
    padding-left: 3px;
}

/*applid to the content of the expander header.*/
.jqx-expander-header-content-rtl {
    padding-right: 3px;
}

.jqx-expander-content {
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: auto;
    outline: 0;
}

/*applied to the Expander's header and its content when it is on the top of the header*/
.jqx-expander-header,
.jqx-expander-content-top {
    border-top-width: 1px;
    border-top-style: solid;
}

/*applied to the Expander's header and its content when it is on the bottom of the header*/
.jqx-expander-header,
.jqx-expander-content-bottom {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

/*applied to the Expander's header*/
.jqx-expander-header {
    cursor: pointer;
    overflow: hidden;
}

/*applied to the Expander's header when the expander is disabled or the toggleMode is "none"*/
.jqx-expander-header-disabled {
    cursor: default;
}

/*applied to the Expander's arrow*/
.jqx-expander-arrow {
    width: 17px;
    height: 17px;
    position: relative;
}

/*applied to the Expander's content if it is empty*/
.jqx-expander-content-empty {
    border-width: 0px;
    padding: 0px;
}

/*applied to jqxNavigationBar. The NavigationBar internally uses jqxExpander's classes and inherits all header and content style settings from the Expander.*/
.jqx-navigationbar {
    border: none;
    margin: 0px;
    -webkit-appearance: none;
    outline: none;
}

/*jqxPanel Style*/
.jqx-panel {
    border: 1px solid transparent;
    -webkit-appearance: none;
    outline: none;
    padding: 0px;
    margin: 0px;
    cursor: default;
    overflow: hidden;
}

/*applied to the Panel's element displayed when the horizontal and vertical scrollbars are visible and the element is positioned below the vertical scrollbar and on the right
of the horizontal scrollbar.*/
.jqx-panel-bottomright {}

/*applied to the DropDownButton's Popup.*/
.jqx-dropdownbutton-popup {
    -webkit-appearance: none;
    outline: none;
    border: 1px solid transparent;
}

.jqx-listbox {
    -webkit-appearance: none;
    outline: none;
    border: 1px solid transparent;
    padding: 0px;
    margin: 0px;
    cursor: default;
    overflow: hidden;
}

/*applied to the ListBox's element displayed when the horizontal and vertical scrollbars are visible and the element is positioned below the vertical scrollbar and on the right
of the horizontal scrollbar.*/
.jqx-listbox-bottomright {}

/*applied to the ListBox's groups.*/
.jqx-listitem-state-group {
    white-space: nowrap;
    padding: 5px 2px 5px 2px;
    background: transparent;
    font-weight: bold;
    text-align: left;
    outline: none;
    overflow: hidden;
    vertical-align: middle;
    cursor: default;
}

/*applied to a list item in default state.*/
.jqx-listitem-state-normal {
    white-space: nowrap;
    padding: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid transparent;
    outline: none;
    visibility: inherit;
    display: inherit;
    text-align: left;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    cursor: default;
}

/*applied to a list item in hovered state.*/
.jqx-listitem-state-hover {
    white-space: nowrap;
    background: transparent;
    padding: 3px 3px 3px 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid transparent;
}

/*applied to a list item when the item is selected.*/
.jqx-listitem-state-selected {
    white-space: nowrap;
    padding: 3px 3px 3px 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid transparent;
}

.jqx-listbox-feedback {
    height: 1px;
    border-top: 1px dashed #000;
}

.jqx-listitem-element {
    border: none;
    width: 100%;
    height: 100%;
    align: left;
    valign: top;
    position: absolute;
}

/*jqxComboBox Style*/
/*applied to the jqxComboBox's content which displays the text.*/
.jqx-combobox-content {
    padding: 0px;
    overflow: hidden;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    margin: 0px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    -webkit-appearance: none;
    outline: none;
    border: none;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-right: 1px solid transparent;
    background-clip: padding-box;
}

.jqx-combobox-content-rtl {
    border: none;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-right: none;
    border-left: 1px solid transparent;
    background-clip: padding-box;
}

.jqx-combobox-content-rtl-base {
}

/*applied to the ComboBox's input field.*/
.jqx-combobox-input {
    -webkit-appearance: none;
    border-radius: 0px;
    padding: 0 0 0 0;
    outline: none;
    border: 0px solid #aaa;
    background-clip: padding-box;
}

.jqx-combobox-input::-ms-clear {
    display: none;
}

/*applied to the ComboBox's content when the widget is disabled.*/
.jqx-combobox-content-disabled {
    color: #AAA;
}

/*applied to the ComboBox's arrow button.*/
.jqx-combobox-arrow-normal,
.jqx-action-button {
    -webkit-appearance: none;
    outline: none;
    overflow: hidden;
    margin: 0 0 0 0;
    border: none;
    cursor: pointer;
}

/*applied to the ComboBox's arrow button*/
.jqx-combobox-arrow-hover,
.jqx-combobox-arrow-selected {
    -webkit-appearance: none;
    outline: none;
    overflow: hidden;
    margin: 0 0 0 0;
}

/*applied to the ComboBox in normal state.*/
.jqx-combobox-state-normal {
    -webkit-appearance: none;
    outline: none;
    border: 1px solid transparent;
    overflow: hidden;
    margin: 0 0 0 0;
}

/*applied to the ComboBox when the mouse is over the widget.*/
.jqx-combobox-state-hover {
    overflow: hidden;
    border: 1px solid transparent;
    margin: 0 0 0 0;
}

/*applied to the ComboBox when the popup ListBox is shown.*/
.jqx-combobox-state-selected {
    overflow: hidden;
    border: 1px solid transparent;
    margin: 0 0 0 0;
}

/*applied to the ComboBox when the widget is focused.*/
.jqx-combobox-state-focus {
    border: 1px solid transparent;
}

.jqx-combobox-multi-item {
    padding: 1px 3px;
    margin: 2px;
    white-space: nowrap;
    border-style: solid;
    font-weight: normal;
    overflow: hidden;
    text-align: left;
}

.jqx-combobox-multi-item a:link,
.jqx-combobox-multi-item a:visited {
    color: inherit;
    display: block;
    outline: 0 none;
    text-decoration: none;
    cursor: pointer;
}

/*applied to the ComboBox when the widget is disabled.*/
.jqx-combobox-state-disabled {
    white-space: nowrap;
    margin: 0px;
    color: #AAA;
}

/*jqxSelect Style*/
.jqx-select {
    overflow: hidden;
    padding-left: 3px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
    -webkit-appearance: none;
    outline: 0 none;
}

.jqx-select-content {
    cursor: pointer;
    text-overflow: ellipsis;
}

.jqx-select-container {
    padding: 0;
}

.jqx-select-item {
    padding: 3px;
    margin: 1px;
    white-space: normal !important;
    cursor: default;
}

/*jqxDropDownList Style*/
/*applied to the dropdownlist's content element which displays the selected item's text or html.*/
.jqx-dropdownlist-content {
    padding: 0px;
    overflow: hidden;
    padding-left: 4px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    -webkit-appearance: none;
    outline: 0 none;
    border: none;
}

.jqx-dropdownlist-content-rtl {
    padding-left: 0px;
    padding-right: 3px;
}

.jqx-dropdownlist .jqx-icon-arrow-down {
    width: 13px;
}

.jqx-dropdownlist .jqx-icon-arrow-up {
    width: 13px;
}

.jqx-combobox .jqx-icon-arrow-down {
    width: 13px;
}

.jqx-combobox .jqx-icon-arrow-up {
    width: 13px;
}

/*applied to the dropdownlist's content element which displays the selected item's text or html and the widget is disabled. */
.jqx-dropdownlist-content-disabled {}

/*applied to the dropdownlist in default state.*/
.jqx-dropdownlist-state-normal {
    -webkit-appearance: none;
    outline: none;
    border: 1px solid transparent;
    overflow: hidden;
    margin: 0 0 0 0;
    cursor: pointer;
}

/*applied to the dropdownlist in hovered state.*/
.jqx-dropdownlist-state-hover {
    overflow: hidden;
    border: 1px solid transparent;
    margin: 0 0 0 0;
    cursor: pointer;
}

/*applied to the dropdownlist in selected state.*/
.jqx-dropdownlist-state-selected {
    overflow: hidden;
    background-color: transparent;
    border: 1px solid transparent;
    margin: 0 0 0 0;
    cursor: pointer;
}

/*applied to the dropdownlist in focused state.*/
.jqx-dropdownlist-state-focus {
    border: 1px solid #909090;
}

/*applied to the dropdownlist in disabled state.*/
.jqx-dropdownlist-state-disabled {}

/*jqxScrollBar Style*/
.jqx-scrollbar {
    background: transparent;
    margin: 0;
    padding: 0;
    border: none;
}

/*applied to the scrollbar in default state.*/
.jqx-scrollbar-state-normal {
    background: #efefef;
    margin: 0px;
    padding: 0px;
    border: 1px solid transparent;
}

/*applied to the scrollbar buttons in default state.*/
.jqx-scrollbar-button-state-normal {
    margin: 0px;
    padding: 0px;
    border: 1px solid transparent;
}

/*applied to the scrollbar buttons in hovered state.*/
.jqx-scrollbar-button-state-hover {
    margin: 0px;
    padding: 0px;
    border: 1px solid transparent;
}

/*applied to the scrollbar buttons in pressed state.*/
.jqx-scrollbar-button-state-pressed {
    margin: 0px;
    padding: 0px;
    border: 1px solid transparent;
}

/*applied to the horizontal scrollbar thumb in default state.*/
.jqx-scrollbar-thumb-state-normal-horizontal {
    margin: 0px;
    padding: 0px;
    background: transparent;
    border: 1px solid transparent;
    touch-action: none;
}

/*applied to the horizontal scrollbar thumb in hovered state.*/
.jqx-scrollbar-thumb-state-hover-horizontal {
    margin: 0px;
    padding: 0px;
    border: 1px solid transparent;
}

/*applied to the horizontal scrollbar thumb in default state.*/
.jqx-scrollbar-thumb-state-pressed-horizontal {
    margin: 0px;
    padding: 0px;
    border: 1px solid transparent;
}

/*applied to the vertical scrollbar thumb in default state.*/
.jqx-scrollbar-thumb-state-normal {
    margin: 0px;
    padding: 0px;
    border: 1px solid transparent;
    touch-action: none;
}

/*applied to the vertical scrollbar thumb in default state.*/
.jqx-scrollbar-thumb-state-hover {
    margin: 0px;
    padding: 0px;
    background: transparent;
    border: 1px solid transparent;
}

/*applied to the vertical scrollbar thumb in default state.*/
.jqx-scrollbar-thumb-state-pressed {
    margin: 0px;
    padding: 0px;
    background: #d1d1d1;
    border: 1px solid #909090;
}

/* jqxWindow */
.jqx-window {
    position: absolute;
    overflow: hidden;
    border: 1px solid transparent;
}

/*applied to the jqxWindow when it’s disabled*/
.jqx-window-disabled {}

/*applied to the window’s header*/
.jqx-window-header {
    outline: none;
    border-width: 0px;
    border-bottom: 1px solid transparent;
    overflow: hidden;
    padding: 7px;
    height: auto;
    white-space: nowrap;
    overflow: hidden;
}

/*applied to the window’s header when the window is disabled*/
.jqx-window-header-disabled {}

/*applied to the window’s content*/
.jqx-window-content {
    outline: none;
    overflow: auto;
    text-align: left;
    background-color: transparent;
    padding: 5px;
    background-clip: padding-box;
}

/*applied to the window’s content when the window is disabled*/
.jqx-window-content-disabled {
    outline: none;
    overflow: auto;
    text-align: left;
    padding: 5px;
}

/*applied to the window’s close button*/
.jqx-window-close-button {
    cursor: pointer;
    background-image: url(./images/close.png);
    background-repeat: no-repeat;
    margin-top: 2px;
}

.jqx-window-close-button-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to the window's collapse button*/
.jqx-window-collapse-button {
    background-image: url(./images/icon-up.png);
    cursor: pointer;
    margin-top: 3px;
}

.jqx-window-collapse-button-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 10l3.5-3.5L12 10' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to the window's collapse button when the window is collapsed*/
.jqx-window-collapse-button-collapsed {
    margin-top: 3px;
    cursor: pointer;
    background-image: url(./images/icon-down.png);
}

.jqx-window-collapse-button-collapsed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 7l3.5 3.5L12 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*setting styles of the modal window’s background*/
.jqx-window-modal {
    background-color: Black;
}

.jqx-window-close-button-hover {}

.jqx-docking {
    overflow: hidden;
}

.jqx-docking-panel {
    margin: 0px;
    padding: 0px;
    min-height: 100px;
}

.jqx-docking-drop-indicator {
    border-style: dashed;
    border-width: 1px;
    margin: 0px;
}

.jqx-docking-window {
    margin: 0px;
}

/* jxSlider */
/* applied to jqxSlider widget */
.jqx-slider {
    outline: none;
    clear: both;
    position: relative;
    overflow: hidden;
}

/*applied to the ticks which can be in the top/bottom/both sides of the jqxSlider*/
.jqx-slider-tick {
    border-left: 1px solid transparent;
    z-index: 9;
}

/*applied to the ticks when the slider is in horizontal mode*/
.jqx-slider-tick-horizontal {
    width: 1px;
    border-left: none;
    margin-top: 1px;
}

/*applied to the ticks when the slider is in vertical mode*/
.jqx-slider-tick-vertical {
    height: 1px;
    border-top: none;
}

/*applied to the ticks container*/
.jqx-slider-tickscontainer {
    z-index: 10;
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
    z-index: 9;
}

.jqx-slider-tickscontainer-base {
    z-index: 10;
}

/*applied to the jqxSlider thumb used for changing/indicating current value*/
.jqx-slider-slider {
    cursor: pointer;
    width: 20px;
    height: 20px;
    z-index: 15;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 100%;
}

.jqx-slider-button {
    cursor: pointer;
    border-radius: 100%;
    box-sizing: content-box !important;
    padding: 3px !important;
}

/*applied to the slider's thumb when the slider is in horizontal mode*/
.jqx-slider-slider-horizontal {
    margin-top: -9px;
    border-radius: 100%;
    border: 1px solid transparent;
}

/*applied to the slider's thumb when the slider is in vertical mode*/
.jqx-slider-slider-vertical {
    margin-left: -9px;
    border-radius: 100%;
    border: 1px solid transparent;
}

/*applied to the track where is located the thumb*/
.jqx-slider-track {
    height: 4px;
    float: left;
    position: relative;
    z-index: 20;
    cursor: pointer;
}

/*used in horizontal slider*/
.jqx-slider-track-horizontal {
    height: 4px;
    margin-top: 2px;
}

/*used in vertical slider*/
.jqx-slider-track-vertical {
    width: 4px;
}

/*applied to the div which is between the thumbs in a range slider or from beginning of the track to the current thumb position in the default slider*/
.jqx-slider-rangebar {}

/* jqxSplitter */
.jqx-splitter {
    overflow: hidden;
    border: 1px solid transparent;
    position: relative;
}

/* Split bar's class when the jqxSplitter is with horizontal orientation */
.jqx-splitter-splitbar-vertical {
    border: 1px solid transparent;
    border-top-width: 0px;
    border-bottom-width: 0px;
    cursor: e-resize;
    cursor: col-resize;
    position: absolute;
}

.jqx-splitter-splitbar-vertical-base {
    cursor: e-resize;
}

/* Split bar's mouse over state */
.jqx-splitter-splitbar-hover {
    background-color: transparent;
}

/* Split bar's class when the jqxSplitter is with horizontal orientation. */
.jqx-splitter-splitbar-horizontal {
    position: absolute;
    border: 1px solid transparent;
    border-left-width: 0px;
    border-right-width: 0px;
    cursor: n-resize;
    cursor: row-resize;
}

.jqx-splitter-splitbar-horizontal-base {
    cursor: n-resize;
}

/* This class is applied to the splitter when it's dragged to it's max left/right boundary */
.jqx-splitter-splitbar-invalid {
    background: #FF0000 !important;
}

/* This class is added to split bar's collapse button when the splitter is with vectical orientation. */
.jqx-splitter-collapse-button-horizontal {
    cursor: pointer;
    width: 45px;
    height: 5px;
}

/* This class is added to split bar's collapse button when the splitter is with horizontal orientation. */
.jqx-splitter-collapse-button-vertical {
    cursor: pointer;
    width: 5px;
    height: 45px;
}

/* This class is added when the user disable the splitter. */
.jqx-splitter-splitbar-collapsed {
    cursor: default;
}

/* Applied to the jqxSplitter panels. */
.jqx-splitter-panel {
    border: none;
    outline: none;
    position: absolute;
    overflow: hidden;
}

/* This class is added to a nested splitter.*/
.jqx-splitter-nested,
.jqx-splitter-panel-nested {
    border: none;
    overflow: hidden;
}

.jqx-draggable {}

.jqx-draggable-dragging {
    border: 0px solid black;
}

.jqx-draggable-disabled {
    cursor: default;
}

.jqx-validator-hint {
    height: 18px;
    width: auto;
    display: inline-block;
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
    font-family: Verdana;
    font-size: 13px;
    border: 1px solid #6E0000;
    background-color: #942724;
    color: #fff;
    z-index: 99999;
    white-space: nowrap;
}

.jqx-validator-hint-arrow {
    z-index: 99999;
    height: 9px;
    width: 9px;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    background-image: url(./images/multi-arrow.gif);
}

.jqx-validator-error-label {
    color: #dd4b39;
    vertical-align: top;
    text-align: left;
    display: block;
    cursor: default;
    line-height: 17px;
}

.jqx-validator-error-element {
    border-color: #dd4b39 !important;
}

.jqx-switchbutton {
    outline: none;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.jqx-switchbutton[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.jqx-switchbutton-thumb {
    display: inline-block;
    cursor: pointer;
    border: 1px solid #ccc;
}

.jqx-switchbutton-label {
    font-size: 15px;
    font-family: Sans-Serif;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

.jqx-switchbutton-wrapper {}

.jqx-switchbutton-label-on {}

.jqx-switchbutton-label-off {}

/*left, right, up and down arrow icons.*/
.jqx-left-arrow {
    background: transparent;
    background-image: url('images/icon-left.png');
    cursor: pointer;
}

.jqx-left-arrow-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-right-arrow {
    background: transparent;
    background-image: url('images/icon-right.png');
    cursor: pointer;
}

.jqx-right-arrow-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-delete {
    background-image: url('images/icon-delete.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-edit {
    background-image: url('images/icon-edit.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-save {
    background-image: url('images/icon-save.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-cancel {
    background-image: url('images/icon-cancel.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-up,
.jqx-icon-arrow-up-hover,
.jqx-icon-arrow-up-selected {
    background-image: url('images/icon-up.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-up-base, .jqx-icon-arrow-up-hover-base, .jqx-icon-arrow-up-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 10l3.5-3.5L12 10' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-arrow-down,
.jqx-icon-arrow-down-hover,
.jqx-icon-arrow-down-selected {
    background-image: url('images/icon-down.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-down-base, .jqx-icon-arrow-down-hover-base, .jqx-icon-arrow-down-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 7l3.5 3.5L12 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-arrow-left,
.jqx-icon-arrow-left-hover,
.jqx-icon-arrow-left-selected {
    background-image: url('images/icon-left.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-left-base, .jqx-icon-arrow-left-hover-base, .jqx-icon-arrow-left-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-arrow-right,
.jqx-icon-arrow-right-hover,
.jqx-icon-arrow-right-selected {
    background-image: url('images/icon-right.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-right-base, .jqx-icon-arrow-right-hover-base, .jqx-icon-arrow-right-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-arrow-first,
.jqx-icon-arrow-first-hover,
.jqx-icon-arrow-first-selected {
    background-image: url('images/icon-first.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-first-base, .jqx-icon-arrow-first-hover-base, .jqx-icon-arrow-first-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M11 5L7.5 8.5 11 12M5.5 5v7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-arrow-last,
.jqx-icon-arrow-last-hover,
.jqx-icon-arrow-last-selected {
    background-image: url('images/icon-last.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-last-base, .jqx-icon-arrow-last-hover-base, .jqx-icon-arrow-last-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M6 5l3.5 3.5L6 12M11.5 5v7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-arrow-up-hover {
    background-image: url('images/icon-up.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-up-hover-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 10l3.5-3.5L12 10' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-arrow-down-hover {
    background-image: url('images/icon-down.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-down-hover-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 7l3.5 3.5L12 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-arrow-left-hover {
    background-image: url('images/icon-left.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-left-hover-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-arrow-right-hover {
    background-image: url('images/icon-right.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-right-hover-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-arrow-up-selected {
    background-image: url('images/icon-up.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-up-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 10l3.5-3.5L12 10' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-arrow-down-selected {
    background-image: url('images/icon-down.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-down-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 7l3.5 3.5L12 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-arrow-left-selected {
    background-image: url('images/icon-left.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-left-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-arrow-right-selected {
    background-image: url('images/icon-right.png');
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-arrow-right-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-close {
    cursor: pointer;
    background-image: url(./images/close.png);
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-close-base,
.jqx-icon-close-material,
.jqx-icon-close-material-purple,
.jqx-icon-close-material-green {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-close-white {
    background-image: url(./images/close_white.png);
}

.jqx-icon-close-white-base,
.jqx-icon-close-white-material,
.jqx-icon-close-white-material-purple,
.jqx-icon-close-white-material-green {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-close-hover {
    cursor: pointer;
    background-image: url(./images/close.png);
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-icon-close-hover-base,
.jqx-icon-close-hover-material,
.jqx-icon-close-hover-material-purple,
.jqx-icon-close-hover-material-green {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-search {
    cursor: pointer;
    background-image: url(./images/search.png);
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 1px;
    background-size: 13px;
    width: 13px;
    height: 13px;
}

.jqx-icon-search-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Ccircle cx='5.6' cy='5.6' r='3.9' fill='none' stroke='%23444' stroke-width='1.4'/%3E%3Cpath d='M8.5 8.5l3 3' fill='none' stroke='%23444' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-plus {
    background-image: url(./images/plus.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    width: 16px;
    height: 16px;
}

.jqx-icon-plus-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-plus-alt,
.jqx-icon-plus-alt-white {
    background-image: url(./images/icon-plus.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    width: 16px;
    height: 16px;
}

.jqx-icon-plus-alt-base, .jqx-icon-plus-alt-white-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-plus-alt-white {
    background-image: url(./images/icon-plus-white.png);
}

.jqx-icon-plus-alt-white-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* jqxScrollView */
.jqx-scrollview-button {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    display: inline-block;
    margin: 2px;
    cursor: pointer;
    background-color: #aaaeaf;
}

.jqx-scrollview {
    background-color: #000;
}

.jqx-icon-calendar,
.jqx-icon-calendar-hover,
.jqx-icon-calendar-pressed {
    background-image: url('images/icon-calendar.png');
    background-repeat: no-repeat;
    background-position: left top;
    position: relative;
    width: 15px !important;
    height: 15px !important;
    margin-top: -7.5px !important;
}

.jqx-icon-calendar-base, .jqx-icon-calendar-hover-base, .jqx-icon-calendar-pressed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15'%3E%3Crect x='1.5' y='2.5' width='11' height='11' rx='1.5' fill='none' stroke='%23444' stroke-width='1.2'/%3E%3Cpath d='M1.5 6h11M4.5 1v3M9.5 1v3' fill='none' stroke='%23444' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*applied to Inputs*/
.jqx-input-widget {
    box-sizing: border-box !important;
}

.jqx-input {
    overflow: hidden;
    background-color: inherit;
    border-color: var(--jqx-border); /* WCAG 1.4.11 - was #c7c7c7, 1.69:1 on white */
}

.jqx-input-invalid {
    color: red !important;
}

.jqx-input-group {
    overflow: hidden;
}

.jqx-input-group-addon {
    border: 1px solid transparent;
    position: relative;
    box-sizing: border-box !important;
    padding: 2px 8px !important;
    float: left;
    white-space: nowrap;
    vertical-align: middle;
}

.jqx-input-group-addon:first-child {
    border-right-width: 0px;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.jqx-input-group-addon:last-child {
    border-left-width: 0px;
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.jqx-input-group-addon:not(:last-child):not(:first-child) {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-left-width: 0px;
}

.jqx-input-group .jqx-input {
    padding: 2px 1px !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
}

.jqx-editor {
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    overflow: hidden;
    box-sizing: border-box !important;
}

.jqx-editor-window {
    overflow: hidden;
}

.jqx-editor-inline {
    padding: 0px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
}

.jqx-editor-inline p {
    margin: 0px;
    padding: 0 .2em;
}

.jqx-editor-inline-focus {
    border-width: 1px;
    border-style: solid;
    overflow: auto;
}

.jqx-editor iframe {
    border: 0;
    margin: 0;
    padding: 0;
    background: #fff;
    display: inline;
    vertical-align: top;
    width: 100%;
    height: 100%;
}

.jqx-editor-color-bar {
    height: 3px;
}

.jqx-editor-color-picker table {
    margin: 0;
    padding: 0 4px 4px;
    empty-cells: show;
    border-collapse: separate;
}

.jqx-editor-color-picker td {
    border-collapse: separate;
    border: 1px solid transparent;
    cursor: pointer;
    margin: 0;
    position: relative;
}

.jqx-editor-color-picker td:hover {
    border: 1px solid #000;
}

.jqx-editor-color-picker-selected-cell {
    outline: 1px solid #000;
}

.jqx-editor-color-picker td div {
    width: 16px;
    height: 16px;
}

.jqx-editor-content {
    width: 100%;
    border-style: solid;
    border-width: 1px;
    outline: 0;
    left: 0px;
    position: relative;
    box-sizing: border-box !important;
}

.jqx-editor-container {
    position: relative;
    padding: 4px;
    padding-top: 0px;
    width: 100%;
    height: 100%;
    box-sizing: border-box !important;
}

.jqx-editor-toolbar-container {
    top: 0px;
    left: 0px;
    box-sizing: border-box !important;
}

.jqx-editor-toolbar-inline {
    padding: 0px 4px;
    border-width: 1px;
    border-style: solid;
}

.jqx-editor-toolbar {
    margin: 0;
    padding: 0px;
    padding-bottom: 4px;
}

.jqx-editor-toolbar-icon {
    height: 21px;
    width: 21px;
    vertical-align: middle;
    opacity: .667;
    margin: 2px 0;
    background: url('images/html_editor.png') no-repeat;
}

.jqx-editor-toolbar-icon-bold {
    background-position: 0px 0px !important;
}

.jqx-editor-toolbar-icon-italic {
    background-position: -21px 0px !important;
}

.jqx-editor-toolbar-icon-underline {
    background-position: -42px 0px !important;
}

.jqx-editor-toolbar-icon-fontname {
    background-position: -63px 0px !important;
}

.jqx-editor-toolbar-icon-fontsize {
    background-position: -84px 0px !important;
}

.jqx-editor-toolbar-icon-createlink {
    background-position: -147px 0px !important;
}

.jqx-editor-toolbar-icon-insertorderedlist {
    background-position: -168px 0px !important;
}

.jqx-editor-toolbar-icon-insertunorderedlist {
    background-position: -189px 0px !important;
}

.jqx-editor-toolbar-icon-outdent {
    background-position: -210px 0px !important;
}

.jqx-editor-toolbar-icon-indent {
    background-position: -231px 0px !important;
}

.jqx-editor-toolbar-icon-insertimage {
    background-position: -337px 0px !important;
}

.jqx-editor-toolbar-icon-justifyleft {
    background-position: -252px 0px !important;
}

.jqx-editor-toolbar-icon-justifycenter {
    background-position: -273px 0px !important;
}

.jqx-editor-toolbar-icon-justifyright {
    background-position: -294px 0px !important;
}

.jqx-editor-toolbar-icon-removeformat {
    background-position: -316px 0px !important;
}

.jqx-editor-toolbar-icon-viewsource {
    background-position: -359px 0px !important;
}

.jqx-editor-toolbar-icon-forecolor {
    background-position: -105px 0px !important;
    height: 15px;
}

.jqx-editor-toolbar-icon-backcolor {
    background-position: -380px 0px !important;
    height: 15px;
}

.jqx-editor-toolbar-icon:hover {
    opacity: 1;
}

.jqx-fill-state-disabled .jqx-editor-toolbar-icon {
    opacity: .667;
}

.jqx-editor-toolbar-item {
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
}

.jqx-editor-toolbar-separator {
    border-left: 1px solid #ccc;
    margin: 0 2px;
    outline: none;
    overflow: hidden;
    padding: 0;
    text-decoration: none;
    vertical-align: middle;
    width: 0;
    display: inline-block;
}

.jqx-editor-toolbar-group {
    display: inline-block;
    margin-right: 4px;
    margin-top: 4px;
    white-space: nowrap;
}

.jqx-editor-toolbar-button {
    text-decoration: none;
    vertical-align: middle;
    cursor: default;
    display: inline-block;
    padding: 0px !important;
    margin-right: 2px;
}

.jqx-editor-toolbar-group .jqx-editor-toolbar-button {
    margin-right: -1px;
    box-shadow: none;
    position: relative;
    margin-left: 0px !important;
}

.jqx-editor-toolbar-group .jqx-editor-toolbar-button:hover,
.jqx-editor-toolbar-group .jqx-editor-toolbar-button:active {
    z-index: 55;
}

.jqx-editor-toolbar-group .jqx-editor-toolbar-button.jqx-fill-state-normal {
    background: transparent !important;
}

.jqx-date-time-input-popup table td a {
    border: 1px transparent solid;
    width: 100%;
    display: inline-block;
    margin: 0;
    padding: 0;
    outline: 0;
    color: #333;
}

.jqx-date-time-input-popup table td input {
    width: 30px;
    margin: 0;
    text-align: center;
    padding: 4px 6px;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
}

.jqx-scheduler .jqx-cell {
    padding: 0px !important;
    cursor: default;
}

.jqx-scheduler .jqx-widget-header.jqx-grid-header {
    border-bottom-color: transparent;
    border-bottom-width: 0px;
}

.jqx-scheduler .jqx-grid-column-header,
.jqx-scheduler.jqx-widget .jqx-grid-column-header {
    border-bottom: 1px solid #c5c5c5;
}

.jqx-scheduler[show-current] .jqx-grid-column-header.today,
.jqx-scheduler[show-current].jqx-widget .jqx-grid-column-header.today {
    border-bottom: 1px solid #0078D4;
}

.jqx-scheduler .current-appointment,
.jqx-scheduler .current-appointment .jqx-scheduler-appointment-content {
    border: 1px solid #0078D4;
}

.jqx-scheduler[show-current] .jqx-scheduler-month-day-today-cell .jqx-scheduler-month-cell {
    background: #0078D4;
    color: white;
    border-bottom-color: #0078D4;
}

.jqx-grid-column-header[sort]>div>div:not(.iconscontainer) {
    width: calc(100% - 20px);
}

.jqx-grid-column-header[sort][sort-index]>div>div:not(.iconscontainer) {
    width: calc(100% - 45px);
}
.jqx-grid-column-header[filter]>div>div:not(.iconscontainer) {
    width: calc(100% - 20px);
}

.jqx-grid-column-header[filter][sort]>div>div:not(.iconscontainer) {
    width: calc(100% - 40px);
}
.jqx-grid-column-header[filter][sort][sort-index]>div>div:not(.iconscontainer) {
    width: calc(100% - 65px);
}
.jqx-scheduler-all-day-cell {
    text-align: left;
}

.jqx-scheduler-all-day-cell span {
    margin-left: 3px;
}

.jqx-scheduler-month-cell {
    background: #f2f2f2;
    color: #000;
    opacity: 0.8;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: inherit;
    vertical-align: top;
    text-align: left;
}

.jqx-scheduler-month-cell-touch {
    background: transparent;
    border: none;
    vertical-align: middle;
    text-align: center;
}

.jqx-scheduler-month-cell-popup {
    border: 1px solid #333;
    background: #f2f2f2;
    box-shadow: 0 5px 0px rgba(0, 0, 0, .15) !important;
}

.jqx-widget .jqx-scheduler-middle-cell,
.jqx-scheduler-middle-cell {
    border-bottom-color: #ddd !important;
}

.jqx-scheduler-cell-selected.jqx-scheduler-middle-cell {
    border-bottom-style: dotted;
}

.jqx-scheduler-work-time-cell {
    background: #fff;
}

.jqx-scheduler-not-work-time-cell {
    background: #eee;
}

.jqx-scheduler-month-outer-cell {
    color: #555;
}

.jqx-scheduler-month-weekend-cell {
    background: #eee;
}

.jqx-scheduler-disabled-cell {
    background: #e9edf1;
}

/* blockedTimes: hatched over whatever colour the theme gives the cell, light and dark alike. By the
   attribute: the scheduler rewrites a cell's class list when its selection or hover changes */
.jqx-scheduler td[data-blocked] {
    /* important: with resources in columns a cell gets its colour as an inline background, which resets the image */
    background-image: repeating-linear-gradient(135deg, rgba(128, 128, 128, 0.22) 0, rgba(128, 128, 128, 0.22) 2px, transparent 2px, transparent 8px) !important;
    cursor: not-allowed;
}

/* why the edit dialog did not save: a scheduling rule, or a handler's args.reason.message */
.jqx-scheduler-edit-dialog-message {
    /* a row of its own under the floated label / field pairs */
    clear: both;
    box-sizing: border-box;
    width: 100%;
    margin: 4px 0 8px 0;
    padding: 6px 8px;
    border-left: 3px solid #c62828;
    font-size: 13px;
    line-height: 1.4;
}

.jqx-scheduler-blocked-label {
    display: block;
    overflow: hidden;
    padding: 2px 4px;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.8;
    pointer-events: none;
}

.jqx-scheduler-toolbar {
    font-size: 14px;
}

.jqx-scheduler-time-column,
.jqx-scheduler-toolbar {
    background-image: none !important;
    background: #fff !important;
    color: #333 !important;
}

.jqx-scheduler-week-number-column {
    background: #e8e8e8 !important;
    color: #333;
}

.jqx-scheduler-time-column-header-cell {
    border-left-color: transparent !important;
}

.jqx-scheduler-time-column-header-cell-rtl {
    border-right-color: transparent !important;
}

.jqx-scheduler-appointment {
    overflow: visible;
    border: 1px solid #555;
    white-space: pre-line;
    cursor: pointer;
    vertical-align: middle;
    text-overflow: ellipsis;
    user-select: none;
}

.jqx-scheduler-appointment-rtl {
    direction: rtl;
    text-align: right;
}

.jqx-scheduler-appointment-content {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    padding-left: 5px;
    padding-right: 5px;
}

.jqx-scheduler-appointment-inner-content {
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    padding-bottom: 3px;
}

.jqx-scheduler-appointment-duration-status {
    height: 0px;
    border-bottom-width: 2px;
    border-bottom-style: dotted;
    border-color: #f05c2d;
    background: #f05c2d;
    position: absolute;
    bottom: -1px;
    left: 0px;
    border-radius: 5px;
}

.jqx-scheduler-appointment-status {
    width: 4px;
    height: 100%;
    border-right-width: 1px;
    border-right-style: solid;
    position: absolute;
    top: 0px;
    left: 0px;
}

.jqx-scheduler-appointment-status-rtl {
    width: 4px;
    height: 100%;
    border-right-width: 0px;
    border-right-style: none;
    border-left-width: 1px;
    border-left-style: solid;
    position: absolute;
    top: 0px;
    right: 0px;
}

.jqx-scheduler-appointment-status-stripes {
    background-image: url('images/stripes.png');
    background-repeat: repeat-y;
    background-position: left top;
}

.jqx-scheduler-appointment-resize-indicator {
    width: 4px;
    height: 4px;
    position: absolute;
    border: 1px solid black;
    background: white;
    display: none;
}

.jqx-scheduler-appointment-top-resize-indicator {
    top: -3px;
    left: 50%;
    margin-left: -2px;
    cursor: row-resize;
}

.jqx-scheduler-appointment-bottom-resize-indicator {
    cursor: row-resize;
    bottom: -3px;
    left: 50%;
    margin-left: -2px;
}

.jqx-scheduler-appointment-left-resize-indicator {
    cursor: col-resize;
    top: 50%;
    left: -3px;
    margin-top: -2px;
}

.jqx-scheduler-appointment-right-resize-indicator {
    cursor: col-resize;
    top: 50%;
    margin-top: -2px;
    right: -3px;
}

.jqx-scheduler-appointment span {
    vertical-align: middle;
    text-overflow: ellipsis;
    position: relative;
    top: -1px;
}

.jqx-scheduler-feedback-appointment {
    opacity: 0.7;
    position: absolute;
    z-index: 99999;
}

.jqx-scheduler-selected-appointment {
    border: 1px solid #316293 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    white-space: pre-line;
}

.jqx-scheduler-feedback-drag-appointment {
    background: #aaa !important;
}

.jqx-icon-recurrence,
.jqx-icon-recurrence-exception,
.jqx-icon-recurrence-white,
.jqx-icon-recurrence-exception-white,
.jqx-icon-time {
    background-image: url('images/icon-recurrence.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    float: left;
    margin: 3px;
    margin-left: 5px;
}

.jqx-icon-time {
    background-image: url('images/icon-time.png');
    margin: 0px;
    position: relative;
    left: 1px;
    margin-top: -8px;
}

.jqx-icon-time-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23444' stroke-width='1.3'/%3E%3Cpath d='M8 4.8V8l2.4 1.6' fill='none' stroke='%23444' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-time-white {
    background-image: url('images/icon-time-white.png');
}

.jqx-icon-time-white-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3Cpath d='M8 4.8V8l2.4 1.6' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-icon-recurrence-exception {
    background-image: url('images/icon-recurrence-exception.png');
}

.jqx-icon-recurrence-exception-white {
    background-image: url('images/icon-recurrence-exception-white.png');
}

.jqx-icon-recurrence-white {
    background-image: url('images/icon-recurrence-white.png');
}

.jqx-scheduler-cell-hover {
    border-color: #3f7ebe !important;
    background: #a2c0df !important;
}

.jqx-scheduler-cell-selected {
    border-color: #316293 !important;
    background: #2f7eb6 !important;
}

.jqx-scheduler-edit-dialog-label {
    clear: both;
    float: left;
    margin-left: 2%;
    padding: 4px;
    text-align: right;
    width: 18%;
    line-height: 25px;
}

.jqx-scheduler-edit-dialog-field {
    clear: right;
    float: right;
    margin-right: 2%;
    padding: 4px;
    width: 380px;
}

/* The edit dialog: a grid of two columns, each label over its field - the title across, the start and
   end side by side, then time zone and repeat, the place and the notes, colour and status - and a footer
   with the deletes at the start and Cancel and Save at the end. The same in every theme: two classes
   win over the themes' floats, paddings and line heights for the label and field classes above. */
.jqx-scheduler-edit-dialog-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 14px;
    align-content: start;
    box-sizing: border-box;
    padding: 8px 6px 0;
}

.jqx-scheduler-edit-dialog-content-rtl {
    direction: rtl;
}

/* a field across both columns, unless it shares a row */
.jqx-scheduler-edit-dialog-content > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.jqx-scheduler-edit-dialog-content > .jqx-scheduler-edit-dialog-half {
    grid-column: auto / span 1;
}

.jqx-scheduler-edit-dialog-content .jqx-scheduler-edit-dialog-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 12px 0;
}

.jqx-scheduler-edit-dialog-row > .jqx-scheduler-edit-dialog-label {
    flex: none;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-align: start;
    overflow-wrap: anywhere;
}

/* labels that only line their fields up with the ones above: none needed when the label is over the field */
.jqx-scheduler-edit-dialog-content > :not(.jqx-scheduler-edit-dialog-repeat-panel) .jqx-scheduler-edit-dialog-row > .jqx-scheduler-edit-dialog-label:empty {
    display: none;
}

.jqx-scheduler-edit-dialog-row > .jqx-scheduler-edit-dialog-field {
    flex: none;
    min-width: 0;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    line-height: normal;
}

/* All day and Reset on Save: the box, then what it is */
.jqx-scheduler-edit-dialog-content > .jqx-scheduler-edit-dialog-check .jqx-scheduler-edit-dialog-row {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: -4px;
}

.jqx-scheduler-edit-dialog-check .jqx-scheduler-edit-dialog-row > .jqx-scheduler-edit-dialog-label {
    font-weight: normal;
    font-size: inherit;
}

/* the repeat options: an inset, each label beside its controls */
.jqx-scheduler-edit-dialog-content > .jqx-scheduler-edit-dialog-repeat-panel {
    box-sizing: border-box;
    border-radius: 6px;
    background: rgba(128, 128, 128, 0.08);
    padding: 0 12px;
}

.jqx-scheduler-edit-dialog-repeat-panel:has(.jqx-scheduler-edit-dialog-row) {
    margin-bottom: 12px;
    padding-top: 12px;
}

.jqx-scheduler-edit-dialog-repeat-panel .jqx-scheduler-edit-dialog-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.jqx-scheduler-edit-dialog-repeat-panel .jqx-scheduler-edit-dialog-row > .jqx-scheduler-edit-dialog-label {
    flex: 0 0 92px;
}

.jqx-scheduler-edit-dialog-repeat-panel .jqx-scheduler-edit-dialog-row > .jqx-scheduler-edit-dialog-field {
    flex: 1 1 auto;
}

/* the footer */
/* it stays in view when the repeat options make the dialog scroll */
.jqx-scheduler-edit-dialog-content > .jqx-scheduler-edit-dialog-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 2px -6px 0;
    padding: 12px 6px 8px;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    background: inherit;
}

.jqx-scheduler-edit-dialog-footer > .jqx-scheduler-edit-dialog-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

.jqx-scheduler-edit-dialog-buttons > button {
    float: none;
    margin: 0;
    min-width: 80px;
    order: 2;
}

.jqx-scheduler-edit-dialog-buttons > .jqx-scheduler-edit-dialog-delete {
    order: 0;
}

/* the first delete keeps the others at the end */
.jqx-scheduler-edit-dialog-buttons > .jqx-scheduler-edit-dialog-cancel {
    order: 1;
    margin-inline-start: auto;
}

/* the days of a weekly repeat */
.jqx-scheduler-edit-dialog-days {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.jqx-scheduler-edit-dialog-days > .jqx-checkbox {
    float: none;
}

.jqx-scheduler-edit-dialog-label-rtl {
    clear: both;
    float: right;
    margin-left: 0px;
    margin-right: 2%;
    padding: 4px;
    text-align: left;
    width: 18%;
    line-height: 25px;
}

.jqx-scheduler-edit-dialog-field-rtl {
    clear: left;
    float: left;
    margin-right: 0px;
    margin-left: 2%;
    padding: 4px;
    width: 72%;
}

.jqx-scheduler-legend-bar {
    overflow: hidden;
    border-color: inherit;
    border: none;
}

.jqx-scheduler-legend-bar-bottom {
    border-top-width: 1px;
    border-top-style: solid;
}

.jqx-scheduler-legend-bar-top {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.jqx-scheduler-legend {
    width: 14px;
    height: 14px;
    float: left;
    margin-right: 3px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    vertical-align: middle;
    margin-top: 4px;
}

.jqx-scheduler-legend-label {
    float: left;
    margin-right: 12px;
    cursor: pointer;
    vertical-align: middle;
    margin-top: 4px;
}

.jqx-scheduler-cell-selected .jqx-scheduler-agenda-date {
    color: #fff;
}

.jqx-scheduler-cell-selected .jqx-scheduler-agenda-time {
    color: #fff;
}

.jqx-scheduler-cell-selected .jqx-scheduler-agenda-appointment,
.jqx-scheduler-cell-selected .jqx-scheduler-agenda-appointment-rtl {
    color: #fff;
}

.jqx-scheduler-agenda-date {
    padding-top: 5px;
    padding-bottom: 5px;
}

.jqx-scheduler-agenda-time {
    padding: 5px;
}

.jqx-scheduler-agenda-appointment,
.jqx-scheduler-agenda-appointment-rtl {
    cursor: pointer;
}

.jqx-scheduler-agenda-appointment-resource,
.jqx-scheduler-agenda-appointment-resource-rtl {
    margin: 5px;
    cursor: pointer;
}

.jqx-scheduler-agenda-appointment-resource-rtl,
.jqx-scheduler-agenda-appointment-rtl {
    float: right;
}

.jqx-scheduler-agenda-day {
    margin: 3px;
    font-size: 33px;
    font-weight: normal;
}

.jqx-scheduler-agenda-week {
    font-style: normal;
    font-size: 13px;
}

.jqx-scheduler-agenda-date {
    font-size: 10px;
}

.jqx-scheduler-cell-focus {
    border-style: dotted;
    border-color: #59a0d5 !important;
    background: #59a0d5 !important;
}

/* The scheduler's look, in every theme: the day and week headers name the date, today's in the theme's
   accent; the time ruler reads from the top of each hour; a line marks the current time; the month view's
   dates are numbers, not strips; appointments are rounded and lift on hover. Colours stay the theme's. */
.jqx-scheduler .jqx-scheduler-day-header {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.jqx-scheduler-rtl .jqx-scheduler-day-header,
.jqx-scheduler .jqx-grid-column-header-rtl .jqx-scheduler-day-header {
    flex-direction: row-reverse;
}

.jqx-scheduler .jqx-scheduler-day-header-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* important: the themes size every header span, and a pressed state may pad it */
.jqx-scheduler .jqx-grid-column-header .jqx-scheduler-day-header-date {
    flex: none;
    display: inline-block;
    box-sizing: border-box;
    min-width: 26px;
    height: 26px !important;
    margin: -4px 0;
    padding: 0 3px !important;
    border: none !important;
    border-radius: 13px;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 26px !important;
    text-align: center;
}

.jqx-scheduler td.jqx-scheduler-time-column[data-time-slot]:not(.jqx-scheduler-week-number-column) {
    padding: 5px 8px 0 4px !important;
    vertical-align: top !important;
    text-align: right !important;
    font-size: 12px;
    line-height: 16px;
}

.jqx-scheduler .jqx-scheduler-now-line {
    position: absolute;
    z-index: 398;
    height: 2px;
    background: #d92d20;
    pointer-events: none;
}

.jqx-scheduler .jqx-scheduler-now-line::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d92d20;
}

.jqx-scheduler .jqx-scheduler-month-cell,
.jqx-scheduler[show-current] .jqx-scheduler-month-day-today-cell .jqx-scheduler-month-cell {
    padding: 3px 4px 1px;
    border-bottom-color: transparent !important;
    background: transparent !important;
    color: inherit;
    opacity: 1;
}

.jqx-scheduler .jqx-scheduler-month-cell .jqx-scheduler-month-day-number {
    display: inline-block;
    box-sizing: border-box;
    min-width: 22px;
    height: 22px !important;
    padding: 0 5px !important;
    border: none !important;
    border-radius: 11px;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 22px !important;
    text-align: center;
}

.jqx-scheduler .jqx-scheduler-appointment.jqx-rc-all {
    border-radius: 6px;
}

.jqx-scheduler .jqx-scheduler-appointment {
    transition: box-shadow 0.12s ease;
}

.jqx-scheduler .jqx-scheduler-appointment:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* important: the themes give the scheduler's cell text 10px, for the dates the all-day cells used to show */
.jqx-scheduler td .jqx-scheduler-agenda-appointment,
.jqx-scheduler td .jqx-scheduler-agenda-appointment-rtl {
    font-size: 13px !important;
}

.jqx-scheduler td .jqx-scheduler-agenda-time {
    font-size: 12px !important;
}

.jqx-scheduler .jqx-scheduler-toolbar-today {
    font-size: 13px;
}

.jqx-scheduler .jqx-scheduler-legend {
    border-radius: 3px;
}

/* the year view: the twelve months as small calendars */
.jqx-scheduler .jqx-scheduler-year-cell {
    padding: 0;
    border: none;
    vertical-align: top;
    white-space: normal;
}

.jqx-scheduler-year {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: 18px 28px;
    padding: 16px 20px 20px;
    box-sizing: border-box;
}

.jqx-scheduler-year-month-title {
    margin: 0 6px 6px;
    text-align: start;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.jqx-scheduler-year-month-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

.jqx-scheduler-year-month-table th {
    padding: 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
    opacity: 0.75;
}

.jqx-scheduler-year-day,
.jqx-scheduler-year-day-empty {
    height: 31px;
    padding: 0;
    border: none;
    text-align: center;
    vertical-align: top;
}

.jqx-scheduler-year-day {
    position: relative;
    cursor: pointer;
    outline: none;
}

/* important: a theme's pressed state - today's accent - may pad or border it */
.jqx-scheduler .jqx-scheduler-year-day-number {
    display: inline-block;
    box-sizing: border-box;
    width: 25px;
    height: 25px !important;
    margin-top: 1px;
    padding: 0 !important;
    border: none !important;
    border-radius: 50%;
    font-size: 12px !important;
    line-height: 25px !important;
}

.jqx-scheduler-year-day:hover .jqx-scheduler-year-day-number:not(.jqx-fill-state-pressed) {
    background-color: rgba(128, 128, 128, 0.16);
}

.jqx-scheduler-year-day-busy .jqx-scheduler-year-day-number {
    font-weight: 600;
}

.jqx-scheduler-year-day-selected .jqx-scheduler-year-day-number {
    box-shadow: inset 0 0 0 1.5px currentColor;
}

.jqx-scheduler-year-day:focus-visible .jqx-scheduler-year-day-number {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.jqx-scheduler-year-day-dots {
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}

.jqx-scheduler-year-day-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

/*applied to all widgets*/
.jqx-widget {
    box-sizing: content-box;
    color: #000000;
    -webkit-text-size-adjust: none;
    -webkit-appearance: none;
    background-clip: padding-box;
    direction: ltr !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: Verdana, Arial, sans-serif;
    font-style: normal;
    font-size: 13px;
}

.jqx-widget-base {
    color: #1f1f1f;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.jqx-item {
    box-sizing: content-box;
    color: inherit;
    -webkit-text-size-adjust: none;
}

/*applied to containers to set a background and border color. Tabs, NavigationBar, Calendar content.*/
.jqx-widget-content {
    box-sizing: content-box;
    -webkit-text-size-adjust: none;
    background-clip: padding-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: Verdana, Arial, sans-serif;
    font-style: normal;
    font-size: 13px;
    border-color: var(--jqx-border); /* WCAG 1.4.11 - was #c7c7c7, 1.69:1 on white */
    background: #fff;
}

.jqx-widget-content-base {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/*applied to header areas. Tabs, Menu, Window, Calendar.*/
.jqx-widget-header {
    box-sizing: content-box;
    -webkit-text-size-adjust: none;
    background-clip: padding-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border-color: #c5c5c5;
    background: #e8e8e8;
}

.jqx-widget-header-base {
    background: #f5f5f5;
}

.jqx-fill-state-normal {
    box-sizing: content-box;
    font-family: Verdana, Arial, sans-serif;
    font-style: normal;
    font-size: 13px;
    border-color: var(--jqx-border); /* WCAG 1.4.11 - was #aaa, 2.32:1 on white */
    background: #efefef;
}

.jqx-fill-state-normal-base {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    background: #fafafa;
}

.jqx-fill-state-hover {
    box-sizing: content-box;
    border-color: #999;
    background: #e8e8e8;
}

.jqx-fill-state-hover-base {
    border-color: #767676;
    background: #f0f0f0;
}

.jqx-fill-state-pressed {
    box-sizing: content-box;
    border-color: #999;
    background: #d1d1d1;
}

.jqx-fill-state-pressed-base {
    border-color: #005c99;
    background: #dde9f2;
}

.jqx-fill-state-focus {
    border-color: #555;
}

.jqx-fill-state-focus-base {
    border-color: #005c99;
}

.jqx-fill-state-disabled {
    cursor: default;
    color: #000;
    opacity: .55;
}

.jqx-grid.jqx-fill-state-disabled {
    pointer-events: none;
}

.jqx-fill-state-normal td,
.jqx-fill-state-hover td,
.jqx-fill-state-pressed td,
.jqx-fill-state-disabled td,
.jqx-fill-state-focus td,
.jqx-widget td,
.jqx-widget-content td,
.jqx-widget-header td {
    box-sizing: border-box;
}

.jqx-widget .jqx-grid-cell,
.jqx-widget .jqx-grid-column-header,
.jqx-widget .jqx-grid-group-cell {
    border-color: #aaa;
}

.jqx-widget .jqx-grid-column-menubutton,
.jqx-widget .jqx-grid-column-sortascbutton,
.jqx-widget .jqx-grid-column-sortdescbutton,
.jqx-widget .jqx-grid-column-filterbutton {
    background-color: transparent;
    border-color: #aaa;
}

.jqx-grid-column-header a:link,
.jqx-grid-column-header a:visited {}

.jqx-grid-bottomright,
.jqx-panel-bottomright,
.jqx-listbox-bottomright {
    background-color: #e5e5e5;
}

.jqx-tabs-title-selected-top {
    border-color: var(--jqx-border-strong); /* WCAG 1.4.11 - was #aaa, 1.9:1 on the #e8e8e8 tab header */
    border-bottom: 1px solid #fff;
    background-color: #fff;
}

/*applied to the tab's title when the tab is selected and the jqxTab's position property is set to 'bottom' .*/
.jqx-tabs-title-selected-bottom {
    border-color: var(--jqx-border-strong); /* WCAG 1.4.11 - was #aaa */
    border-top: 1px solid #fff;
    background-color: #fff;
}

/*applied to the tab's selection tracker when the jqxTab's position property is set to 'top'.*/
.jqx-tabs-selection-tracker-top {
    border-color: var(--jqx-border-strong); /* WCAG 1.4.11 - was #aaa */
    border-bottom: 1px solid #fff;
}

/*applied to the tab's selection tracker when the jqxTab's position property is set to 'bottom'.*/
.jqx-tabs-selection-tracker-bottom {
    border-color: var(--jqx-border-strong); /* WCAG 1.4.11 - was #aaa */
    border-top: 1px solid #fff;
}

/*jqxMaskedInput and jqxNumberInput Styles*/
.jqx-input {
    -webkit-appearance: none;
    padding: 0 0 0 0;
    outline: none;
    border-width: 1px;
    border-style: solid;
    background-clip: padding-box;
}

input[type=text].jqx-input,
input[type=password].jqx-input {
    min-height: 16px;
    min-width: 16px;
    margin: 0px;
    border-width: 1px;
    border-style: solid;
    font-size: 13px;
    padding: 3px;
    padding-left: 3px;
    padding-right: 3px;
}

.jqx-input::-ms-reveal {
    display: none;
}

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

.jqx-input-content::-ms-clear {
    display: none;
}

/*applied to the input when the validation fails.*/
.jqx-input-invalid {
    border-color: #dd4b39 !important;
}

/*applied to the input's content.*/
.jqx-input-content {
    -webkit-appearance: none;
    padding: 1px;
    resize: none;
    outline: none;
    outline-width: 0px;
    -webkit-user-modify: inherit;
    -moz-user-modify: inherit;
    background-clip: padding-box;
}

/*applied to the input when it is disabled.*/
.jqx-input-disabled {
    -webkit-appearance: none;
    resize: none;
    outline: none;
    outline-width: 0px;
}

/*applied to the list menu.*/
.jqx-listmenu-widget {
}

.jqx-listmenu-widget .jqx-widget-content {
}

.jqx-listmenu-widget .jqx-widget-header {
}

.jqx-listmenu-widget li {
}

.jqx-menu-popup {}

.jqx-menu-vertical {
    background-color: #efefef;
}

.jqx-color-picker {}

.jqx-color-picker-panel {}

.jqx-color-picker-map {
    border: 1px solid #A0A0A0;
    background-color: transparent;
    background-image: url('images/colorpicker/map-saturation.png');
    background-repeat: no-repeat;
    background-position: left top;
    overflow: hidden;
}

.jqx-color-picker-map-hue {
    border: 1px solid #A0A0A0;
    background-color: transparent;
    background-image: url('images/colorpicker/map-hue.png');
    background-repeat: no-repeat;
    background-position: left top;
    overflow: hidden;
}

.jqx-color-picker-map-overlay {
    background-color: transparent;
    background-image: url('images/colorpicker/map-saturation-overlay.png');
    background-repeat: no-repeat;
    background-position: left top;
}

.jqx-color-picker-bar {
    border: 1px solid #A0A0A0;
    background-color: transparent;
    background-image: url('images/colorpicker/bar-saturation.png');
    background-repeat: no-repeat;
    background-position: left top;
}

.jqx-color-picker-bar-hue {
    border: 1px solid #A0A0A0;
    background-color: transparent;
    background-image: url('images/colorpicker/bar-hue.png');
    background-repeat: no-repeat;
    background-position: left top;
}

.jqx-color-picker-preview {
    border: 1px solid #A0A0A0;
}

.jqx-color-picker-pointer {
    background-image: url('images/crosshair.png');
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
}

.jqx-color-picker-pointer-alt {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v5M8 11v5M0 8h5M11 8h5' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
}

.jqx-color-picker-bar-pointer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M15 2v12L9 8z' fill='%23454545'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    height: 15px;
    margin-left: 6px;
    background-position: right top;
}

.jqx-icon {
    width: 16px;
    height: 16px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    margin-top: -8px;
}

.jqx-input-icon {
    width: 13px;
    height: 13px;
    margin: 0 auto;
}

.jqx-scrollbar-thumb-state-normal-touch {
    border-color: #c3c3c3;
    background: #c3c3c3;
}

.jqx-touch,
.jqx-touch .jqx-fill-state-normal,
.jqx-touch .jqx-widget-content,
.jqx-touch .jqx-widget-header,
.jqx-touch a:link {}

.jqx-scrollbar .jqx-icon-arrow-up {
    width: 100%;
    height: 100%;
}

.jqx-scrollbar .jqx-icon-arrow-down {
    width: 100%;
    height: 100%;
}

.jqx-scrollbar .jqx-icon-arrow-left {
    width: 100%;
    height: 100%;
}

.jqx-scrollbar .jqx-icon-arrow-right {
    width: 100%;
    height: 100%;
}

/*jqx-listmenu*/
.jqx-listmenu-widget {
    border-width: 1px;
    border-style: solid;
}

ol.jqx-listmenu,
ul.jqx-listmenu {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    line-height: 1;
    counter-reset: section;
}

.jqx-listmenu li {
    margin-left: 0px;
    list-style: none;
    line-height: 1;
}

.jqx-listmenu {
    width: 100%;
}

.jqx-listmenu-header {
    padding: 15px;
}

.jqx-listmenu-item {
    cursor: pointer;
    padding: 15px;
    float: none;
    overflow: hidden;
    text-align: left;
    position: relative;
}

.jqx-listmenu-separator {
    padding: 10px;
    counter-reset: section;
}

.jqx-listmenu-header-label {
    margin-left: 30px;
}

.jqx-listmenu-arrow-right {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 7px;
}

.jqx-listmenu-arrow-rtl {
    right: 0px;
    left: 7px;
}

.jqx-listmenu-arrow-right-pressed {
    width: 16px;
    height: 16px;
}

.jqx-listmenu-header .jqx-button {
    border-radius: 10px;
    padding: 6px 10px;
}

.jqx-listmenu-filter-input {
    border-radius: 3px;
    border: 1px solid;
    outline: none;
    width: 97%;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    border-color: #c7c7c7;
    background-color: #fff;
    font-size: 20px;
    min-height: 25px !important;
    height: 25px;
}

.jqx-listmenu-filter {
    text-align: center;
    padding: 4px;
}

ol li .jqx-listmenu-item-label:before {
    content: counter(section) ". ";
    counter-increment: section;
}

.jqx-listmenu div {
    clear: both;
}

.jqx-listmenu-auto-separator {}

.jqx-listmenu-item-readonly {
    cursor: default;
}

.jqx-tooltip {
    position: absolute;
    width: auto;
    height: auto;
}

.jqx-tooltip-main {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    filter: inherit;
    border-style: solid;
    border-width: 1px;
}

.jqx-tooltip-text {
    padding: 5px 8px;
    overflow: hidden;
    filter: inherit;
}

.jqx-tooltip,
.jqx-tooltip-text,
.jqx-tooltip-main {
    border-radius: 5px;
    background-clip: padding-box;
}

.jqx-tooltip-arrow {
    position: absolute;
    width: 0px;
    height: 0px;
    display: block;
    border-style: solid;
    margin: -6px 0 0 -7px;
    background: transparent !important;
    filter: inherit;
}

.jqx-tooltip-arrow-t-b {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

.jqx-tooltip-arrow-l-r {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

/*Sets the text-alignment to right.*/
.jqx-rtl {
    text-align: right !important;
}

.jqx-shadow {
    box-shadow: 0 2px 3px rgba(0, 0, 0, .15) !important;
}

.jqx-noshadow {
    box-shadow: none !important;
}

.jqx-passwordinput-password-icon,
.jqx-passwordinput-password-icon-rtl {
    background-image: url(./images/icon-showpassword.png) !important;
    background-repeat: no-repeat !important;
    width: 14px;
    height: 9px;
}

.jqx-passwordinput-password-icon-ltr {
    background-position: right !important;
}

.jqx-passwordinput-password-icon-rtl {
    background-position: left !important;
}

.jqx-passwordinput-password-strength-inicator {
    width: 20%;
    height: 5px;
    margin-top: 5px;
}

/*top rounded Corners*/
.jqx-rc-t-expanded {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

/*bottom rounded Corners*/
.jqx-rc-b-expanded {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.jqx-treemap-rectangle {
    font-size: 13px;
    font-weight: normal;
    border: 1px solid #555;
    color: #222;
    text-shadow: 0px 0px 0px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jqx-treemap-label {
    text-overflow: ellipsis;
    overflow: hidden;
}

.jqx-treemap-rectangle-parent {
    color: #222;
    font-size: 15px;
    font-family: Verdana;
    font-weight: bold;
}

/* The legend is laid over the map's own rectangles, so it is a solid panel in the theme's
   colours: on the old 10% black tint, no one text colour read over both light and dark cells. */
.jqx-treemap-legend-label {
    color: var(--jqx-background-color, #333);
}

.jqx-treemap-legend {
    width: 350px;
    background-color: var(--jqx-background, #fff);
    border: 1px solid var(--jqx-border, #949494);
    z-index: 41;
    overflow: hidden;
}

.jqx-treemap-legend-table {
    table-layout: fixed;
    width: 100%;
}

.jqx-treemap-legend-color {
    height: 3px;
}

.jqx-treemap-legend-values {
    height: 12px;
    width: 100%;
}

.jqx-treemap-legend-value {
    font-size: 9px;
    position: absolute;
    color: var(--jqx-background-color, #333);
}

.jqx-treemap-rectangle-hover {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    z-index: 40;
}

/*jqxRangeSelector*/
.jqx-rangeselector,
.jqx-rangeselector-content,
.jqx-rangeselector-slider,
.jqx-rangeselector-markers,
.jqx-rangeselector-ticks-container,
.jqx-rangeselector-ticks,
.jqx-rangeselector-shutter {
    box-shadow: none !important;
    box-sizing: content-box !important;
}

.jqx-rangeselector-markers {}

.jqx-rangeselector-content,
.jqx-rangeselector-ticks,
.jqx-rangeselector-labels,
.jqx-rangeselector-shutter,
.jqx-rangeselector-markers,
.jqx-rangeselector-marker-arrow {
    position: absolute;
}

.jqx-rangeselector-ticks-container,
.jqx-rangeselector-ticks,
.jqx-rangeselector-shutter,
.jqx-rangeselector-slider {
    height: 100%;
}

.jqx-rangeselector-ticks-container,
.jqx-rangeselector-slider {
    width: 100%;
    box-shadow: none !important;
    border-radius: 0px !important;
}

.jqx-rangeselector-group-labels-rtl,
.jqx-rangeselector-group-labels-ticks,
.jqx-rangeselector-slider {
    float: left;
}

.jqx-rangeselector-slider,
.jqx-rangeselector-markers,
.jqx-rangeselector-marker-arrow {
    border-style: solid;
}

.jqx-rangeselector-ticks,
.jqx-rangeselector-group-labels-ticks {
    width: 1px;
    background: #aaa;
}

.jqx-rangeselector-labels,
.jqx-rangeselector-markers {
    white-space: nowrap;
    width: auto;
}

.jqx-rangeselector-slider,
.jqx-rangeselector-markers {
    border-width: 1px !important;
}

.jqx-rangeselector-ticks-container {
    background-color: transparent;
    position: relative;
}

.jqx-rangeselector-shutter {
    opacity: 0.75;
    background: #efefef;
    border-width: 0px !important;
}

.jqx-rangeselector-slider {
    background-color: transparent !important;
    border-top: none !important;
    background-image: none !important;
    border-bottom: none !important;
    border-color: #aaa;
    border-right-color: transparent !important;
    position: relative;
    overflow: hidden;
}

.jqx-rangeselector-inner-slider {
    position: absolute;
    right: 0;
    background: #aaa;
    width: 1px;
    height: 100%;
}

.jqx-rangeselector-ticks {
    margin-top: 0px;
}

.jqx-rangeselector-labels,
.jqx-rangeselector-group-labels {
    margin-top: 4px;
}

.jqx-rangeselector-markers {
    height: 20px;
    padding: 5px;
    opacity: 0.75;
}

.jqx-rangeselector-marker-arrow {
    width: 0px;
    height: 0px;
    display: block;
    margin: -6px 0 0 -7px;
    background-color: transparent !important;
    filter: inherit;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
    background-clip: border-box;
    background-repeat: repeat;
    box-shadow: none !important;
    background-image: none !important;
}

.jqx-rangeselector-marker-arrow-top {
    border-bottom-color: transparent !important;
}

.jqx-rangeselector-marker-arrow-bottom {
    border-top-color: transparent !important;
}

.jqx-rangeselector-marker-left-arrow {
    border-right-width: 0px;
    border-left-width: 5px;
}

.jqx-rangeselector-marker-right-arrow {
    border-right-width: 5px;
    border-left-width: 0px;
}

.jqx-rangeselector-markers-value {
    overflow: hidden;
    white-space: nowrap;
}

.jqx-rangeselector-group-labels-rtl {
    margin-right: 10px;
    direction: rtl;
}

.jqx-rangeselector-group-labels-ticks {
    height: 17px;
}

.jqx-rangeselector-group-labels-ticks-rtl {
    margin-left: 5px;
}

.jqx-action-button {
    border: none;
    border-left: 1px solid #c7c7c7;
}

.jqx-action-button-rtl {
    border: none;
    border-right: 1px solid #c7c7c7;
    cursor: pointer;
}

/*jqxBulletChart*/
.jqx-bulletchart {}

.jqx-bulletchart,
.jqx-bulletchart-title-container-horizontal,
.jqx-bulletchart-title-container-vertical,
.jqx-bulletchart-chart-container-horizontal,
.jqx-bulletchart-chart-container-vertical {
    position: relative;
}

.jqx-bulletchart-title-inner-container,
.jqx-bulletchart-range,
.jqx-bulletchart-pointer,
.jqx-bulletchart-target,
.jqx-bulletchart-ticks,
.jqx-bulletchart-labels {
    position: absolute;
}

.jqx-bulletchart-title-container-vertical,
.jqx-bulletchart-title,
.jqx-bulletchart-description,
.jqx-bulletchart-range-vertical {
    width: 100%;
}

.jqx-bulletchart-title-container-horizontal,
.jqx-bulletchart-chart-container-horizontal {
    float: left;
    overflow: hidden;
}

.jqx-bulletchart-title,
.jqx-bulletchart-description {
    text-align: center;
}

.jqx-bulletchart-title-inner-container {
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.jqx-bulletchart-title-inner-container-ltr {
    padding-right: 5px;
}

.jqx-bulletchart-title-inner-container-rtl {
    padding-left: 5px;
}

.jqx-bulletchart-title-description-ltr {
    text-align: right;
}

.jqx-bulletchart-title-description-rtl {
    text-align: left;
}

.jqx-bulletchart-title-description-vertical {
    text-align: center;
}

.jqx-bulletchart-title {
    font-size: 110%;
    font-weight: bold;
}

.jqx-bulletchart-description {
    font-size: 90%;
}

.jqx-bulletchart-range-horizontal {
    height: 100%;
}

.jqx-bulletchart-target-horizontal {
    top: 10%;
    height: 80%;
}

.jqx-bulletchart-target-vertical {
    left: 10%;
    width: 80%;
}

.jqx-bulletchart-ticks {
    background-color: #AAAAAA;
}

.jqx-bulletchart-ticks-horizontal {
    width: 1px;
}

.jqx-bulletchart-ticks-vertical {
    height: 1px;
}

.jqx-bulletchart-zero-tick {}

.jqx-bulletchart-labels {}

/*jqxNotification*/
.jqx-notification {
    padding: 10px;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    pointer-events: auto;
}

.jqx-notification-table {
    width: 100%;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    color: inherit;
}

.jqx-notification-container {
    position: fixed;
    height: auto;
    width: auto;
    pointer-events: none;
}

.jqx-notification-container-full-width {
    width: 100%;
}

.jqx-notification-container-full-height {
    height: 100%;
}

#jqxNotificationDefaultContainer-top-right,
#jqxNotificationDefaultContainer-bottom-left {
    direction: rtl;
}

.jqx-notification-icon,
.jqx-notification-content {
    vertical-align: middle;
}

.jqx-notification-content {}

.jqx-notification-content-rtl {
    direction: rtl;
}

/* Template colours: Bootstrap 3's hues, darkened until white text reaches WCAG AA -
   info #1a7f9c 4.61:1, warning #b35900 4.83:1, success #398439 4.63:1, danger #d43f3a
   4.59:1, primary #337ab7 4.56:1, link #0072a8 5.29:1 on white. */
.jqx-link,
.jqx-inverse,
.jqx-primary,
.jqx-warning,
.jqx-danger,
.jqx-success,
.jqx-info {
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.jqx-primary .jqx-icon-calendar,
.jqx-primary .jqx-icon-calendar-hover,
.jqx-primary .jqx-icon-calendar-pressed {
    background-image: url('images/icon-calendar-white.png');
}

.jqx-primary-base .jqx-icon-calendar-base, .jqx-primary-base .jqx-icon-calendar-hover-base, .jqx-primary-base .jqx-icon-calendar-pressed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15'%3E%3Crect x='1.5' y='2.5' width='11' height='11' rx='1.5' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3Cpath d='M1.5 6h11M4.5 1v3M9.5 1v3' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-primary .jqx-icon-time,
.jqx-primary .jqx-icon-time-hover,
.jqx-primary .jqx-icon-time-pressed {
    background-image: url('images/icon-time-white.png');
}

.jqx-primary-base .jqx-icon-time-base, .jqx-primary-base .jqx-icon-time-hover-base, .jqx-primary-base .jqx-icon-time-pressed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3Cpath d='M8 4.8V8l2.4 1.6' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-success .jqx-icon-calendar,
.jqx-success .jqx-icon-calendar-hover,
.jqx-success .jqx-icon-calendar-pressed {
    background-image: url('images/icon-calendar-white.png');
}

.jqx-success-base .jqx-icon-calendar-base, .jqx-success-base .jqx-icon-calendar-hover-base, .jqx-success-base .jqx-icon-calendar-pressed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15'%3E%3Crect x='1.5' y='2.5' width='11' height='11' rx='1.5' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3Cpath d='M1.5 6h11M4.5 1v3M9.5 1v3' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-success .jqx-icon-time,
.jqx-success .jqx-icon-time-hover,
.jqx-success .jqx-icon-time-pressed {
    background-image: url('images/icon-time-white.png');
}

.jqx-success-base .jqx-icon-time-base, .jqx-success-base .jqx-icon-time-hover-base, .jqx-success-base .jqx-icon-time-pressed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3Cpath d='M8 4.8V8l2.4 1.6' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-warning .jqx-icon-calendar,
.jqx-warning .jqx-icon-calendar-hover,
.jqx-warning .jqx-icon-calendar-pressed {
    background-image: url('images/icon-calendar-white.png');
}

.jqx-warning-base .jqx-icon-calendar-base, .jqx-warning-base .jqx-icon-calendar-hover-base, .jqx-warning-base .jqx-icon-calendar-pressed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15'%3E%3Crect x='1.5' y='2.5' width='11' height='11' rx='1.5' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3Cpath d='M1.5 6h11M4.5 1v3M9.5 1v3' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-warning .jqx-icon-time,
.jqx-warning .jqx-icon-time-hover,
.jqx-warning .jqx-icon-time-pressed {
    background-image: url('images/icon-time-white.png');
}

.jqx-warning-base .jqx-icon-time-base, .jqx-warning-base .jqx-icon-time-hover-base, .jqx-warning-base .jqx-icon-time-pressed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3Cpath d='M8 4.8V8l2.4 1.6' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-danger .jqx-icon-calendar,
.jqx-danger .jqx-icon-calendar-hover,
.jqx-danger .jqx-icon-calendar-pressed {
    background-image: url('images/icon-calendar-white.png');
}

.jqx-danger-base .jqx-icon-calendar-base, .jqx-danger-base .jqx-icon-calendar-hover-base, .jqx-danger-base .jqx-icon-calendar-pressed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15'%3E%3Crect x='1.5' y='2.5' width='11' height='11' rx='1.5' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3Cpath d='M1.5 6h11M4.5 1v3M9.5 1v3' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-danger .jqx-icon-time,
.jqx-danger .jqx-icon-time-hover,
.jqx-danger .jqx-icon-time-pressed {
    background-image: url('images/icon-time-white.png');
}

.jqx-danger-base .jqx-icon-time-base, .jqx-danger-base .jqx-icon-time-hover-base, .jqx-danger-base .jqx-icon-time-pressed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3Cpath d='M8 4.8V8l2.4 1.6' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-info .jqx-icon-calendar,
.jqx-info .jqx-icon-calendar-hover,
.jqx-info .jqx-icon-calendar-pressed {
    background-image: url('images/icon-calendar-white.png');
}

.jqx-info-base .jqx-icon-calendar-base, .jqx-info-base .jqx-icon-calendar-hover-base, .jqx-info-base .jqx-icon-calendar-pressed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15'%3E%3Crect x='1.5' y='2.5' width='11' height='11' rx='1.5' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3Cpath d='M1.5 6h11M4.5 1v3M9.5 1v3' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-info .jqx-icon-time,
.jqx-info .jqx-icon-time-hover,
.jqx-info .jqx-icon-time-pressed {
    background-image: url('images/icon-time-white.png');
}

.jqx-info-base .jqx-icon-time-base, .jqx-info-base .jqx-icon-time-hover-base, .jqx-info-base .jqx-icon-time-pressed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3Cpath d='M8 4.8V8l2.4 1.6' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-inverse .jqx-icon-calendar,
.jqx-inverse .jqx-icon-calendar-hover,
.jqx-inverse .jqx-icon-calendar-pressed {
    background-image: url('images/icon-calendar-white.png');
}

.jqx-inverse-base .jqx-icon-calendar-base, .jqx-inverse-base .jqx-icon-calendar-hover-base, .jqx-inverse-base .jqx-icon-calendar-pressed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15'%3E%3Crect x='1.5' y='2.5' width='11' height='11' rx='1.5' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3Cpath d='M1.5 6h11M4.5 1v3M9.5 1v3' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-inverse .jqx-icon-time,
.jqx-inverse .jqx-icon-time-hover,
.jqx-inverse .jqx-icon-time-pressed {
    background-image: url('images/icon-time-white.png');
}

.jqx-inverse-base .jqx-icon-time-base, .jqx-inverse-base .jqx-icon-time-hover-base, .jqx-inverse-base .jqx-icon-time-pressed-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3Cpath d='M8 4.8V8l2.4 1.6' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-notification-info,
.jqx-info {
    color: #ffffff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
    background-color: #1a7f9c !important;

    border-left-color: #177590 !important;
    border-right-color: #177590 !important;
    border-top-color: #177590 !important;
    border-bottom-color: #177590 !important;
}

.jqx-info:hover,
.jqx-info:focus,
.jqx-info:active,
.jqx-info.active,
.jqx-info.disabled,
.jqx-info[disabled] {
    color: #ffffff !important;
    background-color: #177590 !important;

    border-color: #136479 !important;
}


.jqx-notification-warning,
.jqx-warning {
    color: #ffffff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
    background-color: #b35900 !important;

    border-left-color: #a35100 !important;
    border-right-color: #a35100 !important;
    border-top-color: #a35100 !important;
    border-bottom-color: #a35100 !important;
}

.jqx-warning:hover,
.jqx-warning:focus,
.jqx-warning:active,
.jqx-warning.active,
.jqx-warning.disabled,
.jqx-warning[disabled] {
    color: #ffffff !important;
    background-color: #a35100 !important;

    border-color: #8f4700 !important;
}

.jqx-fill-state-pressed.jqx-warning,
.jqx-warning:active,
.jqx-warning.active {
    border-color: #7a3c00 !important;
}

.jqx-notification-success,
.jqx-success {
    color: #ffffff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
    background-color: #398439 !important;

    border-left-color: #337a33 !important;
    border-right-color: #337a33 !important;
    border-top-color: #337a33 !important;
    border-bottom-color: #337a33 !important;
}

.jqx-success:hover,
.jqx-success:focus,
.jqx-success:active,
.jqx-success.active,
.jqx-success.disabled,
.jqx-success[disabled] {
    color: #ffffff !important;
    background-color: #337a33 !important;

    border-color: #2d6a2d !important;
}

.jqx-fill-state-pressed.jqx-success,
.jqx-success:active,
.jqx-success.active {
    background-color: #2d6a2d !important;
    border-color: #255625 !important;
}

.jqx-notification-error,
.jqx-danger {
    color: #ffffff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
    background-color: #d43f3a !important;

    border-left-color: #c9302c !important;
    border-right-color: #c9302c !important;
    border-top-color: #c9302c !important;
    border-bottom-color: #c9302c !important;
}

.jqx-danger:hover,
.jqx-danger:focus,
.jqx-danger:active,
.jqx-danger.active,
.jqx-danger.disabled,
.jqx-danger[disabled] {
    color: #ffffff !important;
    background-color: #b52b27 !important;

    border-color: #9e2622 !important;
}

.jqx-fill-state-pressed.jqx-danger,
.jqx-danger:active,
.jqx-danger.active {
    background-color: #9e2622 !important;
    border-color: #761c19 !important;
}

.jqx-notification-mail,
.jqx-primary {
    color: #ffffff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
    background-color: #337ab7 !important;

    border-left-color: #2e6da4 !important;
    border-right-color: #2e6da4 !important;
    border-top-color: #2e6da4 !important;
    border-bottom-color: #2e6da4 !important;
}

.jqx-primary:hover,
.jqx-primary:focus,
.jqx-primary:active,
.jqx-primary.active,
.jqx-primary.disabled,
.jqx-primary[disabled] {
    color: #ffffff !important;
    background-color: #286090 !important;

}

.jqx-fill-state-pressed.jqx-primary,
.jqx-primary:active,
.jqx-primary.active {
    background-color: #204d74 !important;
}

.jqx-notification-time,
.jqx-inverse {
    color: #ffffff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
    background-color: #363636 !important;

    border-left-color: #222222 !important;
    border-right-color: #222222 !important;
    border-top-color: #222222 !important;
    border-bottom-color: #000000 !important;
}

.jqx-inverse:hover,
.jqx-inverse:focus,
.jqx-inverse:active,
.jqx-inverse.active,
.jqx-inverse.disabled,
.jqx-inverse[disabled] {
    color: #ffffff !important;
    background-color: #222222 !important;

}

.jqx-fill-state-pressed.jqx-inverse,
.jqx-inverse:active,
.jqx-inverse.active {
    background-color: #080808 !important;
    background-image: linear-gradient(to bottom, #444444, #444444) !important;
}

.jqx-link,
.jqx-link:active,
.jqx-link[disabled] {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.jqx-link {
    color: #0072a8 !important;
    cursor: pointer !important;
    border-color: transparent !important;
    border-radius: 0 !important;
}

.jqx-link:hover,
.jqx-link:focus {
    color: #005580 !important;
    text-decoration: underline !important;
    background-color: transparent !important;
}

.jqx-link[disabled]:hover,
.jqx-link[disabled]:focus {
    color: #333333 !important;
    text-decoration: none !important;
}

.jqx-link:focus,
.jqx-inverse:focus,
.jqx-primary:focus,
.jqx-warning:focus,
.jqx-danger:focus,
.jqx-success:focus,
.jqx-info:focus,
.jqx-link:hover,
.jqx-inverse:hover,
.jqx-primary:hover,
.jqx-warning:hover,
.jqx-danger:hover,
.jqx-success:hover,
.jqx-info:hover {
    background-position: 0 -15px !important;
    transition: background-position 0.1s linear !important;
}

.jqx-link:active,
.jqx-inverse:active,
.jqx-primary:active,
.jqx-warning:active,
.jqx-danger:active,
.jqx-success:active,
.jqx-info:active {
    background-image: none !important;
    outline: 0 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.jqx-notification-icon {
    background-repeat: no-repeat;
}

.jqx-notification-icon-ltr {
    background-position: left center;
}

.jqx-notification-icon-rtl {
    background-position: right center;
}

.jqx-notification-icon-info,
.jqx-notification-icon-warning,
.jqx-notification-icon-success,
.jqx-notification-icon-error,
.jqx-notification-icon-mail,
.jqx-notification-icon-time {
    width: 30px;
    height: 25px;
}

.jqx-notification-icon-info {
    background-image: url('images/info.png');
}

.jqx-notification-icon-warning {
    background-image: url('images/warning.png');
}

.jqx-notification-icon-success {
    background-image: url('images/success.png');
}

.jqx-notification-icon-error {
    background-image: url('images/error.png');
}

.jqx-notification-icon-mail {
    background-image: url('images/mail.png');
}

.jqx-notification-icon-time {
    background-image: url('images/time.png');
}

.jqx-notification-close-button-info,
.jqx-notification-close-button-success,
.jqx-notification-close-button-mail,
.jqx-notification-close-button-time,
.jqx-notification-close-button-error {
    background-image: url('images/close_white.png');
}

.jqx-notification-close-button-info-base, .jqx-notification-close-button-success-base, .jqx-notification-close-button-mail-base, .jqx-notification-close-button-time-base, .jqx-notification-close-button-error-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-notification-close-button-warning {
    background-image: url('images/close_black.png');
}

.jqx-notification-close-button-container,
.jqx-notification-close-button {
    width: 16px;
    height: 16px;
}

.jqx-notification-close-button-container {
    vertical-align: top;
}

.jqx-notification-close-button {
    position: relative;
    top: -11px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.jqx-notification-close-button-ltr {
    right: -11px;
    background-position: right top;
}

.jqx-notification-close-button-rtl {
    left: -11px;
    background-position: left top;
}

.jqx-navbar {
    width: 100%;
    border-style: solid;
    border-width: 1px;
}

.jqx-navbar ul:before,
.jqx-navbar ul:after {
    content: "";
    display: table;
}

.jqx-navbar ul:after {
    clear: both;
}

.jqx-navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: block;
    border: 0;
    max-width: 100%;
    overflow: visible;
}

.jqx-navbar-block {
    margin: 0;
    overflow: hidden;
    padding: 0px 12px;
    border-width: 0px;
    float: left;
    min-height: 1px;
    box-sizing: border-box;
    box-shadow: none !important;
    border-radius: 0px !important;
}

.jqx-navbar-block-rtl {
    float: right;
}

.jqx-ribbon {
    position: relative;
    overflow: hidden;
}

.jqx-ribbon-auto {
    display: inline-block;
}

.jqx-ribbon-popup {
    overflow: visible;
}

.jqx-ribbon-header {
    position: absolute;
    margin: 0;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    overflow: hidden;
    float: left;
    display: block;
    box-shadow: none !important;
}

.jqx-ribbon-header-auto {
    position: relative;
}

.jqx-ribbon-header-horizontal {
    width: 100%;
    min-height: 30px;
    padding: 0px;
    white-space: nowrap;
}

.jqx-ribbon-header-bottom {
    bottom: 0;
}

.jqx-ribbon-header-vertical {
    min-width: 75px;
    height: 100%;
    float: left;
    padding: 0px;
}

.jqx-ribbon-header-right {
    right: 0;
}

.jqx-ribbon-header-horizontal-popup,
.jqx-ribbon-header-vertical-popup {
    position: relative;
}

.jqx-ribbon-header-horizontal-popup {
    height: 100%;
}

.jqx-ribbon-header-vertical-popup {
    width: 100%;
}

.jqx-ribbon-item {
    position: relative;
    list-style-type: none;
    padding: 5px;
    border: 1px solid transparent;
    box-sizing: border-box;
    text-overflow: ellipsis;
    cursor: default;
    min-width: 10px;
    vertical-align: top;
}

.jqx-ribbon-item-top,
.jqx-ribbon-item-bottom {
    height: 100%;
    display: inline-block;
    margin-left: 1px;
    margin-right: 1px;
}

.jqx-ribbon-item-top {
    margin-top: 1px;
}

.jqx-ribbon-item-bottom {
    margin-top: -1px;
}

.jqx-ribbon-item-left,
.jqx-ribbon-item-right {
    width: 100%;
    margin-top: 2px;
}

.jqx-ribbon-item-left {
    margin-left: 1px;
}

.jqx-ribbon-item-right {
    margin-left: -1px;
}

.jqx-ribbon-item-hover {
    border-color: inherit;
}

.jqx-ribbon-item-top.jqx-ribbon-item-hover {
    border-bottom-color: inherit !important;
}

.jqx-ribbon-item-bottom.jqx-ribbon-item-hover {
    border-top-color: inherit !important;
}

.jqx-ribbon-item-left.jqx-ribbon-item-hover {
    border-right-color: inherit !important;
}

.jqx-ribbon-item-right.jqx-ribbon-item-hover {
    border-left-color: inherit !important;
}

.jqx-ribbon-item-selected {
    border-color: inherit;
}

.jqx-ribbon-item-top.jqx-ribbon-item-selected {
    border-bottom-color: transparent;
}

.jqx-ribbon-item-bottom.jqx-ribbon-item-selected {
    border-top-color: transparent;
}

.jqx-ribbon-item-left.jqx-ribbon-item-selected {
    border-right-color: transparent;
}

.jqx-ribbon-item-right.jqx-ribbon-item-selected {
    border-left-color: transparent;
}

.jqx-ribbon-content {
    background-image: none !important;
    background-color: transparent !important;
    box-sizing: border-box;
}

.jqx-ribbon-content-horizontal {
    clear: both;
    height: 100%;
}

.jqx-ribbon-content-vertical {
    height: 100%;
    width: 100%;
    float: left;
    border-width: 1px;
}

.jqx-ribbon-content-popup {
    z-index: 99999;
    position: absolute;
    border-left: none;
}

.jqx-ribbon-content-popup.jqx-ribbon-content-horizontal {
    width: 100%;
    height: auto;
}

.jqx-ribbon-content-popup.jqx-ribbon-content-vertical {
    width: auto;
    height: 100%;
}

.jqx-ribbon-content-popup-top {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.jqx-ribbon-content-popup-bottom {
    box-shadow: 0 -6px 15px rgba(0, 0, 0, 0.15);
}

.jqx-ribbon-content-popup-left {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.jqx-ribbon-content-popup-right {
    box-shadow: -6px 6px 15px 0 rgba(0, 0, 0, 0.15);
}

.jqx-ribbon-content-auto-width {
    width: auto;
}

.jqx-ribbon-content-section {
    width: 100%;
    height: 100%;
    display: none;
    border-width: 1px;
    border-style: solid;
    box-sizing: inherit;
    overflow: auto;
}

.jqx-ribbon-content-section-top {
    border-top: none;
}

.jqx-ribbon-content-section-bottom {
    bottom: 0;
    border-bottom: none;
}

.jqx-ribbon-content-section-left {
    border-left: none;
}

.jqx-ribbon-content-section-right {
    border-right: none;
    right: 0;
}

.jqx-ribbon-content-section-popup {
    position: relative;
}

.jqx-ribbon-content-section-horizontal-popup {
    height: auto;
}

.jqx-ribbon-content-section-vertical-popup {
    width: auto;
}

.jqx-ribbon-header-rtl {
    text-align: right;
}

.jqx-ribbon-header-horizontal.jqx-ribbon-header-rtl {
    direction: rtl;
}

.jqx-ribbon-item-rtl {
    direction: rtl;
}

.jqx-ribbon-scrollbutton {
    position: absolute;
    display: none;
    box-sizing: border-box;
    cursor: pointer;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 0;
}

.jqx-ribbon-scrollbutton-top,
.jqx-ribbon-scrollbutton-bottom {
    width: 17px;
}

.jqx-ribbon-scrollbutton-left,
.jqx-ribbon-scrollbutton-right {
    height: 17px;
}

.jqx-ribbon-scrollbutton-top {
    top: 1px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.jqx-ribbon-scrollbutton-bottom {
    bottom: 1px;
    border-top-width: 1px;
    border-top-style: solid;
}

.jqx-ribbon-scrollbutton-left {
    left: 1px;
    border-right-width: 1px;
    border-right-style: solid;
}

.jqx-ribbon-scrollbutton-right {
    right: 1px;
    border-left-width: 1px;
    border-left-style: solid;
}

.jqx-ribbon-scrollbutton-top.jqx-ribbon-scrollbutton-lt.jqx-ribbon-scrollbutton-both,
.jqx-ribbon-scrollbutton-top.jqx-ribbon-scrollbutton-lt.jqx-ribbon-scrollbutton-near,
.jqx-ribbon-scrollbutton-bottom.jqx-ribbon-scrollbutton-lt.jqx-ribbon-scrollbutton-both,
.jqx-ribbon-scrollbutton-bottom.jqx-ribbon-scrollbutton-lt.jqx-ribbon-scrollbutton-near {
    left: 1px;
    border-right-width: 1px;
    border-right-style: solid;
}

.jqx-ribbon-scrollbutton-top.jqx-ribbon-scrollbutton-lt.jqx-ribbon-scrollbutton-far,
.jqx-ribbon-scrollbutton-bottom.jqx-ribbon-scrollbutton-lt.jqx-ribbon-scrollbutton-far {
    right: 18px;
    border-left-width: 1px;
    border-left-style: solid;
}

.jqx-ribbon-scrollbutton-top.jqx-ribbon-scrollbutton-rb.jqx-ribbon-scrollbutton-both,
.jqx-ribbon-scrollbutton-top.jqx-ribbon-scrollbutton-rb.jqx-ribbon-scrollbutton-far,
.jqx-ribbon-scrollbutton-bottom.jqx-ribbon-scrollbutton-rb.jqx-ribbon-scrollbutton-both,
.jqx-ribbon-scrollbutton-bottom.jqx-ribbon-scrollbutton-rb.jqx-ribbon-scrollbutton-far {
    right: 1px;
    border-left-width: 1px;
    border-left-style: solid;
}

.jqx-ribbon-scrollbutton-top.jqx-ribbon-scrollbutton-rb.jqx-ribbon-scrollbutton-near,
.jqx-ribbon-scrollbutton-bottom.jqx-ribbon-scrollbutton-rb.jqx-ribbon-scrollbutton-near {
    left: 18px;
    border-right-width: 1px;
    border-right-style: solid;
}

.jqx-ribbon-scrollbutton-left.jqx-ribbon-scrollbutton-lt.jqx-ribbon-scrollbutton-both,
.jqx-ribbon-scrollbutton-left.jqx-ribbon-scrollbutton-lt.jqx-ribbon-scrollbutton-near,
.jqx-ribbon-scrollbutton-right.jqx-ribbon-scrollbutton-lt.jqx-ribbon-scrollbutton-both,
.jqx-ribbon-scrollbutton-right.jqx-ribbon-scrollbutton-lt.jqx-ribbon-scrollbutton-near {
    top: 1px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.jqx-ribbon-scrollbutton-left.jqx-ribbon-scrollbutton-lt.jqx-ribbon-scrollbutton-far,
.jqx-ribbon-scrollbutton-right.jqx-ribbon-scrollbutton-lt.jqx-ribbon-scrollbutton-far {
    bottom: 18px;
    border-top-width: 1px;
    border-top-style: solid;
}

.jqx-ribbon-scrollbutton-left.jqx-ribbon-scrollbutton-rb.jqx-ribbon-scrollbutton-both,
.jqx-ribbon-scrollbutton-left.jqx-ribbon-scrollbutton-rb.jqx-ribbon-scrollbutton-far,
.jqx-ribbon-scrollbutton-right.jqx-ribbon-scrollbutton-rb.jqx-ribbon-scrollbutton-both,
.jqx-ribbon-scrollbutton-right.jqx-ribbon-scrollbutton-rb.jqx-ribbon-scrollbutton-far {
    bottom: 1px;
    border-top-width: 1px;
    border-top-style: solid;
}

.jqx-ribbon-scrollbutton-left.jqx-ribbon-scrollbutton-rb.jqx-ribbon-scrollbutton-near,
.jqx-ribbon-scrollbutton-right.jqx-ribbon-scrollbutton-rb.jqx-ribbon-scrollbutton-near {
    top: 18px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.jqx-ribbon-scrollbutton-inner {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.jqx-ribbon-selection-token {
    position: absolute;
    z-index: 0;
}

.jqx-ribbon-selection-token-top,
.jqx-ribbon-selection-token-bottom {
    height: 1px;
}

.jqx-ribbon-selection-token-left,
.jqx-ribbon-selection-token-right {
    width: 1px;
}

.jqx-ribbon-auto,
.jqx-ribbon-item-top,
.jqx-ribbon-item-bottom,
.jqx-ribbon-content {}

.jqx-ribbon-content-left {}

.jqx-ribbon-content-right {}

.jqx-ribbon-content.jqx-ribbon-content-popup {}

.jqx-ribbon-content-popup .jqx-ribbon-content-section {}

.jqx-ribbon-content-section-popup {}

.jqx-toolbar,
.jqx-toolbar-minimized-popup-separator {
    box-sizing: border-box;
}

.jqx-toolbar,
.jqx-toolbar-minimized-popup {
    padding: 5px;
}

.jqx-toolbar {
    position: relative;
    border-width: 1px;
    border-style: solid;
    overflow: hidden;
}

.jqx-toolbar-tool {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
}

.jqx-toolbar-tool-rtl {
    float: right;
}

.jqx-toolbar-tool-no-separator-ltr {
    margin-right: 2px !important;
}

.jqx-toolbar-tool-no-separator-rtl {
    margin-left: 2px !important;
}

.jqx-toolbar-tool-separator-ltr {
    margin-right: 6px !important;
}

.jqx-toolbar-tool-separator-rtl {
    margin-left: 6px !important;
}

.jqx-toolbar-tool-inner-button {
    margin-right: 0;
    margin-left: 0;
    border-radius: 0 !important;
}

.jqx-toolbar-minimized-button,
.jqx-toolbar-minimized-popup {
    position: absolute;
}

.jqx-toolbar-minimized-button {
    height: 100%;
    right: 0;
    cursor: pointer;
    margin-top: -5px;
    margin-right: 5px;
    display: none;
}

.jqx-toolbar-minimized-button-rtl {
    left: 0;
    margin-left: 5px;
    margin-right: 0;
}

.jqx-toolbar-minimized-popup {
    border-width: 1px;
    border-top-width: 0;
    border-style: solid;
    visibility: hidden;
    z-index: 1000;
}

.jqx-toolbar-tool-minimized {
    margin: 1px 0 !important;
}

.jqx-toolbar-minimized-popup-separator {
    width: 100%;
    height: 2px;
    margin: 5px 0;
    display: none;
}

.jqx-complex-input-spin-buttons-container {
    border-width: 1px;
    border-style: solid;
    position: relative;
    box-sizing: border-box !important;
    padding: 2px 8px !important;
    white-space: nowrap;
    vertical-align: middle;
}

.jqx-formatted-input,
.jqx-complex-input {
    padding-right: 2px !important;
    text-align: right;
}

.jqx-formatted-input-lower-case,
.jqx-complex-input {
    text-transform: lowercase;
}

.jqx-formatted-input-upper-case {
    text-transform: uppercase;
}

.jqx-formatted-input-item {
    word-wrap: break-word;
}

.jqx-formatted-input-item-rtl,
.jqx-complex-input-rtl {
    direction: rtl !important;
}

.jqx-formatted-input-spin-buttons-container,
.jqx-formatted-input-addon {
    height: 100%;
}

.jqx-formatted-input-spin-buttons-container {
    width: 18px;
    padding: 0 0 0 1px !important;
    overflow: hidden;
}

.jqx-formatted-input-spin-buttons-container-rtl {
    border-right-width: 0px;
    padding: 0 0 0 2px !important;
}

.jqx-formatted-input-spin-buttons-container-rtl-border {
    border-left-width: 1px !important;
}

.jqx-formatted-input-spin-button {
    position: relative;
    width: 17px;
    height: 50%;
    margin-left: -1px;
    border-width: 0px;
    padding: 0px;
    overflow: hidden;
    cursor: pointer;
}

.jqx-formatted-input-addon {
    width: 19px;
    padding: 0 !important;
    cursor: pointer;
}

.jqx-formatted-input-addon-rtl {
    border-right-width: 1px !important;
}

.jqx-complex-input-parent {
    overflow: hidden;
}

.jqx-complex-input-child {
    height: 100%;
    float: left;
    box-sizing: border-box;
}

.jqx-complex-input-child-rtl {
    float: right;
}

.jqx-complex-input-spin-buttons-container-ltr {
    border-left-width: 0;
}

.jqx-complex-input-spin-buttons-container-rtl {
    border-left-width: 1px !important;
    border-right-width: 0;
}

.jqx-file-upload {
    position: relative;
    overflow: auto;
}

.jqx-file-upload,
.jqx-file-upload-file-row,
.jqx-file-upload-file-name,
.jqx-file-upload-file-cancel,
.jqx-file-upload-file-upload {
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
}

.jqx-file-upload-buttons-container,
.jqx-file-upload-iframe,
.jqx-file-upload-loading-element {
    display: none;
}

.jqx-file-upload-file-input-ie9,
.jqx-file-upload-buttons-container,
.jqx-file-upload-file-row,
.jqx-file-upload-icon {
    width: 100%;
}

.jqx-file-upload-file-input-ie9,
.jqx-file-upload-file-name,
.jqx-file-upload-file-cancel,
.jqx-file-upload-file-upload,
.jqx-file-upload-icon,
.jqx-file-upload-loading-element {
    height: 100%;
}

.jqx-file-input-iframe,
.jqx-file-upload-form-ie9 {
    position: absolute;
}

.jqx-file-input-iframe {
    width: 0;
    height: 0;
    border: none;
}

.jqx-file-upload-form,
.jqx-file-upload-file-input {
    visibility: hidden;
    display: none;
}

.jqx-file-upload-form-ie9,
.jqx-file-upload-file-input-ie9 {
    display: block;
    visibility: visible;
}

.jqx-file-upload-form-ie9 {
    z-index: 10000;
    opacity: 0;
}

.jqx-file-upload-file-name {
    width: auto;
    padding: 0 2px 0 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}

.jqx-file-upload-button-browse-rtl,
.jqx-file-upload-button-upload-rtl,
.jqx-file-upload-button-cancel-rtl,
.jqx-file-upload-file-name-rtl,
.jqx-file-upload-file-cancel,
.jqx-file-upload-file-upload,
.jqx-file-upload-loading-element {
    float: right;
}

.jqx-file-upload,
.jqx-file-upload-file-row {
    padding: 5px;
}

.jqx-file-upload-button-browse {
    display: block;
}

.jqx-file-upload-buttons-container {
    height: auto;
    margin-top: 10px;
}

.jqx-file-upload-button-browse-rtl,
.jqx-file-upload-button-upload-rtl,
.jqx-file-upload-button-cancel-rtl,
.jqx-file-upload-file-name-rtl,
.jqx-file-upload-file-cancel-rtl,
.jqx-file-upload-file-upload-rtl {
    direction: rtl !important;
}

.jqx-file-upload-button-cancel,
.jqx-file-upload-button-upload-rtl {
    margin-left: 5px;
}

.jqx-file-upload-button-upload-rtl-ie {
    margin-right: 5px;
}

.jqx-file-upload-button-cancel-rtl,
.jqx-file-upload-button-upload-rtl-ie {
    margin-left: 0;
}

.jqx-file-upload-file-row {
    height: 30px;
    margin-bottom: 3px;
    clear: both;
}

.jqx-file-upload-file-cancel,
.jqx-file-upload-file-upload,
.jqx-file-upload-loading-element {
    width: 17px;
    margin: 0 1px 0 1px;
}

.jqx-file-upload-file-cancel-rtl,
.jqx-file-upload-file-upload-rtl,
.jqx-file-upload-loading-element-rtl {
    float: none;

}

.jqx-file-upload-button-browse,
.jqx-file-upload-button-upload,
.jqx-file-upload-button-cancel,
.jqx-file-upload-form-ie9,
.jqx-file-upload-file-input-ie9,
.jqx-file-upload-file-cancel,
.jqx-file-upload-file-upload {
    cursor: pointer;
    white-space: nowrap;
}

.jqx-file-upload-file-name,
.jqx-file-upload-file-cancel,
.jqx-file-upload-file-upload {
    display: inline-block;
}

.jqx-file-upload-icon-upload,
.jqx-file-upload-loading-element {
    margin-top: 1px;
}

.jqx-file-upload-loading-element {
    background-image: url('images/loader-small.gif');
    background-repeat: no-repeat;
}

.jqx-date-time-input-popup .jqx-icon {
    margin-top: 0px;
}

.jqx-text-area-element {
    height: 100%;
    width: 100%;
    overflow: hidden;
    border: none;
    outline: none;
    left: 0px;
    top: 0px;
    margin: 0px;
    position: absolute;
    resize: none;
}

.jqx-text-area-element-rtl {
    direction: rtl !important;
}

/* the floating label of the themes that have one: on a text area it rests on the first line, where
   the text starts, and not halfway down the box (focused or filled, it floats up as on an input) */
.jqx-text-area-element ~ .jqx-input-label {
    top: 6px;
}

.jqx-responsive-panel {
    overflow: auto;
}

.jqx-responsive-panel {
    border-width: 0px;
}

.jqx-responsive-panel-button {
    border-width: 1px;
    border-style: solid;
}

.jqx-responsive-panel-button {
    display: none;
    cursor: pointer;
}

.jqx-responsive-panel-button-inner {
    margin: 0;
    width: 100%;
    height: 100%;
    background-position: center;
}

.jqx-loader {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 999;
    border-style: solid;
    border-width: 1px;
}

.jqx-loader-ie-transparency {
    background: transparent;
}

.jqx-loader-modal {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 99;
    cursor: default;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.6;
}

.jqx-loader-icon {
    background-image: url("images/loader.gif");
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
}

.jqx-loader-text {
    z-index: 999;
    position: relative;
}

.jqx-loader-text-left {
    margin-left: 5px;
    position: absolute;
    top: 50%;
}

.jqx-loader-text-right {
    margin-right: 5px;
    position: absolute;
    top: 50%;
    right: 0px;
}

.jqx-loader-text-top {
    text-align: center;
    margin-top: 5px;
}

.jqx-loader-text-bottom {
    bottom: 0px;
    position: absolute;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    margin-bottom: 5px;
}

.jqx-loader-rtl {
    direction: rtl;
}

/* jqxLayout and jqxDockingLayout */
.jqx-layout,
.jqx-layout-group-root,
.jqx-layout-pseudo-window-header,
.jqx-docking-layout-overlay-inner-square-content {
    position: relative;
}

.jqx-layout-pseudo-window-pin-background,
.jqx-layout-pseudo-window-close-background,
.jqx-layout-resize-feedback,
.jqx-layout-overlay,
.jqx-docking-layout-overlay,
.jqx-docking-layout-overlay-highlight-right,
.jqx-docking-layout-overlay-highlight-bottom,
.jqx-docking-layout-overlay-square-edge,
.jqx-docking-layout-drop-overlay {
    position: absolute;
}

.jqx-layout {
    background-color: #c5c5c5;
}

.jqx-layout-group-root,
.jqx-layout-pseudo-window-pin-icon,
.jqx-layout-pseudo-window-pinned-icon,
.jqx-layout-pseudo-window-close-icon,
.jqx-layout-overlay {
    width: 100%;
    height: 100%;
}

.jqx-layout-group-default-horizontal>div,
.jqx-layout-pseudo-window-title-ltr,
.jqx-docking-layout-overlay-square,
.jqx-docking-layout-overlay-mini-window-edge-horizontal,
.jqx-docking-layout-overlay-square-edge-arrow-container-horizontal {
    float: left;
}

.jqx-layout-group-tabbed {
    position: static;
    box-sizing: border-box;
    min-height: 0 !important;
}

.jqx-layout-group-tabbed .jqx-window-content,
.jqx-docking-layout-group-floating .jqx-window-content {
    padding: 0;
}

.jqx-layout-group-tabbed .jqx-ribbon-content-section,
.jqx-layout-window,
.jqx-docking-layout-group-floating .jqx-ribbon-content-section {
    border: none;
}

.jqx-layout-window {
    position: static;
}

.jqx-layout-group-auto-hide-content-vertical,
.jqx-layout-group-auto-hide-content-horizontal {
    overflow: auto;
}

.jqx-layout-group-auto-hide-content-vertical {
    width: 150px;
}

.jqx-layout-group-auto-hide-content-horizontal {
    width: 100%;
    height: 150px;
}

.jqx-layout-pseudo-window {
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    box-shadow: none !important;
}

.jqx-layout-pseudo-window-header,
.jqx-layout-pseudo-window-content {
    width: 100%;
    box-sizing: border-box;
}

.jqx-layout-pseudo-window-header {
    height: 30px;
}

.jqx-layout-pseudo-window-pin-background,
.jqx-layout-pseudo-window-close-background {
    width: 16px;
    height: 16px;
    top: 5px;
}

.jqx-layout-pseudo-window-pin-background-ltr {
    right: 15px;
}

.jqx-layout-pseudo-window-close-background-ltr {
    right: 0;
}

.jqx-layout-pseudo-window-pin-background-rtl {
    left: 15px;
}

.jqx-layout-pseudo-window-close-background-rtl {
    left: 0;
}

.jqx-layout-pseudo-window-pin-icon,
.jqx-layout-pseudo-window-pinned-icon,
.jqx-layout-pseudo-window-close-icon {
    cursor: pointer;
}

.jqx-layout-pseudo-window-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jqx-layout-pseudo-window-pin-icon {
    background-image: url("images/pin.png");
}

.jqx-layout-pseudo-window-pinned-icon {
    background-image: url("images/pinned.png");
}

.jqx-layout-pseudo-window-title-rtl {
    float: right;
}

.jqx-layout-resize-feedback {
    z-index: 9999;
    top: 0;
    left: 0;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    opacity: 0.6;
    display: none;
}

.jqx-layout-resize-feedback-horizontal {
    width: 100%;
    height: 4px;
    cursor: row-resize;
}

.jqx-layout-resize-feedback-vertical {
    width: 4px;
    height: 100%;
    cursor: col-resize;
}

.jqx-layout-resize-feedback-warning {
    border-color: #800000 !important;
    background-color: Red !important;
}

.jqx-layout-overlay {
    top: 0;
    left: 0;
    display: none;
    background-color: transparent;
    z-index: 8999;
    pointer-events: none;
}

.jqx-layout-ribbon-header-ltr {
    padding-left: 20px;
}

.jqx-layout-ribbon-header-rtl {
    padding-right: 20px;
}

/* jqxDockingLayout-specific */
.jqx-docking-layout-group-floating {
    border-color: #FFD280 !important;
}

.jqx-docking-layout-group-floating .jqx-window-header {
    border-color: #FFD280;
    background-color: #FFD280 !important;
    background: linear-gradient(#FFE4B5, #FFD280) !important;
}

.jqx-docking-layout-group-floating-base .jqx-window-header-base {
    background: linear-gradient(#FFE4B5, #FFD280) !important;
}

.jqx-docking-layout-overlay,
.jqx-docking-layout-overlay-square-edge {
    z-index: 99999;
    opacity: 0.9;
}

.jqx-docking-layout-overlay-square-edge {
    display: none;
}

.jqx-docking-layout-overlay {
    width: 100px;
    height: 100px;
    left: 100px;
    top: 70px;
}

.jqx-docking-layout-overlay-section {
    height: 33px;
    width: 100px;
}

.jqx-docking-layout-overlay-square {
    width: 26px;
    height: 26px;
    padding: 3px;
}

.jqx-docking-layout-overlay-square-invisible {
    background-color: transparent !important;
    background-image: none !important;
}

.jqx-docking-layout-overlay-square-top,
.jqx-docking-layout-overlay-square-left,
.jqx-docking-layout-overlay-square-center,
.jqx-docking-layout-overlay-square-right,
.jqx-docking-layout-overlay-highlight-bottom {
    border-top-width: 1px;
    border-top-style: solid;
}

.jqx-docking-layout-overlay-square-top,
.jqx-docking-layout-overlay-square-left,
.jqx-docking-layout-overlay-square-bottom,
.jqx-docking-layout-overlay-highlight-right {
    border-left-width: 1px;
    border-left-style: solid;
}

.jqx-docking-layout-overlay-square-top,
.jqx-docking-layout-overlay-square-right,
.jqx-docking-layout-overlay-square-bottom,
.jqx-docking-layout-overlay-highlight-left {
    border-right-width: 1px;
    border-right-style: solid;
}

.jqx-docking-layout-overlay-square-left,
.jqx-docking-layout-overlay-square-center,
.jqx-docking-layout-overlay-square-right,
.jqx-docking-layout-overlay-square-bottom,
.jqx-docking-layout-overlay-inner-square-header,
.jqx-docking-layout-overlay-highlight-top {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.jqx-docking-layout-overlay-square-center {
    border-color: transparent !important;
}

.jqx-docking-layout-overlay-inner-square,
.jqx-docking-layout-overlay-inner-square-header,
.jqx-docking-layout-overlay-inner-square-content,
.jqx-docking-layout-overlay-highlight-top,
.jqx-docking-layout-overlay-highlight-bottom,
.jqx-docking-layout-overlay-mini-window-edge-vertical {
    width: 24px;
}

.jqx-docking-layout-overlay-inner-square {
    border-width: 1px;
    border-style: solid;
    height: 24px;
}

.jqx-docking-layout-overlay-inner-square-header {
    height: 5px;
}

.jqx-docking-layout-overlay-inner-square-content {
    height: 18px;
}

.jqx-docking-layout-overlay-highlight {}

.jqx-docking-layout-overlay-highlight-top {
    height: 9px;
    border-bottom-style: dashed;
}

.jqx-docking-layout-overlay-highlight-left,
.jqx-docking-layout-overlay-highlight-right {
    width: 12px;
    height: 18px;
}

.jqx-docking-layout-overlay-highlight-left {
    border-right-style: dashed;
}

.jqx-docking-layout-overlay-highlight-right {
    right: 0;
    border-left-style: dashed;
}

.jqx-docking-layout-overlay-highlight-bottom {
    bottom: 0;
    height: 9px;
    border-top-style: dashed;
}

.jqx-docking-layout-drop-overlay {
    display: none;
    background-color: #6495ED;
    opacity: 0.5;
    z-index: 10000;
    top: 0px;
    left: 0px;
}

.jqx-docking-layout-square-disabled {
    visibility: hidden;
}

.jqx-docking-layout-overlay-square-edge,
.jqx-docking-layout-overlay-mini-window-edge-horizontal,
.jqx-docking-layout-overlay-mini-window-edge-vertical {
    border-style: solid;
    border-width: 1px;
}

.jqx-docking-layout-overlay-inner-square-edge {
    width: 26px;
    height: 26px;
}

.jqx-docking-layout-overlay-mini-window-edge-horizontal {
    height: 24px;
}

.jqx-docking-layout-overlay-mini-window-edge-vertical {
    height: 13px;
}

.jqx-docking-layout-overlay-mini-window-edge-horizontal,
.jqx-docking-layout-overlay-inner-square-header-horizontal,
.jqx-docking-layout-overlay-inner-square-content-horizontal {
    width: 13px;
}

.jqx-docking-layout-overlay-inner-square-content-vertical {
    height: 7px;
}

.jqx-docking-layout-overlay-square-edge-arrow {
    border-style: solid;
    border-width: 5px;
    width: 0px;
    height: 0px;
    display: block;
    background: transparent !important;
}

.jqx-docking-layout-overlay-square-edge-arrow-left,
.jqx-docking-layout-overlay-square-edge-arrow-right,
.jqx-docking-layout-overlay-square-edge-arrow-top {
    border-top-color: transparent !important;
}

.jqx-docking-layout-overlay-square-edge-arrow-left,
.jqx-docking-layout-overlay-square-edge-arrow-right,
.jqx-docking-layout-overlay-square-edge-arrow-bottom {
    border-bottom-color: transparent !important;
}

.jqx-docking-layout-overlay-square-edge-arrow-left,
.jqx-docking-layout-overlay-square-edge-arrow-top,
.jqx-docking-layout-overlay-square-edge-arrow-bottom {
    border-left-color: transparent !important;
}

.jqx-docking-layout-overlay-square-edge-arrow-right,
.jqx-docking-layout-overlay-square-edge-arrow-top,
.jqx-docking-layout-overlay-square-edge-arrow-bottom {
    border-right-color: transparent !important;
}

.jqx-docking-layout-overlay-square-edge-arrow-left,
.jqx-docking-layout-overlay-square-edge-arrow-right {
    margin-top: 8px;
}

.jqx-docking-layout-overlay-square-edge-arrow-top,
.jqx-docking-layout-overlay-square-edge-arrow-bottom {
    margin-left: 8px;
}

.jqx-tag-cloud ul {
    padding-left: 5px;
}

.jqx-tag-cloud-item {
    padding: 3px;
    display: inline-block;
}

.jqx-tag-cloud-item a {
    text-decoration: initial;
}

.jqx-tag-cloud-item a:hover {
    text-decoration: underline;
}

.jqx-popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #ffffff;
    border: 1px solid #aaa;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.jqx-popover-base {
    border: 1px solid #aaa;
}

.jqx-popover-modal-background {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);
}

.jqx-popover-modal-background-base {
    background-color: rgb(0, 0, 0);
}

.jqx-popover-close-button {
    width: 16px;
    height: 16px;
    float: right;
}

.jqx-popover-close-button-rtl {
    float: left;
}

.jqx-popover.top {
    margin-top: -10px;
}

.jqx-popover.right {
    margin-left: 10px;
}

.jqx-popover.bottom {
    margin-top: 10px;
}

.jqx-popover.left {
    margin-left: -10px;
}

.jqx-popover-title {
    padding: 8px 14px;
    margin: 0;
    border-bottom: 1px solid inherit;
    border-radius: 3px 3px 0 0;
}

.jqx-popover-title:empty {
    display: none;
}

.jqx-popover-content {
    padding: 9px 14px;
}

.jqx-popover .jqx-popover-arrow,
.jqx-popover .jqx-popover-arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.jqx-popover .jqx-popover-arrow {
    border-width: 11px;
}

.jqx-popover .jqx-popover-arrow:after {
    border-width: 10px;
    content: "";
}

.jqx-popover.top .jqx-popover-arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: inherit;
    border-bottom-width: 0;
}

.jqx-popover.top .jqx-popover-arrow:after {
    bottom: 1px;
    margin-left: -10px;
    border-top-color: #ffffff;
    border-bottom-width: 0;
}

.jqx-popover.right .jqx-popover-arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-right-color: inherit;
    border-left-width: 0;
}

.jqx-popover.right .jqx-popover-arrow:after {
    bottom: -10px;
    left: 1px;
    border-right-color: #ffffff;
    border-left-width: 0;
}

.jqx-popover.bottom .jqx-popover-arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-bottom-color: inherit;
    border-top-width: 0;
}

.jqx-popover.bottom .jqx-popover-arrow:after {
    top: 1px;
    margin-left: -10px;
    border-bottom-color: #ffffff;
    border-top-width: 0;
}

.jqx-popover.left .jqx-popover-arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: inherit;
}

.jqx-popover.left .jqx-popover-arrow:after {
    right: 1px;
    bottom: -10px;
    border-left-color: #ffffff;
    border-right-width: 0;
}

.jqx-kanban-full-frame {
    width: 100vw;
    height: 100vh;
}

.jqx-kanban-in-frame {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.jqx-kanban-rtl {
    direction: rtl;
    text-align: right;
}

.jqx-kanban-column {
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px 1px 1px 0px;
    float: left;
}

.jqx-kanban-column-collapsed {
    width: 50px;
}

.jqx-kanban-column-first {
    border-width: 1px;
}

.jqx-kanban-column:first-of-type {
    border-width: 1px 1px 1px 1px;
}

.jqx-kanban-column-selected {
    /*  background-color: blue;*/
}

.jqx-kanban-column-header-collapsed {
    /*vertical column invisible*/
    display: none;
    box-sizing: border-box;
    height: 0px;
    width: 0px;
    position: relative;
    cursor: pointer;
}

.jqx-kanban-column-header-collapsed-show {
    /*vertical column visible*/
    display: block !important;
    height: 100%;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    cursor: pointer;
}

.jqx-kanban-column-vertical-container {
    padding-top: 0px;
    padding-left: 0px;
    transform: rotate(-90deg);
    white-space: nowrap;
}

.jqx-kanban-column-vertical-container-inverse {
    padding-top: 0px;
    padding-left: 20px;
    transform: rotate(90deg);
    white-space: nowrap;
}

.jqx-kanban-column-vertical-container .jqx-kanban-column-header-title,
.jqx-kanban-column-vertical-container .jqx-kanban-column-header-status {
    position: relative;
}

.jqx-kanban-column-hide {
    /*colapsed*/
    display: none !important;
}

.jqx-kanban-column-header {
    border-width: 1px;
    border-style: solid;
    margin: 1px;
    white-space: nowrap;
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.jqx-kanban-column-header-button {
    position: absolute;
    right: 0px;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
}

.jqx-kanban-column-header .jqx-window-collapse-button {
    margin-top: 1px !important;
}

.jqx-kanban-column-header-custom-button {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
}

.jqx-kanban-column-header-custom-button-rtl {
    left: 20px;
}

.jqx-kanban-column-header-button-rtl {
    left: 0px;
}

.jqx-kanban-column-header-collapsed .jqx-kanban-column-header-button {
    top: 100%;
    right: 50%;
    margin-top: -21px;
    left: 50%;
    margin-left: -8px;
}

.jqx-kanban-column-header-collapsed .jqx-kanban-column-header-custom-button {
    top: 100%;
    right: 50%;
    margin-top: -41px;
    left: 50%;
    margin-left: -8px;
}

.jqx-kanban-column-container {
    margin: 1px;
    overflow-y: auto;
}

.jqx-kanban-item-placeholder {
    height: 100px;
    border: gray dotted 1px;
    border-radius: 3px;
    margin: 5px;
}

.jqx-kanban-item {
    margin: 2px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    position: relative;
    box-shadow: #ddd 2px 2px 3px;
    cursor: pointer;
    touch-action: none;
}

.jqx-kanban-item-selected {}

.jqx-kanban-item-color-status {
    background-color: #6bbd49;
    width: 3px;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.jqx-kanban-item-color-status-rtl {
    right: 0px;
    left: auto;
}

.jqx-kanban-item-text {
    padding-left: 6px;
    padding-right: 23px;
    font-size: 14px;
    padding-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jqx-kanban-rtl .jqx-kanban-item-text {
    padding-right: 6px;
    padding-left: 23px;
}

.jqx-kanban-column-header-title {}

.jqx-kanban-column-header-status {}

.jqx-kanban-item-content {}

.jqx-kanban-item-avatar {
    width: 22px;
    height: 22px;
    position: absolute;
    right: 3px;
    top: 3px;
    background: #eee;
    text-align: center;
    overflow: hidden;
}

.jqx-kanban-item-avatar-rtl {
    left: 3px;
}

.jqx-kanban-item-avatar-image {
    width: 20px;
    height: 20px;
}

.jqx-kanban-item-avatar-image:hover {}

.jqx-kanban-item-footer {
    border-top: 1px solid transparent;
    border-color: inherit;
    overflow: hidden;
    padding-top: 5px;
    margin-top: 5px;
    padding-bottom: 1px;
    padding-left: 6px;
    padding-right: 6px;
}

.jqx-kanban-item-keyword {
    float: left;
    margin: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
    border-color: inherit;
    padding-left: 2px;
    padding-right: 2px;
    cursor: pointer;
}

.jqx-kanban-item-keyword-rtl {
    direction: rtl;
    text-align: right;
    float: right;
}

.jqx-kanban-item-keyword:hover {}

.jqx-kanban-item-avatar {
    height: 20px;
}

.jqx-kanban-handle {
    cursor: move;
}

.jqx-kanban-clearing {
    clear: both;
}

.jqx-sortable {
    touch-action: none;
}

.jqx-bar-gauge-tooltip {
    position: absolute;
    left: 20px;
    top: 20px;
    display: none;
    padding: 6px 12px;
    border: black solid 1px;
    background-color: white;
    color: #333333;
    font-size: 11px;
    font-weight: 100;
    font-family: Verdana;
    border: black solid 1px;
    border-radius: 3px;
    opacity: 1;
    white-space: nowrap;
    z-index: 5;
}

.jqx-bar-gauge-measure-text {
    position: absolute;
    top: 0;
    right: 0;
    visibility: hidden;
    z-index: -99999;
    margin: 0px;
    padding: 0px;
    border-width: 0px;
}

.jqx-scrollbar-mobile {
    background: transparent !important;
}

.jqx-scrollbar-mobile .jqx-scrollbar-state-normal {
    background: transparent !important;
    border-color: transparent !important;
}

.jqx-scrollbar-mobile .jqx-scrollbar-thumb-state-normal-horizontal,
.jqx-scrollbar-mobile .jqx-scrollbar-thumb-state-normal {
    background: #808080 !important;
    border-color: #808080 !important;
    border-width: 1px;
    z-index: 99999;
    border-radius: 0px !important;
}

.jqx-scrollbar-mobile .jqx-scrollbar-thumb-state-normal {
    width: 4px !important;
}

.jqx-scrollbar-mobile .jqx-scrollbar-thumb-state-normal-horizontal {
    height: 4px !important;
}

.jqx-primary .jqx-icon-arrow-down,
.jqx-warning .jqx-icon-arrow-down,
.jqx-danger .jqx-icon-arrow-down,
.jqx-success .jqx-icon-arrow-down,
.jqx-info .jqx-icon-arrow-down {
    background-image: url('images/icon-down-white.png');
}

.jqx-primary-base .jqx-icon-arrow-down-base, .jqx-warning-base .jqx-icon-arrow-down-base, .jqx-danger-base .jqx-icon-arrow-down-base, .jqx-success-base .jqx-icon-arrow-down-base, .jqx-info-base .jqx-icon-arrow-down-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 7l3.5 3.5L12 7' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-primary .jqx-icon-arrow-down-selected,
.jqx-warning .jqx-icon-arrow-down-selected,
.jqx-danger .jqx-icon-arrow-down-selected,
.jqx-success .jqx-icon-arrow-down-selected,
.jqx-info .jqx-icon-arrow-down-selected {
    background-image: url('images/icon-down-white.png');
}

.jqx-primary-base .jqx-icon-arrow-down-selected-base, .jqx-warning-base .jqx-icon-arrow-down-selected-base, .jqx-danger-base .jqx-icon-arrow-down-selected-base, .jqx-success-base .jqx-icon-arrow-down-selected-base, .jqx-info-base .jqx-icon-arrow-down-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 7l3.5 3.5L12 7' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-primary .jqx-icon-arrow-down-hover,
.jqx-warning .jqx-icon-arrow-down-hover,
.jqx-danger .jqx-icon-arrow-down-hover,
.jqx-success .jqx-icon-arrow-down-hover,
.jqx-info .jqx-icon-arrow-down-hover {
    background-image: url('images/icon-down-white.png');
}

.jqx-primary-base .jqx-icon-arrow-down-hover-base, .jqx-warning-base .jqx-icon-arrow-down-hover-base, .jqx-danger-base .jqx-icon-arrow-down-hover-base, .jqx-success-base .jqx-icon-arrow-down-hover-base, .jqx-info-base .jqx-icon-arrow-down-hover-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 7l3.5 3.5L12 7' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-primary .jqx-icon-arrow-up,
.jqx-warning .jqx-icon-arrow-up,
.jqx-danger .jqx-icon-arrow-up,
.jqx-success .jqx-icon-arrow-up,
.jqx-info .jqx-icon-arrow-up {
    background-image: url('images/icon-up-white.png');
}

.jqx-primary-base .jqx-icon-arrow-up-base, .jqx-warning-base .jqx-icon-arrow-up-base, .jqx-danger-base .jqx-icon-arrow-up-base, .jqx-success-base .jqx-icon-arrow-up-base, .jqx-info-base .jqx-icon-arrow-up-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 10l3.5-3.5L12 10' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-primary .jqx-icon-arrow-up-selected,
.jqx-warning .jqx-icon-arrow-up-selected,
.jqx-danger .jqx-icon-arrow-up-selected,
.jqx-success .jqx-icon-arrow-up-selected,
.jqx-info .jqx-icon-arrow-up-selected {
    background-image: url('images/icon-up-white.png');
}

.jqx-primary-base .jqx-icon-arrow-up-selected-base, .jqx-warning-base .jqx-icon-arrow-up-selected-base, .jqx-danger-base .jqx-icon-arrow-up-selected-base, .jqx-success-base .jqx-icon-arrow-up-selected-base, .jqx-info-base .jqx-icon-arrow-up-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 10l3.5-3.5L12 10' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-primary .jqx-icon-arrow-up-hover,
.jqx-warning .jqx-icon-arrow-up-hover,
.jqx-danger .jqx-icon-arrow-up-hover,
.jqx-success .jqx-icon-arrow-up-hover,
.jqx-info .jqx-icon-arrow-up-hover {
    background-image: url('images/icon-up-white.png');
}

.jqx-primary-base .jqx-icon-arrow-up-hover-base, .jqx-warning-base .jqx-icon-arrow-up-hover-base, .jqx-danger-base .jqx-icon-arrow-up-hover-base, .jqx-success-base .jqx-icon-arrow-up-hover-base, .jqx-info-base .jqx-icon-arrow-up-hover-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M5 10l3.5-3.5L12 10' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-primary .jqx-icon-arrow-right,
.jqx-warning .jqx-icon-arrow-right,
.jqx-danger .jqx-icon-arrow-right,
.jqx-success .jqx-icon-arrow-right,
.jqx-info .jqx-icon-arrow-right {
    background-image: url('images/icon-right-white.png');
}

.jqx-primary-base .jqx-icon-arrow-right-base, .jqx-warning-base .jqx-icon-arrow-right-base, .jqx-danger-base .jqx-icon-arrow-right-base, .jqx-success-base .jqx-icon-arrow-right-base, .jqx-info-base .jqx-icon-arrow-right-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-primary .jqx-icon-arrow-right-selected,
.jqx-warning .jqx-icon-arrow-right-selected,
.jqx-danger .jqx-icon-arrow-right-selected,
.jqx-success .jqx-icon-arrow-right-selected,
.jqx-info .jqx-icon-arrow-right-selected {
    background-image: url('images/icon-right-white.png');
}

.jqx-primary-base .jqx-icon-arrow-right-selected-base, .jqx-warning-base .jqx-icon-arrow-right-selected-base, .jqx-danger-base .jqx-icon-arrow-right-selected-base, .jqx-success-base .jqx-icon-arrow-right-selected-base, .jqx-info-base .jqx-icon-arrow-right-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-primary .jqx-icon-arrow-right-hover,
.jqx-warning .jqx-icon-arrow-right-hover,
.jqx-danger .jqx-icon-arrow-right-hover,
.jqx-success .jqx-icon-arrow-right-hover,
.jqx-info .jqx-icon-arrow-right-hover {
    background-image: url('images/icon-right-white.png');
}

.jqx-primary-base .jqx-icon-arrow-right-hover-base, .jqx-warning-base .jqx-icon-arrow-right-hover-base, .jqx-danger-base .jqx-icon-arrow-right-hover-base, .jqx-success-base .jqx-icon-arrow-right-hover-base, .jqx-info-base .jqx-icon-arrow-right-hover-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-primary .jqx-icon-arrow-left,
.jqx-warning .jqx-icon-arrow-left,
.jqx-danger .jqx-icon-arrow-left,
.jqx-success .jqx-icon-arrow-left,
.jqx-info .jqx-icon-arrow-left {
    background-image: url('images/icon-left-white.png');
}

.jqx-primary-base .jqx-icon-arrow-left-base, .jqx-warning-base .jqx-icon-arrow-left-base, .jqx-danger-base .jqx-icon-arrow-left-base, .jqx-success-base .jqx-icon-arrow-left-base, .jqx-info-base .jqx-icon-arrow-left-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-primary .jqx-icon-arrow-left-selected,
.jqx-warning .jqx-icon-arrow-left-selected,
.jqx-danger .jqx-icon-arrow-left-selected,
.jqx-success .jqx-icon-arrow-left-selected,
.jqx-info .jqx-icon-arrow-left-selected {
    background-image: url('images/icon-left-white.png');
}

.jqx-primary-base .jqx-icon-arrow-left-selected-base, .jqx-warning-base .jqx-icon-arrow-left-selected-base, .jqx-danger-base .jqx-icon-arrow-left-selected-base, .jqx-success-base .jqx-icon-arrow-left-selected-base, .jqx-info-base .jqx-icon-arrow-left-selected-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-primary .jqx-icon-arrow-left-hover,
.jqx-warning .jqx-icon-arrow-left-hover,
.jqx-danger .jqx-icon-arrow-left-hover,
.jqx-success .jqx-icon-arrow-left-hover,
.jqx-info .jqx-icon-arrow-left-hover {
    background-image: url('images/icon-left-white.png');
}

.jqx-primary-base .jqx-icon-arrow-left-hover-base, .jqx-warning-base .jqx-icon-arrow-left-hover-base, .jqx-danger-base .jqx-icon-arrow-left-hover-base, .jqx-success-base .jqx-icon-arrow-left-hover-base, .jqx-info-base .jqx-icon-arrow-left-hover-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-primary-item .jqx-listitem-state-hover,
.jqx-primary-item .jqx-menu-item-hover,
.jqx-primary-item .jqx-tree-item-hover,
.jqx-primary-item .jqx-calendar-cell-hover,
.jqx-primary-item .jqx-grid-cell-hover,
.jqx-primary-item .jqx-menu-vertical .jqx-menu-item-top-hover,
.jqx-primary-item .jqx-input-popup .jqx-fill-state-hover,
.jqx-primary-item .jqx-input-popup .jqx-fill-state-pressed {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    text-shadow: none !important;
    border-color: #f5f5f5 !important;
}

.jqx-primary-item .jqx-listitem-state-selected,
.jqx-primary-item .jqx-menu-item-selected,
.jqx-primary-item .jqx-tree-item-selected,
.jqx-primary-item .jqx-calendar-cell-selected,
.jqx-primary-item .jqx-grid-cell-selected,
.jqx-primary-item .jqx-menu-vertical .jqx-primary-item .jqx-menu-item-top-selected,
.jqx-primary-item .jqx-grid-selectionarea,
.jqx-primary-item .jqx-input-button-header,
.jqx-primary-item .jqx-input-button-innerHeader {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    text-shadow: none !important;
    border-color: #f5f5f5 !important;
}

.jqx-warning-item .jqx-listitem-state-hover,
.jqx-warning-item .jqx-menu-item-hover,
.jqx-warning-item .jqx-tree-item-hover,
.jqx-warning-item .jqx-calendar-cell-hover,
.jqx-warning-item .jqx-grid-cell-hover,
.jqx-warning-item .jqx-menu-vertical .jqx-menu-item-top-hover,
.jqx-warning-item .jqx-input-popup .jqx-fill-state-hover,
.jqx-warning-item .jqx-input-popup .jqx-fill-state-pressed {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    text-shadow: none !important;
    border-color: #f5f5f5 !important;
}

.jqx-warning-item .jqx-listitem-state-selected,
.jqx-warning-item .jqx-menu-item-selected,
.jqx-warning-item .jqx-tree-item-selected,
.jqx-warning-item .jqx-calendar-cell-selected,
.jqx-warning-item .jqx-grid-cell-selected,
.jqx-warning-item .jqx-menu-vertical .jqx-warning-item .jqx-menu-item-top-selected,
.jqx-warning-item .jqx-grid-selectionarea,
.jqx-warning-item .jqx-input-button-header,
.jqx-warning-item .jqx-input-button-innerHeader {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    text-shadow: none !important;
    border-color: #f5f5f5 !important;
}

.jqx-danger-item .jqx-listitem-state-hover,
.jqx-danger-item .jqx-menu-item-hover,
.jqx-danger-item .jqx-tree-item-hover,
.jqx-danger-item .jqx-calendar-cell-hover,
.jqx-danger-item .jqx-grid-cell-hover,
.jqx-danger-item .jqx-menu-vertical .jqx-menu-item-top-hover,
.jqx-danger-item .jqx-input-popup .jqx-fill-state-hover,
.jqx-danger-item .jqx-input-popup .jqx-fill-state-pressed {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    text-shadow: none !important;
    border-color: #f5f5f5 !important;
}

.jqx-danger-item .jqx-listitem-state-selected,
.jqx-danger-item .jqx-menu-item-selected,
.jqx-danger-item .jqx-tree-item-selected,
.jqx-danger-item .jqx-calendar-cell-selected,
.jqx-danger-item .jqx-grid-cell-selected,
.jqx-danger-item .jqx-menu-vertical .jqx-danger-item .jqx-menu-item-top-selected,
.jqx-danger-item .jqx-grid-selectionarea,
.jqx-danger-item .jqx-input-button-header,
.jqx-danger-item .jqx-input-button-innerHeader {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    text-shadow: none !important;
    border-color: #f5f5f5 !important;
}

.jqx-success-item .jqx-listitem-state-hover,
.jqx-success-item .jqx-menu-item-hover,
.jqx-success-item .jqx-tree-item-hover,
.jqx-success-item .jqx-calendar-cell-hover,
.jqx-success-item .jqx-grid-cell-hover,
.jqx-success-item .jqx-menu-vertical .jqx-menu-item-top-hover,
.jqx-success-item .jqx-input-popup .jqx-fill-state-hover,
.jqx-success-item .jqx-input-popup .jqx-fill-state-pressed {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    text-shadow: none !important;
    border-color: #f5f5f5 !important;
}

.jqx-success-item .jqx-listitem-state-selected,
.jqx-success-item .jqx-menu-item-selected,
.jqx-success-item .jqx-tree-item-selected,
.jqx-success-item .jqx-calendar-cell-selected,
.jqx-success-item .jqx-grid-cell-selected,
.jqx-success-item .jqx-menu-vertical .jqx-success-item .jqx-menu-item-top-selected,
.jqx-success-item .jqx-grid-selectionarea,
.jqx-success-item .jqx-input-button-header,
.jqx-success-item .jqx-input-button-innerHeader {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    text-shadow: none !important;
    border-color: #f5f5f5 !important;
}

.jqx-info-item .jqx-listitem-state-hover,
.jqx-info-item .jqx-menu-item-hover,
.jqx-info-item .jqx-tree-item-hover,
.jqx-info-item .jqx-calendar-cell-hover,
.jqx-info-item .jqx-grid-cell-hover,
.jqx-info-item .jqx-menu-vertical .jqx-menu-item-top-hover,
.jqx-info-item .jqx-input-popup .jqx-fill-state-hover,
.jqx-info-item .jqx-input-popup .jqx-fill-state-pressed {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    text-shadow: none !important;
    border-color: #f5f5f5 !important;
}

.jqx-info-item .jqx-listitem-state-selected,
.jqx-info-item .jqx-menu-item-selected,
.jqx-info-item .jqx-tree-item-selected,
.jqx-info-item .jqx-calendar-cell-selected,
.jqx-info-item .jqx-grid-cell-selected,
.jqx-info-item .jqx-menu-vertical .jqx-info-item .jqx-menu-item-top-selected,
.jqx-info-item .jqx-grid-selectionarea,
.jqx-info-item .jqx-input-button-header,
.jqx-info-item .jqx-input-button-innerHeader {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    text-shadow: none !important;
    border-color: #f5f5f5 !important;
}

.jqx-inverse-item .jqx-listitem-state-hover,
.jqx-inverse-item .jqx-menu-item-hover,
.jqx-inverse-item .jqx-tree-item-hover,
.jqx-inverse-item .jqx-calendar-cell-hover,
.jqx-inverse-item .jqx-grid-cell-hover,
.jqx-inverse-item .jqx-menu-vertical .jqx-menu-item-top-hover,
.jqx-inverse-item .jqx-input-popup .jqx-fill-state-hover,
.jqx-inverse-item .jqx-input-popup .jqx-fill-state-pressed {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    text-shadow: none !important;
    border-color: #f5f5f5 !important;
}

.jqx-inverse-item .jqx-listitem-state-selected,
.jqx-inverse-item .jqx-menu-item-selected,
.jqx-inverse-item .jqx-tree-item-selected,
.jqx-inverse-item .jqx-calendar-cell-selected,
.jqx-inverse-item .jqx-grid-cell-selected,
.jqx-inverse-item .jqx-menu-vertical .jqx-inverse-item .jqx-menu-item-top-selected,
.jqx-inverse-item .jqx-grid-selectionarea,
.jqx-inverse-item .jqx-input-button-header,
.jqx-inverse-item .jqx-input-button-innerHeader {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    text-shadow: none !important;
    border-color: #f5f5f5 !important;
}

.jqx-element {
    overflow: hidden;
    border-style: solid;
    border-width: 0px;
    border-color: transparent;
    box-sizing: border-box;
}

.jqx-element-no-border {
    border-width: 0px;
}

.jqx-element-container {}

.jqx-resize-trigger,
.jqx-resize-trigger-shrink {
    position: absolute;
    left: 0;
    top: 0;
    transition: 0s;
}

.jqx-resize-trigger-shrink {
    width: 200%;
    height: 200%;
}

.jqx-resize-trigger-container {
    display: block;
    visibility: hidden;
    position: relative;
    top: -100%;
    left: 0;
    min-height: 0.1px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    visibility: hidden;
}

/* jqxPivotGrid */
.jqx-pivotgrid {
    /* the widget's content colour, from .jqx-widget-content (it used to be a grey #DEDEDE area) */
}

.jqx-pivotgrid-item {
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    padding: 0px;
    text-overflow: ellipsis;
}

.jqx-pivotgrid-content-wrapper {
    overflow: hidden;
    border: solid 1px #c8c8c8;
}

.jqx-pivotgrid-menu-button {
    border: none;
    background-image: url('images/icon-menu-small.png');
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.jqx-pivotgrid-menu-button-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 4.5h10M3 8h10M3 11.5h10' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-pivotgrid-expand-button {
    outline: none;
    background-image: url('images/icon_expand.png');
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: relative;
    left: 5px;
    float: left;
    vertical-align: middle;
}

.jqx-pivotgrid-collapse-button {
    outline: none;
    background-image: url('images/icon_collapse.png');
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: relative;
    left: 5px;
    float: left;
    vertical-align: middle;
}

.jqx-pivotgrid-sortasc-icon {
    background-image: url('images/icon-sort-asc.png');
    background-repeat: no-repeat;
    background-position: left center;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: -4px;
    margin-right: 4px;
}

.jqx-pivotgrid-sortasc-icon-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 12.5V3.5M2.5 6L5 3.5 7.5 6M9.5 5h4M9.5 8h3M9.5 11h2' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-pivotgrid-sortdesc-icon {
    background-image: url('images/icon-sort-desc.png');
    background-repeat: no-repeat;
    background-position: left center;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: -4px;
    margin-right: 4px;
}

.jqx-pivotgrid-sortdesc-icon-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.5v9M2.5 10L5 12.5 7.5 10M9.5 5h2M9.5 8h3M9.5 11h4' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-pivotgrid-sortremove-icon {
    background-image: url('images/icon-sort-remove.png');
    background-repeat: no-repeat;
    background-position: left center;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: -4px;
    margin-right: 4px;
}

.jqx-pivotgrid-sortremove-icon-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5h6M3 8h5M3 11h4M10.5 9l3.5 3.5M14 9l-3.5 3.5' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jqx-pivotgrid-settings-icon {
    background-image: url('images/icon-menu-small.png');
    background-repeat: no-repeat;
    background-position: left center;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: -4px;
    margin-right: 4px;
}

.jqx-pivotgrid-settings-icon-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 4.5h10M3 8h10M3 11.5h10' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

jqx-bullet-chart {
    width: 800px;
    height: 80px;
}

jqx-scroll-view {
    width: 600px;
}

jqx-bar-gauge,
jqx-draw {
    width: 850px;
    height: 600px;
}

jqx-menu {
    width: 600px;
}

jqx-data-table,
jqx-pivotgrid,
jqx-grid,
jqx-scheduler,
jqx-tree-grid,
jqx-docking-layout,
jqx-layout,
jqx-tree-map,
jqx-splitter,
jqx-kanban {
    width: 850px;
}

jqx-nav-bar {
    height: 50px;
}

jqx-chart {
    width: 850px;
    height: 400px;
}

jqx-docking-layout,
jqx-layout {
    width: 850px;
    height: 600px;
}

jqx-ribbon,
jqx-panel {
    width: 450px;
    height: 300px;
}

jqx-scheduler {
    height: 600px;
}

jqx-list-box,
jqx-text-area {
    width: 200px;
    height: 200px;
}

jqx-file-upload {
    width: 300px;
}

jqx-complex-input,
jqx-formatted-input,
jqx-password-input,
jqx-input,
jqx-number-input,
jqx-slider,
jqx-masked-input,
jqx-drop-down-list,
jqx-combo-box,
jqx-date-time-input,
jqx-drop-down-button {
    width: 300px;
    height: 35px;
}

jqx-loader {
    width: 100px !important;
    height: 60px !important;
}

jqx-expander,
jqx-navigation-bar {
    width: 350px;
}

jqx-navigation-bar {
    height: 450px;
}

jqx-range-selector {
    width: 600px;
}

jqx-tabs {
    width: 800px;
}

jqx-tool-bar {
    width: 800px;
    height: 35px;
}

jqx-editor {
    width: 600px;
    height: 400px;
}

jqx-tree-map {
    width: 850px;
    height: 600px;
}

jqx-tree {
    width: 250px;
}

jqx-linear-gauge {
    width: 100px;
}

jqx-color-picker,
jqx-calendar {
    width: 200px;
    height: 200px;
}

jqx-scroll-bar {
    width: 400px;
    height: 20px;
}

jqx-knob {
    width: 600px;
    height: 600px;
}

.jqx-input-label {
    visibility: hidden;
    position: absolute;
}

.jqx-input-bar {
    visibility: hidden;
    position: absolute;
}

.jqx-info-icon {
    background-image: url('images/icon-info-small.png');
    background-repeat: no-repeat;
    background-position: left center;
    width: 16px;
    height: 16px;
    float: left;
}

.jqx-labels-and-palette {
    display: flex;
}

.jqx-shades {
    width: 560px;
    padding-left: 100px;
}

.jqx-palette>ul,
.jqx-shades>ul,
.jqx-color-labels>ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.jqx-color-labels>ul {
    flex-direction: column;
}

.jqx-color-cell {
    width: 39px;
    height: 39px;
    margin: 0.5px;
    cursor: pointer;
}

.jqx-color-cell:hover {
    border-radius: 8px;
}

.jqx-shade-cell {
    width: 38px;
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 1px 5px 1px;
    text-align: center;
}

.jqx-color-label {
    width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
}

.jqx-heatmap-container-wrapper {
    display: flex;
}

.jqx-heatmap-container-wrapper canvas {
    display: block;
}

.jqx-heatmap-title {
    font-weight: bold;
    margin-bottom: 25px;
    text-align: center;
}

.jqx-heatmap-grid {
    display: flex;
    cursor: default;
}

.jqx-x-axis-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.jqx-y-axis-container {
    display: flex;
    flex-direction: row-reverse;
    flex-grow: 1;
}

.jqx-column {
    display: flex;
    flex-direction: column-reverse;
}

.jqx-x-axis {
    display: flex;
}

.jqx-x-axis-label {
    padding-top: 10px;
    font-size: 14px;
    color: gray;
    text-align: center;
}

.jqx-x-axis-label.jqx-top {
    padding: 0 0 10px 0;
}

.jqx-y-axis {
    display: flex;
    flex-direction: column-reverse;
}

.jqx-y-axis.jqx-margin-top-auto {
    margin-top: auto;
}

.jqx-y-axis-label {
    display: flex;
    align-items: center;
    color: gray;
    padding-right: 10px;
}

.jqx-y-axis-label.jqx-right {
    padding: 0 0 0 10px;
}

.jqx-heatmap-cell {
    position: relative;
    padding: 20px 10px;
    margin: 1px;
    text-align: center;
}

.jqx-heatmap-cell.jqx-empty-cell {
    pointer-events: none;
}

.jqx-heatmap-tooltip {
    display: inline-block;
    position: absolute;
    background: #000;
    color: #fff;
    opacity: 0.6;
    padding: 10px;
    pointer-events: none;
    border-radius: 3px;
    transition: top 0.7s ease, left 0.7s ease;
    box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.75);
}

.jqx-heatmap-tooltip::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: calc(50% - 5px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 5px 0 5px;
    border-color: #000 transparent transparent transparent;
}

.jqx-legend-vertical {
    position: relative;
    margin-left: 10px;
}

.jqx-legend-vertical.jqx-left {
    margin: 0 10px 0 0;
}

.jqx-legend-vertical.jqx-margin-top-auto {
    margin-top: auto;
}

.jqx-legend-horizontal {
    position: relative;
    margin-left: auto;
    margin-bottom: 40px;
}

.jqx-legend-horizontal.jqx-bottom {
    margin-top: 10px;
    margin-bottom: 30px;
}

.jqx-legend-horizontal.jqx-margin-right-auto {
    margin-right: auto;
    margin-left: 0;
}

.jqx-palette-vertical {
    width: 10px;
    height: 100%;
}

.jqx-palette-horizontal {
    width: 100%;
    height: 10px;
}

.jqx-palette-horizontal.jqx-fixed {
    display: flex;
}

.jqx-color-container,
.jqx-color-container-tick {
    cursor: pointer;
}

.jqx-opacity-50 {
    opacity: 0.5;
}

.jqx-selected-color {
    background: #d3d3d3 !important;
}

.jqx-heatmap-hidden {
    visibility: hidden;
}

.jqx-tick-vertical {
    position: absolute;
    left: 15px;
}

.jqx-tick-vertical::before {
    content: '';
    width: 10px;
    background: #fff;
    height: 1px;
    position: absolute;
    top: 6px;
    left: -15px;
}

.jqx-tick-vertical.jqx-no-line::before,
.jqx-tick-horizontal.jqx-no-line::before {
    content: none;
}

.jqx-tick-horizontal {
    position: absolute;
    top: 20px;
}

.jqx-tick-horizontal::before {
    content: '';
    width: 10px;
    background: #fff;
    width: 1px;
    height: 10px;
    position: absolute;
    top: -20px;
    left: 6px;
}

.jqx-tick-horizontal-base::before {
    width: 10px;
}

.jqx-arrow-vertical {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid gray;
    position: absolute;
    left: -8px;
    display: none;
}

.jqx-arrow-horizontal {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid gray;
    position: absolute;
    top: 11px;
    left: -6px;
    display: none;
}

/*jqxTimePicker Style*/
.jqx-time-picker {
    display: block;
    border: 1px solid #c5c5c5;
    border-radius: 1px;
    font-family: Verdana;
    font-size: 12px;
    line-height: initial;
    touch-action: none;
    min-width: 250px;
    box-sizing: border-box;
}

.jqx-time-picker * {
    box-sizing: border-box;
}

.jqx-time-picker[view="landscape"] {
    min-width: 400px;
}

.jqx-time-picker>.jqx-container {
    width: 100%;
    height: 100%;
}

.jqx-time-picker[view="landscape"]>.jqx-container,
.jqx-time-picker .jqx-header,
.jqx-time-picker .jqx-svg-container,
.jqx-time-picker .jqx-hour-minute-container {
    display: flex;
}

.jqx-time-picker .jqx-header {
    width: 100%;
    height: 20%;
    justify-content: center;
    align-items: center;
}

.jqx-time-picker[view="landscape"] .jqx-header {
    flex-direction: column;
    width: 33%;
    height: 100%;
}

.jqx-time-picker .jqx-main-container {
    width: 100%;
    height: 80%;
    padding: 2%;
    background-color: var(--jqx-time-picker-background);
}

.jqx-time-picker[view="portrait"] .jqx-header.jqx-widget-header.jqx-unselectable {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.jqx-time-picker[view="landscape"] .jqx-main-container {
    width: 67%;
    height: 100%;
}

.jqx-time-picker .jqx-svg-container {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.jqx-time-picker[footer] .jqx-svg-container {
    height: calc(100% - 30px);
}

.jqx-time-picker .jqx-footer {
    display: none;
}

.jqx-time-picker[footer] .jqx-footer {
    display: block;
    width: 100%;
    height: 30px;
}

.jqx-time-picker .jqx-hour-minute-container {
    font-size: 50px;
}

.jqx-time-picker .jqx-am-pm-container {
    margin-left: 10px;
}

.jqx-time-picker[view="landscape"] .jqx-am-pm-container {
    margin-left: 0;
}

.jqx-time-picker .jqx-hour-container,
.jqx-time-picker .jqx-minute-container,
.jqx-time-picker .jqx-am-container,
.jqx-time-picker .jqx-pm-container {
    opacity: 0.5;
    cursor: pointer;
}

.jqx-time-picker[readonly] .jqx-hour-container,
.jqx-time-picker[disabled] .jqx-hour-container,
.jqx-time-picker[readonly] .jqx-minute-container,
.jqx-time-picker[disabled] .jqx-minute-container,
.jqx-time-picker[readonly] .jqx-am-container,
.jqx-time-picker[disabled] .jqx-am-container,
.jqx-time-picker[readonly] .jqx-pm-container,
.jqx-time-picker[disabled] .jqx-pm-container {
    cursor: default;
}

.jqx-time-picker .jqx-selected {
    opacity: 1;
}

.jqx-time-picker .jqx-hour-minute-container div:nth-child(2) {
    opacity: 0.5;
}

.jqx-time-picker .jqx-svg-picker {
    border-radius: 50%;
    position: relative;
    box-sizing: content-box;
}

.jqx-time-picker .jqx-svg-picker.animate {
    animation: jqx-time-picker-animation 0.5s linear;
}

.jqx-time-picker[disabled] {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.jqx-time-picker .jqx-label.jqx-selected {
    fill: white;
}

.jqx-time-picker .jqx-header:focus {
    outline: 1px solid skyblue;
}

.jqx-time-picker .jqx-svg-picker:focus {
    border: 1px solid skyblue;
    outline: none;
}

@keyframes jqx-time-picker-animation {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0.5;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.jqx-grid-card-row {
    display: grid;
    grid-template-columns: 1fr;
    height: 100%;
    overflow: hidden;
}

.jqx-grid-card-cell {
    padding: 15px;
    overflow: auto;
}

.jqx-grid-card-cell table {
    width: 100%;
    height: 100%;
    padding: 10px;
    table-layout: fixed;
    border: 1px solid #bbb;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 4px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.jqx-grid-card-cell {
    position: relative;
}

.jqx-grid-card-cell .jqx-icon-edit {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: absolute;
    right: 25px;
    top: 25px;
    background-size: 13px;
    cursor: pointer;
}

.jqx-grid-card-cell input {
    padding: 4px;

}

.jqx-grid-card-cell-label {
    font-size: 12px;
    text-transform: uppercase;
    color: rgb(90, 90, 90);
}

.jqx-grid-card-cell td div {
    text-overflow: ellipsis;
    overflow: hidden;
}

.jqx-card-edit-buttons {
    display: flex;
    margin-top: 30px;
    justify-content: center;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number].jqx-input {
    -moz-appearance: textfield;
}

/* Split Layout */

.jqx-split-layout-component {
    display: block;
    overflow: initial;
    width: 600px;
    height: 600px;
}

.jqx-split-layout {
    display: block;
    overflow: initial;
    width: 600px;
    height: 600px;
    --jqx-primary-rgb: 0, 92, 153;
    --jqx-primary: rgb(var(--jqx-primary-rgb));
    --jqx-primary-color: #fff;
    --jqx-background: #fff;
    --jqx-background-color: rgba(0, 0, 0, .88);
    --jqx-background-hover-rgb: 225, 225, 225;
    --jqx-background-hover: rgb(var(--jqx-background-hover-rgb));
    --jqx-background-color-hover: rgba(0, 0, 0, .54);
    --jqx-surface-rgb: 255, 255, 255;
    --jqx-surface: rgb(var(--jqx-surface-rgb));
    --jqx-surface-color: rgba(0, 0, 0, .88);
    --jqx-border: #E0E0E0;
    --jqx-scrollbar-background: #f5f5f5;
    --jqx-scrollbar-border: #ddd;
    --jqx-scrollbar-thumb-background: #C1C1C1;
    --jqx-scrollbar-thumb-border: #b3b3b3;
    --jqx-scrollbar-thumb-background-hover: #e6e6e6;
    --jqx-scrollbar-thumb-border-hover: #b3b3b3;
    --jqx-scrollbar-thumb-background-pressed: #d9d9d9;
    --jqx-scrollbar-thumb-border-pressed: #b3b3b3;
    --jqx-scrollbar-button-color-hover: #333;
    --jqx-scrollbar-button-background-hover: #f5f5f5;
    --jqx-scrollbar-button-border-hover: #f5f5f5;
    --jqx-scrollbar-button-color-pressed: #333;
    --jqx-scrollbar-button-background-pressed: #f5f5f5;
    --jqx-scrollbar-button-border-pressed: #f5f5f5;
    --jqx-split-layout-buttons-border-radius: 50%;
    --jqx-split-layout-context-menu-default-width: var(--jqx-menu-vertical-default-width);
    --jqx-split-layout-context-menu-default-height: auto;
    --jqx-primary-rgb: 0, 92, 153;
    /* The r, g, and b components of the theme primary color */
    --jqx-primary: rgb(var(--jqx-primary-rgb));
    /* The theme primary color */
    --jqx-primary-color: #ffffff;
    /* Text color on top of a primary background */

    --jqx-secondary-rgb: 45, 45, 48;
    /* The r, g, and b components of the theme secondary color */
    --jqx-secondary: rgb(var(--jqx-secondary-rgb));
    /* The theme secondary color */
    --jqx-secondary-color: #ffffff;
    /* Text color on top of a secondary background */

    --jqx-error-rgb: 176, 0, 32;
    /* The theme error color */
    --jqx-error: rgb(var(--jqx-error-rgb));
    /* The theme error color */
    --jqx-error-color: #ffffff;
    /* Text color on top of a error background */

    --jqx-success-rgb: 139, 195, 74;
    /* The r, g, and b components of the theme success color */
    --jqx-success: rgb(var(--jqx-success-rgb));
    /* The theme success color */
    --jqx-success-color: #ffffff;
    /* Text color on top of a success background */

    --jqx-info-rgb: 92, 192, 222;
    /* The r, g, and b components of the theme info color */
    --jqx-info: rgb(var(--jqx-info-rgb));
    /* The theme info color */
    --jqx-info-color: #fff;
    /* Text color on top of a info background */

    --jqx-warning-rgb: 240, 173, 78;
    /* The r, g, and b components of the theme warning color */
    --jqx-warning: rgb(var(--jqx-warning-rgb));
    /* The theme warning color */
    --jqx-warning-color: #fff;
    /* Text color on top of a warning background */

    --jqx-light-rgb: 255, 255, 255;
    /* The r, g, and b components of the theme light color */
    --jqx-light: rgb(var(--jqx-light-rgb));
    /* The theme light color */
    --jqx-light-color: #222222;
    /* Text color on top of a light background */

    --jqx-dark-rgb: 34, 34, 34;
    /* The r, g, and b components of the theme dark color */
    --jqx-dark: rgb(var(--jqx-dark-rgb));
    /* The theme dark color */
    --jqx-dark-color: #ffffff;
    /* Text color on top of a dark background */

    --jqx-background: #fefefe;
    /* The theme background color. The background color appears behind scrollable content.*/
    --jqx-background-color: #5A5A5A;
    /* Text color on top of a background background */

    --jqx-surface: #F5F5F5;
    /* The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus. */
    --jqx-surface-color: #323232;
    /* Text color on top of a surface surface */

    --jqx-disabled: #CCCCCC;
    /* The theme primary color in disabled state. */
    --jqx-disabled-color: #555;
    /* Text color on top of a theme background in disabled state */

    --jqx-ui-state-hover: #ebebeb;
    /* Hover state background. */
    --jqx-ui-state-color-hover: #333;
    /* Text color, when UI Element's state is 'hover'. */
    --jqx-ui-state-border-hover: var(--jqx-ui-state-hover);
    /* Border color, when UI Element's state is 'hover'. */
    --jqx-ui-state-active: var(--jqx-primary);
    /* Active state background. */
    --jqx-ui-state-color-active: var(--jqx-primary-color);
    /* Text color, when UI Element's state is 'active'. */
    --jqx-ui-state-border-active: var(--jqx-primary);
    /* Border color, when UI Element's state is 'active'. */
    --jqx-ui-state-focus: #e2e0e0;
    /* Focus state background. */
    --jqx-ui-state-color-focus: #333;
    /* Text color, when UI Element's state is 'focus'. */
    --jqx-ui-state-border-focus: var(--jqx-ui-state-focus);
    /* Border color, when UI Element's state is 'focus'. */
    --jqx-ui-state-selected: rgba(var(--jqx-primary-rgb), .1);
    /* Selected state background. */
    --jqx-ui-state-color-selected: var(--jqx-primary);
    /* Text color, when UI Element's state is 'selected'. */
    --jqx-ui-state-border-selected: rgba(var(--jqx-primary-rgb), .1);
    /* Border color, when UI Element's state is 'selected'. */
    --jqx-item-border-width: 1px;
    /* Theme border-width */
    --jqx-item-border-radius: var(--jqx-border-radius);
    /* Border radius of items. */
    --jqx-item-border-top-left-radius: var(--jqx-border-radius);
    /* Border top-left radius of items. */
    --jqx-item-border-top-right-radius: var(--jqx-border-radius);
    /* Border top-right radius of items. */
    --jqx-item-border-bottom-left-radius: var(--jqx-border-radius);
    /* Border bottom-left radius of items. */
    --jqx-item-border-bottom-right-radius: var(--jqx-border-radius);
    /* Border bottom-right radius of items. */
    --jqx-font-size: 14px;
    /* Theme font-size */
    --jqx-font-weight: inherit;
    /* Theme font-weight */
    --jqx-font-style: inherit;
    /* Theme font-style */
    --jqx-font-family: Roboto, "Helvetica Neue", sans-serif;
    /* Theme font-family */
    --jqx-editor-addon-width: 27px;
    /* Default width for spin buttons, dropdown buttons. */
    border: 1px solid var(--jqx-border);
    border-right: none;
    border-bottom: none;
    overflow: initial;
    box-sizing: border-box;
}

.jqx-split-layout-base {
    --jqx-primary-color: #fff;
    --jqx-background: #fff;
    --jqx-background-color: rgba(0, 0, 0, .88);
    --jqx-surface: rgb(var(--jqx-surface-rgb));
    --jqx-surface-color: rgba(0, 0, 0, .88);
}

.jqx-split-layout>.jqx-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.jqx-layout-group,
.jqx-tab-layout-group {
    box-sizing: border-box;
}

.jqx-tab-layout-group[position="right"] .jqx-layout-tab,
.jqx-tab-layout-group[position="left"] .jqx-layout-tab {
    padding: 24px 12px;
}

.jqx-tab-layout-group[position="right"] .jqx-layout-tab:after,
.jqx-tab-layout-group[position="left"] .jqx-layout-tab:after {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    content: "";
    transition: all .2s ease;
    transform: perspective(5px) rotateY(2deg);
    transform-origin: left;
    left: 0;
    right: -1px;
}

.jqx-tab-layout-group[position="right"] .jqx-layout-tab label,
.jqx-tab-layout-group[position="right"] .jqx-layout-tab.selected .jqx-close-button {
    margin-right: 5px;
}

.jqx-tab-layout-group[position="left"] .jqx-layout-tab:after {
    right: 0px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

.jqx-tab-layout-group[position="left"] .jqx-layout-tab label,
.jqx-tab-layout-group[position="left"] .jqx-layout-tab.selected .jqx-close-button {
    transform: rotateY(0deg);
    margin-left: -5px;
}

.jqx-tab-layout-group[position="top"] .jqx-layout-tab,
.jqx-tab-layout-group[position="bottom"] .jqx-layout-tab {
    padding: 12px 24px;
}

.jqx-tab-layout-group[position="bottom"] .jqx-layout-tab:after {
    transform-origin: top;
    transform: perspective(5px) rotateX(-2deg);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 0px;
    top: 0;
}

.jqx-tab-layout-group[position="bottom"] .jqx-layout-tab label,
.jqx-tab-layout-group[position="bottom"] .jqx-layout-tab.selected .jqx-close-button {
    margin-top: -5px;
}

.jqx-split-layout jqx-layout-group {
    display: grid;
    overflow: hidden;
}

.jqx-split-layout jqx-layout-group[data-id="root"] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    grid-template-columns: 1fr;
}

.jqx-split-layout jqx-tab-layout-group {
    display: grid;
    overflow: hidden;
    grid-template-rows: 35px 1fr;
    border-right: 1px solid var(--jqx-border);
    border-bottom: 1px solid var(--jqx-border);
}

.jqx-split-layout jqx-tab-layout-group .jqx-layout-tab-strip {
    background: var(--jqx-surface);
    display: flex;
    overflow: hidden;
    border-bottom: 2px solid var(--jqx-primary);
}

.jqx-split-layout jqx-tab-layout-group[position="bottom"] {
    grid-template-rows: 1fr 35px;
}

.jqx-split-layout jqx-tab-layout-group[position="bottom"]>.jqx-layout-tab-strip {
    border: none;
    border-top: 2px solid var(--jqx-primary);
}

.jqx-split-layout jqx-tab-layout-group[position="left"] .jqx-layout-tab-strip .jqx-layout-tab .jqx-close-button:after,
.jqx-split-layout jqx-tab-layout-group[position="right"] .jqx-layout-tab-strip .jqx-layout-tab .jqx-close-button:after {
    margin-left: initial;
    margin-top: 5px;
}

.jqx-split-layout jqx-tab-layout-group[position="left"] {
    grid-template-columns: 35px 1fr;
    grid-template-rows: initial;
}

.jqx-split-layout jqx-tab-layout-group[position="left"]>.jqx-layout-tab-strip {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    justify-content: flex-end;
    align-items: center;
    border: none;
    border-left: 2px solid var(--jqx-primary);
}

.jqx-split-layout jqx-tab-layout-group[position="right"] {
    grid-template-columns: 1fr 35px;
    grid-template-rows: initial;
}

.jqx-split-layout jqx-tab-layout-group[position="right"]>.jqx-layout-tab-strip {
    writing-mode: vertical-rl;
    align-items: center;
    border: none;
    border-left: 2px solid var(--jqx-primary);
}

.jqx-split-layout jqx-tab-layout-group[orientation="vertical"] {
    height: 100%;
}

.jqx-split-layout jqx-tab-layout-group[orientation="horizontal"] {
    width: 100%;
}

.jqx-split-layout jqx-tab-layout-item {
    overflow: hidden;
}

.jqx-split-layout jqx-tab-layout-item>jqx-layout-group {
    width: 100%;
    height: 100%;
}

.jqx-split-layout .jqx-split-layout-buttons-container {
    position: absolute;
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    z-index: 9999;
}

.jqx-split-layout .jqx-layout-buttons-container div {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jqx-primary-color);
    background: var(--jqx-primary);
    font-family: var(--jqx-font-family-icon);
    font-size: var(--jqx-font-size);
    padding: 5px;
    left: calc(50% - var(--jqx-editor-addon-width) / 2);
    width: var(--jqx-editor-addon-width);
    height: var(--jqx-editor-addon-width);
    cursor: pointer;
    border-top-left-radius: var(--jqx-split-layout-buttons-border-radius);
    border-top-right-radius: var(--jqx-split-layout-buttons-border-radius);
    border-bottom-left-radius: var(--jqx-split-layout-buttons-border-radius);
    border-bottom-right-radius: var(--jqx-split-layout-buttons-border-radius);
    z-index: 1;
    touch-action: none;
}

.jqx-split-layout .jqx-layout-buttons-container div:after {
    content: var(--jqx-icon-plus);
}

.jqx-split-layout .jqx-layout-buttons-container div:active {
    color: var(--jqx-ui-state-color-active);
    border-color: var(--jqx-ui-state-active);
    background-color: var(--jqx-ui-state-active);
    opacity: var(--jqx-button-opacity-active);
}

.jqx-split-layout .jqx-layout-buttons-container div:hover {
    color: var(--jqx-ui-state-color-hover);
    border-color: var(--jqx-ui-state-hover);
    background-color: var(--jqx-ui-state-hover);
    opacity: var(--jqx-button-opacity-active);
}

.jqx-split-layout .jqx-layout-buttons-container div[position="rotate"]:after {
    content: var(--jqx-icon-reload);
}

.jqx-split-layout .jqx-layout-buttons-container div[position="center"] {
    top: calc(50% - var(--jqx-editor-addon-width) / 2);
}

.jqx-split-layout .jqx-layout-buttons-container div[position="left"] {
    top: calc(50% - var(--jqx-editor-addon-width) / 2);
    left: 0;
}

.jqx-split-layout .jqx-layout-buttons-container div[position="right"] {
    left: initial;
    top: calc(50% - var(--jqx-editor-addon-width) / 2);
    right: 0;
}

.jqx-split-layout .jqx-layout-buttons-container div[position="top"] {
    top: 0;
}

.jqx-split-layout .jqx-layout-buttons-container div[position="bottom"] {
    bottom: 0;
}

.jqx-split-layout .jqx-layout-drop-area {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99;
    pointer-events: none;
    left: 0px;
    top: 0px;
    opacity: 0;
    background: rgba(var(--jqx-primary-rgb), 0.2);
    transition: opacity 0.2s ease-in-out;
}

.jqx-split-layout .jqx-layout-item {
    height: auto;
    overflow: hidden;
    background: var(--jqx-background);
    border-right: 1px solid var(--jqx-border);
    border-bottom: 1px solid var(--jqx-border);
}

.jqx-split-layout .jqx-layout-item[hover] {
    overflow: hidden;
}

.jqx-split-layout [data-id] {
    position: relative;
}

.jqx-split-layout:not([animation='none']) .jqx-layout-buttons-container div:hover,
.jqx-split-layout:not([animation='none']) .jqx-layout-buttons-container div:active {
    transition: background-color 100ms linear, box-shadow 280ms ease-in-out;
}

.jqx-split-layout:not([animation='none']) .jqx-layout-buttons-container div[position="left"] {
    animation: leftRight 0.2s ease-in;
}

.jqx-split-layout:not([animation='none']) .jqx-layout-buttons-container div[position="right"] {
    animation: rightLeft 0.2s ease-in;
}

.jqx-split-layout:not([animation='none']) .jqx-layout-buttons-container div[position="top"] {
    animation: topBottom 0.2s ease-in;
}

.jqx-split-layout *:not([animation="none"]) .jqx-layout-buttons-container div[position="bottom"] {
    animation: bottomTop 0.2s ease-in;
}

.jqx-split-layout.outline .jqx-layout-splitter {
    opacity: 1;
}

.jqx-split-layout .jqx-layout-splitter {
    z-index: 999;
    position: absolute;
    background: var(--jqx-border);
    border: 1px solid var(--jqx-border);
    top: 0px;
    left: 0px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.jqx-split-layout .jqx-layout-splitter:hover {
    border-color: var(--jqx-primary);
    border-style: dashed;
}

.jqx-split-layout .jqx-layout-splitter:not([root-splitter]) {
    transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out;
}

.jqx-split-layout .jqx-layout-splitter.active {
    background: var(--jqx-primary);
    border-color: var(--jqx-primary);
}

.jqx-split-layout .jqx-layout-splitter.error {
    background: var(--jqx-error);
    border-color: var(--jqx-error);
}

.jqx-split-layout .jqx-layout-splitter.horizontal {
    height: 1px;
    width: 100%;
    bottom: 0px;
    top: initial;
    cursor: s-resize;
}

.jqx-split-layout .jqx-layout-splitter.horizontal.last {
    top: 0px;
    bottom: initial;
    display: none;
}

.jqx-split-layout .jqx-layout-splitter.vertical {
    width: 1px;
    height: 100%;
    right: 0px;
    left: initial;
    cursor: e-resize;
}

.jqx-split-layout .jqx-layout-splitter.vertical.last {
    left: 0px;
    right: initial;
    display: none;
}

.jqx-split-layout .jqx-layout-splitter[drag].horizontal,
.jqx-split-layout .jqx-layout-splitter[drag].vertical,
.jqx-split-layout .jqx-layout-item[hover]>.jqx-layout-splitter.horizontal,
.jqx-split-layout .jqx-layout-item[hover]>.jqx-layout-splitter.vertical,
.jqx-split-layout .jqx-layout-group[hover]>.jqx-layout-splitter.horizontal,
.jqx-split-layout .jqx-layout-group[hover]>.jqx-layout-splitter.vertical {
    opacity: 1;
    z-index: 99;
}

.jqx-layout-tab {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding: 12px 24px;
    font-family: var(--jqx-font-family);
    box-sizing: border-box;
    transition: background-color 0.2s ease-in-out;
}

.jqx-layout-tab:hover {
    color: var(--jqx-primary);
}

.jqx-layout-tab.selected {
    color: var(--jqx-primary-color);
    background: var(--jqx-primary);
}

.jqx-layout-tab.selected .jqx-close-button {
    z-index: 10;
    color: inherit;
}

.jqx-layout-tab.selected .jqx-close-button:after {
    content: 'x';
    width: 16px;
    height: 16px;
    cursor: pointer;
    font-family: var(--jqx-font-family-icon);
    margin-left: 5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.jqx-layout-tab label {
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    z-index: 9;
    margin-top: 2px;
    color: inherit;
}

.jqx-split-layout-feedback {
    box-shadow: 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12), 0 11px 15px 0 rgba(0, 0, 0, .2);
    background: var(--jqx-background);
    position: absolute;
    width: 300px !important;
    height: 150px !important;
    max-height: 150px !important;
    overflow: hidden;
    left: 0px;
    top: 0px;
    pointer-events: none;
    transform-origin: top left;
    transform: scale(1);
    transition: transform 0.25s ease-in-out;
}

.jqx-split-layout-feedback.dragging {
    transform: scale(0.5);
}

.jqx-split-layout-overlay {
    position: absolute;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.01;
    background: black;
}

@keyframes topBottom {
    0% {
        top: calc(-1 * var(--jqx-editor-addon-width));
    }

    100% {
        top: 0;
    }
}

@keyframes bottomTop {
    0% {
        bottom: calc(-1 * var(--jqx-editor-addon-width));
    }

    100% {
        bottom: 0;
    }
}

@keyframes leftRight {
    0% {
        left: calc(-1 * var(--jqx-editor-addon-width));
    }

    100% {
        left: 0;
    }
}

@keyframes rightLeft {
    0% {
        right: calc(-1 * var(--jqx-editor-addon-width));
    }

    100% {
        right: 0;
    }
}

.jqx-visibility-hidden {
    visibility: hidden;
}

.jqx-hidden {
    display: none;
}

/* End of Split Layout */

.jqx-widget .ripple,
.jqx-listbox .ripple,
.jqx-grid .ripple {
    position: relative;
    transform: none !important;
    overflow: hidden;
}

.jqx-grid .ripple {
    position: relative;
    transform: none !important;
    overflow: hidden;
}

.jqx-gantt {
    overflow: hidden;
    border-style: solid;
    border-width: 1px;
}

.jqx-grid line[highlight] {
    stroke: #005A9E;
}

.jqx-grid path[highlight],
.jqx-grid rect[highlight] {
    fill: #005A9E;
}

@font-face {
    font-family: jqx-icons;
    src: local("./font/jqx-icons"), url("./font/jqx-icons.woff2") format("woff2"), url("./font/jqx-icons.woff") format("woff"), url("./font/jqx-icons.ttf") format("truetype"), url("./font/jqx-icons.eot") format("embedded-opentype");
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    speak: none;
}

.jqx-timeline.jqx-widget {
    overflow: hidden;
    padding: 10px;
    font-family: var(--jqx-font-family);
    display: block;
}

.jqx-timeline .jqx-container {
    position: relative;
    overflow: hidden;
    display: flex;
}

.jqx-timeline-near-items {
    padding-right: 20px;
    position: relative;
}

.jqx-timeline-far-items {
    padding-left: 20px;
    position: relative;
}

.jqx-timeline[horizontal] .jqx-container {
    flex-direction: column;
}

.jqx-timeline[horizontal] .jqx-timeline-near-items {
    padding-right: 0px;
    padding-bottom: 20px;
    display: flex;
    align-items: flex-end;
}

.jqx-timeline[horizontal] .jqx-timeline-far-items {
    padding-left: 0px;
    padding-top: 20px;
    display: flex;
}

.jqx-timeline-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-block: 20px;
    padding-inline: 0;
    position: relative;
}

.jqx-timeline[horizontal] .jqx-timeline-item {
    display: block;
    padding-block: 0px;
}

.jqx-timeline-item[collapsible] {
    cursor: pointer;
}

.jqx-timeline-item-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.jqx-timeline-item-content {
    background: var(--jqx-background, #fff);
    border: 1px solid var(--jqx-border, #E9EAED);
    padding: 20px;
    border-radius: var(--jqx-border-radius);
    position: relative;
}

.jqx-timeline-item-pointer {
    top: 50%;
    right: 0px;
    content: '';
    transform: translate(-50%, -50%) rotate(45deg);
    width: 16px;
    height: 16px;
    background: var(--jqx-background, #fff);
    border: 1px solid var(--jqx-border, #E9EAED);
    display: block;
    right: 0px;
    position: absolute;
    margin-right: -16px;
    z-index: 9;
}

.jqx-timeline-item-pointer::after {
    width: 16px;
    content: '';
    background: var(--jqx-background, #fff);
    height: 16px;
    position: absolute;
    z-index: 9;
    right: 14px;
}

.jqx-timeline-item-pointer::before {
    content: '';
    background: var(--jqx-background, #fff);
    width: 16px;
    height: 16px;
    position: absolute;
    z-index: 9;
    top: 14px;
    right: inherit;
}

.jqx-timeline-far-items .jqx-timeline-item-pointer {
    right: inherit;
    left: 0px;
}

.jqx-timeline-far-items .jqx-timeline-item-pointer::before {
    right: unset;
    left: 14px;
    top: -2px;
}

.jqx-timeline-far-items .jqx-timeline-item-pointer::after {
    top: -16px;
    right: -2px;
}

.jqx-timeline[horizontal] .jqx-timeline-item-pointer {
    left: 50%;
    top: 0px;
}

.jqx-timeline[horizontal] .jqx-timeline-near-items .jqx-timeline-item-pointer {
    left: 50%;
    bottom: -16px;
    top: unset;
}

.jqx-timeline-far-items .jqx-timeline-item {
    justify-content: flex-start;
}

.jqx-timeline-far-items .jqx-timeline-item-content {
    padding-left: 20px;
    padding-right: 20px;
}

.jqx-timeline[horizontal] .jqx-timeline-far-items .jqx-timeline-item-pointer::after {
    top: unset;
}

.jqx-timeline[horizontal] .jqx-timeline-far-items .jqx-timeline-item-pointer::before {
    top: 0px;
}

.jqx-timeline[horizontal] .jqx-timeline-near-items .jqx-timeline-item-pointer::before {
    top: -16px;
}

.jqx-timeline[horizontal] .jqx-timeline-near-items .jqx-timeline-item-pointer::after {
    left: -16px;
    top: -2px;
}

.jqx-timeline-item-title {
    font-size: 16px;
    font-weight: 400;
}

.jqx-timeline-item .jqx-timeline-item-description {
    display: none;
    margin-top: 20px;
}

.jqx-timeline-item.expanded .jqx-timeline-item-description {
    display: block;
}

.jqx-timeline-item[collapsible].expanded .jqx-timeline-item-title::after {
    content: var(--jqx-icon-arrow-down);
}

.jqx-timeline-item[collapsible] .jqx-timeline-item-title::after {
    content: var(--jqx-icon-arrow-right);
    display: inline;
    width: 100%;
    height: 1px;
    font-family: var(--jqx-font-family-icon);
    margin-top: 10px;
    cursor: pointer;
}

.jqx-timeline-item-subtitle {
    font-size: 12px;
    font-weight: 400;
}

.jqx-timeline-track {
    border-width: 1px;
    border-style: solid;
    width: 6px;
    border-radius: 6px;
    background: var(--jqx-surface, #FAFAFA);
    border: 1px solid var(--jqx-border, #E9EAED);
    display: flex;
    align-items: center;
    flex-direction: column;
}

.jqx-timeline[horizontal] .jqx-timeline-track {
    width: 100%;
    height: 6px;
}

.jqx-timeline-near-items .jqx-timeline-item-date {
    right: 20px;
}

.jqx-timeline-far-items .jqx-timeline-item-date {
    left: 20px;
}

.jqx-timeline[horizontal] .jqx-timeline-near-items .jqx-timeline-item-date {
    right: unset;
    bottom: 20px;
}

.jqx-timeline[horizontal] .jqx-timeline-far-items .jqx-timeline-item-date {
    left: unset;
    top: 20px;
}

.jqx-timeline-item-date {
    position: absolute;
    margin-top: 3px;
}

.jqx-timeline-dot {
    width: 16px;
    height: 16px;
    margin-top: 4px;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    background: var(--jqx-primary, #1274AC);
}

.jqx-timeline[horizontal] .jqx-timeline-dot {
    margin-top: -6px;
}

.jqx-window.jqx-grid-dialog {
    position: absolute;
    box-shadow: 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12), 0 11px 15px 0 rgba(0, 0, 0, .2);
    z-index: 99999;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--jqx-background);
    border: 1px solid var(--jqx-border);
    --jqx-window-header-button-size: 13px;
    --jqx-window-content-padding: 10px;
    /* Sets the size of the header buttons */
    --jqx-window-header-icon-size: var(--jqx-font-size);

}

.jqx-window.jqx-grid-dialog>.jqx-container:not(.jqx-window) {
    width: 100%;
    height: 100%;
}

.jqx-window.jqx-grid-dialog .jqx-content-container {
    display: flex;
    flex-direction: column;
    font-family: inherit;
    font-size: inherit;
    width: 100%;
    height: 100%;
    outline: none;
    max-height: inherit;
}

.jqx-window.jqx-grid-dialog .jqx-content-container>.jqx-header-section {
    display: flex;
    justify-content: space-between;
    cursor: move;
    overflow: hidden;
    align-items: center;
    touch-action: none;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    user-select: none;
    -webkit-user-select: none;
    border-color: var(--jqx-border);
    color: var(--jqx-surface-color);
    line-height: initial;
    height: var(--jqx-window-header-height);
    min-height: var(--jqx-window-header-height);
    background: var(--jqx-window-header-background);
    padding: var(--jqx-window-header-padding);
    box-sizing: border-box;
}

.jqx-window.jqx-grid-dialog .jqx-content-container>.jqx-header-section .jqx-buttons-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jqx-window.jqx-grid-dialog .jqx-content-container>.jqx-header-section .jqx-buttons-container button {
    position: relative;
    margin-left: 1px;
    margin-right: 1px;
    cursor: pointer;
    height: var(--jqx-window-header-button-size);
    width: var(--jqx-window-header-button-size);
    padding: 0;
    min-height: 0;
    background: transparent;
    color: inherit;
    border: none;
    outline: none;
}

.jqx-window.jqx-grid-dialog .jqx-content-container>.jqx-header-section .jqx-buttons-container button:active {
    outline: none;
    background-color: initial;
}

.jqx-window.jqx-grid-dialog .jqx-content-container>.jqx-content {
    width: 100%;
    height: calc(100% - var(--jqx-window-header-height));
    display: flex;
    align-items: center;
    overflow-y: auto;
    padding: var(--jqx-window-content-padding);
    background: var(--jqx-background);
    flex-direction: column;
    /* There's an issue with display:flex/grid and align-items: center */
}

.jqx-window.jqx-grid-dialog {
    transition: opacity 0.2s, transform 0.2s ease-out;
    transform: scaleX(0);
    opacity: 0;
    font-family: var(--jqx-font-family);
    font-size: var(--jqx-font-size);
}

@font-face {
    font-family: jqx-icons;
    src: local("./font/jqx-icons"), url("./font/jqx-icons.woff2") format("woff2"), url("./font/jqx-icons.woff") format("woff"), url("./font/jqx-icons.ttf") format("truetype"), url("./font/jqx-icons.eot") format("embedded-opentype");
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    speak: none;
}

.jqx-window.jqx-grid-dialog .jqx-header-section .jqx-close-button {
    font-family: jqx-icons;
}

.jqx-window.jqx-grid-dialog .jqx-header-section .jqx-close-button:after {
    content: var(--jqx-icon-close);
}

.jqx-window.jqx-grid-dialog.open {
    transform: scaleX(1);
    opacity: 1;
}

.jqx-window.jqx-grid-dialog.jqx-grid-dialog.disable-animation {
    transition: none;
}

.jqx-window.jqx-grid-dialog.jqx-grid-side-panel {
    transform-origin: top right !important;
    transform: scaleX(0) !important;
}

.jqx-window.jqx-grid-dialog.jqx-grid-side-panel.open {
    transform: scaleX(1) !important;
}

.jqx-form-tooltip {
    background-color: var(--jqx-primary);
    color: var(--jqx-primary-color);
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    border-radius: 0px;
    cursor: pointer;
    display: flex;
    opacity: 0.9;
    align-items: center;
    position: absolute;
    padding: 5px;
}

.jqx-form-spinner {
    border: 3px solid var(--jqx-primary-color);
    border-top: 3px solid var(--jqx-primary);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 0.8s linear infinite;
    margin-left: 4px;
    margin-right: 8px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

jqx-pager {
    display: none !important;
}

.jqx-grid-pager-zindex {
    z-index: 20;
}

/* CSP helpers */

.jqx-scroll-outer {
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    border: 0;
    position: relative;
}

.jqx-scroll-wrap {
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

.jqx-scroll-item {
    box-sizing: content-box;
    left: 0;
    top: 0;
    position: absolute;
}

.jqx-scroll-btn-inner {
    width: 100%;
    height: 100%;
}

/* Loader container */
.jqx-grid-load-container {
    overflow: hidden;
    position: absolute;
}

/* Centered loader box */
.jqx-grid-load-box {
    z-index: 99;
    margin-left: -66px;
    left: 50%;
    top: 50%;
    margin-top: -24px;
    position: relative;
    width: 100px;
    height: 33px;
    padding: 5px;
    font-family: verdana;
    font-size: 12px;
    color: #767676;
    border-color: #898989;
    border-width: 1px;
    border-style: solid;
    background: #f6f6f6;
    border-collapse: collapse;
}

/* Inner layout */
.jqx-grid-load-row {
    float: left;
}

.jqx-grid-load-icon-wrapper {
    float: left;
    overflow: hidden;
    width: 32px;
    height: 32px;
}

.jqx-grid-load-text {
    margin-top: 10px;
    float: left;
    display: block;
    margin-left: 5px;
}

.jqx-measure-span {
    visibility: hidden;
    white-space: nowrap;
}

.jqx-grid-columns-header-csp {
    overflow: hidden;
}

.jqx-grid-content-csp {
    width: 100%;
    overflow: hidden;
    position: absolute;
}

.jqx-grid-row-csp {
    position: relative;
}

.jqx-selection-area-csp {
    z-index: 9999;
    visibility: hidden;
    position: absolute;
}

.jqx-column-header-csp {
    position: absolute;
    height: 100%;
}

.jqx-column-header-inner-csp {
    height: 100%;
    width: 100%;
}

.jqx-column-table-csp {
    height: 100%;
    position: relative;
}

.jqx-columns-menu-csp {
    display: none;
    left: 100%;
    top: 0%;
    position: absolute;
}

.jqx-columns-menu-inner-csp {
    width: 100%;
    height: 100%;
}

/* Base ellipsis wrapper */
.jqx-header-ellipsis-left-csp {
    padding-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    margin-left: 4px;
    margin-right: 2px;
}

.jqx-header-ellipsis-right-csp {
    padding-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    margin-left: 2px;
    margin-right: 4px;
}

.jqx-header-ellipsis-text-csp {
    text-overflow: ellipsis;
    cursor: default;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    /* kept to the wrapper, so a title too long for its column ends in an ellipsis (it was cut off
       mid-letter: the span grew to the text and only the wrapper clipped it) */
    max-width: 100%;
    vertical-align: top;
}

/* Center wrapper */
.jqx-header-center-csp {
    padding-bottom: 2px;
    text-align: center;
}

/* Link base */
.jqx-header-link-csp {
    display: inline-block;
}

/* Float variants */
.jqx-header-link-left-csp {
    float: left;
}

.jqx-header-link-right-csp {
    float: right;
}

/* Outer container */
.jqx-grid-iconscontainer-csp {
    margin-left: -32px;
    display: block;
    position: absolute;
    left: calc(100% - 2px);
    top: 0%;
    width: 32px;
}
.jqx-grid-column-header[sort][sort-index] .jqx-grid-iconscontainer-csp {
    left: calc(100% - 20px);
    width: auto;
}
.jqx-grid-column-header[filter][sort][sort-index] .jqx-grid-iconscontainer-csp {
    left: calc(100% - 34px);
    width: auto;
}

/* Shared icon box */
.jqx-grid-header-icon-csp {
    float: right;
    width: 16px;
}

/* Visibility states */
.jqx-grid-header-icon-hidden-csp {
    visibility: hidden;
}

.jqx-grid-header-icon-display-none-csp {
    display: none;
}

/* Inner icon full size */
.jqx-grid-header-icon-inner-csp {
    width: 100%;
    height: 100%;
}

.jqx-grid-content-table-csp {
    overflow: hidden;
    position: relative;
}

/* Ellipsis-enabled cell wrappers */
.jqx-grid-cell-middle-align-csp {
    text-align: center;
}

.jqx-grid-cell-left-align-csp {
    text-align: left;
}

.jqx-grid-cell-right-align-csp {
    text-align: right;
}

/* Non-ellipsis center */
.jqx-grid-cell-center-csp {
    text-align: center;
}

/* Default span (non-center) */
.jqx-grid-cell-span-csp {
    display: inline-block;
    margin-left: 4px;
    margin-right: 2px;
}

/* Float helpers */
.jqx-grid-float-left-csp {
    float: left;
}

.jqx-grid-float-right-csp {
    float: right;
}

/* Resize lines */
.jqx-grid-resizeline-csp {
    position: absolute;
}

.jqx-grid-resizestartline-csp {
    position: absolute;
}

/* Resize background overlay */
.jqx-grid-resizebackground-csp {
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
}

/* Main pager container */
.jqx-grid-pagerdiv-csp {
    line-height: 26px;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Material pager wrapper (replaces \3c style> injection too) */
.jqx-grid-pager-material-wrapper-csp {
    margin-top: 5px;
    width: 100%;
    height: 100%;
}

/* These replace the injected \3c style> */
.jqx-center {
    text-align: center;
}

.jqx-pagination {
    display: inline-block;
}

.jqx-pagination span {
    float: left;
    text-decoration: none;
    transition: background-color .3s;
    border-style: solid;
    border-width: 1px;
    margin: 0 4px;
    border-radius: 100%;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    cursor: pointer;
}

/* Pager input wrapper */
.jqx-grid-pager-gotoinput-csp {
    margin-right: 12px;
    height: 28px;
    float: right;
}

/* Pager goto input */
.jqx-grid-pager-input-csp {
    height: 100%;
    box-sizing: border-box;
    text-align: right;
    width: 36px;
}

/* Generic pager right-floating blocks */
.jqx-grid-pager-float-right-csp {
    float: right;
    margin-right: 7px;
}

/* Pager buttons container */
.jqx-grid-pager-buttons-csp {
    margin-right: 3px;
    float: right;
}

/* Individual pager buttons */
.jqx-grid-pager-btn-csp {
    padding: 0;
    margin-right: 3px;
    height: 26px;
    width: 26px;
    float: right;
}

/* First/Last buttons */
.jqx-grid-pager-btn-first-csp {
    padding: 0;
    margin-left: 3px;
    margin-right: 3px;
    width: 26px;
    float: right;
}

.jqx-grid-pager-btn-last-csp {
    padding: 0;
    margin-right: 3px;
    width: 26px;
    float: right;
}

.jqx-grid-pager-goto-csp {
    float: right;
    margin-right: 7px;
}

/* Wrapper for filter inputs */
.jqx-grid-filter-wrapper-csp {
    margin-top: 3px;
}

.jqx-grid-menu-csp {
    z-index: 99;
}

/* Filter input itself */
.jqx-grid-filter-input-csp {
    padding: 3px;
    height: 16px;
    margin-top: 3px;
}

.jqx-grid-filteritem-csp {
    height: 224px;
}

.jqx-grid-measure-span-csp {
    visibility: hidden;
    white-space: nowrap;
}

.jqx-grid-filterpanel-container-csp {
    position: absolute;
    bottom: 3px;
    margin-left: 3px;
}

.jqx-grid-filter-showwhere-csp {
    height: 18px;
    margin-top: 3px;
    margin-bottom: 3px;
}

.jqx-grid-filter-input-second-csp {
    padding: 3px;
    height: 16px;
    margin-top: 3px;
    margin-bottom: 3px;
}

/* Apply input container */
.jqx-grid-filter-apply-container-csp {
    height: 35px;
    text-align: center;
    margin-top: 15px;
    margin-left: -2px;
}

.jqx-grid-filter-operator-csp {
    margin-top: 3px;
    margin-bottom: 3px;
}

/* Main filter button */
.jqx-grid-filter-apply-button-csp {
    padding: 6px 15px;
}

/* Clear filter button */
.jqx-grid-filter-clear-button-csp {
    position: relative;
    left: 2px;
    padding: 6px 15px;
    margin-left: 7px;
}

.jqx-grid-span-csp {
    color: inherit;
    border: none;
    background-color: transparent;
}

/* Arrow inner icons */
.jqx-grid-pager-arrow-inner-csp {
    margin-left: 6px;
    width: 15px;
    height: 26px;
}

/* DropDown pager list */
.jqx-grid-pager-list-csp {
    margin-right: 7px;
    float: right;
}

.jqx-grid-filter-input-inline-csp {
    box-sizing: content-box;
    height: 16px;
    padding: 3px;
}

.jqx-ddl-structure-csp {
    background-color: transparent;
    -webkit-appearance: none;
    outline: none;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    position: relative;
}

.jqx-ddl-wrapper-csp {
    overflow: hidden;
    outline: none;
    background-color: transparent;
    border: none;
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
}

.jqx-ddl-content-csp {
    outline: none;
    background-color: transparent;
    border: none;
    float: left;
    position: relative;
}

.jqx-ddl-arrow-csp {
    background-color: transparent;
    border: none;
    float: right;
    position: relative;
}

.jqx-ddl-arrow-inner-csp {
    width: 100%;
    height: 100%;
}

.jqx-ddl-arrow-inner-csp.jqx-icon {
    height: 16px;
}

.jqx-listbox-container-csp {
    overflow: hidden;
    background-color: transparent;
    border: none;
    position: absolute;
}

/* Root listbox structure */
.jqx-listbox-structure-csp {
    -webkit-appearance: none;
    background: transparent;
    outline: none;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    position: relative;
}

/* Inner wrapper */
.jqx-listbox-inner-wrapper-csp {
    -webkit-appearance: none;
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    position: relative;
}

/* Filter container */
.jqx-listbox-filter-csp {
    display: none;
    visibility: inherit;
    left: 0;
    top: 0;
    position: absolute;
}

.jqx-listbox-filter-input-csp {
    position: absolute;
}

/* Content area */
.jqx-listbox-content-csp {
    -webkit-appearance: none;
    border: none;
    background: transparent;
    outline: none;
    padding: 0;
    overflow: hidden;
    margin: 0;
    left: 0;
    top: 0;
    position: absolute;
}

/* Scrollbars */
.jqx-listbox-vscroll-csp,
.jqx-listbox-hscroll-csp {
    visibility: inherit;
    left: 0;
    top: 0;
    position: absolute;
}

/* Bottom right corner */
.jqx-listbox-bottomright-csp {
    border: none;
    left: 0;
    top: 0;
    position: absolute;
}

/* Checkbox outer wrapper */
.jqx-listbox-checkbox-wrapper-csp {
    background-color: transparent;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: absolute;
    float: left;
}

/* Checkbox inner clickable area */
.jqx-listbox-checkbox-inner-csp {
    cursor: pointer;
}

/* Checkbox check span */
.jqx-listbox-checkbox-check-csp {
    display: inline-block;
}

/* Item text span */
.jqx-listbox-item-text-csp {
    white-space: pre;
}

.jqx-listbox-itemswrapper-csp {
    outline: 0 none;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.jqx-menu-wrapper-csp {
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    visibility: visible;
}
/* DataTable */
/* Root container */
.jqx-datatable-csp-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Main wrapper */
.jqx-datatable-csp-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: transparent;
    margin: 0;
    padding: 0;
    border: none;
}

/* Shared absolute elements */
.jqx-datatable-csp-toolbar,
.jqx-datatable-csp-toppager,
.jqx-datatable-csp-filter,
.jqx-datatable-csp-content,
.jqx-datatable-csp-vscroll,
.jqx-datatable-csp-hscroll,
.jqx-datatable-csp-bottomright,
.jqx-datatable-csp-aggregates,
.jqx-datatable-csp-statusbar,
.jqx-datatable-csp-pager {
    position: absolute;
    left: 0;
    top: 0;
}

/* Hidden by default */
.jqx-datatable-csp-toolbar,
.jqx-datatable-csp-filter {
    visibility: hidden;
}

/* Content area */
.jqx-datatable-csp-content {
    overflow: hidden;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
}

/* Pager overlay priority */
.jqx-datatable-csp-pager {
    z-index: 20;
}
.jqx-datatable-csp-measure {
    visibility: hidden;
    white-space: nowrap;
    position: absolute;
    top: -10000px;   /* extra safety: keep it offscreen */
    left: -10000px;
}
.jqx-grid-columnsheader-csp {
  overflow: hidden;
}
/* Outer container */
.jqx-csp-column-header-content {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 4px;
    margin-right: 4px;
}

/* Inner text */
.jqx-csp-column-header-text {
    text-overflow: ellipsis;
    cursor: default;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}
.jqx-csp-column-header-content {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 4px;
    margin-right: 4px;
}

.jqx-csp-align-left   { text-align: left; }
.jqx-csp-align-center { text-align: center; }
.jqx-csp-align-right  { text-align: right; }

.jqx-csp-column-header-text {
    text-overflow: ellipsis;
    cursor: default;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}
.jqx-datatable-cell-csp {
    box-sizing: border-box;
}

.jqx-datatable-cell-pinned-csp {
    pointer-events: none;
    visibility: hidden;
    border-color: transparent;
}

.jqx-no-right-border-csp {
    border-right-color: transparent;
}

/* End of DataTable */

/* jqxChat - AI assistant chat component.
   A modern, self-contained skin driven by CSS custom properties, so it looks
   good out of the box and is easy to re-brand: set the "accentColor" /
   "colorScheme" options, or override the --jqxchat-* variables in your own CSS.
   It deliberately does NOT inherit the flat jqx-fill-state-* theme colours. */
.jqx-chat,
.jqx-chat-launcher {
    --jqxchat-accent: #6366f1;
    --jqxchat-accent-2: #8b5cf6;
    --jqxchat-on-accent: #ffffff;
    --jqxchat-bg: #ffffff;
    --jqxchat-surface: #f3f4f6;
    --jqxchat-surface-2: #e9ebef;
    --jqxchat-text: #1f2430;
    --jqxchat-muted: #6b7280;
    --jqxchat-border: #e6e8ec;
    --jqxchat-code-bg: #1e1e2e;
    --jqxchat-shadow: 0 12px 34px rgba(24, 24, 48, 0.12);
    --jqxchat-ring: rgba(99, 102, 241, 0.18);
}

/* dark scheme: explicit, or auto via the OS preference */
.jqx-chat-scheme-dark,
.jqx-chat-launcher.jqx-chat-scheme-dark {
    --jqxchat-bg: #16181d;
    --jqxchat-surface: #23262d;
    --jqxchat-surface-2: #2c303a;
    --jqxchat-text: #e8eaef;
    --jqxchat-muted: #9aa1ad;
    --jqxchat-border: #323844;
    --jqxchat-code-bg: #0f1117;
    --jqxchat-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
    --jqxchat-ring: rgba(139, 92, 246, 0.35);
}

@media (prefers-color-scheme: dark) {
    .jqx-chat-scheme-auto,
    .jqx-chat-launcher.jqx-chat-scheme-auto {
        --jqxchat-bg: #16181d;
        --jqxchat-surface: #23262d;
        --jqxchat-surface-2: #2c303a;
        --jqxchat-text: #e8eaef;
        --jqxchat-muted: #9aa1ad;
        --jqxchat-border: #323844;
        --jqxchat-code-bg: #0f1117;
        --jqxchat-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
        --jqxchat-ring: rgba(139, 92, 246, 0.35);
    }
}

/* The doubled selector outranks the theme's .jqx-widget-<theme> { color: inherit } rule, which
   is loaded after this file: the chat keeps its own text colour on every theme. */
.jqx-chat,
.jqx-chat.jqx-widget {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    background: var(--jqxchat-bg);
    color: var(--jqxchat-text);
    border: 1px solid var(--jqxchat-border);
    border-radius: 16px;
    box-shadow: var(--jqxchat-shadow);
}

.jqx-chat * {
    box-sizing: border-box;
}

.jqx-chat-disabled {
    opacity: 0.6;
}

/* ---------- header ---------- */
.jqx-chat-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--jqxchat-border);
}

.jqx-chat-headavatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 700;
    font-size: 15px;
    color: var(--jqxchat-on-accent);
    background: linear-gradient(135deg, var(--jqxchat-accent), var(--jqxchat-accent-2));
}

.jqx-chat-headavatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jqx-chat-titlebox {
    flex: 1 1 auto;
    min-width: 0;
}

.jqx-chat-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jqx-chat-subtitle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--jqxchat-muted);
    margin-top: 2px;
}

.jqx-chat-subtitle-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jqx-chat-status {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.jqx-chat-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

.jqx-chat-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--jqxchat-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}

.jqx-chat-iconbtn:hover {
    color: var(--jqxchat-text);
    background: var(--jqxchat-surface-2);
}

/* ---------- body ---------- */
.jqx-chat-bodywrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.jqx-chat-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 14px;
    width: 100%;
    scroll-behavior: smooth;
}

.jqx-chat-body::-webkit-scrollbar { width: 8px; }
.jqx-chat-body::-webkit-scrollbar-thumb {
    background: var(--jqxchat-border);
    border-radius: 4px;
}
.jqx-chat-body::-webkit-scrollbar-track { background: transparent; }

.jqx-chat-scrollbtn {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--jqxchat-text);
    background: var(--jqxchat-bg);
    border: 1px solid var(--jqxchat-border);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    z-index: 5;
}

/* ---------- messages ---------- */
.jqx-chat-message {
    display: flex;
    align-items: flex-start;
    margin: 12px 0;
}

.jqx-chat-message:first-child { margin-top: 2px; }

.jqx-chat-message-user {
    flex-direction: row-reverse;
}

.jqx-chat-message-content {
    max-width: 80%;
    display: flex;
    flex-direction: column;
    margin: 0 10px;
    min-width: 0;
}

.jqx-chat-message-user .jqx-chat-message-content {
    align-items: flex-end;
}

.jqx-chat-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
}

.jqx-chat-avatar-bot {
    background: linear-gradient(135deg, var(--jqxchat-accent), var(--jqxchat-accent-2));
}

.jqx-chat-avatar-user {
    background: linear-gradient(135deg, #64748b, #94a3b8);
}

img.jqx-chat-avatar {
    object-fit: cover;
}

.jqx-chat-meta {
    font-size: 11px;
    color: var(--jqxchat-muted);
    margin-bottom: 4px;
    padding: 0 4px;
}

.jqx-chat-author {
    font-weight: 600;
}

.jqx-chat-time {
    margin-left: 6px;
    opacity: 0.85;
}

.jqx-chat-message-user .jqx-chat-time {
    margin-left: 0;
    margin-right: 6px;
}

.jqx-chat-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    line-height: 1.55;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.jqx-chat-bubble-bot {
    background: var(--jqxchat-surface);
    color: var(--jqxchat-text);
    border-bottom-left-radius: 5px;
}

.jqx-chat-bubble-user {
    background: linear-gradient(135deg, var(--jqxchat-accent), var(--jqxchat-accent-2));
    color: var(--jqxchat-on-accent);
    border-bottom-right-radius: 5px;
}

.jqx-chat-bubble strong { font-weight: 700; }
.jqx-chat-bubble em { font-style: italic; }

.jqx-chat-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.jqx-chat-bubble.jqx-chat-error {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #ef4444;
    box-shadow: none;
}

.jqx-chat-enter {
    animation: jqx-chat-enter 0.2s ease-out;
}

@keyframes jqx-chat-enter {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- code ---------- */
.jqx-chat-code-wrap {
    position: relative;
    margin: 8px 0;
}

.jqx-chat-code {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--jqxchat-code-bg);
    color: #e6e6f0;
    overflow-x: auto;
    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre;
}

.jqx-chat-code code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.jqx-chat-copy {
    position: absolute;
    top: 7px;
    right: 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 11px;
    color: #e6e6f0;
    background: rgba(255, 255, 255, 0.10);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}

.jqx-chat-code-wrap:hover .jqx-chat-copy { opacity: 1; }
.jqx-chat-copy:hover { background: rgba(255, 255, 255, 0.22); }

.jqx-chat-inline-code {
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--jqxchat-surface-2);
    font-family: 'SF Mono', SFMono-Regular, Consolas, Menlo, monospace;
    font-size: 0.9em;
}

.jqx-chat-bubble-user .jqx-chat-inline-code {
    background: rgba(255, 255, 255, 0.22);
}

/* ---------- typing indicator ---------- */
.jqx-chat-typing {
    display: inline-flex;
    align-items: center;
    padding: 12px 14px;
    background: var(--jqxchat-surface);
    border-radius: 16px;
    border-bottom-left-radius: 5px;
}

.jqx-chat-typing span {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 2px;
    border-radius: 50%;
    background: var(--jqxchat-muted);
    opacity: 0.5;
    animation: jqx-chat-typing-bounce 1.2s infinite ease-in-out;
}

.jqx-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.jqx-chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes jqx-chat-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 0.95; }
}

/* ---------- empty state / starter prompts ---------- */
.jqx-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 24px;
}

.jqx-chat-empty-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--jqxchat-accent), var(--jqxchat-accent-2));
    box-shadow: 0 10px 24px var(--jqxchat-ring);
    margin-bottom: 16px;
}

.jqx-chat-empty-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--jqxchat-text);
    max-width: 320px;
    margin-bottom: 18px;
}

.jqx-chat-starters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.jqx-chat-starter {
    padding: 9px 14px;
    font-size: 13px;
    color: var(--jqxchat-text);
    background: var(--jqxchat-surface);
    border: 1px solid var(--jqxchat-border);
    border-radius: 14px;
    cursor: pointer;
    max-width: 100%;
    line-height: 1.35;
    transition: transform 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}

.jqx-chat-starter:hover {
    transform: translateY(-1px);
    border-color: var(--jqxchat-accent);
    color: var(--jqxchat-accent);
    box-shadow: 0 4px 12px var(--jqxchat-ring);
}

/* ---------- footer / pill input ---------- */
.jqx-chat-footer {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--jqxchat-border);
}

.jqx-chat-inputwrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--jqxchat-surface);
    border: 1px solid var(--jqxchat-border);
    border-radius: 24px;
    padding: 5px 5px 5px 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.jqx-chat-inputwrap:focus-within {
    border-color: var(--jqxchat-accent);
    box-shadow: 0 0 0 3px var(--jqxchat-ring);
}

.jqx-chat-input {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--jqxchat-text);
    resize: none;
    overflow-y: auto;
    min-height: 24px;
    max-height: 120px;
    padding: 6px 0;
    line-height: 1.4;
    font-family: inherit;
    font-size: 14px;
}

.jqx-chat-input::placeholder { color: var(--jqxchat-muted); }

.jqx-chat-send {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--jqxchat-accent), var(--jqxchat-accent-2));
    transition: transform 0.12s, filter 0.12s;
}

.jqx-chat-send:hover { filter: brightness(1.08); transform: translateY(-1px); }
.jqx-chat-send:active { transform: translateY(0); }
.jqx-chat-send:disabled { opacity: 0.5; cursor: default; transform: none; filter: none; }

.jqx-chat-send-stop { background: #ef4444; }

/* ---------- RTL ---------- */
.jqx-chat-rtl .jqx-chat-inputwrap { padding: 5px 16px 5px 5px; }
.jqx-chat-rtl .jqx-chat-time { margin-left: 6px; margin-right: 0; }
.jqx-chat-rtl .jqx-chat-message-user .jqx-chat-time { margin-left: 0; margin-right: 6px; }

/* ---------- popup / launcher mode ---------- */
.jqx-chat-popup {
    position: fixed;
    z-index: 99998;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 110px);
}

.jqx-chat-popup.jqx-chat-bottom-right { right: 20px; bottom: 90px; }
.jqx-chat-popup.jqx-chat-bottom-left  { left: 20px;  bottom: 90px; }

.jqx-chat-launcher {
    position: fixed;
    z-index: 99999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--jqxchat-accent), var(--jqxchat-accent-2));
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.45);
    transition: transform 0.15s, box-shadow 0.15s;
}

.jqx-chat-launcher:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 30px rgba(79, 70, 229, 0.55);
}

.jqx-chat-launcher.jqx-chat-bottom-right { right: 20px; bottom: 20px; }
.jqx-chat-launcher.jqx-chat-bottom-left  { left: 20px;  bottom: 20px; }

@media (max-width: 480px) {
    .jqx-chat-popup {
        right: 8px;
        left: 8px;
        bottom: 8px;
        width: auto !important;
        max-height: calc(100vh - 16px);
        border-radius: 14px;
    }
}

/* End of jqxChat */

/* WCAG 1.3.2 Meaningful Sequence, and 2.4.3 Focus Order.
 *
 * The left-to-right paging bar. Its parts are all float: right, which lays them out from
 * the right edge in append order and made the DOM the exact reverse of the display - both
 * labels came after the control they name, and tabbing reached the next-page button first.
 * jqxgrid.pager.js now appends them in reading order and adds this class; a flex row
 * aligned right reproduces the same appearance, and float has no effect on a flex item, so
 * the seven float declarations above become inert rather than having to be unpicked.
 *
 * RTL and pagermode 'simple' do not get this class and keep the float layout unchanged. */
.jqx-grid-pagerdiv-ltr-csp {
    display: flex;
    justify-content: flex-end;
    /* flex-start, not center. jqxgrid.js hides the "Go to page" label and its input
       together whenever their offset().top values disagree - a float-wrap detector, so
       that a label stranded on its own line is not left showing without its field. The
       label is 26px tall and the input 28px, so centring them puts their tops 1px apart
       and trips that check on every theme where the two differ in height. Floats align to
       the top of the line box; so does this, which is why the layout is unchanged. */
    align-items: flex-start;
}

/* jqxForm's table used to receive backgroundColor '#F5F5F5' and borderColor '#E5E5E5'
   inline from the widget's defaults, which beat every theme - a pale grey block on every
   dark theme. The defaults are now null and the values live here, so a light theme renders
   exactly as before and a dark theme can override the class. An author-supplied
   backgroundColor or borderColor option is still applied inline and still wins. */
.jqx-form-table {
    background-color: #F5F5F5;
    border: 1px solid #E5E5E5;
}