office-ui-fabric-core/dist/documentation/docs.css

The front-end framework for building experiences for Office 365.

/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
/**
 * Office UI Fabric Core 9.6.1
 * The front-end framework for building experiences for Office 365.
 **/
/*
  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
*/
h1,
h2,
h3,
h4 {
  font-weight: normal;
  line-height: 1.2;
  margin: 30px 0 8px 0;
}

h1 {
  color: #666666;
  font-size: 42px;
  font-weight: 100;
}

h2 {
  font-weight: 300;
  font-size: 28px;
  color: #333333;
}

h3 {
  font-weight: 400;
  font-size: 21px;
  color: #212121 !important;
}

h4 {
  font-weight: 600;
  font-size: 17px;
  color: #333333;
}

p {
  font-weight: 400;
  font-size: 17px;
  color: #333333;
  margin-bottom: 20px;
  line-height: 1.5;
}

p strong {
  font-weight: normal;
  font-weight: 600;
}

code.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #deecf9;
}

#body-content a {
  text-decoration: none;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

#body-content a:focus {
  outline: none !important;
}

@media screen and (-ms-high-contrast: active) {
  #body-content a:focus::before {
    border: 1px solid #ffffff;
  }
}

@media screen and (-ms-high-contrast: black-on-white) {
  #body-content a:focus::before {
    border: 1px solid #37006e;
  }
}

@media screen and (-ms-high-contrast: active) {
  #body-content a {
    color: #0000c0;
  }

  #body-content a:hover {
    color: #0000c0;
  }
}

@media screen and (-ms-high-contrast: black-on-white) {
  #body-content a {
    color: #0000c0;
  }

  #body-content a:hover {
    color: #0000c0;
  }
}

#body-content .docs-Header {
  position: fixed;
  top: 0;
  height: 50px;
  left: 0;
  right: 0;
  line-height: 50px;
  padding: 0 20px;
  background: #005a9e;
  overflow: hidden;
  white-space: nowrap;
  z-index: 10;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#body-content .docs-Header .Header-buttons {
  float: right;
}

#body-content .docs-Header .Header-button {
  position: relative;
  text-decoration: none;
  background: 0 0;
  color: #ffffff;
  border: none;
  padding: 0;
  padding: 0 10px;
  min-width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0 5px;
  text-transform: uppercase;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}

#body-content .docs-Header .Header-button:hover {
  background-color: #0078d4;
}

#body-content .docs-Nav {
  display: none;
  margin: 0 0 8px 0;
  width: 100%;
}

#body-content .docs-Nav .docs-MobileNav-item {
  display: inline-block;
  margin: 0 12px 0 0;
  width: auto;
}

#body-content .docs-Nav .docs-MobileNav-item i {
  display: none;
}

#body-content .docs-Nav .docs-MobileNav-item a,
#body-content .docs-Nav .docs-MobileNav-item a:active {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  display: block;
  height: 100%;
  padding-bottom: 8px;
  padding-top: 16px;
  position: relative;
}

@media screen and (-ms-high-contrast: active) {
  #body-content .docs-Nav .docs-MobileNav-item a,
  #body-content .docs-Nav .docs-MobileNav-item a:active {
    color: #ffff00;
  }
}

@media screen and (-ms-high-contrast: black-on-white) {
  #body-content .docs-Nav .docs-MobileNav-item a,
  #body-content .docs-Nav .docs-MobileNav-item a:active {
    color: #0000c0;
  }
}

#body-content .docs-Nav .docs-MobileNav-item a:focus {
  outline: none !important;
}

@media screen and (-ms-high-contrast: active) {
  #body-content .docs-Nav .docs-MobileNav-item a:focus::before {
    border: 1px solid #ffffff;
  }
}

@media screen and (-ms-high-contrast: black-on-white) {
  #body-content .docs-Nav .docs-MobileNav-item a:focus::before {
    border: 1px solid #37006e;
  }
}

#body-content .docs-Nav div.current a {
  border-bottom: 2px solid #0078d4;
}

