$brand-colour: #0061aa; $nav-header-background-color: $brand-colour; $nav-header-height: 104px; $nav-background-color: f5f5f5; $nav-width: 300px;

input::-ms-clear, input::-ms-reveal {

display: none !important;

}

.docslayout {

height: auto;
overflow-x: hidden;
background-color: #2B2E31;

&.nav-open {
        overflow: hidden;

        nav,
        header > form {
                display: block;
        }

        header {
                bottom: 0;
        }
}

&::before {
        content: "";
        background-color: #fff;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
}

@media (min-width: 768px) {
        padding: 0 0 0 $nav-width;

        &.nav-open {
                overflow: auto;
        }

        &::after,
        &::before {
                content: "";
                position: fixed;
                top: 0;
                bottom: 0;
                z-index: -1;
        }

        &::after {
                left: 0;
                width: $nav-width;
                background-color: $nav-background-color;
        }

        #search-input,
        &::after {
                box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.1);
        }

        &::before {
                left: $nav-width;
                right: 0;
                background-color: #fff;
        }
}

}

.docsmain {

    max-width: 820px;
padding: 0 25px 20px;
    margin: 20px auto 0 auto;

    ul, ol {
            padding-bottom: 1em;
    }

    pre{    
            white-space: pre;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            background: #404145;
            border-color: #404145;
            color: #C1C2C3; 
            padding: 15px;  
    }

}

.docsheader {

$emblem-size: 35px;
$emblem-vertical-padding: ($nav-header-height - $emblem-size) / 2;
$emblem-horizontal-padding: 20px;

position: absolute;
@media (min-width: 768px) {
        position: fixed;
        overflow: hidden;
}
top: 0; 
left: 0;
right: 0;
overflow-x: hidden;
height: 100%; 
z-index: 1050;
background-color: $nav-background-color;

ul, ol {
        padding: 0;
        margin: 0;
}

h1 {
        padding: $emblem-vertical-padding $emblem-horizontal-padding;
        height: $nav-header-height;
        box-sizing: border-box;
        background-color: $brand-colour;
        color: #fff;
        margin: 0;
        font-size: 1.7rem;
        line-height: 0.8;
        letter-spacing: 0;
        font-weight: 600;
        text-indent: 0;
        @include display-flex();
        @include flex-direction(row);
        @include align-items(center);
        border-bottom: 1px solid rgba(0, 0, 0, 0.075);

        img {
                height: $emblem-size;
                width: $emblem-size;
                margin-right: 15px;
        }
}

.open-nav {
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: 100%;
        width: $emblem-size;
        height: $emblem-size;
        border: 0;
        position: absolute;
        top: $emblem-vertical-padding;
        right: $emblem-horizontal-padding;
        border-radius: 2px;

        &:focus {
                outline: none;
                background-color: rgba(0, 0, 0, 0.05);
        }

        &:hover {
                background-color: rgba(0, 0, 0, 0.1);
        }
}

@media (min-width: 768px) {
        background-color: transparent;
        width: $nav-width;
        right: auto;
        bottom: auto;

        h1 {
                box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.1);
        }
}

}

.content {

position: relative;
background-color: #fff;
color: #4c4c4c;

h3::before {
        content: "";
        margin: 60px 0;
}

}

.page-header {

h2,
h3 {
        margin: 0;
        line-height: 1.2;
        letter-spacing: -1px;
}

h2 {
        font-size: 26px;
        margin-left: -1px;
        color: #888;
        letter-spacing: 0;
}

h3 {
        font-size: 54px;
        margin-left: -4px;
}

@media (min-width: 768px) {
        h2 {
                font-size: 26px;
        }

        h3 {
                font-size: 54px;
        }
}

}

nav > ul {

padding:  10px 0px;

& + ul {
        border-top: 1px solid rgba(0, 0, 0, 0.075);
}

}

