:root {
  --app-height: 100vh;
  --scroll-to-reload: 0deg;
  --colorDraft: #FAB116;
  --colorDraftBright: #FFF4DE;
  --colorClosed: /*#CCCCCC*/#009900;
  --colorClosedBright: /*#FCFCFC*/#EFF7EF;
  --colorBlocked: #4679DA;
  --colorBlockedBright: #F3F7FD;
  --colorReleaseRequest: #4679DA;
  --colorReleaseRequestBright: #F3F7FD;
  --colorPaused: #4679DA;
  --colorPausedBright: #F3F7FD;
  --colorProposal: #4679DA;
  --colorProposalBright: #F3F7FD;
  --colorOpen: #009900;
  --colorOpenBright: #EFF7EF;
  --colorReady: #009900;
  --colorReadyBright: #EFF7EF;
  --colorCancelled: #CC0000;
  --colorCancelledBright: #FCEFEF;
  --colorProcessing: #009900;
  --colorProcessingBright: #EFF7EF;
  --colorStatusRed: #CC0000;
  --colorStatusGreen: #009900;
  --colorStatusOrange: #FAB116;
  --colorStatusGray: #CCCCCC;
  --colorStatusBlue: #4679DA;
  --colorOrange: #FAB116;

  --marketingToolbarHeight: 90px;
}


/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../fonts/open-sans-v17-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v17-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* average-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Average Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/average-sans-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

div {
  position: relative;
  box-sizing: border-box;
}

hr {
  width: 100%;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  background: #CCC;
}

body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--app-height);
  padding: 0;
  margin: 0;
  color: #000;
  background: #FFFFFF;
  font-family: 'Open Sans', Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
body.ios {
}
@media all and (min-width: 1000px ) {
  body.no-phone .hide-on-desktop, body.no-mobile .hide-on-desktop {
    display: none !important;
  }
}
body.hide-sidebar { 
}
body.offline > * {
  filter: blur(2px);
}
body.offline:after {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 15px;
  font-size: 1.2rem;
  text-align: center;
  content: 'Um diese App nutzen zu können, benötigen Sie eine Internetverbindung.';
  background: rgba(0,0,0,0.7);
  color: #FFF;
  z-index: 999;
  filter: none;
}

div.not-installed {
  position: fixed;
  display: flex;
  justify-content: space-between;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  z-index: 999;
  align-items: center;
  background: #FFF;
  box-shadow: 0 0 8px rgba(0,0,0,0.4);
}
div.not-installed .icon {
  display: block;
  width: 40px;
  height: 40px;
}
div.not-installed .icon img {
  margin: 0;
}
div.not-installed .text {
  padding: 0 20px;
  font-size: 0.9rem;
}
div.not-installed .close {
  width: 30px;
  height: 30px;
  overflow: hidden;
}
div.not-installed .close span {
  display: block;
  position: absolute;
  top: calc( 50% - 8px );
  left: calc( 50% - 1px );
  width: 2px;
  height: 16px;
  background: #CCC;
  transform: rotate(45deg);
}
div.not-installed .close span:nth-child(2) {
  transform: rotate(-45deg);
}

body::before {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--app-height);
  content: '';
  background: rgba(0,0,0,0.5);
  overflow: hidden;
}
body.sidebar-shown::before {
  display: block;
}
body.popup-shown::before {
  z-index: 88;
}

a, button, input[type="text"], input[type="submit"], input[type="email"], input[type="date"], input[type="time"], input[type="url"], textarea, select {
  outline: none;
  -webkit-appearance: none;
}
select {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAKCAYAAABfYsXlAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8yMS8yMCswj2kAAAAedEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzUuMasfSOsAAABrSURBVCiRtdPBDcAgDANAZxNGYpSOwmiMwgbuJ5VaaFPnAZK/F8kyRhLbnuMdAMV0klBy4QXAEOABoKRwP1AFvKrwA/cDLYBbBl7woH+55z987j/Vc4i/9J/q+R772rmZNZ/qoQ97MnZ+ohNXUHKNn4+4FQAAAABJRU5ErkJggg==") !important;
  background-repeat: no-repeat !important;
  background-position: center right !important;
}

input[type="checkbox"].checkbox-as-switch {
  -webkit-appearance: none;
  opacity: 0;
  width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.toggle-checkbox {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  margin-top: 10px;
  margin-right: 10px;
  border-radius: 10px;
  background: #EEE;
  vertical-align: text-bottom;
  cursor: pointer;
}
.toggle-checkbox + label {
  display: inline-block;
  width: calc( 100% - 44px );
}
input[type="checkbox"].checkbox-as-switch + .toggle-checkbox::after {
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #CCCCCC;
  content: '';
  transition: 300ms;
}
input[type="checkbox"].checkbox-as-switch.halfchecked + .toggle-checkbox::after {
  left: 9px;
  background: #999;
}
input[type="checkbox"].checkbox-as-switch:checked + .toggle-checkbox::after {
  left: 16px;
  background: var(--colorOrange);
}

div.field-maxlength {
  text-align: right;
  font-size: 12px;
  color: #999;
}

a {
  color: #dc9d17;
  text-decoration: none;
}
a:hover {
  color: #333;
}

a.button {
  display: block;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 3px;
  border-bottom: 1px solid rgba(0,0,0,0.5);
  box-sizing: border-box;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1rem;
  cursor: pointer;
  background: #FAB116;
  border: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
  text-align: center;
  color: #FFF;
}
a.button:focus, a.button:hover, a.button:active {
  transform: translate(0,1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
a.button.cybox-button {
  background: #5d5d5d;
}


h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', Arial, sans-serif;
}
h1 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
header {
  position: relative;
  width: 100vw;
  height: 48px;
  border-bottom: 2px solid #FAB116;
  background: #232C35;
  z-index: 4;
}

header div.header-logo {
  position: absolute;
  top: 17px;
  left: calc( 50% - 45px );
  width: 90px;
  height: 13px;
}
header div.header-logo img {
  vertical-align: top;
}

header #header-customer {
  display: none;
  position: absolute;
  top: 14px;
  left: 80px;
  max-width: calc( 100% - 140px );
  color: #FFF;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

header #header-notifications {
  position: absolute;
    top: 2px;
    right: 10px;
    height: 43px;
    width: 37px;
    padding-right: 10px;
    cursor: pointer;
    display: none;
}
header #header-notifications-unread, header #header-notifications-disabled {
  display: none;
}
header #header-notifications.unread #header-notifications-unread {
  display: block;
}
header #header-notifications.disabled #header-notifications-disabled {
  display: block;
  opacity: 0.5;
  cursor: default;
}
header #header-notifications.disabled #header-notifications-enabled {
  display: none;
}
header #header-notifications svg {
  width: 100%;
  height: 100%;
}

#subnav, #nosubnav {
  position: relative;
  width: 100vw;
  background: #FFF;
  z-index: 3;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  transition: 300ms;
  text-align: center;
}
#subnav ul, #nosubnav ul {
  display: table;
  width: 100%;
  max-width: 1000px;
  height: 60px;
  padding: 0;
  margin: 0 auto 0;
  list-style: none;
}
#subnav ul li, #nosubnav ul li {
  display: table-cell;
  padding: 3px 0 0 0;
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 3px solid transparent;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  transition: 400ms;
  cursor: pointer;
}
body.no-mobile #subnav ul li:hover, body.no-mobile #nosubnav ul li:hover {
  border-bottom-color: #FAB116;
}
#subnav ul li.active, #nosubnav ul li.active {
  border-bottom-color: #FAB116;
  color: #FAB116;
}
#subnav ul li svg, #nosubnav ul li svg {
  width: 20px;
  height: 20px;
  color: currentColor;
}
#subnav ul li.active svg, #nosubnav ul li.active svg {
  width: 20px;
  height: 20px;
  color: currentColor;
}

#ajax-container {
  position: absolute;
  right: 0;
  top: 50px;
  left: 0;
  bottom: 0;
  overflow: hidden;
  transition: 200ms;
  background: #F2F2F2;
}

#fullpage {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  padding: 20px;
  bottom: 0;
  background: #FFF;
  z-index: 900;
  box-sizing: border-box;
  overflow: auto;
}
body.fullpage-shown #fullpage {
  left: 0;
}
#fullpage[data-activity] {
  border-bottom: var(--marketingToolbarHeight) solid transparent;
}
#fullpage[data-activity][data-status="processing"] {
  /*border-bottom: 0;*/
}

#menu-button {
  position: absolute;
  top: 5px;
  left: 10px;
  width: 40px;
  height: 34px;
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  display: none;
  box-shadow: none;
}
#menu-button:active {
  transform: none;
}
#menu-button span {
  position: absolute;
  display: block;
  width: 30px;
  height: 3px;
  background: #EBEBEB;
  transition: 300ms;
}
#menu-button span:nth-child(1) {
  top: 10px;
  left: 10px;
}
#menu-button span:nth-child(2) {
  top: 18px;
  left: 10px;
}
#menu-button span:nth-child(3) {
  top: 26px;
  left: 10px;
}

body.fullpage-shown #menu-button span:nth-child(1) {
  top: 13px;
  width: 17px;
  transform: rotate(-45deg);
}
body.fullpage-shown #menu-button span:nth-child(2) {
  width: 0;
  opacity: 0;
}
body.fullpage-shown #menu-button span:nth-child(3) {
  top: 23px;
  width: 17px;
  transform: rotate(45deg);
}
#close-fullpage {
  position: absolute;
  top: 0px;
  right: 10px;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  background: #FAB116;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
  border-radius: 100%;
  font-weight: bold;
  color: white;
  z-index: 101;
  transition: 500ms;
}
body.no-mobile #close-fullpage:hover {
  box-shadow: 0 1px 2px rgba(250,177,22,0.8);
}

.fullpage-buttons {
  margin-top: 20px;
  margin-bottom: 80px;
  padding-top: 15px;
  border-top: 1px solid #CCC;
}
.fullpage-buttons button {
  width: auto;
  min-width: 15%;
  margin: 0 1% 12px 0;
  padding: 12px 10px;
  font-size: 0.87em;
}
.fullpage-buttons button.red {
  background-color: #da2e18;
}
.fullpage-buttons button svg {
  width: 16px;
  height: auto;
  margin-right: 8px;
  vertical-align: middle;
}

#close-fullpage:before, #close-fullpage:after {
  display: block;
  position: absolute;
  top: 7px;
  left: 11px;
  content: '';
  width: 3px;
  height: 12px;
  background: #FFF;
  transform: rotate(45deg);
}
#close-fullpage:after {
  transform: rotate(-45deg);
}


main {
  position: relative;
  width: 100%;
  height: calc( var(--app-height) - 50px );
  overflow: auto;
  background: #FFF;
  box-sizing: border-box;
  transition: 300ms;
}
main.padding {
  padding: 30px 20px;
}
main.gray {
  background: #F2F2F2;
}
#subnav + main, #nosubnav + main {
  height: calc( var(--app-height) - 110px );
}
#nosubnav + main {
  height: calc( var(--app-height) - 50px );
}
body.fullpage-shown main {
  /*transform: translate(-100%,0);*/
}

aside {
  position: fixed;
  top: 0;
  left: -388px;
  width: 380px;
  max-width: calc( 100vw - 40px );
  height: var(--app-height);
  background: #FFF;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
  transition: 500ms;
  z-index: 202;
  overflow: auto;
}
aside ul {
  margin: 0 30px;
  padding: 0;
  list-style: none;
}
aside li {
  margin: 0;
  padding: 15px 0;
  line-height: 22px;
}
aside li + li {
  border-top: 1px solid #CCC;
}
aside li a {
  display: block;
  color: #232C35;
}
aside li a.marked {
  color: #dc9d17;
}
aside svg {
  width: 22px;
  height: 22px;
  margin-right: 12px;
  vertical-align: middle;
  color: gray;
}
aside li a.marked svg {
  color: #dc9d17 !important;
}

body.no-mobile aside li a:hover {
  color: #dc9d17;
}
body.no-mobile aside li a:hover svg {
  color: #dc9d17 !important;
}

body.hide-sidebar aside {
  display: none;
}
body.sidebar-shown aside {
  left: 0;
}

#logout-button {
  position: relative;
  color: #999;
  padding: 20px;
  cursor: pointer;
}

#sidebarfooter {
  position: absolute;
  bottom: 10px;
  width: 100%;
  padding: 0 3.5%;
  font-size: 0.8em;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

#credits-button, #admin-button {
  cursor: pointer;
}
#admin-button {
  display: none;
}
#account-info {
  margin-bottom: 30px;
  padding: 60px 30px 30px 30px;
  /*background: linear-gradient(45deg, #FAB116, transparent);*/
  background-color: #FAB116;  
  color: white;
  cursor: pointer;
}
#account-info svg {
  color: #FFF;
  vertical-align: middle;
  height: 1.05em;
  cursor: pointer;
}


#customer-info {
  padding: 0 10px;
}

#floating-button {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 60px;
  height: 60px;
  padding: 15px;
  border: 0;
  background: #FAB116;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
  border-radius: 100%;
  z-index: 101;
  transition: 500ms;
}
#floating-button.show-button-menu {
  background: #999;
}
body.no-mobile #floating-button:hover {
  box-shadow: 0 1px 2px rgba(250,177,22,0.8);
}

#floating-button-menu {
  position: absolute;
  top: 0;
  right: 10px;
  transform: translate(0,-100%);
  z-index: 100;
  transition: 300ms;
  opacity: 0;
}
#floating-button.show-button-menu + #floating-button-menu {
  top: -40px;
  opacity: 1;
}
#floating-button-menu button + button {
  margin-top: 10px;
}

#floating-button:before {
  position: relative;
  display: block;
  width: 30px;
  height: 20px;
  content: '';
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: 500ms;
}
#floating-button.add:before {
  background-image: url(../images/bu-add.svg);
}


div.fullpage-toolbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 20px;
  pointer-events: none;
  background: #FFFFFF;
  border-top: 1px solid #CCC;
  transform: translate(-20px,0);
  z-index: 901;
  display: none;
}
#fullpage[data-date] div.fullpage-toolbar, #fullpage[data-activity] div.fullpage-toolbar {
  display: none;
}
div.fullpage-toolbar * {
  pointer-events: all;
}
div.fullpage-toolbar button {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 30px;
  background: #646A70;
  background-size: 20px 20px;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
  transform-origin: bottom left;
}
div.fullpage-toolbar button:active {
  transform: translate(0,1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
div.fullpage-toolbar button + button {
  margin-left: 5px;
}
div.fullpage-toolbar button[disabled] {
  opacity: 0.35;
  pointer-events: none;
}
div.fullpage-toolbar button.document {
  background-image: url(../images/bu-file.svg);
}
div.fullpage-toolbar button.photo {
  background-image: url(../images/bu-photo.svg);
}
div.fullpage-toolbar button.video {
  background-image: url(../images/bu-video.svg);
}
div.fullpage-toolbar button.audio {
  background-image: url(../images/bu-audio.svg);
  background-color: #bd0000;
}
div.fullpage-toolbar button.audio.stop {
  background-image: url(../images/bu-stop.svg);
}
div.fullpage-toolbar button.attachment {
  background-image: url(../images/bu-attachment.svg);
}
#fullpage:not([data-activity]) div.fullpage-toolbar button.attachment, #fullpage:not([data-activity]) div.fullpage-toolbar button.photo, #fullpage:not([data-activity]) div.fullpage-toolbar button.video, #fullpage:not([data-activity]) div.fullpage-toolbar button.audio {
  display: none;
}
div.fullpage-toolbar button.save, div.fullpage-toolbar button.preview, div.fullpage-toolbar button.preview2 {
  float: right;
  padding: 0 20px;
  width: auto;
  margin-right: 20px;
  border: 1px solid #999;
  background-color: #FFFFFF;
  color: #999;
  font-size: 0.83em;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: none;
}
div.fullpage-toolbar button.preview, div.fullpage-toolbar button.preview2 {
  opacity: 1;
  display: none;
}
div.fullpage-toolbar button.submit {
  float: right;
  padding: 0 20px;
  font-size: 0.83em;
  font-weight: 600;
  text-transform: uppercase;
  width: 70px;
  color: transparent;
  background-color: #FAB116;
  background-size: 20px 20px;
  background-image: url(../images/bu-send.svg);
}
#fullpage[data-activity][data-status!="draft"] div.fullpage-toolbar button.submit {
  background-image: url(../images/floppy-disk.svg);
  background-size: 30px 30px;
};
div.fullpage-toolbar button.submit[disabled] {
  background-color: #646A70;
}