@media (min-width: 1024px) {
  #body-content .docs-Nav {
    display: block;
  }

  #body-content .docs-Nav div.docs-MobileNav-subMenu {
    display: none;
  }
}

#body-content .docs-Styles-section {
  float: left;
}

#body-content .docs-Table {
  margin-bottom: 20px;
  max-width: 1140px;
  width: 100%;
}

#body-content .docs-Table th {
  font-size: 14px;
  font-weight: 400;
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

#body-content .docs-Table tr {
  border-bottom: 1px solid #f4f4f4;
  padding: 5px 10px;
}

#body-content .docs-Table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  max-width: 300px;
  font-size: 14px;
  padding: 10px;
}

#body-content .docs-Table td.light-border {
  border-style: solid;
  border-width: 2px;
}

#body-content .docs-Table .docs-Table-visibleForScreenReaders {
  font-size: 0;
}

#body-content .docs-Table i.ms-Icon--CheckMark::before {
  font-size: 17px;
}

#body-content .docs-Table i.ms-Icon--Cancel::before {
  font-size: 14px;
}

#body-content .docs-Table--striped tbody tr:nth-child(odd) {
  background: #f8f8f8;
}

#body-content .docs-ListTable li {
  list-style-type: none !important;
}

#body-content ol.docs-ListTable,
#body-content ul.docs-ListTable {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#body-content ul.docs-ListTable,
#body-content ul.docs-ListTable li {
  list-style-type: none !important;
}

#body-content .docs-Page {
  margin: 50px auto 50px auto;
  padding: 0 20px;
  position: relative;
  overflow: hidden;
}

#body-content .docs-Page--home {
  min-height: 0;
}

#body-content .docs-innerPage {
  float: left;
  position: relative;
  width: 100%;
}

#body-content .docs-Page-leftNav {
  display: none;
  position: fixed;
  top: 50px;
  width: 300px;
  height: 100%;
  border-right: 1px solid #eeeeee;
}

@media (min-width: 1024px) {
  #body-content .docs-Page.has-leftNav {
    padding-left: 330px;
  }

  #body-content .docs-Page.has-leftNav .docs-Page-leftNav {
    left: 0;
    display: block;
  }

  #body-content .docs-Page.has-rightNav {
    padding-right: 300px;
  }

  #body-content .docs-Page.has-rightNav .docs-Page-rightNav {
    right: 0;
    display: block;
  }
}

.docs-animationsTable-header {
  display: none;
}

.docs-animationsTable-header .docs-animationExampleColumn {
  display: none;
}

@media (min-width: 480px) {
  .docs-animationsTable-header {
    display: block;
  }

  .docs-animationsTable-header .docs-animationExampleColumn {
    display: block;
  }
}

.docs-animationsTable-body .docs-animationTimingColumn,
.docs-animationsTable-header .docs-animationTimingColumn {
  display: none;
}

.docs-animationsTable-body .docs-animationCubicColumn,
.docs-animationsTable-header .docs-animationCubicColumn {
  display: none;
}

.docs-animationsTable-body .docs-animationTimingColumn,
.docs-animationsTable-header .docs-animationTimingColumn {
  display: none;
}

.docs-animationsTable-body .docs-animationDescriptionColumn,
.docs-animationsTable-header .docs-animationDescriptionColumn {
  margin-bottom: 12px;
}

.docs-animationsTable-body .docs-animationClassColumn,
.docs-animationsTable-header .docs-animationClassColumn {
  margin-bottom: 12px;
}

.docs-animationsTable-body .docs-animationExampleColumn,
.docs-animationsTable-header .docs-animationExampleColumn {
  margin-bottom: 14px;
}

