/*CSS START: Control Styles */

.ofControl .jqx-widget-content-dsgarctic .jqx-listitem-element .jqx-listitem-state-selected, .ofControl .jqx-widget-content-dsgarctic .jqx-listitem-element .jqx-listitem-state-normal, .ofControl .jqx-widget-content-dsgarctic .jqx-listitem-element .jqx-listitem-state-hover {
  border: 1px solid transparent;
}

.ofDisabled .jqx-widget-content-dsgarctic.jqx-fill-state-disabled-dsgarctic {
  background-color: var(--of-grey150);
}


.jqx-fill-state-disabled-dsgarctic input:disabled {
  color: black;
  background: var(--of-grey150);
  border-color: var(--of-grey300);
}

.ofForm_ctrl_container.ofDisabled .ctrlMain > div > *:disabled, 
.ofForm_ctrl_container.ofDisabled .ctrlMain > div > *[class*="disable"]
{
  border-color: var(--of-grey300);
}

.ofForm_ctrl_container .ofDisabled .oFLookupTextInputContainer .oFLookupPopUpItem .jqx-icon-close {
  display: none;
}

.ofForm_ctrl_container .jqx-radiobutton {
  margin-bottom: 0px; /*override jqx style*/
}

.ofForm_ctrl_container .ctrlMain.ofHasCtrlMeta .ofControlsContainer:has(.jqx-checkbox) ~ .ctrlAddElements .ctrlMetaAttribute,
.ofForm_ctrl_container .ctrlMain.ofHasCtrlMeta .ofControlsContainer:has(.jqx-radiobutton) ~ .ctrlAddElements .ctrlMetaAttribute,
.ofForm_ctrl_container .ctrlMain.ofHasCtrlMeta .ofControlsContainer:has(.jqx-checkbox) ~ .ctrlAddElements .ctrlMetaAttribute .ofIcon,
.ofForm_ctrl_container .ctrlMain.ofHasCtrlMeta .ofControlsContainer:has(.jqx-radiobutton) ~ .ctrlAddElements .ctrlMetaAttribute .ofIcon {
  border-color: transparent;
  border-radius: 4px;
  margin-top: -1px;
}


/* Thsi causes checkboxes to be higher than other inputs when horizontal*/
.ofControlsContent .jqx-checkbox, .ofControlsContent .jqx-radiobutton, .ofControlsContent .ofSwitch, .ofControlsContainer .jqx-checkbox, .ofControlsContainer .jqx-radiobutton, .ofControlsContainer .ofSwitch {
  border: 1px solid transparent !important;
  width: max-content;
}

.ofControlsContent.ofControlsGroupVertical .jqx-checkbox:not(:only-child), .ofControlsContent.ofControlsGroupVertical .jqx-radiobutton:not(:only-child) {
    display: flex;
    height: 24px !important;
    line-height: 24px !important;
}
  .ofControlsContent.ofControlsGroupVertical .jqx-checkbox:not(:only-child) div:first-child, .ofControlsContent.ofControlsGroupVertical .jqx-radiobutton:not(:only-child) div:first-child {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }


  .ofInput.jqx-input, .ofComboBox.jqx-combobox, .ofListBox.jqx-listbox {
    border-radius: 2px;
    border-width: 1px;
  }

.ofGrid .jqx-widget-content .jqx-item-dsgarctic.jqx-grid-cell-selected, .jqx-listitem-element-dsgarctic .jqx-listitem-state-selected {
  background-color: var(--of-secondary100) !important;
  background: none;
  border-radius: 0px;
  color: var(--of-secondary500);
}

.ofMaxMenu .ofTeamSelector .jqx-combobox {
  border-color: var(--of-grey300);
}

.ofMaxMenu .jqx-combobox-dsgarctic .jqx-icon-arrow-down-dsgarctic {
  background-image: url('../JQWidgets/jqwidgets/styles/images/whitedropdownenabled16.png')
}

.ofMaxMenu .jqx-combobox-dsgarctic .jqx-icon-arrow-down-hover-dsgarctic:not(.jqx-icon-arrow-down-selected-dsgarctic) {
  background-image: url('../JQWidgets/jqwidgets/styles/images/whitedropdownenabled16.png');
  background-repeat: no-repeat;
  background-position: center;
  margin-left: -1px;
}

.ofMaxMenu .jqx-combobox-dsgarctic .jqx-icon-arrow-down-selected {
  background-image: url('../JQWidgets/jqwidgets/styles/images/whitedropdownenabled16_up.png')
}

/* CSS END: Control Styles */


/* CSS Start: Button Controls */

/* Primary Button styles Start*/

/* THIS ARE ONLY FOR JQX BUTTONS AND NO LONGER APPLY TO ONEFACE RENDERED BUTTONS */

input[type="button"].jqx-button-dsgarctic.ofActive {
  /*background: #BFD5EA radial-gradient(circle, transparent 1%, #BFD5EA 1%) center/15000%;*/
  background: radial-gradient(circle, var(--of-secondary300) 35px, var(--of-secondary400) 35px);
  background-repeat: no-repeat;
}

