/*
 * META Console
 *
 * @author META Platform <www.meta-platform.com>
 * @license See LICENSE file distributed with this source code
 */

* {
	margin: 0px;
	padding: 0px;
}

body {
	background: #222222;
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	line-height: 1.0;
	font-weight: 300;
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

@media print {

	body {
		position: relative;
		width: auto;
		height: auto;
		overflow: visible;
		zoom: 75%;
	}

}

.clear {
	clear: both;
}

a {
	color: #1976D2;
}

a:hover {
	text-decoration: none;
}

.mdi.mdi-blank {
	width: 18px;
}

/*
 * LAYOUT ATTRIBUTES
 */
*[fill],
*[auto-fill] {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
}

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

	*[auto-fill] {
		position: relative;
		bottom: auto;
		right: auto;
		overflow: auto;
	}

}

@media screen and (max-height: 299px), screen and (max-width: 379px) {

	*[fill],
	*[auto-fill] {
		position: relative;
		bottom: auto;
		overflow: visible;
	}

}

@media print {

	*[fill],
	*[auto-fill] {
		position: relative;
		bottom: auto;
		overflow: visible;
	}

}

@media print {

	*[noprint] {
		display: none;
	}

}

*[padded] {
	padding: 18px;
}

*[hb-padded] {
	padding: 0px 18px 18px 18px;
}

*[padded2] {
	padding: 24px;
}

*[padded3] {
	padding: 36px;
}

*[padded3-h] {
	padding: 18px 36px;
}

*[padded3-hb] {
	padding: 0px 36px 18px 36px;
}

*[content-scroll] {
	overflow-x: hidden;
	overflow-y: auto;
}

@media print {

	*[content-scroll] {
		overflow-y: visible;
	}

}

h2[content-title] {
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	padding-top: 20px;
	margin-bottom: 20px;
	text-transform: uppercase;
	color: #333333;
	padding-bottom: 8px;
	border-bottom: 1px solid #dddddd;
}

h2[content-title][top] {
	padding-top: 0;
}

/*
 * LOADING BALL
 */
.loading-ball {
	position: absolute;
	left: 50%;
	top: 50%;
}

.loading-ball .wrap {
	position: absolute;
	left: -6px;
	top: -6px;
}

@keyframes loading-ball {
    0% 	 { top: 0px; }
    30%  { top: -20px; }
    60%  { top: 5px; }
    100% { top: 0px; }
}

@-webkit-keyframes loading-ball {
    0% 	 { top: 0px; }
    30%  { top: -20px; }
    60%  { top: 5px; }
    100% { top: 0px; }
}

.loading-ball span {
	display: inline-block;
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 12px;
	background: rgba(174, 221, 255, 0.2);
	animation-name: loading-ball;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.loading-ball span.a { left: -24px; }
.loading-ball span.b { animation-delay: 0.12s; }
.loading-ball span.c { left: 24px; animation-delay: 0.24s; }

.loading-ball.delayed span.a { animation-delay: 1s; }
.loading-ball.delayed span.b { animation-delay: 1.12s; }
.loading-ball.delayed span.c { animation-delay: 1.24s; }

/*
 * LOGIN COMPONENT
 */
cube-login {
	display: block;
	background: #222222;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	opacity: 0.0;
	z-index: -10;
	transition: opacity 0.8s, z-index 1s;
	-webkit-transition: opacity 0.8s, z-index 1s;
}

cube-login .loading-ball {
	top: 70%;
}

cube-login .container  {
	position: absolute;
	left: 50%;
	top: 28%;
	top: calc(50% - 180px);
}

cube-login.modaled {
	z-index: 100;
	opacity: 1.0;
}

cube-login .container  form {
	position: absolute;
	width: 260px;
	left: -130px;
	color: #ffffff;
}

cube-login .container .box {
	position: relative;
	top: 0;
	opacity: 1.0;
	transition: all 0.8s;
	-webkit-transition: all 0.8s;
}

cube-login .container.working .box {
	opacity: 0.0;
	top: -80px;
}

cube-login .container svg {
	fill: #dddddd;
	width: 128px;
	height: 128px;
}

cube-login .container p {
	margin-bottom: 20px;
	text-align: center;
}

cube-login .container input[type=text],
cube-login .container input[type=password] {
	background: #ffffff;
	color: #222222;
	box-sizing: border-box;
	width: 100%;
	padding: 15px;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	border: 0px none;
	text-align: center;
}

cube-login .container input[type=text] {
	border-radius: 4px 4px 0px 0px;
}

cube-login .container input[type=password] {
	border-radius: 0px 0px 4px 4px;
	border-top: 1px solid #dddddd;
}

cube-login .container button {
	border: 0px none;
	border-radius: 4px;
	background: #2196F3;
	color: #ffffff;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	padding: 12px 30px;
	cursor: pointer;
	transition: background 0.3s;
	-webkit-transition: background 0.3s;
}

cube-login .container button:hover {
	background: #1E88E5;
}

cube-login .container input[type=text]:focus,
cube-login .container input[type=password]:focus,
cube-login .container button:focus {
	outline: 0;
}

cube-login .container .message {
	position: relative;
	opacity: 1.0;
	top: 0px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	min-height: 20px;
	transition: opacity 0.5s, top 0.5s;
	-webit-transition: opacity 0.5s, top 0.5s;
}

cube-login .container .message.none {
	opacity: 0.0;
	top: -20px;
}

cube-login .container .message.warn { color: #FFCA28; }
cube-login .container .message.error { color: #EF9A9A; }

/*
 * LAYOUT COMPONENT
 */
cube-layout {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background: #ffffff;
	/*background: #edeff5;*/
}

cube-layout #toolbar {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 48px;
	background: #333333;
	display: none;
}

cube-layout #toolbar button {
	display: block;
	background: transparent;
	color: #ffffff;
	border: 0px none;
	font-size: 24px;
	padding: 12px;
	margin-right: 12px;
	float: left;
	cursor: pointer;
	transition: background 0.3s;
	-webkit-transition: background 0.3s;
}

cube-layout #toolbar button:hover {
	background: #2196F3;
}

cube-layout #toolbar button:focus {
	outline: 0;
}

cube-layout #toolbar .title {
	display: block;
	line-height: 24px;
	padding: 12px 0px;
	font-size: 14px;
	color: #ffffff;
}

cube-layout #primary-nav {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
	width: 50px;
	background: #2f323a;
	list-style: none;
	z-index: 100;
	transition: width 0.6s, box-shadow 0.5s;;
	-webkit-transition: width 0.6s, box-shadow 0.5s;;
}

cube-layout #primary-nav[opened] {
	width: 240px;
	box-shadow: 2px 0px 16px rgba(0, 0, 0, 0.4);
}

cube-layout #primary-nav li a {
	display: block;
	position: relative;
	width: 240px;
	height: 50px;
	padding: 13px;
	line-height: 24px;
	font-size: 14px;
	text-decoration: none;
	box-sizing: border-box;
	color: #898d9c;
	background: transparent;
	transition: color 0.3s, background 0.3s;
	-webkit-transition: color 0.3s, background 0.3s;
}

cube-layout #primary-nav li a.menu {
	background: #212329;
}

cube-layout #primary-nav li a:hover {
	color: #ffffff;
}

cube-layout #primary-nav li a.router-link-active {
	background: #1E88E5;
	color: #ffffff;
}

cube-layout #primary-nav li a .counter {
	display: block;
	position: absolute;
	left: 22px;
	top: 8px;
	background: #E53935;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 20px;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

cube-layout #primary-nav li a .title {
	overflow: hidden;
	width: 190px;
	opacity: 0.0;
	transition: opacity 0.6s;
	-webkit-transition: opacity 0.6s;
}

cube-layout #primary-nav[opened] li a .title {
	opacity: 1.0;
}

cube-layout #primary-nav li a .mdi {
	font-size: 24px;
	line-height: 24px;
	margin-right: 12px;
	float: left;
}

cube-layout #primary-nav li .separator {
	display: block;
	width: auto;
	height: 10px;
	background: rgba(0, 0, 0, 0.15);
	box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.15);
}

cube-layout #primary-nav button {
	position: absolute;
	font-size: 24px;
	padding: 5px;
	background: transparent;
	border: 0px none;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;
}

cube-layout #primary-nav button:hover {
	color: #ffffff;
}

cube-layout #primary-nav button:focus {
	outline: 0;
}

cube-layout #primary-nav button.close {
	display: none;
	top: 9px;
	right: 9px;
}

cube-layout #primary-nav button.expander {
	display: block;
	bottom: 9px;
	left: 9px;
	color: #666666;
}

cube-layout #primary-nav button.expander:hover {
	color: #ffffff;
}

cube-layout #primary-nav button.expander .off { display: none; }
cube-layout #primary-nav button.expander .on { display: inline-block; }

cube-layout #primary-nav[opened] button.expander .on { display: none; }
cube-layout #primary-nav[opened] button.expander .off { display: inline-block; }

cube-layout #main {
	position: fixed;
	left: 50px;
	top: 0px;
	right: 0;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 0;
	transition: left 0.6s;
	-webkit-transition: left 0.6s;
}

cube-layout #view {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	transition: top 0.5s;
	-webkit-transition: top 0.5s;
	z-index: 0;
}

cube-layout #main.offline #view {
	top: 50px;
}

cube-layout #main.offline {
	padding-top: 50px;
}

cube-layout #main #offline-message {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 0px;
	overflow: hidden;
	transition: height 0.5s;
	-webkit-transition: height 0.5s;
}

cube-layout #main #offline-message p {
	padding: 14px;
	line-height: 24px;
	font-size: 15px;
	font-weight: normal;
	color: #ffffff;
	background: #EF6C00;
}

cube-layout #main #offline-message .mdi {
	display: inline-block;
	font-size: 24px;
	margin-right: 12px;
	float: left;
}

cube-layout #main #offline-message button {
	display: inline-block;
	float: right;
	margin: -5px;
	padding: 5px;
	background: transparent;
	border: 0px none;
	border-radius: 4px;
	color: #ffffff;
	cursor: pointer;
	transition: background 0.3s;
	-webkit-transition: background 0.3s;
}

cube-layout #main #offline-message button:hover {
	background: rgba(255, 255, 255, 0.2);
}

cube-layout #main #offline-message button .mdi {
	margin-right: 0;
}

cube-layout #main.offline #offline-message {
	height: 50px;
}

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

	cube-layout #toolbar {
		display: block;
	}

	cube-layout #primary-nav {
		width: 100%;
		left: -100%;
		box-shadow: 2px 0px 16px rgba(0, 0, 0, 0.0);
		transition: left 0.5s, box-shadow 0.5s;
		-webkit-transition: left 0.5s, box-shadow 0.5s;
	}

	cube-layout #primary-nav[opened] {
		left: 0;
		width: 100%;
		box-shadow: 2px 0px 16px rgba(0, 0, 0, 0.4);
	}

	cube-layout #primary-nav li a {
		width: auto;
		height: auto;
	}

	cube-layout #primary-nav li a .title,
	cube-layout #primary-nav li .separator {
		width: auto;
	}

	cube-layout #primary-nav button.close {
		display: block;
	}

	cube-layout #primary-nav button.expander {
		display: none;
	}

	cube-layout #main {
		left: 0;
		top: 48px;
	}

}

