/*****
  globale CSS-Variablen
  Clamp-Generator: 800/1900/14
*****/
:root {
  --axs-color-white:         #ffffff;
  --axs-color-black-2:       #222222;
  --axs-color-black:         #333333;
  --axs-color-yellow:        #fbfb9b;
  --axs-color-orange:        #f2c282;
  --axs-color-green:         #99f999;
  --axs-color-red:           #f05080;
  --axs-color-lightblue:     #6494f4;
  --axs-color-tuerkis:       #0888c8;
  --axs-color-blue:          #2424b4;
  --axs-color-magenta:       #ffcfff;
  --axs-color-gray-6:        #666666;
  --axs-color-gray-a:        #a0a0a0;
  --axs-color-gray-b:        #b5b5b5;
  --axs-color-gray-c:        #c5c5c5;
  --axs-color-gray-d:        #d5d5d5;
  --axs-color-gray-e:        #e5e5e5;
  --axs-color-gray-f2:       #f2f2f2;
  --axs-color-gray-f8:       #f8f8f8;
  --pat-color-yellow:        #ffee00;
  --pat-color-yellow-e:      #eedd00;
  --pat-color-yellow-ff:     #ffffee;
  --pat-color-yellow-fd:     #fdfddd;
  --pat-color-green:         #007733;
  --pat-color-red-a:         #ffa0a0;
  --pat-color-red-d:         #ffdddd;
  --pat-color-dispo-r50:     #bbddff;            /* h-blau */
  --pat-color-dispo-r90:     #ffeeaa;            /* gelb */
  --pat-color-bart-a:        #ffff55;            /* gelb */
  --pat-color-bart-b:        #88ff88;            /* gruen */
  --pat-color-bart-d:        #aaffaa;            /* h-gruen */
  --pat-color-bart-f:        #ccffcc;            /* hh-green */
  --pat-color-bart-l:        #22e2e2;            /* tuerkis */
  --pat-color-bart-n:        #bbddff;            /* h-blau */
  --pat-color-bart-u:        #ffecb4;            /* yellow */
  --pat-color-bart-r:        #ffaaaa;            /* h-rot */
  --pat-color-bart-s:        #e08080;            /* rot */
  --pat-color-badge-green:   #08c808;
  --pat-color-badge-red:     #e80808;
  --pat-color-badge-blue:    #4848f8;
  --pat-color-badge-magenta: #c464c4;
  --pat-color-badge-tuerkis: #52d2d2;
  --pat-color-badge-orange:  #e29222;
  --pat-color-haendler:      #ffee00;            /* gelb */
  --pat-color-hdl-sperr:     #d5d5d5;            /* gray-d */
  --pat-color-kunde:         #bbccff;            /* l-blau */
  --pat-color-lieferant:     #ffaaaa;            /* rot */
  --pat-color-artikel:       #77ee77;            /* gruen */
  --pat-color-mitarbeiter:   #ffaaee;            /* magenta */
  --axs-font-family:         "Helvetica Neue", Helvetica, Arial, sans-serif;
  --axs-font-family-mono:    "Courier New", Courier, monospace;
  --axs-font-size:           14px;
  --axs-width-1vw:           calc(1vw - 3px);
  --axs-width-2vw:           calc(2vw - 6px);
  --axs-width-3vw:           calc(3vw - 9px);
  --axs-width-4vw:           calc(4vw - 12px);
  --axs-width-m32:           clamp(2px, var(--axs-width-2vw), 32px);
  --axs-width-m20:           clamp(2px, var(--axs-width-2vw), 20px);
  --pat-sticky-top:          86px;
}


/*****
  HTML-Elemente
*****/
html {
  /* rem-Size wird in HTML festgelegt */
  font-family: var(--axs-font-family);
  font-size: var(--axs-font-size);
}

body {
  font-family: var(--axs-font-family);
  font-size: var(--axs-font-size);
  line-height: 1.4rem;
  word-wrap: break-word;
  hyphens: auto;
  color: var(--axs-color-black);
  background-color: var(--axs-color-white);
  border: none;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.4rem;
  margin: 12px 0;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
  border-radius: 4px;
}

hr {
  display: inline-block;
  width: 100%;
  margin: 10px 0;
}

ul, ol, dl {
  padding: 0;
  margin: 0;
  list-style: none;
}

dt {
  font-weight: 400;
}