input[type="button"].jqx-button-dsgarctic:hover,
input[type="submit"].jqx-button-dsgarctic:hover,
label[type="button"].jqx-button-dsgarctic:hover {
  background-color: var(--of-secondary300);
  cursor: pointer;
}

input[type="button"].jqx-button-dsgarctic:focus:not(.OfSecondaryButton),
input[type="submit"].jqx-button-dsgarctic:focus:not(.OfSecondaryButton),
label[type="button"].jqx-button-dsgarctic:focus:not(.OfSecondaryButton) {
  background-color: var(--of-secondary300);
  cursor: pointer;
  animation: ofButtonClickJqx 0.15s linear;
}

@keyframes ofButtonClickJqx {
  0% {
    background: radial-gradient(circle, var(--of-secondary300) 0%, var(--of-secondary400) 0%) center no-repeat;
  }

  10% {
    background: radial-gradient(circle, var(--of-secondary300) 10%, var(--of-secondary400) 10%) center no-repeat;
  }

  20% {
    background: radial-gradient(circle, var(--of-secondary300) 20%, var(--of-secondary400) 20%) center no-repeat;
  }

  30% {
    background: radial-gradient(circle, var(--of-secondary300) 30%, var(--of-secondary400) 30%) center no-repeat;
  }

  40% {
    background: radial-gradient(circle, var(--of-secondary300) 40%, var(--of-secondary400) 40%) center no-repeat;
  }

  50% {
    background: radial-gradient(circle, var(--of-secondary300) 50%, var(--of-secondary400) 50%) center no-repeat;
  }

  60% {
    background: radial-gradient(circle, var(--of-secondary300) 60%, var(--of-secondary400) 60%) center no-repeat;
  }

  70% {
    background: radial-gradient(circle, var(--of-secondary300) 70%, var(--of-secondary400) 70%) center no-repeat;
  }

  80% {
    background: radial-gradient(circle, var(--of-secondary300) 80%, var(--of-secondary400) 80%) center no-repeat;
  }

  90% {
    background: radial-gradient(circle, var(--of-secondary300) 90%, var(--of-secondary400) 90%) center no-repeat;
  }

  100% {
    background: radial-gradient(circle, var(--of-secondary300) 100%, var(--of-secondary400) 100%) center no-repeat;
  }
}

/* Primary Button styles End*/

/* Secondary Button styles Start */

/* THIS ARE ONLY FOR JQX BUTTONS AND NO LONGER APPLY TO ONEFACE RENDERED BUTTONS */

.OfSecondaryButton.jqx-button-dsgarctic.jqx-fill-state-normal.jqx-fill-state-normal-dsgarctic {
  color: var(--of-primary500);
  background-color: var(--of-white500);
  border: 1px solid var(--of-primary300);
  box-shadow: none;
}

.OfSecondaryButton.jqx-button-dsgarctic:hover.jqx-fill-state-hover.jqx-fill-state-hover-dsgarctic {
  background-color: var(--of-secondary100);
  border: 1px solid var(--of-primary500);
  color: var(--of-primary500);
}

input[type="button"].OfSecondaryButton.jqx-button-dsgarctic.jqx-fill-state-pressed {
  border: 1px solid var(--of-primary500);
  color: var(--of-primary500);
  background-color: var(--of-secondary100); /*Custom value because I don't know what this colour was before calculation of overlay*/
}

.OfSecondaryButton.jqx-button-dsgarctic.jqx-fill-state-disabled.jqx-fill-state-disabled-dsgarctic, .OfSecondaryButton.jqx-button-dsgarctic.jqx-fill-state-disabled:hover.jqx-fill-state-disabled-dsgarctic:hover {
  background-color: var(--of-white500);
  border-color: var(--of-grey300);
  box-shadow: none;
  color: var(--of-grey500);
  cursor: default;
}

input[type="button"].OfSecondaryButton.jqx-button-dsgarctic:focus,
input[type="submit"].OfSecondaryButton.jqx-button-dsgarctic:focus,
label[type="button"].OfSecondaryButton.jqx-button-dsgarctic:focus {
  cursor: pointer;
  animation: ofSecondaryButtonClickJqx 0.15s linear;
}

@keyframes ofSecondaryButtonClickJqx {
  10% {
    background: radial-gradient(circle, var(--of-accent100) 10%, var(--of-white500) 10%) center no-repeat;
  }

  20% {
    background: radial-gradient(circle, var(--of-accent100) 20%, var(--of-white500) 20%) center no-repeat;
  }

  30% {
    background: radial-gradient(circle, var(--of-accent100) 30%, var(--of-white500) 30%) center no-repeat;
  }

  40% {
    background: radial-gradient(circle, var(--of-accent100) 40%, var(--of-white500) 40%) center no-repeat;
  }

  50% {
    background: radial-gradient(circle, var(--of-accent100) 50%, var(--of-white500) 50%) center no-repeat;
  }

  60% {
    background: radial-gradient(circle, var(--of-accent100) 60%, var(--of-white500) 60%) center no-repeat;
  }

  70% {
    background: radial-gradient(circle, var(--of-accent100) 70%, var(--of-white500) 70%) center no-repeat;
  }

  80% {
    background: radial-gradient(circle, var(--of-accent100) 80%, var(--of-white500) 80%) center no-repeat;
  }

  90% {
    background: radial-gradient(circle, var(--of-accent100) 90%, var(--of-white500) 90%) center no-repeat;
  }

  100% {
    background: radial-gradient(circle, var(--of-accent100) 100%, var(--of-white500) 100%) center no-repeat;
  }
}

