/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ==========================================================================
       HTML5 display definitions
       ========================================================================== */
/**
     * Correct `block` display not defined in IE 8/9.
     */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
     * Correct `inline-block` display not defined in IE 8/9.
     */
audio,
canvas,
video {
  display: inline-block; }

/**
     * Prevent modern browsers from displaying `audio` without controls.
     * Remove excess height in iOS 5 devices.
     */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
     * Address styling not present in IE 8/9.
     */
[hidden] {
  display: none; }

/* ==========================================================================
       Base
       ========================================================================== */
/**
     * 1. Set default font family to sans-serif.
     * 2. Prevent iOS text size adjust after orientation change, without disabling
     *    user zoom.
     */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
     * Remove default margin.
     */
body {
  margin: 0; }

/* ==========================================================================
       Links
       ========================================================================== */
/* ==========================================================================
       Typography
       ========================================================================== */
/**
     * Address variable `h1` font-size and margin within `section` and `article`
     * contexts in Firefox 4+, Safari 5, and Chrome.
     */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
     * Address styling not present in IE 8/9, Safari 5, and Chrome.
     */
abbr[title] {
  border-bottom: 1px dotted; }

/**
     * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
     */
b,
strong {
  font-weight: bold; }

/**
     * Address styling not present in Safari 5 and Chrome.
     */
dfn {
  font-style: italic; }

/**
     * Address differences between Firefox and other browsers.
     */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
     * Address styling not present in IE 8/9.
     */