@media print {

	cube-layout {
		position: relative;
		left: 0;
		top: 0;
		bottom: auto;
		right: auto;
	}

	cube-layout #main {
		position: relative;
		left: 0px;
		top: 0px;
		right: auto;
		bottom: auto;
		overflow-x: hidden;
		overflow-y: visible;
	}

	cube-layout #view {
		position: relative;
		left: 0;
		top: 0;
		right: auto;
		bottom: auto;
		z-index: 0;
	}

}

/*
 * VR-LAYOUT
 */
cube-vr-layout {
	display: flex;
	flex-direction: column;
}

cube-vr-layout > header {
	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
	order: 0;
	z-index: 20;
}

cube-vr-layout > header:empty {
	display: none;
}

cube-vr-layout > footer {
	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
	order: 2;
	z-index: 10;
}

cube-vr-layout > footer:empty {
	display: none;
}

cube-vr-layout > section {
	position: relative;
	flex-grow: 1;
	flex-shrink: 1;
	order: 1;
	z-index: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

cube-vr-layout[no-scroll] > section {
	overflow: hidden;
}

@media screen and (max-height: 299px), screen and (max-width: 379px) {

	cube-vr-layout > section {
		overflow: visible;
	}

}

@media print {

	cube-vr-layout > section {
		overflow: visible;
	}

}

/*
 * ROW LAYOUT
 */
cube-row-layout {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	/*justify-content: space-around;*/
	align-content: flex-start;
	margin: 0px -10px -10px -10px;
}

cube-row-layout[joined] {
	margin: 0;
}

cube-row-layout > *[col] {
	position: relative;
	margin: 0px 10px 10px 10px;
	box-sizing: border-box;
}

cube-row-layout > *[col][join] {
	margin: 0;
}

cube-row-layout > *[col][left-join] {
	margin-left: 0;
}

cube-row-layout > *[col][right-join] {
	margin-right: 0;
}

cube-row-layout > *[grow] {
	flex-grow: 1;
}

cube-row-layout > *[shrink] {
	flex-shrink: 1;
}

cube-row-layout > *[col][left-separator] {
	border-left: 1px solid #eeeeee;
}

cube-row-layout > *[col][left-shadow] {
	box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.15);
}

cube-row-layout > *[col][right-shadow] {
	box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.15);
}

cube-row-layout > *[col][alternate] {
	background: #f7fafc;
}

cube-row-layout > *[w-5]  { width: 5%; }
cube-row-layout > *[w-10] { width: 10%; }
cube-row-layout > *[w-15] { width: 15%; }
cube-row-layout > *[w-20] { width: 20%; }
cube-row-layout > *[w-25] { width: 25%; }
cube-row-layout > *[w-30] { width: 30%; }
cube-row-layout > *[w-35] { width: 35%; }
cube-row-layout > *[w-40] { width: 40%; }
cube-row-layout > *[w-45] { width: 45%; }
cube-row-layout > *[w-50] { width: 50%; }
cube-row-layout > *[w-60] { width: 60%; }
cube-row-layout > *[w-70] { width: 70%; }
cube-row-layout > *[w-80] { width: 80%; }

@media all and (max-width: 1153px) {

	cube-row-layout > *[w-5]  { width: 25%; }
	cube-row-layout > *[w-10] { width: 25%; }
	cube-row-layout > *[w-15] { width: 40%; }
	cube-row-layout > *[w-20] { width: 50%; }
	cube-row-layout > *[w-25] { width: 100%; }
	cube-row-layout > *[w-30] { width: 100%; }
	cube-row-layout > *[w-35] { width: 100%; }
	cube-row-layout > *[w-40] { width: 100%; }
	cube-row-layout > *[w-45] { width: 100%; }
	cube-row-layout > *[w-50] { width: 100%; }
	cube-row-layout > *[w-60] { width: 100%; }
	cube-row-layout > *[w-70] { width: 100%; }
	cube-row-layout > *[w-80] { width: 100%; }

	cube-row-layout > *[col][alternate] {
		order: 99;
	}

}


@media all and (max-width: 419px) {

	cube-row-layout > *[w-10] { width: 50%; }
	cube-row-layout > *[w-15] { width: 100%; }
	cube-row-layout > *[w-20] { width: 100%; }
	cube-row-layout > *[w-25] { width: 100%; }
	cube-row-layout > *[w-30] { width: 100%; }
	cube-row-layout > *[w-35] { width: 100%; }
	cube-row-layout > *[w-40] { width: 100%; }
	cube-row-layout > *[w-45] { width: 100%; }
	cube-row-layout > *[w-50] { width: 100%; }
	cube-row-layout > *[w-60] { width: 100%; }
	cube-row-layout > *[w-70] { width: 100%; }
	cube-row-layout > *[w-80] { width: 100%; }

}

/*
 * BUTTONS COMPONENT
 */
cube-buttons {
	display: inline-block;
}

cube-buttons[block] {
	display: block;
	margin-left: -4px;
	margin-right: -4px;
}

cube-buttons[right] {
	text-align: right;
}

cube-buttons > span {
	color: #666666;
	display: inline-block;
	margin-right: 8px;
	font-weight: normal;
}

cube-buttons button {
	box-sizing: border-box;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 13px;
	line-height: 26px;
	height: 36px;
	border: 1px solid #d0d0d0;
	background: #ffffff;
	color: #444444;
	cursor: pointer;
	margin: 6px 4px;
	transition: color 0.3s, background 0.3s, border 0.3s;
	-webkit-transition: color 0.3s, background 0.3s, border 0.3s;
	vertical-align: top;
}

cube-buttons button[primary] {
	background: #1E88E5;
	color: #ffffff;
	border: 1px solid #1E88E5;
}

cube-buttons button[alternate]:hover {
	background: #E53935;
	color: #ffffff;
	border: 1px solid #E53935;
}

cube-buttons button .mdi {
	float: left;
	margin-right: 5px;
	font-size: 20px;
	line-height: 26px;
}

cube-buttons button:hover {
	color: #1976D2;
	border-color: #1976D2;
}

cube-buttons button[primary]:hover {
	background: #1976D2;
	color: #ffffff;
	border-color: #1976D2;
}


cube-buttons button[alternate]:hover {
	background: #C62828;
	color: #ffffff;
	border-color: #C62828;
}

cube-buttons button[disabled],
cube-buttons button[disabled]:hover {
	pointer-events: initial;
	background: transparent;
	border-color: #dddddd;
	color: #999999;	
	cursor: default;
}

cube-buttons button[only-icon] {
	padding: 5px 8px;
}

cube-buttons button[only-icon] .mdi {
	margin-right: 0;
}

@media print {
	
	cube-buttons {
		display: none!important;
	}

}

/*
 * HEADER
 */
cube-header {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background: #ffffff;
}

cube-header[shadow] {
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
}

cube-header[separator] {
	border-bottom: 1px solid #dddddd;
}

cube-header > .title {
	padding: 25px 20px 20px 20px;
	font-size: 24px;
	line-height: 24px;
	font-weight: 300;
	flex-grow: 1;
	order: 0;
}

cube-header > .title .mdi {
	font-size: 24px;
}

cube-header > .title a {
	color: #1E88E5;
	text-decoration: none;
}

cube-header > .title a[crumb]:first-child::before,
cube-header > .title span[crumb]:first-child::before {
	display: none;
}

cube-header > .title a[crumb]::before,
cube-header > .title span[crumb]::before {
	display: inline-block;
	content: ' / ';
	color: #cccccc;
	margin: 0px 0px 0px 10px;
}

cube-header > .title a[crumb]:not(:first-child) .mdi,
cube-header > .title span[crumb]:not(:first-child) .mdi {
	margin-left: 10px;
}

cube-header > .context {
	flex-grow: 0;
	flex-shrink: 0;
	padding: 13px 20px 13px 20px;
}

cube-header > .context:empty {
	display: none;
}

cube-header > .context cube-lock {
	margin: 4px 6px 3px 6px;
}

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

	cube-header > .title {
		font-size: 18px;
	}

	cube-header > .context {
		/*padding-top: 0px;*/
	}

	cube-header > .context button {
		width: 34px;
		height: 34px;
		padding: 5px 6px;
		overflow: hidden;
		white-space: nowrap;
	}

}

cube-header > .content {
	width: 100%;
	flex-shrink: 0;
	order: 2;
}

cube-header > .content:empty {
	display: none;
}

cube-header > .content > .wrap > *[padded] {
	padding: 5px 20px 20px 20px;
}

cube-header > .content > button {
	display: none;
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	font-size: 20px;
	color: #666666;
	text-align: center;
	border: 1px #eeeeee;
	border-style: solid none solid none;
	background: transparent;
	cursor: pointer;
	transition: color 0.3s, background 0.3s;
	-webkit-transition: color 0.3s, background 0.3s;
}

cube-header > .content > button:focus {
	outline: 0;
}

cube-header > .content > button:hover,
cube-header > .content[visible="true"] > button {
	color: #1E88E5;
}

@media screen and (max-width: 799px) {
    
	cube-header > .content > button {
		display: block;
	}
    
    cube-header > .content > .wrap {
    	max-height: 0;
    	overflow: hidden;
    	transition: max-height 0.5s;
    	-webkit-transition: max-height 0.5s;
    }

}

/*
 * FILTER COMPONENT
 */
cube-filter {
	display: block;
}

cube-filter form {
	display: flex;
	flex-direction: row;
	flex-wrap: no-wrap;
	margin: -5px;
}

cube-filter form > *[control] {
	margin: 5px!important;
}

cube-filter form > *[grow] {
	flex-grow: 1;
}

cube-filter cube-tag-filter {
	margin: 5px;
}

@media all and (max-width: 799px) {

	cube-filter form {
		flex-wrap: wrap;
	}

}

/*
 * FORMS
 */
.cube-form *[control] {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	margin-bottom: 10px;
}

.cube-form *[control][spaced] {
	margin-bottom: 25px;
}

.cube-form *[group] > *[control]:last-child {
	margin-bottom: 0;
}

.cube-form *[control] input,
.cube-form *[control] select,
.cube-form *[control] textarea,
.cube-form *[control] cube-dropdown,
.cube-form *[control] cube-autocompleter,
.cube-form *[control] cube-switch {
	order: 1;
}

.cube-form *[control] input[grow],
.cube-form *[control] select[grow],
.cube-form *[control] textarea[grow],
.cube-form *[control] cube-dropdown[grow],
.cube-form *[control] cube-autocompleter[grow],
.cube-form *[control] cube-switch[grow] {
	flex-grow: 1;
}

.cube-form *[control] label.solid {
	flex-shrink: 0;
	order: 0;
}

.cube-form h2 {
	font-size: 14px;
	font-weight: normal;
	line-height: 1.3;
	margin-bottom: 16px;
	padding-top: 20px;
}