/* Secondary Button styles End */

/* Submit loading styles Start */

input[type="button"].jqx-button-dsgarctic.ofSubmitGif {
  background: var(--of-spinner-white);
  background-color: var(--of-secondary300);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: 22px;
  color: transparent;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input[type="button"].OfSecondaryButton.jqx-button-dsgarctic.ofSubmitGif {
  background: var(--of-spinner);
  background-color: var(--of-white500);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: 22px;
  color: transparent;
}

/* Submit loading styles End */

/* CSS END: Button Controls*/



/* CSS START: Grid CSS */

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

.ofGrid .jqx-grid-column-header > div > div.check {
  background-image: url('images/GridSelection/check.png');
}

.ofGrid .jqx-grid-column-header > div > div.uncheck {
  background-image: url('images/GridSelection/uncheck.png');
}

  .ofGrid .jqx-grid-column-header > div > div.uncheck:hover {
    background-image: url('images/GridSelection/uncheckhover.png');
  }

.ofGrid .jqx-grid-column-header > div > div.partcheck {
  background-image: url('images/GridSelection/partcheck.png');
}

  .ofGrid .jqx-grid-column-header > div > div.partcheck:hover {
    background-image: url('images/GridSelection/partcheckhover.png');
  }

.ofGrid .jqx-grid-column-header > div > div.multiplecheck {
  background-image: url('images/GridSelection/multiplecheck.png');
}

  .ofGrid .jqx-grid-column-header > div > div.multiplecheck:hover {
    background-image: url('images/GridSelection/multiplecheckhover.png');
  }

.ofGrid .jqx-grid-column-header, .defaultGrid .jqx-grid-columngroup-header {
  font-size: 12px;
  background: #F2F2F2;
  color: var(--of-grey900);
}

  .ofGrid .jqx-grid-column-header span:not(.jqx-checkbox-check-checked), .defaultGrid .jqx-grid-columngroup-header span:not(.jqx-checkbox-check-checked) {
    padding: 0 10px;
  }

.ofGrid .jqx-grid-cell-left-align {
  padding-left: 10px;
}

.ofGrid .jqx-grid-cell-right-align {
  padding-right: 10px;
}

.ofGrid .jqx-grid-cell, .ofGrid .jqx-grid-group-cell {
  font-size: 14px;
}

.ofGridFilterRowIcon {
  height: 16px !important;
  width: 16px !important;
  fill: var(--of-primary500);
  padding: 6px 0px 0px 12px !important
}



.ofGrid .jqx-grid-cell .ofImageButton:first-child, .ofGrid .jqx-grid-group-cell .ofImageButton:first-child {
  margin-left: 10px;
}



.ofGrid .jqx-grid-cell .ofImageButton:last-child, .ofGrid .jqx-grid-group-cell .ofImageButton:last-child {
  margin-right: 10px;
}



.ofGrid.ofSmallRow .jqx-grid-cell,
.ofGrid.ofSmallRow .jqx-grid-group-cell {
    font-size: 12px !important;
}



    .ofGrid.ofSmallRow .jqx-grid-cell:not(.ofGridImageCell) > div:not(.ofImageButton):not(.ofIcon):not(.jqx-checkbox-dsgarctic),
    .ofGrid.ofSmallRow .jqx-grid-group-cell:not(.ofGridImageCell) > div:not(.ofImageButton):not(.ofIcon):not(.jqx-checkbox-dsgarctic) {
        margin-top: 2.6px !important;
    }



    .ofGrid.ofSmallRow .jqx-grid-cell .ofImageButton,
    .ofGrid.ofSmallRow .jqx-grid-group-cell .ofImageButton {
        width: 18px;
    }



    .ofGrid.ofSmallRow .jqx-grid-cell .ofIcon.ofGridColumnIcon,
    .ofGrid.ofSmallRow .jqx-grid-cell img,
    .ofGrid.ofSmallRow .jqx-grid-group-cell .ofIcon.ofGridColumnIcon,
    .ofGrid.ofSmallRow .jqx-grid-group-cell img {
        width: 12px !important;
        height: 12px !important;
        transform: translate(0%, 0%) !important;
        padding: 2px;
    }



.ofGrid.ofLargeRow .jqx-grid-cell,
.ofGrid.ofLargeRow .jqx-grid-group-cell {
    font-size: 18px !important;
}



    .ofGrid.ofLargeRow .jqx-grid-cell .ofImageButton,
    .ofGrid.ofLargeRow .jqx-grid-group-cell .ofImageButton {
        width: 40px;
    }



    .ofGrid.ofLargeRow .jqx-grid-cell .ofIcon.ofGridColumnIcon,
    .ofGrid.ofLargeRow .jqx-grid-cell img,
    .ofGrid.ofLargeRow .jqx-grid-group-cell .ofIcon.ofGridColumnIcon,
    .ofGrid.ofLargeRow .jqx-grid-group-cell img {
        width: 32px !important;
        height: 32px !important;
        transform: translate(0%, 0%) !important;
    }
 



.ofGrid .jqx-grid-cell:not(.jqx-grid-cell-filter-row) > div:not(.jqx-checkbox) div, .defaultGrid .jqx-grid-cell > div:not(.jqx-checkbox) span {
  padding: 0px 10px;
}

.ofGrid .jqx-widget-content .jqx-item-dsgarctic {
  font-size: 14px;
  font-weight: 400;
  color: var(--of-grey900);
  letter-spacing: 0;
  padding: 0;
}

ofGrid .jqx-widget-content > div > div[role="row"] {
  padding: 4px 0;
}

.ofGrid .jqx-widget-header-dsgarctic:not(.jqx-grid-columngroup-header) {
  border-bottom: none;
}

.ofGrid .jqx-grid-cell-selected {
  color: var(--of-primary500);
}

.ofGrid .jqx-rc-all.jqx-rc-all-dsgarctic.jqx-fill-state-normal.jqx-fill-state-normal-dsgarctic {
  font-family: var(--of-fontfamily) !important;
  background: var(--of-white500) !important;
  color: var(--of-grey900) !important;
  border-color: var(--of-grey300) !important;
}

  .ofGrid .jqx-rc-all.jqx-rc-all-dsgarctic.jqx-fill-state-normal.jqx-fill-state-normal-dsgarctic .jqx-grid-load {
    background-image: url("../Widget/Images/loading_2x.gif");
  }

.jqx-grid-cell .ofImageButton, .jqx-grid-group-cell .ofImageButton {
  width: 30px;
  display: inline-block;
}

  .jqx-grid-cell .ofImageButton svg, .jqx-grid-group-cell .ofImageButton svg {
    transform: translate(0%, 15%);
  }

  .jqx-grid-cell .ofImageButton.ofBoolColumnDiv, .jqx-grid-group-cell .ofImageButton.ofBoolColumnDiv {
    width: 100% !important;
    margin: 0 !important;
  }

/* Lookup Control styles Start*/

.oFLookupControlWindow .jqx-grid-column-filterbutton {
  padding: 0 10px;
}


.oFLookupControlWindow .ofGrid .jqx-checkbox-check-indeterminate.jqx-checkbox-check-indeterminate-dsgarctic {
  padding: 0px;
}

.oFLookupControlWindow .jqx-filter-input {
  padding-right: 6px;
}

.oFLookupControlWindow .filter.jqx-dropdownlist {
  position: absolute;
  right: 2px;
  top: 0;
  border-left: 0;
  background-color: #fff;
  border-color: #333;
}


.oFLookupControlWindow .filter .jqx-icon-arrow-down-dsgarctic {
  background-image: url('../JQWidgets/jqwidgets/styles/images/dropdownenabled16.png');
  background-repeat: no-repeat;
  background-position: center;
  margin-left: -1px;
}

.oFLookupControlWindow .filter.jqx-fill-state-hover .jqx-icon-arrow-down-dsgarctic {
  background-image: url('../JQWidgets/jqwidgets/styles/images/dropdownactive16.png');
}

.oFLookupControlWindow .jqx-grid-cell-filter-row-dsgarctic .jqx-input {
  height: 25px !important;
}

.oFLookupTextInputContainer .oFLookupPopUpItem > .jqx-icon-close.jqx-icon-close-dsgarctic {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 3px;
    cursor: pointer;
    opacity: 0.5;
    background-size: 100%;
}

/* Lookup Control styles End*/

/* CSS END: Grid CSS */


/* CSS START: Input Field Styles */

/* Read only styles Start */

.ofReadOnly .jqx-grid-cell-alt {
  background: none;
}

.ofReadOnly .jqx-grid-cell-hover {
  cursor: auto;
}

.ofReadOnly .jqx-widget-content .jqx-item-dsgarctic {
  font-size: 14px;
}

.ofReadOnly .jqx-grid-column-header-dsgarctic {
  font-size: 12px;
  border-color: #aaaaaa;
  color: #555555;
}

.ofReadOnly .jqx-grid-cell-dsgarctic, .ofReadOnly .jqx-grid-cell-hover-dsgarctic {
  font-size: 14px;
  border-color: #aaaaaa !important;
}

.ofReadOnly.jqx-widget-content-dsgarctic.jqx-grid-dsgarctic {
  border-color: #aaaaaa;
}

/* Read only styles End */

/* Date Period Selector styles Start*/

.ofDatePeriodSelector .jqx-combobox-dsgarctic .jqx-icon-arrow-down-dsgarctic {
  display: none;
}

.ofDatePeriodSelector.ofDisabled .jqx-icon-calendar.jqx-icon-calendar-dsgarctic {
  background-image: none;
}

/* Date Period Selector styles End*/

/* Listbox styles Start*/

.ofListBox.jqx-widget-content {
  border-color: var(--of-input-border);
}

.jqx-listitem-state-selected .ofListBoxLabel .ofListBoxText {
  color: var(--of-primary500);
}

.jqx-listitem-state-hover .ofListBoxLabel .ofListBoxText {
  color: var(--of-grey900);
}

.ofDisabled .ofListBox div[role='option'] div[class*='jqx-checkbox'] {
  opacity: .55;
  background: var(--of-grey150);
}

  .ofDisabled .ofListBox div[role='option'] div[class*='jqx-checkbox'] > div {
    cursor: unset !important;
  }

.jqx-listitem-element > .chkbox + .jqx-listitem-state-normal {
  margin-left: 10px;
  padding-top: 5px !important;
}

.jqx-listbox[aria-multiselectable="true"] .jqx-listitem-element {
  margin-left: 5px;
}

  .jqx-listbox[aria-multiselectable="true"] .jqx-listitem-element > span.jqx-item {
    padding: 5px;
  }

  .jqx-listbox[aria-multiselectable="true"] .jqx-listitem-element > .chkbox {
    margin-top: 3px !important;
  }

.jqx-listbox-container {
  z-index: 18500;
}

.jqx-listbox.jqx-popup {
  z-index: 1000000 !important;
}

/* Listbox styles End*/

.jqx-input-disabled-dsgarctic.jqx-widget-content-dsgarctic:not(.jqx-grid-dsgarctic), div.ofInput:disabled, input.ofInput:disabled {
  background: var(--of-grey150);
  border-color: var(--of-grey300);
}

.ofTextArea.jqx-panel-dsgarctic {
  padding-bottom: 5px; /*Change the padding as per UX requirements*/
}

/*password showing is same as number input, ofPassword class added to override the above override*/
input[type="text"].jqx-widget-dsgarctic.jqx-widget-content-dsgarctic.jqx-input-dsgarctic.jqx-rc-all-dsgarctic.ofPassword {
  padding-left: 5px !important;
}


.colorPickerContent .jqx-icon-arrow-down-dsgarctic {
  background-image: url('../JQWidgets/jqwidgets/styles/images/dropdownenabled14.png');
  background-repeat: no-repeat;
  background-position: center;
  margin-left: -1px;
  position: absolute;
  right: 5px;
}

.colorPickerContent.jqx-dropdownlist-state-normal-dsgarctic {
    border-color: var(--of-input-border);
    font-size: 14px;
}

  .colorPickerContent.jqx-fill-state-disabled{
    border-color: var(--of-grey300);
  }

  .colorPickerContent.jqx-fill-state-disabled .jqx-icon-arrow-down-dsgarctic, .colorPickerContent .jqx-icon-arrow-down-dsgarctic:disabled {
    background-image: none;
    /*background-color: var(--of-grey150);*/
  }

  .colorPickerContent.jqx-dropdownlist-state-selected-dsgarctic .jqx-icon-arrow-down-dsgarctic {
    background-image: url('../JQWidgets/jqwidgets/styles/images/dropdownactive14_up.png');
    background-repeat: no-repeat;
    background-position: center;
    margin-left: -1px;
  }

  .colorPickerContent.jqx-dropdownlist-state-hover-dsgarctic:not(.jqx-dropdownlist-state-selected-dsgarctic) .jqx-icon-arrow-down-dsgarctic {
    background-image: url('../JQWidgets/jqwidgets/styles/images/dropdownenabled14.png');
    background-repeat: no-repeat;
    background-position: center;
    margin-left: -1px;
  }


.colorPickerContent .jqx-dropdownlist-content {
  padding-left: 0px;
}

.colorPickerContent .jqx-icon-arrow-down {
  width: 14px;
}

input[type="tel"].jqx-input-dsgarctic {
  padding-left: 5px !important;
  /*font-size: 14px;*/
  padding-right: 5px;
}


/* File Upload Styles End */

/* Combobox Start */

.ofComboBox .jqx-icon-close-dsgarctic, .ofComboBox .jqx-combobox-multi-item-dsgarctic.jqx-fill-state-normal-dsgarctic:hover .jqx-icon-close-dsgarctic {
  background-image: url('../JQWidgets/jqwidgets/styles/images/closeenabled8.png');
}

.ofComboBox.jqx-combobox-state-disabled .jqx-icon-close-dsgarctic {
  background-image: url('../JQWidgets/jqwidgets/styles/images/closedisabled8.png');
}

.ofComboBox .jqx-button.jqx-fill-state-normal-dsgarctic {
  background: var(--of-grey200);
}

.ofComboBox.jqx-combobox-state-disabled .jqx-combobox-content-disabled,
.ofComboBox.jqx-combobox-state-disabled .jqx-combobox-content-disabled .jqx-button.jqx-fill-state-normal-dsgarctic,
.ofComboBox.jqx-combobox-state-disabled .jqx-combobox-content-disabled + .jqx-fill-state-normal,
.ofComboBox.jqx-combobox-state-disabled .jqx-combobox-content-disabled input {
  background: var(--of-grey150);
}

.ofComboBox .jqx-combobox-multi-item-dsgarctic.jqx-fill-state-normal-dsgarctic {
  font-size: 14px;
  border: none;
  color: var(--of-grey900);
  border-radius: 3px;
  height: 17px;
}

  .ofComboBox .jqx-combobox-multi-item-dsgarctic.jqx-fill-state-normal-dsgarctic:hover {
    background-color: #EBF8FF;
  }

.ofComboBox .jqx-combobox-multi-item-dsgarctic > div {
  padding-left: 5px;
}

/*override with color */
.jqx-listitem-element {
  color: var(--of-grey900);
}

.ofComboBox .jqx-combobox-content-disabled .jqx-combobox-multi-item.jqx-combobox-multi-item-dsgarctic {
  border-color: none;
  border-style: none;
  cursor: default;
}

  .ofComboBox .jqx-combobox-content-disabled .jqx-combobox-multi-item.jqx-combobox-multi-item-dsgarctic a:link {
    cursor: default;
  }

  .ofComboBox .jqx-combobox-content-disabled
  .jqx-combobox-multi-item.jqx-combobox-multi-item-dsgarctic
  .jqx-icon-close.jqx-icon-close-dsgarctic {
    background-image: none;
    cursor: default;
  }

.ofComboBox .jqx-combobox-content.jqx-combobox-content-disabled
.jqx-combobox-multi-item.jqx-combobox-multi-item-dsgarctic
.jqx-icon-close.jqx-icon-close-dsgarctic
.ofSeparator {
  visibility: visible;
}

.ofComboBox .jqx-combobox-content
.jqx-combobox-multi-item.jqx-combobox-multi-item-dsgarctic
.jqx-icon-close.jqx-icon-close-dsgarctic
.ofSeparator {
  visibility: hidden;
}

.ofComboBox .jqx-combobox-content {
  overflow-x: auto;
}
/* Combobox End */
/* Unit Selector Start*/
.ofUnitSelector .jqx-combobox-input {
  padding: 0px 4px !important;
}

.ofUnitSelector.jqx-combobox-state-disabled .jqx-combobox-arrow-normal {
  display: none;
}

.ofNumberInput.jqx-fill-state-disabled-dsgarctic:has(.jqx-input-dsgarctic) .jqx-input-content-dsgarctic {
  width: calc(100% - 2px) !important;
}

.ofNumberInput:not(.jqx-fill-state-disabled-dsgarctic):has(.jqx-input-dsgarctic) .jqx-input-content-dsgarctic {
  width: calc(100% - 20px) !important;
}

.ofUnitSelector.jqx-combobox-state-disabled .jqx-combobox-content-disabled {
  width: 100% !important;
}

.ofUnitSelector.jqx-combobox-state-disabled .jqx-combobox-content-disabled .jqx-combobox-input {
  text-align: center;
}
/* Unit Selector End*/

/* CSS END: Input Field Styles */


/* CSS START: Window Styles */

.ofWindow .jqx-window-content {
  padding: 15px 15px 15px 15px;
}

.ofWindow .ofHeader.jqx-widget-header-dsgarctic.jqx-Window-header-dsgarctic {
  border: thin solid #aaaaaa;
  border-bottom: none;
}

.ofWindow.jqx-docking .jqx-window-close-button-background-dsgarctic {
  margin: -2px 8px 0 10px !important;
}

.ofWindow.jqx-docking .jqx-window-dsg-minimax-button-background-dsgarctic {
  margin: -2px 24px 0 0 !important;
}

.ofWindow.jqx-popup-dsgarctic {
  border: none;
  box-shadow: 0px 0px 10px 2px #555555;
}

.ofWindow .jqx-window-content {
  padding-bottom: 0px !important;
}

.jqx-docking-panel .ofWindow.ofDockingWindow .ofWindowContent.jqx-window-content {
  padding: 0px !important;
}

.ofWindow.ofDockingWindow.jqx-popup-dsgarctic {
  box-shadow: none !important;
  border: 1px solid var(--of-grey100);
}

.ofWindow.jqx-docking > .ofDockingWindow {
  margin-top: -15px !important;
  margin-left: -15px !important;
}

.ofWindow:not(.jqx-popup-dsgarctic) .ofHeader {
  padding-top: 0 !important;
}

.ofWindow.jqx-docking .ofHeader {
  padding-top: 0px !important;
}

#freshWidgetContainer.ofWindow .jqx-window-content {
  box-sizing: border-box!important;
  width: auto!important;
}