@media (min-width: 640px) {
  .docs-animationsTable-body .docs-animationDescriptionColumn,
  .docs-animationsTable-header .docs-animationDescriptionColumn {
    margin-bottom: 0;
  }

  .docs-animationsTable-body .docs-animationClassColumn,
  .docs-animationsTable-header .docs-animationClassColumn {
    amrgin-bottom: 0;
  }

  .docs-animationsTable-body .docs-animationExampleColumn,
  .docs-animationsTable-header .docs-animationExampleColumn {
    margin-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .docs-animationsTable-body .docs-animationCubicColumn,
  .docs-animationsTable-header .docs-animationCubicColumn {
    display: block;
  }

  .docs-animationsTable-body .docs-animationTimingColumn,
  .docs-animationsTable-header .docs-animationTimingColumn {
    display: block;
  }
}

.docs-animationsTable-body.ms-Grid-row {
  margin-top: 12px;
}

.docs-animationsTable-body.ms-Grid-row .ms-Grid-col {
  line-height: 32px;
  min-height: 30px;
}

.docs-animationsTable-body.ms-Grid-row .ms-Grid-col .mobileText {
  font-weight: 600;
}

@media (min-width: 480px) {
  .docs-animationsTable-body.ms-Grid-row .ms-Grid-col {
    line-height: 18px;
    vertical-align: middle;
  }

  .docs-animationsTable-body.ms-Grid-row .ms-Grid-col .mobileText {
    display: none;
  }
}

@media (min-width: 1024px) {
  .docs-animationsTable-body.ms-Grid-row .ms-Grid-col {
    min-height: 90px;
    line-height: 90px;
  }
}

.AnimationExample {
  position: relative;
  width: 100%;
  height: 90px;
  overflow: hidden;
  display: inline-block;
  float: left;
}

.AnimationExample-content {
  width: 100%;
  height: 100%;
  border: 1px solid #666666;
  padding: 10px;
}

.AnimationExample-content hr {
  margin-top: 8px;
  margin-bottom: 8px;
}

.AnimationExample-panel {
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  opacity: 0;
  background-color: #0078d4;
}

.AnimationExample-note {
  display: inline-block;
  float: left;
  margin-left: 10px;
}

.AnimationExample .ms-slideLeftIn40 .AnimationExample-panel {
  right: 0;
}

.AnimationExample .ms-slideUpIn20 .AnimationExample-panel,
.AnimationExample .ms-slideDownIn20 .AnimationExample-panel {
  top: 60px;
  height: 30px;
  width: 100%;
}

.AnimationExample .ms-slideUpIn10 .AnimationExample-panel,
.AnimationExample .ms-slideDownIn10 .AnimationExample-panel {
  top: 60px;
  height: 20px;
  width: 60px;
  right: 10px;
}

.AnimationExample .ms-slideDownIn20 .AnimationExample-panel {
  top: 0;
}

.AnimationExample .ms-slideDownIn10 .AnimationExample-panel {
  top: 10px;
}

.docs-animationsTable-body .ms-slideRightOut40,
.docs-animationsTable-body .ms-slideLeftOut40,
.docs-animationsTable-body .ms-slideUpOut20,
.docs-animationsTable-body .ms-slideUpOut10,
.docs-animationsTable-body .ms-slideDownOut20,
.docs-animationsTable-body .ms-slideDownOut10,
.docs-animationsTable-body .ms-scaleUpOut103,
.docs-animationsTable-body .ms-scaleDownOut98,
.docs-animationsTable-body .ms-fadeOut100,
.docs-animationsTable-body .ms-fadeOut200,
.docs-animationsTable-body .ms-fadeOut400,
.docs-animationsTable-body .ms-fadeOut500 {
  animation-play-state: paused;
}

.docs-animationsTable-body .ms-slideRightOut40 .AnimationExample-panel,
.docs-animationsTable-body .ms-slideLeftOut40 .AnimationExample-panel,
.docs-animationsTable-body .ms-slideUpOut20 .AnimationExample-panel,
.docs-animationsTable-body .ms-slideUpOut10 .AnimationExample-panel,
.docs-animationsTable-body .ms-slideDownOut20 .AnimationExample-panel,
.docs-animationsTable-body .ms-slideDownOut10 .AnimationExample-panel,
.docs-animationsTable-body .ms-scaleUpOut103 .AnimationExample-panel,
.docs-animationsTable-body .ms-scaleDownOut98 .AnimationExample-panel,
.docs-animationsTable-body .ms-fadeOut100 .AnimationExample-panel,
.docs-animationsTable-body .ms-fadeOut200 .AnimationExample-panel,
.docs-animationsTable-body .ms-fadeOut400 .AnimationExample-panel,
.docs-animationsTable-body .ms-fadeOut500 .AnimationExample-panel {
  animation-play-state: running;
  opacity: 1;
}

.docs-animationsTable-body .ms-slideRightOut40 .AnimationExample-panel,
.docs-animationsTable-body .ms-slideLeftOut40 .AnimationExample-panel {
  right: 0;
}

.docs-animationsTable-body .ms-slideLeftOut40 .AnimationExample-panel {
  left: 0;
}

.docs-animationsTable-body .ms-slideUpOut20 .AnimationExample-panel,
.docs-animationsTable-body .ms-slideUpOut10 .AnimationExample-panel,
.docs-animationsTable-body .ms-slideDownOut20 .AnimationExample-panel,
.docs-animationsTable-body .ms-slideDownOut10 .AnimationExample-panel {
  width: 100%;
  height: 30px;
  top: 0;
}

.docs-animationsTable-body .ms-slideUpOut10 .AnimationExample-panel,
.docs-animationsTable-body .ms-slideDownOut10 .AnimationExample-panel {
  width: 60px;
  top: 10px;
  right: 10px;
  height: 20px;
}

.docs-animationsTable-body .ms-slideDownOut10 .AnimationExample-panel,
.docs-animationsTable-body .ms-slideDownOut20 .AnimationExample-panel {
  top: 60px;
}

.docs-animationsTable-body .ms-scaleUpIn100,
.docs-animationsTable-body .ms-scaleDownIn100,
.docs-animationsTable-body .ms-scaleUpOut103,
.docs-animationsTable-body .ms-scaleDownOut98 {
  overflow: visible;
}

.docs-animationsTable-body .ms-scaleUpIn100 .AnimationExample-panel,
.docs-animationsTable-body .ms-scaleDownIn100 .AnimationExample-panel,
.docs-animationsTable-body .ms-scaleUpOut103 .AnimationExample-panel,
.docs-animationsTable-body .ms-scaleDownOut98 .AnimationExample-panel {
  height: 100%;
  width: 100%;
  top: 0;
}

@keyframes scaleUp100 {
  from {
    transform: scale3d(0.7, 0.7, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes scaleDown100 {
  from {
    transform: scale3d(1.3, 1.3, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes scaleUp103 {
  from {
    transform: scale3d(1, 1, 1);
  }

  to {
    transform: scale3d(1.15, 1.15, 1);
  }
}

@keyframes scaleDown98 {
  from {
    transform: scale3d(1, 1, 1);
  }

  to {
    transform: scale3d(0.85, 0.85, 1);
  }
}

.docs-animationsTable-body .ms-fadeIn100 .AnimationExample-panel,
.docs-animationsTable-body .ms-fadeIn200 .AnimationExample-panel,
.docs-animationsTable-body .ms-fadeIn400 .AnimationExample-panel,
.docs-animationsTable-body .ms-fadeIn500 .AnimationExample-panel {
  height: 100%;
  width: 100%;
  top: 0;
}

.docs-animationsTable-body .ms-fadeOut100 .AnimationExample-panel,
.docs-animationsTable-body .ms-fadeOut200 .AnimationExample-panel,
.docs-animationsTable-body .ms-fadeOut400 .AnimationExample-panel,
.docs-animationsTable-body .ms-fadeOut500 .AnimationExample-panel {
  height: 100%;
  width: 100%;
  top: 0;
}

.AnimationUsage {
  position: relative;
  width: 150px;
  height: 90px;
  overflow: hidden;
  float: left;
  display: inline-block;
  margin-bottom: 20px;
}

.AnimationUsage-content {
  width: 100%;
  height: 100%;
  padding: 10px;
  border-style: solid;
  border-width: 1px;
}

.AnimationUsage-panel {
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
}

.AnimationUsage-button {
  margin: 30px 10px;
  float: left;
  display: inline-block;
}

.docs-colorContainer {
  padding-left: 9px;
  float: left;
  position: relative;
  width: 100%;
}

.docs-colorBox {
  height: 65px;
  padding: 18px;
  box-sizing: border-box;
}

.docs-colorBox p {
  line-height: 20px;
  font-size: 12px;
  margin: 0;
}

.docs-colorBox .mobileText {
  font-weight: 600;
}

.docs-colorBoxBG {
  padding-top: 11px;
}

.docs-colorBoxBG span.ms-font-size-m {
  font-size: 10px;
  line-height: 14px;
}

@media (min-width: 640px) {
  .docs-colorBoxBG span.ms-font-size-m {
    font-size: 14px;
    line-height: 20px;
  }
}

.docs-colorBox.ms-lg4 {
  line-height: 7px;
}

@media (min-width: 640px) {
  .docs-colorBox.ms-lg4 {
    width: 32.333333%;
    margin-right: 1%;
  }
}

.docs-colorBottomRow {
  margin-bottom: 16px;
}

.docs-colorBottomRow .docs-colorBox {
  width: 100%;
  font-size: 12px;
  padding-top: 12px;
}

@media (min-width: 640px) {
  .docs-colorBottomRow .docs-colorBox {
    width: 32.333333%;
    font-size: 14px;
  }
}

.docs-colorBox-hasBg {
  background-color: #f8f8f8;
}

.docs-colorBox-hasBorder {
  border: 1px solid #eaeaea;
}

.docs-colorBoxBorder {
  border-width: 1px;
  border-style: solid;
}

.docs-colorBox:last-child {
  margin-right: 0;
}

.Typography-infoButton,
.Typography-toggleCodeButton {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  padding: 0 7px;
  height: 30px;
  display: inline-block;
  outline: none;
  vertical-align: super;
  position: absolute;
  right: 0;
  z-index: 20;
  top: 50%;
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}

.Typography-infoButton .ms-Icon,
.Typography-toggleCodeButton .ms-Icon {
  color: #a6a6a6;
}

.Typography-infoButton img,
.Typography-toggleCodeButton img {
  fill: #a6a6a6;
}

.Typography-infoButton:hover .ms-Icon,
.Typography-infoButton:hover img,
.Typography-toggleCodeButton:hover .ms-Icon,
.Typography-toggleCodeButton:hover img {
  color: #666666;
  fill: #666666;
}

.ms-Callout.docs-ColorSection-swatchCallout {
  position: absolute;
  width: 290px;
  height: inherit;
  right: -14%;
  top: 100%;
  z-index: 110;
  display: none;
  pointer-events: none;
}

.ms-Callout.docs-ColorSection-swatchCallout.ms-Callout--arrowTop:after {
  right: 47px;
  left: auto;
}

.ms-Callout.docs-ColorSection-swatchCallout.ms-Callout--arrowTop:before {
  right: 47px;
  left: auto;
}

.ms-Callout.docs-ColorSection-swatchCallout .ms-Callout-inner {
  width: 100%;
}

.ms-Callout.docs-ColorSection-swatchCallout .ms-Callout-header {
  background-color: #ffffff;
}

.docs-colorBottomRow .Typography-infoButton:hover + .ms-Callout.docs-ColorSection-swatchCallout {
  display: block;
}

.docs-ColorSection-contrastText {
  float: left;
  width: 75%;
  padding: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 0;
  padding-top: 14px;
  padding-bottom: 14px;
}

.docs-ColorSection-contrastRatio {
  float: right;
  width: 25%;
  padding: 10px;
  margin-bottom: 0;
  padding-top: 14px;
  padding-bottom: 14px;
}

.docs-ColorSection-palette {
  margin-bottom: 20px;
}

.docs-ColorSection-swatches {
  padding: 10px;
  border: 1px solid #eaeaea;
  padding-bottom: 0;
  padding-right: 0;
}

.ms-Callout-inner {
  position: relative;
}

.docs-ColorSection-contrastCaptionLeft {
  float: left;
}

.docs-ColorSection-contrastCaptionLeft h4 {
  font-size: 14px;
  font-weight: 400;
}

.docs-ColorSection-contrastCaptionRight {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000000;
  width: 52px;
}

.docs-ColorSection-contrastCaptionRight h4 {
  font-size: 14px;
  font-weight: 400;
}

.docs-ColorSection-contrastCaption {
  margin-bottom: 10px;
  padding-left: 7px;
  white-space: nowrap;
}

.docs-ColorSection-swatchHeader {
  width: 100%;
  height: 50px;
  padding: 10px;
  position: relative;
}

.docs-ColorSection-swatchTitle {
  position: absolute;
  bottom: 10px;
}

.docs-ColorSection-swatchHex {
  position: absolute;
  right: 10px;
  text-align: right;
}

.docs-ColorSection-swatchBody {
  overflow: hidden;
  height: 0;
}

.docs-ColorSection-swatchCode {
  padding: 5px;
  padding-right: 0;
  margin-bottom: 10px;
  white-space: nowrap;
  font-size: 12px;
}

.docs-ColorSection-swatchCode:last-child {
  margin-bottom: 0;
}

@media (min-width: 600px) {
  .docs-ColorSection-swatchBody {
    padding: 10px;
    height: auto;
  }

  .docs-ColorSection-swatch {
    width: calc('50% - 10px');
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #eaeaea;
  }
}

@media (min-width: 980px) {
  .docs-ColorSection-swatch {
    width: calc('33.3% - 10px');
  }
}

@media (min-width: 1200px) {
  .docs-ColorSection-swatch {
    width: calc('25% - 10px');
  }
}

html,
body,
input,
a {
  margin: 0;
  padding: 0;
}

body {
  font-size: 15px;
  font-weight: 400;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

img {
  border: none;
  padding: 0;
  margin: 0;
}

pre {
  font-family: 'Consolas', 'Monaco', 'Ubuntu Mono', Courier, monospace;
  font-size: 13px;
  padding: 10px;
  background-color: #f4f4f4;
}

code,
.docs-u-fontCode {
  font-family: 'Consolas', 'Monaco', 'Ubuntu Mono', Courier, monospace;
  font-weight: normal;
  padding: 2px;
  overflow: hidden;
  border: none;
}

#body-content .docs-IconList ul {
  margin: 0;
  margin-bottom: 20px;
}

#body-content .docs-IconList ul li {
  float: left;
  font-size: 11px;
  color: #666666;
  text-align: center;
  width: 33.3%;
  height: 138px;
  padding: 10px;
  overflow: hidden;
  background-color: #f8f8f8;
  width: 49%;
  margin-right: 1%;
  margin-bottom: 1%;
  min-height: 124px;
  list-style: none !important;
}

@media (min-width: 640px) {
  #body-content .docs-IconList ul li {
    width: 24%;
  }
}

@media (min-width: 1024px) {
  #body-content .docs-IconList ul li {
    margin-right: 1%;
    margin-bottom: 1%;
    min-height: 124px;
    height: 100px;
  }
}

#body-content .docs-IconList ul li .ms-Icon {
  color: #333333;
  font-size: 32px;
  margin: 10px auto;
  width: 100%;
  margin-top: 0.8em;
}

#body-content .docs-IconList ul li span {
  display: inline-block;
  text-align: left;
  margin-top: 10px;
  width: 100%;
  font-size: 12px;
}

#body-content .LeftNav {
  width: 210px;
  text-align: right;
  margin-top: 42px;
  display: none;
}

@media (min-width: 967px) {
  #body-content .LeftNav {
    display: block;
  }
}

