/* Fonts der securvita Krankenkasse */
 @font-face{
     font-family:'Roboto-Regular';
     font-weight:400;
     font-style:normal;
     font-stretch:normal;
     src: url('/includes/ressource?mid=152&name=Roboto-Regular.woff2') format('woff2'), url('/includes/ressource?mid=152&name=Roboto-Regular.woff') format('woff'), url('/includes/ressource?mid=152&name=Roboto-Regular.ttf') format('truetype');
}
 @font-face{
     font-family:'Roboto-Bold';
     font-weight:400;
     font-style:normal;
     font-stretch:normal;
     src: url('/includes/ressource?mid=152&name=Roboto-Bold.woff2') format('woff2'), url('/includes/ressource?mid=152&name=Roboto-Bold.woff') format('woff'), url('/includes/ressource?mid=152&name=Roboto-Bold.ttf') format('truetype');
}
 @font-face{
     font-family:'Roboto-Light';
     font-weight:400;
     font-style:normal;
     font-stretch:normal;
     src: url('/includes/ressource?mid=152&name=Roboto-Light.woff2') format('woff2'), url('/includes/ressource?mid=152&name=Roboto-Light.woff') format('woff'), url('/includes/ressource?mid=152&name=Roboto-Light.ttf') format('truetype');
}
 @font-face{
     font-family:'Roboto-Italic';
     font-weight:400;
     font-style:normal;
     font-stretch:normal;
     src: url('/includes/ressource?mid=152&name=Roboto-Italic.woff2') format('woff2'), url('/includes/ressource?mid=152&name=Roboto-Italic.woff') format('woff'), url('/includes/ressource?mid=152&name=Roboto-Italic.ttf') format('truetype');
}
/* Farben der securvita */
 :host, :root {
     --dark-1: #505050;
     --grey-1: #f2f3f3;
     --grey-2: #b1b1b1;
     --white: #ffffff;
     --red-1: #e30613;
     --red-2: #f6533c;
     --red-3: #ff3b20;
     --blue-1: #5996c4;
}


element.style {
    max-width: 700px;
    min-width: 300px;
}
.modern .XHeader:not(:empty), .modern .XFooter:not(:empty) {
    padding-bottom: 0;
}
.modern .XHeader:not(:empty), .modern .XFooter:not(:empty) {
    padding-bottom: 10px;
}
.modern .xm-item-div .XItem {
    font-size: 14px;
}
.modern .XItem, .modern .xm-item-div input[type="checkbox"]:checked + label::before, .modern .xm-item-div input[type="radio"]:checked + label::before {
    color: #242424;
}


/* formularweite Schrift */
.xfc-template-body,
.xfc-template,
.modern p,
.modern label,
.modern input,
.modern button,
.modern div,
.modern span:not(.ui-icon),
.modern option,
.modern li,
.modern a
{
     font-family: 'Roboto-Regular', serif !important;
     font-size: 14px;
     color: var(--dark-1,#505050);
     line-height: 21px;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-text-size-adjust: 100%;
}

/* ######## Formatierungen für den Header ###########*/
.modern .CXHeader,
.modern .CXPage,
.modern .CXFooter {
    background-color: var(--grey-1);
}

 .modern .CXHeader .XHeader .HeaderBlock {
     padding: 0;
     min-height: 70px;
     vertical-align: middle;
     margin-bottom: 0;
}
 .modern .CXHeader .XHeader .HeaderBlock .cFormularTitel {
     vertical-align: middle;
 }

 .modern .CXHeader .XHeader .HeaderBlock .Kassen-Logo {
     background-image: url("/includes/ressource?mid=152&name=SEC_KK_Logo_4C_01.svg");
     background-repeat: no-repeat;
     background-size: 130px;
     background-position: center right;
     min-height: 60px;
     padding-top: 10px;
}

 /*.modern .CXHeader .XHeader .HeaderBlock .Kassen-Logo .FormularLogo {
     margin: 0;
     display:block;
}*/

@media screen and (max-width: 480px) {
    .modern .CXHeader .XHeader .HeaderBlock .Kassen-Logo {
         background-image: none;
    }
}
/* ######## Ende Formatierungen für den Header ###########*/

 .modern .xm-footer-hint, .modern .xm-footer-link, .modern .xm-footer-privacy-link {
     font-size:12px;
     text-align: center;
}

/**
 * ==============================================
 * Dot Pulse
 * ==============================================
 */
.dot-pulse {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #000;
  color: #000;
  box-shadow: 9999px 0 0 -5px;
  animation: dot-pulse 1.5s infinite linear;
  animation-delay: 0.25s;
  margin-top: -13px;
  margin-left: 105px;
  top: -2px;
}
.dot-pulse::before, .dot-pulse::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #000;
  color: #000;
}
.dot-pulse::before {
  box-shadow: 9984px 0 0 -5px;
  animation: dot-pulse-before 1.5s infinite linear;
  animation-delay: 0s;
}
.dot-pulse::after {
  box-shadow: 10014px 0 0 -5px;
  animation: dot-pulse-after 1.5s infinite linear;
  animation-delay: 0.5s;
}

.modern .waitingLayer .dot-pulse {
    display: inline-block;
    top: 2px;
    margin-left: 35px;
    color: var(--dark-1);
}

.modern .waitingLayer .dot-pulse::before {
    margin-left: -8px;
}

/*
.ctxtInvalid .txtInvalid h2{
  color: var(--red-1);
}

.ctxtInfoHeader .txtInfoHeader h2{
  color: var(--dark-1);
}
*/

@keyframes dot-pulse-before {
  0% {
    box-shadow: 9984px 0 0 -5px;
  }
  30% {
    box-shadow: 9984px 0 0 2px;
  }
  60%, 100% {
    box-shadow: 9984px 0 0 -5px;
  }
}
@keyframes dot-pulse {
  0% {
    box-shadow: 9999px 0 0 -5px;
  }
  30% {
    box-shadow: 9999px 0 0 2px;
  }
  60%, 100% {
    box-shadow: 9999px 0 0 -5px;
  }
}
@keyframes dot-pulse-after {
  0% {
    box-shadow: 10014px 0 0 -5px;
  }
  30% {
    box-shadow: 10014px 0 0 2px;
  }
  60%, 100% {
    box-shadow: 10014px 0 0 -5px;
  }
}