.cube-form input[type=text],
.cube-form input[type=date],
.cube-form input[type=password],
.cube-form input[type=email],
.cube-form input[type=number],
.cube-form textarea,
.cube-form select,
.cube-form cube-dropdown > .value,
.cube-form cube-autocompleter > .value {
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 4px;
	padding: 6px 10px;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #000000;
	transition: background 0.3s, border-color 0.3s;
	-webkit-transition: background 0.3s, border-color 0.3s;
}

.cube-form.passive *[control]:not(:hover) input:not(:focus):not(.ng-dirty),
.cube-form.passive *[control]:not(:hover) cube-dropdown:not(.focus):not(.ng-dirty) > .value,
.cube-form.passive *[control]:not(:hover) cube-autocompleter:not(.focus):not(.ng-dirty) > .value {
	border-color: transparent;
	background: rgba(0, 0, 0, 0.04);
}

.cube-form.passive *[control]:hover input:not(:focus):not(.ng-dirty),
.cube-form.passive *[control]:hover cube-dropdown:not(.focus):not(.ng-dirty) > .value,
.cube-form.passive *[control]:hover cube-autocompleter:not(.focus):not(.ng-dirty) > .value {
	border-color: transparent;
	background: rgba(0, 0, 0, 0.06);
	cursor: pointer;
}

.cube-form label.solid {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	border: 1px #dddddd;
	border-style: solid none solid solid;
	border-radius: 4px 0px 0px 4px;
	background: #f6f6f6;
	font-size: 13px;
	line-height: 16px;
	font-weight: normal;
	padding: 8px;
	color: #333333;
	transition: background 0.3s, border-color 0.3s;
	-webkit-transition: background 0.3s, border-color 0.3s;
}

.cube-form label.solid.w20 { width: 20%; }
.cube-form label.solid.w25 { width: 25%; }
.cube-form label.solid.w30 { width: 30%; }
.cube-form label.solid.w50 { width: 50%; }

.cube-form label.solid .mdi {
	font-size: 16px;
	line-height: 16px;
	vertical-align: top;
}

.cube-form label.solid + input,
.cube-form label.solid + select,
.cube-form label.solid + textarea,
.cube-form label.solid + cube-dropdown > .value,
.cube-form label.solid + cube-autocompleter > .value,
.cube-form label.solid + cube-switch,
.cube-form input[with-solid],
.cube-form select[with-solid],
.cube-form textarea[with-solid],
.cube-form cube-dropdown[with-solid] > .value,
.cube-form cube-autocompleter[with-solid] > .value,
.cube-form cube-switch[with-solid] {
	border-radius: 0px 4px 4px 0px;
}

.cube-form.passive label.solid + input,
.cube-form.passive label.solid + select,
.cube-form.passive label.solid + textarea,
.cube-form.passive label.solid + cube-dropdown > .value,
.cube-form.passive label.solid + cube-autocompleter > .value,
.cube-form.passive label.solid + cube-switch,
.cube-form.passive input[with-solid],
.cube-form.passive select[with-solid],
.cube-form.passive textarea[with-solid],
.cube-form.passive cube-dropdown[with-solid] > .value,
.cube-form.passive cube-autocompleter[with-solid] > .value,
.cube-form.passive cube-switch[with-solid] {
	border-radius: 4px 4px 4px 4px;
}

.cube-form *[action] + input,
.cube-form *[action] + select,
.cube-form *[action] + textarea,
.cube-form *[action] + cube-dropdown > .value,
.cube-form *[action] + cube-autocompleter > .value,
.cube-form *[action] + cube-switch {
	border-radius: 4px 0px 0px 4px;
}

.cube-form *[action] + input[with-solid],
.cube-form *[action] + cube-dropdown[with-solid] > .value,
.cube-form *[action] + cube-autocompleter[with-solid] > .value {
	border-radius: 0px;
}

.cube-form.passive *[action] + input[with-solid],
.cube-form.passive *[action] + cube-dropdown[with-solid] > .value,
.cube-form.passive *[action] + cube-autocompleter[with-solid] > .value {
	border-radius: 4px 0px 0px 4px;
}

.cube-form input[required] + label.solid,
.cube-form select[required] + label.solid,
.cube-form textarea[required] + label.solid,
.cube-form cube-dropdown[required] + label.solid,
.cube-form cube-autocompleter[required] + label.solid,
.cube-form cube-switch[required] + label.solid {
	color: #C62828;
}

.cube-form.validate input.ng-invalid.ng-dirty,
.cube-form.validate cube-dropdown.ng-invalid.ng-dirty > .value,
.cube-form.validate cube-autocompleter.ng-invalid.ng-dirty > .value,
.cube-form.validate input.ng-invalid.ng-dirty + label.solid,
.cube-form.validate cube-dropdown.ng-invalid.ng-dirty + label.solid,
.cube-form.validate cube-autocompleter.ng-invalid.ng-dirty + label.solid {
	color: #C62828;
	border-color: #E57373;
}

.cube-form.validate cube-switch.ng-invalid.ng-dirty + label.solid {
	color: #C62828;
}

.cube-form.validate input.ng-valid.ng-dirty,
.cube-form.validate cube-dropdown.ng-valid.ng-dirty > .value,
.cube-form.validate cube-autocompleter.ng-valid.ng-dirty > .value,
.cube-form.validate input.ng-valid.ng-dirty + label.solid,
.cube-form.validate cube-dropdown.ng-valid.ng-dirty + label.solid,
.cube-form.validate cube-autocompleter.ng-valid.ng-dirty + label.solid {
	color: #558B2F;
	border-color: #7CB342;
}

.cube-form.validate cube-switch.ng-valid.ng-dirty + label.solid {
	color: #558B2F;
}

.cube-form input[disabled],
.cube-form textarea[disabled],
.cube-form select[disabled],
.cube-form cube-dropdown[disabled] > .value,
.cube-form cube-autocompleter[disabled] > .value {
	pointer-events: initial;
	cursor: auto;
	opacity: 0.5;
}

.cube-form input[disabled] + label,
.cube-form textarea[disabled] + label,
.cube-form select[disabled] + label,
.cube-form cube-dropdown[disabled] + label,
.cube-form cube-autocompleter[disabled] + label {
	opacity: 0.5;
}

.cube-form.passive label.solid {
	border-color: transparent!important;
	background: transparent!important;
	padding-left: 0;
}

.cube-form *[control] *[action] {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	border: 1px #dddddd;
	border-style: solid solid solid none;
	border-radius: 0px 4px 4px 0px;
	background: #f6f6f6;
	font-size: 16px;
	line-height: 16px;
	font-weight: normal;
	padding: 8px;
	color: #333333;
	transition: background 0.3s, border-color 0.3s, color 0.3s;
	-webkit-transition: background 0.3s, border-color 0.3s, color 0.3s;
	flex-shrink: 0;
	order: 9;
	cursor: pointer;
}

.cube-form *[control] *[action]:hover {
	color: #1E88E5;
}

.cube-form *[control] > *[action]:not(:last-of-type) {
	border-radius: 0;
}

.cube-form.passive *[control] *[action] {
	border-color: #e9e9e9;
	border-left: 1px solid #ffffff;
	background: #e9e9e9;
	color: #555555;
}

.cube-form.passive *[control] *[action]:hover {
	border-color: #1E88E5;
	background: #1E88E5;	
	color: #ffffff;
}

.cube-form *[control] *[action][disabled],
.cube-form *[control] *[action][disabled]:hover {
	background: #f6f6f6;
	border-color: #f6f6f6;
	color: #aaaaaa;
	cursor: default;
}

.cube-form *[control] .description,
.cube-form *[control] .notice {
	display: inline-block;
	order: 12;
	line-height: 34px;
	margin-left: 10px;
}

.cube-form .buttons[right] {
	text-align: right;
}

.cube-form .buttons button {
	box-sizing: border-box;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 13px;
	line-height: 26px;
	height: 36px;
	border: 1px solid #a3bccc;
	background: #ffffff;
	color: #394750;
	cursor: pointer;
	margin-right: 10px;
	transition: color 0.3s, background 0.3s, border 0.3s;
	-webkit-transition: color 0.3s, background 0.3s, border 0.3s;
}

.cube-form .buttons[right] button {
	margin-left: 10px;
	margin-right: 0px;
}

.cube-form .buttons button[primary] {
	background: #1E88E5;
	color: #ffffff;
	border: 1px solid #1E88E5;
}

.cube-form .buttons button .mdi {
	float: left;
	margin-right: 5px;
	font-size: 20px;
	line-height: 26px;
}

.cube-form .buttons button:hover {
	color: #1976D2;
	border-color: #1976D2;
}

.cube-form .buttons button[primary]:hover {
	background: #1976D2;
	color: #ffffff;
	border-color: #1976D2;
}

.cube-form .buttons button[alternate]:hover {
	background: #E53935;
	color: #ffffff;
	border: 1px solid #E53935;
}

.cube-form .buttons button[disabled],
.cube-form .buttons button[disabled]:hover {
	pointer-events: initial;
	background: transparent;
	border-color: #cfdce5;
	color: #7f9fb3;	
	cursor: default;
}

@media print {

	.cube-form button,
	.cube-form *[action] {
		display: none!important;
	}

	.cube-form *[control] {
		margin-bottom: 5px;
	}

	.cube-form *[control][spaced] {
		margin-bottom: 15px;
	}

	.cube-form.passive *[control] input,
	.cube-form.passive *[control] cube-dropdown > .value,
	.cube-form.passive *[control] cube-autocompleter > .value {
		border-color: #dddddd!important;
		border-style: none none solid none;
		border-width: 1px;
		border-radius: 0!important;
	}

}

/* 
 * DROPDOWN COMPONENT
 */
cube-dropdown {
	display: inline-block;
	position: relative;
	z-index: 10;
}

cube-dropdown > .value {
	display: block;
	overflow: hidden;
	cursor: pointer;
}

cube-dropdown > .value > .wrap {
	margin: -6px -10px;
	padding: 6px 10px;
}

cube-dropdown > .value .placeholder {
	color: #777777;
}

cube-dropdown > .value .arrow,
cube-dropdown > .value button {
	float: right;
}

cube-dropdown > .value .arrow {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	border: 0px none;
	background: transparent;
	font-size: 24px;
	line-height: 24px;
	font-weight: normal;
	padding: 5px 4px 3px 4px;
	margin: -6px 0px -6px 0px;
	color: #aaaaaa;
	cursor: pointer;
	transition: color 0.3s, opacity 0.3s;
	-webkit-transition: color 0.3s, opacity 0.3s;
}

cube-dropdown > .value > .wrap:hover .arrow {
	color: #1E88E5;
}

cube-dropdown > .value.disabled > .wrap .arrow {
	opacity: 0.0;
}

cube-dropdown > .value button {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	border: 0px none;
	background: transparent;
	font-size: 20px;
	line-height: 20px;
	font-weight: normal;
	padding: 7px 6px 5px 6px;
	margin: -6px -10px -6px 0px;
	color: #333333;
	transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
	-webkit-transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
	cursor: pointer;
}

cube-dropdown > .value button[disabled]{
	opacity: 0.0;
}

cube-dropdown > .value button:hover {
	color: #1E88E5;
}

