@charset "UTF-8";
@import url('/global/font/fonts.css');

body
{
  background-color: #ECECEC;
  font-family: 'IBM Plex Sans', Arial, Helvetica, sans-serif;
  font-size: 12px; 
  margin: 0px;
  padding: 0px;
  text-align: left;
}

/* Bei neuem Layout brauchen wir etwas Luft unten */
body:has(div.contentBlockHeaderBarTitle, div.titlebox) {
  margin-bottom: 24px;
}

body:has(template[data-isbeta="true"]) {
  background-image: url('/global/images/testversion.svg');
  background-size: 30%;
  background-repeat: repeat;
  background-attachment: fixed;
}

.CSSTopBar
{
  height:30px;
}
.CSSTopBarLeft
{
  background-image: url(../../global/images/bar-left.gif);
  float: left;
  height:30px;
  width: 13px;
}
.CSSTopBarMain
{
  background-image: url(../../global/images/bar-center.gif);
  float: left;
  height:30px;
}
.CSSTopBarRight
{
  background-image: url(../../global/images/bar-right.gif);
  float: right;
  height:30px;
  width: 13px;
}

.CSSTopBarText
{
  float: left;
  color: #404040;
  font-size: 11px;
  font-weight: 700;
  margin-top: 5px;  
}
.EditBlock
{
  margin-left: 30px;
  margin-top: 20px;
  width: 515px;
  float:left;
}

.EditBlockHeader
{
  height: 29px;
  overflow: hidden;
  width: 515px;
}

.EditBlockHeaderLeft
{
  background-image: url(../../global/images/bar2-left.gif);
  float: left;
  height: 29px;
  width: 15px;
}
.EditBlockHeaderMain
{
  background-image: url(../../global/images/bar2-center.gif);
  color: #ffffff;
  float: left;
  font-size: 13px; 
  font-weight: 700; 
  height: 29px;
  padding-top: 5px;
  width: 499px;
}
.EditBlockHeaderRight
{
  background-image: url(../../global/images/bar2-right.gif);
  float: right;
  height: 29px;
  margin-top: -5px;
  width: 1px;
}

.EditBlockToggleButtonOpenedActive
{
  background-image: url(../../global/images/bar2-popclose1.gif);
  cursor: pointer;
  float: right;
  height: 29px;
  margin-top: -5px;
  width: 30px;
  z-index: 5;
}
.EditBlockToggleButtonOpened
{
  background-image: url(../../global/images/bar2-popclose0.gif);
  float: right;
  height: 29px;
  margin-top: -5px;
  width: 30px;
  z-index: 5;
}
.EditBlockToggleButtonClosedActive
{
  background-image: url(../../global/images/bar2-popopen1.gif);
  cursor: pointer;
  float: right;
  height: 29px;
  margin-top: -5px;
  width: 30px;
  z-index: 5;
}
.EditBlockToggleButtonClosed
{
  background-image: url(../../global/images/bar2-popopen0.gif);
  float: right;
  height: 29px;
  margin-top: -5px;
  width: 30px;
  z-index: 5;
}


.EditBlockContent
{
	float: right;
	left: 15px;
	display: block;
	width: 500px;

}
.EditBlockContentHidden
{
	display: none;
}

.EditBlockFooter
{
  float: right;
  height: 11px;
  left: 15px;
  overflow: hidden;
  width: 500px;
}
.EditBlockFooterLeft
{
  background-image: url(../../global/images/block-botton-left.gif);
  float: left;
  height: 11px;
  width: 11px;
}
.EditBlockFooterMain
{
  background-color: #dcdcdc;
  background-image: url(../../global/images/block-botton-center.gif);
  float: left;
  height: 11px;
  width: 478px;
}
.EditBlockFooterRight
{
  background-image: url(../../global/images/block-botton-right.gif);
  float: left;
  height: 11px;
  width: 11px;
}

.EditBlockHelpButtonShow
{
  background-image: url(../../global/images/bar2-help0.gif);
  float: right;
  height: 29px;
  margin-top: -5px;
  width: 30px;
  z-index: 5;
}
.EditBlockHelpButtonShowActive
{
  background-image: url(../../global/images/bar2-help1.gif);
  float: right;
  height: 29px;
  margin-top: -5px;
  width: 30px;
  z-index: 5;
}

.CSSEditBlockLine
{
  color: #404040;
  font-family: 'IBM Plex Sans', Arial, Helvetica, sans-serif;
  font-size: 12px; 
  font-weight: 700;
  height: 25px;
  line-height: 16px;
  margin: 0px;

  position: relative;
  text-align: left;
}

.CSSEditBlockLine TD
{
	border: 1px solid #ececec;
}
.CSSEditBlockLineFieldFull
{
  background-color: #dcdcdc;
  float: left;
  height: 25px;
  margin: 1px;
  width: 496px;
  position: relative;
}
.CSSEditBlockLineField1
{
  background-color: #dcdcdc;
  float: left;
  height: 25px;
  margin: 1px;
  width: 146px;
  position: relative;
}

.CSSEditBlockLineValue1
{
  background-color: #dcdcdc;
  margin: 1px;
  float: left;
  height: 25px;
  width: 348px;
  position: relative;
}

