/**
 * Breakpoints
 */

/**
 * Base Colors
 */

:root {
  /* White */
  /* Gray */
  /* Blue */
  /* Teal */
  /* Green */
  /* Yellow */
  /* Red */
}

/**
 * Mappings
 */

/* Brand Colors */

/* Text Colors */

/* Line Colors */

/**
 * Typography
 */

:root {
  /* Font weights */

  /* Base Font */
 
  /* Headings */
}

/**
 * Base Metrics
 */

:root {


  /* Directions */
}

/*  Design Guide Header Styles  */

.Icon--9 {
    height: 9px;
    width: 9px;
    background-size: cover;
}

.Header--dg.PageNav {
    background-color: inherit;
    border-top: none;
    border-bottom: none;
    height: auto;
    padding: 0;
}

.Header--dg.PageNav.is-stickable.is-stuck {
    opacity: 0.95;
}

.Header--dg .Header-brand {
    margin: 0;
    padding: 0;
    float: none;
    display: block;
    vertical-align: inherit;
}

.Header--dg .Header--navbar {
    padding: 2.0rem 0 2.1rem 0;
}

.Header--dg .Header--main {
    padding-top: 6px;
}

.Header--dg .Header-brandLink {
    width: auto;
    height: auto;
}

.Header-dg .Header-brandLink a {
    display: block;
}

.Header--dg .Logo {
    margin: 0 auto;
    display: block;
    width: 20.6rem;
    height: 4.8rem;
    max-width: 20.6rem;
}

.red {
    border-color: #AD431C;
    color: #AD431C;
}

.green {
    border-color: #34935D;
    color: #34935D;
}

.Header--dg .Header-title {
    height: 6rem;
    margin-left: 23.2rem;
    padding: 0 5rem;
    position: fixed;
}

.header-padding {
    padding: 13px 20px 13px 77px!important;
    height: 60px;
}

@media (max-width:766px) {
    .Header--dg .Header-title {
        margin: 0 -1.5rem;
        padding: 0 3.7rem;
        top: 6rem;
    }
}

.Header--dg .Header-title h1 {
    color: #fff;
    font-size: 2.6rem;
    margin: 0.4rem 0 0 0;
}

.Header--dg select {
    width: 75px;
    margin-left: 5px;
    color: #5d5d5d;
}

/* Scrollbar style*/

.GutterNav ul::-webkit-scrollbar {
    display: none;
}

/* Subheader */

@media     (min-width:981px) {
    .Subheader .PageNav-mobile--toggle {
        -webkit-transform: translateX(-24rem);
                transform: translateX(-24rem);
    }
}

.Subheader {
    width: 100%;
    /*z-index: 5;*/
    border-bottom: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    padding: 0.8rem 0;
    position: relative;
    min-height: 57px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    // justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.Subheader .PageNav-mobile--toggle {
    padding: 1.3rem 1rem;
    margin: 0 1.8rem;
    display: block;
    width: 4.2rem;
    border-radius: 1rem;
    -webkit-transition: background 0.4s, -webkit-transform 0.4s;
    transition: background 0.4s, -webkit-transform 0.4s;
    transition: background 0.4s, transform 0.4s;
    transition: background 0.4s, transform 0.4s, -webkit-transform 0.4s;
}

.Subheader .PageNav-mobile--toggle:hover {
    background: #105FA8;
}

.Subheader .line {
    width: 100%;
    height: 2px;
    background: #003A70;
    margin-bottom: 4px;
    -webkit-transition: background 0.4s;
    transition: background 0.4s;
}

.Subheader .PageNav-mobile--toggle:hover .line {
    background: #105FA8;
}

.Subheader .line.last {
    margin-bottom: 0;
}

.Subheader-Link {
    width: 7.8rem;
}

.Subheader.stuck {
    position: fixed !important;
    top: 0;
}

.Subheader--title {
    font-size: 2.6rem;
    font-weight: 300;
    line-height: 2.9rem;
    margin: 0 !important;
    padding: 0;
    padding-right: 20px !important;
    text-align: right;
}

.Header--vers {
    position: absolute;
    top: 30px;
    right: 0;
    padding-right: 20px;
}

/*  Design Guide GutterNav Styles  */

#design-guide-nav.stuck {
    position: fixed;
    top: 41px;
}

.Container--gutterNav {
    padding-left: 0rem;
}

@media     (min-width:981px) {
    .Container--gutterNav {
        padding-left: 22.0rem;
    }
}

.Container--gutterNav>[role="main"] {
    float: right;
    width: 100%;
}

@media (max-width:766px) {
    .Container--gutterNav>[role="main"] {
        margin-bottom: 4rem;
    }
}

@media (max-width:980px) {
    .Container--gutterNav>[role="main"] {
        -webkit-transition: -webkit-transform 0.6s;
        transition: -webkit-transform 0.6s;
        transition: transform 0.6s;
        transition: transform 0.6s, -webkit-transform 0.6s;
    }
    body.nav-open .Container--gutterNav>[role="main"] {
        -webkit-transform: translateX(24rem);
                transform: translateX(24rem);
    }
}