/* Formular-Felder */
form fieldset, form fieldset ul, form fieldset li {
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
}
form fieldset + fieldset {
  margin-top: 20px;
}
form fieldset ul {
  list-style: none;
  margin: 10px 0;
}
form fieldset > ul > li + li {
  margin-top: 10px;
}
form fieldset legend {
  color: #000;
  margin-bottom: 0.2rem;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0;
}
input[type="text"], input[type="date"], input[type="time"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], textarea, select, button, input[type="submit"],
form div.upload-filelist {
  width: 100%;
  background: #F2F2F2;
  padding: 10px;
  border: 0;
  border-radius: 3px;
  border-bottom: 1px solid #999;
  box-sizing: border-box;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1rem;
}
select {
  padding: 10px 30px 10px 10px;
}
input[type="date"], input[type="time"] {
  height: 2.7rem;
  padding-left: 35px;
  background-image: url(../images/ico-date.svg);
  background-repeat:  no-repeat;
  background-position:  10px center;
  background-size: auto 16px;
}
input[type="time"] {
  background-image: url(../images/ico-time.svg);
}
button, input[type="submit"] {
  cursor: pointer;
  background: #FAB116;
  color: #FFF;
  border: 0;
  border-radius: 100px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
}
button[disabled], input[type="submit"][disabled] {
  background: #CCC;
}
button:focus, button:hover, button:active,
input[type="submit"]:focus, input[type="submit"]:hover, input[type="submit"]:active {
  transform: translate(0,1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
select option[value=""] {
  color: #999;
  font-style: italic;
}
input[type="text"][readonly], input[type="date"][readonly], input[type="time"][readonly], input[type="email"][readonly], input[type="password"][readonly], input[type="url"][readonly], input[type="number"][readonly], textarea[readonly], select[readonly] {
  background: none;
}
form div.upload-filelist {
  position: relative;
  font-size: 0.9rem;
  color: #646A70;
  overflow: auto;
}
form div.upload-filelist.upload-filelist-highlight #filelist:empty::before {
  animation: 600ms highlight linear forwards;
}
@keyframes highlight {
  0% {
    color: #CCC;
  }
  50% {
    color: #333;
  }
  100% {
    color: #CCC;
  }
}
form div.upload-filelist #filelist:empty::before {
  display: block;
  /* content: 'Bitte verwenden Sie die unten angezeigten Buttons'; */
  font-style: italic;
  color: #CCC;
  line-height: 0.9rem;
  transition: 300ms;
}
form div.upload-filelist input[type="file"] {
  display: none;
}

/* Multiupload Änderungen */
form div.upload-filelist li{
	position: relative;
  display: block;
  margin: 5px 0;
  padding: 8px 10px 8px 32px;
  border-radius: 2px;
  background: #FFF url(../images/ico-file.svg) no-repeat 10px 8px;
  background-size: 15px 20px;
  overflow: hidden;
  border: 1px solid #CCC;
  border-radius: 4px;
}

form div.upload-filelist div {
  position: relative;
  display: block;
  /* margin: 5px 0;
  padding: 8px 10px 8px 10px; */
  border-radius: 2px;
  background: #FFF;
  background-size: 15px 20px;
  overflow: hidden;
  border: 1px solid #CCC;
  border-radius: 4px;
}
form div.upload-filelist ul {
  margin: 10px 0;
}

form div.upload-filelist ul div > li{
	margin: 5px 5px 5px 10px;
}
form div.upload-filelist ul div > li:first-child{
	margin: 0px;	
	border: none;
}

form div.upload-filelist ul div > li:first-child::after,
form div.upload-filelist ul > li::after  {
  color: #FFFFFF;
  background: #FAB116;
  padding: 3px 5px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 3px;
  margin-left: 6px;
  content: 'NEU';
}
/* Multiupload Änderungen  Ende*/

form div.upload-filelist li.uploading:before {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  content: '';
  bottom: 0;
  background: rgb(250,177,22);
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(250,177,22,0.5) 50%, rgba(0,0,0,0) 100%);
  animation: uploading 2s infinite;
}
@keyframes uploading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
form div.upload-filelist li.finished {
  color: green;
}
form div.upload-filelist li.image {
  background-image: url(../images/ico-image.svg);
}
form div.upload-filelist li.video {
  background-image: url(../images/ico-video.svg);
}
form div.upload-filelist li.audio {
  background-image: url(../images/ico-audio.svg);
}
form div.upload-filelist button.remove-file {
    display: inline-block;
    width: auto;
    padding: 0 5px;
    background: transparent;
    box-shadow: none;
    font-weight: bold;
    color: #666;
    float: right;
    overflow: hidden;
}
form div.upload-filelist button.remove-file:active {
  background: transparent;
  box-shadow: none;
}
form div.upload-filelist.disabled button.remove-file {
  display: none;
}
form div.upload-filelist-size {
  font-size: 0.8rem;
  text-align: right;
  font-style: italic;
  color: #CCC;
}
input[type="text"]::placeholder, input[type="date"]::placeholder, input[type="time"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="url"]::placeholder, input[type="number"]::placeholder, textarea::placeholder {
  font-style: italic;
  color: #CCC;
}

#login-window {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc( 100vw - 40px );
  max-width: 500px;
  padding: 0;
  transform: translate(-50%,-50%);
}
#login-window h1 {
  font-size: 1.6rem;
}
#login-window form {
  margin-top: 20px;
}

#msg-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(51,51,51,0.3);
  z-index: 999;
}
body.msg-shown #msg-overlay {
  display: block;
}

#msg-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: calc( 100vw - 40px );
  max-width: 500px;
  max-height: calc( var(--app-height) - 40px );
  padding: 40px 20px 40px 20px;
  border-radius: 3px;
  background: #FFF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 999;
  text-align: left;
  transform: translate(-50%,-50%);
  overflow: auto;
  font-size: 0.9rem;
}
body.msg-shown #msg-popup {
  display: block;
}
/* preview changes */
body.msg-shown #msg-popup.preview-popup {
  display: grid;
}
#msg-popup > div small {
  display: block;
  padding-top: 10px;
  font-size: 0.8rem;
}

#msg-popup textarea {
  margin-top: 10px;
}
.msg-popup-buttons {
  text-align: center;
  margin-top: 15px;
}
#msg-popup button {
  display: inline-block;
  width: auto;
  min-width: 110px;
  border: 0;
  padding: 7px 20px;
  margin: 15px 10px 0 0;
  background: #FAB116;
  color: #FFF;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1em;
  cursor: pointer;
  box-sizing: border-box;
}

body.msg-shown #msg-popup.preview-popup button {
  font-size: 0.87em;
  width: 100%;
  margin:0;
  padding: 10px;
}

body.msg-shown #msg-popup.preview-popup .marketing--activities-fullpage-status {
  margin: 0;
}

#msg-popup button:focus {
  outline: 1px solid #be8b1e;
}
#msg-popup button[disabled] {
  background-color: #CCC;
}
#msg-popup button.msg-popup-close {
  position: absolute;
  display: block;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #999;
  min-width: 0;
}
#msg-popup button.msg-popup-close::before, #msg-popup button.msg-popup-close::after {
  display: block;
  position: absolute;
  top: calc( 50% - 1px );
  left: 0;
  width: 100%;
  height: 2px;
  background: #999999;
  transform: rotate(45deg);
  content: '';
}
#msg-popup button.msg-popup-close::after {
  transform: rotate(135deg);
}
div.msg-floating-buttons {
  display: flex;
  justify-content: space-around;
}

#preview-popup {
  position: relative;
  background-color: white;
  width: 60%;
  max-height: 90%;
  margin: 0 auto 0;
  padding: 10px;
  border: 1px solid black;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index:999;
  grid-template-columns: auto 180px;
  column-gap: 8px;
  row-gap: 2px;
  display: grid;
}

/*preview changes*/
.preview-popup#msg-popup {
  position: fixed;
  background-color: white;
  width: 60%;
  max-height: 90%;
  margin: 0 auto 0;
  padding: 10px;
  border: 1px solid black;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index:999;
  grid-template-columns: auto 180px;
  column-gap: 8px;
  row-gap: 2px;
  display: grid;
  
  top: 50%;
  left: 50%;
  border-radius: inherit;
  text-align: inherit;
  /* transform: translate(-50%,-50%); */
  overflow: inherit;
  font-size: inherit;
  max-width: none;
}

div.preview-buttons {
  background-color: #EEE;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
}
div.preview-buttons button {
  font-size: 0.87em;
}
.preview-popup-content {
  grid-column:  span 2;
  overflow: auto;
  height: 70%;
}
.preview-popup-content iframe {
  width: 100%;
}
div.preview-registers {
  margin-top: 15px;
  grid-column: span 2;
  border-bottom: 1px solid #777;
}
div.preview-register {
  padding: 6px 10px;
  min-width: 48px;
  height: 32px;
  border: 1px solid #CCC;
  background-repeat: no-repeat;
  background-size: 24px auto;
  background-position: center center;
  cursor: pointer;
  float: left;
}
div.preview-register + div.preview-register {
  margin-left: 5px;
}
div.preview-register.active {
  border: 1px solid #777;
}
.preview-register.website {
  background-image: url(../images/ico-website.png);
}
.preview-register.facebook {
  background-image: url(../images/ico-facebook.svg);
}
.preview-register.googlemybusiness {
  background-image: url(../images/ico-googlemybusiness.png);
}
.preview-register.instagram {
  background-image: url(../images/ico-instagram.png);
}
.preview-register.twitter {
  background-image: url(../images/ico-twitter.svg);
}
.preview-register.youtube {
  background-image: url(../images/ico-youtube.png);
}
.preview-register.vimeo {
  background-image: url(../images/ico-vimeo.png);
}
.preview-register.tiktok {
  background-image: url(../images/ico-tiktok.png);
}
.preview-register.pinterest {
  background-image: url(../images/ico-pinterest.png);
}
.preview-register.snapchat {
  background-image: url(../images/ico-snapchat.png);
}
.preview-register.linkedin {
  background-image: url(../images/ico-linkedin.png);
}
.preview-register.xing {
  background-image: url(../images/ico-xing.png);
}
.preview-register.tumblr {
  background-image: url(../images/ico-tumblr.png);
}
.preview-register.flickr {
  background-image: url(../images/ico-flickr.png);
}
.preview-register.ebaykleinanzeigen {
  background-image: url(../images/ico-ebaykleinanzeigen.png);
}
div.content-container {
  margin-bottom: 70px;
}
div.content-card {
  margin: 20px 10px 70px 10px;
  padding: 20px 20px 20px 17px;
  font-size: 0.9rem;
  background: #FFF;
  border-left: 3px solid #FFF;
  /*border-radius: 2px;*/
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  margin-bottom: 15px;
  line-height: 140%;
}
div.content-card.appinfo {
  display: none;
  border-left: 0;
  padding-left: 60px;
}
div.appinfo-icon  {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  background: var(--colorOrange);
  color: #FFF;
}
div.appinfo-icon svg {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 10px;
  left: 5px;
}
button.appinfo-close, button.appinfo-close:hover {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: transparent;
  border: 10px solid #FFFFFF;
  box-shadow: none;
  transform: none;
}
button.appinfo-close::before, button.appinfo-close::after {
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 20px;
  height: 2px;
  background: #666;
  transform: rotate(45deg);
  transform-origin: center center;
  content: '';
}
button.appinfo-close::after {
  transform: rotate(135deg);
}
div.content {
  margin: 20px 10px 70px 10px;
  padding: 20px 20px 20px 17px;
  font-size: 0.9rem;
  border-radius: 2px;
  margin-bottom: 15px;
  line-height: 140%;
}
.max1000 {
  max-width: 1000px;
  margin: 20px auto 70px !important;
}

/* BEGIN -- Module: Marketing ---------------------------- */


.marketing--activities-nonotificationalert  {
  border: 1px solid #C00;
  border-radius: 3px;
  padding: 5px;
  text-align: center;
  color: #C00;
  max-width: 1200px;
  margin: 20px 15px;
  background: #ffedf0;
}

#marketing--activities-form input[data-edited], #marketing--activities-form select[data-edited], #marketing--activities-form textarea[data-edited] {
  /*outline:1px solid #FAB116;*/
}

/* Activities  */

.marketing--activities-fullpage-appointmentrequests button,
.marketing--activities-fullpage-filelist button {
  width: 20px;
  height: auto;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.marketing--activities-fullpage-appointmentrequests button + button,
.marketing--activities-fullpage-filelist button + button {
  margin-left: 25px;
}
.marketing--activities-fullpage-appointmentrequests button svg,
.marketing--activities-fullpage-filelist button svg {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 19px;
  vertical-align: middle;
  color: #666;
}
.marketing--activities-fullpage-appointmentrequests button:hover, .marketing--activities-fullpage-appointmentrequests button:active,
.marketing--activities-fullpage-filelist button:hover, .marketing--activities-fullpage-filelist button:active {
  transform: none !important;
  box-shadow: none;
}
.marketing--activities-fullpage-appointmentrequests button:hover svg, .marketing--activities-fullpage-appointmentrequests button:focus svg, .marketing--activities-fullpage-appointmentrequests button:active svg,
.marketing--activities-fullpage-filelist button:hover svg, .marketing--activities-fullpage-filelist button:focus svg, .marketing--activities-fullpage-filelist button:active svg {
  color: #FAB116;
}

.marketing--activities-fullpage-activityno {
  text-align: right;
  font-size: 0.9em;
  color: #666;
}

#marketing--activities-fullpage-status-content button[data-action="record"] {
  background: #bd0000 url(../images/bu-audio.svg) no-repeat center center;
  background-size: 20px 20px;
  border-radius: 200px;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  vertical-align: top;
}
#marketing--activities-fullpage-status-content {
  padding: 10px 0;
}
#marketing--activities-fullpage-status-content ul {
  padding: 0;
  list-style: none;
}
#marketing--activities-fullpage-status-content textarea {
  border: 1px solid #CCCCCC;
  background: #FFFFFF;
  margin-top: 10px;
  max-width: 650px;
  margin-right: 10px;
}
#marketing--activities-fullpage-status-content .upload-filelist table {
  display: none;
}
#fullpage[data-activity] #marketing--activities-fullpage-status-content #marketing--activities-form-distributions {
  margin-bottom: 0;
  background: transparent;
  padding: 0;
  border: 0;
}
#fullpage[data-activity] #marketing--activities-fullpage-status-content #marketing--activities-form-distributions li:not(.marketing--activities-form-distribution-checked) {
  display: none;
}

