nav#sidenav { position:fixed; left:0; top:var(--header-height); padding:0; width:var(--nav-width); height:calc(100vh - var(--header-height)); z-index:1; transition: all .2s; background:#fff; border-right: 1px solid #ccc;   }
nav#sidenav[data-st='off'] {transform: translateX(calc(-1 * var(--nav-width))); -webkit-transform: translateX(calc(-2 * var(--nav-width))); backdrop-filter: blur(25px);   }
nav#sidenav[data-st='on'] {transform: translateX(0); -webkit-transform: translateX(0); transition: all .2s;  }

	nav#sidenav #nav-header { display:block; padding: 7px 0 10px; height:22px;  background:var(--bg-offside); border-bottom: 1px solid #ccc; }
	nav#sidenav #nav-header .logo{ float:left; display:block; padding: 2px 10px }
	nav#sidenav #nav-header .logo img{ display:inline-block; vertical-align: middle; }
	nav#sidenav #nav-header .logo span{ display:inline-block; vertical-align: middle; padding-left:3px; }
	nav#sidenav #nav-header .logo a{ color:#232323  }

	nav#sidenav #nav-header .nav-tb{ float:right; padding-right:5px; }
	nav#sidenav #nav-header .nav-tb button{ background:transparent; border:0; outline:none; padding:3px; height: 25px; width:25px; text-align:center; box-sizing:border-box; }
	nav#sidenav #nav-header .nav-tb button svg{ color: #737278; height:16px; width:16px;  }
	nav#sidenav #nav-header .nav-tb button:hover{ background:rgba(200,200,200,.3); cursor:pointer; }
 
	aside.navbar-sidenav { padding-top: 10px}
	aside.navbar-sidenav > strong { margin: 1.5em 3% 0; display:block; padding:.3em 1.2em; color:#555; }
	aside.navbar-sidenav .nav-item { width:94%; margin: 0 3% 2px; border-radius:25px;display:block; border-left:5px solid transparent; color:#333238; padding: .45em .9em; font-size: 1.1em; letter-spacing:0px; box-sizing:border-box; }
	aside.navbar-sidenav .nav-item:hover{ background:#eee; color:#333238;  transition: .2s;}
	aside.navbar-sidenav .nav-item svg,.nav-item span{ display:inline-block; vertical-align: middle; color:#333238;  fill:#333238!important;  } 
	aside.navbar-sidenav .nav-item svg{ height:16px; width:16px; margin-right: 10px } 
	aside.navbar-sidenav .nav-item.active { border-left:5px solid #1f75cb; background:#deedfc; color:#222;  }   
	aside.navbar-sidenav ._myacc{ position:absolute!important; width:calc(100% - 10%); margin: 0 5%; bottom: 10px; border: 1px solid #999; padding: .6em 1.4em; font-size:1em }
	aside.navbar-sidenav ._myacc:active{ color:red; }

main { position: fixed; top:0; left:var(--nav-width); width:calc(100vw - var(--nav-width)); padding-top: var(--header-height); transition: all .2s; background:#fff }
main[data-st='off'] { width:100vw; left:0; transition: all .2s; }  
main[data-st='off'] #main-header{ box-sizing:border-box; width:100vw; left:0; transition: all .2s; }  
main[data-st='off'] #_members_mysidebar{ left:-1px; transition: all .2s;z-index:2; transition: all .2s; }  
main[data-st='off'] #_a_mysidebar{ left:0; transition: all .2s;z-index:2; transition: all .2s; }  
main[data-st='off'] #_members_mycont{ left:calc( var(--aside-width)); width: calc(100vw - var(--aside-width));z-index:1; transition: all .2s;  }  
main[data-st='off'] #_a_mycont{ left:calc( var(--aside-width)); width: calc(100vw - var(--aside-width));z-index:1; transition: all .2s;  }  

#main-header { position: fixed; display:flex; top:0; box-sizing:border-box; height: var(--header-height); padding:0; left:0; width:calc(100vw );  border-bottom:1px solid #ccc; transition: all .2s; } 
	#breadcumbs { height: var(--header-height); display:flex; flex: 0 0 auto; align-content:center; padding:.2em 1em; margin: 0;   box-sizing: border-box; line-height: 33px} 
	#breadcumbs > *{ flex: 0 0 auto; } 
	#breadcumbs a{ font-size:0.9em; color:#444; font-weight: normal; text-decoration:none }
	#breadcumbs svg{ width:10px; margin: 0 1em }
	#breadcumbs a:last-child{ font-weight:bold }

	#logotype{ border:none;  border-right:1px solid #ccc; border-bottom: 1px solid #ccc; background: transparent; margin-left: 1px; height: var(--header-height); width: var(--nav-width); outline:none; padding:inherit; display:flex; align-items: center; text-align:center; box-sizing:border-box; }
	#logotype > svg{ flex: 0 0 auto; margin-left:auto; color: #737278; height:16px; width:16px; padding:0; margin-right: 10px;  }
	#logotype > .logo { min-width: 100px; align-items:center; flex: 0 0 auto; padding: 0 17px; display:flex; color:#222; text-decoration:none; } 
	#logotype > .logo span{ font-size: 1em; margin-left:5px } 
	#logotype > .logo svg{  } 
	#logotype:hover{ cursor:pointer; }

	#top_nav { justify-content:center; margin-left:auto; align-items:center;  height: var(--header-height); flex: 0 0 auto; display:flex; padding-left: 15px  } 
	#top_nav > div{ flex: 0 0 auto; display:flex; margin: 2px 12px 2px 5px } 
	#top_nav > div > a.hb{ cursor:pointer; border-radius:4px; text-decoration:none; box-sizing:border-box; height:25px; background:#ec3f55;color:#fff; font-size:13px; display:block; padding: 1px 15px 5px; line-height:25px; text-align:center;  }
	#top_nav > .dark-style { margin-top:7px;  }
	#top_nav > .currency { border:none; border-radius:4px; padding: 2px 8px;  }
	#top_nav > .currency > a { display:flex; align-items:center; justify-content:center; color:#aaa; text-decoration:none; }
	#top_nav > .currency > a > * { flex: 0 0 auto;  } 



	.right-button-header { font-size: 18px; margin: 5px 10px; color:#222; padding: 5px 0 }
	.fik { display:none; } 
 


	.navbar-nav svg {
	  fill: #444;
	  margin: -6px 10px -6px 10px;
	} 
	.container { padding-bottom: 125px }




    ._cnt_centered { border:none; width:100%; max-width: 700px; margin: 0 auto;  } 
    .tpl_form {}
    .tpl_form h1 { font-size: 1.25em; font-weight:normal; color:#EC3F55; letter-spacing:-0.02em; margin-bottom:0; }
    .tpl_form h2 { font-size: 1.15em; font-weight:normal; }
    .tpl_form .tpl_container { display:block; width:100%; max-width:700px; border: 1px solid #ddd; border-radius:5px; overflow:hidden;  }
    .tpl_form .inform { display:block; position: relative;  box-sizing:border-box;padding: 9px 55px 9px 15px; width:100%;  border-bottom:1px solid #ddd; cursor:pointer; transition:.2s }
    .tpl_form .inform:hover{ background:#f1f1f1; transition:.2s }
    .tpl_form .inform.active{ background:#f1f1f1; transition:.2s }
    .tpl_form .inform > .inform_data{ display:block; width: 100%; clear:both; font-size:1.05em; color:#222; }
    .tpl_form .inform > .inform_heading{ display:block; clear:both; font-size:0.9em; color:#999; }
    .tpl_form .inform.readonly::after{ color:#aaa; font-size:13px; content:'Solo lectura'; position:absolute; right:10px;top:20px;bottom:0; margin: auto 10px auto 0; }
    .tpl_form .inform.follow::after{ padding:3px; width:26px; height:26px; background:url('/assets/icons/follow.svg') center center no-repeat; font-size:0; content:'*'; position:absolute; top:0;bottom:0; margin: auto 0; right:15px; }
    .tpl_form .inform.follow:hover::after{ transition:.2s;   border-radius:50% }
    
    .tpl_form .switch { display:flex; box-sizing: border-box; padding: 5px 10px; width:100%;  border-bottom:1px solid #ddd; cursor:pointer; transition:.2s }
    .tpl_form .switch:hover{ background:#f1f1f1; transition:.2s }
    .tpl_form .switch .switch_label { flex: 1; transition:.2s; vertical-align:middle;  display:inline-block; padding: 4px;  }
    .tpl_form .switch .switch_label > .title{ display:block; width: 100%; clear:both; font-size:15px;   color:#222; }
    .tpl_form .switch .switch_label > .subtitle{ display:block; clear:both; font-size:13px; color:#999; }
    .tpl_form .switch .switch_button { flex: 0 0 auto; margin-right:.5em; margin-top:.2em; width:70px;  vertical-align:middle; display:inline-block;  padding: 10px 4px;  }
    .tpl_form .switch .switch_button input{ float:right  }
    .tpl_form .switch_button ._checkbox{ background:#eee; position:relative; width: 45px; height: 22px; border: 1px solid #ccc; border-radius:18px;transition:.1s; float:right; }
    .tpl_form .switch_button ._checkbox::after{ font-size:0; content:'*';position:absolute; left:1px; top:2px; border-radius:50%; height:18px; width:18px; background:#aaa; z-index:9;transition:.1s }
    .tpl_form .switch_button>input { display:none; }
    .tpl_form .switch_button>input:checked ~ ._checkbox{ background:#dc3545;transition:.1s;border: 1px solid #dc3545;  }
    .tpl_form .switch_button>input:checked ~ ._checkbox::after{ content:'*'; background:#f7f7f7; left:auto;right:1px; transition:.2s }



/*******/
.dark-style { color:#aaa!important;}
.dark-style > *{ color:#aaa!important;}

html.dark body {  background:#2b2b2b!important;  }
html.dark body  h1{  color:#cc5c5c!important  }
html.dark nav#sidenav {  background:#111 !important; border-right: 1px solid #444; }
html.dark nav#sidenav #nav-header {  background:#222!important; border-bottom:1px solid #444; }
html.dark nav#sidenav #nav-header .logo a{  color:#eee!important  }
html.dark nav#sidenav #nav-header .nav-bt a{  background:#222!important; border-color:#333!important; box-shadow:none!important; color:#fff }
html.dark nav#sidenav #nav-header .nav-bt svg{ color:#fff!important }
html.dark nav#sidenav aside.navbar-sidenav ._myacc { border-color:#444!important }

html.dark #main-header { border-bottom:1px solid #444!important; ; }
html.dark main {  background:#161616!important; }
html.dark #_members_mycont {  background:#161616 !important; }
html.dark #service_header { border-bottom:1px solid #333!important }
html.dark .scroll-list-vm {  background:#111!important; border-right: 1px solid #333 }
html.dark .aside-select { color:#999 }
html.dark .aside-select:hover, html.dark .aside-select.active {  background:#343434!important; color:#ddd }
html.dark .aside-select strong{  color:#fff!important }
html.dark .create_project {   }
html.dark .table_services thead th { border-bottom: 1px solid #323232!important; font-weight:normal}
html.dark .table_services tbody tr {  background:transparent;!important; }
html.dark .table_services tbody tr:hover { box-shadow:none!important; }
html.dark .table_services tbody td {  border-bottom:1px solid #323232; color:#ddd}
html.dark .table_services tbody td strong {  color:#eee}
html.dark #breadcumbs {  color:#ccc!important; }
html.dark #breadcumbs a {  color:#ccc!important; }

html.dark aside.navbar-sidenav > strong {  color:#eee; }
html.dark aside.navbar-sidenav .nav-item.active {  background:#333!important; }
html.dark aside.navbar-sidenav .nav-item:hover{ background:#333!important;  }
html.dark aside.navbar-sidenav .nav-item { color:#ccc!important; }
html.dark aside.navbar-sidenav .nav-item span {  color:#ccc!important; }
html.dark aside.navbar-sidenav .nav-item svg {  fill:#ccc!important; color:#ccc!important }

html.dark .container-list-actions .list-actions h3 { color:#ccc!important; }
html.dark .container-list-actions .list-actions a { color:#72b8d3!important; }
html.dark .contentHead span { color:#bababa!important; }
html.dark .table_services thead th { color:#ddd!important; }
html.dark .alpha-alt { color:#fff!important; }
html.dark .label_status.active { color:#8eab5b!important; }
html.dark .aside-select.active { border: 1px solid #444!important }
html.dark .aside-select:hover { border: 1px solid transparent!important }

/* redte */
html.dark .tpl_container { border: 1px solid #444!important } 
html.dark .tpl_form h2 { color:#aaa!important; }
html.dark .tpl_form .inform { border: 1px solid #444!important }
html.dark  .tpl_form .inform > .inform_data { color:#aaa!important }
html.dark  .tpl_form .inform:hover { background:#333!important }
html.dark .tpl_form .switch .switch_label > .title { color:#aaa }

html.dark ._logout { color:#aaa!important }
html.dark .contentBody   { color:#aaa!important }
html.dark #_members_mysidebar   { border-color:#333!important } 
html.dark #_members_mycont > ._block_container{ background:#161616;border-color:#262626!important;  } 
html.dark .aside-select > font { background:#497184;  } 
html.dark .aside-select > svg.icon_circle { color:#a7c86c;  } 
html.dark .aside-select > svg.icon_alert { color:#c45119;  } 

html.dark #_a_mycont { background:#222 }
html.dark #_a_mycont h2 {  color:#eee; }
html.dark aside#admin_menu { border-color:#333 }
html.dark aside#admin_menu a { background:#222; border-color:#333; color:#eee; }
html.dark #logotype{ border:none;  border-right:1px solid #444; border-bottom: 1px solid #444; background: #111; }
html.dark #logotype > .logo{  color:#ddd; }
html.dark .return_home { background:rgba(111,111,111,.1); border-bottom: 1px solid #444;  }
html.dark .return_home a { color:#ddd }

html.dark .create_project { border-color:#72b8d3 }
html.dark .create_project a{ color:#72b8d3; }
html.dark .sp > ._title { color:#fff!important }
html.dark .sp > ._description { color:#ddd!important }














#sidebar-close:hover { background:transparent!important;}
#open-aside:hover { background:transparent!important;}