/* CSS variables */
:root { /* spin buttons width*/ /* radix display button width*/ /* unit display width*/ /* tank scale size*/ /* tank thumb width*/ /* tank thumb height*/ /* tank tooltip width*/ /* tank thumb height*/ /* tank border width*/ /* slider track size*/ /* slider border width*/ /* slider thumb width*/ /* slider thumb height*/ /* slider tooltip width*/ /* slider thumb height*/ /* slider tooltip width*/ /* slider thumb height*/
}
/* jqx-element */
.jqx-container {
box-sizing: border-box;
font-family: inherit;
font-size: inherit;
display: block;
width: 100%;
height: 100%;
outline: none;
margin: 0;
padding: 0;
}
.jqx-container * {
box-sizing: border-box;
}
.jqx-popup {
position: absolute;
box-sizing: border-box;
margin: 0;
z-index: 9999;
list-style-type: none;
}
/* Glyph icon font */
@font-face {
font-family: 'jqx-icons';
src: url('font/jqx.icons.eot');
src: url('font/jqx.icons.eot#iefix') format('embedded-opentype'), url('font/jqx.icons.woff') format('woff'), url('font/jqx.icons.ttf') format('truetype'), url('font/jqx.icons.svg#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
.jqx-arrow {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 1em 1em;
}
.jqx-arrow-up:after,
.jqx-arrow-down:after,
.jqx-arrow-left:after,
.jqx-arrow-right:after {
width: 100%;
height: 100%;
font-family: "jqx-icons";
font-style: normal;
font-weight: normal;
color: gray;
font-size: 7px;
display: inline-block;
text-decoration: inherit;
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
font-variant: normal;
text-transform: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.jqx-arrow-up:after {
content: '\e801';
}
.jqx-arrow-down:after {
content: '\e804';
}
.jqx-arrow-left:after {
content: '\e803';
}
.jqx-arrow-right:after {
content: '\e802';
}
.jqx-right-to-left {
direction: rtl;
}
/* all elements */
jqx-button,
jqx-toggle-button,
jqx-repeat-button,
jqx-switch-button,
jqx-slider,
jqx-led,
jqx-tank,
jqx-checkbox,
jqx-radio-button,
jqx-progress-bar,
jqx-scroll-bar,
jqx-gauge,
jqx-numeric-text-box,
jqx-list-box,
jqx-drop-down-list,
jqx-power-button,
jqx-tab,
jqx-tabs {
font-size: 14px;
font-family: Arial, sans-serif;
overflow: hidden;
box-sizing: border-box;
}
jqx-button[disabled],
jqx-toggle-button[disabled],
jqx-repeat-button[disabled],
jqx-switch-button[disabled],
jqx-slider[disabled],
jqx-led[disabled],
jqx-tank[disabled],
jqx-checkbox[disabled],
jqx-radio-button[disabled],
jqx-progress-bar[disabled],
jqx-circular-progress-bar[disabled],
jqx-gauge[disabled],
jqx-numeric-text-box[disabled],
jqx-list-item[disabled],
jqx-list-box[disabled],
jqx-drop-down-list[disabled],
jqx-scroll-bar[disabled],
jqx-power-button[disabled],
jqx-tab[disabled],
jqx-tabs[disabled] {
opacity: 0.55;
cursor: default;
}
jqx-numeric-text-box input,
jqx-list-box input {
border-radius: 0;
-webkit-appearance: none;
}
/* jqx-button, jqx-repeat-button, jqx-toggle-button, jqx-link-button */
jqx-button,
jqx-toggle-button,
jqx-repeat-button {
display: inline-block;
}
jqx-button.jqx-rounded-corners button,
jqx-toggle-button.jqx-rounded-corners button,
jqx-repeat-button.jqx-rounded-corners button {
border-radius: 4px;
}
jqx-button.jqx-floating button,
jqx-toggle-button.jqx-floating button,
jqx-repeat-button.jqx-floating button {
overflow: hidden;
padding: 0;
border-radius: 50%;
transition: .3s;
}
jqx-button.jqx-button button,
jqx-toggle-button.jqx-button button,
jqx-repeat-button.jqx-button button {
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
}
jqx-button.jqx-button-large button,
jqx-toggle-button.jqx-button-large button,
jqx-repeat-button.jqx-button-large button {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
}
jqx-button.jqx-button-small button,
jqx-toggle-button.jqx-button-small button,
jqx-repeat-button.jqx-button-small button {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
jqx-button.jqx-button-very-small button,
jqx-toggle-button.jqx-button-very-small button,
jqx-repeat-button.jqx-button-very-small button {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
}
jqx-button .jqx-button,
jqx-button button,
jqx-toggle-button button,
jqx-toggle-button .jqx-button,
jqx-repeat-button button,
jqx-repeat-button .jqx-button {
padding: 1px 2px 1px 2px;
text-align: center;
vertical-align: middle;
color: #555;
border: 1px solid #A9A9A9;
background-color: transparent;
cursor: pointer;
}
jqx-button button:focus,
jqx-toggle-button button:focus,
jqx-repeat-button button:focus {
color: #555;
border-color: #333;
background-color: transparent;
}
jqx-button button.hover,
jqx-toggle-button button.hover,
jqx-repeat-button button.hover {
color: #FFBA00;
border-color: #A9A9A9;
background-color: #E0E0E0;
transition: background-color 100ms linear;
}
jqx-button button:active,
jqx-button button.active,
jqx-toggle-button button:active,
jqx-toggle-button button.active,
jqx-toggle-button[checked] button,
jqx-repeat-button button:active,
jqx-repeat-button button.active {
color: #111;
border-color: #A9A9A9;
background-color: #BDBDBD;
transition: background-color 100ms linear;
}
jqx-button[readonly] button,
jqx-toggle-button[readonly] button,
jqx-repeat-button[readonly] button {
cursor: default;
}
jqx-button[readonly] button:active,
jqx-button[readonly] button.active,
jqx-toggle-button[readonly] button:active,
jqx-toggle-button[readonly] button.active,
jqx-repeat-button[readonly] button:active,
jqx-repeat-button[readonly] button.active {
color: #555;
border: 1px solid #A9A9A9;
background: transparent;
transition: none;
}
jqx-toggle-button[checked] button {
background-color: #999;
}
jqx-button[disabled] button,
jqx-toggle-button[disabled] button,
jqx-repeat-button[disabled] button {
color: #555;
border-color: #A9A9A9;
background-color: transparent;
cursor: default;
}
/* jqx-drop-down-list */
jqx-drop-down-list {
display: block;
width: 120px;
height: 30px;
overflow: visible;
overflow: initial;
}
jqx-drop-down-list:focus {
outline: none;
}
jqx-drop-down-list:focus .jqx-container > div:first-child,
jqx-drop-down-list[drop-down-open-mode="dropDownButton"]:focus .jqx-action-button,
jqx-drop-down-list[drop-down-open-mode="dropDownButton"]:focus .jqx-drop-down-button {
border-color: #555555;
}
jqx-drop-down-list.hovered > .jqx-container > div:first-child,
jqx-drop-down-list.hovered .jqx-action-button {
border-color: #FFBB00;
}
jqx-drop-down-list > .jqx-container {
position: relative;
cursor: pointer;
box-sizing: border-box;
}
jqx-drop-down-list[disabled] > .jqx-container,
jqx-drop-down-list[disabled] .jqx-action-button {
cursor: default;
}
jqx-drop-down-list > .jqx-container > div:first-child {
width: 100%;
height: 100%;
display: table;
table-layout: fixed;
border: 1px solid #A9A9A9;
}
jqx-drop-down-list .jqx-popup:focus,
jqx-drop-down-list[disabled] > .jqx-container > div:first-child:focus {
border-color: #A9A9A9;
outline: none;
}
jqx-drop-down-list .jqx-action-button {
display: table-cell;
border-left: 0;
border-left: initial;
height: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: middle;
border-right: none;
padding: 5px;
font-size: inherit;
font-family: inherit;
line-height: 2px;
}
jqx-drop-down-list[selection-display-mode="advanced"] .jqx-action-button > span {
padding: 2px;
margin-left: 5px;
box-shadow: 0 0 0 1px #A9A9A9;
font-size: inherit;
font-family: inherit;
cursor: pointer;
background-color: rgba(255, 255, 255, .9);
}
jqx-drop-down-list[selection-display-mode="advanced"] .jqx-action-button .jqx-drop-down-list-unselect-button {
margin-left: 2px;
font-size: inherit;
font-family: inherit;
}
jqx-drop-down-list[selection-display-mode="advanced"] .jqx-action-button > span:first-of-type {
margin-left: 0;
margin-left: initial;
}
jqx-drop-down-list[drop-down-open-mode="dropDownButton"] .jqx-action-button.hovered,
jqx-drop-down-list[drop-down-open-mode="dropDownButton"] .jqx-drop-down-button.hovered {
background-color: #E0E0E0;
transition: background-color 100ms linear;
}
jqx-drop-down-list[selection-display-mode="advanced"] .jqx-action-button .jqx-drop-down-list-unselect-button:active,
jqx-drop-down-list > .jqx-container > div:first-child:active,
jqx-drop-down-list > .jqx-container > div:first-child.active,
jqx-drop-down-list[drop-down-open-mode="dropDownButton"] .jqx-action-button.active,
jqx-drop-down-list[drop-down-open-mode="dropDownButton"] .jqx-drop-down-button.active,
jqx-drop-down-list[drop-down-open-mode="dropDownButton"] .jqx-drop-down-button:active {
color: #111;
background-color: #BDBDBD;
transition: background-color 100ms linear;
}
jqx-drop-down-list[disabled] > .jqx-container > div:first-child,
jqx-drop-down-list[disabled] > .jqx-container > div:first-child:active,
jqx-drop-down-list[drop-down-open-mode="dropDownButton"] > .jqx-container > div:first-child:active,
jqx-drop-down-list[drop-down-open-mode="dropDownButton"][disabled] .jqx-drop-down-button:active {
color: #000;
color: initial;
background-color: transparent;
background-color: initial;
transition: none 0s ease 0s;
transition: initial;
}
jqx-drop-down-list[drop-down-open-mode="dropDownButton"] .jqx-drop-down-button.hovered[selected] {
background-color: #FFBB00;
}
jqx-drop-down-list .jqx-drop-down-button[selected],
jqx-drop-down-list > .jqx-container > div[selected]:first-child {
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, .125);
background-color: #FFBB00;
}
jqx-drop-down-list.hovered[disabled] > .jqx-container,
jqx-drop-down-list.hovered[disabled] .jqx-action-button,
jqx-drop-down-list.hovered[disabled] > .jqx-container > div:first-child,
jqx-drop-down-list.hovered > .jqx-container > div[selected]:first-child {
border-color: #A9A9A9;
}
jqx-drop-down-list[drop-down-open-mode="dropDownButton"] > .jqx-container:first-child[selected] {
box-shadow: none;
box-shadow: initial;
}
jqx-drop-down-list .jqx-drop-down-button {
display: table-cell;
font-family: 'jqx-icons';
font-size: 10px;
width: 30px;
height: 100%;
vertical-align: middle;
text-align: center;
}
jqx-drop-down-list[drop-down-open-mode="dropDownButton"] .jqx-drop-down-button {
outline: 1px solid transparent;
}
jqx-drop-down-list[drop-down-open-mode="dropDownButton"] .jqx-action-button {
border-right: 1px solid #A9A9A9;
}
jqx-drop-down-list[drop-down-open-mode="dropDownButton"].hovered .jqx-action-button {
border-right-color: #A9A9A9;
}
jqx-drop-down-list .jqx-popup,
jqx-drop-down-list[drop-down-width="auto"] .jqx-popup {
width: 100%;
}
jqx-drop-down-list .jqx-popup {
background-color: white;
cursor: default;
left: 0;
box-sizing: border-box;
font-size: inherit;
padding: 3px;
}
jqx-drop-down-list .jqx-popup input {
border-top: 1px solid #A9A9A9;
border-left: 1px solid #A9A9A9;
margin-bottom: 2px;
}
jqx-drop-down-list.auto-height {
width: 300px;
height: auto;
}
jqx-drop-down-list .jqx-popup jqx-scroll-bar[orientation="vertical"] {
padding-left: 3px;
padding-top: 0;
padding-top: initial;
}
jqx-drop-down-list .jqx-popup jqx-scroll-bar {
padding-top: 3px;
}
jqx-drop-down-list.auto-height .jqx-action-button {
white-space: normal;
white-space: initial;
text-overflow: initial;
line-height: 100%;
padding-bottom: 2px;
padding-top: 2px;
}
jqx-drop-down-list.auto-height[selection-display-mode="advanced"] .jqx-action-button > span,
jqx-drop-down-list.auto-height[selection-display-mode="advanced"] .jqx-action-button > span:first-of-type {
display: inline-block;
margin: 0.2em;
}
jqx-drop-down-list[drop-down-open-mode="dropDownButton"] .jqx-action-button:focus,
jqx-drop-down-list[drop-down-open-mode="dropDownButton"] .jqx-drop-down-button:focus {
outline: 1px solid black;
}
jqx-drop-down-list[drop-down-open-mode="dropDownButton"] .jqx-action-button:focus {
border-right: 0;
border-right: initial;
}
jqx-drop-down-list .jqx-popup,
jqx-drop-down-list .jqx-popup.jqx-visibility-hidden,
jqx-drop-down-list[drop-down-vertical-position="bottom"] .jqx-popup,
jqx-drop-down-list[drop-down-vertical-position="bottom"] .jqx-popup.jqx-visibility-hidden {
top: calc(100% - 1px);
}
jqx-drop-down-list.animation .jqx-popup.jqx-visibility-hidden,
jqx-drop-down-list[drop-down-vertical-position="bottom"].animation .jqx-popup.jqx-visibility-hidden,
jqx-drop-down-list[drop-down-vertical-position="top"].animation .jqx-popup.jqx-visibility-hidden,
jqx-drop-down-list[drop-down-vertical-position="overlay"].animation .jqx-popup.jqx-visibility-hidden {
transition: visibility 0.2s ease-in, -webkit-animation;
transition: animation, visibility 0.2s ease-in;
transition: animation, visibility 0.2s ease-in, -webkit-animation;
}
jqx-drop-down-list[drop-down-vertical-position="overlay"] .jqx-popup,
jqx-drop-down-list[drop-down-vertical-position="overlay"] .jqx-popup.jqx-visibility-hidden {
top: 0;
}
jqx-drop-down-list[drop-down-vertical-position="overlay"].animation .jqx-popup {
-webkit-animation: jqx-drop-down-list-animation-overlay-opening 0.2s ease-out;
animation: jqx-drop-down-list-animation-overlay-opening 0.2s ease-out;
}
jqx-drop-down-list.animation .jqx-popup.jqx-visibility-hidden,
jqx-drop-down-list[drop-down-vertical-position="overlay"].animation .jqx-popup.jqx-visibility-hidden {
-webkit-animation: jqx-drop-down-list-animation-overlay-closing 0.2s ease-in;
animation: jqx-drop-down-list-animation-overlay-closing 0.2s ease-in;
}
jqx-drop-down-list.animation .jqx-popup,
jqx-drop-down-list[drop-down-vertical-position="bottom"].animation .jqx-popup {
-webkit-animation: jqx-drop-down-list-animation-bottom-opening 0.2s ease-out;
animation: jqx-drop-down-list-animation-bottom-opening 0.2s ease-out;
}
jqx-drop-down-list.animation .jqx-popup.jqx-visibility-hidden,
jqx-drop-down-list[drop-down-vertical-position="bottom"].animation .jqx-popup.jqx-visibility-hidden {
-webkit-animation: jqx-drop-down-list-animation-bottom-closing 0.2s ease-in;
animation: jqx-drop-down-list-animation-bottom-closing 0.2s ease-in;
}
jqx-drop-down-list[drop-down-vertical-position="top"].animation .jqx-popup {
-webkit-animation: jqx-drop-down-list-animation-top-opening 0.2s ease-out;
animation: jqx-drop-down-list-animation-top-opening 0.2s ease-out;
}
jqx-drop-down-list[drop-down-vertical-position="top"].animation .jqx-popup.jqx-visibility-hidden {
-webkit-animation: jqx-drop-down-list-animation-top-closing 0.2s ease-in;
animation: jqx-drop-down-list-animation-top-closing 0.2s ease-in;
}
@-webkit-keyframes jqx-drop-down-list-animation-overlay-opening {
0% {
opacity: 0.2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: center;
transform-origin: center;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: center;
transform-origin: center;
}
}
@keyframes jqx-drop-down-list-animation-overlay-opening {
0% {
opacity: 0.2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: center;
transform-origin: center;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: center;
transform-origin: center;
}
}
@-webkit-keyframes jqx-drop-down-list-animation-overlay-closing {
0% {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: center;
transform-origin: center;
}
50% {
opacity: 0.4;
}
100% {
opacity: 0.2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: center;
transform-origin: center;
}
}
@keyframes jqx-drop-down-list-animation-overlay-closing {
0% {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: center;
transform-origin: center;
}
50% {
opacity: 0.4;
}
100% {
opacity: 0.2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: center;
transform-origin: center;
}
}
@-webkit-keyframes jqx-drop-down-list-animation-bottom-opening {
0% {
opacity: 0.2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@keyframes jqx-drop-down-list-animation-bottom-opening {
0% {
opacity: 0.2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@-webkit-keyframes jqx-drop-down-list-animation-bottom-closing {
0% {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: top;
transform-origin: top;
}
50% {
opacity: 0.4;
}
100% {
opacity: 0.2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@keyframes jqx-drop-down-list-animation-bottom-closing {
0% {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: top;
transform-origin: top;
}
50% {
opacity: 0.4;
}
100% {
opacity: 0.2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@-webkit-keyframes jqx-drop-down-list-animation-top-opening {
0% {
opacity: 0.2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
}
@keyframes jqx-drop-down-list-animation-top-opening {
0% {
opacity: 0.2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
}
@-webkit-keyframes jqx-drop-down-list-animation-top-closing {
0% {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
50% {
opacity: 0.4;
}
100% {
opacity: 0.2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
}
@keyframes jqx-drop-down-list-animation-top-closing {
0% {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
50% {
opacity: 0.4;
}
100% {
opacity: 0.2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
}
/* jqx-list-item */
jqx-list-item,
jqx-list-items-group {
display: block;
padding: 0;
background-color: inherit;
}
jqx-list-item[selected] {
background-color: rgba(255, 187, 0, .3);
}
jqx-list-item[selected].hovered {
color: inherit;
}
jqx-list-item[display-mode="radioButton"][selected],
jqx-list-item[display-mode="checkBox"][selected] {
background-color: inherit;
}
jqx-list-item:focus,
jqx-list-item:focus .jqx-input,
jqx-list-items-group:focus .jqx-input {
outline: none;
}
jqx-list-item .jqx-input.jqx-hidden,
jqx-list-items-group .jqx-input.jqx-hidden {
display: none;
}
jqx-list-item .jqx-input,
jqx-list-items-group .jqx-input {
width: 14px;
min-width: 14px;
height: 14px;
min-height: 14px;
background-color: inherit;
box-sizing: content-box;
box-sizing: initial;
position: relative;
border-style: solid;
border-width: 1px;
background-repeat: no-repeat;
border-color: #A9A9A9;
}
jqx-list-item[display-mode="radioButton"] .jqx-input {
border-radius: 10px;
}
jqx-list-item .jqx-input:after,
jqx-list-items-group .jqx-input:after {
content: '';
width: 100%;
height: 100%;
font-family: "jqx-icons";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
font-variant: normal;
text-transform: none;
display: inline-block;
position: absolute;
left: 0;
text-align: center;
/*line-height: 1rem;*/
line-height: 16px;
}
jqx-list-item[display-mode="checkBox"][selected] .jqx-input:after,
jqx-list-items-group[display-mode="checkBox"][selected] .jqx-input:after {
content: '\e807';
}
jqx-list-item[display-mode="radioButton"][selected] .jqx-input:after {
content: '\e808';
}
jqx-list-item .jqx-container,
jqx-list-items-group .jqx-container {
cursor: default;
white-space: nowrap;
}
jqx-list-item[disabled] .jqx-container,
jqx-list-items-group[disabled] .jqx-container {
cursor: default;
}
jqx-list-item .jqx-input,
jqx-list-items-group .jqx-input,
jqx-list-item .jqx-list-item-container {
display: inline-block;
vertical-align: middle;
}
jqx-list-item .jqx-input {
font-size: 12px;
}
jqx-list-items-group .jqx-list-items-group-label {
font-size: inherit;
}
jqx-list-item .jqx-list-item-container {
background-color: transparent;
overflow: hidden;
white-space: nowrap;
}
jqx-list-items-group .jqx-list-items-group-label {
overflow: hidden;
white-space: nowrap;
}
jqx-list-item.hovered {
color: #FFBA00;
}
/* jqx-list-box */
jqx-list-box {
/*min-width: 100px;*/
display: block;
width: 250px;
height: 300px;
border: 1px solid #A9A9A9;
-ms-touch-action: none;
touch-action: none;
}
jqx-list-box:focus {
outline: none;
border-color: #555555;
}
jqx-list-box[disabled]:focus {
border-color: #A9A9A9;
outline: none;
}
jqx-list-box input {
width: 100%;
height: 25px;
border-top: none;
border-left: none;
border-bottom: 1px solid #A9A9A9;
border-right: none;
padding: 1px;
}
jqx-list-box input.vscroll {
width: calc(100% - 20px);
border-right: 1px solid #A9A9A9;
}
jqx-list-box input {
background: url(images/magnifier.png) no-repeat 98% 50%;
background-size: 5%;
padding-right: 8%;
}
jqx-list-box:focus {
outline: none;
}
jqx-list-box > .jqx-container {
height: 100%;
width: 100%;
border-style: solid;
border-width: 0;
border-color: gray;
position: relative;
overflow: hidden;
}
jqx-list-box jqx-scroll-bar {
overflow: visible;
position: absolute;
bottom: 0;
height: 20px;
width: 100%;
}
jqx-list-box jqx-scroll-bar.bottom-right-visible {
width: calc(100% - 20px);
}
jqx-list-box jqx-scroll-bar::before {
position: absolute;
content: '';
width: 100%;
height: 20px;
background-color: #EFEFEF;
left: 100%;
}
jqx-list-box jqx-scroll-bar[orientation="vertical"] {
right: 0;
top: 0;
height: 100%;
width: 20px;
}
jqx-list-box jqx-scroll-bar[orientation="vertical"].bottom-right-visible {
height: calc(100% - 20px);
}
jqx-list-box .jqx-list-items-container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
background-color: transparent;
}
jqx-list-box .jqx-list-items-inner-container {
width: 100%;
height: 100%;
display: block;
background-color: transparent;
}
jqx-list-box .jqx-list-items-container.hscroll {
height: calc(100% - 20px);
}
jqx-list-box .jqx-list-items-container.vscroll {
width: calc(100% - 20px);
}
jqx-list-box .jqx-list-items-container.filter {
height: calc(100% - 25px);
}
jqx-list-box .jqx-list-items-container.hscroll.filter {
height: calc(100% - 25px - 20px);
}
jqx-list-box jqx-list-item,
jqx-list-box jqx-list-items-group .jqx-list-items-group-label {
width: 100%;
outline: 0 none;
display: table;
-ms-user-select: none;
user-select: none;
padding: 5px;
position: relative;
-moz-user-select: none;
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
border: 1px solid transparent;
}
jqx-list-box jqx-list-items-group {
width: 100%;
display: table;
}
jqx-list-box jqx-list-item.jqx-header-item,
jqx-list-box jqx-list-items-group .jqx-list-items-group-label {
font-weight: 700;
text-align: left;
vertical-align: middle;
-ms-touch-action: none;
touch-action: none;
}
jqx-list-box jqx-list-item.jqx-header-item.hovered {
color: inherit;
}
jqx-list-box:focus jqx-list-item[focused] {
color: #0078D7;
}
jqx-list-box:focus:not([selection-mode="checkBox"]):not([selection-mode="radioButton"]) jqx-list-item[selected]:not([focused]) {
background-color: rgba(255, 187, 0, .3);
}
jqx-list-box:focus:not([selection-mode="checkBox"]):not([selection-mode="radioButton"]) jqx-list-item[selected][focused] {
color: #0078D7;
}
jqx-list-box:not(:focus):not([selection-mode="checkBox"]):not([selection-mode="radioButton"]) jqx-list-item[selected]:not([focused]) {
background-color: rgba(255, 187, 0, .3);
}
jqx-list-box:not(:focus):not([selection-mode="checkBox"]):not([selection-mode="radioButton"]) jqx-list-item[selected][focused] {
background-color: rgba(255, 187, 0, .3);
}
jqx-list-box:not(:focus) jqx-list-item:not([selected])[focused] {
background-color: rgba(255, 187, 0, .0);
}
.jqx-list-item-feedback {
background-color: rgba(255, 187, 0, .3);
border: 1px solid #FFBB00;
box-shadow: 3px 3px 1px rgba(0, 0, 0, .3);
cursor: move;
}
.jqx-list-item-line-feedback {
border-top-color: #FFBB00;
border-top-width: 1px;
border-top-style: dashed;
}
.jqx-list-item-bottom-line-feedback {
border-bottom-color: #FFBB00;
border-bottom-width: 1px;
border-bottom-style: dashed;
}
jqx-list-box[disabled] jqx-list-item {
color: inherit;
}
jqx-list-box jqx-list-item .jqx-container {
display: inline;
display: initial;
}
jqx-list-box .jqx-placeholder {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
}
jqx-list-box .jqx-loader.jqx-hidden {
display: none;
}
jqx-list-box .jqx-loader {
margin: inherit;
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
opacity: 0.85;
text-align: left;
border: 6px solid rgba(43, 51, 63, .1);
box-sizing: border-box;
background-clip: padding-box;
border-radius: 50%;
}
jqx-list-box .jqx-loader,
jqx-list-box[loading-indicator-position="center"] .jqx-loader {
width: 40px;
height: 40px;
}
jqx-list-box[loading-indicator-position="top"] .jqx-loader,
jqx-list-box[loading-indicator-position="bottom"] .jqx-loader {
width: 30px;
height: 30px;
}
jqx-list-box[loading-indicator-position="bottom"] .jqx-loader-container.jqx-hidden,
jqx-list-box[loading-indicator-position="top"] .jqx-loader-container.jqx-hidden {
display: none;
}
jqx-list-box[loading-indicator-position="top"] .jqx-loader-container,
jqx-list-box[loading-indicator-position="bottom"] .jqx-loader-container {
display: block;
position: relative;
width: 100%;
height: 10%;
background-color: #F2F2F2;
overflow: hidden;
-webkit-animation: jqx-loader-container-pop-up-down 0.3s linear;
animation: jqx-loader-container-pop-up-down 0.3s linear;
}
jqx-list-box[loading-indicator-position="bottom"] .jqx-loader-container {
top: -10%;
}
jqx-list-box[loading-indicator-position="top"] .jqx-loader-container {
top: 0;
position: absolute;
-webkit-animation: jqx-loader-container-pop-up-top 0.3s linear;
animation: jqx-loader-container-pop-up-top 0.3s linear;
}
jqx-list-box[loading-indicator-position="top"] .jqx-loader,
jqx-list-box[loading-indicator-position="bottom"] .jqx-loader {
left: 20%;
}
jqx-list-box[loading-indicator-position="top"] .jqx-loader-label,
jqx-list-box[loading-indicator-position="bottom"] .jqx-loader-label {
position: absolute;
display: block;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
left: 60%;
font-family: inherit;
font-size: inherit;
vertical-align: middle;
white-space: nowrap;
}
jqx-list-box .jqx-loader::after,
jqx-list-box .jqx-loader::before {
content: "";
position: absolute;
margin: -6px;
box-sizing: inherit;
width: inherit;
height: inherit;
border-radius: inherit;
opacity: 1;
border: inherit;
border-color: transparent;
border-top-color: transparent;
border-width: 6px;
-webkit-animation-delay: 0.44s;
animation-delay: 0.44s;
}
jqx-list-box[disabled] .jqx-loader::before,
jqx-list-box[disabled] .jqx-loader::after {
-webkit-animation: none;
animation: none;
}
jqx-list-box .jqx-loader::before,
jqx-list-box .jqx-loader::after {
-webkit-animation: jqx-loader-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, jqx-loader-spin-fade 1.1s linear infinite;
animation: jqx-loader-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, jqx-loader-spin-fade 1.1s linear infinite;
}
@-webkit-keyframes jqx-loader-container-pop-up-down {
0% {
top: 0;
}
20% {
top: -2%;
}
35% {
top: -6%;
}
60% {
top: -8%;
}
100% {
top: -10%;
}
}
@keyframes jqx-loader-container-pop-up-down {
0% {
top: 0;
}
20% {
top: -2%;
}
35% {
top: -6%;
}
60% {
top: -8%;
}
100% {
top: -10%;
}
}
@-webkit-keyframes jqx-loader-container-pop-up-top {
0% {
top: -10%;
}
20% {
top: -8%;
}
35% {
top: -6%;
}
60% {
top: -2%;
}
100% {
top: 0;
}
}
@keyframes jqx-loader-container-pop-up-top {
0% {
top: -10%;
}
20% {
top: -8%;
}
35% {
top: -6%;
}
60% {
top: -2%;
}
100% {
top: 0;
}
}
@-webkit-keyframes jqx-loader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes jqx-loader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes jqx-loader-spin-fade {
0% {
border-top-color: #7A7A7A;
}
20% {
border-top-color: #7A7A7A;
}
35% {
border-top-color: transparent;
}
60% {
border-top-color: #7A7A7A;
}
100% {
border-top-color: #7A7A7A;
}
}
@keyframes jqx-loader-spin-fade {
0% {
border-top-color: #7A7A7A;
}
20% {
border-top-color: #7A7A7A;
}
35% {
border-top-color: transparent;
}
60% {
border-top-color: #7A7A7A;
}
100% {
border-top-color: #7A7A7A;
}
}
/* jqx-numeric-text-box */
jqx-numeric-text-box {
display: inline-block;
overflow: visible;
border: none;
width: 150px;
height: 30px;
color: #A9A9A9;
}
jqx-numeric-text-box * {
box-sizing: border-box;
}
jqx-numeric-text-box jqx-repeat-button {
display: block;
}
jqx-numeric-text-box .jqx-container, jqx-numeric-text-box input, jqx-numeric-text-box .jqx-spin-button, jqx-numeric-text-box .jqx-popup {
width: 100%;
}
jqx-numeric-text-box .jqx-container, .jqx-numeric-text-box-component, .jqx-numeric-text-box-unit-display {
height: 100%;
}
jqx-numeric-text-box .jqx-container, .jqx-arrow {
position: relative;
}
.jqx-numeric-text-box-radix-display, .jqx-numeric-text-box-unit-display {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: default;
}
jqx-numeric-text-box .jqx-spin-button, .jqx-numeric-text-box-radix-display, jqx-numeric-text-box .jqx-popup {
background-color: #EFEFEF;
}
jqx-numeric-text-box .jqx-spin-button.hovered,
jqx-numeric-text-box[popup-enabled] .jqx-numeric-text-box-radix-display.hovered,
jqx-numeric-text-box .jqx-list-item.hovered {
background-color: #E8E8E8;
}
jqx-numeric-text-box[popup-enabled] .jqx-numeric-text-box-radix-display, jqx-numeric-text-box .jqx-list-item {
cursor: pointer;
}
jqx-numeric-text-box[disabled] jqx-repeat-button button,
jqx-numeric-text-box[disabled] .jqx-numeric-text-box-radix-display {
cursor: default;
}
jqx-numeric-text-box[disabled],
jqx-numeric-text-box[value="NaN"] .jqx-spin-buttons-container,
jqx-numeric-text-box[value="Infinity"] .jqx-spin-buttons-container,
jqx-numeric-text-box[value="-Infinity"] .jqx-spin-buttons-container {
opacity: 0.55;
cursor: default;
}
.jqx-numeric-text-box-component, .jqx-numeric-text-box-unit-display {
float: left;
}
jqx-numeric-text-box .jqx-numeric-text-box-component {
border: 1px solid #A9A9A9;
border-left-width: 1px;
border-right-width: 0;
}
jqx-numeric-text-box input:focus,
jqx-numeric-text-box .jqx-numeric-text-box-focused-component {
border-color: #555555;
}
.jqx-numeric-text-box-pressed-component,
jqx-numeric-text-box .jqx-spin-button.jqx-numeric-text-box-pressed-component,
jqx-numeric-text-box .jqx-numeric-text-box-radix-display.jqx-numeric-text-box-pressed-component {
background-color: #D1D1D1;
}
jqx-numeric-text-box input.jqx-numeric-text-box-component {
border-right-width: 1px;
padding: 1px 2px 1px 2px;
background-color: white;
color: inherit;
font: inherit;
text-align: right;
outline: none;
}
/* spin buttons only */
jqx-numeric-text-box[spin-buttons] input {
width: calc(100% - 18px);
}
/* radix display button only */
jqx-numeric-text-box[radix-display] input {
width: 88%;
}
/* unit display only */
jqx-numeric-text-box[show-unit] input {
width: calc(100% - 28px);
}
/* spin buttons and radix display button */
jqx-numeric-text-box[spin-buttons][radix-display] input {
width: calc(100% - 18px - 12%);
}
/* spin buttons and unit display */
jqx-numeric-text-box[spin-buttons][show-unit] input {
width: calc(100% - 18px - 28px);
}
/* radix display button and unit display */
jqx-numeric-text-box[radix-display][show-unit] input {
width: calc(100% - 12% - 28px);
}
/* buttons and unit display */
jqx-numeric-text-box[spin-buttons][radix-display][show-unit] input {
width: calc(100% - 28px - 18px - 12%);
}
jqx-numeric-text-box .jqx-spin-buttons-container {
width: 18px;
}
jqx-numeric-text-box .jqx-spin-button {
height: 50%;
}
jqx-numeric-text-box .jqx-spin-button .jqx-button {
border: none;
}
.jqx-numeric-text-box-radix-display {
width: 12%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #000;
color: initial;
}
jqx-numeric-text-box .jqx-popup {
position: absolute;
box-sizing: border-box;
height: auto;
margin: 0;
border: 1px solid #A9A9A9;
border-top: none;
padding: 2px;
top: 100%;
z-index: 9999;
list-style-type: none;
}
jqx-numeric-text-box .jqx-numeric-text-box-unit-display {
width: 28px;
border-width: 1px 0 1px 0;
overflow: hidden;
background-color: white;
}
jqx-numeric-text-box .jqx-list-item {
margin: 1px;
border: 1px solid transparent;
padding: 4px 8px 4px 8px;
word-break: break-all;
}
jqx-numeric-text-box .jqx-list-item:hover {
color: #000;
color: initial;
}
jqx-numeric-text-box[spin-buttons] input,
jqx-numeric-text-box[show-unit] input,
jqx-numeric-text-box[spin-buttons][spin-buttons-position="left"][show-unit] input,
jqx-numeric-text-box[spin-buttons][spin-buttons-position="left"] .jqx-spin-buttons-container,
jqx-numeric-text-box[spin-buttons][show-unit] .jqx-numeric-text-box-unit-display {
border-right-width: 0;
}
jqx-numeric-text-box[spin-buttons][spin-buttons-position="left"] input,
jqx-numeric-text-box[spin-buttons] .jqx-spin-buttons-container,
jqx-numeric-text-box[spin-buttons][spin-buttons-position="left"][show-unit] .jqx-numeric-text-box-unit-display,
jqx-numeric-text-box[show-unit] .jqx-numeric-text-box-unit-display {
border-right-width: 1px;
}
/* jqx-progress-bar */
jqx-progress-bar,
jqx-circular-progress-bar {
background: transparent;
outline: none;
display: block;
overflow: hidden;
}
jqx-progress-bar {
width: 200px;
height: 30px;
}
jqx-progress-bar[orientation="vertical"] {
width: 30px;
height: 200px;
}
jqx-circular-progress-bar {
width: 150px;
height: 150px;
}
jqx-circular-progress-bar > .jqx-container {
border-radius: 50%;
}
jqx-progress-bar > .jqx-container {
overflow: hidden;
}
jqx-progress-bar > .jqx-container,
jqx-circular-progress-bar > .jqx-container {
position: relative;
border: 1px solid #A9A9A9;
}
jqx-progress-bar {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
jqx-progress-bar .jqx-value {
outline: none;
border: 1px solid #D1D1D1;
height: 100%;
width: 100%;
background-color: #D1D1D1;
box-sizing: border-box;
position: absolute;
}
jqx-progress-bar.animation .jqx-value {
transition: 1s ease-in-out;
}
jqx-progress-bar[orientation][inverted] .jqx-value,
jqx-progress-bar[inverted] .jqx-value {
-webkit-transform-origin: right;
transform-origin: right;
}
jqx-progress-bar[orientation] .jqx-value,
jqx-progress-bar .jqx-value {
-webkit-transform-origin: left;
transform-origin: left;
}
jqx-progress-bar[orientation="vertical"][inverted] .jqx-value {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
jqx-progress-bar[orientation="vertical"] .jqx-value {
-webkit-transform-origin: left top;
transform-origin: left top;
}
jqx-circular-progress-bar .jqx-value-animation-ms {
stroke-dashoffset: 114;
}
jqx-progress-bar .jqx-label,
jqx-circular-progress-bar .jqx-label {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
text-align: center;
}
jqx-progress-bar .jqx-label {
width: auto;
}
jqx-progress-bar[orientation="vertical"] .jqx-label {
width: 100%;
}
/*---------- Barber Shop ----------*/
.barber-shop-effect .jqx-value {
background-image: linear-gradient(45deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, transparent 75%, transparent);
background-size: 5rem 5rem;
background-position: 0 -3904px;
background-position: 0 -244rem;
-webkit-animation: stripes 10s linear infinite;
animation: stripes 10s linear infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
}
.barber-shop-effect[inverted] .jqx-value,
.barber-shop-effect[orientation="vertical"] .jqx-value {
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
/*---------------------------
ANIMATION - BarberShop style
---------------------------*/
@-webkit-keyframes stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 60rem 0;
}
/*Including the alternative for best browser support*/
From {
background-position: 0 0;
}
To {
background-position: 60rem 0;
}
}
@keyframes stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 60rem 0;
}
/*Including the alternative for best browser support*/
From {
background-position: 0 0;
}
To {
background-position: 60rem 0;
}
}
jqx-progress-bar .jqx-value.jqx-value-animation {
-webkit-animation: indeterminate 3s infinite linear;
animation: indeterminate 3s infinite linear;
}
jqx-progress-bar[orientation="vertical"] .jqx-value.jqx-value-animation {
-webkit-animation: indeterminate-vertical 3s infinite linear;
animation: indeterminate-vertical 3s infinite linear;
}
jqx-progress-bar[inverted][orientation="vertical"] .jqx-value.jqx-value-animation {
-webkit-animation: indeterminate-vertical-inverted 3s infinite linear;
animation: indeterminate-vertical-inverted 3s infinite linear;
}
jqx-progress-bar[inverted] .jqx-value.jqx-value-animation {
-webkit-animation: indeterminate-inverted 3s infinite linear;
animation: indeterminate-inverted 3s infinite linear;
}
jqx-circular-progress-bar svg:first-of-type {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
jqx-circular-progress-bar .jqx-value,
jqx-circular-progress-bar .jqx-value-path {
stroke-width: 20%;
fill: transparent;
stroke-dasharray: 314.159;
}
jqx-circular-progress-bar .jqx-value {
stroke: #D1D1D1;
}
jqx-circular-progress-bar .jqx-value-path {
stroke-dashoffset: 0;
stroke: transparent;
}
jqx-circular-progress-bar.animation .jqx-value {
transition: stroke-dashoffset 1s linear;
}
jqx-circular-progress-bar .jqx-label-container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: hidden;
box-sizing: content-box;
border-radius: 50%;
background-color: transparent;
border-style: solid;
border-width: 1px;
border-color: #A9A9A9;
width: 80%;
height: 80%;
}
jqx-circular-progress-bar svg:first-of-type .jqx-value.jqx-value-animation {
-webkit-animation: circle 2s infinite linear;
animation: circle 2s infinite linear;
}
jqx-circular-progress-bar[inverted] svg:first-of-type .jqx-value.jqx-value-animation {
-webkit-animation: circle-inverted 2s infinite linear;
animation: circle-inverted 2s infinite linear;
}
jqx-circular-progress-bar[indeterminate][inverted] svg:first-of-type,
jqx-circular-progress-bar[value="null"][inverted] svg:first-of-type {
-webkit-animation: rotate-circle-inverted 1s infinite linear;
animation: rotate-circle-inverted 1s infinite linear;
}
jqx-circular-progress-bar[indeterminate] svg:first-of-type,
jqx-circular-progress-bar[value="null"] svg:first-of-type {
-webkit-animation: rotate-circle 1s infinite linear;
animation: rotate-circle 1s infinite linear;
}
@-webkit-keyframes indeterminate {
0% {
left: -100%;
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: left;
transform-origin: left;
}
20% {
left: -40%;
-webkit-transform: scaleX(0.3);
transform: scaleX(0.3);
-webkit-transform-origin: left;
transform-origin: left;
}
35% {
left: 35%;
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: left;
transform-origin: left;
}
50% {
left: 75%;
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
-webkit-transform-origin: left;
transform-origin: left;
}
55% {
left: 100%;
-webkit-transform: scaleX(0.7);
transform: scaleX(0.7);
-webkit-transform-origin: left;
transform-origin: left;
}
55.99% {
left: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
}
56% {
left: -100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
}
56.99% {
left: -100%;
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
-webkit-transform-origin: left;
transform-origin: left;
}
75% {
left: -5%;
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
-webkit-transform-origin: left;
transform-origin: left;
}
80% {
left: 30%;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
-webkit-transform-origin: left;
transform-origin: left;
}
85% {
left: 50%;
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: left;
transform-origin: left;
}
90% {
left: 75%;
-webkit-transform: scaleX(0.3);
transform: scaleX(0.3);
-webkit-transform-origin: left;
transform-origin: left;
}
95% {
left: 95%;
-webkit-transform: scaleX(0.2);
transform: scaleX(0.2);
-webkit-transform-origin: left;
transform-origin: left;
}
98% {
left: 100%;
-webkit-transform: scaleX(0.2);
transform: scaleX(0.2);
-webkit-transform-origin: left;
transform-origin: left;
}
99.99% {
left: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
}
100% {
left: -100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
}
}
@keyframes indeterminate {
0% {
left: -100%;
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: left;
transform-origin: left;
}
20% {
left: -40%;
-webkit-transform: scaleX(0.3);
transform: scaleX(0.3);
-webkit-transform-origin: left;
transform-origin: left;
}
35% {
left: 35%;
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: left;
transform-origin: left;
}
50% {
left: 75%;
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
-webkit-transform-origin: left;
transform-origin: left;
}
55% {
left: 100%;
-webkit-transform: scaleX(0.7);
transform: scaleX(0.7);
-webkit-transform-origin: left;
transform-origin: left;
}
55.99% {
left: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
}
56% {
left: -100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
}
56.99% {
left: -100%;
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
-webkit-transform-origin: left;
transform-origin: left;
}
75% {
left: -5%;
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
-webkit-transform-origin: left;
transform-origin: left;
}
80% {
left: 30%;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
-webkit-transform-origin: left;
transform-origin: left;
}
85% {
left: 50%;
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: left;
transform-origin: left;
}
90% {
left: 75%;
-webkit-transform: scaleX(0.3);
transform: scaleX(0.3);
-webkit-transform-origin: left;
transform-origin: left;
}
95% {
left: 95%;
-webkit-transform: scaleX(0.2);
transform: scaleX(0.2);
-webkit-transform-origin: left;
transform-origin: left;
}
98% {
left: 100%;
-webkit-transform: scaleX(0.2);
transform: scaleX(0.2);
-webkit-transform-origin: left;
transform-origin: left;
}
99.99% {
left: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
}
100% {
left: -100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
}
}
@-webkit-keyframes indeterminate-inverted {
0% {
right: -100%;
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: right;
transform-origin: right;
}
20% {
right: -40%;
-webkit-transform: scaleX(0.3);
transform: scaleX(0.3);
-webkit-transform-origin: right;
transform-origin: right;
}
35% {
right: 35%;
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: right;
transform-origin: right;
}
50% {
right: 75%;
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
-webkit-transform-origin: right;
transform-origin: right;
}
55% {
right: 100%;
-webkit-transform: scaleX(0.7);
transform: scaleX(0.7);
-webkit-transform-origin: right;
transform-origin: right;
}
55.99% {
right: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right;
transform-origin: right;
}
56% {
right: -100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right;
transform-origin: right;
}
56.99% {
right: -100%;
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
-webkit-transform-origin: right;
transform-origin: right;
}
75% {
right: -5%;
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
-webkit-transform-origin: right;
transform-origin: right;
}
80% {
right: 30%;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
-webkit-transform-origin: right;
transform-origin: right;
}
85% {
right: 50%;
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: right;
transform-origin: right;
}
90% {
right: 75%;
-webkit-transform: scaleX(0.3);
transform: scaleX(0.3);
-webkit-transform-origin: right;
transform-origin: right;
}
95% {
right: 95%;
-webkit-transform: scaleX(0.2);
transform: scaleX(0.2);
-webkit-transform-origin: right;
transform-origin: right;
}
98% {
right: 100%;
-webkit-transform: scaleX(0.2);
transform: scaleX(0.2);
-webkit-transform-origin: right;
transform-origin: right;
}
99.99% {
right: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right;
transform-origin: right;
}
100% {
right: -100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right;
transform-origin: right;
}
}
@keyframes indeterminate-inverted {
0% {
right: -100%;
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: right;
transform-origin: right;
}
20% {
right: -40%;
-webkit-transform: scaleX(0.3);
transform: scaleX(0.3);
-webkit-transform-origin: right;
transform-origin: right;
}
35% {
right: 35%;
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: right;
transform-origin: right;
}
50% {
right: 75%;
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
-webkit-transform-origin: right;
transform-origin: right;
}
55% {
right: 100%;
-webkit-transform: scaleX(0.7);
transform: scaleX(0.7);
-webkit-transform-origin: right;
transform-origin: right;
}
55.99% {
right: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right;
transform-origin: right;
}
56% {
right: -100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right;
transform-origin: right;
}
56.99% {
right: -100%;
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
-webkit-transform-origin: right;
transform-origin: right;
}
75% {
right: -5%;
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
-webkit-transform-origin: right;
transform-origin: right;
}
80% {
right: 30%;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
-webkit-transform-origin: right;
transform-origin: right;
}
85% {
right: 50%;
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: right;
transform-origin: right;
}
90% {
right: 75%;
-webkit-transform: scaleX(0.3);
transform: scaleX(0.3);
-webkit-transform-origin: right;
transform-origin: right;
}
95% {
right: 95%;
-webkit-transform: scaleX(0.2);
transform: scaleX(0.2);
-webkit-transform-origin: right;
transform-origin: right;
}
98% {
right: 100%;
-webkit-transform: scaleX(0.2);
transform: scaleX(0.2);
-webkit-transform-origin: right;
transform-origin: right;
}
99.99% {
right: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right;
transform-origin: right;
}
100% {
right: -100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right;
transform-origin: right;
}
}
@-webkit-keyframes indeterminate-vertical {
0% {
bottom: -100%;
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
20% {
bottom: -40%;
-webkit-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
35% {
bottom: 35%;
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
50% {
bottom: 75%;
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
55% {
bottom: 100%;
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
55.99% {
bottom: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
56% {
bottom: -100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
56.99% {
bottom: -100%;
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
75% {
bottom: -5%;
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
80% {
bottom: 30%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
85% {
bottom: 50%;
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
90% {
bottom: 75%;
-webkit-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
95% {
bottom: 95%;
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
98% {
bottom: 100%;
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
99.99% {
bottom: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
100% {
bottom: -100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
}
@keyframes indeterminate-vertical {
0% {
bottom: -100%;
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
20% {
bottom: -40%;
-webkit-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
35% {
bottom: 35%;
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
50% {
bottom: 75%;
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
55% {
bottom: 100%;
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
55.99% {
bottom: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
56% {
bottom: -100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
56.99% {
bottom: -100%;
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
75% {
bottom: -5%;
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
80% {
bottom: 30%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
85% {
bottom: 50%;
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
90% {
bottom: 75%;
-webkit-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
95% {
bottom: 95%;
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
98% {
bottom: 100%;
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
99.99% {
bottom: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
100% {
bottom: -100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
}
@-webkit-keyframes indeterminate-vertical-inverted {
0% {
top: -100%;
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: top;
transform-origin: top;
}
20% {
top: -40%;
-webkit-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-transform-origin: top;
transform-origin: top;
}
35% {
top: 35%;
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: top;
transform-origin: top;
}
50% {
top: 75%;
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: top;
transform-origin: top;
}
55% {
top: 100%;
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
-webkit-transform-origin: top;
transform-origin: top;
}
55.99% {
top: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
}
56% {
top: -100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
}
56.99% {
top: -100%;
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: top;
transform-origin: top;
}
75% {
top: -5%;
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: top;
transform-origin: top;
}
80% {
top: 30%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: top;
transform-origin: top;
}
85% {
top: 50%;
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: top;
transform-origin: top;
}
90% {
top: 75%;
-webkit-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-transform-origin: top;
transform-origin: top;
}
95% {
top: 95%;
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
-webkit-transform-origin: top;
transform-origin: top;
}
98% {
top: 100%;
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
-webkit-transform-origin: top;
transform-origin: top;
}
99.99% {
top: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
}
100% {
top: -100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@keyframes indeterminate-vertical-inverted {
0% {
top: -100%;
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: top;
transform-origin: top;
}
20% {
top: -40%;
-webkit-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-transform-origin: top;
transform-origin: top;
}
35% {
top: 35%;
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: top;
transform-origin: top;
}
50% {
top: 75%;
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: top;
transform-origin: top;
}
55% {
top: 100%;
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
-webkit-transform-origin: top;
transform-origin: top;
}
55.99% {
top: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
}
56% {
top: -100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
}
56.99% {
top: -100%;
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: top;
transform-origin: top;
}
75% {
top: -5%;
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: top;
transform-origin: top;
}
80% {
top: 30%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: top;
transform-origin: top;
}
85% {
top: 50%;
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: top;
transform-origin: top;
}
90% {
top: 75%;
-webkit-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-transform-origin: top;
transform-origin: top;
}
95% {
top: 95%;
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
-webkit-transform-origin: top;
transform-origin: top;
}
98% {
top: 100%;
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
-webkit-transform-origin: top;
transform-origin: top;
}
99.99% {
top: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
}
100% {
top: -100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@-webkit-keyframes circle {
0% {
stroke-dashoffset: 314;
}
5% {
stroke-dashoffset: 164;
}
25% {
stroke-dashoffset: 104;
}
}
@keyframes circle {
0% {
stroke-dashoffset: 314;
}
5% {
stroke-dashoffset: 164;
}
25% {
stroke-dashoffset: 104;
}
}
@-webkit-keyframes circle-inverted {
0% {
stroke-dashoffset: -314;
}
5% {
stroke-dashoffset: -164;
}
25% {
stroke-dashoffset: -104;
}
}
@keyframes circle-inverted {
0% {
stroke-dashoffset: -314;
}
5% {
stroke-dashoffset: -164;
}
25% {
stroke-dashoffset: -104;
}
}
@-webkit-keyframes rotate-circle {
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-circle {
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate-circle-inverted {
50% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
75% {
-webkit-transform: rotate(-270deg);
transform: rotate(-270deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes rotate-circle-inverted {
50% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
75% {
-webkit-transform: rotate(-270deg);
transform: rotate(-270deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
/* jqx-checkbox */
jqx-checkbox {
padding: 1px 2px 1px 2px;
}
jqx-checkbox {
display: inline-block;
}
jqx-checkbox:focus {
outline: none;
}
jqx-checkbox:focus .jqx-input,
jqx-checkbox:focus .jqx-input {
border: 1px solid #666;
outline: none;
}
jqx-checkbox[disabled]:focus .jqx-input,
jqx-checkbox[disabled]:focus .jqx-input {
outline: none;
}
jqx-checkbox .jqx-container {
cursor: pointer;
height: auto;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
jqx-checkbox[disabled] .jqx-container,
jqx-checkbox[disabled] .jqx-label {
cursor: auto;
cursor: initial;
}
jqx-checkbox[right-to-left] .jqx-container {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
jqx-checkbox[right-to-left] .jqx-label {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
jqx-checkbox[right-to-left] .jqx-input {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
jqx-checkbox .jqx-label {
color: #555;
font-size: inherit;
font-family: inherit;
margin: 0px 5px 0px 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: auto;
cursor: default;
}
jqx-checkbox[enable-container-click] .jqx-label {
cursor: pointer;
}
jqx-checkbox[enable-container-click][disabled] .jqx-label {
cursor: auto;
cursor: initial;
}
jqx-checkbox .jqx-input {
width: 14px;
min-width: 14px;
height: 14px;
min-height: 14px;
background-color: #fff;
box-sizing: content-box;
box-sizing: initial;
border-style: solid;
border-width: 1px;
border-color: #A9A9A9;
display: inline-block;
}
jqx-checkbox .jqx-input:after {
content: '';
width: 100%;
height: 100%;
font-family: "jqx-icons";
font-style: normal;
font-weight: normal;
font-size: 8px;
display: inline-block;
text-decoration: inherit;
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
font-variant: normal;
text-transform: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
jqx-checkbox[checked] .jqx-input:after {
content: '\e807';
}
jqx-checkbox[checked="null"] .jqx-input:after {
content: '\e806';
}
jqx-checkbox .jqx-animation {
pointer-events: none;
}
/* jqx-radio-button */
jqx-radio-button {
padding: 1px 2px 1px 2px;
}
jqx-radio-button {
display: inline-block;
}
jqx-radio-button:focus {
outline: none;
}
jqx-radio-button:focus .jqx-input {
border: 1px solid #666;
outline: none;
}
jqx-radio-button[disabled]:focus .jqx-input,
jqx-radio-button[disabled]:focus .jqx-input {
outline: none;
}
jqx-radio-button .jqx-container {
cursor: pointer;
height: auto;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
jqx-radio-button[disabled] .jqx-container,
jqx-radio-button[disabled] .jqx-container {
cursor: auto;
cursor: initial;
}
jqx-radio-button[right-to-left] .jqx-container {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
jqx-radio-button[right-to-left] .jqx-label {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
jqx-radio-button[right-to-left] .jqx-input {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
jqx-radio-button .jqx-label {
color: #555;
font-size: inherit;
font-family: inherit;
margin: 0px 5px 0px 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: auto;
cursor: default;
}
jqx-radio-button[enable-container-click] .jqx-label {
cursor: pointer;
}
jqx-radio-button .jqx-input {
width: 14px;
min-width: 14px;
height: 14px;
min-height: 14px;
background-color: #fff;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #555;
display: inline-block;
box-sizing: content-box;
box-sizing: initial;
background-repeat: no-repeat;
}
jqx-radio-button .jqx-input:after {
content: '';
width: 100%;
height: 100%;
font-family: "jqx-icons";
font-style: normal;
font-weight: normal;
font-size: 12px;
color: gray;
display: inline-block;
text-decoration: inherit;
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
font-variant: normal;
text-transform: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
jqx-radio-button[checked] .jqx-input:after {
content: '\e808';
}
jqx-radio-button .jqx-animation {
pointer-events: none;
}
/* jqx-power-button */
jqx-power-button {
padding: 0px;
}
jqx-power-button {
display: inline-block;
width: 30px;
height: 30px;
}
jqx-power-button:focus {
outline: none;
}
jqx-power-button .jqx-input {
border-radius: 100%;
}
jqx-power-button .jqx-input,
jqx-power-button:focus .jqx-input {
outline: none;
}
jqx-power-button .jqx-container {
cursor: pointer;
height: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
jqx-power-button[disabled] .jqx-container,
jqx-power-button[disabled] .jqx-container {
cursor: auto;
cursor: initial;
}
jqx-power-button .jqx-input {
width: 100%;
height: 100%;
min-width: 30px;
min-height: 30px;
background-color: transparent;
border-style: solid;
box-sizing: border-box;
border-width: 1px;
border-color: #A9A9A9;
display: block;
}
jqx-power-button:focus .jqx-input {
color: #555;
border-color: #333;
background-color: transparent;
}
jqx-power-button:hover .jqx-input {
color: #FFBA00;
border-color: #A9A9A9;
background-color: #E0E0E0;
transition: background-color 100ms linear;
}
jqx-power-button:active .jqx-input,
jqx-power-button.active .jqx-input {
color: #111;
border-color: #A9A9A9;
background-color: #BDBDBD;
transition: background-color 100ms linear;
}
jqx-power-button .jqx-input {
background-color: transparent;
}
jqx-power-button[checked] .jqx-input {
background-color: #BDBDBD;
}
jqx-power-button .jqx-input:after {
content: '\e805';
width: 100%;
height: 100%;
font-family: "jqx-icons";
font-style: normal;
font-weight: normal;
font-size: 20px;
display: inline-block;
text-decoration: inherit;
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
font-variant: normal;
text-transform: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
jqx-power-button[checked] .jqx-input:after {
color: white;
}
jqx-power-button .jqx-animation {
pointer-events: none;
}
jqx-power-button[readonly]:active .jqx-input,
jqx-power-button[readonly].active .jqx-input,
jqx-power-button[readonly]:hover .jqx-input {
color: #000;
color: initial;
border: 1px solid #A9A9A9;
background: transparent;
transition: none;
}
/* jqx-switch-button */
jqx-switch-button {
display: inline-block;
width: 50px;
height: 30px;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
border-radius: 0;
border-color: #A9A9A9;
}
jqx-switch-button[readonly] .jqx-inner-container {
cursor: default;
}
jqx-switch-button.hovered {
border-color: #A9A9A9;
}
jqx-switch-button:focus {
outline: none;
}
jqx-switch-button .jqx-container {
font-size: inherit;
position: relative;
overflow: hidden;
}
jqx-switch-button .jqx-inner-container {
width: 88px;
height: 100%;
position: absolute;
color: inherit;
left: 0px;
right: auto;
top: 0px;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-direction: normal;
animation-direction: normal;
}
jqx-switch-button[orientation="vertical"] .jqx-inner-container {
height: 88px;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
jqx-switch-button[disabled] .jqx-inner-container {
cursor: auto;
cursor: initial;
}
jqx-switch-button .jqx-thumb.dragged {
background-color: #6b6969;
}
jqx-switch-button .jqx-thumb {
border-radius: 0;
background-color: #A9A9A9;
width: 12px;
display: inline-block;
height: 100%;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
jqx-switch-button[orientation="vertical"] .jqx-thumb {
width: 100%;
height: 12px;
}
jqx-switch-button[checked] .jqx-thumb {
background-color: rosybrown;
}
jqx-switch-button[checked="null"] .jqx-thumb {
background-color: #A9A9A9;
}
jqx-switch-button .jqx-true-content-container,
jqx-switch-button .jqx-false-content-container {
width: 38px;
height: 100%;
background-color: #ddd;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-clip: content-box;
padding: 2px 0px 2px 0px;
color: inherit;
overflow: hidden;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
jqx-switch-button[orientation="vertical"] .jqx-true-content-container,
jqx-switch-button[orientation="vertical"] .jqx-false-content-container {
height: 38px;
width: 100%;
padding: 0px 2px 0px 2px;
}
jqx-switch-button[checked] .jqx-inner-container {
right: 0px;
left: auto;
}
jqx-switch-button[checked="null"] .jqx-inner-container {
right: auto;
left: -18px;
}
jqx-switch-button[orientation="vertical"][checked] .jqx-inner-container {
bottom: 0;
left: auto;
right: auto;
top: auto;
}
jqx-switch-button[orientation="vertical"][checked="null"] .jqx-inner-container {
bottom: auto;
left: auto;
right: auto;
top: -18px;
}
jqx-switch-button .jqx-true-content-container {
background-color: #ddd;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
jqx-switch-button[inverted] .jqx-true-content-container {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
jqx-switch-button[inverted] .jqx-false-content-container {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
jqx-switch-button[inverted] .jqx-inner-container {
right: 0px;
left: auto;
}
jqx-switch-button[inverted][checked] .jqx-inner-container {
right: auto;
left: 0px;
}
jqx-switch-button[orientation="vertical"][inverted] .jqx-inner-container {
bottom: 0px;
top: auto;
left: auto;
right: auto;
}
jqx-switch-button[orientation="vertical"][inverted][checked] .jqx-inner-container {
bottom: auto;
top: 0px;
left: auto;
right: auto;
}
jqx-switch-button[inverted][checked="null"] .jqx-inner-container {
right: auto;
left: -18px;
}
jqx-switch-button[orientation="vertical"][inverted][checked="null"] .jqx-inner-container {
bottom: auto;
top: -18px;
left: auto;
right: auto;
}
jqx-switch-button .jqx-true-content,
jqx-switch-button .jqx-false-content {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: inherit;
font-weight: inherit;
display: inline-block;
text-align: center;
box-sizing: border-box;
color: inherit;
}
jqx-switch-button[checked="null"] .jqx-true-content-container,
jqx-switch-button[checked="null"] .jqx-false-content-container {
color: transparent;
-ms-user-select: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
jqx-switch-button[checked="null"] .jqx-true-content,
jqx-switch-button[checked="null"] .jqx-false-content {
visibility: hidden;
}
/*
* Horizontal switch animations
*/
jqx-switch-button.animation .jqx-inner-container {
-webkit-animation-name: jqx-switch-button-check-uncheck-horizontal;
animation-name: jqx-switch-button-check-uncheck-horizontal;
}
jqx-switch-button[inverted].animation .jqx-inner-container {
-webkit-animation-name: jqx-switch-button-check-uncheck-horizontal-inverted;
animation-name: jqx-switch-button-check-uncheck-horizontal-inverted;
}
jqx-switch-button[checked].animation .jqx-inner-container {
-webkit-animation-name: jqx-switch-button-indeterminate-check-horizontal;
animation-name: jqx-switch-button-indeterminate-check-horizontal;
}
jqx-switch-button[checked][inverted].animation .jqx-inner-container {
-webkit-animation-name: jqx-switch-button-indeterminate-check-horizontal-inverted;
animation-name: jqx-switch-button-indeterminate-check-horizontal-inverted;
}
jqx-switch-button[checked="null"].animation .jqx-inner-container,
jqx-switch-button[checked="null"][inverted].animation .jqx-inner-container {
-webkit-animation-name: jqx-switch-button-indeterminate-horizontal;
animation-name: jqx-switch-button-indeterminate-horizontal;
}
@-webkit-keyframes jqx-switch-button-indeterminate-horizontal {
0% {
-webkit-transform: translate(0px);
transform: translate(0px);
-webkit-transform: translate(100px);
transform: translate(100px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@keyframes jqx-switch-button-indeterminate-horizontal {
0% {
-webkit-transform: translate(0px);
transform: translate(0px);
-webkit-transform: translate(100px);
transform: translate(100px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@-webkit-keyframes jqx-switch-button-indeterminate-check-horizontal {
0% {
-webkit-transform: translate(100px,0px);
transform: translate(100px,0px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@keyframes jqx-switch-button-indeterminate-check-horizontal {
0% {
-webkit-transform: translate(100px,0px);
transform: translate(100px,0px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@-webkit-keyframes jqx-switch-button-indeterminate-check-horizontal-inverted {
0% {
-webkit-transform: translate(-100px,0px);
transform: translate(-100px,0px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@keyframes jqx-switch-button-indeterminate-check-horizontal-inverted {
0% {
-webkit-transform: translate(-100px,0px);
transform: translate(-100px,0px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@-webkit-keyframes jqx-switch-button-check-uncheck-horizontal {
0% {
-webkit-transform: translate(var(--jqx-switch-button-label-animation-offset-inverse),0px);
transform: translate(var(--jqx-switch-button-label-animation-offset-inverse),0px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@keyframes jqx-switch-button-check-uncheck-horizontal {
0% {
-webkit-transform: translate(var(--jqx-switch-button-label-animation-offset-inverse),0px);
transform: translate(var(--jqx-switch-button-label-animation-offset-inverse),0px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@-webkit-keyframes jqx-switch-button-check-uncheck-horizontal-inverted {
0% {
-webkit-transform: translate(calc( -1 * var(--jqx-switch-button-label-animation-offset-inverse)),0px);
transform: translate(calc( -1 * var(--jqx-switch-button-label-animation-offset-inverse)),0px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@keyframes jqx-switch-button-check-uncheck-horizontal-inverted {
0% {
-webkit-transform: translate(calc( -1 * var(--jqx-switch-button-label-animation-offset-inverse)),0px);
transform: translate(calc( -1 * var(--jqx-switch-button-label-animation-offset-inverse)),0px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
/*
* Vertical switch animations
*/
jqx-switch-button[orientation="vertical"][inverted].animation .jqx-inner-container {
-webkit-animation-name: jqx-switch-button-check-uncheck-vertical-inverted;
animation-name: jqx-switch-button-check-uncheck-vertical-inverted;
}
jqx-switch-button[orientation="vertical"].animation .jqx-inner-container {
-webkit-animation-name: jqx-switch-button-check-uncheck-vertical;
animation-name: jqx-switch-button-check-uncheck-vertical;
}
jqx-switch-button[orientation="vertical"][checked].animation .jqx-inner-container {
-webkit-animation-name: jqx-switch-button-indeterminate-check-vertical;
animation-name: jqx-switch-button-indeterminate-check-vertical;
}
jqx-switch-button[orientation="vertical"][checked][inverted].animation .jqx-inner-container {
-webkit-animation-name: jqx-switch-button-indeterminate-check-vertical-inverted;
animation-name: jqx-switch-button-indeterminate-check-vertical-inverted;
}
jqx-switch-button[orientation="vertical"][checked="null"].animation .jqx-inner-container,
jqx-switch-button[orientation="vertical"][checked="null"][inverted].animation .jqx-inner-container {
-webkit-animation-name: jqx-switch-button-indeterminate-vertical;
animation-name: jqx-switch-button-indeterminate-vertical;
}
@-webkit-keyframes jqx-switch-button-indeterminate-vertical {
0% {
-webkit-transform: translate(0px, 100px);
transform: translate(0px, 100px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@keyframes jqx-switch-button-indeterminate-vertical {
0% {
-webkit-transform: translate(0px, 100px);
transform: translate(0px, 100px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@-webkit-keyframes jqx-switch-button-indeterminate-check-vertical {
0% {
-webkit-transform: translate(0px, 100px);
transform: translate(0px, 100px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@keyframes jqx-switch-button-indeterminate-check-vertical {
0% {
-webkit-transform: translate(0px, 100px);
transform: translate(0px, 100px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@-webkit-keyframes jqx-switch-button-check-uncheck-vertical {
0% {
-webkit-transform: translate(0px, var(--jqx-switch-button-label-animation-offset-inverse));
transform: translate(0px, var(--jqx-switch-button-label-animation-offset-inverse));
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@keyframes jqx-switch-button-check-uncheck-vertical {
0% {
-webkit-transform: translate(0px, var(--jqx-switch-button-label-animation-offset-inverse));
transform: translate(0px, var(--jqx-switch-button-label-animation-offset-inverse));
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@-webkit-keyframes jqx-switch-button-indeterminate-check-vertical-inverted {
0% {
-webkit-transform: translate(0px, -100px);
transform: translate(0px, -100px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@keyframes jqx-switch-button-indeterminate-check-vertical-inverted {
0% {
-webkit-transform: translate(0px, -100px);
transform: translate(0px, -100px);
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@-webkit-keyframes jqx-switch-button-check-uncheck-vertical-inverted {
0% {
-webkit-transform: translate(0px, calc(-1 * var(--jqx-switch-button-label-animation-offset-inverse)));
transform: translate(0px, calc(-1 * var(--jqx-switch-button-label-animation-offset-inverse)));
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
@keyframes jqx-switch-button-check-uncheck-vertical-inverted {
0% {
-webkit-transform: translate(0px, calc(-1 * var(--jqx-switch-button-label-animation-offset-inverse)));
transform: translate(0px, calc(-1 * var(--jqx-switch-button-label-animation-offset-inverse)));
}
100% {
-webkit-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
/* jqx-tank */
jqx-tank {
padding-left: 5px;
padding-right: 5px;
width: 200px;
height: 200px;
display: block;
}
jqx-tank,
jqx-slider {
overflow: visible;
border: none;
}
jqx-tank *,
jqx-slider * {
box-sizing: border-box;
}
jqx-tank[orientation="horizontal"] {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0;
padding-left: initial;
padding-right: 0;
padding-right: initial;
}
jqx-tank:focus,
jqx-slider:focus {
outline: none;
}
jqx-tank .jqx-track.track-hovered {
cursor: pointer;
}
jqx-tank:active .jqx-track {
cursor: n-resize;
}
jqx-tank[orientation="horizontal"]:active .jqx-track {
cursor: w-resize;
}
jqx-tank[readonly]:active .jqx-track,
jqx-tank[disabled]:active .jqx-track {
cursor: default;
}
jqx-tank[readonly] .jqx-track.track-hovered,
jqx-tank[disabled] .jqx-track.track-hovered {
cursor: default;
}
jqx-tank .jqx-container,
jqx-slider .jqx-container {
overflow: visible;
}
jqx-tank .jqx-thumb {
position: absolute;
}
jqx-tank .jqx-thumb {
margin-top: -10px;
}
jqx-tank[orientation="horizontal"] .jqx-thumb {
margin-left: -10px;
}
jqx-tank[inverted] .jqx-thumb {
margin-left: 0;
margin-left: initial;
margin-top: 0;
margin-top: initial;
}
jqx-tank .jqx-thumb::before {
background-color: gray;
width: 100%;
height: 100%;
transition: 0.2s;
display: block;
border-radius: 50%;
content: "";
z-index: -1;
opacity: 0.1;
}
jqx-tank .jqx-thumb:hover::before {
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
-webkit-animation: tank-thumb-effect 1s infinite;
animation: tank-thumb-effect 1s infinite;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
@-webkit-keyframes tank-thumb-effect {
0%, 100% {
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
}
50% {
-webkit-transform: scale(1.8, 1.8);
transform: scale(1.8, 1.8);
}
}
@keyframes tank-thumb-effect {
0%, 100% {
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
}
50% {
-webkit-transform: scale(1.8, 1.8);
transform: scale(1.8, 1.8);
}
}
jqx-tank .jqx-track {
height: 100%;
width: calc(100% - 105px - 4px);
min-width: 6px;
position: relative;
border: solid lightgray;
border-width: 1px;
background-color: transparent;
float: left;
margin-top: 0;
margin-bottom: 0;
margin-left: 2px;
margin-right: 2px;
}
jqx-tank[scale-position="none"] .jqx-track {
height: 100%;
width: 100%;
position: relative;
border: solid lightgray;
border-width: 1px;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
jqx-tank[scale-position="both"] .jqx-track {
width: calc(100% - 2 * 105px - 4px);
}
jqx-tank[orientation="horizontal"] .jqx-track {
height: calc(100% - 105px - 4px);
min-height: 6px;
width: 100%;
background-color: transparent;
margin-top: 2px;
margin-bottom: 2px;
}
jqx-tank[orientation="horizontal"][scale-position="both"] .jqx-track {
height: calc(100% - 2 * 105px - 4px);
}
jqx-tank[orientation="horizontal"][scale-position="none"] .jqx-track {
height: 100%;
width: 100%;
position: relative;
border: solid lightgray;
border-width: 1px;
background-color: transparent;
margin-top: 0;
margin-bottom: 0;
}
jqx-tank:focus .jqx-track,
jqx-tank[scale-position="none"]:focus .jqx-track {
border: solid #A9A9A9;
border-width: 1px;
}
jqx-tank .jqx-value {
width: 100%;
height: 0;
background-color: #8298c7;
position: absolute;
}
jqx-tank[orientation="horizontal"] .jqx-value {
height: 100%;
width: 0;
}
jqx-tank .jqx-scale,
jqx-slider .jqx-scale {
position: relative;
}
jqx-tank .jqx-scale {
float: left;
}
jqx-tank[orientation="horizontal"] .jqx-scale {
width: 100%;
float: left;
height: 105px;
margin-left: 1px;
}
jqx-tank[scale-position="both"] .jqx-scale {
width: 105px;
height: 100%;
max-width: 47%;
}
jqx-tank[orientation="horizontal"][scale-position="both"] .jqx-scale {
width: 100%;
height: 105px;
}
jqx-tank .jqx-scale {
margin-top: 1px;
margin-left: 0;
margin-left: initial;
height: calc(100% - 1px);
width: 105px;
max-width: 94%;
}
jqx-tank .jqx-tooltip.jqx-hidden {
display: none;
}
jqx-tank .jqx-tooltip {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: 1px solid #A9A9A9;
width: 80px;
height: 30px;
padding: 5px;
background-color: #EFEFEF;
opacity: 0.7;
}
jqx-tank[orientation="horizontal"] .jqx-tooltip {
left: calc(100% + -40px);
}
jqx-tank .jqx-thumb,
jqx-tank .jqx-tooltip,
jqx-tank[tooltip-position="far"] .jqx-tooltip {
top: auto;
top: initial;
}
jqx-tank[orientation="horizontal"][tooltip-position="near"][inverted] .jqx-tooltip,
jqx-tank[orientation="horizontal"][inverted] .jqx-tooltip {
top: -42px;
left: -40px;
}
jqx-tank[inverted] .jqx-tooltip {
left: -90.5px;
top: calc(100% - 1 * 30px / 2);
}
jqx-tank[orientation="horizontal"][tooltip-position="far"] .jqx-tooltip {
top: calc(100% + 12px);
left: calc(100% + -40px);
}
jqx-tank[scale-position="none"][tooltip-position="near"] .jqx-tooltip {
top: -15px;
}
jqx-tank[orientation="horizontal"] .jqx-tooltip {
top: -42px;
left: calc(100% - 80px / 2);
}
jqx-tank[orientation="horizontal"][inverted][tooltip-position="far"] .jqx-tooltip {
left: -40px;
top: calc(100% + 12px);
}
jqx-tank[orientation="horizontal"] .jqx-tooltip:before {
content: "";
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #555;
position: absolute;
top: 100%;
left: 34px;
}
jqx-tank[orientation="horizontal"][tooltip-position="far"] .jqx-tooltip:before {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #555;
border-top: 0;
position: absolute;
left: 34px;
top: -7px;
}
jqx-tank .jqx-tooltip {
left: -90.5px;
top: -15px;
}
jqx-tank[inverted][tooltip-position="far"] .jqx-tooltip {
top: calc(100% - 30px / 2);
}
jqx-tank .jqx-tooltip:before {
content: "";
width: 0;
height: 0;
border-right: none;
border-left: 6px solid #555;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
position: absolute;
top: calc(50% - 6px);
right: -7px;
left: auto;
}
jqx-tank[tooltip-position="far"] .jqx-tooltip:before {
border-left: none;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #555;
top: calc(50% - 6px);
left: -7px;
}
jqx-tank[tooltip-position="far"] .jqx-tooltip {
left: calc(100% + 10.5px);
top: -15px;
}
jqx-tank[inverted][tooltip-position="far"][scale-position="none"] .jqx-tooltip {
left: calc(-100% - 7px);
}
jqx-tank[inverted][tooltip-position="near"] .jqx-tooltip {
left: -90.5px;
top: calc(100% - 30px / 2);
}
jqx-tank .jqx-tooltip-content,
jqx-slider .jqx-tooltip-content {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
jqx-tank[orientation="horizontal"] .jqx-tick {
float: left;
width: 1px;
height: 10px;
}
jqx-tank[orientation="horizontal"][ticks-position="track"] .jqx-tick {
height: 100%;
width: 1px;
}
jqx-tank[orientation="horizontal"] .jqx-tick-minor {
height: 5px;
width: 1px;
}
jqx-tank[orientation="horizontal"][ticks-position="track"] .jqx-tick-minor {
height: 80%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
jqx-tank .jqx-tick {
position: absolute;
background-color: black;
float: none;
float: initial;
width: 10px;
height: 1px;
}
jqx-tank[ticks-position="track"] .jqx-tick {
width: 100%;
}
jqx-tank .jqx-tick-minor {
width: 5px;
height: 1px;
}
jqx-tank[ticks-position="track"] .jqx-tick-minor {
width: 80%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
jqx-tank[orientation="horizontal"] .jqx-scale-near .jqx-tick {
bottom: 0;
right: auto;
right: initial;
}
jqx-tank .jqx-scale-near .jqx-tick {
bottom: auto;
bottom: initial;
right: 0;
}
jqx-tank[orientation="horizontal"] .jqx-scale-near .jqx-label {
bottom: 12px;
right: auto;
right: initial;
}
jqx-tank[orientation="horizontal"][ticks-position="track"] .jqx-scale-near .jqx-label,
jqx-tank[orientation="horizontal"][ticks-visibility="none"] .jqx-scale-near .jqx-label {
bottom: 2px;
}
jqx-tank .jqx-scale-near .jqx-label {
bottom: auto;
bottom: initial;
right: 12px;
}
jqx-tank[ticks-position="track"] .jqx-scale-near .jqx-label,
jqx-tank[ticks-visibility="none"] .jqx-scale-near .jqx-label {
right: 2px;
}
jqx-tank[orientation="horizontal"] .jqx-scale-far .jqx-tick {
top: 0;
}
jqx-tank.jqx-scale-far .jqx-tick {
top: auto;
top: initial;
}
jqx-tank[ticks-visibility="major"] .jqx-tick-minor,
jqx-tank[ticks-visibility="none"] .jqx-tick,
jqx-slider[ticks-visibility="major"] .jqx-tick-minor,
jqx-slider[ticks-visibility="none"] .jqx-tick {
display: none;
}
jqx-tank[orientation="horizontal"] .jqx-scale-far .jqx-label {
top: 12px;
left: auto;
left: initial;
}
jqx-tank[orientation="horizontal"][ticks-position="track"] .jqx-scale-far .jqx-label,
jqx-tank[orientation="horizontal"][ticks-visibility="none"] .jqx-scale-far .jqx-label {
top: 2px;
left: auto;
left: initial;
}
jqx-tank .jqx-scale-far .jqx-label {
left: 12px;
top: auto;
top: initial;
}
jqx-tank[ticks-position="track"] .jqx-scale-far .jqx-label,
jqx-tank[ticks-visibility="none"] .jqx-scale-far .jqx-label {
left: 2px;
top: auto;
top: initial;
}
jqx-tank .jqx-label,
jqx-slider .jqx-label {
position: absolute;
float: left;
white-space: nowrap;
font-family: inherit;
font-size: inherit;
color: #A9A9A9;
}
jqx-tank[labels-visibility="endPoints"] .jqx-label-middle,
jqx-tank[labels-visibility="none"] .jqx-label,
jqx-slider[labels-visibility="endPoints"] .jqx-label-middle,
jqx-slider[labels-visibility="none"] .jqx-label {
visibility: hidden;
}
jqx-tank .jqx-track-ticks-container,
jqx-slider .jqx-track-ticks-container {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
jqx-tank .jqx-track.jqx-dragged,
jqx-slider .jqx-track.jqx-dragged {
-ms-touch-action: none;
touch-action: none;
}
/* jqx-slider */
jqx-slider {
display: block;
padding-top: 5px;
padding-bottom: 5px;
width: 200px;
height: 200px;
}
jqx-slider[orientation="vertical"] {
padding-left: 5px;
padding-right: 5px;
padding-top: 0;
padding-top: initial;
padding-bottom: 0;
padding-bottom: initial;
}
jqx-slider .jqx-thumb {
position: absolute;
margin-left: -10px;
margin-top: -6px;
border-radius: 50%;
border: 1px solid #A9A9A9;
width: 20px;
min-width: 10px;
height: 20px;
min-height: 10px;
background-color: #EFEFEF;
cursor: pointer;
}
jqx-slider[orientation="vertical"] .jqx-thumb {
margin-left: -6px;
margin-top: -10px;
}
jqx-slider[orientation="vertical"][inverted] .jqx-thumb {
margin-top: 0;
}
jqx-slider .jqx-thumb::before {
background-color: gray;
width: 100%;
height: 100%;
transition: 0.2s;
display: block;
border-radius: 50%;
content: "";
z-index: -1;
opacity: 0.1;
}
jqx-slider .jqx-thumb.hovered::before {
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
-webkit-animation: slider-thumb-effect 1s infinite;
animation: slider-thumb-effect 1s infinite;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
jqx-slider .jqx-thumb.accessible {
z-index: 1;
}
@-webkit-keyframes slider-thumb-effect {
0%, 100% {
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
}
50% {
-webkit-transform: scale(1.8, 1.8);
transform: scale(1.8, 1.8);
}
}
@keyframes slider-thumb-effect {
0%, 100% {
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
}
50% {
-webkit-transform: scale(1.8, 1.8);
transform: scale(1.8, 1.8);
}
}
jqx-slider .jqx-track-container {
width: 100%;
height: 10px;
margin-top: 7px;
margin-bottom: 7px;
}
jqx-slider[show-buttons] .jqx-track-container {
margin-top: 8.5px;
margin-bottom: 8.5px;
}
jqx-slider[orientation="vertical"] .jqx-track-container {
float: left;
width: 10px;
height: 100%;
margin-top: 0;
margin-right: 7px;
margin-bottom: 0;
margin-left: 7px;
z-index: 1;
}
jqx-slider[orientation="vertical"][show-buttons] .jqx-track-container {
margin-right: 8.5px;
margin-left: 8.5px;
}
jqx-slider .jqx-track,
jqx-slider .jqx-thumb {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
jqx-slider .jqx-track {
position: relative;
float: left;
border-width: 1px;
border-style: solid;
border-color: transparent;
width: 100%;
height: 100%;
background-color: #EFEFEF;
cursor: pointer;
}
jqx-slider[orientation="vertical"] .jqx-track {
float: none;
}
jqx-slider[show-buttons] .jqx-track {
margin-left: 10px;
margin-right: 10px;
width: calc(100% - 2 * 23px - 20px);
}
jqx-slider[orientation="vertical"][show-buttons] .jqx-track {
margin-left: 0;
margin-right: 0;
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
height: calc(100% - 2 * 23px - 20px);
}
jqx-slider[orientation="vertical"] > .jqx-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row;
flex-flow: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
jqx-slider:focus .jqx-track {
border-color: #A9A9A9;
}
jqx-slider .jqx-value {
position: absolute;
width: 0;
height: 100%;
background-color: #7A7A7A;
}
jqx-slider[orientation="vertical"] .jqx-value {
width: 100%;
height: 0;
}
jqx-slider .jqx-scale {
margin-left: 1px;
height: calc(100% - 20px - 4px);
}
jqx-slider[scale-position="both"] .jqx-scale {
height: calc((100% - 20px) / 2 - 2px);
}
jqx-slider[scale-position="both"][show-buttons] .jqx-scale {
height: calc((100% - 23px) / 2 - 2px);
}
jqx-slider[orientation="vertical"] .jqx-scale {
float: left;
margin-top: 1px;
width: calc(100% - 20px - 2px);
height: 100%;
}
jqx-slider[orientation="vertical"][scale-position="both"] .jqx-scale {
width: calc((100% - 20px) / 2 - 2px);
}
jqx-slider[orientation="vertical"][scale-position="both"][show-buttons] .jqx-scale {
width: calc((100% - 23px) / 2);
}
jqx-slider[show-buttons] .jqx-scale {
height: calc(100% - 23px - 4px);
margin-left: 34px;
margin-right: 33px;
}
jqx-slider[orientation="vertical"][show-buttons] .jqx-scale {
margin-top: 34px;
margin-right: 0;
margin-left: 0;
height: calc(100% - 23px * 2 - 20px);
}
jqx-slider .jqx-tooltip {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: 1px solid #A9A9A9;
width: 80px;
height: 30px;
padding: 5px;
background-color: #EFEFEF;
opacity: 0.7;
}
jqx-slider .jqx-tooltip {
left: -31px;
top: -33px;
}
jqx-slider[tooltip-position="far"] .jqx-tooltip {
top: 21px;
}
jqx-slider[orientation="vertical"] .jqx-tooltip {
left: -83px;
top: -6px;
}
jqx-slider[orientation="vertical"][tooltip-position="far"] .jqx-tooltip {
left: 21px;
}
jqx-slider .jqx-tick {
position: absolute;
width: 1px;
height: 10px;
background-color: black;
}
jqx-slider .jqx-tick-minor {
height: 5px;
}
jqx-slider[orientation="vertical"] .jqx-tick {
width: 10px;
height: 1px;
}
jqx-slider[orientation="vertical"] .jqx-tick-minor {
width: 5px;
}
jqx-slider .jqx-scale-near .jqx-tick {
bottom: 0;
}
jqx-slider .jqx-scale-near .jqx-label {
bottom: 12px;
}
jqx-slider .jqx-scale-far .jqx-tick {
top: 0;
}
jqx-slider .jqx-scale-far .jqx-label {
top: 12px;
}
jqx-slider[orientation="vertical"] .jqx-scale-near .jqx-tick {
right: 0;
}
jqx-slider[orientation="vertical"] .jqx-scale-near .jqx-label {
right: 12px;
bottom: auto;
bottom: initial;
}
jqx-slider[orientation="vertical"] .jqx-scale-far .jqx-label {
left: 12px;
}
jqx-slider[ticks-position="track"] .jqx-tick {
height: 100%;
}
jqx-slider[ticks-position="track"] .jqx-tick-minor {
height: 60%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
jqx-slider[orientation="vertical"][ticks-position="track"] .jqx-tick {
width: 100%;
height: 1px;
}
jqx-slider[orientation="vertical"][ticks-position="track"] .jqx-tick-minor {
width: 60%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
jqx-slider[ticks-position="track"] .jqx-scale-near .jqx-label,
jqx-slider[ticks-visibility="none"] .jqx-scale-near .jqx-label {
bottom: 2px;
}
jqx-slider[orientation="vertical"][ticks-position="track"] .jqx-scale-near .jqx-label,
jqx-slider[orientation="vertical"][ticks-visibility="none"] .jqx-scale-near .jqx-label {
right: 2px;
}
jqx-slider[ticks-position="track"] .jqx-scale-far .jqx-label,
jqx-slider[ticks-visibility="none"] .jqx-scale-far .jqx-label {
top: 2px;
}
jqx-slider[orientation="vertical"][ticks-position="track"] .jqx-scale-far .jqx-label,
jqx-slider[orientation="vertical"][ticks-visibility="none"] .jqx-scale-far .jqx-label {
left: 2px;
}
jqx-slider .jqx-thumb ~ .jqx-thumb {
display: none;
}
jqx-slider[range-slider] .jqx-thumb ~ .jqx-thumb {
display: block;
}
jqx-slider .jqx-spin-button {
display: block;
float: left;
margin-top: -6.5px;
border-radius: 50%;
width: 23px;
height: 23px;
background-color: #EFEFEF;
cursor: pointer;
}
jqx-slider[orientation="vertical"] .jqx-spin-button {
float: none;
margin-left: -6.5px;
margin-top: 0;
}
jqx-slider .jqx-button {
border: 1px solid #A9A9A9;
border-radius: 50%;
}
jqx-slider .jqx-scale.jqx-hidden, jqx-slider .jqx-tooltip.jqx-hidden, jqx-slider .jqx-spin-button.jqx-hidden {
display: none;
}
jqx-slider[disabled] .jqx-thumb,
jqx-slider[readonly] .jqx-thumb,
jqx-slider[disabled] .jqx-spin-button,
jqx-slider[readonly] .jqx-spin-button,
jqx-slider[disabled] .jqx-track,
jqx-slider[readonly] .jqx-track,
jqx-slider[disabled] .jqx-value,
jqx-slider[readonly] .jqx-value {
cursor: default;
}
/* jqx-scroll-bar */
jqx-scroll-bar {
display: block;
-ms-touch-action: none;
touch-action: none;
}
jqx-scroll-bar .jqx-thumb {
position: absolute;
border: 1px solid #A9A9A9;
width: 40px;
height: calc(100% - 2px);
top: 1px;
background-color: #EFEFEF;
cursor: default;
box-sizing: border-box;
}
jqx-scroll-bar[orientation="vertical"] .jqx-thumb {
width: calc(100% - 2px);
height: 40px;
left: 1px;
top: 0px;
}
jqx-scroll-bar .jqx-track {
position: relative;
float: left;
width: calc((100% - 16px * 2));
height: 100%;
background-color: #EFEFEF;
}
jqx-scroll-bar[orientation="vertical"] .jqx-track {
float: none;
height: calc((100% - 16px * 2));
width: 100%;
}
jqx-scroll-bar .jqx-scroll-button button {
border: none;
cursor: default;
}
jqx-scroll-bar .jqx-scroll-button {
display: block;
float: left;
width: 16px;
height: 100%;
background-color: #EFEFEF;
cursor: default;
border: 1px solid transparent;
}
jqx-scroll-bar[orientation="vertical"] .jqx-scroll-button {
float: none;
height: 16px;
width: 100%;
}
/* Draw plug-in */
.drawContainer {
width: 100%;
height: 100%;
position: relative;
}
/* jqx-led */
jqx-led {
padding: 0px;
width: 30px;
height: 30px;
}
jqx-led {
display: inline-block;
border-radius: 50%;
}
jqx-led[shape="square"] {
border-radius: 0px;
}
jqx-led:focus {
outline: none;
}
jqx-led .jqx-container {
cursor: pointer;
height: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
jqx-led[disabled] .jqx-container {
cursor: auto;
cursor: initial;
}
jqx-led .jqx-input {
width: 100%;
height: 100%;
border-radius: 100%;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-width: 20px;
min-height: 20px;
padding: 4%;
background-clip: content-box;
border-style: solid;
box-sizing: border-box;
border-width: 1px;
border-color: #A9A9A9;
font-family: inherit;
font-size: inherit;
}
jqx-led[shape="square"] .jqx-input {
border-radius: 0px;
}
jqx-led:focus .jqx-input {
color: #555;
border-color: #333;
background-color: transparent;
}
jqx-led[disabled]:focus .jqx-input {
border-color: #A9A9A9;
}
jqx-led:hover .jqx-input {
color: #FFBA00;
border-color: #A9A9A9;
transition: background-color 100ms linear;
}
jqx-led.active .jqx-input {
color: #111;
border-color: #A9A9A9;
background-color: #BDBDBD;
}
jqx-led .jqx-false-content-container,
jqx-led .jqx-true-content-container,
jqx-led .jqx-indeterminate-content-container {
border-radius: 50%;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
background-color: transparent;
}
jqx-led .jqx-true-content-container {
background-color: #8298c7;
}
jqx-led .jqx-indeterminate-content-container {
background-color: lightgray;
}
jqx-led[checked] .jqx-false-content-container,
jqx-led .jqx-indeterminate-content-container,
jqx-led .jqx-true-content-container {
display: none;
}
jqx-led .jqx-false-content-container,
jqx-led[checked] .jqx-true-content-container,
jqx-led[checked="null"] .jqx-indeterminate-content-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
jqx-led[checked="null"] .jqx-true-content-container {
display: none;
}
jqx-led[shape="square"] .jqx-false-content-container,
jqx-led[shape="square"] .jqx-true-content-container,
jqx-led[shape="square"] .jqx-indeterminate-content-container {
border-radius: 0px;
}
jqx-led .jqx-false-content,
jqx-led[checked] .jqx-true-content,
jqx-led[checked="null"] .jqx-indeterminate-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
height: 100%;
}
jqx-led .jqx-animation {
pointer-events: none;
}
/* jqx-gauge */
jqx-gauge {
display: block;
width: 300px;
height: 300px;
min-width: 125px;
min-height: 125px;
}
jqx-gauge:focus {
outline: none;
}
jqx-gauge[dragged],
jqx-gauge[dragged] .jqx-label {
cursor: pointer;
}
jqx-gauge .jqx-container {
position: relative;
}
jqx-gauge .jqx-svg-container {
width: 100%;
height: 100%;
-ms-touch-action: none;
touch-action: none;
}
jqx-gauge .jqx-tick {
stroke: black;
stroke-width: 1px;
width: 15px;
pointer-events: none;
}
jqx-gauge[analog-display-type="fill"][ticks-position="track"] .jqx-tick,
jqx-gauge[analog-display-type="line"][ticks-position="track"] .jqx-tick {
stroke: #F2F2F2;
}
jqx-gauge .jqx-tick-minor {
width: 5px;
}
jqx-gauge[ticks-visibility="major"] .jqx-tick-minor,
jqx-gauge[labels-visibility="endPoints"] .jqx-label-middle {
visibility: hidden;
}
jqx-gauge .jqx-needle {
width: 10px;
height: 110px;
fill: #A6A6A6;
}
jqx-gauge .jqx-needle-central-circle {
fill: #A6A6A6;
}
jqx-gauge .jqx-track {
width: 15px;
stroke: #A6A6A6;
stroke-width: 2px;
fill: #A6A6A6;
}
jqx-gauge[show-ranges][ranges] .jqx-track {
opacity: 0;
}
jqx-gauge .jqx-value {
stroke: #A6A6A6;
stroke-width: 2px;
fill: #FFBB00;
}
jqx-gauge .jqx-line {
stroke: #FFBB00;
stroke-width: 5px;
}
.jqx-range {
width: 75px;
fill: #D8D8D8;
}
jqx-gauge .jqx-digital-display-container {
width: 100%;
height: 100%;
position: absolute;
}
jqx-gauge .jqx-digital-display {
position: absolute;
display: none;
width: 80px;
height: 25px;
top: 75%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: black;
font-size: inherit;
}
jqx-gauge[digital-display] .jqx-digital-display {
display: inline-block;
}
jqx-gauge[digital-display-position="top"] .jqx-digital-display {
top: 25%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
jqx-gauge[digital-display-position="right"] .jqx-digital-display {
top: 50%;
left: 70%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
jqx-gauge[digital-display-position="left"] .jqx-digital-display {
top: 50%;
left: 30%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
jqx-gauge[digital-display-position="center"] .jqx-digital-display {
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
jqx-gauge .jqx-digital-display input {
border: 2px solid #1A1A1A;
background-color: #F2F2F2;
text-align: center;
}
jqx-gauge[show-unit] .jqx-digital-display input {
border-right: none;
text-align: right;
}
jqx-gauge[show-unit] .jqx-digital-display .jqx-numeric-text-box-unit-display {
border: 2px solid #1A1A1A;
border-left: none;
}
/* jqx-tab-item and jqx-tabs */
jqx-tab-item, jqx-tabs {
display: block;
}
jqx-tab-item {
width: 100%;
height: 100%;
font-size: inherit;
}
jqx-tabs {
border: 2px solid black;
min-width: 60px;
width: 200px;
min-height: 60px;
height: 200px;
padding: 2px;
overflow: visible;
}
jqx-tabs[collapsed][horizontal] {
min-height: 0;
min-height: initial;
height: auto;
}
jqx-tabs[collapsed][vertical] {
display: table;
min-width: 0;
min-width: initial;
width: auto;
}
jqx-tabs[dragged],
jqx-tabs[dragged] .jqx-tab-label-container {
cursor: move;
}
jqx-tabs > .jqx-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
jqx-tabs[position="left"] > .jqx-container,
jqx-tabs[position="right"] > .jqx-container {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
jqx-tabs .jqx-tab-strip,
jqx-tabs .jqx-tabs-content-section {
width: 100%;
}
jqx-tabs[position="left"] .jqx-tab-strip,
jqx-tabs[position="right"] .jqx-tab-strip,
jqx-tabs[position="left"] .jqx-tabs-content-section,
jqx-tabs[position="right"] .jqx-tabs-content-section {
width: auto;
height: 100%;
}
jqx-tabs[position="hidden"] .jqx-tab-strip {
display: none;
}
jqx-tabs .jqx-tab-label-container,
jqx-tabs .jqx-tab-group-container {
position: relative;
display: inline-block;
padding: 5px;
cursor: pointer;
}
jqx-tabs[disabled] .jqx-tab-label-container,
jqx-tabs[disabled] .jqx-tab-group-container {
cursor: default;
}
jqx-tabs[position="left"] .jqx-tab-label-container,
jqx-tabs[position="right"] .jqx-tab-label-container,
jqx-tabs[position="left"] .jqx-tab-group-container,
jqx-tabs[position="right"] .jqx-tab-group-container {
display: block;
}
jqx-tabs .jqx-tab-label-container.jqx-tab-selected {
background-color: #FFBB00;
}
jqx-tabs .jqx-tab-label-container.jqx-tab-hovered,
jqx-tabs .jqx-tab-group-container.jqx-tab-hovered {
color: #FFBB00;
}
jqx-tabs .jqx-tab-label-text-container.jqx-close-button-enabled {
margin-right: 18px;
}
jqx-tabs .jqx-tab-group-arrow {
font-family: "jqx-icons";
font-size: 10px;
}
jqx-tabs .jqx-tab-close-button,
jqx-tabs .jqx-tab-group-arrow {
position: absolute;
right: 2px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 15px;
height: 15px;
text-align: center;
line-height: 13px;
color: gray;
}
jqx-tabs .jqx-tab-close-button.jqx-tab-close-button-hovered {
border-radius: 50%;
background-color: #DB4437;
color: white;
}
jqx-tabs .jqx-tabs-content-section {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 5px 0 0 0;
}
jqx-tabs[position="bottom"] .jqx-tabs-content-section {
padding: 0 0 5px 0;
}
jqx-tabs[position="left"] .jqx-tabs-content-section {
padding: 0 0 0 5px;
}
jqx-tabs[position="right"] .jqx-tabs-content-section {
padding: 0 5px 0 0;
}
jqx-tabs[position="hidden"] .jqx-tabs-content-section {
padding: 0;
}
jqx-tabs[collapsed] .jqx-tabs-content-section {
display: none;
}
jqx-tabs .jqx-add-new-tab.jqx-tab-hovered {
background-color: #FFECBF;
color: inherit;
}
jqx-tabs[horizontal] .jqx-add-new-tab {
padding-left: 10px;
padding-right: 10px;
}
jqx-tabs[vertical] .jqx-add-new-tab {
text-align: center;
}
jqx-tabs .jqx-tab-group-container.jqx-tab-group-selected {
background-color: #FFECBF;
}
jqx-tabs .jqx-tab-group-container .jqx-tab-label-text-container {
margin-right: 18px;
}
jqx-tabs .jqx-tab-group-popup {
position: absolute;
border: 1px solid #A9A9A9;
border-top: none;
width: 100%;
height: auto;
padding: 2px;
left: 0;
top: 100%;
z-index: 9999;
background-color: #E8E8E8;
}
jqx-tabs[position="bottom"] .jqx-tab-group-popup,
jqx-tabs[position="left"] .jqx-tab-group-popup,
jqx-tabs[position="right"] .jqx-tab-group-popup {
top: 0;
border-top: 1px solid #A9A9A9;
}
jqx-tabs[position="bottom"] .jqx-tab-group-popup {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
border-bottom: none;
}
jqx-tabs[position="left"] .jqx-tab-group-popup {
left: 100%;
border-left: none;
}
jqx-tabs[position="right"] .jqx-tab-group-popup {
right: 100%;
left: auto;
left: initial;
border-right: none;
}
jqx-tabs .jqx-tab-group-popup .jqx-tab-label-container {
width: 100%;
overflow: hidden;
}
jqx-tabs[position="right"] .jqx-tab-group-container {
direction: rtl;
}
jqx-tabs[position="right"] .jqx-tab-group-container .jqx-tab-label-text-container {
margin-right: 0;
}
jqx-tabs[position="right"] .jqx-tab-group-container .jqx-tab-group-arrow {
left: 0;
right: auto;
right: initial;
}
/* work in progress: */
jqx-tabs[position="left"][text-orientation="vertical"] .jqx-tab-strip {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
margin-top: -26px; /*equals the height of the tab strip*/
}
/* jqx-element */
.jqx-unselectable {
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
}
.jqx-hidden {
display: none;
}
.jqx-visibility-hidden {
visibility: hidden;
}
.jqx-shown {
display: block;
}
.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;
position: relative;
top: -100%;
left: 0;
height: 100%;
width: 100%;
min-height: 1px;
overflow: hidden;
pointer-events: none;
z-index: -1;
visibility: hidden;
}