#body-content .LeftNav-links {
  margin: 0;
}

#body-content .LeftNav-item {
  display: block;
  text-align: left;
  margin: 0;
}

#body-content a.LeftNav-link {
  display: block;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  padding: 0 40px;
  border: none;
  cursor: pointer;
  color: #333333;
  background: #ffffff;
  outline: transparent;
}

#body-content a.LeftNav-link:hover {
  background: #f8f8f8;
  cursor: pointer;
}

#body-content a.LeftNav-link:focus {
  color: #212121;
  outline: none !important;
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
}

#body-content a.LeftNav-link.is-selected {
  font-weight: 600;
  color: #000000;
  border-left-width: 2px;
  border-left-style: solid;
}

#body-content a.LeftNav-link.LeftNav-link--active {
  color: #0078d4;
  background-color: #f4f4f4;
  position: relative;
  color: #333333;
}

#body-content a.LeftNav-link.LeftNav-link--active:after {
  content: '';
  position: absolute;
  border-left: 2px solid black;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#body-content a.LeftNav-link.LeftNav-link--active:visited,
#body-content a.LeftNav-link.LeftNav-link--active:active {
  color: #0078d4;
}

#body-content a:hover.LeftNav-link {
  color: #0078d4;
}

#body-content .ms-font-xxl:first-child {
  margin-top: 0;
}

