:root {
    /* ------------------------------------------------ COLORS  */
    /* ------------------------------------------------ DESIGN  */
    /* ------------------------------------------------ CONTROLS  */
    /* power button */
    /* numeric text box */
    /* spin buttons width*/
    /* radix display button width*/
    /* unit display width*/
    /* the combined width of buttons */
    /* the combined width of spin buttons and unit display*/
    /* the combined width of radix display button and unit display*/
    /* the combined width of unit display and buttons */
    /* checkbox, radio button */
    /* switch */
    /*
    --jqx-switch-button-width: 50px;
    --jqx-switch-button-height: 20px;
    */
    /* tank */
    /* tank track size*/
    /* tank scale size*/
    /* tank thumb width*/
    /* tank thumb height*/
    /* tank tooltip width*/
    /* tank thumb height*/
    /* tank border width*/
    /* slider */
    /* slider thumb width*/
    /* slider thumb height*/
    /* slider tooltip width*/
    /* slider thumb height*/
    /* slider tooltip width*/
    /* slider thumb height*/
    /* progress bar */
}

.design-outline {
    border: none;
    margin: 3px;
    outline: 2px solid rgba(0, 0, 0, .35);
    outline-offset: 1px;
    width: calc(100% - 4px - 2px);
    height: calc(100% - 4px - 2px);
}


/* ------------------------------------------------ GLOBALS */

.jqx-item.jqx-fill-state-hover-flat {
    border-color: transparent;
    color: #00ADEF;
    background-color: transparent;
}

.jqx-item.jqx-fill-state-pressed-flat {
    border-color: #00ADEF;
    color: #000;
    background-color: transparent;
}

.jqx-dropdownlist-state-normal-flat {
    background: transparent;
}

.jqx-dropdownlist-state-selected-flat {
    border-color: #000;
    background-color: #00ADEF;
}

/* ------------------------------------------------ BOOLEAN BUTTON */

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 {
    border: none;
}

/* ------------------------------------------------ TOGGLE BUTTON*/


jqx-toggle-button {
    color: #000;
    border: none;
    background: rgba(0, 0, 0, .35);
    height: calc(100% - 6px);
    width: calc(100% - 6px);
    outline: 2px solid rgba(0, 0, 0, .35);
    outline-offset: 1px;
}

jqx-toggle-button button {
    border: none;
    color: inherit;
}

jqx-toggle-button:active {
    outline: 2px solid rgba(0, 0, 0, .35);
}

jqx-toggle-button:hover {
    outline: 2px solid #00ADEF;
}


jqx-toggle-button:hover button {
    color: inherit;
    border: none;
    background-color: transparent;
}

jqx-toggle-button button {
    color: inherit;
    border: none;
    background-color: transparent;
}

jqx-toggle-button button:focus {
    color: inherit;
    background-color: transparent;
}

jqx-toggle-button button:active, jqx-toggle-button button.active {
    color: inherit;
    background-color: transparent;
}

jqx-toggle-button[checked] button {
    color: inherit;
    border: none;
    background-color: #00ADEF;
}

/* ------------------------------------------------ POWER BUTTON */

jqx-power-button .jqx-input {
    border: 0px solid transparent;
    border-radius: 0;
    min-width: 20px;
    min-height: 20px;
    margin: 3px;
    outline: 2px solid rgba(0, 0, 0, .35);
    outline-offset: 1px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
}

jqx-power-button:focus .jqx-input {
    outline: 2px solid rgba(0, 0, 0, .35);
    color: #000;
    border: none;
}

jqx-power-button:active .jqx-input {
    outline: 2px solid rgba(0, 0, 0, .35);
    color: #000;
    border: none;
}

jqx-power-button:hover .jqx-input {
    color: #000;
    border-color: transparent;
    background: transparent;
    outline: 2px solid #00ADEF;
}

jqx-power-button .jqx-input:after {
    border: none;
    background: rgba(0, 0, 0, .35);
    stroke: none;
}

jqx-power-button[checked] .jqx-input:after {
    background-color: #00ADEF;
    color: #000;
}

