@charset "UTF-8";

/* ----------------------------------------------------
-------------------------------------------------------

 CUSTOM CSS FOR Dashboard UI Component Library

-------------------------------------------------------
---------------------------------------------------- */


/* ----------------
 LAYOUT HELPERS
----------------- */

.pull-up-1 {
    margin-top: -1em;
}

.pull-up-3 {
    margin-top: -3em;
}

.pull-up-5 {
    margin-top: -5em;
}

.pull-up-7 {
    margin-top: -7em;
}

.push-down-half {
    margin-top: .5em;
}

.push-down-1 {
    margin-top: 1em;
}

.push-down-3 {
    margin-top: 3em;
}

.push-down-5 {
    margin-top: 5em;
}

.push-down-7 {
    margin-top: 7em;
}

.push-down-10 {
    margin-top: 10em;
}

.push-down-15 {
    margin-top: 15em;
}

.push-down-20 {
    margin-top: 20em;
}

.bold {
    font-weight: 600 !important;
}

.italic {
    font-style: italic !important;
}


/* ----------------
 OVERRIDES & RESETS
----------------- */

body {
    background-color: #fff;
    position: relative;
}


#sandbox .panel-heading {
    background-color: #407C96;
}

.navigation-display {
    margin: 1em 0 0 0;
    border-bottom: none !important;
}

.navigation-display .section-name-display {
    font-size: 1.3em;
    margin-bottom: .25em;
}

.page-name-display {
    font-size: 3.1em;
    line-height: 1.1;
    margin-top: 0;
}

.navigation-display p[class^="type-display-H"] {
    font-size: 1.5em;
    color: #6d7e9b;
    line-height: 1.5;
    margin-top: 1em;
}

.design-guidelines-title {
    margin-left: .8em;
}

.fmc-logo-showcase, .fkc-logo-showcase {
    fill: #005595;
}

.legend-inline {
    margin: 3em 0 2em 0;
}

.legend-block {
    margin: 5em 0 3em 11em;
}

/* ---------------------------------------------
 HEADER BAR
--------------------------------------------- */

.header-fixed-top .btn-sm {
    margin: .35em 0 0 1.5em;
}

.header-fixed-top button > i {
    font-size: 1.2em;
    margin-top: .1em;
    margin-left: .2em;
}

.modal-body {
    padding: 4em !important;
}

.faq-list {
    font-size: 1.6em;
    margin: 2em 0 0 0;
    padding: 2em;
    border: 1px solid #e2e5eb;
}

.faq-list dt {
    font-weight: 600;
    margin: 0 0 .3em 0;
}

.faq-list dd {
    font-weight: 400;
    margin: 0 0 2em 0;
}





/* -------------------------
 NAV
-------------------------- */

.side-nav {
   padding-left: 1em;
   margin-bottom: 1em;
}

/* all links */
.side-nav .nav > li > a {
    font-size: 1.5em;
    color: #999;
    padding: .5em 1.1em 0 0;
/*    border-left: 2px solid transparent;*/
}

/* nested links */
.side-nav .nav .nav > li > a {
    font-size: 1.25em;
    padding: .25em 0 0 .5em;
}

.side-nav .nav > .active > a,
.side-nav .nav > li > a:hover,
.side-nav .nav > li > a:focus {
    color: #6d7e9b;
    text-decoration: none;
    background: none;
/*    border-left: 2px solid #00A4ED;*/
}

/* all active links */
.side-nav .nav >.active > a,
.side-nav .nav > .active:hover > a,
.side-nav .nav > .active:focus > a {
}
/* nested active links */
.side-nav .nav .nav > .active > a,
.side-nav .nav .nav > .active:hover > a,
.side-nav .nav .nav > .active:focus > a {
}

/* hide all (inactive) nested list */
.side-nav .nav ul.nav {
    display: none;
}
/* show active nested list */
.side-nav .nav > .active > ul.nav {
    display: block;
}