#fullpage[data-activity] #marketing--activities-fullpage-status-content #marketing--activities-form-distributions li {
 background: #FFFFFF;
 padding: 5px;
}
#fullpage[data-activity] #marketing--activities-fullpage-status-content #marketing--activities-form-distributions li label {
  margin: 0;
  width: 20px;
  height: 20px;
}
#marketing--activities-form {
  max-width: 1200px;
  margin: 0 auto 0;
  position: relative;
}
#marketing--activities-form-notificationtoggle {
  display: none;
  margin-left: 10px;
}

#marketing--activities-form-preview {
  position: relative;
  display: grid;
  margin-top: 15px;
  grid-template-columns: minmax(0,5fr) minmax(0,3fr);
  grid-column-gap: 40px;
}
.marketing--activities-form-preview-headline {
  grid-column: 1 / 3;
  font-size: 2em;
}
.marketing--activities-form-preview-content {
  background-color: #F9F9F9;
  padding: 7px 15px;
  font-family: 'Average Sans', 'Open Sans', sans-serif;
  font-size: 1.1em;
}
.marketing--activities-form-preview-content img {
  max-width: 100%;
  margin: 7px 12px;
}
.marketing--activities-form-preview-content .img {
  position: relative;
  padding: 0;
  max-width: 100%;
  margin: 7px 12px;
  font-size: 0.83em;
  color: #555;
}
.marketing--activities-form-preview-content .img img {
  margin: 0;
}

.marketing--activities-form-preview-files {
}
.marketing--activities-form-preview-file-image h2 {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 0.7em;
}
.marketing--activities-form-preview-file-image span {
  position: relative;
  width: 100%;
  padding-top: 5px;
  font-size: 0.87em;
  display: inline-block;
}
.marketing--activities-form-preview-file-image + .marketing--activities-form-preview-file-image {
  margin-top: 40px;
}

.marketing--activities-form-preview-files img {
  max-width: 100%;
}
.marketing--activities-form-preview-file-audio {
  grid-column: span 2;
  order: 100;
}
.marketing--activities-form-preview-file-audio audio {
  width: 100%;
}

.marketing--activities-form-via-text {
  display: none;
}
#fullpage[data-activity] .marketing--activities-form-via-text {
  display: block;
}

#marketing--activities-form-termin ul {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
#marketing--activities-form-termin ul li:nth-child(1) {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
#marketing--activities-form-termin ul li:nth-child(2) {
  display: block;
  width: 100%;
}
#marketing--activities-form-termin > ul > li + li {
  margin-top: 0;
}

#marketing--activities-form-description {
  min-height: 200px;
}

#marketing--activities-form-noticefieldset legend {
    background: #FAB116;
    color: #FFFFFF;
    padding: 5px 15px;
    font-size: 0.9em;
    border-radius: 5px 5px 0 0;
    margin: 0;
}
#marketing--activities-form-noticefieldset > ul {
    margin: 0;
}
#marketing--activities-form-notice {
  border: 1px solid #FAB116;
}

.marketing--activities-form-container {
}

#marketing--activities-form label {
  display: block;
  font-weight: 700;
  color: #FAB116;
  margin-bottom: 5px;
  font-size: 12px;
  text-transform: uppercase;
}
#marketing--activities-form input[type="submit"] {
  display: none;
}

#marketing--activities-form-attachments {
  display: none;
  cursor: pointer;
  margin-top: 0;
}

#marketing--activities-form-publishdate-message {
  border: 1px solid var(--colorOrange);
  background: #FFF4DE;
  padding: 5px;
  border-radius: 3px;
  font-size: 13px;
  margin-top: 10px;
}
#marketing--activities-form-publishdate-message:empty {
  display: none;
}

#marketing--activities-form-admin {
  display: none;
}
#marketing--activities-form-admin ul {
  display: grid;
  grid-template-columns: 300px auto;
  grid-column-gap: 30px;
}
#marketing--activities-form-admin ul li + li {
  margin-top: 0;
}

.marketing--activities-form-distribution-stats {
  padding: 10px;
  font-size: 0.9em;
  text-align: left;
}


input[type="checkbox"][id^="marketing--activities-form-distribution_"] {
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
}
label[for^="marketing--activities-form-distribution_"], div.budgetinfo--distribution, div.marketingitem--distribution {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  margin-bottom: 0;
  filter: saturate(0);
  opacity: 0.6;
  transition: 300ms;
  cursor: pointer;
}
div.budgetinfo-distributions {
  margin-top: 20px;
}

label[for="marketing--activities-form-distribution_website"], div.budgetinfo--distribution.website {
  background-image: url(../images/ico-website.png);
}
label[for="marketing--activities-form-distribution_facebook"], div.budgetinfo--distribution.facebook {
  background-image: url(../images/ico-facebook.svg);
}
label[for="marketing--activities-form-distribution_googlemybusiness"], div.budgetinfo--distribution.googlemybusiness {
  background-image: url(../images/ico-googlemybusiness.png);
}
label[for="marketing--activities-form-distribution_instagram"], div.budgetinfo--distribution.instagram {
  background-image: url(../images/ico-instagram.png);
}
label[for="marketing--activities-form-distribution_twitter"], div.budgetinfo--distribution.twitter {
  background-image: url(../images/ico-twitter.svg);
}
label[for="marketing--activities-form-distribution_youtube"], div.budgetinfo--distribution.youtube {
  background-image: url(../images/ico-youtube.png);
}
label[for="marketing--activities-form-distribution_vimeo"], div.budgetinfo--distribution.vimeo {
  background-image: url(../images/ico-vimeo.png);
}
label[for="marketing--activities-form-distribution_tiktok"], div.budgetinfo--distribution.tiktok {
  background-image: url(../images/ico-tiktok.png);
}
label[for="marketing--activities-form-distribution_pinterest"], div.budgetinfo--distribution.pinterest {
  background-image: url(../images/ico-pinterest.png);
}
label[for="marketing--activities-form-distribution_snapchat"], div.budgetinfo--distribution.snapchat {
  background-image: url(../images/ico-snapchat.png);
}
label[for="marketing--activities-form-distribution_linkedin"], div.budgetinfo--distribution.linkedin {
  background-image: url(../images/ico-linkedin.png);
}
label[for="marketing--activities-form-distribution_xing"], div.budgetinfo--distribution.xing {
  background-image: url(../images/ico-xing.png);
}
label[for="marketing--activities-form-distribution_tumblr"], div.budgetinfo--distribution.tumblr {
  background-image: url(../images/ico-tumblr.png);
}
label[for="marketing--activities-form-distribution_flickr"], div.budgetinfo--distribution.flickr {
  background-image: url(../images/ico-flickr.png);
}
label[for="marketing--activities-form-distribution_ebaykleinanzeigen"], div.budgetinfo--distribution.ebaykleinanzeigen {
  background-image: url(../images/ico-ebaykleinanzeigen.png);
}
input[type="checkbox"][id^="marketing--activities-form-distribution_"]:checked + label {
  filter: saturate(1);
  opacity: 1;
}
div.budgetinfo-distributions .label {
  margin-bottom: 4px;
}
div.budgetinfo--distribution, div.marketingitem--distribution {
  margin-right: 10px;
  filter: none;
  opacity: 1;
  cursor: default;
  font-weight: 700;
  color: #FFFFFF !important;
}

div.marketingitem--scheduledtime {
  display: block;
}

div.marketingitem--distribution {
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 14px;
  text-align: center;
  color: #FFFFFF !important;
  margin-right: 5px;
  cursor: pointer !important;
}

#marketing--activities-form-distributions-connections li {
  padding: 10px 0;
  margin: 0;
}
#marketing--activities-form-distributions-connections li img {
  margin: 0 10px 0 0;
  vertical-align: middle;
  object-fit: contain;
}
input[type="checkbox"][id^="marketing--activities-form-distribution_"]:checked + label {
  filter: saturate(1);
  opacity: 1;
}
input[type="checkbox"][id^="marketing--activities-form-distribution_"]:checked + label::after {
  content: '✓';
  position: absolute;
  bottom: -5px;
  right: -2px;
  border: 1px solid #009900;
  display: block;
  width: 16px;
  height: 16px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-radius: 12px;
  line-height: 15px;
  background: #FFFFFF;
  color: #009900;
}
input[type="checkbox"][id^="marketing--activities-form-distribution_"][disabled] + label {
  cursor: default;
}

#marketing--activities-form-distributions-connections {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}
#marketing--activities-form-distributions-connections li + li {
  border-top: 1px solid #CCC;
}
#marketing--activities-form-distributions-connections li i {
  color: #777;
}
#marketing--activities-form-distributions-li {
  display: none;
  margin-top: 0;
}
#marketing--activities-form-distributions {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
#fullpage[data-activity] #marketing--activities-form-distributions {
  display: flex;
  margin: 0;
  align-items: center;
  column-gap: 10px;
  row-gap: 10px;
  background: #F2F2F2;
  padding: 10px;
  border-radius: 3px;
  border-bottom: 1px solid #999;
}
#marketing--activities-form-distributions li {
  margin: 0;
    margin-right: 15px;
    text-align: center;
    display: flex;
    align-items: center;
}
#marketing--activities-form-distributions li label {
  font-size: 24px;
}
#fullpage[data-activity] #marketing--activities-form-distributions li {
    margin-right: 0;
    margin-bottom: 0;
    padding: 5px 15px;
    border-radius: 3px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
}
#fullpage[data-activity] #marketing--activities-form-distributions li.marketing--activities-form-distribution-checked {
  order: -1;
}
#fullpage[data-activity] #marketing--activities-form-distributions li label {
  margin: 10px auto 10px;
}
#marketing--activities-form-distributions li a {
  display: block;
  text-align: center;
  border-radius: 3px;
  background: #999;
  color: #FFFFFF;
  margin-bottom: 5px;
  font-size: 0.9em;
  padding: 4px 8px;
}
#marketing--activities-form-distributions li a:hover {
  background: #666;
}
#fullpage[data-status="ready"] #marketing--activities-form-distributions li, #fullpage[data-status="closed"] #marketing--activities-form-distributions li {
    padding: 10px 5px 5px 10px;
    border-radius: 3px;
    border: 1px solid #EEE;
}
#fullpage[data-status="ready"] #marketing--activities-form-distributions li a, #fullpage[data-status="closed"] #marketing--activities-form-distributions li a {
  margin: 0 5px;
}
#fullpage[data-status="ready"] #marketing--activities-form-distributions li label, #fullpage[data-status="closed"] #marketing--activities-form-distributions li label {
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
  cursor: default;
}
#marketing--activities-form-distributions::after {
  display: block;
  content: '';
  clear: both;
}

#marketing--activities-form label[for="marketing--activities-form-publishdate-range"], #marketing--activities-form label[for="marketing--activities-form-viatext-toggle"], #marketing--activities-form label[for="marketing--activities-form-messagetocybox-toggle"] {
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  color: #000;
}
#marketing--activities-form label[for="marketing--activities-form-viatext-toggle"], #marketing--activities-form label[for="marketing--activities-form-messagetocybox-toggle"] {
  font-weight: 400;
  font-size: 16px;
}


#marketing--activities-form-quickbuttons {
  display: flex;
  padding: 25px 0;
  margin-bottom: 12px;
  column-gap: 15px;
  row-gap: 20px;
  border-top: 1px solid #EEE;
  border-bottom: 1px solid #EEE;
  flex-wrap: wrap;
}
#marketing--activities-form-quickbuttons button {
  position: relative;
  width: auto;
  line-height: 40px;
  padding: 10px 20px 10px 75px;
  font-size: 1em;
  border-radius: 200px;
  border: 1px solid #CCC;
  background: #FFFFFF;
  background-repeat: no-repeat, no-repeat;
  background-size: 20px 20px, auto 100%;
  background-position: 20px 20px, left center;
  color: #646A70;
  font-weight: 600;
  text-align: left;
  box-shadow: none;
}
#marketing--activities-form-quickbuttons button small {
  font-size: 0.83em;
  font-weight: 400;
}
#marketing--activities-form-quickbuttons button.attachment {
  background-image: url(../images/bu-attachment.svg), url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAgMjAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgZmlsbD0iIzY1NkE3MCIgY3g9IjEwMCIgY3k9IjEwMCIgcj0iMTAwIi8+DQo8L3N2Zz4NCg==);
}
#marketing--activities-form-quickbuttons button.photo {
  background-image: url(../images/bu-photo.svg), url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAgMjAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgZmlsbD0iIzY1NkE3MCIgY3g9IjEwMCIgY3k9IjEwMCIgcj0iMTAwIi8+DQo8L3N2Zz4NCg==);
}
#marketing--activities-form-quickbuttons button.video {
  background-image: url(../images/bu-video.svg), url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAgMjAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgZmlsbD0iIzY1NkE3MCIgY3g9IjEwMCIgY3k9IjEwMCIgcj0iMTAwIi8+DQo8L3N2Zz4NCg==);
}
#marketing--activities-form-quickbuttons button.audio {
  background-image: url(../images/bu-audio.svg), url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAgMjAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgZmlsbD0iI0JEMTgxOCIgY3g9IjEwMCIgY3k9IjEwMCIgcj0iMTAwIi8+DQo8L3N2Zz4NCg==);
}
#marketing--activities-form-quickbuttons button.text {
  background-image: url(../images/bu-text-quick.svg), linear-gradient(#FFFFFF,#FFFFFF);
  padding-left: 55px;
}

#marketing--activities-form-quickbuttons-noinfos {
  width: 100%;
  margin-top: 25px;
}
#fullpage[data-activity] #marketing--activities-form-quickbuttons-noinfos, #fullpage[data-activity] #marketing--activities-form-quickbuttons {
  display: none;
}


#marketing--activities-form-startdate, #marketing--activities-form-enddate {
  width: 180px;
}
#marketing--activities-form-starttime, #marketing--activities-form-endtime {
  width: 150px;
  margin-left: 5px;
}
#marketing--activities-form-publishdate-end {
display: inline-block;
}
#marketing--activities-form-publishdate-end::before {
  display: block;
  padding: 5px 0;
  content: 'bis';
  font-weight: 700;
  color: #FAB116;
  font-size: 11px;
  text-transform: uppercase;
}