jqx-power-button[unchecked] .jqx-input:after {
    background-color: #00ADEF;
    color: #000;
}


/* ------------------------------------------------ NUMERIC TEXT BOX*/

jqx-numeric-text-box .jqx-arrow-up:after,
jqx-numeric-text-box .jqx-arrow-down:after {
    color: #000;
}

jqx-numeric-text-box .jqx-arrow-up:hover:after,
jqx-numeric-text-box .jqx-arrow-down:hover:after {
    color: #00ADEF;
}

jqx-numeric-text-box .jqx-arrow-up:active:after,
jqx-numeric-text-box .jqx-arrow-down:active:after {
    color: #000;
}

jqx-numeric-text-box {
    display: inline-block;
    color: #000;
}

jqx-numeric-text-box .jqx-spin-button {
    background: none;
}

.jqx-numeric-text-box-pressed-component,
jqx-numeric-text-box .jqx-spin-button.jqx-numeric-text-box-pressed-component{
    background-color: transparent;
}

jqx-numeric-text-box .jqx-spin-button:hover,
jqx-numeric-text-box .jqx-numeric-text-box-radix-display:hover,
.jqx-list-item:hover {
    background: none;
}

jqx-repeat-button button:focus {
    color: #555;
    border-color: #00ADEF;
    background: none;
}

jqx-numeric-text-box .jqx-spin-button:active,
jqx-numeric-text-box .jqx-numeric-text-box-radix-display:active,
.jqx-list-item:active {
    background: #00ADEF;
}

jqx-numeric-text-box .jqx-numeric-text-box-component {
    border: none;
}

jqx-numeric-text-box input.jqx-numeric-text-box-component {
    border: 2px solid #000;
    background: none;
}

jqx-numeric-text-box input.jqx-numeric-text-box-component:hover {
    border: 2px solid #00ADEF;
    background: none;
}

jqx-numeric-text-box[readonly="true"] .jqx-numeric-text-box-component {
    background-color: transparent;
    border: 2px solid rgba(0, 0, 0, .35);
}

jqx-numeric-text-box[readonly="true"]:hover .jqx-numeric-text-box-component {
    background-color: transparent;
    border: 2px solid rgba(0, 0, 0, .35);
}

.jqx-numeric-text-box-radix-display {
    background-color: transparent;
}


/* ------------------------------------------------ CHECK BOX */

jqx-check-box .jqx-input {
    border: none;
    background: none;
    width: 8px;
    height: 8px;
    margin: 3px;
    outline: 2px solid #000;
    outline-offset: 1px;
}

jqx-check-box:focus .jqx-input {
    border: none;
    outline: 2px solid rgba(0, 0, 0, .35);
}

jqx-check-box:hover .jqx-input {
    border: none;
    outline: 2px solid #00ADEF;
}

jqx-check-box[readonly="true"] .jqx-input {
    outline-color: rgba(0, 0, 0, .35);
}

jqx-check-box[readonly="true"]:hover .jqx-input {
    outline-color: rgba(0, 0, 0, .35);
}

jqx-check-box[checked] .jqx-input:after {
    content: '\e807';
}

jqx-check-box[checked="null"] .jqx-input:after {
    content: '\e806';
}

jqx-check-box .jqx-label {
    color: #000;
    font-size: 14px;
}


/* ------------------------------------------------ PROGRESS BAR */

jqx-progress-bar {
    border: none;
    outline: 2px solid rgba(0, 0, 0, .35);
    outline-offset: 1px;
    background: rgba(0, 0, 0, .35);
}

jqx-progress-bar:active {
    outline: 2px solid rgba(0, 0, 0, .35);
    outline-offset: 1px;
}

jqx-progress-bar .jqx-value {
    border: none;
    background-color: #00ADEF;
}

jqx-circular-progress-bar .jqx-value {
    stroke: #00ADEF;
}

jqx-circular-progress-bar .jqx-value-path {
    stroke: rgba(0, 0, 0, .35);
}

jqx-progress-bar>.jqx-container,
jqx-circular-progress-bar>.jqx-container {
    border: none;
}


/* ------------------------------------------------ RADIO BUTTON */

