@font-face {
  font-family: 'bitstream';
  src: url("bitstream/Vera-webfont.eot");
  src: url("bitstream/Vera-webfont.eot?#iefix") format("embedded-opentype"), url("bitstream/Vera-webfont.woff") format("woff"), url("bitstream/Vera-webfont.ttf") format("truetype"), url("bitstream/Vera-webfont.svg#bitstream_vera_sansroman") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'surfacemedium';
  src: url("font/surface_medium_macroman/Surface_Medium-webfont.eot");
  src: url("font/surface_medium_macroman/Surface_Medium-webfont.eot?#iefix") format("embedded-opentype"), url("font/surface_medium_macroman/Surface_Medium-webfont.woff") format("woff"), url("font/surface_medium_macroman/Surface_Medium-webfont.ttf") format("truetype"), url("font/surface_medium_macroman/Surface_Medium-webfont.svg#surfacemedium") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Secondary Color A: Blau */
/************************
  GLOBAL STYLES
************************/
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #FFF;
  text-align: center;
  cursor: default;
  color: #111;
}

* {
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
}

table, img {
  border: 0 none;
}

label {
  cursor: pointer;
}

a {
  color: #164469;
  text-decoration: none;
}

a:hover,
a:active {
  text-decoration: underline;
}

a:focus {
  outline: none;
}

hr {
  color: #164469;
  height: 1px;
  padding: 0;
  border-color: #164469;
  border-width: 1px 0 0 0;
  border-style: solid;
  margin: 12px auto;
  width: 95%;
}

h1 {
  position: relative;
  font-size: 32px;
  font-weight: normal;
  margin-bottom: 10px;
}

/*#################################################################################################################
  STYLES
#################################################################################################################*/
/************************
  TOOLS
************************/
.justify {
  text-align: justify;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.red {
  color: #ff0000;
}

.green {
  color: green;
}

.grey {
  color: #888;
}

.blue {
  font-size: 14px;
  color: #164469;
}

.left {
  width: 100px;
  float: left;
}

.tiny {
  width: 1%;
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}

.block {
  display: block;
}

.bold {
  font-weight: bold;
}

.icon, .middle {
  vertical-align: middle;
}

.pointer {
  cursor: pointer;
}

.normal, tr.kat td.normal {
  font-weight: normal;
  font-style: normal;
}

/************************
  FORM ELEMENTS
************************/
form {
  padding: 0;
  margin: 0;
}

fieldset {
  border: 1px solid #BBB;
  margin-bottom: 10px;
  padding: 10px;
}

fieldset br {
  clear: both;
}

fieldset legend {
  margin-left: 11px;
  padding-left: 10px;
  padding-right: 10px;
  color: #164469;
}

fieldset label {
  color: #111;
  cursor: pointer;
  text-align: right;
  padding-right: 5px;
  padding-top: 2px;
  width: 140px;
  display: block;
  float: left;
}

fieldset label span {
  font-weight: bold;
  color: #164469;
}

.field {
  width: 280px;
  float: left;
}

.inputField,
.inputField:hover,
.inputField:focus {
  width: 280px;
  margin: 1px;
  border: 1px solid #CCC;
  color: #444;
}

.inputField:hover,
.inputField:focus {
  border-bottom: 1px solid #164469;
  color: #111;
}

textarea.inputField {
  height: 60px;
}

.inputFieldFile {
  cursor: pointer;
}

.submit,
.button {
  cursor: pointer;
}

div.submit {
  padding-top: 10px;
  text-align: right;
  cursor: default;
}

div.submit input {
  cursor: pointer;
  overflow: visible;
  width: auto;
}

select {
  background-color: #FFF;
  cursor: pointer;
}

select option {
  background-color: #FFF;
}

select option.selKat {
  background-color: #838383;
  font-weight: bold;
  color: #FFF;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  cursor: default;
}

table.hperc {
  width: 100%;
  background: #CCC;
  margin-top: 20px;
}

table.hperc td {
  padding: 2px 4px;
}

tr.kat td {
  font-weight: bold;
  background-color: #DDD;
}

tr.first td,
tr.third td {
  background-color: #EEE;
}

tr.second td {
  background-color: #FFF;
}

tr.mark td {
  background-color: #A0DF81;
}

tr.markstorno td {
  background-color: #FB8080;
}

tr.first:hover td, tr.second:hover td {
  background-color: #FFFFCC;
}

h1 span {
  font-size: 14px;
  color: #164469;
}

h1 span.normal {
  font-style: normal;
  font-size: 11px;
}

h1 small {
  font-weight: normal;
}

.tile label {
  width: 110px;
  padding-right: 5px;
}

.tile .inputField {
  width: 200px;
}

select {
  border: 1px solid #CCC;
  margin: 1px 0;
}

.readonly, .readonly:hover, .readonly:focus {
  background-color: transparent;
  border: 1px solid transparent;
  cursor: default;
}

.default {
  cursor: default;
}

input.checkbox {
  cursor: pointer;
}

label.check {
  width: auto;
  float: none;
  display: inline;
  border: none;
  padding: 0;
}

ul,
ul li {
  margin: 0;
  padding: 0;
}

ul {
  margin-left: 20px;
}

/*#####################
  SITE NAVIGATION
#######################*/
.siteNavi {
  margin: 4px 3px;
  margin-top: 15px;
  text-align: right;
}

.siteNavi a {
  border: 1px solid #FFF;
  background-color: #EEE;
  padding: 2px 5px;
  margin-left: 1px;
}

.siteNavi a.aktuell,
.siteNavi a:hover,
.siteNavi a:active {
  background-color: #CCC;
  color: #000;
}

h1 .siteNavi {
  position: absolute;
  top: -14px;
  right: 0;
}

/*#####################
  MISC
#######################*/
em {
  background: yellow;
}

div#error {
  text-align: center;
  padding: 10px 0;
  color: #164469;
  border: 1px solid #164469;
}

small, small a:link, small a:visited {
  font-size: 10px;
  font-style: italic;
}

.auto {
  width: auto;
}

.buttonContainer .btnInput {
  text-align: left;
  margin-right: 5px;
  display: inline-block;
}

