/*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;
}

.jqx-checkbox, .ofSwitch {
  border: 1px solid transparent !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, .jqx-item-dsgarctic.jqx-calendar-cell-selected {
  background-color: var(--of-grey100) !important; /* Change to --of-grey100 */
  background: none;
  border-radius: 0px;
  color: var(--of-secondary500); /* Change to --of-secondary500 */
}

.ofMaxMenu .ofTeamSelector .jqx-combobox {
  border-color: #d6d6d6;
}

.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*/

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: ofButtonClick 0.15s linear;
}

@keyframes ofButtonClick {
  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;
  }
}

input [type="button"]:not([disabled]):not(.ofActive),
input [type="submit"]:not([disabled]):not(.ofActive) {
  box-shadow: 0px 8px 8px rgba(0,0,0,0.24);
}

/* Primary Button styles End*/

/* Secondary Button styles Start */

.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 {
  border-color: var(--of-grey400);
  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: ofSecondaryButtonClick 0.15s linear;
}

@keyframes ofSecondaryButtonClick {
  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 {
  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 {
  margin-left: 10px;
}


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



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



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



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



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



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



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



  .ofGrid.ofLargeRow .jqx-grid-cell .ofIcon.ofGridColumnIcon,
  .ofGrid.ofLargeRow .jqx-grid-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 {
  width: 30px;
  display: inline-block;
}

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

  .jqx-grid-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;
}

/* 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-grey700);
}

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

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

.ofListBox .jqx-listitem-state-normal {
  border-bottom: 1px var(--of-white500) solid;
  border-top: 1px;
  border-left: 1px;
}

.ofListBox .jqx-listitem-state-hover {
  border-bottom: 1px #EBF8FF solid;
  border-top: 1px;
  border-left: 1px;
}

.ofListBox .jqx-listitem-state-selected {
  border-bottom: 1px var(--of-accent100) solid;
  border-top: 1px;
  border-left: 1px;
}

.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: 9px !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/dropdownenabled16.png');
  background-repeat: no-repeat;
  background-position: center;
  margin-left: -1px;
  position: absolute;
  right: 5px;
}

.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/dropdownactive16_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/dropdownenabled16.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 Start */

.ofFileUpload input[type=button].browseFile.jqx-button {
  /*height: 30px !important;*/ /* Browse button Height because browse button and file input field sharing same input height*/
  border-radius: 1px;
}

/* THIS SHOULD NOT BE A STYLE. PLEASE DO NOT USE THIS */
#uploadFile.jqx-button {
  min-width: 64px;
  border-radius: 1px;
}

/* 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-white500);
}

.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-color: #A8A8A8;
  color: var(--of-grey900);
  border-radius: 3px;
  height: 20px;
}

  .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;
}

/* Combobox 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;
}

/* 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;
}

.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;
}

  .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;
}

/* 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 {
  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);
}

.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 {
  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,
.ofPageFilterHeader .ofComboBox .jqx-widget-content,
.ofPageFilterHeader .ofComboBox .jqx-combobox-arrow-normal {
  background-color: #eeeeee;
}

  .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 */