/* CSS END: Window Styles */
/* CSS START: Section Styles*/
.ofReadOnlySection .sectionBody.jqx-widget-content-dsgarctic:not(.jqx-grid-dsgarctic):not(.jqx-combobox-content-disabled) {
  border: 1px solid var(--of-grey300);
  border-top: none;
  border-bottom: 0px;
}

div.ofReadOnlySection .jqx-grid-cell-hover, div.ofReadOnlySection .jqx-listitem-state-hover, div.ofReadOnlySection .jqx-calendar-cell-hover {
  background-color: #fff !important;
  background: none;
  border-style: solid;
  border-width: 0 1px 1px 0;
  border-color: #aaaaaa;
}

.ofReadOnlyHeader.jqx-expander-header-dsgarctic {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  text-shadow: none;
  background: white;
  padding: 3px 0 3px 0;
}

.jqx-splitter .ofSection .ofHeader, .jqx-splitter .ofSection .sectionBody {
  border: none!important;
}

.jqx-splitter > .ofSection.ofPureSection{
  border: none!important;
}

#__MainContentBody > .jqx-splitter {
  margin-bottom: 15px;
}


.ofSection .ofHeader.jqx-widget-header-dsgarctic.jqx-expander-header-dsgarctic:not(.jqx-expander-header-expanded-dsgarctic) {
  border: 1px solid var(--of-grey300);
}

