/* Bootstrap extras */

.nav {
    margin-top: 20px;
    margin-bottom: 100px;
}

.nav > li > a {
    background-color: white;
    padding-top: 1px;
    padding-bottom: 1px;
}

.nav > li > a:hover,
.nav > li > a:focus,
.nav > li.active > a,
.nav > li.active > a:hover,
.nav > li.active > a:focus {
    background-color: white;
    font-weight: 600;
    color: black;
}

@media (max-width: 767px) {
  body {
        padding-left: 0;
        padding-right: 0;
  }
    .container {
        padding-right: 20px;
        padding-left: 20px;
    }
    .nav {
        display: none; /* user can toggle */
        margin-top: 10px;
        margin-bottom: 30px;
    }
    .nav li a {
        margin-bottom: 5px;
    }

}

/* Bar at the top */

#logo {
    max-width: 100px;
}

.navbar .brand {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.navbar .navbar-inner {
    text-align: center;
    background-image: none;
    background-color: #F0F1F4;
    border: none;
    border-bottom: 1px solid #DDD;
    color: black;
    padding: 15px 0 5px;
    box-shadow: none;
    border-radius: 0;
}

.navbar .navbar-inner a.brand {
    text-decoration: none;
    float: none;
    color: black;
    text-shadow: none;
    font-weight: 600;
}

.nav-header {
    font-weight: bold;
    font-size: 13px;
    color: #005580;
    text-transform: none;
}

/* Nav */

.nav a {
    text-decoration: none;
}

/* General */

html, body, p, li {
    font-family: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #54626a;
}

a {
    color: #405665;
    text-decoration: underline;
}
  a:hover, a:focus {
    color: #54626a;
    text-decoration: none;
  }

em, i { font-style: italic; }
strong, b, .important {
    font-weight: 600;
    color: black;
}

.clear { clear: both; }
.hidden { display: none; }

.floatleft { float: left; }
.floatright { float: right; }

p, pre {
    margin-bottom: 1.1em;
}

code {
    font-family: Menlo, Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
    font-size: 1.0rem;
    border: 1px solid #ccc;
    background-color: #f4f4f4;
    border: 1px solid transparentize(gray, .80);
    background-color: transparentize(gray, .98);
    padding: 1px 4px;
    border-radius: 3px;
    color: #54626a;
}

blockquote {
    padding: 0 1em;
    margin: 0 1em 1em 1em;
    border-left: 1px dotted #ccc;
    color: #777;
}

hr.dots {
    border: none;
    margin-bottom: 30px;
    padding-bottom: 30px;
    background: url("/static/images/stars.png") no-repeat center bottom;
    background-size: 36px 12px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    hr.dots {
        background-image: url("/static/images/stars2x.png");
    }
}


.lead {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
}

.info
{
     background-color: #d5f5f5;
     background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22color-white%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMinYMin%20meet%22%3E%3Cg%20data-name%3D%22Layer%202%22%3E%3Cg%20data-name%3D%22info%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20transform%3D%22rotate(180%2012%2012)%22%20opacity%3D%220%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M12%202a10%2010%200%201%200%2010%2010A10%2010%200%200%200%2012%202zm1%2014a1%201%200%200%201-2%200v-5a1%201%200%200%201%202%200zm-1-7a1%201%200%201%201%201-1%201%201%200%200%201-1%201z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
     background-position: 15px 20px;
     background-repeat: no-repeat;
     border-left: solid 4px #bce8f1;
     line-height: 18px;
     overflow: hidden;
     padding: 15px 50px;
     font-family: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 15px;
     font-weight: 500;
     line-height: 24px;
     color: #000000;
}

.warning
{
     background-color: #ffeadb;
     background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22color-white%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMinYMin%20meet%22%3E%3Cg%20data-name%3D%22Layer%202%22%3E%3Cg%20data-name%3D%22info%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20transform%3D%22rotate(180%2012%2012)%22%20opacity%3D%220%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M22.56%2016.3L14.89%203.58a3.43%203.43%200%200%200-5.78%200L1.44%2016.3a3%203%200%200%200-.05%203A3.37%203.37%200%200%200%204.33%2021h15.34a3.37%203.37%200%200%200%202.94-1.66%203%203%200%200%200-.05-3.04zM12%2017a1%201%200%201%201%201-1%201%201%200%200%201-1%201zm1-4a1%201%200%200%201-2%200V9a1%201%200%200%201%202%200z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
     background-position: 15px 20px;
     background-repeat: no-repeat;
     border-left: solid 4px #cc8604;
     line-height: 18px;
     overflow: hidden;
     padding: 15px 50px;
     font-family: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 15px;
     font-weight: 500;
     line-height: 24px;
     color: #000000;
}

.alert
{
     background-color: #ffe8f9;
     background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22color-white%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMinYMin%20meet%22%3E%3Cg%20data-name%3D%22Layer%202%22%3E%3Cg%20data-name%3D%22info%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20transform%3D%22rotate(180%2012%2012)%22%20opacity%3D%220%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M22.56%2016.3L14.89%203.58a3.43%203.43%200%200%200-5.78%200L1.44%2016.3a3%203%200%200%200-.05%203A3.37%203.37%200%200%200%204.33%2021h15.34a3.37%203.37%200%200%200%202.94-1.66%203%203%200%200%200-.05-3.04zM12%2017a1%201%200%201%201%201-1%201%201%200%200%201-1%201zm1-4a1%201%200%200%201-2%200V9a1%201%200%200%201%202%200z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
     background-position: 15px 20px;
     background-repeat: no-repeat;
     border-left: solid 4px #d66866;
     line-height: 18px;
     overflow: hidden;
     padding: 15px 50px;
     font-family: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 15px;
     font-weight: 500;
     line-height: 24px;
     color: #000000;
}
.preview
{
     background-color: #f8f4ed;
     background-position: 15px 20px;
     background-repeat: no-repeat;
     border-left: solid 4px #c09853;
     line-height: 18px;
     overflow: hidden;
     padding: 15px 15px;
     font-family: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 15px;
     font-weight: 500;
     line-height: 24px;
     font-style: italic;
     color: #c09853;
}

/* Forms */

input.text, textarea.text {
    font-size: 14px;
    padding: 2px;
}
input.text {
    width: 200px;
}
textarea.text {
    width: 300px;
    height: 70px;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
    color: #363f44;
    font-family: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
}

h1 {
    font-size: 1.75rem;
    line-height: 42px;
}

h2 {
    font-size: 1.5rem;
    line-height: 38px;
}

h3 {
    font-size: 1.375rem;
    line-height: 34px;
}

h4 {
    font-size: 1.125rem;
    line-height: 34px;
}

/* Guide */

.guide-article {
    margin-bottom: 50px;
}

.guide-article table {
    width: 100%;
    margin-bottom: 1.2em;
}
.guide-article table th {
    background-color: #F0F1F4;
    color: #405665;
}
.guide-article table th,
.guide-article table td {
    vertical-align: middle;
    padding: 6px 9px;
    border: 1px solid #ccc;
}

.guide-article table td.centered {
    vertical-align: middle;
    text-align: center;
    padding: 6px 9px;
    border: 1px solid #ccc;
}

.guide-article table th {
    padding: 3px 9px;
}
.guide-article table th.type_this {
    width: 20%;
}
.guide-article table th.for_this {
    width: 80%;
}

.guide-article img {
    margin-top: 10px;
    margin-bottom: 12px;
    border: 1px solid #bbb;
}
.guide-article img.border.none {
    border-color: #fff;
}
.guide-article img.border {
    border: 1px solid #ddd;
}
.guide-article img.border.dark {
    border-color: black;
}

.guide-article ul,
.guide-article ol {
    padding-left: 20px;
    padding-right: 20px;
}
.guide-article ul li,
.guide-article ol li {
    margin-bottom: 1em;
}

.append-mode-example {
    background-color: #F0F1F4;
    color: #405665;
    border: 1px solid #ddd;
    padding: 12px 0 10px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 1.5em;
    border-radius: 5px;
    font-family: Menlo, Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
}

.why-duo-mobile {
    text-align: center;
    float: right;
    margin: 0 0 20px 20px;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    padding: 10px 15px;
    color: #405665;
    width: 180px;
    background-color: white;
    border: none;
    border-left: 1px solid #ddd;
    text-align: left;
}
.why-duo-mobile p {
    margin-bottom: 8px;
}
.why-duo-mobile ul li {
    line-height: 15px;
    margin-bottom: 4px;
}

.phone-platforms {
    text-align: center;
    margin-bottom: 1.3em;
    border: 1px solid #eee;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
.phone-platforms a {
    font-weight: 600;
}

.note {
    color: #555;
}
span.label {
    font-weight: 600;
}

/* Toggle nav */
.toggle-nav-container {
    margin-bottom: 25px;
}
.toggle-nav-container a {
    display: block;
    margin: 10px auto;
    text-align: center;
    background-color: #eee;
    padding: 10px;
}

/* Jump to top */

.jump-container {
    margin-top: 30px;
}
.jump-container a {
    display: block;
    margin: 10px auto;
    text-align: center;
    background-color: #eee;
    padding: 10px;
}

/* Table of Contents */

#toc_container {
    background: #eee none repeat scroll 0 0;
    border-radius: 10px;
    border: 1px solid #363f44;
    display: table;
    padding: 5px;
    width: auto;
}

.toc_title {
    font-weight: 700;
    text-align: left;
    margin-bottom: 0.1em;
}

#toc_container li,
#toc_container ul,
#toc_container ul li{
    list-style: none outside;
    padding-left: 0px;
    padding-right: 10px;
    margin-bottom: 0.1em;
    font-size: .95em;
    line-height: 1.5;
}

/* Return to Top button */

#topButton {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 0px; /* Match localize widget*/
    right: 30px;
    z-index: 99;
    border: 2px solid #363f44;
    color: #363f44;
    background-color: #eee;
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 12px 20px;
    border-radius: 4px 4px 0 0; /* Match localize widget*/
    font-size: 15px; /* Match localize widget*/
}

#topButton:hover {
    background-color: #363f44; /* Color background on hover */
    color: #ffffff; /* White text on hover */
}