@font-face {
    font-family: 'AppFont';
    src: url("fonts/App_iconfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
.demo-icon-font, .demo-icon-font-24 {
    font-family: AppFont;
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    font-weight: normal;
    speak: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    text-align: center;
    box-sizing: content-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.demo-icon-font:before, .demo-icon-font-24:before {
    display: inline-block;
}
.demo-icon-font-24 {
    font-size: 24px;
}
.demo-bookmark-icon-16:before {
    content: "\e606"}
.demo-grid-icon-16:before {
    content: "\e607"}
.demo-list-icon-16:before {
    content: "\e608"}
.demo-gear-icon-16:before {
    content: "\e609"}
.demo-filter-icon-16:before {
    content: "\e907"}
.demo-share-icon-16:before {
    content: "\e90a"}
.demo-home-icon-24:before {
    content: "\e600"}
.demo-education-icon-24:before {
    content: "\e601"}
.demo-catalog-icon-24:before {
    content: "\e602"}
.demo-palette-icon-24:before {
    content: "\e603"}
.demo-library-icon-24:before {
    content: "\e604"}
.demo-chat-icon-24:before {
    content: "\e605"}
.demo-edit-icon-24:before {
    content: "\e906"}
.demo-fire-icon-24:before {
    content: "\e908"}
.demo-person-icon-24:before {
    content: "\e909"}
.demo-signout-icon-24:before {
    content: "\e90b"}
.demo-info-icon-24:before {
    content: "\e900"}
.demo-copy-icon-24:before {
    content: "\e901"}
.demo-people-icon-24:before {
    content: "\e902"}
.demo-chart-icon-24:before {
    content: "\e903"}
.demo-garbage-icon-24:before {
    content: "\e904"}
.demo-download-icon-24:before {
    content: "\e905"}
.demo-oracle-icon {
    width: 137px;
    height: 36px;
    margin-top: 2px;
    margin-right: 4px;
}

.demo-icon-top {
    margin-top:25px;
    margin-left:35px;
    margin-bottom:-12px;
}
.demo-oracle-icon:before {
    content: url("images/byspectra_logo.svg");
}
html:not([dir="rtl"]) .demo-oracle-icon {
    padding-right: 4px;
}
html[dir="rtl"] .demo-oracle-icon {
    padding-left: 4px;
}
.demo-oracle-icon:before {
    display: inline;
}
.demo-appheader {
    background-color: #f0f0f0;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-bottom: 1px;
}
.oj-slow-boxshadow .demo-appheader {
    border-bottom-color: #d9dfe3;
}
.demo-appheader-appname {
    font-size: 1.143rem;
    font-weight: normal;
    color: #4d4d4d;
}
html:not([dir="rtl"]) .demo-appheader-toolbar-container {
    text-align: right;
}
html[dir="rtl"] .demo-appheader-toolbar-container {
    text-align: left;
}
.demo-appheader-toolbar-container .oj-toolbar {
    display: inline-block;
    margin-right: 0;
    margin-left: 0;
}
.demo-appheader-logo-block {
    display: inline-block;
}
.demo-appheader-offcanvas-pushwrapper {
    width: 100%;
    overflow-x: hidden;
}
.demo-appheader-appname-block {
    vertical-align: 2px;
}
html:not([dir="rtl"]) .demo-appheader-appname-block {
    margin-left: 4px;
}
html[dir="rtl"] .demo-appheader-appname-block {
    margin-right: 4px;
}
.demo-offcanvas-toggle {
    display: block;
}
html:not([dir="rtl"]) .demo-offcanvas-toggle {
    float: left;
}
html[dir="rtl"] .demo-offcanvas-toggle {
    float: right;
}
.demo-appheader-classic .demo-appheader-nav {
    display: none;
}
@media screen and (max-width: 767px) {
    #logotipo
    {
        justify-content: center;
        padding-left: 28px;
    }
    
    .demo-appheader {
    padding-left: 2px;
    padding-right: 2px;
}
.demo-appheader-appname-block, .demo-appheader-pulldown-normal, .demo-appheader-toolbar-separator, .demo-appheader-toolbar-button {
    display: none;
}
.demo-appheader-pulldown-small {
    display: inline-block;
}
.demo-appheader-classic .demo-offcanvas-toggle {
    width: 30%;
    position: relative;
}
.demo-appheader-classic .demo-appheader-logo {
    text-align: center;
    float: none;
    width: 40%;
    position: relative;
}
html:not([dir="rtl"]) .demo-appheader-classic .demo-appheader-logo {
    margin-left: 0;
}
html[dir="rtl"] .demo-appheader-classic .demo-appheader-logo {
    margin-right: 0;
}
}@media print,  screen and (min-width: 768px) {
    html: not([dir="rtl"]) .demo-offcanvas-toggle {
    margin-left: -10px;
}
html[dir="rtl"] .demo-offcanvas-toggle {
    margin-right: -10px;
}
.demo-appheader-appname-block, .demo-appheader-pulldown-normal {
    display: inline-block;
}
.demo-appheader-pulldown-small {
    display: none;
}
.demo-appheader {
    padding-left: 10px;
    padding-right: 10px;
}
}@media print and (orientation: landscape),  screen and (min-width: 1024px) {
    .demo-offcanvas-toggle {
    display: none;
}
.demo-appheader-appname-block {
    display: inline-block;
}
html:not([dir="rtl"]) .demo-appheader-classic .demo-appheader-logo {
    margin-left: 0;
}
html[dir="rtl"] .demo-appheader-classic .demo-appheader-logo {
    margin-right: 0;
}
.demo-appheader-classic .demo-appheader-nav {
    display: block;
}
html:not([dir="rtl"]) .demo-appheader-classic .demo-appheader-nav {
    text-align: right;
}
html[dir="rtl"] .demo-appheader-classic .demo-appheader-nav {
    text-align: left;
}
}.demo-appheader-lite .demo-appheader-logo {
    margin-top: 9px;
}
html:not([dir="rtl"]) .demo-appheader-lite .demo-appheader-logo {
    float: left;
}
html[dir="rtl"] .demo-appheader-lite .demo-appheader-logo {
    float: right;
}
.demo-appheader-lite .oj-toolbar {
    margin-top: 0;
}
.demo-appheader-classic .demo-appheader-logo {
    margin-top: 8px;
}
html:not([dir="rtl"]) .demo-appheader-classic .demo-appheader-logo {
    float: left;
    margin-left: 4px;
}
html[dir="rtl"] .demo-appheader-classic .demo-appheader-logo {
    float: right;
    margin-right: 4px;
}
.demo-appheader-logo-oracle {
    padding-top: 3px;
}
.demo-appheader-logo-oracle {
    width: 136px;
    height: 19px;
}
.demo-appheader-logo-oracle:before {
    content: url("images/oracle_logo_lrg.png");
}
@media (-webkit-min-device-pixel-ratio: 1.5),  (min-resolution: 144dpi),  (min-resolution: 1.5dppx) {
    .demo-appheader-logo-oracle: before {
    content: url("images/oracle_logo_lrg_2x.png");
    -webkit-transform: translate(-25%,  -25%) scale(0.5);
    transform: translate(-25%,  -25%) scale(0.5);
}
}.demo-appheader-avatar {
    width: 24px;
    height: 24px;
}
.demo-appheader-avatar:before {
    content: url("images/avatar_24px.png");
}
@media (-webkit-min-device-pixel-ratio: 1.5),  (min-resolution: 144dpi),  (min-resolution: 1.5dppx) {
    .demo-appheader-avatar: before {
    content: url("images/avatar_24px_2x.png");
    -webkit-transform: translate(-25%,  -25%) scale(0.5);
    transform: translate(-25%,  -25%) scale(0.5);
}
}.demo-appheader-nav .oj-navigationlist-item-icon {
    color: #333;
}
.demo-appheader-nav .oj-navigationlist-item-label {
    color: #4d4d4d;
}
.oj-panel.demo-appheader-offcanvascontent {
    padding: 0;
}
.demo-appheader-offcanvascontent {
    color: #c0c4c8;
    background-color: #313334;
}
.demo-appheader-toggle-button {
    margin-bottom: 4px;
}
.demo-appheader-offcanvascontent .oj-navigationlist-item.oj-selected {
    background-color: #202324;
}
.demo-appheader-offcanvascontent .oj-navigationlist-item.oj-hover:not(.oj-selected) {
    background-color: #262628;
    color: #fafafa;
}
.demo-appheader-offcanvascontent a.oj-navigationlist-item-content {
    color: #c0c4c8;
}
.demo-appheader-offcanvascontent .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
    color: #85bbe7;
}
.demo-appheader-offcanvascontent .oj-navigationlist-item.oj-hover .oj-navigationlist-item-label {
    color: #85bbe7;
}
.demo-appheader-offcanvascontent .oj-navigationlist-item.oj-selected .oj-navigationlist-item-label, .demo-appheader-offcanvascontent .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
    color: #fafafa;
}
.demo-appheader-nav .oj-navigationlist-item.oj-hover:not(.oj-selected) {
    background-color: transparent;
    color: #85bbe7;
}
.demo-appheader-nav .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon, .demo-appheader-nav .oj-navigationlist-item.oj-hover .oj-navigationlist-item-label {
    color: #85bbe7;
}
.demo-appheader-nav .oj-navigationlist-item.oj-selected {
    background-color: transparent;
    color: #0572ce;
}
.demo-appheader-nav .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon, .demo-appheader-nav .oj-navigationlist-item.oj-selected .oj-navigationlist-item-label {
    color: #0572ce;
}
.demo-appcontent {
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 0.8571rem;
}
.demo-appfooter {
    padding-left: 10px;
    padding-right: 10px;
    height: 4.167em;
    border-top: 1px solid #d9dfe3;
    background-color: #f0f0f0;
    box-sizing: border-box;
}
.demo-appfooter-text {
    font-size: 0.857rem;
    color: #4d4d4d;
}
.demo-appfooter ul {
    margin-bottom: 2px;
}
html:not([dir="rtl"]) .demo-appfooter ul {
    padding-left: 0px;
}
html[dir="rtl"] .demo-appfooter ul {
    padding-right: 0px;
}
.demo-appfooter li {
    list-style: none;
    display: inline-block;
}
html:not([dir="rtl"]) .demo-appfooter li {
    margin-right: 5px;
    margin-left: 0px;
    padding-right: 5px;
    border-right: 1px solid #d9dfe3;
}
html[dir="rtl"] .demo-appfooter li {
    margin-left: 5px;
    margin-right: 0px;
    padding-left: 5px;
    border-left: 1px solid #d9dfe3;
}
html:not([dir="rtl"]) .demo-appfooter li:last-child {
    border-right: none;
}
html[dir="rtl"] .demo-appfooter li:last-child {
    border-left: none;
}
.demo-flex-top-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.demo-flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    position: relative;
    min-height: 100%}