.ofSection .ofHeader.jqx-widget-header-dsgarctic.jqx-expander-header-dsgarctic.jqx-fill-state-focus-dsgarctic:not(.jqx-expander-header-expanded-dsgarctic) {
  border: 1px solid var(--of-grey300);
}

.ofSection .ofHeader.jqx-widget-header-dsgarctic.jqx-expander-header-dsgarctic.jqx-expander-header-expanded-dsgarctic {
  border: 1px solid var(--of-grey300);
  border-bottom: none;
  align-items: normal;
}

  .ofSection .ofHeader.jqx-widget-header-dsgarctic.jqx-expander-header-dsgarctic.jqx-expander-header-expanded-dsgarctic.jqx-fill-state-focus-dsgarctic {
    border: 1px solid var(--of-grey300);
    border-bottom: none;
  }

.ofSection .jqx-expander-content-dsgarctic.jqx-expander-content-bottom-dsgarctic {
  border: 1px solid var(--of-grey300);
  border-top: none;
}

.ofReadOnlySection .jqx-expander-content-dsgarctic.jqx-expander-content-bottom-dsgarctic {
  border: none;
}

.ofHeader.jqx-widget-header-dsgarctic.jqx-expander-header-dsgarctic.jqx-fill-state-focus-dsgarctic + .jqx-expander-content-dsgarctic.jqx-expander-content-bottom-dsgarctic {
  border: 1px solid var(--of-grey300);
  border-top: none;
}

