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

.demo-html {
  height: 100%;
}

.demo-body {
  margin: 0;
}

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