body{
    background-color: #666;
    margin: 0;
    font-family: 'Open Sans',sans-serif;
}
a{
    text-decoration: none;
}
#single-codelab-wrapper header{
    background-color: #222;
    font-size: 0;
}
header .codelab-left-head,
header .codelab-right-head{
    width: 50%;
    padding: 6px 15px;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}
header .site-logo-circle{
    width: 30px;
    height: 30px;
    margin: 0 10px 0 0;
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.3s ease;
}

header .site-logo-circle:hover {
    transform: rotate(360deg);
}
header .site-logo-circle img{
    width: 100%;
}
header .single-codelab-title{
    color: #fff;
    font-size: 19px;
    padding: 3px 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
}

header .codelab-right-head{
    text-align: right;
    padding: 8px 15px 7.5px;
    margin: 0;
    list-style: none;
    z-index: 1;
}
header .codelab-right-head > li{
    color: #fff;
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 2px 10px 3px;
    margin: 0 0 0 10px;
    background: linear-gradient(#555,#666);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
}
header .codelab-right-head > li.active{
    color: red;
}
header .codelab-right-head > li:hover{
    box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}
header .codelab-right-head > li > a{
    color: #fff;
}
header .codelab-right-head input{
    display: none;
}
header .codelab-right-head ul.submenu{
    /*display: none;*/
    font-size: 13px;
    position: absolute;
    right: 0;
    top: 100%;
    background: linear-gradient(#444,#666);
    border-radius: 5px;
    padding: 10px;
    margin: 0;
    list-style: none;
    transform: scaleY(0);
    transform-origin: top center;
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    z-index: 1;
}
header.footer .codelab-right-head ul.submenu{
    top: auto;
    bottom: 100%;
    transform-origin: bottom center;
}

header .codelab-right-head ul.submenu a{
    color: #fff;
    font-size: 14px;
    padding: 3px 10px;
    border-radius: 3px;
    display: block;
    transition: all 0.3s ease;
}
header .codelab-right-head ul.submenu a:hover{
    background-color: #777;
}

/*position the label*/
header .codelab-right-head label {
    position: relative;
    display: block;
    cursor: pointer;
    margin: 0;
}

/*show the submenu when input is checked*/
header .codelab-right-head input:checked ~ ul.submenu {
    opacity: 1;
    transform: scaleY(1);
    top: calc(100% + 5px);
}
header.footer .codelab-right-head input:checked ~ ul.submenu {
    top:auto;
    bottom: calc(100% + 5px);
    opacity: 1;
    transform: scaleY(1);
}



.editor{
    background-color: #2b2626;
    width: 100%;
    height: 100%;
    font-size: 14px;
    z-index: 0;
}

.editor.code_full_view{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100vw;

}

/*#single-codelab-wrapper section.full{
    height: 50px !important;
   
}*/

iframe{
    border: none;
    width: 100%;
    height: calc(100vh - 45px);
    background: #fff;
}

iframe.full{
    height: calc(100vh - 50px);
}
section.full{
    height: calc(100vh - 45px);
}




.gutter {
    /* background-color: transparent; */
    background-repeat: no-repeat;
    background-position: 50%;
    height: 500px;
    background-color: #777;
}

.gutter.gutter-horizontal {
    cursor: col-resize;
}

.gutter.gutter-vertical {
    cursor: row-resize;
    background-color: #555;
}
/*
.split.split-horizontal,
.gutter.gutter-horizontal {
    height: 100%;
    float: left;
}
.split {
    border: 1px solid red;
    background-color: #666;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*overflow-y: auto;*/
    /*overflow-x: hidden;*/
    /* overflow: hidden; */
    /* height: 500px; */
/*} */

.split > div{
    display: inline-block;
    vertical-align: top;
    height: 100%;
}

.split.split-horizontal{
    height: calc(100vh - 44px);
}

.split.split-vertical{
    height: calc(100vh - 37px);
}
.split.split-vertical > div{
    display: block;
}

.split-content{
    background-color: #666;
    overflow: hidden;
}

.col-head{
    color: #fff;
    margin: 0;
    padding: 3px 5px;
    display: inline-block;
    font-size: 17px;
    float: left;
}

.split  .expand,
.split  .contract{
    color: #fff;
    font-size: 14px;
    margin: 4px 5px 0 4px;
    float: right;
    cursor: pointer;
}
.split .contract{
    position: fixed;
    top: 5px;
    right: 5px;
    z-index: 10;
}
.split .drop-down{
    float: right;
    display: inline-block;
    vertical-align: top;
    width: 23px;
    line-height: 1;
    margin: 6px 5px 0 4px;
    text-align: center;
    background-color: rgba(255,255,255,0.5);
    border-radius: 2px;
    position: relative;
}
.split .drop-down input.js,
.split .drop-down input{
    display: none;
}
.split .drop-down ul.submenu,
.split .drop-down ul.submenu.js{
    background: linear-gradient(#444,#666);
    white-space: nowrap;
    padding: 5px;
    margin: 0;
    list-style: none;
    opacity: 1;
    transform: scaleY(0);
    transform-origin: top center;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1;
    transition: all 0.3s ease;
}

.split .drop-down ul.submenu a,
.split .drop-down ul.submenu.js a{
    color: #fff;
    font-size: 13px;
    padding: 2px 5px;
    margin: 0 0 3px;
    display: block;
}

/*position the label*/
.split .drop-down label {
    position: relative;
    display: block;
    cursor: pointer;
    margin: 0;
}

/*show the submenu when input is checked*/
.split .drop-down input:checked ~ ul.submenu,
.split .drop-down input.js:checked ~ ul.submenu.js {
    opacity: 1;
    transform: scaleY(1);
}

.ace_editor{
    width: 100% !important;
    height: 100% !important;
    /* overflow-y: scroll; */
}

.ace_scrollbar-v::-webkit-scrollbar {
    width: 7px;
}

/* Track */
.ace_scrollbar-v::-webkit-scrollbar-track {
    /*background: tra;*/
}

/* Handle */
.ace_scrollbar-v::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
.ace_scrollbar-v::-webkit-scrollbar-thumb:hover {
    background: #555;
}
footer{
font-size: 14px;
padding: 3px 15px 4px;
}

/*========================*/
/* Fontello CSS Start */
/*========================*/

@font-face {
    font-family: 'fontello';
    src: url('../fonts/fontello.eot?25461311');
    src: url('../fonts/fontello.eot?25461311#iefix') format('embedded-opentype'),
    url('../fonts/fontello.woff2?25461311') format('woff2'),
    url('../fonts/fontello.woff?25461311') format('woff'),
    url('../fonts/fontello.ttf?25461311') format('truetype'),
    url('../fonts/fontello.svg?25461311#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?25461311#fontello') format('svg');
  }
}
*/

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-search:before { content: '\e800'; } /* '' */
.icon-heart:before { content: '\e801'; } /* '' */
.icon-heart-empty:before { content: '\e802'; } /* '' */
.icon-star:before { content: '\e803'; } /* '' */
.icon-star-empty:before { content: '\e804'; } /* '' */
.icon-star-half:before { content: '\e805'; } /* '' */
.icon-user:before { content: '\e806'; } /* '' */
.icon-users:before { content: '\e807'; } /* '' */
.icon-plus:before { content: '\e808'; } /* '' */
.icon-cancel-circled2:before { content: '\e809'; } /* '' */
.icon-cancel-circled:before { content: '\e80a'; } /* '' */
.icon-cancel:before { content: '\e80b'; } /* '' */
.icon-ok-circled2:before { content: '\e80c'; } /* '' */
.icon-ok-circled:before { content: '\e80d'; } /* '' */
.icon-ok:before { content: '\e80e'; } /* '' */
.icon-th-list:before { content: '\e80f'; } /* '' */
.icon-camera:before { content: '\e810'; } /* '' */
.icon-picture:before { content: '\e811'; } /* '' */
.icon-minus-circled:before { content: '\e812'; } /* '' */
.icon-link:before { content: '\e813'; } /* '' */
.icon-home:before { content: '\e814'; } /* '' */
.icon-attach:before { content: '\e815'; } /* '' */
.icon-lock:before { content: '\e816'; } /* '' */
.icon-lock-open:before { content: '\e817'; } /* '' */
.icon-eye:before { content: '\e818'; } /* '' */
.icon-pin:before { content: '\e819'; } /* '' */
.icon-forward:before { content: '\e81a'; } /* '' */
.icon-download:before { content: '\e81b'; } /* '' */
.icon-thumbs-down:before { content: '\e81c'; } /* '' */
.icon-thumbs-up:before { content: '\e81d'; } /* '' */
.icon-bookmark:before { content: '\e81e'; } /* '' */
.icon-tags:before { content: '\e81f'; } /* '' */
.icon-export:before { content: '\e820'; } /* '' */
.icon-pencil:before { content: '\e821'; } /* '' */
.icon-edit:before { content: '\e822'; } /* '' */
.icon-print:before { content: '\e823'; } /* '' */
.icon-comment:before { content: '\e824'; } /* '' */
.icon-chat:before { content: '\e825'; } /* '' */
.icon-location:before { content: '\e826'; } /* '' */
.icon-trash-empty:before { content: '\e827'; } /* '' */
.icon-phone:before { content: '\e828'; } /* '' */
.icon-folder:before { content: '\e829'; } /* '' */
.icon-cog:before { content: '\e82a'; } /* '' */
.icon-zoom-out:before { content: '\e82b'; } /* '' */
.icon-zoom-in:before { content: '\e82c'; } /* '' */
.icon-resize-small:before { content: '\e82d'; } /* '' */
.icon-resize-full:before { content: '\e82e'; } /* '' */
.icon-login:before { content: '\e82f'; } /* '' */
.icon-logout:before { content: '\e830'; } /* '' */
.icon-up-circled2:before { content: '\e831'; } /* '' */
.icon-right-dir:before { content: '\e832'; } /* '' */
.icon-left-dir:before { content: '\e833'; } /* '' */
.icon-up-dir:before { content: '\e834'; } /* '' */
.icon-down-dir:before { content: '\e835'; } /* '' */
.icon-leaf:before { content: '\e836'; } /* '' */
.icon-check:before { content: '\e837'; } /* '' */
.icon-ok-1:before { content: '\e838'; } /* '' */
.icon-spin6:before { content: '\e839'; } /* '' */
.icon-cancel-1:before { content: '\e83a'; } /* '' */
.icon-right-open:before { content: '\e83b'; } /* '' */
.icon-left-open:before { content: '\e83c'; } /* '' */
.icon-bookmark-empty:before { content: '\f097'; } /* '' */
.icon-phone-squared:before { content: '\f098'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-github-circled:before { content: '\f09b'; } /* '' */
.icon-resize-full-alt:before { content: '\f0b2'; } /* '' */
.icon-pinterest-circled:before { content: '\f0d2'; } /* '' */
.icon-gplus:before { content: '\f0d5'; } /* '' */
.icon-mail-alt:before { content: '\f0e0'; } /* '' */
.icon-linkedin:before { content: '\f0e1'; } /* '' */
.icon-download-cloud:before { content: '\f0ed'; } /* '' */
.icon-bell-alt:before { content: '\f0f3'; } /* '' */
.icon-desktop:before { content: '\f108'; } /* '' */
.icon-laptop:before { content: '\f109'; } /* '' */
.icon-tablet:before { content: '\f10a'; } /* '' */
.icon-mobile:before { content: '\f10b'; } /* '' */
.icon-quote-left:before { content: '\f10d'; } /* '' */
.icon-quote-right:before { content: '\f10e'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */
.icon-star-half-alt:before { content: '\f123'; } /* '' */
.icon-direction:before { content: '\f124'; } /* '' */
.icon-help:before { content: '\f128'; } /* '' */
.icon-attention-alt:before { content: '\f12a'; } /* '' */
.icon-rocket:before { content: '\f135'; } /* '' */
.icon-lock-open-alt:before { content: '\f13e'; } /* '' */
.icon-link-ext-alt:before { content: '\f14c'; } /* '' */
.icon-euro:before { content: '\f153'; } /* '' */
.icon-pound:before { content: '\f154'; } /* '' */
.icon-dollar:before { content: '\f155'; } /* '' */
.icon-rupee:before { content: '\f156'; } /* '' */
.icon-yen:before { content: '\f157'; } /* '' */
.icon-doc-inv:before { content: '\f15b'; } /* '' */
.icon-thumbs-up-alt:before { content: '\f164'; } /* '' */
.icon-thumbs-down-alt:before { content: '\f165'; } /* '' */
.icon-youtube:before { content: '\f167'; } /* '' */
.icon-youtube-play:before { content: '\f16a'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */
.icon-tumblr:before { content: '\f173'; } /* '' */
.icon-android:before { content: '\f17b'; } /* '' */
.icon-skype:before { content: '\f17e'; } /* '' */
.icon-right-circled2:before { content: '\f18e'; } /* '' */
.icon-left-circled2:before { content: '\f190'; } /* '' */
.icon-graduation-cap:before { content: '\f19d'; } /* '' */
.icon-cube:before { content: '\f1b2'; } /* '' */
.icon-cubes:before { content: '\f1b3'; } /* '' */
.icon-recycle:before { content: '\f1b8'; } /* '' */
.icon-file-code:before { content: '\f1c9'; } /* '' */
.icon-paper-plane:before { content: '\f1d8'; } /* '' */
.icon-paper-plane-empty:before { content: '\f1d9'; } /* '' */
.icon-sliders:before { content: '\f1de'; } /* '' */
.icon-share:before { content: '\f1e0'; } /* '' */
.icon-trash:before { content: '\f1f8'; } /* '' */
.icon-toggle-off:before { content: '\f204'; } /* '' */
.icon-toggle-on:before { content: '\f205'; } /* '' */
.icon-pinterest:before { content: '\f231'; } /* '' */
.icon-whatsapp:before { content: '\f232'; } /* '' */
.icon-user-plus:before { content: '\f234'; } /* '' */
.icon-github-squared:before { content: '\f300'; } /* '' */
.icon-twitter-squared:before { content: '\f304'; } /* '' */
.icon-facebook-squared:before { content: '\f308'; } /* '' */
.icon-instagram-1:before { content: '\f31e'; } /* '' */

/*========================*/
/* Fontello CSS End */
/*========================*/