/******************************************************************************************** * This is the "no tag selectors" version of the theme file. * In the regular version of the JET CSS file we directly style certain tags like *

, etc. However for developers trying to mix JET with other * technologies styling these tags directly could cause issues on other parts of the page. * We therefore set $allowTagSelectors: false; in this version of the file. * * See the "compatibility" section of the theming documentation for more information *********************************************************************************************/ /* helpers ----------------------------------*/ [data-bind*="ojComponent"]:not(.oj-component-initnode) { visibility: hidden; } .oj-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .oj-helper-clearfix:before, .oj-helper-clearfix:after { content: " "; display: table; } .oj-helper-clearfix:after { clear: both; } /* Used by the framework's support for detecting resize */ .oj-helper-detect-expansion, .oj-helper-detect-contraction { position: absolute; overflow: hidden; visibility: hidden; top: 0; left: 0; right: 0; bottom: 0; direction: ltr; } .oj-helper-hidden { display: none !important; } /* 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 */ /* --------------------------------------------------------------- */ .oj-html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.875em; } /* body */ /* --------------------------------------------------------------- */ .oj-body { margin: 0; background-image: url("images/texture.png"); background-repeat: repeat; background-position: top left; color: #333333; background-color: #ffffff; } /* links */ /* --------------------------------------------------------------- */ .oj-link { color: #045fab; line-height: inherit; text-decoration: none; } .oj-link:visited { color: #045fab; } .oj-link:hover, .oj-link:focus { text-decoration: underline; } .oj-link:active { font-weight: bold; border-radius: 1px; } html.oj-slow-borderradius .oj-link:active { border-radius: 0; } .oj-link.oj-disabled { color: #9e9e9e; cursor: default; text-decoration: none; } /* header */ /* --------------------------------------------------------------- */ .oj-header { color: #252525; font-family: inherit; font-style: normal; font-weight: bold; margin: 8px 0; padding: 0 0 2px; } h1.oj-header { font-size: 1.429rem; } h2.oj-header { font-size: 1.286rem; } h3.oj-header { font-size: 1.143rem; } h4.oj-header { font-size: 1rem; } h5.oj-header { font-size: 0.857rem; } .oj-header-border { border: solid #d9dfe3; border-width: 0 0 1px; padding: 0 0 7px; } /* hr */ /* --------------------------------------------------------------- */ .oj-hr { border: solid #d6dfe6; border-width: 1px 0 0; margin: 7px 0; } /* p */ /* --------------------------------------------------------------- */ .oj-p { margin: 0 0 12px 0; } /* lists */ /* --------------------------------------------------------------- */ .oj-ul, .oj-ol { margin: 12px 0; padding-left: 40px; } .oj-ul .oj-ul, .oj-ul .oj-ol, .oj-ol .oj-ul, .oj-ol .oj-ol { margin-bottom: 0; margin-top: 0; padding-left: 30px; } .oj-ul li, .oj-ol li { line-height: 1.25; } .oj-text-xs { font-size: 0.7857rem; } .oj-text-sm { font-size: 0.857rem; } .oj-text-primary-color { color: black; } .oj-text-secondary-color { color: #4d4d4d; } .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: #333333; 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: #d4d6d7; } .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-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-collapsible-close-icon: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, html[dir="rtl"] .oj-fwk-icon-arrow-start:before, html:not([dir="rtl"]) .oj-fwk-icon-arrow-end:before, html:not([dir="rtl"]) .oj-collapsible-close-icon: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-collapsible-close-icon: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 { -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, html[dir="rtl"] .oj-collapsible-open-icon:before, html[dir="rtl"] .oj-listview-expand-icon: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, html:not([dir="rtl"]) .oj-collapsible-open-icon:before, html:not([dir="rtl"]) .oj-listview-expand-icon: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, html[dir="rtl"] .oj-collapsible-open-icon:before, html[dir="rtl"] .oj-listview-expand-icon: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, html[dir="rtl"] .oj-navigationlist-collapsible .oj-navigationlist-collapse-icon:before, .oj-navigationlist-collapsible html[dir="rtl"] .oj-navigationlist-collapse-icon: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, html:not([dir="rtl"]) .oj-navigationlist-collapsible .oj-navigationlist-collapse-icon:before, .oj-navigationlist-collapsible html:not([dir="rtl"]) .oj-navigationlist-collapse-icon:before, .oj-button-menu-dropdown-icon:before, .oj-navigationlist-collapsible .oj-navigationlist-expand-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, html[dir="rtl"] .oj-navigationlist-collapsible .oj-navigationlist-collapse-icon:before, .oj-navigationlist-collapsible html[dir="rtl"] .oj-navigationlist-collapse-icon: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, html:not([dir="rtl"]) .oj-navigationlist-collapsible .oj-navigationlist-collapse-icon:before, .oj-navigationlist-collapsible html:not([dir="rtl"]) .oj-navigationlist-collapse-icon: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-menu-submenu-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-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-menu-submenu-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-menu-submenu-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-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-inputnumber-down-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-listview-drill-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, .oj-inputnumber-up-icon: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-listview-drill-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-inputnumber-down-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-listview-drill-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, .oj-inputnumber-up-icon: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-navigationlist-slider .oj-navigationlist-collapse-icon:before, .oj-navigationlist-slider html[dir="rtl"] .oj-navigationlist-collapse-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-navigationlist-slider .oj-navigationlist-collapse-icon:before, .oj-navigationlist-slider html:not([dir="rtl"]) .oj-navigationlist-collapse-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-navigationlist-slider .oj-navigationlist-collapse-icon:before, .oj-navigationlist-slider html[dir="rtl"] .oj-navigationlist-collapse-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 #d6dfe6; background-color: #ffffff; border-radius: 1px; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; padding: 0.8571rem; position: relative; } html.oj-slow-borderradius .oj-panel { border-radius: 0; } .oj-panel-alt1 { background-color: #eff2f5; border-color: #d6dfe6; } .oj-panel-alt2 { background-color: #e8f2fb; border-color: #d1e6f9; } .oj-panel-alt3 { background-color: #fef9e8; border-color: #fef3ce; } .oj-panel-alt4 { background-color: #ffe4e1; border-color: #ffcdc8; } .oj-panel-alt5 { background-color: #fce8fe; border-color: #facefe; } .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.8571rem; margin-left: -0.8571rem; margin-right: -0.8571rem; } .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.286rem; } 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: #252525; padding: 5px 0 3px 0; margin: 0; } /* * this is the default style for collapsible content */ .oj-collapsible-content { color: #333333; 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.429rem; } h2.oj-collapsible-header { font-size: 1.286rem; } h3.oj-collapsible-header { font-size: 1.143rem; } 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: #d4d6d7; } .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-left: -7px; } html[dir="rtl"] .oj-collapsible-header a, html[dir="rtl"] .oj-collapsible-header .oj-collapsible-header-icon { margin-right: -7px; } /* 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 #d9dfe3; border-width: 1px; font-size: 1.143rem; background-color: #f0f0f0; } /* * 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.8571rem; } /* * border manipulation when top and bottom border present */ /* * remove double border between adjacent headers */ .oj-accordion-collapsible > .oj-collapsible-header { border-bottom-width: 0; } /* * add border-bottom back for last child */ .oj-accordion-collapsible:last-child > .oj-collapsible-header { border-bottom-width: 1px; } /* * add border-top to content to take place of removed header border bottom when expanded */ .oj-accordion-collapsible > .oj-collapsible-wrapper > .oj-collapsible-content { border: 0 solid #d9dfe3; border-top-width: 1px; } /* * last-child border bottom already defined; remove content border top to avoid double border */ .oj-accordion-collapsible:last-child > .oj-collapsible-wrapper > .oj-collapsible-content { border-top-width: 0; } /* conveyorbelt */ /* --------------------------------------------------------------- */ .oj-conveyorbelt { position: relative; } /* overflow indicators */ .oj-conveyorbelt-overflow-indicator { -moz-box-sizing: border-box; box-sizing: border-box; width: 2.286rem; height: 2.286rem; line-height: 2.286rem; 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: #f7f8f9; border-color: #c4ced7; } .oj-conveyorbelt-overflow-indicator.oj-active, .oj-conveyorbelt-overflow-indicator.oj-active.oj-hover { background-color: #0572ce; border-color: #0572ce; } /* 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: #878c90; } .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: #ffffff; } /* 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: 2.286rem; height: 2.286rem; line-height: 2.286rem; text-align: center; cursor: default; border-radius: 50%; border: 1px solid; display: inline-block; opacity: 0.8; 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: #f7f8f9; border-color: #c4ced7; } .oj-filmstrip-arrow.oj-active, .oj-filmstrip-arrow.oj-active.oj-hover { background-color: #0572ce; border-color: #0572ce; } /* 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: #878c90; } .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: #ffffff; } .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: 0.8; } .oj-filmstrip:not(.oj-filmstrip-hover) .oj-filmstrip-arrow-transition { opacity: 0; } .oj-filmstrip-arrow.oj-active, .oj-filmstrip-arrow.oj-active.oj-hover { background-color: #f7f8f9; border-color: #c4ced7; opacity: 0.8; } .oj-filmstrip-arrow.oj-active .oj-filmstrip-arrow-icon, .oj-filmstrip-arrow.oj-active.oj-hover .oj-filmstrip-arrow-icon { color: #0572ce; } /* 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: #045fab; 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.8571rem; color: #333333; 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: #9e9e9e; } /* * 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: #c4ced7; } /* * 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: #d6dfe6; } html[dir="rtl"] .oj-first-child-selected > .oj-tabs-nav-root .oj-tabs-tab.oj-selected .oj-tabs-tab-content { border-right-color: #d6dfe6; } /* 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 #d6dfe6; border-radius: 3px; 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: #d6dfe6; } /* vertical tabs with the oj-tabs-icon-only class specified */ /* --------------------------------------------------------------- */ /* * display top, bottom and left border and border radius on the selected tab */ html:not([dir="rtl"]) .oj-tabs-vertical.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected, html:not([dir="rtl"]) .oj-tabs-vertical.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected { border-radius: 2px 0 0 2px; border-right-color: transparent; } html[dir="rtl"] .oj-tabs-vertical.oj-tabs-text-icon > .oj-tabs-nav-root .oj-tabs-tab.oj-selected, html[dir="rtl"] .oj-tabs-vertical.oj-tabs-icon-only > .oj-tabs-nav-root .oj-tabs-tab.oj-selected { border-radius: 0 2px 2px 0; border-left-color: transparent; } 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 2px 2px 0; border-color: #d6dfe6; margin-left: -1px; border-left-color: transparent; } html[dir="rtl"] .oj-tabs-vertical.oj-tabs-text-icon.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected, html[dir="rtl"] .oj-tabs-vertical.oj-tabs-icon-only.oj-tabs-end > .oj-tabs-nav-root .oj-tabs-tab.oj-selected { border-radius: 2px 0 0 2px; border-color: #d6dfe6; 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: 2px 2px 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: #d6dfe6; border-top-color: transparent; border-radius: 0 0 2px 2px; } 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 50px; } /* 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: #f0f0f0; } /* Shades in the connector to the position of the selected step */ .oj-train-connector-fill { background-color: #d6d7d8; 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: #f0f0f0; -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: #d6d7d8; 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: #c4ced7; background-color: #e4e8ea; } .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: #e0e6eb; background-color: #f4f6f7; 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: 100px; 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: #045fab; text-align: center; } .oj-train-label.oj-visited { color: #72007C; } .oj-train-label.oj-disabled { text-decoration: none; font-weight: normal; color: #9e9e9e; } .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.286rem; line-height: 2.286rem; font-size: 1rem; 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