/* ------- DOTS

.side-nav .nav ul.nav li > a > i {
    font-size: .8em;
    padding: .4em .7em 0 0;
    color: #fff;
}

.side-nav .nav ul.nav li > a:hover i {
    color: #00A4ED;
    opacity: .3;
}

.side-nav .nav .nav > .active > a i,
.side-nav .nav .nav > .active:hover > a i,
.side-nav .nav .nav > .active:focus > a i {
    color: #00A4ED;
}

------- */

.side-nav .nav ul.nav li > a > i {
    display: none;
}












/* ---------------------------------------------
 MAIN PAGE
--------------------------------------------- */

.version-alert {
    margin: 1em 2.4em 3em 1em;
}

.hidden-download {
    text-decoration: none;
}

.highlight {
    color: #67b735;
}

.intro-row {
    margin-top: 15em;
    margin-bottom: .5em;
    padding-top: 11em;
    border-top: 3px solid #bebebe;
}

.intro-row > div[class^="col-"] > p {
    margin-bottom: .75em;
}

.intro-row > div[class^="col-"] > p[class^="type-display-H3"] {
    color: #6d7e9b;
}

.intro-row > div[class^="col-"] > p[class^="type-bodycopy"] {
    margin-bottom: 1.5em;
}

.secondary-row {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 7em;
    padding-bottom: 1em;
    border-top: 1px dashed #cecece;
}

.secondary-row > div[class^="col-"] > p {
    margin-bottom: .75em;
}

.secondary-row > div[class^="col-"] > p[class^="type-display-H3"] {
    color: #6d7e9b;
}

.nested-comp-row {
    margin-top: .5em;
    margin-bottom: 2em;
    padding-top: 15em;
    padding-bottom: 10em;
    border-top: 1px solid #dddddd;
}

.nested-comp-row > p {
    font-weight: 400;
    padding-top: 1em;
    margin-top: -6em;
    color: #999;
}

.showcase-img {
    margin-top: 2em;
    margin-bottom: 1em;
}

.panel-showcase {
    min-height: 23em;
}

.panel-showcase-sm {
    height: 200px;
}

.panel-fade {
    opacity: .5;
}

.type-display-H3 {
    font-size: 2.25em;
}

.type-display-H5 {
    font-size: 1.5em;
    line-height: 1.4;
}

#display-color-panel p {
    display: inline-block;
    margin-right: 1.8em;
}

.collapse-pre {
    margin-top: 3em;
}


/* ---------------------------------------------
 CUSTOM DETAILS
--------------------------------------------- */


#tables .table-scroll-y {
/* --  height for mockup only -- */
    height: 25em;
/* --  height for mockup only -- */
}

#overview {
    max-width: 110em;
    padding-top: 0;
}

#overview .navigation-display {
    margin-top: -3em;
}

#overview .intro-row {
    padding-top: 6em;
}

#logos a.btn-cta {
    margin: 4em 1em 0 0;
}

#typography div[class^="status-rank-"] {
    margin: 2em 0 0 3em;
}

#icons pre {
    margin: 0 .75em;
}

#icons i {
    font-size: 4.3em;
    margin: .4em 0 0 .5em;
}

#icons p.type-display-H4 {
    margin: .9em 0 .25em 0;
    color: #A8BDCD;
    color: #6d7e9b;
}

#icons i + p + p.type-bodycopy {
    display: inline-block;
    margin: .9em 0 .5em 0;
    text-align: right;
}

#icons i.fa-angle-double-right {
    font-size: 6em;
    margin-top: -.01em;
    padding-top: .2em;
}

#icons div[id^="icon-"] {
    padding-top: 5em;
}

#icons #icon-arrow-up i, #icons #icon-arrow-down i {
    display: inline-block;
    margin: .4em .04em 0 .2em;
}

#buttons .btn-base {
    display: block;
    margin: .75em 0;
}

#buttons #btn-modals .btn-base {
    display: inline !important;
}

#btn-modals .panel-body {
    text-align: center;
}

#buttons .btn-cta {
    display: block;
    margin: .75em 0;
}