.demo-flex-header {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
.demo-flex-footer {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
.demo-flex-content {
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
}
.demo-flex-center {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    box-sizing: border-box;
    position: relative;
    min-height: 100vh;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .demo-flex-center {
    min-height: 100%}
}html.demo-sticky-footer-layout, .demo-sticky-footer-layout body {
    height: 100%}
.demo-sticky-footer-layout {
    height: 100%}
.demo-sticky-footer-main-outer {
    min-height: 100%}
.demo-sticky-footer-main-inner {
    overflow: visible;
    padding-bottom: 4.167em;
}
.demo-sticky-footer-layout .demo-appfooter {
    position: relative;
    margin-top: -4.167em;
}
@media print and (orientation: portrait),  screen and (max-width: 1023px) {
    .demo-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.demo-nav {
    padding-top: 20px;
    -webkit-order: 2;
    order: 2;
}
}.demo-header-toolbar-container {
    -webkit-align-items: center;
    align-items: center;
}
html:not([dir="rtl"]) .demo-cook-search-button {
    float: right;
    margin-left: 3px;
}
html[dir="rtl"] .demo-cook-search-button {
    float: left;
    margin-right: 3px;
}
.demo-cook-search-input {
    overflow: hidden;
    display: block;
    width: auto;
}
.demo-cook-search-input .oj-form-control {
    min-width: initial;
}
#recipeTitle {
    margin-top: 22px;
    margin-bottom: 22px;
}
#recipeTitle h1 {
    display: inline-block;
}
#componentContent {
    overflow: auto;
}
#collapsibleRecipe {
    margin-top: 25px;
}
#componentRecipeContent>ul:first-child, #componentRecipeContent>ol:first-child {
    margin-top: 0;
}
#cookbookTitle h1 {
    margin-top: 4px;
    min-height: 23px;
}
#componentShell.oj-panel {
    padding: 0;
}
.demo-recipe-spacing {
    margin: 20px 0;
    width: 100%}