jqx-radio-button .jqx-input:after {
    color: #000;
}

jqx-radio-button:focus .jqx-input {
    border: 2px solid #00ADEF;
    outline: none;
}

jqx-radio-button:hover .jqx-input {
    border: 2px solid #00ADEF;
    outline: none;
}

jqx-radio-button .jqx-input {
    border-width: 2px;
    border-color: rgba(0, 0, 0, .35);
    background-color: transparent;
}


/* ------------------------------------------------ SWITCH BUTTON */

jqx-switch-button {
    border: none;
    background: none;
    outline: 2px solid rgba(0, 0, 0, .35);
    outline-offset: 1px;
}

jqx-switch-button .jqx-false-content-container {
    background: rgba(0, 0, 0, .35);
}

jqx-switch-button .jqx-true-content-container {
    background: #00ADEF;
}

jqx-switch-button.hovered {
    outline: 2px solid #00ADEF;
}

jqx-switch-button:focus {
    border: none;
    outline: 2px solid #00ADEF;
    outline-offset: 1px;
}

jqx-switch-button[checked] .jqx-thumb::after,
jqx-switch-button[checked] .jqx-thumb::before {
    background-color: #00ADEF;
}

jqx-switch-button .jqx-thumb::before {
    border: none;
    background: rgba(0, 0, 0, .35);
}

jqx-switch-button .jqx-thumb::after {
    border: none;
}

jqx-switch-button[orientation="vertical"] .jqx-thumb::before {
    border: none;
}

jqx-switch-button[orientation="vertical"] .jqx-thumb::after {
    border: none;
}

jqx-switch-button .jqx-thumb {
    background-color: #000;
}

jqx-switch-button .jqx-thumb.dragged,
jqx-switch-button[checked] .jqx-thumb.dragged,
jqx-switch-button[checked] .jqx-thumb {
    background-color: #000;
}


/* ------------------------------------------------ TANK */


jqx-tank .jqx-value {
    background-color: #00ADEF;
}

jqx-tank .jqx-track {
    border: none;
    background-color: rgba(0, 0, 0, .35);
    outline: 2px solid rgba(0, 0, 0, .35);
    outline-offset: 1px;
}

jqx-tank[orientation="horizontal"] .jqx-track{
    background-color: rgba(0, 0, 0, .35);
}

jqx-tank .jqx-label {
    color: #000;
}

jqx-tank[orientation="vertical"] .jqx-track {
    margin-left: 3px;
    margin-right: 3px;
}

jqx-tank[orientation="vertical"] .jqx-scale {
    margin-top: 1px;
    margin-left: 0;
    margin-left: initial;
    height: calc(100% - 1px);
    width: 105px;
}

jqx-tank .jqx-track:hover {
    border: none;
    outline: 2px solid #00ADEF;
}

jqx-tank .jqx-track:active {
    border: none;
    outline: 2px solid rgba(0, 0, 0, .35);
}

jqx-tank:focus .jqx-track,
jqx-tank[scale-position="none"]:focus .jqx-track {
    border: none;
}


/* ------------------------------------------------ SLIDER */


/*
Need to incorporate half of the value height into the thumbs margin-top offset
Unsure how to query the value height?
*/

jqx-slider .jqx-track {
    border: none;
    background-color: rgba(0, 0, 0, .35);
}

jqx-slider .jqx-value {
    background-color: #00ADEF;
}

jqx-slider .jqx-tick {
    background-color: rgba(0, 0, 0, .35);
}

jqx-slider .jqx-thumb {
    border-radius: 0;
    background: #000;
    background-clip: content-box;
    border: 2px solid transparent;
}

jqx-slider .jqx-thumb:active {
    border: 2px solid rgba(0, 0, 0, .35);
}

jqx-slider .jqx-thumb:hover {
    border: 2px solid #00ADEF;
}

jqx-slider .jqx-thumb::before {
    display: none;
}

jqx-slider .jqx-label {
    color: #000;
}

/* ------------------------------------------------ SCROLL BAR */

jqx-scroll-bar .jqx-thumb {
    border: none;
    background-color: rgba(0, 0, 0, .35);
}

