#componentDemoContent {
  width: 1px;
  min-width: 100%;
  -webkit-transform: translate3d(0, 0, 0); }

.demo-html {
  height: 100%; }

.cookbook-hidden {
  display: none; }

.demo-padding {
  padding: 5px;
  box-sizing: border-box; }

.demo-container {
  overflow-x: auto; }

.demo-disable-bg-image {
  background-image: none; }

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

/* Icons with a suffix "-16" were designed to look best at 16px. */
.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"; }

/* Icons with a suffix "-24" were designed to look best at 24px. */
.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-dropbox-icon-24:before {
  content: "\e90f"; }

.demo-facebook-icon-24:before {
  content: "\e910"; }

.demo-documents-icon-24:before {
  content: "\e912"; }

.demo-email-icon-24:before {
  content: "\e913"; }

.demo-oracle-icon.oj-icon {
  width: 137px;
  height: 18px; }
  .demo-oracle-icon.oj-icon:before {
    content: url("../../images/oracle_logo.svg"); }
  html:not([dir="rtl"]) .demo-oracle-icon.oj-icon {
    padding-right: 4px; }
  html[dir="rtl"] .demo-oracle-icon.oj-icon {
    padding-left: 4px; }

.demo-oracle-icon.oj-icon:before {
  display: inline; }

.demo-avatar-icon.oj-icon {
  width: 24px;
  height: 24px; }

.demo-avatar-icon.oj-icon:before {
  content: url("../../images/avatar_24px.png"); }

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
  .demo-avatar-icon.oj-icon:before {
    content: url("../../images/avatar_24px_2x.png");
    transform: translate(-25%, -25%) scale(0.5); } }

.demo-recipe-spacing {
  margin: 20px 0;
  width: 100%; }

.demo-recipe-table {
  border-collapse: collapse; }

.demo-recipe-table th,
.demo-recipe-table td {
  border-color: lightgrey;
  border-style: solid;
  border-width: 0 0 1px 0;
  width: 10em;
  text-align: center;
  padding: 10px; }

.demo-panel-contrast1 {
  background-color: #313334;
  color: #ffffff; }

.italic {
  font-style: italic; }

.bold {
  font-weight: bold; }

.underline {
  text-decoration: underline; }

.demo-table {
  border-collapse: collapse; }

.demo-table td {
  border: 1px solid #000; }