#money {
  padding-top: 10px;
  font-size: 0.83em;
  font-style: italic;
  display: block;
}
#money:empty {
  display: none;
}
.marketing--activities-fullpage-status {
  display: block;
  background: #F2F2F2;
  padding: 10px;
  margin: -20px -20px 20px -20px;
  position: sticky;
  top: -20px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  z-index: 100;
}
#preview-popup .marketing--activities-fullpage-status {
  margin: 0;
}
.marketing--activities-fullpage-status small {
  display: block;
  line-height: 120%;
}
.marketing--activities-fullpage-status input[type="radio"] {
  margin: 10px 5px 5px 0;
}
.marketing--activities-fullpage-status input[type="radio"] + label {
  margin-right: 15px;
}
.marketing--activities-fullpage-status svg {
  width: auto;
  height: 1em;
  margin-left: 10px;
  vertical-align: middle;
  color: #666;
  cursor: pointer;
}
.marketing--activities-fullpage-status.draft {
  border-left: 3px solid var(--colorDraft);
  background: var(--colorDraftBright);
}
.marketing--activities-fullpage-status.paused {
  border-left: 3px solid var(--colorPaused);
  background: var(--colorPausedBright);
}
.marketing--activities-fullpage-status.proposal {
  border-left: 3px solid var(--colorProposal);
  background: var(--colorProposalBright);
}
.marketing--activities-fullpage-status.proposal button {
  background: var(--colorProposal);
}
.marketing--activities-fullpage-status.proposal button[data-action="selfedit-proposal"] {
  color: var(--colorProposal);
  background: transparent;
}
.marketing--activities-fullpage-status.ready button {
  background: var(--colorReady);
}
.marketing--activities-fullpage-status.ready button[data-action="selfedit-proposal"] {
  color: var(--colorReady);
  background: transparent;
}
.marketing--activities-fullpage-status.ready .marketing--activities-form-distribution-checked label, .marketing--activities-fullpage-status.releaserequest .marketing--activities-form-distribution-checked label {
  pointer-events: none;
}
.marketing--activities-fullpage-status.ready .marketing--activities-form-distribution-checked input[type="checkbox"][id^="marketing--activities-form-distribution_"]:checked + label::after, .marketing--activities-fullpage-status.releaserequest .marketing--activities-form-distribution-checked input[type="checkbox"][id^="marketing--activities-form-distribution_"]:checked + label::after {
  content: none;
}
.marketing--activities-fullpage-status.blocked {
  border-left: 3px solid var(--colorBlocked);
  background: var(--colorBlockedBright);
}
.marketing--activities-fullpage-status.releaserequest {
  border-left: 3px solid var(--colorReleaseRequest);
  background: var(--colorReleaseRequestBright);
}
.marketing--activities-fullpage-status.releaserequest button {
  background: var(--colorReleaseRequest);
}
.marketing--activities-fullpage-status.releaserequest button[data-action="selfedit-proposal"] {
  color: var(--colorReleaseRequest);
  background: transparent;
}
.marketing--activities-fullpage-status.processing {
  border-left: 3px solid var(--colorProcessing);
  background: var(--colorProcessingBright);
}
.marketing--activities-fullpage-status.ready {
  border-left: 3px solid var(--colorReady);
  background: var(--colorReadyBright);
}
.marketing--activities-fullpage-status.cancelled {
  border-left: 3px solid var(--colorCancelled);
  background: var(--colorCancelledBright);
}
.marketing--activities-fullpage-status.cancelled + #marketing--activities-form,
.marketing--activities-fullpage-status.closed + #marketing--activities-form {
  opacity: 0.4;
  cursor: default !important;
  pointer-events: none;
  user-select: none;
}
.marketing--activities-fullpage-status.open,
.marketing--activities-fullpage-status.closed {
  border-left: 3px solid var(--colorOpen);
  background: var(--colorOpenBright);
}


.marketing--activities-fullpage-status span {
  font-weight: bold;
}
.marketing--activities-fullpage-status.draft span {
  color: var(--colorDraft);
}
.marketing--activities-fullpage-status.paused span, .marketing--activities-fullpage-status.proposal span {
  color: var(--colorPaused);
}
.marketing--activities-fullpage-status.blocked span {
  color: var(--colorBlocked);
}
.marketing--activities-fullpage-status.releaserequest span {
  color: var(--colorReleaseRequest);
}
.marketing--activities-fullpage-status.processing span {
  color: var(--colorProcessing);
}
.marketing--activities-fullpage-status.ready span {
  color: var(--colorReady);
}
.marketing--activities-fullpage-status.cancelled span {
  color: var(--colorCancelled);
}
.marketing--activities-fullpage-status.open span {
  color: var(--colorOpen);
}
.marketing--activities-fullpage-status.closed span {
  color: var(--colorClosed);
}
.marketing--activities-fullpage-status div.note {
  width: fit-content;
  margin: 10px 0 0 0;
  padding: 5px 10px;
  border: 1px solid #CCC;
  border-radius: 3px;
  background-color: rgba(255,255,255,0.6);
  font-family: 'Average Sans', 'Open Sans', sans-serif;
  font-size: 1.05em;
  color: #000;
  display: inline-block;
}
/*.marketing--activities-fullpage-status div.note::before {
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
  content: '!';
  line-height: 20px;
  width: 20px;
  height: 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  text-align: center;
  background: #999;
  color: #FFFFFF;
}*/
.marketing--activities-fullpage-status div.note button {
  display: block;
  padding: 0;
  margin: 5px 0 0 0;
  font-size: inherit;
  background: transparent;
  border: 0;
}
.marketing--activities-fullpage-status div.note button:hover, .marketing--activities-fullpage-status div.note button:active, .marketing--activities-fullpage-status div.note button:focus {
  transform: none;
}
.marketing--activities-fullpage-status div.note button:hover {
  text-decoration: underline;
}
.marketing--activities-fullpage-status div.note:empty {
  display: none;
}
.marketing--activities-fullpage-status button {
  display: inline-block;
  width: auto;
  padding: 5px 15px;
  box-shadow: 0 0 0;
  margin: 10px 10px 0 0;
}
.marketing--activities-fullpage-status.blocked div.note { border-color: var(--colorBlocked); }
.marketing--activities-fullpage-status.blocked div.note::before { background: var(--colorBlocked); }
.marketing--activities-fullpage-status.blocked div.note button { color: var(--colorBlocked); }
.marketing--activities-fullpage-status.processing div.note { border-color: var(--colorProcessing); }
.marketing--activities-fullpage-status.processing div.note::before { background: var(--colorProcessing); }
.marketing--activities-fullpage-status.processing div.note button { color: var(--colorProcessing); }
.marketing--activities-fullpage-status.cancelled div.note { border-color: var(--colorCancelled); }
.marketing--activities-fullpage-status.cancelled div.note::before { background: var(--colorCancelled); }
.marketing--activities-fullpage-status.cancelled div.note button { color: var(--colorCancelled); }
.marketing--activities-fullpage-status.closed div.note { border-color: var(--colorClosed); }
.marketing--activities-fullpage-status.closed div.note::before { background: var(--colorClosed); }
.marketing--activities-fullpage-status.closed div.note button { color: var(--colorClosed); }
.marketing--activities-fullpage-status.open div.note { border-color: var(--colorOpen); }
.marketing--activities-fullpage-status.open div.note::before { background: var(--colorOpen); }
.marketing--activities-fullpage-status.open div.note button { color: var(--colorOpen); }
.marketing--activities-fullpage-status.draft div.note { border-color: var(--colorDraft); }
.marketing--activities-fullpage-status.draft div.note::before { background: var(--colorDraft); }
.marketing--activities-fullpage-status.draft div.note button { color: var(--colorDraft); }
.marketing--activities-fullpage-status.proposal div.note { border-color: var(--colorProposal); }
.marketing--activities-fullpage-status.proposal div.note::before { background: var(--colorProposal); }
.marketing--activities-fullpage-status.proposal div.note button { color: var(--colorProposal); }
.marketing--activities-fullpage-status.ready div.note { border-color: var(--colorReady); }
.marketing--activities-fullpage-status.ready div.note::before { background: var(--colorReady); }
.marketing--activities-fullpage-status.ready div.note button { color: var(--colorReady); }
.marketing--activities-fullpage-status.releaserequest div.note { border-color: var(--colorReleaseRequest); }
.marketing--activities-fullpage-status.releaserequest div.note::before { background: var(--colorReleaseRequest); }
.marketing--activities-fullpage-status.releaserequest div.note button { color: var(--colorReleaseRequest); }
.marketing--activities-fullpage-status.paused div.note { border-color: var(--colorPaused); }
.marketing--activities-fullpage-status.paused div.note::before { background: var(--colorPaused); }
.marketing--activities-fullpage-status.paused div.note button { color: var(--colorPaused); }

#marketing--activities-fullpage-creation {
  display: block;
  margin-bottom: 1rem;
  float: left;
}
#marketing--activities-fullpage-creation:before {
  content: 'ERSTELLT AM';
  display: block;
  font-weight: 700;
  color: #FAB116;
  font-size: 11px;
}
#marketing--activities-fullpage-creation span {
  display: block;
}

#marketing--activities-fullpage-lastchange {
  width: 50%;
  float: right;
}
#marketing--activities-fullpage-lastchange:before {
  content: 'LETZTE ÄNDERUNG';
  display: block;
  font-weight: 700;
  color: #FAB116;
  font-size: 11px;
}
#marketing--activities-fullpage-lastchange span {
  display: block;
}

.marketing--activities-fullpage-filelist {
  margin-top: 30px;
}
.marketing--activities-fullpage-filelist:before {
  content: 'DATEILISTE';
  display: block;
  font-weight: 700;
  color: #bf860d;
  font-size: 11px;
  margin-bottom: 5px;
}
.marketing--activities-fullpage-filelist ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.marketing--activities-fullpage-filelist ul li {
  display: flex;
  padding: 5px 5px 5px 23px;
  margin: 10px 0;
  border-radius: 2px;
  background: #F2F2F2;
  background-size: 12px auto;
  background-position: 5px 7px;
  background-repeat: no-repeat;
  background-image: url(../images/ico-file.svg);
  justify-content: space-between;
  font-size: 0.9rem;
}

#marketing--activities-form label[for="marketing--activities-form-notice"] {
  color: #333;
}

#marketing--activities-fullpage-history {
  font-size: 0.9em;
}
#marketing--activities-fullpage-history.expanded::before {
  content: 'Änderungsverlauf';
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    color: #999;
    font-size: 11px;
    text-transform: uppercase;
}
#marketing--activities-fullpage-history ul {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 4px;
}
#marketing--activities-fullpage-history ul li {
  position: relative;
  display: block;
  font-size: 0.9rem;
  flex-wrap: wrap;
  display: none;
}
#marketing--activities-fullpage-history ul li:first-child, #marketing--activities-fullpage-history ul li:last-child {
  display: block;
}
#marketing--activities-fullpage-history ul li:first-child::before {
  content: 'LETZTE ÄNDERUNG';
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  color: #999;
  font-size: 11px;
}
#marketing--activities-fullpage-history ul li:last-child::before {
  content: 'ERSTELLUNG';
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  color: #999;
  font-size: 11px;
}
#marketing--activities-fullpage-history::after {
  display: block;
    margin: 15px 0 5px 0;
    padding: 10px;
    border-radius: 3px;
    content: 'Änderungsverlauf anzeigen';
    cursor: pointer;
    text-align: center;
    border: 1px solid #CCC;
    color: #999;
    border-radius: 100px;
}
#marketing--activities-fullpage-history::after:hover {
  color: #000;
}
#marketing--activities-fullpage-history ul li + li {
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #EEE;
}
#marketing--activities-fullpage-history .history-date {
  display: inline-block;
}
#marketing--activities-fullpage-history .history-user {
  display: inline-block;
  margin-left: 15px;
  font-weight: 600;
}
#marketing--activities-fullpage-history .history-user::after {
  display: inline-block;
  font-weight: 600;
  padding: 3px 8px;
  font-size: 0.9em;
  text-align: center;
  border-radius: 3px;
  color: #FFF;
  margin-left: 10px;
  background: #999;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: bottom;
  content: none;
}
#marketing--activities-fullpage-history ul li.history-role1 .history-user::after {
  content: 'Partner';
}
#marketing--activities-fullpage-history ul li.history-role0 .history-user::after {
  content: 'Cybox GmbH';
}
#marketing--activities-fullpage-history li.history-rolesystem {
  width: calc( 100% - 30px ) !important;
  max-width: none !important;
  background: #ffebbf !important;
  border: 0 !important;
  font-weight: 600; !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
#marketing--activities-fullpage-history li.history-rolesystem::after {
  display: none;
}
#marketing--activities-fullpage-history .history-text {
  display: block;
  margin-left: 15px;
}
#marketing--activities-fullpage-history .history-status {
  display: inline-block;
  font-weight: 600;
  padding: 3px 8px;
  font-size: 0.9em;
  text-align: center;
  border-radius: 3px;
  color: #FFF;
  margin-left: 10px;
  background: #999;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: bottom;
}
#marketing--activities-fullpage-history li.history-rolesystem .history-status {
  display: none;
}
#marketing--activities-fullpage-history .history-status.draft {
  background: var(--colorDraft);
}
#marketing--activities-fullpage-history .history-status.open {
  background: var(--colorOpen);
}
#marketing--activities-fullpage-history .history-status.processing {
  background: var(--colorProcessing);
}
#marketing--activities-fullpage-history .history-status.ready {
  background: var(--colorReady);
}
#marketing--activities-fullpage-history .history-status.paused {
  background: var(--colorPaused);
}
#marketing--activities-fullpage-history .history-status.blocked {
  background: var(--colorBlocked);
}
#marketing--activities-fullpage-history .history-status.releaserequest {
  background: var(--colorReleaseRequest);
}
#marketing--activities-fullpage-history .history-status.cancelled {
  background: var(--colorCancelled);
}
#marketing--activities-fullpage-history .history-status.proposal {
  background: var(--colorProposal);
}
#marketing--activities-fullpage-history .history-status.closed {
  background: var(--colorClosed);
}
#marketing--activities-fullpage-history .history-status-note {
  position: relative;
  display: block;
  grid-column: span 3;
  padding: 10px;
  margin: 8px 0 3px 0;
  background: #F2F2F2;
  box-sizing: border-box;
  border: 0;
  border-radius: 10px;
}
#marketing--activities-fullpage-history.expanded ul li::after {
  position: absolute;
  top: 10px;
  left: 0;
  width: 15px;
  height: 15px;
  background-color: #f2f2f2;
  transform-origin: top;
  transform: translate(0%, 80%) rotate(45deg);
  content: '';
}
#marketing--activities-fullpage-history.expanded ul {
  padding: 20px;
  border: 1px solid #CCC;
}
#marketing--activities-fullpage-history.expanded ul li {
  padding: 15px;
  background: #F2F2F2;
  width: fit-content;
  max-width: 80%;
  border-radius: 10px;
  display: block;
}
#marketing--activities-fullpage-history.expanded ul li .history-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  width: fit-content;
}
#marketing--activities-fullpage-history.expanded ul li.history-role0, #marketing--activities-fullpage-history.expanded ul li.history-role1 {
  margin-left: auto;
}
#marketing--activities-fullpage-history.expanded ul li.history-role0::after, #marketing--activities-fullpage-history.expanded ul li.history-role1::after {
  left: auto;
  right: -11px;
}
#marketing--activities-fullpage-history.expanded ul li.history-rolesystem .history-title {
  display: none;
}
#marketing--activities-fullpage-history.expanded ul li:first-child::before,
#marketing--activities-fullpage-history.expanded ul li:last-child::before {
  content: none;
}
#marketing--activities-fullpage-history.expanded ul li:first-child {
  margin-bottom: 0;
}
#marketing--activities-fullpage-history.expanded::after {
  content: none;
}
#marketing--activities-fullpage-history.expanded .history-status-note {
  background: rgba(255,255,255,0.7);
}
#marketing--activities-fullpage-history.expanded .history-status-note i {
  color: #999;
}
#marketing--activities-fullpage-history.expanded ul li.history-rolesystem .history-status-note {
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
  background: transparent;
}

#fullpage table {
  width: 100%;
  padding: 0;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}
#fullpage th {
  padding: 0 5px 10px 0;
  font-size: 0.83em;
  font-weight: bold;
  text-align: left;
}
#fullpage td {
  padding: 5px;
  border: 0;
  background: #FFF;
  background: #F2F2F2;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  font-size: 0.9rem;
  color: #333;
  text-align: left;
}
#fullpage td.link {
  padding-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
#fullpage td.link button {
  display: none;
}
#fullpage tr:hover td {
  background: #FFFFFF;
}