cube-dropdown > .items {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
}

cube-dropdown > .items[opened] {
	display: block;
	border-radius: 4px 0px 4px 4px;
	background: #ffffff;
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}

cube-dropdown > .items cube-datagrid {
	max-height: 260px;
}

cube-dropdown > .items > .filter input,
.cube-form cube-dropdown > .items .filter input {
	border: 1px #dddddd!important;
	border-style: none none solid none!important;
	color: #333333!important;
	background: #f9f9f9!important;
	cursor: auto!important;
	border-radius: 4px 0px 0px 0px!important;
	width: 100%;
	font-size: 13px;
}

cube-dropdown > .items .item {
	padding: 12px 10px;
	border-bottom: 1px solid #dddddd;
	cursor: pointer;
	line-height: 1.5;
	transition: background 0.3s;
	-webkit-transition: background 0.3s;
}

cube-dropdown > .items .item:last-child {
	border-bottom: 0px none;
}

cube-dropdown > .items .item:hover {
	background: #f6f6f6;
}

cube-dropdown > .items .item[selected],
cube-dropdown > .items .item[selected]:hover {
	background: #2196F3;
	color: #ffffff;
}

cube-dropdown > .items .item.add {
	line-height: 20px;
}

cube-dropdown > .items .item.add .mdi {
	font-size: 18px;
	line-height: 20px;
	margin-right: 4px;
	vertical-align: top;
}

/* 
 * AUTOCOMPLETER COMPONENT
 */
cube-autocompleter {
	display: inline-block;
	position: relative;
	z-index: 10;
}

cube-autocompleter > .value {
	padding: 0!important;
}

cube-autocompleter > .value input {
	width: 100%;
	border: 0px none!important;
	background: transparent!important;
	color: inherit!important;
}

cube-autocompleter > .items {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
}

cube-autocompleter > .items[opened] {
	display: block;
	border-radius: 4px 0px 4px 4px;
	background: #ffffff;
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}

cube-autocompleter > .items cube-datagrid {
	max-height: 260px;
}

cube-autocompleter > .items .item {
	padding: 12px 10px;
	border-bottom: 1px solid #dddddd;
	cursor: pointer;
	line-height: 1.5;
	transition: background 0.3s;
	-webkit-transition: background 0.3s;
}

cube-autocompleter > .items .item:last-child {
	border-bottom: 0px none;
}

cube-autocompleter > .items .item:hover {
	background: #f6f6f6;
}

cube-autocompleter > .items .item[selected],
cube-autocompleter > .items .item[selected]:hover {
	background: #2196F3;
	color: #ffffff;
}

/* 
 * SWITCH COMPONENT
 */
cube-switch {
	display: flex;
	flex-wrap: 1;
	position: relative;
	overflow: hidden;
	border: 0px none;
}

cube-switch button {
	flex-grow: 1;
	border: 0px none;
	background: #e8e8e8;
	color: #000000;
	font-size: 13px;
	cursor: pointer;
	margin-left: 1px;
	transition: background 0.3s, color 0.3s;
	-webkit-transition: background 0.3s, color 0.3s;
}

cube-switch > button:first-child {
	margin-left: 0;
}

cube-switch button:hover {
	background: #dcdcdc;
}

cube-switch button.selected,
cube-switch button.selected:hover {
	background: #2196F3;
	color: #ffffff;
}

cube-switch button:focus {
	outline: 0;
}

cube-switch button.color-red.selected,
cube-switch button.color-red.selected:hover {
	background: #E53935;
	color: #ffffff;
}

cube-switch button.color-green.selected,
cube-switch button.color-green.selected:hover {
	background: #558B2F;
	color: #ffffff;
}

cube-switch button[disabled]:not(.selected),
cube-switch button[disabled]:not(.selected):hover {
	cursor: default;
	background: #f3f3f3;
}

@media print {

	cube-switch button,
	.cube-form cube-switch button {
		display: inline-block!important;
		background: transparent!important;
		color: #000000!important;
		border-radius: 0!important;
		border: 1px solid #eeeeee;
		border-left-color: transparent;
		border-right-color: transparent;
	}

	cube-switch button.selected {
		border-color: #000000!important;
		font-weight: bold;;
	}

	cube-switch button[disabled] {
		color: #aaaaaa!important;
	}

}

/*
 * DATAGRID COMPONENT
 */
cube-datagrid {
	display: flex;
	flex-direction: column;
}

cube-datagrid > .records {
	position: relative;
	flex-grow: 1;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 0;
}

cube-datagrid > .summary {
	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
	background: #ebf1f5;
	padding: 20px;
	z-index: 20;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
}

cube-datagrid > .records > *[record] {
	display: block;
	padding: 16px 20px;
	transition: background 0.3s, border 0.3s;
	-webkit-transition: background 0.3s, border 0.3s;
}

cube-datagrid > .records > *[record][with-flag] {
	border-left: 8px solid transparent;
}

cube-datagrid > .records > *[record][with-flag].flag-orange {
	border-left-color: #FF9800;
}

cube-datagrid > .records > *[record][with-flag].flag-green {
	border-left-color: #8BC34A;
}

cube-datagrid > .records > *[record][with-flag].flag-red {
	border-left-color: #E53935;
}

cube-datagrid > .records > *[record][with-flag].flag-black {
	border-left-color: #444444;
}

cube-datagrid > .records > *[record][with-flag].flag-blue {
	border-left-color: #1E88E5;
}

cube-datagrid > .records > *[record]:nth-child(odd) {
	background: #f6f6f6;
}

cube-datagrid > .records > *[record]:hover,
cube-datagrid > .records > *[record]:nth-child(odd):hover {
	background: #d9eafa;
	cursor: pointer;
}

cube-datagrid > .records > *[record] p {
	line-height: 22px;
}

cube-datagrid > .records > *[record] p .mdi {
	font-size: 18px;
	color: #666666;
	line-height: 20px;
	margin-right: 4px;
	vertical-align: top;
}

cube-datagrid > .records > *[record] .title {
	font-weight: normal;
	font-size: 16px;
	line-height: 22px;
}

cube-datagrid > .records > *[record] a.title {
	text-decoration: none;
	color: #000000;
}

cube-datagrid > .records > *[record] a.title:hover {
	color: #1E88E5;
}

cube-datagrid > .records > *[record] .icon {
	float: left;
}

cube-datagrid > .records > *[record] .icon .mdi {
	line-height: 44px;
	font-size: 32px;
	color: #444444;
}

cube-datagrid > .records > *[record] .mid-icon {
	line-height: 44px;
	font-size: 24px;
	float: left;
	margin-right: 18px;
	color: rgba(0, 0, 0, 0.3);
}

cube-datagrid > .records > *[record] .key {
	display: inline-block;
	width: 50px;
}

cube-datagrid > .records > *[record] .key.mid { width: 90px; }
cube-datagrid > .records > *[record] .key.long { width: 120px; }

cube-datagrid > .records > *[record] cube-switch {
	border-radius: 5px;
	margin: 4px 0px;
	border: 2px solid transparent;
	transition: border 0.3s, background 0.3s;
	-webkit-transition: border 0.3s, background 0.3s;
}

cube-datagrid > .records > *[record]:hover cube-switch {
	border-color: #ffffff;
	background: #ffffff;
}

cube-datagrid > .records > *[record] cube-switch button {
	padding: 8px 14px;
}

cube-datagrid > .records > *[record] cube-item-lock {
	margin: 4px 0px;
}