jqx-scroll-bar .jqx-thumb:hover {
    border: none;
    background-color: #00ADEF;
}

jqx-scroll-bar .jqx-thumb:active {
    border: none;
    background-color: rgba(0, 0, 0, .35);
}

jqx-scroll-bar .jqx-track {
    background-color: transparent;
}

.jqx-arrow,
.jqx-arrow-right {
    border: none;
}

.jqx-arrow,
.jqx-arrow-left {
    border: none;
}

jqx-scroll-bar .jqx-scroll-button {
    background-color: transparent;
    border: none;
}

jqx-scroll-bar .jqx-arrow-up:after,
jqx-scroll-bar .jqx-arrow-down:after,
jqx-scroll-bar .jqx-arrow-left:after,
jqx-scroll-bar .jqx-arrow-right:after {
    color: transparent;
}


/* ------------------------------------------------ LED */

jqx-led {
    width: 30px;
    height: 30px;
    border: 2px solid #000;
    border-radius: 50%;
}

jqx-led[readonly="true"] {
    border: 2px solid rgba(0, 0, 0, .35);
}

jqx-led[readonly="true"]:hover {
    border: 2px solid rgba(0, 0, 0, .35);
}

jqx-led[shape="square"] {
    border-radius: 0px;
}

jqx-led:hover {
    border: 2px solid #00ADEF;
}

jqx-led:focus {
    border: 2px solid #00ADEF;
}

jqx-led .jqx-input {
    border: none;
    min-width: 10px;
    min-height: 10px;
}

jqx-led .jqx-true-content-container {
    background: #00ADEF;
}


/* ------------------------------------------------ TIMESTAMP*/

ni-time-stamp-text-box .ni-time-stamp-box .jqx-input-content {
    border: 2px solid #000 !important;
    background-color: transparent;
    color: #000;
    height: 100%;
    box-sizing: border-box;
}

.jqx-datetimeinput-flat:hover .jqx-input-content-flat:hover {
    border-color: #00ADEF !important;
}

.jqx-datetimeinput-flat .jqx-action-button-flat.jqx-fill-state-normal-flat {
    border: none;
}

jqxtimestamp-flat {
    box-sizing: border-box;
}

ni-time-stamp-text-box[read-only] .ni-time-stamp-box .jqx-input-content {
    border: 2px solid rgba(0, 0, 0, .35) !important;
}

ni-time-stamp-text-box[read-only] .ni-time-stamp-box .jqx-input-content:hover {
    border: 2px solid rgba(0, 0, 0, .35) !important;
}


/* ------------------------------------------------ STRING*/

ni-string-control .ni-text-field, ni-string-control[read-only] .ni-text-field{
    border: none;
    background-color: transparent;
}

ni-string-control {
    border: 2px solid #000 !important;
    background-color: transparent;
    color: #000;
    box-sizing: border-box;
}

ni-string-control[read-only] {
    border: 2px solid rgba(0, 0, 0, .35) !important;
    background-color: transparent;
}

ni-string-control[read-only]:hover {
    border: 2px solid rgba(0, 0, 0, .35) !important;
}

ni-string-control:hover {
    border: 2px solid #00ADEF !important;
}

ni-string-control .ni-text-field {
    padding: 2px;
}

/* ------------------------------------------------ RADIO BUTTON GROUP*/

ni-radio-button-group .jqx-radiobutton-default-flat {
    border-width: 2px;
    border-color: #000;
}

ni-radio-button-group .jqx-fill-state-pressed-flat {
    color: #000;
    border-color: #00ADEF;
    background-color: #00ADEF;
}

ni-radio-button-group .jqx-radiobutton-hover-flat {
    border: 2px solid #00ADEF;
    background-color: transparent;
}

ni-radio-button-group .ni-radio-item{
    padding-top: 2px;
    padding-bottom: 2px;
}

ni-radio-button-group .jqx-radiobutton-check-checked {
    color: #000;
    border-color: #00ADEF;
    background-color: #00ADEF !important;
}

/* ------------------------------------------------ PATH*/

