/* Formatierungen für HTML-Abschlusseiten */
/* Fonts der BKK24  */
@font-face{
    font-family:"Univers LT W01_57 Condensed";
    src: url("/includes/ressource?mid=102&name=bf8f8741-5f64-4db9-a877-a44624092e68.woff2") format("woff2"), 
            url("/includes/ressource?mid=102&name=7ce02c2c-45d4-4dee-90f2-f8034e29ac24.woff") format("woff");
}

@font-face{
    font-family:"Univers LT W01_67 Bold_1476016";
    src: url("/includes/ressource?mid=102&name=3bdb4597-ff70-447c-8620-8836686bf840.woff2") format("woff2"),
            url("/includes/ressource?mid=102&name=5599ac9f-d136-4277-aeee-f82aac5d527f.woff") format("woff");
}

:root {
  --grey-100: #000000;
  --grey-080: #353535;
  --grey-070: #4E4E4E;
  --grey-060: #666666;
  --grey-050: #808080;
  --grey-040: #999999;
  --grey-030: #B4B4B4;
  --grey-020: #CECECE;
  --grey-010: #E4E4E4;
  --grey-input: #e2e2e2;
  --grey-005: #f8f8f8;

  --white: #ffffff;
  --red-100: #FF0032;
  --red-080: #FF335B;
  --red-060: #FF6684;
  --red-040: #FF9AAE;
  --red-020: #FFCBD5;
  --yellow-100: #FFE600;
  --yellow-080: #FFEB35;
  --yellow-060: #FFF066;
  --yellow-040: #FFF599;
  --yellow-020: #FFFACB;
}


.xfc-template-body {
     width: 100%;
     height:100%;
     background-color: var(--grey-010);
     margin: 0;
}
 .xfc-template {
     width: 100%;
     height:100%;
     font-size: 14px;
     background-color: var(--grey-010);
     font-family: 'Univers LT W01_57 Condensed',-apple-system,Arial,sans-serif !important;
}
 .xfc-template H1 {
     font-size: 32px;
     color: var(--red-100);
     padding: 20px 0;
     margin: 0;
     font-family: 'Univers LT W01_67 Bold_1476016',-apple-system,Arial,sans-serif !important;
}
 .xfc-template H2 {
     font-size: 18px;
     font-weight: normal;
     color: var(--grey-100);
     padding-bottom: 20px;
     margin: 0;
}
 .xfc-template H3 {
     font-size: 16px;
     font-weight: normal;
     color: var(--grey-100);
     padding-bottom: 20px;
     margin: 0;
}
 .xfc-template DIV[lang], .xfc-template DIV.logo {
     margin: 0 auto;
     min-width: 300px;
     max-width: 750px;
     background-color: var(--grey-020);
}
 .xfc-template DIV.logo {
     padding-top: 50px;
     background-color: var(--white);
}
 .xfc-template DIV.logo DIV.logo-header {
     margin: 0 auto;
     min-width: 300px;
     max-width: 750px;
     height:60px;
     padding: 0 60px;
     background-image: url("/includes/ressource?mid=102&name=bkk24-logo.svg");
     background-repeat: no-repeat;
     background-size: 320px;
     background-position: top left;
     background-origin: content-box, padding-box;
}
 .xfc-template DIV.header {
     background-color: var(--white);
     padding: 0 60px;
}
 .xfc-template DIV.content {
     background-color: var(--white);
     padding: 30px 60px 20px 60px;
}
 .xfc-template DIV.footer {
     border-top: 1px solid var(--grey-020);
     background-color: var(--grey-010);
     font-size:12px;
     height: 20px;
     padding: 20px 60px 30px 60px;
}
 .xfc-template INPUT {
    border-color: var(--grey-080);
     color: var(--grey-080);
     border-radius: 4px;
     border-style: solid;
     border-width: 1px;
     padding: 7px 11px;
}
 .xfc-template FORM.login {
    padding: 10px 20px;
     margin-bottom: 20px;
     border: 1px solid var(--grey-080);
}
 .xfc-template FORM.login LABEL {
    display:inline-block;
     width:140px;
     font-size: 13px;
     font-weight:bold;
}
 .xfc-template FORM.login .submit {
    display: inline-block;
     width: 100%;
}
 .xfc-template FORM.login .submit INPUT {
    float: right;
}
 .xfc-template FORM.login INPUT[type=text], .xfc-template FORM.login INPUT[type=password] {
    width:160px;
}
 .xfc-template FORM.login .button {
    font-size: 14px;
     background-color: transparent;
     color: var(--grey-080);
     font-weight: bold;
     padding: 10px 20px;
}
 .xfc-template FORM.login .button:hover {
    transition: all 0.5s ease 0s;
     background-color: var(--red-100);
     color: #FFFFFF;
     cursor: pointer;
}