p {
  margin: 0 0 9px 0;
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

label {
  cursor: text;
}

table {
  table-layout: fixed;
  width: 100%;
  border-spacing: 0;
  border-color: var(--axs-color-gray-c);
}

th,
td {
  padding: 5px;
}

select {
  padding: 3px;
  background-color: var(--axs-color-white);
  border: 1px solid var(--axs-color-gray-c);
  border-radius: 4px;
}


/*****
  Input-Elemente
*****/
input {
  --el-border-color: var(--axs-color-gray-c);
  padding: 2px 5px;
  color: var(--axs-body-color);
  outline: none;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
}

input:read-only,
select:disabled {
  background-color: var(--axs-color-gray-f2);
}

input:focus,
select:focus {
  --el-border-color: rgba(82,168,236,0.6);
  box-shadow: 0 0 6px var(--el-border-color);
}

input:focus:read-only,
select:focus:disabled {
  --el-border-color: rgba(160,160,160,0.6);
}

input:focus:invalid:focus {
  --el-border-color: rgba(236,60,60,0.6);
}

input[type="number"] {
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}


/*****
  Textarea
*****/
textarea {
  --el-border-color: var(--axs-color-gray-c);
  line-height: 1.2rem;
  width: clamp(240px, 80%, 800px);
  height: 5.4rem;
  min-height: 3rem;
  resize: both;
  padding: 4px 6px;
  font-family: var(--axs-font-family-mono);
  font-size: 0.9rem;
  outline: none;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
}

textarea:focus {
  --el-border-color: rgba(82,168,236,0.6);
  box-shadow: 0 0 6px var(--el-border-color);
}

textarea:focus:read-only {
  --el-border-color: rgba(160,160,160,0.6);
}

textarea:focus:invalid:focus {
  --el-border-color: rgba(236,60,60,0.6);
}


/*****
  allgemeine Klassen
*****/
.clm-center {
  text-align: center;
}

.clm-right {
  text-align: right;
}

.clm-bold {
  font-weight: bold;
}

.clm-gray-d {
  background-color: var(--axs-color-gray-d);
}

.fa-fw {
  width: 1.5rem;
  font-size: 1.55rem;
  text-align: center;
}

.axs-flex,
.axs-flex-clm,
.axs-flex-wrap {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
}

.axs-flex-clm {
  flex-direction: column;
}

.axs-flex-wrap {
  flex-wrap: wrap;
}

.axs-spacer-s {
  margin-left: 6px;
  margin-right: 6px;
}

.axs-spacer-m {
  margin-left: 12px;
  margin-right: 12px;
}

input.axs-xxs {
  width: 9ch;
}

input.axs-xs {
  width: clamp(12ch, calc(6vw + 9ch), 16ch);
}

input.axs-s {
  width: clamp(16ch, calc(6vw + 13ch), 20ch);
}

input.axs-m,
select.axs-m {
  width: clamp(24ch, calc(9vw + 20ch), 30ch);
}

textarea.axs-l,
select.axs-l,
input.axs-l {
  width: clamp(28ch, calc(32vw + 12ch), 50ch);
}

textarea.axs-xl,
select.axs-xl,
input.axs-xl {
  width: clamp(28ch, calc(68vw - 6ch), 75ch);
}

textarea.axs-xxl,
select.axs-xxl,
input.axs-xxl {
  width: clamp(28ch, calc(105vw - 25ch), 100ch);
}

a.axs-email {
  color: var(--axs-color-blue);
  text-decoration: underline;
}


/*****
  ein Hover-Dropdown-Menu
*****/
.axs-menu {
  color: var(--axs-color-gray-f8);
  cursor: pointer;
}

.axs-menu:hover {
  transition-delay: 200ms;
  background-color: var(--axs-color-gray-c);
  color: var(--axs-color-black-2);
}

.axs-menu:not(:hover) {
  transition-delay: 100ms;
  background-color: inherit;
}

.axs-menu.nosub:hover {
  color: var(--axs-color-white);
}

.axs-menu dd {
  transition-property: visibility;
  position: relative;
  line-height: 3rem;
  margin-left: 0;
  margin-bottom: 0;
}

.axs-menu:hover dd {
  transition-delay: 200ms;
  visibility: visible;
  z-index: 2;
}

.axs-menu:not(:hover) dd {
  transition-delay: 100ms;
  visibility: hidden;
}

.axs-menu dd div {
  position: absolute;
  width: 240px;
  font-size: 1rem;
  overflow-x: hidden;
  background-color: var(--axs-color-gray-e);
  border: 1px solid var(--axs-color-gray-c);
  border-radius: 4px;
}

.axs-menu dd a {
  display: block;
  width: 100%;
  padding-left: 20px;
}

.axs-menu dd a:not([href]),
.axs-menu dd a:not([href]):hover {
  color: var(--axs-color-white);
  cursor: default;
}

.axs-menu dd a[href]:hover {
  color: var(--axs-color-white);
  background-color: var(--axs-color-gray-a);
}


/*****
  die Table der Detail-Rows
*****/
table.axs-detail-row {
  line-height: 1.5rem;
}

form table.axs-detail-row {
  line-height: 2rem;
}

table.axs-detail-row .axs-tooltip {
  float: right;
  display: block;
  margin-top: 7px;
}

table.axs-detail-row td:first-child {
  width: clamp(140px, 17.5vw, 240px);
  padding-right: var(--axs-width-m32);
}

table.axs-detail-row input {
  line-height: 1.4rem;
}

div.axs-detail-row {
  line-height: 2rem;
}

div.axs-detail-row .axs-question {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 9px 0;
}

table.axs-detail-row input[type="radio"],
table.axs-detail-row input[type="checkbox"] {
  width: auto;
  margin-left: 0;
  cursor: pointer;
}

table.axs-detail-row input[type="radio"]:disabled,
table.axs-detail-row input[type="checkbox"]:disabled {
  cursor: default;
}


/*****
  die Tabelle der Listen
*****/
.axs-table-list > thead {
  background-color: var(--axs-color-gray-d);
  position: sticky;
  top: var(--pat-sticky-top);
}

.axs-table-list th,
.axs-table-list td {
  padding-left: clamp(5px, calc(0.8vw - 2px), 14px);
  padding-right: clamp(5px, calc(0.8vw - 2px), 14px);
}

.axs-table-list th:not(:last-child) {
  border-right-color: var(--axs-color-gray-a);
}

/* 70px ... 80px */
.axs-table-list th.axs-th-act-1 {
  width: clamp(70px, calc(1.0vw + 63px), 80px);
}

/* 70px ... 100px */
.axs-table-list th.axs-th-act-2 {
  width: clamp(70px, calc(2.7vw + 48px), 100px);
}

/* 88px ... 115px */
.axs-table-list.axs-touch th.axs-th-act-2 {
  width: clamp(88px, calc(2.5vw + 68px), 115px);
}

/* 90px ... 150px */
.axs-table-list th.axs-th-act-3 {
  width: clamp(90px, calc(5.5vw + 46px), 150px);
}

/* 100px ... 170px */
.axs-table-list.axs-touch th.axs-th-act-3 {
  width: clamp(100px, calc(6.5vw + 46px), 170px);
}

/* 110px ... 190px */
.axs-table-list th.axs-th-act-4 {
  width: clamp(110px, calc(7.3vw + 52px), 190px);
}

/* 140px ... 200px */
.axs-table-list th.axs-th-act-5 {
  width: clamp(140px, calc(5.4vw + 96px), 200px);
}

/* 42px ... 70px */
.axs-table-list th.axs-th-bool {
  width: clamp(3rem, calc(3.1vw + 0.7rem), 5rem);
}

/* 84px ... 126px */
.axs-table-list th.axs-th-date {
  width: clamp(6rem, calc(4.7vw + 2.6rem), 9rem);
}

/* 91px ... 126px fuer Betrag und Waehrung ohne Nk */
.axs-table-list th.axs-th-money {
  width: clamp(6.5rem, calc(3.2vw + 4.7rem), 9rem);
}

/* 105px ... 154px fuer Betrag und Waehrung mit Nk */
.axs-table-list th.axs-th-money2 {
  width: clamp(7.5rem, calc(4.4vw + 5.0rem), 11rem);
}

/* 70px ... 98px */
.axs-table-list th.axs-th-id {
  width: clamp(5rem, calc(2.5vw + 3.5rem), 7rem);
}

/* 56px ... 84px */
.axs-table-list th.axs-th-xxs {
  width: clamp(4rem, calc(5.0vw + 0.5rem), 6rem);
}

/* 84px ... 147px */
.axs-table-list th.axs-th-xs {
  width: clamp(6rem, calc(7.0vw + 0.8rem), 10.5rem);
}

/* 112px ... 196px */
.axs-table-list th.axs-th-s {
  width: clamp(8rem, calc(9.4vw + 1.1rem), 14rem);
}

/* 140px ... 245px */
.axs-table-list th.axs-th-m {
  width: clamp(10rem, calc(11.7vw + 1.4rem), 17.5rem);
}

/* 168px ... 294px */
.axs-table-list th.axs-th-ml {
  width: clamp(12rem, calc(14.1vw + 1.7rem), 21rem);
}

/* 196px ... 343px */
.axs-table-list.axs-touch th.axs-th-ml,
.axs-table-list th.axs-th-l {
  width: clamp(14rem, calc(16.4vw + 1.9rem), 24.5rem);
}

/* 224px ... 392px */
.axs-table-list.axs-touch th.axs-th-l,
.axs-table-list th.axs-th-xl {
  width: clamp(16rem, calc(18.8vw + 2.2rem), 28rem);
}

/* 252px ... 441px */
.axs-table-list.axs-touch th.axs-th-xl,
.axs-table-list th.axs-th-xxl {
  width: clamp(18rem, calc(21.1vw + 2.5rem), 31.5rem);
}

/* 280px ... 490px */
.axs-table-list.axs-touch th.axs-th-xxl,
.axs-table-list th.axs-th-xxxl {
  width: clamp(20rem, calc(23.5vw + 2.8rem), 35rem);
}

/* 308px ... 539px */
.axs-table-list.axs-touch th.axs-th-xxxl {
  width: clamp(22rem, calc(25.8vw + 3.1rem), 38.5rem);
}

.axs-table-list tbody tr:nth-of-type(2n+1) {
  background-color: var(--axs-color-white);
}

.axs-table-list tbody tr:nth-of-type(2n) {
  background-color: var(--axs-color-gray-f8);
}

.axs-table-list tbody tr.tr-accord {
  display: none;
}

.axs-table-list tbody tr.tr-accord.active {
  display: table-row;
  background-color: var(--pat-color-yellow-ff);
}

.axs-table-list td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.axs-table-list td.td-linebreak {
  white-space: normal;
}

.axs-table-list td.axs-td-action {
  overflow: visible;
}

.axs-td-action .fas {
  color: var(--axs-color-gray-b);
}

.axs-td-action.axs-touch > a .fas {
  font-size: 20px;
  padding-top: 5px;
}

.axs-td-action a[href] .fas,
.axs-td-action a[onclick] .fas,
.axs-td-action dl .fas {
  color: var(--axs-color-lightblue);
}

.axs-td-action a[href] .fas:hover,
.axs-td-action a[onclick] .fas:hover,
.axs-td-action dl .fas:hover {
  color: var(--axs-color-blue);
}

.axs-td-action dl {
  display: inline-flex;
  margin-left: clamp(6px, calc(0.9vw - 3px), 14px);
  padding-left: 8px;
}

.axs-td-action > a {
  margin-left: clamp(12px, calc(1.3vw - 2px), 24px);
}

.axs-td-action > a:first-child {
  margin-left: clamp(6px, calc(0.9vw - 3px), 14px);
}

/* Burger-Menu in Actions */
.axs-td-action .axs-menu dd {
  line-height: 2.2rem;
  margin-left: 5px;
}

.axs-td-action dl a .fas {
  margin-right: 20px;
}


/*****
  Button-Elemente
*****/
.axs-btn {
  --el-background-color: inherit;
  display: inline-block;
  width: 100px;
  height: 2rem;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  text-align: center;
  color: var(--axs-color-black);
  background-color: var(--el-background-color);
  border: 1px solid var(--axs-color-gray-a);
  border-radius: 4px;
}

button.axs-btn * {
  /* die Links im Button */
  cursor: inherit;
}

a.axs-btn {
  --el-background-color: var(--axs-color-gray-e);
  padding-top: 3px;
}

button.axs-btn:disabled,
a.axs-btn.disabled,
a.axs-btn:not([href]):not([onclick]) {
  /* deaktivierter Button */
  --el-background-color: var(--axs-color-gray-f2);
  opacity: 0.6;
}

button.axs-btn:enabled:hover,
a.axs-btn[href]:not(.disabled):hover,
a.axs-btn[onclick]:not(.disabled):hover {
  box-shadow: 0 0 6px var(--axs-color-gray-6);
}

button.axs-btn:enabled:focus,
a.axs-btn[href]:not(.disabled):focus,
a.axs-btn[onclick]:not(.disabled):focus {
  /* aktivierter Button */
  box-shadow: 0 0 1px var(--axs-color-blue) inset;
}

button.axs-btn:enabled:focus:hover,
a.axs-btn[href]:not(.disabled):focus:hover,
a.axs-btn[onclick]:not(.disabled):focus:hover {
  /* aktivierter Button */
  box-shadow: 0 0 1px var(--axs-color-blue) inset,
    0 0 6px var(--axs-color-gray-6);
}

button.axs-btn[type="submit"]:enabled,
a.axs-btn[href].okay {
  --el-background-color: var(--axs-color-green);
}

button.axs-btn[type="button"]:enabled,
button.axs-btn.cancel:enabled,
a.axs-btn[href].cancel,
a.axs-btn[onclick].cancel {
  --el-background-color: var(--axs-color-gray-d);
}

button.axs-btn[type="other"]:enabled,
button.axs-btn.other:enabled,
a.axs-btn[href].other,
a.axs-btn[onclick].other {
  --el-background-color: var(--axs-color-orange);
}

a.axs-btn[href].lightblue,
a.axs-btn[onclick].lightblue {
  --el-background-color: var(--axs-color-lightblue);
}

a.axs-btn[href].yellow,
a.axs-btn[onclick].yellow {
  --el-background-color: var(--axs-color-yellow);
}


/*****
  die Submit-Row
*****/
.axs-submit-row {
  margin: 20px 0;
}

/* die Submit-Row unter den Listen */
.table-bordered + .axs-submit-row {
  margin: 20px 0 10px 0;
}

.dashboard.axs-submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 20px;
  max-width: 830px;
}

