/*****************************************
  lose globals
*****************************************/
body{
    counter-reset: settingStepHeadlineCounter;
}
/* row override */
section .row{
    max-width: 750px;
}
/* success hint, welcome hint */
.callout.panel.success-element.standalone,
.callout.panel.welcome-element.standalone{
    margin-bottom: 0;
}
.callout.panel.success-element h3{
    margin-top: 6px;
    font-size: 16px;
    font-weight: 500;
}
.callout.panel.welcome-element h3{
    margin-top: 0;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}
.panel.callout.success-element .icon-check:after{
    height: 30px;
}
.callout.panel.welcome-element.standalone .hint-text{
    margin-left: 6px;
}

.callout.panel.hint-element.email-error{
    margin-top: 8px;
}

@media only screen and (min-width: 746px){
    .callout.panel.success-element h3,
    .callout.panel.welcome-element h3{
        font-size: 18px;
        line-height: 22px;
    }
    .callout.panel.welcome-element.standalone .hint-text{
        margin-left: 2px;
    }
}
@media only screen and (min-width: 769px){
    .callout.panel.welcome-element.standalone .hint-text{
        margin-left: 9px;
    }
}
/* input with tooltip */
.styled-form .input-wrapper.has-tooltip .tooltip:after{
    left: 9px;
}
@media only screen and (min-width: 746px){
    .styled-form .input-wrapper.has-tooltip .tooltip:after{
        left: 8px;
    }
}
/* button container */
.btn-container hr{
    margin-top: 0;
    margin-bottom: 16px;
    margin-left: -15px;
    margin-right: -15px;
    border-color: #efefef;
}
.btn-container{
    width: 100%;
    display: table;
}
.btn-container .button-skip{
    clear: both;
    min-width: 100%;
    text-align: center;
}
.btn-container button + .button-skip{
    margin-top: 15px;
}
.btn-container a.button:not(arrowright){
    margin-top: 8px;
}
@media only screen and (min-width: 747px){
    .btn-container hr{
        border-color: transparent;
    }
    .btn-container button,
    .btn-container .button-skip{
        float: right;
        margin-left: 8px;
    }
    .btn-container .button-skip{
        min-width: 125px;
    }
    .btn-container a.button:not(.arrowright){
        float: left;
        margin-right: 8px;
        margin-top: 0;
    }
}
@media only screen and (min-width: 769px){
    .btn-container hr{
        margin-bottom: 30px;
    }
}
/* font size overrides */
@media only screen and (max-width: 46.625em) {
    .settings-area:not(.settings-set-wlan) a:not(.button),
    .settings-area:not(.settings-set-wlan) p,
    .settings-area:not(.settings-set-wlan) .input-error-wrapper,
    .callout.panel.success-element p,
    .image-text-teaser p,
    .image-text-teaser ul li,
    .image-text-teaser a:not(.button){
        font-size: 14px;
    }
}
/*****************************************
  settings
*****************************************/
/***********************
  settings headline
************************/
.settings-step.is-completed,
.settings-step.is-inactive,
.settings-step .settings-headline{
    display: none;
}
.settings-step.is-completed .settings-headline{
    position: relative;
}
.settings-step.is-completed .settings-headline:after{
    position: absolute;
    top: 50%;
    right: 30px;
    background: url('/img/fres/lose/ic_check_highlighted.svg') no-repeat left top;
    background-size: 100% auto;
    content: '';
    width: 30px;
    height: 22px;
    margin-top: -10px;
    display: inline-block;
}
.settings-step .settings-headline h2{
    position: relative;
    font-family: 'A1Serif', Verdana, sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    margin-top: 0;
    margin-bottom: 0;
    display: inline-block;
}
.settings-step.has-counter .settings-headline h2{
    padding-left: 55px;
}