.GutterNav {
    width: 24rem;
    /*z-index: 10;*/
    -webkit-transform: translateX(-105%);
            transform: translateX(-105%);
    -webkit-transition: -webkit-transform 0.6s;
    transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
}

.GutterNav.nav-open {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
}

@media     (min-width:981px) {
    .GutterNav {
        -webkit-transform: none;
                transform: none;
        -webkit-transform: initial;
                transform: initial;
    }
}

.GutterNav ul {
    margin: 0;
    overflow-y: auto;
    height: 100%;
    padding-top: 1.8rem;
}

.GutterNav li {
    font-size: 20px;
    font-size: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.GutterNav li a {
    display: block;
    padding: 1.6rem 2.6rem 1.6rem 4.2rem;
    color: #003A70;
    -webkit-transition: color 0.4s;
    transition: color 0.4s;
}

.GutterNav li ul {
    margin: 0;
    padding: 0 0 0 2.4rem;
    max-height: 0;
    overflow: hidden;
}

.GutterNav li ul ul {
    padding: 0;
}

.GutterNav .nav-categoryMenu>li {
    border: none;
    font-size: 1.4rem;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
}

.GutterNav .nav-categoryMenu>li .Icon {
    -webkit-transition: -webkit-transform 0.4s;
    transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
}

.GutterNav .nav-categoryMenu>li.is-active .Icon {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.GutterNav .nav-categoryMenu>li a {
    padding: 1.6rem 1rem 1.6rem 3.5rem;
    text-transform: uppercase;
    color: #5d5d5d;
    font-size: 13px;
    /* fallback */
    font-size: 1.3rem;
}

.GutterNav .nav-categoryMenu>li a:hover {
    color: #444444;
}

.GutterNav .nav-pageMenu>li {
    margin: .4rem 0 .5rem;
}

.GutterNav .nav-pageMenu>li:last-child {
    margin-bottom: 1rem;
}

.GutterNav .nav-pageMenu>li a {
    padding: 0.4rem 1.8rem 0.4rem 5rem;
    color: #838383;
    font-size: 1.3rem;
    text-transform: capitalize;
}

.GutterNav li>ul {
    -webkit-transition: max-height 0.4s;
    transition: max-height 0.4s;
}

.GutterNav li.is-active>ul {
    max-height: 9999px;
    -webkit-transition: max-height 0.8s 0.4s;
    transition: max-height 0.8s 0.4s;
}

.GutterNav li.nav-activePage>a {
    color: #003A70;
    font-weight: 600;
}

.GutterNav .nav-pageMenu>li a:hover,
.GutterNav li li.nav-activePage>a:hover {
    color: #5d5d5d;
}

.GutterNav--mobile {
    width: 7.6rem;
    -webkit-transform: none;
            transform: none;
    -webkit-transform: initial;
            transform: initial;
    margin: 0 0 0 -7.6rem;
    z-index: 1;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.dg-body-container {
    background: rgba(0, 0, 0, .6);
    background-size: 100%;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    z-index: 5;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    visibility: visible;
}

.dg-body-wrapper {
    max-width: 1200px !important;
}

.nav-open .dg-body-container {
    opacity: 1;
    visibility: visible;
    height: 100%;
    -webkit-transition: height 0s, opacity .25s .1s, visibility .25s .1s;
    transition: height 0s, opacity .25s .1s, visibility .25s .1s;
}

@media     (min-width:981px) {
    .nav-open .dg-body-container {
        z-index: 1;
        opacity: 0;
        visibility: visible;
        height: 0;
        -webkit-transition: height 0s, opacity .25s .1s, visibility .25s .1s;
        transition: height 0s, opacity .25s .1s, visibility .25s .1s;
    }
}

/**
* Highlight JS styles.
**/

.hljs {
    -webkit-text-size-adjust: none;
}

.hljs-comment,
.diff .hljs-header,
.hljs-javadoc {
    color: #838383;
    font-style: italic;
}

.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
    color: #5d5d5d;
    font-weight: bold;
}

.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
    color: #19a38a;
}

.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.hljs-dartdoc,
.tex .hljs-formula {
    color: #c34126;
}

.hljs-title,
.hljs-id,
.scss .hljs-preprocessor {
    color: #c34126;
    font-weight: bold;
}

.hljs-list .hljs-keyword,
.hljs-subst {
    font-weight: normal;
}

.hljs-class .hljs-title,
.hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
    color: #105FA8;
    font-weight: bold;
}

.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
    color: #105FA8;
    font-weight: normal;
}

.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
    color: purple;
}

.hljs-regexp {
    color: purple;
}

.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.clojure .hljs-keyword,
.scheme .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
    color: #03a0ad;
}

.hljs-built_in {
    color: #105FA8;
}

.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
    color: #838383;
    font-weight: bold;
}

.hljs-deletion {
    background: orange;
}