.axs-submit-row button,
.axs-submit-row .axs-btn {
  margin-left: clamp(8px, var(--axs-width-4vw), 40px);
}

.axs-submit-row.dashboard .axs-btn {
  width: 150px;
  height: 4.0rem;
  font-size: 18px;
  line-height: 1.8rem;
}


/*****
  das Pagination-Element
*****/
.axs-pagination {
  float: left;
  font-size: 1.15rem;
  background-color: var(--axs-color-gray-f2);
  border: 1px solid var(--axs-color-gray-c);
  border-radius: 4px;
}

.axs-pagination li {
  float: left;
  border-right: 1px solid var(--axs-color-gray-b);
}

.axs-pagination li:last-child {
  border-right: none;
}

.axs-pagination li a {
  display: block;
  padding: 4px 12px 3px 12px;
}

.axs-pagination li a:not([href]),
.axs-pagination li a:not([href]):hover {
  cursor: default;
}

.axs-pagination li.active {
  color: var(--axs-color-lightblue);
}

.axs-pagination li.inactive {
  color: var(--axs-color-gray-a);
}

.axs-pagination li.active:hover {
  box-shadow: 0 0 3px var(--axs-color-gray-6), 0 0 3px var(--axs-color-gray-6) inset;
}


/*****
  das Akkordion
*****/
dl.axs-accordion dt {
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: bold;
  margin-top: 2px;
  padding: 8px 0 8px 10px;
  cursor: pointer;
  display: block;
  border-radius: 4px;
}