@keyframes datagrid-flash-even {
    0% 	 { background: transparent; }
    1%  { background: #FFF59D; }
    100% { background: transparent; }
}

@-webkit-keyframes datagrid-flash-even {
    0% 	 { background: transparent; }
    1%  { background: #FFF59D; }
    100% { background: transparent; }
}

@keyframes datagrid-flash-odd {
    0% 	 { background: #f6f6f6; }
    1%  { background: #FFF59D; }
    100% { background: #f6f6f6; }
}

@-webkit-keyframes datagrid-flash-odd {
    0% 	 { background: #f6f6f6; }
    1%  { background: #FFF59D; }
    100% { background: #f6f6f6; }
}

cube-datagrid > .records > *[flash] {
	animation-name: datagrid-flash-even;
    animation-duration: 5s;
    animation-iteration-count: 1;
}

cube-datagrid > .records > *[record][flash]:nth-child(odd) {
	animation-name: datagrid-flash-odd;
}

cube-datagrid > .records > button.more {
	display: none;
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	font-size: 13px;
	color: #333333;
	text-align: center;
	border: 1px solid #cccccc;
	border-style: solid none;
	background: transparent;
	cursor: pointer;
	transition: color 0.3s, background 0.3s;
	-webkit-transition: color 0.3s, background 0.3s;
	text-transform: uppercase;
}

cube-datagrid > .records > button.more:hover {
	color: #1E88E5;
}

cube-datagrid > .records > button.more[visible="true"] {
	display: block;
}

cube-datagrid > .records > .not-found {
	text-align: center;
	padding: 20px;
}

@media print {

	cube-datagrid > .records > *[record] {
		page-break-inside: avoid;
		border-bottom: 1px solid #dddddd;
	}

	cube-datagrid > .records > button.more {
		display: none!important;
	}

}

/*
 * DIALOG COMPONENT
 */
dialog-component {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	background: rgba(199, 205, 210, 0.8);
	opacity: 0.0;
	transition: opacity 0.4s;
	-webkit-transition: opacity 0.4s;
}

dialog-component[modaled] {
	opacity: 1.0;
}

dialog-component > .wrap {
	position: absolute;
	left: 50%;
	top: 50%;
}

dialog-component > .wrap > .container {
	position: absolute;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0px 3px 14px rgba(0, 0, 0, 0.2);
	overflow-x: hidden;
	overflow-y: auto;
}

@media all and (max-width: 379px), all and (max-height: 299px) {

	dialog-component > .wrap > .container {
		border-radius: 0;
	}

}

/*
 * DIALOG HEADER
 */
cube-dialog-header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	border-bottom: 1px solid #dddddd;
}

cube-dialog-header h1 {
	padding: 16px 16px 12px 16px;
	font-weight: 300;
	font-size: 22px;
	color: #1976D2;
	line-height: 32px;
	flex-grow: 1;
}

cube-dialog-header h1 .mdi {
	font-size: 24px;
	line-height: 32px;
	vertical-align: top;
	margin-right: 4px;
}

cube-dialog-header > .actions {
	flex-shrink: 0;
	padding: 12px 12px 8px 12px;
}

cube-dialog-header > .actions button {
	background: transparent;
	border: 0px none;
	width: 40px;
	height: 40px;
	padding: 7px;
	font-size: 26px;
	color: #333333;
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;
}

cube-dialog-header > .actions button:hover,
cube-dialog-header > .actions button:focus {
	color: #1E88E5;
	outline: 0;
}

/*
 * ACTION BAR COMPONENT
 */
cube-actionbar {
	padding: 10px;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	background: #ebf1f5;
}

cube-actionbar[separator] {
	border-top: 1px solid #d8e7f0;
}

cube-actionbar[shadow] {
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

cube-actionbar button {
	box-sizing: border-box;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 13px;
	line-height: 26px;
	height: 36px;
	border: 1px solid #a3bccc;
	background: #ffffff;
	color: #394750;
	cursor: pointer;
	margin: 5px;
	transition: color 0.3s, background 0.3s, border 0.3s;
	-webkit-transition: color 0.3s, background 0.3s, border 0.3s;
}

cube-actionbar .left {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	order: 99;
}

cube-actionbar .left:empty {
	display: none;
}

cube-actionbar button[primary] {
	background: #1E88E5;
	color: #ffffff;
	border: 1px solid #1E88E5;
}

cube-actionbar button .mdi {
	float: left;
	margin-right: 5px;
	font-size: 20px;
	line-height: 26px;
}

cube-actionbar button:hover {
	color: #1976D2;
	border-color: #1976D2;
}

cube-actionbar button[primary]:hover {
	background: #1976D2;
	color: #ffffff;
	border-color: #1976D2;
}

cube-actionbar button[alternate]:hover {
	background: #E53935;
	color: #ffffff;
	border: 1px solid #E53935;
}

cube-actionbar button[disabled],
cube-actionbar button[disabled]:hover {
	pointer-events: initial;
	background: transparent;
	border-color: #cfdce5;
	color: #7f9fb3;	
	cursor: default;
}

@media print {

	cube-actionbar button {
		display: none!important;
	}

}

/*
 * LOADING DOTS COMPONENT
 */
cube-loading-dots {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.8);
	opacity: 0.0;
	transition: opacity 0.5s, z-index 0.4s;
	-webkit-transition: opacity 0.5s, z-index 0.4s;
}

cube-loading-dots[show="true"] {
	opacity: 1.0;
	z-index: 30;
}

cube-loading-dots .box {
	position: absolute;
	left: 50%;
	top: 50%;
}

cube-loading-dots .wrap {
	position: absolute;
	left: -6px;
	top: -6px;
}

cube-loading-dots span {
	display: inline-block;
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 12px;
	background: #2196F3;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

cube-loading-dots[show="true"] span {
	animation-name: loading-ball;
}

cube-loading-dots span.a { left: -24px; }
cube-loading-dots span.b { animation-delay: 0.12s; }
cube-loading-dots span.c { left: 24px; animation-delay: 0.24s; }

@media print {

	cube-loading-dots {
		display: none!important;
	}

}

/*
 * INFOVIEW COMPONENT
 */
cube-infoview {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	background: #ffffff;
	opacity: 0.0;
	transition: opacity 0.5s, z-index 0.4s;
	-webkit-transition: opacity 0.5s, z-index 0.4s;
	overflow-x: hidden;
	overflow-y: scroll;
}

cube-infoview[show="true"] {
	opacity: 1.0;
	z-index: 30;
}

cube-infoview > .wrap {
	position: absolute;
	left: 50%;
	top: 40%;
	text-align: center;
	margin: auto;
	color: #aaaaaa;
}

cube-infoview > .wrap > .container {
	position: absolute;
	width: 280px;
	left: -140px;
}

cube-infoview > .wrap .mdi {
	font-size: 48px;
	margin-bottom: 30px;
}

cube-infoview > .wrap h1 {
	font-size: 26px;
	font-weight: 300;
}

/*
 * TOAST COMPONENT
 */
toast-outlet {
	position: fixed;
	left: 25%;
	right: 25%;
	bottom: 20px;
	z-index: 250;
}

toast-outlet > toast-message {
	display: block;
	position: relative;
	height: 0px;
	color: #ffffff;
	transition: height 0.5s;
	-webkit-transition: height 0.5s;
}

toast-outlet > toast-message[visible] {
	height: 70px;
}

toast-outlet > toast-message > .wrap {
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	bottom: -40px;
	background: rgba(0, 0, 0, 0.8);
	padding: 14px;
	border-radius: 6px;
	box-sizing: border-box;
	opacity: 0.0;
	transition: bottom 0.5s, opacity 0.5s;
	-webkit-transition: bottom 0.5s, opacity 0.5s;
	cursor: pointer;
}

toast-outlet > toast-message[visible] > .wrap {
	bottom: 0;
	opacity: 1.0;
}

toast-outlet > toast-message > .wrap .mdi {
	font-size: 32px;
	float: left;
	margin-right: 12px;
}

toast-outlet > toast-message > .wrap p {
	line-height: 16px;
}

toast-outlet > toast-message > .wrap .title {
	font-size: 14px;
	font-weight: normal;
}

toast-outlet > toast-message > .wrap .title[fullsize] {
	line-height: 32px;
}

toast-outlet > toast-message > .wrap .description {
	font-size: 12px;
	font-weight: 300;
}

toast-outlet > toast-message > .wrap .description:empty {
	display: none;
}

toast-outlet > toast-message[type="info"] { color: #80D8FF; }
toast-outlet > toast-message[type="success"] { color: #B2FF59; }
toast-outlet > toast-message[type="warn"] { color: #FFC400; }
toast-outlet > toast-message[type="error"] { color: #FF8A80; }

@media all and (max-width: 1199px) {

	toast-outlet {
		left: 15%;
		right: 15%;
	}

}

@media all and (max-width: 639px) {

	toast-outlet {
		left: 5%;
		right: 5%;
	}

}

@media all and (max-width: 479px) {

	toast-outlet > toast-message[visible] {
		height: 150px;
	}

}

/*
 * CONFIRMATION DIALOG COMPONENT
 */
confirmation-dialog,
information-dialog,
shutdown-dialog {
	display: block;
	width: 550px;
	height: 200px;	
}

information-dialog,
shutdown-dialog {
	height: 230px;
}

confirmation-dialog .content,
information-dialog .content,
shutdown-dialog .content {
	padding: 30px;
	color: #333333;
}

confirmation-dialog h1,
information-dialog h1,
shutdown-dialog h1 {
	font-size: 20px;
	font-weight: 300;
	line-height: 32px;
}

confirmation-dialog h1 .mdi,
information-dialog h1 .mdi,
shutdown-dialog h1 .mdi {
	font-size: 32px;
	line-height: 32px;
	vertical-align: top;
	margin-right: 10px;
}

confirmation-dialog p,
information-dialog p,
shutdown-dialog p {
	font-size: 15px;
	line-height: 1.3;
	padding-top: 20px;
}

/*
 * TAG FILTER COMPONENT
 */
cube-tag-filter {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: -3px;
}

cube-tag-filter button {
	margin: 3px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: normal;
	color: #043758;
	background: #d1dee8;
	border-radius: 10px;
	border: 0px none;
	flex-grow: 1;
	text-align: center;
	cursor: pointer;
	transition: background 0.3s, color 0.3s;
	-webkit-transition: background 0.3s, color 0.3s;
}

cube-tag-filter button:focus {
	outline: 0;
}

cube-tag-filter button:hover {
	background: #436076;
	color: #ffffff;

}

cube-tag-filter button.selected {
	background: #2196F3;
	color: #ffffff;
}

cube-tag-filter button.selected:hover {
	background: #1976D2;
}

/*
 * USER AVATAR COMPONENT
 */
cube-user-avatar {
	display: inline-block;
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 49px;
	overflow: hidden;
	background: #dddddd;
	color: #999999;
}

cube-user-avatar .mdi {
	font-size: 32px;
	padding: 8px;
}

cube-user-avatar img {
	max-width: 100%;
	height: auto;
}

cube-user-avatar .mdi.overlay {
	position: absolute;
	left: 0;
	top: 0;
	color: rgba(255, 255, 255, 0.6);
}

cube-user-avatar[size="32"] {
	width: 32px;
	height: 32px;
}

cube-user-avatar[size="32"] .mdi {
	font-size: 24px;
	padding: 4px;
}

cube-user-avatar[size="36"] {
	width: 36px;
	height: 36px;
}

cube-user-avatar[size="36"] .mdi {
	font-size: 24px;
	padding: 6px;
}

cube-user-avatar[size="42"] {
	width: 42px;
	height: 42px;
}

cube-user-avatar[size="42"] .mdi {
	font-size: 26px;
	padding: 8px;
}

cube-user-avatar[size="64"] {
	width: 64px;
	height: 64px;
}

cube-user-avatar[size="64"] .mdi {
	font-size: 32px;
	padding: 8px;
}

/*
 * FEED COMPONENT
 */
cube-feed {
	display: block;
	position: relative;
}

cube-feed cube-datagrid-record {
	display: block;
	padding: 8px 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	line-height: 1.5;
}

cube-feed cube-datagrid-record[iscomment] {
	background: #ffffff;
}

cube-feed cube-datagrid .records {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

cube-feed cube-datagrid .records > cube-datagrid-record:last-of-type {
	border-bottom: 0px none;
}

cube-feed cube-datagrid-record cube-user-avatar {
	float: left;
	margin-right: 14px;
}

cube-feed cube-datagrid-record .object {
	font-size: 13px;
	margin-bottom: 4px;
	padding-top: 2px;
}

cube-feed cube-datagrid-record .message {
	padding-top: 8px;
	padding-left: 62px;
	font-size: 12px;
}

cube-feed cube-datagrid-record .message[comment] {
	padding-top: 0px;
}

cube-feed cube-datagrid-record .user {
	font-weight: normal;
	color: #000000;
}

cube-feed cube-datagrid-record .action {
	color: #043758;
}

cube-feed cube-datagrid-record .amount {
	color: #043758;
	font-weight: normal;
}

cube-feed cube-datagrid-record .content {
	padding-top: 8px;
	white-space: pre-wrap;
	font-size: 13px;
	color: #000000;
	margin-bottom: 4px;
}

cube-feed cube-datagrid-record .attachments {
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: -1%;
	margin-right: -1%;
	padding-top: 10px;
}

cube-feed cube-datagrid-record .attachments li {
	text-align: center;
	width: 48%;
	margin: 1%;
	flex-grow: 0;
	word-wrap: break-word;
}

cube-feed cube-datagrid-record .attachments li a img {
	max-width: 100%;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.0);
	transition: box-shadow 0.3s;
	-webkit-transition: box-shadow 0.3s;
}

cube-feed cube-datagrid-record .attachments li a:hover img {
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
}

cube-feed cube-datagrid-record .attachments li a {
	text-decoration: none;
}

cube-feed cube-datagrid-record .attachments li a .mdi {
	display: block;
	font-size: 32px;
	margin-bottom: 5px;
}

cube-feed cube-datagrid-record .attachments li a .icon {
	display: block;
	border: 1px solid #dddddd;
	border-radius: 4px;
	padding: 10px 8px;
	transition: border 0.3s;
	-webkit-transition: border 0.3s;
}

cube-feed cube-datagrid-record .attachments li a:hover .icon {
	border-color: #2196F3;
}

cube-feed cube-datagrid-record .label button {
	float: right;
	width: 24px;
	height: 24px;
	font-size: 20px;
	padding: 2px;
	border-radius: 28px;
	color: #666666;
	background: transparent;
	border: 0px none;
	vertical-align: top;
	opacity: 0.0;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	cursor: pointer;
}

cube-feed cube-datagrid-record .label button:hover {
	color: #1976D2;
}

cube-feed cube-datagrid-record:hover .label button {
	opacity: 1.0;
}

cube-feed form {
	position: relative;
	padding-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

cube-feed form cube-buttons {
	display: block;
}

cube-feed form .attachments {
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: -1%;
	margin-right: -1%;
	margin-bottom: 10px;
}

cube-feed form .attachments li {
	width: 31%;
	flex-grow: 0;
	margin: 1%;
	text-align: center;
	word-wrap: break-word;
	position: relative;
	display: block;
	border: 1px solid #dddddd;
	border-radius: 4px;
	padding: 10px 8px;
	transition: border 0.3s;
	-webkit-transition: border 0.3s;
	box-sizing: border-box;
	background: #ffffff;
}

cube-feed form .attachments li img {
	max-width: 100%;
	margin-bottom: 8px;
	margin-left: -8px;
	margin-right: -8px;
}

cube-feed form .attachments li .mdi {
	display: block;
	font-size: 32px;
	margin-bottom: 5px;
}

cube-feed form .attachments li.icon {
	padding-top: 40px;
	padding-bottom: 20px;
}

cube-feed form .attachments li button {
	position: absolute;
	right: 4px;
	top: 4px;
	width: 24px;
	height: 24px;
	border: 0px none;
	background: #333333;
	color: #ffffff;
	padding: 4px;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.3s;
	-webkit-transition: background 0.3s;
	z-index: 10;
}

cube-feed form .attachments li .label {
	display: block;
	max-height: 30px;
	overflow: hidden;
}

cube-feed form .attachments li button:hover {
	background: #F44336;
}

cube-feed form .attachments li button .mdi {
	font-size: 16px;
}

cube-feed-edit-dialog {
	display: block;
	width: 600px;
	height: 400px;
}

/*
 * LOCK COMPONENT
 */
cube-lock {
	display: inline-block;
}

cube-lock > .lock {
	display: inline-block;
}

cube-lock > .lock > cube-user-avatar {
	float: left;
	margin-right: 8px;
}

cube-lock > .lock > .user {
	display: inline-block;
}

cube-lock > .lock > .user strong {
	font-weight: normal;
	color: #000000;
}

cube-lock > .lock button {
	margin: 0px 0px 0px 10px;
}

cube-lock[size="36"] {
	line-height: 36px;
}

cube-lock[size="36"] > .lock .user {
	line-height: 38px;
	height: 36px;
}

cube-item-lock {
	display: inline-block;
}

cube-item-lock > .lock {
	display: inline-block;
}

cube-item-lock[size="36"] {
	width: 36px;
	height: 36px;
}

@media print {

	cube-lock,
	cube-item-lock {
		display: none!important;
	}

}

/*
 * COMPONENT LINK
 */
component-link {
	display: block;
}

component-link a {
	display: block;
	text-decoration: none;
	color: inherit;
}

component-link *[link-content] {
	display: block;
	padding: 8px 10px;
	background: #f6f6f6;
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	line-height: 18px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.3s;
	-webkit-transition: background 0.3s;
}

component-link *[link-content]:hover {
	background: #eeeeee;
}

component-link *[link-content] .mdi.icon {
	font-size: 24px;
	margin-right: 10px;
	color: #2196F3;
}

component-link *[link-content] *[main] {
	flex-grow: 1;
}

component-link *[link-content] *[aside] {
	text-align: right;
}

component-link *[link-content] .title {
	font-size: 14px;
	color: #1E88E5;
	font-weight: normal;
}

component-link *[link-content].flag-green .mdi.icon,
component-link *[link-content].flag-green .title {
	color: #558B2F;
}

component-link *[link-content].flag-red .mdi.icon,
component-link *[link-content].flag-red .title {
	color: #D32F2F;
}

/*
 * TILES COMPONENT
 */
cube-tiles {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: -10px;
}

cube-tiles h2 {
	font-weight: 500;
	font-size:16px;
	text-transform: uppercase;
	width: 100%;
	margin: 30px 10px 0px 10px;
	padding-bottom: 10px;
	color: #666666;
}

cube-tiles h2:first-of-type {
	margin-top: 10px;
}

cube-tiles *[tile] {
	margin: 10px;
	padding: 25px;
	border: 1px solid #eeeeee;
	border-radius: 4px;
	text-decoration: none;
	text-align: center;
	font-weight: 300;
	font-size: 16px;
	min-width: 160px;
	color: #cccccc;
	transition: color 0.3s, border 0.3s;
	-webkit-transition: color 0.3s, border 0.3s;
}

cube-tiles *[tile] .mdi {
	display: block;
	font-size: 32px;
	margin-bottom: 14px;
}

cube-tiles a[tile] {
	color: #333333;
	border-color: #dddddd;
}

cube-tiles a[tile]:hover {
	color: #1E88E5;
	border-color: #1E88E5;
}

@media all and (max-width: 559px) {

	cube-tiles *[tile] {
		flex-grow: 1;
	}

}

/*
 * TABS
 */
cube-tab-switch {
	display: flex;
	flex-direction: column;
}

cube-tab-switch > .tabs {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-shrink: 0;
	background: #f6f6f6;
}

cube-tab-switch[separated] > .tabs {
	border-bottom: 1px solid #dddddd;
}

cube-tab-switch > .tabs li {
	display: inline-block;
	position: relative;
	flex-grow: 1;
	padding: 18px 30px 16px 30px;
	text-align: center;
	cursor: pointer;
	text-transform: uppercase;
}

cube-tab-switch > .tabs li::before {
	position: absolute;
	content: '';
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: transparent;
	transition: background 0.3s;
	-webkit-transition: background 0.3s;
}

cube-tab-switch > .tabs li:hover::before {
	background: #dddddd;
}

cube-tab-switch > .tabs li[selected]::before,
cube-tab-switch > .tabs li[selected]:hover::before {
	background: #2196F3;
}

cube-tab-switch > .content {
	flex-grow: 1;
	position: relative;
}

cube-tab > .tab {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

cube-tab > .tab[hidden] {
	display: none;
}

/*
 * ALERTS
 */
.alert {
	margin-bottom: 16px;
	text-align: center;
	padding: 12px;
	line-height: 1.43;
	background: #FFF8E1;
	border: 1px solid #FFB300;
	color: #000000;
	font-weight: normal;
	border-radius: 4px;
}

/*
 * TAG LABELS
 */
.tag-label {
	display: inline-block;
	vertical-align: middle;
	font-size: 10px;
	line-height: 10px;
	background: #555555;
	color: #ffffff;
	border-radius: 9px;
	padding: 4px 5px 3px 5px;
	margin-bottom: 2px;
}

.tag-label.warning {
	background: #EF6C00;
}

/*
 * NOTIFICATIONS
 */
cube-notifications .items {
	margin-bottom: 10px;
}

cube-notifications .item {
	display: block;
	margin-bottom: 5px;
}

cube-notifications .item .wrap {
	display: block;
	padding: 6px 8px;
	background: #f6f6f6;
	border-radius: 4px;
	border: 1px solid transparent;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	line-height: 24px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.3s;
	-webkit-transition: background 0.3s;
}

cube-notifications:not([disabled]) .item .wrap {
	cursor: pointer;
}

cube-notifications .item .wrap:hover {
	background: #eeeeee;
}

cube-notifications .items[disabled] .item .wrap,
cube-notifications .items[disabled] .item .wrap:hover {
	cursor: auto;
	background: transparent;
	border-color: #f3f3f3;
}

cube-notifications .item .wrap .mdi.icon {
	font-size: 24px;
	margin-right: 10px;
	color: #009688;
}

cube-notifications .item .wrap .title {
	font-size: 13px;
	color: #009688;
	font-weight: normal;
	padding: 0px 5px;
	flex-grow: 1;
	max-width: 200px;
	overflow: hidden;
}

cube-notifications .item .wrap .topics {
	list-style: none;
	text-align: right;
	line-height: 20px;
	padding: 2px;
	flex-grow: 1;
}

cube-notifications .item .wrap .topics li {
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	padding: 0px 7px;
	margin-left: 3px;
	background: #009688;
	color: #ffffff;
	border-radius: 12px;
}

cube-notifications .item .wrap button {
	font-size: 20px;
	padding: 2px;
	border: 0px none;
	border-radius: 24px;
	max-width: 24px;
	color: #999999;
	background: transparent;
	opacity: 1.0;
	transition: color 0.3s, opacity 0.3s, max-width 0.3s, margin 0.3s, padding 0.3s;
	-webkit-transition: color 0.3s, opacity 0.3s, max-width 0.3s, margin 0.3s, padding 0.3s;
	cursor: pointer;
	margin-left: 5px;
	overflow: hidden;
}

cube-notifications .items[disabled] .item .wrap button {
	opacity: 0;
	max-width: 0px;
	margin-left: 0;
	padding-left: 0;
	padding-right: 0;
}

cube-notifications .item .wrap button:hover {
	color: #E53935;
}

cube-notifications-dialog {
	display: block;
	width: 480px;
	height: 400px;
}

cube-notifications-dialog h2 {
	font-weight: 500;
	font-size: 13px;
	margin-bottom: 14px;
}

cube-notifications-dialog cube-tag-filter {
	margin-bottom: 24px;
}

/*
 * WALLET COMPONENT
 */
cube-wallet {
	display: block;
}

cube-wallet[compact]{
	display: flex;
	flex-wrap: wrap;
}

cube-wallet .counter {
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

cube-wallet[compact] .counter {
	flex-grow: 1;
	margin-bottom: 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 5px 0px 0px 5px;
	border-right: 0px none;
}

cube-wallet .amount,
cube-wallet .consumption {
	padding: 12px 18px;
	min-width: 100px;
}

cube-wallet[compact] .amount,
cube-wallet[compact] .consumption,
cube-wallet[compact] .vs {
	min-width: 0;
	padding: 11px;
}

cube-wallet .amount {
	width: 34%;
	flex-grow: 1;
}

cube-wallet[compact] .amount {
	width: 110px;
	flex-grow: 0;
}

cube-wallet:not([compact]) .vs {
	display: none;
}

cube-wallet[compact] .vs {
	width: 110px;
	flex-grow: 0;
}

cube-wallet .amount strong,
cube-wallet .consumption strong {
	font-weight: normal;
}

cube-wallet .consumption,
cube-wallet .vs {
	border-left: 1px solid #dddddd;
	flex-grow: 1;
}

cube-wallet .amount > span,
cube-wallet .consumption > span,
cube-wallet .vs > span {
	display: block;
	line-height: 1.0;
	flex-grow: 1;
	text-align: right;
}

cube-wallet .vs .mdi {
	margin-left: 4px;
	font-size: 16px;
	line-height: 18px;
	vertical-align: top;
}

cube-wallet[compact] .amount > span,
cube-wallet[compact] .consumption > span,
cube-wallet[compact] .vs > span {
	line-height: 18px;
}

cube-wallet .counter .value {
	font-size: 24px;
	line-height: 24px;
	margin-bottom: 10px;
}

cube-wallet .counter .value.warn {
	color: #EF6C00;
}

cube-wallet .counter .value.zero {
	color: #C62828;
}

cube-wallet .counter .value.gray {
	color: #999999;
}

cube-wallet[compact] .counter .value {
	font-size: 16px;
	font-weight: normal;
	line-height: 18px;
	margin-bottom: 0;
}

cube-wallet[compact] .counter .vs .value {
	font-size: 13px;
}

cube-wallet[compact] .counter .expire.big {
	display: none;
}

cube-wallet .counter .expire {
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 10px;
	position: relative;
	cursor: pointer;
}

cube-wallet[compact] .counter .expire {
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 0;
}

cube-wallet .counter .expire .expire-hint {
	position: absolute;
	background: #666666;
	padding: 6px 8px;
	border-radius: 3px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 400;
	text-align: center;
	width: 90px;
	right: -2px;
	top: -26px;
	line-height: 1.0;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	opacity: 0.0;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
}

cube-wallet .counter .expire:hover .expire-hint {
	opacity: 1.0;
}

cube-wallet .counter .loan {
	color: #C62828;
}

cube-wallet[compact] .counter .loan {
	display: none;
}

cube-wallet .counter .daily {
	color: #1976D2;
}

cube-wallet[compact] .counter .daily .per-day {
	display: none;
}

cube-wallet .actions {
	display: flex;
	flex-direction: row;
	margin: 0 -5px;
}

cube-wallet[compact] .actions {
	margin: 0;
}

cube-wallet .actions button {
	flex-grow: 1;
	width: 33%;
	box-sizing: border-box;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 13px;
	line-height: 26px;
	height: 36px;
	background: #1E88E5;
	color: #ffffff;
	border: 1px solid #1E88E5;
	cursor: pointer;
	margin: 0px 5px;
	transition: color 0.3s, background 0.3s, border 0.3s;
	-webkit-transition: color 0.3s, background 0.3s, border 0.3s;
}

cube-wallet[compact] .actions button {
	width: auto;
	border-radius: 0;
	margin: 0;
	padding: 8px 12px;
	height: 42px;
	border-right-style: none;
}

cube-wallet .actions button .mdi {
	margin-right: 12px;
	font-size: 20px;
	line-height: 26px;
	vertical-align: bottom;
}

cube-wallet .actions button:hover {
	background: #1976D2;
	color: #ffffff;
	border-color: #1976D2;
}

cube-wallet .actions button.btn-bonus {
	background: #FF9100;
	border-color: #FF9100;
}

cube-wallet .actions button.btn-bonus:hover {
	background: #F57C00;
	border-color: #F57C00;	
}

cube-wallet .actions button.btn-loan {
	background: #009688;
	border-color: #009688;
}

cube-wallet .actions button.btn-loan:hover {
	background: #00897B;
	border-color: #00897B;
}

cube-wallet .actions button[disabled],
cube-wallet .actions button[disabled]:hover {
	pointer-events: initial;
	background: transparent!important;
	border-color: #cfdce5!important;
	color: #7f9fb3!important;
	cursor: default;
}

cube-wallet[compact] .actions button {
	background: rgba(255, 255, 255, 0.8);
	border-color: rgba(0, 0, 0, 0.15);
	color: #043758;
}

cube-wallet[compact] .actions button:hover {
	color: #1E88E5;
	background: rgba(255, 255, 255, 0.8);
	border-color: rgba(0, 0, 0, 0.15);
}

cube-wallet[compact] .actions button.btn-loan {
	border-right-style: solid;
}

cube-wallet[compact] .actions button.btn-bonus .label,
cube-wallet[compact] .actions button.btn-loan .label {
	display: none;
}

cube-wallet[compact] .actions button.btn-bonus .mdi,
cube-wallet[compact] .actions button.btn-loan .mdi {
	margin-right: 0;
}

cube-wallet[compact] .actions button.btn-loan {
	border-radius: 0px 4px 4px 0px;
}

@media print {

	cube-wallet .actions {
		display: none!important;
	}

	cube-wallet * {
		border-radius: 0!important;
	}

	cube-wallet[compact] .counter {
		border: 1px solid rgba(0, 0, 0, 0.15);
	}

}

/*
 * ACCOUNT MODULE
 */
module-account #account-header {
	margin-bottom: 30px;
}

module-account #account-header cube-user-avatar {
	display: block;
	float: left;
	margin-right: 16px;
}

module-account #account-header h2 {
	line-height: 48px;
	font-weight: 100;
	font-size: 26px;
	margin: 0;
	padding: 0;
}

module-account cube-header cube-user-avatar {
	vertical-align: top;
	margin-right: 4px;
}

module-account cube-header *[crumb],
module-account cube-header *[crumb] span {
	display: inline-block;
	line-height: 32px;
}

module-account #inbox .toolbar {
	padding: 5px 10px 2px 10px;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
	margin: 0;
}

module-account #inbox .toolbar .title {
	font-weight: 300;
	font-size: 18px;
	line-height: 24px;
}

module-account #inbox .toolbar .title .mdi {
	font-size: 24px;
	color: #1E88E5;
	margin-right: 8px;
	vertical-align: top;
}

module-account #inbox .toolbar cube-buttons {
	padding: 4px 10px;	
}

module-account #inbox cube-datagrid-record {
	background: transparent;
	border-bottom: 1px solid #dedede;
}

module-account #inbox cube-datagrid-record cube-user-avatar {
	float: left;
}

module-account #inbox cube-datagrid-record > header,
module-account #inbox cube-datagrid-record > .message {
	margin-left: 70px; 
}

module-account #inbox cube-datagrid-record > .message {
	padding-bottom: 8px;
	line-height: 1.7;
	white-space: pre-wrap;
	font-size: 14px;
}

module-account #inbox cube-datagrid-record > header {
	display: block;
	min-height: 24px;
	line-height: 24px;
	font-size: 15px;
	font-weight: normal;
	margin-bottom: 10px;
	padding-top: 4px;
}

module-account #inbox cube-datagrid-record > header button,
module-account #inbox cube-datagrid-record > header .date {
	display: block;
	float: right;
} 

module-account #inbox cube-datagrid-record > header button {
	background: transparent;
	border: 0px none;
	font-size: 16px;
	padding: 4px;
	cursor: pointer;
	color: #666666;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;
}

module-account #inbox cube-datagrid-record > header button:hover {
	color: #1976D2;
}