.ofHeader > .jqx-expander-arrow.jqx-expander-arrow-dsgarctic:hover, .ofWindow .ofHeader > .jqx-window-close-button-background:hover, .ofIconHover:hover {
  fill: var(--of-accent400);
  border: 1px solid var(--of-white500);
  background-color: var(--of-grey200);
  border-radius: 4px;
}

.ofHeader > .jqx-expander-arrow.jqx-expander-arrow-dsgarctic, .ofWindow .ofHeader > .jqx-window-close-button-background, .ofIconHover {
  fill: var(--of-accent400);
  border: 1px solid transparent;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 6px;
  padding-left: 6px !important;
  margin: auto 5px auto 0px !important;
}

.ofSectionHeaderText, .ofWindow:not(.jqx-popup-dsgarctic) > .ofHeader > div, .ofWindow:not(.jqx-popup-dsgarctic) .ofHeader > div {
  margin-top: 7px;
}

.jqx-expander-header-expanded .oFChildSpan {
  max-width: none;
}

.ofSection .ofHeader.jqx-widget-header-dsgarctic.jqx-expander-header-dsgarctic.jqx-expander-header-expanded-dsgarctic .ofSection_header .ofSectionHeaderSubtitle {
  display: block;
  line-height: initial;
}

.ofSection .ofHeader.jqx-widget-header-dsgarctic.jqx-expander-header-dsgarctic.jqx-expander-header-expanded-dsgarctic .ofSection_header .ofSectionHeaderSubtitle:first-child {
  padding-left: 0px;
}