.settings-step .settings-headline h2{
    color: #da291c;
}
.settings-step.is-completed .settings-headline h2,
.settings-step.has-counter.is-completed .settings-headline h2{
    color: #6295ac;
}
.settings-step.is-inactive .settings-headline h2,
.settings-step.has-counter.is-inactive .settings-headline h2{
    color: #bbb;
}
@media only screen and (min-width: 746px){
    .settings-step.is-completed,
    .settings-step.is-inactive{
        display: block;
    }
    .settings-step .settings-headline{
        background-color: #fff;
        border-bottom: 1px solid #efefef;
        padding: 15px 60px 15px 15px;
        display: block;
    }
    .settings-step.is-completed .settings-headline:after{
        right: 15px;
    }
    .settings-step .settings-headline h2{
        font-size: 28px;
        line-height: 32px;
        padding-top: 5px;
    }
    .settings-step.has-counter .settings-headline h2:before{
        position: absolute;
        top: 0;
        left: 0;
        background-color: #da291c;
        content: '';
        width: 40px;
        height: 40px;
        border-radius: 20px;
        display: inline-block;
    }
    .settings-step.has-counter .settings-headline h2:after{
        position: absolute;
        top: 5px;
        left: 0;
        width: 40px;
        text-align: center;
        content: counter(settingStepHeadlineCounter);
        counter-increment: settingStepHeadlineCounter;
        font-size: 21px;
        line-height: 28px;
        color: #fff;
    }
    .settings-step.has-counter.is-completed .settings-headline h2:before{
        background-color: #6295ac;
    }
    .settings-step.has-counter.is-inactive .settings-headline h2:before{
        background-color: #bbb;
    }
}
@media only screen and (min-width: 769px){
    .settings-step .settings-headline{
        padding: 20px 70px 20px 30px;
    }
    .settings-step.is-completed .settings-headline:after{
        right: 30px;
    }
}
/***********************
  settings content
************************/
.settings-step .settings-content{
    padding-top: 8px;
}

.settings-step .settings-content h3{
    font-family: 'A1Serif', Verdana, sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 0;
    padding-bottom: 12px;
    padding-left: 15px;
    padding-right: 15px;
}
@media only screen and (min-width: 746px){
    .settings-step .settings-content{
        background-color: #fff;
        padding-top: 20px;
        width: 100%;
        float: left;
        display: block;
    }
    .settings-step .settings-content h3{
        padding: 0 15px;
    }
    .settings-step .settings-content.desktop-hidden-headline{
        padding-top: 0;
    }
    .settings-step .settings-content.desktop-hidden-headline h3{
        display: none;
    }
}
@media only screen and (min-width: 769px){
    .settings-step .settings-content{
        padding-top: 30px;
    }

    .settings-step .settings-content.no-title{
        padding-top: 0px;
    }
    .settings-step .settings-content h3{
        padding: 0 30px;
    }
    .settings-step .settings-content form h3{
        padding: 0 15px 15px 15px;
    }
    .settings-step .settings-content form h3.padding-top{
        padding-top: 30px;
    }
}

@media only screen and (max-width: 769px){
    .settings-step .settings-content form h3.mobile-padding-top{
        padding-top: 30px;
    }
}
/* input error wrapper */
.settings-step .settings-content .input-error-wrapper span{
    color: #da291c;
    padding-top: 4px;
    width: 100%;
    display: inline-block;
}
/*
  settings-email-verification
  settings-user-verification
*/
.settings-step .settings-user-verification .settings-content .callout.hint-element{
    margin-bottom: 15px;
}
.settings-step .settings-user-verification .settings-content .callout.hint-element p{
    margin-bottom: 4px;
}
@media only screen and (max-width: 745px){
    .settings-step .settings-email-verification .settings-content,
    .settings-step .settings-user-verification .settings-content{
        background-color: #fff;
    }
    .settings-step .settings-email-verification .settings-content h3,
    .settings-step .settings-user-verification .settings-content h3{
        font-size: 18px;
        line-height: 24px;
        padding: 15px;
        border-bottom: 1px solid #efefef;
    }
}
/*  settings-set-wlan */
.settings-step .settings-set-wlan .settings-content .headline{
    font-family: 'A1Serif', Verdana, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}