input.submitButton,
input.data,
input.add,
input.addv,
input.products,
input.edit,
input.insert,
input.upload,
input.save,
input.abbrechen,
input.yes,
input.no,
input.akontiert,
input.tvsender,
input.codierung,
input.stornogrund,
input.punkte,
input.excel,
button.excel,
input.import,
input.anwenden,
input.folder,
input.admin_products,
input.search {
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
  background-color: #FFF;
  background-position: 5px 50%;
  background-repeat: no-repeat;
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
  overflow: visible;
  padding: 5px;
  padding-left: 25px;
}

input.add {
  background-image: url(../images/icons/kunde.gif);
}

input.addv {
  background-image: url(../images/icons/vertreter.gif);
}

input.products {
  background-image: url(../images/icons/products.gif);
}

input.edit {
  background-image: url(../images/icons/edit.gif);
}

input.insert {
  background-image: url(../images/icons/add.gif);
}

input.data {
  background-image: url(../images/icons/data.gif);
}

input.punkte {
  background-image: url(../images/icons/punkte.gif);
}

input.yes {
  font-weight: bold;
  background-image: url(../images/icons/abrechnung_done.gif);
  margin-right: 5px;
}

input.no {
  background-image: url(../images/icons/no.gif);
}

input.akontiert {
  background-image: url(../images/icons/akontiert.gif);
}

input.search {
  background-image: url(../images/icons/time.png);
}

input.admin_products {
  background-image: url(../images/icons/asterisk_orange.png);
}

input.addv {
  background-image: url(../images/icons/vertreter.gif);
}

input.add {
  background-image: url(../images/icons/kunde.gif);
}

.fileUploadBtn.folder,
input.folder {
  background-image: url(../images/icons/icon_folder.gif);
}

.fileUploadBtn.excel,
button.excel,
input.excel {
  background-image: url(../images/icons/excel.gif);
}

input.products {
  background-image: url(../images/icons/products.gif);
}

input.voice {
  background-image: url(../images/icons/speaker.gif);
}

input.edit {
  background-image: url(../images/icons/edit.gif);
}

input.insert {
  background-image: url(../images/icons/add.gif);
}

input.save {
  background-image: url(../images/icons/icon_speichern.gif);
}

input.upload {
  background-image: url(../images/icons/icon_upload.gif);
}

input.abbrechen {
  background-image: url(../images/icons/icon_x.png);
}

input.data {
  background-image: url(../images/icons/data.gif);
}

input.punkte {
  background-image: url(../images/icons/punkte.gif);
}

input.yes {
  font-weight: bold;
  background-image: url(../images/icons/abrechnung_done.gif);
  margin-right: 5px;
}

input.no {
  background-image: url(../images/icons/no.gif);
}

input.akontiert {
  padding-left: 17px;
  background-image: url(../images/icons/akontiert.gif);
}

input.tvsender {
  padding-left: 17px;
  background-image: url(../images/icons/tv-icon.png);
}

input.codierung {
  padding-left: 17px;
  background-image: url(../images/icons/codierung.png);
}

input.stornogrund {
  padding-left: 17px;
  background-image: url(../images/icons/delete.gif);
}

input.import {
  background-image: url(../images/icons/import.gif);
}

input.anwenden {
  background-image: url(../images/icons/icon_anwenden.gif);
}

.row {
  width: 460px;
  padding: 4px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.row:after {
  clear: both;
  content: " ";
  display: table;
}

#entries-table {
  width: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#entries-table li {
  list-style: none;
  padding: 3px 3px;
  cursor: pointer;
}

ul#entries-table li:nth-child(odd) {
  background-color: #efefef;
}

.entries-title {
  width: 79%;
  display: inline-block;
  vertical-align: top;
}

.entries-options {
  text-align: center;
  width: 20%;
  display: inline-block;
  vertical-align: top;
}

.entries-value {
  display: inline-block;
  vertical-align: top;
}