dl.axs-accordion dt:hover {
  background: var(--axs-color-gray-c);
}

dl.axs-accordion dt.active::before {
  content: '-';
  margin-left: 6px;
  margin-right: 18px;
}

dl.axs-accordion dt::before {
  content: '+';
  margin-left: 5px;
  margin-right: 15px;
}

dl.axs-accordion dd {
  text-align: justify;
  line-height: 24px;
  margin: 0 0 12px 24px;
  overflow: hidden;
}

dl.axs-accordion dt.static ~ dd {
  display: block;
}

dl.axs-accordion dd a {
  display: block;
  color: var(--axs-color-tuerkis);
}

dl.axs-accordion dd a:hover {
  color: var(--axs-color-black);
}

dl.axs-accordion .faicon {
  /* Icon im Akkordion */
  margin-right: 15px;
}

dl.axs-accordion dt.show > span > i::before {
  /* Icon für aufgeklapptes Akkordion */
  content: "\e007";
}


/*****
  die Messages-Zeile
*****/
.axs-msg {
  margin-bottom: 6px;
  padding: 6px 10px 6px 10px;
  color: var(--axs-color-black);
  border: 1px solid var(--axs-color-gray-c);
  border-radius: 4px;
}

.axs-msg.info {
  /* gelb */
  background-color: var(--axs-color-yellow);
}