.settings-step .settings-set-wlan .settings-content .additional-hint{
    color: #585858;
    font-size: 12px;
}
@media only screen and (min-width: 747px){
    .btn-container hr{
        border-color: #efefef;
    }
}
@media only screen and (min-width: 769px){
    .btn-container hr{
        margin-top: 15px;
        margin-left: -30px;
        margin-right: -30px;
    }
}
/***********************
  switch
************************/
.switch-container .switch-label{
    font-family: 'A1Serif', Verdana, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    padding-bottom: 8px;
    display: inline-block;
}
@media only screen and (max-width: 745px){
    .switch-container{
        border: 1px solid #bbb;
        padding: 15px 15px 0 15px;
        margin-bottom: 15px;
    }
}
/* controller */
.switch-controller{
    position: relative;
    background: url('/img/fres/lose/switch_bg.svg') no-repeat center bottom;
    width: 100%;
    padding-bottom: 30px;
}
.switch-controller:after{
    content: '';
    clear: both;
    display: block;
}
.switch-controller input[type="checkbox"]{
    position: absolute;
    left: -99999px;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
}
.switch-controller input[type="checkbox"] + label{
    float: left;
    width: 50px;
    height: 25px;
    background: url('/img/fres/lose/switch_off.svg') no-repeat left top;
    background-size: 100% auto;
    padding: 0;
    margin: 0 16px 0 0;
    display: inline-block;
}
.switch-controller input[type="checkbox"]:checked + label{
    background: url('/img/fres/lose/switch_on.svg') no-repeat left top;
    background-size: 100% auto;
}
.switch-controller .switch-controller-label{
    float: left;
    display: inline-block;
    font-size: 14px;
    line-height: 25px;
    font-weight: 500;
}
/* content */
.switch-content .switch-content-area{
    padding-top: 10px;
}
.switch-content .switch-content-area[data-switch-mode="on"]{
    display: none;
}
.switch-content .credentials-wlan-option-content{
    display: inline-block;
    padding-top: 15px;
}
.switch-content .input-list-selection-container{
    margin: 0 0 15px 0;
}
.switch-content .input-list-selection .input-list-selection-item > .input-radio label .label-text{
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}
.switch-content .input-list-selection .input-list-selection-item .input-list-selection-expander-content,
.switch-content .input-list-selection .input-list-selection-item.active .input-list-selection-expander-content{
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 0;
    padding-bottom: 16px;
}
.switch-content .input-list-selection .input-list-selection-item .input-list-selection-expander-content p,
.switch-content .input-list-selection .input-list-selection-item.active .input-list-selection-expander-content p,
.switch-content .input-list-selection .input-list-selection-item .input-list-selection-expander-content ul li,
.switch-content .input-list-selection .input-list-selection-item.active .input-list-selection-expander-content ul li{
    font-size: 12px;
    line-height: 18px;
}
.switch-content .input-list-selection .input-list-selection-item .input-list-selection-expander-content ul.grey-bullets,
.switch-content .input-list-selection .input-list-selection-item.active .input-list-selection-expander-content ul.grey-bullets{
    margin-bottom: 10px;
}
.switch-content .input-list-selection .input-list-selection-item .input-list-selection-expander-content ul.grey-bullets li,
.switch-content .input-list-selection .input-list-selection-item.active .input-list-selection-expander-content ul.grey-bullets li{
    margin-bottom: 6px;
}
.switch-content .input-list-selection .input-list-selection-item .input-list-selection-expander-content ul.grey-bullets li:before,
.switch-content .input-list-selection .input-list-selection-item.active .input-list-selection-expander-content ul.grey-bullets li:before{
    margin-top: 4px;
}
.switch-content .credentials-wlan-option-hint{
    position: relative;
    border: 1px solid #bbb;
    background-color: #fff;
    padding: 15px 15px 0 15px;
}
.switch-content .credentials-wlan-option-hint .hint-icon{
    position: absolute;
    top: 12px;
    left: 15px;
    font-size: 30px;
}
.switch-content .credentials-wlan-option-hint .hint-text{
    padding-left: 40px;
}
@media only screen and (min-width: 746px){
    .switch-content .input-list-selection-container{
        display: table;
        width: 100%;
    }
    .switch-content .input-list-selection-container .input-list-selection-item{
        width: calc(50% - 8px);
        float: left;
        margin-top: 0;
        margin-left: 8px;
    }
    .no-touch .switch-content .input-list-selection-container .input-list-selection-item:hover > .input-radio label,
    .no-touch .switch-content .input-list-selection-container .input-list-selection-item:hover .input-list-selection-expander-content{
        border-color: #da291c;
        cursor: pointer;
    }
    .switch-content .input-list-selection-container .input-list-selection-item:first-child{
        margin-right: 8px;
        margin-left: 0;
    }
    .switch-content .input-list-selection .input-list-selection-item .input-radio label.label-element{
        border-bottom: 0;
    }
    .switch-content .input-list-selection .input-list-selection-item .input-list-selection-expander-content{
        background-color: #fcfcfc;
        border-color: #bbb;
        transition-property: background-color, border-color;
        transition-duration: 0.3s;
        transition-timing-function: linear;
    }
    .switch-content .input-list-selection .input-list-selection-item.active .input-list-selection-expander-content{
        border-color: #da291c;
    }
    .switch-content .input-list-selection .input-list-selection-item .input-list-selection-expander-content,
    .switch-content .input-list-selection .input-list-selection-item.active .input-list-selection-expander-content{
        padding-left: 16px;
        padding-right: 16px;
        font-size: 12px;
        line-height: 18px;
    }
}
@media only screen and (min-width: 747px){
    .switch-content .input-list-selection .input-list-selection-item .input-radio input[type="radio"]:checked + label.label-element,
    .switch-content .input-list-selection .input-list-selection-item .input-radio input[type="radio"] label.label-element,
    .switch-content .input-list-selection .input-list-selection-item > .input-radio label{
        padding-left: 50px;
    }
    .switch-content .input-list-selection .input-list-selection-item > .input-radio input[type="radio"] + label.label-element .label-wrapper:before{
        left: -34px;
    }
}
@media only screen and (min-width: 769px){
    .switch-content .input-list-selection-container .input-list-selection-item{
        width: calc(50% - 15px);
        float: left;
        margin-top: 0;
        margin-left: 15px;
    }
    .switch-content .input-list-selection-container .input-list-selection-item:first-child{
        margin-left: 0;
        margin-right: 15px;
    }
}
@media only screen and (max-width: 63.938em) {
    .switch-content .input-list-selection .input-list-selection-item > .input-radio input[type="radio"] + label.label-element .label-wrapper:before {
        top: 0;
    }
    .switch-content .input-list-selection .input-list-selection-item.active .input-list-selection-expander-content{
        padding-left: 16px;
    }
}
@media only screen and (min-width: 63.938em) {
    .switch-content .input-list-selection .input-list-selection-item .input-radio input[type="radio"]:checked + label.label-element,
    .switch-content .input-list-selection .input-list-selection-item .input-radio input[type="radio"] label.label-element,
    .switch-content .input-list-selection .input-list-selection-item > .input-radio label{
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        padding-right: 1.25rem;
    }
    .switch-content .input-list-selection .input-list-selection-item > .input-radio input[type="radio"] + label.label-element .label-wrapper:before{
        top: 0;
    }
}
/***********************
  form check
************************/
.columns.form-check-wrapper{
    float: right;
}