#form-controls #base-styles-examples .panel-body > form > .form-group:first-of-type {
    margin-top: 1em;
}

#form-controls #base-styles-examples .form-group-lg {
    margin-bottom: 4em;
}

#form-controls #input-groups-example .form-group {
    margin: 2em auto;
}

#form-controls #fieldset-example .form-group {
    margin-top: 1em;
}


/* ---------------------------------------------
 LAYOUT GUIDELINES PAGE - GRID EXAMPLE DETAILS
--------------------------------------------- */


#guidelines .row .top-row > div[class^="col-"] > p[class^="type-display-H"] {
    margin: 0 auto 3em auto;
    padding: 0 1em;
}

#guidelines .animation-intro {
    margin: 0 auto;
}

#guidelines div.top-row p.type-display-H5 {
    margin: 2em 1em 0 2.5em;
    line-height: 1.5;
}

div[id^="guidelines"] div[class^="row bs-layout-grid-example"] {
/*    border: 1px solid #999;*/
    padding: .5em;
}

div[id^="guidelines"] div[class^="row bs-layout-grid-example"] > div {
    height: 23em;
    background-color: #d0d0d0;
    padding: .75em;
    border: 2px solid rgba(255,255,255,.75);
}

.grid-example-1 .inlay-col {
    height: 22.8em;
    margin-top: -3em;
    background-color: rgba(225,225,225,.1);
    border: 2px solid rgba(245,245,245,.2);
}

.grid-example-3 .inlay-col {
    height: 10em;
    margin-top: -3em;
    background-color: rgba(225,225,225,.1);
    border: 2px solid rgba(245,245,245,.2);
}

.grid-example-1 > div[class^="col-"] {
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-bottom:  0 !important;
}

.grid-example-3 > div[class^="col-"] {
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-bottom:  0 !important;
}

div[id^="guidelines"] div[class^="row grid-example-"] {
    border: 3px solid #7fce71;
    padding: .25em;
}

div[id^="guidelines"] div[class^="row grid-example-"] > div {
    height: 23em;
    background-color: #a4d3e6;
    padding: .75em;
    border: 2px solid white;
    text-align: center;
    font-size: 1.3em;
    font-weight: 600;
    color: white;
}

div[id^="guidelines"] .grid-example-0 > div {
    height: 10em !important;
}

div[id^="guidelines"] .grid-example-0 .panel-body {
    height: 6.2em !important;
}

div[id^="guidelines"] .grid-example-3 {
    margin-bottom: .6em;
}

div[id^="guidelines"] .grid-example-3 > div {
    height: 10em !important;
}

div[id^="guidelines"] .grid-example-4 > div {
    height: 5em !important;
}

.grid-col-text-hint {
    font-weight: 700;
    padding: .15em .5em .2em .5em;
    background-color: #d0d0d0;
    color: #fff;
}

.layout-col-text-hint {
    font-weight: 700;
    padding: .15em .5em .2em .5em;
    background-color: #a4d3e6;
    color: #fff;
}

div[class^="row grid-example-"] + p {
    margin-top: 1em;
}

#guidelines .top-row {
    margin-top: 2em;
    margin-bottom: 7em;
}

#guidelines .scaffolding-illustration-outer {
    border: 1px dashed #de64e2;
    padding: 1.5em 5em;
}

#guidelines .scaffolding-illustration-inner {
    border: 1px dashed #de64e2;
    padding: .2em 1.75em;
    margin: .75em 0;
}


/* ---------------------------------------------
 TYPOGRAPHY ADJUSTMENTS FOR EXAMPLES
--------------------------------------------- */

/* --  Intro paragraph for each page -- */

.typography-showcase p[class^="type-display-H"] {
    margin-bottom: .5em;
}

.typography-showcase p[class^="type-display-data-"] {
    margin-bottom: .2em;
}

.typography-showcase p[class^="type-label-"] {
    margin-bottom: .5em;
}


/* ---------------------------------------------
 NAV
--------------------------------------------- */

/* -- <a> only for linking within this build -- */
.sidebar-nav > .page-name > a {
    display: block;
    color: #c1c7d3;
}