ni-path-selector .jqx-path-control-input.jqx-input {
    color: #000;
    border: 2px solid #000;
    background-color: transparent;
}

ni-path-selector[read-only] .jqx-path-control-input.jqx-input {
    border: 2px solid rgba(0, 0, 0, .35);
}

ni-path-selector .jqx-path-control-input.jqx-input:hover {
    border: 2px solid #00ADEF;
}

ni-path-selector .jqx-button-flat {
    color: #000;
    background-color: transparent;
    border: none;
}

ni-path-selector .jqx-button-flat:hover {
    color: #00ADEF;
    /* border: var(--jqx-outline-width) solid var(--jqx-hover-color);*/
}

ni-path-selector[read-only] .jqx-path-control-button {
    background-color: transparent;
}

ni-path-selector[read-only] .jqx-path-control-input.jqx-input:hover {
    border: 2px solid rgba(0, 0, 0, .35);
}


/* ------------------------------------------------ IMAGE*/

ni-url-image[source=""] .ni-image-box {
    outline: none;
    background-color: rgba(0, 0, 0, .35);
}


/* ------------------------------------------------ CHART*/

ni-chart {
    border: 2px solid #000;
    background-color: transparent;
    color: #000;
}


/* ------------------------------------------------ CARTESIAN GRAPH*/

ni-cartesian-graph {
    border: 2px solid #000;
    background-color: transparent;
    color: #000;
}


/* ------------------------------------------------ INTENSITY GRAPH*/

ni-intensity-graph {
    border: 2px solid #000;
    background-color: transparent;
    color: #000;
}


/* ------------------------------------------------ LEGENDS*/
.axisLabels,
.x1Label,
.y1Label,
.flot-x-axis,
.flot-y-axis,
.flot-x1-axis,
.flot-y1-axis {
    color: #000;
}

.jqx-widget-flat .jqx-popover.right {
    color: #000;
    background-color: transparent;
}

.jqx-expander-header-flat {
    border-bottom-color: transparent !important;
}

ni-plot-legend {
    border: 2px solid #000;
    background-color: transparent;
}

ni-plot-legend .ni-plot-display {
    background-color: transparent;
    border: 1px solid transparent;
}

ni-plot-legend .ni-button {
    background-color: transparent;
    border: none;
}

ni-plot-legend .jqx-fill-state-pressed {
    background-color: #00ADEF;
}

ni-plot-legend .jqx-expander-header-flat:hover {
    color: #00ADEF;
}

ni-plot-legend .jqx-expander .ni-details-box {
    background-color: rgba(255, 255, 255, 1) !important;
}

ni-scale-legend {
    border: 2px solid #000;
    background-color: transparent;
}

ni-scale-legend .ni-scale-legend-box {
    background-color: transparent;
}

ni-scale-legend .ni-button {
    border: transparent;
    background-color: transparent;
}

ni-cursor-legend {
    border: 2px solid #000;
    background-color: transparent;
}

ni-cursor-legend .ni-master-row,
ni-cursor-legend .ni-details {
    border: 0;
    background-color: transparent;
}

.jqx-popup {
    background-color: rgba(255, 255, 255, 1);
}

ni-graph-tools .ni-button {
    border: transparent;
    background-color: transparent;
}

ni-cursor-legend .jqx-button-flat {
    color: #000;
    background-color: transparent;
    border: none;
}

ni-cursor-legend .ni-details-row {
    background-color: transparent;
}

ni-plot-legend .ni-selector {
    border: 2px solid #000;
    color: #000;
    background-color: transparent;
}

.jqx-dropdownlist-state-normal-flat:hover {
    border: 2px solid #00ADEF;
    color: #000;
    background-color: transparent;
}

ni-plot-legend .jqx-expander .ni-colorbox-selector {
    background-color: transparent !important;
    border: 2px solid #000 !important;
}

ni-plot-legend .ni-colorbox-content {
    text-align: center;
}


/* ------------------------------------------------ DROPDOWN, LISTBOX*/

jqx-list-box,
jqx-drop-down-list{
    border: 2px solid #000;
}

jqx-list-box[readonly="true"],
jqx-drop-down-list[readonly="true"]{
    border: 2px solid rgba(0, 0, 0, .35);
}