.demo-recipe-table th, .demo-recipe-table td {
    border: 1px solid lightgrey;
    border-collapse: collapse;
    width: 10em;
    text-align: center;
    padding: 10px;
}
.demo-info-table th, .demo-info-table td {
    border: 1px solid lightgrey;
    border-collapse: collapse;
    padding: 10px;
}
.demo-search-icon {
    font-size: 1rem;
}
.demo-help-icon {
    padding-left: 5px;
}
#doNotCopy {
    color: red;
    font-weight: bold;
    font-size: large;
    margin-left: 100px;
}
@font-face {
    font-family: 'platforms';
    src: url("../images/formfactor/platform.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
[class^="demo-platform-icon-"], [class*=" demo-platform-icon-"] {
    font-family: 'platforms';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 24px;
    height: 24px;
    font-size: 24px;
}
.demo-platform-icon-blocked:before {
    content: "\e905"}
.demo-platform-icon-projector:before {
    content: "\e900"}
.demo-platform-icon-wrench:before {
    content: "\e901"}
.demo-platform-icon-leaf:before {
    content: "\e902"}
.demo-platform-icon-cloud:before {
    content: "\e903"}
.demo-platform-icon-hipster2:before {
    content: "\e904"}
.demo-platform-icon-web:before {
    content: "\e9c9"}
.demo-platform-icon-ios:before {
    content: "\eabf"}
.demo-platform-icon-android:before {
    content: "\eac1"}
.demo-platform-icon-windows:before {
    content: "\eac3"}
.demo-platform-icon-desktop:before {
    content: "\e956"}
.demo-platform-icon-phone-portrait:before, .demo-platform-icon-phone-landscape:before {
    content: "\e958"}
.demo-platform-icon-phone-landscape:before {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.demo-platform-icon-tablet-portrait:before, .demo-platform-icon-tablet-landscape:before {
    content: "\e959"}
.demo-platform-icon-tablet-landscape:before {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
#togglePinnedNavListButtonSet .oj-web-applayout-offcanvas-icon, #toggleNavListButton .oj-web-applayout-offcanvas-icon {
    height: 24px;
    width: 24px;
}
#header .oj-default .demo-applayout-offcanvas-icon::before, #header .oj-focus-only .demo-applayout-offcanvas-icon::before {
    content: url("../../../../images/24px_offcanvas_icon_ena.svg");
}
#header html[dir="rtl"] .oj-default .demo-applayout-offcanvas-icon::before, #header html[dir="rtl"] .oj-focus-only .demo-applayout-offcanvas-icon::before {
    content: url("../../../../images/24px_offcanvas_icon_ena.svg");
}
#header .oj-hover .demo-applayout-offcanvas-icon::before, #header .oj-hover.oj-selected .demo-applayout-offcanvas-icon::before {
    content: url("../../../../images/24px_offcanvas_icon_ovr.svg");
}
#header html[dir="rtl"] .oj-hover .demo-applayout-offcanvas-icon::before, #header html[dir="rtl"] .oj-hover.oj-selected .demo-applayout-offcanvas-icon::before {
    content: url("../../../../images/24px_offcanvas_icon_ovr.svg");
}
#header .oj-active .demo-applayout-offcanvas-icon::before, #header .oj-selected .demo-applayout-offcanvas-icon::before {
    content: url("../../../../images/24px_offcanvas_icon_sel.svg");
}
#header html[dir="rtl"] .oj-active .demo-applayout-offcanvas-icon::before, #header html[dir="rtl"] .oj-selected .demo-applayout-offcanvas-icon::before {
    content: url("../../../../images/24px_offcanvas_icon_sel.svg");
}
#header .oj-disabled .demo-applayout-offcanvas-icon::before {
    content: url("../../../../images/24px_offcanvas_icon_ena.svg");
}
#header html[dir="rtl"] .oj-disabled .demo-applayout-offcanvas-icon::before {
    content: url("../../../../images/24px_offcanvas_icon_ena.svg");
}
.demo-applayout-offcanvas-icon {
    height: 24px;
    width: 24px;
}
.demo-applayout-offcanvas-icon::before {
    display: inline-block;
}
.demo-applayout-offcanvas-icon {
    font-family: "Alta Icon Font";
    line-height: 1;
    display: inline-block;
    speak: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    text-align: center;
    box-sizing: content-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#togglePinnedNavListButtonSet .oj-button.oj-hover.oj-button-half-chrome {
    background-color: transparent;
    border-color: transparent;
}
#togglePinnedNavListButtonSet .oj-button.oj-selected.oj-button-half-chrome {
    background-color: transparent;
    border-color: transparent;
}
#toggleNavListButton.oj-button.oj-hover.oj-button-half-chrome {
    background-color: transparent;
    border-color: transparent;
}
#toggleNavListButton.oj-button.oj-selected.oj-button-half-chrome {
    background-color: transparent;
    border-color: transparent;
}
.demo-pinned-navlist .oj-web-applayout-content {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.demo-pinned-navlist .demo-page-wrapper {
    -webkit-flex: auto;
    flex: auto;
    display: -webkit-flex;
    display: flex;
}
.demo-pinned-navlist #navDrawer {
    position: relative;
}
#page-container {
    -webkit-overflow-scrolling: touch;
}
.markup-example:after, .script-example:after, .css-example:after {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    color: #9da0a4;
    border-radius: 4px 0 4px 0;
}
.css-example:after {
    content: "CSS Editor"}