.nav-item {

display: block;
font-family: "Open Sans", sans-serif;
line-height: 1;
margin: 0;

nav:not(.full-navigation) & > ul {
        display: none;
}

nav:not(.full-navigation) &.current > ul {
        display: block;
}

> a {
        color: #666;
        text-decoration: none;
        font-size: 14px;
        padding: 10px 0px 10px 40px;
        display: block;
}

&.current > a,
> a:active,
> a:hover {
        color: #111;
}

&.top-level > a {
        line-height: 1.5;
        font-weight: 600;
        padding-left: 20px;
}

}

.settings-panel-example {

@extend p;
@include display-flex();
@include flex-direction(column);

.example {
        max-width: 300px;
        background-color: #fafafa;
        margin: 0;
        padding: 0;
        font-size: 0;
        line-height: 1;
        border-radius: 2px;
        overflow: hidden;
}

@media (min-width: 960px) {
        @include flex-direction(row);

        .details {
                @include flex(1);
                margin-right: 20px;
        }

        p + .highlight > pre {
                margin-bottom: 0;
        }

        .example {
                @include flex(0 0 300px);
                max-width: 100%;
        }
}

}

.highlight {

margin-left: 0;
margin-right: 0;
background: none !important;
padding: 0 !important;

}

h3 + .warning {

margin-top: 1.75em;

}

h4 code {

background: $nav-background-color;
color: #4c4c4c;
background-color: transparent;
font-weight: 700;
padding: 0;
font-size: 1.1em;
line-height: 1;

}

h4 svg {

vertical-align: middle;
margin-right: 6px;
position: relative;
top: -2px;
fill: #2E2E2E;
height: 23px;

}

.required {

position: relative;

}

.required::after {

content: "REQUIRED";
font-size: 12px;
position: absolute;
top: 5px;
line-height: 1;
color: $brand-colour;
padding-left: 5px;

}

search-results {

margin: 0;
padding: 0;

li {
        list-style: none;
        margin: 0;
        padding: 0;

        h4 {
                font-size: 20px;
        }

        p {
                line-height: 1.5;
        }
}
li::before {
        content: "" !important;
}

}

search-input {

-webkit-appearance: none;
display: block;
margin: 0;
padding: 10px 20px 10px 15px;
width: 100%;
box-sizing: border-box;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
border-left: 5px solid transparent;
font-size: 15px;
font-weight: 600;
line-height: 1.8;

&:focus {
        outline: none;
        border-left-color: $brand-colour;
}

}

.changelog {

&,
> div {
        margin: 0;
        padding: 0;
        list-style: none;
}

.date {
        color: #888;
        font-style: italic;
}

}

.badge {

font-family: "Open Sans", sans-serif;
padding: 2px 5px;
text-transform: uppercase;
font-size: 0.8rem;
border-radius: 2px;
background: #eee;
font-weight: bold;

&.major {
        background: $brand-colour;
        color: #fff;
}

}

blockquote {

border-left: 5px solid #FD0;
padding: 10px 15px;
margin-right: -10px;
background-color: #e6eff7;
border-color: $brand-colour;
font-size: 16px !important;

p:last-child {
        margin-bottom: 0;
}

}

img {

max-width: 100%;
height: auto;

}

.editor-link {

display: none;
margin-top: 0;

.btn {
        border: 0;
        border-radius: 2px;
        width: 100%;
        max-width: 500px;
        box-sizing: border-box;
        font-size: 2rem;
        text-decoration: none;
        padding: 10px 15px;
        margin: 0;
        font-size: 18px;
        cursor: pointer;
        background-color: #f7e064;
        color: #333;
        box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);

        &:hover {
                background-color: #f4d525;
                color: #333;
        }
}

}

.cms-editor-active .editor-link {

display: block;

}

table {

width: 100%;
margin-bottom: 1.75em;

}

tr {

border-bottom: 1px solid #EEE;

}

tr:nth-child(even) {

background: #fcfcfc;

}

td, th {

padding: 8px;
text-align: left;

}

th {

padding-bottom: 4px;

}