/* -- Global -- */
body { display: block; margin: 0; background: #f6f6f6; font-family: 'Helvetica Neue', helvetica, sans-serif; font-size: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; }

code { font-size:100%; font-family:'Oxygen Mono' }
hr   { clear:both; width:100% }
a    { text-decoration: none}

/* -- Basic UX -- */
.clickable  { cursor: pointer }
.clearfix   { clear:both !important; height: 0px !important; width:100% !important }
.nowrap     { white-space: nowrap }
.overflow   { overflow: hidden }

.center     { text-align: center }
.right      { text-align: right }
.left       { text-align: left }

hr.line     { height: 0px; border: none; border-top:1px dotted #ddd }
hr.margin-5 { height: 0px; border: none; margin-bottom: 5px }
hr.margin-10{ height: 0px; border: none; margin-bottom: 10px }

[draggable] { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -khtml-user-drag: element; -webkit-user-drag: element; user-select: none; }
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }


/* text */
.bold       { font-weight: bold }
.italic     { font-style: italic }
.underlined { text-decoration: underline }
.stroked    { text-decoration: line-through }


/* hidden content */
.hidden-content { display: none }

/* pre-loader */
.preloader { width: auto; padding: 20px auto; text-align: center; }


/* Margins */
.m5         { margin: 5px }
.m10        { margin: 10px }

/* Paddings */
.p5         { padding: 5px }
.p10        { padding: 10px }

/* Fontsize */
.f-xlarge { font-size: 120% }
.f-large { font-size: 100% }
.f-medium { font-size: 90% }
.f-small { font-size: 80%  }
.f-smaller { font-size: 70%  }

/* Borders */
.bd1 { border-style: solid; border-width: 1px }
.bd2 { border-style: solid; border-width: 2px }
.bd5 { border-style: solid; border-width: 5px }

.bd-t1 { border-top-style:solid; border-width: 1px }
.bd-t2 { border-top-style: solid; border-width: 2px }
.bd-t5 { border-top-style: solid; border-width: 5px }

.bd-b1 { border-bottom-style: solid; border-width: 1px }
.bd-b2 { border-bottom-style: solid; border-width: 2px }
.bd-b5 { border-bottom-style: solid; border-width: 5px }



/* Topbar -->  */		 
.topbar { background:#2e333a; color: #fff; position: fixed; width: 100%; top:0; left:0; height: 40px; z-index:900 }
.users-name span { padding-right: 8px }



/* Navigator --> #2e333a / #424a55  */	
.nav-fixed { position: fixed; top:0; left:0; padding-top: 40px; z-index: 899; width: 40px; background:#2e333a; color: gray; box-shadow: inset -12px 4px 10px -12px rgba(0,0,0,0.6); height: 100%}
.nav-fixed span { display: block; padding: 10px 0; text-align: center; cursor: pointer; opacity: 0.6 }
.nav-fixed span i { color:#fff }
.nav-fixed span:hover {  opacity: 1 }
.nav-fixed span.active { background: #1c85ee; opacity: 1 }



/* Panel ---> */
.panel { position:fixed; top:0; bottom:0; left:0; z-index: 2; padding-left: 40px; padding-top: 40px; width: 250px; overflow: hidden; background:#fff; color:#3d3d3d }
.panel-content { padding: 10px }
.panel-header {}
.panel-search { margin: 10px 0;  }
.panel-search input[type=text] { border:1px solid #ddd; color:#555; width:100%; font-size: 80%; padding: 5px 8px; background: #fdfdfd }
.panel-search input[type=text]:focus { background: #ddd }
.panel * { color:#555 }

.folders { position: relative; max-height: 80%; width:inherit; font-size: 75%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; overflow: auto }
/* overflow: hidden; overflow-x: hidden; overflow-y: auto; */
.folders a { display: block; width:auto; padding: 5px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.folders a:hover, .folders a:hover i, .folders a:hover span, .list-selector:hover { background: #1d86ee;/*#65bfff;*/ color:#fff  }



/* Main content --> */
.main-content { background:#f9f9f9; position: absolute; z-index: 1; left:290px; padding:0px; right:0px; width: auto; min-height: 100%; box-shadow: inset 6px 4px 10px -12px rgba(0,0,0,0.6); }
.main-content div.blind-space, .dashboard-content div.blind-space { width: 100%; height: 40px; }

.inner-inaly-top { position: fixed; width: 100%; z-index: 999; /**/  margin: 0px; padding: 3px 10px; height: auto; max-height: 40px; background:rgba(195, 195, 195, 0.80); border: 1px solid transparent; }	 
/*
.inner-inaly-top ol { line-height: 0; padding: 0px 15px; display: inline-block; background: yellow; height: 16px;  margin: 5px; position: relative; list-style: none; outline: none !important; }
.inner-inaly-top ol li button { margin: 0px; border: 1px solid red }
.inner-inaly-top ol li { display:inline; color:#7f807a; font-size: 80%; }
.inner-inaly-top ol li a { color:#7f807a }
.inner-inaly-top ol li a:hover { color:black }
*/

.inner-inlay { width: auto; padding: 10px; margin: 10px; color: #555 }
.inner-inlay.with-top-bar { margin-top: 40px }
.inner-inlay h1 { font-size: 140%; font-weight: normal;  margin: 0 0 8px 0 }
.inner-inlay h2 { font-size: 120%; font-weight: normal;  margin: 0 0 8px 0 }


/* ==== dashboard ==== */
h1.dashboard span { color: silver }
h1.dashboard span small { font-size: 50% }

.dashboard-content { background:#f6f6f6; position: absolute; z-index: 1; left:50px; padding:0px; right:0px; width: auto; min-height: 100% }
.triple { float: left; width: 32%; margin-right: 1%; }
.dash-box { background:#0096ff; width: auto; margin: 0 0 15px 0; padding: 10px 8px; position: relative; color: #fff }
.dash-box span { font-size: 200%; }
.dash-box i.fa { font-size: 90%; margin-right: 8px; display: block; float: left  }
.dash-box div { font-size: 85%; left:60px; top:5px; float: right; position: absolute; }
.dash-box div h1 { font-size: 130%; margin: 0px 0px 5px 0; padding: 0px; font-weight: normal }


/* ==== blank page ===== */

.blank-page { background:#2e333a; color: #fff }


/* ==== mobile ===== */

@media screen and (max-width: 720px) {  
   

	/* Navigator -->  */	
	.nav-fixed { position: relative; padding-top: 40px; height:36px; width: 100%; background:#2e333a; color: gray; white-space: nowrap  }
	.nav-fixed span {float: left; width: 35px; }

	/* Panel ---> */
	.panel { position: relative; z-index: 100; width: 100%; padding: 0px; margin: 0px; overflow: auto; background:#fff; color:#3d3d3d }
    .panel-content { padding: 10px }

	/* Main content --> */
	.main-content { background:#f6f6f6; position: relative; padding:0px; right:0px; left:0px; margin:0px; width: auto }
	.main-content div.blind-space { height: 0px; }
	.inner-inlay { padding: 0px; margin: 5px }
	
    
    .users-name span { display: none }
    
    
    /* Dashboard */
    .dashboard-content { position: absolute; z-index: 1; left:5px; padding:0px; right:0px; width: auto; min-height: 100% }
    .triple { width: 100% } 

}