.elementeListe {
  width: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.elementeListe li {
  padding: 3px 3px;
  cursor: pointer;
}

.elementeListe li a {
  display: block;
}

.tableStyleListe li {
  list-style: none;
}

.elementeListe li a img {
  vertical-align: top;
}

.stripedListe li:nth-child(odd),
ul.elementeListe li:nth-child(odd) {
  background-color: #efefef;
}

.listenElementHead {
  width: 89%;
  display: inline-block;
  vertical-align: top;
}

.listenElementOptions {
  width: 10%;
  display: inline-block;
  vertical-align: top;
}

/*#####################
  JS CALENDAR
#######################*/
span.calendarContainer {
  position: absolute;
  z-index: 999999;
  text-align: center;
  display: none;
  margin-top: -107px;
  margin-left: -55px;
}

span.calendarContainer table thead th {
  font-weight: bold;
  font-size: 11px;
  color: #FFF;
  text-align: center;
  background-color: #7699b5;
  padding: 2px 5px;
}

span.calendarContainer table thead th.weekday {
  font-weight: bold;
  font-size: 10px;
  color: #112A5D;
  text-align: center;
  background-color: #CCD2D8;
  border: solid #BBB 1px;
}

span.calendarContainer table tbody td {
  font-weight: normal;
  font-size: 10px;
  color: #111;
  background-color: #FFF;
  text-align: right;
  padding: 2px 5px;
}

span.calendarContainer table tbody td.saturday {
  color: #9A2525;
  font-weight: normal;
}

span.calendarContainer table tbody td.sunday {
  color: #9A2525;
  font-weight: bold;
}

span.calendarContainer table tbody td.weekend {
  color: red;
}

span.calendarContainer table tbody td.today {
  background-color: #7699b5;
  color: #FFF;
}

span.calendarContainer table tbody td.last_month, div.calendarContainer table tbody td.next_month {
  color: #a3afc4;
}

span.calendarContainer table {
  border-collapse: separate;
  padding: 0;
  background-color: #BBB;
}

.toggle {
  display: none;
}

.fieldsetToggle {
  padding-top: 0;
  padding-bottom: 0;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

#modalBox {
  position: fixed;
  top: 110px;
  left: 50%;
  width: 460px;
  margin-left: -230px;
  padding: 10px;
  border: 2px solid #a3afc4;
  background: #FFF;
  line-height: 27px;
}

/*#####################
  JS AUTOCOMPLETE
#######################*/
div.autocomplete {
  position: absolute;
  left: 21px;
  display: none;
  clear: both;
  margin-left: 117px;
  border: 1px solid #777;
  background: #FFF;
}

* html div.autocomplete {
  margin-top: 22px;
}

* + html div.autocomplete {
  margin-top: 22px;
}

div.autocomplete input {
  font-size: 11px;
  cursor: pointer;
  padding: 2px 5px;
  display: block;
  width: 200px;
  border: 0;
}

* html div.autocomplete input {
  margin-left: -117px;
}

* + html div.autocomplete input {
  margin-left: -117px;
}

div.autocomplete input.selected {
  background-color: #164469;
  color: #FFF;
}

div.abrechnung {
  width: 625px;
  background: #EFEFEF;
  padding: 20px 0;
  margin-top: 10px;
}

div.select {
  border: 1px solid #CCC;
  float: left;
  clear: right;
  height: 150px;
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: scroll;
}

/* ==== Bankcheck ==== */
.bankCheckInfoContainer {
  line-height: 18px;
  width: 65%;
  min-width: 386px;
  /* border: 1px solid #ccc; */
  background: none repeat scroll 0 0 #f6f6f6;
  padding: 10px 10px 10px 0;
}

.labelBankcheckinfo {
  text-align: right;
  width: 110px;
  padding-top: 3px;
  padding-right: 5px;
  float: left;
}

.statusBankcheckinfo {
  float: left;
}

.statusBankcheck {
  border: 1px solid #bbb;
  padding: 2px 20px;
  display: inline-block;
}

.bankcheckText {
  margin-top: 10px;
  margin-left: 115px;
}

.fine {
  background: #A0DF81;
}

.mediumfine {
  background: #ffc18c;
}

.notfine {
  background: #fa8d7f;
}

.nothing {
  background: #9ee1fa;
}

.bankInfoText {
  color: #164469;
  display: block;
}

.bankErrorText {
  color: #ff0000;
}

.bankFineText {
  color: #5F8F47;
}

.refreshBankcheckLink {
  color: #164469;
  cursor: pointer;
}

.refreshBankcheckLink:hover {
  text-decoration: underline;
}

.refreshBankcheckLink img {
  margin-right: 3px;
  vertical-align: middle;
  display: inline-block;
}

.infoContainer {
  border: 1px solid #004999;
  background: #CCE4FF;
  padding: 10px;
  margin-bottom: 10px;
  display: block;
}

.infoContainer h3 {
  margin-top: 0;
  margin-bottom: 0;
}

.infoContainer p {
  margin-top: 0;
  margin-bottom: 0;
}

.nachrichtenLink {
  font-weight: bold;
  color: #f8f8f8;
  background: none repeat scroll 0 0 #ed5234;
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 4px;
  margin-top: 12px;
  display: block;
}

.userMessageContainer {
  background: #cce4ff;
  border: 1px solid #004999;
  padding: 12px 10px 12px 12px;
  margin-bottom: 10px;
  overflow: visible;
}

.openmessage {
  font-family: Segoe WP, helvetica, sans-serif;
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  width: 90%;
  color: white;
  -moz-text-size-adjust: none;
  border: 0px solid #4891DC;
  border-radius: 5px;
  background: #1958c6;
  /* margin-top: 15px; */
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px #888;
  box-shadow: 0 0 5px #888;
  margin-bottom: 10px;
  margin-left: 0px;
  padding: 5px;
  float: left;
}

.myMessageColor {
  background: #4891DC;
  float: right;
}

.openmessage p {
  margin: 0 0 10px 0;
}

.openmessage em {
  display: block;
  font-family: "Segoe WP", "helvetica", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  text-align: right;
  background: inherit;
}

.userMessageContainerAction {
  background: #fff;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 5px;
  margin: 0 0 14px;
}

.conversationContainer {
  background: #b1c9e4;
  padding: 3px 10px 10px;
}

.bgEven {
  background: #e5f3ff;
}

.userMessageAntwort {
  font-weight: bold;
  border-top: 1px solid #ccc;
  padding-top: 5px;
  margin: 0;
}

.messageTitle {
  font-weight: bold;
  margin-bottom: 5px;
}

.umcAction {
  text-decoration: underline;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: 0 2px;
  padding-left: 20px;
}

.umcAction:hover {
  text-decoration: none;
}

.ausblenden {
  background-image: url("../images/icons/collapse.gif");
}

.einblenden {
  background-image: url("../images/icons/expand.gif");
  display: none;
}

.messageLink {
  position: relative;
  margin: 12px 8px 0 0;
  float: left;
  z-index: 10;
}

/*
  PUNKTE
*/
div.percent {
  background-color: #ff7878;
  height: 2px;
  line-height: 2px;
  font-size: 2px;
}

div.percent div {
  float: left;
  background: #5d9163;
  height: 2px;
  line-height: 2px;
  font-size: 2px;
  text-align: right;
}

div.percent span {
  color: #FFF;
  font-weight: bold;
  font-size: 10px;
  margin: 0 5px;
}

/**
 * 	ADRESSTOOL
 */
.ui-autocomplete {
  max-height: 200px;
  width: 300px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  /* add padding to account for vertical scrollbar */
  padding-right: 20px;
}

.ui-menu .ui-menu-item a {
  text-align: left;
}

.ui-autocomplete-loading {
  background: white url("https://adressbase.net/ui-anim_basic_16x16.gif") right center no-repeat;
}

.articlefilteroptions {
  display: inline;
}

#groups_section {
  margin-left: 145px;
  width: 285px;
}

#groups_section .ui-accordion-header A {
  padding-top: 1px;
  padding-bottom: 1px;
}

#groups_section .ui-accordion-content {
  padding: 0;
}

/* Have ideas for improving this CSS for the general community? Submit your changes at: https://github.com/Valums-File-Uploader/file-uploader */
.qq-uploader {
  position: relative;
  width: 100%;
}

.qq-upload-button {
  display: block;
  /*or inline-block*/
  width: 105px;
  padding: 7px 0;
  text-align: center;
  background: #880000;
  border-bottom: 1px solid #DDD;
  color: #FFF;
}

.qq-upload-button-hover {
  background: #CC0000;
}

.qq-upload-button-focus {
  outline: 1px dotted #000000;
}

.qq-upload-drop-area, .qq-upload-extra-drop-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 30px;
  z-index: 2;
  background: #FF9797;
  text-align: center;
}

.qq-upload-drop-area span {
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -8px;
  font-size: 16px;
}

.qq-upload-extra-drop-area {
  position: relative;
  margin-top: 50px;
  font-size: 16px;
  padding-top: 30px;
  height: 20px;
  min-height: 40px;
}

.qq-upload-drop-area-active {
  background: #FF7171;
}

