@CHARSET "UTF-8";

@font-face {
    font-family: 'robotoregular';
    src: url(../fonts/Roboto-Regular-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotobold';
    src: url(../fonts/Roboto-Bold-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
	margin: 0;
	padding: 0;
}

*:focus {
	outline: 0;
}

html {
	background-color: #edf0f1;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), url("../img/background.jpg");
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), url("../img/background.jpg");
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), url("../img/background.jpg");
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), url("../img/background.jpg");
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3))), url("../img/background.jpg");
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../img/background.jpg");
}

body {
	color: #333333;
	font-size: 100%;
	font-family:'robotoregular';
}

b, strong {
	font-family:'robotobold';
}

h1 {
	font-family: 'robotoregular';
	margin-bottom: 10px;
	font-weight: normal;
	font-size: 2rem;
	clear: both;
}

h2 {
	font-family: 'robotoregular';
	margin-top: 30px;
	margin-bottom: 10px;
	font-weight: normal;
	font-size: 1.6rem;
	clear: both;
}

h3 {
	margin-bottom: 5px;
	margin-top: 15px;	
	clear: both;
}

h4 {
	font-size: 1em;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 0px;
	clear: both;
}

h5 {
	font-family: 'robotoregular';
	font-size: 1.4rem;
	font-weight: normal;
	margin-bottom: 5px;
	margin-top: 15px;	
	clear: both;
d	
}

a {
	color: #333333;
	text-decoration: none;
	cursor: pointer;
}

a.white {
	color: white;
}

a.red {
	color: red;
}

a.file {
	background-image: url(../img/fileicons/file.png);
	background-size: contain;
	background-position: left center;
	background-repeat: no-repeat;
	line-height: 30px;
	padding-left: 30px;
}

a.file:hover {
	background-repeat: no-repeat !important;
}