.axs-msg.success {
  /* grün */
  background-color: var(--axs-color-green);
}

.axs-msg.warning {
  /* violett */
  background-color: var(--axs-color-magenta);
}

.axs-msg.error {
  /* rot */
  background-color: var(--axs-color-red);
}

.axs-msg i {
  /* das Papierkorb-Symbol */
  display: block;
  float: right;
  margin-top: -1px;
  padding: 3px 4px 3px 4px;
  color: var(--axs-color-gray-6);
  background-color: var(--axs-color-gray-f2);
  border: 1px solid var(--axs-color-gray-a);
  border-radius: 4px;
  cursor: pointer;
}

.axs-msg i:hover {
  box-shadow: 0 0 6px var(--axs-color-gray-6);
}


/*****
  das Symbol und Fenster für die Tooltips
*****/
i.axs-tooltip {
  /* das Containerelement */
  --el-background-color: var(--pat-color-yellow-fd);
  display: inline-block;
  color: var(--axs-color-lightblue);
}

td.axs-tooltip {
  /* das Containerelement */
  --el-background-color: var(--pat-color-yellow-fd);
  overflow: visible;
}

i.axs-tooltip:hover,
td.axs-tooltip:hover {
  color: var(--axs-color-blue);
}

i.axs-tooltip span[data-tip],
td.axs-tooltip span[data-tip] {
  /* das Hilfselement zur Positionierung */
  position: relative;
  display: none;
}

i.axs-tooltip span[data-tip]::before,
i.axs-tooltip span[data-tip]::after,
td.axs-tooltip span[data-tip]::before,
td.axs-tooltip span[data-tip]::after {
  /* before = Pfeil, after = Inhalt */
  position: absolute;
  transform: translate(-50%, 0%);
  left: 50%;
}

i.axs-tooltip span[data-tip]::before,
td.axs-tooltip span[data-tip]::before {
  /* der Pfeil */
  bottom: -3px;
  width: 0;
  height: 0;
  content: "";
  border: 20px solid;
  border-color: var(--el-background-color) transparent transparent transparent;
}

i.axs-tooltip span[data-tip]::after,
td.axs-tooltip span[data-tip]::after {
  /* der Inhalt */
  bottom: 30px;
  width: max-content;
  max-width: 300px;
  padding: 5px 15px;
  line-height: initial;
  content: attr(data-tip);
  font-family: var(--axs-font-family);
  font-size: 1rem;
  font-weight: 400;
  color: var(--axs-color-black);
  background-color: var(--el-background-color);
  border-radius: 10px;
}