module-account #inbox cube-datagrid-record > header .date {
	font-size: 13px;
	font-weight: 300;
	color: #666666;
	margin-right: 10px;
}

module-account #inbox .not-found {
	padding: 40px;
	font-size: 16px;
	color: #666666;
}

module-account-compose {
	display: block;
	width: 600px;
	height: 500px;
}

/*
 * CUSTOMER MODULE
 */
module-customer-add {
	display: block;
	width: 900px;
	height: 630px;
}

module-customer-add-contact {
	display: block;
	width: 500px;
	height: 600px;
}

module-customer-payment {
	display: block;
	width: 500px;
	height: 530px;
}

module-customer-payment .calc {
	padding-top: 20px;
}

module-customer-payment .calc input {
	width: 50px;
	margin-right: 4px;
}

module-customer-detail .notif-notice {
	font-size: 12px;
	color: #666666;
	margin-left: 25%;
	margin-bottom: 0;
}

module-customer-detail .billing-warning {
	min-height: 32px;
	max-width: 600px;
	color: #F57C00;
	margin-bottom: 10px;
	padding-top: 16px;
	font-size: 13px;
	line-height: 16px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

module-customer-detail .billing-warning .mdi {
	font-size: 34px;
	margin-right: 10px;
}

module-customer-detail .billing-warning > p {
	margin-bottom: 16px;
	padding-left: 42px;
	min-height: 34px;
	flex-grow: 1;
}

module-customer-detail .billing-warning > p:last-child {
	margin-bottom: 0;
}

module-customer-detail cube-wallet {
	margin-bottom: 30px;
}

module-customer-detail #services {
	margin-bottom: 10px;
}