.EditBlockLineCell
{
	float:left;
}
.ajLayer
{
  border:1px solid #000; 
  background-color: #ffffff; 
  position: absolute; 
  padding: 2px;
  z-index:100;
  display:none;
}


.autocomplete-loading
{
	background-image:url(../../global/images/ajaxaction_transp.gif);
	background-position: center right;
	background-repeat:no-repeat;
}
ul.autocomplete 
{
    position: absolute;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid ButtonShadow;
    margin: 0px;
    padding: 0px;
    list-style: none;
    color: #000;
	display:none;
	z-index:1000;
}
ul.autocomplete li 
{
  display: block; 
  padding: 0.3em; 
  overflow: hidden;
  width: 100%;
  cursor:pointer;
}

ul.autocomplete li.selected 
{
  background-color: Highlight ; 
  color: #fff;
}

.ItemPreconfigured {
  color: #A0A0A0;
  font-weight: bold;
}


div.contentBlockContainer {
  width: 550px;
  clear: both;
  padding-top: 8px;
}

div.contentBlockContainer.extrawide {
  width: 860px;
}

div.contentBlockContentContainer {
  display: block;
}

div.contentBlockContent {
  display: block;
  width: 500px;
  height: fit-content;
  background-color: #dcdcdc;
  border-radius: 0px 0px 10px 10px;
  min-height: 30px;
  margin-left: 45px;
  padding-bottom: 9px;
  padding-left: 3px;
  padding-right: 2px;
  margin-top: 30px;
  padding-top: 25px;
  /* position: absolute; */
  box-shadow: #9a9a9a 1px 4px 5px;
}