#fullpage td.link svg, #fullpage td.nolink svg {
  width: 12px;
  margin-right: 10px;
  vertical-align: middle;
  color: #666;
}
#fullpage .size {
  padding-right: 15px;
  text-align: right;
}
#fullpage td span {
  display: none;
}
#fullpage td.buttons {
  text-align: right;
}
#fullpage td.buttons button {
  display: inline-block;
  width: auto;
  margin-left: 10px;
  padding: 5px;
  line-height: 20px;
  background: transparent;
  box-shadow: 0 0 0;
  color: #666666;
}
#fullpage td.buttons button svg {
  height: 20px;
  vertical-align: middle;
}

.marketing--activities-fullpage-appointments {
  margin-top: 30px;
}
.marketing--activities-fullpage-appointments:before {
  content: 'BESTÄTIGTE TERMINE';
  display: block;
  font-weight: 700;
  color: #FAB116;
  font-size: 11px;
  margin-bottom: 5px;
}
.marketing--activities-fullpage-appointments ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.marketing--activities-fullpage-appointments ul li {
  padding: 5px 10px;
  margin: 10px 0;
  font-size: 0.9em;
  background: #F2F2F2;
  border-radius: 2px;
}
.marketing--activities-fullpage-appointmentrequests {
  margin-top: 30px;
}
.marketing--activities-fullpage-appointmentrequests:before {
  content: 'TERMINANFRRAGEN';
  display: block;
  font-weight: 700;
  color: #FAB116;
  font-size: 11px;
  margin-bottom: 5px;
}
.marketing--activities-fullpage-appointmentrequests ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.marketing--activities-fullpage-appointmentrequests ul li {
  padding: 5px 10px;
  margin: 10px 0;
  font-size: 0.9em;
  background: #F2F2F2;
  border-radius: 2px;
}
.marketing--activities-fullpage-tasks {
  margin-top: 30px;
  margin-bottom: 40px;
}
.marketing--activities-fullpage-tasks:before {
  content: 'BEREITS BEGONNE ARBEITSPOSITIONEN';
  display: block;
  font-weight: 700;
  color: #FAB116;
  font-size: 11px;
  margin-bottom: 5px;
}
.marketing--activities-fullpage-tasks ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.marketing--activities-fullpage-tasks ul li {
  padding: 5px 10px;
  margin: 10px 0;
  font-size: 0.9em;
  background: #F2F2F2;
  border-bottom: 2px solid white;
}
.marketing--activities-fullpage-tasks ul li span {
  color: #333;
  float: right;
}

/* Appointments */
#marketing--appointments-overview {
  padding: 20px 10px 70px 10px;
  max-height: calc( var(--app-height) - 110px );
}
#marketing--appointments-overview .content-card {
  margin: 0;
}
#marketing--appointments-overview .grouped-title {
  position: relative;
  display: block;
  color: #666;
  font-weight: bold;
  font-size: 0.8em;
  margin: 15px 0 10px 0;
  text-align: center;
}
#marketing--appointments-overview .grouped-title:first-child {
  margin-top: 0;
}
#marketing--appointments-overview .item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  padding: 20px 20px 20px 17px;
  font-size: 0.9rem;
  background: #FFF;
  border-left: 3px solid #FFF;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  margin-bottom: 15px;
  cursor: pointer;
}
#marketing--appointments-overview .item:after {
  display: block;
  content: '';
  clear: both;
}
#marketing--appointments-overview .item.confirmed {
  border-left-color: #008000;
}
#marketing--appointments-overview .item.requested {
  border-left-color: #FAB116;
}
#marketing--appointments-overview .item.requested:before {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  content: '';
  background: url(../images/ico-requested.svg) no-repeat;
  opacity: 1;
}
#marketing--appointments-overview .item.recall:before {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  content: '';
  background: url(../images/ico-phone.svg) no-repeat;
  opacity: 1;
}

#marketing--appointments-overview .item .title {
  display: block;
  width: 100%;
  font-weight: 600;
}
#marketing--appointments-overview .item .date, #marketing--appointments-overview .item .location,
#marketing--appointments-overview .item .phone, #marketing--appointments-overview .item .person {
  display: block;
  width: 100%;
  font-style: italic;
  color: #999;
  padding: 0 0 0 19px;
  margin-top: 5px;
  background: url(../images/ico-appointment.svg) no-repeat 0 2px;
  background-size: auto 16px;
  min-height: 16px;
  box-sizing: border-box;
}
#marketing--appointments-overview .item .location {
  background: url(../images/ico-location.svg) no-repeat 0 2px;
  background-size: auto 16px;
  min-height: 18px;
}
#marketing--appointments-overview .item .phone {
  background: url(../images/ico-phone.svg) no-repeat 0 2px;
  background-size: auto 14px;
}
#marketing--appointments-overview .item .person {
  background: url(../images/ico-user.svg) no-repeat 0 2px;
  background-size: auto 14px;
}

#marketing--appointments-overview .item .details {
  display: none;
  width: 100%;
  padding-top: 10px;
}

#marketing--appointments-overview .item .details .details-buttons {
text-align: right;
}

#marketing--appointments-overview .item .details .details-buttons button.loading {
animation: rotate 1.5s infinite linear !important;
transform-origin: 52% 58%;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
#marketing--appointments-overview .item .details .details-buttons button,
.marketing--activities-fullpage-appointmentrequests button,
.marketing--activities-fullpage-filelist button {
  width: 20px;
  height: auto;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
#marketing--appointments-overview .item .details .details-buttons button + button,
.marketing--activities-fullpage-appointmentrequests button + button,
.marketing--activities-fullpage-filelist button + button {
  margin-left: 25px;
}
#marketing--appointments-overview .item .details .details-buttons button svg,
.marketing--activities-fullpage-appointmentrequests button svg,
.marketing--activities-fullpage-filelist button svg {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 19px;
  vertical-align: middle;
  color: #666;
}
#marketing--appointments-overview .item .details .details-buttons button:hover, #marketing--appointments-overview .item .details .details-buttons button:active, 
.marketing--activities-fullpage-appointmentrequests button:hover, .marketing--activities-fullpage-appointmentrequests button:active,
.marketing--activities-fullpage-filelist button:hover, .marketing--activities-fullpage-filelist button:active {
  transform: none !important;
  box-shadow: none;
}
#marketing--appointments-overview .item .details .details-buttons button:hover svg, #marketing--appointments-overview .item .details .details-buttons button:focus svg, #marketing--appointments-overview .item .details .details-buttons button:active svg, 
.marketing--activities-fullpage-appointmentrequests button:hover svg, .marketing--activities-fullpage-appointmentrequests button:focus svg, .marketing--activities-fullpage-appointmentrequests button:active svg,
.marketing--activities-fullpage-filelist button:hover svg, .marketing--activities-fullpage-filelist button:focus svg, .marketing--activities-fullpage-filelist button:active svg {
  color: #FAB116;
}
#marketing--appointments-overview .item.closed .details button[data-action="addfile"], #marketing--appointments-overview .item.closed .details button[data-action="addappointment"], #marketing--appointments-overview .item.closed .details button[data-action="pause"], #marketing--appointments-overview .item.closed .details button[data-action="cancel"], #marketing--appointments-overview .item.closed .details button[data-action="notice"],
#marketing--appointments-overview .item.cancelled .details button[data-action="addfile"], #marketing--appointments-overview .item.cancelled .details button[data-action="addappointment"], #marketing--appointments-overview .item.cancelled .details button[data-action="pause"], #marketing--appointments-overview .item.blocked .details button[data-action="pause"], #marketing--appointments-overview .item.cancelled .details button[data-action="cancel"], #marketing--activities-overview .item.cancelled .details button[data-action="notice"] {
  display: none;
}




#marketing--appointments-form-request input[type="submit"] {
  display: none;
}
#marketing--appointments-form-request input[name="date"] {
  width: 60%;
}
#marketing--appointments-form-request input[name="time"] {
  width: calc( 40% - 10px );
  margin-left: 10px;
}
#marketing--appointments-form-request input[name="postcode"] {
  width: 30%;
}
#marketing--appointments-form-request input[name="city"] {
  width: calc( 70% - 10px );
  margin-left: 10px;
}

/* Contact */
#contact--contact-form-requestappointment input[name="date"] {
  width: 60%;
}
#contact--contact-form-requestappointment input[name="time"] {
  width: calc( 40% - 10px );
  margin-left: 10px;
}
#contact--contact-form-requestappointment input[name="postcode"] {
  width: 30%;
}
#contact--contact-form-requestappointment input[name="city"] {
  width: calc( 70% - 10px );
  margin-left: 10px;
}
#contact--contact-form-requestappointment + div.fullpage-toolbar {
display: block;
}

#contact--contact-form-recall input[name="date"] {
  width: 60%;
}
#contact--contact-form-recall input[name="time"] {
  width: calc( 40% - 10px );
  margin-left: 10px;
}
#contact--contact-form-recall + div.fullpage-toolbar {
display: block;
}

/* Mail */
#contact--contact-form-mail textarea[name="message"] {
  height: 250px;
}

#contact--contact-form-mail + div.fullpage-toolbar {
display: block;
}

/* END -- Module: Marketing ---------------------------- */



/* BEGIN -- Module: login ----------------------------- */

/* Account overview */
#login--accounts-overview {
}
#login--accounts-overview .item {
  margin: 20px 0;
  padding: 10px 20px;
  font-size: 0.9rem;
  background: #EFEFEF;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  margin-bottom: 15px;
  line-height: 140%;
  cursor: pointer;
}
#login--accounts-overview .item:hover {
  transform: translate(0,1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#login--accounts-overview .item .icon {
  height: 3em;
  padding-right: 20px;
  color: #FAB116;
  float: left;
  display: inline-block;
}
#login--accounts-overview .item:hover .icon {
  color: #ffba0a;
}
#login--accounts-overview .item .icon svg {
  max-height: 100%;
}
#login--accounts-overview .item .name {
  display: block;
  font-weight: bold;
}
#login--accounts-overview .item .email {
  display: block;
  color: #666;
  font-style: italic;
}

/* Login */
#login--form-login input[name="customer_no"] {
  -moz-appearance:textfield;
  outline: none;
}
#login--form-login input[name="customer_no"]::-webkit-outer-spin-button, #login--form-login input[name="customer_no"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#login--accounts-abort, #login--form-newaccount-abort, #login--form-verifyaccount-abort {
  margin-top: 10px;
  background-color: #FFF;
  box-shadow: none;
  color: #999;
}
#login--accounts-abort:active, #login--form-newaccount-abort:active, #login--form-verifyaccount-abort:active {
  transform: none;
}

/* Verify account */
#login--form-verifyaccount input[name="pin"] {
  font-size: 2rem;
  text-align: center;
  letter-spacing: 10px;
  outline: none;
}

/* END -- Module: login ----------------------------- */


/* BEGIN -- Module: budget -------------------------- */
h1.abstand {
  margin-top: 12px;
  margin-left: 12px;
}
h2 {
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 0.7em;
}
.label {
  min-width: 120px;
  padding: 1px 0;
  font-weight: bold;
  display: inline-block;
}
.zeitraum {
  padding-bottom: 0.4em;
  display: inline-block;
}
div.budget-statusbar {
  position: relative;
  height: 10px;
  margin-top: 8px;
  border: 1px solid #CCC;
  background: #EEE;
}
div.budget-bar-used {
  position: relative;
  width: 0;
  height: 8px;
  background: #666;
  transition: 300ms;
}
div.budget-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 40px;
}
div.budget-grid-chart {
  grid-row: span 2;
}
#polarchartpartinfo {
  width: 400px;
  max-width: 100%;
  height: 400px;
  margin: 0 auto 0;
  aspect-ratio: 1;
}
/* END -- Module: budget ---------------------------- */


/* BEGIN -- Module: notifications -------------------------- */
#notifications--notifications-overview {
  padding: 10px 10px 70px 10px;
  text-align: center;
  max-height: calc( var(--app-height) - 110px );
}
#notifications--notifications-overview .content-card {
  margin: 0;
}
#notifications--notifications-overview .item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  padding: 10px 40px 10px 50px;
  font-size: 0.9rem;
  background: #FFF;
  border-left: 3px solid #FFF;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  margin-bottom: 10px;
  text-align: left;
  overflow: hidden;
  transition: height 2s, transform 2s;
}
#notifications--notifications-overview .item[data-date], #notifications--notifications-overview .item[data-activity] {
  cursor: pointer;
}
#notifications--notifications-overview .item[data-date]:before, #notifications--notifications-overview .item[data-activity]:before {
display: block;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 20px;
    text-align: center;
    content: '';
    background: url(/shared/images/external-link-alt.svg) no-repeat center;
    background-size: 12px 12px;
    opacity: 0.4;
/*
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: contain;
}
#notifications--notifications-overview .item.blocked:before {
  content: '';
  background-image: url(../images/ico-notification-blocked.svg);
}
#notifications--notifications-overview .item.closed:before {
  content: '';
  background-image: url(../images/ico-notification-closed.svg);*/
}
#notifications--notifications-overview .item.highlight {
  border: 2px solid var(--colorOrange);
  border-radius: 2px;
}

#notifications--notifications-overview .item.unread:after {
display: block;
  position: absolute;
  top: calc( 50% - 6px );
  right: 14px;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: var(--colorOrange);
  content: '';
}
#notifications--notifications-overview .item button {
  position: absolute;
  top: 12px;
  left: 10px;
  width: 24px;
  height: 24px;
  padding: 2px 7px;
}
#notifications--notifications-overview .item button::after, #notifications--notifications-overview .item button::before {
  display: block;
  position: absolute;
  top: 11px;
  left: 4px;
  width: 16px;
  height: 2px;
  background: #FFF;
  transform: rotate(45deg);
  content: '';
}
#notifications--notifications-overview .item button::after {
transform: rotate(-45deg);
}
#notifications--notifications-overview .item .date {
  display: block;
  width: 100%;
  color: #666;
  font-style: italic;
  margin-bottom: 5px;
}
#notifications--notifications-overview .item .title {
  display: block;
  width: 100%;
  font-weight: 600;
  margin-bottom: 2px;
}
#notifications--notifications-overview .item .description {
  display: block;
  width: 100%;
  font-size: 0.9em;
}
#notifications--notifications-overview .item .comment {
  display: block;
  width: 100%;
  color: #666;
  font-size: 0.83rem;
  font-style: italic;
  margin-top: 7px;
}
#notifications--notifications-deleteall {
  display: none;
  position: fixed;
  max-width: 200px;
  left: 50%;
  transform: translate(-50%,0);
  bottom: 15px;

}
/* END -- Module: notifications ---------------------------- */


