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

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

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

.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.wide > input {
  min-width: 95% !important;
  width: 95% !important;
}

.is-form-col.wide > .selectautowidth {
  min-width: 95% !important;
  width: 95% !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: right;
  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;
}


.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.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 {
  border: 1px solid #0C76DC;
  background-color: #ebf5fb;
}

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

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

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

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

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

.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: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);
}


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