div.contentBlockContent.infobox {
  background: linear-gradient(191deg, #c9dcd5 0%, #dcdcdc 60%);
}

.extrawide  div.contentBlockContent {
  width: 810px;
}

div.is-form-col {
  display: block;
  /* border-bottom: 1px groove #cccccc; */
  line-height: 130%;
  min-height: 23px;
  padding-bottom: 6px;
  font-size: 13px;
}

.is-form-col.narrow {
  width: 130px !important;
}

.extrawide .is-form-col.narrow {
  width: 150px !important;
}

.is-form-col.not-so-narrow {
  width: 250px !important;
}

.is-form-col.align-right {
  text-align: right;
}

.is-form-col.wide {
  width: 360px !important;
}

.is-form-col.wider {
  width: 480px !important;
}

.is-form-col.wide > input {
  min-width: 95% !important;
  width: 95% !important;
}

.is-form-col.wide > .selectautowidth {
  min-width: 95% !important;
  width: 95% !important;
}

.extrawide .is-form-col.wide > .selectautowidth {
  min-width: 310px !important;
  width: 310px !important;
}

/** Linke Spalte ist Beschreibung, kein Eingabefeld (Standard) **/
.is-form-col.left {
  width: 214px;
  float: left;
  clear: both;
  text-align: right;
  padding-right: 3px;
  border-right: 1px groove #bebebe;
  color: #484848;
  font-weight: bold;
}

/** Formular hat Eingabefelder auf beiden Seiten **/
.is-form-type-double-column-input > .is-form-col.left {
  font-weight: unset !important;
  color: unset !important;
}

.is-form-col.right {
  width: 276px;
  float: left;
  clear: none;
  padding-left: 3px;
}

.is-form-col.title {
  width: 100%;
  float: none;
  clear: both;
  column-span: all;
  padding-top: 5px;
  margin-bottom: 6px;
  padding-bottom: 3px;
  border-bottom: 1px groove #bebebe;
  font-family: 'IBM Plex Sans', 'Linux Biolinum', Arial;
  font-weight: bolder;
  font-size: 14px;
  color: #0e3460;
}

h2.title {
  width: 98%;
  float: none;
  clear: both;
  column-span: all;
  border-bottom: 1px groove #bebebe;
  color: #0e3460;
}


.is-form-col.spacer {
  width: 100%;
  float: none;
  clear: both;
  column-span: all;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-bottom: 2px;
  margin-top: 2px;
  border: 0px;
  font-size: 1px;
  height: 3px;
  min-height: unset;
}

.is-form-col.spacer.bar {
  border-bottom: 1px groove #bebebe;
}

.is-form-col.fullwidth {
  width: 100%;
  float: none;
  clear: both;
  column-span: all;
  padding-top: 8px;
  padding-bottom: 8px;
}

.is-form-col.descr {
  width: 100%;
  float: none;
  clear: both;
  column-span: all;
  font-weight: 400;
  padding-top: 5px;
  margin-bottom: 6px;
  padding-bottom: 2px;
  border-bottom: 1px groove #bebebe;
  font-size: 1.1em;
}

.is-form-col.headerimg {
  width: 100%;
  float: none;
  clear: both;
  column-span: all;
  padding: 0px;
  margin: 0px;
  line-height: 100%;
}


.ispsuiteheaderlogo {
  width: 100%;
  height: 50px;
  background: url('/global/images/is2003.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 0px;
  margin: 0px;
  float: none;
  clear: both;
  column-span: all;
}


.ispsuiteloginlogo {
  width: 389px;
  height: 147px;
  background: url('/service/images/login-titelbar.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 0px;
  margin: 0px;
}


.is-form-col.notice-container {
  width: 100%;
  float: none;
  clear: both;
  column-span: all;
}

.is-form-col.noborder {
  border: none;
}

.is-form-col.align-left {
  text-align: left;
}

.is-form-col.clear {
  clear: both;
}

.is-input.regular {
  margin-top: 0px;
  font-size: 12px;
  width: 95%;
  text-align: inherit;
}

.is-input.regular:focus {
  margin-top: -1px;
  margin-left: -1px;
  border: 2px solid #0C76DC;
  background-color: #ebf5fb;
  outline: none;
  /* transition: 0.08s; */
}

.is-input.regular:user-invalid {
  border: 2px solid #DD2F1F !important;
  box-shadow: 0px 0px 3px 1px #DD2F1F;
  background-color: #f5d3d0;
}

textarea.is-input.regular {
  font-family: 'IBM Plex Mono Text', "Courier New", Consolas, Monospace;
  outline: none;
}

textarea.is-input::placeholder {
  font-family: 'IBM Plex Sans', Arial, Helvetica, sans-serif;
}

textarea.is-input.regular:focus {
  border: 2px solid #0C76DC;
  background-color: #ebf5fb;
}

.is-input.regular.readonly {
  background: url('/global/icons/read-only.svg') rgba(255, 255, 255, 255) no-repeat !important;
  background-blend-mode: normal !important;
  background-position: 3px 5px !important;
  background-size: 10px 10px !important;
  padding-left: 22px !important;
  color: #0e3460;
}

.is-input.regular.readonly:focus {
  background: url('/global/icons/read-only.svg') #ebf5fb no-repeat !important;
  background-blend-mode: normal !important;
  background-position: 3px 5px !important;
  background-size: 10px 10px !important;
  padding-left: 22px !important;
}


.is-input.selectautowidth {
  width: auto;
  max-width: 95%;
  min-width: inherit;
}

td * .is-input.selectautowidth {
  font-size: 10px;
  text-align: left;
  line-height: 10px;
  color: #000;
  height: 16px;
  width: unset;
  max-width: 200px;
}


h2.title > .is-input.title-productmemo {
  min-width: 580px;
  max-width: 80%;
  border: 0px;
  background-color: rgb(236, 236, 236);
  font-size: inherit;
  color: inherit;
  padding-left: 12px;
  font-style: italic;
}

/**
.title-productmemo:placeholder-shown {
  border-bottom: 1px solid #0e3460 !important;
}
 */

div.contentBlockDecorationTopLeft {
  width: 15px;
  height: 30px;
  /* background-image: url('../../global/images/bar2-left.gif'); */
  background-image: linear-gradient(#9fa7b4, #7c8596);
  background-repeat: no-repeat;
  border-radius: 15px 0px 0px 15px;
  border-bottom: 1px solid #404040;
  border-top: 1px solid #c3c9d1;
  padding: 0px;
  margin: 0px;
  float: left;
}

div.error-message-header {
  background-image: linear-gradient(#da0000, #a00000) !important;
  border-bottom: 1px solid #550000 !important;
  border-top: 1px solid #cc0000 !important;
}

div.contentBlockHeaderBar {
  width: 505px;
  height: 30px;
  background-image: linear-gradient(#9fa7b4, #7c8596);
  background-repeat: repeat-x;
  border-bottom: 1px solid #404040;
  border-top: 1px solid #c3c9d1;
  padding: 0px;
  margin: 0px;
  float: left;
}

.extrawide .contentBlockHeaderBar {
  width: 815px;
}

div.contentBlockHeaderBarTitle {
  float: left;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: bold;
  padding-top: 6px;
}

div.contentBlockHeaderButton {
  height: 30px;
  width: 30px;
  background-repeat: no-repeat;
  float: right;
}

a.contentBlockHeaderButton {

}

div.contentBlockHeaderBarButtons {
  float: right;
  vertical-align: middle;
}

div.contentBlockClear {
  clear: both;
  display: none;
}

small {
  font-size: 80%;
  font-weight: normal;
  font-style: italic;
}

.text-centered {
  text-align: center;
}

input.spoiler {
  color: transparent;
  text-shadow: 0 0 7px rgba(0,0,0,0.5);
  font-family: Monospace;
}

span.spoiler {
  filter: blur(4px);
}

span.spoiler:hover {
  filter: none;
}

span.spoiler::selection {
  filter: none;
}

.spoiler:focus {
  filter: inherit;
  color: inherit;
  text-shadow: none;
}

.notice {
  border: 1px solid;
  padding: 3px;
  margin: 2px;
  border-radius: 5px;
  width: fit-content;
}

.notice-container {
  padding: 1.5em;
}

.notice.small {
  font-size: 11px;
}

.notice.fullwidth {
  width: 95%;
}

.notice.hint {
  border-color: #1f282c;
  background-color: #334248;
  color: #cae0e8;
}

.notice.hint > a {
  color: #cae0e8;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #80a6b5;
  border-radius: 3px;
}

.notice.warning {
  border-color: #9F0000;
  border-width: 2px;
  background-color: #4F0000;
  color: #FFFFFF;
}

.warning:before {
  content: "⚠️";
  padding-right: 3px;
}

.notice.important {
  background-color: #ebd256;
  border-color: #000000;
  border-width: 2px;
  text-align: center;
  font-weight: bold;
}

.notice.success {
  background-color: #aeffc2;
  border-color: #004d20;
  border-width: 2px;
  text-align: left;
  font-weight: bold;
  color: #004d20;
  font-size: 1.2em;
  padding: 12px;
  box-shadow: 0px 0px 3px 0px #aeaeae;
}

.notice.success-with-warnings {
  background-color: #ebd256;
  border-color: #7a5d23;
  border-width: 2px;
  text-align: left;
  font-weight: bold;
  color: #221c00;
  font-size: 1.2em;
  padding: 12px;
  box-shadow: 0px 0px 3px 0px #aeaeae;
}

.success:before {
  content: "✔";
  padding-right: 3px;
}

.hint:before {
  content: "💡";
  padding-right: 3px;
}

.notice.openlinkbutton {
  border-color: #7c8596;
  border-width: 1px;
  /* background-image: linear-gradient(#dae1e6, #bccad5); */
  background-image: linear-gradient(#d2dae7, #b7c5de);
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0px 0px 3px 0px #aeaeae;
}

.openlinkbutton:hover {
  background-image: linear-gradient(#e0e8f6, #d0e0fd);
}

.openlinkbutton > a {
  text-decoration: none;
  color: #24272c !important;
}

.openlinkbutton:before {
  content: '🔗';
  padding-right: 3px;
}

.mouseover-hint {
  /*
  padding: 1px;
  margin: 1px;
   */
  margin-left: 3px;
  width: 18px;
  height: 14px;
  display: inline-block;
  cursor: help;
  background-image: url('/service/images/icon-info.gif');
  background-repeat: no-repeat;
  line-height: 16;
}


input:disabled, textarea:disabled, select:disabled {
  background-image: repeating-linear-gradient(
          135deg,
          #eeeeee,
          #eeeeee 15px,
          #e5e5e5 15px,
          #e5e5e5 30px
  );
}

.invoice-display-recipient.recipient-differs.recipient2 {
  font-style: italic;
  opacity: 0.65;
  cursor: help;
}

.username {
  font-weight: bold;
}

.username.user-deleted {
  text-decoration: line-through;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-decoration-color: #000000;
}

.username.user-deleted:hover {
  text-decoration: none;
}

.is-fullpage-box {
  position: absolute;
  width: 389px;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  box-shadow: 0px 0px 30px 0px #5a5a5a;
  background-color: #dfdfdf;
}

@keyframes fadeInOnPageLoad {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.contentbox-container {
  padding: 5px;
  margin: 5px;
}

#ispsuite-loginform-container {
  animation: fadeInOnPageLoad ease 300ms;
}

#ispsuite-loginform-button {
}

#ispsuite-loginform-button-image {
  width: 38px;
  height: 17px;
  background-image: url('/global/images/login-button.gif');
  background-repeat: no-repeat;
  border: none;
  display: block;
  float: right;
  margin-right: 12px;
}

#ispsuite-loginform-button-image:hover {
  animation: animateLoginButton 800ms infinite backwards linear;
  background-repeat: repeat-x;
}

@keyframes animateLoginButton {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: 45px;
  }
}

span.halfwidth {
  width: 48%;
}

span.halfwidth.align-left {
  text-align: left;
  float: left;
  padding-left: 5px;
}

span.halfwidth.align-right {
  text-align: right;
  float: right;
  padding-right: 5px;
}

.smalltext {
  font-size: 11px;
  font-weight: normal;
  line-height: 14px;
}

.italic {
  font-style: italic;
}


.loader-box {
  margin: auto;
  display: block;
  max-height: 60px;
  max-width: 60px;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #7c8596; /* Blue */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.isDesignButton {
  width: auto;
  height: fit-content;
  box-sizing: content-box;
  display: inline-block;
  text-align: center;
  border-width: 1px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0px 1px 4px 0px #7e7e7e;
  border-radius: 5px;
  padding-left: 3px;
  padding-right: 3px;
}

.isDesignButton.larger {
  font-size: 14px;
  padding-left: 8px;
  padding-right: 8px;
}

.isDesignButton:active {
  box-shadow: 0px 0px 1px 0px #aeaeae;
}

.isDesignButton:disabled {
  background-image: linear-gradient(#d2dade, #d2dade);
  filter: grayscale(80%) contrast(60%);
  color: #646764;
  cursor: not-allowed;
  box-shadow: 0px 0px 1px 0px #aeaeae;
}


.isDesignButton.regular {
  border-color: #7c8596;
  background-image: linear-gradient(#d2dae7, #b7c5de);
  color: #24272c;
}

.isDesignButton.regular:hover {
  background-image: linear-gradient(#e0e8f6, #d0e0fd);
}

.isDesignButton.confirm {
  border-color: #25553d;
  background-image: linear-gradient(#a3e6bc, #7ccaa3);
  color: #142f22;
}

.isDesignButton.confirm:hover {
  border-color: #25553d;
  background-image: linear-gradient(#b1f9cb, #9be7c1);
}

.isDesignButton.confirm:active {
  background-image: linear-gradient(#9be7c1, #b1f9cb);
}

.isDesignButton.cancel {
  border-color: #592b2b;
  background-image: linear-gradient(#cfa9a9, #cf8686);
  color: #271313;
}

.isDesignButton.cancel:hover {
  border-color: #592b2b;
  background-image: linear-gradient(#ebc0c0, #e89696);
  color: #2d1616;
}

.isDesignButton.cancel:active {
  background-image: linear-gradient(#e89696, #ebc0c0);
}

.isDesignButton.wizardNext {
  border-color: #25554b;
  background-image: linear-gradient(#a3e6d8, #7ccab9);
}

.floating-buttons .isDesignButton {
  height: 20px;
}

cite {
  display: block;
  border-left: 2px dotted;
  border-color: #5A5A5A;
  padding: 4px;
  margin-left: 5px;
  margin-right: 8px;
  background-color: #cacaca;
  font-size: 0.8em;
}

.badge {
  display: inline-block;
  font-weight: bold;
  border-radius: 12px;
  min-width: 16px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  cursor: default;
  margin-left: 6px;
}

.badge.white {
  background-color: #FFFFFF;
  color: #7c8596;
}

.badge.blue {
  background-color: #0e3460;
  color: #FFFFFF;
}

.pos-price-promo {
  display: block;
  width: 480px;
  color: #ECECEC;
  background-color: #262835;
  border-radius: 5px 5px 5px 5px;
  padding: 5px;
  font-size: 13px;
  text-align: center;
  font-family: 'IBM Plex Sans', Arial, Helvetica, sans-serif;
  font-weight: normal;
  line-height: 18px;
}

.pos-price-promo:before {
  content: "🎁 Nur für kurze Zeit! \A";
  padding-right: 3px;
  font-weight: bold;
  white-space: pre-wrap;
  line-height: 24px;
}

.summary > .pos-price-promo {
  width: 320px;
  background-color: transparent;
  color: #005500;
  padding-top: 5px;
  text-align: left;
  font-size: 12px;
  line-height: 16px;
  font-weight: bold;
}

.summary > .pos-price-promo:before {
  content: "🎁 Nur kurze Zeit zum alten Preis! \A";
  font-weight: bold;
  line-height: 24px;
  white-space: pre-wrap;
  background-color: #262835;
  color: #ECECEC;
  border-radius: 3px 3px 3px 3px;
  padding-left: 3px;
  padding-right: 3px;
}

.pos-price-promo.cluster1 {
  display: none;
}

.pos-price-promo.cluster2 {
  display: none;
}

.pos-price-promo.cluster3 {
  display: none;
}

.pos-price-promo.cluster4 {
  display: none;
}

div.floating-buttons-spacer {
  /* height: 25px; */
  display: none;
}

div.floating-buttons {
  display: block;
  float: none;
  clear: both;
  text-align: right;
  width: 99%;
  height: 30px;
  position: sticky;
  z-index: 100;
  top: 5px;
  left: 0px;
  box-shadow: 0px 1px 5px 1px #4444447f;
  margin-bottom: 3px;
  margin-left: 10px;
  margin-right: 10px;
  -webkit-backdrop-filter: blur(1.2em) saturate(10%) brightness(8%) contrast(5%);
  backdrop-filter: blur(5px) saturate(10%) brightness(60%);
  border-radius: 6px;
  background-color: #335a74b0;
}

div.floating-buttons:has(span.floating-buttons-message-visible) > .floating-buttons-container-left {
  display: none;
}

div.floating-buttons-container-right {
  float: right;
  clear: none;
  margin-top: 3px;
  margin-right: 5px;
}

fieldset.floating-buttons-protected-buttons-group {
  border: 1px solid #FFFFFF7c;
  border-radius: 6px;
  float: left;
  clear: inherit;
  padding: 1px;
  padding-left: 12px;
  padding-right: 3px;
  margin: 0px;
  margin-right: 25px;
  margin-top: -2px;
  background: transparent;
  height: 24px;
}

fieldset.floating-buttons-protected-buttons-group > label.istoggleswitch {
  margin-right: 14px;
}

fieldset.floating-buttons-protected-buttons-group:has(input:checked + .protected-buttons-enabler) {
  background: #FFFFFF22;
}

fieldset.floating-buttons-protected-buttons-group:has(input + .protected-buttons-enabler):hover * span.protected-buttons-enabler::before {
  background-color: #CC9900;
}

fieldset.floating-buttons-protected-buttons-group:has(input:checked + .protected-buttons-enabler):hover * span.protected-buttons-enabler::before {
  background-color: white;
}

input + .protected-buttons-enabler {
  background-color: #444 !important;
}

input:checked + .protected-buttons-enabler {
  background-color: #CC9900 !important;
}


.floating-buttons.whilesaving {
  background-color: #335a74b0;
  animation-name: floating-save;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.floating-buttons.wizard {
  background-color: #678689;
}

.floating-buttons-wizardtitle {
  float: left;
  padding-left: 10px;
  padding-top: 5px;
  text-align: left;
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
}

.floating-buttons-wizardtitle:before {
  content: '🪄 ';
}

.floating-buttons-title {
  float: left;
  padding-left: 10px;
  padding-top: 5px;
  text-align: left;
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
}

@keyframes floating-save {
  0% {
    background-color: #335a74b0;
    color: #ffffff;
  }
  50% {
    background-color: #004d20b8;
    color: #aeffc2;
  }
  100% {
    background-color: #335a74b0;
    color: #ffffff;
  }
}

.floating-buttons ~ button {
  margin: 3px;
}

.floating-buttons-titletext {
  text-align: left;
}

.floating-buttons *.is-input.regular {
  width: 45px;
}

.floating-buttons-message-hidden {
  display: none;
}

.floating-buttons-message-visible {
  display: block !important;
  font-weight: bold;
  color: inherit;
  float: left;
  font-size: 14px;
  margin-left: 6px;
  padding-top: 5px;
  padding-left: 8px;
}


.is-grid-box {
  display: table;
  /*
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-flow: row;
  grid-template-rows: auto auto;
   */
}

.is-grid-box > .contentBlockContainer {
  /* display: table-cell; */
}

.is-grid-box > .contentBlockContainer:nth-child(2n) {
  /* display: table; */
}

.editblock-title-custmemo {
  font-style: italic;
  opacity: 70%;
}


.big-choose.title {
  font-size: 1.4em;
  font-weight: bold;
  color: #0e3460;
}

.big-choose-item {
  border: 1px solid #999;
  border-radius: 10px;
  max-width: 500px;
  margin: 10px;
  padding: 8px;
  background-color: #fefefe;
  box-shadow: 0px 0px 3px 0px #aeaeae;
}

.big-choose-item:hover {
  cursor: pointer;
  border: 1px solid #0C76DC;
  background-color: #ebf5fb;
}

.big-choose-item > a {
  color: #0e3460 !important;
}

.is-form-col.coltitle {
  text-align: center;
  font-weight: normal;
  font-size: 11px;
}


.k8s-title {
  background-image: url('/global/images/k8s-logo.svg') !important;
  background-repeat: no-repeat !important;
  padding-left: 24px;
  background-blend-mode: normal !important;
  background-position: 1px 3px !important;
  background-size: 18px 18px !important;
}

.k8s-background-item {
  background-image: url('/global/images/k8s-logo.svg');
  background-repeat: no-repeat;
  background-position: 90%;
  background-size: auto 70%;
}

.hover-info {
  cursor: help;
}

.tooltip-indicator:after {
  content: " ℹ️";
  cursor: help;
}

[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::before {
  content: "💡" attr(data-tooltip-content);
  display: block;
  position: absolute;
  top: 50%;
  right: calc(100% + 16px);
  min-width: 240px;
  max-width: 290px;
  /* padding: 4px; */
  text-align: center;
  text-transform: none;
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
  border-radius: 3px;
  background: #0e3460;
  color: #fff;
  opacity: 0;
  transform: translate(20px, -50%);
  /* transition: all 0.05s ease-in-out 0.15s; */
  z-index: 1;
  box-shadow: #9a9a9a 1px 2px 3px;
}
[data-tooltip]:hover::before {
  opacity: 1;
  transform: translate(0, -50%);
}

[data-tooltip-bottom]::before {
  top: calc(100% + 16px);
  left: 50%;
  right: initial;
  transform: translate(-50%, -20px);
}
[data-tooltip-bottom]:hover::before {
  transform: translate(-50%, 0);
}


.helptext-htmx {
  min-height: 190px;
  max-height: 550px;
  overflow-y: auto;
}

.contentBlockHeaderBar.wider-helptext {
  width: 590px;
}

.contentBlockContainer.wider-helptext,
.contentBlockHeader.wider-helptext,
.contentBlockContentContainer.wider-helptext {
  width: 620px;
}

.contentBlockContent.wider-helptext {
  width: 585px;
}

.contentBlockHeaderBarTitle.helpbox::before {
  content: "💡 ";
}

.contentBlockHeaderBar.helpbox,
.contentBlockDecorationTopLeft.helpbox,
.contentBlockHeaderBarButtons.helpbox {
  background-image: linear-gradient(#57758a, #114c74);
}

.contentBlockContent.helpbox {
  background-image: linear-gradient(#a6becd, #dbe1e5 40%);
}

.contentBlockHeaderBarButtons.helpbox > a {
  color: #FFF;
  background: transparent;
  padding-top: 8px;
  padding-right: 2px;
  font-size: 13px;
  display: block;
  min-height: 100%;
  box-sizing: border-box;
}

.contentBlockHeaderBarButtons {
  min-height: 100%;
}

.help-loader > .loader {
  border: 0px !important;
  border-radius: 0px;
}

.help-loader > .loader::after {
  content: '🛟';
  font-size: 28px;
}

.help-loader::after {
  content: "Hilfe wird geladen...";
}

.Headlink.packet-blocked {
  color: #DD2F1F !important;
}

table.packet-blocked {
  background-color: #ffe6c8;
}


.fullwidth-input-text > .is-input.regular {
  width: 100%;
}

.is-invalid-input {
  border: 2px solid #DD2F1F !important;
  background-color: #f5d3d0;
}

.floating-buttons.invalid-input {
  background-color: #980000 !important;
  background-image: linear-gradient(#980000, #980000 40%);
  box-shadow: #983f00 0px 2px 2px;
}

.is-form-validation-error-base {
  display: block;
  background-color: #0e3460;
  border-radius: 5px;
  color: #FFFFFF;
}

.is-form-col:has(> input.is-invalid-input[data-isvalidator="password-complex-allowempty"])::after {
  display: block;
  font-weight: bold;
  border-left: 2px solid #DD2F1F;
  padding-left: 2px;
  margin-right: 4px;
  content: "↑ Das Kennwort muss mindestens 6 Zeichen lang sein, einen Groß-, einen Kleinbuchstaben sowie eine Ziffer oder eines der folgenden Zeichen enthalten: @$!%*?&";
}


.is-form-col:has(> input.is-invalid-input[data-isvalidator="notempty"], textarea.is-invalid-input[data-isvalidator="notempty"])::after {
  display: block;
  font-weight: bold;
  border-left: 2px solid #DD2F1F;
  padding-left: 2px;
  margin-right: 4px;
  content: "↑ Dieses Feld darf nicht leer sein";
}


div.is-tile {
  min-width: 80px;
  max-width: 260px;
  min-height: 80px;
  background-color: #ecf9ff;
  text-align: center;
  margin: 6px;
  padding: 9px;
  border-radius: 9px;
  box-sizing: border-box;
  box-shadow: #444 0px 0px 5px;
  float: left;
}

.contentBlockContent > div.is-tile {
  min-width: 230px;
}

.is-tile > h1 {
  font-size: 18px;
  color: #0e3460;
}

button.add-object {
  border: 0px;
  border-radius: 4px;
  background-color: #006900;
  color: #fff;
  font-weight: bold;
  width: 68px;
  height: 26px;
  box-shadow: #444 0px 0px 2px;
}

button.add-object:hover {
  background-color: #178117;
}

a {
  target: window;
}


.page-toggle-header {
  cursor: pointer;
  margin-left: 26px;
  padding-top: 54px;
}


.page-toggle-container:has(input:user-invalid, .is-invalid-input) > h2 {
  color: #DD2F1F !important;
}


.page-block-collapsed {
  visibility: hidden !important;
  display: none !important;
}

div.page-toggle-arrows {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  content: url('/global/icons/arrow-rounded-corners.svg');
  transition: .35s;
}

.page-toggle-container:not(div.page-block-collapsed) * div.page-toggle-arrows {
  transform: rotate(180deg);
}


.page-toggle-container:has(div.page-block-collapsed) * div.page-toggle-arrows {
  transform: rotate(90deg);
}


.sipaccount-ai-agent-list-box {
  border: 1px #0e3460;
  border-radius: 3px;
  background-color: #ecf9ff;
  box-shadow: #444 0px 0px 5px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 4px;
}

.sipaccount-ai-agent-description {
  color: #0e3c46;
  font-weight: normal;
  font-size: 11px;
  word-break: break-all;
}

.sipaccount-ai-agent-list-title {
  font-size: 16px;
  font-weight: bold;
}

.green-tile, .green-tile > a {
  background-color: #428300;
  color: #ffffff !important;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
}


.input-charcounter-display {
  display: block;
  width: inherit;
  text-align: right;
  font-size: 11px;
  background-color: #0C76DC;
  color: #ffffff;
  padding: 3px;
  margin-top: 0px;
  z-index: 10;
  font-weight: bold;
}

data.hidden-data {
  display: none !important;
}

.input-charcounter-display:after {
  content: 'Noch ' attr(value) ' Zeichen übrig';
}

.input-charcounter-display[data-isplaceholdertext]:after {
  content: attr(data-isplaceholdertext) ' | Noch ' attr(value) ' Zeichen übrig' !important;
}

.input-charcounter-display[value="0"] {
  background-color: #DD2F1F !important;
  color: #ffffff !important;
}

span.floating-unsaved-changes-warning {
  display: none;
  font-weight: normal;
  padding-left: 35px;
}

.floating-unsaved-changes-warning > a {
  color: #d9d9d9;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  padding: 1px;
  cursor: pointer;
}

.floating-unsaved-changes-warning > a:hover {
  background-color: #d9d9d9;
  color: #3e3e3e;
}


div.floating-buttons[data-isformhasunsavedchanges="true"] span.floating-unsaved-changes-warning {
  display: block !important;
}

div.floating-buttons span {
  cursor: default;
}

div.contentBlockContainer:has(input[data-iscontentbox-switch="true"]) {
  filter: contrast(70%) grayscale(40%);
}

div.contentBlockContainer:has(input[data-iscontentbox-switch="true"]:checked) {
  filter: unset !important;
}

div.contentBlockContainer:has(input:focus, textarea:focus) {
  filter: unset !important;
}

div.contentBlockContainer:has(input[data-iscontentbox-switch="true"]):hover {
  filter: unset !important;
}

.contentBlockHeaderBarTitle > label:has(input[data-iscontentbox-switch="true"]:checked):after {
  content: '' !important;
}

span.floating-validation-problems {
  display: none;
}

.floating-buttons.invalid-input * span.floating-validation-problems {
  display: block !important;
  font-weight: bold;
  padding-left: 35px;
}


div.sipaccount-ai-agent-no-reference-warning {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
  background-color: #7c8596;
  color: #ffffff;
  float: none;
  clear: both;
}


div.default-hidden {
  display: none !important;
}








/* The switch - the box around the slider */
.istoggleswitch {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 18px;
  padding-right: 18px;
  margin-bottom: 5px;
  top: -10px;
  left: 0px;
}

/* Hide default HTML checkbox */
.istoggleswitch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.istoggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 1px;
  bottom: 1px;
  background-color: #ccc;
  transition: .25s;
  box-shadow: 0 0 1px #444;
}

.istoggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: -2px;
  bottom: 0px;
  background-color: white;
  transition: .25s;
}

input + .istoggle-slider {
  background-color: #aa584d;
}

input:checked + .istoggle-slider {
  background-color: #009a00;
}

input:checked + .istoggle-slider:before {
  transform: translateX(24px);
}

/* Rounded sliders */
.istoggle-slider.round {
  border-radius: 14px;
}

.istoggle-slider.round:before {
  border-radius: 50%;
}


.ai-turns-messages-container {
  width: 98%;
  background-color: #dddecf;
  max-height: 550px;
  overflow-y: auto;
  padding: 4px;
}

.ai-turns-message-bubble {
  border: 0px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: normal;
  text-decoration: none;
  padding: 5px;
  margin-bottom: 8px;
  max-width: 65%;
  box-shadow: 0px 1px 3px 1px #0000005f;
}

.ai-turns-message-bubble > p {
  padding: 0px;
  margin: 0px;
}

.ai-turns-message-bubble.agent {
  background-color: #c9ffac;
  text-align: left;
  margin-left: auto;
  margin-right: 0px;
}

.ai-turns-message-bubble.caller {
  background-color: #e9fffe;
  text-align: left;
  margin-right: auto;
  margin-left: 0px;
}

.ai-turns-message-bubble.system {
  background-color: #f0f0f0;
  text-align: center;
  margin-right: calc(550px/2 - 390px/2);
  margin-left: calc(550px/2 - 390px/2);
  font-weight: bold;
  width: 390px;
}

.ai-turns-message-bubble > .ai-message-datetime {
  font-size: 0.8em;
  opacity: 60%;
  text-align: right;
  margin-top: 4px;
}

.ai-turns-message-bubble.system:has(audio) {
  margin-right: 15% !important;
  margin-left: 15% !important;
}

audio.ai-message-recording {
  height: 28px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  border-radius: 8px;
}

.ai-summary-short {
  font-weight: bold;
  background-color: #ffff7f;
  padding: 4px;
}

.ai-agent-call-list-item {
  border: 0px;
  border-radius: 5px;
  background-color: #ecf9ff;
  margin: 6px;
  padding: 5px;
  box-shadow: 0px 0px 5px 1px #444;
}

.ai-agent-call-list-item > .ai-agent-call-summary {
  font-weight: normal;
  font-size: 11px;
}

p.ai-agent-call-subject {
  font-weight: bold;
}

p.ai-agent-call-date {
  font-weight: bold;
  text-align: left;
  font-size: 11px;
  margin: 3px;
}

.ai-agent-call-list-item > h3 > a {
  line-height: normal;
}

.ai-agent-call-list-item > h3 {
  margin: 1px;
}

.overflow-550 {
  max-height: 550px;
  overflow-y: auto;
}

.page-top-back-button {
  font-size: 15px;
  border: 2px solid #0e3460;
  border-radius: 8px;
  padding: 3px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: 10px;
  color: #0e3460;
  transition: 0.15s;
}

.page-top-back-button:hover {
  background: #0e3460;
  color: #fff;
  transition: 0.1s;
}

.page-top-back-button:hover > .page-top-back-button-icon {
  filter: invert();
  transition: 0.3s;
  transition-property: transform;
  transform: translateX(-5px) rotate(-90deg);
}

.page-top-back-button-icon {
  display: inline-block;
  background-image: url('/global/icons/arrow-rounded-corners.svg');
  min-width: 15px;
  min-height: 15px;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  transform: rotate(-90deg);
}

div.floating-buttons *.page-top-back-button {
  float: left;
  font-size: 14px;
  color: #FFF;
  border: 1px solid #FFF;
  border-radius: 6px;
  margin-top: 4px;
  padding-top: 1px;
  padding-bottom: 2px;
  line-height: 14px;
  margin-left: 5px;
  padding-right: 8px;
  margin-right: 5px;
  background: #0000001e;
}

div.floating-buttons *.page-top-back-button:hover {
  color: #000;
  background: #fff;
  transition: unset;
}

div.floating-buttons *.page-top-back-button > .page-top-back-button-icon {
  filter: invert();
  transition: 0.15s;
}

div.floating-buttons *.page-top-back-button:hover > .page-top-back-button-icon {
  filter: unset;
}


.title-box {
  display: block;
  width: 99%;
  border-bottom: 1px groove #bebebe;
  float: none;
}

.title-box > h2 {
  width: unset;
  border-bottom: unset;
  float: unset;
  clear: unset;
  display: inline-block;
  margin-left: 1em;
}


div.voip-ai-tos-text {
  border: 1px #a9a9a9 solid;
  margin: 3px;
  padding: 5px;
  max-height: 550px;
  overflow-y: auto;
  background-color: #FFFFFF;
}


.k8s-volume-quota-ring {
  width: 160px;
  height: 160px;
  border: 25px solid #114c74;
  border-radius: 160px;
  color: #114c74;
}

.k8s-volume-quota-ring > .quota-table {
  display: table;
  width: 100%;
  height: 100%;
}

.k8s-volume-quota-ring > .quota-table > .quota-text {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  font-size: 3em;
}