.sidebar-nav > .page-name > a > p:hover {
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}

.sidebar-nav > .page-name > a.active p {
    color: #fff;
}
/* -- a tag only for linking within this build -- */

.sidebar-nav > a > p.page-name {
    font-size: 1.3em;
    font-weight: 400;
    text-transform: none;
    letter-spacing: .025em;
    margin-bottom: 0;
    padding: .7em 3em .8em 2.3em;
    color: #c1c7d3;
}

.sidebar-nav > a > p.page-name:nth-of-type(1) {
    padding-top: 1.1em;
    padding-bottom: 1.1em;
}

.sidebar-nav > a > p.page-name:hover {
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    background-color: #343a45;
}

.sidebar-nav > a.active > p.page-name {
    color: #fff;
    background-color: #343a45;
}

.sidebar-nav > a > p.page-name + i {
    margin: -2.4em 1.75em 0 0;
    color: #434b58;
}

.sidebar-nav > a > p.page-name:nth-of-type(1) + i {
    margin-top: -2.8em;
}

.sidebar-nav > a.active > p.page-name + i {
    color: #26BEC9;
}



/* ---------------------------------------------
 COLOR CHIPS
--------------------------------------------- */

.thumbnail {
    margin: 1em 0 0 0;
    padding: .75em;
}

.thumbnail .caption p {
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: .015em;
    text-align: center;
    color: #646464;
    margin: .5em auto;
}

div[class^="color-chip-"] {
    height: 10em;
    width: auto;
}

div[class^="color-chip-"] p {
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    padding: 3.5em 0 2em 0;
    color: #fff;
}

/* ------- COLOR BLIND SAFE ------ */

.color-chip-green {
    background-color: #80B247;
}

.color-chip-yellow {
    background-color: #E4B242;
}

.color-chip-red {
    background-color: #C63640;
}

.color-chip-neutral {
    background-color: #8A9399;
}

/* ------- DATA DISPLAY ------ */

.color-chip-display-color-1 {
    background-color: #80A4AF;
}

.color-chip-display-color-2 {
    background-color: #0077A8;
}

.color-chip-display-color-3 {
    background-color: #2F5475;
}

.color-chip-display-color-4 {
    background-color: #00A4ED;
}

.color-chip-display-color-5 {
    background-color: #407C96;
}

.color-chip-display-color-6 {
    background-color: #4EA8C4;
}

.color-chip-display-color-7 {
    background-color: #002D5A;
}

.color-chip-display-color-8 {
    background-color: #0056AF;
}



/* ---------------------------------------------
 PRE / CODE
--------------------------------------------- */


.overflow-snippet pre {
    overflow: auto;
    word-wrap: normal;
    white-space: pre;
}

#logos .overflow-snippet pre {
    height: 20em;
}

#form-controls .overflow-snippet pre {
    height: 52.8em;
}

#form-controls #inline-snippet .overflow-snippet pre {
    height: 20em;
}

pre + p {
    margin-top: 1em;
}






/* ---------------------------------------------
 ASPECT RATIO MATH
--------------------------------------------- */






/* ---------------------------------------------
 MEDIA QUERIES
--------------------------------------------- */


@media screen and (max-width: 125em) {




}/*max-width: 125em*/






@media screen and (max-width: 115em) {




}/*max-width: 115em*/







@media screen and (max-width: 95em) {



}/*max-width: 95em*/







@media screen and (max-width: 90em) {


    .version-alert {
        margin-top: 1em;
        margin-right: 1em;
}

}/*max-width: 90em*/







@media screen and (max-width: 48em) {



    .solution-title {
        font-size: 1em;
    }


}/*max-width: 48em*/



.jv-content {
  max-width: 50em;
  margin: 2em auto;
}
.jv-content p {
  font-size: 1.6em;
  text-align: center;
  line-height: 1.4;
  color: #141414;
}

.hero-wrapper img {
  width: 100%;
  height: auto;
  margin-top: 3px;
}