html, body{height: 100%; }
html{overflow: auto;}
::-webkit-scrollbar {
  width: 4px; height: 4px;
}
::-webkit-scrollbar-button {
    background: #ababab; display:none;
}
::-webkit-scrollbar-track-piece {
    background: #ababab
}
::-webkit-scrollbar-thumb {
    background: #565656}

​*{box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.clear, .clear:after{clear: both; display: block;float: none}
.afclr:after{display: block;content: ""; clear: both; float: none}
#body_container{height: 100%}
.main_cols{height: 100%;margin-bottom: 0 !important; }
.main_cols .column{height: 100%}
.editor_container{position: relative; height: 500px}
.editor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.library{height: 100%; background: #142f43; color: #fff; padding: 10px; overflow-y: auto;}
.library h2{font-size: 20px; margin-bottom: 20px;}
.library_set{margin-bottom: 20px;}
.library_set h3{text-transform: uppercase; color:#a2acb3; font-size: 16px; font-weight: bold;}
.library_set ul li{margin: 0px -10px}
.library_set ul li a{color: #dfe6ea; font-size: 12px; font-weight: bold; display: block; padding: 5px 10px}
.library_set ul li a:hover{background: #204967}
.color_dot{display: inline-block; width: 10px; height: 10px; vertical-align: middle; margin-right: 5px; border-radius: 10px}
.all_snippets_list{height:calc(100% - 70px) ; overflow-y: auto; padding:0 10px}

.snippet_list{}
.snippet_list li{border-bottom:1px solid #d8d8d8; margin: 0 -10px;  position: relative;}
.snippet_list li a{display: block; padding: 15px 15px; color: #292929 }
.snippet_list li a:hover{background: #efefef}
.snippet_list li.active:before{border-right: 4px solid #48c774; display: block; content: ""; position: absolute; top: 0; bottom: 0; left: 0}
.snippet_list li.active a{/* box-shadow: 0px 3px 4px #00000014 inset;background: #efefef;*/  background: #fff8d7}
.snippet_list h4{font-size: 14px;}
.snippet_list p{color: #a5a5a5; font-size: 12px; margin-top: 10px; }
.panel_o{height: 100%; overflow-y: auto}
.panel_top{height: 70px; background: #fff; border-bottom: 1px solid #d6d6d6; padding:10px 20px}
.panel_top._br{border-right: 1px solid #d6d6d6}
.code_panel{height:calc(100% - 70px) ; overflow-y: auto; background:#f3f3f3; padding: 20px}

.file_section{background: #fff; margin-bottom: 20px; box-shadow:2px 2px 4px #00000030}
.file_title{padding: 20px; border-bottom: 1px solid #efefef}
.file_content{padding: 20px}

.panel_top h4{font-weight: bold;}
.snip_short{padding-bottom: 20px; border-bottom:1px solid #d6d6d6; margin-bottom: 20px}
h3.f_title{font-size: 16px; margin-bottom: 10px}
.file_count{font-size: 13px; background: #999; color: #fff; font-weight: bold; display: inline-block; vertical-align: middle; padding: 2px 7px 3px; border-radius: 10px; line-height: 1}
.hljs{background: none}

.snippet_tags{font-size: 10px; margin-top: 5px}
.tag_sp{display: inline-block; padding: 2px 5px 2px 10px; border:1px solid #bfbfbf; border-radius: 4px; color: #828282; position: relative; margin:0 4px 4px 0; }
.border-color{display: block; position: absolute; top: -1px; bottom: -1px; left: -1px; width: 5px; border-radius: 4px 0 0 4px}

.author_info{font-size: 13px;}
.author{color: #000; font-weight: bold;}
.snippet_date{color: #999;}

.title_type{float: left;}
.file_title._edit{display: none}
.f_title, .f_type{display: inline-block; margin-right: 20px}
.edit_options{float: right;}

.edit_mode .file_title{display: none;}
.edit_mode .file_title._edit{display: block;}


.hljs-ln td{padding-right: 5px !important}
.hljs-ln td .hljs-ln-n{padding-right: 5px; border-right:1px solid #c7c7c7}


.cfmain{position: absolute; top: 50%; margin-top: -200px; text-align: center; left: 0; width: 100%}
.cfbx{display: inline-block; min-width: 280px; margin: 50px; border: 1px solid #efefef; padding: 50px; color: #000}
.cfbx:hover{border: 1px solid #157efb}

.ic_c{display: flex; flex-wrap: wrap;}
.ic{
    margin: 10px;
    padding: 10px;
    width: 170px;
    box-shadow: 0px 0px 9px #c7c7c799;
    background: #fff;
    border-radius: 10px;
    }
.icm{height: 50px; text-align: center; width: 50px}
.icm img{display: inline-block; max-height: 100%}
.icn{word-wrap: break-word; font-size: 14px; }


.menu-svg-icons{text-align: center; margin:20px 0 40px;}
.menu-svg-icons li{display: inline-block;}
.menu-svg-icons li a{display: inline-block;
    background: #ffffff;
    padding: 10px 20px;
    margin: 0 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 9px #c7c7c799;}
.menu-svg-icons li a:hover{background: #efefef; box-shadow: none}
.menu-svg-icons li.current-menu-item a{color: #fff; background: #3273dc; box-shadow: none;}

.icon_count{box-shadow: 0px 0px 9px #c7c7c799; background: #fff;
    display: inline-block;
    border-radius: 10px;
    padding: 7px 10px;
    margin: 10px;}
.icon_count img{margin-right: 5px; width: 18px; vertical-align: middle; display: inline-block; margin-top: -4px; }


.icnpage_wrap{background: #f9f9f9; padding-top: 1px;}