i.axs-tooltip:hover span[data-tip],
td.axs-tooltip:hover span[data-tip] {
  /* Anzeige des Tips */
  display: block;
  z-index: 2;
}


/*****
  Badges
*****/
.axs-badges-row {
  --el-background-color: var(--axs-color-gray-b);
  flex: 0 1 auto;
  width: 100%;
  margin-top: -2px;
  margin-bottom: 4px;
  line-height: 1.8rem;
  font-size: 0.9rem;
}

.axs-badge {
  margin-right: 12px;
  padding: 0 6px 0 6px;
  white-space: nowrap;
  color: white;
  background-color: var(--el-background-color);
  border: 2px solid var(--el-background-color);
  border-radius: 10px;
  cursor: default;
}

/* Badge in der Tabellenzeile */
span.axs-badge {
  margin-right: 6px;
  padding: 0 6px 0 5px;
  color: var(--axs-color-black);
  border-width: 1px;
}

span.axs-badge.inline-badge {
  margin-left: 4px;
  margin-right: 2px;
}

.axs-badge.green {
  --el-background-color: var(--pat-color-badge-green);
}

.axs-badge.red {
  --el-background-color: var(--pat-color-badge-red);
}

.axs-badge.blue {
  --el-background-color: var(--pat-color-badge-blue);
}

.axs-badge.magenta {
  --el-background-color: var(--pat-color-badge-magenta);
}

.axs-badge.tuerkis {
  --el-background-color: var(--pat-color-badge-tuerkis);
}

.axs-badge.orange {
  --el-background-color: var(--pat-color-badge-orange);
}

span.axs-badge[onclick],
a.axs-badge[onclick],
a.axs-badge[href] {
  cursor: pointer;
}

span.axs-badge[onclick]:hover,
a.axs-badge[onclick]:hover,
a.axs-badge[href]:hover {
  box-shadow: 0 0 8px var(--axs-color-gray-6);
}


/*****
  der fixe Header on top
*****/
.axs-topfix {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  /* height: clac(var(--pat-sticky-top) - 2px); */
  background-color: inherit;
}

.axs-top-inner {
  /* der innere Teil mit dem Inhalt */
  margin: 6px 10px 0 10px;
  background-color: inherit;
}

.axs-top-img {
  /* das Image oben rechts */
  flex: 0 0 auto;
  padding-left: 6px;
  background-color: inherit;
}


/*****
  die Überschrift mit Menu-Zeile
*****/
.axs-top-us {
  flex: 1 1 auto;
  margin-bottom: 6px;
}

.axs-top-us h1 {
  /* die Hauptüberschrift */
  width: 100%;
  margin: 0;
  padding-top: 9px;
  padding-bottom: 7px;
  text-align: center;
  font-size: 1.6rem;
  background-color: var(--pat-color-yellow);
  border-radius: 4px 4px 0 0;
}

.axs-top-h2 {
  justify-content: space-between;
  padding: 2px;
  line-height: 30px;
  background-color: var(--pat-color-green);
  color: var(--axs-color-gray-f8);
  border-radius: 0 0 4px 4px;
}

.axs-top-h2 ul {
  flex: 1 1 auto;
  margin-top: 3px;
  margin-right: var(--axs-width-m32);
  font-size: 20px;
  /* padding: 4px 0 4px 16px; */
  background-color: var(--pat-color-green);
}

.axs-top-h2 ul a {
  margin-left: 40px;
  padding-left: 10px;
  padding-right: 10px;
}

.axs-top-h2 a.axs-menu.active,
.axs-top-h2 a.axs-menu.active:hover {
  color: var(--axs-color-green);
  background-color: var(--axs-color-gray-c);
}

.axs-konto-menu {
  /* das Kontomenü rechts */
  margin-left: var(--axs-width-m32);
  margin-right: 1px;
  padding: 2px 6px 2px 6px;
}

.axs-konto-menu dt i {
  margin-left: 6px;
  margin-right: 6px;
}

.axs-top-h2 .axs-konto-menu dd {
  line-height: 2.2rem;
}

.axs-top-h2 .axs-konto-menu dd div {
  /* das Fenster für den Menüinhalt */
  top: 2px;
  left: -15px;
  width: 156px;
}


/*****
  der Hauptteil zwischen Header und Footer
*****/
.axs-main {
  margin: var(--pat-sticky-top) 10px 0 10px;
  min-height: 300px;
}


/*****
  die Sidebar links im Hauptteil
*****/
nav.axs-sidebar {
  flex: 0 0 190px;
  position: sticky;
  z-index: 1;
  top: var(--pat-sticky-top);
  height: fit-content;
  /* overflow-x: visible; */
  margin-right: var(--axs-width-m20);
  /* margin-bottom: 10px; */
  padding: 8px 0;
  background-color: var(--pat-color-yellow);
  border: 1px solid var(--pat-color-yellow-e);
  border-radius: 4px;
}