.xfc-template .button {
     font-size: 14px;
     background-color: transparent;
     font-weight: bold;
     border-color: var(--grey-050);
     color: var(--yellow-060);
     border-radius: 4px;
     border-style: solid;
     border-width: 1px; 
     padding: 7px 11px;
     margin-bottom: 8px;
} 
.xfc-template .button:hover {
     transition: all 0.5s ease 0s;
     background-color: var(--yellow-060);
     color: #FFFFFF;
     cursor: pointer;
}

.xfc-template DIV.auth-container {
     width: 100%;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -moz-box-orient: vertical;
     -ms-box-orient: vertical;
     -webkit-box-direction: normal;
     -moz-box-direction: normal;
     -ms-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-align:stretch;
     -ms-flex-align:stretch;
     align-items:stretch;
     max-width:300px;
     margin: 0 auto;
}
 .xfc-template DIV.auth-container.style-horizontal {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -moz-box-direction: normal;
     -ms-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     max-width:inherit;
}
 .xfc-template DIV.auth-container.style-horizontal.reverse {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
     -ms-flex-direction: row-reverse;
     flex-direction: row-reverse;
}
 .xfc-template DIV.auth-container.style-horizontal .sys-login-container {
     min-width:300px;
     -webkit-box-flex: 50%;
     -ms-flex: 50%;
     flex: 50%;
}
 .xfc-template DIV.auth-container.style-horizontal > .separator {
     margin: 16px 24px 6px;
     border-left: 1px solid var(--grey-080);
     width: 0;
     overflow:hidden;
}
 .xfc-template DIV.auth-container.style-horizontal .external-login-container {
     margin-top:16px;
     -webkit-box-flex: 50%;
     -ms-flex: 50%;
     flex: 50%;
}
 .xfc-template DIV.auth-container.style-horizontal .external-login-container {
     max-width:300px;
    /* For IE 10 */
     min-width:250px;
}
 .xfc-template INPUT {
     margin-bottom: 16px;
     border-color: var(--grey-080);
     color: var(--grey-080);
     border-radius: 4px;
     border-style: solid;
     border-width: 1px;
     padding: 7px 11px;
}
 .xfc-template FORM.login, .xfc-template .external-login-container {
     width: 100%;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -moz-box-orient: vertical;
     -ms-box-orient: vertical;
     -webkit-box-direction: normal;
     -moz-box-direction: normal;
     -ms-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-align:stretch;
     -ms-flex-align:stretch;
     align-items:stretch;
}
 .xfc-template FORM.login LABEL {
     display:inline-block;
     width:auto;
     font-size: 13px;
     font-weight:bold;
}
 .xfc-template FORM.login LABEL.error {
     color:var(--red-100);
}
 .xfc-template FORM.login INPUT.error {
     border-color:var(--red-100);
}
 .xfc-template FORM.login .submit {
     display: inline-block;
     width: 100%;
}
 .xfc-template FORM.login .submit INPUT {
     float: right;
}
 .xfc-template FORM.login .error-container {
     color:var(--red-100);
}
 .xfc-template FORM.login .error-container .error-msg {
     margin-top: -4px;
     margin-bottom: 20px;
     font-size: 12px;
}
 .xfc-template FORM.login .error-container .error-msg::before {
     content:"!";
     background-color:var(--red-100);
     color:white;
     padding: 0 6px;
     border-radius: 8px;
     font-size: 14px;
     font-weight: bold;
     line-height: 12px;
     margin-right: 6px;
}
 .xfc-template DIV.auth-container .cta-container .button {
     float:right;
     width: 120px;
}
 .xfc-template DIV.auth-container FORM.login {
     padding: 0;
     margin: 0;
     border: none;
}
 .xfc-template DIV.auth-container FORM.login INPUT {
     width:auto;
}
 .xfc-template DIV.auth-container .button {
     font-size: 14px;
     background-color: var(--grey-080);
     color: white;
     font-weight: bold;
     border-color: var(--grey-080);
     border-radius: 4px;
     border-style: solid;
     border-width: 1px;
     padding: 7px 11px;
     margin-bottom: 8px;
}
 .xfc-template DIV.auth-container .button:hover {
     transition: all 0.5s ease 0s;
     background-color: white;
     color: var(--grey-080);
     cursor: pointer;
     border-color:var(--grey-080);
}
 .xfc-template .separator {
     margin: 24px 0;
     color:var(--grey-080);
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align:center;
     -ms-flex-align:center;
     align-items:center;
     text-align:center;
}
 .xfc-template .separator::before, .separator::after {
     content: '';
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
     border-bottom: 1px solid var(--grey-080);
}
 .xfc-template .separator::before {
     margin-right: .25em;
}
 .xfc-template .separator::after {
     margin-left: .25em;
}
 .xfc-template .link {
     color: var(--grey-080);
}
 .xfc-template .cta-container .link {
     line-height: 33px;
}
 .xfc-template .terms {
     margin-top:16px;
     color:var(--grey-080);
     font-size:0.9em;
}
 .xfc-template .Hidden {
     display:none;
}