mark {
  background: #ff0;
  color: #000; }

/**
     * Correct font family set oddly in Safari 5 and Chrome.
     */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

/**
     * Improve readability of pre-formatted text in all browsers.
     */
pre {
  white-space: pre-wrap; }

/**
     * Set consistent quote types.
     */
q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

/**
     * Address inconsistent and variable font size in all browsers.
     */
small {
  font-size: 80%; }

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

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* ==========================================================================
       Embedded content
       ========================================================================== */
/**
     * Remove border when inside `a` element in IE 8/9.
     */
img {
  border: 0; }

/**
     * Correct overflow displayed oddly in IE 9.
     */
svg:not(:root) {
  overflow: hidden; }

/* ==========================================================================
       Figures
       ========================================================================== */
/**
     * Address margin not present in IE 8/9 and Safari 5.
     */
figure {
  margin: 0; }

/* ==========================================================================
       Forms
       ========================================================================== */
/**
     * Define consistent border, margin, and padding.
     */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
     * 1. Correct `color` not being inherited in IE 8/9.
     * 2. Remove padding so people aren't caught out if they zero out fieldsets.
     */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
     * 1. Correct font family not being inherited in all browsers.
     * 2. Correct font size not being inherited in all browsers.
     * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
     */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
     * Address Firefox 4+ setting `line-height` on `input` using `!important` in
     * the UA stylesheet.
     */
button,
input {
  line-height: normal; }

/**
     * Address inconsistent `text-transform` inheritance for `button` and `select`.
     * All other form control elements do not inherit `text-transform` values.
     * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
     * Correct `select` style inheritance in Firefox 4+ and Opera.
     */
button,
select {
  text-transform: none; }

/**
     * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
     *    and `video` controls.
     * 2. Correct inability to style clickable `input` types in iOS.
     * 3. Improve usability and consistency of cursor style between image-type
     *    `input` and others.
     */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
     * Re-set default cursor for disabled elements.
     */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
     * 1. Address box sizing set to `content-box` in IE 8/9.
     * 2. Remove excess padding in IE 8/9.
     */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
     * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
     * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
     *    (include `-moz` to future-proof).
     */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
     * Remove inner padding and search cancel button in Safari 5 and Chrome
     * on OS X.
     */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
     * Remove inner padding and border in Firefox 4+.
     */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
     * 1. Remove default vertical scrollbar in IE 8/9.
     * 2. Improve readability and alignment in all browsers.
     */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/* ==========================================================================
       Tables
       ========================================================================== */
/**
     * Remove most spacing between table cells.
     */
table {
  border-collapse: collapse;
  border-spacing: 0; }

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

.oj-helper-hidden-accessible, .oj-radio,
.oj-checkbox {
  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; }

/* 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 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;
  width: 0;
  heiht: 0; }

/* html */
/* --------------------------------------------------------------- */
html {
  font-family: -apple-system, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em; }

/* body */
/* --------------------------------------------------------------- */
body {
  background-repeat: repeat;
  background-position: top left;
  color: #000;
  background-color: #ffffff; }

/* links */
/* --------------------------------------------------------------- */
a {
  color: #0572ce;
  line-height: inherit;
  text-decoration: none; }

a:visited {
  color: #0572ce; }

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

a:active {
  font-weight: normal;
  background-color: #d4d4d6;
  border-radius: 2px; }
  html.oj-slow-borderradius a:active {
    border-radius: 0; }

a.oj-disabled {
  color: #0572ce;
  opacity: 0.5;
  cursor: default;
  text-decoration: none; }

/* header */
/* --------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  color: #3a3a3a;
  font-family: inherit;
  font-style: normal;
  font-weight: normal;
  margin: 8px 0;
  padding: 0 0 2px; }

h1 {
  font-size: 1.75rem; }

h2 {
  font-size: 1.5rem; }

h3 {
  font-size: 1.25rem; }

h4 {
  font-size: 1rem; }

h5 {
  font-size: 0.875rem; }

.oj-header-border {
  border: solid #d5dfe5;
  border-width: 0 0 1px;
  padding: 0 0 7px; }

/* hr */
/* --------------------------------------------------------------- */
hr {
  border: solid #e7e7e9;
  border-width: 1px 0 0;
  margin: 7px 0; }

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

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

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

.oj-text-primary-color {
  color: #000; }

.oj-text-secondary-color {
  color: #595959; }

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

/* Icons
    --------------------------------------------------------------------*/
@font-face {
  font-family: 'Alta Icon Font';
  src: url("fonts/JetFW_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-panel-drag-icon, .oj-panel-expand-icon, .oj-panel-collapse-icon, .oj-panel-remove-icon, .oj-web-applayout-offcanvas-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: #000;
  text-align: center;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  .oj-fwk-icon:before, .oj-panel-drag-icon:before, .oj-panel-expand-icon:before, .oj-panel-collapse-icon:before, .oj-panel-remove-icon:before, .oj-web-applayout-offcanvas-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;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }
  .oj-icon:before {
    display: inline-block;
    -moz-box-sizing: content-box;
    box-sizing: content-box; }

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

a .oj-clickable-icon, a .oj-tabs-tab-icon,
a.oj-clickable-icon,
a.oj-tabs-tab-icon,
a.oj-clickable-icon-nocontext,
a:visited .oj-clickable-icon,
a:visited .oj-tabs-tab-icon,
a:visited.oj-clickable-icon,
a.oj-tabs-tab-icon:visited,
a:visited.oj-clickable-icon-nocontext,
.oj-default .oj-clickable-icon,
.oj-default .oj-tabs-tab-icon,
.oj-default.oj-clickable-icon,
.oj-default.oj-tabs-tab-icon,
.oj-default.oj-clickable-icon-nocontext {
  color: #878c90; }

a:hover .oj-clickable-icon, a:hover .oj-tabs-tab-icon,
a:hover.oj-clickable-icon,
a.oj-tabs-tab-icon:hover,
a:hover.oj-clickable-icon-nocontext,
.oj-hover .oj-clickable-icon,
.oj-hover .oj-tabs-tab-icon,
.oj-hover.oj-clickable-icon,
.oj-hover.oj-tabs-tab-icon,
.oj-hover.oj-clickable-icon-nocontext {
  color: #85bbe7; }

a:active .oj-clickable-icon, a:active .oj-tabs-tab-icon,
a:active.oj-clickable-icon,
a.oj-tabs-tab-icon:active,
a:active.oj-clickable-icon-nocontext,
.oj-active .oj-clickable-icon,
.oj-active .oj-tabs-tab-icon,
.oj-active.oj-clickable-icon,
.oj-active.oj-tabs-tab-icon,
.oj-active.oj-clickable-icon-nocontext {
  color: #0572ce; }

a.oj-selected .oj-clickable-icon, a.oj-selected .oj-tabs-tab-icon,
a.oj-selected.oj-clickable-icon,
a.oj-selected.oj-tabs-tab-icon,
a.oj-selected.oj-clickable-icon-nocontext,
.oj-selected .oj-clickable-icon,
.oj-selected .oj-tabs-tab-icon,
.oj-selected.oj-clickable-icon,
.oj-selected.oj-tabs-tab-icon,
.oj-selected.oj-clickable-icon-nocontext {
  color: #0572ce; }

a.oj-disabled .oj-clickable-icon, a.oj-disabled .oj-tabs-tab-icon,
a.oj-disabled.oj-clickable-icon,
a.oj-disabled.oj-tabs-tab-icon,
a.oj-disabled.oj-clickable-icon-nocontext,
.oj-disabled .oj-clickable-icon,
.oj-disabled .oj-tabs-tab-icon,
.oj-disabled a .oj-clickable-icon,
.oj-disabled a .oj-tabs-tab-icon,
.oj-disabled.oj-clickable-icon,
.oj-disabled.oj-tabs-tab-icon,
.oj-disabled.oj-clickable-icon-nocontext {
  color: #878c90;
  opacity: 0.5; }

.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-rowexpander-lazyload-icon:before {
  content: url("../common/images/node_anim.gif"); }

.oj-fwk-icon-status-error2, .oj-train-icon.oj-error,
.oj-fwk-icon-status-warning2,
.oj-train-icon.oj-warning,
.oj-fwk-icon-status-info2,
.oj-train-icon.oj-info,
.oj-fwk-icon-status-confirmation2,
.oj-train-icon.oj-confirmation {
  height: 9px;
  width: 9px;
  font-size: 9px; }

.oj-fwk-icon-status-confirmation2:before, .oj-train-icon.oj-confirmation:before {
  content: url("../common/images/alertModifier_complete.png"); }

.oj-fwk-icon-status-info2:before, .oj-train-icon.oj-info:before {
  content: url("../common/images/alertModifier_info.png"); }

.oj-fwk-icon-status-warning2:before, .oj-train-icon.oj-warning:before {
  content: url("../common/images/alertModifier_warning.png"); }

.oj-fwk-icon-status-error2:before, .oj-train-icon.oj-error:before {
  content: url("../common/images/alertModifier_error.png"); }

.oj-fwk-icon-status-confirmation, .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-message-status-icon.oj-message-error-icon, .oj-fwk-icon-folder-open, .oj-expanded:not(.oj-tree-type) > a .oj-tree-node-icon, .oj-fwk-icon-folder-collapsed, .oj-collapsed:not(.oj-tree-type) > a .oj-tree-node-icon, .oj-fwk-icon-document, .oj-tree-leaf:not(.oj-tree-type) a .oj-tree-node-icon {
  width: 16px;
  height: 16px;
  font-size: 16px; }

.oj-fwk-icon-status-confirmation:before, .oj-message-status-icon.oj-message-confirmation-icon:before {
  content: url("images/stat_confirm_16.png"); }

.oj-fwk-icon-status-info:before, .oj-message-status-icon.oj-message-info-icon:before {
  content: url("images/stat_info_16.png"); }

.oj-fwk-icon-status-warning:before, .oj-message-status-icon.oj-message-warning-icon:before {
  content: url("images/stat_warn_16.png"); }

.oj-fwk-icon-status-error:before, .oj-message-status-icon.oj-message-error-icon:before {
  content: url("images/stat_error_16.png"); }

.oj-fwk-icon-folder-open:before, .oj-expanded:not(.oj-tree-type) > a .oj-tree-node-icon:before {
  content: url("images/hier_folderopen_16_mono.png"); }

.oj-fwk-icon-folder-collapsed:before, .oj-collapsed:not(.oj-tree-type) > a .oj-tree-node-icon:before {
  content: url("images/hier_folderclose_16_mono.png"); }

.oj-fwk-icon-document:before, .oj-tree-leaf:not(.oj-tree-type) a .oj-tree-node-icon:before {
  content: url("images/hier_leaf_16_mono.png"); }

/* Icon Font Icons =========== */
.oj-fwk-icon-cross:before, .oj-panel-remove-icon:before, .oj-dialog-close-icon:before, .oj-combobox-clear-entry-icon:before, .oj-select-clear-entry-icon:before {
  content: "\e608"; }

.oj-fwk-icon-cross02:before {
  content: "\e60c"; }

.oj-fwk-icon-cross03:before, .oj-tabs-close-icon:before {
  content: "\e60e"; }

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

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

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

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

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

.oj-fwk-icon-drag:before, .oj-panel-drag-icon:before {
  content: "\e610"; }

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

.oj-fwk-icon-checkmark:before {
  content: "\e615"; }

.oj-fwk-icon-plus:before, .oj-inputnumber-up-icon:before {
  content: "\e616"; }

.oj-fwk-icon-minus:before, .oj-inputnumber-down-icon:before {
  content: "\e617"; }

.oj-fwk-icon-minimize:before, .oj-panel-collapse-icon:before {
  content: "\e613"; }
  html[dir="rtl"] .oj-fwk-icon-minimize:before, html[dir="rtl"] .oj-panel-collapse-icon:before {
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1); }

.oj-fwk-icon-maximize:before, .oj-panel-expand-icon:before {
  content: "\e614"; }
  html[dir="rtl"] .oj-fwk-icon-maximize:before, html[dir="rtl"] .oj-panel-expand-icon:before {
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1); }

.oj-fwk-icon-arrow-e:before, .oj-fwk-icon-arrow-w:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-start:before, html[dir="rtl"] .oj-fwk-icon-arrow-end:before, html[dir="rtl"] .oj-listview-collapse-icon:before, .oj-fwk-icon-arrow-n:before, .oj-table-column-header-asc-icon:before, .oj-fwk-icon-arrow-s:before, .oj-table-column-header-dsc-icon:before, .oj-listview-expand-icon:before, html[dir="rtl"] .oj-fwk-icon-arrow-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-end:before, html:not([dir="rtl"]) .oj-listview-collapse-icon:before {
  content: "\e600"; }

.oj-fwk-icon-arrow-w:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-start:before, html[dir="rtl"] .oj-fwk-icon-arrow-end:before, html[dir="rtl"] .oj-listview-collapse-icon:before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-arrow-n:before, .oj-table-column-header-asc-icon:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.oj-fwk-icon-arrow-s:before, .oj-table-column-header-dsc-icon:before, .oj-listview-expand-icon:before {
  -webkit-transform: scale(-1, 1) rotate(90deg);
  transform: scale(-1, 1) rotate(90deg); }

.oj-fwk-icon-arrow-se:before, .oj-fwk-icon-arrow-sw:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-s-start:before, html[dir="rtl"] .oj-fwk-icon-arrow-s-end:before, .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, .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, html[dir="rtl"] .oj-fwk-icon-arrow-s-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-s-end:before {
  content: "\e601"; }

.oj-fwk-icon-arrow-sw:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-s-start:before, html[dir="rtl"] .oj-fwk-icon-arrow-s-end:before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.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 {
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1); }

.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 {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1); }

.oj-fwk-icon-arrow02-s:before, .oj-fwk-icon-arrow02-w:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow02-start:before, html[dir="rtl"] .oj-fwk-icon-arrow02-end:before, .oj-fwk-icon-arrow02-n:before, .oj-fwk-icon-arrow02-e:before, html[dir="rtl"] .oj-fwk-icon-arrow02-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow02-end:before, .oj-button-menu-dropdown-icon:before, .oj-combobox-open-icon:before, .oj-select-open-icon:before {
  content: "\e602"; }

.oj-fwk-icon-arrow02-w:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow02-start:before, html[dir="rtl"] .oj-fwk-icon-arrow02-end:before {
  -webkit-transform: scale(1, -1) rotate(90deg);
  transform: scale(1, -1) rotate(90deg); }

.oj-fwk-icon-arrow02-n:before {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1); }

.oj-fwk-icon-arrow02-e:before, html[dir="rtl"] .oj-fwk-icon-arrow02-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow02-end:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.oj-fwk-icon-arrow03-e:before, .oj-fwk-icon-arrow03-w:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow03-start:before, html[dir="rtl"] .oj-fwk-icon-arrow03-end:before, html[dir="rtl"] .oj-collapsible-close-icon:before, html[dir="rtl"] .oj-rowexpander-expand-icon:before, html[dir="rtl"] .oj-collapsed > .oj-tree-disclosure-icon:before, html[dir="rtl"] .oj-tree-drop-ptr:before, .oj-fwk-icon-arrow03-n:before, .oj-datagrid-sort-ascending-icon:before, .oj-fwk-icon-arrow03-s:before, .oj-collapsible-open-icon:before, .oj-datagrid-sort-descending-icon: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-collapsible-close-icon:before, html:not([dir="rtl"]) .oj-rowexpander-expand-icon:before, html:not([dir="rtl"]) .oj-collapsed > .oj-tree-disclosure-icon:before, html:not([dir="rtl"]) .oj-tree-drop-ptr:before {
  content: "\e603"; }

.oj-fwk-icon-arrow03-w:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow03-start:before, html[dir="rtl"] .oj-fwk-icon-arrow03-end:before, html[dir="rtl"] .oj-collapsible-close-icon:before, html[dir="rtl"] .oj-rowexpander-expand-icon:before, html[dir="rtl"] .oj-collapsed > .oj-tree-disclosure-icon:before, html[dir="rtl"] .oj-tree-drop-ptr:before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-arrow03-n:before, .oj-datagrid-sort-ascending-icon:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.oj-fwk-icon-arrow03-s:before, .oj-collapsible-open-icon:before, .oj-datagrid-sort-descending-icon:before {
  -webkit-transform: scale(-1, 1) rotate(90deg);
  transform: scale(-1, 1) rotate(90deg); }

.oj-fwk-icon-arrow03-se:before, .oj-fwk-icon-arrow03-sw: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-rowexpander-collapse-icon:before, html[dir="rtl"] .oj-expanded > .oj-tree-disclosure-icon:before, .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, .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, 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-rowexpander-collapse-icon:before, html:not([dir="rtl"]) .oj-expanded > .oj-tree-disclosure-icon:before {
  content: "\e604"; }

.oj-fwk-icon-arrow03-sw: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-rowexpander-collapse-icon:before, html[dir="rtl"] .oj-expanded > .oj-tree-disclosure-icon:before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.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 {
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1); }

.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 {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1); }

.oj-fwk-icon-caret-e:before, .oj-fwk-icon-caret-s:before, .oj-conveyorbelt-overflow-icon.oj-bottom:before, .oj-filmstrip-arrow-icon.oj-bottom:before, .oj-navigationlist-collapsible .oj-navigationlist-expand-icon:before, .oj-fwk-icon-caret-w: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-navigationlist-previous-icon:before, html:not([dir="rtl"]) .oj-hybrid-applayout-header-icon-back:before, html[dir="rtl"] .oj-fwk-icon-caret-end: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, .oj-fwk-icon-caret-n:before, .oj-conveyorbelt-overflow-icon.oj-top:before, .oj-filmstrip-arrow-icon.oj-top: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-navigationlist-previous-icon:before, html[dir="rtl"] .oj-hybrid-applayout-header-icon-back:before, html:not([dir="rtl"]) .oj-fwk-icon-caret-end: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: "\e605"; }

.oj-fwk-icon-caret-s:before, .oj-conveyorbelt-overflow-icon.oj-bottom:before, .oj-filmstrip-arrow-icon.oj-bottom:before, .oj-navigationlist-collapsible .oj-navigationlist-expand-icon:before {
  -webkit-transform: scale(-1, 1) rotate(90deg);
  transform: scale(-1, 1) rotate(90deg); }

.oj-fwk-icon-caret-w: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-navigationlist-previous-icon:before, html:not([dir="rtl"]) .oj-hybrid-applayout-header-icon-back:before, html[dir="rtl"] .oj-fwk-icon-caret-end: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 {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-caret-n:before, .oj-conveyorbelt-overflow-icon.oj-top:before, .oj-filmstrip-arrow-icon.oj-top:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.oj-fwk-icon-caret02-e:before, .oj-fwk-icon-caret02-s:before, .oj-pagingcontrol-nav-next-vertical-icon:before, .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, .oj-fwk-icon-caret02-n:before, .oj-pagingcontrol-nav-previous-vertical-icon: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: "\e606"; }

.oj-fwk-icon-caret02-s:before, .oj-pagingcontrol-nav-next-vertical-icon:before {
  -webkit-transform: scale(-1, 1) rotate(90deg);
  transform: scale(-1, 1) rotate(90deg); }

.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 {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-caret02-n:before, .oj-pagingcontrol-nav-previous-vertical-icon:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.oj-fwk-icon-caret02end-e:before, .oj-fwk-icon-caret02end-s:before, .oj-pagingcontrol-nav-last-vertical-icon:before, .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, .oj-fwk-icon-caret02end-n:before, .oj-pagingcontrol-nav-first-vertical-icon: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: "\e607"; }

.oj-fwk-icon-caret02end-s:before, .oj-pagingcontrol-nav-last-vertical-icon:before {
  -webkit-transform: scale(-1, 1) rotate(90deg);
  transform: scale(-1, 1) rotate(90deg); }

.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 {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-caret02end-n:before, .oj-pagingcontrol-nav-first-vertical-icon:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.oj-fwk-icon-caret03-e:before, .oj-fwk-icon-caret03-s:before, .oj-fwk-icon-caret03-w: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, html[dir="rtl"] .oj-listview-drill-icon:before, .oj-fwk-icon-caret03-n: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, html:not([dir="rtl"]) .oj-listview-drill-icon:before {
  content: "\e612"; }

.oj-fwk-icon-caret03-s:before {
  -webkit-transform: scale(-1, 1) rotate(90deg);
  transform: scale(-1, 1) rotate(90deg); }

.oj-fwk-icon-caret03-w: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, html[dir="rtl"] .oj-listview-drill-icon:before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.oj-fwk-icon-caret03-n:before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

/* resizable */
/* --------------------------------------------------------------- */
.oj-resizable {
  position: relative; }

.oj-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  z-index: 900; }

.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 #e7e7e9;
  background-color: #ffffff;
  border-radius: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0.5rem;
  position: relative; }

.oj-panel-alt1 {
  background-color: #f6f6f7;
  border-color: #c8c8c8; }

.oj-panel-alt2 {
  background-color: #dae9f5;
  border-color: #aed8fa; }

.oj-panel-alt3 {
  background-color: #fef9e8;
  border-color: #fef3ce; }

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

.oj-panel-alt5 {
  background-color: #e2e2e5;
  border-color: #c8c8c8; }

.oj-panel.oj-selected {
  border-color: #0572ce; }

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

.oj-panel-shadow-sm {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
  html.oj-slow-boxshadow .oj-panel-shadow-sm {
    box-shadow: none; }

.oj-panel-shadow-md {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }
  html.oj-slow-boxshadow .oj-panel-shadow-md {
    box-shadow: none; }

.oj-panel-shadow-lg {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); }
  html.oj-slow-boxshadow .oj-panel-shadow-lg {
    box-shadow: none; }

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

.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.25rem; }
  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 {
  margin-bottom: 10px;
  -webkit-tap-highlight-color: transparent; }

/* collapsible with "showDetail" style */
/* ------------------------------------*/
/*
     * this is the default style for collapsible header
     */
.oj-collapsible-header {
  display: block;
  position: relative;
  font-weight: bold;
  color: #3a3a3a;
  padding: 5px 0 3px 0;
  margin: 0; }

/*
     * this is the default style for collapsible content
     */
.oj-collapsible-content {
  color: #000;
  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: 1.75rem; }

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

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

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

/*
     * applied to the disabled collapsible header
     */
.oj-collapsible.oj-disabled > .oj-collapsible-header {
  color: #9e9e9e; }

/*
     * 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 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 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 3px 5px 5px;
  outline-offset: -5px; }

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

/*
     * For disabled headers
     */
.oj-collapsible.oj-disabled .oj-collapsible-header-icon {
  color: #878c90;
  opacity: 0.5; }

.oj-collapsible-header {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center; }

.oj-collapsible-header-icon {
  padding: 4px; }

.oj-collapsible-header a,
.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 a, html:not([dir="rtl"])
  .oj-collapsible-header .oj-collapsible-header-icon {
    margin: 0 3px 0 -7px; }
  html[dir="rtl"] .oj-collapsible-header a, html[dir="rtl"]
  .oj-collapsible-header .oj-collapsible-header-icon {
    margin: 0 -7px 0 3px; }

html:not([dir="rtl"]) .oj-collapsible-content {
  padding-left: 20px; }

html[dir="rtl"] .oj-collapsible-content {
  padding-right: 20px; }

/* accordion */
/* --------------------------------------------------------------- */
/*
     * applied to the disabled accordion header
     */
.oj-accordion-collapsible.oj-disabled > .oj-collapsible-header {
  color: #9e9e9e;
  background-image: none;
  background-color: #fafafa; }

/*
     * 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 #d5dfe5;
  border-width: 0 0 1px;
  font-size: 1.25rem;
  background-color: #f6f6f7; }

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

/*
     * border manipulation when top and bottom border present
     */
/* conveyorbelt */
/* --------------------------------------------------------------- */
.oj-conveyorbelt {
  position: relative; }

/* overflow indicators */
.oj-conveyorbelt-overflow-indicator {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 1.8125rem;
  height: 1.8125rem;
  line-height: 1.8125rem;
  text-align: center;
  cursor: default;
  border-radius: 2px;
  border: 1px solid; }
  html.oj-slow-borderradius .oj-conveyorbelt-overflow-indicator {
    border-radius: 0; }

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

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

.oj-conveyorbelt-overflow-indicator.oj-active,
.oj-conveyorbelt-overflow-indicator.oj-active.oj-hover {
  background-color: transparent;
  border-color: transparent;
  opacity: 0.2; }

/* 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: #0572ce; }

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

.oj-conveyorbelt-overflow-indicator.oj-active .oj-conveyorbelt-overflow-icon,
.oj-conveyorbelt-overflow-indicator.oj-active.oj-hover .oj-conveyorbelt-overflow-icon {
  color: #0572ce; }

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

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

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

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

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

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

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

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

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 {
  -webkit-transform: translate3d(-100%, 0, 0);
  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 {
  -webkit-transform: translate3d(100%, 0, 0);
  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 {
  -webkit-transform: translate3d(100%, 0, 0);
  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 {
  -webkit-transform: translate3d(-100%, 0, 0);
  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 {
  -webkit-transform: translate3d(0, -100%, 0);
  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 {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0); }

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

.oj-filmstrip-vertical .oj-filmstrip-arrow-container {
  -webkit-flex-direction: column;
  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%;
  -webkit-transform: translate3d(0, -50%, 0);
  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%;
  -webkit-transform: translate3d(-50%, 0, 0);
  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%;
  -webkit-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0); }

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

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

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

.oj-filmstrip-arrow.oj-active,
.oj-filmstrip-arrow.oj-active.oj-hover {
  background-color: transparent;
  border-color: transparent;
  opacity: 0.2; }

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

.oj-filmstrip-arrow.oj-default .oj-filmstrip-arrow-icon {
  color: #0572ce; }

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

.oj-filmstrip-arrow.oj-active .oj-filmstrip-arrow-icon,
.oj-filmstrip-arrow.oj-active.oj-hover .oj-filmstrip-arrow-icon {
  color: #0572ce; }

.oj-filmstrip-arrow-transition {
  transition: opacity 0.2s;
  -webkit-transition-timing-function: ease-in-out;
  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-masonrylayout {
  min-height: 1px;
  min-width: 1px;
  position: relative; }

.oj-masonrylayout-transition-resize-to {
  transition: width 0.4s, height 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.oj-masonrylayout-transition-resize-to-fast {
  transition: width 0.2s, height 0.2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

/* masonry tile */
.oj-masonrylayout-tile-transition-move-to {
  transition: top 0.4s, left 0.4s, right 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.oj-masonrylayout-tile-transition-move-to-fast {
  transition: top 0.2s, left 0.2s, right 0.2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.oj-masonrylayout-tile-transition-resize-to {
  transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s, right 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.oj-masonrylayout-tile-transition-hide-from {
  opacity: 1; }

.oj-masonrylayout-tile-transition-hide-to {
  transition: opacity 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  opacity: 0; }

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

.oj-masonrylayout-tile-transition-show-to {
  transition: opacity 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  opacity: 1; }

.oj-masonrylayout-tile-1x1, .oj-masonrylayout-tile-1x2, .oj-masonrylayout-tile-1x3, .oj-masonrylayout-tile-2x1, .oj-masonrylayout-tile-2x2, .oj-masonrylayout-tile-2x3, .oj-masonrylayout-tile-3x1, .oj-masonrylayout-tile-3x2 {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 5px;
  position: absolute; }

.oj-masonrylayout-tile-1x1.oj-drop, .oj-masonrylayout-tile-1x2.oj-drop, .oj-masonrylayout-tile-1x3.oj-drop, .oj-masonrylayout-tile-2x1.oj-drop, .oj-masonrylayout-tile-2x2.oj-drop, .oj-masonrylayout-tile-2x3.oj-drop, .oj-masonrylayout-tile-3x1.oj-drop, .oj-masonrylayout-tile-3x2.oj-drop {
  background-color: #D9F4FA;
  border: 1px solid #C3EAF3;
  opacity: .75; }

.oj-masonrylayout-tile-1x1.oj-drag, .oj-masonrylayout-tile-1x2.oj-drag, .oj-masonrylayout-tile-1x3.oj-drag, .oj-masonrylayout-tile-2x1.oj-drag, .oj-masonrylayout-tile-2x2.oj-drag, .oj-masonrylayout-tile-2x3.oj-drag, .oj-masonrylayout-tile-3x1.oj-drag, .oj-masonrylayout-tile-3x2.oj-drag {
  opacity: .75; }

.oj-masonrylayout-tile-1x1 {
  width: 150px;
  height: 150px; }

.oj-masonrylayout-tile-1x2 {
  width: 150px;
  height: 310px; }

.oj-masonrylayout-tile-1x3 {
  width: 150px;
  height: 470px; }

.oj-masonrylayout-tile-2x1 {
  width: 310px;
  height: 150px; }

.oj-masonrylayout-tile-2x2 {
  width: 310px;
  height: 310px; }

.oj-masonrylayout-tile-2x3 {
  width: 310px;
  height: 470px; }

.oj-masonrylayout-tile-3x1 {
  width: 470px;
  height: 150px; }

.oj-masonrylayout-tile-3x2 {
  width: 470px;
  height: 310px; }

/* tabs */
/* --------------------------------------------------------------- */
/*
     * 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: -webkit-flex;
  display: flex; }

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

/*
     * applied to a tab when it's selected
     */
.oj-tabs-tab.oj-selected,
.oj-tabs-tab.oj-active .oj-tabs-close-icon,
.oj-tabs-tab.oj-active .oj-tabs-anchor {
  background-color: #ffffff; }

.oj-tabs-tab {
  -webkit-tap-highlight-color: transparent; }

/*
     * applied to the tab header
     */
.oj-tabs-anchor {
  cursor: pointer;
  outline: none;
  display: inline-block;
  padding: .55rem .85rem .65rem .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;
  color: #0572ce;
  text-decoration: none; }

/*
     * 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
     */
/*
     * applied to the horizontal tab
     */
.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.ui-sortable-placeholder {
  margin-bottom: -1rem; }

.oj-tabs-horizontal.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab.ui-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 {
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto; }

/*
     * For the facet before the tab bar, no grow or shrink when resized
     */
.oj-tabs-facet.oj-start {
  -webkit-flex: 0 0 auto;
  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: -webkit-flex;
  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.5rem;
  color: #000;
  background-color: #ffffff; }

/* vertical tabs */
/* --------------------------------------------------------------- */
/*
     * applied to the vertical tab bar
     */
.oj-tabs-vertical > .oj-tabs-nav-root {
  margin: 0;
  -webkit-flex: 0 0 auto;
  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;
  -webkit-flex: 1 1;
  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: #ffffff;
  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: #0572ce; }

/*
     * applied to the selected tab title text
     */
.oj-tabs-tab.oj-selected .oj-tabs-title {
  font-weight: bold; }

/*
     * 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: #0572ce;
  opacity: 0.5; }

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

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

html[dir="rtl"] .oj-first-child-selected > .oj-tabs-nav-root .oj-tabs-tab.oj-selected .oj-tabs-tab-content {
  border-right-color: #e7e7e9; }

/* 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 #e7e7e9;
  border-radius: 5px;
  margin-top: -1px; }
  html.oj-slow-borderradius .oj-tabs-panel {
    border-radius: 0; }

/*
     * 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; }
  html.oj-slow-borderradius .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab {
    border-radius: 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; }
  html.oj-slow-borderradius .oj-tabs-vertical > .oj-tabs-nav-root .oj-tabs-tab-content {
    border-radius: 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: #e7e7e9; }

/* 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: 3px 0 0 3px;
  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 3px 3px 0;
  border-left-color: transparent; }

html.oj-slow-borderradius .oj-tabs-vertical.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected, html.oj-slow-borderradius
.oj-tabs-vertical.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-radius: 0; }

/*
     * 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 3px 3px 0;
  border-color: #e7e7e9;
  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: 3px 0 0 3px;
  border-color: #e7e7e9;
  margin-right: -1px;
  border-right-color: transparent; }

html.oj-slow-borderradius .oj-tabs-vertical.oj-tabs-text-icon.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected, html.oj-slow-borderradius
.oj-tabs-vertical.oj-tabs-icon-only.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
  border-radius: 0; }

/* 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: 3px 3px 0 0; }
  html.oj-slow-borderradius .oj-tabs-horizontal.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected, html.oj-slow-borderradius
  .oj-tabs-horizontal.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
    border-radius: 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: #e7e7e9;
  border-top-color: transparent;
  border-radius: 0 0 3px 3px; }
  html.oj-slow-borderradius .oj-tabs-horizontal.oj-tabs-text-icon.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab.oj-selected, html.oj-slow-borderradius
  .oj-tabs-horizontal.oj-tabs-icon-only.oj-tabs-bottom > .oj-tabs-nav-root .oj-tabs-tab.oj-selected {
    border-radius: 0; }

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

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

/* 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%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 3.5rem; }

/* Classes that define the bar and shadow connecting the steps */
.oj-train-connector,
.oj-train-connector-fill {
  position: relative;
  height: 8px;
  width: 100%;
  top: 7px;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.oj-train-connector {
  background-color: #e2e2e5; }

/* Shades in the connector to the position of the selected step */
.oj-train-connector-fill {
  background-color: #d4d4d6;
  margin-top: -8px; }

/* Connector circle behind the individual step buttons which matches the connector */
.oj-train-button-connector {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-block;
  border-radius: 50%;
  background: #e2e2e5;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  html.oj-slow-borderradius .oj-train-button-connector {
    border-radius: 0; }

.oj-train-button-connector.oj-train-fill {
  background-color: #d4d4d6;
  background-image: none;
  top: 0; }

/* Inividual step buttons that are used for train navigation */
.oj-train-button {
  cursor: pointer;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  width: 14px;
  height: 14px;
  margin: 4px;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  html.oj-slow-borderradius .oj-train-button {
    border-radius: 0; }

.oj-train-button.oj-default {
  border-color: #0572ce;
  background-color: #0572ce; }

.oj-train-button.oj-visited {
  border-color: #0572ce;
  background-color: #ffffff; }

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

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

.oj-train-button.oj-disabled {
  border-color: #0572ce;
  background-color: #0572ce;
  opacity: 0.5;
  cursor: default; }

.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: 7rem;
  text-align: center;
  display: inline-block;
  white-space: nowrap; }

.oj-train-label-wrapper {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-top: 1px; }

.oj-train-label {
  text-decoration: none;
  margin-right: 5px;
  margin-left: 5px;
  color: #0572ce;
  text-align: center; }

.oj-train-label.oj-visited {
  color: #72007C; }

.oj-train-label.oj-disabled {
  text-decoration: none;
  font-weight: normal;
  color: #0572ce;
  opacity: 0.5; }

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

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

/* The message icon to be displayed on the step */
.oj-train-icon {
  position: absolute;
  margin-bottom: 1px;
  aria-hidden: true;
  bottom: 4px; }
  html:not([dir="rtl"]) .oj-train-icon {
    right: 4px; }
  html[dir="rtl"] .oj-train-icon {
    left: 4px; }

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

.oj-hicontrast .oj-train-button.oj-selected {
  border-width: 7px; }

.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: 4px solid; }

/* button */
/* --------------------------------------------------------------- */
.oj-button {
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  border: 1px solid;
  margin-bottom: 4px;
  text-align: center;
  white-space: nowrap;
  border-radius: 2px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 2.25rem;
  line-height: 2.25rem;
  font-size: 1.063rem;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent; }
  html.oj-slow-borderradius .oj-button {
    border-radius: 0; }

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

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

/* The <label> of toggle (radio and checkbox) buttons */
.oj-button-label {
  cursor: inherit;
  display: inline-block; }

/* 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-sm.oj-button {
  height: 1.5615rem;
  line-height: 1.5615rem;
  font-size: 0.875rem; }

.oj-button-lg.oj-button {
  height: 2.49975rem;
  line-height: 2.49975rem;
  font-size: 1.125rem; }

.oj-button-xl.oj-button {
  height: 2.925rem;
  line-height: 2.925rem;
  font-size: 1.25rem; }

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

.oj-button:focus {
  outline: none; }

.oj-button.oj-focus {
  outline: dotted 1px #ffffff;
  outline: -webkit-focus-ring-color auto; }

.oj-button.oj-disabled {
  cursor: default; }

/* Full-chrome buttons have chrome (background and border) in all states (default, 
     * focus-only, disabled, hover, active, selected, ...).
     */
.oj-button.oj-button-full-chrome,
.oj-button.oj-button-full-chrome:link,
.oj-button.oj-button-full-chrome:visited,
.oj-button.oj-button-full-chrome:hover,
.oj-button.oj-button-full-chrome: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.oj-default.oj-button-full-chrome,
.oj-button.oj-focus-only.oj-button-full-chrome {
  background-color: #0572ce;
  background-image: none;
  border-color: #0572ce;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button.oj-default.oj-button-full-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button.oj-hover.oj-button-full-chrome {
  background-color: #0683ec;
  border-color: #0683ec;
  color: #ffffff;
  box-shadow: none; }

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

/* 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.oj-active.oj-button-full-chrome {
  background-color: #044f91;
  border-color: #044f91;
  color: #ffffff;
  box-shadow: none; }

.oj-button.oj-active.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button.oj-selected.oj-button-full-chrome {
  background-color: #044f91;
  border-color: #044f91;
  color: #ffffff;
  box-shadow: none; }

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

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

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

.oj-button.oj-disabled.oj-button-full-chrome {
  background-color: #0572ce;
  background-image: none;
  border-color: #0572ce;
  color: #ffffff;
  box-shadow: none;
  opacity: 0.5; }

.oj-button.oj-disabled.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button.oj-disabled.oj-selected.oj-button-full-chrome {
  color: #ffffff;
  background-color: #044f91;
  border-color: #044f91; }

.oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-icon {
  color: #ffffff; }

/* 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.oj-default.oj-button-half-chrome,
.oj-button.oj-focus-only.oj-button-half-chrome,
.oj-button.oj-disabled.oj-button-half-chrome {
  border-color: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none; }

.oj-button.oj-default.oj-button-half-chrome,
.oj-button.oj-focus-only.oj-button-half-chrome {
  text-shadow: none;
  color: #0572ce; }

.oj-button.oj-hover.oj-button-half-chrome {
  color: #85BBE7;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none; }

.oj-button.oj-active.oj-button-half-chrome {
  color: #0572ce;
  background-color: transparent;
  border-color: transparent;
  opacity: 0.2;
  box-shadow: none; }

.oj-button.oj-selected.oj-button-half-chrome {
  color: #ffffff;
  background-color: #0572ce;
  border-color: #0572ce;
  box-shadow: none; }

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

.oj-button.oj-disabled.oj-button-half-chrome {
  color: #000000;
  opacity: 0.3; }

.oj-button.oj-disabled.oj-selected.oj-button-half-chrome {
  color: #ffffff;
  background-color: #0572ce;
  border-color: #0572ce; }

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

.oj-button.oj-default.oj-button-half-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-half-chrome .oj-button-icon {
  color: #0572ce; }

.oj-button.oj-hover.oj-button-half-chrome .oj-button-icon {
  color: #85BBE7; }

.oj-button.oj-active.oj-button-half-chrome .oj-button-icon {
  color: #0572ce; }

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

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

.oj-button.oj-disabled.oj-button-half-chrome .oj-button-icon {
  color: #000000; }

.oj-button.oj-disabled.oj-selected.oj-button-half-chrome .oj-button-icon {
  color: #ffffff; }

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

.oj-button.oj-default.oj-button-outlined-chrome,
.oj-button.oj-focus-only.oj-button-outlined-chrome {
  text-shadow: none;
  color: #0572ce; }

.oj-button.oj-hover.oj-button-outlined-chrome {
  color: #85BBE7;
  background-color: transparent;
  border-color: #85BBE7;
  box-shadow: none; }

.oj-button.oj-active.oj-button-outlined-chrome {
  color: #0572ce;
  background-color: rgba(5, 114, 206, 0.15);
  border-color: #0572ce;
  opacity: 1;
  box-shadow: none; }

.oj-button.oj-selected.oj-button-outlined-chrome {
  color: #ffffff;
  background-color: #0572ce;
  border-color: #0572ce;
  box-shadow: none; }

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

.oj-button.oj-disabled.oj-button-outlined-chrome {
  color: #0572ce;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-button.oj-disabled.oj-selected.oj-button-outlined-chrome {
  color: #ffffff;
  background-color: #0572ce;
  border-color: #0572ce; }

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

.oj-button.oj-default.oj-button-outlined-chrome .oj-button-icon,
.oj-button.oj-focus-only.oj-button-outlined-chrome .oj-button-icon {
  color: #0572ce; }

.oj-button.oj-hover.oj-button-outlined-chrome .oj-button-icon {
  color: #85BBE7; }

.oj-button.oj-active.oj-button-outlined-chrome .oj-button-icon {
  color: #0572ce; }

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

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

.oj-button.oj-disabled.oj-button-outlined-chrome .oj-button-icon {
  color: #0572ce; }

.oj-button.oj-disabled.oj-selected.oj-button-outlined-chrome .oj-button-icon {
  color: #ffffff; }

.oj-button-icon {
  vertical-align: middle;
  margin-bottom: 3px; }

/* 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-text-only .oj-button-text {
  padding: 0 0.875rem; }

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

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

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

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

/* The text span of buttons with text and both icons */
.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-text-icon-start .oj-button-icon.oj-start, html:not([dir="rtl"])
.oj-button-text-icons .oj-button-icon.oj-start {
  margin-right: 0.625rem;
  margin-left: 0.625rem; }

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 {
  margin-right: 0.625rem;
  margin-left: 0.625rem; }

/* The left icon of buttons with 2 icons and no text */
html:not([dir="rtl"]) .oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 0.625rem;
  margin-left: 0.625rem; }

html[dir="rtl"] .oj-button-icons-only .oj-button-icon.oj-end {
  margin-right: 0.625rem;
  margin-left: 0.625rem; }

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

/* The right icon of buttons with text and a right icon, with or without a left icon */
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 {
  margin-right: 0.625rem;
  margin-left: 0.625rem; }

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 {
  margin-right: 0.625rem;
  margin-left: 0.625rem; }

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

html[dir="rtl"] .oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 0.625rem; }

/* 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-text-only .oj-button-text {
  padding: 0 0.625rem; }

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

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

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

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

/* The text span of buttons with text and both icons */
.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-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 {
  margin-right: 0.188rem;
  margin-left: 0.188rem; }

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 {
  margin-right: 0.188rem;
  margin-left: 0.188rem; }

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

html[dir="rtl"] .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-end {
  margin-right: 0.188rem;
  margin-left: 0.188rem; }

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

/* 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-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 {
  margin-right: 0.188rem;
  margin-left: 0.188rem; }

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 {
  margin-right: 0.188rem;
  margin-left: 0.188rem; }

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

html[dir="rtl"] .oj-button-sm.oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 0.188rem; }

/* 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-text-only .oj-button-text {
  padding: 0 1.25rem; }

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

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

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

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

/* The text span of buttons with text and both icons */
.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-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 {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

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 {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

/* The left icon of buttons with 2 icons and no text */
html:not([dir="rtl"]) .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

html[dir="rtl"] .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-end {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

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

/* 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-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 {
  margin-right: 1.125rem;
  margin-left: 0.625rem; }

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 {
  margin-right: 1.125rem;
  margin-left: 0.625rem; }

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

html[dir="rtl"] .oj-button-lg.oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 1.125rem; }

/* 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-text-only .oj-button-text {
  padding: 0 1.25rem; }

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

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

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

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

/* The text span of buttons with text and both icons */
.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-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 {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

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 {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

/* The left icon of buttons with 2 icons and no text */
html:not([dir="rtl"]) .oj-button-xl.oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

html[dir="rtl"] .oj-button-xl.oj-button-icons-only .oj-button-icon.oj-end {
  margin-right: 0.625rem;
  margin-left: 1.125rem; }

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

/* 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-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 {
  margin-right: 1.125rem;
  margin-left: 0.625rem; }

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 {
  margin-right: 1.125rem;
  margin-left: 0.625rem; }

/* The right icon of buttons with 2 icons and no text */
html:not([dir="rtl"]) .oj-button-xl.oj-button-icons-only .oj-button-icon.oj-end {
  margin-right: 1.125rem; }

html[dir="rtl"] .oj-button-xl.oj-button-icons-only .oj-button-icon.oj-start {
  margin-right: 1.125rem; }

/* reset extra padding in Firefox, see h5bp.com/1 */
input.oj-button::-moz-focus-inner,
button.oj-button::-moz-focus-inner {
  border: 0;
  padding: 0; }

.oj-hicontrast .oj-button.oj-focus {
  outline-width: 3px; }

.oj-hicontrast .oj-button.oj-selected {
  border-style: double;
  border-width: 3px; }

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

.oj-hicontrast .oj-button.oj-disabled.oj-selected {
  border-width: 2px; }

/* menu buttons */
.oj-button-option-defaults {
  font-family: '{"chroming":"half"}'; }

.oj-button-primary.oj-button.oj-default, .oj-button-primary.oj-button.oj-focus-only {
  background-color: #0572ce;
  background-image: none;
  border-color: #0572ce;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-primary.oj-button.oj-default .oj-button-icon,
.oj-button-primary.oj-button.oj-focus-only .oj-button-icon {
  color: #ffffff; }

.oj-button-primary.oj-button.oj-hover {
  background-color: #0683ec;
  background-image: none;
  border-color: #0683ec;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-primary.oj-button.oj-hover .oj-button-icon {
  color: #ffffff; }

.oj-button-primary.oj-button.oj-active {
  background-color: #0461b0;
  background-image: none;
  border-color: #0461b0;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-primary.oj-button.oj-active .oj-button-icon {
  color: #ffffff; }

.oj-button-primary.oj-button.oj-selected {
  background-color: #0461b0;
  background-image: none;
  border-color: #0461b0;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-primary.oj-button.oj-selected.oj-hover {
  background-color: #0461b0;
  background-image: none;
  border-color: #0461b0;
  color: #d9d9d9;
  box-shadow: none;
  text-shadow: none; }

.oj-button-primary.oj-button.oj-selected .oj-button-icon {
  color: #ffffff; }

.oj-button-primary.oj-button.oj-selected.oj-hover .oj-button-icon {
  color: #ffffff; }

.oj-button-primary.oj-button.oj-disabled {
  background-color: #0572ce;
  border-color: #0572ce;
  color: #ffffff;
  opacity: 0.4; }

.oj-button-primary.oj-button.oj-disabled .oj-button-icon {
  color: #ffffff; }

.oj-button-primary.oj-button.oj-disabled.oj-selected {
  color: #ffffff;
  background-color: #0461b0;
  border-color: #0461b0; }

.oj-button-primary.oj-button.oj-disabled.oj-selected .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-default, .oj-button-confirm.oj-button.oj-focus-only {
  background-color: #168100;
  background-image: none;
  border-color: #168100;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-confirm.oj-button.oj-default .oj-button-icon,
.oj-button-confirm.oj-button.oj-focus-only .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-hover {
  background-color: #1ba000;
  background-image: none;
  border-color: #1ba000;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-confirm.oj-button.oj-hover .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-active {
  background-color: #116200;
  background-image: none;
  border-color: #116200;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-confirm.oj-button.oj-active .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-selected {
  background-color: #116200;
  background-image: none;
  border-color: #116200;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none; }

.oj-button-confirm.oj-button.oj-selected.oj-hover {
  background-color: #116200;
  background-image: none;
  border-color: #116200;
  color: #d9d9d9;
  box-shadow: none;
  text-shadow: none; }

.oj-button-confirm.oj-button.oj-selected .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-selected.oj-hover .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-disabled {
  background-color: #168100;
  border-color: #168100;
  color: #ffffff;
  opacity: 0.4; }

.oj-button-confirm.oj-button.oj-disabled .oj-button-icon {
  color: #ffffff; }

.oj-button-confirm.oj-button.oj-disabled.oj-selected {
  color: #ffffff;
  background-color: #116200;
  border-color: #116200; }

.oj-button-confirm.oj-button.oj-disabled.oj-selected .oj-button-icon {
  color: #ffffff; }

/* component */
/* --------------------------------------------------------------- */
.oj-component-popup, .oj-menu, .oj-dialog, .oj-popup, .oj-listbox-drop {
  z-index: 1;
  position: absolute; }

.oj-component-layer, .oj-menu-layer, .oj-dialog-layer, .oj-popup-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: #000000;
  opacity: .4;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; }

.oj-component-overlay {
  opacity: .5; }

/* menu */
/* --------------------------------------------------------------- */
/* defines the stacking context for the menu */
.oj-menu-layer {
  z-index: 1000; }

/* top-level menu (component root node) and all submenus */
.oj-menu {
  color: #000;
  border: 1px solid #e7e7e9;
  border-radius: 5px;
  background: #ffffff;
  list-style: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  display: inline-block;
  font-size: 1rem;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent; }

.oj-menu:focus {
  outline: none; }

/* top-level menu (component root node) but not submenus */
.oj-menu.oj-component {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); }
  html.oj-slow-boxshadow .oj-menu.oj-component {
    box-shadow: none; }

/* submenus but not top-level menu */
.oj-menu.oj-menu-submenu {
  position: absolute;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25); }
  html.oj-slow-boxshadow .oj-menu.oj-menu-submenu {
    box-shadow: none; }

.oj-menu-item {
  margin: 0;
  padding: 0;
  width: 100%; }

/* Horizontal divider between groups of menu items */
.oj-menu-divider {
  margin: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 2px 0 0 0;
  border-color: #d5dfe5;
  border-style: solid; }

.oj-menu-item > a {
  position: relative;
  text-decoration: none;
  display: block;
  line-height: 2.6875;
  font-weight: normal;
  color: #0572ce;
  border-top-width: 1px;
  border-top-color: #d5dfe5;
  border-top-style: solid; }

/* 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 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"]) .oj-menu-icons > .oj-menu-item > a {
  padding-left: calc(0.625rem + 24px + 0.5rem); }

html[dir="rtl"] .oj-menu-icons > .oj-menu-item > a {
  padding-right: calc(0.625rem + 24px + 0.5rem); }

.oj-menu-text-only > .oj-menu-item > a {
  justify-content: center; }
  html:not([dir="rtl"]) .oj-menu-text-only > .oj-menu-item > a {
    padding-left: calc(16px + 0.75rem); }
  html[dir="rtl"] .oj-menu-text-only > .oj-menu-item > a {
    padding-right: calc(16px + 0.75rem); }

.oj-menu-divider + .oj-menu-item > a {
  border-top-width: 0; }

.oj-menu-item.oj-focus > a,
.oj-menu-item.oj-focus-ancestor > a {
  background: #f6f6f7; }

.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: #d4d4d6; }

.oj-menu.oj-disabled .oj-menu-item > a,
.oj-menu-item.oj-disabled > a {
  cursor: default;
  color: rgba(5, 114, 206, 0.5); }

/* menu item icons (not submenu icons) */
.oj-menu-item-icon {
  color: #0572ce;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }
  html:not([dir="rtl"]) .oj-menu-item-icon {
    margin-left: calc(-24px - 0.5rem);
    margin-right: 0.5rem; }
  html[dir="rtl"] .oj-menu-item-icon {
    margin-right: calc(-24px - 0.5rem);
    margin-left: 0.5rem; }

/* menu item icons (not submenu icons) */
.oj-menu-item .oj-menu-item-icon {
  font-size: 24px; }

.oj-menu.oj-disabled .oj-menu-item-icon,
.oj-menu-item.oj-disabled .oj-menu-item-icon {
  opacity: 0.5; }

.oj-menu-submenu-icon {
  position: absolute;
  padding-top: calc(1.34375rem - 28px/2);
  line-height: 1.8;
  height: auto;
  color: #bababc; }
  html:not([dir="rtl"]) .oj-menu-submenu-icon {
    right: 0.375rem; }
  html[dir="rtl"] .oj-menu-submenu-icon {
    left: 0.375rem; }

.oj-menu-context-menu-launcher {
  -webkit-touch-callout: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-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 #000; }

.oj-hicontrast .oj-menu-item.oj-focus.oj-disabled > a {
  outline: dotted 1px #000; }

html:not([dir="rtl"]) .oj-menu-item > a {
  padding-right: calc(16px + 0.75rem); }

html[dir="rtl"] .oj-menu-item > a {
  padding-left: calc(16px + 0.75rem); }

/*Navlist root node*/
.oj-navigationlist,
.oj-navigationlist-listview-container {
  overflow-x: hidden; }

.oj-navigationlist-touch {
  -webkit-tap-highlight-color: transparent; }

/* navigation list divider used in category header navlist*/
.oj-navigationlist-category-divider {
  border-color: #e7e7e9;
  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: #d5dfe5;
  border-style: solid;
  border-width: 0 1px 0 0;
  font-size: 0;
  height: 1.714rem;
  line-height: 0;
  margin: 5px 0;
  -webkit-align-self: center;
  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; }

.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: 2.688rem;
  content: "";
  display: inline-block;
  visibility: hidden; }

.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item::before {
  min-height: 1.75rem; }

.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item-label {
  font-size: 0.8125rem; }

/* Styling for expand/collapse icons holder */
.oj-navigationlist-collapse-icon,
.oj-navigationlist-expand-icon {
  -webkit-order: 1;
  order: 1;
  -webkit-align-self: center;
  align-self: center;
  text-decoration: none; }

/* Style content of each list item */
.oj-navigationlist-item-content {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-align-items: center;
  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: #595959; }
  .oj-contrast-marker a.oj-navigationlist-item-content .oj-navigationlist-item-label {
    color: #c0c4c8; }

.oj-selected > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #0572ce; }
  .oj-contrast-marker .oj-selected > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
    color: #fafafa; }

.oj-contrast-marker .oj-hover:not(.oj-selected) > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #fafafa; }

/* Navigation list node label or arbitrary content place holder*/
.oj-navigationlist-item-label {
  -webkit-order: 2;
  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;
  -webkit-flex: 1 1 auto;
  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: #595959;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }
  .oj-contrast-marker .oj-navigationlist-item-icon {
    color: #c0c4c8; }

.oj-navigationlist-group-item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto; }

.oj-navigationlist-group {
  -webkit-flex: 1 1 auto;
  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: 0.5; }

.oj-navigationlist-item.oj-disabled .oj-navigationlist-item-label {
  color: #595959; }
  .oj-contrast-marker .oj-navigationlist-item.oj-disabled .oj-navigationlist-item-label {
    color: #696c6E; }

.oj-navigationlist-item.oj-disabled a.oj-navigationlist-item-content {
  cursor: default; }

.oj-navigationlist-item.oj-disabled .oj-navigationlist-item-icon {
  color: #595959; }
  .oj-contrast-marker .oj-navigationlist-item.oj-disabled .oj-navigationlist-item-icon {
    color: #696c6E; }

/* Selected node */
.oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon,
.oj-navigationlist.oj-navigationlist-touch .oj-navigationlist-item.oj-hover.oj-selected .oj-navigationlist-item-icon {
  color: #0572ce; }
  .oj-contrast-marker .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon, .oj-contrast-marker
  .oj-navigationlist.oj-navigationlist-touch .oj-navigationlist-item.oj-hover.oj-selected .oj-navigationlist-item-icon {
    color: #fafafa; }

/* hover icon */
.oj-navigationlist-item.oj-hover:not(.oj-selected) .oj-navigationlist-item-icon {
  color: #85bbe7; }
  .oj-contrast-marker .oj-navigationlist-item.oj-hover:not(.oj-selected) .oj-navigationlist-item-icon {
    color: #fafafa; }

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

.oj-hicontrast .oj-navigationlist-item.oj-hover,
.oj-hicontrast .oj-navigationlist-item.oj-focus {
  border: 1px dotted #000000; }

/*Focus ring around  focused list item*/
.oj-navigationlist:not(.oj-navigationlist-touch) .oj-navigationlist-item.oj-focus {
  outline: dotted 1px #4f4f4f;
  outline-offset: -1px; }

.oj-hicontrast .oj-navigationlist-item.oj-focus {
  outline: none; }

.oj-navigationlist-item {
  border-color: transparent;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: stretch;
  align-items: stretch; }

.oj-navigationlist-vertical .oj-navigationlist-item.oj-selected {
  background-color: #f6f6f7; }
  .oj-contrast-marker .oj-navigationlist-vertical .oj-navigationlist-item.oj-selected {
    background-color: #202324; }

.oj-navigationlist-item.oj-selected {
  border-color: #0572ce; }

.oj-navigationlist-item.oj-hover:not(.oj-selected) {
  background-color: #ebeced;
  border-color: #85bbe7; }
  .oj-contrast-marker .oj-navigationlist-item.oj-hover:not(.oj-selected) {
    background-color: #262628; }

/*---- Start of common styles for collapsible and expanded navigation list ----*/
.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  -webkit-align-self: center;
  align-self: center; }
  html:not([dir="rtl"]) .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
    margin-right: 0.625rem; }
  html[dir="rtl"] .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
    margin-left: 0.625rem; }

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.625rem + 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.625rem + 24px); }

.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-style: solid; }
  html[dir="rtl"] .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
    padding-right: calc(0.625rem - 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(0.625rem - 3px);
    border-width: 0 0 0 3px; }

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

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

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

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: 0.625rem; }

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(0.625rem + 0.625rem + 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(0.625rem + 0.625rem + 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: 0.625rem; }

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: 0.625rem; }

html:not([dir="rtl"]) .oj-navigationlist-group-item {
  padding-right: 0.625rem; }

html[dir="rtl"] .oj-navigationlist-group-item {
  padding-left: 0.625rem; }

/*---- 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 {
  transition: max-height 0.4s;
  overflow: hidden; }

/* Collapse or expand icon color should not change on hover*/
a.oj-component-icon.oj-clickable-icon-nocontext.oj-navigationlist-collapse-icon:hover, a.oj-clickable-icon-nocontext.oj-navigationlist-collapse-icon.oj-popup-tail.oj-popup-tail-simple:hover,
a.oj-component-icon.oj-clickable-icon-nocontext.oj-navigationlist-collapse-icon,
a.oj-clickable-icon-nocontext.oj-navigationlist-collapse-icon.oj-popup-tail.oj-popup-tail-simple,
a.oj-component-icon.oj-clickable-icon-nocontext.oj-navigationlist-expand-icon:hover,
a.oj-clickable-icon-nocontext.oj-navigationlist-expand-icon.oj-popup-tail.oj-popup-tail-simple:hover,
a.oj-component-icon.oj-clickable-icon-nocontext.oj-navigationlist-expand-icon,
a.oj-clickable-icon-nocontext.oj-navigationlist-expand-icon.oj-popup-tail.oj-popup-tail-simple {
  color: #595959; }
  .oj-contrast-marker a.oj-component-icon.oj-clickable-icon-nocontext.oj-navigationlist-collapse-icon:hover, .oj-contrast-marker a.oj-clickable-icon-nocontext.oj-navigationlist-collapse-icon.oj-popup-tail.oj-popup-tail-simple:hover,
  .oj-contrast-marker
  a.oj-component-icon.oj-clickable-icon-nocontext.oj-navigationlist-collapse-icon,
  .oj-contrast-marker a.oj-clickable-icon-nocontext.oj-navigationlist-collapse-icon.oj-popup-tail.oj-popup-tail-simple,
  .oj-contrast-marker
  a.oj-component-icon.oj-clickable-icon-nocontext.oj-navigationlist-expand-icon:hover,
  .oj-contrast-marker a.oj-clickable-icon-nocontext.oj-navigationlist-expand-icon.oj-popup-tail.oj-popup-tail-simple:hover,
  .oj-contrast-marker
  a.oj-component-icon.oj-clickable-icon-nocontext.oj-navigationlist-expand-icon,
  .oj-contrast-marker a.oj-clickable-icon-nocontext.oj-navigationlist-expand-icon.oj-popup-tail.oj-popup-tail-simple {
    color: #c0c4c8; }

.oj-navigationlist-collapse-icon:focus,
.oj-navigationlist-expand-icon:focus {
  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 3px 0 0; }
  html:not([dir="rtl"]) .oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
    border-width: 0 0 0 3px; }

html[dir="rtl"] .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
  padding: 0 calc(10px - 3px) 0 10px; }

html:not([dir="rtl"]) .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
  padding: 0 10px 0 calc(10px - 3px); }

html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
  padding: 0 calc(10px - 0px) 0 10px; }

html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
  padding: 0 10px 0 calc(10px - 0px); }

.oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item,
.oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
  border-style: solid;
  border-radius: 0;
  border-color: #0572ce; }
  html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item, html[dir="rtl"]
  .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
    border-width: 0 1px 1px 1px; }
  html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item, html:not([dir="rtl"])
  .oj-navigationlist-page-level.oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
    border-width: 0 1px 1px 1px; }

.oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item:first-of-type,
.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: 4px;
  border-top-right-radius: 4px; }
  html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item:first-of-type, 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: 1px; }
  html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item:first-of-type, 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: 1px; }

.oj-navigationlist-page-level.oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item:last-of-type,
.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: 4px;
  border-bottom-right-radius: 4px; }

.oj-navigationlist-icon-only .oj-navigationlist-item-content {
  -webkit-justify-content: center;
  justify-content: center; }

/*End of icons only navlist*/
.oj-navigationlist-vertical.oj-navigationlist-icon-only {
  display: -webkit-inline-flex;
  display: inline-flex; }

.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-vertical .oj-navigationlist-item.oj-selected {
  background-color: #0572ce;
  border-color: #0572ce; }

.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: #0572ce; }
  .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: #c0c4c8; }

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) .oj-navigationlist-item-icon {
  color: #0572ce; }
  .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: #c0c4c8; }

.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: #ffffff;
  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: #fafafa; }

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
  color: #ffffff; }
  .oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
    color: #fafafa; }

.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: #fafafa; }

.oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover:not(.oj-selected) .oj-navigationlist-item-icon {
  color: #fafafa; }

.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-hover:not(.oj-selected),
.oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.oj-active:not(.oj-selected) {
  background-color: #daeaf8; }
  .oj-contrast-marker .oj-navigationlist-page-level.oj-navigationlist-vertical .oj-navigationlist-item.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: #262628; }

/* End of Page Level navlist styles*/
/*Start of common horizontal navigationlist styles */
.oj-navigationlist-horizontal .oj-navigationlist-element {
  display: -webkit-flex;
  display: flex; }

.oj-navigationlist-horizontal .oj-navigationlist-item {
  -webkit-flex: 1 1 auto;
  flex: 1 1 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 {
    -webkit-flex: 0 0 auto;
    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 {
    -webkit-justify-content: center;
    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 {
    -webkit-justify-content: flex-end;
    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 {
    -webkit-flex: 0 0 auto;
    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 {
    -webkit-justify-content: center;
    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 {
    -webkit-justify-content: flex-end;
    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 {
    -webkit-flex: 0 1 auto;
    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 {
    -webkit-justify-content: center;
    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 {
    -webkit-justify-content: flex-end;
    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 {
    -webkit-flex: 0 0 auto;
    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 {
    -webkit-justify-content: center;
    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 {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; } }

.oj-navigationlist-horizontal .oj-navigationlist-item-element {
  box-sizing: border-box;
  min-height: 2.75rem; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item-element {
  min-height: 1.8125rem; }

.oj-navigationlist-horizontal .oj-selected > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #0572ce; }

.oj-navigationlist-horizontal .oj-navigationlist-item-label {
  -webkit-align-self: center;
  align-self: center; }

.oj-navigationlist-horizontal .oj-navigationlist-item {
  border-color: transparent; }

.oj-navigationlist-horizontal .oj-navigationlist-item.oj-selected {
  border-color: #0572ce; }

.oj-navigationlist-horizontal .oj-navigationlist-item-icon {
  margin: 5px 4px 4px; }

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

html[dir="rtl"] .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
  margin-right: 0; }

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 {
  border-width: 0 0 0 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 0 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 {
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0 0.625rem 0; }

.oj-navigationlist-horizontal:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
  -webkit-align-self: center;
  align-self: center; }
  html:not([dir="rtl"]) .oj-navigationlist-horizontal:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
    margin-right: 2px; }
  html[dir="rtl"] .oj-navigationlist-horizontal:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
    margin-left: 2px; }

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

.oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-element {
  min-height: 3.9375rem; }

.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 {
  -webkit-flex-direction: column;
  flex-direction: column; }

/*End of  horizontal stacked icon label navigationlist styles */
/* Start of App Level navbar styles */
.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item-label {
  font-size: 0.625rem; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item-label {
  font-size: 0.8125rem; }

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled) a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #595959; }

.oj-navigationlist-app-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) .oj-navigationlist-item-icon {
  color: #595959; }

.oj-navigationlist-app-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-selected a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
  color: #0572ce; }

.oj-navigationlist-app-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
  color: #0572ce; }

.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: #85bbe7; }

.oj-navigationlist-app-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover:not(.oj-selected) .oj-navigationlist-item-icon {
  color: #85bbe7; }

/* End of App Level navbar styles */
/* Start of Page Level navbar styles*/
.oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
  border-width: 0; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item,
.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
  border-radius: 0;
  border-width: 1px;
  border-color: #0572ce; }
  html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item, html:not([dir="rtl"])
  .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
    border-right-width: 1px;
    border-left-width: 0; }
  html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item, html[dir="rtl"]
  .oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
    border-left-width: 1px;
    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, 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: 1px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px; }

html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:first-of-type, html[dir="rtl"]
.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:first-of-type {
  border-right-width: 1px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }

html:not([dir="rtl"]) .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:last-of-type, html:not([dir="rtl"])
.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }

html[dir="rtl"] .oj-navigationlist-page-level.oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:last-of-type, html[dir="rtl"]
.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:last-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px; }

.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: #0572ce; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-selected {
  background-color: #0572ce; }

.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: #0572ce; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:not(.oj-disabled) .oj-navigationlist-item-icon {
  color: #0572ce; }

.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: #ffffff;
  font-weight: normal; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
  color: #ffffff; }

.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: #85bbe7; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover:not(.oj-selected) .oj-navigationlist-item-icon {
  color: #85bbe7; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected),
.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item.oj-active:not(.oj-selected) {
  background-color: #daeaf8; }

/*End of Page Level navbar 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: -webkit-flex;
  display: flex;
  line-height: 3.142rem; }
  .oj-contrast-marker .oj-navigationlist-toolbar {
    background-color: transparent; }
  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 {
  -webkit-align-self: center;
  align-self: center;
  -webkit-order: 0;
  order: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis; }

.oj-navigationlist-previous-icon {
  -webkit-align-self: center;
  align-self: center;
  padding: 0 7px;
  border: 1px solid;
  line-height: 2.25rem;
  border-color: transparent;
  border-radius: 2px;
  color: #0572ce; }
  html.oj-slow-borderradius .oj-navigationlist-previous-icon {
    border-radius: 0; }

/*Override default/hover colors for previous icon*/
a.oj-navigationlist-previous-link:hover .oj-navigationlist-previous-icon,
a.oj-navigationlist-previous-link:focus .oj-navigationlist-previous-icon {
  color: #85BBE7;
  border-color: transparent;
  background-color: transparent; }

a.oj-navigationlist-previous-link:active .oj-navigationlist-previous-icon {
  color: #0572ce;
  border-color: transparent;
  background-color: transparent; }

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 {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-order: 1;
  order: 1;
  font-weight: bold;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #3a3a3a;
  font-size: 1.25rem; }
  .oj-contrast-marker .oj-navigationlist-current-header {
    color: #fafafa; }

.oj-navigationlist-toolbar-separator {
  -webkit-align-self: center;
  align-self: center;
  border-left: 1px solid #e7e7e9;
  display: inline-block;
  height: 2.642rem;
  vertical-align: middle;
  -webkit-order: 1;
  order: 1; }
  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 {
  -webkit-align-self: center;
  align-self: center;
  -webkit-order: 2;
  order: 2;
  -webkit-flex: 0 0 auto;
  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; }

/* override menu css*/
.oj-menu-item-icon.oj-navigationlist-level-indicator {
  -webkit-align-self: baseline;
  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; }

.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: #c2ddf7;
  border: 1px solid #0572ce;
  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: #0572ce; }

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: initial;
  -webkit-transform: initial;
  transform: initial; }

html:not([dir="ltr"]) .oj-navigationlist-hierarchical-menu .oj-menu-item-icon {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg); }

/* end - override menu css*/
.oj-navigationlist.oj-navigationlist-touch.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected.oj-hover .oj-navigationlist-item-icon,
.oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
  color: #0572ce; }
  .oj-contrast-marker .oj-navigationlist.oj-navigationlist-touch.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected.oj-hover .oj-navigationlist-item-icon, .oj-contrast-marker
  .oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
    color: #fafafa; }

.oj-menu-item-icon.oj-navigationlist-level-indicator {
  border-bottom: 1px solid #e7e7e9;
  border-left: 1px solid #e7e7e9; }

/* Override  default options*/
.oj-navigationlist-option-defaults {
  font-family: '{"hierarchyMenuDisplayThresholdLevel":-1}'; }

/* Start of Page Level navlist styles*/
.oj-navigationlist-page-level.oj-navigationlist-icon-only .oj-navigationlist-item:not(.oj-hover) .oj-navigationlist-item-icon {
  color: #0572ce; }

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
  -webkit-justify-content: center;
  justify-content: center; }

.oj-navigationlist-page-level.oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content .oj-navigationlist-item-label {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.oj-navigationlist-page-level.oj-navigationlist.oj-navigationlist-touch.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected.oj-hover .oj-navigationlist-item-icon,
.oj-navigationlist-page-level.oj-navigationlist-expanded.oj-navigationlist-icon-only .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
  color: #ffffff; }

.oj-navigationlist-page-level.oj-navigationlist-horizontal .oj-navigationlist-item {
  -webkit-flex: 1 1 0;
  flex: 1 1 0; }

/* End of Page Level navlist styles*/
/*
     * applied to the outer most element of the offcanvas
     */
.oj-offcanvas-outer-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  -moz-box-sizing: border-box;
  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%; }

/*
     * 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 {
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.oj-offcanvas-start, .oj-offcanvas-end, .oj-offcanvas-top, .oj-offcanvas-bottom {
  position: absolute;
  -moz-box-sizing: border-box;
  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 {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    left: 0;
    border-width: 0 1px 0 0; }
  html[dir="rtl"] .oj-offcanvas-start {
    -webkit-transform: translate3d(100%, 0, 0);
    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;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  border-width: 0 0 0 1px; }

html[dir="rtl"] .oj-offcanvas-end {
  left: 0;
  -webkit-transform: translate3d(-100%, 0, 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;
  -webkit-transform: translate3d(0, -100%, 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;
  -webkit-transform: translate3d(0, 100%, 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; }

/*
     * applied to the offcanvas on the start edge when displayMode is overlay
     */
.oj-offcanvas-overlay.oj-offcanvas-start {
  z-index: 1; }

/*
     * 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 {
  -webkit-transform: translate3d(0%, 0, 0);
  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 {
  -webkit-transform: translate3d(0, 0%, 0);
  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: #000000;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

/*
     * glass pane opacity after animation
     */
.oj-offcanvas-glasspane-dim {
  opacity: 0.4; }

/* Override default options*/
.oj-offcanvas-option-defaults {
  font-family: '{"displayMode":"push"}'; }

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

@-webkit-keyframes oj-animation-slidein-left {
  from {
    left: 100%; }
  to {
    left: 0; } }

@keyframes oj-animation-slidein-left {
  from {
    left: 100%; }
  to {
    left: 0; } }

.oj-animation-coverleft.oj-enter, html:not([dir="rtl"]) .oj-animation-coverstart.oj-enter {
  -webkit-animation: oj-animation-slidein-left 0.25s ease-in-out;
  animation: oj-animation-slidein-left 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slidein-right {
  from {
    left: -100%; }
  to {
    left: 0; } }

@keyframes oj-animation-slidein-right {
  from {
    left: -100%; }
  to {
    left: 0; } }

.oj-animation-coverright.oj-enter, html[dir="rtl"] .oj-animation-coverstart.oj-enter {
  -webkit-animation: oj-animation-slidein-right 0.25s ease-in-out;
  animation: oj-animation-slidein-right 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slidein-up {
  from {
    top: 100%; }
  to {
    top: 0; } }

@keyframes oj-animation-slidein-up {
  from {
    top: 100%; }
  to {
    top: 0; } }

.oj-animation-coverup.oj-enter {
  -webkit-animation: oj-animation-slidein-up 0.25s ease-in-out;
  animation: oj-animation-slidein-up 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slideout30-left {
  from {
    left: 0; }
  to {
    left: -30%; } }

@keyframes oj-animation-slideout30-left {
  from {
    left: 0; }
  to {
    left: -30%; } }

.oj-animation-coverleft.oj-leave, html:not([dir="rtl"]) .oj-animation-coverstart.oj-leave {
  -webkit-animation: oj-animation-slideout30-left 0.25s ease-in-out;
  animation: oj-animation-slideout30-left 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slideout30-right {
  from {
    left: 0; }
  to {
    left: 30%; } }

@keyframes oj-animation-slideout30-right {
  from {
    left: 0; }
  to {
    left: 30%; } }

.oj-animation-coverright.oj-leave, html[dir="rtl"] .oj-animation-coverstart.oj-leave {
  -webkit-animation: oj-animation-slideout30-right 0.25s ease-in-out;
  animation: oj-animation-slideout30-right 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slideout-left {
  from {
    left: 0; }
  to {
    left: -100%; } }

@keyframes oj-animation-slideout-left {
  from {
    left: 0; }
  to {
    left: -100%; } }

.oj-animation-revealleft.oj-leave, html[dir="rtl"] .oj-animation-revealend.oj-leave {
  -webkit-animation: oj-animation-slideout-left 0.25s ease-in-out;
  animation: oj-animation-slideout-left 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slideout-right {
  from {
    left: 0; }
  to {
    left: 100%; } }

@keyframes oj-animation-slideout-right {
  from {
    left: 0; }
  to {
    left: 100%; } }

.oj-animation-revealright.oj-leave, html:not([dir="rtl"]) .oj-animation-revealend.oj-leave {
  -webkit-animation: oj-animation-slideout-right 0.25s ease-in-out;
  animation: oj-animation-slideout-right 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slideout-down {
  from {
    top: 0; }
  to {
    top: 100%; } }

@keyframes oj-animation-slideout-down {
  from {
    top: 0; }
  to {
    top: 100%; } }

.oj-animation-revealdown.oj-leave {
  -webkit-animation: oj-animation-slideout-down 0.25s ease-in-out;
  animation: oj-animation-slideout-down 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slidein30-left {
  from {
    left: 30%; }
  to {
    left: 0; } }

@keyframes oj-animation-slidein30-left {
  from {
    left: 30%; }
  to {
    left: 0; } }

.oj-animation-revealleft.oj-enter, html[dir="rtl"] .oj-animation-revealend.oj-enter {
  -webkit-animation: oj-animation-slidein30-left 0.25s ease-in-out;
  animation: oj-animation-slidein30-left 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-slidein30-right {
  from {
    left: -30%; }
  to {
    left: 0; } }

@keyframes oj-animation-slidein30-right {
  from {
    left: -30%; }
  to {
    left: 0; } }

.oj-animation-revealright.oj-enter, html:not([dir="rtl"]) .oj-animation-revealend.oj-enter {
  -webkit-animation: oj-animation-slidein30-right 0.25s ease-in-out;
  animation: oj-animation-slidein30-right 0.25s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-zoomin {
  from {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }

@keyframes oj-animation-zoomin {
  from {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }

.oj-animation-zoomin.oj-enter {
  -webkit-animation: oj-animation-zoomin 0.4s ease-in-out;
  animation: oj-animation-zoomin 0.4s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-zoomout {
  from {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  to {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); } }

@keyframes oj-animation-zoomout {
  from {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  to {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); } }

.oj-animation-zoomout.oj-leave {
  -webkit-animation: oj-animation-zoomout 0.4s ease-in-out;
  animation: oj-animation-zoomout 0.4s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes oj-animation-fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.oj-animation-fade.oj-enter {
  -webkit-animation: oj-animation-fadein 0.4s ease-in-out;
  animation: oj-animation-fadein 0.4s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes oj-animation-fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes oj-animation-fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

.oj-animation-fade.oj-leave {
  -webkit-animation: oj-animation-fadeout 0.4s ease-in-out;
  animation: oj-animation-fadeout 0.4s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.oj-animation-navigate-methods {
  font-family: '{"drillIn":"coverStart","drillOut":"revealEnd"}'; }

/* progressbar */
/* --------------------------------------------------------------- */
.oj-progressbar {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 16px;
  overflow: hidden;
  background: #e2e2e5;
  border: 1px none #c8cfd5;
  border-radius: 0; }

.oj-progressbar-value {
  margin: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  background: #0572ce; }

.oj-progressbar-overlay {
  height: 100%;
  opacity: 1; }
  html:not([dir="rtl"]) .oj-progressbar-overlay {
    background: url("images/animated-overlay.gif"); }
  html[dir="rtl"] .oj-progressbar-overlay {
    background: url("images/animated-overlay-rtl.gif"); }

.oj-progressbar-start-label,
.oj-progressbar-end-label {
  display: inline-block;
  margin-top: 8px; }

html:not([dir="rtl"]) .oj-progressbar-end-label {
  float: right; }

html[dir="rtl"] .oj-progressbar-end-label {
  float: left; }

.oj-progressbar-embedded {
  height: 3px;
  width: 100%;
  border-style: none;
  background-color: transparent; }

.oj-hicontrast .oj-progressbar-value {
  border: 1px dashed #c8cfd5; }

/*
     * applied to the refresh panel 
     */
.oj-pulltorefresh-panel {
  overflow: hidden; }

/*
     * applied to the content inside the pull to refresh panel
     */
.oj-pulltorefresh-content {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  background-color: #f6f6f7; }

/*
     * applied animation when the height of the panel changes (during release)
     */
.oj-pulltorefresh-transition {
  transition: height 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

/*
     * applied to the primary text inside the pull to refresh panel
     */
.oj-pulltorefresh-primary-text {
  color: #000;
  text-align: center;
  margin: 0 0 10px 0; }

/*
     * applied to the secondary text inside the pull to refresh panel
     */
.oj-pulltorefresh-secondary-text {
  color: #595959;
  font-size: 0.875rem;
  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; }

/*
     * refresh icon at initial state
     */
.oj-pulltorefresh-icon-initial:before {
  content: url("images/pull_to_refresh_00.svg"); }

/*
     * refresh icon at 10% state
     */
.oj-pulltorefresh-icon-10-percent:before {
  content: url("images/pull_to_refresh_10.svg"); }

/*
     * refresh icon at 20% state
     */
.oj-pulltorefresh-icon-20-percent:before {
  content: url("images/pull_to_refresh_20.svg"); }

/*
     * refresh icon at 30% state
     */
.oj-pulltorefresh-icon-30-percent:before {
  content: url("images/pull_to_refresh_30.svg"); }

/*
     * refresh icon at 40% state
     */
.oj-pulltorefresh-icon-40-percent:before {
  content: url("images/pull_to_refresh_40.svg"); }

/*
     * refresh icon at 50% state
     */
.oj-pulltorefresh-icon-50-percent:before {
  content: url("images/pull_to_refresh_50.svg"); }

/*
     * refresh icon at 60% state
     */
.oj-pulltorefresh-icon-60-percent:before {
  content: url("images/pull_to_refresh_60.svg"); }

/*
     * refresh icon at 70% state
     */
.oj-pulltorefresh-icon-70-percent:before {
  content: url("images/pull_to_refresh_70.svg"); }

/*
     * refresh icon at 80% state
     */
.oj-pulltorefresh-icon-80-percent:before {
  content: url("images/pull_to_refresh_80.svg"); }

/*
     * refresh icon at 90% state
     */
.oj-pulltorefresh-icon-90-percent:before {
  content: url("images/pull_to_refresh_90.svg"); }

/*
     * refresh icon at 100% state
     */
.oj-pulltorefresh-icon-full:before {
  content: url("images/pull_to_refresh_full.gif"); }

/*
     * 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: -webkit-flex;
  display: flex;
  overflow: hidden; }

/*
     * Applied to action items 
     */
.oj-swipetoreveal-action {
  -webkit-flex: 1;
  flex: 1;
  max-width: 100%;
  text-align: center;
  vertical-align: middle;
  height: 100%;
  overflow: hidden;
  color: #ffffff;
  transition: max-width 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  background-color: #0572ce; }

/*
     * 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: #61788b; }

/*
     * Applied to the flag action item
     */
.oj-swipetoreveal .oj-swipetoreveal-flag {
  background-color: #db6134; }

/*
     * Applied to the alert action item
     */
.oj-swipetoreveal .oj-swipetoreveal-alert {
  background-color: #ba0006; }

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

.oj-dialog {
  overflow: hidden;
  width: 300px;
  min-width: 200px;
  height: auto;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column; }

.oj-dialog-header {
  position: relative; }

.oj-draggable .oj-dialog-header {
  cursor: move; }

/* Creates a larger touch area for the close icon */
.oj-dialog-header-close-wrapper {
  text-align: center;
  cursor: default; }
  html:not([dir="rtl"]) .oj-dialog-header-close-wrapper {
    float: right; }
  html[dir="rtl"] .oj-dialog-header-close-wrapper {
    float: left; }

.oj-dialog-title {
  overflow: hidden;
  cursor: default; }

.oj-draggable .oj-dialog-title {
  cursor: move; }

.oj-dialog-close-icon {
  border-radius: 2px;
  cursor: default;
  border-width: 1px;
  border-style: solid;
  color: #ffffff;
  border-color: transparent; }
  html.oj-slow-borderradius .oj-dialog-close-icon {
    border-radius: 0; }

.oj-dialog-header-close-wrapper.oj-hover .oj-dialog-close-icon {
  background-color: #0683ec;
  border-color: #0683ec;
  color: #ffffff;
  box-shadow: none; }

.oj-dialog-header-close-wrapper.oj-default .oj-dialog-close-icon,
.oj-dialog-header-close-wrapper.oj-focus-only .oj-dialog-close-icon {
  color: #ffffff; }

.oj-dialog-header-close-wrapper.oj-focus .oj-dialog-close-icon {
  outline: dotted 1px #ffffff;
  outline: -webkit-focus-ring-color auto; }

.oj-dialog-header-close-wrapper.oj-active .oj-dialog-close-icon {
  background-color: #044f91;
  border-color: #044f91;
  color: #ffffff;
  box-shadow: none; }

.oj-dialog-content > p:last-child {
  margin-bottom: 0; }

.oj-dialog-content {
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto; }

.oj-dialog-body {
  position: relative;
  overflow: auto;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.oj-dialog-footer-separator {
  border-width: 1px 0 0;
  border-style: solid;
  border-color: #e7e7e9; }

.oj-dialog-footer {
  padding-top: 10px;
  padding-bottom: 6px;
  padding-right: 10px;
  padding-left: 10px;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }
  html:not([dir="rtl"]) .oj-dialog-footer {
    text-align: right; }
  html[dir="rtl"] .oj-dialog-footer {
    text-align: left; }

.oj-dialog {
  top: 0;
  left: 0;
  padding: 0;
  box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.45);
  background: #ffffff;
  border: 1px solid #e7e7e9;
  border-radius: 2px; }
  html.oj-slow-boxshadow .oj-dialog {
    box-shadow: none; }
  html.oj-slow-borderradius .oj-dialog {
    border-radius: 0; }

.oj-dialog-header {
  padding: 0.5rem 0.5rem 0 0.5rem;
  background-color: #f6f6f7;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #e7e7e9;
  font-size: 1.25rem;
  color: #3a3a3a;
  font-weight: normal;
  border-radius: 2px 2px 0 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }
  html.oj-slow-borderradius .oj-dialog-header {
    border-radius: 0; }

.oj-dialog-header-close-wrapper {
  padding: 5px;
  margin: -5px; }

.oj-dialog-title {
  display: block;
  padding-bottom: 0.5rem;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }
  html:not([dir="rtl"]) .oj-dialog-title {
    padding-right: 10px; }
  html[dir="rtl"] .oj-dialog-title {
    padding-left: 10px; }

.oj-dialog-body {
  border: 0;
  padding: 0.5rem;
  background: #ffffff;
  color: #000; }

/* popup */
/* --------------------------------------------------------------- */
/* defines the stacking context for the popup and its children */
.oj-popup-layer {
  z-index: 1000; }

.oj-popup-layer.oj-focus-within {
  z-index: 1001; }

.oj-popup-layer.oj-popup-tail-simple {
  z-index: 1030; }

.oj-popup-layer.oj-popup-tail-simple.oj-focus-within {
  z-index: 1031; }

.oj-popup {
  border: 1px solid #e7e7e9;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  -webkit-will-change: top, left;
  -ms-will-change: top, left;
  -mos-will-change: top, left; }
  html.oj-slow-borderradius .oj-popup {
    border-radius: 0; }
  html.oj-slow-boxshadow .oj-popup {
    box-shadow: none; }

.oj-popup.oj-popup-tail-simple {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  border-width: 1px;
  border-color: #e7e7e9;
  background-color: #ffffff;
  -webkit-will-change: top, left, bottom, right;
  -ms-will-change: top, left, bottom, right;
  -mos-will-change: top, left, bottom, right; }
  html.oj-slow-boxshadow .oj-popup.oj-popup-tail-simple {
    box-shadow: none; }

.oj-popup.oj-popup-no-chrome {
  border-width: 0;
  box-shadow: none;
  border-radius: 0;
  background-color: transparent; }

.oj-popup-content {
  padding: 0.5rem; }

.oj-popup-no-chrome > .oj-popup-content {
  padding: 0; }

.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: -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: -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,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MHB4JyBoZWlnaHQ9JzQwcHgnPjxkZWZzPjxmaWx0ZXIgaWQ9J2YxJyB4PScwJyB5PScwJz48ZmVHYXVzc2lhbkJsdXIgaW49J1NvdXJjZUdyYXBoaWMnIHN0ZERldmlhdGlvbj0nMScvPjwvZmlsdGVyPjwvZGVmcz48ZyB0cmFuc2Zvcm09J3JvdGF0ZSg0NSwgMjAsIDIwKSB0cmFuc2xhdGUoLTgpJz48ZyBzdHlsZT0nc3Ryb2tlLXdpZHRoOjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7Jz48cG9seWdvbiBwb2ludHM9JzQwLDAgMCwyMCA0MCw0MCAwLDIwJyBzdHlsZT0nZmlsbDojMDAwMDAwO3N0cm9rZTojMDAwMDAwO3N0cm9rZS1vcGFjaXR5Oi4yJyBmaWx0ZXI9J3VybCgjZjEpJyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgtMSknLz48cG9seWdvbiBwb2ludHM9JzQwLDAgMCwyMCA0MCw0MCAyNCwyMCcgc3R5bGU9J2ZpbGw6I2ZmZmZmZjtzdHJva2U6I2ZmZmZmZjsnLz48L2c+PGcgc3R5bGU9J3N0cm9rZTojZTdlN2U5O3N0cm9rZS13aWR0aDoxOyc+PGxpbmUgeDE9JzQwJyB5MT0nMCcgeDI9JzAnIHkyPScyMCcvPjxsaW5lIHgxPSc0MCcgeTE9JzQwJyB4Mj0nMCcgeTI9JzIwJy8+PC9nPjwvZz48L3N2Zz4="); }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMXB4JyBoZWlnaHQ9JzQ0cHgnPjxkZWZzPjxmaWx0ZXIgaWQ9J2YxJyB4PScwJyB5PScwJz48ZmVHYXVzc2lhbkJsdXIgaW49J1NvdXJjZUdyYXBoaWMnIHN0ZERldmlhdGlvbj0nMS4yNScvPjwvZmlsdGVyPjwvZGVmcz48ZyBzdHlsZT0nc3Ryb2tlOiNmZmZmZmY7c3Ryb2tlLXdpZHRoOjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7Jz48cG9seWdvbiBwb2ludHM9JzIxLDQ0IDEsMjIgMjEsMCcgc3R5bGU9J2ZpbGw6IzAwMDAwMDsnIGZpbHRlcj0ndXJsKCNmMSknLz48cG9seWdvbiBwb2ludHM9JzIxLDQ0IDEsMjIgMjEsMCcgc3R5bGU9J2ZpbGw6I2ZmZmZmZicvPjwvZz48ZyBzdHlsZT0nc3Ryb2tlOiNlN2U3ZTk7c3Ryb2tlLXdpZHRoOjE7Jz48bGluZSB4MT0nMjEnIHkxPSc0NCcgeDI9JzEnIHkyPScyMicvPjxsaW5lIHgxPScyMScgeTE9JzAnIHgyPScxJyB5Mj0nMjInLz48L2c+PC9zdmc+"); }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MHB4JyBoZWlnaHQ9JzQwcHgnPjxkZWZzPjxmaWx0ZXIgaWQ9J2YxJyB4PScwJyB5PScwJz48ZmVHYXVzc2lhbkJsdXIgaW49J1NvdXJjZUdyYXBoaWMnIHN0ZERldmlhdGlvbj0nMScvPjwvZmlsdGVyPjwvZGVmcz48ZyB0cmFuc2Zvcm09J3JvdGF0ZSgtNDUsIDIwLCAyMCkgdHJhbnNsYXRlKC04KSc+PGcgc3R5bGU9J3N0cm9rZS13aWR0aDoxO2ZpbGwtcnVsZTpldmVub2RkOyc+PHBvbHlnb24gcG9pbnRzPSc0MCwwIDAsMjAgNDAsNDAgMCwyMCcgc3R5bGU9J2ZpbGw6IzAwMDAwMDtzdHJva2U6IzAwMDAwMDtzdHJva2Utb3BhY2l0eTouMicgZmlsdGVyPSd1cmwoI2YxKScgdHJhbnNmb3JtPSd0cmFuc2xhdGUoLTEpJy8+PHBvbHlnb24gcG9pbnRzPSc0MCwwIDAsMjAgNDAsNDAgMjQsMjAnIHN0eWxlPSdmaWxsOiNmZmZmZmY7c3Ryb2tlOiNmZmZmZmY7Jy8+PC9nPjxnIHN0eWxlPSdzdHJva2U6I2U3ZTdlOTtzdHJva2Utd2lkdGg6MTsnPjxsaW5lIHgxPSc0MCcgeTE9JzAnIHgyPScwJyB5Mj0nMjAnLz48bGluZSB4MT0nNDAnIHkxPSc0MCcgeDI9JzAnIHkyPScyMCcvPjwvZz48L2c+PC9zdmc+"); }

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MHB4JyBoZWlnaHQ9JzQwcHgnPjxkZWZzPjxmaWx0ZXIgaWQ9J2YxJyB4PScwJyB5PScwJz48ZmVHYXVzc2lhbkJsdXIgaW49J1NvdXJjZUdyYXBoaWMnIHN0ZERldmlhdGlvbj0nMScvPjwvZmlsdGVyPjwvZGVmcz48ZyB0cmFuc2Zvcm09J3JvdGF0ZSgxMzUsIDIwLCAyMCkgdHJhbnNsYXRlKC04KSc+PGcgc3R5bGU9J3N0cm9rZS13aWR0aDoxO2ZpbGwtcnVsZTpldmVub2RkOyc+PHBvbHlnb24gcG9pbnRzPSc0MCwwIDAsMjAgNDAsNDAgMCwyMCcgc3R5bGU9J2ZpbGw6IzAwMDAwMDtzdHJva2U6IzAwMDAwMDtzdHJva2Utb3BhY2l0eTouMicgZmlsdGVyPSd1cmwoI2YxKScgdHJhbnNmb3JtPSd0cmFuc2xhdGUoLTEpJy8+PHBvbHlnb24gcG9pbnRzPSc0MCwwIDAsMjAgNDAsNDAgMjQsMjAnIHN0eWxlPSdmaWxsOiNmZmZmZmY7c3Ryb2tlOiNmZmZmZmY7Jy8+PC9nPjxnIHN0eWxlPSdzdHJva2U6I2U3ZTdlOTtzdHJva2Utd2lkdGg6MTsnPjxsaW5lIHgxPSc0MCcgeTE9JzAnIHgyPScwJyB5Mj0nMjAnLz48bGluZSB4MT0nNDAnIHkxPSc0MCcgeDI9JzAnIHkyPScyMCcvPjwvZz48L2c+PC9zdmc+"); }

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMXB4JyBoZWlnaHQ9JzQ0cHgnPjxkZWZzPjxmaWx0ZXIgaWQ9J2YxJyB4PScwJyB5PScwJz48ZmVHYXVzc2lhbkJsdXIgaW49J1NvdXJjZUdyYXBoaWMnIHN0ZERldmlhdGlvbj0nMS4yNScvPjwvZmlsdGVyPjwvZGVmcz48ZyBzdHlsZT0nc3Ryb2tlOiNmZmZmZmY7c3Ryb2tlLXdpZHRoOjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7Jz48cG9seWdvbiBwb2ludHM9JzAsNDQgMjAsMjIgMCwwJyBzdHlsZT0nZmlsbDojMDAwMDAwOycgZmlsdGVyPSd1cmwoI2YxKScvPjxwb2x5Z29uIHBvaW50cz0nMCw0NCAyMCwyMiAwLDAnIHN0eWxlPSdmaWxsOiNmZmZmZmYnLz48L2c+PGcgc3R5bGU9J3N0cm9rZTojZTdlN2U5O3N0cm9rZS13aWR0aDoxOyc+PGxpbmUgeDE9JzAnIHkxPSc0NCcgeDI9JzIwJyB5Mj0nMjInLz48bGluZSB4MT0nMCcgeTE9JzAnIHgyPScyMCcgeTI9JzIyJy8+PC9nPjwvc3ZnPg=="); }

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom:before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MHB4JyBoZWlnaHQ9JzQwcHgnPjxkZWZzPjxmaWx0ZXIgaWQ9J2YxJyB4PScwJyB5PScwJz48ZmVHYXVzc2lhbkJsdXIgaW49J1NvdXJjZUdyYXBoaWMnIHN0ZERldmlhdGlvbj0nMScvPjwvZmlsdGVyPjwvZGVmcz48ZyB0cmFuc2Zvcm09J3JvdGF0ZSgtMTM1LCAyMCwgMjApIHRyYW5zbGF0ZSgtOCknPjxnIHN0eWxlPSdzdHJva2Utd2lkdGg6MTtmaWxsLXJ1bGU6ZXZlbm9kZDsnPjxwb2x5Z29uIHBvaW50cz0nNDAsMCAwLDIwIDQwLDQwIDAsMjAnIHN0eWxlPSdmaWxsOiMwMDAwMDA7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW9wYWNpdHk6LjInIGZpbHRlcj0ndXJsKCNmMSknIHRyYW5zZm9ybT0ndHJhbnNsYXRlKC0xKScvPjxwb2x5Z29uIHBvaW50cz0nNDAsMCAwLDIwIDQwLDQwIDI0LDIwJyBzdHlsZT0nZmlsbDojZmZmZmZmO3N0cm9rZTojZmZmZmZmOycvPjwvZz48ZyBzdHlsZT0nc3Ryb2tlOiNlN2U3ZTk7c3Ryb2tlLXdpZHRoOjE7Jz48bGluZSB4MT0nNDAnIHkxPScwJyB4Mj0nMCcgeTI9JzIwJy8+PGxpbmUgeDE9JzQwJyB5MT0nNDAnIHgyPScwJyB5Mj0nMjAnLz48L2c+PC9nPjwvc3ZnPg=="); }

.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top {
  top: -14px; }
  .oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top:before {
    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0NHB4JyBoZWlnaHQ9JzIxcHgnPjxkZWZzPjxmaWx0ZXIgaWQ9J2YxJyB4PScwJyB5PScwJz48ZmVHYXVzc2lhbkJsdXIgaW49J1NvdXJjZUdyYXBoaWMnIHN0ZERldmlhdGlvbj0nMS4yNScvPjwvZmlsdGVyPjwvZGVmcz48ZyBzdHlsZT0nc3Ryb2tlOiNmZmZmZmY7c3Ryb2tlLXdpZHRoOjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7Jz48cG9seWdvbiBwb2ludHM9JzAsMjEgMjIsMSA0NCwyMScgc3R5bGU9J2ZpbGw6IzAwMDAwMDsnIGZpbHRlcj0ndXJsKCNmMSknLz48cG9seWdvbiBwb2ludHM9JzAsMjEgMjIsMSA0NCwyMScgc3R5bGU9J2ZpbGw6I2ZmZmZmZicvPjwvZz48ZyBzdHlsZT0nc3Ryb2tlOiNlN2U3ZTk7c3Ryb2tlLXdpZHRoOjE7Jz48bGluZSB4MT0nMCcgeTE9JzIxJyB4Mj0nMjInIHkyPScxJy8+PGxpbmUgeDE9JzQ0JyB5MT0nMjEnIHgyPScyMicgeTI9JzEnLz48L2c+PC9zdmc+"); }

.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom {
  bottom: -14px; }
  .oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom:before {
    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0NHB4JyBoZWlnaHQ9JzIxcHgnPjxkZWZzPjxmaWx0ZXIgaWQ9J2YxJyB4PScwJyB5PScwJz48ZmVHYXVzc2lhbkJsdXIgaW49J1NvdXJjZUdyYXBoaWMnIHN0ZERldmlhdGlvbj0nMS4yNScvPjwvZmlsdGVyPjwvZGVmcz48ZyBzdHlsZT0nc3Ryb2tlOiNmZmZmZmY7c3Ryb2tlLXdpZHRoOjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7Jz48cG9seWdvbiBwb2ludHM9JzAsMCAyMiwyMCA0NCwwJyBzdHlsZT0nZmlsbDojMDAwMDAwOycgZmlsdGVyPSd1cmwoI2YxKScvPjxwb2x5Z29uIHBvaW50cz0nMCwwIDIyLDIwIDQ0LDAnIHN0eWxlPSdmaWxsOiNmZmZmZmYnLz48L2c+PGcgc3R5bGU9J3N0cm9rZTojZTdlN2U5O3N0cm9rZS13aWR0aDoxOyc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMjInIHkyPScyMCcvPjxsaW5lIHgxPSc0NCcgeTE9JzAnIHgyPScyMicgeTI9JzIwJy8+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-popup-option-defaults {
  font-family: '{"modality":"modal"}'; }

.oj-popup {
  min-width: 70px;
  min-height: 70px; }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top {
  width: 40px;
  height: 40px;
  left: -14px;
  top: -14px; }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom {
  width: 40px;
  height: 40px;
  left: -14px;
  bottom: -14px; }

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top {
  width: 40px;
  height: 40px;
  right: -14px;
  top: -14px; }

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom {
  width: 40px;
  height: 40px;
  right: -14px;
  bottom: -14px; }

.oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle {
  width: 21px;
  height: 44px;
  left: -21px; }

.oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle {
  width: 21px;
  height: 44px;
  right: -21px; }

.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top {
  width: 44px;
  height: 21px;
  top: -21px; }

.oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom {
  width: 44px;
  height: 21px;
  bottom: -21px; }

/* buttonset */
/* --------------------------------------------------------------- */
/* 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-block;
  white-space: nowrap; }

/* 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-buttonset-multi.oj-button-outlined-chrome {
  font-size: 0;
  font-family: "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
  vertical-align: top; }

.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;
  font-size: 1.063rem;
  font-family: -apple-system, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.oj-buttonset-multi.oj-button-full-chrome .oj-button-sm.oj-button,
.oj-buttonset-multi.oj-button-outlined-chrome .oj-button-sm.oj-button {
  font-size: 0.875rem; }

.oj-buttonset-multi.oj-button-full-chrome .oj-button-lg.oj-button,
.oj-buttonset-multi.oj-button-outlined-chrome .oj-button-lg.oj-button {
  font-size: 1.125rem; }

.oj-buttonset-multi.oj-button-full-chrome .oj-button-xl.oj-button,
.oj-buttonset-multi.oj-button-outlined-chrome .oj-button-xl.oj-button {
  font-size: 1.25rem; }

/* .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: 5px;
  border-bottom-left-radius: 5px; }

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: 5px;
  border-bottom-right-radius: 5px; }

html.oj-slow-borderradius .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-first, html.oj-slow-borderradius
.oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-first {
  border-radius: 0; }

/* .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: 5px;
  border-bottom-right-radius: 5px; }

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: 5px;
  border-bottom-left-radius: 5px; }

html.oj-slow-borderradius .oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-last, html.oj-slow-borderradius
.oj-buttonset-multi.oj-button-outlined-chrome .oj-buttonset-last {
  border-radius: 0; }

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: #c4ced7; }

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: #c4ced7; }

html:not([dir="rtl"]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-active {
  border-left-color: #c4ced7; }

html[dir="rtl"] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-active {
  border-left-color: #c4ced7; }

html:not([dir="rtl"]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-selected {
  border-left-color: #c4ced7; }

html[dir="rtl"] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-selected {
  border-left-color: #c4ced7; }

html:not([dir="rtl"]) .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-first).oj-selected.oj-disabled {
  border-left-color: #c4ced7; }

html[dir="rtl"] .oj-buttonset-multi.oj-button-full-chrome .oj-button:not(.oj-buttonset-last).oj-selected.oj-disabled {
  border-left-color: #c4ced7; }

html:not([dir="rtl"]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-selected {
  border-left-color: #c4ced7; }

html[dir="rtl"] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-selected {
  border-left-color: #c4ced7; }

html:not([dir="rtl"]) .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-first).oj-selected.oj-disabled {
  border-left-color: #c4ced7; }

html[dir="rtl"] .oj-buttonset-multi.oj-button-outlined-chrome .oj-button:not(.oj-buttonset-last).oj-selected.oj-disabled {
  border-left-color: #c4ced7; }

.oj-buttonset-option-defaults {
  font-family: '{"chroming":"outlined"}'; }

/* toolbar*/
/* --------------------------------------------------------------- */
.oj-toolbar {
  padding: 0.250em 0;
  border-style: solid;
  border-color: #e7e7e9;
  border-width: 0;
  border-radius: 3px; }
  html.oj-slow-borderradius .oj-toolbar {
    border-radius: 0; }

.oj-toolbar .oj-button {
  margin-bottom: 0; }

/* 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 #e7e7e9;
  height: 1.833em;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.167em;
  margin-right: 0.167em; }

/* 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: #e7e7e9;
  border-width: 0;
  border-radius: 3px; }
  html.oj-slow-borderradius .oj-toolbars {
    border-radius: 0; }

.oj-toolbar-row .oj-toolbar {
  display: inline-block;
  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 #e7e7e9;
    margin-left: 0.167em;
    padding-left: 0.5em; }
  html[dir="rtl"] .oj-toolbar-row .oj-toolbar + .oj-toolbar {
    border-right: 1px solid #e7e7e9;
    margin-right: 0.167em;
    padding-right: 0.5em; }

.oj-toolbar-row + .oj-toolbar-row {
  border-top: 1px solid #e7e7e9; }

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

.oj-toolbar-option-defaults {
  font-family: '{"chroming":"half"}'; }

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

/* 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: #0572ce;
  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: 10px;
  padding-right: 10px;
  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: middle;
  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 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 #e7e7e9;
    padding-left: 5px; }
  html[dir="rtl"] .oj-pagingcontrol-nav-arrow-section {
    border-right: 1px solid #e7e7e9;
    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: table-cell;
  vertical-align: middle;
  line-height: 2.25rem; }

/* Styling for the page mode dot links. */
.oj-pagingcontrol-nav-dot {
  line-height: 1rem;
  padding: 8px 8px;
  display: inline-block;
  outline: none; }

/* Styling for the page mode dot link when hovered. */
.oj-pagingcontrol-nav-dot.oj-focus {
  outline: #4f4f4f dotted 1px; }

/* Styling for the page mode dot bullet. */
.oj-pagingcontrol-nav-dot-bullet {
  font-size: 0;
  background-color: #000000;
  border-radius: 50%;
  opacity: 0.2;
  position: relative;
  transition: all 0.3s ease 0s;
  width: 1rem;
  height: 1rem;
  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. */
.oj-pagingcontrol-nav-dot-bullet.oj-selected {
  background-color: #0572ce;
  content: "";
  opacity: 1; }

/* Styling for the page mode dot link when hovered. */
.oj-pagingcontrol-nav-dot-bullet.oj-hover {
  background-color: #0572ce;
  content: "";
  opacity: 1; }

/* Styling for the page mode page links. */
.oj-pagingcontrol-nav-page {
  color: #0572ce;
  min-width: 1rem;
  padding: 4px 8px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-size: 1rem;
  outline: none; }

.oj-pagingcontrol-nav-page.oj-hover {
  text-decoration: underline; }

/* Styling for the page mode page link when selected. */
.oj-pagingcontrol-nav-page.oj-selected {
  border: 1px solid #3a3a3a;
  display: inline;
  color: #000; }

/* 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;
  padding: 4px 8px;
  vertical-align: bottom;
  font-size: 1rem; }

/* Styling for the page mode page label. */
.oj-pagingcontrol-nav-label {
  color: #3a3a3a;
  vertical-align: middle;
  font-weight: bold;
  font-size: 1rem;
  padding-top: 0.1em; }

/* Styling for the page mode page input element. */
input.oj-pagingcontrol-nav-input {
  text-align: center;
  color: #000;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  margin: 4px 0 -1px 0;
  min-width: 2.5rem;
  max-width: 2.5rem;
  vertical-align: middle;
  min-height: 2rem;
  max-height: 2rem;
  font-size: 1rem;
  padding-left: 2px;
  padding-right: 2px; }
  html.oj-slow-borderradius input.oj-pagingcontrol-nav-input {
    border-radius: 0; }
  input.oj-pagingcontrol-nav-input::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  input.oj-pagingcontrol-nav-input::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  input.oj-pagingcontrol-nav-input:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

/* Styling for the page mode maximum number of pages text. */
.oj-pagingcontrol-nav-input-max {
  vertical-align: middle;
  color: #3a3a3a;
  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 {
  vertical-align: middle;
  color: #3a3a3a;
  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 {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  display: table-cell;
  vertical-align: middle;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 5px;
  cursor: default; }
  html.oj-slow-borderradius .oj-pagingcontrol-nav-arrow {
    border-radius: 0; }

/* Styling for the page mode navigation page arrows in hover state. */
.oj-pagingcontrol-nav-arrow.oj-hover {
  background-color: #0683ec;
  border-color: #0683ec;
  color: #ffffff;
  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: #ffffff;
  background: #044f91;
  border-color: #044f91; }

/* 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 */
/* --------------------------------------------------------------- */
/* Component option defaults. */
.oj-table-option-defaults {
  font-family: '{"displayStyle":"list"}'; }

/* Styling for the root component element. */
.oj-table {
  position: relative;
  line-height: normal;
  font-size: inherit;
  min-width: 240px;
  min-height: 4.5em;
  -webkit-tap-highlight-color: transparent;
  margin: 1px; }

/* Grid display styling for the root component element. */
.oj-table.oj-table-grid-display {
  border: 1px solid #e7e7e9;
  background-color: #f7f9fc;
  margin: 0; }

/* Styling for the root component element with warning. */
.oj-table.oj-warning {
  border: 1px solid #ffd699; }

/* Styling for the root component element when focused. */
.oj-table.oj-focus {
  outline: #3a3a3a dotted thin; }

/* Styling for the component div container element. */
.oj-table-container {
  display: inline-block;
  vertical-align: top;
  clear: both;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/* Styling for HTML table element. */
table.oj-table-element {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: calc(100% - 1px);
  outline: none;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit; }

/* Styling for the header element. */
.oj-table-header {
  color: #000;
  border-bottom: 1px solid #c8cfd5;
  font-size: inherit;
  overflow: hidden; }

/* Grid display styling for the header element. */
.oj-table-grid-display .oj-table-header {
  background-color: #f2f4f7;
  border-bottom: 1px solid #e7e7e9; }

/* Styling for the header row element. */
.oj-table-header-row {
  height: 2.75em;
  font-size: inherit;
  vertical-align: middle; }

/* Grid display styling for the header row element. */
.oj-table-grid-display .oj-table-header-row {
  height: 2.25em; }

/* Styling for the column header elements. */
.oj-table-column-header-cell {
  font-size: inherit;
  font-weight: normal;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  float: none;
  white-space: nowrap;
  height: 1.75em;
  line-height: 1.75em;
  text-overflow: ellipsis;
  overflow: hidden;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }
  html:not([dir="rtl"]) .oj-table-column-header-cell {
    padding-left: 1em; }
  html[dir="rtl"] .oj-table-column-header-cell {
    padding-right: 1em; }
  html:not([dir="rtl"]) .oj-table-column-header-cell {
    text-align: left; }
  html[dir="rtl"] .oj-table-column-header-cell {
    text-align: right; }

/* Grid display styling for the column header elements. */
.oj-table-grid-display .oj-table-column-header-cell {
  height: 1.25em;
  line-height: 1.25em; }
  html:not([dir="rtl"]) .oj-table-grid-display .oj-table-column-header-cell {
    padding-left: 0.5em;
    padding-right: 0.5em; }
  html[dir="rtl"] .oj-table-grid-display .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 column header elements in selected state when table focused. */
.oj-table.oj-focus .oj-table-column-header-cell.oj-selected {
  background-color: #b9dfff; }

/* Styling for the column header elements in selected state when table not focused. */
.oj-table-column-header-cell.oj-selected {
  background-color: #dae9f5; }

/* Styling for the column header element in hover state. */
.oj-table-column-header-cell.oj-hover {
  background-color: #d4d4d6; }

/* Styling for the column header element in focused state. */
.oj-table-column-header-cell.oj-focus {
  background-color: #dae9f5; }

/* Styling for the dragged column header element. */
.oj-table-column-header-cell.oj-drag {
  background-color: #d3e0ea;
  color: #9e9e9e; }

/* Styling for the column header drag image. */
.oj-table-column-header-cell-drag-image {
  border: 1px solid #bcc7d2;
  background-color: #b9dfff; }

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

html[dir="rtl"] .oj-table-column-header-cell.oj-table-column-header-drag-indicator-after {
  border-left: 6px solid #C3EAF3; }

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

html[dir="rtl"] .oj-table-column-header-cell.oj-table-column-header-drag-indicator-before {
  border-right: 6px solid #C3EAF3; }

/* Styling for the column header element. */
.oj-table-column-header {
  position: relative;
  height: inherit;
  float: none;
  text-overflow: inherit;
  overflow: inherit; }
  html:not([dir="rtl"]) .oj-table-column-header {
    padding-right: 10px; }
  html[dir="rtl"] .oj-table-column-header {
    padding-left: 10px; }

/* Grid display styling for the column header element. */
html:not([dir="rtl"]) .oj-table-grid-display .oj-table-column-header {
  padding-right: 0; }

html[dir="rtl"] .oj-table-grid-display .oj-table-column-header {
  padding-left: 0; }

/* Styling for the column header text. */
.oj-table-column-header-text {
  display: inline-block;
  height: inherit;
  overflow: inherit;
  text-overflow: inherit;
  vertical-align: top; }
  html:not([dir="rtl"]) .oj-table-column-header-text {
    padding-right: 5px; }
  html[dir="rtl"] .oj-table-column-header-text {
    padding-left: 5px; }

/* Grid display styling for the column header text. */
.oj-table-grid-display .oj-table-column-header-text {
  padding-right: 0; }

/* Styling for the column header sort ascending element. */
.oj-table-column-header-asc {
  position: absolute;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: top;
  top: 0; }
  html:not([dir="rtl"]) .oj-table-column-header-asc {
    right: 5px; }
  html[dir="rtl"] .oj-table-column-header-asc {
    left: 5px; }

/* Grid display styling for the column header sort ascending element. */
.oj-table-grid-display .oj-table-column-header-asc {
  top: -2px; }
  html:not([dir="rtl"]) .oj-table-grid-display .oj-table-column-header-asc {
    right: -5px; }
  html[dir="rtl"] .oj-table-grid-display .oj-table-column-header-asc {
    left: -5px; }

/* Styling for the column header sort descending element. */
.oj-table-column-header-dsc {
  position: absolute;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: top;
  top: -2px;
  top: 0; }
  html:not([dir="rtl"]) .oj-table-column-header-dsc {
    right: 5px; }
  html[dir="rtl"] .oj-table-column-header-dsc {
    left: 5px; }

/* Grid display styling for the column header sort descending element. */
.oj-table-grid-display .oj-table-column-header-dsc {
  top: -2px; }
  html:not([dir="rtl"]) .oj-table-grid-display .oj-table-column-header-dsc {
    right: -5px; }
  html[dir="rtl"] .oj-table-grid-display .oj-table-column-header-dsc {
    left: -5px; }

/* Styling for the column header sort ascending element in disabled state. */
.oj-table-column-header-asc.oj-disabled {
  display: none; }

/* Styling for the column header sort descending element in disabled state. */
.oj-table-column-header-dsc.oj-disabled {
  display: none; }

/* Styling for the column header sort icons. */
.oj-table-column-header-asc-icon,
.oj-table-column-header-dsc-icon {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  position: absolute;
  margin-top: -2px;
  text-decoration: none; }
  html:not([dir="rtl"]) .oj-table-column-header-asc-icon, html:not([dir="rtl"])
  .oj-table-column-header-dsc-icon {
    left: 0; }
  html[dir="rtl"] .oj-table-column-header-asc-icon, html[dir="rtl"]
  .oj-table-column-header-dsc-icon {
    right: 0; }

/* Styling for the column header sort icons in hover state. */
.oj-table-column-header-asc-icon.oj-hover,
.oj-table-column-header-dsc-icon.oj-hover {
  text-decoration: none; }

/* Icon for column header sort ascending in enabled state. */
/* Icon for column header sort ascending in disabled state. */
.oj-table-column-header-asc-icon.oj-disabled {
  visibility: hidden; }

/* Icon for column header sort descending */
/* Icon for column header sort descending in disabled state. */
.oj-table-column-header-dsc-icon.oj-disabled {
  visibility: hidden; }

/* Styling for the data body element. */
.oj-table-body {
  color: #000;
  border-width: 0 0 1px;
  border-color: #e7e7e9;
  border-style: solid;
  font-size: inherit; }

/* Grid display styling for the data body element. */
.oj-table-grid-display .oj-table-body {
  background-color: #ffffff;
  border: 0; }

/* Styling for the data row elements. */
.oj-table-body-row {
  height: 2.75em;
  font-size: inherit; }

/* Grid display styling for the data row elements. */
.oj-table-grid-display .oj-table-body-row {
  height: 2.25em; }

/* Styling for the data row elements in hover state. */
.oj-table-body-row.oj-hover {
  background-color: #ebeced; }

/* Styling for the data row drag indicator before a row. */
.oj-table-body-row-drag-indicator-before {
  height: 2.25em;
  background-color: #C3EAF3; }

/* Styling for the data row drag indicator after a row. */
.oj-table-body-row-drag-indicator-after {
  height: 2.25em;
  background-color: #C3EAF3; }

/* 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 #0572ce;
  border: 2px solid rgba(5, 114, 206, 0.8);
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #85bbe7;
  position: absolute;
  width: 11px;
  height: 11px;
  z-index: 1;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }
  html.oj-slow-borderradius .oj-table-body-row-touch-selection-affordance-top-icon, html.oj-slow-borderradius
  .oj-table-body-row-touch-selection-affordance-bottom-icon {
    border-radius: 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; }

/* Styling for the data cell elements. */
.oj-table-data-cell {
  font-size: inherit;
  font-weight: normal;
  min-width: 1rem;
  min-height: 1rem;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  float: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }
  html:not([dir="rtl"]) .oj-table-data-cell {
    text-align: left; }
  html[dir="rtl"] .oj-table-data-cell {
    text-align: right; }

/* Grid display styling for the data cell elements. */
.oj-table-grid-display .oj-table-data-cell {
  padding-left: 0.5em;
  padding-right: 0.5em; }

/* Styling for the dragged data cell elements. */
.oj-table-data-cell.oj-drag {
  background-color: #f2f4f7;
  color: #9e9e9e; }

/* Styling for the data cell elements in selected state when table focused. */
.oj-table.oj-focus .oj-table-data-cell.oj-selected {
  background-color: #dcdcde; }

/* 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-data-cell.oj-selected {
  background-color: #dcdcde; }

/* Styling for the data cell elements in focused state. */
.oj-table-data-cell.oj-focus {
  background-color: #dcdcde; }

/* Styling for the data cell elements in focus state when table in high contrast mode. */
.oj-hicontrast .oj-table-data-cell.oj-focus {
  outline-width: 2px;
  outline-style: dotted; }

/* Styling for the footer. */
.oj-table-footer {
  border-top: 1px solid #c8cfd5;
  font-size: inherit;
  overflow: hidden; }

/* Grid display styling for the footer. */
.oj-table-grid-display .oj-table-footer {
  background-color: #f2f4f7;
  border-top: 1px solid #e7e7e9; }

/* Styling for the footer row. */
.oj-table-footer-row {
  height: 2.75em;
  font-size: inherit; }

/* Grid display styling for the footer row. */
.oj-table-grid-display .oj-table-footer-row {
  height: 2.25em; }

/* Styling for the footer cells. */
.oj-table-footer-cell {
  float: none;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  font-size: inherit;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

/* Grid display styling for the footer cells. */
.oj-table-grid-display .oj-table-footer-cell {
  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 #d5dfe5; }

html[dir="rtl"] .oj-table-data-cell.oj-table-vgrid-lines {
  border-left: 1px solid #d5dfe5; }

/* Styling to remove the right border of the last vertical grid line. */
html:not([dir="rtl"]) .oj-table-vgrid-lines:last-child {
  border-right: 0; }

html[dir="rtl"] .oj-table-vgrid-lines:last-child {
  border-left: 0; }

/* Grid display styling for the vertical grid lines. */
html:not([dir="rtl"]) .oj-table-grid-display .oj-table-vgrid-lines {
  border-right: 1px solid #d5dfe5; }

html[dir="rtl"] .oj-table-grid-display .oj-table-vgrid-lines {
  border-left: 1px solid #d5dfe5; }

/* Styling for the horizontal grid lines. */
.oj-table-hgrid-lines {
  border-bottom: 1px solid #d5dfe5; }

/* 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: #fff2de;
  border: 1px solid #ffeaca;
  border-top-width: 0; }

/* Styling for the status message. */
.oj-table-status-message {
  background-color: #f7f9fc;
  position: absolute; }

/* Styling for the status message text. */
.oj-table-status-message-text {
  background-color: InfoBackground;
  color: InfoText;
  border: 1px #d5dfe5 solid;
  padding: 0.5em;
  display: inline-block; }

/* Styling for the No Data message. */
.oj-table-no-data-message {
  color: #000;
  padding: 0.5em; }

/* 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: #e7e7e9;
  border-width: 0 1px 1px;
  background-color: #f7f9fc; }

/* tree */
/* --------------------------------------------------------------- */
/*  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;
  min-width: 18px;
  vertical-align: middle; }
  html:not([dir="rtl"]) .oj-tree-node {
    margin-left: 18px; }
  html[dir="rtl"] .oj-tree-node {
    margin-right: 18px; }

/*  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 {
  -moz-box-sizing: content-box;
  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: 0.250em;
    margin-right: 0; }
  html[dir="rtl"] .oj-tree-icon {
    margin-right: 0.250em; }

/*  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: #9e9e9e;
  cursor: default; }

/*  Collapsed node children */
.oj-tree-node.oj-collapsed > ul {
  display: none; }

/*  Node text */
.oj-tree-title {
  border: 1px solid transparent;
  color: #0572ce;
  cursor: pointer;
  vertical-align: -0.15rem; }
  html:not([dir="rtl"]) .oj-tree-title {
    margin-left: 0.250em; }
  html[dir="rtl"] .oj-tree-title {
    margin-right: 0.250em; }

/*  Active node text  */
.oj-hover .oj-tree-title {
  border: 1px dashed #4f4f4f;
  background-color: transparent; }

/*  Selected node text  */
.oj-selected .oj-tree-title {
  border: 1px solid #c2ddf7;
  background-color: #c2ddf7;
  font-weight: bold; }

/*  Selected inactive node text  */
.oj-selected.oj-tree-inactive .oj-tree-title {
  border: 1px solid #bfd4e5;
  background-color: #dcdcde; }

/*  active and selected node text  */
.oj-hover.oj-selected .oj-tree-title {
  background-color: #c2ddf7;
  border: 1px solid #0572ce;
  font-weight: bold; }

/*  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: #0572ce; }

/*  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: #0572ce; }

/* Styling for a collapsed icon */
/* Styling for an expanded icon */
/*  Drag/Drop insert pointer icon */
/* Styling for the datagrid widget container */
.oj-datagrid {
  position: relative;
  border: 1px solid #e7e7e9;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #f7f9fc;
  -webkit-tap-highlight-color: transparent; }

/* Styling to remove focus ring border on focusable elements */
.oj-datagrid:focus,
.oj-datagrid-cell:focus,
.oj-datagrid-header-cell:focus,
.oj-datagrid-row:focus,
.oj-datagrid-scrollers:focus {
  outline: none; }

/* The default column width should be set here*/
.oj-datagrid-cell,
.oj-datagrid-column-header-cell {
  width: 4.166em; }

/* Styling on rows, the default row height should be set here*/
.oj-datagrid-row {
  position: absolute;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 2.25em;
  width: 100%; }

/* Styling on the row header containere*/
.oj-datagrid-row-header {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/* Styling on the column header container*/
.oj-datagrid-column-header {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/* Styling on header cells both for rows and columns */
.oj-datagrid-header-cell {
  position: absolute;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: normal;
  color: #000;
  background-color: #f2f4f7;
  padding: 0.5em;
  border-style: solid;
  border-color: #e7e7e9; }

/* Styling on the cells in the column header, the default column header height should be set here*/
.oj-datagrid-column-header-cell {
  height: 2.25em;
  text-align: center; }
  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 row header cells, the default row header width should be set her */
.oj-datagrid-row-header-cell {
  width: 4.166em;
  border-color: #e7e7e9;
  border-style: solid; }
  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 databody cells */
.oj-datagrid-cell {
  position: absolute;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  font-size: 1rem;
  color: #000;
  background-color: #ffffff;
  padding: 0.5em;
  border-style: solid;
  border-color: #d5dfe5;
  text-overflow: ellipsis; }
  html:not([dir="rtl"]) .oj-datagrid-cell {
    border-width: 0 1px 1px 0;
    text-align: right; }
  html[dir="rtl"] .oj-datagrid-cell {
    border-width: 0 0 1px 1px;
    text-align: left; }

/* Styling on header cell content both for rows and columns, used to properly align content */
.oj-datagrid-header-cell-content {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  white-space: nowrap; }

/* 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 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 1; }

/* styling to top align outside grouped headers */
.oj-datagrid-header-grouping > :first-child .oj-datagrid-header-cell-text {
  top: 0;
  bottom: auto; }

/* Styling on databody cell content */
.oj-datagrid-cell-content {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  white-space: nowrap; }

/* Styling on row and column banding */
.oj-datagrid-row.oj-datagrid-banded .oj-datagrid-cell,
.oj-datagrid-cell.oj-datagrid-banded {
  background-color: #f6f6f7; }

/* Styling on row and cell hover */
.oj-datagrid-row.oj-hover .oj-datagrid-cell,
.oj-datagrid-row .oj-datagrid-cell.oj-hover {
  background-color: #ebeced; }

/* Styling on row and cell selection */
.oj-datagrid.oj-focus .oj-datagrid-row.oj-selected .oj-datagrid-cell,
.oj-datagrid.oj-focus .oj-datagrid-cell.oj-selected {
  background-color: #dcdcde; }

/* Styling on row and cell inactive selection (when the grid root is not the focus) */
.oj-datagrid-row.oj-selected .oj-datagrid-cell,
.oj-datagrid-row .oj-datagrid-cell.oj-selected {
  background-color: #dcdcde; }

/* Styling on focused row and cell */
.oj-datagrid.oj-focus .oj-datagrid-row.oj-focus .oj-datagrid-cell,
.oj-datagrid.oj-focus .oj-datagrid-row .oj-datagrid-cell.oj-focus {
  background-color: #dcdcde; }

/* Styling for the data cell elements in selected state when data grid in high contrast mode. */
.oj-hicontrast .oj-datagrid.oj-focus .oj-datagrid-row.oj-selected .oj-datagrid-cell,
.oj-hicontrast .oj-datagrid.oj-focus .oj-datagrid-cell.oj-selected {
  border-width: 1px 2px 2px 1px;
  border-style: solid; }

/* Styling for the data cell elements in focus state when data grid in high contrast mode. */
.oj-hicontrast .oj-datagrid.oj-focus .oj-datagrid-row.oj-focus .oj-datagrid-cell,
.oj-hicontrast .oj-datagrid.oj-focus .oj-datagrid-row .oj-datagrid-cell.oj-focus {
  outline-width: 1px;
  outline-style: dotted;
  border-width: 0 1px 1px 0;
  border-style: dotted; }

/* Styling on header containers and databody, used for positioning*/
.oj-datagrid-header,
.oj-datagrid-databody {
  position: absolute;
  overflow: hidden; }

/* Styling on scrollers regions, used for positioning*/
.oj-datagrid-scrollers {
  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;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000; }

/* Styling on header cells when hovered both for rows and columns */
.oj-datagrid-header-cell.oj-hover {
  background-color: #d4d4d6; }

/* Styling on header cells when focus both for rows and columns */
.oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus {
  background-color: #dae9f5; }

/* Styling on header cells when focus both for rows and columns */
.oj-hicontrast .oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus {
  outline-width: 1px;
  outline-style: dotted;
  border-width: 0 1px 1px 0;
  border-style: dotted; }

/* Styling on the status text, such as fetching data */
.oj-datagrid-status {
  position: absolute;
  display: none;
  background-color: #fbfcc5;
  border: 1px #d5dfe5 solid;
  padding: 0.5em;
  top: 50%; }

/* Styling for the empty data grid text, default only used for positioning */
.oj-datagrid-empty-text {
  position: absolute;
  padding: 0.5em; }

/* 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;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-color: #e7e7e9;
  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: #f7f9fc; }
  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 sort area around the icon */
.oj-datagrid-sort-icon-container {
  position: absolute;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  width: 25px;
  bottom: 0;
  padding: 0 0.5em 0.5em 0.5em; }
  html:not([dir="rtl"]) .oj-datagrid-sort-icon-container {
    right: 0; }
  html[dir="rtl"] .oj-datagrid-sort-icon-container {
    left: 0; }

/* Styling for the gradient for sort icons in the header */
html:not([dir="rtl"]) .oj-datagrid-sort-icon-container.oj-enabled {
  background-image: -webkit-linear-gradient(left, rgba(242, 244, 247, 0), #f2f4f7 40%);
  background-image: linear-gradient(to right, rgba(242, 244, 247, 0), #f2f4f7 40%); }

html[dir="rtl"] .oj-datagrid-sort-icon-container.oj-enabled {
  background-image: -webkit-linear-gradient(right, rgba(242, 244, 247, 0), #f2f4f7 40%);
  background-image: linear-gradient(to left, rgba(242, 244, 247, 0), #f2f4f7 40%); }

html.oj-slow-cssgradients .oj-datagrid-sort-icon-container.oj-enabled {
  background-image: none;
  background-color: #f2f4f7; }

/* Styling for the gradient for sort icons on hover in the header */
html:not([dir="rtl"]) .oj-hover .oj-datagrid-sort-icon-container {
  background-image: -webkit-linear-gradient(left, rgba(212, 212, 214, 0), #d4d4d6 40%);
  background-image: linear-gradient(to right, rgba(212, 212, 214, 0), #d4d4d6 40%); }

html[dir="rtl"] .oj-hover .oj-datagrid-sort-icon-container {
  background-image: -webkit-linear-gradient(right, rgba(212, 212, 214, 0), #d4d4d6 40%);
  background-image: linear-gradient(to left, rgba(212, 212, 214, 0), #d4d4d6 40%); }

html.oj-slow-cssgradients .oj-hover .oj-datagrid-sort-icon-container {
  background-image: none;
  background-color: #d4d4d6; }

/* Styling for the gradient for sort icons on hover in an focused header */
html:not([dir="rtl"]) .oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-hover.oj-focus .oj-datagrid-sort-icon-container, html:not([dir="rtl"])
.oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus .oj-datagrid-sort-icon-container.oj-enabled {
  background-image: -webkit-linear-gradient(left, rgba(218, 233, 245, 0), #dae9f5 40%);
  background-image: linear-gradient(to right, rgba(218, 233, 245, 0), #dae9f5 40%); }

html[dir="rtl"] .oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-hover.oj-focus .oj-datagrid-sort-icon-container, html[dir="rtl"]
.oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus .oj-datagrid-sort-icon-container.oj-enabled {
  background-image: -webkit-linear-gradient(right, rgba(218, 233, 245, 0), #dae9f5 40%);
  background-image: linear-gradient(to left, rgba(218, 233, 245, 0), #dae9f5 40%); }

html.oj-slow-cssgradients .oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-hover.oj-focus .oj-datagrid-sort-icon-container, html.oj-slow-cssgradients
.oj-datagrid.oj-focus .oj-datagrid-header-cell.oj-focus .oj-datagrid-sort-icon-container.oj-enabled {
  background-image: none;
  background-color: #dae9f5; }

/* Styling for both the sort icons and click area */
html:not([dir="rtl"]) .oj-datagrid-sort-ascending-icon, html:not([dir="rtl"])
.oj-datagrid-sort-descending-icon {
  float: right; }

html[dir="rtl"] .oj-datagrid-sort-ascending-icon, html[dir="rtl"]
.oj-datagrid-sort-descending-icon {
  float: left; }

/* Styling for disabled sort icons */
.oj-datagrid-sort-ascending-icon.oj-disabled,
.oj-datagrid-sort-descending-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-row.oj-datagrid-cut .oj-datagrid-cell,
.oj-datagrid-row.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-row.oj-drag {
  opacity: 0.8;
  z-index: 1; }

/* Styling all drop targets in the datagrid when dragging rows*/
.oj-datagrid .oj-drop {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  opacity: .8; }

/* Styling for databody drop targets when dragging rows*/
.oj-datagrid-databody .oj-drop {
  border: 1px solid #C3EAF3;
  background-color: #D9F4FA; }

/* Styling for header drop targets when dragging rows*/
.oj-datagrid-header .oj-drop {
  border: 1px solid #D9F4FA;
  background-color: #C3EAF3; }

/* Styling for the selection affordance icon on touch devices*/
.oj-datagrid-touch-selection-affordance-top,
.oj-datagrid-touch-selection-affordance-bottom {
  border-radius: 50%;
  border: 2px solid #0572ce;
  border: 2px solid rgba(5, 114, 206, 0.8);
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #85bbe7;
  width: 11px;
  height: 11px;
  z-index: 1;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }
  html.oj-slow-borderradius .oj-datagrid-touch-selection-affordance-top, html.oj-slow-borderradius
  .oj-datagrid-touch-selection-affordance-bottom {
    border-radius: 0; }

/* Styling for the selection affordance touchable area on touch devices*/
.oj-datagrid-touch-area {
  width: 24px;
  height: 24px;
  position: absolute; }

/* Styling for the sort ascending icon */
/* Styling for the sort descending icon */
/* Styling for the widget */
.oj-rowexpander {
  display: inline-block; }

/* Bottom alignment in datagrid */
.oj-datagrid .oj-rowexpander {
  height: 100%; }

/* Size and position the spacer */
.oj-rowexpander-icon-spacer {
  min-width: 1.5em;
  display: inline-block; }

/* Size and position the touch area */
.oj-rowexpander-touch-area {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 1.5em;
  width: 1.5em;
  padding: .25em;
  margin-bottom: -.25em; }

/* Data grid specific bottom alignment of touch area */
.oj-datagrid .oj-rowexpander-touch-area {
  position: absolute;
  bottom: 0; }

/* Table specific centered alignment of touch area */
.oj-table .oj-rowexpander-touch-area {
  margin-top: -.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 {
  font-size: 1em;
  line-height: 1; }

/* Data grid specific absolute icon positioning */
.oj-datagrid .oj-rowexpander-leaf-icon,
.oj-datagrid .oj-rowexpander-expand-icon,
.oj-datagrid .oj-rowexpander-collapse-icon,
.oj-datagrid .oj-rowexpander-lazyload-icon {
  position: absolute; }

/* 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 {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  line-height: 1; }

.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 for the expand icon */
/* Styling for the collapse icon */
/* Styling to remove the default underlining of hovered links */
.oj-rowexpander a:hover,
.oj-rowexpander a:focus {
  text-decoration: none; }

/* Styling for the listview widget container */
.oj-listview {
  position: relative;
  border-width: 1px 0;
  border-color: #e7e7e9;
  border-style: solid;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 2.25em; }

/* 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-collapse-icon:focus,
.oj-listview-group-item:focus,
.oj-listview-item-element:focus {
  outline: none; }

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

/* 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,
ul: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.5rem;
  background-image: linear-gradient(#d5dfe5, #d5dfe5);
  background-size: 100% 1px;
  background-position: 0 0;
  background-repeat: no-repeat;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 1px solid transparent; }

/* set on item before add or remove animation */
.oj-listview-item-add-remove-transition {
  transition: max-height 0.4s, opacity 0.4s;
  overflow: hidden; }

/* styling on list item element */
.oj-listview-item-element {
  line-height: normal; }

/* Styling on list item hover */
.oj-listview-item.oj-hover {
  background-color: #ebeced;
  border-top: 1px solid #d5dfe5;
  background-size: 0; }

.oj-listview-group-item.oj-hover {
  background-color: #ebeced; }

.oj-listview-item.oj-hover + li.oj-listview-item {
  border-top: 1px solid #d5dfe5;
  background-size: 0; }

/* Styling on list item selection */
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected {
  background-color: #dcdcde;
  border-top: 1px solid #bababc;
  background-size: 0; }

.oj-listview.oj-focus-ancestor .oj-listview-group-item.oj-selected {
  background-color: #dcdcde; }

.oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected + li.oj-listview-item {
  border-top: 1px solid #bababc;
  background-size: 0; }

/* Styling on list item inactive selection (when the root is not focus) */
.oj-listview-item.oj-selected {
  background-color: #dcdcde;
  border-top: 1px solid #bababc;
  background-size: 0; }

.oj-listview-group-item.oj-selected {
  background-color: #dcdcde; }

/* Styling on focused list or group item */
.oj-listview-item.oj-focus,
.oj-listview-group-item.oj-focus {
  outline-width: 1px;
  outline-style: dotted;
  outline-offset: -1px; }

/* Styling on focused list item */
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-focus {
  background-color: #dcdcde;
  border-top: 1px solid #bababc;
  background-size: 0; }

.oj-listview.oj-focus-ancestor .oj-listview-item.oj-focus + li.oj-listview-item {
  border-top: 1px solid #bababc;
  background-size: 0; }

/* Styling on focused group item */
.oj-listview.oj-focus-ancestor .oj-listview-group-item.oj-focus {
  background-color: #f6f6f7; }

/* Styling for the list item elements in selected state when listview is in high contrast mode. */
.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-item.oj-focus,
.oj-hicontrast .oj-listview-group-item.oj-focus {
  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: bold;
  color: #3a3a3a;
  padding: 0.5rem;
  border: 0 solid #d5dfe5;
  border-width: 0 0 1px;
  font-size: 1rem;
  background-color: #f6f6f7;
  opacity: 1;
  -moz-box-sizing: border-box;
  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 is in collapsed state, remove bottom border to avoid double border */
.oj-listview-item-element.oj-collapsed .oj-listview-group-item {
  border-bottom: 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; }

/* expand and collapse animation */
.oj-listview-collapsible-transition {
  transition: max-height 0.4s;
  overflow: hidden; }

/* Styling on the status text, such as fetching data */
.oj-listview-status {
  position: absolute;
  display: none;
  background-color: #ffffff;
  padding: 5px;
  top: 50%; }

/* Styling for the empty list text */
.oj-listview-empty-text {
  padding: 0.5rem;
  background-color: #ffffff; }

/* Alignment for the expand and collapse icons */
.oj-listview-expand-icon,
.oj-listview-collapse-icon {
  padding: 9px;
  outline-offset: -9px; }

/* Styling for group item when card layout is used */
.oj-listview-card-layout .oj-listview-group {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

/* Styling for item when card layout is used */
.oj-listview-card-layout li.oj-listview-item {
  width: 240px;
  height: auto;
  border: 1px solid #e7e7e9;
  border-radius: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  background-size: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  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; }

/* Styling for the drill icon */
.oj-listview-drill-icon {
  width: 16px;
  height: 16px;
  color: #bababc; }

/* Styling for the drill icon when item has focus */
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-focus .oj-listview-drill-icon {
  color: #0572ce; }

/* Styling for the drill icon when item is selected */
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected .oj-listview-drill-icon {
  color: #0572ce; }

/* Styling for the drill icon when hover over an item */
.oj-listview-item.oj-hover .oj-listview-drill-icon {
  color: #85bbe7; }

/* Styling for the activity indicator for high watermark scrolling */
.oj-listview-loading-icon {
  width: 40px;
  height: 40px;
  margin: auto; }
  .oj-listview-loading-icon:before {
    content: url("images/pull_to_refresh_full.gif"); }

/* Styling for the expand icon */
/* Styling for the collapse icon */
/* Styling for each list item */
/* the border is position to where the content starts */
.oj-listview-item {
  background-position: 0.5rem 0; }

/* Styling on focused list or group item */
.oj-listview-item.oj-focus,
.oj-listview-group-item.oj-focus {
  outline-style: none; }

/* Styling for drill icon */
/* Styling for drill icon in various states */
.oj-listview-item.oj-hover .oj-listview-drill-icon,
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-focus .oj-listview-drill-icon,
.oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected .oj-listview-drill-icon {
  color: #bababc; }

/* Styling for the indexer widget container */
.oj-indexer {
  width: 32px;
  height: 100%; }

/* 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: 32px;
  line-height: 17px;
  vertical-align: middle;
  color: #0572ce;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.75rem; }

/* styling on each item that does not have a corresponding group header */
.oj-indexer li.oj-disabled {
  opacity: 0.5; }

/* styling on hovered item */
.oj-indexer li:hover {
  text-decoration: underline; }

/* styling on focused item */
.oj-indexer.oj-focus-ancestor li.oj-focus {
  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: "\25CF"; }

.oj-dvtbase {
  display: block;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s; }

.oj-dvt-category1 {
  color: #267db3; }

.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 {
  background-color: #f6f6f7;
  color: #000;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  padding: 2px;
  font-size: 1rem;
  font-family: -apple-system, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.oj-dvt-datatip {
  background-color: #f6f6f7;
  color: #000;
  border-style: solid;
  border-color: #000000;
  border-radius: 2px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  border-width: 2px;
  padding: 2px;
  font-size: 0.875rem;
  font-family: -apple-system, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; }
  html.oj-slow-borderradius .oj-dvt-datatip {
    border-radius: 0; }
  html.oj-slow-boxshadow .oj-dvt-datatip {
    box-shadow: none; }

.oj-legend {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
  font-size: 0.875rem;
  color: #000; }

.oj-legend-title {
  font-size: 0.875rem; }

.oj-legend-section-title {
  font-size: 0.875rem; }

html:not([dir="rtl"]) .oj-legend-section-open-icon {
  background-image: url("../common/images/dvt/legend/open-ena.png"); }

html[dir="rtl"] .oj-legend-section-open-icon {
  background-image: url("../common/images/dvt/legend/open-ena-r.png"); }

html:not([dir="rtl"]) .oj-legend-section-open-icon.oj-hover {
  background-image: url("../common/images/dvt/legend/open-ovr.png"); }

html[dir="rtl"] .oj-legend-section-open-icon.oj-hover {
  background-image: url("../common/images/dvt/legend/open-ovr-r.png"); }

html:not([dir="rtl"]) .oj-legend-section-open-icon.oj-active {
  background-image: url("../common/images/dvt/legend/open-dwn.png"); }

html[dir="rtl"] .oj-legend-section-open-icon.oj-active {
  background-image: url("../common/images/dvt/legend/open-dwn-r.png"); }

html:not([dir="rtl"]) .oj-legend-section-close-icon {
  background-image: url("../common/images/dvt/legend/closed-ena.png"); }

html[dir="rtl"] .oj-legend-section-close-icon {
  background-image: url("../common/images/dvt/legend/closed-ena-r.png"); }

html:not([dir="rtl"]) .oj-legend-section-close-icon.oj-hover {
  background-image: url("../common/images/dvt/legend/closed-ovr.png"); }

html[dir="rtl"] .oj-legend-section-close-icon.oj-hover {
  background-image: url("../common/images/dvt/legend/closed-ovr-r.png"); }

html:not([dir="rtl"]) .oj-legend-section-close-icon.oj-active {
  background-image: url("../common/images/dvt/legend/closed-dwn.png"); }

html[dir="rtl"] .oj-legend-section-close-icon.oj-active {
  background-image: url("../common/images/dvt/legend/closed-dwn-r.png"); }

.oj-legend-title {
  color: #595959; }

.oj-legend-section-title {
  color: #595959; }

.oj-chart {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
  width: 400px;
  height: 300px; }

.oj-chart-select-icon {
  background-image: url("../common/images/dvt/chart/marquee-up.png"); }

.oj-chart-select-icon.oj-active {
  background-image: url("../common/images/dvt/chart/marquee-down.png"); }

.oj-chart-pan-icon {
  background-image: url("../common/images/dvt/chart/pan-up.png"); }

.oj-chart-pan-icon.oj-active {
  background-image: url("../common/images/dvt/chart/pan-down.png"); }

.oj-chart-zoom-icon {
  background-image: url("../common/images/dvt/chart/zoom-up.png"); }

.oj-chart-zoom-icon.oj-active {
  background-image: url("../common/images/dvt/chart/zoom-down.png"); }

.oj-chart-footnote {
  font-size: 0.875rem;
  color: #000; }

.oj-chart-data-label {
  font-size: 0.875rem; }

.oj-chart-subtitle {
  font-size: 1.25rem;
  color: #595959; }

.oj-chart-stock-falling {
  background-color: #ed6647; }

.oj-chart-stock-range {
  background-color: #b8b8b8; }

.oj-chart-stock-rising {
  background-color: #6b6f74; }

.oj-chart-title {
  font-size: 1.25rem;
  color: #3a3a3a;
  font-weight: normal; }

.oj-chart-stack-label {
  font-size: 0.875rem;
  font-weight: normal; }

.oj-chart-pie-center-label,
.oj-chart-xaxis-title,
.oj-chart-yaxis-title,
.oj-chart-y2axis-title {
  font-size: 1rem;
  color: #595959; }

.oj-chart-xaxis-tick-label,
.oj-chart-yaxis-tick-label,
.oj-chart-y2axis-tick-label {
  font-size: 0.875rem;
  color: #000; }

.oj-sparkchart {
  width: 100px;
  height: 18px; }

.oj-diagram {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
  width: 100%;
  height: 400px; }

.oj-diagram-node.oj-hover {
  border-top-color: #ebeced;
  border-bottom-color: #ffffff; }

.oj-diagram-node.oj-selected {
  border-color: #000000; }

.oj-diagram-node-label {
  font-size: 1rem;
  color: #000; }

.oj-diagram-link {
  color: #9bb2c7; }

.oj-diagram-link.oj-hover {
  border-top-color: #ebeced;
  border-bottom-color: #ffffff; }

.oj-diagram-link.oj-selected {
  border-color: #000000; }

.oj-diagram-link-label {
  font-size: 1rem;
  color: #000; }

.oj-dialgauge {
  width: 200px;
  height: 200px; }

.oj-ledgauge {
  width: 40px;
  height: 40px; }

.oj-statusmetergauge {
  width: 220px;
  height: 25px; }

.oj-ratinggauge {
  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-nbox {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
  width: 100%;
  height: 540px; }

.oj-nbox-columns-title,
.oj-nbox-rows-title {
  color: #000;
  font-size: 1rem; }

.oj-nbox-column-label,
.oj-nbox-row-label {
  color: #000;
  font-size: 0.875rem; }

.oj-nbox-cell {
  background-color: #e9e9e9; }

.oj-nbox-cell.oj-maximized {
  background-color: #dddddd; }

.oj-nbox-cell.oj-minimized {
  background-color: #e9e9e9; }

.oj-nbox-cell-label {
  color: #000;
  font-size: 1rem;
  font-weight: normal; }

.oj-nbox-cell-countlabel {
  color: #000; }

.oj-nbox-cell-countlabel.oj-nbox-cell-header {
  font-size: 1rem; }

.oj-nbox-node {
  background-color: #ffffff; }

.oj-nbox-node.oj-hover {
  border-color: #ffffff; }

.oj-nbox-node.oj-selected {
  border-color: #000000; }

.oj-nbox-node-label {
  font-size: 1rem; }

.oj-nbox-node-secondarylabel {
  font-size: 0.875rem; }

.oj-nbox-dialog {
  background-color: #e9e9e9;
  border-color: #bcc7d2; }

.oj-nbox-dialog-label {
  color: #000;
  font-size: 1rem;
  font-weight: normal; }

.oj-nbox-dialog-countlabel {
  font-size: 1rem;
  font-weight: normal; }

.oj-pictochart {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
  display: inline-block; }

.oj-pictochart-item {
  background-color: #a6acb1; }

.oj-tagcloud {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
  width: 100%;
  height: 300px;
  color: #000; }

.oj-thematicmap {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
  width: 600px;
  height: 375px; }

.oj-thematicmap-arealayer {
  background-color: #dddddd;
  border-color: #ffffff;
  font-size: 1rem; }

.oj-thematicmap-area {
  border-color: #ffffff; }

.oj-thematicmap-area.oj-hover {
  border-color: #ffffff; }

.oj-thematicmap-area.oj-selected {
  border-top-color: #ffffff;
  border-bottom-color: #000000; }

.oj-thematicmap-marker {
  border-color: #ffffff;
  background-color: #333333;
  color: #000;
  font-size: 1rem; }

.oj-treemap {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
  width: 650px;
  height: 400px;
  font-size: 0.875rem;
  color: #000; }

html:not([dir="rtl"]) .oj-treemap-isolate-icon {
  background-image: url("../common/images/dvt/treemap/s_max_ena.png"); }

html[dir="rtl"] .oj-treemap-isolate-icon {
  background-image: url("../common/images/dvt/treemap/s_max_ena_rtl.png"); }

html:not([dir="rtl"]) .oj-treemap-restore-icon {
  background-image: url("../common/images/dvt/treemap/s_restore_ena.png"); }

html[dir="rtl"] .oj-treemap-restore-icon {
  background-image: url("../common/images/dvt/treemap/s_restore_ena_rtl.png"); }

html:not([dir="rtl"]) .oj-treemap-isolate-icon.oj-hover {
  background-image: url("../common/images/dvt/treemap/s_max_ovr.png"); }

html[dir="rtl"] .oj-treemap-isolate-icon.oj-hover {
  background-image: url("../common/images/dvt/treemap/s_max_ovr_rtl.png"); }

html:not([dir="rtl"]) .oj-treemap-restore-icon.oj-hover {
  background-image: url("../common/images/dvt/treemap/s_restore_ovr.png"); }

html[dir="rtl"] .oj-treemap-restore-icon.oj-hover {
  background-image: url("../common/images/dvt/treemap/s_restore_ovr_rtl.png"); }

html:not([dir="rtl"]) .oj-treemap-isolate-icon.oj-active {
  background-image: url("../common/images/dvt/treemap/s_max_dwn.png"); }

html[dir="rtl"] .oj-treemap-isolate-icon.oj-active {
  background-image: url("../common/images/dvt/treemap/s_max_dwn_rtl.png"); }

html:not([dir="rtl"]) .oj-treemap-restore-icon.oj-active {
  background-image: url("../common/images/dvt/treemap/s_restore_dwn.png"); }

html[dir="rtl"] .oj-treemap-restore-icon.oj-active {
  background-image: url("../common/images/dvt/treemap/s_restore_dwn_rtl.png"); }

.oj-treemap-attribute-type-text {
  font-weight: bold;
  color: #3a3a3a;
  font-size: 1rem; }

.oj-treemap-attribute-value-text {
  font-size: 1rem; }

.oj-treemap-current-text {
  color: #000;
  font-size: 1rem; }

.oj-treemap-node {
  font-size: 0.875rem; }

.oj-treemap-node.oj-hover {
  border-color: #ebeced; }

.oj-treemap-node.oj-selected {
  border-top-color: #000000;
  border-bottom-color: #ffffff; }

.oj-treemap-node-header {
  font-size: 0.875rem;
  color: #3a3a3a;
  background-color: #ffffff;
  border-color: #d5dfe5; }

.oj-treemap-node-header.oj-hover {
  background-color: #ebeced;
  border-color: #d5dfe5;
  border-top-color: #ebeced;
  border-bottom-color: #d4d4d6; }

.oj-treemap-node-header.oj-selected {
  background-color: #dae9f5;
  border-color: #d5dfe5;
  border-top-color: #000000;
  border-bottom-color: #ffffff; }

.oj-sunburst {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
  width: 400px;
  height: 400px;
  font-size: 0.875rem;
  color: #000; }

.oj-sunburst-expand-icon {
  background-image: url("../common/images/dvt/sunburst/node_expand.png"); }

.oj-sunburst-collapse-icon {
  background-image: url("../common/images/dvt/sunburst/node_collapse.png"); }

.oj-sunburst-expand-icon.oj-hover {
  background-image: url("../common/images/dvt/sunburst/node_expand_ovr.png"); }

.oj-sunburst-collapse-icon.oj-hover {
  background-image: url("../common/images/dvt/sunburst/node_collapse_ovr.png"); }

.oj-sunburst-expand-icon.oj-active {
  background-image: url("../common/images/dvt/sunburst/node_expand_ovr.png"); }

.oj-sunburst-collapse-icon.oj-active {
  background-image: url("../common/images/dvt/sunburst/node_collapse_ovr.png"); }

.oj-sunburst-attribute-type-text {
  font-weight: bold;
  color: #3a3a3a;
  font-size: 1rem; }

.oj-sunburst-attribute-value-text {
  font-size: 1rem; }

.oj-sunburst-current-text {
  color: #000;
  font-size: 1rem; }

.oj-sunburst-node {
  font-size: 0.875rem; }

.oj-sunburst-node.oj-hover {
  border-color: #ebeced; }

.oj-sunburst-node.oj-selected {
  border-top-color: #000000;
  border-bottom-color: #ffffff; }

.oj-timeline {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
  border-color: #d5dfe5; }

.oj-timeline-item {
  background-color: #ffffff;
  border-color: #648baf; }

.oj-timeline-item.oj-hover {
  border-color: #85bbe7; }

.oj-timeline-item.oj-selected {
  border-color: #000000; }

.oj-timeline-item-description {
  color: #000;
  white-space: nowrap;
  font-size: 0.875rem;
  font-family: -apple-system, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.oj-timeline-item-title {
  color: #3a3a3a;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: bold;
  font-family: -apple-system, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.oj-timeline-major-axis-label {
  color: #3a3a3a;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: bold;
  font-family: -apple-system, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.oj-timeline-major-axis-separator {
  color: #bcc7d2; }

.oj-timeline-minor-axis {
  background-color: #f6f6f7;
  border-color: #d5dfe5; }

.oj-timeline-minor-axis-label {
  color: #000;
  white-space: nowrap;
  font-size: 0.875rem;
  font-family: -apple-system, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.oj-timeline-minor-axis-separator {
  color: #bcc7d2; }

.oj-timeline-overview {
  background-color: #e6ecf3; }

.oj-timeline-overview-label {
  color: #3a3a3a;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: bold;
  font-family: -apple-system, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.oj-timeline-overview-window {
  background-color: #ffffff;
  border-color: #4f4f4f; }

.oj-timeline-overview-window-handle-horizontal {
  background-image: url("../common/images/dvt/common/drag_horizontal.png"); }

.oj-timeline-overview-window-handle-vertical {
  background-image: url("../common/images/dvt/common/drag_vertical.png"); }

.oj-timeline-reference-object {
  color: #ff591f; }

.oj-timeline-series {
  background-color: #f6f6f7; }

.oj-timeline-series-label {
  color: #3a3a3a;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: bold;
  font-family: -apple-system, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.oj-timeline-series-empty-text {
  color: #000;
  white-space: nowrap;
  font-size: 0.875rem;
  font-family: -apple-system, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.oj-timeline-scroll-indicator-back {
  background-image: url("../common/images/dvt/timeline/scroll_l.png"); }

.oj-timeline-scroll-indicator-forward {
  background-image: url("../common/images/dvt/timeline/scroll_r.png"); }

.oj-timeline-scroll-indicator-up {
  background-image: url("../common/images/dvt/timeline/scroll_t.png"); }

.oj-timeline-scroll-indicator-down {
  background-image: url("../common/images/dvt/timeline/scroll_b.png"); }

.oj-timeline-zoomin-icon {
  background-image: url("../common/images/dvt/common/func_plus_16_ena.png"); }

.oj-timeline-zoomin-icon.oj-hover {
  background-image: url("../common/images/dvt/common/func_plus_16_hov.png"); }

.oj-timeline-zoomin-icon.oj-active {
  background-image: url("../common/images/dvt/common/func_plus_16_act.png"); }

.oj-timeline-zoomin-icon.oj-disabled {
  background-image: url("../common/images/dvt/common/func_plus_16_dis.png"); }

.oj-timeline-zoomout-icon {
  background-image: url("../common/images/dvt/common/func_minus_16_ena.png"); }

.oj-timeline-zoomout-icon.oj-hover {
  background-image: url("../common/images/dvt/common/func_minus_16_hov.png"); }

.oj-timeline-zoomout-icon.oj-active {
  background-image: url("../common/images/dvt/common/func_minus_16_act.png"); }

.oj-timeline-zoomout-icon.oj-disabled {
  background-image: url("../common/images/dvt/common/func_minus_16_dis.png"); }

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

/* separator inside popup container */
.oj-messaging-popup-container hr {
  margin-top: 20px;
  margin-bottom: 10px; }

/* 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: 5px;
  border-top-width: 1px;
  border-radius: 5px; }

.oj-radioset .oj-messaging-inline-container .oj-message:first-child,
.oj-checkboxset .oj-messaging-inline-container .oj-message:first-child,
.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: #FFF3F3;
  border-color: #ffdfdf; }

.oj-messaging-inline-container .oj-message.oj-message-warning {
  background-color: #fff2de;
  border-color: #ffeaca; }

.oj-messaging-inline-container .oj-message.oj-message-info {
  background-color: #EAF5FB;
  border-color: #d9edf8; }

.oj-messaging-inline-container .oj-message.oj-message-confirmation {
  background-color: #E5F6EA;
  border-color: #d6f1de; }

/** 
     * wraps a message block that includes the icon and content inline-blocks
     * 1. prevent wrapping the content inline-block.  
     */
.oj-message {
  display: block;
  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; }

.oj-message-content {
  display: inline-block;
  width: 95%; }

/* 
     * wraps the message summary and detail parts 
     * 1. IE requires width to be set in addition to max-width. 324 is 95% of 340px
     */
.oj-messaging-popup-container .oj-message-content {
  max-width: 324px;
  width: 95%;
  /* 1 */ }

/**
     * message summary text 
     * 1. allow summary text to wrap normally.
     */
.oj-message-summary {
  color: #000;
  font-size: 1rem;
  font-weight: normal;
  vertical-align: top;
  white-space: normal;
  /* 1 */ }
  html:not([dir="rtl"]) .oj-message-summary {
    padding: 0 0 0 10px; }
  html[dir="rtl"] .oj-message-summary {
    padding: 0 10px 0 0; }

/** 
     * message detail text 
     * 1. allow detail text to wrap normally.
     */
.oj-message-detail {
  color: #000;
  white-space: normal;
  /* 1 */ }
  html:not([dir="rtl"]) .oj-message-detail {
    padding: 7px 0 0 10px; }
  html[dir="rtl"] .oj-message-detail {
    padding: 7px 10px 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 {
  display: inline-block;
  vertical-align: top; }

.oj-messaging-inline-container .oj-message {
  margin-top: 5px;
  border-radius: 5px;
  border-width: 1px 1px 1px 1px; }

.oj-label,
.oj-label-nocomp {
  display: block;
  color: #3a3a3a;
  font-size: 0.875rem;
  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; }

/* 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 {
  vertical-align: top; }

.oj-label label {
  float: left; }
  html[dir="rtl"] .oj-label label {
    float: right; }

.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 {
  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.oj-label-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }
  html:not([dir="rtl"]) .oj-label.oj-label-nowrap {
    padding-right: 0.625rem; }
  html[dir="rtl"] .oj-label.oj-label-nowrap {
    padding-left: 0.625rem; }

.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;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  html:not([dir="rtl"]) .oj-label-inline {
    padding-right: 0.625rem; }
  html[dir="rtl"] .oj-label-inline {
    padding-left: 0.625rem; }

.oj-form-non-control-inline {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.55em;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.oj-label-inline label {
  float: right; }
  html[dir="rtl"] .oj-label-inline label {
    float: left; }

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

.oj-label-accesskey {
  text-decoration: underline; }

.oj-label-help-def {
  border-bottom: 2px dotted #3d3d3d; }

.oj-label-required-icon {
  background-color: #ff0000;
  border-radius: 50%;
  height: 4px;
  width: 4px; }

/* form-control classes */
/* --------------------------------------------------------------- */
html .oj-form-control {
  margin-bottom: 4px;
  vertical-align: middle; }

/** for all hints */
.oj-form-control-hint {
  color: #000;
  padding: 0;
  word-wrap: break-word; }

.oj-form-control-title {
  color: #000; }

.oj-inputtext,
.oj-inputpassword,
.oj-textarea,
.oj-inputtext-nocomp,
.oj-inputpassword-nocomp,
.oj-textarea-nocomp {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: 1.0625rem;
  /* 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%;
  min-width: 8em;
  width: 100%; }

.oj-inputtext-input,
.oj-inputpassword-input,
.oj-textarea-input,
.oj-inputtext-nocomp,
.oj-inputpassword-nocomp,
.oj-textarea-nocomp {
  text-align: left;
  color: #000;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: normal;
  width: 100%; }
  html[dir="rtl"] .oj-inputtext-input, html[dir="rtl"]
  .oj-inputpassword-input, html[dir="rtl"]
  .oj-textarea-input, html[dir="rtl"]
  .oj-inputtext-nocomp, html[dir="rtl"]
  .oj-inputpassword-nocomp, html[dir="rtl"]
  .oj-textarea-nocomp {
    text-align: right; }
  html.oj-slow-borderradius .oj-inputtext-input, html.oj-slow-borderradius
  .oj-inputpassword-input, html.oj-slow-borderradius
  .oj-textarea-input, html.oj-slow-borderradius
  .oj-inputtext-nocomp, html.oj-slow-borderradius
  .oj-inputpassword-nocomp, html.oj-slow-borderradius
  .oj-textarea-nocomp {
    border-radius: 0; }
  .oj-inputtext-input::-webkit-input-placeholder,
  .oj-inputpassword-input::-webkit-input-placeholder,
  .oj-textarea-input::-webkit-input-placeholder,
  .oj-inputtext-nocomp::-webkit-input-placeholder,
  .oj-inputpassword-nocomp::-webkit-input-placeholder,
  .oj-textarea-nocomp::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputtext-input::-moz-placeholder,
  .oj-inputpassword-input::-moz-placeholder,
  .oj-textarea-input::-moz-placeholder,
  .oj-inputtext-nocomp::-moz-placeholder,
  .oj-inputpassword-nocomp::-moz-placeholder,
  .oj-textarea-nocomp::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputtext-input:-ms-input-placeholder,
  .oj-inputpassword-input:-ms-input-placeholder,
  .oj-textarea-input:-ms-input-placeholder,
  .oj-inputtext-nocomp:-ms-input-placeholder,
  .oj-inputpassword-nocomp:-ms-input-placeholder,
  .oj-textarea-nocomp:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

.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 {
  height: 1.938rem;
  padding: 0 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.oj-textarea-input,
.oj-textarea-nocomp {
  height: auto;
  padding: 0.5em 0;
  resize: none;
  line-height: 1.4375rem; }

.oj-inputtext.oj-invalid .oj-inputtext-input,
.oj-inputpassword.oj-invalid .oj-inputpassword-input,
.oj-textarea.oj-invalid .oj-textarea-input {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-style: solid;
  border-color: #dd6666; }

.oj-inputtext.oj-warning .oj-inputtext-input,
.oj-inputpassword.oj-warning .oj-inputpassword-input,
.oj-textarea.oj-warning .oj-textarea-input {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-style: solid;
  border-color: #ffd699; }

.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] {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-inputtext.oj-read-only .oj-inputtext-input,
.oj-inputpassword.oj-read-only .oj-inputpassword-input,
.oj-textarea.oj-read-only .oj-textarea-input,
.oj-inputtext-nocomp[readonly],
.oj-inputpassword-nocomp[readonly],
.oj-textarea-nocomp[readonly] {
  color: #000;
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  font-size: 1.0625rem;
  font-weight: bold;
  padding: 0; }

.oj-textarea.oj-read-only .oj-textarea-input,
.oj-textarea-nocomp[readonly] {
  padding-top: 6px; }

/* inputnumber */
/* --------------------------------------------------------------- */
/* We need to support this sizing use cases: 
       - width on root dom element should be the width of input and buttons, not just input. */
/* Root dom element for inputnumber. 
     It wraps the input and the down/up buttons */
.oj-inputnumber {
  display: inline-block;
  /* 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%;
  min-width: 8em;
  width: 100%;
  font-size: 1.0625rem; }

.oj-inputnumber-wrapper {
  width: 100%;
  white-space: nowrap;
  display: -webkit-inline-flex;
  display: inline-flex;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  height: 1.938rem; }
  html.oj-slow-borderradius .oj-inputnumber-wrapper {
    border-radius: 0; }

/* Input field for inputnumber */
.oj-inputnumber-input {
  text-align: right;
  color: #000;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  border-style: solid;
  border-color: transparent;
  border-width: 0;
  -webkit-flex: 1;
  flex: 1;
  min-width: 1em;
  outline: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 100%; }
  html[dir="rtl"] .oj-inputnumber-input {
    text-align: left; }
  .oj-inputnumber-input::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputnumber-input::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputnumber-input:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }
  html:not([dir="rtl"]) .oj-inputnumber-input {
    border-radius: 5px 0 0 5px; }
  html[dir="rtl"] .oj-inputnumber-input {
    border-radius: 0 5px 5px 0; }
  html:not([dir="rtl"]) .oj-inputnumber-input {
    padding: 0 5px 0 0; }
  html[dir="rtl"] .oj-inputnumber-input {
    padding: 0 0 0 5px; }

/* more specificity is required here to overide default button borders */
.oj-inputnumber .oj-inputnumber-button.oj-button {
  margin-bottom: 0;
  height: auto;
  line-height: normal;
  border-width: 0;
  border-color: #0572ce; }

html:not([dir="rtl"]) .oj-inputnumber .oj-inputnumber-up.oj-button {
  border-radius: 0 5px 5px 0; }

html[dir="rtl"] .oj-inputnumber .oj-inputnumber-up.oj-button {
  border-radius: 5px 0 0 5px; }

.oj-inputnumber .oj-inputnumber-button.oj-button:not(.oj-disabled) {
  border-color: #0572ce; }

.oj-inputnumber-button.oj-button.oj-inputnumber-down {
  border-width: 0 0;
  border-radius: 0; }

/* Invalid styling for the widget. Spec calls for border around entire
     component, not just input. */
.oj-inputnumber.oj-invalid .oj-inputnumber-wrapper {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-color: #dd6666; }

/* Warning styling for the widget.  Spec calls for border around entire
     component, not just input. */
.oj-inputnumber.oj-warning .oj-inputnumber-wrapper {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-color: #ffd699; }

/* Disabled styling for the widget */
.oj-inputnumber.oj-disabled .oj-inputnumber-input {
  color: #000;
  background-color: transparent; }

.oj-inputnumber.oj-disabled .oj-inputnumber-wrapper {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

/* readonly styling for the widget */
.oj-inputnumber.oj-read-only .oj-inputnumber-wrapper {
  border-color: transparent; }

.oj-inputnumber.oj-read-only .oj-inputnumber-input {
  color: #000;
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  font-size: 1.0625rem;
  font-weight: bold;
  padding: 0; }

.oj-inputnumber.oj-read-only .oj-inputnumber-button {
  display: none; }

/* Up/Down button styling */
/* Styling for the container of the button */
.oj-inputnumber-button {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.oj-inputnumber .oj-inputnumber-down-icon,
.oj-inputnumber .oj-inputnumber-up-icon {
  font-size: 12px; }

.oj-inputnumber-up-icon {
  margin-bottom: 3px; }

.oj-inputnumber-down-icon {
  margin-bottom: 2px; }

.oj-inputnumber.oj-disabled .oj-inputnumber-button.oj-button {
  border-color: #0572ce; }

.oj-inputnumber:not(.oj-disabled) .oj-button.oj-inputnumber-button.oj-button-icon-only {
  opacity: 1; }

.oj-inputnumber .oj-button.oj-disabled .oj-button-icon {
  opacity: 0.5; }

.oj-inputnumber:not(.oj-disabled) .oj-button.oj-inputnumber-button.oj-button-icon-only.oj-active .oj-button-icon {
  color: #ffffff; }

.oj-inputnumber:not(.oj-disabled) .oj-button.oj-inputnumber-button.oj-button-icon-only.oj-active {
  background-color: #0572ce; }

.oj-inputnumber-button.oj-button.oj-inputnumber-down {
  border-width: 0; }

/* listbox */
/* --------------------------------------------------------------- */
/*
     * applied to the dropdown
     */
/* defines the stacking context for the listbox */
.oj-listbox-drop-layer {
  z-index: 1000; }

.oj-listbox-drop {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  top: 100%;
  background: #ffffff;
  border: 1px solid #e7e7e9;
  border-top: 0;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); }
  html.oj-slow-boxshadow .oj-listbox-drop {
    box-shadow: none; }

/*
     * applied to the dropdown when it is open above the component
     */
.oj-listbox-drop-above {
  border-top: 1px solid #e7e7e9;
  border-bottom: 0; }

/*
     * applied to placeholder in the dropdown
     */
.oj-listbox-placeholder {
  color: #646464; }

/* 
     * applied to results
     */
.oj-listbox-results {
  max-height: 200px;
  padding: 0;
  margin: 1px 0 2px 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: transparent; }

/* 
     * 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;
  cursor: pointer;
  min-height: 2rem;
  -webkit-touch-callout: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-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: 20px; }

html[dir="rtl"] .oj-listbox-results-depth-1 > .oj-listbox-result-label {
  padding-right: 20px; }

html:not([dir="rtl"]) .oj-listbox-results-depth-2 > .oj-listbox-result-label {
  padding-left: 35px; }

html[dir="rtl"] .oj-listbox-results-depth-2 > .oj-listbox-result-label {
  padding-right: 35px; }

html:not([dir="rtl"]) .oj-listbox-results-depth-3 > .oj-listbox-result-label {
  padding-left: 50px; }

html[dir="rtl"] .oj-listbox-results-depth-3 > .oj-listbox-result-label {
  padding-right: 50px; }

html:not([dir="rtl"]) .oj-listbox-results-depth-4 > .oj-listbox-result-label {
  padding-left: 65px; }

html[dir="rtl"] .oj-listbox-results-depth-4 > .oj-listbox-result-label {
  padding-right: 65px; }

html:not([dir="rtl"]) .oj-listbox-results-depth-5 > .oj-listbox-result-label {
  padding-left: 80px; }

html[dir="rtl"] .oj-listbox-results-depth-5 > .oj-listbox-result-label {
  padding-right: 80px; }

html:not([dir="rtl"]) .oj-listbox-results-depth-6 > .oj-listbox-result-label {
  padding-left: 95px; }

html[dir="rtl"] .oj-listbox-results-depth-6 > .oj-listbox-result-label {
  padding-right: 95px; }

html:not([dir="rtl"]) .oj-listbox-results-depth-7 > .oj-listbox-result-label {
  padding-left: 110px; }

html[dir="rtl"] .oj-listbox-results-depth-7 > .oj-listbox-result-label {
  padding-right: 110px; }

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

/*
     * applied to disabled choices in the dropdown
     */
.oj-listbox-results .oj-disabled {
  color: #9e9e9e;
  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: #ffffff; }

/* 
     * Applied to the spyglass (search icon) container
     */
.oj-listbox-spyglass-box {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
  border: 0;
  overflow: hidden;
  display: inline-block;
  position: absolute; }
  html:not([dir="rtl"]) .oj-listbox-spyglass-box {
    right: 0;
    padding-right: 5px; }
  html[dir="rtl"] .oj-listbox-spyglass-box {
    left: 0;
    padding-left: 5px; }

/* 
     * Applied to the search box which includes the search text and the spyglass icon
     */
.oj-listbox-search {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  display: inline-table;
  background-color: #ffffff;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px; }
  html.oj-slow-borderradius .oj-listbox-search {
    border-radius: 0; }

/* 
     * Applied to the search text
     */
.oj-listbox-input {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  color: #000;
  outline: none;
  border: 0;
  border-radius: 5px;
  background-color: inherit;
  box-shadow: none;
  padding-top: 6px;
  padding-bottom: 5px; }
  html.oj-slow-borderradius .oj-listbox-input {
    border-radius: 0; }
  html:not([dir="rtl"]) .oj-listbox-input {
    padding-right: 2rem;
    padding-left: 0; }
  html[dir="rtl"] .oj-listbox-input {
    padding-left: 2rem;
    padding-right: 0; }

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

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

.oj-hicontrast .oj-listbox-results .oj-hover {
  border: 1px solid #0572ce; }

.oj-hicontrast .oj-listbox-results .oj-disabled {
  border: 1px dotted #0572ce; }

/* 
     * Applied to the search icon
     */
.oj-listbox-search-icon {
  padding: 0.31rem; }

/* 
     * Applied to the spyglass (search icon) container
     */
.oj-listbox-spyglass-box {
  padding-top: 1px; }
  html:not([dir="rtl"]) .oj-listbox-spyglass-box {
    padding-right: 6px; }
  html[dir="rtl"] .oj-listbox-spyglass-box {
    padding-left: 6px; }

/* 
     * 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 #ffffff;
  outline: -webkit-focus-ring-color auto; }

/* 
     * Applied to the matching text in the dropdown options
     */
.oj-listbox-highlighter {
  font-weight: bold; }

.oj-inputdatetime,
.oj-inputdatetime-date-time,
.oj-inputdatetime-date-only,
.oj-inputdatetime-time-only {
  /* 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%;
  min-width: 8em;
  width: 100%;
  display: inline-block; }

.oj-inputdatetime-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: 100%;
  min-width: 8em;
  width: 100%; }

.oj-inputdatetime-input-container {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  width: 100%;
  font-size: 1rem; }

.oj-inputdatetime-input {
  text-align: right;
  color: #0572ce;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-flex: 1;
  flex: 1;
  min-width: 1em;
  font-family: inherit;
  font-weight: normal;
  padding: 0 0;
  height: 1.938rem;
  outline: 0; }
  html[dir="rtl"] .oj-inputdatetime-input {
    text-align: left; }
  html.oj-slow-borderradius .oj-inputdatetime-input {
    border-radius: 0; }
  .oj-inputdatetime-input::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputdatetime-input::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputdatetime-input:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }
  html:not([dir="rtl"]) .oj-inputdatetime-input {
    border-width: 0 0 0 0;
    border-radius: 5px 0 0 5px; }
  html[dir="rtl"] .oj-inputdatetime-input {
    border-width: 0 0 0 0;
    border-radius: 0 5px 5px 0; }
  html.oj-slow-borderradius .oj-inputdatetime-input {
    border-radius: 0; }

.oj-inputdatetime-input-trigger {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  border-style: solid;
  border-color: #0572ce;
  background-color: transparent;
  height: 1.938rem;
  line-height: 1.938rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap; }
  html:not([dir="rtl"]) .oj-inputdatetime-input-trigger {
    border-width: 0 0 0 0;
    border-radius: 0 5px 5px 0; }
  html[dir="rtl"] .oj-inputdatetime-input-trigger {
    border-width: 0 0 0 0;
    border-radius: 5px 0 0 5px; }
  html.oj-slow-borderradius .oj-inputdatetime-input-trigger {
    border-radius: 0; }

.oj-inputdatetime.oj-warning .oj-inputdatetime-input,
.oj-inputdatetime.oj-warning .oj-inputdatetime-input-trigger {
  border-color: #ffd699; }

.oj-inputdatetime.oj-invalid .oj-inputdatetime-input,
.oj-inputdatetime.oj-invalid .oj-inputdatetime-input-trigger {
  border-color: #dd6666; }

.oj-inputdatetime.oj-invalid .oj-inputdatetime-input,
.oj-inputdatetime.oj-warning .oj-inputdatetime-input {
  border-radius: 0; }
  html:not([dir="rtl"]) .oj-inputdatetime.oj-invalid .oj-inputdatetime-input, html:not([dir="rtl"])
  .oj-inputdatetime.oj-warning .oj-inputdatetime-input {
    border-width: 0 0 2px 0; }
  html[dir="rtl"] .oj-inputdatetime.oj-invalid .oj-inputdatetime-input, html[dir="rtl"]
  .oj-inputdatetime.oj-warning .oj-inputdatetime-input {
    border-width: 0 0 2px 0; }

.oj-inputdatetime.oj-invalid .oj-inputdatetime-input-trigger,
.oj-inputdatetime.oj-warning .oj-inputdatetime-input-trigger {
  border-radius: 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: 0 0 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: 0 0 2px 0; }

.oj-inputdatetime.oj-active .oj-inputdatetime-input-trigger,
.oj-inputdatetime.oj-active .oj-inputdatetime-input {
  background-color: #dcdcde; }

.oj-inputdatetime.oj-disabled .oj-inputdatetime-input {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-inputdatetime.oj-disabled .oj-inputdatetime-input-trigger {
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-inputdatetime.oj-read-only .oj-inputdatetime-input {
  color: #000;
  background-color: transparent;
  border-color: transparent;
  border-left-width: 0;
  border-right-width: 0;
  font-size: 1.0625rem;
  font-weight: bold;
  padding: 0; }

.oj-inputdatetime.oj-read-only .oj-inputdatetime-input-trigger {
  display: none; }

.oj-inputdatetime-calendar-icon,
.oj-inputdatetime-time-icon {
  cursor: pointer;
  padding: 0 5px;
  vertical-align: middle;
  line-height: inherit; }

.oj-inputdatetime-calendar-icon.oj-disabled,
.oj-inputdatetime-time-icon.oj-disabled {
  background-color: transparent;
  cursor: default; }

.oj-datepicker-popup .oj-popup-content {
  padding: 0; }

/* Class for the root node that contains the floating calendar */
.oj-datepicker-content {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px 3px 0 4px;
  width: 100%;
  min-width: 15em; }
  html[dir="rtl"] .oj-datepicker-content {
    direction: rtl; }

.oj-datepicker-header {
  position: relative;
  padding: 1px 0;
  background: none;
  border: 0;
  color: #3a3a3a;
  font-weight: normal; }

.oj-datepicker-prev-icon,
.oj-datepicker-next-icon {
  position: absolute;
  top: 2px; }

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;
  line-height: 1.8em;
  text-align: center; }

.oj-datepicker-title select {
  font-size: 1rem;
  margin: 1px 0; }

.oj-datepicker-month-year {
  width: 100%; }

.oj-datepicker-month {
  margin-right: 3px; }

.oj-datepicker-month,
.oj-datepicker-year {
  width: 48%;
  min-width: 0; }

.oj-datepicker-calendar {
  width: 100%;
  font-size: 1rem;
  border-collapse: collapse;
  margin: 0 0 4px;
  outline: 0 none; }

.oj-datepicker-calendar th,
.oj-datepicker-calendar td {
  border: 0;
  text-align: center;
  font-weight: bold; }

.oj-datepicker-calendar th {
  padding: .7em .3em;
  text-transform: uppercase;
  font-size: 0.875rem;
  color: #595959; }

.oj-datepicker-calendar td {
  padding: 0; }

.oj-datepicker-calendar td span,
.oj-datepicker-calendar td a {
  display: block;
  padding: 5px 0 4px;
  text-align: center; }

.oj-datepicker-calendar td a.oj-enabled {
  background: none;
  border: 1px solid transparent;
  color: #000;
  font-weight: bold;
  text-decoration: none; }

.oj-datepicker-calendar td a.oj-hover {
  text-decoration: underline; }

.oj-datepicker-calendar td a.oj-selected {
  background: #0572ce;
  color: #ffffff; }

.oj-datepicker-calendar td.oj-disabled {
  opacity: 0.5; }

.oj-datepicker-calendar td.oj-disabled span {
  color: #0572ce; }

.oj-datepicker-calendar td.oj-datepicker-other-month a.oj-enabled {
  color: #527689; }

td.oj-datepicker-today {
  border: 1px solid #0572ce; }

.oj-datepicker-buttonpane {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 2px 0 0;
  padding: 0 3px;
  border: 1px solid #e7e7e9;
  border-width: 1px 0 0;
  display: inline-block;
  width: 100%; }
  html[dir="rtl"] .oj-datepicker-buttonpane {
    clear: right; }

.oj-datepicker-buttonpane button {
  margin: 7px 0;
  padding: 0 7px;
  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-multi .oj-datepicker-group {
  float: left; }
  html[dir="rtl"] .oj-datepicker-multi .oj-datepicker-group {
    float: right; }

.oj-datepicker-multi .oj-datepicker-group .oj-datepicker-calendar {
  width: 95%;
  margin: 0 auto .4em; }

.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-days-cell-over {
  outline: 1px dotted #145c9e; }

.oj-datepicker-week-col {
  color: #3a3a3a; }

th.oj-datepicker-week-col {
  background-color: #fafafa; }

td.oj-datepicker-week-col {
  background-color: #e2e2e5; }

.oj-datepicker-inline {
  margin-bottom: 6px; }

.oj-datepicker-inline .oj-datepicker-content {
  background-color: #ffffff;
  border: 1px solid #e7e7e9; }

.oj-inputdate-option-defaults {
  font-family: '{"datePicker":{"showOn":"focus"}}'; }

.oj-inputdatetime-date-only .oj-inputdatetime-calendar-icon,
.oj-inputdatetime-date-time .oj-inputdatetime-calendar-icon {
  display: none; }

html:not([dir="rtl"]) .oj-inputdatetime-date-only .oj-inputdatetime-input {
  border-radius: 5px 5px 5px 5px; }

html[dir="rtl"] .oj-inputdatetime-date-only .oj-inputdatetime-input {
  border-radius: 5px 5px 5px 5px; }

html.oj-slow-borderradius .oj-inputdatetime-date-only .oj-inputdatetime-input {
  border-radius: 0; }

/* radioset and checkboxset styles */
/* this styles the radio, checkbox, and their labels */
/* --------------------------------------------------------------- */
/* App developer should put a span around the input and label, and use this styleclass */
.oj-choice-row {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  margin: 0; }

.oj-choice-row-inline {
  display: -webkit-inline-flex;
  display: inline-flex;
  align-items: center;
  padding-top: 1px; }

.oj-choice-row input[type="checkbox"],
.oj-choice-row input[type="radio"],
.oj-choice-row-inline input[type="checkbox"],
.oj-choice-row-inline input[type="radio"] {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.oj-radioset,
.oj-checkboxset {
  display: inline-block; }

.oj-radio-label,
.oj-checkbox-label,
.oj-checkbox-label-nocomp {
  color: #000;
  display: inline-block;
  font-size: 1rem;
  font-weight: normal;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent; }

.oj-radio-label.oj-disabled,
.oj-checkbox-label.oj-disabled,
.oj-checkbox-nocomp[disabled] + .oj-checkbox-label-nocomp {
  color: #000;
  opacity: 0.5; }

.oj-radio-label.oj-selected,
.oj-checkbox-label.oj-selected {
  color: #0572ce; }

.oj-radio,
.oj-checkbox,
.oj-checkbox-nocomp {
  display: inline-block; }

.oj-radioset-wrapper,
.oj-checkboxset-wrapper {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #ffffff; }

.oj-radioset-wrapper,
.oj-checkboxset-wrapper {
  border-color: #e7e7e9;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px; }
  html.oj-slow-borderradius .oj-radioset-wrapper, html.oj-slow-borderradius
  .oj-checkboxset-wrapper {
    border-radius: 0; }

.oj-radioset .oj-choice-row:not(.oj-disabled):active,
.oj-radioset .oj-choice-row-inline:not(.oj-disabled):active,
.oj-checkboxset .oj-choice-row:not(.oj-disabled):active,
.oj-checkboxset .oj-choice-row-inline:not(.oj-disabled):active {
  background-color: #dcdcde; }

.oj-radioset .oj-choice-row:not(.oj-disabled):active,
.oj-checkboxset .oj-choice-row:not(.oj-disabled):active {
  border-top: 1px solid #bababc; }

.oj-choice-row-inline {
  margin: 0;
  padding-top: 0; }

.oj-radioset .oj-choice-row:first-child,
.oj-checkboxset .oj-choice-row:first-child {
  border-top: 1px transparent solid; }

.oj-radioset .oj-choice-row,
.oj-checkboxset .oj-choice-row {
  border-top: 1px #e7e7e9 solid;
  padding-top: 0; }

.oj-radioset .oj-choice-row:not(.oj-disabled):active + .oj-choice-row,
.oj-checkboxset .oj-choice-row:not(.oj-disabled):active + .oj-choice-row {
  border-top: 1px solid #bababc; }

.oj-radioset .oj-choice-row:last-child:not(.oj-disabled):active,
.oj-checkboxset .oj-choice-row:last-child:not(.oj-disabled):active {
  border-bottom: 1px solid #bababc; }

.oj-choice-row:last-child {
  border-bottom: 1px solid transparent; }

.oj-choice-row,
.oj-choice-row-inline {
  position: relative;
  min-height: 2.6rem;
  height: 2.6rem; }

.oj-radio,
.oj-checkbox,
.oj-choice-row .oj-checkbox-nocomp {
  position: absolute;
  top: 33%; }

html:not([dir="rtl"]) .oj-checkbox-label-nocomp {
  margin-right: 1.5em; }

html[dir="rtl"] .oj-checkbox-label-nocomp {
  margin-left: 1.5em; }

html:not([dir="rtl"]) .oj-radio-label, html:not([dir="rtl"])
.oj-checkbox-label, html:not([dir="rtl"])
.oj-checkbox-label-nocomp {
  padding-left: 10px;
  text-align: left; }

html[dir="rtl"] .oj-radio-label, html[dir="rtl"]
.oj-checkbox-label, html[dir="rtl"]
.oj-checkbox-label-nocomp {
  padding-right: 10px;
  text-align: right; }

.oj-choice-row .oj-radio-label,
.oj-choice-row .oj-checkbox-label,
.oj-choice-row .oj-checkbox-label-nocomp {
  -webkit-flex: 1;
  flex: 1; }

.oj-choice-row-inline {
  border-top-width: 0; }

.oj-radioset,
.oj-checkboxset {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 8em;
  width: 100%; }

.oj-radioset.oj-invalid .oj-radioset-wrapper,
.oj-checkboxset.oj-invalid .oj-checkboxset-wrapper {
  border: 2px solid #dd6666; }

.oj-radioset.oj-warning .oj-radioset-wrapper,
.oj-checkboxset.oj-warning .oj-checkboxset-wrapper {
  border: 2px solid #ffd699; }

.oj-radio-label,
.oj-checkbox-label {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  height: 100%; }

.oj-radiocheckbox-label-text {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-order: 0;
  order: 0; }

.oj-radiocheckbox-icon {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-repeat: no-repeat;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-order: 1;
  order: 1; }

.oj-radio-label .oj-radiocheckbox-icon {
  background-image: url("images/radio_ena_unselected.svg"); }

.oj-radio-label.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/radio_ena_selected.svg"); }

.oj-radio-label:active .oj-radiocheckbox-icon {
  background-image: url("images/radio_pressed_unselected.svg"); }

.oj-radio-label:active.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/radio_pressed_selected.svg"); }

.oj-radio-label.oj-disabled .oj-radiocheckbox-icon {
  background-image: url("images/radio_dis_unselected.svg"); }

.oj-radio-label.oj-disabled.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/radio_dis_selected.svg"); }

.oj-checkbox-label .oj-radiocheckbox-icon {
  background-image: url("images/checkbox_ena_unselected.svg"); }

.oj-checkbox-label.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/checkbox_ena_selected.svg"); }

.oj-checkbox-label:active .oj-radiocheckbox-icon {
  background-image: url("images/checkbox_pressed_unselected.svg"); }

.oj-checkbox-label:active.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/checkbox_pressed_selected.svg"); }

.oj-checkbox-label.oj-disabled .oj-radiocheckbox-icon {
  background-image: url("images/checkbox_dis_unselected.svg"); }

.oj-checkbox-label.oj-disabled.oj-selected .oj-radiocheckbox-icon {
  background-image: url("images/checkbox_dis_selected.svg"); }

.oj-hicontrast .oj-radioset .oj-radio-label .oj-radiocheckbox-icon,
.oj-hicontrast .oj-checkboxset .oj-checkbox-label .oj-radiocheckbox-icon {
  background-image: none; }

.oj-hicontrast .oj-checkboxset .oj-checkbox-label.oj-selected .oj-radiocheckbox-icon {
  content: url("images/checkbox_ena_selected.svg"); }

.oj-hicontrast .oj-radioset .oj-radio-label.oj-selected .oj-radiocheckbox-icon {
  content: url("images/radio_ena_selected.svg"); }

.oj-hicontrast .oj-checkboxset .oj-checkbox-label.oj-selected.oj-disabled .oj-radiocheckbox-icon {
  content: url("images/checkbox_dis_selected.svg"); }

.oj-hicontrast .oj-radioset .oj-radio-label.oj-selected.oj-disabled .oj-radiocheckbox-icon {
  content: url("images/radio_dis_selected.svg"); }

@media print {
  .oj-radioset .oj-radio-label .oj-radiocheckbox-icon,
  .oj-checkboxset .oj-checkbox-label .oj-radiocheckbox-icon {
    background-image: none; }
  .oj-radioset .oj-radio-label.oj-selected .oj-radiocheckbox-icon {
    content: url("images/radio_ena_selected.svg"); }
  .oj-checkboxset .oj-checkbox-label.oj-selected .oj-radiocheckbox-icon {
    content: url("images/checkbox_ena_selected.svg"); }
  .oj-radioset .oj-radio-label.oj-selected.oj-disabled .oj-radiocheckbox-icon {
    content: url("images/radio_dis_selected.svg"); }
  .oj-checkboxset .oj-checkbox-label.oj-selected.oj-disabled .oj-radiocheckbox-icon {
    content: url("images/checkbox_dis_selected.svg"); } }

/* 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-radioset .oj-choice-row,
.oj-checkboxset .oj-choice-row {
  background-image: linear-gradient(#e7e7e9, #e7e7e9);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  html:not([dir="rtl"]) .oj-radioset .oj-choice-row, html:not([dir="rtl"])
  .oj-checkboxset .oj-choice-row {
    background-position: 10px 0; }
  html[dir="rtl"] .oj-radioset .oj-choice-row, html[dir="rtl"]
  .oj-checkboxset .oj-choice-row {
    background-position: -10px 0; }

.oj-radioset .oj-choice-row:first-child,
.oj-checkboxset .oj-choice-row:first-child {
  background-size: 0;
  background-image: none; }

.oj-radioset .oj-choice-row:not(:first-child),
.oj-checkboxset .oj-choice-row:not(:first-child) {
  border-top: 1px solid transparent; }

.oj-radioset .oj-choice-row:not(.oj-disabled):active,
.oj-radioset .oj-choice-row:not(.oj-disabled):active + .oj-choice-row,
.oj-checkboxset .oj-choice-row:not(.oj-disabled):active,
.oj-checkboxset .oj-choice-row:not(.oj-disabled):active + .oj-choice-row {
  background-size: 0;
  background-image: none; }

.oj-radio-label .oj-radiocheckbox-icon,
.oj-checkbox-label .oj-radiocheckbox-icon {
  width: 1rem;
  height: 1rem;
  background-size: 100% 100%;
  margin: 0 10px 0 10px; }

html:not([dir="rtl"]) .oj-radio, html:not([dir="rtl"])
.oj-checkbox, html:not([dir="rtl"])
.oj-choice-row .oj-checkbox-nocomp {
  right: 13px; }

html[dir="rtl"] .oj-radio, html[dir="rtl"]
.oj-checkbox, html[dir="rtl"]
.oj-choice-row .oj-checkbox-nocomp {
  left: 13px; }

.oj-radio-label .oj-radiocheckbox-icon,
.oj-checkbox-label .oj-radiocheckbox-icon {
  background-image: none; }

.oj-radio-label.oj-disabled .oj-radiocheckbox-icon,
.oj-checkbox-label.oj-disabled .oj-radiocheckbox-icon {
  background-image: none; }

.oj-radio-label:active.oj-selected:not(.oj-disabled) .oj-radiocheckbox-icon,
.oj-checkbox-label:active.oj-selected:not(.oj-disabled) .oj-radiocheckbox-icon {
  background-image: url("images/radio_ena_selected.svg"); }

.oj-radio-label:active:not(.oj-selected):not(.oj-disabled) .oj-radiocheckbox-icon,
.oj-checkbox-label:active:not(.oj-selected):not(.oj-disabled) .oj-radiocheckbox-icon {
  background-image: none; }

/* combobox */
/* --------------------------------------------------------------- */
.oj-combobox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  min-width: 8em;
  width: 100%;
  font-size: 1rem; }

/* single-select */
/* 
     * Applied to the single-select box which includes the input field and the dropdown open icon
     */
.oj-combobox-choice {
  text-align: right;
  color: #000;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 1.938rem;
  line-height: 1.938rem;
  display: block;
  outline: 0;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  background-clip: padding-box; }
  html[dir="rtl"] .oj-combobox-choice {
    text-align: left; }
  html.oj-slow-borderradius .oj-combobox-choice {
    border-radius: 0; }
  .oj-combobox-choice::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-combobox-choice::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-combobox-choice:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }
  html:not([dir="rtl"]) .oj-combobox-choice {
    padding-left: 0;
    padding-right: 26px; }
  html[dir="rtl"] .oj-combobox-choice {
    padding-right: 0;
    padding-left: 26px; }

/* 
     * Applied to the input field
     */
.oj-combobox-input {
  width: 100%;
  border: 0;
  padding: 0;
  box-shadow: none;
  outline: 0;
  background-color: transparent;
  color: #000;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1rem; }
  .oj-combobox-input::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-combobox-input::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-combobox-input:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

/* 
     * Applied to the single-select drop down arrow
     */
.oj-combobox-arrow {
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 0; }
  html:not([dir="rtl"]) .oj-combobox-arrow {
    right: 0; }
  html[dir="rtl"] .oj-combobox-arrow {
    left: 0; }

/* multi-select */
/* 
     * Applied to the multi-select box which includes the input field and the selected choices
     */
.oj-combobox-choices {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: right;
  color: #000;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  height: auto;
  min-height: 1.938rem;
  margin: 0;
  position: relative;
  cursor: text;
  overflow: hidden;
  padding-bottom: 5px; }
  html[dir="rtl"] .oj-combobox-choices {
    text-align: left; }
  html.oj-slow-borderradius .oj-combobox-choices {
    border-radius: 0; }
  .oj-combobox-choices::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-combobox-choices::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-combobox-choices:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }
  html:not([dir="rtl"]) .oj-combobox-choices {
    padding-left: 0; }
  html[dir="rtl"] .oj-combobox-choices {
    padding-right: 0; }

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

/* 
     * Applied to the multi-select selected choice
     */
.oj-combobox-selected-choice {
  position: relative;
  line-height: 1.8rem;
  cursor: default;
  border-radius: 2px;
  border: 1px solid #0572ce;
  color: #0572ce;
  background-clip: padding-box; }
  html.oj-slow-borderradius .oj-combobox-selected-choice {
    border-radius: 0; }
  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 #ffffff;
  outline: -webkit-focus-ring-color auto; }

/* 
     * Applied to the label of the selected choice
     */
.oj-combobox-selected-choice-label {
  display: inline-block;
  vertical-align: middle; }

/*
     * 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 {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-style: solid;
  border-color: #dd6666; }

/* 
     * Warning styling for the widget 
     */
.oj-combobox.oj-warning .oj-combobox-choice,
.oj-combobox-multi.oj-warning .oj-combobox-choices {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-style: solid;
  border-color: #ffd699; }

/* 
     * Disabled styles for single-select 
     */
.oj-combobox.oj-disabled .oj-combobox-choice,
.oj-combobox.oj-disabled input {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-combobox.oj-disabled input {
  border: 0; }

.oj-combobox.oj-disabled .oj-combobox-arrow {
  cursor: default; }

/* 
     * 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: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5;
  outline: 0; }

.oj-combobox-multi.oj-disabled input {
  border: 0; }

.oj-combobox-multi.oj-disabled .oj-combobox-clear-entry {
  display: none;
  background: 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;
  margin-top: -1px; }

/* clear entry icon for combobox */
/* 
     * Applied to the multi-select search field which is an li to wrap the input
     */
.oj-combobox-search-field {
  line-height: 1.938rem; }

/* icon */
/* -----------------------------*/
/* 
     * Applied to the single-select drop down open icon
     */
.oj-combobox-open-icon {
  margin-top: 2px; }

/* select */
/* --------------------------------------------------------------- */
.oj-select {
  position: relative;
  display: inline-block;
  max-width: 100%;
  min-width: 8em;
  width: 100%;
  font-size: 1rem;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/* 
     * Applied to the select box which includes the selected text and the dropdown open icon
     */
.oj-select-choice {
  text-align: right;
  color: #0572ce;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  background-clip: padding-box;
  text-overflow: ellipsis;
  height: 1.938rem;
  line-height: 1.938rem; }
  html[dir="rtl"] .oj-select-choice {
    text-align: left; }
  html.oj-slow-borderradius .oj-select-choice {
    border-radius: 0; }
  .oj-select-choice::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-choice::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-choice:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }
  html:not([dir="rtl"]) .oj-select-choice {
    padding-left: 0;
    padding-right: 0; }
  html[dir="rtl"] .oj-select-choice {
    padding-left: 0;
    padding-right: 0; }

/* multi-select */
/* 
     * Applied to the multi-select box which includes the input field and the selected choices
     */
.oj-select-choices {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: right;
  color: #000;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  height: auto;
  min-height: 1.938rem;
  margin: 0;
  position: relative;
  cursor: text;
  overflow: hidden;
  padding: 0 0 5px; }
  html[dir="rtl"] .oj-select-choices {
    text-align: left; }
  html.oj-slow-borderradius .oj-select-choices {
    border-radius: 0; }
  .oj-select-choices::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-choices::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-choices:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

/* 
     * 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 search field which is an li to wrap the input
     */
.oj-select-search-field {
  margin-top: 5px;
  padding: 0;
  white-space: nowrap;
  line-height: 1.7442rem; }

/* 
     * Applied to the input field. Override default .oj-listbox-input
     */
.oj-select-multi .oj-listbox-input {
  color: #000;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.0625rem;
  padding-top: 0;
  padding-bottom: 0; }
  .oj-select-multi .oj-listbox-input::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-multi .oj-listbox-input::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-multi .oj-listbox-input:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }
  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 {
  position: relative;
  line-height: 1.8rem;
  cursor: default;
  border-radius: 2px;
  border: 1px solid #0572ce;
  color: #0572ce;
  background-clip: padding-box; }
  html.oj-slow-borderradius .oj-select-selected-choice {
    border-radius: 0; }
  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 #ffffff;
  outline: -webkit-focus-ring-color auto; }

/* 
     * Applied to the label of the selected choice
     */
.oj-select-selected-choice-label {
  display: inline-block;
  vertical-align: middle; }

/*
     * 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 styling for the widget */
.oj-select.oj-invalid .oj-select-choice,
.oj-select-native.oj-invalid .oj-select-select {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-style: solid;
  border-color: #dd6666; }

/* Warning styling for the widget */
.oj-select.oj-warning .oj-select-choice,
.oj-select-native.oj-warning .oj-select-select {
  border-width: 0 0 2px 0;
  border-radius: 0;
  border-style: solid;
  border-color: #ffd699; }

/* disabled styles  for single-select */
.oj-select.oj-disabled .oj-select-choice {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

/* 
     * 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: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5;
  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: #646464; }

/* 
     * Applied to the selected text
     */
.oj-select-chosen {
  border: 0;
  outline: 0;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  box-shadow: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  html:not([dir="rtl"]) .oj-select-chosen {
    padding-right: 0; }
  html[dir="rtl"] .oj-select-chosen {
    padding-left: 0; }

/* 
     * Applied to the dropdown open icon
     */
.oj-select-arrow {
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 0;
  line-height: inherit; }
  html:not([dir="rtl"]) .oj-select-arrow {
    right: 0; }
  html[dir="rtl"] .oj-select-arrow {
    left: 0; }

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

/* 
     * Applied to the dropdown open icon
     */
html[dir="rtl"] .oj-select-open-icon {
  padding-right: 5px;
  padding-left: 5px; }

html:not([dir="rtl"]) .oj-select-open-icon {
  padding-left: 5px;
  padding-right: 5px; }

.oj-select-multiple-open-icon {
  font-size: 24px; }
  html[dir="rtl"] .oj-select-multiple-open-icon {
    padding-right: 1px;
    padding-left: 1px; }
  html:not([dir="rtl"]) .oj-select-multiple-open-icon {
    padding-left: 1px;
    padding-right: 1px; }

/* clear entry icon */
/* Override default options*/
.oj-select-option-defaults {
  font-family: '{"renderMode":"native"}'; }

.oj-select-native .oj-select-arrow {
  line-height: 1.938rem;
  pointer-events: none; }

.oj-select-native.oj-disabled .oj-select-arrow {
  opacity: 0.5; }

.oj-select-select {
  text-align: right;
  color: #0572ce;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 1.938rem;
  width: 100%;
  white-space: nowrap;
  background-clip: padding-box;
  padding: 0 0; }
  html[dir="rtl"] .oj-select-select {
    text-align: left; }
  html.oj-slow-borderradius .oj-select-select {
    border-radius: 0; }
  .oj-select-select::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-select::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-select-select:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

select.oj-select-select.oj-select-default:not([multiple]) {
  color: #646464; }

.oj-select-select[disabled] {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-select-jet.oj-enabled .oj-select-choice:active,
.oj-select-native.oj-enabled .oj-select-select:active {
  background-color: #dcdcde; }

.oj-select-arrow {
  display: none; }

html:not([dir="rtl"]) .oj-select-select {
  direction: rtl; }

html[dir="rtl"] .oj-select-select {
  direction: ltr; }

.oj-select-select.oj-select-default[multiple] {
  color: #646464; }

/* 
     * Applied to the multi-select search field which is an li to wrap the input
     */
.oj-select-search-field {
  line-height: 1.938rem; }

/* InputSearch */
/* --------------------------------------------------------------- */
.oj-inputsearch {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  max-width: 100%;
  min-width: 8em;
  width: 100%;
  font-size: 1.0625rem; }

/* 
     * Applied to the InputSearch box which includes the input field and the search icon
     */
.oj-inputsearch-choice {
  text-align: right;
  color: #000;
  background-color: transparent;
  border-style: solid;
  border-color: #0572ce;
  border-width: 0;
  border-radius: 5px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  height: 1.938rem;
  width: 100%;
  outline: 0;
  overflow: hidden;
  white-space: nowrap;
  background-clip: padding-box; }
  html[dir="rtl"] .oj-inputsearch-choice {
    text-align: left; }
  html.oj-slow-borderradius .oj-inputsearch-choice {
    border-radius: 0; }
  .oj-inputsearch-choice::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputsearch-choice::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputsearch-choice:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

.oj-inputsearch-choice {
  background-color: #c7c7c8; }

/* 
     * Applied to the input field
     */
.oj-inputsearch-input {
  box-shadow: none;
  -webkit-flex: 1;
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0 0;
  background-color: transparent;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.0625rem; }
  .oj-inputsearch-input::-webkit-input-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputsearch-input::-moz-placeholder {
    color: #646464;
    opacity: 1; }
  .oj-inputsearch-input:-ms-input-placeholder {
    color: #646464;
    opacity: 1; }

/* 
     * Applied to the search button
     */
.oj-inputsearch-search-button {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  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: 1.0625rem; }
  html:not([dir="rtl"]) .oj-inputsearch-search-icon {
    padding-left: 9px;
    padding-right: 6px; }
  html[dir="rtl"] .oj-inputsearch-search-icon {
    padding-right: 9px;
    padding-left: 6px; }

/*
     * Styling for focus state
     */
/* 
     * Invalid styling for the widget 
     */
.oj-inputsearch.oj-invalid .oj-inputsearch-choice {
  border-width: 2px;
  border-style: solid;
  border-color: #dd6666; }

/* 
     * Warning styling for the widget 
     */
.oj-inputsearch.oj-warning .oj-inputsearch-choice {
  border-width: 2px;
  border-style: solid;
  border-color: #ffd699; }

/* 
     * Disabled styles for single-select 
     */
.oj-inputsearch.oj-disabled .oj-inputsearch-choice,
.oj-inputsearch.oj-disabled input {
  color: #000;
  background-color: transparent;
  border-color: #0572ce;
  opacity: 0.5; }

.oj-inputsearch.oj-disabled .oj-inputsearch-choice,
.oj-inputsearch.oj-disabled input {
  background-color: #c7c7c8; }

.oj-inputsearch.oj-disabled input {
  border: 0; }

.oj-inputsearch.oj-disabled .oj-inputsearch-search-button {
  cursor: default; }

/* switch */
/* --------------------------------------------------------------- */
.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: 2px solid #dd6666; }

.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: 2px solid #ffd699; }

.oj-switch .oj-switch-container {
  position: relative;
  height: 1.938rem;
  width: 3.125994rem; }

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-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: 2px;
  height: calc( 1.8754026rem - 2px - 2px);
  width: calc( 3.1883976rem - 2px - 2px);
  margin-top: -0.9377013rem;
  border-radius: 1.8754026rem; }
  html.oj-slow-borderradius .oj-switch .oj-switch-track {
    border-radius: 0; }

.oj-switch.oj-read-only .oj-switch-track {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 2px;
  height: calc( 1.8754026rem - 2px - 2px);
  width: calc( 3.1883976rem - 2px - 2px);
  margin-top: -0.9377013rem;
  border-radius: 1.8754026rem; }
  html.oj-slow-borderradius .oj-switch.oj-read-only .oj-switch-track {
    border-radius: 0; }

.oj-switch .oj-switch-track,
.oj-switch.oj-default .oj-switch-track {
  background-color: #fdfdfd;
  border-color: #e5e5e5; }

.oj-switch .oj-switch-thumb,
.oj-switch.oj-default .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 1.6254006rem - 1px - 1px);
  width: calc( 1.6254006rem - 1px - 1px);
  margin-top: -0.8127003rem;
  border-radius: 1.6254006rem;
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0 8px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  border-color: #cfcfcf; }
  html.oj-slow-borderradius .oj-switch .oj-switch-thumb, html.oj-slow-borderradius
  .oj-switch.oj-default .oj-switch-thumb {
    border-radius: 0; }
  html.oj-slow-boxshadow .oj-switch .oj-switch-thumb, html.oj-slow-boxshadow
  .oj-switch.oj-default .oj-switch-thumb {
    box-shadow: none; }

.oj-switch.oj-selected .oj-switch-track {
  background-color: #0572ce;
  border-color: #0572ce; }

.oj-switch.oj-selected .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 1.6254006rem - 1px - 1px);
  width: calc( 1.6254006rem - 1px - 1px);
  margin-top: -0.8127003rem;
  border-radius: 1.6254006rem;
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0 8px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  border-color: #0572ce; }
  html.oj-slow-borderradius .oj-switch.oj-selected .oj-switch-thumb {
    border-radius: 0; }
  html.oj-slow-boxshadow .oj-switch.oj-selected .oj-switch-thumb {
    box-shadow: none; }

.oj-switch.oj-hover .oj-switch-track {
  background-color: #fdfdfd;
  border-color: #e5e5e5; }

.oj-switch.oj-hover .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 2.1255984rem - 1px - 1px);
  width: calc( 2.1255984rem - 1px - 1px);
  margin-top: -1.0627992rem;
  border-radius: 2.1255984rem;
  box-shadow: none;
  background-color: #daeaf8;
  border-color: #c1d0df; }
  html.oj-slow-borderradius .oj-switch.oj-hover .oj-switch-thumb {
    border-radius: 0; }

.oj-switch.oj-selected.oj-hover .oj-switch-track {
  background-color: #0572ce;
  border-color: #0572ce; }

.oj-switch.oj-selected.oj-hover .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 2.1255984rem - 1px - 1px);
  width: calc( 2.1255984rem - 1px - 1px);
  margin-top: -1.0627992rem;
  border-radius: 2.1255984rem;
  box-shadow: none;
  background-color: #daeaf8;
  border-color: #c1d0df; }
  html.oj-slow-borderradius .oj-switch.oj-selected.oj-hover .oj-switch-thumb {
    border-radius: 0; }

.oj-switch.oj-active .oj-switch-track,
.oj-switch.oj-hover.oj-active .oj-switch-thumb .oj-switch-track {
  background-color: #fdfdfd;
  border-color: #e5e5e5; }

.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.1255984rem - 1px - 1px);
  width: calc( 2.1255984rem - 1px - 1px);
  margin-top: -1.0627992rem;
  border-radius: 2.1255984rem;
  box-shadow: none;
  background-color: #daeaf8;
  border-color: #c1d0df; }
  html.oj-slow-borderradius .oj-switch.oj-active .oj-switch-thumb, html.oj-slow-borderradius
  .oj-switch.oj-hover.oj-active .oj-switch-thumb .oj-switch-thumb {
    border-radius: 0; }

.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: #0572ce;
  border-color: #0572ce; }

.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( 2.1255984rem - 1px - 1px);
  width: calc( 2.1255984rem - 1px - 1px);
  margin-top: -1.0627992rem;
  border-radius: 2.1255984rem;
  box-shadow: none;
  background-color: #daeaf8;
  border-color: #c1d0df; }
  html.oj-slow-borderradius .oj-switch.oj-selected.oj-active .oj-switch-thumb, html.oj-slow-borderradius
  .oj-switch.oj-selected.oj-hover.oj-active .oj-switch-thumb .oj-switch-thumb {
    border-radius: 0; }

.oj-switch.oj-read-only .oj-switch-track {
  background-color: #fefefe;
  border-color: #000000; }

.oj-switch.oj-read-only .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 1.6254006rem - 1px - 1px);
  width: calc( 1.6254006rem - 1px - 1px);
  margin-top: -0.8127003rem;
  border-radius: 1.6254006rem;
  box-shadow: none;
  background-color: #ffffff;
  border-color: #000000; }
  html.oj-slow-borderradius .oj-switch.oj-read-only .oj-switch-thumb {
    border-radius: 0; }

.oj-switch.oj-selected.oj-read-only .oj-switch-track {
  background-color: #000000;
  border-color: #000000; }

.oj-switch.oj-selected.oj-read-only .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 1.6254006rem - 1px - 1px);
  width: calc( 1.6254006rem - 1px - 1px);
  margin-top: -0.8127003rem;
  border-radius: 1.6254006rem;
  box-shadow: none;
  background-color: #ffffff;
  border-color: #ffffff; }
  html.oj-slow-borderradius .oj-switch.oj-selected.oj-read-only .oj-switch-thumb {
    border-radius: 0; }

.oj-switch.oj-disabled .oj-switch-track {
  background-color: #fdfdfd;
  border-color: #e5e5e5; }

.oj-switch.oj-disabled .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 1.6254006rem - 1px - 1px);
  width: calc( 1.6254006rem - 1px - 1px);
  margin-top: -0.8127003rem;
  border-radius: 1.6254006rem;
  box-shadow: none;
  background-color: #ffffff;
  border-color: #cfcfcf; }
  html.oj-slow-borderradius .oj-switch.oj-disabled .oj-switch-thumb {
    border-radius: 0; }

.oj-switch.oj-disabled.oj-selected .oj-switch-track {
  background-color: #0572ce;
  border-color: #0572ce; }

.oj-switch.oj-disabled.oj-selected .oj-switch-thumb {
  position: absolute;
  top: 50%;
  border-style: solid;
  border-width: 1px;
  height: calc( 1.6254006rem - 1px - 1px);
  width: calc( 1.6254006rem - 1px - 1px);
  margin-top: -0.8127003rem;
  border-radius: 1.6254006rem;
  box-shadow: none;
  background-color: #ffffff;
  border-color: #ffffff; }
  html.oj-slow-borderradius .oj-switch.oj-disabled.oj-selected .oj-switch-thumb {
    border-radius: 0; }

/* switch specific */
/* --------------------------------------------------------------- */
.oj-switch .oj-switch-thumb {
  margin-left: -1px;
  margin-right: -1px; }

.oj-switch.oj-disabled .oj-switch-track,
.oj-switch.oj-disabled.oj-selected .oj-switch-track {
  opacity: 0.5; }

.oj-switch.oj-read-only .oj-switch-thumb,
.oj-switch.oj-selected.oj-read-only .oj-switch-thumb {
  color: transparent; }

.oj-slider {
  display: inline-block;
  position: relative;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* This ensures that the slider bounding box will include
   the thumb radius - important for form controls. */
  padding-left: 17px;
  padding-right: 17px;
  -webkit-touch-callout: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-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%;
  min-width: 8em;
  width: 100%; }

.oj-slider.oj-slider-vertical {
  padding-left: 17px;
  padding-right: 17px; }

.oj-slider-vertical > .oj-slider-container {
  margin-top: 13px;
  margin-bottom: 13px; }

.oj-invalid .oj-slider-thumb {
  border: 2px solid #dd6666; }

.oj-warning .oj-slider-thumb {
  border: 2px solid #ffd699; }

.oj-slider-horizontal.oj-form-control .oj-slider-container {
  height: 1.938rem; }

.oj-slider-vertical.oj-form-control .oj-slider-container {
  height: 100%;
  min-height: 52px; }

.oj-slider-container {
  position: relative; }

.oj-slider-thumb {
  position: absolute;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: default;
  touch-action: none;
  background-color: #ffffff;
  border-radius: 50%;
  border: 1px solid #cfcfcf;
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0 8px rgba(0, 0, 0, 0.05); }
  html.oj-slow-borderradius .oj-slider-thumb {
    border-radius: 0; }
  html.oj-slow-boxshadow .oj-slider-thumb {
    box-shadow: none; }

.oj-disabled .oj-slider-thumb {
  background-color: #ffffff;
  border-color: #cfcfcf; }

.oj-slider-range {
  position: absolute;
  border: 0;
  background-position: 0 0; }

.oj-slider-bar {
  border-radius: 2px;
  background-color: #b5b5b7;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute; }
  html.oj-slow-borderradius .oj-slider-bar {
    border-radius: 0; }

.oj-slider-vertical .oj-slider-bar, .oj-slider-vertical .oj-slider-bar-value {
  width: 2px; }

.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: 2px;
  top: 50%;
  margin-top: -1px; }

.oj-slider-vertical .oj-slider-bar, .oj-slider-vertical .oj-slider-bar-value {
  width: 2px;
  left: 50%;
  margin-left: -1px; }

.oj-slider-bar:after {
  content: '';
  position: absolute;
  top: -17px;
  bottom: -17px;
  left: -17px;
  right: -17px; }

.oj-slider-bar-value {
  border-radius: 2px;
  background: #0572ce; }
  html.oj-slow-borderradius .oj-slider-bar-value {
    border-radius: 0; }

.oj-slider-bar-value.oj-active {
  background: #0572ce; }

.oj-disabled .oj-slider-bar {
  opacity: 0.5;
  background: #dadada; }

.oj-disabled .oj-slider-bar-value {
  opacity: 0.5;
  background: #858585; }

.oj-slider-horizontal .oj-slider-thumb {
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  margin-left: -13px; }

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: 26px;
  height: 26px;
  margin-bottom: -13px;
  margin-top: -13px; }
  html:not([dir="rtl"]) .oj-slider-vertical .oj-slider-thumb {
    margin-left: -13px;
    left: 50%; }
  html[dir="rtl"] .oj-slider-vertical .oj-slider-thumb {
    margin-right: -13px;
    right: 50%; }

.oj-slider-vertical .oj-slider-range-min {
  bottom: 0; }

.oj-slider-vertical .oj-slider-range-max {
  top: 0; }

.oj-slider-thumb.oj-hover {
  background-color: #daeaf8; }

.oj-slider-thumb.oj-active {
  background-color: #daeaf8;
  border-color: #c1d0df; }

.oj-slider-thumb.oj-active {
  background-color: #daeaf8; }

.oj-slider-horizontal .oj-slider-thumb.oj-active {
  margin-left: -17px; }

html:not([dir="rtl"]) .oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-left: -17px; }

html[dir="rtl"] .oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-right: -17px; }

.oj-slider-thumb.oj-active {
  width: 34px; }

.oj-slider-horizontal .oj-slider-thumb:after {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 3px; }

.oj-slider-vertical .oj-slider-thumb:after {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 3px; }

.oj-slider-horizontal .oj-slider-thumb.oj-active {
  margin-top: -17px; }

.oj-slider-vertical .oj-slider-thumb.oj-active {
  margin-bottom: -17px;
  margin-top: -17px; }

.oj-slider-thumb.oj-active {
  height: 34px; }

.oj-slider-thumb.oj-active {
  background-color: #daeaf8;
  border-color: #c1d0df; }

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

/* Grid HTML Classes */
.oj-flex {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

.oj-flex-item {
  -webkit-flex: auto;
  flex: auto;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.deprecated-col-default-width {
  -webkit-flex: 0 1 100%;
  flex: 0 1 100%;
  max-width: 100%;
  width: 100%; }

.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 {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex; }

.oj-flex-bar {
  position: relative; }

.oj-flex-bar-middle {
  -webkit-flex: auto;
  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 {
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-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: -10px;
  margin-right: -10px; }

@media print, screen {
  .oj-sm-flex-items-1 > .oj-flex-item,
  .oj-sm-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-sm-flex-items-initial > .oj-flex-item,
  .oj-sm-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-sm-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-sm-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-sm-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-sm-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-sm-align-items-center {
    -webkit-align-items: center;
    align-items: center; }
  .oj-sm-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-sm-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-sm-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-sm-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-sm-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-sm-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-sm-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-sm-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media print, screen and (min-width: 768px) {
  .oj-md-flex-items-1 > .oj-flex-item,
  .oj-md-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-md-flex-items-initial > .oj-flex-item,
  .oj-md-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-md-order-0 {
    -webkit-order: 0;
    order: 0; }
  .oj-md-order-1 {
    -webkit-order: 1;
    order: 1; }
  .oj-md-order-2 {
    -webkit-order: 2;
    order: 2; }
  .oj-md-order-3 {
    -webkit-order: 3;
    order: 3; }
  .oj-md-order-4 {
    -webkit-order: 4;
    order: 4; }
  .oj-md-order-5 {
    -webkit-order: 5;
    order: 5; }
  .oj-md-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-md-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-md-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-md-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-md-align-items-center {
    -webkit-align-items: center;
    align-items: center; }
  .oj-md-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-md-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-md-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-md-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-md-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-md-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-md-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-md-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media print and (orientation: landscape), screen and (min-width: 1024px) {
  .oj-lg-flex-items-1 > .oj-flex-item,
  .oj-lg-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-lg-flex-items-initial > .oj-flex-item,
  .oj-lg-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-lg-order-0 {
    -webkit-order: 0;
    order: 0; }
  .oj-lg-order-1 {
    -webkit-order: 1;
    order: 1; }
  .oj-lg-order-2 {
    -webkit-order: 2;
    order: 2; }
  .oj-lg-order-3 {
    -webkit-order: 3;
    order: 3; }
  .oj-lg-order-4 {
    -webkit-order: 4;
    order: 4; }
  .oj-lg-order-5 {
    -webkit-order: 5;
    order: 5; }
  .oj-lg-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-lg-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-lg-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-lg-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-lg-align-items-center {
    -webkit-align-items: center;
    align-items: center; }
  .oj-lg-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-lg-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-lg-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-lg-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-lg-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-lg-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-lg-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-lg-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media screen and (min-width: 1281px) {
  .oj-xl-flex-items-1 > .oj-flex-item,
  .oj-xl-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-xl-flex-items-initial > .oj-flex-item,
  .oj-xl-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-xl-order-0 {
    -webkit-order: 0;
    order: 0; }
  .oj-xl-order-1 {
    -webkit-order: 1;
    order: 1; }
  .oj-xl-order-2 {
    -webkit-order: 2;
    order: 2; }
  .oj-xl-order-3 {
    -webkit-order: 3;
    order: 3; }
  .oj-xl-order-4 {
    -webkit-order: 4;
    order: 4; }
  .oj-xl-order-5 {
    -webkit-order: 5;
    order: 5; }
  .oj-xl-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-xl-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-xl-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-xl-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-xl-align-items-center {
    -webkit-align-items: center;
    align-items: center; }
  .oj-xl-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-xl-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-xl-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-xl-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-xl-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-xl-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-xl-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-xl-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media screen and (max-width: 767px) {
  .oj-sm-only-flex-items-1 > .oj-flex-item,
  .oj-sm-only-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-sm-only-flex-items-initial > .oj-flex-item,
  .oj-sm-only-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-sm-only-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-sm-only-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-sm-only-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-sm-only-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-sm-only-align-items-center {
    -webkit-align-items: center;
    align-items: center; }
  .oj-sm-only-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-sm-only-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-sm-only-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-sm-only-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-sm-only-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-sm-only-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-sm-only-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-sm-only-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media print and (orientation: portrait), screen and (min-width: 768px) and (max-width: 1023px) {
  .oj-md-only-flex-items-1 > .oj-flex-item,
  .oj-md-only-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-md-only-flex-items-initial > .oj-flex-item,
  .oj-md-only-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-md-only-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-md-only-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-md-only-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-md-only-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-md-only-align-items-center {
    -webkit-align-items: center;
    align-items: center; }
  .oj-md-only-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-md-only-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-md-only-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-md-only-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-md-only-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-md-only-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-md-only-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-md-only-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1280px) {
  .oj-lg-only-flex-items-1 > .oj-flex-item,
  .oj-lg-only-flex-1 {
    -webkit-flex: 1;
    flex: 1; }
  .oj-lg-only-flex-items-initial > .oj-flex-item,
  .oj-lg-only-flex-initial {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto; }
  .oj-lg-only-justify-content-flex-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end; }
  .oj-lg-only-justify-content-center {
    -webkit-justify-content: center;
    justify-content: center; }
  .oj-lg-only-justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .oj-lg-only-justify-content-space-around {
    -webkit-justify-content: space-around;
    justify-content: space-around; }
  .oj-lg-only-align-items-center {
    -webkit-align-items: center;
    align-items: center; }
  .oj-lg-only-align-items-baseline {
    -webkit-align-items: baseline;
    align-items: baseline; }
  .oj-lg-only-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .oj-lg-only-align-items-flex-end {
    -webkit-align-items: flex-end;
    align-items: flex-end; }
  .oj-lg-only-align-self-center {
    -webkit-align-self: center;
    align-self: center; }
  .oj-lg-only-align-self-flex-start {
    -webkit-align-self: flex-start;
    align-self: flex-start; }
  .oj-lg-only-align-self-flex-end {
    -webkit-align-self: flex-end;
    align-self: flex-end; }
  .oj-lg-only-flex-direction-column {
    -webkit-flex-direction: column;
    flex-direction: column; }
  .oj-lg-only-flex-wrap-nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

@media print, screen {
  .oj-sm-1 {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-sm-2 {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-sm-3 {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-sm-4 {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-sm-5 {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-sm-6 {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-sm-7 {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-sm-8 {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-sm-9 {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-sm-10 {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-sm-11 {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-sm-12 {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-sm-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 8.3333333333%;
    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) {
    -webkit-flex: 0 1 91.6666666667%;
    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) {
    -webkit-flex: 0 1 16.6666666667%;
    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) {
    -webkit-flex: 0 1 83.3333333333%;
    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) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-sm-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-sm-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 33.3333333333%;
    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) {
    -webkit-flex: 0 1 66.6666666667%;
    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) {
    -webkit-flex: 0 1 41.6666666667%;
    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) {
    -webkit-flex: 0 1 58.3333333333%;
    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) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-sm-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-sm-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 58.3333333333%;
    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) {
    -webkit-flex: 0 1 41.6666666667%;
    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) {
    -webkit-flex: 0 1 66.6666666667%;
    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) {
    -webkit-flex: 0 1 33.3333333333%;
    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) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-sm-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-sm-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 83.3333333333%;
    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) {
    -webkit-flex: 0 1 16.6666666667%;
    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) {
    -webkit-flex: 0 1 91.6666666667%;
    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) {
    -webkit-flex: 0 1 8.3333333333%;
    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) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-sm-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-sm-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 8.3333333333%;
    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) {
    -webkit-flex: 0 1 16.6666666667%;
    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) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-sm-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 33.3333333333%;
    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) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; } }

@media print, screen and (min-width: 768px) {
  .oj-md-1 {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-md-2 {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-md-3 {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-md-4 {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-md-5 {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-md-6 {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-md-7 {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-md-8 {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-md-9 {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-md-10 {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-md-11 {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-md-12 {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-md-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 8.3333333333%;
    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) {
    -webkit-flex: 0 1 91.6666666667%;
    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) {
    -webkit-flex: 0 1 16.6666666667%;
    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) {
    -webkit-flex: 0 1 83.3333333333%;
    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) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-md-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-md-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 33.3333333333%;
    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) {
    -webkit-flex: 0 1 66.6666666667%;
    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) {
    -webkit-flex: 0 1 41.6666666667%;
    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) {
    -webkit-flex: 0 1 58.3333333333%;
    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) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-md-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-md-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 58.3333333333%;
    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) {
    -webkit-flex: 0 1 41.6666666667%;
    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) {
    -webkit-flex: 0 1 66.6666666667%;
    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) {
    -webkit-flex: 0 1 33.3333333333%;
    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) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-md-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-md-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 83.3333333333%;
    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) {
    -webkit-flex: 0 1 16.6666666667%;
    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) {
    -webkit-flex: 0 1 91.6666666667%;
    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) {
    -webkit-flex: 0 1 8.3333333333%;
    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) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-md-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-md-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 8.3333333333%;
    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) {
    -webkit-flex: 0 1 16.6666666667%;
    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) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-md-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 33.3333333333%;
    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) {
    -webkit-flex: 0 1 41.6666666667%;
    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 {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-lg-2 {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-lg-3 {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-lg-4 {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-lg-5 {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-lg-6 {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-lg-7 {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-lg-8 {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-lg-9 {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-lg-10 {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-lg-11 {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-lg-12 {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-lg-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 8.3333333333%;
    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) {
    -webkit-flex: 0 1 91.6666666667%;
    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) {
    -webkit-flex: 0 1 16.6666666667%;
    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) {
    -webkit-flex: 0 1 83.3333333333%;
    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) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-lg-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-lg-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 33.3333333333%;
    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) {
    -webkit-flex: 0 1 66.6666666667%;
    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) {
    -webkit-flex: 0 1 41.6666666667%;
    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) {
    -webkit-flex: 0 1 58.3333333333%;
    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) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-lg-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-lg-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 58.3333333333%;
    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) {
    -webkit-flex: 0 1 41.6666666667%;
    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) {
    -webkit-flex: 0 1 66.6666666667%;
    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) {
    -webkit-flex: 0 1 33.3333333333%;
    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) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-lg-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-lg-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 83.3333333333%;
    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) {
    -webkit-flex: 0 1 16.6666666667%;
    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) {
    -webkit-flex: 0 1 91.6666666667%;
    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) {
    -webkit-flex: 0 1 8.3333333333%;
    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) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-lg-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-lg-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 8.3333333333%;
    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) {
    -webkit-flex: 0 1 16.6666666667%;
    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) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-lg-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 33.3333333333%;
    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) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; } }

@media screen and (min-width: 1281px) {
  .oj-xl-1 {
    -webkit-flex: 0 1 8.3333333333%;
    flex: 0 1 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%; }
  .oj-xl-2 {
    -webkit-flex: 0 1 16.6666666667%;
    flex: 0 1 16.6666666667%;
    max-width: 16.6666666667%;
    width: 16.6666666667%; }
  .oj-xl-3 {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-xl-4 {
    -webkit-flex: 0 1 33.3333333333%;
    flex: 0 1 33.3333333333%;
    max-width: 33.3333333333%;
    width: 33.3333333333%; }
  .oj-xl-5 {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; }
  .oj-xl-6 {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-xl-7 {
    -webkit-flex: 0 1 58.3333333333%;
    flex: 0 1 58.3333333333%;
    max-width: 58.3333333333%;
    width: 58.3333333333%; }
  .oj-xl-8 {
    -webkit-flex: 0 1 66.6666666667%;
    flex: 0 1 66.6666666667%;
    max-width: 66.6666666667%;
    width: 66.6666666667%; }
  .oj-xl-9 {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-xl-10 {
    -webkit-flex: 0 1 83.3333333333%;
    flex: 0 1 83.3333333333%;
    max-width: 83.3333333333%;
    width: 83.3333333333%; }
  .oj-xl-11 {
    -webkit-flex: 0 1 91.6666666667%;
    flex: 0 1 91.6666666667%;
    max-width: 91.6666666667%;
    width: 91.6666666667%; }
  .oj-xl-12 {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-xl-odd-cols-1 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 8.3333333333%;
    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) {
    -webkit-flex: 0 1 91.6666666667%;
    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) {
    -webkit-flex: 0 1 16.6666666667%;
    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) {
    -webkit-flex: 0 1 83.3333333333%;
    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) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-xl-odd-cols-3 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-xl-odd-cols-4 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 33.3333333333%;
    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) {
    -webkit-flex: 0 1 66.6666666667%;
    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) {
    -webkit-flex: 0 1 41.6666666667%;
    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) {
    -webkit-flex: 0 1 58.3333333333%;
    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) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-xl-odd-cols-6 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
    width: 50%; }
  .oj-xl-odd-cols-7 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 58.3333333333%;
    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) {
    -webkit-flex: 0 1 41.6666666667%;
    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) {
    -webkit-flex: 0 1 66.6666666667%;
    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) {
    -webkit-flex: 0 1 33.3333333333%;
    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) {
    -webkit-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
    width: 75%; }
  .oj-xl-odd-cols-9 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-xl-odd-cols-10 > .oj-flex > .oj-flex-item:nth-child(odd) {
    -webkit-flex: 0 1 83.3333333333%;
    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) {
    -webkit-flex: 0 1 16.6666666667%;
    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) {
    -webkit-flex: 0 1 91.6666666667%;
    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) {
    -webkit-flex: 0 1 8.3333333333%;
    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) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-xl-odd-cols-12 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%; }
  .oj-xl-even-cols-1 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 8.3333333333%;
    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) {
    -webkit-flex: 0 1 16.6666666667%;
    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) {
    -webkit-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
    width: 25%; }
  .oj-xl-even-cols-4 > .oj-flex > .oj-flex-item:nth-child(even) {
    -webkit-flex: 0 1 33.3333333333%;
    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) {
    -webkit-flex: 0 1 41.6666666667%;
    flex: 0 1 41.6666666667%;
    max-width: 41.6666666667%;
    width: 41.6666666667%; } }

@media print, screen {
  .oj-sm-hide {
    display: none; }
  .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; }
  .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; }
  .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; }
  .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 screen and (max-width: 767px) {
  /* small only screen layout helpers */
  .oj-sm-only-hide {
    display: none; }
  .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: 1023px) {
  /* medium only screen layout helpers */
  .oj-md-only-hide {
    display: none; }
  .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: 1280px) {
  /* large only screen layout helpers */
  .oj-lg-only-hide {
    display: none; }
  .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: 767px)/"; }

.oj-mq-md-only {
  font-family: "/print and (orientation: portrait), screen and (min-width: 768px) and (max-width: 1023px)/"; }

.oj-mq-lg-only {
  font-family: "/print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1280px)/"; }

.oj-mq-xl-only {
  font-family: "/null/"; }

.oj-mq-md-down {
  font-family: "/print and (orientation: portrait), screen and (max-width: 1023px)/"; }

.oj-mq-lg-down {
  font-family: "/print and (orientation: landscape), screen and (max-width: 1280px)/"; }

.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)/"; }

.oj-form-cols-labels-inline {
  -webkit-column-width: 22rem;
  -moz-column-width: 22rem;
  column-width: 22rem; }

.oj-form-cols {
  -webkit-column-width: 18.45rem;
  -moz-column-width: 18.45rem;
  column-width: 18.45rem; }

.oj-form-cols-max2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2; }

.oj-form-cols > .oj-flex,
.oj-form-cols-labels-inline > .oj-flex {
  -moz-column-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid; }

.oj-form > hr,
.oj-form > h1,
.oj-form > h2,
.oj-form > h3,
.oj-form > h4 {
  margin: 5px 0 15px 0; }

.oj-form > .oj-form-control,
.oj-form > .oj-form-non-control {
  margin-bottom: 10px; }

.oj-form > .oj-form-control-group {
  margin-bottom: 6px; }

.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:nth-child(even),
.oj-form > .oj-flex > .oj-flex-item:last-child {
  margin: 0 0 6px 0; }

.oj-form > .oj-flex > .oj-flex-item > .oj-form-non-control {
  margin-bottom: 4px; }

.oj-form-layout {
  border-color: #e7e7e9;
  border-style: solid;
  border-width: 1px 0 0; }

.oj-form-layout-inset {
  margin: 12px;
  border-width: 1px; }

.oj-form > .oj-flex {
  border-style: solid;
  border-color: #d5dfe5;
  border-width: 0 0 1px 0;
  padding: 10px 0 0; }

.oj-form > .oj-flex:last-child {
  border-width: 0; }

.oj-form-layout > .oj-form[class*="oj-form-cols-"] > .oj-flex:last-child {
  border-width: 0 0 1px 0; }

.oj-form-no-dividers > .oj-flex,
.oj-form-layout > .oj-form-no-dividers[class*="oj-form-cols-"] > .oj-flex:last-child,
.oj-form-layout > .oj-flex-item > .oj-form-no-dividers > .oj-flex:last-child {
  border-width: 0; }

@media print, screen {
  html:not([dir="rtl"]) .oj-form-layout:not(.oj-sm-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-left: 0.625rem; }
  html[dir="rtl"] .oj-form-layout:not(.oj-sm-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-right: 0.625rem; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-sm-label-nowrap,
  .oj-sm-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-sm-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-sm-label-inline,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
    text-align: right; }
    html[dir="rtl"] .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
      text-align: left; }
  html:not([dir="rtl"]) .oj-sm-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-left: 0.625rem; }
  html[dir="rtl"] .oj-sm-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-right: 0.625rem; }
  html:not([dir="rtl"]) .oj-sm-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-right: 0.625rem; }
  html[dir="rtl"] .oj-sm-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-left: 0.625rem; }
  .oj-sm-label-inline .oj-label-required-icon,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon {
    margin-top: 1px; }
  .oj-sm-label-inline .oj-label-required-icon,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-sm-label-inline .oj-label-help-icon,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-sm-label-inline.oj-label label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) label {
    float: none; }
  html:not([dir="rtl"]) .oj-sm-label-inline .oj-label-required-icon, 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-label-inline .oj-label-help-icon, html:not([dir="rtl"])
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .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-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon, html[dir="rtl"]
  .oj-sm-label-inline .oj-label-help-icon, html[dir="rtl"]
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px; }
  .oj-sm-label-inline .oj-label-help-icon-anchor,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor {
    float: none; }
  .oj-sm-label-inline.oj-label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.2em;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    html:not([dir="rtl"]) .oj-sm-label-inline.oj-label, html:not([dir="rtl"])
    .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html:not([dir="rtl"])
    .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-right: 0.625rem; }
    html[dir="rtl"] .oj-sm-label-inline.oj-label, html[dir="rtl"]
    .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html[dir="rtl"]
    .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-left: 0.625rem; }
  .oj-sm-label-inline.oj-label-inline-top,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-inline-top,
  .oj-sm-label-inline.oj-label-nocomp.oj-label-for-non-control,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0; }
  .oj-sm-label-inline.oj-radioset-label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label,
  .oj-sm-label-inline.oj-checkboxset-label,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label {
    margin-top: -2px;
    margin-bottom: 0; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-sm-label-nowrap .oj-label-group,
  .oj-sm-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-sm-label-inline .oj-label-group,
  .oj-sm-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .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; } }

@media print, screen and (min-width: 768px) {
  html:not([dir="rtl"]) .oj-form-layout:not(.oj-md-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-left: 0.625rem; }
  html[dir="rtl"] .oj-form-layout:not(.oj-md-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-right: 0.625rem; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-md-label-nowrap,
  .oj-md-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-md-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-md-label-inline,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
    text-align: right; }
    html[dir="rtl"] .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
      text-align: left; }
  html:not([dir="rtl"]) .oj-md-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-left: 0.625rem; }
  html[dir="rtl"] .oj-md-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-right: 0.625rem; }
  html:not([dir="rtl"]) .oj-md-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-right: 0.625rem; }
  html[dir="rtl"] .oj-md-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-left: 0.625rem; }
  .oj-md-label-inline .oj-label-required-icon,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon {
    margin-top: 1px; }
  .oj-md-label-inline .oj-label-required-icon,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-md-label-inline .oj-label-help-icon,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-md-label-inline.oj-label label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) label {
    float: none; }
  html:not([dir="rtl"]) .oj-md-label-inline .oj-label-required-icon, 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-label-inline .oj-label-help-icon, html:not([dir="rtl"])
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .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-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon, html[dir="rtl"]
  .oj-md-label-inline .oj-label-help-icon, html[dir="rtl"]
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px; }
  .oj-md-label-inline .oj-label-help-icon-anchor,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor {
    float: none; }
  .oj-md-label-inline.oj-label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.2em;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    html:not([dir="rtl"]) .oj-md-label-inline.oj-label, html:not([dir="rtl"])
    .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html:not([dir="rtl"])
    .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-right: 0.625rem; }
    html[dir="rtl"] .oj-md-label-inline.oj-label, html[dir="rtl"]
    .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html[dir="rtl"]
    .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-left: 0.625rem; }
  .oj-md-label-inline.oj-label-inline-top,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-inline-top,
  .oj-md-label-inline.oj-label-nocomp.oj-label-for-non-control,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0; }
  .oj-md-label-inline.oj-radioset-label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label,
  .oj-md-label-inline.oj-checkboxset-label,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label {
    margin-top: -2px;
    margin-bottom: 0; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-md-label-nowrap .oj-label-group,
  .oj-md-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-md-label-inline .oj-label-group,
  .oj-md-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .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; } }

@media print and (orientation: landscape), screen and (min-width: 1024px) {
  html:not([dir="rtl"]) .oj-form-layout:not(.oj-lg-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-left: 0.625rem; }
  html[dir="rtl"] .oj-form-layout:not(.oj-lg-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-right: 0.625rem; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-lg-label-nowrap,
  .oj-lg-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-lg-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-lg-label-inline,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
    text-align: right; }
    html[dir="rtl"] .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
      text-align: left; }
  html:not([dir="rtl"]) .oj-lg-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-left: 0.625rem; }
  html[dir="rtl"] .oj-lg-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-right: 0.625rem; }
  html:not([dir="rtl"]) .oj-lg-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-right: 0.625rem; }
  html[dir="rtl"] .oj-lg-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-left: 0.625rem; }
  .oj-lg-label-inline .oj-label-required-icon,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon {
    margin-top: 1px; }
  .oj-lg-label-inline .oj-label-required-icon,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-lg-label-inline .oj-label-help-icon,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-lg-label-inline.oj-label label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) label {
    float: none; }
  html:not([dir="rtl"]) .oj-lg-label-inline .oj-label-required-icon, 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-label-inline .oj-label-help-icon, html:not([dir="rtl"])
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .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-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon, html[dir="rtl"]
  .oj-lg-label-inline .oj-label-help-icon, html[dir="rtl"]
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px; }
  .oj-lg-label-inline .oj-label-help-icon-anchor,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor {
    float: none; }
  .oj-lg-label-inline.oj-label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.2em;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    html:not([dir="rtl"]) .oj-lg-label-inline.oj-label, html:not([dir="rtl"])
    .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html:not([dir="rtl"])
    .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-right: 0.625rem; }
    html[dir="rtl"] .oj-lg-label-inline.oj-label, html[dir="rtl"]
    .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html[dir="rtl"]
    .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-left: 0.625rem; }
  .oj-lg-label-inline.oj-label-inline-top,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-inline-top,
  .oj-lg-label-inline.oj-label-nocomp.oj-label-for-non-control,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0; }
  .oj-lg-label-inline.oj-radioset-label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label,
  .oj-lg-label-inline.oj-checkboxset-label,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label {
    margin-top: -2px;
    margin-bottom: 0; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-lg-label-nowrap .oj-label-group,
  .oj-lg-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-lg-label-inline .oj-label-group,
  .oj-lg-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .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; } }

@media screen and (min-width: 1281px) {
  html:not([dir="rtl"]) .oj-form-layout:not(.oj-xl-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-left: 0.625rem; }
  html[dir="rtl"] .oj-form-layout:not(.oj-xl-only-flex-direction-column) > .oj-flex-item:not(:first-child) {
    margin-right: 0.625rem; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-xl-label-nowrap,
  .oj-xl-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-xl-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-xl-label-inline,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label-nocomp {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis; }
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
    text-align: right; }
    html[dir="rtl"] .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(even) {
      text-align: left; }
  html:not([dir="rtl"]) .oj-xl-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-left: 0.625rem; }
  html[dir="rtl"] .oj-xl-form-across > .oj-flex > .oj-flex-item:nth-child(2n+3) {
    padding-right: 0.625rem; }
  html:not([dir="rtl"]) .oj-xl-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-right: 0.625rem; }
  html[dir="rtl"] .oj-xl-form-across > .oj-flex > .oj-flex-item:nth-child(even) {
    padding-left: 0.625rem; }
  .oj-xl-label-inline .oj-label-required-icon,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon {
    margin-top: 1px; }
  .oj-xl-label-inline .oj-label-required-icon,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon,
  .oj-xl-label-inline .oj-label-help-icon,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon,
  .oj-xl-label-inline.oj-label label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) label {
    float: none; }
  html:not([dir="rtl"]) .oj-xl-label-inline .oj-label-required-icon, 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-label-inline .oj-label-help-icon, html:not([dir="rtl"])
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .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-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-required-icon, html[dir="rtl"]
  .oj-xl-label-inline .oj-label-help-icon, html[dir="rtl"]
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon {
    margin-right: 0;
    margin-left: 6px; }
  .oj-xl-label-inline .oj-label-help-icon-anchor,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) .oj-label-help-icon-anchor {
    float: none; }
  .oj-xl-label-inline.oj-label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.2em;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    html:not([dir="rtl"]) .oj-xl-label-inline.oj-label, html:not([dir="rtl"])
    .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html:not([dir="rtl"])
    .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-right: 0.625rem; }
    html[dir="rtl"] .oj-xl-label-inline.oj-label, html[dir="rtl"]
    .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label, html[dir="rtl"]
    .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp {
      padding-left: 0.625rem; }
  .oj-xl-label-inline.oj-label-inline-top,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-inline-top,
  .oj-xl-label-inline.oj-label-nocomp.oj-label-for-non-control,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-label-nocomp.oj-label-for-non-control {
    margin-top: 0; }
  .oj-xl-label-inline.oj-radioset-label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label,
  .oj-xl-label-inline.oj-checkboxset-label,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item > .oj-checkboxset-label {
    margin-top: -2px;
    margin-bottom: 0; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-xl-label-nowrap .oj-label-group,
  .oj-xl-labels-nowrap > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-label .oj-label-group {
    width: inherit;
    overflow: inherit;
    text-overflow: inherit; }
  .oj-form > .oj-flex > .oj-flex-item:nth-child(odd) > .oj-xl-label-inline .oj-label-group,
  .oj-xl-labels-inline > .oj-flex > .oj-flex-item:nth-child(odd) > .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; } }

@media screen and (max-width: 767px) {
  .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 1px 0; } }

@media print and (orientation: portrait), screen and (min-width: 768px) and (max-width: 1023px) {
  .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 1px 0; } }

@media print and (orientation: landscape), screen and (min-width: 1024px) and (max-width: 1280px) {
  .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 1px 0; } }

html:not([dir="rtl"]) .oj-form {
  padding-left: 0.625rem; }

html[dir="rtl"] .oj-form {
  padding-right: 0.625rem; }

html:not([dir="rtl"]) .oj-form > .oj-flex {
  padding-right: 0.625rem; }

html[dir="rtl"] .oj-form > .oj-flex {
  padding-left: 0.625rem; }

.oj-hybrid-applayout-offcanvas-wrapper, .oj-web-applayout-offcanvas-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.oj-hybrid-applayout-offcanvas, .oj-web-applayout-offcanvas {
  z-index: 2; }

.oj-hybrid-applayout-scrollable-wrapper, .oj-web-applayout-scrollable-wrapper {
  position: relative;
  height: 100%; }

.oj-hybrid-applayout-scrollable, .oj-web-applayout-scrollable {
  overflow: auto;
  /* To enable momentum scrolling on android devices */
  z-index: 0;
  /* To enable momentum scrolling on ios devices */
  -webkit-overflow-scrolling: touch; }

.oj-hybrid-applayout-page, .oj-web-applayout-page {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

/* Class used to suppress copy/paste and context menus for hybrid mobile apps */
.oj-hybrid {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; }

.oj-hybrid input,
.oj-hybrid textarea {
  -ms-user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text; }

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

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

.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 {
  min-width: 320px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #313334;
  color: #ffffff; }

.oj-hybrid-applayout-offcanvas .oj-hybrid-applayout-header, .oj-hybrid-applayout-offcanvas .oj-hybrid-applayout-header-no-border,
.oj-hybrid-applayout-offcanvas .oj-hybrid-applayout-footer {
  background-color: #313334; }

.oj-hybrid-applayout-offcanvas .oj-hybrid-applayout-header, .oj-hybrid-applayout-offcanvas .oj-hybrid-applayout-header-no-border,
.oj-hybrid-applayout-offcanvas .oj-hybrid-applayout-footer {
  border-style: none; }

.oj-hybrid-applayout-page {
  position: fixed; }

.oj-hybrid-applayout-header, .oj-hybrid-applayout-header-no-border,
.oj-hybrid-applayout-footer,
.oj-hybrid-applayout-navbar-fixed-top,
.oj-hybrid-applayout-navbar-fixed-bottom,
.oj-hybrid-applayout-navbar {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.oj-hybrid-applayout-header, .oj-hybrid-applayout-header-no-border {
  box-shadow: none;
  -webkit-order: -2;
  order: -2;
  min-height: 44px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px solid #d5dfe5;
  background-color: #f6f6f7;
  opacity: 0.95;
  padding: 0 0.625rem 0 0.625rem; }

.oj-hybrid-applayout-header-title {
  font-weight: normal;
  font-size: 1.125rem;
  color: #000;
  padding: 0;
  margin: 0; }

/* Use instead of oj-hybrid-applayout-header when a top fixed nav bar is present
       so we can correctly style the header border */
.oj-hybrid-applayout-header-no-border {
  box-shadow: none;
  border-style: none; }

.oj-hybrid-applayout-header .oj-button, .oj-hybrid-applayout-header-no-border .oj-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: -0.625rem; }

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: -0.625rem; }

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: -0.625rem; }

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: -0.625rem; }

.oj-hybrid-applayout-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.oj-hybrid-applayout-footer {
  -webkit-order: 2;
  order: 2;
  min-height: 48px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 1px solid #d5dfe5;
  background-color: #f6f6f7;
  opacity: 0.95; }

.oj-hybrid-applayout-toolbar-stretch .oj-button {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 48px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0; }

.oj-hybrid-applayout-navbar-fixed-top, .oj-hybrid-applayout-navbar-fixed-bottom, .oj-hybrid-applayout-navbar {
  background-color: #f6f6f7; }

.oj-hybrid-applayout-navbar-fixed-top .oj-navigationlist-horizontal .oj-navigationlist-element, .oj-hybrid-applayout-navbar-fixed-bottom .oj-navigationlist-horizontal .oj-navigationlist-element, .oj-hybrid-applayout-navbar .oj-navigationlist-horizontal .oj-navigationlist-element {
  margin: 0; }

.oj-hybrid-applayout-navbar-fixed-top {
  -webkit-order: -1;
  order: -1;
  border-bottom: 1px solid #d5dfe5; }

.oj-hybrid-applayout-navbar-fixed-bottom, .oj-hybrid-applayout-navbar {
  -webkit-order: 1;
  order: 1;
  box-shadow: none;
  border-top: 1px solid #d5dfe5; }

/* Deprecated. Applications should use oj-hybrid-applayout-navbar-fixed-bottom or 
      oj-hybrid-applayout-navbar-fixed-top nav bar instead. */
/* Deprecated. Apply to page when a header and non fixed nav bar are present
       so we can correctly style the header and nav bar borders */
.oj-web-applayout-offcanvas {
  background-color: #313334;
  color: #ffffff; }

.oj-web-applayout-offcanvas-icon {
  font-size: 24px; }

.oj-web-applayout-navbar.oj-navigationlist-horizontal .oj-navigationlist-element {
  margin: 0; }

/* Can also be used within oj-web-applayout-offcanvas element if header
      and footer are needed */
.oj-web-applayout-page {
  position: absolute;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 100vh;
  overflow-y: scroll; }

.oj-web-applayout-max-width {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.oj-web-applayout-header,
.oj-web-applayout-footer,
.oj-web-applayout-navbar,
.oj-web-applayout-header + .oj-progressbar-embedded {
  -webkit-flex: 0 0 auto;
  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 {
  background-color: #f6f6f7;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); }
  html.oj-slow-boxshadow .oj-web-applayout-header {
    box-shadow: none; }

.oj-slow-boxshadow .oj-web-applayout-header {
  border-bottom: 1px solid #d5dfe5; }

.oj-web-applayout-header .oj-button {
  margin-bottom: 0; }

.oj-web-applayout-header > div:first-child {
  min-height: 3.143rem;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.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: -0.625rem; }

html[dir="rtl"] .oj-web-applayout-header .oj-flex-bar-start .oj-button:first-child {
  margin-right: -0.625rem; }

html:not([dir="rtl"]) .oj-web-applayout-header .oj-flex-bar-start .oj-button.oj-button-lg:first-child {
  margin-left: -1.125rem; }

html[dir="rtl"] .oj-web-applayout-header .oj-flex-bar-start .oj-button.oj-button-lg:first-child {
  margin-right: -1.125rem; }

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: -0.625rem; }

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: -0.625rem; }

.oj-web-applayout-header-title {
  font-size: 1.25rem;
  font-weight: normal;
  color: #595959;
  line-height: 0; }

.oj-web-applayout-content {
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  padding: 10px; }

.oj-web-applayout-footer {
  min-height: 3.571rem;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 1px solid #d5dfe5;
  background-color: #f6f6f7;
  padding-top: 10px;
  padding-bottom: 10px; }

.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: 5px;
    margin-left: 0;
    padding-right: 5px;
    border-right: 1px solid #d5dfe5; }
  html[dir="rtl"] .oj-web-applayout-footer li {
    margin-left: 5px;
    margin-right: 0;
    padding-left: 5px;
    border-left: 1px solid #d5dfe5; }

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

/*# sourceMappingURL=oj-alta.css.map */