.panel p.password-info{
    color: #585858;
}
.form-check-wrapper ul{
    list-style-type: none;
    margin: 0 0 8px 0;
    padding: 0;
}
.form-check-wrapper ul li{
    background: url('/img/fres/lose/ic_formcheck.svg') no-repeat left top;
    background-size: 20px auto;
    font-size: 14px;
    line-height: 22px;
    padding-left: 28px;
    padding-bottom: 6px;
}
.form-check-wrapper ul li.is-checked{
    background: url('/img/fres/lose/ic_formcheck_checked.svg') no-repeat left top;
    background-size: 20px auto;
}
@media only screen and (max-width: 745px){
    .settings-set-password .form-check-wrapper ul{
        margin-bottom: 13px;
    }
}
@media only screen and (min-width: 746px){
    .settings-set-kkw .form-check-wrapper ul{
        margin-top: 15px;
    }
    .settings-set-password .form-check-wrapper ul{
        margin-top: 20px;
    }
}
/***********************
  password toggle (show/hide)
************************/
.input-wrapper.has-pwd-toggle input{
    padding-right: 48px;
}
.input-wrapper.has-pwd-toggle .pwd-toggle{
    position: absolute;
    top: 15px;
    right: 15px;
    background: url('/img/fres/lose/ic_password_show.svg') no-repeat left top;
    background-size: 100% auto;
    content: '';
    width: 24px;
    height: 21px;
    display: inline-block;
}
.input-wrapper.has-pwd-toggle .pwd-toggle.is-visible{
    background: url('/img/fres/lose/ic_password_hide.svg') no-repeat left top;
    background-size: 100% auto;
}
.no-touch .input-wrapper.has-pwd-toggle .pwd-toggle:hover{
    cursor: pointer;
}
/*****************************************
  teaser
*****************************************/
.image-text-teaser.absolute-image-left .text-content h2{
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 12px;
}
.image-text-teaser.absolute-image-left .text-content{
    padding-bottom: 15px;
}
.image-text-teaser.absolute-image-left .text-content .grey-bullets li{
    margin-bottom: 4px;
}
@media only screen and (min-width: 768px) {
    .image-text-teaser.absolute-image-left .text-content h2{
        font-size: 21px;
        line-height: 28px;
        margin-bottom: 22px;
    }
}
@media only screen and (min-width: 1024px){
    .image-text-teaser.absolute-image-left .image{
        left: 15px;
    }
    .image-text-teaser.absolute-image-left .text-content{
        padding: 30px 30px 15px 0;
    }
}



