@charset "UTF-8";

:root {
  /* mhc: #c8d326, wmm-haustechnik & -maschinenbau: #b93e3f, wmm-software, allgaeudsl: #009fe3 / #00b3ff  */
  --company-color: #009fe3;
}

/* fonts */
/* colors */
/* dimensions */
/* table excel */
/* calendar */
/* borders */
/* responsive */
@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-image: linear-gradient(to bottom, rgba(211, 183, 216, 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";
  font-weight: normal; }

h1 {
  font-family: "robotoregular";
  margin-bottom: 10px;
  font-weight: normal;
  font-size: 2rem;
  clear: both;
  color: var(--company-color);
}

h1 a {
  color: var(--company-color); }

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: 0;
  clear: both; }

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

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; }

.nowrap {
  white-space: nowrap; }

.buttons_subnav {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -10px; }
  .buttons_subnav a.button {
    margin-bottom: 10px; }

a.button {
  display: inline-block;
  box-sizing: border-box;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #404040;
  background-color: #272727;
  text-decoration: none;
  cursor: pointer;
  color: white;
  font-size: 8pt;
  height: 27px;
  line-height: 25px;
  padding: 0 5px;
  margin-right: 10px;
  font-family: "robotobold";
  font-weight: normal; }

a.csv.button {
  margin: 20px; }

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;
  /*pointer-events: none;*/ }

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

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

nav {
  padding: 0 20px 0; }

nav ul {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: left; }