jqx-drop-down-list[readonly="true"] .jqx-drop-down-button{
    color: #000;
}

jqx-drop-down-list[readonly="true"] .jqx-drop-down-button:active{
    color: #000;
}

jqx-drop-down-list.hovered {
    border: 2px solid #00ADEF;
}

jqx-drop-down-list.hovered[readonly="true"]{
    border: 2px solid rgba(0, 0, 0, .35);
}

jqx-drop-down-list.focus{
    border: 2px solid #00ADEF;
}

jqx-drop-down-list .jqx-action-button,
jqx-drop-down-list .jqx-drop-down-button{
    border: none;
}

jqx-drop-down-list jqx-list-item[selected][focused] {
    background-color: rgba(0, 173, 239, .3);
}

jqx-list-item {
    color: #000;
}

jqx-list-item[selected] {
    background-color: rgba(0, 173, 239, .3) !important;
}

jqx-list-item.hovered{
    color: #00ADEF;
}

/* ------------------------------------------------ ENUM, RING*/

/* Use outline instead of border because border affects sizing and the resize hacks
are calculating the jqx-drop-down-list size wrong. The resize hacks can likely be removed
altogether for these elements as the jqx elements resize better */

ni-enum-selector,
ni-ring-selector {
    box-shadow: 0px 0px 0px 2px #000;
}

ni-enum-selector jqx-drop-down-list,
ni-ring-selector jqx-drop-down-list {
    border: none !important;
    outline: none !important;
}



ni-enum-selector:hover,
ni-ring-selector:hover {
    box-shadow: 0px 0px 0px 2px #00ADEF;
}

ni-enum-selector[read-only],
ni-ring-selector[read-only] {
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, .35);
}

ni-ring-selector jqx-numeric-text-box .jqx-numeric-text-box-component {
    border-right: none !important;
    border-bottom: none !important;
    border-top:none !important;
}

/* ------------------------------------------------ CLUSTER*/

ni-cluster {
    background-color: transparent;
    outline: none;
    box-shadow: 0px 0px 0px 2px #000;
}


/* ------------------------------------------------ DATA GRID*/

ni-data-grid {
    box-shadow: 0px 0px 0px 2px #000;
}

ni-data-grid .jqx-grid {
    border: none;
    background-color: transparent;
}

ni-data-grid .jqx-grid .jqx-widget-content-flat {
    background-color: transparent;
}

ni-data-grid .jqx-grid-cell {
    background-color: transparent;
}

ni-data-grid .ni-add-rows-toolbar {
    border-top: 2px solid #000;
    background-color: transparent;
}

ni-data-grid .ni-add-rows-toolbar .ni-add-rows-button {
    border: none;
    margin: 3px;
    outline: 2px solid rgba(0, 0, 0, .35);
    outline-offset: 1px;
    background: rgba(0, 0, 0, .35);
}

ni-data-grid .ni-add-rows-toolbar .ni-add-rows-button:hover {
    outline: 2px solid #00ADEF;
}

ni-data-grid .ni-add-rows-button .jqx-fill-state-hover .jqx-fill-state-hover-flat {
    border: 2px solid #000;
}

ni-data-grid .ni-add-rows-toolbar .ni-row-count-text-field-box {
    border: 2px solid #000;
}

ni-data-grid .ni-add-rows-toolbar .ni-row-count-text-field-box:hover {
    border: 2px solid #00ADEF;
}

ni-data-grid .jqx-window-header-flat,
ni-data-grid .jqx-input-button-header-flat,
ni-data-grid .jqx-calendar-title-header-flat,
ni-data-grid .jqx-grid-flat .jqx-widget-header-flat,
ni-data-grid .jqx-grid-header-flat,
ni-data-grid .jqx-grid-column-header-flat {
    background-color: transparent;
}

ni-data-grid .jqx-input-flat:hover {
    border: 2px solid #00ADEF;
    background-color: transparent;
}

ni-data-grid .jqx-grid-column-menubutton-flat {
    background-color: #00ADEF !important;
}