.markup-example:after {
    content: "HTML Editor"}
.script-example:after {
    content: "JS Editor"}
.css-example, .markup-example, .script-example {
    clear: left;
    position: relative;
    padding: 0 0 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.script-example {
    padding-top: 39px;
}
#html-example, #script-example, #css-example {
    padding-top: 1rem;
}
.italic {
    font-style: italic;
}
.bold {
    font-weight: bold;
}
.underline {
    text-decoration: underline;
}
.edit-button {
    float: right;
    position: absolute;
    right: 20px;
    top: 10px;
}
.codeEditorInfo {
    top: 10px;
    left: 75px;
    float: right;
    position: absolute;
    font-size: 13px;
    color: #4f4f4f;
    padding-top: 5px;
}
.demo-selectornames {
    font-size: 12px;
    color: #9c5800;
    padding: 2px 4px;
    white-space: nowrap;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    font-family: Consolas, Menlo, Monaco, "Source Code Pro", "Courier New", Courier, monospace;
}
#global-home-container {
    height: 760px;
}
.homeBox {
    position: absolute;
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid #d6dfe6;
    border-radius: 3px;
    background-color: white;
    background-repeat: no-repeat;
    background-position: center top;
    cursor: pointer;
}
.homeBox LABEL {
    position: absolute;
    width: 100%;
    padding-left: 10px;
    margin: 0px;
    box-sizing: border-box;
    bottom: 10px;
    color: #252525;
    font-weight: bold;
    font-size: 16px;
}
.homeBox .withCaret:after {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-image: url("../../../images/caret.png");
}
#gettingStarted LABEL {
    font-size: 24px;
    padding-left: 0px;
    left: 0;
    top: 40px;
    bottom: auto;
    text-align: center;
}
#gettingStarted.homeBox {
    left: 20px;
    right: 50%;
    top: 20px;
    height: 350px;
    margin-right: 10px;
    background-position: center bottom;
    background-image: url("../../../images/iStock_000019915867_Medium.jpg");
}
#formControls.homeBox {
    left: 50%;
    right: 25%;
    top: 20px;
    height: 165px;
    margin-left: 10px;
    margin-right: 15px;
    background-image: url("../../../images/homeTextAndSelection.png");
}
#buttons.homeBox {
    left: 75%;
    right: 20px;
    top: 20px;
    height: 165px;
    margin-left: 5px;
    background-image: url("../../../images/homeButtons.png");
}
#dataCollections.homeBox {
    left: 50%;
    right: 25%;
    top: 205px;
    height: 165px;
    margin-left: 10px;
    margin-right: 15px;
    background-image: url("../../../images/homeDataCollections.png");
}
#dataVisualizations.homeBox {
    left: 75%;
    right: 20px;
    top: 205px;
    height: 165px;
    margin-left: 5px;
    background-image: url("../../../images/homeDataVisualizations.png");
}
#patterns.homeBox {
    left: 20px;
    right: 50%;
    top: 390px;
    height: 350px;
    margin-right: 10px;
    background-image: url("../../../images/homePatterns.png");
}
#layout.homeBox {
    left: 50%;
    right: 20px;
    top: 390px;
    height: 165px;
    margin-left: 10px;
    background-image: url("../../../images/homeLayoutAndNavigation.png");
}
#behaviorsAndAnimation.homeBox {
    left: 50%;
    right: 25%;
    top: 575px;
    height: 165px;
    margin-left: 10px;
    margin-right: 15px;
    background-image: url("../../../images/homeBehaviorsAndAnimations.png");
}
#media.homeBox {
    left: 75%;
    right: 20px;
    top: 575px;
    height: 165px;
    margin-left: 5px;
    background-image: url("../../../images/homeMedia.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .homeBox .withCaret: after {
    background-image: url("../../../images/caret@2x.png");
    -webkit-background-size: 24px 24px;
}
#gettingStarted.homeBox {
    background-image: url("../../../images/iStock_000019915867_Medium@2x.jpg");
    -webkit-background-size: 421px 443px;
}
#formControls.homeBox {
    background-image: url("../../../images/homeTextAndSelection@2x.png");
    -webkit-background-size: 219px 116px;
}
#buttons.homeBox {
    background-image: url("../../../images/homeButtons@2x.png");
    -webkit-background-size: 219px 116px;
}
#dataCollections.homeBox {
    background-image: url("../../../images/homeDataCollections@2x.png");
    -webkit-background-size: 219px 116px;
}
#dataVisualizations.homeBox {
    background-image: url("../../../images/homeDataVisualizations@2x.png");
    -webkit-background-size: 219px 116px;
}
#patterns.homeBox {
    background-image: url("../../../images/homePatterns@2x.png");
    -webkit-background-size: 458px 305px;
}
#layout.homeBox {
    background-image: url("../../../images/homeLayoutAndNavigation@2x.png");
    -webkit-background-size: 458px 116px;
}
#behaviorsAndAnimation.homeBox {
    background-image: url("../../../images/homeBehaviorsAndAnimations@2x.png");
    -webkit-background-size: 219px 116px;
}
#media.homeBox {
    background-image: url("../../../images/homeMedia@2x.png");
    -webkit-background-size: 219px 116px;
}
}@media only screen and (min-device-pixel-ratio: 2) {
    .homeBox .withCaret: after {
    background-image: url("../../../images/caret@2x.png");
    background-size: 24px 24px;
}
#formControls.homeBox {
    background-image: url("../../../images/iStock_000019915867_Medium@2x.jpg");
    background-size: 421px 443px;
}
#textAndSelection.homeBox {
    background-image: url("../../../images/homeTextAndSelection@2x.png");
    background-size: 219px 116px;
}
#buttons.homeBox {
    background-image: url("../../../images/homeButtons@2x.png");
    background-size: 219px 116px;
}
#dataCollections.homeBox {
    background-image: url("../../../images/homeDataCollections@2x.png");
    background-size: 219px 116px;
}
#dataVisualizations.homeBox {
    background-image: url("../../../images/homeDataVisualizations@2x.png");
    background-size: 219px 116px;
}
#patterns.homeBox {
    background-image: url("../../../images/homePatterns@2x.png");
    background-size: 458px 305px;
}
#layout.homeBox {
    background-image: url("../../../images/homeLayoutAndNavigation@2x.png");
    background-size: 458px 116px;
}
#behaviorsAndAnimation.homeBox {
    background-image: url("../../../images/homeBehaviorsAndAnimations@2x.png");
    background-size: 219px 116px;
}
#media.homeBox {
    background-image: url("../../../images/homeMedia@2x.png");
    background-size: 219px 116px;
}
}@media only screen and (min-resolution: 2dppx) {
    .homeBox .withCaret: after {
    background-image: url("../../../images/caret@2x.png");
    background-size: 24px 24px;
}
#gettingStarted.homeBox {
    background-image: url("../../../images/iStock_000019915867_Medium@2x.jpg");
    background-size: 421px 443px;
}
#formControls.homeBox {
    background-image: url("../../../images/homeTextAndSelection@2x.png");
    background-size: 219px 116px;
}
#buttons.homeBox {
    background-image: url("../../../images/homeButtons@2x.png");
    background-size: 219px 116px;
}
#dataCollections.homeBox {
    background-image: url("../../../images/homeDataCollections@2x.png");
    background-size: 219px 116px;
}
#dataVisualizations.homeBox {
    background-image: url("../../../images/homeDataVisualizations@2x.png");
    background-size: 219px 116px;
}
#patterns.homeBox {
    background-image: url("../../../images/homePatterns@2x.png");
    background-size: 458px 305px;
}
#layout.homeBox {
    background-image: url("../../../images/homeLayoutAndNavigation@2x.png");
    background-size: 458px 116px;
}
#behaviorsAndAnimation.homeBox {
    background-image: url("../../../images/homeBehaviorsAndAnimations@2x.png");
    background-size: 219px 116px;
}
#media.homeBox {
    background-image: url("../../../images/homeMedia@2x.png");
    background-size: 219px 116px;
}
}#documentsContainer {
    margin-top: 25px;
}
#documentsTabsContainer {
    margin-top: 25px;
}
#devGuideContentContainer {
    display: table;
    width: 100%}