/* BEGIN -- Module: user -------------------------- */
#user--account-form {
  padding: 20px 20px 100px 20px;
}
#user--account-form > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#user--account-form > ul li {
  margin: 0;
  padding: 5px 0;
}
#user--account-form input[type="checkbox"] {
}
#user--account-form-mailtype {
  display: none;
}
#user--account-form-mailnotificationtype {
  max-width: 300px;
}
#user--account-form-company, #user--account-form-firstname, #user--account-form-lastname, #user--account-form-street, #user--account-form-postcode, #user--account-form-city, #user--account-form-phone, #user--account-form-email {
  display: inline-block;
  font-size: 1em;
  font-weight: normal;
  margin-bottom: 10px;
  padding: 8px 25px 8px 0;
  /*background: url(../images/ico-edit.svg) no-repeat right center;*/
  background-size: 15px auto;
  border: 0;
  border-bottom: 1px solid #EEE;
  cursor: default;
}
#user--account-form-company {
  font-weight: bold;
  background: none;
}
#user--account-form-email {
  background: none;
}
#user--account-form-email:before {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 15px;
  content: '';
  background: url(../images/ico-mail.svg) no-repeat;
  vertical-align: middle;
}
#user--account-form-firstname:focus, #user--account-form-lastname:focus, #user--account-form-street:focus, #user--account-form-postcode:focus, #user--account-form-city:focus, #user--account-form-phone:focus, #user--account-form-email:focus {
  outline: none;
  /*border-bottom-color: #FAB116;*/
}
#user--account-form-firstname, #user--account-form-lastname {
  min-width: calc( 50% - 10px );
}
#user--account-form-firstname, #user--account-form-postcode {
  margin-right: 20px;
}
#user--account-form-postcode {
  width: 80px;
}
#user--account-form-city {
  width: calc( 100% - 100px );
}
#user--account-form-company, #user--account-form-street, #user--account-form-phone, #user--account-form-email {
  width: 100%;
}
#user--account-form-phone {
  padding-left: 30px;
  background-image: url(../images/ico-phone.svg)/*, url(../images/ico-edit.svg)*/;
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: 18px auto, 15px auto;
}
#user--account-rights-overview {
  padding: 10px 10px 70px 10px;
  text-align: center;
  min-height: calc( var(--app-height) - 110px );
  background: #F2F2F2;
}
#user--account-rights-overview .item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  padding: 10px 20px 10px 20px;
  font-size: 0.9rem;
  background: #FFF;
  border-left: 3px solid #FFF;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  margin-bottom: 10px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: height 2s, transform 2s;
}
#user--account-rights-overview .item .name {
  display: block;
  width: 100%;
  font-weight: 600;
  margin-bottom: 2px;
}
#user--account-rights-overview .item .comment {
  display: block;
  width: 100%;
  color: #666;
  font-size: 0.83rem;
  font-style: italic;
  margin-top: 7px;
}
/* END -- Module: user ---------------------------- */


/* BEGIN -- Module: calendar -------------------------------- */
#calendar--calendar-container {
  max-width: 500px;
  margin: auto;
  padding-bottom: 80px;
}

.calendar--calendar {
  padding: 20px 0 0 0;
  background: #FFFFFF;
}
.calendar--calendar-days {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0 10px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(1, 40px);
  grid-row-gap: 8px;
  grid-column-gap: 16px;
  font-size: 0.83rem;
  font-weight: 600;
  color: #000;
  box-sizing: border-box;
}
.calendar--calendar-dates {
  list-style: none;
  margin: 0;
  padding: 0 10px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 50px);
  grid-row-gap: 8px;
  grid-column-gap: 16px;
  font-weight: 600;
  font-size: 1rem;
  color: #000;
  box-sizing: border-box;
}
.calendar--calendar-navigation {
  display: flex;
  padding: 20px 10px;
  align-items: center;
  justify-content: space-between;
}
.calendar--calendar-dates li {
  display: block;
  padding: 10px 5px;
  border-radius: 4px;
  box-sizing: border-box;
  border: 2px solid #F2F2F2;
  cursor: pointer;
  transition: 300ms;
  position: relative;
  overflow: hidden;
}
.calendar--calendar-dates li:hover {
  background: #F2F2F2;
}
.calendar--calendar-dates li.today {
  background: #FFEFCB;
}
.calendar--calendar-dates li.occasion::before {
  position: absolute;
  top: 3px;
  right: 2px;
  width: 12px;
  height: 12px;
  content: '';
  font-size: 0.73em;
  background: url(/shared/images/bell.svg) no-repeat center;
  background-size: 12px 12px; 
}

.calendar--calendar-dates li.selected {
  border: 2px solid #FAB116 !important;
  padding: 10px 5px !important;
}
.calendar--calendar-dates > li.feiertag {
  border: 0;
  padding: 12px 7px;
  color: #666;
  background-image:
    repeating-linear-gradient(45deg, 
    transparent 0%, 
    transparent 5px, rgba(0,0,0,0.05) 5px, 
    rgba(0,0,0,0.05) 12px, transparent 12px);
}
#calendar--calendar-month, #calendar--calendar-year {
  display: block;
  color: #666;
  font-size: 1.1rem;
  text-align: center;
  border: 0;
  margin: 0 auto 0;
  width: 100%;
  -webkit-appearance: none;
}
#calendar--calendar-month option, #calendar--calendar-year option {
  font-size: 1rem;
}
#calendar--calendar-month {
  font-size: 1.7rem;
  color: #000;
}
#calendar--calendar-prev, #calendar--calendar-next {
  width: 40px;
  height: 60px;
  cursor: pointer;
}
#calendar--calendar-prev svg, #calendar--calendar-next svg {
  width: 16px;
  height: 100%;
}
#calendar--calendar-next {
  text-align: right;
}
.calendarlist-mark {
  display: block;
  height: 2px;
  margin-bottom: 1px;
  background: #666;
}
.calendarlist-mark[data-type="appointmentrequest"], .calendarlist-mark[data-type="appointment"] {
  position: absolute;
  top: 19px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 4px;
}

.calendarlist-mark[data-type="feiertag"], .calendarlist-mark[data-type="occasion"] {
  display: none;
}
.calendarlist-mark[data-type="seo"]  {
  position: absolute;
  top: 11px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 4px;
  background: blue;
}
.calendarlist-mark[data-type="ads"] {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 4px;
  background: green;
}
#calendarDetails {
  list-style: none;
  padding: 0;
}
#calendarDetails li {
  position: relative;
  display: flex;
  align-items: flex-start;
  font-weight: 600;
  margin-bottom: 14px;
  padding: 5px 20px;
  border-radius: 3px;
  transition: 300ms;
}
#calendarDetails li:hover {
  background: #E1E1E1;
}
#calendarDetails li.appointmentrequest:hover, #calendarDetails li.appointment:hover, #calendarDetails li.feiertag:hover, #calendarDetails li.occasion:hover {
  background: none;
}
#calendarDetails li[data-dateid] {
  cursor: pointer;
}
#calendarDetails li.appointmentrequest[data-dateid], #calendarDetails li.appointment[data-dateid], #calendarDetails li.feiertag[data-dateid], #calendarDetails li.occasion[data-dateid] {
  cursor: default;
}
#calendarDetails li.appointmentrequest[data-dateid]::before, #calendarDetails li.appointment[data-dateid]::before {
  border-radius: 10px;
}
#calendarDetails li[data-activityid]::after {
  display: block;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0,-50%);
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  border-radius: 20px;
  text-align: center;
  content: '';
  background: url(/shared/images/external-link-alt.svg) no-repeat center;
  background-size: 12px 12px;
  opacity: 0.4;
}
#calendarDetails li::before {
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  margin-top: 6px;
  margin-right: 10px;
  background: #666;
}
#calendarDetails li.occasion::before {
    content: '';
    width: 12px;
    height: 12px;
    margin-top: 4px;
    margin-right: 8px;
    margin-left: -2px;
    background: transparent;
    display: block;
    background: url(/shared/images/bell.svg) no-repeat center;
    background-size: 12px 12px;
}
#calendarDetails li.ads::before {
  border-radius: 6px;
  background: green;
}
#calendarDetails li.seo::before {
  border-radius: 6px;
  background: blue;
}

.calendarlist-mark[data-type="notstarted"], #calendarDetails li.notstarted::before {
  background: var(--colorStatusGray);
}
.calendarlist-mark[data-type="draft"], #calendarDetails li.draft::before {
  background: var(--colorStatusOrange);
}
.calendarlist-mark[data-type="processing"], #calendarDetails li.processing::before {
  background: var(--colorStatusGreen);
}
.calendarlist-mark[data-type="ready"], #calendarDetails li.ready::before {
  background: var(--colorStatusGreen);
}
.calendarlist-mark[data-type="closed"], #calendarDetails li.closed::before {
  background: var(--colorStatusGreen);
}
.calendarlist-mark[data-type="blocked"], #calendarDetails li.blocked::before {
  background: var(--colorStatusBlue);
}
.calendarlist-mark[data-type="releaserequest"], #calendarDetails li.blocked::before {
  background: var(--colorStatusBlue);
}
.calendarlist-mark[data-type="cancelled"], #calendarDetails li.cancelled::before {
  background: var(--colorStatusRed);
}


.calendardetails-content {
  display: block;
}
.calendardetails-content > small {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  color: #666;
}


.marketingplan--statistics-chart {
  max-width: 1000px  !important;
  height: auto !important;
  margin: 0 auto 40px;
}

#marketingplan--stats-container > div {
  display: none;
  max-width: 840px;
  margin: 30px auto 0;
  text-align: center;
}
#marketingplan--stats-container > div > div  {
  margin: 0 auto 40px;
  padding-bottom: 40px;
  border-bottom: 2px solid #CCC;
}

#marketingplan--stats-container > div select {
  max-width: 200px;
  margin: 0 auto 0;
}

#marketingplan--stats-container > div.active {
  display: block;
}

#marketingplan--stats-navigation {
  display: flex;
  width: fit-content;
  column-gap: 20px;
  margin: 0 auto 0;
  flex-wrap: wrap;
}
#marketingplan--stats-navigation button {
  width: fit-content;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: bold;
  border: 0;
  margin: 0;
  color: #666;
  border-radius: 0;
  border-bottom: 2px solid #CCC;
  background: transparent;
  box-shadow: 0 0 0;
  cursor: pointer;
}
#marketingplan--stats-navigation button.active {
  color: #111;
  border-bottom: 2px solid #FAB116;
}

#marketingplan--stats-navigation-mobile {
  display: none;
}

#marketingplan--list-overview {
  padding: 20px 10px 70px 10px;
  text-align: center;
  min-height: calc( var(--app-height) - 110px );
  max-width: 1000px;
  margin: 0 auto 0;
}
#marketingplan--list-overview .content-card {
  margin: 0;
}
#marketingplan--list-todayseparator {
  position: relative;
  overflow: visible;
  margin: 20px -10px 20px -10px;
  width: calc(100% + 20px);
  background: #FAB116;
}
#marketingplan--list-todayseparator::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0 10px;
  transform: translate(-50%,-50%);
  background: #F2F2F2;
  color: #333;
  font-weight: 600;
  font-size: 0.9rem;
  content: 'HEUTE';
}
#marketingplan--list-overview .item {
  display: flex;
  padding: 0;
  font-size: 0.9rem;
  background: #FFF;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  margin-bottom: 10px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  column-gap: 10px;
  align-items: center;
  transition: height 2s, transform 2s;
}
#marketingplan--list-overview .item .date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 60px;
  min-width: 60px;
  padding: 10px;
  color: #FFF;
  text-align: center;
  align-self: stretch;
  background: #CCC;
}
#marketingplan--list-overview .item.blocked .date {
  background: var(--colorBlocked);
}
#marketingplan--list-overview .item.releaserequest .date {
  background: var(--colorReleaseRequest);
}
#marketingplan--list-overview .item.past .date {
  background: #CC0000;
}
#marketingplan--list-overview .item.open .date {
  background: var(--colorOpen);
}
#marketingplan--list-overview .item.draft .date {
  background: var(--colorDraft);
}
#marketingplan--list-overview .item.past.draft .date {
  background: #CC0000;
}
#marketingplan--list-overview .item.processing .date {
  background: var(--colorProcessing);
}
#marketingplan--list-overview .item.ready .date {
  background: var(--colorReady);
}
#marketingplan--list-overview .item.paused .date {
  background: var(--colorPaused);
}
#marketingplan--list-overview .item.proposal .date {
  background: var(--colorPaused);
}
#marketingplan--list-overview .item .date .month {
  display: block;
  text-transform: uppercase;
}
#marketingplan--list-overview .item .date .dayname {
  font-weight: 700;
}
#marketingplan--list-overview .item .date .day {
  display: block;
  font-size: 1.7rem;
  line-height: 1.2em;
  text-transform: uppercase;
}
#marketingplan--list-overview .item .date .year {
  display: block;
  text-transform: uppercase;
}
#marketingplan--list-overview .item .itemcontent {
  width: calc( 100% - 80px );
  padding: 10px 10px 10px 0;
}
#marketingplan--list-overview .item .itemimage {
  max-width: 150px;
  max-height: 100px;
}
#marketingplan--list-overview .item .title {
  display: flex;
  width: 100%;
  font-weight: 600;
  margin-bottom: 2px;  
  justify-content: space-between;
}
#marketingplan--list-overview .item .title > div {
  text-overflow: ellipsis;
  overflow: hidden;
}
#marketingplan--list-overview .item .description {
  display: block;
  width: 100%;  
  text-overflow: ellipsis;
  overflow: hidden;
}
#marketingplan--list-overview .item .comment {
  display: block;
  width: 100%;
  color: #666;
  font-size: 0.83rem;
  font-style: italic;
  margin-top: 7px;
}

#marketingplan--list-overview .item .attachments {
  display: inline-block;
  color: #666;
  min-width: 35px;
  text-align: right;
  line-height: 16px;
  vertical-align: top;
  margin-left: 5px;
}
#marketingplan--list-overview .item .attachments::before {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 1px;
  background-image: url(../images/bu-attachment-quick.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  content: '';
  vertical-align: bottom;
  opacity: 0.7;
}

#marketingplan--list-overview .item .distributions, #marketingplan--list-overview .item .marketingitem--scheduledtime {
  margin-top: 5px;
  display: inline-block;
  vertical-align: middle;
}
#marketingplan--list-overview .item .marketingitem--scheduledtime {
  margin-left: 10px;
  margin-bottom: 5px;
  color: #666666;
}

#marketingplan--list-overview .item .marketingitem--scheduledtime::before {
  display: inline-block;
  width: 16px;
  height: 18px;
  margin-right: 2px;
  background-image: url(../images/ico-time.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  content: '';
  vertical-align: text-bottom;
  opacity: 0.7;
}

#marketingplan--list-legend {
  position: fixed;
  bottom: 0;
  left: 360px;
  padding: 10px 70px 10px 10px;
  font-size: 0.9rem;
  width: calc( 100% - 360px );
  background: #FFFFFF;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

#legend-toggle::after {
  content: ' ▲';
}
#legend-toggle.active::after {
  content: ' ▼';
}
#legend-toggle, #legend-toggle:hover {
  color: var(--colorOrange);
}
#legend {
  padding-top: 5px;
  box-sizing: border-box;
  display: none;
}
.marketingplan--text-plus {
  display: inline-block;
  width: 19px;
  height: 19px;
  background: #FAB116;
  border-radius: 15px;
  color: #FFFFFF;
  text-align: center;
  line-height: 19px;
  font-size: 18px;
}
.marketingplan--list-legend-green, .marketingplan--list-legend-blue, .marketingplan--list-legend-orange, .marketingplan--list-legend-gray, .marketingplan--list-legend-red, .marketingplan--list-legend-others, .marketingplan--list-legend-seo, .marketingplan--list-legend-ads, .marketingplan--list-legend-bell {
  display: inline-block;
  position: relative;
  margin-right: 20px;
}
.marketingplan--list-legend-green::before, .marketingplan--list-legend-orange::before, .marketingplan--list-legend-blue::before, .marketingplan--list-legend-gray::before, .marketingplan--list-legend-red::before, .marketingplan--list-legend-others::before, .marketingplan--list-legend-seo::before, .marketingplan--list-legend-ads::before {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  content: '';
  background: #666;
  vertical-align: baseline;
}
.marketingplan--list-legend-bell::before {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  content: '';
  background: transparent;
  vertical-align: baseline;
  background: url(/shared/images/bell.svg) no-repeat center;
  background-size: 14px 14px; 
}
.marketingplan--list-legend-others::before, .marketingplan--list-legend-seo::before, .marketingplan--list-legend-ads::before {
  border-radius: 12px;
}
.marketingplan--list-legend-seo::before {
  background-color: blue;
}
.marketingplan--list-legend-ads::before {
  background-color: green;
}
.marketingplan--list-legend-green::before {
  background: var(--colorStatusGreen);
}
.marketingplan--list-legend-orange::before {
  background: var(--colorStatusOrange);
}
.marketingplan--list-legend-blue::before {
  background: var(--colorStatusBlue);
}
.marketingplan--list-legend-gray::before {
  background: var(--colorStatusGray);
}
.marketingplan--list-legend-red::before {
  background: var(--colorStatusRed);
}