/*****************************************
  reduced-teaser-element full width
*****************************************/
.tnt-teaser .image-text-teaser{
    border: 1px solid #e1e1e1;
    background: #fff;
    overflow: hidden;
}
.tnt-teaser  .image-text-teaser .panel{
    position: relative;
}
.tnt-teaser .image-text-teaser.absolute-image-left .columns.large-3 .image{
    position: absolute;
    left: 15px;
    top: 0;
    right: 15px;
    bottom: 0;
    width: calc(100% - 30px);
}
@media only screen and (max-width: 768px){
    .tnt-teaser .image-text-teaser.absolute-image-left .columns.large-3 .image{
        width: 25%;
    }
}
@media only screen and (max-width: 767px){
    .tnt-teaser .image-text-teaser.absolute-image-left .columns.large-3 .image{
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
    }
}
.tnt-teaser .image-text-teaser .columns.large-9 .text-content{
    padding: 1.875rem 1.875rem 6.25rem 0rem;
}
@media only screen and (max-width: 768px){
    .tnt-teaser .image-text-teaser .columns.large-9 .text-content{
        float: right;
        width: 70%;
    }
}
@media only screen and (max-width: 767px){
    .tnt-teaser .image-text-teaser .columns.large-9 .text-content{
        padding: 1.25rem;
        width: 100%;
        float: none;
    }
}
.tnt-teaser .image-text-teaser .columns.large-9 .text-content h2{
    font-size: 1.5rem;
    margin-bottom: 15px;
}
@media only screen and (max-width: 745px){
    .tnt-teaser .image-text-teaser .columns.large-9 .text-content h2{
        font-size: 1.125rem;
    }
}
.tnt-teaser .image-text-teaser .columns.large-9 .text-content p:last-child{
    margin-bottom: 0;
}
.tnt-teaser .image-text-teaser .columns.large-9.button-container{
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 0.46875rem;
}
@media only screen and (max-width: 768px){
    .tnt-teaser .image-text-teaser .columns.large-9.button-container{
        float: right;
        width: 70%;
        padding-left: 0;
    }
}
@media only screen and (max-width: 767px){
    .tnt-teaser .image-text-teaser .columns.large-9.button-container{
        position: relative;
        bottom: auto;
        width: auto;
        float: none;
        padding-left: 0.46875rem;
    }
}
.tnt-teaser .image-text-teaser .columns.large-9.button-container .button-content{
    padding: 0 1.875rem 25px 0;
    margin-left: 0;
}
@media only screen and (max-width: 767px){
    .tnt-teaser .image-text-teaser .columns.large-9.button-container .button-content{
        padding: 0 1.25rem 1.25rem 1.25rem;
        margin-left: 0;
    }
    .tnt-teaser .image-text-teaser .columns.large-9.button-container .button-content .button.full{
        width: 100%;
    }
}

/*****************************************
  lightboxes
*****************************************/
.lightbox-link{
    position: relative;
}
.lightbox-link:after{
    font-family: 'A1iconfont';
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    line-height: 1;
    speak: none;
    text-transform: none;
    content: '\e64f';
    display: inline-block;
    padding-left: 0.375rem;
}

/*lightbox */
@media only screen and (max-width: 46.563em){
    .reveal-modal .close-reveal-modal{
        width: 40px;
        height: 40px;
        text-align: center;
    }
}

/* chat-link */
.chat-link{
    font-family: 'A1Serif', Verdana, sans-serif;
}
.chat-link:before{
    font-family: 'A1iconfont';
    content: '\e60f';
    margin-right: 0.3125rem;
    float: left;
}
p .chat-link{
    display: inline-block;
}
p .chat-link:before{
    margin: 0 0.2rem;
}


/* identification required pre-site style adjustment */
.identification .chat-link{
    font-family: 'A1Sans', Verdana, sans-serif;
}
@media only screen and (max-width: 746px){
    .identification h1{
        font-size: 1.375rem;
    }
    body .identification, .identification p, .identification li{
        font-size: 0.875rem;
    }
}
/* \ */

/* hint adjustment for mobile */
@media only screen and (max-width: 746px){
    .hint-element h3{
        font-size: 1rem;
    }
    .hint-element p{
        font-size: 0.875rem;
    }
}


/*****************************************
  captcha
*****************************************/
.recaptcha.has-error  > div:first-child > div:first-child {
    border: 1px solid #da291c;
}

::placeholder {
    color: #808080;
}
:-ms-input-placeholder,
::-ms-input-placeholder {
    color: #808080;
}