@charset "UTF-8";
:root {
  --oj-palette-danger-rgb-10: 255, 248, 247;
  --oj-palette-danger-rgb-20: 255, 241, 239;
  --oj-palette-danger-rgb-30: 255, 235, 232;
  --oj-palette-danger-rgb-40: 255, 217, 211;
  --oj-palette-danger-rgb-50: 255, 193, 184;
  --oj-palette-danger-rgb-60: 255, 157, 144;
  --oj-palette-danger-rgb-70: 255, 134, 117;
  --oj-palette-danger-rgb-80: 254, 104, 84;
  --oj-palette-danger-rgb-90: 236, 79, 58;
  --oj-palette-danger-rgb-100: 214, 59, 37;
  --oj-palette-danger-rgb-110: 195, 53, 34;
  --oj-palette-danger-rgb-120: 179, 49, 31;
  --oj-palette-danger-rgb-130: 170, 34, 34;
  --oj-palette-danger-rgb-140: 143, 39, 25;
  --oj-palette-danger-rgb-150: 124, 34, 22;
  --oj-palette-danger-rgb-160: 102, 28, 18;
  --oj-palette-danger-rgb-170: 86, 24, 15;
  --oj-palette-warning-rgb-10: 254, 249, 242;
  --oj-palette-warning-rgb-20: 253, 242, 229;
  --oj-palette-warning-rgb-30: 252, 237, 220;
  --oj-palette-warning-rgb-40: 249, 221, 188;
  --oj-palette-warning-rgb-50: 246, 199, 146;
  --oj-palette-warning-rgb-60: 240, 169, 87;
  --oj-palette-warning-rgb-70: 235, 150, 50;
  --oj-palette-warning-rgb-80: 225, 128, 18;
  --oj-palette-warning-rgb-90: 198, 113, 14;
  --oj-palette-warning-rgb-100: 172, 99, 12;
  --oj-palette-warning-rgb-110: 156, 89, 11;
  --oj-palette-warning-rgb-120: 143, 82, 10;
  --oj-palette-warning-rgb-130: 129, 73, 9;
  --oj-palette-warning-rgb-140: 114, 65, 8;
  --oj-palette-warning-rgb-150: 99, 56, 7;
  --oj-palette-warning-rgb-160: 81, 47, 6;
  --oj-palette-warning-rgb-170: 69, 39, 5;
  --oj-palette-success-rgb-10: 244, 252, 235;
  --oj-palette-success-rgb-20: 235, 248, 222;
  --oj-palette-success-rgb-30: 228, 245, 211;
  --oj-palette-success-rgb-40: 207, 235, 179;
  --oj-palette-success-rgb-50: 177, 221, 136;
  --oj-palette-success-rgb-60: 138, 201, 79;
  --oj-palette-success-rgb-70: 125, 186, 69;
  --oj-palette-success-rgb-80: 111, 169, 57;
  --oj-palette-success-rgb-90: 94, 148, 43;
  --oj-palette-success-rgb-100: 80, 130, 35;
  --oj-palette-success-rgb-110: 73, 118, 32;
  --oj-palette-success-rgb-120: 67, 107, 29;
  --oj-palette-success-rgb-130: 60, 96, 26;
  --oj-palette-success-rgb-140: 53, 86, 23;
  --oj-palette-success-rgb-150: 46, 73, 20;
  --oj-palette-success-rgb-160: 38, 61, 16;
  --oj-palette-success-rgb-170: 31, 51, 14;
  --oj-palette-info-rgb-10: 246, 250, 252;
  --oj-palette-info-rgb-20: 237, 246, 249;
  --oj-palette-info-rgb-30: 228, 241, 247;
  --oj-palette-info-rgb-40: 208, 229, 238;
  --oj-palette-info-rgb-50: 180, 213, 225;
  --oj-palette-info-rgb-60: 143, 191, 208;
  --oj-palette-info-rgb-70: 121, 177, 198;
  --oj-palette-info-rgb-80: 95, 162, 186;
  --oj-palette-info-rgb-90: 65, 144, 172;
  --oj-palette-info-rgb-100: 34, 126, 158;
  --oj-palette-info-rgb-110: 14, 114, 151;
  --oj-palette-info-rgb-120: 0, 104, 140;
  --oj-palette-info-rgb-130: 2, 94, 126;
  --oj-palette-info-rgb-140: 4, 83, 111;
  --oj-palette-info-rgb-150: 6, 72, 95;
  --oj-palette-info-rgb-160: 6, 60, 78;
  --oj-palette-info-rgb-170: 5, 50, 66;
  --oj-palette-brand-rgb-10: 246, 250, 252;
  --oj-palette-brand-rgb-20: 237, 246, 249;
  --oj-palette-brand-rgb-30: 228, 241, 247;
  --oj-palette-brand-rgb-40: 208, 229, 238;
  --oj-palette-brand-rgb-50: 180, 213, 225;
  --oj-palette-brand-rgb-60: 143, 191, 208;
  --oj-palette-brand-rgb-70: 121, 177, 198;
  --oj-palette-brand-rgb-80: 95, 162, 186;
  --oj-palette-brand-rgb-90: 65, 144, 172;
  --oj-palette-brand-rgb-100: 34, 126, 158;
  --oj-palette-brand-rgb-110: 14, 114, 151;
  --oj-palette-brand-rgb-120: 0, 104, 140;
  --oj-palette-brand-rgb-130: 2, 94, 126;
  --oj-palette-brand-rgb-140: 4, 83, 111;
  --oj-palette-brand-rgb-150: 6, 72, 95;
  --oj-palette-brand-rgb-160: 6, 60, 78;
  --oj-palette-brand-rgb-170: 5, 50, 66;
  --oj-palette-neutral-rgb-0: 255, 255, 255;
  --oj-palette-neutral-rgb-10: 251, 249, 248;
  --oj-palette-neutral-rgb-20: 245, 244, 242;
  --oj-palette-neutral-rgb-30: 241, 239, 237;
  --oj-palette-neutral-rgb-40: 228, 225, 221;
  --oj-palette-neutral-rgb-50: 212, 207, 202;
  --oj-palette-neutral-rgb-60: 188, 182, 177;
  --oj-palette-neutral-rgb-70: 174, 168, 162;
  --oj-palette-neutral-rgb-80: 158, 152, 146;
  --oj-palette-neutral-rgb-90: 139, 133, 128;
  --oj-palette-neutral-rgb-100: 123, 117, 112;
  --oj-palette-neutral-rgb-110: 111, 105, 100;
  --oj-palette-neutral-rgb-120: 101, 95, 91;
  --oj-palette-neutral-rgb-130: 92, 86, 81;
  --oj-palette-neutral-rgb-140: 81, 76, 71;
  --oj-palette-neutral-rgb-150: 71, 66, 62;
  --oj-palette-neutral-rgb-160: 58, 54, 50;
  --oj-palette-neutral-rgb-170: 49, 45, 42;
  --oj-palette-neutral-rgb-180: 32, 30, 28;
  --oj-palette-neutral-rgb-190: 22, 21, 19;
  --oj-palette-neutral-rgb-200: 00, 00, 00;
  --oj-palette-dvt-rgb-1: 36, 93, 99;
  --oj-palette-dvt-rgb-2: 222, 127, 17;
  --oj-palette-dvt-rgb-3: 95, 185, 181;
  --oj-palette-dvt-rgb-4: 78, 65, 55;
  --oj-palette-dvt-rgb-5: 160, 201, 139;
  --oj-palette-dvt-rgb-6: 180, 114, 130;
  --oj-palette-dvt-rgb-7: 131, 64, 30;
  --oj-palette-dvt-rgb-8: 158, 127, 204;
  --oj-palette-dvt-rgb-9: 251, 194, 106;
  --oj-palette-dvt-rgb-10: 88, 49, 110;
  --oj-palette-dvt-rgb-11: 95, 162, 186;
  --oj-palette-dvt-rgb-12: 49, 122, 69;
}

/* This padding is needed to bring the text field below the label, so that the label and the text inside the text field don't overlap. */
/* This padding is needed to bring the text field below the label, so that the label and the text inside the text field don't overlap. */
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  /* autoprefixer: ignore next */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/* helpers
----------------------------------*/
[data-bind*=ojComponent]:not(.oj-component-initnode) {
  visibility: hidden;
}

.oj-theme-json {
  font-family: '{"name":"iedep","targetPlatform":"web","behavior":"alta","jetReleaseVersion":"v18.0.9"}';
}

.oj-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.oj-helper-clearfix:before, .oj-helper-clearfix:after {
  content: " ";
  display: table;
}
.oj-helper-clearfix:after {
  clear: both;
}

/* Used by the framework's support for detecting resize */
.oj-helper-detect-expansion,
.oj-helper-detect-contraction {
  position: absolute;
  overflow: hidden;
  visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  direction: ltr;
}

.oj-helper-hidden {
  display: none !important;
}

.oj-helper-inline-block {
  display: inline-block !important;
}

.oj-helper-tabular-nums {
  font-variant-numeric: tabular-nums !important;
}

.oj-helper-proportional-nums {
  font-variant-numeric: proportional-nums !important;
}

.oj-helper-overflow-wrap-anywhere {
  overflow-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}

.oj-helper-hyphens-auto {
  hyphens: auto !important;
}

.oj-helper-text-align-center {
  text-align: center;
}

/* aligns text left by default, aligns right when dir="rtl" is set on html element
   NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-text-align-start {
  text-align: left !important;
}
html[dir=rtl] .oj-helper-text-align-start {
  text-align: right !important;
}

/* aligns text right by default, aligns left when dir="rtl" is set on html element
   NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-text-align-end {
  text-align: right !important;
}
html[dir=rtl] .oj-helper-text-align-end {
  text-align: left !important;
}

/* Sets the left and right margins to auto */
.oj-helper-margin-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Sets the start margin, equivalent to setting
   margin-left: auto in ltr languages and margin-right: auto in rtl languages */
html:not([dir=rtl]) .oj-helper-margin-start-auto {
  margin-left: auto;
}
html[dir=rtl] .oj-helper-margin-start-auto {
  margin-right: auto;
}

/* Sets the end margin, equivalent to setting
   margin-right: auto in ltr languages and margin-left: auto in rtl languages */
html:not([dir=rtl]) .oj-helper-margin-end-auto {
  margin-right: auto;
}
html[dir=rtl] .oj-helper-margin-end-auto {
  margin-left: auto;
}

/* aligns text right
   NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-text-align-right {
  text-align: right !important;
}

/* aligns text left
   NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-text-align-left {
  text-align: left !important;
}

/* Used by the ojModule binding on a DIV that will hold cached Views */
.oj-helper-module-cache {
  position: absolute;
  display: none;
}

.oj-focus-config {
  font-family: '{"focusHighlightPolicy":"nonPointer"}';
}

/* justifies flex content start
   NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-justify-content-flex-start {
  justify-content: flex-start !important;
}

/* justifies flex content end
   NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-justify-content-flex-end {
  justify-content: flex-end !important;
}

/* justifies flex content center
   NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-justify-content-center {
  justify-content: center !important;
}

/* justifies flex content space between
   NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-justify-content-space-between {
  justify-content: space-between !important;
}

/* justifies flex content space around
   NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-justify-content-space-around {
  justify-content: space-around !important;
}

/* justifies flex content right
   NOTE: this uses !important, it can therefore be used to override a previously set value */
html:not([dir=rtl]) .oj-helper-justify-content-right {
  justify-content: flex-end !important;
}
html[dir=rtl] .oj-helper-justify-content-right {
  justify-content: flex-start !important;
}

/* justifies flex content left
   NOTE: this uses !important, it can therefore be used to override a previously set value */
html:not([dir=rtl]) .oj-helper-justify-content-left {
  justify-content: flex-start !important;
}
html[dir=rtl] .oj-helper-justify-content-left {
  justify-content: flex-end !important;
}

.oj-helper-border-box {
  box-sizing: border-box !important;
}

.oj-helper-content-box {
  box-sizing: border-content !important;
}

:root {
  --oj-brand-color-light5: rgb(232.23, 243.12, 249.96);
  --oj-brand-color-light4: rgb(224.64, 239.16, 248.28);
  --oj-brand-color-light3: rgb(214.52, 233.88, 246.04);
  --oj-brand-color-light2: rgb(179.1, 215.4, 238.2);
  --oj-brand-color-light1: rgb(118.38, 183.72, 224.76);
  --oj-brand-color: #027bc7;
  --oj-brand-color-dark1: rgb(1.6, 98.4, 159.2);
  --oj-brand-color-dark2: rgb(1.2, 73.8, 119.4);
  --oj-neutral-color1: hsl(203, 2%, 100%);
  --oj-neutral-color2: hsl(203, 2%, 99%);
  --oj-neutral-color3: hsl(203, 2%, 98%);
  --oj-neutral-color4: hsl(203, 2%, 97%);
  --oj-neutral-color5: hsl(203, 2%, 95%);
  --oj-neutral-color6: hsl(203, 2%, 93%);
  --oj-neutral-color7: hsl(203, 2%, 90%);
  --oj-neutral-color8: hsl(203, 2%, 88%);
  --oj-neutral-color9: hsl(203, 2%, 80%);
  --oj-neutral-color10: hsl(203, 2%, 78%);
  --oj-neutral-color11: hsl(203, 2%, 70%);
  --oj-neutral-color12: hsl(203, 2%, 55%);
  --oj-neutral-color13: hsl(203, 2%, 45%);
  --oj-neutral-color14: hsl(203, 2%, 30%);
  --oj-neutral-color15: hsl(203, 2%, 20%);
  --oj-neutral-color16: hsl(203, 2%, 15%);
  --oj-neutral-color17: hsl(203, 2%, 0%);
  --oj-contrast-background-1-color: hsl(203, 2%, 20%);
  --oj-font-size: 1rem;
  --oj-smallest-font-size: 0.78571rem;
  --oj-small-font-size: 0.85714rem;
  --oj-medium-font-size: 1.14286rem;
  --oj-large-font-size: 1.28571rem;
  --oj-largest-font-size: 1.42857rem;
  --oj-text-color: hsla(0, 0%, 0%, 0.8);
  --oj-primary-text-color: hsl(0, 0%, 0%);
  --oj-secondary-text-color: hsla(0, 0%, 0%, 0.7);
  --oj-tertiary-text-color: hsla(0, 0%, 0%, 0.55);
  --oj-contrast-text-color: hsl(203, 2%, 100%);
  --oj-text-color-disabled: hsla(0, 0%, 0%, 0.38);
  --oj-form-control-label-color: hsla(0, 0%, 0%, 0.6);
  --oj-link-text-color: #000000;
  --oj-link-text-color-active: rgb(1.2, 73.8, 119.4);
  --oj-link-text-color-visited: #000000;
  --oj-link-text-color-disabled: hsla(0, 0%, 0%, 0.38);
  --oj-link-text-decoration: none;
  --oj-link-text-decoration-hover: underline;
  --oj-link-font-weight-active: normal;
  --oj-link-bg-color-active: transparent;
  --oj-icon-color: hsla(0, 0%, 0%, 0.8);
  --oj-icon-color-default: hsla(0, 0%, 0%, 0.8);
  --oj-icon-color-hover: #966486;
  --oj-icon-color-active: #966486;
  --oj-icon-color-selected: #966486;
  --oj-icon-color-disabled: #966486;
  --oj-drop-target-1-color: #d9f4fa;
  --oj-drop-target-2-color: #c2eaf3;
  --oj-color-required: rgb(1.6, 98.4, 159.2);
}

:root {
  --oj-private-core-global-dropdown-offset: 0;
  --oj-private-avatar-global-shape-default: "circle";
  --oj-private-conveyor-belt-global-arrow-visibility-default: visible;
  --oj-private-table-global-add-animation: '[{"effect":"slideIn","direction":"bottom"},"fadeIn"]';
  --oj-private-table-global-remove-animation: '[{"effect":"slideOut","direction":"top"},"fadeOut"]';
  --oj-private-table-global-update-animation: '{"effect":"fadeIn"}';
  --oj-private-table-global-display-default: "list";
  --oj-private-table-global-display-list-horizontal-grid-visible-default: "enabled";
  --oj-private-table-global-load-indicator-default: icon;
  --oj-private-table-global-enable-selector-default: false;
  --oj-private-table-global-sticky-default: false;
  --oj-private-core-global-loading-indicator-delay-duration: "250";
  --oj-private-button-global-chroming-default: full;
  --oj-private-buttonset-global-chroming-default: full;
  --oj-private-toolbar-global-chroming-default: half;
  --oj-private-off-canvas-global-display-mode-default: push;
  --oj-private-tree-view-global-expand-animation: '{"effect":"expand"}';
  --oj-private-tree-view-global-collapse-animation: '{"effect":"collapse"}';
  --oj-private-tree-view-global-data-fadein-duration: 0s;
  --oj-private-tree-view-global-selection-affordance-default: none;
  --oj-private-tree-view-global-load-indicator-default: none;
  --oj-private-popup-global-modality-default: "modeless";
  --oj-private-popup-global-open-animation-default: '[{"effect":"zoomIn","transformOrigin":"#myPosition"},"fadeIn"]';
  --oj-private-popup-global-close-animation-default: '[{"effect":"zoomOut","transformOrigin":"#myPosition"},"fadeOut"]';
  --oj-private-menu-global-drop-down-open-animation: '{"effect":"zoomIn","transformOrigin":"#myPosition","duration":"0.25s"}';
  --oj-private-menu-global-drop-down-close-animation: '{"effect":"none"}';
  --oj-private-menu-global-sheet-open-animation: '{"effect":"slideIn","direction":"top","duration":"0.25s"}';
  --oj-private-menu-global-sheet-close-animation: '{"effect":"slideOut","direction":"bottom","duration":"0.25s"}';
  --oj-private-menu-global-submenu-open-animation: '{"effect":"zoomIn","transformOrigin":"#myPosition","duration":"0.25s"}';
  --oj-private-menu-global-submenu-close-animation: '{"effect":"none"}';
  --oj-private-menu-global-sheet-cancel-affordance: "none";
  --oj-private-menu-global-sheet-swipe-down-behavior: "none";
  --oj-private-menu-global-drop-down-modality: "modeless";
  --oj-private-menu-global-sheet-modality: "modal";
  --oj-private-menu-global-sheet-margin-bottom: 14px;
  --oj-private-input-number-button-global-chroming-default: solid;
  --oj-private-input-number-global-step-default: 1;
  --oj-private-list-view-global-load-indicator-default: icon;
  --oj-private-list-view-global-add-animation-default: '[{"effect":"expand"},"fadeIn"]';
  --oj-private-list-view-global-remove-animation-default: '[{"effect":"collapse"},"fadeOut"]';
  --oj-private-list-view-global-update-animation-default: '{"effect":"fadeIn"}';
  --oj-private-list-view-global-expand-animation-default: '{"effect":"expand"}';
  --oj-private-list-view-global-collapse-animation-default: '{"effect":"collapse"}';
  --oj-private-list-view-global-pointerUp-animation-default: '{"effect":"none"}';
  --oj-private-list-view-global-gridlines-item-default: visible;
  --oj-private-list-view-global-gridlines-top-default: visible;
  --oj-private-list-view-global-gridlines-bottom-default: visible;
  --oj-private-navigation-list-global-horizontal-add-animation-default: '[{"effect":"expand","direction":"width"},"fadeIn"]';
  --oj-private-navigation-list-global-horizontal-remove-animation-default: '[{"effect":"collapse","direction":"width","persist":"all"},"fadeOut"]';
  --oj-private-navigation-list-global-add-animation-default: '[{"effect":"expand"},"fadeIn"]';
  --oj-private-navigation-list-global-remove-animation-default: '[{"effect":"collapse"},"fadeOut"]';
  --oj-private-navigation-list-global-update-animation-default: '{"effect":"fadeIn"}';
  --oj-private-navigation-list-global-expand-animation-default: '{"effect":"expand"}';
  --oj-private-navigation-list-global-collapse-animation-default: '{"effect":"collapse"}';
  --oj-private-navigation-list-global-slider-expand-animation-default: '{"effect":"slideIn","direction":"start","duration":"400ms"}';
  --oj-private-navigation-list-global-slider-collapse-animation-default: '{"effect":"slideIn","direction":"end","duration":"400ms"}';
  --oj-private-navigation-list-global-pointer-up-animation-default: '{"effect":"none"}';
  --oj-private-navigation-list-global-hierarchy-menu-threshold-default: 3;
  --oj-private-tab-bar-global-horizontal-add-animation-default: '[{"effect":"expand","direction":"width"},"fadeIn"]';
  --oj-private-tab-bar-global-horizontal-remove-animation-default: '[{"effect":"collapse","direction":"width","persist":"all"},"fadeOut"]';
  --oj-private-tab-bar-global-add-animation-default: '[{"effect":"expand"},"fadeIn"]';
  --oj-private-tab-bar-global-remove-animation-default: '[{"effect":"collapse"},"fadeOut"]';
  --oj-private-tab-bar-global-update-animation-default: '{"effect":"fadeIn"}';
  --oj-private-tab-bar-global-pointerUp-animation-default: '{"effect":"none"}';
}

/* html */
/* --------------------------------------------------------------- */
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875em;
}

/* body */
/* --------------------------------------------------------------- */
body {
  background-repeat: repeat;
  background-position: top left;
  background-image: none;
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 100%);
  touch-action: manipulation;
}

a {
  color: #000000;
  text-decoration: none;
  line-height: inherit;
}

a:visited {
  color: #000000;
}

a:hover, a:focus {
  text-decoration: underline;
}

a:active {
  color: rgb(1.2, 73.8, 119.4);
  font-weight: normal;
  background-color: transparent;
  border-radius: 1px;
}

a.oj-disabled {
  color: hsla(0, 0%, 0%, 0.38);
  opacity: 1;
  cursor: default;
  text-decoration: none;
}

/* header */
/* --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: hsla(0, 0%, 0%, 0.85);
  font-family: inherit;
  font-style: normal;
  margin: 8px 0;
  padding: 0 0 2px;
}

h1 {
  font-size: 2.42857rem;
  font-weight: 200;
}

h2 {
  font-size: 1.71429rem;
  font-weight: 300;
}

h3 {
  font-size: 1.42857rem;
  font-weight: 300;
}

h4 {
  font-size: 1.28571rem;
  font-weight: 400;
}

h5 {
  font-size: 1.14286rem;
  font-weight: 400;
}

h6 {
  font-size: 1.14286rem;
  font-weight: 400;
}

.oj-typography-heading-2xl,
.oj-typography-title-1 {
  font-size: 2.42857rem !important;
  font-weight: 200 !important;
}

.oj-typography-heading-xl,
.oj-typography-title-2 {
  font-size: 1.71429rem !important;
  font-weight: 300 !important;
}

.oj-typography-heading-lg,
.oj-typography-title-3 {
  font-size: 1.42857rem !important;
  font-weight: 300 !important;
}

.oj-typography-heading-md,
.oj-typography-title-4 {
  font-size: 1.28571rem !important;
  font-weight: 400 !important;
}

.oj-typography-heading-sm,
.oj-typography-title-5 {
  font-size: 1.14286rem !important;
  font-weight: 400 !important;
}

.oj-typography-heading-xs,
.oj-typography-title-6 {
  font-size: 1.14286rem !important;
  font-weight: 400 !important;
}

.oj-typography-subheading-2xl,
.oj-typography-subtitle-1 {
  font-size: 1.25rem !important;
  font-weight: normal !important;
}

.oj-typography-subheading-xl,
.oj-typography-subtitle-2 {
  font-size: 1.125rem !important;
  font-weight: normal !important;
}

.oj-typography-subheading-lg,
.oj-typography-subtitle-3 {
  font-size: 1rem !important;
  font-weight: normal !important;
}

.oj-typography-subheading-md,
.oj-typography-subtitle-4 {
  font-size: 0.875rem !important;
  font-weight: normal !important;
}

.oj-typography-subheading-sm {
  font-size: 0.875rem !important;
  font-weight: normal !important;
}

.oj-typography-subheading-xs {
  font-size: 0.875rem !important;
  font-weight: normal !important;
}

.oj-typography-body-xl {
  font-size: 1.25rem !important;
  font-weight: normal !important;
}

.oj-typography-body-lg,
.oj-typography-body-1 {
  font-size: 1.125rem !important;
  font-weight: normal !important;
}

.oj-typography-body-md,
.oj-typography-body-2 {
  font-size: 1rem !important;
  font-weight: normal !important;
}

.oj-typography-body-sm,
.oj-typography-body-3 {
  font-size: 0.85714rem !important;
  font-weight: normal !important;
}

.oj-typography-body-xs,
.oj-typography-caption-1 {
  font-size: 0.78571rem !important;
  font-weight: normal !important;
}

.oj-typography-body-2xs,
.oj-typography-caption-2 {
  font-size: 0.6875rem !important;
  font-weight: normal !important;
}

.oj-typography-semi-bold {
  font-weight: 500 !important;
}

.oj-typography-bold {
  font-weight: 700 !important;
}

/* hr */
/* --------------------------------------------------------------- */
hr {
  border: solid hsl(203, 2%, 90%);
  border-width: 1px 0 0;
  margin: 7px 0;
}

/* p */
/* --------------------------------------------------------------- */
p {
  margin: 0 0 12px 0;
}

.oj-header-border {
  border: solid hsl(203, 2%, 90%);
  border-width: 0 0 1px;
  padding: 0 0 7px;
}

@font-face {
  font-family: "Segoe UI";
  font-weight: 100;
  src: local("Segoe UI Light");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 200;
  src: local("Segoe UI Semilight"), local("Segoe UI Light");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 300;
  src: local("Segoe UI Semilight"), local("Segoe UI Light");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 400;
  src: local("Segoe UI");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 500;
  src: local("Segoe UI Semibold");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 600;
  src: local("Segoe UI Semibold");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 700;
  src: local("Segoe UI Bold");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 800;
  src: local("Segoe UI Bold");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 900;
  src: local("Segoe UI Bold");
}
@font-face {
  font-family: "Arial";
  font-weight: 100;
  src: local("sans-serif-thin"), local("Arial");
}
@font-face {
  font-family: "Arial";
  font-weight: 200;
  src: local("sans-serif-thin"), local("Arial");
}
@font-face {
  font-family: "Arial";
  font-weight: 300;
  src: local("sans-serif-light"), local("Arial");
}
@font-face {
  font-family: "Arial";
  font-weight: 400;
  src: local("sans-serif-regular"), local("Arial");
}
@font-face {
  font-family: "Arial";
  font-weight: 500;
  src: local("sans-serif-medium"), local("Arial");
}
@font-face {
  font-family: "Arial";
  font-weight: 600;
  src: local("sans-serif-medium"), local("Arial");
}
@font-face {
  font-family: "Arial";
  font-weight: 700;
  src: local("sans-serif-bold"), local("Arial Bold");
}
@font-face {
  font-family: "Arial";
  font-weight: 800;
  src: local("sans-serif-bold"), local("Arial Bold");
}
@font-face {
  font-family: "Arial";
  font-weight: 900;
  src: local("sans-serif-bold"), local("Arial Bold");
}
@font-face {
  font-family: "Helvetica Neue";
  font-weight: 100;
  src: local("HelveticaNeue-Ultralight");
}
@font-face {
  font-family: "Helvetica Neue";
  font-weight: 200;
  src: local("HelveticaNeue-Thin");
}
@font-face {
  font-family: "Helvetica Neue";
  font-weight: 300;
  src: local("HelveticaNeue-Light");
}
@font-face {
  font-family: "Helvetica Neue";
  font-weight: 400;
  src: local("Helvetica Neue");
}
@font-face {
  font-family: "Helvetica Neue";
  font-weight: 500;
  src: local("HelveticaNeue-Medium");
}
@font-face {
  font-family: "Helvetica Neue";
  font-weight: 600;
  src: local("HelveticaNeue-Medium");
}
@font-face {
  font-family: "Helvetica Neue";
  font-weight: 700;
  src: local("HelveticaNeue-Bold");
}
@font-face {
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: local("Helvetica-Bold");
}
@font-face {
  font-family: "Helvetica Neue";
  font-weight: 900;
  src: local("Helvetica-Bold");
}
/* lists */
/* --------------------------------------------------------------- */
ul, ol {
  margin: 12px 0;
  padding-left: 40px;
}

ul ul, ul ol, ol ul, ol ol {
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 30px;
}

ul li, ol li {
  line-height: 1.25;
}

.oj-text-xs {
  font-size: 0.78571rem;
}

.oj-text-sm {
  font-size: 0.85714rem;
}

.oj-text-color-primary,
.oj-text-primary-color {
  color: hsl(0, 0%, 0%);
}

.oj-text-color-secondary,
.oj-text-secondary-color {
  color: hsla(0, 0%, 0%, 0.7);
}

.oj-text-color-tertiary,
.oj-text-tertiary-color {
  color: hsla(0, 0%, 0%, 0.55);
}

.oj-text-color-disabled,
.oj-text-disabled-color {
  color: hsla(0, 0%, 0%, 0.38);
}

.oj-contrast-marker .oj-contrast-background,
.oj-contrast-marker.oj-contrast-background {
  background-color: hsl(203, 2%, 20%);
  color: hsl(203, 2%, 100%);
}

/* as of jet 4.0 oj-margin* and oj-padding* are deprecated in favor of responsive versions of these classes */
.oj-margin {
  margin: 10px;
}

.oj-margin-horizontal {
  margin-left: 10px;
  margin-right: 10px;
}

.oj-margin-vertical {
  margin-top: 10px;
  margin-bottom: 10px;
}

.oj-margin-top {
  margin-top: 10px;
}

.oj-margin-bottom {
  margin-bottom: 10px;
}

html:not([dir=rtl]) .oj-margin-start {
  margin-left: 10px;
}
html[dir=rtl] .oj-margin-start {
  margin-right: 10px;
}

html:not([dir=rtl]) .oj-margin-end {
  margin-right: 10px;
}
html[dir=rtl] .oj-margin-end {
  margin-left: 10px;
}

.oj-margin-lg {
  margin: 20px;
}

.oj-margin-lg-horizontal {
  margin-left: 20px;
  margin-right: 20px;
}

.oj-margin-lg-vertical {
  margin-top: 20px;
  margin-bottom: 20px;
}

.oj-margin-lg-top {
  margin-top: 20px;
}

.oj-margin-lg-bottom {
  margin-bottom: 20px;
}

html:not([dir=rtl]) .oj-margin-lg-start {
  margin-left: 20px;
}
html[dir=rtl] .oj-margin-lg-start {
  margin-right: 20px;
}

html:not([dir=rtl]) .oj-margin-lg-end {
  margin-right: 20px;
}
html[dir=rtl] .oj-margin-lg-end {
  margin-left: 20px;
}

.oj-padding {
  padding: 10px;
}

.oj-padding-horizontal {
  padding-left: 10px;
  padding-right: 10px;
}

.oj-padding-vertical {
  padding-top: 10px;
  padding-bottom: 10px;
}

.oj-padding-top {
  padding-top: 10px;
}

.oj-padding-bottom {
  padding-bottom: 10px;
}

html:not([dir=rtl]) .oj-padding-start {
  padding-left: 10px;
}
html[dir=rtl] .oj-padding-start {
  padding-right: 10px;
}

html:not([dir=rtl]) .oj-padding-end {
  padding-right: 10px;
}
html[dir=rtl] .oj-padding-end {
  padding-left: 10px;
}

.oj-padding-lg {
  padding: 20px;
}

.oj-padding-lg-horizontal {
  padding-left: 20px;
  padding-right: 20px;
}

.oj-padding-lg-vertical {
  padding-top: 20px;
  padding-bottom: 20px;
}

.oj-padding-lg-top {
  padding-top: 20px;
}

.oj-padding-lg-bottom {
  padding-bottom: 20px;
}

html:not([dir=rtl]) .oj-padding-lg-start {
  padding-left: 20px;
}
html[dir=rtl] .oj-padding-lg-start {
  padding-right: 20px;
}

html:not([dir=rtl]) .oj-padding-lg-end {
  padding-right: 20px;
}
html[dir=rtl] .oj-padding-lg-end {
  padding-left: 20px;
}

.oj-border {
  border: 1px solid hsl(203, 2%, 88%) !important;
}

.oj-border-top {
  border-top: 1px solid hsl(203, 2%, 88%) !important;
}

.oj-border-bottom {
  border-bottom: 1px solid hsl(203, 2%, 88%) !important;
}

html:not([dir=rtl]) .oj-border-start {
  border-left: 1px solid hsl(203, 2%, 88%) !important;
}
html[dir=rtl] .oj-border-start {
  border-right: 1px solid hsl(203, 2%, 88%) !important;
}

html:not([dir=rtl]) .oj-border-end {
  border-right: 1px solid hsl(203, 2%, 88%) !important;
}
html[dir=rtl] .oj-border-end {
  border-left: 1px solid hsl(203, 2%, 88%) !important;
}

.oj-divider-top {
  border-top-width: 1px;
  border-top-color: hsl(203, 2%, 88%);
  border-top-style: solid;
}

.oj-divider-top.oj-divider-padding {
  padding-top: 0.5rem;
}

.oj-divider-top.oj-divider-margin {
  margin-top: 0.5rem;
}

.oj-divider-bottom {
  border-bottom-width: 1px;
  border-bottom-color: hsl(203, 2%, 88%);
  border-bottom-style: solid;
}

.oj-divider-bottom.oj-divider-padding {
  padding-bottom: 0.5rem;
}

.oj-divider-bottom.oj-divider-margin {
  margin-bottom: 0.5rem;
}

html:not([dir=rtl]) .oj-divider-start {
  border-left-width: 1px;
  border-left-color: hsl(203, 2%, 88%);
  border-left-style: solid;
}
html[dir=rtl] .oj-divider-start {
  border-right-width: 1px;
  border-right-color: hsl(203, 2%, 88%);
  border-right-style: solid;
}

html:not([dir=rtl]) .oj-divider-start.oj-divider-padding {
  padding-left: 0.5rem;
}
html[dir=rtl] .oj-divider-start.oj-divider-padding {
  padding-right: 0.5rem;
}

html:not([dir=rtl]) .oj-divider-start.oj-divider-margin {
  margin-left: 0.5rem;
}
html[dir=rtl] .oj-divider-start.oj-divider-margin {
  margin-right: 0.5rem;
}

html:not([dir=rtl]) .oj-divider-end {
  border-right-width: 1px;
  border-right-color: hsl(203, 2%, 88%);
  border-right-style: solid;
}
html[dir=rtl] .oj-divider-end {
  border-left-width: 1px;
  border-left-color: hsl(203, 2%, 88%);
  border-left-style: solid;
}

html:not([dir=rtl]) .oj-divider-end.oj-divider-padding {
  padding-right: 0.5rem;
}
html[dir=rtl] .oj-divider-end.oj-divider-padding {
  padding-left: 0.5rem;
}

html:not([dir=rtl]) .oj-divider-end.oj-divider-margin {
  margin-right: 0.5rem;
}
html[dir=rtl] .oj-divider-end.oj-divider-margin {
  margin-left: 0.5rem;
}

.oj-bg-neutral-0 {
  background-color: hsl(203, 2%, 100%) !important;
}

.oj-bg-neutral-10 {
  background-color: hsl(203, 2%, 99%) !important;
}

.oj-bg-neutral-20 {
  background-color: hsl(203, 2%, 98%) !important;
}

.oj-bg-neutral-30 {
  background-color: hsl(203, 2%, 97%) !important;
}

.oj-bg-neutral-170 {
  background-color: hsl(203, 2%, 30%) !important;
}

.oj-bg-neutral-180 {
  background-color: hsl(203, 2%, 20%) !important;
}

.oj-bg-neutral-190 {
  background-color: hsl(203, 2%, 15%) !important;
}

.oj-bg-neutral-200 {
  background-color: hsl(203, 2%, 0%) !important;
}

.oj-bg-danger-10 {
  background-color: #fcf3f4 !important;
}

.oj-bg-danger-30 {
  background-color: #f8d3d6 !important;
}

.oj-bg-warning-10 {
  background-color: #fef5e4 !important;
}

.oj-bg-warning-30 {
  background-color: #fce7c1 !important;
}

.oj-bg-success-10 {
  background-color: #ecf5e7 !important;
}

.oj-bg-success-30 {
  background-color: #ecf5e7 !important;
}

.oj-bg-info-10 {
  background-color: #e9f4f8 !important;
}

.oj-bg-info-30 {
  background-color: #cae4ef !important;
}

.oj-bg-brand-10 {
  background-color: rgb(232.23, 243.12, 249.96) !important;
}

.oj-bg-brand-30 {
  background-color: rgb(214.52, 233.88, 246.04) !important;
}

.oj-line-clamp-1,
.oj-line-clamp-2,
.oj-line-clamp-3,
.oj-line-clamp-4 {
  display: -webkit-box !important;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.oj-line-clamp-1 {
  -webkit-line-clamp: 1 !important;
}

.oj-line-clamp-2 {
  -webkit-line-clamp: 2 !important;
}

.oj-line-clamp-3 {
  -webkit-line-clamp: 3 !important;
}

.oj-line-clamp-4 {
  -webkit-line-clamp: 4 !important;
}

.oj-fwk-icon-arrow-e:before, html:not([dir=rtl]) .oj-fwk-icon-arrow-end:before, html:not([dir=rtl]) .oj-listview-collapse-icon:before, html:not([dir=rtl]) .oj-collapsible-close-icon:before, html[dir=rtl] .oj-fwk-icon-arrow-start:before {
  content: "\f101";
}

.oj-fwk-icon-arrow-n:before {
  content: "\f102";
}

.oj-fwk-icon-arrow-ne:before, html:not([dir=rtl]) .oj-fwk-icon-arrow-n-end:before, html[dir=rtl] .oj-fwk-icon-arrow-n-start:before {
  content: "\f103";
}

.oj-fwk-icon-arrow-nw:before, html[dir=rtl] .oj-fwk-icon-arrow-n-end:before, html:not([dir=rtl]) .oj-fwk-icon-arrow-n-start:before {
  content: "\f104";
}

.oj-fwk-icon-arrow-s:before {
  content: "\f105";
}

.oj-fwk-icon-arrow-se:before, html:not([dir=rtl]) .oj-fwk-icon-arrow-s-end:before, html:not([dir=rtl]) .oj-listview-expand-icon:before, html:not([dir=rtl]) .oj-collapsible-open-icon:before, html[dir=rtl] .oj-fwk-icon-arrow-s-start:before {
  content: "\f106";
}

.oj-fwk-icon-arrow-sw:before, html[dir=rtl] .oj-fwk-icon-arrow-s-end:before, html[dir=rtl] .oj-listview-expand-icon:before, html[dir=rtl] .oj-collapsible-open-icon:before, html:not([dir=rtl]) .oj-fwk-icon-arrow-s-start:before {
  content: "\f107";
}

.oj-fwk-icon-arrow-w:before, html[dir=rtl] .oj-fwk-icon-arrow-end:before, html[dir=rtl] .oj-listview-collapse-icon:before, html[dir=rtl] .oj-collapsible-close-icon:before, html:not([dir=rtl]) .oj-fwk-icon-arrow-start:before {
  content: "\f108";
}

.oj-fwk-icon-arrow02-e:before, html:not([dir=rtl]) .oj-fwk-icon-arrow02-end:before, html:not([dir=rtl]) .oj-navigationlist-collapsible .oj-navigationlist-collapse-icon:before, .oj-navigationlist-collapsible html:not([dir=rtl]) .oj-navigationlist-collapse-icon:before, html[dir=rtl] .oj-fwk-icon-arrow02-start:before {
  content: "\f109";
}

.oj-fwk-icon-arrow02-n:before {
  content: "\f10a";
}

.oj-fwk-icon-arrow02-s:before, .oj-select-open-icon:before, .oj-searchselect-open-icon:before, .oj-combobox-open-icon:before, .oj-navigationlist-collapsible .oj-navigationlist-expand-icon:before, .oj-button-menu-dropdown-icon:before,
.oj-button-menu-icon-only-dropdown-icon:before {
  content: "\f10b";
}

.oj-fwk-icon-arrow02-w:before, html[dir=rtl] .oj-fwk-icon-arrow02-end:before, html[dir=rtl] .oj-navigationlist-collapsible .oj-navigationlist-collapse-icon:before, .oj-navigationlist-collapsible html[dir=rtl] .oj-navigationlist-collapse-icon:before, html:not([dir=rtl]) .oj-fwk-icon-arrow02-start:before {
  content: "\f10c";
}

.oj-fwk-icon-arrow03-e:before, html:not([dir=rtl]) .oj-tree-drop-ptr:before, html:not([dir=rtl]) .oj-collapsed > .oj-tree-disclosure-icon:before, html:not([dir=rtl]) .oj-fwk-icon-arrow03-end:before, html:not([dir=rtl]) .oj-rowexpander-expand-icon:before, html:not([dir=rtl]) .oj-collapsed > .oj-treeview-item-content > .oj-treeview-disclosure-icon:before, html:not([dir=rtl]) .oj-menu-submenu-icon:before, html[dir=rtl] .oj-fwk-icon-arrow03-start:before {
  content: "\f10d";
}

.oj-fwk-icon-arrow03-n:before, .oj-datagrid-sort-ascending-icon:before, .oj-datagrid-sort-default-icon:before, .oj-table-column-header-asc-icon:before,
.oj-table-column-header-default-sort-icon:before {
  content: "\f10e";
}

.oj-fwk-icon-arrow03-ne:before, html:not([dir=rtl]) .oj-fwk-icon-arrow03-n-end:before, html[dir=rtl] .oj-fwk-icon-arrow03-n-start:before {
  content: "\f10f";
}

.oj-fwk-icon-arrow03-nw:before, html[dir=rtl] .oj-fwk-icon-arrow03-n-end:before, html:not([dir=rtl]) .oj-fwk-icon-arrow03-n-start:before {
  content: "\f110";
}

.oj-fwk-icon-arrow03-s:before, .oj-datagrid-sort-descending-icon:before, .oj-table-column-header-dsc-icon:before {
  content: "\f111";
}

.oj-fwk-icon-arrow03-se:before, html:not([dir=rtl]) .oj-expanded > .oj-tree-disclosure-icon:before, html:not([dir=rtl]) .oj-fwk-icon-arrow03-s-end:before, html:not([dir=rtl]) .oj-rowexpander-collapse-icon:before, html:not([dir=rtl]) .oj-expanded > .oj-treeview-item-content > .oj-treeview-disclosure-icon:before, html[dir=rtl] .oj-fwk-icon-arrow03-s-start:before {
  content: "\f112";
}

.oj-fwk-icon-arrow03-sw:before, html[dir=rtl] .oj-expanded > .oj-tree-disclosure-icon:before, html[dir=rtl] .oj-fwk-icon-arrow03-s-end:before, html[dir=rtl] .oj-rowexpander-collapse-icon:before, html[dir=rtl] .oj-expanded > .oj-treeview-item-content > .oj-treeview-disclosure-icon:before, html:not([dir=rtl]) .oj-fwk-icon-arrow03-s-start:before {
  content: "\f113";
}

.oj-fwk-icon-arrow03-w:before, html[dir=rtl] .oj-tree-drop-ptr:before, html[dir=rtl] .oj-collapsed > .oj-tree-disclosure-icon:before, html[dir=rtl] .oj-fwk-icon-arrow03-end:before, html[dir=rtl] .oj-rowexpander-expand-icon:before, html[dir=rtl] .oj-collapsed > .oj-treeview-item-content > .oj-treeview-disclosure-icon:before, html[dir=rtl] .oj-menu-submenu-icon:before, html:not([dir=rtl]) .oj-fwk-icon-arrow03-start:before {
  content: "\f114";
}

.oj-fwk-icon-arrowbox-n:before {
  content: "\f115";
}

.oj-fwk-icon-arrowtail-e:before, html:not([dir=rtl]) .oj-fwk-icon-arrowtail-end:before, html[dir=rtl] .oj-fwk-icon-arrowtail-start:before {
  content: "\f116";
}

.oj-fwk-icon-arrowtail-w:before, html[dir=rtl] .oj-fwk-icon-arrowtail-end:before, html:not([dir=rtl]) .oj-fwk-icon-arrowtail-start:before {
  content: "\f117";
}

.oj-fwk-icon-calendar-clock:before, .oj-inputdatetime-calendar-clock-icon:before {
  content: "\f118";
}

.oj-fwk-icon-calendar:before, .oj-inputdatetime-calendar-icon:before {
  content: "\f119";
}

.oj-fwk-icon-caret-e:before, html:not([dir=rtl]) .oj-datepicker-next-icon:before, html[dir=rtl] .oj-datepicker-prev-icon:before, html:not([dir=rtl]) .oj-fwk-icon-caret-end:before, html:not([dir=rtl]) .oj-listview-drill-icon:before, html:not([dir=rtl]) .oj-filmstrip-arrow-icon.oj-end:before, html:not([dir=rtl]) .oj-conveyorbelt-overflow-icon.oj-end:before, html:not([dir=rtl]) .oj-fwk-icon-next:before, html[dir=rtl] .oj-fwk-icon-caret-start:before, html[dir=rtl] .oj-searchselect-back-icon:before, html[dir=rtl] .oj-navigationlist-previous-icon:before, html[dir=rtl] .oj-filmstrip-arrow-icon.oj-start:before, html[dir=rtl] .oj-conveyorbelt-overflow-icon.oj-start:before, html[dir=rtl] .oj-fwk-icon-back:before, html[dir=rtl] .oj-hybrid-applayout-header-icon-back:before {
  content: "\f11a";
}

.oj-fwk-icon-caret-n:before, .oj-inputnumber-up-icon:before, .oj-filmstrip-arrow-icon.oj-top:before, .oj-conveyorbelt-overflow-icon.oj-top:before {
  content: "\f11b";
}

.oj-fwk-icon-caret-s:before, .oj-inputnumber-down-icon:before, .oj-filmstrip-arrow-icon.oj-bottom:before, .oj-conveyorbelt-overflow-icon.oj-bottom:before {
  content: "\f11c";
}

.oj-fwk-icon-caret-w:before, html[dir=rtl] .oj-datepicker-next-icon:before, html:not([dir=rtl]) .oj-datepicker-prev-icon:before, html[dir=rtl] .oj-fwk-icon-caret-end:before, html[dir=rtl] .oj-listview-drill-icon:before, html[dir=rtl] .oj-filmstrip-arrow-icon.oj-end:before, html[dir=rtl] .oj-conveyorbelt-overflow-icon.oj-end:before, html[dir=rtl] .oj-fwk-icon-next:before, html:not([dir=rtl]) .oj-fwk-icon-caret-start:before, html:not([dir=rtl]) .oj-searchselect-back-icon:before, html:not([dir=rtl]) .oj-navigationlist-previous-icon:before, html:not([dir=rtl]) .oj-filmstrip-arrow-icon.oj-start:before, html:not([dir=rtl]) .oj-conveyorbelt-overflow-icon.oj-start:before, html:not([dir=rtl]) .oj-fwk-icon-back:before, html:not([dir=rtl]) .oj-hybrid-applayout-header-icon-back:before {
  content: "\f11d";
}

.oj-fwk-icon-caret02-e:before, html:not([dir=rtl]) .oj-pagingcontrol-nav-next-icon:before, html[dir=rtl] .oj-pagingcontrol-nav-previous-icon:before, html:not([dir=rtl]) .oj-fwk-icon-caret02-end:before, html[dir=rtl] .oj-fwk-icon-caret02-start:before {
  content: "\f11e";
}

.oj-fwk-icon-caret02-n:before, .oj-pagingcontrol-nav-previous-vertical-icon:before {
  content: "\f11f";
}

.oj-fwk-icon-caret02-s:before, .oj-pagingcontrol-nav-next-vertical-icon:before {
  content: "\f120";
}

.oj-fwk-icon-caret02-w:before, html[dir=rtl] .oj-pagingcontrol-nav-next-icon:before, html:not([dir=rtl]) .oj-pagingcontrol-nav-previous-icon:before, html[dir=rtl] .oj-fwk-icon-caret02-end:before, html:not([dir=rtl]) .oj-fwk-icon-caret02-start:before {
  content: "\f121";
}

.oj-fwk-icon-caret02end-e:before, html:not([dir=rtl]) .oj-pagingcontrol-nav-last-icon:before, html[dir=rtl] .oj-pagingcontrol-nav-first-icon:before, html:not([dir=rtl]) .oj-fwk-icon-caret02end-end:before, html[dir=rtl] .oj-fwk-icon-caret02end-start:before {
  content: "\f122";
}

.oj-fwk-icon-caret02end-n:before, .oj-pagingcontrol-nav-first-vertical-icon:before {
  content: "\f123";
}

.oj-fwk-icon-caret02end-s:before, .oj-pagingcontrol-nav-last-vertical-icon:before {
  content: "\f124";
}

.oj-fwk-icon-caret02end-w:before, html[dir=rtl] .oj-pagingcontrol-nav-last-icon:before, html:not([dir=rtl]) .oj-pagingcontrol-nav-first-icon:before, html[dir=rtl] .oj-fwk-icon-caret02end-end:before, html:not([dir=rtl]) .oj-fwk-icon-caret02end-start:before {
  content: "\f125";
}

.oj-fwk-icon-caret03-e:before, html:not([dir=rtl]) .oj-fwk-icon-caret03-end:before, html:not([dir=rtl]) .oj-navigationlist-slider .oj-navigationlist-collapse-icon:before, .oj-navigationlist-slider html:not([dir=rtl]) .oj-navigationlist-collapse-icon:before, html[dir=rtl] .oj-fwk-icon-caret03-start:before {
  content: "\f126";
}

.oj-fwk-icon-caret03-n:before {
  content: "\f127";
}

.oj-fwk-icon-caret03-s:before {
  content: "\f128";
}

.oj-fwk-icon-caret03-w:before, html[dir=rtl] .oj-fwk-icon-caret03-end:before, html[dir=rtl] .oj-navigationlist-slider .oj-navigationlist-collapse-icon:before, .oj-navigationlist-slider html[dir=rtl] .oj-navigationlist-collapse-icon:before, html:not([dir=rtl]) .oj-fwk-icon-caret03-start:before {
  content: "\f129";
}

.oj-fwk-icon-checkmark:before, .oj-train-icon.oj-confirmation:before {
  content: "\f12a";
}

.oj-fwk-icon-clock:before, .oj-inputdatetime-time-icon:before {
  content: "\f12b";
}

.oj-fwk-icon-cross:before, .oj-progressstatus-cancel-icon:before, .oj-select-clear-entry-icon:before, .oj-combobox-clear-entry-icon:before, .oj-tabbar-remove-icon:before, .oj-panel-remove-icon:before {
  content: "\f12c";
}

.oj-fwk-icon-cross02:before, .oj-menu-option-start-icon .oj-menu-cancel-icon:before {
  content: "\f12d";
}

.oj-fwk-icon-cross03:before, .oj-searchselect-clear-value-icon:before, .oj-inputdatetime-clear-icon:before, .oj-inputtext-clear-icon:before, .oj-tabs-close-icon:before {
  content: "\f12e";
}

.oj-fwk-icon-dots-horizontal:before, .oj-tabbar-overflow-item-icon:before, .oj-navigationlist-overflow-item-icon:before {
  content: "\f12f";
}

.oj-fwk-icon-dots-vertical:before, .oj-select-multiple-open-icon:before {
  content: "\f130";
}

.oj-fwk-icon-drag-horizontal:before {
  content: "\f131";
}

.oj-fwk-icon-drag-vertical:before {
  content: "\f132";
}

.oj-fwk-icon-drag:before, .oj-listview-card .oj-listview-drag-handle:before,
.oj-listview-card-layout .oj-listview-drag-handle:before, .oj-panel-drag-icon:before {
  content: "\f133";
}

.oj-fwk-icon-folderhierarchy:before, .oj-hier-icon:before {
  content: "\f134";
}

.oj-fwk-icon-grid:before {
  content: "\f135";
}

.oj-fwk-icon-hamburger:before, .oj-web-applayout-offcanvas-icon:before {
  content: "\f136";
}

.oj-fwk-icon-help:before, .oj-label-help-icon:before {
  content: "\f137";
}

.oj-fwk-icon-info:before, .oj-train-icon.oj-info:before {
  content: "\f138";
}

.oj-fwk-icon-list:before {
  content: "\f139";
}

.oj-fwk-icon-magnifier:before, .oj-inputsearch-search-icon:before, .oj-listbox-search-icon:before {
  content: "\f13a";
}

.oj-fwk-icon-marquee:before {
  content: "\f13b";
}

.oj-fwk-icon-maximize:before, .oj-panel-expand-icon:before {
  content: "\f13c";
}

.oj-fwk-icon-minimize:before, .oj-panel-collapse-icon:before {
  content: "\f13d";
}

.oj-fwk-icon-minus:before {
  content: "\f13e";
}

.oj-fwk-icon-node-collapse:before {
  content: "\f13f";
}

.oj-fwk-icon-node-expand:before {
  content: "\f140";
}

.oj-fwk-icon-pan:before {
  content: "\f141";
}

.oj-fwk-icon-plus:before {
  content: "\f142";
}

.oj-fwk-icon-user:before {
  content: "\f143";
}

.oj-fwk-icon-users:before {
  content: "\f144";
}

.oj-fwk-icon-view-hide:before, .oj-inputpassword-hide-password-icon:before {
  content: "\f145";
}

.oj-fwk-icon-view:before, .oj-inputpassword-show-password-icon:before {
  content: "\f146";
}

.oj-fwk-icon-warning:before, .oj-train-icon.oj-warning:before, .oj-train-icon.oj-error:before {
  content: "\f147";
}

.oj-fwk-icon-zoom-in:before {
  content: "\f148";
}

.oj-fwk-icon-zoom-out:before {
  content: "\f149";
}

.oj-fwk-icon-document, .oj-treeview-leaf > .oj-treeview-item-content > .oj-treeview-item-icon, .oj-tree-leaf:not(.oj-tree-type) a .oj-tree-node-icon {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-2px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-document, .oj-hicontrast .oj-treeview-leaf > .oj-treeview-item-content > .oj-treeview-item-icon, .oj-hicontrast .oj-tree-leaf:not(.oj-tree-type) a .oj-tree-node-icon, .oj-tree-leaf:not(.oj-tree-type) a .oj-hicontrast .oj-tree-node-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-document:before, .oj-hicontrast .oj-treeview-leaf > .oj-treeview-item-content > .oj-treeview-item-icon:before, .oj-hicontrast .oj-tree-leaf:not(.oj-tree-type) a .oj-tree-node-icon:before, .oj-tree-leaf:not(.oj-tree-type) a .oj-hicontrast .oj-tree-node-icon:before {
  content: url("../../../alta/12.0.0/common/images/document.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-document, .oj-treeview-leaf > .oj-treeview-item-content > .oj-treeview-item-icon, .oj-tree-leaf:not(.oj-tree-type) a .oj-tree-node-icon {
    background-image: none;
  }
  .oj-fwk-icon-document:before, .oj-treeview-leaf > .oj-treeview-item-content > .oj-treeview-item-icon:before, .oj-tree-leaf:not(.oj-tree-type) a .oj-tree-node-icon:before {
    content: url("../../../alta/12.0.0/common/images/document.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-folder-collapsed, .oj-collapsed > .oj-treeview-item-content > .oj-treeview-item-icon, .oj-collapsed:not(.oj-tree-type) > a .oj-tree-node-icon {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-22px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-folder-collapsed, .oj-hicontrast .oj-collapsed > .oj-treeview-item-content > .oj-treeview-item-icon, .oj-hicontrast .oj-collapsed:not(.oj-tree-type) > a .oj-tree-node-icon, .oj-collapsed:not(.oj-tree-type) > a .oj-hicontrast .oj-tree-node-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-folder-collapsed:before, .oj-hicontrast .oj-collapsed > .oj-treeview-item-content > .oj-treeview-item-icon:before, .oj-hicontrast .oj-collapsed:not(.oj-tree-type) > a .oj-tree-node-icon:before, .oj-collapsed:not(.oj-tree-type) > a .oj-hicontrast .oj-tree-node-icon:before {
  content: url("../../../alta/12.0.0/common/images/folder_collapsed.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-folder-collapsed, .oj-collapsed > .oj-treeview-item-content > .oj-treeview-item-icon, .oj-collapsed:not(.oj-tree-type) > a .oj-tree-node-icon {
    background-image: none;
  }
  .oj-fwk-icon-folder-collapsed:before, .oj-collapsed > .oj-treeview-item-content > .oj-treeview-item-icon:before, .oj-collapsed:not(.oj-tree-type) > a .oj-tree-node-icon:before {
    content: url("../../../alta/12.0.0/common/images/folder_collapsed.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-folder-open, .oj-expanded > .oj-treeview-item-content > .oj-treeview-item-icon, .oj-expanded:not(.oj-tree-type) > a .oj-tree-node-icon {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-42px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-folder-open, .oj-hicontrast .oj-expanded > .oj-treeview-item-content > .oj-treeview-item-icon, .oj-hicontrast .oj-expanded:not(.oj-tree-type) > a .oj-tree-node-icon, .oj-expanded:not(.oj-tree-type) > a .oj-hicontrast .oj-tree-node-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-folder-open:before, .oj-hicontrast .oj-expanded > .oj-treeview-item-content > .oj-treeview-item-icon:before, .oj-hicontrast .oj-expanded:not(.oj-tree-type) > a .oj-tree-node-icon:before, .oj-expanded:not(.oj-tree-type) > a .oj-hicontrast .oj-tree-node-icon:before {
  content: url("../../../alta/12.0.0/common/images/folder_open.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-folder-open, .oj-expanded > .oj-treeview-item-content > .oj-treeview-item-icon, .oj-expanded:not(.oj-tree-type) > a .oj-tree-node-icon {
    background-image: none;
  }
  .oj-fwk-icon-folder-open:before, .oj-expanded > .oj-treeview-item-content > .oj-treeview-item-icon:before, .oj-expanded:not(.oj-tree-type) > a .oj-tree-node-icon:before {
    content: url("../../../alta/12.0.0/common/images/folder_open.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-group-avatar, .oj-avatar-group-image .oj-avatar-placeholder-icon {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-62px * 1) calc(-2px * 1);
  width: calc(32px * 1);
  height: calc(32px * 1);
}

.oj-hicontrast .oj-fwk-icon-group-avatar, .oj-hicontrast .oj-avatar-group-image .oj-avatar-placeholder-icon, .oj-avatar-group-image .oj-hicontrast .oj-avatar-placeholder-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-group-avatar:before, .oj-hicontrast .oj-avatar-group-image .oj-avatar-placeholder-icon:before, .oj-avatar-group-image .oj-hicontrast .oj-avatar-placeholder-icon:before {
  content: url("../../../alta/12.0.0/common/images/group_avatar.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-group-avatar, .oj-avatar-group-image .oj-avatar-placeholder-icon {
    background-image: none;
  }
  .oj-fwk-icon-group-avatar:before, .oj-avatar-group-image .oj-avatar-placeholder-icon:before {
    content: url("../../../alta/12.0.0/common/images/group_avatar.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-none {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-98px * 1) calc(-2px * 1);
  width: calc(48px * 1);
  height: calc(48px * 1);
}

.oj-hicontrast .oj-fwk-icon-none {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-none:before {
  content: url("../../../alta/12.0.0/common/images/none.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-none {
    background-image: none;
  }
  .oj-fwk-icon-none:before {
    content: url("../../../alta/12.0.0/common/images/none.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-person-avatar, .oj-avatar-placeholder-icon {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-150px * 1) calc(-2px * 1);
  width: calc(32px * 1);
  height: calc(32px * 1);
}

.oj-hicontrast .oj-fwk-icon-person-avatar, .oj-hicontrast .oj-avatar-placeholder-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-person-avatar:before, .oj-hicontrast .oj-avatar-placeholder-icon:before {
  content: url("../../../alta/12.0.0/common/images/person_avatar.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-person-avatar, .oj-avatar-placeholder-icon {
    background-image: none;
  }
  .oj-fwk-icon-person-avatar:before, .oj-avatar-placeholder-icon:before {
    content: url("../../../alta/12.0.0/common/images/person_avatar.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-status-confirmation, .oj-progressstatus-done-icon, .oj-message-status-icon.oj-message-confirmation-icon {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-186px * 1) calc(-2px * 1);
  width: calc(20px * 1);
  height: calc(20px * 1);
}

.oj-hicontrast .oj-fwk-icon-status-confirmation, .oj-hicontrast .oj-progressstatus-done-icon, .oj-hicontrast .oj-message-status-icon.oj-message-confirmation-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-status-confirmation:before, .oj-hicontrast .oj-progressstatus-done-icon:before, .oj-hicontrast .oj-message-status-icon.oj-message-confirmation-icon:before {
  content: url("../../../alta/12.0.0/common/images/status_confirmation.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-status-confirmation, .oj-progressstatus-done-icon, .oj-message-status-icon.oj-message-confirmation-icon {
    background-image: none;
  }
  .oj-fwk-icon-status-confirmation:before, .oj-progressstatus-done-icon:before, .oj-message-status-icon.oj-message-confirmation-icon:before {
    content: url("../../../alta/12.0.0/common/images/status_confirmation.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-status-confirmation2 {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-210px * 1) calc(-2px * 1);
  width: calc(9px * 1);
  height: calc(9px * 1);
}

.oj-hicontrast .oj-fwk-icon-status-confirmation2 {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-status-confirmation2:before {
  content: url("../../../alta/12.0.0/common/images/status_confirmation2.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-status-confirmation2 {
    background-image: none;
  }
  .oj-fwk-icon-status-confirmation2:before {
    content: url("../../../alta/12.0.0/common/images/status_confirmation2.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-status-error, .oj-progressstatus-error-icon, .oj-message-status-icon.oj-message-error-icon {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-223px * 1) calc(-2px * 1);
  width: calc(20px * 1);
  height: calc(20px * 1);
}

.oj-hicontrast .oj-fwk-icon-status-error, .oj-hicontrast .oj-progressstatus-error-icon, .oj-hicontrast .oj-message-status-icon.oj-message-error-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-status-error:before, .oj-hicontrast .oj-progressstatus-error-icon:before, .oj-hicontrast .oj-message-status-icon.oj-message-error-icon:before {
  content: url("../../../alta/12.0.0/common/images/status_error.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-status-error, .oj-progressstatus-error-icon, .oj-message-status-icon.oj-message-error-icon {
    background-image: none;
  }
  .oj-fwk-icon-status-error:before, .oj-progressstatus-error-icon:before, .oj-message-status-icon.oj-message-error-icon:before {
    content: url("../../../alta/12.0.0/common/images/status_error.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-status-error2 {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-247px * 1) calc(-2px * 1);
  width: calc(9px * 1);
  height: calc(9px * 1);
}

.oj-hicontrast .oj-fwk-icon-status-error2 {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-status-error2:before {
  content: url("../../../alta/12.0.0/common/images/status_error2.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-status-error2 {
    background-image: none;
  }
  .oj-fwk-icon-status-error2:before {
    content: url("../../../alta/12.0.0/common/images/status_error2.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-status-info, .oj-message-status-icon.oj-message-info-icon {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-260px * 1) calc(-2px * 1);
  width: calc(20px * 1);
  height: calc(20px * 1);
}

.oj-hicontrast .oj-fwk-icon-status-info, .oj-hicontrast .oj-message-status-icon.oj-message-info-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-status-info:before, .oj-hicontrast .oj-message-status-icon.oj-message-info-icon:before {
  content: url("../../../alta/12.0.0/common/images/status_info.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-status-info, .oj-message-status-icon.oj-message-info-icon {
    background-image: none;
  }
  .oj-fwk-icon-status-info:before, .oj-message-status-icon.oj-message-info-icon:before {
    content: url("../../../alta/12.0.0/common/images/status_info.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-status-info2 {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-284px * 1) calc(-2px * 1);
  width: calc(9px * 1);
  height: calc(9px * 1);
}

.oj-hicontrast .oj-fwk-icon-status-info2 {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-status-info2:before {
  content: url("../../../alta/12.0.0/common/images/status_info2.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-status-info2 {
    background-image: none;
  }
  .oj-fwk-icon-status-info2:before {
    content: url("../../../alta/12.0.0/common/images/status_info2.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-status-warning, .oj-message-status-icon.oj-message-warning-icon {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-297px * 1) calc(-2px * 1);
  width: calc(20px * 1);
  height: calc(20px * 1);
}

.oj-hicontrast .oj-fwk-icon-status-warning, .oj-hicontrast .oj-message-status-icon.oj-message-warning-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-status-warning:before, .oj-hicontrast .oj-message-status-icon.oj-message-warning-icon:before {
  content: url("../../../alta/12.0.0/common/images/status_warning.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-status-warning, .oj-message-status-icon.oj-message-warning-icon {
    background-image: none;
  }
  .oj-fwk-icon-status-warning:before, .oj-message-status-icon.oj-message-warning-icon:before {
    content: url("../../../alta/12.0.0/common/images/status_warning.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-status-warning2 {
  background-image: url("../../../alta/12.0.0/common/images/sprites/sprite.svg");
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-321px * 1) calc(-2px * 1);
  width: calc(9px * 1);
  height: calc(9px * 1);
}

.oj-hicontrast .oj-fwk-icon-status-warning2 {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-status-warning2:before {
  content: url("../../../alta/12.0.0/common/images/status_warning2.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-status-warning2 {
    background-image: none;
  }
  .oj-fwk-icon-status-warning2:before {
    content: url("../../../alta/12.0.0/common/images/status_warning2.svg");
    width: 100%;
    height: 100%;
  }
}
/* Icons
--------------------------------------------------------------------*/
@font-face {
  font-family: "Alta Icon Font";
  src: url("fonts/internal_iconfont.woff") format("woff");
}
/*--------------------------------------------------------------------
/  Generic style that can be used for widget images
/  You can use the mixin ("oj-icon-content") to generate
/  a class with additions/overrides
/
/  For example let's say you used the mixin ("oj-icon-content") to
/  generate a class ".binky-icon". You
/  could then put class="oj-icon binky-icon" on your dom element.
--------------------------------------------------------------------*/
.oj-fwk-icon, .oj-progressstatus-cancel-icon, .oj-web-applayout-offcanvas-icon, .oj-listview-drag-handle, .oj-listview-drill-icon, .oj-panel-remove-icon, .oj-panel-collapse-icon, .oj-panel-expand-icon, .oj-panel-drag-icon,
.oj-component-icon,
.oj-popup-tail.oj-popup-tail-simple {
  font-family: "Alta Icon Font";
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  font-weight: normal;
  speak: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  color: hsla(0, 0%, 0%, 0.8);
  text-align: center;
  box-sizing: content-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.oj-fwk-icon:before, .oj-progressstatus-cancel-icon:before, .oj-web-applayout-offcanvas-icon:before, .oj-listview-drag-handle:before, .oj-listview-drill-icon:before, .oj-panel-remove-icon:before, .oj-panel-collapse-icon:before, .oj-panel-expand-icon:before, .oj-panel-drag-icon:before,
.oj-component-icon:before,
.oj-popup-tail.oj-popup-tail-simple:before {
  display: inline-block;
}

/*--------------------------------------------------------------------
/  Generic style that can be used for images
/  App developers can use the mixin ("oj-icon-content") to generate
/  a class with additions/overrides
/
/  For example let's say you used the mixin ("oj-icon-content") to
/  generate a class ".binky-icon". You
/  could then put class="oj-icon binky-icon" on your dom element.
--------------------------------------------------------------------*/
.oj-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 1;
  overflow: hidden;
  direction: ltr;
  text-align: center;
  box-sizing: content-box;
}
.oj-icon:before {
  display: inline-block;
  box-sizing: content-box;
}

a .oj-clickable-icon,
a.oj-clickable-icon,
a.oj-clickable-icon-nocontext {
  font-weight: normal;
}

a .oj-clickable-icon,
a.oj-clickable-icon,
a.oj-clickable-icon-nocontext,
a:visited .oj-clickable-icon,
a:visited.oj-clickable-icon,
a:visited.oj-clickable-icon-nocontext,
.oj-default .oj-clickable-icon,
.oj-default.oj-clickable-icon,
.oj-default.oj-clickable-icon-nocontext {
  color: hsla(0, 0%, 0%, 0.8);
}

a:hover .oj-clickable-icon,
a:hover.oj-clickable-icon,
a:hover.oj-clickable-icon-nocontext,
.oj-hover .oj-clickable-icon,
.oj-hover.oj-clickable-icon,
.oj-hover.oj-clickable-icon-nocontext {
  color: #966486;
}

a:active .oj-clickable-icon,
a:active.oj-clickable-icon,
a:active.oj-clickable-icon-nocontext,
.oj-active .oj-clickable-icon,
.oj-active.oj-clickable-icon,
.oj-active.oj-clickable-icon-nocontext {
  color: #966486;
}

a.oj-selected .oj-clickable-icon,
a.oj-selected.oj-clickable-icon,
a.oj-selected.oj-clickable-icon-nocontext,
.oj-selected .oj-clickable-icon,
.oj-selected.oj-clickable-icon,
.oj-selected.oj-clickable-icon-nocontext {
  color: #966486;
}

a.oj-disabled .oj-clickable-icon,
a.oj-disabled.oj-clickable-icon,
a.oj-disabled.oj-clickable-icon-nocontext,
.oj-disabled .oj-clickable-icon,
.oj-disabled a .oj-clickable-icon,
.oj-disabled.oj-clickable-icon,
.oj-disabled.oj-clickable-icon-nocontext {
  color: #966486;
  opacity: 1;
}

.oj-fwk-icon-load:before, .oj-listview-expanding-icon:before, .oj-rowexpander-lazyload-icon:before, .oj-tree-loading .oj-tree-icon:before,
.oj-collapsed a.oj-tree-loading > .oj-tree-node-icon.oj-tree-icon:before {
  content: url("../../../alta/12.0.0/common/images/node_anim.gif");
}
.oj-fwk-icon-status-confirmation, .oj-progressstatus-done-icon, .oj-message-status-icon.oj-message-confirmation-icon,
.oj-fwk-icon-status-info,
.oj-message-status-icon.oj-message-info-icon,
.oj-fwk-icon-status-warning,
.oj-message-status-icon.oj-message-warning-icon,
.oj-fwk-icon-status-error,
.oj-progressstatus-error-icon,
.oj-message-status-icon.oj-message-error-icon,
.oj-fwk-icon-folder-open,
.oj-expanded > .oj-treeview-item-content > .oj-treeview-item-icon,
.oj-expanded:not(.oj-tree-type) > a .oj-tree-node-icon,
.oj-fwk-icon-folder-collapsed,
.oj-collapsed > .oj-treeview-item-content > .oj-treeview-item-icon,
.oj-collapsed:not(.oj-tree-type) > a .oj-tree-node-icon,
.oj-fwk-icon-document,
.oj-treeview-leaf > .oj-treeview-item-content > .oj-treeview-item-icon,
.oj-tree-leaf:not(.oj-tree-type) a .oj-tree-node-icon {
  font-size: 16px;
}

.oj-fwk-icon-status-error2,
.oj-fwk-icon-status-warning2,
.oj-fwk-icon-status-info2,
.oj-fwk-icon-status-confirmation2 {
  font-size: 9px;
}

.oj-fwk-icon-cbsingle-hover-selected, .oj-selector:hover .oj-selector-wrapper.oj-selected {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-2px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-cbsingle-hover-selected, .oj-hicontrast .oj-selector:hover .oj-selector-wrapper.oj-selected, .oj-selector:hover .oj-hicontrast .oj-selector-wrapper.oj-selected {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-cbsingle-hover-selected:before, .oj-hicontrast .oj-selector:hover .oj-selector-wrapper.oj-selected:before, .oj-selector:hover .oj-hicontrast .oj-selector-wrapper.oj-selected:before {
  content: url("images/cbsingle_hover_selected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-cbsingle-hover-selected, .oj-selector:hover .oj-selector-wrapper.oj-selected {
    background-image: none;
  }
  .oj-fwk-icon-cbsingle-hover-selected:before, .oj-selector:hover .oj-selector-wrapper.oj-selected:before {
    content: url("images/cbsingle_hover_selected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-cbsingle-hover-unselected, .oj-selector:hover .oj-selector-wrapper:not(.oj-selected) {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-22px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-cbsingle-hover-unselected, .oj-hicontrast .oj-selector:hover .oj-selector-wrapper:not(.oj-selected), .oj-selector:hover .oj-hicontrast .oj-selector-wrapper:not(.oj-selected) {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-cbsingle-hover-unselected:before, .oj-hicontrast .oj-selector:hover .oj-selector-wrapper:not(.oj-selected):before, .oj-selector:hover .oj-hicontrast .oj-selector-wrapper:not(.oj-selected):before {
  content: url("images/cbsingle_hover_unselected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-cbsingle-hover-unselected, .oj-selector:hover .oj-selector-wrapper:not(.oj-selected) {
    background-image: none;
  }
  .oj-fwk-icon-cbsingle-hover-unselected:before, .oj-selector:hover .oj-selector-wrapper:not(.oj-selected):before {
    content: url("images/cbsingle_hover_unselected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-checkbox-dis-selected, .oj-checkboxset .oj-disabled.oj-selected .oj-radiocheckbox-icon, .oj-menucheckbox-icon.oj-selected.oj-disabled::after {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-42px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-checkbox-dis-selected, .oj-hicontrast .oj-checkboxset .oj-disabled.oj-selected .oj-radiocheckbox-icon, .oj-checkboxset .oj-disabled.oj-selected .oj-hicontrast .oj-radiocheckbox-icon, .oj-hicontrast .oj-menucheckbox-icon.oj-selected.oj-disabled::after {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-checkbox-dis-selected:before, .oj-hicontrast .oj-checkboxset .oj-disabled.oj-selected .oj-radiocheckbox-icon:before, .oj-checkboxset .oj-disabled.oj-selected .oj-hicontrast .oj-radiocheckbox-icon:before {
  content: url("images/checkbox_dis_selected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-checkbox-dis-selected, .oj-checkboxset .oj-disabled.oj-selected .oj-radiocheckbox-icon, .oj-menucheckbox-icon.oj-selected.oj-disabled::after {
    background-image: none;
  }
  .oj-fwk-icon-checkbox-dis-selected:before, .oj-checkboxset .oj-disabled.oj-selected .oj-radiocheckbox-icon:before {
    content: url("images/checkbox_dis_selected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-checkbox-dis-unselected, .oj-checkboxset .oj-disabled .oj-radiocheckbox-icon, .oj-menucheckbox-icon.oj-disabled::after {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-62px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-checkbox-dis-unselected, .oj-hicontrast .oj-checkboxset .oj-disabled .oj-radiocheckbox-icon, .oj-checkboxset .oj-disabled .oj-hicontrast .oj-radiocheckbox-icon, .oj-hicontrast .oj-menucheckbox-icon.oj-disabled::after {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-checkbox-dis-unselected:before, .oj-hicontrast .oj-checkboxset .oj-disabled .oj-radiocheckbox-icon:before, .oj-checkboxset .oj-disabled .oj-hicontrast .oj-radiocheckbox-icon:before {
  content: url("images/checkbox_dis_unselected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-checkbox-dis-unselected, .oj-checkboxset .oj-disabled .oj-radiocheckbox-icon, .oj-menucheckbox-icon.oj-disabled::after {
    background-image: none;
  }
  .oj-fwk-icon-checkbox-dis-unselected:before, .oj-checkboxset .oj-disabled .oj-radiocheckbox-icon:before {
    content: url("images/checkbox_dis_unselected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-checkbox-ena-selected, .oj-checkboxset .oj-selected .oj-radiocheckbox-icon, .oj-menucheckbox-icon.oj-selected::after {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-82px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-checkbox-ena-selected, .oj-hicontrast .oj-checkboxset .oj-selected .oj-radiocheckbox-icon, .oj-checkboxset .oj-selected .oj-hicontrast .oj-radiocheckbox-icon, .oj-hicontrast .oj-menucheckbox-icon.oj-selected::after {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-checkbox-ena-selected:before, .oj-hicontrast .oj-checkboxset .oj-selected .oj-radiocheckbox-icon:before, .oj-checkboxset .oj-selected .oj-hicontrast .oj-radiocheckbox-icon:before {
  content: url("images/checkbox_ena_selected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-checkbox-ena-selected, .oj-checkboxset .oj-selected .oj-radiocheckbox-icon, .oj-menucheckbox-icon.oj-selected::after {
    background-image: none;
  }
  .oj-fwk-icon-checkbox-ena-selected:before, .oj-checkboxset .oj-selected .oj-radiocheckbox-icon:before {
    content: url("images/checkbox_ena_selected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-checkbox-ena-unselected, .oj-checkboxset .oj-radiocheckbox-icon, .oj-menucheckbox-icon::after {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-102px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-checkbox-ena-unselected, .oj-hicontrast .oj-checkboxset .oj-radiocheckbox-icon, .oj-checkboxset .oj-hicontrast .oj-radiocheckbox-icon, .oj-hicontrast .oj-menucheckbox-icon::after {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-checkbox-ena-unselected:before, .oj-hicontrast .oj-checkboxset .oj-radiocheckbox-icon:before, .oj-checkboxset .oj-hicontrast .oj-radiocheckbox-icon:before {
  content: url("images/checkbox_ena_unselected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-checkbox-ena-unselected, .oj-checkboxset .oj-radiocheckbox-icon, .oj-menucheckbox-icon::after {
    background-image: none;
  }
  .oj-fwk-icon-checkbox-ena-unselected:before, .oj-checkboxset .oj-radiocheckbox-icon:before {
    content: url("images/checkbox_ena_unselected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-checkbox-pressed-selected, .oj-selector:active .oj-selector-wrapper.oj-selected, .oj-checkboxset-wrapper > .oj-active.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-122px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-checkbox-pressed-selected, .oj-hicontrast .oj-selector:active .oj-selector-wrapper.oj-selected, .oj-selector:active .oj-hicontrast .oj-selector-wrapper.oj-selected, .oj-hicontrast .oj-checkboxset-wrapper > .oj-active.oj-selected .oj-radiocheckbox-icon, .oj-checkboxset-wrapper > .oj-active.oj-selected .oj-hicontrast .oj-radiocheckbox-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-checkbox-pressed-selected:before, .oj-hicontrast .oj-selector:active .oj-selector-wrapper.oj-selected:before, .oj-selector:active .oj-hicontrast .oj-selector-wrapper.oj-selected:before, .oj-hicontrast .oj-checkboxset-wrapper > .oj-active.oj-selected .oj-radiocheckbox-icon:before, .oj-checkboxset-wrapper > .oj-active.oj-selected .oj-hicontrast .oj-radiocheckbox-icon:before {
  content: url("images/checkbox_pressed_selected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-checkbox-pressed-selected, .oj-selector:active .oj-selector-wrapper.oj-selected, .oj-checkboxset-wrapper > .oj-active.oj-selected .oj-radiocheckbox-icon {
    background-image: none;
  }
  .oj-fwk-icon-checkbox-pressed-selected:before, .oj-selector:active .oj-selector-wrapper.oj-selected:before, .oj-checkboxset-wrapper > .oj-active.oj-selected .oj-radiocheckbox-icon:before {
    content: url("images/checkbox_pressed_selected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-checkbox-pressed-unselected, .oj-selector:active .oj-selector-wrapper:not(.oj-selected), .oj-checkboxset-wrapper > .oj-active .oj-radiocheckbox-icon {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-142px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-checkbox-pressed-unselected, .oj-hicontrast .oj-selector:active .oj-selector-wrapper:not(.oj-selected), .oj-selector:active .oj-hicontrast .oj-selector-wrapper:not(.oj-selected), .oj-hicontrast .oj-checkboxset-wrapper > .oj-active .oj-radiocheckbox-icon, .oj-checkboxset-wrapper > .oj-active .oj-hicontrast .oj-radiocheckbox-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-checkbox-pressed-unselected:before, .oj-hicontrast .oj-selector:active .oj-selector-wrapper:not(.oj-selected):before, .oj-selector:active .oj-hicontrast .oj-selector-wrapper:not(.oj-selected):before, .oj-hicontrast .oj-checkboxset-wrapper > .oj-active .oj-radiocheckbox-icon:before, .oj-checkboxset-wrapper > .oj-active .oj-hicontrast .oj-radiocheckbox-icon:before {
  content: url("images/checkbox_pressed_unselected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-checkbox-pressed-unselected, .oj-selector:active .oj-selector-wrapper:not(.oj-selected), .oj-checkboxset-wrapper > .oj-active .oj-radiocheckbox-icon {
    background-image: none;
  }
  .oj-fwk-icon-checkbox-pressed-unselected:before, .oj-selector:active .oj-selector-wrapper:not(.oj-selected):before, .oj-checkboxset-wrapper > .oj-active .oj-radiocheckbox-icon:before {
    content: url("images/checkbox_pressed_unselected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-checkbox-tristate-partial {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-162px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-checkbox-tristate-partial {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-checkbox-tristate-partial:before {
  content: url("images/checkbox_tristate_partial.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-checkbox-tristate-partial {
    background-image: none;
  }
  .oj-fwk-icon-checkbox-tristate-partial:before {
    content: url("images/checkbox_tristate_partial.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-checkbox-tristate-selected, .oj-selector .oj-selector-wrapper.oj-selected {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-182px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-checkbox-tristate-selected, .oj-hicontrast .oj-selector .oj-selector-wrapper.oj-selected, .oj-selector .oj-hicontrast .oj-selector-wrapper.oj-selected {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-checkbox-tristate-selected:before, .oj-hicontrast .oj-selector .oj-selector-wrapper.oj-selected:before, .oj-selector .oj-hicontrast .oj-selector-wrapper.oj-selected:before {
  content: url("images/checkbox_tristate_selected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-checkbox-tristate-selected, .oj-selector .oj-selector-wrapper.oj-selected {
    background-image: none;
  }
  .oj-fwk-icon-checkbox-tristate-selected:before, .oj-selector .oj-selector-wrapper.oj-selected:before {
    content: url("images/checkbox_tristate_selected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-checkbox-tristate-unselected, .oj-selector .oj-selector-wrapper:not(.oj-selected) {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-202px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-checkbox-tristate-unselected, .oj-hicontrast .oj-selector .oj-selector-wrapper:not(.oj-selected), .oj-selector .oj-hicontrast .oj-selector-wrapper:not(.oj-selected) {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-checkbox-tristate-unselected:before, .oj-hicontrast .oj-selector .oj-selector-wrapper:not(.oj-selected):before, .oj-selector .oj-hicontrast .oj-selector-wrapper:not(.oj-selected):before {
  content: url("images/checkbox_tristate_unselected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-checkbox-tristate-unselected, .oj-selector .oj-selector-wrapper:not(.oj-selected) {
    background-image: none;
  }
  .oj-fwk-icon-checkbox-tristate-unselected:before, .oj-selector .oj-selector-wrapper:not(.oj-selected):before {
    content: url("images/checkbox_tristate_unselected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-checkmark-blue, .oj-train-button.oj-visited::before {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-222px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-checkmark-blue, .oj-hicontrast .oj-train-button.oj-visited::before {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-checkmark-blue:before, .oj-hicontrast .oj-train-button.oj-visited:before {
  content: url("images/checkmark_blue.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-checkmark-blue, .oj-train-button.oj-visited::before {
    background-image: none;
  }
  .oj-fwk-icon-checkmark-blue:before, .oj-train-button.oj-visited:before {
    content: url("images/checkmark_blue.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-checkmark-white, .oj-train-button.oj-hover.oj-visited::before {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-242px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-checkmark-white, .oj-hicontrast .oj-train-button.oj-hover.oj-visited::before {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-checkmark-white:before, .oj-hicontrast .oj-train-button.oj-hover.oj-visited:before {
  content: url("images/checkmark_white.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-checkmark-white, .oj-train-button.oj-hover.oj-visited::before {
    background-image: none;
  }
  .oj-fwk-icon-checkmark-white:before, .oj-train-button.oj-hover.oj-visited:before {
    content: url("images/checkmark_white.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-move-handle, .oj-listview-drag-handle {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-262px * 1) calc(-2px * 1);
  width: calc(28px * 1);
  height: calc(15px * 1);
}

.oj-hicontrast .oj-fwk-icon-move-handle, .oj-hicontrast .oj-listview-drag-handle {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-move-handle:before, .oj-hicontrast .oj-listview-drag-handle:before {
  content: url("images/move_handle.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-move-handle, .oj-listview-drag-handle {
    background-image: none;
  }
  .oj-fwk-icon-move-handle:before, .oj-listview-drag-handle:before {
    content: url("images/move_handle.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-radio-dis-selected, .oj-radioset .oj-disabled.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-294px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-radio-dis-selected, .oj-hicontrast .oj-radioset .oj-disabled.oj-selected .oj-radiocheckbox-icon, .oj-radioset .oj-disabled.oj-selected .oj-hicontrast .oj-radiocheckbox-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-radio-dis-selected:before, .oj-hicontrast .oj-radioset .oj-disabled.oj-selected .oj-radiocheckbox-icon:before, .oj-radioset .oj-disabled.oj-selected .oj-hicontrast .oj-radiocheckbox-icon:before {
  content: url("images/radio_dis_selected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-radio-dis-selected, .oj-radioset .oj-disabled.oj-selected .oj-radiocheckbox-icon {
    background-image: none;
  }
  .oj-fwk-icon-radio-dis-selected:before, .oj-radioset .oj-disabled.oj-selected .oj-radiocheckbox-icon:before {
    content: url("images/radio_dis_selected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-radio-dis-unselected, .oj-radioset .oj-disabled .oj-radiocheckbox-icon {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-314px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-radio-dis-unselected, .oj-hicontrast .oj-radioset .oj-disabled .oj-radiocheckbox-icon, .oj-radioset .oj-disabled .oj-hicontrast .oj-radiocheckbox-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-radio-dis-unselected:before, .oj-hicontrast .oj-radioset .oj-disabled .oj-radiocheckbox-icon:before, .oj-radioset .oj-disabled .oj-hicontrast .oj-radiocheckbox-icon:before {
  content: url("images/radio_dis_unselected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-radio-dis-unselected, .oj-radioset .oj-disabled .oj-radiocheckbox-icon {
    background-image: none;
  }
  .oj-fwk-icon-radio-dis-unselected:before, .oj-radioset .oj-disabled .oj-radiocheckbox-icon:before {
    content: url("images/radio_dis_unselected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-radio-ena-selected, .oj-radioset .oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-334px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-radio-ena-selected, .oj-hicontrast .oj-radioset .oj-selected .oj-radiocheckbox-icon, .oj-radioset .oj-selected .oj-hicontrast .oj-radiocheckbox-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-radio-ena-selected:before, .oj-hicontrast .oj-radioset .oj-selected .oj-radiocheckbox-icon:before, .oj-radioset .oj-selected .oj-hicontrast .oj-radiocheckbox-icon:before {
  content: url("images/radio_ena_selected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-radio-ena-selected, .oj-radioset .oj-selected .oj-radiocheckbox-icon {
    background-image: none;
  }
  .oj-fwk-icon-radio-ena-selected:before, .oj-radioset .oj-selected .oj-radiocheckbox-icon:before {
    content: url("images/radio_ena_selected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-radio-ena-unselected, .oj-radioset .oj-radiocheckbox-icon {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-354px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-radio-ena-unselected, .oj-hicontrast .oj-radioset .oj-radiocheckbox-icon, .oj-radioset .oj-hicontrast .oj-radiocheckbox-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-radio-ena-unselected:before, .oj-hicontrast .oj-radioset .oj-radiocheckbox-icon:before, .oj-radioset .oj-hicontrast .oj-radiocheckbox-icon:before {
  content: url("images/radio_ena_unselected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-radio-ena-unselected, .oj-radioset .oj-radiocheckbox-icon {
    background-image: none;
  }
  .oj-fwk-icon-radio-ena-unselected:before, .oj-radioset .oj-radiocheckbox-icon:before {
    content: url("images/radio_ena_unselected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-radio-pressed-selected, .oj-radioset-wrapper > .oj-selected.oj-active .oj-radiocheckbox-icon {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-374px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-radio-pressed-selected, .oj-hicontrast .oj-radioset-wrapper > .oj-selected.oj-active .oj-radiocheckbox-icon, .oj-radioset-wrapper > .oj-selected.oj-active .oj-hicontrast .oj-radiocheckbox-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-radio-pressed-selected:before, .oj-hicontrast .oj-radioset-wrapper > .oj-selected.oj-active .oj-radiocheckbox-icon:before, .oj-radioset-wrapper > .oj-selected.oj-active .oj-hicontrast .oj-radiocheckbox-icon:before {
  content: url("images/radio_pressed_selected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-radio-pressed-selected, .oj-radioset-wrapper > .oj-selected.oj-active .oj-radiocheckbox-icon {
    background-image: none;
  }
  .oj-fwk-icon-radio-pressed-selected:before, .oj-radioset-wrapper > .oj-selected.oj-active .oj-radiocheckbox-icon:before {
    content: url("images/radio_pressed_selected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-radio-pressed-unselected, .oj-radioset-wrapper > .oj-active .oj-radiocheckbox-icon {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-394px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-radio-pressed-unselected, .oj-hicontrast .oj-radioset-wrapper > .oj-active .oj-radiocheckbox-icon, .oj-radioset-wrapper > .oj-active .oj-hicontrast .oj-radiocheckbox-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-radio-pressed-unselected:before, .oj-hicontrast .oj-radioset-wrapper > .oj-active .oj-radiocheckbox-icon:before, .oj-radioset-wrapper > .oj-active .oj-hicontrast .oj-radiocheckbox-icon:before {
  content: url("images/radio_pressed_unselected.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-radio-pressed-unselected, .oj-radioset-wrapper > .oj-active .oj-radiocheckbox-icon {
    background-image: none;
  }
  .oj-fwk-icon-radio-pressed-unselected:before, .oj-radioset-wrapper > .oj-active .oj-radiocheckbox-icon:before {
    content: url("images/radio_pressed_unselected.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-spinner-00, .oj-pulltorefresh-icon-initial {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-414px * 1) calc(-2px * 1);
  width: calc(40px * 1);
  height: calc(40px * 1);
}

.oj-hicontrast .oj-fwk-icon-spinner-00, .oj-hicontrast .oj-pulltorefresh-icon-initial {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-spinner-00:before, .oj-hicontrast .oj-pulltorefresh-icon-initial:before {
  content: url("images/spinner_00.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-spinner-00, .oj-pulltorefresh-icon-initial {
    background-image: none;
  }
  .oj-fwk-icon-spinner-00:before, .oj-pulltorefresh-icon-initial:before {
    content: url("images/spinner_00.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-spinner-10, .oj-pulltorefresh-icon-10-percent {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-458px * 1) calc(-2px * 1);
  width: calc(40px * 1);
  height: calc(40px * 1);
}

.oj-hicontrast .oj-fwk-icon-spinner-10, .oj-hicontrast .oj-pulltorefresh-icon-10-percent {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-spinner-10:before, .oj-hicontrast .oj-pulltorefresh-icon-10-percent:before {
  content: url("images/spinner_10.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-spinner-10, .oj-pulltorefresh-icon-10-percent {
    background-image: none;
  }
  .oj-fwk-icon-spinner-10:before, .oj-pulltorefresh-icon-10-percent:before {
    content: url("images/spinner_10.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-spinner-20, .oj-pulltorefresh-icon-20-percent {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-502px * 1) calc(-2px * 1);
  width: calc(40px * 1);
  height: calc(40px * 1);
}

.oj-hicontrast .oj-fwk-icon-spinner-20, .oj-hicontrast .oj-pulltorefresh-icon-20-percent {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-spinner-20:before, .oj-hicontrast .oj-pulltorefresh-icon-20-percent:before {
  content: url("images/spinner_20.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-spinner-20, .oj-pulltorefresh-icon-20-percent {
    background-image: none;
  }
  .oj-fwk-icon-spinner-20:before, .oj-pulltorefresh-icon-20-percent:before {
    content: url("images/spinner_20.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-spinner-30, .oj-pulltorefresh-icon-30-percent {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-546px * 1) calc(-2px * 1);
  width: calc(40px * 1);
  height: calc(40px * 1);
}

.oj-hicontrast .oj-fwk-icon-spinner-30, .oj-hicontrast .oj-pulltorefresh-icon-30-percent {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-spinner-30:before, .oj-hicontrast .oj-pulltorefresh-icon-30-percent:before {
  content: url("images/spinner_30.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-spinner-30, .oj-pulltorefresh-icon-30-percent {
    background-image: none;
  }
  .oj-fwk-icon-spinner-30:before, .oj-pulltorefresh-icon-30-percent:before {
    content: url("images/spinner_30.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-spinner-40, .oj-pulltorefresh-icon-40-percent {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-590px * 1) calc(-2px * 1);
  width: calc(40px * 1);
  height: calc(40px * 1);
}

.oj-hicontrast .oj-fwk-icon-spinner-40, .oj-hicontrast .oj-pulltorefresh-icon-40-percent {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-spinner-40:before, .oj-hicontrast .oj-pulltorefresh-icon-40-percent:before {
  content: url("images/spinner_40.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-spinner-40, .oj-pulltorefresh-icon-40-percent {
    background-image: none;
  }
  .oj-fwk-icon-spinner-40:before, .oj-pulltorefresh-icon-40-percent:before {
    content: url("images/spinner_40.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-spinner-50, .oj-pulltorefresh-icon-50-percent {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-634px * 1) calc(-2px * 1);
  width: calc(40px * 1);
  height: calc(40px * 1);
}

.oj-hicontrast .oj-fwk-icon-spinner-50, .oj-hicontrast .oj-pulltorefresh-icon-50-percent {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-spinner-50:before, .oj-hicontrast .oj-pulltorefresh-icon-50-percent:before {
  content: url("images/spinner_50.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-spinner-50, .oj-pulltorefresh-icon-50-percent {
    background-image: none;
  }
  .oj-fwk-icon-spinner-50:before, .oj-pulltorefresh-icon-50-percent:before {
    content: url("images/spinner_50.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-spinner-60, .oj-pulltorefresh-icon-60-percent {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-678px * 1) calc(-2px * 1);
  width: calc(40px * 1);
  height: calc(40px * 1);
}

.oj-hicontrast .oj-fwk-icon-spinner-60, .oj-hicontrast .oj-pulltorefresh-icon-60-percent {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-spinner-60:before, .oj-hicontrast .oj-pulltorefresh-icon-60-percent:before {
  content: url("images/spinner_60.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-spinner-60, .oj-pulltorefresh-icon-60-percent {
    background-image: none;
  }
  .oj-fwk-icon-spinner-60:before, .oj-pulltorefresh-icon-60-percent:before {
    content: url("images/spinner_60.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-spinner-70, .oj-pulltorefresh-icon-70-percent {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-722px * 1) calc(-2px * 1);
  width: calc(40px * 1);
  height: calc(40px * 1);
}

.oj-hicontrast .oj-fwk-icon-spinner-70, .oj-hicontrast .oj-pulltorefresh-icon-70-percent {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-spinner-70:before, .oj-hicontrast .oj-pulltorefresh-icon-70-percent:before {
  content: url("images/spinner_70.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-spinner-70, .oj-pulltorefresh-icon-70-percent {
    background-image: none;
  }
  .oj-fwk-icon-spinner-70:before, .oj-pulltorefresh-icon-70-percent:before {
    content: url("images/spinner_70.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-spinner-80, .oj-pulltorefresh-icon-80-percent {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-766px * 1) calc(-2px * 1);
  width: calc(40px * 1);
  height: calc(40px * 1);
}

.oj-hicontrast .oj-fwk-icon-spinner-80, .oj-hicontrast .oj-pulltorefresh-icon-80-percent {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-spinner-80:before, .oj-hicontrast .oj-pulltorefresh-icon-80-percent:before {
  content: url("images/spinner_80.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-spinner-80, .oj-pulltorefresh-icon-80-percent {
    background-image: none;
  }
  .oj-fwk-icon-spinner-80:before, .oj-pulltorefresh-icon-80-percent:before {
    content: url("images/spinner_80.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-spinner-90, .oj-pulltorefresh-icon-90-percent {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-810px * 1) calc(-2px * 1);
  width: calc(40px * 1);
  height: calc(40px * 1);
}

.oj-hicontrast .oj-fwk-icon-spinner-90, .oj-hicontrast .oj-pulltorefresh-icon-90-percent {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-spinner-90:before, .oj-hicontrast .oj-pulltorefresh-icon-90-percent:before {
  content: url("images/spinner_90.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-spinner-90, .oj-pulltorefresh-icon-90-percent {
    background-image: none;
  }
  .oj-fwk-icon-spinner-90:before, .oj-pulltorefresh-icon-90-percent:before {
    content: url("images/spinner_90.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-spinner-static, .oj-progress-circle-overlay {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-854px * 1) calc(-2px * 1);
  width: calc(32px * 1);
  height: calc(32px * 1);
}

.oj-hicontrast .oj-fwk-icon-spinner-static, .oj-hicontrast .oj-progress-circle-overlay {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-spinner-static:before, .oj-hicontrast .oj-progress-circle-overlay:before {
  content: url("images/spinner_static.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-spinner-static, .oj-progress-circle-overlay {
    background-image: none;
  }
  .oj-fwk-icon-spinner-static:before, .oj-progress-circle-overlay:before {
    content: url("images/spinner_static.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-status-confirmation, .oj-progressstatus-done-icon, .oj-message-status-icon.oj-message-confirmation-icon {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-890px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-status-confirmation, .oj-hicontrast .oj-progressstatus-done-icon, .oj-hicontrast .oj-message-status-icon.oj-message-confirmation-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-status-confirmation:before, .oj-hicontrast .oj-progressstatus-done-icon:before, .oj-hicontrast .oj-message-status-icon.oj-message-confirmation-icon:before {
  content: url("images/status_confirmation.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-status-confirmation, .oj-progressstatus-done-icon, .oj-message-status-icon.oj-message-confirmation-icon {
    background-image: none;
  }
  .oj-fwk-icon-status-confirmation:before, .oj-progressstatus-done-icon:before, .oj-message-status-icon.oj-message-confirmation-icon:before {
    content: url("images/status_confirmation.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-status-error, .oj-progressstatus-error-icon, .oj-message-status-icon.oj-message-error-icon {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-910px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-status-error, .oj-hicontrast .oj-progressstatus-error-icon, .oj-hicontrast .oj-message-status-icon.oj-message-error-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-status-error:before, .oj-hicontrast .oj-progressstatus-error-icon:before, .oj-hicontrast .oj-message-status-icon.oj-message-error-icon:before {
  content: url("images/status_error.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-status-error, .oj-progressstatus-error-icon, .oj-message-status-icon.oj-message-error-icon {
    background-image: none;
  }
  .oj-fwk-icon-status-error:before, .oj-progressstatus-error-icon:before, .oj-message-status-icon.oj-message-error-icon:before {
    content: url("images/status_error.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-status-info, .oj-message-status-icon.oj-message-info-icon {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-930px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-status-info, .oj-hicontrast .oj-message-status-icon.oj-message-info-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-status-info:before, .oj-hicontrast .oj-message-status-icon.oj-message-info-icon:before {
  content: url("images/status_info.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-status-info, .oj-message-status-icon.oj-message-info-icon {
    background-image: none;
  }
  .oj-fwk-icon-status-info:before, .oj-message-status-icon.oj-message-info-icon:before {
    content: url("images/status_info.svg");
    width: 100%;
    height: 100%;
  }
}
.oj-fwk-icon-status-warning, .oj-message-status-icon.oj-message-warning-icon {
  background-image: url("images/sprites/sprite.svg");
  background-size: calc(968px * 1) calc(44px * 1);
  background-position: calc(-950px * 1) calc(-2px * 1);
  width: calc(16px * 1);
  height: calc(16px * 1);
}

.oj-hicontrast .oj-fwk-icon-status-warning, .oj-hicontrast .oj-message-status-icon.oj-message-warning-icon {
  background-image: none;
}

.oj-hicontrast .oj-fwk-icon-status-warning:before, .oj-hicontrast .oj-message-status-icon.oj-message-warning-icon:before {
  content: url("images/status_warning.svg");
  width: 100%;
  height: 100%;
}

/* autoprefixer: ignore next */
@media print, (max-resolution: 0.99dppx) {
  .oj-fwk-icon-status-warning, .oj-message-status-icon.oj-message-warning-icon {
    background-image: none;
  }
  .oj-fwk-icon-status-warning:before, .oj-message-status-icon.oj-message-warning-icon:before {
    content: url("images/status_warning.svg");
    width: 100%;
    height: 100%;
  }
}
/* resizable */
/* --------------------------------------------------------------- */
.oj-resizable {
  position: relative;
}

.oj-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  z-index: 900;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.oj-resizable-disabled .oj-resizable-handle,
.oj-resizable-autohide .oj-resizable-handle {
  display: none;
}

.oj-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.oj-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.oj-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.oj-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.oj-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

.oj-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.oj-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.oj-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

.oj-panel {
  border: 1px solid hsl(203, 2%, 88%);
  background-color: hsl(203, 2%, 100%);
  border-radius: 1px;
  padding: 0.85714rem;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.oj-panel-alt1 {
  background-color: hsl(203, 2%, 95%);
  border-color: hsl(203, 2%, 88%);
}

.oj-panel-alt2 {
  background-color: #e8f2fb;
  border-color: rgb(208.9652777778, 229.7913011696, 248.5347222222);
}

.oj-panel-alt3 {
  background-color: #fef9e8;
  border-color: rgb(254.175, 243.3, 206.325);
}

.oj-panel-alt4 {
  background-color: #ffe4e1;
  border-color: #ffcdc8;
}

.oj-panel-alt5 {
  background-color: #fce8fe;
  border-color: rgb(249.825, 206.325, 254.175);
}

.oj-panel.oj-selected {
  border-color: #027bc7;
}

.oj-hicontrast .oj-panel.oj-selected {
  border-width: 3px;
}

.oj-panel-shadow-sm {
  box-shadow: 0 2px 2px 0 hsla(0, 0%, 0%,0.14), 0 3px 1px -2px hsla(0, 0%, 0%,0.2), 0 1px 5px 0 hsla(0, 0%, 0%,0.12);
}

.oj-panel-shadow-md {
  box-shadow: 0 4px 5px 0 hsla(0, 0%, 0%,0.14), 0 1px 10px 0 hsla(0, 0%, 0%,0.12), 0 2px 4px -1px hsla(0, 0%, 0%,0.2);
}

.oj-panel-shadow-lg {
  box-shadow: 0 6px 10px 0 hsla(0, 0%, 0%,0.14), 0 1px 18px 0 hsla(0, 0%, 0%,0.12), 0 3px 5px -1px hsla(0, 0%, 0%,0.2);
}

.oj-panel-drag-handle {
  text-align: center;
  vertical-align: middle;
  cursor: move;
  height: 20px;
  line-height: 20px;
  margin-top: calc(0px - 0.85714rem);
  margin-left: calc(0px - 0.85714rem);
  margin-right: calc(0px - 0.85714rem);
}

.oj-panel-resize-button,
.oj-panel-remove-button,
.oj-panel-resize-button.oj-button,
.oj-panel-remove-button.oj-button {
  position: absolute;
  margin-bottom: 0;
  overflow: hidden;
  width: 2.28571rem;
}
html:not([dir=rtl]) .oj-panel-resize-button,
html:not([dir=rtl]) .oj-panel-remove-button,
html:not([dir=rtl]) .oj-panel-resize-button.oj-button,
html:not([dir=rtl]) .oj-panel-remove-button.oj-button {
  right: 0;
}
html[dir=rtl] .oj-panel-resize-button,
html[dir=rtl] .oj-panel-remove-button,
html[dir=rtl] .oj-panel-resize-button.oj-button,
html[dir=rtl] .oj-panel-remove-button.oj-button {
  left: 0;
}

.oj-panel-resize-button {
  bottom: 0;
}

.oj-panel-remove-button {
  top: 0;
}

.oj-panel-resize-button .oj-panel-expand-icon.oj-end,
.oj-panel-resize-button .oj-panel-collapse-icon.oj-end,
.oj-panel-remove-button .oj-panel-remove-icon.oj-end {
  margin-left: auto;
  margin-right: auto;
}

oj-collapsible:not(.oj-complete) {
  visibility: hidden;
}

oj-collapsible {
  display: block;
}

.oj-collapsible {
  margin-bottom: 10px;
  -webkit-tap-highlight-color: transparent;
}

/* collapsible with "showDetail" style */
/* ------------------------------------*/
/*
 * this is the default style for collapsible header
 */
.oj-collapsible-header {
  color: hsla(0, 0%, 0%, 0.85);
  display: flex;
  align-items: center;
  flex-grow: 1;
  position: relative;
  margin: 0;
}

.oj-collapsible-header-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  padding: var(--oj-core-spacing-1x) 0;
  margin: 0;
}

/*
 * this is the default style for collapsible content
 */
.oj-collapsible-content {
  color: hsla(0, 0%, 0%, 0.8);
  background-color: transparent;
  padding: 4px 0 0;
  margin: 0;
}

/*
 * add more padding between header and collapsible content when header has a border
 */
.oj-header-border + .oj-collapsible-wrapper > .oj-collapsible-content {
  padding-top: 7px;
  padding-bottom: 4px;
}

/*
 * specify sizes for h1 - h4 collapsible header
 */
h1.oj-collapsible-header {
  font-size: 2.42857rem;
}

h2.oj-collapsible-header {
  font-size: 1.71429rem;
}

h3.oj-collapsible-header {
  font-size: 1.42857rem;
}

h4.oj-collapsible-header {
  font-size: 1.28571rem;
}

/*
  * ignore original header border, it's moved to the wraper
  */
.oj-collapsible-header.oj-header-border {
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * applied to the disabled collapsible header
 */
.oj-collapsible.oj-disabled .oj-collapsible-header {
  color: hsla(0, 0%, 0%, 0.38);
}

/*
 * remove top padding for the first nested collapsible
 */
.oj-collapsible-content > .oj-collapsible:first-child > .oj-collapsible-header-wrapper {
  padding-top: 0;
}

/* collapsible content transition effects */
/* -------------------------------------- */
/*
 * transtion properties and duration
 */
.oj-collapsible-transition {
  transition: max-height 0.4s;
}

/*
 * applied to the wrapper of the collapsible content.
 */
.oj-collapsible-wrapper {
  border: 0;
  padding: 0;
  margin: 0;
}

/* suppress all browser decorations of anchors in the header */
/* --------------------------------------------------------- */
.oj-collapsible-header-wrapper a,
.oj-collapsible-header-wrapper a:active,
.oj-collapsible-header-wrapper a:visited,
.oj-collapsible-header-wrapper a:hover,
.oj-collapsible-header-wrapper a:focus {
  text-decoration: none;
}

/* disclosure icons for headers */
/* -----------------------------*/
.oj-collapsible-header-icon {
  padding: 5px 3px 5px 5px;
  outline-offset: -5px;
}

.oj-collapsible-header-icon:not(.oj-focus-highlight):focus {
  outline: none;
}

/*
 * set hand cursor while over the clickable area
 */
.oj-collapsible-header-wrapper.oj-hover * {
  cursor: pointer;
}

/*
 * applied to the disclosure icon
 */
.oj-collapsible-header-wrapper .oj-collapsible-header-icon,
.oj-collapsible-header-wrapper .oj-collapsible-header-icon:hover {
  color: hsla(0, 0%, 0%, 0.8);
}

/*
 * applied to the disclosure icon when it's hovered
 * add .oj-collapsible-header .oj-collapsible-header-icon.oj-hover
 * to override color set in a:hover.oj-clickable-icon-nocontext
 */
.oj-collapsible-header-wrapper.oj-hover .oj-collapsible-header-icon,
.oj-collapsible-header-wrapper .oj-collapsible-header-icon.oj-hover {
  color: #966486;
}

/*
 * applied to the disclosure icon when it's active
 */
.oj-collapsible-header-wrapper.oj-active .oj-collapsible-header-icon,
.oj-collapsible-header-wrapper .oj-collapsible-header-icon.oj-active {
  color: #966486;
}

/*
 * For disabled header icons
 */
.oj-collapsible.oj-disabled > .oj-collapsible-header-wrapper > .oj-collapsible-header-icon {
  color: #966486;
  opacity: 1;
}

.oj-collapsible-header .oj-collapsible-header-icon {
  /*
   * For a basic collapsible (not in an accordion)
   * the closed font icon has some whitespace on the left side,
   * use a negative margin to move over the icon
   */
}
html:not([dir=rtl]) .oj-collapsible-header .oj-collapsible-header-icon {
  margin-left: -7px;
}
html[dir=rtl] .oj-collapsible-header .oj-collapsible-header-icon {
  margin-right: -7px;
}

/* accordion */
/* --------------------------------------------------------------- */
oj-accordion:not(.oj-complete) {
  visibility: hidden;
}

oj-accordion {
  display: block;
}

/*
 * applied to the disabled accordion headerd
 */
.oj-accordion-collapsible.oj-disabled > .oj-collapsible-header-wrapper {
  color: hsla(0, 0%, 0%, 0.38);
  background-color: hsl(203, 2%, 98%);
  background-image: none;
}

/*
 * need to reset margin (bottom) here because it's being set in collapsible
 */
.oj-collapsible.oj-accordion-collapsible {
  margin: 0;
}

/*
 * applied to the accordion header but not to any nested collapsible headers
 */
.oj-accordion-collapsible > .oj-collapsible-header-wrapper {
  padding-top: 3px;
  padding-bottom: 3px;
  border: 0 solid hsl(203, 2%, 90%);
  border-width: 1px;
  font-size: 1.42857rem;
  background-color: hsl(203, 2%, 95%);
}

/*
 * applied to the accordion header but not to any nested collapsible headers
 */
.oj-accordion-collapsible > .oj-collapsible-header-wrapper > .oj-collapsible-header {
  font-size: 1.42857rem;
  background-color: hsl(203, 2%, 95%);
  background-image: none;
}

/*
 * need to restore top padding for the first nested collapsible,
 * because it's being reset in collapsible
 */
.oj-collapsible-content > .oj-accordion-collapsible.oj-collapsible:first-child > .oj-collapsible-header-wrapper {
  padding-top: 3px;
}

/*
 * need to reset margin because it's being set in collapsible to -7px
 */
.oj-accordion-collapsible > .oj-collapsible-header-wrapper > .oj-collapsible-header-icon {
  padding: 9px;
  outline-offset: -9px;
}
html:not([dir=rtl]) .oj-accordion-collapsible > .oj-collapsible-header-wrapper > .oj-collapsible-header-icon {
  margin: 0;
}
html[dir=rtl] .oj-accordion-collapsible > .oj-collapsible-header-wrapper > .oj-collapsible-header-icon {
  margin: 0;
}

/*
 * applied to the accordion content but not to any nested collapsible contents
 */
.oj-accordion-collapsible > .oj-collapsible-wrapper > .oj-collapsible-content {
  padding: 0.85714rem;
}

/*
 * applied to the accordion header border bottom when collapsed
 */
.oj-accordion-collapsible.oj-collapsed > .oj-collapsible-header-wrapper {
  border-width: 1px 1px 0;
}

/*
 * applied to the accordion header border for the last child when collapsed
 */
.oj-accordion-collapsible.oj-collapsed:last-child > .oj-collapsible-header-wrapper {
  border-bottom-width: 1px;
}

/* conveyorbelt */
/* --------------------------------------------------------------- */
oj-conveyor-belt:not(.oj-complete) {
  visibility: hidden;
}

oj-conveyor-belt {
  display: block;
}

.oj-conveyorbelt {
  position: relative;
}

.oj-conveyorbelt,
.oj-conveyorbelt-overflow-container,
.oj-conveyorbelt-content-container {
  display: flex;
  align-items: center;
}

.oj-conveyorbelt-content-container,
.oj-conveyorbelt-overflow-container {
  height: 100%;
}

.oj-conveyorbelt.oj-conveyorbelt-vertical .oj-conveyorbelt-content-container {
  height: auto;
}

.oj-conveyorbelt.oj-conveyorbelt-vertical {
  display: inline-flex;
}

.oj-conveyorbelt.oj-conveyorbelt-vertical,
.oj-conveyorbelt.oj-conveyorbelt-vertical > .oj-conveyorbelt-overflow-container,
.oj-conveyorbelt.oj-conveyorbelt-vertical > .oj-conveyorbelt-overflow-container > .oj-conveyorbelt-content-container {
  flex-direction: column;
}

.oj-conveyorbelt-overflow-container {
  overflow: hidden;
  flex: 1 1 auto;
}

.oj-conveyorbelt-content-container {
  position: relative;
  flex: 1 0 auto;
}

.oj-conveyorbelt-item {
  flex: 0 0 auto;
}

.oj-conveyorbelt-item.oj-navigationlist,
.oj-conveyorbelt-item.oj-tabbar {
  flex: 1 0 auto;
}

/* overflow indicators */
.oj-conveyorbelt-overflow-indicator {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.28571rem;
  height: 2.28571rem;
  line-height: 2.28571rem;
  cursor: default;
  border-radius: 2px;
  text-align: center;
  border: 1px solid;
  flex: 0 0 auto;
  position: relative;
}

.oj-conveyorbelt-overflow-indicator.oj-default {
  border-color: transparent;
}

.oj-conveyorbelt-overflow-indicator.oj-hover {
  background-color: hsl(203, 2%, 97%);
  background-image: none;
  border-color: #966486;
}

.oj-conveyorbelt-overflow-indicator.oj-active,
.oj-conveyorbelt-overflow-indicator.oj-active.oj-hover {
  background-color: #966486;
  background-image: none;
  border-color: #966486;
  opacity: 1;
}

/* overflow icons */
.oj-conveyorbelt-overflow-indicator .oj-conveyorbelt-overflow-icon {
  cursor: inherit;
  vertical-align: middle;
  margin-bottom: 3px;
}

.oj-conveyorbelt-overflow-indicator.oj-default .oj-conveyorbelt-overflow-icon {
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-conveyorbelt-overflow-indicator.oj-hover .oj-conveyorbelt-overflow-icon {
  color: #966486;
}

.oj-conveyorbelt-overflow-indicator.oj-active .oj-conveyorbelt-overflow-icon,
.oj-conveyorbelt-overflow-indicator.oj-active.oj-hover .oj-conveyorbelt-overflow-icon {
  color: hsl(203, 2%, 100%);
}

/* filmstrip */
/* --------------------------------------------------------------- */
oj-film-strip:not(.oj-complete) {
  visibility: hidden;
}

.oj-filmstrip {
  min-height: 1px;
  min-width: 1px;
  overflow: hidden;
}

.oj-filmstrip:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-filmstrip-container {
  position: relative;
  display: flex;
}

.oj-filmstrip-vertical.oj-filmstrip-container,
.oj-filmstrip-vertical .oj-filmstrip-container {
  flex-direction: column;
}

.oj-filmstrip-content-container {
  overflow: hidden;
}

.oj-filmstrip-pages-container,
.oj-filmstrip-page,
.oj-filmstrip-content-container {
  flex-grow: 1;
  flex-shrink: 0;
}

.oj-filmstrip-item-container {
  align-items: center;
  justify-content: space-around;
}

.oj-filmstrip-item {
  flex-grow: 0;
  flex-shrink: 0;
}

.oj-filmstrip-transition {
  transition: transform 0.4s;
  transition-timing-function: ease-in-out;
}

.oj-filmstrip-transition-display-as-firstpage {
  order: -1;
}

.oj-filmstrip-transition-display-as-lastpage {
  order: 1;
}

html:not([dir=rtl]) .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-next-oldpage-to,
html:not([dir=rtl]) .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-next-newpage-to {
  transform: translate3d(-100%, 0, 0);
}
html[dir=rtl] .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-next-oldpage-to,
html[dir=rtl] .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-next-newpage-to {
  transform: translate3d(100%, 0, 0);
}

html:not([dir=rtl]) .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-prev-oldpage-to,
html:not([dir=rtl]) .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-prev-newpage-to {
  transform: translate3d(100%, 0, 0);
}
html[dir=rtl] .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-prev-oldpage-to,
html[dir=rtl] .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-prev-newpage-to {
  transform: translate3d(-100%, 0, 0);
}

.oj-filmstrip.oj-filmstrip-vertical .oj-filmstrip-transition-next-oldpage-to,
.oj-filmstrip.oj-filmstrip-vertical .oj-filmstrip-transition-next-newpage-to {
  transform: translate3d(0, -100%, 0);
}

.oj-filmstrip.oj-filmstrip-vertical .oj-filmstrip-transition-prev-oldpage-to,
.oj-filmstrip.oj-filmstrip-vertical .oj-filmstrip-transition-prev-newpage-to {
  transform: translate3d(0, 100%, 0);
}

/* navigation arrows */
.oj-filmstrip-arrow-container {
  display: flex;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  align-self: center;
}

.oj-filmstrip-vertical .oj-filmstrip-arrow-container {
  flex-direction: column;
}

.oj-filmstrip-arrow-container-overlay {
  position: absolute;
}

html:not([dir=rtl]) .oj-filmstrip-arrow-container-overlay.oj-start {
  left: 0;
}
html[dir=rtl] .oj-filmstrip-arrow-container-overlay.oj-start {
  right: 0;
}

html:not([dir=rtl]) .oj-filmstrip-arrow-container-overlay.oj-end {
  right: 0;
}
html[dir=rtl] .oj-filmstrip-arrow-container-overlay.oj-end {
  left: 0;
}

.oj-filmstrip-arrow-container-overlay.oj-start,
.oj-filmstrip-arrow-container-overlay.oj-end {
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

.oj-filmstrip-arrow-container-overlay.oj-top {
  top: 0;
}

.oj-filmstrip-arrow-container-overlay.oj-bottom {
  bottom: 0;
}

html:not([dir=rtl]) .oj-filmstrip-arrow-container-overlay.oj-top,
html:not([dir=rtl]) .oj-filmstrip-arrow-container-overlay.oj-bottom {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
html[dir=rtl] .oj-filmstrip-arrow-container-overlay.oj-top,
html[dir=rtl] .oj-filmstrip-arrow-container-overlay.oj-bottom {
  right: 50%;
  transform: translate3d(50%, 0, 0);
}

.oj-filmstrip-arrow {
  box-sizing: border-box;
  width: 2.28571rem;
  height: 2.28571rem;
  line-height: 2.28571rem;
  cursor: default;
  border-radius: 2px;
  opacity: 1;
  text-align: center;
  border: 1px solid;
  display: inline-block;
  outline: none;
}

.oj-filmstrip-arrow.oj-default {
  border-color: transparent;
}

.oj-filmstrip-arrow.oj-hover {
  background-color: hsl(203, 2%, 97%);
  background-image: none;
  border-color: #966486;
}

.oj-filmstrip-arrow.oj-active,
.oj-filmstrip-arrow.oj-active.oj-hover {
  background-color: #966486;
  background-image: none;
  border-color: #966486;
  opacity: 1;
}

/* navigation arrow icons */
.oj-filmstrip-arrow .oj-filmstrip-arrow-icon {
  cursor: inherit;
  vertical-align: middle;
  margin-bottom: 5px;
}

.oj-filmstrip-arrow.oj-default .oj-filmstrip-arrow-icon {
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-filmstrip-arrow.oj-hover .oj-filmstrip-arrow-icon {
  color: #966486;
}

.oj-filmstrip-arrow.oj-active .oj-filmstrip-arrow-icon,
.oj-filmstrip-arrow.oj-active.oj-hover .oj-filmstrip-arrow-icon {
  color: hsl(203, 2%, 100%);
}

.oj-filmstrip-arrow-transition {
  transition: opacity 0.25s;
  transition-timing-function: ease-in-out;
}

.oj-filmstrip.oj-filmstrip-hover .oj-filmstrip-arrow-transition.oj-filmstrip-arrow-container {
  opacity: 1;
}

.oj-filmstrip.oj-filmstrip-hover .oj-filmstrip-arrow-transition.oj-filmstrip-arrow {
  opacity: 1;
}

.oj-filmstrip:not(.oj-filmstrip-hover) .oj-filmstrip-arrow-transition {
  opacity: 0;
}

/* masonrylayout */
/* --------------------------------------------------------------- */
oj-masonry-layout:not(.oj-complete) {
  visibility: hidden;
}

oj-masonry-layout {
  display: block;
}

.oj-masonrylayout {
  min-height: 1px;
  min-width: 1px;
  position: relative;
}

/* masonry tile */
.oj-masonrylayout-tile {
  box-sizing: border-box;
  position: absolute;
}

.oj-masonrylayout .oj-masonrylayout-tile {
  position: absolute;
}

.oj-masonrylayout-tile.oj-drop {
  background-color: #d9f4fa;
  border: 1px solid #c2eaf3;
  opacity: 0.75;
}

.oj-masonrylayout-tile.oj-drag {
  opacity: 0.75;
}

.oj-masonrylayout-tile-transition-show-from {
  opacity: 0;
}

.oj-masonrylayout-tile-1x1 {
  margin: 5px;
  width: calc(1 * 150px + (1 - 1) * 2 * 5px);
  height: calc(1 * 150px + (1 - 1) * 2 * 5px);
}

.oj-masonrylayout-tile-1x2 {
  margin: 5px;
  width: calc(1 * 150px + (1 - 1) * 2 * 5px);
  height: calc(2 * 150px + (2 - 1) * 2 * 5px);
}

.oj-masonrylayout-tile-1x3 {
  margin: 5px;
  width: calc(1 * 150px + (1 - 1) * 2 * 5px);
  height: calc(3 * 150px + (3 - 1) * 2 * 5px);
}

.oj-masonrylayout-tile-2x1 {
  margin: 5px;
  width: calc(2 * 150px + (2 - 1) * 2 * 5px);
  height: calc(1 * 150px + (1 - 1) * 2 * 5px);
}

.oj-masonrylayout-tile-2x2 {
  margin: 5px;
  width: calc(2 * 150px + (2 - 1) * 2 * 5px);
  height: calc(2 * 150px + (2 - 1) * 2 * 5px);
}

.oj-masonrylayout-tile-2x3 {
  margin: 5px;
  width: calc(2 * 150px + (2 - 1) * 2 * 5px);
  height: calc(3 * 150px + (3 - 1) * 2 * 5px);
}

.oj-masonrylayout-tile-3x1 {
  margin: 5px;
  width: calc(3 * 150px + (3 - 1) * 2 * 5px);
  height: calc(1 * 150px + (1 - 1) * 2 * 5px);
}

.oj-masonrylayout-tile-3x2 {
  margin: 5px;
  width: calc(3 * 150px + (3 - 1) * 2 * 5px);
  height: calc(2 * 150px + (2 - 1) * 2 * 5px);
}

.oj-masonrylayout-option-defaults {
  font-family: '{"animation":{"insert":[{"effect":"zoomIn","duration":"0.25s","timingFunction":"ease-in-out"},"fadeIn"],"remove":[{"effect":"zoomOut","duration":"0.25s","timingFunction":"ease-in-out"},"fadeOut"],"move":{"effect":"addTransition","duration":"0.25s","timingFunction":"ease-in-out","transitionProperties":["width","height","top","left","right"]},"resize":{"effect":"addTransition","duration":"0.25s","timingFunction":"ease-in-out","transitionProperties":["width","height","top","left","right"]},"reorder":{"effect":"addTransition","duration":"0.2s","timingFunction":"ease-in-out","transitionProperties":["width","height","top","left","right"]}}}';
}

/* tabs */
/* --------------------------------------------------------------- */
oj-tabs:not(.oj-complete) {
  visibility: hidden;
}

/*
 * applied to the tabs
 */
.oj-tabs {
  position: relative;
  font-size: 1rem;
}

/*
 * use flexbox so that vertial tabs automatically lay out correctly on resize
 */
.oj-tabs.oj-tabs-vertical {
  display: flex;
}

/*
 * applied to the tab bar
 */
.oj-tabs-nav {
  white-space: nowrap;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.oj-tabs-tab:not(.oj-focus-highlight):focus {
  outline: none;
}

/*
 * applied to a tab when it's selected
 */
.oj-tabs-tab.oj-selected {
  background-color: hsl(203, 2%, 100%);
}

.oj-tabs,
.oj-tabs-tab .oj-tabs-close-icon,
.oj-tabs-tab .oj-tabs-anchor {
  -webkit-tap-highlight-color: transparent;
}

.oj-tabs-tab a:active {
  background-color: transparent;
}

/*
 * applied to the tab header
 */
.oj-tabs-anchor {
  cursor: pointer;
  outline: none;
  display: inline-block;
  padding: 0.55rem 0.85rem 0.65rem 0.85rem;
  vertical-align: middle;
}

/*
 * applied to the tab title text
 * display inline so the close icon is aligned with the title text
 */
.oj-tabs-title {
  display: inline-block;
  min-width: 1rem;
  line-height: 1rem;
  vertical-align: middle;
  font-weight: normal;
  text-decoration: none;
  color: #000000;
}

/*
 * applied to the tab title text when it's overflow
 */
.oj-tabs-title-overflow {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*
 * applied to the tab anchor when it's disabled
 */
.oj-tabs-tab.oj-disabled .oj-tabs-anchor {
  cursor: text;
  text-decoration: none;
}

/* suppress all browser decorations of anchors in the tab */
.oj-tabs-tab a,
.oj-tabs-tab a:active,
.oj-tabs-tab a:visited,
.oj-tabs-tab a:hover,
.oj-tabs-tab a:focus {
  text-decoration: none;
}

/*
 * applied to the icon font in the tab title

.oj-tabs-tab-icon {
  @extend .oj-clickable-icon;
}
 */
/*
 * applied to the icon font in the tab title and close icon
 * add .oj-tabs-tab .oj-tabs-close-icon:hover to
 * override color set in a:hover.oj-clickable-icon-nocontext
 */
.oj-tabs-tab .oj-tabs-tab-icon,
.oj-tabs-tab .oj-tabs-close-icon,
.oj-tabs-tab .oj-tabs-close-icon:hover {
  color: hsla(0, 0%, 0%, 0.8);
}

/*
 * applied to the icon font in the tab title and close icon when hovered
 */
.oj-tabs-tab.oj-hover .oj-tabs-tab-icon,
.oj-tabs-tab .oj-tabs-close-icon.oj-hover {
  color: #966486;
}

/*
 * applied to the icon font in the tab title and close icon when active
 */
.oj-tabs-tab.oj-active .oj-tabs-tab-icon,
.oj-tabs-tab .oj-tabs-close-icon.oj-active {
  color: #966486;
}

/*
 * applied to the icon font in the tab title and close icon when selected
 */
.oj-tabs-tab.oj-selected .oj-tabs-tab-icon {
  color: #966486;
}

/*
 * applied to the icon font in the tab title and close icon when disabled
 */
.oj-tabs-tab.oj-disabled .oj-tabs-tab-icon {
  color: #966486;
  opacity: 1;
}

/*
 * applied to the horizontal tab
 * need to set overflow-x to hidden to avoid the scrollbar from showing up
 * temporarily while adding a new tab.
 */
.oj-tabs-horizontal.oj-tabs {
  overflow-x: hidden;
}

.oj-tabs-horizontal > .oj-tabs-nav-root .oj-tabs-tab {
  display: inline-block;
  position: relative;
}

/*
 * applied to the tab placeholder created when reordering
 */
.oj-tabs-horizontal > .oj-tabs-nav-root .oj-tabs-tab.oj-sortable-placeholder {
  margin-bottom: -1rem;
}

.oj-tabs-horizontal.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab.oj-sortable-placeholder {
  margin-top: -1rem;
}

/*
 * Bug 18283133 - ER for placing buttons alongside tabs
 */
/*
 * For the facet after the tab bar, grow but no shrink when resized
 */
.oj-tabs-facet {
  flex: 1 0 auto;
}

/*
 * For the facet before the tab bar, no grow or shrink when resized
 */
.oj-tabs-facet.oj-start {
  flex: 0 0 auto;
}

/*
 * For the conveyor belt, set flex-basis in JS
 * set min-width to allow the content to be shrunk smaller than its content size
 */
.oj-tabs-conveyorbelt-wrapper {
  min-width: 1px;
}

/*
 * Use flex layout only if the tab bar contains any facets
 */
.oj-tabs-horizontal > .oj-tabs-nav-root:not(.oj-conveyorbelt) {
  display: flex;
}

/*
 * Container of the horizontal tab bar
 */
.oj-tabs-conveyor {
  display: inline-block;
}

/*
 * applied to the conveyorbelt buttons
 */
html:not([dir=rtl]) .oj-tabs-nav-root .oj-conveyorbelt-overflow-indicator.oj-start {
  margin-right: 5px;
}
html[dir=rtl] .oj-tabs-nav-root .oj-conveyorbelt-overflow-indicator.oj-start {
  margin-left: 5px;
}

html:not([dir=rtl]) .oj-tabs-nav-root .oj-conveyorbelt-overflow-indicator.oj-end {
  margin-left: 5px;
}
html[dir=rtl] .oj-tabs-nav-root .oj-conveyorbelt-overflow-indicator.oj-end {
  margin-right: 5px;
}

/*
 * applied to the panel body
 */
.oj-tabs-panel {
  display: block;
  padding: 0.85714rem;
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 100%);
}

/* vertical tabs */
/* --------------------------------------------------------------- */
/*
 * applied to the vertical tab bar
 */
.oj-tabs-vertical > .oj-tabs-nav-root {
  margin: 0;
  flex: 0 0 auto;
  position: relative;
  white-space: nowrap;
}

/*
 * applied to the vertical tab
 */
.oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab {
  list-style: none;
  position: relative;
  top: 0;
  margin: 0;
  white-space: nowrap;
}

/*
 * apply to the selected tab
 */
html:not([dir=rtl]) .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  margin-right: -1px;
}
html[dir=rtl] .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  margin-left: -1px;
}

html:not([dir=rtl]) .oj-tabs-vertical.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  margin-right: 0;
  margin-left: -1px;
}
html[dir=rtl] .oj-tabs-vertical.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  margin-left: 0;
  margin-right: -1px;
}

/*
 * applied to the body of vertical tabs
 */
.oj-tabs-vertical > .oj-tabs-panel {
  margin-top: 0;
  flex: 1 1;
  min-width: 0;
  min-height: 0;
}

/* Tabs with the oj-tabs-icon-only class specified */
/* --------------------------------------------------------------- */
/*
 * override background setting in
 * .oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab
 */
.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected.oj-hover,
.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected.oj-hover {
  background-color: hsl(203, 2%, 100%);
  background-image: none;
}

.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-close-icon {
  padding-top: 4px;
}

.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-anchor {
  padding: 0.68rem;
}

.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-anchor {
  padding: 0.7rem 0.6rem 0.7rem 0.6rem;
}

/*
 * applied to the vertical tabs with icon only in the tab header
 */
.oj-tabs-vertical.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-anchor {
  padding: 0.68rem 0.6rem 0.68rem 0.6rem;
}

/*
 * applied to the vertical tabs with text and icon in the tab header
 */
.oj-tabs-vertical.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-anchor {
  padding: 0.8rem 0.6rem 0.8rem 0.6rem;
}

/*
 * applied to the tab bar
 */
.oj-tabs-nav {
  padding: 0;
  border: 0;
}

/*
 * applied to each tab
 */
.oj-tabs-tab {
  border-color: transparent;
  border-style: solid;
}

/*
 * applied to a selected tab
 */
.oj-tabs-tab.oj-selected {
  border-color: #027bc7;
}

/*
 * applied to the selected tab icon, needed for icon font icons
 */
.oj-tabs-tab.oj-selected .oj-tabs-tab-icon {
  font-weight: normal;
}

/*
 * applied to the tab title when it's hovered
 */
.oj-tabs-tab.oj-hover .oj-tabs-title {
  text-decoration: underline;
}

.oj-tabs-tab.oj-hover .oj-tabs-tab-icon {
  text-decoration: none;
}

/*
 * applied to the tab title text when it's disabled
 */
.oj-tabs-tab.oj-disabled .oj-tabs-title {
  color: hsla(0, 0%, 0%, 0.38);
}

/*
 * applied to the tab content
 */
.oj-tabs-tab-content {
  white-space: nowrap;
  border-color: transparent;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  border-radius: 0 0 0 0;
}

/*
 * used to display the left and right borders of the selected tab
 */
.oj-tabs-tab.oj-selected .oj-tabs-tab-content {
  border-color: hsl(203, 2%, 80%);
}

/*
 * applied to the horizontal tab when it is selected
 */
.oj-tabs-horizontal > .oj-tabs-nav-root .oj-tabs-tab-content,
.oj-tabs-horizontal.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab-content {
  border-width: 0 1px 0 1px;
}

/*
 * applied to a horizontal tab
 */
.oj-tabs-horizontal > .oj-tabs-nav-root .oj-tabs-tab {
  top: 0;
  margin: 0;
  border-width: 3px 0 0 0;
  border-radius: 0 0 0 0;
}

/*
 * applied to a horizontal tab when edge = bottom
 */
.oj-tabs-horizontal.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 0 0 3px 0;
}

.oj-tabs-horizontal.oj-tabs-text-icon.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab,
.oj-tabs-horizontal.oj-tabs-icon-only.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 0 0 1px 0;
}

/*
 * In alta horizontal tabs
 * make the start border on the first selected tab match the container
 */
html:not([dir=rtl]) .oj-first-child-selected > .oj-tabs-nav-root .oj-tabs-tab.oj-selected .oj-tabs-tab-content {
  border-left-color: hsl(203, 2%, 88%);
}
html[dir=rtl] .oj-first-child-selected > .oj-tabs-nav-root .oj-tabs-tab.oj-selected .oj-tabs-tab-content {
  border-right-color: hsl(203, 2%, 88%);
}

/* close icon for tabs */
/* -----------------------------*/
/*
 * close icon style
 */
.oj-tabs-close-icon {
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  width: 1.84rem;
  line-height: 2.2rem;
}
html:not([dir=rtl]) .oj-tabs-close-icon {
  margin-left: -0.75rem;
}
html[dir=rtl] .oj-tabs-close-icon {
  margin-right: -0.75rem;
}

/*
 * applied to the panel body
 */
.oj-tabs-panel {
  border: 1px solid hsl(203, 2%, 88%);
  border-radius: 3px;
  margin-top: -1px;
}

/*
 * applied to the panel body when edge = bottom
 */
.oj-tabs-bottom > .oj-tabs-panel {
  margin-top: 0;
  margin-bottom: -1px;
}

/*
 * don't apply top left border radius when the 1st tab is selected
 */
html:not([dir=rtl]) .oj-first-child-selected > .oj-tabs-panel {
  border-top-left-radius: 0;
}
html[dir=rtl] .oj-first-child-selected > .oj-tabs-panel {
  border-top-right-radius: 0;
}

/*
 * applied to the panel body when 1st tab is selected and edge = bottom
 */
html:not([dir=rtl]) .oj-tabs-bottom.oj-first-child-selected > .oj-tabs-panel {
  border-bottom-left-radius: 0;
}
html[dir=rtl] .oj-tabs-bottom.oj-first-child-selected > .oj-tabs-panel {
  border-bottom-right-radius: 0;
}

/* vertical tabs */
/* --------------------------------------------------------------- */
/*
 * applied to the vertical tab bar
 */
.oj-tabs-vertical > .oj-tabs-nav-root {
  padding: 15px 0 0;
}

/*
 * applied to the vertical tab
 */
.oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab {
  line-height: 1rem;
}
html:not([dir=rtl]) .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 0 0 0 3px;
  border-radius: 0 0 0 0;
}
html[dir=rtl] .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 0 3px 0 0;
  border-radius: 0 0 0 0;
}

/*
 * applied to the vertical tab when edge = end
 */
html[dir=rtl] .oj-tabs-vertical.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 0 0 0 3px;
  border-radius: 0 0 0 0;
}
html:not([dir=rtl]) .oj-tabs-vertical.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 0 3px 0 0;
  border-radius: 0 0 0 0;
}

html:not([dir=rtl]) .oj-tabs-vertical.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab,
html:not([dir=rtl]) .oj-tabs-vertical.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 1px;
}
html[dir=rtl] .oj-tabs-vertical.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab,
html[dir=rtl] .oj-tabs-vertical.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 1px;
}

/*
 * applied to the vertical tab
 */
.oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab-content {
  border-width: 1px 0 1px 0;
}
html:not([dir=rtl]) .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab-content {
  border-radius: 0 0 0 0;
}
html[dir=rtl] .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab-content {
  border-radius: 0 0 0 0;
}

/*
 * applied to the vertical tab header
 */
.oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-anchor {
  padding: 1.1rem 0.8rem 1.1rem 0.8rem;
}

/* Tabs with the oj-tabs-icon-only class specified */
/* --------------------------------------------------------------- */
.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab,
.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab {
  border-width: 1px;
  border-radius: 0;
}

.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab-content,
.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab-content {
  border-width: 0;
  border-radius: 0;
}

.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-color: hsl(203, 2%, 88%);
}

/* vertical tabs with the oj-tabs-icon-only class specified */
/* --------------------------------------------------------------- */
/*
 * display top, bottom and left border and border radius on the selected tab
 */
html:not([dir=rtl]) .oj-tabs-vertical.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
html:not([dir=rtl]) .oj-tabs-vertical.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-radius: 2px 0 0 2px;
  border-right-color: transparent;
}
html[dir=rtl] .oj-tabs-vertical.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
html[dir=rtl] .oj-tabs-vertical.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-radius: 0 2px 2px 0;
  border-left-color: transparent;
}

/*
 * display top, bottom and right border and border radius on the selected tab
 * when edge = end
 */
html:not([dir=rtl]) .oj-tabs-vertical.oj-tabs-text-icon.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
html:not([dir=rtl]) .oj-tabs-vertical.oj-tabs-icon-only.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-radius: 0 2px 2px 0;
  border-color: hsl(203, 2%, 88%);
  margin-left: -1px;
  border-left-color: transparent;
}
html[dir=rtl] .oj-tabs-vertical.oj-tabs-text-icon.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
html[dir=rtl] .oj-tabs-vertical.oj-tabs-icon-only.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-radius: 2px 0 0 2px;
  border-color: hsl(203, 2%, 88%);
  margin-right: -1px;
  border-right-color: transparent;
}

/* horizontal tabs with the oj-tabs-icon-only class specified */
/* --------------------------------------------------------------- */
/*
 * display top, right and left border and border radius on the selected tab
 */
.oj-tabs-horizontal.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
.oj-tabs-horizontal.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-bottom-color: transparent;
  border-radius: 2px 2px 0 0;
}

.oj-tabs-horizontal.oj-tabs-text-icon.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab.oj-selected,
.oj-tabs-horizontal.oj-tabs-icon-only.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-color: hsl(203, 2%, 88%);
  border-radius: 0 0 2px 2px;
}

/* train */
/* --------------------------------------------------------------- */
oj-train:not(.oj-complete) {
  visibility: hidden;
}

oj-train {
  display: block;
}

.oj-train {
  white-space: nowrap;
  text-align: center;
}

.oj-train-wrapper {
  font-size: 0;
  display: inline-block;
  position: relative;
  vertical-align: top;
}

/* Class that can be added to stretch train to container size */
.oj-train-stretch .oj-train-wrapper {
  width: 100%;
}

/* Wrapper class that contains step connector and fill */
.oj-train-connector-wrapper {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  padding: 0 calc(98px / 2);
}

/* Classes that define the bar connecting the steps */
.oj-train-connector,
.oj-train-connector-fill {
  position: relative;
  height: calc(2px * 0);
  width: 100%;
  top: calc((28px - 2px) / 2);
  box-sizing: border-box;
}

.oj-train-connector {
  background-color: hsl(203, 2%, 90%);
}

/* Shades in the connector to the position of the selected step */
.oj-train-connector-fill {
  background-color: transparent;
  margin-top: calc(0px - 2px);
}

/* Connector circle behind the individual step buttons which matches the connector */
.oj-train-button-connector {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  background-color: hsl(203, 2%, 90%);
  border-radius: 50%;
}

.oj-train-step-list-item:last-child > .oj-train-button-connector {
  top: 2px;
}

.oj-train-button-connector.oj-train-fill {
  background-color: transparent;
  background-image: none;
}

.oj-train-step-individual-connector {
  position: relative;
  visibility: visible;
  height: calc(2px * (1 - 0));
  width: calc(100% - 28px - 10px * 2);
  top: calc((28px + 2px) / 2);
  background-color: hsl(203, 2%, 90%);
}
html:not([dir=rtl]) .oj-train-step-individual-connector {
  left: calc(50% + 28px / 2 + 10px);
}
html[dir=rtl] .oj-train-step-individual-connector {
  right: calc(50% + 28px / 2 + 10px);
}

.oj-train-step-individual-connector.oj-train-connector-before-selected-step {
  background-color: hsl(203, 2%, 78%);
  width: calc(100% - 28px - 0px * 2);
}
html:not([dir=rtl]) .oj-train-step-individual-connector.oj-train-connector-before-selected-step {
  left: calc(50% + 28px / 2 + 0px);
}
html[dir=rtl] .oj-train-step-individual-connector.oj-train-connector-before-selected-step {
  right: calc(50% + 28px / 2 + 0px);
}

/* Inividual step buttons that are used for train navigation */
.oj-train-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 2px;
  width: 28px;
  height: 28px;
  margin: calc((28px - 28px) / 2);
  border-radius: 50%;
}

.oj-train-button.oj-default {
  border-color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 100%);
}

.oj-train-button.oj-visited {
  border-color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 100%);
}

.oj-train-button.oj-hover {
  border-color: #966486;
  background-color: #966486;
}

.oj-train-button.oj-selected {
  border-color: #027bc7;
  background-color: #027bc7;
  cursor: default;
}

.oj-train-button.oj-disabled {
  border-color: hsl(203, 2%, 88%);
  background-color: hsl(203, 2%, 100%);
  cursor: default;
}

.oj-train-button.oj-active,
.oj-train-button.oj-hover.oj-active {
  background-color: #027bc7;
  border-color: #027bc7;
}

.oj-train-step-list-item.oj-confirmation .oj-train-button,
.oj-train-step-list-item.oj-info .oj-train-button,
.oj-train-step-list-item.oj-invalid .oj-train-button,
.oj-train-step-list-item.oj-warning .oj-train-button {
  background-color: transparent;
  border-color: transparent;
}

.oj-train-button-text {
  font-size: calc(13px * 1);
  font-weight: normal;
  color: hsla(0, 0%, 0%, 0.8);
  display: inherit;
}

.oj-train-button.oj-active .oj-train-button-text,
.oj-train-button.oj-hover.oj-active .oj-train-button-text,
.oj-train-button.oj-hover.oj-visited.oj-active .oj-train-button-text {
  color: hsl(203, 2%, 100%);
}

.oj-train-button.oj-disabled .oj-train-button-text {
  color: hsla(0, 0%, 0%, 0.38);
}

.oj-train-button.oj-hover .oj-train-button-text,
.oj-train-button.oj-visited.oj-hover .oj-train-button-text {
  color: hsl(203, 2%, 100%);
}

.oj-train-button.oj-visited .oj-train-button-text {
  display: none;
  color: #027bc7;
}

.oj-train-button.oj-selected .oj-train-button-text {
  color: hsl(203, 2%, 100%);
}

.oj-train-step-list {
  margin: 0;
  padding: 0;
}

/* Class for each li that stores the label and button information for each step in the train */
.oj-train-step-list-item {
  font-size: 1rem;
  width: 98px;
  white-space: normal;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  line-height: normal;
}

.oj-train-label-wrapper {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 14px;
}

.oj-train-step-list-item:last-child > .oj-train-label-wrapper {
  top: 2px;
}

.oj-train-label {
  text-decoration: none;
  color: hsla(0, 0%, 0%, 0.8);
  text-align: center;
}

.oj-train-label.oj-visited {
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-train-label.oj-disabled {
  text-decoration: none;
  font-weight: normal;
  color: hsla(0, 0%, 0%, 0.38);
  opacity: 1;
}

.oj-train-label.oj-active,
.oj-train-label.oj-hover.oj-active {
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.oj-train-label.oj-hover {
  cursor: pointer;
}

.oj-train-label.oj-selected {
  text-decoration: none;
  cursor: default;
  font-weight: 500;
}

.oj-train-label:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-train-icon {
  position: absolute;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  color: hsl(203, 2%, 100%);
  border-radius: 50%;
  font-size: unset;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}

.oj-train-icon.oj-confirmation {
  background-color: #81ba5f;
}

.oj-train-button.oj-disabled .oj-train-icon {
  background-color: hsl(203, 2%, 100%);
  border-color: hsl(203, 2%, 88%);
  border-width: 2px;
  color: hsla(0, 0%, 0%, 0.38);
}

.oj-train-button.oj-hover .oj-train-icon,
.oj-train-button.oj-visited.oj-hover .oj-train-icon,
.oj-train-button.oj-visited.oj-hover .oj-train-icon.oj-confirmation,
.oj-train-button.oj-visited.oj-hover .oj-train-icon.oj-error,
.oj-train-button.oj-visited.oj-hover .oj-train-icon.oj-info,
.oj-train-button.oj-visited.oj-hover .oj-train-icon.oj-warning {
  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
}

.oj-train-button.oj-visited .oj-train-icon.oj-confirmation,
.oj-train-button.oj-selected .oj-train-icon.oj-confirmation {
  background-color: #81ba5f;
  border-color: hsla(0, 0%, 0%, 0.8);
}

.oj-train-button.oj-active .oj-train-icon.oj-confirmation,
.oj-train-button.oj-hover.oj-active .oj-train-icon.oj-confirmation,
.oj-train-button.oj-hover.oj-visited.oj-active .oj-train-icon.oj-confirmation {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.oj-train-icon.oj-error {
  background-color: #de2333;
}

.oj-train-button.oj-visited .oj-train-icon.oj-error,
.oj-train-button.oj-selected .oj-train-icon.oj-error {
  background-color: #de2333;
}

.oj-train-button.oj-active .oj-train-icon.oj-error,
.oj-train-button.oj-hover.oj-active .oj-train-icon.oj-error,
.oj-train-button.oj-hover.oj-visited.oj-active .oj-train-icon.oj-error {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.oj-train-icon.oj-info {
  background-color: #2b94bf;
}

.oj-train-button.oj-visited .oj-train-icon.oj-info,
.oj-train-button.oj-selected .oj-train-icon.oj-info {
  background-color: #2b94bf;
}

.oj-train-button.oj-active .oj-train-icon.oj-info,
.oj-train-button.oj-hover.oj-active .oj-train-icon.oj-info,
.oj-train-button.oj-hover.oj-visited.oj-active .oj-train-icon.oj-info {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.oj-train-icon.oj-warning {
  background-color: #f6b846;
}

.oj-train-button.oj-visited .oj-train-icon.oj-warning,
.oj-train-button.oj-selected .oj-train-icon.oj-warning {
  background-color: #f6b846;
}

.oj-train-button.oj-active .oj-train-icon.oj-warning,
.oj-train-button.oj-hover.oj-active .oj-train-icon.oj-warning,
.oj-train-button.oj-hover.oj-visited.oj-active .oj-train-icon.oj-warning {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.oj-train-icon.oj-hover {
  cursor: pointer;
}

.oj-hicontrast .oj-train-button.oj-selected {
  border-width: calc(28px / 2);
}

.oj-hicontrast .oj-train-button.oj-disabled {
  border-style: dotted;
}

.oj-hicontrast .oj-train-button.oj-visited {
  border-width: 2px;
}

.oj-hicontrast .oj-train-connector {
  border: 1px solid;
}

.oj-hicontrast .oj-train-connector-fill {
  border: calc(2px / 2) solid;
}

.oj-train-button.oj-visited::before {
  content: "";
  display: inherit;
}

.oj-train-button.oj-hover.oj-visited::before {
  content: "";
}

/* button */
/* --------------------------------------------------------------- */
oj-button:not(.oj-complete) {
  visibility: hidden;
}

[hidden].oj-button,
[hidden].oj-button-nocomp {
  display: none;
}

.oj-button,
.oj-button-nocomp {
  height: 2.28571rem;
  margin-bottom: 4px;
  font-size: 1rem;
  display: inline-flex;
  vertical-align: middle;
}

.oj-button-button {
  width: 100%;
  height: 100%;
}

.oj-button-toggle,
.oj-button-nocomp,
.oj-button-button {
  justify-content: center;
  min-width: 0;
  align-items: center;
  padding: 0;
  border: 1px solid;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

html body .oj-button-toggle,
html body .oj-button-nocomp,
html body .oj-button-button {
  cursor: default;
}

input.oj-button[type=button],
input.oj-button[type=submit],
input.oj-button[type=reset] {
  display: inline-block;
}

/* The root element of toggle (radio and checkbox) buttons */
.oj-button-toggle {
  position: relative;
}

/* The <label> of toggle (radio and checkbox) buttons or <div> of <button> type buttons*/
.oj-button-label,
.oj-button-label oj-option {
  cursor: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* The <input> of toggle (radio and checkbox) buttons */
.oj-button-input {
  left: 0;
  top: 0;
}

/* "oj-button-icon oj-start" is applied to the button's start icon, if any.  
   "oj-button-icon oj-end" is applied to the button's end icon, if any.  */
.oj-button .oj-button-icon {
  font-weight: normal;
  text-shadow: none;
}

.oj-button .oj-button-text,
.oj-button-nocomp {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oj-button.oj-button-sm,
.oj-button-nocomp.oj-button-sm,
.oj-buttonset.oj-button-sm .oj-button-toggle {
  height: 2rem;
  line-height: 2rem;
  font-size: 1rem;
}

.oj-button.oj-button-lg,
.oj-button-nocomp.oj-button-lg,
.oj-buttonset.oj-button-lg .oj-button-toggle {
  height: 3rem;
  line-height: 3rem;
  font-size: 1rem;
}

.oj-button.oj-button-xl,
.oj-button-nocomp.oj-button-xl,
.oj-buttonset.oj-button-xl .oj-button-toggle {
  height: 3.42857rem;
  line-height: 3.42857rem;
  font-size: 1rem;
}

.oj-button-toggle,
.oj-button-button,
.oj-button-nocomp,
.oj-button-toggle:link,
.oj-button-button:link,
.oj-button-nocomp:link,
.oj-button-toggle:visited,
.oj-button-button:visited,
.oj-button-nocomp:visited,
.oj-button-toggle:hover,
.oj-button-button:hover,
.oj-button-nocomp:hover,
.oj-button-toggle:active,
.oj-button-button:active,
.oj-button-nocomp:active {
  text-decoration: none;
}

.oj-button-toggle:not(.oj-focus-highlight):focus,
.oj-button-nocomp:not(.oj-focus-highlight):focus,
.oj-button:not(.oj-focus-highlight) .oj-button-button:focus {
  outline: none;
}

.oj-button-toggle.oj-focus-highlight,
.oj-button-nocomp.oj-focus-highlight,
.oj-button.oj-focus-highlight .oj-button-button {
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

.oj-button-toggle.oj-disabled,
.oj-button-nocomp:disabled,
.oj-button.oj-disabled .oj-button-button {
  cursor: default;
}

/* Full-chrome buttons have chrome (background and border) in all states (default, 
 * focus-only, disabled, hover, active, selected, ...).
 */
.oj-button-toggle.oj-button-full-chrome,
.oj-button-toggle.oj-button-full-chrome:link,
.oj-button-toggle.oj-button-full-chrome:visited,
.oj-button-toggle.oj-button-full-chrome:hover,
.oj-button-toggle.oj-button-full-chrome:active,
.oj-button-nocomp.oj-button-full-chrome,
.oj-button-nocomp.oj-button-full-chrome:link,
.oj-button-nocomp.oj-button-full-chrome:visited,
.oj-button-nocomp.oj-button-full-chrome:hover,
.oj-button-nocomp.oj-button-full-chrome:active,
.oj-button.oj-button-full-chrome .oj-button-button,
.oj-button.oj-button-full-chrome .oj-button-button:link,
.oj-button.oj-button-full-chrome .oj-button-button:visited,
.oj-button.oj-button-full-chrome .oj-button-button:hover,
.oj-button.oj-button-full-chrome .oj-button-button:active {
  font-weight: normal;
}

/* oj-default is applied iff the button is not in any of the other states, 
   namely oj-active, oj-disabled, oj-selected, oj-hover, or oj-focus.
   oj-focus-only is applied iff the button has oj-focus but not any of the other 4 states listed above.*/
.oj-button-toggle.oj-default.oj-button-full-chrome,
.oj-button-toggle.oj-focus-only.oj-button-full-chrome,
.oj-button-nocomp.oj-button-full-chrome,
.oj-button.oj-default.oj-button-full-chrome .oj-button-button,
.oj-button.oj-focus-only.oj-button-full-chrome .oj-button-button {
  background-color: #704b64;
  background-image: none;
  border-color: hsl(203, 2%, 80%);
  color: hsl(0, 0%, 0%);
  box-shadow: none;
  text-shadow: none;
}

.oj-button.oj-default.oj-button-full-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-full-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-full-chrome .oj-button-icon {
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-button-toggle.oj-hover.oj-button-full-chrome,
.oj-button-nocomp.oj-button-full-chrome:hover,
.oj-button.oj-hover.oj-button-full-chrome .oj-button-button {
  background-color: hsl(203, 2%, 97%);
  background-image: none;
  border-color: #966486;
  color: rgb(1.6, 98.4, 159.2);
  box-shadow: none;
  text-shadow: none;
}

.oj-button.oj-hover.oj-button-full-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-full-chrome:hover .oj-button-icon {
  color: #966486;
}

/* oj-active is applied to a push button when it is actively being held down 
   by the mouse button or Enter or Spacebar. */
.oj-button-toggle.oj-active.oj-button-full-chrome,
.oj-button-nocomp.oj-button-full-chrome:active,
.oj-button-nocomp.oj-active.oj-button-full-chrome,
.oj-button.oj-active.oj-button-full-chrome .oj-button-button {
  background-color: #966486;
  background-image: none;
  border-color: #027bc7;
  color: hsl(203, 2%, 100%);
  box-shadow: none;
  text-shadow: none;
  opacity: 1;
}

.oj-button.oj-active.oj-button-full-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-full-chrome:active .oj-button-icon,
.oj-button-nocomp.oj-active.oj-button-full-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}

.oj-button-toggle.oj-selected.oj-button-full-chrome,
.oj-button.oj-selected.oj-button-full-chrome .oj-button-button {
  background-color: #966486;
  background-image: none;
  border-color: #027bc7;
  color: hsl(203, 2%, 100%);
  box-shadow: none;
  text-shadow: none;
}

.oj-button-toggle.oj-selected.oj-hover.oj-button-full-chrome,
.oj-button.oj-selected.oj-hover.oj-button-full-chrome .oj-button-button {
  color: #966486;
  background-color: #966486;
  border-color: #027bc7;
}

.oj-button.oj-selected.oj-button-full-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}

.oj-button.oj-selected.oj-hover.oj-button-full-chrome .oj-button-icon {
  color: #966486;
}

.oj-button-toggle.oj-disabled.oj-button-full-chrome,
.oj-button-nocomp.oj-button-full-chrome:disabled,
.oj-button.oj-disabled.oj-button-full-chrome .oj-button-button {
  background-color: hsl(203, 2%, 97%);
  border-color: hsl(203, 2%, 90%);
  color: hsla(0, 0%, 0%, 0.38);
  box-shadow: none;
  opacity: 1;
  background-image: none;
}

.oj-button.oj-disabled.oj-button-full-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-full-chrome:disabled .oj-button-icon {
  color: #966486;
}

.oj-button-toggle.oj-disabled.oj-selected.oj-button-full-chrome,
.oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-button {
  color: hsl(203, 2%, 100%);
  background-color: hsl(203, 2%, 80%);
  border-color: hsl(203, 2%, 80%);
}

.oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}

/* Half-chrome buttons have no chrome (background or border) in their default, 
 * focus-only, and disabled-not-selected states, but acquire chrome in their 
 * hover, active, and selected states.
 * 
 * Half-chroming is recommended for buttons in a toolbar, and anytime the 
 * half-chrome look is desired.
 * 
 * To set button chroming, use the "chroming" option on the Button, Buttonset, and Toolbar
 * components, per the JSDoc.  Do not apply the oj-button-XXX-chrome classes manually.
 */
.oj-button-toggle.oj-default.oj-button-half-chrome,
.oj-button-toggle.oj-focus-only.oj-button-half-chrome,
.oj-button-toggle.oj-disabled.oj-button-half-chrome,
.oj-button-nocomp.oj-button-half-chrome,
.oj-button-nocomp.oj-button-half-chrome:disabled,
.oj-button.oj-default.oj-button-half-chrome .oj-button-button,
.oj-button.oj-focus-only.oj-button-half-chrome .oj-button-button,
.oj-button.oj-disabled.oj-button-half-chrome .oj-button-button {
  border-color: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

.oj-button-toggle.oj-default.oj-button-half-chrome,
.oj-button-toggle.oj-focus-only.oj-button-half-chrome,
.oj-button-nocomp.oj-button-half-chrome,
.oj-button.oj-default.oj-button-half-chrome .oj-button-button,
.oj-button.oj-focus-only.oj-button-half-chrome .oj-button-button {
  text-shadow: none;
  color: hsl(0, 0%, 0%);
}

.oj-button-toggle.oj-hover.oj-button-half-chrome,
.oj-button-nocomp.oj-button-half-chrome:hover,
.oj-button.oj-hover.oj-button-half-chrome .oj-button-button {
  color: rgb(1.6, 98.4, 159.2);
  background-color: hsl(203, 2%, 97%);
  border-color: #966486;
  box-shadow: none;
}

.oj-button-toggle.oj-active.oj-button-half-chrome,
.oj-button-nocomp.oj-button-half-chrome:active,
.oj-button-nocomp.oj-active.oj-button-half-chrome,
.oj-button.oj-active.oj-button-half-chrome .oj-button-button {
  color: hsl(203, 2%, 100%);
  background-color: #966486;
  border-color: #966486;
  opacity: 1;
  box-shadow: none;
}

.oj-button-toggle.oj-selected.oj-button-half-chrome,
.oj-button.oj-selected.oj-button-half-chrome .oj-button-button {
  color: hsl(203, 2%, 100%);
  background-color: #966486;
  border-color: #966486;
  box-shadow: none;
}

.oj-button-toggle.oj-selected.oj-hover.oj-button-half-chrome,
.oj-button.oj-selected.oj-hover.oj-button-half-chrome .oj-button-button {
  color: #966486;
  background-color: #966486;
  border-color: #027bc7;
}

.oj-button-toggle.oj-disabled.oj-button-half-chrome,
.oj-button-nocomp.oj-button-half-chrome:disabled,
.oj-button.oj-disabled.oj-button-half-chrome .oj-button-button {
  color: hsla(0, 0%, 0%, 0.38);
  opacity: 1;
}

.oj-button-toggle.oj-disabled.oj-selected.oj-button-half-chrome,
.oj-button.oj-disabled.oj-selected.oj-button-half-chrome .oj-button-button {
  color: hsl(203, 2%, 100%);
  background-color: hsl(203, 2%, 80%);
  border-color: hsl(203, 2%, 80%);
}

.oj-button-toggle.oj-button-half-chrome,
.oj-button-toggle.oj-button-half-chrome:link,
.oj-button-toggle.oj-button-half-chrome:visited,
.oj-button-toggle.oj-button-half-chrome:hover,
.oj-button-toggle.oj-button-half-chrome:active,
.oj-button-nocomp.oj-button-half-chrome,
.oj-button-nocomp.oj-button-half-chrome:link,
.oj-button-nocomp.oj-button-half-chrome:visited,
.oj-button-nocomp.oj-button-half-chrome:hover,
.oj-button-nocomp.oj-button-half-chrome:active,
.oj-button.oj-button-half-chrome .oj-button-button,
.oj-button.oj-button-half-chrome .oj-button-button:link,
.oj-button.oj-button-half-chrome .oj-button-button:visited,
.oj-button.oj-button-half-chrome .oj-button-button:hover,
.oj-button.oj-button-half-chrome .oj-button-button:active {
  font-weight: normal;
}

.oj-button.oj-default.oj-button-half-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-half-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-half-chrome .oj-button-icon {
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-button.oj-hover.oj-button-half-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-half-chrome:hover .oj-button-icon {
  color: #966486;
}

.oj-button.oj-active.oj-button-half-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-half-chrome:active .oj-button-icon {
  color: hsl(203, 2%, 100%);
}

.oj-button.oj-selected.oj-button-half-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}

.oj-button.oj-selected.oj-hover.oj-button-half-chrome .oj-button-icon {
  color: #966486;
}

.oj-button.oj-disabled.oj-button-half-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-half-chrome:disabled .oj-button-icon {
  color: #966486;
}

.oj-button.oj-disabled.oj-selected.oj-button-half-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}

/* Outlined buttons are similar to half-chrome buttons, but have a border in the default state. */
.oj-button-toggle.oj-default.oj-button-outlined-chrome,
.oj-button-toggle.oj-focus-only.oj-button-outlined-chrome,
.oj-button-toggle.oj-disabled.oj-button-outlined-chrome,
.oj-button-nocomp.oj-button-outlined-chrome,
.oj-button-nocomp.oj-button-outlined-chrome:disabled,
.oj-button.oj-default.oj-button-outlined-chrome .oj-button-button,
.oj-button.oj-focus-only.oj-button-outlined-chrome .oj-button-button,
.oj-button.oj-disabled.oj-button-outlined-chrome .oj-button-button {
  border-color: #966486;
  background-image: none;
  box-shadow: none;
  background-color: transparent;
}

.oj-button-toggle.oj-default.oj-button-outlined-chrome,
.oj-button-toggle.oj-focus-only.oj-button-outlined-chrome,
.oj-button-nocomp.oj-button-outlined-chrome,
.oj-button.oj-default.oj-button-outlined-chrome .oj-button-button,
.oj-button.oj-focus-only.oj-button-outlined-chrome .oj-button-button {
  text-shadow: none;
  color: hsl(0, 0%, 0%);
}

.oj-button-toggle.oj-hover.oj-button-outlined-chrome,
.oj-button-nocomp.oj-button-outlined-chrome:hover,
.oj-button.oj-hover.oj-button-outlined-chrome .oj-button-button {
  color: rgb(1.6, 98.4, 159.2);
  background-color: hsl(203, 2%, 97%);
  border-color: #966486;
  box-shadow: none;
}

.oj-button-toggle.oj-active.oj-button-outlined-chrome,
.oj-button-nocomp.oj-button-outlined-chrome:active,
.oj-button-nocomp.oj-active.oj-button-outlined-chrome,
.oj-button.oj-active.oj-button-outlined-chrome .oj-button-button {
  color: hsl(203, 2%, 100%);
  background-color: #966486;
  border-color: #966486;
  opacity: 1;
  box-shadow: none;
}

.oj-button-toggle.oj-selected.oj-button-outlined-chrome,
.oj-button.oj-selected.oj-button-outlined-chrome .oj-button-button {
  color: hsl(203, 2%, 100%);
  background-color: #966486;
  border-color: #966486;
  box-shadow: none;
}

.oj-button-toggle.oj-selected.oj-hover.oj-button-outlined-chrome,
.oj-button.oj-selected.oj-hover.oj-button-outlined-chrome .oj-button-button {
  color: #966486;
  background-color: #966486;
  border-color: #027bc7;
}

.oj-button-toggle.oj-disabled.oj-button-outlined-chrome,
.oj-button-nocomp.oj-button-outlined-chrome:disabled,
.oj-button.oj-disabled.oj-button-outlined-chrome .oj-button-button {
  color: hsla(0, 0%, 0%, 0.38);
  border-color: hsl(203, 2%, 80%);
  opacity: 1;
}

.oj-button-toggle.oj-disabled.oj-selected.oj-button-outlined-chrome,
.oj-button.oj-disabled.oj-selected.oj-button-outlined-chrome .oj-button-button {
  color: hsl(203, 2%, 100%);
  background-color: hsl(203, 2%, 80%);
  border-color: hsl(203, 2%, 80%);
}

.oj-button-toggle.oj-button-outlined-chrome,
.oj-button-toggle.oj-button-outlined-chrome:link,
.oj-button-toggle.oj-button-outlined-chrome:visited,
.oj-button-toggle.oj-button-outlined-chrome:hover,
.oj-button-toggle.oj-button-outlined-chrome:active,
.oj-button-nocomp.oj-button-outlined-chrome,
.oj-button-nocomp.oj-button-outlined-chrome:link,
.oj-button-nocomp.oj-button-outlined-chrome:visited,
.oj-button-nocomp.oj-button-outlined-chrome:hover,
.oj-button-nocomp.oj-button-outlined-chrome:active,
.oj-button.oj-button-outlined-chrome .oj-button-button,
.oj-button.oj-button-outlined-chrome .oj-button-button:link,
.oj-button.oj-button-outlined-chrome .oj-button-button:visited,
.oj-button.oj-button-outlined-chrome .oj-button-button:hover,
.oj-button.oj-button-outlined-chrome .oj-button-button:active {
  font-weight: normal;
}

.oj-button.oj-default.oj-button-outlined-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-outlined-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-outlined-chrome .oj-button-icon {
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-button.oj-hover.oj-button-outlined-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-outlined-chrome:hover .oj-button-icon {
  color: #966486;
}

.oj-button.oj-active.oj-button-outlined-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-outlined-chrome:active .oj-button-icon {
  color: hsl(203, 2%, 100%);
}

.oj-button.oj-selected.oj-button-outlined-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}

.oj-button.oj-selected.oj-hover.oj-button-outlined-chrome .oj-button-icon {
  color: #966486;
}

.oj-button.oj-disabled.oj-button-outlined-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-outlined-chrome:disabled .oj-button-icon {
  color: #966486;
}

.oj-button.oj-disabled.oj-selected.oj-button-outlined-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}

/* Call To Action (CTA) chrome button guides the user to take or complete the action that is the main goal of the page or page section.
 * There should only be one CTA button on a page at any given time.
 * cta-chrome buttons have chrome (background and border) in all states (default,
 * focus-only, disabled, hover, active ...).
 * selected states do not apply since CTA buttons are Push Buttons only
 */
.oj-button-toggle.oj-button-cta-chrome,
.oj-button-toggle.oj-button-cta-chrome:link,
.oj-button-toggle.oj-button-cta-chrome:visited,
.oj-button-toggle.oj-button-cta-chrome:hover,
.oj-button-toggle.oj-button-cta-chrome:active,
.oj-button-nocomp.oj-button-cta-chrome,
.oj-button-nocomp.oj-button-cta-chrome:link,
.oj-button-nocomp.oj-button-cta-chrome:visited,
.oj-button-nocomp.oj-button-cta-chrome:hover,
.oj-button-nocomp.oj-button-cta-chrome:active,
.oj-button.oj-button-cta-chrome .oj-button-button,
.oj-button.oj-button-cta-chrome .oj-button-button:link,
.oj-button.oj-button-cta-chrome .oj-button-button:visited,
.oj-button.oj-button-cta-chrome .oj-button-button:hover,
.oj-button.oj-button-cta-chrome .oj-button-button:active {
  font-weight: normal;
}

/* oj-default is applied iff the button is not in any of the other states, 
   namely oj-active, oj-disabled, oj-hover, or oj-focus.
   oj-focus-only is applied iff the button has oj-focus but not any of the other 4 states listed above.*/
.oj-button-toggle.oj-default.oj-button-cta-chrome,
.oj-button-toggle.oj-focus-only.oj-button-cta-chrome,
.oj-button-nocomp.oj-button-cta-chrome,
.oj-button.oj-default.oj-button-cta-chrome .oj-button-button,
.oj-button.oj-focus-only.oj-button-cta-chrome .oj-button-button {
  background-color: #027bc7;
  background-image: none;
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  box-shadow: none;
  text-shadow: none;
}

.oj-button.oj-default.oj-button-cta-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-cta-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-cta-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}

.oj-button-toggle.oj-hover.oj-button-cta-chrome,
.oj-button-nocomp.oj-button-cta-chrome:hover,
.oj-button.oj-hover.oj-button-cta-chrome .oj-button-button {
  background-color: #027bc7;
  background-image: linear-gradient(hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0.15));
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  box-shadow: none;
  text-shadow: none;
}

.oj-button.oj-hover.oj-button-cta-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-cta-chrome:hover .oj-button-icon {
  color: hsl(203, 2%, 100%);
}

/* oj-active is applied to a push button when it is actively being held down 
   by the mouse button or Enter or Spacebar. */
.oj-button-toggle.oj-active.oj-button-cta-chrome,
.oj-button-nocomp.oj-button-cta-chrome:active,
.oj-button-nocomp.oj-active.oj-button-cta-chrome,
.oj-button.oj-active.oj-button-cta-chrome .oj-button-button {
  background-color: #027bc7;
  background-image: linear-gradient(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 0%, 0.1));
  border-color: var(transparent);
  color: hsl(203, 2%, 100%);
  box-shadow: none;
  text-shadow: none;
}

.oj-button.oj-active.oj-button-cta-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-cta-chrome:active .oj-button-icon,
.oj-button-nocomp.oj-active.oj-button-cta-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}

.oj-button-toggle.oj-disabled.oj-button-cta-chrome,
.oj-button-nocomp.oj-button-cta-chrome:disabled,
.oj-button.oj-disabled.oj-button-cta-chrome .oj-button-button {
  background-color: #027bc7;
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  box-shadow: none;
  opacity: 0.4;
  background-image: none;
}

.oj-button.oj-disabled.oj-button-cta-chrome .oj-button-icon,
.oj-button-nocomp.oj-button-cta-chrome:disabled .oj-button-icon {
  color: hsl(203, 2%, 100%);
}

/* The element containing the text of buttons without icons.  This is the Button (input element) 
 * itself for <input type=button|submit|reset>, which doesn't support icons at all, and a nested span 
 * for other types of Buttons.
 */
input.oj-button[type=button],
input.oj-button[type=submit],
input.oj-button[type=reset],
.oj-button-nocomp.oj-button-text-only,
.oj-buttonset .oj-button-text-only .oj-button-text,
.oj-button-text-only .oj-button-text {
  padding: 0 0.92857rem;
}

/* The text span of buttons with text, a left icon, but no right icon */
html:not([dir=rtl]) .oj-buttonset .oj-button-text-icon-start .oj-button-text,
html:not([dir=rtl]) .oj-button-text-icon-start .oj-button-text {
  padding: 0 0.92857rem 0 0;
}

html[dir=rtl] .oj-buttonset .oj-button-text-icon-end .oj-button-text,
html[dir=rtl] .oj-button-text-icon-end .oj-button-text {
  padding: 0 0.92857rem 0 0;
}

/* The text span of buttons with text, a right icon, but no left icon */
html:not([dir=rtl]) .oj-buttonset .oj-button-text-icon-end .oj-button-text,
html:not([dir=rtl]) .oj-button-text-icon-end .oj-button-text {
  padding: 0 0 0 0.92857rem;
}

html[dir=rtl] .oj-buttonset .oj-button-text-icon-start .oj-button-text,
html[dir=rtl] .oj-button-text-icon-start .oj-button-text {
  padding: 0 0 0 0.92857rem;
}

/* The text span of buttons with text and both icons */
.oj-buttonset .oj-button-text-icons .oj-button-text,
.oj-button-text-icons .oj-button-text {
  padding: 0;
}

/* The left icon of buttons with text and a left icon, with or without a right icon */
html:not([dir=rtl]) .oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 0.85714rem;
}

html[dir=rtl] .oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 0.85714rem;
}

/* The left icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 0.57143rem;
}

html[dir=rtl] .oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 0.57143rem;
}

/* The icon of buttons with with 1 icon (whether start or end) and no text */
.oj-buttonset .oj-button-icon-only .oj-button-icon,
.oj-button-nocomp .oj-button-icon-only,
.oj-button-icon-only .oj-button-icon {
  margin-right: 0.57143rem;
  margin-left: 0.57143rem;
}

/* The right icon of buttons with text and a right icon, with or without a left icon */
html:not([dir=rtl]) .oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 0.85714rem;
  margin-left: 0.42857rem;
}

html[dir=rtl] .oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 0.85714rem;
  margin-left: 0.42857rem;
}

/* The right icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 0.57143rem;
}

html[dir=rtl] .oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 0.57143rem;
}

.oj-button-icon-only .oj-button-icon {
  display: inline-flex;
}

/* The element containing the text of buttons without icons.  This is the Button (input element) 
 * itself for <input type=button|submit|reset>, which doesn't support icons at all, and a nested span 
 * for other types of Buttons.
 */
input.oj-button-sm.oj-button[type=button],
input.oj-button-sm.oj-button[type=submit],
input.oj-button-sm.oj-button[type=reset],
.oj-button-sm.oj-button-nocomp.oj-button-text-only,
.oj-button-sm.oj-buttonset .oj-button-text-only .oj-button-text,
.oj-button-sm.oj-button-text-only .oj-button-text {
  padding: 0 0.78571rem;
}

/* The text span of buttons with text, a left icon, but no right icon */
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-text-icon-start .oj-button-text,
html:not([dir=rtl]) .oj-button-sm.oj-button-text-icon-start .oj-button-text {
  padding: 0 0.78571rem 0 0;
}

html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-text-icon-end .oj-button-text,
html[dir=rtl] .oj-button-sm.oj-button-text-icon-end .oj-button-text {
  padding: 0 0.78571rem 0 0;
}

/* The text span of buttons with text, a right icon, but no left icon */
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-text-icon-end .oj-button-text,
html:not([dir=rtl]) .oj-button-sm.oj-button-text-icon-end .oj-button-text {
  padding: 0 0 0 0.78571rem;
}

html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-text-icon-start .oj-button-text,
html[dir=rtl] .oj-button-sm.oj-button-text-icon-start .oj-button-text {
  padding: 0 0 0 0.78571rem;
}

/* The text span of buttons with text and both icons */
.oj-button-sm.oj-buttonset .oj-button-text-icons .oj-button-text,
.oj-button-sm.oj-button-text-icons .oj-button-text {
  padding: 0;
}

/* The left icon of buttons with text and a left icon, with or without a right icon */
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-sm.oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-sm.oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 0.78571rem;
}

html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-sm.oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-sm.oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 0.78571rem;
}

/* The left icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 0.42857rem;
}

html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 0.42857rem;
}

/* The icon of buttons with with 1 icon (whether start or end) and no text */
.oj-button-sm.oj-buttonset .oj-button-icon-only .oj-button-icon,
.oj-button-sm.oj-button-nocomp .oj-button-icon-only,
.oj-button-sm.oj-button-icon-only .oj-button-icon {
  margin-right: 0.42857rem;
  margin-left: 0.42857rem;
}

/* The right icon of buttons with text and a right icon, with or without a left icon */
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-sm.oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-sm.oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 0.78571rem;
  margin-left: 0.42857rem;
}

html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-sm.oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-sm.oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 0.78571rem;
  margin-left: 0.42857rem;
}

/* The right icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 0.42857rem;
}

html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 0.42857rem;
}

.oj-button-sm.oj-button-icon-only .oj-button-icon {
  display: inline-flex;
}

/* The element containing the text of buttons without icons.  This is the Button (input element) 
 * itself for <input type=button|submit|reset>, which doesn't support icons at all, and a nested span 
 * for other types of Buttons.
 */
input.oj-button-lg.oj-button[type=button],
input.oj-button-lg.oj-button[type=submit],
input.oj-button-lg.oj-button[type=reset],
.oj-button-lg.oj-button-nocomp.oj-button-text-only,
.oj-button-lg.oj-buttonset .oj-button-text-only .oj-button-text,
.oj-button-lg.oj-button-text-only .oj-button-text {
  padding: 0 1.42857rem;
}

/* The text span of buttons with text, a left icon, but no right icon */
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-text-icon-start .oj-button-text,
html:not([dir=rtl]) .oj-button-lg.oj-button-text-icon-start .oj-button-text {
  padding: 0 1.42857rem 0 0;
}

html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-text-icon-end .oj-button-text,
html[dir=rtl] .oj-button-lg.oj-button-text-icon-end .oj-button-text {
  padding: 0 1.42857rem 0 0;
}

/* The text span of buttons with text, a right icon, but no left icon */
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-text-icon-end .oj-button-text,
html:not([dir=rtl]) .oj-button-lg.oj-button-text-icon-end .oj-button-text {
  padding: 0 0 0 1.42857rem;
}

html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-text-icon-start .oj-button-text,
html[dir=rtl] .oj-button-lg.oj-button-text-icon-start .oj-button-text {
  padding: 0 0 0 1.42857rem;
}

/* The text span of buttons with text and both icons */
.oj-button-lg.oj-buttonset .oj-button-text-icons .oj-button-text,
.oj-button-lg.oj-button-text-icons .oj-button-text {
  padding: 0;
}

/* The left icon of buttons with text and a left icon, with or without a right icon */
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-lg.oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-lg.oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 1.07143rem;
}

html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-lg.oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-lg.oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 1.07143rem;
}

/* The left icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 0.85714rem;
}

html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 0.85714rem;
}

/* The icon of buttons with with 1 icon (whether start or end) and no text */
.oj-button-lg.oj-buttonset .oj-button-icon-only .oj-button-icon,
.oj-button-lg.oj-button-nocomp .oj-button-icon-only,
.oj-button-lg.oj-button-icon-only .oj-button-icon {
  margin-right: 0.85714rem;
  margin-left: 0.85714rem;
}

/* The right icon of buttons with text and a right icon, with or without a left icon */
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-lg.oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-lg.oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 1.07143rem;
  margin-left: 0.42857rem;
}

html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-lg.oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-lg.oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 1.07143rem;
  margin-left: 0.42857rem;
}

/* The right icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 0.85714rem;
}

html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 0.85714rem;
}

.oj-button-lg.oj-button-icon-only .oj-button-icon {
  display: inline-flex;
}

/* The element containing the text of buttons without icons.  This is the Button (input element) 
 * itself for <input type=button|submit|reset>, which doesn't support icons at all, and a nested span 
 * for other types of Buttons.
 */
input.oj-button-xl.oj-button[type=button],
input.oj-button-xl.oj-button[type=submit],
input.oj-button-xl.oj-button[type=reset],
.oj-button-xl.oj-button-nocomp.oj-button-text-only,
.oj-button-xl.oj-buttonset .oj-button-text-only .oj-button-text,
.oj-button-xl.oj-button-text-only .oj-button-text {
  padding: 0 1.42857rem;
}

/* The text span of buttons with text, a left icon, but no right icon */
html:not([dir=rtl]) .oj-button-xl.oj-buttonset .oj-button-text-icon-start .oj-button-text,
html:not([dir=rtl]) .oj-button-xl.oj-button-text-icon-start .oj-button-text {
  padding: 0 1.42857rem 0 0;
}

html[dir=rtl] .oj-button-xl.oj-buttonset .oj-button-text-icon-end .oj-button-text,
html[dir=rtl] .oj-button-xl.oj-button-text-icon-end .oj-button-text {
  padding: 0 1.42857rem 0 0;
}

/* The text span of buttons with text, a right icon, but no left icon */
html:not([dir=rtl]) .oj-button-xl.oj-buttonset .oj-button-text-icon-end .oj-button-text,
html:not([dir=rtl]) .oj-button-xl.oj-button-text-icon-end .oj-button-text {
  padding: 0 0 0 1.42857rem;
}

html[dir=rtl] .oj-button-xl.oj-buttonset .oj-button-text-icon-start .oj-button-text,
html[dir=rtl] .oj-button-xl.oj-button-text-icon-start .oj-button-text {
  padding: 0 0 0 1.42857rem;
}

/* The text span of buttons with text and both icons */
.oj-button-xl.oj-buttonset .oj-button-text-icons .oj-button-text,
.oj-button-xl.oj-button-text-icons .oj-button-text {
  padding: 0;
}

/* The left icon of buttons with text and a left icon, with or without a right icon */
html:not([dir=rtl]) .oj-button-xl.oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-xl.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-xl.oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-xl.oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 1.07143rem;
}

html[dir=rtl] .oj-button-xl.oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-xl.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-xl.oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-xl.oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 1.07143rem;
}

/* The left icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-button-xl.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-xl.oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 1rem;
}

html[dir=rtl] .oj-button-xl.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-xl.oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 0.42857rem;
  margin-left: 1rem;
}

/* The icon of buttons with with 1 icon (whether start or end) and no text */
.oj-button-xl.oj-buttonset .oj-button-icon-only .oj-button-icon,
.oj-button-xl.oj-button-nocomp .oj-button-icon-only,
.oj-button-xl.oj-button-icon-only .oj-button-icon {
  margin-right: 1rem;
  margin-left: 1rem;
}

/* The right icon of buttons with text and a right icon, with or without a left icon */
html:not([dir=rtl]) .oj-button-xl.oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-xl.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-xl.oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-xl.oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 1.07143rem;
  margin-left: 0.42857rem;
}

html[dir=rtl] .oj-button-xl.oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-xl.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-xl.oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-xl.oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 1.07143rem;
  margin-left: 0.42857rem;
}

/* The right icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-button-xl.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-xl.oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: 1rem;
}

html[dir=rtl] .oj-button-xl.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-xl.oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: 1rem;
}

.oj-button-xl.oj-button-icon-only .oj-button-icon {
  display: inline-flex;
}

/* reset extra padding in Firefox, see h5bp.com/1 */
input.oj-button::-moz-focus-inner,
button.oj-button::-moz-focus-inner,
.oj-button button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.oj-hicontrast .oj-button-toggle.oj-focus,
.oj-hicontrast .oj-button.oj-focus .oj-button-button {
  outline-width: 3px;
}

.oj-hicontrast .oj-button-toggle.oj-selected,
.oj-hicontrast .oj-button.oj-selected .oj-button-button {
  border-style: double;
  border-width: 3px;
}

.oj-hicontrast .oj-button-toggle.oj-disabled,
.oj-hicontrast .oj-button.oj-disabled .oj-button-button {
  border-style: dotted;
}

.oj-hicontrast .oj-button-toggle.oj-disabled.oj-selected,
.oj-hicontrast .oj-button.oj-disabled.oj-selected .oj-button-button {
  border-width: 2px;
}

/* menu buttons */
.oj-button-primary.oj-buttonset .oj-button-toggle.oj-default.oj-button-full-chrome, .oj-button-primary.oj-buttonset .oj-button-toggle.oj-focus-only.oj-button-full-chrome, .oj-button-primary.oj-button-toggle.oj-default.oj-button-full-chrome, .oj-button-primary.oj-button-toggle.oj-focus-only.oj-button-full-chrome, .oj-button-primary.oj-button.oj-default.oj-button-full-chrome .oj-button-button, .oj-button-primary.oj-button.oj-focus-only.oj-button-full-chrome .oj-button-button {
  background-color: #027bc7;
  background-image: none;
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  text-shadow: none;
}
.oj-button-primary.oj-buttonset .oj-button.oj-default.oj-button-full-chrome .oj-button-icon, .oj-button-primary.oj-buttonset .oj-button.oj-focus-only.oj-button-full-chrome .oj-button-icon, .oj-button-primary.oj-button.oj-default.oj-button-full-chrome .oj-button-icon, .oj-button-primary.oj-button.oj-focus-only.oj-button-full-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
.oj-button-primary.oj-buttonset .oj-button-toggle.oj-hover.oj-button-full-chrome:not(.oj-active), .oj-button-primary.oj-button-toggle.oj-hover.oj-button-full-chrome:not(.oj-active), .oj-button-primary.oj-button.oj-hover.oj-button-full-chrome:not(.oj-active) .oj-button-button {
  background-color: #027bc7;
  background-image: linear-gradient(hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0.15));
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  text-shadow: none;
}
.oj-button-primary.oj-buttonset .oj-button.oj-hover.oj-button-full-chrome:not(.oj-active) .oj-button-icon, .oj-button-primary.oj-button.oj-hover.oj-button-full-chrome:not(.oj-active) .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
.oj-button-primary.oj-buttonset .oj-button-toggle.oj-active.oj-button-full-chrome, .oj-button-primary.oj-button-toggle.oj-active.oj-button-full-chrome, .oj-button-primary.oj-button.oj-active.oj-button-full-chrome .oj-button-button {
  background-color: #027bc7;
  background-image: linear-gradient(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 0%, 0.1));
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  text-shadow: none;
}
.oj-button-primary.oj-buttonset .oj-button.oj-active.oj-button-full-chrome .oj-button-icon, .oj-button-primary.oj-button.oj-active.oj-button-full-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
.oj-button-primary.oj-buttonset .oj-button-toggle.oj-selected.oj-button-full-chrome:not(.oj-disabled), .oj-button-primary.oj-button-toggle.oj-selected.oj-button-full-chrome:not(.oj-disabled), .oj-button-primary.oj-button.oj-selected.oj-button-full-chrome:not(.oj-disabled) .oj-button-button {
  background-color: #027bc7;
  background-image: linear-gradient(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 0%, 0.1));
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  text-shadow: none;
}
.oj-button-primary.oj-buttonset .oj-button-toggle.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled), .oj-button-primary.oj-button-toggle.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled), .oj-button-primary.oj-button.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled) .oj-button-button {
  background-color: #027bc7;
  background-image: linear-gradient(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 0%, 0.1));
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  text-shadow: none;
}
.oj-button-primary.oj-buttonset .oj-button.oj-selected.oj-button-full-chrome:not(.oj-disabled) .oj-button-icon, .oj-button-primary.oj-button.oj-selected.oj-button-full-chrome:not(.oj-disabled) .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
.oj-button-primary.oj-buttonset .oj-button.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled) .oj-button-icon, .oj-button-primary.oj-button.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled) .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
.oj-button-primary.oj-buttonset .oj-button-toggle.oj-disabled.oj-button-full-chrome, .oj-button-primary.oj-button-toggle.oj-disabled.oj-button-full-chrome, .oj-button-primary.oj-button.oj-disabled.oj-button-full-chrome .oj-button-button {
  background-color: #027bc7;
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  opacity: 0.4;
}
.oj-button-primary.oj-buttonset .oj-button.oj-disabled.oj-button-full-chrome .oj-button-icon, .oj-button-primary.oj-button.oj-disabled.oj-button-full-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
.oj-button-primary.oj-buttonset .oj-button-toggle.oj-disabled.oj-selected.oj-button-full-chrome, .oj-button-primary.oj-button-toggle.oj-disabled.oj-selected.oj-button-full-chrome, .oj-button-primary.oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-button {
  color: hsl(203, 2%, 100%);
  background-color: #027bc7;
  border-color: transparent;
}
.oj-button-primary.oj-buttonset .oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-icon, .oj-button-primary.oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
.oj-button-confirm.oj-buttonset .oj-button-toggle.oj-default.oj-button-full-chrome, .oj-button-confirm.oj-buttonset .oj-button-toggle.oj-focus-only.oj-button-full-chrome, .oj-button-confirm.oj-button-toggle.oj-default.oj-button-full-chrome, .oj-button-confirm.oj-button-toggle.oj-focus-only.oj-button-full-chrome, .oj-button-confirm.oj-button.oj-default.oj-button-full-chrome .oj-button-button, .oj-button-confirm.oj-button.oj-focus-only.oj-button-full-chrome .oj-button-button {
  background-color: #008230;
  background-image: none;
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  text-shadow: none;
}
.oj-button-confirm.oj-buttonset .oj-button.oj-default.oj-button-full-chrome .oj-button-icon, .oj-button-confirm.oj-buttonset .oj-button.oj-focus-only.oj-button-full-chrome .oj-button-icon, .oj-button-confirm.oj-button.oj-default.oj-button-full-chrome .oj-button-icon, .oj-button-confirm.oj-button.oj-focus-only.oj-button-full-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
.oj-button-confirm.oj-buttonset .oj-button-toggle.oj-hover.oj-button-full-chrome:not(.oj-active), .oj-button-confirm.oj-button-toggle.oj-hover.oj-button-full-chrome:not(.oj-active), .oj-button-confirm.oj-button.oj-hover.oj-button-full-chrome:not(.oj-active) .oj-button-button {
  background-color: #008230;
  background-image: linear-gradient(hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0.15));
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  text-shadow: none;
}
.oj-button-confirm.oj-buttonset .oj-button.oj-hover.oj-button-full-chrome:not(.oj-active) .oj-button-icon, .oj-button-confirm.oj-button.oj-hover.oj-button-full-chrome:not(.oj-active) .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
.oj-button-confirm.oj-buttonset .oj-button-toggle.oj-active.oj-button-full-chrome, .oj-button-confirm.oj-button-toggle.oj-active.oj-button-full-chrome, .oj-button-confirm.oj-button.oj-active.oj-button-full-chrome .oj-button-button {
  background-color: #008230;
  background-image: linear-gradient(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 0%, 0.1));
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  text-shadow: none;
}
.oj-button-confirm.oj-buttonset .oj-button.oj-active.oj-button-full-chrome .oj-button-icon, .oj-button-confirm.oj-button.oj-active.oj-button-full-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
.oj-button-confirm.oj-buttonset .oj-button-toggle.oj-selected.oj-button-full-chrome:not(.oj-disabled), .oj-button-confirm.oj-button-toggle.oj-selected.oj-button-full-chrome:not(.oj-disabled), .oj-button-confirm.oj-button.oj-selected.oj-button-full-chrome:not(.oj-disabled) .oj-button-button {
  background-color: #008230;
  background-image: linear-gradient(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 0%, 0.1));
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  text-shadow: none;
}
.oj-button-confirm.oj-buttonset .oj-button-toggle.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled), .oj-button-confirm.oj-button-toggle.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled), .oj-button-confirm.oj-button.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled) .oj-button-button {
  background-color: #008230;
  background-image: linear-gradient(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 0%, 0.1));
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  text-shadow: none;
}
.oj-button-confirm.oj-buttonset .oj-button.oj-selected.oj-button-full-chrome:not(.oj-disabled) .oj-button-icon, .oj-button-confirm.oj-button.oj-selected.oj-button-full-chrome:not(.oj-disabled) .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
.oj-button-confirm.oj-buttonset .oj-button.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled) .oj-button-icon, .oj-button-confirm.oj-button.oj-selected.oj-hover.oj-button-full-chrome:not(.oj-disabled) .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
.oj-button-confirm.oj-buttonset .oj-button-toggle.oj-disabled.oj-button-full-chrome, .oj-button-confirm.oj-button-toggle.oj-disabled.oj-button-full-chrome, .oj-button-confirm.oj-button.oj-disabled.oj-button-full-chrome .oj-button-button {
  background-color: #008230;
  border-color: transparent;
  color: hsl(203, 2%, 100%);
  opacity: 0.4;
}
.oj-button-confirm.oj-buttonset .oj-button.oj-disabled.oj-button-full-chrome .oj-button-icon, .oj-button-confirm.oj-button.oj-disabled.oj-button-full-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
.oj-button-confirm.oj-buttonset .oj-button-toggle.oj-disabled.oj-selected.oj-button-full-chrome, .oj-button-confirm.oj-button-toggle.oj-disabled.oj-selected.oj-button-full-chrome, .oj-button-confirm.oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-button {
  color: hsl(203, 2%, 100%);
  background-color: #008230;
  border-color: transparent;
}
.oj-button-confirm.oj-buttonset .oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-icon, .oj-button-confirm.oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-icon {
  color: hsl(203, 2%, 100%);
}
/* component */
/* --------------------------------------------------------------- */
.oj-component-popup, .oj-listbox-drop, .oj-dialog, .oj-messages-layer oj-messages, .oj-popup, .oj-menu {
  z-index: 1;
  position: absolute;
}

.oj-component-layer, .oj-listbox-drop-layer, .oj-dialog-layer, .oj-messages-layer, .oj-popup-layer, .oj-menu-layer {
  position: relative;
}

/* overlay used to hide non-modal content */
.oj-component-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsl(0, 0%, 0%);
  opacity: 0.4;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* disable body scroll for modal popups */
.oj-component-modal-open {
  overflow: hidden !important;
}

/* menu */
/* --------------------------------------------------------------- */
oj-menu {
  display: none;
}

.oj-menu-layer {
  z-index: 1000;
}

.oj-menu {
  list-style: none;
  padding-left: 0;
  padding-right: 0;
  color: hsla(0, 0%, 0%, 0.8);
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  display: inline-block;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.oj-menu-dropdown {
  border: 1px solid hsl(203, 2%, 80%);
  border-radius: 0;
  background: hsl(203, 2%, 100%);
  font-size: 1rem;
}

.oj-menu-sheet {
  border: 0;
  border-radius: 0;
  background: #704b64;
  font-size: 1rem;
  width: calc(100% - 2 * 0px);
}

.oj-menu:focus {
  outline: none;
}

.oj-menu-dropdown.oj-component {
  box-shadow: 1px 1px 3px 0 hsla(0, 0%, 0%,0.35);
}

.oj-menu.oj-menu-submenu {
  position: fixed;
  box-shadow: 1px 1px 3px 0 hsla(0, 0%, 0%,0.35);
}

.oj-menu-item {
  margin: 0;
  padding: 0;
  width: 100%;
  display: list-item;
}

.oj-menu-dropdown .oj-menu-item:first-child,
.oj-menu-dropdown .oj-menu-item:first-child > a {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.oj-menu-dropdown .oj-menu-item:last-child,
.oj-menu-dropdown .oj-menu-item:last-child > a {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.oj-menu-sheet .oj-menu-item:first-child,
.oj-menu-sheet .oj-menu-item:first-child > a {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.oj-menu-sheet .oj-menu-item:last-child,
.oj-menu-sheet .oj-menu-item:last-child > a {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.oj-menu-sheet .oj-menu-item-after-divider,
.oj-menu-sheet .oj-menu-item-after-divider > a {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.oj-menu-sheet .oj-menu-item-before-divider,
.oj-menu-sheet .oj-menu-item-before-divider > a {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.oj-menu-divider {
  margin: 1px;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-style: solid;
  display: list-item;
}

.oj-menu-dropdown .oj-menu-divider {
  border-width: 1px 0 0 0;
  border-color: hsl(203, 2%, 80%);
}

.oj-menu-sheet .oj-menu-divider {
  border-width: 1px 0 0 0;
  border-color: hsl(203, 2%, 80%);
}

.oj-menu-item > a {
  padding: 0 calc(0.57143rem + 16px + 0.57143rem);
  position: relative;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-weight: normal;
}

.oj-menu-dropdown .oj-menu-item > a {
  height: 2.5rem;
  line-height: 2.5rem;
  color: #000000;
  border-top-width: 0px;
  border-top-color: #704b64;
  border-top-style: solid;
}

.oj-menu-sheet .oj-menu-item > a {
  height: 2.5rem;
  line-height: 2.5rem;
  background: transparent;
  color: #704b64;
  border-top-width: 0px;
  border-top-color: #704b64;
  border-top-style: solid;
}

.oj-menu-item:last-child > a {
  border-bottom-width: 0px;
  border-bottom-color: transparent;
  border-bottom-style: solid;
}

.oj-menu-item-cancel > a {
  font-weight: normal;
}

/* For each menu and submenu, either oj-menu-icons or oj-menu-text-only is applied to the menu, depending on whether at
   least one menu item in the menu (excluding its "Cancel" menu item and submenus) has an icon (not submenu icon).
   These classes facilitate (say) leaving space for a column of icons iff at least one item has an icon, and doing so
   for each menu/submenu independently. */
html:not([dir=rtl]) a.oj-menu-option-start-icon {
  padding-left: calc(0.57143rem + 16px + 0.57143rem);
}
html[dir=rtl] a.oj-menu-option-start-icon {
  padding-right: calc(0.57143rem + 16px + 0.57143rem);
}

html:not([dir=rtl]) a.oj-menu-option-end-icon {
  padding-right: calc(0.57143rem + 16px + 0.57143rem);
}
html[dir=rtl] a.oj-menu-option-end-icon {
  padding-left: calc(0.57143rem + 16px + 0.57143rem);
}

a.oj-menu-option-text-only {
  text-align: initial;
}
html:not([dir=rtl]) a.oj-menu-option-text-only {
  padding-left: calc(0.57143rem + 16px + 0.57143rem);
}
html[dir=rtl] a.oj-menu-option-text-only {
  padding-right: calc(0.57143rem + 16px + 0.57143rem);
}

.oj-menu-option-text-only .oj-menu-cancel-icon {
  display: none;
}

.oj-menu-divider + .oj-menu-item > a {
  border-top-width: 0;
}

.oj-menu-item.oj-focus-highlight > a {
  outline: dotted 1px hsla(0, 0%, 0%, 0.8);
  outline: -webkit-focus-ring-color auto;
}

.oj-menu-dropdown .oj-menu-item.oj-focus > a,
.oj-menu-dropdown .oj-menu-item.oj-focus-ancestor > a {
  background: #966486;
}

.oj-menu-dropdown .oj-menu-item.oj-focus > a,
.oj-menu-dropdown .oj-menu-item.oj-focus-ancestor > a,
.oj-menu-dropdown .oj-menu-item.oj-focus + .oj-menu-item > a,
.oj-menu-dropdown .oj-menu-item.oj-focus-ancestor + .oj-menu-item > a {
  border-top-color: #966486;
}

.oj-menu-dropdown .oj-menu-item:last-child.oj-focus > a,
.oj-menu-dropdown .oj-menu-item:last-child.oj-focus-ancestor > a {
  border-bottom-color: #966486;
}

.oj-menu-sheet .oj-menu-item.oj-focus > a {
  background: #966486;
}

.oj-menu-sheet .oj-menu-item.oj-focus > a,
.oj-menu-sheet .oj-menu-item.oj-focus + .oj-menu-item > a {
  border-top-color: #966486;
}

.oj-menu-sheet .oj-menu-item:last-child.oj-focus > a {
  border-bottom-color: #966486;
}

.oj-menu.oj-disabled .oj-menu-item > a,
.oj-menu-item.oj-disabled > a {
  cursor: default;
}

.oj-menu-dropdown.oj-disabled .oj-menu-item > a,
.oj-menu-dropdown .oj-menu-item.oj-disabled > a {
  color: hsla(0, 0%, 0%, 0.38);
}

.oj-menu-sheet.oj-disabled .oj-menu-item > a,
.oj-menu-sheet .oj-menu-item.oj-disabled > a {
  color: hsla(0, 0%, 0%, 0.38);
}

/* menu item icons (not submenu icons) */
.oj-menu-item-icon,
.oj-menu-item-end-icon {
  color: #704b64;
  position: absolute;
}

html:not([dir=rtl]) .oj-menu-item-icon {
  margin-left: calc(0px - 16px - 0.57143rem);
  margin-right: 0.57143rem;
}
html[dir=rtl] .oj-menu-item-icon {
  margin-right: calc(0px - 16px - 0.57143rem);
  margin-left: 0.57143rem;
}

html:not([dir=rtl]) .oj-menu-item-end-icon {
  right: 0;
  margin-right: 0.57143rem;
  margin-left: calc(0px - 16px - 0.57143rem);
}
html[dir=rtl] .oj-menu-item-end-icon {
  left: 0;
  margin-left: 0.57143rem;
  margin-right: calc(0px - 16px - 0.57143rem);
}

.oj-menu-item .oj-menu-item-icon,
.oj-menu-item .oj-menu-item-end-icon {
  font-size: 16px;
}

.oj-menu.oj-disabled .oj-menu-item-icon,
.oj-menu.oj-disabled .oj-menu-item-end-icon,
.oj-menu-item.oj-disabled .oj-menu-item-icon,
.oj-menu-item.oj-disabled .oj-menu-item-end-icon {
  color: #704b64;
  opacity: 1;
}

html:not([dir=rtl]) .oj-menu-submenu-icon {
  right: 0;
}
html[dir=rtl] .oj-menu-submenu-icon {
  left: 0;
}
.oj-menu-submenu-icon {
  color: inherit;
  position: absolute;
  line-height: 1.8;
  height: auto;
}

.oj-menu-context-menu-launcher {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.oj-hicontrast .oj-menu-item.oj-focus > a,
.oj-hicontrast .oj-menu-item.oj-focus-ancestor > a {
  outline: dotted 3px;
}

.oj-hicontrast .oj-menu-item.oj-focus.oj-disabled > a {
  outline: dotted 1px;
}

.oj-hicontrast .oj-menu-item.oj-disabled > a {
  border: dotted 1px;
}

oj-navigation-list:not(.oj-complete) {
  visibility: hidden;
}

oj-navigation-list {
  display: block;
}

/*Navlist root node*/
.oj-navigationlist,
.oj-navigationlist-listview-container {
  overflow-x: hidden;
}

.oj-navigationlist-listview {
  position: relative;
}

.oj-navigationlist-touch {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* navigation list divider used in category header navlist*/
.oj-navigationlist-category-divider {
  border-color: hsl(203, 2%, 88%);
  border-style: solid;
  border-width: 1px 0 0;
  font-size: 0;
  height: 0;
  line-height: 0;
  margin: 0 3px;
}

/* navigation list divider used in horizontal navlist to separate buttons*/
.oj-navigationlist-horizontal .oj-navigationlist-divider {
  border-color: hsl(203, 2%, 90%);
  border-style: solid;
  border-width: 0 1px 0 0;
  font-size: 0;
  height: 1.714rem;
  line-height: 0;
  margin: 5px 0;
  align-self: center;
  display: none;
}

.oj-navigationlist-item-dividers .oj-navigationlist-divider {
  display: list-item;
}

/* Basic styling  for all ul elements in list*/
.oj-navigationlist-element, .oj-navigationlist-group {
  list-style-type: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

.oj-navigationlist-item-element:not(.oj-navigationlist-item) {
  display: block;
  line-height: 0;
}

.oj-navigationlist-item-element {
  list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

/* Remove focus ring on outer ul element*/
.oj-navigationlist-element:focus {
  outline: none;
}

/* Style content wrapper of each list item */
.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-label {
  vertical-align: middle;
}

.oj-navigationlist-vertical .oj-navigationlist-item::before {
  min-height: 3.14286rem;
  content: "";
  display: inline-block;
  visibility: hidden;
}

.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item::before {
  min-height: 3.14286rem;
}

.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item-label {
  font-size: 1rem;
}

/* Styling for expand/collapse icons holder */
.oj-navigationlist-collapse-icon,
.oj-navigationlist-expand-icon {
  order: 1;
  align-self: center;
}

a.oj-navigationlist-collapse-icon,
a.oj-navigationlist-expand-icon,
a.oj-navigationlist-collapse-icon:hover,
a.oj-navigationlist-expand-icon:hover {
  text-decoration: none;
}

/* Style content of each list item */
.oj-navigationlist-item-content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}

a.oj-navigationlist-item-content {
  text-decoration: none;
  font-weight: normal;
  outline: none;
  overflow: hidden;
}

a.oj-navigationlist-item-content:active {
  background-color: transparent;
}

a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #000000;
}
.oj-contrast-marker a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: hsl(203, 2%, 70%);
}

.oj-selected > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: rgb(1.6, 98.4, 159.2);
}
.oj-contrast-marker .oj-selected > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: hsl(203, 2%, 98%);
}

.oj-contrast-marker .oj-hover:not(.oj-selected) > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: hsl(203, 2%, 98%);
}

/* Navigation list node label or arbitrary content place holder*/
.oj-navigationlist-item-label {
  order: 2;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  display: inline-block;
  line-height: normal;
}

.oj-navigationlist-item-text-wrap .oj-navigationlist-item-label {
  white-space: normal;
}

/*Padding for vertical navlist item label*/
.oj-navigationlist-vertical .oj-navigationlist-item-label {
  padding: 3px 0;
  flex: 1 1 auto;
}

/* hide label for icons-only case */
.oj-navigationlist-icon-only .oj-navigationlist-item-label {
  display: none;
}

/* List item's Icon */
.oj-navigationlist-item-icon {
  color: hsla(0, 0%, 0%, 0.8);
}
.oj-contrast-marker .oj-navigationlist-item-icon {
  color: hsl(203, 2%, 70%);
}
.oj-navigationlist-item-icon {
  flex: 0 0 auto;
}

.oj-navigationlist-group-item {
  display: flex;
  flex: 1 1 auto;
}

.oj-navigationlist-group {
  flex: 1 1 auto;
}

/* Disabled node */
.oj-navigationlist-item.oj-disabled > .oj-navigationlist-item-content,
.oj-navigationlist-item.oj-disabled > .oj-navigationlist-collapse-icon,
.oj-navigationlist-item.oj-disabled > .oj-navigationlist-expand-icon {
  opacity: 1;
}

.oj-navigationlist-item.oj-disabled .oj-navigationlist-item-label {
  color: hsla(0, 0%, 0%, 0.38);
}
.oj-contrast-marker .oj-navigationlist-item.oj-disabled .oj-navigationlist-item-label {
  color: hsl(203, 2%, 45%);
}

.oj-navigationlist-item.oj-disabled a.oj-navigationlist-item-content {
  cursor: default;
}

.oj-navigationlist-item.oj-disabled .oj-navigationlist-item-icon {
  color: #966486;
}
.oj-contrast-marker .oj-navigationlist-item.oj-disabled .oj-navigationlist-item-icon {
  color: hsl(203, 2%, 45%);
}

/* Selected node */
.oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
  color: #704b64;
}
.oj-contrast-marker .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
  color: hsl(203, 2%, 98%);
}

/* hover icon */
.oj-navigationlist-item.oj-hover.oj-selected .oj-navigationlist-item-icon,
.oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
  color: #966486;
}
.oj-contrast-marker .oj-navigationlist-item.oj-hover.oj-selected .oj-navigationlist-item-icon,
.oj-contrast-marker .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
  color: hsl(203, 2%, 98%);
}

.oj-contrast-marker .oj-navigationlist-vertical.oj-navigationlist-page-level .oj-navigationlist-item.oj-hover.oj-selected .oj-navigationlist-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

/*borders for high contrast mode*/
.oj-hicontrast .oj-navigationlist-item.oj-selected,
.oj-hicontrast .oj-navigationlist-item.oj-selected.oj-hover,
.oj-hicontrast .oj-navigationlist-item.oj-selected.oj-focus {
  border: 1px solid;
}

.oj-hicontrast .oj-navigationlist-item.oj-hover,
.oj-hicontrast .oj-navigationlist-item.oj-focus {
  border: 1px dotted;
}

/*Focus ring around  focused list item*/
.oj-navigationlist .oj-navigationlist-item.oj-focus-highlight {
  outline: dotted 1px hsl(203, 2%, 30%);
  outline-offset: -1px;
}

.oj-hicontrast .oj-navigationlist-item.oj-focus {
  outline: none;
}

.oj-navigationlist-item {
  border-color: transparent;
  display: flex;
  align-items: stretch;
}

.oj-navigationlist-vertical .oj-navigationlist-item.oj-selected {
  background-color: hsl(203, 2%, 95%);
}
.oj-contrast-marker .oj-navigationlist-vertical .oj-navigationlist-item.oj-selected {
  background-color: hsl(203, 2%, 15%);
}

.oj-navigationlist-item.oj-selected {
  border-color: #704b64;
}

.oj-navigationlist-item.oj-hover:not(.oj-selected) {
  background-color: hsl(203, 2%, 93%);
  border-color: #966486;
}
.oj-contrast-marker .oj-navigationlist-item.oj-hover:not(.oj-selected) {
  background-color: hsl(203, 2%, 15%);
}

.oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item.oj-hover:not(.oj-selected),
.oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-hover:not(.oj-selected) {
  border-color: #966486;
}

/*---- Start of common styles for collapsible and expanded navigation list ----*/
.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  align-self: center;
}
html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  margin-right: 0.71429rem;
}
html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  margin-left: 0.71429rem;
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-has-icons > .oj-navigationlist-item > .oj-navigationlist-item-no-icon .oj-navigationlist-item-label {
  margin-left: calc(0.71429rem + 24px);
}
html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-has-icons > .oj-navigationlist-item > .oj-navigationlist-item-no-icon .oj-navigationlist-item-label {
  margin-right: calc(0.71429rem + 24px);
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  padding-right: calc(1.07143rem - 3px);
  border-width: 0 3px 0 0;
}
html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  padding-left: calc(1.07143rem - 3px);
  border-width: 0 0 0 3px;
}
.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-style: solid;
}

.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
  border-style: none;
}

html[dir=rtl] .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-focus,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-hover,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-focus,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-hover {
  border-width: 1px;
}
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-focus,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-hover,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-focus,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-hover {
  border-width: 1px;
}
.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-focus,
.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-hover,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-focus,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-hover {
  border-style: dotted;
}

html[dir=rtl] .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-focus,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-hover,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-focus,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-hover {
  border-width: 1px;
}
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-focus,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-hover,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-focus,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-hover {
  border-width: 1px;
}
.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected,
.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-focus,
.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-hover,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-focus,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-hover {
  border-style: solid;
}

/* Padding for sublist    */
html:not([dir=rtl]) .oj-navigationlist-collapsible ul:not(.oj-navigationlist-has-icons) > .oj-navigationlist-item-element > ul,
html:not([dir=rtl]) .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical ul:not(.oj-navigationlist-has-icons) > .oj-navigationlist-item-element > ul {
  padding-left: 1.07143rem;
}
html[dir=rtl] .oj-navigationlist-collapsible ul:not(.oj-navigationlist-has-icons) > .oj-navigationlist-item-element > ul,
html[dir=rtl] .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical ul:not(.oj-navigationlist-has-icons) > .oj-navigationlist-item-element > ul {
  padding-right: 1.07143rem;
}

html:not([dir=rtl]) .oj-navigationlist-collapsible ul.oj-navigationlist-has-icons > .oj-navigationlist-item-element > ul,
html:not([dir=rtl]) .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical ul.oj-navigationlist-has-icons > .oj-navigationlist-item-element > ul {
  padding-left: calc(1.07143rem + 0.71429rem + 24px);
}
html[dir=rtl] .oj-navigationlist-collapsible ul.oj-navigationlist-has-icons > .oj-navigationlist-item-element > ul,
html[dir=rtl] .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical ul.oj-navigationlist-has-icons > .oj-navigationlist-item-element > ul {
  padding-right: calc(1.07143rem + 0.71429rem + 24px);
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-navigationlist-group-item) .oj-navigationlist-item-content {
  padding-right: 1.07143rem;
}
html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-navigationlist-group-item) .oj-navigationlist-item-content {
  padding-left: 1.07143rem;
}

html:not([dir=rtl]) .oj-navigationlist-group-item {
  padding-right: 1.07143rem;
}
html[dir=rtl] .oj-navigationlist-group-item {
  padding-left: 1.07143rem;
}

/*---- End of common styles for collapsible and expanded navigation list ----*/
/* Start of Collapsible Navigation list*/
.oj-navigationlist-collapsible .oj-navigationlist-item-element.oj-collapsed .oj-navigationlist-group {
  max-height: 0;
}

/* expand and collapse animation */
.oj-navigationlist-collapsible .oj-navigationlist-collapsible-transition {
  overflow: hidden;
}

/* Collapse or expand icon color should not change on hover*/
.oj-navigationlist-item.oj-hover a.oj-navigationlist-collapse-icon,
.oj-navigationlist-item a.oj-navigationlist-collapse-icon,
.oj-navigationlist-item.oj-hover a.oj-navigationlist-expand-icon,
.oj-navigationlist-item a.oj-navigationlist-expand-icon {
  color: hsla(0, 0%, 0%, 0.8);
}
.oj-contrast-marker .oj-navigationlist-item.oj-hover a.oj-navigationlist-collapse-icon,
.oj-contrast-marker .oj-navigationlist-item a.oj-navigationlist-collapse-icon,
.oj-contrast-marker .oj-navigationlist-item.oj-hover a.oj-navigationlist-expand-icon,
.oj-contrast-marker .oj-navigationlist-item a.oj-navigationlist-expand-icon {
  color: hsl(203, 2%, 70%);
}

.oj-navigationlist-collapse-icon:focus,
.oj-navigationlist-expand-icon:focus {
  outline: none;
}

.oj-navigationlist-focused-element:not(.oj-focus-highlight) {
  outline: none;
}

/* End of Collapsible Navigation list*/
.oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
  border-color: transparent;
}
html[dir=rtl] .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
  padding-right: calc(1.07143rem - 3px);
  border-width: 0 3px 0 0;
}
html:not([dir=rtl]) .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
  padding-left: calc(1.07143rem - 3px);
  border-width: 0 0 0 3px;
}
.oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
  border-style: solid;
  border-radius: 0;
}

.oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item:first-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
html[dir=rtl] .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item:first-of-type {
  border-top-width: 0;
}
html:not([dir=rtl]) .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item:first-of-type {
  border-top-width: 0;
}

.oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item:last-of-type {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/*Start of icons only navlist*/
.oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected,
.oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item.oj-hover {
  background-color: transparent;
}
.oj-contrast-marker .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected,
.oj-contrast-marker .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item.oj-hover {
  background-color: transparent;
}

.oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
  background-color: #027bc7;
}
.oj-contrast-marker .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
  background-color: #027bc7;
}

.oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item.oj-hover:not(.oj-selected) .oj-navigationlist-item-icon {
  background-color: hsl(203, 2%, 93%);
}
.oj-contrast-marker .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item.oj-hover:not(.oj-selected) .oj-navigationlist-item-icon {
  background-color: hsl(203, 2%, 15%);
}

.oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
  border-radius: 50%;
  padding: 12px;
}

.oj-navigationlist-icon-only .oj-navigationlist-item-content {
  justify-content: center;
}

/*End of icons only navlist*/
.oj-navigationlist-vertical.oj-navigationlist-icon-only {
  display: inline-flex;
}

.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
  margin: 4px 0 0;
}

.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item:first-child {
  margin-top: 0;
}

/* Start of Page Level navlist styles*/
.oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected,
.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-selected {
  border-color: #027bc7;
}

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected {
  background-color: transparent;
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected {
  background-color: transparent;
}

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #000000;
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: hsl(203, 2%, 70%);
}

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) .oj-navigationlist-item-icon {
  color: hsla(0, 0%, 0%, 0.8);
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) .oj-navigationlist-item-icon {
  color: hsl(203, 2%, 70%);
}

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #000000;
  font-weight: normal;
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: #027bc7;
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover:not(.oj-selected) a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #000000;
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover:not(.oj-selected) a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: hsl(203, 2%, 98%);
}

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
  color: #966486;
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
  color: hsl(203, 2%, 98%);
}

.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover.oj-selected .oj-navigationlist-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active.oj-hover:not(.oj-selected),
.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active:not(.oj-selected) {
  background-color: hsl(203, 2%, 93%);
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active.oj-hover:not(.oj-selected),
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active:not(.oj-selected) {
  background-color: hsl(203, 2%, 15%);
}
html[dir=rtl] .oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active.oj-hover:not(.oj-selected),
html[dir=rtl] .oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active:not(.oj-selected) {
  border-right-color: #966486;
}
html:not([dir=rtl]) .oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active.oj-hover:not(.oj-selected),
html:not([dir=rtl]) .oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active:not(.oj-selected) {
  border-left-color: #966486;
}

/* End of Page Level navlist styles*/
/*Start of common horizontal navigationlist styles */
.oj-navigationlist-horizontal .oj-navigationlist-element {
  display: flex;
}

.oj-navigationlist-horizontal .oj-navigationlist-item {
  flex: 1 1 auto;
}

/* This is due to bug in IE 11 where setting flex-shrink:0 is needed to avoid truncation in item text which is needed for overflow feature. This work around breaks text-wrap functionality so enabling this only when no text wrap. We can remove this once IE 11 support dropped and can update docs saying text-wrap is supported with overflow. */
.oj-navigationlist-horizontal:not(.oj-navigationlist-item-text-wrap) .oj-navigationlist-item {
  flex: 1 0 auto;
}

@media print, screen {
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-sm-condense .oj-navigationlist-item,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-sm-condense .oj-navigationlist-item {
    flex: 0 0 auto;
  }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-sm-justify-content-center .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-sm-justify-content-center .oj-navigationlist-element {
    justify-content: center;
  }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-sm-justify-content-flex-end .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-sm-justify-content-flex-end .oj-navigationlist-element {
    justify-content: flex-end;
  }
}
@media print, screen and (min-width: 768px) {
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-md-condense .oj-navigationlist-item,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-md-condense .oj-navigationlist-item {
    flex: 0 0 auto;
  }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-md-justify-content-center .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-md-justify-content-center .oj-navigationlist-element {
    justify-content: center;
  }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-md-justify-content-flex-end .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-md-justify-content-flex-end .oj-navigationlist-element {
    justify-content: flex-end;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-lg-condense .oj-navigationlist-item,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-lg-condense .oj-navigationlist-item {
    flex: 0 1 auto;
  }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-lg-justify-content-center .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-lg-justify-content-center .oj-navigationlist-element {
    justify-content: center;
  }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-lg-justify-content-flex-end .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-lg-justify-content-flex-end .oj-navigationlist-element {
    justify-content: flex-end;
  }
}
@media screen and (min-width: 1281px) {
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-xl-condense .oj-navigationlist-item,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-xl-condense .oj-navigationlist-item {
    flex: 0 0 auto;
  }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-xl-justify-content-center .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-xl-justify-content-center .oj-navigationlist-element {
    justify-content: center;
  }
  .oj-navigationlist-app-level.oj-navigationlist-horizontal.oj-xl-justify-content-flex-end .oj-navigationlist-element,
  .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-xl-justify-content-flex-end .oj-navigationlist-element {
    justify-content: flex-end;
  }
}
.oj-navigationlist-horizontal .oj-navigationlist-item-element {
  box-sizing: border-box;
  min-height: 2.71429rem;
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item-element {
  min-height: 2.71429rem;
}

.oj-navigationlist-horizontal .oj-selected > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: rgb(1.6, 98.4, 159.2);
}

.oj-navigationlist-horizontal .oj-navigationlist-item.oj-selected {
  background-color: transparent;
}
.oj-contrast-marker .oj-navigationlist-horizontal .oj-navigationlist-item.oj-selected {
  background-color: transparent;
}

.oj-navigationlist-horizontal .oj-navigationlist-item-label {
  align-self: center;
}

.oj-navigationlist-horizontal .oj-navigationlist-item-icon {
  margin: 0;
}

/*End of common horizontal navigationlist styles */
/*Start of  horizontal navigationlist styles icons only*/
html:not([dir=rtl]) .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
  margin-left: 4px;
}
html[dir=rtl] .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
  margin-right: 4px;
}

html:not([dir=rtl]) .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:first-child {
  margin-left: 0;
}
html[dir=rtl] .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:first-child {
  margin-right: 0;
}

.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected,
.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-hover {
  background-color: transparent;
}

.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
  background-color: #027bc7;
}

.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-hover:not(.oj-selected) .oj-navigationlist-item-icon {
  background-color: hsl(203, 2%, 93%);
}
.oj-contrast-marker .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-hover:not(.oj-selected) .oj-navigationlist-item-icon {
  background-color: hsl(203, 2%, 15%);
}

.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
  border-radius: 50%;
  padding: 12px;
}

/*End of  horizontal navigationlist styles icons only*/
/*Start of  horizontal navigationlist styles excluding icons only*/
.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-width: 0 0 3px 0;
  border-style: solid;
}

.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-style: none;
}

.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-focus,
.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover {
  border-width: 1px;
  border-style: dotted;
}

.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected,
.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected.oj-focus,
.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected.oj-hover {
  border-width: 1px;
  border-style: solid;
}

.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
  padding: 0.5rem 1.07143rem 4px;
  justify-content: center;
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
  padding: 0.5rem 1.07143rem 4px;
}

html:not([dir=rtl]) .oj-navigationlist-horizontal:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  margin-right: 0.71429rem;
}
html[dir=rtl] .oj-navigationlist-horizontal:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  margin-left: 0.71429rem;
}
.oj-navigationlist-horizontal:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  align-self: center;
}

/*End of  horizontal navigationlist styles excluding icons only*/
/*Start of  horizontal stacked icon label navigationlist styles */
.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-element {
  min-height: 4.28571rem;
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-element {
  min-height: 3.375rem;
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-divider {
  height: 2.714rem;
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  padding-bottom: 2px;
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
  flex-direction: column;
}

/*End of  horizontal stacked icon label navigationlist styles */
/* Start of App Level horizontal navlist styles */
.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item-label {
  font-size: 1rem;
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item-label {
  font-size: 1rem;
}

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled) a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: hsla(0, 0%, 0%, 0.7);
}
.oj-contrast-marker .oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled) a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: hsl(203, 2%, 70%);
}

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled):not(.oj-hover):not(.oj-selected) .oj-navigationlist-item-icon {
  color: hsl(203, 2%, 20%);
}
.oj-contrast-marker .oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled):not(.oj-hover):not(.oj-selected) .oj-navigationlist-item-icon {
  color: hsl(203, 2%, 70%);
}

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-selected a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: rgb(1.6, 98.4, 159.2);
}
.oj-contrast-marker .oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-selected a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: hsl(203, 2%, 98%);
}

.oj-navigationlist-app-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: #966486;
}
.oj-contrast-marker .oj-navigationlist-app-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: hsl(203, 2%, 98%);
}

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected) {
  background-color: transparent;
}

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected) a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #966486;
}

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
  color: #966486;
}

/* End of App Level horizontal navlist styles */
/* Start of Page Level horizontal navlist styles*/
.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-radius: 0;
  border-width: 0 0 3px 0;
  border-color: transparent;
}
html:not([dir=rtl]) .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-right-width: 0;
  border-left-width: 0;
}
html[dir=rtl] .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-left-width: 0;
  border-right-width: 0;
}

html:not([dir=rtl]) .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:first-of-type {
  border-left-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
html[dir=rtl] .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:first-of-type {
  border-right-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
  border-radius: 0;
  border-width: 0 0 3px 0;
  border-color: transparent;
}
html:not([dir=rtl]) .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
  border-right-width: 0;
  border-left-width: 0;
}
html[dir=rtl] .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
  border-left-width: 0;
  border-right-width: 0;
}

html:not([dir=rtl]) .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:first-of-type {
  border-left-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
html[dir=rtl] .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:first-of-type {
  border-right-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

html:not([dir=rtl]) .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-navigationlist-item-last-child,
html:not([dir=rtl]) .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-navigationlist-item-last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
html[dir=rtl] .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-navigationlist-item-last-child,
html[dir=rtl] .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-navigationlist-item-last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected,
.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected {
  border-color: #027bc7;
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item.oj-hover:not(.oj-selected),
.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover:not(.oj-selected) {
  border-color: #966486;
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected {
  background-color: transparent;
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected {
  background-color: transparent;
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #000000;
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: hsl(203, 2%, 70%);
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled):not(.oj-hover):not(.oj-selected) .oj-navigationlist-item-icon {
  color: hsla(0, 0%, 0%, 0.8);
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled):not(.oj-hover):not(.oj-selected) .oj-navigationlist-item-icon {
  color: hsl(203, 2%, 70%);
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #000000;
  font-weight: normal;
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: #027bc7;
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected) a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #966486;
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
  color: #966486;
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-active.oj-hover:not(.oj-selected),
.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-active:not(.oj-selected) {
  background-color: hsl(203, 2%, 93%);
}
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-active.oj-hover:not(.oj-selected),
.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-active:not(.oj-selected) {
  background-color: hsl(203, 2%, 15%);
}

.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-active.oj-hover:not(.oj-selected),
.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-active:not(.oj-selected) {
  border-color: #966486;
}

/*End of Page Level horizontal navlist styles*/
/*Start of sliding navlist*/
/*Hide siblings of parent node while showing the list*/
.oj-navigationlist-slider .oj-navigationlist-element:not(.oj-navigationlist-current) > .oj-navigationlist-item-element:not(.oj-expanded),
.oj-navigationlist-slider .oj-navigationlist-item-element:not(.oj-expanded) > .oj-navigationlist-group,
.oj-navigationlist-slider .oj-navigationlist-item-element.oj-expanded:not(.oj-navigationlist-current) > .oj-navigationlist-group > .oj-navigationlist-item-element:not(.oj-expanded),
.oj-navigationlist-slider .oj-navigationlist-item-element.oj-expanded > .oj-navigationlist-group-item {
  display: none;
}

/* Navlist header in case of sliding */
.oj-navigationlist-toolbar {
  background-color: transparent;
}
.oj-contrast-marker .oj-navigationlist-toolbar {
  background-color: transparent;
}
.oj-navigationlist-toolbar {
  display: flex;
  line-height: 3.142rem;
}
html:not([dir=rtl]) .oj-navigationlist-toolbar {
  padding-left: 0.714rem;
}
html[dir=rtl] .oj-navigationlist-toolbar {
  padding-right: 0.714rem;
}

/* previous link */
.oj-navigationlist-previous-link {
  align-self: center;
  order: 0;
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oj-navigationlist-previous-button {
  align-self: center;
  margin-bottom: 0;
}

a.oj-navigationlist-previous-link:active {
  background-color: transparent;
}

/* Override link style */
a.oj-navigationlist-previous-link {
  text-decoration: none;
  outline: none;
  font-weight: normal;
}

/* Label for current displayed list */
.oj-navigationlist-current-header {
  color: hsla(0, 0%, 0%, 0.85);
  font-size: 1.42857rem;
  flex: 1 1 auto;
  order: 1;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.oj-contrast-marker .oj-navigationlist-current-header {
  color: hsl(203, 2%, 98%);
}

.oj-navigationlist-toolbar-separator {
  border-left: 1px solid hsl(203, 2%, 88%);
  align-self: center;
  order: 1;
  display: inline-block;
  height: 2.642rem;
  vertical-align: middle;
}
html:not([dir=rtl]) .oj-navigationlist-toolbar-separator {
  margin: 0.214rem 0 0.214rem 0.714rem;
}
html[dir=rtl] .oj-navigationlist-toolbar-separator {
  margin: 0.214rem 0.714rem 0.214rem 0;
}

.oj-navigationlist-hierarchical-button {
  align-self: center;
  order: 2;
  flex: 0 0 auto;
}

/* override oj-button margin for hierarchical menu button*/
.oj-button.oj-navigationlist-hierarchical-button {
  margin: 0 5px;
}

html:not([dir=rtl]) .oj-navigationlist-hierarchical-button.oj-button-icons-only .oj-hier-icon.oj-button-icon.oj-start {
  margin-right: 0.5rem;
}
html[dir=rtl] .oj-navigationlist-hierarchical-button.oj-button-icons-only .oj-hier-icon.oj-button-icon.oj-start {
  margin-left: 0.5rem;
}

/* Multiple space elements will be added to dom to get tree style in hierarchical menu  popup*/
.oj-navigationlist-hvitem-space {
  margin-left: 1.142rem;
}

/* hicontrast overrides for sliding navlist */
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-hover.oj-navigationlist-item,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-focus.oj-navigationlist-item,
.oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-hover.oj-navigationlist-item,
.oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-focus.oj-navigationlist-item {
  border: 1px dotted;
}

html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-navigationlist-item,
.oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-navigationlist-item {
  border-width: 0;
}

/* override menu css*/
.oj-menu-item-icon.oj-navigationlist-level-indicator {
  align-self: baseline;
  padding-bottom: 10px;
  padding-left: 9px;
  margin-bottom: 2px;
  margin-top: 3px;
  width: auto;
  height: auto;
}

.oj-navigationlist-hierarchical-menu.oj-menu, .oj-navigationlist-hierarchical-menu .oj-menu {
  padding: 6px 12px;
  font-size: 12px;
}

.oj-navigationlist-hierarchical-menu .oj-menu-item a {
  line-height: 12px;
  height: 20px;
}

.oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus > a,
.oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus-ancestor > a {
  background: none;
}

.oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus a > .oj-navigationlist-hierarchical-menu-label {
  background-color: rgb(224.64, 239.16, 248.28);
  border: 1px solid #000000;
  padding: 1px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.oj-navigationlist-hierarchical-menu .oj-menu-item a > .oj-navigationlist-hierarchical-menu-label {
  padding: 2px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.oj-navigationlist-hierarchical-menu .oj-menu-item a {
  color: #000000;
}

html:not([dir=rtl]) .oj-navigationlist-hierarchical-menu .oj-menu-item a,
html:not([dir=ltr]) .oj-navigationlist-hierarchical-menu .oj-menu-item a {
  padding: 0;
}

.oj-navigationlist-hierarchical-button .oj-button-menu-dropdown-icon {
  display: none !important;
}

html:not([dir=ltr]) .oj-navigationlist-hierarchical-menu .oj-menu-item-icon,
html:not([dir=rtl]) .oj-navigationlist-hierarchical-menu .oj-menu-item-icon {
  margin-left: 4px;
  margin-right: 2px;
}

.oj-navigationlist-hierarchical-menu .oj-menu-item-icon {
  position: static;
  transform: none;
}

/* end - override menu css*/
.oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: hsl(203, 2%, 100%);
}
.oj-contrast-marker .oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: hsl(203, 2%, 98%);
}

.oj-contrast-marker .oj-navigationlist-horizontal.oj-navigationlist-app-level.oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: hsl(203, 2%, 98%);
}

.oj-contrast-marker .oj-navigationlist-horizontal.oj-navigationlist-page-level.oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-contrast-marker .oj-navigationlist-vertical.oj-navigationlist-page-level.oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected:not(.oj-hover) .oj-navigationlist-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-navigationlist-has-icons .oj-navigationlist-overflow-item-icon {
  display: block;
}

.oj-navigationlist-overflow-item-icon {
  display: none;
  font-size: 24px;
}

.oj-menu-item-icon.oj-navigationlist-level-indicator {
  border-bottom: 1px solid hsl(203, 2%, 80%);
}
html:not([dir=rtl]) .oj-menu-item-icon.oj-navigationlist-level-indicator {
  border-left: 1px solid hsl(203, 2%, 80%);
}
html[dir=rtl] .oj-menu-item-icon.oj-navigationlist-level-indicator {
  border-right: 1px solid hsl(203, 2%, 80%);
}

.oj-navigationlist-no-data-message {
  padding: 0.85714rem;
  background-color: hsl(203, 2%, 100%);
  min-height: 1rem;
}

/* Styling on the status text, such as fetching data */
.oj-navigationlist-status-message {
  position: absolute;
  padding: 0.85714rem;
  display: none;
}

.oj-navigationlist-horizontal .oj-navigationlist-status-message {
  padding: 0;
}

/* Styling for the activity indicator*/
.oj-navigationlist-loading-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: auto;
}
.oj-navigationlist-loading-icon:before {
  content: url("images/spinner_full.gif");
}
.oj-navigationlist-loading-icon:before {
  transform: translate(-37.5%, -37.5%) scale(0.25);
}

.oj-navigationlist-horizontal .oj-navigationlist-loading-icon {
  width: 24px;
  height: 24px;
}
.oj-navigationlist-horizontal .oj-navigationlist-loading-icon:before {
  content: url("images/spinner_full.gif");
}
.oj-navigationlist-horizontal .oj-navigationlist-loading-icon:before {
  transform: translate(-42.5%, -42.5%) scale(0.15);
}

/* Styling for the collapse icon */
oj-tab-bar:not(.oj-complete) {
  visibility: hidden;
}

oj-tab-bar {
  display: block;
}

/*Navtabs root node*/
.oj-tabbar,
.oj-tabbar-listview-container {
  overflow-x: hidden;
}

.oj-tabbar-listview {
  position: relative;
}

.oj-tabbar-touch {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* navigation tabs divider used in category header natabs*/
.oj-tabbar-category-divider {
  border-color: hsl(203, 2%, 88%);
  border-style: solid;
  border-width: 1px 0 0;
  font-size: 0;
  height: 0;
  line-height: 0;
  margin: 0 3px;
}

/* navigation tabs divider used in horizontal natabs to separate buttons*/
.oj-tabbar-horizontal .oj-tabbar-divider {
  border-color: hsl(203, 2%, 90%);
  border-style: solid;
  border-width: 0 1px 0 0;
  font-size: 0;
  height: 1.714rem;
  line-height: 0;
  margin: 5px 0;
  align-self: center;
  display: none;
}

.oj-tabbar-item-dividers .oj-tabbar-divider {
  display: list-item;
}

/* Basic styling  for all ul elements in list*/
.oj-tabbar-element {
  list-style-type: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

.oj-tabbar-item-element:not(.oj-tabbar-item) {
  display: block;
}

.oj-tabbar-item-element {
  list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

/* Remove focus ring on outer ul element*/
.oj-tabbar-element:focus {
  outline: none;
}

/* Style content wrapper of each tab item */
.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item-label {
  vertical-align: middle;
}

.oj-tabbar-vertical .oj-tabbar-item::before {
  min-height: 3.14286rem;
  content: "";
  display: inline-block;
  visibility: hidden;
}

.oj-tabbar-vertical .oj-tabbar-item-label {
  font-size: 1rem;
}

/* Style content of each tab item */
.oj-tabbar-item-content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}

a.oj-tabbar-item-content {
  text-decoration: none;
  font-weight: normal;
  outline: none;
  overflow: hidden;
}

a.oj-tabbar-item-content:active {
  background-color: transparent;
}

a.oj-tabbar-item-content .oj-tabbar-item-label {
  color: #000000;
}
.oj-contrast-marker a.oj-tabbar-item-content .oj-tabbar-item-label {
  color: hsl(203, 2%, 78%);
}

.oj-selected > a.oj-tabbar-item-content > .oj-tabbar-item-label {
  color: #000000;
}
.oj-contrast-marker .oj-selected > a.oj-tabbar-item-content > .oj-tabbar-item-label {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-hover:not(.oj-selected) > a.oj-tabbar-item-content > .oj-tabbar-item-label {
  color: #000000;
}
.oj-contrast-marker .oj-hover:not(.oj-selected) > a.oj-tabbar-item-content > .oj-tabbar-item-label {
  color: rgb(118.38, 183.72, 224.76);
}

/* Navigation tabs item label or arbitrary content place holder*/
.oj-tabbar-item-label {
  order: 2;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 3rem;
  overflow-x: hidden;
  display: inline-block;
  line-height: normal;
}

.oj-tabbar-item-text-wrap .oj-tabbar-item-label {
  white-space: normal;
}

/*Padding for vertical natabs item label*/
.oj-tabbar-vertical .oj-tabbar-item-label {
  padding: 3px 0;
  flex: 1 1 auto;
}

.oj-tabbar-vertical-end.oj-tabbar-vertical .oj-tabbar-item-label {
  order: -1;
}
html:not([dir=rtl]) .oj-tabbar-vertical-end.oj-tabbar-vertical .oj-tabbar-item-label {
  text-align: right;
}
html[dir=rtl] .oj-tabbar-vertical-end.oj-tabbar-vertical .oj-tabbar-item-label {
  text-align: left;
}

/* hide label for icons-only case */
.oj-tabbar-icon-only .oj-tabbar-item-label {
  display: none;
}

/* Tab item's Icon */
.oj-tabbar-item-icon {
  color: hsla(0, 0%, 0%, 0.8);
}
.oj-contrast-marker .oj-tabbar-item-icon {
  color: hsl(203, 2%, 78%);
}
.oj-tabbar-item-icon {
  flex: 0 0 auto;
}

/* Disabled node */
.oj-tabbar-item.oj-disabled > .oj-tabbar-item-content {
  opacity: 1;
}

.oj-tabbar-item.oj-disabled .oj-tabbar-item-label {
  color: hsla(0, 0%, 0%, 0.38);
}
.oj-contrast-marker .oj-tabbar-item.oj-disabled .oj-tabbar-item-label {
  color: hsl(203, 2%, 45%);
}

.oj-tabbar-item.oj-disabled a.oj-tabbar-item-content {
  cursor: default;
}

.oj-tabbar-item.oj-disabled .oj-tabbar-item-icon {
  color: hsla(0, 0%, 0%, 0.38);
}
.oj-contrast-marker .oj-tabbar-item.oj-disabled .oj-tabbar-item-icon {
  color: hsl(203, 2%, 45%);
}

/* Selected node */
.oj-tabbar-item.oj-selected .oj-tabbar-item-icon {
  color: #027bc7;
}
.oj-contrast-marker .oj-tabbar-item.oj-selected .oj-tabbar-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

/* hover icon */
.oj-tabbar-item.oj-hover.oj-selected .oj-tabbar-item-icon,
.oj-tabbar-item.oj-hover .oj-tabbar-item-icon {
  color: #966486;
}
.oj-contrast-marker .oj-tabbar-item.oj-hover.oj-selected .oj-tabbar-item-icon,
.oj-contrast-marker .oj-tabbar-item.oj-hover .oj-tabbar-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-contrast-marker .oj-tabbar-vertical .oj-tabbar-item.oj-hover.oj-selected .oj-tabbar-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

/*borders for high contrast mode*/
.oj-hicontrast .oj-tabbar-item.oj-selected,
.oj-hicontrast .oj-tabbar-item.oj-selected.oj-hover,
.oj-hicontrast .oj-tabbar-item.oj-selected.oj-focus {
  border: 1px solid;
}

.oj-hicontrast .oj-tabbar-item.oj-hover,
.oj-hicontrast .oj-tabbar-item.oj-focus {
  border: 1px dotted;
}

/*Focus ring around  focused tab item*/
.oj-tabbar .oj-tabbar-item.oj-focus-highlight {
  outline: dotted 1px hsl(203, 2%, 30%);
  outline-offset: -1px;
}

.oj-hicontrast .oj-tabbar-item.oj-focus {
  outline: none;
}

.oj-tabbar-item {
  border-color: transparent;
  display: flex;
  align-items: stretch;
}

.oj-tabbar-vertical .oj-tabbar-item.oj-selected {
  background-color: transparent;
}
.oj-contrast-marker .oj-tabbar-vertical .oj-tabbar-item.oj-selected {
  background-color: transparent;
}

.oj-tabbar-item.oj-selected {
  border-color: #027bc7;
}

.oj-tabbar-item.oj-hover:not(.oj-selected) {
  background-color: hsl(203, 2%, 93%);
  border-color: #966486;
}
.oj-contrast-marker .oj-tabbar-item.oj-hover:not(.oj-selected) {
  background-color: hsl(203, 2%, 15%);
}

:not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-hover:not(.oj-selected),
.oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item.oj-hover:not(.oj-selected) {
  border-color: #966486;
}

.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {
  align-self: center;
}
html:not([dir=rtl]) .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {
  margin-right: 0.71429rem;
}
html[dir=rtl] .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {
  margin-left: 0.71429rem;
}

html:not([dir=rtl]) .oj-tabbar-vertical-end.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {
  margin: 0 0 0 0.71429rem;
}
html[dir=rtl] .oj-tabbar-vertical-end.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {
  margin: 0 0.71429rem 0 0;
}

html:not([dir=rtl]) .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-has-icons > .oj-tabbar-item > .oj-tabbar-item-no-icon .oj-tabbar-item-label {
  margin-left: calc(0.71429rem + 24px);
}
html[dir=rtl] .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-has-icons > .oj-tabbar-item > .oj-tabbar-item-no-icon .oj-tabbar-item-label {
  margin-right: calc(0.71429rem + 24px);
}

html:not([dir=rtl]) .oj-tabbar-vertical-end.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-has-icons > .oj-tabbar-item > .oj-tabbar-item-no-icon .oj-tabbar-item-label {
  margin: 0 calc(0.71429rem + 24px) 0 0;
}
html[dir=rtl] .oj-tabbar-vertical-end.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-has-icons > .oj-tabbar-item > .oj-tabbar-item-no-icon .oj-tabbar-item-label {
  margin: 0 0 0 calc(0.71429rem + 24px);
}

html[dir=rtl] .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  padding-right: calc(1.07143rem - 3px);
  border-width: 0 3px 0 0;
}
html:not([dir=rtl]) .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  padding-left: calc(1.07143rem - 3px);
  border-width: 0 0 0 3px;
}
.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  border-style: solid;
}

.oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item {
  border-style: none;
}

html[dir=rtl] .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-focus,
html[dir=rtl] .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-hover {
  border-width: 1px;
}
html:not([dir=rtl]) .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-focus,
html:not([dir=rtl]) .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-hover {
  border-width: 1px;
}
.oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-focus,
.oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-hover {
  border-style: dotted;
}

html[dir=rtl] .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected,
html[dir=rtl] .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-focus,
html[dir=rtl] .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-hover {
  border-width: 1px;
}
html:not([dir=rtl]) .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected,
html:not([dir=rtl]) .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-focus,
html:not([dir=rtl]) .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-hover {
  border-width: 1px;
}
.oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected,
.oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-focus,
.oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-hover {
  border-style: solid;
}

html:not([dir=rtl]) .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item .oj-tabbar-item-content {
  padding-right: 1.07143rem;
}
html[dir=rtl] .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item .oj-tabbar-item-content {
  padding-left: 1.07143rem;
}

html:not([dir=rtl]) .oj-tabbar-vertical-end.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item .oj-tabbar-item-content {
  padding: 0 0 0 1.07143rem;
}
html[dir=rtl] .oj-tabbar-vertical-end.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item .oj-tabbar-item-content {
  padding: 0 1.07143rem 0 0;
}

.oj-tabbar-focused-element:not(.oj-focus-highlight) {
  outline: none;
}

html[dir=rtl] :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item {
  padding-right: calc(1.07143rem - 3px);
  border-width: 0 3px 0 0;
}
html:not([dir=rtl]) :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item {
  padding-left: calc(1.07143rem - 3px);
  border-width: 0 0 0 3px;
}
:not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item {
  border-color: transparent;
  border-style: solid;
  border-radius: 0;
}

html[dir=rtl] .oj-tabbar-vertical.oj-tabbar-vertical-end:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  padding: 0 0 0 calc(1.07143rem - 3px);
  border-width: 0 0 0 3px;
}
html:not([dir=rtl]) .oj-tabbar-vertical.oj-tabbar-vertical-end:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  padding: 0 calc(1.07143rem - 3px) 0 0;
  border-width: 0 3px 0 0;
}

:not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item:first-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
html[dir=rtl] :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item:first-of-type {
  border-top-width: 0;
}
html:not([dir=rtl]) :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item:first-of-type {
  border-top-width: 0;
}

:not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item:last-of-type {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/*Start of icons only natabs*/
.oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-selected,
.oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-hover,
.oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
.oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-active:not(.oj-selected) {
  background-color: transparent;
}
.oj-contrast-marker .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-selected,
.oj-contrast-marker .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-hover,
.oj-contrast-marker .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
.oj-contrast-marker .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-active:not(.oj-selected) {
  background-color: transparent;
}

.oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-selected .oj-tabbar-item-icon {
  background-color: #027bc7;
}
.oj-contrast-marker .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-selected .oj-tabbar-item-icon {
  background-color: #027bc7;
}

.oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-hover:not(.oj-selected) .oj-tabbar-item-icon {
  background-color: hsl(203, 2%, 93%);
}
.oj-contrast-marker .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-hover:not(.oj-selected) .oj-tabbar-item-icon {
  background-color: hsl(203, 2%, 15%);
}

.oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item-icon {
  border-radius: 50%;
  padding: 12px;
}

.oj-tabbar-icon-only .oj-tabbar-item-content {
  justify-content: center;
}

/*End of icons only natabs*/
.oj-tabbar-vertical.oj-tabbar-icon-only {
  display: inline-flex;
}

.oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item {
  margin: 4px 0 0;
}

.oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item:first-child {
  margin-top: 0;
}

.oj-tabbar-vertical .oj-tabbar-item.oj-selected {
  border-color: #027bc7;
}

.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected {
  background-color: transparent;
}
.oj-contrast-marker .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected {
  background-color: transparent;
}

.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item:not(.oj-disabled) a.oj-tabbar-item-content .oj-tabbar-item-label {
  color: #000000;
}
.oj-contrast-marker .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item:not(.oj-disabled) a.oj-tabbar-item-content .oj-tabbar-item-label {
  color: hsl(203, 2%, 78%);
}

.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item:not(.oj-disabled) .oj-tabbar-item-icon {
  color: hsla(0, 0%, 0%, 0.8);
}
.oj-contrast-marker .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item:not(.oj-disabled) .oj-tabbar-item-icon {
  color: hsl(203, 2%, 78%);
}

.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected a.oj-tabbar-item-content .oj-tabbar-item-label {
  color: #000000;
  font-weight: normal;
}
.oj-contrast-marker .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected a.oj-tabbar-item-content .oj-tabbar-item-label {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected:not(.oj-hover) .oj-tabbar-item-icon {
  color: #027bc7;
}
.oj-contrast-marker .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected:not(.oj-hover) .oj-tabbar-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover:not(.oj-selected) a.oj-tabbar-item-content .oj-tabbar-item-label {
  color: #000000;
}
.oj-contrast-marker .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover:not(.oj-selected) a.oj-tabbar-item-content .oj-tabbar-item-label {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover .oj-tabbar-item-icon {
  color: #966486;
}
.oj-contrast-marker .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover .oj-tabbar-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-contrast-marker .oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover.oj-selected .oj-tabbar-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-tabbar-vertical .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
.oj-tabbar-vertical .oj-tabbar-item.oj-active:not(.oj-selected) {
  background-color: hsl(203, 2%, 93%);
}
.oj-contrast-marker .oj-tabbar-vertical .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
.oj-contrast-marker .oj-tabbar-vertical .oj-tabbar-item.oj-active:not(.oj-selected) {
  background-color: hsl(203, 2%, 15%);
}
html[dir=rtl] .oj-tabbar-vertical .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
html[dir=rtl] .oj-tabbar-vertical .oj-tabbar-item.oj-active:not(.oj-selected) {
  border-right-color: #966486;
}
html:not([dir=rtl]) .oj-tabbar-vertical .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
html:not([dir=rtl]) .oj-tabbar-vertical .oj-tabbar-item.oj-active:not(.oj-selected) {
  border-left-color: #966486;
}

/*Start of common horizontal navigationtabs styles */
.oj-tabbar-horizontal .oj-tabbar-element {
  display: flex;
}

.oj-tabbar-horizontal.oj-tabbar-item-text-wrap .oj-tabbar-item {
  flex: 1 1 auto;
}

.oj-tabbar-horizontal.oj-condense .oj-tabbar-item {
  flex: 0 0 auto;
}

/* This is due to bug in IE 11 where setting flex-shrink:0 is needed to avoid truncation in item text which is needed for overflow feature. This work around breaks text-wrap functionality so enabling this only when no text wrap. We can remove this once IE 11 support dropped and can update docs saying text-wrap is supported with overflow. */
.oj-tabbar-horizontal .oj-tabbar-item {
  flex: 1 0 auto;
}

@media print, screen {
  .oj-tabbar-horizontal.oj-sm-condense .oj-tabbar-item {
    flex: 0 0 auto;
  }
  .oj-tabbar-horizontal.oj-sm-justify-content-center .oj-tabbar-element {
    justify-content: center;
  }
  .oj-tabbar-horizontal.oj-sm-justify-content-flex-end .oj-tabbar-element {
    justify-content: flex-end;
  }
}
@media print, screen and (min-width: 768px) {
  .oj-tabbar-horizontal.oj-md-condense .oj-tabbar-item {
    flex: 0 0 auto;
  }
  .oj-tabbar-horizontal.oj-md-justify-content-center .oj-tabbar-element {
    justify-content: center;
  }
  .oj-tabbar-horizontal.oj-md-justify-content-flex-end .oj-tabbar-element {
    justify-content: flex-end;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-tabbar-horizontal.oj-lg-condense .oj-tabbar-item {
    flex: 0 0 auto;
  }
  .oj-tabbar-horizontal.oj-lg-justify-content-center .oj-tabbar-element {
    justify-content: center;
  }
  .oj-tabbar-horizontal.oj-lg-justify-content-flex-end .oj-tabbar-element {
    justify-content: flex-end;
  }
}
@media screen and (min-width: 1281px) {
  .oj-tabbar-horizontal.oj-xl-condense .oj-tabbar-item {
    flex: 0 0 auto;
  }
  .oj-tabbar-horizontal.oj-xl-justify-content-center .oj-tabbar-element {
    justify-content: center;
  }
  .oj-tabbar-horizontal.oj-xl-justify-content-flex-end .oj-tabbar-element {
    justify-content: flex-end;
  }
}
.oj-tabbar-horizontal .oj-tabbar-item-element {
  box-sizing: border-box;
  min-height: 2.71429rem;
}

.oj-tabbar-horizontal .oj-selected > a.oj-tabbar-item-content > .oj-tabbar-item-label {
  color: #000000;
}

.oj-tabbar-horizontal .oj-tabbar-item.oj-selected {
  background-color: transparent;
}
.oj-contrast-marker .oj-tabbar-horizontal .oj-tabbar-item.oj-selected {
  background-color: transparent;
}

.oj-tabbar-horizontal .oj-tabbar-item-label {
  align-self: center;
}

.oj-tabbar-horizontal .oj-tabbar-item-icon {
  margin: 0;
}

/*End of common horizontal navigationtabs styles */
/*Start of  horizontal navigationtabs styles icons only*/
html:not([dir=rtl]) .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {
  margin-left: 4px;
}
html[dir=rtl] .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {
  margin-right: 4px;
}

html:not([dir=rtl]) .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-child {
  margin-left: 0;
}
html[dir=rtl] .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-child {
  margin-right: 0;
}

.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected,
.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-hover,
.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-active:not(.oj-selected) {
  background-color: transparent;
}
.oj-contrast-marker .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected,
.oj-contrast-marker .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-hover,
.oj-contrast-marker .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
.oj-contrast-marker .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-active:not(.oj-selected) {
  background-color: transparent;
}

.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected .oj-tabbar-item-icon {
  background-color: #027bc7;
}

.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-hover:not(.oj-selected) .oj-tabbar-item-icon {
  background-color: hsl(203, 2%, 93%);
}
.oj-contrast-marker .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-hover:not(.oj-selected) .oj-tabbar-item-icon {
  background-color: hsl(203, 2%, 15%);
}

.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item-icon {
  border-radius: 50%;
  padding: 12px;
}

/*End of  horizontal navigationtabs styles icons only*/
/*Start of  horizontal navigationtabs styles excluding icons only*/
.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  border-width: 0 0 3px 0;
  border-style: solid;
}

.oj-tabbar-horizontal-bottom.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  border-width: 3px 0 0 0;
}

.oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  border-style: none;
}

.oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-focus,
.oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover {
  border-width: 1px;
  border-style: dotted;
}

html:not([dir=rtl]) .oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected,
html:not([dir=rtl]) .oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected.oj-focus,
html:not([dir=rtl]) .oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected.oj-hover,
.oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected,
.oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected.oj-focus,
.oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected.oj-hover {
  border-width: 1px;
  border-style: solid;
}

.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item-content {
  justify-content: center;
  padding: 0.5rem 1.07143rem 4px;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-item-content {
  flex-direction: column;
  padding: 0.5rem 1.07143rem 4px;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-item-element.oj-removable .oj-tabbar-item-content {
  flex-direction: row;
  padding: 0;
}

.oj-tabbar-horizontal:not(.oj-tabbar-stack-icon-label):not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {
  align-self: center;
}
html:not([dir=rtl]) .oj-tabbar-horizontal:not(.oj-tabbar-stack-icon-label):not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {
  margin-right: 0.71429rem;
}
html[dir=rtl] .oj-tabbar-horizontal:not(.oj-tabbar-stack-icon-label):not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {
  margin-left: 0.71429rem;
}

/*End of  horizontal navigationtabs styles excluding icons only*/
/*Start of  horizontal stacked icon label navigationtabs styles */
.oj-tabbar-horizontal.oj-tabbar-stack-icon-label .oj-tabbar-item-element {
  min-height: 3.375rem;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-divider {
  height: 2.714rem;
}

.oj-tabbar-horizontal .oj-tabbar-icon-label-container {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  padding-bottom: 2px;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-icon-label-container {
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1.07143rem 4px;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-remove-icon {
  align-self: start;
}

/*End of  horizontal stacked icon label navigationtabs styles */
.oj-tabbar-horizontal .oj-tabbar-item-label {
  font-size: 1rem;
  text-align: center;
}

.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  border-radius: 0;
}
html:not([dir=rtl]) .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  border-right-width: 0;
  border-left-width: 0;
}
html[dir=rtl] .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  border-left-width: 0;
  border-right-width: 0;
}
.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  border-color: transparent;
}

html:not([dir=rtl]) .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected {
  border-left-width: 0;
}
html[dir=rtl] .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected {
  border-right-width: 0;
}

html:not([dir=rtl]) .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item:first-of-type {
  border-left-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
html[dir=rtl] .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item:first-of-type {
  border-right-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {
  border-radius: 0;
  border-color: transparent;
}

html:not([dir=rtl]) .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {
  border-right-width: 0;
  border-left-width: 0;
}
html[dir=rtl] .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {
  border-left-width: 0;
  border-right-width: 0;
}

html:not([dir=rtl]) .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item,
html[dir=rtl] .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {
  border-left-width: 1px;
  border-right-width: 1px;
}

html:not([dir=rtl]) .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected {
  border-left-width: 1px;
}
html[dir=rtl] .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected {
  border-right-width: 1px;
}
html:not([dir=rtl]) .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected {
  border-left-width: 0;
}
html[dir=rtl] .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected {
  border-right-width: 0;
}

html:not([dir=rtl]) .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-of-type {
  border-left-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
html[dir=rtl] .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-of-type {
  border-right-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

html:not([dir=rtl]) .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-of-type {
  border-left-width: 1px;
}

html[dir=rtl] .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-of-type {
  border-right-width: 1px;
}

html:not([dir=rtl]) .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-tabbar-item-last-child,
html:not([dir=rtl]) .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-tabbar-item-last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
html[dir=rtl] .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-tabbar-item-last-child,
html[dir=rtl] .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-tabbar-item-last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected,
.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected {
  border-color: #027bc7;
}

.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-hover:not(.oj-selected),
.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover:not(.oj-selected) {
  border-color: #966486;
}

.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected {
  background-color: transparent;
}
.oj-contrast-marker .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected {
  background-color: transparent;
}

.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item:not(.oj-disabled) a.oj-tabbar-item-content .oj-tabbar-item-label {
  color: #000000;
}
.oj-contrast-marker .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item:not(.oj-disabled) a.oj-tabbar-item-content .oj-tabbar-item-label {
  color: hsl(203, 2%, 78%);
}

.oj-tabbar-horizontal .oj-tabbar-item:not(.oj-disabled):not(.oj-hover):not(.oj-selected) .oj-tabbar-item-icon {
  color: hsla(0, 0%, 0%, 0.8);
}
.oj-contrast-marker .oj-tabbar-horizontal .oj-tabbar-item:not(.oj-disabled):not(.oj-hover):not(.oj-selected) .oj-tabbar-item-icon {
  color: hsl(203, 2%, 78%);
}

.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected a.oj-tabbar-item-content .oj-tabbar-item-label {
  color: #000000;
  font-weight: normal;
}
.oj-contrast-marker .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected a.oj-tabbar-item-content .oj-tabbar-item-label {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected:not(.oj-hover) .oj-tabbar-item-icon {
  color: #027bc7;
}
.oj-contrast-marker .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected:not(.oj-hover) .oj-tabbar-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-tabbar-horizontal .oj-tabbar-item.oj-hover:not(.oj-selected) a.oj-tabbar-item-content > .oj-tabbar-item-label {
  color: #966486;
}

.oj-tabbar-horizontal .oj-tabbar-item.oj-hover .oj-tabbar-item-icon {
  color: #966486;
}

.oj-tabbar-horizontal .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
.oj-tabbar-horizontal .oj-tabbar-item.oj-active:not(.oj-selected) {
  background-color: hsl(203, 2%, 93%);
}
.oj-contrast-marker .oj-tabbar-horizontal .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
.oj-contrast-marker .oj-tabbar-horizontal .oj-tabbar-item.oj-active:not(.oj-selected) {
  background-color: hsl(203, 2%, 15%);
}

.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-active:not(.oj-selected) {
  border-color: #966486;
}

.oj-tabbar-icon-only .oj-tabbar-item.oj-selected:not(.oj-hover) .oj-tabbar-item-icon {
  color: hsl(203, 2%, 100%);
}
.oj-contrast-marker .oj-tabbar-icon-only .oj-tabbar-item.oj-selected:not(.oj-hover) .oj-tabbar-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-contrast-marker .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected:not(.oj-hover) .oj-tabbar-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-contrast-marker .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item.oj-selected:not(.oj-hover) .oj-tabbar-item-icon {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-tabbar-vertical .oj-tabbar-item.oj-selected .oj-tabbar-remove-icon:not(:hover) {
  color: #027bc7;
}

.oj-tabbar-horizontal .oj-tabbar-item.oj-selected .oj-tabbar-remove-icon:not(:hover) {
  color: #027bc7;
}

.oj-tabbar-vertical .oj-tabbar-item,
.oj-tabbar-vertical .oj-tabbar-item.oj-hover:not(.oj-selected),
.oj-tabbar-vertical .oj-tabbar-item.oj-selected,
:not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item,
:not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-hover:not(.oj-selected) {
  border-bottom-color: transparent;
}

.oj-tabbar-has-icons .oj-tabbar-overflow-item-icon {
  display: block;
}

.oj-tabbar-overflow-item-icon {
  display: none;
  font-size: 24px;
}

/* Styling for the drag image */
.oj-tabbar-drag-image {
  background-color: transparent;
  position: fixed;
  top: 10000px;
  border: 1px solid transparent;
  overflow-x: initial;
  padding: 3px;
}

/* Styling for hiding the original item being dragged */
.oj-tabbar-drag-item {
  display: none;
}

/* Styling item that is draggable (no affordance) */
.oj-tabbar-item.oj-draggable {
  cursor: move;
}

/* Styling for the item that is being moved using drag */
.oj-tabbar-item.oj-drag {
  box-shadow: 1px 1px 10px 0 hsla(0, 0%, 0%,0.45);
  border-top: 1px solid;
  border-bottom: 1px solid;
}

/* Styling all drop targets in the list */
.oj-tabbar .oj-tabbar-item.oj-drop,
.oj-tabbar .oj-tabbar-item.oj-drop.oj-active,
.oj-tabbar .oj-tabbar-item.oj-drop.oj-default,
.oj-tabbar .oj-tabbar-item.oj-drop.oj-disabled,
.oj-tabbar .oj-tabbar-item.oj-drop.oj-selected,
.oj-tabbar .oj-tabbar-item.oj-drop.oj-hover,
.oj-tabbar .oj-tabbar-item.oj-drop.oj-hover:not(.oj-selected) {
  box-sizing: border-box;
  border: 1px solid #c2eaf3;
  background-color: #d9f4fa;
}

/* Used when there are no items in tabbar */
.oj-tabbar-no-data-message {
  padding: 0.85714rem;
  color: hsla(0, 0%, 0%, 0.8);
  min-height: 1rem;
}

/* Styling on the status text, such as fetching data */
.oj-tabbar-status-message {
  position: absolute;
  padding: 0.85714rem;
  display: none;
}

.oj-tabbar-horizontal .oj-tabbar-status-message {
  padding: 0;
}

/* Styling for the activity indicator*/
.oj-tabbar-loading-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: auto;
}
.oj-tabbar-loading-icon:before {
  content: url("images/spinner_full.gif");
}
.oj-tabbar-loading-icon:before {
  transform: translate(-37.5%, -37.5%) scale(0.25);
}

.oj-tabbar-horizontal .oj-tabbar-loading-icon {
  width: 24px;
  height: 24px;
}
.oj-tabbar-horizontal .oj-tabbar-loading-icon:before {
  content: url("images/spinner_full.gif");
}
.oj-tabbar-horizontal .oj-tabbar-loading-icon:before {
  transform: translate(-42.5%, -42.5%) scale(0.15);
}

/* Styling for an item that is cut during a context menu cut operation */
.oj-tabbar-cut {
  opacity: 0.8;
}

.oj-tabbar-remove-icon {
  align-self: center;
}
html:not([dir=rtl]) .oj-tabbar-remove-icon {
  padding-right: 5px;
}
html[dir=rtl] .oj-tabbar-remove-icon {
  padding-left: 5px;
}
.oj-tabbar-remove-icon {
  padding-top: 3px;
}

.oj-tabbar-hide-remove-icon .oj-tabbar-remove-icon {
  display: none;
}

/*
 * applied to the outer most element of the offcanvas
 */
.oj-offcanvas-outer-wrapper {
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/*
 * applied to the inner wrapper of the offcanvas in push mode
 */
.oj-offcanvas-inner-wrapper,
.oj-offcanvas-inner-push-wrapper {
  position: relative;
  height: 100%;
}

/*
 * only applied to the page level offcanvas
 */
.oj-offcanvas-page > .oj-offcanvas-open {
  position: fixed;
}

/*
 * only applied to the outer wrapper of page level offcanvas
 */
.oj-offcanvas-outer-wrapper.oj-offcanvas-page {
  overflow-y: visible;
}

/*
 * Transition selector is only applied while the offcanvas is activating.
 * In push mode, it's applied to the inner wrapper of the offcanvas.
 * In overlay mode, it's applied to the offcanvas element.
 */
.oj-offcanvas-transition {
  transition: transform 0.4s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition-timing-function: ease-in-out;
}

/*
 * applied to the outer wrapper when displayMode = pin
 */
.oj-offcanvas-outer-wrapper.oj-offcanvas-pin {
  display: flex;
  flex-wrap: nowrap;
}

.oj-offcanvas-pin .oj-offcanvas-start {
  position: relative;
}

/*
 * Pin transition selector is only applied to the offcanvas in the pin mode.
 */
.oj-offcanvas-pin-transition {
  min-width: 0;
  transition: min-width 0.4s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition-timing-function: ease-in-out;
}

.oj-offcanvas-bottom, .oj-offcanvas-top, .oj-offcanvas-end, .oj-offcanvas-start {
  position: absolute;
  box-sizing: border-box;
  border-radius: 0;
  display: none;
}

.oj-offcanvas-end, .oj-offcanvas-start {
  height: 100%;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.oj-offcanvas-bottom, .oj-offcanvas-top {
  width: 100%;
  left: 0;
  right: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/*
 * applied to the offcanvas on the start edge
 */
.oj-offcanvas-start {
  top: 0;
}
html:not([dir=rtl]) .oj-offcanvas-start {
  transform: translate3d(-100%, 0, 0);
  left: 0;
  border-width: 0 1px 0 0;
}
html[dir=rtl] .oj-offcanvas-start {
  transform: translate3d(100%, 0, 0);
  right: 0;
  border-width: 0 0 0 1px;
}

/*
 * applied to the offcanvas on the end edge
 */
html:not([dir=rtl]) .oj-offcanvas-end {
  right: 0;
  transform: translate3d(100%, 0, 0);
  border-width: 0 0 0 1px;
}
html[dir=rtl] .oj-offcanvas-end {
  left: 0;
  transform: translate3d(-100%, 0, 0);
  border-width: 0 1px 0 0;
}

/*
 * applied to the offcanvas on the top edge
 */
.oj-offcanvas-top {
  border-width: 0 0 1px;
  top: 0;
  transform: translate3d(0, -100%, 0);
}

/*
 * applied to the offcanvas on the bottom edge
 */
.oj-offcanvas-bottom {
  border-width: 1px 0 0 0;
  bottom: 0;
  transform: translate3d(0, 100%, 0);
}

/*
 * applied to the offcanvas when it is open
 */
.oj-offcanvas-start.oj-offcanvas-open,
.oj-offcanvas-end.oj-offcanvas-open,
.oj-offcanvas-top.oj-offcanvas-open,
.oj-offcanvas-bottom.oj-offcanvas-open {
  display: block;
  z-index: 200;
}

/* 
 * Suppress focus ring
 */
.oj-offcanvas-start:not(.oj-focus-highlight):focus,
.oj-offcanvas-end:not(.oj-focus-highlight):focus,
.oj-offcanvas-top:not(.oj-focus-highlight):focus,
.oj-offcanvas-bottom:not(.oj-focus-highlight):focus {
  outline: none;
}

/*
 * Overlay: start and end offcanvases shift
 */
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-start > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-end > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-start > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-end > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay {
  transform: translate3d(0%, 0, 0);
}

/*
 * Overlay: top and bottom offcanvases shift
 */
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-down > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-up > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-down > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-up > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay {
  transform: translate3d(0, 0%, 0);
}

/*
 * Applied to the glass pane of modal offcanvas
 */
.oj-offcanvas-glasspane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: hsl(0, 0%, 0%);
  opacity: 0;
  transition: opacity 0.5s;
  transition-timing-function: ease-in-out;
  z-index: 200;
}

/*
 * glass pane opacity after animation
 */
.oj-offcanvas-glasspane-dim {
  opacity: 0.4;
}

/*
 * applied to the overlay offcanvas when it is open
 */
html:not([dir=rtl]) .oj-offcanvas-start.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
  box-shadow: 3px 0px 3px 0 hsla(0, 0%, 0%, 0.10);
}
html[dir=rtl] .oj-offcanvas-start.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
  box-shadow: -3px 0px 3px 0 hsla(0, 0%, 0%, 0.10);
}

html:not([dir=rtl]) .oj-offcanvas-end.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
  box-shadow: -3px 0px 3px 0 hsla(0, 0%, 0%, 0.10);
}
html[dir=rtl] .oj-offcanvas-end.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
  box-shadow: 3px 0px 3px 0 hsla(0, 0%, 0%, 0.10);
}

.oj-offcanvas-top.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
  box-shadow: 0px 3px 3px 0 hsla(0, 0%, 0%, 0.10);
}

.oj-offcanvas-bottom.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
  box-shadow: 0px -3px 3px 0 hsla(0, 0%, 0%, 0.10);
}

oj-message:not(.oj-complete) {
  visibility: hidden;
}

.oj-message-container {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
}

.oj-message-header {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  min-height: 36px;
}

.oj-message-leading-header {
  align-items: center;
  display: inline-flex;
}

.oj-message-trailing-header {
  align-items: center;
  display: inline-flex;
}

.oj-message-custom-icon {
  width: 20px;
  height: 20px;
}

.oj-message-category {
  color: hsla(0, 0%, 0%, 0.6);
  font-size: 0.85714rem;
  font-weight: 700;
  word-break: break-all;
}

.oj-message-category h1 {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 0px;
  padding: 0px;
}

.oj-message-body {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-items: flex-start;
}

.oj-message-summary {
  font-weight: 500;
  color: hsl(0, 0%, 0%);
  font-size: inherit;
  line-height: 1.3;
  word-wrap: break-word;
}

.oj-message-detail {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: inherit;
  line-height: 1.1;
  word-wrap: break-word;
  width: 100%;
}

.oj-message-timestamp {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 0.85714rem;
  text-align: right;
}
html[dir=rtl] .oj-message-timestamp {
  text-align: left;
}
.oj-message-timestamp {
  flex-grow: 9;
  word-wrap: break-word;
}

.oj-message-close {
  float: right;
}
html[dir=rtl] .oj-message-close {
  float: left;
}
.oj-message-close {
  display: block;
}

.oj-message-auto-timeout-close {
  display: block;
}

.oj-message-close .oj-button {
  margin-bottom: 0;
}

.oj-message-option-defaults {
  font-family: '{"autoTimeout":4000}';
}

.oj-message-custom-icon {
  width: 16px;
  height: 16px;
}

.oj-message-category,
.oj-message-header .oj-message-summary {
  padding: 0px 6px;
}

.oj-message-timestamp {
  padding: 0px 2px;
}

/* popup */
/* --------------------------------------------------------------- */
oj-popup {
  display: none;
}

/* defines the stacking context for the popup and its children */
.oj-popup-layer {
  z-index: 1000;
}

.oj-popup-layer.oj-focus-within {
  z-index: calc(1000 + 1);
}

.oj-popup-layer.oj-popup-tail-simple {
  z-index: 1030;
}

.oj-popup-layer.oj-popup-tail-simple.oj-focus-within {
  z-index: calc(1030 + 1);
}

.oj-popup {
  overflow: auto;
  border: 1px solid hsl(203, 2%, 80%);
  border-radius: 1px;
  background-color: hsl(203, 2%, 100%);
  box-shadow: 1px 1px 3px 0 hsla(0, 0%, 0%,0.35);
  will-change: top, left;
}

.oj-popup.oj-popup-tail-simple {
  box-shadow: 1px 1px 5px 0 hsla(0, 0%, 0%,0.4);
  border-width: 1px;
  border-color: hsl(203, 2%, 80%);
  background-color: hsl(203, 2%, 99%);
  will-change: top, left, bottom, right;
}

.oj-popup.oj-popup-no-chrome {
  border-width: 0;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
}

.oj-popup-content {
  padding: 0.85714rem;
}

.oj-popup-no-chrome > .oj-popup-content {
  padding: 0;
}

.oj-popup:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-popup.oj-focus-highlight {
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

.oj-popup-tail {
  position: absolute;
  pointer-events: none;
}

.oj-popup-tail.oj-popup-tail-simple {
  height: 14px;
  width: 14px;
  font-size: 0;
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom {
  left: calc(0px - 14px);
}

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom {
  right: calc(0px - 14px);
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top {
  top: 0;
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom {
  bottom: 0;
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle {
  top: 50%;
}

.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top,
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom {
  left: 50%;
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNHB4JyBoZWlnaHQ9JzE0cHgnPjxwb2x5Z29uIHBvaW50cz0nMTQsMTQgMCwwIDE0LDQnIHN0eWxlPSdmaWxsOmhzbCgyMDMsIDIlLCA5OSUpO3N0cm9rZTpoc2woMjAzLCAyJSwgOTklKTtzdHJva2Utd2lkdGg6MTtmaWxsLXJ1bGU6ZXZlbm9kZDsnLz48ZyBzdHlsZT0nc3Ryb2tlOmhzbCgyMDMsIDIlLCA4MCUpO3N0cm9rZS13aWR0aDoxOyc+PGxpbmUgeDE9JzE0JyB5MT0nMTQnIHgyPScwJyB5Mj0nMCcvPjxsaW5lIHgxPScxNCcgeTE9JzQnIHgyPScwJyB5Mj0nMCcvPjwvZz48L3N2Zz4=");
}
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNHB4JyBoZWlnaHQ9JzE0cHgnPjxwb2x5Z29uIHBvaW50cz0nMTQsMCAwLDcgMTQsMTQnIHN0eWxlPSdmaWxsOmhzbCgyMDMsIDIlLCA5OSUpO3N0cm9rZTpoc2woMjAzLCAyJSwgOTklKTtzdHJva2Utd2lkdGg6MTtmaWxsLXJ1bGU6ZXZlbm9kZDsnLz48ZyBzdHlsZT0nc3Ryb2tlOmhzbCgyMDMsIDIlLCA4MCUpO3N0cm9rZS13aWR0aDoxOyc+PGxpbmUgeDE9JzE0JyB5MT0nMCcgeDI9JzAnIHkyPSc3Jy8+PGxpbmUgeDE9JzE0JyB5MT0nMTQnIHgyPScwJyB5Mj0nNycvPjwvZz48L3N2Zz4=");
}
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNHB4JyBoZWlnaHQ9JzE0cHgnPjxwb2x5Z29uIHBvaW50cz0nMTQsMCAwLDE0IDE0LDExJyBzdHlsZT0nZmlsbDpoc2woMjAzLCAyJSwgOTklKTtzdHJva2U6aHNsKDIwMywgMiUsIDk5JSk7c3Ryb2tlLXdpZHRoOjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7Jy8+PGcgc3R5bGU9J3N0cm9rZTpoc2woMjAzLCAyJSwgODAlKTtzdHJva2Utd2lkdGg6MTsnPjxsaW5lIHgxPScxNCcgeTE9JzAnIHgyPScwJyB5Mj0nMTQnLz48bGluZSB4MT0nMTQnIHkxPScxMScgeDI9JzAnIHkyPScxNCcvPjwvZz48L3N2Zz4=");
}
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNHB4JyBoZWlnaHQ9JzE0cHgnPjxwb2x5Z29uIHBvaW50cz0nMCw0IDE0LDAgMCwxNCcgc3R5bGU9J2ZpbGw6aHNsKDIwMywgMiUsIDk5JSk7c3Ryb2tlOmhzbCgyMDMsIDIlLCA5OSUpO3N0cm9rZS13aWR0aDoxO2ZpbGwtcnVsZTpldmVub2RkOycvPjxnIHN0eWxlPSdzdHJva2U6aHNsKDIwMywgMiUsIDgwJSk7c3Ryb2tlLXdpZHRoOjE7Jz48bGluZSB4MT0nMCcgeTE9JzQnIHgyPScxNCcgeTI9JzAnLz48bGluZSB4MT0nMCcgeTE9JzE0JyB4Mj0nMTQnIHkyPScwJy8+PC9nPjwvc3ZnPg==");
}
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNHB4JyBoZWlnaHQ9JzE0cHgnPjxwb2x5Z29uIHBvaW50cz0nMCwwIDE0LDcgMCwxNCcgc3R5bGU9J2ZpbGw6aHNsKDIwMywgMiUsIDk5JSk7c3Ryb2tlOmhzbCgyMDMsIDIlLCA5OSUpO3N0cm9rZS13aWR0aDoxO2ZpbGwtcnVsZTpldmVub2RkOycvPjxnIHN0eWxlPSdzdHJva2U6aHNsKDIwMywgMiUsIDgwJSk7c3Ryb2tlLXdpZHRoOjE7Jz48bGluZSB4MT0nMCcgeTE9JzAnIHgyPScxNCcgeTI9JzcnLz48bGluZSB4MT0nMCcgeTE9JzE0JyB4Mj0nMTQnIHkyPSc3Jy8+PC9nPjwvc3ZnPg==");
}
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNHB4JyBoZWlnaHQ9JzE0cHgnPjxwb2x5Z29uIHBvaW50cz0nMCwwIDE0LDE0IDAsMTEnIHN0eWxlPSdmaWxsOmhzbCgyMDMsIDIlLCA5OSUpO3N0cm9rZTpoc2woMjAzLCAyJSwgOTklKTtzdHJva2Utd2lkdGg6MTtmaWxsLXJ1bGU6ZXZlbm9kZDsnLz48ZyBzdHlsZT0nc3Ryb2tlOmhzbCgyMDMsIDIlLCA4MCUpO3N0cm9rZS13aWR0aDoxOyc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTQnIHkyPScxNCcvPjxsaW5lIHgxPScwJyB5MT0nMTEnIHgyPScxNCcgeTI9JzE0Jy8+PC9nPjwvc3ZnPg==");
}
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top {
  top: calc(0px - 14px);
}
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNHB4JyBoZWlnaHQ9JzE0cHgnPjxwb2x5Z29uIHBvaW50cz0nMCwxNCA3LDAgMTQsMTQnIHN0eWxlPSdmaWxsOmhzbCgyMDMsIDIlLCA5OSUpO3N0cm9rZTpoc2woMjAzLCAyJSwgOTklKTtzdHJva2Utd2lkdGg6MTtmaWxsLXJ1bGU6ZXZlbm9kZDsnLz48ZyBzdHlsZT0nc3Ryb2tlOmhzbCgyMDMsIDIlLCA4MCUpO3N0cm9rZS13aWR0aDoxOyc+PGxpbmUgeDE9JzAnIHkxPScxNCcgeDI9JzcnIHkyPScwJy8+PGxpbmUgeDE9JzE0JyB5MT0nMTQnIHgyPSc3JyB5Mj0nMCcvPjwvZz48L3N2Zz4=");
}
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom {
  bottom: calc(0px - 14px);
}
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNHB4JyBoZWlnaHQ9JzE0cHgnPjxwb2x5Z29uIHBvaW50cz0nMCwwIDcsMTQgMTQsMCcgc3R5bGU9J2ZpbGw6aHNsKDIwMywgMiUsIDk5JSk7c3Ryb2tlOmhzbCgyMDMsIDIlLCA5OSUpO3N0cm9rZS13aWR0aDoxO2ZpbGwtcnVsZTpldmVub2RkOycvPjxnIHN0eWxlPSdzdHJva2U6aHNsKDIwMywgMiUsIDgwJSk7c3Ryb2tlLXdpZHRoOjE7Jz48bGluZSB4MT0nMCcgeTE9JzAnIHgyPSc3JyB5Mj0nMTQnLz48bGluZSB4MT0nMTQnIHkxPScwJyB4Mj0nNycgeTI9JzE0Jy8+PC9nPjwvc3ZnPg==");
}
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top:before,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle:before,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom:before,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top:before,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle:before,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom:before,
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top:before,
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom:before {
  display: block;
}

.oj-messages-layer {
  z-index: 2000;
}

.oj-messages-layer.oj-focus-within {
  z-index: calc(2000 + 1);
}

oj-messages:not(.oj-complete) {
  visibility: hidden;
}

oj-messages {
  display: none;
}

.oj-messages-general {
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  min-width: calc(100% - 20px);
}

.oj-messages-notification {
  width: 30vw;
  max-width: 400px;
  min-width: 320px;
}

.oj-messages-general .oj-messages-container {
  border-width: 1px;
  border-color: hsl(203, 2%, 80%);
  border-style: solid;
  border-radius: 1px;
  box-shadow: 1px 1px 3px 0 hsla(0, 0%, 0%,0.35);
}

.oj-messages-notification .oj-messages-container {
  border-width: 0;
  border-color: initial;
  border-style: solid;
  border-radius: initial;
  box-shadow: initial;
}

.oj-messages-general .oj-messages-container,
.oj-messages-notification .oj-messages-container {
  margin: 10px;
}

.oj-messages-general .oj-message-header {
  background-color: hsl(203, 2%, 100%);
}

.oj-messages-general .oj-message-body {
  background-color: hsl(203, 2%, 100%);
}

.oj-messages-notification .oj-message-header {
  background-color: hsl(203, 2%, 100%);
}

.oj-messages-notification .oj-message-body {
  background-color: hsl(203, 2%, 100%);
}

.oj-messages-inline oj-message:not(:last-child) .oj-message-container,
.oj-messages-inline:not(.oj-messages-inline-remove-bottom-border) oj-message:last-child .oj-message-container {
  border-width: 0 0 1px 0;
  border-color: hsl(203, 2%, 80%);
  border-style: solid;
}

.oj-messages-general .oj-message-container {
  border-width: 0 0 1px 0;
  border-color: hsl(203, 2%, 80%);
  border-style: solid;
  border-radius: 1px;
  box-shadow: 1px 1px 3px 0 hsla(0, 0%, 0%,0.35);
}

.oj-messages-notification .oj-message-container {
  border-width: 1px;
  border-color: hsl(203, 2%, 80%);
  border-style: solid;
  border-radius: 1px;
  box-shadow: 1px 1px 3px 0 hsla(0, 0%, 0%,0.35);
}

.oj-messages-general .oj-message-header {
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
}

.oj-messages-general .oj-message-body {
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
}

.oj-messages-notification .oj-message-header {
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
}

.oj-messages-notification .oj-message-body {
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
}

.oj-messages-general oj-message:not(:last-child) .oj-message-container {
  margin-bottom: 0;
}

.oj-messages-notification oj-message:not(:last-child) .oj-message-container {
  margin-bottom: 10px;
}

@media screen and (max-width: 767.9px) {
  .oj-messages-general,
  .oj-messages-notification {
    width: calc(100% - 20px);
    max-width: initial;
    min-width: initial;
  }
}
.oj-messages-option-defaults {
  font-family: '{"general":{"animation":{"open":{"effect":"expand","duration":"300ms"},"close":{"effect":"collapse","duration":"300ms"}},"position":{"my":{"horizontal":"center","vertical":"top"},"at":{"horizontal":"center","vertical":"top"},"of":"window","collision":"none"}},"notification":{"animation":{"open":{"effect":"slideIn","duration":"300ms"},"close":{"effect":"slideOut","duration":"300ms","direction":"end"}},"position":{"my":{"horizontal":"end","vertical":"top"},"at":{"horizontal":"end","vertical":"top"},"of":"window","collision":"none"}}}';
}

html:not([dir=rtl]) .oj-messages-inline .oj-message-header,
html:not([dir=rtl]) .oj-messages-general .oj-message-header,
html:not([dir=rtl]) .oj-messages-notification .oj-message-header {
  padding: 8px 7px 0px 15px;
}
html[dir=rtl] .oj-messages-inline .oj-message-header,
html[dir=rtl] .oj-messages-general .oj-message-header,
html[dir=rtl] .oj-messages-notification .oj-message-header {
  padding: 8px 15px 0px 7px;
}

.oj-messages-inline .oj-message-body,
.oj-messages-general .oj-message-body {
  padding: 0px 15px 13px 15px;
}

.oj-messages-notification .oj-message-body {
  padding: 0px 15px 13px 15px;
}

.oj-messages-notification .oj-message-category,
.oj-messages-notification .oj-message-header .oj-message-summary {
  padding: 0px 6px;
}

.oj-messages-notification .oj-message-timestamp {
  padding: 0px 2px;
}

.oj-messages-general .oj-message-timestamp,
.oj-messages-inline .oj-message-timestamp {
  padding: 0px 5px;
}

@media print and (orientation: landscape), screen and (min-width: 1024px) {
  html:not([dir=rtl]) .oj-messages-general .oj-message-header,
  html:not([dir=rtl]) .oj-messages-inline .oj-message-header {
    padding: 11px 12px 0px 20px;
  }
  html[dir=rtl] .oj-messages-general .oj-message-header,
  html[dir=rtl] .oj-messages-inline .oj-message-header {
    padding: 11px 20px 0px 12px;
  }
  html:not([dir=rtl]) .oj-messages-general .oj-message-body,
  html:not([dir=rtl]) .oj-messages-inline .oj-message-body {
    padding: 0px 20px 20px 46px;
  }
  html[dir=rtl] .oj-messages-general .oj-message-body,
  html[dir=rtl] .oj-messages-inline .oj-message-body {
    padding: 0px 46px 20px 20px;
  }
  .oj-messages-general .oj-message-category,
  .oj-messages-inline .oj-message-category,
  .oj-messages-general .oj-message-header .oj-message-summary,
  .oj-messages-inline .oj-message-header .oj-message-summary {
    padding: 0px 10px;
  }
}
@media print, screen and (min-width: 768px) {
  html:not([dir=rtl]) .oj-messages-notification .oj-message-header {
    padding: 3px 7px 0px 15px;
  }
  html[dir=rtl] .oj-messages-notification .oj-message-header {
    padding: 3px 15px 0px 7px;
  }
}
@media print and (orientation: portrait), screen and (min-width: 768px) and (max-width: 1023.9px) {
  html:not([dir=rtl]) .oj-messages-general .oj-message-header,
  html:not([dir=rtl]) .oj-messages-inline .oj-message-header {
    padding: 8px 7px 0px 15px;
  }
  html[dir=rtl] .oj-messages-general .oj-message-header,
  html[dir=rtl] .oj-messages-inline .oj-message-header {
    padding: 8px 15px 0px 7px;
  }
}
@media screen and (max-width: 767.9px) {
  html:not([dir=rtl]) .oj-messages-inline .oj-message-header,
  html:not([dir=rtl]) .oj-messages-general .oj-message-header,
  html:not([dir=rtl]) .oj-messages-notification .oj-message-header {
    padding: 3px 2px 0px 10px;
  }
  html[dir=rtl] .oj-messages-inline .oj-message-header,
  html[dir=rtl] .oj-messages-general .oj-message-header,
  html[dir=rtl] .oj-messages-notification .oj-message-header {
    padding: 3px 10px 0px 2px;
  }
  .oj-messages-general .oj-message-timestamp,
  .oj-messages-notification .oj-message-timestamp {
    padding: 0px 2px;
  }
  .oj-messages-inline .oj-message-body,
  .oj-messages-general .oj-message-body,
  .oj-messages-notification .oj-message-body {
    padding: 0px 10px 13px 10px;
  }
}
@keyframes LoadingGradientAnimation {
  0% {
    background-position: 50%;
  }
  100% {
    background-position: -120%;
  }
}
/*
 * Viewport element for clipping ojModule view host during animation
 * so that the view content doesn't overlap surrounding elements
 */
.oj-animation-host-viewport {
  overflow: hidden;
}

/*
 * ojModule view host for holding view content temporarily during animation
 */
.oj-animation-host {
  position: relative;
  width: 100%;
  height: 100%;
}

.oj-animation-module-effects {
  font-family: '{"coverLeft":{"oldViewEffect":{"effect":"slideOut","offsetX":"-30%","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"slideIn","direction":"left","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":true},"coverRight":{"oldViewEffect":{"effect":"slideOut","offsetX":"30%","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"slideIn","direction":"right","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":true},"coverUp":{"newViewEffect":{"effect":"slideIn","direction":"top","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":true},"fade":{"oldViewEffect":{"effect":"fadeOut","duration":"0.4s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"fadeIn","duration":"0.4s","timingFunction":"ease-in-out"},"newViewOnTop":false},"pushStart":{"oldViewEffect":{"effect":"slideOut","direction":"start","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"slideIn","direction":"start","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":false},"pushEnd":{"oldViewEffect":{"effect":"slideOut","direction":"end","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"slideIn","direction":"end","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":false},"revealDown":{"oldViewEffect":{"effect":"slideOut","direction":"bottom","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewOnTop":false},"revealLeft":{"oldViewEffect":{"effect":"slideOut","direction":"left","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"slideIn","offsetX":"30%","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":false},"revealRight":{"oldViewEffect":{"effect":"slideOut","direction":"right","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"slideIn","offsetX":"-30%","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":false},"zoomIn":{"newViewEffect":{"effect":"zoomIn","duration":"0.4s","timingFunction":"ease-in-out"},"newViewOnTop":true},"zoomOut":{"oldViewEffect":{"effect":"zoomOut","duration":"0.4s","timingFunction":"ease-in-out","persist":"all"},"newViewOnTop":false}}';
}

.oj-animation-navigate-methods {
  font-family: '{"navChild":"coverStart","navParent":"revealEnd"}';
}

.oj-animation-effect-default-options {
  font-family: '{"fadeIn":{"duration":"0.4s"},"fadeOut":{"duration":"0.4s"},"expand":{"duration":"0.4s"},"collapse":{"duration":"0.4s"},"zoomIn":{"duration":"0.4s"},"zoomOut":{"duration":"0.4s"},"slideIn":{"duration":"0.4s"},"slideOut":{"duration":"0.4s"},"flipIn":{"duration":"0.4s"},"flipOut":{"duration":"0.4s"},"ripple":{"duration":"0.4s"}}';
}

.oj-animation-effect-ripple {
  background-color: hsl(203, 2%, 55%);
  opacity: 0.6;
  border-radius: 50%;
  position: absolute;
  width: 140px;
  height: 140px;
  left: 0;
  top: 0;
}

/* progress */
/* --------------------------------------------------------------- */
oj-progress:not(.oj-complete) {
  visibility: hidden;
}

oj-progress {
  display: block;
}

.oj-progress-bar {
  height: 4px;
  border: 1px none hsl(203, 2%, 90%);
  border-radius: 0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.oj-progress-bar::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-color: #027bc7;
  opacity: 0.3;
}

.oj-progress-bar-value {
  margin: 0;
  box-sizing: border-box;
  height: 100%;
  background: #027bc7;
}

.oj-progressbar-start-label,
.oj-progressbar-end-label,
.oj-progress-bar-start-label,
.oj-progress-bar-end-label {
  display: inline-block;
  margin-top: 8px;
}

html:not([dir=rtl]) .oj-progressbar-end-label,
html:not([dir=rtl]) .oj-progress-bar-end-label {
  float: right;
}
html[dir=rtl] .oj-progressbar-end-label,
html[dir=rtl] .oj-progress-bar-end-label {
  float: left;
}

.oj-progressbar-embedded,
.oj-progress-bar-embedded {
  height: 3px;
  width: 100%;
  border-style: none;
  background-color: transparent;
}

.oj-progress-bar-overlay {
  height: 100%;
  background: url("images/animated-overlay.gif");
  opacity: 0;
}
html[dir=rtl] .oj-progress-bar-overlay {
  transform: scaleX(-1);
}

.oj-hicontrast .oj-progress-bar-value {
  border: 1px dashed hsl(203, 2%, 90%);
}

/* progress-circle */
/* --------------------------------------------------------------- */
.oj-progress-circle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  max-width: 100%;
  max-height: 100%;
}

.oj-progress-circle-base {
  fill: transparent;
  stroke-width: 10%;
  stroke: #027bc7;
}

.oj-progress-circle-base:not(.oj-progress-circle-value) {
  stroke-opacity: 0.3;
}

.oj-progress-circle-value {
  stroke: #027bc7;
}

.oj-progress-circle-transform {
  transform: rotate(-90deg);
}

html[dir=rtl] .oj-progress-bar-overlay {
  transform: rotate(180deg);
}

.oj-progress-bar-indeterminate .oj-progress-bar-value {
  width: 100%;
  height: 100%;
  animation: indeterminateAnimation 1s infinite linear;
  transform-origin: 0% 50%;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(0) scaleX(0);
  }
  40% {
    transform: translateX(0) scaleX(0.4);
  }
  100% {
    transform: translateX(100%) scaleX(0.5);
  }
}
.oj-progress-circle-overlay {
  background: "images/spinner_full.gif";
  background-size: auto;
  animation: spinnerAnimation 1s infinite linear;
}

@keyframes spinnerAnimation {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
/*
 * applied to the refresh panel
 */
.oj-pulltorefresh-panel {
  overflow: hidden;
}

/*
 * applied to the content inside the pull to refresh panel
 */
.oj-pulltorefresh-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: hsl(203, 2%, 95%);
}

/*
 * applied animation when the height of the panel changes (during release)
 */
.oj-pulltorefresh-transition {
  transition: height 0.4s;
  transition-timing-function: ease-in-out;
}

/*
 * applied to the primary text inside the pull to refresh panel
 */
.oj-pulltorefresh-primary-text {
  color: hsl(0, 0%, 0%);
  text-align: center;
  margin: 0 0 10px 0;
}

/*
 * applied to the secondary text inside the pull to refresh panel
 */
.oj-pulltorefresh-secondary-text {
  color: hsla(0, 0%, 0%, 0.7);
  font-size: 0.85714rem;
  text-align: center;
  margin: 0 0 20px 0;
}

/*
 * applied to the container of the refresh icon inside the pull to refresh panel
 */
.oj-pulltorefresh-icon-container {
  margin: 20px 0 20px 0;
}

/*
 * applied to the refresh icon inside the pull to refresh panel
 */
.oj-pulltorefresh-icon {
  width: 40px;
  height: 40px;
}

.oj-pulltorefresh-icon-full:before {
  content: url("images/spinner_full.gif");
}
.oj-pulltorefresh-icon-full:before {
  transform: translate(-37.5%, -37.5%) scale(0.25);
}

/*
 * Applied to offcanvas when it is in open state 
 */
.oj-swipetoreveal.oj-offcanvas-start.oj-offcanvas-open,
.oj-swipetoreveal.oj-offcanvas-end.oj-offcanvas-open {
  display: flex;
  overflow: hidden;
}

/*
 * Applied to action items 
 */
.oj-swipetoreveal-action {
  flex: 1;
  max-width: 100%;
  text-align: center;
  vertical-align: middle;
  height: 100%;
  overflow: hidden;
  color: hsl(203, 2%, 100%);
  transition: max-width 0.4s ease-in-out;
  background-color: #027bc7;
  min-width: 75px;
}

/*
 * Applied to action items that should be hidden when full trigger occurs
 */
.oj-swipetoreveal .oj-swipetoreveal-hide-when-full {
  max-width: 0;
}

/*
 * Applied to the more action item
 */
.oj-swipetoreveal .oj-swipetoreveal-more {
  background-color: hsl(203, 2%, 45%);
}

/*
 * Applied to the flag action item
 */
.oj-swipetoreveal .oj-swipetoreveal-flag {
  background-color: #bf552e;
}

/*
 * Applied to the alert action item
 */
.oj-swipetoreveal .oj-swipetoreveal-alert {
  background-color: #ba0006;
}

/* Styling for the swipeactions root element */
.oj-swipeactions {
  display: block;
}

/* Styling to remove focus ring border on focusable elements */
.oj-swipeactions:focus {
  outline: none;
}

/* Styling for the neutral action item. */
.oj-swipeactions-neutral {
  background-color: hsl(203, 2%, 45%);
}

/* Styling for the attention action item. */
.oj-swipeactions-attention {
  background-color: #bf552e;
}

/* Styling for the danger action item. */
.oj-swipeactions-danger {
  background-color: #ba0006;
}

/* Styling for the text within action item. */
.oj-swipeactions-action-text {
  padding-top: 0.625rem;
}

/* Styling for the panel of an action item. */
.oj-swipeactions-action-panel {
  height: 100%;
}

/* styling on focused action item. */
.oj-swipeactions-action-panel.oj-focus-highlight {
  outline: 2px dotted hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color solid;
  outline-offset: -2px;
}

/* Styling for the listview item when it is the container of the swipeactions root element. */
.oj-listview-item.oj-swipeactions-container {
  padding: 0;
}

/* Styling for the content inside swipe actions when it is hosted within a listview item. */
.oj-listview-item .oj-swipeactions-content {
  padding: 0.85714rem;
}

/* Styling for the accessible link that displays the swipe actions when activate. */
.oj-swipeactions-accessible-link {
  position: absolute;
  top: calc(100% - 20px);
}

/* Styling for the accessible link that closes the swipe actions when activate. */
.oj-swipeactions-hide-actions-link {
  position: absolute;
  right: 0px;
}

/* Styling for the content of the accessible link that closes the swipe actions. */
.oj-swipeactions-hide-actions-link:after {
  content: "[X]";
}

oj-switcher:not(.oj-complete) {
  visibility: hidden;
}

/* dialog */
/* --------------------------------------------------------------- */
oj-dialog {
  display: none;
}

.oj-dialog-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: inherit;
}

/* defines the stacking context of the dialog and for it's children '**/
.oj-dialog-layer {
  z-index: 1050;
}

.oj-dialog-layer.oj-focus-within {
  z-index: calc(1050 + 1);
}

.oj-dialog {
  width: 300px;
  min-width: 200px;
  height: auto;
  box-sizing: border-box;
  box-shadow: 1px 1px 10px 0 hsla(0, 0%, 0%,0.45);
  background: hsl(203, 2%, 99%);
  border: 1px solid hsl(203, 2%, 80%);
  border-radius: 1px;
}

.oj-dialog.oj-resizable {
  position: absolute;
}

.oj-dialog-header {
  border-width: 0 0 1px 0;
  border-style: solid;
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0.85714rem 0.85714rem 0.85714rem;
  background-color: hsl(203, 2%, 95%);
  background-image: none;
  border-bottom-color: hsl(203, 2%, 80%);
  font-size: 1.42857rem;
  color: hsla(0, 0%, 0%, 0.85);
  font-weight: normal;
  min-height: 2rem;
}

.oj-draggable .oj-dialog-header,
.oj-draggable .oj-dialog-title {
  cursor: move;
}

html:not([dir=rtl]) .oj-dialog-header-close-wrapper {
  margin-right: calc(0rem - 0.85714rem);
}
html[dir=rtl] .oj-dialog-header-close-wrapper {
  margin-left: calc(0rem - 0.85714rem);
}

.oj-dialog-header-close-wrapper {
  margin-bottom: calc(0rem - 0.85714rem);
}

.oj-dialog-title {
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
}

html:not([dir=rtl]) .oj-dialog-header-close .oj-dialog-title {
  padding-right: 0.2rem;
}
html[dir=rtl] .oj-dialog-header-close .oj-dialog-title {
  padding-left: 0.2rem;
}

.oj-dialog-content > p:last-child {
  margin-bottom: 0;
}

.oj-dialog-content {
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

.oj-dialog-body-wrapper {
  height: 100%;
}

.oj-dialog-body {
  position: relative;
  overflow: auto;
  box-sizing: border-box;
  padding: 0.85714rem;
  text-align: start;
}

.oj-dialog-footer-separator {
  border-top: 1px solid hsl(203, 2%, 80%);
}

.oj-dialog-footer {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  padding: 0.85714rem;
}
html:not([dir=rtl]) .oj-dialog-footer {
  text-align: right;
}
html[dir=rtl] .oj-dialog-footer {
  text-align: left;
}

.oj-dialog-footer > .oj-button,
.oj-dialog-footer > .oj-button > .oj-button-button {
  height: 2.28571rem;
  font-weight: normal;
  margin-left: 5px;
}

.oj-dialog:focus, .oj-dialog-header-close-wrapper:focus {
  outline: none;
}

.oj-dialog.oj-focus-highlight,
.oj-dialog-header-close-wrapper.oj-focus-highlight {
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

.oj-dialog-layer.oj-focus-within,
.oj-dialog-layer.oj-animate-open {
  z-index: calc(1050 + 1);
}

.oj-dialog-option-defaults {
  font-family: '{"animation":{"open":[{"effect":"zoomIn"},"fadeIn"],"close":[{"effect":"zoomOut"},"fadeOut"]},"resizeBehavior":"resizable","cancelBehavior":"icon","dragAffordance":"title-bar"}';
}

/* menu-select-many */
/* --------------------------------------------------------------- */
oj-menu-select-many:not(.oj-complete) {
  visibility: hidden;
}

.oj-menu-dropdown oj-menu-select-many > .oj-menu-item:first-child:not(.oj-top):not(.oj-menu-item-after-divider),
.oj-menu-dropdown oj-menu-select-many > .oj-menu-item:first-child:not(.oj-top):not(.oj-menu-item-after-divider) > a,
.oj-menu-sheet oj-menu-select-many > .oj-menu-item:first-child:not(.oj-top):not(.oj-menu-item-after-divider),
.oj-menu-sheet oj-menu-select-many > .oj-menu-item:first-child:not(.oj-top):not(.oj-menu-item-after-divider) > a {
  border-top-left-radius: unset;
  border-top-right-radius: unset;
}

oj-menu-select-many > .oj-menu-item:last-child:not(.oj-bottom):not(.oj-menu-item-before-divider),
oj-menu-select-many > .oj-menu-item:last-child:not(.oj-bottom):not(.oj-bottom):not(.oj-menu-item-before-divider) > a {
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
}

.oj-menucheckbox-icon {
  width: 16px;
  height: 16px;
}

.oj-menucheckbox-icon::after {
  content: "";
  display: inline-block;
}

/* buttonset */
/* --------------------------------------------------------------- */
oj-buttonset-one:not(.oj-complete), oj-buttonset-many:not(.oj-complete) {
  visibility: hidden;
}

/* oj-buttonset-multi is present iff it's a multi-button buttonset, which is the only kind of buttonset to which 
   buttonset styling should be applied.  When a single button is wrapped in a buttonset (typically for use with 
   the "checked" option), that's an implementation detail; users still see it as a standalone button, so it 
   should be themed as such. */
.oj-buttonset-multi {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.oj-buttonset-width-equal .oj-buttonset-multi .oj-button,
.oj-buttonset-width-equal.oj-buttonset-multi .oj-button {
  flex: 1;
  overflow: hidden;
}

.oj-buttonset-width-equal .oj-buttonset-multi,
.oj-buttonset-width-equal.oj-buttonset-multi {
  width: 100%;
}

.oj-buttonset-width-auto .oj-buttonset-multi .oj-button,
.oj-buttonset-width-auto.oj-buttonset-multi .oj-button {
  flex: auto;
}

.oj-buttonset-multi .oj-button {
  justify-content: center;
  overflow: hidden;
  flex: auto;
}

.oj-buttonset-multi.oj-button-full-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal) .oj-button {
  flex: auto;
}
.oj-buttonset-multi.oj-button-full-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal) {
  width: initial;
}

.oj-buttonset-multi.oj-button-half-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal) .oj-button {
  flex: auto;
}
.oj-buttonset-multi.oj-button-half-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal) {
  width: initial;
}

.oj-buttonset-multi.oj-button-outlined-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal) .oj-button {
  flex: auto;
}
.oj-buttonset-multi.oj-button-outlined-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal) {
  width: initial;
}

/* Due to limitations in CSS syntax, the buttonset rules that depend on the chroming level check whether 
   the buttonset itself has .oj-button-XXX-chrome.  This is why we put those classes on the buttonset itself.*/
.oj-buttonset-multi.oj-button-full-chrome .oj-button,
.oj-buttonset-multi.oj-button-outlined-chrome .oj-button {
  border-radius: 0;
  border-right-width: 0;
  margin-left: 0;
  margin-right: 0;
}

.oj-buttonset-multi.oj-button-half-chrome .oj-button {
  margin-left: 0;
  margin-right: 0.25em;
}

.oj-buttonset-multi.oj-button-half-chrome .oj-buttonset-last {
  margin-right: 0;
}

/* .oj-buttonset-first is applied to the first button of the buttonset. */
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-first,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-first {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-first,
html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-first {
  border-right-width: 1px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

/* .oj-buttonset-last is applied to the last button of the buttonset. */
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-last,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-last {
  border-right-width: 1px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-last,
html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-last {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-default,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-focus-only,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-hover,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-disabled {
  border-left-color: hsl(203, 2%, 80%);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-default,
html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-focus-only,
html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-hover,
html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-disabled {
  border-left-color: hsl(203, 2%, 80%);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-active {
  border-left-color: hsl(203, 2%, 80%);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-active {
  border-left-color: hsl(203, 2%, 80%);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-selected {
  border-left-color: hsl(203, 2%, 80%);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-selected {
  border-left-color: hsl(203, 2%, 80%);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-selected.oj-disabled {
  border-left-color: hsl(203, 2%, 90%);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-selected.oj-disabled {
  border-left-color: hsl(203, 2%, 90%);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-default,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-focus-only {
  border-left-color: hsl(203, 2%, 80%);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-default,
html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-focus-only {
  border-left-color: hsl(203, 2%, 80%);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-hover {
  border-left-color: #966486;
}

html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-hover {
  border-left-color: #966486;
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-disabled {
  border-left-color: hsl(203, 2%, 90%);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-disabled {
  border-left-color: hsl(203, 2%, 90%);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-active {
  border-left-color: hsl(203, 2%, 80%);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-active {
  border-left-color: hsl(203, 2%, 80%);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-selected {
  border-left-color: hsl(203, 2%, 80%);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-selected {
  border-left-color: hsl(203, 2%, 80%);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-selected.oj-disabled {
  border-left-color: hsl(203, 2%, 80%);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-selected.oj-disabled {
  border-left-color: hsl(203, 2%, 80%);
}

/* toolbar*/
/* --------------------------------------------------------------- */
oj-toolbar:not(.oj-complete) {
  visibility: hidden;
}

.oj-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.25em 0;
  border-style: solid;
  border-color: hsl(203, 2%, 88%);
  border-width: 0;
  border-radius: 2px;
  background-color: transparent;
}

.oj-toolbar .oj-button {
  margin-bottom: 0;
}

html:not([dir=rtl]) .oj-toolbar > .oj-button:not(:first-child),
html:not([dir=rtl]) .oj-toolbar > .oj-buttonset:not(:first-child) {
  margin-left: 0.125rem;
}
html[dir=rtl] .oj-toolbar > .oj-button:not(:first-child),
html[dir=rtl] .oj-toolbar > .oj-buttonset:not(:first-child) {
  margin-right: 0.125rem;
}

html:not([dir=rtl]) .oj-toolbar > .oj-button:not(:last-child),
html:not([dir=rtl]) .oj-toolbar > .oj-buttonset:not(:last-child) {
  margin-right: 0.125rem;
}
html[dir=rtl] .oj-toolbar > .oj-button:not(:last-child),
html[dir=rtl] .oj-toolbar > .oj-buttonset:not(:last-child) {
  margin-left: 0.125rem;
}

.oj-toolbar .oj-buttonset-multi.oj-button-outlined-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal) {
  width: initial;
}

/* Apps can apply this class to a span to get a toolbar separator.  
 * To make it accessible, the span should also have 
 * role="separator" aria-orientation="vertical".
 * Separators should be placed around any buttonsets in the toolbar, and 
 * anywhere else in the toolbar that a separator is desirable.
 */
.oj-toolbar-separator {
  border-left: solid 1px hsl(203, 2%, 88%);
  height: 1.833em;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.25rem;
}

/* To layout multiple toolbars, an element with .oj-toolbars can contain 1 or more elements 
   each having .oj-toolbar-row, which can each contain 1 or more JET Toolbars 
   (which have the oj-toolbar class). */
.oj-toolbars {
  border-style: solid;
  border-color: hsl(203, 2%, 88%);
  border-width: 0;
  border-radius: 2px;
  background-color: transparent;
}

.oj-toolbar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.oj-toolbar-row .oj-toolbar {
  display: flex;
  background-color: transparent;
  border: 0;
}

.oj-toolbar-row .oj-toolbar + .oj-toolbar {
  border-radius: 0;
}
html:not([dir=rtl]) .oj-toolbar-row .oj-toolbar + .oj-toolbar {
  border-left: 1px solid hsl(203, 2%, 88%);
  margin-left: 0.5em;
  padding-left: 0.5em;
}
html[dir=rtl] .oj-toolbar-row .oj-toolbar + .oj-toolbar {
  border-right: 1px solid hsl(203, 2%, 88%);
  margin-right: 0.5em;
  padding-right: 0.5em;
}

.oj-toolbar-row + .oj-toolbar-row {
  border-top: 1px solid hsl(203, 2%, 88%);
}

/* Apps can apply this class if a top toolbar border is desired */
.oj-toolbar-top-border {
  border-top-width: 1px;
  border-radius: 0;
}

/* Apps can apply this class if a bottom toolbar border is desired */
.oj-toolbar-bottom-border {
  border-bottom-width: 1px;
  border-radius: 0;
}

/* paging control */
/* --------------------------------------------------------------- */
oj-paging-control:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the component. Set the line-height back to normal in case it
   was set to 0 by the table/datagrid footer classes */
.oj-pagingcontrol {
  line-height: normal;
  display: block;
}

/* Styling for the component content. */
.oj-pagingcontrol-content {
  overflow: hidden;
}

/* Styling for the loadMore mode contents. */
.oj-pagingcontrol-loadmore {
  padding: 5px;
}
html:not([dir=rtl]) .oj-pagingcontrol-loadmore {
  text-align: right;
}
html[dir=rtl] .oj-pagingcontrol-loadmore {
  text-align: left;
}

/* Styling for the Show More link. */
.oj-pagingcontrol-loadmore-link {
  color: #000000;
  white-space: nowrap;
  text-decoration: none;
}

.oj-pagingcontrol-loadmore-link.oj-hover {
  text-decoration: underline;
}

/* Styling for the loadMore mode range. */
.oj-pagingcontrol-loadmore-range {
  padding-left: calc(2 * 5px);
  padding-right: calc(2 * 5px);
  white-space: nowrap;
}

/* Styling for the page mode contents. */
.oj-pagingcontrol-nav {
  padding: 5px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Styling for the page mode page input section. */
.oj-pagingcontrol-nav-input-section {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
}
html:not([dir=rtl]) .oj-pagingcontrol-nav-input-section {
  padding-right: 5px;
}
html[dir=rtl] .oj-pagingcontrol-nav-input-section {
  padding-left: 5px;
}

/* Styling for the input section labels */
.oj-pagingcontrol-nav-label.oj-label-inline,
.oj-pagingcontrol-nav-input-max.oj-label-inline,
.oj-pagingcontrol-nav-input-summary.oj-label-inline {
  margin-top: 0.2em;
  line-height: 1;
  padding-top: 0.5rem;
}

/* Styling for the page mode navigation arrows section. */
.oj-pagingcontrol-nav-arrow-section {
  display: inline-block;
  vertical-align: middle;
}
html:not([dir=rtl]) .oj-pagingcontrol-nav-arrow-section {
  border-left: 1px solid hsl(203, 2%, 88%);
  padding-left: 5px;
}
html[dir=rtl] .oj-pagingcontrol-nav-arrow-section {
  border-right: 1px solid hsl(203, 2%, 88%);
  padding-right: 5px;
}

/* Styling for the page mode navigation arrows section when it is the first child  */
html:not([dir=rtl]) .oj-pagingcontrol-nav-arrow-section:first-child {
  border-left: 0;
  padding-left: 0;
}
html[dir=rtl] .oj-pagingcontrol-nav-arrow-section:first-child {
  border-right: 0;
  padding-right: 0;
}

/* Styling for the page mode page links section. */
.oj-pagingcontrol-nav-pages-section {
  display: inline-block;
  vertical-align: middle;
  line-height: 2.28571rem;
}

/* Styling for the page mode dot links. */
.oj-pagingcontrol-nav-dot {
  line-height: 1rem;
  padding: 10px;
  display: inline-block;
}

/* Styling for the page mode dot bullet. */
.oj-pagingcontrol-nav-dot-bullet {
  font-size: 0;
  border-width: 1px;
  border-style: solid;
  border-color: hsla(0, 0%, 0%, 0.8);
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease 0s;
  display: inline-block;
  vertical-align: middle;
}

/* Styling for the page mode dot bullet when paging control in high contrast mode. */
.oj-hicontrast .oj-pagingcontrol-nav-dot-bullet {
  border: 3px double;
}

/* Styling for the page mode dot link when selected or hovered. */
.oj-pagingcontrol-nav-dot-bullet.oj-selected,
.oj-pagingcontrol-nav-dot-bullet.oj-hover {
  background-color: #966486;
  border-color: #966486;
  content: "";
}

/* Styling for the page mode page links. */
.oj-pagingcontrol-nav-page {
  color: #000000;
  min-width: 1rem;
  font-size: 1rem;
  padding: 4px 8px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  outline: none;
}

.oj-pagingcontrol-nav-page.oj-hover {
  text-decoration: underline;
}

.oj-pagingcontrol-nav-page.oj-focus {
  text-decoration: underline;
}

/* Styling for the page mode page link when selected. */
.oj-pagingcontrol-nav-page.oj-selected {
  border: 1px solid hsla(0, 0%, 0%, 0.6);
  color: hsla(0, 0%, 0%, 0.8);
  display: inline;
}

/* Styling for the page mode page link when disabled. */
.oj-pagingcontrol-nav-page.oj-disabled {
  text-decoration: none;
}

/* Styling for the page mode page ellipsis. */
.oj-pagingcontrol-nav-page-ellipsis {
  min-width: 1rem;
  font-size: 1rem;
  padding: 4px;
  vertical-align: bottom;
}

/* Styling for the page mode page label. */
label.oj-pagingcontrol-nav-label {
  color: hsla(0, 0%, 0%, 0.6);
  font-size: 1rem;
}

.oj-pagingcontrol-nav-input-section .oj-inputtext .oj-text-field-container {
  min-width: 2.5rem;
  max-width: 2.5rem;
  min-height: 2rem;
  max-height: 2rem;
  margin-top: 0.2em;
}

/* Styling for the page mode page input element. */
/* Copying from form controls css vars mixins but removing rtl*/
html:not([dir=rtl]) input.oj-pagingcontrol-nav-input.oj-inputtext-input,
html:not([dir=rtl]) .oj-pagingcontrol-nav-input input.oj-inputtext-input {
  text-align: center;
}
html[dir=rtl] input.oj-pagingcontrol-nav-input.oj-inputtext-input,
html[dir=rtl] .oj-pagingcontrol-nav-input input.oj-inputtext-input {
  text-align: center;
}
input.oj-pagingcontrol-nav-input.oj-inputtext-input,
.oj-pagingcontrol-nav-input input.oj-inputtext-input {
  font-size: 1rem;
  padding-left: 2px;
  padding-top: 0px;
  padding-right: 2px;
}

/* Styling for the page mode page input element when readOnly. */
input[readOnly].oj-pagingcontrol-nav-input.oj-inputtext-input,
.oj-pagingcontrol-nav-input input[readOnly].oj-inputtext-input {
  color: hsla(0, 0%, 0%, 0.6);
  min-width: 1rem;
}

/* Styling for the page mode maximum number of pages text. */
.oj-pagingcontrol-nav-input-max {
  color: hsla(0, 0%, 0%, 0.6);
  font-size: 1rem;
}
html:not([dir=rtl]) .oj-pagingcontrol-nav-input-max {
  padding-left: 5px;
}
html[dir=rtl] .oj-pagingcontrol-nav-input-max {
  padding-right: 5px;
}

/* Styling for the page mode page range summary. */
.oj-pagingcontrol-nav-input-summary {
  color: hsla(0, 0%, 0%, 0.6);
  font-size: 1rem;
}
html:not([dir=rtl]) .oj-pagingcontrol-nav-input-summary {
  padding-right: 5px;
}
html[dir=rtl] .oj-pagingcontrol-nav-input-summary {
  padding-left: 5px;
}

/* Styling for the page mode navigation page arrows. */
.oj-pagingcontrol-nav-arrow {
  width: 2.28571rem;
  height: 2.28571rem;
  line-height: 2.28571rem;
  border-radius: 2px;
  cursor: default;
  box-sizing: border-box;
  vertical-align: middle;
  background: transparent;
  border: 1px solid transparent;
  padding: 1px;
}

/* Styling for the page mode navigation page arrows in hover state. */
.oj-pagingcontrol-nav-arrow.oj-hover {
  background-color: hsl(203, 2%, 97%);
  border-color: #966486;
  color: #966486;
  background-image: none;
  text-decoration: none;
}

/* Styling for the page mode navigation page arrows when active. */
.oj-pagingcontrol-nav-arrow.oj-active,
.oj-pagingcontrol-nav-arrow.oj-active.oj-hover {
  color: hsl(203, 2%, 100%);
  background: #966486;
  border-color: #027bc7;
  background-image: none;
}

/* Styling for the page mode navigation first page arrow icon. */
/* Styling for the page mode navigation first page arrow icon in vertical orientation. */
/* Styling for the page mode navigation previous page arrow icon. */
/* Styling for the page mode navigation previous page arrow icon in vertical orientation. */
/* Styling for the page mode navigation next page arrow icon. */
/* Styling for the page mode navigation next page arrow icon in vertical orientation. */
/* Styling for the page mode navigation last page arrow icon. */
/* Styling for the page mode navigation last page arrow icon in vertical orientation. */
/* table */
/* --------------------------------------------------------------- */
oj-table:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the root component element. */
.oj-table {
  position: relative;
  line-height: normal;
  font-size: inherit;
  min-width: 240px;
  min-height: calc(2 * 2.28571rem);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Grid display styling for the root component element. */
.oj-table.oj-table-grid-display {
  border: 1px solid hsl(203, 2%, 88%);
  background-color: hsl(203, 2%, 99%);
}

/* Styling for the root component element with warning. */
.oj-table.oj-warning {
  border: 1px solid #f8ca75;
}

/* Styling for the component div container element. */
.oj-table-container {
  display: inline-block;
  vertical-align: top;
  clear: both;
  box-sizing: border-box;
  overflow: hidden;
}

.oj-table-scroller {
  background-color: inherit;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.oj-table-external-scroll.oj-table-container,
.oj-table-external-scroll .oj-table-scroller {
  overflow: visible;
}

.oj-table-stretch .oj-table-scroller {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.oj-table-scroll-vertical.oj-table-hide-vertical-scrollbar .oj-table-scroller,
.oj-table-hide-vertical-scrollbar .oj-table-scroller {
  overflow-y: hidden;
}

.oj-table-width-container {
  position: absolute;
  top: -1000px;
  left: -1000px;
  visibility: hidden;
}

/* Styling for HTML table element. */
table.oj-table-element {
  box-sizing: border-box;
  width: 100%;
  outline: none;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
}

.oj-table-sticky table.oj-table-element {
  border-collapse: separate;
}

/* Styling for HTML table element when column resizing. */
table.oj-table-element.oj-table-column-header-resizing {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* Styling for the header element. */
.oj-table-header {
  height: 2.75em;
  color: hsla(0, 0%, 0%, 0.85);
  border-bottom: 1px solid hsl(203, 2%, 90%);
  font-size: inherit;
  overflow: hidden;
}

/* Styling for the header element when table has vertical or horizontal scrollbars. */
.oj-table-legacy-scroll .oj-table-header {
  display: block;
  position: relative;
  height: calc(2.75em - 1px);
}

/* Grid display styling for the header element. */
.oj-table-grid-display .oj-table-header {
  height: 2.28571rem;
  background-color: hsl(203, 2%, 97%);
  border-bottom: 1px solid hsl(203, 2%, 88%);
}

/* Styling for the header element when table has vertical or horizontal scrollbars. */
.oj-table-grid-display .oj-table-legacy-scroll .oj-table-header {
  height: calc(2.28571rem - 1px);
}

.oj-table-sticky .oj-table-header,
.oj-table-grid-display .oj-table-sticky .oj-table-header {
  border-bottom: none;
}

/* Styling for the header row element. */
.oj-table-header-row {
  height: calc(2.75em - 1px);
  font-size: inherit;
  vertical-align: middle;
}

/* Grid display table styling for the header row element. */
.oj-table-grid-display .oj-table-header-row {
  height: calc(2.28571rem - 1px);
}

/* Styling for the header row element when table is scrollable. */
.oj-table-legacy-scroll .oj-table-header-row {
  min-height: calc(2.75em - 1px);
  height: auto;
  display: block;
  position: relative;
}

/* Grid display table styling for the header row element when table is scrollable. */
.oj-table-legacy-scroll.oj-table-grid-display .oj-table-header-row {
  min-height: calc(2.28571rem - 1px);
}

/* Styling for the column header elements. */
.oj-table-column-header-cell {
  font-size: inherit;
  font-weight: normal;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  height: calc(2.75em - 1px);
  float: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
html:not([dir=rtl]) .oj-table-column-header-cell {
  text-align: left;
}
html[dir=rtl] .oj-table-column-header-cell {
  text-align: right;
}
.oj-table-column-header-cell {
  box-sizing: border-box;
}

.oj-table-sticky .oj-table-column-header-cell:not(.oj-helper-hidden-accessible),
.oj-table-sticky .oj-table-column-header-selector-cell:not(.oj-helper-hidden-accessible) {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid hsl(203, 2%, 88%);
}

/* Grid display table styling for the column header elements. */
.oj-table-grid-display .oj-table-column-header-cell {
  height: calc(2.28571rem - 1px);
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/* Editable display table styling for the column header elements. */
.oj-table-editable .oj-table-column-header-cell {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/* Styling to remove the right border of the last column header. */
html:not([dir=rtl]) .oj-table-column-header-cell:last-child {
  border-right: 0;
}
html[dir=rtl] .oj-table-column-header-cell:last-child {
  border-left: 0;
}

/* Styling for the vertical grid lines for header cells. */
html:not([dir=rtl]) .oj-table-column-header-cell.oj-table-vgrid-lines {
  border-right: 1px solid transparent;
}
html[dir=rtl] .oj-table-column-header-cell.oj-table-vgrid-lines {
  border-left: 1px solid transparent;
}

/* Styling for the column header elements in selected state when table focused. */
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-column-header-cell.oj-selected,
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-footer-cell.oj-selected {
  background-image: linear-gradient(rgb(214.52, 233.88, 246.04), rgb(214.52, 233.88, 246.04));
}

/* Styling for the column header elements in selected state when table not focused. */
.oj-table:not(.oj-focus) .oj-table-column-header-cell.oj-selected,
.oj-table:not(.oj-focus) .oj-table-footer-cell.oj-selected {
  background-image: linear-gradient(hsl(203, 2%, 95%), hsl(203, 2%, 95%));
}

/* Styling for the column header element in hover state. */
.oj-table-column-header-cell.oj-hover {
  background-image: linear-gradient(hsl(203, 2%, 88%), hsl(203, 2%, 88%));
}

/* Styling for the column header element in focused state. */
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-column-header-cell.oj-focus-highlight,
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-footer-cell.oj-focus-highlight,
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-footer-selector-cell.oj-focus-highligh {
  outline-offset: -1px;
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

/* Styling for the dragged column header element. */
.oj-table-column-header-cell.oj-drag {
  background-color: rgb(224.64, 239.16, 248.28);
  color: hsla(0, 0%, 0%, 0.38);
}

/* Styling for the column header drag image. */
.oj-table-column-header-cell-drag-image {
  border: 1px solid #027bc7;
  background-color: rgb(214.52, 233.88, 246.04);
}

/* Styling for the column header drag indicator after a column. */
html:not([dir=rtl]) .oj-table-column-header-cell.oj-table-column-header-drag-indicator-after {
  border-right: 6px solid #c2eaf3;
}
html[dir=rtl] .oj-table-column-header-cell.oj-table-column-header-drag-indicator-after {
  border-left: 6px solid #c2eaf3;
}

/* Styling for the column header drag indicator before a column. */
html:not([dir=rtl]) .oj-table-column-header-cell.oj-table-column-header-drag-indicator-before {
  border-left: 6px solid #c2eaf3;
}
html[dir=rtl] .oj-table-column-header-cell.oj-table-column-header-drag-indicator-before {
  border-right: 6px solid #c2eaf3;
}

/* Styling for the column header element. */
.oj-table-column-header {
  display: flex;
  position: relative;
  float: none;
  text-overflow: inherit;
  overflow: inherit;
}

/* Styling for the column header text. */
.oj-table-column-header-text {
  display: inline-block;
  height: inherit;
  overflow: inherit;
  text-overflow: inherit;
  vertical-align: top;
  width: 100%;
}

html:not([dir=rtl]) .oj-table-column-header-cell.oj-table-sort .oj-table-column-header-text {
  padding-right: 26px;
}
html[dir=rtl] .oj-table-column-header-cell.oj-table-sort .oj-table-column-header-text {
  padding-left: 26px;
}

html:not([dir=rtl]) .oj-table-editable .oj-table-column-header-cell.oj-table-sort .oj-table-column-header-text {
  padding-right: calc(16px + 0.5em);
}
html[dir=rtl] .oj-table-editable .oj-table-column-header-cell.oj-table-sort .oj-table-column-header-text {
  padding-left: calc(16px + 0.5em);
}

html:not([dir=rtl]) .oj-table-grid-display .oj-table-column-header-cell.oj-table-sort .oj-table-column-header-text {
  padding-right: calc(16px + 0.5em);
}
html[dir=rtl] .oj-table-grid-display .oj-table-column-header-cell.oj-table-sort .oj-table-column-header-text {
  padding-left: calc(16px + 0.5em);
}

/* Styling for the sort area around the icon */
.oj-table-sort-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 100%;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  position: absolute;
  top: 0;
  -webkit-user-select: none;
}
html:not([dir=rtl]) .oj-table-sort-icon-container {
  right: 0;
  padding-left: 0.5em;
}
html[dir=rtl] .oj-table-sort-icon-container {
  left: 0;
  padding-right: 0.5em;
}

/* Styling for the gradient for sort icons in the header */
.oj-table-sort-icon-container.oj-enabled {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white 40%);
}
html[dir=rtl] .oj-table-sort-icon-container.oj-enabled {
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0), white 40%);
}

/* Grid display styling for the gradient for sort icons in the header */
.oj-table-grid-display .oj-table-sort-icon-container.oj-enabled {
  background-image: linear-gradient(to right, rgba(247.197, 247.3857, 247.503, 0), hsl(203, 2%, 97%) 40%);
}
html[dir=rtl] .oj-table-grid-display .oj-table-sort-icon-container.oj-enabled {
  background-image: linear-gradient(to left, rgba(247.197, 247.3857, 247.503, 0), hsl(203, 2%, 97%) 40%);
}

/* Styling for the gradient for sort icons on hover in the header */
.oj-table-column-header-cell.oj-hover .oj-table-sort-icon-container {
  background-image: linear-gradient(to right, rgba(223.788, 224.5428, 225.012, 0), hsl(203, 2%, 88%) 40%);
}
html[dir=rtl] .oj-table-column-header-cell.oj-hover .oj-table-sort-icon-container {
  background-image: linear-gradient(to left, rgba(223.788, 224.5428, 225.012, 0), hsl(203, 2%, 88%) 40%);
}

/* Styling for the gradient for sort icons on hover in the selected header column */
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-column-header-cell.oj-selected.oj-hover .oj-table-sort-icon-container {
  background-image: linear-gradient(to right, rgba(214.52, 233.88, 246.04, 0), rgb(214.52, 233.88, 246.04) 40%);
}
html[dir=rtl] .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-column-header-cell.oj-selected.oj-hover .oj-table-sort-icon-container {
  background-image: linear-gradient(to left, rgba(214.52, 233.88, 246.04, 0), rgb(214.52, 233.88, 246.04) 40%);
}

/* Styling for the gradient for sort icons in the selected header column */
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-column-header-cell.oj-selected .oj-table-sort-icon-container.oj-enabled {
  background-image: linear-gradient(to right, rgba(214.52, 233.88, 246.04, 0), rgb(214.52, 233.88, 246.04) 40%);
}
html[dir=rtl] .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-column-header-cell.oj-selected .oj-table-sort-icon-container.oj-enabled {
  background-image: linear-gradient(to left, rgba(214.52, 233.88, 246.04, 0), rgb(214.52, 233.88, 246.04) 40%);
}

/* Styling for the gradient for sort icons on hover in selected in-active header column */
.oj-table:not(.oj-focus) .oj-table-column-header-cell.oj-selected.oj-hover .oj-table-sort-icon-container {
  background-image: linear-gradient(to right, rgba(241.995, 242.3095, 242.505, 0), hsl(203, 2%, 95%) 40%);
}
html[dir=rtl] .oj-table:not(.oj-focus) .oj-table-column-header-cell.oj-selected.oj-hover .oj-table-sort-icon-container {
  background-image: linear-gradient(to left, rgba(241.995, 242.3095, 242.505, 0), hsl(203, 2%, 95%) 40%);
}

/* Styling for the gradient for sort icons in selected in-active header column */
.oj-table:not(.oj-focus) .oj-table-column-header-cell.oj-selected .oj-table-sort-icon-container.oj-enabled {
  background-image: linear-gradient(to right, rgba(241.995, 242.3095, 242.505, 0), hsl(203, 2%, 95%) 40%);
}
html[dir=rtl] .oj-table:not(.oj-focus) .oj-table-column-header-cell.oj-selected .oj-table-sort-icon-container.oj-enabled {
  background-image: linear-gradient(to left, rgba(241.995, 242.3095, 242.505, 0), hsl(203, 2%, 95%) 40%);
}

/* Styling for the gradient for sort icon in the dragged column header element. */
.oj-table-column-header-cell.oj-drag .oj-table-sort-icon-container {
  background-image: linear-gradient(to right, rgba(224.64, 239.16, 248.28, 0), rgb(224.64, 239.16, 248.28) 40%);
}
html[dir=rtl] .oj-table-column-header-cell.oj-drag .oj-table-sort-icon-container {
  background-image: linear-gradient(to left, rgba(224.64, 239.16, 248.28, 0), rgb(224.64, 239.16, 248.28) 40%);
}

/* Styling for the gradient for sort icons in column header drag image. */
.oj-table-column-header-cell-drag-image .oj-table-sort-icon-container {
  background-image: linear-gradient(to right, rgba(214.52, 233.88, 246.04, 0), rgb(214.52, 233.88, 246.04) 40%);
}
html[dir=rtl] .oj-table-column-header-cell-drag-image .oj-table-sort-icon-container {
  background-image: linear-gradient(to left, rgba(214.52, 233.88, 246.04, 0), rgb(214.52, 233.88, 246.04) 40%);
}

/* Styling for both the sort icons and click area */
.oj-table-column-header-asc-icon,
.oj-table-column-header-dsc-icon,
.oj-table-column-header-default-sort-icon {
  flex: 0 1 auto;
}

/* Styling for disabled sort icons */
.oj-table-column-header-default-sort-icon.oj-disabled {
  display: none;
}

/* Styling for the column header resize indicator. */
.oj-table-column-header-resize-indicator {
  position: absolute;
  top: 0;
  width: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  border-style: solid;
  border-color: rgb(214.52, 233.88, 246.04);
  pointer-events: none;
}

.oj-table-sticky .oj-table-column-header-resize-indicator {
  z-index: 1;
}

/* Styling for the data body element. */
.oj-table-body {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: inherit;
  overflow: hidden;
}

/* Styling for the table body element when table is scrollable. */
.oj-table-legacy-scroll .oj-table-body {
  display: block;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

/* Styling for the table body element when table has vertical scrollbars. */
/* Firefox does not work correctly with overflow:auto, so we need to set scroll explicitly */
.oj-table-scroll-vertical:not(.oj-table-sticky) .oj-table-body,
.oj-table-scroll-vertical .oj-table-scroller {
  overflow-y: scroll;
}

/* Styling for the table body element when table has horizontal scrollbars. */
/* Firefox does not work correctly with overflow:auto, so we need to set scroll explicitly */
.oj-table-scroll-horizontal:not(.oj-table-sticky) .oj-table-body,
.oj-table-scroll-horizontal .oj-table-scroller {
  overflow-x: scroll;
}

/* Grid display styling for the data body element. */
.oj-table-grid-display .oj-table-body {
  background-color: hsl(203, 2%, 100%);
}

/* Styling for the data row elements. */
.oj-table-body-row {
  height: 2.75em;
  font-size: inherit;
}

.oj-table-body-scroll-buffer {
  height: 0px;
}

.oj-table-legacy-width-buffer {
  visibility: collapse;
  height: 0px;
}

.oj-table-legacy-width-buffer-cell {
  height: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.oj-table-legacy-sizer {
  visibility: hidden;
  position: relative;
  top: 0px;
  left: 0px;
  height: 0px;
  width: 0px;
}

.oj-table-horizontal-grid:not(.oj-table-sticky) .oj-table-body-row,
.oj-table-sticky.oj-table-horizontal-grid .oj-table-data-cell,
.oj-table-sticky.oj-table-horizontal-grid .oj-table-selector-cell {
  border-bottom: 1px solid hsl(203, 2%, 88%);
}

.oj-table-horizontal-grid.oj-table-scroll-vertical:not(.oj-table-sticky) .oj-table-body-row:last-child,
.oj-table-sticky.oj-table-horizontal-grid.oj-table-scroll-vertical .oj-table-body-row:last-child .oj-table-data-cell,
.oj-table-sticky.oj-table-horizontal-grid.oj-table-scroll-vertical .oj-table-body-row:last-child .oj-table-selector-cell {
  border-bottom: none;
}

/* Grid display table styling for the data row elements. */
.oj-table-grid-display .oj-table-body-row {
  height: 2.28571rem;
}

/* Styling for the data row elements in focus state. */
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-row.oj-focus-highlight:not(.oj-table-body-row-edit),
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-message-row.oj-focus-highlight,
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-no-data-row.oj-focus-highlight {
  outline-offset: -1px;
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

/* Styling for drag image of row. */
.oj-table-body-row-drag-image {
  opacity: 0.95;
  background-color: hsl(203, 2%, 100%);
  border: 1px solid transparent;
}

/* Styling for drag source when dnd with other component */
.oj-table-row-drag-source-opaque {
  opacity: 0.3;
}

/* Styling for drag source when dnd within component */
.oj-table-row-drag-source-hide {
  display: none;
}

/* Styling for drop target when target table is empty. */
.oj-table-drop-target-empty .oj-table-body-row-drag-indicator {
  background-color: #d9f4fa;
}

/* Styling for the data row drag indicator. */
.oj-table-body-row-drag-indicator {
  height: 2.28571rem;
  background-color: #c2eaf3;
}

/* Styling for drop target when dnd with other component */
.oj-table-body-row-drop-target {
  width: 100%;
  height: 2px;
  background-color: #027bc7;
}

.oj-table-touch-affordance-glass-pane {
  position: absolute;
  width: 100%;
  pointer-events: none;
  overflow: hidden;
}

/* Styling for the selection affordance icon on touch devices*/
.oj-table-body-row-touch-selection-affordance-top-icon,
.oj-table-body-row-touch-selection-affordance-bottom-icon {
  border-radius: 50%;
  border: 2px solid #027bc7;
  background-color: #966486;
  box-sizing: border-box;
  position: absolute;
  width: 11px;
  height: 11px;
  z-index: 1;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Styling for the selection affordance touchable area on touch devices*/
.oj-table-body-row-touch-selection-affordance-touch-area {
  width: 24px;
  height: 24px;
  position: absolute;
  pointer-events: auto;
}

/* Styling for the data cell elements. */
.oj-table-data-cell {
  font-size: inherit;
  font-weight: normal;
  min-width: 1rem;
  min-height: 1rem;
  padding-top: calc(0.5em + 1px);
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  height: 2.75em;
  float: none;
}
html:not([dir=rtl]) .oj-table-data-cell {
  text-align: left;
}
html[dir=rtl] .oj-table-data-cell {
  text-align: right;
}
.oj-table-data-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Grid display table styling for the data cell elements. */
.oj-table-grid-display .oj-table-data-cell {
  padding-left: 0.5em;
  padding-right: 0.5em;
  height: 2.28571rem;
}

/* Editable table styling for the data cell elements. */
.oj-table-editable .oj-table-data-cell {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/* Edit row styling for data cell elements. */
.oj-table-body-row-edit .oj-table-data-cell:not(.oj-read-only) {
  padding: 0;
}

/* Edit row styling for data cell elements. */
.oj-table-data-cell.oj-table-data-cell-edit {
  outline: 1px solid hsl(203, 2%, 0%);
  outline-offset: -1px;
}

/* Styling on read only table cells, oj-readOnly must be applied by the application */
.oj-table-data-cell.oj-read-only {
  background-image: linear-gradient(hsl(203, 2%, 95%), hsl(203, 2%, 95%));
}

/* A helper class oj-table-data-cell-no-padding should have padding 0*/
.oj-table-data-cell.oj-table-data-cell-no-padding {
  padding: 0;
}

/* A helper class oj-table-data-cell-padding should be applied to editable components that should maintain padding in edit mode*/
.oj-table-body-row-edit .oj-table-data-cell.oj-table-data-cell-padding {
  padding: 0.5em;
}

/* Styling for the dragged data cell elements. */
.oj-table-data-cell.oj-drag {
  background-color: rgb(232.23, 243.12, 249.96);
  color: hsla(0, 0%, 0%, 0.38);
}

/* Styling for the data cell elements in selected state when table focused. */
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-data-cell.oj-selected {
  background-image: linear-gradient(rgb(232.23, 243.12, 249.96), rgb(232.23, 243.12, 249.96));
}

/* Styling for the data cell elements in selected state when table in high contrast mode. */
.oj-hicontrast .oj-table-data-cell.oj-selected {
  border: 3px double;
}

/* Styling for the data cell elements in selected state when table not focused. */
.oj-table:not(.oj-focus) .oj-table-data-cell.oj-selected {
  background-image: linear-gradient(rgb(232.23, 243.12, 249.96), rgb(232.23, 243.12, 249.96));
}

/* Styling for the data cell elements in hover state. */
.oj-table-data-cell.oj-hover {
  background-image: linear-gradient(hsl(203, 2%, 95%), hsl(203, 2%, 95%));
}

/* Styling on form controls stamped inside a table */
.oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputsearch-input, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input, .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input {
  padding: 0 0.5em;
}

.oj-table-data-cell .oj-checkboxset .oj-checkbox-label {
  justify-content: flex-end;
}

/* Styling for the footer. */
.oj-table-footer {
  font-size: inherit;
  overflow: hidden;
}

/* Styling for the footer when table has vertical or horizontal scrollbars. */
.oj-table-legacy-scroll .oj-table-footer {
  display: block;
  position: relative;
}

/* Grid display styling for the footer. */
.oj-table-grid-display .oj-table-footer {
  background-color: hsl(203, 2%, 97%);
  border-top: 1px solid hsl(203, 2%, 88%);
}

/* Styling for the footer row. */
.oj-table-footer-row {
  height: 2.75em;
  font-size: inherit;
}

/* Grid display table styling for the footer row. */
.oj-table-grid-display .oj-table-footer-row {
  height: 2.28571rem;
}

/* Styling for the footer row when table is scrollable. */
.oj-table-legacy-scroll .oj-table-footer-row {
  min-height: 2.75em;
  height: auto;
  display: block;
  position: relative;
}

/* Grid display table styling for the footer row when table is scrollable. */
.oj-table-legacy-scroll.oj-table-grid-display .oj-table-footer-row {
  min-height: 2.28571rem;
}

/* Styling for the footer cells. */
.oj-table-footer-cell,
.oj-table-footer-selector-cell {
  float: none;
  height: 2.75em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  font-size: inherit;
  box-sizing: border-box;
}

.oj-table-sticky .oj-table-footer-cell,
.oj-table-sticky .oj-table-footer-selector-cell {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* Grid display table styling for the footer cells. */
.oj-table-grid-display .oj-table-footer-cell,
.oj-table-grid-display .oj-table-footer-selector-cell {
  height: 2.28571rem;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/* Styling for the vertical grid lines for data cells. */
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines {
  border-right: 1px solid hsl(203, 2%, 88%);
}
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines {
  border-left: 1px solid hsl(203, 2%, 88%);
}

/* Grid display styling for the vertical grid lines. */
html:not([dir=rtl]) .oj-table-grid-display .oj-table-vgrid-lines,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-column-header-cell.oj-table-vgrid-lines {
  border-right: 1px solid hsl(203, 2%, 88%);
}
html[dir=rtl] .oj-table-grid-display .oj-table-vgrid-lines,
html[dir=rtl] .oj-table-grid-display .oj-table-column-header-cell.oj-table-vgrid-lines {
  border-left: 1px solid hsl(203, 2%, 88%);
}

/* Styling to remove the right border of the last vertical grid line. */
html:not([dir=rtl]) .oj-table-vgrid-lines:last-child,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-vgrid-lines:last-child,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-column-header-cell.oj-table-vgrid-lines:last-child {
  border-right: 0;
}
html[dir=rtl] .oj-table-vgrid-lines:last-child,
html[dir=rtl] .oj-table-grid-display .oj-table-vgrid-lines:last-child,
html[dir=rtl] .oj-table-grid-display .oj-table-column-header-cell.oj-table-vgrid-lines:last-child {
  border-left: 0;
}

/* Styling for the status message. */
.oj-table-status-message {
  position: absolute;
  pointer-events: none;
}

/* Styling for the status message text. */
.oj-table-status-message-text {
  background-color: InfoBackground;
  color: InfoText;
  border: 1px hsl(203, 2%, 88%) solid;
  padding: 0.5em;
  display: inline-block;
}

/* Styling for the activity indicator. */
.oj-table-loading-icon {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  margin: auto;
}
.oj-table-loading-icon:before {
  content: url("images/spinner_full.gif");
}
.oj-table-loading-icon:before {
  transform: translate(-37.5%, -37.5%) scale(0.25);
}

/* Styling for the body message. */
.oj-table-body-message {
  color: hsla(0, 0%, 0%, 0.8);
  padding: 0.5em;
}

.oj-table-body-message-row,
.oj-table-no-data-row {
  position: relative;
}

/* Styling for a panel that can attach to the bottom of the table
   and match the table colors. An app developer can put a paging control
   in a div with this class, for example. */
/* Styling for a panel that can attach to the bottom of the table
   and match the table colors when table is in grid display. An app developer
   can put a paging control in a div with this class, for example. */
.oj-table-panel-bottom-grid-display {
  border-style: solid;
  border-color: hsl(203, 2%, 88%);
  background-color: hsl(203, 2%, 99%);
  border-width: 0 1px 1px;
}

/* Styling for the sort ascending icon */
/* Styling for the sort descending icon */
/* tree */
/* --------------------------------------------------------------- */
oj-tree:not(.oj-complete) {
  visibility: hidden;
}

/*  Base style for tree and nodes  */
.oj-tree-list,
.oj-tree-list ul,
.oj-tree-node {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/*  Basic node  */
.oj-tree-node {
  min-height: 1.833em;
  white-space: nowrap;
}
html:not([dir=rtl]) .oj-tree-node {
  margin-left: 18px;
}
html[dir=rtl] .oj-tree-node {
  margin-right: 18px;
}
.oj-tree-node {
  min-width: 18px;
  vertical-align: middle;
}

/*  First level nodes are not indented  */
html:not([dir=rtl]) .oj-tree-list > .oj-tree-node {
  margin-left: 0;
}
html[dir=rtl] .oj-tree-list > .oj-tree-node {
  margin-right: 0;
}

/* Allow some extra space before the top child of a parent */
.oj-tree-list ul > li:first-child {
  margin-top: 4px;
}

/*  Node anchor */
.oj-tree-list a {
  box-sizing: content-box;
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  margin: 0;
  vertical-align: middle;
}

/*  No focus effect */
.oj-tree-list a:focus {
  outline: none;
}

/*  Tree icon (node, disclosure)  */
.oj-tree-icon {
  display: inline-block;
  text-decoration: none;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
html:not([dir=rtl]) .oj-tree-icon {
  margin-left: 4px;
  margin-right: 0;
}
html[dir=rtl] .oj-tree-icon {
  margin-right: 4px;
}

/*  Node icon  */
.oj-tree-node-icon {
  cursor: default;
}

/*  Disclosure icon  */
.oj-tree-disclosure-icon {
  cursor: pointer;
}

/*  Default expanded parent image */
/*  Default collapsed parent image  */
/*  Default leaf node image */
/*  Animated node "loading" icon  */
.oj-tree-loading .oj-tree-icon,
.oj-collapsed a.oj-tree-loading > .oj-tree-node-icon.oj-tree-icon {
  background-repeat: no-repeat;
  background-image: none;
  vertical-align: middle;
}

/*  No node icons to be displayed, option icons:false */
.oj-tree-no-icons .oj-tree-node-icon {
  display: none;
}

/*  Disabled  */
.oj-tree-list.oj-disabled .oj-tree-disclosure-icon,
.oj-tree-node.oj-disabled {
  color: hsla(0, 0%, 0%, 0.38);
  cursor: default;
}

/*  Collapsed node children */
.oj-tree-node.oj-collapsed > ul {
  display: none;
}

/*  Node text */
.oj-tree-title {
  border: 1px solid transparent;
  color: #000000;
  cursor: pointer;
  vertical-align: -0.15rem;
}
html:not([dir=rtl]) .oj-tree-title {
  margin-left: 0.25em;
}
html[dir=rtl] .oj-tree-title {
  margin-right: 0.25em;
}

/* In high contrast mode the border will show up even when transparent, so remove the border in high contrast mode*/
.oj-hicontrast .oj-tree-title {
  border-width: 0;
}

/*  Active node text  */
.oj-hover .oj-tree-title {
  border: 1px dashed hsl(203, 2%, 30%);
  background-color: transparent;
}

/*  Selected node text  */
.oj-selected .oj-tree-title {
  border: 1px solid rgb(224.64, 239.16, 248.28);
  background-color: rgb(224.64, 239.16, 248.28);
}

/*  Selected inactive node text  */
.oj-selected.oj-tree-inactive .oj-tree-title {
  border: 1px solid rgb(214.52, 233.88, 246.04);
  background-color: rgb(232.23, 243.12, 249.96);
}

/*  active and selected node text  */
.oj-hover.oj-selected .oj-tree-title {
  background-color: rgb(224.64, 239.16, 248.28);
  border: 1px solid #000000;
}

/*  Cursor over invalid drop target  */
.oj-tree-node.oj-invalid-drop .oj-tree-title,
.oj-tree-node.oj-invalid-drop .oj-tree-icon,
.oj-tree.oj-invalid-drop {
  cursor: no-drop;
}

/*  Node dragged text (DnD reorder) */
.oj-tree-title.oj-drag {
  position: absolute;
}

/* transition properties and duration  */
.oj-tree-transition {
  transition: max-height 0.4s;
}

/* DnD reorder insert position pointer container */
.oj-tree-drop-marker {
  position: absolute;
  display: none;
  background-color: transparent;
}

/*  DnD reorder insert position icon font  */
.oj-tree-drop-marker-icon {
  height: 12px;
  width: 8px;
  display: inline-block;
  text-decoration: none;
  color: #027bc7;
}

/*  DnD reorder insert position pointer line when dropping between nodes  */
.oj-tree-drop-marker-line {
  height: 1px;
  width: 100px;
  position: absolute;
  display: none;
  background-color: #027bc7;
}

/* Styling for a collapsed icon */
/* Styling for an expanded icon */
/*  Drag/Drop insert pointer icon */
oj-tree-view:not(.oj-complete) {
  visibility: hidden;
}

:root {
  --oj-tree-view-indent-width: 24px;
}

oj-tree-view {
  display: block;
  overflow: auto;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: 0.25rem;
  position: relative;
}

oj-tree-view:focus {
  outline: none;
}

.oj-treeview-list:focus {
  outline: none;
}

.oj-treeview-list,
.oj-treeview-item {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.oj-treeview-item {
  white-space: nowrap;
  vertical-align: middle;
}

html:not([dir=rtl]) .oj-treeview-list.oj-treeview-drag-image > .oj-treeview-item {
  margin-left: 0;
}
html[dir=rtl] .oj-treeview-list.oj-treeview-drag-image > .oj-treeview-item {
  margin-right: 0;
}

.oj-treeview-icon {
  display: inline-block;
  text-decoration: none;
  vertical-align: middle;
}
html:not([dir=rtl]) .oj-treeview-icon {
  text-align: right;
}
html[dir=rtl] .oj-treeview-icon {
  text-align: left;
}

.oj-treeview-item-icon {
  cursor: default;
  margin: 4px;
}

.oj-treeview-item-text {
  color: #000000;
  cursor: default;
  vertical-align: middle;
}
html:not([dir=rtl]) .oj-treeview-item-text {
  margin-left: 2px;
  margin-right: 4px;
}
html[dir=rtl] .oj-treeview-item-text {
  margin-left: 4px;
  margin-right: 2px;
}

.oj-treeview-item-content-icon {
  vertical-align: middle;
  font-size: 1rem;
  display: inline-block;
}
html:not([dir=rtl]) .oj-treeview-item-content-icon {
  margin: 0 0.5rem 0 0.5rem;
}
html[dir=rtl] .oj-treeview-item-content-icon {
  margin: 0 0.5rem 0 0.5rem;
}

.oj-treeview-item-content {
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
}

.oj-treeview-selector {
  display: inline-block;
  vertical-align: middle;
}

.oj-treeview-item-content.oj-hover {
  background-color: hsl(203, 2%, 95%);
}

.oj-treeview-list:focus .oj-treeview-item-content.oj-selected {
  background-color: rgb(224.64, 239.16, 248.28);
}

.oj-treeview-item-content.oj-selected {
  background-color: rgb(224.64, 239.16, 248.28);
}

.oj-hicontrast .oj-treeview-item-content.oj-selected {
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  border-color: initial;
}

.oj-hicontrast .oj-treeview-item-content.oj-focus-highlight {
  outline-width: 2px;
  outline-style: dotted;
  border-width: 0 1px 1px 0;
  border-style: dotted;
}

.oj-treeview-item-content.oj-focus-highlight {
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

.oj-treeview-spacer {
  height: 30px;
  display: inline-block;
  vertical-align: middle;
}

.oj-treeview-disclosure-icon {
  cursor: pointer;
}

.oj-treeview-disclosure-icon:before {
  margin: 7px 4px;
}

.oj-treeview-drop-line {
  height: 1px;
  width: 100px;
  position: absolute;
  background-color: #027bc7;
  pointer-events: none;
}

.oj-treeview-drop-zone {
  background-color: #d9f4fa;
  border-radius: 0.25rem;
}

.oj-treeview-drag-image {
  position: fixed;
  top: 10000px;
  overflow: visible;
}

.oj-treeview-drag-image .oj-treeview-item {
  position: absolute;
}

/* Styling for a collapsed icon */
/* Styling for an expanded icon */
oj-data-grid:not(.oj-complete) {
  visibility: hidden;
}

[hidden].oj-datagrid {
  display: none;
}

/* Styling for the datagrid widget container */
.oj-datagrid {
  display: block;
  position: relative;
  border: 1px solid hsl(203, 2%, 88%);
  background-color: hsl(203, 2%, 99%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  cursor: default;
}

/* Styling to remove focus ring border on focusable elements */
.oj-datagrid:focus,
.oj-datagrid-cell:focus,
.oj-datagrid-header-cell:focus,
.oj-datagrid-header-label:focus,
.oj-datagrid-end-header-cell:focus,
.oj-datagrid-scrollers:focus,
.oj-datagrid-databody:focus,
.oj-datagrid-empty-text:focus,
.oj-datagrid-no-data-container:focus {
  outline: none;
}

/* The default column width should be set here*/
.oj-datagrid-cell,
.oj-datagrid-column-header-cell,
.oj-datagrid-column-end-header-cell {
  width: 4.166rem;
}

/* The default row height should be set here*/
.oj-datagrid-cell,
.oj-datagrid-row-header-cell,
.oj-datagrid-row-end-header-cell {
  height: 2.28571rem;
}

/* Styling on the row header and row end header containere*/
.oj-datagrid-row-header,
.oj-datagrid-row-end-header {
  box-sizing: border-box;
}

/* Styling on the column header and column end header container*/
.oj-datagrid-column-header,
.oj-datagrid-column-end-header {
  box-sizing: border-box;
}

/* Style for disabling horizontal gridlines on cells */
.oj-datagrid-cell.oj-datagrid-border-horizontal-none,
.oj-datagrid-header-cell.oj-datagrid-border-horizontal-none,
.oj-datagrid-end-header-cell.oj-datagrid-border-horizontal-none {
  border-bottom-color: transparent;
}

/* Style for disabling horizontal gridlines on corners, is the top border for corners */
.oj-datagrid-row-header-spacer.oj-datagrid-border-horizontal-none,
.oj-datagrid-bottom-corner.oj-datagrid-border-horizontal-none {
  border-top-color: transparent;
}

/* Style for disabling vertical gridlines */
html:not([dir=rtl]) .oj-datagrid-cell.oj-datagrid-border-vertical-none,
html:not([dir=rtl]) .oj-datagrid-header-cell.oj-datagrid-border-vertical-none,
html:not([dir=rtl]) .oj-datagrid-end-header-cell.oj-datagrid-border-vertical-none {
  border-right-color: transparent;
}
html[dir=rtl] .oj-datagrid-cell.oj-datagrid-border-vertical-none,
html[dir=rtl] .oj-datagrid-header-cell.oj-datagrid-border-vertical-none,
html[dir=rtl] .oj-datagrid-end-header-cell.oj-datagrid-border-vertical-none {
  border-left-color: transparent;
}

/* Style for disabling vertical gridlines on corners, is the opposite of cell sides */
html:not([dir=rtl]) .oj-datagrid-column-header-spacer.oj-datagrid-border-vertical-none,
html:not([dir=rtl]) .oj-datagrid-bottom-corner.oj-datagrid-border-vertical-none {
  border-left-color: transparent;
}
html[dir=rtl] .oj-datagrid-column-header-spacer.oj-datagrid-border-vertical-none,
html[dir=rtl] .oj-datagrid-bottom-corner.oj-datagrid-border-vertical-none {
  border-right-color: transparent;
}

/* Style for grid border if the grid doesn't fill the container the end headers need a border-bottom */
.oj-datagrid .oj-datagrid-row-header-spacer.oj-datagrid-small-content-border-horizontal,
.oj-datagrid .oj-datagrid-bottom-corner.oj-datagrid-small-content-border-horizontal,
.oj-datagrid .oj-datagrid-end-header-cell.oj-datagrid-small-content-border-horizontal {
  border-bottom-width: 1px;
}

/* Style for disabling vertical gridlines */
html:not([dir=rtl]) .oj-datagrid .oj-datagrid-column-header-spacer.oj-datagrid-small-content-border-vertical,
html:not([dir=rtl]) .oj-datagrid .oj-datagrid-bottom-corner.oj-datagrid-small-content-border-vertical,
html:not([dir=rtl]) .oj-datagrid .oj-datagrid-end-header-cell.oj-datagrid-small-content-border-vertical {
  border-right-width: 1px;
}
html[dir=rtl] .oj-datagrid .oj-datagrid-column-header-spacer.oj-datagrid-small-content-border-vertical,
html[dir=rtl] .oj-datagrid .oj-datagrid-bottom-corner.oj-datagrid-small-content-border-vertical,
html[dir=rtl] .oj-datagrid .oj-datagrid-end-header-cell.oj-datagrid-small-content-border-vertical {
  border-left-width: 1px;
}

/* Styling on header cells both for rows and columns, start and end */
.oj-datagrid-header-label,
.oj-datagrid-header-cell,
.oj-datagrid-end-header-cell {
  position: absolute;
  font-size: inherit;
  font-weight: normal;
  color: hsla(0, 0%, 0%, 0.85);
  background-color: hsl(203, 2%, 97%);
  border-color: hsl(203, 2%, 88%);
  border-style: solid;
  overflow: hidden;
  display: flex;
}

/* Styling on the cells in the column and column end header, the default column header height should be set here*/
.oj-datagrid-column-header-label,
.oj-datagrid-column-end-header-label,
.oj-datagrid-column-header-cell,
.oj-datagrid-column-end-header-cell {
  height: 2.28571rem;
  padding: 0.5em;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.oj-datagrid-column-header-label.oj-datagrid-depth-2,
.oj-datagrid-column-end-header-label.oj-datagrid-depth-2,
.oj-datagrid-column-header-cell.oj-datagrid-depth-2,
.oj-datagrid-column-end-header-cell.oj-datagrid-depth-2 {
  height: calc(2 * 2.28571rem);
}
.oj-datagrid-column-header-label.oj-datagrid-depth-3,
.oj-datagrid-column-end-header-label.oj-datagrid-depth-3,
.oj-datagrid-column-header-cell.oj-datagrid-depth-3,
.oj-datagrid-column-end-header-cell.oj-datagrid-depth-3 {
  height: calc(3 * 2.28571rem);
}
.oj-datagrid-column-header-label.oj-datagrid-depth-4,
.oj-datagrid-column-end-header-label.oj-datagrid-depth-4,
.oj-datagrid-column-header-cell.oj-datagrid-depth-4,
.oj-datagrid-column-end-header-cell.oj-datagrid-depth-4 {
  height: calc(4 * 2.28571rem);
}
.oj-datagrid-column-header-label.oj-datagrid-depth-5,
.oj-datagrid-column-end-header-label.oj-datagrid-depth-5,
.oj-datagrid-column-header-cell.oj-datagrid-depth-5,
.oj-datagrid-column-end-header-cell.oj-datagrid-depth-5 {
  height: calc(5 * 2.28571rem);
}
.oj-datagrid-column-header-label.oj-datagrid-depth-6,
.oj-datagrid-column-end-header-label.oj-datagrid-depth-6,
.oj-datagrid-column-header-cell.oj-datagrid-depth-6,
.oj-datagrid-column-end-header-cell.oj-datagrid-depth-6 {
  height: calc(6 * 2.28571rem);
}
.oj-datagrid-column-header-label.oj-datagrid-depth-7,
.oj-datagrid-column-end-header-label.oj-datagrid-depth-7,
.oj-datagrid-column-header-cell.oj-datagrid-depth-7,
.oj-datagrid-column-end-header-cell.oj-datagrid-depth-7 {
  height: calc(7 * 2.28571rem);
}

.oj-datagrid-column-header-label,
.oj-datagrid-column-end-header-label {
  justify-content: flex-end;
}

/* Styling on the cells in the column header */
html:not([dir=rtl]) .oj-datagrid-column-header-cell {
  border-width: 0 1px 1px 0;
}
html[dir=rtl] .oj-datagrid-column-header-cell {
  border-width: 0 0 1px 1px;
}

/* Styling on the cells in the column end header */
html:not([dir=rtl]) .oj-datagrid-column-end-header-cell,
html:not([dir=rtl]) .oj-datagrid-row-header-label {
  border-width: 1px 1px 0 0;
}
html[dir=rtl] .oj-datagrid-column-end-header-cell,
html[dir=rtl] .oj-datagrid-row-header-label {
  border-width: 1px 0 0 1px;
}

/* Styling on row and row end header cells, the default row header width should be set here */
.oj-datagrid-row-header-label,
.oj-datagrid-row-end-header-label,
.oj-datagrid-row-header-cell,
.oj-datagrid-row-end-header-cell {
  justify-content: flex-start;
  align-items: center;
  width: 4.166rem;
  border-color: hsl(203, 2%, 88%);
  padding: 0.5em;
  box-sizing: border-box;
  border-style: solid;
}

.oj-datagrid-row-header-label.oj-datagrid-depth-2,
.oj-datagrid-row-end-header-label.oj-datagrid-depth-2,
.oj-datagrid-row-header-cell.oj-datagrid-depth-2,
.oj-datagrid-row-end-header-cell.oj-datagrid-depth-2 {
  width: calc(2 * 4.166rem);
}
.oj-datagrid-row-header-label.oj-datagrid-depth-3,
.oj-datagrid-row-end-header-label.oj-datagrid-depth-3,
.oj-datagrid-row-header-cell.oj-datagrid-depth-3,
.oj-datagrid-row-end-header-cell.oj-datagrid-depth-3 {
  width: calc(3 * 4.166rem);
}
.oj-datagrid-row-header-label.oj-datagrid-depth-4,
.oj-datagrid-row-end-header-label.oj-datagrid-depth-4,
.oj-datagrid-row-header-cell.oj-datagrid-depth-4,
.oj-datagrid-row-end-header-cell.oj-datagrid-depth-4 {
  width: calc(4 * 4.166rem);
}
.oj-datagrid-row-header-label.oj-datagrid-depth-5,
.oj-datagrid-row-end-header-label.oj-datagrid-depth-5,
.oj-datagrid-row-header-cell.oj-datagrid-depth-5,
.oj-datagrid-row-end-header-cell.oj-datagrid-depth-5 {
  width: calc(5 * 4.166rem);
}
.oj-datagrid-row-header-label.oj-datagrid-depth-6,
.oj-datagrid-row-end-header-label.oj-datagrid-depth-6,
.oj-datagrid-row-header-cell.oj-datagrid-depth-6,
.oj-datagrid-row-end-header-cell.oj-datagrid-depth-6 {
  width: calc(6 * 4.166rem);
}
.oj-datagrid-row-header-label.oj-datagrid-depth-7,
.oj-datagrid-row-end-header-label.oj-datagrid-depth-7,
.oj-datagrid-row-header-cell.oj-datagrid-depth-7,
.oj-datagrid-row-end-header-cell.oj-datagrid-depth-7 {
  width: calc(7 * 4.166rem);
}

.oj-datagrid-row-header-label,
.oj-datagrid-row-end-header-label {
  justify-content: center;
}

html:not([dir=rtl]) .oj-datagrid-row-end-header-label {
  border-width: 0 0 0 1px;
}
html[dir=rtl] .oj-datagrid-row-end-header-label {
  border-width: 0 1px 0 0;
}

.oj-datagrid-column-end-header-label {
  border-width: 1px 0 0 0;
}

/* Styling on row header cells */
html:not([dir=rtl]) .oj-datagrid-row-header-cell {
  border-width: 0 1px 1px 0;
}
html[dir=rtl] .oj-datagrid-row-header-cell {
  border-width: 0 0 1px 1px;
}

/* Styling on row end header cells */
html:not([dir=rtl]) .oj-datagrid-row-end-header-cell,
html:not([dir=rtl]) .oj-datagrid-column-header-label {
  border-width: 0 0 1px 1px;
}
html[dir=rtl] .oj-datagrid-row-end-header-cell,
html[dir=rtl] .oj-datagrid-column-header-label {
  border-width: 0 1px 1px 0;
}

/* Styling on databody cells */
.oj-datagrid-cell {
  position: absolute;
  box-sizing: border-box;
  border-style: solid;
  overflow: hidden;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}
html[dir=rtl] .oj-datagrid-cell {
  text-align: left;
}
.oj-datagrid-cell {
  font-size: inherit;
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 100%);
  border-color: hsl(203, 2%, 88%);
  padding: 0.5em;
  display: flex;
}
html:not([dir=rtl]) .oj-datagrid-cell {
  border-width: 0 1px 1px 0;
}
html[dir=rtl] .oj-datagrid-cell {
  border-width: 0 0 1px 1px;
}

/* Base styling on databody cell outlines when they are focused/edited */
.oj-datagrid-cell.oj-focus::after,
.oj-datagrid-header-cell.oj-focus::after,
.oj-datagrid-header-label.oj-focus::after,
.oj-datagrid-end-header-cell.oj-focus::after,
.oj-datagrid-cell.oj-selected.oj-datagrid-selected-top::before,
.oj-datagrid-cell.oj-selected.oj-datagrid-selected-bottom::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
}
html:not([dir=rtl]) .oj-datagrid-cell.oj-focus::after,
html:not([dir=rtl]) .oj-datagrid-header-cell.oj-focus::after,
html:not([dir=rtl]) .oj-datagrid-header-label.oj-focus::after,
html:not([dir=rtl]) .oj-datagrid-end-header-cell.oj-focus::after,
html:not([dir=rtl]) .oj-datagrid-cell.oj-selected.oj-datagrid-selected-top::before,
html:not([dir=rtl]) .oj-datagrid-cell.oj-selected.oj-datagrid-selected-bottom::before {
  left: 0;
}
html[dir=rtl] .oj-datagrid-cell.oj-focus::after,
html[dir=rtl] .oj-datagrid-header-cell.oj-focus::after,
html[dir=rtl] .oj-datagrid-header-label.oj-focus::after,
html[dir=rtl] .oj-datagrid-end-header-cell.oj-focus::after,
html[dir=rtl] .oj-datagrid-cell.oj-selected.oj-datagrid-selected-top::before,
html[dir=rtl] .oj-datagrid-cell.oj-selected.oj-datagrid-selected-bottom::before {
  right: 0;
}

/* Styling on databody cell outlines when they can be overwritten, to use a background color don't use the after psuedo class */
.oj-datagrid-editable .oj-datagrid-cell.oj-focus::after,
.oj-hicontrast .oj-datagrid.oj-datagrid-editable.oj-focus .oj-datagrid-cell.oj-focus::after {
  border: 2px solid hsl(203, 2%, 0%);
}

/* Styling on databody cells when they are being edited */
.oj-datagrid-editable .oj-datagrid-cell.oj-datagrid-cell-edit,
.oj-hicontrast .oj-datagrid.oj-datagrid-editable.oj-focus .oj-datagrid-cell.oj-datagrid-cell-edit {
  padding: 0;
}

/* Styling on databody cell outlines when they are being edited, to use a background color don't use the after psuedo class */
.oj-datagrid-editable .oj-datagrid-cell.oj-datagrid-cell-edit::after,
.oj-hicontrast .oj-datagrid.oj-datagrid-editable.oj-focus .oj-datagrid-cell.oj-datagrid-cell-edit::after {
  border: 1px solid hsl(203, 2%, 0%);
}

/* Styling for the selection top and bottom borders */
.oj-datagrid-cell.oj-selected.oj-datagrid-selected-top::before,
.oj-datagrid-cell.oj-selected.oj-datagrid-selected-bottom::before {
  border: 0 solid transparent;
}

.oj-datagrid-cell.oj-selected.oj-datagrid-selected-top::before {
  border-top-width: 2px;
}

.oj-datagrid-cell.oj-selected.oj-datagrid-selected-bottom::before {
  border-bottom-width: 2px;
}

/* A helper class oj-datagrid-editable-no-padding is a helper to provide the appearance of no padding, it has padding to give the border space when in cellNavigation mode*/
html:not([dir=rtl]) .oj-datagrid .oj-datagrid-cell.oj-datagrid-cell-no-padding {
  padding: 1px 0 0 1px;
}
html[dir=rtl] .oj-datagrid .oj-datagrid-cell.oj-datagrid-cell-no-padding {
  padding: 1px 1px 0 0;
}

/* A helper class oj-datagrid-cell-no-padding should have padding 0 otherwise*/
.oj-datagrid-editable .oj-datagrid-cell.oj-datagrid-cell-no-padding {
  padding: 0;
}

/* A helper class oj-datagrid-editable-padding should be appleid to editable components that should maintain padding in edit mode*/
.oj-datagrid-editable .oj-datagrid-cell.oj-datagrid-cell-edit.oj-datagrid-cell-padding {
  padding: 0.5em;
}

/* Styling on form controls stamped inside a datagrid */
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputsearch-input, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input {
  padding: 0 0.5em;
}
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputsearch-input, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-input, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input, .oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input {
  font-size: inherit;
}

.oj-datagrid-cell .oj-checkboxset .oj-checkbox-label {
  justify-content: flex-end;
}

/* Styling on header and cell default text for vertical alignment, add this class name to headers when using a
    knockout template or custom renderer to bottom align text*/
.oj-datagrid-cell-text,
.oj-datagrid-header-cell-text {
  flex: 0 1 auto;
  box-sizing: border-box;
}

/* styling to top align outside grouped headers */
.oj-datagrid-header-grouping > :first-child.oj-datagrid-row-header-cell,
.oj-datagrid-header-grouping > :first-child.oj-datagrid-row-end-header-cell {
  align-items: flex-start;
}

/* Styling on row and column banding */
.oj-datagrid-cell.oj-datagrid-banded {
  background-color: hsl(203, 2%, 98%);
}

/* Styling on read only datagrid cells, oj-readOnly must be applied by the application */
.oj-datagrid-cell.oj-read-only {
  background-color: hsl(203, 2%, 95%);
}

/* Styling on row and cell hover */
.oj-datagrid-cell.oj-hover {
  background-color: hsl(203, 2%, 95%);
}

/* Styling on row and cell selection */
.oj-datagrid.oj-focus .oj-datagrid-cell.oj-selected {
  background-color: rgb(232.23, 243.12, 249.96);
}

/* Styling on row and cell inactive selection (when the grid root is not the focus) */
.oj-datagrid-cell.oj-selected {
  background-color: rgb(232.23, 243.12, 249.96);
}

/* Styling on focused row and cell outlines, to use a background color don't use the after psuedo class */
.oj-datagrid.oj-focus.oj-read-only .oj-datagrid-cell.oj-focus-highlight::after,
.oj-datagrid.oj-focus .oj-datagrid-header-label.oj-focus-highlight::after,
.oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus-highlight::after,
.oj-datagrid.oj-focus .oj-datagrid-end-header-cell.oj-focus-highlight::after {
  top: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}
html:not([dir=rtl]) .oj-datagrid.oj-focus.oj-read-only .oj-datagrid-cell.oj-focus-highlight::after,
html:not([dir=rtl]) .oj-datagrid.oj-focus .oj-datagrid-header-label.oj-focus-highlight::after,
html:not([dir=rtl]) .oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus-highlight::after,
html:not([dir=rtl]) .oj-datagrid.oj-focus .oj-datagrid-end-header-cell.oj-focus-highlight::after {
  left: 1px;
}
html[dir=rtl] .oj-datagrid.oj-focus.oj-read-only .oj-datagrid-cell.oj-focus-highlight::after,
html[dir=rtl] .oj-datagrid.oj-focus .oj-datagrid-header-label.oj-focus-highlight::after,
html[dir=rtl] .oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus-highlight::after,
html[dir=rtl] .oj-datagrid.oj-focus .oj-datagrid-end-header-cell.oj-focus-highlight::after {
  right: 1px;
}

.oj-datagrid-empty-text:focus,
.oj-datagrid-no-data-container:focus {
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

.oj-datagrid.oj-focus .oj-datagrid-column-end-header-cell.oj-focus-highlight::after {
  height: calc(100% - 2px);
}

.oj-datagrid.oj-focus .oj-datagrid-row-end-header-cell.oj-focus-highlight::after {
  width: calc(100% - 2px);
}

/* Styling on focused cell outlines that require and offset for their outline */
.oj-focus-highlight.oj-datagrid-focus-offset::after {
  outline-offset: -2px;
}

/* Styling for the data cell elements in selected state when data grid in high contrast mode. */
.oj-hicontrast .oj-datagrid.oj-focus .oj-datagrid-cell.oj-selected {
  border-width: 3px;
  border-style: double;
}

/* Styling on header containers, used for positioning*/
.oj-datagrid-header,
.oj-datagrid-end-header {
  position: absolute;
  overflow: hidden;
}

/* Styling on scrollers and databody regions, used for positioning*/
.oj-datagrid-scrollers,
.oj-datagrid-databody {
  position: absolute;
  overflow: auto;
}

/* Styling on scroller region, used for positioning*/
.oj-datagrid-scroller {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Styles used to optimize scolling on touch devices used to optimize translate
   3d swiping on touch and engage hardware acceleration, they are not for animation changes*/
.oj-datagrid-scroller-touch {
  transition: 0.5s;
  transition-timing-function: ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
}

/* Styling on header cells when hovered both for rows and columns */
.oj-datagrid-header-label.oj-hover,
.oj-datagrid-header-cell.oj-hover,
.oj-datagrid-end-header-cell.oj-hover {
  background-color: hsl(203, 2%, 88%);
}

/* Styling on the status text, such as fetching data */
.oj-datagrid-status {
  position: absolute;
  display: none;
}

/* Styling for the activity indicator */
.oj-datagrid-loading-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: auto;
}
.oj-datagrid-loading-icon:before {
  content: url("images/spinner_full.gif");
}
.oj-datagrid-loading-icon:before {
  transform: translate(-37.5%, -37.5%) scale(0.25);
}

/* Styling for the empty data grid text, default only used for positioning */
.oj-datagrid-empty-text,
.oj-datagrid-no-data-container {
  box-sizing: border-box;
  position: absolute;
  display: inline-block;
  margin: 1px;
}

/* Styling for the corner between row and column headers and scrollbars */
.oj-datagrid-row-header-spacer,
.oj-datagrid-column-header-spacer,
.oj-datagrid-bottom-corner,
.oj-datagrid-top-corner {
  position: absolute;
  box-sizing: border-box;
  border-color: hsl(203, 2%, 88%);
  border-style: solid;
}

/* Styling for the top corner between headers */
html:not([dir=rtl]) .oj-datagrid-top-corner {
  border-width: 0 1px 1px 0;
}
html[dir=rtl] .oj-datagrid-top-corner {
  border-width: 0 0 1px 1px;
}

/* Styling for the corner between scrollbars if present */
.oj-datagrid-bottom-corner {
  background-color: hsl(203, 2%, 99%);
}
html:not([dir=rtl]) .oj-datagrid-bottom-corner {
  border-width: 1px 0 0 1px;
}
html[dir=rtl] .oj-datagrid-bottom-corner {
  border-width: 1px 1px 0 0;
}

/* Styling for the corner between row headers and horizontal scrollbar */
html:not([dir=rtl]) .oj-datagrid-row-header-spacer {
  border-width: 1px 1px 0 0;
}
html[dir=rtl] .oj-datagrid-row-header-spacer {
  border-width: 1px 0 0 1px;
}

/* Styling for the corner between column headers and vertical scrollbar */
html:not([dir=rtl]) .oj-datagrid-column-header-spacer {
  border-width: 0 0 1px 1px;
}
html[dir=rtl] .oj-datagrid-column-header-spacer {
  border-width: 0 1px 1px 0;
}

/* Styling for the area around the icon */
.oj-datagrid-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 2.5em;
  width: 2em;
  min-width: 2em;
  border-radius: 4px;
}

/* Styling for the gradient for sort icons in the header */
.oj-datagrid-icon-container.oj-enabled {
  background-image: linear-gradient(to right, rgba(247.197, 247.3857, 247.503, 0), hsl(203, 2%, 97%) 40%);
}
html[dir=rtl] .oj-datagrid-icon-container.oj-enabled {
  background-image: linear-gradient(to left, rgba(247.197, 247.3857, 247.503, 0), hsl(203, 2%, 97%) 40%);
}

/* Styling for the gradient for sort icons on hover in the header */
.oj-datagrid-header-cell.oj-hover .oj-datagrid-icon-container {
  background-image: linear-gradient(to right, rgba(223.788, 224.5428, 225.012, 0), hsl(203, 2%, 88%) 40%);
}
html[dir=rtl] .oj-datagrid-header-cell.oj-hover .oj-datagrid-icon-container {
  background-image: linear-gradient(to left, rgba(223.788, 224.5428, 225.012, 0), hsl(203, 2%, 88%) 40%);
}

/* Styling for both the sort icons and click area */
.oj-datagrid-sort-ascending-icon,
.oj-datagrid-sort-descending-icon {
  flex: 0 1 auto;
}

/* Styling for disabled sort icons */
.oj-datagrid-sort-ascending-icon.oj-disabled,
.oj-datagrid-sort-descending-icon.oj-disabled,
.oj-datagrid-sort-default-icon.oj-disabled {
  display: none;
}

/* Styling for the row that is cut during a context menu or CTRL-X cut and paste operation */
.oj-datagrid-cell.oj-datagrid-cut {
  opacity: 0.8;
}

/* Styling row and row headers that are draggable */
.oj-datagrid .oj-draggable {
  cursor: move;
}

/* Styling for the row that is being moved using drag */
.oj-datagrid .oj-drag {
  opacity: 0.8;
  z-index: 1;
}

/* Styling all drop targets in the datagrid when dragging rows*/
.oj-datagrid .oj-drop {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  opacity: 0.8;
}

/* Styling for databody drop targets when dragging rows*/
.oj-datagrid-databody .oj-drop {
  border: 1px solid #c2eaf3;
  background-color: #d9f4fa;
}

/* Styling for header drop targets when dragging rows*/
.oj-datagrid-header .oj-drop,
.oj-datagrid-end-header .oj-drop {
  border: 1px solid #d9f4fa;
  background-color: #c2eaf3;
}

/* Styling for the selection affordance icon on touch devices*/
.oj-datagrid-touch-selection-affordance {
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  z-index: 1;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 2px solid #027bc7;
  background-color: #027bc7;
}

.oj-datagrid-touch-selection-affordance-top-corner-bounded {
  border-end-end-radius: 1.5px;
}

.oj-datagrid-touch-selection-affordance-bottom-corner-bounded {
  border-start-start-radius: 1.5px;
}

.oj-datagrid-touch-selection-affordance-top-column {
  border-start-end-radius: 1.5px;
  border-end-end-radius: 1.5px;
}

.oj-datagrid-touch-selection-affordance-bottom-column {
  border-start-start-radius: 1.5px;
  border-end-start-radius: 1.5px;
}

.oj-datagrid-touch-selection-affordance-top-row {
  border-end-start-radius: 1.5px;
  border-end-end-radius: 1.5px;
}

.oj-datagrid-touch-selection-affordance-bottom-row {
  border-start-start-radius: 1.5px;
  border-start-end-radius: 1.5px;
}

/* Styling for the selection affordance touchable area on touch devices*/
.oj-datagrid-touch-area {
  width: 24px;
  height: 24px;
  position: absolute;
}

.oj-datagrid-popup-header,
.oj-datagrid-popup-content {
  align-self: flex-start;
  padding: 5px;
}

.oj-datagrid-popup-footer {
  align-self: flex-end;
  padding: 5px;
  text-align: right;
}
html[dir=rtl] .oj-datagrid-popup-footer {
  text-align: left;
}

/* Styling for the sort ascending icon */
/* Styling for the sort descending icon */
oj-row-expander:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the widget */
.oj-table .oj-rowexpander {
  display: inline-block;
}

/* Bottom alignment in datagrid */
.oj-datagrid .oj-rowexpander {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

[hidden].oj-rowexpander {
  display: none;
}

/* Size and position the spacer that determines the distance between the icon and cell text */
.oj-rowexpander-icon-spacer {
  min-width: 1.5rem;
  display: inline-block;
}

/* Size and position the touch area */
.oj-rowexpander-touch-area {
  box-sizing: border-box;
  height: 1.5em;
  width: 1.5em;
  padding: 0.25em;
}

/* Data grid specific bottom alignment of touch area */
.oj-datagrid .oj-rowexpander-touch-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
}

/* Table specific centered alignment of touch area */
.oj-table .oj-rowexpander-touch-area {
  margin-bottom: -0.25em;
  margin-top: -0.25em;
}

/* Alignment for the leaf, expand, lazyload and collapse icons */
.oj-rowexpander-leaf-icon,
.oj-rowexpander-expand-icon,
.oj-rowexpander-collapse-icon,
.oj-rowexpander-lazyload-icon {
  outline: none;
  flex: 0 1 auto;
}

/* Focus border for highlighted icons */
.oj-rowexpander-leaf-icon.oj-focus-highlight::before,
.oj-rowexpander-expand-icon.oj-focus-highlight::before,
.oj-rowexpander-collapse-icon.oj-focus-highlight::before,
.oj-rowexpander-lazyload-icon.oj-focus-highlight::before {
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

/* Styling for the load icon */
.oj-rowexpander-lazyload-icon {
  width: 100%;
}

/* Add this class name to your text when stamping a row expander inside of data grid to obtain bottom alignment */
.oj-rowexpander-cell-text {
  flex: 0 1 auto;
  box-sizing: border-box;
}

.oj-rowexpander-indent {
  display: inline-block;
}

/* Set the indentation here depth 1 is one indent level */
*.oj-rowexpander-depth-1 {
  width: calc(1 * 16px);
}

*.oj-rowexpander-depth-2 {
  width: calc(2 * 16px);
}

*.oj-rowexpander-depth-3 {
  width: calc(3 * 16px);
}

*.oj-rowexpander-depth-4 {
  width: calc(4 * 16px);
}

*.oj-rowexpander-depth-5 {
  width: calc(5 * 16px);
}

*.oj-rowexpander-depth-6 {
  width: calc(6 * 16px);
}

*.oj-rowexpander-depth-7 {
  width: calc(7 * 16px);
}

/* Styling to remove the default underlining of hovered links */
.oj-rowexpander a:hover,
.oj-rowexpander a:focus {
  text-decoration: none;
}

/* Styling for the expand icon */
/* Styling for the collapse icon */
oj-list-view:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the listview widget container */
.oj-listview {
  display: block;
  position: relative;
  border-width: 1px 0;
  border-style: solid;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-color: hsl(203, 2%, 88%);
  min-height: 2.28571rem;
}

/* styling for the listview root element and group element */
.oj-listview-element,
.oj-listview-group {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

/* Styling to remove focus ring border on focusable elements */
.oj-listview:focus,
.oj-listview-element:focus,
.oj-listview-expand-icon:focus,
.oj-listview-expanding-icon:focus,
.oj-listview-collapse-icon:focus,
.oj-listview-group-item:focus,
.oj-listview-item-element:focus,
.oj-listview-cell-element:focus {
  outline: none;
}

/* styling to hide the gridline */
.oj-listview.gridline-top-hidden {
  border-top-width: 0;
}

/* styling to hide the gridline */
.oj-listview.gridline-bottom-hidden {
  border-bottom-width: 0;
}

/* Styling for the component div container element. */
.oj-listview-container {
  overflow: auto;
}

/* to enable momentum scrolling on touch devices */
.oj-listview-container-touch {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* remove border top for the first group to prevent double border */
.oj-listview-element > .oj-listview-item-element:first-child .oj-listview-group-item {
  border-top: 0;
}

/* remove border top for the first group or leaf item to prevent double border */
.oj-listview-element > .oj-listview-item:first-child,
.oj-listview:not(.oj-listview-card-layout) .oj-listview-group > .oj-listview-item:first-child,
.oj-listview-element > .oj-listview-item-element:first-child .oj-listview-group-item {
  background-size: 0;
}

/* styling on each list item */
/* note that background image is used for border because we need to ability to position the border.
   using linear-gradient allows us to customize the color of the border */
.oj-listview-item {
  padding: 0.85714rem;
  background-image: linear-gradient(hsl(203, 2%, 88%), hsl(203, 2%, 88%));
  background-position: 0 0;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  box-sizing: border-box;
  border-top: 1px solid transparent;
}

/* styling to hide the gridline */
.oj-listview-gridlines-hidden .oj-listview-item {
  background-size: 0;
}

/* set on item before add or remove animation */
.oj-listview-item-add-remove-transition {
  overflow: hidden;
}

/* styling on list item element */
.oj-listview-item-element {
  line-height: normal;
}

/* Styling on list item hover */
.oj-listview-item.oj-hover,
.oj-listview-card.oj-hover,
.oj-listview-group-item.oj-hover {
  background-color: hsl(203, 2%, 95%);
}

.oj-listview:not(.oj-listview-card-layout) .oj-listview-item.oj-hover,
.oj-listview:not(.oj-listview-card-layout) .oj-listview-item.oj-hover + li.oj-listview-item {
  border-top: 1px solid hsl(203, 2%, 88%);
  background-size: 0;
}

/* Styling on list item selection */
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected,
.oj-listview.oj-focus-ancestor .oj-listview-card.oj-selected,
.oj-listview.oj-focus-ancestor .oj-listview-group-item.oj-selected {
  background-color: rgb(232.23, 243.12, 249.96);
}

.oj-listview.oj-focus-ancestor:not(.oj-listview-card-layout) .oj-listview-item.oj-selected,
.oj-listview.oj-focus-ancestor:not(.oj-listview-card-layout) .oj-listview-item.oj-selected + li.oj-listview-item {
  border-top: 1px solid transparent;
  background-size: 0;
}

/* Styling on list item inactive selection (when the root is not focus) */
.oj-listview-item.oj-selected,
.oj-listview-card.oj-selected,
.oj-listview-group-item.oj-selected {
  background-color: rgb(232.23, 243.12, 249.96);
}

.oj-listview:not(.oj-listview-card-layout) .oj-listview-item.oj-selected,
.oj-listview:not(.oj-listview-card-layout) .oj-listview-item.oj-selected + li.oj-listview-item {
  border-top: 1px solid hsl(203, 2%, 88%);
  background-size: 0;
}

/* Styling on focused list or group item */
.oj-listview-card.oj-focus-highlight,
.oj-listview-item.oj-focus-highlight,
.oj-listview-group-item.oj-focus-highlight {
  position: relative;
}

.oj-listview-card.oj-focus-highlight::after,
.oj-listview-item.oj-focus-highlight::after,
.oj-listview-group-item.oj-focus-highlight::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}
html:not([dir=rtl]) .oj-listview-card.oj-focus-highlight::after,
html:not([dir=rtl]) .oj-listview-item.oj-focus-highlight::after,
html:not([dir=rtl]) .oj-listview-group-item.oj-focus-highlight::after {
  left: 1px;
}
html[dir=rtl] .oj-listview-card.oj-focus-highlight::after,
html[dir=rtl] .oj-listview-item.oj-focus-highlight::after,
html[dir=rtl] .oj-listview-group-item.oj-focus-highlight::after {
  right: 1px;
}
.oj-listview-card.oj-focus-highlight::after,
.oj-listview-item.oj-focus-highlight::after,
.oj-listview-group-item.oj-focus-highlight::after {
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

/* Styling on expand/collapse icon when it has focus highlight */
.oj-listview-expanding-icon.oj-focus-highlight::before,
.oj-listview-expand-icon.oj-focus-highlight::before,
.oj-listview-collapse-icon.oj-focus-highlight::before {
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

/* Styling on focused list item */
.oj-listview.oj-focus-ancestor:not(.oj-listview-card-layout) .oj-listview-item.oj-focus,
.oj-listview.oj-focus-ancestor:not(.oj-listview-card-layout) .oj-listview-item.oj-focus + li.oj-listview-item {
  border-top: 1px solid hsl(203, 2%, 88%);
  background-size: 0;
}

/* Styling for the list item elements in selected state when listview is in high contrast mode. */
.oj-hicontrast .oj-listview-card.oj-selected,
.oj-hicontrast .oj-listview-item.oj-selected,
.oj-hicontrast .oj-listview-group-item.oj-selected {
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  border-color: initial;
}

/* Styling for the list item elements in focus state when listview is in high contrast mode. */
.oj-hicontrast .oj-listview-card.oj-focus-highlight,
.oj-hicontrast .oj-listview-item.oj-focus-highlight,
.oj-hicontrast .oj-listview-group-item.oj-focus-highlight {
  outline-width: 2px;
  outline-style: dotted;
  border-width: 0 1px 1px 0;
  border-style: dotted;
}

/* Styling addition for group items */
.oj-listview-group-item {
  font-weight: normal;
  color: hsla(0, 0%, 0%, 0.85);
  padding: 0.85714rem;
  border: 0 solid hsl(203, 2%, 90%);
  border-width: 1px;
  font-size: 1.28571rem;
  background-color: hsl(203, 2%, 95%);
  opacity: 1;
  box-sizing: border-box;
}
html[dir=rtl] .oj-listview-group-item {
  right: 0;
}

.oj-listview-item-element.oj-expanded .oj-listview-group-item,
.oj-listview-item-element.oj-collapsed .oj-listview-group-item {
  padding: 3px 0;
}

/* Styling for group items when it has no children or in collapsed state */
.oj-listview-item-element.oj-collapsed .oj-listview-group-item,
.oj-listview-group-item.oj-empty {
  border-width: 1px 1px 0;
}

/* Styling for group item element that has focus */
.oj-listview-group-item .oj-focus,
.oj-listview-group-item .oj-selected {
  background-color: transparent;
  background-image: none;
}

/* Styling for group item element that is sticky */
.oj-listview-group-item.oj-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Styling for group item element that is pinned when scrolled */
.oj-listview-group-item.oj-pinned {
  position: absolute;
  z-index: 1;
}

/* expand and collapse animation */
.oj-listview-collapsible-transition {
  overflow: hidden;
}

/* Styling on the status text, such as fetching data */
.oj-listview-status-message {
  position: absolute;
  padding: 0.85714rem;
  display: none;
}

/* Styling for the container of custom no data content */
.oj-listview-no-data-container {
  width: 100%;
  height: 100%;
}

/* Styling for the empty list text */
.oj-listview-no-data-message {
  padding: 0.85714rem;
  background-color: hsl(203, 2%, 100%);
  min-height: 1rem;
}

/* Alignment for the expand and collapse icons */
.oj-listview-expand-icon,
.oj-listview-collapse-icon {
  padding: 9px;
}

/* Styling for the load icon while expanding */
.oj-listview-expanding-icon {
  padding-top: 9px;
  padding-bottom: 9px;
}
html[dir=rtl] .oj-listview-expanding-icon {
  margin-right: 16px;
  margin-left: 9px;
}
html:not([dir=rtl]) .oj-listview-expanding-icon {
  margin-left: 16px;
  margin-right: 9px;
}

/* Styling for item when display mode is card */
.oj-listview-card {
  margin-top: 10px;
}
html[dir=rtl] .oj-listview-card {
  margin-left: 10px;
}
html:not([dir=rtl]) .oj-listview-card {
  margin-right: 10px;
}

/* Styling for group item when display mode is card */
.oj-listview-card-group {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0 0 10px 0;
}

/* Styling for group content when listview is filling the entire width and display mode is card */
html[dir=rtl] .oj-listview.oj-listview-full-width > .oj-listview-element > li > .oj-listview-card-group,
html[dir=rtl] .oj-listview.oj-full-width > .oj-listview-element > li > .oj-listview-card-group {
  padding-left: 0;
  padding-right: 10px;
}
html:not([dir=rtl]) .oj-listview.oj-listview-full-width > .oj-listview-element > li > .oj-listview-card-group,
html:not([dir=rtl]) .oj-listview.oj-full-width > .oj-listview-element > li > .oj-listview-card-group {
  padding-right: 0;
  padding-left: 10px;
}

/* Styling for group item when card layout is used */
.oj-listview-card-layout .oj-listview-group {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Styling for item when card layout is used */
.oj-listview-card-layout li.oj-listview-item {
  width: 240px;
  height: auto;
  border: 1px solid hsl(203, 2%, 88%);
  border-radius: 1px;
  margin-top: 10px;
  margin-bottom: 0;
}
html[dir=rtl] .oj-listview-card-layout li.oj-listview-item {
  margin-right: 0;
  margin-left: 10px;
}
html:not([dir=rtl]) .oj-listview-card-layout li.oj-listview-item {
  margin-left: 0;
  margin-right: 10px;
}
.oj-listview-card-layout li.oj-listview-item {
  background-size: 0;
  box-sizing: border-box;
}

/* Styling for group content when listview is filling the entire width and card layout is used */
/* for now, first level group header or no group headers only */
html[dir=rtl] .oj-listview.oj-listview-full-width.oj-listview-card-layout > .oj-listview-element > li > .oj-listview-group,
html[dir=rtl] .oj-listview.oj-full-width.oj-listview-card-layout > .oj-listview-element > li > .oj-listview-group,
html[dir=rtl] .oj-listview.oj-listview-full-width > .oj-listview-card-layout > li > .oj-listview-group,
html[dir=rtl] .oj-listview.oj-full-width > .oj-listview-card-layout > li > .oj-listview-group {
  margin-left: 0;
  margin-right: 10px;
}
html:not([dir=rtl]) .oj-listview.oj-listview-full-width.oj-listview-card-layout > .oj-listview-element > li > .oj-listview-group,
html:not([dir=rtl]) .oj-listview.oj-full-width.oj-listview-card-layout > .oj-listview-element > li > .oj-listview-group,
html:not([dir=rtl]) .oj-listview.oj-listview-full-width > .oj-listview-card-layout > li > .oj-listview-group,
html:not([dir=rtl]) .oj-listview.oj-full-width > .oj-listview-card-layout > li > .oj-listview-group {
  margin-right: 0;
  margin-left: 10px;
}

/* Styling for group header when listview is filling the entire width */
/* for now, first level group header only */
.oj-listview.oj-listview-full-width > .oj-listview-element > li > .oj-listview-group-item,
.oj-listview.oj-full-width > .oj-listview-element > li > .oj-listview-group-item {
  border-left-style: none;
  border-right-style: none;
}

/* Styling for the drill icon */
.oj-listview-drill-icon {
  width: 16px;
  height: 16px;
  color: hsla(0, 0%, 0%, 0.8);
}

/* Styling for the drill icon when item has focus */
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-focus .oj-listview-drill-icon {
  color: #966486;
}

/* Styling for the drill icon when item is selected */
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected .oj-listview-drill-icon {
  color: #966486;
}

/* Styling for the drill icon when hover over an item */
.oj-listview-item.oj-hover .oj-listview-drill-icon {
  color: #966486;
}

/* Styling for the container of the activity indicator for high watermark scrolling */
.oj-listview-card-layout li.oj-listview-loading-icon-container {
  width: 100%;
  border-style: none;
}

/* Styling for the activity indicator for high watermark scrolling */
.oj-listview-loading-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: auto;
}
.oj-listview-loading-icon:before {
  content: url("images/spinner_full.gif");
}
.oj-listview-loading-icon:before {
  transform: translate(-37.5%, -37.5%) scale(0.25);
}

/* Styling for the affordance icon */
.oj-listview-drag-handle {
  cursor: move;
}

/* Styling for the affordance icon when card layout is used */
.oj-listview-card .oj-listview-drag-handle,
.oj-listview-card-layout .oj-listview-drag-handle {
  background-image: none;
  width: auto;
  height: auto;
  font-size: 16px;
}

/* Styling for the drag image */
.oj-listview-drag-image {
  background-color: transparent;
  position: absolute;
  top: -10000px;
  border: 1px solid transparent;
}

/* Styling for hiding the original item being dragged */
.oj-listview-drag-item {
  display: none;
}

/* Styling item that is draggable (no affordance) */
.oj-listview-item.oj-draggable {
  cursor: move;
}

/* Styling for the item that is being moved using drag */
.oj-listview-item.oj-drag {
  box-shadow: 1px 1px 10px 0 hsla(0, 0%, 0%,0.45);
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

/* Styling all drop targets in the list */
.oj-listview-item.oj-drop {
  background-color: transparent;
}

/* Styling for group item and on empty list as drop targets in the list */
.oj-listview-group-item.oj-drop,
.oj-listview-empty-text.oj-drop {
  background-color: #d9f4fa;
}

/* Styling on drag source when dnd with another component */
.oj-listview-drag-source {
  opacity: 0.3;
}

/* Styling on drop target when dnd with another component */
.oj-listview-drop-target {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #027bc7;
}

/* Styling on drop target above the first item */
.oj-listview-first-drop-target {
  position: absolute;
  width: 100%;
  height: 10px;
  background-color: transparent;
}

/* Styling for an item that is cut during a context menu cut operation */
.oj-listview-cut {
  opacity: 0.8;
}

/* Styling for the placeholder item for the last item gridline */
.oj-listview-gridline-placeholder {
  background-image: linear-gradient(hsl(203, 2%, 88%), hsl(203, 2%, 88%));
  background-position: 0 0;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  height: 1px;
}

/* Styling addition for group items */
.oj-listview-group-item {
  padding-top: 0.5715rem;
  padding-bottom: 0.5715rem;
}

/* Styling for the expand icon */
/* Styling for the collapse icon */
oj-list-item-layout:not(.oj-complete) {
  visibility: hidden;
}

oj-list-item-layout {
  display: block;
}

.oj-listitemlayout-grid {
  display: grid;
  grid-template-areas: "selector leading textslots extra" ".... .... quaternary navigation";
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0.85714rem 0.85714rem;
  min-height: 2.28571rem;
  box-sizing: border-box;
}

.oj-listitemlayout-padding-off > .oj-listitemlayout-grid {
  padding: 0;
}

.oj-listitemlayout-selector {
  grid-area: selector;
  align-self: center;
  margin: -0.875rem;
}

.oj-listitemlayout-leading {
  grid-area: leading;
  align-self: center;
  display: flex;
}

.oj-listitemlayout-textslots {
  grid-area: textslots;
  align-self: center;
}

.oj-listitemlayout-extra {
  grid-area: extra;
  display: grid;
  grid-template-areas: "metadata trailing action";
  align-self: center;
  align-items: center;
}

.oj-listitemlayout-metadata {
  grid-area: metadata;
}

.oj-listitemlayout-trailing {
  grid-area: trailing;
}

.oj-listitemlayout-action {
  grid-area: action;
  margin-top: calc(-1 * 0.85714rem);
  margin-bottom: calc(-1 * 0.85714rem);
}

.oj-listitemlayout-quaternary {
  grid-area: quaternary;
  justify-self: start;
  padding-top: 0.75rem;
}

.oj-listitemlayout-navigation {
  grid-area: navigation;
  justify-self: end;
  padding-top: 0.75rem;
}

.oj-listitemlayout-start-padding {
  padding-inline-start: 1rem;
}

html:not([dir=rtl]) .oj-listitemlayout-horizontal-padding {
  padding-left: 0.85714rem;
}
html[dir=rtl] .oj-listitemlayout-horizontal-padding {
  padding-right: 0.85714rem;
}

.oj-listitemlayout-tertiary {
  padding-top: 0.125rem;
}

oj-indexer:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the indexer widget container */
.oj-indexer {
  display: flex;
  align-items: center;
  width: 22px;
}

/* Styling to remove focus ring border on indexer */
.oj-indexer ul:focus {
  outline: none;
}

/* styling for the indexer root element */
.oj-indexer ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* styling on each item */
.oj-indexer li {
  text-align: center;
  height: 18px;
  width: 22px;
  line-height: 18px;
  color: #000000;
  text-decoration: none;
  font-weight: normal;
  font-size: 0.78571rem;
  vertical-align: middle;
}

/* styling on each item that does not have a corresponding group header */
.oj-indexer li.oj-disabled {
  opacity: 1;
  color: hsla(0, 0%, 0%, 0.38);
}

/* styling on hovered item */
.oj-indexer li:hover {
  text-decoration: underline;
  cursor: default;
}

/* styling on focused item */
.oj-indexer.oj-focus-ancestor li.oj-focus-highlight {
  outline-width: 1px;
  outline-style: dotted;
  outline-offset: -1px;
}

/* styling on each item when indexer is abbreviated */
.oj-indexer.oj-indexer-abbr li {
  height: 14px;
}

/* styling for the ellipsis between two characters */
.oj-indexer-ellipsis:after {
  content: "●";
}

oj-masonry:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the masonry widget container */
.oj-masonry {
  position: relative;
  display: block;
  overflow: auto;
}

/* Styling to remove focus ring border on masonry */
.oj-masonry:focus {
  outline: none;
}

/* styling on each item */
.oj-masonry-item {
  position: absolute;
  border-radius: 0px 10px 10px;
  margin-top: 10px;
  margin-right: 10px;
  width: 240px;
}

.oj-masonry-option-defaults {
  font-family: '{"animation":{"insert":[{"effect":"expand"},"fadeIn"],"remove":[{"effect":"collapse"},"fadeOut"]}}';
}

oj-waterfall-layout:not(.oj-complete) {
  visibility: hidden;
}

/* styling on the root */
oj-waterfall-layout {
  display: block;
  position: relative;
  overflow: auto;
}

/* styling to remove focus ring border on waterfall layout */
.oj-waterfall-layout:focus {
  outline: none;
}

/* styling applied to item where the sole purpose is to determine its position only */
.oj-waterfalllayout-position-only {
  position: absolute;
  visibility: hidden;
}

/* styling on each item */
.oj-waterfalllayout-item {
  position: absolute;
  visibility: hidden;
}

/* suppress focus ring on item */
.oj-waterfalllayout-item-suppress-focus {
  outline: none;
}

/* Styling for skeleton card */
.oj-waterfalllayout-skeleton {
  position: absolute;
  width: 330px;
  height: 396px;
  border: 1px solid hsl(203, 2%, 88%);
  border-radius: 1px;
  box-sizing: border-box;
  padding: 0.85714rem;
}

/* Styling for skeleton card content */
.oj-waterfalllayout-skeleton-content {
  width: 100%;
  height: 100%;
}

/* messaging */
/* --------------------------------------------------------------- */
/* styles the root of the popup component that wraps all messaging content */
/* wraps all messaging content that displays inside popup. */
.oj-messaging-popup-container {
  max-width: 320px;
}

/* separator inside popup container */
.oj-messaging-popup-container hr {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* prevent messaging content from overflowing the container */
.oj-messaging-inline-container {
  overflow: hidden;
}

/* wraps all messaging content that displays inline */
.oj-messaging-inline-container .oj-message {
  padding: 10px;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  margin-top: 0;
  border-top-width: 0;
  border-radius: 0;
}

.oj-checkboxset .oj-messaging-inline-container .oj-message:first-child,
.oj-radioset .oj-messaging-inline-container .oj-message:first-child {
  margin-top: 5px;
  border-top-width: 1px;
}

.oj-switch .oj-messaging-inline-container .oj-message:first-child,
.oj-slider .oj-messaging-inline-container .oj-message:first-child {
  border-top-width: 1px;
}

.oj-switch .oj-messaging-inline-container .oj-message:first-child,
.oj-slider .oj-messaging-inline-container .oj-message:first-child {
  margin-top: 5px;
}

.oj-slider-vertical .oj-messaging-inline-container .oj-message:first-child {
  margin-top: 18px;
}

.oj-messaging-inline-container .oj-message.oj-message-error {
  background-color: #fcf3f4;
  border-color: #f8d3d6;
}

.oj-messaging-inline-container .oj-message.oj-message-warning {
  background-color: #fef5e4;
  border-color: #fce7c1;
}

.oj-messaging-inline-container .oj-message.oj-message-info {
  background-color: #e9f4f8;
  border-color: #cae4ef;
}

.oj-messaging-inline-container .oj-message.oj-message-confirmation {
  background-color: #ecf5e7;
  border-color: #d9eacf;
}

/** 
 * wraps a message block that includes the icon and content inline-blocks
 * 1. prevent wrapping the content inline-block.  
 */
.oj-message {
  display: flex;
  text-align: left;
}
html[dir=rtl] .oj-message {
  text-align: right;
}
.oj-message {
  white-space: nowrap; /* 1 */
}

/* from second to last message blocks inside popup container */
.oj-messaging-popup-container .oj-message:nth-of-type(n+2) {
  padding-top: 20px;
}

/* 
 * wraps the message summary and detail parts 
 */
.oj-message-content {
  display: inline-block;
}

/**
 * message summary text 
 * 1. allow summary text to wrap normally.
 */
.oj-message-content .oj-message-summary {
  white-space: normal;
  vertical-align: top;
}
html:not([dir=rtl]) .oj-message-content .oj-message-summary {
  padding: 0 0 0 10px;
}
html[dir=rtl] .oj-message-content .oj-message-summary {
  padding: 0 10px 0 0;
}

/** 
 * message detail text 
 * 1. allow detail text to wrap normally.
 */
.oj-message-content .oj-message-detail {
  white-space: normal;
}
html:not([dir=rtl]) .oj-message-content .oj-message-detail {
  padding: 7px 0 0 10px;
}
html[dir=rtl] .oj-message-content .oj-message-detail {
  padding: 7px 10px 0 0;
}
.oj-message-content .oj-message-detail {
  word-break: break-word;
}

/**
 * wraps all hints
 */
/**
 * for hint types - validator, converter
 */
/**
 * for hint title 
 * 1. if title isn't the first hint add padding to the top. 
 */
.oj-form-control-hint-title:not(:first-child) {
  padding-top: 20px; /* 1 */
}

.oj-message-status-icon {
  flex: 0 0 auto;
  position: relative;
}

.oj-message-status-icon:before {
  width: 20px; /* Needed for old versions of IE11 */
}

.oj-messaging-popup-option-defaults {
  font-family: '{"animation":{"open":{"effect":"zoomIn","transformOrigin":"#myPosition"},"close":{"effect":"none"}},"messageSummaryOptionDefault":"header"}';
}

.oj-messaging-inline-option-defaults {
  font-family: '{"animation":{"open":{"effect":"expand","startMaxHeight":"#oldHeight"},"close":{"effect":"collapse","endMaxHeight":"#newHeight"}}}';
}

.oj-message-status-icon:before {
  width: 16px; /* Needed for old versions of IE11 */
}

oj-label:not(.oj-complete) {
  visibility: hidden;
}

/* wraps help text that displays inside popup. */
.oj-label-help-popup-container {
  max-width: 320px;
}

.oj-label,
.oj-label-nocomp {
  display: block;
  color: hsla(0, 0%, 0%, 0.6);
  font-size: 1rem;
  font-weight: normal;
  margin-bottom: 0.25em;
}

/* 
  We need to line up a label with plain text but without giving it top margins which 
  we get with oj-label-inline.
 */
.oj-label-nocomp.oj-label-inline.oj-label-for-non-control {
  margin-top: 0;
  vertical-align: baseline;
}

.oj-text-field-label-inside .oj-label,
.oj-form-control-label-inside .oj-label,
.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside .oj-label,
.oj-form-layout .oj-form.oj-enabled .oj-form-control-label-inside .oj-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* When label is block, this wrapper is needed in order 
   to float modifiers (required, help, changed) to the end of the label */
.oj-label-group {
  display: inline-block;
  vertical-align: bottom;
  overflow: inherit;
  text-overflow: inherit;
}

.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label > .oj-label-group,
.oj-text-field-label-inside > .oj-text-field-container .oj-label > .oj-label-group,
.oj-form-control-label-inside > .oj-label > .oj-label-group {
  display: flex;
  flex-direction: row-reverse;
  width: fit-content;
  max-width: 100%;
}

.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label > .oj-label-group > .oj-component-initnode,
.oj-text-field-label-inside > .oj-text-field-container .oj-label > .oj-label-group > .oj-component-initnode,
.oj-form-control-label-inside > .oj-label > .oj-label-group > .oj-component-initnode {
  display: block;
  overflow: inherit;
  text-overflow: inherit;
}

.oj-label-help-icon {
  vertical-align: middle;
}

.oj-label-required-icon {
  vertical-align: top;
}

.oj-label-required-icon,
.oj-label-help-icon {
  float: right;
}
html[dir=rtl] .oj-label-required-icon,
html[dir=rtl] .oj-label-help-icon {
  float: left;
}
html:not([dir=rtl]) .oj-label-required-icon,
html:not([dir=rtl]) .oj-label-help-icon {
  margin-left: 6px;
  margin-right: 0;
}
html[dir=rtl] .oj-label-required-icon,
html[dir=rtl] .oj-label-help-icon {
  margin-right: 6px;
  margin-left: 0;
}

.oj-label-help-icon-anchor {
  text-decoration: none;
  float: right;
}
html[dir=rtl] .oj-label-help-icon-anchor {
  float: left;
}
html:not([dir=rtl]) .oj-label-help-icon-anchor {
  padding-right: 2px;
}
html[dir=rtl] .oj-label-help-icon-anchor {
  padding-left: 2px;
}

.oj-label-help-icon-anchor:hover,
.oj-label-help-icon-anchor:focus {
  text-decoration: none;
}

.oj-label-help-icon-anchor:not(.oj-focus-highlight).oj-focus {
  outline: none;
}

.oj-label.oj-label-nowrap,
.oj-label-nocomp.oj-label-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html:not([dir=rtl]) .oj-label.oj-label-nowrap,
html:not([dir=rtl]) .oj-label-nocomp.oj-label-nowrap {
  padding-right: 0.5em;
}
html[dir=rtl] .oj-label.oj-label-nowrap,
html[dir=rtl] .oj-label-nocomp.oj-label-nowrap {
  padding-left: 0.5em;
}

.oj-label.oj-label-nowrap .oj-label-group {
  overflow: inherit;
  text-overflow: inherit;
}

.oj-label-inline {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.55em;
  box-sizing: border-box;
}
html:not([dir=rtl]) .oj-label-inline {
  padding-right: 0.5em;
}
html[dir=rtl] .oj-label-inline {
  padding-left: 0.5em;
}

.oj-form-non-control-inline {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.55em;
  box-sizing: border-box;
}

.oj-label-inline .oj-label-required-icon,
.oj-label-inline .oj-label-help-icon {
  float: left;
}
html[dir=rtl] .oj-label-inline .oj-label-required-icon,
html[dir=rtl] .oj-label-inline .oj-label-help-icon {
  float: right;
}
html:not([dir=rtl]) .oj-label-inline .oj-label-required-icon,
html:not([dir=rtl]) .oj-label-inline .oj-label-help-icon {
  margin-right: 6px;
  margin-left: 0;
}
html[dir=rtl] .oj-label-inline .oj-label-required-icon,
html[dir=rtl] .oj-label-inline .oj-label-help-icon {
  margin-left: 6px;
  margin-right: 0;
}

.oj-label-inline .oj-label-help-icon-anchor {
  float: left;
}
html[dir=rtl] .oj-label-inline .oj-label-help-icon-anchor {
  float: right;
}

.oj-label-inline.oj-label-inline-top {
  margin-top: 0;
}

/* Deprecated since v8.0.0. JET's Accessibility team discourages access keys */
.oj-label-accesskey {
  text-decoration: underline;
}

.oj-label-required-icon:before {
  content: "*";
}

.oj-label-required-icon {
  color: rgb(1.6, 98.4, 159.2);
  font-size: 1.28571rem;
  font-weight: normal;
  line-height: 1rem;
  font-family: inherit;
  background-color: transparent;
  border-radius: 0;
  height: auto;
  width: auto;
}

/* Component option defaults. */
.oj-form-control-option-defaults {
  font-family: '{"showIndicatorDelay":"250","labelEdge":"provided","readonlyElem":"input","useUserAssistanceOptionDefault":"ignore"}';
}

/* form-control classes */
/* --------------------------------------------------------------- */
html .oj-form-control {
  margin-bottom: 4px;
  vertical-align: middle;
}

/** for all hints */
.oj-form-control-hint {
  color: hsla(0, 0%, 0%, 0.8);
  padding: 0;
  word-wrap: break-word;
}

.oj-form-control-title {
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-form-control,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field {
  height: 100%;
  min-height: 100%;
  margin-bottom: 0;
  max-width: 100%;
  min-width: 100%;
}

.oj-form-control input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px hsl(203, 2%, 99%) inset;
  -webkit-text-fill-color: hsla(0, 0%, 0%, 0.8);
}

.oj-form-control input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.oj-text-field-middle {
  position: relative;
  display: inline-flex;
  flex: 1;
  height: 100%;
}

/* when the label is inside or above, we must set the max-width of the component to
   100%. Otherwise some components like input text, whose max-width is decided by 
   oj-text-field-lg-max-width looks so different from other components like radioset
   which does not have a configured default max width in alta.
*/
.oj-text-field-label-inside.oj-form-control,
.oj-text-field-label-inside.oj-text-field {
  max-width: 100%;
}

/* when the label is inside, set the padding right so that the long labels are truncated
  at the same width as input field
*/
.oj-text-field-label-inside .oj-label {
  max-width: 100%;
}
html:not([dir=rtl]) .oj-text-field-label-inside .oj-label {
  padding-right: calc(10px);
}
html[dir=rtl] .oj-text-field-label-inside .oj-label {
  padding-left: calc(10px);
}
.oj-text-field-label-inside .oj-label {
  box-sizing: border-box;
}

.oj-text-field-label-inside .oj-text-field-input {
  min-height: 2.75rem;
  padding-top: 0.85rem;
}

/* consolidating styles - start
*/
.oj-text-field {
  display: inline-block;
  font-size: 1rem;
}
@media screen and (max-width: 767.9px) {
  .oj-text-field {
    -webkit-text-size-adjust: 115%;
  }
}
.oj-text-field {
  /* use a width of 100% and then max and min width so that when 
      there's less room for the form control it can automatically 
      get smaller instead of overflowing its boundaries */
  max-width: 18em;
  min-width: 8em;
  width: 100%;
  box-sizing: border-box;
}

.oj-form-control-full-width.oj-text-field,
.oj-form-control-full-width .oj-text-field {
  max-width: 100%;
}

.oj-text-field-input {
  outline: 0;
  box-sizing: border-box;
  font-family: inherit;
  border: 0;
  background-color: transparent;
  height: 100%;
}

/* Styling for text-align */
.oj-form-control-text-align-right.oj-text-field .oj-text-field-input,
.oj-form-control-text-align-right .oj-text-field .oj-text-field-input {
  text-align: right;
}

.oj-form-control-text-align-start.oj-text-field .oj-text-field-input,
.oj-form-control-text-align-start .oj-text-field .oj-text-field-input {
  text-align: left;
}
html[dir=rtl] .oj-form-control-text-align-start.oj-text-field .oj-text-field-input,
html[dir=rtl] .oj-form-control-text-align-start .oj-text-field .oj-text-field-input {
  text-align: right;
}

.oj-form-control-text-align-end.oj-text-field .oj-text-field-input,
.oj-form-control-text-align-end .oj-text-field .oj-text-field-input {
  text-align: right;
}
html[dir=rtl] .oj-form-control-text-align-end.oj-text-field .oj-text-field-input,
html[dir=rtl] .oj-form-control-text-align-end .oj-text-field .oj-text-field-input {
  text-align: left;
}

.oj-text-field.oj-read-only .oj-text-field-input {
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
  font-weight: normal;
  padding-left: 0;
  padding-right: 0;
}

/* clears the 'X' from Chrome */
.oj-text-field-input::-webkit-search-decoration,
.oj-text-field-input::-webkit-search-cancel-button,
.oj-text-field-input::-webkit-search-results-button,
.oj-text-field-input::-webkit-search-results-decoration {
  display: none;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-input,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-container {
  color: inherit;
  height: 100%;
  width: 100%;
}
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-input,
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-container {
  text-align: inherit;
}
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-input,
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-container {
  text-align: inherit;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-disabled) .oj-text-field-input,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-disabled) .oj-text-field-container {
  background-color: transparent;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-invalid):not(.oj-warning) .oj-text-field-input,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-invalid):not(.oj-warning) .oj-text-field-container {
  border-width: 0;
}

.oj-text-field-label-inside .oj-text-field-input.oj-hover {
  background-color: transparent;
}

.oj-text-field .oj-text-field-container {
  position: relative;
  box-sizing: border-box;
  border-style: solid;
  border-color: hsl(203, 2%, 90%);
  border-width: 1px 1px 1px 1px;
  border-radius: 2px;
  background-color: hsl(203, 2%, 99%);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 2.28571rem;
}

.oj-text-field.oj-read-only .oj-text-field-container {
  border-style: none;
  border-color: transparent;
  border-width: 0;
  border-radius: 0;
  background-color: transparent;
}

.oj-text-field.oj-invalid .oj-text-field-container,
.oj-text-field.oj-warning .oj-text-field-container {
  border-width: 2px 2px 2px 2px;
  border-style: solid;
}

.oj-text-field.oj-invalid .oj-text-field-container {
  border-color: #e65a66;
}

.oj-text-field.oj-warning .oj-text-field-container {
  border-color: #f8ca75;
}

.oj-text-field.oj-disabled .oj-text-field-container {
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 93%);
}

.oj-text-field-label-inside.oj-text-field .oj-text-field-container {
  min-height: 2.75rem;
}

.oj-text-field-label-inside.oj-text-field .oj-text-field-container .oj-label,
.oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container .oj-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  transition: all 0.25s ease 0.1s;
  pointer-events: none;
}
html:not([dir=rtl]) .oj-text-field-label-inside.oj-text-field .oj-text-field-container .oj-label,
html:not([dir=rtl]) .oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container .oj-label {
  left: 5px;
}
html[dir=rtl] .oj-text-field-label-inside.oj-text-field .oj-text-field-container .oj-label,
html[dir=rtl] .oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container .oj-label {
  right: 5px;
}

.oj-form-control-label-inside.oj-label-value .oj-label[slot=label],
.oj-form-control-label-inside.oj-form-control .oj-label {
  font-size: 0.85714rem;
  font-weight: normal;
  line-height: normal;
}

.oj-text-field-label-inside.oj-text-field.oj-focus .oj-text-field-container .oj-label,
.oj-text-field-label-inside.oj-text-field:not(.oj-has-no-value) .oj-text-field-container .oj-label {
  transition: top 0.25s ease 0.1s, font-weight 0.25s ease 0.1s, font-size 0.25s ease 0.1s;
  font-size: 0.85714rem;
  font-weight: normal;
  line-height: normal;
  top: calc(2.75rem * 25 / 100);
}
html:not([dir=rtl]) .oj-text-field-label-inside.oj-text-field.oj-focus .oj-text-field-container .oj-label,
html:not([dir=rtl]) .oj-text-field-label-inside.oj-text-field:not(.oj-has-no-value) .oj-text-field-container .oj-label {
  left: 5px;
}
html[dir=rtl] .oj-text-field-label-inside.oj-text-field.oj-focus .oj-text-field-container .oj-label,
html[dir=rtl] .oj-text-field-label-inside.oj-text-field:not(.oj-has-no-value) .oj-text-field-container .oj-label {
  right: 5px;
}

.oj-text-field-label-inside.oj-text-field.oj-read-only .oj-text-field-container .oj-label {
  font-size: 0.85714rem;
  font-weight: normal;
  line-height: normal;
  top: calc(2.75rem * 25 / 100);
}
html:not([dir=rtl]) .oj-text-field-label-inside.oj-text-field.oj-read-only .oj-text-field-container .oj-label {
  left: 0;
}
html[dir=rtl] .oj-text-field-label-inside.oj-text-field.oj-read-only .oj-text-field-container .oj-label {
  right: 0;
}

.oj-text-field-label-inside.oj-text-field.oj-disabled:not(.oj-has-no-value) .oj-text-field-container .oj-label {
  transition: none;
  background-color: hsl(203, 2%, 93%);
}

.oj-text-field-label-inside.oj-text-field.oj-textarea .oj-label,
.oj-text-field-label-inside.oj-text-field.oj-textarea.oj-disabled.oj-has-no-value .oj-label {
  top: calc(2.75rem / 2);
}

.oj-text-field-label-inside.oj-text-field.oj-read-only .oj-text-field-container .oj-label {
  transition: none;
  background-color: transparent;
}

.oj-text-field-label-inside .oj-text-field-middle {
  height: 100%;
}

.oj-text-field.oj-text-field-label-inside .oj-text-field-start,
.oj-text-field.oj-text-field-label-inside .oj-text-field-end {
  display: flex;
  justify-content: center;
  align-items: center;
}

html:not([dir=rtl]) .oj-text-field .oj-text-field-start .oj-text-field-start-end-icon {
  margin-left: 5px;
}
html[dir=rtl] .oj-text-field .oj-text-field-start .oj-text-field-start-end-icon {
  margin-right: 5px;
}

html:not([dir=rtl]) .oj-text-field .oj-text-field-end .oj-text-field-start-end-icon {
  margin-right: 5px;
}
html[dir=rtl] .oj-text-field .oj-text-field-end .oj-text-field-start-end-icon {
  margin-left: 5px;
}

.oj-text-field .oj-text-field-start .oj-button,
.oj-text-field .oj-text-field-end .oj-button {
  margin-bottom: 0;
}

html:not([dir=rtl]) .oj-text-field.oj-read-only .oj-text-field-start .oj-text-field-start-end-icon {
  margin-left: 0;
  margin-right: 5px;
}
html[dir=rtl] .oj-text-field.oj-read-only .oj-text-field-start .oj-text-field-start-end-icon {
  margin-right: 0;
  margin-left: 5px;
}

html:not([dir=rtl]) .oj-text-field.oj-read-only .oj-text-field-end .oj-text-field-start-end-icon {
  margin-right: 0;
  margin-left: 5px;
}
html[dir=rtl] .oj-text-field.oj-read-only .oj-text-field-end .oj-text-field-start-end-icon {
  margin-left: 0;
  margin-right: 5px;
}

.oj-text-field.oj-read-only:not(.oj-text-field-label-inline) .oj-text-field-start,
.oj-text-field.oj-read-only:not(.oj-text-field-label-inline) .oj-text-field-end {
  min-height: 2.28571rem;
}

.oj-text-field.oj-disabled .oj-text-field-start-end-icon {
  color: #966486;
}

.oj-text-field-end .oj-component-icon.oj-clickable-icon-nocontext, .oj-text-field-end .oj-clickable-icon-nocontext.oj-popup-tail.oj-popup-tail-simple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: default;
}

.oj-text-field .oj-text-field-end .oj-component-icon.oj-clickable-icon-nocontext:focus, .oj-text-field .oj-text-field-end .oj-clickable-icon-nocontext.oj-popup-tail.oj-popup-tail-simple:focus {
  outline-style: dotted;
  outline-width: 1px;
  outline-offset: 1px;
}

.oj-text-field:not(.oj-focus-highlight) .oj-text-field-end .oj-component-icon.oj-clickable-icon-nocontext:focus, .oj-text-field:not(.oj-focus-highlight) .oj-text-field-end .oj-clickable-icon-nocontext.oj-popup-tail.oj-popup-tail-simple:focus {
  outline: none;
}

.oj-text-field-counter {
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: default;
  font-size: 0.85714rem;
  color: hsla(0, 0%, 0%, 0.38);
}

.oj-required-inline-container {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: inherit;
  line-height: 1.1;
  width: 100%;
}

/* radioset and checkboxset styles */
/* this styles the radio, checkbox, and their labels */
/* --------------------------------------------------------------- */
oj-radioset:not(.oj-complete) {
  visibility: hidden;
}

oj-checkboxset:not(.oj-complete) {
  visibility: hidden;
}

/* App developer should put a span around the input and label, and use this styleclass */
.oj-choice-item,
.oj-choice-row {
  display: flex;
  align-items: center;
  margin: 0;
}

.oj-choice-direction-row .oj-choice-item,
.oj-choice-row-inline {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding-top: 0;
}

.oj-choice-direction-column .oj-radio-label,
.oj-choice-direction-column .oj-checkbox-label,
.oj-checkbox-label-nocomp,
oj-choice-row .oj-radio-label,
.oj-choice-row .oj-checkbox-label,
.oj-choice-row .oj-checkbox-label-nocomp {
  flex: 1 1 auto;
}

.oj-form .oj-checkboxset-single.oj-choice-direction-column .oj-checkbox-label,
.oj-form .oj-checkboxset-single.oj-choice-row .oj-checkbox-label {
  flex: 0 1 auto;
}

.oj-radioset,
.oj-checkboxset {
  display: inline-block;
  box-sizing: border-box;
  max-width: auto;
  width: auto;
}

.oj-radio-label,
.oj-checkbox-label,
.oj-checkbox-label-nocomp {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
  display: inline-block;
  font-weight: normal;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

.oj-radio-label.oj-disabled .oj-radiocheckbox-label-text,
.oj-checkbox-label.oj-disabled .oj-radiocheckbox-label-text,
.oj-checkbox-nocomp[disabled] + .oj-checkbox-label-nocomp {
  color: hsla(0, 0%, 0%, 0.38);
  opacity: 1;
}

.oj-radio-label.oj-selected,
.oj-checkbox-label.oj-selected {
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-radio,
.oj-checkbox,
.oj-checkbox-nocomp {
  display: inline-block;
}

.oj-radioset-wrapper,
.oj-checkboxset-wrapper {
  box-sizing: border-box;
  background-color: transparent;
}

.oj-checkboxset-no-chrome .oj-checkboxset-wrapper,
.oj-radioset-no-chrome .oj-radioset-wrapper {
  background-color: inherit;
}

.oj-radioset-wrapper,
.oj-checkboxset-wrapper {
  border-color: transparent;
  border-style: solid;
  border-width: 0px;
  border-radius: 2px;
}

.oj-checkboxset-no-chrome .oj-checkboxset-wrapper,
.oj-radioset-no-chrome .oj-radioset-wrapper {
  border-width: 0;
}

.oj-choice-direction-row .oj-checkboxset-wrapper,
.oj-choice-direction-row .oj-radioset-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.oj-radioset .oj-choice-item.oj-active,
.oj-checkboxset:not(.oj-checkboxset-single) .oj-choice-item.oj-active,
.oj-radioset .oj-choice-row.oj-active,
.oj-radioset .oj-choice-row-inline.oj-active,
.oj-checkboxset:not(.oj-checkboxset-single) .oj-choice-row.oj-active,
.oj-checkboxset:not(.oj-checkboxset-single).oj-choice-row-inline.oj-active {
  background-color: transparent;
}

.oj-radioset.oj-choice-direction-column .oj-choice-item.oj-active,
.oj-checkboxset:not(.oj-checkboxset-single).oj-choice-direction-column .oj-choice-item.oj-active {
  border-top: 1px solid transparent;
}

.oj-radioset.oj-choice-direction-column .oj-choice-item:first-child,
.oj-checkboxset.oj-choice-direction-column .oj-choice-item:first-child,
.oj-radioset .oj-choice-row:first-child,
.oj-checkboxset .oj-choice-row:first-child {
  border-top: 1px transparent solid;
}

.oj-radioset.oj-choice-direction-column .oj-choice-item,
.oj-checkboxset.oj-choice-direction-column .oj-choice-item,
.oj-radioset .oj-choice-row,
.oj-checkboxset .oj-choice-row {
  border-top: 1px transparent solid;
  padding-top: 0;
}

.oj-radioset.oj-choice-direction-column .oj-choice-item.oj-active + .oj-choice-item,
.oj-checkboxset:not(.oj-checkboxset-single).oj-choice-direction-column .oj-choice-item.oj-active + .oj-choice-item,
.oj-radioset .oj-choice-row.oj-active + .oj-choice-row,
.oj-checkboxset:not(.oj-checkboxset-single) .oj-choice-row.oj-active + .oj-choice-row {
  border-top: 1px solid transparent;
}

.oj-radioset.oj-choice-direction-column .oj-choice-item:last-child.oj-active,
.oj-checkboxset:not(.oj-checkboxset-single).oj-choice-direction-column .oj-choice-item:last-child.oj-active,
.oj-radioset .oj-choice-row:last-child.oj-active,
.oj-checkboxset:not(.oj-checkboxset-single) .oj-choice-row:last-child.oj-active {
  border-bottom: 1px solid transparent;
}

.oj-choice-direction-column .oj-choice-item:last-child,
.oj-choice-row:last-child {
  border-bottom: 1px solid transparent;
}

/*  oj-choice-row and oj-choice-row-inline have been deprecated 
on December 07, 2016 in v3.0.0. Use oj-choice-item instead. See release notes. */
.oj-choice-item,
.oj-choice-row,
.oj-choice-row-inline {
  position: relative;
}

.oj-choice-item {
  /**
   * In Chrome 103 - the relative/absolute positioning inside a multi-col layout is broken
   * https://bugs.chromium.org/p/chromium/issues/detail?id=1338997
   * This is to workaround this bug and make things render correctly for chromium browsers.
   * This bug will be fixed in 104 and later.
   */
  overflow: hidden;
}

.oj-choice-item::before,
.oj-choice-row::before,
.oj-choice-row-inline::before {
  content: "";
  display: inline-block;
  visibility: hidden;
  min-height: 1.9rem;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-choice-item::before {
  min-height: 100%;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-checkboxset-single.oj-choice-direction-column .oj-choice-item,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-checkboxset-single .oj-checkboxset-wrapper,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-checkboxset-single .oj-choice-row {
  margin-bottom: 0;
  height: 100%;
  min-height: 100%;
}

html:not([dir=rtl]) .oj-radiocheckbox-label-text,
html:not([dir=rtl]) .oj-checkbox-label-nocomp {
  padding: 0 0 0 0;
}
html[dir=rtl] .oj-radiocheckbox-label-text,
html[dir=rtl] .oj-checkbox-label-nocomp {
  padding: 0 0 0 0;
}

html:not([dir=rtl]) .oj-checkboxset-input-end .oj-radiocheckbox-label-text,
html:not([dir=rtl]) .oj-checkboxset-input-end .oj-checkbox-label-nocomp,
html:not([dir=rtl]) .oj-radioset-input-end .oj-radiocheckbox-label-text {
  padding: 0 0 0 0;
}
html[dir=rtl] .oj-checkboxset-input-end .oj-radiocheckbox-label-text,
html[dir=rtl] .oj-checkboxset-input-end .oj-checkbox-label-nocomp,
html[dir=rtl] .oj-radioset-input-end .oj-radiocheckbox-label-text {
  padding: 0 0 0 0;
}

html:not([dir=rtl]) .oj-checkboxset-input-start .oj-radiocheckbox-label-text,
html:not([dir=rtl]) .oj-checkboxset-input-start .oj-checkbox-label-nocomp,
html:not([dir=rtl]) .oj-radioset-input-start .oj-radiocheckbox-label-text {
  padding: 0 0 0 0;
}
html[dir=rtl] .oj-checkboxset-input-start .oj-radiocheckbox-label-text,
html[dir=rtl] .oj-checkboxset-input-start .oj-checkbox-label-nocomp,
html[dir=rtl] .oj-radioset-input-start .oj-radiocheckbox-label-text {
  padding: 0 0 0 0;
}

.oj-radioset-input-end .oj-radiocheckbox-icon,
.oj-checkboxset-input-end .oj-radiocheckbox-icon {
  order: 1;
}

.oj-radioset-input-start .oj-radio-label,
.oj-checkboxset-input-start .oj-checkbox-label {
  order: 1;
}

.oj-label-inline.oj-radioset-label,
.oj-label-inline.oj-checkboxset-label {
  margin-top: calc(1.9rem / 5);
}

.oj-radio,
.oj-checkbox {
  opacity: 0;
  width: 100%;
  position: absolute;
  top: 0;
  height: 90%;
  z-index: 1;
}

html:not([dir=rtl]) .oj-radio,
html:not([dir=rtl]) .oj-checkbox {
  left: 0;
}
html[dir=rtl] .oj-radio,
html[dir=rtl] .oj-checkbox {
  right: 0;
  left: auto;
}

html:not([dir=rtl]) .oj-radioset-input-start .oj-radio,
html:not([dir=rtl]) .oj-checkboxset-input-start .oj-checkbox {
  left: 0;
}
html[dir=rtl] .oj-radioset-input-start .oj-radio,
html[dir=rtl] .oj-checkboxset-input-start .oj-checkbox {
  right: 0;
  left: auto;
}

html:not([dir=rtl]) .oj-radioset-input-end .oj-radio,
html:not([dir=rtl]) .oj-checkboxset-input-end .oj-checkbox {
  right: 0;
  left: auto;
}
html[dir=rtl] .oj-radioset-input-end .oj-radio,
html[dir=rtl] .oj-checkboxset-input-end .oj-checkbox {
  left: 0;
}

.oj-choice-item.oj-focus-highlight .oj-radiocheckbox-icon,
.oj-choice-row.oj-focus-highlight .oj-radiocheckbox-icon,
.oj-choice-row-inline.oj-focus-highlight .oj-radiocheckbox-icon {
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

html:not([dir=rtl]) .oj-radio-label,
html:not([dir=rtl]) .oj-checkbox-label,
html:not([dir=rtl]) .oj-checkbox-label-nocomp {
  text-align: left;
}
html[dir=rtl] .oj-radio-label,
html[dir=rtl] .oj-checkbox-label,
html[dir=rtl] .oj-checkbox-label-nocomp {
  text-align: right;
}

html:not([dir=rtl]) .oj-choice-direction-row .oj-choice-item:not(:last-child) > .oj-radio-label,
html:not([dir=rtl]) .oj-choice-direction-row .oj-choice-item:not(:last-child) > .oj-checkbox-label,
html:not([dir=rtl]) .oj-choice-direction-row .oj-choice-item:not(:last-child) > .oj-checkbox-label-nocomp {
  margin-right: 2rem;
}
html[dir=rtl] .oj-choice-direction-row .oj-choice-item:not(:last-child) > .oj-radio-label,
html[dir=rtl] .oj-choice-direction-row .oj-choice-item:not(:last-child) > .oj-checkbox-label,
html[dir=rtl] .oj-choice-direction-row .oj-choice-item:not(:last-child) > .oj-checkbox-label-nocomp {
  margin-left: 2rem;
}

html:not([dir=rtl]) .oj-choice-direction-row.oj-radioset-input-start .oj-choice-item:not(:last-child) > .oj-radio-label,
html:not([dir=rtl]) .oj-choice-direction-row.oj-checkboxset-input-start .oj-choice-item:not(:last-child) > .oj-checkbox-label,
html:not([dir=rtl]) .oj-choice-direction-row.oj-checkboxset-input-start .oj-choice-item:not(:last-child) > .oj-checkbox-label-nocomp {
  margin-right: 2rem;
}
html[dir=rtl] .oj-choice-direction-row.oj-radioset-input-start .oj-choice-item:not(:last-child) > .oj-radio-label,
html[dir=rtl] .oj-choice-direction-row.oj-checkboxset-input-start .oj-choice-item:not(:last-child) > .oj-checkbox-label,
html[dir=rtl] .oj-choice-direction-row.oj-checkboxset-input-start .oj-choice-item:not(:last-child) > .oj-checkbox-label-nocomp {
  margin-left: 2rem;
}

html:not([dir=rtl]) .oj-choice-direction-row.oj-radioset-input-end .oj-choice-item:not(:first-child) > .oj-radio-label,
html:not([dir=rtl]) .oj-choice-direction-row.oj-checkboxset-input-end .oj-choice-item:not(:first-child) > .oj-checkbox-label,
html:not([dir=rtl]) .oj-choice-direction-row.oj-checkboxset-input-end .oj-choice-item:not(:first-child) > .oj-checkbox-label-nocomp {
  margin-left: 2rem;
}
html[dir=rtl] .oj-choice-direction-row.oj-radioset-input-end .oj-choice-item:not(:first-child) > .oj-radio-label,
html[dir=rtl] .oj-choice-direction-row.oj-checkboxset-input-end .oj-choice-item:not(:first-child) > .oj-checkbox-label,
html[dir=rtl] .oj-choice-direction-row.oj-checkboxset-input-end .oj-choice-item:not(:first-child) > .oj-checkbox-label-nocomp {
  margin-right: 2rem;
}

html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-checkbox-label {
  text-align: inherit;
}
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-checkbox-label {
  text-align: inherit;
}

.oj-choice-direction-row .oj-choice-item,
.oj-choice-row-inline {
  border-top-width: 0;
}

.oj-radio-label,
.oj-checkbox-label {
  height: 100%;
  order: 1;
}

.oj-form .oj-checkboxset-single .oj-choice-item,
.oj-form .oj-checkboxset-single .oj-choice-row {
  justify-content: flex-start;
}

.oj-form .oj-checkboxset-single .oj-radiocheckbox-label-text {
  flex: 0 1 auto;
}

.oj-radiocheckbox-icon {
  box-sizing: border-box;
  background-repeat: no-repeat;
  flex: 0 0 auto;
  order: 0;
}

html:not([dir=rtl]) .oj-radiocheckbox-icon {
  margin: 0 0.6rem 0 0;
}
html[dir=rtl] .oj-radiocheckbox-icon {
  margin: 0 0 0 0.6rem;
}

html:not([dir=rtl]) .oj-radioset-input-start .oj-radiocheckbox-icon,
html:not([dir=rtl]) .oj-checkboxset-input-start .oj-radiocheckbox-icon {
  margin: 0 0.6rem 0 0;
}
html[dir=rtl] .oj-radioset-input-start .oj-radiocheckbox-icon,
html[dir=rtl] .oj-checkboxset-input-start .oj-radiocheckbox-icon {
  margin: 0 0 0 0.6rem;
}

html:not([dir=rtl]) .oj-radioset-input-end .oj-radiocheckbox-icon,
html:not([dir=rtl]) .oj-checkboxset-input-end .oj-radiocheckbox-icon {
  margin: 0 0 0 0.6rem;
}
html[dir=rtl] .oj-radioset-input-end .oj-radiocheckbox-icon,
html[dir=rtl] .oj-checkboxset-input-end .oj-radiocheckbox-icon {
  margin: 0 0.6rem 0 0;
}

.oj-radioset-input-start .oj-radio-label,
.oj-checkboxset-input-start .oj-checkbox-label,
.oj-radioset-input-end .oj-radiocheckbox-icon,
.oj-checkboxset-input-end .oj-radiocheckbox-icon {
  order: 1;
}

.oj-radioset-input-start .oj-radiocheckbox-icon,
.oj-checkboxset-input-start .oj-radiocheckbox-icon,
.oj-radioset-input-end .oj-radio-label,
.oj-checkboxset-input-end .oj-checkbox-label {
  order: 0;
}

.oj-radioset.oj-invalid .oj-radioset-wrapper,
.oj-checkboxset.oj-invalid .oj-checkboxset-wrapper {
  border-width: 2px 2px 2px 2px;
  border-style: solid;
  border-color: #e65a66;
}

.oj-radioset.oj-warning .oj-radioset-wrapper,
.oj-checkboxset.oj-warning .oj-checkboxset-wrapper {
  border-width: 2px 2px 2px 2px;
  border-style: solid;
  border-color: #f8ca75;
}

.oj-radioset.oj-invalid .oj-radioset-wrapper,
.oj-checkboxset.oj-invalid .oj-checkboxset-wrapper,
.oj-radioset.oj-warning .oj-radioset-wrapper,
.oj-checkboxset.oj-warning .oj-checkboxset-wrapper {
  padding: 0.3rem 0.6rem 0.3rem 0.6rem;
}

html:not([dir=rtl]) .oj-choice-direction-row.oj-radioset-input-start .oj-choice-item:not(:first-child) > .oj-radio-label,
html:not([dir=rtl]) .oj-choice-direction-row.oj-checkboxset-input-start .oj-choice-item:not(:first-child) > .oj-checkbox-label,
html:not([dir=rtl]) .oj-choice-direction-row.oj-checkboxset-input-start .oj-choice-item:not(:first-child) > .oj-checkbox-label-nocomp {
  margin-left: 0;
}
html[dir=rtl] .oj-choice-direction-row.oj-radioset-input-start .oj-choice-item:not(:first-child) > .oj-radio-label,
html[dir=rtl] .oj-choice-direction-row.oj-checkboxset-input-start .oj-choice-item:not(:first-child) > .oj-checkbox-label,
html[dir=rtl] .oj-choice-direction-row.oj-checkboxset-input-start .oj-choice-item:not(:first-child) > .oj-checkbox-label-nocomp {
  margin-right: 0;
}

html:not([dir=rtl]) .oj-choice-direction-row.oj-radioset-input-end .oj-choice-item:not(:last-child) > .oj-radio-label,
html:not([dir=rtl]) .oj-choice-direction-row.oj-checkboxset-input-end .oj-choice-item:not(:last-child) > .oj-checkbox-label,
html:not([dir=rtl]) .oj-choice-direction-row.oj-checkboxset-input-end .oj-choice-item:not(:last-child) > .oj-checkbox-label-nocomp {
  margin-right: 0;
}
html[dir=rtl] .oj-choice-direction-row.oj-radioset-input-end .oj-choice-item:not(:last-child) > .oj-radio-label,
html[dir=rtl] .oj-choice-direction-row.oj-checkboxset-input-end .oj-choice-item:not(:last-child) > .oj-checkbox-label,
html[dir=rtl] .oj-choice-direction-row.oj-checkboxset-input-end .oj-choice-item:not(:last-child) > .oj-checkbox-label-nocomp {
  margin-left: 0;
}

/* Send to the client the renderInputAs variable value  */
.oj-radioset-option-defaults {
  font-family: '{"renderInputAs":"backgroundImage"}';
}

.oj-checkboxset-option-defaults {
  font-family: '{"renderInputAs":"backgroundImage"}';
}

oj-selector:not(.oj-complete) {
  visibility: hidden;
}

.oj-selector:hover .oj-selector-wrapper:not(.oj-selected) {
  width: 16px;
  height: 16px;
  margin: 10px;
}

.oj-selector:hover .oj-selector-wrapper.oj-selected {
  width: 16px;
  height: 16px;
  margin: 10px;
}

.oj-selector {
  width: calc(2 * 10px + 16px);
  height: calc(2 * 10px + 16px);
  display: block;
}

.oj-selector .oj-selector-wrapper {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 10px;
}

.oj-selector .oj-selector-wrapper .oj-selectorbox {
  width: calc(2 * 10px + 16px);
  height: calc(2 * 10px + 16px);
  opacity: 0;
  margin: calc(-1 * 10px);
}

oj-stream-list:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the stream list widget container */
.oj-streamlist {
  display: block;
  overflow: auto;
}

.oj-streamlist-option-defaults {
  font-family: '{"showIndicatorDelay":"250"}';
}

.oj-dvtbase {
  display: block;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  animation-duration: 0.5s;
}

.oj-dvtbase svg {
  overflow: hidden;
}

.oj-dvtbase:focus {
  outline: none;
}

.oj-dvt-category1 {
  color: #237bb1;
}

.oj-dvt-category2 {
  color: #68c182;
}

.oj-dvt-category3 {
  color: #fad55c;
}

.oj-dvt-category4 {
  color: #ed6647;
}

.oj-dvt-category5 {
  color: #8561c8;
}

.oj-dvt-category6 {
  color: #6ddbdb;
}

.oj-dvt-category7 {
  color: #ffb54d;
}

.oj-dvt-category8 {
  color: #e371b2;
}

.oj-dvt-category9 {
  color: #47bdef;
}

.oj-dvt-category10 {
  color: #a2bf39;
}

.oj-dvt-category11 {
  color: #a75dba;
}

.oj-dvt-category12 {
  color: #f7f37b;
}

.oj-dvt-tooltip {
  border-style: solid;
  border-width: 1px;
  padding: 2px;
  background-color: hsl(203, 2%, 99%);
  color: hsla(0, 0%, 0%, 0.8);
  border-color: hsl(203, 2%, 0%);
  font-size: 1rem;
}

.oj-dvt-datatip {
  padding: 2px;
  border-style: solid;
  border-width: 2px;
  background-color: hsl(203, 2%, 99%);
  color: hsla(0, 0%, 0%, 0.8);
  border-radius: 1px;
  box-shadow: 1px 1px 3px 0 hsla(0, 0%, 0%,0.35);
  font-size: 0.85714rem;
}

.oj-dvt-datatip-table {
  border-collapse: separate;
  border-spacing: 2px;
  overflow: hidden;
  display: block;
}

.oj-dvt-datatip-label {
  font-size: 0.85714rem;
  color: hsla(0, 0%, 0%, 0.6);
  padding: 0px 2px;
  white-space: nowrap;
}
html:not([dir=rtl]) .oj-dvt-datatip-label {
  text-align: right;
}
html[dir=rtl] .oj-dvt-datatip-label {
  text-align: left;
}

.oj-dvt-datatip-value {
  font-size: 0.85714rem;
  color: hsl(203, 2%, 20%);
  padding: 0px 2px;
}
html:not([dir=rtl]) .oj-dvt-datatip-value {
  text-align: left;
}
html[dir=rtl] .oj-dvt-datatip-value {
  text-align: right;
}

oj-legend:not(.oj-complete) {
  visibility: hidden;
}

oj-legend {
  display: block;
}

.oj-legend {
  font-size: 0.85714rem;
  color: hsla(0, 0%, 0%, 0.8);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.oj-legend-title {
  font-size: 0.85714rem;
}

.oj-legend-section-title {
  font-size: 0.85714rem;
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-legend-title {
  color: hsla(0, 0%, 0%, 0.55);
}

.oj-legend-section-title {
  color: hsla(0, 0%, 0%, 0.55);
}

.oj-dvt-no-data-message {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 0.85714rem;
}

.oj-dvt-icon {
  stroke: none;
}

.oj-dvt-button-borderless .oj-dvt-button-background {
  stroke: none;
  fill: transparent;
}

.oj-dvt-button-borderless {
  stroke: none;
  fill: none;
}

.oj-dvt-button-borderless .oj-dvt-icon {
  fill: hsla(0, 0%, 0%, 0.8);
}

.oj-dvt-button-borderless.oj-hover .oj-dvt-icon {
  fill: #966486;
}

.oj-dvt-button-borderless.oj-active .oj-dvt-icon {
  fill: #966486;
}

.oj-dvt-button-borderless.oj-disabled .oj-dvt-icon {
  fill: #966486;
  opacity: 1;
}

.oj-dvt-button-outlined .oj-dvt-button-background {
  stroke: none;
  fill: hsl(203, 2%, 100%);
}

.oj-dvt-button-outlined {
  stroke: #966486;
  fill: none;
}

.oj-dvt-button-outlined.oj-hover {
  stroke: #966486;
  fill: hsl(203, 2%, 97%);
}

.oj-dvt-button-outlined.oj-active {
  stroke: #966486;
  fill: #966486;
}

.oj-dvt-button-outlined.oj-disabled {
  stroke: hsl(203, 2%, 80%);
}

.oj-dvt-button-outlined.oj-selected {
  stroke: #966486;
  fill: #966486;
}

.oj-dvt-button-outlined.oj-selected.oj-hover {
  stroke: #027bc7;
  fill: #966486;
}

.oj-dvt-button-outlined .oj-dvt-icon {
  fill: hsla(0, 0%, 0%, 0.8);
}

.oj-dvt-button-outlined.oj-hover .oj-dvt-icon {
  fill: #966486;
}

.oj-dvt-button-outlined.oj-active .oj-dvt-icon {
  fill: hsl(203, 2%, 100%);
}

.oj-dvt-button-outlined.oj-disabled .oj-dvt-icon {
  fill: #966486;
}

.oj-dvt-button-outlined.oj-selected .oj-dvt-icon {
  fill: hsl(203, 2%, 100%);
}

.oj-dvt-button-outlined.oj-selected.oj-hover .oj-dvt-icon {
  fill: #966486;
}

.oj-dvt-marquee {
  fill: rgba(255, 255, 255, 0.4);
  stroke: #0572ce;
}

.oj-dvt-marquee-inner-area {
  fill: transparent;
}

oj-chart:not(.oj-complete) {
  visibility: hidden;
}

oj-chart {
  display: block;
}

.oj-chart {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 400px;
  height: 300px;
}

.oj-chart-data-label {
  font-size: 0.85714rem;
  color: #333333;
}

.oj-chart-data-cursor-line {
  color: hsla(0, 0%, 0%, 0.8);
  width: 2px;
}

.oj-chart-data-cursor-outer-line {
  stroke: transparent;
  stroke-width: 0px;
}

.oj-chart-stock-falling {
  background-color: #ed6647;
}

.oj-chart-stock-range {
  background-color: hsl(203, 2%, 78%);
}

.oj-chart-stock-rising {
  background-color: hsl(203, 2%, 45%);
}

.oj-chart-stack-label {
  font-size: 0.85714rem;
  font-weight: bold;
}

.oj-chart-pie-center-label,
.oj-chart-xaxis-title,
.oj-chart-yaxis-title,
.oj-chart-y2axis-title {
  font-size: 1rem;
  color: hsla(0, 0%, 0%, 0.55);
}

.oj-chart-xaxis-tick-label,
.oj-chart-yaxis-tick-label,
.oj-chart-y2axis-tick-label {
  font-size: 0.85714rem;
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-chart-polar-axis-tick-label-outside {
  fill: rgb(255, 255, 255);
}

.oj-chart-polar-axis-tick-label-inside {
  fill: rgba(255, 255, 255, 0.6);
}

oj-spark-chart:not(.oj-complete) {
  visibility: hidden;
}

oj-spark-chart {
  display: block;
}

.oj-sparkchart {
  width: 100px;
  height: 18px;
}

.oj-sparkchart.oj-focus-highlight {
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

.oj-spark-chart-item {
  color: #267db3;
}

.oj-chart-animation-down {
  fill: #ff3300;
}

.oj-chart-animation-up {
  fill: #0099ff;
}

.oj-chart-animation-marker {
  fill: #ffff2b;
}

.oj-chart .oj-active-drop {
  fill: #d9f4fa;
}

.oj-chart-reference-object-area {
  color: #333333;
}

.oj-chart-reference-object-line {
  width: 1px;
  color: #333333;
}

.oj-chart-reference-object-inner-line {
  stroke: transparent;
  stroke-width: 0px;
}

oj-diagram:not(.oj-complete) {
  visibility: hidden;
}

oj-diagram {
  display: block;
}

.oj-diagram {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  height: 400px;
}

.oj-diagram-node.oj-hover {
  border-top-color: hsl(203, 2%, 70%);
  border-bottom-color: hsl(203, 2%, 100%);
}

.oj-diagram-node.oj-selected {
  border-color: hsl(203, 2%, 0%);
}

.oj-diagram-node-label {
  font-size: 1rem;
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-diagram-link {
  color: hsl(203, 2%, 70%);
  padding: 10px;
}

.oj-diagram-link.oj-hover {
  border-top-color: hsl(203, 2%, 70%);
  border-bottom-color: hsl(203, 2%, 100%);
}

.oj-diagram-link.oj-selected {
  border-color: hsl(203, 2%, 0%);
}

.oj-diagram-link-label {
  font-size: 1rem;
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-diagram .oj-active-drop {
  fill: #d9f4fa;
  fill-opacity: 0.75;
}

.oj-diagram .oj-invalid-drop {
  cursor: no-drop;
}

.oj-diagram-node.oj-active-drop {
  fill: #d9f4fa;
  fill-opacity: 0.75;
}

.oj-diagram-node.oj-invalid-drop {
  cursor: no-drop;
}

.oj-diagram-link.oj-active-drop {
  stroke: #d9f4fa;
  stroke-opacity: 0.75;
}

.oj-diagram-link.oj-invalid-drop {
  cursor: no-drop;
}

.oj-diagram-overview {
  background-color: hsl(203, 2%, 90%);
  padding: 0px;
}

.oj-diagram-overview-content {
  padding: 10px;
}

.oj-diagram-overview-viewport {
  background-color: hsl(203, 2%, 100%);
  border-color: hsl(203, 2%, 30%);
}

.oj-diagram-overview-node {
  fill: hsl(203, 2%, 30%);
}

.oj-diagram-overview-container-node {
  fill: hsl(203, 2%, 30%);
  fill-opacity: 0.25;
}

oj-gantt:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the gantt widget */
.oj-gantt {
  animation-duration: 0.5s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}

/* Styling for the container (around time axis and databody) */
.oj-gantt-container {
  fill: hsl(203, 2%, 99%);
  stroke: hsl(203, 2%, 88%);
  stroke-width: 2px;
}

/* Styling for the empty text */
.oj-gantt-no-data-message {
  fill: hsla(0, 0%, 0%, 0.8);
  font-size: 0.85714rem;
}

/* Styling for horizontal grid lines */
.oj-gantt-horizontal-gridline {
  stroke: hsl(203, 2%, 88%);
  stroke-width: 1px;
}

/* Styling for vertical grid lines */
.oj-gantt-major-vertical-gridline,
.oj-gantt-minor-vertical-gridline {
  stroke: hsl(203, 2%, 78%);
  stroke-dasharray: 5, 5;
}

/* Styling for all rows */
.oj-gantt-row {
  fill: hsl(203, 2%, 100%);
  padding-top: 0.3571rem;
  padding-bottom: 0.3571rem;
}

/* Styling for row focus highlight */
.oj-gantt-row.oj-focus-highlight {
  stroke-width: 1px;
  stroke-dasharray: 1 1;
  stroke: hsl(0, 0%, 0%);
}

/* Styling related to rows as drop targets */
.oj-gantt-row.oj-active-drop {
  fill: #d9f4fa;
}

/* Styling for all row labels */
.oj-gantt-row-label {
  color: hsla(0, 0%, 0%, 0.85);
  font-size: 1rem;
  padding-left: 0.5714rem;
  padding-right: 0.5714rem;
}

/* Styling for all tasks */
.oj-gantt-task {
  fill: #237bb1;
  filter: url("#ojGanttTaskTintFilter");
  height: 1.5714rem;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}

/* Styling for all tasks when hover */
.oj-gantt-task.oj-hover {
  fill: none;
  filter: none;
  stroke-width: 2;
}

/* Styling for all tasks when focus */
.oj-gantt-task.oj-focus {
  fill: none;
  filter: none;
  stroke-width: 2;
}

/* Styling for all tasks when selected */
.oj-gantt-task.oj-selected {
  fill: none;
  filter: none;
  stroke: hsl(203, 2%, 0%);
}

/* Styling for all task bars */
.oj-gantt-task-bar {
  fill: #237bb1;
}

/* Styling for all milestone tasks */
.oj-gantt-task-milestone {
  fill: hsl(203, 2%, 45%);
}

/* Styling for all summary tasks */
.oj-gantt-task-summary {
  fill: hsla(0, 0%, 0%, 0.8);
  filter: none;
}

/* Styling related to interactivity */
.oj-gantt-task.oj-draggable,
.oj-gantt-task-label.oj-draggable,
.oj-gantt-task-progress.oj-draggable {
  cursor: move;
}

.oj-gantt-task-drag-image {
  fill-opacity: 0;
  stroke: hsl(203, 2%, 20%);
  stroke-width: 1px;
  stroke-dasharray: 5, 2;
}

.oj-gantt-task-resize-handle {
  opacity: 0;
}

.oj-gantt-task-resize-handle.oj-draggable {
  cursor: ew-resize;
}

/* Styling for all task labels */
.oj-gantt-task-label {
  color: hsl(0, 0%, 0%);
  font-size: 0.85714rem;
  margin-left: 0.3571rem;
  margin-right: 0.3571rem;
}

/* Styling for all task progress indicators */
.oj-gantt-task-progress {
  fill: #237bb1;
  border-radius: 0;
}

/* Styling for all task overtime bars */
.oj-gantt-task-overtime {
  fill: hsl(203, 2%, 45%);
}

/* Styling for all task downtime bars */
.oj-gantt-task-downtime {
  fill: hsl(203, 2%, 45%);
  height: 0.25rem;
}

/* Styling for all task attribute bars */
.oj-gantt-task-attribute {
  fill: #47bdef;
  height: 0.313rem;
}

/* Styling for all baseline */
.oj-gantt-baseline {
  fill: #237bb1;
  filter: url("#ojGanttTaskShadeFilter");
  border-radius: 0;
}

/* Styling for all baseline bars */
.oj-gantt-baseline-bar {
  fill: #237bb1;
  height: 0.4286rem;
  margin-top: 0px;
}

/* Styling for all milestone baseline */
.oj-gantt-baseline-milestone {
  fill: hsl(203, 2%, 45%);
}

/* Styling for the major time axis */
.oj-gantt-major-axis {
  fill: hsl(203, 2%, 97%);
  stroke: hsl(203, 2%, 88%);
  height: 1.6429rem;
}

/* Styling for the major time axis labels */
.oj-gantt-major-axis-label {
  color: hsla(0, 0%, 0%, 0.85);
  font-size: 1rem;
  font-weight: 500;
}

/* Styling for the major time axis separators */
.oj-gantt-major-axis-separator {
  stroke: hsl(203, 2%, 88%);
}

/* Styling for the minor time axis */
.oj-gantt-minor-axis {
  fill: hsl(203, 2%, 97%);
  stroke: hsl(203, 2%, 88%);
  height: 1.6429rem;
}

/* Styling for the minor time axis labels */
.oj-gantt-minor-axis-label {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 0.85714rem;
  font-weight: normal;
}

/* Styling for the minor time axis separators */
.oj-gantt-minor-axis-separator {
  stroke: hsl(203, 2%, 88%);
}

/* Styling for reference object */
.oj-gantt-reference-object-area {
  fill: hsl(203, 2%, 0%);
  opacity: 0.08;
  shape-rendering: crispEdges;
}

.oj-gantt-reference-object-line {
  stroke: #ed6647;
  shape-rendering: crispEdges;
}

.oj-gantt-reference-object-inner-line {
  stroke: hsl(203, 2%, 99%);
  shape-rendering: crispEdges;
}

/* Styling for the tooltip label */
.oj-gantt-tooltip-label {
  font-size: 0.85714rem;
  color: hsla(0, 0%, 0%, 0.6);
  padding: 0px 2px;
  white-space: nowrap;
}
html:not([dir=rtl]) .oj-gantt-tooltip-label {
  text-align: right;
}
html[dir=rtl] .oj-gantt-tooltip-label {
  text-align: left;
}

/* Styling for the tooltip value */
.oj-gantt-tooltip-value {
  color: hsla(0, 0%, 0%, 0.8);
  padding: 0px 2px;
}
html:not([dir=rtl]) .oj-gantt-tooltip-value {
  text-align: left;
}
html[dir=rtl] .oj-gantt-tooltip-value {
  text-align: right;
}

/* Styling for the default tabular tooltip */
.oj-gantt-tooltip-content {
  display: block;
  border-collapse: separate;
  border-spacing: 2px;
  overflow: hidden;
}

/* override dvt button styling for backwards variable compatibility */
.oj-gantt .oj-dvt-button-outlined,
.oj-gantt .oj-dvt-button-outlined.oj-hover,
.oj-gantt .oj-dvt-button-outlined.oj-disabled {
  stroke: hsl(203, 2%, 90%);
  fill: none;
}

.oj-gantt .oj-dvt-button-outlined.oj-active {
  stroke: hsl(203, 2%, 90%);
  fill: hsl(203, 2%, 100%);
}

.oj-gantt .oj-dvt-button-outlined.oj-active .oj-dvt-icon {
  fill: #027bc7;
}

/* Styling for all dependency lines */
.oj-gantt-dependency-line {
  fill: none;
  stroke: hsl(203, 2%, 30%);
  stroke-width: 1;
  marker-end: url("#ojGanttDependencyMarkerEndTriangle");
}

/* Styling for all dependency lines when focus */
.oj-gantt-dependency-line.oj-focus {
  stroke-width: 3;
}

/* Styling for all dependency line connectors */
.oj-gantt-dependency-line-connector {
  fill: hsl(203, 2%, 30%);
  stroke: hsl(203, 2%, 30%);
}

/* Styling for custom content containers */
.oj-gantt-task-custom svg,
.oj-gantt-dependency-line-custom svg {
  overflow: visible;
}

/* Option defaults */
.oj-gantt-option-defaults {
  font-family: '{"taskDefaults":{"baseline":{"borderRadius":"0"},"progress":{"borderRadius":"0"},"borderRadius":"0"}}' !important;
}

.oj-dialgauge {
  width: 200px;
  height: 200px;
}

oj-led-gauge:not(.oj-complete) {
  visibility: hidden;
}

oj-led-gauge {
  display: block;
}

.oj-ledgauge-fit {
  width: 40px;
  height: 40px;
}

.oj-ledgauge-lg {
  width: 32px;
  height: 32px;
}

.oj-ledgauge-md {
  width: 28px;
  height: 28px;
}

.oj-ledgauge-sm {
  width: 24px;
  height: 24px;
}

oj-status-meter-gauge:not(.oj-complete) {
  visibility: hidden;
}

oj-status-meter-gauge {
  display: block;
}

.oj-statusmetergauge {
  width: 220px;
  height: 25px;
}

oj-rating-gauge:not(.oj-complete) {
  visibility: hidden;
}

oj-rating-gauge {
  display: block;
}

.oj-rating-gauge-fit {
  width: 120px;
  height: 25px;
}

.oj-gauge-metric-label {
  font-weight: bold;
}

.oj-gauge-threshold1 {
  color: #ed6647;
}

.oj-gauge-threshold2 {
  color: #fad55c;
}

.oj-gauge-threshold3 {
  color: #68c182;
}

.oj-dialgauge.oj-focus-highlight,
.oj-ledgauge.oj-focus-highlight,
.oj-statusmetergauge.oj-focus-highlight,
.oj-ratinggauge.oj-focus-highlight {
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

.oj-rating-gauge-shape-lg {
  width: 36px;
  height: 36px;
}

.oj-rating-gauge-shape-md {
  width: 20px;
  height: 20px;
}

.oj-rating-gauge-shape-sm {
  width: 16px;
  height: 16px;
}

.oj-rating-gauge-selected {
  fill: #f8c15a;
  stroke: transparent;
}

.oj-rating-gauge-unselected {
  fill: #c4ced7;
  stroke: transparent;
}

.oj-rating-gauge-changed {
  fill: #ed2c02;
  stroke: transparent;
}

.oj-rating-gauge-hover {
  fill: #007cc8;
  stroke: transparent;
}

.oj-rating-gauge-selected-disabled {
  fill: hsl(203, 2%, 88%);
  stroke: transparent;
}

.oj-rating-gauge-unselected-disabled {
  fill: hsl(203, 2%, 95%);
  stroke: transparent;
}

.oj-statusmeter-gauge-plotarea {
  border-color: #d6dfe6;
  color: #e4e8ea;
}

.oj-statusmetergauge-horizontal-fit {
  width: 220px;
  height: 25px;
}

.oj-statusmetergauge-vertical-fit {
  width: 25px;
  height: 220px;
}

.oj-statusmetergauge-circular-fit {
  width: 6rem;
  height: 6rem;
}

.oj-statusmetergauge-horizontal-sm {
  width: 100%;
  height: 6px;
}

.oj-statusmetergauge-horizontal-md {
  width: 100%;
  height: 10px;
}

.oj-statusmetergauge-horizontal-lg {
  width: 100%;
  height: 14px;
}

.oj-statusmetergauge-vertical-sm {
  height: 100%;
  width: 6px;
}

.oj-statusmetergauge-vertical-md {
  height: 100%;
  width: 10px;
}

.oj-statusmetergauge-vertical-lg {
  height: 100%;
  width: 14px;
}

.oj-statusmetergauge-circular-sm {
  width: 56px;
  height: 56px;
}

.oj-statusmetergauge-circular-md {
  width: 96px;
  height: 96px;
}

.oj-statusmetergauge-circular-lg {
  width: 196px;
  height: 196px;
}

oj-n-box:not(.oj-complete) {
  visibility: hidden;
}

oj-n-box {
  display: block;
}

.oj-nbox {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  height: 540px;
}

.oj-nbox-container {
  grid-gap: 3px;
}

.oj-nbox-columns-title,
.oj-nbox-rows-title {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
}

.oj-nbox-column-label,
.oj-nbox-row-label {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 0.85714rem;
}

.oj-nbox-cell {
  background-color: hsl(203, 2%, 95%);
  padding: 6px;
  grid-gap: 6px;
  height: 34px;
}

.oj-nbox-cell.oj-maximized {
  background-color: hsl(203, 2%, 88%);
}

.oj-nbox-cell.oj-minimized {
  background-color: hsl(203, 2%, 95%);
}

.oj-nbox-cell-label {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
  font-weight: 400;
}

.oj-nbox-node-one-label-padding {
  padding: 2px;
}

.oj-nbox-node-two-label-padding {
  padding: 2px;
}

.oj-nbox-node-no-label {
  height: 19px;
}

.oj-nbox-cell-countlabel {
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-nbox-cell-countlabel.oj-nbox-cell-header {
  font-size: 1rem;
}

.oj-nbox-node {
  background-color: hsl(203, 2%, 100%);
  border-radius: 1px;
  min-width: 55px;
  max-width: 148px;
}

.oj-nbox-node.oj-hover {
  border-color: hsl(203, 2%, 100%);
}

.oj-nbox-node.oj-selected {
  border-color: hsl(203, 2%, 0%);
}

.oj-nbox-node-label {
  font-size: 1rem;
}

.oj-nbox-node-initials-background {
  width: 256px;
  height: 256px;
}

.oj-nbox-node-secondarylabel {
  font-size: 0.85714rem;
}

.oj-nbox-dialog {
  background-color: hsl(203, 2%, 95%);
  border-color: hsl(203, 2%, 78%);
}

.oj-nbox-dialog-label {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
  font-weight: 400;
}

.oj-nbox-dialog-countlabel {
  font-size: 1rem;
  font-weight: 400;
}

.oj-nbox-node-initials {
  fill: hsl(203, 2%, 100%);
  font-size: 12px;
}

.oj-nbox-node-initials.oj-nbox-node-initials-lg {
  font-size: 14px;
}

.oj-nbox-node-initials-neutral {
  fill: hsl(203, 2%, 45%);
}

.oj-nbox-node-initials-red {
  fill: #e4001e;
}

.oj-nbox-node-initials-orange {
  fill: #be4800;
}

.oj-nbox-node-initials-forest {
  fill: #008323;
}

.oj-nbox-node-initials-green {
  fill: #005a1c;
}

.oj-nbox-node-initials-teal {
  fill: #008179;
}

.oj-nbox-node-initials-mauve {
  fill: #754b9a;
}

.oj-nbox-node-initials-pink {
  fill: #c44591;
}

.oj-nbox-node-initials-purple {
  fill: #920083;
}

.oj-nbox-node-initials-blue {
  fill: #2c5967;
}

.oj-nbox-node-initials-slate {
  fill: #687878;
}

.oj-nbox-node-initials-lilac {
  fill: #a15ea1;
}

.oj-nbox-node-initials-gray {
  fill: #6f757e;
}

oj-picto-chart:not(.oj-complete) {
  visibility: hidden;
}

oj-picto-chart {
  display: inline-block;
}

.oj-pictochart {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: inline-block;
}

.oj-pictochart-item {
  background-color: hsl(203, 2%, 70%);
}

oj-tag-cloud:not(.oj-complete) {
  visibility: hidden;
}

oj-tag-cloud {
  display: block;
}

.oj-tagcloud {
  color: hsla(0, 0%, 0%, 0.8);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  height: 300px;
}

oj-thematic-map:not(.oj-complete) {
  visibility: hidden;
}

oj-thematic-map {
  display: block;
}

.oj-thematicmap {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 600px;
  height: 375px;
}

.oj-thematicmap-arealayer {
  background-color: hsl(203, 2%, 90%);
  border-color: hsl(203, 2%, 100%);
  font-size: 1rem;
}

.oj-thematicmap-area {
  border-color: hsl(203, 2%, 100%);
}

.oj-thematicmap-area.oj-hover {
  border-color: hsl(203, 2%, 100%);
}

.oj-thematicmap-area.oj-selected {
  border-top-color: hsl(203, 2%, 100%);
  border-bottom-color: hsl(203, 2%, 0%);
}

.oj-thematicmap-marker {
  border-color: hsl(203, 2%, 100%);
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
  background-color: hsl(203, 2%, 20%);
}

.oj-thematicmap-marker.oj-hover {
  border-color: hsl(203, 2%, 100%);
}

.oj-thematicmap-marker.oj-selected {
  border-color: hsl(203, 2%, 0%);
}

.oj-thematicmap-link {
  color: hsl(203, 2%, 70%);
}

.oj-thematicmap-link.oj-hover {
  color: hsl(203, 2%, 100%);
}

.oj-thematicmap-link.oj-selected {
  border-color: hsl(203, 2%, 0%);
}

oj-treemap:not(.oj-complete) {
  visibility: hidden;
}

oj-treemap {
  display: block;
}

.oj-treemap {
  width: 650px;
  height: 400px;
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 0.85714rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.oj-treemap-attribute-type-text {
  color: hsla(0, 0%, 0%, 0.6);
  font-size: 1rem;
}

.oj-treemap-attribute-value-text {
  font-size: 1rem;
}

.oj-treemap-current-drill-text {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
}

.oj-treemap-drill-text {
  color: #000000;
  font-size: 1rem;
  text-decoration: none;
}

.oj-treemap-drill-text.oj-hover {
  text-decoration: underline;
}

.oj-treemap-node {
  font-size: 0.85714rem;
}

.oj-treemap-node.oj-hover {
  border-color: hsl(203, 2%, 93%);
}

.oj-treemap-node.oj-selected {
  border-top-color: hsl(203, 2%, 0%);
  border-bottom-color: hsl(203, 2%, 100%);
}

.oj-treemap-node-header {
  font-size: 0.85714rem;
  color: hsla(0, 0%, 0%, 0.85);
  background-color: hsl(203, 2%, 100%);
  border-color: hsl(203, 2%, 90%);
}

.oj-treemap-node-header.oj-hover {
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 90%);
  border-top-color: hsl(203, 2%, 93%);
  border-bottom-color: hsl(203, 2%, 88%);
}

.oj-treemap-node-header.oj-selected {
  background-color: rgb(214.52, 233.88, 246.04);
  border-color: hsl(203, 2%, 90%);
  border-top-color: hsl(203, 2%, 0%);
  border-bottom-color: hsl(203, 2%, 100%);
}

oj-sunburst:not(.oj-complete) {
  visibility: hidden;
}

oj-sunburst {
  display: block;
}

.oj-sunburst {
  font-size: 0.85714rem;
  color: hsla(0, 0%, 0%, 0.8);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 400px;
  height: 400px;
}

.oj-sunburst-attribute-type-text {
  color: hsla(0, 0%, 0%, 0.6);
  font-size: 1rem;
}

.oj-sunburst-attribute-value-text {
  font-size: 1rem;
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-sunburst-current-drill-text {
  font-size: 1rem;
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-sunburst-drill-text {
  color: #000000;
  font-size: 1rem;
  text-decoration: none;
}

.oj-sunburst-drill-text.oj-hover {
  text-decoration: underline;
}

.oj-sunburst-node {
  font-size: 0.85714rem;
}

.oj-sunburst-node.oj-hover {
  border-color: hsl(203, 2%, 93%);
}

.oj-sunburst-node.oj-selected {
  border-top-color: hsl(203, 2%, 0%);
  border-bottom-color: hsl(203, 2%, 100%);
}

oj-time-axis:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the timeaxis widget */
.oj-timeaxis {
  background-color: transparent;
  border: 1px solid hsl(203, 2%, 90%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}

/* Styling for the timeaxis labels */
.oj-timeaxis-label {
  font-size: 1rem;
  fill: hsla(0, 0%, 0%, 0.8);
}

/* Styling for the timeaxis separators */
.oj-timeaxis-separator {
  stroke: hsl(203, 2%, 90%);
}

.oj-table-header-row .oj-timeaxis-separator {
  stroke: hsl(203, 2%, 90%);
}

.oj-datagrid-column-header-cell .oj-timeaxis-separator {
  stroke: hsl(203, 2%, 88%);
}

/* Styling border for stamping onto ojTable header case:
All timeaxes does not have bottom border */
.oj-table-header-row .oj-timeaxis {
  border-bottom: none;
  border-color: hsl(203, 2%, 90%);
}

/* Styling border for stamping onto ojDataGrid header case:
First timeaxis does not have border, all other timeaxes have top border */
.oj-datagrid-column-header-cell .oj-timeaxis {
  border: none;
}

.oj-datagrid-column-header-cell .oj-timeaxis ~ .oj-timeaxis {
  border-top: 1px solid hsl(203, 2%, 88%);
}

oj-timeline:not(.oj-complete) {
  visibility: hidden;
}

.oj-timeline {
  outline: none;
  border-color: hsl(203, 2%, 90%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.oj-timeline-item {
  background-color: hsl(203, 2%, 100%);
  border-color: hsl(203, 2%, 55%);
  padding-top: 5px;
}

.oj-timeline-item.oj-hover {
  border-color: rgb(118.38, 183.72, 224.76);
}

.oj-timeline-item.oj-selected {
  border-color: hsl(203, 2%, 0%);
}

.oj-timeline-item-description {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 0.85714rem;
  white-space: nowrap;
}

.oj-timeline-item-title {
  color: hsla(0, 0%, 0%, 0.7);
  font-size: 0.85714rem;
  white-space: nowrap;
  font-weight: bold;
}

.oj-timeline-major-axis-label {
  color: hsla(0, 0%, 0%, 0.7);
  font-size: 1rem;
  white-space: nowrap;
  font-weight: bold;
}

.oj-timeline-major-axis-separator {
  color: hsl(203, 2%, 78%);
}

.oj-timeline-minor-axis {
  background-color: hsl(203, 2%, 95%);
  border-color: hsl(203, 2%, 90%);
}

.oj-timeline-minor-axis-label {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 0.85714rem;
  white-space: nowrap;
}

.oj-timeline-minor-axis-separator {
  color: hsl(203, 2%, 78%);
}

.oj-timeline-overview {
  background-color: hsl(203, 2%, 90%);
}

.oj-timeline-overview-label {
  color: hsla(0, 0%, 0%, 0.7);
  font-size: 0.85714rem;
  white-space: nowrap;
  font-weight: bold;
}

.oj-timeline-overview-window {
  background-color: hsl(203, 2%, 100%);
  border-color: hsl(203, 2%, 30%);
}

.oj-timeline-reference-object {
  color: #ed6647;
}

.oj-timeline-series {
  background-color: hsl(203, 2%, 98%);
}

.oj-timeline-series-label {
  color: hsla(0, 0%, 0%, 0.85);
  font-size: 1rem;
  white-space: nowrap;
  font-weight: bold;
}

.oj-timeline-series-empty-text {
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 0.85714rem;
  white-space: nowrap;
}

.oj-timeline-tooltip-label {
  font-size: 0.85714rem;
  color: hsla(0, 0%, 0%, 0.6);
}

/* override dvt button styling for backwards variable compatibility */
.oj-timeline .oj-dvt-button-outlined,
.oj-timeline .oj-dvt-button-outlined.oj-hover,
.oj-timeline .oj-dvt-button-outlined.oj-disabled {
  stroke: hsl(203, 2%, 90%);
  fill: none;
}

.oj-timeline .oj-dvt-button-outlined.oj-active {
  stroke: hsl(203, 2%, 90%);
  fill: hsl(203, 2%, 100%);
}

.oj-timeline .oj-dvt-button-outlined.oj-active .oj-dvt-icon {
  fill: #027bc7;
}

oj-form-layout {
  display: block;
}

.oj-form-cols-labels-inline {
  column-width: 22rem;
  column-gap: normal;
}

.oj-form-cols {
  column-width: 18.45rem;
  column-gap: normal;
}

.oj-form-layout-no-min-column-width .oj-form-cols,
.oj-form-layout-no-min-column-width .oj-form-cols-labels-inline {
  column-width: auto;
}

.oj-form-cols-max2 {
  column-count: 2;
}

.oj-form-cols > .oj-flex,
.oj-form-cols-labels-inline > .oj-flex,
.oj-form-cols > .oj-flex > .oj-flex-item,
.oj-form-cols-labels-inline > .oj-flex > .oj-flex-item {
  -moz-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
}

.oj-agent-browser-safari .oj-formlayout-max-cols-1 > .oj-form:not(.oj-formlayout-form-across),
.oj-agent-browser-firefox .oj-formlayout-max-cols-1 > .oj-form:not(.oj-formlayout-form-across) {
  display: inline;
}

.oj-agent-browser-firefox .oj-form-layout > .oj-form:not(.oj-formlayout-form-across) > .oj-flex {
  display: inline;
}

.oj-form > hr,
.oj-form > h1,
.oj-form > h2,
.oj-form > h3,
.oj-form > h4 {
  margin: calc(15px - 10px) 0 15px 0;
}

.oj-form > .oj-form-control,
.oj-form > .oj-form-non-control {
  margin-bottom: 10px;
}

.oj-form > .oj-flex > .oj-flex-item > .oj-form {
  text-align: left;
}
html[dir=rtl] .oj-form > .oj-flex > .oj-flex-item > .oj-form {
  text-align: right;
}

.oj-form > .oj-flex > .oj-flex-item:not(.oj-formlayout-nested-formlayout):not(.oj-formlayout-nested-labelvalue) {
  padding: 0 0 calc(10px - 4px) 0;
}

.oj-form.oj-label-value > .oj-flex > .oj-flex-item:first-child {
  margin: 0;
}

.oj-form > .oj-flex > .oj-flex-item > .oj-form-non-control {
  margin-bottom: 4px;
}

.oj-form-layout {
  border-color: transparent;
  border-style: solid;
  border-width: 0 0 0;
}

.oj-form-layout-inset {
  margin: 0;
  border-width: 0;
}

.oj-form > .oj-flex {
  border-style: solid;
  border-color: transparent;
  border-width: 0 0 0 0;
  padding: 0 0 0;
}

.oj-form-layout > .oj-form[class*=oj-form-cols-] > .oj-flex:last-child {
  border-width: 0 0 0 0;
}

.oj-form > .oj-flex:last-child {
  border-width: 0;
}

.oj-form > .oj-flex > .oj-flex-item > .oj-formlayout-label-nowrap,
.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label,
.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label,
.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label-nocomp,
.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label-value .oj-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
.oj-formlayout-inline-label > .oj-label,
.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
.oj-formlayout-inline-label > .oj-label-nocomp {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
html[dir=rtl] .oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
html[dir=rtl] .oj-formlayout-inline-label > .oj-label,
html[dir=rtl] .oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
html[dir=rtl] .oj-formlayout-inline-label > .oj-label-nocomp {
  text-align: left;
}

.oj-formlayout-inline-value {
  text-align: left;
}
html[dir=rtl] .oj-formlayout-inline-value {
  text-align: right;
}

.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
.oj-formlayout-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon {
  margin-top: 1px;
}

.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
.oj-formlayout-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
.oj-formlayout-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) label,
.oj-formlayout-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) label,
.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor,
.oj-formlayout-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor {
  float: none;
}

html:not([dir=rtl]) .oj-formlayout-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
html:not([dir=rtl]) .oj-formlayout-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
html:not([dir=rtl]) .oj-formlayout-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
html:not([dir=rtl]) .oj-formlayout-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
  margin-left: 0;
  margin-right: 6px;
}
html[dir=rtl] .oj-formlayout-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
html[dir=rtl] .oj-formlayout-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
html[dir=rtl] .oj-formlayout-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
html[dir=rtl] .oj-formlayout-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
  margin-right: 0;
  margin-left: 6px;
}

.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
.oj-formlayout-inline-label > .oj-label,
.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
.oj-formlayout-inline-label > .oj-label-nocomp {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.4em;
  box-sizing: border-box;
}
html:not([dir=rtl]) .oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
html:not([dir=rtl]) .oj-formlayout-inline-label > .oj-label,
html:not([dir=rtl]) .oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
html:not([dir=rtl]) .oj-formlayout-inline-label > .oj-label-nocomp {
  padding-right: 0.5em;
}
html[dir=rtl] .oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
html[dir=rtl] .oj-formlayout-inline-label > .oj-label,
html[dir=rtl] .oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
html[dir=rtl] .oj-formlayout-inline-label > .oj-label-nocomp {
  padding-left: 0.5em;
}

.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label-inline-top,
.oj-formlayout-inline-label > .oj-label-inline-top,
.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp.oj-label-for-non-control,
.oj-formlayout-inline-label > .oj-label-nocomp.oj-label-for-non-control {
  margin-top: 0;
}

.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label,
.oj-formlayout-inline-label > .oj-radioset-label,
.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label,
.oj-flformlayoutex-inline-label > .oj-checkboxset-label {
  margin-top: 0.19rem;
  margin-bottom: 0;
}

.oj-form > .oj-flex > .oj-flex-item > .oj-formlayout-label-nowrap .oj-label-group,
.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label .oj-label-group,
.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label .oj-label-group {
  width: inherit;
  overflow: inherit;
  text-overflow: inherit;
}

.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label .oj-label-group,
.oj-formlayout-inline-label > .oj-label .oj-label-group {
  width: inherit;
  overflow: inherit;
  text-overflow: inherit;
  line-height: 1.6em;
}

.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp:not(.oj-label-for-non-control) {
  line-height: 1.6em;
}

html:not([dir=rtl]) .oj-formlayout-form-across > .oj-flex > .oj-flex-item:first-child {
  padding-left: 0;
}
html[dir=rtl] .oj-formlayout-form-across > .oj-flex > .oj-flex-item:first-child {
  padding-right: 0;
}

html:not([dir=rtl]) .oj-formlayout-form-across > .oj-flex > .oj-flex-item:last-child {
  padding-right: 0;
}
html[dir=rtl] .oj-formlayout-form-across > .oj-flex > .oj-flex-item:last-child {
  padding-left: 0;
}

.oj-form.oj-formlayout-form-across > .oj-flex {
  padding-left: 0;
  padding-right: 0;
}

html:not([dir=rtl]) .oj-form.oj-formlayout-form-across {
  padding-left: 0;
}
html[dir=rtl] .oj-form.oj-formlayout-form-across {
  padding-right: 0;
}

html:not([dir=rtl]) .oj-form.oj-formlayout-form-across > .oj-flex {
  padding-right: 0;
}
html[dir=rtl] .oj-form.oj-formlayout-form-across > .oj-flex {
  padding-left: 0;
}

oj-form-layout > .oj-form {
  padding-left: 0px;
  padding-right: 0px;
  column-gap: 1em;
}

.oj-formlayout-labels-inline > .oj-form > .oj-flex {
  flex-wrap: nowrap;
}

.oj-form-layout > .oj-form > .oj-flex > .oj-formlayout-nested-formlayout > .oj-form-layout > .oj-form,
.oj-form-layout > .oj-form.oj-formlayout-form-across > .oj-flex > .oj-formlayout-no-label-flex-item.oj-formlayout-nested-formlayout.oj-flex-item {
  padding-left: 0px;
  padding-right: 0px;
}

.oj-formlayout-column-gutter {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 1em;
}

.oj-label-value.oj-form > .oj-flex {
  padding-top: 0;
}

.oj-form.oj-label-value > .oj-flex > .oj-flex-item:nth-child(even),
.oj-form.oj-label-value > .oj-flex > .oj-flex-item:last-child,
.oj-form > .oj-flex > .oj-flex-item.oj-formlayout-nested-formlayout:nth-child(even),
.oj-form > .oj-flex > .oj-flex-item.oj-formlayout-nested-formlayout:last-child {
  margin: 0;
}

.oj-form-layout-option-defaults {
  font-family: '{"labelEdge":"top","colspanWrap":"nowrap","direction":"column","columnGap":"1em"}';
}

oj-form-layout:not(.oj-complete) {
  visibility: hidden;
}

oj-input-text:not(.oj-complete) {
  visibility: hidden;
}

oj-input-password:not(.oj-complete) {
  visibility: hidden;
}

oj-text-area:not(.oj-complete) {
  visibility: hidden;
}

.oj-inputtext-nocomp,
.oj-inputpassword-nocomp,
.oj-textarea-nocomp {
  box-sizing: border-box;
  display: inline-block;
  font-size: 1rem;
}
@media screen and (max-width: 767.9px) {
  .oj-inputtext-nocomp,
  .oj-inputpassword-nocomp,
  .oj-textarea-nocomp {
    -webkit-text-size-adjust: 115%;
  }
}
.oj-inputtext-nocomp,
.oj-inputpassword-nocomp,
.oj-textarea-nocomp {
  /* use a width of 100% and then max and min width so that when 
     there's less room for the form control it can automatically 
     get smaller instead of overflowing its boundaries */
  max-width: 18em;
  min-width: 8em;
  width: 100%;
}

.oj-form-control-full-width.oj-inputtext-nocomp,
.oj-form-control-full-width.oj-inputpassword-nocomp,
.oj-form-control-full-width.oj-textarea-nocomp,
.oj-form-control-full-width .oj-inputtext-nocomp,
.oj-form-control-full-width .oj-inputpassword-nocomp,
.oj-form-control-full-width .oj-textarea-nocomp {
  max-width: 100%;
}

.oj-inputtext .oj-inputtext-clear-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.28571rem;
  width: 1.5625rem;
  text-decoration: none;
  cursor: default;
}

a.oj-inputtext-clear-icon-btn:active {
  background-color: transparent;
}

.oj-inputtext-clear-icon {
  margin-top: 1px;
  color: inherit;
}

.oj-inputtext .oj-inputtext-clear-icon-btn:focus {
  outline: none;
}

.oj-inputtext.oj-focus .oj-text-field-container.oj-inputtext-clearicon-conditional:not(.oj-form-control-empty-clearicon) .oj-inputtext-clear-icon-btn,
.oj-inputtext.oj-hover .oj-text-field-container.oj-inputtext-clearicon-conditional:not(.oj-form-control-empty-clearicon) .oj-inputtext-clear-icon-btn {
  visibility: visible;
}

.oj-inputtext .oj-text-field-container.oj-inputtext-clearicon-conditional .oj-inputtext-clear-icon-btn {
  visibility: hidden;
}

.oj-inputtext .oj-text-field-counter {
  visibility: hidden;
}

.oj-inputtext.oj-focus .oj-text-field-counter {
  visibility: visible;
}

.oj-text-field-counter .oj-inputtext-counter-el {
  position: relative;
  bottom: -3px;
}
html:not([dir=rtl]) .oj-text-field-counter .oj-inputtext-counter-el {
  right: 4px;
}
html[dir=rtl] .oj-text-field-counter .oj-inputtext-counter-el {
  left: 4px;
}

.oj-textarea .oj-text-field-counter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.oj-textarea .oj-text-field-counter .oj-textarea-counter-el {
  visibility: hidden;
}

.oj-textarea.oj-focus .oj-text-field-counter .oj-textarea-counter-el {
  visibility: visible;
}

.oj-textarea .oj-text-field-container {
  flex-wrap: wrap;
  height: auto;
}

.oj-text-field.oj-textarea.oj-disabled .oj-text-field-container {
  background-color: hsl(203, 2%, 93%);
}

.oj-text-field-counter.oj-textarea-counter-container {
  height: 32px;
  width: 100%;
  padding: 0 8px;
}

html:not([dir=rtl]) .oj-inputtext.oj-focus .oj-inputtext-clearicon-conditional .oj-inputtext-input,
html:not([dir=rtl]) .oj-inputtext.oj-hover .oj-inputtext-clearicon-conditional .oj-inputtext-input,
html:not([dir=rtl]) .oj-inputtext .oj-inputtext-clearicon-visible .oj-inputtext-input {
  padding-right: 25px;
}
html[dir=rtl] .oj-inputtext.oj-focus .oj-inputtext-clearicon-conditional .oj-inputtext-input,
html[dir=rtl] .oj-inputtext.oj-hover .oj-inputtext-clearicon-conditional .oj-inputtext-input,
html[dir=rtl] .oj-inputtext .oj-inputtext-clearicon-visible .oj-inputtext-input {
  padding-left: 25px;
}

.oj-inputtext-input,
.oj-inputpassword-input,
.oj-textarea-input {
  text-align: left;
}
html[dir=rtl] .oj-inputtext-input,
html[dir=rtl] .oj-inputpassword-input,
html[dir=rtl] .oj-textarea-input {
  text-align: right;
}
.oj-inputtext-input,
.oj-inputpassword-input,
.oj-textarea-input {
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 99%);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.oj-inputtext-input:-ms-input-placeholder,
.oj-inputpassword-input:-ms-input-placeholder,
.oj-textarea-input:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputtext-input::-ms-input-placeholder,
.oj-inputpassword-input::-ms-input-placeholder,
.oj-textarea-input::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputtext-input::placeholder,
.oj-inputpassword-input::placeholder,
.oj-textarea-input::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputtext-input,
.oj-inputpassword-input,
.oj-textarea-input {
  font-weight: normal;
  width: 100%;
}

.oj-inputtext-nocomp,
.oj-inputpassword-nocomp,
.oj-textarea-nocomp {
  text-align: left;
}
html[dir=rtl] .oj-inputtext-nocomp,
html[dir=rtl] .oj-inputpassword-nocomp,
html[dir=rtl] .oj-textarea-nocomp {
  text-align: right;
}
.oj-inputtext-nocomp,
.oj-inputpassword-nocomp,
.oj-textarea-nocomp {
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 99%);
  border-style: solid;
  border-color: hsl(203, 2%, 90%);
  border-width: 1px 1px 1px 1px;
  border-radius: 2px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.oj-inputtext-nocomp:-ms-input-placeholder,
.oj-inputpassword-nocomp:-ms-input-placeholder,
.oj-textarea-nocomp:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputtext-nocomp::-ms-input-placeholder,
.oj-inputpassword-nocomp::-ms-input-placeholder,
.oj-textarea-nocomp::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputtext-nocomp::placeholder,
.oj-inputpassword-nocomp::placeholder,
.oj-textarea-nocomp::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputtext-nocomp,
.oj-inputpassword-nocomp,
.oj-textarea-nocomp {
  font-weight: normal;
  width: 100%;
  outline: 0;
  box-sizing: border-box;
  font-family: inherit;
}

.oj-inputtext-input[size],
.oj-inputpassword-input[size],
.oj-textarea-input[size] {
  width: auto;
}

.oj-inputtext-input,
.oj-inputpassword-input,
.oj-inputtext-nocomp,
.oj-inputpassword-nocomp {
  box-sizing: border-box;
  padding: 0 5px;
  padding-bottom: calc(1px - 1px + 0px);
}

.oj-inputtext-nocomp,
.oj-inputpassword-nocomp {
  height: 2.28571rem;
}

.oj-textarea-input,
.oj-textarea-nocomp {
  padding: 0.5rem 5px;
  line-height: 1.2;
  height: auto;
  padding-top: 6px;
  resize: none;
}

.oj-inputtext.oj-disabled .oj-inputtext-input,
.oj-inputpassword.oj-disabled .oj-inputpassword-input,
.oj-textarea.oj-disabled .oj-textarea-input,
.oj-inputtext-nocomp[disabled],
.oj-inputpassword-nocomp[disabled],
.oj-textarea-nocomp[disabled] {
  border-style: solid;
  color: hsla(0, 0%, 0%, 0.38);
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 93%);
  opacity: 1;
}

.oj-inputtext-nocomp[readonly],
.oj-inputpassword-nocomp[readonly],
.oj-textarea-nocomp[readonly] {
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
  font-weight: normal;
  padding: 0;
}

.oj-textarea.oj-read-only .oj-textarea-input,
.oj-textarea-nocomp[readonly] {
  padding-top: 6px;
}

.oj-inputtext.oj-loading .oj-inputtext-input,
.oj-textarea.oj-loading .oj-textarea-input {
  background-image: linear-gradient(90deg, hsl(203, 2%, 93%) 0%, hsl(203, 2%, 98%) 10%, hsl(203, 2%, 93%) 20%);
  animation: LoadingGradientAnimation 3s infinite;
  background-size: 200% 200%;
  opacity: 1;
}

.oj-inputtext:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning) .oj-inputtext-input:focus,
.oj-inputpassword:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning) .oj-inputpassword-input:focus,
.oj-textarea:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning) .oj-textarea-input:focus,
.oj-inputtext-nocomp:not([disabled]):not([readonly]):focus,
.oj-inputpassword-nocomp:not([disabled]):not([readonly]):focus,
.oj-textarea-nocomp:not([disabled]):not([readonly]):focus {
  border-color: hsl(203, 2%, 90%);
  border-width: 1px 1px 1px 1px;
}

.oj-inputtext:not(.oj-disabled):not(.oj-read-only) .oj-inputtext-input:focus,
.oj-inputpassword:not(.oj-disabled):not(.oj-read-only) .oj-inputpassword-input:focus,
.oj-inputtext-nocomp:not([disabled]):not([readonly]):focus,
.oj-inputpassword-nocomp:not([disabled]):not([readonly]):focus {
  padding-bottom: 0;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp {
  color: inherit;
  height: 100%;
  width: 100%;
}
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp {
  text-align: inherit;
}
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp {
  text-align: inherit;
}
.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp {
  border-width: 0;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp:not([disabled]),
.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp:not([disabled]),
.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp:not([disabled]) {
  background-color: transparent;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext:not(.oj-disabled):not(.oj-read-only) .oj-inputtext-input:focus,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword:not(.oj-disabled):not(.oj-read-only) .oj-inputpassword-input:focus,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea:not(.oj-disabled):not(.oj-read-only) .oj-textarea-input:focus,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp:not([disabled]):not([readonly]):focus,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp:not([disabled]):not([readonly]):focus,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp:not([disabled]):not([readonly]):focus {
  border-width: 0;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext .oj-text-field-middle,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword .oj-text-field-middle {
  height: 100%;
}

.oj-text-field-label-inside .oj-textarea-input {
  padding: 0 5px;
  margin-top: 1.25rem;
  display: block;
}

.oj-text-field-label-inside .oj-textarea-input.oj-text-field-input {
  min-height: 0;
}

.oj-text-field-label-inside.oj-textarea.oj-read-only .oj-textarea-input {
  margin-top: 1.25rem;
}

.oj-text-field-label-inside.oj-textarea:not(.oj-disabled) .oj-label {
  background-color: hsl(203, 2%, 99%);
}

.oj-inputtext .oj-inputtext-clear-icon-btn {
  z-index: 1;
}
html:not([dir=rtl]) .oj-inputtext .oj-inputtext-clear-icon-btn {
  margin-left: -25px;
}
html[dir=rtl] .oj-inputtext .oj-inputtext-clear-icon-btn {
  margin-right: -25px;
}

/* inputnumber */
/* --------------------------------------------------------------- */
oj-input-number:not(.oj-complete) {
  visibility: hidden;
}

.oj-inputnumber-wrapper {
  width: 100%;
  white-space: nowrap;
  display: inline-flex;
  box-sizing: border-box;
}

/* Input field for inputnumber */
.oj-inputnumber-input {
  flex: 1;
  width: 1em;
  min-width: 1em;
  font-size: 100%;
  text-align: left;
}
html[dir=rtl] .oj-inputnumber-input {
  text-align: right;
}
.oj-inputnumber-input {
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 99%);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.oj-inputnumber-input:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputnumber-input::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputnumber-input::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputnumber-input {
  border-width: 0px;
  padding: 0 5px;
  padding-bottom: calc(1px - 1px + 0px);
}

.oj-inputnumber .oj-inputnumber-wrapper {
  height: 100%;
}

html:not([dir=rtl]) .oj-inputnumber.oj-has-buttons .oj-inputnumber-input,
html:not([dir=rtl]) .oj-inputnumber.oj-has-buttons .oj-text-field-middle {
  margin-right: 0;
}
html[dir=rtl] .oj-inputnumber.oj-has-buttons .oj-inputnumber-input,
html[dir=rtl] .oj-inputnumber.oj-has-buttons .oj-text-field-middle {
  margin-left: 0;
}

/* Disabled styling for the widget */
.oj-inputnumber.oj-disabled .oj-inputnumber-input {
  color: hsla(0, 0%, 0%, 0.38);
  background-color: hsl(203, 2%, 93%);
  opacity: 1;
}

.oj-inputnumber.oj-loading .oj-inputnumber-input {
  background-color: transparent;
  opacity: 1;
}

/* Styling for focus state */
.oj-inputnumber:not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-text-field-container {
  border-color: hsl(203, 2%, 90%);
  border-width: 1px 1px 1px 1px;
  padding-bottom: 0;
}

/* styling for inputNumber's buttonset/buttons */
.oj-inputnumber .oj-buttonset {
  height: auto;
  box-sizing: border-box;
}

.oj-inputnumber .oj-inputnumber-button.oj-button {
  height: 100%;
  line-height: normal;
  margin-bottom: 0;
}

.oj-inputnumber .oj-button {
  width: auto;
}

.oj-inputnumber.oj-read-only .oj-buttonset {
  display: none;
}

.oj-inputnumber-button.oj-button.oj-focus {
  outline-style: none;
}

html:not([dir=rtl]) .oj-inputnumber .oj-buttonset {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
html[dir=rtl] .oj-inputnumber .oj-buttonset {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-inputnumber-button.oj-buttonset-first,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-inputnumber-button.oj-buttonset-first {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-inputnumber-button.oj-buttonset-first,
html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-inputnumber-button.oj-buttonset-first {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

html:not([dir=rtl]) .oj-inputnumber .oj-buttonset {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
html[dir=rtl] .oj-inputnumber .oj-buttonset {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-inputnumber-button.oj-buttonset-last,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-inputnumber-button.oj-buttonset-last {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-inputnumber-button.oj-buttonset-last,
html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-inputnumber-button.oj-buttonset-last {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.oj-inputnumber .oj-inputnumber-button.oj-buttonset-first {
  border-top-width: 0;
  border-bottom-width: 0;
}

html:not([dir=rtl]) .oj-inputnumber .oj-inputnumber-button.oj-buttonset-last {
  border-right-width: 0;
}
html[dir=rtl] .oj-inputnumber .oj-inputnumber-button.oj-buttonset-last {
  border-left-width: 0;
}
.oj-inputnumber .oj-inputnumber-button.oj-buttonset-last {
  border-top-width: 0;
  border-bottom-width: 0;
}

.oj-inputnumber.oj-disabled .oj-buttonset {
  border-color: hsl(203, 2%, 93%);
}

.oj-inputnumber.oj-disabled .oj-inputnumber-button {
  border-color: hsl(203, 2%, 90%);
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-wrapper {
  height: 100%;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber:not(.oj-read-only).oj-focus .oj-text-field-container {
  border-width: 0;
}

.oj-inputnumber.oj-invalid .oj-text-field-input {
  border-color: #e65a66;
}

.oj-inputnumber.oj-warning .oj-text-field-input {
  border-color: #f8ca75;
}

.oj-inputnumber-up-icon {
  margin-bottom: 1px;
}

.oj-inputnumber .oj-inputnumber-down-icon,
.oj-inputnumber .oj-inputnumber-up-icon {
  font-size: 12px;
}

.oj-inputnumber.oj-loading {
  background-image: linear-gradient(90deg, hsl(203, 2%, 93%) 0%, hsl(203, 2%, 98%) 10%, hsl(203, 2%, 93%) 20%);
  animation: LoadingGradientAnimation 3s infinite;
  background-size: 200% 200%;
}

/* highlight-text */
/* --------------------------------------------------------------- */
oj-highlight-text:not(.oj-complete) {
  visibility: hidden;
}

.oj-highlighttext {
  display: inline;
}

/*
 * Applied to the matching text
 */
.oj-highlighttext-highlighter, .oj-listbox-highlighter {
  font-weight: bold;
}

/* listbox */
/* --------------------------------------------------------------- */
/*
 * applied to the dropdown
 */
/* defines the stacking context for the listbox */
.oj-listbox-drop-layer {
  z-index: 1000;
}

.oj-listbox-drop {
  box-sizing: border-box;
  top: 100%;
  background: hsl(203, 2%, 100%);
  border: 1px solid hsl(203, 2%, 80%);
  box-shadow: 1px 1px 3px 0 hsla(0, 0%, 0%,0.35);
  border-top: 0;
}

.oj-listbox-drop.oj-listbox-searchselect {
  display: flex;
  flex-direction: column;
}

.oj-listbox-drop.oj-listbox-fullscreen {
  position: fixed;
}

.oj-listbox-searchselect-no-results:not(.oj-listbox-fullscreen) {
  border: none;
}

/*
 * applied to the dropdown when it is open above the component
 */
.oj-listbox-drop-above {
  border-top: 1px solid hsl(203, 2%, 80%);
  border-bottom: 0;
  margin-top: -1px;
}

/*
 * applied to placeholder in the dropdown
 */
.oj-listbox-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
}

/*
 * Base class for results, shared by oj-listbox-results and oj-select-results (for
 * oj-select-single).  oj-select-single cannot directly reuse oj-listbox-results itself
 * because that interferes with collection styling, such as by hiding the selected item.
 */
.oj-listbox-results-base, .oj-select-results, .oj-listbox-results {
  padding: 0;
  margin: 1px 0 2px 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  max-height: 200px;
}

/*
 * applied to results
 */
/*
 * applied to nested option groups
 */
.oj-listbox-result-sub {
  margin: 0;
  padding: 0;
}

/*
 * applied to result labels
 */
.oj-listbox-result-label {
  line-height: 2rem;
  margin: 0;
  min-height: 2rem;
  word-break: break-word;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
html:not([dir=rtl]) .oj-listbox-result-label {
  padding-left: 5px;
}
html[dir=rtl] .oj-listbox-result-label {
  padding-right: 5px;
}

/*
 * applied to result labels in different nested levels of option groups.
 * Padding is used instead of margins because the background color for states
 * like hover need to span across the entire box.
 */
html:not([dir=rtl]) .oj-listbox-results-depth-1 > .oj-listbox-result-label {
  padding-left: calc(15px + 5px);
}
html[dir=rtl] .oj-listbox-results-depth-1 > .oj-listbox-result-label {
  padding-right: calc(15px + 5px);
}

html:not([dir=rtl]) .oj-listbox-results-depth-2 > .oj-listbox-result-label {
  padding-left: calc(2 * 15px + 5px);
}
html[dir=rtl] .oj-listbox-results-depth-2 > .oj-listbox-result-label {
  padding-right: calc(2 * 15px + 5px);
}

html:not([dir=rtl]) .oj-listbox-results-depth-3 > .oj-listbox-result-label {
  padding-left: calc(3 * 15px + 5px);
}
html[dir=rtl] .oj-listbox-results-depth-3 > .oj-listbox-result-label {
  padding-right: calc(3 * 15px + 5px);
}

html:not([dir=rtl]) .oj-listbox-results-depth-4 > .oj-listbox-result-label {
  padding-left: calc(4 * 15px + 5px);
}
html[dir=rtl] .oj-listbox-results-depth-4 > .oj-listbox-result-label {
  padding-right: calc(4 * 15px + 5px);
}

html:not([dir=rtl]) .oj-listbox-results-depth-5 > .oj-listbox-result-label {
  padding-left: calc(5 * 15px + 5px);
}
html[dir=rtl] .oj-listbox-results-depth-5 > .oj-listbox-result-label {
  padding-right: calc(5 * 15px + 5px);
}

html:not([dir=rtl]) .oj-listbox-results-depth-6 > .oj-listbox-result-label {
  padding-left: calc(6 * 15px + 5px);
}
html[dir=rtl] .oj-listbox-results-depth-6 > .oj-listbox-result-label {
  padding-right: calc(6 * 15px + 5px);
}

html:not([dir=rtl]) .oj-listbox-results-depth-7 > .oj-listbox-result-label {
  padding-left: calc(7 * 15px + 5px);
}
html[dir=rtl] .oj-listbox-results-depth-7 > .oj-listbox-result-label {
  padding-right: calc(7 * 15px + 5px);
}

/*
 * applied to the nested option group labels,
 * they are direct children of li.oj-listbox-result-with-children
 */
.oj-listbox-result-with-children > .oj-listbox-result-label {
  font-weight: bold;
}

/*
 * applied to choices in the dropdown
 */
.oj-listbox-results li {
  list-style: none;
  display: list-item;
  background-image: none;
}

/*
 * applied to the hovered choices in the dropdown
 */
.oj-listbox-results .oj-hover {
  background: hsl(203, 2%, 93%);
}

/*
 * applied to disabled choices in the dropdown
 */
.oj-listbox-results .oj-disabled {
  color: hsla(0, 0%, 0%, 0.38);
  display: list-item;
  cursor: default;
}

/*
 * applied to selected choice in the dropdown
 */
.oj-listbox-results .oj-selected {
  display: none;
}

/*
 * This class is only applied transiently to measure the browser native scollbar
 */
.oj-listbox-measure-scrollbar {
  position: absolute;
  top: -10000px;
  width: 100px;
  height: 100px;
  overflow: scroll;
}
html:not([dir=rtl]) .oj-listbox-measure-scrollbar {
  left: -10000px;
}
html[dir=rtl] .oj-listbox-measure-scrollbar {
  right: -10000px;
}

/* icons */
/* -----------------------------*/
/*
 * Applied to the search icon
 */
.oj-listbox-search-icon {
  color: hsla(0, 0%, 0%, 0.8);
}

/*
 * Applied to the search box which includes the search text and the spyglass icon
 */
.oj-listbox-search {
  box-sizing: border-box;
  width: 100%;
  display: inline-flex;
}
@media screen and (max-width: 767.9px) {
  .oj-listbox-search {
    -webkit-text-size-adjust: 115%;
  }
}
.oj-listbox-search {
  background-color: hsl(203, 2%, 99%);
}

/*
 * Applied to the search text
 */
.oj-listbox-input {
  width: 100%;
}

/*
 * Used to cover the border bottom of the select box when the dropdown is open
 */
.oj-listbox-search-wrapper {
  border: 0;
  padding: 5px;
  background-color: hsl(203, 2%, 99%);
}

/*
 * Applied to the spyglass (search icon) container
 */
html:not([dir=rtl]) .oj-listbox-spyglass-box {
  padding-right: 6px;
}
html[dir=rtl] .oj-listbox-spyglass-box {
  padding-left: 6px;
}

/*
 * Applied to the "No matches found" result entry
 */
html:not([dir=rtl]) .oj-listbox-no-results {
  padding-left: 5px;
}
html[dir=rtl] .oj-listbox-no-results {
  padding-right: 5px;
}

/*
 * Applied to the filter message container
 */
.oj-listbox-filter-message-box {
  padding-left: 5px;
  padding-right: 5px;
}

/*
 * Applied to the filter message text
 */
.oj-listbox-filter-message-text {
  line-height: 1.8rem;
  color: hsla(0, 0%, 0%, 0.7);
  font-size: 0.85714rem;
  padding-top: 5px;
  padding-bottom: 5px;
}

/*
 * Applied to the filter message separator
 */
.oj-listbox-filter-message-separator {
  border-bottom: 1px solid hsl(203, 2%, 80%);
}

/**
 * Applied to the wrapper container of the loading indicator in the dropdown for the
 * ojselectcombobox components.
 */
.oj-listbox-loader-wrapper {
  display: flex;
  justify-content: center;
}

/*
 * Applied to the data fetching indicator container
 */
.oj-listbox-loading-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  border-style: none;
}

/*
 * Applied to the data fetching indicator icon
 */
.oj-listbox-loading-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0.5rem auto;
}
.oj-listbox-loading-icon:before {
  content: url("images/spinner_full.gif");
}
.oj-listbox-loading-icon:before {
  transform: translate(-42.5%, -42.5%) scale(0.15);
}

.oj-hicontrast .oj-listbox-results .oj-hover {
  border: 1px solid hsl(203, 2%, 90%);
}

.oj-hicontrast .oj-listbox-results .oj-disabled {
  border: 1px dotted hsl(203, 2%, 90%);
}

/*
 * Applied to the listbox results if it has custonm header.
 */
.oj-listbox-results-with-header {
  padding: 0;
  margin: 0;
}

/*
 * Applied to the listbox custonm header options.
 */
.oj-listbox-results-with-header li {
  background-image: none;
  list-style: outside none none;
}

/*
 * Applied to the listbox custonm header.
 */
.oj-listbox-result-header {
  padding: 5px 5px 0 5px;
}

.oj-listbox-result-header ul {
  padding: 0;
}

.oj-listbox-result-header a.oj-focus {
  text-decoration: underline;
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

/*
 * Applied to the matching text in the dropdown options
 */
.oj-form-control-inherit:not(.oj-form-control-default) .oj-listbox-input {
  color: inherit;
  height: 100%;
  width: 100%;
}
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-listbox-input {
  text-align: inherit;
}
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-listbox-input {
  text-align: inherit;
}
.oj-form-control-inherit:not(.oj-form-control-default) .oj-listbox-input {
  background-color: transparent;
  border-width: 0;
}

/* 
 * applied to the nested option group labels, 
 * they are direct children of li.oj-listbox-result-with-children
 */
.oj-listbox-result-with-children > .oj-listbox-result-label {
  font-weight: 500;
  color: hsla(0, 0%, 0%, 0.85);
}

oj-input-time:not(.oj-complete) {
  visibility: hidden;
}

oj-input-date:not(.oj-complete) {
  visibility: hidden;
}

oj-input-date-time:not(.oj-complete) {
  visibility: hidden;
}

oj-date-picker:not(.oj-complete) {
  visibility: hidden;
}

oj-calendar:not(.oj-complete) {
  visibility: hidden;
}

.oj-inputdatetime,
.oj-inputdatetime-date-time,
.oj-inputdatetime-date-only,
.oj-inputdatetime-time-only {
  font-size: 1rem;
}
@media screen and (max-width: 767.9px) {
  .oj-inputdatetime,
  .oj-inputdatetime-date-time,
  .oj-inputdatetime-date-only,
  .oj-inputdatetime-time-only {
    -webkit-text-size-adjust: 115%;
  }
}
.oj-inputdatetime,
.oj-inputdatetime-date-time,
.oj-inputdatetime-date-only,
.oj-inputdatetime-time-only {
  position: relative;
}

.oj-inputdatetime-inline {
  display: inline-block;
  max-width: 277px;
}

.oj-form-control-full-width.oj-inputdatetime,
.oj-form-control-full-width.oj-inputdatetime-date-time,
.oj-form-control-full-width.oj-inputdatetime-date-only,
.oj-form-control-full-width.oj-inputdatetime-time-only,
.oj-form-control-full-width .oj-inputdatetime,
.oj-form-control-full-width .oj-inputdatetime-date-time,
.oj-form-control-full-width .oj-inputdatetime-date-only,
.oj-form-control-full-width .oj-inputdatetime-time-only {
  max-width: 100%;
}

.oj-datepicker-inline {
  /* use a width of 100% and then max and min width so that when
     there's less room for the form control it can automatically
     get smaller instead of overflowing its boundaries */
  max-width: calc(275px + 2px);
  min-width: 8em;
  width: 100%;
}

.oj-inputdatetime-input-container {
  box-sizing: border-box;
  display: inline-flex;
  width: 100%;
}

.oj-inputdatetime-input-container:focus {
  outline: none;
}

.oj-inputdatetime-input {
  text-align: left;
}
html[dir=rtl] .oj-inputdatetime-input {
  text-align: right;
}
.oj-inputdatetime-input {
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 99%);
  border-style: solid;
  border-color: hsl(203, 2%, 90%);
  border-width: 1px 1px 1px 1px;
  border-radius: 2px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.oj-inputdatetime-input:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputdatetime-input::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputdatetime-input::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputdatetime-input {
  padding: 0 5px;
}
html:not([dir=rtl]) .oj-inputdatetime-input {
  border-width: 1px 0 1px 1px;
  border-radius: 2px 0 0 2px;
}
html[dir=rtl] .oj-inputdatetime-input {
  border-width: 1px 1px 1px 0;
  border-radius: 0 2px 2px 0;
}
.oj-inputdatetime-input {
  flex: 1;
  width: 1em;
  min-width: 1em;
  font-weight: normal;
}

.oj-inputdatetime.oj-text-field .oj-text-field-container {
  height: 2.28571rem;
}

.oj-text-field-middle .oj-inputdatetime-input {
  width: 100%;
  flex: none;
}

.oj-inputdatetime-input-trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  border-style: solid;
  border-color: hsl(203, 2%, 90%);
  background-color: hsl(203, 2%, 99%);
  height: 2.28571rem;
  line-height: 2.28571rem;
}
html:not([dir=rtl]) .oj-inputdatetime-input-trigger {
  border-width: 1px 1px 1px 0;
  border-radius: 0 2px 2px 0;
}
html[dir=rtl] .oj-inputdatetime-input-trigger {
  border-width: 1px 0 1px 1px;
  border-radius: 2px 0 0 2px;
}
.oj-inputdatetime-input-trigger {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: 0;
}

.oj-inputdatetime.oj-warning .oj-inputdatetime-input-trigger {
  border-color: #f8ca75;
}

.oj-inputdatetime:not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-inputdatetime-input {
  border-color: hsl(203, 2%, 90%);
}
html:not([dir=rtl]) .oj-inputdatetime:not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-inputdatetime-input {
  border-width: 1px 0 1px 1px;
}
html[dir=rtl] .oj-inputdatetime:not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-inputdatetime-input {
  border-width: 1px 1px 1px 0;
}

.oj-inputdatetime:not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-inputdatetime-input-trigger {
  border-color: hsl(203, 2%, 90%);
}
html:not([dir=rtl]) .oj-inputdatetime:not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-inputdatetime-input-trigger {
  border-width: 1px 1px 1px 0;
}
html[dir=rtl] .oj-inputdatetime:not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-inputdatetime-input-trigger {
  border-width: 1px 0 1px 1px;
}

.oj-inputdatetime.oj-invalid .oj-inputdatetime-input-trigger {
  border-color: #e65a66;
}

html:not([dir=rtl]) .oj-inputdatetime.oj-invalid .oj-inputdatetime-input,
html:not([dir=rtl]) .oj-inputdatetime.oj-warning .oj-inputdatetime-input {
  border-width: 2px 0 2px 2px;
}
html[dir=rtl] .oj-inputdatetime.oj-invalid .oj-inputdatetime-input,
html[dir=rtl] .oj-inputdatetime.oj-warning .oj-inputdatetime-input {
  border-width: 2px 2px 2px 0;
}

html:not([dir=rtl]) .oj-inputdatetime.oj-invalid .oj-inputdatetime-input-trigger,
html:not([dir=rtl]) .oj-inputdatetime.oj-warning .oj-inputdatetime-input-trigger {
  border-width: 2px 2px 2px 0;
}
html[dir=rtl] .oj-inputdatetime.oj-invalid .oj-inputdatetime-input-trigger,
html[dir=rtl] .oj-inputdatetime.oj-warning .oj-inputdatetime-input-trigger {
  border-width: 2px 0 2px 2px;
}

.oj-inputdatetime.oj-active .oj-inputdatetime-input-trigger,
.oj-inputdatetime.oj-active .oj-inputdatetime-input {
  background-color: hsl(203, 2%, 99%);
}

.oj-inputdatetime.oj-disabled .oj-inputdatetime-input {
  color: hsla(0, 0%, 0%, 0.38);
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 93%);
  opacity: 1;
}

.oj-inputdatetime.oj-loading .oj-inputdatetime-input-container,
.oj-inputdatetime-date-only.oj-loading .oj-datepicker-popup {
  background-image: linear-gradient(90deg, hsl(203, 2%, 93%) 0%, hsl(203, 2%, 98%) 10%, hsl(203, 2%, 93%) 20%);
  animation: LoadingGradientAnimation 3s infinite;
  background-size: 200% 200%;
}

.oj-inputdatetime.oj-loading .oj-inputdatetime-input,
.oj-inputdatetime-date-only.oj-loading .oj-datepicker-inline .oj-datepicker-content {
  background-color: transparent;
}

.oj-inputdatetime.oj-disabled .oj-inputdatetime-input-trigger {
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 93%);
  opacity: 1;
}

.oj-inputdatetime.oj-read-only .oj-inputdatetime-input-trigger {
  display: none;
}

.oj-inputdatetime-calendar-clock-icon,
.oj-inputdatetime-calendar-icon,
.oj-inputdatetime-time-icon {
  cursor: pointer;
  padding: 0 5px;
  vertical-align: middle;
  line-height: inherit;
}

.oj-inputdatetime-calendar-clock-icon.oj-disabled,
.oj-inputdatetime-calendar-icon.oj-disabled,
.oj-inputdatetime-time-icon.oj-disabled {
  background-color: hsl(203, 2%, 93%);
  cursor: default;
}

.oj-inputdatetime-clear-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.28571rem;
  width: 1.5625rem;
  text-decoration: none;
  cursor: default;
}

a.oj-inputdatetime-clear-icon-btn:active {
  background-color: transparent;
}

.oj-inputdatetime-clear-icon {
  margin-top: 1px;
  color: inherit;
}

.oj-inputdatetime .oj-inputtext-clear-icon-btn:focus {
  outline: none;
}

.oj-text-field-container.oj-form-control-empty-clearicon .oj-inputdatetime-clear-icon-btn {
  display: none;
}

.oj-datepicker-popup .oj-popup-content {
  padding: 0;
}

.oj-datepicker-wrapper {
  padding-bottom: 15px;
}

/* Class for the root node that contains the floating calendar */
.oj-datepicker-content {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
html[dir=rtl] .oj-datepicker-content {
  direction: rtl;
}

.oj-datepicker-header {
  margin: 15px 15px 0;
  color: hsla(0, 0%, 0%, 0.85);
  position: relative;
  background: none;
  border: 0;
}

.oj-datepicker-prev-icon,
.oj-datepicker-next-icon {
  position: absolute;
  line-height: calc((275px - 2 * 15px) / 7);
}

html:not([dir=rtl]) .oj-datepicker-prev-icon {
  left: 2px;
}
html[dir=rtl] .oj-datepicker-prev-icon {
  right: 2px;
}

html:not([dir=rtl]) .oj-datepicker-next-icon {
  right: 2px;
}
html[dir=rtl] .oj-datepicker-next-icon {
  left: 2px;
}

.oj-datepicker-title {
  margin: 0 2.2em;
  height: calc((275px - 2 * 15px) / 7);
  line-height: calc((275px - 2 * 15px) / 7);
  text-align: center;
}

.oj-datepicker-title select {
  font-size: 1rem;
  margin: 1px 0;
  background-color: inherit;
  color: inherit;
}

.oj-datepicker-header a.oj-enabled,
.oj-datepicker-buttonpane a.oj-enabled {
  text-decoration: none;
  color: #000000;
}

.oj-datepicker-header a.oj-enabled.oj-hover,
.oj-datepicker-buttonpane a.oj-enabled.oj-hover {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-datepicker-header a.oj-enabled.oj-active,
.oj-datepicker-buttonpane a.oj-enabled.oj-active {
  color: #000000;
}

.oj-datepicker-month-year {
  width: 100%;
}

.oj-datepicker-month {
  margin-right: 20px;
}

.oj-datepicker-month,
.oj-datepicker-year {
  font-size: 18px;
  width: 48%;
  min-width: 0;
}

.oj-datepicker-calendar {
  border-collapse: collapse;
  height: calc(275px - 2 * 15px);
  margin: 0 15px;
  outline: 0 none;
}

.oj-datepicker-calendar th,
.oj-datepicker-calendar td {
  border: 0;
  text-align: center;
}

.oj-datepicker-calendar th {
  padding: 0;
  height: calc((275px - 2 * 15px) / 7);
  color: hsla(0, 0%, 0%, 0.55);
  text-transform: uppercase;
  font-weight: normal;
}

.oj-datepicker-calendar td {
  padding: 0;
}

.oj-datepicker-calendar td span,
.oj-datepicker-calendar td a {
  display: block;
  padding: 0;
  border-radius: 50%;
  box-sizing: border-box;
  width: calc((275px - 2 * 15px) / 7);
  height: calc((275px - 2 * 15px) / 7);
  line-height: calc((275px - 2 * 15px) / 7 - 4px);
  text-align: center;
}

.oj-datepicker-calendar.oj-datepicker-weekdisplay td span,
.oj-datepicker-calendar.oj-datepicker-weekdisplay td a {
  width: calc((275px - 2 * 15px) / 8);
  height: calc((275px - 2 * 15px) / 8);
  line-height: calc((275px - 2 * 15px) / 8 - 4px);
}

.oj-datepicker-calendar.oj-datepicker-monthview,
.oj-datepicker-calendar.oj-datepicker-yearview {
  /* Take up space on right and bottom to make it same size as day view */
  margin-right: calc(15px + 12px);
  margin-left: calc(15px + 11px);
  margin-bottom: 0px;
}

.oj-datepicker-calendar.oj-datepicker-monthview td,
.oj-datepicker-calendar.oj-datepicker-yearview td {
  padding: 8px 3px 3px 4px;
}

.oj-datepicker-calendar.oj-datepicker-monthview td span,
.oj-datepicker-calendar.oj-datepicker-monthview td a,
.oj-datepicker-calendar.oj-datepicker-yearview td span,
.oj-datepicker-calendar.oj-datepicker-yearview td a {
  width: 49px;
  height: 49px;
  line-height: 45px;
  white-space: nowrap;
}

.oj-datepicker-calendar td a:focus {
  outline: none;
}

.oj-datepicker-calendar td a.oj-enabled {
  border: 2px solid transparent;
  color: hsla(0, 0%, 0%, 0.8);
  text-decoration: none;
}

.oj-datepicker-calendar td.oj-datepicker-today a.oj-hover,
.oj-datepicker-calendar td a.oj-hover {
  background-color: rgb(118.38, 183.72, 224.76);
  color: hsl(203, 2%, 100%);
}

.oj-datepicker-calendar td.oj-datepicker-today a.oj-selected,
.oj-datepicker-calendar td a.oj-selected {
  font-weight: bold;
  background: #966486;
  color: hsl(203, 2%, 100%);
}

.oj-datepicker-calendar td.oj-disabled {
  opacity: 1;
}

.oj-datepicker-calendar td.oj-disabled span {
  color: hsla(0, 0%, 0%, 0.38);
}

.oj-datepicker-calendar td.oj-datepicker-other-month a.oj-enabled {
  color: hsla(0, 0%, 0%, 0.55);
}

.oj-datepicker-calendar td.oj-datepicker-today a {
  background-color: hsl(203, 2%, 95%);
  border: 2px solid hsl(203, 2%, 80%);
}

.oj-datepicker-buttonpane {
  box-sizing: border-box;
  height: calc((275px - 2 * 15px) / 7);
  line-height: calc((275px - 2 * 15px) / 7);
  font-size: 18px;
  text-align: center;
  display: inline-block;
  width: 100%;
}
html[dir=rtl] .oj-datepicker-buttonpane {
  clear: right;
}

.oj-datepicker-buttonpane a {
  width: auto;
  overflow: visible;
}

.oj-datepicker-buttonpane .oj-datepicker-single-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* with multiple calendars, need to override the width */
.oj-datepicker-content.oj-datepicker-multi {
  width: auto;
}

.oj-datepicker-group {
  box-sizing: border-box;
}

.oj-datepicker-multi .oj-datepicker-group {
  float: left;
}
html[dir=rtl] .oj-datepicker-multi .oj-datepicker-group {
  float: right;
}

.oj-datepicker-multi-2 .oj-datepicker-group {
  width: 50%;
}

.oj-datepicker-multi-3 .oj-datepicker-group {
  width: 33.3%;
}

.oj-datepicker-multi-4 .oj-datepicker-group {
  width: 25%;
}

html:not([dir=rtl]) .oj-datepicker-multi .oj-datepicker-group-last .oj-datepicker-header,
html:not([dir=rtl]) .oj-datepicker-multi .oj-datepicker-group-middle .oj-datepicker-header {
  border-left-width: 0;
}
html[dir=rtl] .oj-datepicker-multi .oj-datepicker-group-last .oj-datepicker-header,
html[dir=rtl] .oj-datepicker-multi .oj-datepicker-group-middle .oj-datepicker-header {
  border-right-width: 0;
}

.oj-datepicker-multi .oj-datepicker-buttonpane {
  clear: left;
}

.oj-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

.oj-datepicker-unselectable {
  opacity: 0.35;
}

.oj-datepicker-calendar.oj-focus-highlight td.oj-datepicker-days-cell-over a,
.oj-datepicker-calendar.oj-focus-highlight td.oj-datepicker-days-cell-over span {
  border: 2px solid rgb(118.38, 183.72, 224.76);
}

.oj-datepicker-week-col {
  color: hsla(0, 0%, 0%, 0.6);
  width: calc((275px - 2 * 15px) / 8);
}

th.oj-datepicker-week-col {
  background-color: hsl(203, 2%, 98%);
}

td.oj-datepicker-week-col {
  background-color: hsl(203, 2%, 93%);
}

.oj-datepicker-inline {
  margin-bottom: 6px;
}

html .oj-inputdatetime-inline .oj-inputdatetime-time-only {
  margin-bottom: 0;
}

.oj-datetimepicker-switcher {
  background-color: hsl(203, 2%, 95%);
  border-radius: 0 0 1px 1px;
  padding: 5px 15px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.oj-datetimepicker-switcher a.oj-enabled {
  display: inline-block;
  color: #000000;
  text-decoration: none;
  vertical-align: middle;
}

.oj-datetimepicker-switcher a.oj-enabled.oj-hover {
  color: rgb(118.38, 183.72, 224.76);
}

.oj-datetimepicker-switcher a.oj-enabled.oj-active {
  color: #000000;
}

html:not([dir=rtl]) .oj-datetimepicker-switcher .oj-inputdatetime-calendar-icon,
html:not([dir=rtl]) .oj-datetimepicker-switcher .oj-inputdatetime-time-icon {
  padding-left: 0;
}
html[dir=rtl] .oj-datetimepicker-switcher .oj-inputdatetime-calendar-icon,
html[dir=rtl] .oj-datetimepicker-switcher .oj-inputdatetime-time-icon {
  padding-right: 0;
}

html:not([dir=rtl]) .oj-datetimepicker-switcher-buttons a:first-child {
  padding-right: 20px;
}
html[dir=rtl] .oj-datetimepicker-switcher-buttons a:first-child {
  padding-left: 20px;
}

.oj-datepicker-inline .oj-datepicker-content {
  background-color: hsl(203, 2%, 100%);
  border: 1px solid hsl(203, 2%, 88%);
}

.oj-timepicker-popup .oj-popup-content {
  padding: 0;
}

.oj-timepicker-content {
  height: calc((275px - 2 * 15px) * 9 / 7 + 15px);
  padding: 15px;
  min-width: 275px;
  position: relative;
  box-sizing: border-box;
}

.oj-timepicker-header,
.oj-timepicker-footer {
  color: #027bc7;
  font-size: 18px;
  height: 35px;
  line-height: 35px;
  background: none;
  border: 0;
}

.oj-timepicker-header {
  position: relative;
}

.oj-timepicker-cancel-button {
  position: absolute;
}
html:not([dir=rtl]) .oj-timepicker-cancel-button {
  left: 0;
}
html[dir=rtl] .oj-timepicker-cancel-button {
  right: 0;
}

.oj-timepicker-ok-button {
  position: absolute;
}
html:not([dir=rtl]) .oj-timepicker-ok-button {
  right: 0;
}
html[dir=rtl] .oj-timepicker-ok-button {
  left: 0;
}

.oj-timepicker-footer {
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  width: 100%;
}

.oj-timepicker-header a.oj-enabled,
.oj-timepicker-footer a.oj-enabled {
  text-decoration: none;
  color: #027bc7;
}

.oj-timepicker-header a.oj-enabled.oj-hover,
.oj-timepicker-footer a.oj-enabled.oj-hover {
  color: #966486;
}

.oj-timepicker-header a.oj-enabled.oj-active,
.oj-timepicker-footer a.oj-enabled.oj-active {
  color: #027bc7;
}

.oj-timepicker-wheel-group {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 15px 0;
}

.oj-timepicker-wheel {
  position: relative;
  height: 215px;
  width: 79px;
  overflow: hidden;
  box-sizing: border-box;
  outline: 0;
}

.oj-timepicker-wheel.oj-timepicker-minute,
.oj-timepicker-wheel.oj-timepicker-meridian {
  margin-left: 4px;
}

.oj-timepicker-wheel-item {
  transition: all 0.15s;
  top: -100px;
  position: absolute;
  opacity: 0;
  width: 79px;
  text-align: center;
  color: #027bc7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oj-timepicker-wheel-item.oj-disabled {
  color: hsla(0, 0%, 0%, 0.38);
}

.oj-timepicker-wheel-item-content {
  text-align: center;
  white-space: nowrap;
}

.oj-timepicker-wheel.oj-focus .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0 {
  border-radius: 2px;
  background-color: rgb(232.23, 243.12, 249.96);
  color: hsl(0, 0%, 0%);
}

.oj-timepicker-wheel.oj-active .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position1,
.oj-timepicker-wheel.oj-active .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position2,
.oj-timepicker-wheel.oj-active .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-1,
.oj-timepicker-wheel.oj-active .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-2 {
  opacity: 1;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0 {
  font-size: 46px;
  height: 54px;
  top: 78px;
  opacity: 1;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position1,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-1 {
  font-size: 34px;
  height: 40px;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position2,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-2 {
  font-size: 24px;
  height: 30px;
}

.oj-timepicker-wheel-item {
  height: 20px;
}

.oj-timepicker-meridian .oj-timepicker-wheel-item-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position1 {
  top: 136px;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position2 {
  top: 180px;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position3,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position4,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position5,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position6,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position7 {
  top: 214px;
  visibility: hidden;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-1 {
  top: 34px;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-2 {
  top: 0;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-3,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-4,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-5,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-6,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-7 {
  top: -24px;
  visibility: hidden;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-text-field-middle,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input-trigger {
  height: 100%;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime:not(.oj-disabled) .oj-inputdatetime-input-trigger {
  background-color: transparent;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime:not(.oj-invalid):not(.oj-warning) .oj-inputdatetime-input-trigger {
  border-width: 0;
}

/* Override default options*/
.oj-inputdatetime-option-defaults {
  font-family: '{"renderMode":"jet","keyboardEdit":"enabled","datePicker":{"footerLayout":"today"},"converterYear":"2-digit","showPickerOnDesktop":"enabled"}';
}

.oj-datetimepicker-config {
  font-family: "{}";
}

.oj-text-field .oj-inputdatetime-input-trigger {
  border: 0;
}

.oj-inputdatetime .oj-inputdatetime-input {
  border: 0;
  background-color: transparent;
}

.oj-text-field-label-inside .oj-inputdatetime-input {
  border: 0;
  background-color: transparent;
  padding: 0.85rem 5px 0;
  width: 100%;
}

.oj-text-field-label-inside .oj-inputdatetime-input-trigger {
  border: 0;
  min-height: 2.75rem;
}

/* combobox */
/* --------------------------------------------------------------- */
oj-combobox:not(.oj-complete) {
  visibility: hidden;
}

.oj-combobox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 18em;
  min-width: 8em;
  font-size: 1rem;
}
@media screen and (max-width: 767.9px) {
  .oj-combobox {
    -webkit-text-size-adjust: 115%;
  }
}
.oj-combobox {
  width: 100%;
}

.oj-form-control-full-width.oj-combobox,
.oj-form-control-full-width .oj-combobox {
  max-width: 100%;
}

/* single-select */
/* 
 * Applied to the single-select box which includes the input field and the dropdown open icon
 */
.oj-combobox-choice {
  text-align: left;
}
html[dir=rtl] .oj-combobox-choice {
  text-align: right;
}
.oj-combobox-choice {
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 99%);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.oj-combobox-choice:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-combobox-choice::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-combobox-choice::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-combobox-choice {
  padding-bottom: calc(1px - 1px + 0px);
}
html:not([dir=rtl]) .oj-combobox-choice {
  padding-left: 5px;
}
html[dir=rtl] .oj-combobox-choice {
  padding-right: 5px;
}
.oj-combobox-choice {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  outline: 0;
  overflow: hidden;
  white-space: nowrap;
  background-clip: padding-box;
  height: 100%;
}

.oj-text-field.oj-combobox-multi .oj-text-field-container {
  height: auto;
}

/* 
 * Applied to the input field
 */
.oj-combobox-input {
  flex: 1;
  width: 1em;
  min-width: 1em;
  border: 0;
  outline: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: hsl(203, 2%, 99%);
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
  box-shadow: none;
}
@media screen and (max-width: 767.9px) {
  .oj-combobox-input {
    -webkit-text-size-adjust: 115%;
  }
}
.oj-combobox-input:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-combobox-input::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-combobox-input::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}

/* Styling for readonly mode */
.oj-combobox.oj-read-only .oj-combobox-choice,
.oj-combobox.oj-read-only .oj-combobox-choices {
  background-color: transparent;
  border-color: transparent;
  outline: none;
  padding-bottom: 0;
}
html:not([dir=rtl]) .oj-combobox.oj-read-only .oj-combobox-choice,
html:not([dir=rtl]) .oj-combobox.oj-read-only .oj-combobox-choices {
  padding-left: 0;
}
html[dir=rtl] .oj-combobox.oj-read-only .oj-combobox-choice,
html[dir=rtl] .oj-combobox.oj-read-only .oj-combobox-choices {
  padding-right: 0;
}

/* apply to the selected entries */
.oj-combobox.oj-read-only .oj-combobox-input,
.oj-combobox.oj-read-only .oj-combobox-selected-choice {
  outline: none;
  margin-top: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  line-height: 2.28571rem;
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
  font-weight: normal;
}

/* apply to the selected entry in readonly mode */
html:not([dir=rtl]) .oj-combobox.oj-read-only li.oj-combobox-selected-choice {
  padding-left: 0;
}
html[dir=rtl] .oj-combobox.oj-read-only li.oj-combobox-selected-choice {
  padding-right: 0;
}

/* don't show dropdown trigger */
.oj-combobox.oj-read-only .oj-combobox-arrow,
.oj-combobox.oj-read-only .oj-combobox-divider {
  display: none;
}

/* don't show clear entry trigger and search field button */
.oj-combobox.oj-read-only .oj-combobox-clear-entry,
.oj-combobox.oj-read-only .oj-combobox-search-field {
  display: none;
}

.oj-combobox-multi.oj-loading .oj-combobox-choices,
.oj-combobox.oj-loading .oj-combobox-choice {
  background-image: linear-gradient(90deg, hsl(203, 2%, 93%) 0%, hsl(203, 2%, 98%) 10%, hsl(203, 2%, 93%) 20%);
  animation: LoadingGradientAnimation 3s infinite;
  background-size: 200% 200%;
  opacity: 1;
}

.oj-combobox-multi.oj-loading .oj-combobox-input,
.oj-combobox.oj-loading .oj-combobox-input {
  background-color: transparent;
}

/* Styling for text-align */
.oj-form-control-text-align-right.oj-combobox .oj-combobox-input {
  text-align: right;
}

.oj-form-control-text-align-start.oj-combobox .oj-combobox-input {
  text-align: left;
}
html[dir=rtl] .oj-form-control-text-align-start.oj-combobox .oj-combobox-input {
  text-align: right;
}

.oj-form-control-text-align-end.oj-combobox .oj-combobox-input {
  text-align: right;
}
html[dir=rtl] .oj-form-control-text-align-end.oj-combobox .oj-combobox-input {
  text-align: left;
}

.oj-form-control-text-align-right.oj-combobox .oj-combobox-choices li {
  float: right;
}

.oj-form-control-text-align-start.oj-combobox .oj-combobox-choices li {
  float: left;
}
html[dir=rtl] .oj-form-control-text-align-start.oj-combobox .oj-combobox-choices li {
  float: right;
}

.oj-form-control-text-align-end.oj-combobox .oj-combobox-choices li {
  float: right;
}
html[dir=rtl] .oj-form-control-text-align-end.oj-combobox .oj-combobox-choices li {
  float: left;
}

html:not([dir=rtl]) .oj-form-control-text-align-right .oj-combobox-selected-choice,
html:not([dir=rtl]) .oj-form-control-text-align-end .oj-combobox-selected-choice {
  margin: 5px 0 0 6px;
}

html[dir=rtl] .oj-form-control-text-align-end .oj-combobox-selected-choice {
  margin: 5px 6px 0 0;
}

/* 
 * Applied to the single-select drop down arrow
 */
.oj-combobox-arrow {
  box-sizing: border-box;
  display: inline-flex;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
}

.oj-combobox-arrow:hover, .oj-combobox-arrow:focus {
  text-decoration: none;
}

/*
 * Applied to the divider between the input and drop down arrow
 */
.oj-combobox-divider {
  box-sizing: border-box;
  display: inline-flex;
  border-left: solid 1px hsl(203, 2%, 90%);
}
html:not([dir=rtl]) .oj-combobox-divider {
  margin-left: 5px;
}
html[dir=rtl] .oj-combobox-divider {
  margin-right: 5px;
}
.oj-combobox-divider {
  height: 80%;
  vertical-align: middle;
}

/* multi-select */
/* 
 * Applied to the multi-select box which includes the input field and the selected choices
 */
.oj-combobox-choices {
  box-sizing: border-box;
  text-align: left;
}
html[dir=rtl] .oj-combobox-choices {
  text-align: right;
}
.oj-combobox-choices {
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 99%);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.oj-combobox-choices:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-combobox-choices::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-combobox-choices::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-combobox-choices {
  min-height: 2.28571rem;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  height: auto;
  margin: 0;
  position: relative;
  cursor: text;
  overflow: hidden;
  width: 100%;
}

/* 
 * Applied to the multi-select box list items which include the search field and the selected choices
 */
.oj-combobox-choices li {
  list-style: none;
}
html:not([dir=rtl]) .oj-combobox-choices li {
  float: left;
}
html[dir=rtl] .oj-combobox-choices li {
  float: right;
}

/* 
 * Applied to the multi-select search field which is an li to wrap the input
 */
.oj-combobox-search-field {
  margin-top: 5px;
  padding: 0;
  white-space: nowrap;
  line-height: calc(2.28571rem * 0.9);
}

/* 
 * Applied to the multi-select selected choice
 */
.oj-combobox-selected-choice {
  line-height: 1.9rem;
  display: flex;
  align-items: center;
  cursor: default;
  border-radius: 2px;
  border: 1px solid #966486;
  color: hsl(0, 0%, 0%);
  background-clip: padding-box;
}
html:not([dir=rtl]) .oj-combobox-selected-choice {
  padding: 0 4px 0 7px;
  margin: 5px 6px 0 0;
}
html[dir=rtl] .oj-combobox-selected-choice {
  padding: 0 7px 0 4px;
  margin: 5px 0 0 6px;
}

/* 
 * Applied to the multi-select selected choice when getting focus
 */
.oj-combobox-selected-choice.oj-focus {
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

/*
 * Applied to the multi-select selected choice when disabled
 */
.oj-combobox.oj-disabled .oj-combobox-selected-choice {
  padding: 0;
}

/* 
 * Applied to the label of the selected choice
 */
.oj-combobox-selected-choice-label,
.oj-combobox-selected-choice-separator {
  display: inline-block;
  vertical-align: middle;
  word-break: break-word;
}

/*
 * Applied to the clear entry field of the selected choice
 */
.oj-combobox-clear-entry {
  display: inline-block;
  outline: none;
  text-align: center;
  vertical-align: middle;
  line-height: 100%;
}
html:not([dir=rtl]) .oj-combobox-clear-entry {
  right: 3px;
}
html[dir=rtl] .oj-combobox-clear-entry {
  left: 3px;
}

/* end multiselect */
/* 
 * Invalid styling for the widget 
 */
.oj-combobox.oj-invalid .oj-combobox-choice,
.oj-combobox-multi.oj-invalid .oj-combobox-choices,
.oj-combobox.oj-warning .oj-combobox-choice,
.oj-combobox-multi.oj-warning .oj-combobox-choices {
  border: 0;
  border-width: 0;
  border-style: none;
}

/* 
 * Disabled styles for single-select 
 */
.oj-combobox.oj-disabled .oj-combobox-choice,
.oj-combobox.oj-disabled input {
  color: hsla(0, 0%, 0%, 0.38);
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 93%);
  opacity: 1;
}

.oj-combobox.oj-disabled input {
  border: 0;
}

.oj-combobox.oj-disabled .oj-combobox-arrow {
  cursor: default;
}

.oj-combobox.oj-disabled .oj-combobox-divider {
  border-color: hsl(203, 2%, 93%);
}

/* 
 * Disabled styles for multi-select 
 */
.oj-combobox-multi.oj-disabled .oj-combobox-choices,
.oj-combobox-multi.oj-disabled .oj-combobox-selected-choice,
.oj-combobox-multi.oj-disabled .oj-combobox-selected-choice.oj-focus,
.oj-combobox-multi.oj-disabled input {
  color: hsla(0, 0%, 0%, 0.38);
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 93%);
  opacity: 1;
  outline: 0;
}

.oj-combobox-multi.oj-disabled .oj-combobox-choices {
  width: 100%;
}

.oj-combobox-multi.oj-disabled input {
  border: 0;
}

.oj-combobox-multi.oj-disabled .oj-combobox-clear-entry {
  display: none;
  background: none;
}

/*
 * Styling for focus state
 */
.oj-combobox:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-combobox-choice,
.oj-combobox:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-combobox-choices {
  border-color: hsl(203, 2%, 90%);
  border-width: 1px 1px 1px 1px;
}

.oj-combobox:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-combobox-choice {
  padding-bottom: 0;
}

.oj-combobox:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-combobox-choices {
  padding-bottom: 5px;
}

/**
 * Styling for loading state
 */
.oj-combobox.oj-loading .oj-combobox-accessible-container {
  background-image: linear-gradient(90deg, hsl(203, 2%, 93%) 0%, hsl(203, 2%, 98%) 10%, hsl(203, 2%, 93%) 20%);
  animation: LoadingGradientAnimation 3s infinite;
  background-size: 200% 200%;
  opacity: 1;
}

.oj-combobox.oj-loading .oj-combobox-arrow,
.oj-combobox.oj-loading .oj-combobox-divider {
  display: none;
}

/* icon */
/* -----------------------------*/
/* 
 * Applied to the clear entry icon
 */
.oj-combobox-clear-entry-icon {
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

/* icon */
/* -----------------------------*/
/* 
 * Applied to the single-select drop down open icon
 */
.oj-combobox-open-icon {
  line-height: inherit;
  padding-right: 5px;
  padding-left: 5px;
}

/* clear entry icon for combobox */
/* Override default options*/
.oj-combobox-option-defaults {
  font-family: '{"loadingIndicatorDelay":"250"}';
}

.oj-combobox .oj-button {
  margin-bottom: 0;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox-input {
  color: inherit;
  height: 100%;
  width: 100%;
}
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox-input {
  text-align: inherit;
}
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox-input {
  text-align: inherit;
}
.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox-input {
  border-width: 0;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox:not(.oj-disabled) .oj-combobox-choice,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox:not(.oj-disabled) .oj-combobox-choices,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox-input {
  background-color: transparent;
}

.oj-text-field-label-inside .oj-combobox-choice {
  border: 0;
  background-color: transparent;
  width: 100%;
  min-height: 2.75rem;
}
html:not([dir=rtl]) .oj-text-field-label-inside .oj-combobox-choice {
  padding: 0;
}
html[dir=rtl] .oj-text-field-label-inside .oj-combobox-choice {
  padding: 0;
}

.oj-text-field-label-inside .oj-combobox-input {
  padding: 0.85rem 5px 0;
}

.oj-text-field-label-inside .oj-combobox-choices {
  border: 0;
  background-color: transparent;
  padding: 0.85rem 5px 5px;
}

.oj-text-field-label-inside .oj-combobox-choice.oj-hover,
.oj-text-field-label-inside .oj-combobox-choices.oj-hover {
  background-color: transparent;
}

.oj-text-field-label-inside.oj-combobox.oj-read-only .oj-combobox-choice {
  padding: 0;
}
html:not([dir=rtl]) .oj-text-field-label-inside.oj-combobox.oj-read-only .oj-combobox-choice {
  margin-left: 0;
}
html[dir=rtl] .oj-text-field-label-inside.oj-combobox.oj-read-only .oj-combobox-choice {
  margin-right: 0;
}

.oj-text-field-label-inside.oj-combobox.oj-read-only .oj-combobox-input,
.oj-text-field-label-inside.oj-combobox.oj-read-only .oj-combobox-choices {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.oj-text-field-label-inside.oj-combobox.oj-read-only .oj-combobox-selected-choice {
  line-height: normal;
}

.oj-text-field-label-inside.oj-combobox.oj-disabled .oj-text-field-container {
  background-color: hsl(203, 2%, 93%);
}

html:not([dir=rtl]) .oj-text-field-label-inside:not(.oj-read-only) .oj-combobox-selected-choice {
  margin: 10px 6px 0 0;
}
html[dir=rtl] .oj-text-field-label-inside:not(.oj-read-only) .oj-combobox-selected-choice {
  margin: 10px 0 0 6px;
}

.oj-text-field-label-inside.oj-combobox {
  max-width: 100%;
}

.oj-text-field-label-inside .oj-combobox-label {
  align-self: flex-start;
}

/* searchselect */
/* --------------------------------------------------------------- */
oj-searchselect:not(.oj-complete) {
  visibility: hidden;
}

.oj-searchselect {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 18em;
  min-width: 8em;
  font-size: 1rem;
}
@media screen and (max-width: 767.9px) {
  .oj-searchselect {
    -webkit-text-size-adjust: 115%;
  }
}
.oj-searchselect {
  width: 100%;
}

.oj-form-control-full-width.oj-searchselect,
.oj-form-control-full-width .oj-searchselect {
  max-width: 100%;
}

.oj-searchselect .oj-text-field-middle {
  width: 100%;
  flex: auto;
}

/* single-select */
/*
 * Applied to the input field
 */
.oj-searchselect-input {
  flex: 1;
  width: 1em;
  min-width: 1em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: transparent;
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
  box-shadow: none;
}
@media screen and (max-width: 767.9px) {
  .oj-searchselect-input {
    -webkit-text-size-adjust: 115%;
  }
}
.oj-searchselect-input:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-searchselect-input::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-searchselect-input::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-searchselect-input {
  text-align: left;
}
html[dir=rtl] .oj-searchselect-input {
  text-align: right;
}
.oj-searchselect-input {
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 99%);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.oj-searchselect-input:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-searchselect-input::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-searchselect-input::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-searchselect-input {
  padding-bottom: calc(1px - 1px + 0px);
}
html:not([dir=rtl]) .oj-searchselect-input {
  padding-left: 5px;
}
html[dir=rtl] .oj-searchselect-input {
  padding-right: 5px;
}

.oj-searchselect.oj-text-field .oj-text-field-container {
  height: 2.28571rem;
}

/*
 * Applied to the filter field on desktop and mobile.
 */
.oj-searchselect-filter.oj-form-control {
  max-width: 100%;
}

/*
 * Applied to the filter field on desktop.
 */
.oj-searchselect .oj-searchselect-filter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: inherit;
}

.oj-searchselect .oj-searchselect-filter.oj-form-control {
  margin-bottom: 0;
}

.oj-searchselect .oj-searchselect-filter.oj-text-field .oj-text-field-container {
  background-color: transparent;
  border-color: transparent;
}

html:not([dir=rtl]) .oj-searchselect.oj-form-control-text-align-end .oj-searchselect-filter,
html:not([dir=rtl]) .oj-searchselect.oj-form-control-text-align-right .oj-searchselect-filter {
  padding-right: 1px;
}

html[dir=rtl] .oj-searchselect.oj-form-control-text-align-end .oj-searchselect-filter {
  padding-left: 1px;
}

/* Styling for readonly mode */
/* don't show dropdown trigger or mobile clear value icon */
.oj-searchselect.oj-read-only .oj-searchselect-arrow,
.oj-searchselect.oj-read-only .oj-searchselect-clear-value {
  display: none;
}

/* don't show mobile clear value icon when field is required */
.oj-searchselect.oj-required .oj-searchselect-clear-value {
  display: none;
}

/*
 * Applied to the single-select drop down arrow and mobile clear value icon
 */
.oj-searchselect-arrow,
.oj-searchselect-clear-value {
  cursor: pointer;
}

/*
 * Only show either the dropdown arrow or the clear value icon on mobile depending on whether
 * a value is selected.
 */
.oj-searchselect-mobile.oj-searchselect-no-value .oj-searchselect-clear-value,
.oj-searchselect-mobile.oj-disabled .oj-searchselect-clear-value,
.oj-searchselect-mobile:not(.oj-searchselect-no-value):not(.oj-disabled):not(.oj-required) .oj-searchselect-arrow {
  display: none;
}

/*
 * On desktop, hide the main field when the filter field is shown (when the component
 * has focus) and vice versa
 */
.oj-searchselect.oj-searchselect-filter-shown:not(.oj-searchselect-mobile) .oj-searchselect-main-field .oj-searchselect-arrow,
.oj-searchselect.oj-searchselect-filter-shown:not(.oj-searchselect-mobile) .oj-searchselect-main-field .oj-searchselect-input,
.oj-searchselect:not(.oj-searchselect-filter-shown):not(.oj-searchselect-mobile) .oj-searchselect-filter {
  visibility: hidden;
}

.oj-searchselect-arrow,
.oj-searchselect-clear-value,
.oj-searchselect-back-button {
  box-sizing: border-box;
  display: inline-flex;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  align-items: center;
  justify-content: center;
}

.oj-searchselect-arrow:hover, .oj-searchselect-arrow:focus,
.oj-searchselect-clear-value:hover, .oj-searchselect-clear-value:focus,
.oj-searchselect-back-button:hover, .oj-searchselect-back-button:focus {
  text-decoration: none;
}

/*
 * Disabled styles for single-select
 */
.oj-searchselect.oj-disabled .oj-searchselect-input {
  border-style: solid;
  color: hsla(0, 0%, 0%, 0.38);
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 93%);
  opacity: 1;
}

.oj-searchselect.oj-disabled .oj-searchselect-arrow,
.oj-searchselect.oj-disabled .oj-searchselect-clear-value {
  cursor: default;
  background-color: hsl(203, 2%, 93%);
}

/*
 * Styling for focus state
 */
.oj-searchselect:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-searchselect-input:focus {
  border-color: hsl(203, 2%, 90%);
  border-width: 1px 1px 1px 1px;
  padding-bottom: 0;
}

.oj-searchselect.oj-loading .oj-searchselect-input {
  background-image: linear-gradient(90deg, hsl(203, 2%, 93%) 0%, hsl(203, 2%, 98%) 10%, hsl(203, 2%, 93%) 20%);
  animation: LoadingGradientAnimation 3s infinite;
  background-size: 200% 200%;
  opacity: 1;
}

.oj-searchselect.oj-loading .oj-searchselect-arrow,
.oj-searchselect.oj-loading .oj-searchselect-clear-value {
  display: none;
}

/*
 * Applied to results collection element
 */
/*
 * Applied to results collection element when the dropdown is initially opened while the
 * data is being fetched
 */
.oj-listbox-initial-open .oj-select-results {
  min-height: 10rem;
}

.oj-listbox-fullscreen .oj-select-results {
  max-height: none;
}

/* icon */
/* -----------------------------*/
/*
 * Applied to the single-select drop down open icon
 */
/*
 * Applied to the single-select mobile clear value icon
 */
.oj-searchselect-open-icon,
.oj-searchselect-clear-value-icon {
  line-height: inherit;
  padding-right: 5px;
  padding-left: 5px;
  min-height: 2.28571rem;
  min-width: 2.28571rem;
  margin: unset;
}

/*
 * Applied to the single-select mobile filter field back icon
 */
.oj-searchselect-back-icon {
  line-height: inherit;
  padding-right: 5px;
  padding-left: 5px;
}

/*
 * Applied to the container of the no data template shown in the default listView.
 */
.oj-searchselect-no-results-container {
  display: none;
  height: 0;
}

/**
 * Applied to the default list view if no results are found
 */
.oj-listbox-searchselect-no-results .oj-select-results {
  display: none;
}

/* Styling on collection current item */
.oj-listbox-selectsingle .oj-listview-current-item:not(.oj-selected) {
  background-color: hsl(203, 2%, 95%);
}

.oj-listbox-selectsingle .oj-table-body-current-row:not(.oj-selected) .oj-table-data-cell {
  background-image: linear-gradient(hsl(203, 2%, 95%), hsl(203, 2%, 95%));
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext:not(.oj-disabled):not(.oj-read-only) .oj-inputtext-input:focus {
  border-width: 0;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-arrow,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-clear-value {
  align-self: stretch;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect .oj-text-field-middle {
  height: 100%;
}

/* clears the 'X' from Internet Explorer */
.oj-searchselect input[type=search]::-ms-clear,
.oj-searchselect input[type=search]::-ms-reveal,
.oj-listbox-searchselect .oj-searchselect-filter input[type=search]::-ms-clear,
.oj-listbox-searchselect .oj-searchselect-filter input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* Default options*/
.oj-searchselect-option-defaults {
  font-family: '{"showIndicatorDelay":"250"}';
}

.oj-text-field-label-inside .oj-searchselect-open-icon {
  min-height: 2.75rem;
  min-width: 2.75rem;
}

/* select */
/* --------------------------------------------------------------- */
oj-select:not(.oj-complete) {
  visibility: hidden;
}

.oj-select {
  position: relative;
  display: inline-block;
  max-width: 18em;
  min-width: 8em;
  font-size: 1rem;
}
@media screen and (max-width: 767.9px) {
  .oj-select {
    -webkit-text-size-adjust: 115%;
  }
}
.oj-select {
  width: 100%;
  box-sizing: border-box;
}

.oj-form-control-full-width.oj-select,
.oj-form-control-full-width .oj-select {
  max-width: 100%;
}

/* 
 * Focus ring support around the select box 
 */
.oj-select .oj-select-accessible-container:focus {
  outline: none;
}

.oj-select.oj-focus-highlight .oj-text-field-container {
  outline: dotted 1px hsla(0, 0%, 0%, 0.8);
  outline: -webkit-focus-ring-color auto;
}

/* 
 * Applied to the select box which includes the selected text and the dropdown open icon
 */
.oj-select-choice {
  text-align: left;
}
html[dir=rtl] .oj-select-choice {
  text-align: right;
}
.oj-select-choice {
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 99%);
  border-style: solid;
  border-color: hsl(203, 2%, 90%);
  border-width: 1px 1px 1px 1px;
  border-radius: 2px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.oj-select-choice:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-select-choice::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-select-choice::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-select-choice {
  border-width: 0;
}
html:not([dir=rtl]) .oj-select-choice {
  padding-left: 5px;
  padding-right: 0;
}
html[dir=rtl] .oj-select-choice {
  padding-left: 0;
  padding-right: 5px;
}
.oj-select-choice {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-clip: padding-box;
  text-overflow: ellipsis;
  height: 100%;
}

.oj-select-choice .oj-text-field-middle {
  height: auto;
  min-width: 0;
}

/* Styling for readonly mode */
.oj-select.oj-read-only .oj-select-choice,
.oj-select.oj-read-only .oj-select-choices {
  background-color: transparent;
  border-color: transparent;
  outline: none;
  padding-bottom: 0;
}
html:not([dir=rtl]) .oj-select.oj-read-only .oj-select-choice,
html:not([dir=rtl]) .oj-select.oj-read-only .oj-select-choices {
  padding-left: 0;
}
html[dir=rtl] .oj-select.oj-read-only .oj-select-choice,
html[dir=rtl] .oj-select.oj-read-only .oj-select-choices {
  padding-right: 0;
}

.oj-select.oj-read-only .oj-select-choices {
  min-height: 2.28571rem;
}

/* apply to the selected entries */
.oj-select.oj-read-only .oj-select-chosen,
.oj-select.oj-read-only .oj-select-selected-choice {
  outline: none;
  margin-top: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  line-height: 2.28571rem;
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
  font-weight: normal;
}

/* apply to the selected entry in readonly mode */
html:not([dir=rtl]) .oj-select.oj-read-only li.oj-select-selected-choice {
  padding-left: 0;
}
html[dir=rtl] .oj-select.oj-read-only li.oj-select-selected-choice {
  padding-right: 0;
}

/* don't show dropdown trigger */
.oj-select.oj-read-only .oj-select-arrow {
  display: none;
}

/* don't show clear entry trigger */
.oj-select.oj-read-only .oj-select-clear-entry {
  display: none;
}

/* Styling for text-align */
.oj-form-control-text-align-right.oj-select .oj-select-choice {
  text-align: right;
}

.oj-form-control-text-align-start.oj-select .oj-select-choice {
  text-align: left;
}
html[dir=rtl] .oj-form-control-text-align-start.oj-select .oj-select-choice {
  text-align: right;
}

.oj-form-control-text-align-end.oj-select .oj-select-choice {
  text-align: right;
}
html[dir=rtl] .oj-form-control-text-align-end.oj-select .oj-select-choice {
  text-align: left;
}

/* Styling for native render mode text-align */
.oj-form-control-text-align-right.oj-select .oj-select-select {
  text-align: right;
  direction: rtl;
}
html:not([dir=rtl]) .oj-form-control-text-align-right.oj-select .oj-select-select {
  padding-right: calc(16px + 5px + 5px);
}

.oj-form-control-text-align-start.oj-select .oj-select-select {
  text-align: left;
}
html[dir=rtl] .oj-form-control-text-align-start.oj-select .oj-select-select {
  text-align: right;
}
html:not([dir=rtl]) .oj-form-control-text-align-start.oj-select .oj-select-select {
  direction: ltr;
}
html[dir=rtl] .oj-form-control-text-align-start.oj-select .oj-select-select {
  direction: rtl;
}

.oj-form-control-text-align-end.oj-select .oj-select-select {
  text-align: right;
}
html[dir=rtl] .oj-form-control-text-align-end.oj-select .oj-select-select {
  text-align: left;
}
html:not([dir=rtl]) .oj-form-control-text-align-end.oj-select .oj-select-select {
  direction: rtl;
  padding-right: calc(16px + 5px + 5px);
}
html[dir=rtl] .oj-form-control-text-align-end.oj-select .oj-select-select {
  direction: ltr;
  padding-left: calc(16px + 5px + 5px);
}

.oj-form-control-text-align-right.oj-select .oj-select-choices li {
  float: right;
}

.oj-form-control-text-align-start.oj-select .oj-select-choices li {
  float: left;
}
html[dir=rtl] .oj-form-control-text-align-start.oj-select .oj-select-choices li {
  float: right;
}

.oj-form-control-text-align-end.oj-select .oj-select-choices li {
  float: right;
}
html[dir=rtl] .oj-form-control-text-align-end.oj-select .oj-select-choices li {
  float: left;
}

html:not([dir=rtl]) .oj-form-control-text-align-right .oj-select-selected-choice,
html:not([dir=rtl]) .oj-form-control-text-align-end .oj-select-selected-choice {
  margin: 5px 0 0 6px;
}

html[dir=rtl] .oj-form-control-text-align-end .oj-select-selected-choice {
  margin: 5px 6px 0 0;
}

/* multi-select */
/* 
 * Applied to the multi-select box which includes the input field and the selected choices
 */
.oj-select-choices {
  box-sizing: border-box;
  height: auto;
  min-height: calc(2.28571rem * 1.25);
  padding: 0 5px 5px;
  text-align: left;
}
html[dir=rtl] .oj-select-choices {
  text-align: right;
}
.oj-select-choices {
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 99%);
  border-style: solid;
  border-color: hsl(203, 2%, 90%);
  border-width: 1px 1px 1px 1px;
  border-radius: 2px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.oj-select-choices:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-select-choices::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-select-choices::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-select-choices {
  border-width: 0;
  margin: 0;
  cursor: text;
  overflow: hidden;
  width: 100%;
}

.oj-select-multi .oj-select-accessible-container {
  width: 100%;
}

/* 
 * Applied to the multi-select box list items which include the search field and the selected choices
 */
.oj-select-choices li {
  list-style: none;
}
html:not([dir=rtl]) .oj-select-choices li {
  float: left;
}
html[dir=rtl] .oj-select-choices li {
  float: right;
}

/* 
 * Applied to the multi-select placeholder
 */
.oj-select-multi .oj-select-default {
  margin-top: 5px;
  padding: 0;
  line-height: calc(2.28571rem * 0.9);
  color: hsla(0, 0%, 0%, 0.55);
  font-style: italic;
}

/* 
 * Applied to the input field. Override default .oj-listbox-input
 */
.oj-select-multi .oj-listbox-input {
  background-color: hsl(203, 2%, 99%);
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
}
@media screen and (max-width: 767.9px) {
  .oj-select-multi .oj-listbox-input {
    -webkit-text-size-adjust: 115%;
  }
}
.oj-select-multi .oj-listbox-input {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-top: 0;
  padding-bottom: 0;
}
html:not([dir=rtl]) .oj-select-multi .oj-listbox-input {
  padding-right: 0;
  padding-left: 0;
}
html[dir=rtl] .oj-select-multi .oj-listbox-input {
  padding-left: 0;
  padding-right: 0;
}

/* 
 * Applied to the multi-select selected choice
 */
.oj-select-selected-choice {
  line-height: 1.9rem;
  display: flex;
  align-items: center;
  cursor: default;
  border-radius: 2px;
  border: 1px solid #966486;
  color: hsl(0, 0%, 0%);
  background-clip: padding-box;
}
html:not([dir=rtl]) .oj-select-selected-choice {
  padding: 0 4px 0 7px;
  margin: 5px 6px 0 0;
}
html[dir=rtl] .oj-select-selected-choice {
  padding: 0 7px 0 4px;
  margin: 5px 0 0 6px;
}

/* 
 * Applied to the multi-select selected choice when getting focus
 */
.oj-select-selected-choice.oj-focus {
  outline: dotted 1px hsl(0, 0%, 0%);
  outline: -webkit-focus-ring-color auto;
}

/*
 * Applied to the multi-select selected choice when disabled
 */
.oj-select.oj-disabled .oj-select-selected-choice {
  padding: 0;
}

/* 
 * Applied to the label of the selected choice
 */
.oj-select-selected-choice-label,
.oj-select-selected-choice-separator {
  display: inline-block;
  vertical-align: middle;
  word-break: break-word;
}

/*
 * Applied to the clear entry field of the selected choice
 */
.oj-select-clear-entry {
  display: inline-block;
  outline: none;
  text-align: center;
  vertical-align: middle;
  line-height: 100%;
}
html:not([dir=rtl]) .oj-select-clear-entry {
  right: 3px;
}
html[dir=rtl] .oj-select-clear-entry {
  left: 3px;
}

/* end multiselect */
/* Invalid/Warning styling for the widget */
/* The borders are no longer on this element */
.oj-select.oj-invalid .oj-select-choice,
.oj-select-native.oj-invalid .oj-select-select,
.oj-select-multi.oj-invalid .oj-select-choices,
.oj-select.oj-warning .oj-select-choice,
.oj-select-native.oj-warning .oj-select-select,
.oj-select-multi.oj-warning .oj-select-choices {
  border-width: 0;
}

/* disabled styles  for single-select */
.oj-select.oj-disabled .oj-select-choice {
  color: hsla(0, 0%, 0%, 0.38);
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 93%);
  opacity: 1;
}

/* 
 * Disabled styles for multi-select 
 */
.oj-select-multi.oj-disabled .oj-select-choices,
.oj-select-multi.oj-disabled .oj-select-selected-choice,
.oj-select-multi.oj-disabled .oj-select-selected-choice.oj-focus,
.oj-select-multi.oj-disabled input {
  color: hsla(0, 0%, 0%, 0.38);
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 93%);
  opacity: 1;
  outline: 0;
}

.oj-select-multi.oj-disabled .oj-select-clear-entry {
  display: none;
  background: none;
}

/* 
 * Applied to the place holder text
 */
.oj-select-chosen.oj-select-default {
  color: hsla(0, 0%, 0%, 0.55);
  font-style: italic;
}

/* 
 * Applied to the selected text
 */
.oj-select-chosen {
  border: 0;
  outline: 0;
  white-space: nowrap;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  box-shadow: none;
}
html:not([dir=rtl]) .oj-select-chosen {
  padding-right: 5px;
}
html[dir=rtl] .oj-select-chosen {
  padding-left: 5px;
}
.oj-select-chosen {
  height: 100%;
}

/* 
 * Applied to the dropdown open icon in jet theme
 */
.oj-select-jet .oj-select-arrow {
  flex: 0 0 auto;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
}

.oj-hicontrast .oj-select.oj-disabled {
  border-style: dotted;
}

/* 
 * Applied to the dropdown open icon
 */
html[dir=rtl] .oj-select-open-icon {
  padding-left: 5px;
  padding-right: 5px;
}
html:not([dir=rtl]) .oj-select-open-icon {
  padding-right: 5px;
  padding-left: 5px;
}

.oj-select-open-icon,
.oj-select-open-icon:hover,
.oj-select-open-icon:focus {
  text-decoration: none;
}

.oj-select-multiple-open-icon {
  font-size: 24px;
}
html[dir=rtl] .oj-select-multiple-open-icon {
  padding-left: 5px;
  padding-right: 5px;
}
html:not([dir=rtl]) .oj-select-multiple-open-icon {
  padding-right: 5px;
  padding-left: 5px;
}

/* clear entry icon */
/* Override default options*/
.oj-select-option-defaults {
  font-family: '{"renderMode":"jet","loadingIndicatorDelay":"250"}';
}

.oj-select-native .oj-select-arrow {
  display: inline-block;
  text-align: center;
  position: absolute;
  top: calc(50% - 1rem);
}
html:not([dir=rtl]) .oj-select-native .oj-select-arrow {
  right: 0;
}
html[dir=rtl] .oj-select-native .oj-select-arrow {
  left: 0;
}
.oj-select-native .oj-select-arrow {
  line-height: 2.28571rem;
  color: hsla(0, 0%, 0%, 0.8);
  pointer-events: none;
}

.oj-select-native.oj-disabled .oj-select-arrow {
  opacity: 1;
}

.oj-select-native.oj-invalid .oj-select-arrow,
.oj-select-native.oj-warning .oj-select-arrow {
  top: 0;
}

.oj-select-select {
  text-align: left;
}
html[dir=rtl] .oj-select-select {
  text-align: right;
}
.oj-select-select {
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 99%);
  border-style: solid;
  border-color: hsl(203, 2%, 90%);
  border-width: 1px 1px 1px 1px;
  border-radius: 2px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.oj-select-select:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-select-select::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-select-select::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-select-select {
  border-width: 0;
  height: 2.28571rem;
  padding: 0 5px;
  box-sizing: border-box;
  width: 100%;
  white-space: nowrap;
  background-clip: padding-box;
}

select.oj-select-select.oj-select-default:not([multiple]) {
  color: hsla(0, 0%, 0%, 0.55);
  font-style: italic;
}

.oj-select-select[disabled] {
  color: hsla(0, 0%, 0%, 0.38);
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 93%);
  opacity: 1;
}

.oj-select-select option {
  background-color: hsl(203, 2%, 99%);
}

/* 
 * Applied to focus ring around the select box 
 */
.oj-select-select:not(.oj-focus-highlight):focus {
  outline: none;
}

/**
 * Styling for loading state
 */
.oj-select.oj-loading .oj-select-accessible-container {
  background-image: linear-gradient(90deg, hsl(203, 2%, 93%) 0%, hsl(203, 2%, 98%) 10%, hsl(203, 2%, 93%) 20%);
  animation: LoadingGradientAnimation 3s infinite;
  background-size: 200% 200%;
  opacity: 1;
}

.oj-select.oj-loading .oj-select-arrow {
  display: none;
}

.oj-select-jet:not(.oj-read-only).oj-enabled .oj-select-choice:active,
.oj-select-native.oj-enabled .oj-select-select:active {
  background-color: hsl(203, 2%, 99%);
}

.oj-select-jet .oj-select-arrow.oj-select-open-icon:not(.oj-disabled) {
  color: hsla(0, 0%, 0%, 0.8);
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices {
  color: inherit;
  height: 100%;
  width: 100%;
}
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices {
  text-align: inherit;
}
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices {
  text-align: inherit;
}
.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices {
  border-width: 0;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-select:not(.oj-disabled) .oj-select-choice,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-select:not(.oj-disabled) .oj-select-choices {
  background-color: transparent;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-chosen {
  background-color: inherit;
  border-width: 0;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select {
  height: 100%;
}

.oj-text-field-label-inside .oj-select-choice {
  border: 0;
  background-color: transparent;
  width: 100%;
  min-height: 2.75rem;
}
html:not([dir=rtl]) .oj-text-field-label-inside .oj-select-choice {
  padding: 0;
}
html[dir=rtl] .oj-text-field-label-inside .oj-select-choice {
  padding: 0;
}

.oj-text-field-label-inside .oj-combobox-input {
  padding: 0.85rem 5px 0;
}

.oj-text-field-label-inside .oj-select-choices {
  border: 0;
  background-color: transparent;
  padding: 0.85rem 5px 5px;
}

.oj-text-field-label-inside .oj-select-chosen {
  padding: 0.85rem 5px 0;
  margin-top: 5px;
}

.oj-text-field-label-inside .oj-select-choice.oj-hover,
.oj-text-field-label-inside .oj-select-choices.oj-hover {
  background-color: transparent;
}

.oj-text-field-label-inside.oj-select.oj-read-only .oj-select-choice {
  padding: 0;
}
html:not([dir=rtl]) .oj-text-field-label-inside.oj-select.oj-read-only .oj-select-choice {
  margin-left: 0;
}
html[dir=rtl] .oj-text-field-label-inside.oj-select.oj-read-only .oj-select-choice {
  margin-right: 0;
}

.oj-text-field-label-inside.oj-select.oj-read-only .oj-select-chosen {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.oj-text-field-label-inside.oj-select.oj-read-only .oj-select-selected-choice {
  line-height: normal;
}

.oj-text-field.oj-select.oj-disabled .oj-text-field-container {
  background-color: hsl(203, 2%, 93%);
}

.oj-text-field.oj-select-multi .oj-text-field-container {
  height: auto;
}

.oj-text-field.oj-select-multi:not(.oj-read-only) .oj-text-field-container {
  min-height: calc(2.28571rem * 1.25);
}

.oj-text-field.oj-select:not(.oj-select-multi) .oj-text-field-container {
  height: 2.28571rem;
}

html:not([dir=rtl]) .oj-text-field-label-inside:not(.oj-read-only) .oj-select-selected-choice {
  margin: 10px 6px 0 0;
}
html[dir=rtl] .oj-text-field-label-inside:not(.oj-read-only) .oj-select-selected-choice {
  margin: 10px 0 0 6px;
}

.oj-text-field-label-inside.oj-select {
  max-width: 100%;
}

.oj-text-field-label-inside .oj-select-label {
  align-self: flex-start;
}

.oj-select-native .oj-select-arrow {
  display: none;
}

.oj-select-select {
  -webkit-appearance: menulist;
}
html:not([dir=rtl]) .oj-select-select {
  padding-left: 0;
  padding-right: 0;
}
html[dir=rtl] .oj-select-select {
  padding-left: 0;
  padding-right: 0;
}

.oj-select-native .oj-select-select[multiple] {
  -webkit-appearance: listbox;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 10rem;
  padding-left: 0;
  padding-right: 0;
}

.oj-select-native .oj-select-select[multiple] option {
  padding: 0.5rem 5px;
}

/* InputSearch */
/* --------------------------------------------------------------- */
oj-input-search:not(.oj-complete) {
  visibility: hidden;
}

.oj-inputsearch {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  max-width: 18em;
  min-width: 8em;
  font-size: 1rem;
}
@media screen and (max-width: 767.9px) {
  .oj-inputsearch {
    -webkit-text-size-adjust: 115%;
  }
}
.oj-inputsearch {
  width: 100%;
}

.oj-form-control-full-width.oj-inputsearch,
.oj-form-control-full-width .oj-inputsearch {
  max-width: 100%;
}

/* 
 * Applied to the InputSearch box which includes the input field and the search icon
 */
.oj-inputsearch-choice {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  text-align: left;
}
html[dir=rtl] .oj-inputsearch-choice {
  text-align: right;
}
.oj-inputsearch-choice {
  color: hsla(0, 0%, 0%, 0.8);
  background-color: hsl(203, 2%, 99%);
  border-style: solid;
  border-color: hsl(203, 2%, 90%);
  border-width: 1px 1px 1px 1px;
  border-radius: 2px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.oj-inputsearch-choice:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputsearch-choice::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputsearch-choice::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputsearch-choice {
  height: 2.28571rem;
  padding-bottom: calc(1px - 1px + 0px);
  width: 100%;
  outline: 0;
  overflow: hidden;
  white-space: nowrap;
  background-clip: padding-box;
}

.oj-inputsearch-choice {
  background-color: hsl(203, 2%, 99%);
}

/* 
 * Applied to the input field
 */
.oj-inputsearch-input {
  flex: 1;
  border: 0;
  outline: 0;
  box-shadow: none;
  padding: 0 5px;
  background-color: hsl(203, 2%, 99%);
  color: hsla(0, 0%, 0%, 0.8);
  font-size: 1rem;
}
@media screen and (max-width: 767.9px) {
  .oj-inputsearch-input {
    -webkit-text-size-adjust: 115%;
  }
}
.oj-inputsearch-input:-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputsearch-input::-ms-input-placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputsearch-input::placeholder {
  color: hsla(0, 0%, 0%, 0.55);
  opacity: 1;
  font-style: italic;
}
.oj-inputsearch-input {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 
 * Applied to the search button
 */
.oj-inputsearch-search-button {
  box-sizing: border-box;
  display: inline-flex;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
}

.oj-inputsearch-search-button:hover, .oj-inputsearch-search-button:focus {
  text-decoration: none;
}

/* 
 * Search button icon
 */
.oj-inputsearch-search-icon {
  line-height: inherit;
  font-size: 1rem;
}
@media screen and (max-width: 767.9px) {
  .oj-inputsearch-search-icon {
    -webkit-text-size-adjust: 115%;
  }
}
html:not([dir=rtl]) .oj-inputsearch-search-icon {
  padding-left: 0;
  padding-right: 5px;
}
html[dir=rtl] .oj-inputsearch-search-icon {
  padding-right: 0;
  padding-left: 5px;
}

/*
 * Styling for focus state
 */
.oj-inputsearch:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-inputsearch-choice {
  border-color: hsl(203, 2%, 90%);
  border-width: 1px 1px 1px 1px;
  padding-bottom: 0;
}

/* 
 * Invalid styling for the widget 
 */
.oj-inputsearch.oj-invalid .oj-inputsearch-choice {
  border-color: #e65a66;
  border-width: 2px 2px 2px 2px;
  border-style: solid;
}

/* 
 * Warning styling for the widget 
 */
.oj-inputsearch.oj-warning .oj-inputsearch-choice {
  border-color: #f8ca75;
  border-width: 2px 2px 2px 2px;
  border-style: solid;
}

/* 
 * Disabled styles for single-select 
 */
.oj-inputsearch.oj-disabled .oj-inputsearch-choice,
.oj-inputsearch.oj-disabled input {
  color: hsla(0, 0%, 0%, 0.38);
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 93%);
  opacity: 1;
  background-color: hsl(203, 2%, 93%);
}

.oj-inputsearch.oj-disabled input {
  border: 0;
}

.oj-inputsearch.oj-disabled .oj-inputsearch-search-button {
  cursor: default;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputsearch-choice,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputsearch-input {
  color: inherit;
  height: 100%;
  width: 100%;
}
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputsearch-choice,
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputsearch-input {
  text-align: inherit;
}
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputsearch-choice,
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputsearch-input {
  text-align: inherit;
}
.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputsearch-choice,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputsearch-input {
  background-color: transparent;
  border-width: 0;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputsearch:not(.oj-disabled):not(.oj-read-only).oj-focus .oj-inputsearch-choice {
  border-width: 0;
}

/* switch */
/* --------------------------------------------------------------- */
oj-switch:not(.oj-complete) {
  visibility: hidden;
}

.oj-switch {
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
}

.oj-switch.oj-invalid .oj-switch-track,
.oj-switch.oj-default.oj-invalid .oj-switch-track,
.oj-switch:not(.oj-selected):not(.oj-hover):not(.oj-disabled):not(.oj-read-only).oj-invalid .oj-switch-track,
.oj-switch.oj-selected:not(.oj-hover):not(.oj-disabled):not(.oj-read-only).oj-invalid .oj-switch-track,
.oj-switch.oj-hover:not(.oj-selected):not(.oj-disabled):not(.oj-read-only).oj-invalid .oj-switch-track,
.oj-switch.oj-selected.oj-hover:not(.oj-disabled):not(.oj-read-only).oj-invalid .oj-switch-track,
.oj-switch.oj-disabled:not(.oj-selected):not(.oj-read-only).oj-invalid .oj-switch-track,
.oj-switch.oj-disabled.oj-selected:not(.oj-read-only).oj-invalid .oj-switch-track {
  border-width: 2px 2px 2px 2px;
  border-style: solid;
  border-color: #e65a66;
}
.oj-switch.oj-warning .oj-switch-track,
.oj-switch.oj-default.oj-warning .oj-switch-track,
.oj-switch:not(.oj-selected):not(.oj-hover):not(.oj-disabled):not(.oj-read-only).oj-warning .oj-switch-track,
.oj-switch.oj-selected:not(.oj-hover):not(.oj-disabled):not(.oj-read-only).oj-warning .oj-switch-track,
.oj-switch.oj-hover:not(.oj-selected):not(.oj-disabled):not(.oj-read-only).oj-warning .oj-switch-track,
.oj-switch.oj-selected.oj-hover:not(.oj-disabled):not(.oj-read-only).oj-warning .oj-switch-track,
.oj-switch.oj-disabled:not(.oj-selected):not(.oj-read-only).oj-warning .oj-switch-track,
.oj-switch.oj-disabled.oj-selected:not(.oj-read-only).oj-warning .oj-switch-track {
  border-width: 2px 2px 2px 2px;
  border-style: solid;
  border-color: #f8ca75;
}

.oj-switch .oj-switch-container {
  position: relative;
  height: 2.28571rem;
  width: 4.28570625rem;
  /**
     * In Chrome 103 - the relative/absolute positioning inside a multi-col layout is broken
     * https://bugs.chromium.org/p/chromium/issues/detail?id=1338997
     * This is to workaround this bug and make things render correctly for chromium browsers.
     * This bug will be fixed in 104 and later.
     */
  overflow: hidden;
}

.oj-switch .oj-switch-thumb {
  box-sizing: content-box;
}
html:not([dir=rtl]) .oj-switch .oj-switch-thumb {
  left: 0;
  right: auto;
}
html[dir=rtl] .oj-switch .oj-switch-thumb {
  left: auto;
  right: 0;
}

html:not([dir=rtl]) .oj-switch.oj-selected.oj-read-only .oj-switch-thumb {
  left: 0;
  right: auto;
}
html[dir=rtl] .oj-switch.oj-selected.oj-read-only .oj-switch-thumb {
  left: auto;
  right: 0;
}

html:not([dir=rtl]) .oj-switch.oj-selected .oj-switch-thumb {
  left: auto;
  right: 0;
}
html[dir=rtl] .oj-switch.oj-selected .oj-switch-thumb {
  left: 0;
  right: auto;
}

.oj-switch .oj-switch-track {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc(2.28571rem - 1px - 1px);
  width: calc(3.71427875rem - 1px - 1px);
  margin-top: calc(0px - 2.28571rem / 2);
  border-radius: 2.28571rem;
}

.oj-switch.oj-read-only .oj-switch-track {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc(2.28571rem - 1px - 1px);
  width: calc(3.71427875rem - 1px - 1px);
  margin-top: calc(0px - 2.28571rem / 2);
  border-radius: 2.28571rem;
}

.oj-switch .oj-switch-track,
.oj-switch.oj-default .oj-switch-track {
  background-color: hsl(203, 2%, 97%);
  border-color: hsl(203, 2%, 90%);
}
.oj-switch .oj-switch-thumb,
.oj-switch.oj-default .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc(2.142853125rem - 1px - 1px);
  width: calc(2.142853125rem - 1px - 1px);
  margin-top: calc(0px - 2.142853125rem / 2);
  border-radius: 2.142853125rem;
  box-shadow: 0 2px 2px -2px hsla(0, 0%, 0%,0.9);
  background-color: hsl(203, 2%, 100%);
  border-color: hsl(203, 2%, 78%);
}

.oj-switch.oj-selected .oj-switch-track {
  background-color: #027bc7;
  border-color: #027bc7;
}
.oj-switch.oj-selected .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc(1.99999625rem - 1px - 1px);
  width: calc(1.99999625rem - 1px - 1px);
  margin-top: calc(0px - 1.99999625rem / 2);
  border-radius: 1.99999625rem;
  box-shadow: 0 2px 2px -2px hsl(0, 0%, 0%);
  background-color: hsl(203, 2%, 100%);
  border-color: hsl(203, 2%, 100%);
}

.oj-switch.oj-hover .oj-switch-track {
  background-color: hsl(203, 2%, 88%);
  border-color: hsl(203, 2%, 88%);
}
.oj-switch.oj-hover .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc(2.142853125rem - 1px - 1px);
  width: calc(2.142853125rem - 1px - 1px);
  margin-top: calc(0px - 2.142853125rem / 2);
  border-radius: 2.142853125rem;
  box-shadow: none;
  background-color: hsl(203, 2%, 99%);
  border-color: hsl(203, 2%, 78%);
}

.oj-switch.oj-selected.oj-hover .oj-switch-track {
  background-color: #966486;
  border-color: #966486;
}
.oj-switch.oj-selected.oj-hover .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc(1.99999625rem - 1px - 1px);
  width: calc(1.99999625rem - 1px - 1px);
  margin-top: calc(0px - 1.99999625rem / 2);
  border-radius: 1.99999625rem;
  box-shadow: none;
  background-color: hsl(203, 2%, 100%);
  border-color: hsl(203, 2%, 100%);
}

.oj-switch.oj-active .oj-switch-track,
.oj-switch.oj-hover.oj-active .oj-switch-thumb .oj-switch-track {
  background-color: hsl(203, 2%, 97%);
  border-color: hsl(203, 2%, 90%);
}
.oj-switch.oj-active .oj-switch-thumb,
.oj-switch.oj-hover.oj-active .oj-switch-thumb .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc(2.142853125rem - 1px - 1px);
  width: calc(2.428566875rem - 1px - 1px);
  margin-top: calc(0px - 2.142853125rem / 2);
  border-radius: 2.142853125rem;
  box-shadow: none;
  background-color: hsl(203, 2%, 100%);
  border-color: hsl(203, 2%, 78%);
}

.oj-switch.oj-selected.oj-active .oj-switch-track,
.oj-switch.oj-selected.oj-hover.oj-active .oj-switch-thumb .oj-switch-track {
  background-color: #027bc7;
  border-color: #027bc7;
}
.oj-switch.oj-selected.oj-active .oj-switch-thumb,
.oj-switch.oj-selected.oj-hover.oj-active .oj-switch-thumb .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc(1.99999625rem - 1px - 1px);
  width: calc(2.428566875rem - 1px - 1px);
  margin-top: calc(0px - 1.99999625rem / 2);
  border-radius: 1.99999625rem;
  box-shadow: none;
  background-color: hsl(203, 2%, 100%);
  border-color: hsl(203, 2%, 100%);
}

.oj-switch.oj-read-only .oj-switch-track {
  background-color: transparent;
  border-color: transparent;
}
.oj-switch.oj-read-only .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc(2.142853125rem - 1px - 1px);
  width: calc(2.142853125rem - 1px - 1px);
  margin-top: calc(0px - 2.142853125rem / 2);
  border-radius: 2.142853125rem;
  box-shadow: none;
  background-color: transparent;
  border-color: transparent;
}

.oj-switch.oj-selected.oj-read-only .oj-switch-track {
  background-color: transparent;
  border-color: transparent;
}
.oj-switch.oj-selected.oj-read-only .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc(2.142853125rem - 1px - 1px);
  width: calc(2.142853125rem - 1px - 1px);
  margin-top: calc(0px - 2.142853125rem / 2);
  border-radius: 2.142853125rem;
  box-shadow: none;
  background-color: transparent;
  border-color: transparent;
}

.oj-switch.oj-disabled .oj-switch-track {
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 93%);
}
.oj-switch.oj-disabled .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc(1.99999625rem - 1px - 1px);
  width: calc(1.99999625rem - 1px - 1px);
  margin-top: calc(0px - 1.99999625rem / 2);
  border-radius: 1.99999625rem;
  box-shadow: none;
  background-color: #966486;
  border-color: #966486;
}

.oj-switch.oj-disabled.oj-selected .oj-switch-track {
  background-color: #966486;
  border-color: #966486;
}
.oj-switch.oj-disabled.oj-selected .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc(1.99999625rem - 1px - 1px);
  width: calc(1.99999625rem - 1px - 1px);
  margin-top: calc(0px - 1.99999625rem / 2);
  border-radius: 1.99999625rem;
  box-shadow: none;
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 93%);
}

.oj-switch-track:not(.oj-focus-highlight) .oj-switch-thumb:focus {
  outline: none;
}

/* switch specific */
/* --------------------------------------------------------------- */
.oj-switch.oj-read-only .oj-switch-thumb,
.oj-switch.oj-selected.oj-read-only .oj-switch-thumb {
  font-size: 1rem;
  margin-top: -0.5rem;
}

oj-slider:not(.oj-complete) {
  visibility: hidden;
}

.oj-slider {
  display: inline-block;
  position: relative;
}
html:not([dir=rtl]) .oj-slider {
  text-align: left;
}
html[dir=rtl] .oj-slider {
  text-align: right;
}
.oj-slider {
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.oj-slider.oj-slider-horizontal {
  /* use a width of 100% and then max and min width so that when
     there's less room for the form control it can automatically
      get smaller instead of overflowing its boundaries */
  max-width: 18em;
  min-width: 8em;
  width: 100%;
}

.oj-form-control-full-width.oj-slider.oj-slider-horizontal,
.oj-form-control-full-width .oj-slider.oj-slider-horizontal {
  max-width: 100%;
}

.oj-slider.oj-slider-horizontal .oj-slider-container {
  /* This ensures that the slider bounding box will include
   the thumb radius - important for form controls. */
  margin-right: calc(24px / 2);
  margin-left: calc(24px / 2);
}

.oj-slider-vertical > .oj-slider-container {
  margin-top: calc(24px / 2);
  margin-bottom: calc(24px / 2);
  margin-left: calc(24px / 2);
  margin-right: calc(24px / 2);
}

.oj-slider.oj-invalid .oj-slider-thumb {
  border-width: 2px 2px 2px 2px;
  border-style: solid;
  border-color: #e65a66;
}

.oj-slider.oj-warning .oj-slider-thumb {
  border-width: 2px 2px 2px 2px;
  border-style: solid;
  border-color: #f8ca75;
}

.oj-slider-horizontal.oj-form-control .oj-slider-container {
  height: 2.28571rem;
}

.oj-slider-vertical.oj-form-control .oj-slider-container {
  height: 150px;
  min-height: calc(24px * 2);
  width: 2.28571rem;
}

.oj-slider-container {
  position: relative;
}

.oj-slider-thumb {
  position: absolute;
  box-sizing: border-box;
  cursor: default;
  touch-action: none;
  background-color: hsl(203, 2%, 100%);
  border-radius: 50%;
  border: 2px solid hsl(203, 2%, 70%);
  box-shadow: none;
}

.oj-disabled .oj-slider-thumb {
  background-color: hsl(203, 2%, 88%);
  border-color: hsl(203, 2%, 88%);
}

.oj-slider-range {
  position: absolute;
  border: 0;
  background-position: 0 0;
}

.oj-slider-bar {
  border-radius: 4px;
  background-color: hsl(203, 2%, 88%);
  box-sizing: border-box;
  position: absolute;
}

.oj-slider-vertical .oj-slider-bar, .oj-slider-vertical .oj-slider-bar-value {
  width: 4px;
}

.oj-slider-vertical .oj-slider-bar {
  height: 100%;
}

.oj-slider-horizontal .oj-slider-bar {
  width: 100%;
}

.oj-slider-horizontal .oj-slider-bar, .oj-slider-horizontal .oj-slider-bar-value {
  height: 4px;
  margin-top: calc(0px - 4px / 2);
  top: 50%;
}

.oj-slider-vertical .oj-slider-bar, .oj-slider-vertical .oj-slider-bar-value {
  width: 4px;
  margin-left: calc(0px - 4px / 2);
  left: 50%;
}

.oj-slider-bar:after {
  content: "";
  position: absolute;
  top: calc(-18px + 4px / 2);
  bottom: calc(-18px + 4px / 2);
  left: calc(-18px + 4px / 2);
  right: calc(-18px + 4px / 2);
}

.oj-slider-bar-value {
  border-radius: 4px;
  background: #027bc7;
}

.oj-hicontrast .oj-slider-bar,
.oj-hicontrast .oj-slider-bar-value {
  border: 1px solid;
}

.oj-hicontrast .oj-slider-horizontal .oj-slider-bar-value {
  margin-top: calc(0px - (4px / 2 + 1px));
}

.oj-hicontrast .oj-slider-vertical .oj-slider-bar-value {
  margin-left: calc(0px - (4px / 2 + 1px));
}

.oj-slider-bar-value.oj-active {
  background: #027bc7;
}

.oj-disabled .oj-slider-bar {
  opacity: 1;
  background: hsl(203, 2%, 88%);
}

.oj-disabled .oj-slider-bar-value {
  opacity: 1;
  background: hsl(203, 2%, 88%);
}

.oj-hicontrast .oj-disabled .oj-slider-bar,
.oj-hicontrast .oj-disabled .oj-slider-bar-value {
  border-style: dotted;
}

.oj-slider-horizontal .oj-slider-thumb {
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: calc(0px - 24px / 2);
  margin-left: calc(0px - 24px / 2);
}

html:not([dir=rtl]) .oj-slider-horizontal .oj-slider-range-min {
  left: 0;
}
html[dir=rtl] .oj-slider-horizontal .oj-slider-range-min {
  right: 0;
}

html:not([dir=rtl]) .oj-slider-horizontal .oj-slider-range-max {
  right: 0;
}
html[dir=rtl] .oj-slider-horizontal .oj-slider-range-max {
  left: 0;
}

.oj-slider-vertical .oj-slider-thumb {
  width: 24px;
  height: 24px;
}
html:not([dir=rtl]) .oj-slider-vertical .oj-slider-thumb {
  margin-left: calc(0px - 24px / 2);
  left: 50%;
}
html[dir=rtl] .oj-slider-vertical .oj-slider-thumb {
  margin-right: calc(0px - 24px / 2);
  right: 50%;
}
.oj-slider-vertical .oj-slider-thumb {
  margin-bottom: calc(0px - 24px / 2);
  margin-top: calc(0px - 24px / 2);
}

.oj-slider-vertical .oj-slider-range-min {
  bottom: 0;
}

.oj-slider-vertical .oj-slider-range-max {
  top: 0;
}

.oj-hicontrast .oj-slider-thumb.oj-focus {
  border: 3px solid;
}

.oj-hicontrast .oj-slider-thumb.oj-selected {
  border: 3px double;
}

.oj-hicontrast .oj-disabled .oj-slider-thumb {
  border: 1px dotted;
}

.oj-slider-thumb.oj-hover {
  background-color: hsl(203, 2%, 93%);
}

.oj-slider-thumb.oj-active {
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 70%);
}

.oj-slider-horizontal .oj-slider-thumb:after {
  content: "";
  position: absolute;
  top: calc(0px - (28px - 24px) / 2);
  bottom: calc(0px - (28px - 24px) / 2);
  left: calc(0px - (28px - 24px) / 2);
  right: calc(0px - (28px - 24px) / 2);
}

.oj-slider-vertical .oj-slider-thumb:after {
  content: "";
  position: absolute;
  top: calc(0px - (28px - 24px) / 2);
  bottom: calc(0px - (28px - 24px) / 2);
  left: calc(0px - (28px - 24px) / 2);
  right: calc(0px - (28px - 24px) / 2);
}

.oj-slider-horizontal .oj-slider-thumb.oj-active {
  margin-left: calc(0px - 24px / 2);
  margin-top: calc(0px - 24px / 2);
}

html:not([dir=rtl]) .oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-left: calc(0px - 24px / 2);
}
html[dir=rtl] .oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-right: calc(0px - 24px / 2);
}

.oj-slider-thumb.oj-active {
  width: 24px;
  height: 24px;
}

.oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-bottom: calc(0px - 24px / 2);
  margin-top: calc(0px - 24px / 2);
  width: 24px;
  height: 24px;
}

.oj-slider-thumb.oj-active {
  background-color: hsl(203, 2%, 93%);
  border-color: hsl(203, 2%, 70%);
}

.oj-slider-thumb:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-slider-wrapper {
  display: flex;
  align-items: center;
}

.oj-slider-wrapper .oj-slider.oj-form-control {
  margin-bottom: 0;
}

.oj-slider-block-item {
  text-align: center;
}

.oj-slider-color-picker.oj-slider-vertical > .oj-slider-container {
  margin-top: calc(24px / 2);
  margin-bottom: calc(24px / 2);
  margin-left: calc(24px / 2);
  margin-right: calc(24px / 2);
}

.oj-slider-color-picker.oj-slider-vertical.oj-form-control .oj-slider-container {
  min-height: calc(24px * 2);
}

.oj-slider-color-picker .oj-slider-thumb,
.oj-warning .oj-slider-color-picker .oj-slider-thumb,
.oj-invalid .oj-slider-color-picker .oj-slider-thumb {
  background-color: transparent;
  border-radius: 17px;
  border: 3px solid hsl(203, 2%, 100%);
  box-shadow: 1px 1px 5px 0 hsla(0, 0%, 0%,0.4);
}

.oj-disabled .oj-slider-color-picker .oj-slider-thumb {
  border: 3px solid hsl(203, 2%, 88%);
}

.oj-slider-color-picker .oj-slider-bar {
  border-radius: 10px;
}

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-bar, .oj-slider-color-picker.oj-slider-horizontal .oj-slider-bar-value {
  height: 10px;
  margin-top: calc(0px - 10px / 2);
}

.oj-slider-color-picker.oj-slider-vertical .oj-slider-bar, .oj-slider-color-picker.oj-slider-vertical .oj-slider-bar-value {
  width: 10px;
  margin-left: calc(0px - 10px / 2);
}

.oj-slider-color-picker .oj-slider-bar:after {
  top: calc(-18px + 10px / 2);
  bottom: calc(-18px + 10px / 2);
  left: calc(-18px + 10px / 2);
  right: calc(-18px + 10px / 2);
}

.oj-slider-color-picker .oj-slider-bar-value {
  border-radius: 10px;
}

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: calc(0px - 24px / 2);
  margin-left: calc(0px - 24px / 2);
}

.oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb {
  width: 24px;
  height: 24px;
}
html:not([dir=rtl]) .oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb {
  margin-left: calc(0px - 24px / 2);
}
html[dir=rtl] .oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb {
  margin-right: calc(0px - 24px / 2);
}
.oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb {
  margin-bottom: calc(0px - 24px / 2);
  margin-top: calc(0px - 24px / 2);
}

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-thumb:after {
  top: calc(0px - (28px - 24px) / 2);
  bottom: calc(0px - (28px - 24px) / 2);
  left: calc(0px - (28px - 24px) / 2);
  right: calc(0px - (28px - 24px) / 2);
}

.oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb:after {
  top: calc(0px - (28px - 24px) / 2);
  bottom: calc(0px - (28px - 24px) / 2);
  left: calc(0px - (28px - 24px) / 2);
  right: calc(0px - (28px - 24px) / 2);
}

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-thumb.oj-active {
  margin-left: calc(0px - 24px / 2);
  margin-top: calc(0px - 24px / 2);
}

html:not([dir=rtl]) .oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-left: calc(0px - 24px / 2);
}
html[dir=rtl] .oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-right: calc(0px - 24px / 2);
}

.oj-slider-color-picker .oj-slider-thumb.oj-active {
  width: 24px;
  height: 24px;
}

.oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-bottom: calc(0px - 24px / 2);
  margin-top: calc(0px - 24px / 2);
}

.oj-slider-color-picker .oj-slider-bar-value {
  display: none;
}

/* Color Palette */
/* --------------------------------------------------------------- */
oj-color-palette:not(.oj-complete) {
  visibility: hidden;
}

.oj-colorpalette {
  display: inline-block;
}

.oj-colorpalette-container {
  height: inherit; /* required by ListView for scrollbar */
}

.oj-colorpalette-swatch-entry {
  display: inline-block;
}

.oj-colorpalette-list .oj-colorpalette-swatch-entry {
  display: flex;
  align-items: center;
}

.oj-colorpalette-list .oj-colorpalette-swatch,
.oj-colorpalette-list .oj-colorpalette-swatch-text {
  flex-shrink: 0;
}

/* A palette color swatch  */
.oj-colorpalette-swatch-container,
.oj-colorpalette-swatch {
  vertical-align: middle;
  display: inline-block;
  border-style: solid;
  box-sizing: border-box;
}

.oj-colorpalette-swatch-container {
  border-width: 3px;
  border-color: transparent;
  /* reduce line height so extra small swatches remain square */
  line-height: 0;
}

.oj-colorpalette-swatch {
  border-width: 1px;
  border-color: hsl(203, 2%, 30%);
  background-clip: padding-box;
  -webkit-print-color-adjust: exact;
}

.oj-colorpalette-listview-full {
  width: 100%;
  height: 100%;
}

.oj-colorpalette-swatch-none-icon {
  /* Color Hardcoded because this value is not related to theming and regardless of theme the swatch for none will be white */
  background-color: #ffffff;
  display: inline-block;
  background-image: url("../../../alta/12.0.0/common/images/none.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  -webkit-print-color-adjust: exact;
}

.oj-colorpalette-grid .oj-colorpalette-swatchsize-lg .oj-colorpalette-swatch {
  width: 64px;
  height: 64px;
}

.oj-colorpalette-grid .oj-colorpalette-swatchsize-lg.oj-colorpalette-swatch-showlabel .oj-colorpalette-swatch {
  width: 64px;
  height: 64px;
}

.oj-colorpalette-grid .oj-colorpalette-swatchsize-sm .oj-colorpalette-swatch {
  width: 29px;
  height: 29px;
}

.oj-colorpalette-grid .oj-colorpalette-swatchsize-xs .oj-colorpalette-swatch {
  width: 22px;
  height: 22px;
}

.oj-colorpalette-list .oj-colorpalette-swatchsize-sm .oj-colorpalette-swatch {
  width: 84px;
  height: 22px;
}

.oj-colorpalette-list .oj-colorpalette-swatchsize-lg .oj-colorpalette-swatch {
  width: 274px;
  height: 22px;
}

/*  Hover swatch  */
.oj-colorpalette-container .oj-listview-item.oj-hover .oj-colorpalette-swatch-container {
  border-color: transparent;
}

/*  Selected swatch  */
.oj-colorpalette-container .oj-selected .oj-colorpalette-swatch-container,
.oj-colorpalette-container .oj-listview-item.oj-hover.oj-selected .oj-colorpalette-swatch-container {
  border-color: #000000;
}

.oj-colorpalette-container .oj-selected .oj-colorpalette-swatch,
.oj-colorpalette-container .oj-listview-item.oj-hover.oj-selected .oj-colorpalette-swatch {
  border-color: transparent;
}

/*  Disabled swatch  */
.oj-colorpalette-container .oj-listview.oj-disabled .oj-colorpalette-swatch-container,
.oj-colorpalette-container .oj-listview.oj-disabled .oj-colorpalette-swatch,
.oj-colorpalette-container .oj-listview.oj-disabled .oj-selected .oj-colorpalette-swatch-container,
.oj-colorpalette-container .oj-listview.oj-disabled .oj-selected .oj-colorpalette-swatch,
.oj-colorpalette-container .oj-listview.oj-disabled .oj-listview-item.oj-hover .oj-colorpalette-swatch-container,
.oj-colorpalette-container .oj-listview.oj-disabled .oj-listview-item.oj-hover .oj-colorpalette-swatch,
.oj-colorpalette-container .oj-listview.oj-disabled .oj-colorpalette-swatch-none .oj-colorpalette-swatch-none-icon {
  border-color: transparent;
}

.oj-colorpalette-container .oj-listview.oj-disabled .oj-colorpalette-swatch-none .oj-colorpalette-swatch-none-icon {
  background-color: transparent;
  background-image: none;
}

.oj-colorpalette-swatch-text {
  display: block;
  text-align: center;
  color: hsla(0, 0%, 0%, 0.8);
  width: inherit;
  max-width: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oj-colorpalette-grid .oj-colorpalette-swatch-text {
  font-size: 0.85714rem;
}

.oj-colorpalette-list .oj-colorpalette-swatch-text {
  display: inline-block;
}
html:not([dir=rtl]) .oj-colorpalette-list .oj-colorpalette-swatch-text {
  margin-left: 15px;
}
html[dir=rtl] .oj-colorpalette-list .oj-colorpalette-swatch-text {
  margin-right: 15px;
}
.oj-colorpalette-list .oj-colorpalette-swatch-text {
  max-width: 155px;
  vertical-align: middle;
}

/*  Constrain text width for ellipsis generation  */
.oj-colorpalette-grid .oj-colorpalette-swatchsize-lg .oj-colorpalette-swatch-text {
  width: 64px;
  /* account for border of swatch container */
  padding-left: 3px;
  padding-right: 3px;
}

/*  Disabled  */
.oj-colorpalette-container .oj-listview.oj-disabled .oj-colorpalette-swatch,
.oj-colorpalette-container .oj-listview.oj-disabled .oj-colorpalette-swatch-text {
  color: hsla(0, 0%, 0%, 0.38);
  cursor: default;
}

.oj-colorpalette-container .oj-listview-item {
  background-size: 0; /* required to remove selection listitem borders */
  background-image: none;
  padding: 0;
  border-width: 0;
  cursor: pointer;
  min-height: auto;
}

.oj-colorpalette-container .oj-listview-card-layout li.oj-listview-item {
  width: auto;
  height: auto;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  border-radius: 0;
  margin-top: 0;
  margin-bottom: 0;
}
html:not([dir=rtl]) .oj-colorpalette-container .oj-listview-card-layout li.oj-listview-item {
  margin-left: 0;
  margin-right: 0;
}
html[dir=rtl] .oj-colorpalette-container .oj-listview-card-layout li.oj-listview-item {
  margin-left: 0;
  margin-right: 0;
}

.oj-colorpalette-container .oj-listview-card-layout .oj-listview-group {
  margin-bottom: 0;
}

.oj-colorpalette-container .oj-listview-item.oj-focus-highlight::after {
  height: calc(100% - 2px);
}

/*  Remove listview item background and outline  */
.oj-colorpalette-container .oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected,
.oj-colorpalette-container .oj-listview-item.oj-selected {
  background-color: transparent;
  border-width: 0;
  outline-style: none;
}

/*  Remove listview top/bottom borders  */
.oj-colorpalette-container .oj-listview {
  border-style: none;
}

/*  Remove listview selection border  */
.oj-colorpalette-container .oj-listview-item.oj-selected {
  border-color: transparent;
}

/*  Remove listview item top border  */
.oj-colorpalette-container ul.oj-listview-element:not(.oj-listview-card-layout) .oj-listview-item.oj-hover + li.oj-listview-item,
.oj-colorpalette-container .oj-listview.oj-focus-ancestor ul.oj-listview-element:not(.oj-listview-card-layout) .oj-listview-item.oj-focus + li.oj-listview-item,
.oj-colorpalette-container .oj-listview.oj-focus-ancestor ul.oj-listview-element:not(.oj-listview-card-layout) .oj-listview-item.oj-selected + li.oj-listview-item,
.oj-colorpalette-container .oj-listview.oj-focus-ancestor ul.oj-listview-element:not(.oj-listview-card-layout) .oj-listview-item.oj-focus,
.oj-colorpalette-container .oj-listview-item.oj-hover {
  border-color: transparent;
  border-width: 0;
}

.oj-colorpalette.oj-warning .oj-colorpalette-container {
  border-width: 2px 2px 2px 2px;
  border-style: solid;
  border-color: #f8ca75;
}

.oj-colorpalette.oj-invalid .oj-colorpalette-container {
  border-width: 2px 2px 2px 2px;
  border-style: solid;
  border-color: #e65a66;
}

/* Color  Spectrum */
/* --------------------------------------------------------------- */
oj-color-spectrum:not(.oj-complete) {
  visibility: hidden;
}

.oj-colorspectrum {
  display: inline-block;
  position: relative;
}

/*  The spectrum rectangle containing the saturation/luminosity spectrum for the hue */
.oj-colorspectrum-spectrum {
  width: 230px;
  height: 230px;
  border-color: hsl(203, 2%, 88%);
  margin-top: calc(24px / 2);
  margin-left: calc(24px / 2);
  border-style: solid;
  border-width: 1px;
  margin-right: 15px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
}

.oj-colorspectrum-container {
  white-space: nowrap;
}

.oj-colorspectrum-container > .oj-slider-vertical {
  display: inline-block;
  vertical-align: top;
}

/*  Horizontal opacity slider  */
.oj-colorspectrum-container > .oj-slider-horizontal {
  display: block;
}

/*  Horizontal opacity slider  - length  */
.oj-colorspectrum-container > .oj-slider-horizontal > .oj-slider-container {
  width: 230px;
}

/*  Vertical Hue slider  - height  */
.oj-colorspectrum-container > .oj-slider-vertical > .oj-slider-container {
  height: 230px;
}

/*  Remove bottom margins from sliders  */
html .oj-colorspectrum-container .oj-form-control {
  margin-bottom: 0;
}

/*  Spectrum thumb   */
.oj-colorspectrum-thumb {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  border-width: 3px;
  border-color: hsl(203, 2%, 100%);
  box-shadow: 1px 1px 5px 0 hsla(0, 0%, 0%,0.4);
  border-style: solid;
  background-color: transparent;
  cursor: pointer;
  box-sizing: border-box;
  position: absolute;
}

.oj-colorspectrum-thumb:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-colorspectrum.oj-disabled .oj-colorspectrum-thumb {
  border-color: hsl(203, 2%, 88%);
}

.oj-colorspectrum.oj-warning .oj-colorspectrum-container {
  border-width: 2px 2px 2px 2px;
  border-style: solid;
  border-color: #f8ca75;
}

.oj-colorspectrum.oj-invalid .oj-colorspectrum-container {
  border-width: 2px 2px 2px 2px;
  border-style: solid;
  border-color: #e65a66;
}

.oj-colorspectrum-alpha-bg {
  background-image: url("../../../alta/12.0.0/common/images/spectrum-opacity-slider-bg.png");
  position: absolute;
  height: 0;
  width: 0;
  display: none;
}

/* --------------------------------------------------------------- */
oj-validation-group:not(.oj-complete) {
  visibility: hidden;
}

/* option and optgroup */
/* --------------------------------------------------------------- */
oj-option:not(.oj-complete) {
  visibility: hidden;
}

oj-optgroup:not(.oj-complete) {
  visibility: hidden;
}

/* Grid HTML Classes */
.oj-flex {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.oj-flex-item {
  flex: auto;
  box-sizing: border-box;
}

.deprecated-col-default-width {
  flex: 0 1 100%;
  max-width: 100%;
  width: 100%;
}

.oj-hybrid-applayout-toolbar-stretch, .oj-hybrid-applayout-header, .oj-hybrid-applayout-header-no-border, .oj-flex-bar {
  position: relative;
}

.oj-hybrid-applayout-toolbar-stretch, .oj-hybrid-applayout-header, .oj-hybrid-applayout-header-no-border, .oj-flex-bar,
.oj-flex-bar-start,
.oj-flex-bar-middle,
.oj-flex-bar-end,
.oj-flex-bar-center-absolute,
.oj-hybrid-applayout-bar-title {
  box-sizing: border-box;
  display: flex;
}

.oj-flex-bar-middle {
  flex: auto;
}

html:not([dir=rtl]) .oj-flex-bar-end {
  margin-left: auto;
}
html[dir=rtl] .oj-flex-bar-end {
  margin-right: auto;
}

.oj-flex-bar-center-absolute, .oj-hybrid-applayout-bar-title {
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  top: 0;
}

.oj-flex-items-pad > .oj-flex > .oj-flex-item,
.oj-flex.oj-flex-items-pad > .oj-flex-item {
  padding-left: 10px;
  padding-right: 10px;
}

.oj-flex-items-pad > .oj-flex > .oj-flex-item > .oj-flex,
.oj-flex.oj-flex-items-pad > .oj-flex-item > .oj-flex {
  margin-left: calc(0px - 10px);
  margin-right: calc(0px - 10px);
}

@media print, screen {
  .oj-sm-flex-items-0 > .oj-flex-item,
  .oj-sm-flex-0 {
    flex: 0;
  }
  .oj-sm-flex-items-1 > .oj-flex-item,
  .oj-sm-flex-1 {
    flex: 1;
  }
  .oj-sm-flex-items-initial > .oj-flex-item,
  .oj-sm-flex-initial {
    flex: 0 1 auto;
  }
  .oj-sm-justify-content-flex-start {
    justify-content: flex-start;
  }
  .oj-sm-justify-content-flex-end {
    justify-content: flex-end;
  }
  .oj-sm-justify-content-center {
    justify-content: center;
  }
  .oj-sm-justify-content-space-between {
    justify-content: space-between;
  }
  .oj-sm-justify-content-space-around {
    justify-content: space-around;
  }
  .oj-sm-align-items-center, .oj-hybrid-applayout-header, .oj-hybrid-applayout-header-no-border {
    align-items: center;
  }
  .oj-sm-align-items-baseline {
    align-items: baseline;
  }
  .oj-sm-align-items-flex-start {
    align-items: flex-start;
  }
  .oj-sm-align-items-flex-end {
    align-items: flex-end;
  }
  .oj-sm-align-self-center {
    align-self: center;
  }
  .oj-sm-align-self-flex-start {
    align-self: flex-start;
  }
  .oj-sm-align-self-flex-end {
    align-self: flex-end;
  }
  .oj-sm-flex-direction-column {
    flex-direction: column;
  }
  .oj-sm-flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
}
@media print, screen and (min-width: 768px) {
  .oj-md-flex-items-0 > .oj-flex-item,
  .oj-md-flex-0 {
    flex: 0;
  }
  .oj-md-flex-items-1 > .oj-flex-item,
  .oj-md-flex-1 {
    flex: 1;
  }
  .oj-md-flex-items-initial > .oj-flex-item,
  .oj-md-flex-initial {
    flex: 0 1 auto;
  }
  .oj-md-order-0 {
    order: 0;
  }
  .oj-md-order-1 {
    order: 1;
  }
  .oj-md-order-2 {
    order: 2;
  }
  .oj-md-order-3 {
    order: 3;
  }
  .oj-md-order-4 {
    order: 4;
  }
  .oj-md-order-5 {
    order: 5;
  }
  .oj-md-justify-content-flex-start {
    justify-content: flex-start;
  }
  .oj-md-justify-content-flex-end {
    justify-content: flex-end;
  }
  .oj-md-justify-content-center {
    justify-content: center;
  }
  .oj-md-justify-content-space-between {
    justify-content: space-between;
  }
  .oj-md-justify-content-space-around {
    justify-content: space-around;
  }
  .oj-md-align-items-center {
    align-items: center;
  }
  .oj-md-align-items-baseline {
    align-items: baseline;
  }
  .oj-md-align-items-flex-start {
    align-items: flex-start;
  }
  .oj-md-align-items-flex-end {
    align-items: flex-end;
  }
  .oj-md-align-self-center {
    align-self: center;
  }
  .oj-md-align-self-flex-start {
    align-self: flex-start;
  }
  .oj-md-align-self-flex-end {
    align-self: flex-end;
  }
  .oj-md-flex-direction-column {
    flex-direction: column;
  }
  .oj-md-flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-lg-flex-items-0 > .oj-flex-item,
  .oj-lg-flex-0 {
    flex: 0;
  }
  .oj-lg-flex-items-1 > .oj-flex-item,
  .oj-lg-flex-1 {
    flex: 1;
  }
  .oj-lg-flex-items-initial > .oj-flex-item,
  .oj-lg-flex-initial {
    flex: 0 1 auto;
  }
  .oj-lg-order-0 {
    order: 0;
  }
  .oj-lg-order-1 {
    order: 1;
  }
  .oj-lg-order-2 {
    order: 2;
  }
  .oj-lg-order-3 {
    order: 3;
  }
  .oj-lg-order-4 {
    order: 4;
  }
  .oj-lg-order-5 {
    order: 5;
  }
  .oj-lg-justify-content-flex-start {
    justify-content: flex-start;
  }
  .oj-lg-justify-content-flex-end {
    justify-content: flex-end;
  }
  .oj-lg-justify-content-center {
    justify-content: center;
  }
  .oj-lg-justify-content-space-between {
    justify-content: space-between;
  }
  .oj-lg-justify-content-space-around {
    justify-content: space-around;
  }
  .oj-lg-align-items-center {
    align-items: center;
  }
  .oj-lg-align-items-baseline {
    align-items: baseline;
  }
  .oj-lg-align-items-flex-start {
    align-items: flex-start;
  }
  .oj-lg-align-items-flex-end {
    align-items: flex-end;
  }
  .oj-lg-align-self-center {
    align-self: center;
  }
  .oj-lg-align-self-flex-start {
    align-self: flex-start;
  }
  .oj-lg-align-self-flex-end {
    align-self: flex-end;
  }
  .oj-lg-flex-direction-column {
    flex-direction: column;
  }
  .oj-lg-flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
}
@media screen and (min-width: 1281px) {
  .oj-xl-flex-items-0 > .oj-flex-item,
  .oj-xl-flex-0 {
    flex: 0;
  }
  .oj-xl-flex-items-1 > .oj-flex-item,
  .oj-xl-flex-1 {
    flex: 1;
  }
  .oj-xl-flex-items-initial > .oj-flex-item,
  .oj-xl-flex-initial {
    flex: 0 1 auto;
  }
  .oj-xl-order-0 {
    order: 0;
  }
  .oj-xl-order-1 {
    order: 1;
  }
  .oj-xl-order-2 {
    order: 2;
  }
  .oj-xl-order-3 {
    order: 3;
  }
  .oj-xl-order-4 {
    order: 4;
  }
  .oj-xl-order-5 {
    order: 5;
  }
  .oj-xl-justify-content-flex-start {
    justify-content: flex-start;
  }
  .oj-xl-justify-content-flex-end {
    justify-content: flex-end;
  }
  .oj-xl-justify-content-center {
    justify-content: center;
  }
  .oj-xl-justify-content-space-between {
    justify-content: space-between;
  }
  .oj-xl-justify-content-space-around {
    justify-content: space-around;
  }
  .oj-xl-align-items-center {
    align-items: center;
  }
  .oj-xl-align-items-baseline {
    align-items: baseline;
  }
  .oj-xl-align-items-flex-start {
    align-items: flex-start;
  }
  .oj-xl-align-items-flex-end {
    align-items: flex-end;
  }
  .oj-xl-align-self-center {
    align-self: center;
  }
  .oj-xl-align-self-flex-start {
    align-self: flex-start;
  }
  .oj-xl-align-self-flex-end {
    align-self: flex-end;
  }
  .oj-xl-flex-direction-column {
    flex-direction: column;
  }
  .oj-xl-flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
}
@media screen and (max-width: 767.9px) {
  .oj-sm-only-flex-items-0 > .oj-flex-item,
  .oj-sm-only-flex-0 {
    flex: 0;
  }
  .oj-sm-only-flex-items-1 > .oj-flex-item,
  .oj-sm-only-flex-1 {
    flex: 1;
  }
  .oj-sm-only-flex-items-initial > .oj-flex-item,
  .oj-sm-only-flex-initial {
    flex: 0 1 auto;
  }
  .oj-sm-only-justify-content-flex-start {
    justify-content: flex-start;
  }
  .oj-sm-only-justify-content-flex-end {
    justify-content: flex-end;
  }
  .oj-sm-only-justify-content-center {
    justify-content: center;
  }
  .oj-sm-only-justify-content-space-between {
    justify-content: space-between;
  }
  .oj-sm-only-justify-content-space-around {
    justify-content: space-around;
  }
  .oj-sm-only-align-items-center {
    align-items: center;
  }
  .oj-sm-only-align-items-baseline {
    align-items: baseline;
  }
  .oj-sm-only-align-items-flex-start {
    align-items: flex-start;
  }
  .oj-sm-only-align-items-flex-end {
    align-items: flex-end;
  }
  .oj-sm-only-align-self-center {
    align-self: center;
  }
  .oj-sm-only-align-self-flex-start {
    align-self: flex-start;
  }
  .oj-sm-only-align-self-flex-end {
    align-self: flex-end;
  }
  .oj-sm-only-flex-direction-column {
    flex-direction: column;
  }
  .oj-sm-only-flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
}
@media print and (orientation: portrait), screen and (min-width: 768px) and (max-width: 1023.9px) {
  .oj-md-only-flex-items-0 > .oj-flex-item,
  .oj-md-only-flex-0 {
    flex: 0;
  }
  .oj-md-only-flex-items-1 > .oj-flex-item,
  .oj-md-only-flex-1 {
    flex: 1;
  }
  .oj-md-only-flex-items-initial > .oj-flex-item,
  .oj-md-only-flex-initial {
    flex: 0 1 auto;
  }
  .oj-md-only-justify-content-flex-start {
    justify-content: flex-start;
  }
  .oj-md-only-justify-content-flex-end {
    justify-content: flex-end;
  }
  .oj-md-only-justify-content-center {
    justify-content: center;
  }
  .oj-md-only-justify-content-space-between {
    justify-content: space-between;
  }
  .oj-md-only-justify-content-space-around {
    justify-content: space-around;
  }
  .oj-md-only-align-items-center {
    align-items: center;
  }
  .oj-md-only-align-items-baseline {
    align-items: baseline;
  }
  .oj-md-only-align-items-flex-start {
    align-items: flex-start;
  }
  .oj-md-only-align-items-flex-end {
    align-items: flex-end;
  }
  .oj-md-only-align-self-center {
    align-self: center;
  }
  .oj-md-only-align-self-flex-start {
    align-self: flex-start;
  }
  .oj-md-only-align-self-flex-end {
    align-self: flex-end;
  }
  .oj-md-only-flex-direction-column {
    flex-direction: column;
  }
  .oj-md-only-flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1280.9px) {
  .oj-lg-only-flex-items-0 > .oj-flex-item,
  .oj-lg-only-flex-0 {
    flex: 0;
  }
  .oj-lg-only-flex-items-1 > .oj-flex-item,
  .oj-lg-only-flex-1 {
    flex: 1;
  }
  .oj-lg-only-flex-items-initial > .oj-flex-item,
  .oj-lg-only-flex-initial {
    flex: 0 1 auto;
  }
  .oj-lg-only-justify-content-flex-start {
    justify-content: flex-start;
  }
  .oj-lg-only-justify-content-flex-end {
    justify-content: flex-end;
  }
  .oj-lg-only-justify-content-center {
    justify-content: center;
  }
  .oj-lg-only-justify-content-space-between {
    justify-content: space-between;
  }
  .oj-lg-only-justify-content-space-around {
    justify-content: space-around;
  }
  .oj-lg-only-align-items-center {
    align-items: center;
  }
  .oj-lg-only-align-items-baseline {
    align-items: baseline;
  }
  .oj-lg-only-align-items-flex-start {
    align-items: flex-start;
  }
  .oj-lg-only-align-items-flex-end {
    align-items: flex-end;
  }
  .oj-lg-only-align-self-center {
    align-self: center;
  }
  .oj-lg-only-align-self-flex-start {
    align-self: flex-start;
  }
  .oj-lg-only-align-self-flex-end {
    align-self: flex-end;
  }
  .oj-lg-only-flex-direction-column {
    flex-direction: column;
  }
  .oj-lg-only-flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
}
@media print, screen {
  .oj-sm-1 {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-sm-2 {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-sm-3 {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-sm-4 {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-sm-5 {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .oj-sm-6 {
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%;
  }
  .oj-sm-7 {
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .oj-sm-8 {
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .oj-sm-9 {
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%;
  }
  .oj-sm-10 {
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .oj-sm-11 {
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .oj-sm-12 {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .oj-sm-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-sm-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .oj-sm-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-sm-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .oj-sm-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-sm-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%;
  }
  .oj-sm-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-sm-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .oj-sm-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .oj-sm-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .oj-sm-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%;
  }
  .oj-sm-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%;
  }
  .oj-sm-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .oj-sm-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .oj-sm-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .oj-sm-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-sm-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%;
  }
  .oj-sm-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-sm-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .oj-sm-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-sm-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .oj-sm-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-sm-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .oj-sm-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .oj-sm-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-sm-even-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-sm-even-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-sm-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-sm-even-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
}
@media print, screen and (min-width: 768px) {
  .oj-md-1 {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-md-2 {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-md-3 {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-md-4 {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-md-5 {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .oj-md-6 {
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%;
  }
  .oj-md-7 {
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .oj-md-8 {
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .oj-md-9 {
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%;
  }
  .oj-md-10 {
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .oj-md-11 {
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .oj-md-12 {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .oj-md-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-md-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .oj-md-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-md-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .oj-md-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-md-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%;
  }
  .oj-md-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-md-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .oj-md-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .oj-md-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .oj-md-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%;
  }
  .oj-md-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%;
  }
  .oj-md-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .oj-md-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .oj-md-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .oj-md-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-md-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%;
  }
  .oj-md-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-md-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .oj-md-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-md-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .oj-md-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-md-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .oj-md-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .oj-md-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-md-even-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-md-even-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-md-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-md-even-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-lg-1 {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-lg-2 {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-lg-3 {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-lg-4 {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-lg-5 {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .oj-lg-6 {
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%;
  }
  .oj-lg-7 {
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .oj-lg-8 {
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .oj-lg-9 {
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%;
  }
  .oj-lg-10 {
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .oj-lg-11 {
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .oj-lg-12 {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .oj-lg-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-lg-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .oj-lg-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-lg-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .oj-lg-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-lg-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%;
  }
  .oj-lg-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-lg-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .oj-lg-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .oj-lg-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .oj-lg-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%;
  }
  .oj-lg-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%;
  }
  .oj-lg-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .oj-lg-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .oj-lg-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .oj-lg-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-lg-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%;
  }
  .oj-lg-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-lg-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .oj-lg-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-lg-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .oj-lg-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-lg-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .oj-lg-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .oj-lg-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-lg-even-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-lg-even-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-lg-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-lg-even-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
}
@media screen and (min-width: 1281px) {
  .oj-xl-1 {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-xl-2 {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-xl-3 {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-xl-4 {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-xl-5 {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .oj-xl-6 {
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%;
  }
  .oj-xl-7 {
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .oj-xl-8 {
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .oj-xl-9 {
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%;
  }
  .oj-xl-10 {
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .oj-xl-11 {
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .oj-xl-12 {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .oj-xl-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-xl-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .oj-xl-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-xl-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .oj-xl-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-xl-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%;
  }
  .oj-xl-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-xl-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .oj-xl-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .oj-xl-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .oj-xl-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%;
  }
  .oj-xl-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%;
  }
  .oj-xl-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%;
  }
  .oj-xl-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
  .oj-xl-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .oj-xl-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-xl-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%;
  }
  .oj-xl-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-xl-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%;
  }
  .oj-xl-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-xl-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%;
  }
  .oj-xl-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-xl-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .oj-xl-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .oj-xl-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
  .oj-xl-even-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
  .oj-xl-even-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%;
  }
  .oj-xl-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
  .oj-xl-even-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%;
  }
}
@media print, screen {
  .oj-sm-hide {
    display: none;
  }
  html:not([dir=rtl]) .oj-sm-margin-0 {
    margin: 0 !important;
  }
  html[dir=rtl] .oj-sm-margin-0 {
    margin: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-sm-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-sm-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-0-top {
    margin-top: 0 !important;
  }
  html[dir=rtl] .oj-sm-margin-0-top {
    margin-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-sm-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-0-start {
    margin-left: 0 !important;
  }
  html[dir=rtl] .oj-sm-margin-0-start {
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-0-end {
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-sm-margin-0-end {
    margin-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-0 {
    padding: 0 !important;
  }
  html[dir=rtl] .oj-sm-padding-0 {
    padding: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-sm-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-sm-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-0-top {
    padding-top: 0 !important;
  }
  html[dir=rtl] .oj-sm-padding-0-top {
    padding-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-sm-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-0-start {
    padding-left: 0 !important;
  }
  html[dir=rtl] .oj-sm-padding-0-start {
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-0-end {
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-sm-padding-0-end {
    padding-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-1x {
    margin: 5px !important;
  }
  html[dir=rtl] .oj-sm-margin-1x {
    margin: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-sm-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  html[dir=rtl] .oj-sm-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  .oj-sm-margin-1x-top {
    margin-top: 5px !important;
  }
  .oj-sm-margin-1x-bottom {
    margin-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-1x-start {
    margin-left: 5px !important;
  }
  html[dir=rtl] .oj-sm-margin-1x-start {
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-1x-end {
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-sm-margin-1x-end {
    margin-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-1x {
    padding: 5px !important;
  }
  html[dir=rtl] .oj-sm-padding-1x {
    padding: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-sm-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-sm-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-1x-top {
    padding-top: 5px !important;
  }
  html[dir=rtl] .oj-sm-padding-1x-top {
    padding-top: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-sm-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-1x-start {
    padding-left: 5px !important;
  }
  html[dir=rtl] .oj-sm-padding-1x-start {
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-1x-end {
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-sm-padding-1x-end {
    padding-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-2x {
    margin: 10px !important;
  }
  html[dir=rtl] .oj-sm-margin-2x {
    margin: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-sm-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  html[dir=rtl] .oj-sm-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .oj-sm-margin-2x-top {
    margin-top: 10px !important;
  }
  .oj-sm-margin-2x-bottom {
    margin-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-2x-start {
    margin-left: 10px !important;
  }
  html[dir=rtl] .oj-sm-margin-2x-start {
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-2x-end {
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-sm-margin-2x-end {
    margin-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-2x {
    padding: 10px !important;
  }
  html[dir=rtl] .oj-sm-padding-2x {
    padding: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-sm-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-sm-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-2x-top {
    padding-top: 10px !important;
  }
  html[dir=rtl] .oj-sm-padding-2x-top {
    padding-top: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-sm-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-2x-start {
    padding-left: 10px !important;
  }
  html[dir=rtl] .oj-sm-padding-2x-start {
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-2x-end {
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-sm-padding-2x-end {
    padding-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-3x {
    margin: 15px !important;
  }
  html[dir=rtl] .oj-sm-margin-3x {
    margin: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-sm-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  html[dir=rtl] .oj-sm-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .oj-sm-margin-3x-top {
    margin-top: 15px !important;
  }
  .oj-sm-margin-3x-bottom {
    margin-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-3x-start {
    margin-left: 15px !important;
  }
  html[dir=rtl] .oj-sm-margin-3x-start {
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-3x-end {
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-sm-margin-3x-end {
    margin-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-3x {
    padding: 15px !important;
  }
  html[dir=rtl] .oj-sm-padding-3x {
    padding: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-sm-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-sm-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-3x-top {
    padding-top: 15px !important;
  }
  html[dir=rtl] .oj-sm-padding-3x-top {
    padding-top: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-sm-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-3x-start {
    padding-left: 15px !important;
  }
  html[dir=rtl] .oj-sm-padding-3x-start {
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-3x-end {
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-sm-padding-3x-end {
    padding-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-4x {
    margin: 20px !important;
  }
  html[dir=rtl] .oj-sm-margin-4x {
    margin: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-sm-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  html[dir=rtl] .oj-sm-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .oj-sm-margin-4x-top {
    margin-top: 20px !important;
  }
  .oj-sm-margin-4x-bottom {
    margin-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-4x-start {
    margin-left: 20px !important;
  }
  html[dir=rtl] .oj-sm-margin-4x-start {
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-4x-end {
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-sm-margin-4x-end {
    margin-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-4x {
    padding: 20px !important;
  }
  html[dir=rtl] .oj-sm-padding-4x {
    padding: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-sm-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-sm-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-4x-top {
    padding-top: 20px !important;
  }
  html[dir=rtl] .oj-sm-padding-4x-top {
    padding-top: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-sm-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-4x-start {
    padding-left: 20px !important;
  }
  html[dir=rtl] .oj-sm-padding-4x-start {
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-4x-end {
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-sm-padding-4x-end {
    padding-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-5x {
    margin: 25px !important;
  }
  html[dir=rtl] .oj-sm-margin-5x {
    margin: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-sm-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  html[dir=rtl] .oj-sm-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  .oj-sm-margin-5x-top {
    margin-top: 25px !important;
  }
  .oj-sm-margin-5x-bottom {
    margin-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-5x-start {
    margin-left: 25px !important;
  }
  html[dir=rtl] .oj-sm-margin-5x-start {
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-5x-end {
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-sm-margin-5x-end {
    margin-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-5x {
    padding: 25px !important;
  }
  html[dir=rtl] .oj-sm-padding-5x {
    padding: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-sm-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-sm-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-5x-top {
    padding-top: 25px !important;
  }
  html[dir=rtl] .oj-sm-padding-5x-top {
    padding-top: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-sm-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-5x-start {
    padding-left: 25px !important;
  }
  html[dir=rtl] .oj-sm-padding-5x-start {
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-5x-end {
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-sm-padding-5x-end {
    padding-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-6x {
    margin: 30px !important;
  }
  html[dir=rtl] .oj-sm-margin-6x {
    margin: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-sm-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  html[dir=rtl] .oj-sm-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .oj-sm-margin-6x-top {
    margin-top: 30px !important;
  }
  .oj-sm-margin-6x-bottom {
    margin-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-6x-start {
    margin-left: 30px !important;
  }
  html[dir=rtl] .oj-sm-margin-6x-start {
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-6x-end {
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-sm-margin-6x-end {
    margin-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-6x {
    padding: 30px !important;
  }
  html[dir=rtl] .oj-sm-padding-6x {
    padding: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-sm-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-sm-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-6x-top {
    padding-top: 30px !important;
  }
  html[dir=rtl] .oj-sm-padding-6x-top {
    padding-top: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-sm-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-6x-start {
    padding-left: 30px !important;
  }
  html[dir=rtl] .oj-sm-padding-6x-start {
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-6x-end {
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-sm-padding-6x-end {
    padding-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-7x {
    margin: 35px !important;
  }
  html[dir=rtl] .oj-sm-margin-7x {
    margin: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-sm-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  html[dir=rtl] .oj-sm-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  .oj-sm-margin-7x-top {
    margin-top: 35px !important;
  }
  .oj-sm-margin-7x-bottom {
    margin-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-7x-start {
    margin-left: 35px !important;
  }
  html[dir=rtl] .oj-sm-margin-7x-start {
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-7x-end {
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-sm-margin-7x-end {
    margin-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-7x {
    padding: 35px !important;
  }
  html[dir=rtl] .oj-sm-padding-7x {
    padding: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-sm-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-sm-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-7x-top {
    padding-top: 35px !important;
  }
  html[dir=rtl] .oj-sm-padding-7x-top {
    padding-top: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-sm-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-7x-start {
    padding-left: 35px !important;
  }
  html[dir=rtl] .oj-sm-padding-7x-start {
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-7x-end {
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-sm-padding-7x-end {
    padding-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-8x {
    margin: 40px !important;
  }
  html[dir=rtl] .oj-sm-margin-8x {
    margin: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-sm-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  html[dir=rtl] .oj-sm-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .oj-sm-margin-8x-top {
    margin-top: 40px !important;
  }
  .oj-sm-margin-8x-bottom {
    margin-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-8x-start {
    margin-left: 40px !important;
  }
  html[dir=rtl] .oj-sm-margin-8x-start {
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-8x-end {
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-sm-margin-8x-end {
    margin-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-8x {
    padding: 40px !important;
  }
  html[dir=rtl] .oj-sm-padding-8x {
    padding: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-sm-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-sm-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-8x-top {
    padding-top: 40px !important;
  }
  html[dir=rtl] .oj-sm-padding-8x-top {
    padding-top: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-sm-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-8x-start {
    padding-left: 40px !important;
  }
  html[dir=rtl] .oj-sm-padding-8x-start {
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-8x-end {
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-sm-padding-8x-end {
    padding-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-9x {
    margin: 45px !important;
  }
  html[dir=rtl] .oj-sm-margin-9x {
    margin: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-sm-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  html[dir=rtl] .oj-sm-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  .oj-sm-margin-9x-top {
    margin-top: 45px !important;
  }
  .oj-sm-margin-9x-bottom {
    margin-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-9x-start {
    margin-left: 45px !important;
  }
  html[dir=rtl] .oj-sm-margin-9x-start {
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-9x-end {
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-sm-margin-9x-end {
    margin-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-9x {
    padding: 45px !important;
  }
  html[dir=rtl] .oj-sm-padding-9x {
    padding: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-sm-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-sm-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-9x-top {
    padding-top: 45px !important;
  }
  html[dir=rtl] .oj-sm-padding-9x-top {
    padding-top: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-sm-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-9x-start {
    padding-left: 45px !important;
  }
  html[dir=rtl] .oj-sm-padding-9x-start {
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-9x-end {
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-sm-padding-9x-end {
    padding-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-10x {
    margin: 50px !important;
  }
  html[dir=rtl] .oj-sm-margin-10x {
    margin: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-sm-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  html[dir=rtl] .oj-sm-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  .oj-sm-margin-10x-top {
    margin-top: 50px !important;
  }
  .oj-sm-margin-10x-bottom {
    margin-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-10x-start {
    margin-left: 50px !important;
  }
  html[dir=rtl] .oj-sm-margin-10x-start {
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-10x-end {
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-sm-margin-10x-end {
    margin-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-10x {
    padding: 50px !important;
  }
  html[dir=rtl] .oj-sm-padding-10x {
    padding: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-sm-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-sm-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-10x-top {
    padding-top: 50px !important;
  }
  html[dir=rtl] .oj-sm-padding-10x-top {
    padding-top: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-sm-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-10x-start {
    padding-left: 50px !important;
  }
  html[dir=rtl] .oj-sm-padding-10x-start {
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-10x-end {
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-sm-padding-10x-end {
    padding-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-11x {
    margin: 55px !important;
  }
  html[dir=rtl] .oj-sm-margin-11x {
    margin: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-sm-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  html[dir=rtl] .oj-sm-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  .oj-sm-margin-11x-top {
    margin-top: 55px !important;
  }
  .oj-sm-margin-11x-bottom {
    margin-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-11x-start {
    margin-left: 55px !important;
  }
  html[dir=rtl] .oj-sm-margin-11x-start {
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-11x-end {
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-sm-margin-11x-end {
    margin-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-11x {
    padding: 55px !important;
  }
  html[dir=rtl] .oj-sm-padding-11x {
    padding: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-sm-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-sm-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-11x-top {
    padding-top: 55px !important;
  }
  html[dir=rtl] .oj-sm-padding-11x-top {
    padding-top: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-sm-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-11x-start {
    padding-left: 55px !important;
  }
  html[dir=rtl] .oj-sm-padding-11x-start {
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-11x-end {
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-sm-padding-11x-end {
    padding-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-12x {
    margin: 60px !important;
  }
  html[dir=rtl] .oj-sm-margin-12x {
    margin: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-sm-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  html[dir=rtl] .oj-sm-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .oj-sm-margin-12x-top {
    margin-top: 60px !important;
  }
  .oj-sm-margin-12x-bottom {
    margin-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-12x-start {
    margin-left: 60px !important;
  }
  html[dir=rtl] .oj-sm-margin-12x-start {
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-margin-12x-end {
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-sm-margin-12x-end {
    margin-left: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-12x {
    padding: 60px !important;
  }
  html[dir=rtl] .oj-sm-padding-12x {
    padding: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-sm-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-sm-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-12x-top {
    padding-top: 60px !important;
  }
  html[dir=rtl] .oj-sm-padding-12x-top {
    padding-top: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-sm-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-12x-start {
    padding-left: 60px !important;
  }
  html[dir=rtl] .oj-sm-padding-12x-start {
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-padding-12x-end {
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-sm-padding-12x-end {
    padding-left: 60px !important;
  }
  .oj-sm-width-1\/2 {
    width: 50% !important;
  }
  .oj-sm-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-sm-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-sm-width-1\/4 {
    width: 25% !important;
  }
  .oj-sm-width-3\/4 {
    width: 75% !important;
  }
  .oj-sm-width-1\/5 {
    width: 20% !important;
  }
  .oj-sm-width-2\/5 {
    width: 40% !important;
  }
  .oj-sm-width-3\/5 {
    width: 60% !important;
  }
  .oj-sm-width-4\/5 {
    width: 80% !important;
  }
  .oj-sm-width-full {
    width: 100% !important;
  }
  .oj-sm-text-align-end {
    text-align: right;
  }
  html[dir=rtl] .oj-sm-text-align-end {
    text-align: left;
  }
  .oj-sm-float-end {
    float: right;
  }
  html[dir=rtl] .oj-sm-float-end {
    float: left;
  }
  .oj-sm-float-start {
    float: left;
  }
  html[dir=rtl] .oj-sm-float-start {
    float: right;
  }
}
@media print, screen and (min-width: 768px) {
  .oj-md-hide {
    display: none;
  }
  html:not([dir=rtl]) .oj-md-margin-0 {
    margin: 0 !important;
  }
  html[dir=rtl] .oj-md-margin-0 {
    margin: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-md-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-md-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-margin-0-top {
    margin-top: 0 !important;
  }
  html[dir=rtl] .oj-md-margin-0-top {
    margin-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-md-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-margin-0-start {
    margin-left: 0 !important;
  }
  html[dir=rtl] .oj-md-margin-0-start {
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-margin-0-end {
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-md-margin-0-end {
    margin-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-padding-0 {
    padding: 0 !important;
  }
  html[dir=rtl] .oj-md-padding-0 {
    padding: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-md-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-md-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-padding-0-top {
    padding-top: 0 !important;
  }
  html[dir=rtl] .oj-md-padding-0-top {
    padding-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-md-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-padding-0-start {
    padding-left: 0 !important;
  }
  html[dir=rtl] .oj-md-padding-0-start {
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-padding-0-end {
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-md-padding-0-end {
    padding-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-margin-1x {
    margin: 5px !important;
  }
  html[dir=rtl] .oj-md-margin-1x {
    margin: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-md-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  html[dir=rtl] .oj-md-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  .oj-md-margin-1x-top {
    margin-top: 5px !important;
  }
  .oj-md-margin-1x-bottom {
    margin-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-1x-start {
    margin-left: 5px !important;
  }
  html[dir=rtl] .oj-md-margin-1x-start {
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-1x-end {
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-md-margin-1x-end {
    margin-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-1x {
    padding: 5px !important;
  }
  html[dir=rtl] .oj-md-padding-1x {
    padding: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-md-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-md-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-1x-top {
    padding-top: 5px !important;
  }
  html[dir=rtl] .oj-md-padding-1x-top {
    padding-top: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-md-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-1x-start {
    padding-left: 5px !important;
  }
  html[dir=rtl] .oj-md-padding-1x-start {
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-1x-end {
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-md-padding-1x-end {
    padding-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-2x {
    margin: 10px !important;
  }
  html[dir=rtl] .oj-md-margin-2x {
    margin: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-md-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  html[dir=rtl] .oj-md-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .oj-md-margin-2x-top {
    margin-top: 10px !important;
  }
  .oj-md-margin-2x-bottom {
    margin-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-2x-start {
    margin-left: 10px !important;
  }
  html[dir=rtl] .oj-md-margin-2x-start {
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-2x-end {
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-md-margin-2x-end {
    margin-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-2x {
    padding: 10px !important;
  }
  html[dir=rtl] .oj-md-padding-2x {
    padding: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-md-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-md-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-2x-top {
    padding-top: 10px !important;
  }
  html[dir=rtl] .oj-md-padding-2x-top {
    padding-top: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-md-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-2x-start {
    padding-left: 10px !important;
  }
  html[dir=rtl] .oj-md-padding-2x-start {
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-2x-end {
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-md-padding-2x-end {
    padding-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-3x {
    margin: 15px !important;
  }
  html[dir=rtl] .oj-md-margin-3x {
    margin: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-md-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  html[dir=rtl] .oj-md-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .oj-md-margin-3x-top {
    margin-top: 15px !important;
  }
  .oj-md-margin-3x-bottom {
    margin-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-3x-start {
    margin-left: 15px !important;
  }
  html[dir=rtl] .oj-md-margin-3x-start {
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-3x-end {
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-md-margin-3x-end {
    margin-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-3x {
    padding: 15px !important;
  }
  html[dir=rtl] .oj-md-padding-3x {
    padding: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-md-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-md-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-3x-top {
    padding-top: 15px !important;
  }
  html[dir=rtl] .oj-md-padding-3x-top {
    padding-top: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-md-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-3x-start {
    padding-left: 15px !important;
  }
  html[dir=rtl] .oj-md-padding-3x-start {
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-3x-end {
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-md-padding-3x-end {
    padding-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-4x {
    margin: 20px !important;
  }
  html[dir=rtl] .oj-md-margin-4x {
    margin: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-md-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  html[dir=rtl] .oj-md-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .oj-md-margin-4x-top {
    margin-top: 20px !important;
  }
  .oj-md-margin-4x-bottom {
    margin-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-4x-start {
    margin-left: 20px !important;
  }
  html[dir=rtl] .oj-md-margin-4x-start {
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-4x-end {
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-md-margin-4x-end {
    margin-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-4x {
    padding: 20px !important;
  }
  html[dir=rtl] .oj-md-padding-4x {
    padding: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-md-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-md-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-4x-top {
    padding-top: 20px !important;
  }
  html[dir=rtl] .oj-md-padding-4x-top {
    padding-top: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-md-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-4x-start {
    padding-left: 20px !important;
  }
  html[dir=rtl] .oj-md-padding-4x-start {
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-4x-end {
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-md-padding-4x-end {
    padding-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-5x {
    margin: 25px !important;
  }
  html[dir=rtl] .oj-md-margin-5x {
    margin: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-md-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  html[dir=rtl] .oj-md-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  .oj-md-margin-5x-top {
    margin-top: 25px !important;
  }
  .oj-md-margin-5x-bottom {
    margin-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-5x-start {
    margin-left: 25px !important;
  }
  html[dir=rtl] .oj-md-margin-5x-start {
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-5x-end {
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-md-margin-5x-end {
    margin-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-5x {
    padding: 25px !important;
  }
  html[dir=rtl] .oj-md-padding-5x {
    padding: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-md-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-md-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-5x-top {
    padding-top: 25px !important;
  }
  html[dir=rtl] .oj-md-padding-5x-top {
    padding-top: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-md-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-5x-start {
    padding-left: 25px !important;
  }
  html[dir=rtl] .oj-md-padding-5x-start {
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-5x-end {
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-md-padding-5x-end {
    padding-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-6x {
    margin: 30px !important;
  }
  html[dir=rtl] .oj-md-margin-6x {
    margin: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-md-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  html[dir=rtl] .oj-md-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .oj-md-margin-6x-top {
    margin-top: 30px !important;
  }
  .oj-md-margin-6x-bottom {
    margin-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-6x-start {
    margin-left: 30px !important;
  }
  html[dir=rtl] .oj-md-margin-6x-start {
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-6x-end {
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-md-margin-6x-end {
    margin-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-6x {
    padding: 30px !important;
  }
  html[dir=rtl] .oj-md-padding-6x {
    padding: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-md-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-md-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-6x-top {
    padding-top: 30px !important;
  }
  html[dir=rtl] .oj-md-padding-6x-top {
    padding-top: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-md-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-6x-start {
    padding-left: 30px !important;
  }
  html[dir=rtl] .oj-md-padding-6x-start {
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-6x-end {
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-md-padding-6x-end {
    padding-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-7x {
    margin: 35px !important;
  }
  html[dir=rtl] .oj-md-margin-7x {
    margin: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-md-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  html[dir=rtl] .oj-md-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  .oj-md-margin-7x-top {
    margin-top: 35px !important;
  }
  .oj-md-margin-7x-bottom {
    margin-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-7x-start {
    margin-left: 35px !important;
  }
  html[dir=rtl] .oj-md-margin-7x-start {
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-7x-end {
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-md-margin-7x-end {
    margin-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-7x {
    padding: 35px !important;
  }
  html[dir=rtl] .oj-md-padding-7x {
    padding: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-md-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-md-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-7x-top {
    padding-top: 35px !important;
  }
  html[dir=rtl] .oj-md-padding-7x-top {
    padding-top: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-md-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-7x-start {
    padding-left: 35px !important;
  }
  html[dir=rtl] .oj-md-padding-7x-start {
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-7x-end {
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-md-padding-7x-end {
    padding-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-8x {
    margin: 40px !important;
  }
  html[dir=rtl] .oj-md-margin-8x {
    margin: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-md-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  html[dir=rtl] .oj-md-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .oj-md-margin-8x-top {
    margin-top: 40px !important;
  }
  .oj-md-margin-8x-bottom {
    margin-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-8x-start {
    margin-left: 40px !important;
  }
  html[dir=rtl] .oj-md-margin-8x-start {
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-8x-end {
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-md-margin-8x-end {
    margin-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-8x {
    padding: 40px !important;
  }
  html[dir=rtl] .oj-md-padding-8x {
    padding: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-md-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-md-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-8x-top {
    padding-top: 40px !important;
  }
  html[dir=rtl] .oj-md-padding-8x-top {
    padding-top: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-md-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-8x-start {
    padding-left: 40px !important;
  }
  html[dir=rtl] .oj-md-padding-8x-start {
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-8x-end {
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-md-padding-8x-end {
    padding-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-9x {
    margin: 45px !important;
  }
  html[dir=rtl] .oj-md-margin-9x {
    margin: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-md-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  html[dir=rtl] .oj-md-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  .oj-md-margin-9x-top {
    margin-top: 45px !important;
  }
  .oj-md-margin-9x-bottom {
    margin-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-9x-start {
    margin-left: 45px !important;
  }
  html[dir=rtl] .oj-md-margin-9x-start {
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-9x-end {
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-md-margin-9x-end {
    margin-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-9x {
    padding: 45px !important;
  }
  html[dir=rtl] .oj-md-padding-9x {
    padding: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-md-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-md-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-9x-top {
    padding-top: 45px !important;
  }
  html[dir=rtl] .oj-md-padding-9x-top {
    padding-top: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-md-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-9x-start {
    padding-left: 45px !important;
  }
  html[dir=rtl] .oj-md-padding-9x-start {
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-9x-end {
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-md-padding-9x-end {
    padding-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-10x {
    margin: 50px !important;
  }
  html[dir=rtl] .oj-md-margin-10x {
    margin: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-md-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  html[dir=rtl] .oj-md-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  .oj-md-margin-10x-top {
    margin-top: 50px !important;
  }
  .oj-md-margin-10x-bottom {
    margin-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-10x-start {
    margin-left: 50px !important;
  }
  html[dir=rtl] .oj-md-margin-10x-start {
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-10x-end {
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-md-margin-10x-end {
    margin-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-10x {
    padding: 50px !important;
  }
  html[dir=rtl] .oj-md-padding-10x {
    padding: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-md-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-md-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-10x-top {
    padding-top: 50px !important;
  }
  html[dir=rtl] .oj-md-padding-10x-top {
    padding-top: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-md-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-10x-start {
    padding-left: 50px !important;
  }
  html[dir=rtl] .oj-md-padding-10x-start {
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-10x-end {
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-md-padding-10x-end {
    padding-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-11x {
    margin: 55px !important;
  }
  html[dir=rtl] .oj-md-margin-11x {
    margin: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-md-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  html[dir=rtl] .oj-md-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  .oj-md-margin-11x-top {
    margin-top: 55px !important;
  }
  .oj-md-margin-11x-bottom {
    margin-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-11x-start {
    margin-left: 55px !important;
  }
  html[dir=rtl] .oj-md-margin-11x-start {
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-11x-end {
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-md-margin-11x-end {
    margin-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-11x {
    padding: 55px !important;
  }
  html[dir=rtl] .oj-md-padding-11x {
    padding: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-md-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-md-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-11x-top {
    padding-top: 55px !important;
  }
  html[dir=rtl] .oj-md-padding-11x-top {
    padding-top: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-md-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-11x-start {
    padding-left: 55px !important;
  }
  html[dir=rtl] .oj-md-padding-11x-start {
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-11x-end {
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-md-padding-11x-end {
    padding-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-12x {
    margin: 60px !important;
  }
  html[dir=rtl] .oj-md-margin-12x {
    margin: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-md-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  html[dir=rtl] .oj-md-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .oj-md-margin-12x-top {
    margin-top: 60px !important;
  }
  .oj-md-margin-12x-bottom {
    margin-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-12x-start {
    margin-left: 60px !important;
  }
  html[dir=rtl] .oj-md-margin-12x-start {
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-margin-12x-end {
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-md-margin-12x-end {
    margin-left: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-12x {
    padding: 60px !important;
  }
  html[dir=rtl] .oj-md-padding-12x {
    padding: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-md-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-md-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-12x-top {
    padding-top: 60px !important;
  }
  html[dir=rtl] .oj-md-padding-12x-top {
    padding-top: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-md-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-12x-start {
    padding-left: 60px !important;
  }
  html[dir=rtl] .oj-md-padding-12x-start {
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-padding-12x-end {
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-md-padding-12x-end {
    padding-left: 60px !important;
  }
  .oj-md-width-1\/2 {
    width: 50% !important;
  }
  .oj-md-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-md-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-md-width-1\/4 {
    width: 25% !important;
  }
  .oj-md-width-3\/4 {
    width: 75% !important;
  }
  .oj-md-width-1\/5 {
    width: 20% !important;
  }
  .oj-md-width-2\/5 {
    width: 40% !important;
  }
  .oj-md-width-3\/5 {
    width: 60% !important;
  }
  .oj-md-width-4\/5 {
    width: 80% !important;
  }
  .oj-md-width-full {
    width: 100% !important;
  }
  .oj-md-text-align-end {
    text-align: right;
  }
  html[dir=rtl] .oj-md-text-align-end {
    text-align: left;
  }
  .oj-md-float-end {
    float: right;
  }
  html[dir=rtl] .oj-md-float-end {
    float: left;
  }
  .oj-md-float-start {
    float: left;
  }
  html[dir=rtl] .oj-md-float-start {
    float: right;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-lg-hide {
    display: none;
  }
  html:not([dir=rtl]) .oj-lg-margin-0 {
    margin: 0 !important;
  }
  html[dir=rtl] .oj-lg-margin-0 {
    margin: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-lg-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-lg-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-0-top {
    margin-top: 0 !important;
  }
  html[dir=rtl] .oj-lg-margin-0-top {
    margin-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-lg-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-0-start {
    margin-left: 0 !important;
  }
  html[dir=rtl] .oj-lg-margin-0-start {
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-0-end {
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-lg-margin-0-end {
    margin-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-0 {
    padding: 0 !important;
  }
  html[dir=rtl] .oj-lg-padding-0 {
    padding: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-lg-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-lg-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-0-top {
    padding-top: 0 !important;
  }
  html[dir=rtl] .oj-lg-padding-0-top {
    padding-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-lg-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-0-start {
    padding-left: 0 !important;
  }
  html[dir=rtl] .oj-lg-padding-0-start {
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-0-end {
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-lg-padding-0-end {
    padding-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-1x {
    margin: 5px !important;
  }
  html[dir=rtl] .oj-lg-margin-1x {
    margin: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-lg-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  html[dir=rtl] .oj-lg-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  .oj-lg-margin-1x-top {
    margin-top: 5px !important;
  }
  .oj-lg-margin-1x-bottom {
    margin-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-1x-start {
    margin-left: 5px !important;
  }
  html[dir=rtl] .oj-lg-margin-1x-start {
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-1x-end {
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-lg-margin-1x-end {
    margin-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-1x {
    padding: 5px !important;
  }
  html[dir=rtl] .oj-lg-padding-1x {
    padding: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-lg-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-lg-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-1x-top {
    padding-top: 5px !important;
  }
  html[dir=rtl] .oj-lg-padding-1x-top {
    padding-top: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-lg-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-1x-start {
    padding-left: 5px !important;
  }
  html[dir=rtl] .oj-lg-padding-1x-start {
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-1x-end {
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-lg-padding-1x-end {
    padding-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-2x {
    margin: 10px !important;
  }
  html[dir=rtl] .oj-lg-margin-2x {
    margin: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-lg-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  html[dir=rtl] .oj-lg-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .oj-lg-margin-2x-top {
    margin-top: 10px !important;
  }
  .oj-lg-margin-2x-bottom {
    margin-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-2x-start {
    margin-left: 10px !important;
  }
  html[dir=rtl] .oj-lg-margin-2x-start {
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-2x-end {
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-lg-margin-2x-end {
    margin-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-2x {
    padding: 10px !important;
  }
  html[dir=rtl] .oj-lg-padding-2x {
    padding: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-lg-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-lg-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-2x-top {
    padding-top: 10px !important;
  }
  html[dir=rtl] .oj-lg-padding-2x-top {
    padding-top: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-lg-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-2x-start {
    padding-left: 10px !important;
  }
  html[dir=rtl] .oj-lg-padding-2x-start {
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-2x-end {
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-lg-padding-2x-end {
    padding-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-3x {
    margin: 15px !important;
  }
  html[dir=rtl] .oj-lg-margin-3x {
    margin: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-lg-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  html[dir=rtl] .oj-lg-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .oj-lg-margin-3x-top {
    margin-top: 15px !important;
  }
  .oj-lg-margin-3x-bottom {
    margin-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-3x-start {
    margin-left: 15px !important;
  }
  html[dir=rtl] .oj-lg-margin-3x-start {
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-3x-end {
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-lg-margin-3x-end {
    margin-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-3x {
    padding: 15px !important;
  }
  html[dir=rtl] .oj-lg-padding-3x {
    padding: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-lg-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-lg-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-3x-top {
    padding-top: 15px !important;
  }
  html[dir=rtl] .oj-lg-padding-3x-top {
    padding-top: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-lg-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-3x-start {
    padding-left: 15px !important;
  }
  html[dir=rtl] .oj-lg-padding-3x-start {
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-3x-end {
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-lg-padding-3x-end {
    padding-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-4x {
    margin: 20px !important;
  }
  html[dir=rtl] .oj-lg-margin-4x {
    margin: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-lg-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  html[dir=rtl] .oj-lg-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .oj-lg-margin-4x-top {
    margin-top: 20px !important;
  }
  .oj-lg-margin-4x-bottom {
    margin-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-4x-start {
    margin-left: 20px !important;
  }
  html[dir=rtl] .oj-lg-margin-4x-start {
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-4x-end {
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-lg-margin-4x-end {
    margin-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-4x {
    padding: 20px !important;
  }
  html[dir=rtl] .oj-lg-padding-4x {
    padding: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-lg-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-lg-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-4x-top {
    padding-top: 20px !important;
  }
  html[dir=rtl] .oj-lg-padding-4x-top {
    padding-top: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-lg-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-4x-start {
    padding-left: 20px !important;
  }
  html[dir=rtl] .oj-lg-padding-4x-start {
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-4x-end {
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-lg-padding-4x-end {
    padding-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-5x {
    margin: 25px !important;
  }
  html[dir=rtl] .oj-lg-margin-5x {
    margin: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-lg-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  html[dir=rtl] .oj-lg-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  .oj-lg-margin-5x-top {
    margin-top: 25px !important;
  }
  .oj-lg-margin-5x-bottom {
    margin-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-5x-start {
    margin-left: 25px !important;
  }
  html[dir=rtl] .oj-lg-margin-5x-start {
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-5x-end {
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-lg-margin-5x-end {
    margin-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-5x {
    padding: 25px !important;
  }
  html[dir=rtl] .oj-lg-padding-5x {
    padding: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-lg-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-lg-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-5x-top {
    padding-top: 25px !important;
  }
  html[dir=rtl] .oj-lg-padding-5x-top {
    padding-top: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-lg-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-5x-start {
    padding-left: 25px !important;
  }
  html[dir=rtl] .oj-lg-padding-5x-start {
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-5x-end {
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-lg-padding-5x-end {
    padding-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-6x {
    margin: 30px !important;
  }
  html[dir=rtl] .oj-lg-margin-6x {
    margin: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-lg-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  html[dir=rtl] .oj-lg-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .oj-lg-margin-6x-top {
    margin-top: 30px !important;
  }
  .oj-lg-margin-6x-bottom {
    margin-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-6x-start {
    margin-left: 30px !important;
  }
  html[dir=rtl] .oj-lg-margin-6x-start {
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-6x-end {
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-lg-margin-6x-end {
    margin-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-6x {
    padding: 30px !important;
  }
  html[dir=rtl] .oj-lg-padding-6x {
    padding: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-lg-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-lg-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-6x-top {
    padding-top: 30px !important;
  }
  html[dir=rtl] .oj-lg-padding-6x-top {
    padding-top: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-lg-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-6x-start {
    padding-left: 30px !important;
  }
  html[dir=rtl] .oj-lg-padding-6x-start {
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-6x-end {
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-lg-padding-6x-end {
    padding-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-7x {
    margin: 35px !important;
  }
  html[dir=rtl] .oj-lg-margin-7x {
    margin: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-lg-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  html[dir=rtl] .oj-lg-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  .oj-lg-margin-7x-top {
    margin-top: 35px !important;
  }
  .oj-lg-margin-7x-bottom {
    margin-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-7x-start {
    margin-left: 35px !important;
  }
  html[dir=rtl] .oj-lg-margin-7x-start {
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-7x-end {
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-lg-margin-7x-end {
    margin-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-7x {
    padding: 35px !important;
  }
  html[dir=rtl] .oj-lg-padding-7x {
    padding: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-lg-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-lg-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-7x-top {
    padding-top: 35px !important;
  }
  html[dir=rtl] .oj-lg-padding-7x-top {
    padding-top: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-lg-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-7x-start {
    padding-left: 35px !important;
  }
  html[dir=rtl] .oj-lg-padding-7x-start {
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-7x-end {
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-lg-padding-7x-end {
    padding-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-8x {
    margin: 40px !important;
  }
  html[dir=rtl] .oj-lg-margin-8x {
    margin: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-lg-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  html[dir=rtl] .oj-lg-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .oj-lg-margin-8x-top {
    margin-top: 40px !important;
  }
  .oj-lg-margin-8x-bottom {
    margin-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-8x-start {
    margin-left: 40px !important;
  }
  html[dir=rtl] .oj-lg-margin-8x-start {
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-8x-end {
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-lg-margin-8x-end {
    margin-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-8x {
    padding: 40px !important;
  }
  html[dir=rtl] .oj-lg-padding-8x {
    padding: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-lg-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-lg-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-8x-top {
    padding-top: 40px !important;
  }
  html[dir=rtl] .oj-lg-padding-8x-top {
    padding-top: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-lg-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-8x-start {
    padding-left: 40px !important;
  }
  html[dir=rtl] .oj-lg-padding-8x-start {
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-8x-end {
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-lg-padding-8x-end {
    padding-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-9x {
    margin: 45px !important;
  }
  html[dir=rtl] .oj-lg-margin-9x {
    margin: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-lg-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  html[dir=rtl] .oj-lg-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  .oj-lg-margin-9x-top {
    margin-top: 45px !important;
  }
  .oj-lg-margin-9x-bottom {
    margin-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-9x-start {
    margin-left: 45px !important;
  }
  html[dir=rtl] .oj-lg-margin-9x-start {
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-9x-end {
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-lg-margin-9x-end {
    margin-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-9x {
    padding: 45px !important;
  }
  html[dir=rtl] .oj-lg-padding-9x {
    padding: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-lg-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-lg-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-9x-top {
    padding-top: 45px !important;
  }
  html[dir=rtl] .oj-lg-padding-9x-top {
    padding-top: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-lg-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-9x-start {
    padding-left: 45px !important;
  }
  html[dir=rtl] .oj-lg-padding-9x-start {
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-9x-end {
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-lg-padding-9x-end {
    padding-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-10x {
    margin: 50px !important;
  }
  html[dir=rtl] .oj-lg-margin-10x {
    margin: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-lg-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  html[dir=rtl] .oj-lg-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  .oj-lg-margin-10x-top {
    margin-top: 50px !important;
  }
  .oj-lg-margin-10x-bottom {
    margin-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-10x-start {
    margin-left: 50px !important;
  }
  html[dir=rtl] .oj-lg-margin-10x-start {
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-10x-end {
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-lg-margin-10x-end {
    margin-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-10x {
    padding: 50px !important;
  }
  html[dir=rtl] .oj-lg-padding-10x {
    padding: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-lg-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-lg-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-10x-top {
    padding-top: 50px !important;
  }
  html[dir=rtl] .oj-lg-padding-10x-top {
    padding-top: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-lg-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-10x-start {
    padding-left: 50px !important;
  }
  html[dir=rtl] .oj-lg-padding-10x-start {
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-10x-end {
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-lg-padding-10x-end {
    padding-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-11x {
    margin: 55px !important;
  }
  html[dir=rtl] .oj-lg-margin-11x {
    margin: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-lg-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  html[dir=rtl] .oj-lg-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  .oj-lg-margin-11x-top {
    margin-top: 55px !important;
  }
  .oj-lg-margin-11x-bottom {
    margin-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-11x-start {
    margin-left: 55px !important;
  }
  html[dir=rtl] .oj-lg-margin-11x-start {
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-11x-end {
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-lg-margin-11x-end {
    margin-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-11x {
    padding: 55px !important;
  }
  html[dir=rtl] .oj-lg-padding-11x {
    padding: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-lg-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-lg-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-11x-top {
    padding-top: 55px !important;
  }
  html[dir=rtl] .oj-lg-padding-11x-top {
    padding-top: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-lg-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-11x-start {
    padding-left: 55px !important;
  }
  html[dir=rtl] .oj-lg-padding-11x-start {
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-11x-end {
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-lg-padding-11x-end {
    padding-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-12x {
    margin: 60px !important;
  }
  html[dir=rtl] .oj-lg-margin-12x {
    margin: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-lg-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  html[dir=rtl] .oj-lg-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .oj-lg-margin-12x-top {
    margin-top: 60px !important;
  }
  .oj-lg-margin-12x-bottom {
    margin-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-12x-start {
    margin-left: 60px !important;
  }
  html[dir=rtl] .oj-lg-margin-12x-start {
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-margin-12x-end {
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-lg-margin-12x-end {
    margin-left: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-12x {
    padding: 60px !important;
  }
  html[dir=rtl] .oj-lg-padding-12x {
    padding: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-lg-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-lg-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-12x-top {
    padding-top: 60px !important;
  }
  html[dir=rtl] .oj-lg-padding-12x-top {
    padding-top: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-lg-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-12x-start {
    padding-left: 60px !important;
  }
  html[dir=rtl] .oj-lg-padding-12x-start {
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-padding-12x-end {
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-lg-padding-12x-end {
    padding-left: 60px !important;
  }
  .oj-lg-width-1\/2 {
    width: 50% !important;
  }
  .oj-lg-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-lg-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-lg-width-1\/4 {
    width: 25% !important;
  }
  .oj-lg-width-3\/4 {
    width: 75% !important;
  }
  .oj-lg-width-1\/5 {
    width: 20% !important;
  }
  .oj-lg-width-2\/5 {
    width: 40% !important;
  }
  .oj-lg-width-3\/5 {
    width: 60% !important;
  }
  .oj-lg-width-4\/5 {
    width: 80% !important;
  }
  .oj-lg-width-full {
    width: 100% !important;
  }
  .oj-lg-text-align-end {
    text-align: right;
  }
  html[dir=rtl] .oj-lg-text-align-end {
    text-align: left;
  }
  .oj-lg-float-end {
    float: right;
  }
  html[dir=rtl] .oj-lg-float-end {
    float: left;
  }
  .oj-lg-float-start {
    float: left;
  }
  html[dir=rtl] .oj-lg-float-start {
    float: right;
  }
}
@media screen and (min-width: 1281px) {
  .oj-xl-hide {
    display: none;
  }
  html:not([dir=rtl]) .oj-xl-margin-0 {
    margin: 0 !important;
  }
  html[dir=rtl] .oj-xl-margin-0 {
    margin: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-xl-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-xl-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-0-top {
    margin-top: 0 !important;
  }
  html[dir=rtl] .oj-xl-margin-0-top {
    margin-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-xl-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-0-start {
    margin-left: 0 !important;
  }
  html[dir=rtl] .oj-xl-margin-0-start {
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-0-end {
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-xl-margin-0-end {
    margin-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-0 {
    padding: 0 !important;
  }
  html[dir=rtl] .oj-xl-padding-0 {
    padding: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-xl-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-xl-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-0-top {
    padding-top: 0 !important;
  }
  html[dir=rtl] .oj-xl-padding-0-top {
    padding-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-xl-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-0-start {
    padding-left: 0 !important;
  }
  html[dir=rtl] .oj-xl-padding-0-start {
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-0-end {
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-xl-padding-0-end {
    padding-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-1x {
    margin: 5px !important;
  }
  html[dir=rtl] .oj-xl-margin-1x {
    margin: 5px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-xl-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  html[dir=rtl] .oj-xl-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  .oj-xl-margin-1x-top {
    margin-top: 5px !important;
  }
  .oj-xl-margin-1x-bottom {
    margin-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-1x-start {
    margin-left: 5px !important;
  }
  html[dir=rtl] .oj-xl-margin-1x-start {
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-1x-end {
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-xl-margin-1x-end {
    margin-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-1x {
    padding: 5px !important;
  }
  html[dir=rtl] .oj-xl-padding-1x {
    padding: 5px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-xl-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-xl-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-1x-top {
    padding-top: 5px !important;
  }
  html[dir=rtl] .oj-xl-padding-1x-top {
    padding-top: 5px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-xl-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-1x-start {
    padding-left: 5px !important;
  }
  html[dir=rtl] .oj-xl-padding-1x-start {
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-1x-end {
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-xl-padding-1x-end {
    padding-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-2x {
    margin: 10px !important;
  }
  html[dir=rtl] .oj-xl-margin-2x {
    margin: 10px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-xl-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  html[dir=rtl] .oj-xl-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .oj-xl-margin-2x-top {
    margin-top: 10px !important;
  }
  .oj-xl-margin-2x-bottom {
    margin-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-2x-start {
    margin-left: 10px !important;
  }
  html[dir=rtl] .oj-xl-margin-2x-start {
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-2x-end {
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-xl-margin-2x-end {
    margin-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-2x {
    padding: 10px !important;
  }
  html[dir=rtl] .oj-xl-padding-2x {
    padding: 10px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-xl-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-xl-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-2x-top {
    padding-top: 10px !important;
  }
  html[dir=rtl] .oj-xl-padding-2x-top {
    padding-top: 10px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-xl-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-2x-start {
    padding-left: 10px !important;
  }
  html[dir=rtl] .oj-xl-padding-2x-start {
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-2x-end {
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-xl-padding-2x-end {
    padding-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-3x {
    margin: 15px !important;
  }
  html[dir=rtl] .oj-xl-margin-3x {
    margin: 15px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-xl-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  html[dir=rtl] .oj-xl-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .oj-xl-margin-3x-top {
    margin-top: 15px !important;
  }
  .oj-xl-margin-3x-bottom {
    margin-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-3x-start {
    margin-left: 15px !important;
  }
  html[dir=rtl] .oj-xl-margin-3x-start {
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-3x-end {
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-xl-margin-3x-end {
    margin-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-3x {
    padding: 15px !important;
  }
  html[dir=rtl] .oj-xl-padding-3x {
    padding: 15px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-xl-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-xl-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-3x-top {
    padding-top: 15px !important;
  }
  html[dir=rtl] .oj-xl-padding-3x-top {
    padding-top: 15px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-xl-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-3x-start {
    padding-left: 15px !important;
  }
  html[dir=rtl] .oj-xl-padding-3x-start {
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-3x-end {
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-xl-padding-3x-end {
    padding-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-4x {
    margin: 20px !important;
  }
  html[dir=rtl] .oj-xl-margin-4x {
    margin: 20px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-xl-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  html[dir=rtl] .oj-xl-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .oj-xl-margin-4x-top {
    margin-top: 20px !important;
  }
  .oj-xl-margin-4x-bottom {
    margin-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-4x-start {
    margin-left: 20px !important;
  }
  html[dir=rtl] .oj-xl-margin-4x-start {
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-4x-end {
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-xl-margin-4x-end {
    margin-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-4x {
    padding: 20px !important;
  }
  html[dir=rtl] .oj-xl-padding-4x {
    padding: 20px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-xl-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-xl-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-4x-top {
    padding-top: 20px !important;
  }
  html[dir=rtl] .oj-xl-padding-4x-top {
    padding-top: 20px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-xl-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-4x-start {
    padding-left: 20px !important;
  }
  html[dir=rtl] .oj-xl-padding-4x-start {
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-4x-end {
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-xl-padding-4x-end {
    padding-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-5x {
    margin: 25px !important;
  }
  html[dir=rtl] .oj-xl-margin-5x {
    margin: 25px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-xl-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  html[dir=rtl] .oj-xl-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  .oj-xl-margin-5x-top {
    margin-top: 25px !important;
  }
  .oj-xl-margin-5x-bottom {
    margin-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-5x-start {
    margin-left: 25px !important;
  }
  html[dir=rtl] .oj-xl-margin-5x-start {
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-5x-end {
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-xl-margin-5x-end {
    margin-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-5x {
    padding: 25px !important;
  }
  html[dir=rtl] .oj-xl-padding-5x {
    padding: 25px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-xl-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-xl-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-5x-top {
    padding-top: 25px !important;
  }
  html[dir=rtl] .oj-xl-padding-5x-top {
    padding-top: 25px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-xl-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-5x-start {
    padding-left: 25px !important;
  }
  html[dir=rtl] .oj-xl-padding-5x-start {
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-5x-end {
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-xl-padding-5x-end {
    padding-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-6x {
    margin: 30px !important;
  }
  html[dir=rtl] .oj-xl-margin-6x {
    margin: 30px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-xl-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  html[dir=rtl] .oj-xl-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .oj-xl-margin-6x-top {
    margin-top: 30px !important;
  }
  .oj-xl-margin-6x-bottom {
    margin-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-6x-start {
    margin-left: 30px !important;
  }
  html[dir=rtl] .oj-xl-margin-6x-start {
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-6x-end {
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-xl-margin-6x-end {
    margin-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-6x {
    padding: 30px !important;
  }
  html[dir=rtl] .oj-xl-padding-6x {
    padding: 30px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-xl-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-xl-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-6x-top {
    padding-top: 30px !important;
  }
  html[dir=rtl] .oj-xl-padding-6x-top {
    padding-top: 30px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-xl-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-6x-start {
    padding-left: 30px !important;
  }
  html[dir=rtl] .oj-xl-padding-6x-start {
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-6x-end {
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-xl-padding-6x-end {
    padding-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-7x {
    margin: 35px !important;
  }
  html[dir=rtl] .oj-xl-margin-7x {
    margin: 35px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-xl-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  html[dir=rtl] .oj-xl-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  .oj-xl-margin-7x-top {
    margin-top: 35px !important;
  }
  .oj-xl-margin-7x-bottom {
    margin-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-7x-start {
    margin-left: 35px !important;
  }
  html[dir=rtl] .oj-xl-margin-7x-start {
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-7x-end {
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-xl-margin-7x-end {
    margin-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-7x {
    padding: 35px !important;
  }
  html[dir=rtl] .oj-xl-padding-7x {
    padding: 35px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-xl-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-xl-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-7x-top {
    padding-top: 35px !important;
  }
  html[dir=rtl] .oj-xl-padding-7x-top {
    padding-top: 35px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-xl-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-7x-start {
    padding-left: 35px !important;
  }
  html[dir=rtl] .oj-xl-padding-7x-start {
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-7x-end {
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-xl-padding-7x-end {
    padding-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-8x {
    margin: 40px !important;
  }
  html[dir=rtl] .oj-xl-margin-8x {
    margin: 40px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-xl-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  html[dir=rtl] .oj-xl-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .oj-xl-margin-8x-top {
    margin-top: 40px !important;
  }
  .oj-xl-margin-8x-bottom {
    margin-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-8x-start {
    margin-left: 40px !important;
  }
  html[dir=rtl] .oj-xl-margin-8x-start {
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-8x-end {
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-xl-margin-8x-end {
    margin-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-8x {
    padding: 40px !important;
  }
  html[dir=rtl] .oj-xl-padding-8x {
    padding: 40px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-xl-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-xl-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-8x-top {
    padding-top: 40px !important;
  }
  html[dir=rtl] .oj-xl-padding-8x-top {
    padding-top: 40px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-xl-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-8x-start {
    padding-left: 40px !important;
  }
  html[dir=rtl] .oj-xl-padding-8x-start {
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-8x-end {
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-xl-padding-8x-end {
    padding-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-9x {
    margin: 45px !important;
  }
  html[dir=rtl] .oj-xl-margin-9x {
    margin: 45px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-xl-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  html[dir=rtl] .oj-xl-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  .oj-xl-margin-9x-top {
    margin-top: 45px !important;
  }
  .oj-xl-margin-9x-bottom {
    margin-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-9x-start {
    margin-left: 45px !important;
  }
  html[dir=rtl] .oj-xl-margin-9x-start {
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-9x-end {
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-xl-margin-9x-end {
    margin-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-9x {
    padding: 45px !important;
  }
  html[dir=rtl] .oj-xl-padding-9x {
    padding: 45px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-xl-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-xl-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-9x-top {
    padding-top: 45px !important;
  }
  html[dir=rtl] .oj-xl-padding-9x-top {
    padding-top: 45px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-xl-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-9x-start {
    padding-left: 45px !important;
  }
  html[dir=rtl] .oj-xl-padding-9x-start {
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-9x-end {
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-xl-padding-9x-end {
    padding-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-10x {
    margin: 50px !important;
  }
  html[dir=rtl] .oj-xl-margin-10x {
    margin: 50px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-xl-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  html[dir=rtl] .oj-xl-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  .oj-xl-margin-10x-top {
    margin-top: 50px !important;
  }
  .oj-xl-margin-10x-bottom {
    margin-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-10x-start {
    margin-left: 50px !important;
  }
  html[dir=rtl] .oj-xl-margin-10x-start {
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-10x-end {
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-xl-margin-10x-end {
    margin-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-10x {
    padding: 50px !important;
  }
  html[dir=rtl] .oj-xl-padding-10x {
    padding: 50px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-xl-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-xl-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-10x-top {
    padding-top: 50px !important;
  }
  html[dir=rtl] .oj-xl-padding-10x-top {
    padding-top: 50px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-xl-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-10x-start {
    padding-left: 50px !important;
  }
  html[dir=rtl] .oj-xl-padding-10x-start {
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-10x-end {
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-xl-padding-10x-end {
    padding-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-11x {
    margin: 55px !important;
  }
  html[dir=rtl] .oj-xl-margin-11x {
    margin: 55px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-xl-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  html[dir=rtl] .oj-xl-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  .oj-xl-margin-11x-top {
    margin-top: 55px !important;
  }
  .oj-xl-margin-11x-bottom {
    margin-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-11x-start {
    margin-left: 55px !important;
  }
  html[dir=rtl] .oj-xl-margin-11x-start {
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-11x-end {
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-xl-margin-11x-end {
    margin-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-11x {
    padding: 55px !important;
  }
  html[dir=rtl] .oj-xl-padding-11x {
    padding: 55px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-xl-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-xl-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-11x-top {
    padding-top: 55px !important;
  }
  html[dir=rtl] .oj-xl-padding-11x-top {
    padding-top: 55px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-xl-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-11x-start {
    padding-left: 55px !important;
  }
  html[dir=rtl] .oj-xl-padding-11x-start {
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-11x-end {
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-xl-padding-11x-end {
    padding-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-12x {
    margin: 60px !important;
  }
  html[dir=rtl] .oj-xl-margin-12x {
    margin: 60px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-xl-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  html[dir=rtl] .oj-xl-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .oj-xl-margin-12x-top {
    margin-top: 60px !important;
  }
  .oj-xl-margin-12x-bottom {
    margin-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-12x-start {
    margin-left: 60px !important;
  }
  html[dir=rtl] .oj-xl-margin-12x-start {
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-xl-margin-12x-end {
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-xl-margin-12x-end {
    margin-left: 60px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-12x {
    padding: 60px !important;
  }
  html[dir=rtl] .oj-xl-padding-12x {
    padding: 60px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-xl-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-xl-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-12x-top {
    padding-top: 60px !important;
  }
  html[dir=rtl] .oj-xl-padding-12x-top {
    padding-top: 60px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-xl-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-12x-start {
    padding-left: 60px !important;
  }
  html[dir=rtl] .oj-xl-padding-12x-start {
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-xl-padding-12x-end {
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-xl-padding-12x-end {
    padding-left: 60px !important;
  }
  .oj-xl-width-1\/2 {
    width: 50% !important;
  }
  .oj-xl-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-xl-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-xl-width-1\/4 {
    width: 25% !important;
  }
  .oj-xl-width-3\/4 {
    width: 75% !important;
  }
  .oj-xl-width-1\/5 {
    width: 20% !important;
  }
  .oj-xl-width-2\/5 {
    width: 40% !important;
  }
  .oj-xl-width-3\/5 {
    width: 60% !important;
  }
  .oj-xl-width-4\/5 {
    width: 80% !important;
  }
  .oj-xl-width-full {
    width: 100% !important;
  }
  .oj-xl-text-align-end {
    text-align: right;
  }
  html[dir=rtl] .oj-xl-text-align-end {
    text-align: left;
  }
  .oj-xl-float-end {
    float: right;
  }
  html[dir=rtl] .oj-xl-float-end {
    float: left;
  }
  .oj-xl-float-start {
    float: left;
  }
  html[dir=rtl] .oj-xl-float-start {
    float: right;
  }
}
@media print and (orientation: portrait), screen and (max-width: 1023.9px) {
  .oj-md-down-hide {
    display: none;
  }
  .oj-md-down-width-1\/2 {
    width: 50% !important;
  }
  .oj-md-down-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-md-down-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-md-down-width-1\/4 {
    width: 25% !important;
  }
  .oj-md-down-width-3\/4 {
    width: 75% !important;
  }
  .oj-md-down-width-1\/5 {
    width: 20% !important;
  }
  .oj-md-down-width-2\/5 {
    width: 40% !important;
  }
  .oj-md-down-width-3\/5 {
    width: 60% !important;
  }
  .oj-md-down-width-4\/5 {
    width: 80% !important;
  }
  .oj-md-down-width-full {
    width: 100% !important;
  }
  .oj-md-down-text-align-end {
    text-align: right;
  }
  html[dir=rtl] .oj-md-down-text-align-end {
    text-align: left;
  }
  .oj-md-down-float-end {
    float: right;
  }
  html[dir=rtl] .oj-md-down-float-end {
    float: left;
  }
  .oj-md-down-float-start {
    float: left;
  }
  html[dir=rtl] .oj-md-down-float-start {
    float: right;
  }
}
@media print and (orientation: landscape), screen and (max-width: 1280.9px) {
  .oj-lg-down-hide {
    display: none;
  }
  .oj-lg-down-width-1\/2 {
    width: 50% !important;
  }
  .oj-lg-down-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-lg-down-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-lg-down-width-1\/4 {
    width: 25% !important;
  }
  .oj-lg-down-width-3\/4 {
    width: 75% !important;
  }
  .oj-lg-down-width-1\/5 {
    width: 20% !important;
  }
  .oj-lg-down-width-2\/5 {
    width: 40% !important;
  }
  .oj-lg-down-width-3\/5 {
    width: 60% !important;
  }
  .oj-lg-down-width-4\/5 {
    width: 80% !important;
  }
  .oj-lg-down-width-full {
    width: 100% !important;
  }
  .oj-lg-down-text-align-end {
    text-align: right;
  }
  html[dir=rtl] .oj-lg-down-text-align-end {
    text-align: left;
  }
  .oj-lg-down-float-end {
    float: right;
  }
  html[dir=rtl] .oj-lg-down-float-end {
    float: left;
  }
  .oj-lg-down-float-start {
    float: left;
  }
  html[dir=rtl] .oj-lg-down-float-start {
    float: right;
  }
}
@media screen and (max-width: 767.9px) {
  /* small only screen layout helpers */
  .oj-sm-only-hide {
    display: none;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-0 {
    margin: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-margin-0 {
    margin: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-0-top {
    margin-top: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-margin-0-top {
    margin-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-0-start {
    margin-left: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-margin-0-start {
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-0-end {
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-margin-0-end {
    margin-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-0 {
    padding: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-padding-0 {
    padding: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-0-top {
    padding-top: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-padding-0-top {
    padding-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-0-start {
    padding-left: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-padding-0-start {
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-0-end {
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-sm-only-padding-0-end {
    padding-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-1x {
    margin: 5px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-1x {
    margin: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  .oj-sm-only-margin-1x-top {
    margin-top: 5px !important;
  }
  .oj-sm-only-margin-1x-bottom {
    margin-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-1x-start {
    margin-left: 5px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-1x-start {
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-1x-end {
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-1x-end {
    margin-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-1x {
    padding: 5px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-1x {
    padding: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-1x-top {
    padding-top: 5px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-1x-top {
    padding-top: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-1x-start {
    padding-left: 5px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-1x-start {
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-1x-end {
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-1x-end {
    padding-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-2x {
    margin: 10px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-2x {
    margin: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .oj-sm-only-margin-2x-top {
    margin-top: 10px !important;
  }
  .oj-sm-only-margin-2x-bottom {
    margin-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-2x-start {
    margin-left: 10px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-2x-start {
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-2x-end {
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-2x-end {
    margin-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-2x {
    padding: 10px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-2x {
    padding: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-2x-top {
    padding-top: 10px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-2x-top {
    padding-top: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-2x-start {
    padding-left: 10px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-2x-start {
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-2x-end {
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-2x-end {
    padding-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-3x {
    margin: 15px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-3x {
    margin: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .oj-sm-only-margin-3x-top {
    margin-top: 15px !important;
  }
  .oj-sm-only-margin-3x-bottom {
    margin-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-3x-start {
    margin-left: 15px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-3x-start {
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-3x-end {
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-3x-end {
    margin-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-3x {
    padding: 15px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-3x {
    padding: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-3x-top {
    padding-top: 15px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-3x-top {
    padding-top: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-3x-start {
    padding-left: 15px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-3x-start {
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-3x-end {
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-3x-end {
    padding-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-4x {
    margin: 20px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-4x {
    margin: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .oj-sm-only-margin-4x-top {
    margin-top: 20px !important;
  }
  .oj-sm-only-margin-4x-bottom {
    margin-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-4x-start {
    margin-left: 20px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-4x-start {
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-4x-end {
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-4x-end {
    margin-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-4x {
    padding: 20px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-4x {
    padding: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-4x-top {
    padding-top: 20px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-4x-top {
    padding-top: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-4x-start {
    padding-left: 20px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-4x-start {
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-4x-end {
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-4x-end {
    padding-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-5x {
    margin: 25px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-5x {
    margin: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  .oj-sm-only-margin-5x-top {
    margin-top: 25px !important;
  }
  .oj-sm-only-margin-5x-bottom {
    margin-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-5x-start {
    margin-left: 25px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-5x-start {
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-5x-end {
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-5x-end {
    margin-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-5x {
    padding: 25px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-5x {
    padding: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-5x-top {
    padding-top: 25px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-5x-top {
    padding-top: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-5x-start {
    padding-left: 25px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-5x-start {
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-5x-end {
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-5x-end {
    padding-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-6x {
    margin: 30px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-6x {
    margin: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .oj-sm-only-margin-6x-top {
    margin-top: 30px !important;
  }
  .oj-sm-only-margin-6x-bottom {
    margin-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-6x-start {
    margin-left: 30px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-6x-start {
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-6x-end {
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-6x-end {
    margin-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-6x {
    padding: 30px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-6x {
    padding: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-6x-top {
    padding-top: 30px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-6x-top {
    padding-top: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-6x-start {
    padding-left: 30px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-6x-start {
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-6x-end {
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-6x-end {
    padding-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-7x {
    margin: 35px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-7x {
    margin: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  .oj-sm-only-margin-7x-top {
    margin-top: 35px !important;
  }
  .oj-sm-only-margin-7x-bottom {
    margin-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-7x-start {
    margin-left: 35px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-7x-start {
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-7x-end {
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-7x-end {
    margin-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-7x {
    padding: 35px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-7x {
    padding: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-7x-top {
    padding-top: 35px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-7x-top {
    padding-top: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-7x-start {
    padding-left: 35px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-7x-start {
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-7x-end {
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-7x-end {
    padding-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-8x {
    margin: 40px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-8x {
    margin: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .oj-sm-only-margin-8x-top {
    margin-top: 40px !important;
  }
  .oj-sm-only-margin-8x-bottom {
    margin-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-8x-start {
    margin-left: 40px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-8x-start {
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-8x-end {
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-8x-end {
    margin-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-8x {
    padding: 40px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-8x {
    padding: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-8x-top {
    padding-top: 40px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-8x-top {
    padding-top: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-8x-start {
    padding-left: 40px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-8x-start {
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-8x-end {
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-8x-end {
    padding-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-9x {
    margin: 45px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-9x {
    margin: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  .oj-sm-only-margin-9x-top {
    margin-top: 45px !important;
  }
  .oj-sm-only-margin-9x-bottom {
    margin-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-9x-start {
    margin-left: 45px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-9x-start {
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-9x-end {
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-9x-end {
    margin-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-9x {
    padding: 45px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-9x {
    padding: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-9x-top {
    padding-top: 45px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-9x-top {
    padding-top: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-9x-start {
    padding-left: 45px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-9x-start {
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-9x-end {
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-9x-end {
    padding-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-10x {
    margin: 50px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-10x {
    margin: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  .oj-sm-only-margin-10x-top {
    margin-top: 50px !important;
  }
  .oj-sm-only-margin-10x-bottom {
    margin-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-10x-start {
    margin-left: 50px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-10x-start {
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-10x-end {
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-10x-end {
    margin-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-10x {
    padding: 50px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-10x {
    padding: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-10x-top {
    padding-top: 50px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-10x-top {
    padding-top: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-10x-start {
    padding-left: 50px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-10x-start {
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-10x-end {
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-10x-end {
    padding-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-11x {
    margin: 55px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-11x {
    margin: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  .oj-sm-only-margin-11x-top {
    margin-top: 55px !important;
  }
  .oj-sm-only-margin-11x-bottom {
    margin-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-11x-start {
    margin-left: 55px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-11x-start {
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-11x-end {
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-11x-end {
    margin-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-11x {
    padding: 55px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-11x {
    padding: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-11x-top {
    padding-top: 55px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-11x-top {
    padding-top: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-11x-start {
    padding-left: 55px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-11x-start {
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-11x-end {
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-11x-end {
    padding-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-12x {
    margin: 60px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-12x {
    margin: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .oj-sm-only-margin-12x-top {
    margin-top: 60px !important;
  }
  .oj-sm-only-margin-12x-bottom {
    margin-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-12x-start {
    margin-left: 60px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-12x-start {
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-margin-12x-end {
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-sm-only-margin-12x-end {
    margin-left: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-12x {
    padding: 60px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-12x {
    padding: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-12x-top {
    padding-top: 60px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-12x-top {
    padding-top: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-12x-start {
    padding-left: 60px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-12x-start {
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-sm-only-padding-12x-end {
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-sm-only-padding-12x-end {
    padding-left: 60px !important;
  }
  .oj-sm-only-width-1\/2 {
    width: 50% !important;
  }
  .oj-sm-only-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-sm-only-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-sm-only-width-1\/4 {
    width: 25% !important;
  }
  .oj-sm-only-width-3\/4 {
    width: 75% !important;
  }
  .oj-sm-only-width-1\/5 {
    width: 20% !important;
  }
  .oj-sm-only-width-2\/5 {
    width: 40% !important;
  }
  .oj-sm-only-width-3\/5 {
    width: 60% !important;
  }
  .oj-sm-only-width-4\/5 {
    width: 80% !important;
  }
  .oj-sm-only-width-full {
    width: 100% !important;
  }
  .oj-sm-only-text-align-end {
    text-align: right;
  }
  html[dir=rtl] .oj-sm-only-text-align-end {
    text-align: left;
  }
  .oj-sm-only-float-end {
    float: right;
  }
  html[dir=rtl] .oj-sm-only-float-end {
    float: left;
  }
  .oj-sm-only-float-start {
    float: left;
  }
  html[dir=rtl] .oj-sm-only-float-start {
    float: right;
  }
}
@media print and (orientation: portrait), screen and (min-width: 768px) and (max-width: 1023.9px) {
  /* medium only screen layout helpers */
  .oj-md-only-hide {
    display: none;
  }
  html:not([dir=rtl]) .oj-md-only-margin-0 {
    margin: 0 !important;
  }
  html[dir=rtl] .oj-md-only-margin-0 {
    margin: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-md-only-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-md-only-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-0-top {
    margin-top: 0 !important;
  }
  html[dir=rtl] .oj-md-only-margin-0-top {
    margin-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-md-only-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-0-start {
    margin-left: 0 !important;
  }
  html[dir=rtl] .oj-md-only-margin-0-start {
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-0-end {
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-md-only-margin-0-end {
    margin-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-0 {
    padding: 0 !important;
  }
  html[dir=rtl] .oj-md-only-padding-0 {
    padding: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-md-only-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-md-only-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-0-top {
    padding-top: 0 !important;
  }
  html[dir=rtl] .oj-md-only-padding-0-top {
    padding-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-md-only-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-0-start {
    padding-left: 0 !important;
  }
  html[dir=rtl] .oj-md-only-padding-0-start {
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-0-end {
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-md-only-padding-0-end {
    padding-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-1x {
    margin: 5px !important;
  }
  html[dir=rtl] .oj-md-only-margin-1x {
    margin: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-md-only-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  html[dir=rtl] .oj-md-only-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  .oj-md-only-margin-1x-top {
    margin-top: 5px !important;
  }
  .oj-md-only-margin-1x-bottom {
    margin-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-1x-start {
    margin-left: 5px !important;
  }
  html[dir=rtl] .oj-md-only-margin-1x-start {
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-1x-end {
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-md-only-margin-1x-end {
    margin-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-1x {
    padding: 5px !important;
  }
  html[dir=rtl] .oj-md-only-padding-1x {
    padding: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-md-only-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-md-only-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-1x-top {
    padding-top: 5px !important;
  }
  html[dir=rtl] .oj-md-only-padding-1x-top {
    padding-top: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-md-only-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-1x-start {
    padding-left: 5px !important;
  }
  html[dir=rtl] .oj-md-only-padding-1x-start {
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-1x-end {
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-md-only-padding-1x-end {
    padding-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-2x {
    margin: 10px !important;
  }
  html[dir=rtl] .oj-md-only-margin-2x {
    margin: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-md-only-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  html[dir=rtl] .oj-md-only-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .oj-md-only-margin-2x-top {
    margin-top: 10px !important;
  }
  .oj-md-only-margin-2x-bottom {
    margin-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-2x-start {
    margin-left: 10px !important;
  }
  html[dir=rtl] .oj-md-only-margin-2x-start {
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-2x-end {
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-md-only-margin-2x-end {
    margin-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-2x {
    padding: 10px !important;
  }
  html[dir=rtl] .oj-md-only-padding-2x {
    padding: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-md-only-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-md-only-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-2x-top {
    padding-top: 10px !important;
  }
  html[dir=rtl] .oj-md-only-padding-2x-top {
    padding-top: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-md-only-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-2x-start {
    padding-left: 10px !important;
  }
  html[dir=rtl] .oj-md-only-padding-2x-start {
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-2x-end {
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-md-only-padding-2x-end {
    padding-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-3x {
    margin: 15px !important;
  }
  html[dir=rtl] .oj-md-only-margin-3x {
    margin: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-md-only-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  html[dir=rtl] .oj-md-only-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .oj-md-only-margin-3x-top {
    margin-top: 15px !important;
  }
  .oj-md-only-margin-3x-bottom {
    margin-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-3x-start {
    margin-left: 15px !important;
  }
  html[dir=rtl] .oj-md-only-margin-3x-start {
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-3x-end {
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-md-only-margin-3x-end {
    margin-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-3x {
    padding: 15px !important;
  }
  html[dir=rtl] .oj-md-only-padding-3x {
    padding: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-md-only-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-md-only-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-3x-top {
    padding-top: 15px !important;
  }
  html[dir=rtl] .oj-md-only-padding-3x-top {
    padding-top: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-md-only-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-3x-start {
    padding-left: 15px !important;
  }
  html[dir=rtl] .oj-md-only-padding-3x-start {
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-3x-end {
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-md-only-padding-3x-end {
    padding-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-4x {
    margin: 20px !important;
  }
  html[dir=rtl] .oj-md-only-margin-4x {
    margin: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-md-only-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  html[dir=rtl] .oj-md-only-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .oj-md-only-margin-4x-top {
    margin-top: 20px !important;
  }
  .oj-md-only-margin-4x-bottom {
    margin-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-4x-start {
    margin-left: 20px !important;
  }
  html[dir=rtl] .oj-md-only-margin-4x-start {
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-4x-end {
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-md-only-margin-4x-end {
    margin-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-4x {
    padding: 20px !important;
  }
  html[dir=rtl] .oj-md-only-padding-4x {
    padding: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-md-only-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-md-only-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-4x-top {
    padding-top: 20px !important;
  }
  html[dir=rtl] .oj-md-only-padding-4x-top {
    padding-top: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-md-only-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-4x-start {
    padding-left: 20px !important;
  }
  html[dir=rtl] .oj-md-only-padding-4x-start {
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-4x-end {
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-md-only-padding-4x-end {
    padding-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-5x {
    margin: 25px !important;
  }
  html[dir=rtl] .oj-md-only-margin-5x {
    margin: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-md-only-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  html[dir=rtl] .oj-md-only-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  .oj-md-only-margin-5x-top {
    margin-top: 25px !important;
  }
  .oj-md-only-margin-5x-bottom {
    margin-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-5x-start {
    margin-left: 25px !important;
  }
  html[dir=rtl] .oj-md-only-margin-5x-start {
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-5x-end {
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-md-only-margin-5x-end {
    margin-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-5x {
    padding: 25px !important;
  }
  html[dir=rtl] .oj-md-only-padding-5x {
    padding: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-md-only-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-md-only-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-5x-top {
    padding-top: 25px !important;
  }
  html[dir=rtl] .oj-md-only-padding-5x-top {
    padding-top: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-md-only-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-5x-start {
    padding-left: 25px !important;
  }
  html[dir=rtl] .oj-md-only-padding-5x-start {
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-5x-end {
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-md-only-padding-5x-end {
    padding-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-6x {
    margin: 30px !important;
  }
  html[dir=rtl] .oj-md-only-margin-6x {
    margin: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-md-only-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  html[dir=rtl] .oj-md-only-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .oj-md-only-margin-6x-top {
    margin-top: 30px !important;
  }
  .oj-md-only-margin-6x-bottom {
    margin-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-6x-start {
    margin-left: 30px !important;
  }
  html[dir=rtl] .oj-md-only-margin-6x-start {
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-6x-end {
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-md-only-margin-6x-end {
    margin-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-6x {
    padding: 30px !important;
  }
  html[dir=rtl] .oj-md-only-padding-6x {
    padding: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-md-only-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-md-only-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-6x-top {
    padding-top: 30px !important;
  }
  html[dir=rtl] .oj-md-only-padding-6x-top {
    padding-top: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-md-only-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-6x-start {
    padding-left: 30px !important;
  }
  html[dir=rtl] .oj-md-only-padding-6x-start {
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-6x-end {
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-md-only-padding-6x-end {
    padding-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-7x {
    margin: 35px !important;
  }
  html[dir=rtl] .oj-md-only-margin-7x {
    margin: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-md-only-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  html[dir=rtl] .oj-md-only-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  .oj-md-only-margin-7x-top {
    margin-top: 35px !important;
  }
  .oj-md-only-margin-7x-bottom {
    margin-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-7x-start {
    margin-left: 35px !important;
  }
  html[dir=rtl] .oj-md-only-margin-7x-start {
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-7x-end {
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-md-only-margin-7x-end {
    margin-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-7x {
    padding: 35px !important;
  }
  html[dir=rtl] .oj-md-only-padding-7x {
    padding: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-md-only-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-md-only-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-7x-top {
    padding-top: 35px !important;
  }
  html[dir=rtl] .oj-md-only-padding-7x-top {
    padding-top: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-md-only-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-7x-start {
    padding-left: 35px !important;
  }
  html[dir=rtl] .oj-md-only-padding-7x-start {
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-7x-end {
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-md-only-padding-7x-end {
    padding-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-8x {
    margin: 40px !important;
  }
  html[dir=rtl] .oj-md-only-margin-8x {
    margin: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-md-only-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  html[dir=rtl] .oj-md-only-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .oj-md-only-margin-8x-top {
    margin-top: 40px !important;
  }
  .oj-md-only-margin-8x-bottom {
    margin-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-8x-start {
    margin-left: 40px !important;
  }
  html[dir=rtl] .oj-md-only-margin-8x-start {
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-8x-end {
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-md-only-margin-8x-end {
    margin-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-8x {
    padding: 40px !important;
  }
  html[dir=rtl] .oj-md-only-padding-8x {
    padding: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-md-only-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-md-only-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-8x-top {
    padding-top: 40px !important;
  }
  html[dir=rtl] .oj-md-only-padding-8x-top {
    padding-top: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-md-only-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-8x-start {
    padding-left: 40px !important;
  }
  html[dir=rtl] .oj-md-only-padding-8x-start {
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-8x-end {
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-md-only-padding-8x-end {
    padding-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-9x {
    margin: 45px !important;
  }
  html[dir=rtl] .oj-md-only-margin-9x {
    margin: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-md-only-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  html[dir=rtl] .oj-md-only-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  .oj-md-only-margin-9x-top {
    margin-top: 45px !important;
  }
  .oj-md-only-margin-9x-bottom {
    margin-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-9x-start {
    margin-left: 45px !important;
  }
  html[dir=rtl] .oj-md-only-margin-9x-start {
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-9x-end {
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-md-only-margin-9x-end {
    margin-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-9x {
    padding: 45px !important;
  }
  html[dir=rtl] .oj-md-only-padding-9x {
    padding: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-md-only-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-md-only-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-9x-top {
    padding-top: 45px !important;
  }
  html[dir=rtl] .oj-md-only-padding-9x-top {
    padding-top: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-md-only-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-9x-start {
    padding-left: 45px !important;
  }
  html[dir=rtl] .oj-md-only-padding-9x-start {
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-9x-end {
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-md-only-padding-9x-end {
    padding-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-10x {
    margin: 50px !important;
  }
  html[dir=rtl] .oj-md-only-margin-10x {
    margin: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-md-only-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  html[dir=rtl] .oj-md-only-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  .oj-md-only-margin-10x-top {
    margin-top: 50px !important;
  }
  .oj-md-only-margin-10x-bottom {
    margin-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-10x-start {
    margin-left: 50px !important;
  }
  html[dir=rtl] .oj-md-only-margin-10x-start {
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-10x-end {
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-md-only-margin-10x-end {
    margin-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-10x {
    padding: 50px !important;
  }
  html[dir=rtl] .oj-md-only-padding-10x {
    padding: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-md-only-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-md-only-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-10x-top {
    padding-top: 50px !important;
  }
  html[dir=rtl] .oj-md-only-padding-10x-top {
    padding-top: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-md-only-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-10x-start {
    padding-left: 50px !important;
  }
  html[dir=rtl] .oj-md-only-padding-10x-start {
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-10x-end {
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-md-only-padding-10x-end {
    padding-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-11x {
    margin: 55px !important;
  }
  html[dir=rtl] .oj-md-only-margin-11x {
    margin: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-md-only-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  html[dir=rtl] .oj-md-only-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  .oj-md-only-margin-11x-top {
    margin-top: 55px !important;
  }
  .oj-md-only-margin-11x-bottom {
    margin-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-11x-start {
    margin-left: 55px !important;
  }
  html[dir=rtl] .oj-md-only-margin-11x-start {
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-11x-end {
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-md-only-margin-11x-end {
    margin-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-11x {
    padding: 55px !important;
  }
  html[dir=rtl] .oj-md-only-padding-11x {
    padding: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-md-only-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-md-only-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-11x-top {
    padding-top: 55px !important;
  }
  html[dir=rtl] .oj-md-only-padding-11x-top {
    padding-top: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-md-only-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-11x-start {
    padding-left: 55px !important;
  }
  html[dir=rtl] .oj-md-only-padding-11x-start {
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-11x-end {
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-md-only-padding-11x-end {
    padding-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-12x {
    margin: 60px !important;
  }
  html[dir=rtl] .oj-md-only-margin-12x {
    margin: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-md-only-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  html[dir=rtl] .oj-md-only-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .oj-md-only-margin-12x-top {
    margin-top: 60px !important;
  }
  .oj-md-only-margin-12x-bottom {
    margin-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-12x-start {
    margin-left: 60px !important;
  }
  html[dir=rtl] .oj-md-only-margin-12x-start {
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-only-margin-12x-end {
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-md-only-margin-12x-end {
    margin-left: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-12x {
    padding: 60px !important;
  }
  html[dir=rtl] .oj-md-only-padding-12x {
    padding: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-md-only-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-md-only-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-12x-top {
    padding-top: 60px !important;
  }
  html[dir=rtl] .oj-md-only-padding-12x-top {
    padding-top: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-md-only-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-12x-start {
    padding-left: 60px !important;
  }
  html[dir=rtl] .oj-md-only-padding-12x-start {
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-md-only-padding-12x-end {
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-md-only-padding-12x-end {
    padding-left: 60px !important;
  }
  .oj-md-only-width-1\/2 {
    width: 50% !important;
  }
  .oj-md-only-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-md-only-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-md-only-width-1\/4 {
    width: 25% !important;
  }
  .oj-md-only-width-3\/4 {
    width: 75% !important;
  }
  .oj-md-only-width-1\/5 {
    width: 20% !important;
  }
  .oj-md-only-width-2\/5 {
    width: 40% !important;
  }
  .oj-md-only-width-3\/5 {
    width: 60% !important;
  }
  .oj-md-only-width-4\/5 {
    width: 80% !important;
  }
  .oj-md-only-width-full {
    width: 100% !important;
  }
  .oj-md-only-text-align-end {
    text-align: right;
  }
  html[dir=rtl] .oj-md-only-text-align-end {
    text-align: left;
  }
  .oj-md-only-float-end {
    float: right;
  }
  html[dir=rtl] .oj-md-only-float-end {
    float: left;
  }
  .oj-md-only-float-start {
    float: left;
  }
  html[dir=rtl] .oj-md-only-float-start {
    float: right;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1280.9px) {
  /* large only screen layout helpers */
  .oj-lg-only-hide {
    display: none;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-0 {
    margin: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-margin-0 {
    margin: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-margin-0-horizontal {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-0-top {
    margin-top: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-margin-0-top {
    margin-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-0-start {
    margin-left: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-margin-0-start {
    margin-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-0-end {
    margin-right: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-margin-0-end {
    margin-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-0 {
    padding: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-padding-0 {
    padding: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-padding-0-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-0-top {
    padding-top: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-padding-0-top {
    padding-top: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-0-start {
    padding-left: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-padding-0-start {
    padding-right: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-0-end {
    padding-right: 0 !important;
  }
  html[dir=rtl] .oj-lg-only-padding-0-end {
    padding-left: 0 !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-1x {
    margin: 5px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-1x {
    margin: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-1x-horizontal {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-1x-vertical {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  .oj-lg-only-margin-1x-top {
    margin-top: 5px !important;
  }
  .oj-lg-only-margin-1x-bottom {
    margin-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-1x-start {
    margin-left: 5px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-1x-start {
    margin-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-1x-end {
    margin-right: 5px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-1x-end {
    margin-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-1x {
    padding: 5px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-1x {
    padding: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-1x-horizontal {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-1x-vertical {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-1x-top {
    padding-top: 5px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-1x-top {
    padding-top: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-1x-bottom {
    padding-bottom: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-1x-start {
    padding-left: 5px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-1x-start {
    padding-right: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-1x-end {
    padding-right: 5px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-1x-end {
    padding-left: 5px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-2x {
    margin: 10px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-2x {
    margin: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-2x-horizontal {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-2x-vertical {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .oj-lg-only-margin-2x-top {
    margin-top: 10px !important;
  }
  .oj-lg-only-margin-2x-bottom {
    margin-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-2x-start {
    margin-left: 10px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-2x-start {
    margin-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-2x-end {
    margin-right: 10px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-2x-end {
    margin-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-2x {
    padding: 10px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-2x {
    padding: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-2x-horizontal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-2x-vertical {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-2x-top {
    padding-top: 10px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-2x-top {
    padding-top: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-2x-bottom {
    padding-bottom: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-2x-start {
    padding-left: 10px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-2x-start {
    padding-right: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-2x-end {
    padding-right: 10px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-2x-end {
    padding-left: 10px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-3x {
    margin: 15px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-3x {
    margin: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-3x-horizontal {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-3x-vertical {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .oj-lg-only-margin-3x-top {
    margin-top: 15px !important;
  }
  .oj-lg-only-margin-3x-bottom {
    margin-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-3x-start {
    margin-left: 15px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-3x-start {
    margin-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-3x-end {
    margin-right: 15px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-3x-end {
    margin-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-3x {
    padding: 15px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-3x {
    padding: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-3x-horizontal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-3x-vertical {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-3x-top {
    padding-top: 15px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-3x-top {
    padding-top: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-3x-bottom {
    padding-bottom: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-3x-start {
    padding-left: 15px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-3x-start {
    padding-right: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-3x-end {
    padding-right: 15px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-3x-end {
    padding-left: 15px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-4x {
    margin: 20px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-4x {
    margin: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-4x-horizontal {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-4x-vertical {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .oj-lg-only-margin-4x-top {
    margin-top: 20px !important;
  }
  .oj-lg-only-margin-4x-bottom {
    margin-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-4x-start {
    margin-left: 20px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-4x-start {
    margin-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-4x-end {
    margin-right: 20px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-4x-end {
    margin-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-4x {
    padding: 20px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-4x {
    padding: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-4x-horizontal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-4x-vertical {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-4x-top {
    padding-top: 20px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-4x-top {
    padding-top: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-4x-bottom {
    padding-bottom: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-4x-start {
    padding-left: 20px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-4x-start {
    padding-right: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-4x-end {
    padding-right: 20px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-4x-end {
    padding-left: 20px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-5x {
    margin: 25px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-5x {
    margin: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-5x-horizontal {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-5x-vertical {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  .oj-lg-only-margin-5x-top {
    margin-top: 25px !important;
  }
  .oj-lg-only-margin-5x-bottom {
    margin-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-5x-start {
    margin-left: 25px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-5x-start {
    margin-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-5x-end {
    margin-right: 25px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-5x-end {
    margin-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-5x {
    padding: 25px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-5x {
    padding: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-5x-horizontal {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-5x-vertical {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-5x-top {
    padding-top: 25px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-5x-top {
    padding-top: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-5x-bottom {
    padding-bottom: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-5x-start {
    padding-left: 25px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-5x-start {
    padding-right: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-5x-end {
    padding-right: 25px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-5x-end {
    padding-left: 25px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-6x {
    margin: 30px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-6x {
    margin: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-6x-horizontal {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-6x-vertical {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .oj-lg-only-margin-6x-top {
    margin-top: 30px !important;
  }
  .oj-lg-only-margin-6x-bottom {
    margin-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-6x-start {
    margin-left: 30px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-6x-start {
    margin-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-6x-end {
    margin-right: 30px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-6x-end {
    margin-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-6x {
    padding: 30px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-6x {
    padding: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-6x-horizontal {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-6x-vertical {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-6x-top {
    padding-top: 30px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-6x-top {
    padding-top: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-6x-bottom {
    padding-bottom: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-6x-start {
    padding-left: 30px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-6x-start {
    padding-right: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-6x-end {
    padding-right: 30px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-6x-end {
    padding-left: 30px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-7x {
    margin: 35px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-7x {
    margin: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-7x-horizontal {
    margin-left: 35px !important;
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-7x-vertical {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }
  .oj-lg-only-margin-7x-top {
    margin-top: 35px !important;
  }
  .oj-lg-only-margin-7x-bottom {
    margin-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-7x-start {
    margin-left: 35px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-7x-start {
    margin-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-7x-end {
    margin-right: 35px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-7x-end {
    margin-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-7x {
    padding: 35px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-7x {
    padding: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-7x-horizontal {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-7x-vertical {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-7x-top {
    padding-top: 35px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-7x-top {
    padding-top: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-7x-bottom {
    padding-bottom: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-7x-start {
    padding-left: 35px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-7x-start {
    padding-right: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-7x-end {
    padding-right: 35px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-7x-end {
    padding-left: 35px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-8x {
    margin: 40px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-8x {
    margin: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-8x-horizontal {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-8x-vertical {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .oj-lg-only-margin-8x-top {
    margin-top: 40px !important;
  }
  .oj-lg-only-margin-8x-bottom {
    margin-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-8x-start {
    margin-left: 40px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-8x-start {
    margin-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-8x-end {
    margin-right: 40px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-8x-end {
    margin-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-8x {
    padding: 40px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-8x {
    padding: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-8x-horizontal {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-8x-vertical {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-8x-top {
    padding-top: 40px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-8x-top {
    padding-top: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-8x-bottom {
    padding-bottom: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-8x-start {
    padding-left: 40px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-8x-start {
    padding-right: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-8x-end {
    padding-right: 40px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-8x-end {
    padding-left: 40px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-9x {
    margin: 45px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-9x {
    margin: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-9x-horizontal {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-9x-vertical {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  .oj-lg-only-margin-9x-top {
    margin-top: 45px !important;
  }
  .oj-lg-only-margin-9x-bottom {
    margin-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-9x-start {
    margin-left: 45px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-9x-start {
    margin-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-9x-end {
    margin-right: 45px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-9x-end {
    margin-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-9x {
    padding: 45px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-9x {
    padding: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-9x-horizontal {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-9x-vertical {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-9x-top {
    padding-top: 45px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-9x-top {
    padding-top: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-9x-bottom {
    padding-bottom: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-9x-start {
    padding-left: 45px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-9x-start {
    padding-right: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-9x-end {
    padding-right: 45px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-9x-end {
    padding-left: 45px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-10x {
    margin: 50px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-10x {
    margin: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-10x-horizontal {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-10x-vertical {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  .oj-lg-only-margin-10x-top {
    margin-top: 50px !important;
  }
  .oj-lg-only-margin-10x-bottom {
    margin-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-10x-start {
    margin-left: 50px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-10x-start {
    margin-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-10x-end {
    margin-right: 50px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-10x-end {
    margin-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-10x {
    padding: 50px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-10x {
    padding: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-10x-horizontal {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-10x-vertical {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-10x-top {
    padding-top: 50px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-10x-top {
    padding-top: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-10x-bottom {
    padding-bottom: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-10x-start {
    padding-left: 50px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-10x-start {
    padding-right: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-10x-end {
    padding-right: 50px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-10x-end {
    padding-left: 50px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-11x {
    margin: 55px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-11x {
    margin: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-11x-horizontal {
    margin-left: 55px !important;
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-11x-vertical {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }
  .oj-lg-only-margin-11x-top {
    margin-top: 55px !important;
  }
  .oj-lg-only-margin-11x-bottom {
    margin-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-11x-start {
    margin-left: 55px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-11x-start {
    margin-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-11x-end {
    margin-right: 55px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-11x-end {
    margin-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-11x {
    padding: 55px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-11x {
    padding: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-11x-horizontal {
    padding-left: 55px !important;
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-11x-vertical {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-11x-top {
    padding-top: 55px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-11x-top {
    padding-top: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-11x-bottom {
    padding-bottom: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-11x-start {
    padding-left: 55px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-11x-start {
    padding-right: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-11x-end {
    padding-right: 55px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-11x-end {
    padding-left: 55px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-12x {
    margin: 60px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-12x {
    margin: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-12x-horizontal {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-12x-vertical {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .oj-lg-only-margin-12x-top {
    margin-top: 60px !important;
  }
  .oj-lg-only-margin-12x-bottom {
    margin-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-12x-start {
    margin-left: 60px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-12x-start {
    margin-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-margin-12x-end {
    margin-right: 60px !important;
  }
  html[dir=rtl] .oj-lg-only-margin-12x-end {
    margin-left: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-12x {
    padding: 60px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-12x {
    padding: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-12x-horizontal {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-12x-vertical {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-12x-top {
    padding-top: 60px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-12x-top {
    padding-top: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-12x-bottom {
    padding-bottom: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-12x-start {
    padding-left: 60px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-12x-start {
    padding-right: 60px !important;
  }
  html:not([dir=rtl]) .oj-lg-only-padding-12x-end {
    padding-right: 60px !important;
  }
  html[dir=rtl] .oj-lg-only-padding-12x-end {
    padding-left: 60px !important;
  }
  .oj-lg-only-width-1\/2 {
    width: 50% !important;
  }
  .oj-lg-only-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-lg-only-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-lg-only-width-1\/4 {
    width: 25% !important;
  }
  .oj-lg-only-width-3\/4 {
    width: 75% !important;
  }
  .oj-lg-only-width-1\/5 {
    width: 20% !important;
  }
  .oj-lg-only-width-2\/5 {
    width: 40% !important;
  }
  .oj-lg-only-width-3\/5 {
    width: 60% !important;
  }
  .oj-lg-only-width-4\/5 {
    width: 80% !important;
  }
  .oj-lg-only-width-full {
    width: 100% !important;
  }
  .oj-lg-only-text-align-end {
    text-align: right;
  }
  html[dir=rtl] .oj-lg-only-text-align-end {
    text-align: left;
  }
  .oj-lg-only-float-end {
    float: right;
  }
  html[dir=rtl] .oj-lg-only-float-end {
    float: left;
  }
  .oj-lg-only-float-start {
    float: left;
  }
  html[dir=rtl] .oj-lg-only-float-start {
    float: right;
  }
}
/**
 * This idea/code is from zurb foundation, thanks zurb!
 *
 * In the jet sass files there are variables for
 * responsive screen sizes, these look something like
 *    $screenSmallRange:  0, 767px !default;
 *    $screenMediumRange: 768px, 1023px !default;
 *    $screenLargeRange:  1024px, 1280px !default;
 *    $screenXlargeRange: 1281px, null !default;
 *
 * These variables in turn are used to generate responsive media queries in variables like
 * $responsiveQuerySmallUp, $responsiveQueryMediumUp, etc.
 *
 * we send down these media queries as the font family in classes
 * that look something like this:
 *
 * .oj-mq-md {
 *    font-family: "/screen and (min-width: 768px)/";
 * }
 *
 * This function applies the class and then reads the font family off a dom
 * element to get the media query string
 *
 * example usage:
 *   var md_media_query = oj.ResponsiveUtils._getMediaQueryFromClass('oj-mq-md');
 */
.oj-mq-sm-up {
  font-family: "/print, screen/";
}

.oj-mq-md-up {
  font-family: "/print, screen and (min-width: 768px)/";
}

.oj-mq-lg-up {
  font-family: "/print and (orientation: landscape), screen and (min-width: 1024px)/";
}

.oj-mq-xl-up {
  font-family: "/screen and (min-width: 1281px)/";
}

.oj-mq-xxl-up {
  font-family: "/null/";
}

.oj-mq-sm-only {
  font-family: "/screen and (max-width: 767.9px)/";
}

.oj-mq-md-only {
  font-family: "/print and (orientation: portrait), screen and (min-width: 768px) and (max-width: 1023.9px)/";
}

.oj-mq-lg-only {
  font-family: "/print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1280.9px)/";
}

.oj-mq-xl-only {
  font-family: "/null/";
}

.oj-mq-md-down {
  font-family: "/print and (orientation: portrait), screen and (max-width: 1023.9px)/";
}

.oj-mq-lg-down {
  font-family: "/print and (orientation: landscape), screen and (max-width: 1280.9px)/";
}

.oj-mq-xl-down {
  font-family: "/null/";
}

.oj-mq-high-resolution {
  font-family: "/(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx)/";
}

@media print, screen {
  .oj-form > .oj-flex > .oj-flex-item > .oj-sm-label-nowrap,
  .oj-sm-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label,
  .oj-sm-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label,
  .oj-sm-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  .oj-sm-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label-value .oj-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-formlayout-inline-label > .oj-label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  .oj-formlayout-inline-label > .oj-label-nocomp {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }
  html[dir=rtl] .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label,
  html[dir=rtl] .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label-nocomp {
    text-align: left;
  }
  .oj-formlayout-inline-value {
    text-align: left;
  }
  html[dir=rtl] .oj-formlayout-inline-value {
    text-align: right;
  }
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-sm-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon {
    margin-top: 1px;
  }
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-sm-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-sm-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) label,
  .oj-sm-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor,
  .oj-sm-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor {
    float: none;
  }
  html:not([dir=rtl]) .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html:not([dir=rtl]) .oj-sm-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html:not([dir=rtl]) .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  html:not([dir=rtl]) .oj-sm-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-left: 0;
    margin-right: 6px;
  }
  html[dir=rtl] .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html[dir=rtl] .oj-sm-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html[dir=rtl] .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  html[dir=rtl] .oj-sm-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px;
  }
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-formlayout-inline-label > .oj-label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  .oj-formlayout-inline-label > .oj-label-nocomp {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.4em;
    box-sizing: border-box;
  }
  html:not([dir=rtl]) .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  html:not([dir=rtl]) .oj-formlayout-inline-label > .oj-label,
  html:not([dir=rtl]) .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  html:not([dir=rtl]) .oj-formlayout-inline-label > .oj-label-nocomp {
    padding-right: 0.5em;
  }
  html[dir=rtl] .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label,
  html[dir=rtl] .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label-nocomp {
    padding-left: 0.5em;
  }
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-inline-top,
  .oj-formlayout-inline-label > .oj-label-inline-top,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp.oj-label-for-non-control,
  .oj-formlayout-inline-label > .oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0;
  }
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label,
  .oj-formlayout-inline-label > .oj-radioset-label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label,
  .oj-flformlayoutex-inline-label > .oj-checkboxset-label {
    margin-top: 0.19rem;
    margin-bottom: 0;
  }
  .oj-form > .oj-flex > .oj-flex-item > .oj-sm-label-nowrap .oj-label-group,
  .oj-sm-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label .oj-label-group,
  .oj-sm-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
  }
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label .oj-label-group,
  .oj-formlayout-inline-label > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
    line-height: 1.6em;
  }
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp:not(.oj-label-for-non-control) {
    line-height: 1.6em;
  }
  html:not([dir=rtl]) .oj-sm-form-across > .oj-flex > .oj-flex-item:first-child {
    padding-left: 0;
  }
  html[dir=rtl] .oj-sm-form-across > .oj-flex > .oj-flex-item:first-child {
    padding-right: 0;
  }
  html:not([dir=rtl]) .oj-sm-form-across > .oj-flex > .oj-flex-item:last-child {
    padding-right: 0;
  }
  html[dir=rtl] .oj-sm-form-across > .oj-flex > .oj-flex-item:last-child {
    padding-left: 0;
  }
  .oj-form.oj-sm-form-across > .oj-flex {
    padding-left: 0;
    padding-right: 0;
  }
  html:not([dir=rtl]) .oj-form.oj-sm-form-across {
    padding-left: 0;
  }
  html[dir=rtl] .oj-form.oj-sm-form-across {
    padding-right: 0;
  }
  html:not([dir=rtl]) .oj-form.oj-sm-form-across > .oj-flex {
    padding-right: 0;
  }
  html[dir=rtl] .oj-form.oj-sm-form-across > .oj-flex {
    padding-left: 0;
  }
  html:not([dir=rtl]) .oj-form-layout:not(.oj-sm-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-left: 0.5em;
  }
  html[dir=rtl] .oj-form-layout:not(.oj-sm-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-right: 0.5em;
  }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-sm-label-inline {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }
  html[dir=rtl] .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-sm-label-inline {
    text-align: left;
  }
  .oj-sm-label-inline .oj-label-required-icon {
    margin-top: 1px;
  }
  .oj-sm-label-inline .oj-label-required-icon,
  .oj-sm-label-inline .oj-label-help-icon,
  .oj-sm-label-inline.oj-label label,
  .oj-sm-label-inline .oj-label-help-icon-anchor {
    float: none;
  }
  html:not([dir=rtl]) .oj-sm-label-inline .oj-label-required-icon,
  html:not([dir=rtl]) .oj-sm-label-inline .oj-label-help-icon {
    margin-left: 0;
    margin-right: 6px;
  }
  html[dir=rtl] .oj-sm-label-inline .oj-label-required-icon,
  html[dir=rtl] .oj-sm-label-inline .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px;
  }
  .oj-sm-label-inline.oj-label {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.4em;
    box-sizing: border-box;
  }
  html:not([dir=rtl]) .oj-sm-label-inline.oj-label {
    padding-right: 0.5em;
  }
  html[dir=rtl] .oj-sm-label-inline.oj-label {
    padding-left: 0.5em;
  }
  .oj-sm-label-inline.oj-label-inline-top,
  .oj-sm-label-inline.oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0;
  }
  .oj-sm-label-inline.oj-radioset-label,
  .oj-sm-label-inline.oj-checkboxset-label {
    margin-top: 0.19rem;
    margin-bottom: 0;
  }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-sm-label-inline .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
    line-height: 1.6em;
  }
  html:not([dir=rtl]) .oj-sm-label-inline.oj-label label {
    float: none;
  }
  html[dir=rtl] .oj-sm-label-inline.oj-label label {
    float: none;
  }
}
@media print, screen and (min-width: 768px) {
  .oj-form > .oj-flex > .oj-flex-item > .oj-md-label-nowrap,
  .oj-md-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label,
  .oj-md-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label,
  .oj-md-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  .oj-md-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label-value .oj-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-formlayout-inline-label > .oj-label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  .oj-formlayout-inline-label > .oj-label-nocomp {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }
  html[dir=rtl] .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label,
  html[dir=rtl] .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label-nocomp {
    text-align: left;
  }
  .oj-formlayout-inline-value {
    text-align: left;
  }
  html[dir=rtl] .oj-formlayout-inline-value {
    text-align: right;
  }
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-md-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon {
    margin-top: 1px;
  }
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-md-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-md-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) label,
  .oj-md-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor,
  .oj-md-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor {
    float: none;
  }
  html:not([dir=rtl]) .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html:not([dir=rtl]) .oj-md-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html:not([dir=rtl]) .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  html:not([dir=rtl]) .oj-md-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-left: 0;
    margin-right: 6px;
  }
  html[dir=rtl] .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html[dir=rtl] .oj-md-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html[dir=rtl] .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  html[dir=rtl] .oj-md-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px;
  }
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-formlayout-inline-label > .oj-label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  .oj-formlayout-inline-label > .oj-label-nocomp {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.4em;
    box-sizing: border-box;
  }
  html:not([dir=rtl]) .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  html:not([dir=rtl]) .oj-formlayout-inline-label > .oj-label,
  html:not([dir=rtl]) .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  html:not([dir=rtl]) .oj-formlayout-inline-label > .oj-label-nocomp {
    padding-right: 0.5em;
  }
  html[dir=rtl] .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label,
  html[dir=rtl] .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label-nocomp {
    padding-left: 0.5em;
  }
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-inline-top,
  .oj-formlayout-inline-label > .oj-label-inline-top,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp.oj-label-for-non-control,
  .oj-formlayout-inline-label > .oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0;
  }
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label,
  .oj-formlayout-inline-label > .oj-radioset-label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label,
  .oj-flformlayoutex-inline-label > .oj-checkboxset-label {
    margin-top: 0.19rem;
    margin-bottom: 0;
  }
  .oj-form > .oj-flex > .oj-flex-item > .oj-md-label-nowrap .oj-label-group,
  .oj-md-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label .oj-label-group,
  .oj-md-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
  }
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label .oj-label-group,
  .oj-formlayout-inline-label > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
    line-height: 1.6em;
  }
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp:not(.oj-label-for-non-control) {
    line-height: 1.6em;
  }
  html:not([dir=rtl]) .oj-md-form-across > .oj-flex > .oj-flex-item:first-child {
    padding-left: 0;
  }
  html[dir=rtl] .oj-md-form-across > .oj-flex > .oj-flex-item:first-child {
    padding-right: 0;
  }
  html:not([dir=rtl]) .oj-md-form-across > .oj-flex > .oj-flex-item:last-child {
    padding-right: 0;
  }
  html[dir=rtl] .oj-md-form-across > .oj-flex > .oj-flex-item:last-child {
    padding-left: 0;
  }
  .oj-form.oj-md-form-across > .oj-flex {
    padding-left: 0;
    padding-right: 0;
  }
  html:not([dir=rtl]) .oj-form.oj-md-form-across {
    padding-left: 0;
  }
  html[dir=rtl] .oj-form.oj-md-form-across {
    padding-right: 0;
  }
  html:not([dir=rtl]) .oj-form.oj-md-form-across > .oj-flex {
    padding-right: 0;
  }
  html[dir=rtl] .oj-form.oj-md-form-across > .oj-flex {
    padding-left: 0;
  }
  html:not([dir=rtl]) .oj-form-layout:not(.oj-md-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-left: 0.5em;
  }
  html[dir=rtl] .oj-form-layout:not(.oj-md-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-right: 0.5em;
  }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-md-label-inline {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }
  html[dir=rtl] .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-md-label-inline {
    text-align: left;
  }
  .oj-md-label-inline .oj-label-required-icon {
    margin-top: 1px;
  }
  .oj-md-label-inline .oj-label-required-icon,
  .oj-md-label-inline .oj-label-help-icon,
  .oj-md-label-inline.oj-label label,
  .oj-md-label-inline .oj-label-help-icon-anchor {
    float: none;
  }
  html:not([dir=rtl]) .oj-md-label-inline .oj-label-required-icon,
  html:not([dir=rtl]) .oj-md-label-inline .oj-label-help-icon {
    margin-left: 0;
    margin-right: 6px;
  }
  html[dir=rtl] .oj-md-label-inline .oj-label-required-icon,
  html[dir=rtl] .oj-md-label-inline .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px;
  }
  .oj-md-label-inline.oj-label {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.4em;
    box-sizing: border-box;
  }
  html:not([dir=rtl]) .oj-md-label-inline.oj-label {
    padding-right: 0.5em;
  }
  html[dir=rtl] .oj-md-label-inline.oj-label {
    padding-left: 0.5em;
  }
  .oj-md-label-inline.oj-label-inline-top,
  .oj-md-label-inline.oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0;
  }
  .oj-md-label-inline.oj-radioset-label,
  .oj-md-label-inline.oj-checkboxset-label {
    margin-top: 0.19rem;
    margin-bottom: 0;
  }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-md-label-inline .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
    line-height: 1.6em;
  }
  html:not([dir=rtl]) .oj-md-label-inline.oj-label label {
    float: none;
  }
  html[dir=rtl] .oj-md-label-inline.oj-label label {
    float: none;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-form > .oj-flex > .oj-flex-item > .oj-lg-label-nowrap,
  .oj-lg-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label,
  .oj-lg-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label,
  .oj-lg-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  .oj-lg-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label-value .oj-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-formlayout-inline-label > .oj-label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  .oj-formlayout-inline-label > .oj-label-nocomp {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }
  html[dir=rtl] .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label,
  html[dir=rtl] .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label-nocomp {
    text-align: left;
  }
  .oj-formlayout-inline-value {
    text-align: left;
  }
  html[dir=rtl] .oj-formlayout-inline-value {
    text-align: right;
  }
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-lg-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon {
    margin-top: 1px;
  }
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-lg-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-lg-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) label,
  .oj-lg-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor,
  .oj-lg-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor {
    float: none;
  }
  html:not([dir=rtl]) .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html:not([dir=rtl]) .oj-lg-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html:not([dir=rtl]) .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  html:not([dir=rtl]) .oj-lg-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-left: 0;
    margin-right: 6px;
  }
  html[dir=rtl] .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html[dir=rtl] .oj-lg-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html[dir=rtl] .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  html[dir=rtl] .oj-lg-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px;
  }
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-formlayout-inline-label > .oj-label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  .oj-formlayout-inline-label > .oj-label-nocomp {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.4em;
    box-sizing: border-box;
  }
  html:not([dir=rtl]) .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  html:not([dir=rtl]) .oj-formlayout-inline-label > .oj-label,
  html:not([dir=rtl]) .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  html:not([dir=rtl]) .oj-formlayout-inline-label > .oj-label-nocomp {
    padding-right: 0.5em;
  }
  html[dir=rtl] .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label,
  html[dir=rtl] .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label-nocomp {
    padding-left: 0.5em;
  }
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-inline-top,
  .oj-formlayout-inline-label > .oj-label-inline-top,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp.oj-label-for-non-control,
  .oj-formlayout-inline-label > .oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0;
  }
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label,
  .oj-formlayout-inline-label > .oj-radioset-label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label,
  .oj-flformlayoutex-inline-label > .oj-checkboxset-label {
    margin-top: 0.19rem;
    margin-bottom: 0;
  }
  .oj-form > .oj-flex > .oj-flex-item > .oj-lg-label-nowrap .oj-label-group,
  .oj-lg-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label .oj-label-group,
  .oj-lg-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
  }
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label .oj-label-group,
  .oj-formlayout-inline-label > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
    line-height: 1.6em;
  }
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp:not(.oj-label-for-non-control) {
    line-height: 1.6em;
  }
  html:not([dir=rtl]) .oj-lg-form-across > .oj-flex > .oj-flex-item:first-child {
    padding-left: 0;
  }
  html[dir=rtl] .oj-lg-form-across > .oj-flex > .oj-flex-item:first-child {
    padding-right: 0;
  }
  html:not([dir=rtl]) .oj-lg-form-across > .oj-flex > .oj-flex-item:last-child {
    padding-right: 0;
  }
  html[dir=rtl] .oj-lg-form-across > .oj-flex > .oj-flex-item:last-child {
    padding-left: 0;
  }
  .oj-form.oj-lg-form-across > .oj-flex {
    padding-left: 0;
    padding-right: 0;
  }
  html:not([dir=rtl]) .oj-form.oj-lg-form-across {
    padding-left: 0;
  }
  html[dir=rtl] .oj-form.oj-lg-form-across {
    padding-right: 0;
  }
  html:not([dir=rtl]) .oj-form.oj-lg-form-across > .oj-flex {
    padding-right: 0;
  }
  html[dir=rtl] .oj-form.oj-lg-form-across > .oj-flex {
    padding-left: 0;
  }
  html:not([dir=rtl]) .oj-form-layout:not(.oj-lg-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-left: 0.5em;
  }
  html[dir=rtl] .oj-form-layout:not(.oj-lg-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-right: 0.5em;
  }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-lg-label-inline {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }
  html[dir=rtl] .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-lg-label-inline {
    text-align: left;
  }
  .oj-lg-label-inline .oj-label-required-icon {
    margin-top: 1px;
  }
  .oj-lg-label-inline .oj-label-required-icon,
  .oj-lg-label-inline .oj-label-help-icon,
  .oj-lg-label-inline.oj-label label,
  .oj-lg-label-inline .oj-label-help-icon-anchor {
    float: none;
  }
  html:not([dir=rtl]) .oj-lg-label-inline .oj-label-required-icon,
  html:not([dir=rtl]) .oj-lg-label-inline .oj-label-help-icon {
    margin-left: 0;
    margin-right: 6px;
  }
  html[dir=rtl] .oj-lg-label-inline .oj-label-required-icon,
  html[dir=rtl] .oj-lg-label-inline .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px;
  }
  .oj-lg-label-inline.oj-label {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.4em;
    box-sizing: border-box;
  }
  html:not([dir=rtl]) .oj-lg-label-inline.oj-label {
    padding-right: 0.5em;
  }
  html[dir=rtl] .oj-lg-label-inline.oj-label {
    padding-left: 0.5em;
  }
  .oj-lg-label-inline.oj-label-inline-top,
  .oj-lg-label-inline.oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0;
  }
  .oj-lg-label-inline.oj-radioset-label,
  .oj-lg-label-inline.oj-checkboxset-label {
    margin-top: 0.19rem;
    margin-bottom: 0;
  }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-lg-label-inline .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
    line-height: 1.6em;
  }
  html:not([dir=rtl]) .oj-lg-label-inline.oj-label label {
    float: none;
  }
  html[dir=rtl] .oj-lg-label-inline.oj-label label {
    float: none;
  }
}
@media screen and (min-width: 1281px) {
  .oj-form > .oj-flex > .oj-flex-item > .oj-xl-label-nowrap,
  .oj-xl-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label,
  .oj-xl-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label,
  .oj-xl-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  .oj-xl-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label-value .oj-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-formlayout-inline-label > .oj-label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  .oj-formlayout-inline-label > .oj-label-nocomp {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }
  html[dir=rtl] .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label,
  html[dir=rtl] .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label-nocomp {
    text-align: left;
  }
  .oj-formlayout-inline-value {
    text-align: left;
  }
  html[dir=rtl] .oj-formlayout-inline-value {
    text-align: right;
  }
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-xl-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon {
    margin-top: 1px;
  }
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-xl-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-xl-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) label,
  .oj-xl-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor,
  .oj-xl-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor {
    float: none;
  }
  html:not([dir=rtl]) .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html:not([dir=rtl]) .oj-xl-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html:not([dir=rtl]) .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  html:not([dir=rtl]) .oj-xl-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-left: 0;
    margin-right: 6px;
  }
  html[dir=rtl] .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html[dir=rtl] .oj-xl-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  html[dir=rtl] .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  html[dir=rtl] .oj-xl-labels-inline > .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px;
  }
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-formlayout-inline-label > .oj-label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  .oj-formlayout-inline-label > .oj-label-nocomp {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.4em;
    box-sizing: border-box;
  }
  html:not([dir=rtl]) .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  html:not([dir=rtl]) .oj-formlayout-inline-label > .oj-label,
  html:not([dir=rtl]) .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  html:not([dir=rtl]) .oj-formlayout-inline-label > .oj-label-nocomp {
    padding-right: 0.5em;
  }
  html[dir=rtl] .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label,
  html[dir=rtl] .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp,
  html[dir=rtl] .oj-formlayout-inline-label > .oj-label-nocomp {
    padding-left: 0.5em;
  }
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-inline-top,
  .oj-formlayout-inline-label > .oj-label-inline-top,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp.oj-label-for-non-control,
  .oj-formlayout-inline-label > .oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0;
  }
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label,
  .oj-formlayout-inline-label > .oj-radioset-label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label,
  .oj-flformlayoutex-inline-label > .oj-checkboxset-label {
    margin-top: 0.19rem;
    margin-bottom: 0;
  }
  .oj-form > .oj-flex > .oj-flex-item > .oj-xl-label-nowrap .oj-label-group,
  .oj-xl-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label .oj-label-group,
  .oj-xl-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
  }
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label .oj-label-group,
  .oj-formlayout-inline-label > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
    line-height: 1.6em;
  }
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp:not(.oj-label-for-non-control) {
    line-height: 1.6em;
  }
  html:not([dir=rtl]) .oj-xl-form-across > .oj-flex > .oj-flex-item:first-child {
    padding-left: 0;
  }
  html[dir=rtl] .oj-xl-form-across > .oj-flex > .oj-flex-item:first-child {
    padding-right: 0;
  }
  html:not([dir=rtl]) .oj-xl-form-across > .oj-flex > .oj-flex-item:last-child {
    padding-right: 0;
  }
  html[dir=rtl] .oj-xl-form-across > .oj-flex > .oj-flex-item:last-child {
    padding-left: 0;
  }
  .oj-form.oj-xl-form-across > .oj-flex {
    padding-left: 0;
    padding-right: 0;
  }
  html:not([dir=rtl]) .oj-form.oj-xl-form-across {
    padding-left: 0;
  }
  html[dir=rtl] .oj-form.oj-xl-form-across {
    padding-right: 0;
  }
  html:not([dir=rtl]) .oj-form.oj-xl-form-across > .oj-flex {
    padding-right: 0;
  }
  html[dir=rtl] .oj-form.oj-xl-form-across > .oj-flex {
    padding-left: 0;
  }
  html:not([dir=rtl]) .oj-form-layout:not(.oj-xl-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-left: 0.5em;
  }
  html[dir=rtl] .oj-form-layout:not(.oj-xl-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-right: 0.5em;
  }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-xl-label-inline {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }
  html[dir=rtl] .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-xl-label-inline {
    text-align: left;
  }
  .oj-xl-label-inline .oj-label-required-icon {
    margin-top: 1px;
  }
  .oj-xl-label-inline .oj-label-required-icon,
  .oj-xl-label-inline .oj-label-help-icon,
  .oj-xl-label-inline.oj-label label,
  .oj-xl-label-inline .oj-label-help-icon-anchor {
    float: none;
  }
  html:not([dir=rtl]) .oj-xl-label-inline .oj-label-required-icon,
  html:not([dir=rtl]) .oj-xl-label-inline .oj-label-help-icon {
    margin-left: 0;
    margin-right: 6px;
  }
  html[dir=rtl] .oj-xl-label-inline .oj-label-required-icon,
  html[dir=rtl] .oj-xl-label-inline .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px;
  }
  .oj-xl-label-inline.oj-label {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.4em;
    box-sizing: border-box;
  }
  html:not([dir=rtl]) .oj-xl-label-inline.oj-label {
    padding-right: 0.5em;
  }
  html[dir=rtl] .oj-xl-label-inline.oj-label {
    padding-left: 0.5em;
  }
  .oj-xl-label-inline.oj-label-inline-top,
  .oj-xl-label-inline.oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0;
  }
  .oj-xl-label-inline.oj-radioset-label,
  .oj-xl-label-inline.oj-checkboxset-label {
    margin-top: 0.19rem;
    margin-bottom: 0;
  }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-xl-label-inline .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit;
    line-height: 1.6em;
  }
  html:not([dir=rtl]) .oj-xl-label-inline.oj-label label {
    float: none;
  }
  html[dir=rtl] .oj-xl-label-inline.oj-label label {
    float: none;
  }
}
@media screen and (max-width: 767.9px) {
  .oj-form-layout.oj-sm-only-flex-direction-column > .oj-flex-item:not(:last-child) > .oj-form > .oj-flex:last-child {
    border-width: 0 0 0 0;
  }
}
@media print and (orientation: portrait), screen and (min-width: 768px) and (max-width: 1023.9px) {
  .oj-form-layout.oj-md-only-flex-direction-column > .oj-flex-item:not(:last-child) > .oj-form > .oj-flex:last-child {
    border-width: 0 0 0 0;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1280.9px) {
  .oj-form-layout.oj-lg-only-flex-direction-column > .oj-flex-item:not(:last-child) > .oj-form > .oj-flex:last-child {
    border-width: 0 0 0 0;
  }
}
.oj-applayout-fixed-top, .oj-hybrid-applayout-navbar-fixed-top,
.oj-applayout-fixed-bottom,
.oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  z-index: 100;
}

.oj-applayout-fixed-top, .oj-hybrid-applayout-navbar-fixed-top {
  top: 0;
}

.oj-applayout-fixed-bottom, .oj-hybrid-applayout-navbar-fixed-bottom, .oj-hybrid-applayout-navbar {
  bottom: 0;
}

/* Class used to suppress copy/paste and context menus for hybrid mobile apps */
.oj-hybrid {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.oj-hybrid input,
.oj-hybrid textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.oj-hybrid-padding {
  padding: 0.625rem;
}

.oj-hybrid-padding-vertical {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.oj-hybrid-padding-horizontal {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.oj-hybrid-padding-top {
  padding-top: 0.625rem;
}

.oj-hybrid-padding-bottom {
  padding-bottom: 0.625rem;
}

html:not([dir=rtl]) .oj-hybrid-padding-start {
  padding-left: 0.625rem;
}
html[dir=rtl] .oj-hybrid-padding-start {
  padding-right: 0.625rem;
}

html:not([dir=rtl]) .oj-hybrid-padding-end, html:not([dir=rtl]) .oj-hybrid-applayout-header > .oj-flex-bar-start, html:not([dir=rtl]) .oj-hybrid-applayout-header-no-border > .oj-flex-bar-start {
  padding-right: 0.625rem;
}
html[dir=rtl] .oj-hybrid-padding-end, html[dir=rtl] .oj-hybrid-applayout-header > .oj-flex-bar-start, html[dir=rtl] .oj-hybrid-applayout-header-no-border > .oj-flex-bar-start {
  padding-left: 0.625rem;
}

.oj-hybrid-applayout-offcanvas {
  width: 90%;
  max-width: 320px;
  background-color: hsl(203, 2%, 20%);
  color: hsl(203, 2%, 100%);
  box-shadow: 3px 2px 7px hsla(0, 0%, 0%,0.5);
  box-sizing: border-box;
}

.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-offcanvas {
  padding-top: 0px;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

html:not([dir=rtl]) .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-offcanvas .oj-navigationlist-item-element {
  margin-left: 0px;
  margin-left: constant(safe-area-inset-left);
  margin-left: env(safe-area-inset-left);
}
html[dir=rtl] .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-offcanvas .oj-navigationlist-item-element {
  margin-right: 0px;
  margin-right: constant(safe-area-inset-right);
  margin-right: env(safe-area-inset-right);
}

.oj-hybrid-applayout-page {
  min-height: 100vh;
  background-color: hsl(203, 2%, 100%);
}

.oj-hybrid-applayout-header, .oj-hybrid-applayout-header-no-border {
  box-shadow: none;
  border-bottom: 1px solid hsl(203, 2%, 90%);
  background-color: hsl(203, 2%, 95%);
  padding: 0 0.625rem 0 0.625rem;
}

.oj-hybrid-applayout-header::before, .oj-hybrid-applayout-header-no-border::before {
  content: "";
  display: inline-block;
  min-height: 44px;
  visibility: hidden;
}

.oj-hybrid-applayout-header-title {
  font-weight: normal;
  font-size: 1.125rem;
  color: hsla(0, 0%, 0%, 0.8);
  padding: 0;
  margin: 0;
}

/* Use instead of oj-hybrid-applayout-header when a top fixed bar is present
   so we can correctly style the header border */
.oj-hybrid-applayout-header-no-border {
  border-style: none;
  box-shadow: none;
}

.oj-hybrid-applayout-header .oj-button, .oj-hybrid-applayout-header-no-border .oj-button,
.oj-hybrid-applayout-header .oj-button-button,
.oj-hybrid-applayout-header-no-border .oj-button-button {
  margin-bottom: 0;
}

html:not([dir=rtl]) .oj-hybrid-applayout-header .oj-flex-bar-start > .oj-button:first-child, html:not([dir=rtl]) .oj-hybrid-applayout-header-no-border .oj-flex-bar-start > .oj-button:first-child {
  margin-left: calc(0px - 0.57143rem);
}
html[dir=rtl] .oj-hybrid-applayout-header .oj-flex-bar-start > .oj-button:first-child, html[dir=rtl] .oj-hybrid-applayout-header-no-border .oj-flex-bar-start > .oj-button:first-child {
  margin-right: calc(0px - 0.57143rem);
}

html:not([dir=rtl]) .oj-hybrid-applayout-header .oj-flex-bar-end > .oj-button:last-child, html:not([dir=rtl]) .oj-hybrid-applayout-header-no-border .oj-flex-bar-end > .oj-button:last-child {
  margin-right: calc(0px - 0.57143rem);
}
html[dir=rtl] .oj-hybrid-applayout-header .oj-flex-bar-end > .oj-button:last-child, html[dir=rtl] .oj-hybrid-applayout-header-no-border .oj-flex-bar-end > .oj-button:last-child {
  margin-left: calc(0px - 0.57143rem);
}

/* Class used to position the application header and title for iOS hybrid
   applications where the status bar is overlaid in the WebView.
   This class has no effect on other platforms. */
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header, .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header-no-border {
  padding-top: 20px;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  min-height: calc(44px + 20px);
}

.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header .oj-hybrid-applayout-header-title, .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header-no-border .oj-hybrid-applayout-header-title {
  margin-top: 20px;
  margin-top: constant(safe-area-inset-top);
  margin-top: env(safe-area-inset-top);
}

.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-page .oj-hybrid-applayout-content {
  padding-left: 0px;
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
  padding-right: 0px;
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);
}

.oj-hybrid-applayout-footer {
  min-height: 48px;
  border-top: 1px solid hsl(203, 2%, 90%);
  background-color: hsl(203, 2%, 95%);
}

.oj-hybrid-applayout-toolbar-stretch oj-button {
  display: flex;
}

.oj-hybrid-applayout-toolbar-stretch .oj-button,
.oj-hybrid-applayout-toolbar-stretch .oj-button-button {
  flex: 1 1 auto;
  min-height: 48px;
  box-sizing: border-box;
  margin: 0;
}

.oj-hybrid-applayout-navbar-page, .oj-hybrid-applayout-navbar-fixed-top,
.oj-hybrid-applayout-navbar-app,
.oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar {
  background-color: hsl(203, 2%, 95%);
}

.oj-applayout-fixed-top .oj-hybrid-applayout-navbar-page, .oj-applayout-fixed-top .oj-hybrid-applayout-navbar-fixed-top, .oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar-page, .oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar-fixed-top,
.oj-applayout-fixed-top .oj-hybrid-applayout-navbar-app,
.oj-applayout-fixed-top .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-applayout-fixed-top .oj-hybrid-applayout-navbar,
.oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar-app,
.oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar {
  box-shadow: none;
  border-bottom: 1px solid hsl(203, 2%, 90%);
}

.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-page, .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-page, .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-page, .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-fixed-top, .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-fixed-top, .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-fixed-top,
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-app,
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar,
.oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-app,
.oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar,
.oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-app,
.oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar {
  box-shadow: none;
  border-top: 1px solid hsl(203, 2%, 90%);
}

.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-footer, .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-footer, .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar .oj-hybrid-applayout-footer,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-page,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-page,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-page,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-fixed-top,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-fixed-top,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-fixed-top,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-app,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-app,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-app,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar {
  padding-bottom: 0px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Deprecated. Use oj-hybrid-applayout-navbar-fixed-bottom or oj-hybrid-applayout-navbar-fixed-top nav bar instead. */
/* Deprecated. Use oj-hybrid-applayout-header or oj-hybrid-applayout-header-no-border to style the header instead. */
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-app .oj-navigationlist-item.oj-selected, .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-app .oj-navigationlist-item.oj-selected, .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-app .oj-navigationlist-item.oj-selected, .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom .oj-navigationlist-item.oj-selected, .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom .oj-navigationlist-item.oj-selected, .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-fixed-bottom .oj-navigationlist-item.oj-selected, .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar .oj-navigationlist-item.oj-selected, .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar .oj-navigationlist-item.oj-selected, .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar .oj-navigationlist-item.oj-selected,
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-app .oj-navigationlist-item.oj-hover,
.oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-app .oj-navigationlist-item.oj-hover,
.oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-app .oj-navigationlist-item.oj-hover,
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom .oj-navigationlist-item.oj-hover,
.oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom .oj-navigationlist-item.oj-hover,
.oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-fixed-bottom .oj-navigationlist-item.oj-hover,
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar .oj-navigationlist-item.oj-hover,
.oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar .oj-navigationlist-item.oj-hover,
.oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar .oj-navigationlist-item.oj-hover {
  border-color: transparent;
}

.oj-web-applayout-body {
  overflow-y: scroll;
}

.oj-web-applayout-offcanvas {
  width: 90%;
  max-width: 320px;
  background-color: hsl(203, 2%, 20%);
  color: hsl(203, 2%, 100%);
}

.oj-web-applayout-offcanvas-icon {
  font-size: 24px;
}

.oj-web-applayout-page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .oj-web-applayout-page {
    height: 100vh;
    min-height: 0;
  }
}
_:-ms-lang(x), _:-webkit-full-screen .oj-web-applayout-page {
  height: auto;
  min-height: 100vh;
}

.oj-web-applayout-max-width {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
  box-sizing: border-box;
}

.oj-web-applayout-header,
.oj-web-applayout-footer,
.oj-web-applayout-navbar,
.oj-web-applayout-header + .oj-progress-bar-embedded {
  flex: 0 0 auto;
}

.oj-web-applayout-header {
  z-index: 1;
  background-color: hsl(203, 2%, 95%);
  box-shadow: 0 3px 3px hsla(0, 0%, 0%,0.1);
}

html:not([dir=rtl]) .oj-web-applayout-header .oj-flex-bar-start {
  padding-right: 10px;
}
html[dir=rtl] .oj-web-applayout-header .oj-flex-bar-start {
  padding-left: -10px;
}

.oj-slow-boxshadow .oj-web-applayout-header {
  border-bottom: 1px solid hsl(203, 2%, 90%);
}

.oj-web-applayout-header .oj-button,
.oj-web-applayout-header .oj-button-button {
  margin-bottom: 0;
}

.oj-web-applayout-header > div:first-child {
  box-sizing: border-box;
}

.oj-web-applayout-header > div:first-child::before {
  content: "";
  display: inline-block;
  min-height: 3.143rem;
  visibility: hidden;
}

.oj-web-applayout-header > div,
.oj-web-applayout-footer > div {
  padding-left: 20px;
  padding-right: 20px;
}

html:not([dir=rtl]) .oj-web-applayout-header .oj-flex-bar-start > .oj-button:first-child {
  margin-left: calc(0px - 0.57143rem);
}
html[dir=rtl] .oj-web-applayout-header .oj-flex-bar-start > .oj-button:first-child {
  margin-right: calc(0px - 0.57143rem);
}

html:not([dir=rtl]) .oj-web-applayout-header .oj-flex-bar-start > .oj-button.oj-button-lg:first-child {
  margin-left: calc(0px - 0.85714rem);
}
html[dir=rtl] .oj-web-applayout-header .oj-flex-bar-start > .oj-button.oj-button-lg:first-child {
  margin-right: calc(0px - 0.85714rem);
}

html:not([dir=rtl]) .oj-web-applayout-header .oj-flex-bar-end > .oj-button:last-child,
html:not([dir=rtl]) .oj-web-applayout-header .oj-flex-bar-end > .oj-toolbar:last-child {
  margin-right: calc(0px - 0.57143rem);
}
html[dir=rtl] .oj-web-applayout-header .oj-flex-bar-end > .oj-button:last-child,
html[dir=rtl] .oj-web-applayout-header .oj-flex-bar-end > .oj-toolbar:last-child {
  margin-left: calc(0px - 0.57143rem);
}

.oj-web-applayout-header-title {
  font-size: 1.14286rem;
  font-weight: normal;
  color: hsla(0, 0%, 0%, 0.7);
  font-weight: normal;
  line-height: 0;
  padding: 0;
  margin: 0;
}

.oj-web-applayout-navbar .oj-navigationlist-icon-only {
  padding-bottom: 3px;
}

.oj-sm-web-padding-horizontal, .oj-web-padding {
  padding-left: 20px;
  padding-right: 20px;
}

html:not([dir=rtl]) .oj-sm-web-padding-start {
  padding-left: 20px;
}
html[dir=rtl] .oj-sm-web-padding-start {
  padding-right: 20px;
}

html:not([dir=rtl]) .oj-sm-web-padding-end {
  padding-right: 20px;
}
html[dir=rtl] .oj-sm-web-padding-end {
  padding-left: 20px;
}

.oj-sm-web-padding-top,
.oj-sm-web-padding-vertical,
.oj-web-applayout-content,
.oj-web-padding {
  padding-top: calc(20px / 2);
}

.oj-sm-web-padding-bottom,
.oj-sm-web-padding-vertical,
.oj-web-applayout-content,
.oj-web-padding {
  padding-bottom: calc(20px / 2);
}

@media screen and (max-width: 767.9px) {
  .oj-sm-only-web-padding-horizontal {
    padding-left: 20px;
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-sm-only-web-padding-start {
    padding-left: 20px;
  }
  html[dir=rtl] .oj-sm-only-web-padding-start {
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-sm-only-web-padding-end {
    padding-right: 20px;
  }
  html[dir=rtl] .oj-sm-only-web-padding-end {
    padding-left: 20px;
  }
  .oj-sm-only-web-padding-top,
  .oj-sm-only-web-padding-vertical {
    padding-top: calc(20px / 2);
  }
  .oj-sm-only-web-padding-bottom,
  .oj-sm-only-web-padding-vertical {
    padding-bottom: calc(20px / 2);
  }
}
@media print, screen and (min-width: 768px) {
  .oj-md-web-padding-horizontal {
    padding-left: 20px;
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-md-web-padding-start {
    padding-left: 20px;
  }
  html[dir=rtl] .oj-md-web-padding-start {
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-md-web-padding-end {
    padding-right: 20px;
  }
  html[dir=rtl] .oj-md-web-padding-end {
    padding-left: 20px;
  }
  .oj-md-web-padding-top,
  .oj-md-web-padding-vertical {
    padding-top: calc(20px / 2);
  }
  .oj-md-web-padding-bottom,
  .oj-md-web-padding-vertical {
    padding-bottom: calc(20px / 2);
  }
}
@media print and (orientation: portrait), screen and (min-width: 768px) and (max-width: 1023.9px) {
  .oj-md-only-web-padding-horizontal {
    padding-left: 20px;
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-md-only-web-padding-start {
    padding-left: 20px;
  }
  html[dir=rtl] .oj-md-only-web-padding-start {
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-md-only-web-padding-end {
    padding-right: 20px;
  }
  html[dir=rtl] .oj-md-only-web-padding-end {
    padding-left: 20px;
  }
  .oj-md-only-web-padding-top,
  .oj-md-only-web-padding-vertical {
    padding-top: calc(20px / 2);
  }
  .oj-md-only-web-padding-bottom,
  .oj-md-only-web-padding-vertical {
    padding-bottom: calc(20px / 2);
  }
}
@media print and (orientation: portrait), screen and (max-width: 1023.9px) {
  .oj-md-down-web-padding-horizontal {
    padding-left: 20px;
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-md-down-web-padding-start {
    padding-left: 20px;
  }
  html[dir=rtl] .oj-md-down-web-padding-start {
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-md-down-web-padding-end {
    padding-right: 20px;
  }
  html[dir=rtl] .oj-md-down-web-padding-end {
    padding-left: 20px;
  }
  .oj-md-down-web-padding-top,
  .oj-md-down-web-padding-vertical {
    padding-top: calc(20px / 2);
  }
  .oj-md-down-web-padding-bottom,
  .oj-md-down-web-padding-vertical {
    padding-bottom: calc(20px / 2);
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-lg-web-padding-horizontal {
    padding-left: 20px;
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-lg-web-padding-start {
    padding-left: 20px;
  }
  html[dir=rtl] .oj-lg-web-padding-start {
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-lg-web-padding-end {
    padding-right: 20px;
  }
  html[dir=rtl] .oj-lg-web-padding-end {
    padding-left: 20px;
  }
  .oj-lg-web-padding-top,
  .oj-lg-web-padding-vertical {
    padding-top: calc(20px / 2);
  }
  .oj-lg-web-padding-bottom,
  .oj-lg-web-padding-vertical {
    padding-bottom: calc(20px / 2);
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1280.9px) {
  .oj-lg-only-web-padding-horizontal {
    padding-left: 20px;
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-lg-only-web-padding-start {
    padding-left: 20px;
  }
  html[dir=rtl] .oj-lg-only-web-padding-start {
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-lg-only-web-padding-end {
    padding-right: 20px;
  }
  html[dir=rtl] .oj-lg-only-web-padding-end {
    padding-left: 20px;
  }
  .oj-lg-only-web-padding-top,
  .oj-lg-only-web-padding-vertical {
    padding-top: calc(20px / 2);
  }
  .oj-lg-only-web-padding-bottom,
  .oj-lg-only-web-padding-vertical {
    padding-bottom: calc(20px / 2);
  }
}
@media print and (orientation: landscape), screen and (max-width: 1280.9px) {
  .oj-lg-down-web-padding-horizontal {
    padding-left: 20px;
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-lg-down-web-padding-start {
    padding-left: 20px;
  }
  html[dir=rtl] .oj-lg-down-web-padding-start {
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-lg-down-web-padding-end {
    padding-right: 20px;
  }
  html[dir=rtl] .oj-lg-down-web-padding-end {
    padding-left: 20px;
  }
  .oj-lg-down-web-padding-top,
  .oj-lg-down-web-padding-vertical {
    padding-top: calc(20px / 2);
  }
  .oj-lg-down-web-padding-bottom,
  .oj-lg-down-web-padding-vertical {
    padding-bottom: calc(20px / 2);
  }
}
@media screen and (min-width: 1281px) {
  .oj-xl-web-padding-horizontal {
    padding-left: 20px;
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-xl-web-padding-start {
    padding-left: 20px;
  }
  html[dir=rtl] .oj-xl-web-padding-start {
    padding-right: 20px;
  }
  html:not([dir=rtl]) .oj-xl-web-padding-end {
    padding-right: 20px;
  }
  html[dir=rtl] .oj-xl-web-padding-end {
    padding-left: 20px;
  }
  .oj-xl-web-padding-top,
  .oj-xl-web-padding-vertical {
    padding-top: calc(20px / 2);
  }
  .oj-xl-web-padding-bottom,
  .oj-xl-web-padding-vertical {
    padding-bottom: calc(20px / 2);
  }
}
.oj-web-applayout-content-nopad, .oj-web-applayout-content {
  flex: 1 0 auto;
}

.oj-web-applayout-content {
  padding-left: calc(20px - 2 * 5px);
  padding-right: calc(20px - 2 * 5px);
}

.oj-web-applayout-footer {
  min-height: 3.571rem;
  border-top: 1px solid hsl(203, 2%, 90%);
  background-color: hsl(203, 2%, 95%);
  box-sizing: border-box;
  padding-top: 10px;
  padding-bottom: 10px;
}

.oj-web-applayout-footer-item {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 auto;
}

@media screen and (max-width: 767.9px) {
  .oj-web-applayout-footer-item {
    justify-content: center;
    text-align: center;
  }
}
.oj-web-applayout-footer ul {
  margin: 0;
}
html:not([dir=rtl]) .oj-web-applayout-footer ul {
  padding-left: 0;
}
html[dir=rtl] .oj-web-applayout-footer ul {
  padding-right: 0;
}

.oj-web-applayout-footer li {
  list-style: none;
  display: inline-block;
}
html:not([dir=rtl]) .oj-web-applayout-footer li {
  margin-right: 10px;
  margin-left: 0;
  padding-right: 10px;
  border-right: 1px solid hsl(203, 2%, 90%);
}
html[dir=rtl] .oj-web-applayout-footer li {
  margin-left: 5px;
  margin-right: 0;
  padding-left: 5px;
  border-left: 1px solid hsl(203, 2%, 90%);
}

html:not([dir=rtl]) .oj-web-applayout-footer li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}
html[dir=rtl] .oj-web-applayout-footer li:last-child {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

oj-file-picker:not(.oj-complete) {
  visibility: hidden;
}

.oj-filepicker {
  display: inline-block;
}

.oj-filepicker-no-trigger.oj-filepicker {
  max-width: 400px;
  width: 100%;
  display: block;
}

.oj-filepicker-clickable {
  height: 100%;
}

.oj-filepicker-container {
  height: 100%;
}

.oj-filepicker-dropzone,
.oj-filepicker-disabled {
  justify-content: space-between;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2px;
  padding: 25px;
}

.oj-filepicker-dropzone {
  background-color: hsl(203, 2%, 99%);
  border-color: hsl(203, 2%, 90%);
}

.oj-filepicker-disabled {
  background-color: hsl(203, 2%, 99%);
  border-color: hsl(203, 2%, 99%);
}

.oj-filepicker-dropzone.oj-invalid-drop {
  border-color: #e65a66;
}

.oj-filepicker-dropzone.oj-valid-drop,
.oj-filepicker.oj-valid-drop,
.oj-filepicker-dropzone:active {
  background-color: rgb(179.1, 215.4, 238.2);
}

/* 
 * Suppress focus ring
 */
.oj-filepicker-dropzone:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-filepicker-text {
  font-size: 1.25rem;
  color: #000000;
  margin-bottom: 6px;
  font-weight: 500;
}

.oj-filepicker-secondary-text {
  color: #000000;
  font-size: 0.875rem;
  font-weight: 400;
}

.oj-filepicker-disabled .oj-filepicker-text,
.oj-filepicker-disabled .oj-filepicker-secondary-text {
  color: hsla(0, 0%, 0%, 0.38);
}

oj-progress-list:not(.oj-complete) {
  visibility: hidden;
}

.oj-progresslist {
  display: block;
}

.oj-progresslist-item {
  padding: 4px 10px 4px 12px;
}

.oj-progresslist-info {
  padding-left: 10px;
  padding-right: 10px;
}

.oj-progresslist-error-message {
  color: #ba0006;
}

.oj-progressstatus-done-icon {
  background-size: calc(968px * 1.2) calc(44px * 1.2);
  background-position: calc(-890px * 1.2) calc(-2px * 1.2);
  width: calc(16px * 1.2);
  height: calc(16px * 1.2);
}

.oj-progressstatus-error-icon {
  background-size: calc(968px * 1.2) calc(44px * 1.2);
  background-position: calc(-910px * 1.2) calc(-2px * 1.2);
  width: calc(16px * 1.2);
  height: calc(16px * 1.2);
}

.oj-progressstatus-cancel-icon {
  padding: 4px;
}

.oj-progressstatus-cell {
  width: 24px;
  height: 24px;
}

.oj-progressstatus-done-icon {
  background-size: calc(968px * 1.5) calc(44px * 1.5);
  background-position: calc(-890px * 1.5) calc(-2px * 1.5);
  width: calc(16px * 1.5);
  height: calc(16px * 1.5);
}

.oj-progressstatus-error-icon {
  background-size: calc(968px * 1.5) calc(44px * 1.5);
  background-position: calc(-910px * 1.5) calc(-2px * 1.5);
  width: calc(16px * 1.5);
  height: calc(16px * 1.5);
}

oj-avatar:not(.oj-complete) {
  visibility: hidden;
}

oj-avatar {
  display: inline-block;
}

.oj-avatar-background-image {
  background-size: cover;
  background-position: center center;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  display: flex;
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}

.oj-avatar {
  border: 1px solid hsl(203, 2%, 45%);
  color: hsl(203, 2%, 100%);
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
  background-color: hsl(203, 2%, 45%);
  overflow: hidden;
}

.oj-avatar-square,
.oj-avatar-square .oj-avatar-background-image,
.oj-avatar-square .oj-avatar-placeholder-icon,
.oj-avatar-square::after {
  border-radius: 2px;
}

.oj-avatar-circle,
.oj-avatar-circle .oj-avatar-placeholder-icon,
.oj-avatar-circle::after,
.oj-avatar-circle .oj-avatar-placeholder-icon {
  border-radius: 50%;
}

div.oj-avatar.oj-avatar-image {
  background-color: rgba(0, 0, 0, 0);
}

.oj-avatar-bg-purple.oj-avatar {
  background-color: #920083;
  border-color: #920083;
}

.oj-avatar-bg-orange.oj-avatar {
  background-color: #be4800;
  border-color: #be4800;
}

.oj-avatar-bg-red.oj-avatar {
  background-color: #e4001e;
  border-color: #e4001e;
}

.oj-avatar-bg-teal.oj-avatar {
  background-color: #008179;
  border-color: #008179;
}

.oj-avatar-bg-green.oj-avatar {
  background-color: #005a1c;
  border-color: #005a1c;
}

.oj-avatar-bg-forest.oj-avatar {
  background-color: #008323;
  border-color: #008323;
}

.oj-avatar-bg-mauve.oj-avatar {
  background-color: #754b9a;
  border-color: #754b9a;
}

.oj-avatar-bg-pink.oj-avatar {
  background-color: #c44591;
  border-color: #c44591;
}

.oj-avatar-bg-slate.oj-avatar {
  background-color: #687878;
  border-color: #687878;
}

.oj-avatar-bg-blue.oj-avatar {
  background-color: #2c5967;
  border-color: #2c5967;
}

.oj-avatar-bg-lilac.oj-avatar {
  background-color: #a15ea1;
  border-color: #a15ea1;
}

.oj-avatar-bg-gray.oj-avatar {
  background-color: #6f757e;
  border-color: #6f757e;
}

.oj-avatar::after {
  content: "";
  display: block;
  position: absolute;
  border: 0px solid transparent;
}

.oj-avatar-initials {
  text-overflow: ellipsis;
  overflow: hidden;
}

.oj-avatar-placeholder-icon {
  background-repeat: no-repeat;
}

.oj-avatar-xxs.oj-avatar-has-initials.oj-avatar,
.oj-avatar-xs.oj-avatar-has-initials.oj-avatar {
  background-image: linear-gradient(rgba(0, 0, 0, 0.189), rgba(0, 0, 0, 0.189));
}

.oj-avatar-xxs.oj-avatar-has-initials.oj-avatar::after,
.oj-avatar-xs.oj-avatar-has-initials.oj-avatar::after {
  border-color: rgba(0, 0, 0, 0.189);
  top: calc(0px - 1px);
  left: calc(0px - 1px);
}

.oj-avatar-xxs.oj-avatar-has-initials.oj-avatar::after {
  width: 32px;
  height: 32px;
  border-width: 1px;
}

.oj-avatar-xxs.oj-avatar {
  font-size: 12px;
  width: 32px;
  height: 32px;
}

.oj-avatar-xxs .oj-avatar-placeholder-icon {
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-150px * 1) calc(-2px * 1);
  width: calc(32px * 1);
  height: calc(32px * 1);
}

.oj-avatar-group-image .oj-avatar-xxs .oj-avatar-placeholder-icon {
  background-size: calc(332px * 1) calc(52px * 1);
  background-position: calc(-62px * 1) calc(-2px * 1);
  width: calc(32px * 1);
  height: calc(32px * 1);
}

.oj-avatar-xs.oj-avatar-has-initials.oj-avatar::after {
  width: 36px;
  height: 36px;
  border-width: 1px;
}

.oj-avatar-xs.oj-avatar {
  font-size: 14px;
  width: 36px;
  height: 36px;
}

.oj-avatar-xs .oj-avatar-placeholder-icon {
  background-size: calc(332px * 1.125) calc(52px * 1.125);
  background-position: calc(-150px * 1.125) calc(-2px * 1.125);
  width: calc(32px * 1.125);
  height: calc(32px * 1.125);
}

.oj-avatar-group-image .oj-avatar-xs .oj-avatar-placeholder-icon {
  background-size: calc(332px * 1.125) calc(52px * 1.125);
  background-position: calc(-62px * 1.125) calc(-2px * 1.125);
  width: calc(32px * 1.125);
  height: calc(32px * 1.125);
}

.oj-avatar-sm.oj-avatar {
  height: 54px;
  width: 54px;
  font-size: 18px;
}

.oj-avatar-sm .oj-avatar-placeholder-icon {
  background-size: calc(332px * 1.6875) calc(52px * 1.6875);
  background-position: calc(-150px * 1.6875) calc(-2px * 1.6875);
  width: calc(32px * 1.6875);
  height: calc(32px * 1.6875);
}

.oj-avatar-group-image .oj-avatar-sm .oj-avatar-placeholder-icon {
  background-size: calc(332px * 1.6875) calc(52px * 1.6875);
  background-position: calc(-62px * 1.6875) calc(-2px * 1.6875);
  width: calc(32px * 1.6875);
  height: calc(32px * 1.6875);
}

/*Don't need to specify medium size since it is the default*/
.oj-avatar {
  height: 72px;
  width: 72px;
  font-size: 24px;
}

.oj-avatar-placeholder-icon {
  background-size: calc(332px * 2.25) calc(52px * 2.25);
  background-position: calc(-150px * 2.25) calc(-2px * 2.25);
  width: calc(32px * 2.25);
  height: calc(32px * 2.25);
}

.oj-avatar-group-image .oj-avatar-placeholder-icon {
  background-size: calc(332px * 2.25) calc(52px * 2.25);
  background-position: calc(-62px * 2.25) calc(-2px * 2.25);
  width: calc(32px * 2.25);
  height: calc(32px * 2.25);
}

.oj-avatar-lg.oj-avatar {
  height: 104px;
  width: 104px;
  font-size: 36px;
}

.oj-avatar-lg .oj-avatar-placeholder-icon {
  background-size: calc(332px * 3.25) calc(52px * 3.25);
  background-position: calc(-150px * 3.25) calc(-2px * 3.25);
  width: calc(32px * 3.25);
  height: calc(32px * 3.25);
}

.oj-avatar-group-image .oj-avatar-lg .oj-avatar-placeholder-icon {
  background-size: calc(332px * 3.25) calc(52px * 3.25);
  background-position: calc(-62px * 3.25) calc(-2px * 3.25);
  width: calc(32px * 3.25);
  height: calc(32px * 3.25);
}

.oj-avatar-xl.oj-avatar {
  height: 192px;
  width: 192px;
  font-size: 72px;
}

.oj-avatar-xl .oj-avatar-placeholder-icon {
  background-size: calc(332px * 6) calc(52px * 6);
  background-position: calc(-150px * 6) calc(-2px * 6);
  width: calc(32px * 6);
  height: calc(32px * 6);
}

.oj-avatar-group-image .oj-avatar-xl .oj-avatar-placeholder-icon {
  background-size: calc(332px * 6) calc(52px * 6);
  background-position: calc(-62px * 6) calc(-2px * 6);
  width: calc(32px * 6);
  height: calc(32px * 6);
}

.oj-avatar-xxl.oj-avatar,
.oj-avatar-xl.oj-avatar {
  border-width: 2px;
}

.oj-avatar-xxl.oj-avatar {
  height: 256px;
  width: 256px;
  font-size: 96px;
}

.oj-avatar-xxl .oj-avatar-placeholder-icon {
  background-size: calc(332px * 8) calc(52px * 8);
  background-position: calc(-150px * 8) calc(-2px * 8);
  width: calc(32px * 8);
  height: calc(32px * 8);
}

.oj-avatar-group-image .oj-avatar-xxl .oj-avatar-placeholder-icon {
  background-size: calc(332px * 8) calc(52px * 8);
  background-position: calc(-62px * 8) calc(-2px * 8);
  width: calc(32px * 8);
  height: calc(32px * 8);
}

.oj-icon-circle {
  border-radius: 50%;
  border: 0px solid transparent;
  box-sizing: border-box;
  display: inline-block;
}

.oj-icon-circle-inner {
  border-radius: 50%;
  color: hsl(203, 2%, 100%);
  background-color: hsl(203, 2%, 45%);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  display: flex;
}

.oj-icon-circle-xxs .oj-icon-circle-inner,
.oj-icon-xxs .oj-icon-circle-inner {
  height: 32px;
  width: 32px;
  font-size: calc(32px / 2);
}

.oj-icon-circle-xs .oj-icon-circle-inner,
.oj-icon-xs .oj-icon-circle-inner {
  height: 48px;
  width: 48px;
  font-size: calc(48px / 2);
}

.oj-icon-circle-sm .oj-icon-circle-inner,
.oj-icon-sm .oj-icon-circle-inner {
  height: 64px;
  width: 64px;
  font-size: calc(64px / 2);
}

.oj-icon-circle-inner {
  height: 96px;
  width: 96px;
  font-size: calc(96px / 2);
}

.oj-icon-circle-lg .oj-icon-circle-inner,
.oj-icon-lg .oj-icon-circle-inner {
  height: 144px;
  width: 144px;
  font-size: calc(144px / 2);
}

.oj-icon-circle-xl .oj-icon-circle-inner,
.oj-icon-xl .oj-icon-circle-inner {
  height: 192px;
  width: 192px;
  font-size: calc(192px / 2);
}

.oj-icon-circle-xxl .oj-icon-circle-inner,
.oj-icon-xxl .oj-icon-circle-inner {
  height: 256px;
  width: 256px;
  font-size: calc(256px / 2);
}

.oj-icon-circle-green .oj-icon-circle-inner {
  background-color: #005a1c;
}

.oj-icon-circle-purple .oj-icon-circle-inner {
  background-color: #920083;
}

.oj-icon-circle-red .oj-icon-circle-inner {
  background-color: #e4001e;
}

.oj-icon-circle-teal .oj-icon-circle-inner {
  background-color: #008179;
}

.oj-icon-circle-orange .oj-icon-circle-inner {
  background-color: #be4800;
}

.oj-icon-circle-forest .oj-icon-circle-inner {
  background-color: #008323;
}

.oj-icon-circle-mauve .oj-icon-circle-inner {
  background-color: #754b9a;
}

.oj-icon-circle-pink .oj-icon-circle-inner {
  background-color: #c44591;
}

.oj-icon-circle-gray .oj-icon-circle-inner {
  background-color: #6f757e;
}

.oj-icon-circle-blue .oj-icon-circle-inner {
  background-color: #2c5967;
}

.oj-icon-circle-lilac .oj-icon-circle-inner {
  background-color: #a15ea1;
}

.oj-icon-circle-slate .oj-icon-circle-inner {
  background-color: #687878;
}

oj-module:not(.oj-complete) {
  visibility: hidden;
}

oj-module {
  display: block;
}

oj-action-card:not(.oj-complete) {
  visibility: hidden;
}

.oj-actioncard {
  display: inline-flex;
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 1px 1px 5px 0 hsla(0, 0%, 0%,0.4);
  background-color: #ffffff;
  border: 1px solid hsl(203, 2%, 88%);
  border-radius: 1px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.oj-actioncard:hover,
.oj-actioncard.oj-active {
  transform: scale(1.02);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.oj-actioncard.oj-active {
  box-shadow: 1px 1px 3px 0 hsla(0, 0%, 0%,0.35);
}

.oj-actioncard:hover:not(.oj-active),
.oj-actioncard:focus:not(.oj-active) {
  box-shadow: 1px 1px 10px 0 hsla(0, 0%, 0%,0.45);
}

.oj-actioncard:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-web-applayout-footer {
  background-color: #704b64 !important;
}

.loginNav {
  background-color: #704b64 !important;
}

.txtTitleLogin {
  color: #FFFFFF !important;
}

.oj-web-applayout-header {
  background-color: rgb(255, 255, 255);
}

:root {
  --oj-core-text-color-primary: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-core-text-color-secondary: rgba(var(--oj-palette-neutral-rgb-190), 0.65);
  --oj-core-text-color-disabled: rgba(var(--oj-palette-neutral-rgb-190), 0.4);
  --oj-core-text-color-brand: rgb(var(--oj-palette-brand-rgb-110));
  --oj-core-text-color-danger: rgb(var(--oj-palette-danger-rgb-120));
  --oj-core-text-color-warning: rgb(var(--oj-palette-warning-rgb-120));
  --oj-core-text-color-success: rgb(var(--oj-palette-success-rgb-120));
  --oj-core-bg-color-content: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-bg-color-hover: rgba(var(--oj-palette-neutral-rgb-190), 0.04);
  --oj-core-bg-color-active: rgba(var(--oj-palette-neutral-rgb-190), 0.06);
  --oj-core-bg-color-selected: rgb(var(--oj-palette-info-rgb-30));
  --oj-core-border-color-selected: rgb(var(--oj-palette-info-rgb-100));
  --oj-core-color-disabled-1: rgba(var(--oj-palette-neutral-rgb-190), 0.05);
  --oj-core-color-disabled-2: rgba(var(--oj-palette-neutral-rgb-190), 0.12);
  --oj-core-icon-size-lg: 1.5rem;
  --oj-core-icon-size-sm: 1rem;
  --oj-core-divider-color: rgba(var(--oj-palette-neutral-rgb-190), 0.1);
  --oj-core-divider-margin: 0.5rem;
  --oj-core-neutral-1: rgb(var(--oj-palette-neutral-rgb-100));
  --oj-core-neutral-2: rgb(var(--oj-palette-neutral-rgb-110));
  --oj-core-neutral-3: rgb(var(--oj-palette-neutral-rgb-120));
  --oj-core-neutral-contrast: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-neutral-secondary-1: rgb(var(--oj-palette-neutral-rgb-30));
  --oj-core-neutral-secondary-2: rgb(var(--oj-palette-neutral-rgb-20));
  --oj-core-neutral-secondary-3: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-core-neutral-secondary-contrast: rgb(var(--oj-palette-neutral-rgb-120));
  --oj-core-brand-1: rgb(var(--oj-palette-brand-rgb-100));
  --oj-core-brand-2: rgb(var(--oj-palette-brand-rgb-110));
  --oj-core-brand-3: rgb(var(--oj-palette-brand-rgb-120));
  --oj-core-brand-contrast: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-danger-1: rgb(var(--oj-palette-danger-rgb-100));
  --oj-core-danger-2: rgb(var(--oj-palette-danger-rgb-110));
  --oj-core-danger-3: rgb(var(--oj-palette-danger-rgb-120));
  --oj-core-danger-contrast: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-danger-secondary-1: rgb(var(--oj-palette-danger-rgb-30));
  --oj-core-danger-secondary-2: rgb(var(--oj-palette-danger-rgb-20));
  --oj-core-danger-secondary-3: rgb(var(--oj-palette-danger-rgb-10));
  --oj-core-danger-secondary-contrast: rgb(var(--oj-palette-danger-rgb-120));
  --oj-core-warning-1: rgb(var(--oj-palette-warning-rgb-100));
  --oj-core-warning-2: rgb(var(--oj-palette-warning-rgb-110));
  --oj-core-warning-3: rgb(var(--oj-palette-warning-rgb-120));
  --oj-core-warning-contrast: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-warning-secondary-1: rgb(var(--oj-palette-warning-rgb-30));
  --oj-core-warning-secondary-2: rgb(var(--oj-palette-warning-rgb-20));
  --oj-core-warning-secondary-3: rgb(var(--oj-palette-warning-rgb-10));
  --oj-core-warning-secondary-contrast: rgb(var(--oj-palette-warning-rgb-120));
  --oj-core-success-1: rgb(var(--oj-palette-success-rgb-100));
  --oj-core-success-2: rgb(var(--oj-palette-success-rgb-110));
  --oj-core-success-3: rgb(var(--oj-palette-success-rgb-120));
  --oj-core-success-contrast: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-success-secondary-1: rgb(var(--oj-palette-success-rgb-30));
  --oj-core-success-secondary-2: rgb(var(--oj-palette-success-rgb-20));
  --oj-core-success-secondary-3: rgb(var(--oj-palette-success-rgb-10));
  --oj-core-success-secondary-contrast: rgb(var(--oj-palette-success-rgb-120));
  --oj-core-info-1: rgb(var(--oj-palette-info-rgb-100));
  --oj-core-info-2: rgb(var(--oj-palette-info-rgb-110));
  --oj-core-info-3: rgb(var(--oj-palette-info-rgb-120));
  --oj-core-info-contrast: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-info-secondary-1: rgb(var(--oj-palette-info-rgb-30));
  --oj-core-info-secondary-2: rgb(var(--oj-palette-info-rgb-20));
  --oj-core-info-secondary-3: rgb(var(--oj-palette-info-rgb-10));
  --oj-core-info-secondary-contrast: rgb(var(--oj-palette-info-rgb-120));
  --oj-core-focus-border-color: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-core-cursor-clickable: pointer;
  --oj-core-drag-drop-color-1: rgb(var(--oj-palette-brand-rgb-40));
  --oj-core-drag-drop-color-2: rgb(var(--oj-palette-brand-rgb-100));
  --oj-core-drag-drop-line-color: rgb(var(--oj-palette-brand-rgb-100));
  --oj-core-touch-target-min-size: 2.25rem;
  --oj-core-box-shadow-rgb: var(--oj-palette-neutral-rgb-200);
  --oj-core-box-shadow-xs: 0px 1px 4px 0px rgba(var(--oj-core-box-shadow-rgb), 0.12);
  --oj-core-box-shadow-sm: 0px 4px 8px 0px rgba(var(--oj-core-box-shadow-rgb), 0.16);
  --oj-core-box-shadow-md: 0px 6px 12px 0px rgba(var(--oj-core-box-shadow-rgb), 0.2);
  --oj-core-box-shadow-lg: 0px 8px 16px 0px rgba(var(--oj-core-box-shadow-rgb), 0.24);
  --oj-core-box-shadow-xl: 0px 12px 20px 0px rgba(var(--oj-core-box-shadow-rgb), 0.28);
  --oj-core-dropdown-box-shadow: var(--oj-core-box-shadow-sm);
  --oj-private-core-global-dropdown-offset: 4;
  --oj-core-scrim-color: rgba(var(--oj-palette-neutral-rgb-190), 0.4);
  --oj-core-spacing-1x: 0.25rem;
  --oj-core-spacing-2x: 0.5rem;
  --oj-core-spacing-3x: 0.75rem;
  --oj-core-spacing-4x: 1rem;
  --oj-core-spacing-5x: 1.25rem;
  --oj-core-spacing-6x: 1.5rem;
  --oj-core-spacing-7x: 1.75rem;
  --oj-core-spacing-8x: 2rem;
  --oj-core-spacing-9x: 2.25rem;
  --oj-core-spacing-10x: 2.5rem;
  --oj-core-spacing-11x: 2.75rem;
  --oj-core-spacing-12x: 3rem;
  --oj-private-core-wrappable-margin-bottom: 0px;
  --oj-core-border-radius-sm: 2px;
  --oj-core-border-radius-md: 0.25rem;
  --oj-core-border-radius-lg: 0.375rem;
  --oj-core-border-radius-xl: 0.5rem;
  --oj-private-core-z-index-fixed: 100;
  --oj-private-core-z-index-off-canvas: 200;
  --oj-private-core-z-index-resizable: 900;
  --oj-core-z-index-popup: 1000;
  --oj-core-z-index-dialog: 1050;
  --oj-core-z-index-messages: 2000;
  --oj-private-core-global-loading-indicator-delay-duration: 0.05s;
}

:root {
  --oj-animation-duration-xshort: 0.1s;
  --oj-animation-duration-short: 0.15s;
  --oj-animation-duration-medium: 0.2s;
  --oj-animation-duration-long: 0.3s;
  --oj-animation-duration-xlong: 0.5s;
  --oj-animation-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --oj-animation-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --oj-animation-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --oj-animation-effect-ripple-bg-color: rgb(var(--oj-palette-neutral-rgb-160));
  --oj-animation-skeleton-bg-start-color: rgba(var(--oj-palette-neutral-rgb-170), 0.05);
  --oj-animation-skeleton-bg-end-color: rgba(var(--oj-palette-neutral-rgb-170), 0.15);
  --oj-private-animation-global-card-entrance-delay-increment: 50;
}

/* core                       */
/* -------------------------- */
.oj-contrast-marker,
.oj-color-invert {
  --oj-core-text-color-primary: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-text-color-secondary: rgba(var(--oj-palette-neutral-rgb-0), 0.6);
  --oj-core-text-color-disabled: rgba(var(--oj-palette-neutral-rgb-0), 0.3);
  --oj-core-bg-color-content: rgb(var(--oj-palette-neutral-rgb-170));
  --oj-core-bg-color-hover: rgba(var(--oj-palette-neutral-rgb-0), 0.08);
  --oj-core-bg-color-active: rgba(var(--oj-palette-neutral-rgb-0), 0.12);
  --oj-core-divider-color: rgba(var(--oj-palette-neutral-rgb-0), 0.3);
  --oj-core-text-color-danger: rgb(var(--oj-palette-danger-rgb-70));
  --oj-core-text-color-warning: rgb(var(--oj-palette-warning-rgb-70));
  --oj-core-text-color-success: rgb(var(--oj-palette-success-rgb-70));
  --oj-core-brand-1: rgb(var(--oj-palette-brand-rgb-50));
  --oj-core-brand-2: rgb(var(--oj-palette-brand-rgb-60));
  --oj-core-brand-3: rgb(var(--oj-palette-brand-rgb-70));
  --oj-core-brand-contrast: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-core-neutral-1: rgb(var(--oj-palette-neutral-rgb-100));
  --oj-core-neutral-2: rgb(var(--oj-palette-neutral-rgb-90));
  --oj-core-neutral-3: rgb(var(--oj-palette-neutral-rgb-70));
  --oj-core-neutral-contrast: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-neutral-secondary-1: rgb(var(--oj-palette-neutral-rgb-140));
  --oj-core-neutral-secondary-2: rgb(var(--oj-palette-neutral-rgb-150));
  --oj-core-neutral-secondary-3: rgb(var(--oj-palette-neutral-rgb-160));
  --oj-core-neutral-secondary-contrast: rgb(var(--oj-palette-neutral-rgb-40));
  --oj-core-success-1: rgb(var(--oj-palette-success-rgb-100));
  --oj-core-success-2: rgb(var(--oj-palette-success-rgb-90));
  --oj-core-success-3: rgb(var(--oj-palette-success-rgb-70));
  --oj-core-success-contrast: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-success-secondary-1: rgb(var(--oj-palette-success-rgb-140));
  --oj-core-success-secondary-2: rgb(var(--oj-palette-success-rgb-150));
  --oj-core-success-secondary-3: rgb(var(--oj-palette-success-rgb-160));
  --oj-core-success-secondary-contrast: rgb(var(--oj-palette-success-rgb-40));
  --oj-core-warning-1: rgb(var(--oj-palette-warning-rgb-100));
  --oj-core-warning-2: rgb(var(--oj-palette-warning-rgb-90));
  --oj-core-warning-3: rgb(var(--oj-palette-warning-rgb-70));
  --oj-core-warning-contrast: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-warning-secondary-1: rgb(var(--oj-palette-warning-rgb-140));
  --oj-core-warning-secondary-2: rgb(var(--oj-palette-warning-rgb-150));
  --oj-core-warning-secondary-3: rgb(var(--oj-palette-warning-rgb-160));
  --oj-core-warning-secondary-contrast: rgb(var(--oj-palette-warning-rgb-40));
  --oj-core-danger-1: rgb(var(--oj-palette-danger-rgb-100));
  --oj-core-danger-2: rgb(var(--oj-palette-danger-rgb-90));
  --oj-core-danger-3: rgb(var(--oj-palette-danger-rgb-70));
  --oj-core-danger-contrast: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-danger-secondary-1: rgb(var(--oj-palette-danger-rgb-140));
  --oj-core-danger-secondary-2: rgb(var(--oj-palette-danger-rgb-150));
  --oj-core-danger-secondary-3: rgb(var(--oj-palette-danger-rgb-160));
  --oj-core-danger-secondary-contrast: rgb(var(--oj-palette-danger-rgb-40));
  --oj-core-info-1: rgb(var(--oj-palette-info-rgb-100));
  --oj-core-info-2: rgb(var(--oj-palette-info-rgb-90));
  --oj-core-info-3: rgb(var(--oj-palette-info-rgb-70));
  --oj-core-info-contrast: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-info-secondary-1: rgb(var(--oj-palette-info-rgb-140));
  --oj-core-info-secondary-2: rgb(var(--oj-palette-info-rgb-150));
  --oj-core-info-secondary-3: rgb(var(--oj-palette-info-rgb-160));
  --oj-core-info-secondary-contrast: rgb(var(--oj-palette-info-rgb-40));
  --oj-core-box-shadow-rgb: var(--oj-palette-neutral-rgb-200);
  --oj-core-box-shadow-xs: 0px 1px 4px 0px rgba(var(--oj-core-box-shadow-rgb), 0.12);
  --oj-core-box-shadow-sm: 0px 4px 8px 0px rgba(var(--oj-core-box-shadow-rgb), 0.16);
  --oj-core-box-shadow-md: 0px 6px 12px 0px rgba(var(--oj-core-box-shadow-rgb), 0.2);
  --oj-core-box-shadow-lg: 0px 8px 16px 0px rgba(var(--oj-core-box-shadow-rgb), 0.24);
  --oj-core-box-shadow-xl: 0px 12px 20px 0px rgba(var(--oj-core-box-shadow-rgb), 0.28);
  --oj-core-focus-border-color: rgb(var(--oj-palette-neutral-rgb-0));
}

:root.oj-scale-sm {
  --oj-core-icon-size-lg: 1.3333rem;
}

:root.oj-scale-md {
  --oj-core-icon-size-lg: 1.4286rem;
}

:root {
  --oj-html-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --oj-html-font-size: 1em;
  --oj-body-bg-color: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-current-bg-color: ;
  --oj-heading-text-color: var(--oj-core-text-color-primary);
  --oj-heading-margin-bottom: 1rem;
  --oj-heading-margin-top: 1rem;
  --oj-subheading-margin-top: 0;
  --oj-subheading-margin-bottom: 0.75rem;
  --oj-paragraph-margin-bottom: 1rem;
  --oj-list-margin-top: 0.5rem;
  --oj-list-nested-padding-start: 2.5rem;
  --oj-list-item-line-height: 1.5;
  --oj-list-unordered-style-type: square;
  --oj-link-text-decoration: none;
  --oj-link-text-decoration-hover: underline;
  --oj-link-text-color: rgb(var(--oj-palette-info-rgb-120));
  --oj-link-text-color-active: var(--oj-link-text-color);
  --oj-link-text-color-visited: var(--oj-link-text-color);
  --oj-link-embedded-text-decoration: none;
  --oj-link-embedded-text-decoration-hover: none;
  --oj-link-embedded-border-bottom-width: 1px;
  --oj-link-embedded-border-bottom-width-hover: 0px;
}

/* helpers
  ----------------------------------*/
[data-bind*=ojComponent]:not(.oj-component-initnode) {
  visibility: hidden;
}

.oj-theme-json {
  font-family: '{"name":"redwood","targetPlatform":"all","behavior":"redwood","jetReleaseVersion":"v12.0.0"}' !important;
}

.oj-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.oj-helper-clearfix:before,
.oj-helper-clearfix:after {
  content: " ";
  display: table;
}

.oj-helper-clearfix:after {
  clear: both;
}

/* Used by the framework's support for detecting resize */
.oj-helper-detect-expansion,
.oj-helper-detect-contraction {
  position: absolute;
  overflow: hidden;
  visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  direction: ltr;
}

.oj-helper-hidden {
  display: none !important;
}

.oj-helper-inline-block {
  display: inline-block !important;
}

.oj-helper-tabular-nums {
  font-variant-numeric: tabular-nums !important;
}

.oj-helper-proportional-nums {
  font-variant-numeric: proportional-nums !important;
}

.oj-helper-overflow-wrap-anywhere {
  overflow-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}

.oj-helper-hyphens-auto {
  -webkit-hyphens: auto !important;
  hyphens: auto !important;
}

/* aligns text left by default, aligns right when dir="rtl" is set on html element
     NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-text-align-start {
  text-align: left !important;
}

html[dir=rtl] .oj-helper-text-align-start {
  text-align: right !important;
}

.oj-helper-text-align-center {
  text-align: center !important;
}

/* aligns text right by default, aligns left when dir="rtl" is set on html element
     NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-text-align-end {
  text-align: right !important;
}

html[dir=rtl] .oj-helper-text-align-end {
  text-align: left !important;
}

/* Sets the start margin, equivalent to setting
     margin-left: auto in ltr languages and margin-right: auto in rtl languages */
html:not([dir=rtl]) .oj-helper-margin-start-auto {
  margin-left: auto !important;
}

html[dir=rtl] .oj-helper-margin-start-auto {
  margin-right: auto !important;
}

/* Sets the left and right margins to auto */
.oj-helper-margin-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Sets the end margin, equivalent to setting
     margin-right: auto in ltr languages and margin-left: auto in rtl languages */
html:not([dir=rtl]) .oj-helper-margin-end-auto {
  margin-right: auto !important;
}

html[dir=rtl] .oj-helper-margin-end-auto {
  margin-left: auto !important;
}

/* aligns text right
     NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-text-align-right {
  text-align: right !important;
}

/* aligns text left
     NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-text-align-left {
  text-align: left !important;
}

/* Used by the ojModule binding on a DIV that will hold cached Views */
.oj-helper-module-cache {
  position: absolute;
  display: none;
}

.oj-focus-config {
  font-family: '{"focusHighlightPolicy":"nonPointer"}' !important;
}

/* justifies flex content start
     NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-justify-content-flex-start {
  justify-content: flex-start !important;
}

/* justifies flex content end
     NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-justify-content-flex-end {
  justify-content: flex-end !important;
}

/* justifies flex content center
     NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-justify-content-center {
  justify-content: center !important;
}

/* justifies flex content space between
     NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-justify-content-space-between {
  justify-content: space-between !important;
}

/* justifies flex content space around
     NOTE: this uses !important, it can therefore be used to override a previously set value */
.oj-helper-justify-content-space-around {
  justify-content: space-around !important;
}

/* justifies flex content right
     NOTE: this uses !important, it can therefore be used to override a previously set value */
html:not([dir=rtl]) .oj-helper-justify-content-right {
  justify-content: flex-end !important;
}

html[dir=rtl] .oj-helper-justify-content-right {
  justify-content: flex-start !important;
}

/* justifies flex content left
     NOTE: this uses !important, it can therefore be used to override a previously set value */
html:not([dir=rtl]) .oj-helper-justify-content-left {
  justify-content: flex-start !important;
}

html[dir=rtl] .oj-helper-justify-content-left {
  justify-content: flex-end !important;
}

.oj-helper-border-box {
  box-sizing: border-box !important;
}

.oj-helper-content-box {
  box-sizing: border-content !important;
}

.oj-helper-white-space-normal {
  white-space: normal !important;
}

.oj-helper-white-space-nowrap {
  white-space: nowrap !important;
}

.oj-helper-white-space-pre {
  white-space: pre !important;
}

.oj-helper-white-space-pre-wrap {
  white-space: pre-wrap !important;
}

.oj-helper-white-space-pre-line {
  white-space: pre-line !important;
}

.oj-text-color-primary,
.oj-text-primary-color,
.oj-icon-color-primary {
  color: var(--oj-core-text-color-primary) !important;
}

.oj-text-tertiary-color,
.oj-text-color-secondary,
.oj-text-secondary-color,
.oj-icon-color-secondary {
  color: var(--oj-core-text-color-secondary) !important;
}

.oj-text-color-disabled,
.oj-text-disabled-color,
.oj-icon-color-disabled {
  color: var(--oj-core-text-color-disabled) !important;
}

.oj-text-color-danger,
.oj-icon-color-danger {
  color: var(--oj-core-danger-3) !important;
}

.oj-text-color-warning,
.oj-icon-color-warning {
  color: var(--oj-core-warning-3) !important;
}

.oj-text-color-success,
.oj-icon-color-success {
  color: var(--oj-core-success-3) !important;
}

.oj-icon-color-info {
  color: var(--oj-core-info-3) !important;
}

.oj-border {
  border: 1px solid var(--oj-core-divider-color) !important;
}

.oj-divider-top,
.oj-border-top {
  border-top: 1px solid var(--oj-core-divider-color) !important;
}

.oj-divider-top.oj-divider-padding {
  padding-top: var(--oj-core-divider-margin) !important;
}

.oj-divider-top.oj-divider-margin {
  margin-top: var(--oj-core-divider-margin) !important;
}

.oj-divider-bottom,
.oj-border-bottom {
  border-bottom: 1px solid var(--oj-core-divider-color) !important;
}

.oj-divider-bottom.oj-divider-padding {
  padding-bottom: var(--oj-core-divider-margin) !important;
}

.oj-divider-bottom.oj-divider-margin {
  margin-bottom: var(--oj-core-divider-margin) !important;
}

html:not([dir=rtl]) .oj-divider-start,
html:not([dir=rtl]) .oj-border-start {
  border-left: 1px solid var(--oj-core-divider-color) !important;
}

html[dir=rtl] .oj-divider-start,
html[dir=rtl] .oj-border-start {
  border-right: 1px solid var(--oj-core-divider-color) !important;
}

html:not([dir=rtl]) .oj-divider-start.oj-divider-padding {
  padding-left: var(--oj-core-divider-margin) !important;
}

html[dir=rtl] .oj-divider-start.oj-divider-padding {
  padding-right: var(--oj-core-divider-margin) !important;
}

html:not([dir=rtl]) .oj-divider-start.oj-divider-margin {
  margin-left: var(--oj-core-divider-margin) !important;
  margin-right: 0 !important;
}

html[dir=rtl] .oj-divider-start.oj-divider-margin {
  margin-right: var(--oj-core-divider-margin) !important;
  margin-left: 0 !important;
}

html:not([dir=rtl]) .oj-divider-end,
html:not([dir=rtl]) .oj-border-end {
  border-right: 1px solid var(--oj-core-divider-color) !important;
}

html[dir=rtl] .oj-divider-end,
html[dir=rtl] .oj-border-end {
  border-left: 1px solid var(--oj-core-divider-color) !important;
}

html:not([dir=rtl]) .oj-divider-end.oj-divider-padding {
  padding-right: var(--oj-core-divider-margin) !important;
}

html[dir=rtl] .oj-divider-end.oj-divider-padding {
  padding-left: var(--oj-core-divider-margin) !important;
}

html:not([dir=rtl]) .oj-divider-end.oj-divider-margin {
  margin-right: var(--oj-core-divider-margin) !important;
}

html[dir=rtl] .oj-divider-end.oj-divider-margin {
  margin-left: var(--oj-core-divider-margin) !important;
}

.oj-bg-body {
  background-color: var(--oj-body-bg-color) !important;
}

.oj-bg-neutral-0 {
  background-color: RGB(var(--oj-palette-neutral-rgb-0)) !important;
}

.oj-bg-neutral-10 {
  background-color: RGB(var(--oj-palette-neutral-rgb-10)) !important;
}

.oj-bg-neutral-20 {
  background-color: RGB(var(--oj-palette-neutral-rgb-20)) !important;
}

.oj-bg-neutral-30 {
  background-color: RGB(var(--oj-palette-neutral-rgb-30)) !important;
}

.oj-bg-neutral-170 {
  background-color: RGB(var(--oj-palette-neutral-rgb-170)) !important;
}

.oj-bg-neutral-180 {
  background-color: RGB(var(--oj-palette-neutral-rgb-180)) !important;
}

.oj-bg-neutral-190 {
  background-color: RGB(var(--oj-palette-neutral-rgb-190)) !important;
}

.oj-bg-neutral-200 {
  background-color: RGB(var(--oj-palette-neutral-rgb-200)) !important;
}

.oj-bg-danger-10 {
  background-color: RGB(var(--oj-palette-danger-rgb-10)) !important;
}

.oj-bg-danger-30 {
  background-color: RGB(var(--oj-palette-danger-rgb-30)) !important;
}

.oj-bg-danger-20 {
  background-color: RGB(var(--oj-palette-danger-rgb-20)) !important;
}

.oj-bg-warning-10 {
  background-color: RGB(var(--oj-palette-warning-rgb-10)) !important;
}

.oj-bg-warning-30 {
  background-color: RGB(var(--oj-palette-warning-rgb-30)) !important;
}

.oj-bg-warning-20 {
  background-color: RGB(var(--oj-palette-warning-rgb-20)) !important;
}

.oj-bg-success-10 {
  background-color: RGB(var(--oj-palette-success-rgb-10)) !important;
}

.oj-bg-success-30 {
  background-color: RGB(var(--oj-palette-success-rgb-30)) !important;
}

.oj-bg-success-20 {
  background-color: RGB(var(--oj-palette-success-rgb-20)) !important;
}

.oj-bg-info-10 {
  background-color: RGB(var(--oj-palette-info-rgb-10)) !important;
}

.oj-bg-info-20 {
  background-color: RGB(var(--oj-palette-info-rgb-20)) !important;
}

.oj-bg-info-30 {
  background-color: RGB(var(--oj-palette-info-rgb-30)) !important;
}

.oj-bg-brand-10 {
  background-color: RGB(var(--oj-palette-brand-rgb-10)) !important;
}

.oj-bg-brand-20 {
  background-color: RGB(var(--oj-palette-brand-rgb-20)) !important;
}

.oj-bg-brand-30 {
  background-color: RGB(var(--oj-palette-brand-rgb-30)) !important;
}

.oj-line-clamp-1,
.oj-line-clamp-2,
.oj-line-clamp-3,
.oj-line-clamp-4 {
  display: -webkit-box !important;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.oj-line-clamp-1 {
  -webkit-line-clamp: 1 !important;
}

.oj-line-clamp-2 {
  -webkit-line-clamp: 2 !important;
}

.oj-line-clamp-3 {
  -webkit-line-clamp: 3 !important;
}

.oj-line-clamp-4 {
  -webkit-line-clamp: 4 !important;
}

.oj-bg-body {
  --oj-current-bg-color: var(--oj-body-bg-color);
}

.oj-bg-neutral-0 {
  --oj-current-bg-color: RGB(var(--oj-palette-neutral-rgb-0));
}

.oj-bg-neutral-10 {
  --oj-current-bg-color: RGB(var(--oj-palette-neutral-rgb-10));
}

.oj-bg-neutral-20 {
  --oj-current-bg-color: RGB(var(--oj-palette-neutral-rgb-20));
}

.oj-bg-neutral-30 {
  --oj-current-bg-color: RGB(var(--oj-palette-neutral-rgb-30));
}

.oj-bg-neutral-170 {
  --oj-current-bg-color: RGB(var(--oj-palette-neutral-rgb-170));
}

.oj-bg-neutral-180 {
  --oj-current-bg-color: RGB(var(--oj-palette-neutral-rgb-180));
}

.oj-bg-neutral-190 {
  --oj-current-bg-color: RGB(var(--oj-palette-neutral-rgb-190));
}

.oj-bg-neutral-200 {
  --oj-current-bg-color: RGB(var(--oj-palette-neutral-rgb-200));
}

.oj-bg-danger-10 {
  --oj-current-bg-color: RGB(var(--oj-palette-danger-rgb-10));
}

.oj-bg-danger-30 {
  --oj-current-bg-color: RGB(var(--oj-palette-danger-rgb-30));
}

.oj-bg-danger-20 {
  --oj-current-bg-color: RGB(var(--oj-palette-danger-rgb-20));
}

.oj-bg-warning-10 {
  --oj-current-bg-color: RGB(var(--oj-palette-warning-rgb-10));
}

.oj-bg-warning-30 {
  --oj-current-bg-color: RGB(var(--oj-palette-warning-rgb-30));
}

.oj-bg-warning-20 {
  --oj-current-bg-color: RGB(var(--oj-palette-warning-rgb-20));
}

.oj-bg-success-10 {
  --oj-current-bg-color: RGB(var(--oj-palette-success-rgb-10));
}

.oj-bg-success-30 {
  --oj-current-bg-color: RGB(var(--oj-palette-success-rgb-30));
}

.oj-bg-success-20 {
  --oj-current-bg-color: RGB(var(--oj-palette-success-rgb-20));
}

.oj-bg-info-10 {
  --oj-current-bg-color: RGB(var(--oj-palette-info-rgb-10));
}

.oj-bg-info-20 {
  --oj-current-bg-color: RGB(var(--oj-palette-info-rgb-20));
}

.oj-bg-info-30 {
  --oj-current-bg-color: RGB(var(--oj-palette-info-rgb-30));
}

.oj-bg-brand-10 {
  --oj-current-bg-color: RGB(var(--oj-palette-brand-rgb-10));
}

.oj-bg-brand-20 {
  --oj-current-bg-color: RGB(var(--oj-palette-brand-rgb-20));
}

.oj-bg-brand-30 {
  --oj-current-bg-color: RGB(var(--oj-palette-brand-rgb-30));
}

:root {
  --oj-typography-heading-2xl-font-size: 2.5rem;
  --oj-typography-heading-2xl-font-weight: 900;
  --oj-typography-heading-2xl-line-height: 1.3;
  --oj-typography-heading-xl-font-size: 2.25rem;
  --oj-typography-heading-xl-font-weight: 900;
  --oj-typography-heading-xl-line-height: 1.222;
  --oj-typography-heading-lg-font-size: 2rem;
  --oj-typography-heading-lg-font-weight: 900;
  --oj-typography-heading-lg-line-height: 1.25;
  --oj-typography-heading-md-font-size: 1.75rem;
  --oj-typography-heading-md-font-weight: 900;
  --oj-typography-heading-md-line-height: 1.2857;
  --oj-typography-heading-sm-font-size: 1.5rem;
  --oj-typography-heading-sm-font-weight: 900;
  --oj-typography-heading-sm-line-height: 1.3333;
  --oj-typography-heading-xs-font-size: 1.25rem;
  --oj-typography-heading-xs-font-weight: 900;
  --oj-typography-heading-xs-line-height: 1.4;
  --oj-typography-subheading-2xl-font-size: 2.25rem;
  --oj-typography-subheading-2xl-font-weight: bold;
  --oj-typography-subheading-2xl-line-height: 1.2222;
  --oj-typography-subheading-xl-font-size: 2rem;
  --oj-typography-subheading-xl-font-weight: bold;
  --oj-typography-subheading-xl-line-height: 1.25;
  --oj-typography-subheading-lg-font-size: 1.75rem;
  --oj-typography-subheading-lg-font-weight: bold;
  --oj-typography-subheading-lg-line-height: 1.2857;
  --oj-typography-subheading-md-font-size: 1.5rem;
  --oj-typography-subheading-md-font-weight: bold;
  --oj-typography-subheading-md-line-height: 1.3333;
  --oj-typography-subheading-sm-font-size: 1.25rem;
  --oj-typography-subheading-sm-font-weight: bold;
  --oj-typography-subheading-sm-line-height: 1.4;
  --oj-typography-subheading-xs-font-size: 1rem;
  --oj-typography-subheading-xs-font-weight: bold;
  --oj-typography-subheading-xs-line-height: 1.5;
  --oj-typography-body-xl-font-size: 1.25rem;
  --oj-typography-body-xl-line-height: 1.4;
  --oj-typography-body-lg-font-size: 1.125rem;
  --oj-typography-body-lg-line-height: 1.3333;
  --oj-typography-body-md-font-size: 1rem;
  --oj-typography-body-md-line-height: 1.25;
  --oj-typography-body-sm-font-size: 0.859rem;
  --oj-typography-body-sm-line-height: 1.2;
  --oj-typography-body-xs-font-size: 0.75rem;
  --oj-typography-body-xs-line-height: 1.3333;
  --oj-typography-body-2xs-font-size: 0.625rem;
  --oj-typography-body-2xs-line-height: 1.2;
}

/* html */
/* --------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  font-family: var(--oj-html-font-family);
  font-size: var(--oj-html-font-size);
}

/* body */
/* --------------------------------------------------------------- */
body {
  margin: 0;
  background-repeat: repeat;
  background-position: top left;
  color: var(--oj-core-text-color-primary);
  background-color: var(--oj-body-bg-color);
  touch-action: manipulation;
  line-height: var(--oj-typography-body-md-line-height);
}

a {
  color: var(--oj-link-text-color);
  line-height: inherit;
  -webkit-text-decoration: var(--oj-link-text-decoration);
  text-decoration: var(--oj-link-text-decoration);
}

a:not(.oj-disabled) {
  cursor: var(--oj-core-cursor-clickable);
}

a:visited {
  color: var(--oj-link-text-color-visited);
}

a:active {
  color: var(--oj-link-text-color-active);
}

a:hover {
  -webkit-text-decoration: var(--oj-link-text-decoration-hover);
  text-decoration: var(--oj-link-text-decoration-hover);
  transition: -webkit-text-decoration var(--oj-animation-duration-long);
  transition: text-decoration var(--oj-animation-duration-long);
  transition: text-decoration var(--oj-animation-duration-long), -webkit-text-decoration var(--oj-animation-duration-long);
}

a.oj-link-embedded:not(.oj-disabled),
a.oj-link-embedded:visited:not(.oj-disabled) {
  -webkit-text-decoration: var(--oj-link-embedded-text-decoration);
  text-decoration: var(--oj-link-embedded-text-decoration);
  box-shadow: 0px calc(0px - var(--oj-link-embedded-border-bottom-width)) 0px 0px inset;
  transition: box-shadow var(--oj-animation-duration-long), -webkit-text-decoration var(--oj-animation-duration-long);
  transition: text-decoration var(--oj-animation-duration-long), box-shadow var(--oj-animation-duration-long);
  transition: text-decoration var(--oj-animation-duration-long), box-shadow var(--oj-animation-duration-long), -webkit-text-decoration var(--oj-animation-duration-long);
}

a.oj-link-embedded:hover:not(.oj-disabled),
a.oj-link-embedded:active:not(.oj-disabled) {
  -webkit-text-decoration: var(--oj-link-embedded-text-decoration-hover);
  text-decoration: var(--oj-link-embedded-text-decoration-hover);
  box-shadow: 0px calc(0px - var(--oj-link-embedded-border-bottom-width-hover)) 0px 0px inset;
  transition: box-shadow var(--oj-animation-duration-long), -webkit-text-decoration var(--oj-animation-duration-long);
  transition: text-decoration var(--oj-animation-duration-long), box-shadow var(--oj-animation-duration-long);
  transition: text-decoration var(--oj-animation-duration-long), box-shadow var(--oj-animation-duration-long), -webkit-text-decoration var(--oj-animation-duration-long);
}

a.oj-link-standalone:not(.oj-disabled),
a.oj-link-standalone:visited:not(.oj-disabled) {
  text-decoration: none;
}

a.oj-link-standalone:hover:not(.oj-disabled),
a.oj-link-standalone:active:not(.oj-disabled) {
  box-shadow: 0px 1px 0px 0px;
  transition: box-shadow var(--oj-animation-duration-long);
}

a.oj-link-subtle-primary,
a.oj-link-subtle-primary:visited {
  color: var(--oj-core-text-color-primary);
}

a.oj-link-subtle-secondary,
a.oj-link-subtle-secondary:visited {
  color: var(--oj-core-text-color-secondary);
}

a.oj-disabled,
a.oj-disabled:visited {
  color: var(--oj-core-text-color-disabled);
  text-decoration: none;
}

/* header */
/* --------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--oj-heading-text-color);
  font-family: inherit;
  font-style: normal;
  padding: 0;
  margin-top: var(--oj-heading-margin-top);
  margin-bottom: var(--oj-heading-margin-bottom);
}

h1.oj-typography-subheading-2xl,
h1.oj-typography-subheading-xl,
h1.oj-typography-subheading-lg,
h1.oj-typography-subheading-md,
h1.oj-typography-subheading-sm,
h1.oj-typography-subheading-xs {
  margin-top: var(--oj-subheading-margin-top);
  margin-bottom: var(--oj-subheading-margin-bottom);
}

h2.oj-typography-subheading-2xl,
h2.oj-typography-subheading-xl,
h2.oj-typography-subheading-lg,
h2.oj-typography-subheading-md,
h2.oj-typography-subheading-sm,
h2.oj-typography-subheading-xs {
  margin-top: var(--oj-subheading-margin-top);
  margin-bottom: var(--oj-subheading-margin-bottom);
}

h3.oj-typography-subheading-2xl,
h3.oj-typography-subheading-xl,
h3.oj-typography-subheading-lg,
h3.oj-typography-subheading-md,
h3.oj-typography-subheading-sm,
h3.oj-typography-subheading-xs {
  margin-top: var(--oj-subheading-margin-top);
  margin-bottom: var(--oj-subheading-margin-bottom);
}

h4.oj-typography-subheading-2xl,
h4.oj-typography-subheading-xl,
h4.oj-typography-subheading-lg,
h4.oj-typography-subheading-md,
h4.oj-typography-subheading-sm,
h4.oj-typography-subheading-xs {
  margin-top: var(--oj-subheading-margin-top);
  margin-bottom: var(--oj-subheading-margin-bottom);
}

h5.oj-typography-subheading-2xl,
h5.oj-typography-subheading-xl,
h5.oj-typography-subheading-lg,
h5.oj-typography-subheading-md,
h5.oj-typography-subheading-sm,
h5.oj-typography-subheading-xs {
  margin-top: var(--oj-subheading-margin-top);
  margin-bottom: var(--oj-subheading-margin-bottom);
}

h6.oj-typography-subheading-2xl,
h6.oj-typography-subheading-xl,
h6.oj-typography-subheading-lg,
h6.oj-typography-subheading-md,
h6.oj-typography-subheading-sm,
h6.oj-typography-subheading-xs {
  margin-top: var(--oj-subheading-margin-top);
  margin-bottom: var(--oj-subheading-margin-bottom);
}

h1 {
  font-size: var(--oj-typography-heading-2xl-font-size);
  font-weight: var(--oj-typography-heading-2xl-font-weight);
  line-height: var(--oj-typography-heading-2xl-line-height);
}

h2 {
  font-size: var(--oj-typography-heading-xl-font-size);
  font-weight: var(--oj-typography-heading-xl-font-weight);
  line-height: var(--oj-typography-heading-xl-line-height);
}

h3 {
  font-size: var(--oj-typography-heading-lg-font-size);
  font-weight: var(--oj-typography-heading-lg-font-weight);
  line-height: var(--oj-typography-heading-lg-line-height);
}

h4 {
  font-size: var(--oj-typography-heading-md-font-size);
  font-weight: var(--oj-typography-heading-md-font-weight);
  line-height: var(--oj-typography-heading-md-line-height);
}

h5 {
  font-size: var(--oj-typography-heading-sm-font-size);
  font-weight: var(--oj-typography-heading-sm-font-weight);
  line-height: var(--oj-typography-heading-sm-line-height);
}

h6 {
  font-size: var(--oj-typography-heading-xs-font-size);
  font-weight: var(--oj-typography-heading-xs-font-weight);
  line-height: var(--oj-typography-heading-xs-line-height);
}

/* hr */
/* --------------------------------------------------------------- */
hr {
  border: solid var(--oj-core-divider-color);
  border-width: 1px 0 0;
  margin: var(--oj-core-divider-margin) 0;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/* p */
/* --------------------------------------------------------------- */
p {
  margin: 0 0 var(--oj-paragraph-margin-bottom) 0;
}

.oj-header-border {
  border: solid var(--oj-core-divider-color);
  border-width: 0 0 1px;
  padding: 0 0 7px;
}

/* lists */
/* --------------------------------------------------------------- */
ul,
ol {
  margin: var(--oj-list-margin-top) 0;
  padding: 0 40px;
}

ul {
  list-style: var(--oj-list-unordered-style-type);
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-bottom: 0;
  margin-top: 0;
  padding: 0 var(--oj-list-nested-padding-start);
}

ul li,
ol li {
  line-height: var(--oj-list-item-line-height);
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 0.875em;
}

/* tags                       */
/* -------------------------- */
.oj-contrast-marker,
.oj-color-invert {
  --oj-link-text-color: rgb(var(--oj-palette-brand-rgb-50));
  --oj-link-text-color-active: var(--oj-link-text-color);
  --oj-link-text-color-visited: var(--oj-link-text-color);
  --oj-heading-text-color: var(--oj-core-text-color-primary);
}

:root.oj-scale-sm {
  --oj-html-font-size: 0.75em;
}

:root.oj-scale-md {
  --oj-html-font-size: 0.875em;
}

body {
  --oj-current-bg-color: var(--oj-body-bg-color);
}

:root {
  --oj-scrollbar-thumb-color-hover: rgba(var(--oj-palette-neutral-rgb-170), 0.15);
  --oj-scrollbar-track-color-force: rgba(var(--oj-palette-neutral-rgb-170), 0.05);
}

.oj-agent-os-windows *,
html.oj-agent-os-windows {
  /* FF 68+ */
  scrollbar-width: thin;
  scrollbar-color: transparent;
}

.oj-agent-os-windows :hover {
  /* FF 68+ */
  scrollbar-color: var(--oj-scrollbar-thumb-color-hover) transparent;
}

.oj-agent-os-windows ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.oj-agent-os-windows ::-webkit-scrollbar-track {
  background-color: transparent;
}

.oj-agent-os-windows ::-webkit-scrollbar-thumb {
  background-color: #d2d3d5;
  border-radius: var(--oj-core-border-radius-md);
}

.oj-agent-os-windows :hover::-webkit-scrollbar-track {
  background-color: rgba(var(--oj-palette-neutral-rgb-170), 0.15);
}

.oj-agent-os-windows :hover::-webkit-scrollbar-thumb {
  background-color: var(--oj-scrollbar-thumb-color-hover);
}

.oj-agent-os-windows ::-webkit-scrollbar-button {
  display: none;
}

.oj-agent-os-windows ::-webkit-scrollbar-corner {
  background-color: transparent;
}

.oj-agent-os-windows .oj-scrollbar-force,
.oj-agent-os-windows body {
  /* FF 68+ */
  scrollbar-color: var(--oj-scrollbar-thumb-color-hover) var(--oj-scrollbar-track-color-force);
}

.oj-agent-os-windows .oj-scrollbar-force::-webkit-scrollbar-track,
.oj-agent-os-windows body::-webkit-scrollbar-track {
  background-color: var(--oj-scrollbar-track-color-force);
}

.oj-agent-os-windows .oj-scrollbar-force::-webkit-scrollbar-thumb,
.oj-agent-os-windows body::-webkit-scrollbar-thumb {
  background-color: var(--oj-scrollbar-thumb-color-hover);
}

.oj-agent-os-windows .oj-scrollbar-force::-webkit-scrollbar-corner,
.oj-agent-os-windows body::-webkit-scrollbar-corner {
  background-color: var(--oj-scrollbar-track-color-force);
}

.oj-agent-os-windows .oj-scrollbar-force:hover::-webkit-scrollbar-thumb {
  background-color: var(--oj-scrollbar-thumb-color-hover);
}

/* scrollbar                  */
/* -------------------------- */
.oj-color-invert {
  --oj-scrollbar-thumb-color-hover: rgba(var(--oj-palette-neutral-rgb-0), 0.3);
  --oj-scrollbar-track-color-force: rgba(var(--oj-palette-neutral-rgb-0), 0.3);
}

/*
     * Viewport element for clipping ojModule view host during animation
     * so that the view content doesn't overlap surrounding elements
     */
.oj-animation-host-viewport {
  overflow: hidden;
}

/*
     * ojModule view host for holding view content temporarily during animation
     */
.oj-animation-host {
  position: relative;
  width: 100%;
  height: 100%;
}

.oj-animation-module-effects {
  font-family: '{"coverLeft":{"oldViewEffect":{"effect":"slideOut","offsetX":"-30%","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"slideIn","direction":"left","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":true},"coverRight":{"oldViewEffect":{"effect":"slideOut","offsetX":"30%","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"slideIn","direction":"right","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":true},"coverUp":{"newViewEffect":{"effect":"slideIn","direction":"top","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":true},"fade":{"oldViewEffect":{"effect":"fadeOut","duration":"0.4s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"fadeIn","duration":"0.4s","timingFunction":"ease-in-out"},"newViewOnTop":false},"pushStart":{"oldViewEffect":{"effect":"slideOut","direction":"start","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"slideIn","direction":"start","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":false},"pushEnd":{"oldViewEffect":{"effect":"slideOut","direction":"end","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"slideIn","direction":"end","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":false},"revealDown":{"oldViewEffect":{"effect":"slideOut","direction":"bottom","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewOnTop":false},"revealLeft":{"oldViewEffect":{"effect":"slideOut","direction":"left","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"slideIn","offsetX":"30%","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":false},"revealRight":{"oldViewEffect":{"effect":"slideOut","direction":"right","duration":"0.25s","timingFunction":"ease-in-out","persist":"all"},"newViewEffect":{"effect":"slideIn","offsetX":"-30%","duration":"0.25s","timingFunction":"ease-in-out"},"newViewOnTop":false},"zoomIn":{"newViewEffect":{"effect":"zoomIn","duration":"0.4s","timingFunction":"ease-in-out"},"newViewOnTop":true},"zoomOut":{"oldViewEffect":{"effect":"zoomOut","duration":"0.4s","timingFunction":"ease-in-out","persist":"all"},"newViewOnTop":false}}' !important;
}

.oj-animation-navigate-methods {
  font-family: '{"navChild":"coverUp","navParent":"revealDown","navSiblingEarlier":"pushEnd","navSiblingLater":"pushStart"}' !important;
}

.oj-animation-effect-default-options {
  font-family: '{"fadeIn":{"duration":"0.4s"},"fadeOut":{"duration":"0.4s"},"expand":{"duration":"0.4s"},"collapse":{"duration":"0.4s"},"zoomIn":{"duration":"0.4s"},"zoomOut":{"duration":"0.4s"},"slideIn":{"duration":"0.4s"},"slideOut":{"duration":"0.4s"},"flipIn":{"duration":"0.4s"},"flipOut":{"duration":"0.4s"},"ripple":{"duration":"0.4s"}}' !important;
}

.oj-animation-effect-ripple {
  background-color: var(--oj-animation-effect-ripple-bg-color);
  opacity: 0.6;
  border-radius: 50%;
  position: absolute;
  width: 140px;
  height: 140px;
  left: 0;
  top: 0;
}

@keyframes LoadingGradientAnimation {
  0% {
    background-position: 50%;
  }
  100% {
    background-position: -120%;
  }
}
@keyframes SkeletonFadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Styling for skeleton fade in animation */
.oj-animation-skeleton-fade-in {
  animation-name: SkeletonFadeInAnimation;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-duration: 0.75s;
}

@keyframes SkeletonFadeOutAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Styling for skeleton fade out animation */
.oj-animation-skeleton-fade-out {
  animation-name: SkeletonFadeOutAnimation;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-duration: 0.1s;
}

@keyframes SkeletonAnimation {
  0% {
    background-color: var(--oj-animation-skeleton-bg-end-color);
  }
  100% {
    background-color: var(--oj-animation-skeleton-bg-start-color);
  }
}
/* Styling for skeleton main (loop) animation */
.oj-animation-skeleton {
  animation-name: SkeletonAnimation;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

@media print, screen {
  .oj-sm-hide {
    display: none !important;
  }
  .oj-sm-margin-0 {
    margin: 0 !important;
  }
  .oj-sm-margin-0-horizontal {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
  .oj-sm-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .oj-sm-margin-0-top {
    margin-top: 0 !important;
  }
  .oj-sm-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  .oj-sm-margin-0-start {
    margin-inline-start: 0 !important;
  }
  .oj-sm-margin-0-end {
    margin-inline-end: 0 !important;
  }
  .oj-sm-padding-0 {
    padding: 0 !important;
  }
  .oj-sm-padding-0-horizontal {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  .oj-sm-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .oj-sm-padding-0-top {
    padding-top: 0 !important;
  }
  .oj-sm-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  .oj-sm-padding-0-start {
    padding-inline-start: 0 !important;
  }
  .oj-sm-padding-0-end {
    padding-inline-end: 0 !important;
  }
  .oj-sm-margin-1x {
    margin: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-margin-1x-horizontal {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-margin-1x-vertical {
    margin-top: var(--oj-core-spacing-1x) !important;
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-margin-1x-top {
    margin-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-margin-1x-bottom {
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-margin-1x-start {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-margin-1x-end {
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-padding-1x {
    padding: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-padding-1x-horizontal {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-padding-1x-vertical {
    padding-top: var(--oj-core-spacing-1x) !important;
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-padding-1x-top {
    padding-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-padding-1x-bottom {
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-padding-1x-start {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-padding-1x-end {
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-margin-2x {
    margin: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-margin-2x-horizontal {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-margin-2x-vertical {
    margin-top: var(--oj-core-spacing-2x) !important;
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-margin-2x-top {
    margin-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-margin-2x-bottom {
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-margin-2x-start {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-margin-2x-end {
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-padding-2x {
    padding: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-padding-2x-horizontal {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-padding-2x-vertical {
    padding-top: var(--oj-core-spacing-2x) !important;
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-padding-2x-top {
    padding-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-padding-2x-bottom {
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-padding-2x-start {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-padding-2x-end {
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-margin-3x {
    margin: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-margin-3x-horizontal {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-margin-3x-vertical {
    margin-top: var(--oj-core-spacing-3x) !important;
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-margin-3x-top {
    margin-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-margin-3x-bottom {
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-margin-3x-start {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-margin-3x-end {
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-padding-3x {
    padding: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-padding-3x-horizontal {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-padding-3x-vertical {
    padding-top: var(--oj-core-spacing-3x) !important;
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-padding-3x-top {
    padding-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-padding-3x-bottom {
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-padding-3x-start {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-padding-3x-end {
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-margin-4x {
    margin: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-margin-4x-horizontal {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-margin-4x-vertical {
    margin-top: var(--oj-core-spacing-4x) !important;
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-margin-4x-top {
    margin-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-margin-4x-bottom {
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-margin-4x-start {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-margin-4x-end {
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-padding-4x {
    padding: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-padding-4x-horizontal {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-padding-4x-vertical {
    padding-top: var(--oj-core-spacing-4x) !important;
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-padding-4x-top {
    padding-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-padding-4x-bottom {
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-padding-4x-start {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-padding-4x-end {
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-margin-5x {
    margin: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-margin-5x-horizontal {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-margin-5x-vertical {
    margin-top: var(--oj-core-spacing-5x) !important;
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-margin-5x-top {
    margin-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-margin-5x-bottom {
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-margin-5x-start {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-margin-5x-end {
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-padding-5x {
    padding: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-padding-5x-horizontal {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-padding-5x-vertical {
    padding-top: var(--oj-core-spacing-5x) !important;
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-padding-5x-top {
    padding-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-padding-5x-bottom {
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-padding-5x-start {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-padding-5x-end {
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-margin-6x {
    margin: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-margin-6x-horizontal {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-margin-6x-vertical {
    margin-top: var(--oj-core-spacing-6x) !important;
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-margin-6x-top {
    margin-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-margin-6x-bottom {
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-margin-6x-start {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-margin-6x-end {
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-padding-6x {
    padding: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-padding-6x-horizontal {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-padding-6x-vertical {
    padding-top: var(--oj-core-spacing-6x) !important;
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-padding-6x-top {
    padding-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-padding-6x-bottom {
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-padding-6x-start {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-padding-6x-end {
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-margin-7x {
    margin: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-margin-7x-horizontal {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-margin-7x-vertical {
    margin-top: var(--oj-core-spacing-7x) !important;
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-margin-7x-top {
    margin-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-margin-7x-bottom {
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-margin-7x-start {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-margin-7x-end {
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-padding-7x {
    padding: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-padding-7x-horizontal {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-padding-7x-vertical {
    padding-top: var(--oj-core-spacing-7x) !important;
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-padding-7x-top {
    padding-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-padding-7x-bottom {
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-padding-7x-start {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-padding-7x-end {
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-margin-8x {
    margin: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-margin-8x-horizontal {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-margin-8x-vertical {
    margin-top: var(--oj-core-spacing-8x) !important;
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-margin-8x-top {
    margin-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-margin-8x-bottom {
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-margin-8x-start {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-margin-8x-end {
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-padding-8x {
    padding: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-padding-8x-horizontal {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-padding-8x-vertical {
    padding-top: var(--oj-core-spacing-8x) !important;
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-padding-8x-top {
    padding-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-padding-8x-bottom {
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-padding-8x-start {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-padding-8x-end {
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-margin-9x {
    margin: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-margin-9x-horizontal {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-margin-9x-vertical {
    margin-top: var(--oj-core-spacing-9x) !important;
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-margin-9x-top {
    margin-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-margin-9x-bottom {
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-margin-9x-start {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-margin-9x-end {
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-padding-9x {
    padding: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-padding-9x-horizontal {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-padding-9x-vertical {
    padding-top: var(--oj-core-spacing-9x) !important;
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-padding-9x-top {
    padding-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-padding-9x-bottom {
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-padding-9x-start {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-padding-9x-end {
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-margin-10x {
    margin: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-margin-10x-horizontal {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-margin-10x-vertical {
    margin-top: var(--oj-core-spacing-10x) !important;
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-margin-10x-top {
    margin-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-margin-10x-bottom {
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-margin-10x-start {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-margin-10x-end {
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-padding-10x {
    padding: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-padding-10x-horizontal {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-padding-10x-vertical {
    padding-top: var(--oj-core-spacing-10x) !important;
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-padding-10x-top {
    padding-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-padding-10x-bottom {
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-padding-10x-start {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-padding-10x-end {
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-margin-11x {
    margin: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-margin-11x-horizontal {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-margin-11x-vertical {
    margin-top: var(--oj-core-spacing-11x) !important;
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-margin-11x-top {
    margin-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-margin-11x-bottom {
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-margin-11x-start {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-margin-11x-end {
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-padding-11x {
    padding: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-padding-11x-horizontal {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-padding-11x-vertical {
    padding-top: var(--oj-core-spacing-11x) !important;
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-padding-11x-top {
    padding-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-padding-11x-bottom {
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-padding-11x-start {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-padding-11x-end {
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-margin-12x {
    margin: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-margin-12x-horizontal {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-margin-12x-vertical {
    margin-top: var(--oj-core-spacing-12x) !important;
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-margin-12x-top {
    margin-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-margin-12x-bottom {
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-margin-12x-start {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-margin-12x-end {
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-padding-12x {
    padding: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-padding-12x-horizontal {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-padding-12x-vertical {
    padding-top: var(--oj-core-spacing-12x) !important;
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-padding-12x-top {
    padding-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-padding-12x-bottom {
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-padding-12x-start {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-padding-12x-end {
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-width-1\/2 {
    width: 50% !important;
  }
  .oj-sm-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-sm-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-sm-width-1\/4 {
    width: 25% !important;
  }
  .oj-sm-width-3\/4 {
    width: 75% !important;
  }
  .oj-sm-width-1\/5 {
    width: 20% !important;
  }
  .oj-sm-width-2\/5 {
    width: 40% !important;
  }
  .oj-sm-width-3\/5 {
    width: 60% !important;
  }
  .oj-sm-width-4\/5 {
    width: 80% !important;
  }
  .oj-sm-width-full {
    width: 100% !important;
  }
  .oj-sm-text-align-end {
    text-align: right !important;
  }
  html[dir=rtl] .oj-sm-text-align-end {
    text-align: left !important;
  }
  .oj-sm-float-end {
    float: right !important;
  }
  html[dir=rtl] .oj-sm-float-end {
    float: left !important;
  }
  .oj-sm-float-start {
    float: left !important;
  }
  html[dir=rtl] .oj-sm-float-start {
    float: right !important;
  }
}
@media print, screen and (min-width: 600px) {
  .oj-md-hide {
    display: none !important;
  }
  .oj-md-margin-0 {
    margin: 0 !important;
  }
  .oj-md-margin-0-horizontal {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
  .oj-md-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .oj-md-margin-0-top {
    margin-top: 0 !important;
  }
  .oj-md-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  .oj-md-margin-0-start {
    margin-inline-start: 0 !important;
  }
  .oj-md-margin-0-end {
    margin-inline-end: 0 !important;
  }
  .oj-md-padding-0 {
    padding: 0 !important;
  }
  .oj-md-padding-0-horizontal {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  .oj-md-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .oj-md-padding-0-top {
    padding-top: 0 !important;
  }
  .oj-md-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  .oj-md-padding-0-start {
    padding-inline-start: 0 !important;
  }
  .oj-md-padding-0-end {
    padding-inline-end: 0 !important;
  }
  .oj-md-margin-1x {
    margin: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-margin-1x-horizontal {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-margin-1x-vertical {
    margin-top: var(--oj-core-spacing-1x) !important;
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-margin-1x-top {
    margin-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-margin-1x-bottom {
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-margin-1x-start {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-margin-1x-end {
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-padding-1x {
    padding: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-padding-1x-horizontal {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-padding-1x-vertical {
    padding-top: var(--oj-core-spacing-1x) !important;
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-padding-1x-top {
    padding-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-padding-1x-bottom {
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-padding-1x-start {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-padding-1x-end {
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-margin-2x {
    margin: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-margin-2x-horizontal {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-margin-2x-vertical {
    margin-top: var(--oj-core-spacing-2x) !important;
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-margin-2x-top {
    margin-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-margin-2x-bottom {
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-margin-2x-start {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-margin-2x-end {
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-padding-2x {
    padding: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-padding-2x-horizontal {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-padding-2x-vertical {
    padding-top: var(--oj-core-spacing-2x) !important;
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-padding-2x-top {
    padding-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-padding-2x-bottom {
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-padding-2x-start {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-padding-2x-end {
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-margin-3x {
    margin: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-margin-3x-horizontal {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-margin-3x-vertical {
    margin-top: var(--oj-core-spacing-3x) !important;
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-margin-3x-top {
    margin-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-margin-3x-bottom {
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-margin-3x-start {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-margin-3x-end {
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-padding-3x {
    padding: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-padding-3x-horizontal {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-padding-3x-vertical {
    padding-top: var(--oj-core-spacing-3x) !important;
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-padding-3x-top {
    padding-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-padding-3x-bottom {
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-padding-3x-start {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-padding-3x-end {
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-margin-4x {
    margin: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-margin-4x-horizontal {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-margin-4x-vertical {
    margin-top: var(--oj-core-spacing-4x) !important;
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-margin-4x-top {
    margin-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-margin-4x-bottom {
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-margin-4x-start {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-margin-4x-end {
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-padding-4x {
    padding: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-padding-4x-horizontal {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-padding-4x-vertical {
    padding-top: var(--oj-core-spacing-4x) !important;
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-padding-4x-top {
    padding-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-padding-4x-bottom {
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-padding-4x-start {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-padding-4x-end {
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-margin-5x {
    margin: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-margin-5x-horizontal {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-margin-5x-vertical {
    margin-top: var(--oj-core-spacing-5x) !important;
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-margin-5x-top {
    margin-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-margin-5x-bottom {
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-margin-5x-start {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-margin-5x-end {
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-padding-5x {
    padding: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-padding-5x-horizontal {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-padding-5x-vertical {
    padding-top: var(--oj-core-spacing-5x) !important;
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-padding-5x-top {
    padding-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-padding-5x-bottom {
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-padding-5x-start {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-padding-5x-end {
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-margin-6x {
    margin: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-margin-6x-horizontal {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-margin-6x-vertical {
    margin-top: var(--oj-core-spacing-6x) !important;
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-margin-6x-top {
    margin-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-margin-6x-bottom {
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-margin-6x-start {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-margin-6x-end {
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-padding-6x {
    padding: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-padding-6x-horizontal {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-padding-6x-vertical {
    padding-top: var(--oj-core-spacing-6x) !important;
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-padding-6x-top {
    padding-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-padding-6x-bottom {
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-padding-6x-start {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-padding-6x-end {
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-margin-7x {
    margin: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-margin-7x-horizontal {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-margin-7x-vertical {
    margin-top: var(--oj-core-spacing-7x) !important;
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-margin-7x-top {
    margin-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-margin-7x-bottom {
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-margin-7x-start {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-margin-7x-end {
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-padding-7x {
    padding: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-padding-7x-horizontal {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-padding-7x-vertical {
    padding-top: var(--oj-core-spacing-7x) !important;
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-padding-7x-top {
    padding-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-padding-7x-bottom {
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-padding-7x-start {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-padding-7x-end {
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-margin-8x {
    margin: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-margin-8x-horizontal {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-margin-8x-vertical {
    margin-top: var(--oj-core-spacing-8x) !important;
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-margin-8x-top {
    margin-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-margin-8x-bottom {
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-margin-8x-start {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-margin-8x-end {
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-padding-8x {
    padding: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-padding-8x-horizontal {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-padding-8x-vertical {
    padding-top: var(--oj-core-spacing-8x) !important;
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-padding-8x-top {
    padding-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-padding-8x-bottom {
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-padding-8x-start {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-padding-8x-end {
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-margin-9x {
    margin: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-margin-9x-horizontal {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-margin-9x-vertical {
    margin-top: var(--oj-core-spacing-9x) !important;
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-margin-9x-top {
    margin-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-margin-9x-bottom {
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-margin-9x-start {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-margin-9x-end {
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-padding-9x {
    padding: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-padding-9x-horizontal {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-padding-9x-vertical {
    padding-top: var(--oj-core-spacing-9x) !important;
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-padding-9x-top {
    padding-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-padding-9x-bottom {
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-padding-9x-start {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-padding-9x-end {
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-margin-10x {
    margin: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-margin-10x-horizontal {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-margin-10x-vertical {
    margin-top: var(--oj-core-spacing-10x) !important;
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-margin-10x-top {
    margin-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-margin-10x-bottom {
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-margin-10x-start {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-margin-10x-end {
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-padding-10x {
    padding: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-padding-10x-horizontal {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-padding-10x-vertical {
    padding-top: var(--oj-core-spacing-10x) !important;
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-padding-10x-top {
    padding-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-padding-10x-bottom {
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-padding-10x-start {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-padding-10x-end {
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-margin-11x {
    margin: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-margin-11x-horizontal {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-margin-11x-vertical {
    margin-top: var(--oj-core-spacing-11x) !important;
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-margin-11x-top {
    margin-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-margin-11x-bottom {
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-margin-11x-start {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-margin-11x-end {
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-padding-11x {
    padding: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-padding-11x-horizontal {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-padding-11x-vertical {
    padding-top: var(--oj-core-spacing-11x) !important;
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-padding-11x-top {
    padding-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-padding-11x-bottom {
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-padding-11x-start {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-padding-11x-end {
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-margin-12x {
    margin: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-margin-12x-horizontal {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-margin-12x-vertical {
    margin-top: var(--oj-core-spacing-12x) !important;
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-margin-12x-top {
    margin-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-margin-12x-bottom {
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-margin-12x-start {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-margin-12x-end {
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-padding-12x {
    padding: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-padding-12x-horizontal {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-padding-12x-vertical {
    padding-top: var(--oj-core-spacing-12x) !important;
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-padding-12x-top {
    padding-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-padding-12x-bottom {
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-padding-12x-start {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-padding-12x-end {
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-width-1\/2 {
    width: 50% !important;
  }
  .oj-md-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-md-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-md-width-1\/4 {
    width: 25% !important;
  }
  .oj-md-width-3\/4 {
    width: 75% !important;
  }
  .oj-md-width-1\/5 {
    width: 20% !important;
  }
  .oj-md-width-2\/5 {
    width: 40% !important;
  }
  .oj-md-width-3\/5 {
    width: 60% !important;
  }
  .oj-md-width-4\/5 {
    width: 80% !important;
  }
  .oj-md-width-full {
    width: 100% !important;
  }
  .oj-md-text-align-end {
    text-align: right !important;
  }
  html[dir=rtl] .oj-md-text-align-end {
    text-align: left !important;
  }
  .oj-md-float-end {
    float: right !important;
  }
  html[dir=rtl] .oj-md-float-end {
    float: left !important;
  }
  .oj-md-float-start {
    float: left !important;
  }
  html[dir=rtl] .oj-md-float-start {
    float: right !important;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-lg-hide {
    display: none !important;
  }
  .oj-lg-margin-0 {
    margin: 0 !important;
  }
  .oj-lg-margin-0-horizontal {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
  .oj-lg-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .oj-lg-margin-0-top {
    margin-top: 0 !important;
  }
  .oj-lg-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  .oj-lg-margin-0-start {
    margin-inline-start: 0 !important;
  }
  .oj-lg-margin-0-end {
    margin-inline-end: 0 !important;
  }
  .oj-lg-padding-0 {
    padding: 0 !important;
  }
  .oj-lg-padding-0-horizontal {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  .oj-lg-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .oj-lg-padding-0-top {
    padding-top: 0 !important;
  }
  .oj-lg-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  .oj-lg-padding-0-start {
    padding-inline-start: 0 !important;
  }
  .oj-lg-padding-0-end {
    padding-inline-end: 0 !important;
  }
  .oj-lg-margin-1x {
    margin: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-margin-1x-horizontal {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-margin-1x-vertical {
    margin-top: var(--oj-core-spacing-1x) !important;
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-margin-1x-top {
    margin-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-margin-1x-bottom {
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-margin-1x-start {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-margin-1x-end {
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-padding-1x {
    padding: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-padding-1x-horizontal {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-padding-1x-vertical {
    padding-top: var(--oj-core-spacing-1x) !important;
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-padding-1x-top {
    padding-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-padding-1x-bottom {
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-padding-1x-start {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-padding-1x-end {
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-margin-2x {
    margin: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-margin-2x-horizontal {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-margin-2x-vertical {
    margin-top: var(--oj-core-spacing-2x) !important;
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-margin-2x-top {
    margin-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-margin-2x-bottom {
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-margin-2x-start {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-margin-2x-end {
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-padding-2x {
    padding: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-padding-2x-horizontal {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-padding-2x-vertical {
    padding-top: var(--oj-core-spacing-2x) !important;
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-padding-2x-top {
    padding-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-padding-2x-bottom {
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-padding-2x-start {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-padding-2x-end {
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-margin-3x {
    margin: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-margin-3x-horizontal {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-margin-3x-vertical {
    margin-top: var(--oj-core-spacing-3x) !important;
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-margin-3x-top {
    margin-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-margin-3x-bottom {
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-margin-3x-start {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-margin-3x-end {
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-padding-3x {
    padding: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-padding-3x-horizontal {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-padding-3x-vertical {
    padding-top: var(--oj-core-spacing-3x) !important;
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-padding-3x-top {
    padding-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-padding-3x-bottom {
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-padding-3x-start {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-padding-3x-end {
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-margin-4x {
    margin: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-margin-4x-horizontal {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-margin-4x-vertical {
    margin-top: var(--oj-core-spacing-4x) !important;
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-margin-4x-top {
    margin-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-margin-4x-bottom {
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-margin-4x-start {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-margin-4x-end {
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-padding-4x {
    padding: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-padding-4x-horizontal {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-padding-4x-vertical {
    padding-top: var(--oj-core-spacing-4x) !important;
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-padding-4x-top {
    padding-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-padding-4x-bottom {
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-padding-4x-start {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-padding-4x-end {
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-margin-5x {
    margin: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-margin-5x-horizontal {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-margin-5x-vertical {
    margin-top: var(--oj-core-spacing-5x) !important;
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-margin-5x-top {
    margin-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-margin-5x-bottom {
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-margin-5x-start {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-margin-5x-end {
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-padding-5x {
    padding: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-padding-5x-horizontal {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-padding-5x-vertical {
    padding-top: var(--oj-core-spacing-5x) !important;
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-padding-5x-top {
    padding-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-padding-5x-bottom {
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-padding-5x-start {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-padding-5x-end {
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-margin-6x {
    margin: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-margin-6x-horizontal {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-margin-6x-vertical {
    margin-top: var(--oj-core-spacing-6x) !important;
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-margin-6x-top {
    margin-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-margin-6x-bottom {
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-margin-6x-start {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-margin-6x-end {
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-padding-6x {
    padding: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-padding-6x-horizontal {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-padding-6x-vertical {
    padding-top: var(--oj-core-spacing-6x) !important;
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-padding-6x-top {
    padding-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-padding-6x-bottom {
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-padding-6x-start {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-padding-6x-end {
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-margin-7x {
    margin: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-margin-7x-horizontal {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-margin-7x-vertical {
    margin-top: var(--oj-core-spacing-7x) !important;
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-margin-7x-top {
    margin-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-margin-7x-bottom {
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-margin-7x-start {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-margin-7x-end {
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-padding-7x {
    padding: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-padding-7x-horizontal {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-padding-7x-vertical {
    padding-top: var(--oj-core-spacing-7x) !important;
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-padding-7x-top {
    padding-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-padding-7x-bottom {
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-padding-7x-start {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-padding-7x-end {
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-margin-8x {
    margin: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-margin-8x-horizontal {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-margin-8x-vertical {
    margin-top: var(--oj-core-spacing-8x) !important;
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-margin-8x-top {
    margin-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-margin-8x-bottom {
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-margin-8x-start {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-margin-8x-end {
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-padding-8x {
    padding: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-padding-8x-horizontal {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-padding-8x-vertical {
    padding-top: var(--oj-core-spacing-8x) !important;
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-padding-8x-top {
    padding-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-padding-8x-bottom {
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-padding-8x-start {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-padding-8x-end {
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-margin-9x {
    margin: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-margin-9x-horizontal {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-margin-9x-vertical {
    margin-top: var(--oj-core-spacing-9x) !important;
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-margin-9x-top {
    margin-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-margin-9x-bottom {
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-margin-9x-start {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-margin-9x-end {
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-padding-9x {
    padding: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-padding-9x-horizontal {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-padding-9x-vertical {
    padding-top: var(--oj-core-spacing-9x) !important;
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-padding-9x-top {
    padding-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-padding-9x-bottom {
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-padding-9x-start {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-padding-9x-end {
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-margin-10x {
    margin: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-margin-10x-horizontal {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-margin-10x-vertical {
    margin-top: var(--oj-core-spacing-10x) !important;
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-margin-10x-top {
    margin-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-margin-10x-bottom {
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-margin-10x-start {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-margin-10x-end {
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-padding-10x {
    padding: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-padding-10x-horizontal {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-padding-10x-vertical {
    padding-top: var(--oj-core-spacing-10x) !important;
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-padding-10x-top {
    padding-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-padding-10x-bottom {
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-padding-10x-start {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-padding-10x-end {
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-margin-11x {
    margin: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-margin-11x-horizontal {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-margin-11x-vertical {
    margin-top: var(--oj-core-spacing-11x) !important;
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-margin-11x-top {
    margin-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-margin-11x-bottom {
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-margin-11x-start {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-margin-11x-end {
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-padding-11x {
    padding: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-padding-11x-horizontal {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-padding-11x-vertical {
    padding-top: var(--oj-core-spacing-11x) !important;
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-padding-11x-top {
    padding-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-padding-11x-bottom {
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-padding-11x-start {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-padding-11x-end {
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-margin-12x {
    margin: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-margin-12x-horizontal {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-margin-12x-vertical {
    margin-top: var(--oj-core-spacing-12x) !important;
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-margin-12x-top {
    margin-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-margin-12x-bottom {
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-margin-12x-start {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-margin-12x-end {
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-padding-12x {
    padding: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-padding-12x-horizontal {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-padding-12x-vertical {
    padding-top: var(--oj-core-spacing-12x) !important;
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-padding-12x-top {
    padding-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-padding-12x-bottom {
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-padding-12x-start {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-padding-12x-end {
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-width-1\/2 {
    width: 50% !important;
  }
  .oj-lg-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-lg-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-lg-width-1\/4 {
    width: 25% !important;
  }
  .oj-lg-width-3\/4 {
    width: 75% !important;
  }
  .oj-lg-width-1\/5 {
    width: 20% !important;
  }
  .oj-lg-width-2\/5 {
    width: 40% !important;
  }
  .oj-lg-width-3\/5 {
    width: 60% !important;
  }
  .oj-lg-width-4\/5 {
    width: 80% !important;
  }
  .oj-lg-width-full {
    width: 100% !important;
  }
  .oj-lg-text-align-end {
    text-align: right !important;
  }
  html[dir=rtl] .oj-lg-text-align-end {
    text-align: left !important;
  }
  .oj-lg-float-end {
    float: right !important;
  }
  html[dir=rtl] .oj-lg-float-end {
    float: left !important;
  }
  .oj-lg-float-start {
    float: left !important;
  }
  html[dir=rtl] .oj-lg-float-start {
    float: right !important;
  }
}
@media screen and (min-width: 1440px) {
  .oj-xl-hide {
    display: none !important;
  }
  .oj-xl-margin-0 {
    margin: 0 !important;
  }
  .oj-xl-margin-0-horizontal {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
  .oj-xl-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .oj-xl-margin-0-top {
    margin-top: 0 !important;
  }
  .oj-xl-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  .oj-xl-margin-0-start {
    margin-inline-start: 0 !important;
  }
  .oj-xl-margin-0-end {
    margin-inline-end: 0 !important;
  }
  .oj-xl-padding-0 {
    padding: 0 !important;
  }
  .oj-xl-padding-0-horizontal {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  .oj-xl-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .oj-xl-padding-0-top {
    padding-top: 0 !important;
  }
  .oj-xl-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  .oj-xl-padding-0-start {
    padding-inline-start: 0 !important;
  }
  .oj-xl-padding-0-end {
    padding-inline-end: 0 !important;
  }
  .oj-xl-margin-1x {
    margin: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-margin-1x-horizontal {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-margin-1x-vertical {
    margin-top: var(--oj-core-spacing-1x) !important;
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-margin-1x-top {
    margin-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-margin-1x-bottom {
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-margin-1x-start {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-margin-1x-end {
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-padding-1x {
    padding: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-padding-1x-horizontal {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-padding-1x-vertical {
    padding-top: var(--oj-core-spacing-1x) !important;
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-padding-1x-top {
    padding-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-padding-1x-bottom {
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-padding-1x-start {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-padding-1x-end {
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-xl-margin-2x {
    margin: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-margin-2x-horizontal {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-margin-2x-vertical {
    margin-top: var(--oj-core-spacing-2x) !important;
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-margin-2x-top {
    margin-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-margin-2x-bottom {
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-margin-2x-start {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-margin-2x-end {
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-padding-2x {
    padding: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-padding-2x-horizontal {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-padding-2x-vertical {
    padding-top: var(--oj-core-spacing-2x) !important;
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-padding-2x-top {
    padding-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-padding-2x-bottom {
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-padding-2x-start {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-padding-2x-end {
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-xl-margin-3x {
    margin: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-margin-3x-horizontal {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-margin-3x-vertical {
    margin-top: var(--oj-core-spacing-3x) !important;
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-margin-3x-top {
    margin-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-margin-3x-bottom {
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-margin-3x-start {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-margin-3x-end {
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-padding-3x {
    padding: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-padding-3x-horizontal {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-padding-3x-vertical {
    padding-top: var(--oj-core-spacing-3x) !important;
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-padding-3x-top {
    padding-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-padding-3x-bottom {
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-padding-3x-start {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-padding-3x-end {
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-xl-margin-4x {
    margin: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-margin-4x-horizontal {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-margin-4x-vertical {
    margin-top: var(--oj-core-spacing-4x) !important;
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-margin-4x-top {
    margin-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-margin-4x-bottom {
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-margin-4x-start {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-margin-4x-end {
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-padding-4x {
    padding: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-padding-4x-horizontal {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-padding-4x-vertical {
    padding-top: var(--oj-core-spacing-4x) !important;
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-padding-4x-top {
    padding-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-padding-4x-bottom {
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-padding-4x-start {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-padding-4x-end {
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-xl-margin-5x {
    margin: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-margin-5x-horizontal {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-margin-5x-vertical {
    margin-top: var(--oj-core-spacing-5x) !important;
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-margin-5x-top {
    margin-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-margin-5x-bottom {
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-margin-5x-start {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-margin-5x-end {
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-padding-5x {
    padding: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-padding-5x-horizontal {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-padding-5x-vertical {
    padding-top: var(--oj-core-spacing-5x) !important;
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-padding-5x-top {
    padding-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-padding-5x-bottom {
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-padding-5x-start {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-padding-5x-end {
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-xl-margin-6x {
    margin: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-margin-6x-horizontal {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-margin-6x-vertical {
    margin-top: var(--oj-core-spacing-6x) !important;
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-margin-6x-top {
    margin-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-margin-6x-bottom {
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-margin-6x-start {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-margin-6x-end {
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-padding-6x {
    padding: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-padding-6x-horizontal {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-padding-6x-vertical {
    padding-top: var(--oj-core-spacing-6x) !important;
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-padding-6x-top {
    padding-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-padding-6x-bottom {
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-padding-6x-start {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-padding-6x-end {
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-xl-margin-7x {
    margin: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-margin-7x-horizontal {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-margin-7x-vertical {
    margin-top: var(--oj-core-spacing-7x) !important;
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-margin-7x-top {
    margin-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-margin-7x-bottom {
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-margin-7x-start {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-margin-7x-end {
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-padding-7x {
    padding: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-padding-7x-horizontal {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-padding-7x-vertical {
    padding-top: var(--oj-core-spacing-7x) !important;
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-padding-7x-top {
    padding-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-padding-7x-bottom {
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-padding-7x-start {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-padding-7x-end {
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-xl-margin-8x {
    margin: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-margin-8x-horizontal {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-margin-8x-vertical {
    margin-top: var(--oj-core-spacing-8x) !important;
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-margin-8x-top {
    margin-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-margin-8x-bottom {
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-margin-8x-start {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-margin-8x-end {
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-padding-8x {
    padding: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-padding-8x-horizontal {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-padding-8x-vertical {
    padding-top: var(--oj-core-spacing-8x) !important;
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-padding-8x-top {
    padding-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-padding-8x-bottom {
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-padding-8x-start {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-padding-8x-end {
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-xl-margin-9x {
    margin: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-margin-9x-horizontal {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-margin-9x-vertical {
    margin-top: var(--oj-core-spacing-9x) !important;
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-margin-9x-top {
    margin-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-margin-9x-bottom {
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-margin-9x-start {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-margin-9x-end {
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-padding-9x {
    padding: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-padding-9x-horizontal {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-padding-9x-vertical {
    padding-top: var(--oj-core-spacing-9x) !important;
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-padding-9x-top {
    padding-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-padding-9x-bottom {
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-padding-9x-start {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-padding-9x-end {
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-xl-margin-10x {
    margin: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-margin-10x-horizontal {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-margin-10x-vertical {
    margin-top: var(--oj-core-spacing-10x) !important;
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-margin-10x-top {
    margin-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-margin-10x-bottom {
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-margin-10x-start {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-margin-10x-end {
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-padding-10x {
    padding: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-padding-10x-horizontal {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-padding-10x-vertical {
    padding-top: var(--oj-core-spacing-10x) !important;
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-padding-10x-top {
    padding-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-padding-10x-bottom {
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-padding-10x-start {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-padding-10x-end {
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-xl-margin-11x {
    margin: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-margin-11x-horizontal {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-margin-11x-vertical {
    margin-top: var(--oj-core-spacing-11x) !important;
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-margin-11x-top {
    margin-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-margin-11x-bottom {
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-margin-11x-start {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-margin-11x-end {
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-padding-11x {
    padding: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-padding-11x-horizontal {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-padding-11x-vertical {
    padding-top: var(--oj-core-spacing-11x) !important;
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-padding-11x-top {
    padding-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-padding-11x-bottom {
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-padding-11x-start {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-padding-11x-end {
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-xl-margin-12x {
    margin: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-margin-12x-horizontal {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-margin-12x-vertical {
    margin-top: var(--oj-core-spacing-12x) !important;
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-margin-12x-top {
    margin-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-margin-12x-bottom {
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-margin-12x-start {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-margin-12x-end {
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-padding-12x {
    padding: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-padding-12x-horizontal {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-padding-12x-vertical {
    padding-top: var(--oj-core-spacing-12x) !important;
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-padding-12x-top {
    padding-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-padding-12x-bottom {
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-padding-12x-start {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-padding-12x-end {
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-xl-width-1\/2 {
    width: 50% !important;
  }
  .oj-xl-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-xl-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-xl-width-1\/4 {
    width: 25% !important;
  }
  .oj-xl-width-3\/4 {
    width: 75% !important;
  }
  .oj-xl-width-1\/5 {
    width: 20% !important;
  }
  .oj-xl-width-2\/5 {
    width: 40% !important;
  }
  .oj-xl-width-3\/5 {
    width: 60% !important;
  }
  .oj-xl-width-4\/5 {
    width: 80% !important;
  }
  .oj-xl-width-full {
    width: 100% !important;
  }
  .oj-xl-text-align-end {
    text-align: right !important;
  }
  html[dir=rtl] .oj-xl-text-align-end {
    text-align: left !important;
  }
  .oj-xl-float-end {
    float: right !important;
  }
  html[dir=rtl] .oj-xl-float-end {
    float: left !important;
  }
  .oj-xl-float-start {
    float: left !important;
  }
  html[dir=rtl] .oj-xl-float-start {
    float: right !important;
  }
}
@media print and (orientation: portrait), screen and (max-width: 1023.9px) {
  .oj-md-down-hide {
    display: none !important;
  }
  .oj-md-down-width-1\/2 {
    width: 50% !important;
  }
  .oj-md-down-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-md-down-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-md-down-width-1\/4 {
    width: 25% !important;
  }
  .oj-md-down-width-3\/4 {
    width: 75% !important;
  }
  .oj-md-down-width-1\/5 {
    width: 20% !important;
  }
  .oj-md-down-width-2\/5 {
    width: 40% !important;
  }
  .oj-md-down-width-3\/5 {
    width: 60% !important;
  }
  .oj-md-down-width-4\/5 {
    width: 80% !important;
  }
  .oj-md-down-width-full {
    width: 100% !important;
  }
  .oj-md-down-text-align-end {
    text-align: right !important;
  }
  html[dir=rtl] .oj-md-down-text-align-end {
    text-align: left !important;
  }
  .oj-md-down-float-end {
    float: right !important;
  }
  html[dir=rtl] .oj-md-down-float-end {
    float: left !important;
  }
  .oj-md-down-float-start {
    float: left !important;
  }
  html[dir=rtl] .oj-md-down-float-start {
    float: right !important;
  }
}
@media print and (orientation: landscape), screen and (max-width: 1439.9px) {
  .oj-lg-down-hide {
    display: none !important;
  }
  .oj-lg-down-width-1\/2 {
    width: 50% !important;
  }
  .oj-lg-down-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-lg-down-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-lg-down-width-1\/4 {
    width: 25% !important;
  }
  .oj-lg-down-width-3\/4 {
    width: 75% !important;
  }
  .oj-lg-down-width-1\/5 {
    width: 20% !important;
  }
  .oj-lg-down-width-2\/5 {
    width: 40% !important;
  }
  .oj-lg-down-width-3\/5 {
    width: 60% !important;
  }
  .oj-lg-down-width-4\/5 {
    width: 80% !important;
  }
  .oj-lg-down-width-full {
    width: 100% !important;
  }
  .oj-lg-down-text-align-end {
    text-align: right !important;
  }
  html[dir=rtl] .oj-lg-down-text-align-end {
    text-align: left !important;
  }
  .oj-lg-down-float-end {
    float: right !important;
  }
  html[dir=rtl] .oj-lg-down-float-end {
    float: left !important;
  }
  .oj-lg-down-float-start {
    float: left !important;
  }
  html[dir=rtl] .oj-lg-down-float-start {
    float: right !important;
  }
}
@media screen and (max-width: 599.9px) {
  /* small only screen layout helpers */
  .oj-sm-only-hide {
    display: none !important;
  }
  .oj-sm-only-margin-0 {
    margin: 0 !important;
  }
  .oj-sm-only-margin-0-horizontal {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
  .oj-sm-only-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .oj-sm-only-margin-0-top {
    margin-top: 0 !important;
  }
  .oj-sm-only-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  .oj-sm-only-margin-0-start {
    margin-inline-start: 0 !important;
  }
  .oj-sm-only-margin-0-end {
    margin-inline-end: 0 !important;
  }
  .oj-sm-only-padding-0 {
    padding: 0 !important;
  }
  .oj-sm-only-padding-0-horizontal {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  .oj-sm-only-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .oj-sm-only-padding-0-top {
    padding-top: 0 !important;
  }
  .oj-sm-only-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  .oj-sm-only-padding-0-start {
    padding-inline-start: 0 !important;
  }
  .oj-sm-only-padding-0-end {
    padding-inline-end: 0 !important;
  }
  .oj-sm-only-margin-1x {
    margin: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-margin-1x-horizontal {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-margin-1x-vertical {
    margin-top: var(--oj-core-spacing-1x) !important;
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-margin-1x-top {
    margin-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-margin-1x-bottom {
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-margin-1x-start {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-margin-1x-end {
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-padding-1x {
    padding: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-padding-1x-horizontal {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-padding-1x-vertical {
    padding-top: var(--oj-core-spacing-1x) !important;
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-padding-1x-top {
    padding-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-padding-1x-bottom {
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-padding-1x-start {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-padding-1x-end {
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-sm-only-margin-2x {
    margin: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-margin-2x-horizontal {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-margin-2x-vertical {
    margin-top: var(--oj-core-spacing-2x) !important;
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-margin-2x-top {
    margin-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-margin-2x-bottom {
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-margin-2x-start {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-margin-2x-end {
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-padding-2x {
    padding: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-padding-2x-horizontal {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-padding-2x-vertical {
    padding-top: var(--oj-core-spacing-2x) !important;
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-padding-2x-top {
    padding-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-padding-2x-bottom {
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-padding-2x-start {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-padding-2x-end {
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-sm-only-margin-3x {
    margin: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-margin-3x-horizontal {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-margin-3x-vertical {
    margin-top: var(--oj-core-spacing-3x) !important;
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-margin-3x-top {
    margin-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-margin-3x-bottom {
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-margin-3x-start {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-margin-3x-end {
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-padding-3x {
    padding: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-padding-3x-horizontal {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-padding-3x-vertical {
    padding-top: var(--oj-core-spacing-3x) !important;
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-padding-3x-top {
    padding-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-padding-3x-bottom {
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-padding-3x-start {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-padding-3x-end {
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-sm-only-margin-4x {
    margin: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-margin-4x-horizontal {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-margin-4x-vertical {
    margin-top: var(--oj-core-spacing-4x) !important;
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-margin-4x-top {
    margin-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-margin-4x-bottom {
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-margin-4x-start {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-margin-4x-end {
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-padding-4x {
    padding: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-padding-4x-horizontal {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-padding-4x-vertical {
    padding-top: var(--oj-core-spacing-4x) !important;
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-padding-4x-top {
    padding-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-padding-4x-bottom {
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-padding-4x-start {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-padding-4x-end {
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-sm-only-margin-5x {
    margin: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-margin-5x-horizontal {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-margin-5x-vertical {
    margin-top: var(--oj-core-spacing-5x) !important;
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-margin-5x-top {
    margin-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-margin-5x-bottom {
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-margin-5x-start {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-margin-5x-end {
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-padding-5x {
    padding: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-padding-5x-horizontal {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-padding-5x-vertical {
    padding-top: var(--oj-core-spacing-5x) !important;
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-padding-5x-top {
    padding-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-padding-5x-bottom {
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-padding-5x-start {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-padding-5x-end {
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-sm-only-margin-6x {
    margin: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-margin-6x-horizontal {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-margin-6x-vertical {
    margin-top: var(--oj-core-spacing-6x) !important;
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-margin-6x-top {
    margin-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-margin-6x-bottom {
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-margin-6x-start {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-margin-6x-end {
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-padding-6x {
    padding: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-padding-6x-horizontal {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-padding-6x-vertical {
    padding-top: var(--oj-core-spacing-6x) !important;
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-padding-6x-top {
    padding-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-padding-6x-bottom {
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-padding-6x-start {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-padding-6x-end {
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-sm-only-margin-7x {
    margin: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-margin-7x-horizontal {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-margin-7x-vertical {
    margin-top: var(--oj-core-spacing-7x) !important;
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-margin-7x-top {
    margin-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-margin-7x-bottom {
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-margin-7x-start {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-margin-7x-end {
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-padding-7x {
    padding: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-padding-7x-horizontal {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-padding-7x-vertical {
    padding-top: var(--oj-core-spacing-7x) !important;
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-padding-7x-top {
    padding-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-padding-7x-bottom {
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-padding-7x-start {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-padding-7x-end {
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-sm-only-margin-8x {
    margin: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-margin-8x-horizontal {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-margin-8x-vertical {
    margin-top: var(--oj-core-spacing-8x) !important;
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-margin-8x-top {
    margin-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-margin-8x-bottom {
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-margin-8x-start {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-margin-8x-end {
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-padding-8x {
    padding: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-padding-8x-horizontal {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-padding-8x-vertical {
    padding-top: var(--oj-core-spacing-8x) !important;
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-padding-8x-top {
    padding-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-padding-8x-bottom {
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-padding-8x-start {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-padding-8x-end {
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-sm-only-margin-9x {
    margin: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-margin-9x-horizontal {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-margin-9x-vertical {
    margin-top: var(--oj-core-spacing-9x) !important;
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-margin-9x-top {
    margin-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-margin-9x-bottom {
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-margin-9x-start {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-margin-9x-end {
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-padding-9x {
    padding: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-padding-9x-horizontal {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-padding-9x-vertical {
    padding-top: var(--oj-core-spacing-9x) !important;
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-padding-9x-top {
    padding-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-padding-9x-bottom {
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-padding-9x-start {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-padding-9x-end {
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-sm-only-margin-10x {
    margin: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-margin-10x-horizontal {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-margin-10x-vertical {
    margin-top: var(--oj-core-spacing-10x) !important;
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-margin-10x-top {
    margin-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-margin-10x-bottom {
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-margin-10x-start {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-margin-10x-end {
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-padding-10x {
    padding: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-padding-10x-horizontal {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-padding-10x-vertical {
    padding-top: var(--oj-core-spacing-10x) !important;
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-padding-10x-top {
    padding-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-padding-10x-bottom {
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-padding-10x-start {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-padding-10x-end {
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-sm-only-margin-11x {
    margin: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-margin-11x-horizontal {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-margin-11x-vertical {
    margin-top: var(--oj-core-spacing-11x) !important;
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-margin-11x-top {
    margin-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-margin-11x-bottom {
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-margin-11x-start {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-margin-11x-end {
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-padding-11x {
    padding: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-padding-11x-horizontal {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-padding-11x-vertical {
    padding-top: var(--oj-core-spacing-11x) !important;
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-padding-11x-top {
    padding-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-padding-11x-bottom {
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-padding-11x-start {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-padding-11x-end {
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-sm-only-margin-12x {
    margin: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-margin-12x-horizontal {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-margin-12x-vertical {
    margin-top: var(--oj-core-spacing-12x) !important;
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-margin-12x-top {
    margin-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-margin-12x-bottom {
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-margin-12x-start {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-margin-12x-end {
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-padding-12x {
    padding: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-padding-12x-horizontal {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-padding-12x-vertical {
    padding-top: var(--oj-core-spacing-12x) !important;
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-padding-12x-top {
    padding-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-padding-12x-bottom {
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-padding-12x-start {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-padding-12x-end {
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-sm-only-width-1\/2 {
    width: 50% !important;
  }
  .oj-sm-only-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-sm-only-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-sm-only-width-1\/4 {
    width: 25% !important;
  }
  .oj-sm-only-width-3\/4 {
    width: 75% !important;
  }
  .oj-sm-only-width-1\/5 {
    width: 20% !important;
  }
  .oj-sm-only-width-2\/5 {
    width: 40% !important;
  }
  .oj-sm-only-width-3\/5 {
    width: 60% !important;
  }
  .oj-sm-only-width-4\/5 {
    width: 80% !important;
  }
  .oj-sm-only-width-full {
    width: 100% !important;
  }
  .oj-sm-only-text-align-end {
    text-align: right !important;
  }
  html[dir=rtl] .oj-sm-only-text-align-end {
    text-align: left !important;
  }
  .oj-sm-only-float-end {
    float: right !important;
  }
  html[dir=rtl] .oj-sm-only-float-end {
    float: left !important;
  }
  .oj-sm-only-float-start {
    float: left !important;
  }
  html[dir=rtl] .oj-sm-only-float-start {
    float: right !important;
  }
}
@media print and (orientation: portrait), screen and (min-width: 600px) and (max-width: 1023.9px) {
  /* medium only screen layout helpers */
  .oj-md-only-hide {
    display: none !important;
  }
  .oj-md-only-margin-0 {
    margin: 0 !important;
  }
  .oj-md-only-margin-0-horizontal {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
  .oj-md-only-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .oj-md-only-margin-0-top {
    margin-top: 0 !important;
  }
  .oj-md-only-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  .oj-md-only-margin-0-start {
    margin-inline-start: 0 !important;
  }
  .oj-md-only-margin-0-end {
    margin-inline-end: 0 !important;
  }
  .oj-md-only-padding-0 {
    padding: 0 !important;
  }
  .oj-md-only-padding-0-horizontal {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  .oj-md-only-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .oj-md-only-padding-0-top {
    padding-top: 0 !important;
  }
  .oj-md-only-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  .oj-md-only-padding-0-start {
    padding-inline-start: 0 !important;
  }
  .oj-md-only-padding-0-end {
    padding-inline-end: 0 !important;
  }
  .oj-md-only-margin-1x {
    margin: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-margin-1x-horizontal {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-margin-1x-vertical {
    margin-top: var(--oj-core-spacing-1x) !important;
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-margin-1x-top {
    margin-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-margin-1x-bottom {
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-margin-1x-start {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-margin-1x-end {
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-padding-1x {
    padding: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-padding-1x-horizontal {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-padding-1x-vertical {
    padding-top: var(--oj-core-spacing-1x) !important;
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-padding-1x-top {
    padding-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-padding-1x-bottom {
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-padding-1x-start {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-padding-1x-end {
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-md-only-margin-2x {
    margin: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-margin-2x-horizontal {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-margin-2x-vertical {
    margin-top: var(--oj-core-spacing-2x) !important;
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-margin-2x-top {
    margin-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-margin-2x-bottom {
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-margin-2x-start {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-margin-2x-end {
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-padding-2x {
    padding: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-padding-2x-horizontal {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-padding-2x-vertical {
    padding-top: var(--oj-core-spacing-2x) !important;
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-padding-2x-top {
    padding-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-padding-2x-bottom {
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-padding-2x-start {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-padding-2x-end {
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-md-only-margin-3x {
    margin: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-margin-3x-horizontal {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-margin-3x-vertical {
    margin-top: var(--oj-core-spacing-3x) !important;
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-margin-3x-top {
    margin-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-margin-3x-bottom {
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-margin-3x-start {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-margin-3x-end {
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-padding-3x {
    padding: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-padding-3x-horizontal {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-padding-3x-vertical {
    padding-top: var(--oj-core-spacing-3x) !important;
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-padding-3x-top {
    padding-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-padding-3x-bottom {
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-padding-3x-start {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-padding-3x-end {
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-md-only-margin-4x {
    margin: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-margin-4x-horizontal {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-margin-4x-vertical {
    margin-top: var(--oj-core-spacing-4x) !important;
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-margin-4x-top {
    margin-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-margin-4x-bottom {
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-margin-4x-start {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-margin-4x-end {
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-padding-4x {
    padding: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-padding-4x-horizontal {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-padding-4x-vertical {
    padding-top: var(--oj-core-spacing-4x) !important;
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-padding-4x-top {
    padding-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-padding-4x-bottom {
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-padding-4x-start {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-padding-4x-end {
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-md-only-margin-5x {
    margin: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-margin-5x-horizontal {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-margin-5x-vertical {
    margin-top: var(--oj-core-spacing-5x) !important;
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-margin-5x-top {
    margin-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-margin-5x-bottom {
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-margin-5x-start {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-margin-5x-end {
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-padding-5x {
    padding: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-padding-5x-horizontal {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-padding-5x-vertical {
    padding-top: var(--oj-core-spacing-5x) !important;
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-padding-5x-top {
    padding-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-padding-5x-bottom {
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-padding-5x-start {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-padding-5x-end {
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-md-only-margin-6x {
    margin: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-margin-6x-horizontal {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-margin-6x-vertical {
    margin-top: var(--oj-core-spacing-6x) !important;
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-margin-6x-top {
    margin-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-margin-6x-bottom {
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-margin-6x-start {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-margin-6x-end {
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-padding-6x {
    padding: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-padding-6x-horizontal {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-padding-6x-vertical {
    padding-top: var(--oj-core-spacing-6x) !important;
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-padding-6x-top {
    padding-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-padding-6x-bottom {
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-padding-6x-start {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-padding-6x-end {
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-md-only-margin-7x {
    margin: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-margin-7x-horizontal {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-margin-7x-vertical {
    margin-top: var(--oj-core-spacing-7x) !important;
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-margin-7x-top {
    margin-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-margin-7x-bottom {
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-margin-7x-start {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-margin-7x-end {
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-padding-7x {
    padding: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-padding-7x-horizontal {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-padding-7x-vertical {
    padding-top: var(--oj-core-spacing-7x) !important;
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-padding-7x-top {
    padding-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-padding-7x-bottom {
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-padding-7x-start {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-padding-7x-end {
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-md-only-margin-8x {
    margin: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-margin-8x-horizontal {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-margin-8x-vertical {
    margin-top: var(--oj-core-spacing-8x) !important;
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-margin-8x-top {
    margin-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-margin-8x-bottom {
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-margin-8x-start {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-margin-8x-end {
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-padding-8x {
    padding: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-padding-8x-horizontal {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-padding-8x-vertical {
    padding-top: var(--oj-core-spacing-8x) !important;
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-padding-8x-top {
    padding-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-padding-8x-bottom {
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-padding-8x-start {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-padding-8x-end {
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-md-only-margin-9x {
    margin: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-margin-9x-horizontal {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-margin-9x-vertical {
    margin-top: var(--oj-core-spacing-9x) !important;
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-margin-9x-top {
    margin-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-margin-9x-bottom {
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-margin-9x-start {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-margin-9x-end {
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-padding-9x {
    padding: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-padding-9x-horizontal {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-padding-9x-vertical {
    padding-top: var(--oj-core-spacing-9x) !important;
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-padding-9x-top {
    padding-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-padding-9x-bottom {
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-padding-9x-start {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-padding-9x-end {
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-md-only-margin-10x {
    margin: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-margin-10x-horizontal {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-margin-10x-vertical {
    margin-top: var(--oj-core-spacing-10x) !important;
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-margin-10x-top {
    margin-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-margin-10x-bottom {
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-margin-10x-start {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-margin-10x-end {
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-padding-10x {
    padding: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-padding-10x-horizontal {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-padding-10x-vertical {
    padding-top: var(--oj-core-spacing-10x) !important;
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-padding-10x-top {
    padding-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-padding-10x-bottom {
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-padding-10x-start {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-padding-10x-end {
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-md-only-margin-11x {
    margin: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-margin-11x-horizontal {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-margin-11x-vertical {
    margin-top: var(--oj-core-spacing-11x) !important;
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-margin-11x-top {
    margin-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-margin-11x-bottom {
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-margin-11x-start {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-margin-11x-end {
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-padding-11x {
    padding: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-padding-11x-horizontal {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-padding-11x-vertical {
    padding-top: var(--oj-core-spacing-11x) !important;
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-padding-11x-top {
    padding-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-padding-11x-bottom {
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-padding-11x-start {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-padding-11x-end {
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-md-only-margin-12x {
    margin: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-margin-12x-horizontal {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-margin-12x-vertical {
    margin-top: var(--oj-core-spacing-12x) !important;
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-margin-12x-top {
    margin-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-margin-12x-bottom {
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-margin-12x-start {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-margin-12x-end {
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-padding-12x {
    padding: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-padding-12x-horizontal {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-padding-12x-vertical {
    padding-top: var(--oj-core-spacing-12x) !important;
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-padding-12x-top {
    padding-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-padding-12x-bottom {
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-padding-12x-start {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-padding-12x-end {
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-md-only-width-1\/2 {
    width: 50% !important;
  }
  .oj-md-only-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-md-only-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-md-only-width-1\/4 {
    width: 25% !important;
  }
  .oj-md-only-width-3\/4 {
    width: 75% !important;
  }
  .oj-md-only-width-1\/5 {
    width: 20% !important;
  }
  .oj-md-only-width-2\/5 {
    width: 40% !important;
  }
  .oj-md-only-width-3\/5 {
    width: 60% !important;
  }
  .oj-md-only-width-4\/5 {
    width: 80% !important;
  }
  .oj-md-only-width-full {
    width: 100% !important;
  }
  .oj-md-only-text-align-end {
    text-align: right !important;
  }
  html[dir=rtl] .oj-md-only-text-align-end {
    text-align: left !important;
  }
  .oj-md-only-float-end {
    float: right !important;
  }
  html[dir=rtl] .oj-md-only-float-end {
    float: left !important;
  }
  .oj-md-only-float-start {
    float: left !important;
  }
  html[dir=rtl] .oj-md-only-float-start {
    float: right !important;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1439.9px) {
  /* large only screen layout helpers */
  .oj-lg-only-hide {
    display: none !important;
  }
  .oj-lg-only-margin-0 {
    margin: 0 !important;
  }
  .oj-lg-only-margin-0-horizontal {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
  .oj-lg-only-margin-0-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .oj-lg-only-margin-0-top {
    margin-top: 0 !important;
  }
  .oj-lg-only-margin-0-bottom {
    margin-bottom: 0 !important;
  }
  .oj-lg-only-margin-0-start {
    margin-inline-start: 0 !important;
  }
  .oj-lg-only-margin-0-end {
    margin-inline-end: 0 !important;
  }
  .oj-lg-only-padding-0 {
    padding: 0 !important;
  }
  .oj-lg-only-padding-0-horizontal {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  .oj-lg-only-padding-0-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .oj-lg-only-padding-0-top {
    padding-top: 0 !important;
  }
  .oj-lg-only-padding-0-bottom {
    padding-bottom: 0 !important;
  }
  .oj-lg-only-padding-0-start {
    padding-inline-start: 0 !important;
  }
  .oj-lg-only-padding-0-end {
    padding-inline-end: 0 !important;
  }
  .oj-lg-only-margin-1x {
    margin: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-margin-1x-horizontal {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-margin-1x-vertical {
    margin-top: var(--oj-core-spacing-1x) !important;
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-margin-1x-top {
    margin-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-margin-1x-bottom {
    margin-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-margin-1x-start {
    margin-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-margin-1x-end {
    margin-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-padding-1x {
    padding: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-padding-1x-horizontal {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-padding-1x-vertical {
    padding-top: var(--oj-core-spacing-1x) !important;
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-padding-1x-top {
    padding-top: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-padding-1x-bottom {
    padding-bottom: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-padding-1x-start {
    padding-inline-start: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-padding-1x-end {
    padding-inline-end: var(--oj-core-spacing-1x) !important;
  }
  .oj-lg-only-margin-2x {
    margin: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-margin-2x-horizontal {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-margin-2x-vertical {
    margin-top: var(--oj-core-spacing-2x) !important;
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-margin-2x-top {
    margin-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-margin-2x-bottom {
    margin-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-margin-2x-start {
    margin-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-margin-2x-end {
    margin-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-padding-2x {
    padding: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-padding-2x-horizontal {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-padding-2x-vertical {
    padding-top: var(--oj-core-spacing-2x) !important;
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-padding-2x-top {
    padding-top: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-padding-2x-bottom {
    padding-bottom: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-padding-2x-start {
    padding-inline-start: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-padding-2x-end {
    padding-inline-end: var(--oj-core-spacing-2x) !important;
  }
  .oj-lg-only-margin-3x {
    margin: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-margin-3x-horizontal {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-margin-3x-vertical {
    margin-top: var(--oj-core-spacing-3x) !important;
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-margin-3x-top {
    margin-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-margin-3x-bottom {
    margin-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-margin-3x-start {
    margin-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-margin-3x-end {
    margin-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-padding-3x {
    padding: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-padding-3x-horizontal {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-padding-3x-vertical {
    padding-top: var(--oj-core-spacing-3x) !important;
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-padding-3x-top {
    padding-top: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-padding-3x-bottom {
    padding-bottom: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-padding-3x-start {
    padding-inline-start: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-padding-3x-end {
    padding-inline-end: var(--oj-core-spacing-3x) !important;
  }
  .oj-lg-only-margin-4x {
    margin: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-margin-4x-horizontal {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-margin-4x-vertical {
    margin-top: var(--oj-core-spacing-4x) !important;
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-margin-4x-top {
    margin-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-margin-4x-bottom {
    margin-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-margin-4x-start {
    margin-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-margin-4x-end {
    margin-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-padding-4x {
    padding: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-padding-4x-horizontal {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-padding-4x-vertical {
    padding-top: var(--oj-core-spacing-4x) !important;
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-padding-4x-top {
    padding-top: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-padding-4x-bottom {
    padding-bottom: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-padding-4x-start {
    padding-inline-start: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-padding-4x-end {
    padding-inline-end: var(--oj-core-spacing-4x) !important;
  }
  .oj-lg-only-margin-5x {
    margin: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-margin-5x-horizontal {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-margin-5x-vertical {
    margin-top: var(--oj-core-spacing-5x) !important;
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-margin-5x-top {
    margin-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-margin-5x-bottom {
    margin-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-margin-5x-start {
    margin-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-margin-5x-end {
    margin-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-padding-5x {
    padding: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-padding-5x-horizontal {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-padding-5x-vertical {
    padding-top: var(--oj-core-spacing-5x) !important;
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-padding-5x-top {
    padding-top: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-padding-5x-bottom {
    padding-bottom: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-padding-5x-start {
    padding-inline-start: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-padding-5x-end {
    padding-inline-end: var(--oj-core-spacing-5x) !important;
  }
  .oj-lg-only-margin-6x {
    margin: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-margin-6x-horizontal {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-margin-6x-vertical {
    margin-top: var(--oj-core-spacing-6x) !important;
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-margin-6x-top {
    margin-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-margin-6x-bottom {
    margin-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-margin-6x-start {
    margin-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-margin-6x-end {
    margin-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-padding-6x {
    padding: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-padding-6x-horizontal {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-padding-6x-vertical {
    padding-top: var(--oj-core-spacing-6x) !important;
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-padding-6x-top {
    padding-top: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-padding-6x-bottom {
    padding-bottom: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-padding-6x-start {
    padding-inline-start: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-padding-6x-end {
    padding-inline-end: var(--oj-core-spacing-6x) !important;
  }
  .oj-lg-only-margin-7x {
    margin: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-margin-7x-horizontal {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-margin-7x-vertical {
    margin-top: var(--oj-core-spacing-7x) !important;
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-margin-7x-top {
    margin-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-margin-7x-bottom {
    margin-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-margin-7x-start {
    margin-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-margin-7x-end {
    margin-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-padding-7x {
    padding: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-padding-7x-horizontal {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-padding-7x-vertical {
    padding-top: var(--oj-core-spacing-7x) !important;
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-padding-7x-top {
    padding-top: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-padding-7x-bottom {
    padding-bottom: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-padding-7x-start {
    padding-inline-start: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-padding-7x-end {
    padding-inline-end: var(--oj-core-spacing-7x) !important;
  }
  .oj-lg-only-margin-8x {
    margin: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-margin-8x-horizontal {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-margin-8x-vertical {
    margin-top: var(--oj-core-spacing-8x) !important;
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-margin-8x-top {
    margin-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-margin-8x-bottom {
    margin-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-margin-8x-start {
    margin-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-margin-8x-end {
    margin-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-padding-8x {
    padding: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-padding-8x-horizontal {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-padding-8x-vertical {
    padding-top: var(--oj-core-spacing-8x) !important;
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-padding-8x-top {
    padding-top: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-padding-8x-bottom {
    padding-bottom: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-padding-8x-start {
    padding-inline-start: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-padding-8x-end {
    padding-inline-end: var(--oj-core-spacing-8x) !important;
  }
  .oj-lg-only-margin-9x {
    margin: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-margin-9x-horizontal {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-margin-9x-vertical {
    margin-top: var(--oj-core-spacing-9x) !important;
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-margin-9x-top {
    margin-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-margin-9x-bottom {
    margin-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-margin-9x-start {
    margin-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-margin-9x-end {
    margin-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-padding-9x {
    padding: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-padding-9x-horizontal {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-padding-9x-vertical {
    padding-top: var(--oj-core-spacing-9x) !important;
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-padding-9x-top {
    padding-top: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-padding-9x-bottom {
    padding-bottom: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-padding-9x-start {
    padding-inline-start: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-padding-9x-end {
    padding-inline-end: var(--oj-core-spacing-9x) !important;
  }
  .oj-lg-only-margin-10x {
    margin: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-margin-10x-horizontal {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-margin-10x-vertical {
    margin-top: var(--oj-core-spacing-10x) !important;
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-margin-10x-top {
    margin-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-margin-10x-bottom {
    margin-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-margin-10x-start {
    margin-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-margin-10x-end {
    margin-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-padding-10x {
    padding: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-padding-10x-horizontal {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-padding-10x-vertical {
    padding-top: var(--oj-core-spacing-10x) !important;
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-padding-10x-top {
    padding-top: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-padding-10x-bottom {
    padding-bottom: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-padding-10x-start {
    padding-inline-start: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-padding-10x-end {
    padding-inline-end: var(--oj-core-spacing-10x) !important;
  }
  .oj-lg-only-margin-11x {
    margin: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-margin-11x-horizontal {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-margin-11x-vertical {
    margin-top: var(--oj-core-spacing-11x) !important;
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-margin-11x-top {
    margin-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-margin-11x-bottom {
    margin-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-margin-11x-start {
    margin-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-margin-11x-end {
    margin-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-padding-11x {
    padding: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-padding-11x-horizontal {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-padding-11x-vertical {
    padding-top: var(--oj-core-spacing-11x) !important;
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-padding-11x-top {
    padding-top: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-padding-11x-bottom {
    padding-bottom: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-padding-11x-start {
    padding-inline-start: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-padding-11x-end {
    padding-inline-end: var(--oj-core-spacing-11x) !important;
  }
  .oj-lg-only-margin-12x {
    margin: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-margin-12x-horizontal {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-margin-12x-vertical {
    margin-top: var(--oj-core-spacing-12x) !important;
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-margin-12x-top {
    margin-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-margin-12x-bottom {
    margin-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-margin-12x-start {
    margin-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-margin-12x-end {
    margin-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-padding-12x {
    padding: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-padding-12x-horizontal {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-padding-12x-vertical {
    padding-top: var(--oj-core-spacing-12x) !important;
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-padding-12x-top {
    padding-top: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-padding-12x-bottom {
    padding-bottom: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-padding-12x-start {
    padding-inline-start: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-padding-12x-end {
    padding-inline-end: var(--oj-core-spacing-12x) !important;
  }
  .oj-lg-only-width-1\/2 {
    width: 50% !important;
  }
  .oj-lg-only-width-1\/3 {
    width: 33.333333% !important;
  }
  .oj-lg-only-width-2\/3 {
    width: 66.666667% !important;
  }
  .oj-lg-only-width-1\/4 {
    width: 25% !important;
  }
  .oj-lg-only-width-3\/4 {
    width: 75% !important;
  }
  .oj-lg-only-width-1\/5 {
    width: 20% !important;
  }
  .oj-lg-only-width-2\/5 {
    width: 40% !important;
  }
  .oj-lg-only-width-3\/5 {
    width: 60% !important;
  }
  .oj-lg-only-width-4\/5 {
    width: 80% !important;
  }
  .oj-lg-only-width-full {
    width: 100% !important;
  }
  .oj-lg-only-text-align-end {
    text-align: right !important;
  }
  html[dir=rtl] .oj-lg-only-text-align-end {
    text-align: left !important;
  }
  .oj-lg-only-float-end {
    float: right !important;
  }
  html[dir=rtl] .oj-lg-only-float-end {
    float: left !important;
  }
  .oj-lg-only-float-start {
    float: left !important;
  }
  html[dir=rtl] .oj-lg-only-float-start {
    float: right !important;
  }
}
/**
     * This idea/code is from zurb foundation, thanks zurb!
     *
     * In the jet sass files there are variables for
     * responsive screen sizes, these look something like
     *    $screenSmallRange:  0, 767px !default;
     *    $screenMediumRange: 768px, 1023px !default;
     *    $screenLargeRange:  1024px, 1280px !default;
     *    $screenXlargeRange: 1281px, null !default;
     *
     * These variables in turn are used to generate responsive media queries in variables like
     * $responsiveQuerySmallUp, $responsiveQueryMediumUp, etc.
     *
     * we send down these media queries as the font family in classes
     * that look something like this:
     *
     * .oj-mq-md {
     *    font-family: "/screen and (min-width: 768px)/";
     * }
     *
     * This function applies the class and then reads the font family off a dom
     * element to get the media query string
     *
     * example usage:
     *   var md_media_query = oj.ResponsiveUtils._getMediaQueryFromClass('oj-mq-md');
     */
.oj-mq-sm-up {
  font-family: "/print, screen/";
}

.oj-mq-md-up {
  font-family: "/print, screen and (min-width: 600px)/";
}

.oj-mq-lg-up {
  font-family: "/print and (orientation: landscape), screen and (min-width: 1024px)/";
}

.oj-mq-xl-up {
  font-family: "/screen and (min-width: 1440px)/";
}

.oj-mq-xxl-up {
  font-family: "/null/";
}

.oj-mq-sm-only {
  font-family: "/screen and (max-width: 599.9px)/";
}

.oj-mq-md-only {
  font-family: "/print and (orientation: portrait), screen and (min-width: 600px) and (max-width: 1023.9px)/";
}

.oj-mq-lg-only {
  font-family: "/print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1439.9px)/";
}

.oj-mq-xl-only {
  font-family: "/null/";
}

.oj-mq-md-down {
  font-family: "/print and (orientation: portrait), screen and (max-width: 1023.9px)/";
}

.oj-mq-lg-down {
  font-family: "/print and (orientation: landscape), screen and (max-width: 1439.9px)/";
}

.oj-mq-xl-down {
  font-family: "/null/";
}

.oj-mq-high-resolution {
  font-family: "/(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx)/";
}

:root {
  --oj-button-border-radius: var(--oj-core-border-radius-md);
  --oj-button-font-weight: 600;
  --oj-button-height: 2.75rem;
  --oj-button-sm-height: 2.25rem;
  --oj-button-lg-height: 3.25rem;
  --oj-button-font-size: var(--oj-typography-body-sm-font-size);
  --oj-button-sm-font-size: var(--oj-typography-body-sm-font-size);
  --oj-button-lg-font-size: var(--oj-typography-body-sm-font-size);
  --oj-button-text-to-edge-padding: 1rem;
  --oj-button-sm-text-to-edge-padding: 1rem;
  --oj-button-lg-text-to-edge-padding: 1.5rem;
  --oj-button-icon-to-text-padding: 0.625rem;
  --oj-button-sm-icon-to-text-padding: 0.5rem;
  --oj-button-lg-icon-to-text-padding: 1rem;
  --oj-button-icon-to-edge-padding: 0.625rem;
  --oj-button-sm-icon-to-edge-padding: 0.5rem;
  --oj-button-lg-icon-to-edge-padding: 1rem;
  --oj-button-solid-chrome-bg-color: rgba(var(--oj-palette-neutral-rgb-190), 0.08);
  --oj-button-solid-chrome-border-color: transparent;
  --oj-button-solid-chrome-text-color: var(--oj-core-text-color-primary);
  --oj-button-solid-chrome-bg-color-hover: rgba(var(--oj-palette-neutral-rgb-190), 0.12);
  --oj-button-solid-chrome-border-color-hover: transparent;
  --oj-button-solid-chrome-text-color-hover: var(--oj-core-text-color-primary);
  --oj-button-solid-chrome-bg-color-active: rgba(var(--oj-palette-neutral-rgb-190), 0.16);
  --oj-button-solid-chrome-border-color-active: transparent;
  --oj-button-solid-chrome-text-color-active: var(--oj-core-text-color-primary);
  --oj-button-solid-chrome-bg-color-disabled: var(--oj-core-color-disabled-1);
  --oj-button-solid-chrome-border-color-disabled: transparent;
  --oj-button-solid-chrome-text-color-disabled: var(--oj-core-text-color-disabled);
  --oj-button-solid-chrome-bg-color-selected: var(--oj-button-solid-chrome-bg-color);
  --oj-button-solid-chrome-border-color-selected: var(--oj-button-solid-chrome-border-color);
  --oj-button-solid-chrome-text-color-selected: var(--oj-button-solid-chrome-text-color);
  --oj-button-solid-chrome-bg-color-selected-hover: var(--oj-button-solid-chrome-bg-color-active);
  --oj-button-solid-chrome-border-color-selected-hover: var(--oj-button-solid-chrome-border-color-active);
  --oj-button-solid-chrome-text-color-selected-hover: var(--oj-button-solid-chrome-text-color-active);
  --oj-button-solid-chrome-bg-color-selected-disabled: rgba(var(--oj-palette-neutral-rgb-100), 0.3);
  --oj-button-solid-chrome-border-color-selected-disabled: transparent;
  --oj-button-solid-chrome-text-color-selected-disabled: var(--oj-core-text-color-disabled);
  --oj-private-button-ghost-chrome-text-color: var(--oj-core-text-color-primary);
  --oj-private-button-ghost-chrome-text-color-hover: var(--oj-core-text-color-primary);
  --oj-private-button-ghost-chrome-text-color-active: var(--oj-core-text-color-primary);
  --oj-button-borderless-chrome-text-color: var(--oj-core-text-color-primary);
  --oj-button-borderless-chrome-bg-color-hover: var(--oj-core-bg-color-hover);
  --oj-button-borderless-chrome-border-color-hover: transparent;
  --oj-button-borderless-chrome-text-color-hover: var(--oj-core-text-color-primary);
  --oj-button-borderless-chrome-bg-color-active: var(--oj-core-bg-color-active);
  --oj-button-borderless-chrome-border-color-active: transparent;
  --oj-button-borderless-chrome-text-color-active: var(--oj-core-text-color-primary);
  --oj-button-borderless-chrome-text-color-disabled: var(--oj-core-text-color-disabled);
  --oj-button-borderless-chrome-bg-color-selected: transparent;
  --oj-button-borderless-chrome-border-color-selected: rgba(var(--oj-palette-neutral-rgb-190), 0.5);
  --oj-button-borderless-chrome-text-color-selected: var(--oj-core-text-color-primary);
  --oj-button-borderless-chrome-bg-color-selected-hover: var(--oj-core-bg-color-hover);
  --oj-button-borderless-chrome-border-color-selected-hover: rgba(var(--oj-palette-neutral-rgb-190), 0.5);
  --oj-button-borderless-chrome-text-color-selected-hover: var(--oj-core-text-color-primary);
  --oj-button-borderless-chrome-bg-color-selected-disabled: transparent;
  --oj-button-borderless-chrome-border-color-selected-disabled: var(--oj-core-color-disabled-2);
  --oj-button-borderless-chrome-text-color-selected-disabled: var(--oj-core-text-color-disabled);
  --oj-button-outlined-chrome-border-color: rgba(var(--oj-palette-neutral-rgb-190), 0.5);
  --oj-button-outlined-chrome-text-color: var(--oj-core-text-color-primary);
  --oj-button-outlined-chrome-bg-color: transparent;
  --oj-button-outlined-chrome-bg-color-hover: var(--oj-core-bg-color-hover);
  --oj-button-outlined-chrome-border-color-hover: rgba(var(--oj-palette-neutral-rgb-190), 0.5);
  --oj-button-outlined-chrome-text-color-hover: var(--oj-core-text-color-primary);
  --oj-button-outlined-chrome-bg-color-active: var(--oj-core-bg-color-active);
  --oj-button-outlined-chrome-border-color-active: rgba(var(--oj-palette-neutral-rgb-190), 0.5);
  --oj-button-outlined-chrome-text-color-active: var(--oj-core-text-color-primary);
  --oj-button-outlined-chrome-border-color-disabled: var(--oj-core-text-color-disabled);
  --oj-button-outlined-chrome-text-color-disabled: var(--oj-core-text-color-disabled);
  --oj-button-outlined-chrome-bg-color-disabled: transparent;
  --oj-button-outlined-chrome-bg-color-selected: transparent;
  --oj-button-outlined-chrome-border-color-selected: rgba(var(--oj-palette-neutral-rgb-190), 0.5);
  --oj-button-outlined-chrome-text-color-selected: var(--oj-core-text-color-primary);
  --oj-button-outlined-chrome-bg-color-selected-hover: var(--oj-core-bg-color-hover);
  --oj-button-outlined-chrome-border-color-selected-hover: rgba(var(--oj-palette-neutral-rgb-190), 0.5);
  --oj-button-outlined-chrome-text-color-selected-hover: var(--oj-core-text-color-primary);
  --oj-button-outlined-chrome-bg-color-selected-disabled: transparent;
  --oj-button-outlined-chrome-border-color-selected-disabled: var(--oj-button-outlined-chrome-border-color-disabled);
  --oj-button-outlined-chrome-text-color-selected-disabled: var(--oj-core-text-color-disabled);
  --oj-button-call-to-action-chrome-bg-color: rgb(var(--oj-palette-neutral-rgb-170));
  --oj-button-call-to-action-chrome-border-color: transparent;
  --oj-button-call-to-action-chrome-text-color: var(--oj-core-neutral-contrast);
  --oj-button-call-to-action-chrome-bg-color-hover: rgb(var(--oj-palette-neutral-rgb-160));
  --oj-button-call-to-action-chrome-border-color-hover: transparent;
  --oj-button-call-to-action-chrome-text-color-hover: var(--oj-core-neutral-contrast);
  --oj-button-call-to-action-chrome-bg-color-active: rgb(var(--oj-palette-neutral-rgb-150));
  --oj-button-call-to-action-chrome-border-color-active: transparent;
  --oj-button-call-to-action-chrome-text-color-active: var(--oj-core-neutral-contrast);
  --oj-button-icon-size: var(--oj-core-icon-size-lg);
  --oj-button-sm-icon-size: 1.25rem;
  --oj-button-lg-icon-size: var(--oj-core-icon-size-lg);
  --oj-private-button-global-chroming-default: outlined;
}

:root {
  --oj-private-icon-color: var(--oj-core-text-color-primary);
  --oj-private-icon-color-default: var(--oj-button-borderless-chrome-text-color);
  --oj-private-icon-color-hover: var(--oj-button-borderless-chrome-text-color-hover);
  --oj-private-icon-bg-color-hover: var(--oj-button-borderless-chrome-bg-color-hover);
  --oj-private-icon-border-color-hover: var(--oj-button-borderless-chrome-border-color-hover);
  --oj-private-icon-color-active: var(--oj-button-borderless-chrome-text-color-active);
  --oj-private-icon-bg-color-active: var(--oj-button-borderless-chrome-bg-color-active);
  --oj-private-icon-border-color-active: var(--oj-button-borderless-chrome-border-color-active);
  --oj-private-icon-color-disabled: var(--oj-button-borderless-chrome-text-color-disabled);
}

.oj-fwk-icon-arrow-e:before, html:not([dir=rtl]) .oj-collapsible-close-icon:before, html:not([dir=rtl]) .oj-listview-collapse-icon:before,
html[dir=rtl] .oj-fwk-icon-arrow-start:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow-end:before {
  content: "\f101";
}

.oj-fwk-icon-arrow-n:before {
  content: "\f102";
}

.oj-fwk-icon-arrow-ne:before,
html[dir=rtl] .oj-fwk-icon-arrow-n-start:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow-n-end:before {
  content: "\f103";
}

.oj-fwk-icon-arrow-nw:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow-n-start:before,
html[dir=rtl] .oj-fwk-icon-arrow-n-end:before {
  content: "\f104";
}

.oj-fwk-icon-arrow-s:before,
.oj-button-menu-dropdown-icon:before {
  content: "\f105";
}

.oj-fwk-icon-arrow-se:before, html:not([dir=rtl]) .oj-collapsible-open-icon:before, html:not([dir=rtl]) .oj-listview-expand-icon:before,
html[dir=rtl] .oj-fwk-icon-arrow-s-start:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow-s-end:before {
  content: "\f106";
}

.oj-fwk-icon-arrow-sw:before, html[dir=rtl] .oj-collapsible-open-icon:before, html[dir=rtl] .oj-listview-expand-icon:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow-s-start:before,
html[dir=rtl] .oj-fwk-icon-arrow-s-end:before {
  content: "\f107";
}

.oj-fwk-icon-arrow-w:before, html[dir=rtl] .oj-collapsible-close-icon:before, html[dir=rtl] .oj-listview-collapse-icon:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow-start:before,
html[dir=rtl] .oj-fwk-icon-arrow-end:before {
  content: "\f108";
}

.oj-fwk-icon-arrow02-e:before, html:not([dir=rtl]) .oj-navigationlist-collapsible .oj-navigationlist-collapse-icon:before, .oj-navigationlist-collapsible html:not([dir=rtl]) .oj-navigationlist-collapse-icon:before,
html[dir=rtl] .oj-fwk-icon-arrow02-start:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow02-end:before {
  content: "\f109";
}

.oj-fwk-icon-arrow02-n:before {
  content: "\f10a";
}

.oj-fwk-icon-arrow02-s:before, .oj-button-menu-dropdown-icon:before,
.oj-button-menu-icon-only-dropdown-icon:before, .oj-navigationlist-collapsible .oj-navigationlist-expand-icon:before,
.oj-combobox-open-icon:before,
.oj-searchselect-open-icon:before,
.oj-select-open-icon:before {
  content: "\f10b";
}

.oj-fwk-icon-arrow02-w:before, html[dir=rtl] .oj-navigationlist-collapsible .oj-navigationlist-collapse-icon:before, .oj-navigationlist-collapsible html[dir=rtl] .oj-navigationlist-collapse-icon:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow02-start:before,
html[dir=rtl] .oj-fwk-icon-arrow02-end:before {
  content: "\f10c";
}

.oj-fwk-icon-arrow03-e:before, html:not([dir=rtl]) .oj-collapsed > .oj-tree-disclosure-icon:before, html:not([dir=rtl]) .oj-tree-drop-ptr:before,
html[dir=rtl] .oj-fwk-icon-arrow03-start:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow03-end:before,
html:not([dir=rtl]) .oj-datagrid-collapsed-icon:before,
html:not([dir=rtl]) .oj-menu-submenu-icon:before,
html:not([dir=rtl]) .oj-rowexpander-expand-icon:before,
html:not([dir=rtl]) .oj-collapsed > .oj-treeview-item-content > .oj-treeview-disclosure-icon:before {
  content: "\f10d";
}

.oj-fwk-icon-arrow03-n:before, .oj-table-column-header-asc-icon:before,
.oj-table-column-header-default-sort-icon:before, .oj-datagrid-sort-ascending-icon:before, .oj-datagrid-sort-default-icon:before {
  content: "\f10e";
}

.oj-fwk-icon-arrow03-ne:before,
html[dir=rtl] .oj-fwk-icon-arrow03-n-start:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow03-n-end:before {
  content: "\f10f";
}

.oj-fwk-icon-arrow03-nw:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow03-n-start:before,
html[dir=rtl] .oj-fwk-icon-arrow03-n-end:before {
  content: "\f110";
}

.oj-fwk-icon-arrow03-s:before, .oj-table-column-header-dsc-icon:before, .oj-datagrid-sort-descending-icon:before,
.oj-rowexpander-collapse-icon:before {
  content: "\f111";
}

.oj-fwk-icon-arrow03-se:before, html:not([dir=rtl]) .oj-expanded > .oj-tree-disclosure-icon:before, html:not([dir=rtl]) .oj-rowexpander-collapse-icon:before,
html[dir=rtl] .oj-fwk-icon-arrow03-s-start:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow03-s-end:before,
html:not([dir=rtl]) .oj-datagrid-expanded-icon:before,
html:not([dir=rtl]) .oj-expanded > .oj-treeview-item-content > .oj-treeview-disclosure-icon:before {
  content: "\f112";
}

.oj-fwk-icon-arrow03-sw:before, html[dir=rtl] .oj-expanded > .oj-tree-disclosure-icon:before, html[dir=rtl] .oj-rowexpander-collapse-icon:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow03-s-start:before,
html[dir=rtl] .oj-fwk-icon-arrow03-s-end:before,
html[dir=rtl] .oj-datagrid-expanded-icon:before,
html[dir=rtl] .oj-expanded > .oj-treeview-item-content > .oj-treeview-disclosure-icon:before {
  content: "\f113";
}

.oj-fwk-icon-arrow03-w:before, html[dir=rtl] .oj-collapsed > .oj-tree-disclosure-icon:before, html[dir=rtl] .oj-tree-drop-ptr:before,
html:not([dir=rtl]) .oj-fwk-icon-arrow03-start:before,
html[dir=rtl] .oj-fwk-icon-arrow03-end:before,
html[dir=rtl] .oj-datagrid-collapsed-icon:before,
html[dir=rtl] .oj-menu-submenu-icon:before,
html[dir=rtl] .oj-rowexpander-expand-icon:before,
html[dir=rtl] .oj-collapsed > .oj-treeview-item-content > .oj-treeview-disclosure-icon:before {
  content: "\f114";
}

.oj-fwk-icon-arrowbox-n:before {
  content: "\f115";
}

.oj-fwk-icon-arrowtail-e:before,
html[dir=rtl] .oj-fwk-icon-arrowtail-start:before,
html[dir=rtl] .oj-fwk-icon-back:before,
html[dir=rtl] .oj-hybrid-applayout-header-icon-back:before,
html:not([dir=rtl]) .oj-fwk-icon-arrowtail-end:before,
html:not([dir=rtl]) .oj-fwk-icon-next:before {
  content: "\f116";
}

.oj-fwk-icon-arrowtail-n:before {
  content: "\f117";
}

.oj-fwk-icon-arrowtail-s:before {
  content: "\f118";
}

.oj-fwk-icon-arrowtail-w:before,
html:not([dir=rtl]) .oj-fwk-icon-arrowtail-start:before,
html:not([dir=rtl]) .oj-fwk-icon-back:before,
html:not([dir=rtl]) .oj-hybrid-applayout-header-icon-back:before,
html[dir=rtl] .oj-fwk-icon-arrowtail-end:before,
html[dir=rtl] .oj-fwk-icon-next:before {
  content: "\f119";
}

.oj-fwk-icon-back:before,
.oj-hybrid-applayout-header-icon-back:before {
  content: "\f11a";
}

.oj-fwk-icon-calendar-clock:before,
.oj-inputdatetime-calendar-clock-icon:before {
  content: "\f11b";
}

.oj-fwk-icon-calendar:before,
.oj-inputdatetime-calendar-icon:before {
  content: "\f11c";
}

.oj-fwk-icon-caret-e:before, html[dir=rtl] .oj-fwk-icon-back:before, html:not([dir=rtl]) .oj-fwk-icon-next:before, html[dir=rtl] .oj-hybrid-applayout-header-icon-back:before,
html[dir=rtl] .oj-fwk-icon-caret-start:before,
html[dir=rtl] .oj-conveyorbelt-overflow-icon.oj-start:before,
html[dir=rtl] .oj-filmstrip-arrow-icon.oj-start:before,
html[dir=rtl] .oj-inputsearch-back-icon:before,
html[dir=rtl] .oj-navigationlist-previous-icon:before,
html[dir=rtl] .oj-searchselect-back-icon:before,
html:not([dir=rtl]) .oj-fwk-icon-caret-end:before,
html:not([dir=rtl]) .oj-collapsible-close-icon:before,
html:not([dir=rtl]) .oj-listview-collapse-icon:before,
html:not([dir=rtl]) .oj-listview-drill-icon:before,
html:not([dir=rtl]) .oj-conveyorbelt-overflow-icon.oj-end:before,
html:not([dir=rtl]) .oj-filmstrip-arrow-icon.oj-end:before,
html:not([dir=rtl]) .oj-navigationlist-collapsible .oj-navigationlist-collapse-icon:before,
.oj-navigationlist-collapsible html:not([dir=rtl]) .oj-navigationlist-collapse-icon:before,
html:not([dir=rtl]) .oj-navigationlist-slider .oj-navigationlist-collapse-icon:before,
.oj-navigationlist-slider html:not([dir=rtl]) .oj-navigationlist-collapse-icon:before,
html[dir=rtl] .oj-datepicker-prev-icon:before,
html:not([dir=rtl]) .oj-datepicker-next-icon:before {
  content: "\f11d";
}

.oj-fwk-icon-caret-n:before,
.oj-conveyorbelt-overflow-icon.oj-top:before,
.oj-datagrid-sort-ascending-icon:before,
.oj-filmstrip-arrow-icon.oj-top:before,
.oj-inputnumber-up-icon:before,
.oj-table-column-header-asc-icon:before {
  content: "\f11e";
}

.oj-fwk-icon-caret-s:before,
.oj-collapsible-open-icon:before,
.oj-listview-expand-icon:before,
.oj-conveyorbelt-overflow-icon.oj-bottom:before,
.oj-datagrid-sort-descending-icon:before,
.oj-filmstrip-arrow-icon.oj-bottom:before,
.oj-inputnumber-down-icon:before,
.oj-navigationlist-collapsible .oj-navigationlist-expand-icon:before,
.oj-table-column-header-dsc-icon:before {
  content: "\f11f";
}

.oj-fwk-icon-caret-w:before, html:not([dir=rtl]) .oj-fwk-icon-back:before, html[dir=rtl] .oj-fwk-icon-next:before, html:not([dir=rtl]) .oj-hybrid-applayout-header-icon-back:before,
html:not([dir=rtl]) .oj-fwk-icon-caret-start:before,
html:not([dir=rtl]) .oj-conveyorbelt-overflow-icon.oj-start:before,
html:not([dir=rtl]) .oj-filmstrip-arrow-icon.oj-start:before,
html:not([dir=rtl]) .oj-inputsearch-back-icon:before,
html:not([dir=rtl]) .oj-navigationlist-previous-icon:before,
html:not([dir=rtl]) .oj-searchselect-back-icon:before,
html[dir=rtl] .oj-fwk-icon-caret-end:before,
html[dir=rtl] .oj-collapsible-close-icon:before,
html[dir=rtl] .oj-listview-collapse-icon:before,
html[dir=rtl] .oj-listview-drill-icon:before,
html[dir=rtl] .oj-conveyorbelt-overflow-icon.oj-end:before,
html[dir=rtl] .oj-filmstrip-arrow-icon.oj-end:before,
html[dir=rtl] .oj-navigationlist-collapsible .oj-navigationlist-collapse-icon:before,
.oj-navigationlist-collapsible html[dir=rtl] .oj-navigationlist-collapse-icon:before,
html[dir=rtl] .oj-navigationlist-slider .oj-navigationlist-collapse-icon:before,
.oj-navigationlist-slider html[dir=rtl] .oj-navigationlist-collapse-icon:before,
html:not([dir=rtl]) .oj-datepicker-prev-icon:before,
html[dir=rtl] .oj-datepicker-next-icon:before {
  content: "\f120";
}

.oj-fwk-icon-caret02-e:before,
html[dir=rtl] .oj-fwk-icon-caret02-start:before,
html:not([dir=rtl]) .oj-fwk-icon-caret02-end:before,
html[dir=rtl] .oj-pagingcontrol-nav-previous-icon:before,
html:not([dir=rtl]) .oj-pagingcontrol-nav-next-icon:before {
  content: "\f121";
}

.oj-fwk-icon-caret02-n:before,
.oj-pagingcontrol-nav-previous-vertical-icon:before {
  content: "\f122";
}

.oj-fwk-icon-caret02-s:before,
.oj-pagingcontrol-nav-next-vertical-icon:before {
  content: "\f123";
}

.oj-fwk-icon-caret02-w:before,
html:not([dir=rtl]) .oj-fwk-icon-caret02-start:before,
html[dir=rtl] .oj-fwk-icon-caret02-end:before,
html:not([dir=rtl]) .oj-pagingcontrol-nav-previous-icon:before,
html[dir=rtl] .oj-pagingcontrol-nav-next-icon:before {
  content: "\f124";
}

.oj-fwk-icon-caret02end-e:before,
html[dir=rtl] .oj-fwk-icon-caret02end-start:before,
html:not([dir=rtl]) .oj-fwk-icon-caret02end-end:before,
html[dir=rtl] .oj-pagingcontrol-nav-first-icon:before,
html:not([dir=rtl]) .oj-pagingcontrol-nav-last-icon:before {
  content: "\f125";
}

.oj-fwk-icon-caret02end-n:before,
.oj-pagingcontrol-nav-first-vertical-icon:before {
  content: "\f126";
}

.oj-fwk-icon-caret02end-s:before,
.oj-pagingcontrol-nav-last-vertical-icon:before {
  content: "\f127";
}

.oj-fwk-icon-caret02end-w:before,
html:not([dir=rtl]) .oj-fwk-icon-caret02end-start:before,
html[dir=rtl] .oj-fwk-icon-caret02end-end:before,
html:not([dir=rtl]) .oj-pagingcontrol-nav-first-icon:before,
html[dir=rtl] .oj-pagingcontrol-nav-last-icon:before {
  content: "\f128";
}

.oj-fwk-icon-caret03-e:before, html:not([dir=rtl]) .oj-navigationlist-slider .oj-navigationlist-collapse-icon:before, .oj-navigationlist-slider html:not([dir=rtl]) .oj-navigationlist-collapse-icon:before,
html[dir=rtl] .oj-fwk-icon-caret03-start:before,
html:not([dir=rtl]) .oj-fwk-icon-caret03-end:before,
html:not([dir=rtl]) .oj-menu-submenu-icon:before {
  content: "\f129";
}

.oj-fwk-icon-caret03-n:before {
  content: "\f12a";
}

.oj-fwk-icon-caret03-s:before {
  content: "\f12b";
}

.oj-fwk-icon-caret03-w:before, html[dir=rtl] .oj-navigationlist-slider .oj-navigationlist-collapse-icon:before, .oj-navigationlist-slider html[dir=rtl] .oj-navigationlist-collapse-icon:before,
html:not([dir=rtl]) .oj-fwk-icon-caret03-start:before,
html[dir=rtl] .oj-fwk-icon-caret03-end:before,
html[dir=rtl] .oj-menu-submenu-icon:before {
  content: "\f12c";
}

.oj-fwk-icon-checkbox-mixed:before,
.oj-selector:hover .oj-selector-wrapper.oj-indeterminate:before,
.oj-selector .oj-selector-wrapper.oj-indeterminate:before,
.oj-selector:active .oj-selector-wrapper.oj-indeterminate:before {
  content: "\f12d";
}

.oj-fwk-icon-checkbox-off:before,
.oj-checkboxset .oj-radiocheckbox-icon:before,
.oj-checkboxset .oj-hover .oj-radiocheckbox-icon:before,
.oj-checkboxset .oj-disabled .oj-radiocheckbox-icon:before,
.oj-selector:active .oj-selector-wrapper:not(.oj-indeterminate):not(.oj-selected):before,
.oj-selector .oj-selector-wrapper:not(.oj-indeterminate):not(.oj-selected):before,
.oj-selector:hover .oj-selector-wrapper:not(.oj-indeterminate):not(.oj-selected):before {
  content: "\f12e";
}

.oj-fwk-icon-checkbox-on:before,
.oj-checkboxset .oj-selected.oj-hover .oj-radiocheckbox-icon:before,
.oj-checkboxset .oj-selected .oj-radiocheckbox-icon:before,
.oj-checkboxset .oj-disabled.oj-selected .oj-radiocheckbox-icon:before,
.oj-selector .oj-selector-wrapper.oj-selected:before,
.oj-selector:active .oj-selector-wrapper.oj-selected:before,
.oj-selector:hover .oj-selector-wrapper.oj-selected:before {
  content: "\f12f";
}

.oj-fwk-icon-checkmark:before, .oj-train-icon.oj-confirmation:before,
.oj-menucheckbox-icon.oj-selected:before {
  content: "\f130";
}

.oj-fwk-icon-clock:before,
.oj-inputdatetime-time-icon:before {
  content: "\f131";
}

.oj-fwk-icon-corner-drag:before {
  content: "\f132";
}

.oj-fwk-icon-cross:before, .oj-progressstatus-cancel-icon:before,
.oj-combobox-clear-entry-icon:before,
.oj-panel-remove-icon:before,
.oj-select-clear-entry-icon:before,
.oj-tabbar-remove-icon:before {
  content: "\f133";
}

.oj-fwk-icon-cross02:before,
.oj-inputtext-clear-icon:before,
.oj-inputsearch-clear-icon:before,
.oj-menu-option-start-icon .oj-menu-cancel-icon:before,
.oj-searchselect-clear-value-icon:before {
  content: "\f134";
}

.oj-fwk-icon-cross03:before, .oj-tabs-close-icon:before, .oj-inputtext-clear-icon:before, .oj-inputdatetime-clear-icon:before, .oj-searchselect-clear-value-icon:before {
  content: "\f135";
}

.oj-fwk-icon-dots-horizontal:before, .oj-navigationlist-overflow-item-icon:before, .oj-tabbar-overflow-item-icon:before,
.oj-button-menu-icon-only-dropdown-icon:before {
  content: "\f136";
}

.oj-fwk-icon-dots-vertical:before, .oj-select-multiple-open-icon:before,
.oj-navigationlist-overflow-item-icon:before,
.oj-tabbar-overflow-item-icon:before {
  content: "\f137";
}

.oj-fwk-icon-drag-horizontal:before {
  content: "\f138";
}

.oj-fwk-icon-drag-vertical:before {
  content: "\f139";
}

.oj-fwk-icon-drag:before,
.oj-listview-card .oj-listview-drag-handle:before,
.oj-listview-card-layout .oj-listview-drag-handle:before,
.oj-listview-drag-handle:before,
.oj-panel-drag-icon:before {
  content: "\f13a";
}

.oj-fwk-icon-folderhierarchy:before,
.oj-hier-icon:before {
  content: "\f13b";
}

.oj-fwk-icon-grid:before {
  content: "\f13c";
}

.oj-fwk-icon-hamburger:before,
.oj-web-applayout-offcanvas-icon:before {
  content: "\f13d";
}

.oj-fwk-icon-help:before,
.oj-label-help-icon:before {
  content: "\f13e";
}

.oj-fwk-icon-info:before, .oj-train-icon.oj-info:before {
  content: "\f13f";
}

.oj-fwk-icon-list:before {
  content: "\f140";
}

.oj-fwk-icon-magnifier:before, .oj-listbox-search-icon:before,
.oj-inputsearch-search-icon:before {
  content: "\f141";
}

.oj-fwk-icon-marquee:before {
  content: "\f142";
}

.oj-fwk-icon-maximize:before,
.oj-panel-expand-icon:before {
  content: "\f143";
}

.oj-fwk-icon-message-confirmation:before,
.oj-message-status-icon.oj-message-confirmation-icon:before,
.oj-train-icon.oj-confirmation:before {
  content: "\f144";
}

.oj-fwk-icon-message-error:before,
.oj-message-status-icon.oj-message-error-icon:before,
.oj-train-icon.oj-error:before {
  content: "\f145";
}

.oj-fwk-icon-message-info:before,
.oj-message-status-icon.oj-message-info-icon:before,
.oj-train-icon.oj-info:before {
  content: "\f146";
}

.oj-fwk-icon-message-warning:before,
.oj-message-status-icon.oj-message-warning-icon:before,
.oj-train-icon.oj-warning:before {
  content: "\f147";
}

.oj-fwk-icon-minimize:before,
.oj-panel-collapse-icon:before {
  content: "\f148";
}

.oj-fwk-icon-minus:before {
  content: "\f149";
}

.oj-fwk-icon-next:before {
  content: "\f14a";
}

.oj-fwk-icon-node-collapse:before {
  content: "\f14b";
}

.oj-fwk-icon-node-expand:before {
  content: "\f14c";
}

.oj-fwk-icon-pan:before {
  content: "\f14d";
}

.oj-fwk-icon-plus:before {
  content: "\f14e";
}

.oj-fwk-icon-radiobutton-off:before,
.oj-radioset .oj-radiocheckbox-icon:before,
.oj-radioset .oj-hover .oj-radiocheckbox-icon:before,
.oj-radioset .oj-disabled .oj-radiocheckbox-icon:before {
  content: "\f14f";
}

.oj-fwk-icon-radiobutton-on:before,
.oj-radioset .oj-selected .oj-radiocheckbox-icon:before,
.oj-radioset .oj-selected.oj-hover .oj-radiocheckbox-icon:before,
.oj-radioset .oj-disabled.oj-selected .oj-radiocheckbox-icon:before {
  content: "\f150";
}

.oj-fwk-icon-sort:before,
.oj-datagrid-sort-default-icon:before,
.oj-table-column-header-default-sort-icon:before {
  content: "\f151";
}

.oj-fwk-icon-sortrelevancehigh:before {
  content: "\f152";
}

.oj-fwk-icon-tree-document:before,
.oj-treeview-leaf > .oj-treeview-item-content > .oj-treeview-item-icon:before {
  content: "\f153";
}

.oj-fwk-icon-tree-folder-collapsed:before,
.oj-collapsed > .oj-treeview-item-content > .oj-treeview-item-icon:before {
  content: "\f154";
}

.oj-fwk-icon-tree-folder-open:before,
.oj-expanded > .oj-treeview-item-content > .oj-treeview-item-icon:before {
  content: "\f155";
}

.oj-fwk-icon-tristate-partial:before {
  content: "\f156";
}

.oj-fwk-icon-users:before,
.oj-avatar-group-image .oj-avatar-placeholder-icon:before {
  content: "\f157";
}

.oj-fwk-icon-view-hide:before,
.oj-inputpassword-hide-password-icon:before {
  content: "\f158";
}

.oj-fwk-icon-view:before,
.oj-inputpassword-show-password-icon:before {
  content: "\f159";
}

.oj-fwk-icon-warning:before, .oj-train-icon.oj-error:before, .oj-train-icon.oj-warning:before {
  content: "\f15a";
}

.oj-fwk-icon-zoom-in:before {
  content: "\f15b";
}

.oj-fwk-icon-zoom-out:before {
  content: "\f15c";
}

/* Icons
    --------------------------------------------------------------------*/
@font-face {
  font-family: "JetInternal IconFont";
  src: url("fonts/internal_iconfont.woff2") format("woff");
}
/*--------------------------------------------------------------------
    /  Generic style that can be used for widget images
    /  You can use the mixin ("oj-icon-content") to generate
    /  a class with additions/overrides
    /
    /  For example let's say you used the mixin ("oj-icon-content") to
    /  generate a class ".binky-icon". You
    /  could then put class="oj-icon binky-icon" on your dom element.
    --------------------------------------------------------------------*/
.oj-fwk-icon,
.oj-panel-drag-icon,
.oj-panel-expand-icon,
.oj-panel-collapse-icon,
.oj-panel-remove-icon,
.oj-listview-drill-icon,
.oj-listview-drag-handle,
.oj-web-applayout-offcanvas-icon, .oj-progressstatus-cancel-icon,
.oj-avatar-placeholder-icon,
.oj-component-icon,
.oj-popup-tail.oj-popup-tail-simple,
.oj-menucheckbox-icon {
  font-family: "JetInternal IconFont";
  font-size: var(--oj-core-icon-size-lg);
  line-height: 1;
  display: inline-block;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  color: var(--oj-private-icon-color);
  text-align: center;
  box-sizing: content-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.oj-fwk-icon:before, .oj-progressstatus-cancel-icon:before,
.oj-web-applayout-offcanvas-icon:before,
.oj-avatar-placeholder-icon:before,
.oj-listview-drill-icon:before,
.oj-listview-drag-handle:before,
.oj-panel-drag-icon:before,
.oj-panel-expand-icon:before,
.oj-panel-collapse-icon:before,
.oj-panel-remove-icon:before,
.oj-component-icon:before,
.oj-popup-tail.oj-popup-tail-simple:before,
.oj-menucheckbox-icon:before {
  display: inline-block;
}

/*--------------------------------------------------------------------
    /  Generic style that can be used for images
    /  App developers can use the mixin ("oj-icon-content") to generate
    /  a class with additions/overrides
    /
    /  For example let's say you used the mixin ("oj-icon-content") to
    /  generate a class ".binky-icon". You
    /  could then put class="oj-icon binky-icon" on your dom element.
    --------------------------------------------------------------------*/
.oj-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 1;
  overflow: hidden;
  direction: ltr;
  text-align: center;
  box-sizing: content-box;
}

.oj-icon:before {
  display: inline-block;
  box-sizing: content-box;
}

a .oj-clickable-icon,
a.oj-clickable-icon,
a.oj-clickable-icon-nocontext {
  font-weight: normal;
}

a .oj-clickable-icon,
a.oj-clickable-icon,
a.oj-clickable-icon-nocontext,
a:visited .oj-clickable-icon,
a:visited.oj-clickable-icon,
a:visited.oj-clickable-icon-nocontext,
.oj-default .oj-clickable-icon,
.oj-default.oj-clickable-icon,
.oj-default.oj-clickable-icon-nocontext {
  color: var(--oj-private-icon-color-default);
}

a:hover .oj-clickable-icon,
a:hover.oj-clickable-icon,
a:hover.oj-clickable-icon-nocontext,
.oj-hover .oj-clickable-icon,
.oj-hover.oj-clickable-icon,
.oj-hover.oj-clickable-icon-nocontext {
  color: var(--oj-private-icon-color-hover);
  text-decoration: none;
}

a:active .oj-clickable-icon,
a:active.oj-clickable-icon,
a:active.oj-clickable-icon-nocontext,
.oj-active .oj-clickable-icon,
.oj-active.oj-clickable-icon,
.oj-active.oj-clickable-icon-nocontext {
  color: var(--oj-private-icon-color-active);
}

a.oj-disabled .oj-clickable-icon,
a.oj-disabled.oj-clickable-icon,
a.oj-disabled.oj-clickable-icon-nocontext,
.oj-disabled .oj-clickable-icon,
.oj-disabled a .oj-clickable-icon,
.oj-disabled.oj-clickable-icon,
.oj-disabled.oj-clickable-icon-nocontext {
  color: var(--oj-private-icon-color-disabled);
}

.oj-fwk-icon-load:before, .oj-tree-loading .oj-tree-icon:before,
.oj-collapsed a.oj-tree-loading > .oj-tree-node-icon.oj-tree-icon:before, .oj-listview-expanding-icon:before,
.oj-rowexpander-lazyload-icon:before {
  content: url("images/node_anim.gif");
}

.oj-contrast-marker,
.oj-color-invert {
  --oj-private-icon-color: var(--oj-core-text-color-primary);
  --oj-private-icon-color-default: var(--oj-button-borderless-chrome-text-color);
  --oj-private-icon-color-hover: var(--oj-button-borderless-chrome-text-color-hover);
  --oj-private-icon-bg-color-hover: var(--oj-button-borderless-chrome-bg-color-hover);
  --oj-private-icon-border-color-hover: var(--oj-button-borderless-chrome-border-color-hover);
  --oj-private-icon-color-active: var(--oj-button-borderless-chrome-text-color-active);
  --oj-private-icon-bg-color-active: var(--oj-button-borderless-chrome-bg-color-active);
  --oj-private-icon-border-color-active: var(--oj-button-borderless-chrome-border-color-active);
  --oj-private-icon-color-disabled: var(--oj-button-borderless-chrome-text-color-disabled);
}

/* Grid HTML Classes */
.oj-flex {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.oj-flex-item {
  flex: auto;
  box-sizing: border-box;
}

.oj-flex-bar,
.oj-hybrid-applayout-header,
.oj-hybrid-applayout-header-no-border,
.oj-hybrid-applayout-toolbar-stretch {
  position: relative;
}

.oj-flex-bar,
.oj-hybrid-applayout-header,
.oj-hybrid-applayout-header-no-border,
.oj-hybrid-applayout-toolbar-stretch,
.oj-flex-bar-start,
.oj-flex-bar-middle,
.oj-hybrid-applayout-bar-title,
.oj-flex-bar-end,
.oj-flex-bar-center-absolute {
  box-sizing: border-box;
  display: flex;
}

.oj-flex-bar-middle,
.oj-hybrid-applayout-bar-title {
  flex: auto;
}

.oj-flex-bar-end {
  margin-inline-start: auto;
}

.oj-flex-bar-center-absolute, .oj-hybrid-applayout-bar-title {
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  top: 0;
}

@media print, screen {
  .oj-sm-flex-items-0 > .oj-flex-item {
    flex: 0;
  }
  .oj-sm-flex-items-1 > .oj-flex-item {
    flex: 1;
  }
  .oj-sm-flex-items-initial > .oj-flex-item {
    flex: 0 1 auto;
  }
  .oj-sm-flex-0 {
    flex: 0 !important;
  }
  .oj-sm-flex-1 {
    flex: 1 !important;
  }
  .oj-sm-flex-initial {
    flex: 0 1 auto !important;
  }
  .oj-sm-justify-content-flex-start {
    justify-content: flex-start !important;
  }
  .oj-sm-justify-content-flex-end {
    justify-content: flex-end !important;
  }
  .oj-sm-justify-content-center {
    justify-content: center !important;
  }
  .oj-sm-justify-content-space-between {
    justify-content: space-between !important;
  }
  .oj-sm-justify-content-space-around {
    justify-content: space-around !important;
  }
  .oj-sm-align-items-center,
  .oj-hybrid-applayout-header,
  .oj-hybrid-applayout-header-no-border {
    align-items: center !important;
  }
  .oj-sm-align-items-baseline {
    align-items: baseline !important;
  }
  .oj-sm-align-items-flex-start {
    align-items: flex-start !important;
  }
  .oj-sm-align-items-flex-end {
    align-items: flex-end !important;
  }
  .oj-sm-align-self-center {
    align-self: center !important;
  }
  .oj-sm-align-self-flex-start {
    align-self: flex-start !important;
  }
  .oj-sm-align-self-flex-end {
    align-self: flex-end !important;
  }
  .oj-sm-flex-direction-column {
    flex-direction: column !important;
  }
  .oj-sm-flex-wrap-nowrap {
    flex-wrap: nowrap !important;
  }
}
@media print, screen and (min-width: 600px) {
  .oj-md-flex-items-0 > .oj-flex-item {
    flex: 0;
  }
  .oj-md-flex-items-1 > .oj-flex-item {
    flex: 1;
  }
  .oj-md-flex-items-initial > .oj-flex-item {
    flex: 0 1 auto;
  }
  .oj-md-flex-0 {
    flex: 0 !important;
  }
  .oj-md-flex-1 {
    flex: 1 !important;
  }
  .oj-md-flex-initial {
    flex: 0 1 auto !important;
  }
  .oj-md-order-0 {
    order: 0 !important;
  }
  .oj-md-order-1 {
    order: 1 !important;
  }
  .oj-md-order-2 {
    order: 2 !important;
  }
  .oj-md-order-3 {
    order: 3 !important;
  }
  .oj-md-order-4 {
    order: 4 !important;
  }
  .oj-md-order-5 {
    order: 5 !important;
  }
  .oj-md-justify-content-flex-start {
    justify-content: flex-start !important;
  }
  .oj-md-justify-content-flex-end {
    justify-content: flex-end !important;
  }
  .oj-md-justify-content-center {
    justify-content: center !important;
  }
  .oj-md-justify-content-space-between {
    justify-content: space-between !important;
  }
  .oj-md-justify-content-space-around {
    justify-content: space-around !important;
  }
  .oj-md-align-items-center {
    align-items: center !important;
  }
  .oj-md-align-items-baseline {
    align-items: baseline !important;
  }
  .oj-md-align-items-flex-start {
    align-items: flex-start !important;
  }
  .oj-md-align-items-flex-end {
    align-items: flex-end !important;
  }
  .oj-md-align-self-center {
    align-self: center !important;
  }
  .oj-md-align-self-flex-start {
    align-self: flex-start !important;
  }
  .oj-md-align-self-flex-end {
    align-self: flex-end !important;
  }
  .oj-md-flex-direction-column {
    flex-direction: column !important;
  }
  .oj-md-flex-wrap-nowrap {
    flex-wrap: nowrap !important;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-lg-flex-items-0 > .oj-flex-item {
    flex: 0;
  }
  .oj-lg-flex-items-1 > .oj-flex-item {
    flex: 1;
  }
  .oj-lg-flex-items-initial > .oj-flex-item {
    flex: 0 1 auto;
  }
  .oj-lg-flex-0 {
    flex: 0 !important;
  }
  .oj-lg-flex-1 {
    flex: 1 !important;
  }
  .oj-lg-flex-initial {
    flex: 0 1 auto !important;
  }
  .oj-lg-order-0 {
    order: 0 !important;
  }
  .oj-lg-order-1 {
    order: 1 !important;
  }
  .oj-lg-order-2 {
    order: 2 !important;
  }
  .oj-lg-order-3 {
    order: 3 !important;
  }
  .oj-lg-order-4 {
    order: 4 !important;
  }
  .oj-lg-order-5 {
    order: 5 !important;
  }
  .oj-lg-justify-content-flex-start {
    justify-content: flex-start !important;
  }
  .oj-lg-justify-content-flex-end {
    justify-content: flex-end !important;
  }
  .oj-lg-justify-content-center {
    justify-content: center !important;
  }
  .oj-lg-justify-content-space-between {
    justify-content: space-between !important;
  }
  .oj-lg-justify-content-space-around {
    justify-content: space-around !important;
  }
  .oj-lg-align-items-center {
    align-items: center !important;
  }
  .oj-lg-align-items-baseline {
    align-items: baseline !important;
  }
  .oj-lg-align-items-flex-start {
    align-items: flex-start !important;
  }
  .oj-lg-align-items-flex-end {
    align-items: flex-end !important;
  }
  .oj-lg-align-self-center {
    align-self: center !important;
  }
  .oj-lg-align-self-flex-start {
    align-self: flex-start !important;
  }
  .oj-lg-align-self-flex-end {
    align-self: flex-end !important;
  }
  .oj-lg-flex-direction-column {
    flex-direction: column !important;
  }
  .oj-lg-flex-wrap-nowrap {
    flex-wrap: nowrap !important;
  }
}
@media screen and (min-width: 1440px) {
  .oj-xl-flex-items-0 > .oj-flex-item {
    flex: 0;
  }
  .oj-xl-flex-items-1 > .oj-flex-item {
    flex: 1;
  }
  .oj-xl-flex-items-initial > .oj-flex-item {
    flex: 0 1 auto;
  }
  .oj-xl-flex-0 {
    flex: 0 !important;
  }
  .oj-xl-flex-1 {
    flex: 1 !important;
  }
  .oj-xl-flex-initial {
    flex: 0 1 auto !important;
  }
  .oj-xl-order-0 {
    order: 0 !important;
  }
  .oj-xl-order-1 {
    order: 1 !important;
  }
  .oj-xl-order-2 {
    order: 2 !important;
  }
  .oj-xl-order-3 {
    order: 3 !important;
  }
  .oj-xl-order-4 {
    order: 4 !important;
  }
  .oj-xl-order-5 {
    order: 5 !important;
  }
  .oj-xl-justify-content-flex-start {
    justify-content: flex-start !important;
  }
  .oj-xl-justify-content-flex-end {
    justify-content: flex-end !important;
  }
  .oj-xl-justify-content-center {
    justify-content: center !important;
  }
  .oj-xl-justify-content-space-between {
    justify-content: space-between !important;
  }
  .oj-xl-justify-content-space-around {
    justify-content: space-around !important;
  }
  .oj-xl-align-items-center {
    align-items: center !important;
  }
  .oj-xl-align-items-baseline {
    align-items: baseline !important;
  }
  .oj-xl-align-items-flex-start {
    align-items: flex-start !important;
  }
  .oj-xl-align-items-flex-end {
    align-items: flex-end !important;
  }
  .oj-xl-align-self-center {
    align-self: center !important;
  }
  .oj-xl-align-self-flex-start {
    align-self: flex-start !important;
  }
  .oj-xl-align-self-flex-end {
    align-self: flex-end !important;
  }
  .oj-xl-flex-direction-column {
    flex-direction: column !important;
  }
  .oj-xl-flex-wrap-nowrap {
    flex-wrap: nowrap !important;
  }
}
@media screen and (max-width: 599.9px) {
  .oj-sm-only-flex-items-0 > .oj-flex-item {
    flex: 0;
  }
  .oj-sm-only-flex-items-1 > .oj-flex-item {
    flex: 1;
  }
  .oj-sm-only-flex-items-initial > .oj-flex-item {
    flex: 0 1 auto;
  }
  .oj-sm-only-flex-0 {
    flex: 0 !important;
  }
  .oj-sm-only-flex-1 {
    flex: 1 !important;
  }
  .oj-sm-only-flex-initial {
    flex: 0 1 auto !important;
  }
  .oj-sm-only-justify-content-flex-start {
    justify-content: flex-start !important;
  }
  .oj-sm-only-justify-content-flex-end {
    justify-content: flex-end !important;
  }
  .oj-sm-only-justify-content-center {
    justify-content: center !important;
  }
  .oj-sm-only-justify-content-space-between {
    justify-content: space-between !important;
  }
  .oj-sm-only-justify-content-space-around {
    justify-content: space-around !important;
  }
  .oj-sm-only-align-items-center {
    align-items: center !important;
  }
  .oj-sm-only-align-items-baseline {
    align-items: baseline !important;
  }
  .oj-sm-only-align-items-flex-start {
    align-items: flex-start !important;
  }
  .oj-sm-only-align-items-flex-end {
    align-items: flex-end !important;
  }
  .oj-sm-only-align-self-center {
    align-self: center !important;
  }
  .oj-sm-only-align-self-flex-start {
    align-self: flex-start !important;
  }
  .oj-sm-only-align-self-flex-end {
    align-self: flex-end !important;
  }
  .oj-sm-only-flex-direction-column {
    flex-direction: column !important;
  }
  .oj-sm-only-flex-wrap-nowrap {
    flex-wrap: nowrap !important;
  }
}
@media print and (orientation: portrait), screen and (min-width: 600px) and (max-width: 1023.9px) {
  .oj-md-only-flex-items-0 > .oj-flex-item {
    flex: 0;
  }
  .oj-md-only-flex-items-1 > .oj-flex-item {
    flex: 1;
  }
  .oj-md-only-flex-items-initial > .oj-flex-item {
    flex: 0 1 auto;
  }
  .oj-md-only-flex-0 {
    flex: 0 !important;
  }
  .oj-md-only-flex-1 {
    flex: 1 !important;
  }
  .oj-md-only-flex-initial {
    flex: 0 1 auto !important;
  }
  .oj-md-only-justify-content-flex-start {
    justify-content: flex-start !important;
  }
  .oj-md-only-justify-content-flex-end {
    justify-content: flex-end !important;
  }
  .oj-md-only-justify-content-center {
    justify-content: center !important;
  }
  .oj-md-only-justify-content-space-between {
    justify-content: space-between !important;
  }
  .oj-md-only-justify-content-space-around {
    justify-content: space-around !important;
  }
  .oj-md-only-align-items-center {
    align-items: center !important;
  }
  .oj-md-only-align-items-baseline {
    align-items: baseline !important;
  }
  .oj-md-only-align-items-flex-start {
    align-items: flex-start !important;
  }
  .oj-md-only-align-items-flex-end {
    align-items: flex-end !important;
  }
  .oj-md-only-align-self-center {
    align-self: center !important;
  }
  .oj-md-only-align-self-flex-start {
    align-self: flex-start !important;
  }
  .oj-md-only-align-self-flex-end {
    align-self: flex-end !important;
  }
  .oj-md-only-flex-direction-column {
    flex-direction: column !important;
  }
  .oj-md-only-flex-wrap-nowrap {
    flex-wrap: nowrap !important;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1439.9px) {
  .oj-lg-only-flex-items-0 > .oj-flex-item {
    flex: 0;
  }
  .oj-lg-only-flex-items-1 > .oj-flex-item {
    flex: 1;
  }
  .oj-lg-only-flex-items-initial > .oj-flex-item {
    flex: 0 1 auto;
  }
  .oj-lg-only-flex-0 {
    flex: 0 !important;
  }
  .oj-lg-only-flex-1 {
    flex: 1 !important;
  }
  .oj-lg-only-flex-initial {
    flex: 0 1 auto !important;
  }
  .oj-lg-only-justify-content-flex-start {
    justify-content: flex-start !important;
  }
  .oj-lg-only-justify-content-flex-end {
    justify-content: flex-end !important;
  }
  .oj-lg-only-justify-content-center {
    justify-content: center !important;
  }
  .oj-lg-only-justify-content-space-between {
    justify-content: space-between !important;
  }
  .oj-lg-only-justify-content-space-around {
    justify-content: space-around !important;
  }
  .oj-lg-only-align-items-center {
    align-items: center !important;
  }
  .oj-lg-only-align-items-baseline {
    align-items: baseline !important;
  }
  .oj-lg-only-align-items-flex-start {
    align-items: flex-start !important;
  }
  .oj-lg-only-align-items-flex-end {
    align-items: flex-end !important;
  }
  .oj-lg-only-align-self-center {
    align-self: center !important;
  }
  .oj-lg-only-align-self-flex-start {
    align-self: flex-start !important;
  }
  .oj-lg-only-align-self-flex-end {
    align-self: flex-end !important;
  }
  .oj-lg-only-flex-direction-column {
    flex-direction: column !important;
  }
  .oj-lg-only-flex-wrap-nowrap {
    flex-wrap: nowrap !important;
  }
}
:root {
  --oj-private-app-layout-max-width: 1440px;
  --oj-private-app-layout-offcanvas-width: 90%;
  --oj-private-app-layout-offcanvas-max-width: 320px;
}

.oj-applayout-fixed-top,
.oj-hybrid-applayout-navbar-fixed-top,
.oj-applayout-fixed-bottom,
.oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  z-index: var(--oj-private-core-z-index-fixed);
}

.oj-applayout-fixed-top,
.oj-hybrid-applayout-navbar-fixed-top {
  top: 0;
}

.oj-applayout-fixed-bottom,
.oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar {
  bottom: 0;
}

.oj-hybrid-applayout-page {
  --oj-current-bg-color: var(--oj-body-bg-color);
}

:root {
  --oj-private-app-layout-hybrid-offcanvas-bg-color: rgb(var(--oj-palette-neutral-rgb-160));
  --oj-private-app-layout-hybrid-padding: 1rem;
  --oj-private-app-layout-hybrid-header-min-height: 56px;
  --oj-private-app-layout-hybrid-header-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-private-app-layout-hybrid-header-border-color: var(--oj-core-divider-color);
  --oj-private-app-layout-hybrid-header-border-bottom-width: 1px;
  --oj-private-app-layout-hybrid-header-title-text-color: var(--oj-core-text-color-primary);
  --oj-private-app-layout-hybrid-header-title-font-weight: 500;
  --oj-private-app-layout-hybrid-header-title-font-size: var(--oj-typography-body-xl-font-size);
  --oj-private-app-layout-hybrid-header-box-shadow: none;
  --oj-private-app-layout-hybrid-footer-min-height: 48px;
  --oj-private-app-layout-hybrid-footer-bg-color: var(--oj-private-app-layout-hybrid-header-bg-color);
  --oj-private-app-layout-hybrid-footer-border-color: var(--oj-private-app-layout-hybrid-header-border-color);
  --oj-private-app-layout-hybrid-footer-border-top-width: 1px;
  --oj-private-app-layout-hybrid-nav-bar-box-shadow: none;
}

/* Class used to suppress copy/paste and context menus for hybrid mobile apps */
.oj-hybrid:not(.oj-hybrid-show-context-menu) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.oj-hybrid input,
.oj-hybrid textarea {
  -webkit-user-select: text;
  user-select: text;
}

.oj-hybrid-padding {
  padding: var(--oj-private-app-layout-hybrid-padding);
}

.oj-hybrid-padding-vertical {
  padding-top: var(--oj-private-app-layout-hybrid-padding);
  padding-bottom: var(--oj-private-app-layout-hybrid-padding);
}

.oj-hybrid-padding-horizontal {
  padding-left: var(--oj-private-app-layout-hybrid-padding);
  padding-right: var(--oj-private-app-layout-hybrid-padding);
}

.oj-hybrid-padding-top {
  padding-top: var(--oj-private-app-layout-hybrid-padding);
}

.oj-hybrid-padding-bottom {
  padding-bottom: var(--oj-private-app-layout-hybrid-padding);
}

html:not([dir=rtl]) .oj-hybrid-padding-start {
  padding-left: var(--oj-private-app-layout-hybrid-padding);
}

html[dir=rtl] .oj-hybrid-padding-start {
  padding-right: var(--oj-private-app-layout-hybrid-padding);
}

html:not([dir=rtl]) .oj-hybrid-padding-end,
html:not([dir=rtl]) .oj-hybrid-applayout-header > .oj-flex-bar-start,
html:not([dir=rtl]) .oj-hybrid-applayout-header-no-border > .oj-flex-bar-start {
  padding-right: var(--oj-private-app-layout-hybrid-padding);
}

html[dir=rtl] .oj-hybrid-padding-end,
html[dir=rtl] .oj-hybrid-applayout-header > .oj-flex-bar-start,
html[dir=rtl] .oj-hybrid-applayout-header-no-border > .oj-flex-bar-start {
  padding-left: var(--oj-private-app-layout-hybrid-padding);
}

.oj-hybrid-applayout-offcanvas {
  width: var(--oj-private-app-layout-offcanvas-width);
  max-width: var(--oj-private-app-layout-offcanvas-max-width);
  background-color: var(--oj-private-app-layout-hybrid-offcanvas-bg-color);
  color: var(--oj-core-neutral-contrast);
  box-shadow: 3px 2px 7px rgba(var(--oj-core-box-shadow-rgb), 0.5);
  box-sizing: border-box;
}

.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-offcanvas {
  padding-top: 0px;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

html:not([dir=rtl]) .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-offcanvas .oj-navigationlist-item-element {
  margin-left: 0px;
  margin-left: constant(safe-area-inset-left);
  margin-left: env(safe-area-inset-left);
}

html[dir=rtl] .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-offcanvas .oj-navigationlist-item-element {
  margin-right: 0px;
  margin-right: constant(safe-area-inset-right);
  margin-right: env(safe-area-inset-right);
}

.oj-hybrid-applayout-page {
  min-height: 100vh;
  background-color: var(--oj-body-bg-color);
}

.oj-hybrid-applayout-header,
.oj-hybrid-applayout-header-no-border {
  box-shadow: var(--oj-private-app-layout-hybrid-header-box-shadow);
  border-bottom: var(--oj-private-app-layout-hybrid-header-border-bottom-width) solid var(--oj-private-app-layout-hybrid-header-border-color);
  background-color: var(--oj-private-app-layout-hybrid-header-bg-color);
  padding: 0 var(--oj-private-app-layout-hybrid-padding) 0 var(--oj-private-app-layout-hybrid-padding);
}

.oj-hybrid-applayout-header::before,
.oj-hybrid-applayout-header-no-border::before {
  content: "";
  display: inline-block;
  min-height: var(--oj-private-app-layout-hybrid-header-min-height);
  visibility: hidden;
}

.oj-hybrid-applayout-header-title {
  font-weight: var(--oj-private-app-layout-hybrid-header-title-font-weight);
  font-size: var(--oj-private-app-layout-hybrid-header-title-font-size);
  color: var(--oj-private-app-layout-hybrid-header-title-text-color);
  padding: 0;
  margin: 0;
}

/* Use instead of oj-hybrid-applayout-header when a top fixed bar is present
       so we can correctly style the header border */
.oj-hybrid-applayout-header-no-border {
  border-style: none;
  box-shadow: none;
}

.oj-hybrid-applayout-header .oj-button,
.oj-hybrid-applayout-header-no-border .oj-button,
.oj-hybrid-applayout-header .oj-button-button,
.oj-hybrid-applayout-header-no-border .oj-button-button {
  margin-bottom: 0;
}

html:not([dir=rtl]) .oj-hybrid-applayout-header .oj-flex-bar-start > .oj-button:first-child,
html:not([dir=rtl]) .oj-hybrid-applayout-header-no-border .oj-flex-bar-start > .oj-button:first-child {
  margin-left: calc((var(--oj-button-height) - var(--oj-button-icon-size)) / -2);
}

html[dir=rtl] .oj-hybrid-applayout-header .oj-flex-bar-start > .oj-button:first-child,
html[dir=rtl] .oj-hybrid-applayout-header-no-border .oj-flex-bar-start > .oj-button:first-child {
  margin-right: calc((var(--oj-button-height) - var(--oj-button-icon-size)) / -2);
}

html:not([dir=rtl]) .oj-hybrid-applayout-header .oj-flex-bar-end > .oj-button:last-child,
html:not([dir=rtl]) .oj-hybrid-applayout-header-no-border .oj-flex-bar-end > .oj-button:last-child {
  margin-right: calc((var(--oj-button-height) - var(--oj-button-icon-size)) / -2);
}

html[dir=rtl] .oj-hybrid-applayout-header .oj-flex-bar-end > .oj-button:last-child,
html[dir=rtl] .oj-hybrid-applayout-header-no-border .oj-flex-bar-end > .oj-button:last-child {
  margin-left: calc((var(--oj-button-height) - var(--oj-button-icon-size)) / -2);
}

/* Class used to position the application header and title for iOS hybrid
       applications where the status bar is overlaid in the WebView.
       This class has no effect on other platforms. */
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header-no-border {
  padding-top: 20px;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  min-height: calc(var(--oj-private-app-layout-hybrid-header-min-height) + 20px);
}

.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header .oj-hybrid-applayout-header-title,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header-no-border .oj-hybrid-applayout-header-title {
  margin-top: 20px;
  margin-top: constant(safe-area-inset-top);
  margin-top: env(safe-area-inset-top);
}

.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-page .oj-hybrid-applayout-content {
  padding-left: 0px;
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
  padding-right: 0px;
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);
}

.oj-hybrid-applayout-footer {
  min-height: var(--oj-private-app-layout-hybrid-footer-min-height);
  border-top: var(--oj-private-app-layout-hybrid-footer-border-top-width) solid var(--oj-private-app-layout-hybrid-footer-border-color);
  background-color: var(--oj-private-app-layout-hybrid-footer-bg-color);
}

.oj-hybrid-applayout-toolbar-stretch oj-button {
  display: flex;
}

.oj-hybrid-applayout-toolbar-stretch .oj-button,
.oj-hybrid-applayout-toolbar-stretch .oj-button-button {
  flex: 1 1 auto;
  min-height: var(--oj-private-app-layout-hybrid-footer-min-height);
  box-sizing: border-box;
  margin: 0;
}

.oj-hybrid-applayout-navbar-page,
.oj-hybrid-applayout-navbar-fixed-top,
.oj-hybrid-applayout-navbar-app,
.oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar {
  background-color: var(--oj-private-app-layout-hybrid-header-bg-color);
}

.oj-applayout-fixed-top .oj-hybrid-applayout-navbar-page,
.oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar-page,
.oj-applayout-fixed-top .oj-hybrid-applayout-navbar-fixed-top,
.oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar-fixed-top,
.oj-applayout-fixed-top .oj-hybrid-applayout-navbar-app,
.oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar-app,
.oj-applayout-fixed-top .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-applayout-fixed-top .oj-hybrid-applayout-navbar,
.oj-hybrid-applayout-navbar-fixed-top .oj-hybrid-applayout-navbar {
  box-shadow: var(--oj-private-app-layout-hybrid-header-box-shadow);
  border-bottom: var(--oj-private-app-layout-hybrid-header-border-bottom-width) solid var(--oj-private-app-layout-hybrid-header-border-color);
}

.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-page,
.oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-page,
.oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-page,
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-fixed-top,
.oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-fixed-top,
.oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-fixed-top,
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-app,
.oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-app,
.oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-app,
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar,
.oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar,
.oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar {
  box-shadow: var(--oj-private-app-layout-hybrid-nav-bar-box-shadow);
  border-top: var(--oj-private-app-layout-hybrid-footer-border-top-width) solid var(--oj-private-app-layout-hybrid-footer-border-color);
}

.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-footer,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-footer,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar .oj-hybrid-applayout-footer,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-page,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-page,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-page,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-fixed-top,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-fixed-top,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-fixed-top,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-app,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-app,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-app,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar-fixed-bottom .oj-hybrid-applayout-navbar,
.oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-navbar .oj-hybrid-applayout-navbar {
  padding-bottom: 0px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Deprecated. Use oj-hybrid-applayout-navbar-fixed-bottom or oj-hybrid-applayout-navbar-fixed-top nav bar instead. */
/* Deprecated. Use oj-hybrid-applayout-header or oj-hybrid-applayout-header-no-border to style the header instead. */
:root {
  --oj-private-app-layout-web-offcanvas-bg-color: rgb(var(--oj-palette-neutral-rgb-160));
  --oj-private-app-layout-web-padding: 20px;
  --oj-private-app-layout-web-header-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-private-app-layout-web-header-border-color: var(--oj-core-divider-color);
  --oj-private-app-layout-web-header-box-shadow: none;
  --oj-private-app-layout-web-header-min-height: 3.143rem;
  --oj-private-app-layout-web-header-title-text-color: var(--oj-core-text-color-secondary);
  --oj-private-app-layout-web-header-title-font-size: var(--oj-typography-body-xl-font-size);
  --oj-private-app-layout-web-header-title-font-weight: 600;
  --oj-private-app-layout-web-footer-min-height: 3.571rem;
  --oj-private-app-layout-web-footer-bg-color: var(--oj-private-app-layout-web-header-bg-color);
  --oj-private-app-layout-web-footer-border-color: var(--oj-private-app-layout-web-header-border-color);
}

.oj-web-applayout-body {
  overflow-y: scroll;
}

.oj-web-applayout-offcanvas {
  width: var(--oj-private-app-layout-offcanvas-width);
  max-width: var(--oj-private-app-layout-offcanvas-max-width);
  background-color: var(--oj-private-app-layout-web-offcanvas-bg-color);
  color: var(--oj-core-neutral-contrast);
}

.oj-web-applayout-offcanvas-icon {
  font-size: 24px;
}

.oj-web-applayout-page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .oj-web-applayout-page {
    height: 100vh;
    min-height: 0;
  }
}
_:-ms-lang(x),
_:-webkit-full-screen .oj-web-applayout-page {
  height: auto;
  min-height: 100vh;
}

.oj-web-applayout-max-width {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--oj-private-app-layout-max-width);
  box-sizing: border-box;
}

.oj-web-applayout-header,
.oj-web-applayout-footer,
.oj-web-applayout-navbar,
.oj-web-applayout-header + .oj-progress-bar-embedded {
  flex: 0 0 auto;
}

html:not([dir=rtl]) .oj-web-applayout-header .oj-flex-bar-start {
  padding-right: 10px;
}

html[dir=rtl] .oj-web-applayout-header .oj-flex-bar-start {
  padding-left: -10px;
}

.oj-web-applayout-header {
  border-bottom: 1px solid var(--oj-private-app-layout-web-header-border-color);
}

.oj-web-applayout-header .oj-button,
.oj-web-applayout-header .oj-button-button {
  margin-bottom: 0;
}

.oj-web-applayout-header > div:first-child {
  box-sizing: border-box;
}

.oj-web-applayout-header > div:first-child::before {
  content: "";
  display: inline-block;
  min-height: var(--oj-private-app-layout-web-header-min-height);
  visibility: hidden;
}

.oj-web-applayout-header > div,
.oj-web-applayout-footer > div {
  padding-left: var(--oj-private-app-layout-web-padding);
  padding-right: var(--oj-private-app-layout-web-padding);
}

html:not([dir=rtl]) .oj-web-applayout-header .oj-flex-bar-start > .oj-button:first-child {
  margin-left: calc((var(--oj-button-height) - var(--oj-button-icon-size)) / -2);
}

html[dir=rtl] .oj-web-applayout-header .oj-flex-bar-start > .oj-button:first-child {
  margin-right: calc((var(--oj-button-height) - var(--oj-button-icon-size)) / -2);
}

html:not([dir=rtl]) .oj-web-applayout-header .oj-flex-bar-start > .oj-button.oj-button-lg:first-child {
  margin-left: calc((var(--oj-button-lg-height) - var(--oj-button-lg-icon-size)) / -2);
}

html[dir=rtl] .oj-web-applayout-header .oj-flex-bar-start > .oj-button.oj-button-lg:first-child {
  margin-right: calc((var(--oj-button-lg-height) - var(--oj-button-lg-icon-size)) / -2);
}

html:not([dir=rtl]) .oj-web-applayout-header .oj-flex-bar-end > .oj-button:last-child,
html:not([dir=rtl]) .oj-web-applayout-header .oj-flex-bar-end > .oj-toolbar:last-child {
  margin-right: calc((var(--oj-button-height) - var(--oj-button-icon-size)) / -2);
}

html[dir=rtl] .oj-web-applayout-header .oj-flex-bar-end > .oj-button:last-child,
html[dir=rtl] .oj-web-applayout-header .oj-flex-bar-end > .oj-toolbar:last-child {
  margin-left: calc((var(--oj-button-height) - var(--oj-button-icon-size)) / -2);
}

.oj-web-applayout-header-title {
  font-size: var(--oj-private-app-layout-web-header-title-font-size);
  font-weight: var(--oj-private-app-layout-web-header-title-font-weight);
  color: var(--oj-private-app-layout-web-header-title-text-color);
  font-weight: normal;
  line-height: 0;
  padding: 0;
  margin: 0;
}

.oj-web-applayout-navbar .oj-navigationlist-icon-only {
  padding-bottom: 3px;
}

.oj-sm-web-padding-horizontal,
.oj-web-padding {
  padding-left: var(--oj-private-app-layout-web-padding);
  padding-right: var(--oj-private-app-layout-web-padding);
}

html:not([dir=rtl]) .oj-sm-web-padding-start {
  padding-left: var(--oj-private-app-layout-web-padding);
}

html[dir=rtl] .oj-sm-web-padding-start {
  padding-right: var(--oj-private-app-layout-web-padding);
}

html:not([dir=rtl]) .oj-sm-web-padding-end {
  padding-right: var(--oj-private-app-layout-web-padding);
}

html[dir=rtl] .oj-sm-web-padding-end {
  padding-left: var(--oj-private-app-layout-web-padding);
}

.oj-sm-web-padding-top,
.oj-sm-web-padding-vertical,
.oj-web-padding,
.oj-web-applayout-content {
  padding-top: calc(var(--oj-private-app-layout-web-padding) / 2);
}

.oj-sm-web-padding-bottom,
.oj-sm-web-padding-vertical,
.oj-web-padding,
.oj-web-applayout-content {
  padding-bottom: calc(var(--oj-private-app-layout-web-padding) / 2);
}

@media screen and (max-width: 599.9px) {
  .oj-sm-only-web-padding-horizontal {
    padding-left: var(--oj-private-app-layout-web-padding);
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-sm-only-web-padding-start {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-sm-only-web-padding-start {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-sm-only-web-padding-end {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-sm-only-web-padding-end {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  .oj-sm-only-web-padding-top,
  .oj-sm-only-web-padding-vertical {
    padding-top: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
  .oj-sm-only-web-padding-bottom,
  .oj-sm-only-web-padding-vertical {
    padding-bottom: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
}
@media print, screen and (min-width: 600px) {
  .oj-md-web-padding-horizontal {
    padding-left: var(--oj-private-app-layout-web-padding);
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-md-web-padding-start {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-md-web-padding-start {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-md-web-padding-end {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-md-web-padding-end {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  .oj-md-web-padding-top,
  .oj-md-web-padding-vertical {
    padding-top: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
  .oj-md-web-padding-bottom,
  .oj-md-web-padding-vertical {
    padding-bottom: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
}
@media print and (orientation: portrait), screen and (min-width: 600px) and (max-width: 1023.9px) {
  .oj-md-only-web-padding-horizontal {
    padding-left: var(--oj-private-app-layout-web-padding);
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-md-only-web-padding-start {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-md-only-web-padding-start {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-md-only-web-padding-end {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-md-only-web-padding-end {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  .oj-md-only-web-padding-top,
  .oj-md-only-web-padding-vertical {
    padding-top: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
  .oj-md-only-web-padding-bottom,
  .oj-md-only-web-padding-vertical {
    padding-bottom: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
}
@media print and (orientation: portrait), screen and (max-width: 1023.9px) {
  .oj-md-down-web-padding-horizontal {
    padding-left: var(--oj-private-app-layout-web-padding);
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-md-down-web-padding-start {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-md-down-web-padding-start {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-md-down-web-padding-end {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-md-down-web-padding-end {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  .oj-md-down-web-padding-top,
  .oj-md-down-web-padding-vertical {
    padding-top: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
  .oj-md-down-web-padding-bottom,
  .oj-md-down-web-padding-vertical {
    padding-bottom: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-lg-web-padding-horizontal {
    padding-left: var(--oj-private-app-layout-web-padding);
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-lg-web-padding-start {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-lg-web-padding-start {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-lg-web-padding-end {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-lg-web-padding-end {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  .oj-lg-web-padding-top,
  .oj-lg-web-padding-vertical {
    padding-top: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
  .oj-lg-web-padding-bottom,
  .oj-lg-web-padding-vertical {
    padding-bottom: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1439.9px) {
  .oj-lg-only-web-padding-horizontal {
    padding-left: var(--oj-private-app-layout-web-padding);
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-lg-only-web-padding-start {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-lg-only-web-padding-start {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-lg-only-web-padding-end {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-lg-only-web-padding-end {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  .oj-lg-only-web-padding-top,
  .oj-lg-only-web-padding-vertical {
    padding-top: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
  .oj-lg-only-web-padding-bottom,
  .oj-lg-only-web-padding-vertical {
    padding-bottom: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
}
@media print and (orientation: landscape), screen and (max-width: 1439.9px) {
  .oj-lg-down-web-padding-horizontal {
    padding-left: var(--oj-private-app-layout-web-padding);
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-lg-down-web-padding-start {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-lg-down-web-padding-start {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-lg-down-web-padding-end {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-lg-down-web-padding-end {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  .oj-lg-down-web-padding-top,
  .oj-lg-down-web-padding-vertical {
    padding-top: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
  .oj-lg-down-web-padding-bottom,
  .oj-lg-down-web-padding-vertical {
    padding-bottom: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
}
@media screen and (min-width: 1440px) {
  .oj-xl-web-padding-horizontal {
    padding-left: var(--oj-private-app-layout-web-padding);
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-xl-web-padding-start {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-xl-web-padding-start {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html:not([dir=rtl]) .oj-xl-web-padding-end {
    padding-right: var(--oj-private-app-layout-web-padding);
  }
  html[dir=rtl] .oj-xl-web-padding-end {
    padding-left: var(--oj-private-app-layout-web-padding);
  }
  .oj-xl-web-padding-top,
  .oj-xl-web-padding-vertical {
    padding-top: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
  .oj-xl-web-padding-bottom,
  .oj-xl-web-padding-vertical {
    padding-bottom: calc(var(--oj-private-app-layout-web-padding) / 2);
  }
}
.oj-web-applayout-content-nopad,
.oj-web-applayout-content {
  flex: 1 0 auto;
}

.oj-web-applayout-content {
  padding-left: calc(var(--oj-private-app-layout-web-padding) - 2 * var(--oj-core-spacing-1x));
  padding-right: calc(var(--oj-private-app-layout-web-padding) - 2 * var(--oj-core-spacing-1x));
}

.oj-web-applayout-footer {
  min-height: var(--oj-private-app-layout-web-footer-min-height);
  border-top: 1px solid var(--oj-private-app-layout-web-footer-border-color);
  background-color: var(--oj-private-app-layout-web-footer-bg-color);
  box-sizing: border-box;
  padding-top: 10px;
  padding-bottom: 10px;
}

.oj-web-applayout-footer-item {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 auto;
}

@media screen and (max-width: 599.9px) {
  .oj-web-applayout-footer-item {
    justify-content: center;
    text-align: center;
  }
}
.oj-web-applayout-footer ul {
  margin: 0;
}

html:not([dir=rtl]) .oj-web-applayout-footer ul {
  padding-left: 0;
}

html[dir=rtl] .oj-web-applayout-footer ul {
  padding-right: 0;
}

.oj-web-applayout-footer li {
  list-style: none;
  display: inline-block;
}

html:not([dir=rtl]) .oj-web-applayout-footer li {
  margin-right: 10px;
  margin-left: 0;
  padding-right: 10px;
  border-right: 1px solid var(--oj-private-app-layout-web-footer-border-color);
}

html[dir=rtl] .oj-web-applayout-footer li {
  margin-left: 5px;
  margin-right: 0;
  padding-left: 5px;
  border-left: 1px solid var(--oj-private-app-layout-web-footer-border-color);
}

html:not([dir=rtl]) .oj-web-applayout-footer li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}

html[dir=rtl] .oj-web-applayout-footer li:last-child {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

oj-collapsible:not(.oj-complete) {
  visibility: hidden;
}

oj-collapsible {
  display: block;
}

.oj-collapsible {
  -webkit-tap-highlight-color: transparent;
}

/* collapsible with "showDetail" style */
/* ------------------------------------*/
/*
     * this is the default style for collapsible header
     */
.oj-collapsible-header {
  color: var(--oj-heading-text-color);
  display: flex;
  align-items: center;
  position: relative;
  padding: var(--oj-core-spacing-1x) 0;
  margin: 0;
}

/*
     * this is the default style for collapsible content
     */
.oj-collapsible-content {
  background-color: transparent;
  padding: var(--oj-core-spacing-2x) 0;
  margin: 0;
}

/*
     * add more padding between header and collapsible content when header has a border
     */
.oj-header-border + .oj-collapsible-wrapper > .oj-collapsible-content {
  padding-top: var(--oj-core-spacing-2x);
  padding-bottom: var(--oj-core-spacing-2x);
}

/*
     * add space around the header border
     */
.oj-collapsible-header.oj-header-border {
  padding-top: var(--oj-core-spacing-2x);
  padding-bottom: var(--oj-core-spacing-2x);
}

/*
     * applied to the disabled collapsible header
     */
.oj-collapsible.oj-disabled > .oj-collapsible-header {
  color: var(--oj-core-text-color-disabled);
}

/*
     * remove top padding for the first nested collapsible
     */
.oj-collapsible-content > .oj-collapsible:first-child > .oj-collapsible-header {
  padding-top: 0;
}

/* collapsible content transition effects */
/* -------------------------------------- */
/*
     * transtion properties and duration
     */
.oj-collapsible-transition {
  transition: max-height var(--oj-animation-duration-long);
}

/*
     * applied to the wrapper of the collapsible content.
     */
.oj-collapsible-wrapper {
  border: 0;
  padding: 0;
  margin: 0;
}

/* suppress all browser decorations of anchors in the header */
/* --------------------------------------------------------- */
.oj-collapsible-header a,
.oj-collapsible-header a:active,
.oj-collapsible-header a:visited,
.oj-collapsible-header a:hover,
.oj-collapsible-header a:focus {
  text-decoration: none;
}

/* disclosure icons for headers */
/* -----------------------------*/
.oj-collapsible-header-icon {
  padding: 5px;
  outline-offset: -5px;
}

.oj-collapsible-header-icon:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-collapsible-header-icon:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
}

/*
     * set hand cursor while over the clickable area & hover background color
     */
.oj-collapsible-header.oj-hover,
.oj-collapsible-header-icon.oj-hover {
  cursor: var(--oj-core-cursor-clickable);
}

/*
     * applied to the disclosure icon
     */
.oj-collapsible-header .oj-collapsible-header-icon,
.oj-collapsible-header .oj-collapsible-header-icon:hover {
  color: var(--oj-private-icon-color-default);
}

/*
     * applied to the disclosure icon when it's hovered
     * add .oj-collapsible-header .oj-collapsible-header-icon.oj-hover
     * to override color set in a:hover.oj-clickable-icon-nocontext
     */
.oj-collapsible-header.oj-hover .oj-collapsible-header-icon,
.oj-collapsible-header .oj-collapsible-header-icon.oj-hover {
  color: var(--oj-private-icon-color-hover);
}

/*
     * applied to the disclosure icon when it's active
     */
.oj-collapsible-header.oj-active .oj-collapsible-header-icon,
.oj-collapsible-header .oj-collapsible-header-icon.oj-active {
  color: var(--oj-private-icon-color-active);
}

/*
     * For disabled header icons
     */
.oj-collapsible.oj-disabled > .oj-collapsible-header > .oj-collapsible-header-icon {
  color: var(--oj-private-icon-color-disabled);
}

html:not([dir=rtl]) .oj-collapsible-header .oj-collapsible-header-icon {
  margin: 0 0 0 -8px;
}

html[dir=rtl] .oj-collapsible-header .oj-collapsible-header-icon {
  margin: 0 -8px 0 0;
}

:root {
  --oj-collection-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-collection-border-color: rgba(var(--oj-palette-neutral-rgb-190), 0.1);
  --oj-collection-free-space-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-collection-list-row-height: 3rem;
  --oj-collection-list-cell-padding-vertical: 0.75rem;
  --oj-collection-grid-row-height: 2.375rem;
  --oj-collection-header-font-size: var(--oj-typography-body-md-font-size);
  --oj-collection-header-font-weight: 600;
  --oj-collection-header-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-collection-header-text-color: var(--oj-core-text-color-primary);
  --oj-collection-grid-header-height: 2.25rem;
  --oj-collection-header-bg-color-hover: var(--oj-core-bg-color-hover);
  --oj-collection-header-bg-color-selected: rgba(var(--oj-palette-neutral-rgb-190), 0.08);
  --oj-collection-header-bg-color-partial-selected: rgba(var(--oj-palette-neutral-rgb-190), 0.03);
  --oj-collection-cell-banded-bg-color: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-collection-grid-cell-padding: 0.5rem;
  --oj-collection-editable-cell-border-color-focus: var(--oj-core-border-color-selected);
  --oj-collection-editable-cell-bg-color-read-only: var(--oj-core-bg-color-hover);
  --oj-collection-default-sort-icon-display: block;
}

:root {
  --oj-list-view-group-header-bg-color: transparent;
  --oj-list-view-group-header-bg-color-sticky: rgb(var(--oj-palette-neutral-rgb-30));
  --oj-list-view-group-header-font-weight: var(--oj-typography-subheading-xs-font-weight);
  --oj-list-view-group-header-font-size: var(--oj-typography-subheading-xs-font-size);
  --oj-list-view-group-header-line-height: var(--oj-typography-subheading-xs-line-height);
  --oj-list-view-item-padding-horizontal: 1rem;
  --oj-private-list-view-global-load-indicator-default: skeleton;
  --oj-private-list-view-global-add-animation-default: '[{"effect":"expand"},"fadeIn"]';
  --oj-private-list-view-global-remove-animation-default: '[{"effect":"collapse"},"fadeOut"]';
  --oj-private-list-view-global-update-animation-default: '{"effect": "fadeIn"}';
  --oj-private-list-view-global-expand-animation-default: '{"effect": "expand"}';
  --oj-private-list-view-global-collapse-animation-default: '{"effect": "collapse"}';
  --oj-private-list-view-global-pointerUp-animation-default: '{"effect": "ripple"}';
  --oj-private-list-view-global-card-entrance-animation-default: '[{"effect":"slideIn","offsetY":"300px","duration":"300ms"}, {"effect":"fadeIn","duration":"300ms"}] ';
  --oj-private-list-view-global-card-exit-animation-default: '[{"effect":"slideOut","offsetY":"300px","duration":"300ms","persist":"all"},{"effect":"fadeOut","duration":"300ms","persist":"all"}]';
  --oj-private-list-view-global-gridlines-item-default: hidden;
  --oj-private-list-view-global-gridlines-top-default: hidden;
  --oj-private-list-view-global-gridlines-bottom-default: hidden;
}

/* accordion */
/* --------------------------------------------------------------- */
oj-accordion:not(.oj-complete) {
  visibility: hidden;
}

oj-accordion {
  display: block;
}

/*
     * applied to the disabled accordion header
     */
.oj-accordion-collapsible.oj-disabled > .oj-collapsible-header {
  color: var(--oj-core-text-color-disabled);
  background-image: none;
}

/*
     * need to reset margin (bottom) here because it's being set in collapsible
     */
.oj-collapsible.oj-accordion-collapsible {
  margin: 0;
}

/*
     * applied to the accordion header but not to any nested collapsible headers
     */
.oj-accordion-collapsible > .oj-collapsible-header {
  padding-top: 3px;
  padding-bottom: 3px;
  border: 0 solid var(--oj-core-divider-color);
  border-width: 0;
  font-size: var(--oj-list-view-group-header-font-size);
  font-weight: var(--oj-list-view-group-header-font-weight);
  background-color: var(--oj-list-view-group-header-bg-color);
}

/*
     * need to restore top padding for the first nested collapsible,
     * because it's being reset in collapsible
     */
.oj-collapsible-content > .oj-accordion-collapsible.oj-collapsible:first-child > .oj-collapsible-header {
  padding-top: 3px;
}

/*
     * need to reset margin because it's being set in collapsible to -7px
     */
.oj-accordion-collapsible > .oj-collapsible-header > .oj-collapsible-header-icon {
  padding: 9px;
  outline-offset: -9px;
}

html:not([dir=rtl]) .oj-accordion-collapsible > .oj-collapsible-header > .oj-collapsible-header-icon {
  margin: 0;
}

html[dir=rtl] .oj-accordion-collapsible > .oj-collapsible-header > .oj-collapsible-header-icon {
  margin: 0;
}

/*
     * applied to the accordion content but not to any nested collapsible contents
     */
.oj-accordion-collapsible > .oj-collapsible-wrapper > .oj-collapsible-content {
  padding: var(--oj-core-spacing-2x);
}

/*
     * applied to the accordion header border bottom when collapsed
     */
.oj-accordion-collapsible.oj-collapsed > .oj-collapsible-header {
  border-width: 0 0 1px;
}

/*
     * applied to the accordion header border for the last child when collapsed
     */
.oj-accordion-collapsible.oj-collapsed:last-child > .oj-collapsible-header {
  border-bottom-width: 1px;
}

:root {
  --oj-panel-padding: var(--oj-core-spacing-2x);
  --oj-panel-border-radius: var(--oj-core-border-radius-lg);
  --oj-panel-gutter: var(--oj-core-spacing-4x);
  --oj-panel-bg-color: var(--oj-core-bg-color-content);
  --oj-panel-border-color: var(--oj-core-divider-color);
}

:root {
  /* card                 */
  /* -------------------------- */
  --oj-action-card-scale-hover: 1;
}

oj-action-card:not(.oj-complete) {
  visibility: hidden;
}

.oj-actioncard {
  display: inline-flex;
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow var(--oj-animation-duration-xshort) var(--oj-animation-ease-in-out);
  box-shadow: none;
  background-color: var(--oj-panel-bg-color);
  border: 1px solid var(--oj-panel-border-color);
  border-radius: var(--oj-panel-border-radius);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.oj-actioncard:hover,
.oj-actioncard.oj-active {
  transform: scale(var(--oj-action-card-scale-hover));
}

.oj-actioncard.oj-active {
  box-shadow: var(--oj-core-box-shadow-xs);
}

.oj-actioncard:hover:not(.oj-active) {
  box-shadow: var(--oj-core-box-shadow-sm);
}

.oj-actioncard:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

.oj-actioncard:not(.oj-focus-highlight):focus {
  outline: none;
}

:root {
  --oj-avatar-bg-color: rgb(var(--oj-palette-neutral-rgb-130));
  --oj-avatar-text-color: var(--oj-core-neutral-contrast);
  --oj-avatar-pattern-display: block;
  --oj-avatar-size: 4.5rem;
  --oj-avatar-border-radius: var(--oj-core-border-radius-md);
  --oj-avatar-initials-font-size: var(--oj-typography-heading-lg-font-size);
  --oj-avatar-initials-font-weight: lighter;
  --oj-avatar-icon-font-size: 2rem;
  --oj-private-avatar-global-shape-default: square;
}

oj-avatar:not(.oj-complete) {
  visibility: hidden;
}

oj-avatar {
  display: inline-block;
}

.oj-avatar .oj-avatar-icon,
.oj-avatar-background-image {
  background-size: cover;
  background-position: center center;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  display: flex;
  height: var(--oj-avatar-size);
  width: var(--oj-avatar-size);
  grid-area: 1/1/2/2;
}

.oj-avatar-background {
  display: var(--oj-avatar-pattern-display);
}

.oj-agent-browser-chrome .oj-avatar-background-image {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}

.oj-agent-browser-chrome .oj-avatar {
  position: relative;
}

.oj-avatar {
  color: var(--oj-avatar-text-color);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  background-color: var(--oj-avatar-bg-color);
  overflow: hidden;
  height: var(--oj-avatar-size);
  width: var(--oj-avatar-size);
  font-size: var(--oj-avatar-initials-font-size);
  font-weight: var(--oj-avatar-initials-font-weight);
  display: grid;
  grid-template-columns: var(--oj-avatar-size) 1fr;
  grid-template-rows: var(--oj-avatar-size) 1fr;
}

.oj-avatar .oj-avatar-icon {
  font-size: var(--oj-avatar-icon-font-size);
}

.oj-avatar-square,
.oj-avatar-square .oj-avatar-background-image {
  border-radius: var(--oj-avatar-border-radius);
}

.oj-avatar-circle,
.oj-avatar-circle .oj-avatar-background-image {
  border-radius: 50%;
}

div.oj-avatar.oj-avatar-image {
  background-color: rgba(0, 0, 0, 0);
}

.oj-avatar-initials {
  text-overflow: ellipsis;
  overflow: hidden;
}

.oj-avatar-placeholder-icon {
  color: var(--oj-avatar-text-color);
}

.oj-avatar-placeholder-icon {
  font-size: var(--oj-avatar-icon-font-size);
}

/* red, forest, and mauve are hard-coded colors because they are deprecated */
.oj-avatar-bg-red.oj-avatar {
  background-color: #9b5734;
}

.oj-avatar-bg-forest.oj-avatar {
  background-color: #4c825c;
}

.oj-avatar-bg-mauve.oj-avatar {
  background-color: #925865;
}

.oj-avatar-bg-purple,
.oj-icon-circle-purple .oj-icon-circle-inner {
  --oj-avatar-bg-color: #846a92;
}

.oj-avatar-bg-orange,
.oj-icon-circle-red .oj-icon-circle-inner,
.oj-icon-circle-orange .oj-icon-circle-inner {
  --oj-avatar-bg-color: #9b5734;
}

.oj-avatar-bg-teal,
.oj-icon-circle-teal .oj-icon-circle-inner {
  --oj-avatar-bg-color: #4f7d7b;
}

.oj-avatar-bg-green,
.oj-icon-circle-forest .oj-icon-circle-inner,
.oj-icon-circle-green .oj-icon-circle-inner {
  --oj-avatar-bg-color: #4c825c;
}

.oj-avatar-bg-pink,
.oj-icon-circle-mauve .oj-icon-circle-inner,
.oj-icon-circle-pink .oj-icon-circle-inner {
  --oj-avatar-bg-color: #925865;
}

.oj-avatar-bg-slate,
.oj-icon-circle-slate .oj-icon-circle-inner {
  --oj-avatar-bg-color: #798b8a;
}

.oj-avatar-bg-blue,
.oj-icon-circle-blue .oj-icon-circle-inner {
  --oj-avatar-bg-color: #437c94;
}

.oj-avatar-bg-lilac,
.oj-icon-circle-lilac .oj-icon-circle-inner {
  --oj-avatar-bg-color: #6b7494;
}

.oj-avatar-bg-gray,
.oj-icon-circle-gray .oj-icon-circle-inner {
  --oj-avatar-bg-color: #6f757e;
}

.oj-avatar-xxs,
.oj-icon-circle-xxs .oj-icon-circle-inner,
.oj-icon-xxs .oj-icon-circle-inner {
  --oj-avatar-size: 1.75rem;
  --oj-avatar-border-radius: var(--oj-core-border-radius-md);
  --oj-avatar-initials-font-size: var(--oj-typography-body-xs-font-size);
  --oj-avatar-initials-font-weight: 600;
  --oj-avatar-icon-font-size: 0.75rem;
}

.oj-avatar-xs,
.oj-icon-circle-xs .oj-icon-circle-inner,
.oj-icon-xs .oj-icon-circle-inner {
  --oj-avatar-size: 2.75rem;
  --oj-avatar-border-radius: var(--oj-core-border-radius-md);
  --oj-avatar-initials-font-size: var(--oj-typography-body-md-font-size);
  --oj-avatar-initials-font-weight: 400;
  --oj-avatar-icon-font-size: 1rem;
}

.oj-avatar-sm,
.oj-icon-circle-sm .oj-icon-circle-inner,
.oj-icon-sm .oj-icon-circle-inner {
  --oj-avatar-size: 3.5rem;
  --oj-avatar-border-radius: var(--oj-core-border-radius-md);
  --oj-avatar-initials-font-size: var(--oj-typography-heading-xs-font-size);
  --oj-avatar-initials-font-weight: normal;
  --oj-avatar-icon-font-size: 1.5rem;
}

.oj-avatar-lg,
.oj-icon-circle-lg .oj-icon-circle-inner,
.oj-icon-lg .oj-icon-circle-inner {
  --oj-avatar-size: 6rem;
  --oj-avatar-border-radius: var(--oj-core-border-radius-lg);
  --oj-avatar-initials-font-size: 2.5rem;
  --oj-avatar-icon-font-size: 2.25rem;
}

.oj-avatar-xl,
.oj-icon-circle-xl .oj-icon-circle-inner,
.oj-icon-xl .oj-icon-circle-inner {
  --oj-avatar-size: 9rem;
  --oj-avatar-border-radius: var(--oj-core-border-radius-xl);
  --oj-avatar-initials-font-size: 3rem;
  --oj-avatar-icon-font-size: 3.5rem;
}

.oj-avatar-xxl,
.oj-icon-circle-xxl .oj-icon-circle-inner,
.oj-icon-xxl .oj-icon-circle-inner {
  --oj-avatar-size: 12.25rem;
  --oj-avatar-border-radius: var(--oj-core-border-radius-xl);
  --oj-avatar-initials-font-size: 4.5rem;
  --oj-avatar-icon-font-size: 4.5rem;
}

/* Avatar                     */
/* -------------------------- */
.oj-private-scale-lg .oj-avatar-xs,
.oj-private-scale-lg .oj-icon-circle-xs .oj-icon-circle-inner,
.oj-icon-circle-xs .oj-private-scale-lg .oj-icon-circle-inner,
.oj-private-scale-lg .oj-icon-xs .oj-icon-circle-inner,
.oj-icon-xs .oj-private-scale-lg .oj-icon-circle-inner {
  --oj-avatar-size: 44px;
  --oj-avatar-border-radius: 4px;
  --oj-avatar-initials-font-size: var(--oj-typography-body-md-font-size);
  --oj-avatar-icon-font-size: 16px;
}

.oj-private-scale-lg .oj-avatar-lg,
.oj-private-scale-lg .oj-icon-circle-lg .oj-icon-circle-inner,
.oj-icon-circle-lg .oj-private-scale-lg .oj-icon-circle-inner,
.oj-private-scale-lg .oj-icon-lg .oj-icon-circle-inner,
.oj-icon-lg .oj-private-scale-lg .oj-icon-circle-inner {
  --oj-avatar-size: 96px;
  --oj-avatar-border-radius: 6px;
  --oj-avatar-initials-font-size: 40px;
  --oj-avatar-icon-font-size: 36px;
}

.oj-avatar-background {
  content: "";
  background-size: 12.25rem 12.25rem;
  width: 100%;
  height: 100%;
  background-image: url("images/avatar-pattern1.png");
}

.oj-avatar-bg-orange .oj-avatar-background,
.oj-icon-circle-red .oj-icon-circle-inner .oj-avatar-background,
.oj-icon-circle-orange .oj-icon-circle-inner .oj-avatar-background,
.oj-avatar-bg-red .oj-avatar-background {
  background-image: url("images/avatar-pattern2.png");
}

.oj-avatar-bg-green .oj-avatar-background,
.oj-icon-circle-forest .oj-icon-circle-inner .oj-avatar-background,
.oj-icon-circle-green .oj-icon-circle-inner .oj-avatar-background,
.oj-avatar-bg-forest .oj-avatar-background {
  background-image: url("images/avatar-pattern3.png");
}

.oj-avatar-bg-teal .oj-avatar-background,
.oj-icon-circle-teal .oj-icon-circle-inner .oj-avatar-background {
  background-image: url("images/avatar-pattern4.png");
}

.oj-avatar-bg-blue .oj-avatar-background,
.oj-icon-circle-blue .oj-icon-circle-inner .oj-avatar-background {
  background-image: url("images/avatar-pattern5.png");
}

.oj-avatar-bg-slate .oj-avatar-background,
.oj-icon-circle-slate .oj-icon-circle-inner .oj-avatar-background {
  background-image: url("images/avatar-pattern6.png");
}

.oj-avatar-bg-pink .oj-avatar-background,
.oj-icon-circle-mauve .oj-icon-circle-inner .oj-avatar-background,
.oj-icon-circle-pink .oj-icon-circle-inner .oj-avatar-background,
.oj-avatar-bg-mauve .oj-avatar-background {
  background-image: url("images/avatar-pattern7.png");
}

.oj-avatar-bg-purple .oj-avatar-background,
.oj-icon-circle-purple .oj-icon-circle-inner .oj-avatar-background {
  background-image: url("images/avatar-pattern8.png");
}

.oj-avatar-bg-lilac .oj-avatar-background,
.oj-icon-circle-lilac .oj-icon-circle-inner .oj-avatar-background {
  background-image: url("images/avatar-pattern9.png");
}

.oj-avatar-bg-gray .oj-avatar-background,
.oj-icon-circle-gray .oj-icon-circle-inner .oj-avatar-background {
  background-image: url("images/avatar-pattern10.png");
}

:root {
  --oj-badge-bg-color: var(--oj-core-neutral-1);
  --oj-badge-text-color: var(--oj-core-neutral-contrast);
  --oj-badge-font-size: 0.6875rem;
  --oj-badge-font-weight: 700;
  --oj-badge-font-stretch: condensed;
  --oj-badge-height: 1.5rem;
  --oj-badge-border-radius: var(--oj-core-border-radius-lg);
}

.oj-badge {
  background-color: var(--oj-badge-bg-color);
  color: var(--oj-badge-text-color);
  padding: 0 var(--oj-core-spacing-2x);
  display: inline-block;
  box-sizing: border-box;
  border-radius: var(--oj-badge-border-radius);
  height: var(--oj-badge-height);
  line-height: var(--oj-badge-height);
  min-width: var(--oj-badge-height);
  font-size: var(--oj-badge-font-size);
  font-weight: var(--oj-badge-font-weight);
  font-stretch: var(--oj-badge-font-stretch);
  text-align: center;
  white-space: nowrap;
}

.oj-badge-sm {
  padding: 0 0.25rem;
}

html[dir=rtl] .oj-badge-end {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

html:not([dir=rtl]) .oj-badge-end {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.oj-badge-subtle {
  background-color: var(--oj-core-neutral-secondary-1);
  color: var(--oj-core-neutral-secondary-contrast);
}

.oj-badge-danger {
  background-color: var(--oj-core-danger-1);
  color: var(--oj-core-danger-contrast);
}

.oj-badge-danger.oj-badge-subtle {
  background-color: var(--oj-core-danger-secondary-1);
  color: var(--oj-core-danger-secondary-contrast);
}

.oj-badge-warning {
  background-color: var(--oj-core-warning-1);
  color: var(--oj-core-warning-contrast);
}

.oj-badge-warning.oj-badge-subtle {
  background-color: var(--oj-core-warning-secondary-1);
  color: var(--oj-core-warning-secondary-contrast);
}

.oj-badge-success {
  background-color: var(--oj-core-success-1);
  color: var(--oj-core-success-contrast);
}

.oj-badge-success.oj-badge-subtle {
  background-color: var(--oj-core-success-secondary-1);
  color: var(--oj-core-success-secondary-contrast);
}

.oj-badge-info {
  background-color: var(--oj-core-info-1);
  color: var(--oj-core-info-contrast);
}

.oj-badge-info.oj-badge-subtle {
  background-color: var(--oj-core-info-secondary-1);
  color: var(--oj-core-info-secondary-contrast);
}

.oj-badge-status::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--oj-core-neutral-1);
  border-radius: 50%;
  display: inline-block;
}

.oj-badge-status.oj-badge-sm::before {
  width: 0.375rem;
  height: 0.375rem;
}

.oj-badge-status {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

.oj-badge-status.oj-badge-danger::before {
  background-color: var(--oj-core-danger-1);
}

.oj-badge-status.oj-badge-warning::before {
  background-color: var(--oj-core-warning-1);
}

.oj-badge-status.oj-badge-success::before {
  background-color: var(--oj-core-success-1);
}

.oj-badge-status.oj-badge-info::before {
  background-color: var(--oj-core-info-1);
}

/* badge                      */
/* -------------------------- */
.oj-badge-sm {
  --oj-badge-height: 1rem;
  --oj-badge-font-size: 0.5625rem;
  --oj-badge-font-weight: 700;
  --oj-badge-border-radius: var(--oj-core-border-radius-md);
}

:root.oj-scale-sm {
  --oj-badge-height: 2rem;
  --oj-badge-font-size: var(--oj-typography-body-md-font-size);
}

:root.oj-scale-md {
  --oj-badge-height: 2rem;
  --oj-badge-font-size: var(--oj-typography-body-md-font-size);
}

/* Badge                     */
/* -------------------------- */
.oj-private-scale-lg {
  --oj-badge-font-size: 11px;
  --oj-badge-height: 24px;
  --oj-badge-border-radius: 6px;
}

/* button */
/* --------------------------------------------------------------- */
oj-button:not(.oj-complete) {
  visibility: hidden;
}

[hidden].oj-button {
  display: none;
}

.oj-button {
  height: var(--oj-button-height);
  margin-bottom: var(--oj-private-core-wrappable-margin-bottom);
  font-size: var(--oj-button-font-size);
  display: inline-flex;
  vertical-align: top;
}

.oj-button-button {
  width: 100%;
  height: 100%;
}

.oj-button-toggle,
.oj-button-button {
  justify-content: center;
  min-width: 0;
  align-items: center;
  padding: 0;
  border: 1px solid;
  border-radius: var(--oj-button-border-radius);
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 100%;
  -webkit-tap-highlight-color: transparent;
}

.oj-button-icon-only,
.oj-buttonset .oj-button-icon-only {
  min-width: var(--oj-button-height);
}

.oj-button-icon {
  font-size: var(--oj-button-icon-size);
}

.oj-button-sm .oj-button-icon {
  font-size: var(--oj-button-sm-icon-size);
}

.oj-button-lg .oj-button-icon {
  font-size: var(--oj-button-lg-icon-size);
}

.oj-button-toggle,
.oj-button-button {
  cursor: var(--oj-core-cursor-clickable);
}

input.oj-button[type=button],
input.oj-button[type=submit],
input.oj-button[type=reset] {
  display: inline-block;
}

/* The root element of toggle (radio and checkbox) buttons */
.oj-button-toggle {
  position: relative;
}

/* The <label> of toggle (radio and checkbox) buttons or <div> of <button> type buttons*/
.oj-button-label,
.oj-button-label oj-option {
  cursor: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* The <input> of toggle (radio and checkbox) buttons */
.oj-button-input {
  left: 0;
  top: 0;
}

/* "oj-button-icon oj-start" is applied to the button's start icon, if any.
       "oj-button-icon oj-end" is applied to the button's end icon, if any.  */
.oj-button .oj-button-icon {
  font-weight: normal;
}

.oj-button .oj-button-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oj-button.oj-button-sm,
.oj-buttonset.oj-button-sm .oj-button-toggle {
  height: var(--oj-button-sm-height);
  font-size: var(--oj-button-sm-font-size);
}

.oj-button-icon-only.oj-button-sm,
.oj-buttonset.oj-button-sm .oj-button-icon-only {
  min-width: var(--oj-button-sm-height);
}

.oj-button.oj-button-lg,
.oj-buttonset.oj-button-lg .oj-button-toggle {
  height: var(--oj-button-lg-height);
  font-size: var(--oj-button-lg-font-size);
}

.oj-button-icon-only.oj-button-lg,
.oj-buttonset.oj-button-lg .oj-button-icon-only {
  min-width: var(--oj-button-lg-height);
}

.oj-button.oj-button-full-width {
  width: 100%;
}

.oj-button.oj-button-full-width .oj-button-button {
  border-radius: 0;
}

.oj-button-toggle,
.oj-button-button,
.oj-button-toggle:link,
.oj-button-button:link,
.oj-button-toggle:visited,
.oj-button-button:visited,
.oj-button-toggle:hover,
.oj-button-button:hover,
.oj-button-toggle:active,
.oj-button-button:active {
  text-decoration: none;
}

.oj-button-toggle:not(.oj-focus-highlight):focus,
.oj-button:not(.oj-focus-highlight) .oj-button-button:focus {
  outline: none;
}

.oj-button-toggle.oj-focus-highlight,
.oj-button.oj-focus-highlight .oj-button-button {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

.oj-button-toggle.oj-disabled,
.oj-button.oj-disabled .oj-button-button {
  cursor: default;
}

/* Solid-chrome buttons have chrome (background and border) in all states (default,
     * focus-only, disabled, hover, active, selected, ...).
     */
.oj-button-toggle.oj-button-full-chrome,
.oj-button-toggle.oj-button-full-chrome:link,
.oj-button-toggle.oj-button-full-chrome:visited,
.oj-button-toggle.oj-button-full-chrome:hover,
.oj-button-toggle.oj-button-full-chrome:active,
.oj-button.oj-button-full-chrome .oj-button-button,
.oj-button.oj-button-full-chrome .oj-button-button:link,
.oj-button.oj-button-full-chrome .oj-button-button:visited,
.oj-button.oj-button-full-chrome .oj-button-button:hover,
.oj-button.oj-button-full-chrome .oj-button-button:active {
  font-weight: var(--oj-button-font-weight);
}

.oj-button.oj-button-full-chrome.oj-button-sm .oj-button-button,
.oj-button.oj-button-full-chrome.oj-button-sm .oj-button-button:active,
.oj-button.oj-button-full-chrome.oj-button-sm .oj-button-button:hover,
.oj-button.oj-button-full-chrome.oj-button-sm .oj-button-button:link,
.oj-button.oj-button-full-chrome.oj-button-sm .oj-button-button:visited,
.oj-buttonset.oj-button-full-chrome.oj-button-sm .oj-button,
.oj-buttonset.oj-button-full-chrome.oj-button-sm .oj-button:active,
.oj-buttonset.oj-button-full-chrome.oj-button-sm .oj-button:hover,
.oj-buttonset.oj-button-full-chrome.oj-button-sm .oj-button:link,
.oj-buttonset.oj-button-full-chrome.oj-button-sm .oj-button:visited {
  font-weight: var(--oj-button-font-weight);
}

/* oj-default is applied iff the button is not in any of the other states,
       namely oj-active, oj-disabled, oj-selected, oj-hover, or oj-focus.
       oj-focus-only is applied iff the button has oj-focus but not any of the other 4 states listed above.*/
.oj-button-toggle.oj-default.oj-button-full-chrome,
.oj-button-toggle.oj-focus-only.oj-button-full-chrome,
.oj-button.oj-default.oj-button-full-chrome .oj-button-button,
.oj-button.oj-focus-only.oj-button-full-chrome .oj-button-button {
  background-color: var(--oj-button-solid-chrome-bg-color);
  border-color: var(--oj-button-solid-chrome-border-color);
  color: var(--oj-button-solid-chrome-text-color);
}

.oj-button.oj-default.oj-button-full-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-full-chrome .oj-button-icon {
  color: var(--oj-button-solid-chrome-text-color);
}

.oj-button-toggle.oj-hover.oj-button-full-chrome,
.oj-button.oj-hover.oj-button-full-chrome .oj-button-button {
  background-color: var(--oj-button-solid-chrome-bg-color-hover);
  border-color: var(--oj-button-solid-chrome-border-color-hover);
  color: var(--oj-button-solid-chrome-text-color-hover);
}

.oj-button.oj-hover.oj-button-full-chrome .oj-button-icon {
  color: var(--oj-button-solid-chrome-text-color-hover);
}

/* oj-active is applied to a push button when it is actively being held down
       by the mouse button or Enter or Spacebar. */
.oj-button-toggle.oj-active.oj-button-full-chrome,
.oj-button.oj-active.oj-button-full-chrome .oj-button-button {
  background-color: var(--oj-button-solid-chrome-bg-color-active);
  border-color: var(--oj-button-solid-chrome-border-color-active);
  color: var(--oj-button-solid-chrome-text-color-active);
}

.oj-button.oj-active.oj-button-full-chrome .oj-button-icon {
  color: var(--oj-button-solid-chrome-text-color-active);
}

.oj-button-toggle.oj-selected.oj-button-full-chrome,
.oj-button.oj-selected.oj-button-full-chrome .oj-button-button {
  background-color: var(--oj-button-solid-chrome-bg-color-selected);
  border-color: var(--oj-button-solid-chrome-border-color-selected);
  color: var(--oj-button-solid-chrome-text-color-selected);
}

.oj-button-toggle.oj-selected.oj-hover.oj-button-full-chrome,
.oj-button.oj-selected.oj-hover.oj-button-full-chrome .oj-button-button {
  color: var(--oj-button-solid-chrome-text-color-selected-hover);
  background-color: var(--oj-button-solid-chrome-bg-color-selected-hover);
  border-color: var(--oj-button-solid-chrome-border-color-selected-hover);
}

.oj-button.oj-selected.oj-button-full-chrome .oj-button-icon {
  color: var(--oj-button-solid-chrome-text-color-selected);
}

.oj-button.oj-selected.oj-hover.oj-button-full-chrome .oj-button-icon {
  color: var(--oj-button-solid-chrome-text-color-selected-hover);
}

.oj-button-toggle.oj-disabled.oj-button-full-chrome,
.oj-button.oj-disabled.oj-button-full-chrome .oj-button-button,
.oj-button-toggle.oj-disabled.oj-button-cta-chrome,
.oj-button.oj-disabled.oj-button-cta-chrome .oj-button-button {
  background-color: var(--oj-button-solid-chrome-bg-color-disabled);
  border-color: var(--oj-button-solid-chrome-border-color-disabled);
  color: var(--oj-button-solid-chrome-text-color-disabled);
  background-image: none;
}

.oj-button.oj-disabled.oj-button-full-chrome .oj-button-icon,
.oj-button.oj-disabled.oj-button-cta-chrome .oj-button-icon {
  color: var(--oj-button-solid-chrome-text-color-disabled);
}

.oj-button-toggle.oj-disabled.oj-selected.oj-button-full-chrome,
.oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-button {
  color: var(--oj-button-solid-chrome-text-color-selected-disabled);
  background-color: var(--oj-button-solid-chrome-bg-color-selected-disabled);
  border-color: var(--oj-button-solid-chrome-border-color-selected-disabled);
}

.oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-icon {
  color: var(--oj-button-solid-chrome-text-color-selected-disabled);
}

/* Borderless-chrome buttons have no chrome (background or border) in their default,
     * focus-only, and disabled-not-selected states, but acquire chrome in their
     * hover, active, and selected states.
     *
     * Borderless-chroming is recommended for buttons in a toolbar, and anytime the
     * borderless-chrome look is desired.
     *
     * To set button chroming, use the "chroming" option on the Button, Buttonset, and Toolbar
     * components, per the JSDoc.  Do not apply the oj-button-XXX-chrome classes manually.
     */
.oj-button-toggle.oj-default.oj-button-half-chrome,
.oj-button-toggle.oj-focus-only.oj-button-half-chrome,
.oj-button-toggle.oj-disabled.oj-button-half-chrome,
.oj-button.oj-default.oj-button-half-chrome .oj-button-button,
.oj-button.oj-focus-only.oj-button-half-chrome .oj-button-button,
.oj-button.oj-disabled.oj-button-half-chrome .oj-button-button {
  border-color: transparent;
  background-color: transparent;
  background-image: none;
}

.oj-button-toggle.oj-default.oj-button-half-chrome,
.oj-button-toggle.oj-focus-only.oj-button-half-chrome,
.oj-button.oj-default.oj-button-half-chrome .oj-button-button,
.oj-button.oj-focus-only.oj-button-half-chrome .oj-button-button {
  color: var(--oj-button-borderless-chrome-text-color);
}

.oj-button-toggle.oj-hover.oj-button-half-chrome,
.oj-button.oj-hover.oj-button-half-chrome .oj-button-button {
  color: var(--oj-button-borderless-chrome-text-color-hover);
  background-color: var(--oj-button-borderless-chrome-bg-color-hover);
  border-color: var(--oj-button-borderless-chrome-border-color-hover);
}

.oj-button-toggle.oj-active.oj-button-half-chrome,
.oj-button.oj-active.oj-button-half-chrome .oj-button-button {
  color: var(--oj-button-borderless-chrome-text-color-active);
  background-color: var(--oj-button-borderless-chrome-bg-color-active);
  border-color: var(--oj-button-borderless-chrome-border-color-active);
}

.oj-button-toggle.oj-selected.oj-button-half-chrome,
.oj-button.oj-selected.oj-button-half-chrome .oj-button-button {
  color: var(--oj-button-borderless-chrome-text-color-selected);
  background-color: var(--oj-button-borderless-chrome-bg-color-selected);
  border-color: var(--oj-button-borderless-chrome-border-color-selected);
}

.oj-button-toggle.oj-selected.oj-hover.oj-button-half-chrome,
.oj-button.oj-selected.oj-hover.oj-button-half-chrome .oj-button-button {
  color: var(--oj-button-borderless-chrome-text-color-selected-hover);
  background-color: var(--oj-button-borderless-chrome-bg-color-selected-hover);
  border-color: var(--oj-button-borderless-chrome-border-color-selected-hover);
}

.oj-button-toggle.oj-disabled.oj-button-half-chrome,
.oj-button.oj-disabled.oj-button-half-chrome .oj-button-button {
  color: var(--oj-button-borderless-chrome-text-color-disabled);
}

.oj-button-toggle.oj-disabled.oj-selected.oj-button-half-chrome,
.oj-button.oj-disabled.oj-selected.oj-button-half-chrome .oj-button-button {
  color: var(--oj-button-borderless-chrome-text-color-selected-disabled);
  background-color: var(--oj-button-borderless-chrome-bg-color-selected-disabled);
  border-color: var(--oj-button-borderless-chrome-border-color-selected-disabled);
}

.oj-button-toggle.oj-button-half-chrome,
.oj-button-toggle.oj-button-half-chrome:link,
.oj-button-toggle.oj-button-half-chrome:visited,
.oj-button-toggle.oj-button-half-chrome:hover,
.oj-button-toggle.oj-button-half-chrome:active,
.oj-button.oj-button-half-chrome .oj-button-button,
.oj-button.oj-button-half-chrome .oj-button-button:link,
.oj-button.oj-button-half-chrome .oj-button-button:visited,
.oj-button.oj-button-half-chrome .oj-button-button:hover,
.oj-button.oj-button-half-chrome .oj-button-button:active {
  font-weight: var(--oj-button-font-weight);
}

.oj-button.oj-button-half-chrome.oj-button-sm .oj-button-button,
.oj-button.oj-button-half-chrome.oj-button-sm .oj-button-button:active,
.oj-button.oj-button-half-chrome.oj-button-sm .oj-button-button:hover,
.oj-button.oj-button-half-chrome.oj-button-sm .oj-button-button:link,
.oj-button.oj-button-half-chrome.oj-button-sm .oj-button-button:visited,
.oj-buttonset.oj-button-half-chrome.oj-button-sm .oj-button,
.oj-buttonset.oj-button-half-chrome.oj-button-sm .oj-button:active,
.oj-buttonset.oj-button-half-chrome.oj-button-sm .oj-button:hover,
.oj-buttonset.oj-button-half-chrome.oj-button-sm .oj-button:link,
.oj-buttonset.oj-button-half-chrome.oj-button-sm .oj-button:visited {
  font-weight: var(--oj-button-font-weight);
}

.oj-button.oj-default.oj-button-half-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-half-chrome .oj-button-icon {
  color: var(--oj-button-borderless-chrome-text-color);
}

.oj-button.oj-hover.oj-button-half-chrome .oj-button-icon {
  color: var(--oj-button-borderless-chrome-text-color-hover);
}

.oj-button.oj-active.oj-button-half-chrome .oj-button-icon {
  color: var(--oj-button-borderless-chrome-text-color-active);
}

.oj-button.oj-selected.oj-button-half-chrome .oj-button-icon {
  color: var(--oj-button-borderless-chrome-text-color-selected);
}

.oj-button.oj-selected.oj-hover.oj-button-half-chrome .oj-button-icon {
  color: var(--oj-button-borderless-chrome-text-color-selected-hover);
}

.oj-button.oj-disabled.oj-button-half-chrome .oj-button-icon {
  color: var(--oj-button-borderless-chrome-text-color-disabled);
}

.oj-button.oj-disabled.oj-selected.oj-button-half-chrome .oj-button-icon {
  color: var(--oj-button-borderless-chrome-text-color-selected-disabled);
}

/* Outlined buttons are similar to borderless-chrome buttons, but have a border in the default state. */
.oj-button-toggle.oj-default.oj-button-outlined-chrome,
.oj-button-toggle.oj-focus-only.oj-button-outlined-chrome,
.oj-button-toggle.oj-disabled.oj-button-outlined-chrome,
.oj-button.oj-default.oj-button-outlined-chrome .oj-button-button,
.oj-button.oj-focus-only.oj-button-outlined-chrome .oj-button-button,
.oj-button.oj-disabled.oj-button-outlined-chrome .oj-button-button {
  border-color: var(--oj-button-outlined-chrome-border-color);
  background-image: none;
  background-color: var(--oj-button-outlined-chrome-bg-color);
}

.oj-button-toggle.oj-default.oj-button-outlined-chrome,
.oj-button-toggle.oj-focus-only.oj-button-outlined-chrome,
.oj-button.oj-default.oj-button-outlined-chrome .oj-button-button,
.oj-button.oj-focus-only.oj-button-outlined-chrome .oj-button-button {
  color: var(--oj-button-outlined-chrome-text-color);
}

.oj-button-toggle.oj-hover.oj-button-outlined-chrome,
.oj-button.oj-hover.oj-button-outlined-chrome .oj-button-button {
  color: var(--oj-button-outlined-chrome-text-color-hover);
  background-color: var(--oj-button-outlined-chrome-bg-color-hover);
  border-color: var(--oj-button-outlined-chrome-border-color-hover);
}

.oj-button-toggle.oj-active.oj-button-outlined-chrome,
.oj-button.oj-active.oj-button-outlined-chrome .oj-button-button {
  color: var(--oj-button-outlined-chrome-text-color-active);
  background-color: var(--oj-button-outlined-chrome-bg-color-active);
  border-color: var(--oj-button-outlined-chrome-border-color-active);
}

.oj-button-toggle.oj-selected.oj-button-outlined-chrome,
.oj-button.oj-selected.oj-button-outlined-chrome .oj-button-button {
  color: var(--oj-button-outlined-chrome-text-color-selected);
  background-color: var(--oj-button-outlined-chrome-bg-color-selected);
  border-color: var(--oj-button-outlined-chrome-border-color-selected);
}

.oj-button-toggle.oj-selected.oj-hover.oj-button-outlined-chrome,
.oj-button.oj-selected.oj-hover.oj-button-outlined-chrome .oj-button-button {
  color: var(--oj-button-outlined-chrome-text-color-selected-hover);
  background-color: var(--oj-button-outlined-chrome-bg-color-selected-hover);
  border-color: var(--oj-button-outlined-chrome-border-color-selected-hover);
}

.oj-button-toggle.oj-disabled.oj-button-outlined-chrome,
.oj-button.oj-disabled.oj-button-outlined-chrome .oj-button-button {
  color: var(--oj-button-outlined-chrome-text-color-disabled);
  border-color: var(--oj-button-outlined-chrome-border-color-disabled);
  background-color: var(--oj-button-outlined-chrome-bg-color-disabled);
}

.oj-button-toggle.oj-disabled.oj-selected.oj-button-outlined-chrome,
.oj-button.oj-disabled.oj-selected.oj-button-outlined-chrome .oj-button-button {
  color: var(--oj-button-outlined-chrome-text-color-selected-disabled);
  background-color: var(--oj-button-outlined-chrome-bg-color-selected-disabled);
  border-color: var(--oj-button-outlined-chrome-border-color-selected-disabled);
}

.oj-button-toggle.oj-button-outlined-chrome,
.oj-button-toggle.oj-button-outlined-chrome:link,
.oj-button-toggle.oj-button-outlined-chrome:visited,
.oj-button-toggle.oj-button-outlined-chrome:hover,
.oj-button-toggle.oj-button-outlined-chrome:active,
.oj-button.oj-button-outlined-chrome .oj-button-button,
.oj-button.oj-button-outlined-chrome .oj-button-button:link,
.oj-button.oj-button-outlined-chrome .oj-button-button:visited,
.oj-button.oj-button-outlined-chrome .oj-button-button:hover,
.oj-button.oj-button-outlined-chrome .oj-button-button:active {
  font-weight: var(--oj-button-font-weight);
}

.oj-button.oj-button-outlined-chrome.oj-button-sm .oj-button-button,
.oj-button.oj-button-outlined-chrome.oj-button-sm .oj-button-button:active,
.oj-button.oj-button-outlined-chrome.oj-button-sm .oj-button-button:hover,
.oj-button.oj-button-outlined-chrome.oj-button-sm .oj-button-button:link,
.oj-button.oj-button-outlined-chrome.oj-button-sm .oj-button-button:visited,
.oj-buttonset.oj-button-outlined-chrome.oj-button-sm .oj-button,
.oj-buttonset.oj-button-outlined-chrome.oj-button-sm .oj-button:active,
.oj-buttonset.oj-button-outlined-chrome.oj-button-sm .oj-button:hover,
.oj-buttonset.oj-button-outlined-chrome.oj-button-sm .oj-button:link,
.oj-buttonset.oj-button-outlined-chrome.oj-button-sm .oj-button:visited {
  font-weight: var(--oj-button-font-weight);
}

.oj-button.oj-default.oj-button-outlined-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-outlined-chrome .oj-button-icon {
  color: var(--oj-button-outlined-chrome-text-color);
}

.oj-button.oj-hover.oj-button-outlined-chrome .oj-button-icon {
  color: var(--oj-button-outlined-chrome-text-color-hover);
}

.oj-button.oj-active.oj-button-outlined-chrome .oj-button-icon {
  color: var(--oj-button-outlined-chrome-text-color-active);
}

.oj-button.oj-selected.oj-button-outlined-chrome .oj-button-icon {
  color: var(--oj-button-outlined-chrome-text-color-selected);
}

.oj-button.oj-selected.oj-hover.oj-button-outlined-chrome .oj-button-icon {
  color: var(--oj-button-outlined-chrome-text-color-selected-hover);
}

.oj-button.oj-disabled.oj-button-outlined-chrome .oj-button-icon {
  color: var(--oj-button-outlined-chrome-text-color-disabled);
}

.oj-button.oj-disabled.oj-selected.oj-button-outlined-chrome .oj-button-icon {
  color: var(--oj-button-outlined-chrome-text-color-selected-disabled);
}

/* Call To Action (CTA) chrome button guides the user to take or complete the action that is the main goal of the page or page section.
     * There should only be one CTA button on a page at any given time.
     * cta-chrome buttons have chrome (background and border) in all states (default,
     * focus-only, disabled, hover, active ...).
     * selected states do not apply since CTA buttons are Push Buttons only
     */
.oj-button-toggle.oj-button-cta-chrome,
.oj-button-toggle.oj-button-cta-chrome:link,
.oj-button-toggle.oj-button-cta-chrome:visited,
.oj-button-toggle.oj-button-cta-chrome:hover,
.oj-button-toggle.oj-button-cta-chrome:active,
.oj-button.oj-button-cta-chrome .oj-button-button,
.oj-button.oj-button-cta-chrome .oj-button-button:link,
.oj-button.oj-button-cta-chrome .oj-button-button:visited,
.oj-button.oj-button-cta-chrome .oj-button-button:hover,
.oj-button.oj-button-cta-chrome .oj-button-button:active {
  font-weight: var(--oj-button-font-weight);
}

/* oj-default is applied iff the button is not in any of the other states,
        namely oj-active, oj-disabled, oj-hover, or oj-focus.
        oj-focus-only is applied iff the button has oj-focus but not any of the other 4 states listed above.*/
.oj-button-toggle.oj-default.oj-button-cta-chrome,
.oj-button-toggle.oj-focus-only.oj-button-cta-chrome,
.oj-button.oj-default.oj-button-cta-chrome .oj-button-button,
.oj-button.oj-focus-only.oj-button-cta-chrome .oj-button-button {
  background-color: var(--oj-button-call-to-action-chrome-bg-color);
  border-color: var(--oj-button-call-to-action-chrome-border-color);
  color: var(--oj-button-call-to-action-chrome-text-color);
}

.oj-button.oj-default.oj-button-cta-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-cta-chrome .oj-button-icon {
  color: var(--oj-button-call-to-action-chrome-text-color);
}

.oj-button-toggle.oj-hover.oj-button-cta-chrome,
.oj-button.oj-hover.oj-button-cta-chrome .oj-button-button {
  background-color: var(--oj-button-call-to-action-chrome-bg-color-hover);
  border-color: var(--oj-button-call-to-action-chrome-border-color-hover);
  color: var(--oj-button-call-to-action-chrome-text-color-hover);
}

.oj-button.oj-hover.oj-button-cta-chrome .oj-button-icon {
  color: var(--oj-button-call-to-action-chrome-text-color-hover);
}

/* oj-active is applied to a push button when it is actively being held down
        by the mouse button or Enter or Spacebar. */
.oj-button-toggle.oj-active.oj-button-cta-chrome,
.oj-button.oj-active.oj-button-cta-chrome .oj-button-button {
  background-color: var(--oj-button-call-to-action-chrome-bg-color-active);
  border-color: var(--oj-button-call-to-action-chrome-border-color-active);
  color: var(--oj-button-call-to-action-chrome-text-color-active);
}

.oj-button.oj-active.oj-button-cta-chrome .oj-button-icon {
  color: var(--oj-button-call-to-action-chrome-text-color-active);
}

/* The element containing the text of buttons without icons.  This is the Button (input element)
     * itself for <input type=button|submit|reset>, which doesn't support icons at all, and a nested span
     * for other types of Buttons.
     */
input.oj-button[type=button],
input.oj-button[type=submit],
input.oj-button[type=reset],
.oj-buttonset .oj-button-text-only .oj-button-text,
.oj-button-text-only .oj-button-text {
  padding: 0 var(--oj-button-text-to-edge-padding);
}

/* The text span of buttons with text, a left icon, but no right icon */
html:not([dir=rtl]) .oj-buttonset .oj-button-text-icon-start .oj-button-text,
html:not([dir=rtl]) .oj-button-text-icon-start .oj-button-text {
  padding: 0 var(--oj-button-text-to-edge-padding) 0 0;
}

html[dir=rtl] .oj-buttonset .oj-button-text-icon-end .oj-button-text,
html[dir=rtl] .oj-button-text-icon-end .oj-button-text {
  padding: 0 var(--oj-button-text-to-edge-padding) 0 0;
}

/* The text span of buttons with text, a right icon, but no left icon */
html:not([dir=rtl]) .oj-buttonset .oj-button-text-icon-end .oj-button-text,
html:not([dir=rtl]) .oj-button-text-icon-end .oj-button-text {
  padding: 0 0 0 var(--oj-button-text-to-edge-padding);
}

html[dir=rtl] .oj-buttonset .oj-button-text-icon-start .oj-button-text,
html[dir=rtl] .oj-button-text-icon-start .oj-button-text {
  padding: 0 0 0 var(--oj-button-text-to-edge-padding);
}

/* The text span of buttons with text and both icons */
.oj-buttonset .oj-button-text-icons .oj-button-text,
.oj-button-text-icons .oj-button-text {
  padding: 0;
}

/* The left icon of buttons with text and a left icon, with or without a right icon */
html:not([dir=rtl]) .oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: var(--oj-button-icon-to-text-padding);
  margin-left: var(--oj-button-icon-to-edge-padding);
}

html[dir=rtl] .oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: var(--oj-button-icon-to-text-padding);
  margin-left: var(--oj-button-icon-to-edge-padding);
}

/* The left icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-left: var(--oj-button-icon-to-edge-padding);
}

html[dir=rtl] .oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin: 0 0.375rem;
}

/* The right icon of buttons with text and a right icon, with or without a left icon */
html:not([dir=rtl]) .oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: var(--oj-button-icon-to-edge-padding);
  margin-left: var(--oj-button-icon-to-text-padding);
}

html[dir=rtl] .oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: var(--oj-button-icon-to-edge-padding);
  margin-left: var(--oj-button-icon-to-text-padding);
}

/* The right icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin: 0 0.375rem;
}

html[dir=rtl] .oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: var(--oj-button-icon-to-edge-padding);
}

.oj-button-icon-only .oj-button-icon {
  display: inline-flex;
}

/* The element containing the text of buttons without icons.  This is the Button (input element)
     * itself for <input type=button|submit|reset>, which doesn't support icons at all, and a nested span
     * for other types of Buttons.
     */
input.oj-button-sm.oj-button[type=button],
input.oj-button-sm.oj-button[type=submit],
input.oj-button-sm.oj-button[type=reset],
.oj-button-sm.oj-buttonset .oj-button-text-only .oj-button-text,
.oj-button-sm.oj-button-text-only .oj-button-text {
  padding: 0 var(--oj-button-sm-text-to-edge-padding);
}

/* The text span of buttons with text, a left icon, but no right icon */
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-text-icon-start .oj-button-text,
html:not([dir=rtl]) .oj-button-sm.oj-button-text-icon-start .oj-button-text {
  padding: 0 var(--oj-button-sm-text-to-edge-padding) 0 0;
}

html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-text-icon-end .oj-button-text,
html[dir=rtl] .oj-button-sm.oj-button-text-icon-end .oj-button-text {
  padding: 0 var(--oj-button-sm-text-to-edge-padding) 0 0;
}

/* The text span of buttons with text, a right icon, but no left icon */
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-text-icon-end .oj-button-text,
html:not([dir=rtl]) .oj-button-sm.oj-button-text-icon-end .oj-button-text {
  padding: 0 0 0 var(--oj-button-sm-text-to-edge-padding);
}

html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-text-icon-start .oj-button-text,
html[dir=rtl] .oj-button-sm.oj-button-text-icon-start .oj-button-text {
  padding: 0 0 0 var(--oj-button-sm-text-to-edge-padding);
}

/* The text span of buttons with text and both icons */
.oj-button-sm.oj-buttonset .oj-button-text-icons .oj-button-text,
.oj-button-sm.oj-button-text-icons .oj-button-text {
  padding: 0;
}

/* The left icon of buttons with text and a left icon, with or without a right icon */
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-sm.oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-sm.oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: var(--oj-button-sm-icon-to-text-padding);
  margin-left: var(--oj-button-sm-icon-to-edge-padding);
}

html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-sm.oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-sm.oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: var(--oj-button-sm-icon-to-text-padding);
  margin-left: var(--oj-button-sm-icon-to-edge-padding);
}

/* The left icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-left: var(--oj-button-sm-icon-to-edge-padding);
}

html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin: 0 0.375rem;
}

/* The right icon of buttons with text and a right icon, with or without a left icon */
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-sm.oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-sm.oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: var(--oj-button-sm-icon-to-edge-padding);
  margin-left: var(--oj-button-sm-icon-to-text-padding);
}

html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-sm.oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-sm.oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: var(--oj-button-sm-icon-to-edge-padding);
  margin-left: var(--oj-button-sm-icon-to-text-padding);
}

/* The right icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-button-sm.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin: 0 0.375rem;
}

html[dir=rtl] .oj-button-sm.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: var(--oj-button-sm-icon-to-edge-padding);
}

.oj-button-sm.oj-button-icon-only .oj-button-icon {
  display: inline-flex;
}

/* The element containing the text of buttons without icons.  This is the Button (input element)
     * itself for <input type=button|submit|reset>, which doesn't support icons at all, and a nested span
     * for other types of Buttons.
     */
input.oj-button-lg.oj-button[type=button],
input.oj-button-lg.oj-button[type=submit],
input.oj-button-lg.oj-button[type=reset],
.oj-button-lg.oj-buttonset .oj-button-text-only .oj-button-text,
.oj-button-lg.oj-button-text-only .oj-button-text {
  padding: 0 var(--oj-button-lg-text-to-edge-padding);
}

/* The text span of buttons with text, a left icon, but no right icon */
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-text-icon-start .oj-button-text,
html:not([dir=rtl]) .oj-button-lg.oj-button-text-icon-start .oj-button-text {
  padding: 0 var(--oj-button-lg-text-to-edge-padding) 0 0;
}

html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-text-icon-end .oj-button-text,
html[dir=rtl] .oj-button-lg.oj-button-text-icon-end .oj-button-text {
  padding: 0 var(--oj-button-lg-text-to-edge-padding) 0 0;
}

/* The text span of buttons with text, a right icon, but no left icon */
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-text-icon-end .oj-button-text,
html:not([dir=rtl]) .oj-button-lg.oj-button-text-icon-end .oj-button-text {
  padding: 0 0 0 var(--oj-button-lg-text-to-edge-padding);
}

html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-text-icon-start .oj-button-text,
html[dir=rtl] .oj-button-lg.oj-button-text-icon-start .oj-button-text {
  padding: 0 0 0 var(--oj-button-lg-text-to-edge-padding);
}

/* The text span of buttons with text and both icons */
.oj-button-lg.oj-buttonset .oj-button-text-icons .oj-button-text,
.oj-button-lg.oj-button-text-icons .oj-button-text {
  padding: 0;
}

/* The left icon of buttons with text and a left icon, with or without a right icon */
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-lg.oj-button-text-icon-start .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-lg.oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: var(--oj-button-lg-icon-to-text-padding);
  margin-left: var(--oj-button-lg-icon-to-edge-padding);
}

html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-lg.oj-button-text-icon-end .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-lg.oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: var(--oj-button-lg-icon-to-text-padding);
  margin-left: var(--oj-button-lg-icon-to-edge-padding);
}

/* The left icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html:not([dir=rtl]) .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-left: var(--oj-button-lg-icon-to-edge-padding);
}

html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html[dir=rtl] .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin: 0 0.375rem;
}

/* The right icon of buttons with text and a right icon, with or without a left icon */
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-lg.oj-button-text-icon-end .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-lg.oj-button-text-icons .oj-button-icon.oj-end {
  display: inline-flex;
  margin-right: var(--oj-button-lg-icon-to-edge-padding);
  margin-left: var(--oj-button-lg-icon-to-text-padding);
}

html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-lg.oj-button-text-icon-start .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-lg.oj-button-text-icons .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: var(--oj-button-lg-icon-to-edge-padding);
  margin-left: var(--oj-button-lg-icon-to-text-padding);
}

/* The right icon of buttons with 2 icons and no text */
html:not([dir=rtl]) .oj-button-lg.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,
html:not([dir=rtl]) .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-end {
  display: inline-flex;
  margin: 0 0.375rem;
}

html[dir=rtl] .oj-button-lg.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,
html[dir=rtl] .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-start {
  display: inline-flex;
  margin-right: var(--oj-button-lg-icon-to-edge-padding);
}

.oj-button-lg.oj-button-icon-only .oj-button-icon {
  display: inline-flex;
}

/* reset extra padding in Firefox, see h5bp.com/1 */
input.oj-button::-moz-focus-inner,
button.oj-button::-moz-focus-inner,
.oj-button button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.oj-hicontrast .oj-button-toggle.oj-focus,
.oj-hicontrast .oj-button.oj-focus .oj-button-button {
  outline-width: 3px;
}

.oj-hicontrast .oj-button-toggle.oj-selected,
.oj-hicontrast .oj-button.oj-selected .oj-button-button {
  border-style: double;
  border-width: 3px;
}

.oj-hicontrast .oj-button-toggle.oj-disabled,
.oj-hicontrast .oj-button.oj-disabled .oj-button-button {
  border-style: dotted;
}

.oj-hicontrast .oj-button-toggle.oj-disabled.oj-selected,
.oj-hicontrast .oj-button.oj-disabled.oj-selected .oj-button-button {
  border-width: 2px;
}

/* menu buttons */
/* button                     */
/* -------------------------- */
.oj-contrast-marker,
.oj-color-invert {
  --oj-button-solid-chrome-bg-color: rgba(var(--oj-palette-neutral-rgb-10), 0.08);
  --oj-button-solid-chrome-border-color: transparent;
  --oj-button-solid-chrome-text-color: var(--oj-core-neutral-contrast);
  --oj-button-solid-chrome-bg-color-hover: rgba(var(--oj-palette-neutral-rgb-10), 0.12);
  --oj-button-solid-chrome-border-color-hover: transparent;
  --oj-button-solid-chrome-text-color-hover: var(--oj-core-neutral-contrast);
  --oj-button-solid-chrome-bg-color-active: rgba(var(--oj-palette-neutral-rgb-10), 0.16);
  --oj-button-solid-chrome-border-color-active: transparent;
  --oj-button-solid-chrome-text-color-active: var(--oj-core-neutral-contrast);
  --oj-button-solid-chrome-bg-color-disabled: rgba(var(--oj-palette-neutral-rgb-0), 0.16);
  --oj-button-solid-chrome-border-color-disabled: transparent;
  --oj-button-solid-chrome-text-color-disabled: var(--oj-core-text-color-disabled);
  --oj-button-solid-chrome-bg-color-selected: rgba(var(--oj-palette-neutral-rgb-10), 0.08);
  --oj-button-solid-chrome-border-color-selected: transparent;
  --oj-button-solid-chrome-text-color-selected: var(--oj-core-neutral-contrast);
  --oj-button-solid-chrome-bg-color-selected-hover: rgba(var(--oj-palette-neutral-rgb-10), 0.12);
  --oj-button-solid-chrome-border-color-selected-hover: transparent;
  --oj-button-solid-chrome-text-color-selected-hover: var(--oj-core-neutral-contrast);
  --oj-button-solid-chrome-bg-color-selected-disabled: rgba(var(--oj-palette-neutral-rgb-0), 0.16);
  --oj-button-solid-chrome-border-color-selected-disabled: transparent;
  --oj-button-solid-chrome-text-color-selected-disabled: var(--oj-core-text-color-disabled);
  --oj-button-borderless-chrome-text-color: var(--oj-core-text-color-primary);
  --oj-button-borderless-chrome-bg-color-hover: var(--oj-core-bg-color-hover);
  --oj-button-borderless-chrome-border-color-hover: transparent;
  --oj-button-borderless-chrome-text-color-hover: var(--oj-core-text-color-primary);
  --oj-button-borderless-chrome-bg-color-active: var(--oj-core-bg-color-active);
  --oj-button-borderless-chrome-border-color-active: transparent;
  --oj-button-borderless-chrome-text-color-active: var(--oj-core-text-color-primary);
  --oj-button-borderless-chrome-text-color-disabled: var(--oj-core-text-color-disabled);
  --oj-button-borderless-chrome-bg-color-selected: transparent;
  --oj-button-borderless-chrome-border-color-selected: rgba(var(--oj-palette-neutral-rgb-0), 0.3);
  --oj-button-borderless-chrome-text-color-selected: var(--oj-core-text-color-primary);
  --oj-button-borderless-chrome-bg-color-selected-hover: var(--oj-core-bg-color-hover);
  --oj-button-borderless-chrome-border-color-selected-hover: rgba(var(--oj-palette-neutral-rgb-0), 0.3);
  --oj-button-borderless-chrome-text-color-selected-hover: var(--oj-core-text-color-primary);
  --oj-button-borderless-chrome-bg-color-selected-disabled: transparent;
  --oj-button-borderless-chrome-border-color-selected-disabled: rgba(rgb(var(--oj-palette-neutral-rgb-0)), 0.6);
  --oj-button-borderless-chrome-text-color-selected-disabled: var(--oj-core-text-color-disabled);
  --oj-button-outlined-chrome-border-color: rgba(var(--oj-palette-neutral-rgb-0), 0.3);
  --oj-button-outlined-chrome-text-color: var(--oj-core-text-color-primary);
  --oj-button-outlined-chrome-bg-color-hover: var(--oj-core-bg-color-hover);
  --oj-button-outlined-chrome-border-color-hover: rgba(var(--oj-palette-neutral-rgb-0), 0.3);
  --oj-button-outlined-chrome-text-color-hover: var(--oj-core-text-color-primary);
  --oj-button-outlined-chrome-bg-color-active: var(--oj-core-bg-color-active);
  --oj-button-outlined-chrome-border-color-active: rgba(var(--oj-palette-neutral-rgb-0), 0.3);
  --oj-button-outlined-chrome-text-color-active: var(--oj-core-text-color-primary);
  --oj-button-outlined-chrome-border-color-disabled: rgba(var(--oj-palette-neutral-rgb-0), 0.1);
  --oj-button-outlined-chrome-text-color-disabled: var(--oj-core-text-color-disabled);
  --oj-button-outlined-chrome-bg-color-selected: transparent;
  --oj-button-outlined-chrome-border-color-selected: rgba(var(--oj-palette-neutral-rgb-0), 0.3);
  --oj-button-outlined-chrome-text-color-selected: var(--oj-core-text-color-primary);
  --oj-button-outlined-chrome-bg-color-selected-hover: var(--oj-core-bg-color-hover);
  --oj-button-outlined-chrome-border-color-selected-hover: rgba(var(--oj-palette-neutral-rgb-0), 0.3);
  --oj-button-outlined-chrome-text-color-selected-hover: var(--oj-core-text-color-primary);
  --oj-button-outlined-chrome-bg-color-selected-disabled: transparent;
  --oj-button-outlined-chrome-border-color-selected-disabled: var(--oj-button-outlined-chrome-border-color-disabled);
  --oj-button-outlined-chrome-text-color-selected-disabled: var(--oj-core-text-color-disabled);
  --oj-button-call-to-action-chrome-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-button-call-to-action-chrome-border-color: transparent;
  --oj-button-call-to-action-chrome-text-color: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-button-call-to-action-chrome-bg-color-hover: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-button-call-to-action-chrome-border-color-hover: transparent;
  --oj-button-call-to-action-chrome-text-color-hover: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-button-call-to-action-chrome-bg-color-active: rgb(var(--oj-palette-neutral-rgb-20));
  --oj-button-call-to-action-chrome-border-color-active: transparent;
  --oj-button-call-to-action-chrome-text-color-active: rgb(var(--oj-palette-neutral-rgb-190));
}

:root.oj-scale-sm {
  --oj-button-height: var(--oj-text-field-height);
  --oj-button-font-size: var(--oj-typography-body-md-font-size);
  --oj-button-sm-font-size: var(--oj-typography-body-md-font-size);
  --oj-button-lg-font-size: var(--oj-typography-body-md-font-size);
}

:root.oj-scale-md {
  --oj-button-font-size: var(--oj-typography-body-md-font-size);
  --oj-button-sm-font-size: var(--oj-typography-body-md-font-size);
  --oj-button-lg-font-size: var(--oj-typography-body-md-font-size);
}

/* button                     */
/* -------------------------- */
.oj-button-danger-chrome {
  --oj-button-solid-chrome-bg-color: var(--oj-core-danger-1);
  --oj-button-solid-chrome-border-color: transparent;
  --oj-button-solid-chrome-text-color: var(--oj-core-danger-contrast);
  --oj-button-solid-chrome-bg-color-hover: var(--oj-core-danger-2);
  --oj-button-solid-chrome-border-color-hover: transparent;
  --oj-button-solid-chrome-text-color-hover: var(--oj-core-danger-contrast);
  --oj-button-solid-chrome-bg-color-active: var(--oj-core-danger-3);
  --oj-button-solid-chrome-border-color-active: transparent;
  --oj-button-solid-chrome-text-color-active: var(--oj-core-danger-contrast);
}

.oj-private-scale-lg {
  --oj-button-lg-height: 52px;
  --oj-button-lg-icon-size: 24px;
  --oj-button-lg-icon-to-text-padding: 16px;
  --oj-button-lg-icon-to-edge-padding: 16px;
  --oj-button-lg-font-size: var(--oj-typography-body-sm-font-size);
  --oj-button-lg-text-to-edge-padding: 24px;
  --oj-button-height: 44px;
  --oj-button-icon-size: 24px;
  --oj-button-icon-to-text-padding: 10px;
  --oj-button-icon-to-edge-padding: 10px;
  --oj-button-font-size: var(--oj-typography-body-sm-font-size);
  --oj-button-text-to-edge-padding: 16px;
  --oj-button-sm-height: 36px;
  --oj-button-sm-icon-size: 20px;
  --oj-button-sm-icon-to-text-padding: 8px;
  --oj-button-sm-icon-to-edge-padding: 8px;
  --oj-button-sm-font-size: var(--oj-typography-body-sm-font-size);
  --oj-button-sm-text-to-edge-padding: 16px;
}

.oj-buttonset.oj-button-full-chrome {
  visibility: hidden;
}

:root {
  --oj-private-buttonset-solid-chrome-internal-border-color: rgb(var(--oj-palette-neutral-rgb-100));
  --oj-private-buttonset-solid-chrome-internal-border-color-active: rgb(var(--oj-palette-neutral-rgb-100));
  --oj-private-buttonset-solid-chrome-internal-border-color-selected: rgb(var(--oj-palette-neutral-rgb-100));
  --oj-private-buttonset-solid-chrome-internal-border-color-selected-disabled: var(
    --oj-button-solid-chrome-bg-color-disabled
  );
  --oj-buttonset-outlined-chrome-internal-border-color: var(--oj-button-outlined-chrome-border-color);
  --oj-buttonset-outlined-chrome-internal-border-color-active: var(--oj-button-outlined-chrome-border-color);
  --oj-buttonset-outlined-chrome-internal-border-color-selected: var(--oj-button-outlined-chrome-border-color);
  --oj-buttonset-outlined-chrome-internal-border-color-selected-disabled: var(--oj-core-color-disabled-1);
  --oj-private-buttonset-global-chroming-default: outlined;
}

/* buttonset */
/* --------------------------------------------------------------- */
oj-buttonset-one:not(.oj-complete),
oj-buttonset-many:not(.oj-complete) {
  visibility: hidden;
}

.oj-buttonset {
  font-size: var(--oj-button-font-size);
}

/* oj-buttonset-multi is present iff it's a multi-button buttonset, which is the only kind of buttonset to which 
       buttonset styling should be applied.  When a single button is wrapped in a buttonset (typically for use with 
       the "checked" option), that's an implementation detail; users still see it as a standalone button, so it 
       should be themed as such. */
.oj-buttonset-multi {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.oj-buttonset-width-equal .oj-buttonset-multi .oj-button,
.oj-buttonset-width-equal.oj-buttonset-multi .oj-button {
  flex: 1;
  overflow: hidden;
}

.oj-buttonset-width-equal .oj-buttonset-multi,
.oj-buttonset-width-equal.oj-buttonset-multi {
  width: 100%;
}

.oj-buttonset-width-auto .oj-buttonset-multi .oj-button,
.oj-buttonset-width-auto.oj-buttonset-multi .oj-button {
  flex: auto;
}

.oj-buttonset-multi .oj-button {
  justify-content: center;
  overflow: hidden;
  flex: auto;
}

.oj-buttonset-multi.oj-button-full-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal) {
  width: initial;
}

.oj-buttonset-multi.oj-button-full-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal) .oj-button {
  flex: auto;
}

.oj-buttonset-multi.oj-button-half-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal) {
  width: initial;
}

.oj-buttonset-multi.oj-button-half-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal) .oj-button {
  flex: auto;
}

.oj-buttonset-multi.oj-button-outlined-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal) {
  width: initial;
}

.oj-buttonset-multi.oj-button-outlined-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal) .oj-button {
  flex: auto;
}

/* Due to limitations in CSS syntax, the buttonset rules that depend on the chroming level check whether 
       the buttonset itself has .oj-button-XXX-chrome.  This is why we put those classes on the buttonset itself.*/
.oj-buttonset-multi.oj-button-full-chrome .oj-button,
.oj-buttonset-multi.oj-button-outlined-chrome .oj-button {
  border-radius: 0;
  border-right-width: 0;
  margin-left: 0;
  margin-right: 0;
}

.oj-buttonset-multi.oj-button-half-chrome .oj-button {
  margin-left: 0;
  margin-right: 0.25em;
}

.oj-buttonset-multi.oj-button-half-chrome .oj-buttonset-last {
  margin-right: 0;
}

/* .oj-buttonset-first is applied to the first button of the buttonset. */
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-first,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-first {
  border-top-left-radius: var(--oj-button-border-radius);
  border-bottom-left-radius: var(--oj-button-border-radius);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-first,
html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-first {
  border-right-width: 1px;
  border-top-right-radius: var(--oj-button-border-radius);
  border-bottom-right-radius: var(--oj-button-border-radius);
}

/* .oj-buttonset-last is applied to the last button of the buttonset. */
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-last,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-last {
  border-right-width: 1px;
  border-top-right-radius: var(--oj-button-border-radius);
  border-bottom-right-radius: var(--oj-button-border-radius);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-last,
html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-last {
  border-top-left-radius: var(--oj-button-border-radius);
  border-bottom-left-radius: var(--oj-button-border-radius);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-default,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-focus-only,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-hover,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-disabled {
  border-left-color: var(--oj-private-buttonset-solid-chrome-internal-border-color);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-default,
html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-focus-only,
html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-hover,
html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-disabled {
  border-left-color: var(--oj-private-buttonset-solid-chrome-internal-border-color);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-active {
  border-left-color: var(--oj-private-buttonset-solid-chrome-internal-border-color-active);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-active {
  border-left-color: var(--oj-private-buttonset-solid-chrome-internal-border-color-active);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-selected {
  border-left-color: var(--oj-private-buttonset-solid-chrome-internal-border-color-selected);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-selected {
  border-left-color: var(--oj-private-buttonset-solid-chrome-internal-border-color-selected);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-selected.oj-disabled {
  border-left-color: var(--oj-private-buttonset-solid-chrome-internal-border-color-selected-disabled);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-selected.oj-disabled {
  border-left-color: var(--oj-private-buttonset-solid-chrome-internal-border-color-selected-disabled);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-default,
html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-focus-only {
  border-left-color: var(--oj-buttonset-outlined-chrome-internal-border-color);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-default,
html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-focus-only {
  border-left-color: var(--oj-buttonset-outlined-chrome-internal-border-color);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-hover {
  border-left-color: var(--oj-buttonset-outlined-chrome-internal-border-color);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-hover {
  border-left-color: var(--oj-buttonset-outlined-chrome-internal-border-color);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-disabled {
  border-left-color: var(--oj-button-solid-chrome-border-color-disabled);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-disabled {
  border-left-color: var(--oj-button-solid-chrome-border-color-disabled);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-active {
  border-left-color: var(--oj-buttonset-outlined-chrome-internal-border-color-active);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-active {
  border-left-color: var(--oj-buttonset-outlined-chrome-internal-border-color-active);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-selected {
  border-left-color: var(--oj-buttonset-outlined-chrome-internal-border-color-selected);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-selected {
  border-left-color: var(--oj-buttonset-outlined-chrome-internal-border-color-selected);
}

html:not([dir=rtl]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-selected.oj-disabled {
  border-left-color: var(--oj-buttonset-outlined-chrome-internal-border-color-selected-disabled);
}

html[dir=rtl] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-selected.oj-disabled {
  border-left-color: var(--oj-buttonset-outlined-chrome-internal-border-color-selected-disabled);
}

.oj-buttonset .oj-button-toggle.oj-disabled.oj-button-outlined-chrome:not(.oj-selected),
.oj-buttonset .oj-button.oj-disabled.oj-button-outlined-chrome:not(.oj-selected) .oj-button-button {
  border-color: var(--oj-button-outlined-chrome-border-color-disabled);
}

.oj-buttonset .oj-button-toggle.oj-active.oj-button-outlined-chrome {
  background-color: var(--oj-button-outlined-chrome-bg-color-active);
}

/* buttonset                  */
/* -------------------------- */
oj-buttonset-one.oj-color-invert,
oj-buttonset-many.oj-color-invert,
.oj-color-invert oj-buttonset-one,
.oj-color-invert oj-buttonset-many {
  --oj-button-outlined-chrome-bg-color: var(--oj-core-bg-color-active);
  --oj-button-outlined-chrome-text-color: var(--oj-core-text-color-secondary);
  --oj-button-outlined-chrome-bg-color-disabled: var(--oj-button-solid-chrome-bg-color-disabled);
  --oj-buttonset-outlined-chrome-internal-border-color: var(--oj-button-outlined-chrome-border-color);
  --oj-buttonset-outlined-chrome-internal-border-color-selected: var(--oj-button-outlined-chrome-border-color);
}

oj-buttonset-one,
oj-buttonset-many {
  --oj-button-outlined-chrome-bg-color: var(--oj-core-bg-color-active);
  --oj-button-outlined-chrome-text-color: var(--oj-core-text-color-secondary);
  --oj-button-outlined-chrome-bg-color-disabled: var(--oj-button-solid-chrome-bg-color-disabled);
  --oj-button-outlined-chrome-bg-color-active: rgba(var(--oj-palette-neutral-rgb-190), 0.16);
}

:root {
  --oj-popup-border-color: var(--oj-core-divider-color);
  --oj-popup-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-popup-border-radius: var(--oj-core-border-radius-sm);
  --oj-popup-box-shadow: var(--oj-core-box-shadow-xs);
  --oj-popup-padding: 0.5rem;
  --oj-popup-tail-height: 5px;
  --oj-popup-tail-width: 10px;
  --oj-private-popup-global-modality-default: "modeless";
  --oj-private-popup-global-open-animation-default: '[{"effect":"zoomIn","transformOrigin":"#myPosition"},"fadeIn"]';
  --oj-private-popup-global-close-animation-default: '[{"effect":"zoomOut","transformOrigin":"#myPosition"},"fadeOut"]';
}

:root {
  --oj-tooltip-text-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-tooltip-bg-color: rgb(var(--oj-palette-neutral-rgb-170));
  --oj-tooltip-font-size: var(--oj-typography-body-xs-font-size);
  --oj-tooltip-line-height: var(--oj-typography-body-xs-line-height);
  --oj-tooltip-padding: var(--oj-core-spacing-2x);
  --oj-tooltip-border-radius: var(--oj-core-border-radius-md);
  --oj-tooltip-border-color: rgb(var(--oj-palette-neutral-rgb-170));
}

:root {
  --oj-dvt-danger-color: rgb(214, 59, 37);
  --oj-dvt-warning-color: rgb(207, 124, 0);
  --oj-dvt-success-color: rgb(80, 130, 35);
  --oj-dvt-item-border-color-selected: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-dvt-item-contrast-color: rgb(var(--oj-palette-neutral-rgb-20));
  --oj-dvt-marquee-color: rgba(var(--oj-palette-neutral-rgb-20), 0.1);
  --oj-dvt-marquee-border-color: rgba(var(--oj-palette-neutral-rgb-190), 0.8);
  --oj-dvt-contrast-line-color: rgba(var(--oj-palette-neutral-rgb-20), 0.7);
  --oj-dvt-reference-object-area-color: rgba(var(--oj-palette-neutral-rgb-170), 0.08);
  --oj-dvt-reference-object-line-color: rgba(var(--oj-palette-neutral-rgb-190), 0.8);
  --oj-dvt-overview-bg-color: rgb(var(--oj-palette-neutral-rgb-50));
  --oj-dvt-overview-window-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-dvt-overview-window-border-color: rgb(var(--oj-palette-neutral-rgb-170));
  --oj-dvt-label-font-size-sm: var(--oj-typography-body-xs-font-size);
  --oj-dvt-label-font-size-md: var(--oj-typography-body-sm-font-size);
  --oj-dvt-label-font-size-lg: var(--oj-typography-body-md-font-size);
  --oj-dvt-node-border-color-hover: rgb(var(--oj-palette-neutral-rgb-20));
  --oj-private-dvt-gridline-color: rgba(var(--oj-palette-neutral-rgb-190), 0.3);
}

.oj-dvtbase {
  display: block;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  animation-duration: var(--oj-animation-duration-xlong);
}

.oj-dvtbase svg {
  overflow: hidden;
}

.oj-dvtbase:focus {
  outline: none;
}

.oj-dvt-default-border-width {
  stroke-width: 1px;
}

.oj-dvt-default-border-color:not(.oj-hover) {
  stroke: var(--oj-dvt-item-contrast-color);
}

.oj-dvt-bubble-marker {
  fill-opacity: 0.6;
}

.oj-dvt-selectable.oj-hover {
  stroke-width: 3px;
}

.oj-dvt-selectable.oj-selected {
  stroke-width: 3px;
  stroke: var(--oj-dvt-item-border-color-selected);
}

.oj-dvt-selectable-marker.oj-hover {
  stroke-width: 3px;
  stroke: var(--oj-dvt-item-contrast-color);
}

.oj-dvt-selectable-marker.oj-selected {
  stroke-width: 3px;
  stroke: var(--oj-dvt-item-border-color-selected);
}

.oj-dvt-selectable-inner-shape,
.oj-dvt-selectable-marker-inner-shape {
  stroke-width: 1px;
  fill-opacity: 1;
}

.oj-dvt-selectable-inner-shape {
  stroke: var(--oj-dvt-item-contrast-color);
}

.oj-dvt-selectable-marker-inner-shape.oj-hover:not(.oj-selected) {
  fill: var(--oj-dvt-item-contrast-color);
}

.oj-dvt-selectable-marker-inner-shape.oj-selected {
  stroke: var(--oj-dvt-item-contrast-color);
}

.oj-dvt-category1 {
  color: RGB(var(--oj-palette-dvt-rgb-1));
}

.oj-dvt-category2 {
  color: RGB(var(--oj-palette-dvt-rgb-2));
}

.oj-dvt-category3 {
  color: RGB(var(--oj-palette-dvt-rgb-3));
}

.oj-dvt-category4 {
  color: RGB(var(--oj-palette-dvt-rgb-4));
}

.oj-dvt-category5 {
  color: RGB(var(--oj-palette-dvt-rgb-5));
}

.oj-dvt-category6 {
  color: RGB(var(--oj-palette-dvt-rgb-6));
}

.oj-dvt-category7 {
  color: RGB(var(--oj-palette-dvt-rgb-7));
}

.oj-dvt-category8 {
  color: RGB(var(--oj-palette-dvt-rgb-8));
}

.oj-dvt-category9 {
  color: RGB(var(--oj-palette-dvt-rgb-9));
}

.oj-dvt-category10 {
  color: RGB(var(--oj-palette-dvt-rgb-10));
}

.oj-dvt-category11 {
  color: RGB(var(--oj-palette-dvt-rgb-11));
}

.oj-dvt-category12 {
  color: RGB(var(--oj-palette-dvt-rgb-12));
}

.oj-dvt-tooltip {
  border-style: solid;
  border-width: 1px;
  padding: var(--oj-tooltip-padding);
  background-color: var(--oj-tooltip-bg-color);
  color: var(--oj-tooltip-text-color);
  border-color: var(--oj-tooltip-border-color);
  font-size: var(--oj-tooltip-font-size);
  line-height: var(--oj-tooltip-line-height);
  border-radius: var(--oj-tooltip-border-radius);
}

.oj-dvt-datatip {
  color: var(--oj-core-text-color-primary);
  border-style: solid;
  border-width: 1px;
  padding: 0.5rem;
  border-radius: var(--oj-core-border-radius-sm);
  background-color: var(--oj-popup-bg-color);
  border-color: var(--oj-popup-border-color);
  font-size: var(--oj-tooltip-font-size);
  line-height: var(--oj-tooltip-line-height);
}

.oj-dvt-datatip-table {
  border-collapse: separate;
  border-spacing: 0px;
  overflow: hidden;
  display: block;
}

.oj-dvt-datatip-label {
  color: var(--oj-core-text-color-secondary);
  padding: 0px 2px;
  white-space: nowrap;
}

html:not([dir=rtl]) .oj-dvt-datatip-label {
  text-align: right;
}

html[dir=rtl] .oj-dvt-datatip-label {
  text-align: left;
}

.oj-dvt-datatip-value {
  color: var(--oj-core-text-color-primary);
  padding: 0px 2px;
}

html:not([dir=rtl]) .oj-dvt-datatip-value {
  text-align: left;
}

html[dir=rtl] .oj-dvt-datatip-value {
  text-align: right;
}

.oj-dvt-no-data-message {
  color: var(--oj-core-text-color-secondary);
  font-size: var(--oj-dvt-label-font-size-md);
}

.oj-dvt-marquee {
  fill: var(--oj-dvt-marquee-color);
  stroke: var(--oj-dvt-marquee-border-color);
}

.oj-dvt-marquee-inner-area {
  fill: var(--oj-dvt-marquee-color);
  stroke: var(--oj-dvt-contrast-line-color);
}

.oj-dvt-icon {
  stroke: none;
}

.oj-dvt-button-borderless .oj-dvt-button-background {
  stroke: none;
  fill: transparent;
}

.oj-dvt-button-borderless {
  stroke: none;
  fill: none;
}

.oj-dvt-button-borderless.oj-hover {
  stroke: var(--oj-button-borderless-chrome-border-color-hover);
  fill: var(--oj-button-borderless-chrome-bg-color-hover);
}

.oj-dvt-button-borderless.oj-active {
  stroke: var(--oj-button-borderless-chrome-border-color-active);
  fill: var(--oj-button-borderless-chrome-bg-color-active);
}

.oj-dvt-button-borderless .oj-dvt-icon {
  fill: var(--oj-button-borderless-chrome-text-color);
}

.oj-dvt-button-borderless.oj-hover .oj-dvt-icon {
  fill: var(--oj-button-borderless-chrome-text-color-hover);
}

.oj-dvt-button-borderless.oj-active .oj-dvt-icon {
  fill: var(--oj-button-borderless-chrome-text-color-active);
}

.oj-dvt-button-borderless.oj-disabled .oj-dvt-icon {
  fill: var(--oj-button-borderless-chrome-text-color-disabled);
}

.oj-dvt-button-outlined .oj-dvt-button-background {
  stroke: none;
  fill: var(--oj-core-bg-color-content);
}

.oj-dvt-button-outlined {
  stroke: var(--oj-button-outlined-chrome-border-color);
  fill: none;
}

.oj-dvt-button-outlined.oj-hover {
  stroke: var(--oj-button-outlined-chrome-border-color-hover);
  fill: var(--oj-button-outlined-chrome-bg-color-hover);
}

.oj-dvt-button-outlined.oj-active {
  stroke: var(--oj-button-outlined-chrome-border-color-active);
  fill: var(--oj-button-outlined-chrome-bg-color-active);
}

.oj-dvt-button-outlined.oj-disabled {
  stroke: var(--oj-button-outlined-chrome-border-color-disabled);
}

.oj-dvt-button-outlined.oj-unselected {
  stroke: var(--oj-button-outlined-chrome-border-color-selected);
  fill: var(--oj-button-outlined-chrome-bg-color-hover);
}

.oj-dvt-button-outlined.oj-unselected.oj-hover {
  stroke: var(--oj-button-outlined-chrome-border-color-hover);
  fill: var(--oj-button-outlined-chrome-bg-color-hover);
}

.oj-dvt-button-outlined.oj-selected {
  stroke: var(--oj-button-outlined-chrome-border-color-selected);
  fill: var(--oj-button-outlined-chrome-bg-color-selected);
}

.oj-dvt-button-outlined.oj-selected.oj-hover {
  stroke: var(--oj-button-outlined-chrome-border-color-selected-hover);
  fill: var(--oj-button-outlined-chrome-bg-color-selected-hover);
}

.oj-dvt-button-outlined .oj-dvt-icon {
  fill: var(--oj-button-outlined-chrome-text-color);
}

.oj-dvt-button-outlined.oj-hover .oj-dvt-icon {
  fill: var(--oj-button-outlined-chrome-text-color-hover);
}

.oj-dvt-button-outlined.oj-active .oj-dvt-icon {
  fill: var(--oj-button-outlined-chrome-text-color-active);
}

.oj-dvt-button-outlined.oj-disabled .oj-dvt-icon {
  fill: var(--oj-button-outlined-chrome-text-color-disabled);
}

.oj-dvt-button-outlined.oj-unselected .oj-dvt-icon {
  fill: var(--oj-button-outlined-chrome-text-color);
}

.oj-dvt-button-outlined.oj-unselected.oj-hover .oj-dvt-icon {
  fill: var(--oj-button-outlined-chrome-text-color-hover);
}

.oj-dvt-button-outlined.oj-selected .oj-dvt-icon {
  fill: var(--oj-button-outlined-chrome-text-color-selected);
}

.oj-dvt-button-outlined.oj-selected.oj-hover .oj-dvt-icon {
  fill: var(--oj-button-outlined-chrome-text-color-selected-hover);
}

oj-legend:not(.oj-complete) {
  visibility: hidden;
}

oj-legend {
  display: block;
}

.oj-legend {
  font-size: var(--oj-dvt-label-font-size-sm);
  color: var(--oj-core-text-color-primary);
  -webkit-user-select: none;
  user-select: none;
}

.oj-legend-section-title {
  font-size: var(--oj-dvt-label-font-size-sm);
  font-weight: 600;
  color: var(--oj-core-text-color-primary);
}

.oj-legend-hover {
  fill: var(--oj-button-borderless-chrome-bg-color-hover);
  border-radius: 4px;
}

:root {
  --oj-chart-axis-title-text-color: var(--oj-core-text-color-secondary);
  --oj-chart-axis-tick-label-text-color: var(--oj-core-text-color-secondary);
  --oj-chart-stock-falling-bg-color: var(--oj-dvt-danger-color);
  --oj-chart-stock-range-bg-color: rgb(var(--oj-palette-neutral-rgb-100));
  --oj-chart-stock-rising-bg-color: var(--oj-dvt-success-color);
  --oj-chart-animation-rising-icon-color: rgb(var(--oj-palette-info-rgb-90));
  --oj-chart-animation-falling-icon-color: rgb(var(--oj-palette-danger-rgb-90));
  --oj-chart-animation-marker-color: rgb(var(--oj-palette-neutral-rgb-20));
  --oj-chart-polar-axis-tick-label-outside-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-chart-polar-axis-tick-label-inside-bg-color: rgba(var(--oj-palette-neutral-rgb-0), 0.6);
  --oj-chart-data-cursor-line-color: rgba(var(--oj-palette-neutral-rgb-190), 0.8);
}

oj-chart:not(.oj-complete) {
  visibility: hidden;
}

oj-chart {
  display: block;
}

.oj-chart {
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 448px;
}

.oj-chart-data-label {
  font-size: var(--oj-dvt-label-font-size-sm);
  color: var(--oj-core-text-color-primary);
}

.oj-chart-data-cursor-line {
  color: var(--oj-chart-data-cursor-line-color);
  width: 1px;
}

.oj-chart-data-cursor-outer-line {
  stroke: var(--oj-dvt-contrast-line-color);
  stroke-width: 1px;
}

.oj-chart-polar-axis-tick-label-outside {
  fill: var(--oj-chart-polar-axis-tick-label-outside-bg-color);
}

.oj-chart-polar-axis-tick-label-inside {
  fill: var(--oj-chart-polar-axis-tick-label-inside-bg-color);
}

.oj-chart-stock-falling {
  background-color: var(--oj-chart-stock-falling-bg-color);
}

.oj-chart-stock-range {
  background-color: var(--oj-chart-stock-range-bg-color);
}

.oj-chart-stock-rising {
  background-color: var(--oj-chart-stock-rising-bg-color);
}

.oj-chart-stack-label {
  font-size: var(--oj-dvt-label-font-size-sm);
  font-weight: bold;
}

.oj-chart-pie-center-label,
.oj-chart-xaxis-title,
.oj-chart-yaxis-title,
.oj-chart-y2axis-title {
  font-size: var(--oj-dvt-label-font-size-sm);
  color: var(--oj-chart-axis-title-text-color);
}

.oj-chart-xaxis-tick-label,
.oj-chart-yaxis-tick-label,
.oj-chart-y2axis-tick-label {
  font-size: var(--oj-dvt-label-font-size-sm);
  color: var(--oj-chart-axis-tick-label-text-color);
}

.oj-chart-animation-down {
  fill: var(--oj-chart-animation-falling-icon-color);
}

.oj-chart-animation-up {
  fill: var(--oj-chart-animation-rising-icon-color);
}

.oj-chart-animation-marker {
  fill: var(--oj-chart-animation-marker-color);
}

.oj-chart .oj-active-drop {
  fill: var(--oj-core-drag-drop-color-1);
}

.oj-chart-reference-object-area {
  color: var(--oj-dvt-reference-object-area-color);
}

.oj-chart-reference-object-line {
  width: 1px;
  color: var(--oj-dvt-reference-object-line-color);
}

.oj-chart-reference-object-inner-line {
  stroke: var(--oj-dvt-contrast-line-color);
  stroke-width: 1px;
}

:root {
  --oj-label-font-size: var(--oj-typography-body-sm-font-size);
  --oj-label-font-weight: 600;
  --oj-label-line-height: var(--oj-typography-body-sm-line-height);
  --oj-label-color: var(--oj-core-text-color-primary);
  --oj-label-color-disabled: var(--oj-core-text-color-disabled);
  --oj-label-inside-edge-font-size: var(--oj-typography-body-xs-font-size);
  --oj-label-inside-edge-font-weight: 600;
  --oj-label-inside-edge-line-height: var(--oj-typography-body-xs-line-height);
  --oj-label-inside-edge-position-top: 0.5rem;
  --oj-label-inside-edge-color: var(--oj-core-text-color-secondary);
  --oj-label-required-icon-color: rgb(var(--oj-palette-brand-rgb-110));
  --oj-label-required-char-font-size: 0.9rem;
}

:root {
  --oj-form-layout-divider-width: 0;
  --oj-form-layout-divider-margin: 0;
  --oj-form-layout-start-edge-column-min-width: 22rem;
  --oj-form-layout-start-edge-column-max-width: 37.5rem;
  --oj-form-layout-column-min-width: 18rem;
  --oj-form-layout-column-max-width: 28rem;
  --oj-form-layout-horizontal-margin: 0px;
  --oj-form-layout-column-gutter: 1.5rem;
  --oj-form-layout-margin-bottom: 0.875rem;
  --oj-form-layout-start-edge-label-text-align: end;
  --oj-form-layout-start-edge-value-text-align: start;
  --oj-form-layout-start-edge-label-to-value-padding: 1.5rem;
  --oj-form-layout-top-edge-label-to-value-padding: 0.5rem;
}

:root {
  --oj-form-control-font-weight-read-only: normal;
}

.oj-private-scale-lg {
  --oj-core-icon-size-lg: 24px;
  --oj-core-icon-size-sm: 16px;
  --oj-core-spacing-1x: 4px;
  --oj-core-spacing-2x: 8px;
  --oj-core-spacing-3x: 12px;
  --oj-core-spacing-4x: 16px;
  --oj-core-spacing-5x: 20px;
  --oj-core-spacing-6x: 24px;
  --oj-core-spacing-7x: 28px;
  --oj-core-spacing-8x: 32px;
  --oj-core-spacing-9x: 36px;
  --oj-core-spacing-10x: 40px;
  --oj-core-spacing-11x: 44px;
  --oj-core-spacing-12x: 48px;
  --oj-private-core-wrappable-margin-bottom: 0px;
  font-size: var(--oj-typography-body-md-font-size);
  line-height: var(--oj-typography-body-md-line-height);
}

.oj-color-invert {
  color: var(--oj-core-text-color-primary);
}

.oj-contrast-marker .oj-contrast-background,
.oj-contrast-marker.oj-contrast-background {
  background-color: RGB(var(--oj-palette-neutral-rgb-160));
  color: var(--oj-core-text-color-primary);
}

.oj-private-scale-lg {
  --oj-text-field-font-size: var(--oj-typography-body-md-font-size);
  --oj-text-field-text-to-edge-padding: 12px;
  --oj-text-field-height: 44px;
}

:root {
  --oj-text-field-sm-width: calc(var(--oj-form-layout-column-max-width) / 2);
  --oj-text-field-md-width: var(--oj-form-layout-column-max-width);
  --oj-text-field-border-radius: var(--oj-core-border-radius-md);
  --oj-text-field-border-width: 1px;
  --oj-text-field-icon-to-text-padding: var(--oj-core-spacing-3x);
  --oj-text-field-icon-to-edge-padding: var(--oj-core-spacing-3x);
  --oj-text-field-text-to-edge-padding: var(--oj-core-spacing-3x);
  --oj-text-field-text-align: start;
  --oj-text-field-height: 3.2rem;
  --oj-text-field-font-size: var(--oj-typography-body-md-font-size);
  --oj-private-text-field-font-size-adjust: 100%;
  --oj-text-field-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-text-field-border-color: rgba(var(--oj-palette-neutral-rgb-190), 0.5);
  --oj-text-field-placeholder-color: var(--oj-core-text-color-secondary);
  --oj-text-field-placeholder-font-style: normal;
  --oj-text-field-text-color: var(--oj-core-text-color-primary);
  --oj-text-field-bg-color-disabled: rgba(var(--oj-palette-neutral-rgb-0), 0.3);
  --oj-text-field-border-color-disabled: var(--oj-core-color-disabled-2);
  --oj-text-field-text-color-disabled: var(--oj-core-text-color-disabled);
  --oj-text-field-border-color-focus: rgb(var(--oj-palette-brand-rgb-110));
  --oj-text-field-inside-edge-height: 3.25rem;
  --oj-text-field-inside-edge-padding-top: 0.8125rem;
  --oj-text-field-inside-edge-label-color-error: rgb(var(--oj-palette-danger-rgb-100));
  --oj-text-field-inside-edge-label-color-focus: rgb(var(--oj-palette-brand-rgb-110));
  --oj-text-field-inside-edge-label-color-warning: rgb(var(--oj-palette-warning-rgb-100));
  --oj-user-assistance-inline-text-color: var(--oj-core-text-color-secondary);
  --oj-user-assistance-inline-font-size: var(--oj-typography-body-xs-font-size);
}

:root {
  --oj-private-message-header-height: 1.5rem;
  --oj-private-message-header-margin-end: 1rem;
  --oj-private-message-category-text-color: var(--oj-core-text-color-primary);
  --oj-private-message-summary-font-weight: var(--oj-typography-subheading-xl-font-weight);
  --oj-private-message-summary-text-color: var(--oj-core-text-color-primary);
  --oj-private-message-summary-font-size: var(--oj-typography-body-lg-font-size);
  --oj-private-message-summary-line-height: var(--oj-typography-body-lg-line-height);
  --oj-private-message-detail-text-color: var(--oj-core-text-color-primary);
  --oj-private-message-detail-font-size: var(--oj-typography-body-sm-font-size);
  --oj-private-message-detail-line-height: var(--oj-typography-body-sm-line-height);
  --oj-private-message-time-text-color: var(--oj-core-text-color-secondary);
  --oj-private-message-time-font-size: var(--oj-typography-body-xs-font-size);
  --oj-private-message-time-margin-end: 0.25rem;
  --oj-private-message-close-icon-display: block;
  --oj-private-message-auto-timeout-close-icon-display: block;
  --oj-private-message-general-inline-border-width: 0 0 1px 0;
  --oj-private-message-general-inline-border-color: var(--oj-core-divider-color);
  --oj-private-message-component-inline-font-size: var(--oj-typography-subheading-xs-font-size);
  --oj-private-message-component-inline-font-weight: 600;
  --oj-private-message-component-inline-bg-color-error: transparent;
  --oj-private-message-component-inline-border-color-error: transparent;
  --oj-private-message-component-inline-bg-color-warning: transparent;
  --oj-private-message-component-inline-border-color-warning: transparent;
  --oj-private-message-component-inline-bg-color-info: transparent;
  --oj-private-message-component-inline-border-color-info: transparent;
  --oj-private-message-component-inline-bg-color-confirmation: transparent;
  --oj-private-message-component-inline-border-color-confirmation: transparent;
  --oj-private-message-component-inline-margin-top: 0;
  --oj-private-message-component-inline-border-width: 0;
  --oj-private-message-component-inline-border-radius: 0;
  --oj-private-message-component-inline-padding: 0;
  --oj-private-message-radiocheckbox-inline-margin-top: 0;
  --oj-private-message-radiocheckbox-inline-border-top-width: 0;
  --oj-private-message-general-overlay-border-width: 1px;
  --oj-private-message-general-overlay-border-color: var(--oj-core-divider-color);
  --oj-private-message-general-overlay-border-radius: var(--oj-core-border-radius-lg);
  --oj-private-message-general-overlay-box-shadow: var(--oj-core-box-shadow-md);
  --oj-private-message-general-overlay-separator-margin: 0.5rem;
  --oj-private-message-notification-overlay-font-size: var(--oj-typography-body-md-font-size);
  --oj-private-message-notification-overlay-font-weight: 400;
  --oj-private-message-notification-overlay-header-bg-color: var(--oj-core-info-secondary-3);
  --oj-private-message-notification-overlay-body-bg-color: var(--oj-core-info-secondary-3);
  --oj-private-message-notification-overlay-border-width: 0;
  --oj-private-message-notification-overlay-border-color: initial;
  --oj-private-message-notification-overlay-border-radius: var(--oj-core-border-radius-lg);
  --oj-private-message-notification-overlay-box-shadow: var(--oj-core-box-shadow-md);
  --oj-private-message-notification-overlay-separator-margin: 0.25rem;
  --oj-private-message-notification-detail-text-color: var(--oj-core-text-color-primary);
  --oj-private-message-component-icon-to-text-padding: 0.25rem;
}

:root {
  --oj-private-messages-general-overlay-width: 60vw;
  --oj-private-messages-general-overlay-max-width: 1536px;
  --oj-private-messages-general-overlay-min-width: 614px;
  --oj-private-messages-general-overlay-border-width: 0;
  --oj-private-messages-general-overlay-border-color: initial;
  --oj-private-messages-general-overlay-border-radius: var(--oj-core-border-radius-sm);
  --oj-private-messages-general-overlay-box-shadow: none;
  --oj-private-messages-notification-overlay-width: auto;
  --oj-private-messages-notification-overlay-min-width: 307px;
  --oj-private-messages-notification-overlay-max-width: 600px;
  --oj-private-messages-notification-overlay-border-width: 0;
  --oj-private-messages-notification-overlay-border-color: initial;
  --oj-private-messages-notification-overlay-border-radius: initial;
  --oj-private-messages-notification-overlay-box-shadow: initial;
}

:root {
  --oj-radio-checkbox-width: auto;
  --oj-radio-checkbox-row-height: 2.25rem;
  --oj-radio-checkbox-input-size: 1rem;
  --oj-radio-checkbox-input-color-unselected: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-radio-checkbox-input-color-selected: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-radio-checkbox-input-transform-active: scale(0.75);
  --oj-radio-checkbox-label-to-edge-padding: 0;
  --oj-radio-checkbox-input-to-label-padding: 0.5rem;
  --oj-radio-checkbox-input-to-edge-padding: 0;
  --oj-radio-checkbox-item-divider-color: transparent;
  --oj-radio-checkbox-item-bg-color-active: transparent;
}

/* text field                 */
/* -------------------------- */
.oj-color-invert {
  --oj-text-field-text-highlight-color: rgb(var(--oj-palette-brand-rgb-50));
  --oj-text-field-bg-color: rgb(var(--oj-palette-neutral-rgb-180));
  --oj-text-field-border-color: rgba(var(--oj-palette-neutral-rgb-0), 0.3);
  --oj-text-field-placeholder-color: var(--oj-core-text-color-secondary);
  --oj-text-field-text-color: var(--oj-core-text-color-primary);
  --oj-text-field-bg-color-disabled: rgba(var(--oj-palette-neutral-rgb-0), 0.16);
  --oj-text-field-border-color-disabled: rgba(var(--oj-palette-neutral-rgb-0), 0.1);
  --oj-text-field-text-color-disabled: var(--oj-core-text-color-disabled);
  --oj-text-field-border-color-focus: rgb(var(--oj-palette-brand-rgb-50));
  --oj-text-field-inside-edge-label-color-error: var(--oj-core-danger-3);
  --oj-text-field-inside-edge-label-color-focus: var(--oj-core-brand-1);
  --oj-text-field-inside-edge-label-color-warning: var(--oj-core-warning-3);
  --oj-user-assistance-inline-text-color: var(--oj-core-text-color-secondary);
}

:root.oj-scale-sm {
  --oj-text-field-height: 2.3333rem;
  --oj-text-field-text-to-edge-padding: 0.6667rem;
  --oj-text-field-icon-to-text-padding: var(--oj-text-field-text-to-edge-padding);
  --oj-text-field-icon-to-edge-padding: var(--oj-text-field-text-to-edge-padding);
  --oj-user-assistance-inline-font-size: var(--oj-typography-body-sm-font-size);
}

/* radioset & checkoboxset    */
/* -------------------------- */
.oj-color-invert {
  --oj-radio-checkbox-input-color-unselected: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-radio-checkbox-input-color-selected: rgb(var(--oj-palette-neutral-rgb-0));
}

/* messaging */
/* --------------------------------------------------------------- */
/* styles the root of the popup component that wraps all messaging content */
/* wraps all messaging content that displays inside popup. */
.oj-messaging-popup-container {
  max-width: 320px;
}

/* separator inside popup container */
.oj-messaging-popup-container hr {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* prevent messaging content from overflowing the container */
.oj-messaging-inline-container {
  overflow: hidden;
}

/* wraps all messaging content that displays inline */
.oj-messaging-inline-container .oj-message {
  padding: var(--oj-private-message-component-inline-padding);
  border-style: solid;
  border-width: var(--oj-private-message-component-inline-border-width);
  margin-top: var(--oj-private-message-component-inline-margin-top);
  border-radius: var(--oj-private-message-component-inline-border-radius);
}

.oj-checkboxset .oj-messaging-inline-container .oj-message:first-child,
.oj-radioset .oj-messaging-inline-container .oj-message:first-child {
  margin-top: var(--oj-private-message-radiocheckbox-inline-margin-top);
  border-top-width: var(--oj-private-message-radiocheckbox-inline-border-top-width);
}

.oj-switch .oj-messaging-inline-container .oj-message:first-child,
.oj-slider .oj-messaging-inline-container .oj-message:first-child {
  border-top-width: 1px;
}

.oj-switch .oj-messaging-inline-container .oj-message:first-child,
.oj-slider .oj-messaging-inline-container .oj-message:first-child {
  margin-top: 5px;
}

.oj-slider-vertical .oj-messaging-inline-container .oj-message:first-child {
  margin-top: 18px;
}

.oj-messaging-inline-container .oj-message.oj-message-error {
  background-color: var(--oj-private-message-component-inline-bg-color-error);
  border-color: var(--oj-private-message-component-inline-border-color-error);
}

.oj-messaging-inline-container .oj-message.oj-message-warning {
  background-color: var(--oj-private-message-component-inline-bg-color-warning);
  border-color: var(--oj-private-message-component-inline-border-color-warning);
}

.oj-messaging-inline-container .oj-message.oj-message-info {
  background-color: var(--oj-private-message-component-inline-bg-color-info);
  border-color: var(--oj-private-message-component-inline-border-color-info);
}

.oj-messaging-inline-container .oj-message.oj-message-confirmation {
  background-color: var(--oj-private-message-component-inline-bg-color-confirmation);
  border-color: var(--oj-private-message-component-inline-border-color-confirmation);
}

/** 
     * wraps a message block that includes the icon and content inline-blocks
     * 1. prevent wrapping the content inline-block.  
     */
.oj-message {
  display: flex;
  text-align: left;
  white-space: nowrap;
  /* 1 */
}

html[dir=rtl] .oj-message {
  text-align: right;
}

/* from second to last message blocks inside popup container */
.oj-messaging-popup-container .oj-message:nth-of-type(n + 2) {
  padding-top: 20px;
}

/* 
     * wraps the message summary and detail parts 
     */
.oj-message-content {
  display: inline-block;
}

/**
     * message summary text 
     * 1. allow summary text to wrap normally.
     */
.oj-message-content .oj-message-summary {
  white-space: normal;
  vertical-align: top;
}

html:not([dir=rtl]) .oj-message-content .oj-message-summary {
  padding: 0 0 0 var(--oj-private-message-component-icon-to-text-padding);
}

html[dir=rtl] .oj-message-content .oj-message-summary {
  padding: 0 var(--oj-private-message-component-icon-to-text-padding) 0 0;
}

/** 
     * message detail text 
     * 1. allow detail text to wrap normally.
     */
/* If the detail is the first child it means there is no summary rendered
       so it won't need top padding */
.oj-message-content .oj-message-detail:first-child {
  white-space: normal;
}

html:not([dir=rtl]) .oj-message-content .oj-message-detail {
  padding: 0 0 0 var(--oj-private-message-component-icon-to-text-padding);
}

html[dir=rtl] .oj-message-content .oj-message-detail {
  padding: 0 var(--oj-private-message-component-icon-to-text-padding) 0 0;
}

/* if the summary is rendered, we need the top padding */
.oj-message-content .oj-message-detail:not(:first-child) {
  white-space: normal;
}

html:not([dir=rtl]) .oj-message-content .oj-message-detail:not(:first-child) {
  padding: 7px 0 0 var(--oj-private-message-component-icon-to-text-padding);
}

html[dir=rtl] .oj-message-content .oj-message-detail:not(:first-child) {
  padding: 7px var(--oj-private-message-component-icon-to-text-padding) 0 0;
}

/**
     * wraps all hints
     */
/**
     * for hint types - validator, converter
     */
/**
     * for hint title 
     * 1. if title isn't the first hint add padding to the top. 
     */
.oj-form-control-hint-title:not(:first-child) {
  padding-top: 20px;
  /* 1 */
}

.oj-message-status-icon {
  flex: 0 0 auto;
  position: relative;
  font-size: 1rem;
  line-height: calc(var(--oj-user-assistance-inline-font-size) * 1.333);
}

.oj-message-status-icon.oj-message-error-icon {
  color: var(--oj-core-danger-3);
}

.oj-message-status-icon.oj-message-warning-icon {
  color: var(--oj-core-warning-3);
}

.oj-message-status-icon.oj-message-info-icon {
  color: var(--oj-core-info-3);
}

.oj-message-status-icon.oj-message-confirmation-icon {
  color: var(--oj-core-success-3);
}

.oj-messaging-popup-option-defaults {
  font-family: '{"animation":{"open":{"effect":"zoomIn","transformOrigin":"#myPosition"},"close":{"effect":"none"}},"messageSummaryOptionDefault":"none"}' !important;
}

.oj-messaging-inline-option-defaults {
  font-family: '{"animation":{"open":{"effect":"fadeIn","duration":"100ms","timingFunction":"linear"},"close":{"effect":"fadeOut","duration":"100ms","timingFunction":"linear"}}}' !important;
}

.oj-text-field .oj-messaging-inline-container .oj-message-detail {
  font-size: var(--oj-user-assistance-inline-font-size);
}

/* component */
/* --------------------------------------------------------------- */
.oj-component-popup,
.oj-menu,
.oj-popup,
.oj-messages-layer oj-messages,
.oj-dialog,
.oj-listbox-drop {
  z-index: 1;
  position: absolute;
}

.oj-component-layer,
.oj-menu-layer,
.oj-popup-layer,
.oj-messages-layer,
.oj-dialog-layer,
.oj-listbox-drop-layer {
  position: relative;
}

/* overlay used to hide non-modal content */
.oj-component-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--oj-core-scrim-color);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* disable body scroll for modal popups */
.oj-component-modal-open {
  overflow: hidden !important;
}

.oj-private-scale-lg {
  --oj-popup-padding: 8px;
}

.oj-private-scale-lg .oj-popup-content {
  --oj-popup-padding: 8px;
}

.oj-popup {
  --oj-current-bg-color: var(--oj-popup-bg-color);
}

/* popup */
/* --------------------------------------------------------------- */
oj-popup {
  display: none;
}

/* defines the stacking context for the popup and its children */
.oj-popup-layer {
  z-index: var(--oj-core-z-index-popup);
}

.oj-popup-layer.oj-focus-within {
  z-index: calc(var(--oj-core-z-index-popup) + 1);
}

/* defines the z-index of the popup tail */
.oj-popup-layer.oj-popup-tail-simple {
  z-index: calc(var(--oj-core-z-index-popup) + 30);
}

.oj-popup-layer.oj-popup-tail-simple .oj-popup .oj-popup-tail-simple {
  z-index: calc(var(--oj-core-z-index-popup) + 31);
}

.oj-popup-layer.oj-popup-tail-simple.oj-focus-within {
  z-index: calc(var(--oj-core-z-index-popup) + 32);
}

.oj-popup-layer.oj-popup-tail-simple.oj-focus-within .oj-popup .oj-popup-tail-simple {
  z-index: calc(var(--oj-core-z-index-popup) + 33);
}

.oj-popup {
  max-width: calc(100vw - 3rem);
  max-height: calc(100vh - 3rem);
  border: 1px solid var(--oj-popup-border-color);
  border-radius: var(--oj-popup-border-radius);
  background-color: var(--oj-popup-bg-color);
  box-shadow: var(--oj-popup-box-shadow);
  will-change: top, left;
}

.oj-popup.oj-popup-tail-simple {
  border-width: 1px;
  border-color: var(--oj-popup-border-color);
  background-color: var(--oj-popup-bg-color);
  will-change: top, left, bottom, right;
}

.oj-popup.oj-popup-tail-simple.oj-right.oj-bottom {
  border-radius: var(--oj-popup-border-radius) var(--oj-popup-border-radius) 0;
}

.oj-popup.oj-popup-tail-simple.oj-left.oj-bottom {
  border-radius: var(--oj-popup-border-radius) var(--oj-popup-border-radius) var(--oj-popup-border-radius) 0;
}

.oj-popup.oj-popup-tail-simple.oj-right.oj-top {
  border-radius: var(--oj-popup-border-radius) 0 var(--oj-popup-border-radius) var(--oj-popup-border-radius);
}

.oj-popup.oj-popup-tail-simple.oj-left.oj-top {
  border-radius: 0 var(--oj-popup-border-radius) var(--oj-popup-border-radius) var(--oj-popup-border-radius);
}

.oj-popup.oj-popup-no-chrome {
  border-width: 0;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
}

.oj-popup-content {
  padding: var(--oj-popup-padding);
  position: relative;
}

.oj-popup-no-chrome > .oj-popup-content {
  padding: 0;
}

.oj-popup:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-popup.oj-focus-highlight {
  outline: dotted 1px var(--oj-core-focus-border-color);
}

.oj-popup-tail {
  position: absolute;
  pointer-events: none;
}

.oj-popup-tail.oj-popup-tail-simple {
  height: var(--oj-popup-tail-height);
  width: var(--oj-popup-tail-width);
  font-size: 0;
  box-sizing: border-box;
}

.oj-popup-tail.oj-popup-tail-simple:before,
.oj-popup-tail.oj-popup-tail-simple:after {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom {
  left: calc(var(--oj-popup-tail-width) / -2 - var(--oj-popup-tail-height) / 2 + 1px);
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle {
  height: var(--oj-popup-tail-width);
  width: var(--oj-popup-tail-height);
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle {
  left: calc(0px - var(--oj-popup-tail-height));
}

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle {
  right: calc(0px - var(--oj-popup-tail-height));
}

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top {
  right: calc(var(--oj-popup-tail-width) / -2 - var(--oj-popup-tail-height) / 2 + 1px);
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top {
  top: -1px;
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom {
  bottom: -1px;
}

.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top {
  top: calc(0px - var(--oj-popup-tail-height));
}

.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom {
  bottom: calc(0px - var(--oj-popup-tail-height));
}

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom:after,
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom:after {
  border-top: calc(var(--oj-popup-tail-height) - 1px) solid var(--oj-popup-bg-color);
  border-right: calc(var(--oj-popup-tail-height) - 1px) solid transparent;
  border-left: calc(var(--oj-popup-tail-height) - 1px) solid transparent;
  border-bottom-width: 0;
  left: 0;
  top: 0;
}

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom:before,
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom:before {
  border-top: var(--oj-popup-tail-height) solid var(--oj-popup-border-color);
  border-right: var(--oj-popup-tail-height) solid transparent;
  border-left: var(--oj-popup-tail-height) solid transparent;
  top: 0;
  left: 0;
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom:after {
  border-top: calc(var(--oj-popup-tail-height) - 1px) solid var(--oj-popup-bg-color);
  border-right: calc(var(--oj-popup-tail-height) - 1px) solid transparent;
  border-left: calc(var(--oj-popup-tail-height) - 1px) solid transparent;
  border-bottom-width: 0;
  right: 0;
  top: 0;
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom:before {
  border-top: var(--oj-popup-tail-height) solid var(--oj-popup-border-color);
  border-right: var(--oj-popup-tail-height) solid transparent;
  border-left: var(--oj-popup-tail-height) solid transparent;
  border-bottom-width: 0;
  right: 1px;
  top: 0;
}

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle:after {
  border-top: calc(var(--oj-popup-tail-height) - 1px) solid transparent;
  border-bottom: calc(var(--oj-popup-tail-height) - 1px) solid transparent;
  border-left: calc(var(--oj-popup-tail-height) - 1px) solid var(--oj-popup-bg-color);
  border-right-width: 0;
  left: -1px;
}

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle:before {
  border-top: var(--oj-popup-tail-height) solid transparent;
  border-bottom: var(--oj-popup-tail-height) solid transparent;
  border-left: var(--oj-popup-tail-height) solid var(--oj-popup-border-color);
  border-right-width: 0;
  top: -1px;
  left: 0;
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle:after {
  border-top: calc(var(--oj-popup-tail-height) - 1px) solid transparent;
  border-bottom: calc(var(--oj-popup-tail-height) - 1px) solid transparent;
  border-right: calc(var(--oj-popup-tail-height) - 1px) solid var(--oj-popup-bg-color);
  border-left-width: 0;
  right: -1px;
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle:before {
  border-top: var(--oj-popup-tail-height) solid transparent;
  border-bottom: var(--oj-popup-tail-height) solid transparent;
  border-right: var(--oj-popup-tail-height) solid var(--oj-popup-border-color);
  top: -1px;
  right: 0;
}

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top:after,
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top:after {
  border-bottom: calc(var(--oj-popup-tail-height) - 1px) solid var(--oj-popup-bg-color);
  border-right: calc(var(--oj-popup-tail-height) - 1px) solid transparent;
  border-left: calc(var(--oj-popup-tail-height) - 1px) solid transparent;
  border-top-width: 0;
  bottom: 0;
  left: 0;
}

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top:before,
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top:before {
  border-bottom: var(--oj-popup-tail-height) solid var(--oj-popup-border-color);
  border-right: var(--oj-popup-tail-height) solid transparent;
  border-left: var(--oj-popup-tail-height) solid transparent;
  border-top-width: 0;
  bottom: 0;
  left: 1px;
}

.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top:before,
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom:before {
  left: -1px;
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top:after {
  border-bottom: calc(var(--oj-popup-tail-height) - 1px) solid var(--oj-popup-bg-color);
  border-right: calc(var(--oj-popup-tail-height) - 1px) solid transparent;
  border-left: calc(var(--oj-popup-tail-height) - 1px) solid transparent;
  border-top-width: 0;
  bottom: 0;
  right: 0;
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top:before {
  border-bottom: var(--oj-popup-tail-height) solid var(--oj-popup-border-color);
  border-right: var(--oj-popup-tail-height) solid transparent;
  border-left: var(--oj-popup-tail-height) solid transparent;
  border-top-width: 0;
  bottom: 0;
  right: 1px;
}

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom:after,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom:before,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top:after,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top::before {
  transform: rotate(45deg);
}

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top:after,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top:before,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom:after,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom:before {
  transform: rotate(-45deg);
}

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top:before,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle:before,
.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom:before,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top:before,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle:before,
.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom:before,
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top:before,
.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom:before {
  display: block;
}

oj-label:not(.oj-complete) {
  visibility: hidden;
}

/* wraps help text that displays inside popup. */
.oj-label-help-popup-container {
  max-width: 320px;
}

.oj-label {
  display: block;
  color: var(--oj-label-color);
  font-size: var(--oj-label-font-size);
  font-weight: var(--oj-label-font-weight);
  line-height: var(--oj-label-line-height);
  word-break: break-word;
}

.oj-text-field-label-inside.oj-read-only .oj-label {
  white-space: normal;
}

.oj-text-field-label-inside:not(.oj-read-only) .oj-label,
.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside .oj-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* When label is block, this wrapper is needed in order 
       to float modifiers (required, help, changed) to the end of the label */
.oj-label-group {
  display: inline-block;
  vertical-align: bottom;
}

.oj-label-help-icon {
  vertical-align: middle;
}

.oj-label-required-icon,
.oj-label-help-icon {
  float: right;
  margin-top: calc((var(--oj-label-font-size) * var(--oj-label-line-height) - var(--oj-core-icon-size-sm)) / 2);
  margin-bottom: calc((var(--oj-label-font-size) * var(--oj-label-line-height) - var(--oj-core-icon-size-sm)) / -2);
}

html[dir=rtl] .oj-label-required-icon,
html[dir=rtl] .oj-label-help-icon {
  float: left;
}

html:not([dir=rtl]) .oj-label-required-icon,
html:not([dir=rtl]) .oj-label-help-icon {
  margin-left: 6px;
  margin-right: 0;
}

html[dir=rtl] .oj-label-required-icon,
html[dir=rtl] .oj-label-help-icon {
  margin-right: 6px;
  margin-left: 0;
}

.oj-label-help-icon-anchor {
  text-decoration: none;
  float: right;
}

html[dir=rtl] .oj-label-help-icon-anchor {
  float: left;
}

html:not([dir=rtl]) .oj-label-help-icon-anchor {
  padding-right: 2px;
}

html[dir=rtl] .oj-label-help-icon-anchor {
  padding-left: 2px;
}

.oj-label-help-icon-anchor:hover,
.oj-label-help-icon-anchor:focus {
  text-decoration: none;
}

.oj-label-help-icon-anchor:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: -1px;
}

.oj-label-help-icon-anchor:not(.oj-focus-highlight).oj-focus {
  outline: none;
}

.oj-label.oj-label-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oj-label.oj-label-nowrap .oj-label-group {
  overflow: inherit;
  text-overflow: inherit;
}

.oj-label-inline {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}

html:not([dir=rtl]) .oj-label-inline {
  padding-right: 1rem;
}

html[dir=rtl] .oj-label-inline {
  padding-left: 1rem;
}

.oj-form-non-control-inline {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}

.oj-label-inline .oj-label-required-icon,
.oj-label-inline .oj-label-help-icon {
  float: left;
}

html[dir=rtl] .oj-label-inline .oj-label-required-icon,
html[dir=rtl] .oj-label-inline .oj-label-help-icon {
  float: right;
}

html:not([dir=rtl]) .oj-label-inline .oj-label-required-icon,
html:not([dir=rtl]) .oj-label-inline .oj-label-help-icon {
  margin-right: 6px;
  margin-left: 0;
}

html[dir=rtl] .oj-label-inline .oj-label-required-icon,
html[dir=rtl] .oj-label-inline .oj-label-help-icon {
  margin-left: 6px;
  margin-right: 0;
}

.oj-label-inline .oj-label-help-icon-anchor {
  float: left;
}

html[dir=rtl] .oj-label-inline .oj-label-help-icon-anchor {
  float: right;
}

.oj-label-inline.oj-label-inline-top {
  margin-top: 0;
}

/* Deprecated since v8.0.0. JET's Accessibility team discourages access keys */
.oj-label-accesskey {
  text-decoration: underline;
}

.oj-label-help-icon {
  font-size: var(--oj-core-icon-size-sm);
}

.oj-label-required-icon:before {
  content: "*";
}

.oj-label-required-icon {
  color: var(--oj-label-required-icon-color);
  font-size: var(--oj-label-required-char-font-size);
  font-weight: normal;
  line-height: 0.5rem;
  font-family: inherit;
}

/* label                      */
/* -------------------------- */
.oj-color-invert {
  --oj-label-color: var(--oj-core-text-color-primary);
  --oj-label-color-disabled: var(--oj-core-text-color-disabled);
  --oj-label-inside-edge-color: var(--oj-core-text-color-secondary);
}

:root.oj-scale-sm {
  --oj-label-font-size: var(--oj-typography-body-md-font-size);
}

:root.oj-scale-md {
  --oj-label-font-size: var(--oj-typography-body-md-font-size);
}

/* form-control classes */
/* --------------------------------------------------------------- */
/* Component option defaults. */
.oj-form-control-option-defaults {
  font-family: '{"showIndicatorDelay":"50","labelEdge":"inside","readonlyElem":"div","useUserAssistanceOptionDefault":"use"}' !important;
}

html .oj-form-control {
  margin-bottom: var(--oj-private-core-wrappable-margin-bottom);
  vertical-align: top;
}

.oj-text-field.oj-read-only:not(.oj-textarea):not(.oj-inputpassword) .oj-text-field-input,
.oj-text-field.oj-combobox.oj-read-only .oj-combobox-input,
.oj-text-field.oj-textarea.oj-read-only.oj-maxrows-neg1 .oj-text-field-input,
.oj-text-field.oj-textarea.oj-read-only:not(.oj-maxrows-neg1) .oj-text-field-readonly-div,
.oj-text-field:not(.oj-read-only) .oj-text-field-readonly-div {
  display: none;
}

.oj-text-field-readonly-div {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  white-space: pre-wrap;
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  color: var(--oj-core-text-color-primary);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.oj-text-field-readonly-div::placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

.oj-text-field.oj-read-only {
  font-weight: var(--oj-form-control-font-weight-read-only);
  font-size: var(--oj-typography-body-md-font-size);
}

.oj-text-field-readonly {
  min-height: calc(var(--oj-typography-body-md-line-height) * var(--oj-typography-body-md-font-size));
  word-break: break-word;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside .oj-text-field-readonly-div {
  min-height: var(--oj-text-field-inside-edge-height);
  padding-top: var(--oj-text-field-inside-edge-padding-top);
}

.oj-form-layout .oj-form.oj-enabled .oj-textarea.oj-text-field-label-inside .oj-text-field-readonly-div {
  padding-top: 0;
  margin-top: calc(var(--oj-label-inside-edge-font-size) * var(--oj-label-inside-edge-line-height) + var(--oj-label-inside-edge-position-top));
  min-height: 0;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field:not(.oj-form-control-label-inside) .oj-text-field-readonly-div,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-form-control-label-inside) .oj-text-field-readonly-div {
  justify-content: center;
}

.oj-text-field-readonly:focus::after {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: -1px;
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.oj-text-field-readonly:focus {
  outline: none;
  position: relative;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-text-field-readonly-div {
  padding-left: var(--oj-text-field-text-to-edge-padding);
  padding-right: var(--oj-text-field-text-to-edge-padding);
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-container.oj-text-field-has-start-slot .oj-text-field-readonly-div {
  padding-left: var(--oj-text-field-icon-to-text-padding);
  padding-right: var(--oj-text-field-icon-to-text-padding);
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width */
.oj-form-layout .oj-form.oj-enabled .oj-text-field:not(.oj-textarea) .oj-text-field-readonly {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field:not(.oj-textarea) .oj-text-field-readonly::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.oj-text-field.oj-read-only .oj-text-field-container {
  border-width: 0;
  background-color: transparent;
  height: auto;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field .oj-text-field-container,
.oj-text-field-label-inside.oj-text-field:not(.oj-read-only) .oj-text-field-container {
  min-height: var(--oj-text-field-inside-edge-height);
}

.oj-text-field-label-inside:not(.oj-read-only):not(.oj-textarea) .oj-text-field-container.oj-text-field-has-start-slot .oj-text-field-input,
.oj-text-field-label-inside:not(.oj-read-only):not(.oj-textarea) .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-text-field-input {
  min-height: var(--oj-text-field-inside-edge-height);
  padding-top: var(--oj-text-field-inside-edge-padding-top);
}

.oj-form-layout .oj-form.oj-enabled:not(.oj-form-cols-labels-inline) .oj-label,
.oj-label-value:not(.oj-formlayout-labels-inline) .oj-label {
  margin-bottom: var(--oj-form-layout-top-edge-label-to-value-padding);
}

/** for all hints */
.oj-form-control-hint {
  color: var(--oj-core-text-color-primary);
  padding: 0;
  word-wrap: break-word;
  font-size: var(--oj-user-assistance-inline-font-size);
}

.oj-form-control-title {
  color: var(--oj-core-text-color-primary);
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-form-control,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field {
  height: 100%;
  min-height: 100%;
  margin-bottom: 0;
  max-width: 100%;
  min-width: 100%;
}

.oj-form-control input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-middle,
.oj-text-field:not(.oj-read-only) .oj-text-field-middle {
  position: relative;
  display: inline-flex;
  flex: 1;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field.oj-read-only .oj-text-field-middle {
  min-width: 1em;
}

/* when the label is inside or above, we must set the max-width of the component to
      100%. Otherwise some components like input text, whose max-width is decided by
      oj-text-field-default-max-width looks so different from other components like radioset
      which does not have a configured default max width in alta.
  */
.oj-text-field-label-inside.oj-form-control,
.oj-text-field-label-inside.oj-text-field,
.oj-form-control-label-inside.oj-form-control {
  max-width: 100%;
}

/* when the label is inside, set the padding right so that the long labels are truncated
    at the same width as input field
  */
.oj-text-field-label-inside .oj-label {
  max-width: 100%;
  box-sizing: border-box;
}

html:not([dir=rtl]) .oj-text-field-label-inside .oj-label {
  padding-right: calc(2 * var(--oj-text-field-text-to-edge-padding));
}

html[dir=rtl] .oj-text-field-label-inside .oj-label {
  padding-left: calc(2 * var(--oj-text-field-text-to-edge-padding));
}

.oj-text-field-label-inside.oj-read-only .oj-label,
.oj-form-control-label-inside.oj-read-only .oj-label {
  margin-bottom: 0;
}

/* consolidating styles - start
  */
.oj-text-field {
  display: inline-block;
  line-height: var(--oj-typography-body-md-line-height);
  font-weight: normal;
  font-size: var(--oj-text-field-font-size);
  /* use a width of 100% and then max and min width so that when
        there's less room for the form control it can automatically
        get smaller instead of overflowing its boundaries */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 599.9px) {
  .oj-text-field {
    -webkit-text-size-adjust: var(--oj-private-text-field-font-size-adjust);
  }
}
.oj-form-control-full-width.oj-text-field,
.oj-form-control-full-width .oj-text-field {
  max-width: 100%;
}

.oj-text-field-input {
  outline: 0;
  box-sizing: border-box;
  font-family: inherit;
  line-height: inherit;
  font-weight: inherit;
  font-size: 100%;
  border: 0;
  background-color: transparent;
  color: var(--oj-text-field-text-color);
  width: 100%;
  padding: 0 var(--oj-text-field-text-to-edge-padding);
}

.oj-text-field-container.oj-text-field-has-start-slot .oj-text-field-input {
  padding-inline-start: var(--oj-text-field-icon-to-text-padding);
}

.oj-text-field-container.oj-text-field-has-end-slot .oj-text-field-input {
  padding-inline-end: var(--oj-text-field-icon-to-text-padding);
}

/* Styling for text-align */
.oj-form-control-text-align-right.oj-text-field .oj-text-field-input,
.oj-form-control-text-align-right .oj-text-field .oj-text-field-input,
.oj-form-control-text-align-right.oj-text-field .oj-text-field-readonly-div {
  text-align: right;
}

.oj-form-control-text-align-start.oj-text-field .oj-text-field-input,
.oj-form-control-text-align-start .oj-text-field .oj-text-field-input,
.oj-form-control-text-align-start.oj-text-field .oj-text-field-readonly-div,
.oj-form-control-text-align-start .oj-text-field .oj-text-field-readonly-div {
  text-align: left;
}

html[dir=rtl] .oj-form-control-text-align-start.oj-text-field .oj-text-field-input,
html[dir=rtl] .oj-form-control-text-align-start .oj-text-field .oj-text-field-input,
html[dir=rtl] .oj-form-control-text-align-start.oj-text-field .oj-text-field-readonly-div,
html[dir=rtl] .oj-form-control-text-align-start .oj-text-field .oj-text-field-readonly-div {
  text-align: right;
}

.oj-form-control-text-align-end.oj-text-field .oj-text-field-input,
.oj-form-control-text-align-end .oj-text-field .oj-text-field-input,
.oj-form-control-text-align-end.oj-text-field .oj-text-field-readonly-div,
.oj-form-control-text-align-end .oj-text-field .oj-text-field-readonly-div {
  text-align: right;
}

html[dir=rtl] .oj-form-control-text-align-end.oj-text-field .oj-text-field-input,
html[dir=rtl] .oj-form-control-text-align-end .oj-text-field .oj-text-field-input,
html[dir=rtl] .oj-form-control-text-align-end.oj-text-field .oj-text-field-readonly-div,
html[dir=rtl] .oj-form-control-text-align-end .oj-text-field .oj-text-field-readonly-div {
  text-align: left;
}

.oj-text-field.oj-read-only .oj-text-field-input {
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  color: var(--oj-core-text-color-primary);
}

.oj-text-field.oj-disabled .oj-text-field-input {
  color: var(--oj-text-field-text-color-disabled);
}

/* clears the 'X' from Chrome */
.oj-text-field-input::-webkit-search-decoration,
.oj-text-field-input::-webkit-search-cancel-button,
.oj-text-field-input::-webkit-search-results-button,
.oj-text-field-input::-webkit-search-results-decoration {
  display: none;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-input,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-readonly-div,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-container {
  color: inherit;
  height: 100%;
  width: 100%;
}

html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-input,
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-readonly-div,
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-container {
  text-align: inherit;
}

html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-input,
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-readonly-div,
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field .oj-text-field-container {
  text-align: inherit;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field-readonly-div {
  white-space: inherit;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-disabled) .oj-text-field-input,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-disabled) .oj-text-field-readonly-div,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-disabled) .oj-text-field-container {
  background-color: transparent;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-invalid):not(.oj-warning) .oj-text-field-input,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-invalid):not(.oj-warning) .oj-text-field-readonly-div,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-text-field:not(.oj-invalid):not(.oj-warning) .oj-text-field-container {
  border-width: 0;
}

.oj-text-field-label-inside .oj-text-field-input.oj-hover {
  background-color: transparent;
}

.oj-text-field .oj-text-field-container {
  position: relative;
  box-sizing: border-box;
  border-style: solid;
  transition: border-color 0.1s linear;
  border-color: var(--oj-text-field-border-color);
  border-width: var(--oj-text-field-border-width);
  border-radius: var(--oj-text-field-border-radius);
  background-color: var(--oj-text-field-bg-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  height: var(--oj-text-field-height);
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field.oj-read-only .oj-text-field .oj-text-field-container {
  overflow: hidden;
}

.oj-inputpassword.oj-read-only .oj-text-field-input::selection {
  background-color: transparent;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field.oj-read-only .oj-text-field-container {
  border-width: var(--oj-text-field-border-width);
  border-color: var(--oj-text-field-border-color-disabled);
  background-color: transparent;
  height: var(--oj-text-field-height);
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field.oj-read-only.oj-textarea .oj-text-field-container,
.oj-form-layout .oj-form.oj-enabled .oj-text-field.oj-read-only.oj-select-multi .oj-text-field-container,
.oj-form-layout .oj-form.oj-enabled .oj-text-field.oj-read-only.oj-combobox-multi .oj-text-field-container {
  height: auto;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field.oj-select-multi.oj-has-no-value:not(.oj-text-field-label-inside) .oj-text-field-container,
.oj-form-layout .oj-form.oj-enabled .oj-text-field.oj-combobox-multi.oj-has-no-value:not(.oj-text-field-label-inside) .oj-text-field-container,
.oj-form-layout .oj-form.oj-enabled .oj-text-field.oj-textarea.oj-has-no-value:not(.oj-text-field-label-inside) .oj-text-field-container,
.oj-form-layout .oj-form.oj-enabled .oj-textarea.oj-read-only:not(.oj-text-field-label-inside) .oj-text-field-container {
  min-height: var(--oj-text-field-height);
}

.oj-text-field.oj-focus:not(.oj-read-only):not(.oj-invalid):not(.oj-warning) .oj-text-field-container {
  border-color: var(--oj-text-field-border-color-focus);
}

.oj-text-field.oj-invalid .oj-text-field-container,
.oj-text-field.oj-warning .oj-text-field-container {
  border-style: solid;
}

.oj-text-field.oj-invalid .oj-text-field-container {
  border-color: var(--oj-core-danger-3);
}

.oj-text-field.oj-warning .oj-text-field-container {
  border-color: var(--oj-core-warning-3);
}

.oj-text-field.oj-disabled .oj-text-field-container {
  background-color: var(--oj-text-field-bg-color-disabled);
  border-color: var(--oj-text-field-border-color-disabled);
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field .oj-text-field-container .oj-label,
.oj-form-layout .oj-form.oj-enabled oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container .oj-label,
.oj-text-field-label-inside.oj-text-field:not(.oj-read-only) .oj-text-field-container .oj-label,
.oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container .oj-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.25s ease 0.1s;
}

html:not([dir=rtl]) .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label,
html:not([dir=rtl]) .oj-form-layout .oj-form.oj-enabled oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label,
html:not([dir=rtl]) .oj-text-field-label-inside.oj-text-field:not(.oj-read-only) .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label,
html:not([dir=rtl]) .oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label {
  left: var(--oj-text-field-text-to-edge-padding);
}

html[dir=rtl] .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label,
html[dir=rtl] .oj-form-layout .oj-form.oj-enabled oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label,
html[dir=rtl] .oj-text-field-label-inside.oj-text-field:not(.oj-read-only) .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label,
html[dir=rtl] .oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label {
  right: var(--oj-text-field-text-to-edge-padding);
}

html:not([dir=rtl]) .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field .oj-text-field-container.oj-text-field-has-start-slot .oj-label,
html:not([dir=rtl]) .oj-form-layout .oj-form.oj-enabled oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container.oj-text-field-has-start-slot .oj-label,
html:not([dir=rtl]) .oj-text-field-label-inside.oj-text-field:not(.oj-read-only) .oj-text-field-container.oj-text-field-has-start-slot .oj-label,
html:not([dir=rtl]) .oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container.oj-text-field-has-start-slot .oj-label {
  left: var(--oj-text-field-icon-to-text-padding);
}

html[dir=rtl] .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field .oj-text-field-container.oj-text-field-has-start-slot .oj-label,
html[dir=rtl] .oj-form-layout .oj-form.oj-enabled oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container.oj-text-field-has-start-slot .oj-label,
html[dir=rtl] .oj-text-field-label-inside.oj-text-field:not(.oj-read-only) .oj-text-field-container.oj-text-field-has-start-slot .oj-label,
html[dir=rtl] .oj-text-field-label-inside.oj-text-field.oj-disabled .oj-text-field-container.oj-text-field-has-start-slot .oj-label {
  right: var(--oj-text-field-icon-to-text-padding);
}

.oj-form-control-label-inside.oj-form-control .oj-label,
.oj-text-field-label-inside.oj-text-field.oj-read-only .oj-label,
.oj-form-control-label-inside.oj-label-value .oj-label[slot=label] {
  font-size: var(--oj-label-inside-edge-font-size);
  font-weight: var(--oj-label-inside-edge-font-weight);
  line-height: var(--oj-label-inside-edge-line-height);
  color: var(--oj-label-inside-edge-color);
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field.oj-focus .oj-text-field-container .oj-label,
.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field:not(.oj-has-no-value) .oj-text-field-container .oj-label,
.oj-text-field-label-inside.oj-text-field:not(.oj-read-only).oj-focus .oj-text-field-container .oj-label,
.oj-text-field-label-inside.oj-text-field:not(.oj-read-only):not(.oj-has-no-value) .oj-text-field-container .oj-label {
  transition: top 0.25s ease 0.1s, font-weight 0.25s ease 0.1s, font-size 0.25s ease 0.1s, transform 0.25s ease 0.1s;
  font-size: var(--oj-label-inside-edge-font-size);
  font-weight: var(--oj-label-inside-edge-font-weight);
  line-height: var(--oj-label-inside-edge-line-height);
  transform: none;
  top: var(--oj-label-inside-edge-position-top);
}

html:not([dir=rtl]) .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field.oj-focus .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label,
html:not([dir=rtl]) .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field:not(.oj-has-no-value) .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label,
html:not([dir=rtl]) .oj-text-field-label-inside.oj-text-field:not(.oj-read-only).oj-focus .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label,
html:not([dir=rtl]) .oj-text-field-label-inside.oj-text-field:not(.oj-read-only):not(.oj-has-no-value) .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label {
  left: var(--oj-text-field-text-to-edge-padding);
}

html[dir=rtl] .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field.oj-focus .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label,
html[dir=rtl] .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field:not(.oj-has-no-value) .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label,
html[dir=rtl] .oj-text-field-label-inside.oj-text-field:not(.oj-read-only).oj-focus .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label,
html[dir=rtl] .oj-text-field-label-inside.oj-text-field:not(.oj-read-only):not(.oj-has-no-value) .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label {
  right: var(--oj-text-field-text-to-edge-padding);
}

html:not([dir=rtl]) .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field.oj-focus .oj-text-field-container.oj-text-field-has-start-slot .oj-label,
html:not([dir=rtl]) .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field:not(.oj-has-no-value) .oj-text-field-container.oj-text-field-has-start-slot .oj-label,
html:not([dir=rtl]) .oj-text-field-label-inside.oj-text-field:not(.oj-read-only).oj-focus .oj-text-field-container.oj-text-field-has-start-slot .oj-label,
html:not([dir=rtl]) .oj-text-field-label-inside.oj-text-field:not(.oj-read-only):not(.oj-has-no-value) .oj-text-field-container.oj-text-field-has-start-slot .oj-label {
  left: var(--oj-text-field-icon-to-text-padding);
}

html[dir=rtl] .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field.oj-focus .oj-text-field-container.oj-text-field-has-start-slot .oj-label,
html[dir=rtl] .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field:not(.oj-has-no-value) .oj-text-field-container.oj-text-field-has-start-slot .oj-label,
html[dir=rtl] .oj-text-field-label-inside.oj-text-field:not(.oj-read-only).oj-focus .oj-text-field-container.oj-text-field-has-start-slot .oj-label,
html[dir=rtl] .oj-text-field-label-inside.oj-text-field:not(.oj-read-only):not(.oj-has-no-value) .oj-text-field-container.oj-text-field-has-start-slot .oj-label {
  right: var(--oj-text-field-icon-to-text-padding);
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field.oj-read-only .oj-text-field-container .oj-label {
  transition: none;
  transform: none;
  background-color: transparent;
  font-size: var(--oj-label-inside-edge-font-size);
  font-weight: var(--oj-label-inside-edge-font-weight);
  line-height: var(--oj-label-inside-edge-line-height);
  top: var(--oj-label-inside-edge-position-top);
}

html:not([dir=rtl]) .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field.oj-read-only .oj-text-field-container.oj-text-field-has-start-slot .oj-label {
  left: var(--oj-text-field-icon-to-text-padding);
}

html[dir=rtl] .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field.oj-read-only .oj-text-field-container.oj-text-field-has-start-slot .oj-label {
  right: var(--oj-text-field-icon-to-text-padding);
}

html:not([dir=rtl]) .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field.oj-read-only .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label {
  left: var(--oj-text-field-text-to-edge-padding);
}

html[dir=rtl] .oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field.oj-read-only .oj-text-field-container:not(.oj-text-field-has-start-slot) .oj-label {
  right: var(--oj-text-field-text-to-edge-padding);
}

.oj-text-field-label-inside.oj-focus:not(.oj-read-only):not(.oj-warning):not(.oj-invalid) .oj-text-field-container .oj-label {
  color: var(--oj-text-field-inside-edge-label-color-focus);
}

.oj-text-field-label-inside.oj-disabled:not(.oj-has-no-value) .oj-text-field-container .oj-label {
  transition: none;
  color: var(--oj-label-color-disabled);
}

.oj-text-field-label-inside.oj-invalid .oj-text-field-container .oj-label {
  color: var(--oj-text-field-inside-edge-label-color-error);
}

.oj-text-field-label-inside .oj-text-field-container .oj-label {
  color: var(--oj-label-inside-edge-color);
}

.oj-text-field-label-inside.oj-warning .oj-text-field-container .oj-label {
  color: var(--oj-text-field-inside-edge-label-color-warning);
}

.oj-text-field-label-inside.oj-textarea.oj-text-field:not(.oj-read-only) .oj-label,
.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field.oj-textarea.oj-has-no-value:not(.oj-focus) .oj-text-field-container .oj-label,
.oj-text-field-label-inside.oj-textarea.oj-disabled.oj-has-no-value.oj-text-field .oj-label {
  top: calc(var(--oj-text-field-inside-edge-height) / 2);
}

.oj-text-field-label-inside.oj-textarea.oj-text-field.oj-read-only .oj-label,
.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-text-field.oj-textarea.oj-has-no-value.oj-read-only .oj-text-field-container .oj-label {
  top: var(--oj-label-inside-edge-position-top);
}

.oj-text-field-middle {
  width: 100%;
  height: 100%;
}

.oj-text-field.oj-text-field-label-inside .oj-text-field-start,
.oj-text-field.oj-text-field-label-inside .oj-text-field-end {
  display: flex;
  justify-content: center;
  align-items: center;
}

.oj-text-field .oj-text-field-start .oj-text-field-start-end-icon {
  margin-inline-start: var(--oj-text-field-icon-to-edge-padding);
}

.oj-text-field .oj-text-field-end .oj-text-field-start-end-icon {
  margin-inline-end: var(--oj-text-field-icon-to-edge-padding);
}

.oj-text-field.oj-text-field-label-inside .oj-text-field-start .oj-button {
  margin-bottom: 0;
  margin-inline-start: calc((var(--oj-text-field-inside-edge-height) - var(--oj-button-height)) / 2);
}

.oj-text-field.oj-text-field-label-inside .oj-text-field-end .oj-button {
  margin-bottom: 0;
  margin-inline-end: calc((var(--oj-text-field-inside-edge-height) - var(--oj-button-height)) / 2);
}

.oj-text-field .oj-text-field-start .oj-button {
  margin-bottom: 0;
  margin-inline-start: calc((var(--oj-text-field-height) - var(--oj-button-sm-height)) / 2);
}

.oj-text-field .oj-text-field-end .oj-button {
  margin-bottom: 0;
  margin-inline-end: calc((var(--oj-text-field-height) - var(--oj-button-sm-height)) / 2);
}

.oj-text-field.oj-read-only .oj-text-field-start .oj-text-field-start-end-icon {
  margin-inline-start: 0;
  margin-inline-end: var(--oj-text-field-icon-to-edge-padding);
}

.oj-text-field.oj-read-only .oj-text-field-end .oj-text-field-start-end-icon {
  margin-inline-end: 0;
  margin-inline-start: var(--oj-text-field-icon-to-edge-padding);
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field.oj-read-only .oj-text-field-start .oj-text-field-start-end-icon {
  margin-inline-start: var(--oj-text-field-icon-to-edge-padding);
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field.oj-read-only .oj-text-field-end .oj-text-field-start-end-icon {
  margin-inline-end: var(--oj-text-field-icon-to-edge-padding);
}

.oj-text-field.oj-text-field-label-inside.oj-read-only .oj-text-field-start .oj-button {
  margin-inline-start: 0;
  margin-inline-end: calc((var(--oj-text-field-inside-edge-height) - var(--oj-button-height)) / 2);
}

.oj-text-field.oj-text-field-label-inside.oj-read-only .oj-text-field-end .oj-button {
  margin-inline-end: 0;
  margin-inline-start: calc((var(--oj-text-field-inside-edge-height) - var(--oj-button-height)) / 2);
}

.oj-text-field.oj-read-only .oj-text-field-start .oj-button {
  margin-inline-start: 0;
  margin-inline-end: calc((var(--oj-text-field-height) - var(--oj-button-sm-height)) / 2);
}

.oj-text-field.oj-read-only .oj-text-field-end .oj-button {
  margin-inline-end: 0;
  margin-inline-start: calc((var(--oj-text-field-height) - var(--oj-button-sm-height)) / 2);
}

.oj-text-field.oj-disabled .oj-text-field-start-end-icon {
  color: var(--oj-private-icon-color-disabled);
}

.oj-text-field .oj-text-field-start-end-icon {
  font-size: var(--oj-button-sm-icon-size);
}

.oj-text-field-label-inside .oj-text-field-start-end-icon {
  font-size: var(--oj-button-icon-size);
}

.oj-text-field-counter {
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: default;
  font-size: var(--oj-typography-body-xs-font-size);
  font-weight: 600;
  line-height: var(--oj-typography-body-xs-line-height);
  color: var(--oj-core-text-color-secondary);
}

.oj-text-field.oj-loading .oj-text-field-container {
  background-color: var(--oj-animation-skeleton-bg-end-color);
  background-size: 200% 200%;
  border-width: 0;
  animation-name: SkeletonAnimation;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  opacity: 1;
}

.oj-form-control-width-sm {
  width: var(--oj-text-field-sm-width) !important;
}

.oj-form-control-width-md {
  width: var(--oj-text-field-md-width) !important;
}

.oj-form-control-max-width-md {
  max-width: var(--oj-text-field-md-width) !important;
}

.oj-text-field-container .oj-component-icon.oj-clickable-icon-nocontext:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-label-help-icon-anchor), .oj-text-field-container .oj-clickable-icon-nocontext.oj-popup-tail.oj-popup-tail-simple:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-label-help-icon-anchor),
.oj-text-field-container .oj-clickable-icon-nocontext.oj-menucheckbox-icon:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-label-help-icon-anchor) {
  padding: 0;
  border-radius: var(--oj-button-border-radius);
  color: var(--oj-private-icon-color-default);
}

.oj-text-field:not(.oj-text-field-label-inside) .oj-text-field-container .oj-component-icon.oj-clickable-icon-nocontext:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-label-help-icon-anchor), .oj-text-field:not(.oj-text-field-label-inside) .oj-text-field-container .oj-clickable-icon-nocontext.oj-popup-tail.oj-popup-tail-simple:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-label-help-icon-anchor),
.oj-text-field:not(.oj-text-field-label-inside) .oj-text-field-container .oj-clickable-icon-nocontext.oj-menucheckbox-icon:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-label-help-icon-anchor) {
  width: var(--oj-button-sm-height);
  height: var(--oj-button-sm-height);
  line-height: var(--oj-button-sm-height);
  margin: calc((var(--oj-text-field-height) - var(--oj-button-sm-height) - 2px) / 2);
}

.oj-text-field.oj-text-field-label-inside .oj-text-field-container .oj-component-icon.oj-clickable-icon-nocontext:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-label-help-icon-anchor), .oj-text-field.oj-text-field-label-inside .oj-text-field-container .oj-clickable-icon-nocontext.oj-popup-tail.oj-popup-tail-simple:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-label-help-icon-anchor),
.oj-text-field.oj-text-field-label-inside .oj-text-field-container .oj-clickable-icon-nocontext.oj-menucheckbox-icon:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-label-help-icon-anchor) {
  width: var(--oj-button-height);
  height: var(--oj-button-height);
  line-height: var(--oj-button-height);
  margin: calc((var(--oj-text-field-inside-edge-height) - var(--oj-button-height) - 2px) / 2);
}

.oj-text-field-container .oj-component-icon.oj-clickable-icon-nocontext:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-disabled):hover, .oj-text-field-container .oj-clickable-icon-nocontext.oj-popup-tail.oj-popup-tail-simple:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-disabled):hover,
.oj-text-field-container .oj-clickable-icon-nocontext.oj-menucheckbox-icon:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-disabled):hover {
  color: var(--oj-private-icon-color-hover);
  background-color: var(--oj-private-icon-bg-color-hover);
  border-color: var(--oj-private-icon-border-color-hover);
}

.oj-text-field-container .oj-component-icon.oj-clickable-icon-nocontext.oj-active:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon), .oj-text-field-container .oj-clickable-icon-nocontext.oj-active.oj-popup-tail.oj-popup-tail-simple:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon),
.oj-text-field-container .oj-clickable-icon-nocontext.oj-active.oj-menucheckbox-icon:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon) {
  color: var(--oj-private-icon-color-active);
  background-color: var(--oj-private-icon-bg-color-active);
  border-color: var(--oj-private-icon-border-color-active);
}

.oj-text-field-container .oj-component-icon.oj-clickable-icon-nocontext.oj-disabled:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-label-help-icon-anchor), .oj-text-field-container .oj-clickable-icon-nocontext.oj-disabled.oj-popup-tail.oj-popup-tail-simple:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-label-help-icon-anchor),
.oj-text-field-container .oj-clickable-icon-nocontext.oj-disabled.oj-menucheckbox-icon:not(.oj-select-clear-entry-icon):not(.oj-combobox-clear-entry-icon):not(.oj-label-help-icon-anchor) {
  background-color: transparent;
  color: var(--oj-private-icon-color-disabled);
}

.oj-text-field-end .oj-component-icon.oj-clickable-icon-nocontext, .oj-text-field-end .oj-clickable-icon-nocontext.oj-popup-tail.oj-popup-tail-simple,
.oj-text-field-end .oj-clickable-icon-nocontext.oj-menucheckbox-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: var(--oj-core-cursor-clickable);
}

.oj-text-field .oj-text-field-end .oj-component-icon.oj-clickable-icon-nocontext:focus, .oj-text-field .oj-text-field-end .oj-clickable-icon-nocontext.oj-popup-tail.oj-popup-tail-simple:focus,
.oj-text-field .oj-text-field-end .oj-clickable-icon-nocontext.oj-menucheckbox-icon:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

.oj-text-field:not(.oj-focus-highlight) .oj-text-field-end .oj-component-icon.oj-clickable-icon-nocontext:focus, .oj-text-field:not(.oj-focus-highlight) .oj-text-field-end .oj-clickable-icon-nocontext.oj-popup-tail.oj-popup-tail-simple:focus,
.oj-text-field:not(.oj-focus-highlight) .oj-text-field-end .oj-clickable-icon-nocontext.oj-menucheckbox-icon:focus {
  outline: none;
}

.oj-form-control input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px var(--oj-text-field-bg-color) inset;
  -webkit-text-fill-color: var(--oj-text-field-text-color);
}

.oj-user-assistance-inline-container.oj-has-messages > .oj-required-inline-container,
.oj-user-assistance-inline-container.oj-has-helphints > .oj-required-inline-container,
.oj-form-control .oj-user-assistance-inline-container.oj-has-messages .oj-helphints-inline-container {
  display: none;
}

.oj-user-assistance-inline-container {
  margin-top: 2px;
}

.oj-user-assistance-inline-container.oj-reflow:empty {
  margin-top: 0px;
}

.oj-form.oj-enabled .oj-user-assistance-inline-container.oj-efficient,
.oj-form-control:not(.oj-read-only):not(.oj-disabled) .oj-user-assistance-inline-container.oj-efficient {
  min-height: 0.333rem;
}

.oj-user-assistance-inline-container,
.oj-user-assistance-inline-container .oj-message-detail,
.oj-helphints-inline-container {
  color: var(--oj-user-assistance-inline-text-color);
  font-size: var(--oj-user-assistance-inline-font-size);
  font-weight: normal;
  line-height: 1.333;
}

.oj-user-assistance-inline-container {
  word-break: break-word;
}

html:not([dir=rtl]) .oj-required-inline-container,
html:not([dir=rtl]) .oj-helphints-inline-container {
  padding-left: 2px;
}

html[dir=rtl] .oj-required-inline-container,
html[dir=rtl] .oj-helphints-inline-container {
  padding-right: 2px;
}

.oj-helphints-inline-container div {
  display: inline-block;
}

html:not([dir=rtl]) .oj-helphints-inline-container div:nth-child(2) {
  margin-left: 0.25rem;
}

html[dir=rtl] .oj-helphints-inline-container div:nth-child(2) {
  margin-right: 0.25rem;
}

.oj-helphints-anchor:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: -1px;
}

.oj-helphints-anchor:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-required-inline-container {
  text-align: right;
}

html[dir=rtl] .oj-required-inline-container {
  text-align: left;
}

.oj-checkboxset:not(.oj-choice-direction-row) .oj-required-inline-container,
.oj-radioset:not(.oj-choice-direction-row) .oj-required-inline-container {
  text-align: left;
}

html[dir=rtl] .oj-checkboxset:not(.oj-choice-direction-row) .oj-required-inline-container,
html[dir=rtl] .oj-radioset:not(.oj-choice-direction-row) .oj-required-inline-container {
  text-align: right;
}

@keyframes animatePlaceholder {
  from {
    opacity: 0.001;
  }
  to {
    opacity: 1;
  }
}
.oj-text-field-label-inside.oj-has-no-value.oj-focus:not(.oj-read-only) .oj-text-field-input,
.oj-searchselect.oj-text-field-label-inside .oj-searchselect-filter.oj-has-no-value.oj-focus:not(.oj-read-only) .oj-text-field-input,
.oj-text-field-label-inside.oj-has-no-value.oj-focus:not(.oj-read-only) .oj-combobox-input,
.oj-text-field-label-inside.oj-has-no-value.oj-focus:not(.oj-read-only) .oj-select-default {
  animation-name: animatePlaceholder;
  animation-duration: var(--oj-animation-duration-xlong);
  animation-timing-function: var(--oj-animation-ease-in);
}

.oj-radiocheckbox-icon {
  padding-inline-end: var(--oj-radio-checkbox-input-to-label-padding);
  padding-inline-start: var(--oj-radio-checkbox-input-to-edge-padding);
}

.oj-radioset-input-start .oj-radiocheckbox-icon,
.oj-checkboxset-input-start .oj-radiocheckbox-icon {
  padding-inline-end: var(--oj-radio-checkbox-input-to-label-padding);
  padding-inline-start: var(--oj-radio-checkbox-input-to-edge-padding);
}

.oj-radioset-input-end .oj-radiocheckbox-icon,
.oj-checkboxset-input-end .oj-radiocheckbox-icon {
  padding-inline-end: var(--oj-radio-checkbox-input-to-edge-padding);
  padding-inline-start: var(--oj-radio-checkbox-input-to-label-padding);
}

/* radioset and checkboxset styles */
/* this styles the radio, checkbox, and their labels */
/* --------------------------------------------------------------- */
oj-radioset:not(.oj-complete) {
  visibility: hidden;
}

oj-checkboxset:not(.oj-complete) {
  visibility: hidden;
}

/* App developer should put a span around the input and label, and use this styleclass */
.oj-choice-item {
  display: flex;
  align-items: flex-start;
  margin: 0;
  border-bottom: 1px solid var(--oj-radio-checkbox-item-divider-color);
}

.oj-choice-direction-row .oj-choice-item {
  display: inline-flex;
  align-items: flex-start;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1px solid transparent;
}

.oj-choice-direction-column .oj-radio-label,
.oj-choice-direction-column .oj-checkbox-label {
  flex: 1 1 auto;
}

.oj-form .oj-checkboxset-single.oj-choice-direction-column .oj-checkbox-label {
  flex: 0 1 auto;
}

.oj-radioset,
.oj-checkboxset {
  display: inline-block;
  box-sizing: border-box;
  max-width: var(--oj-radio-checkbox-width);
  width: var(--oj-radio-checkbox-width);
  font-size: var(--oj-typography-body-md-font-size);
  line-height: var(--oj-typography-body-md-line-height);
  font-weight: normal;
}

.oj-radioset.oj-read-only,
.oj-checkboxset.oj-read-only {
  font-weight: var(--oj-form-control-font-weight-read-only);
}

.oj-radio-label,
.oj-checkbox-label {
  color: var(--oj-core-text-color-primary);
  display: inline-block;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

.oj-radio-label.oj-disabled .oj-radiocheckbox-label-text,
.oj-checkbox-label.oj-disabled .oj-radiocheckbox-label-text {
  color: var(--oj-text-field-text-color-disabled);
}

.oj-radio,
.oj-checkbox {
  display: inline-block;
}

.oj-radioset-wrapper,
.oj-checkboxset-wrapper {
  box-sizing: border-box;
}

.oj-checkboxset-no-chrome .oj-checkboxset-wrapper,
.oj-radioset-no-chrome .oj-radioset-wrapper {
  background-color: inherit;
}

.oj-checkboxset-no-chrome .oj-checkboxset-wrapper,
.oj-radioset-no-chrome .oj-radioset-wrapper {
  border-width: 0;
}

.oj-choice-direction-row .oj-checkboxset-wrapper,
.oj-choice-direction-row .oj-radioset-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.oj-radioset .oj-choice-item.oj-active,
.oj-checkboxset:not(.oj-checkboxset-single) .oj-choice-item.oj-active {
  background-color: var(--oj-radio-checkbox-item-bg-color-active);
}

.oj-radioset:not(.oj-read-only).oj-choice-direction-column .oj-choice-item,
.oj-checkboxset:not(.oj-read-only).oj-choice-direction-column .oj-choice-item {
  padding-left: 0;
  padding-right: 0;
}

.oj-checkboxset.oj-read-only.oj-choice-direction-row .oj-choice-item,
.oj-radioset.oj-read-only.oj-choice-direction-row .oj-choice-item {
  padding: 0;
}

.oj-checkboxset.oj-read-only .oj-choice-item,
.oj-radioset.oj-read-only .oj-choice-item {
  color: var(--oj-core-text-color-primary);
  border-bottom: 1px solid transparent;
}

.oj-checkboxset.oj-read-only .oj-checkboxset-wrapper:focus,
.oj-radioset.oj-read-only .oj-radioset-wrapper:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

.oj-choice-item {
  position: relative;
}

.oj-checkboxset:not(.oj-read-only) .oj-choice-item,
.oj-radioset:not(.oj-read-only) .oj-choice-item {
  min-height: var(--oj-radio-checkbox-row-height);
  box-sizing: border-box;
}

.oj-checkboxset:not(.oj-read-only) label,
.oj-radioset:not(.oj-read-only) label {
  padding-top: calc((var(--oj-radio-checkbox-row-height) - var(--oj-typography-body-md-line-height) * var(--oj-typography-body-md-font-size) - 1px) / 2);
  padding-bottom: calc((var(--oj-radio-checkbox-row-height) - var(--oj-typography-body-md-line-height) * var(--oj-typography-body-md-font-size) - 1px) / 2);
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-checkboxset-single.oj-choice-direction-column .oj-choice-item,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-checkboxset-single .oj-checkboxset-wrapper {
  margin-bottom: 0;
  height: 100%;
  min-height: 100%;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-checkboxset:not(.oj-read-only) .oj-choice-item,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-radioset:not(.oj-read-only) .oj-choice-item {
  min-height: 100%;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-radiocheckbox-icon {
  height: 100%;
}

.oj-radiocheckbox-label-text {
  display: inline-block;
  padding-inline-end: var(--oj-radio-checkbox-label-to-edge-padding);
}

.oj-checkboxset-input-end .oj-radiocheckbox-label-text,
.oj-radioset-input-end .oj-radiocheckbox-label-text {
  padding-inline-start: var(--oj-radio-checkbox-label-to-edge-padding);
}

.oj-checkboxset-input-start .oj-radiocheckbox-label-text {
  padding-inline-end: var(--oj-radio-checkbox-label-to-edge-padding);
}

.oj-radioset-input-end .oj-radiocheckbox-icon,
.oj-checkboxset-input-end .oj-radiocheckbox-icon {
  order: 1;
}

.oj-radioset-input-start .oj-radio-label,
.oj-checkboxset-input-start .oj-checkbox-label {
  order: 1;
}

.oj-radio,
.oj-checkbox {
  opacity: 0;
  width: 100%;
  position: absolute;
  top: 0;
  height: 90%;
  z-index: 1;
  margin: 0;
}

html:not([dir=rtl]) .oj-radio,
html:not([dir=rtl]) .oj-checkbox {
  left: 0;
}

html[dir=rtl] .oj-radio,
html[dir=rtl] .oj-checkbox {
  right: 0;
  left: auto;
}

html:not([dir=rtl]) .oj-radioset-input-start .oj-radio,
html:not([dir=rtl]) .oj-checkboxset-input-start .oj-checkbox {
  left: 0;
}

html[dir=rtl] .oj-radioset-input-start .oj-radio,
html[dir=rtl] .oj-checkboxset-input-start .oj-checkbox {
  right: 0;
  left: auto;
}

html:not([dir=rtl]) .oj-checkboxset-input-end .oj-checkbox {
  right: 0;
  left: auto;
}

html[dir=rtl] .oj-checkboxset-input-end .oj-checkbox {
  left: 0;
}

.oj-choice-item.oj-focus-highlight .oj-radiocheckbox-icon::before {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

.oj-radio-label,
.oj-checkbox-label {
  text-align: start;
}

.oj-choice-direction-row .oj-choice-item:not(:last-child) > .oj-radio-label,
.oj-choice-direction-row .oj-choice-item:not(:last-child) > .oj-checkbox-label {
  margin-inline-end: 2rem;
}

.oj-choice-direction-row.oj-radioset-input-start .oj-choice-item:not(:last-child) > .oj-radio-label,
.oj-choice-direction-row.oj-checkboxset-input-start .oj-choice-item:not(:last-child) > .oj-checkbox-label {
  margin-inline-end: 2rem;
}

.oj-choice-direction-row.oj-radioset-input-end .oj-choice-item:not(:first-child) > .oj-radio-label,
.oj-choice-direction-row.oj-checkboxset-input-end .oj-choice-item:not(:first-child) > .oj-checkbox-label {
  margin-inline-start: 2rem;
}

.oj-choice-direction-column.oj-radioset-input-start .oj-choice-item .oj-radio-label,
.oj-choice-direction-column.oj-checkboxset-input-start .oj-choice-item .oj-checkbox-label {
  margin-inline-end: var(--oj-radio-checkbox-input-to-label-padding);
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-checkbox-label {
  text-align: inherit;
}

.oj-radio-label,
.oj-checkbox-label {
  height: 100%;
  order: 1;
}

.oj-form .oj-checkboxset-single .oj-radiocheckbox-label-text {
  flex: 0 1 auto;
}

.oj-radiocheckbox-icon {
  height: calc(var(--oj-radio-checkbox-row-height) - 1px);
  font-size: var(--oj-radio-checkbox-input-size);
  line-height: var(--oj-radio-checkbox-input-size);
  color: var(--oj-radio-checkbox-input-color-selected);
  box-sizing: border-box;
  background-repeat: no-repeat;
  flex: 0 0 auto;
  display: flex;
  position: relative;
  align-items: center;
  order: 0;
}

.oj-radioset .oj-radiocheckbox-icon {
  color: var(--oj-radio-checkbox-input-color-unselected);
}

.oj-radioset .oj-radiocheckbox-icon::before {
  transition: transform 0.3s var(--oj-animation-ease-in-out);
}

.oj-radioset .oj-selected .oj-radiocheckbox-icon {
  color: var(--oj-radio-checkbox-input-color-selected);
}

.oj-radioset-wrapper > .oj-active .oj-radiocheckbox-icon::before,
.oj-radioset-wrapper > .oj-selected.oj-active .oj-radiocheckbox-icon::before {
  transform: var(--oj-radio-checkbox-input-transform-active);
  transition: transform 0.1s var(--oj-animation-ease-in-out);
}

.oj-radioset .oj-disabled .oj-radiocheckbox-icon {
  color: var(--oj-core-text-color-disabled);
}

.oj-radioset .oj-disabled.oj-selected .oj-radiocheckbox-icon {
  color: var(--oj-core-text-color-disabled);
}

.oj-checkboxset .oj-radiocheckbox-icon {
  color: var(--oj-radio-checkbox-input-color-unselected);
}

.oj-checkboxset .oj-radiocheckbox-icon::before {
  transition: transform 0.1s var(--oj-animation-ease-in-out);
}

.oj-checkboxset .oj-selected .oj-radiocheckbox-icon {
  color: var(--oj-radio-checkbox-input-color-selected);
}

.oj-checkboxset .oj-selected .oj-radiocheckbox-icon::before {
  transition: transform 0.1s var(--oj-animation-ease-in-out);
}

.oj-checkboxset-wrapper > .oj-active .oj-radiocheckbox-icon::before {
  transform: var(--oj-radio-checkbox-input-transform-active);
  transition: transform 0.3s var(--oj-animation-ease-in-out);
}

.oj-checkboxset-wrapper > .oj-active.oj-selected .oj-radiocheckbox-icon::before {
  transform: var(--oj-radio-checkbox-input-transform-active);
  transition: transform 0.15s var(--oj-animation-ease-in-out);
}

.oj-checkboxset .oj-disabled .oj-radiocheckbox-icon {
  color: var(--oj-core-text-color-disabled);
}

.oj-checkboxset .oj-disabled.oj-selected .oj-radiocheckbox-icon {
  color: var(--oj-core-text-color-disabled);
}

.oj-radioset-input-start .oj-radio-label,
.oj-checkboxset-input-start .oj-checkbox-label,
.oj-radioset-input-end .oj-radiocheckbox-icon,
.oj-checkboxset-input-end .oj-radiocheckbox-icon {
  order: 1;
}

.oj-radioset-input-start .oj-radiocheckbox-icon,
.oj-checkboxset-input-start .oj-radiocheckbox-icon,
.oj-radioset-input-end .oj-radio-label,
.oj-checkboxset-input-end .oj-checkbox-label {
  order: 0;
}

.oj-choice-direction-row.oj-radioset-input-start .oj-choice-item:not(:first-child) > .oj-radio-label,
.oj-choice-direction-row.oj-checkboxset-input-start .oj-choice-item:not(:first-child) > .oj-checkbox-label {
  margin-inline-start: 0;
}

.oj-choice-direction-row.oj-radioset-input-end .oj-choice-item:not(:last-child) > .oj-radio-label,
.oj-choice-direction-row.oj-checkboxset-input-end .oj-choice-item:not(:last-child) > .oj-checkbox-label {
  margin-inline-end: 0;
}

.oj-radioset-option-defaults {
  font-family: '{"renderInputAs":"backgroundImage"}' !important;
}

.oj-checkboxset-option-defaults {
  font-family: '{"renderInputAs":"backgroundImage"}' !important;
}

.oj-private-scale-lg {
  --oj-collection-list-row-height: 48px;
}

.oj-private-scale-lg {
  --oj-list-view-item-padding-horizontal: 16px;
}

oj-list-view:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the listview widget container */
.oj-listview {
  display: block;
  position: relative;
  border-width: 1px 0;
  border-style: solid;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  border-color: var(--oj-collection-border-color);
  min-height: var(--oj-collection-list-row-height);
}

/* styling for the listview root element and group element */
.oj-listview-element,
.oj-listview-group {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

/* Styling to remove focus ring border on focusable elements */
.oj-listview:focus,
.oj-listview-element:focus,
.oj-listview-expand-icon:focus,
.oj-listview-expanding-icon:focus,
.oj-listview-collapse-icon:focus,
.oj-listview-group-item:focus,
.oj-listview-item-element:focus,
.oj-listview-cell-element:focus {
  outline: none;
}

/* styling to hide the gridline */
.oj-listview.gridline-top-hidden {
  border-top-width: 0;
}

/* styling to hide the gridline */
.oj-listview.gridline-bottom-hidden {
  border-bottom-width: 0;
}

/* Styling for the component div container element. */
.oj-listview-container {
  overflow: auto;
}

/* to enable momentum scrolling on touch devices */
.oj-listview-container-touch {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* remove border top for the first group to prevent double border */
.oj-listview-element > .oj-listview-item-element:first-child .oj-listview-group-item {
  border-top: 0;
}

/* remove border top for the first group or leaf item to prevent double border */
.oj-listview-element > .oj-listview-item:first-child,
.oj-listview:not(.oj-listview-card-layout) .oj-listview-group > .oj-listview-item:first-child,
.oj-listview-element > .oj-listview-item-element:first-child .oj-listview-group-item {
  background-size: 0;
}

/* styling on each list item */
/* note that background image is used for border because we need to ability to position the border.
           using linear-gradient allows us to customize the color of the border */
.oj-listview-item {
  background-image: linear-gradient(var(--oj-core-divider-color), var(--oj-core-divider-color));
  background-position: 0 0;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  box-sizing: border-box;
  border-top: 1px solid transparent;
}

/* styling to hide the gridline */
.oj-listview-gridlines-hidden .oj-listview-item {
  background-size: 0;
}

/* set on item before add or remove animation */
.oj-listview-item-add-remove-transition {
  overflow: hidden;
}

/* styling on list item element */
.oj-listview-item-element {
  line-height: normal;
}

/* Styling on list item hover */
.oj-listview-item.oj-hover,
.oj-listview-card.oj-hover,
.oj-listview-group-item.oj-hover {
  background-color: var(--oj-core-bg-color-hover);
}

.oj-listview:not(.oj-listview-card-layout) .oj-listview-item.oj-hover,
.oj-listview:not(.oj-listview-card-layout) .oj-listview-item.oj-hover + li.oj-listview-item {
  background-size: 0;
}

/* Styling on list item selection */
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected,
.oj-listview.oj-focus-ancestor .oj-listview-card.oj-selected,
.oj-listview.oj-focus-ancestor .oj-listview-group-item.oj-selected {
  background-color: var(--oj-core-bg-color-selected);
}

/* Styling on list item inactive selection (when the root is not focus) */
.oj-listview-item.oj-selected,
.oj-listview-card.oj-selected,
.oj-listview-group-item.oj-selected {
  background-color: var(--oj-core-bg-color-selected);
}

.oj-listview:not(.oj-listview-card-layout) .oj-listview-item.oj-selected,
.oj-listview:not(.oj-listview-card-layout) .oj-listview-item.oj-selected + li.oj-listview-item {
  border-top: 1px solid var(--oj-core-border-color-selected);
  background-size: 0;
}

/* Styling for the last selectd item */
ul[aria-multiselectable=false] .oj-listview-item.oj-selected:last-child {
  box-shadow: inset 0 -1px 0 0 var(--oj-core-border-color-selected);
}

/* Styling for the last selected item, with skeletons presents */
ul[aria-multiselectable=false] .oj-listview-item.oj-selected + li.oj-listview-skeleton-container {
  box-shadow: 0 -1px 0 0 var(--oj-core-border-color-selected);
}

/* Styling for the last selected item, gridlines visible */
ul[aria-multiselectable=false] .oj-listview-item.oj-selected + .oj-listview-gridline-placeholder {
  background-image: linear-gradient(var(--oj-core-border-color-selected), var(--oj-core-border-color-selected));
}

/* Styling on focused list or group item */
.oj-listview-card.oj-focus-highlight,
.oj-listview-item.oj-focus-highlight,
.oj-listview-group-item.oj-focus-highlight {
  position: relative;
}

.oj-listview-card.oj-focus-highlight::after,
.oj-listview-item.oj-focus-highlight::after,
.oj-listview-group-item.oj-focus-highlight::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  outline: dotted 1px var(--oj-core-focus-border-color);
}

html:not([dir=rtl]) .oj-listview-card.oj-focus-highlight::after,
html:not([dir=rtl]) .oj-listview-item.oj-focus-highlight::after,
html:not([dir=rtl]) .oj-listview-group-item.oj-focus-highlight::after {
  left: 1px;
}

html[dir=rtl] .oj-listview-card.oj-focus-highlight::after,
html[dir=rtl] .oj-listview-item.oj-focus-highlight::after,
html[dir=rtl] .oj-listview-group-item.oj-focus-highlight::after {
  right: 1px;
}

/* Styling on expand/collapse icon when it has focus highlight */
.oj-listview-expanding-icon.oj-focus-highlight::before,
.oj-listview-expand-icon.oj-focus-highlight::before,
.oj-listview-collapse-icon.oj-focus-highlight::before {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

/* Styling on focused list item */
.oj-listview.oj-listview-gridlines-hidden oj-focus-ancestor:not(.oj-listview-card-layout) .oj-listview-item.oj-focus,
.oj-listview.oj-listview-gridlines-hidden oj-focus-ancestor:not(.oj-listview-card-layout) .oj-listview-item.oj-focus + li.oj-listview-item {
  background-size: 0;
}

/* styling for list item selected */
.oj-listview.oj-focus-ancestor:not(.oj-listview-card-layout) .oj-listview-item.oj-selected,
.oj-listview.oj-focus-ancestor:not(.oj-listview-card-layout) .oj-listview-item.oj-selected + li.oj-listview-item {
  border-top: 1px solid var(--oj-core-border-color-selected);
  background-size: 0;
}

/* remove borders on multiselectable */
.oj-listview.oj-focus-ancestor:not(.oj-listview-card-layout) ul[aria-multiselectable=true] .oj-listview-item.oj-selected,
.oj-listview.oj-focus-ancestor:not(.oj-listview-card-layout) ul[aria-multiselectable=true] .oj-listview-item.oj-selected + li.oj-listview-item {
  border-top: 1px solid transparent;
}

/* remove borders on multiselectable unfocus */
.oj-listview:not(.oj-listview-card-layout) ul[aria-multiselectable=true] .oj-listview-item.oj-selected,
.oj-listview:not(.oj-listview-card-layout) ul[aria-multiselectable=true] .oj-listview-item.oj-selected + li.oj-listview-item {
  border-top: 1px solid transparent;
}

/* Styling for the list item elements in selected state when listview is in high contrast mode. */
.oj-hicontrast .oj-listview-card.oj-selected,
.oj-hicontrast .oj-listview-item.oj-selected,
.oj-hicontrast .oj-listview-group-item.oj-selected {
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  border-color: initial;
}

/* Styling for the list item elements in focus state when listview is in high contrast mode. */
.oj-hicontrast .oj-listview-card.oj-focus-highlight,
.oj-hicontrast .oj-listview-item.oj-focus-highlight,
.oj-hicontrast .oj-listview-group-item.oj-focus-highlight {
  outline-width: 2px;
  outline-style: dotted;
  border-width: 0 1px 1px 0;
  border-style: dotted;
}

/* Styling addition for group items */
.oj-listview-group-item {
  display: flex;
  align-items: center;
  min-height: var(--oj-collection-list-row-height);
  font-size: var(--oj-list-view-group-header-font-size);
  font-weight: var(--oj-list-view-group-header-font-weight);
  line-height: var(--oj-list-view-group-header-line-height);
  color: var(--oj-heading-text-color);
  padding: var(--oj-collection-list-cell-padding-vertical) var(--oj-list-view-item-padding-horizontal);
  border: 0 solid var(--oj-core-divider-color);
  background-color: var(--oj-list-view-group-header-bg-color);
  box-sizing: border-box;
}

/* Styling override for small group headers */
.oj-group-header-sm .oj-listview-group-item {
  font-size: var(--oj-typography-body-xs-font-size);
  color: var(--oj-core-text-color-secondary);
}

/* Styling override for large group headers */
.oj-group-header-lg .oj-listview-group-item {
  font-size: var(--oj-typography-heading-xs-font-size);
}

.oj-listview-item-element.oj-expanded .oj-listview-group-item,
.oj-listview-item-element.oj-collapsed .oj-listview-group-item {
  padding: 0;
}

/* Styling for group items when it has no children or in collapsed state */
.oj-listview-item-element.oj-collapsed .oj-listview-group-item,
.oj-listview-group-item.oj-empty {
  border-width: 0 0 1px;
}

/* Styling for group items when gridlines are visible on expanded and collapsed state */
.oj-listview:not(.oj-listview-gridlines-hidden) .oj-listview-group-item,
.oj-listview:not(.oj-listview-gridlines-hidden) .oj-listview-item-element.oj-expanded .oj-listview-group-item,
.oj-listview:not(.oj-listview-gridlines-hidden) .oj-listview-item-element.oj-collapsed .oj-listview-group-item {
  border-width: 1px 0 1px;
}

/* When the element is collapsed, remove the top border from the next item to avoid double border */
.oj-listview:not(.oj-listview-gridlines-hidden) .oj-listview-item-element.oj-collapsed + .oj-listview-item-element .oj-listview-group-item {
  border-top-color: transparent;
}

/* Styling for group item element that has focus */
.oj-listview-group-item .oj-focus,
.oj-listview-group-item .oj-selected {
  background-color: transparent;
  background-image: none;
}

/* Styling for group item element that is sticky */
.oj-listview-group-item.oj-sticky {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Styling for group item element that is pinned when scrolled (only applicable if position sticky is not supported) */
.oj-listview-group-item.oj-pinned {
  position: absolute;
  z-index: 1;
}

/* Styling for group item element that is stucked when scrolled */
.oj-listview-group-item.oj-stuck {
  background-color: var(--oj-list-view-group-header-bg-color-sticky);
  box-shadow: var(--oj-core-box-shadow-xs);
}

/* Remove borders on listview header when gridlines are visible in sticky mode */
.oj-listview:not(.oj-listview-gridlines-hidden) .oj-listview-group-item.oj-stuck {
  border-width: 0;
}

/* expand and collapse animation */
.oj-listview-collapsible-transition {
  overflow: hidden;
}

/* Styling on the status text, such as fetching data */
.oj-listview-status-message {
  position: absolute;
  padding: var(--oj-collection-list-cell-padding-vertical) var(--oj-list-view-item-padding-horizontal);
  display: none;
}

/* Styling for the container of custom no data content */
.oj-listview-no-data-container {
  width: 100%;
  height: 100%;
}

/* Styling for the empty list text */
.oj-listview-no-data-message {
  padding: var(--oj-collection-list-cell-padding-vertical) var(--oj-list-view-item-padding-horizontal);
  background-color: var(--oj-collection-bg-color);
  min-height: var(--oj-typography-body-md-font-size);
}

/* Alignment for the expand and collapse icons */
.oj-listview-expand-icon,
.oj-listview-collapse-icon {
  width: var(--oj-button-height);
  height: var(--oj-button-height);
  border-radius: var(--oj-button-border-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.375rem;
  text-decoration: none;
}

/* Overrides for expand/collapse icon in small group header */
.oj-group-header-sm .oj-listview-expand-icon,
.oj-group-header-sm .oj-listview-collapse-icon,
.oj-group-header-sm a:visited.oj-listview-expand-icon,
.oj-group-header-sm a:visited.oj-listview-collapse-icon {
  width: var(--oj-button-sm-height);
  height: var(--oj-button-sm-height);
  font-size: 1rem;
  color: var(--oj-core-text-color-secondary);
}

/* Styling for item when display mode is card */
.oj-listview-card {
  margin-top: var(--oj-panel-gutter);
  margin-inline-end: var(--oj-panel-gutter);
}

/* Styling for group item when display mode is card */
.oj-listview-card-group {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0 0 var(--oj-panel-gutter) 0;
}

/* Styling for group content when listview is filling the entire width and display mode is card */
.oj-listview.oj-listview-full-width > .oj-listview-element > li > .oj-listview-card-group,
.oj-listview.oj-full-width > .oj-listview-element > li > .oj-listview-card-group {
  padding-inline-start: var(--oj-panel-gutter);
  padding-inline-end: 0;
}

/* Styling for group item when card layout is used */
.oj-listview-card-layout .oj-listview-group {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--oj-panel-gutter);
}

/* Styling for item when card layout is used */
.oj-listview-card-layout li.oj-listview-item {
  width: 240px;
  height: auto;
  border: 1px solid var(--oj-panel-border-color);
  border-radius: var(--oj-panel-border-radius);
  margin-top: var(--oj-panel-gutter);
  margin-bottom: 0;
  margin-inline-start: 0;
  margin-inline-end: var(--oj-panel-gutter);
  background-size: 0;
  box-sizing: border-box;
  padding: var(--oj-collection-list-cell-padding-vertical) var(--oj-list-view-item-padding-horizontal);
}

/* Styling for group content when listview is filling the entire width and card layout is used */
/* for now, first level group header or no group headers only */
.oj-listview.oj-listview-full-width.oj-listview-card-layout > .oj-listview-element > li > .oj-listview-group,
.oj-listview.oj-full-width.oj-listview-card-layout > .oj-listview-element > li > .oj-listview-group,
.oj-listview.oj-listview-full-width > .oj-listview-card-layout > li > .oj-listview-group,
.oj-listview.oj-full-width > .oj-listview-card-layout > li > .oj-listview-group {
  margin-inline-start: var(--oj-panel-gutter);
  margin-inline-end: 0;
}

/* Styling for group header when listview is filling the entire width */
/* for now, first level group header only */
.oj-listview.oj-listview-full-width > .oj-listview-element > li > .oj-listview-group-item,
.oj-listview.oj-full-width > .oj-listview-element > li > .oj-listview-group-item {
  border-left-style: none;
  border-right-style: none;
}

/* Styling for the drill icon */
.oj-listview-drill-icon {
  display: flex;
  align-items: center;
  width: var(--oj-core-icon-size-lg);
  height: var(--oj-core-icon-size-lg);
  color: var(--oj-private-icon-color-default);
}

/* Styling for the drill icon when item has focus */
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-focus .oj-listview-drill-icon {
  color: var(--oj-private-icon-color-active);
}

/* Styling for the drill icon when hover over an item */
.oj-listview-item.oj-hover .oj-listview-drill-icon {
  color: var(--oj-private-icon-color-hover);
}

/* Styling for the container of the activity indicator for high watermark scrolling */
.oj-listview-card-layout li.oj-listview-loading-icon-container {
  width: 100%;
  border-style: none;
}

/* Styling for the affordance icon */
.oj-listview-drag-handle {
  cursor: grab;
  min-width: var(--oj-core-touch-target-min-size);
  min-height: var(--oj-core-touch-target-min-size);
}

/* Styling for the affordance icon when clicked on */
.oj-listview-drag-handle:active {
  cursor: grabbing;
  outline: none;
}

/* Styling for the affordance icon when card layout is used */
.oj-listview-card .oj-listview-drag-handle,
.oj-listview-card-layout .oj-listview-drag-handle {
  background-image: none;
  width: auto;
  height: auto;
  font-size: var(--oj-typography-body-md-font-size);
}

/* Styling for the pseudo class for drag handle */
.oj-listview-drag-handle:before {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--oj-core-touch-target-min-size);
}

/* Styling for the drag image */
.oj-listview-drag-image {
  background-color: transparent;
  position: absolute;
  top: -10000px;
  border: 1px solid transparent;
}

/* Styling for the drag image of an item */
.oj-listview-item-drag-image {
  background-color: var(--oj-collection-bg-color);
  opacity: 0.95;
}

/* Styling for hiding the original item being dragged */
.oj-listview-drag-item {
  display: none;
}

/* Styling item that is draggable (no affordance) */
.oj-listview-item.oj-draggable {
  cursor: grab;
}

/* Styling for the item that is being moved using drag */
.oj-listview-item.oj-drag {
  box-shadow: var(--oj-core-box-shadow-lg);
  border-top: 1px solid var(--oj-core-divider-color);
  border-bottom: 1px solid var(--oj-core-divider-color);
  border-radius: var(--oj-core-border-radius-lg);
}

/* Styling all drop targets in the list */
.oj-listview-item.oj-drop {
  background-color: transparent;
}

/* Styling for group item and on empty list as a drop target */
.oj-listview-group-item.oj-drop,
.oj-listview-empty-text.oj-drop {
  background-color: var(--oj-core-drag-drop-color-1);
}

/* Styling on drag source when dnd with another component */
.oj-listview-drag-source {
  opacity: 0.3;
}

/* Styling on drop target when dnd with another component */
.oj-listview-drop-target {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--oj-core-drag-drop-line-color);
}

/* Styling on drop target above the first item */
.oj-listview-first-drop-target {
  position: absolute;
  width: 100%;
  height: 10px;
  background-color: transparent;
}

/* Styling for an item that is cut during a context menu cut operation */
.oj-listview-cut {
  opacity: 0.8;
}

/* Styling for the placeholder item for the last item gridline */
.oj-listview-gridline-placeholder {
  background-image: linear-gradient(var(--oj-core-divider-color), var(--oj-core-divider-color));
  background-position: 0;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  height: 1px;
}

/* Styling for item layout */
.oj-listview-item-layout {
  display: flex;
  align-items: center;
  min-height: var(--oj-collection-list-row-height);
  box-sizing: border-box;
  padding: var(--oj-collection-list-cell-padding-vertical) var(--oj-list-view-item-padding-horizontal);
}

/* Styling for item content under item layout */
.oj-listview-item-layout > .oj-listview-cell-element {
  flex-grow: 1;
}

/* Styling to suppress default padding */
.oj-listview-item-padding-off .oj-listview-item-layout {
  padding: 0;
}

/* Styling for the items alignment on list header */
.oj-listview-group-item .oj-listview-cell-element {
  display: flex;
  align-items: center;
}

/* Styling for single line skeleton */
.oj-listview-skeleton-line-height {
  height: var(--oj-typography-body-md-font-size);
}

/* Styling for child skeleton container */
.oj-listview-child-skeleton {
  padding-inline-start: var(--oj-core-spacing-5x);
  padding-inline-end: 0;
}

/* Styling for skeleton card container */
.oj-listview-skeleton-card-group {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Styling for skeleton card */
.oj-listview-skeleton-card {
  width: 330px;
  height: 396px;
  border: 1px solid var(--oj-panel-border-color);
  border-radius: var(--oj-panel-border-radius);
  margin-top: var(--oj-panel-gutter);
  margin-bottom: 0;
  margin-inline-start: 0;
  margin-inline-end: var(--oj-panel-gutter);
  box-sizing: border-box;
  padding: var(--oj-core-spacing-4x);
  background-color: var(--oj-core-bg-color-content);
}

/* Styling for skeleton card content */
.oj-listview-skeleton-card-content {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Styling for the expand icon */
/* Styling for the collapse icon */
/* Styling for the affordance icon */
.oj-listview-drag-handle {
  background-image: none;
}

/* Styling for the drill down icon */
:root {
  --oj-color-palette-swatch-inner-border-color: rgb(var(--oj-palette-neutral-rgb-170));
  --oj-color-palette-swatch-outer-border-color-selected: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-color-palette-border-radius: 50%;
  --oj-color-palette-swatch-margin: 1px;
  --oj-color-palette-grid-font-size: var(--oj-typography-body-xs-font-size);
}

/* Color Palette */
/* --------------------------------------------------------------- */
oj-color-palette:not(.oj-complete) {
  visibility: hidden;
}

.oj-colorpalette {
  display: inline-block;
}

.oj-colorpalette-container {
  height: inherit;
  /* required by ListView for scrollbar */
}

.oj-colorpalette-swatch-entry {
  display: inline-block;
  line-height: 0;
}

.oj-colorpalette-list .oj-colorpalette-swatch-entry {
  display: flex;
  align-items: center;
  padding: 2px 0.5rem;
}

.oj-colorpalette-list .oj-colorpalette-swatch,
.oj-colorpalette-list .oj-colorpalette-swatch-text {
  flex-shrink: 0;
}

/* A palette color swatch  */
.oj-colorpalette-swatch-container,
.oj-colorpalette-swatch {
  vertical-align: middle;
  display: inline-block;
  border-style: solid;
  box-sizing: content-box;
}

.oj-colorpalette-swatch-container {
  border-width: 3px;
  border-color: transparent;
  /* reduce line height so extra small swatches remain square */
  line-height: 0;
  border-radius: var(--oj-color-palette-border-radius);
}

.oj-colorpalette-swatch {
  border-width: 1px;
  border-color: var(--oj-color-palette-swatch-inner-border-color);
  background-clip: padding-box;
  -webkit-print-color-adjust: exact;
  border-radius: var(--oj-color-palette-border-radius);
}

.oj-colorpalette-listview-full {
  width: 100%;
  height: 100%;
}

.oj-colorpalette-swatch-none-icon {
  /* Color Hardcoded because this value is not related to theming and regardless of theme the swatch for none will be white */
  background-color: #ffffff;
  display: inline-block;
  background-image: url("images/none.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  -webkit-print-color-adjust: exact;
  border-radius: var(--oj-color-palette-border-radius);
}

.oj-colorpalette-grid .oj-colorpalette-swatchsize-lg .oj-colorpalette-swatch,
.oj-colorpalette-grid .oj-colorpalette-swatchsize-lg.oj-colorpalette-swatch-showlabel .oj-colorpalette-swatch {
  width: 4.75rem;
  height: 4.75rem;
}

.oj-colorpalette-grid .oj-colorpalette-swatchsize-sm .oj-colorpalette-swatch {
  width: 2.125rem;
  height: 2.125rem;
}

.oj-colorpalette-grid .oj-colorpalette-swatchsize-xs .oj-colorpalette-swatch {
  width: 1.25rem;
  height: 1.25rem;
}

.oj-colorpalette-list .oj-colorpalette-swatchsize-sm .oj-colorpalette-swatch-container {
  border-radius: var(--oj-color-palette-border-radius);
}

.oj-colorpalette-list .oj-colorpalette-swatchsize-sm .oj-colorpalette-swatch {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--oj-color-palette-border-radius);
  border-color: var(--oj-color-palette-swatch-inner-border-color);
}

.oj-colorpalette-list .oj-colorpalette-swatchsize-lg .oj-colorpalette-swatch {
  width: 17.125rem;
  height: 1.375rem;
}

/*  Hover swatch  */
.oj-listview-item.oj-hover .oj-colorpalette-swatch-container {
  border-color: transparent;
}

/*  Selected swatch  */
.oj-colorpalette-grid .oj-selected .oj-colorpalette-swatch-container,
.oj-colorpalette-grid .oj-listview-item.oj-hover.oj-selected .oj-colorpalette-swatch-container {
  border-color: var(--oj-color-palette-swatch-outer-border-color-selected);
  border-width: 2px;
}

.oj-colorpalette-grid .oj-selected .oj-colorpalette-swatch,
.oj-colorpalette-grid .oj-listview-item.oj-hover.oj-selected .oj-colorpalette-swatch {
  border-color: white;
  border-width: 2px;
}

/*  Disabled swatch  */
.oj-listview.oj-disabled .oj-colorpalette-swatch-container,
.oj-listview.oj-disabled .oj-colorpalette-swatch,
.oj-listview.oj-disabled .oj-selected .oj-colorpalette-swatch-container,
.oj-listview.oj-disabled .oj-selected .oj-colorpalette-swatch,
.oj-listview.oj-disabled .oj-listview-item.oj-hover .oj-colorpalette-swatch-container,
.oj-listview.oj-disabled .oj-listview-item.oj-hover .oj-colorpalette-swatch,
.oj-listview.oj-disabled .oj-colorpalette-swatch-none .oj-colorpalette-swatch-none-icon {
  border-color: transparent;
}

.oj-listview.oj-disabled .oj-colorpalette-swatch-none .oj-colorpalette-swatch-none-icon {
  background-color: transparent;
  background-image: none;
}

.oj-colorpalette-swatch-text {
  display: block;
  text-align: center;
  color: var(--oj-core-text-color-primary);
  width: inherit;
  max-width: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oj-colorpalette-grid .oj-colorpalette-swatch-text {
  font-size: var(--oj-color-palette-grid-font-size);
  line-height: var(--oj-typography-body-xs-line-height);
}

.oj-colorpalette-list .oj-colorpalette-swatch-text {
  display: inline-block;
  line-height: var(--oj-typography-body-xs-line-height);
  font-size: var(--oj-color-palette-grid-font-size);
  margin-inline-start: 15px;
  max-width: 155px;
  vertical-align: middle;
}

/*  Constrain text width for ellipsis generation  */
.oj-colorpalette-grid .oj-colorpalette-swatchsize-lg .oj-colorpalette-swatch-text {
  width: 4.75rem;
  /* account for border of swatch container */
  padding-left: 3px;
  padding-right: 3px;
}

/*  Disabled  */
.oj-listview.oj-disabled .oj-colorpalette-swatch,
.oj-listview.oj-disabled .oj-colorpalette-swatch-text {
  color: var(--oj-core-text-color-disabled);
  cursor: default;
}

.oj-colorpalette-container .oj-listview-item {
  background-size: 0;
  /* required to remove selection listitem borders */
  background-image: none;
  padding: 0;
  border-width: 1px;
  cursor: pointer;
  min-height: auto;
}

.oj-colorpalette-grid li.oj-listview-item {
  width: auto;
  height: auto;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  border-radius: 0;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 0;
}

html:not([dir=rtl]) .oj-colorpalette-grid li.oj-listview-item {
  margin: var(--oj-color-palette-swatch-margin);
}

html[dir=rtl] .oj-colorpalette-grid li.oj-listview-item {
  margin: var(--oj-color-palette-swatch-margin);
}

.oj-colorpalette-container .oj-listview:not(.oj-listview-card-layout) .oj-colorpalette-grid .oj-listview-item.oj-selected,
.oj-colorpalette-container .oj-listview:not(.oj-listview-card-layout) .oj-colorpalette-grid .oj-listview-item.oj-selected + li.oj-listview-item {
  border-width: 0;
}

.oj-colorpalette-container .oj-listview-card-layout .oj-listview-group {
  margin-bottom: 0;
}

.oj-colorpalette-container .oj-listview-item.oj-focus-highlight::after {
  height: calc(100% - 2px);
}

/*  Remove listview item background and outline  */
.oj-colorpalette-container .oj-colorpalette-grid .oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected,
.oj-colorpalette-container .oj-colorpalette-grid .oj-listview-item.oj-selected {
  background-color: transparent;
  border-width: 0;
  outline-style: none;
}

/*  Remove listview top/bottom borders  */
.oj-colorpalette-container .oj-listview {
  border-style: none;
}

/*  Remove listview selection border  */
.oj-colorpalette-container .oj-listview-item.oj-selected {
  border-color: transparent;
}

.oj-colorpalette-list .oj-colorpalette-swatchsize-lg .oj-colorpalette-swatch-none-icon,
.oj-listview-cell-element .oj-colorpalette-swatch-container,
.oj-listview-cell-element .oj-colorpalette-swatch {
  border-radius: 0;
}

:root {
  --oj-slider-thumb-width: 1.25rem;
  --oj-slider-thumb-height: 1.25rem;
  --oj-slider-thumb-border-radius: var(--oj-core-border-radius-lg);
  --oj-slider-thumb-border-width: 2px;
  --oj-slider-thumb-bg-color: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-slider-thumb-border-color: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-slider-thumb-box-shadow: none;
  --oj-slider-thumb-bg-color-hover: rgb(var(--oj-palette-neutral-rgb-30));
  --oj-slider-thumb-box-shadow-hover: none;
  --oj-slider-thumb-bg-color-active: rgb(var(--oj-palette-neutral-rgb-40));
  --oj-slider-thumb-border-color-active: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-slider-thumb-box-shadow-active: none;
  --oj-slider-thumb-scale-active: 1;
  --oj-slider-thumb-bg-color-disabled: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-slider-thumb-border-color-disabled: var(--oj-core-text-color-disabled);
  --oj-slider-track-thickness: 2px;
  --oj-slider-track-bg-color: rgba(var(--oj-palette-neutral-rgb-170), 0.15);
  --oj-slider-value-bg-color: rgb(var(--oj-palette-neutral-rgb-180));
  --oj-slider-track-bg-color-disabled: var(--oj-core-color-disabled-2);
  --oj-slider-value-bg-color-disabled: var(--oj-core-text-color-disabled);
}

oj-slider:not(.oj-complete) {
  visibility: hidden;
}

.oj-slider {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html:not([dir=rtl]) .oj-slider {
  text-align: left;
}

html[dir=rtl] .oj-slider {
  text-align: right;
}

.oj-slider.oj-slider-horizontal {
  /* use a width of 100% and then max and min width so that when
     there's less room for the form control it can automatically
      get smaller instead of overflowing its boundaries */
  max-width: 100%;
  width: 100%;
}

.oj-form-control-full-width.oj-slider.oj-slider-horizontal,
.oj-form-control-full-width .oj-slider.oj-slider-horizontal {
  max-width: 100%;
}

.oj-slider.oj-slider-horizontal .oj-slider-container {
  /* This ensures that the slider bounding box will include
   the thumb radius - important for form controls. */
  margin: 0 calc(var(--oj-slider-thumb-width) / 2);
}

.oj-slider-vertical > .oj-slider-container {
  margin: calc(var(--oj-slider-thumb-width) / 2) 0;
}

.oj-slider-horizontal.oj-form-control .oj-slider-container {
  height: var(--oj-core-touch-target-min-size);
}

.oj-slider-vertical.oj-form-control .oj-slider-container {
  height: 150px;
  min-height: calc(var(--oj-slider-thumb-width) * 2);
  width: var(--oj-core-touch-target-min-size);
}

.oj-slider-container {
  position: relative;
}

.oj-slider-thumb {
  position: absolute;
  box-sizing: border-box;
  touch-action: none;
  background-color: var(--oj-slider-thumb-bg-color);
  border-radius: var(--oj-slider-thumb-border-radius);
  border: var(--oj-slider-thumb-border-width) solid var(--oj-slider-thumb-border-color);
  box-shadow: var(--oj-slider-thumb-box-shadow);
}

.oj-disabled .oj-slider-thumb {
  background-color: var(--oj-slider-thumb-bg-color-disabled);
  border-color: var(--oj-slider-thumb-border-color-disabled);
}

.oj-slider-range {
  position: absolute;
  border: 0;
  background-position: 0 0;
}

.oj-slider-bar {
  border-radius: var(--oj-slider-track-thickness);
  background-color: var(--oj-slider-track-bg-color);
  box-sizing: border-box;
  position: absolute;
}

.oj-slider-vertical .oj-slider-bar,
.oj-slider-vertical .oj-slider-bar-value {
  width: var(--oj-slider-track-thickness);
}

.oj-slider-vertical .oj-slider-bar {
  height: 100%;
}

.oj-slider-horizontal .oj-slider-bar {
  width: 100%;
}

.oj-slider-horizontal .oj-slider-bar,
.oj-slider-horizontal .oj-slider-bar-value {
  height: var(--oj-slider-track-thickness);
  margin-top: calc(var(--oj-slider-track-thickness) / -2);
  top: 50%;
}

.oj-slider-vertical .oj-slider-bar,
.oj-slider-vertical .oj-slider-bar-value {
  width: var(--oj-slider-track-thickness);
  margin-left: calc(var(--oj-slider-track-thickness) / -2);
  left: 50%;
}

.oj-slider-bar:after {
  content: "";
  position: absolute;
  top: calc(-18px + var(--oj-slider-track-thickness) / 2);
  bottom: calc(-18px + var(--oj-slider-track-thickness) / 2);
  left: calc(-18px + var(--oj-slider-track-thickness) / 2);
  right: calc(-18px + var(--oj-slider-track-thickness) / 2);
}

.oj-slider-bar-value {
  border-radius: var(--oj-slider-track-thickness);
  background: var(--oj-slider-value-bg-color);
}

.oj-hicontrast .oj-slider-bar,
.oj-hicontrast .oj-slider-bar-value {
  border: 1px solid;
}

.oj-hicontrast .oj-slider-horizontal .oj-slider-bar-value {
  margin-top: calc(var(--oj-slider-track-thickness) / -2 - 1px);
}

.oj-hicontrast .oj-slider-vertical .oj-slider-bar-value {
  margin-left: calc(var(--oj-slider-track-thickness) / -2 - 1px);
}

.oj-disabled .oj-slider-bar {
  background: var(--oj-slider-track-bg-color-disabled);
}

.oj-disabled .oj-slider-bar-value {
  background: var(--oj-slider-value-bg-color-disabled);
}

.oj-hicontrast .oj-disabled .oj-slider-bar,
.oj-hicontrast .oj-disabled .oj-slider-bar-value {
  border-style: dotted;
}

.oj-slider-horizontal .oj-slider-thumb {
  top: 50%;
  width: var(--oj-slider-thumb-width);
  height: var(--oj-slider-thumb-height);
  margin-top: calc(var(--oj-slider-thumb-height) / -2);
  margin-left: calc(var(--oj-slider-thumb-width) / -2);
  transition: transform 0.1s linear, box-shadow linear 0.1s;
}

html:not([dir=rtl]) .oj-slider-horizontal .oj-slider-range-min {
  left: 0;
}

html[dir=rtl] .oj-slider-horizontal .oj-slider-range-min {
  right: 0;
}

html:not([dir=rtl]) .oj-slider-horizontal .oj-slider-range-max {
  right: 0;
}

html[dir=rtl] .oj-slider-horizontal .oj-slider-range-max {
  left: 0;
}

.oj-slider-vertical .oj-slider-thumb {
  width: var(--oj-slider-thumb-height);
  height: var(--oj-slider-thumb-width);
  transition: box-shadow linear 0.1s;
  margin-bottom: calc(var(--oj-slider-thumb-width) / -2);
  margin-top: calc(var(--oj-slider-thumb-width) / -2);
}

html:not([dir=rtl]) .oj-slider-vertical .oj-slider-thumb {
  margin-left: calc(var(--oj-slider-thumb-height) / -2);
  left: 50%;
}

html[dir=rtl] .oj-slider-vertical .oj-slider-thumb {
  margin-right: calc(var(--oj-slider-thumb-height) / -2);
  right: 50%;
}

.oj-slider-vertical .oj-slider-range-min {
  bottom: 0;
}

.oj-slider-vertical .oj-slider-range-max {
  top: 0;
}

.oj-hicontrast .oj-slider-thumb.oj-focus {
  border: 3px solid;
}

.oj-hicontrast .oj-slider-thumb.oj-selected {
  border: 3px double;
}

.oj-hicontrast .oj-disabled .oj-slider-thumb {
  border: 1px dotted;
}

.oj-slider:not(.oj-disabled):not(.oj-slider-color-picker) .oj-slider-thumb:hover {
  background-color: var(--oj-slider-thumb-bg-color-hover);
  box-shadow: var(--oj-slider-thumb-box-shadow-hover);
  cursor: var(--oj-core-cursor-clickable);
}

.oj-slider:not(.oj-disabled):not(.oj-slider-color-picker) .oj-slider-thumb.oj-active {
  background-color: var(--oj-slider-thumb-bg-color-active);
  border-color: var(--oj-slider-thumb-border-color-active);
  box-shadow: var(--oj-slider-thumb-box-shadow-active);
  cursor: var(--oj-core-cursor-clickable);
  transform: scale(var(--oj-slider-thumb-scale-active));
}

.oj-slider-horizontal .oj-slider-thumb:after {
  content: "";
  position: absolute;
  top: calc((-28px - var(--oj-slider-thumb-height)) / -2);
  bottom: calc((-28px - var(--oj-slider-thumb-height)) / -2);
  left: calc((-28px - var(--oj-slider-thumb-width)) / -2);
  right: calc((-28px - var(--oj-slider-thumb-width)) / -2);
}

.oj-slider-vertical .oj-slider-thumb:after {
  content: "";
  position: absolute;
  top: calc((-28px - var(--oj-slider-thumb-width)) / -2);
  bottom: calc((-28px - var(--oj-slider-thumb-width)) / -2);
  left: calc((-28px - var(--oj-slider-thumb-height)) / -2);
  right: calc((-28px - var(--oj-slider-thumb-height)) / -2);
}

.oj-slider-thumb:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-slider-thumb:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

.oj-slider-color-picker.oj-slider-vertical > .oj-slider-container {
  margin: 0.75rem 0;
}

.oj-slider.oj-slider-horizontal .oj-slider-container {
  margin: 0 0.75rem;
}

.oj-slider-color-picker.oj-slider-vertical.oj-form-control .oj-slider-container {
  min-height: 2rem;
}

.oj-slider-color-picker .oj-slider-thumb,
.oj-warning .oj-slider-color-picker .oj-slider-thumb,
.oj-invalid .oj-slider-color-picker .oj-slider-thumb {
  background-color: transparent;
  border-radius: 1.0625rem;
  border: 2px solid #ffffff;
  box-shadow: 1px 1px 5px 0 rgba(var(--oj-core-box-shadow-rgb), 0.4);
}

.oj-disabled .oj-slider-color-picker .oj-slider-thumb {
  border: 2px solid var(--oj-slider-thumb-border-color-disabled);
}

.oj-slider-color-picker .oj-slider-bar {
  border-radius: 1rem;
}

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-bar,
.oj-slider-color-picker.oj-slider-horizontal .oj-slider-bar-value {
  height: 1rem;
  margin-top: -0.5rem;
}

.oj-slider-color-picker.oj-slider-vertical .oj-slider-bar,
.oj-slider-color-picker.oj-slider-vertical .oj-slider-bar-value {
  width: 1rem;
  margin-left: -0.5rem;
}

.oj-slider-color-picker .oj-slider-bar:after {
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
}

.oj-slider-color-picker .oj-slider-bar-value {
  border-radius: 1rem;
}

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
}

.oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-bottom: -0.5rem;
  margin-top: -0.5rem;
}

html:not([dir=rtl]) .oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb {
  margin-left: -0.5rem;
}

html[dir=rtl] .oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb {
  margin-right: -0.5rem;
}

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-thumb:after {
  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;
}

.oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb:after {
  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;
}

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-thumb,
.oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb {
  transition: transform 0.1s linear;
}

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-thumb.oj-active,
.oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb.oj-active {
  transform: scale(1.5);
}

.oj-slider-color-picker.oj-slider-horizontal .oj-slider-thumb.oj-active {
  margin-left: -0.5rem;
  margin-top: -0.5rem;
}

html:not([dir=rtl]) .oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-left: -0.5rem;
}

html[dir=rtl] .oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-right: -0.5rem;
}

.oj-slider-color-picker.oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-bottom: -0.5rem;
  margin-top: -0.5rem;
}

.oj-slider-color-picker .oj-slider-bar-value {
  display: none;
}

:root {
  --oj-color-spectrum-border-color: rgb(var(--oj-palette-neutral-rgb-50));
}

/* Color  Spectrum */
/* --------------------------------------------------------------- */
oj-color-spectrum:not(.oj-complete) {
  visibility: hidden;
}

.oj-colorspectrum {
  display: inline-block;
  position: relative;
}

/*  The spectrum rectangle containing the saturation/luminosity spectrum for the hue */
.oj-colorspectrum-spectrum {
  width: 13.75rem;
  height: 13.75rem;
  border-color: var(--oj-color-spectrum-border-color);
  margin: 0.75rem 0.75rem 0;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
}

.oj-colorspectrum-container {
  white-space: nowrap;
}

.oj-colorspectrum-container > .oj-slider-vertical {
  display: inline-block;
  vertical-align: top;
}

/*  Horizontal opacity slider  */
.oj-colorspectrum-container > .oj-slider-horizontal {
  display: block;
}

/*  Horizontal opacity slider  - length  */
.oj-colorspectrum-container > .oj-slider-horizontal > .oj-slider-container {
  width: 13.75rem;
}

/*  Vertical Hue slider  - height  */
.oj-colorspectrum-container > .oj-slider-vertical > .oj-slider-container {
  height: 13.75rem;
}

/*  Remove bottom margins from sliders  */
html .oj-colorspectrum-container .oj-form-control {
  margin-bottom: 0;
}

/*  Spectrum thumb   */
.oj-colorspectrum-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border-width: 2px;
  border-color: #ffffff;
  box-shadow: 1px 1px 5px 0 rgba(var(--oj-core-box-shadow-rgb), 0.4);
  border-style: solid;
  background-color: transparent;
  cursor: pointer;
  box-sizing: border-box;
  position: absolute;
}

.oj-colorspectrum-thumb:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-colorspectrum.oj-disabled .oj-colorspectrum-thumb {
  border-color: var(--oj-slider-thumb-border-color-disabled);
}

.oj-colorspectrum-alpha-bg {
  background-image: url("images/spectrum-opacity-slider-bg.png");
  position: absolute;
  height: 0;
  width: 0;
  display: none;
}

/* --------------------------------------------------------------- */
/* highlight-text */
/* --------------------------------------------------------------- */
oj-highlight-text:not(.oj-complete) {
  visibility: hidden;
}

.oj-highlighttext {
  display: inline;
}

/*
     * Applied to the matching text
     */
.oj-highlighttext-highlighter,
.oj-listbox-highlighter {
  font-weight: bold;
}

/* listbox */
/* --------------------------------------------------------------- */
/*
     * applied to the dropdown
     */
/* defines the stacking context for the listbox */
.oj-listbox-drop-layer {
  z-index: var(--oj-core-z-index-popup);
}

.oj-listbox-drop {
  box-sizing: border-box;
  top: 100%;
  background: var(--oj-popup-bg-color);
  border: 1px solid var(--oj-popup-border-color);
  border-radius: var(--oj-core-border-radius-md);
  box-shadow: var(--oj-core-dropdown-box-shadow);
}

.oj-listbox-drop.oj-listbox-searchselect,
.oj-listbox-drop.oj-listbox-inputsearch {
  display: flex;
  flex-direction: column;
}

.oj-listbox-drop.oj-listbox-fullscreen {
  position: fixed;
}

.oj-listbox-searchselect-no-results:not(.oj-listbox-fullscreen) {
  border: none;
}

/*
     * applied to the dropdown when it is open above the component
     */
.oj-listbox-drop-above {
  margin-top: -1px;
}

/*
     * applied to placeholder in the dropdown
     */
.oj-listbox-placeholder {
  color: var(--oj-text-field-placeholder-color);
}

/*
     * Base class for results, shared by oj-listbox-results and oj-select-results (for
     * oj-select-single).  oj-select-single cannot directly reuse oj-listbox-results itself
     * because that interferes with collection styling, such as by hiding the selected item.
     */
.oj-listbox-results-base,
.oj-listbox-results,
.oj-select-results {
  padding: 0;
  margin: 1px 0 2px 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  max-height: 400px;
}

/*
     * applied to results
     */
.oj-listbox-results {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  box-sizing: border-box;
}

.oj-listbox-results.oj-loading {
  display: none;
}

/*
     * applied to nested option groups
     */
.oj-listbox-result-sub {
  margin: 0;
  padding: 0;
}

/*
     * applied to result labels
     */
.oj-listbox-result-label {
  margin: 0;
  word-break: break-word;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.oj-listbox-results .oj-listbox-result-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-grow: 1;
  line-height: calc(var(--oj-collection-list-row-height) - 2 * var(--oj-collection-list-cell-padding-vertical));
}

/* Styling for single line skeleton */
.oj-listbox-skeleton-line-height {
  height: var(--oj-typography-body-md-font-size);
}

/*
     * applied to result labels in different nested levels of option groups.
     * Padding is used instead of margins because the background color for states
     * like hover need to span across the entire box.
     */
html:not([dir=rtl]) .oj-listbox-results-depth-1 > .oj-listbox-result-label {
  padding-left: calc(1rem + var(--oj-listbox-item-padding-horizontal));
}

html[dir=rtl] .oj-listbox-results-depth-1 > .oj-listbox-result-label {
  padding-right: calc(1rem + var(--oj-listbox-item-padding-horizontal));
}

html:not([dir=rtl]) .oj-listbox-results-depth-2 > .oj-listbox-result-label {
  padding-left: calc(2rem + var(--oj-listbox-item-padding-horizontal));
}

html[dir=rtl] .oj-listbox-results-depth-2 > .oj-listbox-result-label {
  padding-right: calc(2rem + var(--oj-listbox-item-padding-horizontal));
}

html:not([dir=rtl]) .oj-listbox-results-depth-3 > .oj-listbox-result-label {
  padding-left: calc(3rem + var(--oj-listbox-item-padding-horizontal));
}

html[dir=rtl] .oj-listbox-results-depth-3 > .oj-listbox-result-label {
  padding-right: calc(3rem + var(--oj-listbox-item-padding-horizontal));
}

html:not([dir=rtl]) .oj-listbox-results-depth-4 > .oj-listbox-result-label {
  padding-left: calc(4rem + var(--oj-listbox-item-padding-horizontal));
}

html[dir=rtl] .oj-listbox-results-depth-4 > .oj-listbox-result-label {
  padding-right: calc(4rem + var(--oj-listbox-item-padding-horizontal));
}

html:not([dir=rtl]) .oj-listbox-results-depth-5 > .oj-listbox-result-label {
  padding-left: calc(5rem + var(--oj-listbox-item-padding-horizontal));
}

html[dir=rtl] .oj-listbox-results-depth-5 > .oj-listbox-result-label {
  padding-right: calc(5rem + var(--oj-listbox-item-padding-horizontal));
}

html:not([dir=rtl]) .oj-listbox-results-depth-6 > .oj-listbox-result-label {
  padding-left: calc(6rem + var(--oj-listbox-item-padding-horizontal));
}

html[dir=rtl] .oj-listbox-results-depth-6 > .oj-listbox-result-label {
  padding-right: calc(6rem + var(--oj-listbox-item-padding-horizontal));
}

html:not([dir=rtl]) .oj-listbox-results-depth-7 > .oj-listbox-result-label {
  padding-left: calc(7rem + var(--oj-listbox-item-padding-horizontal));
}

html[dir=rtl] .oj-listbox-results-depth-7 > .oj-listbox-result-label {
  padding-right: calc(7rem + var(--oj-listbox-item-padding-horizontal));
}

/*
     * applied to the nested option group labels,
     * they are direct children of li.oj-listbox-result-with-children
     */
.oj-listbox-result-with-children > .oj-listbox-result-label {
  font-weight: bold;
}

/*
     * applied to choices in the dropdown
     */
.oj-listbox-results li {
  list-style: none;
  display: list-item;
  background-image: none;
  box-sizing: border-box;
  min-height: var(--oj-collection-list-row-height);
  padding: var(--oj-collection-list-cell-padding-vertical) var(--oj-listbox-item-padding-horizontal);
}

/*
     * applied to the hovered choices in the dropdown
     */
.oj-listbox-drop:not(.oj-listbox-hide-hover) .oj-listbox-results .oj-hover {
  background: var(--oj-core-bg-color-hover);
}

/*
     * applied to the focused choice in the dropdown
     */
.oj-listbox-drop:not(.oj-listbox-hide-focus) .oj-listbox-results .oj-listbox-result.oj-focus {
  background: var(--oj-core-bg-color-hover);
}

/*
   * applied to keyboard focused choice in the dropdown
   */
.oj-listbox-result.oj-focus-highlight {
  outline: dotted 1px var(--oj-core-focus-border-color);
}

/*
     * applied to disabled choices in the dropdown
     */
.oj-listbox-results .oj-disabled {
  color: var(--oj-core-text-color-disabled);
  display: list-item;
  cursor: default;
}

/*
     * applied to selected choice in the dropdown
     */
.oj-listbox-results .oj-selected {
  display: none;
}

/*
     * This class is only applied transiently to measure the browser native scollbar
     */
.oj-listbox-measure-scrollbar {
  position: absolute;
  top: -10000px;
  width: 100px;
  height: 100px;
  overflow: scroll;
}

html:not([dir=rtl]) .oj-listbox-measure-scrollbar {
  left: -10000px;
}

html[dir=rtl] .oj-listbox-measure-scrollbar {
  right: -10000px;
}

/*
   * Used to cover the border bottom of the select box when the dropdown is open
   */
.oj-listbox-search-wrapper {
  border: 0;
  padding: var(--oj-collection-list-cell-padding-vertical) var(--oj-listbox-item-padding-horizontal);
  background-color: var(--oj-text-field-bg-color);
}

/**
   * Applied to the wrapper container of the loading indicator in the dropdown for the
   * ojselectcombobox components.
   */
.oj-listbox-loader-wrapper {
  display: flex;
  justify-content: center;
}

.oj-listbox-loading-progress-circle {
  margin: 0.5rem 0;
}

/*
     * Applied to the "No matches found" result entry
     */
html:not([dir=rtl]) .oj-listbox-no-results {
  padding-left: var(--oj-text-field-text-to-edge-padding);
}

html[dir=rtl] .oj-listbox-no-results {
  padding-right: var(--oj-text-field-text-to-edge-padding);
}

/*
     * Applied to the filter message container
     */
.oj-listbox-filter-message-box {
  padding-left: var(--oj-text-field-text-to-edge-padding);
  padding-right: var(--oj-text-field-text-to-edge-padding);
}

/*
     * Applied to the filter message text
     */
.oj-listbox-filter-message-text {
  color: var(--oj-core-text-color-secondary);
  font-size: var(--oj-typography-body-sm-font-size);
  line-height: var(--oj-typography-body-sm-line-height);
  padding-top: var(--oj-collection-list-cell-padding-vertical);
  padding-bottom: var(--oj-collection-list-cell-padding-vertical);
}

/*
     * Applied to the filter message separator
     */
.oj-listbox-filter-message-separator {
  border-bottom: 1px solid var(--oj-popup-border-color);
}

/*
     * Applied to the data fetching indicator container
     */
.oj-listbox-loading-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  border-style: none;
}

.oj-hicontrast .oj-listbox-results .oj-hover {
  border: 1px solid var(--oj-text-field-border-color);
}

.oj-hicontrast .oj-listbox-results .oj-disabled {
  border: 1px dotted var(--oj-text-field-border-color);
}

/*
     * Applied to the listbox results if it has custonm header.
     */
.oj-listbox-results-with-header {
  padding: 0;
  margin: 0;
}

/*
     * Applied to the listbox custom header options.
     */
.oj-listbox-results-with-header li {
  background-image: none;
  list-style: outside none none;
}

/*
     * Applied to the listbox custonm header.
     */
.oj-listbox-result-header {
  padding: var(--oj-collection-list-cell-padding-vertical) var(--oj-listbox-item-padding-horizontal) 0 var(--oj-listbox-item-padding-horizontal);
}

.oj-listbox-result-header ul {
  padding: 0;
}

.oj-listbox-result-header a.oj-focus {
  text-decoration: underline;
  outline: dotted 1px var(--oj-button-solid-chrome-text-color);
  outline-offset: 1px;
}

/*
     * Applied to the matching text in the dropdown options
     */
.oj-form-control-inherit:not(.oj-form-control-default) .oj-listbox-input {
  color: inherit;
  height: 100%;
  width: 100%;
  background-color: transparent;
  border-width: 0;
}

html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-listbox-input {
  text-align: inherit;
}

html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-listbox-input {
  text-align: inherit;
}

:root {
  --oj-listbox-item-padding-horizontal: var(--oj-text-field-text-to-edge-padding);
}

/* combobox */
/* --------------------------------------------------------------- */
oj-combobox:not(.oj-complete) {
  visibility: hidden;
}

.oj-combobox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  font-size: var(--oj-text-field-font-size);
  width: 100%;
}

@media screen and (max-width: 599.9px) {
  .oj-combobox {
    -webkit-text-size-adjust: var(--oj-private-text-field-font-size-adjust);
  }
}
.oj-form-control-full-width.oj-combobox,
.oj-form-control-full-width .oj-combobox {
  max-width: 100%;
}

/**
   * Styling for loading state
   */
.oj-combobox.oj-loading .oj-combobox-arrow,
.oj-combobox.oj-loading .oj-combobox-divider {
  display: none;
}

/* single-select */
/*
     * Applied to the single-select box which includes the input field and the dropdown open icon
     */
.oj-combobox-choice {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  padding-inline-start: var(--oj-text-field-text-to-edge-padding);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  outline: 0;
  white-space: nowrap;
  background-clip: padding-box;
  height: 100%;
}

.oj-combobox-choice::placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

.oj-text-field.oj-combobox-multi .oj-text-field-container {
  height: auto;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field.oj-combobox-multi .oj-text-field-container {
  display: flex;
}

.oj-text-field.oj-read-only.oj-combobox-multi .oj-text-field-container {
  display: block;
}

/*
     * Applied to the input field
     */
.oj-combobox-input {
  flex: 1;
  width: 1em;
  min-width: 1em;
  border: 0;
  outline: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  background-color: transparent;
  color: var(--oj-text-field-text-color);
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  font-weight: inherit;
  box-shadow: none;
}

@media screen and (max-width: 599.9px) {
  .oj-combobox-input {
    -webkit-text-size-adjust: var(--oj-private-text-field-font-size-adjust);
  }
}
.oj-combobox-input:-ms-input-placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

.oj-combobox-input::placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

/* Styling for readonly mode */
.oj-combobox.oj-read-only .oj-combobox-choice,
.oj-combobox.oj-read-only .oj-combobox-choices {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  min-height: calc(var(--oj-typography-body-md-line-height) * var(--oj-typography-body-md-font-size));
}

.oj-form-layout .oj-form.oj-enabled .oj-combobox.oj-read-only .oj-combobox-choices {
  padding-left: var(--oj-text-field-text-to-edge-padding);
  padding-right: var(--oj-text-field-text-to-edge-padding);
}

/* apply to the selected entries */
.oj-combobox.oj-read-only .oj-combobox-input,
.oj-combobox.oj-read-only .oj-combobox-selected-choice {
  outline: none;
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  color: var(--oj-core-text-color-primary);
  padding-left: 0;
  padding-right: 0;
  line-height: var(--oj-typography-body-md-line-height);
}

.oj-combobox.oj-read-only .oj-combobox-selected-choice {
  display: inherit;
  margin-top: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}

.oj-combobox.oj-read-only .oj-combobox-choices:focus::after {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: -1px;
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.oj-combobox.oj-read-only .oj-combobox-choices:focus {
  outline: none;
}

/* apply to the first selected entry in readonly mode */
.oj-combobox.oj-read-only li.oj-combobox-selected-choice:first-child {
  padding-inline-start: 0;
}

/* don't show dropdown trigger */
.oj-combobox.oj-read-only .oj-combobox-arrow,
.oj-combobox.oj-read-only .oj-combobox-divider {
  display: none;
}

/* don't show clear entry trigger and search field button */
.oj-combobox.oj-read-only .oj-combobox-clear-entry,
.oj-combobox.oj-read-only .oj-combobox-search-field {
  display: none;
}

/* Default options*/
.oj-combobox-option-defaults {
  font-family: '{"loadingIndicatorDelay":"50"}' !important;
}

/* Styling for text-align */
.oj-form-control-text-align-right.oj-combobox .oj-combobox-input {
  text-align: right;
}

.oj-form-control-text-align-start.oj-combobox .oj-combobox-input {
  text-align: start;
}

.oj-form-control-text-align-end.oj-combobox .oj-combobox-input {
  text-align: end;
}

.oj-form-control-text-align-right.oj-combobox .oj-combobox-choices li {
  float: right;
}

.oj-form-control-text-align-start.oj-combobox .oj-combobox-choices li {
  float: left;
}

html[dir=rtl] .oj-form-control-text-align-start.oj-combobox .oj-combobox-choices li {
  float: right;
}

.oj-form-control-text-align-end.oj-combobox .oj-combobox-choices li {
  float: right;
}

html[dir=rtl] .oj-form-control-text-align-end.oj-combobox .oj-combobox-choices li {
  float: left;
}

.oj-form-control-text-align-right .oj-combobox-selected-choice,
.oj-form-control-text-align-end .oj-combobox-selected-choice {
  margin-top: 5px;
  margin-inline-end: 0;
  margin-bottom: 0;
  margin-inline-start: 6px;
}

/*
     * Applied to the single-select drop down arrow
     */
.oj-combobox-arrow:hover,
.oj-combobox-arrow:focus {
  text-decoration: none;
}

/*
     * Applied to the divider between the input and drop down arrow
     */
.oj-combobox-divider {
  box-sizing: border-box;
  display: inline-flex;
  border-left: solid 1px var(--oj-text-field-border-color);
  margin-inline-start: var(--oj-text-field-text-to-edge-padding);
  height: 80%;
  vertical-align: middle;
}

/* multi-select */
/*
     * Applied to the multi-select box which includes the input field and the selected choices
     */
.oj-combobox-choices {
  box-sizing: border-box;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  min-height: var(--oj-text-field-height);
  padding-left: var(--oj-text-field-text-to-edge-padding);
  padding-right: var(--oj-text-field-text-to-edge-padding);
  padding-bottom: 5px;
  height: auto;
  margin: 0;
  position: relative;
  cursor: text;
  overflow: hidden;
  width: 100%;
}

.oj-combobox-choices::placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

/*
     * Applied to the multi-select box list items which include the search field and the selected choices
     */
.oj-combobox-choices li {
  list-style: none;
}

html:not([dir=rtl]) .oj-combobox-choices li {
  float: left;
}

html[dir=rtl] .oj-combobox-choices li {
  float: right;
}

/*
     * Applied to the multi-select search field which is an li to wrap the input
     */
.oj-combobox-search-field {
  margin-top: 5px;
  padding: 0;
  white-space: nowrap;
  line-height: calc(var(--oj-text-field-height) * 0.8);
}

/*
     * Applied to the multi-select selected choice
     */
.oj-combobox-selected-choice {
  line-height: 1.9rem;
  display: flex;
  align-items: center;
  cursor: default;
  border-radius: var(--oj-button-border-radius);
  border: 1px solid var(--oj-button-outlined-chrome-border-color);
  color: var(--oj-button-outlined-chrome-text-color);
  background-clip: padding-box;
  padding-top: 0;
  padding-inline-end: 4px;
  padding-bottom: 0;
  padding-inline-start: 6px;
  margin-top: 5px;
  margin-inline-end: 6px;
  margin-bottom: 0;
  margin-inline-start: 0;
}

/*
     * Applied to the multi-select selected choice when getting focus
     */
.oj-combobox-selected-choice.oj-focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

/*
     * Applied to the multi-select selected choice when disabled
     */
.oj-combobox.oj-disabled .oj-combobox-selected-choice {
  padding: 0 0.375rem 0 0.375rem;
}

/*
     * Applied to the label of the selected choice
     */
.oj-combobox-selected-choice-label,
.oj-combobox-selected-choice-separator {
  display: inline-block;
  vertical-align: middle;
  word-break: break-word;
}

/*
     * Applied to the clear entry field of the selected choice
     */
.oj-combobox-clear-entry {
  display: inline-block;
  outline: none;
  text-align: center;
  vertical-align: middle;
  line-height: 100%;
  margin-inline-start: 3px;
}

/* end multiselect */
/*
     * Invalid styling for the widget
     */
.oj-combobox.oj-invalid .oj-combobox-choice,
.oj-combobox-multi.oj-invalid .oj-combobox-choices,
.oj-combobox.oj-warning .oj-combobox-choice,
.oj-combobox-multi.oj-warning .oj-combobox-choices {
  border: 0;
  border-width: 0;
  border-style: none;
}

/*
     * Disabled styles for single-select
     */
.oj-combobox.oj-disabled .oj-combobox-choice,
.oj-combobox.oj-disabled input {
  color: var(--oj-text-field-text-color-disabled);
  border-color: var(--oj-text-field-border-color-disabled);
}

.oj-combobox.oj-disabled input {
  border: 0;
}

.oj-combobox.oj-disabled .oj-combobox-arrow {
  cursor: default;
}

.oj-combobox.oj-disabled .oj-combobox-divider {
  border-color: var(--oj-text-field-border-color-disabled);
}

/*
     * Disabled styles for multi-select
     */
.oj-combobox-multi.oj-disabled .oj-combobox-choices,
.oj-combobox-multi.oj-disabled .oj-combobox-selected-choice,
.oj-combobox-multi.oj-disabled .oj-combobox-selected-choice.oj-focus,
.oj-combobox-multi.oj-disabled input {
  color: var(--oj-text-field-text-color-disabled);
  border-color: var(--oj-text-field-border-color-disabled);
  outline: 0;
}

.oj-combobox-multi.oj-disabled input {
  border: 0;
}

.oj-combobox-multi.oj-disabled .oj-combobox-clear-entry {
  display: none;
  background: none;
}

/*
     * Styling for focus state
     */
.oj-combobox:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-combobox-choice,
.oj-combobox:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-combobox-choices {
  border-color: var(--oj-text-field-border-color-focus);
}

.oj-combobox:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-combobox-choice {
  padding-bottom: 0;
}

.oj-combobox:not(.oj-disabled):not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-combobox-choices {
  padding-bottom: 5px;
}

/* icon */
/* -----------------------------*/
/*
     * Applied to the clear entry icon
     */
.oj-combobox-clear-entry-icon {
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

/* icon */
/* -----------------------------*/
/*
     * Applied to the single-select drop down open icon
     */
/* clear entry icon for combobox */
.oj-combobox .oj-button {
  margin-bottom: 0;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox-input {
  color: inherit;
  height: 100%;
  width: 100%;
  border-width: 0;
}

html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox-input {
  text-align: inherit;
}

html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox-input {
  text-align: inherit;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox:not(.oj-disabled) .oj-combobox-choice,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox:not(.oj-disabled) .oj-combobox-choices,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox-input {
  background-color: transparent;
}

.oj-text-field-label-inside .oj-combobox-choice {
  background-color: transparent;
  width: 100%;
  border-width: 0;
  min-height: var(--oj-text-field-inside-edge-height);
  padding: 0;
}

.oj-text-field-label-inside .oj-combobox-input {
  padding: var(--oj-text-field-inside-edge-padding-top) var(--oj-text-field-text-to-edge-padding) 0;
}

.oj-text-field-label-inside:not(.oj-read-only) .oj-combobox-choices {
  border-width: 0;
  padding: var(--oj-text-field-inside-edge-padding-top) var(--oj-text-field-text-to-edge-padding) 5px;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-read-only .oj-combobox-choices {
  padding: var(--oj-text-field-inside-edge-padding-top) var(--oj-text-field-text-to-edge-padding) 5px;
}

.oj-text-field-label-inside.oj-read-only .oj-combobox-choices {
  padding: 0;
}

.oj-text-field-label-inside .oj-combobox-choices .oj-combobox-input {
  padding: 0 5px;
}

.oj-text-field-label-inside .oj-combobox-choice.oj-hover,
.oj-text-field-label-inside .oj-combobox-choices.oj-hover {
  background-color: transparent;
}

.oj-text-field-label-inside.oj-combobox.oj-disabled .oj-form-control-container {
  background-color: var(--oj-text-field-bg-color-disabled);
}

.oj-text-field-label-inside .oj-combobox-selected-choice {
  margin-top: 10px;
  margin-inline-end: 6px;
  margin-bottom: 0;
  margin-inline-start: 0;
}

.oj-text-field-label-inside.oj-read-only .oj-combobox-selected-choice {
  margin-top: 0;
  margin-inline-end: 6px;
  margin-bottom: 0;
  margin-inline-start: 0;
}

.oj-text-field-label-inside.oj-combobox.oj-invalid .oj-form-control-container .oj-label,
.oj-text-field-label-inside.oj-combobox-many.oj-invalid .oj-form-control-container .oj-label {
  color: var(--oj-text-field-inside-edge-label-color-error);
}

.oj-text-field-label-inside .oj-combobox-label {
  align-self: flex-start;
}

.oj-combobox-selected-choice > .oj-component-icon, .oj-combobox-selected-choice > .oj-popup-tail.oj-popup-tail-simple,
.oj-combobox-selected-choice > .oj-menucheckbox-icon {
  font-size: 1rem;
}

:root {
  --oj-conveyor-belt-box-shadow-width: 0.25rem;
  --oj-private-conveyor-belt-global-arrow-visibility-default: auto;
}

/* conveyorbelt */
/* --------------------------------------------------------------- */
oj-conveyor-belt:not(.oj-complete) {
  visibility: hidden;
}

oj-conveyor-belt {
  display: block;
}

.oj-conveyorbelt {
  position: relative;
}

.oj-conveyorbelt,
.oj-conveyorbelt-overflow-container,
.oj-conveyorbelt-content-container {
  display: flex;
  align-items: center;
}

.oj-conveyorbelt-content-container,
.oj-conveyorbelt-overflow-container {
  height: 100%;
}

.oj-conveyorbelt.oj-conveyorbelt-vertical .oj-conveyorbelt-content-container {
  height: auto;
}

.oj-conveyorbelt.oj-conveyorbelt-vertical {
  display: inline-flex;
}

.oj-conveyorbelt.oj-conveyorbelt-vertical,
.oj-conveyorbelt.oj-conveyorbelt-vertical > .oj-conveyorbelt-overflow-container,
.oj-conveyorbelt.oj-conveyorbelt-vertical > .oj-conveyorbelt-overflow-container > .oj-conveyorbelt-content-container {
  flex-direction: column;
}

.oj-conveyorbelt-overflow-container {
  overflow: hidden;
  flex: 1 1 auto;
}

.oj-conveyorbelt-content-container {
  position: relative;
  flex: 1 0 auto;
}

.oj-conveyorbelt-item {
  flex: 0 0 auto;
}

.oj-conveyorbelt-item.oj-navigationlist,
.oj-conveyorbelt-item.oj-tabbar {
  flex: 1 0 auto;
}

/* overflow indicators */
.oj-conveyorbelt-overflow-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--oj-button-height);
  min-height: var(--oj-button-height);
  line-height: var(--oj-button-height);
  text-align: center;
  border: 1px solid;
  flex: 0 0 auto;
  position: relative;
}

html:not([dir=rtl]) .oj-conveyorbelt-overflow-indicator.oj-start {
  box-shadow: var(--oj-conveyor-belt-box-shadow-width) 0 var(--oj-conveyor-belt-box-shadow-width) calc(var(--oj-conveyor-belt-box-shadow-width) * -1) rgba(var(--oj-core-box-shadow-rgb), 0.2);
  margin: 0 var(--oj-conveyor-belt-box-shadow-width) 0 0;
}

html[dir=rtl] .oj-conveyorbelt-overflow-indicator.oj-start {
  box-shadow: calc(var(--oj-conveyor-belt-box-shadow-width) * -1) 0 var(--oj-conveyor-belt-box-shadow-width) calc(var(--oj-conveyor-belt-box-shadow-width) * -1) rgba(var(--oj-core-box-shadow-rgb), 0.2);
  margin: 0 0 0 var(--oj-conveyor-belt-box-shadow-width);
}

html:not([dir=rtl]) .oj-conveyorbelt-overflow-indicator.oj-end {
  box-shadow: calc(var(--oj-conveyor-belt-box-shadow-width) * -1) 0 var(--oj-conveyor-belt-box-shadow-width) calc(var(--oj-conveyor-belt-box-shadow-width) * -1) rgba(var(--oj-core-box-shadow-rgb), 0.2);
  margin: 0 0 0 var(--oj-conveyor-belt-box-shadow-width);
}

html[dir=rtl] .oj-conveyorbelt-overflow-indicator.oj-end {
  box-shadow: var(--oj-conveyor-belt-box-shadow-width) 0 var(--oj-conveyor-belt-box-shadow-width) calc(var(--oj-conveyor-belt-box-shadow-width) * -1) rgba(var(--oj-core-box-shadow-rgb), 0.2);
  margin: 0 var(--oj-conveyor-belt-box-shadow-width) 0 0;
}

.oj-conveyorbelt-overflow-indicator.oj-top {
  margin: 0 0 var(--oj-conveyor-belt-box-shadow-width) 0;
  box-shadow: 0 var(--oj-conveyor-belt-box-shadow-width) var(--oj-conveyor-belt-box-shadow-width) calc(var(--oj-conveyor-belt-box-shadow-width) * -1) rgba(var(--oj-core-box-shadow-rgb), 0.2);
}

.oj-conveyorbelt-overflow-indicator.oj-bottom {
  margin: var(--oj-conveyor-belt-box-shadow-width) 0 0 0;
  box-shadow: 0 calc(var(--oj-conveyor-belt-box-shadow-width) * -1) var(--oj-conveyor-belt-box-shadow-width) calc(var(--oj-conveyor-belt-box-shadow-width) * -1) rgba(var(--oj-core-box-shadow-rgb), 0.2);
}

.oj-conveyorbelt-overflow-indicator.oj-default {
  border-color: transparent;
}

.oj-conveyorbelt-overflow-indicator.oj-hover {
  border-color: transparent;
}

.oj-conveyorbelt-overflow-indicator.oj-active,
.oj-conveyorbelt-overflow-indicator.oj-active.oj-hover {
  border-color: transparent;
}

.oj-conveyorbelt-overflow-button {
  height: var(--oj-button-height);
  width: var(--oj-button-height);
  cursor: var(--oj-core-cursor-clickable);
  border-radius: var(--oj-button-border-radius);
  border-color: var(--oj-button-borderless-chrome-border-color-hover);
}

.oj-conveyorbelt-overflow-indicator.oj-hover .oj-conveyorbelt-overflow-button,
.oj-conveyorbelt-overflow-button:hover {
  background-color: var(--oj-button-borderless-chrome-bg-color-hover);
  border-color: var(--oj-button-borderless-chrome-border-color-hover);
}

.oj-conveyorbelt-overflow-indicator.oj-active .oj-conveyorbelt-overflow-button,
.oj-conveyorbelt-overflow-indicator.oj-active.oj-hover .oj-conveyorbelt-overflow-button {
  background-color: var(--oj-button-borderless-chrome-bg-color-active);
  border-color: var(--oj-button-borderless-chrome-border-color-active);
}

/* overflow icons */
.oj-conveyorbelt-overflow-indicator .oj-conveyorbelt-overflow-icon {
  cursor: inherit;
  vertical-align: middle;
  margin-bottom: 3px;
}

.oj-conveyorbelt-overflow-indicator.oj-default .oj-conveyorbelt-overflow-icon {
  color: var(--oj-button-borderless-chrome-text-color);
}

.oj-conveyorbelt-overflow-indicator.oj-hover .oj-conveyorbelt-overflow-icon {
  color: var(--oj-button-borderless-chrome-text-color-hover);
}

.oj-conveyorbelt-overflow-indicator.oj-active .oj-conveyorbelt-overflow-icon,
.oj-conveyorbelt-overflow-indicator.oj-active.oj-hover .oj-conveyorbelt-overflow-icon {
  color: var(--oj-button-borderless-chrome-text-color-active);
}

:root {
  --oj-data-grid-column-width: 6.25rem;
}

oj-data-grid:not(.oj-complete) {
  visibility: hidden;
}

[hidden].oj-datagrid {
  display: none;
}

/* Styling for the datagrid widget container */
.oj-datagrid {
  display: block;
  position: relative;
  border: 1px solid var(--oj-collection-border-color);
  background-color: var(--oj-collection-free-space-bg-color);
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  cursor: default;
}

/* Styling to remove focus ring border on focusable elements */
.oj-datagrid:focus,
.oj-datagrid-cell:focus,
.oj-datagrid-header-cell:focus,
.oj-datagrid-header-label:focus,
.oj-datagrid-end-header-cell:focus,
.oj-datagrid-scrollers:focus,
.oj-datagrid-databody:focus {
  outline: none;
}

/* The default column width should be set here*/
.oj-datagrid-cell,
.oj-datagrid-column-header-cell,
.oj-datagrid-column-end-header-cell {
  width: var(--oj-data-grid-column-width);
}

/* The default row height should be set here*/
.oj-datagrid-cell,
.oj-datagrid-row-header-cell,
.oj-datagrid-row-end-header-cell {
  height: var(--oj-collection-grid-row-height);
}

/* Styling on the row header and row end header containere*/
.oj-datagrid-row-header,
.oj-datagrid-row-end-header {
  box-sizing: border-box;
}

/* Styling on the column header and column end header container*/
.oj-datagrid-column-header,
.oj-datagrid-column-end-header {
  box-sizing: border-box;
}

/* Style for disabling horizontal gridlines on cells */
.oj-datagrid-cell.oj-datagrid-border-horizontal-none,
.oj-datagrid-header-cell.oj-datagrid-border-horizontal-none,
.oj-datagrid-end-header-cell.oj-datagrid-border-horizontal-none {
  border-bottom-color: transparent;
}

/* Style for disabling horizontal gridlines on corners, is the top border for corners */
.oj-datagrid-row-header-spacer.oj-datagrid-border-horizontal-none,
.oj-datagrid-bottom-corner.oj-datagrid-border-horizontal-none {
  border-top-color: transparent;
}

/* Style for disabling vertical gridlines */
.oj-datagrid-cell.oj-datagrid-border-vertical-none,
.oj-datagrid-header-cell.oj-datagrid-border-vertical-none,
.oj-datagrid-end-header-cell.oj-datagrid-border-vertical-none {
  border-inline-end-color: transparent;
}

/* Style for disabling vertical gridlines on corners, is the opposite of cell sides */
.oj-datagrid-column-header-spacer.oj-datagrid-border-vertical-none,
.oj-datagrid-bottom-corner.oj-datagrid-border-vertical-none {
  border-inline-start-color: transparent;
}

/* Style for grid border if the grid doesn't fill the container the end headers need a border-bottom */
.oj-datagrid .oj-datagrid-row-header-spacer.oj-datagrid-small-content-border-horizontal,
.oj-datagrid .oj-datagrid-bottom-corner.oj-datagrid-small-content-border-horizontal,
.oj-datagrid .oj-datagrid-end-header-cell.oj-datagrid-small-content-border-horizontal {
  border-bottom-width: 1px;
}

/* Style for disabling vertical gridlines */
.oj-datagrid-column-header-spacer.oj-datagrid-small-content-border-vertical,
.oj-datagrid-bottom-corner.oj-datagrid-small-content-border-vertical,
.oj-datagrid-end-header-cell.oj-datagrid-small-content-border-vertical {
  border-inline-end-width: 1px;
}

/* Styling on header cells both for rows and columns, start and end */
.oj-datagrid-header-label,
.oj-datagrid-header-cell,
.oj-datagrid-end-header-cell {
  position: absolute;
  font-size: var(--oj-collection-header-font-size);
  font-weight: var(--oj-collection-header-font-weight);
  color: var(--oj-collection-header-text-color);
  background-color: var(--oj-collection-header-bg-color);
  border-color: var(--oj-collection-border-color);
  border-style: solid;
  overflow: hidden;
  display: flex;
}

/* Styling on the cells in the column and column end header, the default column header height should be set here*/
.oj-datagrid-column-header-label,
.oj-datagrid-column-end-header-label,
.oj-datagrid-column-header-cell,
.oj-datagrid-column-end-header-cell {
  height: var(--oj-collection-grid-header-height);
  padding: var(--oj-collection-grid-cell-padding);
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
}

.oj-datagrid-column-header-label.oj-datagrid-depth-2,
.oj-datagrid-column-end-header-label.oj-datagrid-depth-2,
.oj-datagrid-column-header-cell.oj-datagrid-depth-2,
.oj-datagrid-column-end-header-cell.oj-datagrid-depth-2 {
  height: calc(2 * var(--oj-collection-grid-header-height));
}

.oj-datagrid-column-header-label.oj-datagrid-depth-3,
.oj-datagrid-column-end-header-label.oj-datagrid-depth-3,
.oj-datagrid-column-header-cell.oj-datagrid-depth-3,
.oj-datagrid-column-end-header-cell.oj-datagrid-depth-3 {
  height: calc(3 * var(--oj-collection-grid-header-height));
}

.oj-datagrid-column-header-label.oj-datagrid-depth-4,
.oj-datagrid-column-end-header-label.oj-datagrid-depth-4,
.oj-datagrid-column-header-cell.oj-datagrid-depth-4,
.oj-datagrid-column-end-header-cell.oj-datagrid-depth-4 {
  height: calc(4 * var(--oj-collection-grid-header-height));
}

.oj-datagrid-column-header-label.oj-datagrid-depth-5,
.oj-datagrid-column-end-header-label.oj-datagrid-depth-5,
.oj-datagrid-column-header-cell.oj-datagrid-depth-5,
.oj-datagrid-column-end-header-cell.oj-datagrid-depth-5 {
  height: calc(5 * var(--oj-collection-grid-header-height));
}

.oj-datagrid-column-header-label.oj-datagrid-depth-6,
.oj-datagrid-column-end-header-label.oj-datagrid-depth-6,
.oj-datagrid-column-header-cell.oj-datagrid-depth-6,
.oj-datagrid-column-end-header-cell.oj-datagrid-depth-6 {
  height: calc(6 * var(--oj-collection-grid-header-height));
}

.oj-datagrid-column-header-label.oj-datagrid-depth-7,
.oj-datagrid-column-end-header-label.oj-datagrid-depth-7,
.oj-datagrid-column-header-cell.oj-datagrid-depth-7,
.oj-datagrid-column-end-header-cell.oj-datagrid-depth-7 {
  height: calc(7 * var(--oj-collection-grid-header-height));
}

.oj-datagrid-column-header-label,
.oj-datagrid-column-end-header-label {
  justify-content: flex-end;
}

/* Styling on the cells in the column header */
html:not([dir=rtl]) .oj-datagrid-column-header-cell {
  border-width: 0 1px 1px 0;
}

html[dir=rtl] .oj-datagrid-column-header-cell {
  border-width: 0 0 1px 1px;
}

/* Styling on the cells in the column end header */
html:not([dir=rtl]) .oj-datagrid-column-end-header-cell,
html:not([dir=rtl]) .oj-datagrid-row-header-label {
  border-width: 1px 1px 0 0;
}

html[dir=rtl] .oj-datagrid-column-end-header-cell,
html[dir=rtl] .oj-datagrid-row-header-label {
  border-width: 1px 0 0 1px;
}

/* Styling on row and row end header cells, the default row header width should be set here */
.oj-datagrid-row-header-label,
.oj-datagrid-row-end-header-label,
.oj-datagrid-row-header-cell,
.oj-datagrid-row-end-header-cell {
  justify-content: flex-start;
  align-items: center;
  width: var(--oj-data-grid-column-width);
  border-color: var(--oj-collection-border-color);
  padding: var(--oj-collection-grid-cell-padding);
  box-sizing: border-box;
  border-style: solid;
}

.oj-datagrid-row-header-label.oj-datagrid-depth-2,
.oj-datagrid-row-end-header-label.oj-datagrid-depth-2,
.oj-datagrid-row-header-cell.oj-datagrid-depth-2,
.oj-datagrid-row-end-header-cell.oj-datagrid-depth-2 {
  width: calc(2 * var(--oj-data-grid-column-width));
}

.oj-datagrid-row-header-label.oj-datagrid-depth-3,
.oj-datagrid-row-end-header-label.oj-datagrid-depth-3,
.oj-datagrid-row-header-cell.oj-datagrid-depth-3,
.oj-datagrid-row-end-header-cell.oj-datagrid-depth-3 {
  width: calc(3 * var(--oj-data-grid-column-width));
}

.oj-datagrid-row-header-label.oj-datagrid-depth-4,
.oj-datagrid-row-end-header-label.oj-datagrid-depth-4,
.oj-datagrid-row-header-cell.oj-datagrid-depth-4,
.oj-datagrid-row-end-header-cell.oj-datagrid-depth-4 {
  width: calc(4 * var(--oj-data-grid-column-width));
}

.oj-datagrid-row-header-label.oj-datagrid-depth-5,
.oj-datagrid-row-end-header-label.oj-datagrid-depth-5,
.oj-datagrid-row-header-cell.oj-datagrid-depth-5,
.oj-datagrid-row-end-header-cell.oj-datagrid-depth-5 {
  width: calc(5 * var(--oj-data-grid-column-width));
}

.oj-datagrid-row-header-label.oj-datagrid-depth-6,
.oj-datagrid-row-end-header-label.oj-datagrid-depth-6,
.oj-datagrid-row-header-cell.oj-datagrid-depth-6,
.oj-datagrid-row-end-header-cell.oj-datagrid-depth-6 {
  width: calc(6 * var(--oj-data-grid-column-width));
}

.oj-datagrid-row-header-label.oj-datagrid-depth-7,
.oj-datagrid-row-end-header-label.oj-datagrid-depth-7,
.oj-datagrid-row-header-cell.oj-datagrid-depth-7,
.oj-datagrid-row-end-header-cell.oj-datagrid-depth-7 {
  width: calc(7 * var(--oj-data-grid-column-width));
}

html:not([dir=rtl]) .oj-datagrid-row-end-header-label {
  border-width: 0 0 0 1px;
}

html[dir=rtl] .oj-datagrid-row-end-header-label {
  border-width: 0 1px 0 0;
}

.oj-datagrid-column-end-header-label {
  border-width: 1px 0 0 0;
}

/* Styling on row header cells */
html:not([dir=rtl]) .oj-datagrid-row-header-cell {
  border-width: 0 1px 1px 0;
}

html[dir=rtl] .oj-datagrid-row-header-cell {
  border-width: 0 0 1px 1px;
}

/* Styling on row end header cells */
html:not([dir=rtl]) .oj-datagrid-row-end-header-cell,
html:not([dir=rtl]) .oj-datagrid-column-header-label {
  border-width: 0 0 1px 1px;
}

html[dir=rtl] .oj-datagrid-row-end-header-cell,
html[dir=rtl] .oj-datagrid-column-header-label {
  border-width: 0 1px 1px 0;
}

/* Styling on databody cells */
.oj-datagrid-cell {
  position: absolute;
  box-sizing: border-box;
  border-style: solid;
  overflow: hidden;
  align-items: center;
  justify-content: flex-end;
  font-size: inherit;
  background-color: var(--oj-collection-bg-color);
  border-color: var(--oj-core-divider-color);
  padding: var(--oj-collection-grid-cell-padding);
  display: flex;
}

html:not([dir=rtl]) .oj-datagrid-cell {
  border-width: 0 1px 1px 0;
}

html[dir=rtl] .oj-datagrid-cell {
  border-width: 0 0 1px 1px;
}

/* Base styling on databody cell outlines when they are focused/edited */
.oj-datagrid-cell.oj-focus::before,
.oj-datagrid-header-cell.oj-focus::before,
.oj-datagrid-header-label.oj-focus::before,
.oj-datagrid-end-header-cell.oj-focus::before,
.oj-datagrid-cell.oj-datagrid-selected-top::before,
.oj-datagrid-cell.oj-datagrid-selected-start::before,
.oj-datagrid-cell.oj-datagrid-cell-edit-top::before,
.oj-datagrid-cell.oj-datagrid-cell-edit-start::before,
.oj-datagrid-cell.oj-datagrid-floodfill-top::before,
.oj-datagrid-cell.oj-datagrid-floodfill-start::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
}

html:not([dir=rtl]) .oj-datagrid-cell.oj-focus::before,
html:not([dir=rtl]) .oj-datagrid-header-cell.oj-focus::before,
html:not([dir=rtl]) .oj-datagrid-header-label.oj-focus::before,
html:not([dir=rtl]) .oj-datagrid-end-header-cell.oj-focus::before,
html:not([dir=rtl]) .oj-datagrid-cell.oj-datagrid-selected-top::before,
html:not([dir=rtl]) .oj-datagrid-cell.oj-datagrid-selected-start::before,
html:not([dir=rtl]) .oj-datagrid-cell.oj-datagrid-cell-edit-top::before,
html:not([dir=rtl]) .oj-datagrid-cell.oj-datagrid-cell-edit-start::before,
html:not([dir=rtl]) .oj-datagrid-cell.oj-datagrid-floodfill-top::before,
html:not([dir=rtl]) .oj-datagrid-cell.oj-datagrid-floodfill-start::before {
  left: 0;
}

html[dir=rtl] .oj-datagrid-cell.oj-focus::before,
html[dir=rtl] .oj-datagrid-header-cell.oj-focus::before,
html[dir=rtl] .oj-datagrid-header-label.oj-focus::before,
html[dir=rtl] .oj-datagrid-end-header-cell.oj-focus::before,
html[dir=rtl] .oj-datagrid-cell.oj-datagrid-selected-top::before,
html[dir=rtl] .oj-datagrid-cell.oj-datagrid-selected-start::before,
html[dir=rtl] .oj-datagrid-cell.oj-datagrid-cell-edit-top::before,
html[dir=rtl] .oj-datagrid-cell.oj-datagrid-cell-edit-start::before,
html[dir=rtl] .oj-datagrid-cell.oj-datagrid-floodfill-top::before,
html[dir=rtl] .oj-datagrid-cell.oj-datagrid-floodfill-start::before {
  right: 0;
}

.oj-datagrid-cell.oj-datagrid-selected-end,
.oj-datagrid-cell.oj-datagrid-cell-edit-end,
.oj-datagrid-cell.oj-datagrid-floodfill-end {
  border-inline-end-color: var(--oj-core-border-color-selected);
}

.oj-datagrid-cell.oj-datagrid-selected-bottom,
.oj-datagrid-cell.oj-datagrid-cell-edit-bottom,
.oj-datagrid-cell.oj-datagrid-floodfill-bottom {
  border-bottom-color: var(--oj-core-border-color-selected);
}

.oj-datagrid-cell.oj-datagrid-selected-top::before,
.oj-datagrid-cell.oj-datagrid-cell-edit-top::before,
.oj-datagrid-cell.oj-datagrid-floodfill-top::before {
  border-top: 1px solid var(--oj-core-border-color-selected);
}

.oj-datagrid-cell.oj-datagrid-selected-start::before,
.oj-datagrid-cell.oj-datagrid-cell-edit-start::before,
.oj-datagrid-cell.oj-datagrid-floodfill-start::before {
  border-inline-start: 1px solid var(--oj-core-border-color-selected);
}

.oj-datagrid-cell.oj-datagrid-floodfill-end:not(.oj-datagrid-selected-end):not(.oj-datagrid-cell-edit-end) {
  border-inline-end-style: dashed;
}

.oj-datagrid-cell.oj-datagrid-floodfill-bottom:not(.oj-datagrid-selected-bottom):not(.oj-datagrid-cell-edit-bottom) {
  border-bottom-style: dashed;
}

.oj-datagrid-cell.oj-datagrid-floodfill-top:not(.oj-datagrid-selected-top):not(.oj-datagrid-cell-edit-top)::before {
  border-top-style: dashed;
}

.oj-datagrid-cell.oj-datagrid-floodfill-start:not(.oj-datagrid-selected-start):not(.oj-datagrid-cell-edit-start)::before {
  border-inline-start-style: dashed;
}

/* Styling on databody cell outlines when they can be overwritten, to use a background color don't use the after psuedo class */
.oj-datagrid-editable .oj-datagrid-cell.oj-focus:not(.oj-datagrid-cell-edit)::before,
.oj-hicontrast .oj-datagrid.oj-datagrid-editable.oj-focus .oj-datagrid-cell.oj-focus:not(.oj-datagrid-cell-edit)::before {
  border: 1px solid var(--oj-collection-editable-cell-border-color-focus);
}

.oj-datagrid-editable .oj-datagrid-cell.oj-focus.oj-datagrid-selected-top:not(.oj-datagrid-cell-edit)::before {
  border-top-width: 2px;
}

.oj-datagrid-editable .oj-datagrid-cell.oj-focus.oj-datagrid-selected-start:not(.oj-datagrid-cell-edit)::before {
  border-inline-start-width: 2px;
}

/* Styling on databody cells when they are being edited */
.oj-datagrid-editable .oj-datagrid-cell.oj-datagrid-cell-edit,
.oj-hicontrast .oj-datagrid.oj-datagrid-editable.oj-focus .oj-datagrid-cell.oj-datagrid-cell-edit {
  padding: 0;
}

.oj-datagrid-resized-top {
  border-top-color: var(--oj-core-drag-drop-line-color);
}

.oj-datagrid-resized-bottom,
.oj-datagrid-top-corner.oj-datagrid-resized-bottom,
.oj-datagrid-column-header-spacer.oj-datagrid-resized-bottom,
.oj-datagrid-row-header-label.oj-datagrid-resized-bottom {
  border-bottom-color: var(--oj-core-drag-drop-line-color);
}

.oj-datagrid-resized-end,
.oj-datagrid-top-corner.oj-datagrid-resized-end,
.oj-datagrid-row-header-spacer.oj-datagrid-resized-end,
.oj-datagrid-column-header-label.oj-datagrid-resized-end {
  border-right-color: var(--oj-core-drag-drop-line-color);
}

.oj-datagrid-resized-start,
.oj-datagrid-top-corner.oj-datagrid-resized-start,
.oj-datagrid-row-header-spacer.oj-datagrid-resized-start,
.oj-datagrid-column-header-label.oj-datagrid-resized-start {
  border-left-color: var(--oj-core-drag-drop-line-color);
}

/* A helper class oj-datagrid-editable-no-padding is a helper to provide the appearance of no padding, it has padding to give the border space when in cellNavigation mode*/
html:not([dir=rtl]) .oj-datagrid .oj-datagrid-cell.oj-datagrid-cell-no-padding {
  padding: 1px 0 0 1px;
}

html[dir=rtl] .oj-datagrid .oj-datagrid-cell.oj-datagrid-cell-no-padding {
  padding: 1px 1px 0 0;
}

/* A helper class oj-datagrid-cell-no-padding should have padding 0 otherwise*/
.oj-datagrid-editable .oj-datagrid-cell.oj-datagrid-cell-no-padding {
  padding: 0;
}

/* A helper class oj-datagrid-editable-padding should be appleid to editable components that should maintain padding in edit mode*/
.oj-datagrid-editable .oj-datagrid-cell.oj-datagrid-cell-edit.oj-datagrid-cell-padding {
  padding: var(--oj-collection-grid-cell-padding);
}

/* Styling on form controls stamped inside a datagrid */
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input {
  padding: 0 var(--oj-collection-grid-cell-padding);
}

.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-input,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
.oj-datagrid-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input {
  font-size: inherit;
}

.oj-datagrid-cell .oj-checkboxset .oj-checkbox-label {
  justify-content: flex-end;
}

/* Styling on header and cell default text for vertical alignment, add this class name to headers when using a
            knockout template or custom renderer to bottom align text*/
.oj-datagrid-cell-text,
.oj-datagrid-header-cell-text {
  flex: 0 1 auto;
  box-sizing: border-box;
}

/* styling to top align outside grouped headers */
.oj-datagrid-header-grouping > :first-child.oj-datagrid-row-header-cell,
.oj-datagrid-header-grouping > :first-child.oj-datagrid-row-end-header-cell {
  align-items: flex-start;
}

/* styling to center align outside grouped headers */
.oj-datagrid-header-grouping > :first-child.oj-datagrid-column-header-cell:not(.oj-datagrid-hierarchical-group),
.oj-datagrid-header-grouping > :first-child.oj-datagrid-column-end-header-cell {
  justify-content: center;
}

/* Styling on row and column banding */
.oj-datagrid-cell.oj-datagrid-banded {
  background-color: var(--oj-collection-cell-banded-bg-color);
}

/* Styling on read only datagrid cells, oj-readOnly must be applied by the application */
.oj-datagrid-cell.oj-read-only {
  background-color: var(--oj-collection-editable-cell-bg-color-read-only);
}

/* Styling on row and cell hover */
.oj-datagrid-cell.oj-hover {
  background-color: var(--oj-core-bg-color-hover);
}

/* Styling on row and cell selection, only applied when cell is not being actively edited */
.oj-datagrid.oj-focus .oj-datagrid-cell.oj-selected:not(.oj-datagrid-cell-edit),
.oj-datagrid-cell.oj-selected:not(.oj-datagrid-cell-edit) {
  background-color: var(--oj-core-bg-color-selected);
}

/* Styling on focused row and cell outlines, to use a background color don't use the after pseudo class */
.oj-datagrid.oj-focus.oj-read-only .oj-datagrid-cell.oj-focus-highlight::before,
.oj-datagrid.oj-focus .oj-datagrid-header-label.oj-focus-highlight::before,
.oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus-highlight::before,
.oj-datagrid.oj-focus .oj-datagrid-end-header-cell.oj-focus-highlight::before {
  top: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  outline: dotted 1px var(--oj-core-focus-border-color);
}

html:not([dir=rtl]) .oj-datagrid.oj-focus.oj-read-only .oj-datagrid-cell.oj-focus-highlight::before,
html:not([dir=rtl]) .oj-datagrid.oj-focus .oj-datagrid-header-label.oj-focus-highlight::before,
html:not([dir=rtl]) .oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus-highlight::before,
html:not([dir=rtl]) .oj-datagrid.oj-focus .oj-datagrid-end-header-cell.oj-focus-highlight::before {
  left: 1px;
}

html[dir=rtl] .oj-datagrid.oj-focus.oj-read-only .oj-datagrid-cell.oj-focus-highlight::before,
html[dir=rtl] .oj-datagrid.oj-focus .oj-datagrid-header-label.oj-focus-highlight::before,
html[dir=rtl] .oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus-highlight::before,
html[dir=rtl] .oj-datagrid.oj-focus .oj-datagrid-end-header-cell.oj-focus-highlight::before {
  right: 1px;
}

.oj-datagrid.oj-focus .oj-datagrid-column-end-header-cell.oj-focus-highlight::before {
  height: calc(100% - 2px);
}

.oj-datagrid.oj-focus .oj-datagrid-row-end-header-cell.oj-focus-highlight::before {
  width: calc(100% - 2px);
}

/* Styling for the data cell elements in selected state when data grid in high contrast mode. */
.oj-hicontrast .oj-datagrid.oj-focus .oj-datagrid-cell.oj-selected {
  border-width: 3px;
  border-style: double;
}

/* Styling on header containers, used for positioning*/
.oj-datagrid-header,
.oj-datagrid-end-header {
  position: absolute;
  overflow: hidden;
}

/* Styling on scrollers and databody regions, used for positioning*/
.oj-datagrid-scrollers,
.oj-datagrid-databody {
  position: absolute;
  overflow: auto;
}

/* Styling on scroller region, used for positioning*/
.oj-datagrid-scroller {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Styles used to optimize scolling on touch devices used to optimize translate
           3d swiping on touch and engage hardware acceleration, they are not for animation changes*/
.oj-datagrid-scroller-touch {
  transition: 0.5s;
  transition-timing-function: var(--oj-animation-ease-out);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
}

/* Styling on header cells when hovered both for rows and columns */
.oj-datagrid-header-label.oj-hover,
.oj-datagrid-header-cell.oj-hover,
.oj-datagrid-end-header-cell.oj-hover {
  background-color: var(--oj-collection-header-bg-color-hover);
}

/* Styling for headers when a sub set > 1 of its respective cells are selected */
.oj-datagrid-header-label.oj-partial-selected,
.oj-datagrid-header-cell.oj-partial-selected,
.oj-datagrid-end-header-cell.oj-partial-selected {
  background-color: var(--oj-collection-header-bg-color-partial-selected);
}

/* Styling for headers when all of its respective cells are selected */
.oj-datagrid-header-label.oj-selected,
.oj-datagrid-header-cell.oj-selected,
.oj-datagrid-end-header-cell.oj-selected {
  background-color: var(--oj-collection-header-bg-color-selected);
}

/* Styling on the status text, such as fetching data */
.oj-datagrid-status {
  position: absolute;
  display: none;
}

/* Styling for the activity indicator */
.oj-datagrid-loading-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: auto;
}

.oj-datagrid-loading-icon:before {
  content: url("images/spinner_full.gif");
  transform: translate(-37.5%, -37.5%) scale(0.25);
}

/* Styling for the empty data grid text, default only used for positioning */
.oj-datagrid-empty-text {
  position: absolute;
  padding: var(--oj-collection-grid-cell-padding);
}

/* Styling for the corner between row and column headers and scrollbars */
.oj-datagrid-row-header-spacer,
.oj-datagrid-column-header-spacer,
.oj-datagrid-bottom-corner,
.oj-datagrid-top-corner {
  position: absolute;
  box-sizing: border-box;
  border-color: var(--oj-collection-border-color);
  border-style: solid;
}

/* Styling for the top corner between headers */
html:not([dir=rtl]) .oj-datagrid-top-corner {
  border-width: 0 1px 1px 0;
}

html[dir=rtl] .oj-datagrid-top-corner {
  border-width: 0 0 1px 1px;
}

/* Styling for the corner between scrollbars if present */
.oj-datagrid-bottom-corner {
  background-color: var(--oj-collection-free-space-bg-color);
}

html:not([dir=rtl]) .oj-datagrid-bottom-corner {
  border-width: 1px 0 0 1px;
}

html[dir=rtl] .oj-datagrid-bottom-corner {
  border-width: 1px 1px 0 0;
}

/* Styling for the corner between row headers and horizontal scrollbar */
html:not([dir=rtl]) .oj-datagrid-row-header-spacer {
  border-width: 1px 1px 0 0;
}

html[dir=rtl] .oj-datagrid-row-header-spacer {
  border-width: 1px 0 0 1px;
}

/* Styling for the corner between column headers and vertical scrollbar */
html:not([dir=rtl]) .oj-datagrid-column-header-spacer {
  border-width: 0 0 1px 1px;
}

html[dir=rtl] .oj-datagrid-column-header-spacer {
  border-width: 0 1px 1px 0;
}

/* Styling for the area around the icon */
.oj-datagrid-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: var(--oj-core-cursor-clickable);
  height: var(--oj-core-touch-target-min-size);
  border-radius: var(--oj-button-border-radius);
}

.oj-datagrid-sort-icon {
  width: var(--oj-core-touch-target-min-size);
  min-width: var(--oj-core-touch-target-min-size);
}

.oj-datagrid-disclosure-icon {
  width: 1.5rem;
  min-width: 1.5rem;
  margin-inline-end: 0.5rem;
}

/* Styling for both the sort icons and click area */
.oj-datagrid-sort-ascending-icon,
.oj-datagrid-sort-descending-icon,
.oj-datagrid-sort-default-icon {
  flex: 0 1 auto;
  font-size: inherit;
}

/* Styling for disabled sort icons */
.oj-datagrid-sort-ascending-icon.oj-disabled,
.oj-datagrid-sort-descending-icon.oj-disabled,
.oj-datagrid-sort-default-icon.oj-disabled {
  display: block;
  color: inherit;
}

.oj-datagrid-row-header-cell .oj-datagrid-sort-default-icon::before,
.oj-datagrid-row-header-cell .oj-datagrid-sort-ascending-icon::before,
.oj-datagrid-row-header-cell .oj-datagrid-sort-descending-icon::before {
  transform: rotate(90deg);
}

.oj-datagrid-icon-container .oj-component-icon, .oj-datagrid-icon-container .oj-popup-tail.oj-popup-tail-simple,
.oj-datagrid-icon-container .oj-menucheckbox-icon {
  color: var(--oj-private-button-ghost-chrome-text-color);
}

.oj-datagrid-icon-container.oj-hover .oj-component-icon, .oj-datagrid-icon-container.oj-hover .oj-popup-tail.oj-popup-tail-simple,
.oj-datagrid-icon-container.oj-hover .oj-menucheckbox-icon {
  color: var(--oj-private-button-ghost-chrome-text-color-hover);
}

.oj-datagrid-icon-container.oj-active .oj-component-icon, .oj-datagrid-icon-container.oj-active .oj-popup-tail.oj-popup-tail-simple,
.oj-datagrid-icon-container.oj-active .oj-menucheckbox-icon {
  color: var(--oj-private-button-ghost-chrome-text-color-active);
}

/* Styling for the row that is cut during a context menu or CTRL-X cut and paste operation */
.oj-datagrid-cell.oj-datagrid-cut {
  opacity: 0.8;
}

/* Styling row and row headers that are draggable */
.oj-datagrid .oj-draggable {
  cursor: move;
}

/* Styling for the row that is being moved using drag */
.oj-datagrid .oj-drag {
  opacity: 0.8;
  z-index: 1;
}

/* Styling all drop targets in the datagrid when dragging rows*/
.oj-datagrid .oj-drop {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  opacity: 0.8;
}

/* Styling for databody drop targets when dragging rows*/
.oj-datagrid-databody .oj-drop {
  border: 1px solid var(--oj-core-drag-drop-color-2);
  background-color: var(--oj-core-drag-drop-color-1);
}

/* Styling for header drop targets when dragging rows*/
.oj-datagrid-header .oj-drop,
.oj-datagrid-end-header .oj-drop {
  border: 1px solid var(--oj-core-drag-drop-color-1);
  background-color: var(--oj-core-drag-drop-color-2);
}

/* Styling for the selection affordance icon on touch devices*/
.oj-datagrid-touch-selection-affordance,
.oj-datagrid-floodfill-affordance {
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  z-index: 1;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 2px solid var(--oj-core-border-color-selected);
  background-color: var(--oj-core-border-color-selected);
}

.oj-datagrid-touch-selection-affordance-top-corner-bounded {
  border-end-end-radius: 1.5px;
}

.oj-datagrid-touch-selection-affordance-bottom-corner-bounded,
.oj-datagrid-floodfill-affordance {
  border-start-start-radius: 1.5px;
}

.oj-datagrid-touch-selection-affordance-top-column {
  border-start-end-radius: 1.5px;
  border-end-end-radius: 1.5px;
}

.oj-datagrid-touch-selection-affordance-bottom-column {
  border-start-start-radius: 1.5px;
  border-end-start-radius: 1.5px;
}

.oj-datagrid-touch-selection-affordance-top-row {
  border-end-start-radius: 1.5px;
  border-end-end-radius: 1.5px;
}

.oj-datagrid-touch-selection-affordance-bottom-row {
  border-start-start-radius: 1.5px;
  border-start-end-radius: 1.5px;
}

/* Styling for the selection affordance touchable area on touch devices*/
.oj-datagrid-touch-area {
  width: 24px;
  height: 24px;
  position: absolute;
}

.oj-datagrid-popup-header,
.oj-datagrid-popup-content {
  align-self: flex-start;
  padding: 5px;
}

.oj-datagrid-popup-footer {
  align-self: flex-end;
  padding: 5px;
  text-align: end;
}

/* Redwood theme - on resize the header text should be clipped */
.oj-datagrid-column-header-cell > * {
  white-space: nowrap;
  overflow: hidden;
}

.oj-datagrid-tree-spacer {
  height: var(--oj-collection-grid-row-height);
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.oj-datagrid-column-header-cell.oj-datagrid-hierarchical-group,
.oj-datagrid-column-header-cell.oj-datagrid-hierarchical-tree {
  justify-content: flex-start;
}

.oj-datagrid-row-header-cell.oj-datagrid-hierarchical-group .oj-datagrid-icon-container.oj-datagrid-disclosure-icon {
  margin-top: calc(-1 * var(--oj-collection-grid-cell-padding));
}

/* Styling for the default sort icon */
/* Styling for the sort ascending icon */
/* Styling for the sort descending icon */
/* Styling for a collapsed icon */
/* Styling for an expanded icon */
:root {
  --oj-date-picker-cell-font-size: var(--oj-typography-body-sm-font-size);
  --oj-date-picker-cell-border-color-today: rgb(var(--oj-palette-neutral-rgb-160));
}

oj-input-time:not(.oj-complete) {
  visibility: hidden;
}

oj-input-date:not(.oj-complete) {
  visibility: hidden;
}

oj-input-date-time:not(.oj-complete) {
  visibility: hidden;
}

oj-date-picker:not(.oj-complete) {
  visibility: hidden;
}

oj-calendar:not(.oj-complete) {
  visibility: hidden;
}

.oj-inputdatetime-inline,
.oj-inputdatetime-inline .oj-inputdatetime-time-only.oj-text-field.oj-read-only .oj-text-field-input.oj-inputdatetime-input {
  display: inline-block;
}

.oj-inputdatetime-inline .oj-inputdatetime-time-only .oj-messaging-inline-container {
  display: none;
}

.oj-datepicker-inline {
  /* use a width of 100% and then max and min width so that when
         there's less room for the form control it can automatically
         get smaller instead of overflowing its boundaries */
  max-width: calc(22.5rem + 2px);
  width: 100%;
}

.oj-inputdatetime-input-trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  border-style: solid;
  border-color: var(--oj-text-field-border-color);
  background-color: transparent;
  height: var(--oj-text-field-height);
  line-height: var(--oj-text-field-height);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: 0;
}

.oj-inputdatetime-date-only.oj-loading .oj-datepicker-popup {
  background-color: var(--oj-animation-skeleton-bg-end-color);
  background-size: 200% 200%;
  animation-name: SkeletonAnimation;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

.oj-inputdatetime.oj-read-only .oj-inputdatetime-input-trigger {
  display: none;
}

.oj-inputdatetime-calendar-clock-icon,
.oj-inputdatetime-calendar-icon,
.oj-inputdatetime-time-icon {
  cursor: pointer;
  padding: 0 0.3125rem;
  vertical-align: middle;
  line-height: inherit;
}

.oj-inputdatetime-calendar-clock-icon.oj-disabled,
.oj-inputdatetime-calendar-icon.oj-disabled,
.oj-inputdatetime-time-icon.oj-disabled {
  cursor: default;
}

.oj-datepicker-popup.oj-popup {
  box-shadow: var(--oj-core-dropdown-box-shadow);
}

.oj-datepicker-popup .oj-popup-content {
  padding: 0;
}

/* Class for the root node that contains the floating calendar */
.oj-datepicker-content {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

html[dir=rtl] .oj-datepicker-content {
  direction: rtl;
}

.oj-datepicker-header {
  margin: 0.75rem;
  color: var(--oj-heading-text-color);
  position: relative;
  background: none;
  border: 0;
  display: flex;
  align-content: center;
  justify-content: space-between;
  min-height: var(--oj-button-height);
}

.oj-datepicker-group-first .oj-datepicker-header {
  justify-content: flex-start;
}

.oj-datepicker-group-last .oj-datepicker-header {
  justify-content: flex-end;
}

.oj-datepicker-group-middle .oj-datepicker-header {
  justify-content: center;
}

.oj-datepicker-prev-icon,
.oj-datepicker-next-icon {
  line-height: var(--oj-button-height);
  width: var(--oj-button-height);
  border-radius: var(--oj-button-border-radius);
  color: var(--oj-button-borderless-chrome-text-color);
}

.oj-datepicker-prev-icon:not(.oj-disabled).oj-hover,
.oj-datepicker-next-icon:not(.oj-disabled).oj-hover {
  color: var(--oj-button-borderless-chrome-text-color-hover);
  background-color: var(--oj-button-borderless-chrome-bg-color-hover);
  border-color: var(--oj-button-borderless-chrome-border-color-hover);
}

.oj-datepicker-header a.oj-datepicker-prev-icon.oj-active,
.oj-datepicker-header a.oj-datepicker-next-icon.oj-active {
  color: var(--oj-button-borderless-chrome-text-color-active);
  background-color: var(--oj-button-borderless-chrome-bg-color-active);
  border-color: var(--oj-button-borderless-chrome-border-color-active);
}

html:not([dir=rtl]) .oj-datepicker-prev-icon {
  left: 2px;
}

html[dir=rtl] .oj-datepicker-prev-icon {
  right: 2px;
}

.oj-datepicker-next-icon {
  order: 3;
}

html:not([dir=rtl]) .oj-datepicker-next-icon {
  right: 2px;
}

html[dir=rtl] .oj-datepicker-next-icon {
  left: 2px;
}

.oj-datepicker-title {
  margin: auto 2.2em;
  text-align: center;
}

.oj-datepicker-title select {
  font-size: var(--oj-typography-body-md-font-size);
  line-height: var(--oj-typography-body-md-line-height);
  margin: 1px 0;
  background-color: inherit;
  color: inherit;
}

.oj-datepicker-header a.oj-enabled {
  text-decoration: none;
  color: var(--oj-core-text-color-primary);
}

.oj-datepicker-buttonpane a.oj-enabled {
  text-decoration: none;
  color: var(--oj-link-text-color);
}

.oj-datepicker-buttonpane a.oj-enabled.oj-hover {
  color: var(--oj-link-text-color);
}

.oj-datepicker-buttonpane a.oj-enabled.oj-active {
  color: var(--oj-link-text-color);
}

.oj-datepicker-month-year {
  width: 100%;
}

.oj-datepicker-month {
  margin-right: 0.3125rem;
}

.oj-datepicker-header a.oj-enabled:not(.oj-disabled) {
  cursor: pointer;
}

.oj-datepicker-month,
.oj-datepicker-year {
  font-size: var(--oj-typography-body-lg-font-size);
  width: 48%;
  min-width: 0;
}

.oj-datepicker-calendar {
  border-collapse: collapse;
  margin: 0 0.75rem 0.75rem;
  outline: 0 none;
}

.oj-datepicker-calendar th,
.oj-datepicker-calendar td {
  border: 0;
  text-align: center;
}

.oj-datepicker-calendar th {
  padding: 0 0 0.25rem;
  color: var(--oj-core-text-color-secondary);
  text-transform: uppercase;
  font-size: var(--oj-typography-body-2xs-font-size);
  line-height: var(--oj-typography-body-2xs-line-height);
}

.oj-datepicker-calendar td {
  padding: 0;
  font-size: var(--oj-date-picker-cell-font-size);
  width: 3rem;
  height: 3rem;
}

.oj-datepicker-calendar td span,
.oj-datepicker-calendar td a {
  display: flex;
  padding: 0;
  border-radius: 0.25rem;
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  max-width: 2.25rem;
  max-height: 2.25rem;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.oj-datepicker-calendar.oj-datepicker-weekdisplay td {
  width: 2.625rem;
}

.oj-datepicker-calendar.oj-datepicker-weekdisplay td a {
  height: 2.625rem;
}

.oj-datepicker-calendar.oj-datepicker-monthview,
.oj-datepicker-calendar.oj-datepicker-yearview {
  height: calc(15.25rem + var(--oj-typography-body-xs-line-height) * var(--oj-typography-body-xs-font-size));
}

.oj-datepicker-calendar.oj-datepicker-monthview td,
.oj-datepicker-calendar.oj-datepicker-yearview td {
  width: 5.25rem;
}

.oj-datepicker-calendar.oj-datepicker-monthview td span,
.oj-datepicker-calendar.oj-datepicker-monthview td a,
.oj-datepicker-calendar.oj-datepicker-yearview td span,
.oj-datepicker-calendar.oj-datepicker-yearview td a {
  width: 3.25rem;
  height: 1.75rem;
  max-width: 3.25rem;
  max-height: 1.75rem;
  line-height: 1.5rem;
  white-space: nowrap;
}

.oj-datepicker-calendar td a:focus {
  outline: none;
}

.oj-datepicker-calendar td a.oj-enabled {
  border: 2px solid transparent;
  color: var(--oj-core-text-color-primary);
  text-decoration: none;
}

.oj-datepicker-calendar td.oj-datepicker-today a.oj-hover,
.oj-datepicker-calendar td a.oj-hover {
  background-color: var(--oj-core-bg-color-hover);
}

.oj-datepicker-calendar td.oj-datepicker-today a.oj-selected,
.oj-datepicker-calendar td a.oj-selected {
  font-weight: bold;
  background: var(--oj-core-brand-2);
  color: var(--oj-core-brand-contrast);
}

.oj-datepicker-calendar td.oj-disabled span {
  color: var(--oj-core-text-color-disabled);
}

.oj-datepicker-calendar td.oj-datepicker-other-month a.oj-enabled {
  color: var(--oj-core-text-color-secondary);
  opacity: 0.7;
}

.oj-datepicker-calendar td.oj-datepicker-today a {
  background-color: transparent;
  border: 2px solid var(--oj-date-picker-cell-border-color-today);
  border-radius: 50%;
}

.oj-datepicker-buttonpane {
  box-sizing: border-box;
  height: var(--oj-button-height);
  line-height: var(--oj-button-height);
  font-size: var(--oj-button-font-size);
  font-weight: var(--oj-button-font-weight);
  text-align: center;
  display: inline-block;
  width: 100%;
}

html[dir=rtl] .oj-datepicker-buttonpane {
  clear: right;
}

.oj-datepicker-buttonpane a {
  width: auto;
  overflow: visible;
}

.oj-datepicker-buttonpane .oj-datepicker-single-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* with multiple calendars, need to override the width */
.oj-datepicker-content.oj-datepicker-multi {
  width: auto;
}

.oj-datepicker-group {
  box-sizing: border-box;
}

.oj-datepicker-multi .oj-datepicker-group {
  float: left;
}

html[dir=rtl] .oj-datepicker-multi .oj-datepicker-group {
  float: right;
}

.oj-datepicker-multi-2 .oj-datepicker-group {
  width: 50%;
}

.oj-datepicker-multi-3 .oj-datepicker-group {
  width: 33.3%;
}

.oj-datepicker-multi-4 .oj-datepicker-group {
  width: 25%;
}

.oj-datepicker-multi .oj-datepicker-group-last .oj-datepicker-header,
.oj-datepicker-multi .oj-datepicker-group-middle .oj-datepicker-header {
  border-inline-start-width: 0;
}

.oj-datepicker-multi .oj-datepicker-buttonpane {
  clear: left;
}

.oj-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

.oj-datepicker-unselectable {
  opacity: 0.35;
}

.oj-datepicker-calendar.oj-focus-highlight td.oj-datepicker-days-cell-over a,
.oj-datepicker-calendar.oj-focus-highlight td.oj-datepicker-days-cell-over span {
  border: 2px solid var(--oj-core-border-color-selected);
}

.oj-datepicker-week-col {
  color: var(--oj-label-color);
  width: 2.625rem;
}

th.oj-datepicker-week-col,
td.oj-datepicker-week-col {
  border-inline-end-width: 1px;
  border-inline-end-style: solid;
  border-inline-end-color: var(--oj-core-divider-color);
}

.oj-datepicker-inline {
  margin-bottom: 0.375rem;
}

html .oj-inputdatetime-inline .oj-inputdatetime-time-only {
  margin-bottom: 0;
}

.oj-datetimepicker-switcher {
  border-radius: 0 0 var(--oj-popup-border-radius) var(--oj-popup-border-radius);
  padding: 0.3125rem 0.75rem;
  margin-top: 0.625rem;
  display: flex;
  justify-content: space-between;
}

.oj-datetimepicker-switcher a.oj-enabled {
  display: inline-block;
  color: var(--oj-core-text-color-primary);
  text-decoration: none;
  vertical-align: middle;
}

.oj-datetimepicker-switcher .oj-inputdatetime-calendar-icon,
.oj-datetimepicker-switcher .oj-inputdatetime-time-icon {
  padding-inline-start: 0;
}

.oj-datetimepicker-switcher-buttons a:first-child {
  padding-inline-end: 1.25rem;
}

.oj-datepicker-inline .oj-datepicker-content {
  background-color: var(--oj-text-field-bg-color);
  border: 1px solid var(--oj-text-field-border-color);
  border-radius: var(--oj-text-field-border-radius);
}

.oj-timepicker-popup .oj-popup-content {
  padding: 0;
}

.oj-timepicker-content {
  height: 25.25rem;
  padding: 0 0.75rem;
  min-width: 22.5rem;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-content: center;
  justify-content: space-around;
}

.oj-timepicker-mobile-content {
  height: 100vh;
  min-width: 17.25rem;
  width: 18.75rem;
}

.oj-timepicker-header,
.oj-timepicker-footer {
  color: var(--oj-core-text-color-primary);
  font-size: 1.125rem;
  height: 2.1875rem;
  line-height: 2.1875rem;
  background: none;
  border: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

html:not([dir=rtl]) .oj-timepicker-cancel-button {
  left: 0;
}

html[dir=rtl] .oj-timepicker-cancel-button {
  right: 0;
}

html:not([dir=rtl]) .oj-timepicker-ok-button {
  right: 0;
}

html[dir=rtl] .oj-timepicker-ok-button {
  left: 0;
}

.oj-timepicker-footer {
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  width: 100%;
  position: absolute;
  bottom: 0;
}

.oj-timepicker-header a.oj-enabled,
.oj-timepicker-footer a.oj-enabled {
  text-decoration: none;
  color: var(--oj-core-text-color-primary);
}

.oj-timepicker-wheel-group {
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  align-self: center;
  margin-top: 1rem;
}

.oj-timepicker-wheel {
  position: relative;
  height: 18.5rem;
  width: 5.75rem;
  overflow: hidden;
  box-sizing: border-box;
  outline: 0;
}

.oj-timepicker-wheel.oj-timepicker-minute,
.oj-timepicker-wheel.oj-timepicker-meridian {
  border-image: linear-gradient(180deg, rgba(241, 239, 237, 0), rgba(86, 80, 75, 0.2), rgba(241, 239, 237, 0)) 1;
  border-inline-start-width: 1px;
  border-inline-start-style: solid;
}

.oj-timepicker-wheel-item {
  transition: all 0.15s;
  top: -6.25rem;
  position: absolute;
  width: 5.75rem;
  text-align: center;
  color: var(--oj-core-text-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.oj-timepicker-wheel-item.oj-disabled {
  color: var(--oj-core-text-color-disabled);
}

.oj-timepicker-wheel-item-content {
  text-align: center;
  white-space: nowrap;
}

.oj-timepicker-wheel.oj-focus .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0 {
  border-radius: var(--oj-text-field-border-radius);
  background-color: var(--oj-core-bg-color-hover);
  color: var(--oj-core-text-color-primary);
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0 {
  font-size: 2.25rem;
  font-weight: 600;
  height: 2.5rem;
  top: 7.25rem;
  opacity: 1;
  padding: 0.75rem 0 1rem;
}

.oj-timepicker-meridian .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0,
.oj-timepicker-meridian .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position1,
.oj-timepicker-meridian .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-1 {
  font-size: var(--oj-typography-subheading-sm-font-size);
  font-weight: normal;
  padding: 1.125rem 0 0.625rem;
  margin-top: 0;
}

.oj-timepicker-meridian .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0 {
  font-weight: bold;
}

.oj-timepicker-meridian .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position1,
.oj-timepicker-meridian .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-1 {
  font-weight: 300;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position1,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-1 {
  font-size: 2.25rem;
  font-weight: 300;
  height: 2.5rem;
  opacity: 0.3;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position2,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-2 {
  font-size: 2.25rem;
  font-weight: 300;
  height: 1.875rem;
  opacity: 0.1;
}

.oj-timepicker-wheel-item {
  height: 1.25rem;
}

.oj-timepicker-meridian .oj-timepicker-wheel-item-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position1 {
  top: 11.5rem;
  margin-top: 0.75rem;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position2 {
  top: 14.75rem;
  margin-top: 1.25rem;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position3,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position4,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position5,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position6,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position7 {
  top: 18.5rem;
  visibility: hidden;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-1 {
  top: 3.75rem;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-2 {
  top: 0;
}

.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-3,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-4,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-5,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-6,
.oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-7 {
  top: -1.5rem;
  visibility: hidden;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input-trigger {
  height: 100%;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime:not(.oj-disabled) .oj-inputdatetime-input-trigger {
  background-color: transparent;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime:not(.oj-invalid):not(.oj-warning) .oj-inputdatetime-input-trigger {
  border-width: 0;
}

/* Override default options*/
.oj-inputdatetime-option-defaults {
  font-family: '{"keyboardEdit":"enabled","converterYear":"numeric","showPickerOnDesktop":"disabled"}' !important;
}

.oj-datetimepicker-config {
  font-family: "{}" !important;
}

.oj-text-field .oj-inputdatetime-input-trigger {
  border: 0;
}

.oj-text-field-label-inside .oj-inputdatetime-input {
  background-color: transparent;
  padding: var(--oj-text-field-inside-edge-padding-top) var(--oj-text-field-text-to-edge-padding) 0;
}

.oj-text-field-label-inside .oj-inputdatetime-input-trigger {
  min-height: var(--oj-text-field-inside-edge-height);
}

:root {
  --oj-drawer-overlay-bg-color: var(--oj-core-bg-color-content);
}

:root {
  --oj-drawer-reflow-bg-color: var(--oj-core-bg-color-content);
  --oj-drawer-reflow-divider-color: rgb(var(--oj-palette-neutral-rgb-40));
  --oj-drawer-overlay-bg-color: var(--oj-core-bg-color-content);
}

.oj-drawer-reflow-wrapper {
  --oj-current-bg-color: var(--oj-drawer-overlay-bg-color);
}

.oj-drawer-layout-surrogate .oj-drawer-overlay {
  --oj-current-bg-color: var(--oj-drawer-overlay-bg-color);
}

oj-drawer-layout:not(.oj-complete) {
  visibility: hidden;
}

.oj-drawer-disable-body-overflow {
  overflow: hidden !important;
}

oj-drawer-layout {
  display: flex;
}

.oj-drawer-reflow-wrapper {
  display: block;
}

.oj-drawer-layout-main-content {
  flex-grow: 1;
  overflow-y: auto;
}

.oj-drawer-reflow-wrapper {
  flex: 0 0 auto;
  background: var(--oj-drawer-overlay-bg-color);
}

.oj-drawer-reflow-wrapper .oj-drawer-reflow {
  height: 100%;
}

html:not([dir=rtl]) .oj-drawer-reflow-wrapper.oj-drawer-reflow.oj-drawer-start {
  border-right: 1px solid var(--oj-drawer-reflow-divider-color);
}

html[dir=rtl] .oj-drawer-reflow-wrapper.oj-drawer-reflow.oj-drawer-start {
  border-left: 1px solid var(--oj-drawer-reflow-divider-color);
}

html:not([dir=rtl]) .oj-drawer-reflow-wrapper.oj-drawer-reflow.oj-drawer-end {
  border-left: 1px solid var(--oj-drawer-reflow-divider-color);
}

html[dir=rtl] .oj-drawer-reflow-wrapper.oj-drawer-reflow.oj-drawer-end {
  border-right: 1px solid var(--oj-drawer-reflow-divider-color);
}

.oj-drawer-reflow-wrapper.oj-drawer-reflow,
.oj-drawer-overlay {
  overflow-y: auto;
}

.oj-drawer-layout-surrogate {
  position: relative;
  z-index: var(--oj-core-z-index-popup);
}

.oj-drawer-layout-surrogate .oj-drawer-overlay {
  position: absolute;
  background: var(--oj-drawer-overlay-bg-color);
  min-width: 320px;
  max-width: 90%;
}

.oj-drawer-layout-surrogate .oj-drawer-overlay.oj-drawer-full-overlay {
  width: 100%;
  max-width: 100%;
}

html:not([dir=rtl]) .oj-drawer-layout-surrogate .oj-drawer-overlay.oj-drawer-start {
  box-shadow: 8px 0 15px rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

html[dir=rtl] .oj-drawer-layout-surrogate .oj-drawer-overlay.oj-drawer-start {
  box-shadow: -8px 0 15px rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

html:not([dir=rtl]) .oj-drawer-layout-surrogate .oj-drawer-overlay.oj-drawer-end {
  box-shadow: -8px 0 15px rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

html[dir=rtl] .oj-drawer-layout-surrogate .oj-drawer-overlay.oj-drawer-end {
  box-shadow: 8px 0 15px rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

.oj-drawer-popup-surrogate oj-drawer-popup {
  --oj-current-bg-color: var(--oj-drawer-overlay-bg-color);
}

oj-drawer-popup:not(.oj-complete) {
  visibility: hidden;
}

.oj-drawer-full-height {
  height: 100%;
}

.oj-drawer-disable-body-overflow {
  overflow: hidden !important;
}

.oj-drawer-popup-surrogate:not(.oj-component-overlay) {
  position: relative;
}

.oj-drawer-popup-surrogate {
  z-index: var(--oj-core-z-index-popup);
}

.oj-drawer-popup-surrogate.oj-drawer-modal {
  z-index: var(--oj-core-z-index-dialog);
}

.oj-drawer-popup-surrogate.oj-drawer-modal.oj-focus-within {
  z-index: calc(var(--oj-core-z-index-dialog) + 1);
}

.oj-drawer-popup-surrogate oj-drawer-popup {
  position: absolute;
  background: var(--oj-drawer-overlay-bg-color);
  overflow-y: auto;
}

.oj-drawer-popup-surrogate .oj-drawer-start,
.oj-drawer-popup-surrogate .oj-drawer-end {
  height: 100vh;
  max-height: 100vh;
  max-width: 90vw;
  min-width: 320px;
}

.oj-drawer-popup-surrogate .oj-drawer-full-overlay {
  width: 100%;
  max-width: 100%;
}

.oj-drawer-popup-surrogate .oj-drawer-bottom {
  width: 100vw;
  max-width: 100vw;
  max-height: 90vh;
}

.oj-drawer-popup-surrogate .oj-drawer-bottom.oj-drawer-full-overlay {
  max-height: 100vh;
}

html:not([dir=rtl]) .oj-drawer-popup-surrogate .oj-drawer-start {
  box-shadow: 0.3rem 0 1.5rem rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

html[dir=rtl] .oj-drawer-popup-surrogate .oj-drawer-start {
  box-shadow: -0.3rem 0 1.5rem rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

html:not([dir=rtl]) .oj-drawer-popup-surrogate .oj-drawer-end {
  box-shadow: -0.3rem 0 1.5rem rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

html[dir=rtl] .oj-drawer-popup-surrogate .oj-drawer-end {
  box-shadow: 0.3rem 0 1.5rem rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

.oj-drawer-popup-surrogate .oj-drawer-bottom {
  box-shadow: 0 -0.3rem 0.3rem 0 rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

:root {
  --oj-diagram-node-border-color-hover: rgb(var(--oj-palette-neutral-rgb-120));
  --oj-diagram-link-color: rgb(var(--oj-palette-neutral-rgb-120));
  --oj-diagram-node-bg-color: rgb(var(--oj-palette-neutral-rgb-170));
}

oj-diagram:not(.oj-complete) {
  visibility: hidden;
}

oj-diagram {
  display: block;
}

.oj-diagram {
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 560px;
}

.oj-diagram-node {
  fill: var(--oj-diagram-node-bg-color);
}

.oj-diagram-node.oj-hover {
  border-top-color: var(--oj-diagram-node-border-color-hover);
  border-bottom-color: var(--oj-dvt-item-contrast-color);
}

.oj-diagram-node.oj-selected {
  border-color: var(--oj-dvt-item-border-color-selected);
}

.oj-diagram-node-label {
  font-size: var(--oj-dvt-label-font-size-sm);
  color: var(--oj-core-text-color-primary);
}

.oj-diagram-link {
  color: var(--oj-diagram-link-color);
  padding: 10px;
}

.oj-diagram-link.oj-hover {
  border-top-color: var(--oj-diagram-link-color);
  border-bottom-color: var(--oj-dvt-item-contrast-color);
}

.oj-diagram-link.oj-selected {
  border-color: var(--oj-dvt-item-border-color-selected);
}

.oj-diagram-link-label {
  font-size: var(--oj-dvt-label-font-size-sm);
  color: var(--oj-core-text-color-primary);
}

.oj-diagram .oj-active-drop {
  fill: var(--oj-core-drag-drop-color-1);
  fill-opacity: 0.75;
}

.oj-diagram .oj-invalid-drop {
  cursor: no-drop;
}

.oj-diagram-node.oj-active-drop {
  fill: var(--oj-core-drag-drop-color-1);
  fill-opacity: 0.75;
}

.oj-diagram-node.oj-invalid-drop {
  cursor: no-drop;
}

.oj-diagram-link.oj-active-drop {
  stroke: var(--oj-core-drag-drop-color-1);
  stroke-opacity: 0.75;
}

.oj-diagram-link.oj-invalid-drop {
  cursor: no-drop;
}

.oj-diagram-overview {
  background-color: var(--oj-dvt-overview-bg-color);
  padding: 0px;
}

.oj-diagram-overview-content {
  padding: 10px;
}

.oj-diagram-overview-viewport {
  background-color: var(--oj-dvt-overview-window-bg-color);
  border-color: var(--oj-dvt-overview-window-border-color);
}

.oj-diagram-overview-container-node {
  fill-opacity: 0.25;
}

/* resizable */
/* --------------------------------------------------------------- */
.oj-resizable {
  position: relative;
}

.oj-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  z-index: var(--oj-private-core-z-index-resizable);
  -webkit-user-select: none;
  user-select: none;
}

.oj-resizable-disabled .oj-resizable-handle,
.oj-resizable-autohide .oj-resizable-handle {
  display: none;
}

.oj-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.oj-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.oj-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.oj-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.oj-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

.oj-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.oj-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.oj-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

:root {
  --oj-dialog-bg-color: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-dialog-border-color: rgba(var(--oj-palette-neutral-rgb-190), 0.1);
  --oj-dialog-border-radius: var(--oj-core-border-radius-lg);
  --oj-dialog-box-shadow: var(--oj-core-box-shadow-xl);
  --oj-dialog-cancel-icon-margin-top: -1.5rem;
  --oj-dialog-cancel-icon-margin-end: -1.5rem;
  --oj-dialog-header-padding: 2.75rem 2rem 0.75rem;
  --oj-dialog-body-padding: 0 2rem 1rem 2rem;
  --oj-dialog-footer-padding: 1rem 2rem 2rem 2rem;
  --oj-dialog-header-bg-color: transparent;
  --oj-dialog-header-border-color: transparent;
  --oj-dialog-title-font-size: var(--oj-typography-heading-xs-font-size);
  --oj-dialog-title-line-height: var(--oj-typography-heading-xs-line-height);
  --oj-dialog-title-font-weight: var(--oj-typography-heading-xs-font-weight);
  --oj-dialog-title-text-color: var(--oj-core-text-color-primary);
}

/* typography                 */
/* -------------------------- */
@media screen and (max-width: 599.9px) {
  :root {
    --oj-dialog-header-padding: 2.5rem 1rem 0.75rem;
    --oj-dialog-body-padding: 0 1rem 1rem 1rem;
    --oj-dialog-footer-padding: 1rem 1rem 2rem 1rem;
  }
}
.oj-dialog {
  --oj-current-bg-color: var(--oj-dialog-bg-color);
}

/* dialog */
/* --------------------------------------------------------------- */
oj-dialog {
  display: none;
}

.oj-dialog-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: inherit;
}

/* defines the stacking context of the dialog and for it's children '**/
.oj-dialog-layer {
  z-index: var(--oj-core-z-index-dialog);
}

.oj-dialog-layer.oj-focus-within {
  z-index: calc(var(--oj-core-z-index-dialog) + 1);
}

.oj-dialog {
  width: 600px;
  min-width: 200px;
  max-width: calc(100vw - 3rem);
  max-height: calc(100vh - 3rem);
  height: auto;
  box-sizing: border-box;
  box-shadow: var(--oj-dialog-box-shadow);
  background: var(--oj-dialog-bg-color);
  border: 1px solid var(--oj-dialog-border-color);
  border-radius: var(--oj-dialog-border-radius);
}

.oj-dialog-sheet {
  width: 100vw;
  max-width: 100vw;
  min-width: initial;
  max-height: 100vh;
  border-radius: var(--oj-dialog-border-radius) var(--oj-dialog-border-radius) 0px 0px;
}

.oj-dialog-full {
  min-width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  border-radius: 0px;
}

/* this media query is needed to make sure -webkit-fill-available gets applied
     on Safari/iOS only. It returns incorrect values in Chrome. */
@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
  .oj-dialog-sheet {
    max-height: -webkit-fill-available;
  }
  .oj-dialog-full {
    min-height: -webkit-fill-available;
    max-height: -webkit-fill-available;
    height: -webkit-fill-available;
  }
}
.oj-dialog.oj-resizable {
  position: absolute;
}

.oj-dialog-header {
  flex: 0 0 auto;
  border-width: 0 0 1px 0;
  border-style: solid;
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: var(--oj-dialog-header-padding);
  background-color: var(--oj-dialog-header-bg-color);
  border-bottom-color: var(--oj-dialog-header-border-color);
}

.oj-draggable .oj-dialog-header,
.oj-draggable .oj-dialog-title {
  cursor: move;
}

.oj-dialog-header-close-wrapper {
  margin-block-start: var(--oj-dialog-cancel-icon-margin-top);
  margin-inline-end: var(--oj-dialog-cancel-icon-margin-end);
}

.oj-dialog-title {
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  align-self: center;
  font-size: var(--oj-dialog-title-font-size);
  line-height: var(--oj-dialog-title-line-height);
  color: var(--oj-dialog-title-text-color);
  font-weight: var(--oj-dialog-title-font-weight);
  margin: 0;
  padding: 0;
}

.oj-dialog-header-close .oj-dialog-title {
  padding-inline-end: 0.2rem;
}

.oj-dialog-content > p:last-child {
  margin-bottom: 0;
}

.oj-dialog-content {
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

.oj-dialog-body-wrapper {
  height: 100%;
}

.oj-dialog-body {
  position: relative;
  overflow: auto;
  box-sizing: border-box;
  padding: var(--oj-dialog-body-padding);
}

.oj-dialog-footer-separator {
  border-top: 1px solid var(--oj-core-divider-color);
}

.oj-dialog-footer {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  padding: var(--oj-dialog-footer-padding);
  text-align: end;
}

.oj-dialog-footer > .oj-button,
.oj-dialog-footer > .oj-button > .oj-button-button {
  margin-left: var(--oj-core-spacing-1x);
}

.oj-dialog:focus,
.oj-dialog-header-close-wrapper:focus {
  outline: none;
}

.oj-dialog.oj-focus-highlight,
.oj-dialog-header-close-wrapper.oj-focus-highlight {
  outline: dotted 1px var(--oj-core-focus-border-color);
}

.oj-dialog-layer.oj-focus-within,
.oj-dialog-layer.oj-animate-open {
  z-index: calc(var(--oj-core-z-index-dialog) + 1);
}

.oj-dialog-option-defaults {
  font-family: '{"animation":{"normal":{"open":[{"effect":"zoomIn"},"fadeIn"],"close":[{"effect":"zoomOut"},"fadeOut"]},"sheet":{"open":[{"effect":"slideIn","direction":"top"},"fadeIn"],"close":[{"effect":"slideOut","direction":"bottom"},"fadeOut"]}},"resizeBehavior":"none","cancelBehavior":"none","dragAffordance":"none"}' !important;
}

.oj-private-scale-lg {
  --oj-dialog-border-radius: 6px;
  --oj-dialog-cancel-icon-margin-top: -24px;
  --oj-dialog-cancel-icon-margin-end: -24px;
  --oj-dialog-header-padding: 32px 32px 12px;
  --oj-dialog-body-padding: 0 32px 16px 32px;
  --oj-dialog-footer-padding: 16px 32px 32px 32px;
  --oj-dialog-title-font-size: 20px;
  --oj-dialog-title-line-height: 1.4;
  --oj-dialog-title-font-weight: 900;
}

.oj-dialog-header {
  background-image: url("images/texture-dialog-144x20-opacity-08.png");
  background-repeat: repeat-x;
  background-size: auto 1.25rem;
}

:root {
  --oj-file-picker-border-color: rgba(var(--oj-palette-neutral-rgb-190), 0.65);
  --oj-file-picker-border-width: 1px;
  --oj-file-picker-border-radius: var(--oj-core-border-radius-xl);
}

oj-file-picker:not(.oj-complete) {
  visibility: hidden;
}

.oj-filepicker {
  display: inline-block;
}

.oj-filepicker-no-trigger.oj-filepicker {
  max-width: 400px;
  width: 100%;
  display: block;
}

.oj-filepicker-container {
  height: 100%;
}

.oj-filepicker-disabled,
.oj-filepicker-dropzone {
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-radius: var(--oj-file-picker-border-radius);
  padding: 1.5rem;
  border-style: dashed;
  border-width: var(--oj-file-picker-border-width);
  height: 100%;
}

.oj-filepicker-disabled {
  background-color: var(--oj-core-color-disabled-1);
  border-color: transparent;
}

.oj-filepicker-dropzone {
  background-color: var(--oj-core-bg-color-content);
  border-color: var(--oj-file-picker-border-color);
}

.oj-filepicker-dropzone.oj-invalid-drop {
  border-color: var(--oj-core-danger-1);
}

.oj-filepicker-dropzone:active {
  background-color: var(--oj-core-bg-color-active);
}

.oj-filepicker-dropzone.oj-valid-drop {
  background-color: var(--oj-core-bg-color-hover);
}

.oj-filepicker-dropzone:hover:not(.oj-filepicker-disabled) {
  background-color: var(--oj-core-bg-color-hover);
  cursor: pointer;
}

/* 
     * Suppress focus ring
     */
.oj-filepicker-dropzone:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

.oj-filepicker-dropzone:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-filepicker-text {
  font-size: var(--oj-typography-body-xl-font-size);
  font-weight: bold;
  color: var(--oj-core-text-color-primary);
  margin-bottom: 6px;
}

.oj-filepicker-secondary-text {
  font-size: var(--oj-typography-body-sm-font-size);
  line-height: var(--oj-typography-body-sm-line-height);
  color: var(--oj-core-text-color-secondary);
}

.oj-filepicker-disabled .oj-filepicker-text,
.oj-filepicker-disabled .oj-filepicker-secondary-text {
  color: var(--oj-core-text-color-disabled);
}

/* filmstrip */
/* --------------------------------------------------------------- */
oj-film-strip:not(.oj-complete) {
  visibility: hidden;
}

.oj-filmstrip {
  min-height: 1px;
  min-width: 1px;
  overflow: hidden;
}

.oj-filmstrip:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-filmstrip:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

.oj-filmstrip-container {
  position: relative;
  display: flex;
}

.oj-filmstrip-vertical.oj-filmstrip-container,
.oj-filmstrip-vertical .oj-filmstrip-container {
  flex-direction: column;
}

.oj-filmstrip-content-container {
  overflow: hidden;
}

.oj-filmstrip-pages-container,
.oj-filmstrip-page,
.oj-filmstrip-content-container {
  flex-grow: 1;
  flex-shrink: 0;
}

.oj-filmstrip-item-container {
  align-items: center;
  justify-content: space-around;
}

.oj-filmstrip-item {
  flex-grow: 0;
  flex-shrink: 0;
}

.oj-filmstrip-transition {
  transition: transform var(--oj-animation-duration-long);
  transition-timing-function: var(--oj-animation-ease-in-out);
}

.oj-filmstrip-transition-display-as-firstpage {
  order: -1;
}

.oj-filmstrip-transition-display-as-lastpage {
  order: 1;
}

html:not([dir=rtl]) .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-next-oldpage-to,
html:not([dir=rtl]) .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-next-newpage-to {
  transform: translate3d(-100%, 0, 0);
}

html[dir=rtl] .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-next-oldpage-to,
html[dir=rtl] .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-next-newpage-to {
  transform: translate3d(100%, 0, 0);
}

html:not([dir=rtl]) .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-prev-oldpage-to,
html:not([dir=rtl]) .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-prev-newpage-to {
  transform: translate3d(100%, 0, 0);
}

html[dir=rtl] .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-prev-oldpage-to,
html[dir=rtl] .oj-filmstrip:not(.oj-filmstrip-vertical) .oj-filmstrip-transition-prev-newpage-to {
  transform: translate3d(-100%, 0, 0);
}

.oj-filmstrip.oj-filmstrip-vertical .oj-filmstrip-transition-next-oldpage-to,
.oj-filmstrip.oj-filmstrip-vertical .oj-filmstrip-transition-next-newpage-to {
  transform: translate3d(0, -100%, 0);
}

.oj-filmstrip.oj-filmstrip-vertical .oj-filmstrip-transition-prev-oldpage-to,
.oj-filmstrip.oj-filmstrip-vertical .oj-filmstrip-transition-prev-newpage-to {
  transform: translate3d(0, 100%, 0);
}

/* navigation arrows */
.oj-filmstrip-arrow-container {
  display: flex;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  align-self: center;
}

.oj-filmstrip-vertical .oj-filmstrip-arrow-container {
  flex-direction: column;
}

.oj-filmstrip-arrow-container-overlay {
  position: absolute;
}

html:not([dir=rtl]) .oj-filmstrip-arrow-container-overlay.oj-start {
  left: 0;
}

html[dir=rtl] .oj-filmstrip-arrow-container-overlay.oj-start {
  right: 0;
}

html:not([dir=rtl]) .oj-filmstrip-arrow-container-overlay.oj-end {
  right: 0;
}

html[dir=rtl] .oj-filmstrip-arrow-container-overlay.oj-end {
  left: 0;
}

.oj-filmstrip-arrow-container-overlay.oj-start,
.oj-filmstrip-arrow-container-overlay.oj-end {
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

.oj-filmstrip-arrow-container-overlay.oj-top {
  top: 0;
}

.oj-filmstrip-arrow-container-overlay.oj-bottom {
  bottom: 0;
}

html:not([dir=rtl]) .oj-filmstrip-arrow-container-overlay.oj-top,
html:not([dir=rtl]) .oj-filmstrip-arrow-container-overlay.oj-bottom {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

html[dir=rtl] .oj-filmstrip-arrow-container-overlay.oj-top,
html[dir=rtl] .oj-filmstrip-arrow-container-overlay.oj-bottom {
  right: 50%;
  transform: translate3d(50%, 0, 0);
}

.oj-filmstrip-arrow {
  box-sizing: border-box;
  width: var(--oj-button-height);
  height: var(--oj-button-height);
  cursor: var(--oj-core-cursor-clickable);
  border-radius: var(--oj-button-border-radius);
  border: 1px solid;
  display: flex;
  outline: none;
  justify-content: center;
  align-items: center;
}

.oj-filmstrip-arrow.oj-default {
  border-color: transparent;
}

.oj-filmstrip-arrow.oj-hover {
  background-color: var(--oj-button-borderless-chrome-bg-color-hover);
  border-color: var(--oj-button-borderless-chrome-border-color-hover);
}

.oj-filmstrip-arrow.oj-active,
.oj-filmstrip-arrow.oj-active.oj-hover {
  background-color: var(--oj-button-borderless-chrome-bg-color-active);
  border-color: var(--oj-button-borderless-chrome-border-color-active);
}

/* navigation arrow icons */
.oj-filmstrip-arrow .oj-filmstrip-arrow-icon {
  cursor: inherit;
}

.oj-filmstrip-arrow.oj-default .oj-filmstrip-arrow-icon {
  color: var(--oj-button-borderless-chrome-text-color);
}

.oj-filmstrip-arrow.oj-hover .oj-filmstrip-arrow-icon {
  color: var(--oj-button-borderless-chrome-text-color-hover);
}

.oj-filmstrip-arrow.oj-active .oj-filmstrip-arrow-icon,
.oj-filmstrip-arrow.oj-active.oj-hover .oj-filmstrip-arrow-icon {
  color: var(--oj-button-borderless-chrome-text-color-active);
}

.oj-filmstrip-arrow-transition {
  transition: opacity var(--oj-animation-duration-medium);
  transition-timing-function: var(--oj-animation-ease-in-out);
}

.oj-filmstrip.oj-filmstrip-hover .oj-filmstrip-arrow-transition.oj-filmstrip-arrow-container {
  opacity: 1;
}

.oj-filmstrip.oj-filmstrip-hover .oj-filmstrip-arrow-transition.oj-filmstrip-arrow {
  opacity: 1;
}

.oj-filmstrip:not(.oj-filmstrip-hover) .oj-filmstrip-arrow-transition {
  opacity: 0;
}

:root.oj-scale-sm {
  --oj-form-layout-margin-bottom: 1rem;
}

oj-form-layout {
  display: block;
}

.oj-form-cols-labels-inline {
  column-width: var(--oj-form-layout-start-edge-column-min-width);
  column-gap: var(--oj-form-layout-column-gutter);
}

.oj-form-cols {
  column-width: var(--oj-form-layout-column-min-width);
  column-gap: var(--oj-form-layout-column-gutter);
}

.oj-form-layout-no-min-column-width .oj-form-cols,
.oj-form-layout-no-min-column-width .oj-form-cols-labels-inline {
  column-width: auto;
}

.oj-form-cols > .oj-flex,
.oj-form-cols-labels-inline > .oj-flex,
.oj-form-cols > .oj-flex > .oj-flex-item,
.oj-form-cols-labels-inline > .oj-flex > .oj-flex-item {
  -ms-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
}

.oj-formlayout-max-cols-1 > .oj-form:not(.oj-formlayout-form-across) {
  display: inline;
}

.oj-form-layout > .oj-form:not(.oj-formlayout-form-across) > .oj-flex {
  display: inline;
}

.oj-form > hr,
.oj-form > h1,
.oj-form > h2,
.oj-form > h3,
.oj-form > h4 {
  margin: calc(15px - var(--oj-form-layout-margin-bottom)) 0 15px 0;
}

.oj-form > .oj-form-control,
.oj-form > .oj-form-non-control {
  margin-bottom: var(--oj-form-layout-margin-bottom);
}

.oj-form > .oj-flex > .oj-flex-item > .oj-form {
  text-align: left;
}

html[dir=rtl] .oj-form > .oj-flex > .oj-flex-item > .oj-form {
  text-align: right;
}

.oj-form.oj-label-value > .oj-flex > .oj-flex-item:first-child {
  margin: 0;
}

.oj-form > .oj-flex > .oj-flex-item > .oj-form-non-control {
  margin-bottom: var(--oj-private-core-wrappable-margin-bottom);
}

.oj-form > .oj-flex {
  border-style: solid;
  border-color: var(--oj-core-divider-color);
  border-width: 0 0 var(--oj-form-layout-divider-width) 0;
  padding: var(--oj-form-layout-divider-margin) 0 0;
}

.oj-form-layout > .oj-form[class*=oj-form-cols-] > .oj-flex:last-child {
  border-width: 0 0 var(--oj-form-layout-divider-width) 0;
}

.oj-form > .oj-flex:last-child {
  border-width: 0;
}

.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label,
.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label,
.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label-value .oj-label,
.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label-value .oj-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
.oj-formlayout-inline-label > .oj-label {
  width: 100%;
  box-sizing: border-box;
  text-align: var(--oj-form-layout-start-edge-label-text-align);
}

.oj-formlayout-inline-value {
  text-align: var(--oj-form-layout-start-edge-value-text-align);
}

.oj-formlayout-inline-label .oj-label-required-icon {
  margin-top: 1px;
}

.oj-formlayout-inline-label .oj-label-required-icon,
.oj-formlayout-inline-label .oj-label-help-icon,
.oj-formlayout-inline-label label,
.oj-formlayout-inline-label .oj-label-help-icon-anchor {
  float: none;
}

html:not([dir=rtl]) .oj-formlayout-inline-label .oj-label-required-icon,
html:not([dir=rtl]) .oj-formlayout-inline-label .oj-label-help-icon {
  margin-left: 0;
  margin-right: 6px;
}

html[dir=rtl] .oj-formlayout-inline-label .oj-label-required-icon,
html[dir=rtl] .oj-formlayout-inline-label .oj-label-help-icon {
  margin-right: 0;
  margin-left: 6px;
}

.oj-formlayout .oj-form.oj-enabled.oj-form-cols-labels-inline .oj-label,
.oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
.oj-formlayout-inline-label > .oj-label {
  display: inline-flex;
  align-items: center;
}

html:not([dir=rtl]) .oj-formlayout .oj-form.oj-enabled.oj-form-cols-labels-inline .oj-label,
html:not([dir=rtl]) .oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
html:not([dir=rtl]) .oj-formlayout-inline-label > .oj-label {
  padding-right: var(--oj-form-layout-start-edge-label-to-value-padding);
}

html[dir=rtl] .oj-formlayout .oj-form.oj-enabled.oj-form-cols-labels-inline .oj-label,
html[dir=rtl] .oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
html[dir=rtl] .oj-formlayout-inline-label > .oj-label {
  padding-left: var(--oj-form-layout-start-edge-label-to-value-padding);
}

.oj-form-layout > .oj-form.oj-enabled > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label.oj-inputtext-label,
.oj-form-layout > .oj-form.oj-enabled > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label.oj-inputpassword-label,
.oj-form-layout > .oj-form.oj-enabled > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label.oj-inputnumber-label,
.oj-form-layout > .oj-form.oj-enabled > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label.oj-inputdate-label,
.oj-form-layout > .oj-form.oj-enabled > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label.oj-inputtime-label,
.oj-form-layout > .oj-form.oj-enabled > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label.oj-inputdatetime-label,
.oj-form-layout > .oj-form.oj-enabled > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label.oj-select-label,
.oj-form-layout > .oj-form.oj-enabled > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label.oj-combobox-label,
.oj-form-layout > .oj-form.oj-enabled > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label.oj-searchselect-label,
.oj-form-layout > .oj-form.oj-enabled > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label.oj-textarea-label,
oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label:not(.oj-read-only).oj-inputtext-label,
oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label:not(.oj-read-only).oj-inputpassword-label,
oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label:not(.oj-read-only).oj-inputnumber-label,
oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label:not(.oj-read-only).oj-inputdate-label,
oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label:not(.oj-read-only).oj-inputtime-label,
oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label:not(.oj-read-only).oj-inputdatetime-label,
oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label:not(.oj-read-only).oj-select-label,
oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label:not(.oj-read-only).oj-combobox-label,
oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label:not(.oj-read-only).oj-searchselect-label,
oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label:not(.oj-read-only).oj-textarea-label {
  min-height: var(--oj-text-field-height);
}

.oj-formlayout-inline-label > .oj-label-inline-top {
  margin-top: 0;
}

.oj-formlayout .oj-form.oj-enabled.oj-form-cols-labels-inline .oj-label.oj-switch-label,
.oj-formlayout-inline-label > .oj-switch-label:not(.oj-read-only),
.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-switch-label:not(.oj-read-only) {
  min-height: var(--oj-core-touch-target-min-size);
}

.oj-formlayout .oj-form.oj-form-cols-labels-inline .oj-label.oj-slider-label,
.oj-formlayout-inline-label > .oj-slider-label:not(.oj-read-only),
.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-slider-label:not(.oj-read-only) {
  min-height: var(--oj-core-touch-target-min-size);
  align-items: center;
}

.oj-formlayout .oj-form.oj-enabled.oj-form-cols-labels-inline .oj-label.oj-radioset-label,
.oj-formlayout .oj-form.oj-enabled.oj-form-cols-labels-inline .oj-label.oj-checkboxset-label,
.oj-formlayout-inline-label > .oj-radioset-label:not(.oj-read-only),
.oj-formlayout-inline-label > .oj-checkboxset-label:not(.oj-read-only),
.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label:not(.oj-read-only),
.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label:not(.oj-read-only) {
  margin-top: calc((var(--oj-radio-checkbox-row-height) - var(--oj-typography-body-md-font-size) * var(--oj-typography-body-md-line-height) - 1px) / 2 + var(--oj-typography-body-md-font-size) - var(--oj-label-font-size));
}

.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label > .oj-label-group,
.oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label > .oj-label-group {
  width: inherit;
  overflow: inherit;
  text-overflow: inherit;
}

.oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label > .oj-label-group,
.oj-formlayout-inline-label > .oj-label > .oj-label-group {
  width: inherit;
  overflow: inherit;
  text-overflow: inherit;
}

.oj-form.oj-formlayout-form-across > .oj-flex {
  padding-left: 0;
  padding-right: 0;
}

.oj-formlayout-max-cols-1:not(.oj-formlayout-full-width) {
  max-width: var(--oj-form-layout-column-max-width);
}

.oj-formlayout-max-cols-2:not(.oj-formlayout-full-width) {
  max-width: calc(2 * var(--oj-form-layout-column-max-width));
}

.oj-formlayout-max-cols-3:not(.oj-formlayout-full-width) {
  max-width: calc(3 * var(--oj-form-layout-column-max-width));
}

.oj-formlayout-max-cols-4:not(.oj-formlayout-full-width) {
  max-width: calc(4 * var(--oj-form-layout-column-max-width));
}

.oj-formlayout-max-cols-5:not(.oj-formlayout-full-width) {
  max-width: calc(5 * var(--oj-form-layout-column-max-width));
}

.oj-formlayout-max-cols-6:not(.oj-formlayout-full-width) {
  max-width: calc(6 * var(--oj-form-layout-column-max-width));
}

.oj-formlayout-max-cols-1.oj-formlayout-labels-inline:not(.oj-formlayout-full-width) {
  max-width: var(--oj-form-layout-start-edge-column-max-width);
}

.oj-formlayout-max-cols-2.oj-formlayout-labels-inline:not(.oj-formlayout-full-width) {
  max-width: calc(2 * var(--oj-form-layout-start-edge-column-max-width));
}

.oj-formlayout-max-cols-3.oj-formlayout-labels-inline:not(.oj-formlayout-full-width) {
  max-width: calc(3 * var(--oj-form-layout-start-edge-column-max-width));
}

.oj-formlayout-max-cols-4.oj-formlayout-labels-inline:not(.oj-formlayout-full-width) {
  max-width: calc(4 * var(--oj-form-layout-start-edge-column-max-width));
}

.oj-formlayout-max-cols-5.oj-formlayout-labels-inline:not(.oj-formlayout-full-width) {
  max-width: calc(5 * var(--oj-form-layout-start-edge-column-max-width));
}

.oj-formlayout-max-cols-6.oj-formlayout-labels-inline:not(.oj-formlayout-full-width) {
  max-width: calc(6 * var(--oj-form-layout-start-edge-column-max-width));
}

.oj-form-layout > .oj-form {
  padding-left: var(--oj-form-layout-horizontal-margin);
  padding-right: var(--oj-form-layout-horizontal-margin);
}

.oj-form-layout > .oj-form > .oj-flex > .oj-flex-item > .oj-form-layout > .oj-form {
  padding-left: 0px;
  padding-right: 0px;
}

.oj-form-layout.oj-formlayout-form-across > .oj-form {
  padding-left: 0px;
  padding-right: 0px;
  column-gap: 0px;
}

.oj-formlayout-labels-inline > .oj-form > .oj-flex {
  flex-wrap: nowrap;
}

.oj-formlayout-column-gutter {
  flex: 0 1 var(--oj-form-layout-column-gutter);
}

.oj-label-value.oj-form > .oj-flex {
  padding-top: 0;
}

.oj-form-layout-option-defaults {
  font-family: '{"labelEdge":"inside","colspanWrap":"wrap","direction":"row","columnGap":"var(--oj-form-layout-column-gutter)"}' !important;
}

oj-form-layout:not(.oj-complete) {
  visibility: hidden;
}

:root {
  --oj-private-gantt-dependency-rectilinear-line-color: rgb(var(--oj-palette-neutral-rgb-100));
  --oj-private-gantt-dependency-straight-line-color: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-private-gantt-task-bg-color: rgb(95, 162, 186);
  --oj-private-gantt-task-border-color: rgba(var(--oj-palette-neutral-rgb-190), 0.5);
  --oj-private-gantt-task-progress-bg-color: var(--oj-private-gantt-task-bg-color);
  --oj-private-gantt-task-progress-border-color: var(--oj-private-gantt-task-border-color);
  --oj-private-gantt-task-downtime-bg-color: rgb(var(--oj-palette-neutral-rgb-170));
  --oj-private-gantt-task-overtime-bg-color: rgba(var(--oj-palette-neutral-rgb-190), 0.16);
  --oj-private-gantt-task-attribute-bg-color: rgb(251, 194, 106);
  --oj-private-gantt-task-drag-image-border-color: var(--oj-private-gantt-task-border-color);
  --oj-private-gantt-task-label-color: var(--oj-core-text-color-primary);
  --oj-private-gantt-task-summary-bg-color: rgba(var(--oj-palette-neutral-rgb-160));
  --oj-private-gantt-task-summary-border-color: var(--oj-private-gantt-task-border-color);
  --oj-private-gantt-task-summary-progress-bg-color: var(--oj-private-gantt-task-summary-bg-color);
  --oj-private-gantt-task-milestone-bg-color: rgba(var(--oj-palette-neutral-rgb-0));
  --oj-private-gantt-task-milestone-border-color: var(--oj-private-gantt-task-border-color);
  --oj-private-gantt-baseline-bg-color: rgb(var(--oj-palette-neutral-rgb-100));
  --oj-private-gantt-baseline-milestone-bg-color: rgb(var(--oj-palette-neutral-rgb-100));
}

oj-gantt:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the gantt widget */
.oj-gantt {
  animation-duration: var(--oj-animation-duration-xlong);
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  width: 100%;
  height: 35rem;
}

/* Styling for the container (around time axis and databody) */
.oj-gantt-container {
  fill: transparent;
  stroke-width: 2px;
}

/* Styling for the empty text */
.oj-gantt-no-data-message {
  fill: var(--oj-core-text-color-secondary);
  font-size: var(--oj-dvt-label-font-size-md);
}

/* Styling for horizontal grid lines */
.oj-gantt-horizontal-gridline {
  stroke: var(--oj-private-dvt-gridline-color);
  stroke-width: 1px;
}

/* Styling for vertical grid lines */
.oj-gantt-major-vertical-gridline {
  stroke: var(--oj-private-dvt-gridline-color);
}

.oj-gantt-minor-vertical-gridline {
  stroke: var(--oj-private-dvt-gridline-color);
  stroke-dasharray: 4, 4;
}

/* Styling for all rows */
.oj-gantt-row {
  fill: transparent;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Styling for row focus highlight */
.oj-gantt-row.oj-focus-highlight {
  stroke-width: 1px;
  stroke-dasharray: 1 1;
  stroke: var(--oj-core-focus-border-color);
}

/* Styling for selectd row  */
.oj-gantt-row.oj-selected {
  fill: var(--oj-core-bg-color-selected);
}

/* Styling related to rows as drop targets */
.oj-gantt-row.oj-active-drop {
  fill: var(--oj-core-drag-drop-color-1);
}

/* Styling for all row labels */
.oj-gantt-row-label {
  fill: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-lg);
  font-weight: normal;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Styling for all tasks */
.oj-gantt-task {
  fill: var(--oj-private-gantt-task-bg-color);
  filter: none;
  height: 1.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 0.25rem;
}

/* Opaque background behind all tasks */
.oj-gantt-task-backdrop {
  fill: #ffffff;
}

/* Styling for all tasks when hover */
.oj-gantt-task.oj-hover {
  fill: none;
  stroke-width: 1px;
  stroke: var(--oj-dvt-item-border-color-selected);
}

/* Styling for all tasks when focus */
.oj-gantt-task.oj-focus {
  fill: none;
  stroke-width: 1px;
  stroke: var(--oj-dvt-item-border-color-selected);
}

/* Styling for all tasks when selected */
.oj-gantt-task.oj-selected {
  fill: none;
  stroke-width: 2px;
  stroke: var(--oj-dvt-item-border-color-selected);
}

/* Styling for all task bars */
.oj-gantt-task-bar {
  fill: var(--oj-private-gantt-task-bg-color);
  stroke: var(--oj-private-gantt-task-border-color);
  stroke-width: 1px;
}

.oj-gantt-task-bar.oj-gantt-task-progress-container,
.oj-gantt-task-summary.oj-gantt-task-progress-container {
  fill-opacity: 0.2;
}

/* Styling for all milestone tasks */
.oj-gantt-task-milestone {
  fill: var(--oj-private-gantt-task-milestone-bg-color);
  stroke: var(--oj-private-gantt-task-milestone-border-color);
  border-radius: 1px;
  stroke-width: 1px;
}

/* Styling for all summary tasks */
.oj-gantt-task-summary {
  fill: var(--oj-private-gantt-task-summary-bg-color);
  stroke: var(--oj-private-gantt-task-summary-border-color);
  filter: none;
}

/* Styling related to interactivity */
.oj-gantt-task.oj-draggable,
.oj-gantt-task-label.oj-draggable,
.oj-gantt-task-progress.oj-draggable {
  cursor: move;
}

.oj-gantt-task-drag-image {
  fill: var(--oj-core-bg-color-hover);
  stroke: var(--oj-private-gantt-task-drag-image-border-color);
  stroke-width: 1px;
  stroke-dasharray: 3, 3;
}

.oj-gantt-task-resize-handle {
  opacity: 0;
}

.oj-gantt-task-resize-handle.oj-draggable {
  cursor: col-resize;
}

/* Styling for all task labels */
.oj-gantt-task-label {
  color: var(--oj-private-gantt-task-label-color);
  font-size: var(--oj-dvt-label-font-size-lg);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

/* Styling for all task progress indicators */
.oj-gantt-task-progress {
  fill: var(--oj-private-gantt-task-progress-bg-color);
  stroke: var(--oj-private-gantt-task-progress-border-color);
  stroke-width: 1px;
  border-radius: 0px;
}

.oj-gantt-task-summary-progress {
  fill: var(--oj-private-gantt-task-summary-progress-bg-color);
}

/* Styling for all task overtime bars */
.oj-gantt-task-overtime {
  fill: var(--oj-private-gantt-task-overtime-bg-color);
  stroke: var(--oj-private-gantt-task-border-color);
  stroke-width: 1px;
}

/* Styling for all task downtime bars */
.oj-gantt-task-downtime {
  fill: var(--oj-private-gantt-task-downtime-bg-color);
  border-radius: 1px;
  height: 0.25rem;
}

/* Styling for all task attribute bars */
.oj-gantt-task-attribute {
  fill: var(--oj-private-gantt-task-attribute-bg-color);
  stroke: var(--oj-private-gantt-task-border-color);
  stroke-width: 1px;
  height: 0.313rem;
}

/* Styling for all baseline */
.oj-gantt-baseline {
  fill: var(--oj-private-gantt-baseline-bg-color);
  filter: none;
  border-radius: 1px;
}

/* Styling for all baseline bars */
.oj-gantt-baseline-bar {
  fill: var(--oj-private-gantt-baseline-bg-color);
  height: 0.25rem;
  margin-top: 0.25rem;
}

/* Styling for all milestone baseline */
.oj-gantt-baseline-milestone {
  fill: var(--oj-private-gantt-baseline-milestone-bg-color);
  border-radius: 1px;
}

/* Styling for "highlightDependencies" selection behavior */
.oj-gantt-databody-dim .oj-gantt-task:not(.oj-gantt-task-highlight),
.oj-gantt-databody-dim .oj-gantt-task-progress:not(.oj-gantt-task-highlight),
.oj-gantt-databody-dim .oj-gantt-task-baseline:not(.oj-gantt-task-highlight),
.oj-gantt-databody-dim .oj-gantt-task-attribute:not(.oj-gantt-task-highlight),
.oj-gantt-databody-dim .oj-gantt-task-overtime:not(.oj-gantt-task-highlight),
.oj-gantt-databody-dim .oj-gantt-task-downtime:not(.oj-gantt-task-highlight),
.oj-gantt-databody-dim .oj-gantt-task-label:not(.oj-gantt-task-highlight),
.oj-gantt-databody-dim .oj-gantt-task-custom:not(.oj-gantt-task-highlight) {
  opacity: 0.4;
}

/* Styling for the major time axis */
.oj-gantt-major-axis {
  fill: transparent;
  stroke: var(--oj-private-dvt-gridline-color);
  height: 1.5rem;
}

/* Styling for the major time axis labels */
.oj-gantt-major-axis-label {
  fill: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-lg);
  font-weight: 600;
}

/* Styling for the major time axis separators */
.oj-gantt-major-axis-separator {
  stroke: var(--oj-private-dvt-gridline-color);
}

/* Styling for the minor time axis */
.oj-gantt-minor-axis {
  fill: transparent;
  stroke: var(--oj-private-dvt-gridline-color);
  height: 1.5rem;
}

/* Styling for the minor time axis labels */
.oj-gantt-minor-axis-label {
  fill: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-md);
  font-weight: normal;
}

/* Styling for the minor time axis separators */
.oj-gantt-minor-axis-separator {
  stroke: var(--oj-private-dvt-gridline-color);
  stroke-dasharray: 4, 4;
}

/* Styling for reference object */
.oj-gantt-reference-object-area {
  fill: var(--oj-dvt-reference-object-area-color);
  shape-rendering: crispEdges;
}

.oj-gantt-reference-object-line {
  stroke: var(--oj-dvt-reference-object-line-color);
  shape-rendering: crispEdges;
}

.oj-gantt-reference-object-inner-line {
  stroke: var(--oj-dvt-contrast-line-color);
  shape-rendering: crispEdges;
}

/* Styling for time cursor */
.oj-gantt-time-cursor-line {
  stroke: var(--oj-dvt-reference-object-line-color);
  shape-rendering: crispEdges;
  stroke-dasharray: 2, 2;
}

.oj-gantt-time-cursor-inner-line {
  stroke: var(--oj-dvt-contrast-line-color);
  shape-rendering: crispEdges;
  stroke-dasharray: 2, 2;
}

/* Styling for all dependency lines */
.oj-gantt-dependency-line {
  fill: none;
}

.oj-gantt-dependency-rectilinear-line {
  stroke: var(--oj-private-gantt-dependency-rectilinear-line-color);
  stroke-width: 2px;
  marker-end: url("#ojGanttDependencyMarkerEndAngle");
}

.oj-gantt-dependency-straight-line {
  stroke: var(--oj-private-gantt-dependency-straight-line-color);
  stroke-width: 1px;
}

.oj-gantt-dependency-start-open-straight-line {
  marker-start: url("#ojGanttDependencyMarkerOpenCircle");
}

.oj-gantt-dependency-start-closed-straight-line {
  marker-start: url("#ojGanttDependencyMarkerClosedCircle");
}

.oj-gantt-dependency-end-open-straight-line {
  marker-end: url("#ojGanttDependencyMarkerOpenCircle");
}

.oj-gantt-dependency-end-closed-straight-line {
  marker-end: url("#ojGanttDependencyMarkerClosedCircle");
}

/* Styling for all dependency lines when focus */
.oj-gantt-dependency-line.oj-focus {
  stroke-width: 3;
}

/* Styling for all dependency line connectors */
.oj-gantt-dependency-line-connector {
  stroke-width: 2px;
}

.oj-gantt-dependency-rectilinear-line-arrow-connector {
  fill: none;
  stroke: var(--oj-private-gantt-dependency-rectilinear-line-color);
}

.oj-gantt-dependency-straight-line-open-circle-connector {
  fill: #ffffff;
  stroke: var(--oj-private-gantt-dependency-straight-line-color);
}

.oj-gantt-dependency-straight-line-closed-circle-connector {
  fill: var(--oj-private-gantt-dependency-straight-line-color);
  stroke: none;
}

/* Styling for custom content containers */
.oj-gantt-task-custom svg,
.oj-gantt-dependency-line-custom svg {
  overflow: visible;
}

@media print, screen {
  .oj-sm-1 {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-sm-2 {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-sm-3 {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-sm-4 {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-sm-5 {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
  .oj-sm-6 {
    flex: 0 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .oj-sm-7 {
    flex: 0 1 58.33333% !important;
    max-width: 58.33333% !important;
    width: 58.33333% !important;
  }
  .oj-sm-8 {
    flex: 0 1 66.66667% !important;
    max-width: 66.66667% !important;
    width: 66.66667% !important;
  }
  .oj-sm-9 {
    flex: 0 1 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }
  .oj-sm-10 {
    flex: 0 1 83.33333% !important;
    max-width: 83.33333% !important;
    width: 83.33333% !important;
  }
  .oj-sm-11 {
    flex: 0 1 91.66667% !important;
    max-width: 91.66667% !important;
    width: 91.66667% !important;
  }
  .oj-sm-12 {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .oj-sm-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-sm-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 91.66667% !important;
    max-width: 91.66667% !important;
    width: 91.66667% !important;
  }
  .oj-sm-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-sm-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 83.33333% !important;
    max-width: 83.33333% !important;
    width: 83.33333% !important;
  }
  .oj-sm-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-sm-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }
  .oj-sm-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-sm-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 66.66667% !important;
    max-width: 66.66667% !important;
    width: 66.66667% !important;
  }
  .oj-sm-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
  .oj-sm-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 58.33333% !important;
    max-width: 58.33333% !important;
    width: 58.33333% !important;
  }
  .oj-sm-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .oj-sm-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .oj-sm-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 58.33333% !important;
    max-width: 58.33333% !important;
    width: 58.33333% !important;
  }
  .oj-sm-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
  .oj-sm-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 66.66667% !important;
    max-width: 66.66667% !important;
    width: 66.66667% !important;
  }
  .oj-sm-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-sm-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }
  .oj-sm-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-sm-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 83.33333% !important;
    max-width: 83.33333% !important;
    width: 83.33333% !important;
  }
  .oj-sm-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-sm-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 91.66667% !important;
    max-width: 91.66667% !important;
    width: 91.66667% !important;
  }
  .oj-sm-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-sm-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .oj-sm-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .oj-sm-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-sm-even-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-sm-even-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-sm-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-sm-even-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
}
@media print, screen and (min-width: 600px) {
  .oj-md-1 {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-md-2 {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-md-3 {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-md-4 {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-md-5 {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
  .oj-md-6 {
    flex: 0 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .oj-md-7 {
    flex: 0 1 58.33333% !important;
    max-width: 58.33333% !important;
    width: 58.33333% !important;
  }
  .oj-md-8 {
    flex: 0 1 66.66667% !important;
    max-width: 66.66667% !important;
    width: 66.66667% !important;
  }
  .oj-md-9 {
    flex: 0 1 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }
  .oj-md-10 {
    flex: 0 1 83.33333% !important;
    max-width: 83.33333% !important;
    width: 83.33333% !important;
  }
  .oj-md-11 {
    flex: 0 1 91.66667% !important;
    max-width: 91.66667% !important;
    width: 91.66667% !important;
  }
  .oj-md-12 {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .oj-md-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-md-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 91.66667% !important;
    max-width: 91.66667% !important;
    width: 91.66667% !important;
  }
  .oj-md-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-md-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 83.33333% !important;
    max-width: 83.33333% !important;
    width: 83.33333% !important;
  }
  .oj-md-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-md-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }
  .oj-md-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-md-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 66.66667% !important;
    max-width: 66.66667% !important;
    width: 66.66667% !important;
  }
  .oj-md-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
  .oj-md-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 58.33333% !important;
    max-width: 58.33333% !important;
    width: 58.33333% !important;
  }
  .oj-md-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .oj-md-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .oj-md-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 58.33333% !important;
    max-width: 58.33333% !important;
    width: 58.33333% !important;
  }
  .oj-md-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
  .oj-md-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 66.66667% !important;
    max-width: 66.66667% !important;
    width: 66.66667% !important;
  }
  .oj-md-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-md-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }
  .oj-md-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-md-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 83.33333% !important;
    max-width: 83.33333% !important;
    width: 83.33333% !important;
  }
  .oj-md-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-md-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 91.66667% !important;
    max-width: 91.66667% !important;
    width: 91.66667% !important;
  }
  .oj-md-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-md-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .oj-md-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .oj-md-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-md-even-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-md-even-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-md-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-md-even-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-lg-1 {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-lg-2 {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-lg-3 {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-lg-4 {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-lg-5 {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
  .oj-lg-6 {
    flex: 0 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .oj-lg-7 {
    flex: 0 1 58.33333% !important;
    max-width: 58.33333% !important;
    width: 58.33333% !important;
  }
  .oj-lg-8 {
    flex: 0 1 66.66667% !important;
    max-width: 66.66667% !important;
    width: 66.66667% !important;
  }
  .oj-lg-9 {
    flex: 0 1 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }
  .oj-lg-10 {
    flex: 0 1 83.33333% !important;
    max-width: 83.33333% !important;
    width: 83.33333% !important;
  }
  .oj-lg-11 {
    flex: 0 1 91.66667% !important;
    max-width: 91.66667% !important;
    width: 91.66667% !important;
  }
  .oj-lg-12 {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .oj-lg-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-lg-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 91.66667% !important;
    max-width: 91.66667% !important;
    width: 91.66667% !important;
  }
  .oj-lg-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-lg-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 83.33333% !important;
    max-width: 83.33333% !important;
    width: 83.33333% !important;
  }
  .oj-lg-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-lg-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }
  .oj-lg-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-lg-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 66.66667% !important;
    max-width: 66.66667% !important;
    width: 66.66667% !important;
  }
  .oj-lg-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
  .oj-lg-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 58.33333% !important;
    max-width: 58.33333% !important;
    width: 58.33333% !important;
  }
  .oj-lg-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .oj-lg-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .oj-lg-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 58.33333% !important;
    max-width: 58.33333% !important;
    width: 58.33333% !important;
  }
  .oj-lg-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
  .oj-lg-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 66.66667% !important;
    max-width: 66.66667% !important;
    width: 66.66667% !important;
  }
  .oj-lg-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-lg-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }
  .oj-lg-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-lg-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 83.33333% !important;
    max-width: 83.33333% !important;
    width: 83.33333% !important;
  }
  .oj-lg-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-lg-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 91.66667% !important;
    max-width: 91.66667% !important;
    width: 91.66667% !important;
  }
  .oj-lg-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-lg-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .oj-lg-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .oj-lg-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-lg-even-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-lg-even-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-lg-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-lg-even-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
}
@media screen and (min-width: 1440px) {
  .oj-xl-1 {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-xl-2 {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-xl-3 {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-xl-4 {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-xl-5 {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
  .oj-xl-6 {
    flex: 0 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .oj-xl-7 {
    flex: 0 1 58.33333% !important;
    max-width: 58.33333% !important;
    width: 58.33333% !important;
  }
  .oj-xl-8 {
    flex: 0 1 66.66667% !important;
    max-width: 66.66667% !important;
    width: 66.66667% !important;
  }
  .oj-xl-9 {
    flex: 0 1 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }
  .oj-xl-10 {
    flex: 0 1 83.33333% !important;
    max-width: 83.33333% !important;
    width: 83.33333% !important;
  }
  .oj-xl-11 {
    flex: 0 1 91.66667% !important;
    max-width: 91.66667% !important;
    width: 91.66667% !important;
  }
  .oj-xl-12 {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .oj-xl-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-xl-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 91.66667% !important;
    max-width: 91.66667% !important;
    width: 91.66667% !important;
  }
  .oj-xl-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-xl-odd-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 83.33333% !important;
    max-width: 83.33333% !important;
    width: 83.33333% !important;
  }
  .oj-xl-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-xl-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }
  .oj-xl-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-xl-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 66.66667% !important;
    max-width: 66.66667% !important;
    width: 66.66667% !important;
  }
  .oj-xl-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
  .oj-xl-odd-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 58.33333% !important;
    max-width: 58.33333% !important;
    width: 58.33333% !important;
  }
  .oj-xl-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .oj-xl-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .oj-xl-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 58.33333% !important;
    max-width: 58.33333% !important;
    width: 58.33333% !important;
  }
  .oj-xl-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
  .oj-xl-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 66.66667% !important;
    max-width: 66.66667% !important;
    width: 66.66667% !important;
  }
  .oj-xl-odd-cols-8 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-xl-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }
  .oj-xl-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-xl-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 83.33333% !important;
    max-width: 83.33333% !important;
    width: 83.33333% !important;
  }
  .oj-xl-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-xl-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 91.66667% !important;
    max-width: 91.66667% !important;
    width: 91.66667% !important;
  }
  .oj-xl-odd-cols-11 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-xl-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(odd) {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .oj-xl-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .oj-xl-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 8.33333% !important;
    max-width: 8.33333% !important;
    width: 8.33333% !important;
  }
  .oj-xl-even-cols-2 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 16.66667% !important;
    max-width: 16.66667% !important;
    width: 16.66667% !important;
  }
  .oj-xl-even-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  .oj-xl-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 33.33333% !important;
    max-width: 33.33333% !important;
    width: 33.33333% !important;
  }
  .oj-xl-even-cols-5 > .oj-flex > .oj-flex-item:nth-child(even) {
    flex: 0 1 41.66667% !important;
    max-width: 41.66667% !important;
    width: 41.66667% !important;
  }
}
.oj-icon-circle {
  border-radius: 50%;
  border: 0px solid transparent;
  box-sizing: border-box;
  display: inline-block;
}

.oj-icon-circle-inner {
  border-radius: 50%;
  color: var(--oj-avatar-text-color);
  background-color: var(--oj-avatar-bg-color);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  display: flex;
  background-size: 175px 175px;
  position: relative;
}

/*Don't need to specify medium size since it is the default*/
.oj-icon-circle-inner {
  height: var(--oj-avatar-size);
  width: var(--oj-avatar-size);
  font-size: 2rem;
}

.oj-icon-circle-xxs .oj-icon-circle-inner,
.oj-icon-xxs .oj-icon-circle-inner {
  font-size: 0.75rem;
}

.oj-icon-circle-xs .oj-icon-circle-inner,
.oj-icon-xs .oj-icon-circle-inner {
  font-size: 1rem;
}

.oj-icon-circle-sm .oj-icon-circle-inner,
.oj-icon-sm .oj-icon-circle-inner {
  font-size: 1.5rem;
}

.oj-icon-circle-lg .oj-icon-circle-inner,
.oj-icon-lg .oj-icon-circle-inner {
  font-size: 2.25rem;
}

.oj-icon-circle-xl .oj-icon-circle-inner,
.oj-icon-xl .oj-icon-circle-inner {
  font-size: 3.5rem;
}

.oj-icon-circle-xxl .oj-icon-circle-inner,
.oj-icon-xxl .oj-icon-circle-inner {
  font-size: 4.5rem;
}

.oj-icon-circle-inner::before {
  content: "";
  display: var(--oj-avatar-pattern-display);
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  filter: opacity(0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  background-image: url("images/avatar-pattern1.png");
}

.oj-icon-circle-xxs .oj-icon-circle-inner::before,
.oj-icon-circle-green .oj-icon-circle-inner::before,
.oj-icon-circle-forest .oj-icon-circle-inner::before,
.oj-icon-circle-sm.oj-icon-circle-orange .oj-icon-circle-inner::before,
.oj-icon-circle-sm.oj-icon-circle-red .oj-icon-circle-inner::before {
  background-size: 125px 125px;
}

.oj-icon-circle-orange .oj-icon-circle-inner::before,
.oj-icon-circle-red .oj-icon-circle-inner::before,
.oj-icon-circle-lg.oj-icon-circle-green .oj-icon-circle-inner::before,
.oj-icon-circle-sm.oj-icon-circle-green .oj-icon-circle-inner::before,
.oj-icon-circle-xs.oj-icon-circle-green .oj-icon-circle-inner::before,
.oj-icon-circle-xxs.oj-icon-circle-green .oj-icon-circle-inner::before,
.oj-icon-circle-lg.oj-icon-circle-forest .oj-icon-circle-inner::before,
.oj-icon-circle-sm.oj-icon-circle-forest .oj-icon-circle-inner::before,
.oj-icon-circle-xs.oj-icon-circle-forest .oj-icon-circle-inner::before,
.oj-icon-circle-xxs.oj-icon-circle-forest .oj-icon-circle-inner::before {
  background-size: 150px 150px;
}

.oj-icon-circle-xs .oj-icon-circle-inner::before,
.oj-icon-circle-xs.oj-icon-circle-orange .oj-icon-circle-inner::before,
.oj-icon-circle-xl.oj-icon-circle-orange .oj-icon-circle-inner::before,
.oj-icon-circle-xs.oj-icon-circle-red .oj-icon-circle-inner::before,
.oj-icon-circle-xl.oj-icon-circle-red .oj-icon-circle-inner::before {
  background-size: 175px 175px;
}

.oj-icon-circle-xxs.oj-icon-circle-blue .oj-icon-circle-inner::before,
.oj-icon-circle-xxl.oj-icon-circle-orange .oj-icon-circle-inner::before,
.oj-icon-circle-xxl.oj-icon-circle-red .oj-icon-circle-inner::before,
.oj-icon-circle-xl.oj-icon-circle-green .oj-icon-circle-inner::before,
.oj-icon-circle-xl.oj-icon-circle-forest .oj-icon-circle-inner::before {
  background-size: 200px 200px;
}

.oj-icon-circle-xxl .oj-icon-circle-inner::before,
.oj-icon-circle-xl .oj-icon-circle-inner::before,
.oj-icon-circle-sm.oj-icon-circle-purple .oj-icon-circle-inner::before,
.oj-icon-circle-xs.oj-icon-circle-purple .oj-icon-circle-inner::before,
.oj-icon-circle-xxs.oj-icon-circle-purple .oj-icon-circle-inner::before,
.oj-icon-circle-blue .oj-icon-circle-inner::before,
.oj-icon-circle-xxl.oj-icon-circle-green .oj-icon-circle-inner::before,
.oj-icon-circle-xxl.oj-icon-circle-forest .oj-icon-circle-inner::before {
  background-size: 250px 250px;
}

.oj-icon-circle-xs.oj-icon-circle-blue .oj-icon-circle-inner::before,
.oj-icon-circle-purple .oj-icon-circle-inner::before {
  background-size: 275px 275px;
}

.oj-icon-circle-gray .oj-icon-circle-inner::before,
.oj-icon-circle-mauve .oj-icon-circle-inner::before,
.oj-icon-circle-pink .oj-icon-circle-inner::before,
.oj-icon-circle-xl.oj-icon-circle-blue .oj-icon-circle-inner::before,
.oj-icon-circle-xxl.oj-icon-circle-blue .oj-icon-circle-inner::before,
.oj-icon-circle-teal .oj-icon-circle-inner::before,
.oj-icon-circle-xxl.oj-icon-circle-lilac .oj-icon-circle-inner::before,
.oj-icon-circle-xl.oj-icon-circle-lilac .oj-icon-circle-inner::before {
  background-size: 300px 300px;
}

.oj-icon-circle-xxs.oj-icon-circle-slate .oj-icon-circle-inner::before {
  background-size: 320px 320px;
}

.oj-icon-circle-lg.oj-icon-circle-purple .oj-icon-circle-inner::before,
.oj-icon-circle-xxl.oj-icon-circle-purple .oj-icon-circle-inner::before,
.oj-icon-circle-xl.oj-icon-circle-purple .oj-icon-circle-inner::before,
.oj-icon-circle-lg.oj-icon-circle-lilac .oj-icon-circle-inner::before {
  background-size: 325px 325px;
}

.oj-icon-circle-xxl.oj-icon-circle-mauve .oj-icon-circle-inner::before,
.oj-icon-circle-xxl.oj-icon-circle-pink .oj-icon-circle-inner::before,
.oj-icon-circle-lilac .oj-icon-circle-inner::before {
  background-size: 350px 350px;
}

.oj-icon-circle-xs.oj-icon-circle-lilac .oj-icon-circle-inner::before,
.oj-icon-circle-xxs.oj-icon-circle-lilac .oj-icon-circle-inner::before,
.oj-icon-circle-xs.oj-icon-circle-slate .oj-icon-circle-inner::before {
  background-size: 400px 400px;
}

.oj-icon-circle-slate .oj-icon-circle-inner::before {
  background-size: 480px 480px;
}

.oj-icon-circle-xxl.oj-icon-circle-slate .oj-icon-circle-inner::before {
  background-size: 560px 560px;
}

.oj-icon-circle-lg.oj-icon-circle-purple .oj-icon-circle-inner::before,
.oj-icon-circle-slate .oj-icon-circle-inner::before,
.oj-icon-circle-teal .oj-icon-circle-inner::before,
.oj-icon-circle-xxs.oj-icon-circle-gray .oj-icon-circle-inner::before,
.oj-icon-circle-xs.oj-icon-circle-gray .oj-icon-circle-inner::before,
.oj-icon-circle-sm.oj-icon-circle-gray .oj-icon-circle-inner::before {
  filter: opacity(0.2);
}

.oj-icon-circle-xs.oj-icon-circle-lilac .oj-icon-circle-inner::before,
.oj-icon-circle-xxs.oj-icon-circle-lilac .oj-icon-circle-inner::before {
  filter: opacity(0.25);
}

.oj-icon-circle-blue .oj-icon-circle-inner::before,
.oj-icon-circle-green .oj-icon-circle-inner::before,
.oj-icon-circle-forest .oj-icon-circle-inner::before,
.oj-icon-circle-purple .oj-icon-circle-inner::before,
.oj-icon-circle-lilac .oj-icon-circle-inner::before,
.oj-icon-circle-gray .oj-icon-circle-inner::before,
.oj-icon-circle-mauve .oj-icon-circle-inner::before,
.oj-icon-circle-pink .oj-icon-circle-inner::before,
.oj-icon-circle-xxl.oj-icon-circle-slate .oj-icon-circle-inner::before,
.oj-icon-circle-xl.oj-icon-circle-slate .oj-icon-circle-inner::before,
.oj-icon-circle-sm.oj-icon-circle-slate .oj-icon-circle-inner::before,
.oj-icon-circle-xs.oj-icon-circle-slate .oj-icon-circle-inner::before,
.oj-icon-circle-xxs.oj-icon-circle-slate .oj-icon-circle-inner::before,
.oj-icon-circle-xxs.oj-icon-circle-orange .oj-icon-circle-inner::before,
.oj-icon-circle-xxs.oj-icon-circle-red .oj-icon-circle-inner::before {
  filter: opacity(0.3);
}

.oj-icon-circle-xxl.oj-icon-circle-mauve .oj-icon-circle-inner::before,
.oj-icon-circle-xl.oj-icon-circle-mauve .oj-icon-circle-inner::before,
.oj-icon-circle-xs.oj-icon-circle-mauve .oj-icon-circle-inner::before,
.oj-icon-circle-xxs.oj-icon-circle-mauve .oj-icon-circle-inner::before,
.oj-icon-circle-xxl.oj-icon-circle-pink .oj-icon-circle-inner::before,
.oj-icon-circle-xl.oj-icon-circle-pink .oj-icon-circle-inner::before,
.oj-icon-circle-xs.oj-icon-circle-pink .oj-icon-circle-inner::before,
.oj-icon-circle-xxs.oj-icon-circle-pink .oj-icon-circle-inner::before,
.oj-icon-circle-orange .oj-icon-circle-inner::before,
.oj-icon-circle-red .oj-icon-circle-inner::before {
  filter: opacity(0.4);
}

.oj-icon-circle-red .oj-icon-circle-inner::before,
.oj-icon-circle-orange .oj-icon-circle-inner::before {
  background-image: url("images/avatar-pattern2.png");
}

.oj-icon-circle-green .oj-icon-circle-inner::before,
.oj-icon-circle-forest .oj-icon-circle-inner::before {
  background-image: url("images/avatar-pattern3.png");
}

.oj-icon-circle-teal .oj-icon-circle-inner::before {
  background-image: url("images/avatar-pattern4.png");
}

.oj-icon-circle-blue .oj-icon-circle-inner::before {
  background-image: url("images/avatar-pattern5.png");
}

.oj-icon-circle-slate .oj-icon-circle-inner::before {
  background-image: url("images/avatar-pattern6.png");
}

.oj-icon-circle-pink .oj-icon-circle-inner::before,
.oj-icon-circle-mauve .oj-icon-circle-inner::before {
  background-image: url("images/avatar-pattern7.png");
}

.oj-icon-circle-purple .oj-icon-circle-inner::before {
  background-image: url("images/avatar-pattern8.png");
}

.oj-icon-circle-lilac .oj-icon-circle-inner::before {
  background-image: url("images/avatar-pattern9.png");
}

.oj-icon-circle-gray .oj-icon-circle-inner::before {
  background-image: url("images/avatar-pattern10.png");
}

:root {
  --oj-indexer-text-color: var(--oj-core-text-color-primary);
  --oj-indexer-font-size: var(--oj-typography-body-sm-font-size);
}

oj-indexer:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the indexer widget container */
.oj-indexer {
  display: flex;
  align-items: center;
  width: 1.5rem;
}

/* Styling to remove focus ring border on indexer */
.oj-indexer ul:focus {
  outline: none;
}

/* styling for the indexer root element */
.oj-indexer ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* styling on each item */
.oj-indexer li {
  text-align: center;
  height: 1rem;
  width: 1.5rem;
  color: var(--oj-indexer-text-color);
  text-decoration: none;
  font-weight: normal;
  font-size: var(--oj-indexer-font-size);
  line-height: 1rem;
  vertical-align: middle;
}

/* styling on each item that does not have a corresponding group header */
.oj-indexer li.oj-disabled {
  color: var(--oj-core-text-color-disabled);
}

/* styling on hovered item */
.oj-indexer li:hover {
  text-decoration: none;
}

/* styling on focused item */
.oj-indexer.oj-focus-ancestor li.oj-focus-highlight {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: -1px;
}

/* styling on each item when indexer is abbreviated */
.oj-indexer.oj-indexer-abbr li {
  height: 1rem;
}

/* styling for the ellipsis between two characters */
.oj-indexer-ellipsis:after {
  content: "●";
}

:root {
  --oj-private-input-number-button-global-chroming-default: borderless;
  --oj-private-input-number-global-step-default: 0;
}

/* inputnumber */
/* --------------------------------------------------------------- */
oj-input-number:not(.oj-complete) {
  visibility: hidden;
}

.oj-inputnumber-wrapper {
  width: 100%;
  white-space: nowrap;
  display: inline-flex;
}

/* Input field for inputnumber */
.oj-inputnumber-input {
  flex: 1;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.oj-inputnumber-input::placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

.oj-inputnumber .oj-inputnumber-wrapper {
  height: 100%;
}

/* styling for inputNumber's buttonset/buttons */
.oj-inputnumber.oj-read-only .oj-buttonset {
  display: none;
}

.oj-inputnumber-button.oj-button.oj-focus {
  outline-style: none;
}

html:not([dir=rtl]) .oj-inputnumber:not(.oj-text-field-label-inside) .oj-buttonset {
  margin-right: calc((var(--oj-text-field-height) - var(--oj-button-sm-height) - 2px) / 2);
}

html[dir=rtl] .oj-inputnumber:not(.oj-text-field-label-inside) .oj-buttonset {
  margin-left: calc((var(--oj-text-field-height) - var(--oj-button-sm-height) - 2px) / 2);
}

.oj-inputnumber:not(.oj-text-field-label-inside) .oj-inputnumber-button {
  min-width: var(--oj-button-sm-height);
  width: var(--oj-button-sm-height);
  height: var(--oj-button-sm-height);
  line-height: var(--oj-button-sm-height);
}

html:not([dir=rtl]) .oj-text-field-label-inside.oj-inputnumber .oj-buttonset {
  margin-right: calc((var(--oj-text-field-inside-edge-height) - var(--oj-button-height) - 2px) / 2);
}

html[dir=rtl] .oj-text-field-label-inside.oj-inputnumber .oj-buttonset {
  margin-left: calc((var(--oj-text-field-inside-edge-height) - var(--oj-button-height) - 2px) / 2);
}

.oj-inputnumber .oj-buttonset-multi .oj-button {
  margin-bottom: 0;
}

oj-input-text:not(.oj-complete) {
  visibility: hidden;
}

oj-input-password:not(.oj-complete) {
  visibility: hidden;
}

.oj-inputtext .oj-inputtext-clear-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--oj-text-field-height);
  width: 25px;
  text-decoration: none;
  cursor: var(--oj-core-cursor-clickable);
}

a.oj-inputtext-clear-icon-btn:active {
  background-color: transparent;
}

.oj-inputtext-clear-icon {
  color: inherit;
}

.oj-inputtext .oj-inputtext-clear-icon-btn:focus {
  outline: none;
}

.oj-inputtext.oj-focus .oj-text-field-container.oj-inputtext-clearicon-conditional:not(.oj-form-control-empty-clearicon) .oj-inputtext-clear-icon-btn,
.oj-inputtext.oj-hover .oj-text-field-container.oj-inputtext-clearicon-conditional:not(.oj-form-control-empty-clearicon) .oj-inputtext-clear-icon-btn {
  visibility: visible;
}

.oj-inputtext .oj-text-field-container.oj-inputtext-clearicon-conditional .oj-inputtext-clear-icon-btn {
  visibility: hidden;
}

.oj-text-field-counter .oj-inputtext-counter-el {
  position: relative;
  bottom: -5px;
}

html:not([dir=rtl]) .oj-text-field-counter .oj-inputtext-counter-el {
  right: 5px;
}

html[dir=rtl] .oj-text-field-counter .oj-inputtext-counter-el {
  left: 5px;
}

.oj-inputtext .oj-text-field-counter {
  visibility: hidden;
}

.oj-inputtext.oj-focus .oj-text-field-counter {
  visibility: visible;
}

.oj-inputtext-input,
.oj-inputpassword-input,
.oj-textarea-input {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.oj-inputtext-input::placeholder,
.oj-inputpassword-input::placeholder,
.oj-textarea-input::placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

.oj-inputtext-input[size],
.oj-inputpassword-input[size],
.oj-textarea-input[size] {
  width: auto;
}

.oj-inputtext-input,
.oj-inputpassword-input {
  margin: 0;
}

.oj-inputpassword.oj-read-only .oj-text-field-input:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: -1px;
}

.oj-inputpassword.oj-read-only .oj-text-field-input {
  padding: 0;
}

.oj-form-layout .oj-form.oj-enabled .oj-inputpassword.oj-read-only .oj-text-field-input {
  padding: 0 var(--oj-text-field-text-to-edge-padding);
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-inputpassword.oj-read-only .oj-text-field-input {
  padding: var(--oj-text-field-inside-edge-padding-top) var(--oj-text-field-text-to-edge-padding) 0;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-inputpassword.oj-read-only .oj-text-field-middle {
  min-height: var(--oj-text-field-inside-edge-height);
}

.oj-inputpassword.oj-read-only.oj-text-field-label-inside .oj-text-field-input {
  min-height: calc(var(--oj-typography-body-md-line-height) * var(--oj-typography-body-md-font-size));
}

.oj-inputpassword.oj-read-only .oj-text-field-input {
  font-weight: inherit;
  line-height: inherit;
}

/* input-search */
/* --------------------------------------------------------------- */
oj-inputsearch:not(.oj-complete) {
  visibility: hidden;
}

.oj-inputsearch {
  position: relative;
}

/* input-search */
/*
     * Applied to the input field
     */
.oj-inputsearch-input {
  width: 100%;
}

/*
     * Applied to the input-search search icon
     */
.oj-inputsearch.oj-loading .oj-inputsearch-search-icon {
  display: none;
}

/*
     * Applied to the element containing the floating autocomplete text
     */
.oj-inputsearch-autocomplete-floating-container {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0 var(--oj-text-field-text-to-edge-padding);
  display: inline-flex;
  align-items: center;
  pointer-events: none;
}

/*
     * Applied to the floating autocomplete text
     */
.oj-inputsearch-autocomplete-floating-text {
  font-size: var(--oj-typography-body-xs-font-size);
  color: var(--oj-core-text-color-secondary);
  white-space: nowrap;
}

.oj-listbox-fullscreen .oj-inputsearch-results {
  max-height: none;
}

/* icon */
/* -----------------------------*/
/*
     * Applied to the input-search leading icon
     */
/*
   * Applied to the input-search mobile filter field back icon
   */
/*
   * Applied to the input-search mobile filter field clear icon
   */
.oj-inputsearch-back-button:hover,
.oj-inputsearch-back-button:focus {
  text-decoration: none;
}

/* clears the 'X' from Internet Explorer */
.oj-inputsearch input[type=search]::-ms-clear,
.oj-inputsearch input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

.oj-inputsearch-option-defaults {
  font-family: '{"showIndicatorDelay":"50"}' !important;
}

.oj-hicontrast .oj-inputsearch-results .oj-hover {
  border: 1px solid var(--oj-text-field-border-color);
}

.oj-input-search-hero .oj-text-field-container .oj-text-field-input {
  padding: 0;
  padding-inline-end: var(--oj-text-field-text-to-edge-padding);
}

html:not([dir=rtl]) .oj-input-search-hero.oj-text-field .oj-text-field-start .oj-text-field-start-end-icon {
  margin-left: var(--oj-text-field-icon-to-edge-padding);
  margin-right: var(--oj-text-field-icon-to-text-padding);
}

html[dir=rtl] .oj-input-search-hero.oj-text-field .oj-text-field-start .oj-text-field-start-end-icon {
  margin-right: var(--oj-text-field-icon-to-edge-padding);
  margin-left: var(--oj-text-field-icon-to-text-padding);
}

/* hero styling */
/* ---------------------------- */
.oj-input-search-hero {
  --oj-text-field-font-size: 1.5rem;
  --oj-button-sm-icon-size: 1.5rem;
  --oj-text-field-height: 4.5rem;
  --oj-text-field-text-to-edge-padding: 2.5rem;
  --oj-text-field-icon-to-text-padding: 1rem;
  --oj-text-field-icon-to-edge-padding: 1rem;
}

:root {
  --oj-gauge-metric-label-font-weight: normal;
}

.oj-gauge-metric-label {
  font-weight: var(--oj-gauge-metric-label-font-weight);
}

.oj-gauge-threshold1 {
  color: var(--oj-dvt-danger-color);
}

.oj-gauge-threshold2 {
  color: var(--oj-dvt-warning-color);
}

.oj-gauge-threshold3 {
  color: var(--oj-dvt-success-color);
}

oj-led-gauge:not(.oj-complete) {
  visibility: hidden;
}

oj-led-gauge {
  display: block;
}

.oj-ledgauge-fit {
  width: 2.5rem;
  height: 2.5rem;
}

.oj-ledgauge-sm {
  width: var(--oj-led-gauge-sm-size) !important;
  height: var(--oj-led-gauge-sm-size) !important;
}

.oj-ledgauge-md {
  width: var(--oj-led-gauge-md-size) !important;
  height: var(--oj-led-gauge-md-size) !important;
}

.oj-ledgauge-lg {
  width: var(--oj-led-gauge-lg-size) !important;
  height: var(--oj-led-gauge-lg-size) !important;
}

.oj-ledgauge.oj-focus-highlight {
  outline: dotted 1px var(--oj-core-focus-border-color);
}

:root {
  --oj-led-gauge-sm-size: 1.5rem;
  --oj-led-gauge-md-size: 1.75rem;
  --oj-led-gauge-lg-size: 2rem;
}

oj-list-item-layout:not(.oj-complete) {
  visibility: visible;
}

oj-list-item-layout {
  display: block;
}

.oj-listitemlayout-grid {
  display: grid;
  grid-template-areas: "selector leading textslots extra" ".... .... quaternary navigation";
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: var(--oj-collection-list-cell-padding-vertical) var(--oj-list-view-item-padding-horizontal);
  box-sizing: border-box;
  min-height: var(--oj-collection-list-row-height);
}

.oj-listitemlayout-padding-off > .oj-listitemlayout-grid {
  padding: 0;
}

.oj-listitemlayout-selector {
  grid-area: selector;
  align-self: center;
  margin: -0.875rem -0.875rem;
}

.oj-listitemlayout-leading {
  grid-area: leading;
  align-self: center;
}

.oj-listitemlayout-textslots {
  grid-area: textslots;
  align-self: center;
  grid-template-columns: 1fr;
}

.oj-listitemlayout-extra {
  grid-area: extra;
  display: grid;
  grid-template-areas: "metadata trailing action";
  align-items: center;
  align-self: center;
}

.oj-listitemlayout-metadata {
  grid-area: metadata;
}

.oj-listitemlayout-trailing {
  grid-area: trailing;
}

.oj-listitemlayout-action {
  grid-area: action;
  margin-top: calc(-1 * var(--oj-collection-list-cell-padding-vertical));
  margin-bottom: calc(-1 * var(--oj-collection-list-cell-padding-vertical));
}

.oj-listitemlayout-quaternary {
  grid-area: quaternary;
  min-width: 0;
  justify-self: start;
  padding-top: 0.75rem;
}

.oj-listitemlayout-navigation {
  grid-area: navigation;
  justify-self: end;
  padding-top: 0.75rem;
}

.oj-listitemlayout-start-padding {
  padding-inline-start: 1rem;
}

.oj-listitemlayout-horizontal-padding {
  padding-inline-start: var(--oj-list-view-item-padding-horizontal);
}

.oj-listitemlayout-tertiary {
  padding-top: 0.125rem;
}

:root.oj-scale-sm {
  --oj-collection-header-font-size: var(--oj-typography-body-md-font-size);
}

:root.oj-scale-md {
  --oj-collection-header-font-size: var(--oj-typography-body-md-font-size);
}

:root {
  --oj-masonry-layout-tile-width: 10rem;
  --oj-masonry-layout-tile-height: 10rem;
}

/* masonrylayout */
/* --------------------------------------------------------------- */
oj-masonry-layout:not(.oj-complete) {
  visibility: hidden;
}

oj-masonry-layout {
  display: block;
}

.oj-masonrylayout {
  min-height: 1px;
  min-width: 1px;
  position: relative;
}

/* masonry tile */
.oj-masonrylayout-tile {
  box-sizing: border-box;
  position: absolute;
}

.oj-masonrylayout .oj-masonrylayout-tile {
  position: absolute;
}

.oj-masonrylayout-tile.oj-drop {
  background-color: var(--oj-core-drag-drop-color-1);
  border: 1px solid var(--oj-core-drag-drop-color-2);
  opacity: 0.75;
}

.oj-masonrylayout-tile.oj-drag {
  opacity: 0.75;
}

.oj-masonrylayout-tile-transition-show-from {
  opacity: 0;
}

.oj-masonrylayout-tile-1x1 {
  margin: calc(var(--oj-panel-gutter) / 2);
  width: calc(1 * var(--oj-masonry-layout-tile-width) + 0 * var(--oj-panel-gutter) / 2);
  height: calc(1 * var(--oj-masonry-layout-tile-height) + 0 * var(--oj-panel-gutter) / 2);
}

.oj-masonrylayout-tile-1x2 {
  margin: calc(var(--oj-panel-gutter) / 2);
  width: calc(1 * var(--oj-masonry-layout-tile-width) + 0 * var(--oj-panel-gutter) / 2);
  height: calc(2 * var(--oj-masonry-layout-tile-height) + 2 * var(--oj-panel-gutter) / 2);
}

.oj-masonrylayout-tile-1x3 {
  margin: calc(var(--oj-panel-gutter) / 2);
  width: calc(1 * var(--oj-masonry-layout-tile-width) + 0 * var(--oj-panel-gutter) / 2);
  height: calc(3 * var(--oj-masonry-layout-tile-height) + 4 * var(--oj-panel-gutter) / 2);
}

.oj-masonrylayout-tile-2x1 {
  margin: calc(var(--oj-panel-gutter) / 2);
  width: calc(2 * var(--oj-masonry-layout-tile-width) + 2 * var(--oj-panel-gutter) / 2);
  height: calc(1 * var(--oj-masonry-layout-tile-height) + 0 * var(--oj-panel-gutter) / 2);
}

.oj-masonrylayout-tile-2x2 {
  margin: calc(var(--oj-panel-gutter) / 2);
  width: calc(2 * var(--oj-masonry-layout-tile-width) + 2 * var(--oj-panel-gutter) / 2);
  height: calc(2 * var(--oj-masonry-layout-tile-height) + 2 * var(--oj-panel-gutter) / 2);
}

.oj-masonrylayout-tile-2x3 {
  margin: calc(var(--oj-panel-gutter) / 2);
  width: calc(2 * var(--oj-masonry-layout-tile-width) + 2 * var(--oj-panel-gutter) / 2);
  height: calc(3 * var(--oj-masonry-layout-tile-height) + 4 * var(--oj-panel-gutter) / 2);
}

.oj-masonrylayout-tile-3x1 {
  margin: calc(var(--oj-panel-gutter) / 2);
  width: calc(3 * var(--oj-masonry-layout-tile-width) + 4 * var(--oj-panel-gutter) / 2);
  height: calc(1 * var(--oj-masonry-layout-tile-height) + 0 * var(--oj-panel-gutter) / 2);
}

.oj-masonrylayout-tile-3x2 {
  margin: calc(var(--oj-panel-gutter) / 2);
  width: calc(3 * var(--oj-masonry-layout-tile-width) + 4 * var(--oj-panel-gutter) / 2);
  height: calc(2 * var(--oj-masonry-layout-tile-height) + 2 * var(--oj-panel-gutter) / 2);
}

.oj-masonrylayout-option-defaults {
  font-family: '{"animation":{"insert":[{"effect":"zoomIn","duration":"0.25s","timingFunction":"ease-in-out"},"fadeIn"],"remove":[{"effect":"zoomOut","duration":"0.25s","timingFunction":"ease-in-out"},"fadeOut"],"move":{"effect":"addTransition","duration":"0.25s","timingFunction":"ease-in-out","transitionProperties":["width","height","top","left","right"]},"resize":{"effect":"addTransition","duration":"0.25s","timingFunction":"ease-in-out","transitionProperties":["width","height","top","left","right"]},"reorder":{"effect":"addTransition","duration":"0.2s","timingFunction":"ease-in-out","transitionProperties":["width","height","top","left","right"]}}}' !important;
}

:root {
  --oj-menu-icon-size: var(--oj-core-icon-size-lg);
  --oj-menu-icon-to-edge-padding: 1rem;
  --oj-menu-text-to-start-icon-padding: 1rem;
  --oj-menu-text-to-end-icon-padding: 2rem;
  --oj-menu-text-to-edge-padding: 1rem;
  --oj-menu-divider-margin: var(--oj-core-spacing-2x) 0;
  --oj-menu-item-text-color: var(--oj-core-text-color-primary);
  --oj-menu-icon-color: var(--oj-core-text-color-primary);
  --oj-menu-sheet-margin-horizontal: 0px;
  --oj-private-menu-global-drop-down-open-animation: '{"effect":"zoomIn","transformOrigin":"#myPosition","duration":".25s"}';
  --oj-private-menu-global-drop-down-close-animation: '{"effect":"none"}';
  --oj-private-menu-global-sheet-open-animation: '{"effect":"slideIn","direction":"top","duration":".25s"}';
  --oj-private-menu-global-sheet-close-animation: '{"effect":"slideOut","direction":"bottom","duration":".25s"}';
  --oj-private-menu-global-submenu-open-animation: '{"effect":"zoomIn","transformOrigin":"#myPosition","duration":".25s"}';
  --oj-private-menu-global-submenu-close-animation: '{"effect":"none"}';
  --oj-private-menu-global-sheet-cancel-affordance: none;
  --oj-private-menu-global-sheet-swipe-down-behavior: dismiss;
  --oj-private-menu-global-drop-down-modality: modeless;
  --oj-private-menu-global-sheet-modality: modal;
  --oj-private-menu-global-sheet-margin-bottom: 0;
}

/* menu */
/* --------------------------------------------------------------- */
oj-menu {
  display: none;
}

.oj-menu-layer {
  z-index: var(--oj-core-z-index-popup);
}

.oj-menu {
  list-style: none;
  padding: var(--oj-core-spacing-2x) 0;
  min-width: 8.75rem;
  color: var(--oj-core-text-color-primary);
  background: var(--oj-popup-bg-color);
  font-size: var(--oj-typography-body-md-font-size);
  margin: 0;
  display: inline-block;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.oj-menu-dropdown {
  border: 1px solid var(--oj-popup-border-color);
  border-radius: var(--oj-core-border-radius-md);
  box-shadow: var(--oj-core-dropdown-box-shadow);
}

.oj-menu-sheet {
  border: 0;
  border-radius: 6px 6px 0 0;
  width: calc(100% - 2 * var(--oj-menu-sheet-margin-horizontal));
}

.oj-menu:focus {
  outline: none;
}

.oj-menu.oj-menu-submenu {
  position: absolute;
}

.oj-menu-item {
  margin: 0;
  padding: 0;
  width: 100%;
  display: list-item;
}

.oj-menu-divider {
  margin: var(--oj-menu-divider-margin);
  height: 0;
  font-size: 0;
  line-height: 0;
  border-style: solid;
  display: list-item;
  border-width: 1px 0 0 0;
  border-color: var(--oj-core-divider-color);
}

.oj-menu-item > a {
  padding: 0 var(--oj-menu-text-to-edge-padding);
  position: relative;
  text-decoration: none;
  display: block;
  font-weight: normal;
  box-sizing: border-box;
}

.oj-menu-item > a {
  height: var(--oj-collection-list-row-height);
  line-height: var(--oj-collection-list-row-height);
  color: var(--oj-menu-item-text-color);
  border-top-width: 1px;
  border-top-color: transparent;
  border-top-style: solid;
}

.oj-menu-item > a > span {
  vertical-align: top;
}

.oj-menu-item:last-child > a {
  border-bottom-width: 1px;
  border-bottom-color: transparent;
  border-bottom-style: solid;
}

.oj-menu-item-cancel > a {
  font-weight: normal;
}

/* For each menu and submenu, either oj-menu-icons or oj-menu-text-only is applied to the menu, depending on whether at
       least one menu item in the menu (excluding its "Cancel" menu item and submenus) has an icon (not submenu icon).
       These classes facilitate (say) leaving space for a column of icons iff at least one item has an icon, and doing so
       for each menu/submenu independently. */
html:not([dir=rtl]) a.oj-menu-option-start-icon {
  padding-left: calc(var(--oj-menu-icon-to-edge-padding) + var(--oj-menu-icon-size) + var(--oj-menu-text-to-start-icon-padding));
}

html[dir=rtl] a.oj-menu-option-start-icon {
  padding-right: calc(var(--oj-menu-icon-to-edge-padding) + var(--oj-menu-icon-size) + var(--oj-menu-text-to-start-icon-padding));
}

html:not([dir=rtl]) a.oj-menu-option-end-icon {
  padding-right: calc(var(--oj-menu-icon-to-edge-padding) + var(--oj-menu-icon-size) + var(--oj-menu-text-to-end-icon-padding));
}

html[dir=rtl] a.oj-menu-option-end-icon {
  padding-left: calc(var(--oj-menu-icon-to-edge-padding) + var(--oj-menu-icon-size) + var(--oj-menu-text-to-end-icon-padding));
}

a.oj-menu-option-text-only {
  text-align: initial;
}

.oj-menu-option-text-only .oj-menu-cancel-icon {
  display: none;
}

.oj-menu-divider + .oj-menu-item > a {
  border-top-width: 0;
}

.oj-menu-item:not(.oj-focus-highlight) > a:focus {
  outline: none;
}

.oj-menu-item.oj-focus-highlight > a {
  outline: dotted 1px var(--oj-core-text-color-primary);
  outline-offset: 1px;
}

.oj-menu-item:not(.oj-disabled).oj-focus > a,
.oj-menu-item:not(.oj-disabled).oj-focus-ancestor > a {
  background: var(--oj-core-bg-color-hover);
}

.oj-menu-item.oj-focus > a,
.oj-menu-item.oj-focus-ancestor > a,
.oj-menu-item.oj-focus + .oj-menu-item > a,
.oj-menu-item.oj-focus-ancestor + .oj-menu-item > a {
  border-top-color: transparent;
}

.oj-menu-item:last-child.oj-focus > a,
.oj-menu-item:last-child.oj-focus-ancestor > a {
  border-bottom-color: transparent;
}

.oj-menu.oj-disabled .oj-menu-item > a,
.oj-menu-item.oj-disabled > a {
  cursor: default;
}

.oj-disabled .oj-menu-item > a,
.oj-menu-item.oj-disabled > a {
  color: var(--oj-core-text-color-disabled);
}

/* menu item icons (not submenu icons) */
.oj-menu-item-icon,
.oj-menu-item-end-icon {
  color: var(--oj-menu-icon-color);
  position: absolute;
  height: var(--oj-menu-icon-size);
  line-height: var(--oj-collection-list-row-height) !important;
}

html:not([dir=rtl]) .oj-menu-item-icon {
  margin-left: calc(0px - var(--oj-menu-icon-size) - var(--oj-menu-text-to-start-icon-padding));
  margin-right: var(--oj-menu-text-to-start-icon-padding);
}

html[dir=rtl] .oj-menu-item-icon {
  margin-right: calc(0px - var(--oj-menu-icon-size) - var(--oj-menu-text-to-start-icon-padding));
  margin-left: var(--oj-menu-text-to-start-icon-padding);
}

html:not([dir=rtl]) .oj-menu-item-end-icon {
  right: 0;
  margin-right: var(--oj-menu-text-to-start-icon-padding);
  margin-left: calc(0px - var(--oj-menu-icon-size) - var(--oj-menu-text-to-start-icon-padding));
}

html[dir=rtl] .oj-menu-item-end-icon {
  left: 0;
  margin-left: var(--oj-menu-text-to-start-icon-padding);
  margin-right: calc(0px - var(--oj-menu-icon-size) - var(--oj-menu-text-to-start-icon-padding));
}

.oj-menu-item .oj-menu-item-icon,
.oj-menu-item .oj-menu-item-end-icon {
  font-size: var(--oj-menu-icon-size);
}

.oj-menu.oj-disabled .oj-menu-item-icon,
.oj-menu.oj-disabled .oj-menu-item-end-icon,
.oj-menu-item.oj-disabled .oj-menu-item-icon,
.oj-menu-item.oj-disabled .oj-menu-submenu-icon,
.oj-menu-item.oj-disabled .oj-menu-item-end-icon {
  color: var(--oj-private-icon-color-disabled);
}

.oj-menu-submenu-icon {
  color: var(--oj-menu-icon-color);
  position: absolute;
  line-height: var(--oj-collection-list-row-height);
  height: var(--oj-menu-icon-size);
}

html:not([dir=rtl]) .oj-menu-submenu-icon {
  right: var(--oj-menu-icon-to-edge-padding);
}

html[dir=rtl] .oj-menu-submenu-icon {
  left: var(--oj-menu-icon-to-edge-padding);
}

.oj-menu-context-menu-launcher {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.oj-hicontrast .oj-menu-item.oj-focus > a,
.oj-hicontrast .oj-menu-item.oj-focus-ancestor > a {
  outline: dotted 3px;
}

.oj-hicontrast .oj-menu-item.oj-focus.oj-disabled > a {
  outline: dotted 1px;
}

.oj-hicontrast .oj-menu-item.oj-disabled > a {
  border: dotted 1px;
}

/* menu-select-many */
/* --------------------------------------------------------------- */
oj-menu-select-many:not(.oj-complete) {
  visibility: hidden;
}

.oj-menu-dropdown oj-menu-select-many > .oj-menu-item:first-child:not(.oj-top):not(.oj-menu-item-after-divider),
.oj-menu-dropdown oj-menu-select-many > .oj-menu-item:first-child:not(.oj-top):not(.oj-menu-item-after-divider) > a,
.oj-menu-sheet oj-menu-select-many > .oj-menu-item:first-child:not(.oj-top):not(.oj-menu-item-after-divider),
.oj-menu-sheet oj-menu-select-many > .oj-menu-item:first-child:not(.oj-top):not(.oj-menu-item-after-divider) > a {
  border-top-left-radius: unset;
  border-top-right-radius: unset;
}

oj-menu-select-many > .oj-menu-item:last-child:not(.oj-bottom):not(.oj-menu-item-before-divider),
oj-menu-select-many > .oj-menu-item:last-child:not(.oj-bottom):not(.oj-bottom):not(.oj-menu-item-before-divider) > a {
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
}

.oj-menucheckbox-icon {
  width: var(--oj-menu-icon-size);
  height: var(--oj-menu-icon-size);
}

.oj-menucheckbox-icon::after {
  content: "";
  display: inline-block;
}

.oj-menucheckbox-icon.oj-disabled {
  opacity: 0.2;
}

oj-message:not(.oj-complete) {
  visibility: hidden;
}

.oj-messages-general .oj-error .oj-message-container,
.oj-messages-inline .oj-error .oj-message-container {
  background-color: var(--oj-core-danger-secondary-3);
}

.oj-messages-general .oj-confirmation .oj-message-container,
.oj-messages-inline .oj-confirmation .oj-message-container {
  background-color: var(--oj-core-success-secondary-3);
}

.oj-messages-general .oj-warning .oj-message-container,
.oj-messages-inline .oj-warning .oj-message-container {
  background-color: var(--oj-core-warning-secondary-3);
}

.oj-messages-general .oj-info .oj-message-container,
.oj-messages-inline .oj-info .oj-message-container,
.oj-messages-general .oj-message-container,
.oj-messages-inline .oj-message-container {
  background-color: var(--oj-core-info-secondary-3);
}

.oj-messages-general .oj-error .oj-message-leading-header > .oj-message-summary,
.oj-messages-inline .oj-error .oj-message-leading-header > .oj-message-summary,
.oj-messages-general .oj-error .oj-message-status-icon.oj-message-error-icon,
.oj-messages-inline .oj-error .oj-message-status-icon.oj-message-error-icon {
  color: var(--oj-core-danger-secondary-contrast);
}

.oj-messages-general .oj-confirmation .oj-message-leading-header > .oj-message-summary,
.oj-messages-inline .oj-confirmation .oj-message-leading-header > .oj-message-summary,
.oj-messages-general .oj-confirmation .oj-message-status-icon.oj-message-confirmation-icon,
.oj-messages-inline .oj-confirmation .oj-message-status-icon.oj-message-confirmation-icon {
  color: var(--oj-core-success-secondary-contrast);
}

.oj-messages-general .oj-warning .oj-message-leading-header > .oj-message-summary,
.oj-messages-inline .oj-warning .oj-message-leading-header > .oj-message-summary,
.oj-messages-general .oj-warning .oj-message-status-icon.oj-message-warning-icon,
.oj-messages-inline .oj-warning .oj-message-status-icon.oj-message-warning-icon {
  color: var(--oj-core-warning-secondary-contrast);
}

.oj-messages-general .oj-info .oj-message-leading-header > .oj-message-summary,
.oj-messages-inline .oj-info .oj-message-leading-header > .oj-message-summary,
.oj-messages-general .oj-message-leading-header > .oj-message-summary,
.oj-messages-inline .oj-message-leading-header > .oj-message-summary,
.oj-messages-general .oj-info .oj-message-status-icon.oj-message-info-icon,
.oj-messages-inline .oj-info .oj-message-status-icon.oj-message-info-icon {
  color: var(--oj-core-info-secondary-contrast);
}

.oj-messages-notification .oj-error .oj-message-status-icon.oj-message-error-icon,
.oj-messages-notification .oj-confirmation .oj-message-status-icon.oj-message-confirmation-icon,
.oj-messages-notification .oj-warning .oj-message-status-icon.oj-message-warning-icon,
.oj-messages-notification .oj-info .oj-message-status-icon.oj-message-info-icon {
  color: var(--oj-private-message-category-text-color);
}

.oj-message-container {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  box-sizing: border-box;
}

.oj-message-header {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--oj-private-message-header-height);
}

.oj-message-leading-header {
  display: inline-flex;
  align-items: center;
}

html:not([dir=rtl]) .oj-message-leading-header {
  margin-right: var(--oj-private-message-header-margin-end);
}

html[dir=rtl] .oj-message-leading-header {
  margin-left: var(--oj-private-message-header-margin-end);
}

.oj-message-trailing-header {
  align-items: center;
  display: inline-flex;
}

.oj-message-custom-icon {
  width: 20px;
  height: 20px;
}

.oj-message-category {
  color: var(--oj-private-message-category-text-color);
  font-size: var(--oj-private-message-component-inline-font-size);
  font-weight: var(--oj-private-message-component-inline-font-weight);
  word-break: break-word;
}

.oj-messages-notification .oj-message-category {
  font-size: var(--oj-private-message-notification-overlay-font-size);
  font-weight: var(--oj-private-message-notification-overlay-font-weight);
}

.oj-message-category h1 {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 0px;
  padding: 0px;
}

.oj-message-body {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-items: flex-start;
}

.oj-message-summary {
  font-weight: var(--oj-private-message-summary-font-weight);
  color: var(--oj-private-message-summary-text-color);
  font-size: var(--oj-private-message-summary-font-size);
  line-height: var(--oj-private-message-summary-line-height);
  word-break: break-word;
}

.oj-message-detail {
  color: var(--oj-private-message-detail-text-color);
  font-size: var(--oj-private-message-detail-font-size);
  line-height: var(--oj-private-message-detail-line-height);
  word-break: break-word;
  width: 100%;
}

.oj-messages-notification .oj-message-detail {
  color: var(--oj-private-message-notification-detail-text-color);
}

.oj-message-leading-header > .oj-message-summary {
  margin: 0px;
  padding: 0px;
  color: var(--oj-private-message-category-text-color);
  font-size: var(--oj-private-message-component-inline-font-size);
  font-weight: var(--oj-private-message-component-inline-font-weight);
  word-break: break-word;
}

.oj-messages-notification .oj-message-leading-header > .oj-message-summary {
  font-size: var(--oj-private-message-notification-overlay-font-size);
  font-weight: var(--oj-private-message-notification-overlay-font-weight);
}

.oj-message-timestamp {
  color: var(--oj-private-message-time-text-color);
  font-size: var(--oj-private-message-time-font-size);
  margin-right: var(--oj-private-message-time-margin-end);
  flex-grow: 9;
  min-width: 5em;
  word-break: break-word;
}

html[dir=rtl] .oj-message-timestamp {
  margin-left: var(--oj-private-message-time-margin-end);
}

.oj-message-close {
  float: right;
  display: var(--oj-private-message-close-icon-display);
}

html[dir=rtl] .oj-message-close {
  float: left;
}

.oj-message-auto-timeout-close {
  display: var(--oj-private-message-auto-timeout-close-icon-display);
}

.oj-message-close .oj-button {
  margin-bottom: 0;
}

.oj-message-option-defaults {
  font-family: '{"autoTimeout":4000}' !important;
}

.oj-color-invert {
  --oj-private-message-category-text-color: var(--oj-core-text-color-primary);
  --oj-private-message-summary-text-color: var(--oj-core-text-color-primary);
  --oj-private-message-detail-text-color: var(--oj-core-text-color-primary);
  --oj-private-message-notification-detail-text-color: var(--oj-core-text-color-secondary);
  --oj-private-message-notification-overlay-header-bg-color: rgb(var(--oj-palette-neutral-rgb-170));
  --oj-private-message-notification-overlay-body-bg-color: rgb(var(--oj-palette-neutral-rgb-170));
  --oj-private-message-time-text-color: var(--oj-core-text-color-primary);
  --oj-private-message-notification-overlay-box-shadow: var(--oj-core-box-shadow-md);
  --oj-private-message-general-inline-border-color: var(--oj-core-divider-color);
  --oj-private-message-general-overlay-border-color: var(--oj-core-divider-color);
}

.oj-message-body .oj-message-summary {
  padding-bottom: 4px;
}

html:not([dir=rtl]) .oj-message-header .oj-message-status-icon {
  padding: 0 0.5rem 0 0;
}

html[dir=rtl] .oj-message-header .oj-message-status-icon {
  padding: 0 0 0 0.5rem;
}

oj-message-banner:not(.oj-complete) {
  visibility: hidden;
}

.oj-flex-baseStyles-b12c3cqv {
  display: flex;
}

.oj-flex-row-r151dc5k {
  flex-direction: row;
}

.oj-flex-column-cddvbr0 {
  flex-direction: column;
}

.oj-flex-baseline-b1ym8cgx {
  align-items: baseline;
}

.oj-flex-center-cr3firy {
  align-items: center;
}

.oj-flex-end-e1hcihnh {
  align-items: flex-end;
}

.oj-flex-start-stv38ab {
  align-items: flex-start;
}

.oj-flex-inherit-ibuadas {
  align-items: inherit;
}

.oj-flex-initial-i1katjsf {
  align-items: initial;
}

.oj-flex-stretch-s1xclxyq {
  align-items: stretch;
}

.oj-flex-center-c1k7idmt {
  justify-content: center;
}

.oj-flex-end-erzuzq6 {
  justify-content: flex-end;
}

.oj-flex-start-s1ampyci {
  justify-content: flex-start;
}

.oj-flex-inherit-ikwzjla {
  justify-content: inherit;
}

.oj-flex-initial-i1ee5clk {
  justify-content: initial;
}

.oj-flex-around-a3eykku {
  justify-content: space-around;
}

.oj-flex-between-bdy9zkz {
  justify-content: space-between;
}

.oj-flex-evenly-ebf40gc {
  justify-content: space-evenly;
}

.oj-flex-nowrap-nf2xa2o {
  flex-wrap: nowrap;
}

.oj-flex-wrap-w1rqjeh6 {
  flex-wrap: wrap;
}

.oj-flex-reverse-rgdkw82 {
  flex-wrap: wrap-reverse;
}

.oj-flex-inherit-id777hd {
  flex-wrap: inherit;
}

.oj-flex-initial-i1152ami {
  flex-wrap: initial;
}

.oj-live-region-offScreenStyle-o1xwg2xa {
  border: 0;
  -webkit-clip: rect(0 0 0 0);
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  width: 1px;
  position: absolute;
}

.oj-message-base-bb5rzqk {
  background-color: var(--oj-private-message-banner-background-color);
  border-bottom: 1px solid var(--oj-core-divider-color);
}

.oj-message-base-bb5rzqk:focus-visible {
  outline-style: dotted;
  outline-width: 1px;
  outline-color: var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

.oj-message-section-s1c5gur5 {
  border: 1px solid var(--oj-core-divider-color);
  border-radius: var(--oj-core-border-radius-lg);
}

.oj-message-header-h1k6g34i {
  line-height: var(--oj-private-message-banner-summary-line-height);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

@media screen and (max-width: 599.9px) {
  .oj-message-header-h1k6g34i {
    flex-direction: column;
  }
}
.oj-message-content-cy2ssrz {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding-top: var(--oj-core-spacing-4x);
  padding-right: var(--oj-core-spacing-4x);
  padding-bottom: var(--oj-core-spacing-4x);
  padding-left: var(--oj-core-spacing-4x);
}

.oj-message-banner-b10cag1l {
  margin-inline-start: 0.25rem;
  margin-inline-end: -0.5rem;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

.oj-message-base-bbznd28 {
  margin-top: var(--oj-core-spacing-2x);
  overflow-wrap: anywhere;
}

.oj-message-banner-b39ctpn {
  font-size: var(--oj-typography-body-sm-font-size);
  color: var(--oj-core-text-color-primary);
}

.oj-message-svgStyles-s15seud3 {
  flex: none;
}

.oj-message-messageStartIconStyles-mmmpf1e {
  margin-inline-end: var(--oj-core-spacing-2x);
}

.oj-message-banner-b1mv77e8 {
  color: var(--oj-private-message-banner-start-icon-color);
  width: var(--oj-private-message-banner-start-icon-size);
  height: var(--oj-private-message-banner-summary-line-height);
}

.oj-message-base-bczmanu {
  flex: 1;
  overflow-wrap: anywhere;
}

.oj-message-banner-bonzci6 {
  font-size: var(--oj-private-message-banner-summary-text-size);
  font-weight: var(--oj-private-message-banner-summary-text-weight);
  color: var(--oj-private-message-banner-summary-text-color);
}

.oj-message-banner-b1i0o3vp {
  flex-shrink: 0;
  font-size: var(--oj-typography-body-xs-font-size);
  color: var(--oj-core-text-color-secondary);
}

:root {
  --oj-private-message-banner-background-color: var(--oj-core-info-secondary-3);
  --oj-private-message-banner-start-icon-color: var(--oj-core-info-3);
  --oj-private-message-banner-start-icon-size: 1rem;
  --oj-private-message-banner-summary-text-color: var(--oj-core-info-3);
  --oj-private-message-banner-summary-text-weight: var(--oj-typography-subheading-xs-font-weight);
  --oj-private-message-banner-summary-text-size: var(--oj-typography-subheading-xs-font-size);
  --oj-private-message-banner-summary-line-height: 1.25rem;
  --oj-private-message-banner-global-enter-animation: '[{ "effect": "expand", "duration": "0.25s", "direction": "height" }]';
  --oj-private-message-banner-global-exit-animation: '[{ "effect": "collapse", "duration": "0.25s", "direction": "height" }]';
}

.oj-messagebanner-error {
  --oj-private-message-banner-background-color: var(--oj-core-danger-secondary-3);
  --oj-private-message-banner-start-icon-color: var(--oj-core-danger-3);
  --oj-private-message-banner-summary-text-color: var(--oj-core-danger-3);
}

.oj-messagebanner-warning {
  --oj-private-message-banner-background-color: var(--oj-core-warning-secondary-3);
  --oj-private-message-banner-start-icon-color: var(--oj-core-warning-3);
  --oj-private-message-banner-summary-text-color: var(--oj-core-warning-3);
}

.oj-messagebanner-confirmation {
  --oj-private-message-banner-background-color: var(--oj-core-success-secondary-3);
  --oj-private-message-banner-start-icon-color: var(--oj-core-success-3);
  --oj-private-message-banner-summary-text-color: var(--oj-core-success-3);
}

.oj-messagebanner-info {
  --oj-private-message-banner-background-color: var(--oj-core-info-secondary-3);
  --oj-private-message-banner-start-icon-color: var(--oj-core-info-3);
  --oj-private-message-banner-summary-text-color: var(--oj-core-info-3);
}

.oj-messages-layer {
  z-index: var(--oj-core-z-index-messages);
}

.oj-messages-layer.oj-focus-within {
  z-index: calc(var(--oj-core-z-index-messages) + 1);
}

oj-messages:not(.oj-complete) {
  visibility: hidden;
}

oj-messages {
  display: none;
}

.oj-messages-inline oj-message {
  display: flex;
}

.oj-messages-general {
  width: var(--oj-private-messages-general-overlay-width);
  max-width: var(--oj-private-messages-general-overlay-max-width);
  min-width: var(--oj-private-messages-general-overlay-min-width);
}

.oj-messages-notification {
  width: var(--oj-private-messages-notification-overlay-width);
  max-width: var(--oj-private-messages-notification-overlay-max-width);
  min-width: var(--oj-private-messages-notification-overlay-min-width);
}

.oj-messages-general .oj-messages-container {
  border-width: var(--oj-private-messages-general-overlay-border-width);
  border-color: var(--oj-private-messages-general-overlay-border-color);
  border-style: solid;
  border-radius: var(--oj-private-messages-general-overlay-border-radius);
  box-shadow: var(--oj-private-messages-general-overlay-box-shadow);
}

.oj-messages-notification .oj-messages-container {
  border-width: var(--oj-private-messages-notification-overlay-border-width);
  border-color: var(--oj-private-messages-notification-overlay-border-color);
  border-style: solid;
  border-radius: var(--oj-private-messages-notification-overlay-border-radius);
  box-shadow: var(--oj-private-messages-notification-overlay-box-shadow);
}

.oj-messages-general .oj-messages-container,
.oj-messages-notification .oj-messages-container {
  margin: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.oj-messages-notification .oj-message-header {
  background-color: var(--oj-private-message-notification-overlay-header-bg-color);
}

.oj-messages-notification .oj-message-body {
  background-color: var(--oj-private-message-notification-overlay-body-bg-color);
}

.oj-messages-inline oj-message:not(:last-child) .oj-message-container,
.oj-messages-inline:not(.oj-messages-inline-remove-bottom-border) oj-message:last-child .oj-message-container {
  border-width: var(--oj-private-message-general-inline-border-width);
  border-color: var(--oj-private-message-general-inline-border-color);
  border-style: solid;
}

.oj-messages-general .oj-message-container {
  border-width: var(--oj-private-message-general-overlay-border-width);
  border-color: var(--oj-private-message-general-overlay-border-color);
  border-style: solid;
  border-radius: var(--oj-private-message-general-overlay-border-radius);
  box-shadow: var(--oj-private-message-general-overlay-box-shadow);
}

.oj-messages-notification .oj-message-container {
  border-width: var(--oj-private-message-notification-overlay-border-width);
  border-color: var(--oj-private-message-notification-overlay-border-color);
  border-style: solid;
  border-radius: var(--oj-private-message-notification-overlay-border-radius);
  box-shadow: var(--oj-private-message-notification-overlay-box-shadow);
}

.oj-messages-general .oj-message-header {
  border-top-left-radius: var(--oj-private-message-general-overlay-border-radius);
  border-top-right-radius: var(--oj-private-message-general-overlay-border-radius);
}

.oj-messages-general .oj-message-body {
  border-bottom-left-radius: var(--oj-private-message-general-overlay-border-radius);
  border-bottom-right-radius: var(--oj-private-message-general-overlay-border-radius);
}

.oj-messages-notification .oj-message-header {
  border-top-left-radius: var(--oj-private-message-notification-overlay-border-radius);
  border-top-right-radius: var(--oj-private-message-notification-overlay-border-radius);
}

.oj-messages-general .oj-message-no-detail .oj-message-header,
.oj-messages-notification .oj-message-no-detail .oj-message-header {
  border-radius: var(--oj-private-message-notification-overlay-border-radius);
}

.oj-messages-notification .oj-message-body {
  border-bottom-left-radius: var(--oj-private-message-notification-overlay-border-radius);
  border-bottom-right-radius: var(--oj-private-message-notification-overlay-border-radius);
}

.oj-messages-general oj-message:not(:last-child) .oj-message-container {
  margin-bottom: var(--oj-private-message-general-overlay-separator-margin);
}

.oj-messages-notification oj-message:not(:last-child) .oj-message-container {
  margin-bottom: var(--oj-private-message-notification-overlay-separator-margin);
}

@media screen and (max-width: 599.9px) {
  .oj-messages-general,
  .oj-messages-notification {
    width: calc(100% - 20px);
    max-width: initial;
    min-width: initial;
  }
}
.oj-messages-option-defaults {
  font-family: '{"general":{"animation":{"open":{"effect":"expand","duration":"0.25s"},"close":{"effect":"collapse","duration":"0.25s"}},"position":{"my":{"horizontal":"center","vertical":"top"},"at":{"horizontal":"center","vertical":"top"},"of":"window","collision":"none"}},"notification":{"animation":{"open":{"effect":"slideIn","duration":"0.25s","direction":"top"},"close":{"effect":"fadeOut","duration":"0.25s","timingFunction":"linear"}},"position":{"my":{"horizontal":"center","vertical":"bottom"},"at":{"horizontal":"center","vertical":"bottom"},"of":"window","collision":"none"}}}' !important;
}

.oj-messages-inline.oj-messages-outlined oj-message .oj-message-container,
.oj-messages-inline.oj-messages-outlined oj-message:last-child .oj-message-container {
  border-width: 1px;
  border-radius: var(--oj-core-border-radius-lg);
  margin: 0 0 0.25rem 0;
}

.oj-messages-inline .oj-message-header {
  padding: 1rem 0.5rem 0.5rem 1rem;
}

html[dir=rtl] .oj-messages-inline .oj-message-header {
  padding: 1rem 1rem 0.5rem 0.5rem;
}

.oj-messages-inline .oj-message-no-detail .oj-message-header {
  padding: 1rem 0.5rem 1rem 1rem;
}

html[dir=rtl] .oj-messages-inline .oj-message-no-detail .oj-message-header {
  padding: 1rem 1rem 1rem 0.5rem;
}

.oj-messages-inline .oj-message-container:not(.oj-message-no-detail) .oj-message-body {
  padding: 0 3rem 1rem 2.5rem;
}

html[dir=rtl] .oj-messages-inline .oj-message-container:not(.oj-message-no-detail) .oj-message-body {
  padding: 0 2.5rem 1rem 3rem;
}

.oj-messages-inline .oj-message-container.oj-message-no-icon:not(.oj-message-no-detail) .oj-message-body {
  padding: 0 3rem 1rem 1rem;
}

html[dir=rtl] .oj-messages-inline .oj-message-container.oj-message-no-icon:not(.oj-message-no-detail) .oj-message-body {
  padding: 0 1rem 1rem 3rem;
}

/* These are redwood values being hard-coded. Create vars for these if needed. */
.oj-messages-general .oj-message-header,
.oj-messages-notification .oj-message-header {
  padding: 0.5rem 1rem 0 1rem;
}

.oj-messages-general .oj-message-container.oj-message-no-icon.oj-message-no-detail .oj-message-header,
.oj-messages-notification .oj-message-container.oj-message-no-icon.oj-message-no-detail .oj-message-header {
  padding: 1rem;
}

.oj-messages-general .oj-message-container.oj-message-no-detail:not(.oj-message-no-icon) .oj-message-header,
.oj-messages-notification .oj-message-container.oj-message-no-detail:not(.oj-message-no-icon) .oj-message-header {
  padding: 0.5rem 1rem;
}

/* These are redwood values being hard-coded. Create vars for these if needed. */
.oj-messages-general .oj-message-body,
.oj-messages-notification .oj-message-body {
  padding: 0 3.75rem 1rem 2.5rem;
}

html[dir=rtl] .oj-messages-general .oj-message-body,
html[dir=rtl] .oj-messages-notification .oj-message-body {
  padding: 0 2.5rem 1rem 3.75rem;
}

.oj-messages-general .oj-message-container.oj-message-no-detail:not(.oj-message-no-icon) .oj-message-body,
.oj-messages-notification .oj-message-container.oj-message-no-detail:not(.oj-message-no-icon) .oj-message-body {
  padding: 0;
}

.oj-messages-general .oj-message-container.oj-message-no-icon.oj-message-no-detail .oj-message-body,
.oj-messages-notification .oj-message-container.oj-message-no-icon.oj-message-no-detail .oj-message-body {
  padding: 0;
}

oj-module:not(.oj-complete) {
  visibility: hidden;
}

oj-module {
  display: block;
}

:root {
  --oj-n-box-cell-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-n-box-cell-bg-color-maximized: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-n-box-node-bg-color: rgb(var(--oj-palette-neutral-rgb-30));
}

oj-n-box:not(.oj-complete) {
  visibility: hidden;
}

oj-n-box {
  display: block;
}

.oj-nbox {
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 35rem;
}

.oj-nbox-container {
  grid-gap: 0.25rem;
}

.oj-nbox-columns-title,
.oj-nbox-rows-title {
  color: var(--oj-core-text-color-secondary);
  font-size: var(--oj-dvt-label-font-size-md);
}

.oj-nbox-column-label,
.oj-nbox-row-label {
  color: var(--oj-core-text-color-secondary);
  font-size: var(--oj-dvt-label-font-size-sm);
}

.oj-nbox-cell {
  background-color: var(--oj-n-box-cell-bg-color);
  border-radius: var(--oj-panel-border-radius);
  padding: 0.5rem;
  grid-gap: 0.25rem;
  height: 2rem;
}

.oj-nbox-cell-shadow {
  box-shadow: var(--oj-core-box-shadow-sm);
}

.oj-nbox-cell.oj-maximized {
  background-color: var(--oj-n-box-cell-bg-color-maximized);
}

.oj-nbox-cell.oj-minimized {
  background-color: var(--oj-n-box-cell-bg-color);
}

.oj-nbox-cell-label {
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-md);
}

.oj-nbox-node-one-label-padding {
  padding: 0.375rem;
}

.oj-nbox-node-two-label-padding {
  padding: 0.125rem;
}

.oj-nbox-node-no-label {
  height: 2.75rem;
}

.oj-nbox-cell-label.oj-minimized {
  color: var(--oj-core-text-color-secondary);
}

.oj-nbox-cell-countlabel {
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-md);
}

.oj-nbox-node {
  background-color: var(--oj-n-box-node-bg-color);
  border-radius: var(--oj-core-border-radius-md);
  min-width: 4.75rem;
  max-width: 9.125rem;
}

.oj-nbox-node.oj-hover {
  border-color: var(--oj-dvt-item-contrast-color);
}

.oj-nbox-node.oj-selected {
  border-color: var(--oj-dvt-item-border-color-selected);
}

.oj-nbox-node-label {
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-md);
}

.oj-nbox-node-secondarylabel {
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-md);
}

.oj-nbox-node-initials-background {
  width: 196px;
  height: 196px;
}

.oj-nbox-node-initials-background-pattern {
  opacity: 0.3;
}

.oj-nbox-node-initials {
  fill: var(--oj-core-neutral-contrast);
  font-size: var(--oj-typography-body-xs-font-size);
}

.oj-nbox-node-initials.oj-nbox-node-initials-lg {
  font-size: var(--oj-typography-body-md-font-size);
}

.oj-nbox-node-initials-bg-color {
  fill: var(--oj-avatar-bg-color);
}

.oj-nbox-dialog {
  background-color: var(--oj-n-box-cell-bg-color);
  border-color: var(--oj-dialog-border-color);
}

.oj-nbox-dialog-label {
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-md);
}

.oj-nbox-dialog-countlabel {
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-md);
}

.oj-nbox-node-initials-neutral {
  background-image: url("images/../../redwood/images/avatar-pattern1.png");
}

.oj-nbox-node-initials-red,
.oj-nbox-node-initials-orange {
  background-image: url("images/../../redwood/images/avatar-pattern2.png");
}

.oj-nbox-node-initials-forest,
.oj-nbox-node-initials-green {
  background-image: url("images/../../redwood/images/avatar-pattern3.png");
}

.oj-nbox-node-initials-teal {
  background-image: url("images/../../redwood/images/avatar-pattern4.png");
}

.oj-nbox-node-initials-blue {
  background-image: url("images/../../redwood/images/avatar-pattern5.png");
}

.oj-nbox-node-initials-slate {
  background-image: url("images/../../redwood/images/avatar-pattern6.png");
}

.oj-nbox-node-initials-mauve,
.oj-nbox-node-initials-pink {
  background-image: url("images/../../redwood/images/avatar-pattern7.png");
}

.oj-nbox-node-initials-purple {
  background-image: url("images/../../redwood/images/avatar-pattern8.png");
}

.oj-nbox-node-initials-lilac {
  background-image: url("images/../../redwood/images/avatar-pattern9.png");
}

.oj-nbox-node-initials-gray {
  background-image: url("images/../../redwood/images/avatar-pattern10.png");
}

:root {
  --oj-toolbar-button-margin: 0.5rem;
  --oj-toolbar-borderless-button-margin: 0.125rem;
  --oj-toolbar-separator-margin: 0.5rem;
  --oj-private-toolbar-global-chroming-default: borderless;
}

:root {
  --oj-tree-view-indent-width: 1.5rem;
  --oj-tree-view-row-height: 2.5rem;
  --oj-tree-view-text-color: var(--oj-core-text-color-primary);
  --oj-private-tree-view-global-expand-animation: '{"effect":"expand"}';
  --oj-private-tree-view-global-collapse-animation: '{"effect":"collapse"}';
  --oj-private-tree-view-global-data-fadein-duration: 0.15s;
  --oj-private-tree-view-global-selection-affordance-default: selector;
  --oj-private-tree-view-global-load-indicator-default: skeleton;
}

:root {
  --oj-navigation-list-font-size: var(--oj-typography-body-md-font-size);
  --oj-navigation-list-icon-size: var(--oj-core-icon-size-lg);
  --oj-navigation-list-font-weight: 600;
  --oj-navigation-list-icon-margin: 0;
  --oj-navigation-list-sliding-heading-font-size: var(--oj-typography-subheading-xs-font-size);
  --oj-navigation-list-sliding-heading-font-weight: var(--oj-typography-subheading-xs-font-weight);
  --oj-navigation-list-sliding-heading-line-height: var(--oj-typography-subheading-xs-line-height);
  --oj-navigation-list-icon-to-text-padding: 0.5rem;
  --oj-navigation-list-item-min-height: 3rem;
  --oj-navigation-list-item-margin: 2rem;
  --oj-private-navigation-list-item-border-width: 3px;
  --oj-navigation-list-item-padding: 0;
  --oj-navigation-list-item-label-color: var(--oj-core-text-color-secondary);
  --oj-navigation-list-item-label-color-hover: var(--oj-core-text-color-primary);
  --oj-navigation-list-item-bg-color-hover: transparent;
  --oj-private-navigation-list-item-border-color-hover: transparent;
  --oj-navigation-list-item-bg-color-selected: transparent;
  --oj-navigation-list-item-border-color-selected: $Bgcolor-border-navbar !important; /*aqui*/
  --oj-navigation-list-item-label-color-selected: var(--oj-core-text-color-primary);
  --oj-private-navigation-list-global-horizontal-add-animation-default: '[{"effect":"expand","direction":"width"},"fadeIn"]';
  --oj-private-navigation-list-global-horizontal-remove-animation-default: '[{"effect":"collapse","direction":"width","persist":"all"},"fadeOut"]';
  --oj-private-navigation-list-global-add-animation-default: '[{"effect":"expand"},"fadeIn"]';
  --oj-private-navigation-list-global-remove-animation-default: '[{"effect":"collapse"},"fadeOut"]';
  --oj-private-navigation-list-global-update-animation-default: '{"effect":"fadeIn"}';
  --oj-private-navigation-list-global-expand-animation-default: '{"effect":"expand"}';
  --oj-private-navigation-list-global-collapse-animation-default: '{"effect":"collapse"}';
  --oj-private-navigation-list-global-slider-expand-animation-default: '{"effect":"slideIn","direction":"start","duration":"0.4s"}';
  --oj-private-navigation-list-global-slider-collapse-animation-default: '{"effect":"slideIn","direction":"end","duration":"0.4s"}';
  --oj-private-navigation-list-global-pointer-up-animation-default: '{"effect":"ripple"}';
  --oj-private-navigation-list-global-hierarchy-menu-threshold-default: -1;
}

oj-navigation-list:not(.oj-complete) {
  visibility: hidden;
}

oj-navigation-list {
  display: block;
}

/*Navlist root node*/
.oj-navigationlist,
.oj-navigationlist-listview-container {
  overflow-x: hidden;
}

.oj-navigationlist-listview {
  position: relative;
}

.oj-navigationlist-touch {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* navigation list divider used in category header navlist*/
.oj-navigationlist-category-divider {
  border-color: var(--oj-core-divider-color);
  border-style: solid;
  border-width: 1px 0 0;
  font-size: 0;
  height: 0;
  line-height: 0;
  margin: 0 3px;
}

/* navigation list divider used in horizontal navlist to separate buttons*/
.oj-navigationlist-horizontal .oj-navigationlist-divider {
  border-color: var(--oj-core-divider-color);
  border-style: solid;
  border-width: 0 1px 0 0;
  font-size: 0;
  height: 1.714rem;
  line-height: 0;
  margin: 5px 0;
  align-self: center;
  display: none;
}

.oj-navigationlist-item-dividers .oj-navigationlist-divider {
  display: list-item;
}

/* Basic styling  for all ul elements in list*/
.oj-navigationlist-element,
.oj-navigationlist-group {
  list-style-type: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

.oj-navigationlist-item-element:not(.oj-navigationlist-item) {
  display: block;
  line-height: 0;
}

.oj-navigationlist-item-element {
  list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

/* Remove focus ring on outer ul element*/
.oj-navigationlist-element:focus {
  outline: none;
}

/* Style content wrapper of each list item */
.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-label {
  vertical-align: middle;
}

.oj-navigationlist-vertical .oj-navigationlist-item::before {
  min-height: var(--oj-navigation-list-item-min-height);
  content: "";
  display: inline-block;
  visibility: hidden;
}

/* Styling for expand/collapse icons holder */
.oj-navigationlist-collapse-icon,
.oj-navigationlist-expand-icon {
  order: 1;
  align-self: center;
}

a.oj-navigationlist-collapse-icon,
a.oj-navigationlist-expand-icon,
a.oj-navigationlist-collapse-icon:hover,
a.oj-navigationlist-expand-icon:hover {
  text-decoration: none;
}

/* Style content of each list item */
.oj-navigationlist-item-content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}

a.oj-navigationlist-item-content {
  text-decoration: none;
  font-weight: normal;
  outline: none;
  overflow: hidden;
}

a.oj-navigationlist-item-content:active {
  background-color: transparent;
}

a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: #000000 !important;
}

.oj-selected > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #704b64 !important;
}

.oj-hover:not(.oj-selected) > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #966486 !important;
}

/* Navigation list node label or arbitrary content place holder*/
.oj-navigationlist-item-label {
  order: 2;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  display: inline-block;
  line-height: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
}

.oj-navigationlist-item-text-wrap .oj-navigationlist-item-label {
  white-space: normal;
}

/*Padding for vertical navlist item label*/
.oj-navigationlist-vertical .oj-navigationlist-item-label {
  padding: 3px 0;
  flex: 1 1 auto;
}

/* hide label for icons-only case */
.oj-navigationlist-icon-only .oj-navigationlist-item-label {
  display: none;
}

/* List item's Icon */
.oj-navigationlist-item-icon {
  color: var(--oj-navigation-list-item-label-color);
  flex: 0 0 auto;
  font-size: var(--oj-navigation-list-icon-size);
  margin: var(--oj-navigation-list-icon-margin);
}

.oj-navigationlist-group-item {
  display: flex;
  flex: 1 1 auto;
}

.oj-navigationlist-group {
  flex: 1 1 auto;
}

/* Disabled node */
.oj-navigationlist-item.oj-disabled .oj-navigationlist-item-label {
  color: var(--oj-core-text-color-disabled);
}

.oj-navigationlist-item.oj-disabled a.oj-navigationlist-item-content {
  cursor: default;
}

.oj-navigationlist-item.oj-disabled .oj-navigationlist-item-icon {
  color: var(--oj-core-text-color-disabled);
}

/* Badge/Metadata/icons node */
.oj-navigationlist-item-end {
  color: var(--oj-core-text-color-secondary);
}

.oj-navigationlist-horizontal:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-end {
  margin-left: var(--oj-navigation-list-icon-to-text-padding);
  flex: 0 0 auto;
  order: 3;
  align-self: center;
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-end {
  order: 1;
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-label,
.oj-navigationlist-vertical .oj-navigationlist-item-end {
  order: 3;
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-icon {
  order: 2;
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-content {
  overflow: visible;
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-end {
  position: relative;
  top: calc(50% - 1.35rem);
  left: 0.5rem;
}

html[dir=rtl] .oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-end {
  right: 0.5rem;
}

.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item-content {
  position: relative;
  overflow: visible;
}

.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item-end {
  position: absolute;
  top: calc(50% - 1rem);
  line-height: 0;
  left: 50%;
}

html[dir=rtl] .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item-end {
  right: 50%;
}

.oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-content {
  position: relative;
}

.oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-end {
  position: absolute;
  top: 50%;
  transform: translate(0, calc(-50% - 0.5rem));
  line-height: 0;
  left: calc(50% + 0.5rem);
}

html[dir=rtl] .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-end {
  right: calc(50% + 0.5rem);
}

.oj-navigationlist-item.oj-disabled .oj-navigationlist-item-end {
  color: var(--oj-core-text-color-disabled);
}

/* Selected node */
.oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
  color: var(--oj-navigation-list-item-label-color-selected);
}

/* hover icon */
.oj-navigationlist-item.oj-hover:not(.oj-selected) .oj-navigationlist-item-icon {
  color: var(--oj-navigation-list-item-label-color-hover);
}

/*borders for high contrast mode*/
.oj-hicontrast .oj-navigationlist-item.oj-selected,
.oj-hicontrast .oj-navigationlist-item.oj-selected.oj-hover,
.oj-hicontrast .oj-navigationlist-item.oj-selected.oj-focus {
  border: 1px solid;
}

.oj-hicontrast .oj-navigationlist-item.oj-hover,
.oj-hicontrast .oj-navigationlist-item.oj-focus {
  border: 1px dotted;
}

/*Focus ring around  focused list item*/
.oj-navigationlist .oj-navigationlist-item.oj-focus-highlight {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: -1px;
}

.oj-hicontrast .oj-navigationlist-item.oj-focus {
  outline: none;
}

.oj-navigationlist-item {
  border-color: transparent;
  display: flex;
  align-items: stretch;
}

.oj-navigationlist-item.oj-selected {
  background-color: var(--oj-navigation-list-item-bg-color-selected);
  border-color: #8B607D !important;
}

.oj-navigationlist-item.oj-hover:not(.oj-selected) {
  background-color: var(--oj-navigation-list-item-bg-color-hover);
  border-color: var(--oj-private-navigation-list-item-border-color-hover);
}

/*---- Start of common styles for collapsible and expanded navigation list ----*/
html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-has-icons > .oj-navigationlist-item > .oj-navigationlist-item-no-icon .oj-navigationlist-item-label {
  margin-left: calc(var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-has-icons > .oj-navigationlist-item > .oj-navigationlist-item-no-icon .oj-navigationlist-item-label {
  margin-right: calc(var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-style: solid;
  margin-top: 0;
  margin-bottom: var(--oj-navigation-list-item-margin);
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  padding-right: calc(var(--oj-navigation-list-item-padding) - var(--oj-private-navigation-list-item-border-width));
  border-width: 0 var(--oj-private-navigation-list-item-border-width) 0 0;
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  padding-left: calc(var(--oj-navigation-list-item-padding) - var(--oj-private-navigation-list-item-border-width));
  border-width: 0 0 0 var(--oj-private-navigation-list-item-border-width);
}

.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:last-child {
  margin-bottom: 0;
}

.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
  border-style: none;
}

.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-focus,
.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-hover,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-focus,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-hover {
  border-style: dotted;
}

html[dir=rtl] .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-focus, html[dir=rtl] .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-hover,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-focus,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-hover {
  border-width: 1px;
}

html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-focus, html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-hover,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-focus,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-hover {
  border-width: 1px;
}

html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-focus,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-hover,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-focus,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-hover {
  border-width: 1px;
}

.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected,
.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-focus,
.oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-hover,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-focus,
.oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-hover {
  border-style: solid;
}

html[dir=rtl] .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-focus,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-hover,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-focus,
html[dir=rtl] .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-hover {
  border-width: 1px;
}

html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-focus,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-hover,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-focus,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-selected.oj-hover {
  border-width: 1px;
}

/* Set the indentation here depth 1 is one indent level */
html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-1 .oj-navigationlist-item-content {
  padding-left: var(--oj-navigation-list-item-padding);
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-1 .oj-navigationlist-item-content {
  padding-right: var(--oj-navigation-list-item-padding);
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-2 .oj-navigationlist-item-content {
  padding-left: calc(2 * var(--oj-navigation-list-item-padding));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-2 .oj-navigationlist-item-content {
  padding-right: calc(2 * var(--oj-navigation-list-item-padding));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-3 .oj-navigationlist-item-content {
  padding-left: calc(3 * var(--oj-navigation-list-item-padding));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-3 .oj-navigationlist-item-content {
  padding-right: calc(3 * var(--oj-navigation-list-item-padding));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-4 .oj-navigationlist-item-content {
  padding-left: calc(4 * var(--oj-navigation-list-item-padding));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-4 .oj-navigationlist-item-content {
  padding-right: calc(4 * var(--oj-navigation-list-item-padding));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-5 .oj-navigationlist-item-content {
  padding-left: calc(5 * var(--oj-navigation-list-item-padding));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-5 .oj-navigationlist-item-content {
  padding-right: calc(5 * var(--oj-navigation-list-item-padding));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-6 .oj-navigationlist-item-content {
  padding-left: calc(6 * var(--oj-navigation-list-item-padding));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-6 .oj-navigationlist-item-content {
  padding-right: calc(6 * var(--oj-navigation-list-item-padding));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-7 .oj-navigationlist-item-content {
  padding-left: calc(7 * var(--oj-navigation-list-item-padding));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-7 .oj-navigationlist-item-content {
  padding-right: calc(7 * var(--oj-navigation-list-item-padding));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-8 .oj-navigationlist-item-content {
  padding-left: calc(8 * var(--oj-navigation-list-item-padding));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul:not(.oj-navigationlist-has-icons) .oj-navigationlist-depth-8 .oj-navigationlist-item-content {
  padding-right: calc(8 * var(--oj-navigation-list-item-padding));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-1 .oj-navigationlist-item-content {
  padding-left: calc(var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-1 .oj-navigationlist-item-content {
  padding-right: calc(var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-2 .oj-navigationlist-item-content {
  padding-left: calc(2 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-2 .oj-navigationlist-item-content {
  padding-right: calc(2 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-3 .oj-navigationlist-item-content {
  padding-left: calc(3 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-3 .oj-navigationlist-item-content {
  padding-right: calc(3 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-4 .oj-navigationlist-item-content {
  padding-left: calc(4 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-4 .oj-navigationlist-item-content {
  padding-right: calc(4 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-5 .oj-navigationlist-item-content {
  padding-left: calc(5 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-5 .oj-navigationlist-item-content {
  padding-right: calc(5 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-6 .oj-navigationlist-item-content {
  padding-left: calc(6 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-6 .oj-navigationlist-item-content {
  padding-right: calc(6 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-7 .oj-navigationlist-item-content {
  padding-left: calc(7 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-7 .oj-navigationlist-item-content {
  padding-right: calc(7 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-8 .oj-navigationlist-item-content {
  padding-left: calc(8 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-slider) ul.oj-navigationlist-has-icons .oj-navigationlist-depth-8 .oj-navigationlist-item-content {
  padding-right: calc(8 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
}

html:not([dir=rtl]) .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-navigationlist-group-item) .oj-navigationlist-item-content {
  padding-right: var(--oj-navigation-list-item-padding);
}

html[dir=rtl] .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-navigationlist-group-item) .oj-navigationlist-item-content {
  padding-left: var(--oj-navigation-list-item-padding);
}

html:not([dir=rtl]) .oj-navigationlist-group-item {
  padding-right: var(--oj-navigation-list-item-padding);
}

html[dir=rtl] .oj-navigationlist-group-item {
  padding-left: var(--oj-navigation-list-item-padding);
}

/*---- End of common styles for collapsible and expanded navigation list ----*/
/* Start of Collapsible Navigation list*/
.oj-navigationlist-collapsible .oj-navigationlist-item-element.oj-collapsed .oj-navigationlist-group {
  max-height: 0;
}

/* expand and collapse animation */
.oj-navigationlist-collapsible .oj-navigationlist-collapsible-transition {
  overflow: hidden;
}

/* Collapse or expand icon color should not change on hover*/
.oj-navigationlist-item a.oj-navigationlist-collapse-icon,
.oj-navigationlist-item a.oj-navigationlist-expand-icon {
  color: var(--oj-navigation-list-item-label-color);
}

/* Collapse or expand icon color should not change on hover*/
.oj-navigationlist-item.oj-hover a.oj-navigationlist-collapse-icon,
.oj-navigationlist-item.oj-hover a.oj-navigationlist-expand-icon {
  color: var(--oj-navigation-list-item-label-color-hover);
}

.oj-navigationlist-collapse-icon:focus,
.oj-navigationlist-expand-icon:focus {
  outline: none;
}

.oj-navigationlist-focused-element:not(.oj-focus-highlight) {
  outline: none;
}

/* End of Collapsible Navigation list*/
/*Start of icons only navlist*/
.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
  border-style: solid;
}

html[dir=rtl] .oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
  border-width: 0 var(--oj-private-navigation-list-item-border-width) 0 0;
}

html:not([dir=rtl]) .oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
  border-width: 0 0 0 var(--oj-private-navigation-list-item-border-width);
}

html[dir=rtl] .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
  padding: 0 calc(var(--oj-navigation-list-item-padding) - var(--oj-private-navigation-list-item-border-width)) 0 var(--oj-navigation-list-item-padding);
}

html:not([dir=rtl]) .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
  padding: 0 var(--oj-navigation-list-item-padding) 0 calc(var(--oj-navigation-list-item-padding) - var(--oj-private-navigation-list-item-border-width));
}

.oj-navigationlist-icon-only .oj-navigationlist-item-content {
  justify-content: center;
}

.oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-content {
  flex: 0 1 auto;
}

/*End of icons only navlist*/
.oj-navigationlist-vertical.oj-navigationlist-icon-only {
  display: inline-flex;
}

.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
  margin-bottom: var(--oj-navigation-list-item-margin);
}

.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item:last-child {
  margin-bottom: 0;
}

/*Start of common horizontal navigationlist styles */
.oj-navigationlist-horizontal .oj-navigationlist-element {
  display: flex;
}

.oj-navigationlist-horizontal .oj-navigationlist-item {
  flex: 1 1 auto;
}

/* This is due to bug in IE 11 where setting flex-shrink:0 is needed to avoid truncation in item text which is needed for overflow feature. This work around breaks text-wrap functionality so enabling this only when no text wrap. We can remove this once IE 11 support dropped and can update docs saying text-wrap is supported with overflow. */
.oj-navigationlist-horizontal:not(.oj-navigationlist-item-text-wrap) .oj-navigationlist-item {
  flex: 1 0 auto;
}

@media print, screen {
  .oj-navigationlist-horizontal.oj-sm-condense .oj-navigationlist-item {
    flex: 0 0 auto;
  }
  .oj-navigationlist-horizontal.oj-sm-justify-content-center .oj-navigationlist-element {
    justify-content: center;
  }
  .oj-navigationlist-horizontal.oj-sm-justify-content-flex-end .oj-navigationlist-element {
    justify-content: flex-end;
  }
}
@media print, screen and (min-width: 600px) {
  .oj-navigationlist-horizontal.oj-md-condense .oj-navigationlist-item {
    flex: 0 0 auto;
  }
  .oj-navigationlist-horizontal.oj-md-justify-content-center .oj-navigationlist-element {
    justify-content: center;
  }
  .oj-navigationlist-horizontal.oj-md-justify-content-flex-end .oj-navigationlist-element {
    justify-content: flex-end;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-navigationlist-horizontal.oj-lg-condense .oj-navigationlist-item {
    flex: 0 1 auto;
  }
  .oj-navigationlist-horizontal.oj-lg-justify-content-center .oj-navigationlist-element {
    justify-content: center;
  }
  .oj-navigationlist-horizontal.oj-lg-justify-content-flex-end .oj-navigationlist-element {
    justify-content: flex-end;
  }
}
@media screen and (min-width: 1440px) {
  .oj-navigationlist-horizontal.oj-xl-condense .oj-navigationlist-item {
    flex: 0 0 auto;
  }
  .oj-navigationlist-horizontal.oj-xl-justify-content-center .oj-navigationlist-element {
    justify-content: center;
  }
  .oj-navigationlist-horizontal.oj-xl-justify-content-flex-end .oj-navigationlist-element {
    justify-content: flex-end;
  }
}
.oj-navigationlist-item-element {
  box-sizing: border-box;
  min-height: var(--oj-navigation-list-item-min-height);
}

.oj-navigationlist-horizontal .oj-navigationlist-item-label {
  align-self: center;
}

/*End of common horizontal navigationlist styles */
/*Start of  horizontal navigationlist styles icons only*/
html .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
  margin-inline-start: var(--oj-navigation-list-item-margin);
  padding: 0 var(--oj-navigation-list-item-padding);
}

html .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:first-child {
  margin-inline-start: 0;
}

.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
  border-width: 0 0 var(--oj-private-navigation-list-item-border-width) 0;
  border-style: solid;
}

/*End of  horizontal navigationlist styles icons only*/
/*Start of  horizontal navigationlist styles excluding icons only*/
.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-width: 0 0 var(--oj-private-navigation-list-item-border-width) 0;
  margin-inline-end: var(--oj-navigation-list-item-margin);
  border-style: solid;
}

.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-navigationlist-item-last-child {
  margin-inline-end: 0;
}

.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-style: none;
}

.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-focus,
.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover {
  border-width: 1px;
  border-style: dotted;
}

.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected,
.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected.oj-focus,
.oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected.oj-hover {
  border-width: 1px;
  border-style: solid;
}

.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
  padding: 0 var(--oj-navigation-list-item-padding);
  justify-content: center;
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
  padding: 0 var(--oj-navigation-list-item-padding);
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  padding-bottom: var(--oj-navigation-list-icon-to-text-padding);
}

.oj-navigationlist:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  align-self: center;
}

html:not([dir=rtl]) .oj-navigationlist:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  margin-right: var(--oj-navigation-list-icon-to-text-padding);
}

html[dir=rtl] .oj-navigationlist:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  margin-left: var(--oj-navigation-list-icon-to-text-padding);
}

.oj-navigationlist-horizontal-bottom.oj-navigationlist-horizontal .oj-navigationlist-item {
  border-width: var(--oj-private-navigation-list-item-border-width) 0 0 0;
}

/*End of  horizontal navigationlist styles excluding icons only*/
/*Start of  horizontal stacked icon label navigationlist styles */
.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-element {
  min-height: var(--oj-navigation-list-item-min-height);
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-divider {
  height: 2.714rem;
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  padding-bottom: 2px;
}

.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
  flex-direction: column;
}

/*End of  horizontal stacked icon label navigationlist styles */
/* Start of App Level horizontal navlist styles */
.oj-navigationlist-item-label {
  font-size: var(--oj-navigation-list-font-size);
  font-weight: var(--oj-navigation-list-font-weight);
}

.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled):not(.oj-hover):not(.oj-selected) .oj-navigationlist-item-icon {
  color: var(--oj-navigation-list-item-label-color);
}

.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected) {
  background-color: var(--oj-navigation-list-item-bg-color-hover);
}

.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected) a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: var(--oj-navigation-list-item-label-color-hover);
}

.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected) .oj-navigationlist-item-icon {
  color: var(--oj-navigation-list-item-label-color-hover);
}

/* End of App Level horizontal navlist styles */
/*Start of sliding navlist*/
/*Hide siblings of parent node while showing the list*/
.oj-navigationlist-slider .oj-navigationlist-element:not(.oj-navigationlist-current) > .oj-navigationlist-item-element:not(.oj-expanded),
.oj-navigationlist-slider .oj-navigationlist-item-element:not(.oj-expanded) > .oj-navigationlist-group,
.oj-navigationlist-slider .oj-navigationlist-item-element.oj-expanded:not(.oj-navigationlist-current) > .oj-navigationlist-group > .oj-navigationlist-item-element:not(.oj-expanded),
.oj-navigationlist-slider .oj-navigationlist-item-element.oj-expanded > .oj-navigationlist-group-item {
  display: none;
}

/* Navlist header in case of sliding */
.oj-navigationlist-toolbar {
  background-color: transparent;
  display: flex;
  line-height: 3.142rem;
  padding-inline-start: 0.5rem;
}

/* previous link */
.oj-navigationlist-previous-link {
  align-self: center;
  order: 0;
  display: flex;
  flex: 1 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oj-navigationlist-previous-button {
  align-self: center;
  margin-bottom: 0;
}

a.oj-navigationlist-previous-link:active {
  background-color: transparent;
}

/* Override link style */
a.oj-navigationlist-previous-link {
  text-decoration: none;
  outline: none;
  font-weight: normal;
}

/* Label for current displayed list */
.oj-navigationlist-current-header {
  color: var(--oj-heading-text-color);
  font-size: var(--oj-navigation-list-sliding-heading-font-size);
  font-weight: var(--oj-navigation-list-sliding-heading-font-weight);
  line-height: var(--oj-navigation-list-sliding-heading-line-height);
  flex: 1 1 auto;
  order: 1;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.oj-navigationlist-toolbar-separator {
  border-left: 1px solid var(--oj-core-divider-color);
  align-self: center;
  order: 1;
  display: inline-block;
  height: 2.642rem;
  vertical-align: middle;
  margin-top: 0.214rem;
  margin-bottom: 0.214rem;
  margin-inline-start: 0.714rem;
  margin-inline-end: 0;
}

.oj-navigationlist-hierarchical-button {
  align-self: center;
  order: 2;
  flex: 0 0 auto;
}

/* override oj-button margin for hierarchical menu button*/
.oj-button.oj-navigationlist-hierarchical-button {
  margin: 0 5px;
}

.oj-navigationlist-hierarchical-button.oj-button-icons-only .oj-hier-icon.oj-button-icon.oj-start {
  margin-inline-end: 0.5rem;
}

/* Multiple space elements will be added to dom to get tree style in hierarchical menu  popup*/
.oj-navigationlist-hvitem-space {
  margin-left: 1.142rem;
}

/* hicontrast overrides for sliding navlist */
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-hover.oj-navigationlist-item,
html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-focus.oj-navigationlist-item,
.oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-hover.oj-navigationlist-item,
.oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-focus.oj-navigationlist-item {
  border: 1px dotted;
}

html:not([dir=rtl]) .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-navigationlist-item,
.oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-navigationlist-item {
  border-width: 0;
}

/* override menu css*/
.oj-menu-item-icon.oj-navigationlist-level-indicator {
  align-self: baseline;
  padding-bottom: 10px;
  padding-left: 9px;
  margin-bottom: 2px;
  margin-top: 3px;
  width: auto;
  height: auto;
}

.oj-navigationlist-hierarchical-menu.oj-menu,
.oj-navigationlist-hierarchical-menu .oj-menu {
  padding: 6px 12px;
  font-size: 12px;
}

.oj-navigationlist-hierarchical-menu .oj-menu-item a {
  line-height: 12px;
  height: 20px;
}

.oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus > a,
.oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus-ancestor > a {
  background: none;
}

.oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus a > .oj-navigationlist-hierarchical-menu-label {
  background-color: var(--oj-core-bg-color-selected);
  border: 1px solid var(--oj-tree-view-text-color);
  padding: 1px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.oj-navigationlist-hierarchical-menu .oj-menu-item a > .oj-navigationlist-hierarchical-menu-label {
  padding: 2px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.oj-navigationlist-hierarchical-menu .oj-menu-item a {
  color: var(--oj-tree-view-text-color);
}

html:not([dir=rtl]) .oj-navigationlist-hierarchical-menu .oj-menu-item a,
html:not([dir=ltr]) .oj-navigationlist-hierarchical-menu .oj-menu-item a {
  padding: 0;
}

.oj-navigationlist-hierarchical-button .oj-button-menu-dropdown-icon {
  display: none !important;
}

html:not([dir=ltr]) .oj-navigationlist-hierarchical-menu .oj-menu-item-icon,
html:not([dir=rtl]) .oj-navigationlist-hierarchical-menu .oj-menu-item-icon {
  margin-left: 4px;
  margin-right: 2px;
}

.oj-navigationlist-hierarchical-menu .oj-menu-item-icon {
  position: static;
  transform: none;
}

/* end - override menu css*/
.oj-navigationlist-has-icons .oj-navigationlist-overflow-item-icon {
  display: block;
}

.oj-navigationlist-overflow-item-icon {
  display: none;
  font-size: 24px;
}

.oj-menu-item-icon.oj-navigationlist-level-indicator {
  border-bottom: 1px solid var(--oj-popup-border-color);
}

html:not([dir=rtl]) .oj-menu-item-icon.oj-navigationlist-level-indicator {
  border-left: 1px solid var(--oj-popup-border-color);
}

html[dir=rtl] .oj-menu-item-icon.oj-navigationlist-level-indicator {
  border-right: 1px solid var(--oj-popup-border-color);
}

.oj-navigationlist-no-data-message {
  padding: var(--oj-core-spacing-2x);
  background-color: var(--oj-collection-bg-color);
  min-height: var(--oj-typography-body-md-font-size);
}

/* Styling on the status text, such as fetching data */
.oj-navigationlist-status-message {
  position: absolute;
  padding: var(--oj-core-spacing-2x);
  display: none;
}

.oj-navigationlist-horizontal .oj-navigationlist-status-message {
  padding: 0;
}

/* Styling for the activity indicator*/
.oj-navigationlist-loading-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: auto;
}

.oj-navigationlist-loading-icon:before {
  content: url("images/spinner_full.gif");
  transform: translate(-37.5%, -37.5%) scale(0.25);
}

.oj-navigationlist-horizontal .oj-navigationlist-loading-icon {
  width: 24px;
  height: 24px;
}

.oj-navigationlist-horizontal .oj-navigationlist-loading-icon:before {
  content: url("images/spinner_full.gif");
  transform: translate(-42.5%, -42.5%) scale(0.15);
}

/* navigation list            */
/* -------------------------- */
.oj-navigationlist-vertical {
  --oj-navigation-list-item-padding: 1.5rem;
  --oj-navigation-list-item-bg-color-hover: var(--oj-core-bg-color-hover);
  --oj-navigation-list-item-bg-color-selected: var(--oj-core-bg-color-active);
  --oj-navigation-list-icon-margin: 0;
  --oj-navigation-list-icon-to-text-padding: 0.5rem;
  --oj-navigation-list-item-min-height: 3rem;
  --oj-navigation-list-item-margin: 0;
}

.oj-navigationlist-vertical.oj-navigationlist-icon-only {
  --oj-navigation-list-item-margin: 0;
  --oj-navigation-list-item-padding: 1.6875rem;
  --oj-navigation-list-item-bg-color-selected: var(--oj-core-bg-color-active);
  --oj-navigation-list-icon-margin: 0;
  --oj-navigation-list-item-min-height: 3rem;
}

.oj-navigationlist-horizontal.oj-navigationlist-icon-only {
  --oj-navigation-list-item-margin: 2rem;
  --oj-navigation-list-item-bg-color-selected: transparent;
  --oj-navigation-list-icon-margin: 0;
  --oj-navigation-list-item-min-height: 3rem;
  --oj-navigation-list-item-padding: 0;
}

.oj-navigationlist-stack-icon-label {
  --oj-navigation-list-item-min-height: 2.75rem;
  --oj-navigation-list-icon-margin: 0;
  --oj-navigation-list-icon-to-text-padding: 0;
  --oj-navigation-list-item-margin: 2rem;
  --oj-navigation-list-item-padding: 0;
}

.oj-contrast-marker,
.oj-color-invert {
  --oj-navigation-list-item-label-color: var(--oj-core-text-color-secondary);
  --oj-navigation-list-item-label-color-hover: var(--oj-core-text-color-primary);
  --oj-navigation-list-item-bg-color-hover: var(--oj-core-bg-color-hover);
  --oj-navigation-list-item-border-color-selected: rgb(var(--oj-palette-brand-rgb-50));
  --oj-navigation-list-item-label-color-selected: var(--oj-core-text-color-primary);
}

.oj-contrast-marker .oj-navigationlist-vertical,
.oj-contrast-marker.oj-navigationlist-vertical,
.oj-color-invert .oj-navigationlist-vertical,
.oj-color-invert.oj-navigationlist-vertical {
  --oj-navigation-list-item-bg-color-selected: var(--oj-core-bg-color-active);
}

.oj-contrast-marker .oj-navigationlist-icon-only,
.oj-contrast-marker.oj-navigationlist-icon-only,
.oj-color-invert .oj-navigationlist-icon-only,
.oj-color-invert.oj-navigationlist-icon-only {
  --oj-navigation-list-item-bg-color-hover: var(--oj-core-bg-color-hover);
}

:root {
  --oj-private-off-canvas-global-display-mode-default: overlay;
}

/*
     * applied to the outer most element of the offcanvas
     */
.oj-offcanvas-outer-wrapper {
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/*
     * applied to the inner wrapper of the offcanvas in push mode
     */
.oj-offcanvas-inner-wrapper,
.oj-offcanvas-inner-push-wrapper {
  position: relative;
  height: 100%;
}

/*
     * only applied to the page level offcanvas
     */
.oj-offcanvas-page > .oj-offcanvas-open {
  position: fixed;
}

/*
     * only applied to the outer wrapper of page level offcanvas
     */
.oj-offcanvas-outer-wrapper.oj-offcanvas-page {
  overflow-y: visible;
}

/*
     * Transition selector is only applied while the offcanvas is activating.
     * In push mode, it's applied to the inner wrapper of the offcanvas.
     * In overlay mode, it's applied to the offcanvas element.
     */
.oj-offcanvas-transition {
  transition: transform var(--oj-animation-duration-long);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition-timing-function: var(--oj-animation-ease-in-out);
}

/*
     * applied to the outer wrapper when displayMode = pin
     */
.oj-offcanvas-outer-wrapper.oj-offcanvas-pin {
  display: flex;
  flex-wrap: nowrap;
}

.oj-offcanvas-pin .oj-offcanvas-start {
  position: relative;
}

/*
     * Pin transition selector is only applied to the offcanvas in the pin mode.
     */
.oj-offcanvas-pin-transition {
  min-width: 0;
  transition: min-width var(--oj-animation-duration-long);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition-timing-function: var(--oj-animation-ease-in-out);
}

.oj-offcanvas-outer-wrapper .oj-offcanvas-start,
.oj-offcanvas-outer-wrapper .oj-offcanvas-end,
.oj-offcanvas-outer-wrapper .oj-offcanvas-top,
.oj-offcanvas-outer-wrapper .oj-offcanvas-bottom {
  position: absolute;
  box-sizing: border-box;
  border-radius: 0;
  display: none;
}

.oj-offcanvas-start,
.oj-offcanvas-end {
  height: 100%;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.oj-offcanvas-top,
.oj-offcanvas-bottom {
  width: 100%;
  left: 0;
  right: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/*
     * applied to the offcanvas on the start edge
     */
.oj-offcanvas-start {
  top: 0;
}

html:not([dir=rtl]) .oj-offcanvas-start {
  transform: translate3d(-100%, 0, 0);
  left: 0;
  border-width: 0 1px 0 0;
}

html[dir=rtl] .oj-offcanvas-start {
  transform: translate3d(100%, 0, 0);
  right: 0;
  border-width: 0 0 0 1px;
}

/*
     * applied to the offcanvas on the end edge
     */
html:not([dir=rtl]) .oj-offcanvas-end {
  right: 0;
  transform: translate3d(100%, 0, 0);
  border-width: 0 0 0 1px;
}

html[dir=rtl] .oj-offcanvas-end {
  left: 0;
  transform: translate3d(-100%, 0, 0);
  border-width: 0 1px 0 0;
}

/*
     * applied to the offcanvas on the top edge
     */
.oj-offcanvas-top {
  border-width: 0 0 1px;
  top: 0;
  transform: translate3d(0, -100%, 0);
}

/*
     * applied to the offcanvas on the bottom edge
     */
.oj-offcanvas-bottom {
  border-width: 1px 0 0 0;
  bottom: 0;
  transform: translate3d(0, 100%, 0);
}

/*
     * applied to the offcanvas when it is open
     */
.oj-offcanvas-start.oj-offcanvas-open,
.oj-offcanvas-end.oj-offcanvas-open,
.oj-offcanvas-top.oj-offcanvas-open,
.oj-offcanvas-bottom.oj-offcanvas-open {
  display: block;
  z-index: var(--oj-private-core-z-index-off-canvas);
}

/* 
     * Suppress focus ring
     */
.oj-offcanvas-start:not(.oj-focus-highlight):focus,
.oj-offcanvas-end:not(.oj-focus-highlight):focus,
.oj-offcanvas-top:not(.oj-focus-highlight):focus,
.oj-offcanvas-bottom:not(.oj-focus-highlight):focus {
  outline: none;
}

/*
     * applied to all edges
     */
/*
     * Overlay: start and end offcanvases shift
     */
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-start > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-end > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-start > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-end > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay {
  transform: translate3d(0%, 0, 0);
}

/*
     * Overlay: top and bottom offcanvases shift
     */
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-down > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-up > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-down > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay,
.oj-offcanvas-outer-wrapper.oj-offcanvas-shift-up > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay {
  transform: translate3d(0, 0%, 0);
}

/*
     * Applied to the glass pane of modal offcanvas
     */
.oj-offcanvas-glasspane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  transition: background 0.5s;
  transition-timing-function: var(--oj-animation-ease-in-out);
  z-index: var(--oj-private-core-z-index-off-canvas);
}

/*
     * glass pane opacity after animation
     */
.oj-offcanvas-glasspane-dim {
  background: var(--oj-core-scrim-color);
}

/*
     * applied to the overlay offcanvas when it is open
     */
html:not([dir=rtl]) .oj-offcanvas-start.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
  box-shadow: 8px 0px 15px rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

html[dir=rtl] .oj-offcanvas-start.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
  box-shadow: -8px 0px 15px rgba(var(--oj-core-box-shadow-rgb), 0.1);
}

html:not([dir=rtl]) .oj-offcanvas-end.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
  box-shadow: -8px 0px 15px rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

html[dir=rtl] .oj-offcanvas-end.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
  box-shadow: 8px 0px 15px rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

.oj-offcanvas-top.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
  box-shadow: 0px 3px 3px 0 rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

.oj-offcanvas-bottom.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
  box-shadow: 0px -8px 15px rgba(var(--oj-core-box-shadow-rgb), 0.05);
}

oj-optgroup:not(.oj-complete) {
  visibility: hidden;
}

oj-option:not(.oj-complete) {
  visibility: hidden;
}

/* paging control */
/* --------------------------------------------------------------- */
oj-paging-control:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the component. Set the line-height back to normal in case it
       was set to 0 by the table/datagrid footer classes */
.oj-pagingcontrol {
  line-height: normal;
  display: block;
}

/* Styling for the component content. */
.oj-pagingcontrol-content {
  overflow: hidden;
}

/* Styling for the loadMore mode contents. */
.oj-pagingcontrol-loadmore {
  padding: 0.3rem;
  text-align: end;
}

/* Styling for the Show More link. */
.oj-pagingcontrol-loadmore-link {
  color: var(--oj-link-text-color);
  white-space: nowrap;
  text-decoration: none;
}

/* Styling for the loadMore link focus state. */
.oj-pagingcontrol-loadmore-link:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

.oj-pagingcontrol-loadmore-link.oj-hover {
  text-decoration: underline;
}

/* Styling for the loadMore mode range. */
.oj-pagingcontrol-loadmore-range {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  white-space: nowrap;
}

.oj-pagingcontrol-nav {
  /* Styling for the page mode contents. */
  padding: 0.3rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.oj-pagingcontrol-nav .oj-pagingcontrol-nav-standard {
  height: var(--oj-button-height);
}

.oj-pagingcontrol-nav .oj-pagingcontrol-nav-dots-vertical {
  height: auto;
}

/* Styling for the page mode page input section. */
.oj-pagingcontrol-nav-input-section {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-inline-end: 0.3rem;
}

.oj-pagingcontrol-nav-input-section .oj-text-field-readonly {
  text-align: center;
}

/* Styling for the page mode navigation arrows section. */
.oj-pagingcontrol-nav-arrow-section {
  display: inline-block;
  vertical-align: middle;
  padding-inline-start: 0.3rem;
  border-inline-start-width: 1px;
  border-inline-start-color: var(--oj-core-divider-color);
  border-inline-start-style: solid;
}

/* Styling for the page mode navigation arrows section when it is the first child  */
.oj-pagingcontrol-nav-arrow-section:first-child {
  padding-inline-start: 0;
}

html:not([dir=rtl]) .oj-pagingcontrol-nav-arrow-section:first-child {
  border-left: 0;
}

html[dir=rtl] .oj-pagingcontrol-nav-arrow-section:first-child {
  border-right: 0;
}

/* Styling for the page mode page links section. */
.oj-pagingcontrol-nav-pages-section {
  display: inline-block;
  vertical-align: middle;
  line-height: var(--oj-button-height);
}

/* Styling for the page mode dot links. */
.oj-pagingcontrol-nav-dot {
  line-height: var(--oj-typography-body-md-font-size);
  padding: 8px;
  display: inline-block;
}

/* Styling for the page mode dot bullet. */
.oj-pagingcontrol-nav-dot-bullet {
  font-size: 0;
  border-width: 1px;
  border-style: solid;
  border-color: var(--oj-private-icon-color-default);
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease 0s;
  display: inline-block;
  vertical-align: middle;
}

/* Styling for the page mode dot bullet when paging control in high contrast mode. */
.oj-hicontrast .oj-pagingcontrol-nav-dot-bullet {
  border: 3px double;
}

/* Styling for the page mode dot link when selected or hovered. */
.oj-pagingcontrol-nav-dot-bullet.oj-selected,
.oj-pagingcontrol-nav-dot-bullet.oj-hover {
  background-color: var(--oj-private-icon-color-active);
  border-color: var(--oj-private-icon-color-active);
  content: "";
}

/* Styling for the page mode page links. */
.oj-pagingcontrol-nav-page {
  color: var(--oj-link-text-color);
  min-width: var(--oj-typography-body-md-font-size);
  font-size: var(--oj-typography-body-md-font-size);
  line-height: var(--oj-typography-body-md-line-height);
  padding: 4px 8px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  outline: none;
  border: 1px solid transparent;
}

.oj-pagingcontrol-nav-page.oj-hover {
  text-decoration: underline;
}

.oj-pagingcontrol-nav-page.oj-focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
}

.oj-pagingcontrol-nav-dot.oj-focus:not(.oj-focus-highlight),
.oj-pagingcontrol-nav-page.oj-focus:not(.oj-focus-highlight) {
  outline: none;
}

.oj-pagingcontrol-nav-dot:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

/* Styling for the page mode page link when selected. */
.oj-pagingcontrol-nav-page.oj-selected {
  border: 1px solid var(--oj-label-color);
  color: var(--oj-core-text-color-primary);
  display: inline;
}

/* Styling for the page mode page link when disabled. */
.oj-pagingcontrol-nav-page.oj-disabled {
  text-decoration: none;
}

/* Styling for the page mode page ellipsis. */
.oj-pagingcontrol-nav-page-ellipsis {
  min-width: var(--oj-typography-body-md-font-size);
  font-size: var(--oj-typography-body-md-font-size);
  line-height: var(--oj-typography-body-md-line-height);
  padding: 4px;
  vertical-align: middle;
}

/* Styling for the page mode page label. */
label.oj-pagingcontrol-nav-label {
  color: var(--oj-label-color);
  font-size: var(--oj-typography-body-md-font-size);
  line-height: var(--oj-typography-body-md-line-height);
}

.oj-pagingcontrol-nav-input-section .oj-inputtext .oj-text-field-container {
  min-width: 2.5rem;
  max-width: 2.5rem;
  min-height: 2rem;
  max-height: 2rem;
  margin-top: 0.2em;
}

/* Styling for the page mode page input element. */
/* Copying from form controls css vars mixins but removing rtl*/
input.oj-pagingcontrol-nav-input.oj-inputtext-input,
.oj-pagingcontrol-nav-input input.oj-inputtext-input {
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  font-size: var(--oj-typography-body-md-font-size);
  line-height: var(--oj-typography-body-md-line-height);
  padding-left: 2px;
  padding-top: 0px;
  padding-right: 2px;
}

input.oj-pagingcontrol-nav-input.oj-inputtext-input:-ms-input-placeholder,
.oj-pagingcontrol-nav-input input.oj-inputtext-input:-ms-input-placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

input.oj-pagingcontrol-nav-input.oj-inputtext-input::placeholder,
.oj-pagingcontrol-nav-input input.oj-inputtext-input::placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

/* Styling for the page mode page input element when readOnly. */
input[readOnly].oj-pagingcontrol-nav-input.oj-inputtext-input,
.oj-pagingcontrol-nav-input input[readOnly].oj-inputtext-input {
  color: var(--oj-label-color);
  min-width: var(--oj-typography-body-md-font-size);
}

/* Styling for the page mode maximum number of pages text. */
.oj-pagingcontrol-nav-input-max {
  color: var(--oj-label-color);
  font-size: var(--oj-typography-body-md-font-size);
  line-height: var(--oj-typography-body-md-line-height);
  padding-inline-start: 0.3rem;
}

/* Styling for the page mode page range summary. */
.oj-pagingcontrol-nav-input-summary {
  color: var(--oj-label-color);
  font-size: var(--oj-typography-body-md-font-size);
  line-height: var(--oj-typography-body-md-line-height);
  padding-inline-end: 0.3rem;
}

/* Styling for the page mode navigation page arrows. */
.oj-pagingcontrol-nav-arrow {
  width: var(--oj-button-height);
  height: var(--oj-button-height);
  line-height: var(--oj-button-height);
  border-radius: var(--oj-button-border-radius);
  cursor: var(--oj-core-cursor-clickable);
  box-sizing: border-box;
  vertical-align: middle;
  background: transparent;
  border: 1px solid transparent;
  padding: 1px;
}

/* Styling for the page mode navigation page arrows in focus state. */
.oj-pagingcontrol-nav-arrow:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
}

/* Styling for the page mode navigation page arrows in hover state. */
.oj-pagingcontrol-nav-arrow.oj-hover {
  background-color: var(--oj-button-borderless-chrome-bg-color-hover);
  border-color: var(--oj-button-borderless-chrome-border-color-hover);
  color: var(--oj-button-borderless-chrome-text-color-hover);
  text-decoration: none;
}

/* Styling for the page mode navigation page arrows when active. */
.oj-pagingcontrol-nav-arrow.oj-active,
.oj-pagingcontrol-nav-arrow.oj-active.oj-hover {
  color: var(--oj-button-borderless-chrome-text-color-selected);
  background: var(--oj-button-borderless-chrome-bg-color-active);
  border-color: var(--oj-button-borderless-chrome-border-color-active);
}

/* Styling for the page mode navigation first page arrow icon. */
/* Styling for the page mode navigation first page arrow icon in vertical orientation. */
/* Styling for the page mode navigation previous page arrow icon. */
/* Styling for the page mode navigation previous page arrow icon in vertical orientation. */
/* Styling for the page mode navigation next page arrow icon. */
/* Styling for the page mode navigation next page arrow icon in vertical orientation. */
/* Styling for the page mode navigation last page arrow icon. */
/* Styling for the page mode navigation last page arrow icon in vertical orientation. */
.oj-panel {
  border: 1px solid var(--oj-panel-border-color);
  background-color: var(--oj-panel-bg-color);
  border-radius: var(--oj-panel-border-radius);
  padding: var(--oj-panel-padding);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.oj-panel.oj-panel-border-radius-0 {
  border-radius: 0;
}

html[dir=ltr] .oj-panel.oj-panel-border-radius-0-bottom-start {
  border-bottom-left-radius: 0;
}

html:not([dir=ltr]) .oj-panel.oj-panel-border-radius-0-bottom-start {
  border-bottom-right-radius: 0;
}

html[dir=ltr] .oj-panel.oj-panel-border-radius-0-bottom-end {
  border-bottom-right-radius: 0;
}

html:not([dir=ltr]) .oj-panel.oj-panel-border-radius-0-bottom-end {
  border-bottom-left-radius: 0;
}

html[dir=ltr] .oj-panel.oj-panel-border-radius-0-top-start {
  border-top-left-radius: 0;
}

html:not([dir=ltr]) .oj-panel.oj-panel-border-radius-0-top-start {
  border-top-right-radius: 0;
}

html[dir=ltr] .oj-panel.oj-panel-border-radius-0-top-end {
  border-top-right-radius: 0;
}

html:not([dir=ltr]) .oj-panel.oj-panel-border-radius-0-top-end {
  border-top-left-radius: 0;
}

.oj-panel.oj-selected {
  border-color: var(--oj-core-border-color-selected) !important;
}

.oj-hicontrast .oj-panel.oj-selected {
  border-width: 3px;
}

.oj-panel-shadow-xs {
  box-shadow: var(--oj-core-box-shadow-xs) !important;
}

.oj-panel-shadow-sm {
  box-shadow: var(--oj-core-box-shadow-sm) !important;
}

.oj-panel-shadow-md {
  box-shadow: var(--oj-core-box-shadow-md) !important;
}

.oj-panel-shadow-lg {
  box-shadow: var(--oj-core-box-shadow-lg) !important;
}

.oj-panel-shadow-xl {
  box-shadow: var(--oj-core-box-shadow-xl) !important;
}

.oj-panel-drag-handle {
  text-align: center;
  vertical-align: middle;
  cursor: move;
  height: 20px;
  line-height: 20px;
  margin-top: calc(0px - var(--oj-panel-padding));
  margin-left: calc(0px - var(--oj-panel-padding));
  margin-right: calc(0px - var(--oj-panel-padding));
}

.oj-panel-resize-button,
.oj-panel-remove-button,
.oj-panel-resize-button.oj-button,
.oj-panel-remove-button.oj-button {
  position: absolute;
  margin-bottom: 0;
  overflow: hidden;
}

html:not([dir=rtl]) .oj-panel-resize-button,
html:not([dir=rtl]) .oj-panel-remove-button,
html:not([dir=rtl]) .oj-panel-resize-button.oj-button,
html:not([dir=rtl]) .oj-panel-remove-button.oj-button {
  right: 0;
}

html[dir=rtl] .oj-panel-resize-button,
html[dir=rtl] .oj-panel-remove-button,
html[dir=rtl] .oj-panel-resize-button.oj-button,
html[dir=rtl] .oj-panel-remove-button.oj-button {
  left: 0;
}

.oj-panel-resize-button {
  bottom: 0;
}

.oj-panel-remove-button {
  top: 0;
}

.oj-panel-padding {
  padding: var(--oj-panel-padding) !important;
}

.oj-panel-resize-button .oj-panel-expand-icon.oj-end,
.oj-panel-resize-button .oj-panel-collapse-icon.oj-end,
.oj-panel-remove-button .oj-panel-remove-icon.oj-end {
  margin-left: auto;
  margin-right: auto;
}

/* panel                      */
/* -------------------------- */
.oj-color-invert {
  --oj-panel-bg-color: var(--oj-core-bg-color-content);
  --oj-panel-border-color: var(--oj-core-divider-color);
}

/* panel                      */
/* -------------------------- */
.oj-panel {
  --oj-current-bg-color: var(--oj-panel-bg-color);
}

:root {
  --oj-picto-chart-item-bg-color: rgba(var(--oj-palette-neutral-rgb-170), 0.15);
}

oj-picto-chart:not(.oj-complete) {
  visibility: hidden;
}

oj-picto-chart {
  display: inline-block;
}

.oj-pictochart {
  -webkit-user-select: none;
  user-select: none;
  display: inline-block;
}

.oj-pictochart-item {
  background-color: var(--oj-picto-chart-item-bg-color);
}

:root {
  --oj-progress-bar-value-bg-color: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-progress-bar-height: 6px;
  --oj-progress-bar-track-bg-color: rgba(var(--oj-palette-neutral-rgb-170), 0.15);
  --oj-progress-bar-border-radius: 3px;
}

/* progress */
/* --------------------------------------------------------------- */
oj-progress-bar:not(.oj-complete) {
  visibility: hidden;
}

oj-progress-bar {
  display: block;
}

.oj-progress-bar {
  height: var(--oj-progress-bar-height);
  border-radius: var(--oj-progress-bar-border-radius);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.oj-progress-bar-track {
  margin: 0;
  box-sizing: border-box;
  height: 100%;
  background-color: var(--oj-progress-bar-track-bg-color);
}

.oj-progress-bar-value {
  margin: 0;
  box-sizing: border-box;
  height: 100%;
  background-color: var(--oj-progress-bar-value-bg-color);
}

.oj-progress-bar-embedded {
  width: 100%;
  border-style: none;
  background-color: transparent;
  border-radius: 0;
}

.oj-progress-bar-indeterminate {
  width: 25%;
  border-radius: var(--oj-progress-bar-border-radius);
  height: var(--oj-progress-bar-height);
  background-color: var(--oj-progress-bar-value-bg-color);
  position: relative;
}

html:not([dir=rtl]) .oj-progress-bar-indeterminate {
  animation: progressBar 2s linear infinite;
}

html[dir=rtl] .oj-progress-bar-indeterminate {
  animation: progressBarRTL 2s linear infinite;
}

@keyframes progressBar {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}
@keyframes progressBarRTL {
  0% {
    left: 100%;
    right: -35%;
  }
  60% {
    left: -90%;
    right: 100%;
  }
  100% {
    left: -90%;
    right: 100%;
  }
}
.oj-progress-bar-embedded,
.oj-progress-bar-embedded .oj-progress-bar-overlay {
  border-radius: 0px;
}

.oj-hicontrast .oj-progress-bar-value {
  border: 1px dashed var(--oj-core-focus-border-color);
}

/* progress bar               */
/* -------------------------- */
.oj-color-invert {
  --oj-progress-bar-track-bg-color: rgba(var(--oj-palette-neutral-rgb-10), 0.15);
  --oj-progress-bar-value-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
}

:root {
  --oj-progress-circle-value-bg-color: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-progress-circle-sm-size: 1.5rem;
  --oj-progress-circle-md-size: 3rem;
  --oj-progress-circle-lg-size: 6rem;
  --oj-progress-circle-sm-track-width: 2px;
  --oj-progress-circle-md-track-width: 0.25rem;
  --oj-progress-circle-lg-track-width: 0.375rem;
  --oj-progress-circle-determinate-track-bg-color: rgba(var(--oj-palette-neutral-rgb-170), 0.15);
}

/* progress circle*/
/* --------------------------------------------------------------- */
oj-progress-circle:not(.oj-complete) {
  visibility: hidden;
}

oj-progress-circle {
  display: block;
}

.oj-progress-circle {
  overflow: hidden;
}

.oj-progress-circle,
.oj-progress-circle-indeterminate {
  position: relative;
  display: inline-block;
  width: var(--oj-progress-circle-md-size);
  height: var(--oj-progress-circle-md-size);
  max-width: 100%;
  max-height: 100%;
}

.oj-progress-circle.oj-progress-circle-sm {
  width: var(--oj-progress-circle-sm-size);
  height: var(--oj-progress-circle-sm-size);
}

.oj-progress-circle.oj-progress-circle-lg {
  width: var(--oj-progress-circle-lg-size);
  height: var(--oj-progress-circle-lg-size);
}

.oj-progress-circle.oj-progress-circle-sm {
  width: var(--oj-progress-circle-sm-size);
  height: var(--oj-progress-circle-sm-size);
}

.oj-progress-circle.oj-progress-circle-lg {
  width: var(--oj-progress-circle-lg-size);
  height: var(--oj-progress-circle-lg-size);
}

.oj-progress-circle-lg .oj-progress-circle-indeterminate,
.oj-progress-circle-md .oj-progress-circle-indeterminate,
.oj-progress-circle-sm .oj-progress-circle-indeterminate {
  width: 100%;
  height: 100%;
}

.oj-progress-circle-sm .oj-progress-circle-tracker,
.oj-progress-circle-sm .oj-progress-circle-value,
.oj-progress-circle-sm .oj-progress-circle-indeterminate-inner {
  border-width: var(--oj-progress-circle-sm-track-width);
}

.oj-progress-circle-lg .oj-progress-circle-tracker,
.oj-progress-circle-lg .oj-progress-circle-value,
.oj-progress-circle-lg .oj-progress-circle-indeterminate-inner {
  border-width: var(--oj-progress-circle-lg-track-width);
}

.oj-progress-circle-tracker,
.oj-progress-circle-value,
.oj-progress-circle-indeterminate-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
}

/* Determinate Classes */
.oj-progress-circle-tracker,
.oj-progress-circle-value {
  position: absolute;
}

.oj-progress-circle-tracker {
  border: var(--oj-progress-circle-md-track-width) solid #d2d3d5;
}

.oj-progress-circle-value {
  border: var(--oj-progress-circle-md-track-width) solid #704b64;
}

/* Indeterminate Classes */
.oj-progress-circle-indeterminate {
  animation: circleRotation 1s linear 0s infinite;
}

.oj-progress-circle-tracker {
  border: var(--oj-progress-circle-md-track-width) solid #d2d3d5;
}

.oj-progress-circle-value {
  border: var(--oj-progress-circle-md-track-width) solid #704b64;
}

/* Indeterminate Classes */
.oj-progress-circle-indeterminate {
  animation: circleRotation 1s linear 0s infinite;
}

.oj-progress-circle-indeterminate-inner {
  border: var(--oj-progress-circle-md-track-width) solid var(--oj-progress-circle-value-bg-color);
  animation: circleLength 1.5s linear 0s infinite alternate;
  position: absolute;
}

@keyframes circleRotation {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(390deg);
  }
}
@keyframes circleRotation {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(390deg);
  }
}
@keyframes circleLength {
  0% {
    -webkit-clip-path: polygon(21.1% 0, 21.1% 0, 21.1% 0, 50% 50%, 78.9% 0, 78.9% 0, 78.9% 0);
    clip-path: polygon(21.1% 0, 21.1% 0, 21.1% 0, 50% 50%, 78.9% 0, 78.9% 0, 78.9% 0);
  }
  6.25% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 50% 50%, 100% 0, 100% 0, 100% 0);
    clip-path: polygon(0 0, 0 0, 0 0, 50% 50%, 100% 0, 100% 0, 100% 0);
  }
  43.75% {
    -webkit-clip-path: polygon(0 0, 0 100%, 0 100%, 50% 50%, 100% 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 0 100%, 0 100%, 50% 50%, 100% 100%, 100% 100%, 100% 0);
  }
  50% {
    -webkit-clip-path: polygon(0 0, 0 100%, 21.1% 100%, 50% 50%, 78.9% 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 0 100%, 21.1% 100%, 50% 50%, 78.9% 100%, 100% 100%, 100% 0);
  }
  56.25% {
    -webkit-clip-path: polygon(0 0, 0 100%, 0 100%, 50% 50%, 100% 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 0 100%, 0 100%, 50% 50%, 100% 100%, 100% 100%, 100% 0);
  }
  93.75% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 50% 50%, 100% 0, 100% 0, 100% 0);
    clip-path: polygon(0 0, 0 0, 0 0, 50% 50%, 100% 0, 100% 0, 100% 0);
  }
  100% {
    -webkit-clip-path: polygon(21.1% 0, 21.1% 0, 21.1% 0, 50% 50%, 78.9% 0, 78.9% 0, 78.9% 0);
    clip-path: polygon(21.1% 0, 21.1% 0, 21.1% 0, 50% 50%, 78.9% 0, 78.9% 0, 78.9% 0);
  }
}
/* progress circle            */
/* -------------------------- */
.oj-color-invert {
  --oj-progress-circle-determinate-track-bg-color: rgba(var(--oj-palette-neutral-rgb-10), 0.15);
  --oj-progress-circle-value-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
}

.oj-radiocheckbox-icon {
  padding-inline-end: var(--oj-radio-checkbox-input-to-label-padding);
  padding-inline-start: var(--oj-radio-checkbox-input-to-edge-padding);
}

.oj-radioset-input-start .oj-radiocheckbox-icon,
.oj-checkboxset-input-start .oj-radiocheckbox-icon {
  padding-inline-end: var(--oj-radio-checkbox-input-to-label-padding);
  padding-inline-start: var(--oj-radio-checkbox-input-to-edge-padding);
}

.oj-radioset-input-end .oj-radiocheckbox-icon,
.oj-checkboxset-input-end .oj-radiocheckbox-icon {
  padding-inline-end: var(--oj-radio-checkbox-input-to-edge-padding);
  padding-inline-start: var(--oj-radio-checkbox-input-to-label-padding);
}

oj-rating-gauge:not(.oj-complete) {
  visibility: hidden;
}

oj-rating-gauge {
  display: block;
}

.oj-rating-gauge-fit {
  width: 7.5rem;
  height: 1.5625rem;
}

.oj-rating-gauge-shape-lg {
  width: var(--oj-rating-gauge-lg-size);
  height: var(--oj-rating-gauge-lg-size);
}

.oj-rating-gauge-shape-md {
  width: var(--oj-rating-gauge-md-size);
  height: var(--oj-rating-gauge-md-size);
}

.oj-rating-gauge-shape-sm {
  width: var(--oj-rating-gauge-sm-size);
  height: var(--oj-rating-gauge-sm-size);
}

.oj-rating-gauge-selected {
  fill: var(--oj-rating-gauge-color-selected);
  stroke: var(--oj-rating-gauge-border-color-selected);
}

.oj-rating-gauge-unselected {
  fill: var(--oj-rating-gauge-color-unselected);
  stroke: var(--oj-rating-gauge-border-color-unselected);
}

.oj-rating-gauge-changed {
  fill: var(--oj-rating-gauge-color-changed);
  stroke: var(--oj-rating-gauge-border-color-changed);
}

.oj-rating-gauge-hover {
  fill: var(--oj-rating-gauge-color-hover);
  stroke: var(--oj-rating-gauge-border-color-hover);
}

.oj-rating-gauge-selected-disabled {
  fill: var(--oj-rating-gauge-color-selected-disabled);
  stroke: transparent;
}

.oj-rating-gauge-unselected-disabled {
  fill: var(--oj-rating-gauge-color-unselected-disabled);
  stroke: transparent;
}

.oj-rating-gauge-selected.oj-rating-gauge-readonly {
  fill: var(--oj-rating-gauge-color-selected-readonly);
  stroke: var(--oj-rating-gauge-border-color-selected-readonly);
}

.oj-rating-gauge-unselected.oj-rating-gauge-readonly {
  fill: var(--oj-rating-gauge-color-unselected-readonly);
  stroke: var(--oj-rating-gauge-border-color-unselected-readonly);
}

.oj-hicontrast .oj-rating-gauge-selected-disabled {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1px;
  stroke-dasharray: 3 1;
}

.oj-hicontrast .oj-rating-gauge-unselected-disabled {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1px;
  stroke-dasharray: 1 3;
}

.oj-hicontrast .oj-rating-gauge-selected {
  fill: currentColor;
  stroke: currentColor;
}

.oj-hicontrast .oj-rating-gauge-unselected {
  fill: transparent;
  stroke: currentColor;
}

.oj-ratinggauge.oj-focus-highlight {
  outline: dotted 1px var(--oj-core-focus-border-color);
}

:root {
  --oj-rating-gauge-border-color-selected: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-rating-gauge-color-selected: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-rating-gauge-border-color-unselected: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-rating-gauge-color-unselected: transparent;
  --oj-rating-gauge-border-color-changed: var(--oj-rating-gauge-border-color-selected);
  --oj-rating-gauge-color-changed: var(--oj-rating-gauge-color-selected);
  --oj-rating-gauge-border-color-hover: var(--oj-rating-gauge-border-color-selected);
  --oj-rating-gauge-color-hover: var(--oj-rating-gauge-color-selected);
  --oj-rating-gauge-color-selected-disabled: var(--oj-core-text-color-disabled);
  --oj-rating-gauge-color-unselected-disabled: var(--oj-core-color-disabled-2);
  --oj-rating-gauge-color-selected-readonly: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-rating-gauge-border-color-selected-readonly: transparent;
  --oj-rating-gauge-color-unselected-readonly: rgba(var(--oj-palette-neutral-rgb-170), 0.15);
  --oj-rating-gauge-border-color-unselected-readonly: transparent;
  --oj-rating-gauge-sm-size: 1rem;
  --oj-rating-gauge-md-size: 1.25rem;
  --oj-rating-gauge-lg-size: 2.25rem;
}

:root {
  --oj-refresher-bg-color: rgb(var(--oj-palette-neutral-rgb-40));
}

/*
     * applied to the refresh panel
     */
.oj-pulltorefresh-panel {
  overflow: hidden;
}

/*
     * applied to the content inside the pull to refresh panel
     */
.oj-pulltorefresh-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--oj-refresher-bg-color);
}

.oj-pulltorefresh-action {
  pointer-events: none;
}

/*
     * applied animation when the height of the panel changes (during release)
     */
.oj-pulltorefresh-transition {
  transition: height var(--oj-animation-duration-long);
  transition-timing-function: var(--oj-animation-ease-in-out);
}

/*
     * applied to the primary text inside the pull to refresh panel
     */
.oj-pulltorefresh-primary-text {
  color: var(--oj-core-text-color-primary);
  text-align: center;
  margin: 0 0 10px 0;
}

/*
     * applied to the secondary text inside the pull to refresh panel
     */
.oj-pulltorefresh-secondary-text {
  color: var(--oj-core-text-color-secondary);
  font-size: var(--oj-typography-body-sm-font-size);
  line-height: var(--oj-typography-body-sm-line-height);
  text-align: center;
  margin: 0 0 20px 0;
}

/*
     * applied to the container of the refresh icon inside the pull to refresh panel
     */
.oj-pulltorefresh-icon-container {
  margin: 20px 0 20px 0;
}

/*
     * applied to the refresh icon inside the pull to refresh panel
     */
.oj-pulltorefresh-icon {
  width: 40px;
  height: 40px;
}

.oj-refresher-option-defaults {
  font-family: '{"loadingIcon":"progresscircle"}' !important;
}

oj-row-expander:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the widget */
.oj-table .oj-rowexpander {
  display: inline-flex;
  vertical-align: middle;
}

/* Bottom alignment in datagrid */
.oj-datagrid .oj-rowexpander {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

[hidden].oj-rowexpander {
  display: none;
}

/* Size and position the spacer that determines the distance between the icon and cell text */
.oj-rowexpander-icon-spacer {
  min-width: 1.25rem;
  display: inline-block;
}

/* Size and position the touch area */
.oj-rowexpander-touch-area {
  box-sizing: border-box;
  height: 1.5em;
  width: 1.5em;
  padding: 0.25em;
}

/* Data grid specific bottom alignment of touch area */
.oj-datagrid .oj-rowexpander-touch-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
}

/* Table specific centered alignment of touch area */
.oj-table .oj-rowexpander-touch-area {
  margin-bottom: -0.25em;
  margin-top: -0.25em;
  display: flex;
  align-items: center;
}

/* Alignment for the leaf, expand, lazyload and collapse icons */
.oj-rowexpander-leaf-icon,
.oj-rowexpander-expand-icon,
.oj-rowexpander-collapse-icon,
.oj-rowexpander-lazyload-icon {
  outline: none;
  flex: 0 1 auto;
}

/* Focus border for highlighted icons */
.oj-rowexpander-leaf-icon.oj-focus-highlight::before,
.oj-rowexpander-expand-icon.oj-focus-highlight::before,
.oj-rowexpander-collapse-icon.oj-focus-highlight::before,
.oj-rowexpander-lazyload-icon.oj-focus-highlight::before {
  outline: dotted 1px var(--oj-core-focus-border-color);
}

/* Styling for the load icon */
.oj-rowexpander-lazyload-icon {
  width: 100%;
}

/* Add this class name to your text when stamping a row expander inside of data grid to obtain bottom alignment */
.oj-rowexpander-cell-text {
  flex: 0 1 auto;
  box-sizing: border-box;
}

.oj-rowexpander-indent {
  display: inline-block;
}

/* Set the indentation here depth 1 is one indent level */
*.oj-rowexpander-depth-1 {
  width: 16px;
}

*.oj-rowexpander-depth-2 {
  width: 32px;
}

*.oj-rowexpander-depth-3 {
  width: 48px;
}

*.oj-rowexpander-depth-4 {
  width: 64px;
}

*.oj-rowexpander-depth-5 {
  width: 80px;
}

*.oj-rowexpander-depth-6 {
  width: 96px;
}

*.oj-rowexpander-depth-7 {
  width: 112px;
}

/* Styling to remove the default underlining of hovered links */
.oj-rowexpander a:hover,
.oj-rowexpander a:focus {
  text-decoration: none;
}

/* Styling for the expand icon */
/* Styling for the collapse icon */
/* select */
/* --------------------------------------------------------------- */
oj-searchselect:not(.oj-complete) {
  visibility: hidden;
}

.oj-searchselect {
  position: relative;
  display: inline-block;
  max-width: 100%;
  font-size: var(--oj-text-field-font-size);
  width: 100%;
}

@media screen and (max-width: 599.9px) {
  .oj-searchselect {
    -webkit-text-size-adjust: var(--oj-private-text-field-font-size-adjust);
  }
}
.oj-form-control-full-width.oj-searchselect,
.oj-form-control-full-width .oj-searchselect {
  max-width: 100%;
}

.oj-searchselect .oj-text-field-middle {
  width: 100%;
  flex: auto;
}

/* single-select */
/*
     * Applied to the input field
     */
.oj-searchselect-input {
  flex: 1;
  width: 1em;
  min-width: 1em;
  overflow: hidden;
  white-space: nowrap;
  background-color: transparent;
  color: var(--oj-text-field-text-color);
  font-size: inherit;
  box-shadow: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  padding-inline-start: var(--oj-text-field-text-to-edge-padding);
}

@media screen and (max-width: 599.9px) {
  .oj-searchselect-input {
    -webkit-text-size-adjust: var(--oj-private-text-field-font-size-adjust);
  }
}
.oj-searchselect-input:-ms-input-placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

.oj-searchselect-input::placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

.oj-searchselect-input::placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

/*
     * Applied to the filter field on desktop and mobile.
     */
.oj-searchselect-filter.oj-form-control {
  max-width: 100%;
}

/*
     * Applied to the filter field on desktop.
     */
.oj-searchselect .oj-searchselect-filter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: inherit;
}

.oj-searchselect .oj-searchselect-filter.oj-form-control {
  margin-bottom: 0;
}

.oj-searchselect .oj-searchselect-filter.oj-text-field .oj-text-field-container {
  background-color: transparent;
  border-color: transparent !important;
  box-shadow: none;
}

html:not([dir=rtl]) .oj-searchselect.oj-form-control-text-align-right .oj-searchselect-filter {
  padding-right: 1px;
}

.oj-searchselect.oj-form-control-text-align-end .oj-searchselect-filter {
  padding-inline-end: 1px;
}

/* Styling for readonly mode */
/* don't show dropdown trigger or mobile clear value icon */
.oj-searchselect.oj-read-only .oj-searchselect-arrow,
.oj-searchselect.oj-read-only .oj-searchselect-clear-value {
  display: none;
}

/* don't show mobile clear value icon when field is required */
.oj-searchselect.oj-required .oj-searchselect-clear-value {
  display: none;
}

/*
     * Only show either the dropdown arrow or the clear value icon on mobile depending on whether
     * a value is selected.
     */
.oj-searchselect-mobile.oj-searchselect-no-value .oj-searchselect-clear-value,
.oj-searchselect-mobile.oj-disabled .oj-searchselect-clear-value,
.oj-searchselect-mobile:not(.oj-searchselect-no-value):not(.oj-disabled):not(.oj-required) .oj-searchselect-arrow {
  display: none;
}

/*
     * On desktop, hide the dropdown arrow in the main field when the component has focus
     * (when the filter field is shown)
     */
.oj-searchselect.oj-focus:not(.oj-searchselect-mobile) .oj-searchselect-main-field .oj-searchselect-arrow {
  visibility: hidden;
}

.oj-searchselect-arrow:hover,
.oj-searchselect-arrow:focus,
.oj-searchselect-clear-value:hover,
.oj-searchselect-clear-value:focus,
.oj-searchselect-back-button:hover,
.oj-searchselect-back-button:focus {
  text-decoration: none;
}

/*
     * Disabled styles for single-select
     */
.oj-searchselect.oj-disabled .oj-searchselect-input {
  color: var(--oj-text-field-text-color-disabled);
  border-color: var(--oj-text-field-border-color-disabled);
}

.oj-searchselect.oj-disabled .oj-searchselect-arrow,
.oj-searchselect.oj-disabled .oj-searchselect-clear-value {
  cursor: default;
}

.oj-searchselect.oj-loading .oj-searchselect-arrow,
.oj-searchselect.oj-loading .oj-searchselect-clear-value {
  display: none;
}

/*
     * Applied to results collection element
     */
/*
     * Applied to results collection element when the dropdown is initially opened while the
     * data is being fetched
     */
.oj-listbox-initial-open .oj-select-results {
  min-height: 10rem;
}

.oj-listbox-fullscreen .oj-select-results {
  max-height: none;
}

/* icon */
/* -----------------------------*/
/*
     * Applied to the single-select drop down open icon
     */
/*
     * Applied to the single-select mobile clear value icon
     */
/*
     * Applied to the single-select mobile filter field back icon
     */
/*
     * Applied to the container of the no data template shown in the default listView.
     */
.oj-searchselect-no-results-container {
  display: none;
  height: 0;
}

/**
     * Applied to the default list view if no results are found
     */
.oj-listbox-searchselect-no-results .oj-select-results {
  display: none;
}

.oj-select-results.oj-listview {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Styling on collection current item */
.oj-listbox-selectsingle .oj-listview-current-item:not(.oj-selected) {
  background-color: var(--oj-core-bg-color-hover);
}

.oj-listbox-selectsingle .oj-table-body-current-row:not(.oj-selected) .oj-table-data-cell {
  background-image: linear-gradient(var(--oj-core-bg-color-hover), var(--oj-core-bg-color-hover));
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-arrow,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-clear-value {
  align-self: stretch;
}

/* clears the 'X' from Internet Explorer */
.oj-searchselect input[type=search]::-ms-clear,
.oj-searchselect input[type=search]::-ms-reveal,
.oj-listbox-searchselect .oj-searchselect-filter input[type=search]::-ms-clear,
.oj-listbox-searchselect .oj-searchselect-filter input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* Default options*/
.oj-searchselect-option-defaults {
  font-family: '{"showIndicatorDelay":"50"}' !important;
}

.oj-searchselect .oj-text-field-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.oj-searchselect-input {
  border: 0;
  background-color: transparent;
}

/* select */
/* --------------------------------------------------------------- */
oj-select:not(.oj-complete) {
  visibility: hidden;
}

.oj-select {
  position: relative;
  display: inline-block;
  max-width: 100%;
  font-size: var(--oj-text-field-font-size);
  width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 599.9px) {
  .oj-select {
    -webkit-text-size-adjust: var(--oj-private-text-field-font-size-adjust);
  }
}
.oj-form-control-full-width.oj-select,
.oj-form-control-full-width .oj-select {
  max-width: 100%;
}

/* 
     * Suppress focus ring since the border is changing when enabled
     */
.oj-select .oj-select-accessible-container:focus {
  outline: none;
}

.oj-select.oj-read-only .oj-select-accessible-container:focus::after {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: -1px;
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.oj-select.oj-read-only .oj-select-accessible-container:focus {
  outline: none;
  position: relative;
}

/**
   * Styling for loading state
   */
.oj-select.oj-loading .oj-select-arrow {
  display: none;
}

/* 
     * Applied to the select box which includes the selected text and the dropdown open icon
     */
.oj-select-choice {
  text-align: var(--oj-text-field-text-align);
  color: var(--oj-text-field-text-color);
  background-color: transparent;
  border-style: solid;
  border-color: var(--oj-text-field-border-color);
  border-width: var(--oj-text-field-border-width);
  border-radius: var(--oj-text-field-border-radius);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  border-width: 0;
  padding-inline-start: var(--oj-text-field-text-to-edge-padding);
  padding-inline-end: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-clip: padding-box;
  text-overflow: ellipsis;
  height: 100%;
}

.oj-select-choice:-ms-input-placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

.oj-select-choice::placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

/* Applied to the text field inside the select box */
.oj-select .oj-text-field-middle {
  min-width: 0;
}

.oj-select:not(.oj-text-field-label-inside) .oj-text-field-middle {
  height: auto;
}

/* Styling for readonly mode */
.oj-select.oj-read-only .oj-select-choice,
.oj-select.oj-read-only .oj-select-choices {
  background-color: transparent;
  border-color: transparent;
  padding: 0;
  min-height: calc(var(--oj-typography-body-md-line-height) * var(--oj-typography-body-md-font-size));
}

.oj-form-layout .oj-form.oj-enabled .oj-select.oj-read-only .oj-select-choices {
  padding: 0 var(--oj-text-field-text-to-edge-padding) 5px;
}

/* apply to the selected entries */
.oj-select.oj-read-only .oj-select-chosen,
.oj-select.oj-read-only .oj-select-selected-choice {
  outline: none;
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  color: var(--oj-core-text-color-primary);
}

.oj-select.oj-read-only:not(.oj-text-field-label-inside) .oj-select-chosen,
.oj-select.oj-read-only .oj-select-selected-choice {
  padding-left: 0;
  padding-right: 0;
  line-height: var(--oj-typography-body-md-line-height);
}

.oj-select.oj-read-only .oj-select-selected-choice {
  display: inherit;
  margin-top: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}

/* apply to the first selected entry in readonly mode */
.oj-select.oj-read-only li.oj-select-selected-choice:first-child {
  padding-inline-start: 0;
}

/* don't show dropdown trigger */
.oj-select.oj-read-only .oj-select-arrow {
  display: none;
}

/* don't show clear entry trigger */
.oj-select.oj-read-only .oj-select-clear-entry {
  display: none;
}

/* Styling for text-align */
.oj-form-control-text-align-right.oj-select .oj-select-choice {
  text-align: right;
}

.oj-form-control-text-align-start.oj-select .oj-select-choice {
  text-align: start;
}

.oj-form-control-text-align-end.oj-select .oj-select-choice {
  text-align: end;
}

/* Styling for native render mode text-align */
.oj-form-control-text-align-right.oj-select .oj-select-select {
  text-align: right;
  direction: rtl;
  padding-inline-end: 16px;
}

.oj-form-control-text-align-start.oj-select .oj-select-select {
  text-align: start;
}

html:not([dir=rtl]) .oj-form-control-text-align-start.oj-select .oj-select-select {
  direction: ltr;
}

html[dir=rtl] .oj-form-control-text-align-start.oj-select .oj-select-select {
  direction: rtl;
}

.oj-form-control-text-align-end.oj-select .oj-select-select {
  text-align: end;
  padding-inline-end: 16px;
}

html:not([dir=rtl]) .oj-form-control-text-align-end.oj-select .oj-select-select {
  direction: rtl;
}

html[dir=rtl] .oj-form-control-text-align-end.oj-select .oj-select-select {
  direction: ltr;
}

.oj-form-control-text-align-right.oj-select .oj-select-choices li {
  float: right;
}

.oj-form-control-text-align-start.oj-select .oj-select-choices li {
  float: left;
}

html[dir=rtl] .oj-form-control-text-align-start.oj-select .oj-select-choices li {
  float: right;
}

.oj-form-control-text-align-end.oj-select .oj-select-choices li {
  float: right;
}

html[dir=rtl] .oj-form-control-text-align-end.oj-select .oj-select-choices li {
  float: left;
}

.oj-form-control-text-align-right .oj-select-selected-choice,
.oj-form-control-text-align-end .oj-select-selected-choice {
  margin-top: 5px;
  margin-inline-end: 0;
  margin-bottom: 0;
  margin-inline-start: 6px;
}

/* multi-select */
/* 
     * Applied to the multi-select box which includes the input field and the selected choices
     */
.oj-select-choices {
  box-sizing: border-box;
  height: auto;
  min-height: var(--oj-text-field-height);
  padding: 0 var(--oj-text-field-text-to-edge-padding) 5px;
  text-align: var(--oj-text-field-text-align);
  color: var(--oj-text-field-text-color);
  background-color: transparent;
  border-style: solid;
  border-color: var(--oj-text-field-border-color);
  border-width: var(--oj-text-field-border-width);
  border-radius: var(--oj-text-field-border-radius);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  border-width: 0;
  margin: 0;
  position: relative;
  cursor: text;
  overflow: hidden;
  width: 100%;
}

.oj-select-choices:-ms-input-placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

.oj-select-choices::placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

.oj-select-multi .oj-select-accessible-container {
  width: 100%;
}

/* 
     * Applied to the multi-select box list items which include the search field and the selected choices
     */
.oj-select-choices li {
  list-style: none;
}

html:not([dir=rtl]) .oj-select-choices li {
  float: left;
}

html[dir=rtl] .oj-select-choices li {
  float: right;
}

/* 
     * Applied to the multi-select placeholder
     */
.oj-select-multi .oj-select-default {
  margin-top: 5px;
  padding: 0;
  line-height: calc(var(--oj-text-field-height) * 0.8);
  color: var(--oj-text-field-placeholder-color);
  font-style: var(--oj-text-field-placeholder-font-style);
}

/* 
     * Applied to the input field. Override default .oj-listbox-input
     */
.oj-select-multi .oj-listbox-input {
  background-color: var(--oj-text-field-bg-color);
  color: var(--oj-text-field-text-color);
  font-size: var(--oj-text-field-font-size);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-top: 0;
  padding-bottom: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

@media screen and (max-width: 599.9px) {
  .oj-select-multi .oj-listbox-input {
    -webkit-text-size-adjust: var(--oj-private-text-field-font-size-adjust);
  }
}
/* 
     * Applied to the multi-select selected choice
     */
.oj-select-selected-choice {
  line-height: 1.9rem;
  display: flex;
  align-items: center;
  cursor: default;
  border-radius: var(--oj-button-border-radius);
  border: 1px solid var(--oj-button-outlined-chrome-border-color);
  color: var(--oj-button-outlined-chrome-text-color);
  background-clip: padding-box;
  padding-top: 0;
  padding-inline-end: 4px;
  padding-bottom: 0;
  padding-inline-start: 6px;
  margin-top: 5px;
  margin-inline-end: 6px;
  margin-bottom: 0;
  margin-inline-start: 0;
}

/* 
     * Applied to the multi-select selected choice when getting focus
     */
.oj-select-selected-choice.oj-focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

/*
     * Applied to the multi-select selected choice when disabled
     */
.oj-select.oj-disabled .oj-select-selected-choice {
  padding: 0 0.375rem 0 0.375rem;
}

/* 
     * Applied to the label of the selected choice
     */
.oj-select-selected-choice-label,
.oj-select-selected-choice-separator {
  display: inline-block;
  vertical-align: middle;
  word-break: break-word;
}

/*
     * Applied to the clear entry field of the selected choice
     */
.oj-select-clear-entry {
  display: inline-block;
  outline: none;
  text-align: center;
  vertical-align: middle;
  line-height: 100%;
  margin-inline-start: 3px;
}

/* end multiselect */
/* Invalid styling for the widget */
/* The borders are no longer on this element */
.oj-select.oj-invalid .oj-select-choice,
.oj-select-native.oj-invalid .oj-select-select,
.oj-select-multi.oj-invalid .oj-select-choices,
.oj-select.oj-warning .oj-select-choice,
.oj-select-native.oj-warning .oj-select-select,
.oj-select-multi.oj-warning .oj-select-choices {
  border-width: 0;
}

/* disabled styles  for single-select */
.oj-select.oj-disabled .oj-select-choice {
  color: var(--oj-text-field-text-color-disabled);
  border-color: var(--oj-text-field-border-color-disabled);
}

/* 
     * Disabled styles for multi-select 
     */
.oj-select-multi.oj-disabled .oj-select-choices,
.oj-select-multi.oj-disabled .oj-select-selected-choice,
.oj-select-multi.oj-disabled .oj-select-selected-choice.oj-focus,
.oj-select-multi.oj-disabled input {
  color: var(--oj-text-field-text-color-disabled);
  border-color: var(--oj-text-field-border-color-disabled);
  outline: 0;
}

.oj-select-multi.oj-disabled .oj-select-clear-entry {
  display: none;
  background: none;
}

/* 
     * Applied to the place holder text
     */
.oj-select-chosen.oj-select-default {
  color: var(--oj-text-field-placeholder-color);
  font-style: var(--oj-text-field-placeholder-font-style);
}

/* 
     * Applied to the selected text
     */
.oj-select-chosen {
  border: 0;
  outline: 0;
  white-space: nowrap;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  box-shadow: none;
  padding-inline-end: var(--oj-text-field-text-to-edge-padding);
  height: 100%;
}

.oj-hicontrast .oj-select.oj-disabled {
  border-style: dotted;
}

/* 
     * Applied to the dropdown open icon
     */
.oj-select-open-icon,
.oj-select-open-icon:hover,
.oj-select-open-icon:focus {
  text-decoration: none;
}

/* clear entry icon */
/* Default options*/
.oj-select-option-defaults {
  font-family: '{"renderMode":"jet","loadingIndicatorDelay":"50"}' !important;
}

.oj-select-select {
  text-align: var(--oj-text-field-text-align);
  color: var(--oj-text-field-text-color);
  background-color: transparent;
  border-style: solid;
  border-color: var(--oj-text-field-border-color);
  border-width: var(--oj-text-field-border-width);
  border-radius: var(--oj-text-field-border-radius);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  border-width: 0;
  height: var(--oj-text-field-height);
  padding: 0 var(--oj-text-field-text-to-edge-padding);
  box-sizing: border-box;
  width: 100%;
  white-space: nowrap;
  background-clip: padding-box;
}

.oj-select-select:-ms-input-placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

.oj-select-select::placeholder {
  color: var(--oj-text-field-placeholder-color);
  opacity: 1;
  font-style: var(--oj-text-field-placeholder-font-style);
}

select.oj-select-select.oj-select-default:not([multiple]) {
  color: var(--oj-text-field-placeholder-color);
  font-style: var(--oj-text-field-placeholder-font-style);
}

.oj-select-select[disabled] {
  color: var(--oj-text-field-text-color-disabled);
  border-color: var(--oj-text-field-border-color-disabled);
}

.oj-select-select option {
  background-color: var(--oj-text-field-bg-color);
}

/* 
     * Applied to focus ring around the select box 
     */
.oj-select-select:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices {
  color: inherit;
  height: 100%;
  width: 100%;
  border-width: 0;
}

html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html:not([dir=rtl]) .oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices {
  text-align: inherit;
}

html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html[dir=rtl] .oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices {
  text-align: inherit;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-select:not(.oj-disabled) .oj-select-choice,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-select:not(.oj-disabled) .oj-select-choices {
  background-color: transparent;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-chosen {
  background-color: inherit;
  border-width: 0;
}

.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select {
  height: 100%;
}

.oj-text-field-label-inside .oj-select-choice {
  background-color: transparent;
  width: 100%;
  border-width: 0;
  min-height: var(--oj-text-field-inside-edge-height);
  padding: 0;
}

.oj-text-field-label-inside .oj-select-choices {
  background-color: transparent;
  border-width: 0;
  padding: var(--oj-text-field-inside-edge-padding-top) var(--oj-text-field-text-to-edge-padding) 5px;
}

.oj-text-field-label-inside.oj-select-multi:not(.oj-read-only) .oj-select-default {
  min-height: calc(var(--oj-text-field-height) * 0.85);
}

.oj-text-field-label-inside.oj-read-only .oj-select-choices {
  padding: 0;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-read-only .oj-select-choices {
  padding: var(--oj-text-field-inside-edge-padding-top) var(--oj-text-field-text-to-edge-padding) 5px;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-read-only .oj-select-chosen,
.oj-text-field-label-inside:not(.oj-read-only) .oj-select-chosen {
  padding-top: var(--oj-text-field-inside-edge-padding-top);
  line-height: calc(var(--oj-text-field-inside-edge-height) - var(--oj-text-field-inside-edge-padding-top));
}

.oj-form-layout .oj-form.oj-enabled .oj-select.oj-read-only .oj-select-chosen,
.oj-text-field-label-inside:not(.oj-read-only) .oj-select-chosen {
  padding-left: var(--oj-text-field-text-to-edge-padding);
  padding-right: var(--oj-text-field-text-to-edge-padding);
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-select.oj-read-only .oj-select-chosen {
  min-height: var(--oj-text-field-inside-edge-height);
}

.oj-text-field-label-inside .oj-select-choice.oj-hover,
.oj-text-field-label-inside .oj-select-choices.oj-hover {
  background-color: transparent;
}

.oj-text-field-label-inside.oj-select.oj-read-only .oj-select-choice {
  padding: 0;
}

.oj-text-field.oj-select.oj-disabled .oj-text-field-container {
  background-color: var(--oj-text-field-bg-color-disabled);
}

.oj-text-field.oj-select-multi .oj-text-field-container {
  height: auto;
}

.oj-text-field.oj-select-multi:not(.oj-read-only) .oj-text-field-container {
  min-height: var(--oj-text-field-height);
}

.oj-text-field-label-inside .oj-select-selected-choice {
  margin-top: 10px;
  margin-inline-end: 6px;
  margin-bottom: 0px;
  margin-inline-start: 0px;
}

.oj-text-field-label-inside.oj-select.oj-read-only .oj-select-selected-choice {
  margin-top: 0px;
  margin-inline-end: 6px;
  margin-bottom: 0px;
  margin-inline-start: 0px;
}

.oj-text-field-label-inside.oj-select.oj-invalid .oj-text-field-container .oj-label,
.oj-text-field-label-inside.oj-select-many.oj-invalid .oj-text-field-container .oj-label {
  color: var(--oj-text-field-inside-edge-label-color-error);
}

.oj-text-field-label-inside.oj-select {
  max-width: 100%;
}

.oj-text-field-label-inside .oj-select-label {
  align-self: flex-start;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field.oj-select .oj-text-field-container {
  display: flex;
}

.oj-text-field.oj-read-only.oj-select-multi .oj-text-field-container {
  display: block;
}

html:not([dir=rtl]) .oj-select-select {
  padding-left: 0;
}

html[dir=rtl] .oj-select-select {
  padding-right: 0;
}

.oj-select-selected-choice > .oj-component-icon, .oj-select-selected-choice > .oj-popup-tail.oj-popup-tail-simple,
.oj-select-selected-choice > .oj-menucheckbox-icon {
  font-size: 1rem;
}

.oj-select .oj-select-multiple-open-icon {
  display: none;
}

.oj-select .oj-select-select::-ms-expand {
  display: none;
}

.oj-select-select {
  -moz-appearance: none;
}

.oj-select-select.oj-select-default[multiple] {
  color: var(--oj-text-field-placeholder-color);
  font-style: var(--oj-text-field-placeholder-font-style);
}

html:not([dir=rtl]) .oj-form-control-text-align-right oj-select-many.oj-select .oj-select-select,
html:not([dir=rtl]) oj-select-many.oj-form-control-text-align-right.oj-select .oj-select-select {
  padding-right: 0px;
}

html:not([dir=rtl]) .oj-form-control-text-align-end oj-select-many.oj-select .oj-select-select,
html:not([dir=rtl]) oj-select-many.oj-form-control-text-align-end.oj-select .oj-select-select {
  padding-right: 0px;
}

html[dir=rtl] .oj-form-control-text-align-end oj-select-many.oj-select .oj-select-select,
html[dir=rtl] oj-select-many.oj-form-control-text-align-end.oj-select .oj-select-select {
  padding-left: 0px;
}

oj-selector:not(.oj-complete) {
  visibility: hidden;
}

.oj-selector:active .oj-selector-wrapper:not(.oj-selected):not(.oj-indeterminate),
.oj-selector .oj-selector-wrapper:not(.oj-selected):not(.oj-indeterminate),
.oj-selector:hover .oj-selector-wrapper:not(.oj-selected):not(.oj-indeterminate) {
  color: var(--oj-radio-checkbox-input-color-unselected);
}

.oj-selector .oj-selector-wrapper.oj-selected,
.oj-selector:active .oj-selector-wrapper.oj-selected,
.oj-selector:hover .oj-selector-wrapper.oj-selected {
  color: var(--oj-radio-checkbox-input-color-selected);
}

.oj-selector:hover .oj-selector-wrapper.oj-indeterminate,
.oj-selector .oj-selector-wrapper.oj-indeterminate,
.oj-selector:active .oj-selector-wrapper.oj-indeterminate {
  color: var(--oj-radio-checkbox-input-color-unselected);
}

.oj-selector:active .oj-selector-wrapper:not(.oj-selected):not(.oj-indeterminate)::before,
.oj-selector:active .oj-selector-wrapper.oj-selected::before,
.oj-selector:active .oj-selector-wrapper.oj-indeterminate::before {
  transform: var(--oj-radio-checkbox-input-transform-active);
  transition: transform 0.15s var(--oj-animation-ease-in-out);
}

.oj-selector .oj-selector-wrapper:focus-within:not(.oj-focus-highlight) {
  outline: none;
}

.oj-selector .oj-selector-wrapper:focus-within {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

.oj-selector {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.oj-selector .oj-selector-wrapper {
  display: inline-block;
  white-space: normal;
  line-height: 1;
  font-size: 1rem;
  width: 1rem;
  height: 1rem;
}

.oj-selector .oj-selector-wrapper .oj-selectorbox {
  width: 2.75rem;
  height: 2.75rem;
  opacity: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}

oj-spark-chart:not(.oj-complete) {
  visibility: hidden;
}

oj-spark-chart {
  display: block;
}

.oj-sparkchart {
  width: 100px;
  height: 18px;
}

.oj-sparkchart.oj-focus-highlight {
  outline: dotted 1px var(--oj-core-focus-border-color);
}

oj-status-meter-gauge:not(.oj-complete) {
  visibility: hidden;
}

oj-status-meter-gauge {
  display: block;
}

.oj-statusmetergauge-horizontal-fit {
  width: 13.75rem;
  height: 1.5625rem;
}

.oj-statusmetergauge-vertical-fit {
  width: 1.5625rem;
  height: 13.75rem;
}

.oj-statusmetergauge-circular-fit {
  width: var(--oj-statusmeter-gauge-circular-md-size);
  height: var(--oj-statusmeter-gauge-circular-md-size);
}

.oj-statusmetergauge.oj-focus-highlight {
  outline: dotted 1px var(--oj-core-focus-border-color);
}

.oj-statusmetergauge-horizontal-sm {
  width: 100%;
  height: var(--oj-statusmeter-gauge-bar-sm-size) !important;
}

.oj-statusmetergauge-horizontal-md {
  width: 100%;
  height: var(--oj-statusmeter-gauge-bar-md-size) !important;
}

.oj-statusmetergauge-horizontal-lg {
  width: 100%;
  height: var(--oj-statusmeter-gauge-bar-lg-size) !important;
}

.oj-statusmetergauge-vertical-sm {
  height: 100%;
  width: var(--oj-statusmeter-gauge-bar-sm-size) !important;
}

.oj-statusmetergauge-vertical-md {
  height: 100%;
  width: var(--oj-statusmeter-gauge-bar-md-size) !important;
}

.oj-statusmetergauge-vertical-lg {
  height: 100%;
  width: var(--oj-statusmeter-gauge-bar-lg-size) !important;
}

.oj-statusmetergauge-circular-sm {
  width: var(--oj-statusmeter-gauge-circular-sm-size) !important;
  height: var(--oj-statusmeter-gauge-circular-sm-size) !important;
}

.oj-statusmetergauge-circular-md {
  width: var(--oj-statusmeter-gauge-circular-md-size) !important;
  height: var(--oj-statusmeter-gauge-circular-md-size) !important;
}

.oj-statusmetergauge-circular-lg {
  width: var(--oj-statusmeter-gauge-circular-lg-size) !important;
  height: var(--oj-statusmeter-gauge-circular-lg-size) !important;
}

.oj-statusmeter-gauge-plotarea {
  border-color: var(--oj-statusmeter-gauge-bar-plotarea-border-color);
  color: var(--oj-statusmeter-gauge-bar-plotarea-color);
}

:root {
  --oj-statusmeter-gauge-bar-sm-size: 0.375rem;
  --oj-statusmeter-gauge-bar-md-size: 0.625rem;
  --oj-statusmeter-gauge-bar-lg-size: 0.875rem;
  --oj-statusmeter-gauge-bar-plotarea-border-color: transparent;
  --oj-statusmeter-gauge-bar-plotarea-color: rgba(var(--oj-palette-neutral-rgb-170), 0.15);
  --oj-statusmeter-gauge-circular-sm-size: 3.5rem;
  --oj-statusmeter-gauge-circular-md-size: 6rem;
  --oj-statusmeter-gauge-circular-lg-size: 12.25rem;
}

oj-stream-list:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the stream list widget container */
oj-stream-list {
  display: block;
  overflow: auto;
  -webkit-tap-highlight-color: transparent;
}

.oj-stream-list-item:focus,
.oj-stream-list-group:focus {
  outline: none;
}

.oj-stream-list-item.oj-focus-highlight,
.oj-stream-list-group.oj-focus-highlight {
  outline-offset: -1px;
  outline: dotted 1px var(--oj-core-focus-border-color);
}

/* Styling for skeleton list item container */
.oj-stream-list-skeleton {
  height: 1.25rem;
  margin-top: var(--oj-core-spacing-4x);
}

/* Styling for skeleton list item container */
.oj-stream-list-child-skeleton {
  margin-left: var(--oj-core-spacing-4x);
}

/* Styling for skeleton list item container */
.oj-stream-list-skeleton-content {
  height: 100%;
}

/* Styling for item entrance animation */
.oj-stream-list-entrance-animation {
  animation-name: stream-list-entrance-animation;
  animation-duration: 0.15s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes stream-list-entrance-animation {
  0% {
    visibility: visible;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
.oj-streamlist-option-defaults {
  font-family: '{"showIndicatorDelay":"50"}';
}

oj-sunburst:not(.oj-complete) {
  visibility: hidden;
}

oj-sunburst {
  display: block;
}

.oj-sunburst {
  font-size: var(--oj-dvt-label-font-size-md);
  color: var(--oj-core-text-color-primary);
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 560px;
}

.oj-sunburst-attribute-type-text {
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-sm);
}

.oj-sunburst-attribute-value-text {
  font-size: var(--oj-dvt-label-font-size-sm);
  color: var(--oj-core-text-color-primary);
}

.oj-sunburst-current-drill-text {
  font-size: var(--oj-typography-body-md-font-size);
  line-height: var(--oj-typography-body-md-line-height);
  color: var(--oj-core-text-color-primary);
}

.oj-sunburst-drill-text {
  color: var(--oj-link-text-color);
  font-size: var(--oj-typography-body-md-font-size);
  line-height: var(--oj-typography-body-md-line-height);
  -webkit-text-decoration: var(--oj-link-embedded-text-decoration);
  text-decoration: var(--oj-link-embedded-text-decoration);
}

.oj-sunburst-drill-text.oj-hover {
  -webkit-text-decoration: var(--oj-link-embedded-text-decoration-hover);
  text-decoration: var(--oj-link-embedded-text-decoration-hover);
}

.oj-sunburst-node {
  font-size: var(--oj-dvt-label-font-size-md);
}

.oj-sunburst-node.oj-hover {
  border-color: var(--oj-dvt-node-border-color-hover);
}

.oj-sunburst-node.oj-selected {
  border-top-color: var(--oj-dvt-item-border-color-selected);
  border-bottom-color: var(--oj-dvt-item-contrast-color);
}

/* Applied to offcanvas when it is in open state  */
.oj-swipetoreveal.oj-offcanvas-start.oj-offcanvas-open,
.oj-swipetoreveal.oj-offcanvas-end.oj-offcanvas-open {
  display: flex;
  overflow: hidden;
}

/* Applied to action items */
.oj-swipetoreveal-action {
  flex: 1;
  max-width: 100%;
  text-align: center;
  vertical-align: middle;
  height: 100%;
  overflow: hidden;
  color: var(--oj-core-brand-contrast);
  transition: max-width var(--oj-animation-duration-long) var(--oj-animation-ease-in-out);
  background-color: var(--oj-core-brand-2);
  min-width: 4rem;
  font-size: var(--oj-core-icon-size-lg);
}

/*
     * Applied to action items that should be hidden when full trigger occurs
     */
.oj-swipetoreveal .oj-swipetoreveal-hide-when-full {
  max-width: 0;
}

/* Styling for the swipeactions root element */
.oj-swipeactions {
  display: block;
}

/* Styling to remove focus ring border on focusable elements */
.oj-swipeactions:focus {
  outline: none;
}

/* Styling for the neutral action item. */
.oj-swipeactions-neutral {
  background-color: var(--oj-core-neutral-1);
  color: var(--oj-core-neutral-contrast);
}

/* Styling for the attention action item. */
.oj-swipeactions-attention {
  background-color: var(--oj-core-warning-1);
  color: var(--oj-core-warning-contrast);
}

/* Styling for the danger action item. */
.oj-swipeactions-danger {
  background-color: var(--oj-core-danger-1);
  color: var(--oj-core-danger-contrast);
}

/* Styling for the text within action item. */
.oj-swipeactions-action-text {
  font-size: initial;
}

/* Styling for the text within action item when icon is present. */
[slot=startIcon] + .oj-swipeactions-action-text {
  padding-top: 0.5rem;
}

/* Styling for the panel of an action item. */
.oj-swipeactions-action-panel {
  height: 100%;
}

/* styling on focused action item. */
.oj-swipeactions-action-panel.oj-focus-highlight {
  outline: 1px dotted var(--oj-core-neutral-contrast);
  outline-offset: -2px;
}

/* Styling for the listview item when it is the container of the swipeactions root element. */
.oj-listview-item.oj-swipeactions-container {
  padding: 0;
}

/* Styling for the accessible link that displays the swipe actions when activate. */
.oj-swipeactions-accessible-link {
  position: absolute;
  top: calc(100% - 20px);
}

/* Styling for the accessible link that closes the swipe actions when activate. */
.oj-swipeactions-hide-actions-link {
  position: absolute;
  right: 0px;
}

/* Styling for the content of the accessible link that closes the swipe actions. */
.oj-swipeactions-hide-actions-link:after {
  content: "[X]";
}

/* Adding some margin to prevent icon from being too close to edges */
.oj-swipeactions-action-panel .oj-flex-bar-start {
  padding-left: 8px;
  padding-right: 8px;
}

/* Adding some margin to prevent icon from being too close to edges */
.oj-swipeactions-action-panel .oj-flex-bar-end {
  padding-left: 8px;
  padding-right: 8px;
}

:root {
  --oj-switch-track-height: 1.25rem;
  --oj-switch-track-width: 2.25rem;
  --oj-switch-track-border-radius: var(--oj-core-border-radius-lg);
  --oj-switch-thumb-to-track-horizontal-margin: 0.0625rem;
  --oj-switch-track-bg-color: rgb(var(--oj-palette-neutral-rgb-90));
  --oj-switch-track-border-color: transparent;
  --oj-switch-thumb-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-switch-thumb-border-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-switch-thumb-height: calc(var(--oj-switch-track-height) - 0.25rem);
  --oj-switch-thumb-width: var(--oj-switch-thumb-height);
  --oj-switch-thumb-border-radius: var(--oj-core-border-radius-md);
  --oj-switch-thumb-box-shadow: 0px 0.125rem 0.25rem 0px rgba (var(--oj-core-box-shadow-rgb), 0.1);
  --oj-switch-track-bg-color-selected: rgb(var(--oj-palette-brand-rgb-100));
  --oj-switch-track-border-color-selected: rgb(var(--oj-palette-brand-rgb-100));
  --oj-switch-thumb-bg-color-selected: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-switch-thumb-border-color-selected: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-switch-thumb-box-shadow-selected: var(--oj-switch-thumb-box-shadow);
  --oj-switch-track-bg-color-hover: rgba(var(--oj-palette-neutral-rgb-170), 0.6);
  --oj-switch-track-border-color-hover: transparent;
  --oj-switch-thumb-bg-color-hover: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-switch-thumb-border-color-hover: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-switch-thumb-box-shadow-hover: none;
  --oj-switch-track-bg-color-selected-hover: rgb(var(--oj-palette-brand-rgb-110));
  --oj-switch-track-border-color-selected-hover: rgb(var(--oj-palette-brand-rgb-110));
  --oj-switch-thumb-bg-color-selected-hover: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-switch-thumb-border-color-selected-hover: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-switch-thumb-box-shadow-selected-hover: none;
  --oj-switch-track-bg-color-active: rgba(var(--oj-palette-neutral-rgb-170), 0.68);
  --oj-switch-track-border-color-active: transparent;
  --oj-switch-thumb-bg-color-active: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-switch-thumb-border-color-active: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-switch-thumb-box-shadow-active: none;
  --oj-switch-thumb-width-active: var(--oj-switch-thumb-width);
  --oj-switch-track-bg-color-selected-active: rgb(var(--oj-palette-brand-rgb-120));
  --oj-switch-track-border-color-selected-active: rgb(var(--oj-palette-brand-rgb-120));
  --oj-switch-thumb-bg-color-selected-active: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-switch-thumb-border-color-selected-active: rgb(var(--oj-palette-neutral-rgb-10));
  --oj-switch-thumb-box-shadow-selected-active: none;
  --oj-switch-track-bg-color-disabled: var(--oj-core-color-disabled-2);
  --oj-switch-track-border-color-disabled: transparent;
  --oj-switch-thumb-bg-color-disabled: rgba(var(--oj-palette-neutral-rgb-10), 0.8);
  --oj-switch-thumb-border-color-disabled: transparent;
  --oj-switch-track-bg-color-selected-disabled: var(--oj-core-color-disabled-2);
  --oj-switch-track-border-color-selected-disabled: transparent;
  --oj-switch-thumb-bg-color-selected-disabled: rgba(var(--oj-palette-neutral-rgb-10), 0.8);
  --oj-switch-thumb-border-color-selected-disabled: transparent;
}

/* switch */
/* --------------------------------------------------------------- */
oj-switch:not(.oj-complete) {
  visibility: hidden;
}

.oj-switch {
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
}

.oj-switch .oj-switch-container {
  position: relative;
  min-height: var(--oj-core-touch-target-min-size);
  min-width: var(--oj-core-touch-target-min-size);
}

.oj-switch:not(.oj-read-only) .oj-switch-container {
  width: var(--oj-switch-track-width);
}

.oj-switch .oj-switch-thumb {
  box-sizing: content-box;
}

html:not([dir=rtl]) .oj-switch .oj-switch-thumb {
  left: var(--oj-switch-thumb-to-track-horizontal-margin);
  right: auto;
}

html[dir=rtl] .oj-switch .oj-switch-thumb {
  left: auto;
  right: var(--oj-switch-thumb-to-track-horizontal-margin);
}

html:not([dir=rtl]) .oj-switch.oj-selected .oj-switch-thumb {
  left: auto;
  right: var(--oj-switch-thumb-to-track-horizontal-margin);
}

html[dir=rtl] .oj-switch.oj-selected .oj-switch-thumb {
  left: var(--oj-switch-thumb-to-track-horizontal-margin);
  right: auto;
}

.oj-switch .oj-switch-track {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: var(--oj-switch-track-height);
  width: var(--oj-switch-track-width);
  box-sizing: border-box;
  transform: translate3d(0, -50%, 0);
  border-radius: var(--oj-switch-track-border-radius);
  transition: background-color 0.2s linear 0.1s, opacity 0.2s linear 0.1s, border-color 0.2s linear 0.1s;
}

.oj-switch.oj-read-only .oj-switch-container {
  min-height: var(--oj-switch-track-height);
}

.oj-switch.oj-read-only .oj-switch-track {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 0;
  height: var(--oj-switch-track-height);
  width: var(--oj-switch-track-width);
  box-sizing: border-box;
  transform: translate3d(0, -50%, 0);
  border-radius: var(--oj-switch-track-border-radius);
}

.oj-switch .oj-switch-track,
.oj-switch.oj-default .oj-switch-track {
  background-color: var(--oj-switch-track-bg-color);
  border-color: var(--oj-switch-track-border-color);
}

.oj-switch .oj-switch-thumb,
.oj-switch.oj-default .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: var(--oj-switch-thumb-height);
  width: var(--oj-switch-thumb-width);
  box-sizing: border-box;
  transform: translate3d(0, -50%, 0);
  border-radius: var(--oj-switch-thumb-border-radius);
  box-shadow: var(--oj-switch-thumb-box-shadow);
  background-color: var(--oj-switch-thumb-bg-color);
  border-color: var(--oj-switch-thumb-border-color);
  transition: height var(--oj-animation-duration-medium) var(--oj-animation-ease-out), width var(--oj-animation-duration-medium) var(--oj-animation-ease-out), left var(--oj-animation-duration-medium) var(--oj-animation-ease-out);
}

.oj-switch.oj-selected .oj-switch-track {
  background-color: var(--oj-switch-track-bg-color-selected);
  border-color: var(--oj-switch-track-border-color-selected);
}

.oj-switch.oj-selected .oj-switch-thumb {
  box-shadow: var(--oj-switch-thumb-box-shadow-selected);
  background-color: var(--oj-switch-thumb-bg-color-selected);
  border-color: var(--oj-switch-thumb-border-color-selected);
  transition: height var(--oj-animation-duration-long) var(--oj-animation-ease-out), width var(--oj-animation-duration-long) var(--oj-animation-ease-out), right var(--oj-animation-duration-long) var(--oj-animation-ease-out);
}

.oj-switch.oj-hover:not(.oj-disabled):not(.oj-read-only) .oj-switch-track {
  cursor: var(--oj-core-cursor-clickable);
  background-color: var(--oj-switch-track-bg-color-hover);
  border-color: var(--oj-switch-track-border-color-hover);
}

.oj-switch.oj-hover:not(.oj-disabled):not(.oj-read-only) .oj-switch-thumb {
  border-width: 1px;
  border-radius: var(--oj-switch-thumb-border-radius);
  box-shadow: var(--oj-switch-thumb-box-shadow-hover);
  background-color: var(--oj-switch-thumb-bg-color-hover);
  border-color: var(--oj-switch-thumb-border-color-hover);
}

.oj-switch.oj-selected.oj-hover:not(.oj-disabled):not(.oj-read-only) .oj-switch-track {
  background-color: var(--oj-switch-track-bg-color-selected-hover);
  border-color: var(--oj-switch-track-border-color-selected-hover);
}

.oj-switch.oj-selected.oj-hover:not(.oj-disabled):not(.oj-read-only) .oj-switch-thumb {
  border-radius: var(--oj-switch-thumb-border-radius);
  box-shadow: var(--oj-switch-thumb-box-shadow-selected-hover);
  background-color: var(--oj-switch-thumb-bg-color-selected-hover);
  border-color: var(--oj-switch-thumb-border-color-selected-hover);
}

.oj-switch.oj-active .oj-switch-track,
.oj-switch.oj-hover:not(.oj-disabled):not(.oj-read-only).oj-active .oj-switch-track {
  background-color: var(--oj-switch-track-bg-color-active);
  border-color: var(--oj-switch-track-border-color-active);
}

.oj-switch.oj-active .oj-switch-thumb,
.oj-switch.oj-hover:not(.oj-disabled):not(.oj-read-only).oj-active .oj-switch-thumb {
  width: var(--oj-switch-thumb-width-active);
  box-shadow: var(--oj-switch-thumb-box-shadow-active);
  background-color: var(--oj-switch-thumb-bg-color-active);
  border-color: var(--oj-switch-thumb-border-color-active);
  transform: translate3d(0, -50%, 0);
  transition: height var(--oj-animation-duration-xshort) var(--oj-animation-ease-in-out), width var(--oj-animation-duration-xshort) var(--oj-animation-ease-in-out);
}

.oj-switch.oj-selected.oj-active .oj-switch-track,
.oj-switch.oj-selected.oj-hover:not(.oj-disabled):not(.oj-read-only).oj-active .oj-switch-track {
  background-color: var(--oj-switch-track-bg-color-selected-active);
  border-color: var(--oj-switch-track-border-color-selected-active);
}

.oj-switch.oj-selected.oj-active .oj-switch-thumb,
.oj-switch.oj-selected.oj-hover:not(.oj-disabled):not(.oj-read-only).oj-active .oj-switch-thumb {
  box-shadow: var(--oj-switch-thumb-box-shadow-selected-active);
  background-color: var(--oj-switch-thumb-bg-color-selected-active);
  border-color: var(--oj-switch-thumb-border-color-selected-active);
  transform: translate3d(0, -50%, 0);
  transition: height var(--oj-animation-duration-xshort) var(--oj-animation-ease-in-out), width var(--oj-animation-duration-xshort) var(--oj-animation-ease-in-out);
}

.oj-switch.oj-read-only .oj-switch-track {
  background-color: transparent;
  border-color: transparent;
}

.oj-switch.oj-read-only {
  font-weight: var(--oj-form-control-font-weight-read-only);
}

.oj-switch.oj-read-only .oj-switch-thumb {
  border-width: 0;
  box-shadow: none;
  background-color: transparent;
  color: var(--oj-core-text-color-primary);
}

html:not([dir=rtl]) .oj-switch.oj-read-only .oj-switch-thumb {
  left: 0;
  right: auto;
}

html[dir=rtl] .oj-switch.oj-read-only .oj-switch-thumb {
  left: auto;
  right: 0;
}

html:not([dir=rtl]) .oj-switch.oj-selected.oj-read-only .oj-switch-thumb {
  left: 0;
  right: auto;
}

html[dir=rtl] .oj-switch.oj-selected.oj-read-only .oj-switch-thumb {
  left: auto;
  right: 0;
}

.oj-switch.oj-disabled .oj-switch-track {
  background-color: var(--oj-switch-track-bg-color-disabled);
  border-color: var(--oj-switch-track-border-color-disabled);
}

.oj-switch.oj-disabled .oj-switch-thumb {
  box-shadow: none;
  background-color: var(--oj-switch-thumb-bg-color-disabled);
  border-color: var(--oj-switch-thumb-border-color-disabled);
}

.oj-switch.oj-disabled.oj-selected .oj-switch-track {
  background-color: var(--oj-switch-track-bg-color-selected-disabled);
  border-color: var(--oj-switch-track-border-color-selected-disabled);
}

.oj-switch.oj-disabled.oj-selected .oj-switch-thumb {
  background-color: var(--oj-switch-thumb-bg-color-selected-disabled);
  border-color: var(--oj-switch-thumb-border-color-selected-disabled);
}

.oj-switch-thumb:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-switch-thumb:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: 1px;
}

oj-switcher:not(.oj-complete) {
  visibility: hidden;
}

:root {
  --oj-private-tab-bar-border-radius-top-left: 0;
  --oj-private-tab-bar-border-radius-top-right: 0;
  --oj-private-tab-bar-border-radius-bottom-left: 0;
  --oj-private-tab-bar-border-radius-bottom-right: 0;
  --oj-tab-bar-icon-to-text-padding: 0.5rem;
  --oj-tab-bar-icon-size: var(--oj-core-icon-size-lg);
  --oj-tab-bar-icon-margin: 0;
  --oj-tab-bar-item-margin: 0 2rem 0 0;
  --oj-private-tab-bar-item-border-width-top: 0;
  --oj-private-tab-bar-item-border-width-right: 0;
  --oj-private-tab-bar-item-border-width-bottom: 3px;
  --oj-private-tab-bar-item-border-width-left: 0;
  --oj-tab-bar-item-min-height: 3rem;
  --oj-tab-bar-item-line-height: var(--oj-typography-body-md-line-height);
  --oj-tab-bar-item-font-size: var(--oj-typography-body-md-font-size);
  --oj-tab-bar-item-padding: 0;
  --oj-tab-bar-item-font-weight: 600;
  --oj-private-tab-bar-item-border-color: transparent;
  --oj-tab-bar-item-label-color: var(--oj-core-text-color-secondary);
  --oj-tab-bar-item-label-color-hover: var(--oj-core-text-color-primary);
  --oj-tab-bar-item-bg-color-hover: transparent;
  --oj-private-tab-bar-item-border-color-hover: transparent;
  --oj-tab-bar-item-bg-color-active: transparent;
  --oj-tab-bar-item-border-color-active: rgb(var(--oj-palette-brand-rgb-70));
  --oj-tab-bar-item-font-weight-selected: 600;
  --oj-tab-bar-item-label-color-selected: var(--oj-core-text-color-primary);
  --oj-tab-bar-item-bg-color-selected: transparent;
  --oj-tab-bar-item-border-color-selected: var(--oj-core-text-color-primary);
  --oj-private-tab-bar-global-horizontal-add-animation-default: '[{"effect":"expand","direction":"width"},"fadeIn"]';
  --oj-private-tab-bar-global-horizontal-remove-animation-default: '[{"effect":"collapse","direction":"width","persist":"all"},"fadeOut"]';
  --oj-private-tab-bar-global-add-animation-default: '[{"effect":"expand"},"fadeIn"]';
  --oj-private-tab-bar-global-remove-animation-default: '[{"effect":"collapse"},"fadeOut"]';
  --oj-private-tab-bar-global-update-animation-default: '{"effect":"fadeIn"}';
  --oj-private-tab-bar-global-pointerUp-animation-default: '{"effect":"ripple"}';
}

oj-tab-bar:not(.oj-complete) {
  visibility: hidden;
}

oj-tab-bar {
  display: block;
}

/*Navtabs root node*/
.oj-tabbar,
.oj-tabbar-listview-container {
  overflow-x: hidden;
}

.oj-tabbar-listview {
  position: relative;
}

.oj-tabbar-touch {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* navigation tabs divider used in category header natabs*/
.oj-tabbar-category-divider {
  border-color: var(--oj-core-divider-color);
  border-style: solid;
  border-width: 1px 0 0;
  font-size: 0;
  height: 0;
  line-height: 0;
  margin: 0 3px;
}

/* navigation tabs divider used in horizontal natabs to separate buttons*/
.oj-tabbar-horizontal .oj-tabbar-divider {
  border-color: var(--oj-core-divider-color);
  border-style: solid;
  border-width: 0 1px 0 0;
  font-size: 0;
  height: 1.714rem;
  line-height: 0;
  margin: 5px 0;
  align-self: center;
  display: none;
}

.oj-tabbar-item-dividers .oj-tabbar-divider {
  display: list-item;
}

/* Basic styling  for all ul elements in list*/
.oj-tabbar-element {
  list-style-type: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

.oj-tabbar-item-element:not(.oj-tabbar-item) {
  display: block;
}

.oj-tabbar-item-element {
  list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

/* Remove focus ring on outer ul element*/
.oj-tabbar-element:focus {
  outline: none;
}

/* Style content wrapper of each tab item */
.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item-label {
  vertical-align: middle;
}

.oj-tabbar-vertical .oj-tabbar-item::before {
  min-height: var(--oj-tab-bar-item-min-height);
  content: "";
  display: inline-block;
  visibility: hidden;
}

.oj-tabbar-vertical .oj-tabbar-item-label {
  font-size: var(--oj-tab-bar-item-font-size);
  line-height: var(--oj-tab-bar-item-line-height);
}

/* Style content of each tab item */
.oj-tabbar-item-content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}

a.oj-tabbar-item-content {
  text-decoration: none;
  font-weight: normal;
  outline: none;
  overflow: hidden;
}

a.oj-tabbar-item-content:active {
  background-color: transparent;
}

a.oj-tabbar-item-content .oj-tabbar-item-label {
  color: var(--oj-tab-bar-item-label-color);
  font-weight: var(--oj-tab-bar-item-font-weight);
}

.oj-selected > a.oj-tabbar-item-content > .oj-tabbar-item-label {
  color: var(--oj-tab-bar-item-label-color-selected);
  font-weight: var(--oj-tab-bar-item-font-weight-selected);
}

.oj-tabbar:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover:not(.oj-selected) > a.oj-tabbar-item-content > .oj-tabbar-item-label {
  color: var(--oj-tab-bar-item-label-color-hover);
}

/* Navigation tabs item label or arbitrary content place holder*/
.oj-tabbar-item-label {
  order: 2;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 3rem;
  overflow-x: hidden;
  display: inline-block;
  line-height: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
}

.oj-tabbar-item-text-wrap .oj-tabbar-item-label {
  white-space: normal;
}

/*Padding for vertical natabs item label*/
.oj-tabbar-vertical .oj-tabbar-item-label {
  padding: 3px 0;
  flex: 1 1 auto;
}

.oj-tabbar-vertical-end.oj-tabbar-vertical .oj-tabbar-item-label {
  order: -1;
  text-align: end;
}

/* hide label for icons-only case */
.oj-tabbar-icon-only .oj-tabbar-item-label {
  display: none;
}

/* Tab item's Icon */
.oj-tabbar-item-icon {
  color: var(--oj-tab-bar-item-label-color);
  flex: 0 0 auto;
  font-size: var(--oj-tab-bar-icon-size);
}

/* Disabled node */
.oj-tabbar-item.oj-disabled > .oj-tabbar-item-content,
.oj-tabbar-item.oj-disabled .oj-tabbar-item-label {
  color: var(--oj-core-text-color-disabled);
}

.oj-tabbar-item.oj-disabled a.oj-tabbar-item-content {
  cursor: default;
}

.oj-tabbar-item.oj-disabled .oj-tabbar-item-icon {
  color: var(--oj-core-text-color-disabled);
}

/* Selected node */
.oj-tabbar-item.oj-selected .oj-tabbar-item-icon {
  color: var(--oj-tab-bar-item-label-color-selected);
}

/* hover icon */
.oj-tabbar-item.oj-hover:not(.oj-selected) .oj-tabbar-item-icon {
  color: var(--oj-tab-bar-item-label-color-hover);
}

/*borders for high contrast mode*/
.oj-hicontrast .oj-tabbar-item.oj-selected,
.oj-hicontrast .oj-tabbar-item.oj-selected.oj-hover,
.oj-hicontrast .oj-tabbar-item.oj-selected.oj-focus {
  border: 1px solid;
}

.oj-hicontrast .oj-tabbar-item.oj-hover,
.oj-hicontrast .oj-tabbar-item.oj-focus {
  border: 1px dotted;
}

/*Focus ring around  focused tab item*/
.oj-tabbar .oj-tabbar-item.oj-focus-highlight {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: -1px;
}

.oj-hicontrast .oj-tabbar-item.oj-focus {
  outline: none;
}

.oj-tabbar-item {
  border-color: transparent;
  display: flex;
  align-items: stretch;
}

.oj-tabbar .oj-tabbar-item.oj-selected {
  background-color: var(--oj-tab-bar-item-bg-color-selected);
}

.oj-tabbar-item.oj-selected {
  border-color: var(--oj-tab-bar-item-border-color-selected);
}

.oj-tabbar-item.oj-hover:not(.oj-selected) {
  background-color: var(--oj-tab-bar-item-bg-color-hover);
  border-color: var(--oj-private-tab-bar-item-border-color-hover);
}

:not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-hover:not(.oj-selected),
.oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item.oj-hover:not(.oj-selected) {
  border-color: var(--oj-private-tab-bar-item-border-color-hover);
}

.oj-tabbar:not(.oj-tabbar-stack-icon-label):not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {
  align-self: center;
  margin: var(--oj-tab-bar-icon-margin);
  margin-inline-end: var(--oj-tab-bar-icon-to-text-padding);
}

.oj-tabbar-vertical-end.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {
  margin: 0;
  margin-inline-start: var(--oj-tab-bar-icon-to-text-padding);
}

.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-has-icons > .oj-tabbar-item > .oj-tabbar-item-no-icon .oj-tabbar-item-label {
  margin-inline-start: calc(var(--oj-tab-bar-icon-to-text-padding) + 24px);
}

.oj-tabbar-vertical-end.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-has-icons > .oj-tabbar-item > .oj-tabbar-item-no-icon .oj-tabbar-item-label {
  margin: 0;
  margin-inline-end: calc(var(--oj-tab-bar-icon-to-text-padding) + 24px);
}

.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  margin: var(--oj-tab-bar-item-margin);
  border-top: var(--oj-private-tab-bar-item-border-width-top);
  border-inline-end-width: var(--oj-private-tab-bar-item-border-width-right);
  border-bottom: var(--oj-private-tab-bar-item-border-width-bottom);
  border-inline-start-width: var(--oj-private-tab-bar-item-border-width-left);
  border-color: var(--oj-private-tab-bar-item-border-color);
  border-style: solid;
  border-radius: 0;
}

.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item:first-child {
  margin-top: 0;
}

.oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item {
  border-style: none;
}

.oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-focus,
.oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-hover {
  border-style: dotted;
}

html[dir=rtl] .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-focus,
html[dir=rtl] .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-hover {
  border-width: 1px;
}

html:not([dir=rtl]) .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-focus,
html:not([dir=rtl]) .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-hover {
  border-width: 1px;
}

.oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected,
.oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-focus,
.oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-hover {
  border-style: solid;
}

html[dir=rtl] .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected,
html[dir=rtl] .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-focus,
html[dir=rtl] .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-hover {
  border-width: 1px;
}

html:not([dir=rtl]) .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected,
html:not([dir=rtl]) .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-focus,
html:not([dir=rtl]) .oj-hicontrast :not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-selected.oj-hover {
  border-width: 1px;
}

.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item .oj-tabbar-item-content {
  padding: var(--oj-tab-bar-item-padding);
  border-width: 0;
  border-inline-end-width: var(--oj-private-tab-bar-item-border-width-left);
  border-color: transparent;
  border-style: solid;
}

.oj-tabbar-vertical-end.oj-tabbar-vertical:not(.oj-tabbar-icon-only) .oj-tabbar-item .oj-tabbar-item-content {
  padding: var(--oj-tab-bar-item-padding);
}

.oj-tabbar-focused-element:not(.oj-focus-highlight) {
  outline: none;
}

.oj-tabbar-vertical.oj-tabbar-vertical-end:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  padding: 0;
  border-top-width: 0;
  border-inline-end-width: var(--oj-private-tab-bar-item-border-width-left);
  border-bottom-width: var(--oj-private-tab-bar-item-border-width-bottom);
  border-inline-start-width: var(--oj-private-tab-bar-item-border-width-right);
}

:not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item:first-of-type {
  border-top-left-radius: var(--oj-private-tab-bar-border-radius-top-left);
  border-top-right-radius: var(--oj-private-tab-bar-border-radius-top-right);
  border-top-width: var(--oj-private-tab-bar-item-border-width-top);
}

:not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item:last-of-type {
  border-bottom-left-radius: var(--oj-private-tab-bar-border-radius-bottom-left);
  border-bottom-right-radius: var(--oj-private-tab-bar-border-radius-bottom-right);
}

/*Start of icons only natabs*/
.oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item-icon {
  padding: 0;
  margin: var(--oj-tab-bar-icon-margin);
}

.oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item {
  border-style: solid;
  border-radius: 0;
  border-top-width: 0;
  border-inline-end-width: var(--oj-private-tab-bar-item-border-width-right);
  border-bottom-width: var(--oj-private-tab-bar-item-border-width-bottom);
  border-inline-start-width: var(--oj-private-tab-bar-item-border-width-left);
}

.oj-tabbar-icon-only.oj-tabbar-vertical.oj-tabbar-vertical-end .oj-tabbar-item {
  border-top-width: 0;
  border-inline-end-width: var(--oj-private-tab-bar-item-border-width-left);
  border-bottom-width: var(--oj-private-tab-bar-item-border-width-bottom);
  border-inline-start-width: var(--oj-private-tab-bar-item-border-width-right);
}

.oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item:first-of-type {
  border-top-width: var(--oj-private-tab-bar-item-border-width-top);
  border-top-left-radius: var(--oj-private-tab-bar-border-radius-top-left);
  border-top-right-radius: var(--oj-private-tab-bar-border-radius-top-right);
}

.oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item:last-of-type {
  border-bottom-left-radius: var(--oj-private-tab-bar-border-radius-bottom-left);
  border-bottom-right-radius: var(--oj-private-tab-bar-border-radius-bottom-right);
}

.oj-tabbar-icon-only .oj-tabbar-item-content {
  justify-content: center;
  padding: var(--oj-tab-bar-item-padding);
}

/*End of icons only natabs*/
.oj-tabbar-vertical.oj-tabbar-icon-only {
  display: inline-flex;
}

.oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item {
  margin: var(--oj-tab-bar-item-margin);
}

.oj-tabbar-icon-only.oj-tabbar-vertical .oj-tabbar-item:first-child {
  margin-top: 0;
}

.oj-tabbar-vertical .oj-tabbar-item.oj-selected {
  border-color: var(--oj-tab-bar-item-border-color-selected);
}

.oj-tabbar-vertical .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
.oj-tabbar-vertical .oj-tabbar-item.oj-active:not(.oj-selected) {
  background-color: var(--oj-tab-bar-item-bg-color-active);
  border-inline-start-color: var(--oj-tab-bar-item-border-color-active);
}

/*Start of common horizontal navigationtabs styles */
.oj-tabbar-horizontal .oj-tabbar-element {
  display: flex;
}

.oj-tabbar-horizontal.oj-tabbar-item-text-wrap .oj-tabbar-item {
  flex: 1 1 auto;
}

.oj-tabbar-horizontal.oj-condense .oj-tabbar-item {
  flex: 0 0 auto;
}

/* This is due to bug in IE 11 where setting flex-shrink:0 is needed to avoid truncation in item text which is needed for overflow feature. This work around breaks text-wrap functionality so enabling this only when no text wrap. We can remove this once IE 11 support dropped and can update docs saying text-wrap is supported with overflow. */
.oj-tabbar-horizontal .oj-tabbar-item {
  flex: 1 0 auto;
}

@media print, screen {
  .oj-tabbar-horizontal.oj-sm-condense .oj-tabbar-item {
    flex: 0 0 auto;
  }
  .oj-tabbar-horizontal.oj-sm-justify-content-center .oj-tabbar-element {
    justify-content: center;
  }
  .oj-tabbar-horizontal.oj-sm-justify-content-flex-end .oj-tabbar-element {
    justify-content: flex-end;
  }
}
@media print, screen and (min-width: 600px) {
  .oj-tabbar-horizontal.oj-md-condense .oj-tabbar-item {
    flex: 0 0 auto;
  }
  .oj-tabbar-horizontal.oj-md-justify-content-center .oj-tabbar-element {
    justify-content: center;
  }
  .oj-tabbar-horizontal.oj-md-justify-content-flex-end .oj-tabbar-element {
    justify-content: flex-end;
  }
}
@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-tabbar-horizontal.oj-lg-condense .oj-tabbar-item {
    flex: 0 0 auto;
  }
  .oj-tabbar-horizontal.oj-lg-justify-content-center .oj-tabbar-element {
    justify-content: center;
  }
  .oj-tabbar-horizontal.oj-lg-justify-content-flex-end .oj-tabbar-element {
    justify-content: flex-end;
  }
}
@media screen and (min-width: 1440px) {
  .oj-tabbar-horizontal.oj-xl-condense .oj-tabbar-item {
    flex: 0 0 auto;
  }
  .oj-tabbar-horizontal.oj-xl-justify-content-center .oj-tabbar-element {
    justify-content: center;
  }
  .oj-tabbar-horizontal.oj-xl-justify-content-flex-end .oj-tabbar-element {
    justify-content: flex-end;
  }
}
.oj-tabbar-horizontal .oj-tabbar-item-element {
  box-sizing: border-box;
  min-height: var(--oj-tab-bar-item-min-height);
  margin: var(--oj-tab-bar-item-margin);
}

.oj-tabbar-horizontal .oj-tabbar-item-label {
  align-self: center;
}

.oj-tabbar-horizontal .oj-tabbar-item-icon {
  margin: var(--oj-tab-bar-icon-margin);
}

/*End of common horizontal navigationtabs styles */
/*Start of  horizontal navigationtabs styles icons only*/
.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-child {
  margin-inline-start: 0;
}

.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {
  border-width: var(--oj-private-tab-bar-item-border-width-top) var(--oj-private-tab-bar-item-border-width-right) var(--oj-private-tab-bar-item-border-width-bottom) var(--oj-private-tab-bar-item-border-width-left);
  border-style: solid;
}

.oj-tabbar-horizontal-bottom.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {
  border-width: var(--oj-private-tab-bar-item-border-width-bottom) var(--oj-private-tab-bar-item-border-width-right) var(--oj-private-tab-bar-item-border-width-top) var(--oj-private-tab-bar-item-border-width-left);
}

/*End of  horizontal navigationtabs styles icons only*/
/*Start of  horizontal navigationtabs styles excluding icons only*/
.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  border-width: var(--oj-private-tab-bar-item-border-width-top) var(--oj-private-tab-bar-item-border-width-right) var(--oj-private-tab-bar-item-border-width-bottom) var(--oj-private-tab-bar-item-border-width-left);
  border-style: solid;
}

.oj-tabbar-horizontal-bottom.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  border-width: var(--oj-private-tab-bar-item-border-width-bottom) var(--oj-private-tab-bar-item-border-width-right) var(--oj-private-tab-bar-item-border-width-top) var(--oj-private-tab-bar-item-border-width-left);
}

.oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  border-style: none;
}

.oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-focus,
.oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover {
  border-width: 1px;
  border-style: dotted;
}

html:not([dir=rtl]) .oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected,
html:not([dir=rtl]) .oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected.oj-focus,
html:not([dir=rtl]) .oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected.oj-hover,
.oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected,
.oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected.oj-focus,
.oj-hicontrast .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected.oj-hover {
  border-width: 1px;
  border-style: solid;
}

.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item-content {
  justify-content: center;
  padding: var(--oj-tab-bar-item-padding);
  border-bottom: 0;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-item-content {
  padding: var(--oj-tab-bar-item-padding);
}

.oj-tabbar-horizontal:not(.oj-tabbar-stack-icon-label):not(.oj-tabbar-icon-only) .oj-tabbar-item-icon {
  align-self: center;
  margin-inline-end: var(--oj-tab-bar-icon-to-text-padding);
}

/*End of  horizontal navigationtabs styles excluding icons only*/
/*Start of  horizontal stacked icon label navigationtabs styles */
.oj-tabbar-horizontal.oj-tabbar-stack-icon-label .oj-tabbar-item-icon {
  margin-bottom: var(--oj-tab-bar-icon-to-text-padding);
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-divider {
  height: 2.714rem;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  padding-bottom: 2px;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label:not(.oj-tabbar-icon-only) .oj-tabbar-item-content {
  flex-direction: column;
}

/*End of  horizontal stacked icon label navigationtabs styles */
.oj-tabbar-horizontal .oj-tabbar-item-label {
  font-size: var(--oj-tab-bar-item-font-size);
  text-align: center;
}

.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item {
  border-radius: 0;
  border-inline-end-width: var(--oj-private-tab-bar-item-border-width-left);
  border-inline-start-width: 0;
  border-color: var(--oj-private-tab-bar-item-border-color);
}

.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected {
  border-inline-start-width: var(--oj-private-tab-bar-item-border-width-left);
}

html:not([dir=rtl]) .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item:first-of-type {
  border-left-width: var(--oj-private-tab-bar-item-border-width-left);
  border-top-left-radius: var(--oj-private-tab-bar-border-radius-top-left);
  border-bottom-left-radius: var(--oj-private-tab-bar-border-radius-bottom-left);
  margin-left: 0;
}

html[dir=rtl] .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item:first-of-type {
  border-right-width: var(--oj-private-tab-bar-item-border-width-left);
  border-top-right-radius: var(--oj-private-tab-bar-border-radius-top-right);
  border-bottom-right-radius: var(--oj-private-tab-bar-border-radius-bottom-right);
  margin-right: 0;
}

.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {
  border-radius: 0;
  border-color: var(--oj-private-tab-bar-item-border-color);
}

html:not([dir=rtl]) .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item,
html[dir=rtl] .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item {
  border-left-width: 1px;
  border-right-width: 1px;
}

html:not([dir=rtl]) .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected {
  border-left-width: 1px;
}

html[dir=rtl] .oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected {
  border-right-width: 1px;
}

html:not([dir=rtl]) .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected {
  border-left-width: var(--oj-private-tab-bar-item-border-width-left);
}

html[dir=rtl] .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected {
  border-right-width: var(--oj-private-tab-bar-item-border-width-left);
}

html:not([dir=rtl]) .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-of-type {
  border-top-left-radius: var(--oj-private-tab-bar-border-radius-top-left);
  border-bottom-left-radius: var(--oj-private-tab-bar-border-radius-bottom-left);
}

html[dir=rtl] .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-of-type {
  border-top-right-radius: var(--oj-private-tab-bar-border-radius-top-right);
  border-bottom-right-radius: var(--oj-private-tab-bar-border-radius-bottom-right);
}

.oj-hicontrast .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item:first-of-type {
  border-inline-start-width: 1px;
}

html:not([dir=rtl]) .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-tabbar-item-last-child,
html:not([dir=rtl]) .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-tabbar-item-last-child {
  border-top-right-radius: var(--oj-private-tab-bar-border-radius-top-right);
  border-bottom-right-radius: var(--oj-private-tab-bar-border-radius-bottom-right);
  margin-right: 0;
}

html[dir=rtl] .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-tabbar-item-last-child,
html[dir=rtl] .oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-tabbar-item-last-child {
  border-top-left-radius: var(--oj-private-tab-bar-border-radius-top-left);
  border-bottom-left-radius: var(--oj-private-tab-bar-border-radius-bottom-left);
}

.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-selected,
.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-selected {
  border-color: var(--oj-tab-bar-item-border-color-selected);
}

.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item.oj-hover:not(.oj-selected),
.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-hover:not(.oj-selected) {
  border-color: var(--oj-private-tab-bar-item-border-color-hover);
}

.oj-tabbar-horizontal .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
.oj-tabbar-horizontal .oj-tabbar-item.oj-active:not(.oj-selected) {
  background-color: var(--oj-tab-bar-item-bg-color-active);
}

.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-active.oj-hover:not(.oj-selected),
.oj-tabbar-horizontal:not(.oj-tabbar-icon-only) .oj-tabbar-item.oj-active:not(.oj-selected) {
  border-color: var(--oj-tab-bar-item-border-color-active);
}

.oj-tabbar-item.oj-selected .oj-tabbar-remove-icon:not(:hover) {
  color: var(--oj-tab-bar-item-label-color-selected);
}

.oj-tabbar-horizontal .oj-tabbar-item.oj-selected .oj-tabbar-remove-icon:hover,
.oj-tabbar-horizontal .oj-tabbar-item:not(.oj-selected) .oj-tabbar-remove-icon:hover {
  color: var(--oj-private-icon-color-hover);
  background-color: var(--oj-private-icon-bg-color-hover);
  border-color: var(--oj-private-icon-border-color-hover);
}

.oj-tabbar-vertical .oj-tabbar-item,
.oj-tabbar-vertical .oj-tabbar-item.oj-hover:not(.oj-selected),
.oj-tabbar-vertical .oj-tabbar-item.oj-selected,
:not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item,
:not(.oj-tabbar-icon-only).oj-tabbar-vertical .oj-tabbar-item.oj-hover:not(.oj-selected) {
  border-bottom-color: var(--oj-core-divider-color);
}

.oj-tabbar-has-icons .oj-tabbar-overflow-item-icon {
  display: block;
}

.oj-tabbar-overflow-item-icon {
  display: none;
  font-size: 24px;
}

/* Styling for the drag image */
.oj-tabbar-drag-image {
  background-color: transparent;
  position: fixed;
  top: 10000px;
  border: 1px solid transparent;
  overflow-x: initial;
  padding: 3px;
}

/* Styling for hiding the original item being dragged */
.oj-tabbar-drag-item {
  display: none;
}

/* Styling item that is draggable (no affordance) */
.oj-tabbar-item.oj-draggable {
  cursor: move;
}

/* Styling for the item that is being moved using drag */
.oj-tabbar-item.oj-drag {
  box-shadow: var(--oj-core-box-shadow-lg);
  border-top: 1px solid;
  border-bottom: 1px solid;
}

/* Styling all drop targets in the list */
.oj-tabbar .oj-tabbar-item.oj-drop,
.oj-tabbar .oj-tabbar-item.oj-drop.oj-active,
.oj-tabbar .oj-tabbar-item.oj-drop.oj-default,
.oj-tabbar .oj-tabbar-item.oj-drop.oj-disabled,
.oj-tabbar .oj-tabbar-item.oj-drop.oj-selected,
.oj-tabbar .oj-tabbar-item.oj-drop.oj-hover,
.oj-tabbar .oj-tabbar-item.oj-drop.oj-hover:not(.oj-selected) {
  box-sizing: border-box;
  border: 1px solid var(--oj-core-drag-drop-color-2);
  background-color: var(--oj-core-drag-drop-color-1);
}

/* Used when there are no items in tabbar */
.oj-tabbar-no-data-message {
  padding: var(--oj-core-spacing-2x);
  color: var(--oj-core-text-color-primary);
  min-height: var(--oj-typography-body-md-font-size);
}

/* Styling on the status text, such as fetching data */
.oj-tabbar-status-message {
  position: absolute;
  padding: var(--oj-core-spacing-2x);
  display: none;
}

.oj-tabbar-horizontal .oj-tabbar-status-message {
  padding: 0;
}

/* Styling for the activity indicator*/
.oj-tabbar-loading-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: auto;
}

.oj-tabbar-loading-icon:before {
  content: url("images/spinner_full.gif");
  transform: translate(-37.5%, -37.5%) scale(0.25);
}

.oj-tabbar-horizontal .oj-tabbar-loading-icon {
  width: 24px;
  height: 24px;
}

.oj-tabbar-horizontal .oj-tabbar-loading-icon:before {
  content: url("images/spinner_full.gif");
  transform: translate(-42.5%, -42.5%) scale(0.15);
}

/* Styling for an item that is cut during a context menu cut operation */
.oj-tabbar-cut {
  opacity: 0.8;
}

.oj-tabbar-remove-icon {
  border-radius: var(--oj-button-border-radius);
  height: var(--oj-button-lg-icon-size);
  width: var(--oj-button-lg-icon-size);
  line-height: var(--oj-button-lg-icon-size);
  align-self: center;
  margin-inline-start: 4px;
}

.oj-tabbar-remove-icon.oj-component-icon, .oj-tabbar-remove-icon.oj-popup-tail.oj-popup-tail-simple,
.oj-tabbar-remove-icon.oj-menucheckbox-icon {
  font-size: 1rem;
}

.oj-tabbar-hide-remove-icon .oj-tabbar-remove-icon {
  display: none;
}

/* Badge/Metadata/icons node */
.oj-tabbar-item-end {
  color: var(--oj-core-text-color-secondary);
}

.oj-tabbar-horizontal:not(.oj-tabbar-stack-icon-label):not(.oj-tabbar-icon-only) .oj-tabbar-item-end {
  margin-left: var(--oj-tab-bar-icon-to-text-padding);
  flex: 0 0 auto;
  order: 3;
  align-self: center;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label .oj-tabbar-item-end {
  order: 1;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label .oj-tabbar-item-label,
.oj-tabbar-vertical .oj-tabbar-item-end {
  order: 3;
}

.oj-tabbar-vertical-end.oj-tabbar-vertical .oj-tabbar-item-end {
  order: -3;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label .oj-tabbar-item-icon {
  order: 2;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label .oj-tabbar-item-content {
  overflow: visible;
}

.oj-tabbar-horizontal.oj-tabbar-stack-icon-label .oj-tabbar-item-end {
  position: relative;
  top: calc(50% - 1.45rem);
  line-height: 0;
  left: 0.5rem;
}

html[dir=rtl] .oj-tabbar-horizontal.oj-tabbar-stack-icon-label .oj-tabbar-item-end {
  right: 0.5rem;
}

.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item-content {
  position: relative;
  overflow: visible;
}

.oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item-end {
  position: absolute;
  top: calc(50% - 1rem);
  line-height: 0;
  left: 50%;
}

html[dir=rtl] .oj-tabbar-horizontal.oj-tabbar-icon-only .oj-tabbar-item-end {
  right: 50%;
}

.oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item-content {
  position: relative;
}

.oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item-end {
  position: absolute;
  top: 50%;
  transform: translate(0, calc(-50% - 0.5rem));
  line-height: 0;
  left: calc(50% + 0.5rem);
}

html[dir=rtl] .oj-tabbar-vertical.oj-tabbar-icon-only .oj-tabbar-item-end {
  right: calc(50% + 0.5rem);
}

.oj-tabbar-item.oj-disabled .oj-tabbar-item-end {
  color: var(--oj-core-text-color-disabled);
}

/* tab bar                    */
/* -------------------------- */
.oj-tabbar-vertical {
  --oj-private-tab-bar-item-border-width-bottom: 0px;
  --oj-private-tab-bar-item-border-width-left: 0.1875rem;
  --oj-tab-bar-item-padding: 0 1.3125rem;
  --oj-tab-bar-item-margin: 0;
}

.oj-tabbar-vertical.oj-tabbar-icon-only {
  --oj-tab-bar-item-padding: 0;
  --oj-private-tab-bar-item-border-width-bottom: 0;
  --oj-private-tab-bar-item-border-width-left: 0.1875rem;
  --oj-tab-bar-item-margin: 0;
  --oj-tab-bar-icon-margin: 0 1.5rem;
}

.oj-tabbar-stack-icon-label {
  --oj-tab-bar-icon-to-text-padding: 0.5rem;
  --oj-tab-bar-item-min-height: 5rem;
  --oj-tab-bar-item-padding: 1rem 1rem 0;
}

.oj-tabbar-horizontal.oj-tabbar-icon-only {
  --oj-tab-bar-icon-margin: 0rem 0.375rem;
}

.oj-contrast-marker,
.oj-color-invert {
  --oj-tab-bar-item-label-color-selected: var(--oj-core-text-color-primary);
  --oj-tab-bar-item-border-color-selected: var(--oj-core-text-color-primary);
  --oj-tab-bar-item-label-color: var(--oj-core-text-color-secondary);
  --oj-tab-bar-item-label-color-hover: var(--oj-core-text-color-primary);
  --oj-tab-bar-item-border-color-active: rgb(var(--oj-palette-brand-rgb-50));
}

oj-tag-cloud:not(.oj-complete) {
  visibility: hidden;
}

oj-tag-cloud {
  display: block;
}

.oj-tagcloud {
  color: var(--oj-core-text-color-primary);
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 448px;
}

:root {
  --oj-table-cell-padding-horizontal: 1rem;
  --oj-private-table-global-display-default: list;
  --oj-private-table-global-display-list-horizontal-grid-visible-default: enabled;
  --oj-private-table-global-add-animation: '[{"effect":"slideIn","direction":"bottom"},"fadeIn"]';
  --oj-private-table-global-remove-animation: '[{"effect":"slideOut","direction":"top"},"fadeOut"]';
  --oj-private-table-global-update-animation: '{"effect":"fadeIn"}';
  --oj-private-table-global-load-indicator-default: skeleton;
  --oj-private-table-global-enable-selector-default: true;
  --oj-private-table-global-sticky-default: true;
}

/* table */
/* --------------------------------------------------------------- */
oj-table:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the root component element. */
.oj-table {
  position: relative;
  z-index: 0;
  line-height: normal;
  font-size: inherit;
  min-width: 240px;
  min-height: calc(2 * var(--oj-collection-grid-row-height));
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Grid display styling for the root component element. */
.oj-table.oj-table-grid-display {
  border: 1px solid var(--oj-collection-border-color);
}

/* Styling for the root component element with warning. */
.oj-table.oj-warning {
  border: 1px solid var(--oj-core-warning-1);
}

/* Styling for the component div container element. */
.oj-table-container {
  background-color: var(--oj-current-bg-color, var(--oj-collection-bg-color));
  display: inline-block;
  vertical-align: top;
  clear: both;
  box-sizing: border-box;
  overflow: hidden;
}

.oj-table-scroller {
  background-color: inherit;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.oj-table-external-scroll.oj-table-container,
.oj-table-external-scroll .oj-table-scroller {
  overflow: visible;
}

.oj-table-stretch .oj-table-scroller {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.oj-table-scroll-vertical.oj-table-hide-vertical-scrollbar .oj-table-scroller,
.oj-table-hide-vertical-scrollbar .oj-table-scroller {
  overflow-y: hidden;
}

.oj-table-width-container {
  position: absolute;
  top: -1000px;
  left: -1000px;
  visibility: hidden;
}

/* Styling for HTML table element. */
table.oj-table-element {
  background-color: inherit;
  box-sizing: border-box;
  width: 100%;
  outline: none;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
}

.oj-table-sticky table.oj-table-element {
  border-collapse: separate;
}

/* Styling for no data container. */
.oj-table-no-data-container {
  width: 100%;
  height: 100%;
}

/* Styling for HTML table element when column resizing. */
table.oj-table-element.oj-table-column-header-resizing {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* Styling for the header element. */
.oj-table-header {
  background-color: #704b64;
  color: #ffffff;
  border-bottom: 1px solid var(--oj-collection-border-color);
  font-size: inherit;
  overflow: hidden;
}

/* Styling for the header element when table has vertical or horizontal scrollbars. */
.oj-table-legacy-scroll .oj-table-header {
  display: block;
  position: relative;
}

/* Grid display styling for the header element. */
.oj-table-grid-display .oj-table-header {
  background-color: var(--oj-collection-header-bg-color);
  border-bottom: 1px solid var(--oj-collection-border-color);
}

.oj-table-sticky .oj-table-header,
.oj-table-grid-display .oj-table-sticky .oj-table-header {
  border-bottom: none;
}

/* remove left and right borders on hover for grid display header */
.oj-table-grid-display .oj-table-column-header-cell.oj-hover {
  box-shadow: none;
}

/* Styling for the header row element. */
.oj-table-header-row {
  background-color: inherit;
  height: var(--oj-collection-list-row-height);
  font-size: inherit;
  vertical-align: middle;
}

/* Grid display table styling for the header and footer row elements. */
.oj-table-grid-display .oj-table-header-row,
.oj-table-grid-display .oj-table-column-header-cell,
.oj-table-grid-display .oj-table-column-header-selector-cell,
.oj-table-grid-display .oj-table-footer-row,
.oj-table-grid-display .oj-table-footer-cell,
.oj-table-grid-display .oj-table-footer-selector-cell {
  height: var(--oj-collection-grid-header-height);
}

/* Styling for the header row element when table is scrollable. */
.oj-table-legacy-scroll .oj-table-header-row {
  min-height: var(--oj-collection-list-row-height);
  height: auto;
  display: block;
  position: relative;
}

/* Grid display table styling for the header row element when table is scrollable. */
.oj-table-legacy-scroll.oj-table-grid-display .oj-table-header-row,
.oj-table-legacy-scroll.oj-table-grid-display .oj-table-footer-row {
  min-height: var(--oj-collection-grid-header-height);
}

/* Styling for the column header elements. */
.oj-table-column-header-cell {
  background-color: inherit;
  font-size: var(--oj-collection-header-font-size);
  font-weight: var(--oj-collection-header-font-weight);
  padding-top: var(--oj-collection-grid-cell-padding);
  padding-bottom: var(--oj-collection-grid-cell-padding);
  height: var(--oj-collection-list-row-height);
  vertical-align: middle;
  float: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: start;
  box-sizing: border-box;
}

.oj-table-column-header-cell,
.oj-table-data-cell,
.oj-table-footer-cell {
  padding-inline-start: calc(var(--oj-table-cell-padding-horizontal) + 1px);
  padding-inline-end: var(--oj-table-cell-padding-horizontal);
}

.oj-table-column-header-cell:first-child,
.oj-table-data-cell:first-child,
.oj-table-footer-cell:first-child {
  padding-inline-start: var(--oj-table-cell-padding-horizontal);
}

.oj-table-grid-display .oj-table-column-header-cell,
.oj-table-grid-display .oj-table-data-cell,
.oj-table-grid-display .oj-table-footer-cell {
  padding-inline-start: calc(var(--oj-collection-grid-cell-padding) + 1px);
  padding-inline-end: var(--oj-collection-grid-cell-padding);
}

.oj-table-grid-display .oj-table-column-header-cell:first-child,
.oj-table-grid-display .oj-table-data-cell:first-child,
.oj-table-grid-display .oj-table-footer-cell:first-child {
  padding-inline-start: var(--oj-collection-grid-cell-padding);
}

/* Styling for the vertical grid lines for header, data, and footer cells. */
.oj-table-column-header-cell.oj-table-vgrid-lines:not(.oj-table-frozen-end.oj-table-frozen-edge):not(:first-child):not(.oj-helper-hidden-accessible),
.oj-table-data-cell.oj-table-vgrid-lines:not(.oj-table-frozen-end.oj-table-frozen-edge):not(:first-child):not(.oj-helper-hidden-accessible),
.oj-table-footer-cell.oj-table-vgrid-lines:not(.oj-table-frozen-end.oj-table-frozen-edge):not(:first-child):not(.oj-helper-hidden-accessible) {
  border-inline-start-style: solid;
  border-inline-start-color: var(--oj-core-divider-color);
  border-inline-start-width: 1px;
}

/* selection borders for column selection */
.oj-table-column-header-cell.oj-selected:not(:first-child),
.oj-table-column-header-cell.oj-selected + .oj-table-column-header-cell,
.oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child),
.oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell,
.oj-table-add-row-placeholder > td.oj-selected:not(:first-child),
.oj-table-add-row-placeholder > td.oj-selected + td,
.oj-table-footer-cell.oj-selected:not(:first-child),
.oj-table-footer-cell.oj-selected + .oj-table-footer-cell {
  border-inline-start-style: solid;
  border-inline-start-color: var(--oj-core-border-color-selected);
  border-inline-start-width: 1px;
}

.oj-table-column-header-cell.oj-table-vgrid-lines:not(.oj-table-frozen-end.oj-table-frozen-edge),
.oj-table-data-cell.oj-table-vgrid-lines:not(.oj-table-frozen-end.oj-table-frozen-edge),
.oj-table-footer-cell.oj-table-vgrid-lines:not(.oj-table-frozen-end.oj-table-frozen-edge),
.oj-table-column-header-cell.oj-selected:not(:first-child),
.oj-table-column-header-cell.oj-selected + .oj-table-column-header-cell,
.oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child),
.oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell,
.oj-table-footer-cell.oj-selected:not(:first-child),
.oj-table-footer-cell.oj-selected + .oj-table-footer-cell {
  padding-inline-start: var(--oj-table-cell-padding-horizontal);
}

.oj-table-grid-display .oj-table-column-header-cell.oj-table-vgrid-lines:not(.oj-table-frozen-end.oj-table-frozen-edge),
.oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines:not(.oj-table-frozen-end.oj-table-frozen-edge),
.oj-table-grid-display .oj-table-footer-cell.oj-table-vgrid-lines:not(.oj-table-frozen-end.oj-table-frozen-edge),
.oj-table-grid-display .oj-table-column-header-cell.oj-selected:not(:first-child),
.oj-table-grid-display .oj-table-column-header-cell.oj-selected + .oj-table-column-header-cell,
.oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child),
.oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell,
.oj-table-grid-display .oj-table-footer-cell.oj-selected:not(:first-child),
.oj-table-grid-display .oj-table-footer-cell.oj-selected + .oj-table-footer-cell {
  padding-inline-start: var(--oj-collection-grid-cell-padding);
}

/* Edit row styling for data cell elements. */
/* A helper class oj-table-data-cell-padding should be applied to editable components that should maintain padding in edit mode*/
.oj-table-body-row-edit .oj-table-data-cell:not(.oj-read-only):not(.oj-table-data-cell-padding),
.oj-table-data-cell.oj-table-data-cell-no-padding {
  padding: 0 !important;
}

.oj-table-data-cell {
  padding-top: calc(var(--oj-collection-list-cell-padding-vertical) + 1px);
  padding-bottom: var(--oj-collection-list-cell-padding-vertical);
}

.oj-table-sticky:not(.oj-table-horizontal-grid) .oj-table-body-row:last-child > .oj-table-data-cell {
  padding-bottom: calc(var(--oj-collection-list-cell-padding-vertical) + 1px);
}

.oj-table-sticky:not(.oj-table-multiple-row-selection) .oj-table-body-row.oj-selected:last-child > .oj-table-data-cell.oj-selected {
  padding-bottom: var(--oj-collection-list-cell-padding-vertical);
}

.oj-table-grid-display .oj-table-data-cell {
  padding-top: calc(var(--oj-collection-grid-cell-padding) + 1px);
  padding-bottom: var(--oj-collection-grid-cell-padding);
}

.oj-table-sticky.oj-table-grid-display:not(.oj-table-horizontal-grid) .oj-table-body-row:last-child > .oj-table-data-cell {
  padding-bottom: calc(var(--oj-collection-grid-cell-padding) + 1px);
}

.oj-table-sticky.oj-table-grid-display:not(.oj-table-multiple-row-selection) .oj-table-body-row.oj-selected:last-child > .oj-table-data-cell.oj-selected {
  padding-bottom: var(--oj-collection-grid-cell-padding);
}

.oj-table-horizontal-grid:not(.oj-table-sticky) .oj-table-body-row:not(:first-child),
.oj-table-sticky.oj-table-horizontal-grid:not(.oj-table-add-row) .oj-table-body-row:not(:first-child) > .oj-table-data-cell,
.oj-table-sticky.oj-table-horizontal-grid:not(.oj-table-add-row) .oj-table-body-row:not(:first-child) > .oj-table-selector-cell,
.oj-table-sticky.oj-table-horizontal-grid:not(.oj-table-add-row) .oj-table-body-row:not(:first-child) > .oj-table-skeleton-cell,
.oj-table-sticky.oj-table-horizontal-grid.oj-table-add-row .oj-table-body-row:not(:nth-child(2)) > .oj-table-data-cell,
.oj-table-sticky.oj-table-horizontal-grid.oj-table-add-row .oj-table-body-row:not(:nth-child(2)) > .oj-table-selector-cell,
.oj-table-sticky.oj-table-horizontal-grid.oj-table-add-row .oj-table-body-row:not(:nth-child(2)) > .oj-table-skeleton-cell,
.oj-table-sticky.oj-table-horizontal-grid .oj-table-fetch-skeleton-row:not(:first-child) > .oj-table-skeleton-cell {
  border-top: 1px solid var(--oj-core-divider-color);
}

.oj-table-sticky.oj-table-horizontal-grid .oj-table-body-row:last-child > .oj-table-data-cell,
.oj-table-sticky.oj-table-horizontal-grid .oj-table-body-row:last-child > .oj-table-selector-cell {
  border-bottom: 1px solid var(--oj-core-divider-color);
}

/* selection borders for row selection */
.oj-table-sticky:not(.oj-table-multiple-row-selection) .oj-table-body-row.oj-selected:not(:first-child) > .oj-table-data-cell.oj-selected,
.oj-table-sticky:not(.oj-table-multiple-row-selection) .oj-table-body-row.oj-selected + .oj-table-body-row > .oj-table-data-cell {
  border-top: 1px solid var(--oj-core-border-color-selected);
}

.oj-table-sticky.oj-table-add-row:not(.oj-table-multiple-row-selection) .oj-table-body-row.oj-selected:nth-child(2) > .oj-table-data-cell.oj-selected {
  border-top: none;
}

.oj-table-sticky:not(.oj-table-multiple-row-selection) .oj-table-body-row.oj-selected:last-child > .oj-table-data-cell.oj-selected {
  border-bottom: 1px solid var(--oj-core-border-color-selected);
}

.oj-table-horizontal-grid .oj-table-data-cell,
.oj-table:not(.oj-table-multiple-row-selection) .oj-table-body-row.oj-selected:not(:first-child) > .oj-table-data-cell.oj-selected,
.oj-table:not(.oj-table-multiple-row-selection) .oj-table-body-row.oj-selected + .oj-table-body-row > .oj-table-data-cell,
.oj-table-body-row:first-child > .oj-table-data-cell,
.oj-table-add-row .oj-table-body-row:nth-child(2) > .oj-table-data-cell,
.oj-table.oj-table-add-row:not(.oj-table-multiple-selection) .oj-table-body-row.oj-selected:not(:nth-child(2)) > .oj-table-data-cell.oj-selected {
  padding-top: var(--oj-collection-list-cell-padding-vertical);
}

.oj-table-grid-display.oj-table-horizontal-grid .oj-table-data-cell,
.oj-table.oj-table-grid-display:not(.oj-table-multiple-row-selection) .oj-table-body-row.oj-selected:not(:first-child) > .oj-table-data-cell.oj-selected,
.oj-table.oj-table-grid-display:not(.oj-table-multiple-row-selection) .oj-table-body-row.oj-selected + .oj-table-body-row > .oj-table-data-cell,
.oj-table-grid-display .oj-table-body-row:first-child > .oj-table-data-cell,
.oj-table-grid-display.oj-table-add-row .oj-table-body-row:nth-child(2) > .oj-table-data-cell,
.oj-table.oj-table-grid-display.ojtable-add-row:not(.oj-table-multiple-row-selection) .oj-table-body-row.oj-selected:not(:nth-child(2)) > .oj-table-data-cell.oj-selected {
  padding-top: var(--oj-collection-grid-cell-padding);
}

.oj-table-sticky .oj-table-column-header-cell:not(.oj-helper-hidden-accessible),
.oj-table-sticky .oj-table-column-header-selector-cell:not(.oj-helper-hidden-accessible) {
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--oj-collection-border-color);
}

/* padding end for the column header cell that has an icon */
.oj-table-column-header-cell.oj-table-sort {
  padding-inline-end: 0.5rem;
}

/* Styling for the table default selector cell */
.oj-table-column-header-selector-cell,
.oj-table-selector-cell {
  background-color: inherit;
  width: 2.75rem;
  text-align: center;
  padding: 0px;
}

.oj-table-data-cell.oj-table-frozen-start,
.oj-table-frozen-start {
  position: sticky;
}

html:not([dir=rtl]) .oj-table-data-cell.oj-table-frozen-start,
html:not([dir=rtl]) .oj-table-frozen-start {
  left: 0;
}

html[dir=rtl] .oj-table-data-cell.oj-table-frozen-start,
html[dir=rtl] .oj-table-frozen-start {
  right: 0;
}

html:not([dir=rtl]) .oj-table-frozen-start.oj-table-frozen-edge {
  box-shadow: 2px 0px 0px var(--oj-collection-border-color);
}

html[dir=rtl] .oj-table-frozen-start.oj-table-frozen-edge {
  box-shadow: -2px 0px 0px var(--oj-collection-border-color);
}

.oj-table-data-cell.oj-table-frozen-end,
.oj-table-frozen-end {
  position: sticky;
}

html:not([dir=rtl]) .oj-table-data-cell.oj-table-frozen-end,
html:not([dir=rtl]) .oj-table-frozen-end {
  right: 0;
}

html[dir=rtl] .oj-table-data-cell.oj-table-frozen-end,
html[dir=rtl] .oj-table-frozen-end {
  left: 0;
}

html:not([dir=rtl]) .oj-table-frozen-end.oj-table-frozen-edge {
  box-shadow: -2px 0px 0px var(--oj-collection-border-color);
}

html[dir=rtl] .oj-table-frozen-end.oj-table-frozen-edge {
  box-shadow: 2px 0px 0px var(--oj-collection-border-color);
}

.oj-table-sticky .oj-table-column-header-cell.oj-table-frozen-start,
.oj-table-sticky .oj-table-column-header-selector-cell.oj-table-frozen-start {
  z-index: 10;
}

.oj-table-sticky .oj-table-column-header-cell {
  z-index: 9;
}

.oj-table-sticky .oj-table-column-header-cell.oj-table-frozen-end {
  z-index: 11;
}

.oj-table-sticky .oj-table-add-row-placeholder td.oj-table-frozen-start {
  z-index: 4;
}

.oj-table-sticky .oj-table-add-row-placeholder td {
  z-index: 3;
}

.oj-table-sticky .oj-table-add-row-placeholder td.oj-table-frozen-end {
  z-index: 5;
}

.oj-table-sticky .oj-table-data-cell.oj-table-frozen-start,
.oj-table-sticky .oj-table-selector-cell.oj-table-frozen-start {
  z-index: 1;
}

.oj-table-sticky .oj-table-data-cell.oj-table-frozen-end {
  z-index: 2;
}

.oj-table-sticky .oj-table-footer-cell.oj-table-frozen-start,
.oj-table-sticky .oj-table-footer-selector-cell.oj-table-frozen-start {
  z-index: 7;
}

.oj-table-sticky .oj-table-footer-cell {
  z-index: 6;
}

.oj-table-sticky .oj-table-footer-cell.oj-table-frozen-end {
  z-index: 8;
}

.oj-table-body-row .oj-selector,
.oj-table-body-row .oj-selector .oj-selector-wrapper .oj-selectorbox {
  max-height: var(--oj-collection-list-row-height);
}

.oj-table-grid-display .oj-table-body-row .oj-selector,
.oj-table-grid-display .oj-table-body-row .oj-selector .oj-selector-wrapper .oj-selectorbox {
  max-height: calc(var(--oj-collection-grid-row-height) - 1px);
}

/* Style selector header padding to match the other cells heightwise */
.oj-table-column-header-selector-cell {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Styling for the column header elements in selected state when table focused. */
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-column-header-cell.oj-selected,
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-footer-cell.oj-selected,
.oj-table:not(.oj-focus) .oj-table-column-header-cell.oj-selected,
.oj-table:not(.oj-focus) .oj-table-footer-cell.oj-selected {
  background-image: linear-gradient(var(--oj-collection-header-bg-color-selected), var(--oj-collection-header-bg-color-selected));
}

/* Styling for the column header element in hover state. */
.oj-table-column-header-cell.oj-hover {
  background-image: linear-gradient(var(--oj-collection-header-bg-color-hover), var(--oj-collection-header-bg-color-hover));
  box-shadow: var(--oj-collection-border-color) 1px 0px 0px inset, var(--oj-collection-border-color) -1px 0px 0px inset;
}

/* Styling for the column header element in focused state. */
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-column-header-cell.oj-focus-highlight,
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-column-header-selector-cell.oj-focus-highlight,
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-footer-cell.oj-focus-highlight,
.oj-table-element:not(.oj-table-column-header-resizing) .oj-table-footer-selector-cell.oj-focus-highlight {
  outline-offset: -1px;
  outline: dotted 1px var(--oj-core-focus-border-color);
}

/* Styling header that is draggable. */
.oj-table-column-header-cell.oj-draggable {
  cursor: grab;
}

.oj-table-column-header-cell.oj-draggable:active {
  cursor: grabbing;
}

/* Styling for the column header drag image. */
.oj-table-column-header-cell-drag-image {
  opacity: 0.95;
  background-color: var(--oj-collection-header-bg-color);
  border: 1px solid var(--oj-core-divider-color);
  box-shadow: var(--oj-core-box-shadow-lg);
  border-radius: 6px;
  cursor: grabbing;
}

/* Styling for the column header drag indicator after a column. */
.oj-table-column-header-cell.oj-table-column-header-drag-indicator-after,
.oj-table-data-cell.oj-table-column-header-drag-indicator-after,
.oj-table-footer-cell.oj-table-column-header-drag-indicator-after,
.oj-table-add-row-placeholder td.oj-table-column-header-drag-indicator-after,
.oj-table-column-header-cell.oj-table-column-resize-indicator,
.oj-table-data-cell.oj-table-column-resize-indicator {
  border-inline-end-style: solid;
  border-inline-end-color: var(--oj-core-drag-drop-line-color);
  border-inline-end-width: 2px;
}

/* Styling for the column header drag indicator before a column. */
.oj-table-column-header-cell.oj-table-column-header-drag-indicator-before,
.oj-table-data-cell.oj-table-column-header-drag-indicator-before,
.oj-table-footer-cell.oj-table-column-header-drag-indicator-before,
.oj-table-add-row-placeholder td.oj-table-column-header-drag-indicator-before {
  border-inline-start-style: solid;
  border-inline-start-color: var(--oj-core-drag-drop-line-color);
  border-inline-start-width: 2px;
}

/* Styling for the column header element. */
.oj-table-column-header {
  position: relative;
  float: none;
  text-overflow: inherit;
  overflow: inherit;
  white-space: normal;
  display: inline-flex;
  align-items: center;
}

/* Styling for the column header text. */
.oj-table-column-header-text {
  display: -webkit-box;
  height: inherit;
  overflow: inherit;
  text-overflow: inherit;
  vertical-align: middle;
  -webkit-line-clamp: 3;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

.oj-table-show-required .oj-table-column-header-text {
  margin-inline-end: 1.125rem;
}

/* Styling for the sort area around the icon */
.oj-table-sort-icon-container {
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--oj-core-touch-target-min-size);
  width: var(--oj-core-touch-target-min-size);
  min-width: var(--oj-core-touch-target-min-size);
  vertical-align: middle;
  border-radius: var(--oj-button-border-radius);
  position: relative;
  top: 0;
  margin-inline-start: 4px;
}

html:not([dir=rtl]) .oj-table-sort-icon-container {
  right: 0;
}

html[dir=rtl] .oj-table-sort-icon-container {
  left: 0;
}

/* Styling for both the sort icons and click area */
.oj-table-sort-icon-container .oj-table-column-header-asc-icon,
.oj-table-sort-icon-container .oj-table-column-header-dsc-icon,
.oj-table-sort-icon-container .oj-table-column-header-default-sort-icon {
  flex: 0 1 auto;
  font-size: inherit;
}

/* Styling for the sort icon container in hover state*/
.oj-table-sort-icon-container.oj-hover {
  color: var(--oj-private-icon-color-hover);
  background-color: var(--oj-private-icon-bg-color-hover);
  border-color: var(--oj-private-icon-border-color-hover);
}

/* Styling for the sort icon container in active state*/
.oj-table-sort-icon-container.oj-active {
  color: var(--oj-private-icon-color-active);
  background-color: var(--oj-private-icon-bg-color-active);
  border-color: var(--oj-private-icon-border-color-active);
}

/* Styling for disabled sort icons */
.oj-table-column-header-default-sort-icon.oj-disabled {
  display: var(--oj-collection-default-sort-icon-display);
}

.oj-table-sort-icon-container .oj-table-column-header-default-sort-icon.oj-disabled {
  color: inherit;
}

/* Styling for the column header resize indicator. */
.oj-table-column-header-resize-indicator {
  position: absolute;
  top: 0;
  width: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  border-style: solid;
  border-color: var(--oj-collection-header-bg-color-selected);
  pointer-events: none;
}

/* Styling for the data body element. */
.oj-table-body {
  background-color: inherit;
  font-size: inherit;
  overflow: hidden;
}

/* Styling for the table body element when table is scrollable. */
.oj-table-legacy-scroll .oj-table-body {
  display: block;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

/* Styling for the table body element when table has vertical scrollbars. */
/* Firefox does not work correctly with overflow:auto, so we need to set scroll explicitly */
.oj-table-scroll-vertical:not(.oj-table-sticky) .oj-table-body,
.oj-table-scroll-vertical .oj-table-scroller {
  overflow-y: scroll;
}

/* Styling for the table body element when table has horizontal scrollbars. */
/* Firefox does not work correctly with overflow:auto, so we need to set scroll explicitly */
.oj-table-scroll-horizontal:not(.oj-table-sticky) .oj-table-body,
.oj-table-scroll-horizontal .oj-table-scroller {
  overflow-x: scroll;
}

/* Grid display styling for the data body element. */
.oj-table-grid-display .oj-table-body {
  background-color: var(--oj-collection-bg-color);
}

/* Styling for the table body row elements. */
.oj-table-body-row,
.oj-table-add-row-placeholder {
  background-color: inherit;
  height: var(--oj-collection-list-row-height);
  font-size: inherit;
}

.oj-table-add-row-placeholder td {
  padding: 0px;
  background-color: inherit;
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--oj-collection-border-color);
}

.oj-table-body-scroll-buffer {
  background-color: inherit;
  height: 0px;
}

.oj-table-legacy-width-buffer {
  visibility: collapse;
  height: 0px;
}

.oj-table-legacy-width-buffer-cell {
  height: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.oj-table-legacy-sizer {
  visibility: hidden;
  position: relative;
  top: 0px;
  left: 0px;
  height: 0px;
  width: 0px;
}

.oj-table:not(.oj-table-add-row) .oj-table-body-row:first-child,
.oj-table.oj-table-add-row .oj-table-body-row:nth-child(2) {
  height: calc(var(--oj-collection-list-row-height) - 1px);
}

.oj-table-sticky .oj-table-body-row:last-child,
.oj-table-sticky .oj-table-body-row:last-child > .oj-table-data-cell {
  height: calc(var(--oj-collection-list-row-height) + 1px);
}

/* Grid display table styling for the data row elements. */
.oj-table-grid-display .oj-table-body-row,
.oj-table-grid-display .oj-table-add-row-placeholder {
  height: var(--oj-collection-grid-row-height);
}

.oj-table-grid-display:not(.oj-table-add-row) .oj-table-body-row:first-child,
.oj-table-grid-display.oj-table-add-row .oj-table-body-row:nth-child(2) {
  height: calc(var(--oj-collection-grid-row-height) - 1px);
}

.oj-table-sticky.oj-table-grid-display .oj-table-body-row:last-child,
.oj-table-sticky.oj-table-grid-display .oj-table-body-row:last-child > .oj-table-data-cell {
  height: calc(var(--oj-collection-grid-row-height) + 1px);
}

/* Styling for the data row elements in focus state. */
.oj-table:not(.oj-table-sticky) .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-row.oj-focus-highlight:not(.oj-table-body-row-edit),
.oj-table:not(.oj-table-sticky) .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-message-row.oj-focus-highlight,
.oj-table:not(.oj-table-sticky) .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-no-data-row.oj-focus-highlight {
  outline-offset: -1px;
  outline: dotted 1px var(--oj-core-focus-border-color);
}

/* Styling for the data row elements in focus state. */
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-row.oj-focus-highlight:not(.oj-table-body-row-edit) .oj-table-data-cell::after,
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-row.oj-focus-highlight:not(.oj-table-body-row-edit) .oj-table-selector-cell::after,
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-add-row-placeholder.oj-focus-highlight:not(.oj-table-placeholder-row-edit) td::after,
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-message-row.oj-focus-highlight td::after,
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-no-data-row.oj-focus-highlight td::after {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  pointer-events: none;
  border-top: 1px dotted var(--oj-core-focus-border-color);
  border-bottom: 1px dotted var(--oj-core-focus-border-color);
}

.oj-table-sticky.oj-table-horizontal-grid .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-row.oj-focus-highlight:not(.oj-table-body-row-edit) .oj-table-data-cell::after,
.oj-table-sticky.oj-table-horizontal-grid .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-row.oj-focus-highlight:not(.oj-table-body-row-edit) .oj-table-selector-cell::after,
.oj-table-sticky.oj-table-horizontal-grid .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-add-row-placeholder.oj-focus-highlight:not(.oj-table-placeholder-row-edit) td::after,
.oj-table-sticky.oj-table-horizontal-grid .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-message-row.oj-focus-highlight td::after,
.oj-table-sticky.oj-table-horizontal-grid .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-no-data-row.oj-focus-highlight td::after {
  bottom: 1px;
}

/* Styling for the data row elements in focus state. */
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-row.oj-focus-highlight:not(.oj-table-body-row-edit) .oj-table-data-cell:first-child::after,
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-row.oj-focus-highlight:not(.oj-table-body-row-edit) .oj-table-selector-cell:first-child::after,
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-add-row-placeholder.oj-focus-highlight:not(.oj-table-placeholder-row-edit) td:first-child::after,
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-message-row.oj-focus-highlight td:first-child::after,
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-no-data-row.oj-focus-highlight td:first-child::after {
  border-inline-start-style: dotted;
  border-inline-start-color: var(--oj-core-focus-border-color);
  border-inline-start-width: 1px;
}

/* Styling for the data row elements in focus state. */
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-row.oj-focus-highlight:not(.oj-table-body-row-edit) .oj-table-data-cell:last-child::after,
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-row.oj-focus-highlight:not(.oj-table-body-row-edit) .oj-table-selector-cell:last-child::after,
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-add-row-placeholder.oj-focus-highlight:not(.oj-table-placeholder-row-edit) td:last-child::after,
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-message-row.oj-focus-highlight td:last-child::after,
.oj-table-sticky .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-no-data-row.oj-focus-highlight td:last-child::after {
  border-inline-end-style: dotted;
  border-inline-end-color: var(--oj-core-focus-border-color);
  border-inline-end-width: 1px;
}

/* Styling row that is draggable. */
.oj-table-body-row.oj-draggable {
  cursor: grab;
}

.oj-table-body-row.oj-draggable:active {
  cursor: grabbing;
}

.oj-table-container-drag-image {
  background-color: transparent !important;
  border-color: transparent !important;
  position: absolute;
  top: -10000px;
}

/* Styling for drag image of row. */
.oj-table-body-row-drag-image {
  opacity: 0.95;
  background-color: var(--oj-collection-bg-color);
  border: 1px solid var(--oj-core-divider-color);
  box-shadow: var(--oj-core-box-shadow-md);
  border-radius: 6px;
  cursor: grabbing;
}

html:not([dir=rtl]) .oj-table-body-row-drag-image td:first-child {
  border-radius: 6px 0 0 6px;
}

html[dir=rtl] .oj-table-body-row-drag-image td:first-child {
  border-radius: 0 6px 6px 0;
}

html:not([dir=rtl]) .oj-table-body-row-drag-image td:last-child {
  border-radius: 0 6px 6px 0;
}

html[dir=rtl] .oj-table-body-row-drag-image td:last-child {
  border-radius: 6px 0 0 6px;
}

/* Styling for drag source when dnd with other component */
.oj-table-drag-source-opaque {
  opacity: 0.3;
}

/* Styling for drag source when dnd within component */
.oj-table-row-drag-source-hide {
  display: none;
}

/* Styling for drop target when target table is empty. */
.oj-table-drop-target-empty .oj-table-body-row-drag-indicator {
  background-color: var(--oj-core-drag-drop-color-1);
}

/* Styling for the data row drag indicator. */
.oj-table-body-row-drag-indicator {
  height: var(--oj-collection-grid-row-height);
}

/* Styling for drop target when dnd with other component */
.oj-table-body-row-drop-target {
  width: 100%;
  height: 2px;
  background-color: var(--oj-core-drag-drop-line-color);
}

.oj-table-column-drop-indicator {
  position: absolute;
  top: 0;
  width: 0;
  border-inline-start-style: solid;
  border-inline-start-color: var(--oj-core-drag-drop-line-color);
  border-inline-start-width: 2px;
  z-index: 12;
}

/* Styling for the data cell elements. */
.oj-table-data-cell {
  background-color: inherit;
  font-size: inherit;
  font-weight: normal;
  min-width: var(--oj-typography-body-md-font-size);
  min-height: var(--oj-typography-body-md-font-size);
  height: var(--oj-collection-list-row-height);
  float: none;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  position: relative;
}

.oj-table:not(.oj-table-add-row) .oj-table-body-row:first-child > .oj-table-data-cell,
.oj-table.oj-table-add-row .oj-table-body-row:nth-child(2) > .oj-table-data-cell {
  height: calc(var(--oj-collection-list-row-height) - 1px);
}

/* Grid display table styling for the data cell elements. */
.oj-table-grid-display .oj-table-data-cell {
  height: var(--oj-collection-grid-row-height);
}

.oj-table-grid-display:not(.oj-table-add-row) .oj-table-body-row:first-child > .oj-table-data-cell,
.oj-table-grid-display.oj-table-add-row .oj-table-body-row:nth-child(2) > .oj-table-data-cell {
  height: calc(var(--oj-collection-grid-row-height) - 1px);
}

/* Edit row styling for data cell elements. */
.oj-table-data-cell.oj-table-data-cell-edit {
  outline: 1px solid var(--oj-collection-editable-cell-border-color-focus);
  outline-offset: -1px;
}

/* Styling on read only table cells, oj-readOnly must be applied by the application */
.oj-table-data-cell.oj-read-only {
  background-image: linear-gradient(var(--oj-collection-editable-cell-bg-color-read-only), var(--oj-collection-editable-cell-bg-color-read-only));
}

/* Styling for the data cell elements in selected state when table focused. */
/* Styling for the data cell elements in selected state when table in high contrast mode. */
.oj-hicontrast .oj-table-data-cell.oj-selected,
.oj-hicontrast .oj-table-selector-cell.oj-selected {
  border: 3px double;
}

/* Styling for the data cell elements in hover state. */
.oj-table-data-cell.oj-hover,
.oj-table-selector-cell.oj-hover {
  background-image: linear-gradient(var(--oj-core-bg-color-hover), var(--oj-core-bg-color-hover));
}

/* Styling on form controls stamped inside a table */
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html:not([dir=rtl]) .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input {
  padding: 0 var(--oj-table-cell-padding-horizontal) 0 calc(var(--oj-table-cell-padding-horizontal) + 1px);
}

html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html[dir=rtl] .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input {
  padding: 0 calc(var(--oj-table-cell-padding-horizontal) + 1px) 0 var(--oj-table-cell-padding-horizontal);
}

/* Styling on form controls stamped inside a table */
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html:not([dir=rtl]) .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html:not([dir=rtl]) .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input {
  padding: 0 var(--oj-table-cell-padding-horizontal) 0 var(--oj-table-cell-padding-horizontal);
}

html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html[dir=rtl] .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html[dir=rtl] .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input {
  padding: 0 var(--oj-table-cell-padding-horizontal) 0 var(--oj-table-cell-padding-horizontal);
}

/* Styling on form controls stamped inside a table */
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input {
  padding: 0 var(--oj-collection-grid-cell-padding) 0 calc(var(--oj-collection-grid-cell-padding) + 1px);
}

html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input {
  padding: 0 calc(var(--oj-collection-grid-cell-padding) + 1px) 0 var(--oj-collection-grid-cell-padding);
}

/* Styling on form controls stamped inside a table */
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html:not([dir=rtl]) .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input {
  padding: 0 var(--oj-collection-grid-cell-padding) 0 var(--oj-collection-grid-cell-padding);
}

html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html[dir=rtl] .oj-table-grid-display .oj-table-data-cell.oj-table-vgrid-lines.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected:not(:first-child).oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-input,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputtext-nocomp,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-input,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputpassword-nocomp,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-input,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-textarea-nocomp,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputnumber-input,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select-select,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choice,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-select .oj-select-choices,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choice,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-combobox .oj-combobox-choices,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-searchselect-input,
html[dir=rtl] .oj-table-grid-display .oj-table-body-row:not(.oj-selected) > .oj-table-data-cell.oj-selected + .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input {
  padding: 0 var(--oj-collection-grid-cell-padding) 0 var(--oj-collection-grid-cell-padding);
}

.oj-table-data-cell .oj-checkboxset .oj-checkbox-label {
  justify-content: flex-end;
}

/* Styling for the footer. */
.oj-table-footer {
  background-color: inherit;
  font-size: inherit;
  overflow: hidden;
}

/* Styling for the footer when table has vertical or horizontal scrollbars. */
.oj-table-legacy-scroll .oj-table-footer {
  display: block;
  position: relative;
}

/* Grid display styling for the footer. */
.oj-table-grid-display .oj-table-footer {
  background-color: var(--oj-collection-header-bg-color);
  border-top: 1px solid var(--oj-collection-border-color);
}

/* Styling for the footer row. */
.oj-table-footer-row {
  background-color: inherit;
  height: var(--oj-collection-list-row-height);
  font-size: inherit;
}

/* Styling for the footer row when table is scrollable. */
.oj-table-legacy-scroll .oj-table-footer-row {
  min-height: var(--oj-collection-list-row-height);
  height: auto;
  display: block;
  position: relative;
}

/* Styling for the footer cells. */
.oj-table-footer-cell,
.oj-table-footer-selector-cell {
  background-color: inherit;
  float: none;
  height: var(--oj-collection-list-row-height);
  padding-top: var(--oj-collection-list-cell-padding-vertical);
  padding-bottom: var(--oj-collection-list-cell-padding-vertical);
  font-size: inherit;
  box-sizing: border-box;
}

.oj-table-sticky .oj-table-footer-cell,
.oj-table-sticky .oj-table-footer-selector-cell {
  position: sticky;
  bottom: 0;
  border-top: 1px solid var(--oj-collection-border-color);
}

/* Styling for the inline message. */
.oj-table-inline-message {
  padding: 10px;
  position: absolute;
}

/* Styling for the inline message with warning. */
.oj-table-inline-message.oj-warning {
  background-color: var(--oj-private-message-component-inline-bg-color-warning);
  border: 1px solid var(--oj-private-message-component-inline-border-color-warning);
  border-top-width: 0;
}

/* Styling for the status message. */
.oj-table-status-message {
  position: absolute;
}

/* Styling for the status message text. */
.oj-table-status-message-text {
  background-color: InfoBackground;
  color: InfoText;
  border: 1px var(--oj-core-divider-color) solid;
  padding: var(--oj-collection-grid-cell-padding);
  display: inline-block;
}

.oj-table-skeleton-cell {
  padding: 0px;
}

/* Styling for skeleton */
.oj-table-skeleton-container {
  display: flex;
  align-items: center;
  height: var(--oj-collection-list-row-height);
  padding-top: var(--oj-collection-list-cell-padding-vertical);
  padding-bottom: var(--oj-collection-list-cell-padding-vertical);
  padding-left: var(--oj-table-cell-padding-horizontal);
  padding-right: var(--oj-table-cell-padding-horizontal);
  box-sizing: border-box;
}

.oj-table-skeleton {
  height: 1rem;
  width: 100%;
  background-color: var(--oj-animation-skeleton-bg-end-color);
}

/* Grid display styling for skeleton. */
.oj-table-grid-display .oj-table-skeleton-container {
  height: var(--oj-collection-grid-row-height);
  padding-left: var(--oj-collection-grid-cell-padding);
  padding-right: var(--oj-collection-grid-cell-padding);
}

.oj-table-horizontal-grid:not(.oj-table-grid-display) .oj-table-skeleton-container {
  height: calc(var(--oj-collection-list-row-height) - 1px);
}

.oj-table-horizontal-grid:not(.oj-table-grid-display) .oj-table-status-message .oj-table-skeleton-container,
.oj-table-horizontal-grid:not(.oj-table-grid-display) .oj-table-progressive-skeleton-row .oj-table-skeleton-container {
  height: var(--oj-collection-list-row-height);
}

/* Styling for the body message. */
.oj-table-body-message {
  color: var(--oj-core-text-color-primary);
  padding: var(--oj-collection-grid-cell-padding);
}

.oj-table-body-message-row,
.oj-table-no-data-row {
  position: relative;
}

/* Styling for a panel that can attach to the bottom of the table
       and match the table colors. An app developer can put a paging control
       in a div with this class, for example. */
.oj-table-panel-bottom {
  background-color: inherit;
}

/* Styling for a panel that can attach to the bottom of the table
       and match the table colors when table is in grid display. An app developer
       can put a paging control in a div with this class, for example. */
.oj-table-panel-bottom-grid-display {
  border-style: solid;
  border-color: var(--oj-collection-border-color);
  background-color: var(--oj-collection-free-space-bg-color);
  border-width: 0 1px 1px;
}

/* Styling for the resize dialog in mobile device. */
.oj-table-resize-dialog-mobile {
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  border-radius: 0px;
}

/* Styling for the show required header icon. */
.oj-table-column-header-show-required-icon {
  position: absolute;
  font-family: inherit;
  color: var(--oj-collection-header-text-color);
  font-size: var(--oj-collection-header-font-size);
  font-weight: var(--oj-collection-header-font-weight);
  top: 0px;
  padding-inline-start: 0.25rem;
  padding-inline-end: 0.25rem;
}

html:not([dir=rtl]) .oj-table-column-header-show-required-icon {
  right: 0px;
}

html[dir=rtl] .oj-table-column-header-show-required-icon {
  left: 0px;
}

html:not([dir=rtl]) .oj-table-sort .oj-table-column-header-show-required-icon {
  right: var(--oj-core-touch-target-min-size);
}

html[dir=rtl] .oj-table-sort .oj-table-column-header-show-required-icon {
  left: var(--oj-core-touch-target-min-size);
}

.oj-table-column-header-show-required-icon:before {
  content: "*";
}

.oj-table-hidden-cell {
  display: none;
}

/* Styling for the default sort icon */
/* Styling for the sort ascending icon */
/* Styling for the sort descending icon */
oj-text-area:not(.oj-complete) {
  visibility: hidden;
}

.oj-textarea-input {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  overflow: auto;
  padding-top: calc((var(--oj-text-field-height) - 1rem * var(--oj-typography-body-md-line-height)) / 2 - 1px);
  padding-bottom: calc((var(--oj-text-field-height) - 1rem * var(--oj-typography-body-md-line-height)) / 2 - 1px);
  line-height: inherit;
  height: auto;
  resize: none;
}

.oj-textarea.oj-read-only .oj-textarea-input {
  padding-top: 0px;
  padding-left: 0;
  padding-right: 0;
  font-weight: inherit;
  line-height: inherit;
}

.oj-form-layout .oj-form.oj-enabled .oj-textarea.oj-read-only .oj-textarea-input {
  padding: 0.5rem var(--oj-text-field-text-to-edge-padding);
}

.oj-text-field.oj-read-only .oj-textarea-input:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: -1px;
}

.oj-text-field-counter.oj-textarea-counter-container {
  height: 32px;
  width: 100%;
  padding: 0 8px;
}

.oj-textarea .oj-text-field-counter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.oj-textarea .oj-text-field-counter .oj-textarea-counter-el {
  visibility: hidden;
}

.oj-textarea.oj-focus .oj-text-field-counter .oj-textarea-counter-el {
  visibility: visible;
}

.oj-textarea .oj-text-field-container {
  flex-wrap: wrap;
}

.oj-textarea .oj-text-field-container {
  height: auto;
}

.oj-textarea .oj-text-field-container {
  min-height: var(--oj-text-field-height);
}

.oj-textarea.oj-read-only .oj-text-field-container {
  min-height: 0;
}

.oj-textarea.oj-text-field-label-inside .oj-text-field-container {
  align-items: stretch;
}

.oj-text-field-label-inside .oj-textarea-input {
  padding: 0 var(--oj-text-field-text-to-edge-padding);
  margin-top: calc(var(--oj-label-inside-edge-font-size) * var(--oj-label-inside-edge-line-height) + var(--oj-label-inside-edge-position-top));
  margin-bottom: 0.25rem;
  display: block;
}

.oj-text-field-label-inside.oj-textarea.oj-read-only .oj-textarea-input {
  margin-top: 0;
}

.oj-form-layout .oj-form.oj-enabled .oj-text-field-label-inside.oj-read-only .oj-textarea-input {
  padding: 0 var(--oj-text-field-text-to-edge-padding);
  margin-top: calc(var(--oj-label-inside-edge-font-size) * var(--oj-label-inside-edge-line-height) + var(--oj-label-inside-edge-position-top));
}

.oj-text-field-label-inside.oj-read-only .oj-textarea-input {
  padding-left: 0;
  padding-right: 0;
}

.oj-text-field-label-inside .oj-textarea-input.oj-text-field-input {
  min-height: 0;
}

.oj-text-field.oj-textarea.oj-disabled .oj-text-field-container {
  background-color: var(--oj-text-field-bg-color-disabled);
}

:root {
  --oj-thematic-map-bg-color: rgb(var(--oj-palette-neutral-rgb-30));
  --oj-thematic-map-border-color: rgb(var(--oj-palette-neutral-rgb-50));
  --oj-thematic-map-marker-bg-color: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-thematic-map-marker-border-color: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-thematic-map-link-color: rgb(var(--oj-palette-neutral-rgb-190));
}

oj-thematic-map:not(.oj-complete) {
  visibility: hidden;
}

oj-thematic-map {
  display: block;
}

.oj-thematicmap {
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 560px;
}

.oj-thematicmap-arealayer {
  background-color: var(--oj-thematic-map-bg-color);
  border-color: var(--oj-thematic-map-border-color);
  font-size: var(--oj-dvt-label-font-size-sm);
}

.oj-thematicmap-area {
  border-color: var(--oj-thematic-map-border-color);
}

.oj-thematicmap-area.oj-hover {
  border-color: var(--oj-dvt-item-contrast-color);
}

.oj-thematicmap-area.oj-selected {
  border-top-color: var(--oj-dvt-item-contrast-color);
  border-bottom-color: var(--oj-dvt-item-border-color-selected);
}

.oj-thematicmap-marker {
  border-color: var(--oj-thematic-map-marker-border-color);
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-sm);
  background-color: var(--oj-thematic-map-marker-bg-color);
}

.oj-thematicmap-marker.oj-hover {
  border-color: var(--oj-dvt-item-contrast-color);
}

.oj-thematicmap-marker.oj-selected {
  border-color: var(--oj-dvt-item-border-color-selected);
}

.oj-thematicmap-link {
  color: var(--oj-thematic-map-link-color);
}

.oj-thematicmap-link.oj-hover {
  color: var(--oj-dvt-item-contrast-color);
}

.oj-thematicmap-link.oj-selected {
  border-color: var(--oj-dvt-item-border-color-selected);
}

oj-time-axis:not(.oj-complete) {
  visibility: hidden;
}

/* Styling for the timeaxis widget */
.oj-timeaxis {
  background-color: transparent;
  border: 1px solid var(--oj-collection-border-color);
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

/* Styling for the timeaxis labels */
.oj-timeaxis-label {
  font-size: var(--oj-collection-header-font-size);
  fill: var(--oj-collection-header-text-color);
}

/* Styling for the timeaxis separators */
.oj-timeaxis-separator {
  stroke: var(--oj-collection-border-color);
}

.oj-table-header-row .oj-timeaxis-separator {
  stroke: var(--oj-collection-border-color);
}

.oj-datagrid-column-header-cell .oj-timeaxis-separator {
  stroke: var(--oj-collection-border-color);
}

/* Styling border for stamping onto ojTable header case:
    All timeaxes does not have bottom border */
.oj-table-header-row .oj-timeaxis {
  border-bottom: none;
}

/* Styling border for stamping onto ojDataGrid header case:
    First timeaxis does not have border, all other timeaxes have top border */
.oj-datagrid-column-header-cell .oj-timeaxis {
  border: none;
}

.oj-datagrid-column-header-cell .oj-timeaxis ~ .oj-timeaxis {
  border-top: 1px solid var(--oj-collection-border-color);
}

:root {
  --oj-private-timeline-reference-object-color: rgb(var(--oj-palette-danger-rgb-100));
  --oj-private-timeline-border-color: rgb(var(--oj-palette-neutral-rgb-50));
  --oj-private-timeline-item-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-private-timeline-item-border-color: rgb(var(--oj-palette-neutral-rgb-160));
  --oj-private-timeline-item-border-color-hover: var(--oj-private-timeline-item-border-color);
  --oj-private-timeline-minor-axis-bg-color: transparent;
  --oj-private-timeline-minor-axis-border-color: transparent;
  --oj-private-timeline-minor-axis-separator-color: var(--oj-private-dvt-gridline-color);
  --oj-private-timeline-series-bg-color: transparent;
  --oj-private-timeline-item-padding: 16px;
  --oj-private-timeline-item-border-radius: 6px;
  --oj-private-timeline-item-duration-event-overflow-bg-color: rgb(var(--oj-palette-neutral-rgb-30));
}

oj-timeline:not(.oj-complete) {
  visibility: hidden;
}

.oj-timeline {
  outline: none;
  border-top-color: var(--oj-private-timeline-border-color);
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 35rem;
}

.oj-timeline-item {
  background-color: var(--oj-private-timeline-item-bg-color);
  border-top-color: var(--oj-private-timeline-item-border-color);
  padding-top: var(--oj-private-timeline-item-padding);
  border-top-left-radius: var(--oj-private-timeline-item-border-radius);
}

.oj-timeline-item.oj-hover {
  background-color: var(--oj-core-bg-color-hover);
  border-top-color: var(--oj-private-timeline-item-border-color-hover);
  stroke-width: 1px;
}

.oj-timeline-item.oj-selected {
  border-top-color: var(--oj-dvt-item-border-color-selected);
}

.oj-timeline-item-description {
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-typography-body-sm-font-size);
  white-space: nowrap;
}

.oj-timeline-item-duration-event-overflow-bubble {
  background-color: var(--oj-private-timeline-item-duration-event-overflow-bg-color);
}

.oj-timeline-item-title {
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-typography-body-sm-font-size);
  white-space: nowrap;
  font-weight: 600;
}

.oj-timeline-major-axis-label {
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-lg);
  white-space: nowrap;
  font-weight: 600;
}

.oj-timeline-major-axis-separator {
  color: var(--oj-private-dvt-gridline-color);
}

.oj-timeline-minor-axis {
  background-color: var(--oj-private-timeline-minor-axis-bg-color);
  border-top-color: var(--oj-private-timeline-minor-axis-border-color);
}

.oj-timeline-minor-axis-label {
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-md);
  white-space: nowrap;
}

.oj-timeline-minor-axis-separator {
  color: var(--oj-private-timeline-minor-axis-separator-color);
  stroke-dasharray: 3, 3;
}

.oj-timeline-overview {
  background-color: var(--oj-dvt-overview-bg-color);
}

.oj-timeline-overview-label {
  color: var(--oj-core-text-color-secondary);
  font-size: var(--oj-dvt-label-font-size-md);
  white-space: nowrap;
  font-weight: bold;
}

.oj-timeline-overview-window {
  background-color: var(--oj-dvt-overview-window-bg-color);
  border-top-color: var(--oj-dvt-overview-window-border-color);
}

.oj-timeline-reference-object {
  color: var(--oj-private-timeline-reference-object-color);
}

.oj-timeline-series {
  background-color: var(--oj-private-timeline-series-bg-color);
}

.oj-timeline-series-label {
  color: var(--oj-heading-text-color);
  font-size: var(--oj-dvt-label-font-size-lg);
  white-space: nowrap;
  font-weight: bold;
}

.oj-timeline-series-empty-text {
  color: var(--oj-core-text-color-secondary);
  font-size: var(--oj-dvt-label-font-size-md);
  white-space: nowrap;
}

.oj-timeline-item-bubble {
  font-size: var(--oj-typography-body-sm-font-size);
}

.oj-timeline-resize-handle-start.oj-draggable,
.oj-timeline-resize-handle-end.oj-draggable {
  cursor: col-resize;
}

.oj-timeline-move-outline {
  stroke-width: 1px;
}

/* toolbar*/
/* --------------------------------------------------------------- */
oj-toolbar:not(.oj-complete) {
  visibility: hidden;
}

.oj-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.25em 0;
  border-style: solid;
  border-color: var(--oj-core-divider-color);
  border-width: 0;
}

.oj-toolbar .oj-button {
  margin-bottom: 0;
}

.oj-toolbar > .oj-button:not(:first-child),
.oj-toolbar > .oj-buttonset:not(:first-child) {
  margin-inline-start: var(--oj-toolbar-button-margin);
}

.oj-toolbar > .oj-button:not(:last-child),
.oj-toolbar > .oj-buttonset:not(:last-child) {
  margin-inline-end: var(--oj-toolbar-button-margin);
}

.oj-toolbar .oj-button:not(:first-child).oj-button-half-chrome,
.oj-toolbar .oj-buttonset:not(:first-child).oj-button-half-chrome {
  margin-inline-start: var(--oj-toolbar-borderless-button-margin);
}

.oj-toolbar .oj-button:not(:last-child).oj-button-half-chrome,
.oj-toolbar .oj-buttonset:not(:last-child).oj-button-half-chrome {
  margin-inline-end: var(--oj-toolbar-borderless-button-margin);
}

/* Apps can apply this class to a span to get a toolbar separator.  
     * To make it accessible, the span should also have 
     * role="separator" aria-orientation="vertical".
     * Separators should be placed around any buttonsets in the toolbar, and 
     * anywhere else in the toolbar that a separator is desirable.
     */
.oj-toolbar-separator {
  border-left: solid 1px var(--oj-core-divider-color);
  height: 1.833em;
  display: inline-block;
  vertical-align: middle;
  margin: 0 var(--oj-toolbar-separator-margin);
}

/* To layout multiple toolbars, an element with .oj-toolbars can contain 1 or more elements 
       each having .oj-toolbar-row, which can each contain 1 or more JET Toolbars 
       (which have the oj-toolbar class). */
.oj-toolbars {
  border-style: solid;
  border-color: var(--oj-core-divider-color);
}

.oj-toolbar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.oj-toolbar-row .oj-toolbar {
  display: flex;
  border: 0;
}

.oj-toolbar-row .oj-toolbar + .oj-toolbar {
  border-radius: 0;
  border-inline-start-color: var(--oj-core-divider-color);
  border-inline-start-width: 1px;
  border-inline-start-style: solid;
  margin-inline-start: 0.5em;
  padding-inline-start: 0.5em;
}

.oj-toolbar-row + .oj-toolbar-row {
  border-top: 1px solid var(--oj-core-divider-color);
}

/* Apps can apply this class if a top toolbar border is desired */
.oj-toolbar-top-border {
  border-top-width: 1px;
  border-radius: 0;
}

/* Apps can apply this class if a bottom toolbar border is desired */
.oj-toolbar-bottom-border {
  border-bottom-width: 1px;
  border-radius: 0;
}

:root {
  --oj-train-step-width: 7rem;
  --oj-train-padding: 0.75rem 0 0.75rem 0;
  --oj-train-label-font-size: var(--oj-typography-body-sm-font-size);
  --oj-train-label-font-weight: bold;
  --oj-train-label-padding-top: 0.75rem;
  --oj-train-button-diameter: 1.5rem;
  --oj-train-button-font-size: var(--oj-typography-body-xs-font-size);
  --oj-train-connector-height: 2px;
  --oj-train-button-bg-color: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-train-button-border-color: rgba(var(--oj-palette-neutral-rgb-190), 0.6);
  --oj-train-button-text-color: var(--oj-core-text-color-secondary);
  --oj-train-label-color: var(--oj-core-text-color-secondary);
  --oj-train-connector-color: rgba(var(--oj-palette-neutral-rgb-190), 0.3);
  --oj-train-connector-padding: 0.625rem;
  --oj-train-button-bg-color-visited: rgb(var(--oj-palette-success-rgb-110));
  --oj-train-button-border-color-visited: transparent;
  --oj-train-button-text-color-visited: var(--oj-core-neutral-contrast);
  --oj-train-label-color-visited: var(--oj-core-text-color-primary);
  --oj-train-button-bg-color-hover: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-train-button-border-color-hover: rgba(var(--oj-palette-brand-rgb-160), 0.6);
  --oj-train-button-text-color-hover: rgba(var(--oj-palette-brand-rgb-160), 0.6);
  --oj-train-step-bg-color-hover: var(--oj-core-bg-color-hover);
  --oj-train-step-border-radius: var(--oj-core-border-radius-xl);
  --oj-train-button-bg-color-active: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-train-button-border-color-active: transparent;
  --oj-train-button-text-color-active: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-train-label-font-weight-active: bold;
  --oj-train-step-bg-color-active: var(--oj-core-bg-color-active);
  --oj-train-button-bg-color-selected: rgb(var(--oj-palette-neutral-rgb-190));
  --oj-train-button-border-color-selected: transparent;
  --oj-train-button-text-color-selected: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-train-label-font-weight-selected: bold;
  --oj-train-label-color-selected: var(--oj-core-text-color-primary);
  --oj-train-connector-color-selected: rgba(var(--oj-palette-neutral-rgb-190), 0.3);
  --oj-train-connector-padding-selected: 0px;
  --oj-train-button-bg-color-disabled: rgb(var(--oj-palette-neutral-rgb-0));
  --oj-train-button-border-color-disabled: var(--oj-core-text-color-disabled);
  --oj-train-button-text-color-disabled: var(--oj-core-text-color-disabled);
  --oj-train-button-opacity-disabled: 1;
  --oj-train-label-color-disabled: var(--oj-core-text-color-disabled);
}

/* train */
/* --------------------------------------------------------------- */
oj-train:not(.oj-complete) {
  visibility: hidden;
}

oj-train {
  display: block;
}

.oj-train {
  white-space: nowrap;
  text-align: center;
}

.oj-train-wrapper {
  font-size: 0;
  display: inline-block;
  position: relative;
  vertical-align: top;
}

/* Class that can be added to stretch train to container size */
.oj-train-stretch .oj-train-wrapper {
  width: 100%;
}

/* Wrapper class that contains step connector and fill */
.oj-train-connector-wrapper {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  padding: 0 calc(var(--oj-train-step-width) / 2);
}

/* Classes that define the bar connecting the steps */
.oj-train-connector,
.oj-train-connector-fill {
  position: relative;
  width: 100%;
  top: calc((var(--oj-train-button-diameter) - var(--oj-train-connector-height)) / 2);
  box-sizing: border-box;
}

.oj-train-connector {
  background-color: var(--oj-train-connector-color);
}

/* Shades in the connector to the position of the selected step */
.oj-train-connector-fill {
  margin-top: calc(0px - var(--oj-train-connector-height));
}

/* Connector circle behind the individual step buttons which matches the connector */
.oj-train-button-connector {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: var(--oj-train-button-diameter);
  height: var(--oj-train-button-diameter);
  background-color: transparent;
  border-radius: 50%;
}

.oj-train-step-list-item:last-child > .oj-train-button-connector {
  top: var(--oj-train-connector-height);
}

.oj-train-button-connector.oj-train-fill {
  background-image: none;
  top: 0;
}

.oj-train-button-connector.oj-train-fill:hover {
  background-color: transparent;
}

.oj-train-step-individual-connector {
  position: relative;
  visibility: visible;
  height: var(--oj-train-connector-height);
  width: calc(100% - var(--oj-train-button-diameter) - var(--oj-train-connector-padding) * 2);
  top: calc((var(--oj-train-button-diameter) + var(--oj-train-connector-height)) / 2);
  background-color: var(--oj-train-connector-color);
}

html:not([dir=rtl]) .oj-train-step-individual-connector {
  left: calc(50% + var(--oj-train-button-diameter) / 2 + var(--oj-train-connector-padding));
}

html[dir=rtl] .oj-train-step-individual-connector {
  right: calc(50% + var(--oj-train-button-diameter) / 2 + var(--oj-train-connector-padding));
}

.oj-train-step-individual-connector.oj-train-connector-before-selected-step {
  background-color: var(--oj-train-connector-color-selected);
  width: calc(100% - var(--oj-train-button-diameter) - var(--oj-train-connector-padding-selected) * 2);
}

html:not([dir=rtl]) .oj-train-step-individual-connector.oj-train-connector-before-selected-step {
  left: calc(50% + var(--oj-train-button-diameter) / 2 + var(--oj-train-connector-padding-selected));
}

html[dir=rtl] .oj-train-step-individual-connector.oj-train-connector-before-selected-step {
  right: calc(50% + var(--oj-train-button-diameter) / 2 + var(--oj-train-connector-padding-selected));
}

/* Inividual step buttons that are used for train navigation */
.oj-train-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-style: solid;
  width: var(--oj-train-button-diameter);
  height: var(--oj-train-button-diameter);
  line-height: var(--oj-train-button-diameter);
  border-radius: 50%;
  border-width: 2px;
}

.oj-train-button.oj-default {
  border-color: var(--oj-train-button-border-color);
  color: var(--oj-train-button-border-color);
  background-color: var(--oj-train-button-bg-color);
}

.oj-train-button.oj-visited {
  border-color: var(--oj-train-button-border-color-visited);
  background-color: var(--oj-train-button-bg-color-visited);
}

.oj-train-button.oj-hover {
  border-color: var(--oj-train-button-border-color-hover);
  background-color: var(--oj-train-button-bg-color-hover);
}

.oj-train-button.oj-selected {
  border-color: var(--oj-train-button-border-color-selected);
  background-color: var(--oj-train-button-bg-color-selected);
  cursor: default;
}

.oj-train-button.oj-disabled {
  color: var(--oj-train-button-border-color-disabled);
  background-color: var(--oj-train-button-bg-color-disabled);
  cursor: default;
}

.oj-train-button.oj-visited.oj-hover {
  border-color: var(--oj-train-button-border-color-hover);
  color: var(--oj-train-button-text-color-hover);
  background-image: none;
}

.oj-train-button.oj-active {
  background-color: var(--oj-train-button-bg-color-active);
  border-color: var(--oj-train-button-border-color-active);
  color: var(--oj-train-button-text-color-active);
  /*transform: scale(0.8);
      animation: var(--oj-animation-duration-long) var(--oj-animation-ease-in-out);*/
}

.oj-train-button.oj-active .oj-train-button-text {
  color: white;
}

.oj-train-button.oj-visited.oj-active > .oj-train-button-text,
.oj-train-button.oj-visited.oj-hover > .oj-train-button-text {
  opacity: 1;
}

.oj-train-step-list-item.oj-confirmation .oj-train-button,
.oj-train-step-list-item.oj-info .oj-train-button,
.oj-train-step-list-item.oj-invalid .oj-train-button,
.oj-train-step-list-item.oj-warning .oj-train-button {
  background-color: transparent;
  border-color: transparent;
}

.oj-train-step-list-item.oj-hover {
  background-color: var(--oj-train-step-bg-color-hover);
}

.oj-train-step-list-item.oj-active {
  background-color: var(--oj-train-step-bg-color-active);
}

.oj-train-step-list-item.oj-selected {
  cursor: default;
}

.oj-train-step-list-item.oj-disabled {
  cursor: default;
}

.oj-train-step-list-item.oj-hover .oj-train-icon {
  background-color: transparent;
}

.oj-train-step-list-item.oj-info.oj-hover .oj-train-button-text,
.oj-train-step-list-item.oj-confirmation.oj-hover .oj-train-button-text,
.oj-train-step-list-item.oj-warning.oj-hover .oj-train-button-text,
.oj-train-step-list-item.oj-invalid.oj-hover .oj-train-button-text,
.oj-train-step-list-item.oj-info.oj-hover .oj-train-button-text {
  visibility: hidden;
}

.oj-train-button-text {
  font-size: var(--oj-train-button-font-size);
  font-weight: var(--oj-train-label-font-weight);
  color: var(--oj-train-button-text-color);
}

.oj-train-button.oj-active .oj-train-button-text,
.oj-train-button.oj-hover.oj-active .oj-train-button-text,
.oj-train-button.oj-hover.oj-visited.oj-active .oj-train-button-text {
  color: var(--oj-train-button-text-color-active);
}

.oj-train-button.oj-disabled .oj-train-button-text {
  color: var(--oj-train-button-text-color-disabled);
}

.oj-train-button.oj-hover .oj-train-button-text,
.oj-train-button.oj-visited.oj-hover .oj-train-button-text {
  color: var(--oj-train-button-text-color-hover);
}

.oj-train-button.oj-visited .oj-train-button-text {
  color: var(--oj-train-button-text-color-visited);
}

.oj-train-button.oj-selected .oj-train-button-text {
  color: var(--oj-train-button-text-color-selected);
}

.oj-train-step-list {
  margin: 0;
  padding: 0;
}

/* Class for each li that stores the label and button information for each step in the train */
.oj-train-step-list-item {
  cursor: pointer;
  font-size: 1rem;
  width: var(--oj-train-step-width);
  padding: var(--oj-train-padding);
  text-align: center;
  display: inline-block;
  vertical-align: top;
  line-height: normal;
  border-radius: var(--oj-train-step-border-radius);
  white-space: normal;
}

.oj-train-label-wrapper {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 5px;
  margin-left: 5px;
  margin-top: var(--oj-train-label-padding-top);
}

.oj-train-step-list-item:last-child > .oj-train-label-wrapper {
  top: var(--oj-train-connector-height);
}

.oj-train-label {
  text-decoration: none;
  color: var(--oj-train-label-color);
  text-align: center;
  font-size: var(--oj-train-label-font-size);
  font-weight: var(--oj-train-label-font-weight);
}

.oj-train-label.oj-visited {
  color: var(--oj-train-label-color-visited);
}

.oj-train-label.oj-selected {
  color: var(--oj-train-label-color-selected);
}

.oj-train-label.oj-disabled {
  text-decoration: none;
  color: var(--oj-train-label-color-disabled);
  opacity: var(--oj-train-button-opacity-disabled);
}

.oj-train-label.oj-active,
.oj-train-label.oj-hover.oj-active {
  text-decoration: none;
  font-weight: var(--oj-train-label-font-weight-active);
  cursor: pointer;
}

.oj-train-label.oj-hover {
  cursor: pointer;
}

.oj-train-label.oj-selected {
  text-decoration: none;
  cursor: default;
  font-weight: var(--oj-train-label-font-weight-selected);
}

.oj-train-label:focus {
  outline: dotted 1px var(--oj-core-focus-border-color);
}

.oj-train-label:not(.oj-focus-highlight):focus {
  outline: none;
}

.oj-train-icon {
  position: absolute;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--oj-train-button-diameter);
  height: var(--oj-train-button-diameter);
  left: 0;
  top: 0;
  color: var(--oj-core-neutral-contrast);
  border-radius: 50%;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}

.oj-train-button.oj-disabled .oj-train-icon {
  background-color: var(--oj-train-button-bg-color-disabled);
  border-color: var(--oj-train-button-border-color-disabled);
  color: var(--oj-train-button-text-color-disabled);
}

.oj-train-button.oj-hover .oj-train-icon,
.oj-train-button.oj-visited.oj-hover .oj-train-icon,
.oj-train-button.oj-visited.oj-hover .oj-train-icon.oj-confirmation,
.oj-train-button.oj-visited.oj-hover .oj-train-icon.oj-error,
.oj-train-button.oj-visited.oj-hover .oj-train-icon.oj-info {
  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
}

.oj-train-button.oj-visited.oj-hover .oj-train-icon.oj-warning {
  background-image: none;
}

.oj-train-button-visited-animation {
  animation: trainvisited var(--oj-animation-duration-medium) var(--oj-animation-ease-in-out);
}

.oj-train-button-messaging-icon-animation {
  animation: messaging var(--oj-animation-duration-medium) var(--oj-animation-ease-in-out);
}

.oj-train-button-selected-animation {
  animation: var(--oj-animation-duration-long) var(--oj-animation-ease-in-out);
}

@keyframes trainvisited {
  0% {
    transform: scale(0.8);
    opacity: 0;
    background-color: var(--oj-train-button-bg-color-selected);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    background-color: var(--oj-train-button-bg-color-visited);
  }
}
@keyframes messaging {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.oj-train-icon.oj-confirmation {
  color: var(--oj-core-success-1);
  font-size: var(--oj-train-button-diameter);
}

.oj-train-icon.oj-error {
  color: var(--oj-core-danger-1);
  font-size: var(--oj-train-button-diameter);
}

.oj-train-icon.oj-info {
  color: var(--oj-core-info-1);
  font-size: var(--oj-train-button-diameter);
}

.oj-train-icon.oj-warning {
  color: var(--oj-core-warning-1);
  font-size: var(--oj-train-button-diameter);
}

.oj-confirmation .oj-train-button.oj-visited .oj-train-button-text,
.oj-confirmation .oj-train-button.oj-hover.oj-visited.oj-active .oj-train-button-text,
.oj-invalid .oj-train-button.oj-visited .oj-train-button-text,
.oj-invalid .oj-train-button.oj-hover.oj-visited.oj-active .oj-train-button-text,
.oj-warning .oj-train-button.oj-visited .oj-train-button-text,
.oj-warning .oj-train-button.oj-hover.oj-visited.oj-active .oj-train-button-text,
.oj-info .oj-train-button.oj-visited .oj-train-button-text,
.oj-info .oj-train-button.oj-hover.oj-visited.oj-active .oj-train-button-text {
  color: transparent;
}

.oj-train-icon.oj-hover {
  cursor: pointer;
}

.oj-hicontrast .oj-train-button.oj-selected {
  border-width: calc(var(--oj-train-button-diameter) / 2);
}

.oj-hicontrast .oj-train-button.oj-disabled {
  border-style: dotted;
}

.oj-hicontrast .oj-train-connector {
  border: 1px solid;
}

.oj-hicontrast .oj-train-connector-fill {
  border: calc(var(--oj-train-connector-height) / 2) solid;
}

/* train                      */
/* -------------------------- */
:root.oj-scale-sm {
  --oj-train-label-font-size: var(--oj-typography-body-md-font-size);
}

:root.oj-scale-md {
  --oj-train-label-font-size: var(--oj-typography-body-md-font-size);
}

oj-tree-view:not(.oj-complete) {
  visibility: hidden;
}

oj-tree-view {
  display: block;
  overflow: auto;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: 0.25rem;
  position: relative;
}

oj-tree-view:focus {
  outline: none;
}

.oj-treeview-list:focus {
  outline: none;
}

.oj-treeview-list,
.oj-treeview-item {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
  -webkit-user-select: none;
  user-select: none;
  min-width: fit-content;
  min-width: -moz-fit-content;
}

.oj-treeview-list[role=tree] {
  padding: 1px;
}

.oj-treeview-select-single .oj-treeview-item-content.oj-selected {
  box-shadow: 0 0 0 1px var(--oj-core-border-color-selected);
  border-radius: var(--oj-core-border-radius-md);
}

.oj-treeview-item {
  white-space: nowrap;
  vertical-align: middle;
}

.oj-treeview-list.oj-treeview-drag-image > .oj-treeview-item {
  margin-inline-start: 0.5rem;
}

.oj-treeview-icon {
  display: inline-block;
  text-decoration: none;
  vertical-align: middle;
  text-align: end;
}

.oj-treeview-item-text {
  color: var(--oj-tree-view-text-color);
  vertical-align: middle;
}

.oj-treeview-item-content-icon {
  vertical-align: middle;
  font-size: var(--oj-core-icon-size-lg);
  margin-inline-end: 0.5rem;
  display: inline-block;
}

.oj-treeview-item-content {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  width: 100%;
  box-sizing: border-box;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
}

.oj-selected-item-content-top {
  border-top-left-radius: var(--oj-core-border-radius-md);
  border-top-right-radius: var(--oj-core-border-radius-md);
}

.oj-selected-item-content-bottom {
  border-bottom-left-radius: var(--oj-core-border-radius-md);
  border-bottom-right-radius: var(--oj-core-border-radius-md);
}

.oj-treeview-selector {
  display: inline-block;
  vertical-align: middle;
  cursor: default;
}

.oj-treeview-selector .oj-selector,
.oj-treeview-selector .oj-selector .oj-selector-wrapper .oj-selectorbox {
  height: var(--oj-tree-view-row-height);
  width: var(--oj-tree-view-indent-width);
}

.oj-treeview-item-content.oj-hover {
  background-color: var(--oj-core-bg-color-hover);
}

.oj-treeview-list:focus .oj-treeview-item-content.oj-selected {
  background-color: var(--oj-core-bg-color-selected);
}

.oj-treeview-item-content.oj-selected {
  background-color: var(--oj-core-bg-color-selected);
}

.oj-hicontrast .oj-treeview-item-content.oj-selected {
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  border-color: initial;
}

.oj-hicontrast .oj-treeview-item-content.oj-focus-highlight {
  outline-width: 2px;
  outline-style: dotted;
  border-width: 0 1px 1px 0;
  border-style: dotted;
}

.oj-treeview-item-content.oj-focus-highlight {
  outline: dotted 1px var(--oj-core-focus-border-color);
  outline-offset: -1px;
}

.oj-treeview-spacer {
  height: var(--oj-tree-view-row-height);
  display: inline-block;
  vertical-align: middle;
}

.oj-treeview-item.oj-draggable {
  cursor: grab;
}

.oj-treeview-item.oj-draggable:active {
  cursor: grabbing;
}

.oj-treeview-drag-image {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background-color: var(--oj-collection-bg-color);
  opacity: 0.95;
  box-shadow: var(--oj-core-box-shadow-lg);
  border-radius: var(--oj-core-border-radius-lg);
  cursor: grabbing;
}

.oj-treeview-drag-image-item {
  border-top: 1px solid var(--oj-core-divider-color);
  border-bottom: 1px solid var(--oj-core-divider-color);
}

.oj-treeview-drag-source {
  opacity: 0.3;
}

.oj-treeview-drop-line {
  height: 2px;
  width: 100px;
  position: absolute;
  background-color: var(--oj-core-drag-drop-line-color);
  pointer-events: none;
}

.oj-treeview-drop-zone {
  background-color: var(--oj-core-drag-drop-color-1);
  border-radius: var(--oj-core-border-radius-md);
}

.oj-treeview-drag-image {
  position: fixed;
  top: 10000px;
  overflow: visible;
}

.oj-treeview-drag-image .oj-treeview-item {
  position: absolute;
}

.oj-treeview-skeleton-content {
  height: var(--oj-tree-view-row-height);
  align-items: center;
  display: flex;
}

.oj-treeview-skeleton-carrot {
  width: var(--oj-typography-body-md-font-size);
  height: var(--oj-typography-body-md-font-size);
  border-radius: var(--oj-core-border-radius-md);
  margin-right: 0.75rem;
  margin-left: 0.5rem;
}

.oj-treeview-skeleton-item {
  height: var(--oj-typography-body-md-font-size);
  flex-grow: 1;
}

.oj-treeview-skeleton-leaf {
  height: var(--oj-typography-body-md-font-size);
  flex-grow: 1;
  margin-inline-start: 5rem;
}

.oj-treeview-skeleton-child {
  margin-left: 2rem;
}

.oj-treeview-selector,
.oj-treeview-icon {
  margin-inline-end: 0.5rem;
}

.oj-treeview-disclosure-icon {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.oj-treeview-disclosure-icon,
.oj-treeview-disclosure-icon.oj-treeview-icon {
  margin: 0;
  padding-inline-end: 0.5rem;
}

/* Styling for a collapsed icon */
/* Styling for an expanded icon */
:root {
  --oj-treemap-node-header-bg-color: rgb(var(--oj-palette-neutral-rgb-20));
  --oj-treemap-node-header-bg-color-selected: rgb(var(--oj-palette-brand-rgb-40));
  --oj-treemap-node-header-border-color: rgb(var(--oj-palette-neutral-rgb-40));
  --oj-treemap-node-header-border-color-hover: rgb(var(--oj-palette-neutral-rgb-40));
}

oj-treemap:not(.oj-complete) {
  visibility: hidden;
}

oj-treemap {
  display: block;
}

.oj-treemap {
  width: 100%;
  height: 560px;
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-sm);
  -webkit-user-select: none;
  user-select: none;
}

.oj-treemap-attribute-type-text {
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-dvt-label-font-size-sm);
}

.oj-treemap-attribute-value-text {
  font-size: var(--oj-dvt-label-font-size-sm);
}

.oj-treemap-current-drill-text {
  color: var(--oj-core-text-color-primary);
  font-size: var(--oj-typography-body-md-font-size);
  line-height: var(--oj-typography-body-md-line-height);
}

.oj-treemap-drill-text {
  color: var(--oj-link-text-color);
  font-size: var(--oj-typography-body-md-font-size);
  line-height: var(--oj-typography-body-md-line-height);
  -webkit-text-decoration: var(--oj-link-embedded-text-decoration);
  text-decoration: var(--oj-link-embedded-text-decoration);
}

.oj-treemap-drill-text.oj-hover {
  -webkit-text-decoration: var(--oj-link-embedded-text-decoration-hover);
  text-decoration: var(--oj-link-embedded-text-decoration-hover);
}

.oj-treemap-node {
  font-size: var(--oj-dvt-label-font-size-sm);
}

.oj-treemap-node.oj-hover {
  border-color: var(--oj-dvt-node-border-color-hover);
}

.oj-treemap-node.oj-selected {
  border-top-color: var(--oj-dvt-item-border-color-selected);
  border-bottom-color: var(--oj-dvt-item-contrast-color);
}

.oj-treemap-node-header {
  font-size: var(--oj-dvt-label-font-size-sm);
  color: var(--oj-heading-text-color);
  background-color: var(--oj-treemap-node-header-bg-color);
  border-color: var(--oj-treemap-node-header-border-color);
}

.oj-treemap-node-header.oj-hover {
  background-color: var(--oj-dvt-node-border-color-hover);
  border-color: var(--oj-treemap-node-header-border-color);
  border-top-color: var(--oj-dvt-node-border-color-hover);
  border-bottom-color: var(--oj-treemap-node-header-border-color-hover);
}

.oj-treemap-node-header.oj-selected {
  background-color: var(--oj-treemap-node-header-bg-color-selected);
  border-color: var(--oj-treemap-node-header-border-color);
  border-top-color: var(--oj-dvt-item-border-color-selected);
  border-bottom-color: var(--oj-dvt-item-contrast-color);
}

.oj-typography-heading-2xl,
.oj-typography-title-1 {
  font-size: var(--oj-typography-heading-2xl-font-size) !important;
  font-weight: var(--oj-typography-heading-2xl-font-weight) !important;
  line-height: var(--oj-typography-heading-2xl-line-height) !important;
}

.oj-typography-heading-xl,
.oj-typography-title-2 {
  font-size: var(--oj-typography-heading-xl-font-size) !important;
  font-weight: var(--oj-typography-heading-xl-font-weight) !important;
  line-height: var(--oj-typography-heading-xl-line-height) !important;
}

.oj-typography-heading-lg,
.oj-typography-title-3 {
  font-size: var(--oj-typography-heading-lg-font-size) !important;
  font-weight: var(--oj-typography-heading-lg-font-weight) !important;
  line-height: var(--oj-typography-heading-lg-line-height) !important;
}

.oj-typography-heading-md,
.oj-typography-title-4 {
  font-size: var(--oj-typography-heading-md-font-size) !important;
  font-weight: var(--oj-typography-heading-md-font-weight) !important;
  line-height: var(--oj-typography-heading-md-line-height) !important;
}

.oj-typography-heading-sm,
.oj-typography-title-5 {
  font-size: var(--oj-typography-heading-sm-font-size) !important;
  font-weight: var(--oj-typography-heading-sm-font-weight) !important;
  line-height: var(--oj-typography-heading-sm-line-height) !important;
}

.oj-typography-heading-xs,
.oj-typography-title-6 {
  font-size: var(--oj-typography-heading-xs-font-size) !important;
  font-weight: var(--oj-typography-heading-xs-font-weight) !important;
  line-height: var(--oj-typography-heading-xs-line-height) !important;
}

.oj-typography-subheading-2xl,
.oj-typography-subtitle-1 {
  font-size: var(--oj-typography-subheading-2xl-font-size) !important;
  font-weight: var(--oj-typography-subheading-2xl-font-weight) !important;
  line-height: var(--oj-typography-subheading-2xl-line-height) !important;
}

.oj-typography-subheading-xl,
.oj-typography-subtitle-2 {
  font-size: var(--oj-typography-subheading-xl-font-size) !important;
  font-weight: var(--oj-typography-subheading-xl-font-weight) !important;
  line-height: var(--oj-typography-subheading-xl-line-height) !important;
}

.oj-typography-subheading-lg,
.oj-typography-subtitle-3 {
  font-size: var(--oj-typography-subheading-lg-font-size) !important;
  font-weight: var(--oj-typography-subheading-lg-font-weight) !important;
  line-height: var(--oj-typography-subheading-lg-line-height) !important;
}

.oj-typography-subheading-md,
.oj-typography-subtitle-4 {
  font-size: var(--oj-typography-subheading-md-font-size) !important;
  font-weight: var(--oj-typography-subheading-md-font-weight) !important;
  line-height: var(--oj-typography-subheading-md-line-height) !important;
}

.oj-typography-subheading-sm {
  font-size: var(--oj-typography-subheading-sm-font-size) !important;
  font-weight: var(--oj-typography-subheading-sm-font-weight) !important;
  line-height: var(--oj-typography-subheading-sm-line-height) !important;
}

.oj-typography-subheading-xs {
  font-size: var(--oj-typography-subheading-xs-font-size) !important;
  font-weight: var(--oj-typography-subheading-xs-font-weight) !important;
  line-height: var(--oj-typography-subheading-xs-line-height) !important;
}

.oj-typography-body-xl {
  font-size: var(--oj-typography-body-xl-font-size) !important;
  font-weight: normal !important;
  line-height: var(--oj-typography-body-xl-line-height) !important;
}

.oj-typography-body-lg,
.oj-typography-body-1 {
  font-size: var(--oj-typography-body-lg-font-size) !important;
  font-weight: normal !important;
  line-height: var(--oj-typography-body-lg-line-height) !important;
}

.oj-typography-body-md,
.oj-typography-body-2 {
  font-size: var(--oj-typography-body-md-font-size) !important;
  font-weight: normal !important;
  line-height: var(--oj-typography-body-md-line-height) !important;
}

.oj-typography-body-sm,
.oj-typography-body-3 {
  font-size: var(--oj-typography-body-sm-font-size) !important;
  font-weight: normal !important;
  line-height: var(--oj-typography-body-sm-line-height) !important;
}

.oj-typography-body-xs,
.oj-typography-caption-1 {
  font-size: var(--oj-typography-body-xs-font-size) !important;
  font-weight: normal !important;
  line-height: var(--oj-typography-body-xs-line-height) !important;
}

.oj-typography-body-2xs,
.oj-typography-caption-2 {
  font-size: var(--oj-typography-body-2xs-font-size) !important;
  font-weight: normal !important;
  line-height: var(--oj-typography-body-2xs-line-height) !important;
}

.oj-typography-semi-bold {
  font-weight: 600 !important;
}

.oj-typography-bold {
  font-weight: 700 !important;
}

/* typography                 */
/* -------------------------- */
@media screen and (max-width: 599.9px) {
  :root {
    --oj-typography-heading-2xl-font-size: 2.25rem;
    --oj-typography-heading-2xl-line-height: 1.2222;
    --oj-typography-heading-xl-font-size: 2rem;
    --oj-typography-heading-xl-line-height: 1.25;
    --oj-typography-heading-lg-font-size: 1.75rem;
    --oj-typography-heading-lg-line-height: 1.2857;
    --oj-typography-heading-md-font-size: 1.5rem;
    --oj-typography-heading-md-line-height: 1.3333;
    --oj-typography-heading-sm-font-size: 1.25rem;
    --oj-typography-heading-sm-line-height: 1.4;
    --oj-typography-heading-xs-font-size: 1.125rem;
    --oj-typography-heading-xs-line-height: 1.3333;
    --oj-typography-subheading-2xl-font-size: 2rem;
    --oj-typography-subheading-2xl-line-height: 1.25;
    --oj-typography-subheading-xl-font-size: 1.75rem;
    --oj-typography-subheading-xl-line-height: 1.2857;
    --oj-typography-subheading-lg-font-size: 1.5rem;
    --oj-typography-subheading-lg-line-height: 1.3333;
    --oj-typography-subheading-md-font-size: 1.25rem;
    --oj-typography-subheading-md-line-height: 1.4;
    --oj-typography-subheading-sm-font-size: 1.125rem;
    --oj-typography-subheading-sm-line-height: 1.3333;
    --oj-typography-subheading-xs-font-size: 0.859rem;
    --oj-typography-subheading-xs-line-height: 1.4545;
  }
}
:root.oj-scale-sm {
  --oj-typography-body-xl-font-size: 16px;
  --oj-typography-body-lg-font-size: 14px;
  --oj-typography-body-md-font-size: 12px;
  --oj-typography-body-sm-font-size: 12px;
  --oj-typography-body-xs-font-size: 12px;
  --oj-typography-body-2xs-font-size: 10px;
}

:root.oj-scale-md {
  --oj-typography-body-xl-font-size: 18px;
  --oj-typography-body-lg-font-size: 16px;
  --oj-typography-body-md-font-size: 14px;
  --oj-typography-body-sm-font-size: 12px;
  --oj-typography-body-xs-font-size: 12px;
  --oj-typography-body-2xs-font-size: 10px;
}

.oj-private-scale-lg {
  --oj-typography-heading-2xl-font-size: 40px;
  --oj-typography-heading-xl-font-size: 36px;
  --oj-typography-heading-lg-font-size: 32px;
  --oj-typography-heading-md-font-size: 28px;
  --oj-typography-heading-sm-font-size: 24px;
  --oj-typography-heading-xs-font-size: 20px;
  --oj-typography-subheading-2xl-font-size: 36px;
  --oj-typography-subheading-xl-font-size: 32px;
  --oj-typography-subheading-lg-font-size: 28px;
  --oj-typography-subheading-md-font-size: 24px;
  --oj-typography-subheading-sm-font-size: 20px;
  --oj-typography-subheading-xs-font-size: 16px;
  --oj-typography-body-xl-font-size: 20px;
  --oj-typography-body-lg-font-size: 18px;
  --oj-typography-body-md-font-size: 16px;
  --oj-typography-body-sm-font-size: 13.744px;
  --oj-typography-body-xs-font-size: 12px;
  --oj-typography-body-2xs-font-size: 10px;
}

oj-validation-group:not(.oj-complete) {
  visibility: hidden;
}

oj-waterfall-layout:not(.oj-complete) {
  visibility: hidden;
}

/* styling on the root */
oj-waterfall-layout {
  display: block;
  position: relative;
  overflow: auto;
}

/* styling to remove focus ring border on waterfall layout */
.oj-waterfall-layout:focus,
.oj-waterfalllayout-item:focus {
  outline: none;
}

.oj-waterfalllayout-item.oj-focus-highlight {
  outline: dotted 1px var(--oj-core-focus-border-color);
}

/* styling applied to item where the sole purpose is to determine its position only */
.oj-waterfalllayout-position-only {
  position: absolute;
  visibility: hidden;
}

/* styling on each item */
.oj-waterfalllayout-item {
  position: absolute;
  visibility: hidden;
}

/* suppress focus ring on item */
.oj-waterfalllayout-item-suppress-focus {
  outline: none;
}

/* Styling for skeleton card */
.oj-waterfalllayout-skeleton {
  position: absolute;
  width: 330px;
  height: 396px;
  border: 1px solid var(--oj-panel-border-color);
  border-radius: var(--oj-panel-border-radius);
  box-sizing: border-box;
  padding: var(--oj-core-spacing-4x);
  background-color: var(--oj-core-bg-color-content);
}

/* Styling for skeleton card content */
.oj-waterfalllayout-skeleton-content {
  width: 100%;
  height: 100%;
}

.oj-focus-highlight {
  color: #704b64;
}

.oj-web-applayout-header {
  border-top: 15px solid #704b64;
}

/*   estilos login  */
.container-login {
  display: flex;
  justify-content: center;
  margin-top: 8%;
  height: 360px;
}

.container-elements-form {
  display: flex;
  justify-content: space-between;
  box-shadow: 2px 8px 23px 0px rgba(0, 0, 0, 0.75);
  border-radius: 10px 10px 10px 10px;
  width: 60%;
}

.container-logo-login {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 50%;
  background-color: #704b64;
}

.login-form {
  text-align: center;
  width: 50%;
  padding: 30px 80px;
  align-items: flex-start;
  align-self: flex-start;
}

.login-form h3 {
  color: #848688;
}

.separacion-login {
  background-color: #704b64;
  height: 3px;
}

.k-right small a {
  color: #704b64;
  margin-top: 30px;
  display: block;
}

.btn-login {
  background-color: #704b64 !important;
  cursor: pointer !important;
}

oj-input-text {
  color: #704b64 !important;
}

.login-form oj-label {
  color: #704b64 !important;
}

.oj-text-field-container {
  border-color: #704b64 !important;
  outline: 0 none !important;
}

.oj-text-field-container:focus {
  box-shadow: 0 1px 1px #704b64 inset, 0 0 8px #966486 !important;
}

/* Estilos datos generales */
.datos-generales-border {
  border-left: 2px solid #EEEFF0;
  height: 500px;
}

.centrar-datos {
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
}

.grafica {
  text-align: center;
}

.text-color-primary {
  color: #704b64;
}

/* Estilos horario */
table tr:nth-child(even) {
  background-color: #eee !important;
}

/*  Estilos titulacion */
oj-radioset[value=Interno] {
  color: #704b64;
  font-weight: bold;
}

.tipoAsesorRBTN {
  padding-left: 80px;
}

.TAEInputs oj-input-text {
  margin-top: 25px;
}

.grdSolicitudExt {
  margin-top: 100px;
  float: right;
}

#tipoAsesor\|hint {
  font-weight: bold;
  color: #704b64;
}

.oj-required-inline-container {
  font-weight: bold;
  color: #704b64;
}

@media only screen and (max-width: 1023px) {
  /* Estilos login */
  .container-elements-form {
    justify-content: center;
    width: 100%;
  }
  .container-login {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 100%;
    margin-top: 0;
  }
  .container-logo-login {
    display: none;
  }
  /* Estilos datos generales */
  .datos-generales-border {
    display: none;
  }
  .grafica {
    margin: auto;
    text-align: center;
  }
  .status {
    margin-top: 100px;
    margin-bottom: 50px;
  }
  /* Estilos navbar collapsada */
  a.oj-navigationlist-item-content .oj-navigationlist-item-label {
    color: rgb(255, 255, 255) !important;
  }
  .oj-selected > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
    color: rgb(255, 255, 255) !important;
  }
  /* Estilos titulacion */
  .grdSolicitudExt {
    margin-top: 35px;
  }
  .tipoAsesorRBTN {
    padding-left: 0px;
  }
  /* Estilos CRM */
  .modal {
    width: auto;
    width: 100%;
    padding: 10px;
  }
  #popup_eliminar {
    width: auto;
  }
}