/* END -- Module: calendar ---------------------------------- */

/* Loading */
body > .spinner:before {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  content: '';
  z-index: 200;
}
.spinner {
  display: none;
  position: absolute;
  top: calc( 50% - 40px );
  left: calc( 50% - 40px );
  width: 80px;
  height: 80px;
}
.spinner div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #CCC;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
  z-index: 202;
}
.spinner div:nth-child(1) {
  left: 8px;
  animation: spinner1 0.6s infinite;
}
.spinner div:nth-child(2) {
  left: 8px;
  animation: spinner2 0.6s infinite;
}
.spinner div:nth-child(3) {
  left: 32px;
  animation: spinner2 0.6s infinite;
}
.spinner div:nth-child(4) {
  left: 56px;
  animation: spinner3 0.6s infinite;
}
@keyframes spinner1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes spinner3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes spinner2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

#scrollToReload {
  position: relative;
}
#scrollToReload:before {
  position: absolute;
  bottom: 10px;
  left: calc( 50% - 20px );
  width: 40px;
  height: 40px;
  content: '';
  background: #FFF;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
#scrollToReload:after {
  position: absolute;
  bottom: 10px;
  left: calc( 50% - 20px );
  width: 40px;
  height: 40px;
  content: '';
  border-radius: 20px;
  background: url(../images/ico-reload.svg) no-repeat center center;
  background-size: 20px 20px;
  transform: rotate(var(--scroll-to-reload));
}

#colorbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  z-index: 20000;
}
#colorbox.colorbox-fullscreen {
  width: 100% !important;
  height: 100% !important;
  background: #FFFFFF;
}
#colorbox .colorbox-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: calc( 100% - 50px );
  max-height: calc( 100% - 50px );
  transform: translate(-50%,-50%);
}
#colorbox.colorbox-fullscreen .colorbox-container {
  height: 100% !important;
  width: 100% !important;
  max-width: none;
  max-height: none;
}
#colorbox .colorbox-content {
  position: relative;
  max-height: 100%;
  padding: 10px;
  border-radius: 3px;
  text-align: left;
  overflow: auto;
}
#colorbox.colorbox-fullscreen .colorbox-content {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: none;
  padding: 54px 0 0 0;
  overflow: hidden;
}
#colorbox.colorbox-fullscreen .colorbox-content iframe {
  width: 100%;
  height: 100%;
}
#colorbox .colorbox-content img, #colorbox .colorbox-content video, #colorbox .colorbox-content audio, #colorbox .colorbox-content .viewtext {
  max-width: 100%;
  max-height: 100%;
  border: 10px solid #FFF;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  vertical-align: bottom;
  box-sizing: border-box;
  background: #FFF;
}
#colorbox .colorbox-content .viewtext {
  min-width: 320px;
  min-height: 220px;
}
#close-colorbox {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  background: #FAB116;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
  border-radius: 100%;
  font-weight: bold;
  color: white;
  z-index: 101;
  transition: 500ms;
}
#close-colorbox:before, #close-colorbox:after {
  display: block;
  position: absolute;
  top: 8px;
  left: 16px;
  content: '';
  width: 3px;
  height: 20px;
  background: #FFF;
  transform: rotate(45deg);
}
#close-colorbox:after {
  transform: rotate(-45deg);
}
body.no-mobile #close-colorbox:hover {
  box-shadow: 0 1px 2px rgba(250,177,22,0.8);
}

#colorbox.colorbox-fullscreen #close-colorbox {
    top: 0;
    border: 10px solid #FAB116;
    height: 54px;
    right: 0;
    width: 100%;
    border-radius: 0;
}

#recorder-popup {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 15px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.2);
  background: #F2F2F2;
  font-size: 24px;
  align-items: center;
  z-index: 9000;
}
#recorder-popup::before {
  display: block;
  content: 'Sprachnachricht wird aufgenommen...';
  position: absolute;
  top: 100px;
  left: 20px;
  width: calc( 100% - 40px );
  font-size: 30px;
  text-align: center;
}
#recorder-popup-pausebutton {
  position: absolute;
  bottom: 200px;
  width: auto;
  left: 50%;
  padding: 15px 30px;
  border-radius: 100px;
  background: #666;
  transform: translate(-50%,0);
}
#recorder-popup-pausebutton::after {
  content: 'Pausieren';
}
#recorder-popup-pausebutton.paused::after {
  content: 'Weiter';
}

#recorder-popup-stopbutton {
  position: absolute;
  bottom: 100px;
  width: auto;
  left: 50%;
  padding: 15px 30px;
  border-radius: 100px;
  background: #BD0000;
  transform: translate(-50%,0);
}
.hide-sidebar #recorder-popup {
  left: 20px;
}
#recorder-popup-player {
  width: 1px;
  height: 1px;
  -webkit-appearance: none;
  display: none;
}
#recorder-popup-duration {
  position: absolute;
  top: 50%;
  left: 20px;
  width: calc( 100% - 40px );
  text-align: center;
}
/*#recorder-popup-icon-record {
  top: 240px;
  left: calc( 50% - 50px );
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: #C00;
  vertical-align: middle;
  animation: blink 1.5s infinite linear;
  display: block;
  position: absolute;
}*/
#recorder-popup-duration:not(.paused)::before {
  width: 24px;
  height: 24px;
  border-radius: 50px;
  background: #C00;
  margin-right: 10px;
  margin-bottom: 3px;
  vertical-align: middle;
  animation: blink 1.5s infinite linear;
  display: inline-block;
  content: '';
}
#recorder-popup-duration.paused::before {
  width: 4px;
  height: 24px;
  margin-right: 13px;
  margin-left: 3px;
  margin-bottom: 3px;
  background: transparent;
  border-left: 7px solid #999;
  border-right: 7px solid #999;
  content: '';
  display: inline-block;
  vertical-align: middle;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.selectedcustomer {
  font-weight: bold;
}

#notifications-tipp {
  cursor: pointer;
  margin: 70px 15px 20px 15px;
  padding: 10px;
  background: #FFF4DE;
  border: 1px solid var(--colorOrange);
  border-radius: 3px;
  font-size: 0.9em;
  display: none;
}

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(230,230,230,0.3);
  z-index: 10000;
  cursor: wait;
}
.lds-ring {
  display: block;
  position: absolute;
  top: calc( 25% - 30px );
  left: calc( 50% - 30px );
  width: 40px;
  height: 40px;
  border-radius: 30px;
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 24px;
  height: 24px;
  margin: 3px;
  border: 3px solid var(--colorOrange);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--colorOrange) transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (min-width: 1500px ) {
  #marketing--activities-fullpage-history ul {
    display: grid;
    grid-template-columns: minmax( 0,1fr) minmax( 0,1fr);
    column-gap: 40px;
  }
  #marketing--activities-fullpage-history.expanded ul {
    display: block;
  }
  #marketing--activities-fullpage-history ul li + li {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
  }
  #marketing--activities-fullpage-history.expanded ul li + li {
     margin-top: 10px;
    border-top: 1px solid #EEE;
  }
}

@media (max-width: 1400px ) {
  div.budget-grid {
    display:block;
  }
  #polarchartpartinfo {
    margin: 0;
  }
}

@media (min-width: 1000px) {
  .hide-on-desktop {
    display: none !important;
  }

  #colorbox .colorbox-container {
    width: auto !important;
  }
  header {
    width: calc( 100vw - 360px );
    margin-left: 360px;
  }
  body.hide-sidebar header {
    width: 100vw;
    margin-left: 0;
  }
  aside {
    position: fixed;
    top: 0;
    left: 0;
    width: 359px;
    max-width: 359px;
    height: var(--app-height);
    border-right: 1px solid #AAA;
    transition: none;
    background: #FFF;
    box-shadow: none;
  }
  div.fullpage-toolbar button.submit {
    width: auto;
    background: #FAB116;
    color: #FFFFFF;
  }
  aside ul {
    margin: 0 15px;
  }
  body.popup-shown aside,
  body.fullpage-shown aside {
    /*pointer-events: none;*/
  }
  #ajax-container {
    left: 361px;
    width: calc( 100% - 360px );
  }
  body.hide-sidebar #ajax-container {
    left: 0;
    width: 100%;
  }
/*  header {
    left: 381px;
    width: calc( 100vw - 380px );
  }*/
  header #header-customer {
    left: 12px;
    transition: left 200ms;
  }
  body.fullpage-shown header #header-customer {
    left: 50px;
  }
  #menu-button {
    transition: 300ms;
    transform: scale(0);
  }
  body.fullpage-shown #menu-button {
    width: 40px;
    transform: scale(1);
  }
  #popup {
    left: 361px;
    width: calc( 100% - 360px );
  }
  body.popup-shown #popup {
    top: 50px;
    height: calc( var(--app-height) - 50px );
  }
  body.hide-sidebar #popup {
    left: 0;
    width: 100%;
  }
  #popup div.popup-toolbar {
    width: calc( 100% - 40px );
  }
  #subnav {
    width: 100%;
  }
  #nosubnav {
  display: none;
  }
  #menu-button {
    
  }
  #account-info {
    padding: 15px;
  }
  #logout-button {
    bottom: 15px;
    left: 15px;
  }
  
  #contact--contact .content-card {
    width: calc( 50% - 23px );
    float: left;
  }
  #credits-button {
    bottom: 15px;
    right: 15px;
  }
  #marketing--activities-fullpage-creation span {
    padding-left: 15px;
    display: inline-block;
  }
  #marketing--activities-fullpage-lastchange span {
    padding-left: 15px;
    display: inline-block;
  }
    div.fullpage-toolbar {
    left: 380px;
    width: calc( 100% - 361px );
  }
  #legend-toggle {
    display: none !important;
  }
  #legend {
    display: block !important;
    padding-top: 0 !important;
  }
  .lds-ring {
    left: calc( 50% - 30px + 180px );
  }
}

@media (max-width: 1700px) {
/*  #fullpage[data-status="ready"] #marketing--activities-form-distributions li, #fullpage[data-status="closed"] #marketing--activities-form-distributions li {
    width: calc( 33.33% - 32px );
  }*/
}

@media (max-width: 1600px ) {
  #marketing--activities-form-distributions {
    grid-template-columns: repeat( 10, auto );
  }
}

@media (max-width: 1600px ) {
  #marketing--activities-form-distributions {
    grid-template-columns: repeat( 8, auto );
  }
}

@media (max-width: 1200px) {
  /*#fullpage[data-status="ready"] #marketing--activities-form-distributions li, #fullpage[data-status="closed"] #marketing--activities-form-distributions li {
    width: calc( 50% - 32px );
  }*/
  #marketing--activities-form-distributions {
    grid-template-columns: repeat( 6, auto );
  }
}

@media (max-width: 999px) {
  #marketingplan--list-legend {
    left: 0;
    width: 100%;
  }
  aside ul {
    margin: 0 10px;
  }
  #fullpage table {
    display: block;
    table-layout: fixed;
  }
  #fullpage th {
    display: none;
  }
  #fullpage tr[data-mimetype], #fullpage tr[data-type="appointmentrequests"], #fullpage tr[data-type="appointments"] {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #CCC;
  }
  #fullpage tr:hover td {
  }
  #fullpage tr[data-mimetype] td {
    display: none;
  }
  #fullpage tr[data-mimetype].showtd {
    background: #EAEAEA;
  }
  #fullpage tr[data-mimetype].showtd td {
    display: block;
    background: #EAEAEA;
  }
  #fullpage tr[data-mimetype] td.link {
    position: relative;
    display: block;
    padding-right: 30px;
    background: transparent;
    max-width: calc( 100vw - 110px );
  }
  #fullpage tr[data-mimetype] td.link::after {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 8px;
    height: 8px;
    border: 2px solid transparent;
    border-top-color: #666666;
    border-right-color: #666666;
    transform: translate(0,-75%) rotate(135deg);
    content: '';
  }
  #fullpage tr[data-mimetype].showtd td.link::after {
    transform: translate(0,-25%) rotate(315deg);
  }
  #fullpage tr[data-mimetype]:hover {
    background: #EAEAEA;
  }
  #fullpage tr[data-mimetype].showtd:hover {
    background: #EAEAEA;
  }
  #fullpage td {
    display: block;
    padding: 0;
    padding-left: 30px;
    background: #FFFFFF;
    border: 0;
    font-size: 0.8rem;
    color: #333;
    text-align: left;
  }
  #fullpage td.link, #fullpage td.nolink {
    padding: 0;
    font-weight: 700;
    font-size: 0.9rem;
    border: 0;
  }
  #fullpage td.link:hover {
    color: #333333;
  }
  #fullpage td.link:hover svg, #fullpage td.nolink:hover svg {
    color: #666666;
  }
  #fullpage td.link button {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
  }
  #fullpage td.link button[data-action="delete"]:before, #fullpage td.link button[data-action="delete"]:after {
    display: block;
    width: 15px;
    height: 2px;
    background: #CCC;
    position: absolute;
    top: 9px;
    left: 0;
    transform: rotate(45deg);
    content: '';
  }
  #fullpage td.link button[data-action="delete"]:before {
    transform: rotate(-45deg);
  }
  #fullpage td.link button[data-action="delete"]:hover:before, #fullpage td.link button[data-action="delete"]:hover::after {
    background: #FAB116;
  }
  #fullpage td.link svg, #fullpage td.nolink svg {
    width: 20px;
    height: auto;
  }
  #fullpage td.buttons {
    width: auto;
    padding: 10px 30px;
    text-align: left;
  }
  #fullpage tr.showtd td.buttons {
    text-align: right;
    padding-right: 0;
  }
  #fullpage td.buttons button {
    margin-left: 0;
    width: 50px;
    margin-left: 20px;
  }
  #fullpage td.buttons button:first-of-type {
    margin: 0;
  }
  #fullpage .size {
    padding-top: 10px;
    padding-right: 0;
    text-align: left;
  }
  #fullpage td span {
    min-width: 110px;
    padding-right: 10px;
    font-size: 1em;
    color: gray;
    display: inline-block;
  }
  .marketing--activities-fullpage-tasks ul li {
    border: 1px solid #EEE;
    background: #FFF;
  }
  #close-fullpage {
    display: none;
  }
  #credits-button {
    right: auto;
    left: 10px;
    bottom: 10px;
    font-size: 12px;
  }
  #notifications-tipp {
    margin-left: 10px;
    margin-right: 10px;
  }
  #marketingplan--stats-navigation {
    display: none;
  }
  #marketingplan--stats-navigation-mobile {
    display: block;
  }
}

