#header,#sidedrawer{
    position:fixed;
    top:0;
    z-index:2;
    background-color:#363636;
}
#content-wrapper,#footer{
    margin-left:0;
    transition:margin-left .2s
}
.highlight .c,.highlight .cm,.highlight .ge,.highlight .sd{
    font-style:italic
}
#f-features-list,.color-group ul{
    list-style-type:none
}
body,html{
    height:100%;
    background-color:#eee;
    font-family:"Helvetica Neue",Helvetica,Arial,Verdana,Tahoma
}
body,buttons,html,input,textarea{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-shadow:1px 1px 1px rgba(0,0,0,.004)
}
#header{
    right:0;
    left:0;
    transition:left .2s
}
#sidedrawer{
    bottom:0;
    width:200px;
    left:-200px;
    overflow:auto;
    background-color:#363636;
    color:#d2d2d2;
    transition:-webkit-transform .2s;
    transition:transform .2s;
    transition:transform .2s,-webkit-transform .2s
}
#sidedrawer.active{
    -webkit-transform:translate(200px);
    transform:translate(200px)
}
#content-wrapper{
    background-color:#fff;
    min-height:100%;
    /*overflow-x:hidden;*/
    margin-bottom:-160px;
    padding-bottom:160px
}
#footer{
    height:160px
}
@media (min-width:768px){
    #header{
        left:200px
    }
    #sidedrawer{
        -webkit-transform:translate(200px);
        transform:translate(200px)
    }
    #content-wrapper,#footer{
        margin-left:200px
    }
    body.hide-sidedrawer #header{
        left:0
    }
    body.hide-sidedrawer #sidedrawer{
        -webkit-transform:translate(0);
        transform:translate(0)
    }
    body.hide-sidedrawer #content-wrapper,body.hide-sidedrawer #footer{
        margin-left:0
    }
}
.space-top+h1{
    color:rgba(0,0,0,.54)
}
p{
    font-size:15px;
    line-height:25px
}
.space-top{
    height:20px
}
.space-bottom{
    height:40px
}
#appbar-more-vert,#appbar-sidenav-hide,#appbar-sidenav-show{
    width:31px;
    height:31px;
    line-height:31px;
    display:inline-block;
    color:#FFF;
    cursor:pointer;
    text-align:center;
    border-radius:50%
}
.btn-accent{
    color:#FFF;
    background-color:#FF80AB
}
.btn-accent:hover{
    color:#FFF;
    background-color:#ff76a4
}
#appbar-more-vert:hover,#appbar-sidenav-hide:hover,#appbar-sidenav-show:hover{
    background-color:rgba(0,0,0,.27);
    text-decoration:none
}
#appbar,#footer{
    background-color:#78909C
}
#header.active,.header-shadow{
    box-shadow:0 2px 5px rgba(0,0,0,.26);
    transition:box-shadow .2s
}
#appbar{
    color:#FFF
}
#appbar .icon-keyboard-arrow-right{
    font-size:20px;
    position:relative;
    top:1px
}
#appbar-sidenav-hide,#appbar-sidenav-show{
    position:relative;
    left:-2px;
    margin-right:18px
}
#appbar-sidenav-hide .icon-menu,#appbar-sidenav-show .icon-menu{
    font-size:24px;
    position:relative;
    top:3px
}
#appbar-social-links{
    display:inline-block;
    position:relative;
    top:2px
}
#appbar-social-links a{
    margin-left:6px
}
#appbar-social-links a:first-child{
    margin-right:2px
}
#appbar-social-links a:hover{
    text-decoration:none
}
#appbar-social-links i{
    color:#FFF;
    font-size:20px
}
#appbar-more-vert .icon-more-vert{
    font-size:24px;
    position:relative;
    top:3px
}
.appbar-brand{
    font-size:20px;
    color:#fff
}
.appbar-brand:hover{
    text-decoration:none;
    color:#fff
}
#footer{
    padding-top:10px;
    padding-bottom:80px
}
#footer a{
    color:#FFF
}
#sidenav h2{
    padding-left:22px;
    margin:0
}
#sidenav h2 a{
    color:rgba(0,0,0,.38)
}
#sidenav h2 a:hover{
    text-decoration:none
}
#sidenav ul{
    list-style:none
}
#sidenav>ul{
    padding-left:0;
    font-size:13px
}
#sidenav>ul>li:first-child{
    padding-top:15px
}
#sidenav>ul a{
    color:rgba(0,0,0,.87)
}
#sidenav strong{
    display:block;
    padding:15px 22px;
    cursor:pointer
}
#sidenav strong:hover{
    background-color:#E0E0E0
}
#sidenav strong+ul>li{
    padding:6px 0
}
#sidenav strong:not(.active)+ul{
    display:none
}
#sidenav a.active{
    color:#C51162
}
#g-flashes{
    position:fixed;
    top:0;
    right:0;
    z-index:2
}
#g-flashes li{
    font-size:13px;
    color:#FFF;
    background-color:#000;
    padding:2px 6px;
    margin:2px
}
.highlight pre{
    padding:10px;
    font-size:.9em
}
.varname,p code{
    background-color:#F5F5F5;
    color:#F44336;
    padding:1px
}
#newsletter-banner{
    position:fixed;
    top:50px;
    right:30px;
    z-index:2;
    width:320px;
    padding:20px 20px 30px;
    background-color:#FFF
}
#newsletter-banner .mui-btn{
    margin-bottom:0
}
@media (max-width:544px){
    #newsletter-banner{
        top:0;
        right:0;
        width:100%
    }
    #newsletter-banner form{
        display:table
    }
    #newsletter-banner .mui-form-group{
        display:table-cell;
        width:100%;
        padding-right:20px
    }
    #newsletter-banner .mui-btn{
        margin-bottom:6px
    }
}
#newsletter-banner-close{
    position:absolute;
    right:10px;
    top:0;
    cursor:pointer
}
#newsletter-banner-social{
    margin-top:5px;
    margin-bottom:-10px
}
#newsletter-banner-social>a{
    margin-right:10px
}
#newsletter-banner-social>a:hover{
    text-decoration:none
}
#newsletter-banner-social>a:hover>i{
    color:#757575
}
#newsletter-banner-social>a>i{
    font-size:35px;
    color:#9E9E9E
}
.highlight .hll{
    background-color:#ffc
}
.highlight{
    background:#f8f8f8
}
.highlight .c{
    color:#408080
}
.highlight .k{
    color:green;
    font-weight:700
}
.highlight .o{
    color:#666
}
.highlight .cm{
    color:#408080
}
.highlight .cp{
    color:#BC7A00
}
.highlight .c1,.highlight .cs{
    color:#408080;
    font-style:italic
}
.highlight .gd{
    color:#A00000
}
.highlight .gr{
    color:red
}
.highlight .gh{
    color:navy;
    font-weight:700
}
.highlight .gi{
    color:#00A000
}
.highlight .go{
    color:#888
}
.highlight .gp{
    color:navy;
    font-weight:700
}
.highlight .gs{
    font-weight:700
}
.highlight .gu{
    color:purple;
    font-weight:700
}
.highlight .gt{
    color:#04D
}
.highlight .kc,.highlight .kd,.highlight .kn{
    color:green;
    font-weight:700
}
.highlight .kp{
    color:green
}
.highlight .kr{
    color:green;
    font-weight:700
}
.highlight .kt{
    color:#B00040
}
.highlight .m{
    color:#666
}
.highlight .s{
    color:#BA2121
}
.highlight .na{
    color:#7D9029
}
.highlight .nb{
    color:green
}
.highlight .nc{
    color:#00F;
    font-weight:700
}
.highlight .no{
    color:#800
}
.highlight .nd{
    color:#A2F
}
.highlight .ni{
    color:#999;
    font-weight:700
}
.highlight .ne{
    color:#D2413A;
    font-weight:700
}
.highlight .nf{
    color:#00F
}
.highlight .nl{
    color:#A0A000
}
.highlight .nn{
    color:#00F;
    font-weight:700
}
.highlight .nt{
    color:green;
    font-weight:700
}
.highlight .nv{
    color:#19177C
}
.highlight .ow{
    color:#A2F;
    font-weight:700
}
.highlight .w{
    color:#bbb
}
.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{
    color:#666
}
.highlight .s2,.highlight .sb,.highlight .sc{
    color:#BA2121
}
.highlight .sd{
    color:#BA2121
}
.highlight .se{
    color:#B62;
    font-weight:700
}
.highlight .sh{
    color:#BA2121
}
.highlight .si{
    color:#B68;
    font-weight:700
}
.highlight .sx{
    color:green
}
.highlight .sr{
    color:#B68
}
.highlight .s1{
    color:#BA2121
}
.highlight .ss{
    color:#19177C
}
.highlight .bp{
    color:green
}
.highlight .vc,.highlight .vg,.highlight .vi{
    color:#19177C
}
.highlight .il{
    color:#666
}
#g-modal-wrapper{
    min-height:100%;
    height:auto!important;
    height:100%;
    margin-bottom:-50px;
    padding-bottom:50px
}
#g-modal-wrapper .panel{
    margin-bottom:20px
}
#modal-header-brand{
    color:#777;
    margin:20px 0;
    display:inline-block;
    font-size:25px;
    font-weight:700
}
.color-group,.color-group-main{
    font-weight:500
}
#modal-header-brand:hover{
    text-decoration:none
}
#modal-header-brand img{
    height:30px;
    width:30px;
    position:relative;
    top:-3px
}
#g-modal-footer{
    height:50px;
    text-align:center
}
#g-modal-footer a{
    color:#333
}
#f-hero-welcome .mui--text-title a,.f-bg-dark h4,.f-bg-dark p{
    color:#FFF
}
#f-hero{
    background-color:#78909C
}
#f-hero-welcome .mui--text-title{
    max-width:500px;
    margin:0 auto;
    font-weight:500
}
#f-mui-logo{
    display:inline-block;
    margin:0 0 35px;
    height:101px;
    width:101px;
    border-radius:50%;
    color:#FFF;
    background-color:#FF80AB;
    line-height:101px;
    font-size:35px;
    cursor:default;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.f-bg-medium{
    background-color:#E0E0E0
}
.f-bg-dark{
    background-color:#9E9E9E
}
#f-buttons{
    margin:35px 0 0
}
#f-buttons a{
    width:196px;
    margin-left:4px;
    margin-right:4px
}
#f-download-btn{
    text-transform:none
}
.f-panel .highlight{
    background-color:#fff
}
.f-panel pre{
    padding:0;
    margin:0
}
#hero-panel{
    margin-top:20px
}
#f-welcome .icon-mui-logo{
    font-size:101px;
    color:#ff4081;
    position:relative;
    top:4px;
    display:block;
    margin:25px 0 45px
}
#f-welcome .mui--type-title{
    max-width:650px;
    margin:0 auto
}
#f-newsletter-form{
    padding:5px 0 25px
}
#f-newsletter-form input::-webkit-input-placeholder{
    color:rgba(0,0,0,.56)
}
#f-newsletter-form input::-moz-placeholder{
    color:rgba(0,0,0,.56)
}
#f-newsletter-form input:-ms-input-placeholder{
    color:rgba(0,0,0,.56)
}
#f-newsletter-form input::placeholder{
    color:rgba(0,0,0,.56)
}
#f-newsletter-form .visible-xs .form-group{
    margin-bottom:5px
}
#f-newsletter-form .mui--hidden-xs{
    display:table;
    width:100%
}
#f-newsletter-form .mui--hidden-xs>div{
    display:table-cell;
    vertical-align:middle;
    white-space:nowrap
}
#f-newsletter-form .mui--hidden-xs>div:nth-child(1){
    width:145px
}
#f-newsletter-form .mui--hidden-xs>div:nth-child(2){
    padding-right:20px
}
#f-newsletter-form .mui--hidden-xs>div:nth-child(3){
    width:120px;
    text-align:right
}
#f-features-list>li>h3{
    margin-left:-27px
}
.sass-variables-table th{
    background-color:#ddd
}
.sass-variables-table td{
    padding-top:5px!important;
    padding-bottom:5px!important
}
.sass-variables-table td:nth-child(1){
    color:#7D9029;
    white-space:nowrap
}
.sass-variables-table td:nth-child(2){
    color:#00F
}
.sass-variables-table em{
    color:#000
}
.sass-variables-table-lastrow td{
    padding-bottom:15px
}
.highlight .err{
    border:none
}
.color-group{
    margin-bottom:50px
}
.color-group-main,.color-group-white>ul:first-child{
    margin-bottom:5px
}
.color-group ul{
    padding-left:0
}
.color-group li{
    padding:15px
}
.color-group-main>div:nth-child(2){
    margin-top:55px
}
.color-group-white>ul{
    background-color:#eee;
    padding:0
}
.color-group-white li{
    border:1px solid #eee;
    padding:14px 15px
}
[class*=" icon-"],[class^=icon-]{
    font-family:icomoon;
    speak:none;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-transform:none;
    line-height:1;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.icon-email:before{
    content:"\e600"
}
.icon-keyboard-arrow-right:before{
    content:"\e604"
}
.icon-menu:before{
    content:"\e603"
}
.icon-more-vert:before{
    content:"\e605"
}
.icon-twitter:before{
    content:"\f099"
}
.icon-github:before{
    content:"\f09b"
}