html,body {height:100%;margin:0;padding:0;}
body {color:#444;font-size:10px;}
body a {text-decoration: none; } 
*:focus { outline: 0 !important; } 
.form-control, .form-control:focus { background: #fff; color: #525865; border-radius: 4px; border: 1px solid #d1d1d1; box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.2); }
.s_icon {width:100%;height:100%;} 
.s_icon_close {display:none;} 
.navbar {color: #fff; position: absolute; z-index: 1030;width: 100%; background:#3f4657;box-shadow: 0 1px 5px rgba(0,0,0,.25); height:50px; }
.navbar .wrap_inner {padding:10px 20px 0 20px;position:relative;}
.btn_settings {cursor: pointer; width: 30px; height: 30px; position: absolute; right: 15px; top: 9px; z-index: 100; color: #677ca4; } 
.btn_settings.active {color:#fff;} 
.btn_shrink_menu {cursor: pointer; width: 44px; height: 44px; position: absolute; right: 48px; top: 4px; z-index: 100; color: #fff;}
.btn_shrink_menu.active {color: #677ca4;} 

.btn_vim_outer {display:inline-block;} 
.btn_vim {color: #934a4a; padding: 3px; border: 2px solid #d5d3d3; z-index: 10; background: #fff; font-size: 12px; cursor: pointer; text-transform: uppercase; display: inline-block; border-radius: 4px; font-weight: bold;}
.btn_vim.active {color: #fff; border: 2px solid red; background: red; }
.btn_hotkey_outer {display:inline-block;margin-right:5px;}   
.btn_hotkey {padding: 3px; border: 2px solid #d5d3d3; z-index: 10; background: #fff; font-size: 12px; cursor: pointer; text-transform: uppercase; display: inline-block; border-radius: 4px; font-weight: bold;}

.main-container {height:100%;padding:50px 0 0 0;margin-left:0;transition: margin 0.3s linear;overflow-x: auto;}
.main_flex {display: flex; height: 100%; }
.main_flex .col_nav {height: 100%; width: 35px;border-right:1px solid silver; position: relative;}
.main_flex .col_nav.active {width: 220px;}
.main_flex .col_text {height: 100%; width: 100px; flex-grow: 1; } 
.main_flex .col_text .text_wrap {height: 100%;width:100%;overflow:auto; padding:15px;position:relative;}   
.editor_code { border: 1px solid silver; height: 100%; overflow: auto;} 
.navbar_tools {position:absolute;top:0;right:0;} 
.col_btn .s_icon_open {display: none;}  
.col_btn .s_icon_close {display: block;} 
.main_flex .col_nav .col_btn {padding: 5px; right: 0px; position: absolute; width: 34px; height: 34px; top: 0px; z-index: 100; cursor: pointer;}
.main_flex .col_nav.active .col_btn {right: 0px; } 
.main_flex .col_nav.active .col_btn .s_icon_open {display: block;}  
.main_flex .col_nav.active .col_btn .s_icon_close {display: none;} 
.main_flex .col_nav .wrap_nav { max-height: 100%; overflow: auto;} 
.main_flex .col_nav .col_btn_mobile {display: none; padding: 5px; right: -50px; position: absolute; width: 50px; height: 34px; top: -1px; z-index: 100; cursor: pointer; background: #d4d9e6; border-radius: 0 10px 10px 0;} 
.main_flex .col_nav .col_btn_mobile.active {background: #a459da; } 

/* Hide scrollbar for Chrome, Safari and Opera */
.main_flex .col_nav .wrap_nav::-webkit-scrollbar { display: none; } 
.main_flex .col_nav::before { content: " "; display: block; width: 5px; height: 5px; position: absolute; z-index: 100; width: 100%; height: 100%; background: #f5f5f5; } 
.main_flex .col_nav.active::before {display:none;} 
/* Hide scrollbar for IE, Edge and Firefox */ 
.main_flex .col_nav .wrap_nav { -ms-overflow-style: none;  /* IE and Edge */ scrollbar-width: none;  /* Firefox */ } 
.list_menu ul { padding: 0; margin: 0; list-style: none; overflow: hidden; } 
.list_menu ul li a { text-decoration: none; cursor: pointer; display: block; margin: 0; padding: 6px 15px 6px 20px; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; color: #3f4657; font-size: 15px; text-shadow: none; border-color: #e7e7e9; }
.list_menu ul li.active a, .list_menu ul li a:hover { background: #d4d4d4; }   
.list_menu ul li.active_key a { background: #a9dcde !important; }   
.main_tools {width: 190px; right: -190px; position: fixed; top: 50px; z-index: 2000; height: 100%; background: #f5f5f5; border-left: 1px solid #c0c0c0; transition: ease-in all 0.1s;}
.main_tools.active {right: 0; }  
.main_tools_wrap {padding:15px;}  
.btn_tools.btn_add {background: #357347; } 
.btn_tools.btn_delete {background: #934a4a; }  
.btn_tools.btn_save {background: #42888c; } 
.btn_tools.btn_edit {background: #4b7097; } 
.btn_tools.btn_add:hover {background: #45975c; }   
.btn_tools.btn_delete:hover {background: #bb5a5a; }  
.btn_tools.btn_save:hover {background: #59b2b7; } 
.btn_tools.btn_edit:hover {background: #70a2d7; } 
.btn_tools.btn_edit_menu:hover {background: #70a2d7; } 
.btn_tools {position:relative; cursor: pointer; text-decoration:none; display: block; padding: 6px 15px 6px 20px; font-family: 'Roboto Slab', 'Helvetica Neue', sans-serif; font-weight: 400; font-size: 15px; border-color: #e7e7e9; background: #446e9b; margin-bottom: 16px; color: #fff; border-radius: 4px; }
.btn_tools .btn_text {margin-left: 17px;}
.btn_tools .icon_tools {position: absolute; top: 7px; left: 8px; width: 20px; height: 20px; display: block;} 
.block_enter {position: absolute; z-index: 10; width: 198px; top: 10px; left: 21px; height: 30px;color: inherit; }
.flex_block {display: flex; height:100%; color: inherit; }  
.block_pass { flex-grow: 1; position: relative; } 
.btn_enter {width: 78px; height: 100%; display: block; cursor: pointer; margin-left: -4px; color: #fff;background: none; border: none;}  
.btn_reload {display:none; width: 53px; height: 36px; cursor: pointer; margin-left: 5px; color: #4b7097; position: absolute; top: -3px; left: -17px; background: none; border: none;} 
.btn_reload:hover {color:#fff;}
.btn_open_wide { cursor: pointer; display: none; width: 26px; height: 26px; cursor: pointer; margin-left: 5px; color: #677ca4; top: 11px; right: 96px; position: absolute; }
.block_pass input { background: #fff; color: #747b8a; border-radius: 4px; border: 1px solid #d1d1d1; box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.2); display: block; outline: none; padding: 0px 10px; margin: 0; width: 100%; height: 100%; line-height: 26px; font-size: 14px; padding-right: 34px;}
.block_pass .pass_eye { background: url(../img/pass_eye.png) 0 0 no-repeat transparent; cursor: pointer; position: absolute; top: 7px; right: 4px; z-index: 10; width: 26px; height: 18px; }
.block_pass .pass_eye.open { background: url(../img/pass_eye.png) -27px 0 no-repeat transparent; }
.form_container { padding:0;border-radius: 4px; width: 350px; } 
.form_container .fancybox-close-small {color:#fff;} 
.form_container .name_note {font-size:20px;padding:0;margin:0;font-size: #333; } 
.form_container input:active, 
.form_container input:hover, 
.form_container input:focus { outline: 0; outline-offset: 0; } 
.form_container button[type='submit']{ margin-right:15px; }  
.form_wrap {padding:20px;}
.form_title {font-size:bold; padding: 0 20px; color: #fff; font-size: 19px; line-height: 42px; font-weight: 300; background: #3ab7e8; }
.form_title.add_title {background: #357347; } 
.form_title.edit_title {background: #4b7097; } 
.form_title.delete_title {background: #934a4a; }
.form_info { display:inline-block; vertical-align:middle;}  
.form_info .form_status {display:none; font-size: 15px;padding:0; } 
.form_info .form_status.status_loading {color: #70a2d7;} 
.form_info .form_status.status_error {color: red;} 
.form_info .form_status.status_success {color: green;}
.form_info .form_status.status_loading.active,
.form_info .form_status.status_error.active,
.form_info .form_status.status_success.active {display:block;}  
.form-control.error {border: 1px solid red !important;}
.status_container {display: none; position: absolute; top: 0; right: 155px; height: 50px; left: 0; background: #3f4657; z-index: 1000; } 
.status_container.active {display:block;}
.status_loader {display:none; position: absolute; left: 14px; top: 0; width: 50px; height: 50px; background: url(../img/loading.gif) center center no-repeat transparent;} 
.status_loader.active {display:block;}
.status_text {display:none; position: absolute; top: 0; left: 75px; right: 0px; padding-top: 15px; color: #fff; font-size: 14px;} 
.status_text.active {display:block;} 
.modal_textarea textarea { font-size: 15px; padding: 20px; height: 98%; width: 100%; box-sizing: border-box; border: 1px dashed silver; outline: none !important; }
.fancy_tree_menu {} 
.block_tree_menu_title {position: absolute; top: 10px; left: 15px; font-size: 16px; color: #436573; } 
.block_tree_menu {margin-bottom:0 !important;height:100%;padding:15px;position:absolute;top:0;bottom:0;right:0px;width:500px;padding-top: 41px;} 
.block_tree_menu_inner {height:100%;border:1px dashed silver;padding: 15px;overflow:auto;}
.block_info_menu_title {position: absolute; top: 10px; left: 15px; font-size: 16px; color: #436573; } 
.block_info_menu,  
.modal_textarea  {margin-bottom:0 !important;height:100%;padding:15px;position:absolute;top:0;bottom:0;right:0px;width:500px;padding-top: 41px;} 
.block_info_menu_inner {height:100%;border:1px dashed silver;padding: 15px;overflow:auto;} 
.modal_textarea {width:100%;} 
#tree_menu {position:relative;} 
.fancybox-container {z-index:2000;} 

.main_flex.mobile {display:block;position:relative;} 
.main_flex.mobile .col_nav {position:absolute; z-index:200; background: #fff; }   
.main_flex.mobile .col_nav.active_mobile {z-index:250;} 
.main_flex.mobile .col_nav.active { width: calc(100% - 85px); } 
.main_flex.mobile .col_text {position:absolute;z-index:20;width:100%;} 
.main_flex.mobile .col_nav .col_btn {display:none;}  
.main_flex.mobile .col_nav .col_btn_mobile {display:block;}   
.main_flex.mobile .col_nav:nth-child(1) .col_btn_mobile{ top: 0px; }  
.main_flex.mobile .col_nav:nth-child(2) .col_btn_mobile{ top: 35px; }  
.main_flex.mobile .col_nav:nth-child(3) .col_btn_mobile{ top: 70px; }  
.main_flex.mobile .col_nav:nth-child(4) .col_btn_mobile{ top: 105px; }  
.main_flex.mobile .col_nav:nth-child(5) .col_btn_mobile{ top: 140px; }  
.main_flex.mobile .col_nav:nth-child(6) .col_btn_mobile{ top: 175px; }  
.main_flex.mobile .col_nav:nth-child(7) .col_btn_mobile{ top: 120px; }  
.main_flex.mobile .col_nav:nth-child(8) .col_btn_mobile{ top: 245px; }  
.main_flex.mobile .col_nav:nth-child(9) .col_btn_mobile{ top: 280px; }  
.main_flex.mobile .col_nav:nth-child(10) .col_btn_mobile{ top: 315px; }  
.main_flex.mobile .col_nav:nth-child(11) .col_btn_mobile{ top: 350px; }  
.main_flex.mobile .col_nav:nth-child(12) .col_btn_mobile{ top: 385px; }  
.main_flex.mobile::before {background: #000; opacity: 0.7; content: ''; display: none; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 30;}
.main_flex.mobile.mobile_menu_bg::before {display:block;} 

.popup_text {font-size: 14px; color: #000; } 
.popup_text p {padding:0;margin:0;margin-bottom: 10px; }
.popup_text.hotkeys_info {font-size: 14px; color: #000; } 
.popup_text.hotkeys_info strong {color: #af39c3; font-weight: 600;} 

@media (max-width: 500px) {
  .block_tree_menu { width: 100%; } 
}

@media (max-width: 970px) {
  .btn_open_wide { display: block; } 
}