.clearfix:after {  /* für Firefox, IE8, Opera, Safari, etc. */
    content: ".";  
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
 
* + html .clearfix { /* für IE7 */
    display: inline-block;
}
 
* html .clearfix { /* für IE6 */
	height: 1%;
}

fieldset {
	padding: 10px;
}

a.button {
	display: block;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius:3px;
	border: 1px solid #404040;
	background-color: #272727;
	padding: 3px 5px;
	padding-top: 6px;
	text-decoration: none;
	cursor: pointer;
	color: white;
	float: left;
	font-size: 8pt;
	height: 16px;
	line-height: 15px;
	margin-right: 10px;
	font-family: 'robotobold';
	font-weight: normal;
}

a.button:hover {
	background-color: #666;
}

a.grey {
	background-color: #eee !important;
	border-color: #ccc !important;
	color: #666 !important;
}

a.grey:hover {
	background-color: #fff !important;
}

a#logo {
	background-image: url(../img/logo.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 263px 110px;
	width: 263px;
	height: 110px; 
	position: absolute;
	right: 50px;
	top: 20px;
	opacity: 1;
}

ul.horizontal {
	list-style-type: none;
}

ul.horizontal li {
	float: left;
	margin-right: 10px;
}

nav {
	padding: 20px;
	height: 90px;
}

nav ul {
	position: relative;
	width: 100%;
	display: block;
	height: 90px;
	text-align: left;
}

nav ul li {
	display: inline-block;
	list-style-type: none;
	height: 90px;
	margin-left: 0px;
	margin-right: 20px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#868686+0,000000+100 */
	/* background: rgb(67,76,83); /* Old browsers */
	/* background: -moz-linear-gradient(top, rgba(67,76,83,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
	/* background: -webkit-linear-gradient(top, rgba(67,76,83,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	/* background: linear-gradient(to bottom, rgba(67,76,83,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#868686', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 5px;
	margin-bottom: 20px;
}

nav > ul > li > ul {
	display: none;
}


nav ul li.unselected:hover {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#868686+0,000000+100 */
	/* background: rgb(87,87,87); /* Old browsers */
	/* background: -moz-linear-gradient(top, rgba(87,87,87,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
	/* background: -webkit-linear-gradient(top, rgba(87,87,87,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	/* background: linear-gradient(to bottom, rgba(87,87,87,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#868686', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	background-color: #434c53;
}

a.nav {
	display: block;
	padding-top: 62px;
	min-width: 90px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center 18px;
	background-size: 58px 35px;
	font-family: 'robotoregular';
	font-size: 0.7rem;
	text-transform: uppercase;
	color: white;
}

#main {
	min-height: 500px;
}

#content {
	margin-right: 400px;
	margin-bottom: 25px;
	transition: all 0.35s;
}

#col {
	position: absolute;
	right: 0px;
	width: 330px;
	top: 0px;
	padding: 20px;
	padding-left: 40px;
	padding-top: 105px !important;
}

#col div.title {
	border-top: solid 5px rgba(0, 0, 0, 0.6);
}

.red div.title {
	border-top: solid 5px #cc0033;
}

li.red {
	background: #cc0033;
}

div.nav {
	height: 50px;
	background-color: #232323;
}

div.nav a {
	line-height: 50px;	
	display: block;
	float: left;
	margin-left: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

div.nav a.selected {
	border: solid 1px #232323;
	border-bottom: none;
}

div.contentcontainer {
	position: absolute;
	left: 220px;
	top: 0px;
	right: 10px;
	bottom: 0px;
	overflow: auto;
}

div.subnav {
	position: absolute;
	left: 10px;
	top: 0px;
	width: 200px;
	bottom: 0px;
	overflow: auto;
}

body.loaded #content {
	opacity: 1.0;
}

div.subnav li {
	height: 50px;
	line-height: 50px;
	background-color: rgba(0, 0, 0, 0.8);
}

div.subnav li:hover, div.subnav li.selected {
	background-color: rgba(0, 0, 0, 0.8);
}

div.box li {
	font-family: 'robotoregular';
	line-height: 50px;
	position: relative;
	list-style-type: none;
	overflow: hidden;
	font-size: 1.0rem;
	font-weight: normal;
}

div.box li a.edit {
	background-image: url("../img/icon_edit.png");
	background-size: 30px 30px;
	background-position: center;
	background-repeat: no-repeat;
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
}

div.box li a.action {
	float: right;
	margin-top: 7px;
}

div.box li.twothird > * {
	float: left;
	width: 64%;
	position: relative;
	margin-right: 1%;
}

div.box li.twothird > *:first-child {
	width: 34%;
	position: static;
}

div.box {
	overflow: hidden;
	margin-bottom: 25px;
	border-radius: 0px 0px 10px 10px;
	border-left: solid 1px #dddddd;
	border-right: solid 1px #dddddd;
	border-top: solid 5px #333;
}

div.box:last-child {
	margin-bottom: 0px;
}

div.subnav div.box {
	border-left: none;
}

ul.control, div.teaser_content, div.teaser_group, div.table_container {
	background-color: #f3f3f3;
}

div.table_container {
	padding: 20px;
}

form ul.control {
	background-color: transparent;
}

div.box div.title {
	padding-left: 20px;
	background-color: white;
	position: relative;
	border-bottom: solid 1px #ddd;
}

form div.box div.title {
	font-size: 1.2rem;
	margin-top: 20px;
	height: 50px;
	line-height: 50px;
	padding-left: 1%;
	padding-right: 1%;
}

form div.box div.title:first-child {
	margin-top: 0px;
}

div.box div.title a.right {
	position: absolute;
	right: 0px;
	top: 0px;
}

a.action, input.action {
	background-color: #000;
	height: 40px;
	display: inline-block;
	line-height: 40px;
	text-align: center;
	padding-left: 25px;
	padding-right: 25px;
	margin-left: auto;
	margin-right: auto;
	cursor: pointer;
	font-size: 0.9rem;
	border-radius: 5px;
	color: white;
}

a.action:hover, a.action:active, input.action:hover, input.action:active {
	background-color: #434c53;
}

a.action_icon {
	background-color: #000;
	height: 40px;
	display: inline-block;
	line-height: 40px;
	cursor: pointer;
	border-radius: 5px;
	color: white;
	width: 40px;
	backgroun-repeat: no-repeat;
	background-size: 30px 30px;
	background-position: center;
}

a.action_icon:hover, a.action_idon:active {
	background-color: #434c53;
}

a.action_delete {
	background-image: url(../img/noun_icons/delete.png);
}
a.action_edit {
	background-image: url(../img/noun_icons/edit.png);
}
a.action_sort_up {
	background-image: url(../img/noun_icons/sort_up.png);
}
a.action_sort_down {
	background-image: url(../img/noun_icons/sort_down.png);
}
a.action_mark_as_unread {
	background-image: url(../img/noun_icons/mark_as_unread.png);
}

.dataset_actions {
	position: absolute;
	right: 10px;
	top: 5px;
	z-index: 10;
}

a.selectoption {
	padding-left: 5%;
	padding-right: 5%;
	background-color: white;
	color: black;
	cursor: pionter;
	border-radius: 5px;
	width: 90%;
}

select, input, option, textarea {
	height: 40px;
	background-color: white;
	color: #333;
	display: inline-block;
	margin-top: 10px;
	font-size: 1.1rem;
	padding-left: 10px;
	padding-right: 10px;
	outline: none;
	border: none;
	font-family: 'robotobold';
	border: solid 1px #aaa;
	border-radius: 5px;
}

.form_field_error {
	background-color: #FFBABA;
	color: #D8000C;
	border: solid 1px #D8000C;
}

.filterbutton {
	float: right;
	cursor: pointer;
}

div.table_filter_top > input {
	height: 35px !important;
}

div.table_container select, div.table_container input, div.table_container option {
	margin: 0px;
	height: auto;
	font-family: 'robotoregular';
	font-size: 0.9rem;
	height: 25px;
}

div.table_container input[type=checkbox] {
	height: auto;
	margin-top: 4px;
}
div.table_container label {
	padding-left: 5px;
	padding-right: 5px;
}

div.table_container select, div.table_container option {
	height: 27px;
	max-width: 150px;
}

div.table_container input {
	padding-top: 0px;
	padding-bottom: 0px;
}

input.fileupload {
	padding: 0px;
	margin-top: 15px;
	background-color: transparent;
	border: none;
}

select option {
  border: none;
  display: block;
}

input[type=text], textarea {
	min-width: 50%;
}

input[type=checkbox] {
	width: auto;
	margin-right: 5px;
	float: left;
	clear: left;
	cursor: pointer;
	height: auto;
	margin-top: 10px;
}

div.form_field label {
	margin-top: 7px;
	float: left;
	display: inline-block;
	cursor: pointer;
	font-size: 0.9em;
	color: #333333;
}

p.buttons {
	padding-bottom: 25px;
	text-align: left;
}

div.box div.title div {
	position: absolute;
	top: 5px;
	height: 40px;
	line-height: 40px;
	font-size: 0.9em;
	text-align: center;
	overflow: hidden;
}

div.buttons {
	position: absolute !important;
	right: 5px !important;
	top: 5px !important;
}

div.buttons input, div.buttons select {
	margin-top: 0px;
}

div.box div.title h5 {
	line-height: 50px;
	text-align: left;
	font-size: 1.4rem;
	font-weight: normal;
	margin: 0px;
	clear: both;
	color: #333333;
}

div.box > div.subtitle {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #ddd;
	font-size: 1.2rem;
}

div.box > div.info {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #ddd;
	font-size: 1.0rem;
}

div.box div.title h5.title_with_subtitle {
	padding-top: 5px;
	line-height: normal;
}

div.box div.title p.subtitle {
	font-size: 1.1rem;
	font-family: 'robotobold';
	padding-bottom: 10px;
}

p.info {
	font-style: italic;
	margin-bottom: 10px;
}

.on_color {
	background-color: #7cbc0a !important;
}
.control_color {
	background-color: black !important;
}

ul.icons {
	margin: 0px;
	padding: 0px;
}

li.icon {
	background-image:url(../img/fileicons/file.png);
	background-repeat: no-repeat;
	list-style-type: none;
	padding-left: 30px;
	margin-bottom: 5px;
}

ul.control li div.icon_on {
	position: absolute;
	width: 36px;
	height: 36px;
	left: 7px;
	top: 4px;
	z-index: 0;
	border-radius: 5px;
	background-color: transparent;
	transition: all 0.35s linear 0.0s;
}

.animate {
	transition: all 0.35s linear 0.0s;
}

ul.control li.on div.icon_on {
	background-color: #7cbc0a;
}

ul.control li.nodatasetfound {
	text-align: center;
	cursor: default;
}

ul.control li.nodatasetfound:hover {
	background-color: transparent !important;
	color: #333333 !important;
}

a.dataset {
	position: relative;
	padding-left: 90px;
	background-size: 50px 30px;
	background-position: 14px;
	min-height: 50px;
	line-height: normal;
	overflow: hidden;
	display: block;
	background-repeat: no-repeat;	
	transition: all 0.35s linear 0.0s;
	background-image: url(../img/ic_missing.png);
	z-index: 1;
	text-align: left;
	color: #333;
}

.dataset_colored {
	background-color: #e6ffde;
}

a.dataset span.icon {
	display: block;
	position: absolute;
	top: 50%;
	left: 20px;
	background-size: 50px 30px;
	background-repeat: no-repeat;
	background-position: center;
	width: 54px;
	height: 40px;
	border-radius: 5px;
	transform: translateY(-50%);
}

a.dataset span.dataset {
	line-height: 50px;
}

a.dataset span.dataset_multiline {
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: normal;	
}

a.dataset span.dataset_multiline span.dataset_info {
	display: block;
	font-size: 0.8rem;
}

a.dataset span.dataset_multiline span.dataset_title {
	display: block;
	font-size: 1.0rem;
	font-family: 'robotobold';
}

a.dataset span.dataset_multiline span.dataset_subtitle {
	display: block;
	font-size: 0.9rem;
}


a.datasetwithedit {
	margin-right: 50px;
}

ul.control li {
	cursor: pointer;
	border-bottom: solid 1px #ddd;
}

ul.control li > ul > li {
	border-bottom: none;
	padding-left: 90px;
	line-height: normal;
}

li.on a.dataset:hover {
	background-color: #222;
	color: white;
}

a.selected {
	text-decoration: underline;
}

div.slider {
	position: relative;
}

div.sliderprogress {
	background-image: url(../img/ajax-loader-bar.gif);
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	display: none;
}

div.showsliderprogress div.sliderprogress {
	display: block;
}

div.showsliderprogress div.indicator {
	display: none;
}

div.slidercontrol {
	position: relative;
	height: 40px;
	padding-top: 2px;
	padding-bottom: 2px;
}

div.slider div.indicator {
	position: absolute;
	left: 0%;
	top: 4px;
	width: 50px;
}

div.slider div.scale {
	margin-top: 8px;
	height: 20px;
	border-radius: 10px;
	border: solid 2px #323232;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,ffffff+100 */
	background: rgb(0,0,0); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

div.switcher {
	position: relative;
	margin-top: 5px;
	background-color: #323232;
	border: solid 2px #1f1f1f;
	line-height: 30px;
	border-radius: 30px;
	width: 50px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
	height: 30px;
}

div.switcher_switcher {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 30px;
	height: 26px;
	border-radius: 30px;
	background-color: white;
}

.on > div.switcher_switcher {
	left: auto;
	right: 2px;
}

.button {
	height: 34px;
	background-color: #323232;
	line-height: 34px;
	border-radius: 10px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
	min-width: 45px;
}

.button:active {
	background-color: white;
	color: black;
}

.fixedbutton {
	display: block;
	float: left;
	width: 90px;
	height: 34px;
	margin-bottom: 10px;
}

.status {
	height: 30px;
	border: solid 2px #323232;
	line-height: 30px;
	border-radius: 10px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	background-color: #7cbc0a;
}

div.control {
	padding-top: 5px;
	padding-bottom: 5px;
	height: 34px;
	line-height: 34px;
	overflow: hidden;
	text-align: center;
}

div.control * {
	display: inline-block;
}

div.control_temperature {
	text-align: center;
	
}

div.overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/opacity_black_75.png");
	z-index: 9999;
	display: none;
}

div.overlay > div {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 20px;
	bottom: 20px;
	background-color: #ececec;
	border-radius: 5px;
	padding: 50px;
	overflow: auto;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#efefef+1,d1d1d1+100 */
background: #d1d1d1; /* Old browsers */
background: -moz-linear-gradient(top, #d1d1d1 1%, #cccccc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #d1d1d1 1%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #d1d1d1 1%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

div.overlay div.box {
	border-left: none;
	border-right: none;
}

div.colorpicker {
	position: relative;
	width: 100%;
	height: 100%;
}

div.colorpicker svg {
	position: absolute !important;
	left: 100px;
	top: 100px;
}

a.close {
	display: block;
	background-image: url("../img/fancy_close.png");
	width: 30px;
	height: 30px;
	position: absolute;
	right: 10px;
	top: 10px;
}

.formbox {
	border-bottom: solid 1px #323232;
	background-color: black;
	position: relative;
}

.formbox .delete {
	position: absolute;
	right: 10px;
	top: 7px;
}

.formtitle {
	font-size: 0.95em;
	text-align: left;
	padding-left: 15px;
	padding-right: 15px;
	line-height: 44px;
}

.formconfig {
	border-top: solid 1px white;
	background-color: #2f2f2f;
}

.form_row {
	display: table;
	width: 100%;
	text-align: left;
	min-height: 60px;
	border-bottom: solid 1px #dddddd;
}

.form_row1 {
	background-color: #f3f3f3;
}

.form_row2 {
	background-color: #f3f3f3;
}

.form_label {
	padding-left: 1%;
	padding-right: 1%;
	display: table-cell;
	text-align: left;
	font-size: 0.9rem;
	width: 20%;
	height: 100%;
	vertical-align: middle;
	color: #333333;
}

.form_label > span {
}

.form_field {
	display: table-cell;
	width: 77%;
	padding-right: 1%;
	overflow: hidden;
	position: relative;
}

.condition {
	position: relative;
	padding-left: 80px;
}

.condition_disjunction {
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
	position: relative;
}

.condition_disjunction_button {
	display: inline-block;
	width: 80px;
	max-width: 80px;
	text-align: center;
	
}

.treeline {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 39px;
	width: 1px;
	border-right: dotted 1px white;
}

.treeline_horizontal {
	position: absolute;
	top: 23px;
	left: 42px;
	right: 0px;
	border-top: dotted 1px white;
}

.conditions .condition:first-child .treeline {
	top: 23px;
}

.conditions .condition:last-child .treeline {
	height: 23px;
	bottom: auto;
}

.selectbutton {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 50px;
	line-height: 50px;
	margin-bottom: 10px;
}

.selectbutton select {
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	border-radius: 0px;
	font-family: Roboto, sans-serif;
	background-image: url("../img/arrow_select.png");
	background-position: right;
	background-repeat: no-repeat;
	margin-top: 0px;
}

.selectbutton a.action {
	position: absolute;
	right: 0px;
	height: 40px;
	line-height: 40px;
	padding-left: 21px;
	padding-right: 21px;
	background-color: #cc0033;
}

div.tabcontent > div.messages_container > .info_message, div.tabcontent > div.messages_container > .ok_message, div.tabcontent > div.messages_container > .warn_message, div.tabcontent > div.messages_container > .error_message {
	margin-left: 20px;
	margin-top: 20px;
	margin-right: 20px;
}

.info_message, .ok_message, .warn_message, .error_message, .validation {
	border: 1px solid;
	margin-bottom: 20px;
	padding:15px 10px 15px 50px;
	background-repeat: no-repeat;
	background-position: 10px center;
}

.info_message {
	color: #00529B;
	background-color: #BDE5F8;
	background-image: url('../img/icons/icon_info.png');
}

.ok_message {
	color: #4F8A10;
	background-color: #DFF2BF;
	background-image:url('../img/icons/icon_ok.png');
}

.warn_message {
	color: #ff8100;
	background-color: #ffd9b2;
	background-image: url('../img/icons/icon_warn.png');
}

.error_message {
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('../img/icons/icon_error.png');
}

#statusbar {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	height: 20px;
	overflow: hidden;
	font-size: 0.7rem;
	line-height: 20px;
	padding-left: 10px;
	padding-right: 10px;
	z-index: 200;
}

#statusbar > * {
	display: inline-block;
	margin-right: 10px;
}

.controlicon {
	padding-left: 20px;
	background-image: url("../img/icon_red.png");
	background-repeat: no-repeat;
	background-position: left center;
}

.controlicon_ok {
	background-image: url("../img/icon_green.png");
}

.horizontal_container {
	display: table;
}

.horizontal_wrap {
	display: table-cell;
	width: auto;
	white-space: nowrap;
	vertical-align: top;
	padding-right: 20px;
}

.horizontal_wrap > * {
	white-space: nowrap;
}

.horizontal_fill {
	display: table-cell;
	width: 100%;
	vertical-align: top;
}

.knx_light_rgb_color {
	position: absolute;
	left: 0px;
}

.knx_light_rgb_scenes {
	position: absolute;
	left: 70px;
	width: 200px;
}

.colorpicker_buttons_1 {
	position: absolute;
	top: 100px;
	right: 150px;
	width: 100px;
}

.colorpicker_buttons_2 {
	position: absolute;
	top: 100px;
	right: 25px;
	width: 100px;
}

.colorpicker_buttons_ws2812 {
	position: absolute;
	top: 100px;
	right: 300x;
	width: 100px;
}

div.teaser_content {
	padding: 20px;
	padding-top: 10px;
	position: relative;
}

div.teaser_content p {
	margin-bottom: 20px;
}

div.teaser_content_text {
	max-width: 800px;
	padding-top: 10px;
}

div.teaser_contentimage {
	position: absolute;
	right: 20px;
	top: 20px;
	left: 820px;
}

a.fancyboximage, a.fancyboxgallery {
	display: inline-block;
	width: 100px;
	height: 100px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: solid 1px #ddd;
	background-color: white;
	margin-right: 5px;
	margin-bottom: 5px;
	border-radius: 5px;
}

a.fancyboximage {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	width: auto;
	margin: 0px;
	height: 300px;
	background-position: top;
}

div.teaser_group {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 1.2rem;
	background-color: #dddddd;
}

div.teaser_content_image {
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	position: relative;
	height: 300px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.teaser_content_small {
	background-color: #f3f3f3;
	border-radius: 10px;
	border: solid 1px #ddd;
	margin: 20px;
	cursor: pointer;
	position: relative;
	height: 170px;
	overflow: hidden;
}

div.teaser_content_small:hover {
	background-color: #222;
	color: white;
}

div.teaser_titles {
	padding-top: 10px;
	padding-bottom: 10px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}

div.teaser_info {
	font-size: 0.9rem;
}

div.teaser_title {
	font-size: 1.4rem;
}

div.teaser_content_small:hover div.teaser_title {
	color: white !important;
}

div.teaser_subtitle {
	font-size: 1.0rem;
}

div.teaser_content_small div.teaser_content_image {
	height: 150px;
	margin-left: 1%;
	width: 23%;
}

div.teaser_row_name, div.teaser_row_value {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

div.teaser_row_name {
	padding-top: 10px;
	font-size: 0.8rem;
}

div.teaser_row_value {
	font-size: 1.0rem;
}

div.teaser_row_value a, table.data tbody td a {
	color: #333;
	text-decoration: underline;
}

table.data tbody tr:hover td a {
	color: white;
}

.one_third {
	display: inline-block;
	width: 33%;
	margin-right: 1%;
	vertical-align: top;
}

.two_third {
	display: inline-block;
	width: 32%;
	margin-right: 1%;
	vertical-align: top;
}

.three_third {
	display: inline-block;
	width: 32%;
	vertical-align: top;
}

.one_fourth {
	display: inline-block;
	width: 24%;
	margin-right: 1%;
	vertical-align: top;
}

.three_fourth {
	display: inline-block;
	width: 75%;
	vertical-align: top;
}

.form_field .one_third, .form_field .two_third, .form_field .three_third {
	max-width: 300px;
}


div.nophoto {
	background-image: url(../img/nophoto.png);
}

a.nophoto {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	cursor: pointer;
}

.formfield_mandatory sup {
	color: red;
}

.copyfield {
	display: inline-block;
	margin-left: 10px;
}

.form_field a.action {
	position: absolute;
	top: 10px;
	margin-left: 10px;
	color: white;
}

p.mandatory {
	float: right;
}

.copyfield a.action {
	min-width: 200px;
}

div.tabs > a {
	display: inline-block;
	min-width: 80px;
	height: 45px;
	line-height: 27px;
	text-align: center;
	padding: 15px;
	position: relative;
	border: solid 1px #d0d4d5;
	border-right: none;
	background-color: #f5f6f7;
	color: #b1b6b7;
	font-size: 0.8rem;
	font-family: 'robotobold';
	white-space: nowrap;
	text-overflow: ellipsis;
}

div.tabs > a:last-child {
/*	border-radius: 0px 10px 0px 0px;*/
	border-right: solid 1px #dddddd;
}

div.tabs > a:hover {
	color: #333;
}

div.tabs > a.tab_selected {
	color: #4a2683;
	background-color: white;
	border: none;
	border-top: solid 3px #333333;
	border-left: solid 1px #dddddd;
	height: 46px;
}

div.tabs_subtab > a.first-child {
	border-left: none;
}

div.tabs_subtab {
	margin-bottom: -1px;
}

div.tabs_subtab > a {
	height: auto;	
	color: #333;
	border: none;
	background-color: white;
	border-top: solid 1px #ddd;
	border-left: solid 1px #ddd;
	border-right: solid 1px #ddd;
	padding: 10px;
	line-height: normal;
	text-transform: uppercase;
	margin-right: 5px;
	border-radius: 5px 5px 0px 0px;
}

div.tabs_subtab > a:hover {
	background-color: #ddd;
}

div.tabs_subtab > a:first-child {
	border-left: solid 1px #ddd;
}

div.tabs_subtab > a:last-child {
	border-radius: 5px 5px 0px 0px;
}

div.tabs_subtab > a.tab_selected {
	background-color: #ddd;
	color: #333;
	height: auto;
}

div.tabs > a > span.icon {
	display: block;
	width: 50px;
	height: 30px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-color: #b1b6b7;
	mask-repeat:no-repeat;
	mask-size: contain;
  	-webkit-mask-repeat: no-repeat;
  	-webkit-mask-size: contain;
  	margin-left: auto;
  	margin-right: auto;
}

div.tabs > a:hover > span {
	background-color: #333;
}

div.tabs > a.tab_selected > span.icon {
	background-color: #4a2683;
}

.tabs_subnav {
	height: 78px;
}

div.tabscontent {
	margin-bottom: 25px;
	border: solid 1px #ddd;
	border-radius: 0px 10px 10px 10px;
}

div.tabcontent {
	background-color: white;
	padding: 25px;
	display: none;
	border-radius: 0px 10px 10px 10px;
}

div.tabcontent > div.box:last-child {
	margin-bottom: 0px;
}

div.tabscontent_subtab div.tabcontent {
	padding: 0px;
}

div.tabscontent_subtab {
	border: none;
}

div.tabcontent div.box {
	border-left: solid 1px #ddd;
	border-right: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
}

div.loading_big {
	height: 100px;
	background-image: url(../img/ajax-loader-large.gif);
	background-position: center;
	background-repeat: no-repeat;
	background-color: #f3f3f3;
}

.submitbutton_loader {
	margin-top: 30px;
}

div.breadcrumbs {
	margin-bottom: 20px;
}
div.breadcrumbs > span.seperator {
	font-size: 1.2em;
	padding-left: 5px;
	padding-right: 5px;
	font-family: 'robotobold';
}

div.breadcrumbs > a {
	color: #333333;
	text-decoration: none;
	border: solid 1px #333333;
	padding-left: 10px;
	padding-right: 10px;
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 5px;
	font-family: 'robotobold';
	font-size: 0.9em;
	background-color: white;
}

div.breadcrumbs > a:hover {
	color: white;
	background-color: #333;
}

div.table {
	margin-top: 20px;
}

table.data {
	border-collapse: collapse;
	min-width: 100%;
	border: solid 1px #ccc;
}

table.data th {
	cursor: pointer;
}

table.data tr.tablefilter td a {
	color: #333;
}

.multicheckboxfilter input[type=checkbox] {
	margin-top: 5px;
}

table.data th, table.data tr.tablefilter td {
	padding: 5px;
	font-size: 0.9rem;
	background-color: #dddddd;
	text-align: left;
	font-family: 'robotobold';
	border-bottom: solid 1px #cccccc;
}

table.data tr.tablefilter td {
	background-color: #dddddd;
}

table.data tr.grey {
	background-color: #eee;
	border-bottom: solid 1px #ddd;
	cursor: pointer;
	color: #333;
}

table.data tr.white {
	background-color: white;
	border-bottom: solid 1px #ddd;
	cursor: pointer;
	color: #333;
}

table.data tr.red td {
	background-color: #FF9999;
	border-bottom: solid 1px #ddd;
	cursor: pointer;
	color: #333;
}

table.data tr.blue td {
	background-color: #dfe7f5;
	border-bottom: solid 1px #ddd;
	cursor: pointer;
	color: #333;
}

table.data tr.yellow td {
	background-color: #FFCC66;
	border-bottom: solid 1px #ddd;
	cursor: pointer;
	color: #333;
}

table.data tr.storno td {
	color: #999 !important;
}

table.data tbody tr:hover {
	background-color: #333333;
	color: white;
}

table.data td {
	padding: 5px;
	font-size: 0.9rem;
	text-align: left;
}

div.scrollable {
	max-height: 400px;
	overflow: auto;
}

table.excel {
	width: 100%;
	border-collapse: collapse;
	box-shadow: 2px 2px 2px #ccc;
	margin-bottom: 20px;
}

table.excel thead {
	border-bottom: solid 2px #d4d4d4;
}

table.excel tfoot {
	border-top: solid 2px #d4d4d4;
}

table.excel th, table.excel td {
	text-align: left;
	border: solid 1px #d4d4d4;
	background-color: white;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 5px;
	padding-right: 5px;
	position: relative;
}

table.excel td.noteditable {
	background-color: #f7f7f7;
	color: #666;
}

table.excel td.grey {
	background-color: #f7f7f7;
}

table.excel td.different_value {
	background-color: #f6ffb9;
}

table.excel thead tr th, table.excel tfoot tr td {
	font-family: 'robotobold';
	font-weight: normal;
}

table.excel tbody tr th {
	font-weight: normal;
}

table.excel thead tr th, table.excel tbody tr th, table.excel tfoot tr td {
	background-color: #fffad9;
}

table.excel td.bold {
	font-family: 'robotobold';
}

table.excel td input.input {
	font-size: 1.0rem;
	font-family: 'robotoregular';
	border: none;
	background-color: white;
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: auto;
	text-align: right;
	border-radius: unset;
}

table.excel td .action_icon {
	position: absolute;
	right: 0px;
}

table.excel td.money, table.excel td.count {
	text-align: right;
}

.erp_qtip {
	background-color: white !important;
	border: solid 5px #ccc !important;
	border-radius: 10px;
}

/* Messages */

.message {
  color: #000;
  clear: both;
  line-height: 18px;
  font-size: 15px;
  padding: 8px;
  position: relative;
  margin: 8px 0;
  word-wrap: break-word;
}
/*
.message:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
}*/

.metadata {
  display: block;
  position: relative;
  bottom: -4px;
}

.metadata .time {
  color: rgba(0, 0, 0, .45);
  font-size: 11px;
  display: inline-block;
}

.metadata .tick {
  display: inline-block;
  margin-left: 2px;
  position: relative;
  top: 4px;
  height: 16px;
  width: 16px;
}

.metadata .tick svg {
  position: absolute;
  transition: .5s ease-in-out;
}

.metadata .tick svg:first-child {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: perspective(800px) rotateY(180deg);
          transform: perspective(800px) rotateY(180deg);
}

.metadata .tick svg:last-child {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: perspective(800px) rotateY(0deg);
          transform: perspective(800px) rotateY(0deg);
}

.metadata .tick-animation svg:first-child {
  -webkit-transform: perspective(800px) rotateY(0);
          transform: perspective(800px) rotateY(0);
}

.metadata .tick-animation svg:last-child {
  -webkit-transform: perspective(800px) rotateY(-179.9deg);
          transform: perspective(800px) rotateY(-179.9deg);
}

.message:first-child {
  margin: 16px 0 8px;
}

.message.received {
  background: #e1ffc7;
  border-radius: 5px 5px 5px 5px;
}

.message.received .metadata {
}

/*
.message.received:after {
  border-width: 0px 10px 10px 0;
  border-color: transparent #fff transparent transparent;
  top: 0;
  left: -10px;
}*/

.message.sent {
  background: #e1ffc7;
  border-radius: 5px 0px 5px 5px;
  float: right;
}

.message.sent:after {
  border-width: 0px 0 10px 10px;
  border-color: transparent transparent transparent #e1ffc7;
  top: 0;
  right: -10px;
}

.delete {
	width: 20px;
	height: 20px;
	display: block;
	background-image: url(../img/icons/icon_delete.png);
	background-size: 20px 20px;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}

td.comment {
	background-image: url("../img/comment_indicator.gif");
	background-repeat: no-repeat;
	background-position: top right;
}

div.kalender div.table {
	margin: 0px;
}

table.excel td.kalender_notclickable {
	background-image: url("../img/notclickable.png")
}

.kalender_data {
	width: 22px;
	height: 18px;
	display: block;
	text-align: center;
	font-size: 14px;
	color: black;
	text-decoration: none;
	line-height: 18px;
	margin-left: auto;
	margin-right: auto;
}

.kalender_halfday {
	line-height: 9px !important;
	height: 9px !important;
}

a.kalender_data:hover {
	background-color: #87da55;
}

table.excel td.kalender_noactiveday {
	background-color: #efefef;
}

.formelement_signature {
	display: block;
	background-color: white;
	border: solid 1px black;
	cursor: url(../img/pen.png), auto;
	color: black;
	max-width: 400px;
}

div.signature {
	width: 200px;
	border: solid 1px black;
	background-color: white;
	height: 80px;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;	
}