.toolbar {
	position: relative;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	float: left;
	width: 100.0%;
	height: 56px;
	padding-left: 16px;
	padding-right: 16px;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	align-items: center;
}

/* ---------- ---------- ---------- ---------- ---------- */
.toolbar.toolbar-colored {
	background-color: #464646;
}

.toolbar.toolbar-gradient-top {
	background-image: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0.0%, rgba(0, 0, 0, 0) 100.0%);
	background-image: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0.0%, rgba(0, 0, 0, 0) 100.0%);
	background-image: -ms-linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0.0%, rgba(0, 0, 0, 0) 100.0%);
	background-image: -o-linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0.0%, rgba(0, 0, 0, 0) 100.0%);
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0.0%, rgba(0, 0, 0, 0) 100.0%);
}

.toolbar.toolbar-gradient-bottom {
	background-image: -webkit-linear-gradient(to top, rgba(0, 0, 0, 1) 0.0%, rgba(0, 0, 0, 0) 100.0%);
	background-image: -moz-linear-gradient(to top, rgba(0, 0, 0, 1) 0.0%, rgba(0, 0, 0, 0) 100.0%);
	background-image: -ms-linear-gradient(to top, rgba(0, 0, 0, 1) 0.0%, rgba(0, 0, 0, 0) 100.0%);
	background-image: -o-linear-gradient(to top, rgba(0, 0, 0, 1) 0.0%, rgba(0, 0, 0, 0) 100.0%);
	background-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0.0%, rgba(0, 0, 0, 0) 100.0%);
}

	/* ---------- ---------- ---------- ---------- ---------- */
	.toolbar .toolbar-button, 
	.toolbar .toolbar-icon {
		position: relative;
		float: left;
		width: 40px;
		height: 40px;
		padding: 8px;
		border: 0;
		-webkit-border-radius: 50.0%;
		-moz-border-radius: 50.0%;
		-ms-border-radius: 50.0%;
		-o-border-radius: 50.0%;
		border-radius: 50.0%;
		margin: 0;
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		appearance: none;
		background-color: transparent;
		overflow: hidden;
	}

	.toolbar .toolbar-button {
		cursor: pointer;
	}

	.toolbar .toolbar-button + .toolbar-button, 
	.toolbar .toolbar-button + .toolbar-icon, 
	.toolbar .toolbar-icon + .toolbar-button, 
	.toolbar .toolbar-icon + .toolbar-icon {
		margin-left: 8px;
	}

	.toolbar .toolbar-button:first-child, 
	.toolbar .toolbar-icon:first-child {
		margin-left: -8px;
	}

	.toolbar .toolbar-button:last-child, 
	.toolbar .toolbar-icon:last-child {
		margin-right: -8px;
	}

	.toolbar:not(.toolbar-colored):not(.toolbar-gradient-top):not(.toolbar-gradient-bottom) .toolbar-button:hover {
		background-color: rgba(0, 0, 0, 0.1);
	}

	.toolbar:not(.toolbar-colored):not(.toolbar-gradient-top):not(.toolbar-gradient-bottom) .toolbar-button:focus {
		background-color: rgba(0, 0, 0, 0.1);
	}

	.toolbar:not(.toolbar-colored):not(.toolbar-gradient-top):not(.toolbar-gradient-bottom) .toolbar-button:active {
		background-color: rgba(0, 0, 0, 0.2);
	}

	.toolbar.toolbar-colored .toolbar-button:hover, 
	.toolbar.toolbar-gradient-top .toolbar-button:hover, 
	.toolbar.toolbar-gradient-bottom .toolbar-button:hover {
		background-color: rgba(255, 255, 255, 0.1);
	}

	.toolbar.toolbar-colored .toolbar-button:focus, 
	.toolbar.toolbar-gradient-top .toolbar-button:focus, 
	.toolbar.toolbar-gradient-bottom .toolbar-button:focus {
		background-color: rgba(255, 255, 255, 0.1);
	}

	.toolbar.toolbar-colored .toolbar-button:active, 
	.toolbar.toolbar-gradient-top .toolbar-button:active, 
	.toolbar.toolbar-gradient-bottom .toolbar-button:active {
		background-color: rgba(255, 255, 255, 0.2);
	}

		.toolbar .toolbar-button .material-icons, 
		.toolbar .toolbar-icon .material-icons {
			width: 24px;
			height: 24px;
			font-size: 24px;
		}

		.toolbar:not(.toolbar-colored):not(.toolbar-gradient-top):not(.toolbar-gradient-bottom) .toolbar-button .material-icons, 
		.toolbar:not(.toolbar-colored):not(.toolbar-gradient-top):not(.toolbar-gradient-bottom) .toolbar-icon .material-icons {
			color: rgba(0, 0, 0, 0.7);
		}

		.toolbar.toolbar-colored .toolbar-button .material-icons, 
		.toolbar.toolbar-gradient-top .toolbar-button .material-icons, 
		.toolbar.toolbar-gradient-bottom .toolbar-button .material-icons, 
		.toolbar.toolbar-colored .toolbar-icon .material-icons, 
		.toolbar.toolbar-gradient-top .toolbar-icon .material-icons, 
		.toolbar.toolbar-gradient-bottom .toolbar-icon .material-icons {
			color: #FFFFFF;
		}

		.toolbar .toolbar-button.radio span, 
		.toolbar .toolbar-button.checkbox span {
			margin: 2px;
		}

	/* ---------- ---------- ---------- ---------- ---------- */
	.toolbar .toolbar-title {
		position: relative;
		float: left;
		margin: 0;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 20px;
		font-weight: 400;
		-webkit-flex: 1;
		-moz-flex: 1;
		-ms-flex: 1;
		-o-flex: 1;
		flex: 1;
	}

	.toolbar:not(.toolbar-colored):not(.toolbar-gradient-top):not(.toolbar-gradient-bottom) .toolbar-title, 
	.toolbar:not(.toolbar-colored):not(.toolbar-gradient-top):not(.toolbar-gradient-bottom) .toolbar-title a {
		color: #757575;
	}

	.toolbar.toolbar-colored .toolbar-title, 
	.toolbar.toolbar-gradient-top .toolbar-title, 
	.toolbar.toolbar-gradient-bottom .toolbar-title, 
	.toolbar.toolbar-colored .toolbar-title a, 
	.toolbar.toolbar-gradient-top .toolbar-title a, 
	.toolbar.toolbar-gradient-bottom .toolbar-title a {
		color: #ffffff;
	}

	.toolbar .toolbar-button + .toolbar-title, 
	.toolbar .toolbar-icon + .toolbar-title {
		margin-left: 11px;
	}

	/* ---------- ---------- ---------- ---------- ---------- */
	.toolbar .toolbar-spacer {
		-webkit-flex: 1;
		-moz-flex: 1;
		-ms-flex: 1;
		-o-flex: 1;
		flex: 1;
	}

	/* ---------- ---------- ---------- ---------- ---------- */
	.toolbar input[type="text"] {
		height: 40px;
		padding: 9px 0;
		border: 0;
		font-weight: 400;
	}

	.toolbar:not(.toolbar-colored):not(.toolbar-gradient-top):not(.toolbar-gradient-bottom) input[type="text"] {
		color: #212121;
	}

	.toolbar.toolbar-colored input[type="text"], 
	.toolbar.toolbar-gradient-top input[type="text"], 
	.toolbar.toolbar-gradient-bottom input[type="text"] {
		color: #FFFFFF;
	}

	.toolbar .toolbar-button + input[type="text"], 
	.toolbar .toolbar-icon + input[type="text"] {
		margin-left: 11px;
	}

	/* ---------- ---------- ---------- ---------- ---------- */
	.toolbar select {
		height: 40px;
		padding: 9px 24px 9px 0;
		border: 0;
		font-size: 14;
		font-weight: 500;
		direction: rtl;
		background-position: top 17px right 0;
	}

	.toolbar:not(.toolbar-colored):not(.toolbar-gradient-top):not(.toolbar-gradient-bottom) select {
		color: #A21841;
	}

	.toolbar.toolbar-colored select, 
	.toolbar.toolbar-gradient-top select, 
	.toolbar.toolbar-gradient-bottom select {
		color: #FFFFFF;
	}

/* ---------- ---------- ---------- ---------- ---------- */
@media (min-width: 641px) {
	#header .toolbar, 
	#drawer .toolbar {
		padding-left: 20px;
		padding-right: 20px;
	}
}