.ofSection .ofHeader.jqx-widget-header-dsgarctic.jqx-expander-header-dsgarctic.jqx-expander-header-expanded-dsgarctic .ofSection_header .ofSectionHeaderSubtitleContainer {
  padding-left: 0px;
}

.ofSection .ofHeader.jqx-widget-header-dsgarctic.jqx-expander-header-dsgarctic.jqx-expander-header-expanded-dsgarctic:has(.ofSectionHeaderSubtitle) {
  height: auto !important;
}

.ofSection .ofHeader.jqx-widget-header-dsgarctic.jqx-expander-header-dsgarctic.jqx-expander-header-expanded-dsgarctic .ofSection_header .ofSectionHeaderText:has(.ofSectionHeaderSubtitle) {
  display: block;
}

.ofSection .ofHeader.jqx-widget-header-dsgarctic.jqx-expander-header-dsgarctic.jqx-expander-header-expanded-dsgarctic .ofSection_header .ofSectionHeaderText .ofSectionHeaderSubtitleContainer .ofSectionHeaderSubtitle .ofSectionHeaderSubtitleLabel {
  font-size: 12px;
  color: var(--of-grey700);
} 

  /* Saved Search Styles Start */
  .ofSavedSearch .jqx-combobox-dsgarctic {
    margin-top: 5px;
  }
/* Saved Search Styles End */

/* Tab Section Styles Start */
.ofTabSections .jqx-tabs-headerWrapper {
  background: var(--of-grey100);
  border-color: var(--of-grey300);
}

.ofTabSections .jqx-tabs-titleWrapper {
  padding-top: 2px;
}

.ofTabSections > div > ul > .jqx-tabs-title.jqx-tabs-title-dsgarctic[hideTab*=true] {
  display: none !important;
}