module-customer-detail #services component-link {
	margin-bottom: 5px;
}

/*
 * INTERNET CONNECTIONS MODULE
 */
module-internet-connections-add {
	display: block;
	width: 960px;
	height: 610px;
}

module-internet-connections-detail #connection-status {
	border: 1px solid #dddddd;
	border-radius: 4px;
	margin-bottom: 29px;
}

module-internet-connections-detail #connection-status > .row {
	border-bottom: 1px solid #dddddd;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

module-internet-connections-detail #connection-status > .row:last-child {
	border-bottom: 0px none;
}

module-internet-connections-detail #connection-status > .row > p {
	box-sizing: border-box;
	padding: 12px 18px;
	border-left: 1px solid #dddddd;
	width: 50%;
	flex-grow: 1;
	text-align: right;
}

module-internet-connections-detail #connection-status > .row > p:first-child {
	border-left: 0px none;
}

module-internet-connections-detail #connection-status .mdi {
	float: left;
}

module-internet-connections-detail #connection-status big,
module-internet-connections-detail #connection-status span {
	display: block;
	padding-top: 5px;
}

module-internet-connections-detail #connection-status big {
	font-size: 18px;
	font-weight: 300;
	margin-bottom: 5px;
	padding-top: 0;
}

module-internet-connections-detail #connection-status small {
	font-size: 12px;
	color: #1E88E5;
	font-weight: 500;
}

module-internet-connections-detail #connection-status .active {
	font-weight: normal;
	color: #558B2F;
}

module-internet-connections-detail #connection-status .inactive {
	font-weight: normal;
	color: #C62828;
}

module-internet-connections-detail .unauth-notice {
	font-size: 12px;
	color: #666666;
	margin-left: 25%;
	margin-bottom: 20px;
}


module-internet-connections-detail .public-addresses {
	padding-top: 20px;
}

module-internet-connections-detail component-link {
	margin-bottom: 5px;
}

/*
 * INTERNET PUBLIC ADDRESSES MODULE
 */
module-internet-public-addresses-add {
	display: block;
	width: 560px;
	height: 400px;
}

/*
 * USERS MODULE
 */
module-users-add {
	display: block;
	width: 500px;
	height: 500px;
}

module-users-password {
	display: block;
	width: 500px;
	height: 300px;
}

/*
 * EMAIL TEMPLATES MODULE
 */
module-email-templates-add {
	display: block;
	width: 500px;
	height: 280px;
}

module-email-templates-detail .editor {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}

module-email-templates-detail .preview-wrap {
	display: flex;
	flex-direction: column;
}

module-email-templates-detail .preview-wrap header {
	padding: 20px;
	border-bottom: 1px solid #eeeeee;
}

module-email-templates-detail .preview-wrap header .key {
	display: inline-block;
	width: 60px;
}

module-email-templates-detail .preview-wrap header > p:first-child {
	margin-bottom: 10px;
}

module-email-templates-detail .preview-wrap #preview {
	flex-grow: 1;
	position: relative;
	margin: 20px;
}

module-email-templates-detail .attachment {
	border-bottom: 1px solid #eeeeee;
	margin-bottom: 10px;
}

/*
 * SMS TEMPLATES MODULE
 */
module-sms-templates-add {
	display: block;
	width: 500px;
	height: 280px;
}