nav.axs-sidebar.axs-touch {
  display: none;
}

nav.axs-sidebar.active {
  display: block;
}

.axs-sb-menu {
  color: var(--axs-color-black-2);
}

.axs-sb-menu dt {
  padding: 12px 0 12px 20px;
}

.axs-sb-menu dt i {
  margin-right: 16px;
}

.axs-sb-menu dt i.fa-caret-right {
  /* der Pfeil nach rechts am rechten Rand */
  float: right;
  margin-top: 4px;
}

.axs-sb-menu dd div {
  /* das Fenster für den Menüinhalt */
  left: 180px;
  top: -44px;
  width: 200px;
}


/*****
  der Hauptteil neben der Sidebar
*****/
.axs-content {
  flex: 1 1 auto;
}

a.axs-btn.login {
  /* der Login-Button */
  width: 60px;
  height: 1.5rem;
  margin-top: -3px;
  margin-left: 4px;
  padding: 0;
  background-color: var(--axs-color-green);
  border-radius: 8px;
}


/*****
  die Überschrift im Hauptteil neben der Sidebar
*****/
.axs-cnt-us {
  /* der Container der Content-Überschrift */
  margin-bottom: 8px;
  border-bottom: 1px solid var(--axs-color-gray-d);
}

.axs-cnt-us.no-border {
  /* der Container der Content-Überschrift */
  margin-bottom: 6px;
  border-bottom: None;
}

.axs-cnt-us h3 {
  /* die Überschriftenzeile */
  flex: 0 0 auto;
  line-height: 2rem;
  margin: 9px 0;
  font-size: 1.6rem;
}

.axs-cnt-us-right {
  /* die Zusatzmenüs in der Überschrift */
  flex: 0 1 auto;
  margin: 0 auto 4px auto;
}

.axs-cnt-us-right .axs-pagination {
  /* die Pagination im Konfigmenü */
  margin: 7px 4px 0 var(--axs-width-m32);
}

.axs-cnt-menu {
  /* Die Zusatzmenüs im Konfigmenü */
  float: left;
  margin: 7px 0 0 var(--axs-width-m32);
  padding: 3px 4px;
  font-size: 1.4rem;
  color: var(--axs-color-lightblue);
  border: 1px solid var(--axs-color-gray-c);
  border-radius: 4px;
  cursor: pointer;
}

.axs-cnt-menu:hover {
  background-color: inherit;
  box-shadow: 0 0 6px var(--axs-color-gray-6);
}

div.axs-cnt-menu.active,
div.axs-cnt-menu.active:hover {
  color: var(--axs-color-gray-6);
  background-color: var(--axs-color-green);
}

.axs-cnt-us-right .axs-cnt-menu dd {
  line-height: 2.2rem;
}

.axs-cnt-us-right .axs-cnt-menu dd div {
  top: 4px;
  right: -80px;
}

.axs-cnt-menu a[href] .fas,
.axs-cnt-menu a[onclick] .fas,
.axs-cnt-menu dl .fas {
  color: var(--axs-color-lightblue);
}

.axs-cnt-menu a[href] .fas:hover,
.axs-cnt-menu a[onclick] .fas:hover,
.axs-cnt-menu dl .fas:hover {
  color: var(--axs-color-blue);
}

.axs-cnt-menu dd a .fas {
  margin-right: 20px;
}


/*****
  der Bereich für die Konfiguration
*****/
.axs-cfg {
  display: none;
  margin: 4px 0;
  padding: 6px 10px 0 10px;
  background-color: var(--pat-color-yellow-fd);
}

.axs-cfg.active {
  display: flex;
  width: 100%;
}

.cfg-btn-col .axs-btn {
  /* die Buttons des Konfigbereichs */
  margin: 10px 14px 18px 10px;
}

.cfg-fld-col {
  /* die Filter des Konfigbereichs */
  columns: 400px 3;
  column-gap: 40px;
  margin-top: 6px;
}

.cfg-fld-col .cnt-filter {
  /* der Container pro Filterfeld */
  height: 34px;
  margin: 0 0 4px 40px;
}

.cnt-filter label {
  width: 150px;
  padding: 3px 5px;
}

.cnt-filter input {
  width: 200px;
  padding-right: 30px;
}

.input-filter-span {
  /* der Container input und Clear-Button */
  position: relative;
  display: inline-flex;
  align-items: center;
}

.input-filter-span i {
  /* der Clearbutton im input */
  position: absolute;
  right: 6px;
  color: var(--axs-color-gray-b);
  cursor: pointer;
}

.cfg-sort-col {
  display: flex;
  margin: 3px 0 10px 26px;
}

