body,
html {
    font-size: 17px;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Avenir', sans-serif;
}

a {
    color: inherit;
}

/* Font */
@font-face {
    font-family: 'Avenir';
    src: url('./fonts/avenir/Avenir-Light.eot');
    src: url('./fonts/avenir/Avenir-Light.eot?#iefix') format('embedded-opentype'),
        url('./fonts/avenir/Avenir-Light.woff2') format('woff2'),
        url('./fonts/avenir/Avenir-Light.woff') format('woff'),
        url('./fonts/avenir/Avenir-Light.ttf') format('truetype'),
        url('./fonts/avenir/Avenir-Light.svg#Avenir-Light') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Book';
    src: url('./fonts/avenir/Avenir-Book.eot');
    src: url('./fonts/avenir/Avenir-Book.eot?#iefix') format('embedded-opentype'),
        url('./fonts/avenir/Avenir-Book.woff2') format('woff2'),
        url('./fonts/avenir/Avenir-Book.woff') format('woff'),
        url('./fonts/avenir/Avenir-Book.ttf') format('truetype'),
        url('./fonts/avenir/Avenir-Book.svg#Avenir-Book') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir';
    src: url('./fonts/avenir/Avenir-Roman.eot');
    src: url('./fonts/avenir/Avenir-Roman.eot?#iefix') format('embedded-opentype'),
        url('./fonts/avenir/Avenir-Roman.woff2') format('woff2'),
        url('./fonts/avenir/Avenir-Roman.woff') format('woff'),
        url('./fonts/avenir/Avenir-Roman.ttf') format('truetype'),
        url('./fonts/avenir/Avenir-Roman.svg#Avenir-Roman') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir';
    src: url('./fonts/avenir/Avenir-Medium.eot');
    src: url('./fonts/avenir/Avenir-Medium.eot?#iefix') format('embedded-opentype'),
        url('./fonts/avenir/Avenir-Medium.woff2') format('woff2'),
        url('./fonts/avenir/Avenir-Medium.woff') format('woff'),
        url('./fonts/avenir/Avenir-Medium.ttf') format('truetype'),
        url('./fonts/avenir/Avenir-Medium.svg#Avenir-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}


@font-face {
    font-family: 'Avenir';
    src: url('./fonts/avenir/Avenir-Heavy.eot');
    src: url('./fonts/avenir/Avenir-Heavy.eot?#iefix') format('embedded-opentype'),
        url('./fonts/avenir/Avenir-Heavy.woff2') format('woff2'),
        url('./fonts/avenir/Avenir-Heavy.woff') format('woff'),
        url('./fonts/avenir/Avenir-Heavy.ttf') format('truetype'),
        url('./fonts/avenir/Avenir-Heavy.svg#Avenir-Heavy') format('svg');
    font-weight: 900;
    font-style: normal;
}

/* <pre> single line */
.single-line pre {
    display: flex;
    margin: 0;
    padding: 0;
    background: transparent;
}

.single-line pre code {
    color: #F4511E;
    text-shadow: none;
    padding: 5px 0;
}

body .single-line .toolbar {
    width: auto;
    right: 2px;
    top: 0;
}

body .single-line .toolbar-item {
    padding: 0;
    margin-right: 30px;
    background-image: url(/assets/copy-to-clipboard.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    width: 38px;
    border-radius: 20px;
    color: transparent;
}

body .single-line .toolbar-item a {
    position: absolute;
    padding: 0 !important;
    padding-right: 83px !important;
    right: 0px;
    top: 4px;
    color: transparent;
    background: transparent;
    line-height: 40px;
}

body .single-line .toolbar-item a:hover {
    color: #bababa;
    background-color: transparent;
}


body.main_page main h2 {
    max-width: 800px
}

header#header {
    width: calc(100% - 220px);
}

div#sidenav {
    width: 220px;
}

.sidenav__link.un-load {
    opacity: 1;
}

div#main_wrapper {
    min-height: calc(100vh - 160px);
}

@media (min-width: 1200px) {
    .documentation_page footer {
        width: calc(100% - 220px);
        margin-left: auto;
    }


}

@media (max-width: 1200px) {

    body.nav-open #sidenav,
    body.nav-open #sidenav-placement {
        width: 170px;
        min-width: 170px;
        max-width: 90%;
        display: flex !important;
    }

    body.nav-open .sidenavTrigger {
        display: none;
    }

    body.nav-open .sidenavClose {
        display: flex !important;
    }

    header#header {
        width: 100%;
    }
}