#body-content .ms-font-l {
  line-height: 24px;
}

#body-content .ms-font-m {
  line-height: 20px;
}

#body-content .ms-font-s {
  line-height: 20px;
}

#body-content a {
  text-decoration: none;
  cursor: pointer;
}

#body-content pre {
  border-radius: 0;
  padding: 0;
  border: none;
  margin-bottom: 20px;
}

.docs-demoGrid {
  margin: 0 -10px;
}

.docs-demoGrid .ms-Grid-row {
  margin: 0 -10px;
}

.docs-demoGrid .block {
  background-color: #a6a6a6;
  color: #ffffff;
  height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  text-align: center;
}

.docs-HelperClasses .ms-Grid-row {
  width: 100%;
  float: left;
}

.docs-HelperClasses .docs-HelperHeader {
  display: none;
}

.docs-HelperClasses .ms-Grid-col p.font-size-m {
  margin-bottom: 12px;
}

@media (min-width: 640px) {
  .docs-HelperClasses .docs-HelperHeader {
    display: block;
  }

  .docs-HelperClasses p.font-size-m {
    margin-bottom: 0;
  }
}

.full-width-container {
  margin-top: 0 !important;
  padding-top: 0;
}

.ms-slideRightIn80 {
  animation-name: fadeIn, slideRightIn80;
  animation-duration: 0.367s;
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .ms-slideRightIn80 {
    animation: none;
  }
}