.qq-upload-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qq-upload-list li {
  margin: 0;
  padding: 9px;
  line-height: 15px;
  font-size: 16px;
  background-color: #FFF0BD;
}

.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
  margin-right: 12px;
}

.qq-upload-spinner {
  display: inline-block;
  background: url("../images/icons/loading.gif");
  width: 15px;
  height: 15px;
  vertical-align: text-bottom;
}

.qq-upload-size, .qq-upload-cancel {
  font-size: 12px;
  font-weight: normal;
}

.qq-upload-failed-text {
  display: none;
}

.qq-upload-fail .qq-upload-failed-text {
  display: inline;
}

.qq-upload-list li.qq-upload-success {
  background-color: #5DA30C;
  color: #FFFFFF;
}

.qq-upload-list li.qq-upload-fail {
  background-color: #D60000;
  color: #FFFFFF;
}

.loadmask {
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  -moz-opacity: 0.5;
  opacity: .50;
  filter: alpha(opacity=50);
  background-color: #CCC;
  width: 100%;
  height: 100%;
  zoom: 1;
}

.loadmask-msg {
  z-index: 20001;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #6593cf;
  background: #c3daf9;
  padding: 2px;
}

.loadmask-msg div {
  padding: 5px 10px 5px 25px;
  background: #fbfbfb url("../images/loading.gif") no-repeat 5px 5px;
  line-height: 16px;
  border: 1px solid #a3bad9;
  color: #222;
  font: normal 11px tahoma, arial, helvetica, sans-serif;
  cursor: wait;
}

.masked {
  overflow: hidden !important;
}

.masked-relative {
  position: relative !important;
}

.masked-hidden {
  visibility: hidden !important;
}

.clearAll {
  font-size: 1px;
  line-height: 0;
  clear: both;
}

.col46 {
  width: 48%;
  float: left;
}

.col46 + .col46 {
  float: right;
}

.col {
  border: 0px solid transparent;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  background-clip: padding-box !important;
  float: left;
}

.gridRow {
  *zoom: 1;
}
.gridRow:after {
  content: "";
  display: table;
  clear: both;
}

.wxm-row {
  *zoom: 1;
}
.wxm-row:after {
  content: "";
  display: table;
  clear: both;
}

[class^="wxm-col-"] + [class^="wxm-col-"] {
  margin-left: 2%;
}

.wxm-col-offset-1 {
  margin-left: 8.5%;
}