.hljs-addition {
    background: lightGreen;
}

.diff .hljs-change {
    background: #105FA8;
}

.hljs-chunk {
    color: #bababa;
}

/* Page Menu */

.Breadcrumb {
    text-transform: capitalize;
}

.Page-menu {
    display: none;
}

@media     (min-width:767px) {
    .Page-menu {
        width: 18rem;
        display: block;
    }
    .toc-sticky-wrapper {
        width: 18rem;
    }
    .Page-menu.stuck {
        position: fixed;
        top: 65px;
    }
}

.Page-menu ul {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding-left: 1.2rem;
    position: relative;
    top: 1.2rem;
    padding-right: 10px;
}

.Page-menu ul:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    height: 100%;
    width: 2px;
    background: #f0f0f0;
}

.Page-menu li {
    font-size: 13px;
    /* fallback */
    font-size: 1.3rem;
}

.Page-menu li a {
    color: #5d5d5d;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.Page-menu ul ul {
    margin-left: 0.5rem;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: opacity 0.1s ease;
    transition: opacity 0.1s ease;
}

.Page-menu ul ul:before {
    content: "";
    height: 100%;
    /* fallback if needed */
    height: calc(100% - 10px);
    background: #bababa;
}

.Page-menu ul li.is-open ul {
    max-height: 9999px;
}

.Page-menu ul li a {
    position: relative;
}

.Page-menu ul li a:before {
    content: "";
    position: absolute;
    top: 0;
    left: -12px;
    width: 0;
    height: 100%;
    background: #105FA8;
    -webkit-transition: width 0.3s;
    transition: width 0.3s;
    z-index: 10;
}

.Page-menu ul li.is-open>a {
    color: #105FA8;
}

.Page-menu ul li.is-open>a:before {
    width: 3px;
}

/* Markdown */

.Markdown {
    padding-top: 0.6rem;
}

.Minion .MarkedExample {
    font-family: minion-pro, Georgia, serif !important;
}

.MarkedExample pre {
    font-family: monospace !important;
}

.Markdown.has-menu {
    padding-right: 0rem;
}

@media     (min-width:767px) {
    .Markdown.has-menu {
        padding-right: 18rem;
    }
}

.MarkedExample {
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-bottom: 5rem;
}

.MarkedExample-rendered {
    padding: 4rem;
}

.MarkedExample-rendered:after {
    clear: both;
}

.MarkedExample-code,
.Markdown pre {
    background-color: #fbfbfb;
    display: block;
    line-height: 20px;
    overflow: auto;
    padding: 4rem;
    width: 100%;
    word-wrap: break-word;
}

.Markdown hr,
.Markdown--formatted hr {
    border-top: 1px solid #fff;
}

:root {
    /* Mapped colors */
}

/* Color Swatches */

.colorswatch--dg {
    height: 12rem;
    border-left-width: 18px;
}

.colorswatchbottom--dg {
    height: 12rem;
    border-left-width: 18px;
    border-bottom-style: none;
}

.colorswatchtitle--dg {
    border-left-width: 18px;
    border-bottom-style: none;
}

/* Hover Stroke for PDF icons */

.u-strokeHoverWhite:hover path {
    stroke: #fff!important;
}

/*New home page */

.Flex--container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.Flex--card {
    position: relative;
    width: 100%;
}

@media     (min-width:767px) {

  .Flex--card {
    width: calc(50% - 32px);
  }
}

@media     (min-width:981px) {

  .Flex--card {
    width: calc(50% - 16px);
  }
}

@media (min-width: 1400px) {

  .Flex--card {
    width: calc(25% - 16px);
  }
}

.Flex--threecolumn {
    position: relative;
    text-align: center;
    width: 100%;
}

@media     (min-width:767px) {

  .Flex--threecolumn {
    width: calc(33.33333% - 32px);
  }
}

@media     (min-width:981px) {

  .Flex--threecolumn {
    width: calc(50% - 16px);
  }
}

@media (min-width: 1400px) {

  .Flex--threecolumn {
    width: calc(33.33333% - 16px);
  }
}

a.divLink {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none;
    background-color: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 1;
}

.Button--above-divLink,a.divLink {
    z-index: 1
}

a.divLink:hover {
    border: 1px dashed #cc0000;
    background-color: #000 !important;
}

.Flex--contents{
    height: 100%;
    border: 1px solid #f0f0f0;
}

.Flex--contents:hover {
    border: 1px solid #296BB5;
    background-color: #F6FAFD;
}

.Illustration--200{
    height: 125px;
    margin-top: 24px;
    margin-bottom: 24px;

}

.pencil-background {
    background-image: url(/design-guide/5/assets/images/pencils-sm.jpg);
    height: 80px;
    background-position: bottom center;
}

@media     (min-width:767px) {
    .pencil-background {
        background-image: url(/design-guide/5/assets/images/pencils-min.jpg);
        height: 180px;
        background-position: bottom center;
    }
}

/*New home page */