@media (min-width: 800px ) {
  #marketing--activities-form-termin ul li:nth-child(1) {
    width: 350px;
  }
  #marketing--activities-form-termin ul li:nth-child(2) {
    width: calc( 100% - 380px );
  }
  #marketing--activities-form-admin ul {
    grid-template-columns: 350px auto;
  }
  #marketing--activities-form-termin > ul > li + li {
    margin-top: 0;
  }
}

@media (max-width: 800px) {
  #marketing--activities-form-publishdate-end {
    padding-top: 0;
    float: none;
    clear: both;
  }
  #marketing--activities-form-publishdate-end::before {
    display: block;
    padding: 0 10px 0 0;
    content: 'bis';
    float: none;
    line-height: auto;
  }
  #marketing--activities-fullpage-history .history-status {
    margin-top: 5px;
  }
  /*#fullpage[data-status="ready"] #marketing--activities-form-distributions li, #fullpage[data-status="closed"] #marketing--activities-form-distributions li {
    width: calc( 50% - 32px );
  }*/
  .marketing--activities-form-preview-content {
    grid-column: span 2;
  }
  .marketing--activities-form-preview-files {
    grid-column: span 2;
    margin-top: 20px;
  }
  #marketing--activities-form-quickbuttons button small {
    display: none;
  }
  #marketing--activities-fullpage-history ul li {
    font-size: 0.8rem;
  }
}

@media (max-width: 700px ) {
  #marketing--activities-form-distributions {
    grid-template-columns: repeat( 4, auto );
  }
}

@media (max-width: 600px) {
  .fullpage-buttons {
    margin-bottom: 80px;
  }
  .fullpage-buttons button {
    width: 46%;
    margin: 0 2% 15px 2%;
    padding: 7px;
    font-size: 0.93em;
  }

  #marketing--activities-form-admin ul {
    grid-template-columns: 100%;
    margin-top: 10px;
    grid-row-gap: 10px;
  }
  .marketing--activities-fullpage-activityno {
    text-align: left;
    margin-bottom: 10px;
  }
  #marketing--activities-form-notificationtoggle {
    width: fit-content;
    margin: 15px 0 15px auto;
  }
}

@media (max-width: 440px) {
  .fullpage-buttons {
    margin-bottom: 80px;
  }
  .fullpage-buttons button {
    width: 100%;
    margin: 0 0 12px 0;
    font-size: 0.93em;
  }
  input[type="date"], input[type="time"] {
    background-position: 5px center;
    padding-left: 25px;
  }
  #marketing--activities-form-starttime, #marketing--activities-form-endtime {
    width: 140px;
  }
  #marketing--activities-form-startdate, #marketing--activities-form-enddate {
    width: 170px;
  }
  #marketing--activities-form-distributions {
    grid-template-columns: repeat( 3, auto );
  }
    /*#fullpage[data-status="ready"] #marketing--activities-form-distributions li, #fullpage[data-status="closed"] #marketing--activities-form-distributions li {
    width: calc( 100% - 32px );
  }*/
  .marketing--activities-form-preview-files {
    grid-template-columns: minmax(0, 1fr );
  }
  #marketing--activities-fullpage-history .history-date, #marketing--activities-fullpage-history .history-user, #marketing--activities-fullpage-history .history-status-note {
    display: block;
    margin-left: 0;
  }
  #subnav ul, #nosubnav ul {
    height: 50px;
    font-size: 0.9em;
  }
  #marketingplan--list-overview .item .date {
    width: 40px;
    padding: 5px;
  }
  #marketingplan--list-overview .item .date .day {
    font-size: 1.5rem;
  }
  #marketingplan--list-overview .item .itemcontent {
    width: calc( 100% - 55px );
  }
  .calendar--calendar-dates {
    grid-column-gap: 8px;
  }
}

#marketing--statistics-main {
  max-width: 1200px;
  margin: 0 auto 0;
}

#marketing--statistics-main h2 {
  text-decoration: underline;
    text-decoration-color: #FBBC35;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
    margin-bottom: 15px;
    line-height: 170%;
}

div.marketing--statistics-pagestats-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding: 20px;
  background: radial-gradient(circle at 55% 10.3%, rgb(48, 72, 85) 0%, rgb(15, 29, 36) 100%);
  color: #FFFFFF;
  border-radius: 10px;
  max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
div.marketing--statistics-pagestats-title {
  font-size: 1.125rem;
  font-weight: 500;
  text-align: left;
  line-height: 30px;
}
div.marketing--statistics-pagestats-title[data-platform] {
  padding-left: 40px;
}
div.marketing--statistics-pagestats-title[data-platform="facebook"] {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjAuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIChJY29uczogQ0MgQlkgNC4wLCBGb250czogU0lMIE9GTCAxLjEsIENvZGU6IE1JVCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMiBGb250aWNvbnMsIEluYy4gLS0+PHBhdGggZD0iTTQwMCAzMkg0OEE0OCA0OCAwIDAgMCAwIDgwdjM1MmE0OCA0OCAwIDAgMCA0OCA0OGgxMzcuMjVWMzI3LjY5aC02M1YyNTZoNjN2LTU0LjY0YzAtNjIuMTUgMzctOTYuNDggOTMuNjctOTYuNDggMjcuMTQgMCA1NS41MiA0Ljg0IDU1LjUyIDQuODR2NjFoLTMxLjI3Yy0zMC44MSAwLTQwLjQyIDE5LjEyLTQwLjQyIDM4LjczVjI1Nmg2OC43OGwtMTEgNzEuNjloLTU3Ljc4VjQ4MEg0MDBhNDggNDggMCAwIDAgNDgtNDhWODBhNDggNDggMCAwIDAtNDgtNDh6IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+) no-repeat left center;
  background-size: 30px 30px;
}
div.marketing--statistics-pagestats-title[data-platform="instagram"] {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjAuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIChJY29uczogQ0MgQlkgNC4wLCBGb250czogU0lMIE9GTCAxLjEsIENvZGU6IE1JVCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMiBGb250aWNvbnMsIEluYy4gLS0+PHBhdGggZD0iTTIyNCwyMDIuNjZBNTMuMzQsNTMuMzQsMCwxLDAsMjc3LjM2LDI1Niw1My4zOCw1My4zOCwwLDAsMCwyMjQsMjAyLjY2Wm0xMjQuNzEtNDFhNTQsNTQsMCwwLDAtMzAuNDEtMzAuNDFjLTIxLTguMjktNzEtNi40My05NC4zLTYuNDNzLTczLjI1LTEuOTMtOTQuMzEsNi40M2E1NCw1NCwwLDAsMC0zMC40MSwzMC40MWMtOC4yOCwyMS02LjQzLDcxLjA1LTYuNDMsOTQuMzNTOTEsMzI5LjI2LDk5LjMyLDM1MC4zM2E1NCw1NCwwLDAsMCwzMC40MSwzMC40MWMyMSw4LjI5LDcxLDYuNDMsOTQuMzEsNi40M3M3My4yNCwxLjkzLDk0LjMtNi40M2E1NCw1NCwwLDAsMCwzMC40MS0zMC40MWM4LjM1LTIxLDYuNDMtNzEuMDUsNi40My05NC4zM1MzNTcuMSwxODIuNzQsMzQ4Ljc1LDE2MS42N1pNMjI0LDMzOGE4Miw4MiwwLDEsMSw4Mi04MkE4MS45LDgxLjksMCwwLDEsMjI0LDMzOFptODUuMzgtMTQ4LjNhMTkuMTQsMTkuMTQsMCwxLDEsMTkuMTMtMTkuMTRBMTkuMSwxOS4xLDAsMCwxLDMwOS40MiwxODkuNzRaTTQwMCwzMkg0OEE0OCw0OCwwLDAsMCwwLDgwVjQzMmE0OCw0OCwwLDAsMCw0OCw0OEg0MDBhNDgsNDgsMCwwLDAsNDgtNDhWODBBNDgsNDgsMCwwLDAsNDAwLDMyWk0zODIuODgsMzIyYy0xLjI5LDI1LjYzLTcuMTQsNDguMzQtMjUuODUsNjdzLTQxLjQsMjQuNjMtNjcsMjUuODVjLTI2LjQxLDEuNDktMTA1LjU5LDEuNDktMTMyLDAtMjUuNjMtMS4yOS00OC4yNi03LjE1LTY3LTI1Ljg1cy0yNC42My00MS40Mi0yNS44NS02N2MtMS40OS0yNi40Mi0xLjQ5LTEwNS42MSwwLTEzMiwxLjI5LTI1LjYzLDcuMDctNDguMzQsMjUuODUtNjdzNDEuNDctMjQuNTYsNjctMjUuNzhjMjYuNDEtMS40OSwxMDUuNTktMS40OSwxMzIsMCwyNS42MywxLjI5LDQ4LjMzLDcuMTUsNjcsMjUuODVzMjQuNjMsNDEuNDIsMjUuODUsNjcuMDVDMzg0LjM3LDIxNi40NCwzODQuMzcsMjk1LjU2LDM4Mi44OCwzMjJaIiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+) no-repeat left center;
  background-size: 30px 30px;
}
div.marketing--statistics-pagestats-title[data-platform="linkedin"] {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjAuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIChJY29uczogQ0MgQlkgNC4wLCBGb250czogU0lMIE9GTCAxLjEsIENvZGU6IE1JVCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMiBGb250aWNvbnMsIEluYy4gLS0+PHBhdGggZD0iTTQxNiAzMkgzMS45QzE0LjMgMzIgMCA0Ni41IDAgNjQuM3YzODMuNEMwIDQ2NS41IDE0LjMgNDgwIDMxLjkgNDgwSDQxNmMxNy42IDAgMzItMTQuNSAzMi0zMi4zVjY0LjNjMC0xNy44LTE0LjQtMzIuMy0zMi0zMi4zek0xMzUuNCA0MTZINjlWMjAyLjJoNjYuNVY0MTZ6bS0zMy4yLTI0M2MtMjEuMyAwLTM4LjUtMTcuMy0zOC41LTM4LjVTODAuOSA5NiAxMDIuMiA5NmMyMS4yIDAgMzguNSAxNy4zIDM4LjUgMzguNSAwIDIxLjMtMTcuMiAzOC41LTM4LjUgMzguNXptMjgyLjEgMjQzaC02Ni40VjMxMmMwLTI0LjgtLjUtNTYuNy0zNC41LTU2LjctMzQuNiAwLTM5LjkgMjctMzkuOSA1NC45VjQxNmgtNjYuNFYyMDIuMmg2My43djI5LjJoLjljOC45LTE2LjggMzAuNi0zNC41IDYyLjktMzQuNSA2Ny4yIDAgNzkuNyA0NC4zIDc5LjcgMTAxLjlWNDE2eiIgZmlsbD0iI0ZGRkZGRiIvPjwvc3ZnPg==) no-repeat left center;
  background-size: 30px 30px;
}
div.marketing--statistics-pagestats-title select {
  background: #FFFFFF;
  border: 1px solid #FFFFFF44;
  color: #000000;
  padding: 0.3em 30px 0.3em 0.3em;
  border-radius: 2px;
}

div.marketing--statistics-pagestats-filter {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}
div.marketing--statistics-pagestats-filter select {
  background: #FFFFFF;
  border: 1px solid #FFFFFF44;
  color: #000000;
  padding: 0.3em;
  border-radius: 2px;
}

div.marketing--statistics-pagestats-summary {
  display: flex;
  column-gap: 20px;
}

div.marketing--statistics-pagestats-summary-box {
  flex: 1;
  padding: 20px;
  border: 1px solid #CCC;
  border-radius: 10px;
  margin-bottom: 40px;
}

span.marketing--statistics-pagestats-summary-value {
  display: block;
  color: #000;
  font-size: 2.3rem;
  text-align: center;
  margin-bottom: 1rem;
  line-height: 120%;
}

span.marketing--statistics-pagestats-summary-change {
  display: block;
  width: fit-content;
  text-align: center;
  margin: 0 auto 0.4rem;
}
span.marketing--statistics-pagestats-summary-change::after {
  content: '%';
}
span.marketing--statistics-pagestats-summary-change:empty::after {
  content: '⠀';
}
.marketing--statistics-pagestats-summary-change-positive {
  color: #178A28;
  padding-left: 20px;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCEtLSBHZW5lcmF0b3I6IEdyYXZpdC5pbyAtLT48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgdmlld0JveD0iMCAwIDEyIDE1IiB3aWR0aD0iMTJwdCIgaGVpZ2h0PSIxNXB0Ij48ZGVmcz48Y2xpcFBhdGggaWQ9Il9jbGlwUGF0aF9FNURRQnl6ZndzakRHMVJIQ0VWWmJRc3MwQmpxaW05RyI+PHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjE1Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI19jbGlwUGF0aF9FNURRQnl6ZndzakRHMVJIQ0VWWmJRc3MwQmpxaW05RykiPjxwYXRoIGQ9IiBNIDcuMjc1IDQuNTggTCA3LjI3NSAxNS4xNzIgTCA0Ljg4MiAxNS4xNzIgTCA0Ljg4MiA0LjQyMyBMIDEuNjkyIDcuNjEzIEwgMCA1LjkyMiBMIDUuOTIyIDAgTCA2IDAuMDc4IEwgNi4wNzggMCBMIDEyIDUuOTIyIEwgMTAuMzA4IDcuNjEzIEwgNy4yNzUgNC41OCBaICIgZmlsbD0icmdiKDIzLDE1Nyw0MykiLz48L2c+PC9zdmc+);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 1rem;
}
.marketing--statistics-pagestats-summary-change-negative {
  color: #C00;
  padding-left: 20px;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCEtLSBHZW5lcmF0b3I6IEdyYXZpdC5pbyAtLT48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgdmlld0JveD0iMCAwIDEyIDE1IiB3aWR0aD0iMTJwdCIgaGVpZ2h0PSIxNXB0Ij48ZGVmcz48Y2xpcFBhdGggaWQ9Il9jbGlwUGF0aF81UnBZNUNhTXNrSHYwRE00OXNlakNnRWxkTnVaaUhSNSI+PHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjE1Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI19jbGlwUGF0aF81UnBZNUNhTXNrSHYwRE00OXNlakNnRWxkTnVaaUhSNSkiPjxwYXRoIGQ9IiBNIDcuMjc1IDEwLjU5MiBMIDcuMjc1IDAgTCA0Ljg4MiAwIEwgNC44ODIgMTAuNzQ5IEwgMS42OTIgNy41NTggTCAwIDkuMjUgTCA1LjkyMiAxNS4xNzIgTCA2IDE1LjA5MyBMIDYuMDc4IDE1LjE3MiBMIDEyIDkuMjUgTCAxMC4zMDggNy41NTggTCA3LjI3NSAxMC41OTIgWiAiIGZpbGw9InJnYigyMDQsMCwwKSIvPjwvZz48L3N2Zz4=);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 1rem;
}
span.marketing--statistics-pagestats-summary-period {
  display: block;
  text-align: center;  
}

div.marketing--statistics-pagestats-chart, div.marketing--statistics-postings-chart {
  padding: 20px;
  border: 1px solid #CCC;
  border-radius: 10px;
  margin-bottom: 40px;
}

@media all and (max-width: 1200px ) {  
  div.marketing--statistics-pagestats-summary {
    flex-wrap: wrap;
  }
  div.marketing--statistics-pagestats-summary-box {
    min-width: calc( 50% - 20px);
  }
}

@media all and (max-width: 1200px ) {  
  div.marketing--statistics-pagestats-head {
    flex-wrap: wrap;
    row-gap: 20px;
  }
  div.marketing--statistics-pagestats-title, div.marketing--statistics-pagestats-filter {
    width: 100%;
  }
  
}