module-sms-templates-detail .editor {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}

module-sms-templates-detail .preview-wrap {
	display: flex;
	flex-direction: column;
}

module-sms-templates-detail .preview-wrap header {
	padding: 20px;
	border-bottom: 1px solid #eeeeee;
}

module-sms-templates-detail .preview-wrap header .key {
	display: inline-block;
	width: 60px;
}

module-sms-templates-detail .preview-wrap header > p:first-child {
	margin-bottom: 10px;
}

module-sms-templates-detail .preview-wrap #preview {
	flex-grow: 1;
	position: relative;
	margin: 20px;
}

/*
 * BANK MODULE
 */
module-bank-payments cube-datagrid-record .payment-action {
	display: flex;
	border: 2px solid transparent;
	height: 32px;
	margin: 5px 0px 0px 0px;
	overflow: hidden;
	border-radius: 5px;
	background: transparent;
	transition: border 0.3s, background 0.3s;
	-webkit-transition: border 0.3s, background 0.3s;
}

module-bank-payments cube-datagrid-record:hover .payment-action {
	border-color: #ffffff;
	background: #ffffff;
}

module-bank-payments cube-datagrid-record .payment-action button,
module-bank-payments cube-datagrid-record .payment-action button {
	width: 32px;
	height: 32px;
	border: 0px none;
	font-size: 24px;
	color: #000000;
	background: #e8e8e8;
	transition: background 0.3s, color 0.3s;
	-webkit-transition: background 0.3s, color 0.3s;
	cursor: pointer;
	flex-shrink: 0;
	display: flex;
	align-items: middle;
	justify-content: center;
}

module-bank-payments cube-datagrid-record .payment-action button .btn-label {
	display: none;
	font-size: 13px;
	line-height: 24px;
	vertical-align: middle;
}

module-bank-payments cube-datagrid-record .payment-action button:focus,
module-bank-payments cube-datagrid-record .payment-action button:focus {
	outline: 0;
}

module-bank-payments cube-datagrid-record .payment-action button:hover,
module-bank-payments cube-datagrid-record .payment-action button:hover {
	background: #dcdcdc;
	color: #1E88E5;
}

module-bank-payments cube-datagrid-record .payment-action .accept {
	margin-right: 1px;
}

module-bank-payments cube-datagrid-record .payment-action .decline {
	margin-right: 1px;
}

module-bank-payments cube-datagrid-record .payment-action .single {
	flex-grow: 1;
}

module-bank-payments cube-datagrid-record .payment-action .single button {
	width: 100%;
}

module-bank-payments cube-datagrid-record .payment-action .single button .btn-label {
	display: inline-block;
}

module-bank-payments cube-datagrid-record .payment-action .accept.active button {
	background: #689F38;
	color: #ffffff;
}

module-bank-payments cube-datagrid-record .payment-action .decline.active button {
	background: #D32F2F;
	color: #ffffff;
}

module-bank-payments cube-datagrid-record .payment-action .accept {
	display: flex;
	flex-grow: 1;
}

module-bank-payments cube-datagrid-record .payment-action .accept input {
	box-sizing: border-box;
	height: 32px;
	padding: 8px;
	line-height: 16px;
	font-size: 14px;
	background: #f6f6f6;
	border: 1px #e8e8e8;
	border-style: solid solid solid none;
	flex-grow: 1;
}

module-bank-payments cube-datagrid-record .payment-action .accept.active input {
	border-color: #689F38;
}

module-bank-payments cube-datagrid-record .paired-block {
	text-align: right;
}

module-bank-payments cube-datagrid-record .paired-block .payment-action {
	display: inline-flex;
	float: right;
	margin-left: 15px;
}

module-bank-payments cube-datagrid-record .value.accepted {
	color: #33691E;
}

module-bank-pairDialog {
	display: block;
	width: 480px;
	height: 400px;
}

/*
 * LOCATION ADDRESSES MODULE
 */
module-location-addresses-add {
	display: block;
	width: 560px;
	height: 500px;
}

module-location-addresses-detail #map {
	width: 100%;
	height: 320px;
}

module-location-addresses-detail component-link {
	margin-bottom: 5px;
}

module-location-addresses-detail .alert {
	max-width: 500px;
	color: #F57C00;
	margin-top: 30px;
	margin-bottom: 10px;
	padding-top: 16px;
	font-size: 13px;
	line-height: 16px;
	font-weight: 300;
	display: flex;
	flex-direction: row;
	align-items: center;
}

module-location-addresses-detail .alert .mdi {
	font-size: 34px;
	margin-right: 10px;
}

/*
 * DEV MODULE
 */
module-dev-scripts-add {
	display: block;
	width: 500px;
	height: 280px;
}

module-dev-scripts-detail .editor {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}

module-dev-scripts-detail #console {
	overflow: hidden;
}

module-dev-scripts-detail .execute {
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
}

module-dev-scripts-detail .execute cube-buttons {
	padding: 6px 10px;
	display: block;
	text-align: right;
}

module-dev-scripts-detail .execute #editor-params {
	display: block;
	width: 100%;
	height: 100px;
	border-bottom: 1px solid #eeeeee;
}

module-dev-scripts-detail .result-wrap {
	overflow-x: hidden;
	overflow-y: scroll;
}

module-dev-scripts-detail module-dev-scripts-log {
	position: relative;
	display: block;
	background: #ffffff;
	box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.2);
	z-index: 10;
	margin-bottom: 16px;
}

module-dev-scripts-detail module-dev-scripts-log .request {
	border-bottom: 1px dashed #dddddd;
}

module-dev-scripts-detail module-dev-scripts-log .response header {
	padding: 6px 10px;
	text-align: right;
}

module-dev-scripts-detail module-dev-scripts-log header .type {
	display: inline-block;
	font-size: 11px;
	text-transform: uppercase;
	background: #444444;
	color: #ffffff;
	padding: 5px;
	border-radius: 4px;
	margin-right: 10px;
}

module-dev-scripts-detail module-dev-scripts-log header .type[msgtype="response"],
module-dev-scripts-detail module-dev-scripts-log header .type[msgtype="success"] { background: #558B2F; }
module-dev-scripts-detail module-dev-scripts-log header .type[msgtype="error"] { background: #E53935; }

module-dev-scripts-detail module-dev-scripts-log .output {
	display: block;
	width: 100%;
	height: 150px;
	border: 0px none;
	box-sizing: border-box;
}

module-dev-scripts-detail module-dev-scripts-log .output:empty {
	display: none;
}

module-dev-scripts-detail module-dev-scripts-log .response .loading {
	padding: 16px;
	text-align: center;
}

module-dev-scripts-detail module-dev-scripts-log .response:not([responded]) header,
module-dev-scripts-detail module-dev-scripts-log .response:not([responded]) .output {
	display: none;
}

module-dev-scripts-detail module-dev-scripts-log .response[responded] .loading {
	display: none;
}

/*
 * CONFIG GENERATOR MODULE
 */

.module-config-generator #config-generator-output {
	background: #f6f6f6;
	color: #333333;
	box-shadow: inset 2px 0px 8px rgba(0, 0, 0, 0.3);
	font-size: 12px;
}

.module-config-generator #config-generator-output .output-wrap {
	overflow: auto;
}

.module-config-generator #config-generator-output pre {
	padding: 16px;
	border-bottom: 1px solid #dddddd;
}

.module-config-generator #config-generator-form {
	overflow-x: hidden;
	overflow-y: auto;
}

.module-config-generator h2 {
	margin-bottom: 16px;
	display: flex;
}

.module-config-generator h2.tiny {
	margin-bottom: 12px;
}

.module-config-generator h2 .title {
	display: block;
	font-weight: 500;
	font-size: 16px;
	text-transform: uppercase;
	color: #666666;
	line-height: 20px;
	border-bottom: 1px solid #dddddd;
	padding: 2px 0px 6px 0px;
	flex-grow: 1;
}

.module-config-generator h2 button {
	margin-left: 6px;
	order: 2;
}

.module-config-generator .section {
	margin-bottom: 40px;
}

.module-config-generator .section button {
	width: 28px;
	height: 28px;
	font-size: 20px;
	padding: 5px 4px 3px 4px;
	border: 0px none;
	border-radius: 16px;
	background: #1E88E5;
	color: #ffffff;
	cursor: pointer;
	outline: 0;
	transition: background 0.3s;
	-webkit-transition: background 0.3s;
}

.module-config-generator .section button:hover {
	background: #1976D2;
}

.module-config-generator .section button[alternate] {
	background: #888888;
}

.module-config-generator .section button[alternate]:hover {
	background: #E53935;
}

.module-config-generator .section *[control] {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

.module-config-generator .section *[control][w-20] { width: 20%; }
.module-config-generator .section *[control][w-25] { width: 25%; }
.module-config-generator .section *[control][w-30] { width: 30%; }
.module-config-generator .section *[control][w-40] { width: 40%; }

.module-config-generator .section *[control][grow],
.module-config-generator .section *[control] *[grow] {
	flex-grow: 1;
}

.module-config-generator .section *[control] label {
	order: 0;
	line-height: 30px;
	margin-right: 8px;
}

.module-config-generator .section *[control] input[type=text],
.module-config-generator .section *[control] input[type=number] {
	order: 3;
	box-sizing: border-box;
	border: 1px solid #dddddd;
	border-radius: 4px;
	line-height: 18px;
	font-size: 13px;
	padding: 5px 8px;
	font-family: "Roboto", sans-serif;
}

.module-config-generator .section *[control] input[type=checkbox] {
	margin-right: 8px;
	vertical-align: 4px;
}

.module-config-generator .section *[control] input[type=text].ng-invalid,
.module-config-generator .section *[control] input[type=number].ng-invalid {
	border-color: #E57373;
}

.module-config-generator .section *[control] input .ng-invalid + label {
	color: #C62828;
}

.module-config-generator .section *[control] span[single],
.module-config-generator .section *[control] span[before],
.module-config-generator .section *[control] span[after] {
	display: inline-block;
	line-height: 30px;
	padding: 0px 8px;
	font-weight: 300;
	background: #efefef;
	border-radius: 4px;
	order: 1;
}

.module-config-generator .section *[control] span[before] {
	border-radius: 4px 0px 0px 4px;
}

.module-config-generator .section *[control] span[after] {
	border-radius: 0px 4px 4px 0px;
}

.module-config-generator .section *[control] span[before] ~ input {
	border-radius: 0px 4px 4px 0px;
}

.module-config-generator .section *[control] span[after] ~ input {
	border-radius: 4px 0px 0px 4px;
}

.module-config-generator .section *[control] span[before] ~ span[after] ~ input {
	border-radius: 0px;
}

.module-config-generator .section *[control] span[before] {
	order: 1;
}

.module-config-generator .section *[control] span[after] {
	order: 5;
}

.module-config-generator .section p[control] {
	margin-bottom: 10px;
}

.module-config-generator .section p[control] label {
	width: 40%;
}

.module-config-generator .section .item {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #dddddd;
}

.module-config-generator .section .item button {
	order: 99;
	margin: 1px 0px 1px 8px;
}