.ofTabSections > div > ul > .jqx-tabs-title.jqx-tabs-title-dsgarctic {
  background: var(--of-white500);
  color: var(--of-primary500);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  max-width: 150px;
  font-size: 14px;
  font-weight: 300;
  padding-left: 10px;
  padding-right: 10px;
  margin-right: 5px;
  border-color: var(--of-grey300);
  height: 35px !important;
}

.ofTabSections > div > ul > .jqx-tabs-title-disable {
  background: var(--of-grey100);
  color: #555555;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  max-width: 150px;
}

.ofTabSections > div > ul > .jqx-tabs-title-selected-top.jqx-tabs-title-dsgarctic {
  background: var(--of-white500);
  border-bottom-color: var(--of-white500);
  border-left-color: var(--of-grey300);
  border-right-color: var(--of-grey300);
  border-top-color: var(--of-grey300);
  color: var(--of-primary500);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  max-width: 150px;
  font-weight: 500;
}

.ofTabSections .jqx-tabs-content {
    border-left: 1px solid var(--of-grey300);
    border-right: 1px solid var(--of-grey300);
    border-bottom: 1px solid var(--of-grey300);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-color: var(--of-grey300) !important;
}

  .ofTabSections .jqx-tabs-content > .ofSection > .ofHeader {
    padding-top: 10px !important;
  }

.ofTabSections.jqx-tabs {
  border: none;
  margin-bottom: 15px;
}

.ofRendererTabs.ofTabSections > .jqx-tabs-content > .ofSection > .ofHeader {
  display: none;
}

.ofRendererTabs.ofTabSections > .jqx-tabs-content > .ofSection > .sectionBody > .ofSection > .ofHeader {
  border: none;
  padding-top: 0 !important;
}

.ofRendererTabs.ofTabSections > .jqx-tabs-content > .ofSection > .sectionBody > .ofSection > .sectionBody {
  border: none;
}

.ofTabSections .jqx-tabs-titleContentWrapper {
    line-height: 35px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tab Sections Styles End*/

/* CSS END: Section Styles */


/* CSS START: Filter Bar Controls Styles */
/* ComboBox Start */
  .ofPageFilterHeader .ofComboBox.jqx-fill-state-focus,
  .ofPageFilterHeader .ofComboBox .jqx-widget-content:focus,
  .ofPageFilterHeader .ofComboBox.jqx-fill-state-focus .jqx-combobox-arrow-normal {
    background-color: var(--of-white500);
  }
/* Combobox End */

/* Input Controls Start */
.ofPageFilterHeader .ofInput,
.ofPageFilterHeader .ofInput .jqx-widget-content,
.ofPageFilterHeader .ofInput .jqx-fill-state-normal {
  background-color: #eeeeee;
}

  .ofPageFilterHeader .ofInput.jqx-fill-state-focus,
  .ofPageFilterHeader .ofInput.jqx-fill-state-focus .jqx-widget-content,
  .ofPageFilterHeader .ofInput.jqx-fill-state-focus .jqx-fill-state-normal,
  .ofPageFilterHeader .ofInput.jqx-fill-state-focus .jqx-fill-state-pressed {
    background-color: var(--of-white500);
  }
/* Input Controls End */

/*  OpenButtonPanel Start */
.OfOpenButtonPanel_Content .ofComboBox,
.OfOpenButtonPanel_Content .ofComboBox .jqx-widget-content,
.OfOpenButtonPanel_Content .ofComboBox .jqx-combobox-arrow-normal {
  background-color: var(--of-white500);
}

.OfOpenButtonPanel_Content .ofInput,
.OfOpenButtonPanel_Content .ofInput .jqx-widget-content,
.OfOpenButtonPanel_Content .ofInput .jqx-fill-state-normal {
  background-color: var(--of-white500);
}
/* OpenButtonPanel End */

/* CSS END: Filter Bar Controls Styles */


/* CSS START: Tile Docking Styles */

.ofTileDocking .ofWindow .jqx-window-content {
  overflow: hidden;
}

.ofTileDocking .jqx-docking-panel {
  margin-left: 0px !important;
  min-height: 50px;
  padding: 0px 0px 10px 0px;
}

.ofTileDocking .ofWindow .jqx-window-header {
  display: none !important;
  height: 0px !important;
}

.ofTileDocking.ofTileLimitedSpace .ofWindow .jqx-resize .ofTile {
  padding: 5px 15px 7px 15px !important;
}

.ofTileLimitedSpace .jqx-docking-panel {
  padding: 0px !important;
  min-height: 50px !important;
}

.ofTileDocking .jqx-docking-panel.lastinrow {
  margin-right: -15px;
}
/* CSS END: Tile Docking Styles */

/* Login router and IDS */

.ofLoginPage input[type="text"].jqx-input-dsgarctic, .ofLoginPage input[type="password"].jqx-input-dsgarctic, .ofLoginPage input[type="text"].jqx-widget-content-dsgarctic, .ofLoginPage textarea[type="textarea"].jqx-widget-content-dsgarctic, .ofLoginPage textarea.jqx-input-dsgarctic {
  font-size: 14px;
  border-radius: 3px;
}

.ofLoginPage .input[type='button'].jqx-button-dsgarctic {
  padding: 10px 0;
}
/* END of Login router and IDS */