@keyframes slideRightIn80 {
  from {
    transform: translate3d(-80px, 0px, 0px);
  }

  to {
    transform: translate3d(0px, 0px, 0px);
  }
}

.ms-slideLeftIn80 {
  animation-name: fadeIn, slideLeftIn80;
  animation-duration: 0.367s;
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .ms-slideLeftIn80 {
    animation: none;
  }
}

@keyframes slideLeftIn80 {
  from {
    transform: translate3d(80px, 0px, 0px);
  }

  to {
    transform: translate3d(0px, 0px, 0px);
  }
}

.ms-slideLeftOut80 {
  animation-name: fadeOut, slideLeftOut80;
  animation-duration: 0.367s;
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .ms-slideLeftOut80 {
    animation: none;
  }
}

@keyframes slideLeftOut80 {
  from {
    transform: translate3d(0, 0px, 0px);
  }

  to {
    transform: translate3d(-80px, 0px, 0px);
  }
}

.ms-slideRightOut80 {
  animation-name: fadeOut, slideRightOut80;
  animation-duration: 0.367s;
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .ms-slideRightOut80 {
    animation: none;
  }
}

@keyframes slideRightOut80 {
  from {
    transform: translate3d(0px, 0px, 0px);
  }

  to {
    transform: translate3d(80px, 0px, 0px);
  }
}

.fabric-ie #layout-navigation {
  top: 56px;
}

.fabric-ie div.docs-showNavigation .tier-1 {
  margin-top: 57px;
}

.widget-FabricStyleOverrides {
  display: none;
}

@media (max-width: 700px) {
  .fabric-ie #layout-navigation {
    top: 0;
  }
}