#left_dev_guide_nav {
    overflow: hidden;
    width: 250px;
    border-right: 1px solid #d6dfe6;
    display: table-cell;
    padding-right: 10px;
}
#devGuideContent {
    display: table-cell;
    padding-left: 10px;
}
#examplesContentContainer, #oracleInternalContentContainer {
    position: relative;
}
#examplesContent, #oracleInternalContent {
    margin-left: 280px;
    min-height: 300px;
}
#left_examples_nav, #left_oracle_internal_nav {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: 250px;
    margin-left: 0;
    border-right: 1px solid #d6dfe6;
    padding-right: 10px;
}
.oj-inline-icon {
    display: inline-block;
    vertical-align: top;
}
#technologyStackInfoContainer {
    margin-top: 30px;
    margin-bottom: 30px;
}
#technologyStackInfo {
    border: 1px solid black;
}
#technologyStackInfo tr td {
    border: 1px solid black;
    padding: 3px;
}
.demo-sort-icon {
    height: 16px;
    width: 16px;
}
.oj-default .demo-sort-icon:before, .oj-focus-only .demo-sort-icon:before {
    content: url("../../../../images/arrowupalphabetaz_16_ena.png");
}
.oj-hover .demo-sort-icon:before, .oj-hover.oj-selected .demo-sort-icon:before {
    content: url("../../../../images/arrowupalphabetaz_16_hov.png");
}
.oj-active .demo-sort-icon:before, .oj-selected .demo-sort-icon:before {
    content: url("../../../../images/arrowupalphabetaz_16_onb.png");
}
.oj-disabled .demo-sort-icon:before {
    content: url("../../../../images/arrowupalphabetaz_16_dis.png");
}
#componentListContainer {
    margin: -10px;
}
#navItem {
    padding: 10px 10px 0 0;
}
.componentCategoryItemListview.oj-listview-card-layout {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
}
.categorybanner {
    padding: 36px 0 36px 6px;
    background-color: #0096E0;
    -webkit-transition: padding 0.4s ease-in-out;
    transition: padding 0.4s ease-in-out;
}
.categorybanner.small {
    padding: 3px 0px 3px 0px;
}
.categorybanner.shrink {
    padding: 3px 0px 3px 0px;
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
}
.rootCollections_banner {
    background-color: #d97638;
}
.rootControls_banner {
    background-color: #e55a37;
}
.rootForms_banner {
    background-color: #ea5b6e;
}
.rootFramework_banner {
    background-color: #d16ba6;
}
.rootLayoutNav_banner {
    background-color: #2f9ad4;
}
.rootPatterns_banner {
    background-color: #269e9e;
}
.rootVisualizations_banner {
    background-color: #a5a2a2;
}
.all_banner {
    background-color: #8d909b;
}
.categorybanner h1 {
    font-size: 46px;
    color: #FFFFFF;
    padding: 0;
    margin: 0;
    line-height: 40px;
    padding-left: 20px;
    opacity: 0.8;
    font-weight: lighter;
    font-family: "SF UI Display", "Helvetica Neue", "Roboto", "Segoe UI", Arial, sans-serif;
    -webkit-transition: height 0.4s ease-in-out,  width  0.4s ease-in-out, font-size 0.4s ease-in-out;
    transition: height 0.4s ease-in-out, width 0.4s ease-in-out, font-size 0.4s ease-in-out;
}
.categorygrouplabel {
    font-size: 26px;
    color: #FFFFFF;
    padding: 0;
    margin: 5px 0;
    line-height: 40px;
    padding-left: 20px;
    opacity: 0.8;
    font-weight: lighter;
    font-family: "SF UI Display", "Helvetica Neue", "Roboto", "Segoe UI", Arial, sans-serif;
}
.categorybanner.small h1 {
    font-size: 26px;
}
.categorybanner.shrink h1 {
    font-size: 26px;
    -webkit-transition: height 0.4s ease-in-out, width 0.4s ease-in-out, font-size 0.4s ease-in-out;
    transition: height 0.4s ease-in-out, width 0.4s ease-in-out, font-size 0.4s ease-in-out;
}
.categorylist {
    list-style: none;
    width: 100%;
    margin: 20px;
}
.categorylist.fixed {
    position: fixed;
    z-index: 1;
    background-image: url("../../../libs/oj/v3.2.0/alta/images/texture.png");
    background-repeat: repeat;
    margin: 0;
    padding: 20px;
}
#filterMenuButtonBar.fixed {
    position: fixed;
    z-index: 1;
    background-image: url("../../../libs/oj/v3.2.0/alta/images/texture.png");
    background-repeat: repeat;
}
.categoryitem {
    line-height: 28px;
    cursor: default;
    padding-right: 5px;
}
.categoryitem a {
    width: 100%;
    height: 100%;
    padding: 5px 15px;
    text-decoration: none;
    border-radius: 15px;
    border: 1px solid transparent;
}
.categoryitem.categorySelected a, a.categorylink:hover {
    color: #ffffff;
}
#rootCollections_category.categorySelected a, #rootCollections_category a:hover {
    background-color: #914f26;
}
#rootControls_category.categorySelected a, #rootControls_category a:hover {
    background-color: #a64123;
}
#rootForms_category.categorySelected a, #rootForms_category a:hover {
    background-color: #a6414c;
}
#rootFramework_category.categorySelected a, #rootFramework_category a:hover {
    background-color: #8c4380;
}
#rootLayoutNav_category.categorySelected a, #rootLayoutNav_category a:hover {
    background-color: #216a8a;
}
#rootPatterns_category.categorySelected a, #rootPatterns_category a:hover {
    background-color: #186e6e;
}
#rootVisualizations_category.categorySelected a, #rootVisualizations_category a:hover {
    background-color: #A5A2A2;
}
#all_category.categorySelected a, #all_category a:hover {
    background-color: #5f6169;
}
#componentListContainer .oj-listview {
    border-style: none;
    padding-right: 5px;
}
.componentCategoryItemListview .oj-listview-item {
    position: relative;
    background-image: none;
    margin-bottom: 15px;
    padding: 0;
}
.componentCategoryItemListview .oj-listview-item img {
    display: block;
}
.componentCategoryItemListview .oj-listview-item h4 {
    font-size: 16px;
    font-weight: normal;
}
.componentCategoryItemListview .oj-listview-item.oj-hover, .componentCategoryItemListview .oj-listview-item.oj-hover+li.oj-listview-item {
    border-top-color: transparent;
}
.componentInfo {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px;
    background-color: #fff;
    text-decoration: none;
}
.componentShortDesc {
    color: #333;
    white-space: normal;
}
.rootCollections_border {
    border-color: #d97638;
}
.rootControls_border {
    border-color: #e55a37;
}
.rootForms_border {
    border-color: #ea5b6e;
}
.rootFramework_border {
    border-color: #d16ba6;
}
.rootLayoutNav_border {
    border-color: #2f9ad4;
}
.rootPatterns_border {
    border-color: #269e9e;
}
.rootVisualizations_border {
    border-color: #a5a2a2;
}
.all_border {
    border-color: #8d909b;
}
.listingRef, .listingRef:hover, .listingRef:focus {
    text-decoration: none;
    cursor: default;
}
.ribbon {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}
.ribbon span {
    font-size: 10px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    line-height: 20px;
    transform: rotate(45deg);
    width: 100px;
    display: block;
    background-color: gray;
    box-shadow: 0 3px 10px -5px #000;
    position: absolute;
    top: 19px;
    right: -21px;
}
.ribbon span::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid gray;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid gray;
}
.ribbon span::after {
    content: '';
    position: absolute;
    right: 0%;
    top: 100%;
    z-index: -1;
    border-right: 3px solid gray;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid gray;
}
[data-bind*="ojComponent"]:not(.oj-component-initnode) {
    visibility: hidden;
}
.global-container {
    position: relative;
}
.boxSizing {
    box-sizing: border-box;
    position: relative;
}
.pattern-nav {
    float: right;
}
.demo-panel-contrast1 {
    background-color: #313334;
    color: #fff;
}
.demo-padding {
    background-image: none;
    margin: 5px;
}