/* HEADER */
.navbar-nav{display:block; float:none}
nav li{display:inline-block;}
a.brand{display:inline-block !important; float:right !important;}

#middle{position: absolute; max-height: calc(100vh - 140px); height: calc(100vh - 140px); width: 100vw; top:96px; left:0; z-index: 1; display:block;}
.pageTitle{margin: 40px;}

/* NAVBAR */
#wrapper .navbar-nav > li { font-size: 14px; font-weight: 400 ; margin: 15px !important; margin-bottom: 0 !important;}
#wrapper .navbar-nav > li > a { background: #eee; color: #444 !important; border-radius: 3px 3px 0 0; border: 1px solid #ddd; border-bottom: 0; padding-top: 5px!important; padding-bottom: 5px; padding-left:30px !important;  outline:0;}
#wrapper .navbar-nav > li.active > a{background: #444; color: #fff !important;}
#wrapper .navbar-nav > li > a:hover { background: #6ab025 !important; color: #fff !important; }
#wrapper .navbar-nav .dx-icon{width:16px}

.navbar-nav .icon {display: inline-block; font: 14px/1 DXIcons !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transition: none;position: absolute;left: 10px;	top: 8px;}
.navbar-nav .icon-comment::before {content: "\f01e ";}
.navbar-nav .icon-tips::before { content: "\f004 ";}
.navbar-nav .icon-add::before {content: "\f00b ";}
.navbar-nav .icon-user::before {content: "\f02d ";}
.navbar-nav .icon-runner::before {content: "\f040 ";}
.navbar-nav .icon-edit::before {content: "\f023 ";}

.edit-menu-hide{}

/* LOGIN */
.login #middle{position: absolute; height: 100vh; max-height: 100vh; width: 100vw; top:-40px; left:0; z-index: -1; display:table; vertical-align: middle;}
.login #middle .cnt{display:block; position:absolute; top:calc(50vh - 40px); left: 50%; transform: translate(-50%,-50%);}

/* ERROR */
.error #middle{position: absolute; height: 100vh; max-height: 100vh; width: 100vw; top:-40px; left:0; z-index: -1; display:table; vertical-align: middle;}
.error #middle .cnt{display:block; position:absolute; top:calc(50vh - 40px); left: 50%; transform: translate(-50%,-50%);}

.pageTitle{text-transform: uppercase;}
.errorCode{font-size: 128px; font-weight: 200; font-family: Open Sans; color: grey}
.right{float:right !important}

/*TOAST */
.dx-toast-content{text-align:center;}
.dx-toast-icon,.dx-toast-message {display: inline-block;}


/* FOOTER */
#footer{ position: fixed; bottom:0; z-index: 999; height: 45px;background: #eee;  }
#footer_ex .text-muted{font-size: 13px; color: #888}
#footer_ex .right{text-align:right; font-size: 12px; color: #444}
#footer_ex svg{height:24px; width:24px;}
#footer_ex .icon{background: #6ab025; border-radius: 32px; display: inline-block; width: 24px; height: 24px;position:absolute; margin-top: -2px; margin-left:-30px; }
#footer_ex a:hover .icon{background: #444}

/* LED PREVIEW */

#textarea{font-size: 28px; line-height: 50px;} 

.led-table {
	width: 512px;
	height: 192px;
	margin: auto;
	padding: 2px;
	background: black;
	border: 20px solid #222;
	border-radius: 4px;
	box-sizing: content-box;
	margin-bottom: 2px;
}

.create .led-table, .edit .led-table {
	margin-left:-10px;
}

.led-table::before {
	content: "";
	width: 512px;
	height: 192px;
	position: absolute;
	background: url(/lib/img/grid.png) left top repeat;
	box-sizing: content-box;
	border: 1px solid #222;
	z-index: 10;
	margin-top: -1px;
	margin-left: -1px;
}
.led-text-frame{
	width: 512px;
	height: 192px;
	overflow: hidden;
}
.led-header{height: 32px; width: 512px;}
.led-header-time{height: 32px; display: inline-block; float:left;}
.led-header-row{height: 32px; display: inline-block; overflow: hidden !important; text-align: right; width: 408px; position: relative; float: right }
#led-header-row-wrap{height: 32px; display: block;float: right;position: relative;width: 5120px;}

.led-text-place{
	width: 5120px;
	height: 192px;
	overflow: visible
}

.led {
	height: 28px;
	margin-bottom: 4px;
	/*
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-filter: brightness(77%) sepia(100) saturate(70) hue-rotate(340deg);
	filter: brightness(77%) sepia(100) saturate(70) hue-rotate(340deg);
	
	*/
}

/* EDITOR */
#editform {
    height: calc(100vh - 220px);
    overflow-x: hidden;
}

#editor .soros{width: 100% !important}


/* Editor play row animation */
.preview-ctrl{text-align: center}

.preview-ctrl .dx-button{margin:20px; transform: scale(0.85)}

.preview-row-play .led-header-row {
    text-align: right;
	float:right;
}

.preview-row-play #led-header-row-wrap {
	text-align: left;
	float:left;
	margin-left: 408px;
}
.preview-ctrl .preview-play.disabled{
	opacity: 0.5;
	cursor:default;
}
/* DX  */
#login .dx-texteditor{border:0;}
#login .dx-texteditor-input{border-radius: 3px; border: 1px solid #ddd; margin-bottom: 1px;}

#gridMain{max-height: calc(100vh - 280px);}
#gridMain .dx-master-detail-cell{padding-left:70px;}

.dx-datagrid-group-opened, .dx-datagrid-group-closed{vertical-align: middle; padding: 8px 2px;}
#toolbarCnt { position: fixed; width: 100%; bottom: 0px; background: #eee; z-index:999999999;}
.edit #toolbarCnt, .create #toolbarCnt{ position: fixed; width: 100%; bottom: 0px; background: #eee; z-index:999999999;margin: 0;}
#toolbarCnt .dx-toolbar{background: #eee;}

.dx-overlay-shader{background-color: rgba(255,255,255,.5);}

/* ACCOUNT */
#account-data input{border:1px solid #ddd !important; margin: 0;padding: 7px 9px 8px;background: #fafafa;color: #232323;font-size: 1em; -webkit-appearance: none; width: 100%; height: 100%;outline: 0;border: 0;-webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;user-select: text;}
#account-cnt .input-dx-cnt{height: 38px;}