.cfg-sort-col ul {
  width: 170px;
  margin: 5px 3px;
  background-color: var(--axs-color-white);
  border: 1px solid var(--axs-color-black);
  border-radius: 4px;
}

.cfg-sort-col li:first-child {
  padding: 2px 0;
  margin: 2px;
  text-align: center;
}

.cfg-sort-col li[draggable=true] {
  padding: 2px 8px;
  margin: 2px;
  background-color: var(--axs-color-gray-e);
  border: 1px solid var(--axs-color-gray-b);
  border-radius: 6px;
  cursor: move;
}

.cfg-cfg-col ul {
  margin: 8px 0 0 40px;
  padding: 0 10px;
  background-color: var(--axs-color-white);
  border: 1px solid var(--axs-color-black);
  border-radius: 6px;
}

.cfg-cfg-col input[type="radio"] {
  /* die Radiobuttons */
  width: auto;
  margin: 6px 8px 6px 0;
  cursor: pointer;
}

.cfg-cfg-col input[type="radio"] + label {
  cursor: pointer;
}


/*****
  der Footer
*****/
.axs-footer {
  justify-content: space-between;
  margin: 10px;
  padding: 2px;
  /* background-color: var(--axs-color-gray-e); */
  background-color: var(--pat-color-green);
  color: var(--axs-color-gray-f8);
  border-radius: 4px;
}

.axs-footer-left {
  flex: 1 1 auto;
  margin-right: var(--axs-width-m32);
  padding: 4px 0 4px 10px;
}

.axs-footer-right {
  justify-content: flex-end;
  margin-left: var(--axs-width-m32);
  padding: 4px 10px 4px 0;
}

.axs-footer li {
  margin-right: var(--axs-width-m20);
}

.axs-footer li:last-child {
  margin-right: 0;
}

.axs-footer li::after {
  content: '|';
  margin-left: var(--axs-width-m20);
}

.axs-footer li:last-child::after {
  content: '';
  margin-left: 0;
}

.axs-footer a:hover,
.axs-footer a:focus {
  /* color: var(--axs-color-white); */
  color: var(--pat-color-yellow);
}

/* der Top-Button der Close-Accordion-Button in der unteren rechten Ecke */
button.axs-top-button.axs-btn[type="button"],
button.axs-clsacc-button.axs-btn[type="button"] {
  --el-background-color: #ee77ee;
  display: none;
  position: fixed;
  bottom: 60px;
  right: 11px;
  width: 40px;
  height: 38px;
  z-index: 2;
  opacity: 0.75;
  font-size: 1.7rem;
  border-radius: 10px;
}

button.axs-clsacc-button.axs-btn[type="button"] {
  --el-background-color: #77eeee;
  bottom: 108px;
}

button.axs-top-button.axs-btn[type="button"]:enabled,
button.axs-clsacc-button.axs-btn[type="button"]:enabled {
  display: inline-block;
}



/*****
  Form-Row (alt)
*****/
.form-row input[type="radio"],
.form-row input[type="checkbox"] {
  width: auto;
  height: 16px;
  margin-top: 9px;
  margin-bottom: 6px;
  border: 0;
  cursor: pointer;
}

.form-row select {
  width: 350px;
  height: 24px;
  margin-top: 6px;
  padding: 0 4px;
}

.form-row .datetimeshortcuts .date-icon {
  top: -2px;
}

.form-row .datetimeshortcuts a {
  margin-left: 4px;
  margin-right: 4px;
}

.form-row .datetimeshortcuts a:link,
.form-row .datetimeshortcuts a:visited,
.form-row .datetimeshortcuts a:focus {
  text-decoration: none;
}


/*****
  Login-Dialog
*****/
.axs-login {
  width: 360px;
  margin: 50px auto;
  border: 1px solid var(--axs-color-gray-e);
  border-radius: 4px;
}

.axs-login .login-header {
  padding: 15px 0;
  background-color: var(--pat-color-green);
}

.axs-login h1 {
  font-size: 1.6rem;
  text-align: center;
  color: var(--axs-color-white);
}

.axs-login label {
  width: 32%
}

.axs-login input {
  height: 2rem;
  margin-left: 0;
}

.axs-login .axs-detail-row {
  margin: 30px 20px 0 30px;
  padding: 0;
}

.axs-login .axs-submit-row {
  margin-top: 30px;
}

.axs-login .axs-btn:first-child {
  float: left;
  margin-left: 44px;
  margin-right: 0;
}

.axs-login .axs-btn:last-child {
  float: right;
  margin-left: 0;
  margin-right: 44px;
}


/*****
  Media-Anpassungen
*****/
@media (max-width: 800px) {
  /* Fenster kleiner als 800 Pixel breit */
  /* Sidebar on top */
  .axs-main { flex-wrap: wrap; }
  .axs-sidebar { flex-grow: 1; margin-right: 0; }
  .axs-sb-menu dt i.fa-caret-right { float: none; margin-left: 10px; }
}