ni-data-grid .jqx-fill-state-normal-flat {
    border: 2px solid #000;
}

ni-data-grid .jqx-scrollbar-flat .jqx-scrollbar-thumb-state-normal {
    margin-left: 3px;
}

ni-data-grid .jqx-scrollbar-flat .jqx-scrollbar-thumb-state-normal-horizontal {
    margin-top: 3px;
    height: 5px !important;
}

ni-data-grid .jqx-grid-group-cell {
    background-color: transparent;
}

ni-data-grid .jqx-grid-cell-pinned {
    background-color: transparent;
}

ni-data-grid .jqx-grid-pager .jqx-grid-pager-input {
    border: 2px solid #000;
}

ni-data-grid .jqx-grid-pager .jqx-grid-pager-input:hover {
    border: 2px solid #00ADEF;
}

ni-data-grid .jqx-grid-pager .jqx-fill-state-hover-flat {
    border: 2px solid #00ADEF;
}

/* ------------------------------------------------ TAB*/

.jqx-tabs-title-selected-bottom-flat,
.jqx-tabs-selection-tracker-bottom-flat,
.jqx-tabs-title-selected-top-flat,
.jqx-tabs-selection-tracker-top-flat,
.jqx-ribbon-item-selected-flat {
    color: #000;
    border: none;
    background: rgba(0, 173, 239, .3);
}

ni-tab-control>.jqx-ribbon>.jqx-ribbon-header {
    border: 2px solid #000;
    border-bottom: transparent;
}

.jqx-widget-header-flat {
    color: #000;
    background-color: transparent;
}

ni-tab-control>.jqx-ribbon>.jqx-ribbon-content {
    border: 2px solid #000;
    background-color: transparent !important;
}

.jqx-ribbon-item-hover-flat {
    color: #00ADEF;
    background: transparent;
}


/* ------------------------------------------------ ARRAY*/

ni-array-viewer .jqx-array-indexer-container{
    border: none;
}

ni-array-viewer .jqx-fill-state-pressed-flat {
    border: none;
    background-color: transparent;
}

/* Keep in sync with Source\VI\HtmlControls.Design\Themes\generic.xaml */
ni-array-viewer .jqx-array-element {
    padding: 4px;
}

ni-array-viewer .jqx-array-indexer-container,
.jqx-array .jqx-array-big-container {
    background-color: transparent;
}

ni-array-viewer .jqx-array-indexer .jqx-input-content {
    border: 2px solid #000 !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    height: 100% !important;
    background-color: transparent;
}

ni-array-viewer .jqx-scrollbar-flat .jqx-scrollbar-thumb-state-normal {
    border: 2px solid #000;
    margin-left: 4px;
}

ni-array-viewer .jqx-scrollbar-flat .jqx-scrollbar-thumb-state-normal-horizontal {
    border: 2px solid #000;
    margin-top: 4px;
    height: 5px !important;
}

ni-array-viewer .jqx-scrollbar-flat .jqx-scrollbar-button-state-normal {
    background: none;
    border: none;
}

ni-array-viewer .jqx-array .jqx-input-flat {
    background: transparent;
    border: none;
}

ni-array-viewer .jqx-fill-state-pressed-flat {
    border: none;
}

ni-array-viewer[ni-type*="Void"] .jqx-array-big-container {
    background-color: rgba(0, 0, 0, .35);
}

ni-array-viewer .jqx-fill-state-disabled {
    /*An opacity less than 1 moves the child elements to a new stacking context
    which breaks elements with interactive children like the enum and ring as they
    are no longer interactive */
    opacity: 1;
    background-color: rgba(0, 0, 0, .15);
}

::-moz-selection { background: rgba(0, 173, 239, .3); }

::selection { background: rgba(0, 173, 239, .3); }
/* ------------------------------------------------ GAUGE*/

jqx-gauge .jqx-needle-central-circle,
jqx-gauge .jqx-needle {
    fill: #000;
}

jqx-gauge .jqx-line{
    stroke: #00ADEF;
}

jqx-gauge .jqx-value{
    stroke: rgba(0, 0, 0, .35);
    fill: #00ADEF;
}