nav ul li {
  display: inline-block;
  list-style-type: none;
  height: 90px;
  margin: 20px 20px 0 0;
  /* 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; }

nav ul li.selected {
  background-color: var(--company-color); }

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: calc(100% - 200px);
  padding: 20px; }

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

#col {
  position: absolute;
  right: 0;
  width: 300px;
  top: 0;
  padding: 20px;
  padding-left: 40px;
  padding-top: 195px;
  background-color: rgba(240, 240, 240, 0.8);
  box-shadow: 0px 20px 20px #333333; }

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

#col div.box {
  border-left: solid 1px rgba(0, 0, 0, 0.6) !important;
  border-right: solid 1px rgba(0, 0, 0, 0.6) !important;
  border-bottom: solid 1px rgba(0, 0, 0, 0.6) !important;
  background-color: white; }

.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: 0;
  right: 10px;
  bottom: 0;
  overflow: auto; }

div.subnav {
  position: absolute;
  left: 10px;
  top: 0;
  width: 200px;
  bottom: 0;
  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: 0;
  right: 0; }

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 {
  margin-bottom: 25px;
  border-radius: 0 0 10px 10px;
  border-left: solid 1px #dddddd;
  border-right: solid 1px #dddddd;
  border-bottom: solid 1px #dddddd; }

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

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

ul.control, div.teaser_content:last-child, div.table_container {
  border-radius: 0 0 10px 10px; }

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; }

div.title {
  border-top: solid 5px var(--company-color); }

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

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

form div.box div.title > span {
  display: table-cell;
  line-height: normal;
  vertical-align: middle; }

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

a.action, input.action {
  background-color: var(--company-color);
  min-height: 40px;
  max-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: var(--company-color); }

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

a.action_icon:hover, a.action_icon: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_add {
  background-image: url("../img/noun_icons/add.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); }

a.action_download {
  background-image: url(../img/noun_icons/download.png); }

a.action_eye {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMiA0LjVDNyA0LjUgMi43MyA3LjYxIDEgMTJjMS43MyA0LjM5IDYgNy41IDExIDcuNXM5LjI3LTMuMTEgMTEtNy41Yy0xLjczLTQuMzktNi03LjUtMTEtNy41ek0xMiAxN2MtMi43NiAwLTUtMi4yNC01LTVzMi4yNC01IDUtNSA1IDIuMjQgNSA1LTIuMjQgNS01IDV6bTAtOGMtMS42NiAwLTMgMS4zNC0zIDNzMS4zNCAzIDMgMyAzLTEuMzQgMy0zLTEuMzQtMy0zLTN6Ii8+PC9zdmc+"); }

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

.dataset_actions_multiple {
  position: static;
  right: auto;
  top: auto;
  text-align: right;
  margin-right: 5px;
}

td > .dataset_actions, .teaser_row_value > .dataset_actions {
  position: static;
  right: auto;
  top: auto;
  text-align: right;
  font-size: 0px; }

.teaser_row_value > .dataset_actions {
  text-align: left; }

td > .dataset_actions > a {
  margin-left: 5px; }

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

textarea {
  height: 80px; }

select, input, option {
  height: 40px; }

select {
  max-width: 600px; }

select, input, option, textarea {
  background-color: #ffffff;
  color: #333333;
  display: inline-block;
  font-size: 1.1rem;
  padding-left: 10px;
  padding-right: 10px;
  outline: none;
  font-family: "robotobold";
  border: solid 1px #aaa;
  border-radius: 5px; }

input[type='button'] {
  cursor: pointer; }

input[type='button']:hover {
  background-color: #CCCCCC; }

.form_field > select, .form_field > input, .form_field > textarea {
  margin-top: 10px;
  margin-bottom: 10px; }

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

.related_form {
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  margin-bottom: 20px; }

.related_form > div.title:first-child {
  margin-top: 10px !important; }

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

.table_filter_top {
  display: flex;
  flex-wrap: wrap; }
.table_filter_searchfield {
  width: 100%; }
  .table_filter_searchfield > input {
    height: 35px !important;
    box-sizing: border-box; }
.table_filter_actionlist {
  width: 50%;
  padding-top: 10px; }
.table_filter_submit {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end; }
.table_filter_select {
  width: 180px !important;
  max-width: initial !important;
  height: 25px !important;
  margin-right: 10px !important; }
.table_filter_dialog {
  display: none; }
.table_filter_label-inline {
  margin-top: 7px; }

div.table_container select, div.table_container input, div.table_container option {
  margin: 0;
  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: 0;
  padding-bottom: 0; }

input.fileupload {
  padding: 0;
  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: 5px; }

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

.form_submit_buttons {
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 1%; }

.overlay .formcontainer {
  padding-bottom: 35px; }

.overlay .form_submit_buttons {
  padding: 0; }

.overlay .form_submit_buttons_overflow {
  padding: 0;
  background-color: #d1d1d1;
  position: fixed;
  left: 70px;
  right: 70px;
  bottom: 20px;
  padding-bottom: 20px; }

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;
  right: 5px;
  top: 5px; }

div.buttons a.action {
  float: right; }

div.buttons form {
  display: inline-block;
  margin-right: 5px; }

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

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

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: 0;
  padding: 0; }

li.icon, a.icon_file {
  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; }

.dataset_important {
  background-color: #ff76e8; }

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

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:last-child {
  border-radius: 0px 0px 10px 10px; }

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

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

.dataset + .badge {
  position: absolute;
  z-index: 1000;
  top: 2px;
  left: 56px; }

.item {
  display: inline-block;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  width: 100px;
  min-height: 138px;
  position: relative;
  border: solid 1px #aaa;
  margin: 10px; }

.item:hover {
  background-color: #eee; }

.grid {
  display: flex; }

.item .item_image {
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  position: absolute;
  top: 10px;
  left: 0px;
  right: 0px; }

.item .item_checkmark {
  display: none;
  position: absolute;
  left: -10px;
  top: -10px;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 30px; }

.item .item_checkmark .item_checkmark_icon {
  width: 50px;
  height: 50px;
  position: absolute;
  left: -10px;
  top: -10px;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  background-color: var(--company-color);
  -webkit-mask-box-image: url("../img/noun_icons/checkmark.png");
  mask-image: url("../img/noun_icons/checkmark.png"); }

.item_selected .item_checkmark {
  display: block; }

.item > label {
  margin: 0px !important;
  float: none !important;
  display: block !important;
  padding-top: 100px;
  line-height: 19px;
  max-height: 38px;
  overflow: hidden; }

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: 0;
  right: 0;
  top: 0;
  bottom: 0;
  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: black;
  /* Old browsers */
  background: -moz-linear-gradient(left, black 0%, white 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, black 0%, white 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, black 0%, white 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 {
  display: inline-block;
  position: relative;
  border: solid 2px transparent;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  background-color: #7cbc0a;
  color: white;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer; }
  .status_icon-select {
    position: absolute;
    right: 7px;
    top: calc(50% - 8px); }
  .status_select {
    position: relative; }
    .status_select * {
      box-sizing: border-box; }
    .status_select-list {
      display: none;
      opacity: 0;
      transition: opacity 300ms;
      position: absolute;
      z-index: 1000;
      top: 30px;
      width: 160px;
      background-color: #FFFFFF;
      border-radius: 10px;
      padding: 8px 0 10px;
      box-shadow: 1px 1px 4px #ccc;
      -moz-box-shadow: 1px 1px 4px #ccc;
      -webkit-box-shadow: 1px 1px 4px #ccc; }
      .status_select-list li {
        line-height: 1.2 !important;
        font-size: 0.9rem !important;
        padding: 8px 0;
        text-align: center; }
        .status_select-list li:hover {
          cursor: pointer;
          /*background-color: #c4c4c4;
          color: $color_font_light;*/
          text-decoration: underline; }
      .status_select-list-visible {
        display: block;
        opacity: 1;
        transition: opacity 300ms; }

.color_grey {
  color: #c4c4c4 !important; }

.background_grey, .status_grey {
  background-color: #c4c4c4 !important; }

.color_grey_light {
  color: #e0e0e0 !important; }

.background_grey_light {
  background-color: #e0e0e0 !important; }

.color_grey_dark {
  color: #808080 !important; }

.background_grey_dark {
  background-color: #808080 !important; }

.color_grey_darkest {
  color: #333333 !important; }

.background_grey_darkest {
  background-color: #333333 !important; }

.color_blue {
  color: #0049b0 !important; }

.background_blue, .status_blue {
  background-color: #0049b0 !important; }

.color_green {
  color: #7cbc0a !important; }

.background_green, .status_green {
  background-color: #7cbc0a !important; }

.color_olive_green {
  color: #a1ad00 !important; }

.background_olive_green {
  background-color: #a1ad00 !important; }

.color_lime_green {
  color: #c8d326 !important; }

.background_lime_green {
  background-color: #c8d326 !important; }

.color_orange {
  color: #ffb865 !important; }

.background_orange, .status_orange {
  background-color: #ffb865 !important; }

.color_red {
  color: #AE0000 !important; }

.background_red, .status_red {
  background-color: #AE0000 !important; }

.color_white, .status_blue, .status_green, .status_red {
  color: #FFFFFF !important; }

.background_white {
  background-color: #FFFFFF !important; }

.color_black, .status_grey {
  color: #000 !important; }

.background_black {
  background-color: #000 !important; }

.color_dark_orange, .status_orange {
  color: #de6301 !important; }

.background_dark_orange {
  background-color: #de6301 !important; }

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 */ }

div.overlay div.box {
  border: none;
  padding-bottom: 50px; }

div.colorpicker {
  /*position: relative;
  width: 100%;
  height: 100%;*/
  z-index: 10000; }

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

.colorpicker_patch {
  position: absolute;
  top: calc(50% - 12px);
  left: 10px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: solid 2px black;
  margin-right: 5px;
  vertical-align: middle; }

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_field {
  display: table-cell;
  width: 77%;
  padding-right: 1%;
  overflow: hidden;
  position: relative;
  color: #333;
  vertical-align: middle; }

.form_value {
  color: #333333;
  display: table;
  font-size: 1.1rem;
  padding-left: 10px;
  padding-right: 10px;
  outline: none;
  font-family: "robotobold";
  border: solid 1px #aaa;
  border-radius: 5px;
  min-height: 40px;
  line-height: 40px;
  min-width: 50%;
  margin-top: 10px;
  margin-bottom: 10px; }

.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: 0;
  bottom: 0;
  left: 39px;
  width: 1px;
  border-right: dotted 1px white; }

.treeline_horizontal {
  position: absolute;
  top: 23px;
  left: 42px;
  right: 0;
  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: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0;
  font-family: Roboto, sans-serif;
  background-image: url("../img/arrow_select.png");
  background-position: right;
  background-repeat: no-repeat;
  margin-top: 0; }

.selectbutton a.action {
  position: absolute;
  right: 0;
  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, div.tabcontent > div.messages_container > .log_message {
  margin-left: 20px;
  margin-top: 20px;
  margin-right: 20px; }

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

.log_message {
  color: black;
  background-color: white;
  padding: 15px 10px 15px 10px; }

.log_message > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

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

.info_message a {
  color: #00529B;
  text-decoration: underline; }

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

.ok_message a {
  color: #4F8A10;
  text-decoration: underline; }

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

.warn_message a {
  color: #ff8100;
  text-decoration: underline; }

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

.warn_message a {
  color: #D8000C;
  text-decoration: underline; }

#statusbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  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: 0; }

.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: 300px;
  width: 100px; }

div.teaser_content {
  padding: 20px;
  padding-top: 10px;
  position: relative;
  display: flex;
  justify-content: space-between; }

div#teaser_news_content > div.teaser_content, div#teaser_events_content > div.teaser_content {
  display: block; }

.teaser_content_data {
  width: 33%;
  display: flex;
  flex-direction: column; }

.teaser_content_gallery {
  width: 100%; }

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; }
*/

div.teaser_contentimage {
  display: inline-block;
}

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: 0;
  left: 0;
  right: 0;
  width: auto;
  margin: 0;
  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; }

.teaser_content_image {
  box-sizing: border-box;
  position: relative;
  width: 33%;
  padding: 10px 15px 0 0; }

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_content_small div.teaser_content_image img {
    max-height: 150px; }

div.teaser_row_name, div.teaser_row_value {
  display: block;
  text-overflow: ellipsis; }

div.teaser_row_name {
  overflow: hidden; }

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; }

div.teaser_row_value a.button, table.data tbody td a.button {
  color: white;
  text-decoration: none; }

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; }

.multicheckbox_flex {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start; }
.multicheckbox_container {
  padding: 10px 0; }
  .multicheckbox_container .column {
    width: 33.33%;
    padding-right: 20px;
    max-width: 300px; }
    .multicheckbox_container .column-hidden {
      display: none; }
.multicheckbox_more-link {
  clear: both;
  text-align: right; }
  .multicheckbox_more-link a {
    font-size: 0.9rem;
    text-decoration: underline; }

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

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

.formfield_mandatory sup {
  color: red; }

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

.form_field a.action {
  margin-bottom: 10px;
  color: white; }

p.mandatory {
  margin-top: 5px;
  float: right; }

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

div.tabs > a,
.tabs_dropdown > a {
  display: inline-block;
  flex-shrink: 0;
  min-width: 80px;
  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-right: solid 1px #dddddd; }

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

div.tabs > a.tab_selected {
  color: var(--company-color);
  background-color: white;
  border: none;
  border-top: solid 3px var(--company-color);
  border-left: solid 1px #dddddd; }

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 0 0; }

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 0 0; }

div.tabs_subtab > a.tab_selected {
  background-color: var(--company-color);
  color: #333;
  height: auto;
  border-top: solid 1px var(--company-color);
  color: white; }

div.tabs > a > span.icon,
span.mask_icon,
.tabs_dropdown > 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.icon {
  background-color: #333; }

div.tabs > a.tab_selected > span.icon {
  background-color: var(--company-color); }

.tabs_subnav {
  height: 78px; }

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

div.tabcontent {
  background-color: white;
  padding: 25px;
  display: none;
  border-radius: 0 10px 10px 10px; }
  div.tabcontent .column-left {
    margin-right: 420px; }
  div.tabcontent .column-right {
    width: 400px;
    float: right; }

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

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

div.tabscontent_subtab {
  border: none; }

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

.checked {
  color: green !important; }

.checked > span.icon {
  background-color: green !important; }

div.tabs_verticaltab {
  width: 250px;
  margin-right: 20px; }

div.tabs_verticaltab > a.tab_selected {
  border-top: solid 1px #d0d4d5 !important; }

div.tabs_verticaltab > a:last-child {
  border-right: none; }

div.tabs_verticaltab > a,
.tabs_dropdown > a {
  display: block;
  font-size: 1.0rem;
  text-align: left;
  min-height: 30px;
  line-height: normal;
  padding-left: 55px;
  border-left: none !important;
  border-bottom: none !important;
  white-space: unset; }

div.tabs_verticaltab > a > span.label,
.tabs_dropdown a > span.label {
  display: inline-block;
  line-height: normal;
  padding-top: 4px; }

div.tabs_verticaltab > a > span.icon,
.tabs_dropdown > a > span.icon {
  display: block;
  position: absolute;
  left: 5px;
  top: 15px; }

div.tabscontent_verticaltab {
  flex-grow: 1;
  border-left: none;
  margin-bottom: 0px; }

div.tabscontent_verticaltab > div.tabcontent {
  padding: 30px; }

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

.loadingtext {
  display: inline-block;
  line-height: 25px;
  min-height: 25px;
  padding-left: 30px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-image: url("../img/spin.gif");
}

.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;
  width: 100%;
  border: solid 1px #ccc; }

table.data th {
  cursor: pointer; }

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

table.data tfoot tr {
  background-color: #fff1af; }

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

table.data th, table.data tr.tablefilter td {
  padding: 5px;
  font-size: 0.9rem;
  background-color: #333;
  text-align: left;
  font-family: "robotobold";
  font-weight: normal;
  border-bottom: solid 1px #cccccc;
  background-clip: padding-box;
  color: white; }

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

table.data tr.grey,
table.data tr.white,
table.data tr.red,
table.data tr.blue,
table.data tr.yellow,
table.data tr.green {
  border-bottom: solid 1px #ddd;
  background-clip: padding-box;
  cursor: pointer;
  color: #333;
}

table.data tr.grey {
  background-color: #eee;
}

table.data tr.white {
  background-color: white;
}

table.data tr.red.white,
table.data tr.red:not(.grey) {
  background-color: #FF9999;
}

table.data tr.blue.white,
table.data tr.blue:not(.grey) {
  background-color: #dfe7f5;
}

table.data tr.yellow.white,
table.data tr.yellow:not(.grey) {
  background-color: #FFCC66;
}

table.data tr.green.white,
table.data tr.green:not(.grey) {
  background-color: #C7E699;
}

table.data tr.red.grey {
  background-color: #e68888;
}

table.data tr.blue.grey {
  background-color: #c8d4e8;
}

table.data tr.yellow.grey {
  background-color: #e6b555;
}

table.data tr.green.grey {
  background-color: #b3d285;
}

/* Ensure td inherits the row color */
table.data tr.red td,
table.data tr.blue td,
table.data tr.yellow td,
table.data tr.green td {
  background-color: inherit;
}

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

.storno {
  color: #999 !important; }

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

table.data tr.white:hover, table.data tr.grey:hover, table.data tr.selected {
  background-color: var(--company-color);
  color: white; }

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

table.data td a.icon_file {
  background-size: contain;
}

.table-responsive {
  display: block;
  overflow: auto;
  max-height: 600px;
  -webkit-overflow-scrolling: touch; }

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

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

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

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

table.excel th, table.excel td, .wysiwyg table th, .wysiwyg table 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;
  background-clip: padding-box; }

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

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

table.exceldata tbody tr:hover td {
  background-color: #fffad9;
  cursor: pointer; }

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, .wysiwyg table thead tr th, .wysiwyg table tbody tr th, .wysiwyg table 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: 0;
  margin: 0;
  width: 100%;
  height: auto;
  text-align: right;
  border-radius: unset; }

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

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, 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; }

/*
.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 0 5px 5px;
  float: right; }

.message.sent:after {
  border-width: 0 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: 0; }

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; }

span.text_extendable {
  display: inline-block;
  overflow: hidden;
  max-height: 40px;
  transition: max-height 1s cubic-bezier(0, 1, 0, 1); }

span.text_extendable:hover {
  max-height: 500px; }

.datamessage,
.globalmessage {
  position: relative; }

.message_confirm {
  margin-top: 10px; }

table.login {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  padding: 30px; }

table.login td {
  color: white; }

table.terms_of_use {
  margin-top: 110px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px; }

table.terms_of_use p {
  margin-bottom: 10px; }

.badge {
  color: #ffffff;
  display: inline-block;
  margin-left: 5px;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem; }
  .badge-info {
    background-color: #00529B; }
  .badge-ok {
    background-color: #4F8A10; }
  .badge-warn {
    background-color: #ff8100; }
  .badge-error {
    background-color: #D8000C; }

.ticket_priority {
  height: 20px;
  display: inline-block;
  vertical-align: middle; }
.ticket_status {
  display: inline-block;
  min-width: 160px;
  box-shadow: 1px 1px 4px #ccc;
  -moz-box-shadow: 1px 1px 4px #ccc;
  -webkit-box-shadow: 1px 1px 4px #ccc; }

/* third party overwrites */
.ui-widget {
  font-family: "robotoregular" !important; }

canvas.jSignature {
  width: 100% !important;
  max-width: 400px !important; }

#col_collapse {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 50px;
  height: 50px;
  background-image: url("../img/noun_icons/arrow_right.png"); }

.fullscreen > #content {
  margin-right: 100px !important; }

.fullscreen > #col {
  right: -280px !important; }

.fullscreen > #col > #col_collapse {
  transform: rotate(180deg); }

body.catchpage, body.catchpage div#backgrounds, body.catchpage div.background {
  width: 100% !important; }

body.catchpage #nav, body.catchpage #nav-primary {
  display: none !important; }

body.catchpage .tabs_subnav {
  display: none !important; }

body.catchpage .tabs_subtab {
  display: none !important; }

body.catchpage #menu_icon {
  display: none !important; }

body.catchpage #content {
  margin-top: 120px; }

body.catchpage #logo {
  left: 50%;
  margin-left: -124px;
  /* Half of the width */
  right: auto; }

.open-close-group-button {
  float: right;
  display: none; }

.form-group {
  display: none; }

.active {
  display: inline; }

.kpi {
  position: relative;
  width: 14.6%;
  min-width: 210px;
  height: 100px;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 1vw;
  margin-bottom: 1vw;
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(80, 80, 80, 0.5);
  -moz-box-shadow: 0px 0px 5px 1px rgba(80, 80, 80, 0.5);
  box-shadow: 0px 0px 5px 1px rgba(80, 80, 80, 0.5);
  text-decoration: none; }

.kpi:hover {
  background-color: #fafafa;
  -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5); }

.kpi_data {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 200;
  text-decoration: none;
  padding-top: 20px;
  font-family: 'Abel', sans-serif;
  color: var(--company-color);
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.kpi_headline {
  font-family: 'Abel', sans-serif;
  font-size: 0.8rem;
  text-decoration: none;
  position: absolute;
  text-align: center;
  bottom: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #777 !important;
  width: 100%;
  height: 30px; }

.onpage_tab {
  display: block;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  vertical-align: baseline;
  background-color: #444;
  color: white;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 100 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Abel', sans-serif;
  cursor: pointer;
  text-decoration: none; }

.onpage_tab_selected {
  background-color: var(--company-color);
  color: white; }

.onpage_tab_content {
  display: none; }

.onpage_tab_content_selected {
  display: block !important; }

/*** PAGINATION ***/
.pagination-page {
  display: inline-block;
  background-color: #cecece;
  border: 1px solid #aaa;
  color: black;
  text-shadow: 1px 1px 1px #ccc;
  font-size: 15px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  margin: 5px 5px 10px 0;
}

.pagination-page > a {
  padding: 5px;
  height: 30px;
  line-height: 30px;
  min-width: 20px;
}

.pagination-page:hover {
  background-color: #f3f3f3;
}

.pagination-page a {
  color: inherit;
  text-decoration: none;
}

.pagination-current-page {
  display: inline-block;
  background-color: white;
  border: 1px solid #bbb;
  color: black;
  text-shadow: 1px 1px 1px #ccc;
  font-size: 15px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  margin: 5px 5px 10px 0;
  padding: 5px;
}

.pagination-current-page a {
  color: inherit;
  text-decoration: none;
}

.pagination-separator {
  display: inline-block;
  padding-top: 15px;
  height: 15px;
  vertical-align: top;
  margin: 5px 5px 10px 0;
}

.progressbar {
  display: block;
  height: 6px;
  background-color: #aaa;
  border: solid 1px #a3a3a3;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.progress {
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  height: 6px;
  background-color: #4aa91f;
  border-radius: 2px;
}

/* big teaser specific styling */
.teaser_row_value .data_highlight {
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
}

.teaser_row:has(.data_highlight) .teaser_row_name {
  font-size: 1.25rem;
}

.teaser_row_value > .data_highlight {
  font-size: 1.5rem;
}

/* table specific styling */
.data_highlight {
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-block;
  color: #FFFFFF;
}

.table td:has(> .data_highlight_string) {
  text-align: center;
}

.data_highlight_verygood {
  background-color: #28a745;
}

.data_highlight_good {
  background-color: #218838;
}

.data_highlight_ok {
  background-color: #6c757d;
}

.data_highlight_sufficient {
  background-color: #fd7e14;
}

.data_highlight_poor {
  background-color: #dc3545;
}

.data_highlight_verypoor {
  background-color: #c82333;
}

.tiles_container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
}

.tile {
  flex: 1 1 340px;
  min-width: 340px;
  max-width: 400px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  transition: box-shadow 0.2s ease;
}

.tile_add {
  display: flex;
  align-items: center;
  min-height: 200px;
  background: #f8f8f8;
  border: 2px dashed #c0c0c0;
}

.tile_add:hover {
  background: #f0f0f0;
  border-color: #a0a0a0;
}

.tile_add a {
  width: 100%;
  padding: 30px 20px;
  text-align: center;
}

.tile_add_icon {
  font-size: 48px;
  font-weight: 300;
  margin-bottom: 10px;
}

.tile_add_title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.tile_add_subtitle {
  font-size: 14px;
}

.tile .title {
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
  background: #fafafa;
}

div.tile > div.title > h5 {
  line-height: 38px;
  margin: 0;
}

div.tile > div.title > h6 {
  font-size: 0.9rem;
}

.tile .teaser_content_data {
  width: 66%;
}

.side_by_side {
  display: grid;
  gap: 20px;
/*
  width: 100%;
  padding: 20px;
  margin: 0 -20px;
 */
}

.databox {
  padding: 5px 10px;
  background-color: #ccc;
  margin-right: 10px;
  border-radius: 5px;
}

.teaser_content_data.single_column {
  width: 100%;
}

/*# sourceMappingURL=general.css.map */