.wxm-col-1 {
  width: 6.5%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

.wxm-col-offset-2 {
  margin-left: 17%;
}

.wxm-col-2 {
  width: 15%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

.wxm-col-offset-3 {
  margin-left: 25.5%;
}

.wxm-col-3 {
  width: 23.5%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

.wxm-col-offset-4 {
  margin-left: 34%;
}

.wxm-col-4 {
  width: 32%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

.wxm-col-offset-5 {
  margin-left: 42.5%;
}

.wxm-col-5 {
  width: 40.5%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

.wxm-col-offset-6 {
  margin-left: 51%;
}

.wxm-col-6 {
  width: 49%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

.wxm-col-offset-7 {
  margin-left: 59.5%;
}

.wxm-col-7 {
  width: 57.5%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

.wxm-col-offset-8 {
  margin-left: 68%;
}

.wxm-col-8 {
  width: 66%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

.wxm-col-offset-9 {
  margin-left: 76.5%;
}

.wxm-col-9 {
  width: 74.5%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

.wxm-col-offset-10 {
  margin-left: 85%;
}

.wxm-col-10 {
  width: 83%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

.wxm-col-offset-11 {
  margin-left: 93.5%;
}

.wxm-col-11 {
  width: 91.5%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

.wxm-col-offset-12 {
  margin-left: 102%;
}

.wxm-col-12 {
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

html {
  -webkit-font-smoothing: antialiased;
}

table td * {
  font-size: 1em !important;
}

* {
  padding: 0;
  margin: 0;
}

div#page {
  position: relative;
  text-align: left;
}

.pageContainer {
  position: relative;
  text-align: left;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px 0px 0px 57px;
  max-width: 1600px;
  min-width: 320px;
  margin: 0 auto;
  *zoom: 1;
}
.pageContainer:after {
  content: "";
  display: table;
  clear: both;
}

.page-header {
  position: fixed;
  width: 100%;
  background: #fff;
  z-index: 5;
}
.page-header p.loginStatusText {
  font-size: 13px;
  text-align: right;
  color: #164469;
  margin-top: 10px;
}
.page-header p.loginStatusText a {
  text-decoration: underline;
}
.page-header p.loginStatusText a:hover {
  color: #B40015;
}

.pageBody {
  padding-top: 230px;
  padding-bottom: 50px;
  z-index: 4;
}

.headerContainer {
  position: relative;
}

.backlinkContainer {
  position: relative;
  margin-top: 4px;
  float: right;
  z-index: 1;
}

.ph-shadow {
  -moz-box-shadow: #9d9d9d 0px 14px 20px;
  -webkit-box-shadow: #9d9d9d 0px 14px 20px;
  box-shadow: #9d9d9d 0px 14px 20px;
}

.buttonContainer {
  background: #efefef;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  padding-bottom: 8px;
  padding-left: 5px;
  margin: 10px 0 5px;
}

.pageLogin {
  background: none;
  z-index: 4;
}

.kompaktModus .logo {
  height: 23px;
}
.kompaktModus .page-header p.loginStatusText {
  margin-top: 3px;
}
.kompaktModus .pageBody {
  padding-top: 90px;
}
.kompaktModus .childNavList {
  left: -13px;
}
.kompaktModus .childNavList .navlink {
  padding: 8px 22px 7px 39px;
}
.kompaktModus .hasChildNavList > .navlink {
  background-position: 0 0;
}
.kompaktModus .navlink, .kompaktModus .childNavList .navlink {
  height: 38px;
  width: 38px;
}
.kompaktModus .navText {
  display: none;
}
.kompaktModus .mainAction .mainNavListe .navBtn > .navlink i {
  left: 4px;
}
.kompaktModus .navBtn.noText .navlink.icon-avatar i {
  background-size: 32px;
  height: 38px;
  width: 39px;
}
.kompaktModus .nachrichtenLink {
  top: -12px;
  right: 27px;
}
.kompaktModus .toolTabContainer {
  top: 63px;
}
.kompaktModus .childNavList {
  top: 38px;
}

h1, .h1 {
  font-family: "surfacemedium", Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: normal;
  margin-bottom: 10px;
}
h1 span, .h1 span {
  font-size: 34px;
  color: #164469;
}
h1 span.normal,
h1 small, .h1 span.normal,
.h1 small {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 12px;
}

h2,
.h2 {
  font-family: "surfacemedium", Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 15px;
}

.h3 {
  font-family: "surfacemedium", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 5px;
}

.textBlock {
  margin-bottom: 15px;
}

ul.elementeListe,
ul.elementeListe li,
ul.elementeListe li li,
ul.noListStyle,
ul.noListStyle li,
ul.noListStyle li li,
ul.ui-sortable,
ul.ui-sortable li,
ul.ui-sortable li li {
  list-style: none !important;
}

ul.noListStyle {
  margin-left: 0;
}

.noListStyle li {
  padding: 3px 3px;
}

.btn {
  color: #000;
  background-color: #FFF;
  background-position: 5px 50%;
  background-repeat: no-repeat;
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-right: 2px solid #5c5c5c;
  border-bottom: 2px solid #5c5c5c;
  padding: 5px 10px 4px;
  overflow: visible;
  display: inline-block;
  cursor: pointer;
}
.btn:hover {
  text-decoration: none;
}
.btn.btn-naked {
  background-color: transparent;
}
.btn > span {
  vertical-align: 6px;
}
.btn > span.btnText {
  vertical-align: 4px;
}
.btn i {
  height: 20px;
  width: 20px;
  display: inline-block;
}
.btn i + span {
  padding-left: 5px;
}
.btn.btn-inactive {
  opacity: 0.4;
}
.btn.btn-inactive:hover {
  opacity: 1;
}

.btn-no-text span {
  display: none;
}
.btn-no-text i + span {
  padding-left: 0px;
}

.btnNoText {
  cursor: pointer;
  border: 1px solid #9d9d9d;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 0 !important;
  display: inline-block;
}
.btnNoText span {
  display: none !important;
}
.btnNoText i {
  height: 30px !important;
  width: 30px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block !important;
}
.btnNoText i + span {
  padding-left: 0px !important;
}

.btn-naked {
  color: #164469;
  border: none;
  padding: 0;
}
.btn-naked:hover > span {
  text-decoration: underline;
}

.btn.kunden-liste i {
  width: 22px;
}

.icon-add-circle i {
  background-image: url(svg/add-circle.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-administrator i {
  background-image: url(svg/administrator.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-administrator-add i {
  background-image: url(svg/administrator-add.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-aktion i {
  background-image: url(svg/aktion.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-akontiert i {
  background-image: url(svg/akontiert.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-archive-to i {
  background-image: url(svg/archive-to.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-archive-from i {
  background-image: url(svg/archive-from.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-artikel i {
  background-image: url(svg/artikel.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-arrow-up i {
  background-image: url(svg/arrow-up.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-arrow-down i {
  background-image: url(svg/arrow-down.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-arrow-blue-left i {
  background-image: url(svg/arrow-blue-left.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-arrow-green-right i {
  background-image: url(svg/arrow-green-right.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-avatar i {
  background-image: url(svg/avatar.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-basisfelder i {
  background-image: url(svg/basisfelder.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-btn-pause i {
  background-image: url(svg/btn-pause.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-btn-play i {
  background-image: url(svg/btn-play.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-btn-stop i {
  background-image: url(svg/btn-stop.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-btn-time i {
  background-image: url(svg/btn-time.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-codierung i {
  background-image: url(svg/codierung.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-customer-search i {
  background-image: url(svg/customer-search.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-desktop i {
  background-image: url(svg/desktop.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-delete i {
  background-image: url(svg/delete.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-duplicate i {
  background-image: url(svg/duplicate.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-excel i {
  background-image: url(svg/excel.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-export-schema i {
  background-image: url(svg/export-schema.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-ext-codierung i {
  background-image: url(svg/ext-codierung.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-formular i {
  background-image: url(svg/formular.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-home i {
  background-image: url(svg/home.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-inspect i {
  background-image: url(svg/inspect.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-kunde i {
  background-image: url(svg/kunde.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-kunde-add i {
  background-image: url(svg/kunde-add.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-kunde-add-colored i {
  background-image: url(svg/kunde-add-colored.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-kundenliste i {
  background-image: url(svg/kundenliste.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-liste i {
  background-image: url(svg/liste.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-mail-icon i {
  background-image: url(svg/mail-icon.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-login-status i {
  background-image: url(svg/login-status.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-qc-abgleich i {
  background-image: url(svg/qc-abgleich.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-rechte i {
  background-image: url(svg/rechte.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-save i {
  background-image: url(svg/save.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-save-disabled i {
  background-image: url(svg/save-disabled.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-schema i {
  background-image: url(svg/schema.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-settings i {
  background-image: url(svg/settings.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-setting-admin i {
  background-image: url(svg/setting-admin.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-statistic i {
  background-image: url(svg/statistic.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-stornocodierung i {
  background-image: url(svg/stornocodierung.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-superuser i {
  background-image: url(svg/superuser.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-telephone i {
  background-image: url(svg/telephone.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-telephone-disabled i {
  background-image: url(svg/telephone-disabled.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-tools i {
  background-image: url(svg/tools.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-tool-worker i {
  background-image: url(svg/tool-worker.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-untervertreter i {
  background-image: url(svg/untervertreter.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-untervertreter-add i {
  background-image: url(svg/untervertreter-add.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-vertreter i {
  background-image: url(svg/vertreter.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-vertreter-add i {
  background-image: url(svg/vertreter-add.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon-voice i {
  background-image: url(svg/voice.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

/*
.navlink.icon-desktop {
	padding: 2px 0;
	i {
		position: relative;
		top: auto;
		left: auto;
		height: 32px;
		width: 32px;
		border: 2px solid $greyC6;
		@include border-radius( 6px 6px 6px 6px );
		background-color: $blauDunkel;
		background-size: 22px;
		background-position: 50% 50%;
	}
	.navText {
		padding-top: 2px;
	}
}
*/
.icon-home:hover i {
  background-image: url(svg/home-over.svg);
}

.icon-arrow-up:hover i {
  background-image: url(svg/arrow-down.svg);
}

.icon-arrow-down:hover i {
  background-image: url(svg/arrow-up.svg);
}

.icon-arrow-up > span,
.icon-arrow-down > span {
  vertical-align: 0;
}
.icon-arrow-up i,
.icon-arrow-down i {
  height: 10px;
  width: 10px;
}

.icon-mail-icon {
  width: 23px;
  height: 23px;
  display: inline-block;
}
.icon-mail-icon i {
  font-size: 12px !important;
  text-align: center;
  line-height: 20px;
  color: #fff;
  width: 23px;
  height: 23px;
  display: inline-block;
}

/*
.icon-liste:hover i {
	background-image: url(svg/liste-hover.svg);
}
*/
.icon-login-status:hover i {
  background-image: url(svg/login-status-hover.svg);
}

.text-icon-administrator {
  background-color: transparent;
  background-position: 0 50%;
  background-image: url(svg/administrator.svg);
  background-size: contain;
  background-repeat: no-repeat;
  padding-left: 20px;
  /*
  background-position: 50% 50%;
  */
}

.text-icon-superuser {
  background-color: transparent;
  background-position: 0 50%;
  background-image: url(svg/superuser.svg);
  background-size: contain;
  background-repeat: no-repeat;
  padding-left: 20px;
  /*
  background-position: 50% 50%;
  */
}

.text-icon-untervertreter {
  background-color: transparent;
  background-position: 0 50%;
  background-image: url(svg/untervertreter.svg);
  background-size: contain;
  background-repeat: no-repeat;
  padding-left: 20px;
  /*
  background-position: 50% 50%;
  */
}

.text-icon-vertreter {
  background-color: transparent;
  background-position: 0 50%;
  background-image: url(svg/vertreter.svg);
  background-size: contain;
  background-repeat: no-repeat;
  padding-left: 20px;
  /*
  background-position: 50% 50%;
  */
}

input.inputSVG[type="checkbox"],
input.inputSVG[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

input.inputSVG[type="radio"] + span,
input.inputSVG[type="checkbox"] + span {
  background-position: 0 3px;
  background-repeat: no-repeat;
  background-size: 100%;
  display: block;
  height: 22px;
  width: 14px;
}

input.inputSVG[type="checkbox"] + span {
  background-image: url(svg/checkbox.svg);
}

input.inputSVG[type="checkbox"]:checked + span {
  background-image: url(svg/checkbox-checked.svg);
}

input.inputSVG[type="radio"] + span {
  background-image: url(svg/radio.svg);
}

input.inputSVG[type="radio"]:checked + span {
  background-image: url(svg/radio-checked.svg);
}

.svgLabel {
  padding: 0;
  width: auto;
  float: none;
}

.radioLabel {
  text-align: initial !important;
  display: block;
}
.radioLabel span {
  margin-right: 5px;
  vertical-align: -7px;
  display: inline-block !important;
}

.statusIcon {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  display: inline-block;
}
.statusIcon.red {
  background: #DA0010;
}
.statusIcon.green {
  background: #00b030;
}

.mainNavLayer {
  width: 100%;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #F8F7F7;
  background: #efefef;
  *zoom: 1;
}
.mainNavLayer:after {
  content: "";
  display: table;
  clear: both;
}

.mainNavContainer {
  position: relative;
}
.mainNavContainer .col {
  margin-left: 0;
}

/*
	.kompaktModus {
		.navlink {
			height: 30px;
			width: 40px;
		}
		.navText {
			display: none;
		}
		.navBtn {
			border-color: $blauDunkel;
			&.group-1 {
				border-color: $blau;
			}
			&.group-2 {
				border-color: $gruen;
			}
			&.group-3 {
				border-color: $greyC4;
			}
			&.group-4 {
				border-color: $yellow;
			}
			&.group-5 {
				border-color: $rot;
			}
		}
		.navBtn.noText .navlink {
			height: 40px;
			width: 40px;
			padding: 0;
		}
		.navBtn.noText .navlink i {
			height: 40px;
			width: 40px;
		}
		.childNavList {
			top: 42px;
			left: -4px;
			width: 152px;
			padding: 0;
			&.cnlCol-1 {
				width: 55px;
				padding: 4px;
			}
			&.cnlCol-2 {
				width: 105px;
				padding: 4px;
			}
			&.cnlCol-3 {
				width: 154px;
				padding: 4px;
			}
			&.cnlCol-4 {
				width: 204px;
				padding: 4px;
			}
		}
		.nachrichtenLink {
			top: 0px;
			right: auto;
			left: -30px;
		}
	}
*/
.rightAction .mainNav {
  float: right;
  *zoom: 1;
}
.rightAction .mainNav:after {
  content: "";
  display: table;
  clear: both;
}

.mainNavListe {
  list-style: none;
  margin-left: 0;
  *zoom: 1;
  display: inline-block;
}
.mainNavListe:after {
  content: "";
  display: table;
  clear: both;
}

.navBtn {
  position: relative;
  list-style: none;
  border-right: 1px solid #fff;
  border-left: 1px solid #ddd;
  margin-right: 0px;
  float: left;
}
.navBtn:hover {
  text-decoration: none;
}
.navBtn:hover > .childNavList {
  display: block;
}
.navBtn.lastEl {
  margin-right: 0;
}
.navBtn .navlink:hover {
  border: none;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #0060b9;
}
.navBtn.group-1 > .navlink:hover {
  border-bottom-color: #008cff;
}
.navBtn.group-2 > .navlink:hover {
  border-bottom-color: #00b030;
}
.navBtn.group-3 > .navlink:hover {
  border-bottom-color: #666666;
}
.navBtn.group-4 > .navlink:hover {
  border-bottom-color: #ff8600;
}
.navBtn.group-5 > .navlink:hover {
  border-bottom-color: #DA0010;
}
.navBtn.group-6 > .navlink:hover {
  border-bottom-color: #9d9d9d;
}

.mainAction .mainNavListe {
  list-style: none;
  margin-left: 0;
  *zoom: 1;
  display: inline-block;
}
.mainAction .mainNavListe:after {
  content: "";
  display: table;
  clear: both;
}
.mainAction .mainNavListe .navBtn > .navlink i {
  top: 3px;
  left: 28px;
  width: 30px;
  height: 30px;
  background-size: 24px;
  background-position: 50% 3px;
  background-color: #0060b9;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.mainAction .mainNavListe .navBtn.group-1 > .navlink i {
  background-color: #008cff;
}
.mainAction .mainNavListe .navBtn.group-2 > .navlink i {
  background-color: #00b030;
}
.mainAction .mainNavListe .navBtn.group-3 > .navlink i {
  background-color: #666666;
}
.mainAction .mainNavListe .navBtn.group-4 > .navlink i {
  background-color: #ff8600;
}
.mainAction .mainNavListe .navBtn.group-5 > .navlink i {
  background-color: #DA0010;
}
.mainAction .mainNavListe .navBtn.group-6 > .navlink i {
  background-color: #9d9d9d;
}

.navlink {
  position: relative;
  width: 85px;
  height: 72px;
  /*
  $button-background-color-light: #d9d9d9 !default;
  $button-background-color-dark: #bababa !default;
  */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px 0px;
  overflow: hidden;
  display: block;
}
.navlink:hover {
  text-decoration: none;
  background-color: #F8F7F7;
}
.navlink i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 28px;
  background-position: 50% 3px;
  margin: 0 auto;
  display: block;
  z-index: 9;
}

.navBtn.noText .navlink.icon-avatar i {
  height: 72px;
  width: 85px;
  background-position: 50% 50%;
  background-size: 60px auto;
}

.navText {
  position: relative;
  font-size: 11px;
  text-transform: uppercase;
  color: #666666;
  text-align: center;
  line-height: 15px;
  padding-top: 32px;
  display: block;
  z-index: 10;
}

.navBtn.noText .navlink i {
  width: 58px;
  height: 58px;
}
.navBtn.noText .navText {
  display: none;
}

.nachrichtenLink {
  position: absolute;
  top: 3px;
  right: 3px;
  text-decoration: none;
  color: #FFF;
  height: 28px;
  display: inline-block;
  z-index: 9;
}

.msg {
  font-size: 11px;
  line-height: 11px;
  padding: 4px 8px;
  background: #DA364A;
  border: 1px solid #ddd;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
}
.msg:hover {
  background: #B40015;
}

.childNavList {
  position: absolute;
  top: 72px;
  left: -2px;
  background: #F8F7F7;
  -moz-box-shadow: #9d9d9d 0px 3px 20px;
  -webkit-box-shadow: #9d9d9d 0px 3px 20px;
  box-shadow: #9d9d9d 0px 3px 20px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: none;
  display: none;
  z-index: 95;
}
.childNavList .childNavList {
  position: absolute;
  top: -1px;
  left: 1px;
}
.childNavList.cnlCol-1 {
  left: -22px;
  width: 132px;
}
.childNavList.cnlCol-1 > .mainNavListe {
  margin-right: -6px;
}
.childNavList.cnlCol-2 {
  width: 188px;
}
.childNavList.cnlCol-2 > .mainNavListe {
  margin-right: -6px;
}
.childNavList.cnlCol-3 {
  left: -109px;
  width: 304px;
}
.childNavList.cnlCol-3 > .mainNavListe {
  margin-right: -6px;
}
.childNavList.cnlCol-9 {
  left: -370px;
  width: 826px;
}
.childNavList.cnlCol-9 > .mainNavListe {
  margin-right: -6px;
}
.childNavList.cnlCol-4 {
  width: 356px;
}
.childNavList.cnlCol-4 > .mainNavListe {
  margin-right: -6px;
}

.hasChildNavList > .navlink {
  background-image: url("../images/icons/down.gif");
  background-repeat: no-repeat;
  background-position: 4px 4px;
}

.hasChildNavList:hover > .navlink {
  background-image: url("../images/icons/down_green.gif");
}

.childNavListContainer {
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
}

.childNavList .hasChildNavList > .navlink {
  background-image: url("../images/icons/down.gif");
  background-repeat: no-repeat;
  background-position: 4px 4px;
}
.childNavList .hasChildNavList:hover > .navlink {
  background-image: url("../images/icons/down_green.gif");
}
.childNavList .navBtn {
  float: none;
  display: block;
}
.childNavList .navBtn:hover > .childNavListContainer .childNavList {
  display: block;
}
.childNavList .navlink {
  height: auto;
  width: auto;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #FFF;
  padding: 8px 22px 7px 58px;
}
.childNavList .navlink:hover {
  background-color: #FFF;
}
.childNavList .navlink i {
  left: 16px !important;
  top: 4px !important;
}
.childNavList .navText {
  text-align: left;
  line-height: normal;
  padding-top: 5px;
  padding-bottom: 5px;
  white-space: nowrap;
}

.toolTabContainer {
  position: absolute;
  top: 174px;
  left: 0;
  width: 100%;
}

.toolTabListe {
  float: right;
  margin: 0;
  list-style: none;
}

.toolTabElement {
  margin-left: 6px;
  float: left;
  list-style: none;
}
.toolTabElement .infoText {
  font-size: 11px;
  text-align: center;
  line-height: inherit;
  color: #ffffff;
  min-width: 12px;
  padding: 4px 8px;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 5px 5px;
  border-top: none;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  display: inline-block;
}
.toolTabElement .infoText:hover {
  text-decoration: none;
}
.toolTabElement .infoText .infoToolTip {
  top: 28px;
  left: 0;
  text-align: left;
  color: #111111;
  width: 200px;
  -moz-box-shadow: #9d9d9d 0px 14px 20px;
  -webkit-box-shadow: #9d9d9d 0px 14px 20px;
  box-shadow: #9d9d9d 0px 14px 20px;
  z-index: 100;
}
.toolTabElement .wiedervorlage {
  background: #008cff;
}
.toolTabElement .wiedervorlage:hover {
  background: #0060b9;
}
.toolTabElement .nachricht {
  background: #DA364A;
}
.toolTabElement .nachricht:hover {
  background: #B40015;
}

.btnToolTab {
  position: relative;
  color: #9d9d9d;
  border-top: none;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  background: #FFF;
  -moz-border-radius: 0px 0px 4px 4px;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 4px 4px;
  padding: 3px 10px;
  z-index: 2;
}
.btnToolTab:hover {
  cursor: pointer;
}
.btnToolTab.tcVisible {
  color: #111111;
  padding-top: 6px;
  padding-bottom: 4px;
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #0060b9;
  z-index: 3;
}

.toolContainer {
  position: absolute;
  top: 35px;
  right: 0px;
  min-width: 250px;
  max-width: 100%;
  background: transparent;
  -moz-border-radius: 0px 0px 4px 4px;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 4px 4px;
  -moz-box-shadow: #9d9d9d 0px 14px 20px;
  -webkit-box-shadow: #9d9d9d 0px 14px 20px;
  box-shadow: #9d9d9d 0px 14px 20px;
  z-index: 94;
  display: none;
}
.toolContainer p {
  margin-bottom: 10px;
}

.toolContent {
  border: 1px solid #ddd;
  border-top: none;
  background: #FFFFFF;
  -moz-border-radius: 0px 0px 4px 4px;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 4px 4px;
  padding: 0px 0px 15px 0px;
}
.toolContent .tcHeadline {
  font-family: "surfacemedium", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: normal;
  text-transform: uppercase;
  color: #666666;
  background: #efefef;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #F8F7F7;
  padding: 3px 15px 3px 15px;
  margin-bottom: 15px;
}
.toolContent h3,
.toolContent p,
.toolContent pre,
.toolContent .userListe {
  padding: 0px 15px;
}
.toolContent pre {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
}

.loginContainer {
  width: 100%;
  max-width: 500px;
  background-color: #FFFFFF;
  background-image: url("../assets/logo.jpg");
  background-size: 310px auto;
  background-position: 174px 32px;
  background-repeat: no-repeat;
  border: 1px solid #9d9d9d;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  /* padding: 10px 20px; */
  padding: 10px 20px 28px 20px;
  margin: 0 auto;
  margin-top: 50px;
}

.loginHeadlineContainer {
  padding: 20px 0 0 28px;
  margin-bottom: 36px;
}

.loginFormContainer {
  padding: 0 15px;
}

.loginErrorContainer {
  padding: 30px;
}

.desktopContainer {
  border: 1px solid #9d9d9d;
  padding: 30px;
}

.desktopContentContainer {
  margin-bottom: 20px;
}
.desktopContentContainer + .desktopContentContainer {
  border-top: 1px solid #9d9d9d;
  padding-top: 20px;
}
.desktopContentContainer .marker {
  font-size: 14px;
  color: #FFFF00;
  background: #DA364A;
}
.desktopContentContainer h2 {
  font-family: "surfacemedium", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 24px;
  color: #2F2F2F;
  margin-bottom: 5px;
}
.desktopContentContainer h3 {
  font-family: "surfacemedium", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 20px;
  color: #2F2F2F;
  margin-bottom: 0px;
}
.desktopContentContainer p,
.desktopContentContainer p *,
.desktopContentContainer ul li,
.desktopContentContainer ul li * {
  font-size: 14px;
  line-height: 1.4;
}

.desktopContentContainer p {
  margin-bottom: 15px;
}

.desktopContentContainer ul {
  margin-bottom: 15px;
}

.mainAction {
  width: 74.5%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

.rightAction {
  width: 23.5%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
  float: right;
}

.logoContainer {
  width: 23.5%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

.userInfoContainer {
  width: 74.5%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  float: left;
}

@media screen and (min-width: 0px) and (max-width: 880px) {
  .logo {
    height: 23px;
  }

  .page-header p.loginStatusText {
    margin-top: 3px;
  }

  .pageBody {
    padding-top: 90px;
  }

  .childNavList {
    left: -13px;
  }
  .childNavList .navlink {
    padding: 8px 22px 7px 39px;
  }

  .hasChildNavList > .navlink {
    background-position: 0 0;
  }

  .navlink, .childNavList .navlink {
    height: 38px;
    width: 38px;
  }

  .navText {
    display: none;
  }

  .mainAction .mainNavListe .navBtn > .navlink i {
    left: 4px;
  }

  .navBtn.noText .navlink.icon-avatar i {
    background-size: 32px;
    height: 38px;
    width: 39px;
  }

  .nachrichtenLink {
    top: -12px;
    right: 27px;
  }

  .toolTabContainer {
    top: 63px;
  }

  .childNavList {
    top: 38px;
  }
}
@media screen and (min-width: 0px) and (max-width: 450px) {
  .mainAction {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px;
    float: left;
  }

  .rightAction {
    position: absolute;
    top: -40px;
    right: 0;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px;
    float: left;
  }
  .rightAction .navBtn {
    border-left: none;
    border-right: none;
  }

  .userInfoContainer {
    display: none;
  }
}
.infoText {
  position: relative;
}
.infoText .infoBtn {
  text-align: center;
  width: 15px;
  height: 15px;
  color: #ffffff;
  background-color: #008cff;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  display: inline-block;
  cursor: pointer;
}
.infoText:hover .infoToolTip {
  display: block;
}
.infoText .infoToolTip {
  position: absolute;
  top: 0;
  left: 25px;
  width: 380px;
  font-weight: normal;
  background: #ffffff;
  border: 1px solid #9d9d9d;
  padding: 5px;
  display: none;
}

.alertContainer {
  color: #ffffff;
  border: 1px solid #164469;
  background-color: #3165BE;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px;
}

.elementBlock {
  display: block;
}

.elementInlineBlock {
  display: inline-block;
}

.displayNone {
  display: none;
}

.clearAll {
  clear: both;
  font-size: 1px;
  line-height: 1px;
  height: 1px;
  display: inline;
}

.floatLeft {
  float: left;
}

.isVisible {
  visibility: visible;
}

.isNotVisible {
  visibility: hidden;
}

.borderBottom {
  border-bottom: 1px solid #9d9d9d !important;
  padding-bottom: 2px !important;
  margin-bottom: 3px !important;
}

.floatRight {
  float: right;
}

.noMargBot {
  margin-bottom: 0px !important;
}

.noMargLeft {
  margin-left: 0px;
}

.marginLeft25 {
  margin-left: 25px;
}

span.marginLeft25 {
  display: inline-block;
}

.width10 {
  width: 10%;
}

.width14 {
  width: 14%;
}

.width25 {
  width: 25%;
}

.width35 {
  width: 35%;
}

.width40 {
  width: 40%;
}

.width85 {
  width: 85%;
}

.width100 {
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.width20px {
  width: 20px;
}

.width100px {
  width: 100px;
}

.width160px {
  width: 160px;
}

.width250px {
  width: 250px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.width375px {
  width: 375px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.minHeight30px {
  min-height: 30px;
}

.providerList {
  margin-left: 10px;
}

.providerListElement {
  white-space: normal;
  padding-right: 3px;
}

.loading {
  display: none;
}

.row.rowWysiwig {
  width: auto;
}

.row.rowWysiwig .field {
  width: auto;
}